/* Styles pour la page et les éléments */
@import url('https://fonts.googleapis.com/css2?family=EB+Garamond:wght@400;700&display=swap');

body {
   font-family: Arial, Helvetica, sans-serif;
    background: url('../images/GREENSGIVE_2000_filigrane_2.jpg') no-repeat center center fixed;
    background-size: 60%; /* Ajustement de la taille de l'image de fond */
    width: 95%; /* Réduire la largeur pour ajouter une marge intérieure de 5% de chaque côté */

    text-align: center; /* l'icone GREENSGIVE */
}



/* pour les champ à remplir */
.formulaire-container {
    display: flex;
    width: 90%;
    min-width: 720px; /* Largeur minimale pour s'adapter aux petits écrans */
    align-items: center;
    gap: 10px;
    padding: 10px;
    /* Correction de la propriété margin, suppression de la faute de frappe '2x' */
    margin-left: auto;
    margin-right: auto;
    /* Centrer le contenu dans le conteneur parent */
    justify-content: center;
    border: 2px solid #53423182;
    border-radius: 10px;
    background-color: rgba(240, 240, 240, 0.5);
    box-shadow: 0px 4px 20px rgba(0, 0, 0, 0.2);
}
.formulaire-container label {
    white-space: nowrap;
    margin: 0;
}


/* c'est le cadre de la page dynamique principale */
.frame-central {
    display: none;
    position: left;
    padding: 5px;
    min-width: 720px;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 80%;

    @media (max-width: 650px) {
        width: 90%;
    }
    height: 90%;
    background-color: rgb(88, 37, 37);
    border: 10px solid #7c2e2e;
    border-radius: 20px;
    z-index: 1000;
    box-shadow: 0px 10px 20px rgba(0, 0, 0, 0.4);
}


#content {
    width: 100%;
    max-width: 1000px; /* Limite maximale de largeur pour s'adapter à des écrans plus larges */
    margin-top: 20px;
    margin-bottom: 20px;
    padding: 20px;
    background: rgba(255, 250, 250, 0.6); /* Fond blanc semi-transparent pour le contenu */
    border-radius: 15px; /* Bordure arrondie */
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2); /* Ombre pour un effet de profondeur */
    box-sizing: border-box;
}


p {
    font-family:'Gill Sans', 'Gill Sans MT', Calibri, 'Trebuchet MS', sans-serif;
    font-size: 16px;
    font-weight: normal;
    text-align: justify;
    margin-bottom: 10px;
    color: #1c1919; /* Couleur du texte */
    width: 90%;
    max-width: 800px;
    margin: 10px auto;
    
}

    p.centered { 
        text-align: center; 
        text-align-last: center; 
        max-width: 800px; 
        margin: 0 auto; 
    } 

    p.grandmessage {
        font-family: ‘EB Garamond‘, serif; 
        text-align: center; 
        text-align-last: center; 
        font-size: 36px;  
        max-width: 800px;
    }

/* Styles pour les titres */ 
#title1 {
    font-family: 'EB Garamond', serif;
    font-size: 40px;
    font-weight: bold;
    text-align: center;
    margin-bottom: 40px;
    color: #373737; 
}

/* Styles pour les titres */ 
#title2 {
    font-family: 'EB Garamond', serif;
    font-size: 40px;
    font-weight: bold;
    text-align: justify;
    padding-left: 100px;
    padding-right: 100px;
    color: #565656; 
}

.soustitre {
    font-family: 'EB Garamond', serif;
    font-size: 20px;
    font-weight: bold;
    text-align: center;
    margin-bottom: 20px;
    color: #3f2912; /* Couleur du texte */
}

h1 {
    font-family: 'EB Garamond', serif;
    font-size: 20px;
    margin-top: 30px;
    margin-bottom: 15px;
    font-weight: bold;
    text-align: center;
    margin-bottom: 20px;
    color: #393939; /* Couleur du texte */
}

h2 {
    font-family: 'EB Garamond', serif;
    font-size: 20px;
    font-weight: normal;
    text-align: center;
    margin-top: -20px;
    color: #1c24b3; /* Couleur du texte */
}
#title2 {
    font-family: 'Garamond', serif;
    font-size: 20px;
    font-weight: bold;
    text-align: center;
    margin-bottom: 20px;
}



br {
    font-family:'Gill Sans', 'Gill Sans MT', Calibri, 'Trebuchet MS', sans-serif;
    font-size: 12px;
    text-align:justify;
    color: #000000; /* Couleur du texte */
}


