/*
Theme Name: NordikPerf
Author: Crown
Description: Thème E-commerce haute performance avec style Néon.
Version: 1.0
Text Domain: nordikperf
*/

/* Colle ici tout ton CSS (hero, main-title, btn-primary-neon, etc.) */
.main-title span { color: #00ffcc; text-shadow: 0 0 10px #00ffcc; } /* Exemple de ton style */


/* =========================================
   VARIABLES & RESET
   ========================================= */
:root {
    --primary: #007bff; /* Bleu Nordik */
    --bg-dark: #0a0a0a;
    --card-bg: rgba(255, 255, 255, 0.03);
    --text-main: #ffffff;
    --text-muted: #aaaaaa;
    --font-main: 'Segoe UI', Roboto, Helvetica, Arial, sans-serif;
}

* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

body {
    background-color: var(--bg-dark);
    color: var(--text-main);
    font-family: var(--font-main);
    overflow-x: hidden;
    line-height: 1.6;
}

/* =========================================
   NAVIGATION (Menu Centré)
   ========================================= */
nav {
    position: fixed;
    top: 0;
    width: 100%;
    height: 80px;
    background: rgba(0, 0, 0, 0.9);
    backdrop-filter: blur(15px);
    border-bottom: 1px solid rgba(255, 255, 255, 0.1);
    z-index: 1000;
}

.nav-container {
    max-width: 1400px;
    height: 100%;
    margin: 0 auto;
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 0 40px;
    position: relative;
}

.logo-img {
    height: 45px;
    width: auto;
    transition: 0.3s;
}

.nav-center {
    display: flex;
    gap: 35px;
    position: absolute;
    left: 50%;
    transform: translateX(-50%); /* Centrage parfait des catégories */
}

.nav-link {
    text-decoration: none;
    color: var(--text-main);
    font-weight: 800;
    font-size: 0.85rem;
    letter-spacing: 2px;
    text-transform: uppercase;
    transition: 0.3s;
}

.nav-link:hover, .nav-link.active {
    color: var(--primary);
}

.nav-right {
    display: flex;
    align-items: center;
}

.nav-spacer { height: 100px; }

/* =========================================
   BOUTIQUE & PRODUITS
   ========================================= */
.container {
    max-width: 1200px;
    margin: 0 auto;
    padding: 40px 20px;
}

.product-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
    gap: 30px;
}

.product-card {
    background: var(--card-bg);
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: 15px;
    padding: 20px;
    transition: 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275);
}

.product-card:hover {
    transform: translateY(-10px);
    border-color: var(--primary);
    box-shadow: 0 15px 30px rgba(0, 0, 0, 0.5);
}

.product-img-container {
    width: 100%;
    height: 200px;
    border-radius: 10px;
    overflow: hidden;
    margin-bottom: 20px;
}

.product-img-container img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: 0.5s;
}

.product-card:hover img {
    transform: scale(1.1);
}

.product-card h3 {
    font-size: 1.2rem;
    margin-bottom: 10px;
}

.product-card p {
    color: var(--text-muted);
    font-size: 0.9rem;
    height: 45px;
    overflow: hidden;
}

.price-tag {
    display: block;
    font-size: 1.5rem;
    font-weight: 900;
    color: var(--primary);
    margin: 15px 0;
}

/* Boutons */
.btn-group {
    display: flex;
    gap: 10px;
}

.btn-buy {
    flex: 2;
    background: var(--primary);
    color: white;
    text-align: center;
    text-decoration: none;
    padding: 12px;
    border-radius: 6px;
    font-weight: bold;
    font-size: 0.8rem;
    transition: 0.3s;
}

.btn-cart {
    flex: 1;
    background: rgba(255, 255, 255, 0.05);
    color: white;
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 6px;
    cursor: pointer;
    font-size: 1.2rem;
    transition: 0.3s;
}

.btn-cart:hover { background: var(--primary); }

/* =========================================
   PANIER COULISSANT (DRAWER)
   ========================================= */
.cart-icon-wrapper {
    position: relative;
    cursor: pointer;
    font-size: 1.5rem;
}

#cart-count {
    position: absolute;
    top: -10px;
    right: -12px;
    background: var(--primary);
    color: white;
    font-size: 10px;
    width: 20px;
    height: 20px;
    display: flex;
    justify-content: center;
    align-items: center;
    border-radius: 50%;
    font-weight: bold;
}

.cart-drawer {
    position: fixed;
    top: 0;
    right: -400px; /* Masqué */
    width: 380px;
    height: 100%;
    background: #0f0f0f;
    z-index: 2000;
    transition: 0.4s ease-in-out;
    display: flex;
    flex-direction: column;
    padding: 30px;
    box-shadow: -10px 0 40px rgba(0,0,0,0.9);
}

.cart-drawer.active { right: 0; }

.cart-overlay {
    position: fixed;
    top: 0; left: 0;
    width: 100%; height: 100%;
    background: rgba(0,0,0,0.8);
    display: none;
    z-index: 1999;
}

.cart-overlay.active { display: block; }

.cart-items-content {
    flex: 1;
    overflow-y: auto;
    margin-top: 20px;
}

.cart-item-row {
    display: flex;
    align-items: center;
    gap: 15px;
    padding: 15px 0;
    border-bottom: 1px solid #222;
}

.cart-item-img {
    width: 60px;
    height: 60px;
    object-fit: cover;
    border-radius: 5px;
}

.cart-footer {
    border-top: 1px solid #333;
    padding-top: 20px;
}

.total-box {
    display: flex;
    justify-content: space-between;
    font-size: 1.3rem;
    font-weight: 900;
    margin-bottom: 20px;
    color: var(--primary);
}

.btn-checkout {
    width: 100%;
    padding: 18px;
    background: var(--primary);
    color: white;
    border: none;
    font-weight: 900;
    border-radius: 8px;
    cursor: pointer;
    text-transform: uppercase;
}

/* =========================================
   RESPONSIVE (Mobile)
   ========================================= */
@media (max-width: 768px) {
    .nav-center {
        display: none; /* Cache les catégories sur mobile pour éviter le chevauchement */
    }
    .cart-drawer {
        width: 100%;
        right: -100%;
    }
}

/* ===========================================
	HERO 
   =========================================== */
   /* --- STYLE SPECIFIQUE A L'INDEX --- */
/* --- STYLE GLOBAL & NÉON --- */
:root {
    --primary-blue: #007bff;
    --neon-glow: rgba(0, 123, 255, 0.7);
}

body, html {
    margin: 0;
    padding: 0;
    background: #050505;
    font-family: 'Arial Black', sans-serif;
    color: white;
    overflow-x: hidden;
}

.hero {
    height: 100vh;
    width: 100%;
    /* On utilise l'image hébergée sur ton WordPress */
    background: linear-gradient(rgba(0,0,0,0.7), rgba(0,0,0,0.7)), 
                url('http://www.nordikperf.fr/wp-content/uploads/2026/05/porshenordik.jpg'); 
    
    background-size: cover;
    background-position: center;
    background-attachment: fixed; /* L'effet pro qui fixe le fond au scroll */
    background-repeat: no-repeat;
    
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    text-align: center;
}

/* LE LOGO */
.main-logo {
    width: 180px;
    margin-bottom: 20px;
    filter: drop-shadow(0 0 10px var(--primary-blue));
}

/* LE TITRE GÉANT NÉON */
.main-title {
    font-size: 6rem;
    font-weight: 900;
    letter-spacing: 20px;
    margin: 0;
    text-transform: uppercase;
    text-shadow: 0 0 15px var(--neon-glow), 0 0 30px var(--neon-glow);
}

.main-title span {
    color: var(--primary-blue);
}

.main-subtitle {
    font-size: 1rem;
    letter-spacing: 12px;
    color: #888;
    margin-bottom: 40px;
}

/* LE BOUTON NÉON */
.btn-primary-neon {
    padding: 20px 50px;
    font-size: 1rem;
    font-weight: bold;
    color: white;
    text-decoration: none;
    border: 3px solid var(--primary-blue);
    border-radius: 5px;
    text-transform: uppercase;
    letter-spacing: 5px;
    box-shadow: 0 0 15px var(--primary-blue), inset 0 0 10px var(--primary-blue);
    transition: 0.4s;
}

.btn-primary-neon:hover {
    background: var(--primary-blue);
    box-shadow: 0 0 50px var(--primary-blue);
    transform: scale(1.1);
}

/* Animation d'entrée */
.hero-content {
    animation: fadeInUp 1.5s ease-out;
}

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

/* SECTION CATEGORIES */
.cat-selection {
    padding: 60px 5%;
    max-width: 1400px;
    margin: 0 auto;
    text-align: center;
}

.section-title-neon {
    font-size: 2.5rem;
    letter-spacing: 10px;
    margin-bottom: 50px;
    text-shadow: 0 0 10px var(--primary-blue);
    text-transform: uppercase;
}

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

.cat-card {
    position: relative;
    height: 500px;
    border-radius: 15px;
    overflow: hidden;
    text-decoration: none;
    border: 1px solid rgba(255,255,255,0.1);
    transition: 0.5s ease;
}

.cat-card img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: 0.8s ease;
    filter: grayscale(100%) brightness(0.6);
}

.cat-img-overlay {
    position: absolute;
    inset: 0;
    background: linear-gradient(to top, rgba(0, 123, 255, 0.6), transparent);
    opacity: 0;
    transition: 0.5s;
    z-index: 1;
}

.cat-info {
    position: absolute;
    bottom: 40px;
    left: 0;
    right: 0;
    z-index: 2;
    transition: 0.5s;
}

.cat-info h3 {
    font-size: 2rem;
    letter-spacing: 5px;
    color: white;
    margin-bottom: 10px;
}

.cat-info p {
    color: #ddd;
    font-size: 0.9rem;
    margin-bottom: 20px;
    opacity: 0;
    transform: translateY(20px);
    transition: 0.5s;
}

.cat-btn {
    padding: 10px 25px;
    border: 2px solid white;
    color: white;
    font-weight: bold;
    border-radius: 5px;
    opacity: 0;
    transition: 0.5s;
}

/* EFFET HOVER (SURVOL) */
.cat-card:hover {
    border-color: var(--primary-blue);
    box-shadow: 0 0 30px var(--primary-blue);
    transform: translateY(-10px);
}

.cat-card:hover img {
    filter: grayscale(0%) brightness(0.8);
    transform: scale(1.1);
}

.cat-card:hover .cat-img-overlay {
    opacity: 1;
}

.cat-card:hover .cat-info p, 
.cat-card:hover .cat-btn {
    opacity: 1;
    transform: translateY(0);
}

/* Mobile */
@media (max-width: 900px) {
    .cat-grid { grid-template-columns: 1fr; }
    .cat-card { height: 350px; }
}

/* --- FOOTER STYLE --- */
.main-footer {
    background: #050505;
    border-top: 1px solid rgba(255,255,255,0.05);
    padding: 60px 5% 20px;
    margin-top: 80px;
}

.footer-container {
    max-width: 1200px;
    margin: 0 auto;
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
    gap: 40px;
}

.footer-logo { height:80px; margin-bottom: 20px; }

.footer-col h4 {
    color: var(--primary-blue);
    letter-spacing: 3px;
    margin-bottom: 20px;
    font-size: 0.9rem;
}

.social-links a {
    display: block;
    color: #888;
    text-decoration: none;
    margin-bottom: 10px;
    transition: 0.3s;
}

.social-links a:hover { color: var(--primary-blue); }

.payment-icons {
    font-weight: bold;
    letter-spacing: 2px;
    color: #444;
}

/* --- CONTACT PAGE STYLE --- */
.contact-section {
    min-height: 80vh;
    display: flex;
    justify-content: center;
    align-items: center;
    padding: 40px 20px;
}

.contact-box {
    background: rgba(255,255,255,0.02);
    padding: 50px;
    border-radius: 15px;
    border: 1px solid rgba(255,255,255,0.05);
    max-width: 600px;
    width: 100%;
    text-align: center;
}

.neon-text-small {
    font-size: 2.5rem;
    letter-spacing: 5px;
    margin-bottom: 10px;
    text-shadow: 0 0 10px var(--primary-blue);
}

.input-group { margin-bottom: 20px; }

.contact-form input, .contact-form textarea {
    width: 100%;
    padding: 15px;
    background: #111;
    border: 1px solid #333;
    color: white;
    border-radius: 5px;
    outline: none;
    transition: 0.3s;
}

.contact-form input:focus, .contact-form textarea:focus {
    border-color: var(--primary-blue);
    box-shadow: 0 0 10px var(--primary-blue);
}
.footer-links a {
    display: block;
    color: #888;
    text-decoration: none;
    margin-bottom: 12px;
    font-size: 0.9rem;
    letter-spacing: 1px;
    transition: 0.3s;
}

.footer-links a:hover {
    color: var(--primary-blue);
    padding-left: 5px; /* Petit effet de mouvement au survol */
}

/* CONTAINER PRINCIPAL FICHE PRODUIT */
.product-page-container {
    max-width: 1200px;
    margin: 50px auto;
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 60px;
    padding: 0 20px;
}

/* GALERIE */
.main-img-box {
    background: #111;
    border-radius: 15px;
    border: 1px solid rgba(255,255,255,0.05);
    overflow: hidden;
    margin-bottom: 20px;
}

.main-img-box img { width: 100%; display: block; }

.thumb-row { display: flex; gap: 10px; }
.thumb-row img {
    width: 80px;
    height: 80px;
    object-fit: cover;
    border-radius: 5px;
    cursor: pointer;
    border: 1px solid transparent;
}
.thumb-row img:hover { border-color: var(--primary-blue); }

/* INFOS PRODUIT */
.category-tag { color: var(--primary-blue); letter-spacing: 2px; font-size: 0.8rem; font-weight: bold; }

.product-title-neon { font-size: 2.5rem; letter-spacing: 2px; margin: 10px 0; }
.product-title-neon span { color: var(--primary-blue); text-shadow: 0 0 10px var(--primary-blue); }

