/* pages CHANSON */

#chanson nav#liste-chansons h1 {
    font-weight: 600;
    font-size: 1.8em;
    margin-bottom: 25px;
    text-shadow: 0 7px 10px rgba(0,0,0,0.2), 0 5px 10px rgba(0,0,0,0.22);
}

#chanson nav#liste-chansons .infos-vinyle .cover {
    width: 98%;
    max-width: 280px;
    margin-bottom: 42px;
}

#chanson nav#liste-chansons .infos-vinyle .cover img {
    -webkit-box-shadow: 0 14px 28px rgba(0,0,0,0.25), 0 10px 10px rgba(0,0,0,0.22);
            box-shadow: 0 14px 28px rgba(0,0,0,0.25), 0 10px 10px rgba(0,0,0,0.22);
}

#chanson #main {
    background-position: bottom right;
    background-repeat: no-repeat;
    background-size: cover;
}

#chanson #main h1 {
    margin: 5px 10px 25px 0;
    font-weight: 700;
    font-size: 1.5em;
    color: var(--couleur-1);
    display: inline-block;
}

#chanson #main .content {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-pack: justify;
        -ms-flex-pack: justify;
            justify-content: space-between;
    margin-top: 15px;
}

#chanson #main .paroles, #chanson #main .infos .text p, #chanson #main .infos .auteur {
    white-space: pre-line;
}

#chanson #main .content .chanson {
    width: 47.8%;
}

#chanson #main .content .chanson audio {
    width: 100%;
    max-width: 300px;
}

#chanson #main .content .chanson .paroles {
    font-style: italic;
    font-size: 0.9em;
    font-weight: 600;
    margin-bottom: 35px;
}

#chanson #main .content .chanson .autre-version {
    padding: 22px;
    background-color: white;
    border-radius: 5px;
    width: 335px;
    -webkit-box-shadow: 0 10px 28px rgba(0,0,0,0.25), 0 10px 10px rgba(0,0,0,0.22);
            box-shadow: 0 10px 28px rgba(0,0,0,0.25), 0 10px 10px rgba(0,0,0,0.22);
}

#chanson #main .content .chanson .autre-version h3 {
    font-weight: 700;
    color: #c10c00;
    margin-bottom: 15px;
    font-size: 0.9em;
}

#chanson #main .content .chanson .autre-version audio {
    margin-bottom: 15px;
}

#chanson #main .content .chanson .autre-version .interprete {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
}

#chanson #main .content .chanson .autre-version .interprete .photo {
    width: 150px;
    margin-right: 15px;
}

#chanson #main .content .chanson .autre-version .interprete p {
    font-style: italic;
    color: grey;
    font-size: 0.95em;
}

#chanson #main .content .chanson .autre-version .interprete p span.nom {
    font-weight: 600;
}

#chanson #main .content .infos {
    width: 47.8%;
    max-width: 450px;
}

#chanson #main .content .infos .text {
    margin-bottom: 25px;
    font-weight: 600;
}
#chanson #main .content .infos .text span {
    font-style: italic;
    font-weight: 700;
}
#chanson #main .content .infos .photo {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    margin-bottom: 65px;
}
#chanson #main .chanson > .photo {
    margin-top: 20px;
}
#chanson #main .content .chanson .photo .auteur {
    margin-top: 10px;
    margin-left: 0;
}
#chanson #main .content .photo .auteur {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
        -ms-flex-direction: column;
            flex-direction: column;
    -webkit-box-pack: end;
        -ms-flex-pack: end;
            justify-content: flex-end;
    margin-left: 15px;
}
#chanson #main .content .photo .auteur span.nom {
    font-weight: 800;
    line-height: 1;
    color: var(--couleur-1);
}
#chanson #main .content .photo .auteur span.date {
    margin-top: 5px;
}

