/* ============================================================ HEADER / NAVIGATION — refonte moderne (logo + menu + bouton "Rendez-vous atelier" sur une seule ligne, responsive). Scope : modules/mod_vgrf_navbar/tmpl/default-*.php (structure identique verifiee sur Audi/VW/CUPRA/SEAT/Skoda/Access) + .GlobHeaderNew/.LogoHeader/.PrisRendezBtn definis dans l index.php de chaque template. Aucune modification HTML : uniquement l ordre flexbox et le style des elements deja presents dans le DOM. ============================================================ */ :root .audi { --primary-color: #000; --secondary-color: #404040; --tertiary-color: #f50537; --text-color:#4c4c4c; --button-color:#000; --button-text-color:#fff; --button-hover-color:#f50537; } :root .vw,:root .volkswagen { --primary-color: #001e50; --secondary-color: #02a0d5; --tertiary-color: #001e50 ; --text-color:#000; --button-color:#001e50; --button-text-color:#fff; --button-hover-color:#001e50; } :root .skoda { --primary-color: #78faae; --secondary-color: #0e3a2f; --tertiary-color: #0e3a2f; --text-color:#0e3a2f; --button-color:#78faae; --button-text-color:#0e3a2f; --button-hover-color:#0e3a2f; } :root .seat { --primary-color: #ea5d1a; --secondary-color: #190f14; --tertiary-color: #ff0036; --text-color:#190F14; --button-color:#ea5d1a; --button-text-color:#000; --button-hover-color:#ea5d1a; } :root .cupra { --primary-color: #242424; --secondary-color: #83694e; --tertiary-color: #616652; --text-color:#242424; --button-color:#242424; --button-text-color:#fff; --button-hover-color:#242424; } :root { --nav-primary: var(--primary-color, #16181a); --nav-text: #16181a; --nav-muted: #6b7075; --nav-border: rgba(0, 0, 0, 0.08); --nav-bg-soft: #f6f7f9; --nav-radius: 12px; --nav-shadow: 0 12px 32px rgba(0, 0, 0, 0.12); --nav-duration: 180ms; } /* theme.css force html,body{height:100vh} : le header sticky ne peut pas dépasser la hauteur du body et disparaît au scroll */ html, body { height: auto !important; min-height: 100vh; } /* Le header est déjà fixe via theme.css : le placeholder UIkit est inutile et décale le contenu au scroll */ header .uk-sticky-placeholder { display: none !important; } /* Hauteur identique actif / inactif pour éviter le saut 82px → 64px */ header .uk-sticky .GlobHeaderNew .menuHeader { margin-top: 0; } /* ---------- Ligne d entete : logo + menu + bouton sur UNE seule ligne ---------- */ .GlobHeaderNew { display: flex; align-items: center; gap: 16px; min-height: 64px; padding: 8px 20px; } .GlobHeaderNew .LogoHeader { display: flex; align-items: center; order: 1; flex-shrink: 0; } .GlobHeaderNew .LogoHeader img { max-height: 36px; width: auto; } .GlobHeaderNew .LogoHeader .NameMarque { margin-left: 10px; font-size: 14px; color: var(--nav-text); white-space: nowrap; } .GlobHeaderNew .uk-float-right { order: 2; } /* Le menu prend tout l espace disponible entre le logo et le bouton */ .GlobHeaderNew #MenuDesktop.menuHeader { order: 3; flex: 1 1 auto; min-width: 0; /* autorise le menu a retrecir plutot que de passer a la ligne */ } #MenuDesktop #topMenuID { width: 100%; } .GlobHeaderNew .PrisRendezBtn { order: 4; flex-shrink: 0; margin-left: auto; } @media (min-width: 1024px) { /* IMPORTANT sur le z-index : header[role="banner"] est position:relative avec un z-index propre, ce qui cree un contexte d empilement : AUCUNE valeur de z-index posee sur un descendant (le dropdown) ne peut faire sortir ce descendant de ce contexte. C est donc le z-index du HEADER lui-meme qu il faut depasser celui de la barre sticky de la page listing (.StickyMob), qui recoit la classe UIkit .uk-sticky-fixed avec un z-index tres eleve (~980 par defaut chez UIkit) une fois "collee". D ou la valeur elevee ci-dessous plutot que 100. */ header[role="banner"] { position: relative; z-index: 1000; } .GlobHeaderNew .PrisRendezBtn a { display: inline-flex; align-items: center; justify-content: center; height: 40px; padding: 0 20px; border-radius: 999px; background-color: var(--nav-primary); color: #fff; font-weight: 600; font-size: 13px; white-space: nowrap; transition: transform var(--nav-duration) ease, box-shadow var(--nav-duration) ease; } .GlobHeaderNew .PrisRendezBtn a:hover { transform: translateY(-1px); box-shadow: 0 6px 16px rgba(0, 0, 0, 0.18); } } /* Le theme Cupra (templates/sw-concession-cupra) met "header{position: absolute}" par defaut (prevu pour un header transparent sur banniere en home) : la regle ci-dessus ne le corrige qu'a partir de 1024px. En dessous (mobile/tablette), sur les pages interieures (ex. /neuf), le header restait hors du flux et
(fil d'Ariane, etc.) se retrouvait rendu derriere lui, en haut de la page. On applique le meme correctif sans condition de largeur pour cette concession. */ .cupracitygarageparis header[role="banner"] { position: relative; z-index: 1000; } /* ---------- Bouton "Rendez-vous atelier" en mobile ---------- responsive.css (theme) place ce bouton en "position:absolute; right: 80px" (mobile) - une coordonnee fixe qui ignore la largeur reelle du logo + nom de concession a gauche, et le fait SUPERPOSER le nom de la concession des que celui-ci est un peu long (constate : bouton rouge au-dessus du texte "Audi Nice La P..."). On repasse ce bouton dans le flux flexbox normal de .GlobHeaderNew (deja en place, "order: 4; margin-left:auto" plus haut), pour qu il se retrouve TOUJOURS tout a droite du header, sans jamais chevaucher le reste, quelle que soit la longueur du nom de la concession. */ @media (max-width: 1023px) { .GlobHeaderNew .PrisRendezBtn { position: static !important; top: auto !important; right: auto !important; order: 4; margin-left: auto; flex-shrink: 0; } .GlobHeaderNew .PrisRendezBtn a { display: flex; align-items: center; justify-content: center; width: 40px; height: 40px; border-radius: 50%; background-color: var(--nav-primary); color: #fff; line-height: normal; } .GlobHeaderNew .PrisRendezBtn a svg { fill: #fff; } } /* ---------- Liens du menu principal (desktop) ---------- */ @media (min-width: 1024px) { #NavMenuSw.uk-navbar-container { background: transparent; } /* Menu centre dans l espace disponible entre le logo et le bouton (pas centre sur toute la largeur de la page, qui deborderait sur le logo/bouton, mais centre dans sa colonne flex du header). */ #NavMenuSw .uk-navbar-nav { display: flex; align-items: center; justify-content: center; width: 100%; gap: 2px; flex-wrap: nowrap; } #NavMenuSw .uk-navbar-nav > li { position: relative; } #NavMenuSw .uk-navbar-nav > li > a { display: flex; align-items: center; height: 64px; padding: 0 10px; font-size: 13px; color: var(--nav-text); white-space: nowrap; position: relative; border-bottom: none !important; /* neutralise le 2e trait (noir, statique) impose par theme.css au survol */ transition: color var(--nav-duration) ease; } /* Soulignement anime au survol / etat actif, plutot qu un fond plat */ #NavMenuSw .uk-navbar-nav > li > a::after { content: ""; position: absolute; left: 14px; right: 14px; bottom: 14px; height: 2px; background: var(--nav-primary); transform: scaleX(0); transform-origin: left; transition: transform var(--nav-duration) ease; } #NavMenuSw .uk-navbar-nav > li:hover > a, #NavMenuSw .uk-navbar-nav > li.uk-active > a { color: var(--nav-primary); border-bottom: none !important; } #NavMenuSw .uk-navbar-nav > li:hover > a::after, #NavMenuSw .uk-navbar-nav > li.uk-active > a::after { transform: scaleX(1); } /* Pas de chevron : seul le soulignement rouge signale le survol/l etat actif, y compris sur les items a sous-menu (demande explicite). */ /* ---------- Panneaux deroulants (dropdowns) ----------------------------- IMPORTANT : templates/sw-concession-XXX/css-op/theme.css force deja, sur ces memes selecteurs, un ancien design "bandeau plein largeur sous le header" : .GlobHeaderNew .uk-navbar-dropdown { left:0!important; right:0!important; width:100% } et .uk-navbar-dropdown-nav { display:flex; justify-content:center }. C est ce qui cassait le rendu (colonnes ecrasees, texte qui retombe a la ligne). On neutralise ces proprietes precises avec !important pour retrouver un vrai panneau flottant compact, sans toucher au reste du theme. -------------------- */ .GlobHeaderNew .uk-navbar-dropdown, #NavMenuSw .uk-navbar-dropdown { left: 0 !important; right: auto !important; width: auto !important; max-width: 300px !important; min-width: 220px; top: 100% !important; margin-top: 10px !important; border-radius: var(--nav-radius); box-shadow: var(--nav-shadow) !important; border: 1px solid var(--nav-border); padding: 10px; background: #fff; } /* Le mega-menu (Après-vente & Services, 2 colonnes) a besoin de plus de place : on l identifie par la presence de .submenu a l interieur. IMPORTANT : un panneau en position absolute avec seulement max-width se retreint a la largeur de son contenu ("shrink-to-fit"), ce qui ecrasait les 2 colonnes l une sur l autre (constate visuellement : 169px de large au lieu de 460px). On fixe donc une largeur reelle, pas seulement un plafond. */ .GlobHeaderNew .uk-navbar-dropdown:has(.submenu), #NavMenuSw .uk-navbar-dropdown:has(.submenu) { width: 620px !important; max-width: 620px !important; } .GlobHeaderNew .uk-navbar-dropdown-nav, #NavMenuSw .uk-navbar-dropdown-nav, .GlobHeaderNew .uk-navbar-dropdown .submenu > ul, #NavMenuSw .uk-navbar-dropdown .submenu > ul { display: block !important; justify-content: initial !important; } .GlobHeaderNew .uk-navbar-dropdown-nav li, #NavMenuSw .uk-navbar-dropdown-nav li, .GlobHeaderNew .uk-navbar-dropdown .submenu > ul li, #NavMenuSw .uk-navbar-dropdown .submenu > ul li { display: block !important; width: 100% !important; } .GlobHeaderNew .uk-navbar-dropdown-nav li a, #NavMenuSw .uk-navbar-dropdown-nav li a, .GlobHeaderNew .uk-navbar-dropdown .submenu > ul li a, #NavMenuSw .uk-navbar-dropdown .submenu > ul li a { display: flex !important; align-items: center; width: 100%; min-height: 40px; padding: 8px 8px !important; border-radius: 8px; font-size: 13.5px !important; line-height: 1.4 !important; white-space: nowrap; text-decoration: none !important; transition: background-color var(--nav-duration) ease, color var(--nav-duration) ease; } .GlobHeaderNew .uk-navbar-dropdown-nav li a:hover, #NavMenuSw .uk-navbar-dropdown-nav li a:hover, .GlobHeaderNew .uk-navbar-dropdown .submenu > ul li a:hover, #NavMenuSw .uk-navbar-dropdown .submenu > ul li a:hover { background-color: var(--nav-bg-soft); color: var(--nav-primary) !important; text-decoration: none !important; } /* Titres de colonne dans les mega-menus (ex. "Après-vente", "Garantie") : couvre a la fois le markup "uk-navbar-dropdown-nav" et le markup alternatif "submenu > ul" (utilise par ex. sur le sous-menu Audi Après-vente & Services, qui n a pas la classe uk-navbar-dropdown-nav et restait donc sans style/avec des liens soulignes). */ .uk-navbar-dropdown-nav > li > span, .uk-navbar-dropdown .submenu > ul > li > span { display: block; padding: 10px 14px 4px; font-size: 10.5px; font-weight: 700 !important; text-transform: uppercase; letter-spacing: 0.06em; color: var(--nav-muted) !important; } /* Mega-menu 2 colonnes (Après-vente & Services) : vraie grille cote a cote avec separateur, la largeur du panneau ayant ete elargie plus haut (max-width: 460px) pour laisser la place aux deux colonnes. */ .uk-navbar-dropdown .submenu { display: flex !important; flex-wrap: nowrap !important; /* uk-grid met flex-wrap:wrap par defaut -> 2e colonne repassait a la ligne */ align-items: stretch; width: 100% !important; gap: 0; } .uk-navbar-dropdown .submenu > ul { flex: 1 1 50% !important; width: 50% !important; max-width: 50% !important; min-width: 0; margin-top: 0 !important; /* neutralise .uk-grid-margin ajoute par UIkit */ } .uk-navbar-dropdown .submenu > ul:first-child { border-right: 1px solid var(--nav-border); padding-right: 10px; margin-right: 10px; } .uk-navbar-dropdown .submenu > ul:nth-child(2) { padding-left: 10px; border-right: 1px solid var(--nav-border); padding-right: 10px; margin-right: 10px; } /* Lien "Rendez-vous en atelier" mis en avant dans le mega-menu */ .PrisRendezBtnMenu { display: flex !important; align-items: center; justify-content: space-between; gap: 10px; background: var(--nav-primary) !important; color: #fff !important; font-weight: 600; padding: 10px 14px !important; margin: 2px 0 8px !important; border-radius: 8px; } /* Le hover generique des liens du menu (".uk-navbar-dropdown-nav li a:hover" / ".submenu > ul li a:hover") force "color: var(--nav-primary) !important" (texte colore sur fond clair). Ce lien-ci a DEJA un fond de la couleur de la marque : sans re-forcer le blanc ici, le survol affichait du texte rouge (ou bleu/vert selon la marque) sur un fond de la MEME couleur => texte invisible. Il faut repeter exactement la chaine de selecteurs generique (specificite egale) + la classe .PrisRendezBtnMenu pour etre sur de gagner sur le hover generique. On fonce legerement le fond (filter, pas opacity, pour ne pas eclaircir vers le blanc de la page) et on garde le texte blanc, quelle que soit la marque. */ .GlobHeaderNew .uk-navbar-dropdown-nav li a.PrisRendezBtnMenu:hover, #NavMenuSw .uk-navbar-dropdown-nav li a.PrisRendezBtnMenu:hover, .GlobHeaderNew .uk-navbar-dropdown .submenu > ul li a.PrisRendezBtnMenu:hover, #NavMenuSw .uk-navbar-dropdown .submenu > ul li a.PrisRendezBtnMenu:hover { background: var(--nav-primary) !important; color: #fff !important; filter: brightness(0.88); } .PrisRendezBtnMenu:hover * { color: #fff !important; } .newrendez { display: inline-flex; align-items: center; flex-shrink: 0; margin: 0; padding: 2px 9px; border-radius: 999px; background: rgba(255, 255, 255, 0.25); color: #fff; font-size: 10px; font-weight: 700; letter-spacing: .3px; text-transform: uppercase; } } /* ============================================================ MOTEUR DE RECHERCHE — .RefonteMoteur2022 (mod_vgrf_search_vehicule) Scope : modules/mod_vgrf_search_vehicule/tmpl/home.php + tmpl/ partials/home/{occasions,neufs}.inc Structure reelle (identique pour Occasions/Neufs) : bandeau image (.BannMoteurRefonte.RefonteMoteur2022) > .ContentBannNew > h1 + .TabHome (uk-tab Occasions/Neufs) + .MoteurSearchHomeNew > .MoteurCard (DIV AJOUTEE dans occasions.inc/neufs.inc : regroupe TOUT le bloc de recherche — .FitlerLeft, .GlobFiltreMoteur, .SearchVocal/.FindVocal, .RechercheLibre, .BtnEnvoie — dans une seule carte vitree, au lieu de plusieurs elements epars sur l image) qui contient .FitlerLeft (barre de filtres Marque/Modele/Energie/Prix, desktop uniquement, chaque filtre = .ElementDrop avec dropdown .Mycontent pilote par UIkit/JS) + .GlobFiltreMoteur (selects Marque/Modele, mobile) + .SearchVocal/ .FindVocal (recherche texte/vocale, affichee seulement en mode "Recherche libre") + .RechercheLibre (lien bascule recherche simple/ avancee) + .BtnEnvoie (bouton "Voir les vehicules"). La bascule Recherche libre <-> filtres est geree par du JS existant (media/VGRF.js) qui ajoute/retire la classe .RechercheLibre-actif sur le conteneur #vehicule-search-home-* : NE JAMAIS forcer un display permanent sur .SearchVocal/.FitlerLeft hors de ce scope, sous peine de les rendre visibles en meme temps (bug corrige ici : la regle .SearchVocal{display:flex} posee precedemment cassait le display:none par defaut de .RechercheLibreElm). Modernisation : uniquement l habillage visuel (radius, ombres, couleurs neutres, transitions). On ne touche a AUCUNE valeur de position/largeur/z-index deja fixee par le theme, car les panneaux dropdown (.Mycontent) et le slider d onglets (.TabMobMoeur:after) sont positionnes en JS/CSS sur ces mesures precises. ============================================================ */ /* ---------- Centrage horizontal du bloc de recherche + positionnement un peu plus haut dans le bandeau (desktop uniquement : .ContentBannNew est deja position:absolute inset:0 par le theme, donc sa hauteur = hauteur du bandeau, on peut la transformer en conteneur flex sans rien casser). Un centrage vertical strict (justify-content:center) laissait un trop grand vide au-dessus du titre : on remonte le tout avec un padding-top au lieu d un centrage pur. ---------- */ @media (min-width: 961px) { .RefonteMoteur2022 .ContentBannNew { display: flex; flex-direction: column; align-items: center; justify-content: flex-start; padding-top: 56px; } } /* ---------- Onglets Occasions / Neufs (desktop, .TabHome) : centres, un peu plus grands (taille de clic/texte) mais garde une hauteur compacte comme demande. ---------- */ .RefonteMoteur2022 .TabMobMoeur { display: flex; justify-content: center; width: 100%; } .RefonteMoteur2022 .TabHome { display: inline-flex; flex-wrap: nowrap !important; gap: 4px; max-width: 290px; padding: 4px; background: rgba(255, 255, 255, 0.16); border-radius: 999px; backdrop-filter: blur(6px); } .RefonteMoteur2022 .TabHome li { border-radius: 999px; overflow: hidden; } .RefonteMoteur2022 .TabHome li a { height: 42px; padding: 0 36px !important; font-size: 14.5px; border-radius: 999px; transition: color 200ms ease; } .RefonteMoteur2022 .TabHome li.uk-active { border-radius: 999px; box-shadow: 0 8px 20px rgba(0, 0, 0, 0.3); } .RefonteMoteur2022 .TabHome li.uk-active:after { display: none; } /* ---------- Carte vitree unique regroupant tout le moteur ---------- */ .RefonteMoteur2022 .MoteurCard { display: flex; flex-direction: column; align-items: center; gap: 10px; width: 100%; max-width: 760px; margin: 14px auto 0; padding: 18px 22px; background: rgba(255, 255, 255, 0.14); backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px); border: 1px solid rgba(255, 255, 255, 0.28); border-radius: 28px; box-shadow: 0 25px 60px rgba(0, 0, 0, 0.35); box-sizing: border-box; /* Cree un contexte d empilement au-dessus des sections suivantes de la page (slider de bannieres, etc.) : sans z-index explicite ici, le panneau dropdown .Mycontent (position:absolute, enfant de cette carte) se faisait recouvrir par la section suivante des qu il depassait la hauteur du bandeau (constate sur capture : le menu "Modele" etait tronque net a la jonction avec le bloc suivant). */ position: relative; z-index: 6; } .RefonteMoteur2022 .MoteurCard .FitlerLeft, .RefonteMoteur2022 .MoteurCard .SearchVocal { width: 100%; } /* ---------- Ligne du bas : "Recherche libre"/"avancee" a gauche, bouton "Voir les vehicules" a droite (desktop). .MoteurCardFooter est une div ajoutee dans occasions.inc/neufs.inc qui regroupe les 2 liens de bascule (mutuellement exclusifs) + les 2 variantes du bouton submit (desktop/mobile, egalement mutuellement exclusives). ---------- */ /* Le JS (VGRF.js, searchSwitcherHandler) ajoute/retire uniquement la classe .RechercheLibre-actif sur le conteneur du module quand on clique "Recherche libre"/"Recherche avancee" — le bouton .BtnEnvoie n est cible par aucune classe .RechercheLibreElm/.SearchAvanceElm dans le HTML, donc il restait visible dans les 2 modes. On le masque ici explicitement en mode "Recherche libre" (ou il n a pas de sens, puisqu il n y a alors ni marque/modele/energie/prix selectionnes) et on s assure qu il reapparait en mode "Recherche avancee" (etat par defaut). S applique aux 2 widgets (occasions et neufs), classes identiques sur les 2 partials. */ .RefonteMoteur2022 .RechercheLibre-actif .MoteurCardFooter .BtnEnvoie.uk-visible\@s.uk-visible\@m { display: none; } .RefonteMoteur2022 .MoteurCardFooter .BtnEnvoie.uk-visible\@s.uk-visible\@m { display: block; } .RefonteMoteur2022 .MoteurCardFooter { width: 100%; display: flex; align-items: center; justify-content: space-between; gap: 12px; } .RefonteMoteur2022 .MoteurCardFooter .RechercheLibre { margin: 0; } /* ---------- Barre de filtres desktop (.FitlerLeft) : chaque filtre devient sa propre pilule (petit espace entre chacune) plutot qu une seule barre fusionnee avec traits de separation. ---------- */ .RefonteMoteur2022 .FitlerLeft { background: transparent; box-shadow: none; display: flex; } .RefonteMoteur2022 .FitlerLeft .AccordionFilter { display: flex; width: 100%; gap: 6px; } /* .Myfilter-1/.Myfilter-2/.myaccordion ne sont que des conteneurs de mise en page (pas de style visuel propre) : display:contents les retire de l arbre de rendu pour que CHAQUE AccordGlob (Marque, Modele, Energie, Prix) devienne un enfant flex direct de .AccordionFilter avec un poids egal (flex:1). Resultat : la 1ere pilule touche toujours le bord gauche et la derniere le bord droit (alignee avec "Recherche libre"/le bouton juste en dessous), que la page ait 3 filtres (Neufs) ou 4 (Occasions) — avant ce correctif, le justify-content:center herite du theme centrait le groupe et laissait ~30px de marge de chaque cote, desalignant tout le bas de la carte. */ .RefonteMoteur2022 .FitlerLeft .Myfilter-1, .RefonteMoteur2022 .FitlerLeft .Myfilter-2, .RefonteMoteur2022 .FitlerLeft .myaccordion { display: contents; } .RefonteMoteur2022 .FitlerLeft .AccordGlob { flex: 1 1 0; width: auto !important; margin-right: 0 !important; } /* Hauteur reduite + centrage flex du texte : le theme ne definit qu un padding (15px) sans alignement vertical explicite, ce qui laissait le libelle ("Marque") mal centre / plaque en bas de la pilule une fois celle-ci agrandie par notre habillage (constate sur capture). */ .RefonteMoteur2022 .FitlerLeft .Mytitle.ElementDrop { display: flex !important; align-items: center !important; justify-content: space-between; height: 44px; box-sizing: border-box; background: #fff; border-radius: 999px !important; border-color: rgba(0, 0, 0, 0.06); box-shadow: 0 6px 16px rgba(0, 0, 0, 0.1); transition: background-color 180ms ease; } /* Le chevron (icone :before, float:right en mode bloc) devient un item flex : sans "order", il se placerait AVANT le libelle (les pseudo- elements ::before sont generes en premier dans l ordre des boites), ce qui inversait visuellement "Marque" et la fleche. */ .RefonteMoteur2022 .FitlerLeft .Mytitle.ElementDrop:before { order: 2; float: none; margin-left: 10px; flex-shrink: 0; } @media (hover: hover) { .RefonteMoteur2022 .FitlerLeft .ElementDrop:hover, .RefonteMoteur2022 .FitlerLeft .ElementDrop[aria-expanded="true"] { background-color: var(--color-bg-soft, #f6f7f9); } } .RefonteMoteur2022 .FitlerLeft .Myfilter-1 .AccordGlob:first-child .Mytitle.ElementDrop { padding-left: 20px !important; } /* ---------- Panneaux dropdown (.Mycontent) et items de filtre (marque/modele/energie = liste de checkbox, prix = slider) : ancres pile sous LEUR PROPRE AccordGlob (et non a une position fixe), avec un fondu + glissement d ouverture. ---------- */ .RefonteMoteur2022 .AccordGlob { position: relative; } .RefonteMoteur2022 .Mycontent { min-width: 240px; margin-top: 8px !important; border-radius: 16px !important; border: 1px solid rgba(0, 0, 0, 0.06); box-shadow: 0 20px 45px rgba(0, 0, 0, 0.22) !important; opacity: 0; transform: translateY(-8px); transition: opacity 180ms cubic-bezier(0.22, 1, 0.36, 1), transform 180ms cubic-bezier(0.22, 1, 0.36, 1); } /* Le panneau Prix a besoin d une largeur suffisante pour aligner les 2 champs "De"/"a" cote a cote sans repasser a la ligne. */ .RefonteMoteur2022 .PrixAccrod .Mycontent { min-width: 300px; } .RefonteMoteur2022 .Mycontent.uk-open { opacity: 1; transform: translateY(0); } .RefonteMoteur2022 .FitlerLeft .TypeOffFilter.search-input, .RefonteMoteur2022 .FitlerLeft input.search-input { border-radius: 10px !important; height: 40px !important; padding: 0 14px; font-size: 13px !important; } .RefonteMoteur2022 .FitlerLeft .TypeOffFilter { margin-bottom: 2px; } .RefonteMoteur2022 .FitlerLeft .TypeOffFilter label { padding: 9px 10px; border-radius: 10px; font-weight: 600; letter-spacing: 0.02em; transition: background-color 160ms ease; } @media (hover: hover) { .RefonteMoteur2022 .FitlerLeft .TypeOffFilter label:hover { background-color: var(--color-bg-soft, #f6f7f9); } } .RefonteMoteur2022 .FitlerLeft .TypeOffFilter label i { font-weight: 500; } .RefonteMoteur2022 .FitlerLeft .TypeOffFilter span { color: var(--color-muted, #6b7075); font-weight: 600; } .RefonteMoteur2022 .FitlerLeft .TypeOffFilter input[type="checkbox"] { width: 16px; height: 16px; border-radius: 4px; accent-color: var(--color-text, #16181a); } .RefonteMoteur2022 .FitlerLeft .lienPlusMoinsFilter { border-radius: 10px; transition: background-color 160ms ease; } @media (hover: hover) { .RefonteMoteur2022 .FitlerLeft .lienPlusMoinsFilter:hover { background-color: var(--color-bg-soft, #f6f7f9); } } /* ---------- Panneau Prix (curseur de plage ion.rangeSlider + champs "De"/"a") : le theme livre un curseur tres fin et des inputs minuscules (hauteur 21px), on modernise en gardant le meme composant JS. ---------- */ .RefonteMoteur2022 .DropDownSlider { padding: 6px 4px 2px; } .RefonteMoteur2022 .range-wrapper { padding-top: 6px; } .RefonteMoteur2022 .irs--flat .irs-line { height: 4px; border-radius: 999px; background-color: var(--color-bg-soft, #ebedf0); } .RefonteMoteur2022 .irs--flat .irs-bar { height: 4px; background-color: var(--color-text, #16181a); } .RefonteMoteur2022 .irs--flat .irs-handle > i:first-child { width: 20px; height: 20px; margin-left: -14px; border: none; background-color: #fff; box-shadow: 0 2px 8px rgba(0, 0, 0, 0.28); transition: transform 160ms ease; } @media (hover: hover) { .RefonteMoteur2022 .irs--flat .irs-handle:hover > i:first-child, .RefonteMoteur2022 .irs--flat .irs-handle.state_hover > i:first-child { background-color: #fff; transform: scale(1.1); } } .RefonteMoteur2022 .irs--flat .irs-from, .RefonteMoteur2022 .irs--flat .irs-to, .RefonteMoteur2022 .irs--flat .irs-single { background-color: var(--color-text, #16181a); border-radius: 6px; font-weight: 600; } .RefonteMoteur2022 .irs--flat .irs-from:before, .RefonteMoteur2022 .irs--flat .irs-to:before, .RefonteMoteur2022 .irs--flat .irs-single:before { border-top-color: var(--color-text, #16181a); } /* Les 2 ".budgetfilter" (De/a) comptent sur width:50%+float:left (theme) pour se placer cote a cote : avec des champs plus larges (100px) que l original (90px), le total depassait la moitie du panneau et le champ "De" chevauchait le libelle "a" du second bloc. On passe la ligne en flex pour un partage d espace fiable quelle que soit la largeur des champs. */ .RefonteMoteur2022 .range-wrapper { display: flex; flex-wrap: wrap; gap: 14px; } /* Le curseur (span.irs, injecte par le plugin JS) occupe toute la largeur sur sa propre ligne ; les 2 ".budgetfilter" (De/a) passent alors ensemble a la ligne suivante et se partagent l espace. */ .RefonteMoteur2022 .range-wrapper > .irs { flex: 1 1 100%; } .RefonteMoteur2022 .budgetfilter { width: auto; float: none; flex: 1 1 0; /* Sans min-width:0, un flex-item garde par defaut la largeur minimale de son contenu (label + input) : les 2 blocs "De"/"a" ne tenaient alors jamais sur la meme ligne (chacun retombant seul sur sa ligne, empechant tout partage d espace) malgre flex:1. */ min-width: 0; gap: 8px; } .RefonteMoteur2022 .budgetfilter.uk-flex-right { justify-content: flex-end; } .RefonteMoteur2022 .budgetfilter label { font-size: 12px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.03em; color: var(--color-muted, #6b7075); } .RefonteMoteur2022 .budgetfilter input[type="text"] { height: 38px !important; width: 100px !important; padding: 0 10px; border: 1.5px solid var(--color-border, rgba(0, 0, 0, 0.1)); border-radius: 10px; font-size: 13.5px; transition: border-color 160ms ease; } .RefonteMoteur2022 .budgetfilter input[type="text"]:focus { outline: none; border-color: var(--color-text, #16181a); } /* ---------- Recherche libre / avancee (lien bascule) ---------- */ .RefonteMoteur2022 .MoteurSearchHomeNew .RechercheLibre { margin-top: 0; } .RefonteMoteur2022 .MoteurSearchHomeNew .RechercheLibre span { display: inline-flex; align-items: center; gap: 8px; padding: 9px 18px; white-space: nowrap; border-radius: 999px; background: rgba(255, 255, 255, 0.18); transition: background-color 200ms ease; } @media (hover: hover) { .RefonteMoteur2022 .MoteurSearchHomeNew .RechercheLibre span:hover { background: rgba(255, 255, 255, 0.3); } } /* ---------- Recherche vocale/texte (mode "Recherche libre" actif) : meme carte pilule blanche que la barre de filtres (.FitlerLeft), au lieu d un champ carre colle a un bouton micro carre sombre. Structure reelle : .SearchVocal > .inputvocal.autocomplete-search- wrapper (input + .result) ET .Speech (bouton micro) sont DEUX ENFANTS DIRECTS/FRERES de .SearchVocal (pas l un dans l autre) : le conteneur flex doit donc etre .SearchVocal lui-meme. IMPORTANT : display:flex n est applique QUE lorsque le JS active .RechercheLibre-actif — sinon .SearchVocal (qui porte aussi la classe .RechercheLibreElm, display:none par defaut) redevenait visible en permanence et se superposait a la barre de filtres. ---------- */ .RefonteMoteur2022 .RechercheLibre-actif .SearchVocal { max-width: 100%; display: flex; align-items: center; position: relative; background: #fff; border-radius: 999px; box-shadow: 0 10px 26px rgba(0, 0, 0, 0.14); /* PAS d overflow:hidden ici : .result (liste d autocompletion) est position:absolute et enfant de .inputvocal, donc a l interieur de cette pilule — un overflow:hidden sur le parent la decoupait/ masquait entierement des qu elle depassait la hauteur de la pilule (bug signale : les suggestions ne s affichaient jamais). Les coins de l input/bouton micro sont arrondis individuellement au lieu de compter sur le clip du conteneur. */ } .RefonteMoteur2022 .MoteurSearchHomeNew .SearchVocal .inputvocal.autocomplete-search-wrapper { flex: 1 1 auto; width: auto; float: none; position: relative; } .RefonteMoteur2022 .MoteurSearchHomeNew .SearchVocal .inputvocal input { width: 100%; height: 50px; padding: 0 22px; border-radius: 999px 0 0 999px; } .RefonteMoteur2022 .MoteurSearchHomeNew .SearchVocal .Speech { flex: 0 0 auto; display: flex; align-items: center; justify-content: center; width: 50px; height: 50px; padding-right: 6px; } .RefonteMoteur2022 .MoteurSearchHomeNew .SearchVocal .Speech input { width: 36px; height: 36px; border-radius: 50%; background-color: var(--color-text, #16181a); background-size: 16px; transition: background-color 180ms ease; } @media (hover: hover) { .RefonteMoteur2022 .MoteurSearchHomeNew .SearchVocal .Speech input:hover { background-color: var(--color-primary, var(--nav-primary, #16181a)); } } /* ---------- Liste de suggestions (.result, autocompletion "Recherche libre") : le theme ne definit qu un fond blanc plat colle a l input ; on en fait une carte flottante moderne, separee de la pilule, avec un survol marque sur chaque suggestion. ---------- */ .RefonteMoteur2022 .MoteurSearchHomeNew .SearchVocal .result { left: 0; right: 0; top: calc(100% + 10px) !important; margin: 0; padding: 8px; max-height: 340px; border-radius: 16px; box-shadow: 0 20px 45px rgba(0, 0, 0, 0.24); } .RefonteMoteur2022 .MoteurSearchHomeNew .SearchVocal .result a { padding: 10px 14px; border-radius: 10px; font-size: 13.5px; transition: background-color 140ms ease; } @media (hover: hover) { .RefonteMoteur2022 .MoteurSearchHomeNew .SearchVocal .result a:hover { background-color: var(--color-bg-soft, #f6f7f9); } } /* ---------- Bouton "Voir les vehicules" : centre horizontalement ET verticalement dans la carte (flex column + align-items:center du parent .MoteurCard), plus besoin du float/width:100% du theme. ---------- */ .RefonteMoteur2022 .MoteurSearchHomeNew .BtnEnvoie { width: auto; float: none; margin-top: 4px; /* Le theme place ce bouton en position:absolute avec bottom:-30px en mobile (@media max-width, .RefonteMoteur2022 .BtnEnvoie) : pense a l origine pour deborder volontairement sous le bandeau. Dans notre carte vitree, cela faisait sortir le bouton "Lancer la recherche" du bas du bloc (visible sur capture, bouton a moitie hors cadre). On le repasse en flux normal pour qu il reste contenu dans la carte comme les autres champs. */ position: static !important; bottom: auto !important; } .RefonteMoteur2022 .MoteurSearchHomeNew .BtnEnvoie .uk-button { border-radius: 999px !important; transition: transform 200ms ease, box-shadow 200ms ease; } /* "Recherche libre" (lien bascule, desktop) : largeur fixe de 420px et meme hauteur que le bouton "Voir les vehicules d'occasion/neufs" a cote, dans la ligne .MoteurCardFooter. Cible .occasions.inc ET .neufs.inc (memes classes CSS sur les deux partials). */ /* Pas de display:flex ici (ni sur le span) : .SearchAvanceElm vaut display:none des que .RechercheLibre-actif est actif (home.php) — un display force sans condition ecraserait ce masquage et le lien resterait visible apres avoir clique dessus. On garde le display (block) herite du theme et on centre verticalement avec line-height, qui n a pas cet effet de bord. */ .RefonteMoteur2022 .MoteurCardFooter .SearchLibre.RechercheLibre.SearchAvanceElm.uk-visible\@s.uk-visible\@m { flex: 0 0 420px; width: 420px; height: 54px; } .RefonteMoteur2022 .MoteurCardFooter .SearchLibre.RechercheLibre.SearchAvanceElm.uk-visible\@s.uk-visible\@m span { width: 100%; height: 54px; line-height: 54px; } /* "Recherche avancee" (etat par defaut, remplace "Recherche libre" au meme endroit une fois RechercheLibre-actif retire) : meme hauteur que "Recherche libre", et meme largeur que le bouton "Voir les vehicules d'occasion/neufs" juste a cote — les deux sont donc fixes a une largeur commune (300px) pour matcher exactement, le texte du bouton differant selon occasion/neuf (largeur naturelle sinon differente d une page a l autre). */ /* Pas de display:flex ici (ni sur le span) : .RechercheLibreElm vaut display:none par defaut (home.php) et ne passe a display:block que lorsque .RechercheLibre-actif est present sur le module — un display force sans condition ecraserait ce masquage et le lien resterait visible en permanence (bug constate sur capture : "Recherche libre" + "Recherche avancee" + le bouton tous visibles en meme temps). La largeur/hauteur restent sans condition (sans effet tant que display:none s applique), seul le centrage vertical passe par line-height plutot que flex. */ .RefonteMoteur2022 .MoteurCardFooter .SearchAvance.RechercheLibre.RechercheLibreElm.uk-visible\@s.uk-visible\@m { width: 300px; height: 54px; } .RefonteMoteur2022 .MoteurCardFooter .SearchAvance.RechercheLibre.RechercheLibreElm.uk-visible\@s.uk-visible\@m span { width: 100%; height: 54px; line-height: 54px; } .RefonteMoteur2022 .MoteurCardFooter .BtnEnvoie.uk-visible\@s.uk-visible\@m .uk-button { width: 300px; height: 54px; line-height: 54px; padding-top: 0; padding-bottom: 0; box-sizing: border-box; text-align: center; } @media (hover: hover) { .RefonteMoteur2022 .MoteurSearchHomeNew .BtnEnvoie .uk-button:hover { transform: translateY(-2px); box-shadow: 0 12px 26px rgba(0, 0, 0, 0.35); } } /* ---------- Responsive (mobile/tablette, filtres = selects + recherche texte plutot que la barre .FitlerLeft, masquee sous 960px) ---------- */ @media (max-width: 960px) { /* Le bandeau mobile a une hauteur fixe (425px, imposee par le theme, .RefonteMoteur2022{height:425px}) : la carte + son espacement au- dessus (h1, onglets) devaient tenir dedans, sinon elle debordait sur le bloc suivant de la page (constate sur capture : le bas de la carte et le bouton "Lancer la recherche" empietaient sur le slider de bannieres en dessous). On resserre les marges et les hauteurs de chaque element. */ .RefonteMoteur2022 h1 { margin-top: 0 !important; margin-bottom: 6px !important; } .RefonteMoteur2022 .TabMobMoeur { margin: 10px auto !important; } .RefonteMoteur2022 .TabMobMoeur li.uk-active { background: var(--primary-color); } .RefonteMoteur2022 .MoteurCard { margin-top: 6px; padding: 12px; border-radius: 20px; gap: 8px; } /* En desktop, .MoteurCardFooter est une ligne (lien bascule a gauche, bouton a droite) : en mobile, le lien est masque par le theme (uk-visible@s uk-visible@m) et il ne reste que le bouton — le flex row par defaut le faisait pourtant retrecir a son contenu au lieu de garder sa largeur de 90%. On repasse la ligne en bloc simple. */ .RefonteMoteur2022 .MoteurCardFooter { display: block; width: 100%; } /* Le theme centre/retrecit ces blocs (max-width:305px, margin:auto) : dans la carte vitree on les etire pleine largeur pour un alignement coherent avec le reste du bloc de recherche. */ .RefonteMoteur2022 .MoteurCard .GlobFiltreMoteur, .RefonteMoteur2022 .MoteurCard .FindVocal { align-self: stretch; width: 100%; } .RefonteMoteur2022 .MoteurCard .GlobFiltreMoteur .LienGlobFiltreMoteur, .RefonteMoteur2022 .MoteurCard .FindVocal .autocomplete-search, .RefonteMoteur2022 .MoteurCard .FindVocal .inputvocal { max-width: 100% !important; width: 100% !important; text-align: left !important; } .RefonteMoteur2022 .MoteurSearchHomeNew .BtnEnvoie button.uk-button { display: block; width: 90%; max-width: 305px; margin: 4px auto 0; border-radius: 37px !important; height: 44px; line-height: 44px; padding: 0; } .RefonteMoteur2022 .GlobFiltreMoteur .LienGlobFiltreMoteur { border-radius: 14px !important; margin-top: 0 !important; margin-bottom: 6px !important; min-height: 40px !important; box-shadow: 0 6px 16px rgba(0, 0, 0, 0.12); } .RefonteMoteur2022 .MoteurSearchHomeNew .SearchVocal .inputvocal input, .RefonteMoteur2022 .MoteurSearchHomeNew .SearchVocal .Speech { height: 40px; } .RefonteMoteur2022 .MoteurSearchHomeNew .SearchVocal .Speech { width: 40px; } /* Liste native du