/* remise à zéro */
body,i
{
    padding: 0px;
    margin: 0px;
}
button
{
    background-color: white;
}

body
{
    height: 100vh;
    width: 100%;
    overflow: hidden;
}

/* fin remise à zéro */

/* boutons */
    /* calend */
.calend .mois_precedent i,.mois_suivant i
{
    font-size: 3em;
}

.calend .petit_button i
{
    font-size: 1em;
}

.calend .grand_button i
{
    font-size: 3em;
}
    /* fin calend */

    /* playeur */

.playeur .gestion_taille i
{
    font-size: 1.5em;
}   

.playeur .gestion_boutons i
{
    font-size: 3em;
}

    /* fin playeur */

/* fin boutons */


/* la mise en page calendrier basic */
.calend .bloc_page_mois
{
    display: flex;
    flex-direction: column;
    height: 100vh;
    width: 100%;
    gap: 1vh;
    position: absolute;
}
.calend .titre_music,.temps,button,.calendrier,.couvercle,.contenue,.gestion_basic,.gestion_option
{
    border: 1px solid black;
    border-radius: 1.5%/5%;
}
button,.titre_music,.temps
{
    border-radius: 20%/25%;
}
.contenue,.couvercle
{
    border-radius: 8%/5%;
}
.calend .affichage_mois
{
    display: flex;
    justify-content: center;
    align-items: center;
    height: 10%;
}
.calend .affichage_music
{
    display: grid;
    grid-template: 1fr / 5fr 1fr 6fr 1fr 5fr;
    height: 5%;
    gap: 2%;
}
    .calend .vocal
    {
        grid-area: 1/2/2/3;
        display: flex;
        justify-content: center;
        align-items: center;
    }
    .calend .titre_music
    {
        grid-area: 1/3/2/4;
        display: flex;
        justify-content: center;
        align-items: center;
    }
    .calend .temps
    {
        grid-area: 1/4/2/5;
        display: flex;
        justify-content: center;
        align-items: center;
    }
