/* ================================================
   CORRECTIONS CRITIQUES IPHONE
   ================================================ */

/* FIX 1 : SCROLL BLOQUÉ - Permettre le scroll vertical */
html, body {
    overflow-y: auto !important;
    overflow-x: hidden !important;
    -webkit-overflow-scrolling: touch !important;
    height: auto !important;
    min-height: 100vh !important;
}

body {
    position: relative !important;
    touch-action: pan-y !important;
}

/* FIX 2 : NAVIGATION QUI MANGE LE CONTENU */
@media (max-width: 768px) {
    nav {
        position: fixed !important;
        top: 0 !important;
        left: 0 !important;
        right: 0 !important;
        width: 100vw !important;
        z-index: 9999 !important;
        background: rgba(5, 8, 20, 0.98) !important;
        backdrop-filter: blur(10px) !important;
        padding: 0.2rem 0 !important;
        box-shadow: 0 2px 10px rgba(0, 210, 255, 0.3) !important;
    }

    /* Espacer TOUS les éléments après la navigation */
    body {
        padding-top: 0 !important;
        margin-top: 0 !important;
    }

    section {
        padding-top: 70px !important;
        margin-top: 0 !important;
    }

    /* Section Accueil - Plus d'espace */
    #accueil {
        padding-top: 80px !important;
        min-height: 100vh !important;
    }

    /* Toutes les autres sections */
    #apropos,
    #entreprise,
    #bts-sio,
    #cv,
    #parcours,
    #competences,
    #projets,
    #veille,
    #tableau,
    #contact {
        padding-top: 70px !important;
    }
}

/* FIX 3 : NOM "Kerim Koca" MAL PLACÉ - Centrer dans l'avatar */
@media (max-width: 768px) {
    .avatar-placeholder {
        position: relative !important;
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;
        width: 280px !important;
        height: 280px !important;
        margin: 0 auto !important;
    }

    .avatar-placeholder > div {
        display: flex !important;
        flex-direction: column !important;
        align-items: center !important;
        justify-content: center !important;
        gap: 1rem !important;
        text-align: center !important;
    }

    /* Emoji centré */
    .avatar-placeholder > div > div:first-child {
        font-size: 5rem !important;
        line-height: 1 !important;
    }

    /* Nom "Kerim Koca" centré */
    .avatar-placeholder > div > div:last-child {
        font-family: 'Orbitron', sans-serif !important;
        font-size: 1.8rem !important;
        font-weight: 700 !important;
        color: var(--primary) !important;
        text-shadow: var(--neon-glow) !important;
        line-height: 1.2 !important;
        margin: 0 !important;
        padding: 0 !important;
    }
}