.product-sku { color: #555; font-size: 0.8rem; margin-bottom: 20px; }

.product-price {
    font-size: 2rem;
    font-weight: 900;
    color: white;
    margin-bottom: 30px;
}

.product-description { color: #bbb; line-height: 1.8; margin-bottom: 30px; }

.specs-list { list-style: none; padding: 0; margin-bottom: 40px; }
.specs-list li { margin-bottom: 10px; color: #eee; font-size: 0.95rem; }

/* ZONE ACHAT */
.purchase-box { display: flex; gap: 20px; }
#product-qty {
    width: 60px;
    background: #111;
    border: 1px solid #333;
    color: white;
    padding: 10px;
    border-radius: 5px;
    text-align: center;
}

/* Mobile */
@media (max-width: 800px) {
    .product-page-container { grid-template-columns: 1fr; }
}

/* Supprime le soulignement ET force la couleur blanche pour TOUS les liens */
a {
    text-decoration: none !important;
    color: inherit !important; /* Prend la couleur du texte parent */
}

/* Précision pour les liens qui ne sont pas dans un bloc de texte */
a:link, a:visited, a:active {
    text-decoration: none !important;
    color: white !important; /* Force le blanc pur */
}

/* On garde l'effet de survol uniquement si tu le souhaites */
a:hover {
    color: var(--primary-blue) !important; /* Devient bleu uniquement au survol */
    transition: 0.3s ease;
}

/* Style spécifique pour le bouton d'achat de la fiche produit */
.purchase-box .btn-primary-neon {
    background-color: var(--primary-blue) !important; /* Fond bleu néon */
    color: #000000 !important; /* Texte noir pour être lisible sur le bleu */
    border: none !important;
    font-weight: 900 !important; /* Texte bien gras */
    box-shadow: 0 0 20px var(--primary-blue) !important; /* Halo lumineux */
    cursor: pointer;
    transition: 0.3s ease;
    text-shadow: none !important; /* Pas d'ombre sur le texte noir */
}

.purchase-box .btn-primary-neon:hover {
    background-color: #ffffff !important; /* Devient blanc au survol */
    box-shadow: 0 0 30px #ffffff !important;
    transform: scale(1.02);
}

/* --- LE TIROIR DU PANIER (DRAWER) --- */
.cart-drawer {
    position: fixed;
    top: 0;
    right: -400px; /* Caché par défaut */
    width: 350px;
    height: 100%;
    background: #0a0a0a; /* Noir profond */
    border-left: 2px solid var(--primary-blue);
    box-shadow: -10px 0 30px rgba(0, 0, 0, 0.9);
    z-index: 2000;
    transition: 0.4s cubic-bezier(0.16, 1, 0.3, 1);
    display: flex;
    flex-direction: column;
    color: white;
}

.cart-drawer.active {
    right: 0; /* Apparaît quand on clique */
}

/* L'OVERLAY (FOND SOMBRE) */
.cart-overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.8);
    backdrop-filter: blur(4px);
    display: none;
    z-index: 1500;
}

.cart-overlay.active {
    display: block;
}

/* HEADER DU PANIER */
.cart-header {
    padding: 25px;
    border-bottom: 1px solid #222;
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.cart-header h3 {
    letter-spacing: 3px;
    color: var(--primary-blue);
    text-shadow: 0 0 10px var(--primary-blue);
    margin: 0;
}

.close-cart {
    background: none;
    border: none;
    color: white;
    font-size: 1.5rem;
    cursor: pointer;
}

/* ARTICLES DANS LE PANIER */
.cart-items {
    flex: 1;
    overflow-y: auto;
    padding: 20px;
}

.cart-item {
    display: flex;
    align-items: center;
    gap: 15px;
    margin-bottom: 20px;
    padding-bottom: 15px;
    border-bottom: 1px solid #111;
}

.cart-item img {
    width: 60px;
    height: 60px;
    object-fit: cover;
    border-radius: 5px;
    border: 1px solid var(--primary-blue);
}

.item-info h4 {
    font-size: 0.9rem;
    margin: 0 0 5px 0;
    text-transform: uppercase;
}

.item-info p {
    color: var(--primary-blue);
    font-weight: bold;
    margin: 0;
}

.remove-btn {
    background: none;
    border: none;
    cursor: pointer;
    margin-left: auto;
    filter: grayscale(1);
    transition: 0.3s;
}

.remove-btn:hover { filter: grayscale(0); transform: scale(1.2); }

/* FOOTER DU PANIER */
.cart-footer {
    padding: 25px;
    background: #0f0f0f;
    border-top: 1px solid #222;
}

.total-row {
    display: flex;
    justify-content: space-between;
    font-weight: bold;
    font-size: 1.2rem;
    margin-bottom: 20px;
    letter-spacing: 1px;
}

.checkout-btn {
    width: 100%;
    padding: 15px;
    background: var(--primary-blue);
    color: black;
    border: none;
    font-weight: 900;
    letter-spacing: 2px;
    cursor: pointer;
    box-shadow: 0 0 15px var(--primary-blue);
    transition: 0.3s;
}

.checkout-btn:hover {
    background: white;
    box-shadow: 0 0 25px white;
}

/* Style spécifique pour le bouton du formulaire de contact */
.contact-form button[type="submit"], 
.btn-send {
    width: 100%;
    padding: 15px;
    background: var(--primary-blue) !important;
    color: #000000 !important; /* Texte noir pour trancher sur le bleu */
    border: none !important;
    font-size: 1rem;
    font-weight: 900;
    text-transform: uppercase;
    letter-spacing: 3px;
    cursor: pointer;
    border-radius: 4px;
    box-shadow: 0 0 15px var(--primary-blue) !important;
    transition: 0.3s ease-all;
    margin-top: 20px;
}

.contact-form button[type="submit"]:hover,
.btn-send:hover {
    background: #ffffff !important; /* Devient blanc pur au survol */
    box-shadow: 0 0 30px #ffffff !important;
    transform: translateY(-3px);
}

/* Style de la notification de succès */
.notification-success {
    position: fixed;
    top: 20px;
    left: 50%;
    transform: translateX(-50%) translateY(-100px); /* Caché en haut */
    background: #0a0a0a;
    border: 1px solid var(--primary-blue);
    box-shadow: 0 0 20px var(--primary-blue);
    color: white;
    padding: 15px 30px;
    border-radius: 5px;
    z-index: 3000;
    transition: 0.5s cubic-bezier(0.175, 0.885, 0.32, 1.275);
    text-align: center;
}

.notification-success.show {
    transform: translateX(-50%) translateY(0); /* Descend à l'écran */
}

.notification-success h4 {
    color: var(--primary-blue);
    margin: 0 0 5px 0;
    text-transform: uppercase;
    letter-spacing: 2px;
}

.review-form {
    max-width: 600px;
    margin: 30px auto;
    background: rgba(255, 255, 255, 0.02);
    padding: 30px;
    border: 1px solid #222;
    border-radius: 10px;
}

.rating-input {
    display: flex;
    align-items: center;
    gap: 20px;
    margin-bottom: 20px;
}

.stars-selector {
    display: flex;
    flex-direction: row-reverse; /* Pour la logique de sélection */
    gap: 5px;
}

.stars-selector input { display: none; }

.stars-selector label {
    font-size: 1.5rem;
    color: #333;
    cursor: pointer;
    transition: 0.3s;
}

/* Effet au survol et quand coché */
.stars-selector label:hover,
.stars-selector label:hover ~ label,
.stars-selector input:checked ~ label {
    color: var(--primary-blue);
    text-shadow: 0 0 10px var(--primary-blue);
}

.review-form input, .review-form textarea {
    width: 100%;
    background: #111;
    border: 1px solid #333;
    color: white;
    padding: 12px;
    margin-bottom: 15px;
    border-radius: 5px;
}

.product-rating-summary {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-bottom: 15px;
    font-weight: bold;
    color: var(--primary-blue);
    text-shadow: 0 0 5px var(--primary-blue);
}

.product-rating-summary .stars-gold {
    color: var(--primary-blue);
    letter-spacing: 2px;
}

.product-rating-summary .review-count {
    color: #666;
    font-size: 0.85rem;
    text-shadow: none;
}

/* Style spécifique pour le bouton du formulaire d'avis */
.review-form .btn-primary-neon {
    background-color: var(--primary-blue) !important;
    color: #000000 !important; /* Texte noir pour le contraste */
    border: none !important;
    font-weight: 900 !important;
    box-shadow: 0 0 15px var(--primary-blue) !important;
    cursor: pointer;
    width: 100%; /* Il prend toute la largeur du formulaire */
    padding: 12px;
    letter-spacing: 2px;
    transition: 0.3s;
}

.review-form .btn-primary-neon:hover {
    background-color: #ffffff !important;
    box-shadow: 0 0 25px #ffffff !important;
    transform: scale(1.02);
}

/* Conteneur de tous les avis */
.reviews-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
    gap: 20px;
    margin-top: 40px;
    padding-bottom: 50px;
}

/* La carte d'avis individuelle */
.review-card {
    background: rgba(255, 255, 255, 0.05); /* Fond gris très léger pour détacher du noir */
    border: 1px solid #222;
    padding: 20px;
    border-radius: 8px;
    transition: 0.3s;
}

.review-card:hover {
    border-color: var(--primary-blue);
    box-shadow: 0 0 15px rgba(0, 212, 255, 0.1);
}

/* Les étoiles dans l'avis */
.review-stars {
    color: var(--primary-blue);
    font-size: 1.1rem;
    margin-bottom: 10px;
    text-shadow: 0 0 5px var(--primary-blue);
}

/* LE TEXTE DE L'AVIS (C'est ici qu'on règle le problème de visibilité) */
.review-text {
    color: #eeeeee !important; /* Blanc cassé pour la lecture */
    font-style: italic;
    line-height: 1.6;
    margin-bottom: 15px;
    font-size: 0.95rem;
}

/* L'auteur de l'avis */
.review-author {
    color: #888;
    font-size: 0.8rem;
    text-transform: uppercase;
    letter-spacing: 1px;
}

.review-author span {
    color: var(--primary-blue); /* "Acheteur vérifié" en bleu */
    font-weight: bold;
}

/* On sature le fond pour qu'il soit noir pur */
html, body, .page-container, .main-content {
    background-color: #000 !important;
}

/* Horizon utilise des "sections" avec des ID spécifiques, on les rend transparentes */
.shopify-section, 
.index-section, 
.page-width, 
.product-single__photos, 
.product-single__meta {
    background-color: transparent !important;
    border: none !important;
}

/* Supprimer les overlays et dégradés typiques d'Horizon */
.hero__overlay::before, 
.image-row__content {
    background: none !important;
    background-color: transparent !important;
}
/* On force le bouton "Ajouter au panier" d'Horizon */
.btn--add-to-cart, 
.shopify-payment-button__button--unbranded {
    background-color: #00d4ff !important;
    color: #000 !important;
    box-shadow: 0 0 15px #00d4ff !important;
    border-radius: 0px !important; /* Pour garder l'aspect racing */
    font-weight: bold !important;
    text-transform: uppercase !important;
}


/* --- PAGE BOUTIQUE : CATÉGORIES & LOGO --- */

/* 1. Fond Métallique (Rappel) */
body.archive.post-type-archive-product {
    background: url('http://www.nordikperf.fr/wp-content/uploads/2026/03/fond.jpg') no-repeat center center fixed !important;
    background-size: cover !important;
}

/* 2. Style du Logo */
.shop-logo-header {
    text-align: center;
    padding: 40px 0;
}

.center-logo {
    max-width: 300px; /* Ajuste selon la taille de ton logo */
    filter: drop-shadow(0 0 10px rgba(0, 212, 255, 0.5)); /* Effet néon bleu sous le logo */
}

/* 3. Style des Blocs Catégories */
.woocommerce ul.products li.product-category {
    background: rgba(0, 0, 0, 0.7) !important;
    border: 2px solid #00d4ff !important;
    padding: 0 !important;
    transition: 0.4s ease;
    overflow: hidden;
}

.woocommerce ul.products li.product-category:hover {
    box-shadow: 0 0 30px #00d4ff;
    transform: scale(1.02);
}

/* Image de la catégorie */
.woocommerce ul.products li.product-category img {
    opacity: 0.8;
    transition: 0.4s;
    border-bottom: 2px solid #00d4ff;
}

.woocommerce ul.products li.product-category:hover img {
    opacity: 1;
}

/* Texte de la catégorie (ex: "PC GAMER", "COMPOSANTS") */
.woocommerce ul.products li.product-category h2 {
    color: white !important;
    text-align: center;
    text-transform: uppercase !important;
    font-weight: 900 !important;
    letter-spacing: 3px;
    padding: 20px 10px !important;
    margin: 0 !important;
    font-size: 1.5rem !important;
    background: linear-gradient(to top, #000, transparent);
}

.woocommerce ul.products li.product-category h2 .count {
    display: none; /* Masque le nombre de produits (ex: "12") pour épurer */
}

/* --- GRILLE DE 3 CATÉGORIES --- */

/* On force la grille WooCommerce */
.woocommerce ul.products {
    display: grid !important;
    grid-template-columns: repeat(3, 1fr) !important; /* Force 3 colonnes */
    gap: 30px !important; /* Espace entre les blocs */
    padding: 40px 0 !important;
    margin: 0 auto !important;
    max-width: 1200px !important;
    list-style: none !important;
}

/* Ajustement des blocs catégories */
.woocommerce ul.products li.product-category {
    width: 100% !important; /* Prend toute la place de sa colonne */
    margin: 0 !important; /* Supprime les marges par défaut de WC */
    float: none !important; /* Annule le vieux système de float */
    position: relative;
    border: 2px solid #00d4ff !important;
    background: rgba(0, 0, 0, 0.6) !important;
    transition: 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275);
}

/* Effet de zoom sur l'image au survol */
.woocommerce ul.products li.product-category a img {
    width: 100% !important;
    height: 250px !important; /* Hauteur fixe pour l'uniformité */
    object-fit: cover !important;
    display: block;
    filter: grayscale(50%); /* Un peu plus sombre par défaut */
    transition: 0.5s;
}

.woocommerce ul.products li.product-category:hover a img {
    filter: grayscale(0%);
    transform: scale(1.05);
}

/* Titre centré sous l'image */
.woocommerce ul.products li.product-category .woocommerce-loop-category__title {
    background: rgba(0, 0, 0, 0.9) !important;
    color: #fff !important;
    margin: 0 !important;
    padding: 20px 10px !important;
    text-align: center;
    font-size: 1.4rem !important;
    text-transform: uppercase;
    letter-spacing: 2px;
    border-top: 2px solid #00d4ff;
}

/* Masquer le compteur de produits (ex: 4 produits) */
.woocommerce-loop-category__title .count {
    display: none !important;
}

/* Responsive : passage à 1 colonne sur mobile */
@media (max-width: 768px) {
    .woocommerce ul.products {
        grid-template-columns: 1fr !important;
        padding: 20px !important;
    }
}

/* Stylise le bandeau d'alerte pour le fond métal */
.woocommerce-info {
    background-color: rgba(0, 0, 0, 0.7) !important; /* Fond noir transparent */
    color: #00d4ff !important; /* Texte bleu néon */
    border: 1px solid #00d4ff !important; /* Bordure néon */
    border-top: 3px solid #00d4ff !important;
    font-weight: bold;
    text-transform: uppercase;
    letter-spacing: 1px;
    box-shadow: 0 0 15px rgba(0, 212, 255, 0.2);
}

/* Supprime la petite icône bleue par défaut à gauche si besoin */
.woocommerce-info::before {
    color: #00d4ff !important;
}

/* --- NETTOYAGE BOUTIQUE --- */
.woocommerce-info, 
.woocommerce-no-products-found,
.woocommerce-products-header__title {
    display: none !important; /* Supprime le carré blanc et le titre "Boutique" */
}

/* --- LOGO CENTRÉ --- */
.shop-header-logo {
    text-align: center;
    padding: 60px 0 20px 0;
}

