/**
 * Styles pour le bloc Slider de Modèles - POSITIONS FIXES
 * Design identique, logique positions fixes
 * @package GrimTheme
 */

/* ================================
   PLACEHOLDER POUR L'ÉDITEUR GUTENBERG
================================ */
.components-placeholder {
    min-height: 200px;
    padding: 2rem;
    border: 2px dashed #d1d5db;
    border-radius: 8px;
    text-align: center;
    background: #f9fafb;
    margin: 1rem 0;
}

.components-placeholder__label {
    font-weight: 600;
    margin-bottom: 0.5rem;
    color: #374151;
    font-size: 1.125rem;
}

.components-placeholder__instructions {
    color: #6b7280;
    font-size: 0.875rem;
    line-height: 1.5;
}

/* ================================
   ALIGNEMENTS GUTENBERG
================================ */
.models-slider-block.alignwide {
    width: 100vw;
    position: relative;
    left: 50%;
    right: 50%;
    margin-left: -50vw;
    margin-right: -50vw;
    max-width: none;
}

.models-slider-block.alignfull {
    width: 100vw;
    position: relative;
    left: 50%;
    right: 50%;
    margin-left: -50vw;
    margin-right: -50vw;
    max-width: none;
}

/* Ajustements pour les alignements larges */
.alignwide .models-slider-container,
.alignfull .models-slider-container {
    max-width: 1400px;
    margin: 0 auto;
    padding: 0 2rem;
}

@media (max-width: 767px) {
    .alignwide .models-slider-container,
    .alignfull .models-slider-container {
        padding: 0 1rem;
    }
}

/* ================================
   Z-INDEX ET CLIQUABILITÉ - RÈGLES MANQUANTES
================================ */

/* Navigation avec Z-INDEX ÉLEVÉ pour éviter les conflits */
.models-navigation {
    position: relative !important;
    z-index: 150 !important;
    pointer-events: auto !important;
}

.models-nav-buttons {
    position: relative !important;
    z-index: 151 !important;
    pointer-events: auto !important;
}

.models-nav-button {
    position: relative !important;
    z-index: 152 !important;
    pointer-events: auto !important;
}

.models-nav-button svg,
.models-nav-button img {
    pointer-events: none !important; /* Les icônes n'interfèrent pas avec les clics */
}

/* Barre de progression */
.models-progress-container {
    position: relative !important;
    z-index: 149 !important;
}

/* S'assurer que les éléments interactifs dans les cartes fonctionnent */
.model-slide .model-btn {
    position: relative !important;
    z-index: 140 !important;
    pointer-events: auto !important;
}

/* Règle spécifique pour l'ID models-info si présent */
#models-info .models-navigation,
#models-info .models-nav-buttons,
#models-info .models-nav-button {
    pointer-events: auto !important;
    z-index: 150 !important;
}

/* ================================
   EFFETS SOPHISTIQUÉS DES FLÈCHES - IDENTIQUES AU SLIDER OFFRE
================================ */

/* Styles avancés pour les boutons de navigation - écrasent les styles basiques */
.models-nav-button {
    width: 48px !important;
    height: 48px !important;
    min-width: 48px !important;
    min-height: 48px !important;
    border-radius: 50% !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    transition: all 0.4s cubic-bezier(0.16, 1, 0.3, 1) !important;
    cursor: pointer !important;
    user-select: none !important;
    backdrop-filter: blur(20px) !important;
    -webkit-backdrop-filter: blur(20px) !important;
    background: rgba(255, 255, 255, 0.1) !important;
    border: 1px solid rgba(255, 255, 255, 0.2) !important;
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.1), inset 0 1px 0 rgba(255, 255, 255, 0.2) !important;
}

.models-nav-button:hover {
    transform: scale(1.1) translateY(-2px) !important;
    background: rgba(255, 255, 255, 0.2) !important;
    border-color: rgba(255, 255, 255, 0.3) !important;
    box-shadow: 0 12px 40px rgba(0, 0, 0, 0.15), 0 0 20px rgba(31, 41, 55, 0.3), inset 0 1px 0 rgba(255, 255, 255, 0.3) !important;
}

.models-nav-button:active {
    transform: scale(0.95) translateY(0) !important;
}

.models-nav-button:focus-visible {
    outline: 2px solid #1f2937 !important;
    outline-offset: 2px !important;
    box-shadow: 0 0 0 4px rgba(31, 41, 55, 0.2), 0 8px 32px rgba(0, 0, 0, 0.1) !important;
}

/* Effets sur les icônes */
.models-nav-button .arrow-icon {
    width: 24px !important;
    height: 24px !important;
    min-width: 24px !important;
    min-height: 24px !important;
    display: block !important;
    transition: all 0.3s cubic-bezier(0.16, 1, 0.3, 1) !important;
    opacity: 0.9 !important;
    object-fit: contain !important;
    color: #374151 !important;
    filter: drop-shadow(0 2px 4px rgba(0, 0, 0, 0.1)) !important;
}

.models-nav-button:hover .arrow-icon {
    opacity: 1 !important;
    transform: scale(1.1) !important;
    color: #1f2937 !important;
    filter: drop-shadow(0 4px 8px rgba(0, 0, 0, 0.15)) !important;
}

.models-nav-button:active .arrow-icon {
    transform: scale(0.9) !important;
}

/* Responsive pour mobile */
@media (max-width: 767px) {
    .models-nav-button {
        width: 40px !important;
        height: 40px !important;
        min-width: 40px !important;
        min-height: 40px !important;
    }
    
    .models-nav-button .arrow-icon {
        width: 20px !important;
        height: 20px !important;
        min-width: 20px !important;
        min-height: 20px !important;
    }
}
/* ================================
   CONTENEUR PRINCIPAL - FLEXBOX PUR
================================ */

/* Conteneur flexbox parfait */
.models-container {
    width: 100% !important;
    max-width: 100% !important;
    display: flex !important;
    gap: 1.25rem !important; /* gap-5 de Tailwind */
}

/* Positions fixes avec flexbox - HAUTEURS FIXES SEULEMENT */
.model-slide.fixed-position {
    transition: all 0.4s cubic-bezier(0.25, 0.46, 0.45, 0.94) !important;
    height: 660px !important; /* Hauteur augmentée pour 2 boutons */
    min-height: 660px !important;
    max-height: 660px !important;
    flex: 1 !important;
    max-width: none !important;
    width: auto !important;
    transform: translateX(0) !important;
    opacity: 1 !important;
    filter: blur(0px) !important;
}

/* Effet hover pour les cartes */
.model-slide.fixed-position:hover {
    transform: translateY(-8px) !important;
}