#chanson #main .content .infos .slick-container {
    margin: 10px;
    margin-bottom: 50px;
    -webkit-box-shadow: 0 12px 28px rgba(0,0,0,0.25), 0 10px 10px rgba(0,0,0,0.22);
            box-shadow: 0 12px 28px rgba(0,0,0,0.25), 0 10px 10px rgba(0,0,0,0.22);
}
#chanson #main .content .infos .slick-container.sans-ombre {
    -webkit-box-shadow: none;
            box-shadow: none;
}
#chanson #main .content .infos .slick-container.cinema {
    border: 30px solid black;
    border-radius: 30px;
}

#chanson #main .chanson .text h1 {
    margin: 10px 0 5px 0;
}

#chanson #main .orchestre {
    position: relative;
    background-color: white;
}

#chanson #main .orchestre .orch-container {
    width: 100%;
    height: 100%;
    position: absolute;
}

#chanson #main .orchestre .orch-container .row {
    height: 20%;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
}

#chanson #main .orchestre .orch-container .row .zone {
    position: relative;
}

#chanson #main .orchestre .orch-container .row .zone .instrument  {
    /* background: rgba(254,176,255,0.32); */
    position: absolute;
    z-index: 100;
}

#chanson #main .orchestre .orch-container .row.r-1 .zone.z-1 {
    width: 20%;
}

    #chanson #main .orchestre .orch-container .row.r-1 .zone.z-1 .xylophone  {
        width: 53%;
        height: 110%;
        bottom: -69%;
        right: 3%;
    }

#chanson #main .orchestre .orch-container .row.r-1 .zone.z-2 {
    width: 9.5%;
}

    #chanson #main .orchestre .orch-container .row.r-1 .zone.z-2 .vibraphone  {
        width: 92%;
        height: 90%;
        bottom: -47%;
        right: 6%;
    }

#chanson #main .orchestre .orch-container .row.r-1 .zone.z-3 {
    width: 6.5%;
}

    #chanson #main .orchestre .orch-container .row.r-1 .zone.z-3 .cloches-tub  {
        width: 92%;
        height: 80%;
        bottom: -22%;
        right: 6%;
    }

#chanson #main .orchestre .orch-container .row.r-1 .zone.z-4 {
    width: 6.5%;
}

    #chanson #main .orchestre .orch-container .row.r-1 .zone.z-4 .caisse-claire  {
        width: 92%;
        height: 92%;
        bottom: -22%;
        right: 6%;
    }

#chanson #main .orchestre .orch-container .row.r-1 .zone.z-5 {
    width: 6.2%;
}

    #chanson #main .orchestre .orch-container .row.r-1 .zone.z-5 .grosse-caisse {
        width: 80%;
        height: 84%;
        bottom: -9%;
        right: 19%;
    }

#chanson #main .orchestre .orch-container .row.r-1 .zone.z-6 {
    width: 7.6%;
}

    #chanson #main .orchestre .orch-container .row.r-1 .zone.z-6 .tambourin {
        width: 89%;
        height: 36%;
        bottom: 36%;
        right: 7%;
    }

    #chanson #main .orchestre .orch-container .row.r-1 .zone.z-6 .castagnettes {
        width: 88%;
        height: 38%;
        bottom: -9%;
        right: 9%;
    }

#chanson #main .orchestre .orch-container .row.r-1 .zone.z-7 {
    width: 8.1%;
}

    #chanson #main .orchestre .orch-container .row.r-1 .zone.z-7 .maracasses-titre {
        width: 96%;
        height: 12%;
        bottom: 66%;
        right: -4%;
    }

    #chanson #main .orchestre .orch-container .row.r-1 .zone.z-7 .claves-titre {
        width: 65%;
        height: 11%;
        bottom: 56%;
        right: 27%
    }    

    #chanson #main .orchestre .orch-container .row.r-1 .zone.z-7 .congas {
        width: 73%;
        height: 48%;
        bottom: 5%;
        right: 11%;
    }

    #chanson #main .orchestre .orch-container .row.r-1 .zone.z-7 .maracasses {
        width: 43%;
        height: 22%;
        bottom: -21%;
        right: 45%;
    }

    #chanson #main .orchestre .orch-container .row.r-1 .zone.z-7 .claves {
        width: 22%;
        height: 29%;
        bottom: -27%;
        right: 13%;
    }