.calend .corp_page
{
    display: flex;
    justify-content:space-around;
    align-items: center;
    height: 70%;
}
.calendrier,.titre_music,.temps,.gestion_basic,.gestion_option,.vocal
{
    background-image: url(image/bois.jpg);
}
button
{
    background-color: white;
    display: flex;
    justify-content: center;
    align-items: center;
}
    .calend .corp_page>aside
    {
        border-radius: 50%;
        height: 50px;
        width: 50px;
    }
        .calend .corp_page>aside>button
        {
            border-radius: 50%;
            height: 100%;
            width: 100%;
        }
    .calend .calendrier
    {
        display: grid;
        grid-template: repeat(3,1fr) / repeat(10,1fr 2fr 1fr 2fr) 1fr 2fr 1fr ;
        height: 88%;
        width: 80%;
        row-gap: 5%;
        padding: 1%;
    }  
    
        .calend .calendrier>div
        {
            display: grid;
            grid-template: 1fr/1fr;
        }

        .calend .couvercle,.contenue
        {
            height: 100%;
            width: 100%;
            grid-area: 1/1/2/2;
            position: relative;
            background-color: white;
        }
        .calend .couvercle span,.contenue span
        {
            height: 100%;
            width: 100%;
            display: flex;
            align-items: center;
            justify-content: center;
            font-size: 2em;
        }

        .calend .un
        {
            grid-area: 1/3/2/6;
        }
        .calend .deux
        {
            grid-area: 1/7/2/10;
        }
        .calend .trois
        {
            grid-area: 1/11/2/14;
        }
        .calend .quatre
        {
            grid-area: 1/15/2/18;
        }
        .calend .cinq
        {
            grid-area: 1/19/2/22;
        }
        .calend .six
        {
            grid-area: 1/23/2/26;
        }
        .calend .sept
        {
            grid-area: 1/27/2/30;
        }
        .calend .huit
        {
            grid-area: 1/31/2/34;
        }
        .calend .neuf
        {
            grid-area: 1/35/2/38;
        }
        .calend .dix
        {
            grid-area: 1/39/2/42;
        }
        .calend .onze
        {
            grid-area: 2/3/3/6;
        }
        .calend .douze
        {
            grid-area: 2/7/3/10;
        }
        .calend .treize
        {
            grid-area: 2/11/3/14;
        }
        .calend .quatorze
        {
            grid-area: 2/15/3/18;
        }
        .calend .quinze
        {
            grid-area: 2/19/3/22;
        }
        .calend .seize
        {
            grid-area: 2/23/3/26;
        }
        .calend .dix-sept
        {
            grid-area: 2/27/3/30;
        }
        .calend .dix-huit
        {
            grid-area: 2/31/3/34;
        }
        .calend .dix-neuf
        {
            grid-area: 2/35/3/38;
        }
        .calend .vingt
        {
            grid-area: 2/39/3/42;
        }
        .phalange .vingt-et-un
        {
            grid-area: 3/1/4/4;
        }
        .creux_special .vingt-et-un
        {
            grid-area: 3/7/4/10;
        }
        .creux .vingt-et-un
        {
            grid-area: 3/3/4/6;
        }

        .phalange .vingt-deux
        {
            grid-area: 3/5/4/8;
        }
        .creux_special .vingt-deux
        {
            grid-area: 3/11/4/14;
        }
        .creux .vingt-deux
        {
            grid-area: 3/7/4/10;
        }

        .phalange .vingt-trois
        {
            grid-area: 3/9/4/12;
        }
        .creux_special .vingt-trois
        {
            grid-area: 3/15/4/18;
        }
        .creux .vingt-trois
        {
            grid-area: 3/11/4/14;
        }

        .phalange .vingt-quatre
        {
            grid-area: 3/13/4/16;
        }
        .creux_special .vingt-quatre
        {
            grid-area: 3/19/4/22;
        }
        .creux .vingt-quatre
        {
            grid-area: 3/15/4/18;
        }

        .phalange .vingt-cinq
        {
            grid-area: 3/17/4/20;
        }
        .creux_special .vingt-cinq
        {
            grid-area: 3/23/4/26;
        }
        .creux .vingt-cinq
        {
            grid-area: 3/19/4/22;
        }

        .phalange .vingt-six
        {
            grid-area: 3/21/4/24;
        }
        .creux_special .vingt-six
        {
            grid-area: 3/27/4/30;
        }
        .creux .vingt-six
        {
            grid-area: 3/23/4/26;
        }

        .phalange .vingt-sept
        {
            grid-area: 3/25/4/28;
        }
        .creux_special .vingt-sept
        {
            grid-area: 3/31/4/34;
        }
        .creux .vingt-sept
        {
            grid-area: 3/27/4/30;
        }

        .phalange .vingt-huit
        {
            grid-area: 3/29/4/32;
        }
        .creux_special .vingt-huit
        {
            grid-area: 3/35/4/38;
        }
        .creux .vingt-huit
        {
            grid-area: 3/31/4/34;
        }

        .phalange .vingt-neuf
        {
            grid-area: 3/33/4/36;
        }
        .creux .vingt-neuf
        {
            grid-area: 3/35/4/38;
        }

        .phalange .trente
        {
            grid-area: 3/37/4/40;
        }
        .creux .trente
        {
            grid-area: 3/39/4/42;
        }

        .phalange .trente-et-un
        {
            grid-area: 3/41/4/44;
        }
    

