html{
    margin-top: 0 !important;
}

/* ==========================================
   HEADER GLASSMORPHISM - VERSION SOMBRE
   ========================================== */


   
/* Header avec backdrop-filter sur un pseudo-élément */
.nav-header-custom {
    position: fixed !important;
    top: 0;
    left: 0;
    width: 100%;
    z-index: 9999 !important;
    border-bottom: 1px solid rgba(255, 255, 255, 0.08);
    box-shadow: 0 4px 24px rgba(0, 0, 0, 0.4);
    transition: all 0.3s ease;
}

/* Backdrop-filter sur un pseudo-élément pour ne pas affecter le z-index des enfants */
.nav-header-custom::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 5, 10, 0.4) !important;
    backdrop-filter: blur(20px) saturate(180%);
    -webkit-backdrop-filter: blur(20px) saturate(180%);
    z-index: -1; /* En arrière-plan du header */
    transition: all 0.3s ease;
}

/* Header au scroll */
.nav-header-custom.scrolled {
    border-bottom: 1px solid rgba(255, 255, 255, 0.12);
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.5);
}

.nav-header-custom.scrolled::before {
    background: rgba(0, 5, 10, 0.7) !important;
    backdrop-filter: blur(25px) saturate(180%);
    -webkit-backdrop-filter: blur(25px) saturate(180%);
}


/******Menu mobile background****/
/* Menu mobile avec effet glassmorphisme néon */
.mobile-menu-bg {
    background: rgba(26, 26, 26, 0.65) !important;
    backdrop-filter: blur(20px) saturate(150%) !important;
    -webkit-backdrop-filter: blur(20px) saturate(150%) !important;
    border-radius: 0 !important;
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.4) !important; /* ← RETIRÉ l'inset glow */
    border: none !important; /* ← NOUVEAU : retire toutes les bordures */
}

/* Effet de glow néon sur les bords */
.mobile-menu-bg::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: linear-gradient(
        135deg,
        rgba(0, 201, 255, 0.1) 0%,
        transparent 30%,
        transparent 70%,
        rgba(78, 205, 196, 0.1) 100%
    );
    pointer-events: none;
    z-index: -1;
}

/* Animation pulse subtile sur le menu */
@keyframes neonPulse {
    0%, 100% {
        box-shadow: 0 8px 32px rgba(0, 0, 0, 0.6); /* ← SIMPLIFIÉ */
    }
    50% {
        box-shadow: 0 8px 40px rgba(0, 0, 0, 0.7); /* ← SIMPLIFIÉ */
    }
}

.mobile-menu-bg {
    animation: neonPulse 3s ease-in-out infinite !important;
}

/* Style des liens du menu avec effet néon au hover */
.mobile-menu-bg a,
.mobile-menu-bg .menu-item a {
    color: rgba(255, 255, 255, 0.9) !important;
    transition: all 0.3s ease !important;
    text-shadow: 0 0 10px rgba(0, 201, 255, 0) !important;
}

.mobile-menu-bg a:hover,
.mobile-menu-bg .menu-item a:hover {
    color: #00C9FF !important;
    text-shadow: 0 0 10px rgba(0, 201, 255, 0.6) !important;
}

/* Titres dans le menu avec gradient néon */
.mobile-menu-bg h2,
.mobile-menu-bg h3,
.mobile-menu-bg .menu-title {
    background: linear-gradient(135deg, #00C9FF 0%, #4ECDC4 100%) !important;
    -webkit-background-clip: text !important;
    -webkit-text-fill-color: transparent !important;
    background-clip: text !important;
    text-shadow: 0 0 20px rgba(0, 201, 255, 0.3) !important;
}

/* Icônes sociales avec effet néon */
.mobile-menu-bg .elementor-icon,
.mobile-menu-bg .social-icon {
    transition: all 0.3s ease !important;
    filter: drop-shadow(0 0 5px rgba(0, 201, 255, 0)) !important;
}

.mobile-menu-bg .elementor-icon:hover,
.mobile-menu-bg .social-icon:hover {
    filter: drop-shadow(0 0 10px rgba(0, 201, 255, 0.8)) !important;
    transform: scale(1.1) !important;
}

/* Section "Suivez-nous" */
.mobile-menu-bg .elementor-widget-heading {
    color: rgba(255, 255, 255, 0.7) !important;
}

/* Menu panier au-dessus de tout */
.elementor-menu-cart__main {
    z-index: 99999 !important;
}

/* Séparateurs avec effet néon */
.mobile-menu-bg .menu-item {
    border-bottom: 1px solid rgba(0, 201, 255, 0.1) !important;
}

.mobile-menu-bg .menu-item:hover {
    border-bottom-color: rgba(0, 201, 255, 0.3) !important;
    background: rgba(0, 201, 255, 0.05) !important;
}

/* ==========================================
   HOME HERO - IMAGE EN DESSOUS + HALOS
   ========================================== */

.home-hero {
    position: relative;
    overflow: hidden;
    
    /* IMAGE EN ARRIÈRE-PLAN (couche la plus basse) */
    background-image: 
        linear-gradient(135deg, 
            rgba(0, 10, 20, 0.92) 0%,
            rgba(5, 15, 25, 0.94) 25%,
            rgba(10, 20, 30, 0.92) 50%, 
            rgba(15, 25, 35, 0.94) 75%,
            rgba(10, 20, 30, 0.92) 100%),
        url('http://rockit-fitness.com/wp-content/uploads/2025/12/RKT-PHOTOS-03.png') !important;
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
}

/* Halo principal - GAUCHE */
.home-hero::before {
    content: '';
    position: absolute;
    top: 35%;
    left: 15%;
    transform: translate(-50%, -50%);
    width: 1000px;
    height: 1000px;
    background: radial-gradient(circle, 
        rgba(0, 201, 255, 0.2) 0%, 
        rgba(78, 205, 196, 0.12) 25%,
        rgba(0, 201, 255, 0.08) 45%,
        transparent 70%);
    border-radius: 50%;
    z-index: 0;
    animation: pulse-hero 7s ease-in-out infinite;
    pointer-events: none;
}

/* Halo secondaire - DROITE */
.home-hero::after {
    content: '';
    position: absolute;
    top: 60%;
    right: 10%;
    width: 700px;
    height: 700px;
    background: radial-gradient(circle, 
        rgba(78, 205, 196, 0.1) 0%, 
        rgba(0, 201, 255, 0.05) 40%,
        transparent 65%);
    border-radius: 50%;
    z-index: 0;
    animation: pulse-hero 9s ease-in-out infinite reverse;
    pointer-events: none;
}

/* ==========================================
   RESPONSIVE : TABLETTE & MOBILE PAYSAGE (< 1024px)
   ========================================== */
@media (max-width: 1024px) {
    .home-hero::before {
        width: 600px;
        height: 600px;
        top: 30%;
        left: 20%;
    }
    .home-hero::after {
        width: 400px;
        height: 400px;
        top: 70%;
    }
}

/* ==========================================
   RESPONSIVE : MOBILE PORTRAIT (< 767px)
   ========================================== */
@media (max-width: 767px) {
    .home-hero::before {
        width: 350px; /* Taille réduite pour mobile */
        height: 350px;
        top: 25%;
        left: 50%; /* On centre le halo sur mobile pour un meilleur look */
        opacity: 0.6; /* On baisse l'intensité pour ne pas gêner la lecture */
    }
    
    .home-hero::after {
        width: 250px;
        height: 250px;
        top: 80%;
        right: 0%;
        opacity: 0.4;
    }
}

@keyframes pulse-hero {
    0%, 100% { 
        opacity: 0.8;
        transform: translate(-50%, -50%) scale(1); 
    }
    50% { 
        opacity: 1;
        transform: translate(-50%, -50%) scale(1.12); 
    }
}

/* S'assurer que le contenu est au-dessus */
.home-hero > * {
    position: relative;
    z-index: 1;
}


/* ==========================================
   HERO VISUAL - GLASS CARDS
   ========================================== */

.hero-visual {
    position: relative;
    height: 850px;  /* Augmenté pour contenir toutes les cards */
    width: 100%;
    max-width: 1140px;
    margin: 0 auto;
}

.glass-card {
    position: absolute;
    background: rgba(255, 255, 255, 0.05);
    backdrop-filter: blur(20px);
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 24px;
    overflow: hidden;
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.3);
    transition: all 0.4s ease;
    cursor: pointer;
    z-index: 1;
}

