/* ------ Styles pour customiser la carte hydrologie Bretagne : marqueurs, etc. --------- */

/* Styles pour le slide menu de la légende.*/
.leaflet-control-slidemenu{
    cursor: pointer;
}

.leaflet-menu{
    position: absolute;
    background-color: rgba(255, 255, 255, 255);
    overflow: auto;
    cursor: default;
    z-index: 9999;
    box-shadow: #222 -1px -1px 20px 0px;
}

.leaflet-menu-contents {
    padding: 10px;
}

.leaflet-menu::-webkit-scrollbar{
    width: 7px;
    height: 7px;
    background: #f2f2f2;
}

.leaflet-menu::-webkit-scrollbar-thumb{
    border-radius: 2px;
    background: #777;
}

.leaflet-menu-close-button{
    background-color: transparent;
    border: none;
    font-size: 14pt;
    color: #777;
    cursor: pointer;
}

.leaflet-menu-close-button:hover{
    color: #0443a8;
}


.legend-header {
    font-size: 12px; /* default font size for laptop */
}

@media only screen and (max-width: 768px) { /* adjust font size for mobile */
    .legend-header {
        font-size: 10px;
    }
}

.legend-item {
    font-size: 12px; /* default font size for laptop */
    margin-bottom: 0;
    margin-top: 0;
}

@media only screen and (max-width: 768px) { /* adjust font size for mobile */
    .legend-item {
        font-size: 10px;
    }
}

/* Styles pour la fenêtre modale qui apparait au chargement du site*/
.modal-overlay {
            display: none;
            position: fixed;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            background-color: rgba(0, 0, 0, 0.5);
            z-index: 9990;
            justify-content: center;
            align-items: center;
        }

.modal-content {
            background-color: white;
            border-radius: 8px;
            box-shadow: 0 4px 20px rgba(0, 0, 0, 0.3);
            width: 90%;
            max-width: 600px;
            max-height: 80vh;
            overflow-y: auto;
            position: relative;
            animation: slideIn 0.3s ease-out;
        }

@keyframes slideIn {
            from { transform: translateY(-50px); opacity: 0; }
            to { transform: translateY(0); opacity: 1; }
        }

        .modal-header {
            background-color: #2c3e50;
            color: white;
            padding: 15px 20px;
            border-radius: 8px 8px 0 0;
            display: flex;
            justify-content: space-between;
            align-items: center;
        }

.close-btn {
            background: none;
            border: none;
            color: white;
            font-size: 24px;
            cursor: pointer;
            padding: 0;
            width: 30px;
            height: 30px;
            border-radius: 50%;
            transition: background-color 0.3s;
        }

.close-btn:hover {
            background-color: rgba(255, 255, 255, 0.2);
        }

.modal-body {
            padding: 20px;
            line-height: 1.6;
        }
        /*
        tab-button pour ouvrir la fenêtre modale
        Cette classe est utilisée pour le bouton qui ouvre la fenêtre modale.
        Il est positionné de manière fixe sur le côté droit de l'écran juste en dessous legende
        */
.tab-button {
            position: fixed;
            top: 350px;
            right: 0;
            transform: translateY(-50%);
            background-color: #3498db;
            color: white;
            border: none;
            padding: 15px 10px;
            cursor: pointer;
            border-radius: 8px 0 0 8px;
            z-index: 9999;
            transition: all 0.3s ease;
            font-size: 14px;
            font-weight: bold;
            box-shadow: -2px 0 5px rgba(0, 0, 0, 0.2);
        }

.tab-button:hover {
            background-color: #2980b9;
            transform: translateY(-50%) translateX(-5px);
        }

.tab-button.hidden {
            transform: translateY(-50%) translateX(100%);
        }
        /* Styles pour le contenu Markdown dans les commentaires */
.commentaire-content h1,
.commentaire-content h2,
.commentaire-content h3,
.commentaire-content h4,
.commentaire-content h5,
.commentaire-content h6 {
    margin: 15px 0 10px 0;
    font-weight: bold;
}

