@font-face {
    font-family: "Renoric";
    src:
        url("../fonts/Renoric.otf") format("opentype");
    font-weight: 400;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: "Neon";
    src:
        url("../fonts/neon-minimal-modern-display-typeface-2023-11-27-04-52-25-utc/Web Fonts/Neon-LightItalic.woff2") format("woff2"),
        url("../fonts/neon-minimal-modern-display-typeface-2023-11-27-04-52-25-utc/Web Fonts/Neon-LightItalic.woff") format("woff"),
        url("../fonts/neon-minimal-modern-display-typeface-2023-11-27-04-52-25-utc/Web Fonts/Neon-LightItalic.ttf") format("truetype");
    font-weight: 300;
    font-style: italic;
    font-display: swap;
}


/* ---- Styles pour l'ajout au panier (PHP) ---- */
.config-add-form {
    display: inline-block;
    width: 100%;
}

.config-add-form .config-add {
    width: 100%;
    transition: all 0.3s ease;
    position: relative;
}

.config-add:disabled {
    opacity: 0.7;
    cursor: not-allowed;
}

.config-add:disabled::after {
    content: '';
    position: absolute;
    top: 50%;
    left: 50%;
    width: 20px;
    height: 20px;
    margin: -10px 0 0 -10px;
    border: 2px solid transparent;
    border-top: 2px solid #fff;
    border-radius: 50%;
    animation: spin 1s linear infinite;
}

@keyframes spin {
    0% {
        transform: rotate(0deg);
    }

    100% {
        transform: rotate(360deg);
    }
}

/* Messages d'erreur pour l'ajout au panier */
.config-actions .alert {
    margin-top: 10px;
    padding: 10px 15px;
    border-radius: 4px;
    font-size: 14px;
}

.config-actions .alert-danger {
    background-color: #f8d7da;
    border: 1px solid #f5c6cb;
    color: #721c24;
}

.config-actions .alert-success {
    background-color: #d4edda;
    border: 1px solid #c3e6cb;
    color: #155724;
}

/* ---- Styles pour l'ajout au panier ---- */
.config-add {
    transition: all 0.3s ease;
    position: relative;
    display: block;
    width: 100%;
}

/* ---- Page Contact : image de fond plein écran ---- */
html,
body {
    min-height: 100%;
}

/* Polices globales pour coller à la maquette */
body {
    font-family: 'Inter', system-ui, -apple-system, Segoe UI, Roboto, Helvetica, Arial, 'Apple Color Emoji', 'Segoe UI Emoji', 'Segoe UI Symbol';
}

.use-barlow,
.product-hero-title,
.spec-value,
.consumption-title,
.product-hero-cta .btn,
.product-hero-fuel {
    font-family: 'Barlow Condensed', 'Inter', Arial, sans-serif;
}

body.page-contact {
    background: #000 url('/modules/exclusivecontact/views/img/contact.png') !important;
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    color: #fff;

}

#left-column {
    display: none;
}

body#index {
    background: #1E1E1E !important;
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    color: #fff;

}

.page-contact #wrapper,
.page-contact main,
.page-contact .page-content,
.page-contact .container,
.page-contact .container-fluid {
    background: transparent !important;
}

/* Même transparence des conteneurs sur la page d'accueil */
#index #wrapper,
#index main,
#index .page-content,
#index .container,
#index .container-fluid {
    background: transparent !important;
}




#header {
    background: #0f0f0f;
}

/* Header transparent sur la page contact pour laisser voir l'image de fond */
.page-contact #header,
.page-contact #header .header-top,
.page-contact #header .header-nav,
.page-contact #header .header-bottom {
    background: transparent !important;
    background-image: none !important;
    box-shadow: none !important;
}

/* Header transparent sur la page d'accueil pour laisser voir l'image de fond */
#index #header,
#index #header .header-top,
#index #header .header-nav,
#index #header .header-bottom {
    background: transparent !important;
    background-image: none !important;
    box-shadow: none !important;
}



/* Slider height override */
@media (min-width: 768px) {
    .carousel .carousel-inner {
        height: 480px;
    }
}

.carousel .carousel-item img {
    width: 100%;
    height: 100%;
    -o-object-fit: cover;
    object-fit: cover;
    -o-object-position: center center;
    object-position: center center;
}

/* Coins arrondis et rognage propre des slides */
.carousel .carousel-item figure {
    border-radius: 16px;
    overflow: hidden;
}

/* Optionnel: arrondir aussi le conteneur si souhaité */
.carousel .carousel-inner {
    border-radius: 16px;
}


/* Bordure et arrondis du panneau footer (gérés côté thème) */
footer {
    background: #0f0f0f;
    /* panneau intérieur */

    border-bottom: none;
    /* pas de bordure en bas */
    border-top-right-radius: 100px;
    border-top-left-radius: 100px;
}

/* Réseaux sociaux dans le footer */
.modern-footer .social-squares {
    display: flex;
    gap: 10px;
    margin-top: 8px;
}

.modern-footer .social-squares .square {
    width: 40px;
    height: 40px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border: 1px solid rgba(255, 255, 255, 0.25);
    border-radius: 8px;
    color: #fff;
    text-decoration: none;
    transition: background-color .2s ease, border-color .2s ease, transform .1s ease;
}

.modern-footer .social-squares .square:hover {
    background: rgba(255, 255, 255, 0.06);
    border-color: rgba(255, 255, 255, 0.5);
    transform: translateY(-2px);
}

.modern-footer .social-squares .square i {
    font-size: 16px;
}

/* Typo eco-text: hérite de la taille globale et respecte les marges de p */
.modern-footer .eco-text {
    font-size: inherit;
}

.modern-footer .eco-text p {
    margin-top: 0;
    margin-bottom: 1rem;
    font-size: inherit;
}

.header-nav {
    display: none;
}

.cart-products-count {
    color: white;
    font-size: 6px;
    background: rgba(255, 255, 255, 0.25);
    height: 16px;
    width: 16px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    position: absolute;
    top: -3px;
    right: -10px;
}

.shopping-cart {
    width: 30px;
    height: 30px;
}

.material-icons {
    width: 30px;
    height: 30px;
}

.shopping-cart img {
    width: 100%;
    height: 100%;
}

.header-right-section {
    margin-left: auto;
    display: flex;
    align-items: center;
    gap: 20px;
    display: inline-flex;

}

/* Menu hamburger */
.hamburger-menu {
    cursor: pointer;
    padding: 10px;
    transition: background-color 0.3s ease;
    border-radius: 8px;
}

.hamburger-menu:hover {
    background: rgba(255, 255, 255, 0.1);
}

.hamburger-menu i {
    font-size: 28px;
    color: #fff;
}


/* Panier dans le header */
#_desktop_cart {
    display: flex;
    align-items: center;
}

.blockcart {
    position: relative;
}

/* ==== Menu hamburger style moderne ==== */

/* Overlay sombre */
.hamburger-menu-overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.7);
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.3s ease, visibility 0.3s ease;
    z-index: 999;
}

/* Container principal */
.hamburger-menu-panel {
    position: fixed;
    top: 0;
    right: 0;
    width: 100%;
    height: 100vh;
    z-index: 1000;
    pointer-events: none;
}

/* Wrapper du contenu (partie blanche + bande) */
.hamburger-menu-content {
    position: fixed;
    top: 0;
    right: -100%;
    width: 100%;
    height: 100vh;
    background: #fff;
    box-shadow: -4px 0 20px rgba(0, 0, 0, 0.5);
    transition: right 0.4s cubic-bezier(0.4, 0, 0.2, 1);
    z-index: 1001;
    display: flex;
    pointer-events: all;
}

/* État ouvert */
.hamburger-menu-panel.active .hamburger-menu-overlay {
    opacity: 1;
    visibility: visible;
    pointer-events: all;
}

.hamburger-menu-panel.active .hamburger-menu-content {
    right: 0;
}