.glass-card:hover {
    transform: translateY(-10px) scale(1.05) !important;
    box-shadow: 0 20px 60px rgba(0, 201, 255, 0.4);
    border-color: var(--primary-cyan);
    z-index: 10;
}

/* Card 1 - Grande card à GAUCHE */
.glass-card-1 {
    top: 20%;
    left: 15%;
    width: 288px;  /* Réduit de 320px à 280px */
    height: 276px;
    z-index: 3;
}

/* Card 2 - Card en HAUT à DROITE */
.glass-card-2 {
    top: 8%;
    right: 5%;
    width: 288px;  /* Réduit de 320px à 280px */
    height: 276px;
    z-index: 2;
}

/* Card 3 - Card en BAS à DROITE */
.glass-card-3 {
    top: 43%;  /* Positionné juste après card-2 (8% + 380px ≈ 52%) */
    right: 5%;
     width: 288px;  /* Réduit de 320px à 280px */
    height: 276px;
    z-index: 1;
}

/* Style pour les Icon Box Elementor à l'intérieur */
.glass-card .elementor-icon-box-wrapper {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    padding: 2rem 1.5rem;  /* Padding réduit */
    height: 100%;
    justify-content: center;
}

.glass-card .elementor-icon-box-icon {
    margin-bottom: 1rem;
}

.glass-card .elementor-icon-box-icon .elementor-icon {
    font-size: 3.5rem;  /* Réduit de 4rem à 3.5rem */
    color: var(--primary-cyan);
}

.glass-card .elementor-icon-box-title {
    font-family: 'Cormorant Garamond', serif;
    font-size: 1.5rem;  /* Réduit de 1.6rem à 1.5rem */
    margin-bottom: 0.8rem;
    color: var(--primary-cyan);
    font-weight: 600;
}

.glass-card .elementor-icon-box-description {
    font-size: 0.9rem;  /* Réduit de 0.95rem à 0.9rem */
    color: rgba(255, 255, 255, 0.8);
    line-height: 1.6;
}


/*BTN*/

.btn-primary {
    background: linear-gradient(135deg, var(--primary-cyan), var(--secondary-teal));
    color: #000;
    border-radius: 12px !important;
}

.btn-primary::before {
    content: '';
    position: absolute;
    top: 0;
    left: -100%;
    width: 100%;
    height: 100%;
    background: linear-gradient(135deg, var(--secondary-teal), var(--primary-cyan));
    transition: left 0.4s ease;
    z-index: -1;
}

.btn-primary:hover::before {
    left: 0;
}

.btn-primary:hover {
    transform: translateY(-3px);
    box-shadow: 0 10px 30px rgba(0, 201, 255, 0.4);
}

.btn-secondary {
    background: transparent;
    color: #fff;
    border: 2px solid var(--primary-cyan);
    border-radius: 12px !important;
}

.btn-secondary:hover {
    background: rgba(0, 201, 255, 0.1);
    transform: translateY(-3px);
    box-shadow: 0 10px 30px rgba(0, 201, 255, 0.2);
}


/**home cat img zoom**/


/**home cat img zoom smooth INTERNE**/
/**home cat img zoom smooth INTERNE**/
.image-cat-home {
    position: relative !important;
    overflow: hidden !important;
}

/* Zoom INTERNE du background */
.image-cat-home:not(.elementor-motion-effects-element-type-background) {
    background-size: cover !important;
    background-position: center !important;
    transition: background-size 0.8s cubic-bezier(0.25, 0.46, 0.45, 0.94) !important;
}

.image-cat-home:hover:not(.elementor-motion-effects-element-type-background) {
    background-size: 115% !important;
}

/* ANNULER le transform pour cette div chiante */
.elementor-element-f50c5d6 {
    transform: none !important;
}

.elementor-element-f50c5d6:hover {
    transform: none !important;
    background-size: 115% !important;
}








