/*
design.css
---------
 
Pour le site jmt-musique.com
Fichier cr? le 25/02/2012
*/
/*/////////////////////// Commun ? tous les CCS de JMT/////////////////////////*/

/* f4f4f4 = gris TR? TR? CLAIR */
/* c0c0c0 = gris TR? CLAIR */
/* 909090 = gris clair */
/* 797979 = gris */
/* 444444 = gris fonc? */

/* ffa9a9 = rouge TRES CLAIR*/
/* ff6666 = rouge CLAIR*/
/* bc262c = rouge */
/* ff2020 = rouge FONC?*/


body {
	font-size: 16px;
}

h1 {
	text-align: left;
}
.sommaireFiche {
	display: inline-block;
	width: 300px;
	margin-left: 20px;
	float: right;
	background-color: #f6f6f6;
	text-align: left;
}


.sommaireMenu{
	display: flex;
	justify-content: space-between;
	height: 20px;
	align-items: center;
	margin-bottom: 5px;
	padding-bottom: 5px;
	border-bottom: 1px solid;

}
.sommairePied{
	height: 20px;
	text-align: center;
	margin-top: 5px;
	padding-top: 5px;
	margin-bottom:-3px;
	border-top: 1px solid;
}
.sommaireFiche a{
	color: #444;
}
.sommaireFiche a:hover{
	color: #bc262c;
	font-weight: bold;
}
.sommaireFiche td{
	min-width: 20px;
}






.sommaireBouttonLeft,
.sommaireBouttonRight,
.sommaireBouttonLeftInvalide,
.sommaireBouttonRightInvalide{
	display: inline-block;
	height: 100%;
	width : 15px;
	background-size: 100%;
	background-repeat: no-repeat;
}
.sommaireBouttonLeft{
	background-image: url('../harmonie_files/fiches/fiches_files/icons/triangle-back-black.png');
}
.sommaireBouttonLeft:hover{
	background-image: url('../harmonie_files/fiches/fiches_files/icons/triangle-back-red.png');
}
.sommaireBouttonRight{
	background-image: url('../harmonie_files/fiches/fiches_files/icons/triangle-for-black.png');
}
.sommaireBouttonRight:hover{
	background-image: url('../harmonie_files/fiches/fiches_files/icons/triangle-for-red.png');
}
.sommaireBouttonLeftInvalide{
	background-image: url('../harmonie_files/fiches/fiches_files/icons/triangle-back-gray.png');
}
.sommaireBouttonRightInvalide{
	background-image: url('../harmonie_files/fiches/fiches_files/icons/triangle-for-gray.png');
}

.sommaireTitre {
	display: inline-block;
}

.sommaireFiche tr,
.sommaireFiche td{
	padding-left: 0;
	vertical-align: middle;
}

.sommaireItem {
	display: block;
	margin: 6px 0;
}

.dividerSousSommaire {
	margin-bottom: 60px;
	border-top: solid 3px #ccc;
}






#chapeau, #chapeau p {
	font-size: 16px;
}

a:hover
{
	text-decoration: underline;
}

form div{
	margin: 10px 0;
}

fieldset {
	margin: 10px 0;
}

h3 {
	font-size: 18px;
	margin-bottom: 30px;
	font-weight: bold;
}
/* ------------------------  INPUTS --------------------------------*/
.bad {
	/* color: #f00; /*rouge VIF*/
}
.good {
	/* color: #0b0; /*vert SOMBRE*/
}

/* ----------------------  FIN INPUTS ------------------------------*/

/* --------------  FIELDSET  ------------ */

legend {
	font-weight: bold;
	margin-left : 12px;
	padding : 0px 10px;
}

legend.cadre {
	border: solid 2px;
	padding: 0px 30px;
}

fieldset.resume, fieldset.resume legend {
	background-color: #fafafa;
}


/* --------------  FIELDSET NOTE  ------------ */
.note{
	padding: 10;
}
.lienNote {
	display: inline-block;
	height: 20px;
	width: 100%;
	vertical-align: middle;
}

.bouttonNote {
	transition: all 1sec ease-out;
}
.note .titreNote{
	display: inline-block;
	height: 20px;
	font-weight: bold;
	vertical-align: middle;
}

.note .bouttonNote{
	display: inline-block;
	margin-right: 10px;
}
.bouttonNote img{
	height: 20px;
	width: 20px;
}
.note.open .bouttonNote img {
	transform: rotate(90deg);
}
.bouttonNote img {
	transition :  .3s ease-in-out;
}

.note .bouttonNoteUp{
	background-image:  url('../harmonie_files/fiches/fiches_files/icons/note-triangle-black-up.png');
	display: inline-block;
	height: 20px;
	width: 20px;
	min-width: 20px;
	background-repeat: no-repeat;
	background-position: bottom;
	background-size: 20px;
	margin-right: 10px;
}