/* Forcer la même hauteur pour toutes les cartes - DESIGN INCHANGÉ */
.model-slide.fixed-position .model-card {
    height: 100% !important;
    min-height: 100% !important;
    max-height: 100% !important;
    display: flex !important;
    flex-direction: column !important;
    padding: 1.5rem !important; /* Design original conservé */
}

/* CORRECTION : Taille fixe UNIQUEMENT pour l'image du produit */
.model-slide.fixed-position .model-card .mb-6 img {
    height: 180px !important; /* Hauteur fixe pour l'image du produit */
    width: auto !important;
    max-width: 100% !important;
    object-fit: contain !important; /* Garde les proportions */
    display: block !important;
    margin: 0 auto !important; /* Centre l'image */
}

/* NOUVEAU : Prix en noir avec espacement des milliers */
.model-slide.fixed-position .model-card .text-2xl.font-bold.text-blue-600 {
    color: #000000 !important; /* Prix en noir au lieu de bleu */
}

/* SUPPRESSION de tous les media queries de largeur - Flexbox s'en charge */
/* Le responsive est géré par les classes Tailwind hidden/flex uniquement */

/* ================================
   STYLES POUR LES ICÔNES SVG
================================ */
.arrow-icon {
    width: 24px !important;
    height: 24px !important;
    min-width: 24px;
    min-height: 24px;
    display: block;
    transition: all 0.3s ease;
    opacity: 0.8;
    object-fit: contain;
    color: #4b5563;
}

.models-nav-button:hover .arrow-icon {
    opacity: 1;
    transform: scale(1.1);
    color: #1f2937;
}

.models-nav-button:active .arrow-icon {
    transform: scale(0.95);
}

@media (max-width: 767px) {
    .arrow-icon {
        width: 20px !important;
        height: 20px !important;
        min-width: 20px;
        min-height: 20px;
    }
}

/* ================================
   ANIMATIONS ET TRANSITIONS
================================ */

/* Animation d'entrée pour le bloc entier */
.models-slider-block {
    opacity: 0;
    animation: slideInBlock 0.8s ease-out forwards;
}

