/*====================================================
                RESPONSIVE
                Ben's Line Dance
====================================================*/

/*====================================================
            ORDINATEUR PORTABLE
====================================================*/

@media (max-width:1200px){

    .container{

        padding:0 20px;

    }

    .menu{

        gap:22px;

    }

    .hero h1{

        font-size:4.4rem;

    }

}

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

@media (max-width:992px){

    /* Navbar */

    .navbar .container{

        height:90px;

    }

    .logo img{

        height:90px;

    }

    /* Hamburger */

    .menu-toggle{

        display:block;

        z-index:1101;

    }

    /* Menu */

#main-menu{

    position:fixed;

    top:90px;

    left:0;

    width:100%;

    height:calc(100vh - 90px);

    background:var(--background);

    display:flex;

    justify-content:center;

    align-items:flex-start;

    padding-top:50px;

    transform:translateX(-100%);

    transition:transform .35s ease;

    z-index:1000;

}

#main-menu.active{

    transform:translateX(0);

}

    .menu{

        width:100%;

        flex-direction:column;

        gap:0;

    }

    .menu li{

        width:100%;

        text-align:center;

    }

    .menu a{

        display:block;

        padding:18px;

        color:var(--text) !important;

        border-bottom:1px solid var(--border);

    }

    .navbar-right{

        display:none;

    }

    /* Hero */

    .hero{

        min-height:620px;

    }

    .hero-content{

        padding:140px 0px 60px;

    }

    .hero h1{

        font-size:3.8rem;

    }

    .hero p{

        font-size:1.15rem;

    }

    .hero-buttons{

        gap:15px;

    }

    .hero-buttons .btn{

        min-width:200px;

    }

}

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

@media (max-width:768px){

    .hero{

        min-height:560px;

    }

    .hero-content{

        padding:120px 20px 50px;

    }

    .hero h1{

        font-size:2.9rem;

    }

    .hero p{

        font-size:1rem;

    }

    .hero-buttons{

        flex-direction:column;

    }

    .hero-buttons .btn{

        width:100%;
        max-width:300px;

    }

    /* Cartes */

    .stats-grid,

    .latest-grid,

    .events-grid{

        grid-template-columns:1fr;

    }

}

/*====================================================
                TÉLÉPHONE
====================================================*/

@media (max-width:576px){

    .navbar .container{

        height:80px;

    }

    .logo img{

        height:75px;

    }

    #main-menu{

        top:80px;

        height:calc(100vh - 80px);

    }

    .hero{

        min-height:500px;

    }

    .hero-content{

        padding:170px 0px 90px;

    }

    .hero-badge{

        font-size:.75rem;

    }

    .hero h1{

        font-size:2.2rem;

    }

    .hero p{

        font-size:.95rem;

        line-height:1.6;

    }

}

/*====================================================
                    FOOTER
====================================================*/

@media (max-width:992px){

    .footer-content{

        grid-template-columns:1fr 1fr;

        gap:40px;

    }

    .footer-column:first-child{

        grid-column:1 / -1;

        text-align:center;

    }

    .footer-column:first-child img{

        margin:20px auto 0;

    }

}

@media (max-width:768px){

    .footer-content{

        grid-template-columns:1fr;

        gap:45px;

        text-align:center;

    }

    .footer-column{

        width:100%;

    }

    .footer-column img{

        margin:20px auto 0;

    }

    .socials{

        justify-content:center;

    }

}





/*====================================================
        SECTION NIVEAUX / STATISTIQUES
====================================================*/

/*-------------------------------
    <= 1200px
--------------------------------*/

@media (max-width:1200px){

    .stats-wrapper{

        padding:0 25px;

    }

    .stats-grid{

        grid-template-columns:repeat(3,1fr);
        gap:25px;

    }

    .joker-card{

        max-width:450px;
        margin:0 auto 45px;

    }

}

/*-------------------------------
    <= 992px
--------------------------------*/

@media (max-width:992px){

    .section-title{

        padding:0 25px;
        margin-bottom:45px;

    }

    .section-title h2{

        font-size:3rem;

    }

    .section-description{

        font-size:1.1rem;
        max-width:650px;

    }

    .stats-wrapper{

        display:flex;
        flex-direction:column;
        align-items:center;

    }

    .joker-card{

        width:100%;
        max-width:500px;
        margin-bottom:40px;

    }

    .stats-grid{

        width:100%;
        grid-template-columns:repeat(2,1fr);
        gap:25px;

    }

}

/*-------------------------------
    <= 768px
--------------------------------*/

@media (max-width:768px){

    .section-title{

        padding:0 20px;

    }

    .section-title h2{

        font-size:2.4rem;

    }

    .section-description{

        font-size:1rem;
        line-height:1.7;

    }

    .stats-section{

        padding:70px 0;

    }

    .stats-wrapper{

        padding:0 20px;

    }

    .stats-grid{

        grid-template-columns:1fr;
        gap:22px;

    }

    .joker-card{

        max-width:420px;

    }

}

/*-------------------------------
    <= 576px
--------------------------------*/

@media (max-width:576px){

    .section-title{

        margin-bottom:35px;

    }

    .section-title h2{

        font-size:2rem;

    }

    .section-description{

        font-size:.95rem;

    }

    .joker-card{

        width:100%;
        max-width:100%;

    }

    .stats-grid{

        gap:18px;

    }

}

/*-------------------------------
    <= 420px
--------------------------------*/

@media (max-width:420px){

    .section-title h2{

        font-size:1.8rem;

    }

    .section-description{

        font-size:.9rem;

    }

}