:root {
  --topmenu-color: #666666;
  --text-color: black;
  --topmenu-hovercolor: #999999;
  --hilite-color: darkorange;
  /*--topmenu-text-color: white; */
  --sidebar-color: #cccccc;
  --gloss-color: #CC5500;
}
html {
			font-size:100.01%;
		}
		/* reset */
		html,body,div,span,applet,object,iframe,h1,h2,h3,h4,h5,h6,p,blockquote,pre,a,abbr,acronym,address,big,cite,code,del,dfn,em,font,img,ins,kbd,q,s,samp,small,strike,strong,sub,sup,tt,var,hr,b,u,i,center,dl,dt,dd,ol,ul,li,fieldset,form,label,legend,table,caption,tbody,tfont,thead,tr,th,td{padding:0;margin:0;border:none;outline:none;vertical-align:baseline;font-family:inherit;font-size:inherit;}dfn,i,cite,var,address,em{font-style:normal;}th,b,strong,h1,h2,h3,h4,h5,h6{font-weight:normal;}textarea,input,select{font-family:inherit;font-size:1em;}blockquote,q{quotes:none;}q:before,q:after,blockquote:before,blockquote:after{content:'';content:none;}ol,ul{list-style:none;}ins{text-decoration:none;}del{text-decoration:line-through;}table{border-collapse:collapse;border-spacing:0;}caption,th,td{text-align:left;}:focus{outline:none;}

		html, body {
			height:100%;
		}
 		body {
			font: 16px Tahoma, Verdana, Geneva, Arial, Helvetica, sans-serif;
			background: #fff;
		}
    p {
        max-width: 900px;
        padding-bottom: 15px;
        line-height: 1.5em;
    }
    p.header {
      max-width: none;
      color: white;
      padding-bottom: 15px;
      line-height: 1.5em;
      height: auto;
    }
    p.h0  {
        font-size: 24px;
        color: var(--hilite-color);
        padding-top: 10px;
        padding-bottom: 10px;
    }
    p.caption {
        color: var(--hilite-color);
        text-align: center;
    }  
    b {
        font-weight: bold;
    }

    i {
        font-style: italic;
    }
    sup {
        vertical-align: super;
        font-size: smaller; 
        font-size: smaller;
    }
    sub {
        vertical-align: sub;
        font-size: smaller;
    }
		header,    
		nav, 
		section, 
		article, 
		aside, 
		footer {
			display: block
		}
		h1 {
				font-size: 24px;
        color: var(--hilite-color);
        line-height: 1.4em;
        padding-top: 5px;
        padding-bottom: 5px;
			}
		h2 {
				font-size: 20px;
        color: var(--hilite-color);
        font-weight: bold;
        line-height: 1.4em;
        /*padding-top: 4px;
        padding-left: 5px; */
        padding-bottom: 4px;
        margin-bottom: 6px;
        /* background-color: var(--sidebar-color); */
			}
      h3 {
				font-size: 18px;
        color: var(--hilite-color);
        line-height: 1.4em;
        /*padding-top: 4px;
        padding-left: 5px;
        padding-bottom: 4px;
        margin-bottom: 6px; */
        /* background-color: var(--sidebar-color); */
			}
    a {
			color: var(--hilite-color);
			text-decoration: none
		}
		a:hover:not([name]) {
			color: var(--text-color);
         background-color: var(--sidebar-color);
      /*   padding: 4px; */
		}
    a.aname {
        color:var(--text-color);
        text-decoration:none;
    }
    a.topmenu {
      color: white;
      padding: 7px 15px 8px 15px;
      text-decoration: none;
    }
    a.topmenu:hover {
      color: var(--hilite-color);
      background-color: #ddddff;
      padding: 7px 15px 20px 15px;
      text-decoration: none;
    }
    a.navmenug {
        margin-left: 0px;
    }
    a.navmenugact {
        margin-left: 0px;
        color: red;
    }
    a.site_title {
        margin-left: 10px;
        font-size: 24px;
        font-weight: bold;
        color: white;
    }
    a.otherlesson {
      color: white !important;
      font-weight: bold;
    }
    ul {
        padding-left: 40px;
    }
    ul li {
      max-width: 800px;
        /*color : var(--hilite-color); */
        text-indent: -2.2em;
        margin-top: 4px;
        margin-bottom: 4px;
        line-height:1.8;
    }
    ul li:before {
        content:  '\25B6';
        color: var(--hilite-color);
        font-weight: bold;
        margin: 0 10px;
    }
    ul li.bare {
      text-indent: -2.2em;
    }
    ul li.bare:before {
        content:  '';
    }    ul li.index {
        text-indent: -3.8em;
    }
    ul li.index:before {
      content:  '\25B6';
      color: var(--hilite-color);
      font-weight: bold;
      font-size: 0.8em;
      margin: 0 10px;
    }
    ul li ul li {
      max-width: 800px;
      color : darkred;
      text-indent: -2.2em;
      margin-bottom:10px;
      line-height:22px;
    }
    ul li ul li:before {
      content:  '\25B6';
      color: darkred;
      font-weight: bold;
      font-size: 0.8em;
      margin: 0 10px;
   }

    ol {
        padding-left: 40px;
        list-style-type: numeric;
    }
    ol li {
        margin-bottom:10px;
        line-height:22px;
    }

    input::placeholder {
      color: var(--gloss-color);
    }

