/* ========================================
   RESPONSIVE DESIGN - MOBILE & TABLET
   ======================================== */

/* ========================================
   MOBILE FIRST - Small Devices (< 640px)
   ======================================== */
@media (max-width: 639px) {

    /* Navigation Mobile */
    nav {
        padding: 0 20px;
        height: 70px;
    }

    .logo-container img {
        max-width: 120px;
        height: auto;
    }

    /* Hero Section */
    #home {
        min-height: 100vh;
        padding: 0 1rem;
    }

    #hero-logo {
        max-width: 90% !important;
        margin-bottom: 1rem;
    }

    .hero-content {
        padding: 0 1rem;
        margin-top: 2rem;
    }

    /* Hero Buttons - Stack vertically and CENTER */
    .hero-buttons,
    #home .flex.flex-col {
        display: flex !important;
        flex-direction: column !important;
        align-items: center !important;
        justify-content: center !important;
        width: 100% !important;
    }

    .trailer-btn,
    .wishlist-btn {
        width: 100% !important;
        max-width: 300px !important;
        padding: 1rem 2rem !important;
        font-size: 1rem !important;
        justify-content: center !important;
        display: flex !important;
        align-items: center !important;
        text-align: center !important;
    }

    /* Touch animations for hero buttons */
    .trailer-btn:active,
    .wishlist-btn:active {
        transform: scale(0.95) !important;
        transition: transform 0.1s ease !important;
    }

    /* Gravity Strikers Section */
    #gravity {
        padding: 3rem 1rem 50px !important;
    }

    #gravity .max-w-\[1200px\] {
        padding: 0 1rem;
    }

    /* TITRES PLUS GRANDS - Pleine largeur */
    #gravity>div>div>div>h2 {
        font-size: 3.5rem !important;
        line-height: 1 !important;
        margin-bottom: 2rem !important;
        width: 100% !important;
    }

    /* Le mot "esports" en gradient DANS LE TITRE SEULEMENT */
    #gravity h2 .gradient-text,
    #gravity h2 .ghost-echo {
        font-size: 5.5rem !important;
    }

    /* Texte descriptif - réduit pour tenir sur une ligne */
    #gravity p.text-lg {
        font-size: 1rem !important;
        line-height: 1.6 !important;
    }

    /* Feature Grid - Better spacing */
    .feature-grid,
    #gravity .grid {
        gap: 1rem !important;
    }

    /* Discord Button - CENTERED with touch animation */
    #gravity a[href*="discord"] {
        width: 100% !important;
        max-width: 320px !important;
        padding: 1rem 2rem !important;
        font-size: 1rem !important;
        margin-left: auto !important;
        margin-right: auto !important;
        display: flex !important;
        justify-content: center !important;
    }

    #gravity a[href*="discord"]:active {
        transform: scale(0.95) !important;
        transition: transform 0.1s ease !important;
    }

    /* Parallax Container - Reduce height on mobile */
    /* Parallax Container - HIDE on mobile */
    .parallax-container {
        display: none !important;
    }

    /* ===== TABS SECTION - MISE EN PAGE MOBILE ===== */
    /* ===== TABS SECTION - MISE EN PAGE MOBILE ===== */
    #features-tabs {
        padding-top: 40px !important;
        padding-bottom: 60px !important;
    }

    /* Encart Feature au dessus des onglets */
    /* Encart Feature au dessus des onglets */
    .tabs-header-container {
        display: flex !important;
        flex-direction: column !important;
        align-items: flex-start !important;
        /* Aligné à gauche */
        gap: 25px !important;
        /* Exactement 25px plus haut */
        margin-bottom: 2rem !important;
    }

    .shine-badge {
        display: none !important;
    }

    .tabs-sidebar {
        width: 100% !important;
        order: 1 !important;
        display: flex !important;
        flex-direction: row !important;
        align-items: stretch !important;
        overflow-x: auto !important;
        gap: 0 !important;
        /* Collés */
        padding: 0.5rem 1.5rem 1.5rem 1.5rem !important;
        -webkit-overflow-scrolling: touch !important;
        scrollbar-width: none !important;
    }

    .tabs-sidebar::-webkit-scrollbar {
        display: none !important;
    }

    .tab-btn {
        min-width: 110px !important;
        height: auto !important;
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;
        flex-shrink: 0 !important;
        padding: 0.875rem 1.25rem !important;
        font-size: 0.9rem !important;
        white-space: nowrap !important;
    }

    .tab-btn .tab-text {
        font-size: 0.85rem !important;
    }

    .tab-btn i {
        font-size: 1.25rem !important;
    }

    /* Video container responsive - RETOUR LARGEUR ORIGINE */
    #features-tabs .aspect-\[18\/9\] {
        aspect-ratio: 16/9 !important;
        /* Format paysage standard */
        max-height: none !important;
        width: 100% !important;
    }

    .video-frame-glow {
        border-radius: 0.75rem !important;
    }

    /* Touch animation for tabs */
    .tab-btn:active {
        transform: scale(0.95) !important;
        transition: transform 0.1s ease !important;
    }

    /* Discovery Sections - TITRES PLUS GRANDS */
    #discovery-vision,
    #discovery-community {
        padding: 3rem 1rem 8rem 1rem !important;
        /* Encore plus de padding bottom */
    }

    #discovery-vision h2 {
        font-size: 2.25rem !important;
        line-height: 1.2 !important;
        margin-bottom: 1.5rem !important;
    }

    #discovery-vision h3,
    #discovery-community h3 {
        font-size: 1.75rem !important;
        line-height: 1.3 !important;
        margin-bottom: 1rem !important;
    }

    /* Paragraphes - BEAUX BLOCS DE TEXTE */
    #discovery-vision p,
    #discovery-community p {
        background: rgba(255, 255, 255, 0.1) !important;
        padding: 1.5rem !important;
        border-radius: 12px !important;
        border: 1px solid rgba(255, 255, 255, 0.15) !important;
        text-align: left !important;
        font-size: 1.1rem !important;
        line-height: 1.7 !important;
        margin-bottom: 1.25rem !important;
        color: #e5e7eb !important;
        box-shadow: 0 4px 10px rgba(0, 0, 0, 0.2) !important;
        min-height: 48px;
        /* Target size */
    }

    /* Espaces réduits entre les blocs */
    #discovery-vision h2,
    #discovery-community h2 {
        margin-bottom: 1rem !important;
    }

    #discovery-vision h3,
    #discovery-community h3 {
        margin-bottom: 1rem !important;
    }

    #discovery-vision .space-y-4,
    #discovery-community .space-y-4 {
        gap: 1rem !important;
        display: flex !important;
        flex-direction: column !important;
    }

    #discovery-vision img,
    #discovery-community img {
        margin-bottom: 1rem !important;
    }

    /* Social Icons Centering and Size */
    #discovery-community .pt-8.flex {
        justify-content: center !important;
    }

    #discovery-community .flex.gap-4 a {
        width: 48px !important;
        height: 48px !important;
    }

    /* CTA Button centered with touch */
    #discovery-community a[href*="steam"] {
        margin-left: auto !important;
        margin-right: auto !important;
    }

    #discovery-community a[href*="steam"]:active {
        transform: scale(0.95) !important;
        transition: transform 0.1s ease !important;
    }

    /* Hide Only Slogan on Mobile - BECOME A GRAVITY STRIKER */
    #discovery-community .mt-16 p {
        display: none !important;
    }

    /* Marquee */
    .diagonal-marquee {
        font-size: 3.5rem !important;
    }

    .marquee-logo {
        width: 45px !important;
        height: 45px !important;
    }

    /* Values Section - CONDENSÉE MOBILE */
    #studio {
        padding: 3rem 1rem 2rem !important;
        /* Réduit */
    }

    #studio h2 {
        font-size: 2rem !important;
        /* Réduit */
        margin-bottom: 1rem !important;
        /* Réduit */
        line-height: 1.1 !important;
    }

    /* Paragraphes - MISE EN PAGE MOBILE */
    #studio p {
        font-size: 1rem !important;
        line-height: 1.6 !important;
        text-align: center !important;
        margin-bottom: 1.25rem !important;
        color: #e5e7eb !important;
        padding: 0 0.5rem !important;
    }

    .values-bg {
        background-color: #121212 !important;
        background-image: radial-gradient(circle at 50% 50%, #1a1a1a 0%, #121212 100%);
    }

    #studio .grid {
        gap: 1rem !important;
        /* Réduit */
    }

    .flip-card {
        min-height: 120px !important;
        /* Encore plus réduit */
        padding: 0.75rem !important;
    }

    .value-card-title {
        font-size: 1.25rem !important;
        /* Encore plus réduit */
        margin-bottom: 0.5rem !important;
    }

    .value-card-description {
        font-size: 0.75rem !important;
        /* Encore plus réduit */
        line-height: 1.4 !important;
    }

    /* Touch animation for cards */
    .flip-card:active {
        transform: scale(0.98) !important;
        transition: transform 0.1s ease !important;
    }

    /* Contact Section - TITRES PLUS GRANDS */
    /* Contact Section - EXTREME CONDENSE FOR MOBILE */
    #contact {
        padding: 2rem 3rem !important;
        /* Restored horizontal margins */
        min-height: auto !important;
    }

    #contact .max-w-\[1200px\] {
        padding: 0 !important;
        width: 100% !important;
    }

    #contact h2 {
        font-size: 2rem !important;
        /* Smaller title */
        line-height: 1 !important;
        margin-bottom: 0.75rem !important;
        /* Tighter spacing */
        text-align: center !important;
    }

    /* Le gradient "Contact Us" ajusté */
    #contact h2 .gradient-text,
    #contact h2 .ghost-echo {
        font-size: 2rem !important;
    }

    #contact form {
        padding: 0 !important;
        /* Remove form container padding */
        background: transparent !important;
        /* Simplify looks */
        border: none !important;
    }

    #contact form>* {
        margin-top: 0.4rem !important;
    }

    #contact form>*:first-child {
        margin-top: 0 !important;
        /* No top margin for first element */
    }

    #contact input,
    #contact textarea {
        font-size: 1rem !important;
        /* Minimum 16px to prevent iOS zoom */
        padding: 0.75rem !important;
        height: auto !important;
        background: rgba(255, 255, 255, 0.1) !important;
    }

    #contact textarea {
        height: 60px !important;
        /* Shorter textarea */
    }

    #contact button[type="submit"] {
        width: 100% !important;
        padding: 0.6rem !important;
        /* Smaller button */
        font-size: 0.9rem !important;
        margin-top: 0.75rem !important;
    }

    #contact button[type="submit"]:active {
        transform: scale(0.95) !important;
        transition: transform 0.1s ease !important;
    }

    /* Black Hole en arrière-plan sur mobile */
    /* Black Hole en arrière-plan sur mobile */
    .black-hole,
    .black-hole-distortion {
        display: none !important;
    }

    /* ===== FOOTER ULTRA-COMPACT MOBILE ===== */
    footer {
        height: 70px !important;
        min-height: 70px !important;
        padding: 0 20px !important;
        margin: 0 !important;
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;
    }

    footer>div {
        display: flex !important;
        flex-direction: row !important;
        align-items: center !important;
        justify-content: space-between !important;
        width: 100% !important;
        gap: 0 !important;
    }

    /* 1. Logo (Left) */
    footer>div>div:first-child {
        display: flex !important;
        width: auto !important;
        order: 1 !important;
    }

    footer .logo-container {
        transform: scale(0.7) !important;
        transform-origin: left center !important;
        margin: 0 !important;
    }

    footer p.text-gray-600,
    footer div.flex-wrap.pt-6 {
        display: none !important;
        /* Hide copyright and legal row */
    }

    /* 2. Socials (Right) */
    footer>div>div:nth-child(2) {
        display: flex !important;
        width: auto !important;
        order: 2 !important;
        gap: 0.75rem !important;
    }

    footer .footer-social-link {
        width: 44px !important;
        height: 44px !important;
        font-size: 1.2rem !important;
    }

    /* 3. Hide Navigation Links Zone */
    footer>div>div:last-child {
        display: none !important;
    }

    /* Copyright text smaller */
    footer .text-xs {
        font-size: 0.75rem !important;
        margin-top: 1rem !important;
    }

    /* Reduce animations on mobile for performance */
    .parallax-image,
    .parallax-character,
    .parallax-logo {
        transform: none !important;
    }

    /* Better touch targets */
    a,
    button,
    .mobile-link,
    .footer-social-link,
    .tab-btn {
        min-height: 48px !important;
        min-width: 48px;
        display: flex;
        align-items: center;
        justify-content: center;
    }

    .mobile-link {
        padding: 12px 20px !important;
        width: 100%;
        text-align: center;
    }

    /* Prevent horizontal scroll */
    body {
        overflow-x: hidden;
    }

    /* Improve readability */
    * {
        -webkit-font-smoothing: antialiased;
        -moz-osx-font-smoothing: grayscale;
    }
}