.shop-header-logo img {
    max-width: 250px;
    filter: drop-shadow(0 0 15px #00d4ff); /* Éclat bleu sous le logo */
}

/* --- LE RENDU FINAL DES CATÉGORIES --- */
.grid-3-categories {
    display: grid !important;
    grid-template-columns: repeat(3, 1fr) !important;
    gap: 40px !important; /* On laisse de l'espace pour voir le métal derrière */
    list-style: none !important;
    padding: 0 !important;
    margin-top: 50px !important;
}

.grid-3-categories li.product-category {
    background: rgba(0, 0, 0, 0.85) !important; /* Noir profond */
    border: 2px solid #00d4ff !important;
    position: relative;
    transition: all 0.4s cubic-bezier(0.25, 0.46, 0.45, 0.94);
    box-shadow: 0 0 10px rgba(0, 212, 255, 0.1);
}

.grid-3-categories li.product-category:hover {
    transform: translateY(-10px) scale(1.02);
    box-shadow: 0 0 40px rgba(0, 212, 255, 0.4);
    z-index: 10;
}

/* On force l'image à être parfaite */
.grid-3-categories li.product-category img {
    width: 100% !important;
    height: 300px !important; /* Hauteur fixe pour que tout soit aligné */
    object-fit: cover !important;
    filter: brightness(0.7) grayscale(20%);
    transition: 0.4s;
}

.grid-3-categories li.product-category:hover img {
    filter: brightness(1) grayscale(0%);
}

/* Le bandeau du nom de la catégorie */
.grid-3-categories li.product-category h2 {
    color: #fff !important;
    background: #000 !important;
    margin: 0 !important;
    padding: 25px 10px !important;
    text-align: center !important;
    font-size: 1.6rem !important;
    font-weight: 900 !important;
    text-transform: uppercase;
    letter-spacing: 4px;
    border-top: 2px solid #00d4ff;
    text-shadow: 0 0 10px rgba(255,255,255,0.3);
}

/* Suppression des textes parasites du thème */
.woocommerce-result-count, .woocommerce-ordering {
    display: none !important;
}

/* --- GRILLE MANUELLE NORDIK --- */
.grid-3-categories {
    display: grid !important;
    grid-template-columns: repeat(3, 1fr) !important;
    gap: 30px !important;
    list-style: none !important;
    padding: 0 !important;
}

.grid-3-categories li.product-category {
    background: rgba(0, 0, 0, 0.8) !important;
    border: 2px solid #00d4ff !important;
    overflow: hidden;
    transition: 0.4s;
}

.grid-3-categories li.product-category:hover {
    box-shadow: 0 0 25px rgba(0, 212, 255, 0.6);
    transform: translateY(-5px);
}

.grid-3-categories li.product-category img {
    width: 100% !important;
    height: 250px !important;
    object-fit: cover !important;
    border-bottom: 2px solid #00d4ff;
}

.grid-3-categories li.product-category h2 {
    color: white !important;
    text-align: center;
    padding: 20px !important;
    margin: 0 !important;
    font-size: 1.5rem !important;
    text-transform: uppercase;
    letter-spacing: 2px;
}

/* On nettoie les résidus du thème Hello Elementor */
.elementor-page-title, .woocommerce-products-header {
    display: none !important;
}

.no-img-placeholder {
    height: 250px;
    background: #111;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #444;
}

/* --- BLOCS CATÉGORIES ARRONDIS & SEMI-TRANSPARENTS --- */
.grid-3-categories {
    display: grid !important;
    grid-template-columns: repeat(3, 1fr) !important;
    gap: 40px !important;
    padding: 20px !important;
}

.grid-3-categories li.product-category {
    /* Arrondis et Transparence */
    background: rgba(0, 0, 0, 0.6) !important; /* 0.6 permet de voir le métal derrière */
    border: 2px solid #00d4ff !important;
    border-radius: 25px !important; /* L'arrondi prononcé */
    
    overflow: hidden; /* Important pour que l'image ne dépasse pas de l'arrondi */
    transition: all 0.4s ease;
    backdrop-filter: blur(5px); /* Optionnel: floute un peu le métal pour la lisibilité */
}

.grid-3-categories li.product-category:hover {
    transform: translateY(-10px);
    box-shadow: 0 0 40px rgba(0, 212, 255, 0.5);
    background: rgba(0, 0, 0, 0.7) !important;
}

/* On arrondit aussi le haut de l'image */
.grid-3-categories li.product-category img {
    width: 100% !important;
    height: 280px !important;
    object-fit: cover !important;
    border-radius: 23px 23px 0 0 !important; /* Arrondit seulement le haut */
    border-bottom: 2px solid #00d4ff;
    display: block;
}

/* Style du texte avec fond noir arrondi en bas */
.grid-3-categories li.product-category h2 {
    color: #fff !important;
    background: rgba(0, 0, 0, 0.8) !important; /* Un peu plus sombre pour le texte */
    margin: 0 !important;
    padding: 25px 10px !important;
    text-align: center !important;
    font-size: 1.5rem !important;
    text-transform: uppercase;
    letter-spacing: 3px;
    border-radius: 0 0 23px 23px !important; /* Arrondit le bas du bloc noir */
}
/* --- GRILLE DES PRODUITS INDIVIDUELS --- */

/* On force la grille de 3 pour les produits aussi */
.woocommerce ul.products.columns-3, 
.woocommerce.archive ul.products {
    display: grid !important;
    grid-template-columns: repeat(3, 1fr) !important;
    gap: 40px !important;
    padding: 40px 20px !important;
}

/* La carte produit style "Capsule" */
.woocommerce ul.products li.product {
    background: rgba(0, 0, 0, 0.5) !important;
    border: 2px solid #00d4ff !important;
    border-radius: 50px !important;
    padding: 0 !important;
    overflow: hidden;
    transition: 0.4s ease-in-out;
    backdrop-filter: blur(5px);
    text-align: center;
}

.woocommerce ul.products li.product:hover {
    box-shadow: 0 0 30px rgba(0, 212, 255, 0.4);
    transform: translateY(-10px);
}

/* Image du produit */
.woocommerce ul.products li.product img {
    width: 100% !important;
    height: 250px !important;
    object-fit: cover !important;
    border-radius: 48px 48px 0 0 !important;
    margin-bottom: 0 !important;
    border-bottom: 1px solid rgba(0, 212, 255, 0.3);
}

/* Titre du produit */
.woocommerce ul.products li.product h2.woocommerce-loop-product__title {
    color: white !important;
    font-size: 1.2rem !important;
    text-transform: uppercase;
    padding: 20px 15px 10px 15px !important;
    margin: 0 !important;
    letter-spacing: 2px;
}

/* Prix Néon */
.woocommerce ul.products li.product .price {
    color: #00d4ff !important;
    font-size: 1.4rem !important;
    display: block;
    margin-bottom: 15px !important;
    font-weight: bold;
    text-shadow: 0 0 10px rgba(0, 212, 255, 0.5);
}

/* Bouton Ajouter au panier / Voir l'article */
.woocommerce ul.products li.product .button {
    background: transparent !important;
    border: 2px solid #00d4ff !important;
    color: white !important;
    border-radius: 30px !important; /* Bouton arrondi aussi */
    padding: 12px 25px !important;
    text-transform: uppercase;
    font-weight: bold;
    margin-bottom: 25px !important;
    transition: 0.3s;
}

.woocommerce ul.products li.product .button:hover {
    background: #00d4ff !important;
    color: black !important;
    box-shadow: 0 0 20px #00d4ff;
}
/* --- STYLE DES PRODUITS (AMORTISSEURS, ETC.) --- */

/* On force la grille de 3 colonnes pour les produits */
.archive.tax-product_cat ul.products {
    display: grid !important;
    grid-template-columns: repeat(3, 1fr) !important;
    gap: 40px !important;
    list-style: none !important;
    padding: 20px 0 !important;
}

/* La carte produit "Bulle" */
.archive.tax-product_cat li.product {
    background: rgba(0, 0, 0, 0.6) !important; /* Semi-transparent pour voir le métal */
    border: 2px solid #00d4ff !important;
    border-radius: 50px !important; /* On garde tes arrondis signature */
    overflow: hidden;
    transition: 0.4s ease;
    backdrop-filter: blur(5px);
    text-align: center;
    width: 100% !important;
    margin: 0 !important;
}

.archive.tax-product_cat li.product:hover {
    box-shadow: 0 0 30px rgba(0, 212, 255, 0.5);
    transform: translateY(-10px);
}

/* Image de l'amortisseur */
.archive.tax-product_cat li.product img {
    width: 100% !important;
    height: 250px !important;
    object-fit: contain !important; /* "contain" pour ne pas couper la pièce mécanique */
    padding: 20px;
    background: rgba(255, 255, 255, 0.05);
    border-bottom: 1px solid #00d4ff;
}

/* Titre du produit */
.archive.tax-product_cat li.product h2.woocommerce-loop-product__title {
    color: #fff !important;
    font-size: 1.1rem !important;
    text-transform: uppercase;
    padding: 15px !important;
    margin: 0 !important;
    letter-spacing: 1px;
}

/* Prix en bleu néon */
.archive.tax-product_cat li.product .price {
    color: #00d4ff !important;
    font-size: 1.4rem !important;
    font-weight: bold;
    display: block;
    margin: 10px 0 !important;
    text-shadow: 0 0 10px rgba(0, 212, 255, 0.4);
}

/* Bouton "Ajouter au panier" */
.archive.tax-product_cat li.product .button {
    background: transparent !important;
    border: 2px solid #00d4ff !important;
    color: #fff !important;
    border-radius: 30px !important;
    margin-bottom: 25px !important;
    padding: 10px 25px !important;
    text-transform: uppercase;
    font-weight: 800;
    transition: 0.3s;
}

.archive.tax-product_cat li.product .button:hover {
    background: #00d4ff !important;
    color: #000 !important;
    box-shadow: 0 0 20px #00d4ff;
}

/* Nettoyage des textes "Boutique / Résultats" */
.woocommerce-result-count, .woocommerce-ordering {
    display: none !important;
}
/* --- RENDRE LE FOND MÉTAL VISIBLE PARTOUT --- */

/* 1. On rend transparents tous les conteneurs principaux */
#content, 
.site-main, 
.ast-container, 
.elementor-section, 
.elementor-container,
.archive.tax-product_cat,
.woocommerce-page {
    background: transparent !important;
    background-color: transparent !important;
}

/* 2. On supprime les ombres et bordures blanches du thème */
article, .post-content, .entry-content {
    background: transparent !important;
    border: none !important;
    box-shadow: none !important;
}

/* --- ON COLLE LE MÉTAL SUR LE NOIR --- */

body.archive.tax-product_cat, 
body.single-product, 
body.woocommerce-shop,
body.woocommerce-page {
    /* REMPLACE l'URL ci-dessous par le lien de ton image de métal */
    background-image: url('http://www.nordikperf.fr/wp-content/uploads/2026/03/fond.jpg') !important;
    background-attachment: fixed !important;
    background-size: cover !important;
    background-position: center !important;
    background-repeat: no-repeat !important;
    background-color: #000 !important; /* Au cas où l'image met du temps à charger */
}

/* On s'assure que rien ne cache le fond sur les pages produits */
#main, #primary, #content, .site-content {
    background: transparent !important;
    border: none !important;
}

/* SUPPRESSION DU RECTANGLE NOIR (HEADER) */
header#site-header, 
.site-header, 
#header, 
.elementor-location-header {
    display: none !important;
}

/* On remonte un peu tout pour que le logo soit bien placé */
.shop-custom-layout {
    margin-top: 0 !important;
    padding-top: 20px !important;
}
/* --- STRUCTURE GLOBALE --- */
.nordik-shop-wrapper {
    background: transparent !important;
    min-height: 100vh;
}

.nordik-container {
    max-width: 1300px;
    margin: 0 auto;
    padding: 0 20px 100px 20px;
}

/* --- LOGO --- */
.nordik-main-logo-container {
    text-align: center;
    padding: 60px 0 20px 0;
}

.nordik-logo {
    max-width: 350px;
    height: auto;
    filter: drop-shadow(0 0 20px rgba(0, 212, 255, 0.6));
}

/* --- SUPPRESSION DU CARRÉ NOIR EN HAUT --- */
/* On cible la pagination qui s'insère AVANT les produits */
.nordik-content-area > .woocommerce-pagination:first-child,
.woocommerce-products-header, 
.woocommerce-result-count, 
.woocommerce-ordering {
    display: none !important;
}

/* --- STYLE DE LA PAGINATION (EN BAS) --- */
.woocommerce-pagination {
    background: transparent !important;
    margin-top: 50px !important;
    padding: 20px !important;
    border: none !important;
}

.woocommerce-pagination ul.page-numbers {
    border: none !important;
    display: flex !important;
    justify-content: center !important;
    gap: 10px !important;
}

.woocommerce-pagination ul.page-numbers li span.current {
    background: #00d4ff !important;
    color: #000 !important;
    border-radius: 10px !important;
    box-shadow: 0 0 15px #00d4ff;
}

.woocommerce-pagination ul.page-numbers li a {
    background: rgba(0, 0, 0, 0.6) !important;
    color: #fff !important;
    border: 1px solid #00d4ff !important;
    border-radius: 10px !important;
    backdrop-filter: blur(5px);
}

/* --- NETTOYAGE DES FONDS DU THÈME --- */
#main, #content, .site-main, .elementor-section {
    background: transparent !important;
}
/* --- BARRE DE PAGINATION FIXE (STYLE COCKPIT) --- */

/* --- PAGINATION FIXE : FORCE BAS DE PAGE --- */

.woocommerce-pagination {
    /* Placement Absolu sur l'écran */
    position: fixed !important;
    bottom: 30px !important; /* Force la distance depuis le BAS */
    top: auto !important;    /* Annule tout placement vers le haut */
    left: 50% !important;
    transform: translateX(-50%) !important;
    
    /* Priorité maximale */
    z-index: 999999 !important; 
    
    /* Design Capsule Nordik */
    background: rgba(0, 0, 0, 0.85) !important;
    backdrop-filter: blur(15px) !important;
    border: 2px solid #00d4ff !important;
    border-radius: 50px !important;
    padding: 10px 25px !important;
    box-shadow: 0 0 30px rgba(0, 212, 255, 0.5) !important;
    
    display: block !important;
    width: auto !important;
    line-height: 1 !important;
}

/* On s'assure que les chiffres ne créent pas de décalage noir */
.woocommerce-pagination ul.page-numbers {
    background: transparent !important;
    border: none !important;
    margin: 0 !important;
    padding: 0 !important;
    display: flex !important;
    gap: 12px !important;
}

.woocommerce-pagination ul.page-numbers li {
    background: transparent !important;
    border: none !important;
    display: inline-block !important;
}

/* Style des numéros */
.woocommerce-pagination ul.page-numbers li a, 
.woocommerce-pagination ul.page-numbers li span {
    color: #fff !important;
    font-weight: 900 !important;
    text-decoration: none !important;
    font-size: 1.1rem !important;
    padding: 5px 10px !important;
    display: block !important;
    transition: 0.3s;
}

/* La page active qui claque en bleu */
.woocommerce-pagination ul.page-numbers li span.current {
    color: #00d4ff !important;
    text-shadow: 0 0 10px #00d4ff;
}
}

/* On aligne les chiffres proprement à l'intérieur */
.woocommerce-pagination ul.page-numbers {
    display: flex !important;
    align-items: center !important;
    gap: 15px !important;
    margin: 0 !important;
    padding: 0 !important;
    border: none !important;
}