li {
    font-family:'Gill Sans', 'Gill Sans MT', Calibri, 'Trebuchet MS', sans-serif;
    font-size: 12px;
     text-align: left;
     margin-top: 0px;
     margin-bottom: 0px;
     margin-left: 10%;

}

ul {
    font-family:'Gill Sans', 'Gill Sans MT', Calibri, 'Trebuchet MS', sans-serif;
    font-size: 12px;
    text-align: left;
    margin-left: 20%;

}


.level button {
    margin: 0px;
}














/* boutons */
/* Style pour les boutons */


button {
    padding: 10px;
    padding-left: 15px;
    padding-right: 15px;
    margin-right: 10px;
    font-size: 16px;
    border-radius: 30px;
    border: none;
    background-color: #d5ceb3;
    color: black;
    cursor: hand;
    
    transition: background-color 1.3s;
    box-shadow: 1px 2px 6px rgba(0, 0, 0, 0.2); /* Ombre pour un effet de profondeur */
    margin-bottom: 20px; /* Ajouter un espace en dessous */
    margin-top: 20px; /* Ajouter un espace en dessous */
}
.validation-button {
    padding: 10px ;
    font-size: 12px;
    border-radius: 5px;
    border: none;
    background-color: #f2e9b4;
    color: black;
    cursor: pointer;
    margin-top: 0px;
    transition: background-color 0.3s, transform 0.3s;
    box-shadow: 2px 4px 10px rgba(0, 0, 0, 0.3); /* Ombre pour un effet de profondeur */
}
.important-button {
    padding: 12px 30px;
    font-size: 14px;
    border-radius: 25px;
    border: none;
    background-color: #414256; /* meme couleur que la surbrillance regions */
    color: rgb(255, 255, 255);
    cursor: pointer;
    transition: background-color 0.3s, transform 0.3s;
    box-shadow: 2px 4px 10px rgba(0, 0, 0, 0.3); /* Ombre pour un effet de profondeur */
    display: block;
    margin: 0 auto; /* Centrer le bouton horizontalement */
    margin-bottom: 20px; /* Ajouter un espace en dessous */
    margin-top: 20px; /* Ajouter un espace en dessous */
}

.important-button:hover {
    background-color: #70cc00; /* Rouge plus foncé au survol */
    transform: scale(1.05); /* Légère augmentation de la taille au survol */
}
.inactive-button {
    background-color: #ccc; /* Gris pour montrer l'inactivité */
    color: #666; /* Texte plus clair */
    cursor: not-allowed; /* Curseur indiquant qu'il n'est pas interactif */
    opacity: 0.6; /* Légère transparence */
}

button:hover {
    background-color: #7dbb02;
}

.input-button-container {
    display: flex;
    align-items: center;
    gap: 10px; /* Espacement entre l'input et le bouton */
}

.input-button-container input {
    flex: 1; /* Permet à l'input de prendre tout l'espace disponible */
    padding: 5px;
    font-size: 16px;
}

.input-button-container .validate-button {
    padding: 5px 10px;
    background-color: #ffc107; /* Jaune similaire au bouton précédent */
    color: #000;
    border: none;
    border-radius: 5px;
    cursor: pointer;
    font-size: 16px;
}

.input-button-container .validate-button:hover {
    background-color: #ffcd39; /* Légère variation au survol */
}



















/* Style pour les questions */
.question-container {
    display: flex;
    flex-direction: row;
    justify-content: center;
    align-items: center;
    width: fit-content;
    margin: 20px auto;
    padding: 10px;
    font-size: 16px;
    margin-top: 20px;    
}

input, select {
    width: 70%;
    padding: 5px;
    font-size: 16px;
    margin-top: 5px;
    margin-bottom: 10px;
    border-radius: 5px;
    border: 1px solid #ccc;
    box-sizing: border-box;
}



/* Assurer que les selects ont une apparence cohérente */
select {
    appearance: none;
    -moz-appearance: none;
    cursor: pointer;

}



/*
.checkbox-container {
    display: flex;
    align-items: center;
    margin-top: 5px;
}

.checkbox-container input {
    margin-right: 10px;
}

.checkbox-container label {
    margin: 0;
    flex-grow: 1;
}
*/



.choice-buttons {
    display: flex;
    gap: 10px;
    flex-wrap: wrap;
    margin-bottom: 10px;
    justify-content: left; /* Centrer les boutons de choix */
}

.choice-button {
    padding: 5px 10px;
    font-size: 14px;
    border-radius: 10px;
    border: none;
    background-color: #f0f0f0;
    color: black;
    transition: background-color 0.3s;
}

