@font-face {
    font-family: 'MV Boli';
    src: 	url(‘/fonts/mvboli.ttf’) format(‘truetype’)
}

@font-face {
    font-family:Ron;
    src:url(/fonts/RON/RON.otf) format("opentype");
    src:url(/fonts/RON/RON.woff) format("woff");
    src:url(/fonts/RON/RON.ttf) format("truetype");
    font-weight:400;
    font-style:normal
  }
  @font-face {
    font-family:N27;
    src:url(/fonts/N27/N27-Regular.otf) format("opentype");
    font-weight:100;
    font-style:normal
  }
  @font-face {
    font-family:GorriSans;
    src:url(/fonts/GorriSans/GorriSans.ttf) format("truetype");
    font-weight:100;
    font-style:normal
  }
  @font-face {
    font-family:Crackhouse;
    src:url(/fonts/Crackhouse/Crackhouse.ttf) format("truetype");
    font-weight:100;
    font-style:normal
  }
  @font-face {
    font-family:impact;
    src:url(/fonts/impact/impact.ttf) format("truetype");
    font-weight:100;
    font-style:normal
  }
  h2 span {
    color: #51ff1d;
    font-family: N27;
  }
body  {
    background: url(fond.png) 50% no-repeat  ;
    background-size: cover;
    background-position: center center;
    background-repeat: no-repeat;
    background-color: #172933;
    color:#fff;
    font-family: Verdana, sans-serif;
    background-attachment: fixed;
    cursor: default;
    user-select: none;
}
.button {
    display: inline-block;
    padding: 10px 20px;
    background-color: #f0f0f0; /* couleur de fond */
    color: #000; /* couleur du texte */
    text-decoration: none;
    border: none;
    border-radius: 5px;
    cursor: pointer;
    transition: background-color 0.3s;
}

.button:hover {
    background-color: #d3d3d3; /* couleur de fond au survol */
    color:#000;
}

.button:disabled {
    background-color: #ddd; /* couleur de fond lorsque désactivé */
    color: #888; /* couleur du texte lorsque désactivé */
    cursor: not-allowed;
}

#description-modal {
  display: block;
    color: #51ff1d;
    border-radius: 6px;
    padding: 20px;
    margin-top: 20px;
    margin-bottom: 20px;
}

.modal {
    display: none;
    position: fixed;
    z-index: 1;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    overflow: auto;
    background-color: rgba(0, 0, 0, 0.4);
}

.modal-content {

    margin: 15% auto;
    padding: 20px;
    background-color: #0b6380;
    width: 80%;
    border-radius: 6px;
}

.close-button {
  color: white;
  float: right;
  font-size: 35px;
  font-weight: bold;
}

.close-button:hover,.close-button:focus {
    color: black;
    text-decoration: none;
    cursor: pointer;
}

.competence {
    cursor: pointer;
    /* Autres styles au besoin */
}

.parent {
    -webkit-text-stroke-width: 0px;
    -webkit-text-stroke-color: black;
    width: 100%;
    text-align: center;
}

.container {
    max-width: 720px;
    margin: 0px auto;
    width: 50%;
}

.text-center {
    text-align:center;
}

.progressbar-wrapper {
    background-color: #dfe6e9;
    color: white;
    border-radius: 15px;
    width: 100%;
    display: inline-block;
}

.term {
    width: 93%;
}

.navigation {
    margin: 0;
    padding: 0;
    list-style: none;
    color: #0000;
    width: fit-content;
}

/* Couleur du lien lorsqu'il est actif (en surbrillance) */
.navigation li.toggleSubMenu > a.activeLink {
    color: #51ff1d; /* Couleur verte */
}

/* Styles généraux des liens */
.navigation a,
.navigation span {
    text-decoration: none;
    color: #ffffff; /* Couleur par défaut */
    margin-top: 5px;
}

/* Couleur du lien au survol pour les liens de sous-menu */
.navigation li.toggleSubMenu > a:hover {
    color: #51ff1d !important; /* Couleur verte au survol avec !important */
    text-decoration: none;
}

/* Styles pour les messages dans les sous-menus */
.navigation .subMenu h2 {
    color: #51ff1d; /* Couleur du texte */
    font-family: N27; /* Police de caractère */
}

