/*.MathJax {
      line-height: 1.6;
    letter-spacing: 1.05px;
    font-size: 150%;
}*/

/* ______________________________________________________________________________________________________ */
/* _____________________ Gray for policy ___________________________________*/
:root {
  --purple_hard: #EBC2FC;
  --yellow_hard: #FEF2C1;
  --brown_hard: #E3BEB3;
  --blue_hard: #AFCBE3;
  --green_hard:#C6FED1;

  --purple_soft: #F2E1F0;
  --yellow_soft: #FEFFE6;
  --brown_soft: #E7E3DF;
  --blue_soft: #DCE0F5;
  --green_soft:#DCF5EB;


  --gray0: #FDFDFD;
  --gray1: #DDDDDD;
  --gray2: #C1C1C1;
  --gray3: #7A7A7A;
  --gray4: #5A5A5A;
}



mark {
  background-color: rgb(165, 165, 165);
  color: black;

}
/* ______________________________________________________________________________________________________ */




/* ______________________________________________________________________________________________________ */
/* _____________________ Link ___________________________________*/
main #main {
  transition: margin-left .5s;
  padding: 16px;
}

main a:link {
  color: #000000;  text-decoration: underline;  cursor: auto;
}

main a:visited {
  color: #cccccc;
}

main a:link:active {
  color: #ff0000;
}

main a:visited:active {
  color: #0000ff;
}
/* ______________________________________________________________________________________________________ */



/* ______________________________________________________________________________________________________ */
/* _________________________ Title ________________________*/
main article  {
  background-color: #ddd;
  }

main article section {
  padding: 0 1%;
}

main article section .section_title {

}


main article section .section_title_h2 {/* toggleContainer*/
  cursor: pointer;
}
main article section .section_title_h2:hover {
color: #444;
}

main article section figure img {
  /*width: 100%;*/
}
/* ______________________________________________________________________________________________________ */




/* ______________________________________________________________________________________________________ */
/* ____________________ Tooltip _____________________ */
main .tooltip {
  text-decoration: none;
  position: relative;
}

main .tooltip span {
  display: none;
  -moz-border-radius: 6px;
  -webkit-border-radius: 6px;
  border-radius: 6px;
  color: black;
  background: white;
}

main .tooltip span img {
  float: left;
  margin: 0px 8px 8px 0;
}

main .tooltip:hover span {
  display: block;
  position: absolute;
  top: 0;
  left: 0;
  z-index: 1000;
  width: auto;
  max-width: 400px;
  min-height: 100px;
  border: 1px solid black;
  margin-top: 12px;
  margin-left: 32px;
  overflow: hidden;
  padding: 8px;
}
/* ______________________________________________________________________________________________________ */    



/* ______________________________________________________________________________________________________ */
/* _______________ Modal Images  ________________ */
.clearfix::after {
  content: "";
  clear: both;
  display: table;
}

.imgsmall {
  cursor: zoom-in;
  width: 100%;
    height: auto;
}

.imgsmall_left {
  float: left;
  cursor: zoom-in;
  width: 100%;
  max-width: 400px;
  height: auto;
}

.modal {
  z-index: 1;
  display: none;
  padding-top: 10px;
  position: fixed;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  overflow: auto;
  background-color: rgb(0,0,0);
  background-color: rgba(0,0,0,0.8);
}

.modal-content {
  margin: auto;
  display: block;
  position: absolute;
  top: 40%;
  left: 40%;
  transform: translate(-50%, -50%);
  transform: scale(4);
}

.modal-hover-opacity {
  opacity: 1;
  filter: alpha(opacity=100);
  -webkit-backface-visibility: hidden;
}

.modal-hover-opacity:hover {
  opacity: 0.60;
  filter: alpha(opacity=60);
  -webkit-backface-visibility: hidden;
}

.close {
  text-decoration: none;
  float: right;
  font-size: 24px;
  font-weight: bold;
  color: white;
}

    /* 100% Image Width on Smaller Screens */
@media only screen and (max-width: 700px) {
  .modal-content {
    width: 100%;
  }
}
/* ______________________________________________________________________________________________________ */



/* ______________________________________________________________________________________________________ */
/* _______________ General/Global________________ */

main .BGred{
  background:red;
}

main .BGgreen{
  background:green;
}

main .BGblue{
  background:blue;
}

main .BGred
main .BGblue
main .BGred{
  width: auto;
}
main div.equation{
  width: 250px;
}

main > .p {
    display: block;
    margin-block-start: 0em;
    margin-block-end: 0em;
    margin-inline-start: 0px;
    margin-inline-end: 0px;
}
/* ______________________________________________________________________________________________________ */



/* ______________________________________________________________________________________________________ */
/* _______________ Cadre type Logique ________________ */
.frame_axiome {
background: var(--purple_soft);
border-radius: 5px;
border: 2px solid var(--purple_hard);
}

.axiome {
color: var(--purple_hard);
}

