/* === site.css === */
* {
            margin: 0;
            padding: 0;
            box-sizing: border-box;
        }

        :root {
            --red: #DC0000;
            --red-dark: #B00000;
            --black: #0A0A0A;
            --black-light: #1A1A1A;
            --white: #FFFFFF;
            --gray: #808080;
            --gray-light: #F5F5F5;
        
            --radius: 14px;
            --shadow: 0 10px 30px rgba(0,0,0,0.08);
        }

        body {
            font-family: 'Inter', -apple-system, BlinkMacSystemFont, sans-serif;
            color: var(--black);
            background: var(--white);
            line-height: 1.6;
            overflow-x: hidden;
        }

        h1, h2, h3, .section-title { font-family: 'Manrope', 'Inter', sans-serif; }
        
        /* Centered section headings */
        .section-title, .section-subtitle { text-align: center; }
        .section-subtitle { max-width: 900px; margin-left: auto; margin-right: auto; }
        
        /* Header */
        header {
            background: var(--black);
            position: fixed;
            top: 0;
            left: 0;
            right: 0;
            z-index: 1000;
            border-bottom: 2px solid var(--red);
        }

        .header-top {
            background: var(--black-light);
            padding: 0.5rem 5%;
            font-size: 0.85rem;
            color: var(--white);
            display: flex;
            justify-content: space-between;
            align-items: center;
        }

        .header-top a {
            color: var(--white);
            text-decoration: none;
            transition: color 0.3s;
        }

        .header-top a:hover {
            color: var(--red);
        }

        .header-main {
            padding: 1rem 5%;
            display: flex;
            justify-content: space-between;
            align-items: center;
        }

        .logo {
            height: 50px;
            cursor: pointer;
        }

        .logo img {
            height: 100%;
            width: auto;
        }

        nav {
            display: flex;
            gap: 2.5rem;
            align-items: center;
        }

        nav a {
            color: var(--white);
            text-decoration: none;
            font-weight: 500;
            font-size: 0.95rem;
            text-transform: uppercase;
            letter-spacing: 0.5px;
            transition: transform .18s ease, box-shadow .18s ease, background .18s ease, border-color .18s ease;
            position: relative;
        }

        nav a::after {
            content: '';
            position: absolute;
            bottom: -5px;
            left: 0;
            width: 0;
            height: 2px;
            background: var(--red);
            transition: width 0.3s;
        }

        nav a:hover::after,
        nav a.active::after {
            width: 100%;
        }

        nav a:hover {
            color: var(--red);
        }

        .cta-phone {
            background: var(--red);
            color: var(--white);
            padding: 0.8rem 1.5rem;
            border-radius: 0;
            text-decoration: none;
            font-weight: 700;
            font-size: 1rem;
            transition: transform .18s ease, box-shadow .18s ease, background .18s ease, border-color .18s ease;
            border: 2px solid var(--red);
        }

        .cta-phone:hover {
            background: transparent;
            color: var(--red);
        }

        /* Hero */
        .hero {
            margin-top: 100px;
            height: 70vh;
            background: var(--black);
            background-size: cover;
            background-position: center;
            display: flex;
            align-items: center;
            justify-content: center;
            text-align: center;
            color: var(--white);
            position: relative;
        }

        .hero::before {
            content: '';
            position: absolute;
            top: 0;
            left: 0;
            right: 0;
            bottom: 0;
            background: repeating-linear-gradient(
                0deg,
                transparent,
                transparent 2px,
                rgba(220, 0, 0, 0.03) 2px,
                rgba(220, 0, 0, 0.03) 4px
            );
        }

        .hero-content {
            position: relative;
            z-index: 3;
        }

        .hero h1 {
            font-size: 4rem;
            font-weight: 900;
            margin-bottom: 1rem;
            text-transform: uppercase;
            letter-spacing: 2px;
        }

        .hero h1 span {
            color: var(--red);
        }

        .hero p {
            font-size: 1.3rem;
            font-weight: 300;
            margin-bottom: 2rem;
            letter-spacing: 1px;
        }

        .hero-cta {
            display: inline-block;
            background: var(--red);
            color: var(--white);
            padding: 1.2rem 3rem;
            text-decoration: none;
            font-weight: 700;
            font-size: 1.1rem;
            transition: transform .18s ease, box-shadow .18s ease, background .18s ease, border-color .18s ease;
            border: 2px solid var(--red);
            text-transform: uppercase;
            letter-spacing: 1px;
        }

        .hero-cta:hover {
            background: transparent;
            color: var(--red);
        }

        /* Section */
        section {
            padding: 6rem 5%;
        }

        .section-dark {
            background: var(--black);
            color: var(--white);
        }

        .section-title {
            font-size: 2.5rem;
            font-weight: 900;
            text-transform: uppercase;
            margin-bottom: 0.5rem;
            letter-spacing: 1px;
        }

        .section-title span {
            color: var(--red);
        }

        .section-subtitle {
            font-size: 1.1rem;
            color: var(--gray);
            margin-bottom: 3rem;
            font-weight: 300;
        }

        /* Services Grid */
        .services-grid {
            display: grid;
            grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
            gap: 2rem;
            max-width: 1400px;
            margin: 0 auto;
        }

        .service-card {
            background: var(--white);
            border: 1px solid #E0E0E0;
            padding: 2.5rem 2rem;
            transition: all 0.4s;
            cursor: pointer;
            position: relative;
            overflow: hidden;
        }

        .service-card::before {
            content: '';
            position: absolute;
            top: 0;
            left: 0;
            width: 0;
            height: 3px;
            background: var(--red);
            transition: width 0.4s;
        }

        .service-card:hover::before {
            width: 100%;
        }

        .service-card:hover {
            transform: translateY(-5px);
            box-shadow: 0 20px 40px rgba(0,0,0,0.1);
        }

        .section-dark .service-card {
            background: var(--black-light);
            border-color: #2A2A2A;
        }

        .service-icon {
            font-size: 3rem;
            margin-bottom: 1.5rem;
        }

        .service-card h3 {
            font-size: 1.3rem;
            font-weight: 700;
            margin-bottom: 1rem;
            text-transform: uppercase;
            letter-spacing: 0.5px;
        }

        .section-dark .service-card h3 {
            color: var(--white);
        }

        .service-card p {
            color: var(--gray);
            line-height: 1.8;
            font-size: 0.95rem;
        }

        /* Vehicles Grid */
        .vehicles-grid {
            display: grid;
            grid-template-columns: repeat(auto-fill, minmax(380px, 1fr));
            gap: 2.5rem;
            max-width: 1400px;
            margin: 0 auto;
        }

        .vehicle-card {
            background: var(--white);
            border: 1px solid #E0E0E0;
            overflow: hidden;
            transition: all 0.4s;
            cursor: pointer;
        }

        .vehicle-card:hover {
            transform: translateY(-8px);
            box-shadow: 0 25px 50px rgba(0,0,0,0.15);
        }

        .vehicle-image {
            width: 100%;
            height: 280px;
            background: #F0F0F0;
            position: relative;
            overflow: hidden;
        }

        .vehicle-image img {
            width: 100%;
            height: 100%;
            object-fit: cover;
            transition: transform 0.6s;
        }

        .vehicle-card:hover .vehicle-image img {
            transform: scale(1.05);
        }

        .vehicle-price {
            position: absolute;
            top: 1.5rem;
            left: 0;
            background: var(--red);
            color: var(--white);
            padding: 0.8rem 1.5rem;
            font-weight: 900;
            font-size: 1.4rem;
            letter-spacing: 1px;
        }

        .vehicle-info {
            padding: 2rem;
        }

        .vehicle-brand {
            font-size: 0.85rem;
            color: var(--red);
            font-weight: 700;
            text-transform: uppercase;
            letter-spacing: 1px;
            margin-bottom: 0.5rem;
        }

        .vehicle-title {
            font-size: 1.2rem;
            font-weight: 700;
            margin-bottom: 1.5rem;
            color: var(--black);
            line-height: 1.4;
        }

        .vehicle-specs {
            display: flex;
            justify-content: space-between;
            padding-top: 1rem;
            border-top: 1px solid #E0E0E0;
            font-size: 0.85rem;
        }

        .spec-item {
            text-align: center;
        }

        .spec-label {
            color: var(--gray);
            font-size: 0.75rem;
            text-transform: uppercase;
            margin-bottom: 0.3rem;
        }

        .spec-value {
            color: var(--black);
            font-weight: 700;
        }

        /* Pricing */
        .pricing-grid {
            display: grid;
            gap: 1.5rem;
            max-width: 900px;
            margin: 0 auto;
        }

        .pricing-item {
            background: linear-gradient(180deg, rgba(255,255,255,0.08), rgba(255,255,255,0.04));
            border: 1px solid rgba(255,255,255,0.12);
            padding: 2rem;
            display: grid;
            grid-template-columns: 1fr auto;
            gap: 2rem;
            align-items: center;
            transition: transform .18s ease, box-shadow .18s ease, background .18s ease, border-color .18s ease;
            border-radius: var(--radius);
        }

        .pricing-item:hover {
            border-color: var(--red);
        }

        .pricing-label {
            font-weight: 600;
            font-size: 1.05rem;
            color: rgba(255,255,255,0.92);
        }

        .pricing-value {
            font-size: 2rem;
            font-weight: 900;
            color: var(--red);
        }

        .pricing-note {
            grid-column: 1 / -1;
            margin-top: -1rem;
            color: rgba(255,255,255,0.75);
            font-size: 0.95rem;
            text-align: right;
        }

        .pricing-note strong {
            color: var(--red);
            font-weight: 900;
        }

        @media (max-width: 640px) {
            .pricing-note { text-align: left; margin-top: -0.5rem; }
        }


        /* Guarantee Banner */
        .guarantee-banner {
            max-width: 1400px;
            margin: 0 auto;
            border: 2px solid var(--red);
            background: linear-gradient(135deg, rgba(220,0,0,0.06), rgba(10,10,10,0.02));
            padding: 2.5rem;
            display: grid;
            grid-template-columns: 1.2fr 1fr;
            gap: 2rem;
            align-items: center;
        }

        .guarantee-badge {
            display: inline-flex;
            align-items: center;
            gap: 0.6rem;
            background: var(--black);
            color: var(--white);
            padding: 0.5rem 0.9rem;
            font-weight: 800;
            text-transform: uppercase;
            letter-spacing: 0.8px;
            border-left: 4px solid var(--red);
            width: fit-content;
        }

        .guarantee-banner h3 {
            font-size: 1.8rem;
            line-height: 1.2;
            margin: 0.8rem 0 0.8rem;
            text-transform: uppercase;
            letter-spacing: 0.5px;
        }

        .guarantee-banner p {
            color: var(--gray);
            font-size: 1.05rem;
            line-height: 1.8;
        }

        .guarantee-list {
            display: grid;
            gap: 0.9rem;
            background: rgba(255,255,255,0.07);
            border: 1px solid rgba(255,255,255,0.12);
            padding: 1.5rem;
            border-radius: var(--radius);
            color: rgba(255,255,255,0.90);
        }

        .guarantee-item {
            display: flex;
            gap: 0.75rem;
            align-items: flex-start;
            font-size: 0.95rem;
            line-height: 1.6;
        }

        .guarantee-item .emoji {
            font-size: 1.1rem;
            line-height: 1.2;
        }

        @media (max-width: 900px) {
            .guarantee-banner {
                grid-template-columns: 1fr;
            }
        }

        /* Map */
        .map-container {
            max-width: 1400px;
            margin: 0 auto;
        }

        .map-embed {
            height: 500px;
            border: 3px solid var(--black);
        }

        .map-embed iframe {
            width: 100%;
            height: 100%;
            border: none;
        }

        /* Footer */
        footer {
            background: var(--black);
            color: var(--white);
            padding: 4rem 5% 2rem;
        }

        .footer-content {
            max-width: 1400px;
            margin: 0 auto;
            display: grid;
            grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
            gap: 3rem;
            margin-bottom: 3rem;
        }

        .footer-section h3 {
            color: var(--red);
            margin-bottom: 1.5rem;
            font-weight: 700;
            text-transform: uppercase;
            letter-spacing: 1px;
        }

        .footer-section p,
        .footer-section a {
            color: rgba(255,255,255,0.7);
            text-decoration: none;
            display: block;
            margin-bottom: 0.8rem;
            transition: color 0.3s;
        }

        .footer-section a:hover {
            color: var(--red);
        }

        .footer-bottom {
            text-align: center;
            padding-top: 2rem;
            border-top: 1px solid #2A2A2A;
            color: rgba(255,255,255,0.5);
            font-size: 0.85rem;
        }

        /* Page System */
        .page {
            display: none;
        }

        .page.active {
            display: block;
        }

        /* Empty State */
        .empty-state {
            text-align: center;
            padding: 6rem 2rem;
            background: var(--gray-light);
        }

        .empty-state-icon {
            font-size: 5rem;
            margin-bottom: 2rem;
            opacity: 0.3;
        }

        .empty-state h3 {
            font-size: 2rem;
            margin-bottom: 1rem;
            color: var(--black);
        }

        .empty-state p {
            color: var(--gray);
            margin-bottom: 2rem;
            font-size: 1.1rem;
        }

        /* Responsive */
        @media (max-width: 768px) {
            .hero h1 {
                font-size: 2.5rem;
            }
            nav {
                display: none;
            }
            .vehicles-grid {
                grid-template-columns: 1fr;
            }
            .header-main {
                justify-content: center;
            }
        }

        /* Bouton WhatsApp Flottant */
        .whatsapp-float {
            position: fixed;
            bottom: 30px;
            right: 30px;
            width: 60px;
            height: 60px;
            background: #25D366;
            border-radius: 50%;
            display: flex;
            align-items: center;
            justify-content: center;
            box-shadow: 0 4px 20px rgba(37, 211, 102, 0.4);
            z-index: 9999;
            cursor: pointer;
            transition: all 0.3s;
            animation: pulse 2s infinite;
        }

        .whatsapp-float:hover {
            transform: scale(1.1);
            box-shadow: 0 6px 30px rgba(37, 211, 102, 0.6);
        }

        .whatsapp-float svg {
            width: 35px;
            height: 35px;
            fill: white;
        }

        @keyframes pulse {
            0%, 100% {
                box-shadow: 0 4px 20px rgba(37, 211, 102, 0.4);
            }
            50% {
                box-shadow: 0 4px 30px rgba(37, 211, 102, 0.7);
            }
        }

        @media (max-width: 768px) {
            .whatsapp-float {
                bottom: 20px;
                right: 20px;
                width: 55px;
                height: 55px;
            }
        }

        /* Documents Box */
        .docs-box {
            background: linear-gradient(180deg, rgba(255,255,255,0.08), rgba(255,255,255,0.04));
            border: 1px solid rgba(255,255,255,0.12);
            padding: 2.5rem;
            max-width: 900px;
            margin: 3rem auto;
            color: rgba(255,255,255,0.92);
            border-radius: var(--radius);
        }

        .docs-box h3 {
            font-size: 1.5rem;
            margin-bottom: 1.5rem;
            color: rgba(255,255,255,0.95);
        }

        .docs-box ul {
            list-style: none;
        }

        .docs-box li {
            padding: 0.8rem 0;
            padding-left: 2rem;
            position: relative;
            border-bottom: 1px solid rgba(255,255,255,0.10);
            color: rgba(255,255,255,0.85);
        }

        .docs-box li:last-child {
            border-bottom: none;
        }

        .docs-box li::before {
            content: '✓';
            position: absolute;
            left: 0;
            color: var(--red);
            font-weight: bold;

                }

        /* About Typography */
        .about-content {
            max-width: 900px;
            margin: 0 auto;
            text-align: center;
            font-size: 1.05rem;
            line-height: 1.85;
        }

        .about-content p {
            margin-bottom: 1.6rem;
            color: rgba(255,255,255,0.88);
        }

        .about-content strong {
            font-weight: 800;
        }

        .values-box {
            text-align: left;
            background: linear-gradient(180deg, rgba(255,255,255,0.08), rgba(255,255,255,0.04));
            border: 1px solid rgba(255,255,255,0.12);
            padding: 2.5rem;
            margin: 2.5rem 0;
            border-left: 4px solid var(--red);
        }

        .values-box h3 {
            font-size: 1.5rem;
            margin-bottom: 1.2rem;
            letter-spacing: 0.5px;
            text-transform: uppercase;
            color: rgba(255,255,255,0.95);
        }

        .values-grid {
            display: grid;
            gap: 1rem;
            font-size: 1rem;
            color: rgba(255,255,255,0.85);
        }

        .about-kpi {
            text-align: center;
            margin: 2.2rem 0;
            font-size: 1.2rem;
            font-weight: 700;
        }

        .about-kpi span {
            color: var(--red);
        }

    

        :root {
            --radius: 14px;
            --shadow: 0 10px 30px rgba(0,0,0,0.08);
        }

        h1, h2, h3, .section-title {
            letter-spacing: -0.02em;
        }

        .service-card, .vehicle-card, .contact-card, .values-box, .guarantee-card {
            border-radius: var(--radius);
        }

        .service-card, .vehicle-card, .contact-card, .guarantee-card {
            box-shadow: var(--shadow);
        }

        .about-content { text-align: center; }
        .values-box, .values-grid { text-align: left; }
    

        /* Brand wall */
        .brand-wall {
            position: fixed;
            inset: 0;
            z-index: 0;
            pointer-events: none;

            /* Nid d'abeilles carbone (rouge/noir) */
            background-image: url('carbon-honeycomb.webp');
            background-repeat: repeat;
            background-size: 520px auto;
            background-position: 0 0;

            /* rendu premium: contraste maîtrisé */
            opacity: 0.22;
            filter: saturate(1.05) contrast(1.05);
        }