.calend .gestion_music
{
    display: grid;
    grid-template: 1fr 3fr/6fr 6fr 6fr;
    gap: 2%;
    height: 24%;
    padding: 1%;
}
    .calend .gestion_basic
    {
        grid-area: 2/2/3/3;
        display: flex;
        align-items: center;
        justify-content: space-between;
        padding: 2%;
        gap: 2%;
    }
        .calend .petit_button
        {
            height: 20px;
            width: 20px;
        }
        .calend .gestion_basic>.grand_button
        {
            height: 60px;
            width: 60px;
            position: relative;
        }
            .calend .gestion_basic .play
            {
                height: 100%;
                width: 100%;
                position: absolute;
                z-index: 32;
            }  
            .calend .gestion_basic .pause
            {
                height: 100%;
                width: 100%;                    
                position: absolute;
                z-index: 31;
            }  
        .calend .plein_ecran,.agrandir
        {
            align-self: flex-start;
        }

    .calend .gestion_option
    {
        grid-area: 1/3/3/4;
        display: grid;
        grid-template: 20px 1fr 1fr 20px/ 20px repeat(6,1fr) 20px;
        gap: 5%;
        row-gap: 10%;
        padding: 2%;
        visibility: hidden;
    }
        .calend .retour_zero
        {
            grid-area: 1/3/3/5;
        }
        .calend .son_couper
        {
            grid-area: 1/5/3/7;
        }
        .calend .fermer
        {
            grid-area: 1/8/2/9;
        }
        .calend .reculer
        {
            grid-area: 3/2/5/4;
        }
        .calend .boucle
        {
            grid-area: 3/4/5/6;
        }
        .calend .avancer
        {
            grid-area: 3/6/5/8;
        }


/* fin mise en page calendrier basic */


/* la mise en page  playeur basic*/

.playeur .bloc_page_playeur
{
    display: flex;
    flex-direction: column;
    height: 80vh;
    width: 80%;
    margin: 10vh 10% 10vh 10%;
    gap: 1vh;
    position: absolute;
    border: 2px solid black;
    background-image: url(image/bois.jpg);
}
.playeur button,.playeur nav div
{
    border: 1px solid black;
}

    .playeur .gestion_taille
    {
        display: flex;
        justify-content: space-between;
        align-items: center;
        height: 12%;
        padding-left: 2%;
        padding-right: 2%;
        position: relative;
    }   
        .playeur .gestion_taille button
        {
            height: 50%;
            width: 3%;
        }
        .playeur #playeur_fermer
        {
            position: absolute;
            visibility: hidden;
            margin-left: 2%;
            margin-right: 2%;
        }
    .playeur .liste_music
    {
        height: 25%;
        display: flex;
        justify-content: center;
        align-items: center;
        position: relative;
        margin: 2.5%;
    }
        .playeur .cover
        {
            height: 100%;
            width: 16%;
            position: absolute;
            /* background-color: white; */
        }
            .playeur #jaquette1
            {
                transform: translateX(-225%) perspective(200px) rotateY(45deg) translateZ(-54px);
            } 
            .playeur #jaquette2
            {
                transform: translateX(-200%) perspective(200px) rotateY(45deg) translateZ(-54px);
            } 
            .playeur #jaquette3
            {
                transform: translateX(-175%) perspective(200px) rotateY(45deg) translateZ(-54px);
            } 
            .playeur #jaquette4
            {
                transform: translateX(-150%) perspective(200px) rotateY(45deg) translateZ(-54px);
            } 
            .playeur #jaquette5
            {
                transform: translateX(-125%) perspective(200px) rotateY(45deg) translateZ(-54px);
            } 
            .playeur #jaquette6
            {
                transform: translateX(-100%) perspective(200px) rotateY(45deg) translateZ(-54px);
            } 
            .playeur #jaquette7
            {
                transform: translateX(-75%) perspective(200px) rotateY(45deg) translateZ(-54px);
            } 
            .playeur #jaquette8
            {
                transform: translateX(-50%) perspective(200px) rotateY(45deg) translateZ(-54px);
            } 
            .playeur #jaquette9
            {
                transform: translateX(-25%) perspective(200px) rotateY(45deg) translateZ(-54px);
            } 
            .playeur #jaquette10
            {
                transform: translateX(0%) scale(1.2);
            }            
            .playeur #jaquette11
            {
                transform: translateX(25%) perspective(200px) rotateY(-45deg) translateZ(-54px);
            } 
            .playeur #jaquette12
            {
                transform: translateX(50%) perspective(200px) rotateY(-45deg) translateZ(-54px);
            } 
            .playeur #jaquette13
            {
                transform: translateX(75%) perspective(200px) rotateY(-45deg) translateZ(-54px);
            } 
            .playeur #jaquette14
            {
                transform: translateX(100%) perspective(200px) rotateY(-45deg) translateZ(-54px);
            } 
            .playeur #jaquette15
            {
                transform: translateX(125%) perspective(200px) rotateY(-45deg) translateZ(-54px);
            } 
            .playeur #jaquette16
            {
                transform: translateX(150%) perspective(200px) rotateY(-45deg) translateZ(-54px);
            } 
            .playeur #jaquette17
            {
                transform: translateX(175%) perspective(200px) rotateY(-45deg) translateZ(-54px);
            } 
            .playeur #jaquette18
            {
                transform: translateX(200%) perspective(200px) rotateY(-45deg) translateZ(-54px);
            } 
            .playeur #jaquette19
            {
                transform: translateX(225%) perspective(200px) rotateY(-45deg) translateZ(-54px);
            } 

    .playeur .gestion_boutons
    {
        height: 50%;
        width: 100%;
        display: flex;
        flex-direction: column;
        margin-top: 4%;
        margin-bottom: 4%;
    }
        .playeur #ligne1,.playeur #ligne2
        {
            flex: 50%;
            width: 100%;
            display: flex;
            justify-content: space-around;
            align-items: center;
        }
            .playeur .gestion_boutons button,.playeur .gestion_boutons .play_pause
            {
                height: 50%;
                width: 7.5%;
                position: relative;
            }  
                .playeur .gestion_boutons .play
                {
                    height: 100%;
                    width: 100%;
                    position: absolute;
                    z-index: 2;
                }  
                .playeur .gestion_boutons .pause
                {
                    height: 100%;
                    width: 100%;                    
                    position: absolute;
                    z-index: 1;
                }  

