* {
	box-sizing: border-box;
}
html, body {
    font-size: 1em;
}
body {
    display: flex;
    width: 100%;
    flex-wrap: wrap;
    justify-content: center;
}
header {
    flex: 0 1 100%;
    display:flex;
    height: 130px;
    justify-content: center;
    background-color: #4a64fb;
    position: sticky;
}
.menu_chanson {
    flex: 1 1 auto;
    display: flex;
    max-width: 300px;
    flex-direction: column;
    padding-left: 10px;
    padding-top: 10px;
    align-items: center;
    align-content: center;
}
.menu_chanson img {
    max-width: 150px;
    margin-top: 25px;
    border: solid 2px #4a64fb;
    border-radius: 20px;
    padding: 3px;
}
.menu_chanson nav li a {
    text-decoration: none;
    font-size: 1.2rem;
    color:#4a64fb;
    font-weight: bold;
    padding: 5px;
}
.menu_chanson nav li a:hover {
    text-decoration:underline;
}
.clic {
    color: rgb(255, 255, 255) !important;;  
    background-color: #4a64fb;
    border-radius: 3px;
}
.menu_chanson nav li {
    margin-bottom: 5px;
    list-style-type: none;
}
article {
    flex: 1 1 70%;
    display: flex;
    flex-direction: column;
    align-items: center;
    align-content: center;
    max-width: 740px;
    border-right: 1px solid grey;
    border-left: 1px solid grey;
}
.header_bandeau>div {
    color: rgb(255, 255, 255);
    text-align: center;
    margin: auto 10px;
}
.header_bandeau div:first-child {
    flex: 0 1 auto;
}
.header_bandeau div:nth-child(2) {
    flex: 0 1 310px;
}
.header_bandeau div:nth-child(3) {
    flex: 0 1 150px;
}
.header_bandeau div:nth-child(4) {
    flex: 0 1 auto;
}
#canope {
    background-color: #b8f512;
    border: solid 2px grey;
    color: rgb(189, 114, 16);
}
#canope a {
color: rgba(19, 59, 221, 0.639);
}
.mode_emploi {
    border: dotted 4px grey;
    width: 600px;
    font-size: 1.1rem;
    padding: 10px;
    margin: 10px auto;
    border-radius: 8px;
    width: 90%;
}
.mode_emploi img {
    display: inline-block;
    vertical-align: middle;
}
.mode_emploi ol {
    padding-left: 20px;
}

