/* =========================================================
   responsive.css — OVERRIDES UNIQUEMENT
   À charger APRÈS site.css
========================================================= */

/* =========================================================
   0) GLOBAL FIX
========================================================= */
img, video, svg { max-width: 100%; height: auto; }
body { overflow-x: hidden; }
.section { scroll-margin-top: 90px; }

/* =========================================================
   1) DESKTOP LARGE (≤ 1200px)
========================================================= */
@media (max-width: 1200px) {
    .container { padding: 0 1.2rem; }
    .hero-wrap { padding-left: 5%; padding-right: 5%; }
}

/* =========================================================
   2) TABLETTE + MOBILE (≤ 1024px)
   → Burger visible
========================================================= */
@media (max-width: 1024px) {

    /* --- NAV --- */
    .menu-toggle {
        display: flex;
    }

    .links,
    .status {
        display: none;
    }

    .nav-inner {
        padding: 12px 1rem;
    }

    .menu-mobile {
        top: 60px;
    }

    .nav-overlay {
        display: block;
    }

    /* --- LAYOUT --- */
    .grid-2 {
        grid-template-columns: 1fr;
    }

    .about-grid {
        grid-template-columns: 1fr;
        text-align: center;
    }

    .about-photo {
        order: -1;
    }

    .about-text .chips {
        justify-content: center;
    }

    .project-details-page .detail-grid {
        grid-template-columns: 1fr;
    }

    .project-details-page .detail-media {
        position: relative;
        top: auto;
    }
}

/* =========================================================
   3) TABLETTE UNIQUEMENT (769px → 1024px)
   → Contact visible
========================================================= */
@media (min-width: 769px) and (max-width: 1024px) {

    .nav-contact {
        display: inline-flex;
    }
}

/* =========================================================
   4) MOBILE (≤ 768px)
========================================================= */
@media (max-width: 768px) {

    /* --- NAV --- */
    .nav-contact {
        display: none;
    }

    /* --- HERO --- */
    .hero-bg {
        text-align: center;
        background-position: center;
    }

    .overlay-dark {
        background: linear-gradient(
                180deg,
                rgba(0,0,20,.88) 0%,
                rgba(0,0,40,.72) 55%,
                rgba(0,0,0,.35) 100%
        );
    }

    .hero-wrap {
        padding: 6.5rem 1rem 4rem;
        align-items: center;
    }

    .hero-copy {
        max-width: 100%;
        text-align: center;
    }

    .stats {
        justify-content: center;
        flex-wrap: wrap;
    }

    .cta-row {
        justify-content: center;
    }

    /* --- SECTIONS --- */
    .section {
        padding: 60px 0;
    }

    /* =====================================================
       JOURNEY — VERSION MOBILE (PILE)
    ===================================================== */
    .journey-section {
        height: auto;
        padding: 70px 0 90px;
    }

    #journey-path {
        display: none !important;
    }

    .journey-map {
        display: grid !important;
        grid-template-columns: 1fr !important;
        gap: 18px !important;
        background: none !important;
        filter: none !important;
        height: auto !important;
    }

    .project-marker {
        position: relative !important;
        left: auto !important;
        top: auto !important;
        transform: none !important;
        opacity: 1 !important;

        width: min(360px, 92vw) !important;
        height: 90px !important;
        margin: 0 auto !important;

        display: grid !important;
        grid-template-columns: 82px 1fr !important;
        align-items: center !important;
        gap: 12px !important;

        padding: 10px 12px !important;
        border-radius: 16px !important;
    }

    .project-marker img,
    .project-marker .project-video-preview {
        width: 72px !important;
        height: 72px !important;
        object-fit: cover !important;
        border-radius: 14px !important;
    }

    .project-marker .label {
        position: static !important;
        transform: none !important;
        text-align: left !important;
        font-size: 0.95rem !important;
        background: none !important;
        padding: 0 !important;
    }

    /* --- SKILLS --- */
    .tree-grid {
        grid-template-columns: repeat(2, 1fr);
        gap: 14px;
        padding: 2rem 1rem;
    }

    .skill-node {
        width: 130px;
        height: 130px;
    }

    /* --- CONTACT --- */
    .quest-contact {
        padding: 80px 1rem;
    }

    .card-form {
        padding: 16px;
    }

    /* --- FOOTER --- */
    .footer-inner {
        flex-direction: column;
        gap: .6rem;
        text-align: center;
    }
}

/* =========================================================
   5) PETIT MOBILE (≤ 520px)
========================================================= */
@media (max-width: 520px) {

    .brand-name {
        font-size: 1rem;
    }

    .headline {
        font-size: clamp(1.6rem, 7vw, 2.15rem);
    }

    .stats li {
        font-size: .82rem;
        padding: .5rem .7rem;
    }

    .project-marker {
        height: 86px !important;
        grid-template-columns: 76px 1fr !important;
    }

    .project-marker img,
    .project-marker .project-video-preview {
        width: 66px !important;
        height: 66px !important;
    }

    .project-details-page .hero-detail {
        padding: 140px 0 80px;
    }
}

/* =========================================================
   6) MENU OPEN — BLOQUE LE SCROLL
========================================================= */
body.menu-open {
    overflow: hidden;
}

/* ===============================
   MENU BURGER — CLICK FIX
================================ */

.menu-toggle {
    cursor: pointer;
    pointer-events: auto;
    z-index: 1101;
}

.menu-mobile {
    z-index: 1100;
}

.menu-mobile.active {
    pointer-events: auto;
}

.nav-overlay {
    z-index: 1099;
}

.nav-overlay.active {
    pointer-events: auto;
}