/* ===========================================
   VERSION MOBILE OPTIMALE - GLOW SÉOUL
   Mobile-First | Optimisé iPhone & Android
   =========================================== */

/* ====================================
   TABLETS (768px et moins)
   ==================================== */
@media (max-width: 768px) {
    /* Container */
    .container {
        padding: 0 15px;
        max-width: 100%;
    }
    
    /* Header */
    .main-header {
        padding: 12px 0;
    }
    
    .header-container {
        gap: 12px;
        padding: 0 15px;
    }
    
    .logo a {
        font-size: 1.2rem;
    }
    
    .search-bar {
        max-width: 250px;
    }
    
    /* Navigation */
    .nav-container {
        gap: 20px;
        padding: 0 15px;
    }
    
    .nav-link {
        font-size: 0.95rem;
    }
    
    /* Catégories */
    .category-container {
        padding: 0 15px;
        gap: 10px;
    }
    
    .category-btn {
        padding: 10px 18px;
        font-size: 0.9rem;
    }
    
    /* Hero */
    .hero-section {
        min-height: 60vh;
        padding: 60px 20px 40px;
    }
    
    .hero-title {
        font-size: 2.5rem;
    }
    
    .hero-subtitle {
        font-size: 1.1rem;
    }
    
    /* Products Grid - 3 colonnes sur tablette */
    .products-grid {
        grid-template-columns: repeat(3, 1fr);
        gap: 15px;
    }
    
    /* Benefits */
    .benefits-grid {
        grid-template-columns: repeat(2, 1fr);
        gap: 20px;
    }
    
    /* Footer */
    .footer-container {
        grid-template-columns: repeat(2, 1fr);
        gap: 30px;
    }
}

/* ====================================
   MOBILE (480px et moins) - OPTIMISÉ
   ==================================== */