h1 {
    font-size: 2rem;
    text-align: center;
}
h2 {
    font-size: 1.5rem;
    color: #4a64fb;
    text-decoration: underline #4a64fb;
    text-align: center;
    margin: 15px auto;
    max-width:1100px;
}
.enregistrements {
    display: flex;
   
    justify-content: center;
    align-items: center;
}
.enregistrements li {
    width: 140px;
    height:100px;
    list-style-type: none;
    margin: 20px;
    padding: 5px;
    text-align: center;
    border: solid 2px grey;
    
    border-radius: 5px;
}
#bandeau_partition {
    display: flex;
    align-items: center;
    align-content: center;
    height: 157px;
    border-top: solid 2px grey;
    border-bottom: solid 2px grey;
    padding: 2px;    
}
#bandeau_partition img{
    width: 100%;
}
#pas_a_pas {
    display: flex;
    flex-direction: column;
    /* border: solid 2px #4a64fb;
    border-radius: 20px;
    padding: 10px; */
    margin: 15px auto;
    /* background-color: rgb(247, 246, 244); */
    text-align: right;
    font-size: 1.2rem; 
}
.pas_a_pas_img {
   max-width: 100%;
}
#pas_a_pas li {
    list-style-type: none;
    margin-bottom: 3px;
    vertical-align: middle;
}
#pas_a_pas ul {
    display:flex;
    flex-direction: column;
    justify-content: center;
}
#pas_a_pas li.groupe {
    display:flex;
    justify-content: right;
    margin-bottom: 15px;
    margin-right: 2px;
}
#pas_a_pas li.groupe:last-of-type {
    margin-bottom: 0px;
}
#pas_a_pas li img {
    display: inline-block;
    vertical-align: middle;
    margin-left: 5px;
}
.crochet {
    width: 12px;
    border-style: solid;
    border-width: 2px 2px 2px 0px;
    border-color: blueviolet;
    flex: 0 0 auto;
}
#pas_a_pas a {
    text-decoration: none;
}
#pas_a_pas ul a:first-child {
    color:rgb(163, 81, 136);
}
#pas_a_pas a:nth-child(2) {
    color:rgb(0, 110, 255);
}
#pas_a_pas a:nth-child(3) {
    color:rgb(10, 128, 29);
}
#pas_a_pas a:nth-child(4) {
    color:rgb(190, 119, 11);
}
.realisation {
    max-width: 1100px;
    font-size: 0.8rem;
    font-style: italic;
    text-align: right;
    margin: 10px 40px 20px 10px;
}
.structure {
    max-width: 90%;
    margin: 10px auto;
}
.structure .groupe ul li {
    display: flex;
    flex-wrap: wrap;
    border: solid 2px gray;
    border-radius: 8px;
    font-size: 0.8em;
}
.structure .groupe ul li figure {
    margin: 0px;
    padding: 0px 10px;
}
.structure figcaption {
    text-align: center;
}
.narration {
    /* background-color: rgb(212, 224, 241); */
    max-width: 50%;
    margin: 10px auto 10px 10%;
    text-align: left;
    font-style: normal;
    color: rgb(31, 118, 232);
    justify-content: left;
    border-left: solid 2px gray;
    border-radius: 8px;
    padding:10px;
    font-size: 1.2rem;
}
.chant {
    background-color: rgb(247, 246, 244);
    border: solid 2px grey;
    padding: 10px;
    margin: 10px auto;
    border-radius: 8px;
    width: 90%;
}
.chant span.personnages {
    text-align: left;
    font-style: normal;
}
.narration span.personnages {
    text-align: left;
    color: rgb(82, 82, 82);
    margin-left: 30px;
    text-decoration: underline;
}
.personnages {
    display: block;
    align-self: flex-start;
    font-size: 1.2rem;
    font-weight:lighter;
    text-align: right;
    text-decoration: underline;
}
.narrateur {
    font-style: italic;
    color: rgb(122, 124, 126);
}
.libre img {
    margin: 0 auto;
    border: 1px solid;
}
.partenaires {
    display: flex;
    width: 750px;
    justify-content: center;
    flex-wrap: wrap;
    margin: 10px auto 0;
}
.partenaires li {
    width: 250px;
    height: 100px;
    flex: 0 1 auto;
}
#audio {
    position: sticky;
    top: 47px;
}
.plyr--audio {
    width: 220px;
	margin: 0px auto;
	border-radius: 15px;
	border: solid 2px;
	border-radius : 16px;
}
#objet_tempo {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-around;
    align-items: center;
    text-align: center;
    margin: 0 auto;
    padding: 3px;
    width: 160px;
    position: sticky;
    top: 3px;
}
.bouton_moins, .bouton_plus {
    width: 20px;
    height: 20px;
    font-size: 15px;
    font-weight: bold;
    margin: 0 auto;
    padding: 0;
}
.titre_tempo {
    width: 100%;
    margin: 0 auto;
}
.valeur_tempo {
    width: 30%;
    margin: 0 auto;
}
.plyr {
	border-color:#4a64fb;
	--plyr-audio-controls-background:#a5d4f650;
	--plyr-audio-control-color:#4a64fb;
	--plyr-audio-control-background-hover:hsla(231, 40%, 57%, 0.562);
	--plyr-range-fill-background:#4a64fb; /*pour la barre de défilement en cours*/
	--plyr-audio-progress-buffered-background:hsla(231, 40%, 57%, 0.562); /*pour la barre représentant le temps restant*/

	--plyr-video-controls-background:rgba(10, 2, 48, 0.123);
	--plyr-video-progress-buffered-background:hsla(231, 96%, 64%, 0.562);
	--plyr-video-control-background-hover:hsla(231, 96%, 64%, 0.562);
	--plyr-video-control-color:#ffffff;
}
#menu_pas_a_pas{
    display: flex;
    justify-content: center;
    align-content: center;
    flex-wrap: wrap;
    list-style-type:none;
}
#menu_pas_a_pas li{
    padding: 1px 5px;
    margin: 3px 3px;
    border: 1px solid black; 
}
#menu_pas_a_pas li a{
    text-decoration: none;
}