/* Container principal CTA */
.cta-section {
    padding: 8rem 5% !important;
    position: relative;
    overflow: hidden;
    background: linear-gradient(180deg, 
        rgba(0, 0, 0, 1) 0%,
        rgba(5, 10, 15, 1) 15%,
        rgba(10, 20, 30, 1) 30%, 
        rgba(20, 35, 45, 1) 65%, 
        rgba(15, 30, 40, 1) 100%) !important;
}

/* Effet de lumière radiale derrière */
.cta-section::before {
    content: '';
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 1200px;
    height: 1200px;
    background: radial-gradient(circle, 
        rgba(0, 201, 255, 0.15) 0%, 
        rgba(78, 205, 196, 0.08) 30%,
        transparent 70%);
    border-radius: 50%;
    z-index: 0;
    animation: pulse-cta 8s ease-in-out infinite;
}

@keyframes pulse-cta {
    0%, 100% { 
        transform: translate(-50%, -50%) scale(1); 
        opacity: 0.8; 
    }
    50% { 
        transform: translate(-50%, -50%) scale(1.1); 
        opacity: 1; 
    }
}

/* Effet de lumière secondaire */
.cta-section::after {
    content: '';
    position: absolute;
    top: 20%;
    right: 10%;     
    width: 600px;
    height: 600px;
    background: radial-gradient(circle, 
        rgba(78, 205, 196, 0.1) 0%, 
        transparent 60%);
    border-radius: 50%;
    z-index: 0;
    animation: pulse-cta 10s ease-in-out infinite reverse;
}


.cta-glass-box {
        background: rgba(255, 255, 255, 0.05);
        backdrop-filter: blur(30px);
        border: 1px solid rgba(255, 255, 255, 0.1);
        border-radius: 30px;
        /* padding: 5rem 4rem; */
        box-shadow: 0 20px 60px rgba(0, 0, 0, 0.3);
    }



.story-section{
    background: linear-gradient(180deg, rgba(0, 0, 0, 1) 0%, rgba(10, 20, 30, 0.8) 100%);
}


/**contact page**/

/* ==========================================
   CONTACT SECTION - FOND UNIQUE PREMIUM
   ========================================== */
.contact-page {
    padding: 0 !important;
    position: relative;
    overflow: hidden;
    background: linear-gradient(180deg, 
        rgba(0, 0, 0, 1) 0%,
        rgba(5, 10, 15, 1) 15%,
        rgba(10, 20, 30, 1) 30%, 
        rgba(15, 25, 35, 1) 60%,
        rgba(10, 20, 30, 1) 85%,
        rgba(5, 10, 15, 1) 100%) !important;
    margin: 0 !important;
}

/* Effet de lumière radiale principal - centre */
.contact-page::before {
    content: '';
    position: absolute;
    top: 40%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 1400px;
    height: 1400px;
    background: radial-gradient(circle, 
        rgba(0, 201, 255, 0.15) 0%, 
        rgba(78, 205, 196, 0.08) 30%,
        transparent 70%);
    border-radius: 50%;
    z-index: 0;
    animation: pulse-contact 8s ease-in-out infinite;
}

/* Effet de lumière secondaire - droite */
.contact-page::after {
    content: '';
    position: absolute;
    top: 20%;
    right: 5%;
    width: 800px;
    height: 800px;
    background: radial-gradient(circle, 
        rgba(78, 205, 196, 0.12) 0%, 
        transparent 65%);
    border-radius: 50%;
    z-index: 0;
    animation: pulse-contact 10s ease-in-out infinite reverse;
}

@keyframes pulse-contact {
    0%, 100% { 
        transform: translate(-50%, -50%) scale(1); 
        opacity: 0.8; 
    }
    50% { 
        transform: translate(-50%, -50%) scale(1.15); 
        opacity: 1; 
    }
}

/* S'assurer que tout le contenu est au-dessus */
.contact-page > * {
    position: relative;
    z-index: 1;
}

/* Enlever les backgrounds des sous-sections si présents */
.contact-page .hero-contact,
.contact-page .contact-form-section,
.contact-page .map-section,
.contact-page .faq-section {
    background: transparent !important;
}


/**contact form**/





/* ==========================================
   PROJECT TYPE SELECTOR - CARDS
   ========================================== */

.project-type-selector {
    margin-bottom: 2rem;
}

.selector-label {
    display: block;
    font-size: 0.85rem;
    font-weight: 600;
    color: rgba(255, 255, 255, 0.9);
    margin-bottom: 1.5rem;
    letter-spacing: 2px;
    text-transform: uppercase;
}

.project-cards {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 1.5rem;
}

.project-card {
    background: rgba(255, 255, 255, 0.03);
    border: 2px solid rgba(255, 255, 255, 0.1);
    border-radius: 16px;
    padding: 2rem 1.5rem;
    text-align: center;
    cursor: pointer;
    transition: all 0.3s ease;
    position: relative;
    overflow: hidden;
    display: flex !important;
    flex-direction: column !important;
    align-items: center;
}

.project-card::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 4px;
    background: linear-gradient(90deg, var(--primary-cyan), var(--secondary-teal));
    transform: scaleX(0);
    transform-origin: left;
    transition: transform 0.3s ease;
}

.project-card:hover {
    background: rgba(255, 255, 255, 0.05);
    border-color: rgba(0, 201, 255, 0.3);
    transform: translateY(-5px);
}

.project-card:hover::before {
    transform: scaleX(1);
}

.project-card.selected {
    background: rgba(0, 201, 255, 0.1) !important;
    border-color: var(--primary-cyan) !important;
    box-shadow: 0 8px 24px rgba(0, 201, 255, 0.3);
}

.project-card.selected::before {
    transform: scaleX(1);
}

.card-icon {
    font-size: 3rem;
    margin-bottom: 1rem;
    filter: grayscale(100%);
    opacity: 0.6;
    transition: all 0.3s ease;
}

.project-card:hover .card-icon,
.project-card.selected .card-icon {
    filter: grayscale(0%);
    opacity: 1;
    transform: scale(1.1);
}

.card-title {
    font-size: 1rem !important;
    font-weight: 600;
    color: #fff;
    margin-bottom: 0.5rem;
    transition: color 0.3s ease;
}

