/* ==========================================================================
   IPTV4U HELPful — RESPONSIVE STYLES
   ========================================================================== */

/* Tablettes */
@media (max-width: 1024px) {
    .container {
        max-width: 960px;
    }
    
    .header-content {
        gap: var(--s4);
    }
    
    .nav-list {
        gap: var(--s1);
    }
    
    .nav-link {
        padding: var(--s2) var(--s3);
        font-size: 0.9rem;
    }
}

/* Tablettes petites */
@media (max-width: 920px) {
    .main-nav {
        display: none;
    }
    
    .nav-toggle {
        display: flex;
    }
    
    .header-actions {
        gap: var(--s1);
    }
}

/* Mobiles paysage */
@media (max-width: 768px) {
    .container {
        width: 95%;
        padding: 0 var(--s3);
    }
    
    .announcement-content {
        flex-direction: column;
        gap: var(--s2);
        text-align: center;
    }
    
    .announcement-text {
        font-size: 0.85rem;
    }
    
    .mobile-nav {
        width: 280px;
    }
    
    .search-overlay {
        padding-top: 15vh;
    }
    
    .search-container {
        padding: var(--s6);
    }
}

/* Mobiles portrait */
@media (max-width: 480px) {
    .logo img {
        width: 140px;
    }
    
    .site-header {
        padding: var(--s3) 0;
    }
    
    .announcement-bar {
        padding: var(--s2) 0;
        font-size: 0.8rem;
    }
    
    .search-container {
        padding: var(--s5);
        margin: var(--s4);
    }
    
    .search-title {
        font-size: 1.25rem;
    }
    
    .search-input {
        padding: var(--s3) var(--s4);
        padding-right: 50px;
    }
    
    .mobile-nav {
        width: 100%;
        max-width: 300px;
    }
    
    .mobile-nav-content {
        padding: var(--s4);
    }
    
    .mobile-nav-link {
        padding: var(--s3) var(--s4);
    }
}

/* Très petits écrans */
@media (max-width: 360px) {
    .container {
        width: 98%;
        padding: 0 var(--s2);
    }
    
    .logo img {
        width: 120px;
    }
    
    .action-btn {
        padding: var(--s2);
    }
    
    .mobile-nav {
        width: 100vw;
    }
}

/* Hautes résolutions */
@media (min-width: 1440px) {
    .container {
        max-width: 1400px;
    }
}

/* Impression */
@media print {
    .announcement-bar,
    .site-header,
    .mobile-nav,
    .search-overlay {
        display: none !important;
    }
    
    body {
        background: white !important;
        color: black !important;
    }
}

/* Mode sombre automatique */
@media (prefers-color-scheme: dark) {
    :root:not([data-theme]) {
        --bg: #1f2937;
        --bg-soft: #374151;
        --bg-glass: rgba(31, 41, 55, 0.8);
        --bg-glass-strong: rgba(31, 41, 55, 0.95);
        --text: #f9fafb;
        --text-muted: #d1d5db;
        --text-light: #e5e7eb;
        --border: rgba(255, 255, 255, 0.1);
        --border-light: rgba(255, 255, 255, 0.05);
    }
}

/* Réduction des animations */
@media (prefers-reduced-motion: reduce) {
    .announcement-bar::before {
        animation: none;
    }
    
    .search-overlay.active .search-container {
        transition: none;
    }
}

/* Hauteur d'écran limitée */
@media (max-height: 600px) {
    .search-overlay {
        padding-top: 10vh;
    }
    
    .mobile-nav-content {
        overflow-y: auto;
        max-height: 70vh;
    }
}