.choice-button:hover {
    background-color: #b0b0b0;

    
}


#output {
    white-space: pre-wrap;
    background-color: #f9f9f9;
    padding: 20px;
    border-radius: 10px;
    border: 1px solid #ccc;
    box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
    margin-top: 0px;
    max-width: 600px;
}






.button-horizontal {
    display: flex;
    flex-direction: row;
    justify-content: center;
    align-items: center;
    gap: 10px;
    width: fit-content;
    margin: 0px auto;
    padding: 0px;
}

.button-alternative {
    background: none; /* Pas de fond */
    border: none; /* Pas de bordure */
    color: rgb(96, 123, 158); /* Couleur du texte */
    text-decoration: underline; /* Style de lien souligné */
    cursor: pointer; /* Curseur pointeur */
    font-size: 12px; /* Taille de police */
    padding: 0px; /* Pas d'espace interne pour éviter l'effet "boîte" */
    margin: 0; /* Pas de marges externes */
    margin-left: 5px; /* Pas de marges externes */
    margin-right: 5px; /* Pas de marges externes */
    box-shadow: none; /* Pas d'ombre */
    outline: none; /* Supprime le contour au focus */
    transition: color 1.3s;
    text-decoration: none; /* Pas de soulignement par défaut */
}

.button-alternative:hover {
     color: rgb(1, 36, 178); /* Couleur du texte */
     background: none ; /*rgb(231, 237, 219); /* Pas de fond */

}



.button-menu {
    background: rgba(218, 218, 218, 0.595); /* Couleur du texte */
    border: white; /* Pas de bordure */
    color: rgba(40, 17, 17, 0.595); /* Couleur du texte */
    cursor: pointer; /* Curseur pointeur */
    font-size: 10px; /* Taille de police */
    box-shadow: none; /* Pas d'ombre */
    
    }

.button-menu-off {
    background: rgba(158, 160, 159, 0.595); /* Couleur du texte */
    border: white; /* Pas de bordure */
    color: rgba(255, 255, 255, 0.595); /* Couleur du texte */
    cursor: pointer; /* Curseur pointeur */
    font-size: 10px; /* Taille de police */
    box-shadow: none; /* Pas d'ombre */
    }

    .button-menu-off:hover {
        background: rgba(158, 160, 159, 0.595); /* Couleur du texte */
        color: rgb(204, 114, 45); /* Couleur du texte */
    }




/* Conteneur pour l'émoji utilisateur */
.user-emoji-container {
    display: flex;
    align-items: right;
    justify-content: center;
    color: rgb(4, 118, 0); /* Couleur du texte */
}

/* Style pour le lien autour de l'émoji */
.emoji-link {
    text-decoration: none;
    color: rgb(4, 118, 0); /* Couleur du texte */
}

/* Style pour l'émoji utilisateur */
.user-emoji {
    font-size: 1.2rem; /* Ajustez la taille selon vos besoins */
    transition: transform 0.3s ease, color 0.3s ease;
    cursor: pointer;
}

/* Effet au survol */
.emoji-link:hover .user-emoji {
    transform: scale(1.1);
}




/* Style général pour le tableau */
table {
    width: 100%; /* Le tableau occupe  la largeur disponible */
    border-collapse: collapse; /* Fusionne les bordures pour un style propre */
    margin-top: 20px; /* Espacement au-dessus du tableau */
    font-size: 12px; /* Taille de police réduite pour un style compact */
    font-family: Arial, sans-serif; /* Police moderne et lisible */
    background-color: #f8f8f8; /* Fond léger */
    box-shadow: 0px 2px 15px rgba(109, 109, 109, 0.4); /* Ombre douce */
    margin: 0 auto;
    border: none;
    border-left: none;
    border-right: none;    
}

/* Style pour les lignes du tableau user */
.user-info-table {
    width: 90%;
    min-width: 500px; /* Largeur minimale pour s'adapter aux petits écrans */
    margin: auto;
    border-collapse: collapse;
    font-family: 'Garamond', sans-serif;
    font-size: 12px;
    background-color: none;
    box-shadow: none;
    background: none;
    
}

.user-info-table td {
    text-align: left;
    border-bottom: 1px solid #ccc;
}

.user-info-table td:first-child {
    width: 50%;
    text-align: right;
    font-weight: 500;
}

.user-info-table td:last-child {
    width: 50%;
    text-align: left;
    font-weight: bold;
}


