/*
 * Naturaleaf E-commerce - Media Queries Responsive
 * Mobile-first design
 * 2025
 */

/* ========================================
   BREAKPOINTS SELON CAHIER DES CHARGES
======================================== */

/* 
Mobile first - toutes les règles de base dans main.css sont pour mobile
Breakpoints standards :
- xs: 0px (par défaut)
- sm: 576px (petit mobile paysage)
- md: 768px (tablette)
- lg: 992px (desktop)
- xl: 1200px (grand desktop)
*/

/* ========================================
   PETIT MOBILE PAYSAGE (576px+)
======================================== */

@media (min-width: 576px) {
    /* Conteneur */
    .container {
        padding: 0 var(--spacing-lg);
    }

    /* Hero section */
    .hero-title {
        font-size: var(--font-size-4xl);
    }

    .hero-subtitle {
        font-size: var(--font-size-xl);
    }

    /* Grilles */
    .categories-grid {
        grid-template-columns: repeat(2, 1fr);
    }

    .products-grid {
        grid-template-columns: 1fr 1fr;
    }

    .values-grid {
        grid-template-columns: repeat(2, 1fr);
    }

    /* Newsletter CTA */
    .newsletter-cta-input-group {
        flex-direction: row;
    }

    /* Footer */
    .footer-bottom-content {
        flex-direction: row;
        text-align: left;
    }
}

/* ========================================
   TABLETTE (768px+)
======================================== */

@media (min-width: 768px) {
    /* Variables responsives */
    :root {
        --container-padding: var(--spacing-xl);
        --spacing-section: var(--spacing-4xl);
    }

    /* Navigation - Afficher le menu desktop */
    .mobile-menu-toggle {
        display: none;
    }

    .mobile-menu {
        display: none !important;
    }

    .main-navigation {
        display: block;
    }

    /* Header */
    .header-content {
        padding: var(--spacing-lg) 0;
    }

    .header-actions {
        gap: var(--spacing-lg);
    }

    .search-input {
        width: 320px;
    }

    .search-input:focus {
        width: 280px;
    }

    .account-text,
    .cart-text {
        display: inline;
    }

    /* Hero section */
    .hero-section {
        padding: var(--spacing-4xl) 0 var(--spacing-4xl);
    }

    .hero-content {
        grid-template-columns: 1fr 1fr;
        gap: var(--spacing-4xl);
    }

    .hero-title {
        font-size: var(--font-size-5xl);
    }

    .hero-actions {
        flex-direction: row;
    }

    /* Sections */
    .values-section,
    .categories-section,
    .featured-products-section,
    .about-section,
    .blog-section,
    .newsletter-cta-section {
        padding: var(--spacing-4xl) 0;
    }

    /* Grilles */

    .categories-grid {
        grid-template-columns: repeat(3, 1fr);
    }

    .products-grid {
        grid-template-columns: 1fr 1fr 1fr;
    }

    .blog-grid {
        grid-template-columns: repeat(2, 1fr);
    }

    /* Section À propos */
    .about-content {
        grid-template-columns: 1fr 1fr;
        gap: var(--spacing-4xl);
    }

    .about-stats {
        grid-template-columns: repeat(3, 1fr);
    }

    /* Footer */
    .footer-content {
        grid-template-columns: repeat(2, 1fr);
        gap: var(--spacing-3xl);
    }

    .footer-about {
        grid-column: 1 / -1;
    }

    /* Messages flash */
    .alert {
        border-radius: var(--radius-xl);
    }

    /* Formulaires */
    .newsletter-form {
        max-width: 350px;
    }
}

/* ========================================
   DESKTOP (992px+)
======================================== */

