/* =============================================================
   vehiclesearch.css - v2.12.11 (refonte design "Tesla / Apple")
   PALIERS 1+2+3 + tous les hotfix
   -------------------------------------------------------------
   v2.12.0 = palier 1 minimal fonctionnel (markup et JS adaptes)
   v2.12.1 = patch CSS bandeaux compat / categorie / filtrage
   v2.12.2 = palier 2 : CSS finalise du mode RECHERCHE sur les
             4 contextes (HOME/INNER x desktop/mobile).
   v2.12.3 = HOTFIX : fix bug mobile Modele invisible + radius 6px
   v2.12.4 = HOTFIX : suppression du double trait or + fix Annee
             tronque mobile
   v2.12.5 = PALIER 3 : mode MEMOIRE finalise sur les 4 contextes
   v2.12.6 = HOTFIX visuels palier 3 (chevron HOME 32px+glow, INNER
             18px statique, fix nom mobile, listener CTA conditionnel)
   v2.12.7 = HOTFIX visuels (suppression __bar et __sep HOME desktop,
             chevron HOME 40px, chevron INNER+mobile 24px anime)
   v2.12.8 = REFONTE PREMIUM du chevron CTA (3 contextes) :
             - Remplacement du caractere Unicode \u2304 par un SVG
               inline double chevron avec degrade or vertical
               (#B99517 = --vs-gold-hi -> #9A7B0A = --vs-gold).
             - Suppression de l'animation bounce permanente sur les
               3 contextes. Comportement spec validee :
                 default : statique, glow leger via drop-shadow
                 :hover  : glow renforce
                 :active : transform scale(1.1) (rebond au clic)
             - Suppression des 2 keyframes @vs-bounce et
               @vs-bounce-inner (orphelines apres suppression de
               leur usage).
             - Tailles : HOME desktop 56px (plus gros que les 40px
               de v2.12.7), INNER desktop 24px, mobile 24px.
             - REACTIVATION de la barre or __bar sous le titre du
               vehicule en HOME desktop (avait ete masquee en v2.12.7,
               Steve a change d'avis : "plus premium avec la barre").
               __sep reste masque.
             - JS modifie pour la 1ere fois depuis v2.12.0 :
               nouveau hash MD5 = 2a808c67b93d9e20daef929824af680d
               (avant : 4d1f96268a0cc7ac1b69230b5a67f14c).
   v2.12.9 = HOTFIX 1-ligne (fix racine du bug __bar) :
             - Probleme persistant depuis v2.12.6 : la barre or 60x3
               sous le titre se collait a gauche du bouton CHANGER au
               lieu d'etre centree sous le titre.
             - Cause racine : __bar etait en display:inline-block,
               __btn (CHANGER) qui suit dans le DOM est en
               display:inline-flex. Sous text-align:center du parent,
               les 2 elements inline-* consecutifs etaient centres
               ENSEMBLE sur la meme ligne.
             - Fix : display:block sur __bar -> ligne dediee centree.
             - Aucun changement JS (hash 2a808c67b93d9e20daef929824af680d
               preserve depuis v2.12.8).
   v2.12.10 = HOTFIX nom vehicule tronque en HOME mobile :
             - Symptome : sur HOME mobile, le nom du vehicule etait
               coupe avec "..." (ex. "AUDI A3 (8L) de 1996 a 1...")
               alors qu'en INNER mobile il s'affichait en entier.
             - Cause : le CSS BO de Steve "body:not(#index){.pap-search-row
               {width:100vw}}" force la pleine largeur viewport sur les
               pages interieures uniquement. Sur HOME, la .pap-search-row
               reste contrainte par le conteneur Shoppica avec ses
               paddings/marges -> carte plus etroite -> nom tronque par
               white-space:nowrap + text-overflow:ellipsis.
             - Fix (option A validee par Steve) : suppression des 3
               proprietes white-space:nowrap, overflow:hidden,
               text-overflow:ellipsis sur le __name en mobile. Le nom
               peut maintenant wrapper sur 2 lignes de texte si la
               cellule grid est trop etroite (HOME mobile), reste sur
               1 ligne quand il y a la place (INNER mobile).
             - Aucun changement JS (hash MD5 preserve).
   v2.12.11 = Refonte picto voiture + ajustements visuels mode RECHERCHE :
             - Picto voiture (mode recherche + mode memoire + bandeau
               categorie) remplace par l'icone Lucide "car" officielle.
               L'ancien SVG (path + 2 cercles roues) etait peu lisible.
               Ajout du path M9 17h6 (barre entre les 2 roues, signature
               Lucide). Stroke epaissi de 1.8 a 2 pour plus de lisibilite
               aux petites tailles.
             - Cible : 7 endroits dans le module
                 - 3 dans views/templates/hook/widget.tpl (header + selects
                   marque/modele)
                 - 3 dans views/js/vehiclesearch.js (renderMemoryBanner +
                   getInlineSvg cas cta + catbanner)
                 - 1 dans views/css/vehiclesearch.css (data URI ::before
                   du bandeau INNER desktop)
             - HOME desktop mode recherche : titre "RECHERCHE PAR
               VEHICULE" CENTRE dans la carte (avant aligne a gauche
               colle a l'icone). Ajout de justify-content:center sur
               .vehiclesearch-header. INNER non affecte (le header y
               est en display:none, l'icone vient d'un ::before).
             - Bouton "TROUVER MES PIECES" : loupe agrandie de 18 a
               20px pour matcher la hauteur de ligne du texte (14px
               x line-height 1.4 = ~20px). Avant la loupe paraissait
               trop petite a cote du libelle.
             - Hash JS bouge (3 modifications dans le JS).

   Sections :
     1.  TOKENS (variables CSS V20)
     2.  WRAPPER (carte noire principale)
     3.  HEADER (icone voiture or + titre)
     4.  CHAMPS (selects fonds noirs + bouton or)
     5.  ALERTE & LOADING
     6.  MODE MEMOIRE (.vehiclesearch-active)     (finalise v2.12.5)
     7.  BANDEAU COMPATIBILITE FICHE PRODUIT  (refondu v2.12.1)
     8.  BANDEAU CATEGORIE                    (refondu v2.12.1)
     9.  INDICATEUR FILTRAGE ACTIF            (refondu v2.12.1)
     10. UTILITAIRE                            (intact, depuis V19)
     11. COHABITATION OEMSEARCHPRO            (intact, depuis V19)
   ============================================================= */


/* =============================================================
   1. TOKENS V20 (Tesla/Apple premium)
   -------------------------------------------------------------
   v2.12.12 : ajout .vehiclesearch-catbanner a la liste des
   selecteurs porteurs des tokens. Le bandeau categorie n'etant
   descendant ni du wrapper ni de .vehiclesearch-active, il
   n'heritait d'aucune variable CSS -> toutes les regles a base
   de var(--vs-ink), var(--vs-gold) etc. tombaient en unset.
   Cf. upgrade/install-2.12.12.php pour le detail du diagnostic.
   ============================================================= */
.vehiclesearch-wrapper,
.vehiclesearch-active,
.vehiclesearch-catbanner {
    --vs-ink:        #0F1923;
    --vs-ink-soft:   #162330;
    --vs-cream:      #FAF7EE;
    --vs-gold:       #9A7B0A;
    --vs-gold-hi:    #B99517;
    --vs-gold-soft:  #CDC69C;
    --vs-gold-deep:  #7A5E04;
    --vs-white:      #FFFFFF;
    --vs-grey-text:  #BDBDBD;
    --vs-border:     rgba(154, 123, 10, 0.6);

    /* v2.13.1 - Harmonisation charte Premium Auto Pro : 6px -> 3px
       (aligne sur les autres modules Steve et sur le pattern callout
       charte qui utilise deja 3px). Touche TOUS les composants qui
       utilisent var(--vs-radius) : selects, boutons, conteneurs widget,
       bandeaux memory/compat/catbanner, etc. */
    --vs-radius:     3px;
    --vs-font-ui:    'Manrope', system-ui, -apple-system, sans-serif;
}


