/* ==========================================================
   STRUCTURE DE BASE ET GLOBAL SQUELETTE (DU 4K AU MOBILE)
   ========================================================== */
:root {
    --primary-color: #10b981;    /* Vert Signature Bah Store */
    --primary-hover: #059669;    /* Vert Foncé au Survol */
    --bg-light: #ffffff;         /* Fond Clair Principal */
    --text-dark: #111827;        /* Texte Foncé Robuste */
    --text-muted: #64748b;       /* Texte Gris Secondaire */
    --navbar-bg: #111827;        /* Navbar Sombre Premium */
    --border-light: #e5e7eb;     /* Bordure fine grise */
    --transition-fast: 0.25s ease;
}

body, html {
    background-color: var(--bg-light) !important;
    color: var(--text-dark) !important;
    margin: 0 !important;
    padding: 0 !important;
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
    -webkit-font-smoothing: antialiased;
}

/* Prépare le flux sous la navbar fixe */
body {
    padding-top: 60px !important;
}

/* Limitation et centrage absolu pour les écrans géants et écrans de télévision 4K */
@media screen and (min-width: 2560px) {
    body {
        max-width: 1920px !important;
        margin: 0 auto !important;
        box-shadow: 0 0 50px rgba(0, 0, 0, 0.05);
        position: relative;
    }
    nav {
        max-width: 1920px !important;
        left: 50% !important;
        transform: translateX(-50%) !important;
    }
}
/* ==========================================================
   INTERFACES D'AUTHENTIFICATION (CONNEXION / INSCRIPTION)
   ========================================================== */

/* Arrière-plan global centré et aéré */
.auth-wrapper {
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    min-height: calc(100vh - 160px) !important; /* Calcule l'espace restant sans casser le footer */
    background-color: #ffffff !important;
    padding: 40px 20px !important;
    box-sizing: border-box !important;
    width: 100% !important;
}

/* La carte du formulaire (Design épuré et moderne) */
.auth-card {
    background-color: #ffffff !important;
    border: 1px solid #e5e7eb !important;
    border-radius: 12px !important;
    padding: 40px 30px !important;
    width: 100% !important;
    max-width: 450px !important; /* Largeur idéale sur ordinateur et écrans 4K */
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.03) !important;
    box-sizing: border-box !important;
}

.auth-card h2 {
    font-size: 26px !important;
    font-weight: 800 !important;
    color: var(--text-dark) !important;
    margin: 0 0 6px 0 !important;
    text-align: center !important;
}

.auth-subtitle {
    font-size: 15px !important;
    color: var(--text-muted) !important;
    margin: 0 0 30px 0 !important;
    text-align: center !important;
}

/* Groupes de champs du formulaire */
.form-group {
    display: flex !important;
    flex-direction: column !important;
    gap: 8px !important;
    margin-bottom: 20px !important;
    width: 100% !important;
    box-sizing: border-box !important;
}

.form-group label {
    font-size: 14px !important;
    font-weight: 600 !important;
    color: var(--text-dark) !important;
    text-align: left !important;
}

/* Conteneur d'input avec icône intégrée */
.input-container {
    position: relative !important;
    display: flex !important;
    align-items: center !important;
    width: 100% !important;
    box-sizing: border-box !important;
}

.input-icon {
    position: absolute !important;
    left: 14px !important;
    color: var(--text-muted) !important;
    font-size: 16px !important;
    pointer-events: none !important; /* L'icône ne bloque pas le clic */
}

.input-container input {
    width: 100% !important;
    padding: 12px 14px 12px 42px !important; /* Décale le texte pour laisser la place à l'icône */
    font-size: 15px !important;
    color: var(--text-dark) !important;
    background-color: #f9fafb !important;
    border: 1px solid #d1d5db !important;
    border-radius: 8px !important;
    outline: none !important;
    box-sizing: border-box !important;
    transition: border-color var(--transition-fast), background-color var(--transition-fast), box-shadow var(--transition-fast) !important;
}

/* Effet lumineux vert au focus */
.input-container input:focus {
    border-color: var(--primary-color) !important;
    background-color: #ffffff !important;
    box-shadow: 0 0 0 3px rgba(16, 185, 129, 0.1) !important;
}

/* Bouton Soumettre Connexion */
.auth-btn {
    width: 100% !important;
    background-color: var(--primary-color) !important;
    color: #ffffff !important;
    border: none !important;
    padding: 14px 20px !important;
    font-size: 16px !important;
    font-weight: 700 !important;
    border-radius: 8px !important;
    cursor: pointer !important;
    margin-top: 10px !important;
    transition: background-color var(--transition-fast) !important;
    box-sizing: border-box !important;
}

.auth-btn:hover {
    background-color: var(--primary-hover) !important;
}

/* Liens secondaires (Mot de passe oublié & Inscription) */
.auth-card a {
    color: #007185 !important;
    text-decoration: none !important;
    font-size: 14px !important;
    font-weight: 600 !important;
    transition: color var(--transition-fast) !important;
}

.auth-card a:hover {
    color: #c45500 !important;
    text-decoration: underline !important;
}

.auth-footer {
    text-align: center !important;
    margin: 25px 0 0 0 !important;
    padding-top: 20px !important;
    border-top: 1px solid #f3f4f6 !important;
    font-size: 14px !important;
    color: var(--text-muted) !important;
}

/* ==========================================================
   ADAPTATION ECRANS MOBILES (IPHONE 11 PRO / PIXEL 7 STABLE)
   ========================================================== */
@media screen and (max-width: 768px) {
    .auth-wrapper {
        padding: 20px 12px !important;
        align-items: flex-start !important; /* Permet un scroll plus naturel si l'écran est petit */
    }

    .auth-card {
        padding: 30px 20px !important;
        border: none !important; /* Supprime les bordures sur mobile pour gagner en épuration */
        box-shadow: none !important; /* Rendu "Flat design" très moderne */
    }

    .auth-card h2 {
        font-size: 22px !important;
    }

    .auth-subtitle {
        margin-bottom: 24px !important;
    }
}

/* ==========================================================
   PAGE RECOVERY : MOT DE PASSE OUBLIÉ ET AUTH MODERNISÉE
   ========================================================== */

/* Conteneur global centré verticalement et horizontalement */
.auth-wrapper-centered {
    min-height: calc(100vh - 160px) !important; /* Calcule la hauteur hors navbar/footer */
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    padding: 40px 20px !important;
    background-color: #f8fafc !important; /* Fond gris très clair ultra-pro */
    box-sizing: border-box !important;
}

/* La carte du formulaire */
.auth-card-modern {
    background: #ffffff !important;
    border: 1px solid #e2e8f0 !important;
    border-radius: 16px !important;
    padding: 40px 32px !important;
    width: 100% !important;
    max-width: 440px !important; /* Taille de boîte idéale standardisée */
    box-shadow: 0 10px 25px -5px rgba(0, 0, 0, 0.05) !important;
    box-sizing: border-box !important;
    text-align: center !important;
}

/* Bulle d'icône décorative */
.auth-icon-circle {
    width: 60px !important;
    height: 60px !important;
    background-color: #f0fdf4 !important; /* Vert Vendo clair */
    color: #16a34a !important;            /* Vert Vendo */
    border-radius: 50px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    margin: 0 auto 20px auto !important;
    font-size: 24px !important;
}

.auth-card-header h2 {
    font-size: 22px !important;
    font-weight: 800 !important;
    color: #1e293b !important;
    margin: 0 0 10px 0 !important;
}

.auth-instructions {
    font-size: 14px !important;
    color: #64748b !important;
    line-height: 1.5 !important;
    margin: 0 0 28px 0 !important;
}

/* Groupe de saisie avec icône intégrée */
.auth-form-modern {
    display: flex !important;
    flex-direction: column !important;
    gap: 20px !important;
}

.auth-input-group {
    display: flex !important;
    position: relative !important;
    align-items: center !important;
    width: 100% !important;
}

.auth-input-icon {
    position: absolute !important;
    left: 16px !important;
    color: #94a3b8 !important;
    font-size: 16px !important;
    pointer-events: none !important;
}

/* Champ de texte personnalisé */
.auth-field-input {
    width: 100% !important;
    padding: 14px 16px 14px 46px !important; /* Décale le texte pour laisser place à l'icône */
    font-size: 15px !important;
    font-weight: 500 !important;
    color: #1e293b !important;
    background-color: #ffffff !important;
    border: 1px solid #cbd5e1 !important;
    border-radius: 8px !important;
    outline: none !important;
    box-sizing: border-box !important;
    transition: border-color 0.2s, box-shadow 0.2s !important;
}

/* Focus lumineux en vert Vendo signature */
.auth-field-input:focus {
    border-color: #16a34a !important;
    box-shadow: 0 0 0 3px rgba(22, 163, 74, 0.12) !important;
}

/* Bouton de validation moderne */
.btn-auth-submit {
    width: 100% !important;
    padding: 14px 20px !important;
    font-size: 15px !important;
    font-weight: 700 !important;
    color: #ffffff !important;
    background-color: #111827 !important; /* Noir pro chic */
    border: none !important;
    border-radius: 8px !important;
    cursor: pointer !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 10px !important;
    box-sizing: border-box !important;
    -webkit-tap-highlight-color: transparent !important; /* Suppression flash bleu tactiles */
    transition: background-color 0.2s, transform 0.1s !important;
}

.btn-auth-submit:hover {
    background-color: #1f2937 !important;
}

.btn-auth-submit:active {
    transform: scale(0.98) !important;
}

/* Liens du bas */
.auth-card-footer-links {
    margin-top: 24px !important;
    padding-top: 16px !important;
    border-top: 1px solid #f1f5f9 !important;
}

.back-to-login-link {
    font-size: 14px !important;
    font-weight: 600 !important;
    color: #64748b !important;
    text-decoration: none !important;
    display: inline-flex !important;
    align-items: center !important;
    gap: 8px !important;
    transition: color 0.2s !important;
}

.back-to-login-link:hover {
    color: #16a34a !important; /* Devient vert au survol */
}

/* ==========================================================
   ADAPTATION ECRANS PHONES (PIXEL 7 ET IPHONE FOCUS)
   ========================================================== */
@media screen and (max-width: 480px) {
    .auth-wrapper-centered {
        padding: 20px 12px !important;
        background-color: #ffffff !important; /* On fond la carte en blanc total sur mobile */
    }

    .auth-card-modern {
        border: none !important;
        box-shadow: none !important;
        padding: 20px 8px !important;
    }
}

/* ==========================================================
   AJUSTEMENTS SPÉCIFIQUES POUR L'ÉCRAN OTP
   ========================================================== */

/* Centre les chiffres saisis à l'intérieur du champ pour un style plus propre */
.text-center-otp {
    text-align: center !important;
    letter-spacing: 4px !important;
    font-size: 18px !important;
    font-weight: 700 !important;
    padding: 14px 16px !important; /* Rééquilibre le padding puisque le texte est centré */
}

.otp-resend-notice {
    font-size: 13px !important;
    color: #64748b !important;
    margin: 0 !important;
}

.resend-link {
    color: var(--primary-color) !important; /* Ton vert Vendo signature */
    text-decoration: none !important;
    font-weight: 700 !important;
    margin-left: 4px !important;
    transition: color 0.2s ease !important;
}

.resend-link:hover {
    color: var(--primary-hover) !important;
    text-decoration: underline !important;
}



/* ==========================================================
   BARRE DE NAVIGATION FIXE (`<nav>`)
   ========================================================== */
nav {
    position: fixed !important;
    top: 0 !important;
    left: 0 !important;
    width: 100% !important;
    height: 60px !important;
    background-color: var(--navbar-bg) !important;
    display: flex !important;
    justify-content: space-between !important;
    align-items: center !important;
    padding: 0 24px !important;
    box-sizing: border-box !important;
    z-index: 99999 !important;
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.15) !important;
}

.nav-gauche {
    display: flex !important;
    align-items: center !important;
    gap: 20px !important;
}

/* ==========================================================
   DOMPTAGE ET EFFET MAXIMUM POUR LE LOGO IMAGE "VENDO"
   ========================================================== */

/* Conteneur du logo */
/* ==========================================================
   BARRE DE NAVIGATION : AGRANDISSEMENT DE L'ICÔNE LOGO
   ========================================================== */

.logo {
    display: flex !important;
    align-items: center !important;
    justify-content: center !important; /* Centre l'icône dans sa zone */
    height: 100% !important;
    max-height: 60px !important;
    text-decoration: none !important;
    margin: 0 !important;
    padding: 0 !important;
}

/* Ciblage de ton icône : plus grande et bien équilibrée */
.logo img, 
.navbar-logo-img {
    height: 66px !important;      /* Augmentation de la taille sur ordinateur */
    max-height: 66px !important;  /* Blocage de sécurité */
    width: auto !important;       /* L'icône garde sa forme carrée parfaite */
    display: block !important;
    object-fit: contain !important;
    transition: transform var(--transition-fast) !important;
}

.logo img:hover, 
.navbar-logo-img:hover {
    transform: scale(1.06) !important; /* Petit effet dynamique sympa */
}

/* ==========================================================
   ADAPTATION MOBILE ET FILTRE INSPECTEUR (PIXEL 7 / IPHONE)
   ========================================================== */
@media screen and (max-width: 768px) {
    .logo img, 
    .navbar-logo-img {
        height: 50px !important;      /* Taille généreuse et lisible sur smartphone */
        max-height: 50px !important;  /* Blocage de sécurité mobile */
    }
}

/* Bouton Burger */
.menu-burger {
    display: flex !important;
    flex-direction: column !important;
    justify-content: space-between !important;
    width: 22px !important;
    height: 16px !important;
    background: transparent !important;
    border: none !important;
    cursor: pointer !important;
    padding: 0 !important;
}

.menu-burger span {
    width: 100% !important;
    height: 2px !important;
    background-color: #ffffff !important;
    border-radius: 4px !important;
    transition: var(--transition-fast) !important;
}

.nav-droite-actions {
    display: flex !important;
    align-items: center !important;
    gap: 16px !important;
}

.nav-direct-link {
    color: #f3f4f6 !important;
    font-size: 19px !important;
    text-decoration: none !important;
    position: relative !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    width: 40px !important;
    height: 40px !important;
    border-radius: 50% !important;
    transition: background var(--transition-fast) !important;
}

.nav-direct-link:hover {
    background-color: rgba(255, 255, 255, 0.1) !important;
}

/* Badge du panier */
.badge-panier {
    position: absolute !important;
    top: 2px !important;
    right: 2px !important;
    background-color: #ef4444 !important;
    color: #ffffff !important;
    font-size: 10px !important;
    font-weight: 700 !important;
    border-radius: 50% !important;
    width: 16px !important;
    height: 16px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    box-shadow: 0 0 0 2px var(--navbar-bg) !important;
}


/* ==========================================================
   INTERFACES TACTILES DU MENU LATÉRAL ET OVERLAY
   ========================================================== */

/* Voile noir transparent d'arrière-plan */
.sidebar-overlay {
    position: fixed !important;
    top: 0 !important;
    left: 0 !important;
    width: 100vw !important;
    height: 100vh !important;
    background-color: rgba(0, 0, 0, 0.4) !important; /* Opacité douce */
    z-index: 99997 !important; /* Juste en dessous de la barre latérale */
    opacity: 0 !important;
    pointer-events: none !important; /* Désactivé tant que le menu est fermé */
    transition: opacity 0.3s ease-in-out !important;
}

/* Devient visible et actif */
.sidebar-overlay.active {
    opacity: 1 !important;
    pointer-events: auto !important;
}


/* ==========================================================
   HARMONISATION ET LISIBILITÉ DU MENU LATÉRAL (SIDEBAR)
   ========================================================== */

/* Fond global blanc épuré pour tout le menu */
.sidebar {
    height: 100vh !important;
    width: 280px !important;
    position: fixed !important;
    z-index: 99999 !important;
    top: 0 !important;
    left: -280px !important;
    background-color: #ffffff !important; /* Finie la coupure de couleur ! */
    box-shadow: 4px 0 25px rgba(0, 0, 0, 0.1) !important;
    display: flex !important;
    flex-direction: column !important;
    transition: left 0.3s cubic-bezier(0.4, 0, 0.2, 1) !important;
}

.sidebar.open {
    left: 0 !important;
}

/* En-tête du menu */
.sidebar-header {
    padding: 20px 24px !important;
    border-bottom: 1px solid #f1f5f9 !important;
    display: flex !important;
    justify-content: space-between !important;
    align-items: center !important;
    background-color: #ffffff !important;
}

.sidebar-title {
    font-size: 18px !important;
    font-weight: 700 !important;
    color: #1e293b !important; /* Texte sombre très lisible */
}

.closebtn {
    color: #64748b !important;
    font-size: 20px !important;
    text-decoration: none !important;
}

/* Conteneur des liens */
.sidebar-content {
    padding: 12px 0 !important;
    overflow-y: auto !important; /* Permet de scroller dans le menu si la liste est longue */
    flex: 1 !important;
}

/* Style universel des liens principaux et de l'assistance */
.sidebar-content a {
    padding: 12px 24px !important;
    text-decoration: none !important;
    font-size: 15px !important;
    font-weight: 600 !important;
    color: #334155 !important; /* FINI LE BLANC SUR BLANC : texte gris sombre pro */
    display: flex !important;
    align-items: center !important;
    gap: 14px !important;
    transition: all 0.2s ease !important;
}

/* Icônes des liens principaux */
.sidebar-content a i {
    font-size: 18px !important;
    color: #64748b !important; /* Couleur d'icône douce */
    width: 22px !important;
    text-align: center !important;
    transition: color 0.2s ease !important;
}

/* ==========================================================
   ZONE DES CATÉGORIES (SOUS-MENU ADAPTÉ)
   ========================================================== */
.sub-menu {
    background-color: #f8fafc !important; /* Fond gris très légèrement bleuté pour isoler les catégories */
    padding: 8px 0 !important;
    border-top: 1px solid #f1f5f9 !important;
    border-bottom: 1px solid #f1f5f9 !important;
    margin: 8px 0 !important;
}

/* Liens des catégories à l'intérieur du sous-menu */
.sub-menu a.sub-item {
    padding: 10px 24px 10px 32px !important; /* Léger décalage vers la droite */
    font-size: 14px !important;
    font-weight: 500 !important;
    color: #475569 !important;
}