@media (min-width: 992px) {
    /* Conteneur plus large */
    .container {
        padding: 0 var(--spacing-2xl);
    }

    /* Header amélioré */
    .main-navigation {
        margin: 0 var(--spacing-2xl);
    }

    .nav-list {
        gap: var(--spacing-xl);
    }

    .search-input {
        width: 320px;
    }

    .search-input:focus {
        width: 320px;
    }

    /* Dropdown navigation */
    .dropdown-menu {
        min-width: 220px;
        padding: var(--spacing-md);
    }

    /* Hero plus imposant */
    .hero-section {
        padding: var(--spacing-4xl) 0;
    }

    .hero-title {
        font-size: clamp(var(--font-size-4xl), 5vw, var(--font-size-5xl));
    }

    /* Grilles optimisées */
    .categories-grid {
        grid-template-columns: repeat(3, 1fr);
    }

    .products-grid {
        grid-template-columns: 1fr 1fr 1fr 1fr;
    }

    .blog-grid {
        grid-template-columns: repeat(3, 1fr);
    }

    /* Cards avec plus d'espace */
    .category-card,
    .product-card,
    .blog-card {
        transition: all var(--transition-normal);
    }

    .category-card:hover,
    .product-card:hover,
    .blog-card:hover {
        transform: translateY(-8px);
    }

    /* Footer en 4 colonnes */
    .footer-content {
        grid-template-columns: repeat(4, 1fr);
    }

    .footer-about {
        grid-column: 1;
    }

    /* Animations améliorées */
    .value-item:hover {
        transform: translateY(-8px);
    }

    /* Pagination plus espacée */
    .pagination-list {
        gap: var(--spacing-sm);
    }

    .pagination-link {
        min-width: 44px;
        height: 44px;
    }
}

/* ========================================
   GRAND DESKTOP (1200px+)
======================================== */

@media (min-width: 1200px) {
    /* Conteneur maximum */
    .container {
        max-width: var(--container-max-width);
        padding: 0 var(--spacing-xl);
    }

    /* Header premium */
    .header-content {
        min-height: 90px;
    }

    .logo-image {
        height: 45px;
    }

    /* Navigation spacieuse */
    .nav-list {
        gap: var(--spacing-2xl);
    }

    .nav-link {
        padding: var(--spacing-md) var(--spacing-lg);
        font-size: var(--font-size-lg);
    }

    /* Hero imposant */
    .hero-section {
        padding: 120px 0;
    }

    .hero-content {
        gap: 80px;
    }

    /* Sections bien espacées */
    .values-section,
    .categories-section,
    .featured-products-section,
    .about-section,
    .blog-section {
        padding: 100px 0;
    }

    /* Grilles optimales */
    .products-grid {
        grid-template-columns: repeat(3, 1fr);
        gap: var(--spacing-2xl);
    }

    /* Cards premium */
    .product-card,
    .category-card {
        border-radius: var(--radius-xl);
    }

    .product-image,
    .category-image {
        height: 280px;
    }

    /* Typography enhanced */
    .section-title {
        font-size: var(--font-size-4xl);
    }

    .section-description {
        font-size: var(--font-size-xl);
    }

    /* Footer spacieux */
    .footer-content {
        gap: var(--spacing-4xl);
        margin-bottom: var(--spacing-4xl);
    }
}

/* ========================================
   TRÈS GRAND ÉCRAN (1400px+)
======================================== */

@media (min-width: 1400px) {
    .container {
        max-width: 1300px;
    }

    .hero-title {
        font-size: 4rem;
    }

    .categories-grid,
    .products-grid {
        gap: var(--spacing-3xl);
    }
}

/* ========================================
   MOBILE UNIQUEMENT (jusqu'à 767px)
======================================== */