/* Partie principale (blanche) - 2/3 de l'écran */
.hamburger-menu-main {
    flex: 1;
    display: flex;
    flex-direction: column;
    padding: 3rem 4rem;
    overflow-y: auto;
    background: linear-gradient(135deg, #0a0a0a 0%, #1a1a1a 100%);
    position: relative;
}

/* Header avec bouton fermer */
.hamburger-menu-header {
    display: flex;
    justify-content: flex-end;
    margin-bottom: 2rem;
}

.hamburger-close {
    background: rgba(255, 255, 255, 0.05);
    border: 1px solid rgba(255, 255, 255, 0.1);
    cursor: pointer;
    padding: 0.75rem;
    border-radius: 50%;
    transition: all 0.3s ease;
    display: flex;
    align-items: center;
    justify-content: center;
    backdrop-filter: blur(10px);
}

.hamburger-close:hover {
    background: rgba(255, 255, 255, 0.1);
    border-color: rgba(255, 255, 255, 0.3);
}

.hamburger-close i {
    font-size: 28px;
    color: #fff;
}

/* Corps du menu */
.hamburger-menu-body {
    flex: 1;
    display: flex;
    flex-direction: column;
    justify-content: center;
}

/* Navigation principale */
.main-navigation ul {
    list-style: none;
    padding: 0;
    margin: 0;
}

.main-navigation li {
    border-bottom: 1px solid rgba(255, 255, 255, 0.08);
    position: relative;
    overflow: hidden;
}

.main-navigation li::before {
    content: '';
    position: absolute;
    left: 0;
    bottom: 0;
    width: 0;
    height: 2px;
    background: linear-gradient(90deg, #fff, transparent);
    transition: width 0.4s cubic-bezier(0.4, 0, 0.2, 1);
}

.main-navigation li:hover::before {
    width: 100%;
}

.main-navigation a {
    display: block;
    padding: 1.5rem 0;
    font-size: 3rem;
    font-weight: 700;
    text-transform: uppercase;
    color: rgba(255, 255, 255, 0.5) !important;
    text-decoration: none;
    transform: translateX(0);
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    position: relative;
    letter-spacing: 0.02em;
    line-height: 1.2;
}

.main-navigation a::after {
    content: '→';
    position: absolute;
    right: -2rem;
    opacity: 0;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    color: #fff;
    font-size: 2.5rem;
}

.main-navigation a:hover,
.main-navigation a.active {
    color: #fff !important;
    transform: translateX(3rem);
    text-shadow: 0 0 30px rgba(255, 255, 255, 0.3);
}

.main-navigation a:hover::after {
    opacity: 1;
    right: -4rem;
}

/* Navigation secondaire (en bas) */
.secondary-navigation {
    margin-top: 50px;
}

.secondary-navigation ul {
    list-style: none;
    padding: 0;
    margin: 0;
    display: flex;
    flex-direction: column;
    gap: 1rem;
}

.secondary-navigation a {
    font-size: 0.9rem;
    text-transform: uppercase;
    color: rgba(255, 255, 255, 0.4) !important;
    text-decoration: none;
    transition: all 0.3s ease;
    letter-spacing: 0.1em;
    font-weight: 500;
    display: inline-block;
    position: relative;
    padding-left: 0;
}

/* Bande décorative à droite */
.hamburger-menu-sidebar {
    width: 33.333%;
    background: linear-gradient(180deg, #000 0%, #1a1a1a 100%);
    display: flex;
    align-items: center;
    justify-content: center;
    position: relative;
    overflow: hidden;
}

.hamburger-menu-sidebar::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 1px;
    height: 100%;
    background: linear-gradient(180deg, transparent, rgba(255, 255, 255, 0.1), transparent);
}

.sidebar-images {
    position: relative;
    width: 300px;
    height: 300px;
    z-index: 10;
}

.sidebar-images::before {
    content: '';
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 350px;
    height: 350px;
    border-radius: 50%;
    background: radial-gradient(circle, rgba(255, 255, 255, 0.15) 0%, rgba(255, 255, 255, 0.05) 40%, transparent 70%);
    z-index: -1;
    animation: pulse-glow 3s ease-in-out infinite;
}

.sidebar-images::after {
    content: '';
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%) rotate(0deg);
    width: 400px;
    height: 400px;
    border-radius: 50%;
    background: conic-gradient(from 0deg,
            transparent 0deg,
            rgba(255, 255, 255, 0.1) 90deg,
            transparent 180deg,
            rgba(255, 255, 255, 0.1) 270deg,
            transparent 360deg);
    z-index: -2;
    animation: rotate-shine 8s linear infinite;
    filter: blur(20px);
}

@keyframes pulse-glow {

    0%,
    100% {
        opacity: 0.6;
        transform: translate(-50%, -50%) scale(1);
    }

    50% {
        opacity: 1;
        transform: translate(-50%, -50%) scale(1.05);
    }
}

@keyframes rotate-shine {
    from {
        transform: translate(-50%, -50%) rotate(0deg);
    }

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

.sidebar-image {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%) scale(0.8);
    width: auto;
    height: auto;
    max-width: 250px;
    max-height: 250px;
    opacity: 0;
    transition: opacity 0.5s ease, transform 0.5s cubic-bezier(0.4, 0, 0.2, 1);
    pointer-events: none;
    filter: drop-shadow(0 10px 30px rgba(0, 0, 0, 0.5));
}

.sidebar-image.active {
    opacity: 1;
    transform: translate(-50%, -50%) scale(1);
}

/* Responsive */
@media (max-width: 1200px) {
    .main-navigation a {
        font-size: 2.5rem;
    }

    .main-navigation a::after {
        font-size: 2rem;
    }

    .main-navigation a:hover {
        transform: translateX(-2rem);
    }
}

@media (max-width: 768px) {
    .hamburger-menu-content {
        flex-direction: column;
    }

    .hamburger-menu-main {
        flex: 1;
        padding: 2rem 1.5rem;
    }

    .hamburger-menu-sidebar {
        display: none;
    }

    .main-navigation a {
        font-size: 2rem;
        padding: 1.5rem 0;
    }

    .main-navigation a::after {
        font-size: 1.5rem;
        right: -1.5rem;
    }

    .main-navigation a:hover {
        transform: translateX(2rem);
    }

    .main-navigation a:hover::after {
        right: -3rem;
    }

    .secondary-navigation {
        padding-top: 2rem;
    }
}

.js-content-wrapper {
    padding-inline: 0px !important;
}

.carousel {
    padding-inline: 60px !important;
    margin-top: 100px;
}


/* ====== Page Produit - style paiement / carte récap ====== */

body#product {
    /* Fond sombre uniforme comme sur la maquette produit */
    background: #0b0b0b !important;
    background-image: radial-gradient(1200px 500px at 50% -200px, rgba(255, 255, 255, 0.06), transparent 60%);
    background-repeat: no-repeat;
    background-position: top center;
    color: #fff;
}

.payment-layout {
    padding: 30px 0;
}

.payment-panel {
    background: linear-gradient(180deg, rgba(255, 255, 255, 0.06), rgba(255, 255, 255, 0.03));
    border-radius: 18px;
    padding: 24px;
    border: 1px solid rgba(255, 255, 255, 0.08);
    box-shadow: 0 10px 40px rgba(0, 0, 0, 0.5) inset;
}

.payment-image-panel {
    display: flex;
    flex-direction: column;
}

.payment-cover {
    background: radial-gradient(1200px 400px at 40% 80%, rgba(255, 255, 255, 0.06), transparent 60%);
    border-radius: 14px;
    padding: 8px;
}

.payment-cover-arrows i {
    color: rgba(255, 255, 255, 0.6);
}

.payment-recap {
    display: flex;
    flex-direction: column;
    gap: 16px;
}

.payment-title {
    color: #fff;
    font-weight: 800;
    letter-spacing: .04em;
    text-transform: uppercase;
}

.payment-price-block {
    background: rgba(0, 0, 0, 0.25);
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: 12px;
    padding: 12px 16px;
}

.payment-information .product-description {
    color: rgba(255, 255, 255, 0.85);
}

.payment-form {
    display: flex;
    flex-direction: column;
    gap: 14px;
}

.payment-variants,
.payment-discounts,
.payment-additional-info {
    background: rgba(255, 255, 255, 0.04);
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: 12px;
    padding: 12px;
}

