/*
Theme Name: theme_secondaire
Template:     astra
*/

/*===========================================================================================================
                                                    --- POLICES 
============================================================================================================= */

@import url("https://fonts.googleapis.com/css2?family=Lexend+Deca&display=swap");
@import url("https://fonts.googleapis.com/css2?family=Lexend+Deca:wght@900&display=swap");

/*===========================================================================================================
                                                    --- MEDIA 
============================================================================================================= */

@media (max-width: 921px) {
    .ast-theme-transparent-header #masthead {
        position: relative !important;
        width: 100% !important;
        top: 0 !important;
        z-index: 1000 !important;
    }
}

/* DEBUT Media query pour le menu du dashboard */
@media only screen and (max-width: 768px) {
    .menu {
        flex-direction: column;
        align-items: stretch;
    }

    .menu__item {
        margin: 5px 0;
    }

    .ml-auto {
        margin-top: 10px;
    }
}

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

    .search-btn,
    .logout-btn {
        font-size: 0;
        display: flex;
        align-items: center;
    }

    .search-btn i,
    .logout-btn i {
        font-size: 1rem;
    }
}

@media only screen and (max-width: 1090px) {
    .menu__item {
        font-size: 0.9em;
    }
}

/* FIN Media query pour le menu du dashboard */

.swal2-styled.swal2-confirm,
.swal2-styled.swal2-cancel {
    color: white;
    background-color: transparent;
    border: none;
    text-shadow: none;
}

.swal2-styled.swal2-confirm:hover,
.swal2-styled.swal2-cancel:hover {
    color: white;
}

.swal2-styled:focus {
    outline: none !important;
}

.swal2-cancel {
    background-color: #c55858 !important;
}

.swal2-styled:hover {
    filter: brightness(90%);
}


/* Styles pour écrans mobiles */
@media screen and (max-width: 768px) {

    /* Masquer les quatre rectangles */
    .quatre-rectangles {
        display: none;
    }

    /* Ajuster le titre principal */
    .title-container {
        margin-top: 0px !important;
    }

    /* Chevron ajusté */
    .chevron-down {
        display: block;
        margin: 20px auto;
        /* Centrer le chevron */
        width: 30px;
        /* Réduire la taille pour mobile */
        height: auto;
    }

    .sous-titre {
        display: none !important;
    }

    body .main-title {
        font-size: 8vw !important;
        white-space: normal !important;
        /* Permet le retour à la ligne */
        max-width: 90%;
        /* Empêche le dépassement horizontal */
        margin: 0 auto;
        /* Centre le titre horizontalement */
    }


}


/*===========================================================================================================
                                                    --- ACCUEIL 
============================================================================================================= */

/* barre footer */
/*.site-primary-footer-wrap[data-section="section-primary-footer-builder"] {}*/

/*.site-footer {}*/


body {
    opacity: 0;
    animation: fadeIn 1s ease-in-out forwards;
    margin: 0;
    display: absolute;
    align-items: center;
    justify-content: center;
    -webkit-tap-highlight-color: transparent;
    background-color: #faf5ef;
}

.quatre-rectangles {
    width: 45%;
    position: relative;
    margin: 0 auto;
    align-items: center;
    opacity: 0;
    transition: opacity 1s ease-in-out;
}

.quatre-rectangles.visible {
    opacity: 1;
}

.rectangle {
    height: 19em;
    --rectangle-margin: 3.5em;
    margin: var(--rectangle-margin) 0;
    background-color: #fef1f2;
    position: relative;
    display: flex;
    justify-content: center;
    border-radius: 40px;
    padding: 1em;
    box-sizing: border-box;
    overflow: visible;
    /* Permettre le débordement */
}

.rectangle::before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    transition: filter 0.5s ease-in-out;
    filter: blur(5px);
    z-index: 0;
    border-radius: 40px;
}

.rectangle-1::before {
    background-image: url("/wp-content/themes/astra/images/Capture-cadastre1.png");
}

.rectangle-2::before {
    background-image: url("/wp-content/themes/astra/images/Capture-tableau1.png");
}

.rectangle-3::before {
    background-image: url("/wp-content/themes/astra/images/Capture-map.png");
}

.rectangle-4::before {
    background-image: url("/wp-content/themes/astra/images/Capture4.png");
}

.rectangle:hover::before {
    filter: blur(0);
}

.text-container {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    max-width: 250px;
    transition: transform 0.5s ease-in-out;
    z-index: 1;
    /* Assurez-vous que le texte est au-dessus de l'arrière-plan */
}

.text-left {
    left: -8em;
}

.text-right {
    right: -8em;
}

.rectangle:hover .text-left {
    transform: translate(-10em, -50%);
}

.rectangle:hover .text-right {
    transform: translate(10em, -50%);
}

.image-container-accueil {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    width: 21em;
    height: 21em;
    border-radius: 10px;
    display: flex;
    justify-content: center;
    align-items: center;
    transition: opacity 0.5s ease-in-out, transform 0.5s ease-in-out;
    z-index: 1;
    /* Assurez-vous que l'image est au-dessus de l'arrière-plan */
}

.image-left {
    left: -12em;
}

.image-right {
    right: -12em;
}

.rectangle:hover .image-left {
    transform: translate(-14em, -50%);
}

.rectangle:hover .image-right {
    transform: translate(14em, -50%);
}

.image-container-accueil img {
    width: 100%;
    height: 100%;
    border-radius: 10px;
}

.text-titre {
    color: #003300;
    font-family: "Lexend Deca", serif;
    letter-spacing: 2px;
    font-weight: 900;
    font-size: 1.8em;
    margin-bottom: 0.5em;
}

.text-rectangle {
    color: #003300;
    font-family: "Lexend Deca", serif;
    letter-spacing: 2px;
    font-weight: 400;
    font-size: 1.2em;
}

.circle-number {
    width: 3em;
    height: 3em;
    background-color: #41be54;
    border-radius: 50%;
    display: flex;
    justify-content: center;
    align-items: center;
    color: white;
    font-size: 1.5em;
    font-family: "Lexend Deca", sans-serif;
    position: relative;
    z-index: 2;
    margin-top: 1em;
    align-self: center;
}

.rectangle:not(:last-child)::after {
    content: "";
    position: absolute;
    top: 50%;
    left: 50%;
    width: 0;
    height: calc(100% + var(--rectangle-margin));
    border-left: 4px dotted #41be54;
    transform: translateX(-50%);
    z-index: 1;
    opacity: 0.5;
}

.first-word {
    color: #41be54;
}

@keyframes fadeIn {
    from {
        opacity: 0;
    }

    to {
        opacity: 1;
    }
}

.title-container,
.image-container,
.image-item,
.btn-content,
.gradient-sous-titre {
    opacity: 0;
    animation: fadeIn 1s ease-in-out forwards;
}

.image-container {
    animation-delay: 0.75s;
}

.image-item {
    animation-delay: 0.75s;
}

.btn-content {
    animation-delay: 0.75s;
}

.title-container {
    text-align: center;
    color: #fff;
    padding: 20px;
    animation-delay: 0.5s;
    margin-top: 80px;
}

.main-title {
    color: #003300 !important;
    font-size: 4vw !important;
    letter-spacing: 2px !important;
    font-weight: 900 !important;
    line-height: 1em !important;
    position: relative !important;
    z-index: 4 !important;
    text-shadow: 2px 3px 15px rgba(0, 0, 0, 0.15) !important;
    white-space: nowrap !important;
    margin-top: 60px !important;
}

.highlight {
    color: #41be54;
}

/* Style pour l'image zoomable */
.zoomable-image {
    transition: transform 0.3s ease-in-out;
}

/* Effet de zoom au survol */
.zoomable-image:hover {
    transform: scale(1.2);
}

.image-container {
    display: flex;
    justify-content: center;
    align-items: stretch;
    flex-wrap: wrap;
    text-align: center;
    padding: 20px;
}

.image-item {
    flex: 1;
    margin: 0 10px;
    max-width: 21em;
    background: rgba(255, 255, 255, 0.4);
    border: 1px solid rgba(255, 255, 255, 0.2);
    border-radius: 20px;
    box-shadow: 4px 4px 12px rgba(0, 0, 0, 0.1);
    padding: 10px;
    border-color: #41be54;
    transition: border-color 0.3s ease;
    transition: transform 0.3s ease;
}

.image-item:hover {
    transform: scale(1.025);
}

.image-item:last-child {
    margin-right: 0;
}

.image-item img {
    width: 100%;
    max-width: 300px;
}

.image-item h2 {
    color: #003300;
    font-size: 1.5em;
    margin-top: 10px;
}

.image-item p {
    color: #555;
    font-size: 1em;
    line-height: 1.5;
}

.btn-content {
    border-radius: 20px;
    border: 2px solid #41be54;
    color: #41be54;
    display: inline-block;
    overflow: hidden;
    padding: 24px 60px 24px 16px;
    position: relative;
    text-decoration: none;
    background-color: white;
    line-height: 0.21;
}

.btn-content .btn-content1 {
    font-size: 1.4em;
    letter-spacing: 2px !important;
    font-weight: 500 !important;
    line-height: 0.8;
    padding: 0 26px;
    position: relative;
    right: 0;
    transition: right 300ms ease;
    display: block;
    text-align: left;
    font-family: "Lexend Deca", serif;
}

.btn-content .icon1 {
    border-left: 1px solid #41be54;
    position: absolute;
    right: 0;
    text-align: center;
    top: 50%;
    transition: all 300ms ease;
    transform: translateY(-50%);
    width: 58px;
    height: 70%;
}

.btn-content .icon1 i {
    position: relative;
    top: 50%;
    transform: translateY(-50%);
}

.btn-content:after {
    content: "";
    position: absolute;
    top: 0;
    bottom: 0;
    right: 0;
    left: 0;
    background-color: #41be54;
    opacity: 0;
    transition: opacity 300ms ease;
}

.btn-content:hover .btn-content1 {
    right: 100%;
}

.btn-content:hover .icon1 {
    border-left: 0;
    font-size: 1.8em;
    width: 100%;
    color: #41be54;
}

.btn-content:hover:after {
    opacity: 0.2;
}

/* Glassmorphism */

.glassmorphism-container {
    background: rgba(255, 255, 255, 0.5);
    -webkit-backdrop-filter: blur(10px);
    backdrop-filter: blur(10px);
    border: 2px solid #41be54;
    padding: 30px;
    border-radius: 20px;
    box-shadow: 20px 20px 20px rgba(0, 0, 0, 0.1);
    max-width: 40%;
    margin: 0 auto;
    height: auto;

    @media (max-width: 885px) {
        max-width: 100%;
    }
}

/* Titre */
h2 {
    color: black;
    font-family: "Lexend Deca", serif;
    font-weight: 900;
    font-size: 3em;
}

h3 {
    color: black;
    font-weight: 900;
    font-size: 1.4em;
    font-family: "Lexend Deca", serif;
}

h4 {
    color: #003300;
    font-family: "Lexend Deca", serif;
    font-weight: 900;
    font-size: 1.2em;
}

.status.active {
    color: #2ba972;
    background-color: rgba(43, 169, 114, 0.2);
}

.status.disabled {
    color: #59719d;
    background-color: rgba(89, 113, 157, 0.2);
}

.status {
    border-radius: 4px;
    display: flex;
    align-items: center;
    padding: 4px 8px;
    font-size: 12px;
}

/* Fond */

.mapbackground {
    background-image: url("https://prospecplus.fr/wp-content/themes/astra/images/mapparis.jpg");
    width: 100%;
    height: 100vh;
    position: fixed;
    top: 0;
    left: 0;
    opacity: 0.35;
    transition: opacity 1s ease-in-out;
    z-index: -1;
}

.wave-container {
    position: relative;
    width: 100%;
    /* Ajuste à la largeur de l'écran */
    max-width: 100%;
    /* Pour éviter de dépasser les limites */
    animation: fadeIn 2.5s ease-in-out forwards;

}

.wave-image {
    width: 100%;
    /* Assure que le SVG s'ajuste à la largeur de son conteneur */
    height: auto;
    animation: fadeIn 2.5s ease-in-out forwards;

}

.sous-titre {
    color: #003300 !important;
    font-size: 2em !important;
    letter-spacing: 2px !important;
    font-weight: 900 !important;
    line-height: 1em !important;
    position: relative !important;
    z-index: 4 !important;
    text-shadow: 2px 3px 15px rgba(0, 0, 0, 0.15) !important;
    white-space: nowrap !important;
    margin-top: 60px !important;
    font-family: "Lexend Deca", serif;
    display: block;
    margin: auto;
    text-align: center;
}

.chevron-down {
    position: absolute;
    left: 50%;
    transform: translate(-50%, -50%);
}

/*===========================================================================================================
                                                    RECHERCHE
============================================================================================================= */

label {
    color: black;
}

.btn-content-recherche {
    border-radius: 20px;
    border: 2px solid #41be54 !important;
    color: #41be54 !important;
    display: inline-block;
    overflow: hidden;
    position: relative;
    text-decoration: none;
    background-color: white;
    line-height: 0.21;
    font-weight: 700;
    display: block;
    margin-top: 30px;
    margin-left: auto;
    margin-right: auto;
}

.btn-content-recherche:hover {
    background-color: #41be54;
    color: white !important;
    cursor: pointer;
}

.search-form {
    display: flex;
    flex-direction: column;
    gap: 10px;
    align-items: flex-start;
}

.search-form label {
    width: 110px;
    white-space: nowrap;
}

.search-form input[type="text"],
.search-form select {
    width: 100%;
    border-radius: 10px;
    outline: none;
}

.form-row {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    margin-bottom: 10px;
}

.form-row label {
    font-weight: bold;
}

.form-row .input-container {
    display: flex;
    align-items: center;
    position: relative;
}

.form-row .input-container input,
.form-row .input-container select {
    flex: 1;
    width: 250px;
    border-radius: 10px;
}

.same-width-input {
    width: 300px;
}

.tt-query {
    -webkit-box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075);
    -moz-box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075);
    box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075);
}

.tt-hint {
    color: black;
}

.tt-menu {
    width: 422px;
    margin-top: 4px;
    padding: 4px 0;
    background-color: #fff;
    border: 1px solid #ccc;
    border: 1px solid rgba(0, 0, 0, 0.2);
    -webkit-border-radius: 4px;
    -moz-border-radius: 4px;
    border-radius: 4px;
    -webkit-box-shadow: 0 5px 10px rgba(0, 0, 0, 0.2);
    -moz-box-shadow: 0 5px 10px rgba(0, 0, 0, 0.2);
    box-shadow: 0 5px 10px rgba(0, 0, 0, 0.2);
}

.tt-suggestion {
    padding: 3px 20px;
    line-height: 24px;
}

.tt-suggestion.tt-cursor,
.tt-suggestion:hover {
    color: #fff;
    background-color: #0097cf;
}

.tt-suggestion p {
    margin: 0;
}

.info-ville {
    background-color: white;
    padding: 20px;
    border: 2px solid #41be54;
    border-radius: 20px;
    margin-top: 20px;
}

.info-container {
    display: block;
    margin: 10px 0;
}

/* Rendre le header sticky */
body.ast-site-scrolled .ast-site-header {
    position: fixed !important;
    width: 100% !important;
    top: 0 !important;
    z-index: 1000 !important;
}

.content-section {
    max-width: 90%;
    margin: 0 auto;
}

@media (max-width: 768px) {
    .content-section {
        max-width: 100%;
    }
}

.questionnaire-init-container {
    display: flex;
    justify-content: center;
    align-items: center;
    margin: 0 auto;
    margin-top: 12%;
    margin-bottom: 8%;
}

#submit-questionnaire {
    display: block;
    margin: 0 auto;
    width: 40%;
}

.questionnaire-init-box {
    background: rgba(255, 255, 255, 0.5);
    -webkit-backdrop-filter: blur(10px);
    backdrop-filter: blur(10px);
    border: 2px solid #41be54;
    padding: 30px;
    border-radius: 20px;
    box-shadow: 20px 20px 20px rgba(0, 0, 0, 0.1);
    margin: 0 auto;
    height: auto;
}

/* Style commun pour les inputs */
input[type="text"] {
    width: 100%;
    border-radius: 10px;
    outline: none;
    border: 1px solid #41be54;
    padding: 10px;
}

/* Disposer Nom et Prénom côte à côte */
.input-row {
    display: flex;
    gap: 20px;
    /* Espace entre les deux colonnes */
}

.input-half {
    flex: 1;
}

/* Pour s'assurer que les autres inputs gardent leur largeur */
#telephone {
    width: calc(50% - 10px);
}

#ville-de-travail {
    width: 100%;
}