@media (max-width: 767px) {
    /* Bandeau légal mobile */
    .legal-banner-content {
        padding: var(--spacing-xs) 0;
        min-height: 44px;
        gap: var(--spacing-sm);
    }

    .legal-icon {
        width: 28px;
        height: 28px;
    }

    .legal-icon svg {
        width: 16px;
        height: 16px;
    }

    .legal-notice {
        font-size: var(--font-size-xs);
        line-height: 1.3;
    }

    .legal-label {
        display: block;
        margin-bottom: 2px;
        margin-right: 0;
    }

    .legal-dismiss {
        width: 28px;
        height: 28px;
        padding: var(--spacing-xs);
    }

    .legal-dismiss svg {
        width: 14px;
        height: 14px;
    }

    /* Header mobile - LAYOUT SIMPLIFIÉ */
    .header-content {
        padding: var(--spacing-md) 0;
        min-height: auto;
        display: flex;
        flex-wrap: wrap;
        align-items: center;
        gap: var(--spacing-md);
        position: relative;
    }

    /* Première ligne : Logo à gauche + Actions à droite */
    .header-logo {
        flex: 0 0 auto;
        order: 1;
    }

    .header-logo .logo-image {
        height: 35px;
    }

    /* Actions groupées à droite sur la première ligne */
    .header-actions {
        flex: 0 0 auto;
        order: 1;
        margin-left: auto;
        display: flex;
        align-items: center;
        gap: var(--spacing-sm);
    }

    /* Compte et panier visible sur mobile */
    .account-link,
    .cart-link {
        padding: var(--spacing-sm);
        display: flex;
        align-items: center;
        justify-content: center;
        width: 40px;
        height: 40px;
        border-radius: var(--radius-md);
    }

    .account-text,
    .cart-text {
        display: none; /* Masquer les textes, garder juste les icônes */
    }

    /* Recherche centrée sur la deuxième ligne */
    .header-search {
        flex: 1 1 100%;
        order: 2;
        display: flex;
        justify-content: center;
        margin: 0;
        max-width: none;
    }

    .search-form {
        width: 100%;
        max-width: 400px;
    }

    .search-input {
        width: 100%;
        padding: var(--spacing-md);
        font-size: var(--font-size-base);
        text-align: center;
    }

    .search-input:focus {
        width: 100%;
        text-align: left;
    }

    .search-input::placeholder {
        text-align: center;
    }

    .search-input:focus::placeholder {
        text-align: left;
    }

    /* Menu plein écran - ajustements mobile */
    .fullscreen-menu-content {
        padding: var(--spacing-lg) var(--spacing-md);
    }

    .fullscreen-menu-header {
        margin-bottom: var(--spacing-xl);
    }

    .nav-title {
        font-size: var(--font-size-xl);
    }

    .nav-description {
        font-size: var(--font-size-xs);
    }

    .fullscreen-nav-link {
        padding: var(--spacing-md) var(--spacing-lg);
    }

    .fullscreen-nav-item {
        margin-bottom: var(--spacing-md);
    }

    .fullscreen-dropdown-menu {
        padding-left: var(--spacing-xl);
    }

    .user-nav-list {
        flex-direction: column;
        gap: var(--spacing-sm);
    }

    .fullscreen-auth-section {
        flex-direction: column;
        align-items: center;
    }

    .menu-contact-info {
        flex-direction: column;
        gap: var(--spacing-sm);
    }

    /* Hero mobile */
    .hero-section {
        padding: var(--spacing-3xl) 0;
        text-align: center;
    }

    .hero-content {
        grid-template-columns: 1fr;
        gap: var(--spacing-xl);
    }

    .hero-text {
        order: 2;
    }

    .hero-image {
        order: 1;
    }

    .hero-title {
        font-size: var(--font-size-3xl);
    }

    .hero-subtitle {
        font-size: var(--font-size-lg);
    }

    .hero-actions {
        justify-content: center;
        gap: var(--spacing-md);
    }

    .btn-large {
        width: 100%;
        max-width: 280px;
    }

    /* Sections mobile */
    .values-section,
    .categories-section,
    .featured-products-section,
    .about-section,
    .blog-section,
    .newsletter-cta-section {
        padding: var(--spacing-3xl) 0;
    }

    /* Grilles mobile */
    .values-grid {
        grid-template-columns: 1fr;
        gap: var(--spacing-lg);
    }

    .categories-grid,
    .products-grid,
    .blog-grid {
        grid-template-columns: 1fr;
        gap: var(--spacing-lg);
    }

    /* About mobile */
    .about-content {
        grid-template-columns: 1fr;
        gap: var(--spacing-xl);
        text-align: center;
    }

    .about-image {
        order: 1;
    }

    .about-text {
        order: 2;
    }

    .about-stats {
        grid-template-columns: 1fr;
        gap: var(--spacing-md);
    }

    /* Cards mobile */
    .category-content,
    .product-content,
    .blog-content {
        padding: var(--spacing-md);
    }

    /* Newsletter mobile */
    .newsletter-cta-content {
        text-align: center;
    }

    .newsletter-cta-input-group {
        flex-direction: column;
        gap: var(--spacing-md);
    }

    .newsletter-cta-input {
        width: 100%;
    }

    /* Footer mobile */
    .footer-content {
        grid-template-columns: 1fr;
        gap: var(--spacing-xl);
        text-align: center;
    }

    .footer-bottom-content {
        flex-direction: column;
        text-align: center;
        gap: var(--spacing-lg);
    }

    .footer-certifications {
        justify-content: center;
    }

    /* Pagination mobile */
    .pagination-list {
        flex-wrap: wrap;
        justify-content: center;
    }

    /* Formulaires mobile */
    .btn {
        width: 100%;
        justify-content: center;
    }

    .btn-outline,
    .btn-secondary {
        margin-top: var(--spacing-sm);
    }

    /* Typography mobile */
    .section-title {
        font-size: var(--font-size-2xl);
    }

    .section-description {
        font-size: var(--font-size-base);
    }
}