/* Style des touches (chiffres) */
.woocommerce-pagination ul.page-numbers li span, 
.woocommerce-pagination ul.page-numbers li a {
    border: none !important;
    background: transparent !important;
    color: #fff !important;
    font-weight: 900 !important;
    font-size: 1.1rem !important;
    padding: 8px 12px !important;
    min-width: 35px;
    text-align: center;
    transition: 0.3s ease;
}

/* Page actuelle qui brille */
.woocommerce-pagination ul.page-numbers li span.current {
    color: #00d4ff !important;
    text-shadow: 0 0 10px #00d4ff;
    background: rgba(0, 212, 255, 0.1) !important;
    border-radius: 10px !important;
}

/* Survol des chiffres */
.woocommerce-pagination ul.page-numbers li a:hover {
    color: #00d4ff !important;
    transform: scale(1.2);
}

/* On cache les points de suspension si y'en a trop pour garder la barre fine */
.woocommerce-pagination ul.page-numbers li span.dots {
    color: rgba(255, 255, 255, 0.3) !important;
}

/* Correction pour que le dernier produit ne soit pas caché PAR la barre */
.nordik-container {
    padding-bottom: 120px !important; 
}

/* --- SUPPRESSION DU TITRE DE CATÉGORIE (AMORTISSEURS) --- */

.woocommerce-products-header__title, 
.page-title, 
.woocommerce-breadcrumb,
.term-description {
    display: none !important;
    height: 0 !important;
    margin: 0 !important;
    padding: 0 !important;
    visibility: hidden !important;
}

/* On s'assure qu'il n'y a pas d'espace vide à la place du titre */
.woocommerce-products-header {
    display: none !important;
    margin: 0 !important;
    padding: 0 !important;
}

/* --- FICHE PRODUIT : LA GRANDE CAPSULE --- */

/* 1. Le conteneur principal (La Bulle de Verre) */
.single-product div.product {
    background: rgba(0, 0, 0, 0.75) !important; /* Noir profond transparent */
    backdrop-filter: blur(15px) !important;
    border: 2px solid #00d4ff !important;
    border-radius: 50px !important;
    padding: 50px !important;
    margin: 40px auto !important;
    max-width: 1200px !important;
    box-shadow: 0 0 50px rgba(0, 212, 255, 0.2);
    display: flex;
    flex-wrap: wrap;
    gap: 40px;
}

/* 2. L'image de l'amortisseur (À gauche) */
.single-product .woocommerce-product-gallery {
    flex: 1;
    min-width: 300px;
}

.single-product .woocommerce-product-gallery img {
    border-radius: 30px !important;
    border: 1px solid rgba(0, 212, 255, 0.3) !important;
    background: rgba(255, 255, 255, 0.03);
    padding: 20px;
}

/* 3. Infos Produit (À droite) */
.single-product .summary {
    flex: 1;
    min-width: 300px;
    display: flex;
    flex-direction: column;
}

/* Titre et Prix */
.single-product .product_title {
    color: #fff !important;
    font-size: 2.5rem !important;
    text-transform: uppercase !important;
    letter-spacing: 2px;
    margin-bottom: 10px !important;
}

.single-product .price {
    color: #00d4ff !important;
    font-size: 2rem !important;
    font-weight: 900 !important;
    text-shadow: 0 0 15px rgba(0, 212, 255, 0.5);
    margin-bottom: 20px !important;
}

/* 4. Bouton "Ajouter au Panier" Racing */
.single-product .cart .button {
    background: #00d4ff !important;
    color: #000 !important;
    border-radius: 50px !important;
    padding: 20px 40px !important;
    font-size: 1.2rem !important;
    font-weight: 900 !important;
    text-transform: uppercase;
    transition: 0.4s;
    border: none !important;
    box-shadow: 0 0 20px #00d4ff;
    cursor: pointer;
}

.single-product .cart .button:hover {
    background: #fff !important;
    box-shadow: 0 0 40px #fff;
    transform: scale(1.05);
}

/* 5. Quantité (Le petit sélecteur) */
.single-product .quantity input {
    background: rgba(255,255,255,0.1) !important;
    border: 1px solid #00d4ff !important;
    color: #fff !important;
    border-radius: 10px !important;
    padding: 10px !important;
}

/* 6. Onglets Techniques (Description, Avis) en bas */
.woocommerce-tabs {
    width: 100% !important;
    margin-top: 50px !important;
}

.woocommerce-tabs ul.tabs {
    background: transparent !important;
    border-bottom: 2px solid #00d4ff !important;
}

.woocommerce-tabs ul.tabs li a {
    color: #fff !important;
    text-transform: uppercase;
    font-weight: 700;
}

.woocommerce-tabs .panel {
    color: #ccc !important;
    padding: 30px 0 !important;
    line-height: 1.8;
}
/* --- HUSKY : FILTRE COCKPIT --- */

/* Le conteneur du filtre */
.woof_sideward_container {
    background: rgba(0, 0, 0, 0.6) !important;
    border: 1px solid #00d4ff !important;
    border-radius: 30px !important;
    padding: 20px !important;
    backdrop-filter: blur(10px);
}

/* Les titres des filtres (Marque, Modèle...) */
.woof_container h4 {
    color: #00d4ff !important;
    text-transform: uppercase;
    font-size: 0.9rem !important;
    letter-spacing: 2px;
    border-bottom: 1px solid rgba(0, 212, 255, 0.2);
    padding-bottom: 10px;
}

/* Les cases à cocher (Checkboxes) */
.woof_checkbox_term {
    color: #fff !important;
    font-weight: 500;
}

/* La barre de recherche Husky */
.woof_text_search_container input {
    background: rgba(255, 255, 255, 0.05) !important;
    border: 1px solid #00d4ff !important;
    border-radius: 50px !important;
    color: #fff !important;
    padding: 10px 20px !important;
}

/* Le bouton Reset (Réinitialiser) */
.woof_reset_button_2 {
    background: transparent !important;
    border: 1px solid #ff4b2b !important; /* Un rouge néon pour le reset */
    color: #ff4b2b !important;
    border-radius: 50px !important;
    text-transform: uppercase;
    font-size: 0.7rem !important;
}

/* --- PRODUITS APPARENTÉS EN BAS DE FICHE --- */
.single-product .related.products ul.products {
    display: grid !important;
    grid-template-columns: repeat(4, 1fr) !important;
    gap: 20px !important;
    margin-top: 40px !important;
}

.single-product .related.products ul.products li.product {
    background: rgba(255, 255, 255, 0.05) !important;
    border: 1px solid rgba(0, 212, 255, 0.3) !important;
    border-radius: 25px !important; /* Moitié moins que la grosse capsule */
    padding: 15px !important;
    backdrop-filter: blur(5px);
}

.single-product .related.products h2 {
    color: #fff !important;
    text-transform: uppercase;
    font-size: 1.2rem !important;
    margin-bottom: 20px !important;
    display: block !important; /* On le réaffiche ici si besoin */
}

/* --- PRODUITS SIMILAIRES (RELATED PRODUCTS) --- */

/* 1. On sort les produits similaires de la grosse capsule noire pour qu'ils respirent */
.single-product section.related.products {
    background: rgba(0, 0, 0, 0.4) !important;
    backdrop-filter: blur(10px);
    border: 1px solid rgba(0, 212, 255, 0.2);
    border-radius: 40px !important;
    padding: 30px !important;
    margin-top: 50px !important;
    width: 100% !important;
}

/* 2. Titre "Produits Similaires" en bleu néon discret */
.single-product .related h2 {
    color: #00d4ff !important;
    text-transform: uppercase !important;
    font-size: 1.2rem !important;
    letter-spacing: 3px;
    text-align: center;
    margin-bottom: 30px !important;
    display: block !important; /* On s'assure qu'il est visible */
}

/* 3. La Grille des cartes */
.single-product .related ul.products {
    display: flex !important;
    justify-content: center !important;
    gap: 20px !important;
    flex-wrap: wrap;
}

/* 4. La Carte Produit Individuelle (Plus petite et fine) */
.single-product .related ul.products li.product {
    background: rgba(255, 255, 255, 0.03) !important;
    border: 1px solid rgba(0, 212, 255, 0.15) !important;
    border-radius: 25px !important;
    width: 220px !important; /* Taille fixe pour éviter le désordre */
    padding: 15px !important;
    transition: 0.3s ease;
    text-align: center;
}

.single-product .related ul.products li.product:hover {
    border-color: #00d4ff !important;
    box-shadow: 0 0 15px rgba(0, 212, 255, 0.3);
    transform: translateY(-5px);
}

/* 5. Ajustement Image et Texte dans les cartes */
.single-product .related ul.products li.product img {
    max-width: 150px !important;
    margin: 0 auto !important;
    filter: drop-shadow(0 0 5px rgba(0,0,0,0.5));
}

.single-product .related ul.products li.product h2 {
    font-size: 0.9rem !important;
    color: #fff !important;
    margin: 10px 0 !important;
}

.single-product .related ul.products li.product .price {
    font-size: 1rem !important;
    color: #00d4ff !important;
}

/* 6. On cache le bouton "Ajouter au panier" trop gros ici */
.single-product .related ul.products li.product .button {
    display: none !important;
}

/* --- ALIGNEMENT QUANTITÉ + BOUTON AJOUTER --- */

/* 1. On crée un conteneur flexible pour la ligne d'achat */
.single-product div.product form.cart {
    display: flex !important;
    align-items: center !important;
    gap: 20px !important; /* Espace entre le sélecteur et le bouton */
    margin-top: 30px !important;
    flex-wrap: nowrap !important; /* Empêche le bouton de passer en dessous */
}

/* 2. On ajuste la boîte de quantité */
.single-product div.product form.cart .quantity {
    margin: 0 !important;
    flex-shrink: 0 !important;
}

.single-product div.product form.cart .quantity input {
    height: 60px !important; /* Même hauteur que le bouton */
    width: 70px !important;
    background: rgba(255, 255, 255, 0.05) !important;
    border: 1px solid #00d4ff !important;
    color: #fff !important;
    font-size: 1.2rem !important;
    border-radius: 15px !important;
    text-align: center;
}

/* 3. On ajuste le bouton Ajouter au Panier */
.single-product div.product form.cart .button {
    flex-grow: 1 !important; /* Le bouton prend toute la place restante */
    height: 60px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    margin: 0 !important;
    font-size: 1.1rem !important;
    letter-spacing: 1px;
    text-transform: uppercase;
    box-shadow: 0 0 20px rgba(0, 212, 255, 0.4) !important;
}

/* 4. Sur mobile, on les empile si l'écran est trop petit */
@media (max-width: 480px) {
    .single-product div.product form.cart {
        flex-direction: column !important;
        align-items: stretch !important;
    }
    .single-product div.product form.cart .quantity input {
        width: 100% !important;
    }
}

/* --- SECTION AVIS (REVIEWS) STYLE NORDIK --- */

/* 1. Le formulaire d'écriture (Transparent) */
#reviews #commentform {
    background: rgba(255, 255, 255, 0.03) !important;
    border: 1px solid rgba(0, 212, 255, 0.3) !important;
    padding: 30px !important;
    border-radius: 30px !important;
    backdrop-filter: blur(10px);
}

/* 2. Les champs de saisie (Texte, Nom, Email) */
#reviews input[type="text"], 
#reviews input[type="email"], 
#reviews textarea {
    background: rgba(0, 0, 0, 0.5) !important; /* Fond sombre transparent */
    border: 1px solid #00d4ff !important;
    color: #00d4ff !important; /* Écriture Bleu Néon */
    border-radius: 15px !important;
    padding: 15px !important;
    font-family: 'Orbitron', sans-serif, Arial; /* Si tu as une police futuriste */
    outline: none !important;
}

/* Effet quand on clique dans un champ */
#reviews textarea:focus, #reviews input:focus {
    box-shadow: 0 0 15px rgba(0, 212, 255, 0.6) !important;
    background: rgba(0, 0, 0, 0.8) !important;
}

/* 3. Les Étoiles (Style Néon) */
#reviews .stars a {
    color: rgba(0, 212, 255, 0.3) !important; /* Étoiles vides bleutées sombres */
}

#reviews .stars a::before {
    color: #00d4ff !important; /* Étoiles pleines Bleu Néon */
    text-shadow: 0 0 10px #00d4ff;
}

/* 4. Le Bouton Soumettre (Bleu Néon) */
#reviews #submit {
    background: #00d4ff !important;
    color: #000 !important;
    border: none !important;
    border-radius: 50px !important;
    padding: 15px 40px !important;
    font-weight: 900 !important;
    text-transform: uppercase !important;
    letter-spacing: 2px !important;
    cursor: pointer !important;
    box-shadow: 0 0 20px #00d4ff !important;
    transition: 0.4s ease !important;
}

#reviews #submit:hover {
    background: #fff !important;
    box-shadow: 0 0 40px #fff !important;
    transform: scale(1.05);
}

/* 5. Les textes d'étiquettes (Labels) */
#reviews label {
    color: #fff !important;
    text-transform: uppercase;
    font-size: 0.8rem;
    letter-spacing: 1px;
    margin-bottom: 8px;
    display: block;
}
/* --- STYLE DES ONGLETS (DESCRIPTION / AVIS) --- */

/* 1. Le conteneur des onglets */
.woocommerce-tabs ul.tabs {
    display: flex !important;
    justify-content: center !important;
    border-bottom: 2px solid rgba(0, 212, 255, 0.2) !important;
    background: transparent !important;
    padding: 0 !important;
    margin-bottom: 30px !important;
}

/* 2. L'onglet individuel */
.woocommerce-tabs ul.tabs li {
    background: rgba(0, 0, 0, 0.5) !important;
    border: 1px solid rgba(0, 212, 255, 0.3) !important;
    border-bottom: none !important;
    border-radius: 15px 15px 0 0 !important; /* Arrondi seulement en haut */
    margin: 0 5px !important;
    padding: 0 !important;
    transition: 0.3s ease;
}

/* 3. Le texte à l'intérieur de l'onglet (Ton code <a>) */
.woocommerce-tabs ul.tabs li a {
    color: rgba(255, 255, 255, 0.6) !important;
    text-transform: uppercase !important;
    font-weight: 800 !important;
    padding: 15px 25px !important;
    display: block !important;
    text-decoration: none !important;
    letter-spacing: 1px;
}

/* 4. L'onglet ACTIF (celui sur lequel on est) */
.woocommerce-tabs ul.tabs li.active {
    background: rgba(0, 212, 255, 0.1) !important;
    border-color: #00d4ff !important;
    box-shadow: 0 -5px 15px rgba(0, 212, 255, 0.2);
}

.woocommerce-tabs ul.tabs li.active a {
    color: #00d4ff !important;
    text-shadow: 0 0 10px #00d4ff;
}

/* Effet au survol */
.woocommerce-tabs ul.tabs li:hover {
    border-color: #00d4ff !important;
}

/* --- BARRE D'ONGLETS NORDIK --- */

/* 1. Conteneur des boutons d'onglets */
.woocommerce-tabs ul.tabs {
    display: flex !important;
    justify-content: center !important;
    gap: 15px !important;
    background: transparent !important;
    border-bottom: 2px solid rgba(0, 212, 255, 0.2) !important;
    padding: 0 0 20px 0 !important;
    margin-bottom: 40px !important;
    list-style: none !important;
}

