@charset "utf-8";
/* CSS Document */
/*____________________________________________
Style communs à toutes les pages du site
----------------------------------------------*/

*, ::before, ::after {
	box-sizing: border-box;
	margin : 0px;
	padding: 0px;
}
html {
	overflow-y: scroll;
}

nav {
	justify-content: center;
	align-content: center;
	margin: 15px auto;
	
}
header {
	display:flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	margin : 0px auto;
	background-color:rgb(214,136,20,0.83);
	border-top: 3px solid;
	border-bottom: 4px solid;
	border-color: #7D4F0B;
	height: 110px;
}
#bandeau_menu {
	display:flex;
	margin-top: 15px;
	justify-content: center;
}
h1 {
	line-height: 25px;
	font-size: 1.8em;
	text-align: center;
	vertical-align: middle;
	color:#FFFFFF;
}
h2 {
	font-style: italic;
	font-size: 1.4rem;
	color: #7D4F0B;
	border-bottom: 1px solid #7D4F0B;
	padding-left: 0px;
	margin: 20px 40px 15px 40px;
}
h3{
	font-size: 1em;
	color: #7D4F0B;
}
div.menu_domaine {
	margin: auto;
	z-index: 10;
}
article {
	max-width: 760px;
	padding: 20px 20px 0px 20px;
	margin: 15px auto;
	border: 4px solid;
	border-color:#7D4F0B;
	border-radius: 20px;
	background-color: rgba(255,255,255,0.6);
}
article p{
	margin-bottom:8px;
	text-indent: 20px;
}
article ol{
	padding-left: 50px;
	margin: 20px auto;
}

article #texte_enseignants {
	padding: 8px 20px 0px 20px;
	margin : 0px -20px;
}
.mail-cpem {
	display: flex;
	justify-content: space-around;
	margin-bottom: 15px;
}
.mail-cpem div {
	text-align: center;
	width: 250px;
}
/* _____________________________________________________
Style spécifique au titre de la page d'accueil
-------------------------------------------------------*/
body.accueil h1 {
	line-height: 30px;
	font-size: 1.6rem;
}
article .colonnes {
	display: flex;
	flex-direction: row;
	justify-content: space-around;
}
article .colonnes *{
	text-align: center;
	text-indent: 0px;
	flex: 1;
}
video, iframe.youtube,figure img{
	display: block;
	margin: 0px auto;
	border :2px solid;
	padding: 5px;
}
audio {
	display: block;
	margin: 0px auto;
}
/*personnalisation générale du lecteur audio*/
.plyr--audio {
	width: 350px;
	margin : 0px auto;
	border-radius: 15px;
	border: solid 2px;
	margin : 4px auto;
	border-radius : 16px;
}
.plyr--video {
	width : 500px;
	margin : 0px auto;
} 
figure {
	text-align: center;
	margin:10px auto;
}
figcaption{
	color: #69170a;
	font-style:oblique;
	font-size:0.8em;
	margin-top:5px;
}
.habillage img{ /*Pour habiller une image par du texte*/
	float:left;
	max-height: 150px;
	margin: 0px 15px;
	padding:5px;
	border :1px solid black;
}
#boutons_afficher{
	display: flex;
}
#bouton1, #bouton2{
	flex: 1 1;
	text-align: center;
	margin:10px;
}
#bouton3, #bouton4 {
	flex: 1 1;
	text-align: center;
	margin:10px auto;
	width: 80%;
	padding: 20px;
}
#bouton3 div, #bouton4 div{
	margin:10px auto;
	border: 2px solid rgb(17, 75, 123);
	border-radius: 10px;
	background-color: rgba(14, 81, 135, 0.244)
}
td, th {
	padding: 0 8px 0 8px;
}
td:first-child {
	text-align:right;
}
td:first-child+td {
	text-align:center;
	width: 4px;
}
td:first-child+td+td {
	text-align:left;
}
th:first-child {
	text-align:right;
}
th:first-child+th+th {
	text-align:left;
}
#mail_cpem td{
	max-width:800px;
	vertical-align: top;
	text-align: center;
}
/*texte destiné seulement aux enseignants*/
  
  fieldset.cadre_enseignants{
	max-width:600px;
	border:2px solid rgb(13, 90, 144);
	border-radius:8px;
	padding : 0px 5px;
	background-color:#a5d4f650;
	margin:0px auto 10px;
	text-align:center;
  }
  fieldset.cadre_enseignants p{
	text-indent:0px;
	color:#0D5A90;
  }
  legend.legende_enseignants p {  	
 	padding:0px 10px;
	color:#0D5A90;
	font-size:1em;
	font-weight: 700;
	text-indent:0px;
  }
  /*--------------------------------------*/