/* =============================================================
   2. WRAPPER - carte noire active (Tesla / Apple V20)
   -------------------------------------------------------------
   Le wrapper est rendu identique en HOME et en INNER mobile.
   Pour INNER desktop, voir la section 4 (override en flex).

   Hauteurs cibles (cf. brief principal section 6) :
     - HOME desktop (>=900px)  : 64px selects + 64px bouton
     - HOME mobile  (<900px)   : 48px selects (carre loupe inclus)
     - INNER desktop (>=900px) : 56px (1 ligne integrale)
     - INNER mobile (<900px)   : 48px (idem home mobile)
   ============================================================= */

.vehiclesearch-wrapper {
    position: relative;
    box-sizing: border-box;
    width: 100%;
    margin: 0 0 20px 0;
    padding: 20px;
    background: var(--vs-ink);
    border: 2px solid var(--vs-gold);
    border-radius: var(--vs-radius);
    color: var(--vs-white);
    font-family: var(--vs-font-ui);
    overflow: visible;
    box-shadow: none;
}

/* v2.12.4 - Le pseudo-element ::before qui creait un liseret or 4px en haut
   a ete SUPPRIME. Avec le border-radius 6px ajoute en v2.12.3, il creait
   un effet de "double trait or" parce que le ::before debordait visuellement
   sur les coins arrondis du wrapper.

   La bordure 2px solid var(--vs-gold) tout autour du wrapper suffit largement
   pour le visuel premium voulu. */

.vehiclesearch-wrapper *,
.vehiclesearch-wrapper *::before,
.vehiclesearch-wrapper *::after {
    box-sizing: border-box;
}


/* =============================================================
   3. HEADER - icone voiture or + titre "RECHERCHE PAR VEHICULE"
   ============================================================= */
.vehiclesearch-header {
    display: flex;
    align-items: center;
    justify-content: center;   /* v2.12.11 - centrage du couple icone+titre */
    gap: 12px;
    margin: 0 0 16px 0;
}

.vehiclesearch-header__icon {
    display: inline-flex;
    align-items: center;
    color: var(--vs-gold);
    flex-shrink: 0;
}

.vehiclesearch-header__icon svg {
    width: 28px;
    height: 28px;
}

.vehiclesearch-header__title {
    margin: 0;
    font-size: 17px;
    font-weight: 700;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: var(--vs-white);
    line-height: 1.2;
}


/* =============================================================
   4. CHAMPS - selects + bouton submit (mode RECHERCHE)
   -------------------------------------------------------------
   Layout par defaut (= HOME mobile/desktop sans pap-search-row,
   ou avec .pap-search-row--home) :
     Desktop >= 900px : 3 colonnes egales selects, bouton plein
                        largeur en ligne 2 (grid-column: 1 / -1)
     Mobile  < 900px  : layout "[Marque][Modele] / [Annee][loupe]"
                        (gere via media query plus bas)

   Layout INNER (.pap-search-row--inner) :
     Desktop >= 900px : 1 ligne integrale en flex (icone+titre +
                        3 selects + bouton compact a droite)
     Mobile  < 900px  : identique au layout HOME mobile
   ============================================================= */

.vehiclesearch-form {
    margin: 0;
    padding: 0;
}

/* Grille HOME par defaut (desktop : 3 cols + bouton ligne 2) */
.vehiclesearch-fields {
    display: grid;
    grid-template-columns: 1fr 1fr 1fr;
    grid-template-rows: auto auto;
    gap: 12px;
}

/* Wrapper d'un select unique (avec icone optionnelle a gauche) */
.vehiclesearch-field {
    position: relative;
    display: block;
}

.vehiclesearch-field__icon {
    position: absolute;
    top: 50%;
    left: 12px;
    transform: translateY(-50%);
    color: var(--vs-gold);
    pointer-events: none;
    /* Masquee par defaut, visible uniquement en mobile (cf. media query) */
    display: none;
}

.vehiclesearch-field__icon svg {
    width: 18px;
    height: 18px;
}