.important  {
    padding: 15px 15px;
    margin-top: 10px;
    margin-bottom: 10px;
    margin-right: 60px;
    margin-left: 50px;
    background-color:#FFFF99;
  }
div.consigne {
  display : none;
}

.bandeauTitre {
  color: white;
  background-color: var(--topmenu-color);
  font-size: 24px;
  font-weight: bold;
  padding: 12px 5px 0px 12px; 
  min-height: 35px;
  width: 100%;
  display: flex;
  align-items: left;
  vertical-align: middle;
  justify-content: left;
}

.bandeauMenu {
  color: white;
  background-color: var(--topmenu-color);
  height: 38px;
  margin: 0;
  padding: 0;
  width: 100%;
  display: flex;
  align-items: left;
  justify-content: left;
  position: sticky;
  top: 0;
  z-index: 1000;
}
   .topnav {
     width: 100%;
     overflow: visible;
     background-color: var(--topmenu-color);
     margin: 0;
     padding: 0;
     position: sticky;
     top: 0;
     z-index: 999;
   }

   .topnav h1 {
     overflow: visible;
     color: white;
     background-color: var(--topmenu-color);
     font-size: 24px;
     /*padding: 5px; */
     margin: 0px;
   }

   .topnav a {
     float: left;
     display: block;
     color: #f2f2f2;
     background-color: var(--topmenu-color);
     text-align: center;
     /*padding: 28px 10px; */
     text-decoration: none;
     font-size: 17px;
   }

   .topnav a:hover {
     background-color: var(--topmenu-hovercolor);
     color: var(--hilite-color);
     padding-bottom: 9px;
   }

   .topnav a.active {
     background-color: var(--topmenu-color);
     color: white;
   }

   .topnav .icon {
     padding: 5px 7px;
     color: white;
     display: none;
   }
/* The dropdown container */
.dropdown {
  float: left;
  overflow: hidden;
  cursor: pointer;
  z-index: 999;
}

/* Dropdown button */
.dropdown .dropbtn {
  font-size: 16px;
  border: none;
  outline: none;
  color: white;
  padding: 8px 10px;
  background-color: inherit;
  font-family: inherit; /* Important for vertical align on mobile phones */
  margin: 0; /* Important for vertical align on mobile phones */
}

/* Specify color to navbar links on hover */
.navbar a:hover, .dropdown:hover .dropbtn {
  color: var(--hilite-color);
  background-color: var(--topmenu-color);
}