#contributeurs, #contributeurs2 {
	text-align: center;
	padding: 12px 0px;
	margin: 0px -20px;
	border-top: 2px solid #0D5A90 ;
	border-bottom-left-radius: 16px;
	border-bottom-right-radius : 16px;
	background-color: rgba(20,130,209, 0.83);
	color: #FFFFFF;
}
#contributeurs a,  #contributeurs2 a {
	color:#FFFFFF;
	text-decoration-color: #FFFFFF;
}
footer {
	display:block;
	margin : auto;
	flex: 1 1 100%;
}
#copyright {
	font-size: 0.8em;
	width:750px;
	text-align: right;
	font-style: italic;
}
/* _____________________________________________________
Style spécifique aux pages de la bulle musicale
-------------------------------------------------------*/

.bulle header {
	background-color: rgba(20,130,209,0.83);
	border-color: #0D5A90;
}
.bulle article {
	border-color:#0D5A90;
}
.grille {
	display: grid;
	grid-column-gap: 10px;
	grid-template-columns: 5fr 1fr;
}
.bulle h2 {
	color: #0D5A90;
	border-bottom-color: #0D5A90;
}
.bulle h3{
	color: #0D5A90;
}
.bulle .texte_bulle {/*Pour créer un effet bulle sur un texte*/
	border: 2px solid #0D5A90;
	padding: 6px 6px;
	border-radius:28px;
	background-color: rgba(20,130,209,0.33);
}
.bulle .prononciation {/*Pour créer un effet bulle sur le P*/
	
	font-size:0.8em;
	border: 2px solid #0D5A90;
	padding: 2px 6px;
	border-radius:28px;
	background-color: rgba(20,130,209,0.33);
}
.bulle .prononciation a p{
	tab-size: 5;
	text-decoration: none;
}
/*.bulle fieldset{
	border:none;
}
.bulle legend{
	color: white;
	padding : 0px 5px;
	border : 2px solid #0D5A90;
	border-radius: 8px;
	font-style:italic;
	background: rgba(20,130,209, 0.83);	
}*/
.bulle #texte_enseignants {
	border-top: 2px solid #0D5A90;
	border-bottom: 2px solid #0D5A90;
	background-color:rgba(165, 212, 246, 0.445);
}

.bulle article ul{
	margin: 0px 0px 10px 50px;
}
.bulle video,.bulle iframe.youtube,.bulle figure img{
	border-color: rgba(13,90,144,1.00);
}
.bulle figcaption{
	color: rgba(13,90,144,1.00);
}
.image_bulle{ /*Pour créer un effet bulle sur une image*/
	overflow:hidden;
    -webkit-border-radius:100px;
    -moz-border-radius:100px;
	border:2px solid #0D5A90;
    border-radius:100px;
    width:190px;
    height:190px;
}
.habillage .image_bulle {
	float:right;
	margin: 20px 40px 20px 20px;
}
.dialogue{
	font-size:1em;
	color:red;
}
.promenade {
    background-color: rgba(82, 238, 82, 0.534);
    margin: 20px -20px;
    text-align: left;
    font-style: normal;
    color:rgb(0, 0, 0);
    border-top: solid 2px #0D5A90;
	border-bottom: solid 2px #0D5A90;
    /* border-radius: 8px; */
    padding:10px;
    font-size: 1rem;
	overflow: hidden;
}
.promenade h2 {
	border: 0px;
	text-decoration: underline;
	font-style: normal;
	margin: 0 auto;
}
.bulle .plyr {
	border-color:#0D5A90;
	--plyr-audio-controls-background:#a5d4f650;
	--plyr-audio-control-color:#0d5990;
	--plyr-audio-control-background-hover:rgba(20,130,209,0.83);
	--plyr-range-fill-background:#0d5990; /*pour la barre de défilement en cours*/
	--plyr-audio-progress-buffered-background:#A5D4F6; /*pour la barre représentant le temps restant*/

	--plyr-video-controls-background:rgba(10, 2, 48, 0.123);
	--plyr-video-progress-buffered-background:#A5D4F6;
	--plyr-video-control-background-hover:rgba(20,130,209,0.83);
	--plyr-video-control-color:#ffffff;
}
.bulle .colonnes .plyr--audio {
	width:220px;
}
div.pasapas div.colonnes figure:nth-child(3) .plyr{
	--plyr-audio-controls-background:#8ef3817e;
}
article.promenades .plyr--audio {
	width:180px;
}
.bulle .bouton {
	border: 0;
    line-height: 2.5;
    padding: 0 20px;
    font-size: 1rem;
    text-align: center;
    color: #fff;
    text-shadow: 1px 1px 1px #000;
    border-radius: 10px;
    background-color: rgba(20,130,209,0.83);
}
/* _____________________________________________________
Style spécifique aux pages de Flash Bulle
-------------------------------------------------------*/