.sub-menu a.sub-item i {
    color: #94a3b8 !important;
}

/* ==========================================================
   EFFETS INTERACTIFS (SURVOL AVEC TON VERT "VENDO")
   ========================================================== */
.sidebar-content a:hover, 
.sub-menu a.sub-item:hover {
    background-color: #f0fdf4 !important; /* Fond vert clair discret au survol */
    color: #16a34a !important; /* Le texte passe au vert pro */
}

.sidebar-content a:hover i, 
.sub-menu a.sub-item:hover i {
    color: #16a34a !important; /* L'icône s'illumine en vert aussi */
}

/* Séparateurs modernes */
.sidebar-divider {
    height: 1px !important;
    background-color: #e2e8f0 !important;
    margin: 12px 24px !important;
}

/* Style spécial pour le bouton Déconnexion rouge */
.sidebar-content a.logout-item {
    color: #dc2626 !important;
}
.sidebar-content a.logout-item i {
    color: #dc2626 !important;
}
.sidebar-content a.logout-item:hover {
    background-color: #fef2f2 !important;
}

.sidebar-content a i {
    width: 20px !important;
    text-align: center !important;
    font-size: 16px !important;
    color: var(--text-muted) !important;
}

.sidebar-content a:hover {
    background-color: #2d3748 !important;
    color: #ffffff !important;
}

.sidebar-content a:hover i {
    color: var(--primary-color) !important;
}

/* Sous-menu des catégories */
.sub-menu {
    background-color: #111827 !important;
    padding: 5px 0 !important;
}

.sub-item {
    padding: 10px 24px 10px 40px !important; /* Décalage pour l'arborescence */
    font-size: 14px !important;
}

/* Séparateurs et items spécifiques */
.sidebar-divider {
    height: 1px !important;
    background-color: #374151 !important;
    margin: 15px 24px !important;
}

.logout-item {
    color: #ef4444 !important;
}
.logout-item i {
    color: #ef4444 !important;
}
.logout-item:hover {
    background-color: rgba(239, 68, 68, 0.1) !important;
    color: #f87171 !important;
}

/* ==========================================================
   ALERTES ET NOTIFICATIONS FLOTTANTES (TOASTS)
   ========================================================== */
.global-messages-container {
    position: fixed !important;
    top: 75px !important; /* Se positionne pile sous la nav sans mordre */
    left: 50% !important;
    transform: translateX(-50%) !important;
    width: 90% !important;
    max-width: 420px !important;
    z-index: 999999 !important;
    display: flex !important;
    flex-direction: column !important;
    gap: 10px !important;
}

.alert-message {
    padding: 14px 18px !important;
    border-radius: 8px !important;
    font-size: 14px !important;
    font-weight: 600 !important;
    display: flex !important;
    align-items: center !important;
    gap: 12px !important;
    box-shadow: 0 10px 25px rgba(0, 0, 0, 0.15) !important;
}

.alert-message.success {
    background-color: #ecfdf5 !important;
    color: #065f46 !important;
    border: 1px solid #a7f3d0 !important;
}

.alert-message.error, .alert-message.danger {
    background-color: #fef2f2 !important;
    color: #991b1b !important;
    border: 1px solid #fca5a5 !important;
}

.alert-message.info {
    background-color: #eff6ff !important;
    color: #1e40af !important;
    border: 1px solid #bfdbfe !important;
}



/* ==========================================================
   AFFICHAGE ULTRA MOBILE - FOCUS IPHONE 11 PRO (max-width: 414px)
   ========================================================== */
@media screen and (max-width: 414px) {
    nav {
        padding: 0 16px !important; /* Resserre les bords pour l'iPhone 11 pro */
    }

    .logo {
        font-size: 19px !important;
    }

    .sidebar {
        max-width: 85vw !important; /* Évite de déborder inutilement sur petit écran */
    }

    .global-messages-container {
        width: 92% !important;
        top: 70px !important;
    }
}


/* ==========================================================
   CORRECTIF ABSOLU : FOOTER BLOQUÉ EN BAS DE L'ÉCRAN (STICKY)
   ========================================================== */

/* Étape 1 : Libérer la hauteur sur TOUS les conteneurs parents invisibles */
html, 
body, 
div.produits,
.produits-wrapper-global {
    height: auto !important;
    min-height: 100% !important;
    margin: 0 !important;
    padding: 0 !important;
    box-sizing: border-box !important;
}

/* Étape 2 : Transformer le body en colonne étirable */
body {
    display: flex !important;
    flex-direction: column !important;
    min-height: 100vh !important; /* Force le corps à faire au MOINS la taille de l'écran */
    background-color: #f8fafc !important;
}

/* Étape 3 : Le conteneur principal aspire tout l'espace libre */
.main-content-wrapper {
    flex: 1 0 auto !important; /* Pousse mécaniquement le footer vers le bas */
    width: 100% !important;
    display: block !important;
    box-sizing: border-box !important;
}

/* Étape 4 : Le Footer s'ancre sans exception */
footer {
    flex-shrink: 0 !important; /* Interdit au footer de remonter ou de s'écraser */
    margin-top: auto !important; /* Sécurité ultime de poussée */
    background-color: #111827 !important;
    color: #9ca3af !important;
    text-align: center !important;
    padding: 24px 20px !important;
    font-size: 13px !important;
    border-top: 1px solid #1f2937 !important;
    width: 100% !important;
    box-sizing: border-box !important;
}

/* Espacement sous la grille de produits sur mobile pour éviter qu'elle colle au footer */
@media screen and (max-width: 768px) {
    .grille-produits {
        margin-bottom: 30px !important;
    }
}



/* ==========================================================
   BARRE DE RECHERCHE INTEGRÉE : LARGEUR CONTRÔLÉE ET CENTRÉE
   ========================================================== */

/* Le conteneur blanc qui s'affiche sous la navbar */
.recherche-container-box {
    width: 100% !important;
    max-width: 100% !important;
    background-color: #ffffff !important;
    border-bottom: 1px solid #e2e8f0 !important;
    padding: 12px 24px !important;
    box-sizing: border-box !important;
    margin: 0 !important;
}

/* C'est ce bloc qui va contraindre la largeur sur ordinateur */
.recherche-form {
    width: 100% !important;
    max-width: 650px !important; /* Largeur idéale sur PC pour ne pas être trop étirée */
    margin: 0 auto !important; /* Centre horizontalement la barre sur l'écran */
}

/* Le cadre gris de la recherche */
.barre-recherche-wrapper {
    position: relative !important;
    display: flex !important;
    align-items: center !important;
    background-color: #f1f5f9 !important;
    border: 1px solid transparent !important;
    border-radius: 8px !important;
    padding: 2px 2px 2px 42px !important;
    box-sizing: border-box !important;
    height: 46px !important;
    transition: background-color 0.2s, border-color 0.2s, box-shadow 0.2s !important;
}

/* L'icône Loupe calée à gauche */
.search-input-icon-left {
    position: absolute !important;
    left: 16px !important;
    top: 50% !important;
    transform: translateY(-50%) !important;
    color: #94a3b8 !important;
    font-size: 15px !important;
    pointer-events: none !important;
}

/* Champ de saisie texte */
.search-input-field {
    width: 100% !important;
    border: none !important;
    outline: none !important;
    background: transparent !important;
    font-size: 14px !important;
    font-weight: 500 !important;
    color: #1e293b !important;
    padding: 0 12px 0 0 !important;
    margin: 0 !important;
    height: 100% !important;
    box-sizing: border-box !important;
}

.search-input-field::placeholder {
    color: #94a3b8 !important;
}

/* Effet interactif au clic */
.barre-recherche-wrapper:focus-within {
    background-color: #ffffff !important;
    border-color: var(--primary-color) !important;
    box-shadow: 0 0 0 4px rgba(22, 163, 74, 0.1) !important;
}

/* Le bouton noir de recherche à droite */
.btn-recherche-submit-modern {
    background-color: #111827 !important;
    color: #ffffff !important;
    border: none !important;
    border-radius: 6px !important;
    height: 40px !important;
    padding: 0 24px !important;
    font-size: 13px !important;
    font-weight: 700 !important;
    cursor: pointer !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    white-space: nowrap !important;
    margin: 0 !important;
    transition: background-color 0.2s !important;
}

.btn-recherche-submit-modern:hover {
    background-color: #1f2937 !important;
}

/* ==========================================================
   ADAPTATION TACTILE SMARTPHONE (CONSERVE TOUTE LA LARGEUR MOBILE)
   ========================================================== */
@media screen and (max-width: 768px) {
    .recherche-container-box {
        padding: 8px 12px !important;
    }

    .recherche-form {
        max-width: 100% !important; /* Reprend toute la largeur sur ton Pixel 7 */
    }

    .barre-recherche-wrapper {
        height: 42px !important;
        padding-left: 36px !important;
    }

    .search-input-icon-left {
        left: 12px !important;
        font-size: 14px !important;
    }

    .search-input-field {
        font-size: 13px !important;
    }

    .btn-recherche-submit-modern {
        height: 36px !important;
        padding: 0 16px !important;
        font-size: 12px !important;
    }
}


/* ==========================================================
   PAGE RECHERCHE : CONFIGURATIONS VISUELLES ADAPTÉES
   ========================================================== */

.produits-wrapper-global {
    max-width: 1200px !important;
    margin: 40px auto !important;
    padding: 0 20px !important;
    box-sizing: border-box !important;
}

.search-header-box {
    margin-bottom: 24px !important;
    padding-bottom: 12px !important;
    border-bottom: 1px solid #f1f5f9 !important;
}

.search-header-box h2 {
    font-size: 22px !important;
    font-weight: 800 !important;
    color: var(--text-dark) !important;
    margin: 0 !important;
}

.search-subtitle {
    font-size: 14px !important;
    color: var(--text-muted) !important;
    margin: 4px 0 0 0 !important;
}

/* Zone d'encadrement d'image dédiée à la recherche */
.search-img-box {
    width: 100% !important;
    height: 180px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    background-color: #f8fafc !important;
    border-radius: 8px !important;
    overflow: hidden !important;
    padding: 10px !important;
    box-sizing: border-box !important;
}

.search-img-box img {
    max-width: 100% !important;
    max-height: 100% !important;
    object-fit: contain !important;
}

.search-info-content {
    padding: 12px 4px 0 4px !important;
    display: flex !important;
    flex-direction: column !important;
    flex-grow: 1 !important;
}

/* ÉCRAN DE RECHERCHE VIDE STYLISÉ */
.recherche-vide-box-premium {
    grid-column: 1 / -1 !important; /* Occupe toute la largeur de la grille */
    text-align: center !important;
    padding: 60px 20px !important;
    color: #64748b !important;
}

.search-empty-icon-circle {
    width: 80px !important;
    height: 80px !important;
    background-color: #f1f5f9 !important;
    color: #94a3b8 !important;
    border-radius: 50px !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    font-size: 28px !important;
    margin-bottom: 20px !important;
}

.recherche-vide-box-premium h2 {
    font-size: 20px !important;
    font-weight: 800 !important;
    color: #1e293b !important;
    margin: 0 0 8px 0 !important;
}

.recherche-vide-box-premium p {
    font-size: 14px !important;
    color: #64748b !important;
    margin: 0 0 24px 0 !important;
    max-width: 500px !important;
    margin-left: auto !important;
    margin-right: auto !important;
    line-height: 1.5 !important;
}

/* ==========================================================
   AJUSTEMENTS MOBILE RESPONSIVE TACTILE
   ========================================================== */
@media screen and (max-width: 768px) {
    .produits-wrapper-global {
        margin: 20px auto !important;
        padding: 0 12px !important;
    }

    .search-header-box h2 {
        font-size: 18px !important;
    }

    .search-img-box {
        height: 140px !important;
    }
}


/* ==========================================================
   SÉCURISATION DU SLIDER ET ÉRADICATION DU SCROLL HORIZONTAL
   ========================================================== */

/* Verrouillage ultime au niveau le plus haut de la page */
html, body {
    max-width: 100% !important;
    overflow-x: hidden !important;
    position: relative !important;
}

/* Le conteneur du slider DOIT agir comme une boîte fermée à clé */
.slider-container {
    width: 100% !important;
    max-width: 1400px !important;
    height: 400px !important; /* Hauteur sur ordinateur */
    margin: 15px auto 0 auto !important;
    position: relative !important;
    
    /* Propriétés magiques anti-débordement horizontal */
    overflow: hidden !important; 
    contain: paint !important; /* Force le navigateur à ne pas dessiner ou calculer ce qui sort de la boîte */
}

/* Le ruban qui se déplace grâce au JavaScript */
.slider {
    display: flex !important;
    width: 100% !important;
    height: 100% !important;
    will-change: transform !important; /* Optimise la fluidité de l'animation JavaScript sur mobile */
}

/* Chaque slide individuel */
.slide {
    flex: 0 0 100% !important;
    width: 100% !important;
    max-width: 100% !important;
    height: 100% !important;
    position: relative !important;
}

.slide img {
    width: 100% !important;
    height: 100% !important;
    object-fit: cover !important;
    object-position: center !important;
}

/* ==========================================================
   AJUSTEMENTS MOBILES SPECIFIQUES (IPHONE & PIXEL)
   ========================================================== */
@media screen and (max-width: 768px) {
    .slider-container {
        height: 220px !important; /* Ajustement de la hauteur sur écran de téléphone */
        border-radius: 0 !important; /* Pleine largeur sur mobile pour éviter les petits espaces sur les côtés */
    }
}

/* ==========================================================
   ACCUEIL : GRILLE ET CARTES DE CATÉGORIES
   ========================================================== */
.page-boutique-background {
    background-color: #ffffff !important;
    padding: 30px 20px 60px 20px !important;
    width: 100% !important;
    max-width: 1440px !important; /* Verrouille l'étirement sur les écrans ultra-larges 4K */
    margin: 0 auto !important;
    box-sizing: border-box !important;
}

.grille-categories-clean {
    width: 100% !important;
    display: grid !important;
    grid-template-columns: repeat(4, 1fr) !important; /* 4 colonnes strictes sur ordinateur */
    gap: 24px !important;
    box-sizing: border-box !important;
}

.carte-categorie-clean {
    background-color: #ffffff !important;
    border: 1px solid #e5e7eb !important;
    border-radius: 8px !important;
    padding: 20px !important;
    display: flex !important;
    flex-direction: column !important;
    justify-content: space-between !important;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.02) !important;
    min-height: 340px !important;
    box-sizing: border-box !important;
    transition: transform var(--transition-fast), box-shadow var(--transition-fast) !important;
}

.carte-categorie-clean:hover {
    transform: translateY(-4px) !important;
    box-shadow: 0 12px 24px rgba(0, 0, 0, 0.06) !important;
}

.categorie-titre {
    color: var(--text-dark) !important;
    font-size: 17px !important;
    font-weight: 700 !important;
    margin: 0 0 15px 0 !important;
    text-align: left !important;
}

/* ==========================================================
   DESIGN DES CARTES DE CATÉGORIES (SANS AUCUNE DÉFORMATION)
   ========================================================== */

.carte-categorie-clean {
    background-color: #ffffff !important;
    border: 1px solid #e5e7eb !important;
    border-radius: 8px !important;
    padding: 16px !important;
    display: flex !important;
    flex-direction: column !important;
    justify-content: space-between !important;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.02) !important;
    min-height: 310px !important; /* Maintient un alignement parfait de toutes les boîtes */
    box-sizing: border-box !important;
    transition: transform var(--transition-fast), box-shadow var(--transition-fast) !important;
}

.carte-categorie-clean:hover {
    transform: translateY(-4px) !important;
    box-shadow: 0 8px 20px rgba(0, 0, 0, 0.06) !important;
}

/* Zone globale cliquable */
.categorie-carte-link {
    text-decoration: none !important;
    color: inherit !important;
    display: flex !important;
    flex-direction: column !important;
    flex: 1 !important;
}

.categorie-titre {
    color: var(--text-dark) !important;
    font-size: 16px !important;
    font-weight: 700 !important;
    margin: 0 0 12px 0 !important;
    text-align: left !important;
}

/* Boîte contenant l'image */
.categorie-image-box {
    width: 100% !important;
    height: 160px !important; /* Hauteur réservée optimale */
    margin-top: auto !important;
    margin-bottom: auto !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    overflow: hidden !important;
}

/* L'image s'ajuste au maximum sans jamais s'écraser */
.categorie-image-box img {
    width: auto !important;
    height: auto !important;
    max-width: 100% !important;
    max-height: 100% !important;
    object-fit: contain !important; /* PRÉSERVE les proportions exactes et évite les visuels mal formés */
    transition: transform var(--transition-fast) !important;
}

.carte-categorie-clean:hover .categorie-image-box img {
    transform: scale(1.04) !important;
}

/* Lien Voir la sélection */
.categorie-lien-voir {
    color: #007185 !important;
    text-decoration: none !important;
    font-size: 13px !important;
    font-weight: 600 !important;
    text-align: left !important;
    margin-top: 12px !important;
}

.categorie-lien-voir:hover {
    color: #c45500 !important;
    text-decoration: underline !important;
}

/* ==========================================================
   RÉSULTATS DE RECHERCHE & GRILLE PRODUITS RECHERCHÉS
   ========================================================== */
.bloc-resultats-recherche {
    margin: 40px 0 !important;
    padding: 24px !important;
    background: #ffffff !important;
    border-radius: 12px !important;
    border: 1px solid #e5e7eb !important;
}

.bloc-resultats-recherche h2 {
    font-size: 20px !important;
    font-weight: 700 !important;
    color: var(--text-dark) !important;
    margin: 0 0 20px 0 !important;
}

/* ==========================================================
   ADAPTATION MOBILE COMPLÈTE (IPHONE 11 PRO & PIXEL 7 SUR 2 COLONNES)
   ========================================================== */
