/*
 Theme Name:   Benthami Auto - Hyundai Larache
 Theme URI:    https://www.facebook.com/Benthami.Auto/
 Description:  Thème enfant CarDealer personnalisé pour Benthami Auto, concessionnaire officiel Hyundai à Larache (Maroc).
 Author:       Benthami Auto
 Author URI:   https://www.facebook.com/Benthami.Auto/
 Template:     cardealer
 Version:      1.7.2
 License:      GNU General Public License v2 or later
 License URI:  http://www.gnu.org/licenses/gpl-2.0.html
 Tags:         one-column, two-columns, right-sidebar, custom-background, custom-colors, custom-header, custom-menu, editor-style, featured-images, flexible-header, post-formats, rtl-language-support, threaded-comments, translation-ready, e-commerce, blog, grid-layout
 Text Domain:  cardealer-child
*/

/* =========================================================================
   0. OVERRIDE AGRESSIF : Rouge CarDealer (#e74c3c) → Bleu Hyundai
   Le thème parent utilise #e74c3c partout. On le remplace globalement.
   ========================================================================= */

/* Backgrounds rouges → bleu Hyundai */
[style*="background-color: #e74c3c"],
[style*="background-color:#e74c3c"],
[style*="background: #e74c3c"],
[style*="background:#e74c3c"] {
    background-color: #002C5F !important;
    background: #002C5F !important;
}

/* Couleurs de texte rouges → bleu Hyundai */
[style*="color: #e74c3c"],
[style*="color:#e74c3c"] {
    color: #002C5F !important;
}

/* Classes spécifiques CarDealer */
.btn-primary,
.btn-default,
.btn-success,
.btn-info,
.btn-warning,
.btn-danger,
button.btn,
.button,
input[type="submit"],
input[type="button"],
.search-btn,
.search_inv_btn,
.inv-search-btn,
.cd-btn,
.theme-btn,
.cd_button,
.elementor-button,
.wpb_button,
.vc_btn3 {
    background-color: #002C5F !important;
    border-color: #002C5F !important;
    color: #FFFFFF !important;
}

.btn-primary:hover,
.btn-default:hover,
button.btn:hover,
.button:hover,
input[type="submit"]:hover,
input[type="button"]:hover,
.search-btn:hover,
.search_inv_btn:hover,
.inv-search-btn:hover,
.cd-btn:hover,
.theme-btn:hover,
.cd_button:hover,
.elementor-button:hover,
.wpb_button:hover,
.vc_btn3:hover {
    background-color: #00AAD2 !important;
    border-color: #00AAD2 !important;
    color: #FFFFFF !important;
}

/* Header blanc, menu en bleu Hyundai (#002C5F), accent cyan au survol */
.header-light,
.header-dark,
.site-header,
.main-header,
header.header,
header#header,
.header_in,
.header-style-1,
.header-style-2,
.header-style-3,
.header-style-4,
.header-style-5,
.header-style-6 {
    background-color: #FFFFFF !important;
    border-bottom: 1px solid #E5E5E5 !important;
}

.header-dark .menu > li > a,
.site-header .menu > li > a,
.main-header .menu > li > a,
header .menu > li > a,
.navigation-menu .menu > li > a {
    color: #002C5F !important;
    font-weight: 600;
}

.navigation-menu .menu > li > a:hover,
.navigation-menu .menu > li.current-menu-item > a,
.navigation-menu .menu > li.current-menu-ancestor > a {
    color: #00AAD2 !important;
}

/* ----------------------------------------------------------------------
   STICKY HEADER : maintien du logo + menu visibles au scroll
   (le thème parent ne définit pas position:fixed pour le layout default-new ;
    on comble ce trou ici)
   ---------------------------------------------------------------------- */
#menu-1.desktopTopFixed,
nav#menu-1.desktopTopFixed,
nav.header-navbar-v2.desktopTopFixed,
header .header-navbar-v2.desktopTopFixed,
.header-navbar-v2.desktopTopFixed {
    position: fixed !important;
    top: 0 !important;
    left: 0 !important;
    right: 0 !important;
    width: 100% !important;
    background: #FFFFFF !important;
    box-shadow: 0 4px 18px rgba(0, 44, 95, 0.10) !important;
    z-index: 9990 !important;
    display: block !important;
    visibility: visible !important;
    opacity: 1 !important;
    animation: benthami-slide-down 0.35s cubic-bezier(0.4, 0, 0.2, 1);
}

/* Décalage WP admin bar (32px sur desktop, 46px sur mobile) */
body.admin-bar #menu-1.desktopTopFixed,
body.admin-bar nav.header-navbar-v2.desktopTopFixed {
    top: 32px !important;
}

@media screen and (max-width: 782px) {
    body.admin-bar #menu-1.desktopTopFixed,
    body.admin-bar nav.header-navbar-v2.desktopTopFixed {
        top: 46px !important;
    }
}

@keyframes benthami-slide-down {
    from { transform: translateY(-100%); opacity: 0.7; }
    to   { transform: translateY(0);     opacity: 1; }
}

/* Si la topbar est aussi en sticky, on décale le menu en dessous */
.topbar.topbar_fixed ~ * #menu-1.desktopTopFixed {
    top: 44px !important;
}

body.admin-bar .topbar.topbar_fixed ~ * #menu-1.desktopTopFixed {
    top: 76px !important;
}

/* Logo : on force l'affichage du logo principal en mode sticky
   (car le thème parent masque .site-logo et tente d'afficher .sticky-logo,
    mais l'utilisateur n'a renseigné qu'un seul slot — le principal) */
.desktopTopFixed .menu-logo .site-logo,
.mobileTopFixed  .menu-logo .site-logo,
.desktopTopFixed .header-logo .site-logo,
.mobileTopFixed  .header-logo .site-logo,
header.desktopTopFixed .site-logo,
header.mobileTopFixed  .site-logo {
    display: block !important;
}

/* Si la sticky-logo n'a pas de src valide, on la masque pour ne pas avoir
   de carré cassé / icône manquante */
.desktopTopFixed .menu-logo .sticky-logo:not([src]),
.mobileTopFixed  .menu-logo .sticky-logo:not([src]),
.desktopTopFixed .menu-logo .sticky-logo[src=""],
.mobileTopFixed  .menu-logo .sticky-logo[src=""] {
    display: none !important;
}

/* Mode HEADER STICKY / SCROLLED : header opaque (blanc) → menu BLEU Hyundai
   (les sélecteurs ciblent le nav#menu-1 qui reçoit les classes du JS) */
#menu-1.desktopTopFixed .header-menu .menu-links > li > a,
#menu-1.mobileTopFixed  .header-menu .menu-links > li > a,
header.desktopTopFixed .header-navbar-v2 .header-menu .menu-links > li > a,
header .desktopTopFixed .header-menu .menu-links > li > a,
header.mobileTopFixed  .header-navbar-v2-mobile .header-menu .menu-links > li > a,
header.is-sticky .header-menu .menu-links > li > a,
header.sticky-header .header-menu .menu-links > li > a {
    color: #002C5F !important;
    font-weight: 600;
    text-shadow: none !important;
}