#chanson #main .orchestre .orch-container .row.r-1 .zone.z-8 {
    width: 9.3%;
}

    #chanson #main .orchestre .orch-container .row.r-1 .zone.z-8 .triangle {
        width: 51%;
        height: 55%;
        bottom: 26%;
        right: -1%;
    }

    #chanson #main .orchestre .orch-container .row.r-1 .zone.z-8 .gong {
        width: 56%;
        height: 42%;
        bottom: -18%;
        right: 36%;
    }

#chanson #main .orchestre .orch-container .row.r-1 .zone.z-9 {
    width: 8.3%;
}

    #chanson #main .orchestre .orch-container .row.r-1 .zone.z-9 .cymbales {
        width: 88%;
        height: 119%;
        bottom: -39%;
        right: 5%;
    }

#chanson #main .orchestre .orch-container .row.r-1 .zone.z-10 {
    width: 18%;
}

    #chanson #main .orchestre .orch-container .row.r-1 .zone.z-10 .timbales {
        width: 98%;
        height: 94%;
        bottom: -35%;
        right: 4%;
    }

#chanson #main .orchestre .orch-container .row.r-2 .zone.z-1 {
    width: 29%;
}

    #chanson #main .orchestre .orch-container .row.r-2 .zone.z-1 .cor  {
        width: 76%;
        height: 74%;
        bottom: -50%;
        right: 1%;
        -webkit-transform: rotate(-17deg);
                transform: rotate(-17deg);
    }

#chanson #main .orchestre .orch-container .row.r-2 .zone.z-2 {
    width: 22%;
}

    #chanson #main .orchestre .orch-container .row.r-2 .zone.z-2 .trompette  {
        width: 94%;
        height: 76%;
        bottom: -15%;
        right: 2%;
        -webkit-transform: rotate(-5deg);
                transform: rotate(-5deg);
    }

#chanson #main .orchestre .orch-container .row.r-2 .zone.z-3 {
    width: 15.8%;
}

    #chanson #main .orchestre .orch-container .row.r-2 .zone.z-3 .trombone  {
        width: 94%;
        height: 78%;
        bottom: -6%;
        right: 2%;
    }

#chanson #main .orchestre .orch-container .row.r-2 .zone.z-4 {
    width: 6.8%;
}
  
    #chanson #main .orchestre .orch-container .row.r-2 .zone.z-4 .tuba  {
        width: 94%;
        height: 82%;
        bottom: -5%;
        right: 2%;
    }

#chanson #main .orchestre .orch-container .row.r-3 .zone.z-1 {
    width: 11.5%;
}

    #chanson #main .orchestre .orch-container .row.r-3 .zone.z-1 .harpe  {
        width: 85%;
        height: 99%;
        bottom: -64%;
        right: 2%;
    }

#chanson #main .orchestre .orch-container .row.r-3 .zone.z-2 {
    width: 6%;
}

    #chanson #main .orchestre .orch-container .row.r-3 .zone.z-2 .piccolo  {
        width: 95%;
        height: 80%;
        bottom: -39%;
        right: -5%;
    }

#chanson #main .orchestre .orch-container .row.r-3 .zone.z-3 {
    width: 11.5%;
}

    #chanson #main .orchestre .orch-container .row.r-3 .zone.z-3 .flutes  {
        width: 90%;
        height: 82%;
        bottom: -26%;
        right: 2%;
    }

#chanson #main .orchestre .orch-container .row.r-3 .zone.z-4 {
    width: 8.5%;
}


    #chanson #main .orchestre .orch-container .row.r-3 .zone.z-4 .hautbois  {
        width: 94%;
        height: 82%;
        bottom: -5%;
        right: 2%;
    }
        
#chanson #main .orchestre .orch-container .row.r-3 .zone.z-5 {
    width: 5.7%;
}

    #chanson #main .orchestre .orch-container .row.r-3 .zone.z-5 .cor-anglais {
        width: 94%;
        height: 88%;
        bottom: -5%;
        right: 2%;
    }