/* 2. Le bouton individuel (Désactivé) */
.woocommerce-tabs ul.tabs li {
    background: rgba(0, 0, 0, 0.4) !important;
    border: 1px solid rgba(0, 212, 255, 0.3) !important;
    border-radius: 15px !important;
    padding: 0 !important;
    transition: 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275) !important;
}

.woocommerce-tabs ul.tabs li a {
    color: rgba(255, 255, 255, 0.5) !important;
    text-transform: uppercase !important;
    font-weight: 800 !important;
    padding: 12px 25px !important;
    display: block !important;
    text-decoration: none !important;
    font-size: 0.85rem !important;
    letter-spacing: 2px !important;
}

/* 3. L'onglet ACTIF (Mode sélectionné) */
.woocommerce-tabs ul.tabs li.active {
    background: rgba(0, 212, 255, 0.15) !important;
    border-color: #00d4ff !important;
    box-shadow: 0 0 15px rgba(0, 212, 255, 0.4), inset 0 0 10px rgba(0, 212, 255, 0.1) !important;
}

.woocommerce-tabs ul.tabs li.active a {
    color: #00d4ff !important;
    text-shadow: 0 0 12px #00d4ff;
}

/* Effet Hover */
.woocommerce-tabs ul.tabs li:hover {
    border-color: #fff !important;
    transform: translateY(-3px);
}

/* 4. Zone de contenu (Ce qui s'affiche sous les onglets) */
.woocommerce-tabs .panel {
    background: transparent !important;
    color: #fff !important;
    padding: 20px 0 !important;
    border: none !important;
    animation: fadeIn 0.5s ease;
}

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

/* --- FIX : ONGLETS QUI NE SONT PLUS CACHÉS --- */

.woocommerce-tabs ul.tabs {
    border-bottom: 2px solid rgba(0, 212, 255, 0.3) !important;
    overflow: visible !important; /* Permet au bouton de dépasser si besoin */
    z-index: 2 !important;
    position: relative !important;
}

.woocommerce-tabs ul.tabs li {
    position: relative !important;
    margin-bottom: -2px !important; /* Colle l'onglet à la bordure du bas */
    z-index: 1 !important;
}

/* L'onglet actif passe AU-DESSUS du contenu */
.woocommerce-tabs ul.tabs li.active {
    z-index: 5 !important; 
    border-bottom: 2px solid #00d4ff !important; /* On remet la bordure propre */
    background: rgba(0, 212, 255, 0.2) !important;
}

/* Le panneau de contenu en dessous */
.woocommerce-tabs .panel {
    position: relative !important;
    z-index: 1 !important;
    border-top: none !important; /* Supprime la ligne qui coupe le bouton */
    padding-top: 30px !important;
    margin-top: -2px !important; /* Assure la jonction parfaite */
}
.woocommerce-tabs ul.tabs li.active a {
    text-shadow: 0 0 15px #00d4ff, 0 0 5px #fff !important;
}

/* --- ICÔNE PANIER FLOTTANTE --- */

.nordik-cart-icon {
    position: fixed !important;
    top: 30px !important;
    right: 30px !important;
    z-index: 10000 !important;
    background: rgba(0, 0, 0, 0.8) !important;
    border: 2px solid #00d4ff !important;
    border-radius: 50% !important;
    width: 60px !important;
    height: 60px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    box-shadow: 0 0 20px rgba(0, 212, 255, 0.4) !important;
    backdrop-filter: blur(10px);
    transition: 0.3s ease;
}

.nordik-cart-icon:hover {
    transform: scale(1.1) rotate(5deg);
    box-shadow: 0 0 30px #00d4ff !important;
}

.nordik-cart-icon a {
    text-decoration: none !important;
    font-size: 24px !important;
    position: relative;
}

/* Le petit chiffre (Compteur) */
.cart-contents-count {
    position: absolute !important;
    top: -10px !important;
    right: -10px !important;
    background: #00d4ff !important;
    color: #000 !important;
    font-size: 12px !important;
    font-weight: 900 !important;
    width: 22px !important;
    height: 22px !important;
    border-radius: 50% !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    border: 2px solid #000 !important;
}

/* Pour cacher le point du menu si c'est une liste */
.nordik-cart-icon {
    list-style: none !important;
}
/* --- LE PANIER FLOTTANT (FIXÉ EN HAUT) --- */

.nordik-cart-container {
    position: fixed !important;
    top: 40px !important;
    right: 40px !important;
    z-index: 999999 !important; /* Pour passer au-dessus de tout */
}

.cart-icon-wrapper {
    width: 65px;
    height: 65px;
    background: rgba(0, 0, 0, 0.8) !important;
    border: 2px solid #00d4ff !important;
    border-radius: 50% !important;
    display: flex;
    align-items: center;
    justify-content: center;
    backdrop-filter: blur(15px);
    box-shadow: 0 0 25px rgba(0, 212, 255, 0.4);
    transition: all 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275);
    position: relative;
}

/* L'icône Chariot */
.cart-icon-wrapper .dashicons {
    color: #00d4ff !important;
    font-size: 28px !important;
    width: 28px !important;
    height: 28px !important;
    text-shadow: 0 0 10px #00d4ff;
}

/* Le Compteur de produits (Petit cercle rouge néon) */
.cart-contents-count {
    position: absolute;
    top: -5px;
    right: -5px;
    background: #ff4b2b !important; /* Rouge Racing */
    color: #fff !important;
    font-size: 11px !important;
    font-weight: 900 !important;
    width: 24px;
    height: 24px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    border: 2px solid #000;
    box-shadow: 0 0 10px #ff4b2b;
}

/* Effet au survol */
.cart-icon-wrapper:hover {
    transform: scale(1.1) rotate(-5deg);
    border-color: #fff !important;
    box-shadow: 0 0 40px rgba(255, 255, 255, 0.6);
}

.cart-icon-wrapper:hover .dashicons {
    color: #fff !important;
}

/* Sur Mobile : On le réduit un peu */
@media (max-width: 600px) {
    .nordik-cart-container {
        top: 20px !important;
        right: 20px !important;
    }
    .cart-icon-wrapper {
        width: 50px;
        height: 50px;
    }
}
/* --- NETTOYAGE DU RECTANGLE NOIR PANIER --- */

/* 1. On rend le conteneur principal transparent et flouté */
.woocommerce-cart .entry-content, 
.woocommerce-cart .woocommerce,
.woocommerce-cart article {
    background: transparent !important;
    border: none !important;
    box-shadow: none !important;
}

/* 2. On crée la "Grosse Capsule" Nordik autour du tableau */
.woocommerce-cart-form {
    background: rgba(0, 0, 0, 0.6) !important; /* Verre fumé */
    backdrop-filter: blur(15px) !important;
    border: 2px solid #00d4ff !important;
    border-radius: 50px !important; /* Ta signature 50px */
    padding: 40px !important;
    box-shadow: 0 0 40px rgba(0, 212, 255, 0.2) !important;
    margin-top: 30px !important;
}

/* 3. On nettoie l'intérieur du tableau (les lignes) */
.shop_table.cart {
    border-collapse: separate !important;
    border-spacing: 0 15px !important; /* Espace entre les produits */
    background: transparent !important;
    border: none !important;
}

.shop_table.cart thead {
    display: none !important; /* On cache l'entête souvent trop lourde */
}

.cart_item {
    background: rgba(255, 255, 255, 0.03) !important;
    border: 1px solid rgba(0, 212, 255, 0.1) !important;
    transition: 0.3s;
}

.cart_item:hover {
    border-color: #00d4ff !important;
    background: rgba(0, 212, 255, 0.05) !important;
}

.cart_item td {
    border: none !important;
    padding: 20px !important;
    border-radius: 20px !important;
}
/* --- DESTRUCTION RADICALE DES FONDS NOIRS --- */

/* On force TOUT le contenu de la page panier à perdre son fond noir */
.woocommerce-cart #page, 
.woocommerce-cart #content, 
.woocommerce-cart #primary, 
.woocommerce-cart #main,
.woocommerce-cart article,
.woocommerce-cart section,
.woocommerce-cart .entry-content,
.woocommerce-cart .elementor-section,
.woocommerce-cart .elementor-container,
.woocommerce-cart .elementor-column-wrap,
.woocommerce-cart .elementor-widget-container {
    background-color: transparent !important;
    background: none !important;
    border: none !important;
    box-shadow: none !important;
}

/* On s'assure que le body laisse voir ton mur de métal */
body.woocommerce-cart {
    background-color: transparent !important;
}

/* --- ON RE-DESSINE TA CAPSULE UNIQUE --- */
.woocommerce-cart .woocommerce {
    background: rgba(0, 0, 0, 0.8) !important; /* Le seul bloc sombre autorisé */
    backdrop-filter: blur(15px) !important;
    border: 2px solid #00d4ff !important;
    border-radius: 50px !important;
    padding: 50px !important;
    max-width: 1100px !important;
    margin: 50px auto !important;
    box-shadow: 0 0 40px rgba(0, 212, 255, 0.4) !important;
    display: block !important;
}

/* On force les textes en blanc pour qu'ils ne disparaissent pas */
.woocommerce-cart .woocommerce table.cart td, 
.woocommerce-cart .woocommerce table.cart th,
.woocommerce-cart .cart-subtotal th,
.woocommerce-cart .order-total th {
    color: #ffffff !important;
}
/* --- NETTOYAGE DU BLOC NOIR INFÉRIEUR --- */

/* 1. On force le site entier à ne pas avoir de fond noir sous le contenu */
#page, #content, .site-content, footer, .elementor-location-footer {
    background-color: transparent !important;
    background: transparent !important;
}

/* 2. On s'assure que la zone du panier est assez grande pour masquer le vide */
.woocommerce-cart .entry-content, 
.woocommerce-cart .woocommerce {
    min-height: 80vh !important; /* Force la page à occuper 80% de l'écran */
    background: transparent !important;
}

/* 3. On applique la capsule à la zone de la table pour qu'elle flotte sur le métal */
.woocommerce-cart-form {
    background: rgba(0, 0, 0, 0.7) !important;
    backdrop-filter: blur(15px);
    border: 2px solid #00d4ff !important;
    border-radius: 50px !important;
    padding: 30px !important;
    box-shadow: 0 0 30px rgba(0, 212, 255, 0.2);
    margin-bottom: 50px !important;
}

/* --- BOUTON VALIDER STYLE NÉON --- */
.checkout-button {
    background: #00d4ff !important;
    color: #000 !important;
    font-weight: 900 !important;
    text-transform: uppercase !important;
    border-radius: 50px !important;
    box-shadow: 0 0 20px #00d4ff !important;
    padding: 20px !important;
    transition: 0.3s !important;
}

.checkout-button:hover {
    background: #fff !important;
    box-shadow: 0 0 40px #fff !important;
    transform: scale(1.02);
}

/* --- FORCE LE MÉTAL JUSQU'EN BAS --- */

/* 1. On s'assure que le HTML et le BODY prennent toute la hauteur */
html, body {
    height: 100% !important;
    margin: 0 !important;
    padding: 0 !important;
    background-color: transparent !important;
}

/* 2. On cible le conteneur de ton thème qui est noir (le coupable) */
#page, #content, .site-content, .elementor-location-footer, footer {
    background: transparent !important;
    background-color: transparent !important;
    border: none !important;
}

/* 3. On force la zone de contenu à pousser le footer vers le bas */
.woocommerce-cart #primary {
    min-height: 100vh !important; /* 100% de la hauteur de l'écran */
    display: flex !important;
    flex-direction: column !important;
}

/* 4. On s'assure que ton image de fond métal couvre TOUT */
body {
    background-image: url('URL_DE_TON_IMAGE_METAL') !important; /* Remplace par le lien de ton image si besoin */
    background-attachment: fixed !important;
    background-size: cover !important;
    background-position: center !important;
}

.woocommerce-cart .woocommerce {
    max-width: 1200px !important;
    margin-left: auto !important;
    margin-right: auto !important;
    padding-left: 50px !important;
    padding-right: 50px !important;
}

/* --- AÉRATION DU PANIER (MARGIN & PADDING) --- */

/* 1. On descend la capsule entière du haut de l'écran */
.woocommerce-cart .woocommerce {
    margin-top: 100px !important; /* L'espace entre le haut et ton panier */
    margin-bottom: 100px !important; /* L'espace en bas pour pas toucher le bord */
    padding: 60px !important; /* Espace interne pour que le texte ne colle pas aux bords bleus */
    background: rgba(0, 0, 0, 0.75) !important;
    backdrop-filter: blur(20px) !important;
    border: 2px solid #00d4ff !important;
    border-radius: 50px !important;
    box-shadow: 0 0 50px rgba(0, 212, 255, 0.3) !important;
}

/* 2. On stylise le titre "Panier" pour qu'il claque */
.woocommerce-cart h1.entry-title, 
.woocommerce-cart h2 {
    color: #fff !important;
    text-transform: uppercase !important;
    font-size: 2.5rem !important;
    letter-spacing: 5px !important;
    margin-bottom: 40px !important;
    text-align: left;
    border-left: 5px solid #00d4ff; /* Petite barre néon à gauche du titre */
    padding-left: 20px;
}

/* 3. On espace les lignes de produits (vu sur ta photo, c'est serré) */
.shop_table.cart td {
    padding: 30px 10px !important;
}

.woocommerce-cart .woocommerce::before {
    content: "STEP 01: RÉCAPITULATIF TECHNIQUE";
    display: block;
    color: #00d4ff;
    font-size: 0.7rem;
    letter-spacing: 3px;
    margin-bottom: 10px;
    opacity: 0.6;
}
/* --- LE CODE QUI NE PEUT PAS ÉCHOUER --- */

/* 1. On crée la capsule autour du contenu (Verre + Bordure Bleue) */
body.woocommerce-cart .woocommerce {
    background: rgba(0, 0, 0, 0.7) !important;
    backdrop-filter: blur(15px) !important;
    border: 3px solid #00d4ff !important; /* Bordure bien épaisse */
    border-radius: 40px !important;
    padding: 50px !important;
    margin: 100px auto !important; /* Pour le décoller du haut */
    max-width: 1200px !important;
    box-shadow: 0 0 40px rgba(0, 212, 255, 0.4) !important;
}

/* 2. On transforme le bouton GRIS en bouton NÉON */
body.woocommerce-cart .checkout-button, 
body.woocommerce-cart button[name="update_cart"],
body.woocommerce-cart .wc-proceed-to-checkout a {
    background-color: #00d4ff !important;
    color: #000 !important;
    font-weight: 900 !important;
    text-transform: uppercase !important;
    border-radius: 50px !important;
    box-shadow: 0 0 20px #00d4ff !important;
    padding: 20px !important;
    border: none !important;
}

/* 3. On blanchit tous les textes pour qu'ils soient lisibles */
body.woocommerce-cart .woocommerce table.cart td, 
body.woocommerce-cart .woocommerce table.cart th,
body.woocommerce-cart .cart_totals h2,
body.woocommerce-cart .cart-subtotal th,
body.woocommerce-cart .order-total th,
body.woocommerce-cart .order-total .amount {
    color: #ffffff !important;
}

