body {
      font-family: Arial, sans-serif;
      margin: 0;
      padding: 0;
      background-color:#B2FFFC;       /* juste pour test */
    }







/*
body
{
background-color: #BBD3C7;
}
*/
img{
border : none;
}
h1{
text-align: center;
font-size: 280%;
}
#ImageTitre {
position: relative;
left : 80px ;
}

table  {
margin: auto; /* vertical horizontal*/
border: outset medium #5333ED;
border-collapse: collapse;
width: 27%;
}
table.superformulaire{
width: 270;
}
table.formulaire{
margin-right:0;
}

table.admin {
width: 80%;
}

th {          /* "ligne de titre" donc 1ère et dernière */
white-space: pre;   /*pas de retour ligne et conserve les espaces */
font-family:monospace;
border:1px solid #6495ed;
padding:2px;
color:#FFFFFF;
background-color:#5234ED; 
width:5%;
}

/*  .1ereLigne {     je n'y arrive pas avec th...) 
color:#000000;
background-color:##5234ED; 

}   */

td  {
font-size: 80%;
font-family: sans-serif;
text-align: center;
padding: 2px;
border: solid thin black
}
td.NomSerie{
font-family:serif;
text-align: left;
}
td.Moyenne {
/*  display: none;  */
}
td.detail {
width:50%;
text-align: left;
}
td.Joue {
background-color: #2CD4D9;
}
td.JouePas{
background-color: #A9AABC;
}

.NonValide {
background-color:#A8B0F5;  /* #CCCCFF; */ 
font-style: italic;
}

.right{
text-align: right;
}
.left{
text-align: left;
}

label { /* pour les formulaires */
clear: both; /*annule le float précédent */
display:block;
width:120px;
float:left;
}

caption { /* titre des tableaux*/
font-family:sans-serif;
}



@media print {            /* la feuille de style pour l'impression vient ici */

.formulaire {
visibility:hidden;
}
body{
background-color: #FFFFFF;
}
table {
border:2px solid black;
border-collapse:collapse;
margin:auto;
}
.NonValide {
background-color:#DDDDFF; 
font-weight: bold;
}

caption { /* pour mettre un titre aux tableaux */
}
}

































    nav {
      position: relative;
      height: 50px;
      background-color: transparent;
    }

    .menu-btn {
      position: absolute;
      top: 15px;
      right: 20px;
      display: flex;
      flex-direction: column;
      justify-content: center;
      align-items: center;
      width: 30px;
      height: 30px;
      background: none;
      border: none;
      cursor: pointer;
      transition: all 0.5s ease-in-out;
    }

    .line {
      width: 24px;
      height: 4px;
      background-color: #0066cc;
      border-radius: 4px;
      transition: all 0.5s ease-in-out;
    }

    .line:not(:last-child) {
      margin-bottom: 4px;
    }

    .menu-btn.active .line-1 {
      transform: rotate(45deg) translate(4px, 4px);
    }

    .menu-btn.active .line-2 {
      opacity: 0;
    }

    .menu-btn.active .line-3 {
      transform: rotate(-45deg) translate(4px, -4px);
    }

    nav .menu {
      position: fixed;
      top: 50px;
      right: -250px;
      width: 250px;
      height: calc(100vh - 50px);
      overflow: auto;
      background-color: transparent;
      transition: right 0.3s ease-in-out;
    }

    nav .menu li {
      display: block;
    }

    nav .menu li a {
      color: #fff;
      padding: 15px 20px;
      display: block;
      background-color: #5333ED;
      border-radius: 20px;
      margin-bottom: 10px;
      text-decoration: none;
      font-weight: bold;
      font-size: 18px;
    }

    nav .menu li a:hover {
      background-color: #004c99;
    }

    nav .menu-btn.active ~ .menu {
      right: 0;
    }

    main {
      margin-top: 70px;
    }

    /* Styles pour les petits écrans */
    @media (max-width: 480px) {
      .menu-btn {
        width: 40px;
        height: 40px;
      }

      .line {
        width: 30px;
        height: 5px;
      }

      nav .menu {
        width: 200px;
      }

      nav .menu li a {
        font-size: 16px;
        padding: 12px 16px;
      }
    }