.note.closed {
	width: 20%;
	min-width: 250px;
}
.note.open {
	background-color: #f4f4f4;
}

.note.closed:hover {
	background-color: #ccc;
	cursor: pointer;
}
.note.open .titreNote:hover {
	text-decoration: underline;
}

.note.open .lienNote {
	cursor: pointer;
}


.note.open .articleNote {
	content-visibility: visible;
	display: inline-block;
	opacity: 1;
}

.note.closed .articleNote {
	content-visibility: hidden;
	display : none;
	opacity: 0;
}
.articleNote {
	transition : all .8s ease-in-out;
}


/* --------------  FIELDSET NOTE  FIN -------- */


/* FORM exercices */

.checkBoxes div {
	text-align: left;
}

form.answer input[type="checkbox"],
form.answer select,
form.answer label
{
	pointer-events: none;
}

form.answer div.good.checked input[type="checkbox"]{
	background-color: green;
	border-color: green;
	color: green;
}


.comment{
	display: none;
}


form.answer div.checked .comment,
form.answer div.armure .comment{
	display: block;
	padding : 3px 25px;
}

form.answer div.armure.good .comment,
form.answer div.armure.good .nomTonalite
{
	color: green;
}
form.answer div.armure.bad .comment,
form.answer div.armure.bad .nomTonalite
{
	color: red;
}


form.answer div.good.checked .comment,
form.answer div.good.checked label
{
	color: green;
}

form.answer div.good.checked label{
	font-weight: bold;
}

form.answer div.bad.checked .comment,
form.answer div.bad.checked label
{
	color: red;
}

form.answer div.bad.checked label{
	text-decoration: line-through;
}

/* --------------TONALITE ------------ */

.tonalite {
	display: flex;
	align-items: center;
}

.fieldsets {
	display: flex;
  justify-content: center;
  flex-wrap: wrap;
  gap: 10px;
  /* min-width: 500px; */
}

.tonalite {
	flex-wrap: wrap;
}
.fieldsets>* {
  /* flex: 1 1 5px; */
}
.fieldsets .checkBoxes,
.fieldsets .porteesSimples{
	  flex: 1;
}

.fieldsets .checkBoxes{
	  min-width: 240px;
}

.fieldsets .porteesSimples{
	  min-width: 450px;
}


form.answer fieldset.porteesSimples div.good .iconCorrection,
form.answer fieldset.checkBoxes div.good.checked .iconCorrection,
form.answer fieldset.porteesJointes .iconCorrection.good
{
	background-image: url('../harmonie_files/fiches/fiches_files/icons/true.png');
}
form.answer fieldset.porteesSimples div.bad .iconCorrection,
form.answer fieldset.checkBoxes div.bad.checked .iconCorrection,
form.answer fieldset.porteesJointes .iconCorrection.bad
{
	background-image: url('../harmonie_files/fiches/fiches_files/icons/false.png');
}


.iconCorrection {
	display: inline-block;
	height: 20px;
	width: 20px;
	min-width: 20px;
}


/* –––––––––– exercices 01-1 -----–------- */



form.answer fieldset.checkBoxes .iconCorrection {
	display: inline-block;
	height: 20px;
	width: 20px;
	min-width: 20px;
	background-repeat: no-repeat;
	background-position: center;
	background-size: 14px;
}
/* –––––––––– exercices 01-1 FIN --------- */

/* –––––––––– exercices 01-2 -----–------- */
form.answer fieldset.porteesSimples .iconCorrection {
	display: inline-block;
	height: 50px;
	width: 50px;
	min-width: 50px;
	background-repeat: no-repeat;
	background-position: center;
	background-size: 20px;
}
/* –––––––––– exercices 01-2 FIN --------- */

/* –––––––––– exercices 01-3 -----–------- */
div.armure {
	display: flex;
	align-items: center;
}

.armure {
	flex-wrap: wrap;
}

span.bouttonMinus,
span.bouttonPlus
{
	display: inline-block;
	height: 50px;
	width: 50px;
	min-width: 50px;
	background-repeat: no-repeat;
	background-position: center;
	background-size: 32px;
}

span.bouttonMinus
{
	background-image: url('../harmonie_files/fiches/fiches_files/icons/round-back-bemol-gris.png');
}
span.bouttonPlus
{
	background-image: url('../harmonie_files/fiches/fiches_files/icons/round-forward-diese-gris.png');
}


span.bouttonMinus.valide:hover,
span.bouttonPlus.valide:hover
{
	cursor: pointer;
}


form.answer fieldset.porteesSimples div.armure span.iconCorrection {
	height: 20px;
	width: 20px;
	min-width: 20px;
}

span.bouttonMinus.valide
{
	background-image: url('../harmonie_files/fiches/fiches_files/icons/round-back-bemol.png');
}
span.bouttonMinus.valide:hover {
	background-image: url('../harmonie_files/fiches/fiches_files/icons/round-back-bemol-blanc.png');
}