/* Select natif stylé (fond noir foncé, bordure or, texte blanc majuscule) */
.vehiclesearch-select {
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
    width: 100%;
    height: 64px; /* desktop home par defaut */
    padding: 0 36px 0 14px;
    margin: 0;
    background-color: var(--vs-ink-soft);
    background-image: url("data:image/svg+xml;charset=UTF-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%239A7B0A' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 12px center;
    background-size: 16px;
    border: 1px solid var(--vs-border);
    border-radius: var(--vs-radius);
    color: var(--vs-white);
    font-family: inherit;
    font-size: 14px;
    font-weight: 600;
    letter-spacing: 0.05em;
    text-transform: uppercase;
    cursor: pointer;
    transition: border-color 0.15s, background-color 0.15s;
    text-overflow: ellipsis;
}

.vehiclesearch-select:hover:not(:disabled) {
    border-color: var(--vs-gold-hi);
}

.vehiclesearch-select:focus {
    outline: none;
    border-color: var(--vs-gold-hi);
    box-shadow: 0 0 0 1px var(--vs-gold-hi);
}

.vehiclesearch-select:disabled {
    opacity: 0.5;
    cursor: not-allowed;
}

.vehiclesearch-select option {
    background: var(--vs-ink);
    color: var(--vs-white);
}

.vehiclesearch-select option[disabled] {
    color: var(--vs-grey-text);
}

/* Bouton submit "TROUVER MES PIECES" (or rempli, plein largeur ligne 2 en HOME desktop) */
.vehiclesearch-submit {
    grid-column: 1 / -1;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    width: 100%;
    height: 64px;
    padding: 0 18px;
    margin: 0;
    background: var(--vs-gold);
    border: none;
    border-radius: var(--vs-radius);
    color: var(--vs-white);
    font-family: inherit;
    font-size: 14px;
    font-weight: 700;
    letter-spacing: 0.05em;
    text-transform: uppercase;
    cursor: pointer;
    transition: background-color 0.15s, transform 0.12s;
    box-shadow: none;
    white-space: nowrap;
}

.vehiclesearch-submit:hover {
    background: var(--vs-gold-hi);
    color: var(--vs-white);
}

.vehiclesearch-submit:active {
    transform: scale(0.98);
}

.vehiclesearch-submit__icon {
    /* v2.12.11 : taille 18px -> 20px pour matcher la hauteur de ligne
       du texte du bouton (font-size 14px x line-height ~1.4 = ~20px).
       Avant la loupe paraissait "trop petite" a cote du libelle. */
    width: 20px;
    height: 20px;
    flex-shrink: 0;
}

.vehiclesearch-submit-incomplete {
    cursor: pointer;
}

/* Switch label long/court selon contexte parent (.pap-search-row--inner)
   Specificite renforcee pour resister a un override potentiel du theme. */
.vehiclesearch-submit .vehiclesearch-submit__long  { display: inline; }
.vehiclesearch-submit .vehiclesearch-submit__short { display: none; }

.pap-search-row--inner .vehiclesearch-submit .vehiclesearch-submit__long  { display: none; }
.pap-search-row--inner .vehiclesearch-submit .vehiclesearch-submit__short { display: inline; }


/* =============================================================
   4-bis. CONTEXTE INNER DESKTOP (>= 900px, .pap-search-row--inner)
   -------------------------------------------------------------
   Layout barre 1 ligne integrale, hauteur 56px, sans titre :

   [icone or] [Marque] [Modele] [Annee] [TROUVER MES PIECES]

   Le titre "Recherche par vehicule" est masque en inner.
   ============================================================= */

@media (min-width: 900px) {
    /* Reduction du padding global du wrapper */
    .pap-search-row--inner .vehiclesearch-wrapper {
        padding: 12px 16px;
    }

    /* v2.12.4 - La regle .pap-search-row--inner .vehiclesearch-wrapper::before
       a ete supprimee (le ::before global n'existe plus). */

    /* Conservation de l'icone, masquage du titre texte */
    .pap-search-row--inner .vehiclesearch-header {
        display: none;
        /* Note : on masque tout le header car l'icone est integree
           dans la grille des champs en INNER (cf. ::before). */
    }

    /* Layout 1 ligne : icone (via ::before) + 3 selects + bouton */
    .pap-search-row--inner .vehiclesearch-fields {
        display: grid;
        grid-template-columns: auto 1fr 1fr 1fr 1.3fr;
        grid-template-rows: 1fr;
        gap: 10px;
        align-items: center;
        position: relative;
    }

    /* Pseudo-element : icone voiture or en colonne 1 (intégrée à la barre)
       v2.12.11 : SVG mis a jour vers Lucide "car" (ajout du path M9 17h6
       qui est la barre entre les 2 roues, signature de l'icone Lucide). */
    .pap-search-row--inner .vehiclesearch-fields::before {
        content: "";
        grid-column: 1;
        width: 28px;
        height: 28px;
        background-image: url("data:image/svg+xml;charset=UTF-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%239A7B0A' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M19 17h2c.6 0 1-.4 1-1v-3c0-.9-.7-1.7-1.5-1.9C18.7 10.6 16 10 16 10s-1.3-1.4-2.2-2.3c-.5-.4-1.1-.7-1.8-.7H5c-.6 0-1.1.4-1.4.9l-1.4 2.9A3.7 3.7 0 0 0 2 12v4c0 .6.4 1 1 1h2'/%3E%3Ccircle cx='7' cy='17' r='2'/%3E%3Cpath d='M9 17h6'/%3E%3Ccircle cx='17' cy='17' r='2'/%3E%3C/svg%3E");
        background-repeat: no-repeat;
        background-position: center;
        background-size: 28px;
    }

    /* Selects compactes 56px en INNER */
    .pap-search-row--inner .vehiclesearch-select {
        height: 56px;
        font-size: 13px;
        padding: 0 30px 0 12px;
        background-position: right 10px center;
        background-size: 14px;
    }

    /* Bouton : reset des regles HOME (grid-column: 1/-1; width: 100%;)
       puis hauteur 56px et largeur naturelle (col 5 de la grille). */
    .pap-search-row--inner .vehiclesearch-submit {
        grid-column: auto;
        width: auto;
        height: 56px;
        font-size: 13px;
        padding: 0 16px;
        gap: 8px;
    }

    .pap-search-row--inner .vehiclesearch-submit__icon {
        width: 16px;
        height: 16px;
    }
}


/* =============================================================
   4-ter. CONTEXTE MOBILE (< 900px) - HOME ET INNER
   -------------------------------------------------------------
   Layout commun aux deux contextes (cf. brief principal sect. 4.2 et 4.4) :

     Ligne 1 : [Marque (icone voiture)] [Modele (icone voiture)]
     Ligne 2 : [Annee (icone calendrier)]    [bouton loupe carre 48x48px or]

   Le bouton text "TROUVER MES PIECES" disparait : il est remplace
   par un bouton loupe carre. Les icones de chaque select deviennent
   visibles (--brand, --model = voiture / --year = calendrier).
   ============================================================= */

@media (max-width: 899px) {
    .vehiclesearch-wrapper {
        padding: 14px 14px 16px;
        margin-bottom: 14px;
    }

    /* v2.12.4 - La regle .vehiclesearch-wrapper::before a ete supprimee
       (le ::before global n'existe plus). */

    /* Header compact : icone visible, titre masque pour gain de hauteur
       (les placeholders MARQUE/MODELE/ANNEE + icones suffisent comme
        indication contextuelle). */
    .vehiclesearch-header {
        margin: 0 0 12px 0;
        gap: 10px;
    }

    .vehiclesearch-header__icon svg {
        width: 22px;
        height: 22px;
    }

    .vehiclesearch-header__title {
        font-size: 14px;
        letter-spacing: 0.05em;
    }

    /* Layout grille mobile :
       Ligne 1 : Marque (col 1) | Modele (col 2)         50/50
       Ligne 2 : Annee (col 1+2, span)  + bouton loupe par-dessus a droite

       v2.12.4 - FIX : Annee etait limitee a la col 1 (50% largeur) en v2.12.3,
       ce qui rendait son texte tronque visuellement (la loupe occupant la moitie
       droite vide). Solution : Annee occupe les 2 colonnes (grid-column: 1 / -1)
       avec padding-right interne suffisant pour reserver l'emplacement du bouton
       loupe, qui est positionne en absolute par-dessus a droite de la ligne 2.

       v2.12.3 - Avant on avait grid-template-columns: 1fr 48px,
       ce qui forcait Modele a 48px de large (= la largeur du bouton loupe)
       et le rendait invisible. */
    .vehiclesearch-fields {
        position: relative; /* ancrage pour le bouton loupe absolute */
        grid-template-columns: 1fr 1fr;
        grid-template-rows: 48px 48px;
        gap: 8px;
    }

    /* Placement explicite des champs */
    .vehiclesearch-field--brand  { grid-column: 1; grid-row: 1; min-width: 0; }
    .vehiclesearch-field--model  { grid-column: 2; grid-row: 1; min-width: 0; }

    /* Annee occupe toute la largeur de la ligne 2 (span 2 colonnes) */
    .vehiclesearch-field--year   {
        grid-column: 1 / -1;
        grid-row: 2;
        min-width: 0;
        /* Reserve 56px a droite pour le bouton loupe (48px + 8px gap) */
        padding-right: 56px;
    }

    /* Bouton loupe : sorti de la grille, positionne en absolute en bas a droite
       du conteneur .vehiclesearch-fields. Il chevauche visuellement la zone
       reservee par padding-right de Annee. */
    .vehiclesearch-submit {
        position: absolute;
        bottom: 0;
        right: 0;
        width: 48px;
        height: 48px;
        padding: 0;
        gap: 0;
        font-size: 0; /* masque le texte, ne laisse que l'icone */
        letter-spacing: 0;
    }

    /* On masque les <span> texte du bouton en mobile (cf. brief : pas de texte) */
    .vehiclesearch-submit__long,
    .vehiclesearch-submit__short {
        display: none !important;
    }

    .vehiclesearch-submit__icon {
        width: 22px;
        height: 22px;
    }

    /* Selects compactes 48px + revelation des icones contextuelles */
    .vehiclesearch-select {
        height: 48px;
        font-size: 13px;
        /* Padding-left 40px pour laisser la place a l'icone or (16px + marges) */
        padding: 0 30px 0 40px;
        background-position: right 10px center;
        background-size: 14px;
        letter-spacing: 0.04em;
    }

    /* v2.13.1 - Pictos mobile masques sur demande Steve.
       Le markup HTML reste en place (cf widget.tpl), seul l'affichage
       est neutralise. Pour reactiver les pictos un jour : remplacer
       'display: none' par 'display: flex' dans cette regle. */
    .vehiclesearch-field__icon {
        display: none;
        align-items: center;
        justify-content: center;
    }

    .vehiclesearch-field__icon svg {
        width: 16px;
        height: 16px;
    }

    /* INNER mobile : meme layout que HOME mobile, padding legerement reduit
       (la difference de padding wrapper est volontairement minime car la
        difference UX HOME vs INNER en mobile n'apporte pas grand chose,
        l'utilisateur a juste besoin d'un widget rapide). */
    .pap-search-row--inner .vehiclesearch-wrapper {
        padding: 12px 12px 14px;
    }

    .pap-search-row--inner .vehiclesearch-header {
        margin-bottom: 10px;
    }
}


/* =============================================================
   5. ALERTE & LOADING
   ============================================================= */
.vehiclesearch-alert {
    display: none;
    margin-top: 10px;
    padding: 10px 14px;
    background: rgba(214, 69, 69, 0.1);
    border: 1px solid #D64545;
    border-radius: var(--vs-radius);
    color: #FFB4B4;
    font-size: 13px;
    line-height: 1.4;
}

.vehiclesearch-alert.is-visible {
    display: block;
}

.vehiclesearch-loading {
    display: none;
    align-items: center;
    justify-content: center;
    margin-top: 10px;
}

.vehiclesearch-loading.is-visible {
    display: flex;
}

.vehiclesearch-spinner {
    display: inline-block;
    width: 22px;
    height: 22px;
    border: 2px solid rgba(154, 123, 10, 0.3);
    border-top-color: var(--vs-gold);
    border-radius: 50%;
    animation: vs-spin 0.7s linear infinite;
}

@keyframes vs-spin {
    to { transform: rotate(360deg); }
}


/* =============================================================
   6. MODE MEMOIRE - bloc "VEHICULE SELECTIONNE" (PALIER 3 v2.12.5)
   -------------------------------------------------------------
   Le JS (renderMemoryBanner) genere TOUJOURS le meme markup :

   <div class="vehiclesearch-wrapper--active vehiclesearch-wrapper--memory">
     <div class="vehiclesearch-active vehiclesearch-active--memory">
       <div class="vehiclesearch-active__header">
         <span class="vehiclesearch-active__icon">SVG</span>
         <span class="vehiclesearch-active__label">VEHICULE SELECTIONNE</span>
       </div>
       <h2 class="vehiclesearch-active__name">AUDI A3 (8L)...</h2>
       <span class="vehiclesearch-active__bar"></span>
       <button class="vehiclesearch-active__btn vehiclesearch-active__btn--change">
         <svg/> <span>Changer</span>
       </button>
       <hr class="vehiclesearch-active__sep">
       <a class="vehiclesearch-active__cta" href="..." data-vehiclesearch-cta>
         <span class="vehiclesearch-active__cta-chevron">v</span>
         <span class="vehiclesearch-active__cta-title">Voir le catalogue</span>
         <span class="vehiclesearch-active__cta-sub">Accedez a toutes...</span>
         <span class="vehiclesearch-active__cta-arrow">→</span>
       </a>
     </div>
   </div>

   Le CSS adapte ce markup aux 4 contextes :

   6-A. DEFAUT / HOME desktop : carte verticale grande (spec initiale)
        - Icone + label + nom MAJUSCULES + barre or + CHANGER
        - Separateur or
        - Chevron anime + VOIR LE CATALOGUE + sous-texte

   6-B. INNER desktop (.pap-search-row--inner >= 900px) :
        - Barre 1 ligne 56px
        - [icone + nom (casse mixte)] + [CHANGER] + [chevron + VOIR LE CATALOGUE]
        - Pas de label "VEHICULE SELECTIONNE", pas de barre or, pas de
          separateur, pas de sous-texte

   6-C. MOBILE (HOME et INNER, < 900px) :
        - Barre compacte 2 lignes
        - Ligne 1 : [icone + nom (casse mixte)] + [CHANGER]
        - Ligne 2 : [bouton ghost or "v VOIR LE CATALOGUE" centre]
        - Pas de label "VEHICULE SELECTIONNE", pas de barre or, pas de
          separateur, pas de sous-texte, pas d'animation chevron
   ============================================================= */


/* ----- 6-A. DEFAUT / HOME desktop : carte verticale grande ----- */

.vehiclesearch-active {
    display: block;
    text-align: center;
    color: var(--vs-white);
    font-family: var(--vs-font-ui);
}

/* Header : icone voiture or + label "VEHICULE SELECTIONNE" */
.vehiclesearch-active__header {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    margin: 0 0 14px 0;
}

.vehiclesearch-active__icon {
    display: inline-flex;
    align-items: center;
    color: var(--vs-gold);
    flex-shrink: 0;
}

.vehiclesearch-active__icon svg {
    width: 28px;
    height: 28px;
}

.vehiclesearch-active__label {
    font-size: 12px;
    font-weight: 700;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: var(--vs-gold);
}

/* Nom du vehicule : gros texte centre blanc MAJUSCULES */
.vehiclesearch-active__name {
    margin: 0 0 12px 0;
    font-size: 24px;
    font-weight: 700;
    letter-spacing: 0;
    text-transform: uppercase;
    color: var(--vs-white);
    line-height: 1.25;
}

/* v2.12.9 : FIX racine du bug de positionnement de __bar.
   Probleme historique (v2.12.6 a v2.12.8) : la barre or se collait a
   gauche du bouton CHANGER au lieu d'etre centree sous le titre.
   Cause : __bar etait en display:inline-block et __btn (CHANGER) qui
   suit dans le DOM est en display:inline-flex. Sous text-align:center
   du parent, les 2 elements inline etaient centres ENSEMBLE sur la
   meme ligne (comportement standard des inline-* consecutifs).
   Fix : display:block sur __bar -> il prend sa propre ligne.
   Avec width:60px + margin:0 auto, il reste centre horizontalement.
   Conserve display:none sur INNER et mobile (overrides plus bas). */
.vehiclesearch-active__bar {
    display: block;
    width: 60px;
    height: 3px;
    margin: 0 auto 18px;
    background: var(--vs-gold);
}

/* Bouton CHANGER : ghost or, centre */
.vehiclesearch-active__btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    height: 44px;
    padding: 0 24px;
    margin: 0 auto;
    background: transparent;
    border: 1px solid var(--vs-gold);
    border-radius: var(--vs-radius);
    color: var(--vs-gold);
    font-family: inherit;
    font-size: 13px;
    font-weight: 700;
    letter-spacing: 0.05em;
    text-transform: uppercase;
    cursor: pointer;
    transition: background-color 0.15s, color 0.15s, transform 0.12s;
}