#menu-1.desktopTopFixed .header-menu .menu-links > li > a:hover,
#menu-1.desktopTopFixed .header-menu .menu-links > li.current-menu-item > a,
header.desktopTopFixed .header-menu .menu-links > li > a:hover,
header.desktopTopFixed .header-menu .menu-links > li.current-menu-item > a,
header.is-sticky .header-menu .menu-links > li > a:hover,
header.is-sticky .header-menu .menu-links > li.current-menu-item > a {
    color: #00AAD2 !important;
}

#menu-1.desktopTopFixed .header-actions a,
#menu-1.desktopTopFixed .header-actions i,
#menu-1.desktopTopFixed .searchform .search-open-btn,
header.desktopTopFixed .header-actions a,
header.desktopTopFixed .header-actions i,
header.is-sticky .header-actions a,
header.is-sticky .header-actions i {
    color: #002C5F !important;
    text-shadow: none !important;
}
header.desktopTopFixed .header-navbar-v2 .header-menu .menu-links > li > a,
header .desktopTopFixed .header-menu .menu-links > li > a,
header.mobileTopFixed .header-navbar-v2-mobile .header-menu .menu-links > li > a,
header.is-sticky .header-menu .menu-links > li > a,
header.sticky-header .header-menu .menu-links > li > a {
    color: #002C5F !important;
    font-weight: 600;
}

header.desktopTopFixed .header-menu .menu-links > li > a:hover,
header.desktopTopFixed .header-menu .menu-links > li.current-menu-item > a,
header.is-sticky .header-menu .menu-links > li > a:hover,
header.is-sticky .header-menu .menu-links > li.current-menu-item > a {
    color: #00AAD2 !important;
}

header.desktopTopFixed .header-actions a,
header.desktopTopFixed .header-actions i,
header.is-sticky .header-actions a,
header.is-sticky .header-actions i {
    color: #002C5F !important;
}

/* ----------------------------------------------------------------------
   Mode HEADER TRANSPARENT (au-dessus du slider/hero) : menu BLANC
   pour rester lisible sur n'importe quelle photo de slide (claire ou foncée)
   + ombre portée subtile pour garantir la lisibilité même sur fond gris clair
   ---------------------------------------------------------------------- */
header.header-above-content-enabled .header-navbar-v2:not(.desktopTopFixed) .header-menu .menu-links > li > a,
header.header-above-content-enabled .header-navbar-v2:not(.desktopTopFixed) .header-menu .menu-links > li:not(.current-menu-item) > a,
.transparent .mega-menu .menu-links > li > a,
.transparent .mega-menu .menu-links > li > a:link,
.transparent .mega-menu .menu-links > li > a:visited {
    color: #FFFFFF !important;
    font-weight: 600;
    text-shadow: 0 1px 4px rgba(0, 0, 0, 0.45);
}

header.header-above-content-enabled .header-navbar-v2:not(.desktopTopFixed) .header-menu .menu-links > li > a:hover,
header.header-above-content-enabled .header-navbar-v2:not(.desktopTopFixed) .header-menu .menu-links > li.current-menu-item > a,
.transparent .mega-menu .menu-links > li > a:hover,
.transparent .mega-menu .menu-links > li.current-menu-item > a {
    color: #00AAD2 !important;
    text-shadow: 0 1px 4px rgba(0, 0, 0, 0.55);
}

/* Icônes header (panier, recherche...) en BLANC quand transparent */
header.header-above-content-enabled .header-navbar-v2:not(.desktopTopFixed) .header-actions a,
header.header-above-content-enabled .header-navbar-v2:not(.desktopTopFixed) .header-actions i,
header.header-above-content-enabled .header-navbar-v2:not(.desktopTopFixed) .header-actions .searchform .search-open-btn,
.transparent .header-actions a,
.transparent .header-actions i {
    color: #FFFFFF !important;
    text-shadow: 0 1px 3px rgba(0, 0, 0, 0.4);
}

/* Sous-menus dropdown : toujours fond blanc + texte bleu (peu importe le mode) */
header .mega-menu .menu-links .sub-menu,
.transparent .mega-menu .menu-links .sub-menu {
    background-color: #FFFFFF !important;
    box-shadow: 0 6px 24px rgba(0, 44, 95, 0.15) !important;
}

header .mega-menu .menu-links .sub-menu li a,
.transparent .mega-menu .menu-links .sub-menu li a {
    color: #002C5F !important;
    text-shadow: none !important;
}

header .mega-menu .menu-links .sub-menu li a:hover,
header .mega-menu .menu-links .sub-menu li.current-menu-item a {
    color: #00AAD2 !important;
}

/* Sous-menus : fond blanc, texte bleu Hyundai */
header .menu ul.sub-menu,
.navigation-menu .menu ul.sub-menu,
.main-header .menu ul.sub-menu {
    background-color: #FFFFFF !important;
    border: 1px solid #E5E5E5 !important;
    box-shadow: 0 6px 20px rgba(0, 44, 95, 0.08);
}

header .menu ul.sub-menu > li > a,
.navigation-menu .menu ul.sub-menu > li > a,
.main-header .menu ul.sub-menu > li > a {
    color: #002C5F !important;
}

header .menu ul.sub-menu > li > a:hover,
.navigation-menu .menu ul.sub-menu > li > a:hover,
.navigation-menu .menu ul.sub-menu > li.current-menu-item > a {
    color: #00AAD2 !important;
    background-color: rgba(0, 44, 95, 0.04) !important;
}

/* Icône burger / menu mobile en bleu Hyundai */
.navbar-toggler,
.menu-toggle,
.mobile-menu-trigger,
header .navbar-toggler-icon {
    color: #002C5F !important;
    border-color: rgba(0, 44, 95, 0.3) !important;
}

/* Topbar : bleu Hyundai au lieu de noir/rouge */
.topbar,
.top-bar,
.header-topbar {
    background-color: #002C5F !important;
    color: #FFFFFF !important;
}

.topbar a,
.top-bar a,
.header-topbar a {
    color: #FFFFFF !important;
}

/* Bannière rouge à gauche du hero (élément décoratif CarDealer) */
.banner-section,
.banner-style-1,
.cd-hero-banner,
.banner_section,
.intro-content,
.intro-section [class*="bg-"],
.cd_hero {
    background-color: #002C5F !important;
}

/* Badges prix sur les cartes véhicules (rouge → bleu Hyundai) */
.price-tag,
.price_tag,
.car-price,
.product-price,
.price-badge,
.special-price,
.cd-price,
.cd_price,
.featured-tag,
.featured-badge,
.label-special,
.hot-deal,
.sale-tag {
    background-color: #002C5F !important;
    color: #FFFFFF !important;
}

/* Icônes des services (couleur rouge → bleu Hyundai) */
.service-icon,
.icon-box,
.feature-icon,
.cd-icon,
.cd-service-icon {
    color: #002C5F !important;
}

.service-icon i,
.icon-box i,
.feature-icon i,
.cd-icon i,
.cd-service-icon i,
.fa,
.fas,
.fab,
.far,
.fal {
    color: inherit;
}

/* Liens "Read more" et flèches (rouge → bleu) */
.read-more,
.readmore,
.more-link,
a.read-more,
.btn-link,
.cd-link {
    color: #002C5F !important;
}

.read-more:hover,
.readmore:hover,
.more-link:hover {
    color: #00AAD2 !important;
}