span.bouttonPlus.valide {
	background-image: url('../harmonie_files/fiches/fiches_files/icons/round-forward-diese.png');
}
span.bouttonPlus.valide:hover {
	background-image: url('../harmonie_files/fiches/fiches_files/icons/round-forward-diese-blanc.png');
}


span.nomTonalite {
	padding: 0 16px;
	min-width: 90px;
}

div.armure span.porteeSimple {
	display : inline-block;
	width: 180px;
	height: 40px;
	background-repeat: no-repeat;
	background-position: center;
	background-size: 160px;
}
/* –––––––––– exercices 01-3 FIN --------- */


/* –––––––––– exercices 02-02 –––––––––––– */
.porteesJointes {
	padding-left: 50px;
}

.extraitPortee {
	min-width: 45px;
	max-width: 60px;
	margin: 0;

}

.extraitPortee img {
	min-width: 45px;
	max-width: 60px;
	margin: -3px;
}

.extraitPorteeSelect,
.iconCorrection
{
	display : inline-block;
	text-align: center;
	align-content: center;
	min-width: 45px;
	max-width: 60px;
	margin: -3px;
}
form.answer .porteeJointeIcones .iconCorrection {
	display: inline-block;
	height: 20px;
	width: 100%;
	min-width: 20px;
	background-repeat: no-repeat;
	background-position: center center;
	background-size: 16px;
}
form.answer .porteeJointeSelects .iconCorrection {
	display: inline-block;
	height: 20px;
	width: 100%;
	min-width: 45px;
	background-repeat: no-repeat;
	background-position: bottom;
	background-size: 16px;
}

.extraitPorteeSelect select {
	min-width: 45px;
	margin: -3px;
	text-align: center;
}

/* –––––––––– exercices 02-02 FIN –––––––– */

/* –––––––––– Ajout Exos 1 ––––––––––––––– */
.checkBoxes .iconCorrection {
	height: 20px;
	min-width: 20px;
	max-width: 20px;
}
/* –––––––––– Ajout Exos 1 FIN ––––––––––– */

.porteeSimple img {
	height: 50px;
}
.tonalite span.select {
	padding: 0 10px 0 20px;
}

form.answer .tonalite.bad select,
form.answer .tonalite.bad .suffixSelect
{
	color: red;
	/* text-decoration: line-through; */
}

form.answer .tonalite.good select,
form.answer .tonalite.good .suffixSelect
{
	/* font-weight: bold; */
}

form.answer .tonalite.good select,
form.answer .tonalite.good .suffixSelect,
form.answer .tonalite.good .comment
{
	color: green;
}

form.answer .tonalite.bad .comment{
	color: red;
}


form.answer .tonalite .comment{
	display: block;
	padding : 3px 25px;
}

/* --------------fin FIELDSET ------------ */


/* --------------  TABLE  ------------ */
.listeLiens th {
	padding-top : 10px;
}

.listeLiens td {
	padding-right : 10px;
}

article {
  flex: 1;
}
/* --------------fin TABLE ------------ */

/* ------------- BOUTTONS  ------------ */
fieldset.link {
	display : inline-block;
	text-decoration : none;
	background-color: #e9e9e9;
	min-width : 250px;
	height: 30px;
	text-align: center;
	padding: 0;

}

fieldset.link:hover {
	background-color: #c9c9c9;
	text-decoration : none;
	cursor: pointer;
}

fieldset.link input[type="submit"] {
	background: none;
	color: inherit;
	border: none;
	padding: 0;
	width : 100%;
	height: 100%;
	cursor: pointer;
	/* font: inherit;
	outline: inherit; */
	font-size: 16px;
}

.bouttons {
	display: flex;
	align-items: center;
	justify-content: space-between;
	/* justify-content: center; */
}

.bouttons a.large {
 	display: inline-block;
	width : 100%;
}

 .boutton.vide {
 	display : inline-block;
	width : 250px;
}

.boutton.large {
 	display: inline-block;
	width : 100%;
}

.boutton.large fieldset.link {
	margin : 0;
	padding : 0 0;
	width : 100%;
}
/* ----------  BOUTTON ENVOYER  ---------- */

.containerEnvoyer {
    margin-left: auto;
    margin-right: auto;
    width: 250px;
    border: 1px black solid;
    background-color: #f6f6f6;
}
.bouttonEnvoyer p {
	font-size: 8px;
}

.containerEnvoyer.hide {
    display: none;
}


.bouttonEnvoyer {
    margin-left: auto;
    margin-right: auto;
    padding: 5px;
    width: 200px;
}
.bouttonEnvoyer a{
	  background-color: #e9e9e9;
	  border: 1px black solid;
	  display: inline-block;
	  width: 100%;
	  padding: 5px;
	  text-align: center;
}
.bouttonEnvoyer a:hover{
	  background-color: #c9c9c9;
	  text-decoration: none;
}


/* ----------  fin BOUTTONS  ---------- */