/* latin-ext */
@font-face {
    font-family: 'Zen Dots';
    font-style: normal;
    font-weight: 400;
    font-display: swap;
    src: url(../../PLUGINS/google-fonts/ZenDots/XRXX3ICfm00IGoesQdaNRs71cA.woff2) format('woff2');
    unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

/* latin */
@font-face {
    font-family: 'Zen Dots';
    font-style: normal;
    font-weight: 400;
    font-display: swap;
    src: url(../../PLUGINS/google-fonts/ZenDots/XRXX3ICfm00IGoesQdaDRs4.woff2) format('woff2');
    unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

@import url(//fonts.googleapis.com/css?family=Source+Sans+Pro:300,400,600,700,300italic,400italic,600italic);
@import url(//fonts.googleapis.com/css2?family=Source+Code+Pro:ital,wght@0,300;0,400;0,600;0,700;1,300;1,400;1,600;1,700&display=swap);


/* ==================
 * BASE STYLES
 * ================== */

/* Custom Properties */
:root {
    --header-height: 4rem;
    --footer-height: 1rem;
    --main-bar-height: 3rem;
    --main-section-height: 100vh;
    --main-section-login-height: 100vh;

    --font-title: 'Zen Dots', Verdana, sans-serif;
    --font-sec: 'Inter', Verdana, Geneva, Tahoma, sans-serif;
    --font-main: 'Source Code Pro', monospace;

    --primary-color: #012A53;
    --secondary-color: #3c8dbc;
    --tertiary-color: #1d4972;

    --accent-color: #60a8d2;

    --accent-color-hover: #4779A0;
    --accent-color-focus: #72afd2;
    --accent-color-select: #89ADCB;
    --accent-color-select-table: #89adcb7c;
    --accent-color-hover-table: #4779a071;
    --accent-color-clear: #f0f8ff;

    /* Noir variations basées sur --primary-color */

    --darker-1: #002142;
    --darker-2: #001a34;
    --dark-color-1: #0A1A2A;
    --dark-color-2: #1A2A3A;
    --dark-color-3: #2A3A4A;
    --dark-color-4: #3a4a5a;
    --dark-color-5: #4a5f78cc;

    --error-color: #dc3545;

    --rc-color-red: #c00;
    --rc-color-red-dark: #940000;
    --rc-color-red-accent: #c38282;
    --rc-color-red-dark-accent: #483232;

    --warning-color: #f0ad4e;

    --rc-color-orange: #d47f00;
    --rc-color-orange-dark: #8e6020;
    --rc-color-orange-accent: #c5b08f;
    --rc-color-orange-dark-accent: #544839;

    --rc-color-green: #28a745;
    --rc-color-green-dark: #1e7e34;
    --rc-color-green-accent: #aec594;
    --rc-color-green-dark-accent: #526652;

    --rc-color-blue: #1976d2;
    --rc-color-blue-dark: #0f457c;

    --bk-color-th-0: #071b32;
    --color-th-1: #282850;
    --bk-color-th-1: #1c971c;
    --color-th-2: #282850;
    --bk-color-th-2: #c1c117;
    --color-th-3: #bbe6fa;
    --color-th-4: #fff;
    --bk-color-th-4: #8f1f1f;
    --color-th-5: #fff;
    --bk-color-th-5: #001A35;

    /* Palette pour les panels */
    --panel-bg: #f7f9fb;
    --panel-bg-alt: #e9eef6;
    --panel-border: 1px solid #d3dbe6;
    --panel-shadow: 0 2px 8px rgba(0, 0, 0, 0.07);
    --panel-title-color: #1d4972;
    --panel-title-bg: #e9eef6;
    --panel-header-bg: #e9eef6;
    --panel-footer-bg: #f0f4fa;
    --panel-hover-bg: #f0f8ff;
    --panel-active-bg: #dbeaf7;
}

body {
    padding: 0;
    margin: 0;
}

html,
body {
    background: #fff;
    padding: 0;
    margin: 0;
    font-family: var(--font-main);
    height: 100vh;
    font-size: 1rem;
    overflow: hidden;
    font-weight: 400;
}

body * {
    user-select: none;
}

/*********** INDEX.HTML ***********/
.index-bg {
    background: transparent;
    /* background: url('/assets/IMAGES/GUI/BACKGROUNDS/bg-index.png') fixed;
    background-size: cover; */
}


/* H1 - H6 font */
h1,
h2,
h3,
h4,
h5,
h6 {
    font-family: var(--font-title);
    text-align: center;
}

/* General Links */
a {
    color: var(--accent-color-focus);
}

a:hover,
a:active,
a:focus {
    outline: none;
    /* text-decoration: none; */
    color: var(--accent-color-focus);
}

a:visited {
    color: inherit;
}

img {
    box-shadow: none;
    border: none;
    outline: none;
    background: none;
}

img:focus,
img:active {
    outline: none;
    box-shadow: none;
}

button,
input,
select,
textarea {
    box-shadow: none;
    border: none;
    outline: none;
    font-family: var(--font-main);
}

button {
    background: transparent;
}

#bar1 {
    transition: width 0.5s cubic-bezier(0.4, 0, 0.2, 1);
}

/******************************************************************************************************************************/
/*                                                                                                                            */
/*                                                              From AdminLTE                                                 */
/*                                                                                                                            */
/******************************************************************************************************************************/

.box-header>.fa,
.box-header>.glyphicon,
.box-header>.ion,
.box-header .box-title {
    display: inline-block;
    font-size: 18px;
    margin: 0;
    line-height: 1;
}

.box-header>.fa,
.box-header>.glyphicon,
.box-header>.ion {
    margin-right: 5px;
}

/* Content */
.content {
    min-height: 250px;
    padding: 15px;
    margin-right: auto;
    margin-left: auto;
    padding-left: 15px;
    padding-right: 15px;
    /* height:100%; */
}

.content-header>h1 {
    text-align: right;
    margin: 0px 300px 0px 0px;
    font-size: 24px;
}

.content-header>div>h1 {
    line-height: 15px;
}

.content-header h1>small {
    font-size: 15px;
    display: inline-block;
    padding-left: 4px;
    font-weight: 300;
}

/* NAV TABS */
.nav-tabs-custom {
    margin-bottom: 20px;
    background: #fff;
    box-shadow: 0 1px 1px rgba(0, 0, 0, 0.1);
    border-radius: 3px;
}

.nav-tabs-custom>.nav-tabs {
    margin: 0;
    border-bottom-color: #f4f4f4;
    border-top-right-radius: 3px;
    border-top-left-radius: 3px;
}

.nav-tabs-custom>.nav-tabs>li {
    border-top: 3px solid transparent;
    margin-bottom: -2px;
    margin-right: 5px;
}

.nav-tabs-custom>.nav-tabs>li>a {
    border-radius: 0 !important;
}

.nav-tabs-custom>.nav-tabs>li>a,
.nav-tabs-custom>.nav-tabs>li>a:hover {
    background: transparent;
    /* margin: 0; */
}

.nav-tabs-custom>.nav-tabs>li:not(.active)>a:hover,
.nav-tabs-custom>.nav-tabs>li:not(.active)>a:focus,
.nav-tabs-custom>.nav-tabs>li:not(.active)>a:active {
    border-color: transparent;
}

.nav-tabs-custom>.nav-tabs>li.active {
    border-top-color: var(--accent-color-select);
}

.nav-tabs-custom>.nav-tabs>li.active>a,
.nav-tabs-custom>.nav-tabs>li.active:hover>a {
    background-color: #fff;
}

.nav-tabs-custom>.nav-tabs>li.active>a {
    border-top: 0;
    border-left-color: #f4f4f4;
    border-right-color: #f4f4f4;
}

.nav-tabs-custom>.nav-tabs>li:first-of-type {
    margin-left: 0;
}

.nav-tabs-custom>.nav-tabs>li:first-of-type.active>a {
    border-left-width: 0;
}

.nav-tabs-custom>.nav-tabs.pull-right {
    float: none !important;
}

.nav-tabs-custom>.nav-tabs.pull-right>li {
    float: right;
}

.nav-tabs-custom>.nav-tabs.pull-right>li:first-of-type {
    margin-right: 0;
}

.nav-tabs-custom>.nav-tabs.pull-right>li:first-of-type.active>a {
    border-left-width: 1px;
    border-right-width: 0;
}

.nav-tabs-custom>.nav-tabs>li.header {
    line-height: 35px;
    padding: 0 10px;
    font-size: 20px;
    color: #444;
}

.nav-tabs-custom>.nav-tabs>li.header>.fa,
.nav-tabs-custom>.nav-tabs>li.header>.glyphicon,
.nav-tabs-custom>.nav-tabs>li.header>.ion {
    margin-right: 5px;
}

.nav-tabs-custom>.tab-content {
    background: #fff;
    padding: 10px;
    border-bottom-right-radius: 3px;
    border-bottom-left-radius: 3px;
}

/******************************************************************************************************************************/
/*                                                                                                                            */
/*                                                              USEFULL                                                        */
/*                                                                                                                            */
/******************************************************************************************************************************/
.progress {
    position: fixed;
    left: 0px;
    top: 0px;
    right: 0px;
    bottom: 0px;
    z-index: 100000;
    background-image: url('/assets/IMAGES/GUI/BACKGROUNDS/bg-USER.png');
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;
}

.bar {
    background: linear-gradient(90deg,
            var(--secondary-color) 0%,
            var(--accent-color) 50%,
            var(--secondary-color) 100%);
    background-size: 200% 100%;
    width: 0%;
    height: 5px;
    border-radius: 3px;
    position: relative;
    overflow: hidden;
    box-shadow: 0 0 3px rgba(60, 141, 188, 0.4);
    transition: box-shadow 0.3s ease;
}

.bar.loading {
    animation: gradient-flow 3s linear infinite, glow 2s ease-in-out infinite alternate;
}

.bar::before {
    content: '';
    position: absolute;
    top: 0;
    left: -100%;
    width: 50%;
    height: 100%;
    background: linear-gradient(90deg,
            transparent,
            rgba(255, 255, 255, 0.6),
            transparent);
    border-radius: 3px;
}

.bar.loading::before {
    animation: shimmer 2.5s infinite;
}

@keyframes gradient-flow {
    0% {
        background-position: 200% 0;
    }

    100% {
        background-position: -200% 0;
    }
}

@keyframes shimmer {
    0% {
        left: -100%;
    }

    100% {
        left: 100%;
    }
}

@keyframes glow {
    0% {
        box-shadow: 0 0 3px rgba(60, 141, 188, 0.4);
    }

    100% {
        box-shadow: 0 0 8px rgba(60, 141, 188, 0.7);
    }
}

.percent {
    position: absolute;
    display: inline-block;
    top: 3px;
    left: 48%;
}

#load-text {
    position: absolute;
    height: 100%;
    width: 100%;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    color: var(--secondary-color);
    overflow: visible;
    z-index: 1;
    font-family: var(--font-title);
}

#load-text::before {
    content: "";
    position: absolute;
    width: 1200px;
    height: 1200px;
    background-image: url(/assets/IMAGES/GUI/LOAD/06.png);
    background-position: center center;
    background-repeat: no-repeat;
    background-size: 1024px 1024px;
    z-index: -10;
    opacity: 0.1;
    animation: loading-rotation 7s linear infinite;
}

#load-text::after {
    content: "";
    position: absolute;
    width: 1200px;
    height: 1200px;
    background-image: url(/assets/IMAGES/GUI/LOAD/08.png);
    background-position: center center;
    background-repeat: no-repeat;
    background-size: 1024px 1024px;
    z-index: -1;
    opacity: 0.7;
    animation: loading-rotation 7s linear infinite;
}