/* FIX 4 : TABLEAU DE SYNTHÈSE - Complètement refait */
@media (max-width: 768px) {
    /* Container du tableau */
    .tableau-container {
        width: 100% !important;
        max-width: 100vw !important;
        overflow-x: auto !important;
        -webkit-overflow-scrolling: touch !important;
        margin: 1rem 0 !important;
        padding: 0 !important;
        background: var(--card-bg) !important;
        border-radius: 10px !important;
    }

    /* Table elle-même */
    table {
        width: 100% !important;
        min-width: 600px !important;
        border-collapse: separate !important;
        border-spacing: 0 !important;
        font-size: 0.7rem !important;
        display: table !important;
    }

    /* En-têtes de colonnes */
    table thead {
        position: sticky !important;
        top: 0 !important;
        z-index: 10 !important;
        background: linear-gradient(135deg, rgba(0, 210, 255, 0.2), rgba(0, 255, 234, 0.2)) !important;
    }

    table thead tr {
        display: table-row !important;
    }

    table th {
        padding: 0.8rem 0.5rem !important;
        text-align: left !important;
        font-family: 'Orbitron', sans-serif !important;
        color: var(--primary) !important;
        border-bottom: 2px solid var(--primary) !important;
        font-size: 0.75rem !important;
        white-space: nowrap !important;
        background: linear-gradient(135deg, rgba(0, 210, 255, 0.2), rgba(0, 255, 234, 0.2)) !important;
        position: sticky !important;
        top: 0 !important;
    }

    /* Première colonne sticky */
    table th:first-child,
    table td:first-child {
        position: sticky !important;
        left: 0 !important;
        z-index: 5 !important;
        background: var(--card-bg) !important;
        box-shadow: 2px 0 5px rgba(0, 0, 0, 0.3) !important;
    }

    table th:first-child {
        z-index: 15 !important;
        background: linear-gradient(135deg, rgba(0, 210, 255, 0.3), rgba(0, 255, 234, 0.3)) !important;
    }

    /* Corps du tableau */
    table tbody {
        display: table-row-group !important;
    }

    table tbody tr {
        display: table-row !important;
        transition: all 0.3s !important;
    }

    table tbody tr:hover {
        background: rgba(0, 210, 255, 0.1) !important;
    }

    table td {
        padding: 0.7rem 0.5rem !important;
        color: var(--gray) !important;
        border-bottom: 1px solid rgba(0, 210, 255, 0.2) !important;
        font-size: 0.7rem !important;
        line-height: 1.4 !important;
        white-space: normal !important;
        word-wrap: break-word !important;
    }

    /* Icônes de validation dans le tableau */
    table td:last-child {
        text-align: center !important;
        font-size: 1rem !important;
    }

    /* Scroll horizontal visible */
    .tableau-container::-webkit-scrollbar {
        height: 8px !important;
    }

    .tableau-container::-webkit-scrollbar-track {
        background: rgba(0, 210, 255, 0.1) !important;
        border-radius: 10px !important;
    }

    .tableau-container::-webkit-scrollbar-thumb {
        background: var(--primary) !important;
        border-radius: 10px !important;
    }

    .tableau-container::-webkit-scrollbar-thumb:hover {
        background: var(--secondary) !important;
    }
}

/* FIX 5 : SECTION TABLEAU - Meilleur espacement */
@media (max-width: 768px) {
    #tableau {
        padding: 70px 1rem 50px !important;
    }

    #tableau .container {
        padding: 0 0.5rem !important;
    }

    #tableau .section-title {
        margin-bottom: 1.5rem !important;
    }
}

/* FIX 6 : HERO SECTION - Avatar et contenu bien espacés */
@media (max-width: 768px) {
    .hero-content {
        display: flex !important;
        flex-direction: column !important;
        gap: 2rem !important;
        padding-top: 1rem !important;
    }

    .hero-text {
        order: 1 !important;
        text-align: center !important;
    }

    .hero-avatar {
        order: 2 !important;
        margin-top: 1rem !important;
    }
}

/* FIX 7 : TITRES DE SECTION - Meilleur espacement */
@media (max-width: 768px) {
    .section-title {
        font-size: 1.8rem !important;
        margin-bottom: 1.5rem !important;
        margin-top: 1rem !important;
        padding: 0 1rem !important;
    }

    .section-title::before {
        display: none !important;
    }
}

/* FIX 8 : TOUCH ACTIONS - Améliorer les interactions tactiles */
@media (max-width: 768px) {
    a, button, .cta-button, .project-card, nav a {
        -webkit-tap-highlight-color: rgba(0, 210, 255, 0.3) !important;
        touch-action: manipulation !important;
    }

    .modal {
        touch-action: pan-y !important;
    }
}

/* FIX 9 : Z-INDEX - Hiérarchie correcte */
nav {
    z-index: 9999 !important;
}

.modal {
    z-index: 10000 !important;
}

.modal-content {
    z-index: 10001 !important;
}

/* FIX 10 : SAFE AREA pour iPhone avec encoche */
@supports (padding: max(0px)) {
    body {
        padding-left: max(0px, env(safe-area-inset-left)) !important;
        padding-right: max(0px, env(safe-area-inset-right)) !important;
        padding-bottom: max(0px, env(safe-area-inset-bottom)) !important;
    }

    nav {
        padding-top: max(0.2rem, env(safe-area-inset-top)) !important;
    }
}

/* FIX 11 : VIEWPORT HEIGHT pour Safari iOS */
@media (max-width: 768px) {
    section {
        min-height: calc(100vh - 60px) !important;
    }

    #accueil {
        min-height: 100vh !important;
        min-height: -webkit-fill-available !important;
    }
}