.commentaire-content h1 { font-size: 1.8em; color: #2c3e50; }
.commentaire-content h2 { font-size: 1.6em; color: #34495e; }
.commentaire-content h3 { font-size: 1.4em; color: #34495e; }
.commentaire-content h4 { font-size: 1.2em; color: #34495e; }

.commentaire-content p {
    margin: 10px 0;
    line-height: 1.6;
}

.commentaire-content ul,
.commentaire-content ol {
    margin: 10px 0;
    padding-left: 20px;
}

.commentaire-content li {
    margin: 5px 0;
    line-height: 1.5;
}

.commentaire-content strong {
    font-weight: bold;
}

.commentaire-content em {
    font-style: italic;
}

.commentaire-content code {
    background-color: #f4f4f4;
    padding: 2px 4px;
    border-radius: 3px;
    font-family: monospace;
}

.commentaire-content pre {
    background-color: #f4f4f4;
    padding: 10px;
    border-radius: 5px;
    overflow-x: auto;
}

.commentaire-content blockquote {
    border-left: 3px solid #3498db;
    margin: 10px 0;
    padding-left: 15px;
    color: #666;
    font-style: italic;
}

.commentaire-content table {
    border-collapse: collapse;
    width: 100%;
    margin: 10px 0;
}

.commentaire-content th,
.commentaire-content td {
    border: 1px solid #ddd;
    padding: 8px;
    text-align: left;
}

.commentaire-content th {
    background-color: #f2f2f2;
    font-weight: bold;
}

/* Styles pour l'affichage dans les popups (image et texte)*/
.image {
    width: 810px; /* default width for laptop */
    height: auto; /* maintain aspect ratio */
}

@media only screen and (max-width: 768px) { /* adjust style for smartphone */
    .image {
        width: 370px;
        height: auto; /* maintain aspect ratio */
    }
}




/* Les styles des différents marqueurs*/

.sup_24h {
                            width: 15px;
                            height: 15px;
                            border: 3.1px solid;
                            border-radius: 100%;
                            border-color: #bababa;
                            background-color: #bababa;
                            position: absolute;
                            /* transform: translate(-50%, -50%); */
                            will-change: transform, opacity;
            }

             @media only screen and (max-width: 768px) {  /* adjust size for mobile */
                            .sup_24h  {
                            width: 18px;
                            height: 18px;
                            }
            }

.no_stat {
                            width: 15px;
                            height: 15px;
                            border: 3.1px solid;
                            border-radius: 100%;
                            border-color: #945229;
                            position: absolute;
                            will-change: transform, opacity;
            }

             @media only screen and (max-width: 768px) {  /* adjust size for mobile */
                            .no_stat  {
                            width: 18px;
                            height: 18px;
                            }
            }

.moyenne {
                            width: 15px;
                            height: 15px;
                            border: 3.1px solid;
                            border-radius: 100%;
                            border-color: #27d817;
                            background-color: #27d817;
                            position: absolute;
                            will-change: transform, opacity;
            }

             @media only screen and (max-width: 768px) {  /* adjust size for mobile */
                            .moyenne  {
                            width: 18px;
                            height: 18px;
                            }
            }

.inf_tres_faible {
                            width: 15px;
                            height: 15px;
                            border: 3.1px solid;
                            border-radius: 100%;
                            border-color: #ff0000;
                            background-color: #ff0000;
                            position: absolute;
                            will-change: transform, opacity;
            }

             @media only screen and (max-width: 768px) {  /* adjust size for mobile */
                            .inf_tres_faible  {
                            width: 18px;
                            height:18px;
                            }
            }

.inf_faible {
                            width: 15px;
                            height: 15px;
                            border: 3.1px solid;
                            border-radius: 100%;
                            border-color: #ff8d00;
                            background-color: #ff8d00;
                            position: absolute;
                            will-change: transform, opacity;
            }

             @media only screen and (max-width: 768px) {  /* adjust size for mobile */
                            .inf_faible  {
                            width: 18px;
                            height: 18px;
                            }
            }

.niveau1 {
                            width: 15px;
                            height: 15px;
                            border: 3.1px solid;
                            border-radius: 100%;
                            border-color: #d8c617;
                            background-color: #d8c617;
                            position: absolute;
                            will-change: transform, opacity;
            }

             @media only screen and (max-width: 768px) {  /* adjust size for mobile */
                            .niveau1  {
                            width: 18px;
                            height: 18px;
                            }
            }

.niveau2 {
                            width: 15px;
                            height: 15px;
                            border: 3.1px solid;
                            border-radius: 100%;
                            border-color: #b9d817;
                            background-color: #b9d817;
                            position: absolute;
                            will-change: transform, opacity;
            }

             @media only screen and (max-width: 768px) {  /* adjust size for mobile */
                            .niveau2  {
                            width: 18px;
                            height: 18px;
                            }
            }

.niveau3 {
                            width: 15px;
                            height: 15px;
                            border: 3.1px solid;
                            border-radius: 100%;
                            border-color: #00ff85;
                            background-color: #00ff85;
                            position: absolute;
                            will-change: transform, opacity;
            }

             @media only screen and (max-width: 768px) {  /* adjust size for mobile */
                            .niveau3  {
                            width: 18px;
                            height: 18px;
                            }
            }
.sup_fort {
                            width: 15px;
                            height: 15px;
                            border: 3.1px solid;
                            border-radius: 100%;
                            border-color: #00f9ff;
                            background-color: #00f9ff;
                            position: absolute;
                            will-change: transform, opacity;
            }

             @media only screen and (max-width: 768px) {  /* adjust size for mobile */
                            .sup_fort  {
                            width: 18px;
                            height: 18px;
                            }
            }


.inf_qmna5 {
                            width: 15px;
                            height: 15px;
                            border: 3.1px solid;
                            border-radius: 100%;
                            border-color: #A802F5;
                            background-color: #A802F5;
                            position: absolute;
                            will-change: transform, opacity;
            }

             @media only screen and (max-width: 768px) {  /* adjust size for mobile */
                            .inf_qmna5  {
                            width: 18px;
                            height: 18px;
                            }
            }

.inf_vcn3_5 {
                            width: 15px;
                            height: 15px;
                            border: 3.1px solid;
                            border-radius: 100%;
                            border-color: #E902F5;
                            background-color: #E902F5;
                            position: absolute;
                            will-change: transform, opacity;
            }

             @media only screen and (max-width: 768px) {  /* adjust size for mobile */
                            .inf_vcn3_5  {
                            width: 18px;
                            height: 18px;
                            }
            }

.inf_vcn3_10 {
                            width: 15px;
                            height: 15px;
                            border: 3.1px solid;
                            border-radius: 100%;
                            border-color: #F50290;
                            background-color: #F50290;
                            position: absolute;
                            will-change: transform, opacity;
            }

             @media only screen and (max-width: 768px) {  /* adjust size for mobile */
                            .inf_vcn3_10  {
                            width: 18px;
                            height: 18px;
                            }
            }

.inf_module {
                            width: 15px;
                            height: 15px;
                            border: 3.1px solid;
                            border-radius: 100%;
                            border-color: #5B27F5;
                            background-color: #5B27F5;
                            position: absolute;
                            will-change: transform, opacity;
            }

             @media only screen and (max-width: 768px) {  /* adjust size for mobile */
                            .inf_module  {
                            width: 18px;
                            height: 18px;
                            }
            }

.sup_module {
                            width: 15px;
                            height: 15px;
                            border: 3.1px solid;
                            border-radius: 100%;
                            border-color: #69DBC9;
                            background-color: #69DBC9;
                            position: absolute;
                            will-change: transform, opacity;
            }

             @media only screen and (max-width: 768px) {  /* adjust size for mobile */
                            .sup_module  {
                            width: 18px;
                            height: 18px;
                            }
            }

.module {
                            width: 15px;
                            height: 15px;
                            border: 3.1px solid;
                            border-radius: 100%;
                            border-color: #2795F5;
                            background-color: #2795F5;
                            position: absolute;
                            will-change: transform, opacity;
            }

             @media only screen and (max-width: 768px) {  /* adjust size for mobile */
                            .module  {
                            width: 18px;
                            height: 18px;
                            }
            }