:root {
--topmenu-color: darkblue;
--topmenu-hovercolor: #ddddff;
--text-color: darkblue;
--hilite-color: blue;
--sidebar-color: #ccccff;
}
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;
      color: var(--text-color);
			background: #fff;
		}
    p {
        color: var(--text-color);
        max-width: 900px;
        padding-bottom: 15px;
        line-height: 1.5em;
    }
    p.h0  {
        font-size: 24px;
        color: var(--text-color);
        padding-top: 10px;
        padding-bottom: 10px;
    }
    p.caption {
        color: var(--text-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(--text-color);
        padding-top: 10px;
        padding-bottom: 10px;
			}
		h2 {
		  font-size: 20px;
        color: var(--text-color);
        padding-top: 4px;
        padding-left: 5px;
        padding-bottom: 4px;
        margin-bottom: 6px;
        background-color: var(--topmenu-hovercolor);
			}
    a {
			color: var(--hilite-color);
			text-decoration: none
		}
		a:hover:not([name]) {
			color: var(--text-color);
         background-color: #ddddff;;
      /*text-decoration: underline; */
		}
    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(--text-color);
      background-color: #ddddff;
      padding: 7px 15px 10px 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;
    }
    ul {
        padding-left: 40px;
    }
    ul li {
      max-width: 800px;
        color : var(--text-color);
        text-indent: -2.2em;
        margin-bottom:10px;
        line-height:22px;
    }
    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: darkblue;
      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;
    }

.important  {
    padding: 15px 15px;
    margin-top: 10px;
    margin-bottom: 10px;
    margin-right: 60px;
    margin-left: 50px;
    background-color:#FFFF99;
  }
  
.bandeauTitre {
  color: white;
  background-color: var(--topmenu-color);
  font-size: 24px;
  font-weight: bold;
  padding: 12px;
  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(--text-color);
   }

   .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: darkblue;
  background-color: #ccccff;
}

/* 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;
  /*color: darkblue; */
  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: #ccccff;
}

/* 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:  var(--text-color);
  padding: 8px 5px 8px 10px;
  text-decoration: none;
}

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

.sidebar a:hover:not(.active) {
  background-color: #e3e3fb;
  color: var(--topmenu-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 {
flex: 1; /* Fill the remaining space  */
padding: 0px 10px;
box-sizing: border-box;
padding: 1px 16px;
max-width: 1000px;
overflow: auto;
}

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

.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;
}

@media screen and (max-width: 700px) {
  .container {
      flex-direction: column; /* Stack sidebar and content vertically on narrow devices */
  }

  .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 */
  }
  .tablecont { /* Contents of a table */
    flex-direction: column; /* Stack items vertically on small screens */
    align-items: flex-start; /* Align items to the start */
  }

  .tableL { /* Left column */
    margin-right: 0; /* Remove right margin */
    margin-bottom: 20px; /* Add space below text */
    min-width: 500px;
  }

  .tabletR { /* Right column */
    margin-left: 0; /* Remove left margin */
    margin-bottom: 20px; /* Add space below text */
  }
  img {
    max-width: 100%;
    height: auto;
    vertical-align: top;
  }
}