/* ========================================
   TABLETTE (768px à 991px) 
======================================== */

@media (min-width: 768px) and (max-width: 991px) {
    .header-search {
        max-width: 300px;
    }

    .search-input {
        width: 200px;
    }

    .search-input:focus {
        width: 250px;
    }

    .account-text,
    .cart-text {
        font-size: var(--font-size-xs);
    }
}

/* ========================================
   PETIT DESKTOP (992px à 1199px)
======================================== */

@media (min-width: 992px) and (max-width: 1199px) {
    .header-search {
        max-width: 350px;
    }

    .search-input {
        width: 220px;
    }

    .search-input:focus {
        width: 280px;
    }
}

/* ========================================
   PETIT MOBILE PORTRAIT (jusqu'à 575px)
======================================== */

@media (max-width: 575px) {
    /* Espacement réduit */
    :root {
        --container-padding: var(--spacing-md);
    }

    /* Header très compact */
    .header-content {
        min-height: 60px;
        padding: var(--spacing-sm) 0;
    }

    .header-logo .logo-image {
        height: 30px;
    }

    .header-actions {
        gap: var(--spacing-sm);
    }

    /* Legal banner compact */
    .legal-notice {
        font-size: var(--font-size-xs);
        padding: 0 var(--spacing-sm);
    }

    /* Hero très mobile */
    .hero-section {
        padding: var(--spacing-2xl) 0;
    }

    .hero-title {
        font-size: var(--font-size-2xl);
        line-height: 1.2;
    }

    .hero-subtitle {
        font-size: var(--font-size-base);
    }

    .hero-description {
        font-size: var(--font-size-base);
    }

    /* Sections compactes */
    .values-section,
    .categories-section,
    .featured-products-section,
    .about-section,
    .blog-section,
    .newsletter-cta-section {
        padding: var(--spacing-2xl) 0;
    }

    /* Cards compactes */
    .value-item,
    .category-content,
    .product-content,
    .blog-content {
        padding: var(--spacing-md);
    }

    .category-image,
    .product-image,
    .blog-image {
        height: 180px;
    }

    /* Typography petite */
    .section-title {
        font-size: var(--font-size-xl);
        margin-bottom: var(--spacing-md);
    }

    .section-description {
        font-size: var(--font-size-sm);
    }

    /* Newsletter compacte */
    .newsletter-cta-title {
        font-size: var(--font-size-xl);
    }

    .newsletter-cta-description {
        font-size: var(--font-size-base);
    }

    /* Footer compact */
    .main-footer {
        padding-top: var(--spacing-2xl);
    }

    .footer-content {
        gap: var(--spacing-lg);
    }

    /* Boutons petits */
    .btn {
        padding: var(--spacing-sm) var(--spacing-md);
        font-size: var(--font-size-sm);
    }

    .btn-large {
        padding: var(--spacing-md) var(--spacing-lg);
        font-size: var(--font-size-base);
    }
}

/* ========================================
   AMÉLIORATIONS BREAKPOINTS INTERMÉDIAIRES
======================================== */

