/* ==================================================
   ACCOUNT.CSS - VERSION ULTRA RESPONSIVE (FORCÉE)
   ================================================== */

/* ===== FORCER LE LAYOUT SUR TOUS LES ÉCRANS ===== */
.woocommerce-account .woocommerce,
body.woocommerce-account .woocommerce {
    display: flex !important;
    gap: 25px !important;
}

/* ==================================================
   MOBILE (< 768px) - MENU HORIZONTAL DÉFILANT
   ================================================== */
@media (max-width: 768px) {
    
    /* Passage en colonne */
    .woocommerce-account .woocommerce,
    body.woocommerce-account .woocommerce {
        flex-direction: column !important;
        gap: 20px !important;
    }
    
    /* Menu sticky horizontal */
    .woocommerce-MyAccount-navigation,
    body.woocommerce-account .woocommerce-MyAccount-navigation {
        position: sticky !important;
        top: 0 !important;
        z-index: 99 !important;
        background: white !important;
        width: 100% !important;
        padding: 10px !important;
        margin: 0 !important;
        border-radius: 16px !important;
        box-shadow: 0 2px 8px rgba(0,0,0,0.08) !important;
        overflow-x: auto !important;
        overflow-y: hidden !important;
        -webkit-overflow-scrolling: touch !important;
    }
    
    /* Masquer la scrollbar (plus propre) */
    .woocommerce-MyAccount-navigation::-webkit-scrollbar {
        display: none !important;
    }
    
    /* Liste en ligne */
    .woocommerce-MyAccount-navigation ul,
    body.woocommerce-account .woocommerce-MyAccount-navigation ul {
        display: flex !important;
        flex-direction: row !important;
        flex-wrap: nowrap !important;
        gap: 8px !important;
        min-width: max-content !important;
        padding: 0 !important;
        margin: 0 !important;
        list-style: none !important;
    }
    
    /* Items inline */
    .woocommerce-MyAccount-navigation li,
    body.woocommerce-account .woocommerce-MyAccount-navigation li {
        display: inline-block !important;
        margin: 0 !important;
        padding: 0 !important;
        float: none !important;
    }
    
    /* Liens en pilules */
    .woocommerce-MyAccount-navigation a,
    body.woocommerce-account .woocommerce-MyAccount-navigation a {
        display: inline-flex !important;
        align-items: center !important;
        gap: 6px !important;
        padding: 10px 18px !important;
        background: #f1f5f9 !important;
        border-radius: 40px !important;
        font-size: 13px !important;
        font-weight: 600 !important;
        color: #1e293b !important;
        text-decoration: none !important;
        white-space: nowrap !important;
        transition: all 0.2s ease !important;
    }
    
    /* Lien actif */
    .woocommerce-MyAccount-navigation .is-active a,
    body.woocommerce-account .woocommerce-MyAccount-navigation .is-active a {
        background: #f97316 !important;
        color: white !important;
        box-shadow: 0 2px 8px rgba(249,115,22,0.3) !important;
    }
    
    /* Cacher les icônes sur mobile (gagne de la place) */
    .woocommerce-MyAccount-navigation .lm-icon,
    body.woocommerce-account .woocommerce-MyAccount-navigation .lm-icon {
        display: none !important;
    }
    
    /* Contenu principal */
    .woocommerce-MyAccount-content,
    body.woocommerce-account .woocommerce-MyAccount-content {
        width: 100% !important;
        padding: 20px !important;
        background: white !important;
        border-radius: 16px !important;
        box-shadow: 0 2px 8px rgba(0,0,0,0.05) !important;
    }
}

/* ==================================================
   PETIT MOBILE (< 480px) - TABLEAU → CARTES
   ================================================== */