#chanson #main .orchestre .orch-container .row.r-3 .zone.z-6 {
    width: 8.85%;
}

    #chanson #main .orchestre .orch-container .row.r-3 .zone.z-6 .clarinette {
        width: 94%;
        height: 82%;
        bottom: 5%;
        right: 2%;
    }

#chanson #main .orchestre .orch-container .row.r-3 .zone.z-7 {
    width: 7.6%;
}

    #chanson #main .orchestre .orch-container .row.r-3 .zone.z-7 .clarinette-basse {
        width: 94%;
        height: 91%;
        bottom: 2%;
        right: 2%;
    }

#chanson #main .orchestre .orch-container .row.r-3 .zone.z-8 {
    width: 10%;
}

    #chanson #main .orchestre .orch-container .row.r-3 .zone.z-8 .basson  {
        width: 94%;
        height: 82%;
        bottom: 11%;
        right: 2%;
    }

#chanson #main .orchestre .orch-container .row.r-3 .zone.z-9 {
    width: 8%;
}

    #chanson #main .orchestre .orch-container .row.r-3 .zone.z-9 .contrebasson  {
        width: 99%;
        height: 82%;
        bottom: 10%;
        right: 2%;
    }

#chanson #main .orchestre .orch-container .row.r-4 .zone.z-1 {
    width: 31.5%;
}

    #chanson #main .orchestre .orch-container .row.r-4 .zone.z-1 .premiers-violons {
        width: 72%;
        height: 125%;
        bottom: -83%;
        right: 2%;
        -webkit-transform: rotate(-5deg);
                transform: rotate(-5deg);
    }    

#chanson #main .orchestre .orch-container .row.r-4 .zone.z-2 {
    width: 29.5%;
}

    #chanson #main .orchestre .orch-container .row.r-4 .zone.z-2 .seconds-violons {
        width: 94%;
        height: 89%;
        bottom: 3%;
        right: 7%;
        -webkit-transform: rotate(-1deg);
                transform: rotate(-1deg);
    }

#chanson #main .orchestre .orch-container .row.r-4 .zone.z-3 {
    width: 14.5%;
}

    #chanson #main .orchestre .orch-container .row.r-4 .zone.z-3 .altos {
        width: 99%;
        height: 82%;
        bottom: 24%;
        right: -2%;
    }

#chanson #main .orchestre .orch-container .row.r-4 .zone.z-4 {
    width: 24.4%;
}

    #chanson #main .orchestre .orch-container .row.r-4 .zone.z-4 .violoncelles {
        width: 81%;
        height: 122%;
        bottom: 7%;
        right: 13%;
        -webkit-transform: rotate(5deg);
                transform: rotate(5deg);
    }

    #chanson #main .orchestre .orch-container .row.r-4 .zone.z-4 .contrebasses {
        width: 63%;
        height: 116%;
        bottom: 131%;
        right: 9%;
    }
        
#chanson #main .orchestre .orch-container .row.r-5 .zone.z-1 {
    width: 57.5%;
}

    #chanson #main .orchestre .orch-container .row.r-5 .zone.z-1 .piano {
        width: 34%;
        height: 90%;
        bottom: 12%;
        right: 5%;
    }

#chanson #main .orchestre .orch-container .row.r-5 .zone.z-2 {
    width: 42.4%;
}

    #chanson #main .orchestre .orch-container .row.r-5 .zone.z-2 .chef-d-orchestre {
        width: 29%;
        height: 115%;
        bottom: 6%;
        right: 67%;
    }

    #chanson #main .orchestre .orch-container .row.r-5 .zone.z-2 .chef-d-orchestre-texte {
        width: 48%;
        height: 49%;
        bottom: 24%;
        right: 18%;
    }