.frame_postulat {
background: var(--yellow_soft);
border-radius: 5px;
border: 2px solid var(--yellow_hard);
}
.postulat {
color: var(--yellow_hard);
}

.frame_definition {
background: var(--gray1);
border-radius: 5px;
border: 2px solid var(--gray2);
}
.definition {
color: var(--blue_hard);
}

.frame_developpement_1 {
background: var(--gray0);
border-radius:0;
border: 2px solid var(--gray0);
}

.developpement_1 {
color: var(--gray0);
}

.frame_demonstration {
background: var(--green_soft);
border: 2px solid var(--green_hard);
}

.demonstration {
color: var(--green_hard);
}

.frame_lemme {
background: var(--gray0);
border-radius: 5px;
border: 2px solid red;
}

.lemme {
  color: red;
}

.frame_theoreme {
background: var(--brown_soft);
border-radius: 5px;
border: 2px solid var(--brown_hard);
}
.theoreme {
color: var(--brown_hard);
}

.frame_corollaire {
background: var(--gray0);
border-radius: 5px;
border: 2px solid red;
}

.corollaire {
  color: red;
}

.frame_propriete {
background: var(--gray0);
border-radius: 5px;
border: 2px solid red;
}

.propriete {
  color: red;
}
/* ______________________________________________________________________________________________________ */




/* ______________________________________________________________________________________________________ */


/* ______________________________________________________________________________________________________ */

/* _______________ Lesson Grid A imgAbove / textBelow ________________ */
main .grid_A {  display: grid;
  grid-template-columns: 1fr;
  grid-template-rows: 1fr;
  gap: 0px 0px;
  grid-auto-flow: row;
  height: 100%;
  margin: 0;
  grid-template-areas:
    " grid_A_imgAbove"
    " grid_A_txtBelow";}
main .grid_A_imgAbove { grid-area: grid_A_imgAbove; position: relative; display: inline; margin: auto;   }
main .grid_A_txtBelow {grid-area: grid_A_txtBelow; text-align: justify;  text-justify: inter-word;}

/* _______________ Lesson Grid B textAbove / imgBelow ________________ */
main .grid_B {
  display: grid;
  grid-template-rows: auto auto;
  grid-template-columns:  ;
  gap: 0px 0px;
  grid-auto-flow: row;
  grid-template-areas: 
    "grid_Y_textAbove"
    "grid_Y_imgBelow";}
main .grid_B_textAbove {grid-area: grid_B_textAbove; text-align: justify; margin: 10px;}
main .grid_B_imgBelow {grid-area: grid_B_imgBelow; margin: auto;}



/* _______________ Lesson Grid C imgRight / textLeft / textBelow ________________ */
main .grid_C {  display: grid;
  grid-template-columns: 1fr 1fr;
  grid-template-rows: 1fr 1fr;
  gap: 0px 0px;
  
  
 
  grid-template-areas:
    "grid_C_txtLeft grid_C_imgRight"
    "grid_C_txtBelow grid_C_txtBelow";}
main .grid_C_imgRight { grid-area: grid_C_imgRight; position: relative; display: inline; margin: 20px; }
main .grid_C_txtLeft { grid-area: grid_C_txtLeft; z-index:5; margin: auto; }
main .grid_C_txtBelow { grid-area: grid_C_txtBelow; margin: auto; }


/* _______________ Lesson Grid B imgLeft / textRight / textBelow ________________ */
main .grid_ {
  display: grid;
  grid-template-columns: auto auto;
  grid-template-rows: auto auto;
  gap: 0px 0px;
  grid-auto-flow: row;
  grid-template-areas: 
    "grid__imgLeft grid_B_textRight "
    "grid__txtBelow grid_B_txtBelow";}
main .grid__imgLeft {grid-area: grid__imgLeft; margin: auto;}
main .grid__textRight {grid-area: grid__textRight; text-align: justify; margin: 10px;}
main .grid__txtBelow {grid-area: grid__txtBelow; text-align: justify; margin: 10px;}

/* _______________ Lesson Grid D grid3picthorizontal ________________ */
main .grid_D {
  display: grid;
  grid-template-columns: auto;
  grid-template-rows: auto auto;
  gap: 0px 0px;
  grid-auto-flow: row;
  grid-template-areas: "text_above_D"
  "pict_D";}
main .text_above_D {  grid-area: text_above_D;text-align: justify;margin: 10px;}
main .pict_D_img {  width: 100%;  height: auto;}
main .pict_D {
  display: grid;
  grid-template-columns: auto auto autor;
  grid-template-rows: auto;
  gap: 0px 0px;
  grid-auto-flow: row;
  grid-template-areas: "img1_D img2_D img3_D";
  grid-area: pict_D;}
main .img1_D {  grid-area: img1_D;}
main .img2_D {  grid-area: img2_D;}
main .img3_D {  grid-area: img3_D;}
      /*

/* _______________ Lesson Grid E grid3pictveRtical ________________ */
main .grid_E {
  display: grid;
  grid-template-columns: auto auto;
  grid-template-rows: auto;
  gap: 0px 0px;
  grid-auto-flow: row;
  grid-template-areas: "text_aside_E pict_E";}