.tooltip-légende {
    display: none;
    position: absolute;
    top: 100%;
    left: 50%;
    transform: translateX(-50%);
    margin-top: 10px;
    padding: 15px;
    background-color: #ffffff;
    border: 1px solid #ccc;
    border-radius: 5px;
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
    width: 250px;
    z-index: 100000000000000;
    text-align: left;
    font-size: 14px;
    color: #333;
    font-family: 'Roboto', sans-serif;
    /* Police moderne et lisible */

}

.button-compte:hover .tooltip-légende {
    display: block;
}

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

.tooltip .tooltiptext {
    visibility: hidden;
    width: 500px;
    background-color: #555;
    color: #fff;
    border-radius: 5px;
    padding: 20px;
    position: absolute;
    z-index: 1;
    bottom: 125%;
    left: 50%;
    margin-left: -150px;
    opacity: 0;
    transition: opacity 0.3s;
}

.tooltip:hover .tooltiptext,
.tooltip .info-text-questionnaire-init:hover~.tooltiptext {
    visibility: visible;
    opacity: 1;
}

.btn-save-tags {
    background-color: white;
    color: #41be54;
    border: none;
    padding: 5px 10px;
    font-size: 16px;
    cursor: pointer;
    border-radius: 20px;
    display: inline-flex;
    align-items: center;
    border: solid 2px #41be54;
    margin-top: 20px;
}

.btn-save-tags:hover {
    background-color: #41be54;
    color: white;
}

.titre-modal-tags {
    margin-top: 0;
    margin-bottom: 20px;
    font-size: 1.5em;
    color: #333;
    text-decoration: underline;
    text-decoration-color: #41be54;
    text-decoration-thickness: 3px;
    text-underline-offset: 4px;
}

#swal-surfaceInput {
    width: 100%;
}

.tag-container-tag {
    background-color: #e8f5e9;
    border-radius: 10px;
    padding: 15px;
}

.tag-container {
    display: grid;
    grid-template-columns: repeat(2, max-content);
    gap: 5px;
    justify-content: center;
    align-items: center;
    padding: 5px;
    max-width: 100%;
    margin: 0 auto;
}

.tag-badge {
    background-color: #28a745;
    color: white;
    padding: 5px 10px;
    border-radius: 5px;
    font-size: 13px;
    text-align: center;
    white-space: nowrap;
    min-width: 60px;
}

.tag-container-modal {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    justify-content: space-between;
}

.first-row {
    margin-bottom: 20px;
}

.tag-row {
    display: flex;
    gap: 50px;
    width: 100%;
}

.tag-field {
    flex: 1;
    display: flex;
    flex-direction: column;
}

.tag-label {
    font-weight: bold;
    margin-bottom: 5px;
}

.tag-input,
.tag-select {
    padding: 10px;
    border: 1px solid #ccc;
    border-radius: 5px;
    font-size: 14px;
}

.fa-circle-plus {
    pointer-events: none;
}

#today-content:empty::before {
    content: "Vous n'avez rien de prévu aujourd'hui.";
    display: block;
    padding: 10px;
}


.btn-green {
    background-color: white;
    color: #41be54;
    border: none;
    padding: 10px 20px;
    font-size: 16px;
    cursor: pointer;
    border-radius: 20px;
    display: inline-flex;
    align-items: center;
    border: solid 2px #41be54;
}

.btn-green i {
    margin-right: 5px;
}

.btn-green:hover {
    background-color: #41be54;
    color: white;
}

.btn-green:focus {
    background-color: #41be54;
    color: white;
}

.info-text-questionnaire-init {
    cursor: pointer;
    color: #3b88c3;
}

#init-form {
    margin-top: 20px;
}

.cities-container {
    display: flex;
    flex-wrap: wrap;
}

.city-item {
    flex: 0 0 50%;
    box-sizing: border-box;
    padding: 5px;
    color: #41be54;
    border: 2px solid #41be54;
    border-radius: 20px;
    text-align: center;
    margin-bottom: 5px;
    background-color: white;
}

.input-questionnaire {
    display: flex;
    align-items: center;
}

#add-city {
    margin-left: 10px;
}

.input-questionnaire input {
    flex: 1;
}

.input-questionnaire input[type="text"] {
    width: 100%;
    border-radius: 10px;
    outline: none;
    border-color: #41be54;
    background-color: white;
}

#departement1 {
    width: 100%;
    border-radius: 10px;
    outline: none;
    border-color: #41be54;
    background-color: white;
}

#departement2 {
    width: 100%;
    border-radius: 10px;
    outline: none;
    border-color: #41be54;
    background-color: white;
}

.departement-inputs {
    display: flex;
    gap: 5px;
}

#departement1.input-custom {
    width: 40px;
    height: auto;
}

#departement2.input-custom {
    width: 40px;
    height: auto;
}

.info-bulle {
    border: solid 2px #3b88c3;
    border-radius: 10px;
    padding: 10px;
    color: #3b88c3;
    position: relative;
    display: none;
}

.info-bulle button.ok-btn {
    background-color: #41be54;
    border: solid 1px #41be54;
    color: #fff;
    border-radius: 5px;
    padding: 5px 10px;
    cursor: pointer;
}

.info-bulle button.ok-btn:hover {
    background-color: #fff;
    color: #41be54;
    border: solid 1px #41be54;
    border-radius: 5px;
    padding: 5px 10px;
    cursor: pointer;
}

.info-bulle button.ok-btn:disabled {
    background-color: #ccc;
    border: solid 1px #ccc;
    color: #666;
    cursor: not-allowed;
}

.hidden-input {
    display: none;
}

/*===========================================================================================================
                                                    COMPTE
============================================================================================================= */

html {
    box-sizing: border-box;
    --bgColorMenu: #003300;
    --duration: 0.7s;
}

#map2 {
    height: 700px !important;
    border-radius: 20px 20px 20px 20px;
    overflow: hidden;
    margin: 0 auto;
    border-width: 2px 2px 2px 2px;
    border-style: solid;
    border-color: #41be54;
    margin-bottom: 20px;
}

#map1 {
    height: 700px !important;
    border-radius: 20px 20px 20px 20px;
    overflow: hidden;
    margin: 0 auto;
    border-width: 2px 2px 2px 2px;
    border-style: solid;
    border-color: #41be54;
}

#map {
    height: 700px !important;
    border-radius: 20px 20px 20px 20px;
    overflow: hidden;
    margin: 0 auto;
    border-width: 2px 2px 2px 2px;
    border-style: solid;
    border-color: #41be54;
}

#map-container {
    background-color: white;
    padding: 20px;
    border: 2px solid #41be54;
    border-radius: 20px;
    margin-bottom: 20px;
    margin-top: 20px;
}

#map-container1 {
    background-color: white;
    padding: 20px;
    border: 2px solid #41be54;
    border-radius: 20px;
    margin-bottom: 20px;
}

.drawings-table-container {
    background-color: white;
    padding: 20px;
    border: 2px solid #41be54;
    border-radius: 20px;
    margin-bottom: 20px;
    margin-top: 20px;
}

/* Styles pour le conteneur du popup */
.leaflet-popup-content-wrapper {
    background: #fff !important;
    border-radius: 20px !important;
    box-shadow: 0 0 15px rgba(0, 0, 0, 0.2) !important;
    position: relative !important;
    overflow: visible !important;
}

.leaflet-popup-content {
    line-height: 1.5 !important;
    margin: 13px !important;
}

.popup-header {
    padding: 10px;
    border-radius: 20px 20px 0 0;
    width: 100%;
    position: absolute;
    top: 0;
    left: 0;
    box-sizing: border-box;
    z-index: 1;
}

/* Style pour le header */
.favorite-header {
    background-color: #30941e;
    color: white;
    padding: 8px;
    text-align: center;
    font-size: 15px;
    border-radius: 20px 20px 0 0;
    width: 100%;
    position: absolute;
    top: 0;
    left: 0;
    box-sizing: border-box;
    z-index: 1;
    font-family: "Lexend Deca", serif;
}

.favorite-header-copro {
    background-color: #30941e;
    color: white;
    padding: 8px;
    text-align: center;
    font-size: 15px;
    border-radius: 20px 20px 0 0;
    width: 100%;
    position: absolute;
    top: 0;
    left: 0;
    box-sizing: border-box;
    z-index: 1;
    font-family: "Lexend Deca", serif;
}

.favorite-header-resultat {
    background-color: #2E8B57;
    color: white;
    padding: 8px;
    text-align: center;
    font-size: 15px;
    border-radius: 20px 20px 0 0;
    width: 100%;
    position: absolute;
    top: 0;
    left: 0;
    box-sizing: border-box;
    z-index: 1;
    font-family: "Lexend Deca", serif;
}

/* Style pour la liste */
.favorite-list {
    list-style-type: none;
    padding: 8px;
    margin: 0;
    margin-top: 40px;
}

.favorite-list li {
    margin-bottom: 5px;
}

.favorite-list li i {
    margin-right: 8px;
}

.leaflet-container a.leaflet-popup-close-button {
    position: absolute;
    top: 0;
    right: 0;
    border: none;
    text-align: center;
    width: 24px;
    height: 24px;
    font: 16px / 24px Tahoma, Verdana, sans-serif;
    text-decoration: none;
    background: transparent;
    z-index: 50;
    color: white !important;
}

/* Style pour le header */
.mandat-header {
    background-color: #416cbe;
    color: white;
    padding: 8px;
    text-align: center;
    font-size: 15px;
    border-radius: 20px 20px 0 0;
    width: 100%;
    position: absolute;
    top: 0;
    left: 0;
    box-sizing: border-box;
    z-index: 1;
    font-family: "Lexend Deca", serif;
}

/* Style pour la liste */
.mandat-list {
    list-style-type: none;
    padding: 8px;
    margin: 0;
}

.mandat-list li {
    margin-bottom: 5px;
}

.mandat-list li i {
    margin-right: 8px;
}

.btn-check-status {
    color: #41be54;
    background-color: white;
    border: 1px solid #41be54;
    height: 30px;
    line-height: 30px;
    text-align: center;
    padding: 0 10px;
    display: inline-block;
    cursor: pointer;
}

.btn-check-status:hover {
    color: white;
    background-color: #41be54;
}

.btn-upgrade-plan {
    border-radius: 20px;
    border: 2px solid #41be54 !important;
    color: #41be54 !important;
    display: block;
    margin: 0 auto;
    margin-top: 20px;
    overflow: hidden;
    position: relative;
    text-decoration: none;
    background-color: white;
    line-height: 0.21;
    font-weight: 700;
    margin-top: 20px;
}

.btn-upgrade-plan:hover {
    background-color: #41be54;
    color: white !important;
}

.bev-modal-content form button {
    margin-top: 20px;
    padding: 10px 20px;
    background-color: #30941e;
    color: white;
    border: none;
    border-radius: 20px;
    font-family: "Lexend Deca", serif;
    cursor: pointer;
    width: 100%;
}

#geoman-controls {
    position: relative;
}

#search-input {
    margin-top: 20px;
    border-radius: 20px 20px 20px 20px;
}

.custom-info-container {
    position: relative;
    display: grid;
    grid-template-columns: 1fr 1fr;
    grid-template-rows: 1fr 1fr;
    gap: 20px;
    justify-items: stretch;
    align-items: stretch;
    height: 100%;
    margin-top: 20px;
    margin-bottom: 20px;
}

.info-section {
    border: 2px solid #41be54;
    border-radius: 20px;
    padding: 20px;
    box-sizing: border-box;
    background-color: white;
    position: relative;
}

.avatar-image {
    border: 2px solid #41be54;
    border-radius: 50%;
    padding: 3px;
    width: 70px;
    height: 70px;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    z-index: 10;
    /* Assure que l'avatar est visible par-dessus les sections */
    background-color: white;
    /* Optionnel : pour un fond blanc autour de l'avatar */
}

.info-header {
    align-items: center;
    justify-content: space-between;
    margin-bottom: 10px;
}

.info-sections {
    display: flex;
    flex-wrap: wrap;
    width: 100%;
}

.info-section-long {
    border: 2px solid #41be54;
    border-radius: 20px;
    width: 100%;
    padding: 20px;
    box-sizing: border-box;
    background-color: white;
    position: relative;
    margin-top: 20px;
    margin-bottom: 10px;
}

#save-map {
    color: black;
    border-radius: 20px;
    background-color: rgb(160, 160, 160);
    border: 2px solid rgb(160, 160, 160);
}

.toast {
    opacity: 1 !important;
}

button.tabulator-page {
    color: #003300;
}

.menu {
    margin-top: 13em;
    display: flex;
    width: 90%;
    font-size: 1em;
    position: relative;
    align-items: center;
    justify-content: center;
    background: linear-gradient(to right, #0a350f, #0fa31d);
    margin: 13em auto 0;
    border-radius: 20px;
    box-shadow: 0 8px 32px rgba(31, 38, 135, 0.37);
}

.menu__item {
    z-index: 100;
    display: flex;
    cursor: pointer;
    position: relative;
    border-radius: 20px;
    align-items: center;
    justify-content: center;
    padding: 1em 2em 0.85em 2em;
    color: white;
    transition: background-color 0.3s, transform 0.3s;
    margin-top: 5px;
    margin-bottom: 5px;
    margin-right: 5px;
    font-size: 1.2em;
    font-family: "Lexend Deca", serif;
}

.menu__item:hover {
    background-color: #005500;
}

.menu__item::after {
    content: "";
    position: absolute;
    bottom: 0;
    left: 0;
    width: 0;
    height: 3px;
    background-color: #41be54;
    transition: width 0.3s ease;
}

.menu__item.active::after {
    width: 100%;
}

/* Styles pour mobile */
@media screen and (max-width: 768px) {
    .menu {
        flex-direction: column;
        /* Disposition verticale */
        align-items: flex-start;
        /* Aligner les éléments à gauche */
        padding: 1em;
        margin-top: 5em;
        /* Réduire la marge pour les petits écrans */
    }

    .menu__item {
        width: 100%;
        /* Chaque élément occupe toute la largeur */
        text-align: left;
        /* Aligner le texte à gauche */
        font-size: 1em;
        /* Réduire la taille de la police */
        padding: 0.8em 1em;
        /* Ajuster les marges */
    }

    .menu__item:hover {
        background-color: #41be54;
        /* Accentuez la couleur pour les mobiles */
    }

    .menu__border {
        display: none;
        /* Masquer la bordure si elle est purement décorative */
    }

    /* Boutons supplémentaires */
    .search-btn,
    .logout-btn {
        width: 100%;
        text-align: left;
        margin-top: 10px;
    }
}

p {
    margin-bottom: 5px !important;
}

#formSection {
    display: flex;
    flex-wrap: wrap;
    /* Permet le passage à la ligne */
    justify-content: space-between;
}

.form-section {
    background-color: #f4f4f4;
    border: 1px solid #ddd;
    padding: 20px;
    margin-top: 20px;
    border-radius: 20px;
    box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
    width: calc(48% - 10px);
    position: relative;
    padding-bottom: 6em;
    box-sizing: border-box;
}

.form-section h3 {
    color: #333;
    margin-bottom: 15px;
}

label {
    display: block;
    font-weight: bold;
}

.annonce-text {
    display: block;
    margin-bottom: 5px;
    font-weight: bold;
    color: #003300;
}

.tabulator {
    border-radius: 8px;
    overflow: hidden;
}

#supprimerButton1 {
    background-color: #124e4b;
    color: #fff;
    padding: 10px 20px;
    border: none;
    border-radius: 20px;
    cursor: pointer;
    position: absolute;
    bottom: 10px;
    left: 50%;
    transform: translateX(-50%);
}

#supprimerButton1:hover {
    background-color: #1e8f60;
    color: #fff;
}

#supprimerButton1:focus {
    outline: none;
    background-color: #1e8f60;
    color: white;
}

#submitButton1 {
    background-color: #124e4b;
    color: #fff;
    padding: 10px 20px;
    border: none;
    border-radius: 20px;
    cursor: pointer;
    position: absolute;
    bottom: 10px;
    left: 50%;
    transform: translateX(-50%);
}

#submitButton1:hover {
    background-color: #1e8f60;
    color: #fff;
}

#submitButton1:focus {
    outline: none;
    background-color: #1e8f60;
    color: white;
}

#submitButton2 {
    background-color: #124e4b;
    color: #fff;
    padding: 10px 20px;
    border: none;
    border-radius: 20px;
    cursor: pointer;
    position: absolute;
    bottom: 10px;
    left: 50%;
    transform: translateX(-50%);
}

#submitButton2:hover {
    background-color: #1e8f60;
    color: #fff;
}

#submitButton2:focus {
    outline: none;
    background-color: #1e8f60;
    color: white;
}

#editButton1 {
    background-color: #124e4b;
    color: #fff;
    padding: 10px 20px;
    border: none;
    border-radius: 20px;
    cursor: pointer;
    position: absolute;
    bottom: 10px;
    left: 50%;
    transform: translateX(-50%);
}

#editButton1:hover {
    background-color: #1e8f60;
    color: #fff;
}

