/* ================================================
   CORRECTIONS CRITIQUES - SCROLL HORIZONTAL & HEADER
   ================================================ */

/* ÉLIMINER LE SCROLL HORIZONTAL */
html {
    overflow-x: hidden !important;
    max-width: 100vw !important;
    position: relative;
}

body {
    overflow-x: hidden !important;
    max-width: 100vw !important;
    width: 100% !important;
    margin: 0 !important;
    padding: 0 !important;
}

/* Forcer tous les éléments à rester dans la largeur de l'écran */
* {
    max-width: 100% !important;
    box-sizing: border-box !important;
}

section,
.container,
.hero-content,
.about-content,
.entreprise-grid,
.bts-grid,
.skills-grid,
.projects-grid,
.veille-grid,
.contact-grid {
    max-width: 100vw !important;
    overflow-x: hidden !important;
}

/* HEADER / NAVIGATION - RÉDUCTION SUR MOBILE */
@media (max-width: 768px) {
    nav {
        position: fixed;
        top: 0;
        width: 100vw !important;
        max-width: 100vw !important;
        padding: 0.3rem 0 !important;
        z-index: 1000;
        height: auto !important;
        min-height: auto !important;
    }

    nav ul {
        padding: 0.3rem 0.5rem !important;
        gap: 0.2rem !important;
        margin: 0 !important;
        flex-wrap: wrap !important;
        justify-content: center !important;
    }

    nav li {
        margin: 0 !important;
        padding: 0 !important;
    }

    nav a {
        font-size: 0.65rem !important;
        padding: 0.4rem 0.6rem !important;
        display: inline-block !important;
        white-space: nowrap !important;
        margin: 0.1rem !important;
    }

    /* Réduire l'espace en haut des sections */
    section {
        padding-top: 60px !important;
    }

    #accueil {
        padding-top: 70px !important;
    }
}

/* CORRECTION DU CODE DANS LA SECTION VEILLE */
@media (max-width: 768px) {
    /* Conteneurs de code */
    pre,
    code {
        max-width: 100% !important;
        overflow-x: auto !important;
        -webkit-overflow-scrolling: touch;
        white-space: pre !important;
        word-wrap: normal !important;
        word-break: normal !important;
    }

    pre {
        padding: 0.8rem !important;
        margin: 0.5rem 0 !important;
        font-size: 0.65rem !important;
        line-height: 1.4 !important;
        border-radius: 8px;
        background: rgba(0, 0, 0, 0.3) !important;
    }

    .veille-card pre,
    .modal-section pre {
        max-width: calc(100vw - 4rem) !important;
    }

    /* Fix pour les exemples de code SQL/PHP */
    .veille-card code {
        display: block;
        overflow-x: auto;
        padding: 0.5rem;
    }
}

/* CORRECTION DES CARTES DE VEILLE */
@media (max-width: 768px) {
    .veille-card {
        width: 100% !important;
        max-width: 100% !important;
        padding: 1rem !important;
        margin: 0 0 1rem 0 !important;
        overflow: hidden !important;
    }

    .veille-card h4 {
        font-size: 1rem !important;
        margin-bottom: 0.8rem !important;
    }

    .veille-card p {
        font-size: 0.9rem !important;
        line-height: 1.5 !important;
        word-wrap: break-word !important;
    }

    .veille-card ul {
        padding-left: 1.2rem !important;
        margin: 0.5rem 0 !important;
    }

    .veille-card ul li {
        font-size: 0.85rem !important;
        margin-bottom: 0.3rem !important;
    }
}

