/* ========================================
   RESPONSIVE FIXES - Override Tailwind
   Ces styles surchargent Tailwind CSS
   ======================================== */

/* Force le menu mobile à fonctionner */
@media (max-width: 640px) {

    /* Menu hamburger visible sur mobile */
    #menu-toggle {
        display: block !important;
    }

    /* Navigation cachée par défaut sur mobile */
    #main-navigation {
        display: none !important;
        position: fixed;
        top: 100%;
        left: 0;
        width: 100%;
        background: var(--color-header-bg);
        backdrop-filter: blur(20px) saturate(180%);
        -webkit-backdrop-filter: blur(20px) saturate(180%);
        border-top: 1px solid var(--color-header-border);
        transform: translateY(0);
        transition: transform 0.4s cubic-bezier(0.4, 0, 0.2, 1);
        box-shadow: 0 -10px 40px rgba(0, 0, 0, 0.1);
        padding: 1.5rem;
        z-index: 999;
    }

    /* Navigation visible quand active */
    #main-navigation.active {
        display: block !important;
        transform: translateY(-100%);
    }

    /* Rendre les liens de navigation verticaux */
    #main-navigation ul {
        flex-direction: column !important;
        gap: 0.75rem;
        space-y: 0 !important;
    }

    #main-navigation ul li {
        width: 100%;
    }

    .nav-link {
        display: block !important;
        width: 100%;
        padding: 0.875rem 1.25rem !important;
        border-radius: 12px;
        background: rgba(255, 255, 255, 0.1);
        border: 1px solid var(--color-header-border);
        text-align: center;
        font-weight: 600;
    }

    /* Container padding réduit sur mobile */
    .container {
        padding-left: 1rem !important;
        padding-right: 1rem !important;
    }

    /* Texte plus petit sur mobile */
    .text-4xl {
        font-size: 2rem !important;
    }

    .text-5xl {
        font-size: 2.25rem !important;
    }

    .text-6xl {
        font-size: 2.5rem !important;
    }

    .text-3xl {
        font-size: 1.75rem !important;
    }

    .text-2xl {
        font-size: 1.5rem !important;
    }

    /* Grilles à 1 colonne sur mobile */
    .grid-cols-2,
    .md\:grid-cols-2,
    .lg\:grid-cols-2,
    .sm\:grid-cols-2 {
        grid-template-columns: 1fr !important;
    }

    .grid-cols-3,
    .md\:grid-cols-3,
    .lg\:grid-cols-3 {
        grid-template-columns: 1fr !important;
    }

    /* Padding réduit sur mobile */
    .p-10,
    .p-12 {
        padding: 2rem !important;
    }

    .py-20,
    .py-24,
    .py-32 {
        padding-top: 3rem !important;
        padding-bottom: 3rem !important;
    }

    /* Footer en colonne */
    footer .grid {
        grid-template-columns: 1fr !important;
        gap: 2rem !important;
        text-align: center;
    }
}

/* Tablettes */
@media (min-width: 641px) and (max-width: 768px) {

    /* Menu desktop visible sur tablette */
    #main-navigation {
        display: block !important;
    }

    #menu-toggle {
        display: none !important;
    }

    /* Grilles à 2 colonnes sur tablette */
    .lg\:grid-cols-3 {
        grid-template-columns: repeat(2, 1fr) !important;
    }

    /* Texte intermédiaire */
    .text-6xl {
        font-size: 3rem !important;
    }

    .text-5xl {
        font-size: 2.5rem !important;
    }
}

/* Desktop */
@media (min-width: 769px) {

    /* Menu desktop toujours visible */
    #main-navigation {
        display: block !important;
    }

    #menu-toggle {
        display: none !important;
    }
}

/* Images responsives globales */
img {
    max-width: 100%;
    height: auto;
}

/* Cards responsives */
@media (max-width: 640px) {
    .card-item {
        padding: 1.25rem !important;
        margin-bottom: 1rem;
    }

    /* Boutons pleine largeur sur mobile */
    .btn {
        width: 100%;
        justify-content: center;
    }

    /* Formulaire responsive */
    form .grid {
        grid-template-columns: 1fr !important;
    }
}

/* Contact section responsive */
@media (max-width: 768px) {
    #contact .grid-cols-2 {
        grid-template-columns: 1fr !important;
    }
}

/* About section responsive */
@media (max-width: 768px) {

    .about-image-wrapper,
    .about-profile-image {
        width: 150px !important;
        height: 150px !important;
        margin: 0 auto;
    }

    .glass-card {
        padding: 1.5rem !important;
    }
}

/* Stages et Projets responsive */
@media (max-width: 640px) {

    #stages-list,
    #projets-list {
        grid-template-columns: 1fr !important;
        gap: 1.5rem !important;
    }
}