/* Dropdown content (hidden by default) */
.dropdown-content {
  display: none;
  position: absolute;
  background-color: #f9f9f9;
  min-width: 100px;
  box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
  z-index: 999;
}

/* Links inside the dropdown */
.dropdown-content a {
  float: none;
  padding: 8px 16px;
  text-decoration: none;
  display: block;
  text-align: left;
}

/* Add a grey background color to dropdown links on hover */
.dropdown-content a:hover {
  background-color: var(--topmenu-color);
}

/* Show the dropdown menu on hover */
.dropdown:hover .dropdown-content {
  margin-top: 38px;
  display: block;
}

.container {
  display: flex;
  /*min-height: calc(100vh - 110px); /* Subtract the height of both headers */
  height: auto;
}

.sidebar {
  margin: 0;
  padding: 0;
  width: 200px;
  background-color: var(--sidebar-color);
  display: flex;
  flex-direction: column; 
  min-height: calc(100vh - 110px); /* Subtract the height of both headers */
  /* min-height: 100vh; /* Full height of the viewport */
  /*height: 100%; */
  overflow: auto;
}
.sidebar p {
  display: block;
  font-weight: bold;
  padding: 8px;
  text-decoration: none;
}
.sidebar a {
  display: block;
  color: black;
  padding: 5px 5px 5px 10px;
  text-decoration: none;
}

.sidebar a.active {
  background-color: var(--topmenu-color);
  color: white;
}

.sidebar a:hover:not(.active) {
  background-color: var(--topmenu-hovercolor);
  color: var(--hilite-color);
}

sidebar ul {
  list-style-type: square; /* Different bullet style */
  padding: 0;
  margin: 0;
}

sidebar li {
  color: white; /* Sidebar list item color */
  background-color: #007BFF; /* Background color for sidebar items */
  font-size: 14px;
  padding: 10px;
  border-radius: 5px; /* Rounded corners */
  margin-bottom: 5px; /* Space between items */
  display: block; /* Ensure items are block elements */
}

.content a {
   padding: 4px;
}