/* Bordures et soulignements rouges */
.section-title::after,
.heading-divider,
.title-divider,
.section-heading::after,
.cd-divider {
    background-color: #00AAD2 !important;
    border-color: #00AAD2 !important;
}

/* Ranges sliders (CarDealer search filters) */
.ui-slider-range,
.noUi-connect {
    background-color: #002C5F !important;
}

.ui-slider-handle,
.noUi-handle {
    border-color: #002C5F !important;
}

/* Strikethrough prix barré (rouge ligne) */
.original-price,
.regular-price del,
del .amount {
    color: #999 !important;
}

/* WooCommerce : couleur primaire rouge → bleu */
.woocommerce span.onsale,
.woocommerce-page span.onsale,
.woocommerce .onsale {
    background-color: #00AAD2 !important;
    color: #FFFFFF !important;
}

.woocommerce #respond input#submit,
.woocommerce a.button,
.woocommerce button.button,
.woocommerce input.button {
    background-color: #002C5F !important;
    color: #FFFFFF !important;
}

.woocommerce #respond input#submit:hover,
.woocommerce a.button:hover,
.woocommerce button.button:hover,
.woocommerce input.button:hover {
    background-color: #00AAD2 !important;
    color: #FFFFFF !important;
}

/* =========================================================================
   1. Charte Hyundai - Variables CSS
   ========================================================================= */
:root {
    --hyundai-blue:        #002C5F;   /* Couleur principale Hyundai */
    --hyundai-blue-dark:   #001E40;
    --hyundai-blue-light:  #003D7F;
    --hyundai-active:      #00AAD2;   /* Active Blue (accent) */
    --hyundai-active-dark: #008BAA;
    --hyundai-silver:      #B4B4B4;
    --hyundai-white:       #FFFFFF;
    --hyundai-black:       #1A1A1A;
    --hyundai-gray-bg:     #F6F3F2;
    --hyundai-text:        #2B2B2B;
    --hyundai-muted:       #6B6B6B;

    --benthami-shadow: 0 4px 20px rgba(0, 44, 95, 0.08);
    --benthami-radius: 8px;
    --benthami-transition: 250ms cubic-bezier(0.4, 0, 0.2, 1);
}

/* =========================================================================
   2. Typographie - Inter (fallback de Hyundai Sans)
   ========================================================================= */