@keyframes slideInBlock {
    from {
        opacity: 0;
        transform: translateY(20px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

/* Animation de pulsation pour la barre de progression */
@keyframes progressPulse {
    0%, 100% { opacity: 1; }
    50% { opacity: 0.8; }
}

/* Animation pour le changement de contenu */
@keyframes contentFadeIn {
    from {
        opacity: 0;
        transform: translateY(20px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

@keyframes contentFadeOut {
    from {
        opacity: 1;
        transform: translateY(0);
    }
    to {
        opacity: 0;
        transform: translateY(-20px);
    }
}

/* ================================
   CORRECTIONS POUR CONTENU GÉNÉRÉ
================================ */

/* S'assurer que le contenu généré par JS hérite des styles */
.model-slide.fixed-position .model-card {
    padding: 1.5rem;
    height: 100%;
    display: flex;
    flex-direction: column;
}

.model-slide.fixed-position .model-card img {
    border-radius: 12px;
    transition: transform 0.4s ease;
}

.model-slide.fixed-position:hover .model-card img {
    transform: scale(1.02);
}

/* Boutons d'action dans le contenu généré */
.model-slide.fixed-position .model-btn {
    border-radius: 12px;
    font-weight: 500;
    letter-spacing: -0.01em;
    transition: all 0.3s cubic-bezier(0.25, 0.46, 0.45, 0.94);
    transform: translateY(0);
}

.model-slide.fixed-position .model-btn:hover {
    transform: translateY(-2px);
}

.model-slide.fixed-position .model-btn:active {
    transform: translateY(0);
}

/* ================================
   ACCESSIBILITÉ
================================ */

/* Focus visible pour la navigation au clavier */
.models-nav-button:focus-visible {
    outline: 2px solid #3b82f6;
    outline-offset: 2px;
    box-shadow: 0 0 0 4px rgba(59, 130, 246, 0.1);
}

/* Réduction des animations si l'utilisateur le préfère */
@media (prefers-reduced-motion: reduce) {
    .model-slide.fixed-position,
    .models-progress-fill,
    .arrow-icon,
    .model-card,
    .models-nav-button,
    .model-btn {
        transition: none;
        animation: none;
    }
    
    .models-slider-block {
        animation: none;
        opacity: 1;
    }
}

/* ================================
   CORRECTIONS RESPONSIVE FINALES
================================ */

@media (max-width: 767px) {
    .model-slide.fixed-position .model-card {
        padding: 0.5rem !important; /* Encore plus réduit */
    }

    /* Hauteur fixe mobile - ULTRA RÉDUITE (boutons en row + image mini) */
    .model-slide.fixed-position {
        height: 330px !important; /* Réduit de 340px à 330px grâce à l'image plus petite */
        min-height: 330px !important;
        max-height: 330px !important;
    }

    /* Taille d'image fixe sur mobile - ULTRA MINI */
    .model-slide.fixed-position .model-card .mb-6 img {
        height: 45px !important; /* Réduit de 55px à 45px */
    }

    /* CORRECTION : Boutons parfaitement ronds sur mobile - RÉDUITS */
    .models-nav-button {
        width: 36px !important;
        height: 36px !important;
        min-width: 36px !important;
        min-height: 36px !important;
        max-width: 36px !important;
        max-height: 36px !important;
        border-radius: 18px !important;
        flex-shrink: 0 !important;
        flex-grow: 0 !important;
        box-sizing: border-box !important;
        aspect-ratio: 1 / 1 !important;
        font-size: 0.875rem !important;
    }

    /* Réduire DRASTIQUEMENT tous les espacements verticaux */
    .model-slide.fixed-position .model-card .mb-1 {
        margin-bottom: 0.1rem !important; /* Réduit de 0.125rem à 0.1rem */
    }

    .model-slide.fixed-position .model-card .mb-3 {
        margin-bottom: 0.2rem !important; /* Réduit de 0.25rem à 0.2rem */
    }

    .model-slide.fixed-position .model-card .mb-4 {
        margin-bottom: 0.25rem !important; /* Réduit de 0.375rem à 0.25rem */
    }

    .model-slide.fixed-position .model-card .mb-6 {
        margin-bottom: 0.25rem !important; /* Réduit de 0.375rem à 0.25rem */
    }

    /* Réduire les gaps entre éléments flex/space (sauf le container de boutons) */
    .model-slide.fixed-position .model-card .space-y-2:not(.mt-auto) > * + *,
    .model-slide.fixed-position .model-card .space-y-3:not(.mt-auto) > * + * {
        margin-top: 0.2rem !important; /* Réduit de 0.25rem à 0.2rem */
    }

    /* Réduire les gaps dans les flex containers */
    .model-slide.fixed-position .model-card .flex.flex-col {
        gap: 0.2rem !important;
    }

    .model-slide.fixed-position .model-card .flex.gap-2,
    .model-slide.fixed-position .model-card .flex.gap-3 {
        gap: 0.2rem !important;
    }

    /* Titre plus petit */
    .model-slide.fixed-position .model-card h3 {
        font-size: 1rem !important; /* Encore plus petit */
        line-height: 1.2 !important;
        margin-bottom: 0.125rem !important;
    }

    /* Prix plus petit */
    .model-slide.fixed-position .model-card .text-2xl.font-bold {
        font-size: 1.125rem !important; /* Plus petit */
        line-height: 1.3 !important;
    }

    /* Textes plus petits */
    .model-slide.fixed-position .model-card .text-sm {
        font-size: 0.7rem !important;
    }

    .model-slide.fixed-position .model-card .text-xs {
        font-size: 0.6rem !important;
        margin-bottom: 0.125rem !important;
    }

    /* Boutons MINI */
    .model-slide.fixed-position .model-card button,
    .model-slide.fixed-position .model-card .px-6 {
        padding-left: 0.5rem !important; /* Réduit de 0.625rem à 0.5rem */
        padding-right: 0.5rem !important;
        font-size: 0.65rem !important; /* Réduit de 0.7rem à 0.65rem */
        line-height: 1.1 !important; /* Réduit de 1.2 à 1.1 */
    }

    .model-slide.fixed-position .model-card .py-3,
    .model-slide.fixed-position .model-card .py-2 {
        padding-top: 0.3rem !important; /* Réduit de 0.375rem à 0.3rem */
        padding-bottom: 0.3rem !important;
    }

    /* Icônes des caractéristiques plus petites */
    .model-slide.fixed-position .model-card .grid svg,
    .model-slide.fixed-position .model-card .grid i {
        width: 0.875rem !important;
        height: 0.875rem !important;
        font-size: 0.875rem !important;
    }

    /* Réduire le gap de la grille d'icônes */
    .model-slide.fixed-position .model-card .grid.grid-cols-3 {
        gap: 0.15rem !important; /* Réduit de 0.25rem à 0.15rem */
        margin-bottom: 0.25rem !important; /* Réduit de 0.375rem à 0.25rem */
    }

    /* Texte des icônes plus petit */
    .model-slide.fixed-position .model-card .grid .text-xs {
        font-size: 0.55rem !important;
        line-height: 1.1 !important;
    }

    /* Container d'image avec hauteur ULTRA MINI */
    .model-slide.fixed-position .model-card .h-48 {
        height: 45px !important; /* Réduit de 55px à 45px */
        margin-bottom: 0.2rem !important; /* Réduit de 0.25rem à 0.2rem */
    }

    /* En-tête avec min-height MINI */
    .model-slide.fixed-position .model-card .min-h-\[60px\] {
        min-height: 26px !important; /* Réduit de 30px à 26px */
        margin-bottom: 0.2rem !important; /* Réduit de 0.25rem à 0.2rem */
    }

    /* Prix avec min-height MINI */
    .model-slide.fixed-position .model-card .min-h-\[50px\] {
        min-height: 24px !important; /* Réduit de 28px à 24px */
        margin-bottom: 0.2rem !important; /* Réduit de 0.25rem à 0.2rem */
    }

    /* Padding-top de la carte réduit (pour le badge) */
    .model-slide.fixed-position .model-card {
        padding-top: 1.1rem !important; /* Réduit de 1.25rem à 1.1rem */
    }

    /* Réduire l'espace entre les sections principales */
    .model-slide.fixed-position .model-card > * {
        margin-bottom: 0.2rem !important;
    }

    /* Forcer les gap à 0 sur les containers flex quand pas spécifié */
    .model-slide.fixed-position .model-card .flex:not([class*="gap"]) {
        gap: 0.15rem !important;
    }

    /* BOUTONS CÔTE À CÔTE sur mobile pour gagner de la hauteur */
    .models-slider-block .model-slide.fixed-position .model-card .mt-auto.space-y-2,
    .models-slider-block .model-slide .model-card .mt-auto.space-y-2 {
        display: flex !important;
        flex-direction: row !important;
        flex-wrap: nowrap !important;
        gap: 0.375rem !important;
        column-gap: 0.375rem !important;
        row-gap: 0 !important;
        margin-top: 0 !important;
        align-items: stretch !important;
        justify-content: space-between !important;
    }

    /* Les boutons prennent toute la largeur disponible */
    .models-slider-block .model-slide.fixed-position .model-card .mt-auto.space-y-2 > button,
    .models-slider-block .model-slide.fixed-position .model-card .mt-auto.space-y-2 > a,
    .models-slider-block .model-slide .model-card .mt-auto.space-y-2 > button,
    .models-slider-block .model-slide .model-card .mt-auto.space-y-2 > a {
        flex: 1 1 calc(50% - 0.1875rem) !important;
        min-width: 0 !important;
        width: calc(50% - 0.1875rem) !important;
        max-width: calc(50% - 0.1875rem) !important;
        display: flex !important;
        margin: 0 !important;
    }

    /* Annuler les space-y car maintenant en row */
    .models-slider-block .model-slide.fixed-position .model-card .mt-auto.space-y-2 > * + *,
    .models-slider-block .model-slide .model-card .mt-auto.space-y-2 > * + * {
        margin-top: 0 !important;
        margin-left: 0 !important;
        margin-right: 0 !important;
    }

    /* Réduire les marges du container principal */
    .models-slider-block .relative.w-full.my-12 {
        margin-top: 1rem !important;
        margin-bottom: 1rem !important;
    }

    /* Réduire le padding du wrapper avec les flèches */
    .models-slider-block .pb-\[25px\] {
        padding-bottom: 10px !important;
    }

    /* Réduire l'espacement de la barre de progression */
    .models-progress-container {
        margin-top: 0.5rem !important;
        height: 3px !important; /* Plus fine */
    }

    .models-progress-fill {
        height: 3px !important;
    }

    /* Navigation plus compacte avec margin-top réduit */
    .models-navigation {
        gap: 0.5rem !important;
        margin-top: 0.5rem !important; /* Réduit de mt-8 (2rem) à 0.5rem = 75% de réduction */
    }

    /* Réduire aussi le margin-top sur la classe directement */
    .models-slider-block .models-navigation.mt-8 {
        margin-top: 0.5rem !important;
    }

    /* Réduire l'espace au-dessus du slider */
    .models-container-new {
        padding-bottom: 0.5rem !important;
        /* Touch handling pour mobile */
        touch-action: pan-y pinch-zoom !important;
        -webkit-overflow-scrolling: touch !important;
        -webkit-user-select: none !important;
        user-select: none !important;
        cursor: grab;
    }

    /* Track touch handling */
    .models-track {
        touch-action: pan-y pinch-zoom !important;
        -webkit-overflow-scrolling: touch !important;
    }

    /* Réduire l'espace du filtre */
    .models-filter-container {
        margin-bottom: 0.25rem !important;
    }
}

/* ================================
   MASQUAGE DES DONNÉES JSON
================================ */

.models-data {
    display: none !important;
    visibility: hidden !important;
    position: absolute !important;
    left: -9999px !important;
}

/* ================================
   BADGES DECORATIFS DANS L'ANGLE
================================ */

/* Badge positionné dans l'angle supérieur droit de la carte */
.model-slide .model-card .bg-blue-100.text-blue-800,
.model-slide .model-card span[class*="bg-"][class*="text-"] {
    position: absolute !important;
    top: 8px !important;
    right: 8px !important;
    z-index: 10 !important;
    transform: rotate(3deg) translateY(0) !important; /* Petite rotation de 3 degrés */
    transition: all 0.3s ease !important;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1) !important;
    border: 1px solid rgba(255, 255, 255, 0.5) !important;
    backdrop-filter: blur(4px) !important;
    -webkit-backdrop-filter: blur(4px) !important;
    transform-origin: center center !important; /* Point de rotation au centre */
}

/* Style moderne avec glassmorphism pour les anciens badges (rétro-compatibilité) */
.model-slide .model-card .bg-blue-100.text-blue-800 {
    background: rgba(219, 234, 254, 0.9) !important; /* bg-blue-100 avec transparence */
    color: #1e40af !important; /* Couleur bleue plus foncée pour contraste */
    position: absolute !important;
    top: -0.5rem !important;
    right: 0.75rem !important;
    z-index: 10 !important;
    transform: rotate(3deg) !important;
    transition: all 0.3s cubic-bezier(0.16, 1, 0.3, 1) !important;
}

/* Effet hover sur les anciens badges */
.model-slide:hover .model-card .bg-blue-100.text-blue-800,
.model-slide:hover .model-card span[class*="bg-"][class*="text-"] {
    transform: rotate(6deg) translateY(-2px) !important; /* Rotation plus marquée au hover */
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15) !important;
}

/* S'assurer que la carte a une position relative pour le badge absolu */
.model-slide .model-card {
    position: relative !important;
    /* Padding-top pour éviter le chevauchement avec le titre */
    padding-top: 2rem !important;
}

/* Repositionner le titre pour éviter le chevauchement */
.model-slide .model-card h3 {
    margin-top: 0.5rem !important;
    position: relative !important;
    z-index: 5 !important;
}

/* Gérer l'overflow du container de l'en-tête */
.model-slide .model-card .flex.justify-between.items-start {
    overflow: visible !important;
    position: relative !important;
}

/* Badge : position absolue en haut à droite de la carte */
.model-slide .model-card .badge-theme {
    position: absolute !important;
    top: -0.5rem !important;
    right: 0.75rem !important;
    max-width: 140px !important; /* Limite la largeur du badge */
    overflow: hidden !important;
    text-overflow: ellipsis !important;
    white-space: nowrap !important;
    display: inline-block !important;
    z-index: 10 !important; /* Au-dessus du contenu */
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1) !important;
    transform: rotate(3deg) !important; /* Petite rotation pour l'effet étiquette */
    transition: all 0.3s cubic-bezier(0.16, 1, 0.3, 1) !important;
}

/* Effet hover sur le badge */
.model-slide:hover .model-card .badge-theme {
    transform: rotate(6deg) translateY(-2px) !important;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15) !important;
}

/* Sur les écrans plus grands, permettre des badges plus larges */
@media (min-width: 768px) {
    .model-slide .model-card .badge-theme {
        max-width: 180px !important;
        right: 1rem !important;
    }
}

/* Ajuster le titre pour qu'il prenne toute la largeur disponible */
.model-slide .model-card .flex-1.mr-2 {
    min-width: 0 !important; /* Permet au flex item de se rétrécir en dessous de sa taille de contenu */
    overflow: hidden !important;
    padding-right: 0 !important; /* Plus de margin-right nécessaire */
    width: 100% !important; /* Prendre toute la largeur */
}

/* Mobile : Badge repositionné et rotation réduite */
@media (max-width: 767px) {
    .model-slide .model-card .badge-theme {
        top: -0.25rem !important;
        right: 0.5rem !important;
        max-width: 150px !important; /* Augmenté pour éviter la coupure */
        font-size: 0.65rem !important; /* Légèrement réduit pour rentrer */
        padding: 0.25rem 0.7rem !important;
        transform: rotate(2deg) !important; /* Rotation plus subtile sur mobile */
    }

    .model-slide:hover .model-card .badge-theme {
        transform: rotate(4deg) translateY(-1px) !important; /* Hover plus subtil sur mobile */
    }

    .model-slide .model-card {
        padding-top: 1.5rem !important; /* Moins d'espace sur mobile */
    }

    /* Forcer le menu déroulant sur mobile */
    .models-filter-buttons,
    .models-filter-tabs {
        display: none !important;
    }

    .models-filter-dropdown {
        display: flex !important;
    }

    /* Afficher le custom select même si un autre style était sélectionné */
    .models-filter-container[data-filter-style="buttons"] .models-filter-dropdown,
    .models-filter-container[data-filter-style="tabs"] .models-filter-dropdown {
        display: flex !important;
    }

    .models-filter-container[data-filter-style="buttons"] .models-filter-buttons,
    .models-filter-container[data-filter-style="tabs"] .models-filter-tabs {
        display: none !important;
    }
}

/* Variations de couleurs pour d'autres types de badges */
.model-slide .model-card .bg-green-100 {
    background: rgba(220, 252, 231, 0.9) !important;
    color: #065f46 !important;
}

.model-slide .model-card .bg-red-100 {
    background: rgba(254, 226, 226, 0.9) !important;
    color: #991b1b !important;
}

.model-slide .model-card .bg-yellow-100 {
    background: rgba(254, 249, 195, 0.9) !important;
    color: #92400e !important;
}

.model-slide .model-card .bg-purple-100 {
    background: rgba(243, 232, 255, 0.9) !important;
    color: #6b21a8 !important;
}

/* ================================
   BOUTON "ESSAYER" - STYLE SECONDAIRE
================================ */

/* Style du bouton "Essayer" avec bordure de la couleur primaire */
.open-test-drive-slider {
    cursor: pointer;
    position: relative;
    overflow: hidden;
}

/* Surcharge du hover - Empêche le changement de couleur du thème parent */
.open-test-drive-slider:hover,
.open-test-drive-slider:focus,
.open-test-drive-slider:active {
    opacity: 0.9;
    /* Empêcher la surcharge de couleur du thème GeneratePress */
    background-color: inherit !important;
    color: inherit !important;
}

/* ================================
   MODAL TEST DRIVE INTÉGRÉ - Preline UI
================================ */

/* Style identique à #hs-modal-contact - FORCE MAXIMALE */
/* Z-index au MAXIMUM CSS pour passer au-dessus de #utm-offer */
#hs-slider-test-drive-modal {
    z-index: 2147483647 !important; /* MAX INT - identique à #utm-offer */
    position: fixed !important;
    isolation: isolate !important; /* Crée un nouveau contexte de stacking */
}

/* Tous les états possibles */
#hs-slider-test-drive-modal.open,
#hs-slider-test-drive-modal.opened,
#hs-slider-test-drive-modal.hs-overlay-open,
#hs-slider-test-drive-modal:not(.hidden) {
    pointer-events: auto !important;
    background: rgba(255, 255, 255, 0.2) !important;
    backdrop-filter: blur(10px) !important;
    -webkit-backdrop-filter: blur(10px) !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    z-index: 2147483647 !important; /* MAX INT */
    position: fixed !important;
    top: 0 !important;
    left: 0 !important;
    width: 100vw !important;
    height: 100vh !important;
    min-height: 100vh !important;
}