/* fin mise en page playeur basic */





/* la mise en page calendrier hover */

.calend *
{
    transition: all 0.4s, visibility 0s;
}

.couvercle:hover
{
    transition: all 0.4s;
    transform: scale(1.08) translateX(-20%) perspective(300px) rotateY(-55deg);
}


.calend button:hover
{
    transition: all 0.4s;
    transform: scale(1.1);
}
/* fin mise en page calendrier hover */






/* la mise en page playeur hover */



.playeur *
{
    transition: all 0.4s;
}

.playeur button:hover
{
    transition: all 0.4s;
    transform: scale(1.2);
}

.playeur .cover:hover
{
    transition: all 0.4s;
}

    .playeur #jaquette1:hover
    {
        transform: scale(1.2) translateX(-180%) perspective(200px) rotateY(45deg) translateZ(-54px);
        z-index: 40;
    }

    .playeur #jaquette2:hover
    {
        transform: scale(1.2) translateX(-160%) perspective(200px) rotateY(45deg) translateZ(-54px);
        z-index: 40;
    }
    .playeur #jaquette3:hover
    {
        transform: scale(1.2) translateX(-140%) perspective(200px) rotateY(45deg) translateZ(-54px);
        z-index: 40;
    }
    .playeur #jaquette4:hover
    {
        transform: scale(1.2) translateX(-120%) perspective(200px) rotateY(45deg) translateZ(-54px);
        z-index: 40;
    }
    .playeur #jaquette5:hover
    {
        transform: scale(1.2) translateX(-100%) perspective(200px) rotateY(45deg) translateZ(-54px);
        z-index: 40;
    }
    .playeur #jaquette6:hover
    {
        transform: scale(1.2) translateX(-80%) perspective(200px) rotateY(45deg) translateZ(-54px);
        z-index: 40;
    }
    .playeur #jaquette7:hover
    {
        transform: scale(1.2) translateX(-60%) perspective(200px) rotateY(45deg) translateZ(-54px);
        z-index: 40;
    }
    .playeur #jaquette8:hover
    {
        transform: scale(1.2) translateX(-40%) perspective(200px) rotateY(45deg) translateZ(-54px);
        z-index: 40;
    }
    .playeur #jaquette9:hover
    {
        transform: scale(1.2) translateX(-20%) perspective(200px) rotateY(45deg) translateZ(-54px);
        z-index: 40;
    }

    .playeur #jaquette10:hover
    {
        transform: scale(1.4);
    }

    .playeur #jaquette11:hover
    {
        transform: scale(1.2) translateX(20%) perspective(200px) rotateY(-45deg) translateZ(-54px);
        z-index: 40;
    }

    .playeur #jaquette12:hover
    {
        transform: scale(1.2) translateX(40%) perspective(200px) rotateY(-45deg) translateZ(-54px);
        z-index: 40;
    }
    .playeur #jaquette13:hover
    {
        transform: scale(1.2) translateX(60%) perspective(200px) rotateY(-45deg) translateZ(-54px);
        z-index: 40;
    }
    .playeur #jaquette14:hover
    {
        transform: scale(1.2) translateX(80%) perspective(200px) rotateY(-45deg) translateZ(-54px);
        z-index: 40;
    }
    .playeur #jaquette15:hover
    {
        transform: scale(1.2) translateX(100%) perspective(200px) rotateY(-45deg) translateZ(-54px);
        z-index: 40;
    }
    .playeur #jaquette16:hover
    {
        transform: scale(1.2) translateX(120%) perspective(200px) rotateY(-45deg) translateZ(-54px);
        z-index: 40;
    }
    .playeur #jaquette17:hover
    {
        transform: scale(1.2) translateX(140%) perspective(200px) rotateY(-45deg) translateZ(-54px);
        z-index: 40;
    }
    .playeur #jaquette18:hover
    {
        transform: scale(1.2) translateX(160%) perspective(200px) rotateY(-45deg) translateZ(-54px);
        z-index: 40;
    }
    .playeur #jaquette19:hover
    {
        transform: scale(1.2) translateX(180%) perspective(200px) rotateY(-45deg) translateZ(-54px);
        z-index: 40;
    }