#editButton1:focus {
    outline: none;
    background-color: #1e8f60;
    color: white;
}

#submitAnnonceButton {
    background-color: #124e4b;
    color: #fff;
    padding: 10px 20px;
    border: none;
    border-radius: 20px;
    cursor: pointer;
    position: absolute;
    bottom: 10px;
    /* Ajustez la marge inférieure selon vos besoins */
    left: 50%;
    transform: translateX(-50%);
}

#submitAnnonceButton:hover {
    background-color: #1e8f60;
    color: #fff;
}

#submitAnnonceButton:focus {
    outline: none;
    background-color: #1e8f60;
    color: white;
}

.hidden {
    display: none;
}

/* Style personnalisé pour la barre de recherche */
.tabulator-col .tabulator-header-filter input {
    width: 100%;
    box-sizing: border-box;
    border: 1px solid #ccc;
    border-radius: 5px;
    background-color: #f5f5f5;
    color: #333;
    height: 30px !important;
}

.tabulator-col-title {
    color: #124e4b;
}

.logout-btn {
    background-color: #dc3545;
    color: #fff;
    padding: 8px 16px;
    text-decoration: none;
    border-radius: 20px;
    margin-right: 10px;
}

.logout-btn:hover {
    color: #fff;
    background-color: #a02531;
}

.logout-btn i {
    margin-right: 5px;
}

.search-btn {
    background-color: #41be54;
    color: #fff;
    padding: 8px 16px;
    text-decoration: none;
    border-radius: 20px;
    margin-right: 10px;
}

.search-btn i {
    margin-right: 5px;
}

.search-btn:hover {
    background-color: white;
    color: #41be54;
}

img.marker-favori {
    filter: hue-rotate(-100deg);
}

img.marker-already {
    filter: hue-rotate(155deg);
}

.addToFavoritesBtn {
    background-color: #124e4b;
    color: #fff;
    padding: 10px 20px;
    border: none;
    border-radius: 20px;
    cursor: pointer;
}

.addToFavoritesBtn:hover {
    background-color: #1e8f60;
    color: #fff;
}

.addToFavoritesBtn:focus {
    outline: none;
    background-color: #1e8f60;
    color: white;
}

.styled-toggle {
    --s: 27px;
    /* ajustez ceci pour contrôler la taille */
    height: calc(var(--s) + var(--s) / 5);
    width: auto;
    /* certains navigateurs en ont besoin */
    aspect-ratio: 2.25;
    border-radius: var(--s);
    margin: calc(var(--s) / 2);
    display: grid;
    cursor: pointer;
    background-color: #ff7a7a;
    box-sizing: content-box;
    overflow: hidden;
    transition: 0.3s 0.1s;
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
}

.styled-toggle:before {
    content: "";
    padding: calc(var(--s) / 10);
    --_g: radial-gradient(circle closest-side at calc(100% - var(--s) / 2) 50%,
            #7d7d7d 96%,
            #0000);
    background: var(--_g) 0 / var(--_p, var(--s)) 100% no-repeat content-box,
        var(--_g) var(--_p, 0) / var(--s) 100% no-repeat content-box, #fff;
    mix-blend-mode: darken;
    filter: blur(calc(var(--s) / 12)) contrast(11);
    transition: 0.4s, background-position 0.4s 0.1s,
        padding cubic-bezier(0, calc(var(--_i, -1) * 200), 1, calc(var(--_i, -1) * 200)) 0.25s 0.1s;
}

.styled-toggle:checked {
    background-color: #85ff7a;
}

.styled-toggle:checked:before {
    padding: calc(var(--s) / 10 + 0.05px) calc(var(--s) / 10);
    --_p: 100%;
    --_i: 1;
}

#map-options {
    padding: 10px;
    border: solid 2px #41be54;
    color: #41be54;
    display: flex;
    border-radius: 0px 0px 20px 20px;
    overflow: hidden;
    height: 100px;
}

#spinner-container {
    display: flex;
    justify-content: center;
    align-items: center;
    height: 100vh;
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    background-color: rgba(255, 255, 255, 0.8);
    z-index: 1000;
}

.spinner {
    width: 11.2px;
    height: 11.2px;
    animation: spinner-z355kx 1s infinite linear;
    border-radius: 11.2px;
    box-shadow: 28px 0px 0 0 #41be54, 17.4px 21.8px 0 0 #41be54,
        -6.2px 27.2px 0 0 #41be54, -25.2px 12px 0 0 #41be54,
        -25.2px -12px 0 0 #41be54, -6.2px -27.2px 0 0 #41be54,
        17.4px -21.8px 0 0 #41be54;
}

@keyframes spinner-z355kx {
    to {
        transform: rotate(360deg);
    }
}

.styled-table {
    width: 100%;
    border-collapse: collapse;
    margin-top: 30px;
    margin-bottom: 40px;
    font-family: Arial, sans-serif;
    font-size: 16px;
    text-align: left;
    border-radius: 8px;
    overflow: hidden;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
}

.styled-table thead tr {
    background-color: #4CAF50;
    color: white;
    text-align: left;
}

.styled-table th,
.styled-table td {
    padding: 12px 15px;
    border-bottom: 1px solid #ddd;
    cursor: default;
}

.styled-table tbody tr:nth-child(even) {
    background-color: #f9f9f9;
}

.styled-table tbody tr:nth-child(odd) {
    background-color: #ffffff;
}

.styled-table th {
    text-transform: uppercase;
    letter-spacing: 0.05em;
}

.styled-table td {
    color: #333;
    vertical-align: middle;
}

.styled-table td:last-child {
    font-weight: bold;
    text-transform: capitalize;
}

.fond-vue-compte {
    border-radius: 20px;
    background-color: #f2f2f2;
    padding: 20px;
    display: flex;
    flex-direction: column;
}

.user-details .column {
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.info-row {
    display: flex;
    justify-content: flex-start;
    align-items: center;
    gap: 20px;
    width: 100%;
}

.info-row p {
    margin: 0;
}

.info-row i {
    margin-right: 20px;
    color: #4caf50;
    font-size: 16px !important;
    width: 16px;
    text-align: center;
    display: inline-block;
    vertical-align: middle;
}


.info-row p:first-child {
    font-weight: bold;
    flex-basis: 40%;
}

.info-row p:last-child {
    flex-basis: 60%;
    text-align: left;
}

.user-details {
    display: flex;
}

.column {
    flex: 1;
    padding: 0 20px;
}

.column p {
    margin-top: 0;
}

.container-info-prospection {
    background-color: #f2f2f2;
    border-radius: 20px;
    border: solid 2px #41be54;
    padding: 20px;
    margin-top: 20px;
}

#changeDelayButton {
    border-radius: 20px;
    border: 2px solid #41be54 !important;
    color: #41be54 !important;
    display: inline-block;
    overflow: hidden;
    position: relative;
    text-decoration: none;
    background-color: white;
    line-height: 0.21;
    font-weight: 700;
    margin-top: 10px;
}

#map1 {
    height: 500px;
}

.custom-tooltip {
    position: absolute;
    background-color: rgba(255, 255, 255, 0.8);
    padding: 5px;
    border-radius: 5px;
    pointer-events: none;
}

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

.modal-content {
    background-color: #fefefe;
    margin: 15% auto;
    padding: 20px;
    border: 1px solid #888;
    max-width: 400px;
    border-radius: 20px;
    border: 2px solid #41be54;
}

#progressBar {
    margin: 20px 0;
    border-radius: 5px;
}

#progressFill {
    border-radius: 5px;
}

#saveAnnotationBtn {
    border-radius: 20px;
    border: 2px solid #41be54 !important;
    color: #41be54 !important;
    display: inline-block;
    overflow: hidden;
    position: relative;
    text-decoration: none;
    background-color: white;
    line-height: 0.21;
    font-weight: 700;
    margin-top: 10px;
}

#saveDrawingButton {
    border-radius: 20px;
    border: 2px solid #41be54 !important;
    color: #41be54 !important;
    display: inline-block;
    overflow: hidden;
    position: relative;
    text-decoration: none;
    background-color: white;
    line-height: 0.21;
    font-weight: 700;
    margin-top: 10px;
    margin-top: 10px;
    display: block;
    margin: 0 auto;
}

.radio-wrapper {
    background-color: #f2f2f2;
    padding: 20px;
    margin-bottom: 10px;
    margin-top: 20px;
    border-radius: 20px;
}

.close {
    color: #aaa;
    float: right;
    font-size: 28px;
    font-weight: bold;
}

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

#controls-container {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin: 20px 0;
}

#range-slider-container,
#copro-counter {
    background-color: #e8f5e9;
    padding: 20px;
    border-radius: 20px;
    width: 45%;
    height: 130px;
    box-sizing: border-box;
    text-align: center;
}

#copro-counter {
    justify-content: center;
    align-items: center;
    font-weight: bold;
}



/* Conteneur des étiquettes */
#range-labels {
    justify-content: space-between;
    color: #333;
    margin-bottom: 10px;
    text-align: center;
    font-family: "Lexend Deca", serif;

}

#range-min-label,
#range-max-label {
    font-weight: bold;
    color: #0078D7;
}

/* Barre des sliders */
#range-slider-container input[type="range"] {
    -webkit-appearance: none;
    height: 8px;
    margin: 0;
    background: transparent;
    width: 30% !important;
}

#range-slider-container input[type="range"]::-webkit-slider-thumb {
    -webkit-appearance: none;
    width: 20px;
    height: 20px;
    border-radius: 50%;
    cursor: pointer;
    z-index: 3;
    position: relative;
    box-shadow: 0 0 3px rgba(0, 0, 0, 0.5);
}

/* Dégradé pour le premier slider (min) */
#range-min::-webkit-slider-runnable-track {
    height: 8px;
    background: linear-gradient(to right, #FF6F6F, #FFCC66);
    border-radius: 4px;
}

/* Dégradé pour le deuxième slider (max) */
#range-max::-webkit-slider-runnable-track {
    height: 8px;
    background: linear-gradient(to right, #FFCC66, #A3E4B4) !important;
    border-radius: 4px;
}


/*===========================================================================================================
                                                    DASHBOARD
============================================================================================================= */

.container {
    display: grid;
    grid-template-columns: 1fr;
    gap: 60px;
}

.db-sections {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    gap: 30px;
}

.db-section {
    flex: 1;
}

.db-title {
    margin-top: 0;
    margin-bottom: 10px;
    font-size: 1.5rem;
    text-align: left !important;
    color: black;
}

#calendar.db-content {
    background-color: white;
}

.db-today,
.db-calendar,
.db-mandat {
    flex: 1;
}

.db-content {
    border-radius: 20px;
    padding: 20px;
    box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
    background-color: #f2f2f2;
    overflow-y: auto;
    max-height: 425px;
    max-width: 100%;
}

.db-calendar .db-content {
    background-color: #FFF5E5;
}

.db-important-events .db-content {
    background-color: #FFFAE5;
}

.db-mandat .db-content {
    background-color: #E5F0FF;
}

.db-upcoming-events .db-content {
    background-color: #E9FBE5;
}

.db-notes .db-content {
    background-color: #FAE5F9;
}


/* Règles spécifiques pour les sections souhaitées */
#mandats-container,
.db-upcoming-events .db-content {
    max-height: 800px;
}

.db-notes .db-content {
    max-height: 800px !important;
    overflow-y: auto;
}


/* Personnalisation de la barre de défilement */
.db-content::-webkit-scrollbar {
    width: 8px;
    background-color: transparent;
}

.db-content::-webkit-scrollbar-thumb {
    background-color: #2e883c;
    border-radius: 4px;
}

.db-content::-webkit-scrollbar-track {
    background-color: transparent;
}

.db-mandat .mandat-item {
    margin-bottom: 20px;
}

.db-mandat .mandat-item h3 {
    margin-top: 0;
}

.db-calendar {
    text-align: center;
    display: inline-block;
}

/* Responsiveness for smaller screens */
@media (max-width: 768px) {
    .container {
        grid-template-columns: 1fr;
        gap: 10px;
    }

    .db-sections {
        grid-template-columns: 1fr;
    }

    .db-content {
        max-height: 400px;
    }

    #calendar {
        max-width: 100%;
        overflow-x: auto;
    }
}

/* Styles pour les boutons de navigation du calendrier */
.calendar-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 10px;
}

.calendar-header button {
    background: none;
    border: none;
    font-size: 20px;
    cursor: pointer;
    padding: 5px;
    transition: color 0.3s ease;
}

/* Style des flèches */
.calendar-header button .fas {
    color: #333;
}

/* Style au survol */
.calendar-header button:hover .fas {
    color: #555;
}

/* Style pour la date d'aujourd'hui */
.today {
    background-color: #ffc;
    font-weight: bold;
    text-decoration: underline;
    text-decoration-thickness: 3px;
    text-decoration-color: red;
    text-underline-offset: 5px;
    border: 1px solid red;
}

.event-day {
    background-color: #16be2d;
    color: white;
    cursor: pointer;
    position: relative;
}

/* Style pour les jours passés */
.past-day {
    color: #aaa;
    cursor: pointer;
}

.past-day.event-day {
    background-color: grey;
}

.past-day.mandat-day {
    background-color: grey;
}

.past-day.mixed-day {
    background: repeating-linear-gradient(45deg,
            #5f5d5d,
            #5f5d5d 10px,
            #bfc4ce 10px,
            #bfc4ce 20px);
    color: #fff;
    cursor: pointer;
    position: relative;
}

/* Ajoutez ce CSS à votre feuille de style */
.db-notes,
.db-important-events,
.db-upcoming-events {
    flex: 1;
}

/* Ajoutez ce CSS à votre feuille de style */
.db-add-button {
    margin-top: 10px;
    background-color: #007bff;
    color: #fff;
    border: none;
    padding: 8px 16px;
    font-size: 16px;
    cursor: pointer;
    border-radius: 4px;
}

.db-add-button:hover {
    background-color: #0056b3;
}

/* Styles pour la fenêtre modale */
.db-modal {
    display: none;
    position: fixed;
    z-index: 111111111111111111111111111111111111111110;
    left: 0;
    top: -10%;
    width: 100%;
    overflow: hidden;
    opacity: 0;
}

.db-modal.show {
    display: block;
    opacity: 1;
}

.db-modal-content {
    margin-top: 120px !important;
    background-color: #fff;
    margin: auto;
    padding: 30px;
    border: 2px solid #41be54;
    width: 60%;
    border-radius: 20px;
    position: relative;
    background-image: url("http://localhost/wordpress/wp-content/themes/astra/images/surf-modal-add.svg");
    background-size: cover;
    z-index: 10000 !important;
    animation: fade-in 0.5s ease;
}

.db-modal-background {
    position: fixed;
    left: 50%;
    top: 50%;
    background-color: rgba(0, 0, 0, 0.5);
    border-radius: 20px;
    transform: translate(-50%, -50%);
    overflow-y: auto;
    z-index: 999;
}

.db-modal-inner {
    background-color: #f2f2f2;
    padding: 20px;
    border-radius: 20px;
    margin-top: 40px;
}

.db-modal-content h2 {
    margin-top: 0;
    font-size: 1.5rem;
    margin-bottom: 20px;
    text-align: center;
}

.db-modal-form {
    margin-top: 20px;
}

.db-modal-radios {
    display: flex;
    justify-content: space-around;
    margin-bottom: 10px;
}

.db-custom-radio {
    display: flex;
    flex-direction: column;
    align-items: center;
    position: relative;
    cursor: pointer;
    font-size: 16px;
    user-select: none;
    padding: 10px;
}

.db-custom-radio input[type="radio"] {
    position: absolute;
    opacity: 0;
    cursor: pointer;
}

.db-radio-button {
    height: 40px;
    width: 80px;
    background-color: white;
    border: 2px solid #41be54;
    border-radius: 20px;
    display: flex;
    align-items: center;
    justify-content: center;
    position: relative;
    transition: all 0.25s ease;
}

.db-radio-button:hover {
    transform: translateY(-5px);
}

.db-radio-button:before {
    content: "✔";
    color: rgb(185, 185, 185);
    font-size: 20px;
}

/* Couleur pour Mandat au survol */
#db-mandat:hover~.db-radio-button:before,
#db-mandat~.db-radio-button:hover:before {
    visibility: visible;
    color: #416CBE;
}

/* Couleur pour Évènement au survol */
#db-event:hover~.db-radio-button:before,
#db-event~.db-radio-button:hover:before {
    visibility: visible;
    color: #41be54;
}

/* Couleur pour Note au survol */
#db-note:hover~.db-radio-button:before,
#db-note~.db-radio-button:hover:before {
    visibility: visible;
    color: #BE41AB;
}

/* Si le bouton est sélectionné ET survolé, le tick devient blanc */
#db-mandat:checked:hover~.db-radio-button:before,
#db-event:checked:hover~.db-radio-button:before,
#db-note:checked:hover~.db-radio-button:before {
    color: white;
}

