/* ============================================
   RESPONSIVE.CSS - Media Queries
   ============================================ */

/* === Large Desktop (1200px+) === */
@media (max-width: 1200px) {
    .hero-content {
        grid-template-columns: 1fr;
        gap: 60px;
    }

    .hero-right {
        order: -1;
    }
    .logo {
        font-size: 1.2em;
    }
    .avatar-container {
        width: 350px;
        height: 350px;
    }

    .avatar-main {
        width: 300px;
        height: 300px;
    }

    .hero-title {
        font-size: 3.5em;
    }

    .gallery-grid {
        grid-template-columns: repeat(auto-fill, minmax(250px, 1fr));
    }

    .contact-content {
        grid-template-columns: 1fr;
    }

    .contact-cards {
        grid-template-columns: 1fr;
    }

    .socials-content {
        grid-template-columns: 1fr;
    }

    .socials-right {
        position: relative;
        top: 0;
    }
}

/* === Tablet (768px+) === */
@media (max-width: 768px) {
    /* Navigation mobile */
    .nav-links {
        display: none;
        position: fixed;
        top: 80px;
        left: 0;
        right: 0;
        background: var(--bg-blur);
        flex-direction: column;
        padding: 30px;
        gap: 20px;
        border-bottom: 2px solid rgba(168, 213, 226, 0.2);
    }

    .nav-links.active {
        display: flex;
    }

    .menu-toggle {
        display: block;
    }

    /* Hero */
    .hero-title {
        font-size: 2.8em;  /* Augmenté de 2.5em */
        line-height: 1.1;
    }

    .hero-subtitle {
        font-size: 1.4em;  /* Augmenté de 1.3em */
        line-height: 1.5;
    }

    .hero-stats {
        flex-direction: column;
        gap: 20px;
    }

    .hero-buttons {
        flex-direction: column;
    }

    /* Avatar - Réduit et animation simplifiée sur mobile */
    .avatar-container {
        width: 280px;
        height: 280px;
    }

    .avatar-main {
        width: 240px;
        height: 240px;
        /* Animation réduite sur mobile pour éviter les débordements */
        animation: floatAvatarMobile 4s ease-in-out infinite;
    }

    /* Glow : rayons réduits pour 240px (60% de 400px) */
    .avatar-glow {
        animation: sunPulseMd 4s ease-in-out infinite;
    }

    @keyframes sunPulseMd {
        0%, 100% {
            box-shadow:
                    0 0 24px 11px rgba(242, 193, 107, 0.22),
                    0 -120px 20px 0px rgba(242, 193, 107, 0.13),
                    85px -85px 20px 0px rgba(242, 193, 107, 0.10),
                    120px 0px 20px 0px rgba(196, 122, 90, 0.10),
                    85px 85px 20px 0px rgba(196, 122, 90, 0.09),
                    0 120px 20px 0px rgba(127, 184, 147, 0.09),
                    -85px 85px 20px 0px rgba(127, 184, 147, 0.10),
                    -120px 0px 20px 0px rgba(127, 184, 147, 0.10),
                    -85px -85px 20px 0px rgba(242, 193, 107, 0.10);
        }
        50% {
            box-shadow:
                    0 0 33px 15px rgba(242, 193, 107, 0.32),
                    0 -135px 22px 0px rgba(242, 193, 107, 0.20),
                    96px -96px 22px 0px rgba(242, 193, 107, 0.15),
                    135px 0px 22px 0px rgba(196, 122, 90, 0.15),
                    96px 96px 22px 0px rgba(196, 122, 90, 0.14),
                    0 135px 22px 0px rgba(127, 184, 147, 0.14),
                    -96px 96px 22px 0px rgba(127, 184, 147, 0.15),
                    -135px 0px 22px 0px rgba(127, 184, 147, 0.15),
                    -96px -96px 22px 0px rgba(242, 193, 107, 0.15);
        }
    }

    /* Animation plus douce pour mobile (moins de mouvement) */
    @keyframes floatAvatarMobile {
        0%, 100% {
            transform: translateY(0) rotate(0deg);
        }
        50% {
            transform: translateY(-10px) rotate(2deg);
        }
    }

    /* Sections */
    section {
        padding: 80px var(--spacing-sm);
    }

    .section-title {
        font-size: 2.8em;  /* Augmenté de 2.5em */
        line-height: 1.2;
        margin-bottom: 25px;
    }

    .section-subtitle {
        font-size: 1.3em;  /* Augmenté de 1.2em */
        line-height: 1.6;
    }

    /* Grids */
    .social-grid,
    .schedule-grid {
        grid-template-columns: 1fr;
    }

    /* Containers */
    .schedule-container,
    .live-container,
    .contact-container,
    .socials-container {
        padding: var(--spacing-md) var(--spacing-sm);
        border-radius: 25px;
    }

    /* Countdown banner */
    .next-stream-banner {
        padding: 28px 24px;  /* Padding augmenté */
        margin-bottom: 25px;
    }

    .next-stream-banner .countdown-label {
        font-size: 1.4em;  /* Augmenté de 1.25em */
        font-weight: 700;
    }

    .countdown-cta {
        padding: 16px 38px;  /* Bouton plus grand */
        font-size: 1.15em;  /* Augmenté de 1.05em */
    }

    /* Schedule */
    .schedule-item {
        padding: 35px 28px;  /* Plus d'espace */
    }

    .schedule-day {
        font-size: 2em;  /* Maintenu à 2em pour bonne visibilité */
    }

    .schedule-time {
        font-size: 1.6em;  /* Taille cohérente */
    }

    .schedule-countdown {
        font-size: 1.1em;  /* Augmenté de 1em */
        padding: 10px 16px;
        font-weight: 600;
    }

    /* Contact */
    .contact-info-box {
        padding: 30px var(--spacing-sm);
        border-radius: var(--radius-md);
    }

    .contact-icon {
        font-size: 3.5em;
        margin-bottom: 15px;
    }

    .contact-title {
        font-size: 1.6em;
        margin-bottom: 15px;
    }

    .contact-email {
        font-size: 1em;
        padding: 12px 20px;
        margin: 15px 0;
        word-break: break-all;
        line-height: 1.4;
    }

    .contact-text {
        font-size: 1em;
        padding: 0 10px;
    }

    .contact-cards {
        grid-template-columns: 1fr;
    }

    .contact-card {
        padding: 25px 20px;
    }

    .contact-card-icon {
        font-size: 2.5em;
    }

    .contact-card-title {
        font-size: 1.3em;
    }

    .contact-card-text {
        font-size: 1em;
    }

    /* Discord widget - Caché sur mobile */
    .socials-right {
        display: none;
    }

    .socials-content {
        grid-template-columns: 1fr;
    }

    .social-card.discord {
        display: block;
    }

    /* Buttons - Plus grands pour meilleure accessibilité */
    .btn {
        padding: 16px 40px;  /* Augmenté de 14px 35px */
        font-size: 1.2em;    /* Augmenté de 1.1em */
        min-height: 54px;    /* Touch target WCAG */
    }

    /* Stats */
    .stat-number {
        font-size: 2.2em;  /* Augmenté de 2em */
    }

    .stat-label {
        font-size: 1em;  /* Augmenté de 0.9em */
    }

    /* Baguettectober */
    .baguettectober-badge {
        font-size: 1.1em;
        padding: 10px 25px;
    }

    .baguettectober-desc {
        font-size: 1.1em;
    }

    /* Social cards */
    .social-card {
        padding: 45px 35px;  /* Plus d'espace */
    }

    .social-icon {
        font-size: 4em;  /* Augmenté de 3.5em */
    }

    .social-name {
        font-size: 1.8em;  /* Augmenté de 1.6em */
        margin-bottom: 12px;
    }

    .social-desc {
        font-size: 1.15em;  /* Augmenté de 1em */
        line-height: 1.5;
    }
}