#load-text p {
    text-align: center;
    margin: 0;
    position: relative;
    display: inline-block;
    color: #3c8dbc7d;
    background: linear-gradient(120deg,
            transparent 0%,
            transparent 5%,
            var(--accent-color) 45%,
            var(--accent-color) 55%,
            transparent 95%,
            transparent 100%);
    background-size: 300% 300%;
    background-clip: text;
    -webkit-background-clip: text;
    z-index: 1;
}

.progress.active #load-text p {
    animation: brillance-texte 5s linear infinite;
}

#load-text #load-text-title {
    font-size: 25px;
    color: var(--secondary-color);
    text-shadow: 0px 0px 30px black;
    text-transform: uppercase;
    position: relative;
    z-index: 2;
    /* Assure que le texte reste au-dessus */
}

#load-text #load-text-title::before {
    content: attr(data-text);
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: -1;
    color: transparent;
    -webkit-text-stroke: 20px var(--bk-color-th-0);
    text-stroke: 20px var(--bk-color-th-0);
    font-size: inherit;
    text-transform: inherit;
}

#load-text #load-text-msg {
    font-size: 15px;
    text-shadow: 0px 0px 30px black;
    position: relative;
}

#load-text #load-text-msg::before {
    content: attr(data-text);
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: -1;
    color: transparent;
    -webkit-text-stroke: 10px var(--bk-color-th-0);
    text-stroke: 10px var(--bk-color-th-0);
    font-size: inherit;
    text-transform: inherit;
}

@keyframes loading-rotation {
    0% {
        transform: rotate(0deg);
    }

    100% {
        transform: rotate(360deg);
    }
}

@keyframes brillance-texte {
    0% {
        background-position: -300% 0;
    }

    100% {
        background-position: 300% 0;
    }
}

#main-container {
    overflow: hidden;
}

.main-section:not(.active-section) .leaflet-interactive,
.main-section:not(.active-section) .leaflet-control {
    pointer-events: none !important;
}

.isLoading .main-section .leaflet-interactive,
.isLoading .main-section .leaflet-control {
    pointer-events: none !important;
    cursor: wait;
}

.leaflet-interactive.wait-cursor-enabled {
    cursor: wait !important;
}

.icon-menu {
    position: relative;
    display: flex;
}

.icon-menu img {
    display: block;
    height: calc(var(--main-bar-height)/2.5);
    margin: 1rem 0.5rem;
    margin-top: 0.8rem;
}

.icon-menu .fa-circle-o {
    position: absolute;
    bottom: 0;
    left: 0;
}

/******************************************************************************************************************************/
/*                                                                                                                            */
/*                                                              HEADER                                                        */
/*                                                                                                                            */
/******************************************************************************************************************************/
#hd {
    display: block;
    position: fixed;
    width: 100vw;
    top: 0;
    z-index: 1000;
    pointer-events: none;
}

/*************** SCREEN FOR MOBILE ******************/
/* @media screen and (max-width:900px) {

} */

/*************** SCREEN FOR PC ******************/
/* @media screen and (min-width:901px) and (min-height:601px) and (orientation:landscape) {

} */
/******************* HEADER MENU ***********************/

#hd-bar.hd-bar-xl {
    height: calc(var(--header-height) + var(--main-bar-height));
    align-items: flex-start;
}

#hd-bar.hd-bar-xl::before {
    width: 70%;
    margin-left: -50px;
}

#main-bar.main-bar-xl {
    top: calc(-3rem + 10px);
    pointer-events: none;
}

#main-bar-container {
    width: 70%;
}

#hd-bar div {
    pointer-events: all;
}

#hd-bar {
    position: relative;
    height: var(--header-height);
    background: transparent;
    display: flex;
    justify-content: flex-start;
    align-items: center;
    flex-wrap: nowrap;
}

#hd-bar>div:not(:last-of-type) {
    float: left;
    text-align: center;
    height: var(--header-height);
    z-index: 10;
}

#hd-bar #hd-logo {
    z-index: 5;
    margin-left: -10px;
}

#hd-bar>div:not(:last-of-type)>a>img {
    width: auto;
    height: calc(var(--header-height)*.7);
    margin: calc(var(--header-height)*.3/2);
    scale: 1;
    transition: all 0.2s ease;
}

#hd-bar>div:not(:last-of-type)>a:hover>img {
    scale: 1.1;
}

#hd-logo a img {
    margin-left: -20px !important;
}

/* #hd-bar>div:not(:last-of-type)>a:hover>img {
    background-color: rgba(255, 255, 255, .08);
} */
#hd-bar>div:last-of-type {
    flex-grow: 1;
}

#hd-bar #hd-nav {
    pointer-events: none;
}

/* Logo du client dans la barre */
#hd-bar .client-logo-container {
    float: left;
    text-align: center;
    height: var(--header-height);
    z-index: 10;
    pointer-events: all;
    position: absolute;
    left: 300px;
}

#hd-bar .client-logo-container .link-client {
    border-radius: 50%;
    display: block;
    height: 100%;
}

#hd-bar .client-logo-container .link-client {
    background: radial-gradient(circle, white 0%, transparent 70%);
}

#hd-bar .client-logo-container .link-client img {
    object-fit: contain;
    border-radius: 50%;
    opacity: 0.6;
    width: 45px;
    padding: 5px;
    transition: opacity 0.3s ease, transform 0.3s ease;
}

#hd-bar .client-logo-container .link-client:hover img {
    opacity: 0.9;
    transform: scale(1.1);
}

#hd-bar::before {
    content: '';
    position: absolute;
    left: 0;
    top: 0;
    width: 60%;
    height: 100%;
    background-color: var(--primary-color);
    max-width: 900px;
    min-width: 670px;
    border-radius: 0 0 105px 0px;
    z-index: -10;
    transform: skewX(-30deg);
    margin-left: -20px;
    box-shadow: 10px 0px 0px var(--secondary-color);
}

#hd-nav-top {
    height: var(--header-height);
    display: flex;
    justify-content: center;
    align-items: center;
    width: 100%;
}

#hd-nav-top>div {
    display: flex;
    flex-direction: column;
    pointer-events: all;
    width: 100%;
    height: var(--header-height);
    justify-content: center;
    align-items: flex-end;
    user-select: none;
    pointer-events: none;
}


#profile-fields>div {
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
    align-items: flex-start;
}

#hd-nav-top fieldset {
    border: none;
    position: absolute;
    right: 1%;
    top: 45px;
}

.isLoading #hd-nav-top fieldset {
    pointer-events: none;
    user-select: none;
    opacity: 0.5;
    transition: all 0.2s ease;
    cursor: wait;
}

#hd-nav-top fieldset label {
    display: flex;
    height: 100%;
    border-radius: 100% 100% 0 0;
    padding: 5px 10px 3px 10px;
    line-height: 9px;
    color: #fff;
    font-family: var(--font-title);
    font-size: calc(var(--header-height)/7);
    text-shadow: 1px 1px 1px rgb(0 0 0 / 60%);
    text-decoration: none;
    background-color: rgba(8, 22, 35, 0.5);
    transition: color .2s ease-in-out;
    margin-left: 10px;
}

select#language-selector {
    display: block;
    position: relative;
    font-family: var(--font-title);
    font-size: calc(var(--header-height)/7);
    font-weight: lighter;
    text-shadow: 1px 1px 1px var(--primary-color);
    text-decoration: none;
    transition: color .2s ease-in-out;
    z-index: 1;
    height: 100%;
    width: 100%;
    min-width: 50px;
    background: rgba(7, 27, 50, 0.8);
    border: 0;
    text-align: center;
    color: var(--secondary-color);
    border-radius: 0 5px 5px 0;
    border-left: 1px solid var(--primary-color);
    border-right: 2px solid var(--accent-color-hover);
    padding: 0 5px;
}

select#language-selector:focus-visible {
    outline: 0;
}

select#language-selector:hover {
    color: var(--accent-color-clear);
    cursor: pointer;
    color: white;
}

select#language-selector option {
    font-size: calc(var(--header-height) / 6);
    background-color: var(--primary-color);
    transition: all 0.5s ease-in-out;
}

select#language-selector option:hover {
    background-color: var(--secondary-color);
}

.select2-dropdown-lang {
    /* background: #222e3c; */
    background: var(--dark-color-2);
    color: #fff;
    font-family: var(--font-title);
    font-size: 13px;
    border-radius: 8px;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.2);
}

.select2-dropdown-lang .select2-results__option--highlighted {
    background: #4CAF50 !important;
    color: #fff !important;
}

#hd-nav-top fieldset select {
    color: #fff;
    background-color: rgba(55, 68, 80, 0.8);
    box-shadow: 3px 3px 5px rgba(0, 0, 0, 0.2);
    border: 1px solid transparent;
    border-radius: 10px;
    font-family: var(--font-title);
    padding: 10px;
    transition: all 0.2s ease;
}

#hd-nav-top fieldset select:hover {
    background-color: rgba(55, 68, 80, 0.95);
    border-radius: 5px;
    border-color: var(--primary-color);
}


#hd-nav-top ul {
    list-style: none;
    display: flex;
    flex-wrap: nowrap;
    justify-content: flex-end;
    padding: 0 1vw 0 0;
    margin-right: 1vw;
    border-radius: 5px;
    overflow: hidden;
    user-select: all;
    pointer-events: all;
    height: 25px;
    color: var(--secondary-color);
    transform: translateX(0px);
    transition: transform 0.5s ease;
}

#hd-nav-top ul.hidden {
    transform: translateX(calc(300px + 2vw));
}

#hd-nav-top li {
    line-height: 25px;
    background-color: rgba(7, 27, 50, 0.8);
    text-align: center;
    position: relative;
    padding: 0 5px;
}

#hd-nav-top li:last-of-type {
    background-color: transparent;
    padding: 0;
}

#hd-nav-top li:first-of-type {
    padding: 0 10px;
}

#hd-nav-top li:hover {
    background-color: var(--bk-color-th-5);
}

#hd-nav-top li a {
    display: flex;
    justify-content: center;
    align-items: center;
    position: relative;
    font-family: var(--font-title);
    font-size: calc(var(--header-height)/7);
    font-weight: lighter;
    text-shadow: 1px 1px 1px var(--primary-color);
    text-decoration: none;
    transition: color .2s ease-in-out;
    z-index: 1;
    height: 100%;
    width: 100%;
    min-width: 50px;
}