/* Force encore plus avec sélecteurs combinés */
#hs-slider-test-drive-modal[class*="open"],
#hs-slider-test-drive-modal[class*="overlay"] {
    z-index: 2147483647 !important;
}

#hs-slider-test-drive-modal .hs-overlay-open\:opacity-100,
#hs-slider-test-drive-modal.open .hs-overlay-open\:opacity-100,
#hs-slider-test-drive-modal.hs-overlay-open .hs-overlay-open\:opacity-100 {
    opacity: 1 !important;
}

#hs-slider-test-drive-modal .hs-overlay-open\:mt-7,
#hs-slider-test-drive-modal.open .hs-overlay-open\:mt-7,
#hs-slider-test-drive-modal.hs-overlay-open .hs-overlay-open\:mt-7 {
    margin-top: 1.75rem !important;
}

/* Styles du contenu de la modal */
#hs-slider-test-drive-modal .pointer-events-auto {
    pointer-events: auto !important;
    background: white !important;
    border-radius: 1rem !important;
    box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.25) !important;
    border: 1px solid rgba(255, 255, 255, 0.2) !important;
    position: relative !important;
    z-index: 100001 !important;
    max-height: 90vh !important;
}

/* Container du modal (wrapper Preline) - Laisser Tailwind gérer la largeur */
#hs-slider-test-drive-modal > div {
    /* Ne pas forcer de max-width ici, c'est géré par sm:max-w-lg dans le HTML */
}