@media screen and (max-width: 768px) {
    .carte-categorie-clean {
        min-height: 230px !important; /* Format compact parfait sur mobile */
        padding: 12px !important;
    }

    .categorie-titre {
        font-size: 14px !important;
        margin-bottom: 8px !important;
    }

    .categorie-image-box {
        height: 115px !important;
    }
    
    .categorie-lien-voir {
        font-size: 12px !important;
        margin-top: 8px !important;
    }

    /* ==========================================================
   CORRECTIF CLIC MOBILE : SUPPRESSION DE LA SURBRILLANCE BLEUE
   ========================================================== */

/* Supprime le rectangle bleu natif au clic sur les liens des catégories */
.categorie-carte-link, 
.carte-categorie-clean,
.categorie-lien-voir {
    -webkit-tap-highlight-color: transparent !important; /* Pour Chrome, Safari, et navigateurs iOS/Android */
    outline: none !important; /* Supprime la bordure de focus par défaut */
}

/* Optionnel : Si tu veux un effet de clic très discret et professionnel à la place */
.carte-categorie-clean:active {
    background-color: #f9fafb !important; /* La carte grise légèrement au moment exact où le doigt appuie */
    transform: scale(0.98) !important; /* Léger effet d'enfoncement sous le doigt */
    transition: transform 0.1s ease !important;
}
}


/* ==========================================================
   ACCUEIL : BLOC PROMOTIONS PREMIUM
   ========================================================== */
.bloc-promotions-premium {
    margin: 45px 0 !important;
    background: #ffffff !important;
    padding: 30px 24px !important;
    border-radius: 12px !important;
    border: 1px solid #f3f4f6 !important;
    box-shadow: 0 6px 24px rgba(0, 0, 0, 0.03) !important;
    box-sizing: border-box !important;
}

.promo-header-box {
    margin-bottom: 25px !important;
}

.promo-header-box h2 {
    font-size: 24px !important;
    font-weight: 800 !important;
    color: var(--text-dark) !important;
    margin: 0 0 6px 0 !important;
    display: flex !important;
    align-items: center !important;
    gap: 10px !important;
}

.font-promo-icon {
    color: #ef4444 !important;
}

.promo-subtitle {
    font-size: 14px !important;
    color: var(--text-muted) !important;
    margin: 0 !important;
}

.grille-promotions-premium {
    display: grid !important;
    grid-template-columns: repeat(4, 1fr) !important;
    gap: 20px !important;
    width: 100% !important;
}

.promo-card-premium {
    position: relative !important;
    background: #ffffff !important;
    border: 1px solid #e5e7eb !important;
    border-radius: 8px !important;
    padding: 16px !important;
    display: flex !important;
    flex-direction: column !important;
    justify-content: space-between !important;
    box-sizing: border-box !important;
    transition: transform var(--transition-fast), box-shadow var(--transition-fast) !important;
}

.promo-card-premium:hover {
    transform: translateY(-4px) !important;
    box-shadow: 0 10px 20px rgba(0, 0, 0, 0.06) !important;
}

.badge-promo-tag {
    position: absolute !important;
    top: 12px !important;
    left: 12px !important;
    background: #ef4444 !important;
    color: white !important;
    padding: 4px 8px !important;
    border-radius: 4px !important;
    font-size: 12px !important;
    font-weight: 700 !important;
    z-index: 10 !important;
}

.promo-card-clickzone {
    text-decoration: none !important;
    color: inherit !important;
    display: block !important;
}

/* ==========================================================
   OPTIMISATION DES IMAGES PROMO (`.promo-image-wrapper`)
   ========================================================== */

.promo-image-wrapper {
    width: 100% !important;
    height: 200px !important; /* Hauteur fixe et idéale sur ordinateur et écrans 4K */
    display: flex !important;
    align-items: center !important; /* Centre le produit verticalement */
    justify-content: center !important; /* Centre le produit horizontalement */
    margin-bottom: 14px !important;
    background-color: #f9fafb !important; /* Léger fond gris clair ultra-tendance */
    border-radius: 8px !important; /* Arrondit délicatement les angles de la zone image */
    overflow: hidden !important;
    padding: 10px !important; /* Espace de sécurité pour que le produit ne touche pas brutalement les bords */
    box-sizing: border-box !important;
}

/* L'IMAGE PROMO : Maximisée, nette et strictement proportionnelle */
.promo-image-wrapper img {
    width: auto !important;
    height: auto !important;
    max-width: 100% !important; /* S'adapte à la largeur max de la carte */
    max-height: 100% !important; /* S'adapte à la hauteur max du conteneur */
    object-fit: contain !important; /* GARANTIE ANTI-DÉFORMATION : Garde les proportions réelles de tes vêtements/téléphones */
    transition: transform var(--transition-fast) !important;
}

/* Effet dynamique premium au survol de la carte promotionnelle */
.promo-card-premium:hover .promo-image-wrapper img {
    transform: scale(1.03) !important;
}
/* ==========================================================
   CORRECTIF GLOBAL : SUPPRESSION DU CLIC BLEU SUR LES PROMOS
   ========================================================== */

/* Ajout ciblé des classes réelles de ton projet Vendo */
.promo-card-premium,
.promo-card-premium a,
.promo-image-wrapper,
.promo-image-wrapper img,
.promotions a,
.promo-link,
.banner-link,
.carte-promo,
.promotions img {
    -webkit-tap-highlight-color: transparent !important;
    -webkit-touch-callout: none !important; /* Désactive aussi le menu contextuel sur iOS */
    outline: none !important;
    text-decoration: none !important;
}

/* ==========================================================
   ADAPTATION MOBILE (IPHONE 11 PRO / PIXEL 7 COMPACT)
   ========================================================== */
@media screen and (max-width: 768px) {
    .promo-image-wrapper {
        height: 135px !important; /* Hauteur ajustée pour les petits écrans de smartphone */
        padding: 8px !important;
        margin-bottom: 10px !important;
    }
}

.promo-product-title {
    font-size: 15px !important;
    font-weight: 600 !important;
    color: var(--text-dark) !important;
    margin: 0 0 12px 0 !important;
    text-align: left !important;
    line-height: 1.4 !important;
    height: 42px !important;
    overflow: hidden !important;
    display: -webkit-box !important;
    -webkit-line-clamp: 2 !important;
    -webkit-box-orient: vertical !important;
}

.promo-card-footer {
    margin-top: auto !important;
    display: flex !important;
    flex-direction: column !important;
    gap: 12px !important;
}

.promo-prices-box {
    display: flex !important;
    align-items: baseline !important;
    gap: 8px !important;
}

.promo-price-new {
    color: var(--primary-color) !important;
    font-weight: 700 !important;
    font-size: 17px !important;
}

.promo-price-old {
    text-decoration: line-through !important;
    color: var(--text-muted) !important;
    font-size: 13px !important;
}

.btn-panier-promo {
    width: 100% !important;
    background: var(--primary-color) !important;
    color: white !important;
    border: none !important;
    padding: 10px 12px !important;
    border-radius: 6px !important;
    font-size: 14px !important;
    font-weight: 600 !important;
    cursor: pointer !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 8px !important;
    transition: background var(--transition-fast) !important;
}

.btn-panier-promo:hover {
    background: var(--primary-hover) !important;
}

/* ==========================================================
   RESPONSIVE SMARTPHONES COMPLET (IPHONE 11 PRO TARGET)
   ========================================================== */
@media screen and (max-width: 768px) {
    
    .page-boutique-background {
        padding: 20px 12px 40px 12px !important;
    }

    /* Force l'affichage en 2 colonnes ultra équilibrées */
    .grille-categories-clean,
    .grille-promotions-premium {
        grid-template-columns: repeat(2, 1fr) !important;
        gap: 12px !important;
    }

    .carte-categorie-clean,
    .promo-card-premium {
        min-height: 260px !important;
        padding: 12px !important;
    }

    .categorie-titre,
    .promo-product-title {
        font-size: 14px !important;
        height: 38px !important;
        margin-bottom: 8px !important;
    }

    .categorie-image-box {
        width: 100% !important;
        height: 150px !important;
        margin-bottom: 12px !important;
    }
    

    .bloc-promotions-premium {
        padding: 20px 12px !important;
        margin: 30px 0 !important;
    }

    .promo-header-box h2 {
        font-size: 19px !important;
    }

    .promo-price-new {
        font-size: 15px !important;
    }

    .btn-panier-promo {
        padding: 8px !important;
        font-size: 13px !important;
    }
}

/* Fixation pour les écrans 4K géants (Conserve le ratio idéal) */
@media screen and (min-width: 2560px) {
    .slider-container {
        height: 500px !important; /* Donne plus de visibilité aux bannières en ultra HD */
    }
}

/* ==========================================================
   CORRECTIF SÉCURITÉ ANTI-OVERFLOW ET IMAGES MAXIMISÉES
   ========================================================== */

/* Bloque radicalement tout débordement horizontal sur l'ensemble du site */
html, body {
    max-width: 100% !important;
    overflow-x: hidden !important;
}

/* Fixation stricte du conteneur du slider pour empêcher ses enfants de déborder */
.slider-container {
    max-width: 1400px !important;
    overflow: hidden !important; /* Empêche les slides invisibles de dépasser à droite */
    position: relative !important;
}

/* Ajustement du slider pour qu'il respecte strictement la largeur parente */
.slider {
    display: flex !important;
    width: 100% !important;
}

.slide {
    flex: 0 0 100% !important;
    width: 100% !important;
    max-width: 100% !important;
}

/* ==========================================================
   ADAPTATION MOBILE PUISSANTE (PIXEL 7, IPHONE 12 PRO, SE)
   ========================================================== */
@media screen and (max-width: 768px) {
    
    /* On s'assure que le conteneur principal ne génère pas de marge parasite */
    .page-boutique-background {
        padding: 20px 8px 40px 8px !important; /* On réduit à 8px pour donner plus de place aux cartes */
        overflow: hidden !important;
    }

    /* Optimisation de la grille sur petit écran */
    .grille-categories-clean,
    .grille-promotions-premium {
        grid-template-columns: repeat(2, 1fr) !important;
        gap: 8px !important; /* Espace réduit au minimum pour maximiser les blocs */
        width: 100% !important;
    }

    /* On donne plus de liberté à la carte */
    .carte-categorie-clean {
        min-height: 230px !important; /* Hauteur ajustée pour un look plus carré et compact */
        padding: 10px !important; /* Moins de rembourrage = plus de place pour le produit */
    }

    /* AGRANDISSEMENT DE L'IMAGE CATÉGORIE */
    .categorie-image-box {
        width: 100% !important;
        height: 135px !important; /* Augmentation de la hauteur exploitable */
        margin-bottom: 8px !important;
    }

    .categorie-image-box img {
        width: 100% !important;
        height: 100% !important;
        object-fit: contain !important; /* L'image utilise désormais 100% de la largeur disponible */
    }

    .categorie-titre {
        font-size: 13px !important;
        font-weight: 700 !important;
        margin: 0 0 6px 0 !important;
        line-height: 1.2 !important;
    }

    .categorie-lien-voir {
        font-size: 11px !important;
    }
}

/* ==========================================================
   FICHE DETAIL PRODUIT : DISPOSITION GENERALE
   ========================================================== */
.detail-produit {
    display: flex !important;
    flex-wrap: wrap !important;
    gap: 40px !important;
    max-width: 1200px !important; /* Verrouille l'élargissement excessif sur écran 4K */
    margin: 30px auto !important;
    padding: 0 20px !important;
    box-sizing: border-box !important;
}

/* Deux grands blocs équilibrés sur ordinateur (50% / 50% moins le gap) */
.galerie-produit {
    flex: 1 1 500px !important;
    display: flex !important;
    flex-direction: column !important;
    gap: 16px !important;
}

.info-produit {
    flex: 1 1 450px !important;
    display: flex !important;
    flex-direction: column !important;
    gap: 20px !important;
}

/* ==========================================================
   GALERIE D'IMAGES ET MINIATURES (SUPPORT SWIPE)
   ========================================================== */
.image-principale-container {
    width: 100% !important;
    height: 480px !important;
    background-color: #f9fafb !important;
    border: 1px solid #e5e7eb !important;
    border-radius: 12px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    overflow: hidden !important;
    padding: 20px !important;
    box-sizing: border-box !important;
    user-select: none !important;
}

#image-principale {
    max-width: 100% !important;
    max-height: 100% !important;
    object-fit: contain !important;
    transition: transform 0.3s ease !important;
}

.miniatures {
    display: flex !important;
    flex-wrap: wrap !important;
    gap: 12px !important;
}

.miniatures img {
    width: 75px !important;
    height: 75px !important;
    object-fit: contain !important;
    background-color: #f9fafb !important;
    border: 2px solid #e5e7eb !important;
    border-radius: 8px !important;
    cursor: pointer !important;
    padding: 6px !important;
    box-sizing: border-box !important;
    transition: border-color var(--transition-fast), transform var(--transition-fast) !important;
}

.miniatures img:hover {
    transform: translateY(-2px) !important;
}

.miniatures img.active {
    border-color: var(--primary-color) !important;
    background-color: #ffffff !important;
}

/* ==========================================================
   CONTENU DES INFORMATIONS, PRIX & RATING
   ========================================================== */
.info-produit h1 {
    font-size: 28px !important;
    font-weight: 800 !important;
    color: var(--text-dark) !important;
    margin: 0 !important;
    line-height: 1.2 !important;
}

.rating-display-box {
    display: flex !important;
    align-items: center !important;
    gap: 8px !important;
    font-size: 15px !important;
    font-weight: 600 !important;
}

.stars-gold, .stars-gold-display {
    color: #f59e0b !important; /* Doré or pour les avis validés */
    letter-spacing: 2px !important;
}

.rating-count {
    color: #64748b !important;
}

.no-rating-yet {
    color: #94a3b8 !important;
}

.prix-produit {
    font-size: 26px !important;
    font-weight: 800 !important;
    color: var(--primary-color) !important;
}

.categorie-tag {
    font-size: 14px !important;
    color: #475569 !important;
    margin: 5px 0 !important;
}

/* ==========================================================
   BLOC REASSURANCE CLIENTS (LIVRAISON & RETOURS)
   ========================================================== */
.bloc-reassurance-premium {
    background-color: #f8fafc !important;
    border: 1px solid #e2e8f0 !important;
    border-radius: 10px !important;
    padding: 16px !important;
    margin: 10px 0 !important;
    display: flex !important;
    flex-direction: column !important;
    gap: 14px !important;
}

.reassurance-item {
    display: flex !important;
    align-items: center !important;
    gap: 14px !important;
}

.reassurance-item i {
    font-size: 20px !important;
    color: #16a34a !important; /* Ton vert Vendo */
    width: 24px !important;
    text-align: center !important;
}

.reassurance-item strong {
    font-size: 14px !important;
    color: #1e293b !important;
    display: block !important;
}

.reassurance-item p {
    font-size: 12px !important;
    color: #64748b !important;
    margin: 2px 0 0 0 !important;
}

/* ==========================================================
   GROUPES DE VARIANTES (BOUTONS COULEURS, STOCKAGES...)
   ========================================================== */
.bloc-variante {
    display: flex !important;
    flex-direction: column !important;
    gap: 10px !important;
}

.bloc-variante h3 {
    font-size: 13px !important;
    text-transform: uppercase !important;
    letter-spacing: 0.5px !important;
    color: var(--text-muted) !important;
    margin: 0 !important;
}

.liste-variantes {
    display: flex !important;
    flex-wrap: wrap !important;
    gap: 10px !important;
}

.variante-btn {
    background-color: #ffffff !important;
    border: 1px solid #d1d5db !important;
    color: var(--text-dark) !important;
    padding: 10px 18px !important;
    font-size: 14px !important;
    font-weight: 600 !important;
    border-radius: 6px !important;
    cursor: pointer !important;
    transition: all var(--transition-fast) !important;
}

.variante-btn:hover {
    border-color: var(--text-dark) !important;
    background-color: #f9fafb !important;
}

.variante-btn.active {
    border-color: var(--primary-color) !important;
    color: var(--primary-color) !important;
    background-color: rgba(22, 163, 74, 0.05) !important;
    box-shadow: 0 0 0 1px var(--primary-color) !important;
}

/* ==========================================================
   ACTIONS PRODUIT MODERNES (ICÔNES ET DESIGN COMPACT)
   ========================================================== */
.actions-produit-modern {
    display: flex !important;
    align-items: center !important;
    gap: 12px !important;
    margin-top: 15px !important;
    width: 100% !important;
}

.form-action-btn {
    flex: 1 !important; /* Répartition équitable des boutons d'action */
    margin: 0 !important;
}

.btn-modern-action {
    width: 100% !important;
    padding: 14px 20px !important;
    font-size: 15px !important;
    font-weight: 700 !important;
    border-radius: 8px !important;
    border: none !important;
    cursor: pointer !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 10px !important;
    transition: background-color 0.2s ease, transform 0.1s ease !important;
    box-sizing: border-box !important;
}

.btn-modern-action:active {
    transform: scale(0.98) !important;
}