.db-custom-radio:hover .db-radio-button:before {
    visibility: visible;
    color: #41be54;
    transform: scale(1.2);
}

.db-custom-radio input:checked~.db-radio-button {
    background-color: #41be54;
    border-color: #41be54;
}

.db-custom-radio input:checked~.db-radio-button:before {
    visibility: visible;
    color: white;
}

.info-section {
    padding: 20px;
    border-radius: 20px;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
}

.enhanced-list {
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.rights-item {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 10px;
    border: 1px solid #e0e0e0;
    border-radius: 8px;
    background-color: #ffffff;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
    transition: transform 0.2s ease, box-shadow 0.2s ease;
}

.rights-item:hover {
    transform: translateY(-2px);
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.15);
}

.rights-item i {
    font-size: 1.5rem;
}

.new-right {
    background-color: #fff8e1;
    border-color: #ffd700;
}

.rights-item p {
    margin: 0;
    font-size: 1rem;
    font-weight: 500;
    color: #333;
}

.new-right p {
    font-weight: bold;
}


.db-extra-form {
    display: none;
    opacity: 0;
    max-height: 0;
    transition: all 0.5s ease;
}

.db-extra-form.show {
    display: block;
    opacity: 1;
    max-height: 500px;
    margin-top: 20px;
}

.db-extra-form label {
    display: block;
}

.db-extra-form input[type="text"],
.db-extra-form textarea {
    width: 100%;
    padding: 8px;
    margin-bottom: 10px;
    border: 1px solid #ccc;
    border-radius: 4px;
    resize: none;
}

/* Ajout pour aligner les champs en ligne */
.db-inline-container {
    display: flex;
    gap: 15px;
    flex-wrap: wrap;
    margin-top: 20px;
    margin-bottom: 20px;
}

.db-inline-field {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    flex: 1 1 auto;
    text-align: center;
}

.db-inline-field label {
    margin-bottom: 5px;
}

.db-modal-submit {
    border-radius: 20px;
    border: 2px solid #41be54 !important;
    color: #41be54 !important;
    display: block;
    margin: 0 auto;
    margin-top: 20px;
    overflow: hidden;
    position: relative;
    text-decoration: none;
    background-color: white;
    line-height: 0.21;
    font-weight: 700;
    margin-top: 40px;
}

.db-modal-submit:hover {
    background-color: #41be54;
    color: white !important;
}

.db-add-event-container {
    text-align: center;
    margin-bottom: 50px;
}

.db-add-event-button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 10px 40px;
    background-color: #f2f2f2;
    color: #41be54;
    cursor: pointer;
    border-radius: 20px;
    border: solid 2px #41be54;
    margin-top: 20px;
    margin-bottom: 20px;
    transition: all 0.25s ease;
    font-family: "Lexend Deca", serif;
}

.db-add-event-button:hover {
    background-color: white;
    color: #41be54;
    border: solid 2px #41be54;
    transform: translateY(-5px);
}

.db-add-event-icon {
    margin-right: 5px;
    font-weight: bold;
    font-size: 18px;
}

#content1 {
    margin-top: 20px;
    margin-bottom: 80px;
    background: rgba(255, 255, 255, 0.15);
    backdrop-filter: blur(10px);
    border-radius: 20px;
    padding: 20px;
    box-shadow: 0 8px 32px rgba(31, 38, 135, 0.37);
}

#db-mandat+.db-radio-button {
    border: 2px solid #416CBE;
    background-color: transparent;
}

#db-mandat:checked+.db-radio-button {
    background-color: #416CBE;
}

/* Style pour Note */
#db-note+.db-radio-button {
    border: 2px solid #BE41AB;
    background-color: transparent;
}

#db-note:checked+.db-radio-button {
    background-color: #BE41AB;
}

.event-button {
    position: absolute;
    top: 1rem;
    right: 1rem;
    background-color: transparent;
    color: #41be54;
    border: none;
    padding: 0;
    font-size: 32px;
    cursor: pointer;
    outline: none;
    transition: transform 0.2s ease-in-out;
}

.event-button::before {
    content: "\2606";
    position: absolute;
    top: -0.9rem;
    left: -0.9rem;
}

.event-button.clicked::before {
    content: "\2605";
}

.event-button.clicked {
    color: #41be54;
    transform: scale(1);
}

.event-button:hover {
    color: #41be54;
    transform: scale(1.1);
}

.notes-container {
    display: flex;
    flex-wrap: wrap;
}

.note-card {
    border-radius: 20px;
    padding: 20px;
    width: calc(33.333% - 20px);
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
    width: 100%;
    background-color: white;
    font-size: 1.1rem;
    margin-bottom: 10px;
    border: solid 1px #ccc;
    position: relative;
    transition: background-color 0.3s ease;
}

.note-card:hover {
    background-color: rgba(0, 0, 0, 0.1);
}

.edit-button-note-card {
    position: absolute;
    bottom: 10px;
    right: 10px;
    background-color: #be41ab;
    color: white;
    border: none;
    border-radius: 4px;
    padding: 8px 12px;
    cursor: pointer;
    opacity: 0;
    transition: opacity 0.3s ease;
    font-family: "Lexend Deca", serif;
}

.note-card:hover .edit-button-note-card {
    opacity: 1;
}

.edit-button-note-card:hover {
    background-color: white;
    color: #be41ab;
}

.edit-btn-cancel-note {
    background-color: #be41ab;
    color: white;
    padding: 10px 15px;
    border: none;
    cursor: pointer;
    font-family: "Lexend Deca", serif;
}

.edit-btn-cancel-note:hover {
    background-color: white;
    color: #be41ab;
}

.edit-btn-save-note {
    background-color: #be41ab;
    color: white;
    padding: 10px 15px;
    border: none;
    cursor: pointer;
    font-family: "Lexend Deca", serif;
    margin-right: 10px;
}

.edit-btn-save-note:hover {
    background-color: white;
    color: #be41ab;
}

.note-card h3 {
    margin-top: 0;
    font-size: 1.15rem;
    color: #41be54;
}

.note-card p {
    margin-bottom: 0;
}

.mandat-card {
    border-radius: 20px;
    border: 1px solid #ccc;
    padding: 20px;
    width: calc(33.333% - 20px);
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
    width: 100%;
    background-color: white;
    font-size: 1.1rem;
    position: relative;
    margin-bottom: 10px;
    transition: background-color 0.3s ease;
    text-align: left !important;
}

.mandat-card:hover {
    background-color: rgba(0, 0, 0, 0.1);
}

.mandat-exclusif {
    background-color: white !important;
    color: #416cbe;
    padding: 5px 10px;
    border-radius: 15px;
    font-size: 14px;
    font-weight: bold;
    display: inline-block;
    position: absolute;
    bottom: 10px;
    right: 10px;
    border: 2px solid #416cbe;
}

.mandat-card h3 {
    margin-top: 0;
    font-size: 1rem;
    color: #41be54;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: normal;
    word-wrap: break-word;
    max-width: 400px;
}

.mandat-card p {
    margin-bottom: 0;
}

/* Bouton Éditer pour les cartes mandats */
.edit-button-mandat-card {
    position: absolute;
    top: 10px;
    right: 10px;
    background-color: #416cbe;
    color: white;
    border: none;
    border-radius: 4px;
    padding: 8px 12px;
    cursor: pointer;
    opacity: 0;
    transition: opacity 0.3s ease;
    font-family: "Lexend Deca", serif;
}

/* Le bouton devient visible au survol de la carte mandat */
.mandat-card:hover .edit-button-mandat-card {
    opacity: 1;
}

/* Style du bouton Éditer au survol */
.edit-button-mandat-card:hover {
    background-color: white;
    color: #416cbe;
}

/* Bouton Annuler */
.edit-btn-cancel-mandat {
    background-color: #416cbe;
    color: white;
    padding: 10px 15px;
    border: none;
    cursor: pointer;
    font-family: "Lexend Deca", serif;
}

/* Style du bouton Annuler au survol */
.edit-btn-cancel-mandat:hover {
    background-color: white;
    color: #416cbe;
}

/* Bouton Sauvegarder */
.edit-btn-save-mandat {
    background-color: #416cbe;
    color: white;
    padding: 10px 15px;
    border: none;
    cursor: pointer;
    font-family: "Lexend Deca", serif;
    margin-right: 10px;
}

/* Style du bouton Sauvegarder au survol */
.edit-btn-save-mandat:hover {
    background-color: white;
    color: #416cbe;
}

.event-card {
    position: relative;
    border: 1px solid #ccc;
    border-radius: 5px;
    margin-bottom: 10px;
    background-color: #fff;
    font-size: 1.1rem;
    border-radius: 20px;
    padding: 15px;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
    transition: filter 0.3s ease, background-color 0.3s ease;
    text-align: left !important;
}

.event-card:last-child {
    margin-bottom: 0;
}


.event-card:hover {
    background-color: rgba(0, 0, 0, 0.1);
}

/* Bouton d'édition pour la carte d'événement */
.edit-button-event-card {
    position: absolute;
    bottom: 10px;
    right: 10px;
    background-color: #41be54;
    color: white;
    border: none;
    border-radius: 4px;
    padding: 8px 12px;
    cursor: pointer;
    opacity: 0;
    font-family: "Lexend Deca", serif;
    transition: opacity 0.3s ease;
}

.event-card:hover .edit-button-event-card {
    opacity: 1;
}

.edit-button-event-card:hover {
    background-color: #11c52f;
}

/* Style du bouton Éditer au survol */
.edit-button-event-card:hover {
    background-color: white;
    color: #41be54;
}

/* Bouton Annuler */
.edit-btn-cancel-event {
    background-color: #41be54;
    color: white;
    padding: 10px 15px;
    border: none;
    cursor: pointer;
    font-family: "Lexend Deca", serif;
}

/* Style du bouton Annuler au survol */
.edit-btn-cancel-event:hover {
    background-color: white;
    color: #41be54;
}

/* Bouton Sauvegarder */
.edit-btn-save-event {
    background-color: #41be54;
    color: white;
    padding: 10px 15px;
    border: none;
    cursor: pointer;
    font-family: "Lexend Deca", serif;
    margin-right: 10px;
}

/* Style du bouton Sauvegarder au survol */
.edit-btn-save-event:hover {
    background-color: white;
    color: #41be54;
}

.event-card h3 {
    margin-top: 0;
    margin-bottom: 10px;
    font-size: 1rem;
    color: #41be54;
    font-size: 1.15rem;
}

.event-card p {
    margin-bottom: 0.5rem;
}

.edit-form input,
.edit-form textarea {
    display: block;
    width: 100%;
    margin-bottom: 10px;
}

.event-details {
    display: flex;
    align-items: center;
}

.event-details .event-date {
    margin-right: 10px;
}

.title-delete-events {
    color: #41be54;
}

.title-delete-mandats {
    color: #416cbe;
}

.title-delete-notes {
    color: #be41ab;
}

.title-archive-events {
    color: #41be54;
}

.title-archive-mandats {
    color: #416cbe;
}

.modal-title {
    color: blue;
}

.event-title {
    color: green;
}

.mandat-title {
    color: red;
}

.note-title {
    color: purple;
}

.filter-archive-buttons {
    display: flex;
    justify-content: center;
    gap: 10px;
}

.filter-archive-button {
    padding: 10px 20px;
    background-color: #f1f1f1;
    cursor: pointer;
    transition: background-color 0.3s;
    margin-top: 20px;
    color: black;
    font-family: "Lexend Deca", serif;
    border-radius: 20px;
}

.filter-archive-button.active,
.filter-archive-button:hover {
    background-color: #ddd;
    color: black;
}

/* Style spécifique pour le bouton "Évènements" */
#filter-archive-events {
    background-color: #41be54;
    border-color: #3a9b47;
    color: white;
}

#filter-archive-events:hover {
    background-color: #36a347;
    border-color: #318f3d;
}

/* Style spécifique pour le bouton "Mandats" */
#filter-archive-mandates {
    background-color: #416cbe;
    border-color: #1512ce;
    color: white;
}

#filter-archive-mandates:hover {
    background-color: #365b9e;
    border-color: #1512ce;
}

.db-archive-event-card.event,
.db-archive-event-card.mandat {
    display: block;
}

.days-remaining,
.date-cartes,
.type-mandat {
    white-space: nowrap;
    background-color: #41be54;
    color: white;
    padding: 5px 10px;
    border-radius: 15px;
    font-size: 14px;
    font-weight: bold;
    margin-right: 10px;
    margin-bottom: 5px;
    margin-top: 10px;
}

.type-mandat {
    background-color: #416cbe;
}

.badge-tags {
    display: inline-block;
    padding: 0.1em 0.2em;
    font-size: 0.875em;
    font-weight: 600;
    color: #41be54;
    background-color: white;
    border-radius: 0.25rem;
    margin-right: 0.5em;
    border: 2px solid #41be54;
}

.badge-tags:last-child {
    margin-right: 0;
}

.event-badge {
    position: absolute;
    top: -4px;
    right: 2px;
    color: white;
    font-size: 15px;
    font-weight: bold;
    z-index: 1;
}

.important-badge {
    position: absolute;
    top: -4px;
    left: 2px;
    color: gold;
    font-size: 15px;
    font-weight: bold;
    z-index: 1;
}

.relative {
    position: relative;
}

.mandat-day {
    background-color: #416cbe;
    color: #fff;
    cursor: pointer;
}

.mixed-day {
    background: repeating-linear-gradient(45deg,
            #41be54,
            #41be54 10px,
            #416cbe 10px,
            #416cbe 20px);
    color: #fff;
    cursor: pointer;
}

.mandat-card h3 {
    color: #416cbe;
    font-size: 1.15rem;
    margin-bottom: 10px;
}

.note-card h3 {
    color: #be41ab;
    margin-bottom: 10px;
}

.mandat-card .days-remaining {
    background-color: #416cbe;
}

.mandat-card .date-cartes {
    background-color: #416cbe;
}

.event-card.important {
    background-image: linear-gradient(rgba(255, 255, 255, 0.5),
            rgba(255, 255, 255, 0.5)),
        url("http://localhost/wordpress/wp-content/uploads/2024/06/star.jpg");
    background-size: 90px 90px;
    background-position: center;
    background-repeat: no-repeat;
}

.event-card {
    position: relative;
    border: 1px solid #ccc;
    padding: 20px;
    margin-bottom: 16px;
}

.star-button {
    position: absolute;
    top: -5px;
    right: -20px;
    background: none;
    border: none;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    z-index: 1;
}

.star-button .star {
    width: 24px;
    height: 24px;
    fill: #ccc;
    transition: fill 0.3s ease;
}

.star-button .star.filled {
    fill: gold;
}

.event-content-wrapper {
    padding-right: 40px;
}

/* Styles existants */
.db-archive-event-button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    color: #f1a500;
    cursor: pointer;
    font-size: 1rem;
    margin-top: 20px;
    margin-bottom: 20px;
    margin-right: 20px;
    background: none;
    opacity: 0.5;
    transition: all 0.25s ease;
}

@media screen and (max-width: 768px) {
    .db-archive-event-button {
        margin-top: 0;
        margin-bottom: 0;
        margin-right: 0;
    }
}

.db-archive-events-container {
    margin-top: 20px;
    background-color: #f2f2f2;
    padding: 20px;
    border-radius: 20px;
}

.db-archive-event-button:hover {
    transform: scale(1.1);
    opacity: 1;
    transform: translateY(-5px);
}

.db-archive-modal {
    display: none;
    position: fixed;
    z-index: 1000;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    overflow: auto;
    opacity: 0;
    transition: opacity 0.3s ease;
}

.db-archive-modal.show {
    display: block;
    opacity: 1;
}

.db-archive-modal-content {
    background-color: #fff;
    margin: 0 auto;
    padding: 30px;
    border: 2px solid #f1a500;
    width: 60%;
    border-radius: 20px;
    position: relative;
    animation: fade-in 0.5s ease;
    background-image: url("http://localhost/wordpress/wp-content/themes/astra/images/surf-modal-archive.svg");
    background-size: cover;
}

.db-archive-event-card {
    border: 1px solid rgba(0, 0, 0, 0.1);
    border-radius: 10px;
    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);
    padding: 15px;
    margin: 10px auto;
    transition: box-shadow 0.3s ease;
    text-align: left;
    flex: 1 1 calc(100% - 40px);
    max-width: 600px;
    display: none;
    overflow: hidden;
    position: relative;
    background-color: white;
}

.db-archive-event-card .card-icon-bg {
    position: absolute;
    top: 50%;
    right: 10px;
    transform: translateY(-50%);
    font-size: 4rem;
    color: rgba(0, 0, 0, 0.1);
    z-index: 0;
    opacity: 0.5;
}

