@media (max-width: 901px) {

    /* Navbar */

    nav {
        display: flex;
        justify-content: space-between;
        align-items: center;
        padding: 10px 20px;
    }

    nav img {
        height: 40px;
    }

    /* ---- BURGER ---- */

    .burger {
        display: flex;
        flex-direction: column;
        justify-content: space-between;
        width: 35px;
        height: 22px;
        cursor: pointer;
    }

    .burger span {
        display: block;
        height: 3px;
        background-color: #fff;
        border-radius: 2px;
        transition: all 0.3s;
    }

    nav ul {
        position: absolute;
        top: 60px;
        right: 0;
        flex-direction: column;
        align-items: flex-start;
        width: 210px;
        padding: 10px;
        gap: 10px;
        transform: translateX(100%);
        transition: transform 0.3s ease;
    }

    nav ul.active {
        transform: translateX(0);
    }

    /* Animation du burger en croix */
    .burger.active span:nth-child(1) {
        transform: rotate(45deg) translate(6.5px, 6.5px);
    }

    .burger.active span:nth-child(2) {
        opacity: 0;
    }

    .burger.active span:nth-child(3) {
        transform: rotate(-45deg) translate(6.5px, -6.5px);
    }

    /* Titre */

    #titreHeader {
        position: static;
        margin: 2% 6% 12% 6%;
        text-align: center;
    }

    #titreHeader h1 {
        font-size: 2.6rem;
        margin: 2% 0;
        text-shadow: #0ceb69 0px 0px 4px;
    }

    #titreHeader h2 {
        font-size: 1.7rem;
    }

    #titreHeader h3 {
        font-size: 1.1rem;
        margin-top: 12%;
    }

    #titreHeader button {
        margin-top: 8%;
        padding: 0.8rem 1.3rem;
        font-size: 1.1rem;
    }


    /* Logo slider */

    #logoSlider {
        overflow: hidden;
        position: relative;
        margin-bottom: 12rem;
    }

    #logoSlider:before,
    #logoSlider:after {
        position: absolute;
        top: 0;
        width: 120px;
        height: 100%;
        content: '';
        z-index: 2;
    }

    #logo-slide {
        flex-direction: column;
        flex-wrap: wrap;
        align-items: center;
        padding: 1rem;
    }

    #logo-slide img {
        width: auto;
        height: 50px;
        margin: 0 1.2rem;
    }


    /* Compétences */

    #competences {
        margin: 4% 14%;
        height: auto;
    }

    .competence {
        box-shadow: 0 0 25px #0ceb69;
        padding: 4% 8%;
        margin: 8% 0;
    }

    .competence-wrapper {
        flex-direction: column;
        align-items: center;
    }

    #competences h2 {
        font-size: 2.6rem;
        margin: 42% 0 24% 0;
    }

    #competences h3 {
        font-size: 1.4rem;
        margin: 12% 0;
    }

    #competences:hover h3 {
        transform: none;
        text-align: center;
        color: white;
    }

    #competences p {
        font-size: 1rem;
        margin: 4% 0;
    }

    /* Footer */

    footer {
        text-align: center;
        padding: 1rem;
    }

    footer img {
        height: 32px;
        width: auto;
        margin-bottom: 2%;
    }

    footer p {
        margin: 4% 0;
        font-size: 1.1rem;
    }

    footer span {
        font-size: 1.2rem;
    }

    #footer-copyright {
        margin-top: 6%;
        font-size: 0.69rem;
    }
}

/* Page Projets */

@media screen and (max-width: 900px) {

    .projet-row,
    .projet-row.right {
        grid-template-columns: 1fr;
        /* Empile sur une seule colonne */
        direction: ltr;
    }

    .projet-row img {
        height: auto;
        max-height: 300px;
        order: -1;
        /* L’image passe au-dessus de la carte sur mobile */
    }

    .projet-row img:hover {
        transform: scale(1.05);
        /* Ajuste l’effet de zoom pour mobile */
    }
}

/* Timeline Responsive */
@media (max-width: 1024px) {

    #timeline {
        height: auto;
        overflow: visible;
        margin-bottom: 12rem;
    }

    #timeline h2 {
        position: static;
        transform: rotate(0);
        text-align: center;
        margin-bottom: 2rem;
    }

    .timeline-wrapper {
        display: block;
        width: 100%;
        padding: 0;
    }

    .timeline-line {
        position: static;
        width: 4px;
        height: 100%;
        margin: 0 auto;
    }

    .timeline-card {
        min-width: auto;
        max-width: 84%;
        margin: 2rem auto;
        padding: 1.5rem;
        display: block;
        box-shadow: 0 0 25px #0ceb69;
    }

    .timeline-card:hover {
        transform: none;
        /* désactive l'effet de zoom */
    }

    /* Plus d'alternance haut / bas */
    .timeline-card.odd,
    .timeline-card.even {
        margin: 2.5rem auto;
    }

    .timeline-card img {
        display: none;
    }

    .timeline-card p {
        font-size: 1rem;
        /* affiché directement */
    }
}

@media (max-width: 480px) {
    #timeline h2 {
        font-size: 2.2rem;
        margin-bottom: 2rem;
    }

    .timeline-card {
        padding: 1rem;
    }
}