#hd-nav-top li:hover a {
    color: var(--accent-color-clear);
}

#hd-nav-top li:last-of-type,
#hd-nav-top li:last-of-type::after {
    border-radius: 0 5px 5px 0;
}

#hd-nav-top li:first-of-type,
#hd-nav-top li:first-of-type::after {
    border-radius: 5px 0 0 5px;
}

#hd-nav-top li:first-of-type::after {
    border-left: 2px solid var(--accent-color-hover);
}

#hd-nav-top li:last-of-type::after {
    border-right: 2px solid var(--accent-color-hover);
}


#hd-nav-top li:not(:first-of-type)::after,
#hd-nav-top li:not(:last-of-type)::after {
    content: "";
    position: absolute;
    bottom: 0;
    top: 0;
    left: 0;
    right: 0;
    z-index: 0;
    opacity: 0.5;
}

#hd-nav-top li:not(:first-of-type)::after {
    border-left: 1px solid var(--primary-color);
}

#hd-nav-top li:not(:last-of-type)::after {
    border-right: 1px solid var(--primary-color);
}

/* Styles pour les boutons de menu désactivés */
#hd-nav-top li.menu-item-disabled {
    opacity: 0.5;
    cursor: not-allowed;
    pointer-events: none;
    background-color: rgba(7, 27, 50, 0.4) !important;
}

#hd-nav-top li.menu-item-disabled a {
    color: #999 !important;
    pointer-events: none;
}

#hd-nav-top li.menu-item-disabled:hover {
    background-color: rgba(7, 27, 50, 0.5) !important;
    cursor: not-allowed !important;
}

#hd-nav-top li.menu-item-disabled:hover a {
    color: #999 !important;
}

#hd-nav-top li.menu-item-disabled::after {
    opacity: 0.3;
}

/* Style pour un menu avec un seul élément (page de connexion) */
#hd-nav-top li.single-menu-item {
    border-radius: 5px;
    background-color: transparent;
    padding: 0;
}

li.single-menu-item select#language-selector {
    border-right: 2px solid var(--accent-color-hover);
    border-left: 2px solid var(--accent-color-hover);
}

#hd-nav-top:hover li.single-menu-item {
    background-color: transparent;
}

#hd-nav-top li.single-menu-item::after {
    border-left: 2px solid var(--accent-color-hover);
    border-right: 2px solid var(--accent-color-hover);
    border-radius: 5px;
}


/********************* PARTNERS AND SOCIAL NETWORKS MENU ****************/
#hd-nav-partner {
    height: auto;
    flex: 0.6;
    display: flex;
    justify-content: flex-end;
    max-width: 550px;
    min-width: 320px;
    align-self: flex-start;
    margin-top: 3px;
}

.hd-bar-xl #hd-nav-partner {
    max-width: 580px;
    min-width: 340px;
}

#hd-nav-partner>ul {
    list-style: none;
    display: flex;
    flex-wrap: nowrap;
    justify-content: space-evenly;
    pointer-events: all;
    background-color: rgba(71, 121, 160, 0.5);
    border-radius: 15px;
    padding: 0;
    margin: 0;
    transform: scale(0.8);
    transition: all 0.5s ease;
}

#hd-nav-partner>ul:hover {
    transform: scale(0.9);
}

#hd-nav-partner li a {
    display: flex;
    width: 100%;
}

#hd-nav-partner li a>img {
    height: calc(var(--header-height)/2);
    width: auto;
    padding: 0.1rem;
    margin: auto 0.1rem;
    text-align: center;
    border-radius: 4px;
    transition: all 0.3s ease;
    border: 1px var(--primary-color);
    transform: scale(0.9);
    opacity: 0.7;
    filter: brightness(0.6);
}

#hd-nav-partner li a:hover>img {
    background-color: var(--primary-color);
    border-radius: 8px;
    border-width: 3px;
    transform: scale(1);
    transition: all 0.3s ease;
    opacity: 1;
    filter: brightness(1) !important;
}

#hd-nav-partner>ul:hover li a>img {
    opacity: 0.9;
    filter: brightness(0.8);
}


/******************************************************************************************************************************/
/*                                                                                                                            */
/*                                                              THRESHOLD LEVELS                                              */
/*                                                                                                                            */
/******************************************************************************************************************************/

.th-level-0,
.th-level-1,
.th-level-2,
.th-level-3,
.th-level-4,
.th-level-5 {
    position: relative;
    top: -0.8rem;
    left: -0.8rem;
    margin: .1rem;
    padding: .1rem;
    border-radius: 2px;
    font-size: calc(var(--main-bar-height)/8);
}

.th-level-0,
.td-level-0 {
    display: none;
    color: var(--accent-color);
    background-color: var(--bk-color-th-0);
}

.th-level-1,
.td-level-1 {
    color: var(--color-th-1);
    background-color: var(--bk-color-th-1);
}

.th-level-2,
.td-level-2 {
    color: var(--color-th-2);
    background-color: var(--bk-color-th-2);
}

.th-level-3,
.td-level-3 {
    color: var(--color-th-3);
    background-color: var(--rc-color-orange-dark);
}

.th-level-4,
.td-level-4 {
    color: var(--color-th-4);
    background-color: var(--rc-color-red);
}

.th-level-5,
.td-level-5 {
    color: var(--color-th-5);
    background-color: var(--bk-color-th-5);
}

#icon-level-0 {
    color: var(--bk-color-th-0);
}

#icon-level-1 {
    color: var(--bk-color-th-1);
}

#icon-level-2 {
    color: var(--bk-color-th-2);
}

#icon-level-3 {
    color: var(--rc-color-orange-dark);
}

#icon-level-4 {
    color: var(--rc-color-red);
}

#icon-level-5 {
    color: var(--bk-color-th-5);
}

/******************************************************************************************************************************/
/*                                                                                                                            */
/*                                                              MAIN BAR                                                      */
/*                                                                                                                            */
/******************************************************************************************************************************/
#main-bar {
    position: relative;
    height: calc(var(--main-bar-height) - 10px);
    background-color: transparent;
    display: flex;
}

#main-bar::before {
    content: '';
    position: absolute;
    left: -111px;
    top: 0;
    width: 70%;
    height: 100%;
    background-color: var(--tertiary-color);
    max-width: 900px;
    min-width: 670px;
    border-radius: 0 0 50px 0px;
    z-index: -10;
    transform: skewX(-55deg);
}


#main-bar>div:first-of-type {
    display: flex;
    flex-wrap: wrap;
    padding: 0;
    width: 100%;
    align-items: flex-end;
    justify-content: flex-start;
    max-width: 900px;
    min-width: 650px;
    margin: 0;
    width: 70%;
}

/*************** MAIN FIELDS *****************/
#main-form {
    display: none;
    /*height: 100%;*/
    width: 100%;
    position: absolute;
    top: 50px;
    left: 0;
    z-index: 10;
}

.isLoading #main-form {
    pointer-events: none;
    opacity: 0.5;
    transition: all 0.2s ease;
    user-select: none;
    cursor: wait;
}

header#hd.section-map #main-form,
header#hd.section-data #main-form {
    display: flex !important;
}

/******************* HORIZONTAL MENU *******************/
#main-nav {
    color: var(--accent-color-focus);
    font-family: var(--font-title);
    font-size: calc(var(--main-bar-height) / 4.5);
    text-align: center;
    text-decoration: none;
    line-height: calc(var(--main-bar-height) - 10px);
    height: calc(var(--main-bar-height) - 10px);
    display: flex;
    justify-content: center;
    align-items: center;
    padding: 0px;
    pointer-events: all;
    width: calc(70% - 60px);
    z-index: 1000;
    position: relative;
}

#main-nav a {
    display: flex;
    align-items: center;
}

#main-nav>ul.mmr-ul>li>a:first-of-type {
    justify-content: flex-end;
    height: 38px;
    flex-direction: column;
    line-height: 30px;
    color: inherit;
}

#main-nav a img.cat-border-0,
#main-nav a img.cat-border-0-blink {
    border-radius: 50%;
    border: 3px solid #fff;
    vertical-align: middle;
    max-width: 30px;
    margin: 0.25rem;
    margin-left: 0;
}

#main-nav a img.cat-border-1,
#main-nav a img.cat-border-1-blink {
    border-radius: 50%;
    border: 3px solid var(--bk-color-th-1);
    vertical-align: middle;
    max-width: 30px;
    margin: 0.25rem;
    margin-left: 0;
}

#main-nav a img.cat-border-2,
#main-nav a img.cat-border-2-blink {
    border-radius: 50%;
    border: 3px solid var(--bk-color-th-2);
    vertical-align: middle;
    max-width: 30px;
    margin: 0.25rem;
    margin-left: 0;
}

#main-nav a img.cat-border-3,
#main-nav a img.cat-border-3-blink {
    border-radius: 50%;
    border: 3px solid var(--rc-color-orange-dark);
    vertical-align: middle;
    max-width: 30px;
    margin: 0.25rem;
    margin-left: 0;
}

#main-nav a img.cat-border-4,
#main-nav a img.cat-border-4-blink {
    border-radius: 50%;
    border: 3px solid var(--rc-color-red);
    vertical-align: middle;
    max-width: 30px;
    margin: 0.25rem;
    margin-left: 0;
}

#main-nav a img.cat-border-5,
#main-nav a img.cat-border-5-blink {
    border-radius: 50%;
    border: 3px solid var(--bk-color-th-5);
    vertical-align: middle;
    max-width: 30px;
    margin: 0.25rem;
    margin-left: 0;
}

#main-nav a img.cat-border-0-blink,
#main-nav a img.cat-border-1-blink,
#main-nav a img.cat-border-2-blink,
#main-nav a img.cat-border-3-blink,
#main-nav a img.cat-border-4-blink,
#main-nav a img.cat-border-5-blink {
    animation-name: Blink_vigilance_level;
    animation-duration: 5s;
    animation-iteration-count: infinite;
}

@keyframes Blink_vigilance_level {
    50% {
        border-color: rgba(255, 255, 255, 0.08);
    }
}

#main-nav>ul.lim-ul {
    list-style-type: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-wrap: nowrap;
    height: 100%;
}

#main-nav>ul.lim-ul>li.lim-li,
#main-nav>ul.lim-ul>li.lim-li-active {
    height: 100%;
    margin: 0;
    display: flex;
    flex-wrap: nowrap;
    flex-direction: column;
    width: 50px;
    text-align: center;
    line-height: 0px;
    font-size: 10px;
}

#main-nav>ul.lim-ul>li.lim-li:hover {
    background-color: var(--accent-color-hover);
}

#main-nav>ul.lim-ul>li.lim-li-active {
    background-color: var(--accent-color-hover);
}

#main-nav li.lim-li a i {
    font-size: calc(var(--main-bar-height)/3);
    margin: 0 0.4rem 0 0;
}

#main-nav li.lim-li ul.lim-ul {
    display: none;
    /*used to block display the dropdown */
    position: relative;
    padding: 0px;
    margin-top: 1px;
}

#main-nav li.lim-li:hover ul.lim-ul {
    display: block;
}