.payment-cta-bar {
    background: rgba(255, 255, 255, 0.06);
    border: 1px solid rgba(255, 255, 255, 0.12);
    border-radius: 14px;
    padding: 10px 12px;
}

.payment-cta-bar .btn,
.payment-cta-bar .add-to-cart,
.payment-cta-bar button[type="submit"] {
    width: 100%;
    text-transform: uppercase;
    letter-spacing: .3em;
    border-radius: 10px;
    background: linear-gradient(180deg, #1f1f1f, #0f0f0f);
    border: 1px solid rgba(255, 255, 255, 0.18);
    color: #fff;
    padding: 14px 20px;
}

.payment-cta-bar .btn:hover {
    filter: brightness(1.15);
}

.payment-reassurance {
    margin-top: 8px;
}

.payment-tabs .nav-link {
    color: rgba(255, 255, 255, 0.7);
}

/* Rendre la boîte des onglets totalement transparente */
.tabs.payment-tabs,
.payment-tabs {
    background: transparent !important;
    border: none !important;
    box-shadow: none !important;
}

.payment-tabs .tab-content,
.payment-tabs .tab-pane {
    background: transparent !important;
    border: none !important;
}

/* Onglets internes transparents + texte blanc */
.payment-tabs .nav,
.payment-tabs .nav-tabs {
    background: transparent !important;
    border: none !important;
    box-shadow: none !important;
}

.payment-tabs .nav-tabs .nav-item {
    border: none !important;
}

.payment-tabs .nav-tabs .nav-link {
    color: #ffffff !important;
    background: transparent !important;
    border: none !important;
}

.payment-tabs .nav-tabs .nav-link:hover,
.payment-tabs .nav-tabs .nav-link.active,
.payment-tabs .nav-tabs .nav-link:focus {
    color: #ffffff !important;
    background: transparent !important;
    border: none !important;
    box-shadow: none !important;
}

.payment-tabs .tab-content,
.payment-tabs .tab-content * {
    color: #ffffff !important;
}

.tabs .payment-tabs {
    background: transparent !important;
}

@media (max-width: 991.98px) {
    .payment-panel {
        padding: 16px;
    }
}

/* ===== Blocs d'information dans les onglets produit ===== */
.payment-tabs .tab-content>.tab-pane>.product-description,
.payment-tabs .tab-content>.tab-pane>.product-attachments,
.payment-tabs .tab-content>.tab-pane>.data-sheet,
.payment-tabs .tab-content>.tab-pane>section,
.payment-tabs .tab-content>.tab-pane>div[data-block],
.payment-tabs .tab-content>.tab-pane>div.block,
.payment-tabs .tab-content>.tab-pane>div.panel {
    background: rgba(255, 255, 255, 0.06);
    border: 1px solid rgba(255, 255, 255, 0.12);
    border-radius: 14px;
    padding: 20px;
    margin-bottom: 14px;
}

/* Détails techniques (data-sheet) */
.payment-tabs .tab-content .data-sheet {
    color: #fff;
}

.payment-tabs .tab-content .data-sheet dt,
.payment-tabs .tab-content .data-sheet dd {
    background: transparent !important;
    border: none !important;
    color: #fff !important;
}

.payment-tabs .tab-content .data-sheet dd {
    opacity: .9;
}

/* Pièces jointes */
.payment-tabs .tab-content .product-attachments .attachment {
    background: rgba(0, 0, 0, 0.2);
    border: 1px solid rgba(255, 255, 255, 0.12);
    border-radius: 10px;
    padding: 12px;
    color: #fff;
}

/* Espacements du conteneur d'onglet */
.payment-tabs #tab-content {
    gap: 14px;
    display: flex;
    flex-direction: column;
}

/* ====== Nouveau layout produit: Hero + CTA + Specs ====== */
.product-hero {
    position: relative;
    padding: 60px 0 90px;
    /* espace bas pour loger le texte en absolu */
}

.product-hero-bg {
    /* Panneau et halo derrière la voiture pour un rendu identique */
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 520px;
    display: block;
    background:
        radial-gradient(1100px 380px at 50% 140px, rgba(255, 255, 255, 0.08), transparent 60%),
        linear-gradient(180deg, rgba(255, 255, 255, 0.04), rgba(255, 255, 255, 0.02) 6%, rgba(0, 0, 0, 0) 100%),
        #0b0b0b;
}

.hero-watermark {
    position: absolute;
    top: 30px;
    left: 50%;
    transform: translateX(-50%);
    font-size: clamp(64px, 10vw, 180px);
    font-weight: 900;
    text-transform: uppercase;
    letter-spacing: .12em;
    color: rgba(255, 255, 255, 0.06);
    pointer-events: none;
    user-select: none;
    width: 90vw;
    /* permet le retour à la ligne si nécessaire */
    text-align: center;
    white-space: normal;
    overflow-wrap: anywhere;
    word-break: break-word;
    line-height: .9;
}

.product-hero-inner {
    position: relative;
    display: grid;
    grid-template-columns: 1fr;
    gap: 8px;
    /* texte juste sous l'image */
    align-items: start;
    justify-items: center;
}

.product-hero-visual {
    filter: drop-shadow(0 20px 60px rgba(0, 0, 0, 0.8));
    padding: 8px;
    /* marge interne réduite pour rapprocher les textes */
    display: inline-block;
    /* conserve la taille de l'image et centre via le grid parent */
    margin-bottom: 0;
    /* pas d'espace sous l'image */
}



.product-hero-visual,
.product-hero-visual .images-container,
.product-hero-visual .product-cover,
.product-hero-visual .product-images,
.product-hero-visual .js-qv-product-cover,
.product-hero-visual .thumbnail-container {
    background: transparent !important;
    border: 0 !important;
    box-shadow: none !important;
}

.product-hero-visual .js-qv-product-images,
.product-hero-visual .product-images-thumbs,
.product-hero-visual .thumb-container,
.product-hero-visual .scroll-box-arrows {
    display: none !important;
}

.product-hero-visual .layer {
    background: transparent !important;

}

/* Masquer la loupe/zoom sur l'image principale du produit */
.product-hero-visual .layer,
.product-hero-visual .layer .material-icons.zoom-in {
    display: none !important;
}

/* Viewport fixe pour l'image principale + object-fit pour contrôler le rendu */
.product-hero-visual .product-cover {
    width: 100%;
    max-width: 980px;
    height: 250px;
    /* réduire la hauteur sans déformer l'image */
    overflow: hidden;
    /* masque le débord éventuel */
    display: flex;
    /* centre l'image dans la hauteur fixe */
    justify-content: center;
    align-items: center;
}

.product-hero-visual .product-cover picture,
.product-hero-visual .product-cover img.js-qv-product-cover {

    -o-object-fit: contain;
    object-fit: contain;
    /* garde les proportions, rogne jamais */
    -o-object-position: center bottom;
    object-position: center bottom;
    /* colle visuellement la voiture aux textes */
    display: block;
}

/* Rapprocher encore le bloc texte de l'image */
.product-hero-inner {
    gap: 4px;
}

@media (max-width: 991.98px) {
    .product-hero-visual .product-cover {
        height: 260px;
    }
}

.product-hero-meta {
    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center;
    flex-direction: column;
    color: #fff;
    width: 100%;
    max-width: 900px;
    margin-top: 0;

    top: 100%;
    left: 50%;

    z-index: 2;
}

.product-hero-title {
    font-size: 20px;
    font-weight: 800;
    letter-spacing: .08em;
    text-transform: uppercase;
    margin-bottom: 12px;
}

.product-hero-fuel {
    display: inline-block;
    text-transform: uppercase;
    letter-spacing: .18em;
    font-weight: 700;
    color: #ffffff;
    background: rgba(255, 255, 255, 0.10);
    border: 1px solid rgba(255, 255, 255, 0.20);
    border-radius: 10px;
    padding: 6px 14px;
}

.product-hero-price {
    margin: 6px 0 18px;
}

.product-hero-cta {
    display: flex;
    gap: 14px;
    align-items: center;
    justify-content: center;
}

.product-cta-config {
    border-radius: 8px;
    padding: 10px 16px;
}

.product-hero-cta .btn,
.product-hero-cta button[type="submit"] {
    border-radius: 10px;
}

