/* Styles Mobile-First pour l'e-commerce de maillots de football */

/* Variables CSS pour mobile */
:root {
    --mobile-padding: 1rem;
    --mobile-margin: 0.5rem;
    --mobile-font-size: 0.9rem;
    --mobile-button-height: 44px; /* Taille minimale recommandée pour le tactile */
    --mobile-touch-target: 44px;
}

/* ===== NAVIGATION MOBILE ===== */
@media (max-width: 991.98px) {
    .navbar {
        padding: 0.5rem 0;
    }
    
    .navbar-brand {
        font-size: 1.25rem;
    }
    
    .navbar-toggler {
        border: none;
        padding: 0.25rem 0.5rem;
    }
    
    .navbar-toggler:focus {
        box-shadow: none;
    }
    
    .navbar-collapse {
        background-color: rgba(0, 0, 0, 0.95);
        margin-top: 0.5rem;
        border-radius: 0.5rem;
        padding: 1rem;
    }
    
    .navbar-nav .nav-link {
        padding: 0.75rem 1rem;
        border-bottom: 1px solid rgba(255, 255, 255, 0.1);
        font-size: 1rem;
    }
    
    .navbar-nav .nav-link:last-child {
        border-bottom: none;
    }
    
    /* Formulaire de recherche mobile */
    .navbar .d-flex {
        margin: 0.5rem 0;
    }
    
    .navbar .form-control {
        font-size: 1rem;
        padding: 0.75rem;
    }
    
    .navbar .btn {
        padding: 0.75rem;
        min-height: var(--mobile-button-height);
    }
    
    /* Badge panier mobile */
    .cart-badge {
        top: -5px;
        right: -5px;
        width: 18px;
        height: 18px;
        font-size: 0.7rem;
    }
}

/* ===== HERO SECTION MOBILE ===== */
@media (max-width: 767.98px) {
    .hero-section {
        padding: 2rem 0;
        text-align: center;
    }
    
    .hero-section h1 {
        font-size: 1.75rem;
        margin-bottom: 1rem;
    }
    
    .hero-section p {
        font-size: 1rem;
        margin-bottom: 1.5rem;
    }
}

/* ===== FILTRES MOBILE ===== */
@media (max-width: 991.98px) {
    .col-lg-3 {
        margin-bottom: 1rem;
    }
    
    .card {
        margin-bottom: 1rem;
    }
    
    /* Filtres en accordéon sur mobile */
    .card-header {
        cursor: pointer;
        user-select: none;
    }
    
    .card-header::after {
        content: '\f078';
        font-family: 'Font Awesome 6 Free';
        font-weight: 900;
        float: right;
        transition: transform 0.3s ease;
    }
    
    .card-header[aria-expanded="false"]::after {
        transform: rotate(-90deg);
    }
    
    .card-header[aria-expanded="true"]::after {
        transform: rotate(0deg);
    }
    
    .card-body {
        padding: 1rem;
    }
    
    .form-control, .form-select {
        font-size: 1rem;
        padding: 0.75rem;
        min-height: var(--mobile-button-height);
    }
    
    .form-label {
        font-weight: 600;
        margin-bottom: 0.5rem;
    }
    
    .btn {
        min-height: var(--mobile-button-height);
        font-size: 1rem;
        padding: 0.75rem 1.5rem;
    }
}

/* ===== GRILLE PRODUITS MOBILE ===== */
@media (max-width: 767.98px) {
    .col-lg-4 {
        margin-bottom: 1rem;
    }
    
    .card {
        border-radius: 10px;
        overflow: hidden;
    }
    
    .card-img-top {
        height: 200px !important;
        object-fit: cover;
    }
    
    .card-body {
        padding: 1rem;
    }
    
    .card-title {
        font-size: 1rem;
        line-height: 1.3;
        margin-bottom: 0.5rem;
    }
    
    .card-text {
        font-size: 0.85rem;
        margin-bottom: 0.75rem;
    }
    
    .price {
        font-size: 1.1rem;
        font-weight: 700;
    }
    
    .price-old {
        font-size: 0.9rem;
    }
    
    /* Boutons produits mobile */
    .btn {
        font-size: 0.9rem;
        padding: 0.6rem 1rem;
        min-height: var(--mobile-button-height);
    }
    
    .btn-group-vertical .btn {
        margin-bottom: 0.5rem;
    }
    
    /* Badge promotion mobile */
    .badge-sale {
        top: 8px;
        right: 8px;
        font-size: 0.75rem;
        padding: 0.25rem 0.5rem;
    }
}

/* ===== HEADER PRODUITS MOBILE ===== */
@media (max-width: 767.98px) {
    .d-flex.justify-content-between {
        flex-direction: column;
        align-items: flex-start !important;
        gap: 1rem;
    }
    
    .d-flex.align-items-center {
        flex-direction: column;
        align-items: flex-start !important;
        gap: 0.5rem;
        width: 100%;
    }
    
    .form-select {
        width: 100% !important;
        max-width: 200px;
    }
}

/* ===== PAGINATION MOBILE ===== */
@media (max-width: 767.98px) {
    .pagination {
        justify-content: center;
        flex-wrap: wrap;
    }
    
    .page-link {
        padding: 0.5rem 0.75rem;
        font-size: 0.9rem;
        min-height: var(--mobile-touch-target);
        display: flex;
        align-items: center;
        justify-content: center;
    }
}