.flash_bulle header{
	background-color: rgba(214, 35, 205, 0.83);
	border-color: #8a0d8e;
}
.flash_bulle article{
	border-color:#8a0d8e;
}
.flash_bulle article ul{
	margin-left: 150px;
}
.flash_bulle h2 {
	color: #8a0d8e;
	border-bottom-color: #8a0d8e;
}
.flash_bulle h3{
	color: #8a0d8e;
}
.flash_bulle article ul li{
	margin:10px auto;
}
.flash_bulle #contributeurs {
	border-top: 2px solid #8a0d8e;
	background-color: rgba(209, 20, 193, 0.83);
}
.flash_bulle video,.flash_bulle iframe.youtube,.flash_bulle figure img{
	border-color : #8a0d8e;
}
.flash_bulle figcaption{
	color: #8a0d8e;
}
.flash_bulle fieldset.cadre_enseignants{
	border-color:#8a0d8e;
	background-color:#f2aff548;
}
.flash_bulle fieldset.cadre_enseignants p{
	color:#8a0d8e;
}
.flash_bulle legend.legende_enseignants p {  	
 	color:#8a0d8e;
}
.flash_bulle .plyr {
	border-color:#8a0d8e;
	--plyr-audio-controls-background:rgba(209, 20, 193, 0.158);
	--plyr-audio-control-color:#8a0d8e;
	--plyr-audio-control-background-hover:rgba(209, 20, 193, 0.83);
	--plyr-range-fill-background:#8a0d8e; /*pour la barre de défilement en cours*/
	--plyr-audio-progress-buffered-background:rgba(202, 124, 196, 1.00) ; /*pour la barre représentant le temps restant*/

	--plyr-video-controls-background:rgba(10, 2, 48, 0.123);
	--plyr-video-progress-buffered-background:rgba(202, 124, 196, 1.00) ;
	--plyr-video-control-background-hover:rgba(209, 20, 193, 0.83);
	--plyr-video-control-color:#ffffff;
}
.flash_bulle .grille .plyr--audio {
	width:150px;
}
/* _____________________________________________________
Style spécifique aux pages de musiquez à la maison
-------------------------------------------------------*/

.musiquez header{
	background-color: rgba(173,17,178,0.83);
	border-color: #8A0D8E;
}
.musiquez article{
	border-color:#8A0D8E;
}
.musiquez article ul{
	margin-left: 150px;
}
.musiquez h2 {
	color: #AD11B2;
	border-bottom-color: #8A0DBE;
}
.musiquez article ul li{
	margin:10px auto;
}
.musiquez #contributeurs {
	border-top: 2px solid #8A0D8E;
	background-color: rgba(173,17,178,0.83);
}
.musiquez video,.musiquez iframe.youtube,.musiquez figure img{
	border-color : #8A0D8E;
}
.musiquez figcaption{
	color: #AD11B2;
}
.musiquez .plyr {
	border-color:#8A0D8E;
	--plyr-audio-controls-background:rgba(173, 17, 178, 0.158);
	--plyr-audio-control-color:#8A0D8E;
	--plyr-audio-control-background-hover:rgba(173,17,178,0.83);
	--plyr-range-fill-background:#8A0D8E; /*pour la barre de défilement en cours*/
	--plyr-audio-progress-buffered-background:rgba(216,153,220,1.00) ; /*pour la barre représentant le temps restant*/

	--plyr-video-controls-background:rgba(10, 2, 48, 0.123);
	--plyr-video-progress-buffered-background:rgba(216,153,220,1.00) ;
	--plyr-video-control-background-hover:rgba(173,17,178,0.83);
	--plyr-video-control-color:#ffffff;
}
.musiquez .grille .plyr--audio {
	width:150px;
}
/* _____________________________________________________
Style spécifique à la page ressources
-------------------------------------------------------*/
.ressources header{
	background-color: rgba(179, 190, 21, 0.83);
	border-color: #666D09;
}
.ressources article{
	border-color: #666D09;
}
.ressources h2{
	color: #666D09;
	border-bottom-color: #666D09;
}
.ressources .grille {
	grid-row-gap: 10px;
	grid-template-columns: 7fr 1fr 7fr;
	text-align: center;
	align-items: center;/*pour centrer les div verticalement*/
	margin: 0px 20px 0px 0px;
}
.ressources figure img{
	max-width: 280px;
	max-height: 100px;
	border-color :#666D09;
	padding: 5px;
	justify-self: end; /*pour aligner une div à droite*/ 	
}
.ressources .grille a{
	text-decoration: none;
}
.ressources .grille p{
	text-align: justify;
	text-indent: 0px;
	padding: 0px 5px;
	border-left:2px solid #666D09;
}
.ressources .texte_bulle {
	border: 2px solid #666D09;
	padding: 10px 11px 10px 17px;
	border-radius:45px;
	background-color: #CFE393;
	margin:0px;
}
.fleche {
    width: 0px;
    height: 0px;
    border-top: 14px solid transparent;
    border-bottom: 14px solid transparent;
    border-left: 22px solid #666D09;
	
}
.ressources figcaption{
	color: #666D09;
}