.vehiclesearch-active__btn:hover {
    background: rgba(154, 123, 10, 0.12);
    color: var(--vs-gold-hi);
}

.vehiclesearch-active__btn:active {
    transform: scale(0.98);
}

.vehiclesearch-active__btn-icon {
    width: 16px;
    height: 16px;
    flex-shrink: 0;
}

/* v2.12.7 : Separateur or 30% : SUPPRIME en HOME desktop (demande Steve
   "enleve tous les traits", epure visuelle). En INNER et mobile il etait
   deja masque. On masque partout au niveau de la regle de base. */
.vehiclesearch-active__sep {
    display: none;
}

/* CTA "VOIR LE CATALOGUE" (HOME desktop = chevron anime + texte + sous-texte) */
.vehiclesearch-active__cta {
    display: block;
    text-align: center;
    color: var(--vs-white);
    text-decoration: none;
    transition: color 0.15s;
}

.vehiclesearch-active__cta:hover {
    color: var(--vs-gold-hi);
    text-decoration: none;
}

/* v2.12.8 - Refonte PREMIUM du chevron CTA en HOME desktop.
   Le markup JS injecte maintenant un <svg> double chevron au lieu du
   caractere Unicode \u2304. Le SVG porte son propre degrade or vertical
   en interne. Cote CSS, on gere :
   - la taille (56px en HOME desktop, plus gros que les 40px de v2.12.7
     conformement a la demande Steve "plus gros et plus premium")
   - le glow via filter: drop-shadow (plus propre que text-shadow sur SVG)
   - les transitions :hover (glow renforce) et :active (rebond scale 1.1)
   - aucune animation permanente (le chevron est attractif par sa forme,
     plus besoin du bounce ascenseur de v2.12.6/v2.12.7) */
.vehiclesearch-active__cta-chevron {
    display: block;
    width: 56px;
    height: auto;
    margin: 0 auto 10px;
    line-height: 0;
    color: var(--vs-gold);
    transition: transform 0.18s ease, filter 0.18s ease;
    filter:
        drop-shadow(0 0 6px rgba(154, 123, 10, 0.55))
        drop-shadow(0 0 14px rgba(154, 123, 10, 0.30));
}

.vehiclesearch-active__cta-chevron > svg {
    display: block;
    width: 100%;
    height: auto;
}

/* Hover sur le lien parent : glow renforce (sans toucher la taille) */
.vehiclesearch-active__cta:hover .vehiclesearch-active__cta-chevron {
    filter:
        drop-shadow(0 0 8px rgba(185, 149, 23, 0.85))
        drop-shadow(0 0 18px rgba(185, 149, 23, 0.50));
}