.product-specs {
    padding: 20px 0 40px;
}

.specs-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 24px;
}

.spec-box {


    color: #fff;
}

.spec-value {
    font-size: 44px;
    font-weight: 800;
    letter-spacing: .06em;
    line-height: 1;
    margin-bottom: 6px;
}

.spec-label {
    opacity: .8;
    text-transform: uppercase;
    letter-spacing: .12em;
    font-size: 12px;
}

/* ====== Bloc Consommation / Énergie sous le hero ====== */
.product-consumption {
    margin-top: 20px;
    margin-bottom: 20px;
    color: #fff;
    background: rgba(0, 0, 0, 0.8);
    border-radius: 16px;
    padding: 30px;
}

.consumption-header {
    display: grid;
    grid-template-columns: 1fr auto;
    align-items: start;
    margin: 0 30px;
}

.consumption-title {
    font-size: 18px;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: .08em;
    margin: 0 0 20px 0;
    color: #fff;
}

.consumption-details {
    grid-column: 1 / 2;
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.consumption-combined,
.consumption-co2,
.consumption-class {
    margin: 0;
    font-size: 14px;
    color: #fff;
    opacity: 0.9;
    line-height: 1.4;
}

.consumption-class {
    font-weight: 600;
    color: #fff;
    opacity: 1;
}

.energy-scale {
    grid-row: 1 / 3;
    grid-column: 2 / 3;
    width: 280px;
    height: 200px;
    position: relative;
    display: flex;
    flex-direction: column;
    justify-content: center;
}

.energy-scale .scale-bars {
    list-style: none;
    padding: 0;
    margin: 0;
    display: flex;
    flex-direction: column;
    gap: 8px;
    height: 100%;
    justify-content: space-between;
}

.energy-scale .bar {
    height: 20px;
    border-radius: 6px;
    font-size: 0;
    position: relative;
    transition: all 0.3s ease;
    opacity: 0;
    transform: translateX(-20px);
    cursor: pointer;
}

/* Couleurs exactes selon l'image fournie */
.energy-scale .bar-a {
    background: #2ecc71;
    width: 30%;
}

.energy-scale .bar-b {
    background: #8bc34a;
    width: 40%;
}

.energy-scale .bar-c {
    background: #cddc39;
    width: 50%;
}

.energy-scale .bar-d {
    background: #ffc107;
    width: 60%;
}

.energy-scale .bar-e {
    background: #ff9800;
    width: 70%;
}

.energy-scale .bar-f {
    background: #ff7043;
    width: 85%;
}

.energy-scale .bar-g {
    background: #f44336;
    width: 100%;
}

/* Labels des classes */
.energy-scale .bar::after {
    content: attr(data-class);
    position: absolute;
    left: -25px;
    top: 50%;
    transform: translateY(-50%);
    font-size: 12px;
    font-weight: 700;
    color: #fff;
    text-align: right;
    width: 20px;
}

/* Effet de surbrillance pour la classe active */
.energy-scale[class*='active-'] .bar {
    filter: grayscale(0.8) brightness(0.6);
    opacity: 0.5;
}

.energy-scale.active-a .bar-a,
.energy-scale.active-b .bar-b,
.energy-scale.active-c .bar-c,
.energy-scale.active-d .bar-d,
.energy-scale.active-e .bar-e,
.energy-scale.active-f .bar-f,
.energy-scale.active-g .bar-g {
    filter: none;
    opacity: 1;
    box-shadow: 0 0 0 3px rgba(255, 255, 255, 0.4) inset;
    transform: scale(1.05);
}


/* Animation d'apparition */
.energy-scale .bar {
    animation: slideInFromLeft 0.6s ease-out forwards;
}

@keyframes slideInFromLeft {
    to {
        opacity: 1;
        transform: translateX(0);
    }
}

/* Effet hover sur les barres */
.energy-scale .bar:hover {
    filter: brightness(1.2);
    transform: scale(1.02);
}

/* Responsive */
@media (max-width: 991.98px) {
    .consumption-header {
        grid-template-columns: 1fr;
        gap: 20px;
    }

    .energy-scale {
        grid-row: auto;
        grid-column: auto;
        width: 100%;
        height: 150px;
        margin-top: 20px;
    }


    .product-consumption {
        padding: 20px;
    }
}

/* ====== Section Performance: specs à gauche + image oblique à droite ====== */
.product-performance {
    margin: 10px 0 40px;
}

.performance-grid {
    display: grid;
    margin: 0 100px;
    grid-template-columns: 520px 1fr;

    align-items: center;
}

.specs-stack {
    display: grid;
    gap: 22px;
}

.performance-visual {
    position: relative;
    height: 400px;
    /* viewport fixe */
    overflow: hidden;
    /* évite que l'image pousse la mise en page */
    display: flex;
    align-items: center;
    justify-content: center;
}

.performance-image {
    width: 700px; /* essayer de trouver une autre méthode*/
    -o-object-fit: contain;
    object-fit: contain;
    -o-object-position: center center;
    object-position: center center;
    transform: scaleX(-1) rotate(0deg);
    transform-origin: 50% 50%;
    filter: drop-shadow(0 30px 80px rgba(0, 0, 0, .8));
    display: block;
}

.product-sections .product-description-block,
.product-sections .product-attachments,
.product-sections .data-sheet,
.product-sections section {
    background: rgba(255, 255, 255, 0.06);
    border: 1px solid rgba(255, 255, 255, 0.12);
    border-radius: 16px;
    padding: 20px;
    color: #fff;
    margin-bottom: 18px;
}

.product-sections .container {
    display: flex;

}

/* Deux colonnes: Description + Fiche technique côte à côte */
.product-two-cols {
    display: flex;
    gap: 18px;
    height: 100%;
    align-items: stretch;
}

.product-two-cols .product-description-block,
.product-two-cols .data-sheet {
    flex: 1 1 72.5%;
}

/* Étendre les colonnes en hauteur et faire grandir le panneau description */
.product-two-cols .product-description-block,
.product-two-cols .product-features {
    display: flex;
    flex-direction: column;
}

.product-description-panel {
    flex: 1 1 auto;
    height: 100%;
    display: flex;
    flex-direction: column;
}

/* Étendre aussi la fiche technique pour égaliser la hauteur */
.product-two-cols .product-features .data-sheet {
    flex: 1 1 auto;
    height: 100%;
}

.product-features {
    margin-top: 0;
    margin-left: .3125rem
}

/* S'assurer que la fiche technique (inclue) s'intègre visuellement */
.product-two-cols .data-sheet,
.product-two-cols .product-description-block {
    background: rgba(255, 255, 255, 0.06);
    border: 1px solid rgba(255, 255, 255, 0.12);
    border-radius: 16px;
    padding: 20px;
    color: #fff;
}

/* Panneau interne de description calqué sur la fiche technique */
.product-description-panel {
    background: rgba(0, 0, 0, 0.25);
    border: 1px solid rgba(255, 255, 255, 0.12);
    border-radius: 12px;
    padding: 16px 18px;
}

@media (max-width: 991.98px) {
    .product-two-cols {
        flex-direction: column;
    }
}

/* Rendre visible la fiche technique incluse (tab-pane masquée par défaut si non active) */
.product-two-cols .tab-pane {
    display: block !important;
    opacity: 1 !important;
}

/* Lisibilité accrue: fiche technique et contenus */
.payment-tabs .tab-content,
.payment-tabs .tab-content * {
    color: #fff !important;
}

.payment-tabs .tab-content .data-sheet {
    --tile-bg: rgba(255, 255, 255, 0.10);
    --tile-brd: rgba(255, 255, 255, 0.20);
}

.payment-tabs .tab-content .data-sheet dt,
.payment-tabs .tab-content .data-sheet dd {
    background: transparent !important;
    border: none !important;
    color: #fff !important;
    padding: 16px 18px;
    border-radius: 10px;
}

/* Neutraliser partout les fonds/bordures de la fiche technique */
.data-sheet dt,
.data-sheet dd,
.data-sheet .name,
.data-sheet .value {
    background: transparent !important;
    border: none !important;
    box-shadow: none !important;
}

.payment-tabs .tab-content .data-sheet dt {
    font-weight: 700;
    opacity: .95;
}

.payment-tabs .tab-content .data-sheet dd {
    font-weight: 600;
    opacity: .95;
}

.payment-tabs .tab-content .product-attachments .attachment {
    background: rgba(0, 0, 0, 0.35);
    border: 1px solid rgba(255, 255, 255, 0.18);
}

.product-hero-price {
    background: transparent;
    border: none;
    padding: 4px 0 0;
    display: block;
}

/* Style prix type maquette */
.product-hero-price,
.product-hero-price * {
    font-family: 'Barlow Condensed', 'Inter', Arial, sans-serif;
}

.product-hero-price .price-prefix,
.product-hero-price .price-amount,
.product-hero-price .price-suffix {
    color: #ffffff;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: .14em;
    line-height: 1.2;
    font-size: 28px;
}

.product-hero-price .price-prefix {
    margin-right: 8px;
    opacity: .95;
}

.product-hero-price .price-amount {
    margin-right: 8px;
}

.product-hero-cta .btn,
.product-hero-cta button[type="submit"] {
    background: linear-gradient(180deg, #1f1f1f, #0b0b0b);
    border: 1px solid rgba(255, 255, 255, 0.20);
    color: #fff;
}

.product-hero-cta .btn:hover {
    filter: brightness(1.12);
}

/* Style exact des deux CTA du hero */
.product-hero-cta .btn,
.product-hero-cta button[type="submit"] {
    text-transform: uppercase;
    letter-spacing: .18em;
    font-weight: 700;
    padding: 12px 22px;
}

/* Bouton gauche: contour clair, fond transparent */
.product-cta-config {
    background: transparent !important;
    border: 1px solid rgba(255, 255, 255, 0.65) !important;
    color: #ffffff !important;
}

.product-cta-config:hover {
    background: rgba(255, 255, 255, 0.08) !important;
    filter: none;
}

/* Bouton droit: plein (hérite du style par défaut ci-dessus) — rien à surcharger ici */

@media (max-width: 991.98px) {
    .product-hero-inner {
        grid-template-columns: 1fr;
        gap: 24px;
    }

    .product-specs {
        padding-top: 0;
    }

    .specs-grid {
        grid-template-columns: 1fr;
    }

    .consumption-header {
        grid-template-columns: 1fr;
    }

    .energy-scale {
        grid-row: auto;
        grid-column: auto;
        width: 100%;
        height: 16px;
    }

    .performance-grid {
        grid-template-columns: 1fr;
    }

    .performance-visual {
        height: 240px;
    }

    .performance-image {
        transform: none;
        height: 100%;
        width: auto;
        object-fit: contain;
    }

    /* Revenir en flux normal sur mobile pour éviter les chevauchements */
    .product-hero {
        padding-bottom: 30px;
    }

    .product-hero-meta {
        position: static;
        transform: none;
        margin-top: 8px;
    }
}

/* ====== Styles pour le titre et bouton des voitures d'exception ====== */

/* Titre "LES VOITURES D'EXCEPTION DE NOTRE COLLECTION" */
.exception-cars-title {
    color: white !important;
    font-size: 2.5rem !important;
    font-weight: bold !important;
    font-family: sans-serif !important;
    line-height: 1.2 !important;
    margin: 0 !important;
    position: relative !important;
    text-transform: none !important;
}

/* Bouton "VOIR PLUS" */
.voir-plus-btn {
    background-color: black !important;
    color: white !important;
    border: 1px solid white !important;
    border-radius: 25px !important;
    padding: 12px 24px !important;
    text-decoration: none !important;
    font-weight: bold !important;
    font-size: 1rem !important;
    transition: all 0.3s ease !important;
    float: right !important;
    margin-top: 0 !important;
}

.voir-plus-btn:hover {
    background-color: white !important;
    color: black !important;
    text-decoration: none !important;
}

.voir-plus-btn i {
    margin-left: 8px !important;
}

/* Responsive pour le titre et bouton */
@media (max-width: 768px) {
    .exception-cars-title {
        font-size: 2rem !important;
        margin-bottom: 1rem !important;
    }

    .voir-plus-btn {
        float: left !important;
        margin-top: 1rem !important;
    }
}


.section-header {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    margin-bottom: 2rem;
    position: relative;
}

.exception-cars-title {
    color: white;
    font-size: 2.5rem;
    font-weight: bold;
    font-family: sans-serif;
    line-height: 1.2;
    margin: 0;
    position: relative;
}

.title-line {
    display: block;
}

.title-line-indent {
    display: block;
    margin-left: 1rem;
}


.voir-plus-btn {
    background-color: black;
    color: white;
    border: 1px solid white;
    border-radius: 25px;
    padding: 12px 24px;
    text-decoration: none;
    font-weight: bold;
    font-size: 1rem;
    transition: all 0.3s ease;
    align-self: flex-start;
}

.voir-plus-btn:hover {
    background-color: white;
    color: black;
    text-decoration: none;
}

@media (max-width: 768px) {
    .section-header {
        flex-direction: column;
        align-items: flex-start;
    }

    .exception-cars-title {
        font-size: 2rem;
        margin-bottom: 1rem;
    }

    .voir-plus-btn {
        align-self: flex-start;
    }
}

/* ====== Styles pour la page catalogue des nouveaux produits ====== */

/* Fond sombre pour la page catalogue */
body#category,
body#catalog {
    background: #000 url('/modules/exclusivecontact/views/img/contact.png') !important;
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    color: #fff !important;
}

body#category #wrapper,
body#category main,
body#category .page-content,
body#category .container,
body#category .container-fluid,
body#catalog #wrapper,
body#catalog main,
body#catalog .page-content,
body#catalog .container,
body#catalog .container-fluid {
    background: transparent !important;
}