/* Cibler le conteneur du contenu de la modale */
.archive-swal-popup .content-container {
    background-color: #f2f2f2;
    border-radius: 20px;
    padding: 20px;
    overflow-y: auto;
}


/* Personnalisation de la barre de défilement */
.archive-swal-popup {
    overflow: auto;
}

/* Pour les navigateurs Webkit comme Chrome, Safari, Edge */
.archive-swal-popup::-webkit-scrollbar {
    width: 12px;
}

.archive-swal-popup::-webkit-scrollbar-thumb {
    background-color: #41be54;
    border-radius: 10px;
    border: 3px solid #fff;
}

.archive-swal-popup::-webkit-scrollbar-track {
    background: rgba(0, 0, 0, 0.1);
    border-radius: 10px;
}

/* Animation de fade-in */
@keyframes fade-in {
    from {
        opacity: 0;
        transform: translateY(-20px);
    }

    to {
        opacity: 1;
        transform: translateY(0);
    }
}

.closeBtn {
    color: #aaa;
    float: right;
    font-size: 35px;
    font-weight: bold;
    cursor: pointer;
}

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

.closeBtn_add_modale {
    color: #aaa;
    float: right;
    font-size: 35px;
    font-weight: bold;
    cursor: pointer;
}

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

@keyframes fade-in {
    from {
        opacity: 0;
    }

    to {
        opacity: 1;
    }
}

.db-delete-event-button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    color: #d80000;
    cursor: pointer;
    font-size: 1rem;
    margin-top: 20px;
    margin-bottom: 20px;
    margin-left: 20px;
    background: none;
    opacity: 0.5;
    transition: all 0.25s ease;
}

@media screen and (max-width: 768px) {
    .db-delete-event-button {
        margin-top: 0;
        margin-bottom: 0;
        margin-left: 0;
    }
}

.db-delete-event-button:hover {
    transform: scale(1.1);
    opacity: 1;
    transform: translateY(-5px);
}

/* Animation de fade-in */
@keyframes fade-in {
    from {
        opacity: 0;
        transform: translateY(-20px);
    }

    to {
        opacity: 1;
        transform: translateY(0);
    }
}

.db-delete-items-container {
    width: 100%;
    max-height: 300px;
    overflow-y: auto;
}

.db-delete-columns-container {
    display: flex;
    justify-content: space-between;
    gap: 20px;
    width: 100%;
    margin-top: 40px;
}

.db-delete-column {
    flex-grow: 1;
    padding: 20px;
    background-color: #f9f9f9;
    border-radius: 20px;
    min-width: 150px;
    flex-basis: 0;
}

.db-delete-column h3 {
    text-align: center;
}

.db-delete-item {
    display: flex;
    align-items: center;
    margin-bottom: 5px;
    color: black;
}

.db-delete-item label {
    margin-left: 5px;
}

#db-delete-events {
    margin-left: 20px;
    /* Espace sur la gauche pour la colonne Évènements */
}

#db-delete-notes {
    margin-right: 20px;
    /* Espace sur la droite pour la colonne Notes */
}

/* Conteneur des cartes */
.delete-item {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 10px;
    margin-bottom: 10px;
    background-color: #ffffff;
    border: 1px solid #ccc;
    border-radius: 8px;
    box-shadow: 0px 2px 5px rgba(0, 0, 0, 0.1);
    cursor: pointer;
    transition: transform 0.2s, box-shadow 0.2s;
}

/* Couleurs par type */
.delete-item[data-type="event"] {
    border-left: 5px solid #41be54;
    /* Vert */
}

.delete-item[data-type="mandat"] {
    border-left: 5px solid #416cbe;
    /* Bleu */
}

.delete-item[data-type="note"] {
    border-left: 5px solid #be41ab;
    /* Rose */
}

/* Survol */
.delete-item:hover {
    transform: translateY(-5px);
    box-shadow: 0px 5px 15px rgba(0, 0, 0, 0.2);
    background-color: #f9f9f9;
}

/* Style du texte */
.delete-item label {
    font-family: 'Lexend Deca', sans-serif;
    font-size: 1rem;
    color: #333;
    margin-left: 10px;
}

/* Effet sur l'élément sélectionné */
.delete-item.selected {
    background-color: #e6f7e6;
    border-color: #41be54;
    box-shadow: 0px 5px 15px rgba(65, 190, 84, 0.3);
}

.delete-card {
    cursor: pointer;
    transition: background-color 0.3s ease, box-shadow 0.3s ease;
    padding: 10px;
    border-radius: 10px;
    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);
    margin-top: 15px;
    background-color: white;
}

.delete-card[data-type="event"]:hover {
    background-color: rgba(65, 190, 84, 0.1);
}

.delete-card[data-type="mandat"]:hover {
    background-color: rgba(65, 108, 190, 0.1);
}

.delete-card[data-type="note"]:hover {
    background-color: rgba(190, 65, 171, 0.1);
}

.delete-card:hover {
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.2);
}



#mandat-type-container {
    margin-top: 20px;
    margin-bottom: 20px;
    display: flex;
    justify-content: center;
}

.db-inline-field {
    align-items: center;
    gap: 10px;
}

.db-inline-field label {
    white-space: nowrap;
    overflow: hidden;
}

.db-calendrier-action-modal {
    display: none;
    position: fixed;
    z-index: 1000;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    overflow: auto;
}

.db-calendrier-action-modal-content {
    background-color: #fefefe;
    margin: 15% auto;
    padding: 20px;
    border: 2px solid #41be54;
    width: 40%;
    border-radius: 20px;
    z-index: 1001;
    position: relative;
    animation: fade-in 0.5s ease;
}

.db-calendrier-action-close {
    color: #aaa;
    float: right;
    font-size: 28px;
    font-weight: bold;
}

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

#db-calendrier-action-modal-title {
    font-size: 1.5rem;
    margin-bottom: 20px;
}

table {
    width: 100%;
}

th,
td {
    width: 14.2857%;
    /* 100% / 7 jours */
    height: 35px;
    /* Ajustez cette hauteur selon vos besoins */
    text-align: center;
    vertical-align: middle;
    border: 1px solid #ddd;
    box-sizing: border-box;
    cursor: pointer;
}

td:hover {
    border: 1px solid #41be54;
}

/* Styliser l'input de type adresse */
#db-address {
    padding: 5px;
    border: 2px solid #41be54;
    border-radius: 10px;
    outline: none;
    font-size: 16px;
    cursor: pointer;
}

/* Styliser l'input de type date */
input[type="date"] {
    padding: 5px;
    border: 2px solid #41be54;
    border-radius: 10px;
    outline: none;
    font-size: 16px;
    cursor: pointer;
    width: 150px;
}

input[type="date"] {
    transition: border-color 0.3s ease-in-out;
}

/* Styliser l'input de type time */
input[type="time"] {
    padding: 5px;
    border: 2px solid #41be54;
    border-radius: 10px;
    outline: none;
    font-size: 16px;
    cursor: pointer;
    width: 150px;
}

input[type="time"] {
    transition: border-color 0.3s ease-in-out;
}

/* Styliser l'input de durée */
input[type="number"] {
    padding: 5px;
    border: 2px solid #41be54;
    border-radius: 10px;
    outline: none;
    font-size: 16px;
    width: 150px;
}

input[type="number"] {
    transition: border-color 0.3s ease-in-out;
}

/* Styliser l'input de type adresse */
input[type="address"] {
    padding: 5px;
    border: 2px solid #41be54;
    border-radius: 10px;
    outline: none;
    font-size: 16px;
    cursor: pointer;
}

input[type="address"] {
    transition: border-color 0.3s ease-in-out;
}

.add-event-button-inside-modal {
    border-radius: 20px;
    border: 2px solid #41be54 !important;
    color: #41be54 !important;
    display: block;
    margin-top: 20px;
    overflow: hidden;
    position: relative;
    text-decoration: none;
    background-color: white;
    line-height: 0.21;
    font-weight: 700;
    margin-top: 20px;
}

.add-event-button-inside-modal:hover {
    background-color: #41be54;
    color: white !important;
}

/* Styles pour la searchbar */
.search-bar {
    display: flex;
    align-items: center;
    background-color: white;
    border: 1px solid rgba(0, 0, 0, 0.2);
    border-radius: 30px;
    padding: 10px 15px;
    margin: 10px 0;
    width: 100%;
    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);
    transition: box-shadow 0.3s ease;
}

.search-bar:hover {
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.2);
}

.search-bar input {
    border: none;
    outline: none;
    flex: 1;
    font-size: 1rem;
    padding: 5px;
    font-family: Arial, sans-serif;
}

.search-bar i {
    color: rgba(0, 0, 0, 0.5);
    margin-right: 10px;
    font-size: 1rem;
}


.filter-archive-buttons {
    display: flex;
    flex-direction: column;
    align-items: center;
}

.titre-modale-swal {
    position: relative;
    text-align: center;
}

.titre-modale-swal .title-underline {
    width: 100%;
    height: 4px;
    background-color: #F1A500;
    margin-top: 10px;
    position: absolute;
    left: 0;
}


.archive-swal-popup .search-bar {
    display: flex;
    align-items: center;
    width: 100%;
    max-width: 600px;
    margin: 0 auto;
    margin-bottom: 20px;
    padding: 10px;
    background: #f9f9f9;
    border: 1px solid #ccc;
    border-radius: 20px;
}

.archive-swal-popup #archive-content {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    width: 100%;
    max-width: 600px;
    margin: 0 auto;
}

@media (min-width: 600px) {
    .filter-archive-buttons {
        flex-direction: row;
        justify-content: center;
    }

    #search-bar {
        width: 50%;
    }
}

.db-address-suggestions {
    max-height: 150px;
    overflow-y: auto;
    position: absolute;
    width: calc(100% - 20px);
    background: white;
    z-index: 1000;
}

.suggestion-item {
    padding: 10px;
    cursor: pointer;
}

.suggestion-item:hover {
    background: #f0f0f0;
}

.full-largeur-input-modale {
    width: 80%;
}

/* Styles pour le contenu du popup */
.custom-popup {
    font-family: Arial, sans-serif;
    color: #333;
}

.custom-popup h3 {
    margin: 0;
    padding: 0;
    font-size: 16px;
    color: #007bff;
}

.custom-popup-resultat .leaflet-popup-content {
    padding-top: 40px;
    /* Décale le contenu uniquement pour les popups de cette carte */
}

.leaflet-popup-tip {
    background: #fff;
}

.leaflet-control-custom {
    background: white;
    border-radius: 20px;
}

.suggestion-item {
    cursor: pointer;
}

#map-address-input {
    border-radius: 20px;
    border: solid 2px #41be54;
}

#map-address-input:focus {
    border: solid 2px #41be54;
}

#map1-address-input {
    border-radius: 20px;
    border: solid 2px #41be54;
}

#map1-address-input:focus {
    border: solid 2px #41be54;
}

#map2-address-input {
    border-radius: 20px;
    border: solid 2px #41be54;
}

#map2-address-input:focus {
    border: solid 2px #41be54;
}

.leaflet-touch .leaflet-control-layers,
.leaflet-touch .leaflet-bar {
    border: 2px solid #41be54 !important;
    background-clip: padding-box;
    border-radius: 20px !important;
}

.leaflet-control-attribution {
    border-top: 1px solid #41be54 !important;
    border-left: 1px solid #41be54 !important;
}

.bev-modal {
    display: none;
    position: fixed;
    z-index: 1000000;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    overflow: auto;
    background-color: rgba(0, 0, 0, 0);
    transition: background-color 0.3s ease;
}

.bev-modal.show {
    display: block;
    background-color: rgba(0, 0, 0, 0.4);
}

.bev-modal-content {
    background-color: white;
    margin: 5% auto;
    padding: 20px;
    border: 2px solid #41be54;
    width: 55%;
    opacity: 0;
    transform: translateY(-20px);
    transition: opacity 0.3s ease, transform 0.3s ease;
    border-radius: 20px;
}

.bev-modal-content.show {
    opacity: 1;
    transform: translateY(0);
}

#bev-modal-details {
    border-radius: 20px;
    background-color: #f2f2f2;
    padding: 20px;
    border: none;
}

.bev-close {
    color: #aaa;
    float: right;
    font-size: 28px;
    font-weight: bold;
    margin-top: -10px;
}

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

/* Conteneur pour les deux cartes */
.bev-container-cards {
    display: flex;
    justify-content: space-between;
    margin-bottom: 20px;
}

/* Style des cartes */
.bev-card {
    border-radius: 20px;
    background-color: #f2f2f2;
    padding: 20px;
    border: none;
    width: 48%;
}

.bev-card-lg {
    border-radius: 20px;
    background-color: #f2f2f2;
    padding: 20px;
    border: none;
    width: 100%;
    margin-bottom: 20px;
}

.add-contact-btn {
    background-color: white;
    color: #41be54;
    border: none;
    padding: 5px 10px;
    font-size: 16px;
    cursor: pointer;
    border-radius: 20px;
    display: inline-flex;
    align-items: center;
    border: solid 2px #41be54;
}

.add-contact-btn:hover {
    background-color: #41be54;
    color: white;
    border: solid 2px #f2f2f2;
}

.add-contact-btn:focus {
    background-color: #41be54;
    color: white;
    border: solid 2px #f2f2f2;
}

#contact-form {
    display: none;
}

/* Conteneur global pour les colonnes */
.bev-form {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    margin-top: 20px;
    padding: 20px;
    background-color: #f9f9f9;
    border-radius: 20px;
    max-width: 100%;
}

.bev-form h2 {
    margin-top: 0;
    margin-bottom: 20px;
    font-size: 1.5em;
    color: #333;
    text-decoration: underline;
    text-decoration-color: #41be54;
    text-decoration-thickness: 3px;
    text-underline-offset: 4px;
}

/* Colonne gauche et droite */
.bev-column {
    width: 48%;
    /* 48% pour avoir de l'espace entre les colonnes */
    box-sizing: border-box;
}

/* Style commun des labels et des inputs */
.bev-form label,
.bev-form input {
    width: 100%;
    margin-bottom: 10px;
}

.bev-form input {
    padding: 8px;
    border: 1px solid #41be54;
    border-radius: 20px;
    box-sizing: border-box;
}

/* Style du bouton de soumission */
#bev-form button {
    background-color: #41be54;
    color: white;
    border: none;
    padding: 10px 20px;
    border-radius: 20px;
    cursor: pointer;
    font-size: 16px;
    width: 100%;
}

/* Hover sur le bouton */
#bev-form button:hover {
    background-color: #369945;
}

/* Espace entre chaque input */
.bev-form input {
    margin-bottom: 15px;
}

/* Résoudre les problèmes sur les petits écrans */
@media (max-width: 768px) {
    .bev-column {
        width: 100%;
    }
}

.bev-card h2 {
    margin-top: 0;
    margin-bottom: 20px;
    font-size: 1.5em;
    color: #333;
    text-decoration: underline;
    text-decoration-color: #41be54;
    text-decoration-thickness: 3px;
    text-underline-offset: 4px;
}

.bev-card-lg h2 {
    margin-top: 0;
    margin-bottom: 20px;
    font-size: 1.5em;
    color: #333;
    text-decoration: underline;
    text-decoration-color: #41be54;
    text-decoration-thickness: 3px;
    text-underline-offset: 4px;
}

.bev-modal-content form {
    margin-top: 20px;
}

.bev-modal-content form label {
    display: block;
    margin-top: 10px;
}

.bev-modal-content form input {
    width: 100%;
    padding: 8px;
    margin-top: 5px;
    border: 1px solid #ddd;
    border-radius: 5px;
}

.bev-modal-content form button {
    margin-top: 20px;
    padding: 10px 20px;
    background-color: #4caf50;
    color: white;
    border: none;
    border-radius: 5px;
    cursor: pointer;
}

.bev-modal-content form button:hover {
    background-color: #45a049;
}

.bev-add-button {
    background-color: #30941e;
    color: #fff;
    border: none;
    border-radius: 20px;
    margin-bottom: 10px;
    font-family: "Lexend Deca", serif;
    transition: all 0.25s ease;
}

.bev-add-button:hover {
    color: #fff;
    transform: translateY(-5px);
}

.popup-buttons {
    display: flex;
    justify-content: space-between;
    margin-top: 10px;
}

.button-info-question {
    background-color: #30941e;
    color: white;
    font-family: "Lexend Deca", serif;
    border: none;
    padding: 10px 20px;
    text-align: center;
    text-decoration: none;
    display: inline-block;
    font-size: 14px;
    margin: 2px 1px;
    cursor: pointer;
    border-radius: 20px;
    transition: all 0.25s ease;
}

.button-info-question:hover {
    transform: translateY(-5px);
    color: white;
}

.marker-button {
    background-color: transparent;
    border: none;
    cursor: pointer;
    margin: 5px;
    font-size: 24px;
    color: #9f9e9e;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 50px;
    height: 50px;
    border: 2px solid transparent;
    border-radius: 50%;

}