@media (max-width: 480px) {
    
    .woocommerce-MyAccount-content,
    body.woocommerce-account .woocommerce-MyAccount-content {
        padding: 16px !important;
    }
    
    .woocommerce-MyAccount-content h2 {
        font-size: 18px !important;
        margin-bottom: 16px !important;
    }
    
    /* Transformation tableau en cartes */
    .woocommerce-MyAccount-content table.shop_table,
    body.woocommerce-account .woocommerce-MyAccount-content table.shop_table,
    .woocommerce-MyAccount-content table.shop_table tbody,
    .woocommerce-MyAccount-content table.shop_table tr,
    .woocommerce-MyAccount-content table.shop_table td {
        display: block !important;
        width: 100% !important;
    }
    
    /* Cacher l'en-tête */
    .woocommerce-MyAccount-content table.shop_table thead,
    body.woocommerce-account .woocommerce-MyAccount-content table.shop_table thead {
        display: none !important;
    }
    
    /* Chaque ligne devient une carte */
    .woocommerce-MyAccount-content table.shop_table tr,
    body.woocommerce-account .woocommerce-MyAccount-content table.shop_table tr {
        margin-bottom: 16px !important;
        padding: 14px !important;
        border: 1px solid #e2e8f0 !important;
        border-radius: 14px !important;
        background: white !important;
        box-shadow: 0 2px 6px rgba(0,0,0,0.04) !important;
    }
    
    /* Chaque cellule en flex row */
    .woocommerce-MyAccount-content table.shop_table td,
    body.woocommerce-account .woocommerce-MyAccount-content table.shop_table td {
        display: flex !important;
        justify-content: space-between !important;
        align-items: center !important;
        padding: 8px 0 !important;
        border: none !important;
        font-size: 13px !important;
        text-align: right !important;
    }
    
    /* Label avant chaque donnée */
    .woocommerce-MyAccount-content table.shop_table td::before,
    body.woocommerce-account .woocommerce-MyAccount-content table.shop_table td::before {
        content: attr(data-title) !important;
        font-weight: 600 !important;
        color: #64748b !important;
        margin-right: 12px !important;
        text-align: left !important;
    }
    
    /* Actions des commandes */
    .woocommerce-orders-table__cell-order-actions,
    .woocommerce-MyAccount-content .woocommerce-orders-table__cell-order-actions {
        justify-content: flex-end !important;
        gap: 10px !important;
        margin-top: 8px !important;
    }
    
    .woocommerce-orders-table__cell-order-actions a,
    .woocommerce-MyAccount-content .woocommerce-orders-table__cell-order-actions a {
        display: inline-block !important;
        padding: 6px 12px !important;
        font-size: 11px !important;
        border-radius: 20px !important;
        background: #f97316 !important;
        color: white !important;
        text-decoration: none !important;
    }
    
    .woocommerce-orders-table__cell-order-actions a:hover {
        background: #e95b1f !important;
    }
}

/* ==================================================
   FORMULAIRES RESPONSIVE
   ================================================== */
@media (max-width: 768px) {
    .woocommerce-MyAccount-content .form-row,
    body.woocommerce-account .woocommerce-MyAccount-content .form-row {
        display: flex !important;
        flex-direction: column !important;
        margin-bottom: 16px !important;
    }
    
    .woocommerce-MyAccount-content .form-row label,
    body.woocommerce-account .woocommerce-MyAccount-content .form-row label {
        margin-bottom: 6px !important;
        font-weight: 500 !important;
        color: #334155 !important;
    }
    
    .woocommerce-MyAccount-content input,
    .woocommerce-MyAccount-content select,
    .woocommerce-MyAccount-content textarea,
    body.woocommerce-account .woocommerce-MyAccount-content input,
    body.woocommerce-account .woocommerce-MyAccount-content select,
    body.woocommerce-account .woocommerce-MyAccount-content textarea {
        width: 100% !important;
        padding: 12px !important;
        border: 1px solid #e2e8f0 !important;
        border-radius: 10px !important;
        font-size: 14px !important;
        box-sizing: border-box !important;
    }
    
    /* Boutons pleine largeur */
    .woocommerce button.button,
    .woocommerce-MyAccount-content button,
    body.woocommerce-account .woocommerce-MyAccount-content button {
        width: 100% !important;
        padding: 12px !important;
        border-radius: 10px !important;
        text-align: center !important;
        justify-content: center !important;
    }
}

/* ==================================================
   ALERTES / NOTIFICATIONS
   ================================================== */
.woocommerce-message,
.woocommerce-error,
.woocommerce-info {
    border-radius: 12px !important;
    padding: 14px 18px !important;
    font-size: 14px !important;
    margin-bottom: 20px !important;
}

@media (max-width: 480px) {
    .woocommerce-message,
    .woocommerce-error,
    .woocommerce-info {
        padding: 12px !important;
        font-size: 13px !important;
    }
}

/* ==================================================
   BONUS : Adresses (2 colonnes → 1 colonne)
   ================================================== */
@media (max-width: 768px) {
    .woocommerce-Addresses,
    .woocommerce-account .woocommerce-Addresses {
        display: flex !important;
        flex-direction: column !important;
        gap: 20px !important;
    }
    
    .woocommerce-Address,
    .woocommerce-account .woocommerce-Address {
        width: 100% !important;
        padding: 16px !important;
    }
}