#main-nav li.lim-li {
    list-style: none;
    margin: 0;
    /*min-width:100%;*/
}

#main-nav>li.lim-li {
    display: inline-block;
}

#main-nav li.lim-li a,
#main-nav li.lim-li-active a {
    padding: 0 .1rem;
    display: flex;
    text-align: left;
    flex-direction: column;
    flex-wrap: nowrap;
    align-items: center;
}

#main-nav li.lim-li a:link {
    color: #F1F6FE;
}

#main-nav li.lim-li a:visited {
    color: #F1F6FE;
}

#main-nav li.lim-li a:hover {
    color: #FFFFFF;
    background: var(--accent-color-hover);
    border-color: #0F3974;
}

/*/////////////////////////////////////*/

.mmr-ul {
    position: relative;
    display: flex;
    flex: 1 1 auto;
    margin: 0;
    padding: 0;
    list-style-type: none;
    white-space: nowrap;
}

.mmr-ul>li {
    max-width: 25%;
    flex: 1 1 auto;
    min-width: 0;
}

/* Masquer complètement les onglets cachés pour la réorganisation */
.mmr-ul>li.export-hidden {
    display: none !important;
    max-width: 0;
    width: 0;
    margin: 0;
    padding: 0;
    overflow: hidden;
}

.mmr-ul>li:hover,
.mmr-ul>li.mmr-persistent-active {
    color: white;
}

.mmr-ul li {
    transition: all 0.2s ease;
    width: 100%;
}

.mmr-ul li a {
    text-align: left;
    text-decoration: none;
    position: relative;
    cursor: pointer;
}

li.menu-item-import a {
    cursor: pointer;
}

.mmr-ul li:hover {
    color: #fff;
}

.mmr-ul>li>a::before {
    content: "";
    position: absolute;
    top: -10px;
    height: 48px;
    border-radius: 20px 20px 0 0;
    z-index: -1;
    width: 100%;
    background-color: var(--tertiary-color);
    transition: all 0.3s ease;
    box-shadow: 0px -2px 0 var(--tertiary-color);
}

.mmr-ul>li:hover>a::before,
.mmr-ul>li.mmr-persistent-active>a::before {
    background: var(--accent-color-hover);
    box-shadow: 0px -7px 0 var(--tertiary-color);
}

.mmr-ul li:hover ul,
.mmr-ul li ul.mmr-delay-active {
    visibility: visible;
    opacity: 1;
    box-shadow: 5px 10px 20px -5px var(--bk-color-th-0);
    z-index: 100;
}


.mmr-ul>li>ul>li {
    padding: 2px 10px 2px 0px;
    border-left: 10px solid var(--accent-color-hover);
    border-right: 5px solid var(--primary-color);
}

.mmr-ul>li>ul>li:hover {
    background-color: var(--accent-color-hover);
    border-left: 10px solid var(--accent-color);
}

.mmr-ul>li>ul>li:last-of-type {
    border-bottom-left-radius: 20px;
    border-bottom-right-radius: 20px;
}

.mmr-ul>li>ul>li:first-of-type {
    border-top-right-radius: 20px;
    margin-right: 10px;
}

.mmr-ul li a>i {
    padding: 0 .5rem;
    font-size: calc(var(--main-bar-height)/3);
    line-height: 3px;
}

.mmr-ul li ul {
    visibility: hidden;
    opacity: 0;
    position: absolute;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    margin: 0;
    padding: 0;
    background: var(--tertiary-color);
    transition: all 0.2s ease;
    pointer-events: all;
    border-radius: 0 20px 20px 20px;
}

.mmr-ul li ul li a {
    color: #F9F8FD;
}


@keyframes slide-in {
    0% {
        top: -50px;
    }

    40% {
        top: 20px;
    }

    70% {
        top: 10px;
    }

    100% {
        top: 15px;
    }
}

/****************** VERTICAL MENU *******************/
#burger-nav {
    height: 100%;
    width: 900px;
    -webkit-backface-visibility: hidden;
    backface-visibility: hidden;
    pointer-events: all;
    display: flex;
    max-width: 100px;
    min-width: 80px;
}

.nav-sub {
    background-color: var(--tertiary-color);
    position: absolute;
    width: 100%;
    z-index: 1000;
    border-bottom-right-radius: 30px;
    overflow: hidden;
    max-height: 0;
    transition: all .5s ease;
    border: 0px solid var(--secondary-color);
    box-shadow: 0px 0px 0px 0px rgba(60, 141, 188, 0.5);
}

.nav-sub.open {
    max-height: 100vh;
    transition: max-height .5s ease;
    border-bottom: 10px solid var(--primary-color);
    transition: all .5s ease;
    box-shadow: -5px 5px 5px 5px rgba(1, 42, 83, 0.5);
}

.nav-sub li {
    float: none;
    width: 100%;
    text-align: center;
}

#burger-nav>ul {
    /*border:1px solid #00f;*/
    height: 100%;
    width: 100%;
}

#burger-nav>ul img {
    display: block;
    height: 100%;
    width: auto;
    margin: auto;
    transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
}

/* Transitions fluides pour l'icône du menu burger principal */
#burger-main-icon {
    transition: opacity 0.2s ease, padding 0.2s ease;
    transform-origin: center;
    padding: 0;
}

/* Padding pour les icônes de section (pas pour l'icône burger de base) */
#burger-main-icon.section-icon {
    padding: 5px;
}

/* Background personnalisé pour les icônes de section */
#burger-main-icon.section-icon {
    background-color: rgba(1, 42, 83, 0.5);
    border-radius: 10px;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);
    width: 90px;
    height: 38px;
    outline: 1px solid rgba(96, 168, 210, 0.5);
    outline-offset: -3px;
}

/* Animation de fade lors du changement d'icône */
#burger-main-icon.changing {
    opacity: 0.3;
}

/* Animation d'apparition de la nouvelle icône */
#burger-main-icon.appearing {
    opacity: 1;
}

/* Styles pour le label du menu burger */
.burger-label {
    position: absolute;
    top: 38px;
    left: 50%;
    transform: translateX(-50%);
    font-size: 0.6rem;
    font-weight: bold;
    color: #fff;
    text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.8);
    white-space: nowrap;
    opacity: 0;
    transition: opacity 0.2s ease;
    pointer-events: none;
    z-index: 10;
    max-width: 80px;
    text-align: center;
    line-height: 1.1;
    width: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
    background-color: var(--primary-color);
    border-bottom-left-radius: 10px;
    border-bottom-right-radius: 10px;
    border-bottom: 2px solid var(--accent-color-hover-table);
}

/* Afficher le label pour les icônes de section */
.burger-label.section-label {
    opacity: 1;
    text-overflow: ellipsis;
    white-space: wrap;
    display: block;
    line-height: 10px;
    z-index: 100;
}

/* Animation de fade pour le label */
.burger-label.changing {
    opacity: 0.3;
}

.burger-label.appearing {
    opacity: 1;
}

/* Responsive : masquer le label sur les petits écrans */
@media (max-width: 768px) {
    .burger-label {
        display: none;
    }
}

#burger-nav ul {
    list-style-type: none;
    margin: 0;
    padding: 0;
}

#burger-nav>ul>li {
    height: 100%;
    transition: all .2s ease;
}

#burger-nav ul li {
    width: 100%;
    text-align: center;
    position: relative;
}

#burger-nav div {
    display: block;
    text-decoration: none;
    font-family: var(--font-title);
    /*font-family: Helvetica, Arial, sans-serif;*/
    font-size: calc(var(--main-bar-height)/5);
    text-shadow: 1px 1px 1px rgb(0 0 0 / 60%);
    color: #fff;
    padding: .5rem;
}

#burger-nav div:last-of-type {
    padding-bottom: 15px;
}


#burger-nav div:hover {
    background-color: var(--accent-color-hover);
}

#burger-nav div img {
    display: block;
    margin: .3rem auto;
    height: 50px;
    width: auto;
}

#burger-nav>ul>li:hover {
    background-color: var(--accent-color-hover);
}

#burger-nav>ul>li div {
    transition: all 0.3s ease;
}

#burger-nav>ul>li .active {
    background-color: var(--primary-color);
}

/******************************************************************************************************************************/
/*                                                                                                                            */
/*                                                              MAIN SECTIONS                                                 */
/*                                                                                                                            */
/******************************************************************************************************************************/

#main-content {
    height: var(--main-section-height);
    overflow: hidden;
    position: relative;
    z-index: 5;
}

#main-content {
    height: var(--main-section-login-height);
    overflow: hidden;
}

#main-content-card {
    height: var(--main-section-login-height);
    overflow: auto;
}

.main-section {
    /*position:relative;*/
    background-size: cover;
    height: var(--main-section-height);
    display: block;
    position: relative;
}

#sec-map.main-section {
    height: var(--main-section-height);
    padding-bottom: var(--footer-height);
}

#sec-user {
    background-image: url('/assets/IMAGES/GUI/BACKGROUNDS/bg-USER.png');
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    justify-items: center;
    align-content: center;
}

#main-content #sec-user::before {
    content: "";
    position: absolute;
    top: 0;
    bottom: 0;
    right: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-size: cover;
    background: radial-gradient(circle, rgb(1, 42, 83) 0%, rgba(15, 40, 64, 0.7) 70%);
    z-index: 1;
    pointer-events: none !important;
    backdrop-filter: blur(5px);
}

#main-content #sec-user::after {
    content: "";
    position: absolute;
    bottom: -50px;
    right: 0;
    left: 0;
    height: 50px;
    background: linear-gradient(0deg, transparent 0%, rgba(15, 40, 64, 0.7) 100%);
    z-index: 1;
    user-select: none;
    pointer-events: none;
}

/* 
#sec-board {
    background: url('/assets/IMAGES/GUI/BACKGROUNDS/bg-BOARD.png') fixed;
}

#sec-map {
    background: url('/assets/IMAGES/GUI/BACKGROUNDS/bg-MAP.png') fixed;
}

#sec-services {
    background: url('/assets/IMAGES/GUI/BACKGROUNDS/bg-SERVICES.png') fixed;
} */

#sec-data,
#sec-import,
#sec-export {
    background: rgba(255, 255, 255, 0.6);
}

#sec-data {
    backdrop-filter: blur(4px);
}

/******************************************************************************************************************************/
/*                                                                                                                            */
/*                                                              LOADER                                                        */
/*                                                                                                                            */
/******************************************************************************************************************************/

.section-loading {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(1, 42, 83, 0.5);
    font-size: 20px;
    text-align: center;
    display: none;
    align-items: center;
    justify-content: center;
    z-index: 20000;
    flex-wrap: nowrap;
    flex-direction: column;
    cursor: progress;
}