/* Écrans moyens (768px à 991px) - Ajustements spécifiques */
@media (min-width: 768px) and (max-width: 991px) {
    /* Header sur tablette - ajustements fins */
    .main-navigation {
        margin: 0 var(--spacing-md);
    }
    
    .nav-list {
        gap: var(--spacing-sm);
    }
    
    .nav-link {
        font-size: var(--font-size-xs);
        padding: var(--spacing-xs) var(--spacing-sm);
    }
    
    .search-input {
        width: 160px;
    }
    
    .search-input:focus {
        width: 200px;
    }
    
    .account-text,
    .cart-text {
        font-size: var(--font-size-xs);
    }
}

/* Petits desktop (992px à 1199px) */
@media (min-width: 992px) and (max-width: 1199px) {
    .nav-list {
        gap: var(--spacing-md);
    }
    
    .nav-link {
        font-size: var(--font-size-sm);
        padding: var(--spacing-sm) var(--spacing-md);
    }
    
    .search-input {
        width: 200px;
    }
    
    .search-input:focus {
        width: 260px;
    }
}

/* Très petits écrans (jusqu'à 575px) - ajustements supplémentaires */
@media (max-width: 575px) {
    .header-content {
        padding: var(--spacing-sm) 0;
    }
    
    .header-logo .logo-image {
        height: 32px;
    }
    
    .header-actions {
        gap: var(--spacing-xs);
    }
    
    .account-link,
    .cart-link {
        padding: var(--spacing-xs);
    }
    
    .cart-count {
        font-size: 10px;
        min-width: 16px;
        padding: 1px 4px;
    }
}

/* ========================================
   PRÉFÉRENCES D'ACCESSIBILITÉ
======================================== */

/* Réduire les animations si demandé */
@media (prefers-reduced-motion: reduce) {
    * {
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important;
    }

    .scroll-animate {
        animation: none;
        opacity: 1;
        transform: none;
    }
}

/* Contraste élevé */
@media (prefers-contrast: high) {
    :root {
        --color-bg-primary: #ffffff;
        --color-bg-secondary: #f0f0f0;
        --color-text-primary: #000000;
        --color-text-secondary: #333333;
        --shadow-sm: 0 1px 3px rgba(0, 0, 0, 0.3);
        --shadow-md: 0 4px 6px rgba(0, 0, 0, 0.3);
        --shadow-lg: 0 10px 15px rgba(0, 0, 0, 0.3);
    }

    .btn-outline {
        border-width: 3px;
    }

    .alert {
        border-width: 2px;
    }
}


/* ================================
   FOOTER RESPONSIVE IMPROVEMENTS
   ================================ */

/* Mobile (jusqu'à 575px) - Tout aligné à gauche */
@media (max-width: 575px) {
    .main-footer {
        padding-top: var(--spacing-2xl);
    }
    
    .footer-content {
        grid-template-columns: 1fr;
        gap: var(--spacing-2xl);
        text-align: left; /* Force à gauche */
    }
    
    .footer-section {
        text-align: left; /* Force à gauche */
    }
    
    .footer-title {
        text-align: left; /* Force à gauche */
        margin-bottom: var(--spacing-md);
    }
    
    .footer-description,
    .footer-contact,
    .footer-hours,
    .footer-nav-list {
        text-align: left; /* Force à gauche */
    }
    
    .footer-contact .contact-item {
        justify-content: flex-start; /* Aligne à gauche */
        text-align: left;
    }
    
    .footer-nav-list {
        text-align: left;
    }
    
    .footer-nav-list li {
        text-align: left;
    }
    
    /* Newsletter et réseaux sociaux à gauche */
    .footer-newsletter,
    .footer-social {
        text-align: left;
    }
    
    .newsletter-title,
    .social-title {
        text-align: left;
    }
    
    .newsletter-description {
        text-align: left;
    }
    
    .social-links {
        justify-content: flex-start; /* Aligne à gauche */
    }
    
    /* Section légale */
    .footer-legal-notice {
        text-align: left;
        padding: var(--spacing-md) 0;
    }
    
    .legal-notice-content {
        text-align: left;
    }
    
    /* Footer bottom */
    .footer-bottom-content {
        flex-direction: column;
        align-items: flex-start; /* Aligne à gauche */
        text-align: left;
        gap: var(--spacing-md);
    }
    
    .footer-copyright {
        text-align: left;
    }
    
    .footer-certifications {
        justify-content: flex-start; /* Aligne à gauche */
        flex-wrap: wrap;
    }
}