body,
p,
.menu li a,
.btn,
input,
textarea,
select,
button {
    font-family: 'Inter', 'Montserrat', -apple-system, BlinkMacSystemFont, 'Segoe UI', Arial, sans-serif !important;
    color: var(--hyundai-text);
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

h1, h2, h3, h4, h5, h6,
.h1, .h2, .h3, .h4, .h5, .h6 {
    font-family: 'Inter', 'Montserrat', -apple-system, BlinkMacSystemFont, sans-serif !important;
    font-weight: 700;
    letter-spacing: -0.01em;
    color: var(--hyundai-blue);
}

h1, .h1 { font-weight: 800; letter-spacing: -0.02em; }

/* =========================================================================
   3. Liens et boutons
   ========================================================================= */
a {
    color: var(--hyundai-blue);
    transition: color var(--benthami-transition);
}

a:hover,
a:focus {
    color: var(--hyundai-active);
    text-decoration: none;
}

.btn,
.button,
input[type="submit"],
button[type="submit"] {
    border-radius: var(--benthami-radius);
    font-weight: 600;
    letter-spacing: 0.02em;
    transition: all var(--benthami-transition);
    border: none;
    padding: 12px 28px;
}

.btn-primary,
.btn-default,
input[type="submit"],
button[type="submit"] {
    background-color: var(--hyundai-blue) !important;
    color: var(--hyundai-white) !important;
    border: 2px solid var(--hyundai-blue) !important;
}

.btn-primary:hover,
.btn-default:hover,
input[type="submit"]:hover,
button[type="submit"]:hover {
    background-color: var(--hyundai-active) !important;
    border-color: var(--hyundai-active) !important;
    transform: translateY(-2px);
    box-shadow: 0 6px 16px rgba(0, 170, 210, 0.25);
}

.btn-secondary {
    background-color: transparent !important;
    color: var(--hyundai-blue) !important;
    border: 2px solid var(--hyundai-blue) !important;
}

.btn-secondary:hover {
    background-color: var(--hyundai-blue) !important;
    color: var(--hyundai-white) !important;
}

/* =========================================================================
   4. Header / Topbar / Menu
   ========================================================================= */
.topbar {
    background-color: var(--hyundai-blue) !important;
    color: var(--hyundai-white);
    border-bottom: 1px solid var(--hyundai-blue-light);
}

.topbar a,
.topbar .topbar-left a,
.topbar .topbar-right a {
    color: var(--hyundai-white) !important;
}

.topbar a:hover {
    color: var(--hyundai-active) !important;
}

.header-style-1 .navigation-menu .menu > li > a,
.menu-wrapper .menu > li > a {
    font-weight: 600;
    text-transform: uppercase;
    font-size: 13px;
    letter-spacing: 0.05em;
    color: var(--hyundai-blue) !important;
}

.menu-wrapper .menu > li.current-menu-item > a,
.menu-wrapper .menu > li > a:hover {
    color: var(--hyundai-active) !important;
}

/* =========================================================================
   5. Footer — texte lisible sur photo agence + overlay bleu Hyundai 30%
   ========================================================================= */
.footer {
    color: rgba(255, 255, 255, 0.92) !important;
    text-shadow: 0 1px 2px rgba(0, 30, 64, 0.5);
}

/* Titres widgets en blanc pur + underline cyan */
.footer h1, .footer h2, .footer h3, .footer h4, .footer h5, .footer h6 {
    color: #FFFFFF !important;
    text-shadow: 0 1px 3px rgba(0, 30, 64, 0.6);
    font-weight: 700 !important;
}

/* Souligné décoratif des titres en cyan Hyundai */
.footer h6:before,
.footer .widget-title:before {
    background: var(--hyundai-active) !important;
}

/* Texte général + paragraphes : blanc cassé lisible */
.footer p,
.footer .widget,
.footer .address ul li,
.footer .address ul li span,
.footer .usefull-link ul li a,
.footer .widget ul li,
.footer .widget ul li a,
.footer .recent-posts-widget li,
.footer .recent-posts-widget li a,
.footer .widget_recent_entries ul li a,
.footer .post-title,
.footer .post-date,
.footer .entry-date {
    color: rgba(255, 255, 255, 0.92) !important;
}

/* Date des articles : un peu plus discrète mais lisible */
.footer .post-date,
.footer .entry-date,
.footer .recent-posts-date,
.footer time {
    color: rgba(255, 255, 255, 0.75) !important;
    font-size: 13px;
}

/* Liens : hover cyan Hyundai */
.footer a {
    color: rgba(255, 255, 255, 0.95) !important;
    transition: color 0.25s ease;
}

.footer a:hover {
    color: var(--hyundai-active) !important;
}

/* Icônes adresse (map-marker, phone, envelope) en cyan */
.footer .address ul li i,
.footer i.fa,
.footer i[class*="fa-"] {
    color: var(--hyundai-active) !important;
}

/* Vignettes des articles Recent Posts : leur donner une bordure subtile */
.footer .recent-posts-widget img,
.footer .widget_recent_entries img,
.footer .post-thumb img {
    border-radius: 6px;
    box-shadow: 0 2px 8px rgba(0, 30, 64, 0.4);
}

.copyright,
.footer-bottom {
    background-color: var(--hyundai-blue-dark) !important;
    color: rgba(255, 255, 255, 0.7);
    border-top: 1px solid rgba(255, 255, 255, 0.08);
}

/* =========================================================================
   6. Cartes véhicules (inventory cards)
   ========================================================================= */
.vehicle,
.product-listing-m,
.car-grid-item {
    border-radius: var(--benthami-radius);
    overflow: hidden;
    box-shadow: var(--benthami-shadow);
    transition: transform var(--benthami-transition), box-shadow var(--benthami-transition);
    background-color: var(--hyundai-white);
}

.vehicle:hover,
.product-listing-m:hover,
.car-grid-item:hover {
    transform: translateY(-4px);
    box-shadow: 0 12px 32px rgba(0, 44, 95, 0.15);
}

.vehicle .price,
.car-grid-item .price {
    color: var(--hyundai-blue) !important;
    font-weight: 700;
}

/* =========================================================================
   7. Bouton WhatsApp flottant — déprécié, remplacé par mu-plugin benthami-site-chat.php
   ========================================================================= */
/* (styles .benthami-whatsapp-float retirés le 2026-05-15 ; le popup chat est plus complet) */

/* =========================================================================
   8. Badge "Concessionnaire Officiel Hyundai"
   ========================================================================= */
.benthami-badge-officiel {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 6px 14px;
    background-color: var(--hyundai-blue);
    color: var(--hyundai-white);
    border-radius: 999px;
    font-size: 12px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.05em;
}

.benthami-badge-officiel::before {
    content: "✓";
    background-color: var(--hyundai-active);
    width: 18px;
    height: 18px;
    border-radius: 50%;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 11px;
}

/* =========================================================================
   9. Page d'accueil Benthami - Sections custom
   ========================================================================= */

/* Hero */
.benthami-hero {
    position: relative;
    overflow: hidden;
}

.benthami-hero::before {
    content: "";
    position: absolute;
    top: -50%;
    right: -10%;
    width: 600px;
    height: 600px;
    background: radial-gradient(circle, rgba(0, 170, 210, 0.15) 0%, transparent 70%);
    border-radius: 50%;
    pointer-events: none;
}

.benthami-hero h1,
.benthami-hero .vc_custom_heading {
    color: #FFFFFF !important;
}

.benthami-hero .vc_btn3.vc_btn3-color-white {
    background-color: #FFFFFF !important;
    color: var(--hyundai-blue) !important;
    border: 2px solid #FFFFFF !important;
    font-weight: 700 !important;
    padding: 14px 32px !important;
    border-radius: var(--benthami-radius) !important;
    margin-right: 12px;
}

.benthami-hero .vc_btn3.vc_btn3-color-white:hover {
    background-color: var(--hyundai-active) !important;
    color: #FFFFFF !important;
    border-color: var(--hyundai-active) !important;
    transform: translateY(-2px);
    box-shadow: 0 6px 20px rgba(0, 170, 210, 0.35);
}

/* Cartes services */
.vc_row [style*="border-radius:8px"][style*="box-shadow"] {
    transition: transform var(--benthami-transition), box-shadow var(--benthami-transition);
}

.vc_row [style*="border-radius:8px"][style*="box-shadow"]:hover {
    transform: translateY(-6px);
    box-shadow: 0 12px 32px rgba(0, 44, 95, 0.15) !important;
}

/* Stats / chiffres clés */
[style*="font-size:42px"][style*="color:#002C5F"] {
    background: linear-gradient(135deg, #002C5F 0%, #00AAD2 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}

/* Section RDV - boutons jaunes (warning) en or Hyundai */
.vc_btn3.vc_btn3-color-warning {
    background-color: #D4AF37 !important;
    color: var(--hyundai-blue) !important;
    border: 2px solid #D4AF37 !important;
    font-weight: 700 !important;
    padding: 14px 32px !important;
}

.vc_btn3.vc_btn3-color-warning:hover {
    background-color: var(--hyundai-active) !important;
    color: #FFFFFF !important;
    border-color: var(--hyundai-active) !important;
}

/* Section contact - liens sociaux */
a[href*="wa.me"],
a[href*="facebook.com"],
a[href*="instagram.com"] {
    transition: transform var(--benthami-transition), box-shadow var(--benthami-transition);
}

a[href*="wa.me"]:hover,
a[href*="facebook.com"]:hover,
a[href*="instagram.com"]:hover {
    transform: translateY(-2px);
    box-shadow: 0 6px 16px rgba(0, 0, 0, 0.15);
}

/* Responsive Hero */
@media (max-width: 991px) {
    .benthami-hero {
        text-align: center;
    }
    .benthami-hero .vc_col-sm-6 {
        width: 100% !important;
        margin-bottom: 32px;
    }
    .benthami-hero h1 {
        font-size: 32px !important;
    }
}

@media (max-width: 768px) {
    .benthami-hero h1 {
        font-size: 28px !important;
    }
    .benthami-hero .vc_btn3 {
        display: block !important;
        margin: 8px auto !important;
        width: fit-content;
    }
    [style*="font-size:42px"] {
        font-size: 32px !important;
    }
}

/* =========================================================================
   9. Smart Slider 3 - Charte Hyundai
   ========================================================================= */

/* Boutons (CTA dans les slides) */
.n2-ss-button-container button,
.n2-ss-button-container a,
.n2-ss-section-main-content .n2-style-button {
    background-color: #002C5F !important;
    color: #FFFFFF !important;
    border-color: #002C5F !important;
    border-radius: 8px !important;
    font-family: 'Inter', 'Montserrat', sans-serif !important;
    font-weight: 600 !important;
    transition: all 250ms cubic-bezier(0.4, 0, 0.2, 1) !important;
}

.n2-ss-button-container button:hover,
.n2-ss-button-container a:hover,
.n2-ss-section-main-content .n2-style-button:hover {
    background-color: #00AAD2 !important;
    border-color: #00AAD2 !important;
    transform: translateY(-2px);
    box-shadow: 0 8px 24px rgba(0, 170, 210, 0.4) !important;
}

/* Bullets (points de navigation) */
.n2-ss-control-bullet .n2-bullet,
.n2-bullet {
    background-color: rgba(255, 255, 255, 0.5) !important;
    transition: all 250ms ease !important;
}

.n2-ss-control-bullet .n2-bullet.n2-active,
.n2-bullet.n2-active {
    background-color: #00AAD2 !important;
    transform: scale(1.3);
}

/* Flèches navigation */
.n2-ss-widget-display-desktop .nextend-arrow,
.nextend-arrow {
    background-color: rgba(0, 44, 95, 0.85) !important;
    border-radius: 8px !important;
    transition: all 250ms ease !important;
}

.n2-ss-widget-display-desktop .nextend-arrow:hover,
.nextend-arrow:hover {
    background-color: #00AAD2 !important;
    transform: scale(1.05);
}

/* Barre de progression auto-play */
.n2-ss-control-bar-bar,
.n2-ss-bar-fill {
    background-color: #00AAD2 !important;
}

/* Titres dans les slides Smart Slider */
.n2-ss-section-main-content h1,
.n2-ss-section-main-content h2,
.n2-ss-section-main-content h3,
.n2-ss-layer h1,
.n2-ss-layer h2,
.n2-ss-layer h3 {
    font-family: 'Inter', 'Montserrat', sans-serif !important;
    font-weight: 800 !important;
    letter-spacing: -0.02em;
}

/* Animation d'entrée du slider entier */
.n2-ss-slider {
    animation: benthami-fade-in 0.8s ease both;
}

/* =========================================================================
   9bis. Hero Benthami custom (désactivé - utilisation de Smart Slider)
   Conservé pour réactivation possible. Voir functions.php.
   ========================================================================= */
.benthami-custom-hero {
    position: relative;
    min-height: 600px;
    padding: 100px 0;
    background: linear-gradient(135deg, #002C5F 0%, #003D7F 50%, #001E40 100%);
    color: #FFFFFF;
    overflow: hidden;
    display: flex;
    align-items: center;
}

.benthami-hero-bg {
    position: absolute;
    inset: 0;
    background-image:
        radial-gradient(ellipse at 20% 30%, rgba(0, 170, 210, 0.18) 0%, transparent 50%),
        radial-gradient(ellipse at 80% 70%, rgba(0, 44, 95, 0.5) 0%, transparent 60%);
    pointer-events: none;
}

.benthami-hero-shape {
    position: absolute;
    border-radius: 50%;
    pointer-events: none;
    filter: blur(60px);
}

.benthami-hero-shape-1 {
    top: -200px;
    right: -150px;
    width: 500px;
    height: 500px;
    background: radial-gradient(circle, rgba(0, 170, 210, 0.4) 0%, transparent 70%);
    animation: benthami-pulse 7s ease-in-out infinite;
}

.benthami-hero-shape-2 {
    bottom: -200px;
    left: -150px;
    width: 400px;
    height: 400px;
    background: radial-gradient(circle, rgba(0, 44, 95, 0.6) 0%, transparent 70%);
    animation: benthami-pulse 9s ease-in-out infinite reverse;
}

.benthami-hero-container {
    position: relative;
    z-index: 2;
    max-width: 1280px;
    margin: 0 auto;
    padding: 0 24px;
    display: grid;
    grid-template-columns: 1.2fr 1fr;
    gap: 60px;
    align-items: center;
}

.benthami-hero-left { animation: benthami-fade-up 0.9s cubic-bezier(0.4, 0, 0.2, 1) 0.2s both; }
.benthami-hero-right { animation: benthami-zoom-in 1s cubic-bezier(0.4, 0, 0.2, 1) 0.5s both; }

.benthami-hero-badge {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 8px 16px;
    background: rgba(0, 170, 210, 0.15);
    border: 1px solid rgba(0, 170, 210, 0.4);
    border-radius: 999px;
    color: #00AAD2;
    font-size: 13px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    margin-bottom: 20px;
    animation: benthami-fade-down 0.7s ease both;
}

.benthami-hero-title {
    font-family: 'Inter', 'Montserrat', sans-serif !important;
    font-weight: 800 !important;
    letter-spacing: -0.03em;
    line-height: 1.05;
    margin: 0 0 24px;
    color: #FFFFFF !important;
    text-shadow: 0 4px 20px rgba(0, 0, 0, 0.2);
}

.benthami-hero-line-1 {
    display: block;
    font-size: 22px;
    font-weight: 500;
    color: rgba(255, 255, 255, 0.85);
    letter-spacing: 0.05em;
    margin-bottom: 8px;
    text-transform: uppercase;
}

.benthami-hero-line-2 {
    display: block;
    font-size: 64px;
    font-weight: 900;
}

.benthami-hero-line-2 em {
    font-style: normal;
    background: linear-gradient(135deg, #00AAD2 0%, #4FC8E5 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}

.benthami-hero-subtitle {
    font-size: 18px;
    line-height: 1.6;
    color: rgba(255, 255, 255, 0.85) !important;
    margin: 0 0 32px;
    max-width: 560px;
}

.benthami-hero-actions {
    display: flex;
    gap: 16px;
    flex-wrap: wrap;
}

.benthami-hero-btn {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 16px 32px;
    border-radius: 8px;
    font-weight: 700;
    font-size: 16px;
    text-decoration: none !important;
    transition: all 250ms cubic-bezier(0.4, 0, 0.2, 1);
    border: 2px solid transparent;
    cursor: pointer;
}

.benthami-hero-btn-primary {
    background: #FFFFFF;
    color: #002C5F !important;
    border-color: #FFFFFF;
}

.benthami-hero-btn-primary:hover {
    background: #00AAD2;
    color: #FFFFFF !important;
    border-color: #00AAD2;
    transform: translateY(-3px);
    box-shadow: 0 12px 28px rgba(0, 170, 210, 0.4);
}

.benthami-hero-btn-outline {
    background: transparent;
    color: #FFFFFF !important;
    border-color: rgba(255, 255, 255, 0.4);
}

.benthami-hero-btn-outline:hover {
    background: rgba(255, 255, 255, 0.1);
    border-color: #FFFFFF;
    transform: translateY(-3px);
}

.benthami-hero-card {
    position: relative;
    background: rgba(255, 255, 255, 0.05);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    border: 1px solid rgba(255, 255, 255, 0.15);
    border-radius: 24px;
    padding: 48px 32px;
    text-align: center;
    box-shadow: 0 20px 60px rgba(0, 0, 0, 0.3);
}

.benthami-hero-icon {
    width: 100px;
    height: 100px;
    border-radius: 20px;
    margin: 0 auto 24px;
    display: block;
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.3);
    animation: benthami-pulse-soft 3s ease-in-out infinite;
}

@keyframes benthami-pulse-soft {
    0%, 100% { transform: scale(1); }
    50%      { transform: scale(1.05); }
}

.benthami-hero-wordmark {
    max-width: 220px;
    height: auto;
    margin: 0 auto 32px;
    display: block;
    filter: brightness(0) invert(1);
}

.benthami-hero-stats {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 16px;
    padding-top: 24px;
    border-top: 1px solid rgba(255, 255, 255, 0.15);
}

.benthami-stat strong {
    display: block;
    font-size: 32px;
    font-weight: 800;
    color: #00AAD2;
    line-height: 1;
    margin-bottom: 4px;
}

.benthami-stat span {
    font-size: 12px;
    color: rgba(255, 255, 255, 0.7);
    text-transform: uppercase;
    letter-spacing: 0.1em;
}

/* Responsive Hero Benthami */
@media (max-width: 991px) {
    .benthami-hero-container {
        grid-template-columns: 1fr;
        gap: 40px;
        text-align: center;
    }
    .benthami-hero-line-2 {
        font-size: 48px;
    }
    .benthami-hero-actions {
        justify-content: center;
    }
    .benthami-hero-subtitle {
        margin-left: auto;
        margin-right: auto;
    }
}

@media (max-width: 600px) {
    .benthami-custom-hero {
        min-height: auto;
        padding: 60px 0;
    }
    .benthami-hero-line-1 { font-size: 16px; }
    .benthami-hero-line-2 { font-size: 36px; }
    .benthami-hero-subtitle { font-size: 16px; }
    .benthami-hero-btn { padding: 12px 20px; font-size: 14px; }
    .benthami-hero-stats { grid-template-columns: 1fr; gap: 12px; }
    .benthami-hero-card { padding: 32px 20px; }
}

/* =========================================================================
   10. Hero Hyundai - Background gradient + animation au chargement
   ========================================================================= */
.banner-section,
.banner-style-1,
.cd-hero-banner,
.hero-section,
.intro-section,
.banner_section,
.main-banner,
.cd_hero {
    background: linear-gradient(135deg, #002C5F 0%, #003D7F 50%, #001E40 100%) !important;
    background-image: linear-gradient(135deg, #002C5F 0%, #003D7F 50%, #001E40 100%),
                      radial-gradient(circle at 80% 20%, rgba(0, 170, 210, 0.15) 0%, transparent 50%) !important;
    position: relative;
    overflow: hidden;
}

/* Effet décoratif lumineux */
.banner-section::before,
.banner-style-1::before,
.cd-hero-banner::before,
.hero-section::before,
.intro-section::before,
.banner_section::before {
    content: "";
    position: absolute;
    top: -30%;
    right: -10%;
    width: 700px;
    height: 700px;
    background: radial-gradient(circle, rgba(0, 170, 210, 0.25) 0%, transparent 70%);
    border-radius: 50%;
    pointer-events: none;
    z-index: 0;
    animation: benthami-pulse 6s ease-in-out infinite;
}

.banner-section::after,
.banner-style-1::after,
.cd-hero-banner::after,
.hero-section::after,
.intro-section::after {
    content: "";
    position: absolute;
    bottom: -40%;
    left: -10%;
    width: 500px;
    height: 500px;
    background: radial-gradient(circle, rgba(0, 44, 95, 0.4) 0%, transparent 60%);
    border-radius: 50%;
    pointer-events: none;
    z-index: 0;
    animation: benthami-pulse 8s ease-in-out infinite reverse;
}

.banner-section > *,
.banner-style-1 > *,
.cd-hero-banner > *,
.hero-section > *,
.intro-section > *,
.banner_section > *,
.main-banner > * {
    position: relative;
    z-index: 1;
}

/* Texte du hero en blanc sur fond Hyundai */
.banner-section h1,
.banner-section h2,
.banner-section h3,
.banner-section .banner-title,
.banner-style-1 h1,
.banner-style-1 h2,
.banner-style-1 .banner-title,
.cd-hero-banner h1,
.hero-section h1,
.intro-section h1,
.banner_section h1 {
    color: #FFFFFF !important;
    font-weight: 800 !important;
    letter-spacing: -0.02em;
    text-shadow: 0 2px 20px rgba(0, 0, 0, 0.2);
}

.banner-section p,
.banner-style-1 p,
.cd-hero-banner p,
.hero-section p,
.intro-section p {
    color: rgba(255, 255, 255, 0.9) !important;
    font-size: 18px;
}

/* =========================================================================
   11. Animations d'entrée au chargement de la page
   ========================================================================= */

/* Animation pulse pour les cercles décoratifs */
@keyframes benthami-pulse {
    0%, 100% {
        transform: scale(1);
        opacity: 0.6;
    }
    50% {
        transform: scale(1.15);
        opacity: 1;
    }
}

/* Fade-in + slide-up pour le hero */
@keyframes benthami-fade-up {
    from {
        opacity: 0;
        transform: translateY(40px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

@keyframes benthami-fade-down {
    from {
        opacity: 0;
        transform: translateY(-40px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

@keyframes benthami-fade-in {
    from { opacity: 0; }
    to   { opacity: 1; }
}

@keyframes benthami-zoom-in {
    from {
        opacity: 0;
        transform: scale(0.92);
    }
    to {
        opacity: 1;
        transform: scale(1);
    }
}

@keyframes benthami-slide-right {
    from {
        opacity: 0;
        transform: translateX(-40px);
    }
    to {
        opacity: 1;
        transform: translateX(0);
    }
}

/* Application aux éléments du hero */
.banner-section h1,
.banner-style-1 h1,
.cd-hero-banner h1,
.hero-section h1,
.intro-section h1,
.banner-title {
    animation: benthami-fade-up 0.9s cubic-bezier(0.4, 0, 0.2, 1) 0.2s both;
}

.banner-section p,
.banner-style-1 p,
.cd-hero-banner p,
.hero-section p,
.intro-section p {
    animation: benthami-fade-up 0.9s cubic-bezier(0.4, 0, 0.2, 1) 0.4s both;
}

.banner-section .btn,
.banner-section a.btn,
.banner-section button,
.banner-style-1 .btn,
.cd-hero-banner .btn,
.hero-section .btn {
    animation: benthami-fade-up 0.9s cubic-bezier(0.4, 0, 0.2, 1) 0.6s both;
}

/* Formulaire de recherche véhicule (sous le hero) */
.search-section,
.search-inventory,
.cd-search-form,
.inventory-search,
.car-search-form {
    animation: benthami-zoom-in 0.8s cubic-bezier(0.4, 0, 0.2, 1) 0.8s both;
}

/* Header descend du haut */
header,
.site-header,
.main-header,
.header_in {
    animation: benthami-fade-down 0.7s cubic-bezier(0.4, 0, 0.2, 1) both;
}

/* Topbar fade-in */
.topbar,
.top-bar {
    animation: benthami-fade-in 0.5s ease both;
}

/* Logo : zoom subtil */
.logo,
.site-logo,
.custom-logo-link {
    animation: benthami-zoom-in 0.8s cubic-bezier(0.4, 0, 0.2, 1) 0.3s both;
}

/* Cartes véhicules : animation au scroll (Intersection Observer) */
.vehicle,
.product-listing-m,
.car-grid-item,
.vehicle-card,
.cd-vehicle-card {
    opacity: 0;
    transform: translateY(30px);
    transition: opacity 0.7s cubic-bezier(0.4, 0, 0.2, 1),
                transform 0.7s cubic-bezier(0.4, 0, 0.2, 1);
}

.vehicle.in-view,
.product-listing-m.in-view,
.car-grid-item.in-view,
.vehicle-card.in-view,
.cd-vehicle-card.in-view {
    opacity: 1;
    transform: translateY(0);
}

/* Sections : fade-in au scroll */
.benthami-animate {
    opacity: 0;
    transform: translateY(30px);
    transition: opacity 0.8s cubic-bezier(0.4, 0, 0.2, 1),
                transform 0.8s cubic-bezier(0.4, 0, 0.2, 1);
}

.benthami-animate.in-view {
    opacity: 1;
    transform: translateY(0);
}

/* Stagger pour cartes services */
.service-box:nth-child(1),
.service-item:nth-child(1) { animation-delay: 0.1s; }
.service-box:nth-child(2),
.service-item:nth-child(2) { animation-delay: 0.2s; }
.service-box:nth-child(3),
.service-item:nth-child(3) { animation-delay: 0.3s; }
.service-box:nth-child(4),
.service-item:nth-child(4) { animation-delay: 0.4s; }

/* =========================================================================
   12. Loader Hyundai (page loader)
   ========================================================================= */
.cardealer-loader,
.preloader,
#preloader {
    background-color: #FFFFFF !important;
}

.cardealer-loader::before,
.preloader::before {
    content: "";
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 80px;
    height: 80px;
    border: 4px solid rgba(0, 44, 95, 0.1);
    border-top-color: #002C5F;
    border-right-color: #00AAD2;
    border-radius: 50%;
    animation: benthami-spin 0.9s linear infinite;
}

@keyframes benthami-spin {
    to { transform: translate(-50%, -50%) rotate(360deg); }
}

/* =========================================================================
   13. Responsive et accessibilité
   ========================================================================= */
*:focus-visible {
    outline: 3px solid var(--hyundai-active);
    outline-offset: 2px;
}

@media (prefers-reduced-motion: reduce) {
    *,
    *::before,
    *::after {
        animation-duration: 0.01ms !important;
        transition-duration: 0.01ms !important;
    }
}

/* RTL support pour la version arabe */
/* (règles RTL .benthami-whatsapp-float retirées le 2026-05-15 — bouton legacy supprimé) */

/* =========================================================================
   14. Bouton "Add Car" / "Add vehicle" du header — masqué (BENTHAMI ne propose pas le dépôt d'annonce particulier)
   ========================================================================= */
.cdfs-add-vehicle,
.menu-item.cdfs-add-vehicle,
.header-button .cdfs-add-vehicle,
.header-button a.listing_add_cart,
a.listing_add_cart {
    display: none !important;
}

/* =========================================================================
   15. Vehicle Listing Filters CarDealer — masqué entièrement
        (remplacé par le shortcode [benthami_models_filter] avec tabs Hyundai-style)
        + masquage du breadcrumb "Home Modern" et de la barre top-filters-box
   ========================================================================= */
.cars-filters-list,
.cars-top-filters-box .vehicles-listing-filters-reset,
.cars-top-filters-box,
.cars-top-filters-box-left,
.cars-top-filters-box-right,
.elementor-widget-cdhl_vehicles-listing-filters,
.elementor-widget-cdhl_vehicles-listing-filters .cars-top-filters-box,
ul.page-breadcrumb,
.page-breadcrumb,
.cars-top-filters-box ul.page-breadcrumb {
    display: none !important;
}

/* =========================================================================
   16. Vehicles Listing — couleurs et style Hyundai
   ========================================================================= */
/* Cards véhicules : fond blanc, ombre douce, hover relevé */
.vehicle,
.product-listing-m,
.cd-vehicle-card {
    background: #FFFFFF;
    border-radius: 14px !important;
    box-shadow: 0 4px 16px rgba(0, 44, 95, 0.06);
    transition: transform 0.35s cubic-bezier(0.4, 0, 0.2, 1), box-shadow 0.35s ease;
    overflow: hidden;
}

.vehicle:hover,
.product-listing-m:hover,
.cd-vehicle-card:hover {
    transform: translateY(-6px);
    box-shadow: 0 20px 38px rgba(0, 44, 95, 0.14);
}

/* Image : hauteur fixe, contain, backdrop dégradé Hyundai */
.vehicle .product-listing-img,
.vehicle .product-thumb,
.product-listing-m .product-listing-img,
.cd-vehicle-card .product-thumb {
    height: 220px !important;
    background: linear-gradient(180deg, #F5F8FB 0%, #FFFFFF 60%, #F0F4F8 100%) !important;
    overflow: hidden;
    display: flex !important;
    align-items: center;
    justify-content: center;
    position: relative;
}

.vehicle .product-listing-img img,
.vehicle .product-thumb img,
.product-listing-m img.img-responsive {
    max-width: 90% !important;
    max-height: 85% !important;
    width: auto !important;
    height: auto !important;
    object-fit: contain !important;
    transition: transform 0.5s ease;
}

.vehicle:hover .product-listing-img img,
.product-listing-m:hover img.img-responsive {
    transform: scale(1.06) translateY(-3px);
}

/* Titre du véhicule : bleu Hyundai au lieu de rouge */
.vehicle h2,
.vehicle h3,
.vehicle .product-title,
.vehicle .product-listing-title,
.vehicle .vehicle-title,
.product-listing-m h2,
.product-listing-m h3,
.product-listing-m .product-title,
.product-listing-m .product-listing-title {
    color: #002C5F !important;
    font-weight: 700 !important;
    font-size: 19px !important;
    letter-spacing: -0.01em;
    margin: 14px 18px 6px !important;
}

.vehicle h2 a,
.vehicle h3 a,
.vehicle .product-title a,
.product-listing-m h2 a,
.product-listing-m h3 a,
.product-listing-m .product-title a {
    color: #002C5F !important;
    transition: color 0.25s ease;
}

.vehicle h2 a:hover,
.vehicle h3 a:hover,
.product-listing-m h2 a:hover,
.product-listing-m h3 a:hover {
    color: #00AAD2 !important;
}

/* Badge "NEUF" / condition : bleu Hyundai au lieu de jaune-cyan */
.vehicle .label-tag,
.vehicle .car-condition,
.product-listing-m .label-tag,
.product-listing-m .car-condition,
.cd-vehicle-card .label-tag,
span.label-new,
.condition-badge {
    background: #00AAD2 !important;
    color: #FFFFFF !important;
    border: 0 !important;
    border-radius: 4px !important;
    padding: 6px 12px !important;
    font-size: 11px !important;
    font-weight: 700 !important;
    letter-spacing: 0.1em;
    text-transform: uppercase;
}

/* Prix : bleu Hyundai foncé */
.vehicle .product-price,
.vehicle .car-price,
.product-listing-m .product-price {
    color: #002C5F !important;
    font-weight: 700 !important;
    font-size: 18px !important;
}

/* Bouton "View Details" / "Détail" : Hyundai outlined → filled au hover */
.vehicle .view-details,
.vehicle a.btn,
.product-listing-m .view-details,
.product-listing-m a.btn,
.cd-vehicle-card a.btn-detail {
    background: transparent !important;
    border: 1.5px solid #002C5F !important;
    color: #002C5F !important;
    border-radius: 6px !important;
    font-weight: 700 !important;
    font-size: 13px !important;
    letter-spacing: 0.12em !important;
    text-transform: uppercase;
    padding: 10px 22px !important;
    transition: all 0.25s ease !important;
}

.vehicle .view-details:hover,
.vehicle a.btn:hover,
.product-listing-m .view-details:hover,
.product-listing-m a.btn:hover {
    background: #002C5F !important;
    color: #FFFFFF !important;
}

/* Bouton "Réinitialiser" du filter : style Hyundai */
.cars-top-filters-box .reset-btn,
.vehicles-listing-filters-reset {
    background: #002C5F !important;
    color: #FFFFFF !important;
    border: 0 !important;
    border-radius: 6px !important;
    padding: 10px 24px !important;
    font-weight: 600 !important;
    letter-spacing: 0.04em;
    transition: background 0.25s ease !important;
}

.cars-top-filters-box .reset-btn:hover,
.vehicles-listing-filters-reset:hover {
    background: #00AAD2 !important;
}

/* Texte "X véhicules correspondants" en bleu Hyundai */
.cars-top-filters-box-left,
.matching-vehicles-count,
.vehicles-results-count {
    color: #002C5F !important;
    font-weight: 600 !important;
}

/* Selects/dropdowns du filtre : style sobre Hyundai */
.cars-filters-list select,
.cars-filters-list .nice-select {
    border: 1px solid #E5E5E5 !important;
    border-radius: 6px !important;
    background: #FFFFFF !important;
    color: #002C5F !important;
    font-weight: 500 !important;
    padding: 10px 14px !important;
    transition: border-color 0.25s ease !important;
}

.cars-filters-list select:focus,
.cars-filters-list .nice-select:hover {
    border-color: #00AAD2 !important;
    outline: 0 !important;
}

/* =========================================================================
   17b. Twitter → X : remplace le glyph de fa-twitter par un "𝕏" stylé X
        (FA 6.2.1 n'a pas encore fa-x-twitter, on patch côté CSS)
   ========================================================================= */
.fa-twitter:before,
.fab.fa-twitter:before,
i.fa-twitter:before,
i.fab.fa-twitter:before {
    content: "" !important;
    /* SVG inline du logo X officiel, rendu via background pour rester centré */
    display: inline-block;
    width: 1em;
    height: 1em;
    vertical-align: -0.12em;
    background-color: currentColor;
    -webkit-mask: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1200 1227'><path d='M714.163 519.284 1160.89 0h-105.86L667.137 450.887 357.328 0H0l468.492 681.821L0 1226.37h105.866l409.625-476.152 327.181 476.152H1200L714.137 519.284h.026ZM569.165 687.828l-47.468-67.894-377.686-540.24h162.604l304.797 435.991 47.468 67.894 396.2 566.721H892.476L569.165 687.854v-.026Z'/></svg>") center/contain no-repeat;
            mask: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1200 1227'><path d='M714.163 519.284 1160.89 0h-105.86L667.137 450.887 357.328 0H0l468.492 681.821L0 1226.37h105.866l409.625-476.152 327.181 476.152H1200L714.137 519.284h.026ZM569.165 687.828l-47.468-67.894-377.686-540.24h162.604l304.797 435.991 47.468 67.894 396.2 566.721H892.476L569.165 687.854v-.026Z'/></svg>") center/contain no-repeat;
}

/* Le label "Twitter" doit aussi montrer "X" si présent en tooltip/title */
[title="Twitter"][class*="fa-twitter"]::after { content: none; }

/* =========================================================================
   17a. Force le bg blanc html/body — neutralise Chrome auto-dark / Dark Reader
        qui prend les couleurs d'accent de la page comme fond.
   ========================================================================= */
html,
body,
.page-wrapper,
#page,
#main,
.wrapper,
.elementor-11810,
.elementor-page {
    background-color: #FFFFFF !important;
    color-scheme: light !important;
}

/* Indique aux navigateurs de respecter notre palette claire */
:root {
    color-scheme: light;
}

/* =========================================================================
   17. Override rouge #db2d2e (CarDealer parent) → bleu Hyundai
   ========================================================================= */
/* Icônes manuelles (loupe / cœur / compare) MASQUÉES — la card entière
   est cliquable, et un hover doux affiche un voile bleu + zoom de l'image.
   Évite aussi la popup "Comparer Les Véhicules" qui hangait sur AJAX. */
.car-item .car-overlay-banner,
.product .car-overlay-banner,
.pgs_cars_carousel-wrapper .car-overlay-banner {
    display: none !important;
}

/* Hover automatique sur la card véhicule */
.car-item .car-image,
.vehicle .car-image,
.cd-vehicle-card .car-image,
.product .car-image,
.car-item .product-thumb,
.vehicle .product-thumb {
    overflow: hidden;
    position: relative;
    cursor: pointer;
    transition: transform 0.4s cubic-bezier(0.2, 0.7, 0.3, 1);
}

.car-item .car-image img,
.vehicle .car-image img,
.cd-vehicle-card .car-image img,
.product .car-image img,
.car-item .product-thumb img,
.vehicle .product-thumb img {
    transition: transform 0.55s cubic-bezier(0.2, 0.7, 0.3, 1), filter 0.35s ease;
    will-change: transform;
}

/* Zoom doux + légère désaturation au repos pour mieux mettre en valeur le hover */
.car-item:hover .car-image img,
.vehicle:hover .car-image img,
.cd-vehicle-card:hover .car-image img,
.product:hover .car-image img,
.car-item:hover .product-thumb img,
.vehicle:hover .product-thumb img {
    transform: scale(1.08);
    filter: brightness(1.04);
}

/* Voile cyan léger qui glisse depuis le bas au hover, avec CTA "Voir la fiche" */
.car-item .car-image::after,
.vehicle .car-image::after,
.cd-vehicle-card .car-image::after,
.car-item .product-thumb::after,
.vehicle .product-thumb::after {
    content: "Voir la fiche ›";
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    padding: 14px 18px;
    background: linear-gradient(180deg, rgba(0, 44, 95, 0) 0%, rgba(0, 44, 95, 0.85) 70%, rgba(0, 44, 95, 0.95) 100%);
    color: #FFFFFF;
    font-weight: 700;
    font-size: 14px;
    letter-spacing: 0.04em;
    text-align: center;
    transform: translateY(100%);
    transition: transform 0.4s cubic-bezier(0.2, 0.7, 0.3, 1);
    pointer-events: none;
    z-index: 2;
}

.car-item:hover .car-image::after,
.vehicle:hover .car-image::after,
.cd-vehicle-card:hover .car-image::after,
.car-item:hover .product-thumb::after,
.vehicle:hover .product-thumb::after {
    transform: translateY(0);
}

/* Popup natif "Comparer Les Véhicules" / wishlist popup CarDealer désactivés
   (AJAX qui hangait) — on utilise /comparer/ à la place. */
#compare-popup,
.compare-modal,
.cd-compare-modal,
#cd-compare-modal,
.compare-popup-wrap,
.add-cars-compare-popup,
.pgs-cars-compare,
.compare-wrap-modal,
.compare-popup,
.jconfirm[data-id="compare"],
.jconfirm.cdhl-compare-popup {
    display: none !important;
}

/* Inventory — featured-vehicles-listing (titre + bandeau + border) */
.product-listing .featured-vehicles-listing-wrapper {
    border-bottom-color: #002C5F !important;
}
.featured-vehicles-listing-wrapper .featured-vehicles-listing-section-title {
    background: #002C5F !important;
}

/* Filtres / sorting */
.sorting-options .change-view-button a.sel-active {
    color: #002C5F !important;
}
.cdhl-vehicle-filters .cars-total-vehicles .stripe-item li:hover a span {
    color: #002C5F !important;
}

/* Boutons / liens action sur car-details */
.car-details .col-sm-12 .car-detail-post-option .single-share-box li a:hover {
    color: #002C5F !important;
}
.car-details .col-lg-12 .aside-lead-form-btn li a:hover {
    background: #002C5F !important;
    border-color: #002C5F !important;
}

/* Generic — neutralise tout reste de rouge sur les éléments accents */
[style*="#db2d2e"],
.cd-button-style,
.button.button-red,
.cd-section-divider-line {
    background-color: #002C5F !important;
    color: #FFFFFF !important;
    border-color: #002C5F !important;
}