/* Style des cellules */
th, td {
    padding: 2px 2px; /* Espacement réduit à l’intérieur des cellules */
    text-align: left; /* Alignement du texte à gauche */
    border: 1px solid #ddd; /* Bordures discrètes */
    border-left: none;
    border-right: none;
    padding-left: 10px;

    
}

/* Style des en-têtes */
th {
    background-color: #f5f1ea; /* Couleur plus sombre pour les en-têtes */
    color: rgb(0, 0, 0); /* Texte blanc pour contraster avec le fond */
    font-weight: bold; /* Texte en gras */
    

}

/* Couleur des lignes alternées */
tr:nth-child(even) {
    background-color: #f2f2f2; /* Fond léger pour les lignes paires */
}

/* Style au survol des lignes */
tr:hover {
    background-color: #b3d9ff; /* Fond différent au survol */
    cursor: pointer; /* Change le curseur pour indiquer une interactivité */
    transition: background-color 1.0s;

}

/* Style pour les colonnes fusionnées */
td[colspan="2"] {
    text-align: center; /* Centrer le contenu pour les colonnes fusionnées */
    font-style: italic; /* Style italique pour un effet distinct */
    color: #888; /* Couleur plus douce */
    border-top: 1px solid #ccc; /* Ligne de séparation visible */
}

/* Conteneur du tableau pour centrer */
.table-container {
    display: flex;
    justify-content: center;
    align-items: center;
    padding: 5px;
}




/* Style pour les images */
.footer-icons img {
    filter: grayscale(100%);
}




 /* CSS intégré pour éviter un fichier séparé */
 #map {
    height: 100vh; /* Set the height of the map to fill the viewport */
    width: 100vw; /* Set the width of the map to fill the viewport */
}

 /* le transparency... est celui qui contient le logo GG*/
#transparency-slider-container {
    position: absolute;
    top: 10px; /* Adjust as needed */

    z-index: 1000; /* Ensure the logo is above the map */
    display: inline-block;
    padding: 0;
    margin: 0;
    border-radius: 100%;
    border: none;
    width: 120px;
    height: 120px;
    box-shadow: 0px 4px 0100px rgba(0, 0, 0, 0.0); /* Ajoute une ombre pour un meilleur effet visuel */

}

#transparency-image {
    width: 120px;
    height: 120px;
    border-radius: 100%; /* Crée un masque rond */
    object-fit: cover; /* Assure que l'image couvre complètement le conteneur tout en conservant son ratio */
    cursor: pointer;
    box-shadow: 0px 4px 0100px rgba(0, 0, 0, 0.0); /* Ajoute une ombre pour un meilleur effet visuel */
    display: block;
    margin-left: auto;
    margin-right: auto;
    margin-top: 20px;
}

/*
#popup {
    display: none;
    position: fixed;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
    width: 80%;
    height: 80%;
    background-color: white;
    border: 1px solid #ccc;
    box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
    overflow: auto;
    z-index: 1000;
    border-radius: 20px;
}
*/

/* Style pour le bouton de fermeture */

#popup iframe {
    width: 100%;
    height: 100%;
    border: 0px;
    border-radius: 20px;
}
  
#popup-close {
    position: absolute;
    top: 10px;
    right: 10px;
    cursor: pointer;
}


/* Style pour le popup carto */
.popup-carto {
    display: none;
    position: fixed;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 100%;
    height: 80%;
    background-color: rgb(255, 250, 243);
    border: 2px solid #ffffff;
    border-radius: 20px;
    box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
    overflow: auto;
    z-index: 1000;
}

.popup-carto-p {
    padding: 0px;
    font-size: 16px;
    line-height: 0.0;
    text-align: left;
    color: rgba(0, 0, 0, 0.8);
}

.popup-carto iframe {
    width: 100%;
    height: 100%;
    border: none;
   
}

.popup-carto-close {
    position: absolute;
    top: 10px;
    right: 10px;
    cursor: pointer;
    font-size: 20px;
    background: none;
    border: none;
    color: #333;
}

.logo-label {
    width: auto; /* Ajustez la largeur selon vos besoins */
    height: 30px; /* Ajustez la hauteur selon vos besoins */
    background-color: transparent; /* Rend le fond transparent */

    border-radius: 00%; /* Bordure arrondie pour un effet circulaire */
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1); /* Ombre pour un effet de profondeur */
    margin: 5px; /* Espacement autour du logo */
    overflow: hidden; /* Cache tout débordement */
}