/* Active (clic) : rebond scale 1.1, transition rapide pour effet snappy */
.vehiclesearch-active__cta:active .vehiclesearch-active__cta-chevron {
    transform: scale(1.1);
    transition-duration: 0.08s;
}

/* v2.12.8 - Keyframes @vs-bounce et @vs-bounce-inner SUPPRIMEES :
   plus utilisees apres refonte premium du chevron CTA (animations
   supprimees au profit de drop-shadow + scale au clic seulement). */

.vehiclesearch-active__cta-title {
    display: block;
    font-size: 14px;
    font-weight: 700;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: var(--vs-white);
    margin-bottom: 4px;
}

.vehiclesearch-active__cta-sub {
    display: block;
    font-size: 12px;
    font-weight: 400;
    color: var(--vs-grey-text);
}

/* Fleche --> masquee par defaut (n'apparait dans aucun contexte de la
   nouvelle direction validee par Steve, mais conservee dans le markup
   JS pour ne pas reintroduire de risque de regression). */
.vehiclesearch-active__cta-arrow {
    display: none;
}


/* ----- 6-B. INNER desktop (>= 900px, .pap-search-row--inner) ----- v2.12.6
   Barre 1 ligne 56px : [icone + nom] [CHANGER + VOIR LE CATALOGUE]
   - L'icone et le nom sont a gauche (flex: 1 pour pousser les boutons a droite)
   - Les 2 boutons (CHANGER, VOIR LE CATALOGUE) sont groupes a droite avec
     un gap homogene de 10px entre eux
   - Hauteur boutons : 38px (un peu plus haut qu'avant pour mieux equilibrer
     la barre 56px)
   - Chevron CTA : 18px (plus visible qu'avant 16px) avec font-weight 800
     pour avoir le meme corps que les autres caracteres MAJUSCULES
   - Pas de label, pas de barre or, pas de separateur, pas de sous-texte */

@media (min-width: 900px) {
    .pap-search-row--inner .vehiclesearch-wrapper--memory {
        padding: 9px 14px;
    }

    /* Conteneur en flex row 1 ligne, alignement vertical centre strict */
    .pap-search-row--inner .vehiclesearch-active {
        display: flex;
        align-items: center;
        gap: 12px;
        text-align: left;
        min-height: 38px;
    }

    /* Header : display: contents pour que ses enfants (icone + label) soient
       freres directs du flex parent. Le label est masque ci-dessous. */
    .pap-search-row--inner .vehiclesearch-active__header {
        display: contents;
    }

    .pap-search-row--inner .vehiclesearch-active__icon {
        flex: 0 0 auto;
        display: inline-flex;
        align-items: center;
    }

    .pap-search-row--inner .vehiclesearch-active__icon svg {
        width: 22px;
        height: 22px;
    }

    /* Label "VEHICULE SELECTIONNE" : MASQUE en INNER */
    .pap-search-row--inner .vehiclesearch-active__label {
        display: none;
    }

    /* Nom du vehicule : casse mixte, pousse les boutons a droite avec flex: 1 */
    .pap-search-row--inner .vehiclesearch-active__name {
        flex: 1;
        margin: 0;
        font-size: 14px;
        font-weight: 700;
        text-transform: none;
        line-height: 1.3;
        letter-spacing: 0;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
        text-align: left;
    }

    /* Barre or sous le nom : MASQUEE en INNER */
    .pap-search-row--inner .vehiclesearch-active__bar {
        display: none;
    }

    /* Bouton CHANGER : 38px, ghost or, compact */
    .pap-search-row--inner .vehiclesearch-active__btn {
        flex: 0 0 auto;
        height: 38px;
        padding: 0 14px;
        font-size: 12px;
        margin: 0;
        gap: 6px;
    }

    .pap-search-row--inner .vehiclesearch-active__btn-icon {
        width: 14px;
        height: 14px;
    }

    /* Separateur or : MASQUE en INNER */
    .pap-search-row--inner .vehiclesearch-active__sep {
        display: none;
    }

    /* CTA "VOIR LE CATALOGUE" : ghost or, 38px, gap 8px entre chevron et texte
       Note : pas de marge gauche supplementaire, le gap du flex parent (12px)
       se charge de l'espace entre CHANGER et VOIR LE CATALOGUE */
    .pap-search-row--inner .vehiclesearch-active__cta {
        flex: 0 0 auto;
        display: inline-flex;
        align-items: center;
        gap: 8px;
        height: 38px;
        padding: 0 14px;
        background: transparent;
        border: 1px solid var(--vs-gold);
        border-radius: var(--vs-radius);
        color: var(--vs-gold);
        text-decoration: none;
        text-align: left;
        transition: background-color 0.15s, color 0.15s;
    }

    .pap-search-row--inner .vehiclesearch-active__cta:hover {
        background: rgba(154, 123, 10, 0.12);
        color: var(--vs-gold-hi);
        text-decoration: none;
    }

    /* v2.12.8 - Chevron CTA INNER desktop : SVG double chevron 24px.
       Statique par defaut (pas d'animation permanente), glow leger via
       drop-shadow, hover renforce le glow, active rebond scale 1.1.
       La taille 24px reste compatible avec la barre 56px sans deborder. */
    .pap-search-row--inner .vehiclesearch-active__cta-chevron {
        display: inline-flex;
        align-items: center;
        width: 24px;
        height: auto;
        margin: 0;
        line-height: 0;
        color: var(--vs-gold);
        text-shadow: none;
        transition: transform 0.18s ease, filter 0.18s ease;
        filter:
            drop-shadow(0 0 3px rgba(154, 123, 10, 0.65))
            drop-shadow(0 0 8px rgba(154, 123, 10, 0.30));
    }

    .pap-search-row--inner .vehiclesearch-active__cta-chevron > svg {
        display: block;
        width: 100%;
        height: auto;
    }

    .pap-search-row--inner .vehiclesearch-active__cta:hover
        .vehiclesearch-active__cta-chevron {
        filter:
            drop-shadow(0 0 5px rgba(185, 149, 23, 0.85))
            drop-shadow(0 0 12px rgba(185, 149, 23, 0.50));
    }

    .pap-search-row--inner .vehiclesearch-active__cta:active
        .vehiclesearch-active__cta-chevron {
        transform: scale(1.1);
        transition-duration: 0.08s;
    }

    /* Titre "VOIR LE CATALOGUE" : inline, MAJUSCULES compacts */
    .pap-search-row--inner .vehiclesearch-active__cta-title {
        display: inline;
        margin: 0;
        font-size: 12px;
        font-weight: 700;
        letter-spacing: 0.05em;
        text-transform: uppercase;
        color: var(--vs-gold);
    }

    /* Sous-texte "Accedez a toutes les pieces..." : MASQUE en INNER */
    .pap-search-row--inner .vehiclesearch-active__cta-sub {
        display: none;
    }
}


/* ----- 6-C. MOBILE (HOME et INNER, < 900px) -----
   Barre compacte 2 lignes :
     Ligne 1 : [icone + nom (casse mixte)] + [CHANGER]
     Ligne 2 : [bouton ghost or "v VOIR LE CATALOGUE" centre]
   Hauteur cible : ~80-100px (vs ~280px en spec initiale).
   Pas de label, pas de barre or, pas de separateur, pas de sous-texte,
   pas d'animation chevron. */