/* _____________________________________________________
Style spécifique aux pages du calendrier musical
-------------------------------------------------------*/
.article_papillote {
	background-color: #69170a79;
}
.calendrier {
	background-image: url("/papillote/jours_de_fete.jpg");
	background-size: 100%;
}
.calendrier header {
	background-color: rgba(250, 235, 215, 0.83);
	border-color: #69170a;
}
.calendrier article {
	border-color:rgba(250, 235, 215, 0.83);
}
.calendrier header h1 {
	color: #69170a;
}
.calendrier h2 {
	color:#69170a;
	border-bottom-color: #69170a;
}
.encadrer{
	border : 1px solid #69170a;
	padding: 1px;
}
.calendrier video,.calendrier iframe.youtube,.calendrier figure img{
	border-color : #69170a;
}
.calendrier figcaption{
	color: #69170a;
}
.calendrier #contributeurs, .calendrier #contributeurs2 {
	border-top: 2px solid rgba(250, 235, 215, 0.83);
	background-color: #69170a;
}
.calendrier .plyr {
	border-color:#69170a;
	--plyr-audio-controls-background:#69170a4d;
	--plyr-audio-control-color:#69170a;
	--plyr-audio-control-background-hover:#69170a77;
	--plyr-range-fill-background:#69170a; /*pour la barre de défilement en cours*/
	--plyr-audio-progress-buffered-background:rgba(250, 235, 215, 0.83) ; /*pour la barre représentant le temps restant*/

	--plyr-video-controls-background:rgba(10, 2, 48, 0.123);
	--plyr-video-progress-buffered-background:rgba(250, 235, 215, 0.83) ;
	--plyr-video-control-background-hover:#69170a77;
	--plyr-video-control-color:#ffffff;
}
.calendrier .plyr--audio {
	width:50px;
}
/* **************************************
Pour les PAS à PAS
************************************** */
.pasapas {
	text-align: right;
    font-size: 1rem;
}
.pasapas li {
    list-style-type: none;
    margin-bottom: 3px;
    vertical-align: middle;
}
article .pasapas ul {
    display:flex;
    flex-direction: column;
    justify-content: center;
	margin: 0px;
}
.pasapas li.groupe {
    display:flex;
    justify-content: right;
    margin-bottom: 15px;
    margin-right: 2px;
}
.pasapas li.groupe:last-of-type {
    margin-bottom: 20px;
}
.pasapas 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;
}
div.images div {
	padding: 10px;
}
div.images div img {
    width: 150px;
    border: solid 2px #0d5990;
}
.pasapas a {
    text-decoration: none;
}
.pasapas ul a:first-child {
    color:rgb(163, 81, 136);
}
.pasapas a:nth-child(2) {
    color:rgb(0, 110, 255);
}
.pasapas a:nth-child(3) {
    color:rgb(10, 128, 29);
}
.pasapas a:nth-child(4) {
    color:rgb(190, 119, 11);
}
.banniere {
	border: solid 2px white;
	background-color: #000;
	position: fixed;
	bottom: 0;
	left: 0;
	width: 100%;
	color: white;
	display:flex;
	justify-content: space-around;
	padding: 30px;
	font-family: 'Signika Negative',sans-serif;
}
.text-banniere p{
	font-size: large;
}
.button-banniere {
	padding-top:15px;
}
.button-banniere a{
	border: solid 1px red;
	padding: 10px;
	background: red;
	border-radius: 7px;
	color: white;
	text-decoration: none;
}
/****************************************/
/*Pour Les Pas à Pas comme les Pas à Pas*/
/****************************************/
.enregistrements {
    display: flex;
    justify-content: flex-start;
    align-items: flex-start;
    margin: 10px 0px 20px 50px;
}
.enregistrements li {
    width: 140px;
    height:80px;
    list-style-type: none;
    margin: 0px 20px;
    padding: 5px;
    text-align: center;
    border: solid 2px grey;
    border-radius: 5px;
}
#pas_a_pas {
    /* border: solid 2px #4a64fb;
    border-radius: 20px;
    padding: 10px; */
    margin-top: 15px;
    /* background-color: rgb(247, 246, 244); */
    text-align: right;
    
}

#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);
}
.separateur {
	border: 10px dotted rgba(28, 54, 141, 0.913);
	margin: 10px 0px;
	border-radius: 10px;
	
}