.logo-label img {
    width: 100%;
    height: 100%;
    object-fit: cover; /* Assure que l'image couvre complètement le conteneur tout en conservant son ratio */
    border-radius: 0%; /* Bordure arrondie pour un effet circulaire */
    background-color: transparent; /* Rend le fond transparent */
}

/* Mode cadre (iframe) 
.frame-mode body {
    display: block;
    width: 100%;
    margin: 0;
    padding: 20px;
    text-align: center;
    background: none;
}
    */

.frame-mode table {
    width: auto;
    margin: 20px auto;
    box-shadow: none;
}
.frame-mode h1, .frame-mode h2 {
    margin-top: 40px;
}

/* ca ressemble ici aux cadres du centre*/
  html, body {
            margin: 0;
            padding: 0;
            overflow: auto;
            width: 100%;
            height: 100%;
        }

        #map {
            width: 100%;
            height: 100%;
        }
/* la fenetre centrale */
        #frame-container {
            display: none;
            position: fixed;
            top: 50%;
            left: 50%;
            transform: translate(-50%, -50%);
            width: 60%;
            height: 80%;
            background-color: white;
            border: 1px solid #ccc;
            z-index: 1000;
                    
        }
        @media (max-width: 600px) {
            #frame-container {
            width: 95%;
            }
        }
        #frame-container iframe {
            width: 100%;
            height: 100%;
            border: none;
          }


/* affichage des scores */
        .score-container {
            display: inline-flex;
            background-color: rgb(255, 255, 255);
            border-radius: 30px;
            padding-left: 5px;
            padding-right: 5px;
            padding-bottom: 0px;
            padding-top: 1px;
            gap: 4px;
        }
        
        .score-container span {
            font-size: 16px;
        }








/*Style pour le contrat */
.contrat-titre {
    font-family: Arial, Helvetica, sans-serif;
    font-size: 30px;
    font-weight: bold;
    text-align: center;
    margin-top: 40px;
    margin-bottom: 10px;
    color: #6f6f6f; /* Couleur du texte */
    border: 1px solid black; /* Encadré d'un trait fin noir */
    padding: 10px; /* Ajoute un peu d'espace autour du texte */
}