/* 4. On espace le titre "PANIER" (en haut à gauche sur ta photo) */
body.woocommerce-cart h1.entry-title {
    margin-top: 50px !important;
    padding-left: 20px !important;
    border-left: 5px solid #00d4ff !important;
}

/* --- LE PANIER (VERSION BLOCS WOOCOMMERCE) --- */

/* 1. La Capsule Globale */
.wp-block-woocommerce-cart, 
.wc-block-cart {
    background: rgba(0, 0, 0, 0.8) !important;
    backdrop-filter: blur(20px) !important;
    border: 3px solid #00d4ff !important;
    border-radius: 40px !important;
    padding: 50px !important;
    margin-top: 100px !important;
    margin-bottom: 100px !important;
    box-shadow: 0 0 50px rgba(0, 212, 255, 0.4) !important;
}

/* 2. LE BOUTON (Celui de ton code HTML) */
.wc-block-cart__submit-button, 
.wc-block-components-button.wp-element-button {
    background-color: #00d4ff !important; /* BLEU NÉON */
    background: #00d4ff !important;
    color: #000000 !important;
    border-radius: 50px !important;
    padding: 25px !important;
    font-weight: 900 !important;
    text-transform: uppercase !important;
    box-shadow: 0 0 25px #00d4ff !important;
    border: none !important;
    width: 100% !important;
    transition: 0.3s !important;
}

.wc-block-cart__submit-button:hover {
    background-color: #ffffff !important;
    box-shadow: 0 0 45px #ffffff !important;
    color: #000 !important;
}

/* 3. Les Textes et Titres à l'intérieur du bloc */
.wc-block-cart__title, 
.wc-block-components-totals-item__label,
.wc-block-components-totals-item__value,
.wc-block-cart-items__header-price {
    color: #ffffff !important;
}

/* 4. Le Total Estimé (Bleu Néon) */
.wc-block-components-totals-footer-item .wc-block-components-totals-item__value {
    color: #00d4ff !important;
    font-size: 1.8rem !important;
    font-weight: 900 !important;
}
.wc-block-cart__title {
    margin-top: 20px !important;
    text-transform: uppercase;
    letter-spacing: 3px;
}

/* --- LE TITRE "PANIER" (LE MOT EN HAUT) --- */

/* On cible le titre H1 de la page panier */
.woocommerce-cart h1.wp-block-post-title,
.woocommerce-cart .entry-title,
.woocommerce-cart h1 {
    color: #ffffff !important; /* Blanc pur */
    text-transform: uppercase !important; /* Majuscules */
    font-size: 3rem !important; /* Bien massif */
    font-weight: 900 !important;
    letter-spacing: 5px !important;
    margin-top: 100px !important; /* ON LE DESCEND ENFIN */
    margin-bottom: 40px !important;
    padding-left: 20px !important;
    border-left: 6px solid #00d4ff !important; /* La petite barre néon à gauche */
    text-shadow: 0 0 15px rgba(255, 255, 255, 0.3) !important;
}

/* Si ton titre est un "Bloc Titre" de Gutenberg */
.wp-block-post-title {
    margin-top: 100px !important;
    text-align: left !important;
}

.wc-block-components-totals-coupon-link,
.wc-block-cart__submit-button__text {
    color: #00d4ff !important;
    font-weight: 700 !important;
    text-transform: uppercase;
}
/* --- SUPPRESSION DÉFINITIVE DU TITRE PANIER --- */

.woocommerce-cart h1.entry-title, 
.woocommerce-cart .entry-title {
    display: none !important;
    visibility: hidden !important;
    height: 0 !important;
    margin: 0 !important;
    padding: 0 !important;
}

.woocommerce-cart .woocommerce, 
.woocommerce-cart .wp-block-woocommerce-cart {
    margin-top: 100px !important; /* Ajuste ce chiffre pour régler la hauteur de ta capsule */
}
/* --- MASQUER L'ICÔNE PANIER (ACCUEIL + PAGE PANIER) --- */

/* On cible l'accueil (.home) ET la page panier (.woocommerce-cart) */
.home .nordik-cart-container, 
.home .nordik-cart-icon,
.woocommerce-cart .nordik-cart-container,
.woocommerce-cart .nordik-cart-icon,
.woocommerce-cart .cart-custom-location {
    display: none !important;
    visibility: hidden !important;
    pointer-events: none !important;
}
/* --- HARMONISATION CODE PROMO (STYLE AVIS) --- */

/* 1. Le bouton cliquable "Ajouter des codes promo" */
.wc-block-components-totals-coupon-link {
    background: rgba(255, 255, 255, 0.05) !important; /* Fond très léger style verre */
    border: 1px solid rgba(0, 212, 255, 0.3) !important; /* Bordure fine bleue */
    border-radius: 12px !important;
    padding: 15px 20px !important;
    color: #00d4ff !important; /* Texte bleu néon */
    text-transform: uppercase !important;
    font-size: 0.9rem !important;
    font-weight: 700 !important;
    display: inline-block !important;
    transition: 0.3s !important;
    margin-bottom: 15px !important;
}

.wc-block-components-totals-coupon-link:hover {
    background: rgba(0, 212, 255, 0.1) !important;
    box-shadow: 0 0 15px rgba(0, 212, 255, 0.2) !important;
}

/* 2. Le champ de saisie quand on clique dessus (Input) */
.wc-block-components-totals-coupon .wc-block-components-text-input input {
    background: rgba(0, 0, 0, 0.5) !important;
    border: 1px solid #00d4ff !important;
    border-radius: 8px !important;
    color: #ffffff !important;
    padding: 12px !important;
}

/* 3. Le bouton "Appliquer" à côté du code */
.wc-block-components-totals-coupon__button {
    background: #00d4ff !important;
    color: #000 !important;
    font-weight: 900 !important;
    border-radius: 8px !important;
    text-transform: uppercase !important;
}
.wc-block-components-totals-footer-item {
    margin-bottom: 30px !important;
}

/* --- PAGE VALIDATION DE COMMANDE (STYLE NORDIK) --- */

/* 1. On crée la grande capsule (comme sur le panier) */
.wp-block-woocommerce-checkout, 
.wc-block-checkout {
    background: rgba(0, 0, 0, 0.8) !important;
    backdrop-filter: blur(20px) !important;
    border: 3px solid #00d4ff !important;
    border-radius: 40px !important;
    padding: 50px !important;
    margin: 80px auto !important;
    max-width: 1200px !important;
    box-shadow: 0 0 50px rgba(0, 212, 255, 0.4) !important;
}

/* 2. On stylise les champs de saisie (Inputs) pour qu'ils ne soient pas blancs */
.wc-block-components-text-input input, 
.wc-block-components-combobox input,
.wc-block-checkout__form input {
    background-color: rgba(255, 255, 255, 0.05) !important;
    border: 1px solid rgba(0, 212, 255, 0.3) !important;
    border-radius: 10px !important;
    color: #ffffff !important;
    padding: 15px !important;
}

/* Focus sur les champs : ils s'allument en bleu quand on clique */
.wc-block-components-text-input input:focus {
    border-color: #00d4ff !important;
    box-shadow: 0 0 10px rgba(0, 212, 255, 0.5) !important;
    outline: none !important;
}

/* 3. On blanchit tous les titres (Coordonnées, Adresse, etc.) */
.wc-block-checkout__form h2, 
.wc-block-checkout__form h3,
.wc-block-components-checkout-step__title,
.wc-block-components-title,
.wc-block-checkout__form label {
    color: #ffffff !important;
    text-transform: uppercase !important;
    letter-spacing: 2px !important;
}

/* 4. On masque l'icône panier et le titre rebelle ici aussi */
.woocommerce-checkout .nordik-cart-container,
.woocommerce-checkout .nordik-cart-icon,
.woocommerce-checkout h1.entry-title {
    display: none !important;
}

/* 5. Le Résumé de la commande (à droite sur ta photo) */
.wc-block-checkout__sidebar, 
.wc-block-components-order-summary {
    background: rgba(255, 255, 255, 0.03) !important;
    border-radius: 20px !important;
    border: 1px solid rgba(0, 212, 255, 0.2) !important;
    padding: 20px !important;
}
.wc-block-components-notice-banner.is-error {
    background-color: rgba(255, 0, 0, 0.2) !important;
    border: 1px solid #ff4d4d !important;
    color: #ffffff !important;
    border-radius: 10px !important;
}
/* --- NETTOYAGE RADICAL DES CHAMPS (VERSION FINALE) --- */

/* 1. ON SUPPRIME LES ÉTIQUETTES QUI CHEVAUCHENT (ADRESSE, NOM, PRÉNOM) */
.wc-block-components-text-input__label, 
.wc-block-components-combobox__label,
.wc-block-components-text-input label {
    display: none !important;
    visibility: hidden !important;
    opacity: 0 !important;
}

/* 2. ON CADRE LES CASES (HORS TOUT) */
.wc-block-components-text-input, 
.wc-block-components-combobox,
.wc-block-checkout__form input {
    margin-top: 15px !important;
    margin-bottom: 15px !important;
    height: 65px !important; /* Hauteur fixe pour éviter les débordements */
    background: transparent !important;
}

/* 3. LE STYLE DES CHAMPS (INTERIEUR) */
.wc-block-components-text-input input, 
.wc-block-components-combobox input,
.wc-block-checkout__form .input-text {
    background-color: rgba(0, 0, 0, 0.7) !important;
    border: 2px solid #00d4ff !important;
    border-radius: 10px !important;
    color: #ffffff !important;
    padding: 0 20px !important; 
    height: 60px !important;
    line-height: 60px !important;
    font-size: 1rem !important;
    width: 100% !important;
}

/* 4. FIX POUR LE TEXTE DE LA NEWSLETTER (QUI DÉPASSE) */
.wc-block-checkout__form .wc-block-components-checkbox {
    margin: 20px 0 !important;
    display: flex !important;
    align-items: center !important;
}

.wc-block-checkout__form .wc-block-components-checkbox__label {
    font-size: 12px !important; /* On réduit pour que ça tienne */
    line-height: 1.4 !important;
    color: #ffffff !important;
    text-transform: uppercase !important;
    letter-spacing: 1px !important;
    padding-left: 15px !important;
}

/* 5. FIX POUR LA CASE À COCHER ELLE-MÊME */
.wc-block-components-checkbox__input {
    border: 2px solid #00d4ff !important;
    background: transparent !important;
    width: 25px !important;
    height: 25px !important;
}
/* --- FORCAGE BRUT DES INTITULÉS (STYLE NORDIK) --- */

/* 1. ON FORCE L'AFFICHAGE DU TITRE (PRÉNOM, NOM...) */
.wc-block-components-text-input label,
.wc-block-components-text-input__label,
.wc-block-components-combobox__label,
.wc-block-checkout__form label {
    display: block !important;
    visibility: visible !important;
    opacity: 1 !important;
    position: static !important; /* On casse le flottement interne */
    transform: none !important;    /* On annule l'animation */
    color: #00d4ff !important;    /* Bleu Néon */
    font-size: 14px !important;
    font-weight: 800 !important;
    text-transform: uppercase !important;
    margin-bottom: 10px !important; /* L'espace crucial sous le titre */
    padding: 0 !important;
    width: auto !important;
}

/* 2. ON NETTOIE LE CONTENEUR QUI BLOQUE TOUT */
.wc-block-components-text-input, 
.wc-block-components-combobox,
.wc-block-checkout__form .form-row {
    display: flex !important;
    flex-direction: column !important; /* Aligne Titre en haut, Case en bas */
    height: auto !important;
    margin-top: 25px !important;
    margin-bottom: 15px !important;
    padding: 0 !important;
}

/* 3. ON AJUSTE LA CASE BLEUE */
.wc-block-components-text-input input, 
.wc-block-components-combobox input,
.wc-block-checkout__form input.input-text {
    background-color: rgba(0, 0, 0, 0.7) !important;
    border: 2px solid #00d4ff !important;
    border-radius: 10px !important;
    color: #ffffff !important;
    height: 55px !important;
    padding: 0 15px !important;
    position: relative !important;
    order: 2 !important; /* Force la case à passer après le titre */
}
/* --- SÉLECTEUR DE PAYS : CIBLAGE ABSOLU --- */

/* 1. On vide le fond blanc de TOUS les éléments internes du sélecteur */
.wc-block-components-combobox,
.wc-block-components-combobox__control,
.wc-block-components-combobox__input,
.wc-block-components-combobox__input-value,
.wc-block-components-combobox [class*="control"],
.wc-block-components-combobox [class*="Placeholder"],
.wc-block-components-combobox [class*="singleValue"],
.wc-block-components-combobox [class*="container"] {
    background-color: #000000 !important; /* Force le NOIR */
    background: #000000 !important;
    border-color: #00d4ff !important;
    color: #00d4ff !important;
    -webkit-text-fill-color: #00d4ff !important;
}

/* 2. On s'assure que la bordure bleue est bien visible */
.wc-block-components-combobox__control {
    border: 2px solid #00d4ff !important;
    border-radius: 10px !important;
    height: 55px !important;
}

/* 3. On force le texte à l'intérieur à être BLEU (même quand on tape) */
.wc-block-components-combobox input[type="text"] {
    color: #00d4ff !important;
    -webkit-text-fill-color: #00d4ff !important;
    background-color: transparent !important;
}

/* 4. Le menu qui s'ouvre quand on clique (la liste des pays) */
.wc-block-components-combobox__menu,
.wc-block-components-combobox [class*="menu"] {
    background-color: #000000 !important;
    border: 1px solid #00d4ff !important;
    z-index: 9999 !important;
}

/* 5. Les lignes de pays dans la liste */
.wc-block-components-combobox__option,
.wc-block-components-combobox [class*="option"] {
    background-color: #000000 !important;
    color: #ffffff !important;
}

/* 6. La flèche de droite */
.wc-block-components-combobox__input-suffix svg {
    fill: #00d4ff !important;
}

/* --- STYLE DES CASES À COCHER (CHECKBOXES) NORDIK --- */

/* 1. On stylise le conteneur pour aligner proprement le texte */
.wc-block-components-checkbox {
    margin-bottom: 20px !important;
    display: flex !important;
    align-items: center !important;
}

/* 2. On transforme le carré de sélection (l'input) */
.wc-block-components-checkbox input[type="checkbox"],
.wc-block-checkout__form input[type="checkbox"] {
    appearance: none !important; /* On supprime le style moche par défaut */
    -webkit-appearance: none !important;
    width: 24px !important;
    height: 24px !important;
    background-color: rgba(0, 0, 0, 0.7) !important; /* Fond noir */
    border: 2px solid #00d4ff !important; /* Bordure bleue néon */
    border-radius: 6px !important;
    cursor: pointer !important;
    position: relative !important;
    margin-right: 15px !important;
    flex-shrink: 0 !important; /* Empêche la case de s'écraser */
}

/* 3. L'aspect quand la case est COCHÉE (Le "V" ou le remplissage) */
.wc-block-components-checkbox input[type="checkbox"]:checked,
.wc-block-checkout__form input[type="checkbox"]:checked {
    background-color: #00d4ff !important; /* Le fond devient bleu plein */
    box-shadow: 0 0 10px rgba(0, 212, 255, 0.6) !important; /* Petit halo néon */
}