/* Masquer la sidebar/colonne de gauche */
body#category .left-column,
body#category .sidebar,
body#catalog .left-column,
body#catalog .sidebar {
    display: none !important;
}

/* Centrer le contenu principal */
body#category #main,
body#catalog #main {
    width: 100% !important;
    max-width: 1200px !important;
    margin: 0 auto !important;
    padding: 0 20px !important;
}

/* Header de la page catalogue */
.catalog-header {
    text-align: center;
    padding: 40px 0 30px;
    margin-bottom: 30px;
    max-width: 1200px;
    margin-left: auto;
    margin-right: auto;
}

.catalog-title {
    color: white;
    font-size: 3.5rem;
    font-weight: bold;
    font-family: sans-serif;
    line-height: 1;
    margin: 0 0 15px 0;
    text-transform: uppercase;
    letter-spacing: 0.05em;
}

.catalog-subtitle {
    color: white;
    font-size: 1.1rem;
    font-weight: bold;
    font-family: sans-serif;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    margin: 0 0 25px 0;
}

.catalog-controls {
    display: flex;
    gap: 15px;
    margin-top: 20px;
    justify-content: center;
}

.filter-btn,
.sort-btn {
    background: #333;
    color: white;
    border: 1px solid white;
    border-radius: 8px;
    padding: 12px 20px;
    font-weight: bold;
    font-size: 0.9rem;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    cursor: pointer;
    transition: all 0.3s ease;
}

.filter-btn:hover,
.sort-btn:hover {
    background: rgba(255, 255, 255, 0.1);
}

.sort-btn {
    min-width: 120px;
}

/* Section des produits */
.products-section {
    padding: 0 0 60px;
    max-width: 1200px;
    margin: 0 auto;
}

.cars-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(350px, 1fr));
    gap: 25px;
    margin-top: 30px;
    padding: 0 20px;
}

/* Styles pour les cartes de voitures */
.product-miniature {
    background: #8B4513;
    /* Couleur par défaut - sera variée par JavaScript */
    border-radius: 16px;
    padding: 0;
    transition: all 0.3s ease;
    color: white;
    overflow: hidden;
    position: relative;
    min-height: 400px;
}

.product-miniature:hover {
    transform: translateY(-5px);
    box-shadow: 0 15px 40px rgba(0, 0, 0, 0.4);
}