.marker-button:hover {
    background-color: transparent;
    color: black;
}

.marker-button.selected {
    border: 2px solid #30941e;
    border-radius: 50%;
    color: black;
}

.popup-content-information {
    text-align: center;
    max-width: 275px;
    min-width: 100px;
    margin: 0 auto;
    margin-top: 20px;
}

.google-button,
.details-button {
    background-color: #30941e;
    color: white;
    font-family: "Lexend Deca", serif;
    border: none;
    padding: 10px 20px;
    text-align: center;
    text-decoration: none;
    display: inline-block;
    font-size: 14px;
    margin: 2px 1px;
    cursor: pointer;
    border-radius: 20px;
    transition: all 0.25s ease;
}

.google-button i,
.details-button i {
    margin-right: 5px;
}

.google-button:hover,
.details-button:hover {
    transform: translateY(-5px);
    color: white;
}

.google-button:focus,
.details-button:focus {
    color: white;
}

.reset-btn {
    background-color: #30941e;
    color: white;
    font-family: "Lexend Deca", serif;
    border: none;
    padding: 10px 20px;
    text-align: center;
    text-decoration: none;
    display: inline-block;
    font-size: 14px;
    margin: 2px 1px;
    cursor: pointer;
    border-radius: 20px;
    transition: all 0.25s ease;
    margin-top: 20px;
}

.reset-btn i {
    margin-right: 5px;
}

.reset-btn:hover {
    transform: translateY(-5px);
    color: white;
}

.reset-btn:focus {
    color: white;
}

.info-owner-badge {
    display: inline-block;
    color: white;
    padding: 5px 10px;
    border-radius: 20px;
    font-size: 13px;
    margin: 0.2em;
    font-family: "Lexend Deca", serif;
    position: relative;
}

.info-owner-badge:hover::after {
    content: attr(title);
    transition: opacity 0.1s ease-in-out;
    opacity: 1;
    pointer-events: none;
}

.info-owner-badge::after {
    content: "";
    opacity: 0;
    transition: opacity 0s ease-in-out;
}

.green-badge {
    background-color: #41be54 !important;
}

.green-other-badge {
    background-color: #2E8B57 !important;
}



.wrapper-message-box {
    display: flex;
    justify-content: center;
    align-items: center;
    height: 100vh;
    margin: 0 auto;

    width: 100%;
}

.message-box {
    background-color: #fff;
    padding: 50px;
    border: 1px solid #ccc;
    border-radius: 10px;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
    text-align: center;
    border: solid 2px #41be54;
}

.message-box p {
    font-size: 16px;
    margin-bottom: 20px;
}

.message-box .button {
    background-color: #30941e;
    color: white;
    font-family: "Lexend Deca", serif;
    border: none;
    padding: 10px 20px;
    text-align: center;
    text-decoration: none;
    display: inline-block;
    font-size: 14px;
    margin: 2px 1px;
    cursor: pointer;
    border-radius: 20px;
    transition: all 0.25s ease;
    margin-top: 20px;
}

.message-box .button:hover {
    transform: translateY(-5px);
    color: white;
}

.message-box-content {
    background-color: #e8f5e9;
    border-radius: 10px;
    padding: 20px;
    margin-bottom: 20px;
    margin-top: 20px;
    position: relative;
}

.floating-button {
    display: inline-block;
    padding: 10px 20px;
    background-color: #41be54;
    color: white;
    text-align: center;
    text-decoration: none;
    border-radius: 5px;
    position: relative;
    animation: floating 2s infinite;
}

.floating-button:hover {
    background-color: #45a049;
    /* Couleur de fond au survol */
    transition: background-color 0.3s;
}

@keyframes floating {
    0% {
        transform: translateY(0);
    }

    50% {
        transform: translateY(-10px);
    }

    100% {
        transform: translateY(0);
    }
}

.congrats-title {
    font-size: 2em;
    margin-bottom: 20px;
    color: #41be54;
}

#confetti {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    pointer-events: none;
    z-index: 1000;
}

.info-section-long {
    border: 2px solid #41be54;
    border-radius: 20px;
    width: 100%;
    padding: 20px;
    box-sizing: border-box;
    background-color: white;
    position: relative;
    margin-top: 20px;
    margin-bottom: 10px;
}

.sections-container {
    display: flex;
    justify-content: space-between;
    gap: 20px;
}

.invite-section {
    border-radius: 20px;
    background-color: #f2f2f2;
    padding: 20px;
    margin-top: 20px;
    width: 48%;
    box-sizing: border-box;
    margin-bottom: 40px;
}

.invite-section-modal {
    border-radius: 20px;
    background-color: #f2f2f2;
    padding: 20px;
    margin-top: 20px;
    width: 100%;
    box-sizing: border-box;
    margin-bottom: 40px;
}

.fond-vue-compte-droits {
    display: flex;
    justify-content: space-evenly;
    align-items: center;
    gap: 10px;
    border-radius: 20px;
    background-color: #f2f2f2;
    padding: 20px;
}

.fond-vue-compte-mail {
    border-radius: 20px;
    background-color: #f2f2f2;
    padding: 20px;
    margin-top: 25px;
}

.fond-vue-compte-historique {
    border-radius: 20px;
    background-color: #f2f2f2;
    padding: 20px;
    margin-top: 25px;
}

.fond-vue-compte-mail label {
    display: inline-block;
}

/* Style spécifique pour le bouton classique" */
.button-compte {
    position: relative;
    background: #fff;
    border: 2px solid #ddd;
    border-radius: 10px;
    font-weight: bold;
    color: #333;
    cursor: pointer;
    padding: 10px 20px;
    display: flex;
    align-items: center;
    transition: border 0.3s ease, box-shadow 0.3s ease, color 0.3s ease;
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
    max-height: 44px;
}

.button-compte:hover {
    box-shadow: 0 6px 10px rgba(0, 0, 0, 0.2);
    color: #333;
    border: 2px solid #41be54;
}

.button-compte:focus {
    box-shadow: 0 6px 10px rgba(0, 0, 0, 0.2);
    color: #333;
    border: 2px solid #41be54 !important;
}

.button-compte i {
    margin-right: 8px;
    color: #41be54;
    font-size: 1.2rem;
}

/* Styles spécifiques pour le bouton "Accepter" */
.button-accept:hover {
    border: 2px solid #41be54;
}

.button-accept i {
    margin-right: 8px;
    color: #41be54;
    font-size: 1.2rem;
}

.button-accept {
    width: 100%;
}

/* Styles spécifiques pour le bouton "Ignorer" */
.button-ignore:hover {
    border: 2px solid #ff4d4d;
}

.button-ignore i {
    margin-right: 8px;
    color: #ff4d4d;
    font-size: 1.2rem;
}

.button-ignore {
    width: 100%;
    margin-top: 5px;
}

/* Style spécifique pour le bouton "Upgrade" */
.button-upgrade {
    background: #fff;
    border-radius: 10px;
    font-size: 1rem;
    font-weight: bold;
    cursor: pointer;
    transition: transform 0.3s ease, box-shadow 0.3s ease;
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.2);
    display: flex;
    justify-content: center;
    align-items: center;
    position: relative;
    font-family: 'Lexend Deca', sans-serif;
    height: 39px;
}

/* Texte avec effet dégradé pour "Upgrade" */
.button-upgrade span {
    position: relative;
    background: linear-gradient(45deg, #41be54, #2e8b57, #004d26);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    display: inline-block;
    z-index: 1;
}

/* Icône à gauche du texte pour "Upgrade" */
.button-upgrade i {
    margin-right: 10px;
    font-size: 1.2rem;
    color: #41be54;
}

/* Effet de reflet appliqué uniquement au texte pour "Upgrade" */
.button-upgrade span::after {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 10%;
    height: 100%;
    background: rgba(255, 255, 255, 0.5);
    transform: skewX(-30deg);
    z-index: 0;
    animation: text-reflection 2s linear infinite;
}

/* Hover pour agrandir légèrement le bouton "Upgrade" */
.button-upgrade:hover {
    transform: scale(1.05);
    box-shadow: 0 6px 10px rgba(0, 0, 0, 0.3);
}

/* Animation de balayage */
@keyframes text-reflection {
    0% {
        left: -60%;
    }

    50% {
        left: 0%;
    }

    100% {
        left: 100%;
    }
}

.accept-invitation {
    border-radius: 20px;
    border: 2px solid #41be54 !important;
    color: #41be54 !important;
    margin-top: 20px;
    margin-left: 20px;
    overflow: hidden;
    position: relative;
    text-decoration: none;
    background-color: white;
    line-height: 0.21;
    font-weight: 700;
}

.accept-invitation:hover {
    background-color: #41be54;
    color: white !important;
}

.ignore-invitation {
    border-radius: 20px;
    border: 2px solid #c20000 !important;
    color: #c20000 !important;
    margin-top: 20px;
    overflow: hidden;
    position: relative;
    text-decoration: none;
    background-color: white;
    line-height: 0.21;
    font-weight: 700;
}

.ignore-invitation:hover {
    background-color: #c20000;
    color: white !important;
}

.accept-invitation,
.ignore-invitation {
    min-width: 150px;
    text-align: center;
}

.invitations-section {
    margin-top: 20px;
}

.custom-email-invitation {
    width: 100%;
    max-width: 400px;
    padding: 10px;
    margin: 10px 0;
    border: 1px solid #41be54 !important;
    border-radius: 5px !important;
    font-family: "Lexend Deca", serif;
    font-size: 16px !important;
}

.tabs {
    overflow: hidden;
}

.tablink {
    color: black;
    float: left;
    border: 2px solid #41be54;
    cursor: pointer;
    padding: 10px 20px;
    transition: 0.3s;
    font-size: 17px;
    font-family: "Lexend Deca", serif;
    background-color: white;
    margin-right: -1px;
    border-bottom: none;
    position: relative;
    top: 1px;
    z-index: 1;
}

.tablink:hover {
    background-color: #41be54;
    color: white;
}

.tablink.active {
    background-color: #41be54;
    color: white;
    border-bottom: 1px solid white;
}

.tablink:nth-child(2).active {
    background-color: #416cbe;
    color: white;
}

.tabcontent {
    display: none;
    border: 2px solid #41be54;
    border-radius: 0 20px 20px 20px;
    padding: 20px;
    background-color: white;
    margin-top: -1px;
    position: relative;
    z-index: 0;
    margin-bottom: 20px;
}

.tablink:first-child {
    border-radius: 10px 0 0 0 !important;
}

.tablink:last-child {
    border-radius: 0 10px 0 0 !important;
}

/* Classe commune pour les deux boutons */
.button-parametre-compte {
    border-radius: 20px;
    border: 2px solid #41be54 !important;
    color: #41be54 !important;
    display: inline-block;
    overflow: hidden;
    position: relative;
    text-decoration: none;
    background-color: white;
    line-height: 1.2;
    font-weight: 700;
    margin-top: 10px;
    padding: 10px 20px;
    transition: background-color 0.3s ease, color 0.3s ease, box-shadow 0.1s ease;
}

/* Effet au survol (hover) */
.button-parametre-compte:hover {
    background-color: #41be54;
    color: white !important;
}

/* Effet de clic (active) */
.button-parametre-compte:active {
    box-shadow: inset 0 3px 5px rgba(0, 0, 0, 0.2);
    background-color: #41be54;
    color: white !important;
}

/* Couleur du label */
#mailRdvLabel {
    color: black;
}

/* Couleur de la checkbox lorsqu'elle est cochée */
input[type="checkbox"]:checked {
    accent-color: #41be54;
    /* Couleur de la checkbox cochée */
}

.mandat-info-popup-BEV {
    display: flex;
    gap: 10px;
    margin-top: 10px;
}

.badge-mandat-popup-BEV {
    color: white;
    font-family: "Lexend Deca", serif;
    border: none;
    padding: 10px 20px;
    text-align: center;
    text-decoration: none;
    display: inline-block;
    font-size: 14px;
    margin: 2px 1px;
    border-radius: 20px;
    transition: all 0.25s ease;
    background-color: #416cbe !important;
}

.mandat-popup {
    margin-top: 20px;
}

/* Conteneur pour centrer le bouton */
.button-container {
    display: flex;
    justify-content: center;
    align-items: center;
    width: 100%;
}

/* Style du bouton */
.team-tracking-button {
    display: inline-block;
    padding: 10px 20px;
    background-color: #41be54;
    color: white;
    border-radius: 10px;
    text-align: center;
    text-decoration: none;
    font-size: 1.2em;
    transition: background-color 0.3s ease;
}

.team-tracking-button:hover {
    background-color: #36a645;
    color: white;
}

/*===========================================================================================================
                                        --- LOGIN + SIGN IN 
============================================================================================================= */

/* Modifier le logo de l'écran de connexion */
#login h1 a {
    background-image: url("https://i.postimg.cc/zVGdxGZk/Prospecplus-2-removebg-preview-300x300.png");
    background-size: contain;
    width: 100%;
    height: 120px;
}

/* Changer le fond de l'écran de connexion et ajouter un flou */
body.login {
    font-family: "Lexend Deca", serif;
}

input.password-input {
    border: 1px solid #41be54;
    border-radius: 10px;
}

#user_email {
    border: 1px solid #41be54;
    border-radius: 10px;
}

/* Ajouter une image de fond avec un flou via le pseudo-élément ::before */
body.login::before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-image: url("https://prospecplus.fr/wp-content/themes/astra/images/mapparis.jpg");
    background-size: cover;
    background-position: center;
    z-index: -1;
    filter: blur(8px);
}

/* Styliser le formulaire de connexion */
.login form {
    background-color: #fff;
    border-radius: 20px;
    padding: 30px;
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.1);
    border: 2px solid #41be54;
}

.login form .input {
    font-size: 16px;
}

/* Couleur de l'icône œil visible */
#login .dashicons-visibility:before {
    color: #41be54;
}

/* Couleur de l'icône œil caché (quand le mot de passe est masqué) */
#login .dashicons-hidden:before {
    color: #41be54;
}

/* Changer la couleur et la taille des labels */
.login label {
    color: #333;
    font-size: 16px;
    font-weight: 600;
    font-family: "Lexend Deca", serif;
}

.wp-pwd {
    margin-bottom: 15px;
}

.wp-login-log-in {
    font-weight: bold !important;
}

.wp-login-log-in:hover {
    color: #41be54 !important;
}

.wp-login-register {
    font-weight: bold !important;
}

.wp-login-register:hover {
    color: #41be54 !important;
}

.wp-login-lost-password {
    font-weight: bold !important;
}

.wp-login-lost-password:hover {
    color: #41be54 !important;
}

input[type="checkbox"]#rememberme {
    appearance: none;
    -webkit-appearance: none;
    /* Pour Safari */
    width: 18px;
    height: 18px;
    border: 2px solid #ccc;
    border-radius: 4px;
    outline: none;
    cursor: pointer;
    transition: all 0.2s ease;
}

input[type="checkbox"]#rememberme:checked {
    background-color: #4CAF50;
    border-color: #4CAF50;
}

input[type="checkbox"]#rememberme:checked::before {
    content: "✓";
    font-size: 14px;
    color: white;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
}

/* Effet hover */
input[type="checkbox"]#rememberme:hover {
    border-color: #4CAF50;
}

/* Modifier le bouton de connexion */
.wp-core-ui .button-primary {
    background-color: #41be54;
    border-color: #41be54;
    border-width: 2px;
    color: #fff;
    border-radius: 10px;
    text-transform: uppercase;
    padding: 10px 20px;
    font-family: "Lexend Deca", serif;
}

.wp-core-ui .button-primary:focus {
    background-color: #41be54;
    border-color: #41be54;
    border-width: 2px;
    border-style: solid;
    outline: none;
    color: #fff;
}

.wp-core-ui .button-primary:hover {
    background-color: white;
    border-color: #41be54;
    border-width: 2px;
    border-style: solid;
    color: #41be54;
}


.login .button-primary {
    margin-top: 20px !important;
    width: 100%;
}

/* Modifier les liens "Mot de passe oublié" et "Retour au site" */
#nav a,
#backtoblog a {
    color: #1e73be;
    font-weight: 500;
    font-family: "Lexend Deca", serif;
}

/* Messages d'erreur et d'information */
.login .message,
.login .error {
    background-color: white;
    border: solid 2px #41be54;
    color: black;
    border-radius: 20px;
}

/* Cacher le sélecteur de langue */
#language-switcher {
    display: none;
}

/* Cacher le bouton du sélecteur de langue */
.login .language-switcher .button {
    display: none;
}

/* Cacher l'icône de traduction */
.dashicons-translation:before {
    display: none;
}

/* Cacher le message "S’inscrire sur ce site" */
body.login .message.register {
    display: none;
}