.navigation .subMenu span {
    color: #51ff1d; /* Couleur du texte */
    font-family: N27; /* Police de caractère */
}

 /*Couleur du lien au survol*/
.navigation span:hover,
.navigation span:active {
    color: #51ff1d;
    text-decoration: none;
    margin-top:5px;
}

.navigation .subMenu {
    font-size: 1.5em;
    margin: 0;
    padding: 3px;
    margin-top:7px;
    /*width: 70%;*/
    border-radius: 15px;
}
.toggleSubMenu a {

    font-weight: bold;
    -webkit-text-stroke-width: 0px;
    -webkit-text-stroke-color: black;
}

.toggleSubMenu a:hover {

    text-decoration:none;
    margin-top:5px;
    font-weight: bold;
}

.subMenu h2 {

    margin: 0;
    padding: 0;
}

.subMenu h3 {

    margin: 0;
    padding: 0;
    color: white;
}

.navigation ul.subMenu a {
    background: none;
    padding: 3px 0px;

    margin-top:5px;
}

.navigation ul.subMenu a:hover {
    background: none;
    padding: 3px 0px;

    margin-top:5px;
}

.super {
    margin: 0;
    padding: 0;
    list-style: none;
    color: #0000;
}

.super a {
    text-decoration:none;
    padding: 4px 10px;
    color: #ffffff;
    margin-top:5px;
}

.super a:hover, .super a:active {
    color: #51ff1d;
    text-decoration:none;
}

button {
    font-family: n27;
    cursor: pointer;
    font-size:45px;
}

select {
    text-align: center;
    font-family: n27;
}

option {
    font-family: inherit;
}

input {
    text-align: center;
    font-family: n27;
}

nav {
    font-size: 14px;
    height: auto;
    font-family:n27;
}

li {
    list-style: none;
    font-family:ron;
}

#content {
    width: 980px;
    margin: 0 auto;
}

#main_menu_nav h3 {
    color: #FFF;
    background: #045779;
    padding: 8px;
    padding-left: 10px;
    cursor: pointer;
    position: relative;
}

#main_menu_nav ul {
    height: auto;
    display: none;
}

#main_menu_nav li {
    color: #D2D7D8;
    background: #00789a;
    padding: 10px;
    padding-left: 20px;
    border-bottom: 1px solid #035c7e;
}

#main_menu_nav li:hover {
    color: #FFF;
    background: #108BAD;
}

#main_menu_nav li:last-child {
    border-bottom: none;
}

nav {
    display: flex;
}

nav>a {
    display: flex;
    align-items: center;
    /*background-color: rgba(0, 0, 0, 0.2);*/
    text-align: center;
    box-sizing:border-box;
    padding: 10px;
    color: #fff;
    margin: 0 auto;
    text-decoration: none;
    transition: all 0.3s ease;
    font-size: 17px;
    font-weight: bolder;
    -webkit-text-stroke-width: 0px;
    -webkit-text-stroke-color: #000;
    /*width: 100%;*/
    justify-content: center;
    /*border-radius: 15px;*/
}

nav>a:hover {
    /*background-color: rgba(255, 255, 255, 0.4);*/
    color: #51ff1d;
    transition: all 0.3s ease;
    /*border-radius: 15px;*/
}

nav>#en-cours {
    /*background-color: rgba(0, 0, 0, 0.2);*/
    color: #51ff1d;
    transition: all 0.3s ease;
    /*border-radius: 15px;*/
}

nav>#en-cours:hover {
    /*background-color: rgba(255, 255, 255, 0.4);*/
    color: #51ff1d;
    transition: all 0.3s ease;
    /*border-radius: 15px;*/
}

#ch {
    display: none;
}

#lab {
    width: 75px;
    height: 75px;
    background:linear-gradient(#FFF 0%, #FFF 20%,transparent, 21%, transparent 40%,#FFF 41%, #FFF 60%,transparent, 61%, transparent 80%,#FFF 81%, #FFF 100% );
    margin: 4px;
    display: none;
    background-size: contain;
}


#questionnaire {
    margin-top:5px;
    background: url(images/menuactive.png);
    width: 95%;
    border-radius: 15px;
    font-size: 1.4em;
    padding: 3px;
}