.section-loading .loadcontent {
    position: relative;
    min-width: 600px;
    width: 60%;
    min-height: 350px;
    display: flex;
    align-items: center;
    flex-wrap: nowrap;
    flex-direction: column;
    text-align: center;
    font-size: 25px;
    color: var(--tertiary-color);
    background: white;
    border-radius: 30px;
    border: 1px solid var(--primary-color);
    cursor: progress;
    outline: 2px solid var(--primary-color);
    outline-offset: 0px;
    box-shadow: -5px 5px 20px 5px rgba(60, 141, 188, 0.5);
    border-left: 10px solid var(--primary-color);
    border-bottom: 10px solid var(--primary-color);
}

.loadcontent h3 {
    margin: 3% auto;
}

.section-loading .loadcontent .loading-close {
    position: absolute;
    top: 0;
    right: 0;
    width: 50px;
    height: 30px;
    background-color: #b91a1a;
    color: white;
    font-size: 20px;
    line-height: 30px;
    cursor: pointer;
    z-index: 10;
    border: 1px solid darkred;
    pointer-events: all;
    border-top-right-radius: 15px;
    border-bottom-left-radius: 10px;
    box-shadow: -2px 2px 0 2px #580808;
    transition: all 0.2s ease;
}

.section-loading .loadcontent .loading-close:hover {
    background-color: darkred;
    border-color: #b91a1a;
    box-shadow: 0 0 0 2px black;
    transform: translate(-2px, 2px);
}

.loadcontent .section-loading h3 {
    font-size: 20px;
}

.loading-gif {
    width: 359px;
    /* Ajuste la taille du GIF */
    height: 152px;
    margin: 5px;
    border: 0;
    border-radius: 30px;
}

.loading-text {
    font-size: 16px;
    font-weight: bold;
}

/******************************************************************************************************************************/
/*                                                                                                                            */
/*                                                              FOOTER                                                        */
/*                                                                                                                            */
/******************************************************************************************************************************/

#ft {
    height: var(--footer-height);
    display: flex;
    flex-wrap: wrap;
    justify-content: space-evenly;
    z-index: 10;
    position: absolute;
    bottom: 0;
    width: 100%;
    box-shadow: 0 10px 30px rgba(1, 16, 28, 0.5);
    background: rgba(0, 0, 0, 0.5);
    z-index: 10000;
}

.foot-block {
    /*border:1px solid #fff;*/
    color: var(--accent-color-focus);
    font-family: var(--font-title);
    font-size: calc(var(--header-height)/7);
    line-height: calc(var(--header-height)/7);
    margin: auto 1rem;
}

.foot-block>a {
    color: #fff;
    text-shadow: 1px 1px 1px rgb(0 0 0 / 60%);
    text-decoration: none;
}

.foot-block>a:hover {
    color: var(--accent-color-clear);
}


.filter-reset-container {
    position: relative;
    display: inline-block;
    margin-right: 0;
}


/* Animation de rotation pour le bouton refresh uniquement */
@keyframes refresh-rotation {
    0% {
        transform: rotate(0deg);
    }

    100% {
        transform: rotate(180deg);
    }
}

/* Cibler spécifiquement le bouton refresh avec son ID */
#grid-tools-refresh.clicked i {
    animation: refresh-rotation 0.5s ease;
}

#grid-tools-refresh:hover.clicked i {
    animation: refresh-rotation 0.5s ease;
    cursor: not-allowed;
}

.filter-count-badge {
    position: absolute;
    bottom: -2px;
    right: -8px;
    background-color: var(--error-color);
    color: white;
    border-radius: 50%;
    width: 18px;
    height: 18px;
    font-size: 12px;
    font-weight: bold;
    display: none;
    align-items: center;
    justify-content: center;
    text-align: center;
    line-height: 18px;
    z-index: 10;
}

.stats-filter-count-badge {
    background-color: var(--error-color);
    color: white;
    border-radius: 50%;
    width: 18px;
    height: 18px;
    font-size: 12px;
    font-weight: bold;
    align-items: center;
    justify-content: center;
    text-align: center;
    line-height: 18px;
    transform: rotate(90deg);
    z-index: 10;
}


.main-button {
    display: inline;
    color: #fff;
    font-size: .6rem;
    height: 50%;
    object-fit: fill;
    text-decoration: none;
    text-align: center;
    font-family: var(--font-title);
    background-color: var(--accent-color-hover);
    border-radius: .2rem;
    padding: .2rem .35rem;
    text-shadow: none;
    margin: 0 0.1rem;
    border: black 1px solid;
    border-top: #c8c8ff 1px solid;
    border-left: #c8c8ff 1px solid;
}

.main-button:hover {
    background-color: var(--tertiary-color);
}

.image-cropper-actions button,
.btn {
    transition: all 0.2s ease;
    margin: 0 0 1rem 0;
    font-size: .6rem;
    color: white;
    text-decoration: none;
    text-align: center;
    font-family: var(--font-title);
    border-radius: .2rem;
    padding: 1rem;
    text-shadow: none;
    border-radius: 10px;
    min-width: 50px;
    border: 0px;
    cursor: pointer;
    display: flex;
    justify-content: center;
    align-items: center;
}

.back-to-columns {
    margin: 10px !important;
}

.image-cropper-actions button:hover,
.btn:hover {
    border-radius: 1.5em;
    cursor: pointer;
    transform: translate(2px, 2px);
}

.btn:disabled {
    opacity: 0.5;
    cursor: not-allowed;
    pointer-events: none;
    background-color: #cccccc !important;
    color: #666666 !important;
    box-shadow: 2px 2px 0px rgba(0, 0, 0, 0.2) !important;
}

.btn:disabled:hover {
    transform: none;
    border-radius: 10px;
}

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

button#sidebar-target-map.btn>i {
    margin-right: 0;
}

.image-cropper-actions button {
    background-color: var(--primary-color);
    box-shadow: 5px 5px 0px var(--accent-color-select);
}

.image-cropper-actions button:hover {
    box-shadow: 3px 3px 0px var(--accent-color-select);
    background-color: var(--secondary-color);
}

.btn-table {
    background: none;
    border: none;
    padding: 8px;
    margin: 0 2px;
    border-radius: 4px;
    cursor: pointer;
    transition: background-color 0.2s ease;
}

/*pour boutons non ombragé*/
.btn-blue {
    color: var(--secondary-color);
}

.btn-blue:hover {
    background: #e3f2fd;
    color: var(--rc-color-orange);
    color: var(--rc-color-blue);
}

.btn-red {
    color: var(--error-color);
}

.btn-red:hover {
    background: #ffebee;
    color: #d32f2f;
}

.btn-green {
    color: var(--rc-color-green);
}

.btn-green:hover {
    background: #e8f5e9;
    color: var(--rc-color-green-dark);
}

/* Boutons Ombragés */
.btn-shadow {
    background-color: var(--primary-color);
    box-shadow: 5px 5px 0px var(--accent-color-select);
}

.btn-shadow:hover {
    background-color: var(--secondary-color);
    box-shadow: 3px 3px 0px var(--accent-color-select);
}

.btn-info {
    background-color: var(--rc-color-orange-dark);
    box-shadow: 5px 5px 0px rgba(84, 72, 57, 0.5);
}

.btn-info:hover {
    background-color: var(--rc-color-orange);
    box-shadow: 3px 3px 0px rgba(84, 72, 57, 0.5);
}

.btn-validate {
    background: var(--rc-color-green);
    box-shadow: 5px 5px 0px var(--rc-color-green-accent);
}

.btn-validate:hover {
    background: var(--rc-color-green-dark);
    box-shadow: 3px 3px 0px var(--rc-color-green-dark-accent);
}

.btn-export {
    background-color: var(--accent-color-hover) !important;
    box-shadow: 3px 3px 0px var(--dark-color-2);
}

.btn-export:hover {
    background-color: var(--accent-color-focus) !important;
    box-shadow: 3px 3px 0px var(--dark-color-4);
}

.btn-save {
    background-color: #27ae60 !important;
    box-shadow: 5px 5px 0px rgba(174, 197, 148, 0.5) !important;
}

.btn-save:hover {
    background-color: #229954 !important;
    box-shadow: 5px 5px 0px rgba(82, 102, 82, 0.3) !important;
}