/* Header de la carte avec nom et année */
.product-miniature .product-title {
    position: absolute;
    top: 20px;
    left: 20px;
    right: 20px;
    z-index: 2;
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
}

.product-miniature .product-title a {
    color: white;
    text-decoration: none;
    font-weight: bold;
    font-size: 1.2rem;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    line-height: 1.2;
}

.product-miniature .product-year {
    color: white;
    font-weight: bold;
    font-size: 1rem;
    text-transform: uppercase;
    letter-spacing: 0.05em;
}

/* Image de la voiture */
.product-miniature .product-cover {
    width: 100%;
    height: 250px;
    overflow: hidden;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-top: 60px;
}

.product-miniature .product-cover img {
    width: 100%;
    height: 100%;
    object-fit: contain;
    object-position: center;
}

/* Barre de spécifications en bas */
.product-miniature .product-specs {
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    background: rgba(0, 0, 0, 0.3);
    padding: 15px 20px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    font-size: 0.9rem;
    font-weight: bold;
    text-transform: uppercase;
    letter-spacing: 0.05em;
}

.product-miniature .spec-item {
    color: white;
    text-align: center;
}

.product-miniature .spec-item:not(:last-child)::after {
    content: '•';
    margin: 0 10px;
    opacity: 0.7;
}

/* Masquer les éléments par défaut de PrestaShop */
.product-miniature .product-price,
.product-miniature .product-description,
.product-miniature .product-actions {
    display: none;
}

/* Message quand aucun produit */
.no-products-message {
    text-align: center;
    padding: 60px 20px;
    color: white;
}

.no-products-message h4 {
    font-size: 1.5rem;
    margin-bottom: 15px;
    color: white;
}

.no-products-message p {
    color: rgba(255, 255, 255, 0.7);
    font-size: 1rem;
}

/* Couleurs variées pour les cartes de voitures */
.product-miniature:nth-child(1) {
    background: #8B4513;
}

/* Marron */
.product-miniature:nth-child(2) {
    background: #A0522D;
}

/* Marron foncé */
.product-miniature:nth-child(3) {
    background: #1E3A8A;
}

/* Bleu foncé */
.product-miniature:nth-child(4) {
    background: #374151;
}

/* Gris foncé */
.product-miniature:nth-child(5) {
    background: #6B7280;
}

/* Gris clair */
.product-miniature:nth-child(6) {
    background: #DC2626;
}

/* Rouge */
.product-miniature:nth-child(7) {
    background: #059669;
}

/* Vert */
.product-miniature:nth-child(8) {
    background: #7C2D12;
}

/* Marron rouge */
.product-miniature:nth-child(9) {
    background: #1F2937;
}

/* Gris très foncé */

/* Responsive */
@media (max-width: 768px) {
    .catalog-title {
        font-size: 2.5rem;
    }

    .catalog-subtitle {
        font-size: 1rem;
    }

    .catalog-header {
        padding: 30px 0 20px;
    }

    .catalog-controls {
        flex-direction: column;
        gap: 10px;
    }

    .cars-grid {
        grid-template-columns: 1fr;
        gap: 20px;
    }

    .product-miniature {
        min-height: 350px;
    }

    .product-miniature .product-cover {
        height: 200px;
        margin-top: 50px;
    }

    .product-miniature .product-title {
        top: 15px;
        left: 15px;
        right: 15px;
    }

    .product-miniature .product-specs {
        padding: 12px 15px;
        font-size: 0.8rem;
    }
}

/* ====== Styles pour la page catalogue des nouveaux produits ====== */

#wrapper {
    background: #1e1e1e !important;
}

.new-products-title {
    color: white !important;
    font-family: sans-serif !important;
    font-size: 3rem;
    text-align: start;
    margin-bottom: 2rem !important;
}

.new-products-subtitle {
    color: white !important;
    text-align: start;
    font-size: 2rem;
    font-weight: 100;
    margin-bottom: 2rem !important;
}

.catalog-page {
    padding-inline: 60px !important;
}

.col-lg-9 {
    width: 100% !important;
}

.new-products-section {
    padding: 0 0 60px;
    margin: 0 auto;
}

/* ====== Styles pour la page des meilleures ventes ====== */

.best-sales-header {
    margin-bottom: 3rem;
}

.best-sales-title {
    color: white !important;
    font-family: sans-serif !important;
    font-size: 3rem;
    text-align: start;
    margin-bottom: 2rem !important;
}

.best-sales-subtitle {
    color: white !important;
    text-align: start;
    font-size: 2rem;
    font-weight: 100;
    margin-bottom: 2rem !important;
}

.best-sales-section {
    padding: 0 0 60px;
    margin: 0 auto;
}

.configurator-title {
    position: relative;
    margin: 12px 0 0 0
}

.configurator-heading {
    font-family: 'Barlow Condensed', sans-serif;
    font-weight: 800;
    letter-spacing: .06em;
    color: #ffffff0d;
    font-size: 96px;
    line-height: 1
}

.product-configurator {
    position: relative;
    padding: 40px 0 20px 0
}

.product-configurator .config-bg {
    position: absolute;
    inset: 0;
    background: rgb(18, 18, 18);
    pointer-events: none
}

.product-configurator .config-watermark {
    position: absolute;
    top: -10px;
    left: 0;
    right: 0;
    text-align: left;
    font-family: 'Barlow Condensed', sans-serif;
    font-weight: 800;
    letter-spacing: .06em;
    color: #ffffff0d;
    font-size: 96px;
    pointer-events: none;
    user-select: none
}

.product-configurator .config-inner {
    display: grid;
    grid-template-columns: 1.5fr 1fr;
    gap: 28px;
    margin-left: 30px;
    margin-right: 30px;
    align-items: stretch
}

.config-visual {
    position: relative;
    background: rgba(15, 15, 15, 0.7);
    border: 1px solid rgba(255, 255, 255, 0.08);
    box-shadow: 0 20px 40px rgba(0, 0, 0, .45);
    backdrop-filter: blur(8px);
    border-radius: 14px;
    overflow: visible;
    display: flex;
    align-items: center;
    justify-content: center;
    
    height: 400px
}

.config-image {

    display: block;
    object-fit: contain;
    transform-origin: center;
}

/* Aligner le rendu de product-cover-thumbnails dans le configurateur
   pour reproduire l'ancien affichage d'une grande image seule */
.config-visual .images-container,
.config-visual .product-cover,
.config-visual .js-qv-product-cover,
.config-visual .thumbnail-container {
    background: transparent !important;
    border: 0 !important;
    box-shadow: none !important;
}

.config-visual .js-qv-product-images,
.config-visual .product-images-thumbs,
.config-visual .thumb-container,
.config-visual .scroll-box-arrows,
.config-visual .layer,
.config-visual .layer .material-icons.zoom-in {
    display: none !important;
}

.config-visual .product-cover {
    width: 100%;
    height: 100%;
    overflow: hidden;
    display: flex;
    align-items: center;
    justify-content: center;
}

.config-visual .product-cover picture,
.config-visual .product-cover img.js-qv-product-cover {
    object-fit: contain;
    object-position: center;
    display: block;
    width: 100%;
    height: 100%;
}

.config-pager {
    position: absolute;
    bottom: 14px;
    left: 0;
    right: 0;
    display: flex;
    gap: 18px;
    justify-content: center
}

.pager-dot {
    width: 60px;
    height: 4px;
    border-radius: 999px;
    background: #2a2a2a
}

.pager-dot.is-active {
    background: #8e8e8e
}

.config-panel {
    display: flex;
    flex-direction: column;
    gap: 12px
}

.config-title {
    font-family: 'Barlow Condensed', sans-serif;
    font-weight: 800;
    letter-spacing: .06em;
    color: #8c8c8c;
    font-size: 28px;
    opacity: .9
}

.config-card {
    background: rgba(15, 15, 15, 0.7);
    border: 1px solid rgba(255, 255, 255, 0.08);
    box-shadow: 0 20px 40px rgba(0, 0, 0, .45);
    backdrop-filter: blur(8px);
    border-radius: 14px;
    padding: 22px;
    position: relative;
    height: 400px;
}

