body {
 margin:0; 
 padding:0; 
 border:none;
 z-index: 0;
}
/* Decor Styles */
.Stars {
 position: Fixed;
 top: 0;
 left:0; 
 width:100%; 
 height:130px; 
 z-index:1;
 font-size:100%;
 margin:0;
 padding:0; 
 display: block;
 visibility: visible;
 background-color: navy;
 background-image:URL(/Ox/Img/FondNoirBleuNoir.jpg);
 background-position:top; 
 background-repeat:repeat;
 z-index: 2;
}
/*images*/
figure { /*Right side container*/
 float: right;
 width: 300px;
 height: 308px;
 margin-left: 20px;
 /* Space between text and image */
 background-color: #e0e0e0;
 display: flex;
 justify-content: center;
 align-items: center;
}
figureLeft { /*Left side container*/
 float: left;
 width: 300px;
 height: 308px;
 margin-right: 20px;
 /* Space between text and image */
 background-color: #e0e0e0;
 display: flex;
 justify-content: center;
 align-items: center;
}
img {
 max-width: 100%;
 max-height: 100%;
}

/* Responsive Decor */
.responsive-moon {
 min-width: 50%; /* Set minimum width */
 height: auto; /* Allow height to adjust automatically */
}
.responsive-logo {
 width: 50%; /* Adjust width to 100% of the container */
 height: auto; /* Allow height to adjust automatically */
}
/* Media query for mobile screens */
@media (max-width: 768px) {
 figure,
 figureLeft {
  float: none;
  /* Disable float for mobile */
  margin-left: 0;
  margin-right: 0;
  width: 100%;
  /* Take full width */
  height: auto;
 }
}

.TablQuat {
 border-collapse: collapse;
 margin: 0 auto;
 box-sizing: border-box;
}

.TablQuat td {
 vertical-align: middle;
 /*white-space: nowrap;  This will apply by default */
 text-align: center;
 padding: 10px;
 box-sizing: border-box;
}

/* For mobile screens */
@media (max-width: 768px) {
.TablQuat {
 width: 100%;
    }
}
@media (max-width: 768px) {
.TablQuat td {
  white-space: normal; /* This will override the nowrap on mobile */
  margin-left: 5px;
  margin-right: 5px;
 padding: 5px;
 width: 100%;
  /* Take full width */
  height: auto;    
    }
}

.QuatBox, .helpBox {
  position: relative;
  text-align: center;
  width: 99%; /* Set a specific width */
}

.helpBox {
  display: none;
  background-color: AliceBlue;
  border: 1px solid #ccc;
  color: darkblue;
}

.helpBox .closebtn {
  position: absolute;
  top: 0;
  right: 15px;
  font-size: 150%;
  cursor: pointer;
}

/* Text Styles */
.Article { /*use with blockquote or outer div*/
 position:relative; 
 top:90px;
 left: 0;
 margin: 20px;
 padding-bottom: 30px;
 z-index:1;/*1 THRU 10 OK*/
}
.title1 { /*h1*/
 width: 75%; 
 margin: 20px auto; /* Centrer horizontalement */
 text-align: center; /* Centrer texte dans le paragraphe */
 font-size: 160%;
 font-weight:bold;
 padding: 20px;
}
.title2 { /*h2*/
 font-size: 140%;
 font-weight: 800;
}
.title3 { /*h3*/
 font-size: 120%;
 font-weight: 700;
}
.Normal { /*p*/
 font-size: 100%;
 font-weight: 200;
}
.Quatrains { /*use with L C H A quotes*/
 width: 65%; 
 margin: 0 auto; /* Centrer horizontalement */
 font-size: 100%;
 text-align: center; /* Centrer texte dans le paragraphe */
}
.Normal a {
 color: gold;
}
.Normal a:hover {
 color:greenyellow;
}
.Normal a:visited {
 color:antiquewhite;
}
/* General styles for links with the Help class */
.Help {
    font-size: 130%;
    font-weight: bold;
    color: gold; /* Default color */
}