.btn-advanced {
    background: linear-gradient(135deg, #28a745, #20c997) !important;
    box-shadow: 4px 4px 0 rgba(40, 167, 69, 0.3) !important;
}

.btn-advanced:hover {
    background: linear-gradient(135deg, #20c997, #17a2b8) !important;
    box-shadow: 2px 2px 0 rgba(40, 167, 69, 0.4) !important;
}

.button-cancel,
.btn-cancel {
    background-color: #95a5a6 !important;
    box-shadow: 5px 5px 0px rgba(60, 66, 67, 0.3) !important;
}

.button-cancel:hover,
.btn-cancel:hover {
    background-color: #7f8c8d !important;
    box-shadow: 3px 3px 0px rgba(54, 59, 59, 0.3) !important;
}

.btn-canceling {
    background-color: var(--error-color);
    color: white !important;
}

.btn-canceling:hover {
    background-color: var(--secondary-color) !important;
}

.btn-exit {
    background-color: #95a5a6 !important;
    color: white !important;
    box-shadow: 5px 5px 0px rgba(60, 66, 67, 0.3) !important;
}

.btn-exit:hover {
    background-color: #7f8c8d !important;
    box-shadow: 3px 3px 0px rgba(54, 59, 59, 0.3) !important;
}

.btn-warning {
    background-color: var(--warning-color);
    box-shadow: 5px 5px 0px var(--rc-color-orange);
}

.btn-warning:hover {
    background-color: var(--rc-color-orange-dark);
    box-shadow: 3px 3px 0px var(--rc-color-orange-dark-accent);
}


/* Styles pour les boutons de modales de redirections */
.btn-retry {
    background-color: #f0ad4e !important;
    box-shadow: 5px 5px 0px rgba(238, 161, 54, 0.5) !important;
}

.btn-retry:hover {
    background-color: #ec971f !important;
    box-shadow: 3px 3px 0px rgba(213, 132, 18, 0.5) !important;
}

/* ==================
 * BOUTONS AVEC TEXTE PROGRESSIF
 * ================== */

/* Structure de base pour les boutons avec texte progressif */
.btn-progressive {
    position: relative;
    overflow: hidden;
}

/* Conteneur pour l'icône */
.btn-progressive .btn-icon {
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.5s ease;
    flex-shrink: 0;
    transform: scale(1);
    font-size: 1rem;
}

.btn-progressive.show-text .btn-icon {
    transform: scale(1);
    font-size: 0.8rem;
    margin-bottom: 0px;
}

.btn-progressive.hide-text .btn-icon {
    transform: scale(1.3);
}

/* Conteneur pour le texte */
.btn-progressive .btn-text {
    opacity: 0;
    max-width: 0;
    margin-left: 0;
    overflow: hidden;
    white-space: nowrap;
    transition: opacity 0.5s ease, max-width 0.5s ease, margin-left 0.5s ease;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: .6rem;
}

.btn-progressive .btn-text:hove {
    font-size: .8rem;
}


/* États d'animation */
.btn-progressive.show-text .btn-text {
    opacity: 1;
    max-width: 200px;
    margin-left: 8px;
}


.btn-progressive.hide-text .btn-text {
    opacity: 0;
    max-width: 0;
    margin-left: 0;
}


/* Styles spécifiques pour les boutons existants */
.btn-log-out {
    background-color: var(--rc-color-red) !important;
    box-shadow: 5px 5px 0px var(--rc-color-red-accent) !important;
}

.btn-log-out:hover {
    background-color: var(--rc-color-red-dark) !important;
    box-shadow: 3px 3px 0px var(--rc-color-red-dark-accent) !important;
}

.btn-exit {
    background-color: var(--rc-color-red) !important;
    box-shadow: 5px 5px 0px var(--rc-color-red-accent) !important;
}

.btn-exit:hover {
    background-color: var(--rc-color-red-dark) !important;
    box-shadow: 3px 3px 0px var(--rc-color-red-dark-accent) !important;
}

.btn-edit-profil {
    background-color: var(--rc-color-orange) !important;
    box-shadow: 5px 5px 0px var(--rc-color-orange-accent) !important;
}

.btn-edit-profil:hover {
    background-color: var(--rc-color-orange-dark) !important;
    box-shadow: 3px 3px 0px var(--rc-color-orange-dark-accent) !important;
}

/***************** THUMBNAIL BUTTONS *******************/
.thumbnail-btn {
    padding: 0.5rem;
    color: var(--tertiary-color);
    font-size: 1.5rem;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 2rem;
    min-height: 2rem;
    border-radius: 10px;
    transition: all 0.2s ease;
    margin: 2px;
}

.filter-reset-container .thumbnail-btn {
    width: 36px;
    height: 36px;
    border-radius: 5px;
    border: 1px solid var(--primary-color);
    box-shadow: 4px 4px 0 var(--primary-color);
    font-size: 1rem;
}

.thumbnail-btn:hover {
    background-color: rgba(0, 0, 0, 0.1);
    scale: 1.1;
}

.filter-reset-container .thumbnail-btn:hover {
    box-shadow: 2px 2px 0 var(--accent-color);
    border-color: var(--accent-color);
    color: var(--accent-color);
    transform: translate(2px, 2px);
}

.filter-reset-container .thumbnail-btn::after {
    content: "\f00d";
    font-family: "Font Awesome 6 Free";
    font-weight: 900;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    color: var(--error-color);
    opacity: 0;
    transition: opacity 0.3s ease;
    font-size: 2rem;
    z-index: 2;
}

.filter-reset-container .thumbnail-btn:hover {
    background-color: var(--accent-color-hover);
    color: white;
}

.filter-reset-container .thumbnail-btn:hover::after {
    opacity: 1;
}

.filter-reset-container .thumbnail-btn:focus,
.filter-reset-container .thumbnail-btn:focus-visible {
    color: var(--secondary-color);
    box-shadow: 4px 4px 0 var(--secondary-color);
    border-radius: 10px;
    border-color: var(--secondary-color);
    outline: 2px solid var(--secondary-color);
    outline-offset: -2px;
}

/* Styles pour le bouton reset-filters désactivé */
.filter-reset-container .thumbnail-btn.disabled,
.filter-reset-container .thumbnail-btn.disabled:hover {
    cursor: not-allowed !important;
    opacity: 0.5;
    pointer-events: none;
    border-color: var(--dark-color-3);
    color: var(--dark-color-2);
    box-shadow: 1px 1px 0 var(--dark-color-3);
    transform: translate(3px, 3px);
}

/***************** THUMBNAIL CONTAINERS *******************/
.thumbnail-name-container {
    width: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
    position: relative;
}

.thumbnail-buttons-container {
    display: flex;
    justify-content: center;
    align-items: center;
    position: relative;
}

/***************** DASHBOARD BUTTONS *******************/
.dashboard-controls .btn {
    padding: 8px 10px;
    border: none;
    border-radius: 2px;
    cursor: pointer;
    font-weight: 500;
    transition: all 0.3s ease;
}

.btn-sidebar {
    margin: 0 2px;
    padding: 4px 8px;
    border: none;
    background: transparent;
}

.btn-sidebar {
    background: rgb(72, 114, 146);
    color: white;
}

.btn-sidebar:not(.btn-shadow):hover,
.dashboard-controls .dashboard-export-btn:hover {
    background: rgb(187, 203, 215);
    color: var(--primary-color);
}


.dashboard-controls .dashboard-export-btn:hover button i {
    color: var(--primary-color);
}


/***************** DATAS BUTTONS *******************/

.btn-reset-profile {
    position: absolute;
    top: calc(var(--header-height) + var(--main-bar-height) + 10px);
    right: 20px;
}

/***************** HEADER BUTTONS *******************/
#hd-nav-top .btn {
    color: #fff;
    font-family: var(--font-title);
    font-size: calc(var(--header-height)/7);
    line-height: calc(var(--header-height)/7);
    padding: 0.5rem 1rem;
    margin: 0.2rem;
    text-decoration: none;
    text-shadow: 1px 1px 1px rgb(0 0 0 / 60%);
    pointer-events: all;
}

.box-header .btn,
#hd-nav-top .btn {
    text-decoration: none;
    text-shadow: none;
    text-align: center;
    background-color: var(--primary-color);
    border-radius: 5px;
    transition: all 0.2s ease;
    border: 0px;
    box-shadow: -3px -3px 0px var(--accent-color-select);
    transform: translate(2px, 2px);
}

.box-header .btn:hover,
#hd-nav-top .btn:hover {
    box-shadow: -1px -1px 0px var(--accent-color-select);
    background-color: var(--secondary-color);
    transition: all 0.2s ease;
    border-radius: 10px;
    transform: translate(0px, 0px);
    cursor: pointer;
}

.box-header .btn.active,
#hd-nav-top .btn.active {
    transform: translate(-2px, -2px);
    box-shadow: 3px 3px 0px var(--primary-color);
}

.box-header .btn.active:hover,
#hd-nav-top .btn.active:hover {
    transform: translate(0px, 0px);
    box-shadow: 1px 1px 0px var(--primary-color);
}

.box-header .btn:hover {
    opacity: 0.8;
    border-radius: 10px;
}

.flex {
    display: flex;
}

@media (max-width: 895px) {
    #profile-fields {
        display: none;
    }
}

@media (max-width: 890px) {

    #hd-nav-partner {
        display: none;
    }

    #hd-bar.hd-bar-xl #hd-nav-top {
        max-width: 320px;
    }

    #hd-bar #hd-nav-top {
        max-width: 310px;
    }

    #hd-nav-top ul {
        padding: 0;
        margin: 0;
        margin-bottom: 20px;
        transform: translateX(0px);
    }

    #hd-nav-top>div>ul.hidden {
        transform: translateX(0px);
    }

    #hd-nav-top li {
        line-height: 30px;
    }
}



@media (max-width: 500px) {
    #hd-nav-top {
        display: none;
    }
}

/*Taille des Marges d'En têtes*/
section.content-header {
    padding-top: 80px;
    padding-bottom: 10px;
    position: relative;
    z-index: 1;
    text-shadow: 0 0 60px white;
}

#import section.content-header {
    padding-top: 130px;
    padding-bottom: 0;
}

#data section.content-header {
    padding-top: 50px;
    padding-bottom: 20px;
    display: flex;
    justify-content: flex-end;
    align-items: center;
    height: 164px;
    /* border-bottom: 2px solid #e9ecef; */
}


/* {
    padding-bottom: 0px;
    margin-bottom: -7px;
    color: #ffffff70;
} */

#hd.section-data .context-summary-container {
    display: none;
}

#hd.section-data #main-fields {
    opacity: 1;
    width: auto;
    pointer-events: all;
    user-select: all;
    flex-direction: row;
    margin: 0;
    flex-wrap: nowrap;
}

#hd.section-map #main-fields {
    pointer-events: all;
}

#hd.section-data #main-form {
    width: auto;
    top: 60px;
}

#hd.section-data #main-form,
#hd.section-data #main-fields>div {
    pointer-events: all !important;
    user-select: all !important;
    flex-wrap: nowrap;
    justify-content: flex-start;
}

#hd.section-data #main-fields>div {
    box-shadow: -4px 4px 0 rgba(0, 0, 0, 0.5);
}

#hd.section-data #main-form .context-target-buttons {
    margin-top: 0 !important;
}

fieldset#profile-fields,
fieldset#profile-fields>div {
    opacity: 0;
    pointer-events: none;
    user-select: none;
}

#hd.section-user fieldset#profile-fields,
#hd.section-user fieldset#profile-fields>div {
    opacity: 1;
    pointer-events: all;
    user-select: all;
}

/* Afficher le fieldset partout quand on est en mode profil temporaire */
body.temp-profile-active fieldset#profile-fields,
body.temp-profile-active fieldset#profile-fields>div {
    opacity: 1 !important;
    pointer-events: all !important;
    user-select: all !important;
}

.temp-profile-notice {
    animation: slideInRight 0.5s ease !important;
}