.project-card.selected .card-title {
    background: linear-gradient(135deg, var(--primary-cyan), var(--secondary-teal));
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}

.card-description {
    font-size: 0.9rem;
    color: rgba(255, 255, 255, 0.6);
    line-height: 1.4;
}

.project-card.selected .card-description {
    color: rgba(255, 255, 255, 0.9);
}

/* Responsive */
@media (max-width: 768px) {
    .project-cards {
        grid-template-columns: 1fr;
        gap: 1rem;
    }
    
    .project-card {
        padding: 1.5rem 1rem;
    }
    
    .card-icon {
        font-size: 2.5rem;
    }
    
    .card-title {
        font-size: 1.1rem;
    }
    
    .card-description {
        font-size: 0.85rem;
    }
}

@media (max-width: 480px) {
    .selector-label {
        font-size: 0.75rem;
    }
    
    .card-icon {
        font-size: 2rem;
        margin-bottom: 0.8rem;
    }
}




/**contact page **/
.google-maps{
    border-radius: 24px !important;
}

.e-n-accordion-item-title{
    display: flex !important;
    flex-direction: row !important;
    justify-content: space-between !important;
}





/******************* Product Card ***************************/
/* Masquer le texte "Catégories:" mais garder le lien */
.product-card-cat-title .elementor-heading-title {
    font-size: 0 !important; /* Masque tout le texte */
    line-height: 0;
}

/* Afficher uniquement le lien <a> */
.product-card-cat-title .elementor-heading-title a {
    font-size: 1rem !important; /* Restaure la taille du lien */
    line-height: normal;
    display: inline-block;
}







/* Responsive */
@media (max-width: 1140px) {
    .hero-visual {
        max-width: 100%;
        padding: 0 2rem;
    }
    
    .glass-card-1,
    .glass-card-2,
    .glass-card-3 {
        width: 260px;
    }
}

@media (max-width: 768px) {
    .hero-visual {
        height: auto;
        min-height: 1200px;
    }
    
    .glass-card-1,
    .glass-card-2,
    .glass-card-3 {
        position: relative !important;
        width: 90% !important;
        max-width: 350px;
        height: 280px !important;
        margin: 2rem auto;
        left: auto !important;
        right: auto !important;
        top: auto !important;
        bottom: auto !important;
        display: block;
    }
}




/* === 3D CAROUSEL - VERSION HTML PUR === */

/* 1. Le Conteneur */
.gallery-container {
    position: relative;
    width: 100%;
    /* On a besoin de place en hauteur car les images des bords vont grossir */
    height: 600px; 
    display: flex;
    justify-content: center;
    align-items: center;
    /* Perspective: plus le chiffre est bas (ex: 800), plus l'effet 3D est "dramatique" et les bords paraissent grands */
    perspective: 800px; 
    transform-style: preserve-3d;
}

/* 2. Les Cartes */
.card {
    /* Taille de base des images (ce sera la taille de celles du centre) */
    width: 200px;
    height: 300px;
    background-color: #333;
    background-size: cover;
    background-position: center;
    border-radius: 12px;
    
    /* Le fameux GAP de 20px (10px de chaque côté) */
    margin: 0 10px; 
    
    flex-shrink: 0;
    transition: all 0.5s ease;
    position: relative; 
    
    /* --- CALCULS 3D --- */
    
    /* Valeur absolue (distance du centre) */
    --abs: max(var(--i), -1 * var(--i));
    
    transform: 
        /* 1. Rotation très légère pour garder la courbe douce */
        rotateY(calc(var(--i) * -6deg))
        
        /* 2. Le ZOOM : On avance les cartes vers l'écran */
        /* Chaque étape vers le bord avance de 110px vers toi */
        translateZ(calc(var(--abs) * 110px));
        
    /* Gestion de la luminosité et ombre */
    /* On garde les bords éclatants, on assombrit un peu le centre */
    filter: brightness(calc(1 - (3.5 - var(--abs)) * 0.1));
    box-shadow: 0 15px 30px rgba(0,0,0,0.4);
}

/* --- LE HALO BLANC (Keep it, c'est stylé) --- */

/* Halo gauche sur la 1ère image */
.card:first-child::after {
    content: '';
    position: absolute;
    inset: 0;
    background: linear-gradient(to right, rgba(0, 0, 0, 0.8) 0%, transparent 50%);
    border-radius: inherit;
    pointer-events: none;
}

/* Halo droit sur la dernière image */
.card:last-child::after {
    content: '';
    position: absolute;
    inset: 0;
    background: linear-gradient(to left, rgba(0, 0, 0, 0.8) 0%, transparent 50%);
    border-radius: inherit;
    pointer-events: none;
}

/* Images pour tester */
.card:nth-child(1) { background-image: url('http://rockit-fitness.com/wp-content/uploads/2025/12/RKT-PHOTOS-06.png'); }
.card:nth-child(2) { background-image: url('http://rockit-fitness.com/wp-content/uploads/2025/12/jump-box-rockit.jpg'); }
.card:nth-child(3) { background-image: url('http://rockit-fitness.com/wp-content/uploads/2025/12/RKT-PHOTOS-09.png'); }
.card:nth-child(4) { background-image: url('http://rockit-fitness.com/wp-content/uploads/2025/12/Presentation-1.jpg'); }
.card:nth-child(5) { background-image: url('http://rockit-fitness.com/wp-content/uploads/2025/12/RKT-PHOTOS-08.png'); }
.card:nth-child(6) { background-image: url('http://rockit-fitness.com/wp-content/uploads/2025/12/RKT-PHOTOS-10.png'); }


/* =========================================
   2. RESPONSIVE (Breakpoints Elementor)
   ========================================= */

/* --- Portable (Max 1366px) --- */
@media (max-width: 1366px) {
    .gallery-container {
        height: 550px; /* On réduit un peu la hauteur du conteneur */
    }
    .card {
        width: 170px;
        height: 255px;
        /* On réduit le zoom (translateZ) à 90px au lieu de 110px */
        transform: rotateY(calc(var(--i) * -6deg)) translateZ(calc(var(--abs) * 90px));
    }
}