/* Pour le bouton Favori  */
    .add-fav {
        -webkit-user-select: none;
           -moz-user-select: none;
            -ms-user-select: none;
                user-select: none; 
        display: inline-block;
        cursor: pointer;
        background-color: rgb(0, 0, 0, 0.08);
        position: relative;
        -webkit-transition: all .2s ease;
        transition: all .2s ease;
        -webkit-box-shadow: inset 0 -1px 1px rgb(218, 218, 218);
                box-shadow: inset 0 -1px 1px rgb(218, 218, 218);
        border-radius: 3px;
        -webkit-box-shadow: 0px 1px 3px rgba(0, 0, 0, 0.2);
                box-shadow: 0px 1px 3px rgba(0, 0, 0, 0.2);
        height: 24px;
        top: -2px;  
    }
    .add-fav:hover {
        -webkit-box-shadow: 0px 3px 5px rgba(0, 0, 0, 0.2);
             box-shadow: 0px 3px 5px rgba(0, 0, 0, 0.2);
    }  
    .icon-heart {
    font-size: 20px;
    color: rgba(0, 0, 0, 0.253);
    position: relative;
    left: 5px;
    top: 2px;
    -webkit-transition: all .2s ease;
    transition: all .2s ease;
    border-radius: 25px;
    background-color: rgb(0, 0, 0, 0.03);
    padding: 8px 7px 6px 7px;
    -webkit-box-shadow: 0px 1px 3px rgba(0, 0, 0, 0.2);
            box-shadow: 0px 1px 3px rgba(0, 0, 0, 0.2);
    }
    .add-fav:hover .icon-heart{
        -webkit-box-shadow: 0px 3px 5px rgba(0, 0, 0, 0.2);
             box-shadow: 0px 3px 5px rgba(0, 0, 0, 0.2);
    }  
    .icon-ok {
        font-size: 9px;
        color: white;
        border-radius: 100%;
        position: absolute;
        bottom: 13px;
        right: 12px;
        height: 11px;
        width: 11px;
        line-height: 11px;
        text-align: center;
        -webkit-transition: all .25s ease;
        transition: all .25s ease;
    }
    input[type="checkbox"] {
    position: absolute;
    opacity: 0;
    }
    input[type="checkbox"]:checked + .icon-heart {
    color: var(--couleur-Fav);
    }
    .text-fav {
        font-family: 'Roboto', sans-serif;
        -webkit-user-select: none;
           -moz-user-select: none;
            -ms-user-select: none;
                user-select: none;
        font-size: 10px;
        font-weight: 600;
        color: rgba(0, 0, 0, 0.253);
        position: relative;
        top: -2px;
        text-transform: uppercase;
        margin: 0 10px 0 9px;
    }
    .text-fav span.active-list {
        background-color: white;
        padding: 2px;
        font-size: 84%;
        font-weight: 600;
        color: rgb(167, 167, 167);
        margin-left: 7px;
        border-radius: 2px;
    }
    .text-fav.slide-text-fav-up {
        -webkit-animation-duration: 0.5s;
                animation-duration: 0.5s;
        -webkit-animation-name: slideTextFavUp;
                animation-name: slideTextFavUp;
        -webkit-animation-fill-mode: forwards;
                animation-fill-mode: forwards;
    }
    .text-fav.slide-text-fav-down {
        -webkit-animation-duration: 0.5s;
                animation-duration: 0.5s;
        -webkit-animation-name: slideTextFavDown;
                animation-name: slideTextFavDown;
        -webkit-animation-fill-mode: forwards;
                animation-fill-mode: forwards;
    }


    @-webkit-keyframes slideTextFavUp {
        from {
          top: 15px;
          opacity: 0;
        }

        85% {
            top: 15px;
            opacity: 0;
        }
      
        to {
            top: -2px;
            opacity: 1;
        }
    }


    @keyframes slideTextFavUp {
        from {
          top: 15px;
          opacity: 0;
        }

        85% {
            top: 15px;
            opacity: 0;
        }
      
        to {
            top: -2px;
            opacity: 1;
        }
    }

    @-webkit-keyframes slideTextFavDown {
        from {
          top: -21px;
          opacity: 0;
        }

        85% {
            top: -21px;
            opacity: 0;
        }
      
        to {
            top: -2px;
            opacity: 1;
        }
    }

    @keyframes slideTextFavDown {
        from {
          top: -21px;
          opacity: 0;
        }

        85% {
            top: -21px;
            opacity: 0;
        }
      
        to {
            top: -2px;
            opacity: 1;
        }
    }