/* Petit mobile paysage (576px+) */
@media (min-width: 576px) and (max-width: 767px) {
    .footer-content {
        grid-template-columns: 1fr;
        gap: var(--spacing-xl);
        text-align: left; /* Maintient à gauche */
    }
    
    .footer-section {
        text-align: left;
    }
    
    .footer-bottom-content {
        flex-direction: column;
        align-items: flex-start;
        text-align: left;
    }
    
    .footer-certifications {
        justify-content: flex-start;
    }
}

/* Tablette (768px+) */
@media (min-width: 768px) and (max-width: 991px) {
    .footer-content {
        grid-template-columns: repeat(2, 1fr);
        gap: var(--spacing-xl);
        text-align: left;
    }
    
    .footer-section {
        text-align: left;
    }
    
    .footer-bottom-content {
        flex-direction: row;
        justify-content: space-between;
        align-items: center;
        text-align: left;
    }
}

/* Desktop (992px+) */
@media (min-width: 992px) {
    .footer-content {
        grid-template-columns: repeat(4, 1fr);
        gap: var(--spacing-xl);
        text-align: left;
    }
    
    .footer-section {
        text-align: left;
    }
    
    .footer-bottom-content {
        flex-direction: row;
        justify-content: space-between;
        align-items: center;
        text-align: left;
    }
}

/* Corrections spécifiques pour les éléments qui pourraient être centrés */
@media (max-width: 991px) {
    /* Newsletter CTA section */
    .newsletter-cta-section {
        text-align: center; /* Garde le CTA centré */
    }
    
    /* Mais le footer reste à gauche */
    .main-footer {
        text-align: left;
    }
    
    .main-footer * {
        text-align: inherit; /* Hérite de l'alignement parent */
    }
    
    /* Exceptions pour garder centrés */
    .newsletter-cta-content,
    .newsletter-cta-title,
    .newsletter-cta-description {
        text-align: center;
    }
    
    /* Force spécifiquement les éléments footer à gauche */
    .footer-content,
    .footer-section,
    .footer-title,
    .footer-description,
    .footer-contact,
    .footer-hours,
    .footer-nav-list,
    .footer-newsletter,
    .footer-social,
    .footer-legal-notice,
    .footer-bottom {
        text-align: left !important;
    }
    
    /* Alignement des éléments flex */
    .footer-contact .contact-item,
    .social-links,
    .footer-certifications {
        justify-content: flex-start !important;
    }
    
    .footer-bottom-content {
        align-items: flex-start !important;
    }

    .footer-legal-notice {
        padding: 20px;
    }
}

/* Mode sombre (si souhaité plus tard) */
@media (prefers-color-scheme: dark) {
    /* Réservé pour une future implémentation */
    /* Pour l'instant, Naturaleaf garde son thème clair et naturel */
}

/* ========================================
   PRINT STYLES
======================================== */

@media print {
    /* Masquer les éléments non nécessaires */
    .header-actions,
    .mobile-menu-toggle,
    .footer-newsletter,
    .footer-social,
    .newsletter-cta-section,
    .btn,
    .alert-close {
        display: none !important;
    }

    /* Optimiser pour l'impression */
    body {
        font-size: 12pt;
        line-height: 1.4;
        color: #000;
        background: #fff;
    }

    .container {
        max-width: none;
        padding: 0;
    }

    /* Éviter les coupures de page */
    .category-card,
    .product-card,
    .blog-card,
    .value-item {
        break-inside: avoid;
        page-break-inside: avoid;
    }

    /* Liens en texte */
    a::after {
        content: " (" attr(href) ")";
        font-size: 10pt;
        color: #666;
    }

    a[href^="#"]::after,
    a[href^="javascript:"]::after {
        content: "";
    }
}