/* Styles pour le bouton wishlist */
.wishlist-button-add.wishlist-button-product {
    position: absolute;
    top: 15px;
    right: 15px;
    background: rgba(255, 255, 255, 0.1);
    border: 1px solid rgba(255, 255, 255, 0.2);
    border-radius: 50%;
    width: 40px;
    height: 40px;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: all 0.3s ease;
    z-index: 10;
}

.wishlist-button-add.wishlist-button-product:hover {
    background: rgba(255, 255, 255, 0.2);
    border-color: rgba(255, 255, 255, 0.4);
    transform: scale(1.1);
}

.wishlist-button-add.wishlist-button-product i {
    color: #fff;
    font-size: 20px;
    transition: color 0.3s ease;
}

.wishlist-button-add.wishlist-button-product:hover i {
    color: #ff6b6b;
}

.config-product-name {
    font-weight: 800;
    font-size: 16px;
    color: #fff
}

.config-sub {
    font-size: 12px;
    color: #bdbdbd;
    margin-top: 2px;
    display: flex;
    gap: 8px;
    align-items: center
}

.config-year {
    opacity: .7;
    font-size: 11px
}

.config-group {
    margin-top: 18px
}

.config-group-title {
    font-size: 12px;
    color: #bdbdbd;
    display: flex;
    align-items: center;
    justify-content: space-between
}

.config-colors {
    display: flex;
    gap: 12px;
    margin-top: 10px
}

.color-swatch {
    width: 28px;
    height: 28px;
    border-radius: 999px;
    border: 2px solid rgba(255, 255, 255, 0.22);
    cursor: pointer;
    outline: none;
    transition: transform .15s ease, box-shadow .15s ease
}

.color-swatch:hover {
    transform: translateY(-1px);
    box-shadow: 0 4px 18px rgba(0, 0, 0, .4)
}

.color-swatch.is-active {
    box-shadow: 0 0 0 3px rgba(255, 255, 255, .12), inset 0 0 0 2px #0f0f0f;
    border-color: #fff
}

.config-sep {
    height: 1px;
    background: rgba(255, 255, 255, 0.08);
    margin-top: 16px
}

.config-total {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-top: 18px;
    padding-top: 14px;
    border-top: 1px solid rgba(255, 255, 255, 0.08)
}

.total-label {
    font-size: 12px;
    color: #bdbdbd
}

.total-amount {
    font-weight: 800;
    font-size: 22px;
    color: #fff
}

.config-actions {
    margin-top: 12px
}

.config-add {
    width: 100%;
    background: transparent;
    color: #fff;
    border: 1px solid rgba(255, 255, 255, 0.24);
    border-radius: 10px
}

/* Forcer pleine largeur où que le bouton soit rendu */
#add-to-cart-or-refresh .config-add,
.product-actions .config-add,
.config-actions .config-add {
    margin-top: 20px;
    display: block;
    width: 500px;
}

.product-add-to-cart .js-product-add-to-cart {
    margin-top: 20px;
    display: flex;
    align-items: center;
}

/* Éviter les contraintes des wrappers potentiels */
#add-to-cart-or-refresh,
.product-actions,
.config-actions,
.payment-cta-bar {
    width: 100%;
}

.config-add:hover {
    background: #2a2a2a
}

@media (max-width: 992px) {
    .product-configurator .config-inner {
        grid-template-columns: 1fr
    }

    .config-title {
        font-size: 24px
    }

    .config-visual {
        height: 320px
    }

    .config-image {
        transform: scale(1.05)
    }
}

.product-quantities {
    display: none;
}

/* ====== Harmonisation des vignettes couleur (configurateur et variantes PrestaShop) ====== */
/* Forme et dimensions identiques aux pastilles du configurateur */
.product-variants .color,
.variant-links .color,
.variant-links a.color {
    width: 28px;
    height: 28px;
    border-radius: 999px;
    border: 2px solid rgba(255, 255, 255, 0.22);
    display: inline-block;
    background-size: cover;
    background-position: center;
    box-shadow: inset 0 0 0 0 rgba(0, 0, 0, 0), 0 2px 10px rgba(0, 0, 0, .35);
    transition: transform .15s ease, box-shadow .15s ease, border-color .15s ease;
}

/* Effet hover similaire au configurateur */
.product-variants .color:hover,
.variant-links .color:hover,
.variant-links a.color:hover {
    transform: translateY(-1px);
    box-shadow: 0 4px 18px rgba(0, 0, 0, .4);
}

/* État actif/sélectionné */
.product-variants .input-color:checked + .color {
    box-shadow: 0 0 0 3px rgba(255, 255, 255, .12), inset 0 0 0 2px #0f0f0f;
    border-color: #fff;
}

/* Certaines versions ajoutent une classe selected sur le lien courant */
.variant-links .selected.color,
.variant-links a.color.selected {
    box-shadow: 0 0 0 3px rgba(255, 255, 255, .12), inset 0 0 0 2px #0f0f0f;
    border-color: #fff;
}

/* Aligner visuellement la liste de couleurs */
.product-variants .product-variants-item ul[id^="group_"] {
    display: flex;
    gap: 12px;
}

.product-variants .product-variants-item ul[id^="group_"] .input-container {
    float: none;
}

/* ====== Checkout: marges latérales, arrondis et fond des blocs ====== */
/* Appliquer à toutes les étapes */
body#checkout #content .checkout-step,
body#order    #content .checkout-step {
    margin-left: 30px;
    background: rgb(39, 39, 39) !important;
    
    overflow: hidden;
    color: #ffffff !important;
}


/* Teinte douce pour les textes atténués */
body#checkout #content .checkout-step .text-muted,
body#order    #content .checkout-step .text-muted {
    color: rgba(255, 255, 255, 0.75) !important;
}

/* Placeholders des champs en blanc légèrement translucide */
body#checkout #content .checkout-step input::placeholder,
body#checkout #content .checkout-step textarea::placeholder,
body#order    #content .checkout-step input::placeholder,
body#order    #content .checkout-step textarea::placeholder {
    color: rgba(0, 0, 0, 0.7) !important;
}

/* Titre des steps en blanc et sans fond parasite */
body#checkout #content .checkout-step .step-title,
body#order    #content .checkout-step .step-title {
    color: #ffffff;
    background: transparent !important;
}

body#checkout #content .checkout-step label,
body#order    #content .checkout-step  {
    color: #ffffff;
    background: transparent !important;
}

body#checkout #content .cart-grid-body .card,
body#checkout #content .cart-grid-body .js-checkout-step,
body#checkout #content .cart-grid-right .cart-summary,
body#checkout #content .cart-grid-right .card,
body#checkout #content .cart-grid-right .block-reassurance,
body#order #content .cart-grid-body .card,
body#order #content .cart-grid-body .js-checkout-step,
body#order #content .cart-grid-right .cart-summary,
body#order #content .cart-grid-right .card,
body#order #content .cart-grid-right .block-reassurance {
    
    margin-right: 30px;
    background: rgb(39, 39, 39) !important; /* #454545 à 90% */
   
    overflow: hidden;
    color: #ffffff !important;
}

/* Harmoniser aussi les tables/récaps à l'intérieur des cartes */
body#checkout #content .cart-grid-right .cart-summary .card,
body#order #content .cart-grid-right .cart-summary .card {
    background: transparent !important;
    border-radius: 30px;
}

/* ====== Module Block Reassurance: texte en blanc ====== */
#block-reassurance,
#block-reassurance *,
.blockreassurance,
.blockreassurance *,
.blockreassurance_product,
.blockreassurance_product * {
    color: #ffffff !important;
}

#block-reassurance a,
.blockreassurance a,
.blockreassurance_product a {
    color: #ffffff !important;
}

/* Forcer le texte en blanc à l'intérieur des blocs checkout */
body#checkout #content .cart-grid-body .card *,
body#checkout #content .cart-grid-body .js-checkout-step *,
body#checkout #content .cart-grid-right .cart-summary *,
body#checkout #content .cart-grid-right .card *,
body#order #content .cart-grid-body .card *,
body#order #content .cart-grid-body .js-checkout-step *,
body#order #content .cart-grid-right .cart-summary *,
body#order #content .cart-grid-right .card * {
    color: #ffffff !important;
}

