/* Index des marques (landing) / modèles (page marque) en compatibilité :
   grille de tuiles cliquables, cohérente avec les cartes du reste du site
   (fond blanc arrondi, police montserrat, accent rouge #EB1D24). */
.pmb-compat-index {
    list-style: none;
    margin: 1.5rem 0 3rem;
    padding: 0;
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(210px, 1fr));
    gap: 12px;
}

.pmb-compat-index li {
    margin: 0;
}

.pmb-compat-index a {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding: 14px 18px;
    background: var(--wp--preset--color--white, #fff);
    border: 1px solid #e6e6e6;
    border-radius: 12px;
    color: #1a1a1a;
    text-decoration: none;
    font-family: var(--wp--preset--font-family--montserrat, inherit);
    font-size: 15px;
    font-weight: 600;
    line-height: 1.2;
    transition: border-color .15s ease, box-shadow .15s ease,
                transform .15s ease;
}

/* Flèche = signal de navigation (reprend le motif « → » du site). */
.pmb-compat-index a::after {
    content: "→";
    flex: 0 0 auto;
    color: var(--Primary-100, #EB1D24);
    font-weight: 700;
    transition: transform .15s ease;
}

.pmb-compat-index a:hover {
    border-color: var(--Primary-100, #EB1D24);
    box-shadow: 0 2px 12px rgba(235, 29, 36, .12);
    transform: translateY(-1px);
}

.pmb-compat-index a:hover::after {
    transform: translateX(3px);
}

/* Filtres page modèle véhicule (direction LHD/RHD + années) — même style que
   les filtres véhicule/appareil du catalogue, placés côte à côte. */
.compat-search {
    margin-bottom: 1.5rem;
}

.compat-search .filters-container {
    justify-content: flex-start;
    gap: 16px;
    align-items: stretch;   /* switcher et bouton année à la même hauteur */
    flex-wrap: wrap;
}

.compat-search .search-steering {
    display: flex;
    align-items: stretch;
}

.compat-search .search-steering > .uk-inline {
    display: flex;
    align-items: flex-start;   /* icône info en haut à droite */
    gap: 8px;
}

/* Le switcher LHD/RHD remplit exactement la hauteur du bouton année, et chaque
   option (dont le fond rouge de la sélection) remplit toute la hauteur. */
.compat-search .search-steering .drive-switcher {
    align-self: stretch;
    align-items: stretch;   /* les <li> remplissent la hauteur du switcher */
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

.compat-search .search-steering .drive-switcher li {
    display: flex;
    align-items: stretch;
}

.compat-search .search-steering .drive-switcher li a {
    display: flex;
    align-items: center;    /* texte centré verticalement dans la pleine hauteur */
}