/* Hover state for links with the Help class */
.Help:hover {
    color: greenyellow;
}

/* Visited state for links with the Help class */
.Help:visited {
    color: antiquewhite;
}
a:visited {
 color:antiquewhite;
}  
a:hover {
 color:greenyellow;
}
a {
 color: gold;
}

/* Navbar Styles */
.navbar {
 position: fixed;
 top: 0;
 left:0; 
 width:100%; 
 height:130px; 
 font-size:110%;
 margin:0;
 padding:0; 
 z-index: 4;
}
.navbar a, .navbar .subnavbtn {
 color: white;
 padding: 1% 2%;
 text-decoration: none;
 display: inline-block;
}
.navbar a:hover, .navbar .subnavbtn:hover {
 background-color: black;
 color: gold;
}
/* Subnav Styles */
.subnav {
 display: inline-block;
 overflow: hidden;
 font-size: 100%;  
 position: relative;
   
}
.subnavbtn {
 font-size: 110%;  
 white-space: nowrap; 
}
.subnav .subnavbtn {
 border: none;
 outline: none;
 color: white;
 padding: 2% 1%;
 background-color: inherit;
 font-family: inherit;
 margin: 0;
}

/* Nav Subnav Subnav-content Hover Styles */
.navbar a:hover, .subnav:hover .subnavbtn {
}
.subnav-content a:hover {
 color: gold;
}
.subnav:hover .subnav-content {
 display: block;
 color: gold;
}

/* Subnav Content Styles */
.subnav-content {
 font-size: 110%;
 display: none;
 position: fixed;
 background-color:black;
 left: 0;
 width: 100%;
 float: left;
 color: white;
 text-decoration: none;
   
}
/* Pour les grands écrans */
@media screen and (min-width: 768px) {
 .subnav, .subnav-content {
  padding-left: 2%;  /* ou le pourcentage souhaité */
    }
}
.subnav-content {
 z-index: 1000;
}


/* Responsive Styles */
@media (max-width: 768px) {
 .navbar {
  font-size: 100%; 
 }
}
@media (max-width: 768px) {
 .subnav-content {
  font-size: 100%; 
 }
}

@media only screen and (max-width: 600px) {
 .responsive-moon {
  width: 25px;
  height: auto;
 }
}
@media only screen and (max-width: 600px) {
 .responsive-logo {
  width: 160px;
  height: auto;
 }
}

@media (max-width: 480px) {
 .navbar .subnav .subnavbtn {
  font-size: 90%;
  padding: 2% 2%;
 }
}

/*Sidebar*/
.sidebar {
 height: 100%;
 width: 0;
 position: fixed;
 z-index: 10;
 top: 0;
 left: 0;
 background-color: #111;
 overflow-x: hidden;
 transition: 0.5s;
 padding-top: 60px;
}

.sidebar a {
 padding: 8px 8px 8px 32px;
 text-decoration: none;
 font-size: 110%;
 color:aliceblue;
 display: block;
 transition: 0.3s;
}

.sidebar a:hover {
 color:gold;
}

.sidebar .closebtn, .helpBox .closebtn {
 position: absolute;
 top: 0;
 right: 25px;
 font-size: 120%;
 margin-left: 50px;
 cursor: pointer; /* Makes it clear that it's clickable */
}

.openbtn {
 font-size: 150%;
 cursor: pointer;
 background-color: #111;
 color: white;
 padding: 10px 15px;
 border: none;
}

.openbtn:hover {
 background-color:black;
}

#main {
 transition: margin-left .5s;
 padding: 16px;
}

@media (max-width: 768px) {
 .Article {
  top:60px;
  margin: 15px;
  padding-bottom: 15px;
 }
}
@media screen and (max-height: 450px) {
 .sidebar {padding-top: 15px;}
 .sidebar a {font-size: 130%;}
}