#mj {
    margin-top:5px;
    background: url(images/menuactive.png);
    width: 95%;
    border-radius: 15px;
    font-size: 1.4em;
    padding: 3px;
}

#mj2  {
    margin-top:5px;
    background: url(images/menuactive2.png);
    border-radius: 15px;
    display: inline-block;
    padding: 15px;
}

a:hover {
    text-decoration: none;
    color: #51ff1d;
}

a {
    text-decoration: none;
    color: #ffffff;
}

.input-file {
    display: none;
}

.custom-file-label {
    color: #000;
    padding: 10px;
    border-radius: 5px;
    cursor: pointer;
    display: inline-block;
    font-size: 25px;
    background-color: #e9e9ed;
    -webkit-text-stroke-width: 0px;
    font-family: n27;
}

.input-file + .custom-file-label:before {
    content: 'Parcourir';
}

.input-file:focus + .custom-file-label,.input-file.has-file + .custom-file-label {
    background-color: #2c3e50;
}

.input-file.has-file + .custom-file-label:before {
    content: 'Fichier sélectionné';
}


h1 {
    font-size: 65px;
    margin-bottom: 10px;
    margin-top: 0px;
    -webkit-text-stroke-color: white;
    -webkit-text-stroke-width: 0px;
}

h2 {
    font-size: 35px;
    margin-bottom: 10px;
    margin-top: 0px;
    color: white;
    -webkit-text-stroke-color: black;
    -webkit-text-stroke-width: 0px;
}

input {
    font-size:45px;
    cursor: pointer;
}
select  {
    font-size:45px;
    cursor: pointer;
}

.image-equipement {
    max-width: 15%; /* Redimensionne l'image pour s'adapter à la largeur de l'écran */
    height: auto; /* Garantit que la hauteur est ajustée proportionnellement */
}

/* Styles spécifiques pour la variation positive */
.positive-variation {
    color: #51ff1d; /* Couleur verte pour la variation positive */
    font-family: N27; /* Police spécifique pour la variation */
}

/* Styles spécifiques pour la variation négative */
.negative-variation {
    color: red; /* Couleur rouge pour la variation négative */
    font-family: N27; /* Police spécifique pour la variation */
}

nav {
    display: block;
    position: absolute;
    transform: translate(-1281px,0);
    transition: all 0.5s ease;
}

nav>a {
    width: auto;
    background-color: rgba(0, 0, 0, 0.95);
    /*border-radius: 15px;*/
}

nav>a:hover {
    background-color: rgba(81, 255, 29, 0.95);
    /*color: #51ff1d;*/
    color:black;
    transition: all 0.3s ease;
    /*border-radius: 15px;*/
}

nav>#en-cours {
    background-color: rgba(0, 0, 0, 0.95);
    color: #51ff1d;
    transition: all 0.3s ease;
    /*border-radius: 15px;*/
}

nav>#en-cours:hover {
    background-color: rgba(81, 255, 29, 0.95);
    /*color: #51ff1d;*/
    color:black;
    transition: all 0.3s ease;
    /*border-radius: 15px;*/
}

#ch:checked+nav {
    transform: translate(0,0);
    transition: all 0.5s ease;
}

#lab {
    display: block;
}

/*------------------------------------------------------------------------------------------------------------------------------------------------------------------------*/
/*-------------------------------------------------------------PETIT ECRAN------------------------------------------------------------------------------------------------*/
/*------------------------------------------------------------------------------------------------------------------------------------------------------------------------*/