/* Ajout d'une petite coche blanche/noire quand c'est coché */
.wc-block-components-checkbox input[type="checkbox"]:checked::after {
    content: '✔' !important;
    position: absolute !important;
    top: 50% !important;
    left: 50% !important;
    transform: translate(-50%, -50%) !important;
    color: #000 !important; /* Coche noire sur fond bleu */
    font-size: 14px !important;
}

/* 4. Le texte à côté (Newsletter / Ajouter une note) */
.wc-block-components-checkbox__label,
.wc-block-checkout__form label[for*="checkbox"] {
    color: #ffffff !important;
    font-size: 0.85rem !important;
    text-transform: uppercase !important;
    letter-spacing: 1px !important;
    line-height: 1.4 !important;
    cursor: pointer !important;
}

/* 5. Cas spécial : Le champ "Note de commande" (Textarea) */
.wc-block-checkout__add-note textarea {
    background-color: rgba(0, 0, 0, 0.7) !important;
    border: 2px solid #00d4ff !important;
    border-radius: 10px !important;
    color: #ffffff !important;
    padding: 15px !important;
    margin-top: 10px !important;
}

/* --- VERSION AGRANDIE DU MENU --- */

.nk-link {
    width: 52px !important;   /* Augmenté de 44px à 52px */
    height: 52px !important;  /* Augmenté de 44px à 52px */
    background-color: #000000 !important;
    border: 2px solid #00d4ff !important; /* Bordure un peu plus épaisse */
    border-radius: 8px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    text-decoration: none !important;
    box-shadow: 0 0 15px rgba(0, 212, 255, 0.5) !important;
    transition: all 0.3s ease-in-out !important;
}

/* On agrandit l'icône à l'intérieur */
.nk-link .dashicons {
    font-size: 24px !important; /* Augmenté de 20px à 24px */
    width: 24px !important;
    height: 24px !important;
    color: #00d4ff !important;
}

/* On ajuste un peu le badge du panier pour qu'il ne paraisse pas minuscule */
.cart-count {
    width: 20px !important;
    height: 20px !important;
    font-size: 11px !important;
    top: -8px !important;
    right: -8px !important;
}

/* --- RÉALIGNEMENT ET TAILLE BOOSTÉE --- */

.nordik-action-menu {
    position: fixed !important;
    top: 30px !important;
    right: 30px !important; /* On l'ancre bien à droite */
    display: flex !important;
    flex-direction: row !important; /* FORCE l'alignement horizontal */
    align-items: center !important;
    gap: 15px !important; /* Espace entre les carrés */
    z-index: 999999 !important;
    width: auto !important; /* Important pour ne pas prendre toute la largeur */
    height: auto !important;
}

.nk-link {
    width: 55px !important; /* Taille plus imposante */
    height: 55px !important;
    background-color: #000 !important;
    border: 2px solid #00d4ff !important;
    border-radius: 8px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    text-decoration: none !important;
    box-shadow: 0 0 15px rgba(0, 212, 255, 0.5) !important;
    position: relative !important; /* Pour que le badge reste attaché au carré */
}

.nk-link .dashicons {
    font-size: 26px !important; /* Icône plus grande */
    width: 26px !important;
    height: 26px !important;
    color: #00d4ff !important;
    line-height: 1 !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
}

/* Ajustement du badge pour la nouvelle taille */
.cart-count {
    position: absolute !important;
    top: -8px !important;
    right: -8px !important;
    background: #ff0055 !important;
    color: #fff !important;
    font-size: 11px !important;
    font-weight: bold !important;
    width: 22px !important;
    height: 22px !important;
    border-radius: 50% !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    border: 2px solid #000 !important;
}

@media (max-width: 768px) {
    .nk-link {
        width: 42px !important;
        height: 42px !important;
    }
    .nk-link .dashicons {
        font-size: 18px !important;
    }
}

/* --- BARRE DE RECHERCHE FLOTTANTE ET DISCRÈTE --- */
.search-overlay {
    position: fixed;
    top: 35px; /* Aligné avec le haut de tes carrés */
    right: -400px; /* Caché au départ */
    width: 320px;
    height: 60px; /* Hauteur réduite */
    background: #000;
    border: 2px solid #00d4ff;
    border-radius: 8px;
    z-index: 999998; /* Juste en dessous des icônes pour ne pas les gêner */
    transition: right 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275); /* Effet ressort */
    display: flex;
    align-items: center;
    padding: 0 15px;
    box-shadow: 0 0 20px rgba(0, 212, 255, 0.3);
}

.search-overlay.active {
    right: 250px; /* Elle s'arrête juste à gauche de tes icônes */
}

/* On stylise le champ de texte */
.search-overlay input[type="text"] {
    width: 100%;
    background: transparent;
    border: none;
    color: #fff;
    font-size: 16px;
    outline: none;
}

/* Bouton fermer en forme de croix à l'intérieur */
#close-search {
    background: transparent;
    border: none;
    color: #ff0055; /* Rose/Rouge pour bien le voir */
    font-size: 20px;
    cursor: pointer;
    margin-left: 10px;
    padding: 0;
}

/* Ajustement pour mobile */
@media (max-width: 768px) {
    .search-overlay.active {
        right: 10px;
        top: 90px; /* On la descend sous les icônes sur mobile */
        width: calc(100% - 20px);
    }
}

/* --- STYLE DE LA PAGE RÉSULTATS DE RECHERCHE --- */

/* On s'assure que le fond reste sombre */
.search-results, .search-no-results {
    background-color: #000 !important;
    color: #fff !important;
}

/* Force l'affichage en colonnes (Grille) */
.search-results ul.products {
    display: grid !important;
    grid-template-columns: repeat(auto-fit, minmax(250px, 1fr)) !important;
    gap: 30px !important;
    padding: 40px 20px !important;
    list-style: none !important;
}

/* Style des cartes produits dans la recherche */
.search-results ul.products li.product {
    background: rgba(255, 255, 255, 0.05) !important;
    border: 1px solid #00d4ff !important;
    border-radius: 15px !important;
    padding: 20px !important;
    text-align: center !important;
    box-shadow: 0 0 15px rgba(0, 212, 255, 0.1) !important;
    width: 100% !important; /* Évite l'effet "étiré" de ton image */
}

/* Image du produit */
.search-results ul.products li.product img {
    border-radius: 10px !important;
    margin-bottom: 15px !important;
}

/* Titre du produit */
.search-results ul.products li.product .woocommerce-loop-product__title {
    color: #00d4ff !important;
    font-size: 1.1em !important;
}

/* Prix */
.search-results ul.products li.product .price {
    color: #fff !important;
    display: block !important;
    margin: 10px 0 !important;
}

/* Pagination (le bandeau noir en bas de ton image) */
.woocommerce-pagination {
    margin-top: 50px !important;
}

.woocommerce-pagination ul {
    border: 1px solid #00d4ff !important;
    border-radius: 30px !important;
    background: #000 !important;
}

/* --- NETTOYAGE DU BLOC NOIR MON COMPTE --- */

/* 1. On enlève le fond noir opaque qui cache tout */
.woocommerce-account .woocommerce, 
.woocommerce-MyAccount-content {
    background: transparent !important; /* On laisse voir ton fond métallique */
    color: #ffffff !important; /* On force le texte en BLANC */
}

/* 2. On force l'apparition du texte de bienvenue */
.woocommerce-MyAccount-content p, 
.woocommerce-MyAccount-content a {
    color: #ffffff !important;
}

/* 3. On redonne du style aux boutons du menu (ceux en haut qui sont tout petits) */
.woocommerce-MyAccount-navigation ul {
    display: flex !important;
    justify-content: center !important;
    flex-wrap: wrap !important;
    margin-top: 120px !important; /* On les descend sous les icônes du header */
    gap: 10px !important;
}

.woocommerce-MyAccount-navigation li a {
    background: rgba(0, 0, 0, 0.8) !important;
    border: 1.5px solid #00d4ff !important;
    color: #00d4ff !important;
    padding: 12px 20px !important;
    border-radius: 5px !important;
    font-size: 14px !important;
    text-transform: uppercase !important;
    box-shadow: 0 0 10px rgba(0, 212, 255, 0.3) !important;
}

/* 4. L'onglet actif */
.woocommerce-MyAccount-navigation li.is-active a {
    background: #00d4ff !important;
    color: #000 !important;
}

/* --- FUSION TOTALE : CAPSULE STYLE PANIER --- */

/* 1. On supprime les résidus du thème et les titres fantômes */
.woocommerce-account .entry-header, 
.woocommerce-account .page-header, 
.woocommerce-account h1.entry-title {
    display: none !important;
}

/* 2. On rend les conteneurs parents invisibles pour ne pas avoir de blocs noirs isolés */
.woocommerce-account .site-content,
.woocommerce-account #primary,
.woocommerce-account #main {
    background: transparent !important;
    padding: 0 !important;
}

/* 3. LA CAPSULE UNIQUE (On cible le conteneur qui englobe Menu + Contenu) */
.woocommerce-account .woocommerce {
    margin: 180px auto 50px auto !important;
    width: 90% !important;
    max-width: 1100px !important;
    background: #000000 !important; /* Fond noir de la capsule */
    border: 2px solid #00d4ff !important; /* Bordure néon */
    border-radius: 40px !important; /* Arrondi style panier */
    padding: 50px !important;
    box-shadow: 0 0 30px rgba(0, 212, 255, 0.3) !important;
    display: flex !important;
    flex-direction: column !important; /* Empile le menu et le texte */
    align-items: center !important;
}

/* 4. FORCE LE MENU À RENTRER DANS LA CAPSULE */
.woocommerce-MyAccount-navigation {
    width: 100% !important;
    float: none !important;
    margin-bottom: 30px !important;
    padding-bottom: 20px !important;
    border-bottom: 1px solid rgba(0, 212, 255, 0.1) !important;
}

.woocommerce-MyAccount-navigation ul {
    display: flex !important;
    justify-content: center !important;
    flex-wrap: wrap !important;
    gap: 12px !important;
    list-style: none !important;
    padding: 0 !important;
}

/* 5. FORCE LE CONTENU À RENTRER DANS LA CAPSULE */
.woocommerce-MyAccount-content {
    width: 100% !important;
    float: none !important;
    background: transparent !important; /* On tue la petite boîte noire de l'image */
    color: #ffffff !important;
    text-align: center !important;
}

/* 6. STYLE DES BOUTONS NÉON */
.woocommerce-MyAccount-navigation li a {
    border: 1.5px solid #00d4ff !important;
    color: #00d4ff !important;
    padding: 10px 18px !important;
    border-radius: 10px !important;
    text-transform: uppercase !important;
    font-weight: bold !important;
    font-size: 11px !important;
    transition: 0.3s !important;
    text-decoration: none !important;
}

.woocommerce-MyAccount-navigation li.is-active a,
.woocommerce-MyAccount-navigation li a:hover {
    background: #00d4ff !important;
    color: #000000 !important;
    box-shadow: 0 0 15px #00d4ff !important;
}

/* 7. TEXTES EN BLANC */
.woocommerce-MyAccount-content p,
.woocommerce-MyAccount-content span,
.woocommerce-MyAccount-content label {
    color: #ffffff !important;
}


/* 1. ON SUPPRIME LA BARRE NOIRE ET LE TITRE */
.woocommerce-account .site-header, 
.woocommerce-account .entry-header, 
.woocommerce-account header,
.woocommerce-account .page-header {
    display: none !important;
}

/* 2. ON CRÉE LA CAPSULE NÉON */
.woocommerce-account .woocommerce {
    margin: 200px auto 50px auto !important; /* On laisse de la place pour les boutons en haut */
    width: 90% !important;
    max-width: 1100px !important;
    background: #000000 !important;
    border: 2px solid #00d4ff !important;
    border-radius: 40px !important;
    padding: 100px 40px 40px 40px !important; /* On met un gros padding en haut (100px) pour accueillir les boutons */
    box-shadow: 0 0 30px rgba(0, 212, 255, 0.4) !important;
    position: relative !important; /* IMPORTANT pour le placement des boutons */
    display: block !important;
}

/* 3. ON FORCE LE BLOC <NAV> À RENTRER DANS LA CAPSULE */
.woocommerce-MyAccount-navigation {
    position: absolute !important;
    top: 30px !important; /* Place les boutons à 30px du bord haut de la capsule */
    left: 50% !important;
    transform: translateX(-50%) !important; /* Centre parfaitement horizontalement */
    width: 100% !important;
    z-index: 10 !important;
}

.woocommerce-MyAccount-navigation ul {
    display: flex !important;
    justify-content: center !important;
    flex-wrap: wrap !important;
    gap: 10px !important;
    list-style: none !important;
    padding: 0 !important;
    margin: 0 !important;
}

/* Look des boutons */
.woocommerce-MyAccount-navigation li a {
    display: inline-block !important;
    padding: 8px 15px !important;
    color: #00d4ff !important;
    border: 1.5px solid #00d4ff !important;
    border-radius: 10px !important;
    text-transform: uppercase !important;
    font-weight: bold !important;
    font-size: 10px !important;
    text-decoration: none !important;
    background: rgba(0, 0, 0, 0.8) !important;
}

.woocommerce-MyAccount-navigation li.is-active a {
    background: #00d4ff !important;
    color: #000 !important;
}

/* 4. LE TEXTE (SOUS LES BOUTONS) */
.woocommerce-MyAccount-content {
    width: 100% !important;
    color: #ffffff !important;
    text-align: center !important;
    margin-top: 20px !important;
}

.woocommerce-MyAccount-content p, 
.woocommerce-MyAccount-content span {
    color: #ffffff !important;
}

/* --- STYLE DE LA PAGE ADRESSES --- */

/* 1. On force les adresses à se mettre l'une sous l'autre pour rester dans la capsule */
.woocommerce-account .u-columns.col2-set {
    display: flex !important;
    flex-direction: column !important;
    gap: 30px !important;
    align-items: center !important;
}

.woocommerce-account .u-column1, 
.woocommerce-account .u-column2 {
    width: 100% !important;
    max-width: 500px !important; /* Pour que ça ne soit pas trop large */
    background: rgba(255, 255, 255, 0.05) !important;
    padding: 20px !important;
    border-radius: 15px !important;
    border: 1px solid rgba(0, 212, 255, 0.2) !important;
}

/* 2. Style des titres "Adresse de facturation / livraison" */
.woocommerce-account address {
    font-style: normal !important;
    color: #ffffff !important;
    line-height: 1.6 !important;
    margin-bottom: 15px !important;
}

.woocommerce-column__title {
    color: #00d4ff !important;
    text-transform: uppercase !important;
    font-size: 16px !important;
    margin-bottom: 15px !important;
}

/* 3. TRANSFORMER LE BOUTON "MODIFIER / AJOUTER" EN NÉON */
.woocommerce-account .edit {
    display: inline-block !important;
    padding: 8px 15px !important;
    background: transparent !important;
    border: 1px solid #00d4ff !important;
    color: #00d4ff !important;
    border-radius: 8px !important;
    text-decoration: none !important;
    font-weight: bold !important;
    font-size: 12px !important;
    transition: 0.3s !important;
}

