/* 📱 OPTIMISATION MOBILE COMPLÈTE */

/* Widgets audio - Adapter position mobile */
@media (max-width: 768px) {
    /* Counter visiteurs - Plus petit + PLUS BAS */
    #top-visitor-counter {
        top: 60px !important; /* Descendre plus bas */
        left: 10px !important;
        padding: 5px 8px !important;
        min-width: 65px !important;
        font-size: 0.7rem !important;
    }
    
    #top-visitor-counter > div:first-child {
        font-size: 0.65rem !important;
        margin-bottom: 2px !important;
    }
    
    #top-counter-value {
        font-size: 1rem !important;
    }
    
    /* Widgets audio - EN BAS + COMPACTS + TOGGLE BUTTON */
    #unified-audio-widget {
        position: fixed;
        bottom: 0;
        left: 0;
        right: 0;
        z-index: 9999;
    }
    
    /* Container widgets - Barre horizontale en bas */
    #unified-audio-widget > div:first-child {
        position: fixed !important;
        top: auto !important;
        bottom: 20px !important;
        left: 10px !important;
        right: 80px !important; /* Laisser espace pour toggle button */
        transform: none !important;
        flex-direction: row !important;
        gap: 5px !important;
        flex-wrap: nowrap !important;
        background: rgba(15, 23, 42, 0.95) !important;
        backdrop-filter: blur(10px) !important;
        padding: 6px 8px !important;
        border-radius: 16px !important;
        border: 2px solid #8b5cf6 !important;
        box-shadow: 0 -4px 20px rgba(139, 92, 246, 0.4) !important;
        max-width: calc(100vw - 100px) !important;
        overflow: hidden !important;
    }
    
    /* Bouton toggle pour cacher widgets */
    #unified-audio-widget::before {
        content: '🎵';
        position: fixed;
        bottom: 20px;
        right: 20px;
        width: 50px;
        height: 50px;
        background: linear-gradient(135deg, #8b5cf6, #a855f7);
        border: 2px solid #a855f7;
        border-radius: 50%;
        display: flex;
        align-items: center;
        justify-content: center;
        font-size: 1.5rem;
        cursor: pointer;
        box-shadow: 0 4px 15px rgba(139, 92, 246, 0.5);
        z-index: 10000;
    }
    
    /* Cacher widgets par défaut sur mobile, toggle avec JS */
    #unified-audio-widget.mobile-hidden > div:first-child {
        display: none !important;
    }
    
    /* Boutons Effects/Music - ULTRA COMPACTS */
    #sound-toggle-btn,
    #music-toggle-btn {
        min-width: 60px !important;
        max-width: 60px !important;
        padding: 6px 8px !important;
        font-size: 0.8rem !important;
        border-radius: 10px !important;
        flex-shrink: 0 !important;
    }
    
    #sound-toggle-btn span:first-child,
    #music-toggle-btn span:first-child {
        font-size: 1.1rem !important;
    }
    
    #sound-toggle-btn span:last-child,
    #music-toggle-btn span:last-child {
        display: none !important; /* Cacher texte "Effects"/"Music" sur mobile */
    }
    
    /* Volume slider container - ULTRA COMPACT */
    #unified-audio-widget > div:first-child > div:last-child {
        min-width: auto !important;
        max-width: 100px !important;
        padding: 6px 8px !important;
        gap: 4px !important;
        flex-shrink: 1 !important;
    }
    
    #volume-slider {
        width: 50px !important;
        height: 4px !important;
        flex-shrink: 1 !important;
    }
    
    #volume-slider::-webkit-slider-thumb,
    #volume-slider::-moz-range-thumb {
        width: 10px !important;
        height: 10px !important;
    }
    
    #volume-percent {
        font-size: 0.65rem !important;
        min-width: 24px !important;
    }
    
    /* Icône volume plus petite */
    #unified-audio-widget > div:first-child > div:last-child > span:first-child {
        font-size: 0.9rem !important;
    }
    
    /* Toggle button - Position mobile */
    #audio-toggle-btn {
        top: auto !important;
        bottom: 20px !important;
        left: auto !important;
        right: 20px !important;
    }
    
    /* Hero section - Stack vertical */
    .hero-content-wrapper {
        flex-direction: column !important;
        padding: 20px 15px !important;
    }
    
    .hero-text-content {
        max-width: 100% !important;
        text-align: center !important;
        padding: 0 10px !important;
    }
    
    /* Hero title - Réduire taille */
    .hero-title {
        font-size: 2.5rem !important;
    }
    
    .hero-title span:last-child {
        font-size: 3.2rem !important;
    }
    
    .hero-subtitle {
        font-size: 1.3rem !important;
    }
    
    .hero-description,
    .hero-bio {
        font-size: 1rem !important;
        max-width: 100% !important;
        padding: 15px !important;
    }
    
    /* Snake CTA - Adapter */
    .snake-cta {
        max-width: 100% !important;
        padding: 20px !important;
        font-size: 1rem !important;
    }
    
    /* Mini games - Réduire taille */
    .mini-games-container {
        width: 100% !important;
        max-width: 100% !important;
        margin-top: 30px !important;
    }
    
    #snake-canvas {
        max-width: 100% !important;
        height: auto !important;
    }
    
    .leaderboard {
        max-height: 250px !important;
    }
    
    /* Navigation - Burger menu déjà géré */
    
    /* Flux tiers - Stack vertical */
    .tiers-grid {
        grid-template-columns: 1fr !important;
        gap: 20px !important;
    }
    
    .tier {
        transform: scale(1) !important; /* Reset Nimbus scale */
    }
    
    /* Tableau ROI - Responsive */
    .roi-table table {
        font-size: 0.85rem !important;
    }
    
    .roi-table th,
    .roi-table td {
        padding: 12px 8px !important;
    }
    
    /* Pricing cards - Stack */
    .pricing-grid-enhanced {
        grid-template-columns: 1fr !important;
    }
    
    /* What's included - 1 colonne */
    .included-grid {
        grid-template-columns: 1fr !important;
    }
    
    /* PDF download buttons */
    .pdf-buttons-grid {
        grid-template-columns: 1fr !important;
    }
    
    /* Projects cards */
    .projects-grid {
        grid-template-columns: 1fr !important;
    }
    
    /* Footer - Stack */
    .footer-content {
        flex-direction: column !important;
        text-align: center !important;
    }
    
    .footer-section {
        margin-bottom: 30px !important;
    }
    
    /* DAO Tokenomics */
    .tokenomics-grid {
        grid-template-columns: 1fr !important;
    }
    
    /* Contact form */
    .contact-form {
        padding: 20px !important;
    }
    
    /* Sections padding */
    .section {
        padding: 40px 15px !important;
    }
    
    .container {
        padding: 0 15px !important;
    }
    
    /* World map - Réduire */
    #world-map-widget {
        bottom: 150px !important;
        right: 10px !important;
        transform: scale(0.8) !important;
    }
}

/* Très petits écrans (< 480px) */
@media (max-width: 480px) {
    .hero-title {
        font-size: 2rem !important;
    }
    
    .hero-title span:last-child {
        font-size: 2.8rem !important;
    }
    
    .hero-subtitle {
        font-size: 1.1rem !important;
    }
    
    /* Widgets encore plus compacts */
    #unified-audio-widget button {
        min-width: 95px !important;
        font-size: 0.85rem !important;
    }
    
    /* Snake plus petit */
    #snake-canvas {
        width: 100% !important;
        max-width: 300px !important;
    }
    
    /* Tableau scrollable */
    .table-responsive {
        overflow-x: auto !important;
    }
}

/* Landscape mode mobile */
@media (max-width: 768px) and (orientation: landscape) {
    .hero-content-wrapper {
        flex-direction: row !important;
    }
    
    .mini-games-container {
        width: 45% !important;
    }
    
    .hero-text-content {
        width: 50% !important;
    }
}

/* Touch improvements */
@media (hover: none) and (pointer: coarse) {
    /* Augmenter zone touch */
    button,
    a,
    .clickable {
        min-height: 44px !important;
        min-width: 44px !important;
    }
    
    /* Désactiver hover effects */
    *:hover {
        transform: none !important;
    }
}