@media only screen and (max-width: 1079px) {

    #ch:checked ~ #mjmenu {
        transform: translate(0px,512px); /* ou la valeur exacte nécessaire */
        margin-top: 35px;
    }

    #lab {
              width: 40px; /* Reduced width for small screens */
              height: 40px; /* Reduced height for small screens */
          }
          button {
              font-family: n27;
              cursor: pointer;
              font-size:20px;
          }
    body {
        background: url(fond-2.png) 50% no-repeat  ;
        background-size: cover;
        background-position: center center;
        background-repeat: no-repeat;
        background-color: #172933;
        color:#fff;
        font-family: Verdana, sans-serif;
        background-attachment: fixed;
    }

    .subMenu h3 {
        font-size: 0.9em;
        margin: 0;
        padding: 0;
        color: white;
    }



    .image-equipement {
        max-width: 30%; /* Redimensionne l'image pour s'adapter à la largeur de l'écran */
        height: auto; /* Garantit que la hauteur est ajustée proportionnellement */
    }

    th, td {
        border: 1px solid black;
        padding: 1px;
        text-align: center;
        font-weight: normal;
        width: 80px;
        font-size: 12px;
        -webkit-text-stroke-width: 0px;
        -webkit-text-stroke-color: black;
        color:white;
        border: none;
        width: auto;
    }

    .container2 {
        display: flex; /* Active Flexbox */
        flex-wrap: wrap; /* Permet aux éléments de passer à la ligne suivante */
        /*background: url(images/menuactive.png);*/
        width: auto;
        flex-direction: column; /* Organise les éléments en colonnes */
        align-items: center; /* Centre les éléments horizontalement */
        border-radius: 15px;
    }

    h1 {
        font-size: 25px;
        margin-bottom: 10px;
        margin-top: 0px;
        -webkit-text-stroke-color: rgb(255, 255, 255);
        -webkit-text-stroke-width: 0px;
    }

    h2 {
        font-size: 20px;
        margin-bottom: 10px;
        margin-top: 0px;
        color: white;
        -webkit-text-stroke-color: black;
        -webkit-text-stroke-width: 0px;
    }

    .style-switcher {
        padding: 10px 20px; /* Ajoute de l'espace à l'intérieur du bouton */
        margin: 20px; /* Ajoute de l'espace autour du bouton */
        display: none !important;
        color: black; /* Couleur du texte */
        border: none; /* Pas de bordure */
        border-radius: 10px; /* Coins arrondis */
        cursor: pointer; /* Curseur en forme de main pour indiquer qu'il s'agit d'un bouton cliquable */
        font-size:40px;
    }

    /* Style pour le bouton lorsqu'il est survolé par la souris */
    .style-switcher:hover {
        background-color: black;
        color: red;
    }

    label[for="styleSwitch"] {
        vertical-align: middle;
        margin-left: 20px; /* Ajustez selon vos besoins*/
    }

    /* Cacher le style-switcher original sur les petits écrans */
    .style-switcher {
        display: none !important;
    }



    .title {
        margin-top: 20px; /* Espacement au-dessus du titre */
        font-size: 24px; /* Taille de la police du titre */
        font-weight: bold; /* Gras pour le titre */
    }

    .competences-grid {
        display: flex; /* Active Flexbox pour les compétences */
        flex-wrap: wrap; /* Permet aux éléments de passer à la ligne suivante */
        justify-content: center; /* Centre les éléments */
    }

    .competence {
        flex: 1 1 30%; /* Chaque élément prend environ un tiers de l'espace */
        box-sizing: border-box;
        padding: 10px; /* Espacement à l'intérieur des boîtes */
        margin: 10px; /* Espacement entre les boîtes */
        text-align: center; /* Centre le texte dans chaque compétence */
    }

    .switch .slider {
        background-color: #CCC !important; /* Exemple d'utilisation de !important */
        /* autres styles pour .slider */
    }

    .switch input[type="checkbox"] {
        display: none; /* Cache l'élément d'entrée réel pour tous les écrans */
    }

    .switch .slider:after {
        /* Assurez-vous que le :after est toujours affiché correctement */
        /* Autres styles pour :after */
    }

    .toggleSubMenu a {
        font-size: 1.4em;
        font-weight: bold;
        -webkit-text-stroke-width: 0px;
        -webkit-text-stroke-color: black;
    }

    .toggleSubMenu a:hover {
        font-size: 1.4em;
        text-decoration:none;
        margin-top:5px;
        font-weight: bold;
  }

    .navigation ul.subMenu a {
        background: none;
        padding: 3px 0px;
        font-size: 0.9em;
        margin-top: 5px;
    }

    .navigation ul.subMenu a:hover {
        background: none;
        padding: 3px 0px;
        font-size: 0.9em;
        margin-top:5px;
    }

    input {
        font-size:20px;
        font-family: 'N27';
    }

    select {
        font-size:20px;
        font-family: 'N27';
    }

}