/* ==========================================================================
   DIENDI CARNET — EXPÉRIENCE MOBILE ÉPURÉE HAUTE PRÉCISION (STYLE UBER / FINTECH)
   Spécifiquement optimisé pour les petits écrans (smartphones <= 991px et <= 480px)
   Chaque cadre, chaque texte, chaque élément du nav au content et footer épuré.
   ========================================================================== */

@media (max-width: 991px) {

    /* --- 1. RESET GLOBAL SMARTPHONE & TYPOGRAPHIE --- */
    *, *::before, *::after {
        -webkit-tap-highlight-color: transparent !important;
        box-sizing: border-box !important;
    }

    html, body {
        background-color: #f8fafc !important;
        font-family: -apple-system, BlinkMacSystemFont, "SF Pro Text", "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif !important;
        color: #0f172a !important;
        -webkit-font-smoothing: antialiased !important;
        -moz-osx-font-smoothing: grayscale !important;
        overflow-x: hidden !important;
        width: 100% !important;
        margin: 0 !important;
        padding: 0 !important;
    }

    /* Supprimer l'empilement et marges excessives de bootstrap / atlantis */
    .wrapper {
        min-height: 100vh !important;
        background: #f8fafc !important;
        overflow-x: hidden !important;
    }

    .main-panel {
        width: 100% !important;
        padding: 0 !important;
        background: #f8fafc !important;
        min-height: 100vh !important;
    }

    .content {
        padding: 10px 14px calc(76px + env(safe-area-inset-bottom)) 14px !important;
        margin-top: 54px !important;
        background: #f8fafc !important;
    }

    .page-inner {
        padding: 0 !important;
        margin: 0 !important;
    }

    .container, .container-fluid {
        padding-left: 12px !important;
        padding-right: 12px !important;
        max-width: 100% !important;
    }

    .row {
        margin-left: -6px !important;
        margin-right: -6px !important;
    }

    .row > [class*="col-"] {
        padding-left: 6px !important;
        padding-right: 6px !important;
    }

    /* Masquer impérativement tous les éléments desktop encombrants */
    .sidebar,
    #sidebarModern,
    .logo-header,
    .navbar-header,
    .nav-toggle,
    .sidenav-toggler,
    .topbar-toggler,
    .desktop-table,
    .carnets-header,
    .dashboard-header,
    .header_section_top,
    .header_section,
    .how-it-works-section,
    .why-section,
    .cta-section,
    .footer_section,
    .copyright_section {
        display: none !important;
    }

    /* --- 2. TOP APP BAR NATIVE (STYLE UBER / REVOLUT) --- */
    .main-header {
        position: fixed !important;
        top: 0 !important;
        left: 0 !important;
        right: 0 !important;
        height: 54px !important;
        z-index: 99998 !important;
        box-shadow: none !important;
        border: none !important;
        background: transparent !important;
    }

    .mobile-top-bar,
    .logo_section .mobile-header {
        position: fixed !important;
        top: 0 !important;
        left: 0 !important;
        right: 0 !important;
        height: 54px !important;
        background: #ffffff !important;
        border-bottom: 1px solid #e2e8f0 !important;
        display: flex !important;
        align-items: center !important;
        justify-content: space-between !important;
        padding: 0 14px !important;
        z-index: 99998 !important;
        box-shadow: 0 1px 2px rgba(15, 23, 42, 0.03) !important;
    }

    .logo_section {
        position: fixed !important;
        top: 0 !important;
        left: 0 !important;
        right: 0 !important;
        height: 54px !important;
        z-index: 99998 !important;
        background: #ffffff !important;
        border-bottom: 1px solid #e2e8f0 !important;
        padding: 0 !important;
    }

    .logo_section .container {
        padding: 0 !important;
    }

    /* Bouton retour tactile native */
    .mtb-btn,
    .mobile-back-btn,
    .mobile-icon-btn {
        width: 38px !important;
        height: 38px !important;
        border-radius: 10px !important;
        background: #f8fafc !important;
        color: #0f172a !important;
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;
        text-decoration: none !important;
        font-size: 15px !important;
        border: 1px solid #e2e8f0 !important;
        flex-shrink: 0 !important;
        transition: background .12s ease !important;
    }

    .mtb-btn:active,
    .mobile-icon-btn:active {
        background: #e2e8f0 !important;
    }

    /* Titre centré ultra-propre */
    .mtb-title {
        font-size: 15px !important;
        font-weight: 700 !important;
        color: #0f172a !important;
        letter-spacing: -0.2px !important;
        text-align: center !important;
        flex: 1 !important;
        white-space: nowrap !important;
        overflow: hidden !important;
        text-overflow: ellipsis !important;
        padding: 0 10px !important;
    }

    /* Logo dans la top bar aligné à gauche */
    .mobile-header .logo,
    .logo_section .mobile-header .logo {
        position: static !important;
        transform: none !important;
        left: auto !important;
        margin: 0 !important;
        padding: 0 !important;
        display: flex !important;
        align-items: center !important;
    }

    .mtb-logo img,
    .mobile-header .logo img {
        height: 42px !important;
        width: auto !important;
        max-width: 160px !important;
        display: block !important;
        object-fit: contain !important;
        border-radius: 9px !important;
    }

    /* Avatar utilisateur dans la top bar */
    .mtb-avatar {
        width: 36px !important;
        height: 36px !important;
        border-radius: 10px !important;
        background: #0f766e !important;
        color: #ffffff !important;
        font-size: 13px !important;
        font-weight: 700 !important;
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;
        text-decoration: none !important;
        flex-shrink: 0 !important;
    }

    .mtb-actions,
    .mobile-actions {
        display: flex !important;
        align-items: center !important;
        gap: 8px !important;
    }

    .cart-badge {
        position: relative !important;
    }

    .cart-badge .cart-count {
        position: absolute !important;
        top: -4px !important;
        right: -4px !important;
        background: #ef4444 !important;
        color: #ffffff !important;
        font-size: 10px !important;
        font-weight: 700 !important;
        min-width: 16px !important;
        height: 16px !important;
        line-height: 16px !important;
        text-align: center !important;
        border-radius: 8px !important;
        padding: 0 3px !important;
    }

    /* --- 3. TOUS LES CADRES / CARTES (SURFACE ÉPURÉE SANS SURCHARGE) --- */
    .card,
    .dashboard-card,
    .profil-section,
    .profil-hero,
    .info-card,
    .details-card,
    .table-card,
    .category-card,
    .choix-card,
    .mobile-item,
    .mv-item,
    .mc-item,
    .cart-item,
    .tuto-section,
    .cgu-article,
    .pp-card,
    .pp-item,
    .choix-image-card,
    .choix-info-card,
    .choix-article-section {
        background: #ffffff !important;
        border: 1px solid #e2e8f0 !important;
        border-radius: 16px !important;
        box-shadow: 0 1px 3px rgba(15, 23, 42, 0.02) !important;
        margin-bottom: 12px !important;
        overflow: hidden !important;
    }

    /* Supprimer le double padding imbriqué de bootstrap */
    .dashboard-card {
        border: none !important;
        background: transparent !important;
        box-shadow: none !important;
        margin-bottom: 0 !important;
    }

    .dashboard-card > .card-body {
        padding: 0 !important;
        background: transparent !important;
    }

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

    /* --- 4. EN-TÊTE PROFIL CLIENT SOBRE (DASHBOARD) --- */
    .dashboard-header-clean {
        background: #ffffff !important;
        border: 1px solid #e2e8f0 !important;
        border-radius: 16px !important;
        padding: 14px 16px !important;
        display: flex !important;
        align-items: center !important;
        justify-content: space-between !important;
        gap: 12px !important;
        margin-bottom: 12px !important;
        box-shadow: 0 1px 3px rgba(15, 23, 42, 0.02) !important;
    }

    .dhc-left {
        display: flex !important;
        align-items: center !important;
        gap: 12px !important;
        min-width: 0 !important;
    }

    .mini-avatar-clean {
        width: 42px !important;
        height: 42px !important;
        border-radius: 12px !important;
        background: #0f766e !important;
        color: #ffffff !important;
        font-size: 16px !important;
        font-weight: 700 !important;
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;
        flex-shrink: 0 !important;
    }

    .dhc-info {
        min-width: 0 !important;
    }

    .dhc-name {
        font-size: 15px !important;
        font-weight: 700 !important;
        color: #0f172a !important;
        line-height: 1.2 !important;
        white-space: nowrap !important;
        overflow: hidden !important;
        text-overflow: ellipsis !important;
    }

    .dhc-code {
        font-size: 12px !important;
        color: #64748b !important;
        margin-top: 3px !important;
    }

    .dhc-code strong {
        color: #0f766e !important;
        font-weight: 700 !important;
    }

    .btn-clean-primary {
        background: #0f766e !important;
        color: #ffffff !important;
        padding: 0 14px !important;
        border-radius: 10px !important;
        font-size: 12px !important;
        font-weight: 600 !important;
        height: 38px !important;
        display: inline-flex !important;
        align-items: center !important;
        justify-content: center !important;
        gap: 5px !important;
        text-decoration: none !important;
        flex-shrink: 0 !important;
        border: none !important;
    }

    /* --- 5. STATS FAÇON WIDGET MOBILE (GRILLE 2x2 PARFAITE) --- */
    .carnets-stats,
    .carnet-stats {
        display: grid !important;
        grid-template-columns: repeat(2, 1fr) !important;
        gap: 10px !important;
        margin-bottom: 14px !important;
        padding: 0 !important;
    }

    .cstat,
    .carnet-stat-card {
        background: #ffffff !important;
        border: 1px solid #e2e8f0 !important;
        border-radius: 14px !important;
        padding: 12px !important;
        display: flex !important;
        align-items: center !important;
        gap: 10px !important;
        box-shadow: 0 1px 2px rgba(15, 23, 42, 0.02) !important;
        margin: 0 !important;
    }

    .cstat-icon,
    .carnet-stat-icon {
        width: 38px !important;
        height: 38px !important;
        border-radius: 10px !important;
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;
        font-size: 15px !important;
        flex-shrink: 0 !important;
    }

    .cs-orange, .bg-reste { background: #fff7ed !important; color: #ea580c !important; }
    .cs-blue,   .bg-verse { background: #f0fdfa !important; color: #0f766e !important; }
    .cs-green,  .bg-total { background: #f0fdf4 !important; color: #16a34a !important; }
    .cs-red,    .bg-code  { background: #fef2f2 !important; color: #dc2626 !important; }
    .bg-jour              { background: #faf5ff !important; color: #9333ea !important; }

    .cstat-body,
    .carnet-stat-body {
        min-width: 0 !important;
    }

    .cstat-num,
    .carnet-stat-value {
        font-size: 18px !important;
        font-weight: 800 !important;
        color: #0f172a !important;
        line-height: 1.1 !important;
        word-break: break-word !important;
    }

    .cstat-num small,
    .carnet-stat-value small {
        font-size: 11px !important;
        font-weight: 600 !important;
        color: #64748b !important;
    }

    .cstat-lbl,
    .carnet-stat-label {
        font-size: 11px !important;
        font-weight: 600 !important;
        color: #64748b !important;
        text-transform: uppercase !important;
        letter-spacing: 0.3px !important;
        margin-top: 3px !important;
    }

    /* Titres de section épurés */
    .section-title {
        font-size: 15px !important;
        font-weight: 700 !important;
        color: #0f172a !important;
        margin: 14px 0 10px 0 !important;
        letter-spacing: -0.2px !important;
        display: flex !important;
        align-items: center !important;
        justify-content: space-between !important;
    }

    /* --- 6. LISTE DES CARNETS MOBILE (STYLE CARTE FINTECH) --- */
    .mobile-carnets {
        display: flex !important;
        flex-direction: column !important;
        gap: 10px !important;
    }

    .mc-item {
        background: #ffffff !important;
        border: 1px solid #e2e8f0 !important;
        border-radius: 16px !important;
        padding: 14px 16px !important;
        margin-bottom: 0 !important;
        box-shadow: 0 1px 3px rgba(15, 23, 42, 0.02) !important;
    }

    .mc-top {
        display: flex !important;
        align-items: center !important;
        justify-content: space-between !important;
        padding-bottom: 10px !important;
        margin-bottom: 10px !important;
        border-bottom: 1px solid #f1f5f9 !important;
    }

    .mc-code {
        font-size: 14px !important;
        font-weight: 700 !important;
        color: #0f172a !important;
        letter-spacing: -0.2px !important;
    }

    /* Badges façon pilule pastel */
    .cbadge,
    .badge,
    .mc-badge,
    .mv-badge {
        font-size: 11px !important;
        font-weight: 600 !important;
        padding: 4px 10px !important;
        border-radius: 9999px !important;
        display: inline-flex !important;
        align-items: center !important;
        gap: 4px !important;
        border: none !important;
        line-height: 1.2 !important;
    }

    .cbadge-success, .badge-success, .mv-badge-success { background: #f0fdf4 !important; color: #15803d !important; }
    .cbadge-danger,  .badge-danger,  .mv-badge-danger  { background: #fef2f2 !important; color: #b91c1c !important; }
    .cbadge-warning, .badge-warning, .mv-badge-warning { background: #fffbeb !important; color: #b45309 !important; }
    .cbadge-info,    .badge-info,    .mv-badge-info    { background: #f0fdfa !important; color: #0f766e !important; }
    .cbadge-primary, .badge-primary, .mv-badge-primary { background: #f1f5f9 !important; color: #334155 !important; }

    .mc-row {
        display: flex !important;
        align-items: center !important;
        justify-content: space-between !important;
        padding: 5px 0 !important;
        border: none !important;
        font-size: 13px !important;
    }

    .mc-row-label {
        color: #64748b !important;
        font-weight: 500 !important;
    }

    .mc-row-value {
        color: #0f172a !important;
        font-weight: 700 !important;
    }

    /* Boutons d'action en bas de carte */
    .mc-actions {
        display: grid !important;
        grid-template-columns: 1fr 1fr !important;
        gap: 8px !important;
        margin-top: 12px !important;
        padding-top: 10px !important;
        border-top: 1px solid #f1f5f9 !important;
    }

    .mc-actions:has(> :only-child) {
        grid-template-columns: 1fr !important;
    }

    .mc-btn {
        height: 40px !important;
        border-radius: 12px !important;
        font-size: 13px !important;
        font-weight: 600 !important;
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;
        gap: 6px !important;
        text-decoration: none !important;
        transition: opacity .12s ease !important;
        border: none !important;
    }

    .mc-btn-versement {
        background: #0f766e !important;
        color: #ffffff !important;
    }
    .mc-btn-versement:active {
        opacity: 0.9 !important;
    }

    .mc-btn-details {
        background: #f1f5f9 !important;
        color: #334155 !important;
        border: 1px solid #e2e8f0 !important;
    }
    .mc-btn-details:active {
        background: #e2e8f0 !important;
    }

    /* --- 7. PAGE PROFIL SUR MOBILE --- */
    .profil-hero {
        background: #ffffff !important;
        border: 1px solid #e2e8f0 !important;
        border-radius: 16px !important;
        padding: 20px 16px !important;
        margin-bottom: 12px !important;
        text-align: center !important;
        box-shadow: 0 1px 3px rgba(15, 23, 42, 0.02) !important;
    }

    .profil-avatar {
        width: 64px !important;
        height: 64px !important;
        border-radius: 16px !important;
        background: #0f766e !important;
        color: #ffffff !important;
        font-size: 24px !important;
        font-weight: 700 !important;
        margin: 0 auto 12px auto !important;
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;
    }

    .profil-hero-info h2 {
        font-size: 17px !important;
        font-weight: 700 !important;
        color: #0f172a !important;
        margin: 0 0 6px 0 !important;
    }

    .profil-hero-info p {
        font-size: 13px !important;
        color: #64748b !important;
        margin: 0 0 10px 0 !important;
    }

    .profil-code-badge {
        display: inline-flex !important;
        align-items: center !important;
        gap: 6px !important;
        background: #f1f5f9 !important;
        color: #0f766e !important;
        border: 1px solid #e2e8f0 !important;
        padding: 4px 12px !important;
        border-radius: 20px !important;
        font-size: 12px !important;
        font-weight: 700 !important;
    }

    .profil-section {
        background: #ffffff !important;
        border: 1px solid #e2e8f0 !important;
        border-radius: 16px !important;
        margin-bottom: 12px !important;
        overflow: hidden !important;
    }

    .profil-section-header {
        padding: 14px 16px 10px !important;
        border-bottom: 1px solid #f1f5f9 !important;
        display: flex !important;
        align-items: center !important;
        gap: 10px !important;
    }

    .profil-section-header i {
        color: #0f766e !important;
        font-size: 16px !important;
    }

    .profil-section-header h4 {
        font-size: 14px !important;
        font-weight: 700 !important;
        color: #0f172a !important;
        margin: 0 !important;
    }

    .profil-rows {
        padding: 0 !important;
        margin: 0 !important;
        list-style: none !important;
    }

    .profil-row {
        padding: 12px 16px !important;
        border-bottom: 1px solid #f8fafc !important;
        display: flex !important;
        align-items: center !important;
        justify-content: space-between !important;
    }

    .profil-row:last-child {
        border-bottom: none !important;
    }

    .profil-row-left {
        display: flex !important;
        align-items: center !important;
        gap: 12px !important;
    }

    .profil-row-icon {
        width: 34px !important;
        height: 34px !important;
        border-radius: 10px !important;
        background: #f8fafc !important;
        color: #0f766e !important;
        border: 1px solid #e2e8f0 !important;
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;
        font-size: 14px !important;
        flex-shrink: 0 !important;
    }

    .profil-row-label {
        font-size: 11px !important;
        color: #64748b !important;
        text-transform: uppercase !important;
        letter-spacing: 0.3px !important;
    }

    .profil-row-value {
        font-size: 13px !important;
        font-weight: 600 !important;
        color: #0f172a !important;
        margin-top: 2px !important;
    }

    /* --- 8. PAGE DÉTAILS DU CARNET SUR MOBILE --- */
    .profile-card,
    .details-body {
        padding: 0 !important;
    }

    .profile-image-box {
        background: #f8fafc !important;
        border-radius: 14px !important;
        padding: 12px !important;
        text-align: center !important;
    }

    .profile-image-box img {
        max-height: 160px !important;
        max-width: 100% !important;
        object-fit: contain !important;
        border-radius: 10px !important;
    }

    .btn-zone-modern {
        display: flex !important;
        flex-direction: column !important;
        gap: 8px !important;
    }

    .btn-carnet {
        width: 100% !important;
        height: 44px !important;
        border-radius: 12px !important;
        font-size: 14px !important;
        font-weight: 600 !important;
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;
        gap: 8px !important;
        text-decoration: none !important;
        border: none !important;
    }

    .btn-carnet-pay {
        background: #0f766e !important;
        color: #ffffff !important;
    }

    .btn-carnet-back {
        background: #f1f5f9 !important;
        color: #334155 !important;
        border: 1px solid #e2e8f0 !important;
    }

    /* Versements mobiles */
    .mobile-filter-box {
        margin-bottom: 12px !important;
    }

    .mobile-filter-input {
        width: 100% !important;
        height: 42px !important;
        border: 1px solid #e2e8f0 !important;
        border-radius: 12px !important;
        padding: 0 14px !important;
        font-size: 13px !important;
        background: #ffffff !important;
        color: #0f172a !important;
        outline: none !important;
    }

    .mobile-filter-input:focus {
        border-color: #0f766e !important;
        box-shadow: 0 0 0 3px rgba(15, 118, 110, 0.12) !important;
    }

    .mv-item {
        background: #ffffff !important;
        border: 1px solid #e2e8f0 !important;
        border-radius: 14px !important;
        padding: 12px 14px !important;
        margin-bottom: 8px !important;
        display: flex !important;
        align-items: center !important;
        justify-content: space-between !important;
        gap: 10px !important;
    }

    .mv-code {
        font-size: 13px !important;
        font-weight: 700 !important;
        color: #0f172a !important;
        margin-bottom: 3px !important;
    }

    .mv-date {
        font-size: 11px !important;
        color: #64748b !important;
    }

    .mv-amount {
        font-size: 14px !important;
        font-weight: 800 !important;
        color: #0f766e !important;
        text-align: right !important;
        white-space: nowrap !important;
    }

    /* --- 9. MARKET / BOUTIQUE SUR MOBILE --- */
    .banner_bg_main {
        background: #f8fafc !important;
    }

    .fashion_section {
        padding: 12px 0 !important;
        margin-top: 54px !important;
    }

    .fashion_taital {
        font-size: 17px !important;
        font-weight: 700 !important;
        color: #0f172a !important;
        margin-bottom: 12px !important;
        letter-spacing: -0.2px !important;
        text-align: left !important;
        padding: 0 4px !important;
    }

    /* Cartes catégories et choix en GRILLE 2 COLONNES SUR MOBILE */
    #categories-container .row,
    #choix-container .row {
        margin-left: -5px !important;
        margin-right: -5px !important;
        display: flex !important;
        flex-wrap: wrap !important;
    }

    #categories-container [class*="col-"],
    #choix-container [class*="col-"] {
        padding-left: 5px !important;
        padding-right: 5px !important;
        margin-bottom: 10px !important;
        flex: 0 0 50% !important;
        max-width: 50% !important;
    }

    .category-card,
    .choix-card {
        background: #ffffff !important;
        border: 1px solid #e2e8f0 !important;
        border-radius: 14px !important;
        overflow: hidden !important;
        box-shadow: 0 1px 3px rgba(15, 23, 42, 0.02) !important;
        margin-bottom: 0 !important;
        height: 100% !important;
        display: flex !important;
        flex-direction: column !important;
        cursor: pointer !important;
    }

    .category-img,
    .choix-img {
        height: 115px !important;
        overflow: hidden !important;
        background: #f8fafc !important;
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;
        position: relative !important;
    }

    .category-img img,
    .choix-img img {
        width: 100% !important;
        height: 100% !important;
        object-fit: cover !important;
    }

    .category-info,
    .choix-body {
        padding: 10px !important;
        flex: 1 !important;
        display: flex !important;
        flex-direction: column !important;
        justify-content: space-between !important;
    }

    .category-info h3,
    .choix-header h4 {
        font-size: 13px !important;
        font-weight: 700 !important;
        color: #0f172a !important;
        margin: 0 0 4px 0 !important;
        line-height: 1.3 !important;
        display: -webkit-box !important;
        -webkit-line-clamp: 2 !important;
        -webkit-box-orient: vertical !important;
        overflow: hidden !important;
        min-height: 34px !important;
    }

    .category-info p {
        display: none !important; /* Masquer la description longue sur 2 colonnes pour un rendu ultra-propre */
    }

    .category-info .badge,
    .choix-body .badge {
        font-size: 9px !important;
        padding: 3px 6px !important;
        margin-right: 3px !important;
    }

    .choix-header {
        padding: 8px 10px !important;
        display: flex !important;
        align-items: center !important;
        justify-content: space-between !important;
        border-bottom: 1px solid #f1f5f9 !important;
    }

    .choix-price {
        font-size: 12px !important;
        font-weight: 800 !important;
        color: #0f766e !important;
        white-space: nowrap !important;
    }

    .btn-add-cart,
    .btn_buy,
    .category-info .btn {
        background: #0f766e !important;
        color: #ffffff !important;
        height: 34px !important;
        border-radius: 8px !important;
        font-weight: 600 !important;
        font-size: 11px !important;
        width: 100% !important;
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;
        text-decoration: none !important;
        border: none !important;
        padding: 0 6px !important;
        margin-top: 6px !important;
    }

    .btn-add-cart.btn-danger,
    .btn-add-cart.btn-cart-remove,
    .btn-add-cart-detail.btn-danger,
    .btn-add-cart-detail.btn-cart-remove {
        background: #ef4444 !important;
        background-color: #ef4444 !important;
        color: #ffffff !important;
        border: none !important;
        box-shadow: 0 2px 6px rgba(239, 68, 68, 0.25) !important;
    }

    .btn-add-cart.btn-danger:hover,
    .btn-add-cart.btn-danger:active,
    .btn-add-cart.btn-cart-remove:hover,
    .btn-add-cart.btn-cart-remove:active,
    .btn-add-cart-detail.btn-danger:hover,
    .btn-add-cart-detail.btn-danger:active,
    .btn-add-cart-detail.btn-cart-remove:hover,
    .btn-add-cart-detail.btn-cart-remove:active {
        background: #dc2626 !important;
        background-color: #dc2626 !important;
        color: #ffffff !important;
    }

    .choix-meta {
        font-size: 11px !important;
        color: #64748b !important;
        margin-bottom: 4px !important;
    }

    /* --- BARRE DE FILTRE COMPACTE HAUTE PRÉCISION (STYLE UBER) --- */
    .filter-bar {
        background: #ffffff !important;
        border: 1px solid #e2e8f0 !important;
        border-radius: 14px !important;
        box-shadow: 0 1px 3px rgba(15, 23, 42, 0.02) !important;
        margin-bottom: 12px !important;
        overflow: hidden !important;
        padding: 0 !important;
    }

    .filter-bar .card-body {
        padding: 8px 10px !important;
        display: flex !important;
        flex-direction: column !important;
        gap: 0 !important;
    }

    .filter-main-row {
        display: flex !important;
        align-items: center !important;
        gap: 8px !important;
        width: 100% !important;
    }

    .filter-search-wrap {
        flex: 1 !important;
        position: relative !important;
        display: flex !important;
        align-items: center !important;
    }

    .filter-search-icon {
        position: absolute !important;
        left: 12px !important;
        color: #94a3b8 !important;
        font-size: 13px !important;
        pointer-events: none !important;
    }

    .filter-search-wrap .filter-input {
        width: 100% !important;
        height: 38px !important;
        border-radius: 10px !important;
        border: 1px solid #e2e8f0 !important;
        background: #f8fafc !important;
        padding-left: 34px !important;
        padding-right: 12px !important;
        font-size: 13px !important;
        color: #0f172a !important;
    }

    .filter-search-wrap .filter-input:focus {
        border-color: #0f766e !important;
        background: #ffffff !important;
    }

    .btn-filter-toggle {
        height: 38px !important;
        padding: 0 12px !important;
        border-radius: 10px !important;
        background: #f1f5f9 !important;
        color: #334155 !important;
        border: 1px solid #e2e8f0 !important;
        display: inline-flex !important;
        align-items: center !important;
        gap: 6px !important;
        font-size: 12px !important;
        font-weight: 600 !important;
        flex-shrink: 0 !important;
        cursor: pointer !important;
        transition: all .15s ease !important;
        user-select: none !important;
    }

    .btn-filter-toggle * {
        pointer-events: none !important;
    }

    .btn-filter-toggle.active,
    .btn-filter-toggle.has-filters {
        background: #0f766e !important;
        color: #ffffff !important;
        border-color: #0f766e !important;
    }

    .filter-reset-btn {
        width: 38px !important;
        height: 38px !important;
        border-radius: 10px !important;
        background: #f8fafc !important;
        color: #64748b !important;
        border: 1px solid #e2e8f0 !important;
        display: inline-flex !important;
        align-items: center !important;
        justify-content: center !important;
        font-size: 13px !important;
        flex-shrink: 0 !important;
        cursor: pointer !important;
        padding: 0 !important;
    }

    .filter-reset-btn:active {
        background: #fee2e2 !important;
        color: #dc2626 !important;
    }

    /* Ligne avancée (Trier, Min-Max, Types) pliable sur mobile */
    .filter-bar .filter-advanced-row {
        display: none !important;
        margin-top: 8px !important;
        padding-top: 8px !important;
        border-top: 1px solid #f1f5f9 !important;
        flex-direction: column !important;
        gap: 8px !important;
        width: 100% !important;
    }

    .filter-bar .filter-advanced-row.open {
        display: flex !important;
        animation: filterDrop .18s ease-out !important;
    }

    @keyframes filterDrop {
        from { opacity: 0; transform: translateY(-6px); }
        to { opacity: 1; transform: translateY(0); }
    }

    .filter-advanced-row .filter-group {
        width: 100% !important;
        margin: 0 !important;
    }

    .filter-group-sort .filter-select {
        height: 36px !important;
        border-radius: 8px !important;
        border: 1px solid #e2e8f0 !important;
        font-size: 12px !important;
        font-weight: 600 !important;
        color: #0f172a !important;
        background: #ffffff !important;
        padding: 0 10px !important;
        width: 100% !important;
    }

    .filter-price-wrap {
        display: flex !important;
        align-items: center !important;
        gap: 8px !important;
        width: 100% !important;
    }

    .filter-price-wrap .filter-input {
        flex: 1 !important;
        height: 36px !important;
        border-radius: 8px !important;
        border: 1px solid #e2e8f0 !important;
        padding: 0 10px !important;
        font-size: 12px !important;
        background: #ffffff !important;
    }

    .price-sep {
        color: #94a3b8 !important;
        font-weight: 700 !important;
    }

    /* Supprimer les gros labels encombrants sur mobile */
    .filter-label {
        display: none !important;
    }

    /* --- 10. BOTTOM NAVIGATION BAR UNIFIÉE (STYLE UBER) --- */
    .bnav {
        display: flex !important;
        position: fixed !important;
        bottom: 0 !important;
        left: 0 !important;
        right: 0 !important;
        height: 64px !important;
        background: #ffffff !important;
        border-top: 1px solid #e2e8f0 !important;
        z-index: 99999 !important;
        padding-bottom: env(safe-area-inset-bottom) !important;
        box-shadow: 0 -2px 10px rgba(15, 23, 42, 0.04) !important;
        align-items: stretch !important;
        justify-content: space-around !important;
    }

    .bnav-item {
        flex: 1 !important;
        display: flex !important;
        flex-direction: column !important;
        align-items: center !important;
        justify-content: center !important;
        gap: 4px !important;
        color: #94a3b8 !important;
        text-decoration: none !important;
        position: relative !important;
        padding: 6px 2px 5px 2px !important;
        transition: color .12s ease !important;
    }

    .bnav-item i {
        font-size: 22px !important;
        line-height: 1.1 !important;
    }

    .bnav-item span {
        font-size: 11.5px !important;
        font-weight: 500 !important;
        letter-spacing: -0.2px !important;
        white-space: nowrap !important;
    }

    .bnav-item.active {
        color: #0f766e !important;
    }

    .bnav-item.active span {
        font-weight: 700 !important;
    }

    .bnav-item.active i {
        transform: scale(1.08) !important;
        transition: transform .15s ease !important;
    }

    .bnav-badge {
        position: absolute !important;
        top: 4px !important;
        right: calc(50% - 18px) !important;
        background: #ef4444 !important;
        color: #ffffff !important;
        font-size: 10px !important;
        font-weight: 700 !important;
        min-width: 18px !important;
        height: 18px !important;
        line-height: 18px !important;
        text-align: center !important;
        border-radius: 999px !important;
        padding: 0 4px !important;
        display: none !important;
    }

    /* --- 11. FORMULAIRES & INPUTS SMARTPHONE --- */
    input[type="text"],
    input[type="number"],
    input[type="tel"],
    input[type="password"],
    select,
    textarea {
        font-size: 14px !important;
        height: 44px !important;
        border-radius: 12px !important;
        border: 1px solid #e2e8f0 !important;
        padding: 0 14px !important;
        background: #ffffff !important;
        color: #0f172a !important;
        width: 100% !important;
        outline: none !important;
    }

    input:focus, select:focus, textarea:focus {
        border-color: #0f766e !important;
        box-shadow: 0 0 0 3px rgba(15, 118, 110, 0.10) !important;
    }
}

/* ==========================================================================
   OPTIMISATIONS SPÉCIFIQUES POUR TRÈS PETITS ÉCRANS (<= 380px)
   Ex: iPhone SE, petits Android (320px - 375px)
   ========================================================================== */
@media (max-width: 380px) {
    .content {
        padding-left: 10px !important;
        padding-right: 10px !important;
    }

    .cstat-num,
    .carnet-stat-value {
        font-size: 16px !important;
    }

    .cstat-icon,
    .carnet-stat-icon {
        width: 32px !important;
        height: 32px !important;
        font-size: 13px !important;
    }

    .bnav-item span {
        font-size: 10.5px !important;
    }

    .bnav-item i {
        font-size: 20px !important;
    }

    .mc-btn {
        height: 38px !important;
        font-size: 12px !important;
    }

    .mtb-title {
        font-size: 14px !important;
    }

    .mtb-logo img,
    .mobile-header .logo img {
        height: 38px !important;
    }
}

/* ==========================================================================
   SUPPORT DESKTOP / PC (>= 992px) : MASQUAGE ACTIONS MOBILES & LOGO CENTRÉ
   ========================================================================== */
@media (min-width: 992px) {
    .mobile-actions,
    .mobile-header,
    .mtb-btn,
    .mtb-title,
    .mobile-icon-btn {
        display: none !important;
    }

    .desktop-logo-img {
        height: 56px !important;
        width: auto !important;
        max-width: 220px !important;
        border-radius: 12px !important;
        box-shadow: 0 4px 14px rgba(0, 0, 0, 0.15) !important;
        display: inline-block !important;
        object-fit: contain !important;
    }
}

/* ==========================================================================
   SUPPORT DESKTOP / TABLETTE POUR LA BARRE DE FILTRE
   ========================================================================== */
@media (min-width: 768px) {
    .filter-bar .card-body {
        display: flex !important;
        flex-direction: row !important;
        align-items: center !important;
        gap: 12px !important;
        padding: 12px 16px !important;
    }

    .filter-main-row {
        width: auto !important;
        flex: 1 !important;
    }

    .btn-filter-toggle {
        display: none !important;
    }

    .filter-bar .filter-advanced-row {
        display: flex !important;
        flex-direction: row !important;
        align-items: center !important;
        gap: 10px !important;
        margin-top: 0 !important;
        padding-top: 0 !important;
        border-top: none !important;
    }

    .filter-bar .filter-advanced-row .filter-group {
        width: auto !important;
    }

    .filter-price-wrap .filter-input {
        width: 85px !important;
        flex: none !important;
    }

    .filter-label {
        display: block !important;
        font-size: 11px !important;
        font-weight: 700 !important;
        color: #64748b !important;
        text-transform: uppercase !important;
        margin-bottom: 4px !important;
    }
}

/* ==========================================================================
   COMPOSANT MOBILE "CHARGER PLUS" (LOAD MORE) MODERNE
   ========================================================================== */
.loadmore-wrapper {
    padding: 18px 8px 30px !important;
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    width: 100% !important;
}

.loadmore-meta {
    font-size: 12px !important;
    color: #64748b !important;
    font-weight: 500 !important;
}

.loadmore-meta strong {
    color: #0f172a !important;
    font-weight: 700 !important;
}

.loadmore-progress {
    width: 100% !important;
    max-width: 260px !important;
    height: 5px !important;
    background: #e2e8f0 !important;
    border-radius: 999px !important;
    overflow: hidden !important;
    margin: 8px auto 14px !important;
}

.loadmore-progress-bar {
    height: 100% !important;
    background: #0f766e !important;
    border-radius: 999px !important;
    transition: width .3s ease !important;
}

.btn-loadmore {
    width: 100% !important;
    max-width: 320px !important;
    height: 44px !important;
    background: #ffffff !important;
    color: #0f766e !important;
    border: 1.5px solid #0f766e !important;
    border-radius: 12px !important;
    font-size: 13px !important;
    font-weight: 600 !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 8px !important;
    box-shadow: 0 1px 3px rgba(15, 23, 42, 0.04) !important;
    transition: all .15s ease !important;
    cursor: pointer !important;
    user-select: none !important;
    text-decoration: none !important;
}

.btn-loadmore:hover,
.btn-loadmore:focus {
    background: #0f766e !important;
    color: #ffffff !important;
    text-decoration: none !important;
}

.btn-loadmore:active {
    transform: scale(0.98) !important;
    background: #0d5e56 !important;
    color: #ffffff !important;
}

.btn-loadmore:disabled {
    opacity: 0.7 !important;
    cursor: not-allowed !important;
    transform: none !important;
}

.loadmore-badge {
    background: #f1f5f9 !important;
    color: #475569 !important;
    font-size: 11px !important;
    font-weight: 600 !important;
    padding: 2px 8px !important;
    border-radius: 999px !important;
    margin-left: 4px !important;
    transition: all .15s ease !important;
}

.btn-loadmore:hover .loadmore-badge,
.btn-loadmore:focus .loadmore-badge,
.btn-loadmore:active .loadmore-badge {
    background: rgba(255, 255, 255, 0.25) !important;
    color: #ffffff !important;
}

.loadmore-end {
    font-size: 12px !important;
    color: #64748b !important;
    display: inline-flex !important;
    align-items: center !important;
    gap: 6px !important;
    padding: 8px 16px !important;
    background: #f1f5f9 !important;
    border-radius: 999px !important;
    font-weight: 500 !important;
}

.loadmore-end .fa-check-circle {
    color: #0f766e !important;
}

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

.choix-item-anim {
    animation: cardFadeIn 0.25s ease-out forwards;
}

/* ==========================================================================
   1. SKELETON SHIMMER LOADING (STYLE FLUTTER WIDGETS)
   ========================================================================== */
@keyframes shimmerAnim {
    0% {
        background-position: -200% 0;
    }
    100% {
        background-position: 200% 0;
    }
}

.shimmer {
    background: linear-gradient(90deg, #f1f5f9 25%, #e2e8f0 37%, #f1f5f9 63%) !important;
    background-size: 400% 100% !important;
    animation: shimmerAnim 1.4s ease infinite !important;
}

.skeleton-card {
    background: #ffffff !important;
    border: 1px solid #e2e8f0 !important;
    border-radius: 14px !important;
    padding: 10px !important;
    display: flex !important;
    flex-direction: column !important;
    gap: 8px !important;
    box-shadow: 0 1px 3px rgba(15, 23, 42, 0.02) !important;
}

.skeleton-header {
    height: 16px !important;
    border-radius: 6px !important;
    width: 75% !important;
}

.skeleton-img {
    height: 110px !important;
    border-radius: 10px !important;
    width: 100% !important;
}

.skeleton-line {
    height: 12px !important;
    border-radius: 4px !important;
}

.skeleton-btn {
    height: 32px !important;
    border-radius: 8px !important;
    margin-top: 4px !important;
    width: 100% !important;
}

/* ==========================================================================
   2. NATIVE MOBILE SNACKBAR / TOAST (STYLE FLUTTER)
   ========================================================================== */
.mobile-snackbar-container {
    position: fixed !important;
    bottom: calc(72px + env(safe-area-inset-bottom)) !important;
    left: 14px !important;
    right: 14px !important;
    z-index: 99999 !important;
    display: flex !important;
    flex-direction: column !important;
    gap: 8px !important;
    pointer-events: none !important;
}

body.page-product-detail .mobile-snackbar-container {
    bottom: calc(76px + env(safe-area-inset-bottom)) !important;
}

.mobile-snackbar {
    background: #0f172a !important;
    color: #ffffff !important;
    border-radius: 14px !important;
    padding: 12px 16px !important;
    display: flex !important;
    align-items: center !important;
    gap: 12px !important;
    box-shadow: 0 8px 24px rgba(15, 23, 42, 0.25) !important;
    pointer-events: auto !important;
    animation: snackbarSlideUp .25s cubic-bezier(0.16, 1, 0.3, 1) forwards !important;
    max-width: 440px !important;
    margin: 0 auto !important;
    width: 100% !important;
}

.mobile-snackbar.closing {
    animation: snackbarSlideDown .2s ease-in forwards !important;
}

@keyframes snackbarSlideUp {
    from { opacity: 0; transform: translateY(16px) scale(0.96); }
    to { opacity: 1; transform: translateY(0) scale(1); }
}

@keyframes snackbarSlideDown {
    from { opacity: 1; transform: translateY(0) scale(1); }
    to { opacity: 0; transform: translateY(16px) scale(0.96); }
}

.mobile-snackbar-icon {
    width: 28px !important;
    height: 28px !important;
    border-radius: 50% !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    font-size: 13px !important;
    flex-shrink: 0 !important;
}

.mobile-snackbar.success .mobile-snackbar-icon {
    background: rgba(16, 185, 129, 0.2) !important;
    color: #10b981 !important;
}

.mobile-snackbar.error .mobile-snackbar-icon {
    background: rgba(239, 68, 68, 0.2) !important;
    color: #ef4444 !important;
}

.mobile-snackbar.warning .mobile-snackbar-icon {
    background: rgba(245, 158, 11, 0.2) !important;
    color: #f59e0b !important;
}

.mobile-snackbar-content {
    flex: 1 !important;
    min-width: 0 !important;
}

.mobile-snackbar-title {
    font-size: 13px !important;
    font-weight: 600 !important;
    color: #ffffff !important;
    line-height: 1.2 !important;
}

.mobile-snackbar-desc {
    font-size: 11px !important;
    color: #94a3b8 !important;
    margin: 0 !important;
    line-height: 1.3 !important;
}

.mobile-snackbar-btn {
    background: #0f766e !important;
    color: #ffffff !important;
    border: none !important;
    border-radius: 8px !important;
    padding: 6px 12px !important;
    font-size: 11px !important;
    font-weight: 700 !important;
    text-transform: uppercase !important;
    letter-spacing: 0.3px !important;
    cursor: pointer !important;
    flex-shrink: 0 !important;
    text-decoration: none !important;
    display: inline-flex !important;
    align-items: center !important;
    white-space: nowrap !important;
}

.mobile-snackbar-btn:hover,
.mobile-snackbar-btn:focus,
.mobile-snackbar-btn:active {
    background: #0d5e56 !important;
    color: #ffffff !important;
    text-decoration: none !important;
}

/* ==========================================================================
   3. STICKY BOTTOM ACTION BAR SUR DETAIL PRODUIT (STYLE FLUTTER)
   ========================================================================== */
body.page-product-detail .bottom-nav-bar {
    display: none !important;
}

body.page-product-detail {
    padding-bottom: calc(80px + env(safe-area-inset-bottom)) !important;
}

.detail-sticky-bar {
    position: fixed !important;
    bottom: 0 !important;
    left: 0 !important;
    right: 0 !important;
    z-index: 1050 !important;
    background: #ffffff !important;
    border-top: 1px solid #e2e8f0 !important;
    padding: 10px 14px calc(10px + env(safe-area-inset-bottom)) 14px !important;
    display: flex !important;
    align-items: center !important;
    gap: 10px !important;
    box-shadow: 0 -4px 16px rgba(15, 23, 42, 0.05) !important;
}

.dsb-price-col {
    display: flex !important;
    flex-direction: column !important;
    min-width: 90px !important;
}

.dsb-label {
    font-size: 10px !important;
    font-weight: 700 !important;
    color: #64748b !important;
    text-transform: uppercase !important;
    letter-spacing: 0.3px !important;
    line-height: 1 !important;
}

.dsb-amount {
    font-size: 16px !important;
    font-weight: 800 !important;
    color: #0f766e !important;
    line-height: 1.2 !important;
    white-space: nowrap !important;
}

.dsb-amount small {
    font-size: 11px !important;
    font-weight: 600 !important;
}

.dsb-cart-icon {
    width: 44px !important;
    height: 44px !important;
    border-radius: 12px !important;
    background: #f1f5f9 !important;
    color: #334155 !important;
    border: 1px solid #e2e8f0 !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    position: relative !important;
    text-decoration: none !important;
    flex-shrink: 0 !important;
    font-size: 15px !important;
}

.dsb-cart-icon .bnav-badge {
    position: absolute !important;
    top: 4px !important;
    right: 4px !important;
    background: #ef4444 !important;
    color: #ffffff !important;
    font-size: 9px !important;
    font-weight: 700 !important;
    width: 16px !important;
    height: 16px !important;
    border-radius: 50% !important;
    display: none !important;
    align-items: center !important;
    justify-content: center !important;
}

.dsb-cart-icon .bnav-badge.has-items {
    display: flex !important;
}

.dsb-btn-add {
    flex: 1 !important;
    height: 44px !important;
    border-radius: 12px !important;
    background: #0f766e !important;
    color: #ffffff !important;
    font-size: 13px !important;
    font-weight: 700 !important;
    border: none !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 8px !important;
    box-shadow: 0 2px 6px rgba(15, 118, 110, 0.25) !important;
    transition: all .15s ease !important;
    cursor: pointer !important;
}

.dsb-btn-add:active {
    transform: scale(0.98) !important;
    background: #0d5e56 !important;
}

.dsb-btn-add.btn-danger {
    background: #ef4444 !important;
    box-shadow: 0 2px 6px rgba(239, 68, 68, 0.25) !important;
}

/* ==========================================================================
   PAGE DÉTAILS DU CARNET PRO (STYLE FINTECH REVOLUT / WAVE)
   ========================================================================== */
.carnet-hero-card {
    background: #ffffff !important;
    border: 1px solid #e2e8f0 !important;
    border-radius: 18px !important;
    padding: 18px !important;
    margin-bottom: 12px !important;
    box-shadow: 0 1px 3px rgba(15, 23, 42, 0.03) !important;
}

.ch-top {
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    margin-bottom: 14px !important;
}

.ch-code-wrap {
    display: flex !important;
    align-items: center !important;
    gap: 8px !important;
    flex-wrap: wrap !important;
}

.ch-code-badge {
    background: #f1f5f9 !important;
    color: #334155 !important;
    font-size: 12px !important;
    font-weight: 700 !important;
    padding: 4px 10px !important;
    border-radius: 8px !important;
    font-family: monospace, monospace !important;
}

.ch-status-badge {
    font-size: 11px !important;
    font-weight: 700 !important;
    padding: 4px 10px !important;
    border-radius: 999px !important;
    display: inline-flex !important;
    align-items: center !important;
    gap: 4px !important;
}

.ch-status-badge.active {
    background: #ecfdf5 !important;
    color: #059669 !important;
}

.ch-status-badge.done {
    background: #f1f5f9 !important;
    color: #64748b !important;
}

.ch-avatar {
    width: 40px !important;
    height: 40px !important;
    border-radius: 50% !important;
    overflow: hidden !important;
    background: #f1f5f9 !important;
    border: 1.5px solid #e2e8f0 !important;
    flex-shrink: 0 !important;
}

.ch-avatar img {
    width: 100% !important;
    height: 100% !important;
    object-fit: cover !important;
}

.ch-main-balance {
    margin-bottom: 14px !important;
}

.ch-balance-label {
    font-size: 11px !important;
    font-weight: 700 !important;
    color: #64748b !important;
    text-transform: uppercase !important;
    letter-spacing: 0.3px !important;
    margin-bottom: 3px !important;
}

.ch-balance-val {
    font-size: 26px !important;
    font-weight: 800 !important;
    color: #0f172a !important;
    line-height: 1.1 !important;
    letter-spacing: -0.5px !important;
}

.ch-balance-val small {
    font-size: 14px !important;
    font-weight: 600 !important;
    color: #64748b !important;
}

.ch-progress-wrap {
    margin-bottom: 16px !important;
}

.ch-progress-bar {
    width: 100% !important;
    height: 6px !important;
    background: #f1f5f9 !important;
    border-radius: 999px !important;
    overflow: hidden !important;
    margin-bottom: 6px !important;
}

.ch-progress-fill {
    height: 100% !important;
    background: #0f766e !important;
    border-radius: 999px !important;
    transition: width 0.4s ease !important;
}

.ch-progress-labels {
    display: flex !important;
    justify-content: space-between !important;
    font-size: 11px !important;
    color: #64748b !important;
}

.ch-actions {
    display: flex !important;
    align-items: center !important;
    gap: 10px !important;
}

.btn-hero-back {
    height: 44px !important;
    padding: 0 16px !important;
    background: #f1f5f9 !important;
    color: #334155 !important;
    border: 1px solid #e2e8f0 !important;
    border-radius: 12px !important;
    font-size: 13px !important;
    font-weight: 600 !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 6px !important;
    cursor: pointer !important;
    flex-shrink: 0 !important;
    transition: all .15s ease !important;
}

.btn-hero-back:active {
    transform: scale(0.98) !important;
    background: #e2e8f0 !important;
}

.btn-hero-pay {
    flex: 1 !important;
    height: 44px !important;
    background: #0f766e !important;
    color: #ffffff !important;
    border-radius: 12px !important;
    font-size: 14px !important;
    font-weight: 700 !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 8px !important;
    text-decoration: none !important;
    border: none !important;
    box-shadow: 0 2px 6px rgba(15, 118, 110, 0.2) !important;
    transition: all .15s ease !important;
}

.btn-hero-pay:hover,
.btn-hero-pay:focus {
    background: #0d5e56 !important;
    color: #ffffff !important;
    text-decoration: none !important;
}

.btn-hero-pay:active {
    transform: scale(0.98) !important;
}

/* Grille 2x2 des 4 indicateurs clés */
.carnet-kpi-grid {
    display: grid !important;
    grid-template-columns: repeat(2, 1fr) !important;
    gap: 10px !important;
    margin-bottom: 14px !important;
}

.ckpi-card {
    background: #ffffff !important;
    border: 1px solid #e2e8f0 !important;
    border-radius: 14px !important;
    padding: 12px !important;
    display: flex !important;
    align-items: center !important;
    gap: 10px !important;
    box-shadow: 0 1px 2px rgba(15, 23, 42, 0.02) !important;
}

.ckpi-icon {
    width: 38px !important;
    height: 38px !important;
    border-radius: 10px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    font-size: 15px !important;
    flex-shrink: 0 !important;
}

.ckpi-icon.icon-verse { background: #ecfdf5 !important; color: #059669 !important; }
.ckpi-icon.icon-total { background: #f0fdfa !important; color: #0f766e !important; }
.ckpi-icon.icon-jour  { background: #faf5ff !important; color: #9333ea !important; }
.ckpi-icon.icon-reste { background: #fff7ed !important; color: #ea580c !important; }

.ckpi-body {
    min-width: 0 !important;
    display: flex !important;
    flex-direction: column !important;
}

.ckpi-val {
    font-size: 15px !important;
    font-weight: 800 !important;
    color: #0f172a !important;
    line-height: 1.2 !important;
    white-space: nowrap !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
}

.ckpi-val small {
    font-size: 11px !important;
    font-weight: 600 !important;
    color: #64748b !important;
}

.ckpi-lbl {
    font-size: 10px !important;
    font-weight: 700 !important;
    color: #64748b !important;
    text-transform: uppercase !important;
    letter-spacing: 0.2px !important;
    margin-top: 2px !important;
}

/* Sections Choix et Versements */
.carnet-section-card {
    background: #ffffff !important;
    border: 1px solid #e2e8f0 !important;
    border-radius: 16px !important;
    margin-bottom: 14px !important;
    overflow: hidden !important;
    box-shadow: 0 1px 3px rgba(15, 23, 42, 0.02) !important;
}

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

.cs-header h4 {
    margin: 0 !important;
    font-size: 14px !important;
    font-weight: 700 !important;
    color: #0f172a !important;
    display: flex !important;
    align-items: center !important;
    gap: 8px !important;
}

.cs-body {
    padding: 12px 14px !important;
}

/* Désactivation globale des flèches/spinners sur inputs number */
input[type=number]::-webkit-inner-spin-button,
input[type=number]::-webkit-outer-spin-button {
    -webkit-appearance: none !important;
    margin: 0 !important;
}

input[type=number] {
    -moz-appearance: textfield !important;
}

/* ==========================================================================
   ÉTAT BOUTON "RETIRER DU PANIER" (ROUGE VISIBLE SUR TOUTES LES RÉSOLUTIONS)
   ========================================================================== */
.btn-add-cart.btn-danger,
.btn-add-cart.btn-cart-remove,
.btn-add-cart-detail.btn-danger,
.btn-add-cart-detail.btn-cart-remove,
.dsb-btn-add.btn-danger,
.dsb-btn-add.btn-cart-remove {
    background: #ef4444 !important;
    background-color: #ef4444 !important;
    color: #ffffff !important;
    border: none !important;
    box-shadow: 0 2px 6px rgba(239, 68, 68, 0.25) !important;
}

.btn-add-cart.btn-danger:hover,
.btn-add-cart.btn-danger:focus,
.btn-add-cart.btn-danger:active,
.btn-add-cart.btn-cart-remove:hover,
.btn-add-cart.btn-cart-remove:focus,
.btn-add-cart.btn-cart-remove:active,
.btn-add-cart-detail.btn-danger:hover,
.btn-add-cart-detail.btn-danger:focus,
.btn-add-cart-detail.btn-danger:active,
.btn-add-cart-detail.btn-cart-remove:hover,
.btn-add-cart-detail.btn-cart-remove:focus,
.btn-add-cart-detail.btn-cart-remove:active,
.dsb-btn-add.btn-danger:hover,
.dsb-btn-add.btn-danger:focus,
.dsb-btn-add.btn-danger:active,
.dsb-btn-add.btn-cart-remove:hover,
.dsb-btn-add.btn-cart-remove:focus,
.dsb-btn-add.btn-cart-remove:active {
    background: #dc2626 !important;
    background-color: #dc2626 !important;
    color: #ffffff !important;
}