td#rien {
border: none;
}

table {
border-collapse: collapse;
width: 100%;
}

th, td {
border: 1px solid black;
padding: 1px;
text-align: center;
font-weight: bold;
width: 200px;
font-size: 20px;
}

th {
width: 5em; /* Largeur de la première colonne */
}

.data-cell {
cursor: pointer;
}

.unlocked {
background-color: lightgreen;
}

.special-color-10.unlocked,.special-color-20.unlocked,.special-color-21.unlocked,.special-color-204.unlocked {
background-color: lightgreen; /* Couleur spéciale pour les valeurs 10, 20, 21 débloquées */
color: #dd00cf !important;
}

.special-color-21.unlocked.non-modifiable,.special-color-10.unlocked.non-modifiable,.special-color-20.unlocked.non-modifiable,.special-color-204.unlocked.non-modifiable {
background-color: #0b6380; /* Couleur spéciale pour les valeurs 10, 20, 21 débloquées */
color: #51ff1d !important;
}

.special-color-10,.special-color-20,.special-color-21,.special-color-204 {
color: #740000; /* Couleur pour les valeurs 10, 20, 21 */
}

#remaining-points {

}

.non-modifiable {
background-color: #51ff1d;
}

.tooltip {
position: relative;
display: inline-block;
}

.tooltip .tooltiptext {
visibility: hidden;
width: 300px;
background-color: #0b6380;
color: #51ff1d;
text-align: center;
padding: 5px 0;
border-radius: 6px;
/* Position the tooltip text - see examples below! */
position: absolute;
z-index: 1;
}

.tooltip:hover .tooltiptext {
visibility: visible;
}

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

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

h2 {
font-size: 35px;
margin-bottom: 10px;
margin-top: 0px;
color: #fff;
-webkit-text-stroke-color: black;
-webkit-text-stroke-width: 1px;
font-family: n27;
}

p {
color: #51ff1d;
font-family: n27;
}

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

.style-switcher {
padding: 10px 20px; /* Ajoute de l'espace à l'intérieur du bouton */
margin: 20px; /* Ajoute de l'espace autour du bouton */
/* Autres styles pour embellir le bouton si nécessaire */
background-color: red; /* Couleur de fond */
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 */
display: block;
font-size:40px;
}

.switch {
position: relative;
display: inline-block;
width: 60px;
height: 34px;
margin-right: 10px; /* Ajustez l'espace entre le bouton et le texte */
}

.switch .slider {
position: absolute;
cursor: pointer;
top: 0;
left: 0;
right: 0;
bottom: 0;
background-color: rgb(23, 41, 51);
transition: .4s;
border-radius: 34px;
}

.switch .slider:before {
position: absolute;
content: "";
height: 26px;
width: 26px;
left: 4px;
bottom: 4px;
background-color: #51ff1d;
transition: .4s;
}

input:checked + .slider {
background-color: #51ff1d !important;
}

input:checked + .slider:before {
transform: translateX(26px);
background-color: rgb(23, 41, 51); /* ou toute autre couleur de votre choix */
}

input:checked + .slider:after {
transform: translateX(26px);
content: '✓'; /* Vous pouvez remplacer ceci par une icône ou une image si vous le souhaitez */
color: rgb(23, 41, 51); /* Couleur de la coche */
display: block;
position: absolute;
transform: translateX(-50%) translateY(-50%);
top: 50%;
left: 25%; /* Ajustez ce pourcentage pour déplacer la coche à l'endroit souhaité sur le slider */
font-size: 18px; /* Ajustez la taille de la coche ici */
font-weight: bold;
-webkit-text-stroke-width: 0px;
}

.slider.round {
border-radius: 34px;
}

.slider.round:before {
border-radius: 50%;
}

.switch-container {
display: flex;
align-items: center; /* Centre verticalement le texte avec le bouton */
gap: 2px; /* Espace entre le bouton bascule et le texte */
padding:10px;
background-color: rgba(0, 0, 0, 0.95);
text-align: center;
justify-content: center;
}

.switch-label {
font-size: 18px; /* Taille de la police pour le texte */
-webkit-text-stroke-width: 0px;
font-weight: bolder;
}

.moon-icon {
height: 24px; /* Ou la taille que vous préférez */
width: 24px; /* Ou la taille que vous préférez */
margin-left: 10px; /* Ajustez selon le besoin pour l'espacement après l'interrupteur */
}

.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 */
}

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

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



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

    .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: 20px;
        margin-bottom: 0px;
        margin-top: 0px;
        color: rgb(255, 255, 255);
        -webkit-text-stroke-color: white;
        -webkit-text-stroke-width: 0px;
    }

    h2 {
        font-size: 15px;
        margin-bottom: 0px;
        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: 5px; /* 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: 0px; /* Espacement à l'intérieur des boîtes */
        margin: 5px; /* Espacement entre les boîtes */
        text-align: center; /* Centre le texte dans chaque compétence */
    }

    .switch .slider {
        background-color: rgb(23, 41, 51) !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 */
    }

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

    .tooltip {
        position: inherit;
        display: inline-block;
    }

    }