@media screen and (max-width: 979px) {
    #header .container {
        padding:0 20px;
    }

    #header .content {
        border-bottom: 1px solid black;
        padding-bottom: 20px;
    }

    #header .logo{
        justify-content: space-between;
        align-items: center;
    }

    #header .logo img{
        width:350px;
    }

    #header #toggle-menu{
        display:block;
        border: 1px solid black;
        border-radius: 20px;
        padding: 5px 15px;
        background-color:transparent;
        font-size: 15px;
        line-height: 15px;
    }

    #header #toggle-menu:hover, #header #toggle-menu.active{
        background-color:#2f2e2e;
        color:#fff;
    }

    #header nav {
        display:none;
    }

    #header nav ul.level1{
        gap:0;
        flex-direction: column;
        text-align:right;
    }

    #header nav ul.level1 > li > a {
        line-height: 40px;
    }

    #header nav ul.level1 > li:hover ul{
        display:none;
    }

    #header nav ul.level1 > li.hover ul{
        display:block;
    }

    #header nav ul.level1 ul.sub-menu {
        position: relative;
        width: auto;
        background-color: transparent;
        text-align: unset;
        left: unset;
        top: unset;
    }

    /* ============================================= */

    main .container {
        padding:0 20px;
    }

    main .content{
        font-size: 14px;
    }
    
    main .content h2{
        font-size: 28px;
    }

    /* ============================================= */

    #home iframe{
        height:480px;
    }

    /* ============================================= */

    #service{
        display:none;
    }

    /* ============================================= */

    #musique{
        display:none;
    }

    /* ============================================= */

    #spectacles .grey-box h1, #spectacles .grey-box h2{
        font-size:40px;
        margin-bottom:40px;
    }

    #spectacles .content h2{
        font-size:40px;
    }

    #spectacles .artiste{
        text-align:center;
        display:block;
        min-height: unset;
    }

    #spectacles .artiste .image{
        display:block;
        height:unset;
        margin-bottom:20px;
    }

    #spectacles .artiste .image img{
        width:300px;
    }

    #spectacles .artiste .liens{
        gap:10px;
        justify-content: center;
    }

    #spectacles .artiste .liens img{
        width:40px;
    }

    #spectacles .artiste h4{
        font-size:40px;
        line-height: 40px;
        display:block;
        padding:30px 0;
    }

    #spectacles .event{
        font-size:14px;
    }

    #spectacles .event .left .name span{
        font-size:18px;
        line-height:18px;
    }

    /* ============================================= */

    .grid#mixage p{
        font-size:16px;
    }

    /* ============================================= */

    #home{
        height:auto;
        min-height: unset;
    }
    #home .container{
        height:unset;
    }

    #home iframe{
        margin-top:0;
    }

    /* ============================================= */

    #event h1{
        font-size: 40px;
        line-height: 40px;
        margin-bottom:20px;
    }
    
    #event h2{
        font-size: 25px;
        line-height: 25px;
    }
    
    #event p{
        font-size: 14px;
        line-height: 14px;
    }

    /* ============================================= */

    #footer .container{
        flex-direction: column;
        gap:20px;
        padding:20px;
    }
    #footer .info{
        margin-right: unset;
    }
    #footer .logo img{
        width:200px;
        height:auto;
    }
    #footer .social{
        margin-left: unset;
    }
    #footer .social img{
        width:40px;
    }
}

@media screen and (max-width: 600px) {
    .grid#mixage{
        display: flex;
        grid-template-rows: none;
        grid-template-columns: none;
        flex-direction: column;
        gap: 10px;
    }

    .grid#mixage img{
        width:50%;
    }

    .grid#mixage p{
        font-size:16px;
    }
}

@media screen and (max-width: 529px) {
    #header .content {
        padding-bottom: 10px;
    }

    #header .logo img{
        width:200px;
    }

    #header #toggle-menu{
        padding: 5px 10px;
        font-size: 10px;
        line-height: 10px;
    }

    /* ============================================= */

    main .content{
        font-size: 13px;
    }

    main .content h2 {
        font-size:20px;
    }

    main#page iframe {
        height:270px;
    }

    /* ============================================= */

    #spectacles .event a{
        flex-direction: column;
    }

    #spectacles .event .left{
        flex-grow: unset;
    }

    #spectacles .event .right{
        margin-top:10px;
    }

    /* ============================================= */

    #footer .container{
        flex-direction: column-reverse;
        gap: 15px;
        padding: 15px;
    }

    #footer .info a {
        font-size: 14px;;
    }

    #footer .logo {
        display:none;
    }

    #footer .social ul {
        gap:20px;
    }

    #footer .social img {
        width:30px;
    }
}

@media screen and (max-width: 400px) {
    #home iframe {
        height:250px;
    }

    #spectacles .grey-box h1, #spectacles .grey-box h2, #spectacles .content h2{
        font-size:22px;
        line-height:22px;
        margin-bottom:20px;
    }

    #spectacles .event{
        font-size:12px;
    }

    #spectacles .event .left .name span{
        font-size:14px;
        line-height:14px;
    }

    #spectacles .artiste .image img{
        width:100%;
    }

    #spectacles .artiste h4{
        font-size:30px;
        line-height:30px;
    }
}