/* Elements de base */
*{
    margin: 0;
    padding: 0px;
    font-family: sans-serif, Verdana, Arial;
    color: light-dark(#000000, #ffffff);
    background-color: light-dark(#ffffff, #1c1c1c);
}

html{
    min-height: 100vh;
    max-height: 9999px;
}

body{
    color: light-dark(#000000, #ffffff);
    background-color: light-dark(#bbbbbb, #0c0c0c);
}

/* Div class */
div {
    width: 100%;
    min-width: 320px;
    max-width: 1024px;
    margin: 0 auto;
    display: flex;
    color: light-dark(#000000, #ffffff);
    background-color: light-dark(#bbbbbb, #1c1c1c);
}

.content{
    width: 100%;
    min-width: 320px;
    max-width: 1024px;
    min-height: 100vh;
    max-height: 9999px;
    text-align: left;
    margin: 0 auto;
    padding: 0px 0px;
}

.section{
    width: 100%;
    min-width: 300px;
    max-width: 900px;
    padding: 0px 0px;
    margin: 0 auto;
}

/* Iframe class */
iframe{
    width: 100%;
    min-width: 320px;
    max-width: 1024px;
    border: 0;
    margin: 0 auto;
    padding: 0px 0px;
    background-color: light-dark(#ffffff, #1c1c1c);
}

/* Title class */
h1, h2{
    color: light-dark(#ff8300, #ffd200);
    background-color: light-dark(#ffffff, #1c1c1c);
    padding: 0px 0px;
}

.title-gradient{
    background: linear-gradient(to top, red, yellow);
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
    -user-select: none; /* Standard syntax */
    -webkit-user-select: none; /* Safari */
    -ms-user-select: none; /* IE 10 and IE 11 */
}

h3{
    color: light-dark(#000000, #ffffff);
    background-color: light-dark(#ffffff, #1c1c1c);
    padding: 0px 0px;
}

h4{
    color: light-dark(#ff8300, #ffd200);
    background-color: light-dark(#ffffff, #1c1c1c);
    padding: 0px 0px;
}

section{
    width: 100%;
    min-width: 320px;
    max-width: 1024px;
    color: light-dark(#000000, #ffffff);
    background-color: light-dark(#ffffff, #1c1c1c);
    text-align: left;
    padding: 20px 20px;
}

/* Paraph class */
p{
    color: light-dark(#000000, #ffffff);
    background-color: light-dark(#ffffff, #1c1c1c);
    padding: 10px 0px;
}

.console{
    color: light-dark(#ffffff, #ffffff);
    background-color: light-dark(#000000, #000000);
    font-family: monospace;
    padding: 10px 10px;
    max-width: 1004px;
}

.sub{
    padding: 10px 10px;
    max-width: 1004px;
}

/* Summary class */
summary{
    color: light-dark(#000000, #ffffff);
    background-color: light-dark(#ffffff, #1c1c1c);
    padding: 10px 0px;
}

summary:hover{
    color: light-dark(#ff8300, #ffd200);

}

dt{
    color: light-dark(#000000, #ffffff);
    background-color: light-dark(#ffffff, #1c1c1c);
    padding: 10px 0px;
}

dl{
    color: light-dark(#000000, #ffffff);
    background-color: light-dark(#ffffff, #1c1c1c);
    padding: 0px 20px;
}

span{
}

.highlight-console{
    color: light-dark(#000000, #000000);
    background-color: light-dark(#fffa71, #fffa71);
    font-family: monospace;
}

.colored{
    color: light-dark(#ff8300, #ffd200);
}

.colored-red{
    color: light-dark(#ff5555, #ff5555);
}

.highlight-red{
    color: light-dark(#ffffff, #ffffff);
    background-color: light-dark(#993333, #993333);
}

.highlight-green{
    color: light-dark(#ffffff, #ffffff);
    background-color: light-dark(#339933, #339933);
}

.highlight-blue{
    color: light-dark(#ffffff, #ffffff);
    background-color: light-dark(#333399, #333399);
}

.colored-console-blue{
    color: #2b85bb;
    background-color: #000000;
    font-family: monospace;
}

.colored-console-dark-green{
    color: #00a37b;
    background-color: #000000;
    font-family: monospace;
}

.colored-console-purple{
    color: #d22f73;
    background-color: #000000;
    font-family: monospace;
}

.gradient{
    background: linear-gradient(to top, red, yellow);
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
    -user-select: none; /* Standard syntax */
    -webkit-user-select: none; /* Safari */
    -ms-user-select: none; /* IE 10 and IE 11 */
}

.gradient:hover{
    background: linear-gradient(to top, red, yellow);
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
}

.link{
    color: light-dark(#000000, #ffffff);
    -user-select: none; /* Standard syntax */
    -webkit-user-select: none; /* Safari */
    -ms-user-select: none; /* IE 10 and IE 11 */
}

.link:hover{
    color: light-dark(#ff8300, #ffd200);
    background-color: light-dark(#ffffff, #1c1c1c);
    -user-select: none; /* Standard syntax */
    -webkit-user-select: none; /* Safari */
    -ms-user-select: none; /* IE 10 and IE 11 */
}

/* Link class */
a{
    text-decoration: none;
    color: light-dark(#ff8300, #ffd200);
    background-color: light-dark(#ffffff, #1c1c1c);
}

.active{
    /*font-weight: bold;*/
    color: light-dark(#ff8300, #ffd200);
    background-color: light-dark(#ffffff, #1c1c1c);
}

.active:hover{
    color: light-dark(#1c1c1c, #000000);
    background-color: light-dark(#ff8300, #ffd200);
}

.blank{
    color: light-dark(#1c1c1c, #000000);
    background-color: light-dark(#1c1c1c, #000000);
}

.blank:hover{
    color: light-dark(#1c1c1c, #000000);
    background-color: light-dark(#1c1c1c, #000000);
}

.inactive{
    color: light-dark(#bbb, #ddd);
    background-color: light-dark(#ffffff, #1c1c1c);
}

.inactive:hover{
    text-decoration: underline;
}

a:hover{
    text-decoration: underline;
}

b{
}

.colored{
    color: light-dark(#ff8300, #ffd200);
}

/* Button class */
button{
    width: 100%;
    height: 47px;
    color: light-dark(#1c1c1c, #ffffff);
    background-color: light-dark(#ffffff, #1c1c1c);
    border: 0px solid;
    border-bottom: 2px solid;
    border-color: light-dark(#bbbbbb, #000000);
    text-align: left;
    padding-left: 20px;
}

.button-active{
    color: light-dark(#1c1c1c, #ffffff);
    background-color: light-dark(#ffffff, #1c1c1c);
    border: 0px solid;
    border-bottom: 2px solid;
    border-color: light-dark(#ff8300, #ffd200);
}

.button-active:hover{
    color: light-dark(#1c1c1c, #ffffff);
    background-color: light-dark(#ffffff, #1c1c1c);
    border: 0px solid;
    border-bottom: 2px solid;
    border-color: light-dark(#ff8300, #ffd200);
}

button:hover{
    color: light-dark(#ff8300, #ffd200);
    background-color: light-dark(#ffffff, #1c1c1c);
    border: 0px solid;
    border-bottom: 2px solid;
    border-color: light-dark(#bbbbbb, #000000);
}

i{
}

.i-console{
    color: light-dark(#ffffff, #ffffff);
    background-color: light-dark(#000000, #000000);
    font-family: monospace;
}



table {
    width: 100%;
    text-align: center;
}

table,th,td{
    border:0px solid #ccc;
}

td:hover{
    color: light-dark(#ffffff, #1c1c1c);
    background-color: light-dark(#ff8300, #ffd200);
    border-color: light-dark(#ffffff, #1c1c1c);
}

/* Navigation Menu */
nav{
    width: 1024px;
    height: 39px; /* Corrige le decalage sur le menu actif */
    margin: 0 auto;
    display: flex;
    position: top;
    top: 0px;
    box-shadow: 0px 0px 0px #ccc;
    background-color: light-dark(#1c1c1c, #000000);
    -user-select: none; /* Standard syntax */
    -webkit-user-select: none; /* Safari */
    -ms-user-select: none; /* IE 10 and IE 11 */
}

.submenu{
    width: 100%;
    min-width: 320px;
    max-width: 1024px;
    text-align: center;
    margin: 0 auto;
    padding: 0px 0px;
    position: sticky;
}

.nosubmenu{
    position: sticky;
}

/* Supprime les points de liste */
nav ul{
    list-style-type: none;
    background-color: light-dark(#1c1c1c, #000000);
}

/* Mise en ligne horizontale et centrage */
nav ul li{
    float: left;
    width: 16%;
    text-align: center;
    position: relative;
    min-width: 186px;
    max-width: 186px;
    height: 39px; /* Corrige le decalage sur le menu actif */
}

/* Home nav */
.home{
    max-width: 47px;
    min-width: 47px;
}

.home a:hover{
    color: light-dark(#000000, #000000);
    background-color: light-dark(#ff8300, #ffd200);
    border-bottom: 0px solid;
    border-color: light-dark(#1c1c1c, #000000);
    text-decoration: none;
}

.home a.active:hover{
    color: light-dark(#000000, #000000);
    background-color: light-dark(#ff8300, #ffd200);
}

.arrow{
    max-width: 47px;
    min-width: 47px;
}

.arrow a:hover{
    color: light-dark(#ffffff, #ffffff);
    background-color: light-dark(#1c1c1c, #000000);
    border-bottom: 0px solid;
    border-color: light-dark(#1c1c1c, #000000);
    text-decoration: none;
}

.nosubnav{
    text-decoration: none;
}

.nosubnav a:hover{
    color: light-dark(#000000, #000000);
    background-color: light-dark(#ff8300, #ffd200);
    border-bottom: 0px solid;
    border-color: light-dark(#1c1c1c, #000000);
    text-decoration: none;
}

.nosubnav a.active:hover{
    color: light-dark(#ff8300, #ffd200);
    background-color: light-dark(#ffffff, #1c1c1c);
}

.menu{
    max-width: 47px;
    min-width: 47px;
    display: none;
}

/* Affiche l'élément sur les écrans de 1024px et plus */
@media only screen and (min-width: 1023px) {
.menu{
    display: block;
    }
}

.menu a:hover{
    color: light-dark(#000000, #000000);
    background-color: light-dark(#ff8300, #ffd200);
    border-bottom: 0px solid;
    border-color: light-dark(#1c1c1c, #000000);
    text-decoration: none;
}

.menu a.active:hover{
    color: light-dark(#ff8300, #ffd200);
    background-color: light-dark(#ffffff, #1c1c1c);
}


.hidden-mobile {
    display: none;
}

/* Affiche l'élément sur les écrans de 1024px et plus */
@media only screen and (min-width: 1023px) {
.hidden-mobile {
    display: block;
    }
}

nav ul::after{
    content: "";
    display: table;
    clear: both;
}

/* Mise en forme */
nav a{
    display: block;
    text-decoration: none;
    border-bottom: 0px solid;
    border-color:light-dark(#1c1c1c, #000000);
    padding: 10px 0px;
    color: light-dark(#ffffff, #ffffff);
    background-color: light-dark(#1c1c1c, #000000);
    height: 19px; /* Corrige le decalage sur le menu actif */
}

/* Selection */
nav a:hover{
    color: light-dark(#ff8300, #ffd200);
    background-color: light-dark(#1c1c1c, #000000);
    border-bottom: 0px solid;
    border-color: light-dark(#1c1c1c, #000000);
    text-decoration: none;
}

/* Sous-menu */
.subnav{
    display: none;
    box-shadow: 0px 0px 0px #CCC;
    border-top: 0px solid;
    border-color:light-dark(#1c1c1c, #000000);
    background-color: light-dark(#ffffff, #1c1c1c);
    position: absolute;
    width: 100%;
    z-index: 1000;
}

nav > ul li:hover .subnav{
    display: block;
}

/* Colorisation menu actif */
nav > ul > li.active a, nav > ul > li:hover > a {
    color: light-dark(#000000, #000000);
    background-color: light-dark(#ff8300, #ffd200);
    border-bottom: 0px solid;
    border-color:light-dark(#1c1c1c, #000000);
    height: 19px; /* Corrige le decalage sur le menu actif */
}

/* Mise en ligne verticale */
.subnav li{
    float: none;
    width: 100%;
    text-align: left;
}

/* Mise en forme */
.subnav a{
    padding: 10px;
    border-bottom: none;
      white-space: nowrap;
      overflow: hidden;
      text-overflow: ellipsis;
}

.subnav a:hover{
    color: light-dark(#000000, #000000);
    background-color: light-dark(#ff8300, #ffd200);
    border-bottom: 0px solid; /* Corrige le decalage sur le menu home */
}