/* --- Tablette Paysage (Max 1200px) --- */
@media (max-width: 1200px) {
    .gallery-container {
        height: 500px;
    }
    .card {
        width: 150px;
        height: 225px;
        margin: 0 8px; /* On réduit un peu l'espacement */
        /* Zoom réduit à 80px */
        transform: rotateY(calc(var(--i) * -6deg)) translateZ(calc(var(--abs) * 80px));
    }
}

/* --- Tablette Portrait (Max 1024px) --- */
@media (max-width: 1024px) {
    .gallery-container {
        height: 450px;
        perspective: 700px; /* Perspective ajustée */
    }
    .card {
        width: 130px;
        height: 195px;
        margin: 0 6px;
        /* Zoom réduit à 60px */
        transform: rotateY(calc(var(--i) * -6deg)) translateZ(calc(var(--abs) * 60px));
    }
}

/* --- Mobile Paysage (Max 880px) --- */
@media (max-width: 880px) {
    .gallery-container {
        height: 350px;
    }
    .card {
        width: 100px;
        height: 150px;
        margin: 0 4px;
        /* Zoom réduit à 45px */
        transform: rotateY(calc(var(--i) * -6deg)) translateZ(calc(var(--abs) * 45px));
    }
}

/* --- Mobile Portrait (Max 767px) - CRUCIAL --- */
/* Ici on force tout à devenir tout petit pour tenir sur la largeur du téléphone */
@media (max-width: 767px) {
    .gallery-container {
        /* Hauteur suffisante pour accueillir les cartes agrandies par le zoom */
        height: 220px; 
        perspective: 600px; 
        overflow: hidden;
        gap: 8px;
    }

    .card {
        /* 1. Tes dimensions imposées */
        width: 45px;
        height: 75px;
        
        /* 2. Le GAP exact de 7px (3.5px à gauche + 3.5px à droite) */
        margin: 0 3.5px; 
        
        border-radius: 6px;
        
        /* 3. CALCUL DU ZOOM 3D */
        /* Avec une largeur de base de 45px, on peut se permettre un gros zoom.
           Je mets un multiplicateur de 60px.
           Les cartes des bords (index 2.5) vont avancer de 150px vers l'écran.
           Elles paraîtront environ 30-40% plus grandes que celles du centre.
        */
        transform: 
            rotateY(calc(var(--i) * -4deg)) 
            translateZ(calc(var(--abs) * 60px));
            
        /* Contraste pour la profondeur */
        filter: brightness(calc(1 - (2.5 - var(--abs)) * 0.2));
    }
}


/***********Catalogue*************/

.background-catalogue {
    font-family: 'Montserrat', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
    background: #1a1a1a;
    color: #ffffff; /* ← CORRIGÉ : blanc au lieu de noir */
    overflow-x: hidden;
    position: relative;
    z-index: 1; /* ← AJOUTÉ : pour que le contenu soit au-dessus du ::before */
}

.background-catalogue::before {
    content: '';
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: 
        radial-gradient(circle at 20% 30%, rgba(0, 201, 255, 0.15) 0%, transparent 50%),
        radial-gradient(circle at 80% 70%, rgba(78, 205, 196, 0.12) 0%, transparent 50%),
        radial-gradient(circle at 50% 50%, rgba(0, 201, 255, 0.08) 0%, transparent 70%);
   /*  animation: gradientShift 15s ease infinite; */
    pointer-events: none;
    z-index: -1; /* ← MODIFIÉ : z-index négatif pour être derrière le contenu */
}

@keyframes gradientShift {
    0%, 100% {
        transform: translate(0, 0) scale(1);
        opacity: 1;
    }
    33% {
        transform: translate(30px, -30px) scale(1.1);
        opacity: 0.8;
    }
    66% {
        transform: translate(-30px, 30px) scale(0.95);
        opacity: 0.9;
    }
}


.filter-card {
    background: rgba(255, 255, 255, 0.03);
    backdrop-filter: blur(20px);
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: 24px;
    padding: 32px 24px;
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.3), inset 0 1px 0 rgba(255, 255, 255, 0.1);
}

     /* Product Card */
        .product-card {
            background: rgba(255, 255, 255, 0.03);
            backdrop-filter: blur(20px);
            border: 1px solid rgba(255, 255, 255, 0.08);
            border-radius: 24px;
            padding: 0;
            overflow: hidden;
            transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
            cursor: pointer;
            box-shadow: 
                0 8px 32px rgba(0, 0, 0, 0.3),
                inset 0 1px 0 rgba(255, 255, 255, 0.1);
        }

        .product-card:hover {
            transform: translateY(-8px);
            border-color: rgba(0, 201, 255, 0.3);
            box-shadow: 
                0 16px 48px rgba(0, 201, 255, 0.2),
                0 8px 32px rgba(0, 0, 0, 0.4),
                inset 0 1px 0 rgba(255, 255, 255, 0.15);
        }





/*** Filtres Elementor ****/

/*** Filtres Elementor ****/

/* Container search */
.filters-horizontal .e-filter {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 16px;
    flex-wrap: wrap;
}

/* Boutons de filtre */
.filters-horizontal .e-filter-item {
    padding: 12px 28px;
    background: rgba(255, 255, 255, 0.05);
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 12px;
    color: rgba(255, 255, 255, 0.7);
    font-size: 14px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    cursor: pointer;
    transition: all 0.3s ease;
    position: relative;
    overflow: hidden;
}

/* Animation glassmorphism au survol */
.filters-horizontal .e-filter-item::before {
    content: '';
    position: absolute;
    top: 0;
    left: -100%;
    width: 100%;
    height: 100%;
    background: linear-gradient(90deg, transparent, rgba(0, 201, 255, 0.15), transparent);
    transition: left 0.5s ease;
}

.filters-horizontal .e-filter-item:hover::before {
    left: 100%;
}

.filters-horizontal .e-filter-item:hover {
    border-color: rgba(0, 201, 255, 0.4) !important;
    color: #00C9FF;
    transform: translateY(-2px);
    background: rgba(255, 255, 255, 0.08);
    box-shadow: 0 4px 12px rgba(0, 201, 255, 0.2);
}

/* Cacher le bouton "Tous" vide */
.filters-horizontal .e-filter-item[data-filter="__all"] {
    display: none !important;
}