/* Animation for temporary profile notice */
@keyframes slideInRight {
    from {
        transform: translateX(100%);
        opacity: 0;
    }

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

@keyframes zoomRippleIn {
    0% {
        opacity: 0.7;
        transform: scale(1);
    }

    80% {
        opacity: 0.3;
        transform: scale(2.5);
    }

    100% {
        opacity: 0;
        transform: scale(3);
    }
}

@keyframes zoomRippleOut {
    0% {
        opacity: 0.7;
        transform: scale(3);
    }

    80% {
        opacity: 0.3;
        transform: scale(1.2);
    }

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

.ripple-in {
    animation: zoomRippleIn 0.6s ease-out forwards;
    background: rgba(66, 139, 202, 0.3);
    border: 2px solid rgba(66, 139, 202, 0.6);
}

.ripple-out {
    animation: zoomRippleOut 0.5s ease-in forwards;
    background: rgba(255, 100, 80, 0.2);
    border: 2px solid rgba(255, 100, 80, 0.5);
}


/* Modern Checkbox Style */

.leaflet-control-layers-selector[type="checkbox"] {
    opacity: 0;
    width: 1.2em;
    height: 1.2em;
    margin: 0;
    position: relative;
    z-index: 2;
    cursor: pointer;
}

.leaflet-control-layers-selector[type="checkbox"]+.custom-checkbox {
    display: inline-block;
    width: 1.2em;
    height: 1.2em;
    border: 2px solid var(--accent-color-focus);
    border-radius: 3px;
    /* background: #0a223a; */
    background: var(--dark-color-1);
    margin-right: 0.5em;
    vertical-align: middle;
    transition: all 0.2s ease;
    box-sizing: border-box;
    top: 0.1em;
    position: absolute;
    left: 0;
    right: 0;
    top: 0;
    bottom: 0;
}

.leaflet-control-layers-selector[type="checkbox"]:hover+.custom-checkbox,
.leaflet-control-layers-selector[type="checkbox"]:checked:hover+.custom-checkbox {
    border-color: rgb(188, 225, 255);
    border-radius: 4px;
    border-radius: 5px;
    outline: 1px solid rgb(188, 225, 255);
}

.leaflet-control-layers-selector[type="checkbox"]:checked+.custom-checkbox {
    outline: 1px solid var(--tertiary-color);
    outline-offset: 2px;
    background: var(--accent-color-focus);
    border-radius: 4px;
    color: var(--accent-color-focus);
}

.leaflet-control-layers-selector[type="checkbox"]:checked+.custom-checkbox::after {
    /*content: '\2714' ; /* ✔ =  */
    color: var(--primary-color);
    font-size: 1.5em;
    position: absolute;
    left: -0.12em;
    top: -0.25em;
    pointer-events: none;
    font-weight: bold;
    line-height: 20px;
    border-radius: 4px;
}

.leaflet-control-layers-selector[type="checkbox"]:focus+.custom-checkbox {
    box-shadow: 0 0 0 2px var(--accent-color-focus);
    border-color: var(--primary-color);
    border-radius: 4px;
}

.leaflet-control-layers-selector[type="checkbox"]:disabled+.custom-checkbox {
    background: #444;
    border-color: #888;
    cursor: not-allowed;
    border-radius: 1px;
}




/* Calculation icons - Priorité des calculs */
.date-calculations {
    display: flex;
    justify-content: space-between;
    align-items: center;
}

/* Calculation icons - Priorité des calculs */
.alteration .date-calculations {
    text-decoration: underline;
    flex: 1;
}

.calculation-icons {
    display: flex;
    gap: 0px;
    align-items: center;
    width: fit-content;
    border-radius: 10px;
    outline: 1px solid var(--accent-color);
    outline-offset: -1px;
    margin-right: 0px;
    margin-left: 10px;
    opacity: 0.9;
    transition: all .2s ease;
    background: rgba(255, 255, 255, 0.1);
}

.calculation-icons:hover {
    opacity: 1;
    background: var(--accent-color-clear);
    /* border-radius: 5px; */
    outline: 3px solid var(--accent-color-focus);
    width: fit-content;
}

.select2-results__options .calculation-icons {
    background: transparent;
    outline: none;
    margin-left: 30px;
}

.select2-results__options .calculation-icons:hover {
    background: rgba(255, 255, 255, 0.2);
    outline: none;
    margin-left: 30px;
}

.calculation-icons .calculation-icon-container {
    display: flex;
    justify-content: center;
    align-items: center;
    font-size: 12px;
    opacity: 0.9;
    padding: 2px 2px;
    outline-offset: -2px;
    transition: all .2s ease;
    border-radius: 0px;
    transform: scale(0.95);
    color: var(--primary-color);
    margin-bottom: 0px;
    position: relative;
    display: inline-block;
    transition: all 0.2s ease-in-out;
}

.calculation-icons .calculation-icon-container:hover {
    font-size: 12px;
    opacity: 0.9;
    padding: 2px;
    opacity: 1;
    border-radius: 5px;
    transform: scale(1.1);
}

.calculation-icon-container:hover {
    transform: translateY(-1px);
    background: rgba(255, 255, 255, 0.1);
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
}

.calculation-icons .calculation-icon-container:first-child {
    border-top-left-radius: 10px;
    border-bottom-left-radius: 10px;
    padding-left: 4px;
}

.calculation-icons .calculation-icon-container:first-child:hover {
    border-top-left-radius: 5px;
    border-bottom-left-radius: 5px;
}

.calculation-icons .calculation-icon-container:last-child {
    border-top-right-radius: 10px;
    border-bottom-right-radius: 10px;
    padding-right: 4px;
}

.calculation-icons .calculation-icon-container:last-child:hover {
    border-top-right-radius: 5px;
    border-bottom-right-radius: 5px;
}

/* Pastilles de statut des calculs pour les non-admins */
.calculation-status-dot {
    display: inline-block;
    width: 8px;
    height: 8px;
    border-radius: 50%;
    vertical-align: middle;
    transition: all 0.2s ease;
}

.calculation-status-dot:hover {
    transform: scale(1.2);
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);
    cursor: help;
}

.calculation-status-dot.red {
    background-color: var(--error-color);
    border: 1px solid var(--error-color);
}

.calculation-status-dot.orange {
    background-color: #fd7e14;
    border: 1px solid #fd7e14;
}

.calculation-status-dot.green {
    background-color: #28a745;
    border: 1px solid #28a745;
}

.calculation-status-dot.white {
    background-color: #ffffff;
    border: 1px solid #6c757d;
}

.calculation-icons .calculation-icon-container:only-child {
    border-radius: 0;
    padding: 2px;
}

/* Effets de hover sur les icônes de calcul */
.calculation-icon-container:hover .calculation-icon {
    transform: scale(1.1);
    filter: brightness(1.2);
    transition: all 0.2s ease;
}

.calculation-icon-container {
    cursor: help;
}

.custom-date-tooltip {
    position: absolute;
    z-index: 999999;
    background: #222;
    color: #fff;
    padding: 4px 10px;
    border-radius: 4px;
    font-size: 13px;
    pointer-events: none;
    white-space: pre-line;
    max-width: 300px;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.2);
    opacity: 0.95;
}

.custom-date-tooltip,
.filter-table-date-tooltip {
    position: absolute;
    z-index: 9999999 !important;
    background: #222;
    color: #fff;
    padding: 4px 10px;
    border-radius: 4px;
    font-size: 13px;
    pointer-events: none;
    white-space: pre-line;
    max-width: 300px;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.2);
    opacity: 0.95;
}


/* Ajout du label avant le tooltip */
.date-tooltip-label {
    position: absolute;
    top: -10px;
    left: 5px;
    width: auto;
    display: block;
    color: #fff;
    text-shadow: 0 1px 2px rgba(0, 0, 0, 0.5);
    font-size: 8px;
    font-weight: bold;
    margin-bottom: 4px;
    letter-spacing: 0.5px;
    white-space: pre-line;
}

.custom-date-tooltip-target,
.custom-date-tooltip-target-dashboard,
.filter-table-date-tooltip-target {
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
    gap: 5px;
    padding: 4px 8px;
    margin: 0;
    justify-content: space-between;
    font-family: var(--font-main);
    font-size: 11px;
}

.calculation-details-popup {
    font-size: 11px;
    font-family: var(--font-main);
    font-weight: 500;
    display: none;
    position: absolute;
    z-index: 1000;
    min-width: 280px;
    max-width: 350px;
    background: rgba(255, 255, 255, 0.98);
    border: 1px solid var(--accent-color-select);
    border-radius: 8px;
    box-shadow:
        0 4px 12px rgba(0, 0, 0, 0.15),
        0 2px 4px rgba(0, 0, 0, 0.1),
        2px 2px 0 var(--primary-color);
    padding: 12px 16px;
    backdrop-filter: blur(8px);
    transition: all 0.2s ease-in-out;
    color: var(--primary-color);
    line-height: 1.4;
}

/* Flèche par défaut (vers le haut) */
.calculation-details-popup::before {
    content: '';
    position: absolute;
    top: -6px;
    left: 12px;
    width: 0;
    height: 0;
    border-left: 6px solid transparent;
    border-right: 6px solid transparent;
    border-bottom: 6px solid var(--accent-color-select);
}

.calculation-details-popup::after {
    content: '';
    position: absolute;
    top: -5px;
    left: 12px;
    width: 0;
    height: 0;
    border-left: 6px solid transparent;
    border-right: 6px solid transparent;
    border-bottom: 6px solid rgba(255, 255, 255, 0.98);
}

/* Flèche en haut à droite (popup à gauche) */
.calculation-details-popup.popup-arrow-left::before {
    content: '';
    position: absolute;
    right: 12px;
    top: -6px;
    width: 0;
    height: 0;
    border-left: 6px solid transparent;
    border-right: 6px solid transparent;
    border-bottom: 6px solid var(--accent-color-select);
}

.calculation-details-popup.popup-arrow-left::after {
    content: '';
    position: absolute;
    right: 12px;
    top: -5px;
    width: 0;
    height: 0;
    border-left: 6px solid transparent;
    border-right: 6px solid transparent;
    border-bottom: 6px solid rgba(255, 255, 255, 0.98);
}

/* Flèche en haut à gauche (popup à droite) */
.calculation-details-popup.popup-arrow-right::before {
    content: '';
    position: absolute;
    left: 12px;
    top: -6px;
    width: 0;
    height: 0;
    border-left: 6px solid transparent;
    border-right: 6px solid transparent;
    border-bottom: 6px solid var(--accent-color-select);
}

.calculation-details-popup.popup-arrow-right::after {
    content: '';
    position: absolute;
    left: 12px;
    top: -5px;
    width: 0;
    height: 0;
    border-left: 6px solid transparent;
    border-right: 6px solid transparent;
    border-bottom: 6px solid rgba(255, 255, 255, 0.98);
}

.calculation-details-popup:hover {
    box-shadow:
        0 6px 16px rgba(0, 0, 0, 0.2),
        0 3px 6px rgba(0, 0, 0, 0.15),
        2px 2px 0 var(--primary-color);
    transform: translateY(-1px);
}

/* Animation d'apparition */
.calculation-details-popup.show {
    display: block;
    animation: popupFadeIn 0.2s ease-out;
}