/* CORRECTION DU TABLEAU */
@media (max-width: 768px) {
    .tableau-container {
        width: 100% !important;
        max-width: 100vw !important;
        overflow-x: auto !important;
        -webkit-overflow-scrolling: touch;
        margin: 0 !important;
        padding: 0 !important;
    }

    table {
        display: block !important;
        width: auto !important;
        min-width: 100% !important;
        overflow-x: auto !important;
        border-collapse: collapse !important;
    }

    table thead,
    table tbody,
    table tr {
        display: table !important;
        width: 100% !important;
    }

    table th,
    table td {
        font-size: 0.7rem !important;
        padding: 0.5rem 0.3rem !important;
        white-space: nowrap !important;
    }

    /* Première colonne fixe */
    table th:first-child,
    table td:first-child {
        position: sticky;
        left: 0;
        background: var(--card-bg);
        z-index: 10;
        min-width: 120px !important;
    }
}

/* CORRECTION DES GRILLES */
@media (max-width: 768px) {
    .projects-grid,
    .skills-grid,
    .entreprise-grid,
    .bts-grid,
    .veille-grid {
        grid-template-columns: 1fr !important;
        width: 100% !important;
        max-width: 100% !important;
        gap: 1rem !important;
        padding: 0 !important;
    }

    .project-card,
    .skill-category,
    .entreprise-card,
    .bts-card,
    .veille-card {
        width: 100% !important;
        max-width: 100% !important;
        margin: 0 0 1rem 0 !important;
    }
}

/* CORRECTION DES CONTENEURS */
@media (max-width: 768px) {
    .container {
        width: 100% !important;
        max-width: 100vw !important;
        padding: 0 1rem !important;
        margin: 0 auto !important;
        overflow-x: hidden !important;
    }

    section {
        width: 100vw !important;
        max-width: 100vw !important;
        margin: 0 !important;
        overflow-x: hidden !important;
    }
}

/* CORRECTION DES MODALES */
@media (max-width: 768px) {
    .modal {
        padding: 0 !important;
    }

    .modal-content {
        width: 95vw !important;
        max-width: 95vw !important;
        margin: 1rem auto !important;
    }

    .modal-body {
        padding: 1rem !important;
        overflow-x: hidden !important;
    }

    .modal-section pre {
        max-width: calc(95vw - 4rem) !important;
    }
}

/* CORRECTION DU HERO */
@media (max-width: 768px) {
    .hero-content {
        width: 100% !important;
        max-width: 100% !important;
        grid-template-columns: 1fr !important;
        gap: 1.5rem !important;
    }

    .hero-text,
    .hero-avatar {
        width: 100% !important;
        max-width: 100% !important;
    }

    .hero-text h1 {
        font-size: 1.8rem !important;
        line-height: 1.2 !important;
        word-wrap: break-word !important;
    }

    .hero-text .description {
        font-size: 1rem !important;
        line-height: 1.5 !important;
    }
}

/* CORRECTION DES TITRES DE SECTION */
@media (max-width: 768px) {
    .section-title {
        font-size: 1.8rem !important;
        padding: 0 1rem !important;
        word-wrap: break-word !important;
        text-align: center !important;
    }

    .section-title::before {
        font-size: 2.5rem !important;
        top: -25px !important;
    }
}

/* CORRECTION DES IMAGES ET IFRAMES */
img,
iframe,
video {
    max-width: 100% !important;
    height: auto !important;
    display: block;
}

/* CORRECTION DU FOOTER */
@media (max-width: 768px) {
    footer {
        width: 100vw !important;
        max-width: 100vw !important;
        padding: 1.5rem 1rem !important;
        overflow-x: hidden !important;
    }

    .footer-social {
        flex-wrap: wrap !important;
        justify-content: center !important;
        gap: 0.8rem !important;
    }
}

/* CORRECTION DES BOUTONS */
@media (max-width: 768px) {
    .cta-button {
        font-size: 0.85rem !important;
        padding: 0.7rem 1.2rem !important;
        width: auto !important;
        max-width: 100% !important;
        display: inline-block !important;
    }
}

/* FORCER LA LARGEUR 100% PARTOUT */
@media (max-width: 768px) {
    div, section, article, aside, nav, header, footer, main {
        max-width: 100vw !important;
    }
}