main .text_aside_E {  grid-area: text_aside_E;text-align: justify;margin: 10px;}
main .pict_E {
  display: grid;
  grid-template-columns: auto;
  grid-template-rows: auto auto auto;
  gap: 50px 0px;
  grid-auto-flow: row;
  grid-template-areas: "img1_E"
    "img2_E"
    "img3_E";
  grid-area: pict_E;}
main .img1_E {  grid-area: img1_E;}
main .img2_E {  grid-area: img2_E;}
main .img3_E {  grid-area: img3_E;}
      /*

/* _______________ Lesson Grid G ________________ */
main .grid_G {
  display: grid;
  grid-template-columns: auto auto;
  grid-template-rows: auto;
  gap: 0px 0px;
  grid-auto-flow: row;
  grid-template-areas: "text_aside_G pict_G";}
main .text_aside_G {  grid-area: text_aside_G;text-align: justify;margin: 10px;}
main .pict_G {  grid-area: pict_G;margin: auto;}
main .pict_G_img {  width: 100%;  height: auto;margin: auto;}

/* _______________ Lesson Grid H  ________________ */
 .grid_H {
  display: grid;
  grid-template-columns: auto auto auto;
  grid-template-rows: auto;
  gap: 0px 0px;
  grid-auto-flow: row;
  grid-template-areas: "pict_right_H text_middle_H pict_left_H";}
 .pict_right_H {  grid-area: pict_right_H;margin: auto;}
 .pict_left_H {  grid-area: pict_left_H;margin: auto;}
 .text_middle_H {  grid-area: text_middle_H;text-align: justify;margin: 10px}

/* _______________ Lesson Grid I  ________________ */
main .grid_I {
  display: grid;
  grid-template-columns: auto auto;
  grid-template-rows: auto auto;
  gap: 0px 0px;
  grid-auto-flow: row;
  grid-template-areas: "pict_left_I pict_right_I"
    "text_left_I text_right_I";}
main .pict_left_I {  grid-area: pict_left_I;margin: auto;}
main .pict_right_I {  grid-area: pict_right_I;margin: auto;}
main .text_left_I {  grid-area: text_left_I;text-align: justify;margin: 10px;}
main .text_right_I {  grid-area: text_right_I;text-align: justify;margin: 10px;}

/* _______________ Lesson Grid G  ________________ */
main .grid_ {  
  display: grid;
  grid-template-columns: auto;
  grid-template-rows: auto auto auto;
  gap: 5px 0px;
  grid-auto-flow: row;
  grid-template-areas:
    "text_below_G"
    "pict_G"
    "text_above_G";}
main .text_above_G { grid-area: text_above_G;text-align: justify;margin: 10px; }
main .text_below_G { grid-area: text_below_G;text-align: justify;margin: 10px; }
main .pict_G { grid-area: pict_G;margin: auto; }



/* ______________________________________________________________________________________________________ */
/* ____ Details __________________________________*/
.container {
  position: relative;
  display: block;
  width: 600px;
}

details {
  position: relative;
  width: auto;
  height: auto;
  overflow: hidden;
  max-height: 2.5em !important;
  transition: all 0.1s ease;
}

details ::-webkit-details-marker {
  display: none;
}

details > summary {
  position: relative;
  margin-top: 0.25em;
  color: #777;
  padding: 0.1em 0.5em 0.2em;
  background: #444;
}

details > summary:before {
  content: "⊞";
  color: #eee;
  font-size: 0.5em;
  margin-right: 0.5em;
}

details[open] > summary {
  background: #999;
  color: #eee;
}

details[open] > summary:before {
  content: "⊟";
  color: #ccc;
}

.folder {
  margin: 0 0 0.5em 0.86em;
  padding: 0.5em 0em 0.5em 1.5em;
  border-left: 0.1em #ccc dotted;
  border-bottom: 0.1em #ccc dotted;
}

.folder p {
  margin: 0;
}

details[open] {
  height: auto;
  max-height: 99em !important;
  transition: all 1.2s ease;
}

details:not([open]) .folder {
  height: 0px !important;
}
/* _______________________MathJax_______________________________________________________________________________ */

.mjx-container[jax="CHTML"][display="true"]{display: inline;

}

/* ______________________________________________________________________________________________________ */
/* ____ GoOnTop Btn  __________________________________*/
#myBtn {
  display: none;
  position: fixed;
  bottom: 100px;
  right: 30px;
  z-index: 99;
  font-size: 18px;
  border: none;
  outline: none;
  background-color: red;
  color: white;
  cursor: pointer;
  padding: 15px;
  border-radius: 4px;
}

#myBtn:hover {
  background-color: #555;
}
/* ______________________________________________________________________________________________________ */

.board{
  color: white;
/*border: 5px outset #464646;
background: #b4b4b4;*/
border-radius: 10px;
border: 5px ridge #464646;
background: #c4c4c4;

}