@keyframes popupFadeIn {
    from {
        opacity: 0;
        transform: translateY(-8px) scale(0.95);
    }

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

.calculation-info {
    margin-bottom: 12px;
    font-size: 0.85em;
    color: var(--tertiary-color);
    line-height: 1.3;
    padding: 8px 0;
    border-bottom: 1px solid rgba(137, 173, 203, 0.2);
}

.calculation-table {
    width: 100%;
    border-collapse: collapse;
    font-size: 0.8em;
    margin-top: 8px;
    border-radius: 4px;
    overflow: hidden;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
}

.calculation-table th,
.calculation-table td {
    padding: 6px 8px;
    border: 1px solid rgba(137, 173, 203, 0.3);
    text-align: left;
}

.calculation-table th {
    background-color: var(--accent-color-clear);
    color: var(--primary-color);
    font-weight: 600;
    font-size: 0.85em;
}

.calculation-table td {
    background-color: rgba(255, 255, 255, 0.7);
    color: var(--tertiary-color);
}

.calculation-table tr:hover td {
    background-color: rgba(137, 173, 203, 0.1);
}

.calculation-table th.center,
.calculation-table td.center {
    text-align: center;
}


calculation-icon-container {
    cursor: pointer;
    padding: 4px;
    border-radius: 4px;
    transition: all 0.2s ease-in-out;
    position: relative;
    z-index: 2;
}


.calculation-label {
    font-size: 0.8em;
    font-weight: normal;
}

/* ==================
 * EXPORT MENU ANIMATION
 * ================== */

/* Styles spécifiques pour l'animation de l'onglet Export */
.export-menu-item {
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    transform-origin: top;
}

/* État masqué - rétraction vers le bas */
.export-menu-item.export-hidden {
    max-height: 0;
    opacity: 0;
    transform: scaleY(0);
    margin: 0;
    padding: 0;
    border: none;
    pointer-events: none;
}

/* Masquer complètement les onglets principaux cachés pour la réorganisation */
.mmr-ul>li.export-hidden {
    display: none !important;
    max-width: 0;
    width: 0;
    margin: 0;
    padding: 0;
    overflow: hidden;
}

/* État visible - expansion complète */
.export-menu-item.export-visible {
    max-height: 200px;
    /* Hauteur suffisante pour le contenu */
    opacity: 1;
    transform: scaleY(1);
    pointer-events: all;
}

/* Animation d'apparition */
@keyframes exportSlideDown {
    from {
        max-height: 0;
        opacity: 0;
        transform: scaleY(0);
    }

    to {
        max-height: 200px;
        opacity: 1;
        transform: scaleY(1);
    }
}

/* Animation de disparition */
@keyframes exportSlideUp {
    from {
        max-height: 200px;
        opacity: 1;
        transform: scaleY(1);
    }

    to {
        max-height: 0;
        opacity: 0;
        transform: scaleY(0);
    }
}

/* Application des animations */
.export-menu-item.export-visible {
    animation: exportSlideDown 0.3s cubic-bezier(0.4, 0, 0.2, 1) forwards;
}

.export-menu-item.export-hidden {
    animation: exportSlideUp 0.3s cubic-bezier(0.4, 0, 0.2, 1) forwards;
}

/* Préserver le style du sous-menu pendant l'animation */
.export-menu-item ul {
    transition: none;
    /* Désactiver les transitions du sous-menu */
}

.export-menu-item.export-hidden a,
.export-menu-item.export-hidden ul {
    visibility: hidden;
    pointer-events: none;
}

/* Message placeholder quand le menu MMR est vide */
.mmr-empty-state {
    color: var(--accent-color-focus);
    font-family: var(--font-title);
    opacity: 0.7;
    position: absolute;
    left: 0;
    transition: opacity 0.3s ease;
}

/* ====================================================
 * COLOR PALETTE PICKER
 * ==================================================== */

/* Conteneur principal de la palette de couleurs */
.color-palette-picker {
    position: fixed;
    z-index: 9999;
    background: white;
    border: 1px solid #ddd;
    border-radius: 8px;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
    padding: 12px;
    min-width: 240px;
    display: none;
    font-family: var(--font-main);
    max-width: 90vw;
    max-height: 80vh;
    overflow-y: auto;
}

/* Animation d'apparition */
.color-palette-picker.show {
    animation: colorPaletteFadeIn 0.2s ease-out;
}

@keyframes colorPaletteFadeIn {
    from {
        opacity: 0;
        transform: translateY(5px);
    }

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

/* Titres des sections */
.color-section-title {
    font-weight: bold;
    margin-bottom: 8px;
    color: #333;
    font-size: 13px;
    font-family: var(--font-title);
}

/* Grille des couleurs prédéfinies */
.color-preset-grid {
    display: flex;
    flex-wrap: wrap;
    gap: 4px;
    margin-bottom: 8px;
    justify-content: flex-start;
}

/* Boutons de couleur prédéfinie */
.color-preset-button {
    width: 32px;
    height: 32px;
    border: 2px solid #ddd;
    border-radius: 4px;
    background-color: transparent;
    cursor: pointer;
    transition: all 0.2s ease;
    position: relative;
    outline: none;
    flex-shrink: 0;
}

.color-preset-button:hover {
    transform: scale(1.1);
    border-color: #999;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.2);
}

.color-preset-button:active {
    transform: scale(0.95);
}

/* Indicateur de sélection */
.color-preset-button.selected::after {
    content: '✓';
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    color: white;
    font-weight: bold;
    font-size: 12px;
    text-shadow: 0 0 3px rgba(0, 0, 0, 0.8);
}

/* Section couleur personnalisée */
.color-custom-section {
    margin-bottom: 12px;
}

.color-custom-section .color-custom-input {
    width: 50px;
    height: 40px;
    border: 1px solid #ddd;
    border-radius: 6px;
    cursor: pointer;
    outline: none;
    transition: border-color 0.2s ease;
}

.color-custom-section .color-custom-input:hover {
    border-color: #999;
}

.color-custom-section .color-custom-input:focus {
    border-color: #2980b9;
    box-shadow: 0 0 0 2px rgba(41, 128, 185, 0.2);
}

/* Section input hexadécimal */
.color-hex-section {
    margin-bottom: 0;
}

.color-hex-input {
    flex: 1;
    padding: 8px 12px;
    border: 1px solid #ddd;
    border-radius: 4px;
    font-family: monospace;
    font-size: 12px;
    outline: none;
    transition: border-color 0.2s ease;
}

.color-hex-input:hover {
    border-color: #999;
}

.color-hex-input:focus {
    border-color: #27ae60;
    box-shadow: 0 0 0 2px rgba(39, 174, 96, 0.2);
}

.color-hex-input.error {
    border-color: #e74c3c;
    box-shadow: 0 0 0 2px rgba(231, 76, 60, 0.2);
}

/* Boutons d'action */
.color-apply-button,
.color-hex-apply-button {
    padding: 8px 16px;
    color: white;
    border: none;
    border-radius: 4px;
    cursor: pointer;
    font-size: 12px;
    font-weight: 500;
    transition: all 0.2s ease;
    outline: none;
}

.color-apply-button {
    background-color: #2980b9;
}

.color-apply-button:hover {
    background-color: #1f5f8b;
    transform: translateY(-1px);
}

.color-apply-button:active {
    transform: translateY(0);
}

.color-hex-apply-button {
    background-color: #27ae60;
}

.color-hex-apply-button:hover {
    background-color: #1e8449;
    transform: translateY(-1px);
}

.color-hex-apply-button:active {
    transform: translateY(0);
}

/* Conteneur des inputs personnalisés */
.color-custom-section>div,
.color-hex-section>div {
    display: flex;
    align-items: center;
    gap: 10px;
}

/* Styles pour l'input color dans les formulaires */
.color-picker-field-container {
    position: relative;
    display: flex;
    align-items: center;
    gap: 10px;
    width: 100%;
}

.color-picker-field-container input#MainColor {
    flex: 5;
}

.color-picker-field-container .color-custom-input {
    cursor: pointer;
    outline: none;
    appearance: none;
    background: none;
    flex: 1;
    padding: 0 !important;
}

.color-picker-field-container .color-custom-input:hover {
    outline: 2px solid white;
    outline-offset: -4px;
}

.color-picker-field-container .color-custom-input::-webkit-color-swatch-wrapper {
    padding: 0;
    border-radius: 3px;
    border: none;
}

.color-picker-field-container .color-custom-input::-webkit-color-swatch {
    border: none;
    border-radius: 3px;
}

.color-picker-field-container .color-custom-input::-moz-color-swatch {
    border: none;
    border-radius: 3px;
}

/* Séparateur */
.color-palette-picker hr {
    margin: 10px 0;
    border: none;
    border-top: 1px solid #eee;
}

/* Responsive */
@media (max-width: 768px) {
    .color-palette-picker {
        min-width: 200px;
        padding: 10px;
    }

    .color-preset-grid {
        gap: 3px;
    }

    .color-preset-button {
        width: 28px;
        height: 28px;
    }
}

/* ===== PICKER D'ICÔNES ===== */
.icon-picker-container {
    position: fixed;
    z-index: 9999;
    background: white;
    border: 1px solid #ddd;
    border-radius: 8px;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
    padding: 0;
    min-width: 300px;
    max-width: 90vw;
    max-height: 80vh;
    overflow: hidden;
    font-family: var(--font-main);
}

.icon-picker-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 12px 16px;
    border-bottom: 1px solid #eee;
    background: #f8f9fa;
}

.icon-picker-header h4 {
    margin: 0;
    font-size: 14px;
    font-weight: 500;
    color: #333;
}

.icon-picker-close {
    background: none;
    border: none;
    font-size: 18px;
    color: #666;
    cursor: pointer;
    padding: 4px;
    border-radius: 4px;
    transition: all 0.2s ease;
}

.icon-picker-close:hover {
    background: #e9ecef;
    color: #333;
}

.icon-picker-body {
    padding: 16px;
    max-height: 60vh;
    overflow-y: auto;
}

.icon-picker-search {
    margin-bottom: 16px;
}

.icon-search-input {
    width: 100%;
    padding: 8px 12px;
    border: 1px solid #ddd;
    border-radius: 4px;
    font-size: 14px;
    outline: none;
    transition: border-color 0.2s ease;
}

.icon-search-input:focus {
    border-color: #2980b9;
    box-shadow: 0 0 0 2px rgba(41, 128, 185, 0.2);
}

.icon-picker-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(40px, 1fr));
    gap: 2px;
    max-height: 200px;
    overflow-y: auto;
}

.icon-picker-item {
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 6px;
    border: 1px solid #eee;
    border-radius: 3px;
    cursor: pointer;
    transition: all 0.2s ease;
    background: white;
    height: 40px;
}

.icon-picker-item:hover {
    border-color: #2980b9;
    background: #f8f9ff;
    transform: translateY(-1px);
    box-shadow: 0 2px 8px rgba(41, 128, 185, 0.15);
}

.icon-picker-item i {
    font-size: 16px;
    color: #666;
    transition: color 0.2s ease;
}

.icon-picker-item:hover i {
    color: #2980b9;
}

.icon-picker-footer {
    padding: 16px;
    border-top: 1px solid #eee;
    background: #f8f9fa;
}

.icon-custom-input-container {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.icon-custom-input-container label {
    font-size: 14px;
    font-weight: 500;
    color: #333;
    margin: 0;
}

.icon-custom-input {
    width: 100%;
    padding: 8px 12px;
    border: 1px solid #ddd;
    border-radius: 4px;
    font-size: 14px;
    outline: none;
    transition: border-color 0.2s ease;
}

.icon-custom-input:focus {
    border-color: #2980b9;
    box-shadow: 0 0 0 2px rgba(41, 128, 185, 0.2);
}

/* Responsive */
@media (max-width: 768px) {
    .icon-picker-container {
        min-width: 280px;
        max-width: 95vw;
    }

    .icon-picker-grid {
        grid-template-columns: repeat(auto-fill, minmax(35px, 1fr));
        gap: 1px;
    }

    .icon-picker-item {
        padding: 4px;
        height: 35px;
    }

    .icon-picker-item i {
        font-size: 14px;
    }
}

/* ===== CHAMP ICON PICKER ===== */
.icon-picker-field-container {
    position: relative;
    display: flex;
    align-items: center;
    gap: 10px;
    width: 100%;
}

.icon-picker-field-container .icon-picker-input {
    flex: 1;
}

.icon-picker-button {
    width: 40px;
    height: 40px;
    border: 1px solid #ddd;
    border-radius: 4px;
    background: white;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.2s ease;
    outline: none;
}

.icon-picker-button:hover {
    border-color: #999;
    background: #f8f9fa;
}

.icon-picker-button:focus {
    border-color: #2980b9;
    box-shadow: 0 0 0 2px rgba(41, 128, 185, 0.2);
}

.icon-picker-button i {
    font-size: 16px;
    color: #666;
    transition: color 0.2s ease;
}

.icon-picker-button:hover i {
    color: #2980b9;
}