/* S'assurer que le contenu est visible */
#hs-slider-test-drive-modal .overflow-y-auto {
    overflow-y: auto !important;
    max-height: calc(90vh - 60px) !important;
}

/* Header visible */
#hs-slider-test-drive-modal .border-b {
    background: white !important;
}

/* Form steps */
#hs-slider-test-drive-modal .slider-form-step {
    display: none;
}

#hs-slider-test-drive-modal .slider-form-step.active {
    display: block !important;
}

/* Suppression du backdrop automatique de Preline */
#hs-slider-test-drive-modal-backdrop {
    display: none !important;
    visibility: hidden !important;
    opacity: 0 !important;
    pointer-events: none !important;
}

/* Au cas où Preline crée un backdrop avec une classe générique */
div[class*="hs-overlay-backdrop"][class*="slider-test-drive"] {
    display: none !important;
}

/* S'assurer que tous les éléments du modal sont au-dessus */
#hs-slider-test-drive-modal * {
    position: relative;
    z-index: inherit;
}

#hs-slider-test-drive-modal button,
#hs-slider-test-drive-modal input,
#hs-slider-test-drive-modal textarea,
#hs-slider-test-drive-modal select,
#hs-slider-test-drive-modal label {
    z-index: auto !important;
}

/* Stepper */
.slider-stepper {
    padding: 1rem 0;
    background: transparent;
}

.slider-stepper-inner {
    display: flex;
    align-items: center;
    justify-content: space-between;
    max-width: 400px;
    margin: 0 auto;
}

.slider-step-item {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.5rem;
}

.slider-step-circle {
    width: 40px;
    height: 40px;
    border-radius: 50%;
    background: #e5e7eb;
    color: #6b7280;
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: 600;
    transition: all 0.3s;
}