/* fin mise en page playeur hover */







/* les z-index*/ 


/* calendrier */        
.calend .janvier .couvercle
{
    z-index: 30;
}
.calend .janvier .couvercle>span
{
    z-index: 29;
}
.calend .janvier .contenue
{
    z-index: 28;
}
.calend .janvier
{
    z-index: 27;
    background-color: white;
}
        

.calend .fevrier .couvercle
{
    z-index: 26;
}
.calend .fevrier .couvercle>span
{
    z-index: 25;
}
.calend .fevrier .contenue
{
    z-index: 24;
}
.calend .fevrier
{
    z-index: 23;
    background-color: white;
}


.calend .mars .couvercle
{
    z-index: 22;
}
.calend .mars .couvercle>span
{
    z-index: 21;
}
.calend .mars .contenue
{
    z-index: 20;
}
.calend .mars
{
    z-index: 19;
    background-color: white;
}


.calend .avril .couvercle
{
    z-index: 18;
}
.calend .avril .couvercle>span
{
    z-index: 17;
}
.calend .avril .contenue
{
    z-index: 16;
}
.calend .avril
{
    z-index: 15;
    background-color: white;
}
/* fin calendrier */

/* playeur */


.playeur .janvier
{
    z-index: 0;
    background-color: white;    
}

.playeur #jaquette1
{
    z-index: 1;
}

.playeur #jaquette2
{
    z-index: 2;
}
.playeur #jaquette3
{
    z-index: 3;
}
.playeur #jaquette4
{
    z-index: 4;
}
.playeur #jaquette5
{
    z-index: 5;
}
.playeur #jaquette6
{
    z-index: 6;
}
.playeur #jaquette7
{
    z-index: 7;
}
.playeur #jaquette8
{
    z-index: 8;
}
.playeur #jaquette9
{
    z-index: 9;
}
.playeur #jaquette10
{
    z-index: 10;
}
.playeur #jaquette11
{
    z-index: 9;
}
.playeur #jaquette12
{
    z-index: 8;
}
.playeur #jaquette13
{
    z-index: 7;
}
.playeur #jaquette14
{
    z-index: 6;
}
.playeur #jaquette15
{
    z-index: 5;
}
.playeur #jaquette16
{
    z-index: 4;
}
.playeur #jaquette17
{
    z-index: 3;
}
.playeur #jaquette18
{
    z-index: 2;
}
.playeur #jaquette19
{
    z-index: 1;
}


/* fin playeur */