.contrat-titre-annexe{
    font-family: Arial, Helvetica, sans-serif;
    font-size: 30px;
    font-weight: bold;
    text-align: left;
    margin-top: 40px;
    margin-bottom: 10px;
    color: #6f6f6f; /* Couleur du texte */
    padding: 10px; /* Ajoute un peu d'espace autour du texte */
}
.contrat-partie {
    font-family: 'EB Garamond', serif;
    font-size: 18px;
    font-weight: bold;
    text-align: left;
    margin-top: 20px;
    margin-bottom: 20px;
    color: #000000; /* Couleur du texte */
}
.contrat-titre0 {
    font-family: Arial, Helvetica, sans-serif;
    font-size: 18px;
    font-weight: bold;
    text-align: left;
    margin-top: 20px;
    margin-bottom: 10px;
    color: #6f6f6f; /* Couleur du texte */
}
.contrat-titre1{
    font-family: Arial, Helvetica, sans-serif;
    font-size: 20px;
    font-weight: bold;
    text-align: left;
    margin-top: 20px;
    margin-bottom: 0px;
    color: #838383; /* Couleur du texte */
}
.contrat-titre2{    
    font-family: Arial, Helvetica, sans-serif;
    font-size: 16px;
    font-weight: bold;
    text-align: left;
    margin-top: 10px;
    margin-bottom: 0px;
    color: #403434; /* Couleur du texte */}
.contrat-titre3{
    font-family: Arial, Helvetica, sans-serif;
    font-size: 14px;
    font-weight: bold;
    text-align: left;
    margin-top: 20px;
    margin-bottom: 0px;
    color: #403434; /* Couleur du texte */
}
.contrat-paragraphe{
    font-family: 'EB Garamond', serif;
    font-size: 12px;
    font-weight: normal;
    text-align: justify;
    margin-top: 0px;
    margin-bottom: 2px;
    color: #000000; /* Couleur du texte */
}
.contrat-puce{ 
    font-family: 'EB Garamond', serif;
    font-size: 12px;
    margin-top: 0px;
    margin-bottom: 0px;
    font-weight: normal;
    text-align: left; /* Aligné à gauche */
    margin-bottom: 0px;
    color: #000000; /* Couleur du texte */
    list-style-type: '* '; /* Ajoute un tiret */
}
.contrat-tiret{
    font-family: 'EB Garamond', serif;
    font-size: 12px;
    font-weight: normal;
    text-align: justify;
    margin-top: 0px;
    margin-bottom: 0px;
    color: #000000; /* Couleur du texte */
    list-style-type: '- '; /* Ajoute un tiret */
    line-height: 1.2; /* Réduit l'espace entre les lignes */
}


/* tableau du contrat*/ 
.contrat-tableau {
    font-size: 12px;
    border-collapse: collapse;
    width: auto;
    margin-top: 10px;
    margin-bottom: 20px;
    box-shadow: none; /* Pas d'ombre */
}

.contrat-tableau tr {
    border-top: 3px solid white;
    border-bottom: 3px solid white;
}

.contrat-tableau td {
    border-right: 3px solid white; 
}

.contrat-tableau td:first-child {
    text-align: right;
    background-color: transparent;
}

.contrat-tableau td:last-child {
    background-color: #d1d1d1;
    font-weight: bold;
    text-align: left;
    min-width: 200px; 
}






/* formaulaire pour saisir le territoire */
.territoire-formulaire {
    display: flex;
    flex-direction: column;
    gap: 00px;
    align-items: center;
    width: 100%;
    justify-content: center;
}

.territoire-selects {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 10px;
    width: 80%;
}

.territoire-block {
    color: #fff;
    display: flex;
    flex-direction: column;
    gap: 5px;
    text-align: center;
    justify-content: center;
}

.territoire-formulaire select {
    background-color: #8b7e74b2;
    color: #fff;
    border-radius: 25px;
    padding: 8px 15px;
    border: 1px solid #ccc;
    font-weight: bold;
    width: 180px;
    max-width: 250px;
    text-align: center;
    text-overflow: ellipsis;
    overflow: hidden;
    white-space: nowrap;
    display: flex;
    align-items: center;
    justify-content: center;
}



@media screen and (max-width: 768px) {
    table {
      width: 100%;
      border: none;
      font-size: 13px;
      display: block;
      overflow-x: auto;
    }
  
    table thead {
      display: none;
    }
  
    table, table tbody, table tr, table td {
      display: block;
      width: 100%;
    }
  
    table tr {
      margin-bottom: 1rem;
      border: 1px solid #ccc;
      border-radius: 10px;
      padding: 10px;
      background-color: #fff;
    }
  
    table td {
      text-align: left;
      padding-left: 50%;
      position: relative;
    }
  
    table td::before {
      position: absolute;
      top: 10px;
      left: 10px;
      width: 45%;
      white-space: nowrap;
      font-weight: bold;
      color: #333;
    }
  
    /* Colonnes spécifiques */
    table td:nth-of-type(1)::before { content: "ID"; }
    table td:nth-of-type(2)::before { content: "Visible"; }
    table td:nth-of-type(3)::before { content: "Type"; }
    table td:nth-of-type(4)::before { content: "Nom"; }
    table td:nth-of-type(5)::before { content: "État"; }
    table td:nth-of-type(6)::before { content: "Actions"; }
  }

  /* pour les jetons en haut à droite */
  #intention-inventory {
    position: absolute;
    top: 80px;
    right: 10px;
    width: 60px;
    background: rgba(255, 255, 255, 0.9);
    border-radius: 10px;
    padding: 5px;
    z-index: 1000;
    box-shadow: 0 0 8px rgba(0,0,0,0.2);
}

.intention-badge {
    width: 40px;
    height: 40px;
    margin: 5px auto;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 20px;
    cursor: pointer;
    transition: transform 0.2s;
}

.intention-badge:hover {
    transform: scale(1.2);
}

.badge-genie {
    background: #1E90FF; /* bleu */
    color: white;
}

.badge-operateur {
    background: #FFD700; /* or */
    color: black;
}



.switch {
    position: relative;
    display: inline-block;
    width: 50px;
    height: 26px;
    margin-left: 5px;
  }
  .switch input {
    opacity: 0;
    width: 0;
    height: 0;
  }
  .slider {
    position: absolute;
    cursor: pointer;
    top: 0; left: 0;
    right: 0; bottom: 0;
    background-color:rgb(122, 74, 41);
    transition: .4s;
    border-radius: 26px;
  }
  .slider:before {
    position: absolute;
    content: "";
    height: 20px; width: 20px;
    left: 4px; bottom: 3px;
    background-color: white;
    transition: .4s;
    border-radius: 50%;
  }
  input:checked + .slider {
    background-color: #5cb85c;
  }
  input:checked + .slider:before {
    transform: translateX(24px);
  }