/* ===== PANIER MOBILE ===== */
@media (max-width: 767.98px) {
    .col-lg-8, .col-lg-4 {
        margin-bottom: 1rem;
    }
    
    /* Articles du panier */
    .cart-item {
        background-color: #f8f9fa;
        border-radius: 10px;
        padding: 1rem;
        margin-bottom: 1rem;
    }
    
    .cart-item-image {
        max-width: 100px;
        height: 100px;
        object-fit: cover;
    }
    
    .cart-item .bg-light {
        width: 100px;
        height: 100px;
    }
    
    /* Contrôles quantité mobile */
    .quantity-controls {
        width: 100% !important;
        max-width: 150px;
        margin: 0 auto;
    }
    
    .quantity-controls .btn {
        min-width: var(--mobile-touch-target);
        min-height: var(--mobile-touch-target);
        display: flex;
        align-items: center;
        justify-content: center;
    }
    
    .quantity-controls .form-control {
        text-align: center;
        font-size: 1rem;
        min-height: var(--mobile-touch-target);
        font-weight: 600;
    }
    
    /* Résumé panier mobile */
    .card-body {
        padding: 1rem;
    }
    
    .d-flex.justify-content-between {
        font-size: 0.95rem;
    }
    
    .btn-lg {
        font-size: 1rem;
        padding: 1rem;
        min-height: 50px;
    }
    
    /* Améliorer l'affichage des prix */
    .price {
        font-size: 1.1rem;
        font-weight: 700;
        color: var(--primary-color);
    }
    
    /* Boutons d'action mobile */
    .btn-outline-danger {
        border-radius: 8px;
        padding: 0.5rem 1rem;
    }
    
    .btn-outline-secondary {
        border-radius: 8px;
        padding: 0.5rem 1rem;
    }
}

/* ===== FOOTER MOBILE ===== */
@media (max-width: 767.98px) {
    .footer {
        padding: 2rem 0 1rem;
        text-align: center;
    }
    
    .col-md-4 {
        margin-bottom: 2rem;
    }
    
    .col-md-4:last-child {
        margin-bottom: 0;
    }
    
    .footer h5 {
        font-size: 1.1rem;
        margin-bottom: 1rem;
    }
    
    .footer ul {
        margin-bottom: 1rem;
    }
    
    .footer li {
        margin-bottom: 0.5rem;
    }
}

/* ===== BOUTONS ET INTERACTIONS MOBILE ===== */
@media (max-width: 767.98px) {
    /* Tous les boutons doivent être assez grands pour le tactile */
    .btn {
        min-height: var(--mobile-button-height);
        min-width: var(--mobile-touch-target);
        font-size: 1rem;
        padding: 0.75rem 1.5rem;
        border-radius: 8px;
    }
    
    .btn-sm {
        min-height: 36px;
        font-size: 0.9rem;
        padding: 0.5rem 1rem;
    }
    
    /* Améliorer les liens */
    a {
        min-height: var(--mobile-touch-target);
        display: inline-flex;
        align-items: center;
        text-decoration: none;
    }
    
    /* Formulaires mobile */
    .form-control, .form-select {
        min-height: var(--mobile-button-height);
        font-size: 1rem;
        padding: 0.75rem;
        border-radius: 8px;
    }
    
    /* Checkboxes et radios */
    .form-check-input {
        width: 1.25rem;
        height: 1.25rem;
    }
    
    .form-check-label {
        font-size: 1rem;
        padding-left: 0.5rem;
    }
}

/* ===== ANIMATIONS MOBILE ===== */
@media (max-width: 767.98px) {
    .card {
        transition: transform 0.2s ease, box-shadow 0.2s ease;
    }
    
    .card:active {
        transform: scale(0.98);
    }
    
    .btn:active {
        transform: scale(0.95);
    }
}

/* ===== UTILITAIRES MOBILE ===== */
@media (max-width: 767.98px) {
    .container {
        padding-left: var(--mobile-padding);
        padding-right: var(--mobile-padding);
    }
    
    .py-5 {
        padding-top: 2rem !important;
        padding-bottom: 2rem !important;
    }
    
    .mb-4 {
        margin-bottom: 1.5rem !important;
    }
    
    .mt-5 {
        margin-top: 2rem !important;
    }
    
    /* Masquer certains éléments sur mobile */
    .d-none-mobile {
        display: none !important;
    }
    
    /* Afficher seulement sur mobile */
    .d-mobile-only {
        display: block !important;
    }
}

@media (min-width: 768px) {
    .d-mobile-only {
        display: none !important;
    }
}

/* ===== AMÉLIORATIONS TOUCH ===== */
@media (max-width: 767.98px) {
    /* Améliorer la sélection de texte */
    ::selection {
        background-color: var(--primary-color);
        color: white;
    }
    
    /* Améliorer le focus */
    .btn:focus,
    .form-control:focus,
    .form-select:focus {
        box-shadow: 0 0 0 0.2rem rgba(30, 58, 138, 0.25);
    }
    
    /* Améliorer les états hover pour les appareils tactiles */
    .btn:hover,
    .card:hover {
        transform: none;
    }
}

/* ===== OPTIMISATIONS PERFORMANCE MOBILE ===== */
@media (max-width: 767.98px) {
    /* Réduire les ombres pour de meilleures performances */
    .card {
        box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
    }
    
    .card:hover {
        box-shadow: 0 4px 8px rgba(0, 0, 0, 0.15);
    }
    
    /* Optimiser les transitions */
    * {
        transition-duration: 0.2s;
    }
}