/*======================================================
    RESPONSIVE
======================================================*/

/*======================================================
    TABLETTE
======================================================*/

@media (max-width: 992px){

    .container{

        width:min(92%,1200px);

    }

    .hero-content{

        padding:0 20px;

    }

    .hero-logo img{

        width:220px;

    }

    #hero h1{

        font-size:64px;

    }

    #hero h2{

        font-size:30px;

    }

    #hero h3{

        font-size:26px;

    }

}

/*======================================================
    MOBILE
======================================================*/

@media (max-width:768px){

    /* HERO */

    #hero{
        min-height:100vh;
        padding:140px 20px 80px;
    }

    .hero-logo img{
        width:170px;
    }

    .hero-content h1{
        font-size:2.4rem;
        line-height:1.1;
        letter-spacing:2px;
        word-break:break-word;
    }

    .hero-content h2{
        font-size:1.4rem;
    }

    .hero-content h3{
        font-size:1.3rem;
        letter-spacing:2px;
    }

    .hero-content p{
        font-size:1rem;
        padding:0 10px;
    }

    .hero-buttons{
        display:flex;
        flex-direction:column;
        align-items:center;
        gap:15px;
        width:100%;
    }

    .hero-buttons a{
        width:100%;
        max-width:320px;
        text-align:center;
    }

    /* NAVBAR */

    .navbar{
        position:relative;
    }

    #menu-toggle{
        display:block;
        background:none;
        border:none;
        color:#fff;
        font-size:2rem;
        cursor:pointer;
        z-index:10001;
    }

    .play-button{
        display:none;
    }

    nav{
        position:fixed;
        inset:0;
        background:rgba(13,13,13,.96);
        backdrop-filter:blur(10px);

        display:flex;
        justify-content:center;
        align-items:center;

        opacity:0;
        visibility:hidden;
        transition:.3s;
    }

    nav.open{
        opacity:1;
        visibility:visible;
    }

    nav ul{
        flex-direction:column;
        gap:35px;
    }

    nav a{
        font-size:1.5rem;
    }

    /* GÉNÉRAL */

    *{
        max-width:100%;
    }

    #quick-info{
        margin-top:40px;
    }

    .info-grid{
        grid-template-columns:1fr;
    }

    /* TIMELINE */

    #timeline-wrapper{
        overflow-x:auto;
        padding-bottom:20px;
    }

    #timeline-bar{
        position:relative;
        display:flex;
        justify-content:space-between;
        width:max-content;
        min-width:900px;
        gap:40px;
    }

    #timeline-road{
        left:45px;
        right:45px;
        top:36px;
    }

    #timeline-progress{

    position:absolute;
    left:45px;
    top:36px;

}

    .timeline-panel{
        grid-template-columns:1fr;
    }

    .timeline-grid{
        grid-template-columns:1fr;
    }

    .timeline-image{
        height:250px;
    }

    .timeline-content{
        padding:25px;
    }

}

/*======================================================
    PETIT MOBILE
======================================================*/

@media (max-width: 480px){

    .hero-logo img{

        width:140px;

    }

    #hero h1{

        font-size:34px;

    }

    #hero h2{

        font-size:18px;

    }

    #hero h3{

        font-size:18px;

    }

    .hero-content h1{
    font-size:2rem;
}

.hero-content h2{
    font-size:1.2rem;
}

.hero-content h3{
    font-size:1.1rem;
}

}