/* ========================================
   TABLET - Medium Devices (640px - 1023px)
   ======================================== */
@media (min-width: 640px) and (max-width: 1023px) {

    /* HIDE DECORATIONS ON TABLET */
    .black-hole,
    .black-hole-distortion,
    .respark-girl-image,
    img[alt="ReSpark Girl"] {
        display: none !important;
    }

    /* Ensure standard Footer Layout on Tablet (Resetting Mobile overrides) */
    .mobile-socials {
        display: none !important;
    }

    footer>div>div:nth-child(2) {
        display: flex !important;
        /* Restore footer socials */
    }

    /* HIDE IMAGE IN VISION SECTION ON TABLET */
    #discovery-vision .relative.group {
        display: none !important;
    }

    /* HIDE GRAVITY STRIKERS IMAGE ON TABLET */
    #gravity .parallax-container {
        display: none !important;
    }

    /* Navigation */
    nav {
        padding: 0 30px;
    }

    .logo-container img {
        max-width: 150px;
    }

    /* Hero Section */
    #hero-logo {
        max-width: 600px !important;
    }

    .trailer-btn,
    .wishlist-btn {
        padding: 0.875rem 2rem !important;
        font-size: 1rem !important;
    }

    /* Sections */
    #gravity,
    #discovery-vision,
    #discovery-community,
    #studio,
    #contact {
        padding: 4rem 2rem !important;
    }

    /* Grid layouts - 2 columns on tablet */
    #gravity .grid-cols-1.sm\\:grid-cols-2 {
        grid-template-columns: repeat(2, 1fr) !important;
    }

    /* Tabs */
    .tabs-sidebar {
        gap: 0 !important;
    }

    .shine-badge {
        display: none !important;
    }

    .tab-btn {
        padding: 1rem 1.5rem !important;
        font-size: 0.95rem !important;
    }

    /* Values Cards */
    #studio .grid {
        grid-template-columns: repeat(3, 1fr) !important;
        gap: 2rem !important;
    }

    /* Contact Form */
    #contact .grid {
        grid-template-columns: 1fr !important;
        gap: 2rem !important;
    }

    /* REFAIRE LA MISE EN PAGE DE LA FILLE - TABLET */
    .parallax-container {
        min-height: 600px !important;
        margin-top: 3rem !important;
    }

    .parallax-character {
        width: 120% !important;
        left: 50% !important;
        bottom: -15% !important;
        max-width: none !important;
        transform: translateX(-50%) !important;
    }

    .parallax-logo {
        width: 90% !important;
        top: -5% !important;
        left: 50% !important;
        transform: translateX(-50%) !important;
    }
}

