/* ========== MOBILE ========== */
@media screen and (max-width: 1100px) {

    html, body {
        overflow-x: hidden;
        text-align: center;
    }

    /* NAVBAR → hamburger */
    nav {
        min-width: 90%;
        max-width: 90%;
        margin: 10px 5%;
        padding: 10px;
    }

    nav ul {
        flex-direction: column;
        align-items: center;
        display: none; /* cachée par défaut */
    }

    .burger {
        display: block;
        width: 40px;
        height: 4px;
        background: black;
        position: relative;
        margin: 15px auto;
    }
    .burger:before, .burger:after {
        content:"";
        width: 40px;
        height: 4px;
        background: black;
        position: absolute;
        left: 0;
    }
    .burger:before {
        top: -10px;
    }
    .burger:after {
        top: 10px;
    }

    /* afficher menu quand actif */
    nav.active ul {
        display: flex;
    }

    /* HERO */
    #home {
        padding-bottom: 15vh;
    }
    .hero {
        flex-direction: column;
        text-align: center;
        margin-top: 10vh;
    }

    .moi-windows {
        display: none;
    }

    .hello h1 {
        font-size: 14vw;
    }
    .hello p {
        font-size: 4vw;
    }
    .hello h2 {
        font-size: 6vw;
    }

    /* ABOUT SECTION */
    .about {
        flex-direction: column;
        text-align: center;
    }

    /* ACTU */
    .Actu {
        flex-direction: column;
        border-radius: 30px;
        margin: 0 0 6em;
        align-items: center;
    }
    .Actu h2 {
        font-size: 1.5rem !important;
    }
    .Actu-icone{
        margin-bottom: 10vh;
    }
    .moi-about {
        max-width: 60vw;
        max-height: 60vw;
    }
    .aboutme p {
        font-size: 4vw;
        text-align: center;
    }

    /* PROJETS / EVENTS LAYOUT */
    #display-projets, #display-events {
        flex-direction: column;
        align-items: center;
    }

    .bloc-projet {
        flex-direction: column;
        margin: 2em 0;
        transform: none !important;
        scale: 1;
    }


    .bloc-projet > img {
        min-width: 100%;
        max-width: 100vw;
        min-height: unset;
        max-height: unset;
        border-radius: 0 0 8em 8em;
    }

    .gaucho .big-display{
        transform: translateX(0px);
    }
    .droitard .big-display{
        transform: translateX(0px);
    }
    .droitard{
        transform: translateX(0px);
        flex-direction: column-reverse;
    }
    .gaucho h3 {
        min-width: 100vw;
        text-align: center;
    }
    .droitard h3{
        min-width: 100vw;
        text-align: center;
    }


    .button-link {
        font-size: 200%;
        margin: auto;
    }

    .project-description {
        min-width: 100vw;
        max-width: 100vw;
        min-height: auto;
        max-height: none;
        border-radius: 8em 8em 0 0;
        box-shadow: none;
    }
    .project-description p {
        margin: 2em;
        font-size: 4vw;
        font-weight: normal;
    }
    .droitard .projet-skills {
        flex-direction: row;
    }

    .projet-skills {
        justify-content: center;
    }
    a.projet-skill-img {
        max-width: 50px !important;
        max-height: 50px !important;
    }
    .projet-skills img {
        max-width: 50px;
        max-height: 50px;
    }

    .droitard a.projet-skill-img {
        margin-left: 0;
        margin-right: 1em;
    }

    /* TIMELINE → cachée */
    .timeline,
    .timeline-point,
    .timeline-date {
        display: none;
    }

    /* SKILLS SECTION */
    .skill-display {
        padding: 0;
        gap: 2vw;
    }

    .skill-content {
        flex-direction: column;
    }

    .skill-selectors {
        max-width: 100%;
    }

    .skill-item {
        min-width: 20vw;
        max-width: 20vw;
        min-height: 20vw;
        max-height: 20vw;
        margin-bottom: 20vw;
    }
    .skill-item img {
        min-width: 16vw;
        max-width: 16vw;
        min-height: 16vw;
        max-height: 16vw;
        padding: 2vw;
        border-radius: 4vw;
    }

    .skill-item-bg {
        padding: 1vw;
        max-height: none;
        transform: none;
        border-radius: 2vw;
    }
    .skill-item:hover .skill-item-bg {
        transform: none;
    }
    .skill-item p {
        font-size: 3vw;
    }

    #skills h2, #events h2 {
        max-width: none !important;
        font-size: 12vw !important;
    }

    #events h2 {
        box-shadow: rgba(240, 248, 255, 0.514) 0px 5px 30px 10px;
    }

















    /* Footer spacing */
    footer {
        padding: 2em 0;
    }
}