/* **** Général ***************************************************************/
body
{
  counter-reset: h1 ;
	font-family:sans-serif;
	line-height:1.5;
  font-size: 16px;
}

p {
	page-break-inside: avoid;
}


li
{
  margin-bottom: 10px;
}

a
{
  text-decoration: none;
  color : blue;
  font-weight: bolder;
}

.jardin
{
  color : green;
  font-family: Verdana, Helvetica, sans-serif ;
  font-size : 150%;
  padding: 1vw;
}

.correction
{
  color: blue;
  margin-bottom: 10px;
}


.code {
  font-family:courier, sans-serif;
}
/* **** Agencement ************************************************************/
/* par blocs indépendants */

.bloc {
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
}

.bloc .fichier {

  border-style: solid;
  border-radius: 5vmin;
  border-width: 1vmin;
  border-color: grey;

  text-align: center;
  margin: 2vmin;
  padding: 2vmin;
}

/* Liste verticale de boutons  */

.lstbtn {
  display: flex;
  flex-direction: column;
}

.lstbtn-btn {
  border-style: solid;
  border-radius: 2vmin;
  border-width: 1vmin;
  border-color: grey;

  margin: 2vmin;
  /* padding: 2vmin; */
  width: 90vw;

  font-size: 3vmin;
  font-weight: bolder;
  line-height: 2;

}
/* Padlet */
.padlet
{
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  align-items: flex-start;
}

.padlet-pad {
  border-style: solid;
  border-radius: 5vmin;
  border-width: 1vmin;

  margin: 2vmin;
  /* padding: 2vmin; */
  width: 30vmin;
  height: 30vmin;

  font-size: 3vmin;
  font-weight: bolder;
  line-height: 2;

}

/* par blocs sur une même ligne */

.side {
  display: flex;
  flex-direction: row;
  flex-wrap: nowrap;
}


/* Tableaux */

.calcul {

}

.calcul td {
  padding-right: 20px;
}

/* Couleur */

.vert {
  color: rgba(0, 150, 75, 1);
  background-color:rgba(0, 150, 75, 0.3);
  border-color:rgba(0, 150, 75, 0.8);
}

.orange {
  color: rgba(255, 127, 0, 1);
  background-color:rgba(255, 127, 0, 0.3);
  border-color:rgba(255, 127, 0, 0.8);
}

.bleu
{
  color: rgba(0, 100, 200, 1);
  background-color:rgba(0, 100, 200, 0.3);
  border-color:rgba(0, 100, 200, 0.8);
}

.jaune
{
  color: rgba(240, 200, 0, 1);
  background-color:rgba(240, 200, 0, 0.3);
  border-color:rgba(240, 200, 0, 0.8);
}

.rouge
{
  color: rgba(190, 10, 10, 1);
  background-color:rgba(190, 10, 10, 0.3);
  border-color:rgba(190, 10, 10, 0.8);
}

.gris
{
  color: rgba(100, 100, 100, 1);
  background-color:rgba(100, 100, 100, 0.3);
  border-color:rgba(100, 100, 100, 0.8);
}

.rose
{
  color: rgba(255, 100, 200, 1);
  background-color:rgba(255, 100, 200, 0.3);
  border-color:rgba(255, 100, 200, 0.8);
}

.violet
{
  color: rgba(150, 0, 210, 1);
  background-color:rgba(150, 0, 210, 0.3);
  border-color:rgba(150, 0, 210, 0.8);
}

/* **** Titres ****************************************************************/
h1 {
	page-break-before:always ;
	font-size: 200%;
	color: navy;
	border-bottom: solid;
	counter-reset: h2 prop def met;
}

h2 {
	font-size: 120%;
	color: navy;
	border-bottom: solid;
	border-color: grey;
	border-bottom-width: 1pt;
	margin-top: 50px;
}

h2.A:before {
    content: "A" counter(h2) ". " ;
    counter-increment: h2 ;
}

h2.B:before {
    content: "B" counter(h2) ". " ;
    counter-increment: h2 ;
}

h2.C:before {
    content: "C" counter(h2) ". " ;
    counter-increment: h2 ;
}

.titre_page {
  font-size: 200%;
  color: rgba(100, 100, 100, 1);
  margin-bottom: 10px;
  padding-left : 1vw;
}

/* **** class de contenus *****************************************************/

.devoir_date
{
  font-weight: bold;
	margin-bottom: :30px;
  color: blue;
}

.TB
{
  color: green;
}

.DM
{
  color: orange;
}

/* **** Images et vidéos ******************************************************/

img
{
	padding-top : 1em;
	padding-left : 1%;
}

video
{
	display:  ;
	padding-top : 1em;
	padding-left : 5%;
}

/* **** class dédiée aux <table> de démonstrations ou calculs *****************/

/* 1 : connecteurs logiques */
/* 2 : contenu */
/* 3 : justification */
/* 4 : repère  */

.calc {
	/* table-layout: fixed; */
	border-collapse:collapse;
	/* width: 100%; */
	/* vertical-align : top; */
	/* display: inline-block; */
}

.calc td {
	/* border-width:1px; */
	/* border-bottom-style:dashed; */

	border-color:grey;
	/* vertical-align : top; */
	padding-bottom : 1em;
 }

.calc td:nth-child(2) {
  	padding-left: 5%;
}

.calc td:nth-child(3) {
  	padding-left: 5%;
}

.calc td:nth-child(4) {
  padding-left: 2%;
	border:none;
}


/* **** Listes  ***************************************************************/

ul {
  list-style-position: outside;
  list-style-type: disc;
	margin-top : none;
}


/* **** Les ceintures *********************************************************/

.bla {
    /* position: relative; */
}
.bla:after {

    content:  url('bla_belt_s.png')  ;

	/* display: inline-block; */

}


/* **** Les zones déroulantes *********************************************************/



label {
	text-decoration: none;
	/* color: #5c5d5e; */
  /* background-color: lightgrey; */
	margin-left: 25px;
  margin-bottom: 20px;
	position: relative;
	display: block;
  /* float: left; */
  /* clear: left;   */
  cursor: pointer;
}

label::before {
  display: block;
  position: absolute;
	color: lightgrey;
  font-family: 'FontAwesome';
  /* font-size: 25px; */
	left: -30px; /* done de la place pour le symbole */
}

label::before {
  content: '\f150';
}

/* input:checked + label::before {
  /* content: '\f07c'; /* open folder
} Ne fonctionne pas car label est avant le input.
*/

/* input {
  display: none;
} */

.question {
  padding: 2px;
  display: block;
  cursor: pointer;
}
.reponse {
  padding: 10px;
  display: none;
	border-left-color: lightgrey;
	border-left-style: solid;
	border-radius: 5px;
}

.reponse::before {
  position: absolute;
  clear: bottom;
  margin-left: 2px;
  font-family: 'FontAwesome';
	/* font-size: 25px; */
  color: lightgrey;
	left: -30px;
	content: '\f151'; /* open folder */
}

 input:checked + .reponse {
  display: block;
}

/* Masquage  */
.hidden>div {
	display:none;
}

.visible>div {
	display:block;
}