.elementor-widget-taxonomy-filter .e-filter-item[aria-pressed=true] {
    border-color: #00c9ff !important;
}

/* Responsive */
@media (max-width: 768px) {
    .filters-horizontal {
        padding: 20px;
    }
    
    .filters-horizontal .e-filter {
        gap: 12px;
    }
    
    .filters-horizontal .e-filter-item {
        padding: 10px 20px;
        font-size: 13px;
    }
}


/****Categorie page***/
/* Cache le texte "Catégories: " mais garde le lien visible */


/* On cible le H1 contenu dans ta div spécifique sur les pages catégories */
/* 1. On cible le H1 pour cacher TOUT le texte (y compris "Catégories:") */
/* On cible uniquement la page 1477 et ton widget spécifique */
.elementor-page-1477 .title-categorie-page h1.elementor-heading-title {
    font-size: 0 !important;
    display: flex !important;
    justify-content: center !important;
    width: 100% !important;
}

/* On fait réapparaître uniquement le lien (le nom de la catégorie) */
.elementor-page-1477 .title-categorie-page h1.elementor-heading-title a {
    font-size: 50px !important;
    visibility: visible !important;
    color: white !important;
    text-decoration: none !important;
    display: block !important;
    pointer-events: none !important;
}

/*** Single Product ***/
.singleproduct-img img {
    background-color: white !important;
}

.singleproduct-img .flex-control-thumbs img {
    background-color: white !important;
}

.woocommerce-product-gallery__trigger{
    display: none !important;
}

.elementor-widget-text-editor h3 {
    font-size: 17px !important;
}

/***** Container des add to WooCommerce ****************/


/***** Container des add to cart WooCommerce ****************/
.variations_form .variations {
    
    padding: 24px !important;
    margin: 24px 0 !important;
}

/* Ligne de variation */
.variations_form .variations tr {
    display: flex !important;
    flex-direction: column !important;
    gap: 12px !important;
    margin-bottom: 20px !important;
    border: none !important;
}

.variations_form .variations tr:last-child {
    margin-bottom: 0 !important;
}

/* Label */
.variations_form .variations .label {
    width: 100% !important;
    text-align: left !important;
    padding: 0 !important;
}

.variations_form .variations .label label {
    font-size: 13px !important;
    text-transform: uppercase !important;
    letter-spacing: 1px !important;
    color: rgba(255, 255, 255, 0.6) !important;
    font-weight: 600 !important;
    display: block !important;
}

/* Container value */
.variations_form .variations .value {
    width: 100% !important;
    padding: 0 !important;
}

/* Container des boutons (créé par JS) */
.variation-buttons {
    display: flex !important;
    gap: 12px !important;
    flex-wrap: wrap !important;
}

/* Boutons de variation */
.variation-btn {
    padding: 10px 20px !important;
    background: rgba(255, 255, 255, 0.05) !important;
    border: 1px solid rgba(255, 255, 255, 0.1) !important;
    border-radius: 8px !important;
    color: rgba(255, 255, 255, 0.7) !important;
    font-size: 14px !important;
    font-weight: 500 !important;
    cursor: pointer !important;
    transition: all 0.3s ease !important;
    position: relative !important;
    overflow: hidden !important;
    text-transform: none !important;
    letter-spacing: normal !important;
}

.variation-btn::before {
    content: '' !important;
    position: absolute !important;
    top: 0 !important;
    left: -100% !important;
    width: 100% !important;
    height: 100% !important;
    background: linear-gradient(90deg, transparent, rgba(0, 201, 255, 0.1), transparent) !important;
    transition: left 0.5s ease !important;
}

.variation-btn:hover::before {
    left: 100% !important;
}

.variation-btn:hover {
    border-color: rgba(0, 201, 255, 0.4) !important;
    color: #00C9FF !important;
    background: rgba(255, 255, 255, 0.08) !important;
}

.variation-btn.selected {
    background: linear-gradient(135deg, rgba(0, 201, 255, 0.2) 0%, rgba(78, 205, 196, 0.2) 100%) !important;
    border-color: #00C9FF !important;
    color: #00C9FF !important;
}

/* Select customisé (pour longues listes) */
.variations_form .variations select {
    width: 100% !important;
    padding: 12px 20px !important;
    background: rgba(255, 255, 255, 0.05) !important;
    border: 1px solid rgba(255, 255, 255, 0.1) !important;
    border-radius: 8px !important;
    color: rgba(255, 255, 255, 0.9) !important;
    font-size: 14px !important;
    font-weight: 500 !important;
    cursor: pointer !important;
    transition: all 0.3s ease !important;
    appearance: none !important;
    -webkit-appearance: none !important;
    -moz-appearance: none !important;
    background-image: url("data:image/svg+xml,%3Csvg width='12' height='8' viewBox='0 0 12 8' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M1 1L6 6L11 1' stroke='%2300C9FF' stroke-width='2' stroke-linecap='round'/%3E%3C/svg%3E") !important;
    background-repeat: no-repeat !important;
    background-position: right 16px center !important;
    padding-right: 40px !important;
}

.variations_form .variations select:hover {
    border-color: rgba(0, 201, 255, 0.4) !important;
    background-color: rgba(255, 255, 255, 0.08) !important;
}

.variations_form .variations select:focus {
    outline: none !important;
    border-color: #00C9FF !important;
    box-shadow: 0 0 0 3px rgba(0, 201, 255, 0.1) !important;
}

/* Options du select */
.variations_form .variations select option {
    background: #1a1a1a !important;
    color: #ffffff !important;
    padding: 10px !important;
}

/* Container du formulaire */
.elementor-product-simple form.cart {
    display: flex !important;
    flex-direction: column !important;
    gap: 16px !important;
}

/* Wrapper principal - 2 lignes */
.cart-actions-wrapper {
    display: flex !important;
    flex-direction: column !important;
    gap: 16px !important;
}

/* Ligne 1 : Prix */
.cart-actions-wrapper .product-simple-price-inline {
    font-size: 24px !important;
    font-weight: 700 !important;
    color: #00C9FF !important;
    margin: 0 !important;
    padding: 0 !important;
}