#loginform input:focus {
    outline: none;
    border: 2px solid #41be54;
    box-shadow: 0 0 5px rgba(76, 175, 80, 0.5);
}

#backtoblog a:hover {
    color: #41be54 !important;
    /* Couleur du texte au survol */
}

.login .button.wp-hide-pw:focus {
    border-color: transparent !important;
    box-shadow: none;
}

/* Supprime le focus bleu par défaut pour ce champ spécifique */
#user_login:focus {
    outline: none;
    /* Supprime le contour bleu par défaut */
    border: 2px solid #4CAF50;
    /* Ajoute une bordure verte personnalisée */
    box-shadow: 0 0 5px rgba(76, 175, 80, 0.5);
    /* Effet lumineux au focus (optionnel) */
}

/* Optionnel : Styliser également le champ au focus pour le champ email */
#user_email:focus {
    outline: none;
    border: 2px solid #4CAF50;
    box-shadow: 0 0 5px rgba(76, 175, 80, 0.5);
}


/*===========================================================================================================
                                        --- FORGOTTEN PW
============================================================================================================= */

/* Général - fond de la page avec image et flou */
body.page-reset-password {
    font-family: "Lexend Deca", serif;
    display: flex;
    justify-content: center;
    align-items: center;
    margin: 0;
}

/* Ajouter une image de fond avec flou */
body.page-reset-password::before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-image: url("https://prospecplus.fr/wp-content/themes/astra/images/mapparis.jpg");
    background-size: cover;
    background-position: center;
    z-index: -1;
    filter: blur(8px);
}

/* Conteneur du formulaire de réinitialisation */
.forgot-password-container {
    margin-top: 220px;
    margin-bottom: 300px !important;
    max-width: 400px !important;
    width: 100%;
    padding: 30px;
    background-color: #fff;
    border-radius: 20px;
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.1);
    border: 2px solid #41be54;
    position: relative;
    z-index: 1;
}

/* Modifier le logo au-dessus du formulaire */
.forgot-password-container h1 a img {
    width: 100%;
    max-height: 120px;
    object-fit: contain;
}

/* Styliser le label et l'input */
.forgot-password-container .form-label {
    color: black;
    font-size: 16px;
    font-weight: 600;
    font-family: "Lexend Deca", serif;
    margin-bottom: 10px;
    margin-top: 20px;
}

.forgot-password-container .form-input {
    width: 100%;
    padding: 10px;
    font-size: 16px;
    border: 1px solid #41be54;
    border-radius: 10px;
    margin-bottom: 20px;
    font-family: "Lexend Deca", serif;
}

/* Bouton de soumission */
.forgot-password-container .form-button {
    background-color: #41be54;
    border: none;
    color: #fff;
    padding: 10px 20px;
    font-size: 16px;
    border-radius: 10px;
    text-transform: uppercase;
    cursor: pointer;
    font-family: "Lexend Deca", serif;
    width: 100%;
    border: 2px solid #41be54;
}

.forgot-password-container .form-button:hover {
    background-color: white;
    color: #41be54;
    border: 2px solid #41be54;
}

/* Masquer le footer sur la page de réinitialisation du mot de passe */
.page-id-3229 footer {
    display: none;
}

/* Masquer le header sur la page de réinitialisation du mot de passe */
.page-id-3229 header {
    display: none;
}

/* Centrer le logo au-dessus du formulaire */
.logo-container {
    text-align: center;
    margin-bottom: 40px;
}

.logo-container img {
    max-width: 100%;
    height: auto;
}

/*===========================================================================================================
                                        --- BOUTON CONNEXION HEADER
============================================================================================================= */

/* Cibler la classe du texte Connexion */
.ast-header-account-text {
    display: inline-block;
    padding: 3px 8px;
    background-color: #41be54;
    color: #fff;
    border-radius: 5px;
    text-decoration: none;
    font-weight: bold;
    transition: background-color 0.3s ease;
    cursor: pointer;
    border: solid 2px #41be54;
}

/* Effet de survol */
.ast-header-account-text:hover {
    background-color: white;
    color: #41be54;
    border: solid 2px #41be54;
}

/* Ajuster la taille du bouton pour mobile */
@media (max-width: 768px) {
    .ast-header-account-text {
        padding: 8px 16px;
        font-size: 14px;
    }
}

/*===========================================================================================================
                                        --- BOUTON MON_COMPTE HEADER
============================================================================================================= */

/* Masquer l'icône actuelle */
.ast-header-account-wrap .ast-header-account-type-icon .ahfb-svg-iconset {
    display: none;
}

/* Ajouter du texte "Mon compte" et styliser le bouton */
.ast-header-account-wrap .ast-header-account-type-icon::after {
    content: "Mon compte";
    display: inline-block;
    padding: 3px 8px;
    background-color: #41be54;
    color: #fff;
    border-radius: 5px;
    text-decoration: none;
    font-weight: bold;
    transition: background-color 0.3s ease;
    cursor: pointer;
    border: solid 2px #41be54;
}

/* Effet au survol */
.ast-header-account-wrap .ast-header-account-type-icon:hover::after {
    background-color: #36a347;
}

/*===========================================================================================================
                                        --- CONFIRM DECONNEXION
============================================================================================================= */

/* Boîte de dialogue modale, masquée par défaut */
#custom-confirm {
    display: none;
    position: fixed;
    z-index: 9999;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.5);
}

/* Contenu de la boîte de confirmation */
.custom-confirm-content {
    background-color: #fff;
    margin: 20% auto;
    padding: 20px;
    border: 2px solid #41be54;
    border-radius: 10px;
    width: 300px;
    text-align: center;
}

/* Style des boutons */
.custom-confirm-content button {
    padding: 10px 20px;
    margin: 10px;
    border: none;
    border-radius: 5px;
    cursor: pointer;
    font-weight: bold;
}

#confirm-logout {
    background-color: #41be54;
    color: white;
}

#cancel-logout {
    background-color: #ccc;
    color: black;
}

#confirm-logout:hover {
    background-color: #36a347;
}

#cancel-logout:hover {
    background-color: #999;
}

/*===========================================================================================================
                                        --- CREATION PW
============================================================================================================= */

.container-pw-creation {
    font-family: "Lexend Deca", serif;
    display: flex;
    flex-direction: column;
    /* Empile le logo au-dessus du formulaire */
    justify-content: center;
    /* Centre verticalement */
    align-items: center;
    /* Centre horizontalement */
    height: 100vh;
    margin: 0;
    position: relative;
    z-index: 0;
}

.container-pw-creation::before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-image: url("https://prospecplus.fr/wp-content/themes/astra/images/mapparis.jpg");
    background-size: cover;
    background-position: center;
    filter: blur(8px);
    z-index: -1;
}

/* Conteneur du formulaire de réinitialisation */
.password-reset-container {
    max-width: 400px !important;
    width: 100%;
    padding: 30px;
    background-color: #fff;
    border-radius: 20px;
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.1);
    border: 2px solid #41be54;
    position: relative;
    z-index: 1;
}

/* Logo au-dessus du formulaire */
.logo-container {
    text-align: center;
    margin-bottom: 20px;
    /* Espacement entre le logo et le formulaire */
    z-index: 1;
}

.logo-container img {
    max-width: 150px;
    /* Taille du logo */
    height: auto;
}

/* Styliser le label et l'input */
.password-reset-container .form-label {
    color: black;
    font-size: 16px;
    font-weight: 600;
    margin-bottom: 10px;
}

.password-reset-container .form-input {
    width: 100%;
    padding: 10px;
    font-size: 16px;
    border: 1px solid #41be54;
    border-radius: 10px;
    margin-bottom: 20px;
}

/* Bouton de soumission */
.password-reset-container .form-button {
    background-color: #41be54;
    border: none;
    color: #fff;
    padding: 10px 20px;
    font-size: 16px;
    border-radius: 10px;
    text-transform: uppercase;
    cursor: pointer;
    width: 100%;
    border: 2px solid #41be54;
}

.password-reset-container .form-button:hover {
    background-color: white;
    color: #41be54;
    border: 2px solid #41be54;
}

/* Masquer le footer et le header */
.page-password-reset footer,
.page-password-reset header {
    display: none;
}

/* Masquer le footer sur la page de réinitialisation du mot de passe */
.page-id-3225 footer {
    display: none;
}

/* Masquer le header sur la page de réinitialisation du mot de passe */
.page-id-3225 header {
    display: none;
}

/* Style générique pour tous les messages d'erreur ayant un ID commençant par 'pw-error' */
div[id^="pw-error"] {
    background-color: #f8d7da;
    color: #721c24;
    border: 2px solid #ad0c1c;
    padding: 15px;
    margin: 15px 0;
    border-radius: 5px;
    font-size: 16px;
    font-family: Arial, sans-serif;
}

/* Texte en gras dans les messages d'erreur */
div[id^="pw-error"] strong {
    font-weight: bold;
}

/* Aligner le texte au centre, si souhaité */
div[id^="pw-error"] {
    text-align: center;
}

/* Ajouter une petite animation d'apparition (facultatif) */
div[id^="pw-error"] {
    animation: fadeIn 0.5s ease-in-out;
}

@keyframes fadeIn {
    from {
        opacity: 0;
    }

    to {
        opacity: 1;
    }
}

/* Style générique pour tous les messages d'erreur ayant un ID commençant par 'pw-success' */
div[id^="pw-success"] {
    background-color: #d4edda;
    color: #155724;
    border: 2px solid #0c7c3a;
    padding: 15px;
    margin: 15px 0;
    border-radius: 5px;
    font-size: 16px;
    font-family: Arial, sans-serif;
}

#success-reset {
    background-color: #d4edda;
    color: #155724;
    border: 2px solid #0c7c3a;
    padding: 15px;
    margin: 15px 0;
    border-radius: 5px;
    font-size: 16px;
    font-family: Arial, sans-serif;
}

/* Texte en gras dans les messages d'erreur */
div[id^="pw-success"] strong {
    font-weight: bold;
}

/* Aligner le texte au centre, si souhaité */
div[id^="pw-success"] {
    text-align: center;
}

/* Ajouter une petite animation d'apparition (facultatif) */
div[id^="pw-success"] {
    animation: fadeIn 0.5s ease-in-out;
}

@keyframes fadeIn {
    from {
        opacity: 0;
    }

    to {
        opacity: 1;
    }
}

/*===========================================================================================================
                                        --- SUIVI EQUIPE
============================================================================================================= */

.equipe-suivi-equipe {
    width: 90%;
    background-color: #fff;
    margin: 12.5rem auto 0 auto;
    padding: 20px;
    box-shadow: 0px 4px 6px rgba(0, 0, 0, 0.1);
    position: relative;
    border: solid 2px #41be54;
    border-radius: 20px;
    margin-bottom: 20px;
}

.equipe-navbar {
    background-color: #f4f4f4;
    padding: 10px 20px;
    border: 2px solid #41be54;
    border-radius: 15px 15px 15px 15px;
}

.equipe-nav-list {
    list-style: none;
    display: flex;
    justify-content: center;
    margin: 0;
    padding: 0;
}

.equipe-nav-item {
    margin-right: 30px;
}

.equipe-nav-link {
    text-decoration: none;
    color: #333;
    font-size: 1.4rem;
    font-family: "Lexend Deca", serif;
    transition: all 0.3s ease;
}

.equipe-nav-link:hover {
    color: #41be54;
}

/* Style pour l'onglet actif */
.equipe-nav-link.active {
    color: #41be54;
    font-size: 1.6rem;
}

.equipe-content {
    margin-top: 20px;
    padding: 10px;
    background-color: #fff;
}

/* Style pour les boutons des membres */
.equipe-members {
    display: flex;
    justify-content: center;
    margin-top: 20px;
}

.equipe-member-btn {
    background-color: #f4f4f4;
    color: white;
    padding: 10px 20px;
    font-size: 0.9rem;
    margin-right: 10px;
    cursor: pointer;
    border-radius: 10px;
    font-family: "Lexend Deca", serif;
    transition: background-color 0.3s, color 0.3s;
}

.equipe-member-btn.selected {
    color: white;
    box-shadow: 10px 10px 10px rgba(65, 190, 84, 0.8);
    text-decoration: underline;
    text-decoration-color: #41be54;
    text-underline-offset: 4px;
    text-decoration-thickness: 3px;
}

.equipe-member-btn:focus {
    color: white;
}

.equipe-member-btn:hover {
    background-color: #41be54;
    color: white;
}

.equipe-member-btn:last-child {
    margin-right: 0;
}

#map-container-equipe {
    position: relative;
    margin-top: 20px;
}

.tab-content {
    display: none;
    margin-top: 20px;
}

#map-equipe {
    height: 700px !important;
    border-radius: 20px;
    overflow: hidden;
    margin: 0 auto;
    border: 2px solid #41be54;
}

#map-biens {
    height: 700px !important;
    border-radius: 20px;
    overflow: hidden;
    margin: 0 auto;
    border: 2px solid #41be54;
    margin-top: 20px;
}

.custom-popup-équipe {
    border-radius: 8px;
    padding: 10px;
    font-size: 14px;
    color: #333;
    border: 3px solid #ccc;
    /* Bordure par défaut, sera remplacée par la couleur dynamique */
    background-color: #f9f9f9;
    /* Couleur de fond */
    box-shadow: 0px 4px 8px rgba(0, 0, 0, 0.1);
}

#team-table-bev {
    margin-top: 20px;
}

.menu-item-3235 .custom-menu-manager {
    height: 30px !important;
}

/* Styles spécifiques au bouton "Mon équipe" */
#menu-item-3235 a {
    all: unset;
    display: inline-block !important;
    padding: 3px 8px !important;
    background-color: #41be54 !important;
    color: #fff !important;
    border-radius: 5px !important;
    font-weight: bold !important;
    transition: background-color 0.3s ease !important;
    cursor: pointer !important;
    border: solid 2px #41be54 !important;
    line-height: 27px;
    font-family: "Karla", sans-serif;
    font-size: 1rem;
    line-height: 1.6em;
}

#menu-item-3235 a:hover {
    background-color: #36a94a !important;
}

.city-button {
    background-color: white;
    color: #41be54;
    padding: 10px 20px;
    font-size: 0.9rem;
    margin-right: 10px;
    cursor: pointer;
    border-radius: 10px;
    font-family: "Lexend Deca", serif;
    transition: background-color 0.3s, color 0.3s;
    border: 2px solid #41be54;
}

.city-button:hover {
    background-color: #41be54;
    color: white;
    border: 2px solid white;
}

.city-button:focus {
    background-color: #f4f4f4;
    color: #41be54;
}

/* Styles pour les graphiques */
.charts-container {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
    gap: 20px;
    margin-top: 40px;
}

.chart-wrapper {
    display: flex;
    flex-direction: column;
    align-items: center;
    background: #f4f4f4;
    padding: 20px;
    border-radius: 10px;
}

.chart-content {
    display: flex;
    justify-content: center;
    align-items: center;
    height: 300px;
    /* Réduit la hauteur */
    width: 100%;
}

.chart-title {
    font-size: 24px;
    font-weight: bold;
    color: #333;
    margin-bottom: 20px;
    text-align: center;
    width: 100%;
    font-family: "Lexend Deca", serif;
}

.chart-title .highlight {
    color: #41be54;
}

.chart-wrapper canvas {
    max-width: 90%;
    /* Réduit la taille maximale du canevas */
    height: 300px;
    /* Réduit la hauteur du canevas */
    display: block;
}

/* Styles pour le menu contextuel */
.context-menu {
    position: absolute;
    background-color: white;
    border: 1px solid #ddd;
    box-shadow: 0px 0px 5px rgba(0, 0, 0, 0.2);
    padding: 10px;
    z-index: 10;
    border-radius: 4px;
}

.map-button {
    padding: 5px 10px;
    background-color: #41be54;
    color: white;
    border: none;
    border-radius: 3px;
    cursor: pointer;
}

.map-button:hover {
    background-color: #34a14a;
}

.status-menu {
    background: white;
    border: 1px solid #ddd;
    padding: 8px;
    border-radius: 10px;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
    z-index: 1000;
}

.status-menu div {
    padding: 8px 12px;
    cursor: pointer;
    border-radius: 6px;
    transition: background-color 0.2s ease-in-out, transform 0.1s ease-in-out;
}

.status-menu div:hover {
    background-color: #e6f7ff;
    transform: scale(1.02);
}

.tabulator-cell {
    display: flex;
    align-items: center;
    justify-content: center;
}

/* Applique uniquement aux lignes du tableau avec la classe .custom-tabulator */
.tabulator-bev-manager .tabulator-row {
    border-bottom: 2px solid white;
    height: 40px;
}

#Tableau-mandats {
    min-height: 189px;
}


.tabulator-bev-manager .tabulator-cell {
    height: 100%;
    display: flex;
    align-items: center;
    padding: 0;
    border-right: 2px solid #ddd;
}