.woocommerce-account .edit:hover {
    background: #00d4ff !important;
    color: #000000 !important;
    box-shadow: 0 0 10px #00d4ff !important;
}

/* 4. FIX POUR LE FORMULAIRE DE MODIFICATION */
/* Si l'utilisateur clique sur Modifier, on s'assure que les champs sont lisibles */
.woocommerce-address-fields input, 
.woocommerce-address-fields select {
    background: #111 !important;
    border: 1px solid #333 !important;
    color: #fff !important;
    padding: 10px !important;
    border-radius: 5px !important;
    width: 100% !important;
}

.woocommerce-address-fields label {
    color: #00d4ff !important;
    display: block !important;
    margin-bottom: 5px !important;
    text-align: left !important;
}

/* --- FORMULAIRE D'ÉDITION D'ADRESSE --- */

/* 1. On force les champs à être noirs avec bordure néon */
.woocommerce-address-fields input, 
.woocommerce-address-fields select,
.woocommerce-address-fields textarea {
    background-color: #111111 !important;
    border: 1px solid #00d4ff44 !important;
    color: #ffffff !important;
    padding: 12px !important;
    border-radius: 8px !important;
    width: 100% !important;
    margin-bottom: 15px !important;
}

/* Changement de couleur quand on clique dans un champ */
.woocommerce-address-fields input:focus {
    border-color: #00d4ff !important;
    outline: none !important;
    box-shadow: 0 0 10px rgba(0, 212, 255, 0.2) !important;
}

/* 2. Style des labels (Nom, Prénom, Ville...) */
.woocommerce-address-fields label {
    color: #00d4ff !important;
    font-weight: bold !important;
    font-size: 13px !important;
    display: block !important;
    margin-bottom: 5px !important;
    text-align: left !important;
}

/* --- MAISON NEON (SANS EFFET SURVOL) --- */
.nk-link[href*="mon-compte"] {
    position: relative !important;
    margin-right: 70px !important; 
    display: inline-flex !important;
}

.nk-link[href*="mon-compte"]::after {
    content: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='22' height='22' viewBox='0 0 24 24' fill='none' stroke='%2300d4ff' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M3 9l9-7 9 7v11a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2z'%3E%3C/path%3E%3Cpolyline points='9 22 9 12 15 12 15 22'%3E%3C/polyline%3E%3C/svg%3E") !important;
    
    position: absolute !important;
    left: 60px !important; 
    top: 50% !important;
    transform: translateY(-50%) !important;
    
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    width: 48px !important;
    height: 48px !important;
    background: #000 !important; /* Reste noir */
    border: 2px solid #00d4ff !important;
    border-radius: 12px !important;
    box-shadow: 0 0 15px rgba(0, 212, 255, 0.5) !important;
    
    /* On s'assure qu'aucune transition ou filtre ne s'active */
    transition: none !important;
    filter: none !important;
}

/* On supprime explicitement toute modification au survol */
.nk-link[href*="mon-compte"]:hover::after {
    background: #000 !important;
    box-shadow: 0 0 15px rgba(0, 212, 255, 0.5) !important;
    filter: none !important;
}

/*
==========================================================================
  NORDIKPERF — RESPONSIVE MOBILE
  Fichier : style-mobile.css
  À inclure APRÈS style.css (ou coller à la fin de style.css)
  N'affecte que les écrans <= 768px (et <= 480px pour les petits mobiles)
==========================================================================
*/

/* =========================================
   NAVIGATION
   ========================================= */
@media (max-width: 768px) {

    /* Réduit la hauteur de la nav */
    nav {
        height: 65px;
    }

    /* Padding réduit sur le container */
    .nav-container {
        padding: 0 15px;
    }

    /* Cache les liens centraux (catégories) */
    .nav-center {
        display: none !important;
    }

    /* Logo plus petit */
    .logo-img {
        height: 34px;
    }

    /* Spacer ajusté */
    .nav-spacer {
        height: 65px;
    }

    /* Menu d'actions (panier, compte, recherche) : réduit */
    .nordik-action-menu {
        top: 12px !important;
        right: 12px !important;
        gap: 8px !important;
    }

    .nk-link {
        width: 44px !important;
        height: 44px !important;
    }

    .nk-link .dashicons {
        font-size: 20px !important;
        width: 20px !important;
        height: 20px !important;
    }

    /* Panier flottant */
    .nordik-cart-container {
        top: 12px !important;
        right: 12px !important;
    }

    .cart-icon-wrapper {
        width: 48px;
        height: 48px;
    }

    /* Recherche : descend sous les icônes sur mobile */
    .search-overlay.active {
        right: 10px;
        top: 75px;
        width: calc(100% - 20px);
    }
}

/* =========================================
   HERO (PAGE D'ACCUEIL)
   ========================================= */
@media (max-width: 768px) {

    /* Désactive le parallax (non supporté sur iOS) */
    .hero {
        background-attachment: scroll !important;
        background-position: center center !important;
    }

    /* Logo héro */
    .main-logo {
        width: 120px;
        margin-bottom: 15px;
    }

    /* Titre principal beaucoup plus petit */
    .main-title {
        font-size: 2.8rem !important;
        letter-spacing: 8px !important;
    }

    /* Sous-titre */
    .main-subtitle {
        font-size: 0.75rem !important;
        letter-spacing: 6px !important;
        margin-bottom: 25px !important;
    }

    /* Bouton CTA */
    .btn-primary-neon {
        padding: 14px 30px !important;
        font-size: 0.85rem !important;
        letter-spacing: 3px !important;
    }
}

/* =========================================
   SECTION CATÉGORIES (ACCUEIL)
   ========================================= */
@media (max-width: 768px) {

    .cat-selection {
        padding: 30px 15px;
    }

    .section-title-neon {
        font-size: 1.5rem !important;
        letter-spacing: 5px !important;
        margin-bottom: 25px !important;
    }

    /* Passe de 3 colonnes à 1 colonne */
    .cat-grid {
        grid-template-columns: 1fr !important;
        gap: 15px !important;
    }

    .cat-card {
        height: 280px !important;
    }

    /* Rend les infos catégorie visibles sans survol (pas de hover sur mobile) */
    .cat-info p,
    .cat-btn {
        opacity: 1 !important;
        transform: translateY(0) !important;
    }

    .cat-img-overlay {
        opacity: 1 !important;
    }

    .cat-card img {
        filter: grayscale(0%) brightness(0.7) !important;
    }

    .cat-info h3 {
        font-size: 1.4rem !important;
    }
}

/* =========================================
   GRILLE BOUTIQUE & PRODUITS
   ========================================= */
@media (max-width: 768px) {

    .container {
        padding: 20px 12px;
    }

    /* Grille custom : 1 colonne sur mobile */
    .product-grid {
        grid-template-columns: 1fr !important;
        gap: 15px !important;
    }

    /* WooCommerce : 1 colonne */
    .woocommerce ul.products,
    .woocommerce ul.products.columns-3,
    .woocommerce.archive ul.products,
    .archive.tax-product_cat ul.products,
    .grid-3-categories {
        grid-template-columns: 1fr !important;
        gap: 20px !important;
        padding: 20px 12px !important;
    }

    /* Produits similaires */
    .single-product .related.products ul.products {
        grid-template-columns: repeat(2, 1fr) !important;
    }

    /* Supprime le hover translate sur mobile (évite les sauts) */
    .product-card:hover,
    .woocommerce ul.products li.product:hover,
    .archive.tax-product_cat li.product:hover,
    .cat-card:hover,
    .grid-3-categories li.product-category:hover {
        transform: none !important;
    }
}

/* =========================================
   FICHE PRODUIT
   ========================================= */
@media (max-width: 768px) {

    /* Passe en colonne (image puis infos) */
    .product-page-container {
        grid-template-columns: 1fr !important;
        gap: 25px !important;
        margin: 20px auto !important;
    }

    /* Capsule WooCommerce fiche produit */
    .single-product div.product {
        border-radius: 25px !important;
        padding: 20px !important;
        margin: 20px 10px !important;
        flex-direction: column !important;
        gap: 20px !important;
    }

    .product-title-neon {
        font-size: 1.6rem !important;
    }

    .product-price {
        font-size: 1.5rem !important;
    }

    /* Zone achat : empile en colonne */
    .purchase-box {
        flex-direction: column !important;
        gap: 12px !important;
    }

    /* Bouton d'achat pleine largeur */
    .btn-primary-neon {
        width: 100% !important;
        text-align: center !important;
    }

    /* Onglets description/avis : scrollable */
    .woocommerce-tabs ul.tabs {
        flex-wrap: wrap !important;
        gap: 8px !important;
    }

    .woocommerce-tabs ul.tabs li a {
        font-size: 0.75rem !important;
        padding: 10px 14px !important;
        letter-spacing: 1px !important;
    }

    /* Avis produits */
    .reviews-grid {
        grid-template-columns: 1fr !important;
    }
}

/* =========================================
   PANIER COULISSANT (DRAWER)
   ========================================= */
@media (max-width: 768px) {

    /* Panier occupe tout l'écran */
    .cart-drawer {
        width: 100% !important;
        right: -100% !important;
        padding: 20px !important;
    }

    .cart-drawer.active {
        right: 0 !important;
    }

    .btn-checkout,
    .checkout-btn {
        padding: 16px !important;
        font-size: 0.95rem !important;
    }
}

/* =========================================
   PAGE PANIER (WC BLOCK)
   ========================================= */
@media (max-width: 768px) {

    .wc-block-cart,
    .wp-block-woocommerce-cart {
        border-radius: 25px !important;
        padding: 20px !important;
        margin: 80px 10px 30px 10px !important;
    }

    .woocommerce-cart h1,
    .woocommerce-cart .wp-block-post-title,
    .wp-block-post-title {
        font-size: 1.8rem !important;
        margin-top: 80px !important;
    }
}

/* =========================================
   PAGE CHECKOUT (VALIDATION COMMANDE)
   ========================================= */
@media (max-width: 768px) {

    .wp-block-woocommerce-checkout,
    .wc-block-checkout {
        border-radius: 25px !important;
        padding: 20px !important;
        margin: 80px 10px 30px 10px !important;
    }

    /* Formulaire : colonne unique */
    .wc-block-components-text-input,
    .wc-block-components-combobox {
        height: auto !important;
    }

    .wc-block-components-text-input input,
    .wc-block-components-combobox input {
        height: 50px !important;
        line-height: 50px !important;
        font-size: 0.9rem !important;
    }

    /* Récapitulatif */
    .wc-block-checkout__sidebar,
    .wc-block-components-order-summary {
        padding: 15px !important;
    }
}

/* =========================================
   MON COMPTE (WOOCOMMERCE)
   ========================================= */
@media (max-width: 768px) {

    /* Capsule compte */
    .woocommerce-account .woocommerce {
        margin: 80px 10px 30px 10px !important;
        padding: 80px 15px 25px 15px !important;
        border-radius: 25px !important;
    }

    /* Boutons du menu compte en grille 2 colonnes */
    .woocommerce-MyAccount-navigation ul {
        margin-top: 80px !important;
        gap: 8px !important;
        justify-content: center !important;
    }

    .woocommerce-MyAccount-navigation li a {
        font-size: 11px !important;
        padding: 9px 12px !important;
    }

    /* Adresses */
    .woocommerce-account .u-columns.col2-set {
        gap: 20px !important;
    }

    .woocommerce-account .u-column1,
    .woocommerce-account .u-column2 {
        max-width: 100% !important;
    }
}

/* =========================================
   FOOTER
   ========================================= */
@media (max-width: 768px) {

    .main-footer {
        padding: 35px 15px 20px !important;
        margin-top: 50px !important;
    }

    .footer-container {
        grid-template-columns: 1fr !important;
        gap: 25px !important;
        text-align: center !important;
    }

    .footer-logo {
        height: 55px;
    }

    .footer-links a {
        display: inline-block !important;
        margin: 0 6px 8px 6px !important;
    }
}

/* =========================================
   PAGINATION FIXE
   ========================================= */
@media (max-width: 768px) {

    .woocommerce-pagination {
        width: 90% !important;
        padding: 8px 15px !important;
        bottom: 15px !important;
    }

    .woocommerce-pagination ul.page-numbers li a,
    .woocommerce-pagination ul.page-numbers li span {
        font-size: 0.9rem !important;
        padding: 5px 8px !important;
    }

    /* Padding bas de page pour ne pas cacher le dernier produit */
    .nordik-container {
        padding-bottom: 90px !important;
    }
}

/* =========================================
   CONTACT
   ========================================= */
@media (max-width: 768px) {

    .contact-box {
        padding: 25px 18px !important;
    }

    .neon-text-small {
        font-size: 1.6rem !important;
        letter-spacing: 3px !important;
    }
}

/* =========================================
   FORMULAIRE D'ACHAT (QUANTITÉ + BOUTON)
   ========================================= */
@media (max-width: 480px) {

    .single-product div.product form.cart {
        flex-direction: column !important;
        align-items: stretch !important;
        gap: 12px !important;
    }

    .single-product div.product form.cart .quantity input {
        width: 100% !important;
        height: 50px !important;
    }

    .single-product div.product form.cart .button {
        height: 50px !important;
        font-size: 0.95rem !important;
    }
}

/* =========================================
   ICÔNE MAISON (LIEN MON COMPTE)
   ========================================= */
@media (max-width: 768px) {

    /* Réduit le décalage de l'icône maison */
    .nk-link[href*="mon-compte"] {
        margin-right: 0 !important;
    }

    .nk-link[href*="mon-compte"]::after {
        left: 48px !important;
        width: 40px !important;
        height: 40px !important;
    }
}

/* =========================================
   LOGO NORDIK (PAGE BOUTIQUE)
   ========================================= */
@media (max-width: 768px) {

    .nordik-main-logo-container {
        padding: 80px 0 15px 0 !important;
    }

    .nordik-logo {
        max-width: 200px !important;
    }

    /* Centre-logo (ancienne version) */
    .center-logo {
        max-width: 180px !important;
    }
}

/* =========================================
   AJUSTEMENTS TYPOGRAPHIQUES GLOBAUX
   ========================================= */
@media (max-width: 768px) {

    /* Titres de section */
    .woocommerce ul.products li.product h2.woocommerce-loop-product__title,
    .archive.tax-product_cat li.product h2.woocommerce-loop-product__title {
        font-size: 1rem !important;
        padding: 15px 12px 8px 12px !important;
    }

    /* Prix */
    .woocommerce ul.products li.product .price,
    .archive.tax-product_cat li.product .price {
        font-size: 1.2rem !important;
    }

    /* Boutons panier dans la grille */
    .woocommerce ul.products li.product .button,
    .archive.tax-product_cat li.product .button {
        padding: 10px 18px !important;
        font-size: 0.8rem !important;
        margin-bottom: 15px !important;
    }

    /* Catégories (grille & texte) */
    .grid-3-categories li.product-category h2,
    .woocommerce ul.products li.product-category h2 {
        font-size: 1.1rem !important;
        letter-spacing: 2px !important;
        padding: 15px 8px !important;
    }

    .grid-3-categories li.product-category img,
    .woocommerce ul.products li.product-category img {
        height: 180px !important;
    }

    /* Notification */
    .notification-success {
        width: 90% !important;
        font-size: 0.85rem !important;
    }
}