/* Styles individuels des boutons */
.btn-buy-now {
    background-color: #111827 !important; /* Noir chic */
    color: #ffffff !important;
}
.btn-buy-now:hover { background-color: #1f2937 !important; }

.btn-add-cart {
    background-color: #16a34a !important; /* Vert Vendo */
    color: #ffffff !important;
}
.btn-add-cart:hover { background-color: #15803d !important; }

.fav-action-link {
    display: inline-block !important;
}


/* ==========================================================
   BOUTON FAVORIS NATIF : ALIGNEMENT ET CENTRAGE PARFAIT
   ========================================================== */
.btn-add-fav {
    background-color: #e2e8f0 !important; /* Ton fond gris clair actuel */
    color: #64748b !important;
    padding: 0 !important;                /* On passe le padding à 0 pour laisser le flex centrer */
    width: 50px !important;
    height: 50px !important;
    display: inline-flex !important;      /* Aligne parfaitement en ligne avec les boutons */
    align-items: center !important;       /* Centre l'icône verticalement à 100% */
    justify-content: center !important;    /* Centre l'icône horizontalement à 100% */
    font-size: 20px !important;           /* Taille ajustée pour l'icône du projet */
    border-radius: 10px !important;       /* Coins arrondis premium et doux */
    border: none !important;
    cursor: pointer !important;
    box-sizing: border-box !important;
    transition: background-color 0.2s, transform 0.1s !important;
}

/* Effet au survol ou au clic */
.btn-add-fav:hover {
    background-color: #cbd5e1 !important; /* Devient un peu plus sombre et élégant au survol */
    transform: scale(1.05) !important;
}

.btn-add-fav:active {
    transform: scale(0.95) !important;
}
/* Rupture de stock version moderne */
.btn-rupture-modern {
    width: 100% !important;
    padding: 14px !important;
    background-color: #f1f5f9 !important;
    color: #94a3b8 !important;
    border: none !important;
    border-radius: 8px !important;
    font-weight: 700 !important;
    font-size: 15px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 8px !important;
    cursor: not-allowed !important;
}

/* ==========================================================
   SECTIONS TEXTUELLES (DESCRIPTION & AVIS)
   ========================================================== */
.avis-section {
    max-width: 1200px !important;
    margin: 30px auto !important;
    padding: 30px 20px !important;
    background-color: #ffffff !important;
    border-top: 1px solid #f3f4f6 !important;
    box-sizing: border-box !important;
}

.avis-section h2 {
    font-size: 20px !important;
    font-weight: 700 !important;
    color: var(--text-dark) !important;
    margin: 0 0 16px 0 !important;
}

.description-text {
    font-size: 15px !important;
    color: #374151 !important;
    line-height: 1.6 !important;
    margin: 0 !important;
}

/* Formulaire d'avis et étoiles cliquables */
.avis-form {
    display: flex !important;
    flex-direction: column !important;
    gap: 14px !important;
    max-width: 600px !important;
}

.stars-rating-form {
    display: flex !important;
    gap: 8px !important;
    margin: 4px 0 10px 0 !important;
}

.star-select {
    font-size: 26px !important;
    cursor: pointer !important;
    color: #94a3b8 !important; /* Gris de base */
    transition: transform 0.1s ease, color 0.1s ease !important;
}

.star-select:hover {
    transform: scale(1.15) !important;
}

.auth-required-notice {
    color: #64748b !important;
    font-size: 14px !important;
    background-color: #f8fafc !important;
    padding: 12px 16px !important;
    border-radius: 6px !important;
    display: inline-block !important;
}

.avis-form textarea {
    width: 100% !important;
    border: 1px solid #d1d5db !important;
    border-radius: 6px !important;
    padding: 12px !important;
    font-size: 15px !important;
    outline: none !important;
    box-sizing: border-box !important;
    background-color: #f9fafb !important;
    transition: border-color var(--transition-fast) !important;
}

.avis-form textarea:focus {
    border-color: #16a34a !important;
    background-color: #ffffff !important;
}

.btn-submit-review {
    align-self: flex-start !important;
    background-color: #16a34a !important;
    color: white !important;
    border: none !important;
    padding: 12px 24px !important;
    font-size: 15px !important;
    font-weight: 600 !important;
    border-radius: 6px !important;
    cursor: pointer !important;
    transition: background-color var(--transition-fast) !important;
}

.btn-submit-review:hover { background-color: #15803d !important; }

/* Liste des avis clients */
.avis-item {
    padding: 16px 0 !important;
}

.avis-item-header {
    display: flex !important;
    justify-content: space-between !important;
    align-items: center !important;
    margin-bottom: 6px !important;
}

.avis-item h4 {
    margin: 0 !important;
    font-size: 15px !important;
    color: var(--text-dark) !important;
}

.avis-item small {
    color: #94a3b8 !important;
    font-size: 13px !important;
}

.commentaire-content {
    margin: 8px 0 0 0 !important;
    color: #475569 !important;
}

.no-reviews {
    color: #64748b !important;
    font-style: italic !important;
}

/* ==========================================================
   MODALE DE ZOOM GRAND ÉCRAN
   ========================================================== */
.modal {
    display: none; 
    position: fixed !important;
    z-index: 1000000 !important;
    left: 0 !important;
    top: 0 !important;
    width: 100% !important;
    height: 100% !important;
    background-color: rgba(17, 24, 39, 0.95) !important;
}

.modal-content-container {
    width: 100% !important;
    height: 100% !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
}

.modal-content {
    max-width: 90% !important;
    max-height: 90% !important;
    object-fit: contain !important;
    cursor: zoom-in !important;
    transition: transform 0.3s ease !important;
}

.modal-content.zoomed {
    transform: scale(1.5) !important;
    cursor: zoom-out !important;
}

.close-modal {
    position: absolute !important;
    top: 20px !important;
    right: 30px !important;
    color: #ffffff !important;
    font-size: 40px !important;
    font-weight: bold !important;
    cursor: pointer !important;
    z-index: 1000002 !important;
}

/* ==========================================================
   PRODUITS SIMILAIRES (BAS DE PAGE)
   ========================================================== */
.produits {
    max-width: 1200px !important;
    margin: 40px auto !important;
    padding: 0 20px !important;
    box-sizing: border-box !important;
}

.titre-section {
    font-size: 22px !important;
    font-weight: 700 !important;
    color: var(--text-dark) !important;
    margin-bottom: 20px !important;
}

.grille-produits {
    display: grid !important;
    grid-template-columns: repeat(4, 1fr) !important;
    gap: 20px !important;
}

.carte-produit {
    background: #ffffff !important;
    border: 1px solid #e5e7eb !important;
    border-radius: 8px !important;
    padding: 16px !important;
    text-align: left !important;
    display: flex !important;
    flex-direction: column !important;
    box-sizing: border-box !important;
}

.similaire-img-box {
    width: 100% !important;
    height: 160px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    margin-bottom: 12px !important;
    overflow: hidden !important;
}

.carte-produit img {
    max-width: 100% !important;
    max-height: 100% !important;
    object-fit: contain !important;
}

.carte-produit h3 {
    font-size: 15px !important;
    margin: 0 0 8px 0 !important;
}

.carte-produit h3 a {
    color: var(--text-dark) !important;
    text-decoration: none !important;
}

.carte-produit strong {
    font-size: 16px !important;
    color: var(--primary-color) !important;
    margin-top: auto !important;
}

/* ==========================================================
   ADAPTATION MOBILE FINALE (IPHONE 11 PRO / PIXEL 7 STABLE)
   ========================================================== */
@media screen and (max-width: 768px) {
    .detail-produit {
        gap: 24px !important;
        margin: 15px auto !important;
        padding: 0 12px !important;
    }

    .image-principale-container {
        height: 320px !important; /* Optimisé pour le glissement tactile */
        padding: 10px !important;
    }

    .miniatures img {
        width: 60px !important;
        height: 60px !important;
    }

    .info-produit h1 {
        font-size: 22px !important;
    }

    .prix-produit {
        font-size: 22px !important;
    }

    /* BARRE FLOTTANTE FIXE EN BAS SUR SMARTPHONE (STYLE AMAZON PREMIUM) */
    .actions-produit-modern {
        position: fixed !important;
        bottom: 0 !important;
        left: 0 !important;
        width: 100vw !important;
        background-color: #ffffff !important;
        padding: 12px 16px !important;
        box-shadow: 0 -6px 22px rgba(0, 0, 0, 0.08) !important;
        margin: 0 !important;
        z-index: 9999 !important;
        box-sizing: border-box !important;
        justify-content: space-between !important;
    }

    .btn-modern-action {
        padding: 14px 12px !important;
        font-size: 14px !important;
    }

    /* Empêche les boutons de cacher le contenu du bas de la page */
    body {
        padding-bottom: 90px !important;
    }

    .variante-btn {
        padding: 8px 14px !important;
        font-size: 13px !important;
    }

    .btn-submit-review {
        align-self: stretch !important; /* Prend tout l'espace sur mobile */
        text-align: center !important;
    }

    .grille-produits {
        grid-template-columns: repeat(2, 1fr) !important;
        gap: 12px !important;
    }

    .similaire-img-box {
        height: 120px !important;
    }
}



/* ==========================================================
   PAGE DE PAIEMENT & CHECKOUT MODERNE
   ========================================================== */

.checkout-wrapper {
    max-width: 1100px !important;
    margin: 40px auto !important;
    padding: 0 20px !important;
    box-sizing: border-box !important;
}

.checkout-main-title {
    font-size: 24px !important;
    font-weight: 800 !important;
    color: var(--text-dark) !important;
    margin-bottom: 30px !important;
}

.checkout-main-title i {
    color: #16a34a !important; /* Vert de confiance */
}

/* Grille principale à deux compartiments */
.paiement-container-grid {
    display: grid !important;
    grid-template-columns: 1.6fr 1fr !important;
    gap: 30px !important;
    align-items: start !important;
}

.paiement-options-side h3,
.recap-checkout-side h3 {
    font-size: 16px !important;
    font-weight: 700 !important;
    color: #1e293b !important;
    margin: 0 0 16px 0 !important;
}

/* Grille verticale des choix de paiement */
.mode-paiement-grid {
    display: flex !important;
    flex-direction: column !important;
    gap: 14px !important;
    margin-bottom: 24px !important;
}

/* Masquage du bouton radio classique moche */
.radio-hidden-input {
    position: absolute !important;
    opacity: 0 !important;
    width: 0 !important;
    height: 0 !important;
}

/* La carte de paiement cliquable */
.method-card-label {
    display: block !important;
    cursor: pointer !important;
    -webkit-tap-highlight-color: transparent !important; /* Anti-flash bleu */
}

.method-card-content {
    background: #ffffff !important;
    border: 2px solid #e2e8f0 !important;
    border-radius: 10px !important;
    padding: 16px 20px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    transition: all 0.2s ease !important;
    box-sizing: border-box !important;
}

/* État de la carte sélectionnée */
.method-card-label.selected .method-card-content {
    border-color: #16a34a !important; /* Devient vert Vendo */
    background-color: #f0fdf4 !important; /* Léger voile vert */
}

.method-card-label.selected .check-indicator {
    color: #16a34a !important;
}

/* Aligne l'icône et le texte à l'intérieur */
.method-icon-title {
    display: flex !important;
    align-items: center !important;
    gap: 14px !important;
    font-size: 15px !important;
    font-weight: 600 !important;
    color: #1e293b !important;
}

.method-icon {
    font-size: 20px !important;
    width: 24px !important;
    text-align: center !important;
}

/* Couleurs spécifiques des modes de paiement */
.wave-color { color: #1d4ed8 !important; }        /* Bleu Wave */
.orange-color { color: #ff6600 !important; }      /* Orange OM */
.delivery-color { color: #475569 !important; }    /* Gris Slate livraison */

.check-indicator {
    font-size: 18px !important;
    transition: color 0.2s !important;
}

/* Bouton de validation final */
.btn-submit-checkout {
    width: 100% !important;
    padding: 16px !important;
    background-color: #111827 !important; /* Noir pro */
    color: #ffffff !important;
    font-size: 16px !important;
    font-weight: 700 !important;
    border: none !important;
    border-radius: 8px !important;
    cursor: pointer !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 10px !important;
    transition: background-color 0.2s !important;
}

.btn-submit-checkout:hover {
    background-color: #1f2937 !important;
}

/* ==========================================================
   BLOC DROIT : RECAPITULATIF DE CAISSE
   ========================================================== */
.recap-sticky-card {
    background: #ffffff !important;
    border: 1px solid #e2e8f0 !important;
    border-radius: 12px !important;
    padding: 24px !important;
    box-sizing: border-box !important;
}

.recap-row {
    display: flex !important;
    justify-content: space-between !important;
    align-items: center !important;
    font-size: 14px !important;
    color: #475569 !important;
    margin: 12px 0 !important;
}

.recap-row strong {
    color: #1e293b !important;
}

.delivery-free-tag {
    font-size: 12px !important;
    color: #64748b !important;
    font-style: italic !important;
}

.recap-divider {
    height: 1px !important;
    background-color: #e2e8f0 !important;
    margin: 16px 0 !important;
}

.total-row {
    font-size: 16px !important;
    font-weight: 700 !important;
    color: #1e293b !important;
    margin-bottom: 20px !important;
}

.total-price-display {
    font-size: 20px !important;
    font-weight: 800 !important;
    color: #16a34a !important; /* Vert pour le prix final */
}

.secure-badge-notice {
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 8px !important;
    font-size: 12px !important;
    color: #64748b !important;
    background-color: #f8fafc !important;
    padding: 10px !important;
    border-radius: 6px !important;
}

.secure-badge-notice i {
    color: #16a34a !important;
}

/* ==========================================================
   RESPONSIVE SMARTPHONE (PIXEL 7 & IPHONE FOCUS)
   ========================================================== */
@media screen and (max-width: 768px) {
    .checkout-wrapper {
        margin: 20px auto !important;
        padding: 0 14px !important;
    }

    .paiement-container-grid {
        grid-template-columns: 1fr !important; /* Passage sur une seule colonne */
        gap: 24px !important;
    }

    /* On remonte visuellement le résumé de la commande en premier sur mobile */
    .recap-checkout-side {
        grid-row: 1 !important;
    }

    .checkout-main-title {
        font-size: 20px !important;
        margin-bottom: 20px !important;
    }

    .method-card-content {
        padding: 14px 16px !important;
    }
}

/* ==========================================================
   PAGE SUIVI DES COMMANDES : STYLE DESIGN PREMIUM
   ========================================================== */

.commandes-wrapper {
    max-width: 1000px !important;
    margin: 40px auto !important;
    padding: 0 20px !important;
    box-sizing: border-box !important;
}

.commandes-main-title {
    font-size: 24px !important;
    font-weight: 800 !important;
    color: var(--text-dark) !important;
    margin-bottom: 30px !important;
    display: flex !important;
    align-items: center !important;
    gap: 12px !important;
}

.commandes-main-title i {
    color: var(--primary-color) !important;
}

.commandes-list-container {
    display: flex !important;
    flex-direction: column !important;
    gap: 28px !important;
}

/* La carte de commande unique */
.commande-card-modern {
    background: #ffffff !important;
    border: 1px solid #e2e8f0 !important;
    border-radius: 14px !important;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.02) !important;
    overflow: hidden !important;
    display: flex !important;
    flex-direction: column !important;
    box-sizing: border-box !important;
}

/* En-tête de carte avec fond doux */
.commande-card-header {
    background-color: #f8fafc !important;
    padding: 16px 24px !important;
    border-bottom: 1px solid #e2e8f0 !important;
    display: flex !important;
    justify-content: space-between !important;
    align-items: center !important;
    flex-wrap: wrap !important;
    gap: 12px !important;
}

.commande-card-header h2 {
    font-size: 16px !important;
    font-weight: 700 !important;
    color: #1e293b !important;
    margin: 0 !important;
}

.commande-date-span {
    font-size: 13px !important;
    color: #64748b !important;
    display: flex !important;
    align-items: center !important;
    gap: 6px !important;
    margin-top: 4px !important;
}

/* GENERATEUR DE BADGES DE STATUT */
.badge-status {
    padding: 6px 14px !important;
    font-size: 13px !important;
    font-weight: 700 !important;
    border-radius: 50px !important;
    display: inline-flex !important;
    align-items: center !important;
    gap: 6px !important;
}

.status-waiting { background-color: #fef3c7 !important; color: #d97706 !important; }   /* Jaune ambre */
.status-confirmed { background-color: #dcfce7 !important; color: #15803d !important; } /* Vert Vendo */
.status-shipped { background-color: #e0f2fe !important; color: #0369a1 !important; }   /* Bleu ciel */
.status-delivered { background-color: #f0fdf4 !important; color: #16a34a !important; } /* Vert clair */
.status-cancelled { background-color: #fee2e2 !important; color: #b91c1c !important; } /* Rouge vif */

/* Informations de facturation et de livraison */
.commande-card-body-grid {
    padding: 20px 24px !important;
    display: grid !important;
    grid-template-columns: repeat(3, 1fr) !important;
    gap: 20px !important;
    border-bottom: 1px solid #f1f5f9 !important;
    background-color: #ffffff !important;
}

.info-delivery-block p {
    font-size: 14px !important;
    color: #475569 !important;
    margin: 6px 0 !important;
    line-height: 1.5 !important;
}

.info-delivery-block p i {
    width: 18px !important;
    color: #94a3b8 !important;
}

/* Zone récap total bloc droite */
.total-block-card {
    display: flex !important;
    flex-direction: column !important;
    align-items: flex-end !important;
    justify-content: center !important;
}

.total-label {
    font-size: 12px !important;
    text-transform: uppercase !important;
    letter-spacing: 0.5px !important;
    color: #64748b !important;
}

.total-value-display {
    font-size: 20px !important;
    font-weight: 800 !important;
    color: #1e293b !important;
    margin-top: 4px !important;
}

/* Section intermédiaire des sous-produits achetés */
.commande-products-section {
    padding: 20px 24px !important;
    background-color: #ffffff !important;
}

.commande-products-section h3 {
    font-size: 14px !important;
    color: #64748b !important;
    text-transform: uppercase !important;
    letter-spacing: 0.5px !important;
    margin: 0 0 14px 0 !important;
}

.commande-items-list {
    display: flex !important;
    flex-direction: column !important;
    gap: 16px !important;
}

/* Ligne d'un produit */
.item-product-row {
    display: flex !important;
    align-items: center !important;
    gap: 16px !important;
    padding-bottom: 16px !important;
    border-bottom: 1px dashed #e2e8f0 !important;
}

.item-product-row:last-child {
    padding-bottom: 0 !important;
    border-bottom: none !important;
}

.item-product-img-box {
    width: 65px !important;
    height: 65px !important;
    background-color: #f8fafc !important;
    border: 1px solid #e2e8f0 !important;
    border-radius: 8px !important;
    overflow: hidden !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    flex-shrink: 0 !important;
}

.item-product-img-box img {
    max-width: 90% !important;
    max-height: 90% !important;
    object-fit: contain !important;
}

.item-product-details {
    flex: 1 !important;
}

.item-product-details h4 {
    margin: 0 0 6px 0 !important;
    font-size: 15px !important;
    font-weight: 600 !important;
}

.item-product-details h4 a {
    color: #1e293b !important;
    text-decoration: none !important;
}

.item-product-details h4 a:hover {
    color: var(--primary-color) !important;
}

.item-meta-variantes {
    display: flex !important;
    flex-wrap: wrap !important;
    gap: 12px !important;
    font-size: 12px !important;
    color: #64748b !important;
}

.item-product-pricing {
    display: flex !important;
    flex-direction: column !important;
    align-items: flex-end !important;
    gap: 4px !important;
    flex-shrink: 0 !important;
}

.item-qty {
    font-size: 13px !important;
    color: #64748b !important;
}

.item-subtotal {
    font-size: 14px !important;
    font-weight: 700 !important;
    color: #1e293b !important;
}

/* Zone actions en bas de carte */
.commande-card-actions {
    padding: 14px 24px !important;
    background-color: #f8fafc !important;
    border-top: 1px solid #f1f5f9 !important;
    display: flex !important;
    justify-content: flex-end !important;
    gap: 12px !important;
}

.btn-action-link {
    text-decoration: none !important;
}

.btn-cmd-action {
    padding: 10px 16px !important;
    font-size: 13px !important;
    font-weight: 700 !important;
    border-radius: 6px !important;
    cursor: pointer !important;
    border: none !important;
    display: flex !important;
    align-items: center !important;
    gap: 8px !important;
    -webkit-tap-highlight-color: transparent !important; /* Pas de rectangle bleu */
    transition: background-color 0.2s, transform 0.1s !important;
}

.btn-cmd-action:active { transform: scale(0.98) !important; }

.btn-cmd-cancel { background-color: #fee2e2 !important; color: #ef4444 !important; }
.btn-cmd-cancel:hover { background-color: #fca5a5 !important; }

.btn-cmd-delete { background-color: #f1f5f9 !important; color: #475569 !important; }
.btn-cmd-delete:hover { background-color: #e2e8f0 !important; }

/* BOITE SI HISTORIQUE TOTALEMENT VIDE */
.commande-vide-box {
    text-align: center !important;
    padding: 60px 20px !important;
    background: #ffffff !important;
    border: 1px solid #e2e8f0 !important;
    border-radius: 14px !important;
}

.empty-icon-circle {
    width: 80px !important;
    height: 80px !important;
    background-color: #f1f5f9 !important;
    color: #94a3b8 !important;
    border-radius: 50px !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    font-size: 32px !important;
    margin-bottom: 20px !important;
}

.commande-vide-box h2 {
    font-size: 20px !important;
    font-weight: 800 !important;
    color: #1e293b !important;
    margin: 0 0 8px 0 !important;
}

.commande-vide-box p {
    font-size: 14px !important;
    color: #64748b !important;
    margin: 0 0 24px 0 !important;
}

.btn-start-shopping {
    display: inline-flex !important;
    align-items: center !important;
    gap: 8px !important;
    background-color: #111827 !important;
    color: #ffffff !important;
    padding: 12px 24px !important;
    border-radius: 8px !important;
    font-weight: 700 !important;
    font-size: 14px !important;
    text-decoration: none !important;
    transition: background-color 0.2s !important;
}

.btn-start-shopping:hover { background-color: #1f2937 !important; }

/* ==========================================================
   ADAPTATION TOTALE MOBILE (PIXEL 7 ET SMARTPHONES)
   ========================================================== */
@media screen and (max-width: 768px) {
    .commandes-wrapper {
        margin: 20px auto !important;
        padding: 0 12px !important;
    }

    .commandes-main-title {
        font-size: 20px !important;
        margin-bottom: 20px !important;
    }

    /* Le corps passe en empilement vertical */
    .commande-card-body-grid {
        grid-template-columns: 1fr !important;
        gap: 12px !important;
        padding: 16px !important;
    }

    .total-block-card {
        align-items: flex-start !important;
        background-color: #f8fafc !important;
        padding: 12px !important;
        border-radius: 8px !important;
        margin-top: 6px !important;
    }

    .commande-products-section {
        padding: 16px !important;
    }

    .commande-card-actions {
        padding: 12px 16px !important;
        flex-direction: column !important; /* Boutons l'un sur l'autre sur smartphone */
    }

    .btn-cmd-action {
        width: 100% !important;
        justify-content: center !important;
    }
}


/* ==========================================================
   PAGE MES FAVORIS : DESIGN MODERNE
   ========================================================== */

.favoris-wrapper {
    max-width: 1200px !important;
    margin: 40px auto !important;
    padding: 0 20px !important;
    box-sizing: border-box !important;
}

.favoris-main-title {
    font-size: 24px !important;
    font-weight: 800 !important;
    color: var(--text-dark) !important;
    margin-bottom: 30px !important;
    display: flex !important;
    align-items: center !important;
    gap: 12px !important;
}

.favoris-main-title i {
    color: #ef4444 !important; /* Cœur rouge favoris emblématique */
}

/* Ajustements spécifiques pour la carte favoris */
.fav-card-premium {
    display: flex !important;
    flex-direction: column !important;
    justify-content: space-between !important;
}

.fav-img-box {
    width: 100% !important;
    height: 180px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    background-color: #f8fafc !important;
    border-radius: 8px !important;
    overflow: hidden !important;
    padding: 10px !important;
    box-sizing: border-box !important;
}

.fav-img-box img {
    max-width: 100% !important;
    max-height: 100% !important;
    object-fit: contain !important;
}

.fav-info-content {
    padding: 12px 4px 8px 4px !important;
}

/* Barre d'action et bouton supprimer */
.fav-card-actions {
    margin-top: auto !important;
    padding-top: 8px !important;
}

.btn-remove-fav-link {
    text-decoration: none !important;
    display: block !important;
}

.btn-remove-fav {
    width: 100% !important;
    padding: 10px 14px !important;
    background-color: #f1f5f9 !important;
    color: #64748b !important;
    border: none !important;
    border-radius: 6px !important;
    font-size: 13px !important;
    font-weight: 700 !important;
    cursor: pointer !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 8px !important;
    -webkit-tap-highlight-color: transparent !important; /* Anti-flash bleu tactile */
    transition: background-color 0.2s, color 0.2s, transform 0.1s !important;
}

.btn-remove-fav:hover {
    background-color: #fee2e2 !important; /* Fond rouge très doux au survol */
    color: #ef4444 !important;            /* Texte et icône rouges */
}

.btn-remove-fav:active {
    transform: scale(0.98) !important;
}

/* ÉCRAN SI AUCUN FAVORI */
.favoris-vide-box {
    grid-column: 1 / -1 !important;
    text-align: center !important;
    padding: 60px 20px !important;
    color: #64748b !important;
}

.fav-empty-icon-circle {
    width: 80px !important;
    height: 80px !important;
    background-color: #f1f5f9 !important;
    color: #94a3b8 !important;
    border-radius: 50px !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    font-size: 32px !important;
    margin-bottom: 20px !important;
}

.favoris-vide-box h2 {
    font-size: 20px !important;
    font-weight: 800 !important;
    color: #1e293b !important;
    margin: 0 0 8px 0 !important;
}

.favoris-vide-box p {
    font-size: 14px !important;
    color: #64748b !important;
    margin: 0 0 24px 0 !important;
}

/* ==========================================================
   ADAPTATION MOBILE COMPACTE (PIXEL 7 / IPHONE)
   ========================================================== */
@media screen and (max-width: 768px) {
    .favoris-wrapper {
        margin: 20px auto !important;
        padding: 0 12px !important;
    }

    .favoris-main-title {
        font-size: 20px !important;
        margin-bottom: 20px !important;
    }

    .fav-img-box {
        height: 140px !important;
    }

    .btn-remove-fav {
        padding: 8px 10px !important;
        font-size: 12px !important;
    }
}

/* ==========================================================
   PAGE PANIER : ARCHITECTURE BI-COLONNE PREMIUM
   ========================================================== */

.cart-wrapper-global {
    max-width: 1200px !important;
    margin: 40px auto !important;
    padding: 0 20px !important;
    box-sizing: border-box !important;
}

.cart-main-title {
    font-size: 24px !important;
    font-weight: 800 !important;
    color: var(--text-dark) !important;
    margin-bottom: 30px !important;
    display: flex !important;
    align-items: center !important;
    gap: 12px !important;
}

.cart-main-title i {
    color: #111827 !important;
}

/* Grille principale */
.cart-layout-grid {
    display: table !important;
    width: 100% !important;
}

.cart-items-column {
    display: table-cell !important;
    width: 68% !important;
    vertical-align: top !important;
    padding-right: 32px !important;
}

.cart-summary-column {
    display: table-cell !important;
    width: 32% !important;
    vertical-align: top !important;
}

/* CARTE ARTICLE INDIVIDUELLE */
.cart-item-row-card {
    background: #ffffff !important;
    border: 1px solid #e2e8f0 !important;
    border-radius: 12px !important;
    padding: 20px !important;
    margin-bottom: 16px !important;
    display: table !important;
    width: 100% !important;
    box-sizing: border-box !important;
}

.cart-item-img-container {
    display: table-cell !important;
    width: 110px !important;
    vertical-align: top !important;
    background-color: #f8fafc !important;
    border-radius: 8px !important;
    overflow: hidden !important;
    text-align: center !important;
}

.cart-item-img-container img {
    max-width: 100% !important;
    height: 110px !important;
    object-fit: contain !important;
}

.cart-item-details-container {
    display: table-cell !important;
    vertical-align: top !important;
    padding-left: 20px !important;
}

.cart-item-header-meta {
    display: flex !important;
    justify-content: space-between !important;
    align-items: flex-start !important;
}

.cart-item-header-meta h3 {
    margin: 0 !important;
    font-size: 16px !important;
    font-weight: 700 !important;
    color: #1e293b !important;
    line-height: 1.4 !important;
}

.btn-trash-item-link {
    color: #94a3b8 !important;
    font-size: 16px !important;
    text-decoration: none !important;
    transition: color 0.2s !important;
}

.btn-trash-item-link:hover {
    color: #ef4444 !important;
}

/* Badges d'attributs */
.cart-item-attributes-grid {
    display: flex !important;
    flex-wrap: wrap !important;
    gap: 8px !important;
    margin: 10px 0 16px 0 !important;
}

.attr-badge {
    background-color: #f1f5f9 !important;
    color: #475569 !important;
    font-size: 12px !important;
    padding: 4px 10px !important;
    border-radius: 6px !important;
}

/* Zone d'action basse de la carte article */
.cart-item-footer-actions {
    display: flex !important;
    justify-content: space-between !important;
    align-items: center !important;
    margin-top: auto !important;
}

/* SÉLECTEUR DE QUANTITÉ MINIMALISTE */
.quantity-selector-modern {
    display: inline-flex !important;
    align-items: center !important;
    border: 1px solid #cbd5e1 !important;
    border-radius: 6px !important;
    overflow: hidden !important;
    background-color: #ffffff !important;
}

.qty-btn-nav {
    display: inline-block !important;
    width: 34px !important;
    height: 34px !important;
    line-height: 32px !important;
    text-align: center !important;
    color: #1e293b !important;
    font-weight: 600 !important;
    text-decoration: none !important;
    background-color: #ffffff !important;
    -webkit-tap-highlight-color: transparent !important;
    transition: background-color 0.15s !important;
}

.qty-btn-nav:hover {
    background-color: #f1f5f9 !important;
}

.qty-current-value {
    width: 36px !important;
    text-align: center !important;
    font-size: 14px !important;
    font-weight: 700 !important;
    color: #1e293b !important;
    border-left: 1px solid #e2e8f0 !important;
    border-right: 1px solid #e2e8f0 !important;
}

.cart-item-subtotal-price {
    text-align: right !important;
}

.subtotal-label-text {
    font-size: 12px !important;
    color: #64748b !important;
    margin-right: 6px !important;
}

.subtotal-value-text {
    font-size: 15px !important;
    font-weight: 700 !important;
    color: #1e293b !important;
}

/* CARTE DE RÉSUMÉ DE DROITE */
.summary-sticky-card {
    background: #ffffff !important;
    border: 1px solid #e2e8f0 !important;
    border-radius: 14px !important;
    padding: 24px !important;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.01) !important;
}

.summary-sticky-card h3 {
    margin: 0 0 20px 0 !important;
    font-size: 16px !important;
    font-weight: 800 !important;
    color: #1e293b !important;
    text-transform: uppercase !important;
    letter-spacing: 0.5px !important;
}

.summary-row-item {
    display: flex !important;
    justify-content: space-between !important;
    font-size: 14px !important;
    color: #475569 !important;
    margin-bottom: 12px !important;
}

.free-shipping-text {
    font-size: 12px !important;
    color: #64748b !important;
    font-style: italic !important;
}

.summary-divider {
    border: none !important;
    border-top: 1px solid #f1f5f9 !important;
    margin: 16px 0 !important;
}

.summary-row-total {
    display: flex !important;
    justify-content: space-between !important;
    align-items: center !important;
    margin-bottom: 24px !important;
}

.summary-row-total span {
    font-size: 15px !important;
    font-weight: 600 !important;
    color: #1e293b !important;
}

.summary-row-total strong {
    font-size: 20px !important;
    font-weight: 800 !important;
    color: #111827 !important;
}

.btn-checkout-submit-link {
    text-decoration: none !important;
    display: block !important;
}

.btn-checkout-submit {
    width: 100% !important;
    padding: 14px 20px !important;
    background-color: #111827 !important;
    color: #ffffff !important;
    border: none !important;
    border-radius: 8px !important;
    font-size: 15px !important;
    font-weight: 700 !important;
    cursor: pointer !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 10px !important;
    -webkit-tap-highlight-color: transparent !important;
    transition: background-color 0.2s, transform 0.1s !important;
}

.btn-checkout-submit:hover {
    background-color: #1f2937 !important;
}

.btn-checkout-submit:active {
    transform: scale(0.98) !important;
}

/* STYLE PANIER TOTALEMENT VIDE */
.panier-vide-box-premium {
    text-align: center !important;
    padding: 60px 20px !important;
    background: #ffffff !important;
    border: 1px solid #e2e8f0 !important;
    border-radius: 14px !important;
}

.cart-empty-icon-circle {
    width: 80px !important;
    height: 80px !important;
    background-color: #f1f5f9 !important;
    color: #94a3b8 !important;
    border-radius: 50px !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    font-size: 30px !important;
    margin-bottom: 20px !important;
}

.panier-vide-box-premium h2 {
    font-size: 20px !important;
    font-weight: 800 !important;
    color: #1e293b !important;
    margin: 0 0 8px 0 !important;
}

.panier-vide-box-premium p {
    font-size: 14px !important;
    color: #64748b !important;
    margin: 0 0 24px 0 !important;
}

.btn-continue-shopping-link {
    text-decoration: none !important;
}

.btn-continue-shopping {
    background-color: #111827 !important;
    color: #ffffff !important;
    padding: 12px 24px !important;
    border: none !important;
    border-radius: 8px !important;
    font-weight: 700 !important;
    font-size: 14px !important;
    cursor: pointer !important;
    display: inline-flex !important;
    align-items: center !important;
    gap: 8px !important;
}

/* ==========================================================
   ADAPTATION SMARTPHONE ET RESPONSIVE FLUIDE
   ========================================================== */
@media screen and (max-width: 768px) {
    .cart-wrapper-global {
        margin: 20px auto !important;
        padding: 0 12px !important;
    }

    .cart-main-title {
        font-size: 20px !important;
        margin-bottom: 20px !important;
    }

    /* Mutation de la table en blocs normaux */
    .cart-layout-grid,
    .cart-items-column,
    .cart-summary-column {
        display: block !important;
        width: 100% !important;
        padding-right: 0 !important;
    }

    .cart-item-row-card {
        display: block !important;
        padding: 14px !important;
    }

    .cart-item-img-container {
        display: block !important;
        width: 75px !important;
        float: left !important; /* Permet un enveloppement fluide à l'ancienne sans flex */
        margin-right: 14px !important;
        margin-bottom: 10px !important;
    }

    .cart-item-img-container img {
        height: 75px !important;
    }

    .cart-item-details-container {
        display: block !important;
        padding-left: 0 !important;
    }

    .cart-item-header-meta h3 {
        font-size: 14px !important;
    }

    .cart-item-footer-actions {
        clear: both !important; /* Nettoie le float de l'image au-dessus */
        padding-top: 12px !important;
        margin-top: 10px !important;
        border-top: 1px dashed #f1f5f9 !important;
    }

    .cart-summary-column {
        margin-top: 24px !important;
    }

    .summary-sticky-card {
        padding: 16px !important;
    }
}


/* ==========================================================
   PAGE PROFIL / TABLEAU DE BORD CLIENT PREMIUM
   ========================================================== */

.profil-wrapper-global {
    max-width: 1000px !important;
    margin: 40px auto !important;
    padding: 0 20px !important;
    box-sizing: border-box !important;
}

.profil-main-title {
    font-size: 24px !important;
    font-weight: 800 !important;
    color: var(--text-dark) !important;
    margin-bottom: 30px !important;
    display: flex !important;
    align-items: center !important;
    gap: 12px !important;
}

.profil-main-title i {
    color: var(--primary-color) !important;
}

/* En-tête de profil stylisé */
.profil-card-header-premium {
    background: #ffffff !important;
    border: 1px solid #e2e8f0 !important;
    border-radius: 14px !important;
    padding: 24px !important;
    display: flex !important;
    align-items: center !important;
    gap: 20px !important;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.01) !important;
    box-sizing: border-box !important;
}

.profile-avatar-circle {
    width: 64px !important;
    height: 64px !important;
    background-color: #111827 !important; /* Noir chic */
    color: #ffffff !important;
    font-size: 24px !important;
    font-weight: 700 !important;
    border-radius: 50px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
}

.profile-user-meta h2 {
    margin: 0 0 4px 0 !important;
    font-size: 20px !important;
    font-weight: 800 !important;
    color: #1e293b !important;
}

.profile-user-meta p {
    margin: 0 !important;
    font-size: 14px !important;
    color: #64748b !important;
}

/* GRILLE DES STATISTIQUES INTERACTIVES */
.stats-profil-grid {
    display: grid !important;
    grid-template-columns: repeat(3, 1fr) !important;
    gap: 16px !important;
    margin: 24px 0 !important;
}

.profil-stat-card {
    background: #ffffff !important;
    border: 1px solid #e2e8f0 !important;
    border-radius: 12px !important;
    padding: 16px 20px !important;
    display: flex !important;
    align-items: center !important;
    text-decoration: none !important;
    color: inherit !important;
    box-sizing: border-box !important;
    -webkit-tap-highlight-color: transparent !important; /* Anti-flash bleu */
    transition: transform 0.2s ease, box-shadow 0.2s ease, border-color 0.2s ease !important;
}

.profil-stat-card:hover {
    transform: translateY(-2px) !important;
    box-shadow: 0 6px 16px rgba(0, 0, 0, 0.04) !important;
    border-color: #cbd5e1 !important;
}

/* Bulles d'icônes de stats colorées */
.stat-icon-wrapper {
    width: 44px !important;
    height: 44px !important;
    border-radius: 10px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    font-size: 16px !important;
    margin-right: 14px !important;
    flex-shrink: 0 !important;
}

.blue-stat { background-color: #e0f2fe !important; color: #0284c7 !important; }
.red-stat { background-color: #fee2e2 !important; color: #ef4444 !important; }
.green-stat { background-color: #dcfce7 !important; color: #16a34a !important; }

.stat-numeric-info {
    flex-grow: 1 !important;
}

.stat-numeric-info h3 {
    margin: 0 !important;
    font-size: 22px !important;
    font-weight: 800 !important;
    color: #1e293b !important;
}

.stat-numeric-info p {
    margin: 2px 0 0 0 !important;
    font-size: 13px !important;
    color: #64748b !important;
    font-weight: 500 !important;
}

.arrow-link-indicator {
    color: #94a3b8 !important;
    font-size: 14px !important;
    transition: transform 0.2s !important;
}

.profil-stat-card:hover .arrow-link-indicator {
    transform: translateX(3px) !important;
    color: #475569 !important;
}

/* COMPARTIMENT ADRESSE DE LIVRAISON */
.address-card-container-modern {
    background: #ffffff !important;
    border: 1px solid #e2e8f0 !important;
    border-radius: 14px !important;
    padding: 28px !important;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.01) !important;
    box-sizing: border-box !important;
}

.infos-livraison-display h2,
.infos-livraison-form h2 {
    font-size: 16px !important;
    font-weight: 700 !important;
    color: #1e293b !important;
    margin: 0 !important;
    display: flex !important;
    align-items: center !important;
    gap: 10px !important;
}

.infos-livraison-display h2 i,
.infos-livraison-form h2 i {
    color: #64748b !important;
}

.address-header-row {
    display: flex !important;
    justify-content: space-between !important;
    align-items: center !important;
    border-bottom: 1px solid #f1f5f9 !important;
    padding-bottom: 16px !important;
    margin-bottom: 20px !important;
}

.btn-edit-profile-link {
    font-size: 14px !important;
    font-weight: 700 !important;
    color: var(--primary-color) !important;
    text-decoration: none !important;
    display: flex !important;
    align-items: center !important;
    gap: 6px !important;
}

.btn-edit-profile-link:hover {
    text-decoration: underline !important;
}

/* Grille des fiches de détails d'adresse */
.address-details-list-grid {
    display: grid !important;
    grid-template-columns: repeat(3, 1fr) !important;
    gap: 20px !important;
}

.address-detail-item {
    display: flex !important;
    flex-direction: column !important;
    gap: 4px !important;
}

.block-full-width {
    grid-column: 1 / -1 !important;
    background-color: #f8fafc !important;
    padding: 12px 16px !important;
    border-radius: 8px !important;
    margin-top: 4px !important;
}

.detail-label {
    font-size: 12px !important;
    text-transform: uppercase !important;
    letter-spacing: 0.5px !important;
    color: #94a3b8 !important;
}

.detail-value {
    font-size: 15px !important;
    color: #334155 !important;
    font-weight: 600 !important;
}

/* FORMULAIRE D'ÉDITION DE PROFIL */
.profil-form-inputs-group {
    display: flex !important;
    flex-direction: column !important;
    gap: 20px !important;
    margin-top: 24px !important;
}

.form-inputs-inline-grid {
    display: grid !important;
    grid-template-columns: 1fr 1fr !important;
    gap: 20px !important;
}

.form-inputs-sub-split {
    display: grid !important;
    grid-template-columns: 1fr 1fr !important;
    gap: 16px !important;
}

.profil-input-field-block {
    display: flex !important;
    flex-direction: column !important;
    gap: 8px !important;
}

.profil-input-field-block label {
    font-size: 13px !important;
    font-weight: 700 !important;
    color: #475569 !important;
}

.profil-custom-input,
.profil-custom-textarea {
    width: 100% !important;
    padding: 12px 14px !important;
    font-size: 14px !important;
    font-weight: 500 !important;
    border: 1px solid #cbd5e1 !important;
    border-radius: 8px !important;
    background-color: #ffffff !important;
    outline: none !important;
    box-sizing: border-box !important;
    transition: border-color 0.15s, box-shadow 0.15s !important;
}

.profil-custom-input:focus,
.profil-custom-textarea:focus {
    border-color: var(--primary-color) !important;
    box-shadow: 0 0 0 3px rgba(22, 163, 74, 0.1) !important;
}

/* Boutons d'actions du profil */
.form-actions-profile-buttons {
    display: flex !important;
    align-items: center !important;
    gap: 16px !important;
    margin-top: 8px !important;
}

.btn-save-profile-data {
    padding: 12px 24px !important;
    background-color: #111827 !important; /* Noir chic */
    color: #ffffff !important;
    font-size: 14px !important;
    font-weight: 700 !important;
    border: none !important;
    border-radius: 8px !important;
    cursor: pointer !important;
    display: flex !important;
    align-items: center !important;
    gap: 8px !important;
    -webkit-tap-highlight-color: transparent !important;
    transition: background-color 0.2s !important;
}

.btn-save-profile-data:hover {
    background-color: #1f2937 !important;
}

.btn-cancel-profile-edit {
    font-size: 14px !important;
    font-weight: 600 !important;
    color: #64748b !important;
    text-decoration: none !important;
}

.btn-cancel-profile-edit:hover {
    color: #ef4444 !important;
}

/* ==========================================================
   ADAPTATION SMARTPHONE COMPLET (PIXEL 7 COMPACT DESIGN)
   ========================================================== */
@media screen and (max-width: 768px) {
    .profil-wrapper-global {
        margin: 20px auto !important;
        padding: 0 12px !important;
    }

    .profil-main-title {
        font-size: 20px !important;
        margin-bottom: 20px !important;
    }

    /* Les blocs de stats passent les uns sous les autres */
    .stats-profil-grid {
        grid-template-columns: 1fr !important;
        gap: 12px !important;
    }

    .address-card-container-modern {
        padding: 20px 16px !important;
    }

    /* Les fiches d'adresses passent en colonne unique */
    .address-details-list-grid {
        grid-template-columns: 1fr !important;
        gap: 14px !important;
    }

    /* Le formulaire d'édition passe en une colonne */
    .form-inputs-inline-grid,
    .form-inputs-sub-split {
        grid-template-columns: 1fr !important;
        gap: 16px !important;
    }

    .form-actions-profile-buttons {
        flex-direction: column !important;
        align-items: stretch !important;
        gap: 12px !important;
    }

    .btn-save-profile-data {
        justify-content: center !important;
    }

    .btn-cancel-profile-edit {
        text-align: center !important;
        padding: 6px !important;
    }
}




/* ==========================================================
   TABLEAU DE BORD ET SUIVI DE COMMANDE (`.dashboard-container`)
   ========================================================== */

/* Conteneur principal limité et centré sur PC/4K */
.dashboard-container {
    max-width: 900px !important; /* Largeur idéale pour un bon confort de lecture */
    margin: 30px auto 60px auto !important;
    padding: 0 20px !important;
    box-sizing: border-box !important;
    width: 100% !important;
}

.dashboard-container h1 {
    font-size: 26px !important;
    font-weight: 800 !important;
    color: var(--text-dark) !important;
    margin: 0 0 25px 0 !important;
}

.dashboard-container h2 {
    font-size: 18px !important;
    font-weight: 700 !important;
    color: var(--text-dark) !important;
    margin: 35px 0 15px 0 !important;
    text-transform: uppercase !important;
    letter-spacing: 0.5px !important;
}

/* Le Bloc Dashboard universel (Infos client & Produits) */
.commande-dashboard {
    background-color: #ffffff !important;
    border: 1px solid #e5e7eb !important;
    border-radius: 12px !important;
    padding: 24px !important;
    margin-bottom: 20px !important;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.02) !important;
    box-sizing: border-box !important;
    width: 100% !important;
}

/* Formatage des lignes d'informations du client */
.commande-dashboard p {
    font-size: 15px !important;
    color: #374151 !important;
    margin: 10px 0 !important;
    line-height: 1.5 !important;
    display: flex !important;
    justify-content: space-between !important; /* Aligne les intitulés à gauche et les valeurs à droite style facture */
    border-bottom: 1px dashed #f3f4f6 !important; /* Petite séparation discrète */
    padding-bottom: 8px !important;
}

.commande-dashboard p strong {
    color: var(--text-muted) !important;
    font-weight: 600 !important;
}

/* Ligne de séparation */
.commande-dashboard hr {
    border: none !important;
    height: 1px !important;
    background-color: #e5e7eb !important;
    margin: 20px 0 !important;
}

/* ==========================================================
   SPÉCIFICITÉS DU BLOC S'IL CONTIENT UN PRODUIT
   ========================================================== */
/* Détection automatique si le bloc contient une image produit (Flexbox) */
.commande-dashboard:has(img) {
    display: flex !important;
    align-items: center !important;
    gap: 20px !important;
    padding: 16px !important;
}

.commande-dashboard img {
    max-width: 100px !important;
    height: auto !important;
    object-fit: contain !important;
    background-color: #f9fafb !important;
    border-radius: 8px !important;
    border: 1px solid #e5e7eb !important;
    padding: 6px !important;
    flex-shrink: 0 !important; /* Empêche l'image de se compresser */
}

/* Restructuration des textes du produit commandé */
.commande-dashboard h3 {
    font-size: 16px !important;
    font-weight: 700 !important;
    color: var(--text-dark) !important;
    margin: 0 0 6px 0 !important;
    flex-grow: 1 !important; /* Laisse le titre prendre la place */
}

/* Surcharge des paragraphes uniquement pour les blocs produits */
.commande-dashboard:has(img) p {
    display: block !important;
    border: none !important;
    padding: 0 !important;
    margin: 4px 0 !important;
    font-size: 14px !important;
    color: var(--text-muted) !important;
}

/* ==========================================================
   ADAPTATION SMARTPHONES (IPHONE 11 PRO / PIXEL 7 STABLE)
   ========================================================== */
@media screen and (max-width: 768px) {
    .dashboard-container {
        padding: 0 12px !important;
        margin-top: 20px !important;
    }

    .dashboard-container h1 {
        font-size: 22px !important;
        margin-bottom: 20px !important;
    }

    .commande-dashboard {
        padding: 16px !important;
    }

    /* Réalignement horizontal propre de l'image et du texte du produit */
    .commande-dashboard:has(img) {
        display: grid !important;
        grid-template-columns: 80px 1fr !important; /* Image à gauche, détails à droite */
        gap: 12px !important;
    }

    .commande-dashboard img {
        width: 80px !important;
    }

    .commande-dashboard h3 {
        font-size: 15px !important;
        margin-bottom: 4px !important;
    }
}


/* ==========================================================
   TABLEAU DE BORD GLOBAL ADMINISTRATION (`dashboard.html`)
   ========================================================== */

/* Bouton des statistiques avancées en haut de page */
.btn-statistiques {
    background-color: #111827 !important;
    color: #ffffff !important;
    border: none !important;
    padding: 12px 24px !important;
    font-size: 15px !important;
    font-weight: 700 !important;
    border-radius: 8px !important;
    cursor: pointer !important;
    transition: background-color var(--transition-fast) !important;
    margin-bottom: 25px !important;
    display: inline-block !important;
}

.btn-statistiques:hover {
    background-color: #1f2937 !important;
}

/* ==========================================================
   FORMULAIRE DE RECHERCHE DU DASHBOARD
   ========================================================== */
.recherche-dashboard {
    display: flex !important;
    gap: 12px !important;
    margin-bottom: 30px !important;
    width: 100% !important;
    max-width: 600px !important;
}

.recherche-dashboard input {
    flex: 1 !important;
    border: 1px solid #d1d5db !important;
    border-radius: 8px !important;
    padding: 12px 16px !important;
    font-size: 15px !important;
    outline: none !important;
    background-color: #f9fafb !important;
    transition: all var(--transition-fast) !important;
}

.recherche-dashboard input:focus {
    border-color: var(--primary-color) !important;
    background-color: #ffffff !important;
    box-shadow: 0 0 0 3px rgba(16, 185, 129, 0.1) !important;
}

.recherche-dashboard button {
    background-color: var(--primary-color) !important;
    color: white !important;
    border: none !important;
    padding: 12px 24px !important;
    font-size: 15px !important;
    font-weight: 600 !important;
    border-radius: 8px !important;
    cursor: pointer !important;
    transition: background var(--transition-fast) !important;
}

.recherche-dashboard button:hover {
    background-color: var(--primary-hover) !important;
}

/* ==========================================================
   GRILLE DES CARTES DE STATISTIQUES (KPI CARDS)
   ========================================================== */
.stats-grid {
    display: grid !important;
    grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)) !important;
    gap: 20px !important;
    margin-bottom: 25px !important;
    width: 100% !important;
}

.stat-card {
    background-color: #ffffff !important;
    border: 1px solid #e5e7eb !important;
    border-radius: 12px !important;
    padding: 24px !important;
    text-align: left !important;
    box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.01) !important;
    box-sizing: border-box !important;
}

.stat-card h2 {
    font-size: 24px !important;
    font-weight: 800 !important;
    color: var(--text-dark) !important;
    margin: 0 0 4px 0 !important;
}

.stat-card p {
    font-size: 14px !important;
    font-weight: 600 !important;
    color: var(--text-muted) !important;
    margin: 0 !important;
}

/* Accentuation de couleur pour la carte du Chiffre d'Affaires */
.stat-card:has(h2:contains("FCFA")), 
.stat-card:nth-child(4) {
    border-left: 4px solid var(--primary-color) !important;
}

/* ==========================================================
   SECTIONS D'ALERTES STOCKS ET PRODUITS POPULAIRES
   ========================================================== */
.top-produits, .alertes-stock {
    background-color: #ffffff !important;
    border: 1px solid #e5e7eb !important;
    border-radius: 12px !important;
    padding: 24px !important;
    margin-bottom: 25px !important;
    box-sizing: border-box !important;
}

.top-produits h2, .alertes-stock h2 {
    font-size: 16px !important;
    font-weight: 700 !important;
    color: var(--text-dark) !important;
    margin: 0 0 16px 0 !important;
    text-transform: uppercase !important;
    letter-spacing: 0.5px !important;
}

.top-produits ul, .alertes-stock ul {
    list-style: none !important;
    padding: 0 !important;
    margin: 0 !important;
}

.top-produits li, .alertes-stock li {
    font-size: 15px !important;
    color: #374151 !important;
    padding: 10px 0 !important;
    border-bottom: 1px solid #f3f4f6 !important;
}

.top-produits li:last-child, .alertes-stock li:last-child {
    border-bottom: none !important;
    padding-bottom: 0 !important;
}

/* Couleurs spécifiques pour les états de stock */
.alertes-stock h2:contains("rupture") + ul li,
.alertes-stock:nth-of-type(3) li {
    color: #dc2626 !important; /* Rouge pour les ruptures */
    font-weight: 600 !important;
}

.alertes-stock h2:contains("faible") + ul li,
.alertes-stock:nth-of-type(4) li {
    color: #d97706 !important; /* Orange pour les stocks faibles */
}

/* ==========================================================
   LISTING DES COMMANDES RECENTES ET BADGES DE STATUT
   ========================================================== */
.commande-header {
    display: flex !important;
    justify-content: space-between !important;
    align-items: center !important;
    border-bottom: 1px solid #e5e7eb !important;
    padding-bottom: 12px !important;
    margin-bottom: 16px !important;
}

.commande-header h3 {
    font-size: 16px !important;
    font-weight: 700 !important;
    margin: 0 !important;
    color: var(--text-dark) !important;
}

/* Badge de statut universel intelligent */
.statut-badge {
    font-size: 12px !important;
    font-weight: 700 !important;
    padding: 4px 10px !important;
    border-radius: 9999px !important;
    text-transform: uppercase !important;
    background-color: #f3f4f6 !important;
    color: #4b5563 !important;
}

/* Sous-section des articles inclus dans la commande */
.produits-commande {
    margin-top: 20px !important;
    background-color: #f9fafb !important;
    border-radius: 8px !important;
    padding: 16px !important;
}

.produits-commande h4 {
    font-size: 13px !important;
    font-weight: 700 !important;
    color: var(--text-muted) !important;
    text-transform: uppercase !important;
    margin: 0 0 12px 0 !important;
}

.produits-commande ul {
    list-style: none !important;
    padding: 0 !important;
    margin: 0 !important;
    display: flex !important;
    flex-direction: column !important;
    gap: 12px !important;
}

.produit-ligne {
    display: flex !important;
    align-items: center !important;
    gap: 14px !important;
}

.produit-ligne img {
    width: 45px !important;
    height: 45px !important;
    object-fit: contain !important;
    background-color: #ffffff !important;
    border: 1px solid #e5e7eb !important;
    border-radius: 6px !important;
    padding: 4px !important;
}

.produit-ligne div {
    font-size: 14px !important;
    color: #374151 !important;
    line-height: 1.4 !important;
}

/* ==========================================================
   BOUTONS DE CHANGEMENT DE STATUT (ACTIONS COMMANDES)
   ========================================================== */
.actions-commande {
    display: flex !important;
    flex-wrap: wrap !important;
    gap: 10px !important;
    margin-top: 20px !important;
    border-top: 1px dashed #e5e7eb !important;
    padding-top: 16px !important;
}

.actions-commande a {
    text-decoration: none !important;
}

.btn-detail, .btn-confirm, .btn-expedie, .btn-livree {
    padding: 10px 16px !important;
    font-size: 13px !important;
    font-weight: 700 !important;
    border-radius: 6px !important;
    cursor: pointer !important;
    border: none !important;
    transition: background-color var(--transition-fast) !important;
}

/* Couleurs sémantiques pro des boutons d'action d'administration */
.btn-detail { background-color: #f3f4f6 !important; color: var(--text-dark) !important; }
.btn-detail:hover { background-color: #e5e7eb !important; }

.btn-confirm { background-color: #3b82f6 !important; color: #ffffff !important; }
.btn-confirm:hover { background-color: #2563eb !important; }

.btn-expedie { background-color: #f59e0b !important; color: #ffffff !important; }
.btn-expedie:hover { background-color: #d97706 !important; }

.btn-livree { background-color: var(--primary-color) !important; color: #ffffff !important; }
.btn-livree:hover { background-color: var(--primary-hover) !important; }

/* ==========================================================
   CORRECTIONS ERGONOMIQUES SMARTPHONE (PIXEL 7 / IPHONE 11 PRO)
   ========================================================== */
@media screen and (max-width: 768px) {
    .btn-statistiques {
        width: 100% !important;
        text-align: center !important;
        box-sizing: border-box !important;
    }

    .recherche-dashboard {
        flex-direction: column !important; /* Empile l'input et le bouton sur mobile */
        gap: 8px !important;
    }

    .recherche-dashboard button {
        width: 100% !important;
    }

    .stats-grid {
        grid-template-columns: repeat(2, 1fr) !important; /* Grille compacte de 2 cartes par ligne */
        gap: 10px !important;
    }

    /* La carte CA ou les nombres longs prennent toute la largeur pour éviter les chevauchements */
    .stats-grid .stat-card:last-child,
    .stats-grid .stat-card:nth-child(4) {
        grid-column: span 2 !important;
    }

    .stat-card {
        padding: 16px !important;
    }

    .stat-card h2 {
        font-size: 19px !important;
    }

    .commande-header {
        flex-direction: column !important;
        align-items: flex-start !important;
        gap: 8px !important;
    }

    /* Boutons d'action empilés en pleine largeur pour le confort tactile */
    .actions-commande {
        display: grid !important;
        grid-template-columns: 1fr !important;
        gap: 8px !important;
    }

    .actions-commande a, 
    .btn-detail, .btn-confirm, .btn-expedie, .btn-livree {
        width: 100% !important;
        display: block !important;
        text-align: center !important;
        box-sizing: border-box !important;
    }
}


/* ==========================================================
   GRILLE ET DESIGN DES CARTES DE LA PAGE CATÉGORIE
   ========================================================== */

.categorie-header-box {
    margin-bottom: 24px !important;
    padding-bottom: 12px !important;
    border-bottom: 1px solid #f1f5f9 !important;
}

.categorie-header-box h2 {
    font-size: 24px !important;
    font-weight: 800 !important;
    color: var(--text-dark) !important;
    margin: 0 !important;
}

.categorie-subtitle {
    font-size: 14px !important;
    color: var(--text-muted) !important;
    margin: 4px 0 0 0 !important;
}

/* Redéfinition de la carte produit de la grille */
.carte-produit {
    position: relative !important;
    background: #ffffff !important;
    border: 1px solid #e5e7eb !important;
    border-radius: 10px !important;
    padding: 12px !important;
    display: flex !important;
    flex-direction: column !important;
    box-sizing: border-box !important;
    transition: transform 0.2s, box-shadow 0.2s !important;
}

.carte-produit:hover {
    transform: translateY(-4px) !important;
    box-shadow: 0 10px 20px rgba(0, 0, 0, 0.05) !important;
}

/* Zone cliquable globale */
.produit-link {
    text-decoration: none !important;
    color: inherit !important;
    display: flex !important;
    flex-direction: column !important;
    height: 100% !important;
}

/* Conteneur de l'image de la grille */
.produit-image-box {
    width: 100% !important;
    height: 180px !important; /* Hauteur harmonisée */
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    background-color: #f8fafc !important; /* Fond neutre moderne */
    border-radius: 8px !important;
    overflow: hidden !important;
    padding: 10px !important;
    box-sizing: border-box !important;
}

.produit-image-box img {
    max-width: 100% !important;
    max-height: 100% !important;
    object-fit: contain !important; /* Anti-déformation absolu */
    transition: transform 0.2s ease !important;
}

.carte-produit:hover .produit-image-box img {
    transform: scale(1.03) !important;
}

/* Contenu textuel sous l'image */
.produit-info-content {
    padding: 10px 4px 0 4px !important;
    display: flex !important;
    flex-direction: column !important;
    flex-grow: 1 !important;
}

.produit-titre-grid {
    font-size: 14px !important;
    font-weight: 600 !important;
    color: #1e293b !important;
    margin: 0 0 8px 0 !important;
    line-height: 1.4 !important;
    height: 40px !important; /* Réserve l'espace pour 2 lignes maximum */
    overflow: hidden !important;
}

/* Zone des prix */
.produit-prix-box {
    display: flex !important;
    align-items: center !important;
    flex-wrap: wrap !important;
    gap: 8px !important;
    margin-top: auto !important; /* Pousse le prix tout en bas de la carte */
}

.produit-prix-actuel {
    font-size: 16px !important;
    font-weight: 700 !important;
    color: var(--primary-color) !important; /* Ton vert Vendo */
}

.produit-prix-barre {
    font-size: 12px !important;
    color: #94a3b8 !important;
    text-decoration: line-through !important;
}

/* Message si catégorie vide */
.categorie-vide {
    grid-column: 1 / -1 !important;
    text-align: center !important;
    padding: 60px 20px !important;
    color: #64748b !important;
}

.categorie-vide i {
    font-size: 48px !important;
    color: #cbd5e1 !important;
    margin-bottom: 16px !important;
}

.btn-retour-accueil {
    display: inline-block !important;
    margin-top: 15px !important;
    padding: 10px 20px !important;
    background-color: #1e293b !important;
    color: #ffffff !important;
    text-decoration: none !important;
    border-radius: 6px !important;
    font-weight: 600 !important;
    font-size: 14px !important;
}

/* ==========================================================
   ADAPTATION SMARTPHONE (DEUX COLONNES STABLES)
   ========================================================== */
@media screen and (max-width: 768px) {
    .produit-image-box {
        height: 140px !important; /* Légèrement plus bas sur mobile */
    }
    
    .produit-titre-grid {
        font-size: 13px !important;
        height: 36px !important;
    }

    .produit-prix-actuel {
        font-size: 14px !important;
    }
}
.produit-link h3{
    color:#1f2937;
    text-decoration:none;
} 
/* ==========================================================
   CORRECTIF : SUPPRESSION DU SOULIGNEMENT ET CLIC BLEU PRODUITS
   ========================================================== */

/* Enlève le soulignement sur ordinateur, même au survol et au clic */
.produit-link,
.produit-link:hover,
.produit-link:focus,
.produit-link h3,
.carte-produit h3 a {
    text-decoration: none !important;
    outline: none !important;
}

/* Supprime le rectangle bleu transparent natif sur les téléphones */
.produit-link {
    -webkit-tap-highlight-color: transparent !important;
}

/* Optionnel : Ajoute un effet de survol moderne et discret sur le titre plutôt qu'un soulignement brutal */
.carte-produit:hover .produit-titre-grid {
    color: var(--primary-color) !important; /* Le titre passe subtilement au vert Vendo au survol */
}


/* ==========================================================
   PAGE TABLEAU DE BORD & STATISTIQUES PREMIUM
   ========================================================== */


/* Les fiches des graphiques */
.graphique-card-premium {
    background: #ffffff !important;
    border: 1px solid #e2e8f0 !important;
    border-radius: 14px !important;
    padding: 24px !important;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.01) !important;
    box-sizing: border-box !important;
}

.graphique-card-premium h2 {
    font-size: 15px !important;
    font-weight: 700 !important;
    color: #1e293b !important;
    text-transform: uppercase !important;
    letter-spacing: 0.5px !important;
    margin: 0 0 20px 0 !important;
    display: flex !important;
    align-items: center !important;
    gap: 8px !important;
}

.graphique-card-premium h2 i {
    color: #64748b !important;
}

/* Conteneurs de hauteur fixe forcée pour que Chart.js reste propre */
.chart-canvas-wrapper {
    position: relative !important;
    height: 280px !important;
    width: 100% !important;
}

/* Hauteur maximisée pour la courbe principale du chiffre d'affaires */
.line-chart-height {
    height: 340px !important;
}

.pie-chart-flex {
    padding: 10px 0 !important;
}

/* ==========================================================
   ADAPTATION SMARTPHONE STABLE (PIXEL 7 COMPACT)
   ========================================================== */
@media screen and (max-width: 900px) {
    .dashboard-split-grid {
        grid-template-columns: 1fr !important; /* Tout s'empile verticalement sur smartphone */
        gap: 20px !important;
    }

    .dashboard-wrapper-global {
        margin: 20px auto !important;
        padding: 0 12px !important;
    }

    .dashboard-header-box h1 {
        font-size: 20px !important;
    }

    .graphique-card-premium {
        padding: 16px !important;
    }

    .chart-canvas-wrapper {
        height: 250px !important; /* Légèrement plus compact sur mobile */
    }
    
    .line-chart-height {
        height: 280px !important;
    }
}


/* CORECTIF TRES IMPORTANT : IL A FIXER LA NAV DECALER LA BARRE DE RECHERCHE ET METTRE LE FOOTER EN BAS */
/* ==========================================================
   REPARATION FINALE : NAVBAR FIXE + CORRECTIF FOOTER & DECALAGE
   ========================================================== */

/* 1. On stabilise le body */
body {
    display: flex !important;
    flex-direction: column !important;
    min-height: 100vh !important;
    margin: 0 !important;
    padding: 0 !important;
}

/* 2. LA NAVBAR : Fixée impitoyablement en haut de l'écran */
nav {
    position: fixed !important;
    top: 0 !important;
    left: 0 !important;
    width: 100% !important;
    height: 60px !important; /* Ajuste selon la hauteur réelle de ta navbar si besoin */
    z-index: 9999 !important; /* Passe au-dessus de tout le monde */
}

/* 3. LE CONTENEUR PRINCIPAL : On lui ajoute un padding-top de sécurité
   égal à la hauteur de la navbar pour libérer la barre de recherche ! */
.main-content-wrapper {
    flex: 1 0 auto !important;
    display: flex !important;
    flex-direction: column !important;
    padding-top: 60px !important; /* CRUCIAL : Empêche la navbar de cacher le haut du site */
    box-sizing: border-box !important;
}

/* 4. On équilibre l'espace des produits */
.produits, 
.produits-wrapper-global {
    flex: 1 0 auto !important;
    height: auto !important;
    display: flex !important;
    flex-direction: column !important;
    box-sizing: border-box !important;
}

.grille-produits {
    margin-bottom: auto !important; /* Pousse le footer vers le bas proprement */
}

/* 5. Le footer reste parfaitement calé */
footer {
    position: relative !important;
    flex-shrink: 0 !important;
    background-color: #111827 !important;
    color: #9ca3af !important;
    text-align: center !important;
    padding: 24px 20px !important;
    font-size: 13px !important;
    border-top: 1px solid #1f2937 !important;
    width: 100% !important;
    box-sizing: border-box !important;
}


/* ==========================================================
   NETTOYAGE ET FORCE DE DÉCENTRAGE DE LA PAGE DÉTAIL
   ========================================================== */

/* On isole le conteneur principal de la page détail pour annuler les effets centrés */
div.detail-produit ~ .avis-section,
body .avis-section {
    display: block !important;
    width: 100% !important;
    max-width: 1200px !important;
    margin: 30px auto !important;
    text-align: left !important; /* Force l'alignement du texte à gauche */
    padding: 0 16px !important;
    box-sizing: border-box !important;
}

/* Force les boîtes intérieures à s'étaler et à s'aligner à gauche */
.avis-section .description-block-premium,
.avis-section .avis-form-container {
    margin-left: 0 !important; /* Supprime le centrage automatique */
    margin-right: auto !important;
    width: 100% !important;
    max-width: 100% !important; /* Occupe toute la largeur de l'écran disponible */
    box-sizing: border-box !important;
    text-align: left !important;
}

/* Aligne les éléments du formulaire à gauche */
.avis-section .avis-form {
    display: flex !important;
    flex-direction: column !important;
    align-items: flex-start !important; /* Aligne le textarea et le bouton à gauche */
    width: 100% !important;
}

.avis-section .avis-form textarea {
    width: 100% !important;
    box-sizing: border-box !important;
}

/* Ajustements pour les mobiles */
@media screen and (max-width: 768px) {
    div.detail-produit ~ .avis-section,
    body .avis-section {
        padding: 0 12px !important;
        margin-top: 20px !important;
        margin-bottom: 20px !important;
    }
}


/* ==========================================================
   CORRECTIF ABSOLU : SUPPRESSION DU FLASH BLEU SUR LA NAVBAR
   ========================================================== */

/* On cible explicitement tous les composants cliquables de la nav et du menu */
nav a,
nav button,
.menu-burger,
.menu-burger span,
.logo,
.logo img,
.nav-direct-link,
.nav-direct-link i,
.panier-link,
.badge-panier,
.sidebar a,
.closebtn,
.closebtn i {
    -webkit-tap-highlight-color: transparent !important;
    -webkit-touch-callout: none !important; /* Désactive aussi le menu contextuel sur iOS */
    outline: none !important;
}




/* ==========================================================
   CARTES CATÉGORIES MODERNES EN IMAGE DE FOND (BACKGROUND)
   ========================================================== */

/* La grille reste propre et adaptative */
.grille-categories-clean {
    display: grid !important;
    grid-template-columns: repeat(4, 1fr) !important;
    gap: 16px !important;
    padding: 0 16px !important;
    max-width: 1300px !important;
    margin: 0 auto !important;
    box-sizing: border-box !important;
}

/* La carte qui gère le background */
.carte-categorie-bg {
    width: 100% !important;
    aspect-ratio: 1 / 1 !important; /* Carte parfaitement carrée */
    background-size: cover !important; /* L'image remplit tout l'espace sans déformation */
    background-position: center !important; /* L'image est bien centrée */
    background-repeat: no-repeat !important;
    border-radius: 12px !important; /* Beaux angles arrondis */
    overflow: hidden !important;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.05) !important;
    transition: transform 0.3s ease, box-shadow 0.3s ease !important;
    box-sizing: border-box !important;
}

/* Effet de zoom léger au survol */
.carte-categorie-bg:hover {
    transform: translateY(-4px) !important;
    box-shadow: 0 6px 18px rgba(0, 0, 0, 0.12) !important;
}

.categorie-carte-link-bg {
    text-decoration: none !important;
    display: block !important;
    width: 100% !important;
    height: 100% !important;
    -webkit-tap-highlight-color: transparent !important;
}

/* L'overlay sombre pour garantir la lisibilité du texte blanc */
.categorie-overlay-sombre {
    width: 100% !important;
    height: 100% !important;
    background: linear-gradient(to top, rgba(0, 0, 0, 0.7) 0%, rgba(0, 0, 0, 0.2) 60%, rgba(0, 0, 0, 0) 100%) !important;
    display: flex !important;
    align-items: flex-end !important; /* Positionne le texte tout en bas de l'image */
    padding: 16px !important;
    box-sizing: border-box !important;
}

/* Le titre blanc premium */
.categorie-titre-bg {
    color: #ffffff !important; /* Écrit en blanc par-dessus l'image */
    font-size: 16px !important;
    font-weight: 700 !important;
    margin: 0 !important;
    text-shadow: 0 2px 4px rgba(0, 0, 0, 0.4) !important; /* Ombre portée pour un effet pro */
    width: 100% !important;
    white-space: nowrap !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
}

/* ==========================================================
   ADAPTATION MOBILE COMPACTE (2 COLONNES)
   ========================================================== */
@media screen and (max-width: 768px) {
    .grille-categories-clean {
        grid-template-columns: repeat(2, 1fr) !important; /* 2 colonnes sur ton Pixel 7 */
        gap: 12px !important;
        padding: 0 12px !important;
    }

    .carte-categorie-bg {
        border-radius: 10px !important;
    }

    .categorie-overlay-sombre {
        padding: 12px !important;
    }

    .categorie-titre-bg {
        font-size: 14px !important; /* Légèrement plus petit sur mobile */
    }
}



/* ==========================================================
   EN-TÊTE DE LA PAGE CATÉGORIE EN BACKGROUND
   ========================================================== */

.categorie-header-box-bg {
    width: 100% !important;
    max-width: 100% !important; /* Force l'étalement absolu */
    height: 220px !important; /* Un peu plus de hauteur sur ordinateur pour un effet plus premium */
    background-size: cover !important;
    background-position: center !important;
    background-repeat: no-repeat !important;
    margin: 0 0 40px 0 !important; /* Aligné à 0 sur les côtés, repousse les produits vers le bas */
    position: relative !important;
    box-sizing: border-box !important;
}

@media screen and (max-width: 768px) {
    .categorie-header-box-bg {
        height: 130px !important; /* Hauteur ajustée pour ton Pixel 7 */
        margin-bottom: 24px !important;
    }
}

/* Overlay assombrissant pour rendre le titre lisible */
.categorie-header-overlay {
    width: 100% !important;
    height: 100% !important;
    background: rgba(0, 0, 0, 0.45) !important; /* Voile sombre */
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    padding: 20px !important;
    box-sizing: border-box !important;
}

/* Style épuré et moderne pour le titre principal */
.categorie-header-titre-clean {
    color: #ffffff !important;
    font-size: 28px !important;
    font-weight: 700 !important;
    margin: 0 !important;
    text-transform: uppercase !important;
    letter-spacing: 1px !important;
    text-shadow: 0 2px 8px rgba(0, 0, 0, 0.5) !important;
    text-align: center !important;
}

/* ==========================================================
   ADAPTATION SMARTPHONE (MOBILE COMPACT)
   ========================================================== */
@media screen and (max-width: 768px) {
    .categorie-header-box-bg {
        height: 120px !important; /* Plus compact sur mobile pour ne pas cacher les produits */
        margin-bottom: 20px !important;
    }

    .categorie-header-titre-clean {
        font-size: 20px !important;
    }
}

/* ==========================================================
   SUPPRESSION RADICALE DU SOULIGNEMENT DES LIENS DE LA PAGE
   ========================================================== */

/* Écrase le style de tous les liens dans la zone avis, peu importe leur état */
.avis-section a,
.avis-section a:link,
.avis-section a:visited,
.avis-section a:hover,
.avis-section a:active,
.auth-required-notice a,
.auth-required-notice a:visited {
    text-decoration: none !important;
    border-bottom: none !important; /* Au cas où une bordure inférieure simulerait un soulignement */
    color: #16a34a !important; /* Utilise ton vert signature ou passe-le en #2563eb si tu préfères le bleu */
    font-weight: 600 !important;
}

/* ==========================================================
   FORCE L'ANNULATION DES STYLES DE TRADUCTION DE CHROME
   ========================================================== */

.auth-required-notice a,
.auth-required-notice a * {
    text-decoration: none !important;
    text-decoration-line: none !important;
    -webkit-text-decoration: none !important;
    border-bottom: none !important;
    box-shadow: none !important; /* Parfois Chrome utilise une ombre pour souligner */
}


/* PAGE DE CONFIRMATION D'ACHAT POUR LES UTILISATEURS NON CONNECTÉS */

/* ==========================================================
   PAGE DE CONFIRMATION DE COMMANDE PREMIUM
   ========================================================== */

.confirmation-page {
    display: flex !important;
    justify-content: center !important;
    align-items: center !important;
    padding: 60px 16px !important;
    background-color: #f8fafc !important; /* Fond gris/bleu très clair très propre */
    min-height: 70vh !important;
    box-sizing: border-box !important;
}

.confirmation-card {
    background-color: #ffffff !important;
    border-radius: 16px !important;
    box-shadow: 0 10px 25px rgba(0, 0, 0, 0.05) !important;
    padding: 40px !important;
    max-width: 550px !important;
    width: 100% !important;
    text-align: center !important;
    box-sizing: border-box !important;
}

/* L'animation de l'icône de succès */
.success-icon-wrapper {
    display: flex !important;
    justify-content: center !important;
    margin-bottom: 24px !important;
}

.success-icon-circle {
    width: 70px !important;
    height: 70px !important;
    background-color: rgba(22, 163, 74, 0.1) !important; /* Fond vert translucide */
    color: #16a34a !important; /* Vert Jusbu */
    border-radius: 50% !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    font-size: 28px !important;
}

.confirmation-card h1 {
    font-size: 24px !important;
    font-weight: 700 !important;
    color: #1e293b !important;
    margin: 0 0 12px 0 !important;
}

.confirmation-card .message {
    font-size: 15px !important;
    color: #64748b !important;
    line-height: 1.6 !important;
    margin: 0 0 30px 0 !important;
}

/* Boîte d'info style carte neutre */
.info-box-modern {
    background-color: #f1f5f9 !important; /* Gris neutre doux */
    border-radius: 12px !important;
    padding: 20px !important;
    text-align: left !important; /* Aligné à gauche pour une lecture confortable */
    margin-bottom: 35px !important;
    box-sizing: border-box !important;
}

.info-box-header {
    display: flex !important;
    align-items: center !important;
    gap: 10px !important;
    color: #334155 !important;
    margin-bottom: 12px !important;
}

.info-box-header i {
    color: #2563eb !important; /* Bleu d'information discret */
    font-size: 16px !important;
}

.info-box-header h3 {
    font-size: 15px !important;
    font-weight: 700 !important;
    margin: 0 !important;
}

.info-box-body p {
    font-size: 13.5px !important;
    color: #475569 !important;
    line-height: 1.5 !important;
    margin: 0 0 10px 0 !important;
}

.info-box-body p:last-child {
    margin-bottom: 0 !important;
}

/* Les boutons d'actions */
.confirmation-actions {
    display: flex !important;
    flex-direction: column !important;
    gap: 12px !important;
}

.btn-confirm-primary {
    background-color: #111827 !important; /* Bouton noir pro */
    color: #ffffff !important;
    text-decoration: none !important;
    padding: 14px 24px !important;
    border-radius: 8px !important;
    font-size: 14px !important;
    font-weight: 700 !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 8px !important;
    transition: background-color 0.2s !important;
    -webkit-tap-highlight-color: transparent !important;
}

.btn-confirm-primary:hover {
    background-color: #1f2937 !important;
}

.btn-confirm-secondary {
    background-color: transparent !important;
    color: #64748b !important;
    text-decoration: none !important;
    padding: 12px 24px !important;
    border-radius: 8px !important;
    font-size: 14px !important;
    font-weight: 600 !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    transition: color 0.2s !important;
    -webkit-tap-highlight-color: transparent !important;
}

.btn-confirm-secondary:hover {
    color: #1e293b !important;
}

/* ==========================================================
   OPTIMISATION RESPONSIVE SMARTPHONE
   ========================================================== */
@media screen and (max-width: 768px) {
    .confirmation-page {
        padding: 30px 12px !important;
    }

    .confirmation-card {
        padding: 30px 20px !important;
    }

    .confirmation-card h1 {
        font-size: 20px !important;
    }

    .info-box-modern {
        padding: 16px !important;
    }
}


/* ==========================================================
   PAGE ASSISTANCE ET SUPPORT CLIENT PREMIUM (JUSBU)
   ========================================================== */

.assistance-hero-premium {
    background-color: #111827 !important; /* Fond noir assorti à ta Nav */
    color: #ffffff !important;
    text-align: center !important;
    padding: 50px 20px !important;
    box-sizing: border-box !important;
}

.assistance-hero-content max-width {
    max-width: 650px !important;
    margin: 0 auto !important;
}

.assistance-hero-premium h1 {
    font-size: 28px !important;
    font-weight: 800 !important;
    margin: 0 0 12px 0 !important;
    letter-spacing: -0.5px !important;
}

.assistance-hero-premium p {
    font-size: 15px !important;
    color: #94a3b8 !important;
    line-height: 1.6 !important;
    margin: 0 !important;
}

/* Grille des cartes de contact */
.assistance-grid-container {
    max-width: 1100px !important;
    margin: -30px auto 50px auto !important; /* Fait légèrement remonter les cartes sur le fond noir */
    padding: 0 16px !important;
    display: block !important;
    text-align: center !important;
    box-sizing: border-box !important;
}

.assistance-card-modern {
    background-color: #ffffff !important;
    border-radius: 14px !important;
    box-shadow: 0 10px 25px rgba(0, 0, 0, 0.05) !important;
    padding: 30px 20px !important;
    display: inline-block !important;
    vertical-align: top !important;
    width: 30% !important; /* 3 colonnes sur PC */
    min-width: 280px !important;
    margin: 10px 1.3% !important;
    text-align: center !important;
    box-sizing: border-box !important;
    border: 1px solid #f1f5f9 !important;
}

.card-icon-box {
    width: 55px !important;
    height: 55px !important;
    border-radius: 50% !important;
    background-color: #f8fafc !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    margin: 0 auto 16px auto !important;
}

.card-icon-box i {
    font-size: 22px !important;
}

.whatsapp-card .card-icon-box i { color: #16a34a !important; }
.phone-card .card-icon-box i { color: #2563eb !important; }
.hours-card .card-icon-box i { color: #64748b !important; }

.assistance-card-modern h3 {
    font-size: 18px !important;
    font-weight: 700 !important;
    color: #1e293b !important;
    margin: 0 0 10px 0 !important;
}

.assistance-card-modern p {
    font-size: 13.5px !important;
    color: #64748b !important;
    line-height: 1.5 !important;
    margin: 0 0 20px 0 !important;
    min-height: 40px !important; /* Aligne la hauteur des textes */
}

/* Boutons d'actions des cartes */
.assistance-btn-action {
    display: block !important;
    width: 100% !important;
    padding: 11px 16px !important;
    border-radius: 8px !important;
    font-size: 13.5px !important;
    font-weight: 700 !important;
    text-decoration: none !important;
    box-sizing: border-box !important;
    transition: background-color 0.2s !important;
    -webkit-tap-highlight-color: transparent !important;
}

.btn-wa {
    background-color: #16a34a !important; /* Vert WhatsApp */
    color: #ffffff !important;
}
.btn-wa:hover { background-color: #15803d !important; }

.btn-phone {
    background-color: #f1f5f9 !important;
    color: #1e293b !important;
}
.btn-phone:hover { background-color: #e2e8f0 !important; }

.hours-card .days {
    font-weight: 700 !important;
    color: #334155 !important;
    margin-bottom: 4px !important;
}
.hours-card .hours {
    font-size: 16px !important;
    font-weight: 800 !important;
    color: #16a34a !important; /* Vert Jusbu */
}

/* Section liste des sujets */
.assistance-topics-section {
    max-width: 800px !important;
    margin: 0 auto 60px auto !important;
    padding: 0 16px !important;
    box-sizing: border-box !important;
}

.topics-inner-box {
    background-color: #ffffff !important;
    border-radius: 14px !important;
    padding: 35px !important;
    border: 1px solid #e2e8f0 !important;
    box-sizing: border-box !important;
}

.assistance-topics-section h2 {
    font-size: 20px !important;
    font-weight: 700 !important;
    color: #1e293b !important;
    text-align: center !important;
    margin: 0 0 6px 0 !important;
}

.subtitle-topics {
    font-size: 14px !important;
    color: #64748b !important;
    text-align: center !important;
    margin: 0 0 25px 0 !important;
}

.topics-list-grid {
    display: flex !important;
    flex-direction: column !important;
    gap: 14px !important;
}

.topic-item {
    display: flex !important;
    align-items: center !important;
    gap: 14px !important;
    background-color: #f8fafc !important;
    padding: 14px 18px !important;
    border-radius: 8px !important;
    box-sizing: border-box !important;
}

.topic-item i {
    color: #16a34a !important; /* Puces icônes en vert signature */
    font-size: 16px !important;
    width: 20px !important;
    text-align: center !important;
}

.topic-item span {
    font-size: 14px !important;
    font-weight: 600 !important;
    color: #334155 !important;
}

/* ==========================================================
   ADAPTATION RESPONSIVE MOBILE
   ========================================================== */
@media screen and (max-width: 768px) {
    .assistance-hero-premium {
        padding: 40px 16px !important;
    }
    
    .assistance-hero-premium h1 {
        font-size: 24px !important;
    }

    .assistance-grid-container {
        margin-top: 20px !important; /* Supprime le décalage négatif sur mobile */
        padding: 0 8px !important;
    }

    .assistance-card-modern {
        width: 100% !important; /* Pleine largeur sur mobile */
        margin: 0 0 16px 0 !important;
        padding: 24px 16px !important;
    }

    .assistance-card-modern p {
        min-height: auto !important;
    }

    .topics-inner-box {
        padding: 24px 16px !important;
    }

    .assistance-topics-section h2 {
        font-size: 18px !important;
    }
}

/* ==========================================================
   PAGE À PROPOS DESIGN IMMERSIF (JUSBU)
   ========================================================== */

.about-hero-premium {
    background-color: #111827 !important; /* Fond noir e-commerce signature */
    color: #ffffff !important;
    text-align: center !important;
    padding: 60px 20px !important;
    box-sizing: border-box !important;
}

.about-hero-content {
    max-width: 700px !important;
    margin: 0 auto !important;
}

.about-hero-premium h1 {
    font-size: 30px !important;
    font-weight: 800 !important;
    margin: 0 0 14px 0 !important;
    letter-spacing: -0.5px !important;
}

.about-hero-premium p {
    font-size: 15px !important;
    color: #94a3b8 !important;
    line-height: 1.6 !important;
    margin: 0 !important;
}

/* Structure de la grille des cartes */
.about-grid-container {
    max-width: 1100px !important;
    margin: -30px auto 40px auto !important; /* Fait chevaucher délicatement sur le fond sombre */
    padding: 0 16px !important;
    display: block !important;
    text-align: center !important;
    box-sizing: border-box !important;
}

.about-card-modern {
    background-color: #ffffff !important;
    border: 1px solid #e2e8f0 !important;
    border-radius: 14px !important;
    box-shadow: 0 8px 20px rgba(0, 0, 0, 0.04) !important;
    padding: 30px 24px !important;
    display: inline-block !important;
    vertical-align: top !important;
    width: 47% !important; /* Affiche 2 cartes par ligne sur ordinateur */
    margin: 12px 1.5% !important;
    text-align: left !important; /* Lecture confortable alignée à gauche */
    box-sizing: border-box !important;
}

/* Carte exclusive pour la liste des points forts */
.about-card-modern.full-width-card {
    width: 97% !important;
    margin-left: 1.5% !important;
    margin-right: 1.5% !important;
}

.about-card-icon {
    width: 45px !important;
    height: 45px !important;
    background-color: #f8fafc !important;
    color: #16a34a !important; /* Vert Jusbu */
    border-radius: 8px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    font-size: 18px !important;
    margin-bottom: 16px !important;
}

.about-card-modern h2 {
    font-size: 19px !important;
    font-weight: 700 !important;
    color: #1e293b !important;
    margin: 0 0 12px 0 !important;
}

.about-card-modern p {
    font-size: 14px !important;
    color: #475569 !important;
    line-height: 1.6 !important;
    margin: 0 !important;
}

/* Grille interne pour la liste à puces "Pourquoi choisir Jusbu ?" */
.about-features-grid {
    display: grid !important;
    grid-template-columns: repeat(2, 1fr) !important; /* 2 colonnes d'atouts sur PC */
    gap: 12px !important;
    margin-top: 16px !important;
}

.feature-badge-item {
    display: flex !important;
    align-items: center !important;
    gap: 12px !important;
    background-color: #f8fafc !important;
    padding: 12px 16px !important;
    border-radius: 8px !important;
    box-sizing: border-box !important;
}

.feature-badge-item i {
    color: #16a34a !important; /* Icônes en vert signature */
    font-size: 15px !important;
}

.feature-badge-item span {
    font-size: 13.5px !important;
    font-weight: 600 !important;
    color: #334155 !important;
}

/* Bouton final */
.about-action-zone {
    text-align: center !important;
    margin: 40px 0 60px 0 !important;
}

.about-btn-shop {
    background-color: #111827 !important; /* Bouton noir épuré */
    color: #ffffff !important;
    text-decoration: none !important;
    padding: 14px 28px !important;
    border-radius: 8px !important;
    font-size: 14px !important;
    font-weight: 700 !important;
    display: inline-flex !important;
    align-items: center !important;
    gap: 10px !important;
    transition: background-color 0.2s !important;
    -webkit-tap-highlight-color: transparent !important;
}

.about-btn-shop:hover {
    background-color: #1f2937 !important;
}

/* ==========================================================
   ADAPTATION SMARTPHONE (MOBILE COMPACT RESPONSIVE)
   ========================================================== */
@media screen and (max-width: 768px) {
    .about-hero-premium {
        padding: 45px 16px !important;
    }

    .about-hero-premium h1 {
        font-size: 24px !important;
    }

    .about-grid-container {
        margin-top: 15px !important; /* Plus de décalage négatif sur petit écran */
        padding: 0 8px !important;
    }

    .about-card-modern,
    .about-card-modern.full-width-card {
        width: 100% !important; /* Cartes en pleine largeur sur ton Pixel 7 */
        margin: 0 0 16px 0 !important;
        padding: 24px 18px !important;
    }

    .about-features-grid {
        grid-template-columns: 1fr !important; /* Liste à puces sur 1 seule colonne sur mobile */
        gap: 10px !important;
    }
}

/* ==========================================================
   PAGE FAQ - QUESTIONS FRÉQUENTES PREMIUM (JUSBU)
   ========================================================== */

.faq-hero-premium {
    background-color: #111827 !important; /* Fond noir assorti à la nav */
    color: #ffffff !important;
    text-align: center !important;
    padding: 50px 20px !important;
    box-sizing: border-box !important;
}

.faq-hero-content {
    max-width: 650px !important;
    margin: 0 auto !important;
}

.faq-hero-premium h1 {
    font-size: 28px !important;
    font-weight: 800 !important;
    margin: 0 0 12px 0 !important;
    letter-spacing: -0.5px !important;
}

.faq-hero-premium p {
    font-size: 15px !important;
    color: #94a3b8 !important;
    line-height: 1.6 !important;
    margin: 0 !important;
}

/* Section contenant les blocs de questions */
.faq-main-section {
    max-width: 850px !important;
    margin: -30px auto 60px auto !important; /* Chevauchement fluide sur le fond noir */
    padding: 0 16px !important;
    box-sizing: border-box !important;
}

.faq-accordion-container {
    display: flex !important;
    flex-direction: column !important;
    gap: 16px !important;
}

/* Bloc moderne pour chaque bloc Question/Réponse */
.faq-item-modern {
    background-color: #ffffff !important;
    border: 1px solid #e2e8f0 !important;
    border-radius: 12px !important;
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.03) !important;
    padding: 24px !important;
    text-align: left !important;
    box-sizing: border-box !important;
}

/* En-tête de la question */
.faq-question-box {
    display: flex !important;
    align-items: center !important;
    gap: 14px !important;
    margin-bottom: 12px !important;
}

/* Pastille verte pour le point d'interrogation */
.faq-icon-q {
    width: 26px !important;
    height: 26px !important;
    background-color: rgba(22, 163, 74, 0.1) !important; /* Vert translucide */
    color: #16a34a !important; /* Vert Jusbu */
    font-size: 13px !important;
    font-weight: 800 !important;
    border-radius: 50% !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    flex-shrink: 0 !important;
}

.faq-question-box h3 {
    font-size: 16px !important;
    font-weight: 700 !important;
    color: #1e293b !important;
    margin: 0 !important;
}

/* Box contenant la réponse */
.faq-answer-box p {
    font-size: 14px !important;
    color: #475569 !important;
    line-height: 1.6 !important;
    margin: 0 !important;
    padding-left: 40px !important; /* Aligne le texte sous la question en évitant la pastille */
}

/* ==========================================================
   ADAPTATION SMARTPHONE (MOBILE RESPONSIVE COMPACT)
   ========================================================== */
@media screen and (max-width: 768px) {
    .faq-hero-premium {
        padding: 40px 16px !important;
    }

    .faq-hero-premium h1 {
        font-size: 24px !important;
    }

    .faq-main-section {
        margin-top: 15px !important; /* Annulation du chevauchement sur mobile */
        padding: 0 10px !important;
    }

    .faq-item-modern {
        padding: 16px !important;
        border-radius: 10px !important;
    }

    .faq-question-box {
        gap: 10px !important;
        margin-bottom: 8px !important;
    }

    .faq-question-box h3 {
        font-size: 14.5px !important;
    }

    .faq-answer-box p {
        padding-left: 0 !important; /* Plus de padding sur mobile pour maximiser l'espace de lecture */
        font-size: 13.5px !important;
    }
}




.login-block-alert{

    background:#fff4e5;

    border-left:5px solid #ff9800;

    border-radius:10px;

    padding:18px;

    margin:20px 0;

    text-align:center;

}

.login-block-alert strong{

    display:block;

    font-size:18px;

    margin-bottom:10px;

}

.login-block-alert i{

    font-size:28px;

    margin-bottom:10px;

    color:#ff9800;

}
.auth-btn-disabled{

    background: #bdbdbd !important;

    color: #f5f5f5 !important;

    cursor: not-allowed !important;

    opacity: .65;

    box-shadow: none;

    transform: none;

    pointer-events: none;

    transition: all .3s ease;
}

.auth-btn-disabled:hover{

    background: #bdbdbd !important;

    transform: none !important;

}