/* ---------- MENU LATÉRAL ---------- */
#sidebar {
    position: fixed;
    left: 0;
    top: 0;
    width: 200px; /* Increased width for better readability */
    height: 100%;
    background: #2b2b2b; /* Darker background for contrast */
    color: #ffffff; /* Text color */
    padding: 20px 0; /* Padding for spacing */
    border-right: 2px solid #555555; /* Subtle border */
    box-shadow: 2px 0px 5px rgba(0, 0, 0, 0.3); /* Shadow for depth */
  }
  
  #sidebar-header {
    text-align: center;
    margin-bottom: 20px;
    font-size: 16pt;
    font-weight: bold;
    color: #ffff00; /* Yellow header text */
    text-transform: uppercase;
    letter-spacing: 2px;
  }
  
  .buttonA {
    display: block;
    margin: 10px auto; /* Center-align buttons */
    width: 180px; /* Slightly increased width */
    height: 40px; /* Increased height for better clickability */
    line-height: 40px; /* Vertically centers text */
    font-family: Verdana, sans-serif;
    font-size: 12pt;
    font-weight: bold;
    color: #ffff00; /* Yellow text */
    background: linear-gradient(to bottom, #444444, #333333); /* Gradient background */
    border: none; /* Removed border */
    border-radius: 5px; /* Rounded corners */
    box-shadow: 0px 2px 5px rgba(0, 0, 0, 0.4); /* Button shadow */
    transition: all 0.3s ease; /* Smooth transition for hover effect */
    text-decoration: none; /* Remove underline from links */
    text-align: center; /* Center-align text */
  }
  
  .buttonA:hover {
    background: linear-gradient(to bottom, #555555, #444444); /* Darker gradient on hover */
    color: #ffffff; /* White text on hover */
    box-shadow: 0px 4px 8px rgba(0, 0, 0, 0.6); /* Stronger shadow on hover */
    transform: translateY(-2px); /* Slight lift effect */
  }
  
  .buttonA:active {
    transform: translateY(0); /* Reset lift effect on click */
    box-shadow: 0px 2px 5px rgba(0, 0, 0, 0.4); /* Reset shadow on click */
  }
  
  /* Optional: Highlight the active page */
  .buttonA.active {
    background: linear-gradient(to bottom, #777777, #666666); /* Highlighted gradient */
    color: #ffffff; /* White text */
    box-shadow: inset 0px 0px 5px rgba(255, 255, 0, 0.5); /* Inner glow effect */
  }
  
  /* ---------- FIN MENU LATÉRAL ---------- */
  
  body {
    margin: 0 2px 2px 210px; /* Adjusted margin for sidebar width */
    font-family: verdana;
    font-size: 10pt;
    color: #ffff00;
    background-color: #000000;
  }

  .tv {
    border: 2px solid #808080;
    color: #ffffff;
    background-color: #303030;
    text-align: center;
  }
  .chaise1 {
    margin: 0;
    font-family: verdana;
    font-size: 10px;
    color: #ffffff;
    border: 2px solid #000000;
    font-weight: bold;
    text-align: center;
    text-indent: 0;
    word-spacing: 0;
    background-color: #a0a080;
  }
  .chaiseA {
    text-align:center;
    line-height:22px;
    height:28px;
    vertical-align:middle;
    font-family: verdana;
    font-size: 10px;
    color: #ffffff;
    border: 2px solid #000000;
    font-weight: bold;
    background-color: #408040;
  }
  .chaiseE {
    text-align:center;
    line-height:22px;
    height:28px;
    vertical-align:middle;
    font-family: verdana;
    font-size: 10px;
    color: #ffffff;
    border: 2px solid #000000;
    font-weight: bold;
    background-color: #d04040;
  }
  .rang {
    margin: 0;
    font-family: Verdana;
    font-size: 12px;
    color: #000000;
    font-weight: bold;
    text-align: center;
    text-indent: 0;
    word-spacing: 0;
  }
  .salle {
    border-style: solid;
    border-width: 2px;
    color: #ffffff;
    background-color: #808080;
  }
  .normald { margin: 2px; padding: 5px; text-align: right; }
  .normal { margin: 2px; padding: 5px; text-align: justify; }
  .normalg { margin: 2px; padding: 5px; text-align: left; }
  .normalc { margin: 2px; padding: 5px; text-align: center; }
  .textec { margin: 2px; padding: 5px; text-align: center; }
  .vide { margin: 0px; padding: 0px; font-size: 0pt; }
  .textecb { font-weight: bold; color: #0000ff; }
  .emphase { background-color: #000080; font-weight: bold; }
  .Gemphase { background-color: #800000; font-size: 12pt; }
  .GemphaseV { background-color: #008000; font-size: 12pt; }
  .GemphaseClignotant { 
    background-color: #ff0000; 
    font-size: 12pt; 
    text-decoration: blink;
  }
  .GemphaseNO { background-color: #800000; text-decoration: line-through; }
  .comment { color: #aaaaaa; }
  .commentc { font-size: 8pt; color: #888888; }
  a:link, a:visited { color: #ffff00; text-decoration: none; }
  a:hover { color: #ffffff; font-weight: bolder; }
  h1 {
    padding: 10px;
    font-size: 12pt;
    background-color: #555555;
    margin: 5px 0 0 0;
  }
  .bouton { border: 2px outset #808080; background-color: #404040; }
 
	.input { border: 3px ridge #ffff00; background-color: #404040; color: #ffffff; }
  .livredor { border: 5px ridge #c0c000; background-color: #404060; padding:4px; }
  .livredorJ { border: 1px ridge #ffff00; background-color: #404060; }
  .select { background-color: #000000; padding-left: 12px; }
  .comic { font-family: Comic Sans MS; font-size: 18pt; }
  .Personnage { font-variant: small-caps; margin-right: 10px; }
  .date { font-size:8pt; line-height:22px; }
  .auteur { font-weight: bold; color: #c0ffc0; }
  .titre { padding: 10px; font-size: 12pt; margin: 10px; }
  .ba0, .ba1 { padding: 0px; font-size: 10pt; margin: 0px; }
  .ba1 { background-color: #996633; }