.bounce {
    animation: bounce 0.6s infinite alternate;
}

@keyframes bounce {
    0% {
        transform: translateY(0);
    }

    100% {
        transform: translateY(-10px);
    }
}

.color-choice {
    width: 30px;
    height: 30px;
    border: 2px solid #ccc;
    border-radius: 50%;
    cursor: pointer;
    margin: 5px;
    padding: 0;
}

.color-choice.selected {
    border: 2px solid #30941e;
}

.button-delete-marker {
    padding: 0;
    margin-top: 10px;
}

.delete-btn {
    position: absolute;
    top: 10px;
    right: 10px;
    background-color: white;
    color: red;
    border: none;
    padding: 5px;
    width: 30px;
    height: 30px;
    border-radius: 50%;
    font-size: 16px;
    /* Taille de l'icône */
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    box-shadow: 0px 2px 5px rgba(0, 0, 0, 0.2);
    transition: transform 0.25s ease, background-color 0.25s ease;
}

.delete-btn:hover {
    background-color: #ffcccc;
    transform: scale(1.1);
    color: red;
}

.delete-btn:focus {
    background-color: #ffcccc;
    transform: scale(1.1);
    color: red;
}

.delete-btn i {
    line-height: 1;
    /* Supprime tout décalage lié au texte de l'icône */
}

.avertissement-mauvais-compte-box {
    background: rgba(255, 255, 255, 0.5);
    -webkit-backdrop-filter: blur(10px);
    backdrop-filter: blur(10px);
    border: 2px solid #41be54;
    padding: 30px;
    border-radius: 20px;
    box-shadow: 20px 20px 20px rgba(0, 0, 0, 0.1);
    max-width: 40%;
    margin: 20% auto 0;
    height: auto;
    margin-bottom: 300px;

    @media (max-width: 885px) {
        max-width: 100%;
    }
}

.close {
    color: #aaa;
    float: right;
    font-size: 28px;
    font-weight: bold;
}

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

.swal2-confirm {
    background-color: #41be54 !important;
}

.swal2-popup {
    border-radius: 20px;
    border: 2px solid #41be54;
}

.archive-swal-popup {
    top: 10% !important;
    max-height: 80vh;
    overflow-y: auto;
    padding: 20px;
    animation: fadeInFromTop 0.5s ease-out !important;
}

.archive-swal-popup.closing {
    animation: fadeOutToTop 0.5s ease-out !important;
}

.delete-event-popup {
    max-width: 900px;
    width: 90%;
}

/* Animation d'ouverture */
.delete-event-popup.swal2-show {
    animation: fadeInFromTop 0.5s ease-out;
}

/* Animation de fermeture */
.delete-event-popup.swal2-hide {
    animation: fadeOutToTop 0.5s ease-out;
}

@keyframes fadeOutToTop {
    0% {
        opacity: 1;
        transform: translateY(0);
    }

    100% {
        opacity: 0;
        transform: translateY(-50px);
    }
}

@keyframes fadeInFromTop {
    0% {
        opacity: 0;
        transform: translateY(-50px);
    }

    100% {
        opacity: 1;
        transform: translateY(0);
    }
}

@media (max-width: 768px) {
    .sweet-alert-content>div {
        flex-direction: column;
        gap: 10px;
    }
}


.delete-event-button {
    background-color: #dc3545 !important;
    color: white !important;
    border: none;
    border-radius: 5px;
    padding: 10px 20px;
    font-size: 1rem;
    cursor: pointer;
}

.delete-event-button:hover {
    background-color: darkred !important;
}

.titre-modale-swal {
    font-size: 1.5rem;
    margin-bottom: 20px;
    color: black;
}

.toggle-button {
    padding: 10px 20px;
    background-color: #f44336;
    color: white;
    border: 2px solid #ddd;
    border-radius: 10px;
    cursor: pointer;
    font-size: 1rem;
    font-weight: bold;
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
    min-width: 140px;
    height: 42px;
    transition: background-color 0.3s ease, border 0.3s ease;
    height: 44px;
    width: 145px;
}

.toggle-button.active {
    background-color: #41be54;
}

.toggle-button:hover {
    color: white;
}

.toggle-button:focus {
    color: white;
}

.btn-dissocier-mail {
    padding: 10px 20px;
    background-color: #f44336;
    color: white;
    border: 2px solid #ddd;
    border-radius: 10px;
    cursor: pointer;
    font-size: 1rem;
    font-weight: bold;
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
    min-width: 140px;
    height: 42px;
    transition: background-color 0.3s ease, border 0.3s ease;
    height: 44px;
    margin-top: 20px;
}

.btn-dissocier-mail:hover {
    color: white;
}

.btn-dissocier-mail:focus {
    color: white;
}

.sync-button {
    padding: 10px 20px;
    background-color: #416cbe;
    color: white;
    border: 2px solid #ddd;
    border-radius: 10px;
    cursor: pointer;
    font-size: 1rem;
    font-weight: bold;
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
    min-width: 140px;
    height: 42px;
    transition: background-color 0.3s ease, border 0.3s ease;
    height: 44px;
    width: 154px;
}

.sync-button.active {
    background-color: #41be54;
}

.sync-button:hover {
    color: white;
    transform: scale(1.05);
}

.sync-button:focus {
    color: white;
}

.sync-button i {
    margin-right: 8px;
    font-size: 1.2rem;
    vertical-align: middle;
}

/* Container pour le bouton principal et le menu contextuel */
.button-container-compte {
    position: relative;
    display: inline-block;
}

.section-dissociation-modal {
    background-color: #e8f5e9;
    border-radius: 10px;
    padding: 20px;
    margin-bottom: 20px;
    margin-top: 20px;
    position: relative;
}

.invite-section-modal {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    text-align: center;
}

#invite-form {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    width: 100%;
    margin-top: 20px;
    margin-bottom: 10px;
}

.custom-email-invitation {
    width: 80%;
    padding: 10px;
    margin-bottom: 10px;
    background-color: white;
    text-align: center;
}

.accept-invitation {
    background-color: green;
    color: white;
    padding: 10px 20px;
    border: none;
    cursor: pointer;
    margin-top: 10px;
    width: 80%;
    text-align: center;
}

.custom-swal-popup {
    margin-top: 15px !important;
}

/* Agrandir la ligne au survol */
.tabulator-row:hover {
    height: auto !important;
    z-index: 10;
    /* S'assurer que la ligne reste au-dessus des autres */
}

/* Empêcher le contenu d'être tronqué */
.owner-info-column {
    overflow: visible !important;
    white-space: normal !important;
    position: relative;
}


/* Contenu du tooltip */
.owner-info-content {
    bottom: 100%;
    left: 50%;

}

/* Affichage au survol */
.owner-info-wrapper:hover .owner-info-content {
    display: block;
    background: white;
    border-radius: 5px;
    box-shadow: 0px 4px 6px rgba(0, 0, 0, 0.2);
}

/* Rendre le contenu visible quand on hover une ligne entière */
.tabulator-row:hover .owner-info-content {
    display: block;
    background: white;
    z-index: 100;
    border-radius: 5px;
    box-shadow: 0px 4px 6px rgba(0, 0, 0, 0.2);
}

/* Masque les boîtes vides */
.owner-info-content:empty {
    display: none !important;
}

/* Styles pour le conteneur principal */
.custom-popup-parcelle-container {
    background-color: #ffffff;
    border-radius: 8px;
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
    padding: 16px;
    font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, sans-serif;
}

/* Style pour le titre */
.custom-popup-parcelle-container h4 {
    margin: 0 0 16px 0;
    color: #333;
    font-size: 16px;
    font-weight: 600;
}

/* Conteneur de chaque ligne */
.custom-popup-parcelle-container>div {
    margin-bottom: 14px;
    display: flex;
    align-items: center;
    justify-content: space-between;
}

/* Style des labels */
.custom-popup-parcelle-container label {
    flex: 1;
    font-size: 14px;
    color: #555;
    margin-right: 10px;
}

/* Style des color pickers */
.custom-popup-parcelle-container input[type="color"] {
    -webkit-appearance: none;
    width: 36px;
    height: 36px;
    border: none;
    border-radius: 4px;
    background: none;
    cursor: pointer;
    padding: 0;
}

.custom-popup-parcelle-container input[type="color"]::-webkit-color-swatch-wrapper {
    padding: 0;
    border-radius: 4px;
    border: 1px solid #ddd;
}

.custom-popup-parcelle-container input[type="color"]::-webkit-color-swatch {
    border: none;
    border-radius: 3px;
}

.custom-popup-parcelle-container input[type="color"]::-moz-color-swatch {
    border: none;
    border-radius: 3px;
}

/* Style des sliders */
.custom-popup-parcelle-container input[type="range"] {
    -webkit-appearance: none;
    height: 4px;
    border-radius: 2px;
    background: #e0e0e0;
    outline: none;
    flex: 0 0 140px;
    margin-left: auto;
}

.custom-popup-parcelle-container input[type="range"]::-webkit-slider-thumb {
    -webkit-appearance: none;
    width: 16px;
    height: 16px;
    border-radius: 50%;
    background: #4CAF50;
    cursor: pointer;
    border: none;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.2);
    transition: background 0.2s;
}

.custom-popup-parcelle-container input[type="range"]::-moz-range-thumb {
    width: 16px;
    height: 16px;
    border-radius: 50%;
    background: #4CAF50;
    cursor: pointer;
    border: none;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.2);
    transition: background 0.2s;
}

.custom-popup-parcelle-container input[type="range"]::-webkit-slider-thumb:hover {
    background: #45a049;
}

.custom-popup-parcelle-container input[type="range"]::-moz-range-thumb:hover {
    background: #45a049;
}

/* Style du bouton */
.custom-popup-parcelle-container button {
    background-color: #4CAF50;
    color: white;
    padding: 10px 16px;
    border: none;
    border-radius: 4px;
    cursor: pointer;
    font-size: 14px;
    font-weight: 500;
    transition: background-color 0.2s;
    margin-top: 6px;
    width: 100%;
}

.custom-popup-parcelle-container button:hover {
    background-color: #45a049;
}

.custom-popup-parcelle-container button:active {
    background-color: #3d8b40;
}

.modale-prospec-container {
    display: none;
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.5);
    z-index: 999;
    transition: opacity 0.3s ease-in-out;
}

.modale-prospec-container.active {
    display: block;
    opacity: 1;
}

.modale-prospec-content {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    background: white;
    padding: 25px;
    border-radius: 8px;
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
    width: 90%;
    max-width: 500px;
}

.modale-prospec-title {
    text-align: center;
    margin-bottom: 20px;
    font-size: 1.5em;
    color: #333;
}

.modale-prospec-form-row {
    display: flex;
    align-items: center;
    gap: 15px;
    margin-bottom: 20px;
}

.modale-prospec-form-group {
    flex: 1;
}

.modale-prospec-form-group label {
    display: block;
    margin-bottom: 5px;
    color: #666;
}

.modale-prospec-form-group select,
.modale-prospec-form-group input {
    width: 100%;
    padding: 8px;
    border: 1px solid #ddd;
    border-radius: 4px;
}

.modale-prospec-btn-container {
    display: flex;
    justify-content: center;
    gap: 15px;
    margin-top: 20px;
}

.contact-modal {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.5);
    display: flex;
    justify-content: center;
    align-items: center;
    z-index: 1000;
}

.modal-content {
    background: white;
    padding: 20px;
    border-radius: 8px;
    width: 90%;
    max-width: 500px;
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
}

.modal-content h3 {
    margin-top: 0;
    margin-bottom: 20px;
    color: #333;
    font-size: 1.5em;
}

.form-group {
    margin-bottom: 15px;
}

.form-group label {
    display: block;
    margin-bottom: 5px;
    font-weight: bold;
    color: #444;
}

.form-group select,
.form-group textarea {
    width: 100%;
    padding: 8px;
    border: 1px solid #ddd;
    border-radius: 4px;
    font-size: 14px;
}

.form-group textarea {
    height: 100px;
    resize: vertical;
}

.form-buttons {
    display: flex;
    gap: 10px;
    justify-content: flex-end;
    margin-top: 20px;
}

.form-buttons button {
    padding: 8px 16px;
    border: none;
    border-radius: 4px;
    cursor: pointer;
    font-weight: 500;
    transition: background-color 0.2s;
}

.form-buttons button[type="submit"] {
    background: #2563eb;
    color: white;
}

.form-buttons button[type="submit"]:hover {
    background: #1d4ed8;
}

.form-buttons button[type="button"] {
    background: #e5e7eb;
    color: #374151;
}

.form-buttons button[type="button"]:hover {
    background: #d1d5db;
}

.contact-btn {
    background: #2563eb;
    color: white;
    padding: 8px 16px;
    border: none;
    border-radius: 4px;
    cursor: pointer;
    width: 100%;
    transition: background-color 0.2s;
}

.contact-btn:hover {
    background: #1d4ed8;
}

.selected-line-table-copro {
    background-color: rgb(86, 131, 199) !important;
}

.info-prospection {
    padding: 20px;
    margin-bottom: 20px;
    background: #E8F5E9;
    border-radius: 8px;
}

.stats-container {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    gap: 20px;
    margin-bottom: 20px;
}

.stat-card {
    background: white;
    padding: 15px;
    border-radius: 6px;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
}

.stat-value {
    font-size: 24px;
    font-weight: bold;
    color: #2563eb;
    margin: 5px 0;
}

.stat-label {
    color: #6b7280;
    font-size: 14px;
}

.filter-buttons {
    display: flex;
    gap: 10px;
    flex-wrap: wrap;
    margin-bottom: 20px;
}

.filter-btn {
    padding: 8px 16px;
    border: none;
    border-radius: 4px;
    background: white;
    border: 1px solid #e5e7eb;
    cursor: pointer;
    transition: all 0.2s;
    color: #373643;
}

.filter-btn:hover {
    background: #2563eb;
    color: white;
}

.filter-btn.active {
    background: #2563eb;
    color: white;
}

.contact-status {
    display: flex;
    gap: 15px;
    margin-bottom: 20px;
}

.status-indicator {
    display: flex;
    align-items: center;
    gap: 5px;
}

.status-dot {
    width: 10px;
    height: 10px;
    border-radius: 50%;
}


/*===========================================================================================================
                                        --- PAGE TARIFS
============================================================================================================= */


/* Conteneur principal centré */
.tarif-container {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    align-items: start;
    gap: 30px;
    padding: 201px 40px 40px;
    max-width: 1200px;
    margin: 0 auto;
}

/* Style des colonnes */
.tarif-offre {
    background: #fff;
    border-radius: 15px;
    box-shadow: 0 8px 16px rgba(0, 0, 0, 0.1);
    padding: 30px;
    flex: 1 1 calc(33.333% - 60px);
    text-align: center;
    transition: transform 0.3s ease, box-shadow 0.3s ease;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
}

.tarif-offre:hover {
    transform: translateY(-10px);
    box-shadow: 0 12px 24px rgba(0, 0, 0, 0.2);
}

/* Titre de l'offre */
.tarif-titre {
    font-size: 28px;
    font-weight: bold;
    margin-bottom: 20px;
    color: #333;
}

/* Prix */
.tarif-prix {
    font-size: 42px;
    font-weight: bold;
    color: #41be54;
    margin-bottom: 25px;
}

.tarif-prix-free {
    font-size: 32px;
    font-weight: bold;
    color: #41be54;
    margin-bottom: 25px;
}

.tarif-prix span {
    font-size: 24px;
    color: #666;
}

/* Liste des features */
.tarif-features {
    list-style: none;
    padding: 0;
    margin-bottom: 30px;
    text-align: left;
}

.tarif-features li {
    padding: 12px 0;
    border-bottom: 1px solid #eee;
    color: #666;
    display: flex;
    align-items: center;
    gap: 10px;
    margin-left: -40px;
}

.tarif-features li:last-child {
    border-bottom: none;
}

.tarif-features li i {
    color: #41be54;
    font-size: 18px;
    vertical-align: middle;
    width: 20px;
    text-align: center;
}

/* Bouton */
.tarif-bouton {
    background: #2E8B57;
    color: #fff;
    padding: 15px 30px;
    border: none;
    border-radius: 8px;
    cursor: pointer;
    font-size: 18px;
    transition: background 0.3s ease, transform 0.3s ease;
    width: 100%;
    margin-top: 20px;
    margin-bottom: 20px;
}

.tarif-bouton:hover {
    background: #41be54;
    transform: translateY(-2px);
    color: white;
}

/* Responsive */
@media (max-width: 1024px) {
    .tarif-offre {
        flex: 1 1 calc(50% - 40px);
        max-width: calc(50% - 40px);
    }
}

@media (max-width: 768px) {
    .tarif-offre {
        flex: 1 1 100%;
        max-width: 100%;
    }
}