/* === Mobile (480px+) === */
@media (max-width: 480px) {
    /* Hero - Tailles augmentées */
    .hero-title {
        font-size: 2.3em;  /* Augmenté de 2em */
        line-height: 1.1;
    }

    .hero-subtitle {
        font-size: 1.25em;  /* Augmenté de 1.1em */
        line-height: 1.5;
    }

    /* Navigation */
    .logo {
        font-size: 1.4em;  /* Augmenté de 1.3em */
    }

    nav {
        padding: 15px 0;
    }

    .nav-links {
        padding: 20px;
        gap: 15px;
    }

    .nav-links a {
        font-size: 1.1em;  /* Augmenté de 1em */
    }

    /* Hero - Avatar encore plus petit sur très petits écrans */
    .avatar-container {
        width: 200px;
        height: 200px;
    }

    .avatar-main {
        width: 170px;
        height: 170px;
        /* Désactive complètement l'animation sur petits mobiles */
        /*animation: none;*/
    }

    /* Glow : rayons réduits pour 170px, animation seule (pas de flottement) */
    .avatar-glow {
        animation: sunPulseSm 4s ease-in-out infinite;
    }

    @keyframes sunPulseSm {
        0%, 100% {
            box-shadow:
                    0 0 18px 8px rgba(242, 193, 107, 0.18),
                    0 -90px 16px 0px rgba(242, 193, 107, 0.11),
                    64px -64px 16px 0px rgba(242, 193, 107, 0.08),
                    90px 0px 16px 0px rgba(196, 122, 90, 0.08),
                    64px 64px 16px 0px rgba(196, 122, 90, 0.07),
                    0 90px 16px 0px rgba(127, 184, 147, 0.07),
                    -64px 64px 16px 0px rgba(127, 184, 147, 0.08),
                    -90px 0px 16px 0px rgba(127, 184, 147, 0.08),
                    -64px -64px 16px 0px rgba(242, 193, 107, 0.08);
        }
        50% {
            box-shadow:
                    0 0 25px 12px rgba(242, 193, 107, 0.26),
                    0 -100px 18px 0px rgba(242, 193, 107, 0.16),
                    71px -71px 18px 0px rgba(242, 193, 107, 0.12),
                    100px 0px 18px 0px rgba(196, 122, 90, 0.12),
                    71px 71px 18px 0px rgba(196, 122, 90, 0.11),
                    0 100px 18px 0px rgba(127, 184, 147, 0.11),
                    -71px 71px 18px 0px rgba(127, 184, 147, 0.12),
                    -100px 0px 18px 0px rgba(127, 184, 147, 0.12),
                    -71px -71px 18px 0px rgba(242, 193, 107, 0.12);
        }
    }

    .hero-stats {
        gap: 15px;
    }

    .stat-box {
        padding: 15px 20px;
    }

    .stat-number {
        font-size: 1.8em;
    }

    /* Sections */
    section {
        padding: 60px 15px;
    }

    .schedule-container,
    .live-container,
    .event-container,
    .contact-container,
    .socials-container {
        padding: 30px 15px;
        border-radius: var(--radius-md);
    }

    /* Schedule - Tailles augmentées */
    .schedule-item {
        padding: 28px 22px;  /* Plus d'espace */
        border-radius: var(--radius-md);
    }

    .schedule-day {
        font-size: 1.8em;  /* Augmenté de 1.6em */
        margin-bottom: 10px;
    }

    .schedule-time {
        font-size: 1.5em;  /* Augmenté de 1.3em */
        margin-bottom: 12px;
    }

    .schedule-countdown {
        font-size: 1.05em;  /* Augmenté de 0.95em */
        padding: 10px 14px;
    }

    /* Countdown banner - Tailles augmentées */
    .next-stream-banner {
        padding: 24px 18px;
        border-radius: var(--radius-md);
    }

    /* Buttons - Plus grands pour toucher facile */
    .btn {
        padding: 14px 32px;  /* Augmenté de 12px 28px */
        font-size: 1.1em;    /* Augmenté de 1em */
        min-height: 50px;
    }

    /* Contact - Tailles augmentées */
    .contact-info-box {
        padding: 28px 18px;
    }

    .contact-icon {
        font-size: 3.5em;  /* Augmenté de 3em */
    }

    .contact-title {
        font-size: 1.6em;  /* Augmenté de 1.4em */
    }

    .contact-email {
        font-size: 1em;  /* Augmenté de 0.9em */
        padding: 12px 20px;
    }

    .contact-text {
        font-size: 1.05em;  /* Augmenté de 0.95em */
    }

    .contact-card {
        padding: 22px 18px;
    }

    .contact-card-icon {
        font-size: 2.5em;  /* Augmenté de 2.2em */
    }

    .contact-card-title {
        font-size: 1.35em;  /* Augmenté de 1.2em */
    }

    .contact-card-text {
        font-size: 1.05em;  /* Augmenté de 0.95em */
    }

    /* Social cards - Tailles augmentées */
    .social-card {
        padding: 35px 28px;
    }

    .social-icon {
        font-size: 3.5em;  /* Augmenté de 3em */
    }

    .social-name {
        font-size: 1.6em;  /* Augmenté de 1.4em */
    }

    .social-desc {
        font-size: 1.05em;  /* Augmenté de 0.95em */
    }


    /* Live - Tailles augmentées */
    .live-indicator {
        font-size: 1.2em;  /* Augmenté de 1.1em */
        padding: 14px 28px;
    }

    .live-dot {
        width: 14px;  /* Augmenté de 12px */
        height: 14px;
    }

    /* Footer */
    footer {
        padding: 40px 15px;
    }

    .footer-text {
        font-size: 1em;
    }
}