/* Ligne 2 : Wrapper quantité + bouton */
.qty-button-wrapper {
    display: flex !important;
    gap: 16px !important;
    align-items: center !important;
}

/* Style du bouton dans qty-button-wrapper */
.qty-button-wrapper .single_add_to_cart_button {
    flex: 1 !important;
    padding: 14px 32px !important;
    background: linear-gradient(135deg, #00C9FF 0%, #4ECDC4 100%) !important;
    border: none !important;
    border-radius: 12px !important;
    color: #ffffff !important;
    font-size: 15px !important;
    font-weight: 700 !important;
    text-transform: uppercase !important;
    letter-spacing: 0.5px !important;
    cursor: pointer !important;
    transition: all 0.3s ease !important;
    box-shadow: 0 8px 24px rgba(0, 201, 255, 0.3) !important;
}

.qty-button-wrapper .single_add_to_cart_button:hover {
    transform: translateY(-2px) !important;
    box-shadow: 0 12px 32px rgba(0, 201, 255, 0.4) !important;
}

/* Bouton Ajouter au panier */
.variations_button,
.elementor-product-simple form.cart {
    display: flex !important;
    align-items: center !important;
    gap: 16px !important;
    margin-top: 24px !important;
}

.variations_button .quantity,
.elementor-product-simple .quantity {
    display: flex !important;
    align-items: center !important;
    background: rgba(255, 255, 255, 0.05) !important;
    border: 1px solid rgba(255, 255, 255, 0.1) !important;
    border-radius: 12px !important;
    overflow: hidden !important;
}

.variations_button .quantity input.qty,
.elementor-product-simple .quantity input.qty {
    width: 60px !important;
    height: 48px !important;
    background: transparent !important;
    border: none !important;
    color: #ffffff !important;
    text-align: center !important;
    font-size: 16px !important;
    font-weight: 600 !important;
    padding: 0 !important;
}

.variations_button .quantity input.qty:focus,
.elementor-product-simple .quantity input.qty:focus {
    outline: none !important;
}

.variations_button .single_add_to_cart_button,
.elementor-product-simple .single_add_to_cart_button {
    flex: 1 !important;
    padding: 14px 32px !important;
    background: linear-gradient(135deg, #00C9FF 0%, #4ECDC4 100%) !important;
    border: none !important;
    border-radius: 12px !important;
    color: #ffffff !important;
    font-size: 15px !important;
    font-weight: 700 !important;
    text-transform: uppercase !important;
    letter-spacing: 0.5px !important;
    cursor: pointer !important;
    transition: all 0.3s ease !important;
    box-shadow: 0 8px 24px rgba(0, 201, 255, 0.3) !important;
}

.variations_button .single_add_to_cart_button:hover,
.elementor-product-simple .single_add_to_cart_button:hover {
    transform: translateY(-2px) !important;
    box-shadow: 0 12px 32px rgba(0, 201, 255, 0.4) !important;
}

.variations_button .single_add_to_cart_button.disabled,
.variations_button .single_add_to_cart_button.wc-variation-selection-needed {
    background: rgba(255, 255, 255, 0.1) !important;
    color: rgba(255, 255, 255, 0.4) !important;
    cursor: not-allowed !important;
    box-shadow: none !important;
}

.variations_button .single_add_to_cart_button.disabled:hover,
.variations_button .single_add_to_cart_button.wc-variation-selection-needed:hover {
    transform: none !important;
}

/* Reset */
.reset_variations {
    display: inline-block !important;
    margin-top: 12px !important;
    padding: 8px 16px !important;
    background: rgba(255, 59, 48, 0.1) !important;
    border: 1px solid rgba(255, 59, 48, 0.3) !important;
    border-radius: 8px !important;
    color: rgba(255, 59, 48, 0.9) !important;
    font-size: 12px !important;
    font-weight: 600 !important;
    text-transform: uppercase !important;
    text-decoration: none !important;
    transition: all 0.3s ease !important;
}

.reset_variations:hover {
    background: rgba(255, 59, 48, 0.2) !important;
    transform: translateY(-1px) !important;
}


.add-to-cart-custom{
    background: rgba(255, 255, 255, 0.03) !important;
    backdrop-filter: blur(20px) !important;
    padding: 24px !important;
}

table tbody>tr:nth-child(odd)>td, table tbody>tr:nth-child(odd)>th {
    background-color: hsla(0, 0%, 50%, 0);
}

/****Price***/
.single_variation_wrap .woocommerce-variation-price .price .amount {
    color: #00C9FF !important;
    font-family: var(--e-global-typography-text-font-family), Sans-serif !important;
}

.woocommerce-variation-price {
    margin-bottom: 16px !important;
}

.woocommerce-variation-price .price {
    font-size: 24px !important;
    font-weight: 700 !important;
    color: #00C9FF !important;
    margin: 0 !important;
}

.woocommerce-variation-price .price .amount {
    font-size: 24px !important;
    font-weight: 700 !important;
    color: #00C9FF !important;
}

/* Responsive */
@media (max-width: 768px) {
    .variations_form .variations {
        padding: 20px !important;
    }
    
    .variations_button {
        flex-direction: column !important;
        align-items: stretch !important;
    }
    
    .variations_button .quantity {
        justify-content: center !important;
    }
}


/*** product why ****/
.card-produit-why{
      background: rgba(255, 255, 255, 0.03);
            backdrop-filter: blur(20px);
            border: 1px solid rgba(255, 255, 255, 0.08);
            border-radius: 16px;
            padding: 32px;
            transition: all 0.3s ease;
            position: relative;
            overflow: hidden;
}


.card-produit-why::before {
            content: '';
            position: absolute;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            background: linear-gradient(135deg, rgba(0, 201, 255, 0.1) 0%, rgba(78, 205, 196, 0.1) 100%);
            opacity: 0;
            transition: opacity 0.3s ease;
        }

.card-produit-why:hover {
            transform: translateY(-8px);
            border-color: rgba(0, 201, 255, 0.3);
            box-shadow: 0 12px 40px rgba(0, 201, 255, 0.2);
        }

.card-produit-why:hover::before {
            opacity: 1;
        }


/*******WooCommerce custom******/

.notif-woocommerce-custom{
    background: rgba(255, 255, 255, 0.03);
            backdrop-filter: blur(20px);
            border: 1px solid rgba(255, 255, 255, 0.08);
            border-radius: 16px;
            padding: 32px;
            transition: all 0.3s ease;
            position: relative;
            overflow: hidden;
}

.notif-woocommerce-custom::before {
            content: '';
            position: absolute;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            background: linear-gradient(135deg, rgba(0, 201, 255, 0.1) 0%, rgba(78, 205, 196, 0.1) 100%);
            opacity: 0;
            transition: opacity 0.3s ease;
        }

.notif-woocommerce-custom:hover {
            transform: translateY(-8px);
            border-color: rgba(0, 201, 255, 0.3);
            box-shadow: 0 12px 40px rgba(0, 201, 255, 0.2);
        }

.notif-woocommerce-custom:hover::before {
            opacity: 1;
        }


/* Fix: Containers parents sans forcer 100% */
.elementor-widget-woocommerce-product-add-to-cart .elementor-add-to-cart {
    display: flex !important;
    justify-content: flex-start !important;
}

.elementor-widget-woocommerce-product-add-to-cart .e-loop-add-to-cart-form-container {
    display: flex !important;
    justify-content: flex-start !important;
}

.elementor-widget-woocommerce-product-add-to-cart .cart.e-loop-add-to-cart-form {
    margin: 0 !important;
    display: flex !important;
    justify-content: flex-start !important;
}

/* Bouton CTA produit - Style glassmorphism cyan (produits variables ET simples) */
.e-loop-add-to-cart-form-container .button.product_type_variable,
.e-loop-add-to-cart-form-container .button.product_type_simple,
.elementor-menu-cart__footer-buttons .elementor-button--view-cart,
.woocommerce-orders-table__cell.woocommerce-orders-table__cell-order-actions .woocommerce-button.button.view,
.woocommerce-MyAccount-content-wrapper .button
 
{
    padding: 12px 24px !important;
    background: linear-gradient(135deg, rgba(0, 201, 255, 0.1) 0%, rgba(78, 205, 196, 0.1) 100%) !important;
    border: 1px solid rgba(0, 201, 255, 0.3) !important;
    border-radius: 12px !important;
    color: #00C9FF !important;
    font-size: 13px !important;
    font-weight: 600 !important;
    text-transform: uppercase !important;
    letter-spacing: 0.5px !important;
    transition: all 0.3s ease !important;
    text-decoration: none !important;
    display: inline-block !important;
    text-align: center !important;
    box-sizing: border-box !important;
}

/* Effet hover sur le bouton */
.e-loop-add-to-cart-form-container .button.product_type_variable:hover,
.e-loop-add-to-cart-form-container .button.product_type_simple:hover,
.elementor-menu-cart__footer-buttons .elementor-button--view-cart:hover,
.woocommerce-orders-table__cell.woocommerce-orders-table__cell-order-actions .woocommerce-button.button.view:hover,
.woocommerce-MyAccount-content-wrapper .button:hover
 
{
    background: linear-gradient(135deg, #00C9FF 0%, #4ECDC4 100%) !important;
    color: #ffffff !important;
    transform: translateX(4px) !important;
    box-shadow: 0 4px 16px rgba(0, 201, 255, 0.4) !important;
}


/* Cacher le texte original et afficher "Voir" */
.e-loop-add-to-cart-form-container .button.product_type_variable,
.e-loop-add-to-cart-form-container .button.product_type_simple {
    font-size: 0 !important;
}

.e-loop-add-to-cart-form-container .button.product_type_variable::after,
.e-loop-add-to-cart-form-container .button.product_type_simple::after {
    content: "Voir" !important;
    font-size: 13px !important;
    font-weight: 600 !important;
}


.woocommerce-cart-form__cart-item.cart_item .product-remove a{
    font-size: 17px !important;
    font-weight: 400 !important;
}

/**** bouton cart ***/
.elementor-menu-cart__footer-buttons{
    display: flex !important;
    flex-direction: column !important;
}
/* Application du style au bouton Passer à la commande */
.wc-proceed-to-checkout .checkout-button,
.elementor-menu-cart__footer-buttons .elementor-button--checkout {
    flex: 1 !important;
    padding: 14px 32px !important;
    background: linear-gradient(135deg, #00C9FF 0%, #4ECDC4 100%) !important;
    border: none !important;
    border-radius: 12px !important;
    color: #ffffff !important;
    font-size: 15px !important;
    font-weight: 700 !important;
    text-transform: uppercase !important;
    letter-spacing: 0.5px !important;
    cursor: pointer !important;
    transition: all 0.3s ease !important;
    box-shadow: 0 8px 24px rgba(0, 201, 255, 0.3) !important;
    display: block !important; /* Pour s'assurer que le bouton prend bien son espace */
    text-align: center !important;
    text-decoration: none !important;
}

/* Effet au survol (Hover) */
.wc-proceed-to-checkout .checkout-button:hover,
.elementor-menu-cart__footer-buttons .elementor-button--checkout:hover {
    transform: translateY(-2px) !important;
    box-shadow: 0 12px 32px rgba(0, 201, 255, 0.4) !important;
    color: #ffffff !important;
}
 

/*** Page commander ***/
/* Style du bouton final de commande */
#place_order {
    flex: 1 !important;
    padding: 14px 32px !important;
    background: linear-gradient(135deg, #00C9FF 0%, #4ECDC4 100%) !important;
    border: none !important;
    border-radius: 12px !important;
    color: #ffffff !important;
    font-size: 15px !important;
    font-weight: 700 !important;
    text-transform: uppercase !important;
    letter-spacing: 0.5px !important;
    cursor: pointer !important;
    transition: all 0.3s ease !important;
    box-shadow: 0 8px 24px rgba(0, 201, 255, 0.3) !important;
    width: 100% !important; /* Pour qu'il occupe toute la largeur du conteneur de paiement */
}

/* Effet au survol (Hover) */
#place_order:hover {
    transform: translateY(-2px) !important;
    box-shadow: 0 12px 32px rgba(0, 201, 255, 0.4) !important;
}

.wc-payment-form{
    border: none !important;
}