@media (max-width: 480px) {
    /* ========== GLOBAL ========== */
    * {
        -webkit-tap-highlight-color: transparent;
    }
    
    body {
        font-size: 14px;
        overflow-x: hidden;
        margin: 0;
        padding: 0;
    }
    
    .container {
        padding: 0 12px;
    }
    
    /* Supprimer tout espace blanc en haut */
    body > * {
        margin-top: 0;
    }
    
    section {
        margin-top: 0 !important;
        margin-bottom: 0;
    }
    
    section:first-of-type {
        margin-top: 0 !important;
        padding-top: 0 !important;
    }
    
    /* Forcer aucun espace entre les éléments */
    nav + section,
    section + section {
        margin-top: 0 !important;
    }
    
    /* ========== TOP BANNER ========== */
    .top-banner {
        font-size: 0.7rem;
        padding: 6px 12px;
        position: sticky;
        top: 0;
        z-index: 1001;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
    }
    
    .promo-text {
        display: block;
        text-align: center;
    }
    
    /* ========== HEADER MOBILE - LAYOUT FIXE ========== */
    .main-header {
        padding: 8px 0;
        position: sticky;
        top: 30px; /* Juste sous le banner */
        z-index: 1000;
        background: white;
        box-shadow: 0 2px 8px rgba(0,0,0,0.08);
    }
    
    .header-container {
        display: grid;
        grid-template-columns: auto 1fr auto auto;
        gap: 8px;
        padding: 0 12px;
        align-items: center;
    }
    
    /* Logo - Colonne 1 */
    .logo {
        grid-column: 1;
        display: flex;
        align-items: center;
    }
    
    .logo a {
        font-size: 1rem;
        font-weight: 700;
        color: var(--taupe);
        text-decoration: none;
        white-space: nowrap;
        letter-spacing: 0.5px;
    }
    
    /* Barre de recherche - Colonne 2 (prend l'espace restant) */
    .search-bar {
        grid-column: 2;
        position: relative;
        max-width: none;
        width: 100%;
    }
    
    .search-bar input {
        width: 100%;
        padding: 8px 10px 8px 32px;
        font-size: 0.8rem;
        border: 1px solid #e0e0e0;
        border-radius: 20px;
        background: #f8f8f8;
    }
    
    .search-bar i {
        position: absolute;
        left: 10px;
        top: 50%;
        transform: translateY(-50%);
        font-size: 0.8rem;
        color: var(--taupe);
    }
    
    /* Panier - Colonne 3 */
    .icon-btn {
        grid-column: 3;
        width: 36px;
        height: 36px;
        display: flex;
        align-items: center;
        justify-content: center;
        position: relative;
    }
    
    .icon-btn i {
        font-size: 1rem;
        color: var(--taupe);
    }
    
    .cart-count {
        position: absolute;
        top: -4px;
        right: -4px;
        background: var(--neon-yellow);
        color: var(--charcoal);
        font-size: 0.65rem;
        font-weight: 700;
        min-width: 16px;
        height: 16px;
        border-radius: 10px;
        display: flex;
        align-items: center;
        justify-content: center;
        padding: 0 4px;
    }
    
    /* WhatsApp - Colonne 4 */
    .whatsapp-btn-header {
        grid-column: 4;
        width: 36px;
        height: 36px;
        display: flex;
        align-items: center;
        justify-content: center;
        background: #25D366;
        border-radius: 50%;
    }
    
    .whatsapp-btn-header i {
        font-size: 1rem;
        color: white;
    }
    
    /* ========== NAVIGATION PRINCIPALE ========== */
    .main-nav {
        position: sticky;
        top: 76px; /* Sous le header */
        z-index: 999;
        background: white;
        border-bottom: 1px solid #f0f0f0;
        padding: 0;
    }
    
    .nav-container {
        display: flex;
        gap: 20px;
        padding: 0 12px;
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
        scrollbar-width: none; /* Firefox */
    }
    
    .nav-container::-webkit-scrollbar {
        display: none; /* Chrome, Safari */
    }
    
    .nav-link {
        flex-shrink: 0;
        font-size: 0.85rem;
        padding: 14px 0;
        color: var(--text-color);
        text-decoration: none;
        white-space: nowrap;
        border-bottom: 2px solid transparent;
        transition: all 0.3s ease;
    }
    
    .nav-link:hover,
    .nav-link.active {
        color: var(--taupe);
        border-bottom-color: var(--taupe);
    }
    
    /* ========== NAVIGATION CATÉGORIES - HORIZONTALE SCROLLABLE ========== */
    .category-nav {
        position: sticky;
        top: 128px; /* Sous la nav principale */
        z-index: 998;
        background: white;
        padding: 12px 0;
        border-bottom: 1px solid #f0f0f0;
        margin-bottom: 0; /* Supprimer tout margin */
    }
    
    .category-container {
        display: flex;
        gap: 8px;
        padding: 0 12px;
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
        scrollbar-width: none;
    }
    
    .category-container::-webkit-scrollbar {
        display: none;
    }
    
    .category-btn {
        flex-shrink: 0;
        padding: 8px 14px;
        font-size: 0.75rem;
        font-weight: 600;
        color: var(--text-color);
        background: white;
        border: 2px solid #e0e0e0;
        border-radius: 20px;
        white-space: nowrap;
        transition: all 0.3s ease;
        cursor: pointer;
    }
    
    .category-btn:hover {
        border-color: var(--taupe);
        background: var(--light-bg);
    }
    
    .category-btn.active {
        background: var(--taupe);
        color: white;
        border-color: var(--taupe);
    }
    
    /* ========== HERO SECTION ========== */
    .hero-section {
        min-height: 50vh;
        padding: 30px 15px 30px;
        background-position: center center;
        background-size: cover;
        margin-top: 0 !important; /* Forcer margin-top à 0 */
        margin-bottom: 0;
    }
    
    .hero-content {
        padding: 20px;
        background: rgba(255,255,255,0.95);
        border-radius: 16px;
        max-width: 100%;
    }
    
    .hero-title {
        font-size: 1.6rem;
        line-height: 1.2;
        margin-bottom: 12px;
        color: var(--charcoal);
    }
    
    .hero-subtitle {
        font-size: 0.85rem;
        margin-bottom: 15px;
        color: var(--text-color);
        line-height: 1.5;
    }
    
    .social-proof {
        font-size: 0.8rem;
        margin: 15px 0;
    }
    
    .stars {
        font-size: 1rem;
        color: var(--neon-yellow);
        margin: 0 5px;
    }
    
    .cta-btn {
        padding: 12px 28px;
        font-size: 0.85rem;
        background: var(--taupe);
        color: white;
        border: none;
        border-radius: 25px;
        font-weight: 600;
        cursor: pointer;
        transition: all 0.3s ease;
    }
    
    .cta-btn:active {
        transform: scale(0.95);
    }
    
    /* ========== TRUST BADGES ========== */
    .trust-badges {
        display: flex;
        gap: 10px;
        padding: 15px 12px;
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
        scrollbar-width: none;
    }
    
    .trust-badges::-webkit-scrollbar {
        display: none;
    }
    
    .trust-item {
        flex-shrink: 0;
        padding: 10px 15px;
        background: var(--light-bg);
        border-radius: 10px;
        text-align: center;
        white-space: nowrap;
        font-size: 0.7rem;
    }
    
    .trust-item i {
        font-size: 0.9rem;
        display: block;
        margin-bottom: 5px;
        color: var(--taupe);
    }
    
    /* ========== STOCK ALERT BANNER ========== */
    .stock-alert-banner {
        padding: 10px 12px;
        font-size: 0.75rem;
        text-align: center;
        background: linear-gradient(135deg, #6B5D4F 0%, #5A4D3F 100%); /* Marron foncé */
        color: white;
        border-left: 3px solid var(--neon-yellow);
    }
    
    .stock-alert-banner i {
        color: var(--neon-yellow);
    }
    
    .stock-alert-banner strong {
        color: var(--neon-yellow);
    }
    
    /* ========== PRODUCTS SECTION ========== */
    .products-section {
        padding: 25px 0;
        background: white;
        border-top: 2px solid var(--taupe);
        border-bottom: 2px solid var(--taupe);
    }
    
    .section-title {
        font-size: 1.6rem;
        margin-bottom: 15px;
        padding: 0 12px;
        color: var(--charcoal);
    }
    
    .section-header {
        margin-bottom: 20px;
        padding: 0 12px;
    }
    
    .filter-info {
        font-size: 0.8rem;
        color: var(--text-color);
    }
    
    /* ========== PRODUCTS GRID - 2 COLONNES OPTIMISÉES ========== */
    .products-grid {
        display: grid;
        grid-template-columns: repeat(2, 1fr);
        gap: 12px;
        padding: 0 12px;
    }
    
    .product-card {
        background: white;
        border-radius: 12px;
        padding: 10px;
        box-shadow: 0 2px 8px rgba(0,0,0,0.06);
        transition: transform 0.3s ease, box-shadow 0.3s ease;
        border: 1px solid #f0f0f0; /* Bordure subtile */
    }
    
    .product-card:active {
        transform: scale(0.98);
    }
    
    /* Container de l'image - IMPORTANT pour mobile */
    .product-image-container {
        width: 100% !important;
        height: 180px !important; /* Hauteur fixe pour mobile */
        padding: 0 !important; /* Supprimer le padding */
        background: var(--light-bg);
        border-radius: 10px;
        overflow: hidden;
        position: relative;
        display: block !important;
    }
    
    .product-image {
        width: 100% !important;
        height: 100% !important; /* Prendre toute la hauteur du container */
        object-fit: cover;
        border-radius: 10px;
        margin-bottom: 0;
        background: var(--light-bg);
        display: block !important; /* Forcer l'affichage */
        visibility: visible !important; /* Forcer visible */
    }
    
    /* S'assurer que les images sont chargées */
    .product-card img {
        display: block !important;
        max-width: 100%;
    }
    
    /* Viewer count dans l'image */
    .viewer-count {
        position: absolute;
        bottom: 8px;
        left: 8px;
        background: rgba(0,0,0,0.7);
        color: white;
        padding: 4px 8px;
        border-radius: 12px;
        font-size: 0.65rem;
        display: flex;
        align-items: center;
        gap: 4px;
    }
    
    .viewer-count i {
        font-size: 0.6rem;
    }
    
    .product-badge {
        font-size: 0.65rem;
        padding: 3px 7px;
        background: linear-gradient(135deg, #F4E6EC 0%, #E3C5D5 100%);
        color: #8B6B7A;
        border-radius: 8px;
        font-weight: 600;
        display: inline-block;
        margin-bottom: 6px;
        box-shadow: 0 2px 6px rgba(227, 197, 213, 0.3);
    }
    
    /* Badges spécifiques mobile - Couleurs personnalisées */
    .product-badge.badge-most-wanted {
        background: linear-gradient(135deg, #F4E6EC 0%, #E3C5D5 100%);
        color: #8B6B7A;
    }
    
    .product-badge.badge-bestseller {
        background: linear-gradient(135deg, #E3C5D5 0%, #B58DAF 100%);
        color: #6B4D64;
    }
    
    .product-badge.badge-limited {
        background: linear-gradient(135deg, #EADDD1 0%, #D9A7A7 100%);
        color: #8B6B6B;
    }
    
    .product-badge.badge-new {
        background: linear-gradient(135deg, #F4E6EC 0%, #EADDD1 100%);
        color: #8B7269;
    }
    
    .product-badge.badge-regen {
        background: linear-gradient(135deg, #E3C5D5 0%, #D9A7A7 100%);
        color: #7B5B64;
    }
    
    .product-badge.badge-antiage {
        background: linear-gradient(135deg, #D9A7A7 0%, #B58DAF 100%);
        color: #6B4D5F;
    }
    
    .product-badge.badge-microneedle {
        background: linear-gradient(135deg, #EADDD1 0%, #E3C5D5 100%);
        color: #8B7269;
    }
    
    .product-badge.badge-glow {
        background: linear-gradient(135deg, #F4E6EC 0%, #D9A7A7 100%);
        color: #8B6B6B;
    }
    
    .product-brand {
        font-size: 0.65rem;
        color: #666; /* Gris foncé */
        text-transform: uppercase;
        letter-spacing: 0.5px;
        font-weight: 600;
        margin-top: 6px;
    }
    
    .product-name {
        font-size: 0.8rem;
        font-weight: 600;
        margin: 6px 0;
        line-height: 1.3;
        color: #1a1a1a; /* NOIR */
        display: -webkit-box;
        -webkit-line-clamp: 2;
        -webkit-box-orient: vertical;
        overflow: hidden;
    }
    
    .product-volume {
        font-size: 0.7rem;
        color: #333; /* NOIR */
        margin: 4px 0;
        font-weight: 500;
    }
    
    .stock-indicator {
        font-size: 0.7rem;
        color: #333; /* NOIR par défaut */
        margin: 4px 0;
        font-weight: 600;
    }
    
    .stock-indicator.in-stock {
        color: #2E7D32; /* Vert foncé */
    }
    
    .stock-indicator.limited-stock {
        color: #F57C00; /* Orange foncé */
    }
    
    .product-price {
        font-size: 1rem;
        font-weight: 700;
        color: #1a1a1a; /* NOIR */
        margin: 8px 0;
    }
    
    .product-description {
        font-size: 0.7rem;
        line-height: 1.4;
        color: #333; /* NOIR */
        margin: 6px 0;
        display: -webkit-box;
        -webkit-line-clamp: 2;
        -webkit-box-orient: vertical;
        overflow: hidden;
    }
    
    .btn-add-cart,
    .btn-view-details {
        width: 100%;
        padding: 9px 12px;
        font-size: 0.8rem;
        font-weight: 600;
        border-radius: 8px;
        border: none;
        cursor: pointer;
        transition: all 0.3s ease;
        margin-top: 6px;
    }
    
    .btn-add-cart {
        background: var(--taupe);
        color: white;
    }
    
    .btn-add-cart:active {
        transform: scale(0.95);
        background: #8B7D6B;
    }
    
    .btn-view-details {
        background: white;
        color: var(--taupe);
        border: 2px solid var(--taupe);
    }
    
    /* ========== BENEFITS SECTION ========== */
    .benefits-section {
        padding: 35px 0;
        background: var(--light-bg);
    }
    
    .benefits-grid {
        display: grid;
        grid-template-columns: 1fr;
        gap: 15px;
        padding: 0 12px;
    }
    
    .benefit-card {
        background: white;
        padding: 20px 15px;
        border-radius: 12px;
        text-align: center;
        box-shadow: 0 2px 6px rgba(0,0,0,0.05);
    }
    
    .benefit-card i {
        font-size: 2rem;
        color: var(--taupe);
        margin-bottom: 12px;
    }
    
    .benefit-card h3 {
        font-size: 1rem;
        margin-bottom: 8px;
        color: var(--charcoal);
    }
    
    .benefit-card p {
        font-size: 0.8rem;
        color: var(--text-color);
        line-height: 1.5;
    }
    
    /* ========== FOOTER ========== */
    .main-footer {
        padding: 35px 0 20px;
        background: var(--charcoal);
        color: white;
    }
    
    .footer-container {
        display: grid;
        grid-template-columns: 1fr;
        gap: 30px;
        padding: 0 12px;
    }
    
    .footer-logo {
        font-size: 1.4rem;
        font-weight: 700;
        color: var(--neon-yellow);
        margin-bottom: 10px;
    }
    
    .footer-section h4 {
        font-size: 0.95rem;
        margin-bottom: 12px;
        color: white;
    }
    
    .footer-section p,
    .footer-section li,
    .footer-section a {
        font-size: 0.8rem;
        color: rgba(255,255,255,0.8);
        line-height: 1.6;
    }
    
    .footer-section ul {
        list-style: none;
        padding: 0;
    }
    
    .footer-section li {
        margin-bottom: 8px;
    }
    
    .social-links {
        display: flex;
        gap: 12px;
        margin-top: 12px;
    }
    
    .social-links a {
        width: 38px;
        height: 38px;
        background: rgba(255,255,255,0.1);
        border-radius: 50%;
        display: flex;
        align-items: center;
        justify-content: center;
        font-size: 1.1rem;
        color: white;
        transition: all 0.3s ease;
    }
    
    .social-links a:hover {
        background: var(--taupe);
    }
    
    .whatsapp-footer-btn {
        padding: 12px 24px;
        font-size: 0.85rem;
        background: #25D366;
        color: white;
        border: none;
        border-radius: 25px;
        font-weight: 600;
        margin-top: 12px;
        display: inline-flex;
        align-items: center;
        gap: 8px;
    }
    
    .footer-bottom {
        padding: 20px 12px;
        font-size: 0.7rem;
        text-align: center;
        border-top: 1px solid rgba(255,255,255,0.1);
        color: rgba(255,255,255,0.6);
    }
    
    /* ========== MODAL ========== */
    .modal {
        display: none !important; /* Caché par défaut */
        position: fixed;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        background: rgba(0,0,0,0.8);
        z-index: 9999;
        align-items: center;
        justify-content: center;
        padding: 10px;
    }
    
    .modal.show {
        display: flex !important; /* Affiché seulement avec classe .show */
    }
    
    .modal-content {
        width: 95%;
        max-width: 95%;
        max-height: 90vh;
        background: white;
        border-radius: 16px;
        padding: 20px 15px;
        overflow-y: auto;
        position: relative;
    }
    
    .modal-close {
        position: absolute;
        top: 10px;
        right: 10px;
        width: 32px;
        height: 32px;
        background: var(--charcoal);
        color: white;
        border: none;
        border-radius: 50%;
        font-size: 1.3rem;
        display: flex;
        align-items: center;
        justify-content: center;
        cursor: pointer;
        z-index: 10;
    }
    
    .product-modal-content {
        display: flex;
        flex-direction: column;
        gap: 15px;
    }
    
    .product-modal-image {
        width: 100%;
        height: 280px;
        object-fit: cover;
        border-radius: 12px;
    }
    
    .product-modal-details {
        width: 100%;
    }
    
    .modal-title {
        font-size: 1.3rem;
        margin-bottom: 8px;
        color: var(--charcoal);
    }
    
    .modal-brand {
        font-size: 0.85rem;
        color: var(--taupe);
        text-transform: uppercase;
        letter-spacing: 0.5px;
        font-weight: 600;
    }
    
    .modal-price {
        font-size: 1.6rem;
        font-weight: 700;
        color: white; /* BLANC sur fond sombre */
        margin: 12px 0;
    }
    
    .modal-header-section .modal-price {
        color: white !important; /* BLANC sur fond sombre du header */
    }
    
    .modal-description {
        font-size: 0.85rem;
        line-height: 1.6;
        color: var(--text-color);
        margin: 15px 0;
    }
    
    .modal-benefits h4,
    .modal-usage h4 {
        font-size: 1rem;
        margin: 20px 0 10px 0;
        color: var(--charcoal);
    }
    
    .modal-benefits ul,
    .modal-usage ul {
        list-style: none;
        padding: 0;
    }
    
    .modal-benefits li,
    .modal-usage li {
        font-size: 0.85rem;
        line-height: 1.6;
        color: #333; /* COULEUR NOIRE POUR LES BÉNÉFICES */
        margin-bottom: 8px;
        padding-left: 22px;
        position: relative;
    }
    
    .modal-benefits li:before {
        content: "✓";
        position: absolute;
        left: 0;
        color: var(--taupe);
        font-weight: 700;
    }
    
    .modal-usage li:before {
        content: "→";
        position: absolute;
        left: 0;
        color: var(--taupe);
    }
    
    .modal-actions {
        display: flex;
        gap: 10px;
        margin-top: 20px;
    }
    
    .modal-actions button {
        flex: 1;
        padding: 12px 20px;
        font-size: 0.9rem;
        font-weight: 600;
        border-radius: 25px;
        border: none;
        cursor: pointer;
    }
    
    .modal-actions .btn-add-cart {
        background: var(--taupe);
        color: white;
    }
    
    /* ========== FLOATING WHATSAPP ========== */
    .floating-whatsapp {
        position: fixed;
        bottom: 20px;
        right: 20px;
        width: 56px;
        height: 56px;
        background: #25D366;
        border-radius: 50%;
        display: flex;
        align-items: center;
        justify-content: center;
        font-size: 1.8rem;
        color: white;
        box-shadow: 0 4px 12px rgba(37, 211, 102, 0.4);
        z-index: 1000;
        transition: all 0.3s ease;
    }
    
    .floating-whatsapp:active {
        transform: scale(0.9);
    }
    
    /* ========== SEARCH RESULTS ========== */
    .search-results {
        position: absolute;
        top: 100%;
        left: 0;
        right: 0;
        background: white;
        border-radius: 8px;
        box-shadow: 0 4px 12px rgba(0,0,0,0.15);
        max-height: 60vh;
        overflow-y: auto;
        z-index: 100;
        margin-top: 5px;
    }
    
    .search-result-item {
        display: flex;
        gap: 10px;
        padding: 10px;
        border-bottom: 1px solid #f0f0f0;
        cursor: pointer;
    }
    
    .search-result-item:active {
        background: var(--light-bg);
    }
    
    .search-result-item img {
        width: 50px;
        height: 50px;
        object-fit: cover;
        border-radius: 6px;
    }
    
    .search-result-info h4 {
        font-size: 0.8rem;
        margin-bottom: 4px;
        color: var(--charcoal);
    }
    
    .search-result-info p {
        font-size: 0.7rem;
        color: var(--text-color);
    }
    
    /* ========== NO RESULTS ========== */
    .no-results {
        padding: 40px 20px;
        text-align: center;
    }
    
    .no-results i {
        font-size: 3rem;
        color: var(--taupe);
        margin-bottom: 15px;
    }
    
    .no-results p {
        font-size: 0.95rem;
        color: var(--text-color);
    }
}

/* ====================================
   TRÈS PETITS ÉCRANS (375px et moins)
   iPhone SE, iPhone 12 Mini
   ==================================== */
@media (max-width: 375px) {
    .logo a {
        font-size: 0.9rem;
    }
    
    .search-bar input {
        font-size: 0.75rem;
        padding: 7px 8px 7px 28px;
    }
    
    .icon-btn,
    .whatsapp-btn-header {
        width: 32px;
        height: 32px;
    }
    
    .category-btn {
        padding: 7px 12px;
        font-size: 0.7rem;
    }
    
    .hero-title {
        font-size: 1.4rem;
    }
    
    .hero-subtitle {
        font-size: 0.8rem;
    }
    
    .product-image {
        height: 150px;
    }
    
    .product-name {
        font-size: 0.75rem;
    }
    
    .product-price {
        font-size: 0.95rem;
    }
    
    .btn-add-cart {
        padding: 8px 10px;
        font-size: 0.75rem;
    }
    
    .products-grid {
        gap: 10px;
    }
}

/* ====================================
   ORIENTATION PAYSAGE (Landscape)
   ==================================== */
@media (max-height: 500px) and (orientation: landscape) {
    .hero-section {
        min-height: 90vh;
        padding: 30px 15px;
    }
    
    .hero-title {
        font-size: 1.4rem;
    }
    
    .main-header,
    .main-nav,
    .category-nav {
        position: relative;
        top: 0;
    }
    
    .top-banner {
        position: relative;
    }
}

/* ====================================
   AMÉLIORATION DU TOUCH & PERFORMANCE
   ==================================== */
@media (max-width: 480px) {
    /* Smooth scrolling */
    html {
        scroll-behavior: smooth;
    }
    
    /* Optimisation des touches */
    button,
    a,
    .product-card,
    .category-btn {
        -webkit-tap-highlight-color: rgba(0,0,0,0.05);
        touch-action: manipulation;
    }
    
    /* Performance scroll */
    .products-grid,
    .category-container,
    .nav-container {
        will-change: scroll-position;
    }
    
    /* ========== FAQ & CATEGORY DESCRIPTIONS - MOBILE ========== */
    /* Force les réponses FAQ à être visibles */
    .faq-answer,
    .faq-answer p,
    .faq-answer ul,
    .faq-answer ol,
    .faq-answer li {
        color: #333 !important;
        background: white !important;
    }
    
    .faq-question span,
    .faq-question h3 {
        color: #333 !important;
        font-size: 0.95rem;
    }
    
    /* Force les descriptions de catégories à être visibles */
    .category-description,
    .category-description p,
    .category-description li,
    .category-description span {
        color: #333 !important;
        background: white !important;
    }
    
    .category-description h2,
    .category-description h3 {
        color: var(--charcoal) !important;
        font-size: 1.3rem;
    }
    
    /* Taille réduite pour mobile */
    .category-description {
        padding: 20px 15px;
        margin: 20px 0;
    }
    
    /* ========== MODAL PRODUIT - CONTRASTE MOBILE ========== */
    /* Force le titre et volume en NOIR */
    .modal-title-section .modal-title,
    .modal-title-section .product-volume {
        color: #1a1a1a !important;
    }
    
    /* Force les bienfaits et usage en NOIR */
    .modal-benefits h4,
    .modal-usage h4,
    .modal-benefits li,
    .modal-usage li,
    .modal-long-description {
        color: #333 !important;
    }
}