/* ========================================
   LANDSCAPE MOBILE (< 640px height)
   ======================================== */
@media (max-height: 640px) and (orientation: landscape) {

    /* Reduce hero height in landscape */
    #home {
        min-height: auto;
        padding: 2rem 1rem;
    }

    #hero-logo {
        max-width: 400px !important;
    }

    .hero-content {
        margin-top: 1rem;
    }

    /* Stack buttons horizontally in landscape */
    .hero-buttons {
        flex-direction: row !important;
        gap: 1rem !important;
    }

    .trailer-btn,
    .wishlist-btn {
        width: auto !important;
        padding: 0.75rem 1.5rem !important;
    }

    /* Reduce section padding */
    section {
        padding-top: 2rem !important;
        padding-bottom: 2rem !important;
    }

    /* Mobile menu adjustments */
    #mobile-menu {
        gap: 1.5rem !important;
    }

    .mobile-link {
        font-size: 1.5rem !important;
    }

    .mobile-wishlist-btn {
        padding: 0.75rem 2rem !important;
    }
}

/* ========================================
   EXTRA SMALL DEVICES (< 375px)
   ======================================== */
@media (max-width: 374px) {

    /* Ultra compact mode */
    nav {
        padding: 0 15px;
        height: 60px;
    }

    .logo-container img {
        max-width: 100px;
    }

    #hero-logo {
        max-width: 85% !important;
    }

    .trailer-btn,
    .wishlist-btn {
        font-size: 0.9rem !important;
        padding: 0.875rem 1.5rem !important;
    }

    .mobile-link {
        font-size: 1.5rem !important;
    }

    .mobile-wishlist-btn {
        padding: 0.875rem 2rem !important;
    }

    .mobile-wishlist-text {
        font-size: 1rem !important;
    }

    /* Reduce font sizes globally */
    h1 {
        font-size: 2rem !important;
    }

    h2 {
        font-size: 1.75rem !important;
    }

    h3 {
        font-size: 1.5rem !important;
    }

    /* Keep gravity title large on small screens */
    #gravity>div>div>div>h2 {
        font-size: 2.5rem !important;
    }

    #gravity h2 .gradient-text,
    #gravity h2 .ghost-echo {
        font-size: 3.5rem !important;
    }

    /* Compact spacing */
    section {
        padding: 2.5rem 1rem !important;
    }
}

/* ========================================
   ACCESSIBILITY & PERFORMANCE
   ======================================== */

/* Reduce motion for users who prefer it */
@media (prefers-reduced-motion: reduce) {

    *,
    *::before,
    *::after {
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important;
        scroll-behavior: auto !important;
    }
}

/* High contrast mode support */
@media (prefers-contrast: high) {

    .mobile-link,
    .nav-link {
        text-decoration: underline;
    }

    button,
    .btn-primary,
    .mobile-wishlist-btn {
        border: 2px solid currentColor;
    }
}

/* Dark mode support (if needed in future) */
@media (prefers-color-scheme: dark) {

    /* Mobile menu stays white as per design */
    #mobile-menu {
        background-color: #ffffff;
    }
}