select option { padding: 1px 5px 1px 3px;}
/*section select option[selected]{ color:red #303030 ;} */
select option:nth-child(even) { background-color:#e5e5e5; }

.content {
   flex: 1; /* Fill the remaining space  */
   padding: 0px 10px;
   box-sizing: border-box;
   padding: 1px 16px;
   max-width: 1000px;
   overflow: auto;
   line-height:2;
}

.content p {
   color: var(--text-color);
   line-height: 1.8;
   padding-bottom: 10px;
}

.content th, td {
   vertical-align: top;
   line-height: 1.8;
}

.content a.gloss {
   color: var(--gloss-color);
   font-weight: bold;
}

p.grayFrame  {
  border:2px solid darkgray;
  margin-top: 5px;
  margin-bottom: 5px;
  padding: 5px 0px 5px 10px;
  
}
p.greenFrame {
  border:2px solid lime;
  margin-top: 5px;
  padding: 5px 0px 5px 10px;
}
.grayFrameSolid  {
  border:2px solid #C0C0C0;
  background-color:#C0C0C0;
  padding-left: 5px;
  padding-right: 5px;
  padding-top: 0;
  padding-bottom: 5px;
  margin-right:  100px;
}
p.redFrame {
  border:2px solid red;
  margin-top: 5px;
  padding: 5px 0px 5px 10px;
}
.think {
  font: 16px Tahoma, Verdana, Geneva, Arial, Helvetica, sans-serif;
  line-height: 25px;
  border:4px solid #99CCFF;
  padding-left: 5px;
  padding-right: 5px;
  padding-top: 5px;
  padding-bottom: 5px;
  margin-right:  100px;
}
.thinkpink {
  font: 16px Tahoma, Verdana, Geneva, Arial, Helvetica, sans-serif;
  border:4px solid DeepPink;
  padding-left: 5px;
  padding-right: 5px;
  padding-top: 5px;
  padding-bottom: 5px;
  margin-right:  100px;
}
p.showApplet  {
  color: blue;
  border-bottom: 3px solid violet;
  /* border-left: 3px solid violet; */
  background-color: white;
  padding-left: 5px; 
  padding-right: 5px;
  padding-top: 1px;
  padding-bottom: 3px;
  margin-left: 0px;
  margin-right:  300px;
  cursor: pointer;
}
p.corrApplet  {
  color: blue;
  border-bottom: 3px dotted violet;
  /*border-left: 3px dotted violet;*/
  background-color: white;
  padding-left: 5px; 
  padding-right: 5px;
  padding-top: 1px;
  padding-bottom: 3px;
  margin-left: 0px;
  margin-right:  300px;
  cursor: pointer;
}
.reinitApplet {
  color: blue;
  font-size: 80%;
}

.tablecont {
  display: flex;
  /*justify-content: space-between; */
  /*align-items: center; */
  margin: 10px 0px;
}

.tableL {
  flex: 1;
  min-width: 40%;
  margin-right: 10px; /* Space between columns */
}

.tableR {
  flex: 3;
  margin-left: 10px; /* Space between columns */
  flex-grow: 10;
  /*justify-content: flex-start; */
}

.tableimage img {
  /*max-width: auto; */
  width: 100%;
  /*height: auto; */
  vertical-align: top;
  display: inline;
}

.tableEnreg {
   margin-left:auto; 
   margin-right:auto;
 }
 .tdEnregCen{
    text-align: center;
 }

@media screen and (max-width: 700px) {
  .container {
      flex-direction: column; /* Stack sidebar and content vertically on narrow devices */
  }
  /*.topnav a:not(:first-child) {display: none;} */
  /*.topnav a {display: none;}*/
  .topnav a:not(:first-child), .topnav .dropdown > a {
    display: none;
}
  .topnav a.icon {
    float: right;
    display: block;
  }
  .topnav.responsive {position: relative;}
  .topnav.responsive .icon {
    position: absolute;
    right: 0;
    top: 0;
  }
  .topnav.responsive a {
    float: none;
    display: block;
    text-align: left;
  }
  .dropdown {
    display: inline-block;
    width: 100%;  
  }
  .dropdown:hover .dropdown-content {
    margin-top: 0px;
    margin-left: 30px;
    display: block;
  }
  .sidebar {
    width: 100%; /* Full width on narrow devices */
    min-height: auto;
    height: auto; /* Allow height to adjust based on content */
    position: relative; /* Ensure it is positioned correctly */
    display: flex; /* Use flexbox for the sidebar */
    flex-wrap: wrap; /* Allow items to wrap to the next line */
    flex-direction: row; /* Arrange items in a row */
  }
  .sidebar a {
    flex: 1 1 auto; /* Allow links to grow and shrink, taking up available space */
    margin: 1px; /* Add some margin between links */
    min-width: 10px; /* Set a minimum width for each link */
  }
  .important  {
    padding: 15px 15px;
    margin-top: 10px;
    margin-bottom: 10px;
    margin-right: 0px;
    margin-left: 0px;
    background-color:#FFFF99;
  }
  .showApplet  {
    margin-right:  0px;
  }
  .corrApplet  {
    margin-right:  0px;
  }
  }
  .reinitApplet  {
    margin-right:  0px;
  }
  .tablecont {
    display: flex;
    /*justify-content: space-between; */
    /*align-items: center; */
    margin: 10px 0px;
  }
  
  .tableL {
    flex: 1;
    min-width: 40%;
    margin-right: 10px; /* Space between columns */
  }
  
  .tableR {
    flex: 3;
    margin-left: 10px; /* Space between columns */
    flex-grow: 10;
    /*justify-content: flex-start; */
  }
  
  .tableimage img {
    /*max-width: auto;
    width: 100%;
    height: auto; */
    vertical-align: top;
    display: inline;
  }
  
  img {
    /*max-width: 100%;
    height: auto; */
    vertical-align: top; 
  }