@media (max-width: 899px) {
    .vehiclesearch-wrapper--memory {
        padding: 12px 14px;
    }

    /* Conteneur grid avec template-areas pour placement explicite de chaque
       element. Le markup JS genere ces 3 elements comme freres directs :
         .vehiclesearch-active__header (icone + label)
         .vehiclesearch-active__name   (h2)
         .vehiclesearch-active__btn    (CHANGER)
         .vehiclesearch-active__sep    (hr - masque en mobile)
         .vehiclesearch-active__cta    (lien VOIR LE CATALOGUE)
       v2.12.6 - FIX BUG : avant le nom etait place automatiquement et finissait
       sur une 3e ligne hors grille. Maintenant il est explicitement place en
       ligne 1 colonne 1 (avec l'icone qui devient juste un visuel a sa gauche
       via le header). */
    .vehiclesearch-wrapper--memory .vehiclesearch-active {
        display: grid;
        grid-template-columns: auto 1fr auto;
        grid-template-rows: auto auto;
        grid-template-areas:
            "icon name btn"
            "cta  cta  cta";
        gap: 10px 12px;
        align-items: center;
        text-align: left;
    }

    /* Header : on l'eclate via display: contents pour que ses enfants
       (icone + label) soient places directement par grid-area */
    .vehiclesearch-wrapper--memory .vehiclesearch-active__header {
        display: contents;
        margin: 0;
    }

    .vehiclesearch-wrapper--memory .vehiclesearch-active__icon {
        grid-area: icon;
        display: inline-flex;
        align-items: center;
        flex: 0 0 auto;
    }

    .vehiclesearch-wrapper--memory .vehiclesearch-active__icon svg {
        width: 22px;
        height: 22px;
    }

    /* Label "VEHICULE SELECTIONNE" : MASQUE en mobile */
    .vehiclesearch-wrapper--memory .vehiclesearch-active__label {
        display: none;
    }

    /* Nom : place en grid-area "name" (entre l'icone et le bouton CHANGER).
       v2.12.10 : suppression de white-space:nowrap + overflow:hidden +
       text-overflow:ellipsis (qui tronquaient le nom avec "..." quand il
       n'y avait pas la place). Le nom peut maintenant wrapper sur 2 lignes
       de texte si la cellule "name" du grid est trop etroite.
       Cas concret : sur HOME mobile la .pap-search-row reste contrainte
       par le conteneur Shoppica (le CSS BO body:not(#index){width:100vw}
       ne s'applique pas a la home), donc la carte est plus etroite qu'en
       INNER mobile. Avec ce fix, le nom complet reste visible dans tous
       les cas, sur 1 ligne quand il y a la place, sur 2 lignes sinon.
       align-items:center du grid parent assure un rendu propre quand le
       nom wrappe (icone et bouton CHANGER recentres verticalement). */
    .vehiclesearch-wrapper--memory .vehiclesearch-active__name {
        grid-area: name;
        margin: 0;
        font-size: 14px;
        font-weight: 700;
        text-transform: none;
        letter-spacing: 0;
        line-height: 1.3;
        text-align: left;
        min-width: 0;
    }

    /* Barre or : MASQUEE en mobile */
    .vehiclesearch-wrapper--memory .vehiclesearch-active__bar {
        display: none;
    }

    /* Bouton CHANGER : grid-area "btn" (a droite ligne 1) */
    .vehiclesearch-wrapper--memory .vehiclesearch-active__btn {
        grid-area: btn;
        height: 36px;
        padding: 0 14px;
        font-size: 11px;
        margin: 0;
        gap: 6px;
    }

    .vehiclesearch-wrapper--memory .vehiclesearch-active__btn-icon {
        width: 14px;
        height: 14px;
    }

    /* Separateur or : MASQUE en mobile */
    .vehiclesearch-wrapper--memory .vehiclesearch-active__sep {
        display: none;
    }

    /* CTA "VOIR LE CATALOGUE" : grid-area "cta" (toute la largeur ligne 2) */
    .vehiclesearch-wrapper--memory .vehiclesearch-active__cta {
        grid-area: cta;
        display: inline-flex;
        align-items: center;
        justify-content: center;
        gap: 8px;
        height: 40px;
        padding: 0 16px;
        background: transparent;
        border: 1px solid var(--vs-gold);
        border-radius: var(--vs-radius);
        color: var(--vs-gold);
        text-decoration: none;
        text-align: center;
        margin: 0;
        transition: background-color 0.15s, color 0.15s;
    }

    .vehiclesearch-wrapper--memory .vehiclesearch-active__cta:hover {
        background: rgba(154, 123, 10, 0.12);
        color: var(--vs-gold-hi);
        text-decoration: none;
    }

    /* v2.12.8 - Chevron CTA mobile : SVG double chevron 24px.
       Meme traitement que INNER desktop (statique, drop-shadow leger,
       hover/active). Compatible avec le bouton CTA mobile 40px de haut. */
    .vehiclesearch-wrapper--memory .vehiclesearch-active__cta-chevron {
        display: inline-flex;
        align-items: center;
        width: 24px;
        height: auto;
        margin: 0;
        line-height: 0;
        color: var(--vs-gold);
        text-shadow: none;
        transition: transform 0.18s ease, filter 0.18s ease;
        filter:
            drop-shadow(0 0 3px rgba(154, 123, 10, 0.65))
            drop-shadow(0 0 8px rgba(154, 123, 10, 0.30));
    }

    .vehiclesearch-wrapper--memory .vehiclesearch-active__cta-chevron > svg {
        display: block;
        width: 100%;
        height: auto;
    }

    .vehiclesearch-wrapper--memory .vehiclesearch-active__cta:hover
        .vehiclesearch-active__cta-chevron {
        filter:
            drop-shadow(0 0 5px rgba(185, 149, 23, 0.85))
            drop-shadow(0 0 12px rgba(185, 149, 23, 0.50));
    }

    .vehiclesearch-wrapper--memory .vehiclesearch-active__cta:active
        .vehiclesearch-active__cta-chevron {
        transform: scale(1.1);
        transition-duration: 0.08s;
    }

    /* Titre "VOIR LE CATALOGUE" : inline, compact */
    .vehiclesearch-wrapper--memory .vehiclesearch-active__cta-title {
        display: inline;
        margin: 0;
        font-size: 12px;
        font-weight: 700;
        letter-spacing: 0.05em;
        text-transform: uppercase;
        color: var(--vs-gold);
    }

    /* Sous-texte : MASQUE en mobile */
    .vehiclesearch-wrapper--memory .vehiclesearch-active__cta-sub {
        display: none;
    }
}




/* =============================================================
   7. BANDEAU COMPATIBILITE FICHE PRODUIT (v2.12.1)
   -------------------------------------------------------------
   IMPORTANT : ces classes correspondent EXACTEMENT a ce que le JS
   genere via renderCompatBanner() dans vehiclesearch.js.

   Markup runtime (genere par JS, pas par Smarty) :

   <div class="vehiclesearch-compat-banner vehiclesearch-compat-{status}">
     <span class="vehiclesearch-compat-icon">SVG</span>
     <span class="vehiclesearch-compat-message">Texte du message</span>
     <a class="vehiclesearch-compat-link">↑</a>     (uniquement en mode CTA)
   </div>

   Statuts :
     - vehiclesearch-compat-cta     : pas de vehicule memorise (or)
     - vehiclesearch-compat-unknown : produit sans cat. vehicule (orange)
     - vehiclesearch-compat-ok      : compatible (vert)
     - vehiclesearch-compat-ko      : incompatible (rouge)
   ============================================================= */