/* Champs de formulaire: texte blanc pour cohérence visuelle */
body#checkout #content input,
body#checkout #content select,
body#checkout #content textarea,
body#order   #content input,
body#order   #content select,
body#order   #content textarea {
    color: #bdbdbd !important;
    background: #454545;
    border: 1px solid #000000;
    
}


#login-form footer{
    background: none;   
    
}

.product-manufacturer{
    display: none;
}


/* Bordure et arrondis du panneau footer (gérés côté thème) */
.js-customer-form footer{
    background: none;   

    
}

.js-customer-form footer button{
    background: none;   
    border-radius: 5px;
    border: 1px solid #ffffff;
    
}
.js-customer-form footer button:hover{
   background-color: #ffffff;
   color: #000000;
}


.js-address-form footer {
    background: none;   

    
}


.js-address-form footer {
    color: #ffffff;    
}
.js-address-form footer button{
    background: none;   
    border-radius: 5px;
    border: 1px solid #ffffff;
    
}
.js-address-form footer button:hover{
   background-color: #ffffff;
   color: #000000;
}
.clearfix button{
    background: none;   
    border-radius: 5px;
    border: 1px solid #ffffff;  
}
.clearfix button:hover{
    background-color: #ffffff;
    color: #000000;
 }
.ps-shown-by-js button{
    background: none;   
    border-radius: 5px;
    border: 1px solid #ffffff;
    
}

.ps-shown-by-js button:hover{
    background-color: #ffffff;
    color: #000000;
 }

.address-alias .h4 {
    color: #ffffff;
}


/* Centrer la légende au milieu du carrousel et éviter le positionnement fixe */
.carousel .carousel-item .caption {
    position: absolute !important;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    bottom: auto;
    margin: 0;
    text-align: center;
    width: auto;
    max-width: 90%;
    z-index: 2;
}

.carousel .carousel-item .caption h2 {
    font-family: "Neon", sans-serif;
    font-style: italic;
    font-weight: bold;
    line-height: 65px;
    
}

/* S'assure que l'item sert de conteneur de positionnement */
.carousel-inner > .carousel-item {
    position: relative;
}

/* Cart: fond noir + texte blanc, sans impacter les autres pages */
body#cart #main {
    background-color: #272727;
    margin:  20px 20px 40px;
    border-top-left-radius: 10px;
    border-bottom-left-radius: 10px;
}

.product-line-grid {
    display: flex;
    align-items: center;
    justify-content: space-between;
}

body#cart #main, 
body#cart #main * {
    color: #ffffff !important;
}

body#cart #main .card,
body#cart #main .card-block {
    background-color: transparent;
}

/* Mise en page propre des lignes produit du panier */
body#cart .cart-items .cart-item {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 1rem;
    padding: 1.25rem 0;
    border-bottom: 1px solid rgba(255, 255, 255, 0.08);
}

/* Colonne image */
body#cart .product-line-grid-left {
    width: 140px;
    flex: 0 0 140px;
    order: 0;
    margin-right: 1rem;
}

body#cart .product-line-grid-left img {
    width: 140px;
    height: auto;
    display: block;
    border-radius: 8px;
}

/* Colonne description */
body#cart .product-line-grid-body {
    flex: 1 1 auto;
    padding: 0 0.5rem;
    order: 1;
}

/* Colonne prix / actions */
body#cart .product-line-grid-right {
    min-width: 240px;
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 1rem;
    text-align: right;
    order: 2;
    margin-left: auto;
}

body#cart .product-line-grid-right .product-price,
body#cart .product-line-grid-right .price {
    font-weight: 700;
    font-size: 1.1rem;
}

/* Icône poubelle / actions */
body#cart .product-line-grid-right .cart-line-product-actions .remove-from-cart,
body#cart .product-line-grid-right .remove-from-cart {
    color: #ffffff;
    opacity: 0.85;
}

body#cart .product-line-grid-right .cart-line-product-actions .remove-from-cart:hover,
body#cart .product-line-grid-right .remove-from-cart:hover {
    opacity: 1;
}

/* Lisibilité des libellés et séparateurs sur fond noir */
body#cart .label,
body#cart .sub,
body#cart .separator {
    color: rgba(255, 255, 255, 0.8) !important;
    border-color: rgba(255, 255, 255, 0.15) !important;
}

/* Panneau récapitulatif à droite: contraste et alignements */
body#cart .cart-grid-right .cart-summary {
    border: 1px solid rgba(255, 255, 255, 0.12);
    border-radius: 8px;
    background: rgba(255, 255, 255, 0.02);
}

body#cart .cart-summary-line .value {
    float: right;
}


/* Bouton continuer/valider mieux visibles */
body#cart a.label {
    display: inline-flex;
    align-items: center;
    gap: .35rem;
}

/* Alignement de l'icône poubelle avec le texte */
body#cart .product-line-grid-right {
    align-items: baseline;
}

body#cart .product-line-grid-right .cart-line-product-actions,
body#cart .product-line-grid-right .product-price {
    line-height: normal; /* override theme 36px */
}

body#cart .product-line-grid-right .remove-from-cart {
    display: inline-flex;
    align-items: baseline;
    vertical-align: baseline;
    margin-top: 0; /* éviter le décalage vers le bas */
}

body#cart .product-line-grid-right .remove-from-cart i,
body#cart .product-line-grid-right .remove-from-cart .material-icons {
    line-height: 1;
}

/* ====== Order Confirmation: fond sombre + texte blanc, mise en forme claire ====== */
/* Fond principal de la page de confirmation */

.order-line.row {
    display: flex;
    justify-content: center;
    align-items: center;
}


body#order-confirmation #main {
    background-color: #272727;
    margin: 20px 20px 40px;
    border-radius: 10px;
}

/* Forcer le texte en blanc sur cette page */
body#order-confirmation #main,
body#order-confirmation #main * {
    color: #ffffff !important;
}

/* Neutraliser les fonds des cartes par défaut pour un rendu homogène */
body#order-confirmation #main .card,
body#order-confirmation #main .card-block,
body#order-confirmation #main .definition-list,
body#order-confirmation #main .page-order-confirmation {
    background: transparent !important;
    box-shadow: none !important;
    border: 1px solid rgba(255, 255, 255, 0.12);
    border-radius: 10px;
}

/* Titres plus visibles et structurés */
body#order-confirmation #main .card-title,
body#order-confirmation #main h1,
body#order-confirmation #main h2,
body#order-confirmation #main h3 {
    color: #ffffff !important;
    text-transform: none;
    letter-spacing: .02em;
    margin-top: 0.25rem;
    margin-bottom: 0.75rem;
}

/* Liste des détails de commande: espacement et lisibilité */
body#order-confirmation #order-details ul {
    list-style: none;
    padding-left: 0;
    margin: 0.5rem 0 0;
}
body#order-confirmation #order-details ul li {
    padding: 6px 0;
    border-bottom: 1px solid rgba(255, 255, 255, 0.08);
}
body#order-confirmation #order-details ul li:last-child {
    border-bottom: none;
}

/* Table/récap produits inclus: fond transparent + séparateurs doux */
body#order-confirmation #content .table,
body#order-confirmation #content table {
    background: transparent !important;
    border-color: rgba(255, 255, 255, 0.12) !important;
}
body#order-confirmation #content .table th,
body#order-confirmation #content .table td {
    border-color: rgba(255, 255, 255, 0.08) !important;
}

/* Liens sur fond sombre */
body#order-confirmation #main a {
    color: #ffffff !important;
    text-decoration-color: rgba(255, 255, 255, 0.5);
}
body#order-confirmation #main a:hover {
    opacity: 0.9;
}

/* Icône de confirmation: alignement et couleur */
body#order-confirmation #main .material-icons.done {
    color: #ffffff !important;
    vertical-align: middle;
    margin-right: 6px;
}

/* Marges internes des blocs pour une structure aérée */
body#order-confirmation #content .card-block,
body#order-confirmation #content .page-order-confirmation .card-block {
    padding: 18px 20px;
}

/* Espacement vertical entre sections */
body#order-confirmation #content section,
body#order-confirmation #content .page-content {
    margin-bottom: 16px;
}