.page, footer { position: relative; z-index: 1; }

        /* Hero filigrane vehicles */
        .hero {
            overflow: hidden;
        }

        .hero::after {
            content: '';
            position: absolute;
            inset: 0;
            background: radial-gradient(800px 400px at 50% 35%, rgba(220,0,0,0.25), transparent 60%),
                        linear-gradient(rgba(10,10,10,0.55), rgba(10,10,10,0.75));
            z-index: 2;
            pointer-events: none;
        }

        .hero::before { z-index: 2; pointer-events:none; }

        .hero-filigrane {
            position: absolute;
            inset: -20% 0;
            z-index: 1;
            display: flex;
            flex-direction: column;
            justify-content: center;
            align-items: center;
            gap: 18px;
            opacity: 0.22;
            filter: grayscale(1) contrast(1.08) saturate(0.8);
            transform: rotate(-2deg);
            mask-image: linear-gradient(90deg, transparent, rgba(0,0,0,1) 12%, rgba(0,0,0,1) 88%, transparent);
        }

        .filigrane-lane {
            display: flex;
            gap: 14px;
            width: max-content;
            padding: 6px 0;
            will-change: transform;
            animation: filigraneScroll var(--duration, 26s) linear infinite;
        }

        .filigrane-lane.lane2 {
            animation-name: filigraneScrollReverse;
            opacity: 0.85;
        }

        @keyframes filigraneScroll {
            from { transform: translateX(0); }
            to { transform: translateX(-50%); }
        }

        @keyframes filigraneScrollReverse {
            from { transform: translateX(-50%); }
            to { transform: translateX(0); }
        }

        .filigrane-card {
            width: 260px;
            height: 150px;
            border-radius: 14px;
            overflow: hidden;
            background: rgba(255,255,255,0.06);
            border: 1px solid rgba(255,255,255,0.08);
            box-shadow: 0 12px 30px rgba(0,0,0,0.2);
            position: relative;
        }

        .filigrane-card img {
            width: 100%;
            height: 100%;
            object-fit: cover;
            opacity: 0.9;
        }

        .filigrane-price {
            position: absolute;
            bottom: 10px;
            left: 10px;
            padding: 0.35rem 0.6rem;
            font-weight: 800;
            font-size: 0.9rem;
            color: #fff;
            background: rgba(220,0,0,0.85);
            border-radius: 10px;
            letter-spacing: 0.3px;
        }

        @media (prefers-reduced-motion: reduce) {
            .filigrane-lane { animation: none; }
        }

        /* Trust strip */
        .trust-strip {
            max-width: 1250px;
            margin: 0 auto;
            display: flex;
            gap: 22px;
            justify-content: space-between;
            flex-wrap: wrap;
        }

        .trust-item {
            flex: 1 1 180px;
            min-width: 160px;
            display: grid;
            justify-items: center;
            gap: 0.8rem;
            text-align: center;
        }

        .trust-icon {
            width: 78px;
            height: 78px;
            border-radius: 999px;
            background: #fff;
            border: 1px solid #E7E7E7;
            display: grid;
            place-items: center;
            color: var(--black);
            box-shadow: 0 10px 24px rgba(0,0,0,0.06);
        }

        .trust-text {
            font-weight: 600;
            color: var(--black);
        }

        /* Home vehicle strip */
        .vehicle-strip {
            max-width: 1400px;
            margin: 0 auto;
            display: flex;
            gap: 18px;
            overflow-x: auto;
            padding: 10px 6px 22px;
            scroll-snap-type: x mandatory;
            -webkit-overflow-scrolling: touch;
        }

        .vehicle-strip::-webkit-scrollbar { height: 10px; }
        .vehicle-strip::-webkit-scrollbar-thumb { background: rgba(0,0,0,0.15); border-radius: 999px; }

        .mini-vehicle {
            width: 340px;
            flex: 0 0 auto;
            scroll-snap-align: start;
            border-radius: var(--radius);
            border: 1px solid #E0E0E0;
            overflow: hidden;
            background: #fff;
            box-shadow: var(--shadow);
            cursor: pointer;
            transition: transform .18s ease, box-shadow .18s ease;
        }

        .mini-vehicle:hover { transform: translateY(-4px); box-shadow: 0 22px 40px rgba(0,0,0,0.12); }

        .mini-vehicle .img {
            height: 190px;
            background: #f0f0f0;
            position: relative;
            overflow: hidden;
        }

        .mini-vehicle img { width: 100%; height: 100%; object-fit: cover; display:block; }

        .mini-vehicle .price {
            position: absolute;
            left: 0;
            top: 14px;
            background: var(--red);
            color: #fff;
            font-weight: 900;
            padding: 0.6rem 1rem;
            letter-spacing: 0.5px;
        }

        .mini-vehicle .body { padding: 1.15rem 1.25rem; }
        .mini-vehicle .title { font-weight: 800; margin-bottom: 0.45rem; }
        .mini-vehicle .meta { display:flex; gap: 10px; color: var(--gray); font-size: 0.9rem; }
        .mini-vehicle .pill { border: 1px solid #E7E7E7; border-radius: 999px; padding: 0.2rem 0.6rem; }

        /* Payment section */
        .payment-panel {
            max-width: 1200px;
            margin: 0 auto;
            display: grid;
            grid-template-columns: 1.25fr 1fr;
            gap: 22px;
        }

        .payment-card {
            background: #fff;
            border: 1px solid #E0E0E0;
            border-radius: var(--radius);
            padding: 2rem;
            box-shadow: var(--shadow);
        }

        .payment-card-dark {
            background: var(--black);
            color: var(--white);
            border-color: #2A2A2A;
        }

        .payment-badge {
            display: inline-flex;
            align-items: center;
            gap: 10px;
            font-weight: 800;
            background: rgba(220,0,0,0.12);
            color: var(--red);
            padding: 0.45rem 0.75rem;
            border-radius: 999px;
            border: 1px solid rgba(220,0,0,0.25);
            margin-bottom: 1rem;
        }

        .payment-card h3 { font-size: 1.35rem; margin-bottom: 0.6rem; letter-spacing: 0.2px; }
        .payment-card p { color: var(--gray); }
        .payment-card-dark p { color: rgba(255,255,255,0.75); }

        .payment-list { display: grid; gap: 12px; margin-top: 1.2rem; }
        .payment-item { display:flex; gap: 12px; align-items: center; }
        .pay-icon {
            width: 46px;
            height: 46px;
            border-radius: 14px;
            border: 1px solid #E7E7E7;
            display:grid;
            place-items:center;
            color: var(--black);
            background: #fff;
        }
        .payment-card-dark .pay-icon {
            background: rgba(255,255,255,0.08);
            border-color: rgba(255,255,255,0.12);
            color: #fff;
        }

        .pay-logos { display:flex; flex-wrap:wrap; gap: 10px; margin-top: 1.2rem; }
        .logo-pill {
            display:inline-flex;
            align-items:center;
            gap: 10px;
            padding: 0.55rem 0.8rem;
            border-radius: 999px;
            border: 1px solid rgba(255,255,255,0.12);
            background: rgba(255,255,255,0.06);
            font-weight: 700;
        }
        .payment-card:not(.payment-card-dark) .logo-pill {
            border-color: #E7E7E7;
            background: #fff;
        }

        .logo-mark { display:grid; place-items:center; }

        .payment-note {
            margin-top: 1.3rem;
            padding: 1rem;
            border-radius: 14px;
            border: 1px solid rgba(255,255,255,0.12);
            background: rgba(255,255,255,0.06);
            color: rgba(255,255,255,0.85);
            font-size: 0.95rem;
        }

        @media (max-width: 980px) {
            .payment-panel { grid-template-columns: 1fr; }
        }

        @media (max-width: 540px) {
            .filigrane-card { width: 220px; height: 130px; }
            .mini-vehicle { width: 290px; }
        }

        /* ========== INDICATEUR OUVERT/FERMÉ ========== */
        .status-indicator {
            display: flex;
            align-items: center;
            gap: 6px;
        }

        .status-dot {
            width: 10px;
            height: 10px;
            border-radius: 50%;
            background: #00ff00;
            box-shadow: 0 0 10px rgba(0, 255, 0, 0.5);
            animation: pulse-status 2s infinite;
        }

        .status-dot.closed {
            background: #ff0000;
            box-shadow: 0 0 10px rgba(255, 0, 0, 0.5);
            animation: none;
        }

        @keyframes pulse-status {
            0%, 100% { opacity: 1; }
            50% { opacity: 0.6; }
        }

        /* ========== BOUTON VOIR NOS ANNONCES ========== */
        .cta-annonces {
            background: #FF6E14;
            color: white;
            padding: 0.65rem 1.2rem;
            border-radius: 25px;
            text-decoration: none;
            font-weight: 600;
            font-size: 0.9rem;
            transition: all 0.3s;
            display: flex;
            align-items: center;
            gap: 8px;
            border: 2px solid transparent;
        }

        .cta-annonces:hover {
            background: #E65100;
            transform: translateY(-2px);
            box-shadow: 0 4px 12px rgba(255, 110, 20, 0.3);
        }

        .cta-annonces svg {
            width: 18px;
            height: 18px;
        }

        /* ========== BOUTONS FLOTTANTS ========== */
        
        /* Bouton WhatsApp (vert) */
        .whatsapp-float {
            position: fixed;
            bottom: 25px;
            right: 25px;
            background: #25D366;
            color: white;
            width: 60px;
            height: 60px;
            border-radius: 50%;
            display: flex;
            align-items: center;
            justify-content: center;
            box-shadow: 0 4px 20px rgba(37, 211, 102, 0.4);
            cursor: pointer;
            z-index: 10000;
            transition: all 0.3s ease;
            animation: pulse-green 2s infinite;
            text-decoration: none;
        }

        .whatsapp-float:hover {
            transform: scale(1.1);
            box-shadow: 0 6px 30px rgba(37, 211, 102, 0.6);
        }

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

        .whatsapp-float svg {
            width: 35px;
            height: 35px;
            fill: white;
        }

        /* Bouton Leboncoin (orange) */
        .leboncoin-float {
            position: fixed;
            bottom: 100px;
            right: 25px;
            background: #FF6E14;
            color: white;
            width: 60px;
            height: 60px;
            border-radius: 50%;
            display: flex;
            align-items: center;
            justify-content: center;
            box-shadow: 0 4px 20px rgba(255, 110, 20, 0.4);
            cursor: pointer;
            z-index: 10000;
            transition: all 0.3s ease;
            animation: pulse-orange 2s infinite 0.5s;
            text-decoration: none;
            font-size: 30px;
            font-weight: bold;
        }

        .leboncoin-float:hover {
            transform: scale(1.1);
            box-shadow: 0 6px 30px rgba(255, 110, 20, 0.6);
        }

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

        /* Labels au survol */
        .float-button-label {
            position: absolute;
            right: 75px;
            background: rgba(0, 0, 0, 0.85);
            color: white;
            padding: 8px 15px;
            border-radius: 20px;
            white-space: nowrap;
            font-size: 14px;
            font-weight: 500;
            opacity: 0;
            pointer-events: none;
            transition: opacity 0.3s ease;
        }

        .whatsapp-float:hover .float-button-label,
        .leboncoin-float:hover .float-button-label {
            opacity: 1;
        }

        /* Responsive mobile pour nouveaux éléments */
        @media (max-width: 980px) {
            .status-indicator {
                flex-direction: column;
                gap: 4px;
                font-size: 0.8rem;
            }
            
            .cta-annonces {
                padding: 0.5rem 1rem;
                font-size: 0.85rem;
            }
        }

        @media (max-width: 768px) {
            .whatsapp-float,
            .leboncoin-float {
                width: 55px;
                height: 55px;
                bottom: 20px;
                right: 20px;
            }
            
            .leboncoin-float {
                bottom: 90px;
            }
            
            .whatsapp-float svg {
                width: 30px;
                height: 30px;
            }
            
            .leboncoin-float {
                font-size: 26px;
            }
            
            .float-button-label {
                display: none;
            }

            .header-main {
                flex-direction: column;
                gap: 1rem;
            }
            
            .cta-annonces {
                width: 100%;
                justify-content: center;
            }
        }

    
/* ==========================
   iOS PREMIUM REGEN (v3)
   ========================== */

:root{
    --bg: #070707;
    --panel: rgba(255,255,255,0.06);
    --panel-2: rgba(255,255,255,0.08);
    --stroke: rgba(255,255,255,0.10);
    --stroke-2: rgba(255,255,255,0.16);
    --text: rgba(255,255,255,0.92);
    --muted: rgba(255,255,255,0.70);
    --muted-2: rgba(255,255,255,0.55);
    --red-pro: #D40000;
    --red-pro-2: #A80000;
    --orange-pro: #FF6E14;
    --radius-xl: 22px;
    --radius-pill: 999px;
    --shadow-xl: 0 24px 70px rgba(0,0,0,0.45);
    --shadow-md: 0 14px 36px rgba(0,0,0,0.30);
    --shadow-sm: 0 10px 22px rgba(0,0,0,0.22);
}

body{
    background: radial-gradient(1200px 620px at 18% 0%, rgba(212,0,0,0.20), transparent 60%),
                radial-gradient(900px 520px at 85% 10%, rgba(255,110,20,0.14), transparent 60%),
                #050505;
    color: var(--text);
}

/* Header - glass supercar */
header{
    background: rgba(0,0,0,0.62);
    backdrop-filter: blur(18px);
    -webkit-backdrop-filter: blur(18px);
    border-bottom: 1px solid rgba(255,255,255,0.10);
}
.header-top{
    background: transparent;
    border-bottom: 1px solid rgba(255,255,255,0.08);
}
.header-top, .header-top a{ color: rgba(255,255,255,0.86); }
.header-top a:hover{ color: white; }

.header-main{
    gap: 14px;
}

/* Nav pills */
.top-nav{ flex: 1; display:flex; justify-content:center; }
.nav-pills{
    display:flex;
    align-items:center;
    gap: 10px;
    padding: 10px 12px;
    background: linear-gradient(180deg, rgba(255,255,255,0.10), rgba(255,255,255,0.05));
    border: 1px solid rgba(255,255,255,0.12);
    border-radius: var(--radius-pill);
    box-shadow: 0 18px 55px rgba(0,0,0,0.40);
    max-width: 900px;
    overflow: hidden;
}
.nav-pill{
    height: 40px;
    display:flex;
    align-items:center;
    justify-content:center;
    padding: 0 14px;
    border-radius: var(--radius-pill);
    color: rgba(255,255,255,0.86);
    text-decoration:none;
    font-weight: 700;
    font-size: 0.78rem;
    letter-spacing: 1.2px;
    text-transform: uppercase;
    white-space: nowrap;
    border: 1px solid transparent;
    transition: transform .18s ease, background .18s ease, box-shadow .18s ease, color .18s ease, border-color .18s ease;
}
.nav-pill:hover{
    background: rgba(255,255,255,0.08);
    border-color: rgba(255,255,255,0.10);
    transform: translateY(-1px);
}
.nav-pill.active{
    background: radial-gradient(120% 140% at 50% 0%, rgba(212,0,0,0.92), rgba(168,0,0,0.78));
    box-shadow: 0 14px 40px rgba(212,0,0,0.22);
    color: white;
    border-color: rgba(255,255,255,0.10);
}
nav a::after{ display:none !important; } /* kill old underline */

/* CTAs */
.cta-annonces{
    border-radius: var(--radius-pill);
    box-shadow: 0 18px 46px rgba(255,110,20,0.16);
}
.cta-phone{
    background: transparent;
    padding: 0;
    border: 0;
    text-decoration: none;
}
.cta-phone-chip{
    display:inline-flex;
    align-items:center;
    justify-content:center;
    height: 44px;
    padding: 0 16px;
    border-radius: var(--radius-pill);
    color: white;
    font-weight: 800;
    letter-spacing: .6px;
    background: radial-gradient(120% 140% at 50% 0%, rgba(212,0,0,0.95), rgba(168,0,0,0.85));
    border: 1px solid rgba(255,255,255,0.10);
    box-shadow: 0 18px 60px rgba(212,0,0,0.24);
    transition: transform .18s ease, box-shadow .18s ease, filter .18s ease;
    white-space: nowrap;
}
.cta-phone:hover .cta-phone-chip{
    transform: translateY(-1px);
    box-shadow: 0 22px 80px rgba(212,0,0,0.30);
    filter: saturate(1.08);
}

/* Sections on dark */
section{ color: var(--text); }
.section-subtitle{ color: var(--muted); }
.service-card, .guarantee-banner, .vehicle-strip-item, .contact-card, .about-card, .info-card{
    background: linear-gradient(180deg, rgba(255,255,255,0.08), rgba(255,255,255,0.04));
    border: 1px solid rgba(255,255,255,0.10);
}
.service-card:hover{
    border-color: rgba(255,255,255,0.16);
    transform: translateY(-4px);
}

/* Vehicles premium grid */
.vehicles-grid{
    gap: 22px;
}
.vehicle-card{
    border-radius: var(--radius-xl);
    overflow: hidden;
    background: linear-gradient(180deg, rgba(255,255,255,0.10), rgba(255,255,255,0.05));
    border: 1px solid rgba(255,255,255,0.12);
    box-shadow: var(--shadow-md);
    transform: translateZ(0);
    transition: transform .22s ease, border-color .22s ease, box-shadow .22s ease;
}
.vehicle-card:hover{
    transform: translateY(-6px);
    border-color: rgba(255,255,255,0.18);
    box-shadow: var(--shadow-xl);
}
.vehicle-media{
    position: relative;
    height: 240px;
    overflow: hidden;
    background: #0b0b0b;
}
.vehicle-media img{
    width: 100%;
    height: 100%;
    object-fit: cover;
    transform: scale(1.02);
    transition: transform .7s ease;
}
.vehicle-card:hover .vehicle-media img{ transform: scale(1.07); }

/* VENDU overlay */
.sold-overlay-card {
    position: absolute;
    inset: 0;
    z-index: 5;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(0,0,0,0.48);
    pointer-events: none;
}
.sold-overlay-card::before {
    content: '';
    position: absolute;
    inset: 0;
    background: repeating-linear-gradient(
        -45deg,
        transparent,
        transparent 14px,
        rgba(180,0,0,0.2) 14px,
        rgba(180,0,0,0.2) 28px
    );
}
.sold-stamp-card {
    position: relative;
    z-index: 2;
    background: #DC0000;
    color: #fff;
    font-weight: 900;
    font-size: 1.35rem;
    letter-spacing: 4px;
    padding: 0.4rem 1.2rem;
    transform: rotate(-22deg);
    border: 3px solid rgba(255,255,255,0.88);
    border-radius: 5px;
    box-shadow: 0 4px 24px rgba(0,0,0,0.55);
    text-shadow: 0 1px 4px rgba(0,0,0,0.45);
    white-space: nowrap;
}
.vehicle-card.is-sold .vehicle-price-pill {
    background: rgba(80,80,80,0.85);
}
.vehicle-card.is-sold .vehicle-title {
    text-decoration: line-through;
    opacity: 0.65;
}

.vehicle-placeholder{
    height: 100%;
    display:flex;
    align-items:center;
    justify-content:center;
    font-size: 4rem;
    color: rgba(255,255,255,0.22);
}

.vehicle-media::after{
    content:'';
    position:absolute;
    inset:0;
    background: linear-gradient(180deg, rgba(0,0,0,0.00) 30%, rgba(0,0,0,0.55) 100%);
    pointer-events:none;
}

.vehicle-price-pill{
    position:absolute;
    top: 14px;
    left: 14px;
    z-index:2;
    padding: 10px 12px;
    border-radius: 14px;
    background: rgba(212,0,0,0.92);
    border: 1px solid rgba(255,255,255,0.12);
    box-shadow: 0 18px 60px rgba(212,0,0,0.18);
    font-weight: 900;
    letter-spacing: .3px;
}
.vehicle-badges{
    position:absolute;
    top: 14px;
    right: 14px;
    z-index:2;
    display:flex;
    gap: 8px;
    flex-wrap: wrap;
    justify-content:flex-end;
}
.badge{
    height: 28px;
    display:inline-flex;
    align-items:center;
    padding: 0 10px;
    border-radius: 999px;
    font-weight: 800;
    font-size: .72rem;
    letter-spacing: .7px;
    text-transform: uppercase;
    border: 1px solid rgba(255,255,255,0.10);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
}
.badge-red{ background: rgba(212,0,0,0.80); }
.badge-dark{ background: rgba(0,0,0,0.35); color: rgba(255,255,255,0.90); }

.vehicle-body{
    padding: 16px 16px 18px;
}
.vehicle-brand{
    color: rgba(255,255,255,0.70);
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: 1px;
    font-size: .78rem;
    margin-bottom: 6px;
}
.vehicle-title{
    color: white;
    font-size: 1.05rem;
    line-height: 1.25;
    margin-bottom: 12px;
    min-height: 2.5em;
}
.vehicle-chips{
    display:flex;
    gap: 8px;
    flex-wrap: wrap;
    margin-bottom: 14px;
}
.chip{
    display:inline-flex;
    align-items:center;
    height: 30px;
    padding: 0 10px;
    border-radius: 999px;
    background: rgba(255,255,255,0.08);
    border: 1px solid rgba(255,255,255,0.10);
    color: rgba(255,255,255,0.82);
    font-weight: 700;
    font-size: .82rem;
}

.vehicle-actions{
    display:flex;
    gap: 10px;
}
.btn-ghost, .btn-primary{
    height: 42px;
    border-radius: 999px;
    display:inline-flex;
    align-items:center;
    justify-content:center;
    padding: 0 14px;
    text-decoration:none;
    font-weight: 900;
    letter-spacing: .6px;
    font-size: .86rem;
    border: 1px solid rgba(255,255,255,0.12);
    transition: transform .18s ease, box-shadow .18s ease, background .18s ease, border-color .18s ease, filter .18s ease;
    flex: 1;
    white-space: nowrap;
}
.btn-ghost{
    background: rgba(255,255,255,0.06);
    color: rgba(255,255,255,0.88);
}
.btn-ghost:hover{
    background: rgba(255,255,255,0.10);
    transform: translateY(-1px);
}
.btn-primary{
    background: linear-gradient(180deg, rgba(212,0,0,0.95), rgba(168,0,0,0.85));
    color: white;
    box-shadow: 0 18px 60px rgba(212,0,0,0.18);
}
.btn-primary:hover{
    transform: translateY(-1px);
    box-shadow: 0 22px 80px rgba(212,0,0,0.24);
    filter: saturate(1.06);
}
.btn-primary.is-disabled{
    background: linear-gradient(180deg, rgba(255,255,255,0.10), rgba(255,255,255,0.06));
    color: rgba(255,255,255,0.80);
    box-shadow: none;
}

/* iOS touch micro-interactions */
@media (hover: none) {
    .vehicle-card:active{ transform: scale(0.985); }
    .btn-ghost:active, .btn-primary:active{ transform: scale(0.98); }
    .nav-pill:active{ transform: scale(0.98); }
    .cta-phone:active .cta-phone-chip{ transform: scale(0.98); }
    .cta-annonces:active{ transform: scale(0.985); }
}

/* Reduce motion */
@media (prefers-reduced-motion: reduce){
    *{ animation: none !important; transition: none !important; scroll-behavior: auto !important; }
}

/* Mobile: sticky header + iOS horizontal nav */
@media (max-width: 900px){
    header{ position: sticky; top:0; }
    .header-main{ flex-wrap: wrap; justify-content:center; }
    .logo{ flex: 0 0 100%; display:flex; justify-content:center; }
    .top-nav{ flex: 0 0 100%; }
    .nav-pills{
        max-width: 100%;
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
        scrollbar-width: none;
    }
    .nav-pills::-webkit-scrollbar{ display:none; }

    .cta-annonces{ flex: 1 1 220px; justify-content:center; }
    .cta-phone{ flex: 1 1 180px; display:flex; justify-content:center; }
    .vehicle-media{ height: 220px; }
}

/* Floating buttons: safe area */
body{ padding-bottom: 150px; }
.whatsapp-float{
    bottom: calc(18px + env(safe-area-inset-bottom));
    right: 18px;
}
.leboncoin-float{
    bottom: calc(88px + env(safe-area-inset-bottom));
    right: 18px;
}

    


/* === Premium contrast fixes (trust strip) === */
.trust-strip-section{
  background: radial-gradient(1200px 300px at 50% 0%, rgba(255,0,0,0.10), rgba(0,0,0,0) 60%),
              linear-gradient(180deg, rgba(0,0,0,0.55), rgba(0,0,0,0.35));
  border-top: 1px solid rgba(255,255,255,0.06);
  border-bottom: 1px solid rgba(255,255,255,0.06);
  backdrop-filter: blur(10px);
}
.trust-strip{ gap: 26px; }
.trust-text{
  color: rgba(255,255,255,0.86) !important;
  font-weight: 600;
  letter-spacing: .2px;
  text-shadow: 0 1px 12px rgba(0,0,0,0.45);
}
/* make icons a touch more premium */
.trust-icon{
  background: rgba(255,255,255,0.96);
  border: 1px solid rgba(255,255,255,0.65);
  box-shadow: 0 10px 26px rgba(0,0,0,0.25);
}


/* ==========================
   PREMIUM CENTER + CONTRAST FIX
   ========================== */
:root{
  --bg0:#050507;
  --bg1:#0B0C10;
  --ink:#0E0F12;
  --paper:#FFFFFF;
  --text:rgba(255,255,255,.92);
  --text2:rgba(255,255,255,.78);
  --text3:rgba(255,255,255,.62);
}

body{
  background: var(--bg0);
  color: var(--text);
}

/* Global centered layout */
.container,
.section-inner,
.header-inner{
  max-width: 1400px;
  margin-left: auto;
  margin-right: auto;
}

section{ position: relative; z-index: 1; }
header{ z-index: 1000; }

/* Make sure any "light" surfaces keep dark text */
.payment-card,
.light-card,
.card-light,
.white-card{
  color: var(--ink);
}

/* Vehicle cards have dark glass backgrounds - keep text white */
.vehicle-card{
  color: white;
  background: linear-gradient(180deg, rgba(255,255,255,0.10), rgba(255,255,255,0.05)) !important;
  border: 1px solid rgba(255,255,255,0.12) !important;
}
.vehicle-card .vehicle-title{
  color: white !important;
}
.vehicle-card .vehicle-brand{
  color: rgba(255,255,255,0.80) !important;
}
/* Vehicle info area (old structure) must also be dark */
.vehicle-info{
  background: transparent;
  color: white;
}
.vehicle-specs{
  border-top-color: rgba(255,255,255,0.12) !important;
}
.spec-label{ color: rgba(255,255,255,0.55) !important; }
.spec-value{ color: white !important; }
/* Vehicle image placeholder */
.vehicle-image{
  background: #0b0b0b !important;
}
/* Service cards dark */
.service-card{
  background: linear-gradient(180deg, rgba(255,255,255,0.08), rgba(255,255,255,0.04)) !important;
  border: 1px solid rgba(255,255,255,0.10) !important;
  color: rgba(255,255,255,0.90);
}
.service-card h3, .service-card .service-title{ color: white !important; }
.service-card p, .service-card .service-desc{ color: rgba(255,255,255,0.75) !important; }
/* Mini vehicle strip (home page) dark */
.mini-vehicle{
  background: linear-gradient(180deg, rgba(255,255,255,0.08), rgba(255,255,255,0.04)) !important;
  border: 1px solid rgba(255,255,255,0.10) !important;
}
.mini-vehicle .img{ background: #0b0b0b !important; }
.mini-vehicle .info{ color: rgba(255,255,255,0.90); }
.mini-vehicle .name{ color: white !important; }
.mini-vehicle .meta, .mini-vehicle .chips{ color: rgba(255,255,255,0.65) !important; }
/* Trust icons */
.trust-icon{
  background: rgba(255,255,255,0.10) !important;
  border-color: rgba(255,255,255,0.12) !important;
  color: white !important;
}
.trust-text{ color: rgba(255,255,255,0.90) !important; }
/* Empty state */
.empty-state{
  background: rgba(255,255,255,0.04) !important;
}
.empty-state h3{ color: white !important; }

/* Vehicle grid centered */
.vehicles-grid{
  max-width: 1400px;
  margin: 0 auto;
  justify-content: center;
}

/* TRUST strip + guarantee banner readable on dark honeycomb */
.trust-strip{ color: var(--text); }
.trust-text{ color: var(--text2) !important; }

.guarantee-banner{
  border: 1px solid rgba(255,255,255,0.10);
  background: linear-gradient(135deg, rgba(10,10,12,0.72), rgba(10,10,12,0.45));
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  color: var(--text);
  box-shadow: 0 18px 50px rgba(0,0,0,0.45);
}
.guarantee-banner h2,
.guarantee-banner h3{ color: var(--text); }
.guarantee-banner p{ color: var(--text2); }

/* Fix invisible text cases (forced transparency / blend) */
*[style*="color: transparent"],
*[style*="opacity: 0"]{
  opacity: 1 !important;
}
.no-blend, .blend-fix{ mix-blend-mode: normal !important; }

/* Any white block should never inherit white text */
.payment-card{ background: var(--paper); }
.payment-card p{ color: #6A6A6A; }
.payment-card strong{ color: var(--ink); }
.payment-item{ color: var(--ink); }

/* Keep section titles readable */
.section-title{ color: var(--text); }
.section-subtitle{ color: var(--text2); }

/* Mobile: keep everything centered & clean */
@media (max-width: 768px){
  .vehicles-grid{ padding-left: 4%; padding-right: 4%; }
  .guarantee-banner{ padding: 1.4rem; grid-template-columns: 1fr; }
}


/* ================================================
   MOBILE FIRST — DSG AUTO — iPhone & Android
   ================================================ */

/* ------- HAMBURGER BUTTON ------- */
.mob-burger{
  display: none;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  width: 44px;
  height: 44px;
  border-radius: 12px;
  background: rgba(255,255,255,0.08);
  border: 1px solid rgba(255,255,255,0.14);
  cursor: pointer;
  gap: 5px;
  flex-shrink: 0;
  -webkit-tap-highlight-color: transparent;
}
.mob-burger span{
  display: block;
  width: 22px;
  height: 2px;
  background: rgba(255,255,255,0.90);
  border-radius: 2px;
  transition: all .25s ease;
  transform-origin: center;
}
.mob-burger.open span:nth-child(1){ transform: translateY(7px) rotate(45deg); }
.mob-burger.open span:nth-child(2){ opacity: 0; transform: scaleX(0); }
.mob-burger.open span:nth-child(3){ transform: translateY(-7px) rotate(-45deg); }

/* ------- MOBILE DRAWER NAV ------- */
.mob-nav-icons{
  display:flex;
  gap:14px;
  align-items:center;
}
.mob-nav-lbc{
  display:flex;
  align-items:center;
  justify-content:center;
  width:44px;
  height:44px;
  border-radius:50%;
  background:rgba(255,110,20,0.15);
  transition:background 0.2s;
}
.mob-nav-lbc:hover{
  background:rgba(255,110,20,0.3);
}
.mob-nav-wa{
  display:flex;
  align-items:center;
  justify-content:center;
  width:44px;
  height:44px;
  border-radius:50%;
  background:rgba(37,211,102,0.15);
  transition:background 0.2s;
}
.mob-nav-wa:hover{
  background:rgba(37,211,102,0.3);
}
.mob-nav-drawer{
  display: none;
  position: fixed;
  top: 0; left: 0; right: 0;
  padding-top: 70px; /* will adjust */
  background: rgba(7,7,7,0.97);
  backdrop-filter: blur(22px);
  -webkit-backdrop-filter: blur(22px);
  border-bottom: 1px solid rgba(255,255,255,0.10);
  z-index: 998;
  transform: translateY(-110%);
  transition: transform .32s cubic-bezier(.4,0,.2,1);
}
.mob-nav-drawer.open{
  transform: translateY(0);
}
.mob-nav-links{
  display: flex;
  flex-direction: column;
  padding: 1.2rem 1.2rem 1.2rem;
  gap: 6px;
}
.mob-nav-link{
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 14px 18px;
  border-radius: 14px;
  color: rgba(255,255,255,0.88);
  text-decoration: none;
  font-size: 1rem;
  font-weight: 600;
  letter-spacing: .4px;
  transition: background .18s, color .18s;
  -webkit-tap-highlight-color: transparent;
}
.mob-nav-link:active,
.mob-nav-link.active{
  background: rgba(212,0,0,0.18);
  color: #ff4040;
}
.mob-nav-footer{
  display: flex;
  gap: 10px;
  padding: 12px 1.2rem;
  border-top: 1px solid rgba(255,255,255,0.07);
}
.mob-nav-call{
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 13px;
  background: #D40000;
  border-radius: 14px;
  color: white;
  text-decoration: none;
  font-weight: 700;
  font-size: .95rem;
}
.mob-nav-wa{
  width: 50px;
  height: 50px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: #25D366;
  border-radius: 14px;
  font-size: 1.5rem;
  text-decoration: none;
}

/* ------- BOTTOM TAB BAR (iPhone style) ------- */
.mob-tab-bar{
  display: none;
  position: fixed;
  bottom: 0; left: 0; right: 0;
  background: rgba(10,10,12,0.95);
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
  border-top: 1px solid rgba(255,255,255,0.10);
  z-index: 997;
  padding-bottom: env(safe-area-inset-bottom);
  padding-bottom: max(env(safe-area-inset-bottom), 8px);
}
.mob-tab-inner{
  display: flex;
  align-items: stretch;
}
.mob-tab{
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 10px 4px;
  gap: 4px;
  color: rgba(255,255,255,0.45);
  text-decoration: none;
  font-size: 0.62rem;
  font-weight: 600;
  letter-spacing: .3px;
  text-transform: uppercase;
  transition: color .18s;
  -webkit-tap-highlight-color: transparent;
  cursor: pointer;
  border: none;
  background: transparent;
  font-family: inherit;
}
.mob-tab svg{ width: 22px; height: 22px; margin-bottom: 1px; }
.mob-tab.active{ color: #D40000; }
.mob-tab-call{
  background: #D40000;
  color: white;
  border-radius: 14px 14px 0 0;
  margin: 4px 6px 0;
  padding: 8px 4px;
  flex: 1.3;
}
.mob-tab-call.active{ color: white; }

@media (max-width: 768px){

  /* ----- Header compact ----- */
  .header-top{ display: none !important; }

  .header-main{
    flex-direction: row !important;
    flex-wrap: nowrap !important;
    justify-content: space-between !important;
    align-items: center !important;
    padding: 10px 16px !important;
    gap: 0 !important;
  }

  /* Logo centré */
  .logo{
    position: absolute;
    left: 50%;
    transform: translateX(-50%);
    height: 38px !important;
    flex: none !important;
    display: flex !important;
  }
  .logo img{ height: 38px !important; width: auto !important; }

  /* Cache nav desktop et CTAs */
  .top-nav, .cta-annonces, .cta-phone{ display: none !important; }

  /* Affiche le burger */
  .mob-burger{ display: flex !important; }

  /* Affiche le drawer */
  .mob-nav-drawer{ display: block; }

  /* Affiche tab bar */
  .mob-tab-bar{ display: block; }

  /* ----- Hero: margin pour header 60px ----- */
  .hero{ margin-top: 60px !important; }
  
  /* ----- Body padding pour tab bar (~65px) + safe area ----- */
  body{ padding-bottom: calc(65px + env(safe-area-inset-bottom)) !important; }

  /* Cache les flottants desktop (remplacés par tab bar) */
  .whatsapp-float, .leboncoin-float{ display: none !important; }

  /* ----- Sections padding ----- */
  section{ padding-left: 0 !important; padding-right: 0 !important; }
  section > *:not(.hero){ padding-left: 16px; padding-right: 16px; }

  /* ----- Hero responsive ----- */
  .hero{ height: auto !important; min-height: 60vh; padding: 3rem 1.5rem; }
  .hero h1{ font-size: 2.6rem !important; letter-spacing: 1px !important; }
  .hero p{ font-size: 1rem !important; margin-bottom: 1.6rem !important; }
  .hero-cta{ padding: .95rem 2rem !important; font-size: .95rem !important; }

  /* ----- Titles ----- */
  .section-title{ font-size: 1.6rem !important; text-align: center; }
  .section-subtitle{ font-size: .9rem !important; text-align: center; }

  /* ----- Trust strip ----- */
  .trust-strip{
    flex-wrap: wrap;
    gap: 14px !important;
    padding: 1.2rem 16px;
    justify-content: center;
  }
  .trust-item{ flex: 1 1 130px; max-width: 160px; }

  /* ----- Vehicles grid ----- */
  .vehicles-grid{
    grid-template-columns: 1fr !important;
    gap: 16px !important;
    padding: 1rem 16px !important;
  }
  .vehicle-card{ border-radius: 18px !important; }
  .vehicle-media{ height: 200px !important; }

  /* ----- Mini vehicles ----- */
  .mini-vehicles-grid, .mini-grid{
    grid-template-columns: 1fr 1fr !important;
    gap: 10px !important;
    padding: 0 16px !important;
  }

  /* ----- Service cards ----- */
  .services-grid, .service-grid{
    grid-template-columns: 1fr !important;
    gap: 14px !important;
    padding: 0 16px !important;
  }
  .service-card{ padding: 1.4rem !important; }

  /* ----- Guarantee ----- */
  .guarantee-banner{
    grid-template-columns: 1fr !important;
    margin: 0 16px !important;
    padding: 1.4rem !important;
  }
  .guarantee-list{ padding: 1rem 14px !important; gap: 10px !important; }

  /* ----- Footer ----- */
  .footer-content{
    grid-template-columns: 1fr !important;
    gap: 2rem !important;
    text-align: center;
  }
  footer{ padding: 2.5rem 16px 1.5rem !important; }

  /* ----- Map ----- */
  .map-embed{ height: 280px !important; }

  /* ----- Contact section ----- */
  section[style*="background"]{ padding: 2.5rem 16px !important; }

  /* ----- Payment cards ----- */
  .payment-grid, .docs-box{
    margin: 1rem 16px !important;
    padding: 1.2rem !important;
  }

  /* ----- Page hero sections (Rachat, Reprog etc) ----- */
  .hero-content h1{ font-size: 2rem !important; }
  .hero-content p{ font-size: .9rem !important; }

  /* ----- Forms ----- */
  input, select, textarea{
    font-size: 16px !important; /* prevent iOS zoom */
  }

  /* ----- Tabs / filters ----- */
  .filter-tabs, .tabs{
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    flex-wrap: nowrap !important;
    padding-bottom: 4px;
    gap: 8px !important;
  }

  /* ----- Cards padding ----- */
  .page{ padding-top: 0; }
}

/* Small mobile (< 390px = iPhone SE) */
@media (max-width: 390px){
  .hero h1{ font-size: 2.1rem !important; }
  .mob-tab{ font-size: 0.55rem; }
  .mob-tab svg{ width: 20px; height: 20px; }
}

/* Landscape mobile */
@media (max-width: 768px) and (orientation: landscape){
  .hero{ min-height: 50vh; }
  .mob-nav-drawer{ padding-top: 60px; }
}

/* ================================================
   TABLETTE / iPad — 769px à 1199px
   Optimisé pour : iPad Mini, iPad Air, iPad Pro
   NE TOUCHE PAS au mobile (<769px) ni au desktop (>1199px)
   ================================================ */
@media (min-width: 769px) and (max-width: 1199px) {

  /* Header : compact et bien structuré */
  .header-top {
    padding: 0.4rem 3% !important;
    font-size: 0.8rem !important;
  }
  .header-main {
    padding: 0.8rem 3% !important;
    flex-wrap: nowrap;
    gap: 0.6rem;
    justify-content: space-between;
    align-items: center;
  }

  /* Logo adapté tablette */
  .logo {
    height: 36px !important;
    flex: 0 0 auto !important;
    display: flex !important;
    justify-content: flex-start !important;
  }

  /* Nav pills scrollable */
  .top-nav {
    flex: 1 1 auto;
    min-width: 0;
    display: block !important;
  }
  .nav-pills {
    gap: 3px !important;
    flex-wrap: nowrap;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
    padding-bottom: 2px;
    justify-content: flex-start;
  }
  .nav-pills::-webkit-scrollbar { display: none; }
  .nav-pill {
    font-size: 0.75rem !important;
    padding: 0.4rem 0.8rem !important;
    white-space: nowrap;
    border-radius: 20px !important;
  }

  /* CTA buttons compacts */
  .cta-annonces {
    font-size: 0.78rem !important;
    padding: 0.55rem 0.9rem !important;
    white-space: nowrap;
  }
  .cta-phone {
    font-size: 0.78rem !important;
    padding: 0.55rem 0.9rem !important;
    white-space: nowrap;
  }
  .cta-phone-chip { font-size: 0.78rem !important; }

  /* Hero */
  .hero { margin-top: 88px; height: 55vh; }
  .hero h1 { font-size: 2.8rem !important; }
  .hero p { font-size: 1.05rem !important; }

  /* Sections */
  section { padding: 4rem 4% !important; }

  /* Grille services : 2 colonnes */
  .services-grid {
    grid-template-columns: repeat(2, 1fr) !important;
    gap: 1.4rem !important;
  }

  /* Grille véhicules : 2 colonnes */
  .vehicles-grid {
    grid-template-columns: repeat(2, 1fr) !important;
    gap: 1.5rem !important;
    padding: 0 1% !important;
  }

  /* Guarantee banner */
  .guarantee-banner {
    grid-template-columns: 1.1fr 1fr !important;
    gap: 1.5rem !important;
    margin: 0 1% !important;
    padding: 2rem !important;
  }

  /* Footer */
  .footer-content {
    grid-template-columns: repeat(2, 1fr) !important;
    gap: 2rem !important;
  }

  /* Trust strip */
  .trust-strip { gap: 14px !important; flex-wrap: wrap; }
  .trust-item { flex: 1 1 140px !important; }

  /* Map */
  .map-embed { height: 380px !important; }

  /* Bottom tab bar masqué sur tablette */
  .mob-tab-bar { display: none !important; }
  /* Burger masqué, nav header visible */
  .mob-burger { display: none !important; }
}

/* iPad paysage large (1024–1199px) : 3 colonnes */
@media (min-width: 1024px) and (max-width: 1199px) {
  .vehicles-grid { grid-template-columns: repeat(3, 1fr) !important; }
  .services-grid { grid-template-columns: repeat(3, 1fr) !important; }
  .footer-content { grid-template-columns: repeat(4, 1fr) !important; }
}

/* ═══════════════════════════════
   BADGE NOUVEAU
═══════════════════════════════ */
.badge-new {
  background: linear-gradient(135deg, #00C853, #007B33);
  color: white;
  font-weight: 900;
  font-size: 0.68rem;
  letter-spacing: 1.5px;
  text-transform: uppercase;
  padding: 4px 10px;
  border-radius: 999px;
  border: 1px solid rgba(255,255,255,0.20);
  animation: pulse-green 2s infinite;
}
@keyframes pulse-green {
  0%,100% { box-shadow: 0 0 0 0 rgba(0,200,83,0.4); }
  50% { box-shadow: 0 0 0 6px rgba(0,200,83,0); }
}

/* ═══════════════════════════════
   COMPTEUR DE VUES
═══════════════════════════════ */
.vehicle-views {
  position: absolute;
  bottom: 14px;
  right: 14px;
  z-index: 3;
  display: flex;
  align-items: center;
  gap: 5px;
  background: rgba(0,0,0,0.55);
  backdrop-filter: blur(8px);
  border: 1px solid rgba(255,255,255,0.10);
  border-radius: 999px;
  padding: 4px 10px;
  font-size: 0.72rem;
  font-weight: 700;
  color: rgba(255,255,255,0.85);
}
.vehicle-views svg { width: 13px; height: 13px; opacity: 0.75; }

/* ═══════════════════════════════
   BOUTON "JE SUIS INTÉRESSÉ"
═══════════════════════════════ */
.btn-interest {
  height: 42px;
  border-radius: 999px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0 14px;
  text-decoration: none;
  font-weight: 900;
  letter-spacing: .5px;
  font-size: .82rem;
  border: 1px solid rgba(255,165,0,0.35);
  background: rgba(255,140,0,0.12);
  color: #FFAB40;
  cursor: pointer;
  font-family: inherit;
  transition: all .18s ease;
  flex: 1;
  white-space: nowrap;
}
.btn-interest:hover {
  background: rgba(255,140,0,0.22);
  transform: translateY(-1px);
}
@media (hover: none) {
  .btn-interest:active { transform: scale(0.98); }
}

/* ═══════════════════════════════
   MODAL INTÉRÊT
═══════════════════════════════ */
.interest-overlay {
  position: fixed;
  inset: 0;
  background: rgba(0,0,0,0.72);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
  z-index: 5000;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 1rem;
  opacity: 0;
  pointer-events: none;
  transition: opacity .25s;
}
.interest-overlay.open {
  opacity: 1;
  pointer-events: all;
}
.interest-modal {
  background: #0f0f11;
  border: 1px solid rgba(255,255,255,0.12);
  border-radius: 22px;
  padding: 2rem 1.75rem 1.75rem;
  max-width: 400px;
  width: 100%;
  position: relative;
  transform: scale(0.94) translateY(12px);
  transition: transform .25s cubic-bezier(.34,1.56,.64,1);
  box-shadow: 0 30px 80px rgba(0,0,0,0.65);
}
.interest-overlay.open .interest-modal {
  transform: scale(1) translateY(0);
}
.interest-close {
  position: absolute;
  top: 1rem; right: 1rem;
  background: rgba(255,255,255,0.08);
  border: 1px solid rgba(255,255,255,0.10);
  color: rgba(255,255,255,0.7);
  width: 32px; height: 32px;
  border-radius: 50%;
  cursor: pointer;
  font-size: 1.1rem;
  display: flex; align-items: center; justify-content: center;
  transition: background .18s;
}
.interest-close:hover { background: rgba(255,255,255,0.15); }
.interest-icon { font-size: 2.2rem; text-align: center; margin-bottom: .75rem; }
.interest-title {
  font-family: 'Manrope','Inter',sans-serif;
  font-size: 1.25rem;
  font-weight: 800;
  text-align: center;
  color: white;
  margin-bottom: .3rem;
}
.interest-subtitle {
  font-size: .85rem;
  color: rgba(255,255,255,0.55);
  text-align: center;
  margin-bottom: 1.25rem;
}
.interest-form { display: flex; flex-direction: column; gap: .75rem; }
.interest-input {
  background: rgba(255,255,255,0.06);
  border: 1px solid rgba(255,255,255,0.10);
  border-radius: 12px;
  color: white;
  font-family: inherit;
  font-size: 0.95rem;
  padding: 0.75rem 1rem;
  width: 100%;
  transition: border-color .18s;
}
.interest-input:focus {
  outline: none;
  border-color: rgba(220,0,0,0.6);
}
.interest-input option { background: #1a1a1a; }
.interest-actions { display: flex; gap: .6rem; margin-top: .25rem; }
.interest-btn-wa, .interest-btn-call {
  flex: 1;
  height: 46px;
  border-radius: 12px;
  display: flex; align-items: center; justify-content: center;
  text-decoration: none;
  font-weight: 800;
  font-size: .88rem;
  letter-spacing: .3px;
  transition: all .18s;
}
.interest-btn-wa {
  background: #25D366;
  color: white;
}
.interest-btn-wa:hover { background: #1dab53; transform: translateY(-1px); }
.interest-btn-call {
  background: linear-gradient(180deg,rgba(212,0,0,0.95),rgba(168,0,0,0.85));
  color: white;
  box-shadow: 0 10px 30px rgba(212,0,0,0.20);
}
.interest-btn-call:hover { transform: translateY(-1px); }

/* ═══════════════════════════════
   MODAL FICHE VÉHICULE
═══════════════════════════════ */
.vmodal-overlay {
  position: fixed;
  inset: 0;
  background: rgba(0,0,0,0.75);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
  z-index: 5200;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 1.25rem;
  opacity: 0;
  pointer-events: none;
  transition: opacity .25s;
}
.vmodal-overlay.open { opacity: 1; pointer-events: all; }
.vmodal {
  background: #0E0E0E;
  border: 1px solid rgba(255,255,255,0.12);
  border-radius: 18px;
  width: 100%;
  max-width: 600px;
  max-height: 92vh;
  overflow-y: auto;
  position: relative;
  transform: scale(0.95) translateY(14px);
  transition: transform .25s cubic-bezier(.34,1.56,.64,1);
  box-shadow: 0 30px 80px rgba(0,0,0,0.7);
}
.vmodal-overlay.open .vmodal { transform: scale(1) translateY(0); }

.vmodal-gallery { position: relative; }
.vmodal-main {
  width: 100%;
  aspect-ratio: 16/10;
  background-size: cover;
  background-position: center;
  background-color: #1a1a1a;
}
.vmodal-main.placeholder {
  display: flex; align-items: center; justify-content: center;
  font-size: 4rem; color: rgba(255,255,255,0.2);
}
.vmodal-nav {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  width: 38px; height: 38px;
  border-radius: 50%;
  border: none;
  background: rgba(0,0,0,0.55);
  color: #fff;
  font-size: 1.3rem;
  cursor: pointer;
  display: flex; align-items: center; justify-content: center;
  transition: background .18s;
}
.vmodal-nav:hover { background: rgba(0,0,0,0.8); }
.vmodal-nav.prev { left: 10px; }
.vmodal-nav.next { right: 10px; }
.vmodal-counter {
  position: absolute;
  bottom: 12px; left: 12px;
  background: rgba(0,0,0,0.6);
  color: #fff;
  font-size: .72rem;
  font-weight: 600;
  padding: 4px 10px;
  border-radius: 20px;
}
.vmodal-badges {
  position: absolute;
  top: 12px; left: 12px;
  display: flex; gap: 8px;
}
.vmodal-badge {
  font-size: .68rem;
  font-weight: 700;
  padding: 5px 11px;
  border-radius: 6px;
  letter-spacing: .4px;
}
.vmodal-badge.dispo { background: #DC0000; color: #fff; }
.vmodal-badge.sold { background: #555; color: #fff; }
.vmodal-badge.dark { background: rgba(0,0,0,0.6); color: rgba(255,255,255,0.92); }
.vmodal-close {
  position: absolute;
  top: 12px; right: 12px;
  width: 34px; height: 34px;
  border-radius: 50%;
  border: none;
  background: rgba(0,0,0,0.6);
  color: #fff;
  font-size: 1.2rem;
  cursor: pointer;
  display: flex; align-items: center; justify-content: center;
  z-index: 2;
}
.vmodal-close:hover { background: rgba(0,0,0,0.85); }
.vmodal-fav {
  position: absolute;
  bottom: 12px; right: 12px;
  width: 40px; height: 40px;
  border-radius: 50%;
  border: 1px solid rgba(255,255,255,0.18);
  background: rgba(0,0,0,0.5);
  color: rgba(255,255,255,0.6);
  font-size: 1.1rem;
  cursor: pointer;
  display: flex; align-items: center; justify-content: center;
  transition: all .15s;
}
.vmodal-fav.active { background: rgba(220,0,0,0.25); border-color: rgba(220,0,0,0.5); color: #DC0000; }

.vmodal-thumbs {
  display: flex; gap: 6px;
  padding: 10px 12px 0;
  overflow-x: auto;
}
.vmodal-thumb {
  width: 58px; height: 42px;
  border-radius: 6px;
  border: 1px solid rgba(255,255,255,0.12);
  background-size: cover;
  background-position: center;
  flex-shrink: 0;
  cursor: pointer;
  opacity: .6;
  transition: opacity .15s, border-color .15s;
}
.vmodal-thumb.active { border: 2px solid #DC0000; opacity: 1; }

.vmodal-body { padding: 16px 20px 20px; }
.vmodal-head {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 12px;
}
.vmodal-brand {
  font-size: .72rem;
  color: rgba(255,255,255,0.5);
  letter-spacing: .5px;
  text-transform: uppercase;
  margin-bottom: 2px;
}
.vmodal-title {
  font-family: 'Manrope','Inter',sans-serif;
  font-size: 1.15rem;
  font-weight: 700;
  color: #fff;
  line-height: 1.25;
  margin: 0;
}
.vmodal-price {
  font-size: 1.45rem;
  font-weight: 800;
  color: #DC0000;
  white-space: nowrap;
}
.vmodal-specs {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 8px;
  margin: 18px 0;
}
.vmodal-spec {
  background: rgba(255,255,255,0.05);
  border-radius: 8px;
  padding: 11px 6px;
  text-align: center;
}
.vmodal-spec .v { font-size: .9rem; font-weight: 700; color: #fff; margin-top: 4px; }
.vmodal-spec .l { font-size: .68rem; color: rgba(255,255,255,0.45); margin-top: 1px; }
.vmodal-extra {
  display: flex; flex-wrap: wrap; gap: 8px;
  margin-bottom: 16px;
}
.vmodal-extra .pill {
  background: rgba(255,255,255,0.04);
  border-radius: 8px;
  padding: 8px 12px;
  font-size: .8rem;
  color: rgba(255,255,255,0.7);
}
.vmodal-desc {
  font-size: .85rem;
  color: rgba(255,255,255,0.6);
  line-height: 1.6;
  background: rgba(255,255,255,0.03);
  border-radius: 10px;
  padding: 12px 14px;
  margin-bottom: 16px;
  white-space: pre-line;
}
.vmodal-desc .desc-text {
  display: -webkit-box;
  -webkit-line-clamp: 4;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.vmodal-desc.expanded .desc-text {
  display: block;
  -webkit-line-clamp: unset;
  overflow: visible;
}
.vmodal-desc .desc-toggle {
  display: inline-block;
  margin-top: 8px;
  background: none;
  border: none;
  color: #DC0000;
  font-weight: 700;
  font-size: .82rem;
  cursor: pointer;
  padding: 0;
  font-family: inherit;
}
.vmodal-desc .desc-toggle:hover { text-decoration: underline; }
.vmodal-actions {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
}
.vmodal-btn {
  display: flex; align-items: center; justify-content: center;
  gap: 7px;
  text-decoration: none;
  font-size: .92rem;
  font-weight: 700;
  padding: 13px;
  border-radius: 10px;
  border: none;
  cursor: pointer;
  font-family: inherit;
}
.vmodal-btn.red { background: #DC0000; color: #fff; }
.vmodal-btn.red:hover { background: #b00000; }
.vmodal-btn.wa { background: rgba(255,255,255,0.08); color: #fff; border: 1px solid rgba(255,255,255,0.12); }
.vmodal-btn.wa:hover { background: rgba(255,255,255,0.14); }
.vehicle-card { cursor: pointer; }
@media (max-width: 480px) {
  .vmodal-specs { grid-template-columns: repeat(2, 1fr); }
  .vmodal-title { font-size: 1.05rem; }
  .vmodal-price { font-size: 1.25rem; }
}

/* ═══════════════════════════════
   FILTRES VÉHICULES
═══════════════════════════════ */
/* ═══ SEARCH + SORT BAR ═══ */
.search-sort-bar {
  display: flex;
  gap: .75rem;
  align-items: center;
  max-width: 1400px;
  margin: 0 auto 1rem;
}
.search-wrap {
  flex: 1;
  position: relative;
  display: flex;
  align-items: center;
}
.search-icon {
  position: absolute;
  left: 14px;
  width: 17px;
  height: 17px;
  color: rgba(255,255,255,0.35);
  pointer-events: none;
}
.vehicle-search {
  width: 100%;
  height: 42px;
  padding: 0 40px 0 40px;
  border-radius: 999px;
  border: 1px solid rgba(255,255,255,0.12);
  background: rgba(255,255,255,0.06);
  color: white;
  font-family: inherit;
  font-size: .88rem;
  font-weight: 500;
  outline: none;
  transition: border-color .2s, background .2s;
}
.vehicle-search::placeholder { color: rgba(255,255,255,0.35); }
.vehicle-search:focus { border-color: rgba(220,0,0,0.5); background: rgba(255,255,255,0.09); }
.search-clear {
  position: absolute;
  right: 12px;
  background: none;
  border: none;
  color: rgba(255,255,255,0.4);
  font-size: .85rem;
  cursor: pointer;
  padding: 4px;
  line-height: 1;
}
.search-clear:hover { color: white; }
.sort-select {
  height: 42px;
  padding: 0 14px;
  border-radius: 999px;
  border: 1px solid rgba(255,255,255,0.12);
  background: rgba(255,255,255,0.06);
  color: white;
  font-family: inherit;
  font-size: .82rem;
  font-weight: 700;
  outline: none;
  cursor: pointer;
  white-space: nowrap;
  flex-shrink: 0;
}
.sort-select option { background: #1a1a1a; color: white; }

/* ═══ EXTRA FILTERS (km + year) ═══ */
.filter-row-extra {
  display: flex;
  flex-wrap: wrap;
  gap: 1.25rem;
  margin-top: .75rem;
  padding-top: .75rem;
  border-top: 1px solid rgba(255,255,255,0.07);
}

/* ═══ BACK TO TOP ═══ */
#backToTop {
  position: fixed;
  bottom: 90px;
  right: 18px;
  width: 42px;
  height: 42px;
  border-radius: 50%;
  background: linear-gradient(135deg,#DC0000,#B00000);
  border: none;
  color: white;
  font-size: 1.1rem;
  cursor: pointer;
  box-shadow: 0 4px 18px rgba(220,0,0,0.35);
  display: flex;
  align-items: center;
  justify-content: center;
  opacity: 0;
  pointer-events: none;
  transition: opacity .25s, transform .25s;
  z-index: 800;
}
#backToTop.visible { opacity: 1; pointer-events: auto; }
#backToTop:hover { transform: scale(1.1); }

/* ═══ FAVORITES ═══ */
.btn-fav {
  width: 36px;
  height: 36px;
  border-radius: 50%;
  border: 1px solid rgba(255,255,255,0.12);
  background: rgba(255,255,255,0.06);
  color: rgba(255,255,255,0.5);
  font-size: 1rem;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: all .15s;
  flex-shrink: 0;
}
.btn-fav.active { background: rgba(220,0,0,0.18); border-color: rgba(220,0,0,0.4); color: #DC0000; }
.btn-fav:hover { background: rgba(255,255,255,0.1); color: white; }

/* Favoris tab */
.fav-tab {
  display: none;
  position: fixed;
  top: 50%;
  right: 0;
  transform: translateY(-50%) translateX(100%);
  background: #DC0000;
  color: white;
  font-size: .7rem;
  font-weight: 800;
  writing-mode: vertical-rl;
  padding: 10px 6px;
  border-radius: 8px 0 0 8px;
  cursor: pointer;
  z-index: 800;
  transition: transform .3s;
  letter-spacing: 1px;
}
.fav-tab.has-favs { display: flex; transform: translateY(-50%) translateX(0); }

/* Sur mobile : on garde la languette latérale à droite (comme desktop) */
@media (max-width: 768px) {
  .fav-tab { font-size: .65rem; padding: 9px 5px; }
}

/* Share button */
.btn-share {
  width: 36px;
  height: 36px;
  border-radius: 50%;
  border: 1px solid rgba(255,255,255,0.12);
  background: rgba(255,255,255,0.06);
  color: rgba(255,255,255,0.5);
  font-size: .95rem;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: all .15s;
  flex-shrink: 0;
}
.btn-share:hover { background: rgba(255,255,255,0.1); color: white; }

.filters-bar {
  max-width: 1400px;
  margin: 0 auto 2rem;
  background: linear-gradient(180deg,rgba(255,255,255,0.07),rgba(255,255,255,0.03));
  border: 1px solid rgba(255,255,255,0.10);
  border-radius: 18px;
  padding: 1.25rem 1.5rem;
}
.filters-row {
  display: flex;
  flex-wrap: wrap;
  gap: 1.25rem;
  align-items: flex-start;
}
.filter-group { display: flex; flex-direction: column; gap: .5rem; }
.filter-group-price { flex: 1; min-width: 180px; }
.filter-label {
  font-size: .72rem;
  font-weight: 700;
  letter-spacing: 1px;
  text-transform: uppercase;
  color: rgba(255,255,255,0.5);
}
.filter-label strong { color: #FF6B00; font-weight: 800; }
.filter-chips { display: flex; flex-wrap: wrap; gap: .4rem; justify-content: flex-start; }
.fchip {
  height: 34px;
  padding: 0 14px;
  border-radius: 999px;
  border: 1px solid rgba(255,255,255,0.10);
  background: rgba(255,255,255,0.05);
  color: rgba(255,255,255,0.70);
  font-weight: 700;
  font-size: .78rem;
  cursor: pointer;
  font-family: inherit;
  transition: all .15s;
  white-space: nowrap;
}
.fchip:hover { background: rgba(255,255,255,0.10); color: white; }
.fchip.active {
  background: linear-gradient(135deg,rgba(212,0,0,0.85),rgba(168,0,0,0.75));
  border-color: rgba(255,255,255,0.12);
  color: white;
  box-shadow: 0 6px 20px rgba(212,0,0,0.20);
}
.price-slider {
  -webkit-appearance: none;
  appearance: none;
  width: 100%;
  height: 4px;
  border-radius: 2px;
  background: rgba(255,255,255,0.15);
  outline: none;
  padding: 0;
  margin: 4px 0;
}
.price-slider::-webkit-slider-thumb {
  -webkit-appearance: none;
  appearance: none;
  width: 16px; height: 16px;
  border-radius: 50%;
  background: #DC0000;
  cursor: pointer;
  border: 2px solid white;
  box-shadow: 0 2px 8px rgba(220,0,0,0.4);
}
.price-slider::-moz-range-thumb {
  width: 16px; height: 16px;
  border-radius: 50%;
  background: #DC0000;
  cursor: pointer;
  border: 2px solid white;
}
.filter-reset {
  height: 34px;
  padding: 0 16px;
  border-radius: 999px;
  border: 1px solid rgba(255,255,255,0.10);
  background: none;
  color: rgba(255,255,255,0.45);
  font-size: .78rem;
  font-weight: 600;
  cursor: pointer;
  font-family: inherit;
  transition: all .15s;
  white-space: nowrap;
  align-self: flex-end;
}
.filter-reset:hover { color: white; border-color: rgba(255,255,255,0.25); }
.filters-count {
  margin-top: .75rem;
  font-size: .8rem;
  color: rgba(255,255,255,0.45);
  font-weight: 600;
}
.vehicle-card.hidden-by-filter { display: none !important; }

/* ── Active chips bar ── */
.active-chips-bar {
  display: flex;
  flex-wrap: wrap;
  gap: .45rem;
  margin-top: .8rem;
  padding-top: .8rem;
  border-top: 1px solid rgba(255,255,255,0.07);
}
.active-chip {
  display: inline-flex;
  align-items: center;
  gap: .35rem;
  background: rgba(220,0,0,0.18);
  border: 1px solid rgba(220,0,0,0.45);
  color: #fff;
  border-radius: 999px;
  padding: .3rem .75rem;
  font-size: .8rem;
  font-weight: 600;
  cursor: pointer;
  transition: background .15s;
  user-select: none;
}
.active-chip:hover { background: rgba(220,0,0,0.35); }
.active-chip-x { opacity: .7; font-size: .75rem; }

/* ── Compteur animé ── */
@keyframes countPop {
  0%   { transform: scale(1); }
  40%  { transform: scale(1.35); color: var(--red); }
  100% { transform: scale(1); }
}
.count-pop { animation: countPop .35s ease; }

/* ── Fade-in cartes à l'affichage ── */
@keyframes cardIn {
  from { opacity: 0; transform: translateY(12px); }
  to   { opacity: 1; transform: translateY(0); }
}
#vehiclesGrid .vehicle-card {
  animation: cardIn .3s ease both;
}

/* ── Filters toggle button (mobile) ── */
.filters-toggle-btn {
  display: none;
  width: 100%;
  align-items: center;
  gap: .5rem;
  background: rgba(255,255,255,0.06);
  border: 1px solid rgba(255,255,255,0.14);
  color: #fff;
  border-radius: 10px;
  padding: .75rem 1rem;
  font-size: .9rem;
  font-weight: 600;
  cursor: pointer;
  font-family: inherit;
  margin-bottom: .75rem;
  transition: background .15s;
}
.filters-toggle-btn:hover { background: rgba(255,255,255,0.1); }
.filters-badge {
  background: var(--red);
  color: #fff;
  border-radius: 999px;
  font-size: .7rem;
  padding: .1rem .45rem;
  font-weight: 700;
}
.filters-toggle-arrow { margin-left: auto; transition: transform .25s; }
.filters-toggle-btn.open .filters-toggle-arrow { transform: rotate(180deg); }

/* ── Filters panel (collapses on mobile) ── */
.filters-panel { display: block; }

@media (max-width: 768px) {
  .filters-toggle-btn { display: flex !important; }
  .filters-panel {
    overflow: hidden;
    max-height: 0;
    transition: max-height .35s ease;
  }
  .filters-panel.open { max-height: 600px; }
}

/* ═══════════════════════════════
   SECTION AVIS
═══════════════════════════════ */
.reviews-section {
  padding: 5rem 5%;
  background: radial-gradient(800px 400px at 50% 0%, rgba(255,215,0,0.04), transparent 70%),
              var(--bg1, #0B0C10);
}
.reviews-stars-summary {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 1.5rem;
  margin-bottom: 3rem;
}
.reviews-score {
  font-family: 'Manrope','Inter',sans-serif;
  font-size: 4rem;
  font-weight: 900;
  color: white;
  line-height: 1;
}
.stars-row {
  font-size: 1.6rem;
  color: #FFB800;
  line-height: 1;
  margin-bottom: .3rem;
}
.reviews-count { font-size: .85rem; color: rgba(255,255,255,0.5); font-weight: 500; }
.reviews-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(280px,1fr));
  gap: 1.25rem;
  max-width: 1400px;
  margin: 0 auto;
}
.review-card {
  background: linear-gradient(180deg,rgba(255,255,255,0.08),rgba(255,255,255,0.04));
  border: 1px solid rgba(255,255,255,0.10);
  border-radius: 18px;
  padding: 1.5rem;
  transition: border-color .2s, transform .2s;
}
.review-card:hover { border-color: rgba(255,215,0,0.20); transform: translateY(-3px); }
.review-header { display: flex; align-items: center; gap: .75rem; margin-bottom: 1rem; }
.review-avatar {
  width: 40px; height: 40px;
  border-radius: 50%;
  background: #DC0000;
  color: white;
  font-weight: 800;
  font-size: 1rem;
  display: flex; align-items: center; justify-content: center;
  flex-shrink: 0;
}
.review-name { font-weight: 700; font-size: .9rem; color: white; }
.review-stars { color: #FFB800; font-size: .85rem; margin-top: 2px; }
.review-text { font-size: .875rem; color: rgba(255,255,255,0.72); line-height: 1.7; margin-bottom: .75rem; font-style: italic; }
.review-date { font-size: .75rem; color: rgba(255,255,255,0.35); font-weight: 600; }
.review-card-cta {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  border: 1px dashed rgba(255,215,0,0.25) !important;
  background: rgba(255,215,0,0.04) !important;
}
.review-cta-icon { font-size: 2rem; margin-bottom: .75rem; }
.review-cta-text { font-size: .9rem; color: rgba(255,255,255,0.6); margin-bottom: 1rem; line-height: 1.5; }
.review-cta-btn {
  display: inline-block;
  background: linear-gradient(135deg,#FFB800,#FF8C00);
  color: #000;
  font-weight: 800;
  font-size: .82rem;
  padding: .65rem 1.25rem;
  border-radius: 999px;
  text-decoration: none;
  transition: transform .18s, box-shadow .18s;
}
.review-cta-btn:hover { transform: translateY(-2px); box-shadow: 0 8px 24px rgba(255,180,0,0.25); }

/* ═══════════════════════════════
   TOAST
═══════════════════════════════ */
.site-toast {
  position: fixed;
  bottom: 2rem;
  left: 50%;
  transform: translateX(-50%) translateY(80px);
  opacity: 0;
  background: #1a1a1e;
  border: 1px solid rgba(0,200,83,0.35);
  border-radius: 14px;
  padding: .85rem 1.5rem;
  font-size: .875rem;
  font-weight: 600;
  color: white;
  z-index: 6000;
  transition: all .3s cubic-bezier(.34,1.56,.64,1);
  white-space: nowrap;
  box-shadow: 0 10px 40px rgba(0,0,0,0.5);
  pointer-events: none;
}
.site-toast.show {
  opacity: 1;
  transform: translateX(-50%) translateY(0);
}

@media (max-width: 768px) {
  .filters-row { flex-direction: column; gap: .9rem; }
  .filter-group-price { width: 100%; }
  .reviews-section { padding: 3rem 5%; }
  .reviews-grid { grid-template-columns: 1fr; }
  .reviews-score { font-size: 3rem; }
  .interest-modal { padding: 1.5rem 1.25rem; }
}

/* ═══════════════════════════════
   FORMULAIRE RACHAT
═══════════════════════════════ */
.rachat-form-section {
  background: radial-gradient(800px 400px at 20% 0%, rgba(220,0,0,0.08), transparent 60%),
              var(--bg1, #0B0C10);
  padding: 5rem 5%;
}
.rachat-form-wrap {
  display: grid;
  grid-template-columns: 1fr 300px;
  gap: 2rem;
  max-width: 1000px;
  margin: 0 auto;
}
.rachat-form-card {
  background: linear-gradient(180deg,rgba(255,255,255,0.08),rgba(255,255,255,0.04));
  border: 1px solid rgba(255,255,255,0.10);
  border-radius: 22px;
  padding: 2rem;
}

/* Steps indicator */
.rachat-steps {
  display: flex;
  align-items: center;
  margin-bottom: 2rem;
}
.rachat-step {
  width: 32px; height: 32px;
  border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  font-weight: 800; font-size: .85rem;
  background: rgba(255,255,255,0.08);
  border: 2px solid rgba(255,255,255,0.12);
  color: rgba(255,255,255,0.4);
  flex-shrink: 0;
  transition: all .3s;
}
.rachat-step.active {
  background: var(--red, #DC0000);
  border-color: var(--red, #DC0000);
  color: white;
  box-shadow: 0 0 20px rgba(220,0,0,0.35);
}
.rachat-step.done {
  background: #059669;
  border-color: #059669;
  color: white;
}
.rachat-step-line {
  flex: 1;
  height: 2px;
  background: rgba(255,255,255,0.08);
  margin: 0 8px;
}

/* Step content */
.rachat-step-content { display: none; }
.rachat-step-content.active { display: block; }
.rachat-step-title {
  font-family: 'Manrope','Inter',sans-serif;
  font-size: 1.15rem;
  font-weight: 800;
  color: white;
  margin-bottom: 1.5rem;
}
.rachat-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 1rem;
  margin-bottom: 1rem;
}
.rachat-field { display: flex; flex-direction: column; gap: .4rem; margin-bottom: .75rem; }
.rachat-label {
  font-size: .75rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .8px;
  color: rgba(255,255,255,0.5);
}
.rachat-label .req { color: #DC0000; }
.rachat-input {
  background: rgba(255,255,255,0.06);
  border: 1px solid rgba(255,255,255,0.10);
  border-radius: 10px;
  color: white;
  font-family: inherit;
  font-size: .95rem;
  padding: .75rem 1rem;
  width: 100%;
  transition: border-color .18s;
}
.rachat-input:focus { outline: none; border-color: rgba(220,0,0,0.55); background: rgba(255,255,255,0.08); }
.rachat-input option { background: #1a1a1e; }
.rachat-input.error { border-color: rgba(220,0,0,0.7) !important; }

/* Radio état */
.rachat-radio-group { display: grid; grid-template-columns: 1fr 1fr; gap: .6rem; }
.rachat-radio {
  display: flex;
  flex-direction: column;
  gap: .2rem;
  background: rgba(255,255,255,0.05);
  border: 1px solid rgba(255,255,255,0.08);
  border-radius: 10px;
  padding: .75rem 1rem;
  cursor: pointer;
  transition: all .15s;
}
.rachat-radio:hover { background: rgba(255,255,255,0.09); border-color: rgba(255,255,255,0.14); }
.rachat-radio input { display: none; }
.rachat-radio span { font-weight: 700; font-size: .88rem; color: white; }
.rachat-radio small { font-size: .72rem; color: rgba(255,255,255,0.45); }
.rachat-radio:has(input:checked) {
  background: rgba(220,0,0,0.12);
  border-color: rgba(220,0,0,0.4);
}

/* Résumé */
.rachat-summary {
  background: rgba(0,200,83,0.08);
  border: 1px solid rgba(0,200,83,0.18);
  border-radius: 10px;
  padding: 1rem;
  font-size: .82rem;
  color: rgba(255,255,255,0.75);
  line-height: 1.8;
  margin-bottom: 1.25rem;
  display: none;
}
.rachat-summary.show { display: block; }

/* Buttons */
.rachat-next {
  width: 100%;
  padding: 1rem;
  background: linear-gradient(135deg, #DC0000, #A80000);
  color: white;
  border: none;
  border-radius: 12px;
  font-family: inherit;
  font-weight: 800;
  font-size: .95rem;
  cursor: pointer;
  letter-spacing: .5px;
  transition: all .18s;
  box-shadow: 0 8px 30px rgba(220,0,0,0.25);
}
.rachat-next:hover { transform: translateY(-2px); box-shadow: 0 12px 40px rgba(220,0,0,0.35); }
.rachat-back {
  padding: 1rem 1.5rem;
  background: rgba(255,255,255,0.06);
  color: rgba(255,255,255,0.7);
  border: 1px solid rgba(255,255,255,0.10);
  border-radius: 12px;
  font-family: inherit;
  font-weight: 700;
  font-size: .88rem;
  cursor: pointer;
  transition: all .18s;
  flex-shrink: 0;
}
.rachat-back:hover { background: rgba(255,255,255,0.10); color: white; }
.rachat-submit {
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: .6rem;
  padding: 1rem;
  background: #25D366;
  color: white;
  border: none;
  border-radius: 12px;
  font-family: inherit;
  font-weight: 800;
  font-size: .95rem;
  cursor: pointer;
  transition: all .18s;
  box-shadow: 0 8px 30px rgba(37,211,102,0.25);
}
.rachat-submit:hover { background: #1dab53; transform: translateY(-2px); }

/* Success */
.rachat-success-icon { font-size: 3rem; text-align: center; margin-bottom: .75rem; }

/* Info panel */
.rachat-info-panel { display: flex; flex-direction: column; gap: 1rem; }
.rachat-info-card {
  background: linear-gradient(180deg,rgba(255,255,255,0.07),rgba(255,255,255,0.03));
  border: 1px solid rgba(255,255,255,0.09);
  border-radius: 14px;
  padding: 1.1rem 1.25rem;
}
.rachat-info-icon { font-size: 1.5rem; margin-bottom: .35rem; }
.rachat-info-title { font-weight: 800; font-size: .9rem; color: white; margin-bottom: .25rem; }
.rachat-info-text { font-size: .78rem; color: rgba(255,255,255,0.5); line-height: 1.6; }
.rachat-contact-direct {
  background: rgba(220,0,0,0.08);
  border: 1px solid rgba(220,0,0,0.18);
  border-radius: 14px;
  padding: 1.1rem 1.25rem;
}
.rachat-tel, .rachat-wa {
  display: block;
  padding: .65rem 1rem;
  border-radius: 10px;
  text-decoration: none;
  font-weight: 700;
  font-size: .88rem;
  text-align: center;
  margin-top: .5rem;
  transition: all .18s;
}
.rachat-tel { background: linear-gradient(135deg,#DC0000,#A80000); color: white; }
.rachat-wa { background: #25D366; color: white; }
.rachat-tel:hover, .rachat-wa:hover { transform: translateY(-1px); }

@media (max-width: 768px) {
  .rachat-form-wrap { grid-template-columns: 1fr; }
  .rachat-info-panel { flex-direction: row; flex-wrap: wrap; }
  .rachat-info-card { flex: 1 1 140px; }
  .rachat-grid { grid-template-columns: 1fr; }
  .rachat-radio-group { grid-template-columns: 1fr 1fr; }
  .rachat-contact-direct { width: 100%; }
}



/* ===== HOTFIX UI - section paiements full dark ===== */
.payment-section{
  background: radial-gradient(900px 420px at 50% 0%, rgba(220,0,0,0.06), transparent 70%);
}
.payment-card,
.payment-card.payment-card-dark{
  background: linear-gradient(180deg, rgba(255,255,255,0.08), rgba(255,255,255,0.04)) !important;
  border: 1px solid rgba(255,255,255,0.10) !important;
  color: var(--text) !important;
  box-shadow: 0 18px 50px rgba(0,0,0,0.35) !important;
}
.payment-card h3,
.payment-card.payment-card-dark h3{
  color: #fff !important;
}
.payment-card p,
.payment-card.payment-card-dark p{
  color: rgba(255,255,255,0.78) !important;
}
.payment-card strong,
.payment-card.payment-card-dark strong,
.payment-item,
.payment-note,
.payment-card .logo-pill,
.payment-card .logo-mark{
  color: #fff !important;
}
.payment-item .pay-icon,
.payment-card .pay-icon{
  background: rgba(255,255,255,0.08) !important;
  border-color: rgba(255,255,255,0.12) !important;
  color: #fff !important;
}
.payment-card .logo-pill{
  border-color: rgba(255,255,255,0.12) !important;
  background: rgba(255,255,255,0.06) !important;
}
.payment-note{
  background: rgba(255,255,255,0.06) !important;
  border: 1px solid rgba(255,255,255,0.12) !important;
}

/* Fiches véhicules indexables */
.vehicle-detail-link { color: inherit; text-decoration: none; }
.vehicle-detail-link:hover { text-decoration: underline; text-underline-offset: 3px; }
.vehicle-media-link { display: block; position: absolute; inset: 0; z-index: 1; }
.vehicle-media-link img { width: 100%; height: 100%; object-fit: cover; }
.vehicle-media > .vehicle-price-pill,
.vehicle-media > .vehicle-badges,
.vehicle-media > .sold-overlay-card { z-index: 2; pointer-events: none; }


/* =========================================================
   DSG AUTO — UI polish 2026-09-30
   ========================================================= */
/* Header CTAs: same size, same DSG red */
.cta-annonces{
  height:44px !important;
  min-height:44px !important;
  padding:0 16px !important;
  background:radial-gradient(120% 140% at 50% 0%, rgba(212,0,0,.96), rgba(168,0,0,.86)) !important;
  border:1px solid rgba(255,255,255,.10) !important;
  box-shadow:0 18px 60px rgba(212,0,0,.24) !important;
  font-weight:800 !important;
  letter-spacing:.25px;
}
.cta-annonces:hover{
  background:radial-gradient(120% 140% at 50% 0%, rgba(230,0,0,1), rgba(175,0,0,.92)) !important;
  box-shadow:0 22px 80px rgba(212,0,0,.30) !important;
}
.cta-annonces svg{width:17px;height:17px}
.cta-phone-chip{height:44px !important;min-height:44px !important;padding:0 16px !important}

/* Home hero dual CTA */
.hero-actions{display:flex;justify-content:center;align-items:center;gap:12px;flex-wrap:wrap}
.hero-actions .hero-cta{margin:0}
.hero-cta-secondary{
  font-family:inherit;cursor:pointer;background:rgba(255,255,255,.06) !important;
  border-color:rgba(255,255,255,.30) !important;color:#fff !important;
  backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);
}
.hero-cta-secondary:hover{background:#fff !important;color:#111 !important;border-color:#fff !important}

/* Vehicles: get to the stock much faster */
#vehicles-page .hero{
  height:clamp(250px,32vh,340px) !important;
  min-height:250px !important;
  padding:2rem 1.5rem !important;
}
#vehicles-page > section{padding-top:2.1rem !important}
#vehicles-page .section-subtitle{margin-bottom:1.55rem !important}
#vehicles-page .section-title{margin-top:0 !important}

/* SumUp payment partner */
.sumup-pill{min-width:132px;justify-content:center}
.sumup-logo{display:block;width:auto;height:27px;max-width:112px;object-fit:contain}
.payment-card-dark{background:linear-gradient(180deg,rgba(20,20,23,.90),rgba(12,12,14,.82)) !important}
.payment-card-dark .logo-pill{background:rgba(255,255,255,.06);border-color:rgba(255,255,255,.18)}

/* Guarantee clarity */
.guarantee-list{align-content:start}
.guarantee-item{line-height:1.45}

@media(max-width:768px){
  #vehicles-page .hero{
    margin-top:60px !important;
    height:auto !important;min-height:205px !important;
    padding:2.2rem 1.1rem 1.9rem !important;
  }
  #vehicles-page > section{padding-top:1.25rem !important}
  #vehicles-page .section-subtitle{margin-bottom:1.1rem !important}
  .hero-actions{gap:9px}
  .hero-actions .hero-cta{width:auto !important;min-width:145px;padding:.88rem 1.25rem !important}
}

@media(min-width:1200px){
  .cta-annonces{width:172px !important;justify-content:center !important}
  .cta-phone-chip{width:172px !important}
}

/* =========================================================
   DSG AUTO — V6 polish
   ========================================================= */
/* Header : deux CTA strictement identiques, pas de retour à la ligne */
.header-main .cta-annonces,
.header-main .cta-phone,
.header-main .cta-phone-chip{box-sizing:border-box}
.header-main .cta-annonces,
.header-main .cta-phone-chip{
  width:184px !important;
  min-width:184px !important;
  height:44px !important;
  min-height:44px !important;
  border-radius:999px !important;
  padding:0 15px !important;
  display:flex !important;
  align-items:center !important;
  justify-content:center !important;
  gap:8px !important;
  white-space:nowrap !important;
  line-height:1 !important;
  font-size:.82rem !important;
  font-weight:800 !important;
  letter-spacing:.15px !important;
  color:#fff !important;
  border:1px solid rgba(255,255,255,.10) !important;
  background:linear-gradient(180deg,#d90000 0%,#b00000 100%) !important;
  box-shadow:0 12px 34px rgba(210,0,0,.22) !important;
}
.header-main .cta-annonces:hover,
.header-main .cta-phone:hover .cta-phone-chip{
  background:linear-gradient(180deg,#ec0000 0%,#bd0000 100%) !important;
  color:#fff !important;
  transform:translateY(-1px) !important;
  box-shadow:0 15px 42px rgba(210,0,0,.30) !important;
}
.header-main .cta-phone{width:184px !important;min-width:184px !important;padding:0 !important;border:0 !important;background:transparent !important;border-radius:999px !important;text-decoration:none !important}
.header-main .cta-annonces svg{width:16px !important;height:16px !important;flex:0 0 auto}

/* Bandeau garanties : plus compact après retrait du contenu juridique marketing */
.guarantee-banner{align-items:center}
.guarantee-list{gap:.7rem}

@media (max-width:1360px) and (min-width:769px){
  .header-main .cta-annonces,
  .header-main .cta-phone,
  .header-main .cta-phone-chip{width:166px !important;min-width:166px !important}
  .header-main .cta-annonces,.header-main .cta-phone-chip{font-size:.76rem !important;padding:0 11px !important}
}
/* Titres stock homogènes sans dépendre de la casse Leboncoin */
.vehicle-title,.vmodal-title{ text-transform: uppercase; }

/* ═══════════════════════════════════════════════════════════════
   V7 — VEHICLE FINDER / FILTRES COMPACTS
   Recherche prioritaire + filtres rapides + panneau avancé repliable.
═══════════════════════════════════════════════════════════════ */
.vehicle-finder {
  max-width: 1400px;
  margin: 0 auto 1.4rem;
}
.vehicle-finder .search-sort-bar {
  max-width: none;
  margin: 0 0 .7rem;
  gap: .65rem;
}
.vehicle-finder .vehicle-search,
.vehicle-finder .sort-select,
.vehicle-finder .filters-toggle-btn {
  height: 44px;
}
.vehicle-finder .vehicle-search {
  background: rgba(18,18,20,.88);
  border-color: rgba(255,255,255,.11);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.025);
}
.vehicle-finder .vehicle-search:focus {
  border-color: rgba(220,0,0,.65);
  box-shadow: 0 0 0 3px rgba(220,0,0,.08);
}
.vehicle-finder .sort-select {
  min-width: 160px;
  background: rgba(18,18,20,.92);
  border-color: rgba(255,255,255,.11);
}
.vehicle-finder .filters-toggle-btn {
  display: inline-flex !important;
  width: auto;
  min-width: 112px;
  flex: 0 0 auto;
  margin: 0;
  padding: 0 14px;
  border-radius: 999px;
  justify-content: center;
  background: rgba(18,18,20,.92);
  border-color: rgba(255,255,255,.11);
  font-size: .82rem;
  font-weight: 800;
}
.vehicle-finder .filters-toggle-btn.open {
  background: rgba(220,0,0,.13);
  border-color: rgba(220,0,0,.48);
}
.vehicle-finder .filters-badge {
  min-width: 19px;
  height: 19px;
  align-items: center;
  justify-content: center;
  padding: 0 5px;
  line-height: 1;
}

.quick-filter-strip {
  display: flex;
  align-items: center;
  gap: .45rem;
  overflow-x: auto;
  scrollbar-width: none;
  padding: .05rem 0 .65rem;
  -webkit-overflow-scrolling: touch;
}
.quick-filter-strip::-webkit-scrollbar { display: none; }
.quick-filter {
  flex: 0 0 auto;
  height: 34px;
  display: inline-flex;
  align-items: center;
  gap: .35rem;
  padding: 0 12px;
  border-radius: 999px;
  border: 1px solid rgba(255,255,255,.10);
  background: rgba(255,255,255,.045);
  color: rgba(255,255,255,.72);
  font: 700 .76rem/1 Inter,Manrope,system-ui,-apple-system,"Segoe UI",Arial,sans-serif;
  cursor: pointer;
  transition: background .16s ease, border-color .16s ease, color .16s ease, transform .16s ease;
  white-space: nowrap;
}
.quick-filter:hover {
  color: #fff;
  border-color: rgba(255,255,255,.18);
  background: rgba(255,255,255,.08);
}
.quick-filter.active {
  color: #fff;
  background: linear-gradient(135deg,rgba(220,0,0,.88),rgba(155,0,0,.78));
  border-color: rgba(255,70,70,.42);
  box-shadow: 0 7px 18px rgba(170,0,0,.18);
}
.quick-filter[hidden] { display: none !important; }
.quick-count,
.fchip-count {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 18px;
  height: 18px;
  padding: 0 5px;
  border-radius: 999px;
  background: rgba(255,255,255,.08);
  color: rgba(255,255,255,.52);
  font-size: .65rem;
  font-weight: 800;
}
.quick-filter.active .quick-count,
.fchip.active .fchip-count {
  background: rgba(0,0,0,.18);
  color: #fff;
}

.vehicle-finder .filters-bar {
  max-width: none;
  margin: 0;
  padding: 0;
  border: 0;
  border-radius: 0;
  background: transparent;
}
.vehicle-finder .filters-panel {
  display: none;
  margin-top: .05rem;
  padding: 1rem;
  border-radius: 18px;
  border: 1px solid rgba(255,255,255,.09);
  background:
    linear-gradient(180deg,rgba(255,255,255,.055),rgba(255,255,255,.025)),
    rgba(10,10,12,.90);
  box-shadow: 0 16px 44px rgba(0,0,0,.20);
}
.vehicle-finder .filters-panel.open {
  display: block;
  animation: filterPanelIn .18s ease both;
}
@keyframes filterPanelIn {
  from { opacity: 0; transform: translateY(-5px); }
  to { opacity: 1; transform: translateY(0); }
}
.filters-panel-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  padding-bottom: .85rem;
  margin-bottom: .85rem;
  border-bottom: 1px solid rgba(255,255,255,.065);
}
.filters-panel-title {
  color: #fff;
  font-size: .93rem;
  font-weight: 850;
}
.filters-panel-subtitle {
  margin-top: .15rem;
  color: rgba(255,255,255,.38);
  font-size: .7rem;
}
.vehicle-finder .filter-reset {
  align-self: auto;
  height: 32px;
  padding: 0 12px;
  color: rgba(255,255,255,.62);
  background: rgba(255,255,255,.035);
}
.filters-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0,1fr));
  gap: .9rem 1rem;
}
.filters-grid .filter-group {
  min-width: 0;
  gap: .42rem;
}
.vehicle-finder .filter-label {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: .5rem;
  font-size: .66rem;
  letter-spacing: .085em;
  color: rgba(255,255,255,.42);
}
.vehicle-finder .filter-label strong {
  color: #fff;
  font-size: .72rem;
  letter-spacing: 0;
  text-transform: none;
}
.vehicle-finder .filter-chips {
  gap: .35rem;
}
.vehicle-finder .fchip {
  min-height: 31px;
  height: 31px;
  padding: 0 10px;
  font-size: .72rem;
  background: rgba(255,255,255,.035);
}
.vehicle-finder .fchip.is-unavailable,
.vehicle-finder .fchip:disabled {
  display: none;
}
.filter-range-grid {
  display: grid;
  grid-template-columns: repeat(3,minmax(0,1fr));
  gap: .75rem;
  margin-top: .9rem;
  padding-top: .9rem;
  border-top: 1px solid rgba(255,255,255,.065);
}
.filter-range-card {
  min-width: 0;
  padding: .8rem .85rem;
  border-radius: 12px;
  border: 1px solid rgba(255,255,255,.07);
  background: rgba(255,255,255,.025);
}
.filter-range-card .price-slider {
  width: 100%;
  margin-top: .65rem;
}
.finder-status-row {
  min-height: 34px;
  display: flex;
  align-items: center;
  gap: .7rem;
  margin-top: .45rem;
}
.vehicle-finder .active-chips-bar {
  flex: 1 1 auto;
  margin: 0;
  padding: 0;
  border: 0;
  min-width: 0;
}
.vehicle-finder .active-chip {
  appearance: none;
  border: 1px solid rgba(220,0,0,.34);
  padding: .27rem .62rem;
  font-family: inherit;
  font-size: .72rem;
}
.vehicle-finder .filters-count {
  margin: 0 0 0 auto;
  flex: 0 0 auto;
  color: rgba(255,255,255,.45);
  font-size: .75rem;
  white-space: nowrap;
}
.vehicle-finder .filters-count strong {
  color: #fff;
  font-size: .82rem;
}

@media (max-width: 980px) {
  .filters-grid { grid-template-columns: repeat(2,minmax(0,1fr)); }
  .filter-range-grid { grid-template-columns: repeat(2,minmax(0,1fr)); }
}

@media (max-width: 768px) {
  .vehicle-finder { margin-bottom: 1rem; }
  .vehicle-finder .search-sort-bar {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: .55rem;
  }
  .vehicle-finder .search-wrap { grid-column: 1 / -1; }
  .vehicle-finder .filters-toggle-btn,
  .vehicle-finder .sort-select {
    width: 100%;
    min-width: 0;
  }
  .quick-filter-strip { margin-right: -5%; padding-right: 5%; }
  .vehicle-finder .filters-panel {
    overflow: visible;
    max-height: none;
    padding: .9rem;
  }
  .vehicle-finder .filters-panel.open { max-height: none; }
  .filters-panel-head { align-items: flex-start; }
  .filters-panel-subtitle { display: none; }
  .filters-grid,
  .filter-range-grid { grid-template-columns: 1fr; }
  .vehicle-finder .filter-group { width: 100%; }
  .finder-status-row {
    align-items: flex-start;
    flex-direction: column;
    gap: .45rem;
  }
  .vehicle-finder .filters-count { margin-left: 0; }
}

@media (max-width: 420px) {
  .vehicle-finder .search-sort-bar { gap: .45rem; }
  .quick-filter { padding: 0 10px; font-size: .72rem; }
  .vehicle-finder .filters-panel { border-radius: 14px; }
  .vehicle-finder .fchip { font-size: .69rem; padding: 0 9px; }
}

/* ===== V22 FINAL — rachat plus simple / mobile ===== */
.rachat-form-card{scroll-margin-top:90px}
.rachat-step-title{font-size:1.08rem;margin-bottom:1.25rem}
.rachat-optional{font-size:.68rem;font-weight:600;text-transform:none;letter-spacing:0;color:rgba(255,255,255,.38);margin-left:.25rem}
.rachat-actions-row{display:flex;gap:.75rem;align-items:stretch}
.rachat-actions-row .rachat-next{flex:1}
.rachat-final-actions{margin-top:.9rem;flex-wrap:wrap}
.rachat-submit-main{background:linear-gradient(135deg,#DC0000,#A80000)!important;box-shadow:0 8px 30px rgba(220,0,0,.24)!important}
.rachat-submit-main:hover{background:linear-gradient(135deg,#e60000,#b60000)!important}
.rachat-submit-main:disabled{opacity:.58;cursor:wait;transform:none!important}
.rachat-submit-secondary{background:rgba(255,255,255,.07)!important;border:1px solid rgba(255,255,255,.11);box-shadow:none!important;text-decoration:none}
.rachat-submit-secondary:hover{background:rgba(255,255,255,.11)!important}
.rachat-consent{display:flex;align-items:flex-start;gap:.65rem;margin:1rem 0 .25rem;color:rgba(255,255,255,.62);font-size:.78rem;line-height:1.5;cursor:pointer}
.rachat-consent input{margin-top:.18rem;accent-color:#DC0000;flex:0 0 auto}
.rachat-consent a{color:#fff;text-decoration:underline;text-underline-offset:2px}
.rachat-privacy-note{margin:.75rem 0 0;text-align:center;color:rgba(255,255,255,.38);font-size:.74rem;line-height:1.5}
.rachat-submit-status{display:none;margin:.75rem 0 0;padding:.75rem .9rem;border-radius:10px;font-size:.8rem;line-height:1.45}
.rachat-submit-status.show{display:block}
.rachat-submit-status.error{background:rgba(220,0,0,.10);border:1px solid rgba(255,70,70,.22);color:#ffb4b4}
.rachat-hp{position:absolute!important;left:-9999px!important;width:1px!important;height:1px!important;overflow:hidden!important}
.rachat-success-icon{width:54px;height:54px;border-radius:50%;display:grid;place-items:center;margin:0 auto .9rem;background:rgba(5,150,105,.14);border:1px solid rgba(52,211,153,.32);color:#6ee7b7;font-size:1.55rem}
.rachat-info-card{padding:1rem 1.1rem}
.rachat-info-icon{font-size:1.25rem}
@media(max-width:768px){
  .rachat-form-section{padding:3.25rem 4%}
  .rachat-form-card{padding:1.2rem;border-radius:17px}
  .rachat-form-wrap{gap:1.25rem}
  .rachat-steps{margin-bottom:1.4rem}
  .rachat-radio-group{grid-template-columns:1fr}
  .rachat-final-actions{display:grid;grid-template-columns:1fr 1fr}
  .rachat-final-actions .rachat-back{grid-column:1/-1;order:3}
  .rachat-submit{min-height:48px;padding:.85rem .75rem;font-size:.88rem}
  .rachat-info-panel{display:grid;grid-template-columns:1fr 1fr;gap:.7rem}
  .rachat-info-card{min-width:0;padding:.9rem}
  .rachat-contact-direct{grid-column:1/-1}
}
@media(max-width:430px){
  .rachat-info-panel{grid-template-columns:1fr}
  .rachat-contact-direct{grid-column:auto}
  .rachat-final-actions{grid-template-columns:1fr}
  .rachat-final-actions .rachat-back{grid-column:auto;order:3}
}

/* === v8.css === */
/* ═══════════════════════════════════════════════════════════════
   DSG AUTO V8 — PREMIUM SEARCH / VEHICLE UX
   Additive overrides only: safe to remove without touching core.
═══════════════════════════════════════════════════════════════ */

/* Semantic page headings: visual parity with the former H1s */
.hero .page-hero-title{
  margin:0 0 .75rem;
  color:#fff;
  font-family:'Manrope',sans-serif;
  font-size:clamp(2.2rem,4.4vw,4.3rem);
  line-height:.98;
  font-weight:850;
  letter-spacing:-.045em;
  text-transform:uppercase;
}
.hero .page-hero-title span{color:#e00000}

/* Stock page rhythm */
#vehicles-page > .hero{min-height:220px!important;padding:4rem 5% 2.4rem!important}
#vehicles-page > section{padding-top:1.4rem!important}
#vehicles-page .section-title{margin-bottom:.25rem!important}
#vehicles-page .section-subtitle{margin-bottom:1.05rem!important}

/* Finder shell */
.vehicle-finder-v8{
  position:relative;
  max-width:1440px;
  margin:0 auto 1.2rem;
  padding:1rem;
  border:1px solid rgba(255,255,255,.08);
  border-radius:22px;
  background:
    radial-gradient(900px 240px at 20% -20%,rgba(220,0,0,.10),transparent 55%),
    linear-gradient(180deg,rgba(255,255,255,.045),rgba(255,255,255,.018)),
    rgba(10,10,12,.86);
  box-shadow:0 20px 65px rgba(0,0,0,.26),inset 0 1px 0 rgba(255,255,255,.035);
  backdrop-filter:blur(18px);
  -webkit-backdrop-filter:blur(18px);
}
.finder-topline{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:1rem;
  margin-bottom:.8rem;
}
.finder-kicker{
  display:block;
  margin-bottom:.12rem;
  color:#f03;
  font-size:.67rem;
  font-weight:850;
  letter-spacing:.12em;
  text-transform:uppercase;
}
.finder-title{color:rgba(255,255,255,.74);font-size:.88rem;font-weight:600}
.finder-title strong{color:#fff;font-size:1.05rem;font-weight:850}
.finder-reset-top{
  height:32px;
  padding:0 12px;
  border:1px solid rgba(255,255,255,.10);
  border-radius:999px;
  background:rgba(255,255,255,.04);
  color:rgba(255,255,255,.70);
  font:750 .72rem/1 Inter,Manrope,system-ui,-apple-system,"Segoe UI",Arial,sans-serif;
  cursor:pointer;
}
.finder-reset-top:hover{color:#fff;border-color:rgba(255,255,255,.22)}

.vehicle-finder-v8 .search-sort-bar{display:grid;grid-template-columns:minmax(0,1fr) 116px 180px;gap:.6rem;margin:0}
.vehicle-finder-v8 .search-wrap-v8{min-width:0}
.vehicle-finder-v8 .vehicle-search,
.vehicle-finder-v8 .filters-toggle-btn,
.vehicle-finder-v8 .sort-select{height:46px!important}
.vehicle-finder-v8 .vehicle-search{
  font-size:.88rem;
  border-radius:14px;
  background:rgba(0,0,0,.33)!important;
  border:1px solid rgba(255,255,255,.10)!important;
}
.vehicle-finder-v8 .vehicle-search:focus{border-color:rgba(230,0,0,.66)!important;box-shadow:0 0 0 4px rgba(220,0,0,.09)!important}
.vehicle-finder-v8 .search-clear{right:10px;width:28px;height:28px;border-radius:50%;background:rgba(255,255,255,.07)}
.vehicle-finder-v8 .filters-toggle-btn,
.vehicle-finder-v8 .sort-select{border-radius:14px!important;background:rgba(0,0,0,.33)!important;border:1px solid rgba(255,255,255,.10)!important}
.vehicle-finder-v8 .filters-toggle-btn{min-width:116px!important}
.vehicle-finder-v8 .sort-select{min-width:0!important;width:100%!important;padding-left:12px}

.smart-search-help{
  margin:.52rem .15rem .52rem;
  color:rgba(255,255,255,.36);
  font-size:.7rem;
}
.smart-search-help span{color:rgba(255,255,255,.58)}
.smart-intent-bar{
  display:flex;
  align-items:center;
  flex-wrap:wrap;
  gap:.35rem;
  margin:.1rem 0 .55rem;
  min-height:25px;
  color:rgba(255,255,255,.45);
  font-size:.7rem;
}
.smart-intent-bar[hidden]{display:none!important}
.smart-intent-bar strong{
  padding:.28rem .55rem;
  border:1px solid rgba(220,0,0,.26);
  border-radius:999px;
  background:rgba(220,0,0,.08);
  color:#fff;
  font-size:.68rem;
}

.vehicle-finder-v8 .quick-filter-strip{padding:.05rem 0 .65rem;gap:.4rem}
.vehicle-finder-v8 .quick-filter{height:32px;background:rgba(255,255,255,.035)}
.vehicle-finder-v8 .quick-filter.active{background:linear-gradient(180deg,#d90000,#ab0000);box-shadow:0 7px 20px rgba(205,0,0,.20)}
.vehicle-finder-v8 .quick-count,.vehicle-finder-v8 .fchip-count{min-width:17px;height:17px;font-size:.62rem}

.vehicle-finder-v8 .filters-panel{
  margin-top:.05rem;
  padding:1rem;
  border-radius:16px;
  background:rgba(3,3,5,.54);
  border:1px solid rgba(255,255,255,.075);
  box-shadow:none;
}
.vehicle-finder-v8 .filters-panel-head{margin-bottom:.9rem;padding-bottom:.8rem}
.vehicle-finder-v8 .filters-panel-title{font-size:.95rem}
.vehicle-finder-v8 .filters-panel-subtitle{max-width:760px}
.filters-grid-v8{grid-template-columns:repeat(4,minmax(0,1fr))!important;gap:.8rem!important}
.filters-grid-v8 .filter-group{
  padding:.75rem;
  border:1px solid rgba(255,255,255,.06);
  border-radius:12px;
  background:rgba(255,255,255,.018);
}
.filter-label-note{
  margin-left:auto;
  padding:.12rem .35rem;
  border-radius:999px;
  color:rgba(255,255,255,.38);
  background:rgba(255,255,255,.045);
  font-size:.56rem;
  letter-spacing:.04em;
  text-transform:none;
}
.vehicle-finder-v8 .fchip{
  min-height:31px!important;
  height:31px!important;
  border-radius:9px!important;
  border-color:rgba(255,255,255,.08)!important;
  background:rgba(255,255,255,.035)!important;
}
.vehicle-finder-v8 .fchip:hover:not(:disabled){background:rgba(255,255,255,.08)!important}
.vehicle-finder-v8 .fchip.active{
  background:rgba(220,0,0,.14)!important;
  border-color:rgba(230,0,0,.48)!important;
  color:#fff!important;
}
.vehicle-finder-v8 .fchip.is-unavailable,.vehicle-finder-v8 .fchip:disabled{display:none!important}

.filter-select-grid{
  display:grid;
  grid-template-columns:repeat(3,minmax(0,1fr));
  gap:.7rem;
  margin-top:.8rem;
  padding-top:.8rem;
  border-top:1px solid rgba(255,255,255,.06);
}
.filter-select-card{
  display:flex;
  flex-direction:column;
  gap:.45rem;
  padding:.7rem;
  border:1px solid rgba(255,255,255,.06);
  border-radius:12px;
  background:rgba(255,255,255,.018);
}
.filter-select-card>span{color:rgba(255,255,255,.46);font-size:.64rem;font-weight:800;letter-spacing:.07em;text-transform:uppercase}
.filter-select-card select{
  width:100%;height:38px;padding:0 34px 0 10px;
  border:1px solid rgba(255,255,255,.10);border-radius:9px;
  background:#121214;color:#fff;font:700 .77rem/1 Inter,Manrope,system-ui,-apple-system,"Segoe UI",Arial,sans-serif;outline:none;
}
.filter-select-card select:focus{border-color:rgba(220,0,0,.55);box-shadow:0 0 0 3px rgba(220,0,0,.07)}

.vehicle-finder-v8 .finder-status-row{min-height:30px;margin-top:.55rem}
.vehicle-finder-v8 .active-chips-bar[hidden]{display:none!important}
.vehicle-finder-v8 .active-chip{background:rgba(220,0,0,.075);border-color:rgba(220,0,0,.28)}
.vehicle-finder-v8 .filters-count{padding-right:.1rem}

/* Better cards: less button noise, consistent title height */
#vehiclesGrid .vehicle-card{overflow:hidden;isolation:isolate}
#vehiclesGrid .vehicle-media{position:relative}
#vehiclesGrid .vehicle-title{
  min-height:3.45em;
  display:-webkit-box;
  -webkit-line-clamp:3;
  -webkit-box-orient:vertical;
  overflow:hidden;
  line-height:1.15!important;
}
.vehicle-card-tools{
  position:absolute;
  top:10px;
  right:10px;
  z-index:7;
  display:flex;
  gap:6px;
}
.vehicle-card-tools .card-tool{
  width:34px;height:34px;display:grid;place-items:center;
  padding:0;border:1px solid rgba(255,255,255,.16);border-radius:10px;
  background:rgba(9,9,11,.76);color:#fff;
  backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px);
  font:850 .92rem/1 Inter,Manrope,system-ui,-apple-system,"Segoe UI",Arial,sans-serif;cursor:pointer;
  box-shadow:0 6px 18px rgba(0,0,0,.22);
  transition:transform .16s,border-color .16s,background .16s;
}
.vehicle-card-tools .card-tool:hover{transform:translateY(-1px);border-color:rgba(255,255,255,.32);background:rgba(22,22,25,.92)}
.vehicle-card-tools .btn-fav.active{color:#ff3153;background:rgba(180,0,25,.42);border-color:rgba(255,49,83,.42)}
.vehicle-card-tools .btn-compare.active{color:#fff;background:#c80000;border-color:#e00000}
.vehicle-actions-v8{display:grid!important;grid-template-columns:1.05fr .95fr;gap:.5rem!important}
.vehicle-actions-v8 .vehicle-view-btn,.vehicle-actions-v8 .btn-interest{min-width:0!important;height:40px!important;border-radius:10px!important;font-size:.74rem!important;font-weight:800!important}
.vehicle-actions-v8 .vehicle-view-btn{display:flex;align-items:center;justify-content:center}
.vehicle-actions-v8 .btn-interest{white-space:nowrap}
.vehicle-badges{max-width:calc(100% - 116px)}
.vehicle-badges .badge{letter-spacing:.02em}

/* Empty state */
.vehicles-empty-v8{
  max-width:700px;
  margin:1.2rem auto 3rem;
  padding:2rem;
  text-align:center;
  border:1px solid rgba(255,255,255,.08);
  border-radius:18px;
  background:rgba(255,255,255,.025);
}
.vehicles-empty-v8[hidden]{display:none!important}
.vehicles-empty-icon{font-size:2rem;color:#e00000;margin-bottom:.5rem}
.vehicles-empty-v8 h3{margin:.2rem 0 .4rem;color:#fff;font-size:1.08rem}
.vehicles-empty-v8 p{margin:0 auto 1rem;max-width:520px;color:rgba(255,255,255,.55);font-size:.82rem;line-height:1.5}
.vehicles-empty-actions{display:flex;justify-content:center;gap:.55rem;flex-wrap:wrap}
.vehicles-empty-actions .btn-primary,.vehicles-empty-actions .btn-ghost{min-height:40px;padding:0 14px;border-radius:10px}

/* Compare tray */
.compare-tray{
  position:fixed;
  left:50%;bottom:22px;z-index:980;
  transform:translateX(-50%);
  min-width:360px;max-width:calc(100vw - 30px);
  display:flex;align-items:center;justify-content:space-between;gap:1rem;
  padding:.65rem .7rem .65rem .9rem;
  border:1px solid rgba(255,255,255,.12);border-radius:16px;
  background:rgba(11,11,13,.94);box-shadow:0 18px 55px rgba(0,0,0,.5);
  backdrop-filter:blur(16px);-webkit-backdrop-filter:blur(16px);
}
.compare-tray[hidden]{display:none!important}
.compare-tray-copy{display:flex;flex-direction:column;line-height:1.15}
.compare-tray-copy strong{color:#fff;font-size:.82rem}.compare-tray-copy span{color:rgba(255,255,255,.42);font-size:.62rem;margin-top:3px}
.compare-tray-actions{display:flex;gap:.4rem}
.compare-clear,.compare-open{height:34px;padding:0 11px;border-radius:9px;font:800 .7rem/1 Inter,Manrope,system-ui,-apple-system,"Segoe UI",Arial,sans-serif;cursor:pointer}
.compare-clear{border:1px solid rgba(255,255,255,.1);background:rgba(255,255,255,.04);color:rgba(255,255,255,.65)}
.compare-open{border:1px solid #d60000;background:#c40000;color:#fff}.compare-open:disabled{opacity:.4;cursor:not-allowed}

.compare-overlay{position:fixed;inset:0;z-index:1500;display:none;align-items:center;justify-content:center;padding:26px;background:rgba(0,0,0,.78);backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px)}
.compare-overlay.open{display:flex}
.compare-modal{width:min(1080px,96vw);max-height:min(780px,92vh);overflow:auto;border:1px solid rgba(255,255,255,.10);border-radius:22px;background:#0d0d0f;box-shadow:0 28px 90px rgba(0,0,0,.6)}
.compare-modal-head{position:sticky;top:0;z-index:2;display:flex;align-items:center;justify-content:space-between;gap:1rem;padding:1rem 1.1rem;border-bottom:1px solid rgba(255,255,255,.07);background:rgba(13,13,15,.96);backdrop-filter:blur(10px)}
.compare-modal-head h2{margin:.1rem 0 0;color:#fff;font-size:1.2rem}.compare-modal-close{width:38px;height:38px;border:1px solid rgba(255,255,255,.1);border-radius:50%;background:rgba(255,255,255,.04);color:#fff;font-size:1.4rem;cursor:pointer}
.compare-table-wrap{padding:1rem;overflow:auto}
.compare-table{width:100%;min-width:720px;border-collapse:separate;border-spacing:0;color:#fff;font-size:.78rem}
.compare-table th,.compare-table td{padding:.8rem;border-right:1px solid rgba(255,255,255,.055);border-bottom:1px solid rgba(255,255,255,.055);text-align:left;vertical-align:middle}
.compare-table thead th{background:rgba(255,255,255,.025);vertical-align:top}.compare-table tbody th{color:rgba(255,255,255,.48);width:120px;font-size:.68rem;text-transform:uppercase;letter-spacing:.06em}.compare-table td{font-weight:750}
.compare-car{display:flex;flex-direction:column;gap:.35rem;min-width:170px}.compare-car img{width:100%;max-width:220px;aspect-ratio:16/10;object-fit:cover;border-radius:10px;background:#17171a}.compare-car strong{font-size:.78rem;line-height:1.25}.compare-car a{color:#ff3131;text-decoration:none;font-size:.68rem;font-weight:800}

/* Tiny polish / accessibility */
button:focus-visible,a:focus-visible,input:focus-visible,select:focus-visible{outline:2px solid #ff3a3a!important;outline-offset:2px!important}
#vehicle-count{font-variant-numeric:tabular-nums}

@media (max-width:1100px){
  .filters-grid-v8{grid-template-columns:repeat(2,minmax(0,1fr))!important}
}
@media (max-width:768px){
  #vehicles-page > .hero{min-height:165px!important;padding:3rem 5% 1.5rem!important}
  .hero .page-hero-title{font-size:2.05rem}
  .vehicle-finder-v8{padding:.8rem;border-radius:17px;margin-left:-1%;margin-right:-1%}
  .finder-topline{margin-bottom:.65rem}
  .finder-kicker{font-size:.61rem}
  .finder-title{font-size:.8rem}
  .vehicle-finder-v8 .search-sort-bar{grid-template-columns:1fr 1fr}
  .vehicle-finder-v8 .search-wrap-v8{grid-column:1/-1}
  .vehicle-finder-v8 .filters-toggle-btn,.vehicle-finder-v8 .sort-select{width:100%!important}
  .smart-search-help{font-size:.64rem;line-height:1.4}
  .filters-grid-v8,.filter-select-grid{grid-template-columns:1fr!important}
  .filters-grid-v8 .filter-group{padding:.65rem}
  .vehicle-actions-v8{grid-template-columns:1fr 1fr}
  .compare-tray{bottom:82px;min-width:0;width:calc(100vw - 24px)}
  .compare-overlay{padding:10px;align-items:flex-end}.compare-modal{width:100%;max-height:88vh;border-radius:20px 20px 8px 8px}.compare-table-wrap{padding:.7rem}
}
@media (max-width:420px){
  .vehicle-finder-v8{padding:.7rem}
  .finder-reset-top{padding:0 9px;font-size:.66rem}
  .vehicle-finder-v8 .vehicle-search{font-size:.79rem}
  .smart-search-help span{display:block;margin-top:2px}
  .vehicle-card-tools{top:8px;right:8px;gap:5px}.vehicle-card-tools .card-tool{width:32px;height:32px;border-radius:9px}
  .vehicle-actions-v8 .vehicle-view-btn,.vehicle-actions-v8 .btn-interest{font-size:.69rem!important}
}

/* V8 density pass: le stock doit arriver immédiatement à l'écran */
#vehicles-page > .hero{min-height:178px!important;padding:2.8rem 5% 1.55rem!important}
#vehicles-page > section{padding-top:1rem!important}
#vehicles-page > section > .section-title,
#vehicles-page > section > .section-subtitle{display:none!important}
@media (max-width:768px){
  #vehicles-page > .hero{min-height:138px!important;padding:2.25rem 5% 1rem!important}
  #vehicles-page > section{padding-top:.7rem!important}
}

/* ═══════════════════════════════════════════════════════════════
   V8.1 — mobile/header hardening + zero horizontal overflow
═══════════════════════════════════════════════════════════════ */
html,body{max-width:100%;overflow-x:hidden}
@media (max-width:768px){
  /* Higher specificity than the late desktop CTA rules in site.css. */
  header .header-main .cta-annonces,
  header .header-main .cta-phone,
  header .header-main .cta-phone-chip{display:none!important}
  header .header-main{
    position:relative;
    min-height:60px;
    padding:9px 14px!important;
  }
  header .header-main .logo{
    position:absolute!important;
    left:50%!important;
    top:50%!important;
    transform:translate(-50%,-50%)!important;
    height:40px!important;
    max-width:78px;
    object-fit:contain;
    z-index:1;
  }
  header .header-main .mob-burger{position:relative;z-index:2}

  .vehicle-finder-v8{max-width:100%;margin-left:0;margin-right:0}
  .vehicle-finder-v8 .quick-filter-strip{
    width:100%;
    max-width:100%;
    margin-left:0!important;
    margin-right:0!important;
    padding-right:0!important;
    overflow-x:auto;
    overscroll-behavior-inline:contain;
    scrollbar-width:none;
  }
  .vehicle-finder-v8 .quick-filter-strip::-webkit-scrollbar{display:none}
  .vehicle-finder-v8 .quick-filter{flex:0 0 auto}
  .compare-tray{box-sizing:border-box;max-width:calc(100vw - 24px)}
}
/* Marque / modèle + plages numériques : grille auto-adaptative */
.vehicle-finder-v8 .filter-select-grid{grid-template-columns:repeat(auto-fit,minmax(170px,1fr))!important}
.vehicle-finder-v8 .filter-select-card select:disabled{opacity:.45;cursor:not-allowed}
@media (min-width:360px) and (max-width:768px){
  .vehicle-finder-v8 .filter-select-grid{grid-template-columns:repeat(2,minmax(0,1fr))!important}
  .vehicle-finder-v8 .filter-select-card:nth-child(5){grid-column:1/-1}
}
@media (max-width:359px){
  .vehicle-finder-v8 .filter-select-grid{grid-template-columns:1fr!important}
}
/* Interactive service cards are real links now */
a.service-card{display:block;color:inherit;text-decoration:none}
a.service-card:focus-visible{outline:2px solid #ff3a3a;outline-offset:3px}
.fav-tab{border:0;font-family:inherit;cursor:pointer}

/* === v9.css === */
/* ═══════════════════════════════════════════════════════════════
   DSG AUTO V9 — conversion + recherche compacte + header stable
   Overrides additionnels au thème historique.
═══════════════════════════════════════════════════════════════ */

/* ---------- Header desktop : logo non déformé, CTA sur une ligne ---------- */
header .header-main{
  display:grid!important;
  grid-template-columns:150px minmax(0,1fr) auto!important;
  align-items:center!important;
  gap:18px!important;
  padding:12px 5%!important;
}
header .header-main > img.logo{
  display:block!important;
  width:auto!important;
  height:58px!important;
  max-width:86px!important;
  max-height:58px!important;
  object-fit:contain!important;
  aspect-ratio:auto!important;
  justify-self:start!important;
  transform:none!important;
}
.header-actions-v9{
  display:flex;
  align-items:center;
  justify-content:flex-end;
  gap:10px;
  min-width:max-content;
}
.header-actions-v9 .cta-annonces,
.header-actions-v9 .cta-phone,
.header-actions-v9 .cta-phone-chip{
  width:auto!important;
  min-width:0!important;
  height:42px!important;
  min-height:42px!important;
}
.header-actions-v9 .cta-annonces,
.header-actions-v9 .cta-phone-chip{
  padding:0 17px!important;
  border-radius:999px!important;
  white-space:nowrap!important;
  flex-wrap:nowrap!important;
  line-height:1!important;
  font-size:.78rem!important;
}
.header-actions-v9 .cta-annonces{min-width:166px!important}
.header-actions-v9 .cta-phone{min-width:150px!important}
.header-actions-v9 .cta-phone-chip{min-width:150px!important}
.header-actions-v9 .cta-annonces span{display:block;white-space:nowrap!important}
header .top-nav{min-width:0!important;justify-content:center!important}
header .nav-pills{gap:6px!important;padding:7px 9px!important;max-width:780px!important}
header .nav-pill{height:38px!important;padding:0 12px!important;font-size:.72rem!important;letter-spacing:.8px!important}

/* ---------- Page stock : réduire le hero et rapprocher les véhicules ---------- */
#vehicles-page > .hero{
  min-height:118px!important;
  height:118px!important;
  padding:1.45rem 5% .8rem!important;
}
#vehicles-page > .hero .hero-content p{display:none!important}
#vehicles-page > .hero .page-hero-title{font-size:clamp(1.85rem,3vw,2.7rem)!important;margin:0!important}
#vehicles-page > section{padding-top:.55rem!important}

/* ---------- Finder V9 compact ---------- */
.vehicle-finder-v9{
  max-width:1240px!important;
  margin:0 auto .9rem!important;
  padding:.72rem!important;
  border-radius:17px!important;
  background:linear-gradient(180deg,rgba(24,24,27,.91),rgba(10,10,12,.92))!important;
  box-shadow:0 14px 44px rgba(0,0,0,.24)!important;
}
.finder-v9-head{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:12px;
  min-height:30px;
  margin:0 2px .48rem;
}
.finder-v9-head .finder-kicker{display:inline;margin:0 .38rem 0 0;font-size:.61rem}
.finder-v9-count{display:inline;color:rgba(255,255,255,.55);font-size:.74rem;font-weight:650}
.finder-v9-count strong{color:#fff;font-size:.86rem;font-weight:900}
.vehicle-finder-v9 .finder-reset-top{height:29px;padding:0 10px;font-size:.66rem}

.vehicle-finder-v9 .finder-toolbar{
  display:grid;
  grid-template-columns:minmax(280px,1.85fr) minmax(130px,.72fr) minmax(130px,.72fr) 112px 145px;
  gap:.48rem;
  align-items:stretch;
}
.vehicle-finder-v9 .search-wrap-v8{min-width:0}
.vehicle-finder-v9 .vehicle-search,
.vehicle-finder-v9 .filters-toggle-btn,
.vehicle-finder-v9 .sort-select,
.finder-mini-select select{
  height:42px!important;
  min-height:42px!important;
  border-radius:11px!important;
  background:#101013!important;
  border:1px solid rgba(255,255,255,.09)!important;
  box-shadow:none!important;
}
.vehicle-finder-v9 .vehicle-search{padding-left:40px!important;font-size:.81rem!important}
.vehicle-finder-v9 .search-icon{left:13px!important;width:16px!important;height:16px!important}
.vehicle-finder-v9 .search-clear{right:7px!important;width:28px!important;height:28px!important}
.finder-mini-select{
  position:relative;
  display:block;
  min-width:0;
}
.finder-mini-select > span{
  position:absolute;
  z-index:2;
  left:11px;
  top:5px;
  color:rgba(255,255,255,.37);
  font-size:.52rem;
  font-weight:850;
  letter-spacing:.07em;
  text-transform:uppercase;
  pointer-events:none;
}
.finder-mini-select select{
  width:100%!important;
  padding:13px 31px 0 10px!important;
  color:#fff!important;
  font:800 .72rem/1 Inter,Manrope,system-ui,-apple-system,"Segoe UI",Arial,sans-serif!important;
  appearance:none;
  -webkit-appearance:none;
}
.vehicle-finder-v9 .filters-toggle-btn{
  min-width:0!important;
  padding:0 11px!important;
  gap:6px!important;
  font-size:.72rem!important;
}
.vehicle-finder-v9 .sort-select{width:100%!important;min-width:0!important;padding:0 28px 0 11px!important;font-size:.72rem!important}
.vehicle-finder-v9 .smart-search-help{display:none!important}
.vehicle-finder-v9 .smart-intent-bar{margin:.42rem 1px .15rem!important}

.vehicle-finder-v9 .quick-filter-strip{
  display:flex!important;
  align-items:center!important;
  gap:.32rem!important;
  padding:.48rem 0 .2rem!important;
  margin:0!important;
  overflow-x:auto;
  scrollbar-width:none;
}
.vehicle-finder-v9 .quick-filter-strip::-webkit-scrollbar{display:none}
.vehicle-finder-v9 .quick-filter{
  flex:0 0 auto;
  height:28px!important;
  min-height:28px!important;
  padding:0 9px!important;
  border-radius:999px!important;
  font-size:.66rem!important;
}
.vehicle-finder-v9 .quick-count{height:15px!important;min-width:15px!important;font-size:.56rem!important}

.vehicle-finder-v9 .filters-panel{
  margin-top:.42rem!important;
  padding:.72rem!important;
  border-radius:13px!important;
  background:#0c0c0f!important;
  border-color:rgba(255,255,255,.075)!important;
}
.vehicle-finder-v9 .filters-panel-head{
  min-height:30px;
  margin-bottom:.55rem!important;
  padding-bottom:.5rem!important;
}
.vehicle-finder-v9 .filters-panel-title{font-size:.82rem!important}
.vehicle-finder-v9 .filters-panel-subtitle{font-size:.62rem!important;margin-top:.08rem!important}
.vehicle-finder-v9 .filter-reset{height:28px!important;padding:0 9px!important;font-size:.64rem!important}
.filters-grid-v9{
  display:grid!important;
  grid-template-columns:1.05fr 1.25fr 1fr 1.15fr!important;
  gap:.48rem!important;
}
.filters-grid-v9 .filter-group{
  padding:.52rem!important;
  border-radius:10px!important;
  min-height:72px;
}
.vehicle-finder-v9 .filter-label{margin-bottom:.32rem!important;font-size:.58rem!important}
.vehicle-finder-v9 .filter-label-note{font-size:.5rem!important}
.vehicle-finder-v9 .filter-chips{gap:.27rem!important}
.vehicle-finder-v9 .fchip{
  height:27px!important;
  min-height:27px!important;
  padding:0 8px!important;
  border-radius:8px!important;
  font-size:.63rem!important;
}
.vehicle-finder-v9 .fchip-count{height:14px!important;min-width:14px!important;font-size:.54rem!important}
.filter-select-grid-v9{
  display:grid!important;
  grid-template-columns:1.15fr 1fr 1fr!important;
  gap:.48rem!important;
  margin-top:.48rem!important;
  padding-top:.48rem!important;
  border-top:1px solid rgba(255,255,255,.055)!important;
}
.filter-select-grid-v9 .filter-select-card{
  padding:.48rem!important;
  border-radius:10px!important;
}
.filter-select-grid-v9 .filter-select-card>span{font-size:.56rem!important}
.filter-select-grid-v9 .filter-select-card select{height:34px!important;font-size:.68rem!important;border-radius:8px!important}
.vehicle-finder-v9 .finder-status-row{min-height:22px!important;margin-top:.36rem!important}
.vehicle-finder-v9 .filters-count{font-size:.68rem!important}
.vehicle-finder-v9 .active-chip{height:26px!important;padding:0 8px!important;font-size:.62rem!important}

/* Les cartes remontent plus vite après le finder */
#vehiclesGrid{margin-top:.35rem!important}

/* CTA stock : essai > rappel sur les cartes */
.vehicle-actions-v8{grid-template-columns:1.15fr .85fr!important}
.vehicle-actions-v8 .btn-test-drive{
  min-width:0!important;
  height:40px!important;
  border:1px solid rgba(255,255,255,.16)!important;
  border-radius:10px!important;
  background:rgba(255,255,255,.055)!important;
  color:#fff!important;
  font-size:.72rem!important;
  font-weight:850!important;
  cursor:pointer;
}
.vehicle-actions-v8 .btn-test-drive:hover{background:rgba(255,255,255,.10)!important;border-color:rgba(255,255,255,.28)!important}

/* ---------- Desktop intermédiaire : éviter l'écrasement du header ---------- */
@media (max-width:1280px) and (min-width:981px){
  header .header-main{grid-template-columns:118px minmax(0,1fr) auto!important;padding-left:3%!important;padding-right:3%!important}
  header .header-main > img.logo{width:auto!important;height:52px!important;max-width:78px!important;max-height:52px!important}
  header .nav-pill{padding:0 9px!important;font-size:.66rem!important}
  .header-actions-v9{gap:7px}
  .header-actions-v9 .cta-annonces{min-width:148px!important;padding:0 12px!important;font-size:.71rem!important}
  .header-actions-v9 .cta-phone,.header-actions-v9 .cta-phone-chip{min-width:136px!important;font-size:.72rem!important;padding:0 11px!important}
}

/* ---------- Tablet/mobile ---------- */
@media (max-width:980px){
  header .header-main{
    display:flex!important;
    position:relative!important;
    min-height:62px!important;
    justify-content:flex-end!important;
    padding:9px 14px!important;
  }
  header .top-nav,.header-actions-v9{display:none!important}
  .mob-nav-drawer{display:block!important}
  header .header-main > img.logo{
    position:absolute!important;
    left:50%!important;
    top:50%!important;
    transform:translate(-50%,-50%)!important;
    width:auto!important;
    max-width:68px!important;
    height:48px!important;
    max-height:48px!important;
    justify-self:auto!important;
  }
  header .mob-burger{display:flex!important;position:relative!important;z-index:3!important}
}

@media (max-width:768px){
  #vehicles-page > .hero{height:92px!important;min-height:92px!important;margin-top:60px!important;padding:1.3rem 4% .5rem!important}
  #vehicles-page > .hero .page-hero-title{font-size:1.72rem!important}
  #vehicles-page > section{padding:.42rem 10px 2rem!important}
  .vehicle-finder-v9{padding:.58rem!important;border-radius:14px!important;margin-bottom:.6rem!important}
  .finder-v9-head{margin-bottom:.42rem}
  .finder-v9-head .finder-kicker{display:none}
  .finder-v9-count{font-size:.69rem}
  .finder-v9-count strong{font-size:.78rem}
  .vehicle-finder-v9 .finder-toolbar{
    grid-template-columns:minmax(0,1fr) 94px 100px!important;
    gap:.38rem!important;
  }
  .vehicle-finder-v9 .search-wrap-v8{grid-column:1/-1!important}
  .finder-mini-select.brand{grid-column:1/2}
  .finder-mini-select.budget{grid-column:2/3}
  .vehicle-finder-v9 .filters-toggle-btn{grid-column:3/4}
  .vehicle-finder-v9 .sort-select{grid-column:1/-1;height:36px!important;min-height:36px!important}
  .vehicle-finder-v9 .vehicle-search,.finder-mini-select select,.vehicle-finder-v9 .filters-toggle-btn{height:40px!important;min-height:40px!important}
  .vehicle-finder-v9 .quick-filter-strip{padding-top:.42rem!important}
  .vehicle-finder-v9 .quick-filter{height:27px!important;min-height:27px!important}
  .vehicle-finder-v9 .filters-panel{padding:.58rem!important}
  .vehicle-finder-v9 .filters-panel-subtitle{display:none!important}
  .filters-grid-v9{grid-template-columns:1fr 1fr!important;gap:.38rem!important}
  .filters-grid-v9 .filter-group{min-height:0;padding:.45rem!important}
  .filter-select-grid-v9{grid-template-columns:1fr 1fr!important;gap:.38rem!important}
  .filter-select-grid-v9 .filter-select-card:first-child{grid-column:1/-1}
  .vehicle-finder-v9 .fchip{font-size:.61rem!important;padding:0 7px!important}
  #vehiclesGrid{margin-top:.2rem!important}
}

@media (max-width:430px){
  header .header-main > img.logo{width:auto!important;height:44px!important;max-width:62px!important;max-height:44px!important}
  .vehicle-finder-v9 .finder-toolbar{grid-template-columns:1fr 1fr!important}
  .vehicle-finder-v9 .search-wrap-v8{grid-column:1/-1!important}
  .finder-mini-select.brand{grid-column:1/2}
  .finder-mini-select.budget{grid-column:2/3}
  .vehicle-finder-v9 .filters-toggle-btn{grid-column:1/2}
  .vehicle-finder-v9 .sort-select{grid-column:2/3!important;height:40px!important;min-height:40px!important}
  .filters-grid-v9{grid-template-columns:1fr!important}
  .filter-select-grid-v9{grid-template-columns:1fr!important}
  .filter-select-grid-v9 .filter-select-card:first-child{grid-column:auto}
}
.vmodal-btn.test-drive{background:rgba(212,0,0,.12);color:#fff;border:1px solid rgba(255,65,65,.30)}
.vmodal-btn.test-drive:hover{background:rgba(212,0,0,.22);border-color:rgba(255,75,75,.48)}
.mob-nav-ads{display:none}
@media(max-width:980px){
  .mob-nav-footer{display:grid!important;grid-template-columns:1fr 1fr auto!important;align-items:center!important;gap:8px!important}
  .mob-nav-call,.mob-nav-ads{min-width:0!important;height:46px!important;padding:0 11px!important;border-radius:12px!important;display:flex!important;align-items:center!important;justify-content:center!important;white-space:nowrap!important;font-size:.78rem!important;font-weight:850!important;color:#fff!important;text-decoration:none!important;background:linear-gradient(180deg,#d90000,#ad0000)!important;border:1px solid rgba(255,255,255,.10)!important}
  .mob-nav-icons{gap:8px!important}
  .mob-nav-icons .mob-nav-lbc{display:none!important}
  .mob-nav-icons .mob-nav-wa{width:46px!important;height:46px!important;border-radius:12px!important}
}
@media(max-width:430px){
  .mob-nav-footer{grid-template-columns:1fr 1fr!important}
  .mob-nav-icons{grid-column:1/-1;justify-content:flex-end!important}
  .mob-nav-call,.mob-nav-ads{font-size:.72rem!important;padding:0 8px!important}
}

/* === v10.css === */
/* DSG AUTO V10 — Conversion, recherche compacte, mobile stable */

/* Header: garde le logo naturel et les CTA sur une ligne */
header .header-main{display:grid!important;grid-template-columns:150px minmax(0,1fr) 390px!important;align-items:center!important;gap:18px!important}
header .header-main>img.logo{width:82px!important;height:64px!important;max-width:82px!important;max-height:64px!important;object-fit:contain!important;object-position:left center!important;justify-self:start!important}
header .top-nav{justify-self:center!important;min-width:0!important}
.header-actions-v9{justify-self:end!important;display:flex!important;align-items:center!important;gap:10px!important;white-space:nowrap!important}
.header-actions-v9 .cta-annonces,.header-actions-v9 .cta-phone,.header-actions-v9 .cta-phone-chip{height:44px!important;min-height:44px!important;border-radius:999px!important;display:inline-flex!important;align-items:center!important;justify-content:center!important;white-space:nowrap!important;line-height:1!important}
.header-actions-v9 .cta-annonces,.header-actions-v9 .cta-phone,.header-actions-v9 .cta-phone-chip{width:184px!important;min-width:184px!important;max-width:184px!important;padding:0 14px!important}
.header-actions-v9 .cta-annonces span{white-space:nowrap!important}

/* Recherche: un vrai compact finder, les filtres avancés deviennent un drawer */
#vehicles-page>section{padding-top:.55rem!important}
.vehicle-finder-v9{max-width:1160px!important;margin:.4rem auto .85rem!important;padding:.64rem!important;border-radius:16px!important;background:linear-gradient(180deg,rgba(24,24,28,.94),rgba(10,10,13,.94))!important;border:1px solid rgba(255,255,255,.085)!important;box-shadow:0 16px 50px rgba(0,0,0,.22)!important}
.finder-v9-head{display:flex!important;align-items:center!important;justify-content:space-between!important;gap:10px!important;margin:0 1px .42rem!important}
.finder-v9-head>div{display:flex!important;align-items:baseline!important;gap:8px!important;min-width:0!important}
.finder-kicker{font-size:.61rem!important;letter-spacing:.12em!important;color:#ff4a4a!important}
.finder-v9-count{font-size:.68rem!important;color:rgba(255,255,255,.56)!important;white-space:nowrap!important}
.finder-v9-count strong{color:#fff!important;font-size:.8rem!important}
.finder-reset-top{height:28px!important;padding:0 9px!important;border-radius:8px!important;font-size:.62rem!important}
.vehicle-finder-v9 .finder-toolbar{display:grid!important;grid-template-columns:minmax(260px,1fr) 108px 132px!important;gap:.45rem!important;align-items:stretch!important}
.vehicle-finder-v9 .search-wrap-v8{min-width:0!important}
.vehicle-finder-v9 .vehicle-search{height:42px!important;min-height:42px!important;font-size:.78rem!important;padding-left:38px!important;border-radius:11px!important}
.vehicle-finder-v9 .filters-toggle-btn,.vehicle-finder-v9 .sort-select{height:42px!important;min-height:42px!important;border-radius:11px!important;font-size:.7rem!important}
.vehicle-finder-v9 .quick-filter-strip{padding:.42rem 0 0!important;gap:.32rem!important}
.vehicle-finder-v9 .quick-filter{height:27px!important;min-height:27px!important;font-size:.63rem!important;padding:0 8px!important}
.vehicle-finder-v9 .finder-status-row{min-height:20px!important;margin-top:.28rem!important}
.vehicle-finder-v9 .filters-count{font-size:.64rem!important;color:rgba(255,255,255,.48)!important}

/* Drawer backdrop */
#filtersBackdrop{position:fixed;inset:0;background:rgba(0,0,0,.56);backdrop-filter:blur(3px);-webkit-backdrop-filter:blur(3px);z-index:10018;display:none}
#filtersBackdrop.open{display:block}
body.filters-drawer-open{overflow:hidden!important}
.vehicle-finder-v9 .filters-bar{margin:0!important}
.vehicle-finder-v9 .filters-panel{position:fixed!important;z-index:10019!important;right:18px!important;top:96px!important;width:min(430px,calc(100vw - 36px))!important;max-height:calc(100dvh - 116px)!important;overflow:auto!important;overscroll-behavior:contain!important;margin:0!important;padding:14px!important;border-radius:18px!important;background:linear-gradient(180deg,#151518,#09090c)!important;border:1px solid rgba(255,255,255,.12)!important;box-shadow:0 34px 100px rgba(0,0,0,.62)!important}
.vehicle-finder-v9 .filters-panel.open{display:block!important;animation:dsgFilterDrawer .18s ease-out!important}
@keyframes dsgFilterDrawer{from{opacity:0;transform:translateX(10px) scale(.99)}to{opacity:1;transform:none}}
.vehicle-finder-v9 .filters-panel-head{position:sticky!important;top:-14px!important;z-index:2!important;margin:-14px -14px 10px!important;padding:14px!important;background:rgba(17,17,20,.97)!important;border-bottom:1px solid rgba(255,255,255,.08)!important}
.vehicle-finder-v9 .filters-panel-title{font-size:.92rem!important}
.vehicle-finder-v9 .filters-panel-subtitle{font-size:.64rem!important;max-width:270px!important}
.filters-grid-v9{display:grid!important;grid-template-columns:1fr!important;gap:7px!important}
.filters-grid-v9 .filter-group{padding:9px!important;border-radius:11px!important;min-height:0!important}
.vehicle-finder-v9 .filter-label{font-size:.61rem!important;margin-bottom:6px!important}
.vehicle-finder-v9 .filter-chips{gap:5px!important}
.vehicle-finder-v9 .fchip{height:29px!important;min-height:29px!important;padding:0 8px!important;font-size:.65rem!important;border-radius:8px!important}
.filter-select-grid-v9{display:grid!important;grid-template-columns:1fr 1fr!important;gap:7px!important;margin-top:8px!important;padding-top:8px!important}
.filter-select-grid-v9 .filter-select-card{padding:8px!important;border-radius:10px!important}
.filter-select-grid-v9 .filter-select-card>span{font-size:.56rem!important}
.filter-select-grid-v9 .filter-select-card select{height:36px!important;min-height:36px!important;font-size:.68rem!important;border-radius:8px!important}
.filter-select-grid-v9 .wide-filter{grid-column:1/-1!important}

/* Stock visible rapidement */
#vehiclesGrid{margin-top:.25rem!important}
.vehicles-grid{scroll-margin-top:110px}

/* Chat V10: avatar assistant distinct du logo + bottom sheet mobile */
.dsg-contact-dock .dsg-dock-btn.assistant img{width:30px!important;height:30px!important;object-fit:contain!important}
.dsg-bot-avatar{background:linear-gradient(180deg,#16161a,#0a0a0d)!important}
.dsg-bot-avatar img{width:40px!important;height:40px!important;object-fit:contain!important}
body.dsg-chat-open{overflow:hidden}
.dsg-chat-panel{width:400px!important;height:min(620px,calc(100dvh - 110px))!important}
.dsg-chat-body{scrollbar-width:thin}
.dsg-welcome-card{padding:12px!important}
.dsg-chat-chip{transition:.15s ease}

/* Cartes et CTA: meilleure lisibilité conversion */
.vehicle-card .vehicle-actions,.vehicle-card .card-actions{gap:6px!important}
.vmodal-btn.test-drive,.vehicle-cta-test{font-weight:850!important}

@media(max-width:1180px){
  header .header-main{grid-template-columns:110px minmax(0,1fr) 300px!important;gap:10px!important}
  .header-actions-v9 .cta-annonces,.header-actions-v9 .cta-phone,.header-actions-v9 .cta-phone-chip{width:142px!important;min-width:142px!important;max-width:142px!important;font-size:.74rem!important}
  header .header-main>img.logo{width:72px!important;height:58px!important}
}
@media(max-width:980px){
  header .header-main{display:grid!important;grid-template-columns:72px 1fr 48px!important;gap:10px!important}
  header .header-main>img.logo{width:64px!important;height:50px!important;max-width:64px!important;max-height:50px!important}
  .header-actions-v9{display:none!important}
}
@media(max-width:768px){
  #vehicles-page>.hero{height:74px!important;min-height:74px!important;margin-top:60px!important;padding:.8rem 4% .3rem!important}
  #vehicles-page>.hero .page-hero-title{font-size:1.42rem!important}
  #vehicles-page>.hero p{font-size:.72rem!important;margin-top:.2rem!important}
  #vehicles-page>section{padding:.32rem 8px 1.8rem!important}
  #vehicles-page .section-title,#vehicles-page .section-subtitle{display:none!important}
  .vehicle-finder-v9{margin:.25rem auto .55rem!important;padding:.52rem!important;border-radius:13px!important}
  .finder-v9-head{margin-bottom:.35rem!important}
  .finder-kicker{display:inline!important;font-size:.55rem!important}
  .finder-v9-count{font-size:.63rem!important}
  .vehicle-finder-v9 .finder-toolbar{grid-template-columns:minmax(0,1fr) 88px!important;gap:.36rem!important}
  .vehicle-finder-v9 .search-wrap-v8{grid-column:1/-1!important}
  .vehicle-finder-v9 .filters-toggle-btn{grid-column:1/2!important;height:38px!important;min-height:38px!important}
  .vehicle-finder-v9 .sort-select{grid-column:2/3!important;height:38px!important;min-height:38px!important}
  .vehicle-finder-v9 .vehicle-search{height:40px!important;min-height:40px!important;font-size:.74rem!important}
  .vehicle-finder-v9 .quick-filter-strip{padding-top:.34rem!important;gap:.26rem!important}
  .vehicle-finder-v9 .quick-filter{height:26px!important;min-height:26px!important;font-size:.6rem!important}
  .vehicle-finder-v9 .quick-filter:nth-of-type(n+5){display:none!important}
  .vehicle-finder-v9 .filters-panel{left:0!important;right:0!important;top:auto!important;bottom:0!important;width:100%!important;max-height:82dvh!important;border-radius:22px 22px 0 0!important;padding:14px 12px calc(18px + env(safe-area-inset-bottom))!important}
  .vehicle-finder-v9 .filters-panel-head{top:-14px!important;margin:-14px -12px 10px!important;padding:14px 12px 11px!important;border-radius:22px 22px 0 0!important}
  .vehicle-finder-v9 .filters-panel-subtitle{display:block!important;font-size:.61rem!important}
  .filter-select-grid-v9{grid-template-columns:1fr 1fr!important}
  .dsg-chat-panel{left:0!important;right:0!important;bottom:0!important;width:100%!important;max-width:none!important;height:min(72dvh,640px)!important;max-height:calc(100dvh - 34px)!important;min-height:420px!important;border-radius:24px 24px 0 0!important;grid-template-rows:64px minmax(0,1fr) calc(60px + env(safe-area-inset-bottom))!important}
  .dsg-chat-inputbar{padding-bottom:calc(9px + env(safe-area-inset-bottom))!important;height:auto!important;min-height:60px!important;max-height:none!important}
  .dsg-contact-dock.chat-open{display:none!important}
  .dsg-chat-head{padding-left:12px!important;padding-right:12px!important}
  .dsg-bot-avatar{width:42px!important;height:42px!important;min-width:42px!important;border-radius:13px!important}
  .dsg-bot-avatar img{width:36px!important;height:36px!important}
}
@media(max-width:430px){
  .filter-select-grid-v9{grid-template-columns:1fr!important}
  .filter-select-grid-v9 .wide-filter{grid-column:auto!important}
  .vehicle-finder-v9 .quick-filter:nth-of-type(n+4){display:none!important}
  .finder-v9-head .finder-reset-top{display:none!important}
  .dsg-chat-panel{height:min(76dvh,640px)!important;min-height:390px!important}
  .dsg-chat-sub{max-width:210px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
}

/* === v11.css === */
/* DSG AUTO V11 FINAL — UI stabilization pass */

/* =========================================================
   FILTERS — real viewport drawer, no stacking-context leaks
   ========================================================= */
#filtersBackdrop{
  position:fixed!important; inset:0!important; z-index:20000!important;
  display:none!important; background:rgba(0,0,0,.68)!important;
  backdrop-filter:blur(5px)!important; -webkit-backdrop-filter:blur(5px)!important;
}
#filtersBackdrop.open{display:block!important}
body.filters-drawer-open{overflow:hidden!important}

#filtersPanel{
  position:fixed!important; z-index:20001!important; right:20px!important; top:84px!important; bottom:20px!important;
  width:min(410px,calc(100vw - 40px))!important; max-height:none!important; min-height:0!important;
  display:none!important; overflow-y:auto!important; overflow-x:hidden!important; overscroll-behavior:contain!important;
  margin:0!important; padding:0 14px 14px!important; border-radius:20px!important;
  background:linear-gradient(180deg,#141417 0%,#09090c 100%)!important;
  border:1px solid rgba(255,255,255,.13)!important; box-shadow:0 36px 120px rgba(0,0,0,.72)!important;
  isolation:isolate!important; box-sizing:border-box!important;
}
#filtersPanel.open{display:block!important; animation:v11DrawerIn .18s cubic-bezier(.2,.75,.2,1)!important}
@keyframes v11DrawerIn{from{opacity:0;transform:translateX(18px)}to{opacity:1;transform:none}}
#filtersPanel *{box-sizing:border-box}
#filtersPanel .filters-panel-head{
  position:sticky!important; top:0!important; z-index:4!important;
  margin:0 -14px 10px!important; padding:15px 14px 12px!important;
  display:flex!important; align-items:flex-start!important; justify-content:space-between!important; gap:12px!important;
  background:rgba(15,15,18,.97)!important; border-bottom:1px solid rgba(255,255,255,.08)!important;
  backdrop-filter:blur(16px)!important; -webkit-backdrop-filter:blur(16px)!important;
}
#filtersPanel .filters-panel-title{font-size:1rem!important; line-height:1.15!important; font-weight:900!important; color:#fff!important}
#filtersPanel .filters-panel-subtitle{font-size:.69rem!important; line-height:1.45!important; margin-top:4px!important; max-width:270px!important; color:rgba(255,255,255,.52)!important}
#filtersPanel .filters-head-actions{display:flex!important; align-items:center!important; gap:7px!important; flex:0 0 auto!important}
#filtersPanel .filter-reset,#filtersPanel .filters-close{
  height:32px!important; min-height:32px!important; padding:0 10px!important; border-radius:10px!important;
  border:1px solid rgba(255,255,255,.11)!important; background:rgba(255,255,255,.055)!important;
  color:#fff!important; font:800 .65rem/1 Inter,Arial,sans-serif!important; cursor:pointer!important;
}
#filtersPanel .filters-close{width:32px!important; min-width:32px!important; padding:0!important; font-size:18px!important}
#filtersPanel .filter-select-grid-v9{display:grid!important; grid-template-columns:1fr 1fr!important; gap:8px!important; margin:0 0 8px!important; padding:0!important; border:0!important}
#filtersPanel .filter-select-card{display:flex!important; flex-direction:column!important; gap:5px!important; padding:9px!important; border-radius:11px!important; background:rgba(255,255,255,.035)!important; border:1px solid rgba(255,255,255,.07)!important}
#filtersPanel .filter-select-card>span{font-size:.57rem!important; letter-spacing:.08em!important; text-transform:uppercase!important; font-weight:850!important; color:rgba(255,255,255,.45)!important}
#filtersPanel .filter-select-card select{width:100%!important; height:38px!important; min-height:38px!important; padding:0 30px 0 9px!important; border-radius:9px!important; border:1px solid rgba(255,255,255,.10)!important; background:#111115!important; color:#fff!important; font-size:.7rem!important}
#filtersPanel .wide-filter{grid-column:1/-1!important}
#filtersPanel .filters-grid-v9{display:grid!important; grid-template-columns:1fr!important; gap:8px!important; margin-top:0!important}
#filtersPanel .filter-group{padding:10px!important; min-height:0!important; border-radius:11px!important; background:rgba(255,255,255,.028)!important; border:1px solid rgba(255,255,255,.065)!important}
#filtersPanel .filter-label{margin:0 0 7px!important; font-size:.61rem!important; font-weight:900!important; letter-spacing:.08em!important; text-transform:uppercase!important; color:rgba(255,255,255,.52)!important}
#filtersPanel .filter-label-note{font-size:.52rem!important; text-transform:none!important; letter-spacing:0!important; color:rgba(255,255,255,.30)!important}
#filtersPanel .filter-chips{display:flex!important; flex-wrap:wrap!important; gap:6px!important}
#filtersPanel .fchip{height:31px!important; min-height:31px!important; padding:0 9px!important; border-radius:9px!important; font-size:.67rem!important; white-space:nowrap!important}
#filtersPanel .filters-panel-footer{
  position:sticky!important; bottom:-14px!important; z-index:4!important;
  margin:12px -14px -14px!important; padding:10px 14px calc(10px + env(safe-area-inset-bottom))!important;
  display:flex!important; align-items:center!important; gap:9px!important;
  background:rgba(12,12,15,.98)!important; border-top:1px solid rgba(255,255,255,.08)!important;
  backdrop-filter:blur(16px)!important; -webkit-backdrop-filter:blur(16px)!important;
}
#filtersPanel .drawer-result-copy{flex:1!important; min-width:0!important; color:rgba(255,255,255,.60)!important; font-size:.68rem!important}
#filtersPanel .drawer-result-copy strong{display:block!important; color:#fff!important; font-size:.84rem!important}
#filtersPanel .drawer-apply{
  min-width:150px!important; height:42px!important; border:0!important; border-radius:11px!important; cursor:pointer!important;
  background:linear-gradient(180deg,#e20b0b,#b90000)!important; color:#fff!important; font:900 .72rem/1 Inter,Arial,sans-serif!important;
  box-shadow:0 10px 28px rgba(212,0,0,.24)!important;
}

/* Finder remains compact and never grows when the drawer is open */
.vehicle-finder-v9{position:relative!important; z-index:2!important}
.vehicle-finder-v9 .filters-bar{min-height:0!important}
.vehicle-finder-v9 .finder-status-row{margin-top:.26rem!important; min-height:20px!important}
.vehicle-finder-v9 .filters-toggle-btn.open{border-color:rgba(255,45,45,.7)!important; background:rgba(212,0,0,.16)!important}

/* =========================================================
   DSG COPILOTE — isolated widget (no global header leakage)
   ========================================================= */
.dsg-chat-panel{
  position:fixed!important; right:20px!important; left:auto!important; bottom:86px!important; top:auto!important;
  z-index:20020!important; width:390px!important; max-width:calc(100vw - 28px)!important;
  height:min(600px,calc(100dvh - 112px))!important; min-height:430px!important; max-height:660px!important;
  display:none!important; grid-template-rows:66px minmax(0,1fr) 62px!important;
  border-radius:22px!important; overflow:hidden!important; isolation:isolate!important; contain:layout paint!important;
  background:linear-gradient(180deg,#111115 0%,#070709 100%)!important;
  border:1px solid rgba(255,255,255,.13)!important; box-shadow:0 38px 120px rgba(0,0,0,.70)!important;
}
.dsg-chat-panel.open{display:grid!important}
.dsg-chat-panel *{box-sizing:border-box}
.dsg-chat-head{
  position:relative!important; inset:auto!important; width:auto!important; height:auto!important; min-height:66px!important;
  margin:0!important; padding:9px 11px!important; display:flex!important; align-items:center!important; gap:10px!important;
  background:linear-gradient(90deg,rgba(185,0,0,.20),rgba(255,255,255,.025))!important;
  border-bottom:1px solid rgba(255,255,255,.08)!important; box-shadow:none!important; transform:none!important;
}
.dsg-bot-avatar{width:48px!important; height:48px!important; min-width:48px!important; border-radius:50%!important; overflow:hidden!important; background:#08080a!important; border:1px solid rgba(255,255,255,.13)!important; box-shadow:0 8px 24px rgba(0,0,0,.35)!important}
.dsg-bot-avatar img{width:100%!important; height:100%!important; object-fit:cover!important; display:block!important; filter:none!important}
.dsg-chat-title{font-size:.96rem!important}.dsg-chat-sub{font-size:.65rem!important; white-space:nowrap!important; overflow:hidden!important; text-overflow:ellipsis!important; max-width:245px!important}
.dsg-chat-close{flex:0 0 auto!important}
.dsg-chat-body{min-height:0!important; overflow-y:auto!important; overflow-x:hidden!important; padding:12px!important; scrollbar-width:thin!important; scrollbar-color:rgba(255,255,255,.18) transparent!important}
.dsg-chat-body::-webkit-scrollbar{width:6px}.dsg-chat-body::-webkit-scrollbar-thumb{background:rgba(255,255,255,.18);border-radius:10px}
.dsg-welcome-card{padding:12px!important; border-radius:14px!important}
.dsg-chat-actions{gap:6px!important}.dsg-chat-chip{min-height:34px!important; padding:0 10px!important; border-radius:10px!important; font-size:.69rem!important}
.dsg-chat-inputbar{height:62px!important; min-height:62px!important; max-height:62px!important; padding:9px!important; background:#09090b!important}
.dsg-chat-input{height:42px!important; min-height:42px!important; max-height:42px!important; line-height:normal!important}
.dsg-contact-dock{z-index:20010!important}
.dsg-contact-dock .dsg-dock-btn.assistant img{width:100%!important; height:100%!important; object-fit:cover!important; border-radius:50%!important; filter:none!important}
.dsg-contact-dock .dsg-dock-btn.assistant{padding:5px!important; background:#09090b!important}
.dsg-contact-dock .dsg-dock-btn.assistant::before{right:4px!important;bottom:4px!important;border-color:#09090b!important}
body.dsg-chat-open{overflow:auto!important}
.dsg-contact-dock.chat-open{display:flex!important}
.dsg-contact-dock.chat-open .dsg-dock-btn:not(.assistant){display:none!important}

/* focus polish */
#filtersPanel button:focus-visible,#filtersPanel select:focus-visible,.dsg-chat-panel button:focus-visible,.dsg-chat-panel input:focus-visible{outline:2px solid #ff3b3b!important;outline-offset:2px!important}

@media(max-width:768px){
  #filtersPanel{
    left:0!important; right:0!important; top:auto!important; bottom:0!important; width:100%!important;
    max-width:none!important; max-height:84dvh!important; min-height:0!important; border-radius:22px 22px 0 0!important;
    padding:0 12px calc(12px + env(safe-area-inset-bottom))!important;
  }
  #filtersPanel.open{animation:v11SheetIn .2s cubic-bezier(.2,.75,.2,1)!important}
  @keyframes v11SheetIn{from{opacity:0;transform:translateY(24px)}to{opacity:1;transform:none}}
  #filtersPanel .filters-panel-head{margin:0 -12px 9px!important;padding:13px 12px 11px!important;border-radius:22px 22px 0 0!important}
  #filtersPanel .filters-panel-subtitle{font-size:.64rem!important;max-width:230px!important}
  #filtersPanel .filter-select-grid-v9{grid-template-columns:1fr!important}
  #filtersPanel .wide-filter{grid-column:auto!important}
  #filtersPanel .filters-panel-footer{bottom:calc(-12px - env(safe-area-inset-bottom))!important;margin:10px -12px calc(-12px - env(safe-area-inset-bottom))!important;padding:10px 12px calc(10px + env(safe-area-inset-bottom))!important}
  #filtersPanel .drawer-apply{min-width:138px!important}

  .dsg-chat-panel{
    left:0!important; right:0!important; bottom:0!important; top:auto!important; width:100%!important; max-width:none!important;
    height:min(78dvh,680px)!important; min-height:420px!important; max-height:calc(100dvh - 24px)!important;
    border-radius:24px 24px 0 0!important; grid-template-rows:64px minmax(0,1fr) calc(62px + env(safe-area-inset-bottom))!important;
  }
  .dsg-chat-head{min-height:64px!important;padding:8px 10px!important}
  .dsg-bot-avatar{width:46px!important;height:46px!important;min-width:46px!important}
  .dsg-chat-sub{max-width:190px!important;font-size:.61rem!important}
  .dsg-chat-body{padding:10px!important}
  .dsg-chat-inputbar{height:auto!important;min-height:62px!important;max-height:none!important;padding:9px 9px calc(9px + env(safe-area-inset-bottom))!important}
  .dsg-contact-dock.chat-open{display:none!important}
  body.dsg-chat-open{overflow:hidden!important}
}

@media(max-width:390px){
  .dsg-chat-panel{height:min(80dvh,650px)!important;min-height:390px!important}
  .dsg-chat-title{font-size:.91rem!important}.dsg-live-pill{display:none!important}.dsg-chat-sub{max-width:175px!important}
  #filtersPanel .filters-panel-title{font-size:.94rem!important}
}
#filtersPanel{scrollbar-width:thin!important;scrollbar-color:rgba(255,255,255,.18) transparent!important}
#filtersPanel::-webkit-scrollbar{width:7px!important}
#filtersPanel::-webkit-scrollbar-track{background:transparent!important}
#filtersPanel::-webkit-scrollbar-thumb{background:rgba(255,255,255,.18)!important;border-radius:10px!important;border:2px solid transparent!important;background-clip:padding-box!important}
body.filters-drawer-open .dsg-contact-dock{display:none!important}
@media(min-width:769px){
  .dsg-chat-panel{height:min(540px,calc(100dvh - 120px))!important;min-height:420px!important}
}
@media(max-width:768px){
  .dsg-chat-panel{height:min(70dvh,590px)!important;min-height:420px!important}
}

/* === v12.css === */
/* DSG AUTO V12.1 — couche finale de stabilisation (chargée en dernier) */

/* ── Filtres : jamais visibles tant que le tiroir n'est pas ouvert ── */
#filtersPanel:not(.open){display:none!important}
#filtersBackdrop:not(.open){display:none!important}
#filtersPanel{max-width:calc(100vw - 24px)!important}

/* ── Apex : mise en page blindée ── */
.dsg-chat-panel{
  box-sizing:border-box!important;
  position:fixed!important; right:18px!important; left:auto!important; bottom:84px!important; top:auto!important;
  width:400px!important; max-width:calc(100vw - 24px)!important;
  height:min(620px,calc(100dvh - 110px))!important; min-height:380px!important; max-height:calc(100dvh - 100px)!important;
  grid-template-columns:minmax(0,1fr)!important;
  grid-template-rows:auto minmax(0,1fr) auto!important;
  transform:none!important; overflow:hidden!important;
}
.dsg-chat-panel:not(.open){display:none!important}
.dsg-chat-panel>*{min-width:0!important}
.dsg-chat-head{display:flex!important; align-items:center!important; gap:11px!important; padding:11px 12px!important; min-height:0!important}
.dsg-chat-head>div:nth-child(2){flex:1 1 auto!important; min-width:0!important}
.dsg-chat-title-row{display:flex!important; align-items:center!important; gap:8px!important; flex-wrap:nowrap!important}
.dsg-chat-title{white-space:nowrap!important}
.dsg-chat-sub{display:block!important; white-space:nowrap!important; overflow:hidden!important; text-overflow:ellipsis!important; max-width:100%!important}
.dsg-chat-close{width:34px!important; height:34px!important; min-width:34px!important; border-radius:50%!important; display:grid!important; place-items:center!important; border:1px solid rgba(255,255,255,.14)!important; background:rgba(255,255,255,.06)!important; color:#fff!important; font-size:20px!important; line-height:1!important; padding:0!important; cursor:pointer!important}
.dsg-chat-close:hover{background:rgba(213,0,0,.5)!important}
.dsg-chat-body{width:100%!important; max-width:100%!important; overflow-x:hidden!important; overflow-y:auto!important}
.dsg-chat-body *{max-width:100%}
.dsg-msg,.dsg-welcome-card,.dsg-car-card{overflow-wrap:anywhere!important; word-break:break-word!important}
.dsg-chat-actions{display:flex!important; flex-wrap:wrap!important}
.dsg-chat-inputbar{display:flex!important; align-items:center!important; gap:8px!important; width:100%!important; height:auto!important; min-height:62px!important; max-height:none!important; padding:10px!important}
.dsg-chat-input{flex:1 1 auto!important; min-width:0!important; width:auto!important; height:42px!important; padding:0 14px!important; border-radius:12px!important; border:1px solid rgba(255,255,255,.16)!important; background:rgba(255,255,255,.06)!important; color:#fff!important; font:inherit!important; font-size:.86rem!important}
.dsg-chat-input:focus{outline:none!important; border-color:#ff3b3b!important; box-shadow:0 0 0 3px rgba(213,0,0,.22)!important}
.dsg-chat-send{flex:0 0 42px!important; width:42px!important; height:42px!important; display:grid!important; place-items:center!important}

/* ── Mascotte Apex (robot casque course DSG) ── */
.dsg-bot-avatar{width:52px!important; height:52px!important; min-width:52px!important; border-radius:16px!important; background:#0a0a0c!important; border:1px solid rgba(255,70,70,.35)!important; box-shadow:0 0 0 3px rgba(213,0,0,.10),0 8px 24px rgba(0,0,0,.4)!important; overflow:hidden!important; padding:0!important}
.dsg-bot-avatar img{width:100%!important; height:100%!important; object-fit:contain!important; border-radius:0!important}
.dsg-contact-dock .dsg-dock-btn.assistant{padding:0!important; width:54px!important; height:54px!important; min-width:54px!important; min-height:54px!important; border-radius:50%!important; background:#0a0a0c!important; border:2px solid #d50000!important; box-shadow:0 0 0 3px rgba(213,0,0,.15),0 10px 28px rgba(213,0,0,.35)!important; overflow:hidden!important; animation:dsgBotPulse 3.2s ease-in-out infinite}
.dsg-contact-dock .dsg-dock-btn.assistant img{width:100%!important; height:100%!important; object-fit:cover!important; border-radius:50%!important}
.dsg-contact-dock .dsg-dock-btn.assistant::before{right:3px!important; bottom:3px!important; z-index:2}
@keyframes dsgBotPulse{0%,100%{box-shadow:0 0 0 3px rgba(213,0,0,.15),0 10px 28px rgba(213,0,0,.35)}50%{box-shadow:0 0 0 6px rgba(213,0,0,.08),0 10px 34px rgba(213,0,0,.55)}}
@media(prefers-reduced-motion:reduce){.dsg-contact-dock .dsg-dock-btn.assistant{animation:none}}

/* ── Mobile ── */
@media(max-width:768px){
  .dsg-chat-panel{
    left:8px!important; right:8px!important; width:auto!important; max-width:none!important;
    bottom:calc(86px + env(safe-area-inset-bottom))!important;
    height:min(74dvh,600px)!important; min-height:340px!important; border-radius:20px!important;
  }
  .dsg-contact-dock .dsg-dock-btn.assistant{width:50px!important;height:50px!important;min-width:50px!important;min-height:50px!important}
}
@media(max-height:560px){
  .dsg-chat-panel{height:calc(100dvh - 90px)!important; min-height:0!important; bottom:70px!important}
}

/* ── Cartes véhicules : débordements ── */
.vehicle-card,.vcard{min-width:0}
.vehicle-title,.vcard-title{overflow-wrap:anywhere}

/* Cartes véhicule du chat */
.dsg-car-card img{object-fit:cover!important;background:#15151a!important;font-size:0!important}
.dsg-car-card img.dsg-car-noimg{object-fit:contain!important;padding:8px!important;box-sizing:border-box!important}
.dsg-car-actions a,.dsg-car-actions button{font-family:Inter,Manrope,system-ui,Arial,sans-serif!important;font-size:.7rem!important;font-weight:750!important}

/* Listes déroulantes des filtres : lisibles, sans texte coupé */
#filtersPanel .filter-select-card select,.vehicle-finder select{font-weight:600!important;font-size:.72rem!important;text-overflow:ellipsis}
#filtersPanel .filter-select-card select{padding-right:26px!important}

/* ═══ FILTRES EN LIGNE — visibles directement sur la page Véhicules (plus de tiroir) ═══ */
#filtersBar #filtersPanel{
  position:static!important; inset:auto!important; z-index:auto!important; transform:none!important; animation:none!important;
  width:100%!important; max-width:100%!important; height:auto!important; max-height:none!important; min-height:0!important;
  margin:10px 0 0!important; padding:14px!important; border-radius:16px!important; overflow:visible!important;
  background:rgba(255,255,255,.03)!important; border:1px solid rgba(255,255,255,.09)!important; box-shadow:none!important;
  isolation:auto!important; backdrop-filter:none!important; -webkit-backdrop-filter:none!important;
}
#filtersBar #filtersPanel:not(.open){display:none!important}
#filtersBar #filtersPanel.open{display:block!important}
#filtersBar #filtersPanel .filters-panel-head{
  position:static!important; margin:0 0 12px!important; padding:0 0 10px!important; background:none!important;
  border-bottom:1px solid rgba(255,255,255,.08)!important; backdrop-filter:none!important; -webkit-backdrop-filter:none!important; border-radius:0!important;
}
#filtersBar #filtersPanel .filters-panel-subtitle{max-width:none!important}
#filtersBar #filtersPanel .filter-select-grid-v9{grid-template-columns:repeat(5,minmax(0,1fr))!important; gap:10px!important; margin:0 0 10px!important}
#filtersBar #filtersPanel .wide-filter{grid-column:auto!important}
#filtersBar #filtersPanel .filters-grid-v9{grid-template-columns:repeat(3,minmax(0,1fr))!important; gap:10px!important; margin-top:0!important}
#filtersBar #filtersPanel .filters-panel-footer{
  position:static!important; margin:12px 0 0!important; padding:12px 0 0!important; background:none!important;
  border-top:1px solid rgba(255,255,255,.08)!important; backdrop-filter:none!important; -webkit-backdrop-filter:none!important;
}
#filtersBackdrop{display:none!important}
body.filters-drawer-open{overflow:auto!important}
@media(max-width:1100px){
  #filtersBar #filtersPanel .filter-select-grid-v9{grid-template-columns:repeat(3,minmax(0,1fr))!important}
  #filtersBar #filtersPanel .filters-grid-v9{grid-template-columns:1fr 1fr!important}
}
@media(max-width:700px){
  #filtersBar #filtersPanel{padding:12px!important}
  #filtersBar #filtersPanel .filter-select-grid-v9{grid-template-columns:1fr 1fr!important}
  #filtersBar #filtersPanel .filters-grid-v9{grid-template-columns:1fr!important}
}
#filtersBar #filtersPanel [hidden],#filtersBar #filtersPanel .filter-group[hidden]{display:none!important}
@media(max-width:700px){
  .finder-toolbar{flex-wrap:wrap!important}
  .finder-toolbar .search-wrap{flex:1 1 100%!important}
  .finder-toolbar .filters-toggle-btn{flex:1 1 calc(50% - 6px)!important}
  .finder-toolbar .sort-select{flex:1 1 calc(50% - 6px)!important;min-width:0!important;width:auto!important}
}
@media(max-width:700px){
  .vehicle-finder-v9 .finder-toolbar{display:grid!important;grid-template-columns:1fr 1fr!important;gap:8px!important}
  .vehicle-finder-v9 .finder-toolbar .search-wrap{grid-column:1/-1!important}
  .vehicle-finder-v9 .finder-toolbar .sort-select{width:100%!important}
}
.dsg-car-why{margin:-1px 0 0;padding:6px 10px;border:1px solid rgba(255,255,255,.09);border-top:0;background:rgba(53,208,113,.07);color:#7ee2a3;font-size:.66rem;font-weight:700;line-height:1.3}
.dsg-car-wrap .dsg-car-card{border-radius:13px 13px 0 0}

/* Carte & itinéraire */
.map-embed{height:420px;border:1px solid rgba(255,255,255,.12)!important;border-radius:16px;overflow:hidden;background:#111}
.map-embed iframe{width:100%;height:100%;border:0;display:block}
.map-actions{display:flex;flex-wrap:wrap;gap:10px;justify-content:center;margin-top:14px}
.map-btn{display:inline-flex;align-items:center;gap:8px;min-height:46px;padding:0 18px;border-radius:12px;border:1px solid rgba(255,255,255,.16);background:rgba(255,255,255,.06);color:#fff;font-weight:800;font-size:.85rem;text-decoration:none}
.map-btn:hover{border-color:#ff3b3b}
.map-btn-primary{background:linear-gradient(180deg,#e10000,#a30000);border-color:transparent}
@media(max-width:700px){.map-embed{height:300px!important}.map-btn{flex:1 1 100%;justify-content:center}}

/* === v17.css === */
/* DSG AUTO V17 — typographie auto-hébergée, fond et finitions (feuille finale) */
@font-face{font-family:'Plus Jakarta Sans';src:url('fonts/jakarta-latin-wght-normal.woff2') format('woff2');font-weight:100 800;font-style:normal;font-display:swap}
@font-face{font-family:'Inter';src:url('fonts/inter-latin-wght-normal.woff2') format('woff2');font-weight:100 900;font-style:normal;font-display:swap}
@font-face{font-family:'Manrope';src:url('fonts/jakarta-latin-wght-normal.woff2') format('woff2');font-weight:100 800;font-style:normal;font-display:swap}
:root{--font-display:'Plus Jakarta Sans','Inter',system-ui,-apple-system,'Segoe UI',Roboto,Arial,sans-serif;--font-body:'Inter',system-ui,-apple-system,'Segoe UI',Roboto,Arial,sans-serif}
html{scroll-behavior:smooth;scroll-padding-top:84px;-webkit-text-size-adjust:100%}
body{font-family:var(--font-body)!important;font-feature-settings:'cv11','ss01','tnum' 0;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;text-rendering:optimizeLegibility;line-height:1.6}
h1,h2,h3,h4,.section-title,.logo,.price,[class*="title"],[class*="-price"]{font-family:var(--font-display)}
h1,h2,h3,.section-title{letter-spacing:-.018em;line-height:1.12;text-wrap:balance}
h1{font-weight:800}
h2,.section-title{font-weight:750}
p,li{text-wrap:pretty}
button,input,select,textarea{font-family:var(--font-body)}
.badge,.eyebrow,[class*="kicker"],[class*="label"]{letter-spacing:.06em}
/* Fond : fibre de carbone très discrète + lueurs de marque, fixe et sans coût de scroll */
body{background:#060608!important}
body::before{content:"";position:fixed;inset:0;z-index:-2;pointer-events:none;
  background:
    radial-gradient(1100px 560px at 12% -4%,rgba(214,0,0,.24),transparent 62%),
    radial-gradient(900px 520px at 92% 6%,rgba(255,106,0,.12),transparent 60%),
    radial-gradient(1200px 700px at 50% 112%,rgba(214,0,0,.10),transparent 65%),
    linear-gradient(180deg,#07070a 0%,#050507 100%)}
/* Sections : séparation douce */
main>section+section,section.section+section.section{border-top:1px solid rgba(255,255,255,.04)}
/* Accessibilité & finitions */
:focus-visible{outline:2px solid #ff4a3d;outline-offset:3px;border-radius:6px}
::selection{background:rgba(214,0,0,.55);color:#fff}
img{max-width:100%;height:auto}
a{text-underline-offset:3px}
::-webkit-scrollbar{width:11px;height:11px}::-webkit-scrollbar-track{background:#09090c}::-webkit-scrollbar-thumb{background:#2a2a31;border-radius:99px;border:2px solid #09090c}::-webkit-scrollbar-thumb:hover{background:#3b3b44}
@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}*{animation-duration:.01ms!important;animation-iteration-count:1!important;transition-duration:.01ms!important}}

/* Mur de marque : plus discret, et sections translucides pour supprimer les coupures franches */
.brand-wall{opacity:.15!important;background-size:460px auto!important;-webkit-mask-image:linear-gradient(180deg,#000 0%,#000 55%,rgba(0,0,0,.55) 100%);mask-image:linear-gradient(180deg,#000 0%,#000 55%,rgba(0,0,0,.55) 100%)}
main section,body>section,section{background-color:transparent!important;background-image:none}
section.section-dark,.section-dark{background:linear-gradient(180deg,rgba(255,255,255,.022),rgba(255,255,255,.008))!important;border-block:1px solid rgba(255,255,255,.05)}
/* En-tête compact au scroll */
header{transition:box-shadow .25s,background .25s}
header .header-top{transition:max-height .25s,opacity .2s,padding .25s;max-height:60px;overflow:hidden}
body.scrolled header .header-top{max-height:0;opacity:0;padding-top:0;padding-bottom:0;border:0}
body.scrolled header{box-shadow:0 10px 40px rgba(0,0,0,.55)}
/* Hero */
.hero h1{font-family:var(--font-display)!important;font-size:clamp(3rem,9vw,6.4rem)!important;font-weight:800!important;letter-spacing:-.03em!important;line-height:1!important;text-shadow:0 8px 60px rgba(0,0,0,.6)}
.hero h1 span{background:linear-gradient(180deg,#ff4d3d,#d40000 70%);-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent;color:transparent}
.hero-content>p{font-size:clamp(1.02rem,2.2vw,1.35rem)!important;color:#d6d6de!important;letter-spacing:.01em!important;max-width:34ch;margin-inline:auto}
.hero-chips{display:flex;flex-wrap:wrap;justify-content:center;gap:10px;margin-top:26px}
.hero-chips span{display:inline-flex;align-items:center;gap:8px;padding:9px 15px;border-radius:999px;background:rgba(255,255,255,.06);border:1px solid rgba(255,255,255,.12);backdrop-filter:blur(8px);font-size:.82rem;font-weight:600;color:#eee}
.hero-chips i{font-style:normal;color:#ff5a4d}
.hero-cta{border-radius:14px!important;font-family:var(--font-display)!important;letter-spacing:.04em!important;transition:transform .18s,box-shadow .18s,background .18s!important}
.hero-cta:hover{transform:translateY(-2px);box-shadow:0 14px 40px rgba(214,0,0,.45)}
/* Cartes : verre cohérent partout */
.service-card,.why-card,[class*="why-"] > div,.review-card,.vehicle-card{background:linear-gradient(180deg,rgba(255,255,255,.055),rgba(255,255,255,.02))!important;border:1px solid rgba(255,255,255,.09)!important;border-radius:18px!important;box-shadow:0 18px 50px rgba(0,0,0,.35)!important;transition:transform .22s,border-color .22s,box-shadow .22s}
.service-card:hover,.vehicle-card:hover,.review-card:hover{transform:translateY(-4px);border-color:rgba(255,70,55,.4)!important;box-shadow:0 26px 70px rgba(0,0,0,.5),0 0 0 1px rgba(255,70,55,.12)!important}
/* Grille services : 6 cartes = 3 colonnes (plus d'orphelines) */
@media (min-width:1100px){.services-grid:has(> :nth-child(6):last-child){grid-template-columns:repeat(3,1fr)!important}}
/* Titres de section */
.section-title{font-size:clamp(1.8rem,4vw,3rem)!important}
.section-subtitle{color:#b9b9c4!important;font-size:clamp(.98rem,1.6vw,1.12rem)}
@media (max-width:600px){.hero-chips span{font-size:.76rem;padding:8px 12px}}
header{background:rgba(6,6,9,.9)!important}
.hero-chips{gap:8px}
@media (max-width:420px){.hero-chips span:nth-child(3){display:none}}
h1{overflow-wrap:break-word;max-width:100%}
body:not(:has(.hero)) h1{font-size:clamp(1.7rem,7.4vw,3rem)!important}

.faq-item{border:1px solid rgba(255,255,255,.1);border-radius:14px;padding:15px 18px;margin:10px 0;background:linear-gradient(180deg,rgba(255,255,255,.05),rgba(255,255,255,.02))}
.faq-item summary{cursor:pointer;font-weight:700;font-family:var(--font-display);list-style:none;display:flex;justify-content:space-between;gap:12px}
.faq-item summary::after{content:"+";color:#ff5a4d;font-size:1.3rem;line-height:1}.faq-item[open] summary::after{content:"–"}
.faq-item p{margin:.8rem 0 0;color:#cfcfd8;line-height:1.7}
.faq-section a{color:#ff6a5c}

/* === dsg-assistant-v21-5.css === */
:root{--dsg-red:#d50000;--dsg-red-dark:#a60000;--dsg-panel:#101014;--dsg-line:rgba(255,255,255,.11)}

/* Dock */
.dsg-contact-dock{position:fixed;right:18px;bottom:18px;z-index:10030;display:flex;align-items:center;gap:7px;padding:7px;border:1px solid rgba(255,255,255,.12);border-radius:999px;background:rgba(7,7,9,.88);box-shadow:0 18px 55px rgba(0,0,0,.42);backdrop-filter:blur(16px);-webkit-backdrop-filter:blur(16px)}
.dsg-dock-btn{position:relative;width:48px;height:48px;min-width:48px;min-height:48px;padding:0;border:0;border-radius:50%;display:grid;place-items:center;color:#fff;text-decoration:none;cursor:pointer;background:linear-gradient(180deg,var(--dsg-red),var(--dsg-red-dark));box-shadow:0 9px 24px rgba(212,0,0,.24);transition:transform .16s ease,box-shadow .16s ease,filter .16s ease;font:inherit;line-height:1}
.dsg-dock-btn:hover{transform:translateY(-2px);box-shadow:0 13px 32px rgba(212,0,0,.34);filter:saturate(1.08)}
.dsg-dock-btn svg{width:22px;height:22px;stroke:currentColor;fill:none;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
.dsg-dock-btn.whatsapp{background:#25d366;box-shadow:0 9px 24px rgba(37,211,102,.24)}
.dsg-dock-btn.whatsapp svg{fill:#fff;stroke:none}
.dsg-dock-btn.assistant{overflow:hidden;background:linear-gradient(180deg,#cf0000,#970000)}
.dsg-dock-btn.assistant img{width:34px;height:30px;object-fit:contain;display:block;filter:drop-shadow(0 3px 6px rgba(0,0,0,.35))}
.dsg-dock-btn.assistant::before{content:"";position:absolute;right:5px;bottom:5px;width:10px;height:10px;border-radius:50%;background:#35d071;border:2px solid #9b0000}
.dsg-dock-btn::after{content:attr(data-label);position:absolute;right:calc(100% + 10px);top:50%;transform:translateY(-50%) translateX(4px);white-space:nowrap;padding:7px 10px;border-radius:10px;background:#111;color:#fff;font-size:12px;font-weight:750;opacity:0;pointer-events:none;transition:.16s ease;border:1px solid rgba(255,255,255,.12);box-shadow:0 8px 24px rgba(0,0,0,.3)}
.dsg-dock-btn:hover::after{opacity:1;transform:translateY(-50%) translateX(0)}
.dsg-contact-dock.chat-open .dsg-dock-btn:not(.assistant){display:none}
.dsg-contact-dock.chat-open{padding:5px}

/* Shared modal */
.dsg-overlay{position:fixed;inset:0;z-index:10040;background:rgba(0,0,0,.7);display:none;align-items:center;justify-content:center;padding:18px;backdrop-filter:blur(7px);-webkit-backdrop-filter:blur(7px)}
.dsg-overlay.open{display:flex}
.dsg-callback-modal,.dsg-testdrive-modal{width:min(540px,100%);border-radius:22px;background:linear-gradient(180deg,#151518,#09090b);border:1px solid rgba(255,255,255,.14);box-shadow:0 35px 100px rgba(0,0,0,.62);color:#fff;padding:24px;position:relative}
.dsg-modal-close{position:absolute;right:14px;top:14px;width:36px;height:36px;padding:0;border-radius:50%;border:1px solid rgba(255,255,255,.12);background:rgba(255,255,255,.06);color:#fff;cursor:pointer;font-size:22px;line-height:1}
.dsg-callback-kicker{font-size:.72rem;text-transform:uppercase;letter-spacing:.14em;color:#ff5555;font-weight:850;margin-bottom:7px}
.dsg-callback-modal h3,.dsg-testdrive-modal h3{font-family:Manrope,Inter,sans-serif;font-size:1.55rem;margin:0 42px 7px 0}
.dsg-callback-modal p,.dsg-testdrive-modal p{color:rgba(255,255,255,.66);margin:0 0 17px;line-height:1.5;font-size:.9rem}
.dsg-testdrive-vehicle{display:flex;align-items:center;gap:9px;margin:-3px 0 15px;padding:10px 12px;border-radius:12px;background:rgba(212,0,0,.10);border:1px solid rgba(255,65,65,.23);font-size:.82rem;font-weight:800}
.dsg-form-grid{display:grid;grid-template-columns:1fr 1fr;gap:10px}
.dsg-field{display:flex;flex-direction:column;gap:6px}.dsg-field.full{grid-column:1/-1}.dsg-field label{font-size:.75rem;color:rgba(255,255,255,.70);font-weight:750}
.dsg-input{width:100%!important;height:44px!important;min-height:44px!important;max-height:44px!important;border-radius:12px!important;border:1px solid rgba(255,255,255,.13)!important;background:rgba(255,255,255,.06)!important;color:#fff!important;padding:0 12px!important;font:inherit!important;outline:none!important;appearance:none;-webkit-appearance:none;color-scheme:dark}
.dsg-input:focus{border-color:rgba(255,55,55,.72)!important;box-shadow:0 0 0 3px rgba(212,0,0,.12)!important}
.dsg-callback-actions{display:flex;gap:10px;margin-top:15px}.dsg-primary,.dsg-secondary{min-height:46px;border-radius:12px;padding:0 15px;font:inherit;font-weight:850;cursor:pointer;text-decoration:none;display:inline-flex;align-items:center;justify-content:center;gap:8px}.dsg-primary{flex:1;border:0;background:linear-gradient(180deg,var(--dsg-red),var(--dsg-red-dark));color:#fff}.dsg-secondary{border:1px solid rgba(255,255,255,.16);background:rgba(255,255,255,.06);color:#fff}.dsg-form-error{min-height:18px;margin-top:8px;color:#ff8585;font-size:.78rem}

/* Chat */
.dsg-chat-panel{position:fixed;right:18px;bottom:82px;z-index:10035;width:410px;max-width:calc(100vw - 28px);height:min(590px,calc(100dvh - 112px));min-height:420px;display:none;grid-template-rows:68px minmax(0,1fr) 62px;border-radius:22px;overflow:hidden;background:linear-gradient(180deg,#111116,#08080a);border:1px solid rgba(255,255,255,.14);box-shadow:0 35px 100px rgba(0,0,0,.62);color:#fff}
.dsg-chat-panel.open{display:grid;animation:dsgChatIn .18s ease-out}@keyframes dsgChatIn{from{opacity:0;transform:translateY(8px) scale(.985)}to{opacity:1;transform:none}}
.dsg-chat-head{min-height:68px;padding:10px 12px;border-bottom:1px solid rgba(255,255,255,.09);display:flex;align-items:center;gap:10px;background:linear-gradient(90deg,rgba(212,0,0,.10),rgba(255,255,255,.025))}
.dsg-bot-avatar{width:46px;height:46px;min-width:46px;border-radius:13px;display:grid;place-items:center;background:#070709;border:1px solid rgba(255,255,255,.12);box-shadow:0 8px 24px rgba(0,0,0,.32);overflow:hidden}
.dsg-bot-avatar img{width:39px;height:34px;object-fit:contain;display:block}
.dsg-chat-title-row{display:flex;align-items:center;gap:7px}.dsg-chat-title{font-family:Manrope,Inter,sans-serif;font-size:.98rem;font-weight:900;line-height:1.1}.dsg-live-pill{display:inline-flex;align-items:center;gap:4px;padding:3px 6px;border-radius:999px;background:rgba(53,208,113,.10);border:1px solid rgba(53,208,113,.20);color:#7ce6a4;font-size:.56rem;font-weight:850;text-transform:uppercase;letter-spacing:.04em}.dsg-live-pill::before{content:"";width:5px;height:5px;border-radius:50%;background:#35d071}.dsg-chat-sub{font-size:.67rem;color:rgba(255,255,255,.52);margin-top:4px}.dsg-chat-close{margin-left:auto;width:34px;height:34px;min-width:34px;padding:0;border-radius:50%;border:1px solid rgba(255,255,255,.10);background:rgba(255,255,255,.05);color:#fff;cursor:pointer;font-size:19px;line-height:1}
.dsg-chat-body{min-height:0;overflow:auto;overscroll-behavior:contain;padding:13px;scroll-behavior:smooth}
.dsg-welcome-card{margin:0 0 11px;padding:13px;border-radius:16px;background:linear-gradient(145deg,rgba(212,0,0,.13),rgba(255,255,255,.04));border:1px solid rgba(255,255,255,.09)}
.dsg-welcome-card strong{display:block;font-family:Manrope,Inter,sans-serif;font-size:.93rem;margin-bottom:4px}.dsg-welcome-card p{margin:0;color:rgba(255,255,255,.67);font-size:.8rem;line-height:1.45}
.dsg-msg{max-width:90%;margin:0 0 9px;padding:9px 11px;border-radius:14px;font-size:.84rem;line-height:1.47;white-space:pre-line;overflow-wrap:anywhere}.dsg-msg.bot{background:rgba(255,255,255,.07);border:1px solid rgba(255,255,255,.075);border-bottom-left-radius:5px}.dsg-msg.user{margin-left:auto;background:linear-gradient(180deg,var(--dsg-red),var(--dsg-red-dark));border-bottom-right-radius:5px}.dsg-msg.bot strong{color:#fff}
.dsg-chat-actions{display:flex;gap:6px;flex-wrap:wrap;margin:2px 0 11px}.dsg-chat-chip{border:1px solid rgba(255,255,255,.13);background:rgba(255,255,255,.045);color:#fff;border-radius:999px;padding:6px 9px;font:inherit;font-size:.7rem;font-weight:750;cursor:pointer}.dsg-chat-chip:hover{border-color:rgba(255,55,55,.55);background:rgba(212,0,0,.11)}
.dsg-chat-link{display:inline-flex;align-items:center;gap:6px;margin:-1px 0 11px;padding:8px 10px;border-radius:10px;background:rgba(212,0,0,.13);border:1px solid rgba(212,0,0,.30);color:#fff;text-decoration:none;font-size:.75rem;font-weight:850}
.dsg-chat-note{margin:4px 0 11px;color:rgba(255,255,255,.38);font-size:.65rem;line-height:1.4}
.dsg-car-wrap{margin:0 0 9px}.dsg-car-card{display:grid;grid-template-columns:72px 1fr;gap:9px;padding:8px;border-radius:13px 13px 0 0;border:1px solid rgba(255,255,255,.09);background:rgba(255,255,255,.04);color:#fff;text-decoration:none}.dsg-car-card img{width:72px;height:62px;border-radius:9px;object-fit:cover;background:#181818}.dsg-car-card-title{font-size:.75rem;line-height:1.25;font-weight:850;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}.dsg-car-card-meta{font-size:.67rem;color:rgba(255,255,255,.55);margin-top:4px}.dsg-car-card-price{font-size:.79rem;color:#ff6464;font-weight:900;margin-top:3px}.dsg-car-actions{display:flex;border:1px solid rgba(255,255,255,.09);border-top:0;border-radius:0 0 13px 13px;overflow:hidden}.dsg-car-actions button,.dsg-car-actions a{flex:1;min-height:32px;border:0;background:rgba(255,255,255,.035);color:#fff;text-decoration:none;font:750 .67rem/1 Inter,Manrope,system-ui,-apple-system,"Segoe UI",Arial,sans-serif;display:flex;align-items:center;justify-content:center;cursor:pointer}.dsg-car-actions button{border-left:1px solid rgba(255,255,255,.08);background:rgba(212,0,0,.10)}
.dsg-chat-inputbar{height:62px!important;min-height:62px!important;max-height:62px!important;border-top:1px solid rgba(255,255,255,.09);padding:9px;display:flex;align-items:center;gap:7px;background:rgba(0,0,0,.28);margin:0!important}.dsg-chat-input{flex:1;min-width:0;width:auto!important;height:42px!important;min-height:42px!important;max-height:42px!important;border-radius:12px!important;border:1px solid rgba(255,255,255,.11)!important;background:rgba(255,255,255,.055)!important;color:#fff!important;padding:0 11px!important;font:inherit!important;font-size:15px!important;line-height:42px!important;outline:none!important;appearance:none;-webkit-appearance:none}.dsg-chat-input:focus{border-color:rgba(255,55,55,.62)!important;box-shadow:0 0 0 3px rgba(212,0,0,.11)!important}.dsg-chat-input::placeholder{color:rgba(255,255,255,.38);opacity:1}.dsg-chat-send{width:42px;height:42px;min-width:42px;min-height:42px;padding:0;border:0;border-radius:12px;background:var(--dsg-red);color:#fff;cursor:pointer;display:grid;place-items:center}.dsg-chat-send svg{width:18px;height:18px;fill:none;stroke:currentColor;stroke-width:2.2}

@media(max-width:768px){
  .dsg-contact-dock{right:10px;bottom:calc(76px + env(safe-area-inset-bottom));padding:5px;gap:6px;background:rgba(7,7,9,.92)}
  .dsg-contact-dock .dsg-dock-btn{width:45px;height:45px;min-width:45px;min-height:45px}
  .dsg-contact-dock .dsg-dock-btn.whatsapp,.dsg-contact-dock .dsg-dock-btn.annonces{display:none}
  .dsg-dock-btn::after{display:none}
  .dsg-chat-panel{left:8px;right:8px;bottom:calc(132px + env(safe-area-inset-bottom));width:auto;max-width:none;height:min(570px,67dvh);min-height:390px;max-height:calc(100dvh - 150px);grid-template-rows:64px minmax(0,1fr) 60px;border-radius:18px}
  .dsg-chat-head{min-height:64px;padding:9px 10px}.dsg-bot-avatar{width:43px;height:43px;min-width:43px}.dsg-bot-avatar img{width:36px;height:31px}
  .dsg-chat-body{padding:11px}.dsg-msg{max-width:94%;font-size:.82rem}.dsg-chat-chip{font-size:.69rem;padding:6px 8px}
  .dsg-chat-inputbar{height:60px!important;min-height:60px!important;max-height:60px!important;padding:9px}.dsg-chat-input{height:42px!important;min-height:42px!important;max-height:42px!important}.dsg-chat-send{width:42px;height:42px}
  .dsg-overlay{padding:11px}.dsg-callback-modal,.dsg-testdrive-modal{padding:20px 15px;border-radius:19px}.dsg-form-grid{grid-template-columns:1fr}.dsg-field.full{grid-column:auto}.dsg-callback-actions{flex-direction:column}.dsg-primary,.dsg-secondary{width:100%}
}
@media(max-width:380px){.dsg-chat-panel{left:6px;right:6px;bottom:calc(128px + env(safe-area-inset-bottom));height:min(535px,65dvh);min-height:360px}.dsg-chat-title{font-size:.92rem}.dsg-chat-sub{font-size:.63rem}}
@media(max-height:650px) and (min-width:769px){.dsg-chat-panel{height:calc(100dvh - 100px);min-height:0;bottom:74px}}

/* ═══════════════ V21 — Agenda essai ═══════════════ */
.dsg-testdrive-modal{width:min(650px,100%);max-height:min(92vh,860px);overflow:auto;overscroll-behavior:contain}
.dsg-booking-kicker{color:#63e996}
.dsg-booking-promise{margin-bottom:12px!important}
.dsg-testdrive-vehicle{background:rgba(0,200,83,.09);border-color:rgba(0,200,83,.24)}
.dsg-booking-trust{display:flex;gap:7px;flex-wrap:wrap;margin:-5px 0 16px}
.dsg-booking-trust span{font-size:.69rem;font-weight:800;color:#a8f5c5;background:rgba(0,200,83,.08);border:1px solid rgba(0,200,83,.18);border-radius:999px;padding:5px 8px}
.dsg-booking-step{display:flex;align-items:center;gap:8px;margin:13px 0 8px;color:#fff;font-size:.79rem;font-weight:850}
.dsg-booking-step strong{display:grid;place-items:center;width:23px;height:23px;border-radius:50%;background:#063d1d;color:#6df09e;border:1px solid rgba(0,200,83,.30);font-size:.7rem}
.dsg-booking-days{display:flex;gap:8px;overflow-x:auto;padding:1px 1px 8px;scrollbar-width:thin}
.dsg-booking-day{min-width:82px;height:64px;border-radius:13px;border:1px solid rgba(255,255,255,.12);background:rgba(255,255,255,.045);color:#fff;cursor:pointer;padding:7px 9px;display:flex;flex-direction:column;align-items:flex-start;justify-content:center;transition:.15s ease}
.dsg-booking-day span{font-size:.65rem;color:rgba(255,255,255,.58);text-transform:capitalize}.dsg-booking-day strong{font-size:1.02rem;margin-top:2px}.dsg-booking-day:hover{border-color:rgba(99,233,150,.42);background:rgba(0,200,83,.07)}
.dsg-booking-day.active{background:linear-gradient(180deg,#0c632f,#08461f);border-color:rgba(99,233,150,.62);box-shadow:0 8px 24px rgba(0,160,65,.18)}.dsg-booking-day.active span{color:#c9f8da}
.dsg-booking-slots{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:7px;min-height:43px}
.dsg-booking-slot{height:42px;border-radius:10px;border:1px solid rgba(255,255,255,.12);background:rgba(255,255,255,.045);color:#fff;font:inherit;font-size:.79rem;font-weight:850;cursor:pointer;transition:.15s ease}
.dsg-booking-slot:hover{border-color:rgba(99,233,150,.45);background:rgba(0,200,83,.08)}.dsg-booking-slot.active{background:#0a6a31;border-color:#40de7d;box-shadow:0 8px 22px rgba(0,170,70,.20)}
.dsg-booking-empty{grid-column:1/-1;padding:12px;border-radius:10px;background:rgba(255,255,255,.035);color:rgba(255,255,255,.54);font-size:.76rem;text-align:center}.dsg-booking-empty.error{color:#ff9a9a;border:1px solid rgba(255,80,80,.16)}
.dsg-booking-fallback{grid-column:1/-1;color:#e8c76e;background:rgba(205,150,0,.08);border:1px solid rgba(225,176,40,.18);border-radius:9px;padding:8px 10px;font-size:.68rem;line-height:1.4}
.dsg-booking-form{margin-top:2px}.dsg-optional{font-weight:500;color:rgba(255,255,255,.42)}
.dsg-booking-summary{margin:13px 0 -2px;border-radius:11px;padding:10px 12px;background:rgba(0,200,83,.08);border:1px solid rgba(0,200,83,.20);color:#bff7d2;font-size:.79rem;font-weight:800}
.dsg-booking-confirm{background:linear-gradient(180deg,#10a84d,#087232)!important;box-shadow:0 10px 28px rgba(0,180,70,.22)}
.dsg-booking-confirm:hover:not(:disabled){filter:brightness(1.08)}.dsg-booking-confirm:disabled{opacity:.42;cursor:not-allowed;box-shadow:none}.dsg-booking-confirm.confirmed{background:linear-gradient(180deg,#13b856,#087232)!important}
.dsg-form-error.success{color:#76eca1}.dsg-hp{position:absolute!important;left:-9999px!important;width:1px!important;height:1px!important;overflow:hidden!important}
.btn-test-drive{background:linear-gradient(180deg,#0b8e40,#08672f)!important;border-color:rgba(80,225,135,.40)!important;color:#fff!important;box-shadow:0 7px 18px rgba(0,160,65,.14)}
.btn-test-drive:hover{filter:brightness(1.08)}
.actions .btn.test{background:linear-gradient(180deg,#0b8e40,#08672f)!important;border-color:rgba(80,225,135,.40)!important;box-shadow:0 10px 26px rgba(0,160,65,.17)}
@media(max-width:600px){.dsg-testdrive-modal{max-height:94vh}.dsg-booking-slots{grid-template-columns:repeat(3,minmax(0,1fr))}.dsg-booking-day{min-width:76px;height:60px}.dsg-booking-trust{gap:5px}.dsg-booking-trust span{font-size:.62rem}}

/* V21.1 HOTFIX — CTA réservation vert, chargé après les anciens thèmes */
.btn-test-drive,.vmodal-btn.test-drive,.vehicle-cta-test,#testDrive,#serviceTestDrive{
  background:linear-gradient(180deg,#12a84e,#087231)!important;
  border-color:rgba(87,235,143,.55)!important;
  color:#fff!important;
  box-shadow:0 10px 28px rgba(0,180,70,.20)!important;
}
.btn-test-drive:hover,.vmodal-btn.test-drive:hover,.vehicle-cta-test:hover,#testDrive:hover,#serviceTestDrive:hover{filter:brightness(1.08)!important;border-color:rgba(115,246,165,.78)!important}


/* V21.5 — réservation plus sobre */
.dsg-testdrive-modal{width:min(680px,100%)}
.dsg-booking-promise{color:rgba(255,255,255,.62);font-size:.88rem;line-height:1.5;margin-top:-2px!important;margin-bottom:13px!important}
.dsg-testdrive-vehicle{padding:11px 13px;border-radius:12px;font-size:.86rem;font-weight:800;line-height:1.35;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.dsg-booking-trust{display:none!important}
.dsg-booking-step{margin:16px 0 9px;font-size:.78rem;letter-spacing:.02em;color:rgba(255,255,255,.78)}
.dsg-booking-step strong{display:none!important}
.dsg-booking-days{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:7px;overflow:visible;padding:0}
.dsg-booking-day{min-width:0;width:100%;height:59px;padding:7px 9px;border-radius:12px}
.dsg-booking-day span{white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:100%;font-size:.62rem}
.dsg-booking-day strong{font-size:.98rem}
.dsg-booking-slots{grid-template-columns:repeat(4,minmax(0,1fr));gap:7px}
.dsg-booking-slot{height:40px}
.dsg-booking-fallback{margin-top:2px;font-size:.65rem}
.dsg-booking-summary{font-size:.75rem}
@media(max-width:600px){
  .dsg-booking-days{grid-template-columns:repeat(3,minmax(0,1fr))}
  .dsg-booking-slots{grid-template-columns:repeat(3,minmax(0,1fr))}
  .dsg-testdrive-modal{padding:18px 14px}
}
@media(max-width:390px){.dsg-booking-days{grid-template-columns:repeat(2,minmax(0,1fr))}}


/* V22.4.2 — Partager : même composant pour toutes les voitures, desktop et iOS */
.vehicle-card-tools .card-tool { touch-action:manipulation; -webkit-tap-highlight-color:transparent; }
.vehicle-card-tools .dsg-card-share {
  color:#fff; background:rgba(13,15,19,.83);
  border-color:rgba(255,255,255,.28);
}
.vehicle-card-tools .dsg-card-share svg,
.dsg-vmodal-share svg { width:19px;height:19px;display:block;flex:0 0 auto; }
.vehicle-card-tools .dsg-card-share:focus-visible,
.dsg-vmodal-share:focus-visible { outline:2px solid #f56b6b;outline-offset:3px; }
@media(hover:hover){
  .vehicle-card-tools .dsg-card-share:hover { background:rgba(35,37,43,.97);border-color:rgba(255,255,255,.6); }
}
.dsg-vmodal-price-wrap { display:flex;flex-direction:column;align-items:flex-end;gap:9px;flex-shrink:0; }
.dsg-vmodal-share {
  border:1px solid rgba(255,255,255,.17);border-radius:10px;
  background:rgba(255,255,255,.07);color:#fff;
  padding:7px 11px;min-height:36px;
  display:inline-flex;align-items:center;justify-content:center;gap:7px;
  font:750 .76rem/1.1 Inter,Manrope,system-ui,-apple-system,sans-serif;
  cursor:pointer;touch-action:manipulation;-webkit-tap-highlight-color:transparent;
}
.dsg-vmodal-share:hover { background:rgba(255,255,255,.13);border-color:rgba(255,255,255,.35); }
.dsg-vmodal-share svg { width:16px;height:16px; }
.vmodal-head > div:first-child { min-width:0; }
@media(max-width:600px){
  .vehicle-card-tools { top:8px;right:8px;gap:5px; }
  .vehicle-card-tools .card-tool { width:40px;height:40px;border-radius:11px; }
  .vehicle-card-tools .dsg-card-share svg { width:19px;height:19px; }
  .dsg-vmodal-share { min-height:40px;padding:8px 10px;font-size:.74rem; }
}
@media(max-width:360px){
  .vehicle-card-tools .card-tool { width:38px;height:38px; }
  .vmodal-head { gap:8px; }
  .dsg-vmodal-share { padding:8px 9px; }
}
@media(prefers-reduced-motion:reduce){ .vehicle-card-tools .card-tool { transition:none; } }