.vehiclesearch-compat-banner {
    display: flex;
    align-items: center;
    gap: 14px;
    padding: 14px 18px;
    margin: 16px 0;
    border-left: 4px solid #BDBDBD;
    border-radius: var(--vs-radius);
    background: var(--vs-cream, #FAF7EE);
    color: #0F1923;
    font-family: 'Manrope', system-ui, sans-serif;
    font-size: 14px;
    line-height: 1.4;
}

/* ----- Statut OK : VERT (compatible avec le vehicule memorise) ----- */
.vehiclesearch-compat-banner.vehiclesearch-compat-ok {
    border-left-color: #4DCC6E;
    background: rgba(77, 204, 110, 0.08);
}

.vehiclesearch-compat-banner.vehiclesearch-compat-ok .vehiclesearch-compat-icon {
    color: #4DCC6E;
}

/* ----- Statut KO : ROUGE (incompatible : le produit a des cat. vehicule mais pas la votre) ----- */
.vehiclesearch-compat-banner.vehiclesearch-compat-ko {
    border-left-color: #D64545;
    background: rgba(214, 69, 69, 0.08);
}

.vehiclesearch-compat-banner.vehiclesearch-compat-ko .vehiclesearch-compat-icon {
    color: #D64545;
}

/* ----- Statut UNKNOWN : ORANGE (produit sans aucune cat. vehicule = universel) ----- */
.vehiclesearch-compat-banner.vehiclesearch-compat-unknown {
    border-left-color: #E68A2E;
    background: rgba(230, 138, 46, 0.08);
}

.vehiclesearch-compat-banner.vehiclesearch-compat-unknown .vehiclesearch-compat-icon {
    color: #E68A2E;
}

/* ----- Statut CTA : OR (pas de vehicule memorise, invitation a en choisir un) ----- */
.vehiclesearch-compat-banner.vehiclesearch-compat-cta {
    border-left-color: var(--vs-gold);
    background: rgba(154, 123, 10, 0.06);
}

.vehiclesearch-compat-banner.vehiclesearch-compat-cta .vehiclesearch-compat-icon {
    color: var(--vs-gold);
}

/* ----- Enfants ----- */
.vehiclesearch-compat-icon {
    flex-shrink: 0;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

.vehiclesearch-compat-icon svg {
    width: 26px;
    height: 26px;
}

.vehiclesearch-compat-message {
    flex: 1;
    min-width: 0;
    font-weight: 600;
    color: #0F1923;
    line-height: 1.4;
}

.vehiclesearch-compat-link {
    flex-shrink: 0;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 32px;
    height: 32px;
    background: var(--vs-gold);
    color: var(--vs-white);
    text-decoration: none;
    border-radius: var(--vs-radius);
    font-size: 18px;
    font-weight: 700;
    transition: background-color 0.15s;
}

.vehiclesearch-compat-link:hover {
    background: var(--vs-gold-hi);
    color: var(--vs-white);
    text-decoration: none;
}


/* =============================================================
   8. BANDEAU CATEGORIE - pages categorie type-piece (v2.12.1)
   -------------------------------------------------------------
   Markup runtime (genere par JS via renderCategoryBanner) :

   <div class="vehiclesearch-catbanner vehiclesearch-catbanner-{mode}">
     <span class="vehiclesearch-catbanner-icon">SVG voiture</span>
     <div class="vehiclesearch-catbanner-text">
       <div class="vehiclesearch-catbanner-message">Filtrer pour votre AUDI A3...</div>
       <div class="vehiclesearch-catbanner-submessage">3766 produits dans cette categorie</div>
     </div>
     <div class="vehiclesearch-catbanner-actions">
       <a/button class="vehiclesearch-catbanner-btn vehiclesearch-catbanner-btn-primary">
         Voir mon catalogue / Selectionner mon vehicule
       </a/button>
     </div>
   </div>

   Modes :
     - vehiclesearch-catbanner-with-vehicle    : vehicule memorise (CTA "Voir mon catalogue")
     - vehiclesearch-catbanner-without-vehicle : pas de vehicule (CTA "Selectionner mon vehicule")
   ============================================================= */

.vehiclesearch-catbanner {
    display: flex;
    align-items: center;
    gap: 16px;
    padding: 14px 18px;
    margin: 16px 0;
    background: var(--vs-ink);
    border-left: 4px solid var(--vs-gold);
    border-radius: var(--vs-radius);
    color: var(--vs-white);
    font-family: 'Manrope', system-ui, sans-serif;
}

.vehiclesearch-catbanner-icon {
    flex-shrink: 0;
    color: var(--vs-gold);
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

.vehiclesearch-catbanner-icon svg {
    width: 28px;
    height: 28px;
}

.vehiclesearch-catbanner-text {
    flex: 1;
    min-width: 0;
}

.vehiclesearch-catbanner-message {
    font-size: 15px;
    font-weight: 700;
    color: var(--vs-white);
    line-height: 1.3;
}

.vehiclesearch-catbanner-submessage {
    margin-top: 2px;
    font-size: 13px;
    font-weight: 400;
    color: var(--vs-grey-text);
    line-height: 1.4;
}

.vehiclesearch-catbanner-actions {
    flex-shrink: 0;
    display: inline-flex;
    align-items: center;
}

/* Bouton primaire or rempli */
.vehiclesearch-catbanner-btn {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    height: 40px;
    padding: 0 18px;
    background: var(--vs-gold);
    color: var(--vs-white);
    font-family: inherit;
    font-size: 12px;
    font-weight: 700;
    letter-spacing: 0.05em;
    text-transform: uppercase;
    text-decoration: none;
    border: none;
    border-radius: var(--vs-radius);
    cursor: pointer;
    transition: background-color 0.15s, transform 0.12s;
    white-space: nowrap;
}

.vehiclesearch-catbanner-btn:hover {
    background: var(--vs-gold-hi);
    color: var(--vs-white);
    text-decoration: none;
}

.vehiclesearch-catbanner-btn:active {
    transform: scale(0.98);
}

.vehiclesearch-catbanner-btn-primary {
    /* Variante primaire identique pour l'instant ; placeholder pour
       differenciation future eventuelle (ex. variante secondaire ghost). */
}

/* Adaptation mobile : empilement vertical du bandeau */
@media (max-width: 599px) {
    .vehiclesearch-catbanner {
        flex-direction: column;
        align-items: stretch;
        gap: 10px;
    }

    .vehiclesearch-catbanner-text {
        text-align: left;
    }

    .vehiclesearch-catbanner-btn {
        width: 100%;
        justify-content: center;
    }
}


/* =============================================================
   8-bis. BANDEAU CATEGORIE - ETAT 2 REFONDU (v2.13.0)
   -------------------------------------------------------------
   Lorsque l'utilisateur a un vehicule memorise mais navigue dans
   une categorie type-piece sans avoir filtre par son vehicule,
   on affiche un encart de REORIENTATION (pas une simple barre
   d'action). Pattern "callout" charte Premium Auto Pro :
     - fond cream #FAF7EE
     - bordure-gauche or 5px
     - badge icone alerte "!" cercle cream/or
     - titre fort + paragraphe explicatif (avec %s vehicule + lien)
     - 2 CTAs : bouton primaire or rempli + lien secondaire

   Markup runtime (genere par JS via renderCategoryBanner v2.13.0,
   uniquement quand mode = with-vehicle) :

   <div class="vehiclesearch-catbanner vehiclesearch-catbanner-with-vehicle">
     <span class="vehiclesearch-catbanner-icon-badge">SVG !</span>
     <div class="vehiclesearch-catbanner-text">
       <div class="vehiclesearch-catbanner-title">Oups ! ...</div>
       <div class="vehiclesearch-catbanner-paragraph">
         <p>Ligne 1 statique</p>
         <p>Ligne 2 avec %s + <a>retournez</a></p>
       </div>
     </div>
     <div class="vehiclesearch-catbanner-actions">
       <a class="vehiclesearch-catbanner-btn-primary">Retourner...</a>
       <a class="vehiclesearch-catbanner-link-secondary">Modifier...</a>
     </div>
   </div>

   L'etat without-vehicle reste sur le markup et le style navy + or
   v2.12.x (cf section 8 ci-dessus). Les selecteurs ci-dessous ne
   s'appliquent QUE quand .vehiclesearch-catbanner-with-vehicle est
   present sur le bandeau, donc l'etat 1 n'est pas impacte.
   ============================================================= */

/* Override du conteneur quand mode = with-vehicle :
   bascule du pattern navy "barre d'action" -> pattern callout
   "encart de reorientation". On surclasse les valeurs heritees
   de .vehiclesearch-catbanner (section 8) par specificite double. */
.vehiclesearch-catbanner.vehiclesearch-catbanner-with-vehicle {
    align-items: flex-start;
    gap: 22px;
    padding: 22px 26px;
    background: var(--vs-cream);
    border-left: 5px solid var(--vs-gold);
    border-radius: 3px;
    color: #3D3D3D;          /* charte CMS - corps de texte */
}

/* Badge icone alerte (cercle cream/or + "!" central) */
.vehiclesearch-catbanner-icon-badge {
    flex-shrink: 0;
    width: 64px;
    height: 64px;
    border-radius: 50%;
    background: rgba(154, 123, 10, 0.10);
    border: 1.5px solid rgba(154, 123, 10, 0.45);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    color: var(--vs-gold);
    margin-top: 2px;
}
.vehiclesearch-catbanner-icon-badge svg {
    width: 32px;
    height: 32px;
    display: block;
}

/* Bloc texte central (titre + paragraphe) */
.vehiclesearch-catbanner-with-vehicle .vehiclesearch-catbanner-text {
    flex: 1;
    min-width: 0;
}
.vehiclesearch-catbanner-title {
    margin: 0 0 8px 0;
    font-size: 18px;
    font-weight: 800;
    letter-spacing: -0.01em;
    color: var(--vs-ink);
    line-height: 1.3;
}
.vehiclesearch-catbanner-paragraph {
    margin: 0;
    font-size: 14px;
    font-weight: 500;
    line-height: 1.55;
    color: #3D3D3D;
}
.vehiclesearch-catbanner-paragraph p {
    margin: 0 0 4px 0;
}
.vehiclesearch-catbanner-paragraph p:last-child { margin-bottom: 0; }
.vehiclesearch-catbanner-paragraph strong {
    font-weight: 700;
    color: var(--vs-ink);
}
.vehiclesearch-catbanner-paragraph a {
    color: var(--vs-gold);
    font-weight: 600;
    text-decoration: underline;
    text-underline-offset: 2px;
}
.vehiclesearch-catbanner-paragraph a:hover {
    color: var(--vs-ink);
    text-decoration: underline;
}

/* Bloc actions a droite (bouton primaire + lien secondaire) */
.vehiclesearch-catbanner-with-vehicle .vehiclesearch-catbanner-actions {
    flex-shrink: 0;
    flex-direction: column;
    align-items: stretch;
    gap: 10px;
    margin-top: 4px;
}

/* Bouton primaire : or rempli avec icone voiture - V2.13.0 */
.vehiclesearch-catbanner-btn-primary {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    height: 46px;
    padding: 0 22px;
    background: var(--vs-gold);
    color: var(--vs-white);
    font-family: inherit;
    font-size: 12.5px;
    font-weight: 700;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    text-decoration: none;
    border: none;
    border-radius: var(--vs-radius);
    cursor: pointer;
    transition: background-color 0.15s, transform 0.12s;
    white-space: nowrap;
}
.vehiclesearch-catbanner-btn-primary:hover {
    background: var(--vs-gold-hi);
    color: var(--vs-white);
    text-decoration: none;
}
.vehiclesearch-catbanner-btn-primary:active {
    transform: scale(0.98);
}
.vehiclesearch-catbanner-btn-primary svg {
    width: 18px;
    height: 18px;
    flex-shrink: 0;
}

/* Lien secondaire sous le bouton primaire */
.vehiclesearch-catbanner-link-secondary {
    text-align: center;
    color: var(--vs-gold);
    font-size: 13px;
    font-weight: 600;
    text-decoration: underline;
    text-underline-offset: 3px;
    transition: color 0.15s;
    background: transparent;
    border: none;
    cursor: pointer;
    font-family: inherit;
    padding: 0;
}
.vehiclesearch-catbanner-link-secondary:hover {
    color: var(--vs-ink);
    text-decoration: underline;
}
.vehiclesearch-catbanner-link-secondary .vs-arrow {
    display: inline-block;
    margin-left: 4px;
    transition: transform 0.15s;
}
.vehiclesearch-catbanner-link-secondary:hover .vs-arrow {
    transform: translateX(3px);
}

/* Adaptation mobile : empilement vertical */
@media (max-width: 767px) {
    .vehiclesearch-catbanner.vehiclesearch-catbanner-with-vehicle {
        flex-direction: column;
        align-items: stretch;
        gap: 14px;
        padding: 20px 18px;
        text-align: center;
    }
    .vehiclesearch-catbanner-icon-badge {
        margin: 0 auto;
        width: 56px;
        height: 56px;
    }
    .vehiclesearch-catbanner-icon-badge svg {
        width: 28px;
        height: 28px;
    }
    .vehiclesearch-catbanner-title { font-size: 17px; }
    .vehiclesearch-catbanner-paragraph { font-size: 13.5px; }
    .vehiclesearch-catbanner-paragraph p { text-align: left; }
    .vehiclesearch-catbanner-with-vehicle .vehiclesearch-catbanner-actions {
        margin-top: 2px;
        width: 100%;
    }
    .vehiclesearch-catbanner-btn-primary {
        width: 100%;
    }
}


/* =============================================================
   9. INDICATEUR FILTRAGE ACTIF (v2.12.1)
   -------------------------------------------------------------
   Markup runtime (genere par JS) :

   <div class="vehiclesearch-filter-indicator vehiclesearch-filter-indicator-{state}">
     [si loading]
       <span class="vehiclesearch-filter-spinner"></span>
       <span class="vehiclesearch-filter-indicator-text">Filtrage en cours...</span>
     [si active]
       <span class="vehiclesearch-filter-icon">SVG</span>
       <div class="vehiclesearch-filter-indicator-text">Affichage filtre pour ...</div>
       <div class="vehiclesearch-filter-details">X produits compatibles ...</div>
       <button class="vehiclesearch-filter-remove">Retirer le filtre</button>
   </div>

   Etats :
     - vehiclesearch-filter-indicator-loading : pendant l'AJAX
     - vehiclesearch-filter-indicator-active  : filtre applique
   ============================================================= */

.vehiclesearch-filter-indicator {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 10px 14px;
    margin: 14px 0;
    background: var(--vs-ink);
    border-radius: var(--vs-radius);
    color: var(--vs-white);
    font-family: 'Manrope', system-ui, sans-serif;
    font-size: 13px;
}

.vehiclesearch-filter-indicator-loading {
    /* Etat loading : moins de poids visuel */
    opacity: 0.85;
}

.vehiclesearch-filter-indicator-active {
    border-left: 4px solid var(--vs-gold);
}

.vehiclesearch-filter-icon {
    flex-shrink: 0;
    color: var(--vs-gold);
    display: inline-flex;
    align-items: center;
}

.vehiclesearch-filter-icon svg {
    width: 18px;
    height: 18px;
}

.vehiclesearch-filter-spinner {
    flex-shrink: 0;
    display: inline-block;
    width: 16px;
    height: 16px;
    border: 2px solid rgba(154, 123, 10, 0.3);
    border-top-color: var(--vs-gold);
    border-radius: 50%;
    animation: vs-spin 0.7s linear infinite;
}

.vehiclesearch-filter-indicator-text {
    flex: 1;
    min-width: 0;
    font-weight: 600;
    color: var(--vs-white);
}

.vehiclesearch-filter-details {
    flex-shrink: 0;
    color: var(--vs-grey-text);
    font-size: 12px;
    font-weight: 400;
}

.vehiclesearch-filter-remove {
    flex-shrink: 0;
    background: transparent;
    border: 1px solid var(--vs-gold);
    color: var(--vs-gold);
    padding: 6px 12px;
    font-family: inherit;
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 0.05em;
    text-transform: uppercase;
    border-radius: var(--vs-radius);
    cursor: pointer;
    transition: background-color 0.15s, color 0.15s;
}

.vehiclesearch-filter-remove:hover {
    background: rgba(154, 123, 10, 0.15);
    color: var(--vs-gold-hi);
}

/* Adaptation mobile : empilement vertical */
@media (max-width: 599px) {
    .vehiclesearch-filter-indicator {
        flex-wrap: wrap;
        gap: 8px;
    }

    .vehiclesearch-filter-indicator-text {
        flex: 1 0 100%;
    }

    .vehiclesearch-filter-details {
        flex: 1 0 auto;
    }
}

/* =============================================================
   10. UTILITAIRE - produits incompatibles masques
   ============================================================= */
.vehiclesearch-hidden-incompatible {
    display: none !important;
}


/* =============================================================
   11. COHABITATION OEMSEARCHPRO
   ============================================================= */
.pap-search-row .vehiclesearch-wrapper {
    width: 100%;
    margin: 0;
    box-sizing: border-box;
}