.slider-step-item.active .slider-step-circle {
    background: var(--theme-primary-color, #6646ff);
    color: white;
}

.slider-step-item.completed .slider-step-circle {
    background: #10b981;
    color: white;
}

.slider-step-label {
    font-size: 0.875rem;
    color: #6b7280;
    transition: color 0.3s;
}

.slider-step-item.active .slider-step-label {
    color: var(--theme-primary-color, #6646ff);
    font-weight: 600;
}

.slider-step-line {
    flex: 1;
    height: 2px;
    background: #e5e7eb;
    margin: 0 0.5rem;
    transition: background 0.3s;
}

.slider-step-line.completed {
    background: #10b981;
}

/* Form - Retiré car géré au niveau du modal */

/* Cards de sélection */
.slider-model-card,
.slider-dealership-card {
    padding: 1rem;
    border: 2px solid #e5e7eb;
    border-radius: 0.5rem;
    cursor: pointer;
    transition: all 0.3s;
    display: block;
    width: 100%;
}

.slider-model-card:hover,
.slider-dealership-card:hover {
    border-color: #d1d5db;
    background: #f9fafb;
}

.slider-model-card.selected,
.slider-dealership-card.selected {
    border-color: var(--theme-primary-color, #6646ff);
    background: rgba(102, 70, 255, 0.05);
}

/* Images dans les cards modèles */
.slider-model-card img {
    max-width: 100%;
    height: auto;
    object-fit: contain;
}

/* Grid responsive pour les cards */
@media (max-width: 767px) {
    .slider-form-step .grid {
        grid-template-columns: 1fr !important;
        gap: 0.75rem !important;
    }
}

/* Navigation */
.slider-step-navigation {
    display: flex;
    justify-content: flex-end;
    gap: 1rem;
    margin-top: 2rem;
}

.slider-step-navigation button {
    padding: 0.75rem 1.5rem;
    border-radius: 0.5rem;
    font-weight: 500;
    transition: all 0.3s;
    cursor: pointer;
    border: none;
}

.slider-btn-back {
    background: white;
    border: 2px solid var(--theme-primary-color, #6646ff) !important;
    color: var(--theme-primary-color, #6646ff);
}

.slider-btn-back:hover {
    background: rgba(102, 70, 255, 0.05);
}

.slider-btn-next[disabled] {
    opacity: 0.5;
    cursor: not-allowed;
}

/* Amélioration des focus states pour l'accessibilité */
.slider-form-step input:focus,
.slider-form-step textarea:focus,
.slider-form-step select:focus {
    outline: 2px solid var(--theme-primary-color, #6646ff);
    outline-offset: 2px;
    border-color: var(--theme-primary-color, #6646ff);
}

.slider-model-card:focus-within,
.slider-dealership-card:focus-within {
    outline: 2px solid var(--theme-primary-color, #6646ff);
    outline-offset: 2px;
}

.slider-modal-close:focus {
    outline: 2px solid var(--theme-primary-color, #6646ff);
    outline-offset: 2px;
    border-radius: 0.25rem;
}

/* Message de succès */
.slider-success-message {
    text-align: center;
    padding: 2rem;
}

.slider-success-message.hidden {
    display: none;
}

/* Animations */
@keyframes fadeIn {
    from {
        opacity: 0;
    }
    to {
        opacity: 1;
    }
}

@keyframes slideUp {
    from {
        opacity: 0;
        transform: translateY(30px) scale(0.95);
    }
    to {
        opacity: 1;
        transform: translateY(0) scale(1);
    }
}

/* Transitions fluides (Preline gère le reste) */
#hs-slider-test-drive-modal .pointer-events-auto {
    transition: transform 0.3s cubic-bezier(0.16, 1, 0.3, 1),
                opacity 0.3s ease;
}

/* Responsive mobile - Optimisé */
@media (max-width: 767px) {
    #hs-slider-test-drive-modal .pointer-events-auto {
        /* La largeur est gérée par les classes Tailwind sm:max-w-xl */
        border-radius: 0.75rem !important;
    }

    #hs-slider-test-drive-modal .p-4 {
        padding: 1rem !important;
    }

    .slider-stepper {
        padding: 1rem !important;
    }

    .slider-stepper-inner {
        max-width: 100%;
    }

    .slider-step-label {
        font-size: 0.65rem !important;
        display: none;
    }

    .slider-step-circle {
        width: 32px !important;
        height: 32px !important;
        font-size: 0.875rem !important;
    }

    .slider-step-line {
        margin: 0 0.25rem !important;
    }

    .slider-modal-form {
        padding: 1rem !important;
    }

    .slider-form-step h3 {
        font-size: 1.125rem !important;
        margin-bottom: 1rem !important;
    }

    .slider-model-card,
    .slider-dealership-card {
        padding: 0.75rem !important;
    }

    .slider-model-card img {
        max-height: 100px !important;
    }

    .slider-step-navigation {
        flex-direction: column-reverse !important;
        margin-top: 1.5rem !important;
    }

    .slider-step-navigation button {
        width: 100% !important;
        padding: 0.875rem 1.5rem !important;
    }

    /* Formulaire responsive */
    .slider-form-step input,
    .slider-form-step textarea,
    .slider-form-step select {
        font-size: 16px !important; /* Évite le zoom sur iOS */
        padding: 0.75rem !important;
    }

    .slider-form-step label {
        font-size: 0.875rem !important;
    }

    .slider-success-message {
        padding: 1.5rem !important;
    }

    /* Espacement entre les champs */
    .slider-form-step .space-y-4 > * + * {
        margin-top: 0.75rem !important;
    }

    /* Checkbox sur mobile */
    .slider-form-step input[type="checkbox"] {
        width: 1.125rem !important;
        height: 1.125rem !important;
    }
}

/* Très petits écrans */
@media (max-width: 374px) {
    .slider-step-label {
        display: none !important;
    }

    .slider-step-circle {
        width: 28px !important;
        height: 28px !important;
        font-size: 0.75rem !important;
    }

    .slider-form-step h3 {
        font-size: 1rem !important;
    }

    .slider-model-card span,
    .slider-dealership-card span {
        font-size: 0.875rem !important;
    }
}

/* ================================
   FILTRAGE PAR CATÉGORIES
================================ */

.models-filter-container {
    margin-bottom: 2rem;
    width: 100%;
}

/* Style Boutons */
.models-filter-buttons {
    display: flex;
    flex-wrap: wrap;
    gap: 0.75rem;
    justify-content: center;
}

.filter-btn {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.75rem 1.5rem;
    background: white;
    border: 2px solid transparent;
    border-radius: 9999px;
    font-size: 0.875rem;
    font-weight: 600;
    color: #374151;
    cursor: pointer;
    transition: all 0.3s cubic-bezier(0.16, 1, 0.3, 1);
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
}

.filter-btn i {
    font-size: 1rem;
    font-style: normal !important; /* Supprime l'italique des icônes FontAwesome */
}

.filter-btn:hover,
.filter-btn:focus {
    transform: translateY(-2px);
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
    /* Empêcher la surcharge de couleur du thème GeneratePress */
    background-color: white !important;
    color: #374151 !important;
}

.filter-btn.active {
    background: linear-gradient(135deg, var(--theme-primary, #6646ff) 0%, var(--theme-primary-dark, #5535dd) 100%);
    color: white;
    border-color: var(--theme-primary, #6646ff);
    box-shadow: 0 4px 16px rgba(102, 70, 255, 0.3);
}

.filter-btn.active:hover,
.filter-btn.active:focus {
    /* Garder les couleurs du bouton actif au hover */
    background: linear-gradient(135deg, var(--theme-primary, #6646ff) 0%, var(--theme-primary-dark, #5535dd) 100%) !important;
    color: white !important;
}

.filter-btn:active {
    transform: translateY(0);
}

/* Style Onglets */
.models-filter-tabs {
    display: flex;
    flex-wrap: wrap;
    gap: 0;
    border-bottom: 2px solid #e5e7eb;
    margin-bottom: 1rem;
}

.filter-tab {
    padding: 1rem 2rem;
    font-size: 0.875rem;
    font-weight: 600;
    color: #6b7280;
    cursor: pointer;
    transition: all 0.3s ease;
    border-bottom: 3px solid transparent;
    position: relative;
    bottom: -2px;
}

.filter-tab:hover {
    color: #374151;
    background: #f9fafb;
}

.filter-tab.active {
    color: var(--theme-primary, #6646ff);
    border-bottom-color: var(--theme-primary, #6646ff) !important;
    background: white;
}

/* Style Menu déroulant - Modernisé */
.models-filter-dropdown {
    display: flex;
    align-items: center;
    gap: 1.5rem;
    justify-content: center;
    padding: 1rem;
    background: linear-gradient(135deg, #f9fafb 0%, #ffffff 100%);
    border-radius: 1rem;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.05);
}

/* Masquer le dropdown sur desktop si ce n'est pas le style sélectionné */
@media (min-width: 768px) {
    .models-filter-container[data-filter-style="buttons"] .models-filter-dropdown,
    .models-filter-container[data-filter-style="tabs"] .models-filter-dropdown {
        display: none !important;
    }
}

.models-filter-dropdown label {
    font-size: 1rem;
    font-weight: 700;
    color: #1f2937;
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

.models-filter-dropdown label::before {
    content: "\f0b0"; /* FontAwesome filter icon */
    font-family: "Font Awesome 6 Free";
    font-weight: 900;
    color: var(--theme-primary, #6646ff);
    font-size: 1.125rem;
}

/* Custom Select Moderne */
.custom-select-wrapper {
    position: relative;
    min-width: 300px;
}

.custom-select {
    position: relative;
}

.custom-select-trigger {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    padding: 1rem 1.5rem;
    background: white;
    border: 2px solid #e5e7eb;
    border-radius: 0.75rem;
    cursor: pointer;
    transition: all 0.3s cubic-bezier(0.16, 1, 0.3, 1);
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);
    user-select: none;
}

.custom-select-trigger:hover {
    border-color: var(--theme-primary, #6646ff);
    box-shadow: 0 4px 16px rgba(102, 70, 255, 0.15);
    transform: translateY(-1px);
    background-color: white !important;
}

.custom-select.open .custom-select-trigger {
    border-color: var(--theme-primary, #6646ff);
    box-shadow: 0 0 0 4px rgba(102, 70, 255, 0.1), 0 4px 16px rgba(102, 70, 255, 0.15);
    border-bottom-left-radius: 0;
    border-bottom-right-radius: 0;
}

.custom-select-icon {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 2.25rem;
    height: 2.25rem;
    background: linear-gradient(135deg, var(--theme-primary, #6646ff) 0%, var(--theme-primary-dark, #5535dd) 100%);
    border-radius: 0.5rem;
    color: white;
    font-size: 1rem;
    flex-shrink: 0;
}

.custom-select-icon i {
    font-style: normal !important;
}

.custom-select-text {
    flex: 1;
    font-size: 0.875rem;
    font-weight: 600;
    color: #1f2937;
}

.custom-select-arrow {
    display: flex;
    align-items: center;
    color: var(--theme-primary, #6646ff);
    font-size: 0.875rem;
    transition: transform 0.3s ease;
    flex-shrink: 0;
}

.custom-select-arrow i {
    font-style: normal !important;
}

.custom-select.open .custom-select-arrow {
    transform: rotate(180deg);
}

/* Dropdown Menu */
.custom-select-dropdown {
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    background: white;
    border: 2px solid var(--theme-primary, #6646ff);
    border-top: none;
    border-bottom-left-radius: 0.75rem;
    border-bottom-right-radius: 0.75rem;
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.12);
    max-height: 0;
    overflow: hidden;
    opacity: 0;
    transition: all 0.3s cubic-bezier(0.16, 1, 0.3, 1);
    z-index: 100;
}

.custom-select.open .custom-select-dropdown {
    max-height: 400px;
    opacity: 1;
    overflow-y: auto;
}

.custom-select-option {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    padding: 0.875rem 1.5rem;
    cursor: pointer;
    transition: all 0.2s ease;
    border-left: 3px solid transparent;
}

.custom-select-option i {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 2rem;
    height: 2rem;
    background: #f3f4f6;
    border-radius: 0.5rem;
    color: #6b7280;
    font-size: 0.875rem;
    flex-shrink: 0;
    transition: all 0.2s ease;
    font-style: normal !important;
}

.custom-select-option span {
    font-size: 0.875rem;
    font-weight: 500;
    color: #374151;
}

/* Compteur de modèles dans les options */
.custom-select-option span .model-count,
.custom-select-text .model-count {
    font-size: 0.75rem;
    font-weight: 400;
    color: #9ca3af;
    margin-left: 0.25rem;
}

.custom-select-option.active span .model-count {
    color: #a78bfa;
}

.custom-select-option:hover {
    background: linear-gradient(to right, rgba(102, 70, 255, 0.05) 0%, transparent 100%);
    border-left-color: var(--theme-primary, #6646ff);
}

.custom-select-option:hover i {
    background: linear-gradient(135deg, var(--theme-primary, #6646ff) 0%, var(--theme-primary-dark, #5535dd) 100%);
    color: white;
    transform: scale(1.1);
}

.custom-select-option.active {
    background: linear-gradient(to right, rgba(102, 70, 255, 0.08) 0%, rgba(102, 70, 255, 0.02) 100%);
    border-left-color: var(--theme-primary, #6646ff);
}

.custom-select-option.active i {
    background: linear-gradient(135deg, var(--theme-primary, #6646ff) 0%, var(--theme-primary-dark, #5535dd) 100%);
    color: white;
}

.custom-select-option.active span {
    color: var(--theme-primary, #6646ff);
    font-weight: 600;
}

/* Scrollbar personnalisée */
.custom-select-dropdown::-webkit-scrollbar {
    width: 6px;
}

.custom-select-dropdown::-webkit-scrollbar-track {
    background: #f3f4f6;
    border-bottom-right-radius: 0.75rem;
}

.custom-select-dropdown::-webkit-scrollbar-thumb {
    background: var(--theme-primary, #6646ff);
    border-radius: 3px;
}

.custom-select-dropdown::-webkit-scrollbar-thumb:hover {
    background: var(--theme-primary-dark, #5535dd);
}

/* Select natif caché (accessibilité) */
.filter-select-native {
    display: none !important;
}

/* ================================
   CUSTOM SELECT POUR LES CONCESSIONS (POPUP)
================================ */

/* Wrapper */
.custom-select-wrapper-dealership {
    position: relative;
    width: 100%;
}

.custom-select-dealership {
    position: relative;
}

/* Trigger */
.custom-select-trigger-dealership {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    padding: 0.75rem 1rem;
    background: white;
    border: 2px solid #e5e7eb;
    border-radius: 0.5rem;
    cursor: pointer;
    transition: all 0.3s cubic-bezier(0.16, 1, 0.3, 1);
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
    user-select: none;
}

.custom-select-trigger-dealership:hover {
    border-color: var(--theme-primary, #6646ff);
    box-shadow: 0 4px 16px rgba(102, 70, 255, 0.15);
    transform: translateY(-1px);
}

.custom-select-dealership.open .custom-select-trigger-dealership {
    border-color: var(--theme-primary, #6646ff);
    box-shadow: 0 0 0 4px rgba(102, 70, 255, 0.1), 0 4px 16px rgba(102, 70, 255, 0.15);
    border-bottom-left-radius: 0;
    border-bottom-right-radius: 0;
}

/* Icon */
.custom-select-icon-dealership {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 2.25rem;
    height: 2.25rem;
    background: linear-gradient(135deg, var(--theme-primary, #6646ff) 0%, var(--theme-primary-dark, #5535dd) 100%);
    border-radius: 0.5rem;
    color: white;
    font-size: 1rem;
    flex-shrink: 0;
}

.custom-select-icon-dealership i {
    font-style: normal !important;
}

/* Text */
.custom-select-text-dealership {
    flex: 1;
    font-size: 0.875rem;
    font-weight: 500;
    color: #374151;
}

.custom-select-dealership.open .custom-select-text-dealership,
.custom-select-dealership.selected .custom-select-text-dealership {
    font-weight: 600;
    color: #1f2937;
}

/* Arrow */
.custom-select-arrow-dealership {
    display: flex;
    align-items: center;
    color: var(--theme-primary, #6646ff);
    font-size: 0.875rem;
    transition: transform 0.3s ease;
    flex-shrink: 0;
}

.custom-select-arrow-dealership i {
    font-style: normal !important;
}

.custom-select-dealership.open .custom-select-arrow-dealership {
    transform: rotate(180deg);
}

/* Dropdown */
.custom-select-dropdown-dealership {
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    background: white;
    border: 2px solid var(--theme-primary, #6646ff);
    border-top: none;
    border-bottom-left-radius: 0.5rem;
    border-bottom-right-radius: 0.5rem;
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.12);
    max-height: 0;
    overflow: hidden;
    opacity: 0;
    transition: all 0.3s cubic-bezier(0.16, 1, 0.3, 1);
    z-index: 1000;
}

.custom-select-dealership.open .custom-select-dropdown-dealership {
    max-height: 300px;
    opacity: 1;
    overflow-y: auto;
}

/* Options */
.custom-select-option-dealership {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    padding: 0.75rem 1rem;
    cursor: pointer;
    transition: all 0.2s ease;
    border-left: 3px solid transparent;
}

.custom-select-option-dealership i {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 2rem;
    height: 2rem;
    background: #f3f4f6;
    border-radius: 0.5rem;
    color: #6b7280;
    font-size: 0.875rem;
    flex-shrink: 0;
    transition: all 0.2s ease;
    font-style: normal !important;
}

.custom-select-option-dealership span {
    font-size: 0.875rem;
    font-weight: 500;
    color: #374151;
}

.custom-select-option-dealership:hover {
    background: linear-gradient(to right, rgba(102, 70, 255, 0.05) 0%, transparent 100%);
    border-left-color: var(--theme-primary, #6646ff);
}

.custom-select-option-dealership:hover i {
    background: linear-gradient(135deg, var(--theme-primary, #6646ff) 0%, var(--theme-primary-dark, #5535dd) 100%);
    color: white;
    transform: scale(1.1);
}

.custom-select-option-dealership.active {
    background: linear-gradient(to right, rgba(102, 70, 255, 0.08) 0%, rgba(102, 70, 255, 0.02) 100%);
    border-left-color: var(--theme-primary, #6646ff);
}

.custom-select-option-dealership.active i {
    background: linear-gradient(135deg, var(--theme-primary, #6646ff) 0%, var(--theme-primary-dark, #5535dd) 100%);
    color: white;
}

.custom-select-option-dealership.active span {
    color: var(--theme-primary, #6646ff);
    font-weight: 600;
}

/* Scrollbar */
.custom-select-dropdown-dealership::-webkit-scrollbar {
    width: 6px;
}

.custom-select-dropdown-dealership::-webkit-scrollbar-track {
    background: #f3f4f6;
    border-bottom-right-radius: 0.5rem;
}

.custom-select-dropdown-dealership::-webkit-scrollbar-thumb {
    background: var(--theme-primary, #6646ff);
    border-radius: 3px;
}

.custom-select-dropdown-dealership::-webkit-scrollbar-thumb:hover {
    background: var(--theme-primary-dark, #5535dd);
}

/* Select natif caché */
.dealership-select-native {
    display: none !important;
}

/* Message "Aucun résultat" */
.no-results-message {
    display: none;
    text-align: center;
    padding: 3rem 2rem;
    color: #6b7280;
    font-size: 1rem;
}

.no-results-message i {
    font-size: 2rem;
    margin-bottom: 0.5rem;
    color: #9ca3af;
}

/* Animation de filtrage */
.model-slide.filtered-out {
    opacity: 0;
    transform: scale(0.95);
    pointer-events: none;
}

.model-slide.filtered-in {
    opacity: 1;
    transform: scale(1);
    animation: fadeInScale 0.4s cubic-bezier(0.16, 1, 0.3, 1);
}

@keyframes fadeInScale {
    from {
        opacity: 0;
        transform: scale(0.95) translateY(10px);
    }
    to {
        opacity: 1;
        transform: scale(1) translateY(0);
    }
}

/* Responsive */
@media (max-width: 767px) {
    .models-filter-buttons {
        flex-direction: column;
        align-items: stretch;
    }
    
    .filter-btn {
        justify-content: center;
        width: 100%;
    }
    
    .models-filter-tabs {
        overflow-x: auto;
        flex-wrap: nowrap;
        -webkit-overflow-scrolling: touch;
        scrollbar-width: none;
        -ms-overflow-style: none;
    }
    
    .models-filter-tabs::-webkit-scrollbar {
        display: none;
    }
    
    .filter-tab {
        flex-shrink: 0;
        padding: 0.75rem 1.5rem;
        white-space: nowrap;
    }
    
    .models-filter-dropdown {
        flex-direction: column;
        align-items: stretch;
        padding: 0.5rem 0.75rem; /* Réduit drastiquement */
        gap: 0.5rem;
        margin-bottom: 0.5rem; /* Espace réduit en dessous */
        border-radius: 0.5rem;
    }

    .models-filter-dropdown label {
        justify-content: center;
        font-size: 0.75rem; /* Plus petit */
        display: none; /* Masquer le label sur mobile pour gagner de l'espace */
    }

    /* Custom Select responsive - Ultra compact */
    .custom-select-wrapper {
        min-width: unset;
        width: 100%;
    }

    .custom-select-trigger {
        padding: 0.5rem 0.75rem; /* Très réduit */
        gap: 0.375rem;
        border-radius: 0.5rem;
    }

    .custom-select-icon {
        width: 1.5rem; /* Réduit */
        height: 1.5rem;
        font-size: 0.75rem;
    }

    .custom-select-text {
        font-size: 0.75rem; /* Plus petit */
    }

    .custom-select-arrow {
        font-size: 0.625rem; /* Plus petit */
    }

    .custom-select-option {
        padding: 0.5rem 0.75rem; /* Réduit */
        gap: 0.375rem;
    }

    .custom-select-option i {
        width: 1.5rem; /* Réduit */
        height: 1.5rem;
        font-size: 0.75rem;
    }

    .custom-select-option span {
        font-size: 0.75rem; /* Plus petit */
    }
}