/* === Landscape mobile === */
@media (max-width: 768px) and (orientation: landscape) {
    .hero {
        min-height: auto;
        padding: 100px var(--spacing-sm) 40px;
    }

    .avatar-container {
        width: 200px;
        height: 200px;
    }

    .avatar-main {
        width: 160px;
        height: 160px;
        /* Pas d'animation en mode paysage */
        animation: none;
    }

    section {
        padding: 60px var(--spacing-sm);
    }
}

/* === Very small screens === */
@media (max-width: 360px) {
    .hero-title {
        font-size: 2em;  /* Augmenté de 1.8em */
    }

    .section-title {
        font-size: 2em;  /* Augmenté de 1.8em */
    }

    .logo {
        font-size: 1.35em;  /* Augmenté de 1.3em */
    }

    .schedule-day {
        font-size: 1.6em;  /* Augmenté de 1.4em */
    }

    .contact-email {
        font-size: 0.95em;  /* Augmenté de 0.85em */
        padding: 12px 18px;
    }
}

/* === Large screens (1600px+) === */
@media (min-width: 1600px) {
    .container {
        max-width: 1600px;
    }

    section {
        max-width: 1600px;
    }

    .hero-content {
        max-width: 1600px;
    }

    .hero-title {
        font-size: 6em;
    }

    .section-title {
        font-size: 4em;
    }

    .avatar-container {
        width: 600px;
        height: 600px;
    }

    .avatar-main {
        width: 480px;
        height: 480px;
    }
}

/* === Tablet landscape === */
@media (min-width: 769px) and (max-width: 1024px) {
    .hero-content {
        gap: 50px;
    }

    .hero-title {
        font-size: 3em;
    }

    .avatar-container {
        width: 300px;
        height: 300px;
    }

    .avatar-main {
        width: 260px;
        height: 260px;
    }

    .socials-content {
        grid-template-columns: 1fr;
    }

    .socials-right {
        position: relative;
        top: 0;
    }
}

/* === Print styles === */
@media print {
    .particles,
    .bg-container,
    nav,
    .menu-toggle,
    .hero-buttons,
    .countdown-cta,
    .live-indicator,
    .twitch-wrap,
    footer,
    .social-card,
    .discord-widget-container {
        display: none !important;
    }

    body {
        background: white;
        color: black;
    }

    .hero-title,
    .section-title,
    .stat-number,
    .schedule-day,
    .contact-title {
        -webkit-text-fill-color: black;
        background: none;
    }

    section {
        page-break-inside: avoid;
        padding: 20px;
    }

    .schedule-container,
    .contact-container,
    .baguettectober-container {
        border: 1px solid #ccc;
        page-break-inside: avoid;
    }
}