/***************************************
 CHIFFRES CLÉS - CSS PERSONNALISÉ
 * TABLE DES MATIÈRES :
 * 1. Variables de thème
 * 2. Styles de base
 *    - Typographie
 *    - Utilitaires
 *    - Bases de mise en page
 * 3. Composants de mise en page
 *    - Conteneur principal
 *    - Barre latérale
 *    - En-tête mobile
 *    - Affichage des filtres
 * 4. Composants UI
 *    - Boutons
 *    - Listes déroulantes
 *    - Info-bulles
 *    - Éléments de formulaire
 *    - Widget de partage de lien
 * 5. Graphiques & KPI
 *    - Cartes
 *    - KPI
 *    - Graphiques
 * 6. Design responsive
 *    - Grands écrans (max-width: 1600px)
 *    - Écrans moyens (max-width: 1300px)
 *    - Petits écrans (max-width: 1024px)
 *    - Très petits écrans (max-width: 425px)
 ***************************************/

/***************************************
 * 1. VARIABLES DE THÈME
 ***************************************/

/* Variables communes */
:root {
    --app-sidebar-width: clamp(272px, 18vw, 320px);
    /* Couleurs */
    --app-bg-white: #fff;
    --app-bg-red-extralight: #FDF1F0;
    --app-bg-red-light: #ee776e;
    --app-bg-red: #ea4b3c;
    --app-bg-red-dark: #a8131d;
    --app-bg-blue-light: #eff6f7;
    --app-bg-blue: #b0d2d9;
    --app-bg-blue-dark: #0f3250;
    --app-bg-green: #1DA813;
    --app-text-red-light: #ee776e;
    --app-text-red: #ea4b3c;
    --app-text-red-dark: #a8131d;
    --app-text-white: #fff;
    --app-text-blue: #b0d2d9;
    --app-text-blue-dark: #0f3250;
    --app-text-green: #1DA813;
    --app-text-muted: #d5d5d5;
    --app-text-muted-light: #b6b6b6;
    --app-border-light: #eff6f7;
    --app-border-extralight: #dddddd;
    --app-border-lighter: #dadada;


    /* Valeurs RVB pour les couleurs essentielles */
    --app-bg-red-light-rgb: 238, 119, 110, 0.3;
    --app-bg-blue-dark-rgb: 168, 19, 29, 0.3;
    --app-bg-red-rgb: 234, 75, 60;
    --app-bg-blue-rgb: 176, 210, 217;
    --app-text-blue-rgb: 176, 210, 217;
    --app-bg-light-rgb: 255, 255, 255;
    --app-text-white-rgb: 255, 255, 255;

    /* Spacing */
    --app-spacing-xs: 5px;
    --app-spacing-s: 8px;
    --app-spacing-sm: 10px;
    --app-spacing-md: 12px;
    --app-spacing-lg: 20px;
    --app-spacing-xl: 30px;
    --app-spacing-xxl: 40px;
    --app-spacing-sidebar-margin: 10px;
    --app-spacing-rem-m: 0.5rem;

    /* Typography */
    --app-font-size-xs: 0.65rem;
    --app-font-size-sm: 0.78rem;
    --app-font-size-base: 0.95rem;
    --app-font-size-md: 0.9rem;
    --app-font-size-lg: 1rem;
    --app-font-size-xl: 1.1rem;
    --app-font-size-xxl: 1.5rem;
    --app-font-size-xxxl: 2.5rem;
    --app-line-height-sm: 1;
    --app-letter-spacing-lg: 0.22rem;
    --app-letter-spacing-md: 0.16rem;
    --app-letter-spacing-sm: 0.1rem;
    --app-letter-spacing-xs: 0.2rem;

    /* Transitions */
    --app-transition-normal: 0.3s ease;
    --app-transition-fast: 0.2s ease-in-out;
    --app-transition-slow: 0.5s;

    /* Borders */
    --app-border-width: 1px;
    --app-border-style: solid;
    --app-border-radius-xl: 1rem;
    --app-border-radius-mobile: 1rem;

    /* Typography */
    --bs-font-sans-serif: "Open Sans", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol";
    --bs-body-font-family: var(--bs-font-sans-serif);
    --bs-body-font-size: 1rem;
    --bs-body-font-weight: 400;
    --bs-body-font-weight-extralight-bold: 500;
    --bs-body-font-weight-light-bold: 600;
    --bs-body-font-weight-bold: 700;
    --bs-body-font-weight-bolder: 800;
    --bs-body-font-weight-light: 300;
    --bs-body-font-style: normal;
    --bs-body-font-variant: normal;
    --bs-body-text-transform: none;
    --bs-body-letter-spacing: normal;
    --bs-body-line-height: 1.5;
    --bs-body-color: #212529;
    --bs-body-bg: #fcfcfc;

    /* Borders */
    --border-width: 1px;
    --bs-border-style: solid;
    --bs-border-color: #ccc;
    --bs-border-radius: 0.375rem;
    --bs-border-radius-sm: 0.25rem;
    --bs-border-radius-lg: 0.5rem;
    --bs-border-radius-xl: 1rem;
    --bs-border-radius-xxl: 2rem;
    --bs-border-radius-2xl: var(--bs-border-radius-xxl);
    --bs-border-radius-pill: 50rem;

    /* Shadows */
    --app-box-shadow: 0 0.5rem 2rem rgba(0, 0, 0, 0.45);
    --app-box-shadow-sm: 0 0.125rem 0.25rem rgba(0, 0, 0, 0.30);
    --app-box-shadow-m: 0 0.25rem 0.75rem rgba(0, 0, 0, 0.35);
    --app-box-shadow-md: 0 0.35rem 1rem rgba(0, 0, 0, 0.40);
    --app-box-shadow-lg: 0 2rem 4rem rgba(0, 0, 0, 0.60);
    --app-box-shadow-xl: 0 1.75rem 3rem rgba(0, 0, 0, 0.30);

    /* App-specific helpers */
    --app-scrollbar-thumb: rgba(0, 0, 0, 0.3);
    --app-scrollbar-track: rgba(0, 0, 0, 0.05);
    --app-box-shadow-075: 0 0.25rem 0.75rem rgba(0, 0, 0, 0.35);
    --app-box-shadow-tooltip: 0 0.25rem 0.5rem rgba(0, 0, 0, 0.3);

    /* Card */
    --app-card-bg: #f5f9fa;
    --app-card-transform : transform 0.15s ease, box-shadow 0.15s ease
}

/***************************************
 * 2. STYLES DE BASE
 ***************************************/

/* Typographie */
h1, h2, h3, h4, h5, h6 {
    font-family: 'Roboto Slab', serif;
    color: var(--app-text-blue-dark);
}

/* Mentions légales utility classes */
.mentions-svg {
    max-height: 260px;
    width: auto;
}
.mention-title {
    font-weight: var(--bs-body-font-weight-light-bold);
    color: var(--app-text-blue-dark);
}
.mention-entity {
    font-weight: var(--bs-body-font-weight-extralight-bold);
    color: var(--app-text-red);
}

h6 {
    color: var(--app-text-blue-dark) !important;
}

p {
    font-family: 'Montserrat', sans-serif;
    font-size: var(--app-font-size-base);
    color: var(--app-text-blue-dark);
}

.mb-4m {
  margin-bottom: 2.5rem !important;
}

.mb-6 {
  margin-bottom: 4.5rem !important;
}

/* Bases de mise en page */
.row {
    --bs-gutter-x: 1rem;
}

body {
    display: flex;
    margin: 0;
    padding: 0;
    font-family: 'Montserrat', sans-serif;
    position: relative;
    overflow-x: hidden;
    min-height: 100vh;
}

.align-icon-text {
    display: flex;
    align-items: center;
}

/***************************************
 * 3. COMPOSANTS DE MISE EN PAGE
 ***************************************/

/* CONTENEUR PRINCIPAL */
.main-container {
    display: flex;
    flex-direction: row;
    min-height: 100vh;
    width: 100%;
    z-index: 999;
}

.loading-card {
    display: block;
    min-height: 24rem;
    padding: 1.25rem;
    overflow: hidden;
    position: relative;
}

.loading-card::after {
    content: "";
    position: absolute;
    inset: 0;
    transform: translateX(-100%);
    background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.55), transparent);
    animation: loading-sweep 1.6s infinite;
}

.loading-card__line,
.loading-card__chart {
    background: linear-gradient(135deg, rgba(var(--app-bg-blue-rgb), 0.18), rgba(var(--app-bg-red-rgb), 0.08));
    border-radius: 999px;
}

.loading-card__line {
    height: 0.9rem;
    margin-bottom: 0.9rem;
}

.loading-card__line--title {
    width: 52%;
    height: 1.2rem;
}

.loading-card__line--meta {
    width: 68%;
}

.loading-card__chart {
    border-radius: 1rem;
    height: 18rem;
    margin-top: 1.1rem;
}

.dashboard-card {
    display: flex;
    flex-direction: column;
    gap: var(--app-spacing-md);
    min-width: 0;
    width: 100%;
    max-width: 100%;
}

.dashboard-card__header {
    width: 100%;
    min-width: 0;
    max-width: 100%;
    display: flex;
    flex-direction: column;
    gap: 0.55rem;
}

.dashboard-card__title-row {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    width: 100%;
    min-width: 0;
    max-width: 100%;
}

.dashboard-card__title-main {
    display: flex;
    align-items: center;
    justify-content: flex-start;
    gap: 0.65rem;
    flex: 1 1 auto;
    min-width: 0;
    max-width: 100%;
    overflow: hidden;
}

.dashboard-card__body {
    --dashboard-card-body-min-height: 18rem;
    position: relative;
    min-height: var(--dashboard-card-body-min-height);
}

.dashboard-card__body--map {
    --dashboard-card-body-min-height: 30rem;
}

.dashboard-card__state {
    min-height: var(--dashboard-card-body-min-height);
}

.dashboard-card__state--loaded {
    animation: dashboard-card-fade-in 0.24s ease-out;
}

.dashboard-card__state--empty,
.dashboard-card__state--error {
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 1.5rem;
    border: 1px dashed rgba(var(--app-bg-red-rgb), 0.2);
    border-radius: 1rem;
    background: rgba(var(--app-bg-light-rgb), 0.55);
    text-align: center;
}

.dashboard-card__state--empty p,
.dashboard-card__state--error p {
    margin: 0;
    font-weight: var(--bs-body-font-weight-light-bold);
}

.dashboard-card__state--error {
    border-color: rgba(var(--app-bg-red-rgb), 0.35);
    background: rgba(var(--app-bg-red-rgb), 0.06);
}

.dashboard-card__skeleton {
    position: relative;
    display: flex;
    flex-direction: column;
    gap: var(--app-spacing-md);
    min-height: var(--dashboard-card-body-min-height);
    padding-top: 0.35rem;
    overflow: hidden;
}

.dashboard-card__skeleton::after {
    content: "";
    position: absolute;
    inset: 0;
    transform: translateX(-100%);
    background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.55), transparent);
    animation: loading-sweep 1.6s infinite;
}

.dashboard-card__skeleton-chart,
.dashboard-card__skeleton-scale,
.dashboard-card__meta-line {
    background: linear-gradient(135deg, rgba(var(--app-bg-blue-rgb), 0.18), rgba(var(--app-bg-red-rgb), 0.08));
}

.dashboard-card__skeleton-chart {
    flex: 1 1 auto;
    min-height: calc(var(--dashboard-card-body-min-height) - 1rem);
    border-radius: 1.25rem;
}

.dashboard-card__skeleton--map .dashboard-card__skeleton-chart {
    min-height: calc(var(--dashboard-card-body-min-height) - 2.6rem);
}

.dashboard-card__skeleton-scale {
    height: 1rem;
    width: min(430px, calc(100% - 3rem));
    margin: 0 auto;
    border-radius: 999px;
}

.dashboard-card__meta-skeleton {
    display: flex;
    flex-direction: column;
    gap: 0.55rem;
    margin-top: 0.45rem;
    padding-right: 1rem;
}

.dashboard-card__meta-line {
    display: block;
    height: 0.78rem;
    border-radius: 999px;
}

.dashboard-card__meta-line--primary {
    width: min(22rem, 82%);
}

.dashboard-card__meta-line--secondary {
    width: min(16rem, 56%);
}

@keyframes loading-sweep {
    100% {
        transform: translateX(100%);
    }
}

@keyframes dashboard-card-fade-in {
    from {
        opacity: 0;
        transform: translateY(6px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

main {
    width: calc(100% - var(--app-sidebar-width));
    margin-left: var(--app-sidebar-width);
    padding: 1.5rem;
    background-color: var(--app-bg-blue-light);
    box-sizing: border-box;
    transition: width var(--app-transition-normal);
    min-height: 100vh;
    z-index: 999;
}

/* Sidebar */
.sidebar {
    position: fixed;
    top: 0;
    left: 0;
    bottom: 0;
    width: var(--app-sidebar-width);
    height: 100vh;
    background-color: var(--app-bg-blue-dark);
    border-radius: 0 var(--bs-border-radius-xl) var(--bs-border-radius-xl) 0 !important;
    padding: clamp(12px, 1vw, 18px);
    box-sizing: border-box;
    overflow-y: auto;
    overflow-x: hidden;
    z-index: 1000;
    /* Enable container queries inside the sidebar */
    container-type: inline-size;
    container-name: sidebar;
    box-shadow: var(--app-box-shadow);
}

.sidebar-layout {
    min-height: 100%;
    display: flex;
    flex-direction: column;
    gap: clamp(12px, 1vw, 18px);
}

.sidebar-main {
    display: flex;
    flex-direction: column;
    gap: clamp(10px, 0.9vw, 16px);
    min-height: 0;
}

.sidebar-bottom {
    margin-top: auto;
    display: flex;
    flex-direction: column;
    gap: clamp(14px, 1vw, 20px);
}

.sidebar::after {
    content: '';
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    width: var(--app-border-width);
    background: linear-gradient(to bottom, transparent, var(--app-bg-blue), var(--app-bg-blue), transparent);
    border-radius: 0 var(--bs-border-radius-xl) var(--bs-border-radius-xl) 0 !important;
    z-index: 1003;
}

/*.sidebar-separator {*/
/*    border: none;*/
/*    height: var(--app-border-width);*/
/*    background: linear-gradient(to right, transparent, var(--app-bg-blue), var(--app-bg-blue), transparent);*/
/*    margin-top: var(--app-spacing-lg);*/
/*    margin-bottom: var(--app-spacing-md);*/
/*}*/

.sidebar-header {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    text-align: center;
    margin-bottom: var(--app-spacing-lg);
    transition: opacity var(--app-transition-normal);
}

.sidebar-header img {
    width: min(100%, 230px);
    height: auto;
}

.sidebar-header.hidden {
    display: none;
}

.sidebar-header h3 {
    font-size: var(--app-font-size-xxl);
    margin: 0;
}

.navigation-title {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    text-align: center;
    margin-bottom: -2rem;
    padding: 10px 0;
}

.navigation-title.hidden {
    display: none;
}

.sidebar-nav ul {
    list-style-type: none;
    padding: 0;
    margin: 0;
}

.sidebar-nav,
.sidebar-section {
    --sidebar-inline-padding: clamp(8px, 0.9vw, 12px);
    --sidebar-icon-column-width: 1.4rem;
}

.sidebar-nav li {
    margin-bottom: clamp(2px, 0.35vw, 6px);
}

.sidebar-nav a {
    text-decoration: none;
    font-size: clamp(0.82rem, 0.72vw, 0.95rem);
    font-weight: 600;
    color: var(--app-text-white);
    display: flex;
    padding: clamp(5px, 0.5vw, 8px) clamp(8px, 0.9vw, 12px);
    align-items: center;
    border-radius: var(--bs-border-radius-lg);
    transition: var(--app-transition-normal);
    line-height: 1.2;
}

.sidebar-nav a:hover,
.sidebar-nav a.active {
    background-color: var(--app-bg-blue);
    box-shadow: var(--app-box-shadow-md);
    color: var(--app-text-blue-dark);
}

.sidebar-nav a i {
    text-align: center;
    margin-right: clamp(6px, 0.9vw, 12px);
}

.sidebar-nav--pages .sidebar-nav__list {
    display: flex;
    flex-direction: column;
    gap: clamp(2px, 0.35vw, 6px);
}

.sidebar-nav--pages .sidebar-nav__link {
    display: grid;
    grid-template-columns: var(--sidebar-icon-column-width) minmax(0, 1fr);
    align-items: center;
    gap: 0.75rem;
    padding-inline: var(--sidebar-inline-padding);
}

.sidebar-nav__icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: var(--sidebar-icon-column-width);
    min-width: var(--sidebar-icon-column-width);
}

.sidebar-nav--pages .sidebar-nav__link i {
    margin-right: 0;
    padding: 0;
}

.sidebar-nav__label {
    min-width: 0;
    line-height: 1.15;
}

.sidebar-section {
    display: grid;
    grid-template-columns: var(--sidebar-icon-column-width) minmax(0, 1fr);
    align-items: center;
    gap: clamp(8px, 0.8vw, 14px);
    margin-bottom: clamp(6px, 0.5vw, 8px);
    padding-inline: var(--sidebar-inline-padding);
}

.sidebar-section i {
    font-size: clamp(0.7rem, 0.9vw, 1rem);
    color: var(--app-text-blue);
    margin-bottom: 0;
    margin-right: 0;
    width: var(--sidebar-icon-column-width);
    min-width: var(--sidebar-icon-column-width);
    justify-self: center;
    text-align: center;
}

.sidebar-section-title {
    font-size: clamp(0.72rem, 0.85vw, 0.95rem);
    font-weight: bold;
    color: var(--app-text-blue);
    text-transform: uppercase;
    letter-spacing: var(--app-letter-spacing-lg);
    min-width: 0;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.sidebar-block {
    padding-bottom: clamp(10px, 0.8vw, 14px);
    margin-bottom: 0;
    border-bottom: 1px solid rgba(176, 210, 217, 0.25);
}

.sidebar-block:last-of-type {
    border-bottom: none;
    padding-bottom: 0;
}

.sidebar-filter-group + .sidebar-filter-group {
    margin-top: 0.7rem;
}

.sidebar-filters,
.reset-filters,
.apply-filters {
    font-size: clamp(0.45rem, 0.55vw, 0.65rem);
    color: var(--app-text-white);
    text-align: left;
}

.sidebar-filters:hover,
.sidebar-filters:active {
    background-color: var(--app-bg-blue);
    color: var(--app-text-white);
}

.reset-filters:hover,
.reset-filters:active {
    background-color: var(--app-bg-red-dark);
    color: var(--app-text-white);
}

.apply-filters:hover,
.apply-filters:active {
    background-color:transparent;
    color: var(--app-text-white);
}

.sidebar-footer {
    margin-top: 0;
    margin-left: 0;
    padding-top: 0.75rem;
    font-size: clamp(0.6rem, 0.7vw, 0.8rem);
    color: var(--app-text-muted);
    text-align: center;
    border-top: 1px solid rgba(176, 210, 217, 0.22);
}

.sidebar-footer img {
    margin-top: 0.2rem;
    width: clamp(72px, 6vw, 132px);
    height: auto;
}

.sidebar-footer p {
    margin: 0;
    line-height: var(--app-line-height-sm);
}

.sidebar-version {
    margin-top: 0.15rem;
    font-size: 0.82rem;
    letter-spacing: 0.04em;
    color: var(--app-text-white) !important;
    opacity: 0.98;
}

.sidebar-toggle {
    display: none;
    position: fixed;
    top: var(--app-spacing-sm);
    left: var(--app-spacing-sm);
    z-index: 1001;
    background-color: var(--app-bg-blue);
    color: var(--app-text-white);
    border: none;
    border-radius: var(--bs-border-radius-lg);
    padding: var(--app-spacing-xs) var(--app-spacing-sm);
    cursor: pointer;
}

#territory-dropdown .dropdown-menu.custom-dropdown,
#territory-dropdown .dropdown-menu.show.custom-dropdown,
#activity-dropdown .dropdown-menu.custom-dropdown,
#activity-dropdown .dropdown-menu.show.custom-dropdown {
  max-height: 60vh !important;
  overflow-y: auto !important;   /
  overflow-x: hidden !important;
  overscroll-behavior: contain;
  scrollbar-width: thin;
  scrollbar-color: rgba(var(--app-bg-blue-rgb), 0.4) transparent;
  z-index: 1005;
}
#territory-dropdown .submenu.collapse,
#territory-dropdown .submenu.collapse.show,
#activity-dropdown .submenu.collapse,
#activity-dropdown .submenu.collapse.show {
  max-height: 40vh !important;   /* sub-list of départements */
  overflow-y: auto !important;
  overflow-x: hidden !important; /* hide horizontal scrollbar */
  overscroll-behavior: contain;
  scrollbar-width: thin;         /* Firefox */
  scrollbar-color: rgba(var(--app-bg-blue-rgb), 0.4) transparent; /* Firefox */
  /*background: var(--app-bg-blue-light);*/
  z-index: 1005;
}
/* WebKit (Chrome/Edge/Safari) custom scrollbar styling */
#territory-dropdown .dropdown-menu.custom-dropdown::-webkit-scrollbar,
#territory-dropdown .submenu.collapse::-webkit-scrollbar,
#activity-dropdown .dropdown-menu.custom-dropdown::-webkit-scrollbar,
#activity-dropdown .submenu.collapse::-webkit-scrollbar {
  background: var(--app-bg-blue);
  width: 8px;
}
#territory-dropdown .dropdown-menu.custom-dropdown::-webkit-scrollbar-track,
#territory-dropdown .submenu.collapse::-webkit-scrollbar-track,
#activity-dropdown .dropdown-menu.custom-dropdown::-webkit-scrollbar-track,
#activity-dropdown .submenu.collapse::-webkit-scrollbar-track {
  background: var(--app-scrollbar-track);
  border-radius: 4px;
}
#territory-dropdown .dropdown-menu.custom-dropdown::-webkit-scrollbar-thumb,
#territory-dropdown .submenu.collapse::-webkit-scrollbar-thumb,
#activity-dropdown .dropdown-menu.custom-dropdown::-webkit-scrollbar-thumb,
#activity-dropdown .submenu.collapse::-webkit-scrollbar-thumb {
  background: var(--app-scrollbar-thumb);
  border-radius: 4px;
}

/* Sidebar caret (chevron) color override to use Bootstrap primary */
.sidebar .dropdown-toggle::after {
    border-top-color: var(--app-text-white) !important;
}
/* Handle dropup variant if used inside the sidebar */
.sidebar .dropup .dropdown-toggle::after {
    border-bottom-color: var(--app-text-white) !important;
}
/* Handle end/start directional variants just in case */
.sidebar .dropend .dropdown-toggle::after {
    border-left-color: var(--app-text-white) !important;
}
.sidebar .dropstart .dropdown-toggle::before {
    border-right-color: var(--app-text-white) !important;
}


/* Align chevrons (carets) to the right in sidebar dropdowns while keeping text left */
/* Top-level sidebar dropdown buttons */
.sidebar .btn-dropdown.dropdown-toggle {
    display: flex;
    align-items: center;
    justify-content: flex-start; /* text stays on the left */
    width: 100%;
}
/* Push the caret to the far right */
.sidebar .btn-dropdown.dropdown-toggle::after {
    margin-left: auto;
}

/* Nested dropdown items acting as toggles inside the custom dropdown */
.sidebar .custom-dropdown .dropdown-item.dropdown-toggle {
    display: flex;
    align-items: center;
    justify-content: flex-start; /* keep label on the left */
}
.sidebar .custom-dropdown .dropdown-item.dropdown-toggle::after {
    margin-left: auto;
}

/* En-tête mobile */
.mobile-header {
    display: none;
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    background-color: var(--app-bg-blue-dark);
    padding: var(--app-spacing-xs) var(--app-spacing-md);
    z-index: 1002;
    align-items: center;
    justify-content: flex-start;
    height: 50px;
    border-radius: 0 0 var(--app-border-radius-mobile) var(--app-border-radius-mobile);
    box-sizing: border-box;
}

.mobile-logo-title {
    display: flex;
    align-items: center;
    margin-left: var(--app-spacing-md);
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
}

.mobile-logo {
    max-height: 30px;
    margin-right: var(--app-spacing-sm);
}

.mobile-logo-title h3 {
    font-size: var(--app-font-size-xl);
    margin-left: var(--app-spacing-xs);
    margin-top: var(--app-spacing-xs);
    color: var(--app-text-blue-dark);
    font-weight: 600;
}

/* Affichage des filtres */
.filters-display {
    margin-top: var(--app-spacing-xs);
    margin-bottom: 0;
    display: flex;
    flex-wrap: wrap;
    gap: var(--app-spacing-xs);
    min-height: 0;
    transition: min-height var(--app-transition-fast);
}

.filters-display:empty {
    display: none;
}

/* Badge de filtre individuel */
.filter-badge {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 4px 8px;
    background-color: var(--app-bg-blue);
    color: var(--app-text-blue-dark);
    border-radius: var(--bs-border-radius);
    font-size: var(--app-font-size-sm);
    font-weight: 600;
    box-shadow: 0 0.125rem 0.25rem rgba(0, 0, 0, 0.2);
    transition: all var(--app-transition-fast);
    max-width: 100%;
}

.filter-badge:hover {
    background-color: var(--app-bg-blue-dark);
    color: var(--app-text-blue);
    box-shadow: 0 0.25rem 0.5rem rgba(0, 0, 0, 0.3);
    transform: translateY(-1px);
}

.sidebar-filter-actions {
    display: grid;
    grid-template-columns: 1fr;
    gap: 0.5rem;
    margin-top: 0.85rem;
}

#reset-all-filters,
#apply-filters {
    opacity: 0.4;
    pointer-events: none;
    transition: opacity var(--app-transition-fast), transform var(--app-transition-fast);
}

#reset-all-filters.active,
#apply-filters.active {
    opacity: 1;
    pointer-events: all;
}

.sidebar-support-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 0.7rem;
    align-items: start;
    margin-bottom: 0.35rem;
}

.sidebar-support-item {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.5rem;
    text-align: center;
}

.sidebar-support-item .btn-custom {
    width: 100%;
    padding: clamp(6px, 0.6vw, 10px);
}

.sidebar-support-label {
    font-size: 0.68rem;
    line-height: 1.15;
    color: var(--app-text-blue);
    max-width: 100%;
}

/* Texte du badge (avec ellipsis si trop long) */
.filter-badge-text {
    flex: 1;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

/* Icône de suppression */
.filter-badge-remove {
    cursor: pointer;
    color: var(--app-text-blue-dark);
    font-size: var(--app-font-size-xs);
    opacity: 0.7;
    transition: opacity var(--app-transition-fast);
    flex-shrink: 0;
}

.filter-badge-remove:hover {
    opacity: 1;
    transform: scale(1.2);
}

/* État du bouton de réinitialisation */
/***************************************
 * 4. COMPOSANTS UI
 ***************************************/

/* Boutons */

/* Styles de base partagés */
.fa-rotate-right,
.fa-check :before{
  border: none;
  color: var(--app-text-white);
  content: "\f2f9";
}

.fa-rotate-right{
    align-items: center;
    justify-content: center;
}

.btn-check:checked + .btn,
.btn.active,
.btn.show,
.btn:first-child:active,
:not(.btn-check) + .btn:active {
    color: var(--app-text-white);
    background-color: var(--app-bg-blue-dark);
    border-color: transparent ;
}

.btn.active {
    border: none;
    color: var(--app-text-white);
    background-color: var(--app-bg-red-light);
}

/* btn de base inspirée de Bootstrap */
.btn-custom {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background-color: var(--app-bg-blue-dark);
    color: var(--app-text-white);
    padding: clamp(6px, 0.6vw, 12px);
    border: none;
    border-radius: var(--bs-border-radius-lg);
    cursor: pointer;
    transition: background-color var(--app-transition-slow),
                color var(--app-transition-slow),
                transform var(--app-transition-slow),
                box-shadow var(--app-transition-slow);
    max-width: none;
    min-height: auto;
    box-shadow: var(--app-box-shadow-sm);
}

/* Variante compacte pour petits boutons */
.btn-custom-sm {
    padding: 4px 8px;
    font-size: var(--app-font-size-sm);
}


/* États identiques pour les deux boutons */
.btn-custom:hover,
.btn-custom:active,
.btn-custom[aria-expanded="true"],
.dropdown.show > .btn-custom.dropdown-toggle,
.btn-custom.active {
    background-color: var(--app-bg-blue);
    color: var(--app-text-blue-dark);
    box-shadow: var(--app-box-shadow-md);
    transform: scale(1.2);
}

.btn-custom-no-transform:hover{
    transform: none;
}

/* État de succès personnalisé pour les boutons (utilisé après copie du lien) */
.btn-custom-success {
    background-color: var(--bs-success); /* Succès (vert) */
    color: var(--app-text-white);
    border: none;
    box-shadow: var(--app-box-shadow-md);
}

/* Texte de succès personnalisé (évite .text-success Bootstrap) */
.text-success-custom {
    color: var(--bs-success);
}

/* Bouton de réinitialisation des filtres */
.btn-custom-reset,
.btn-custom-apply {
  border: none;
  color: var(--app-text-white);
  font-size: 0.78rem;
  font-weight: 600;
  gap: var(--app-spacing-sm);
  justify-content: center;
  width: 100%;
  min-height: 2.45rem;
  border-radius: var(--bs-border-radius-lg);
  padding: 0.55rem 0.8rem;
}

.btn-custom-reset:hover,
.btn-custom-reset:active,
.btn-custom-reset:focus,
.btn-custom-reset[aria-expanded="true"],
.dropdown.show > .btn-custom-reset.dropdown-toggle{
  border : none;
  background-color: var(--app-bg-red-dark);
  color: var(--app-text-white);
  box-shadow: 0 0.25rem 0.75rem rgba(0, 0, 0, 0.35);
  transform: none;
}
/*.btn-custom-reset.active{*/
/*  border : none;*/
/*  background-color: var(--app-bg-red-dark);*/
/*  color: var(--app-text-white);*/
/*  box-shadow: 0 0.25rem 0.75rem rgba(0, 0, 0, 0.35);*/
/*  transform: none;*/
/*}*/

.btn-custom-apply:hover,
.btn-custom-apply:focus,
.btn-custom-apply:active{
  border : none;
  background-color: var(--app-bg-green);
  color: var(--app-text-white);
  box-shadow: 0 0.25rem 1rem rgba(0, 0, 0, 0.25);
}
/*.btn-custom-apply.active{*/
/*  border : none;*/
/*  background-color: var(--app-bg-green);*/
/*  color: var(--app-text-white);*/
/*  box-shadow: 0 0.25rem 1rem rgba(0, 0, 0, 0.25);*/
/*}*/

/* Bouton de type dropdown */
.btn-dropdown {
    font-size: clamp(0.82rem, 0.72vw, 0.95rem);
    font-weight: 600;
    display: inline-flex;
    align-items: center;
    justify-content: left;
    background-color: var(--app-bg-blue-dark);
    color: var(--app-text-white);
    padding: clamp(7px, 0.7vw, 10px);
    border-width: 0 0 2px 0;  /* top right bottom left */
    border-style: solid;
    border-color: var(--app-border-light);
    border-radius: var(--bs-border-radius-lg);
    width: 100%;
    max-width: 100%;
    box-shadow: var(--app-box-shadow-075);
}

.sidebar .btn-dropdown:hover,
.sidebar .btn-dropdown:active,
.sidebar .btn-dropdown[aria-expanded="true"]:not(:hover),
.sidebar .dropdown.show > .btn-dropdown.dropdown-toggle:not(:hover) {
  background-color: var(--app-bg-blue);
  color: var(--app-text-blue-dark);
}

/* Listes déroulantes */
.dropdown-menu.custom-dropdown {
    box-sizing: border-box;
    outline: none;
    min-width: min(100%, 360px);
    max-width: 100%;
    width: 100%;
    font-size: clamp(0.85rem, 0.9vw, 1rem);
    background-color: var(--app-bg-blue-light);
    color: var(--app-text-blue-dark);
    border-radius: var(--bs-border-radius);
    border: none;
    padding: var(--app-spacing-sm) 0;
    text-align: left;
}

.dropdown-menu.custom-dropdown .dropdown-item {
    outline: none;
    font-size: var(--app-font-size-base);
    font-weight: 500;
    padding: var(--app-spacing-xs) var(--app-spacing-lg);
    color: var(--app-text-blue-dark);
    border: none;
    background-color: var(--app-bg-blue-light);
    border-radius: var(--bs-border-radius);
    width: auto;
    transition: background-color var(--app-transition-fast), color var(--app-transition-fast);
}

.dropdown-menu.custom-dropdown .dropdown-item:hover,
.dropdown-menu.custom-dropdown .dropdown-item.active {
    background-color: var(--app-bg-blue);
    color: var(--app-text-white);
}

.dropdown-menu.custom-dropdown .dropdown-divider {
    background-color: var(--app-bg-blue-light);
}


/* Tooltip personnalisé pour les régions */
a.has-tooltip {
    position: relative;
    cursor: help;
}

/* Bulle du tooltip */
a.has-tooltip::before {
    content: attr(data-tooltip);
    position: absolute;
    bottom: 100%;
    left: 50%;
    transform: translateX(-50%);
    margin-bottom: 8px;
    padding: 8px 12px;

    /* Style visuel */
    background-color: var(--app-bg-blue);
    color: var(--app-text-blue-dark);
    font-size: var(--app-font-size-sm);
    font-weight: 600;
    border-radius: var(--bs-border-radius);
    box-shadow: var(--app-box-shadow-tooltip);
    white-space: nowrap;

    /* Cache par défaut */
    opacity: 0;
    visibility: hidden;
    pointer-events: none;

    /* Animation */
    transition: opacity var(--app-transition-fast),
                visibility var(--app-transition-fast),
                transform var(--app-transition-fast);

    /* Z-index pour passer au-dessus */
    z-index: 1030;
}

/* Flèche du tooltip */
a.has-tooltip::after {
    content: '';
    position: absolute;
    bottom: 100%;
    left: 50%;
    transform: translateX(-50%);
    margin-bottom: 2px;

    /* Triangle */
    border: 6px solid transparent;
    border-top-color: var(--app-bg-blue);

    /* Cache par défaut */
    opacity: 0;
    visibility: hidden;

    /* Animation */
    transition: opacity var(--app-transition-fast),
                visibility var(--app-transition-fast);

    z-index: 1030;
}

/* Affichage au survol */
a.has-tooltip:hover::before,
a.has-tooltip:hover::after {
    opacity: 1;
    visibility: visible;
}

a.has-tooltip:hover::before {
    transform: translateX(-50%) translateY(-5px);
}

/* Info-bulles */
.popover {
    background-color: var(--app-bg-blue-light);
    --bs-popover-arrow-border: var(--app-bg-blue);
    --bs-popover-bg: var(--app-bg-blue);
    color: var(--app-text-white);
    max-width: 450px;
    width: 100%;
    border: none;
    border-radius: var(--bs-border-radius-lg);
    box-shadow: var(--bs-box-shadow-lg);
}

.popover-source {
    max-width: 1000px;
    width: 100%;
}

.popover-header {
    background-color: var(--app-bg-blue-dark);
    color: var(--app-text-blue-dark);
    font-size: var(--app-font-size-md);
}

.popover-body {
    font-size: var(--app-font-size-md);
    color: var(--app-text-blue-dark);
}

/* Éléments de formulaire */
.form-check .form-check-input {
    --bs-form-check-bg: var(--app-bg-blue);
    color: var(--app-bg-blue);
    background-color: var(--app-bg-blue-light);
}

.form-check-input:checked {
    background-color: var(--app-bg-blue);
    border-color: var(--app-bg-blue);
}

.form-check-label {
    font-size: var(--app-font-size-base);
    font-weight: 600;
    color: var(--app-text-blue-dark);
}

/* Widget de partage de lien */
.share-link-container {
    margin-top: var(--app-spacing-sm);
}

.share-link-container .input-group {
    display: flex;
    flex-wrap: nowrap;
}

.share-link-container .form-control {
    font-size: var(--app-font-size-base);
    background-color: var(--app-text-white);
    border: var(--app-border-width) var(--app-border-style) var(--app-border-light);
    border-radius: var(--bs-border-radius) 0 0 var(--bs-border-radius);
}

.share-link-container .btn-custom {
    background-color: var(--app-bg-blue);
    color: var(--app-text-white);
    border: none;
    border-radius: 0 var(--bs-border-radius) var(--bs-border-radius) 0;
    padding: calc(var(--app-spacing-xs) / 2) var(--app-spacing-xs);
}

.share-link-container .btn-custom:hover {
    background-color: var(--app-bg-blue-dark);
}

/* Indication de texte pour la zone de partage */
.share-link-hint {
    color: var(--app-text-muted-light);
    font-size: var(--app-font-size-base);
    margin-top: var(--app-spacing-xs);
    display: block;
}

.sidebar-nav a:hover,
.sidebar-nav a.active,
.btn-dropdown:hover,
.sidebar-toggle,
.popover-header,
.share-link-container .btn,
.dropdown-menu.custom-dropdown .dropdown-item:hover,
.dropdown-menu.custom-dropdown .dropdown-item.active {
  background-color: var(--app-bg-blue);
}

/***************************************
 * 5. GRAPHIQUES & KPI
 ***************************************/

/*Card*/
.card {
    background-color: var(--app-card-bg) !important;
    font-size: var(--app-font-size-xxl);
    font-weight: 900;
    text-align: center;
    color: var(--app-text-blue-dark);
    padding: 12px;
    border: none;
    border-radius: var(--bs-border-radius-lg);
    box-shadow: var(--bs-box-shadow-sm);
    width: 100%;
    display: block;
}

.chart-card,
.kpi-card {
    margin: 0;
}

.card-kpi {
    background-color: var(--app-bg-blue) !important;
    font-size: var(--app-font-size-xxl);
    font-weight: 900;
    text-align: center;
    color: var(--app-text-blue-dark);
    padding: 16px 18px;
    border: none;
    border-radius: var(--bs-border-radius-lg);
    box-shadow: var(--bs-box-shadow-sm);
    width: 100%;
    display: block;
}

/* KPI */
.number-kpi{
    font-size: var(--app-font-size-xxxl);
    font-weight: 900;
    color: var(--app-text-blue-dark);
    text-align: left;
}

.body-kpi{
    font-size: var(--app-font-size-lg);
    font-weight: var(--bs-body-font-weight-light-bold);
    margin-top: var(--app-spacing-sm);
    text-align: left;
    flex: 1 1 auto;
    min-width: 0;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

/* CHARTS */
.chart-shell {
    width: 100%;
    max-height: none;
    height: auto;
    margin: auto;
    overflow: visible;
    padding: 0.25rem 0.2rem 0.65rem;
}

.chart-frame,
.chart {
    width: 100%;
    height: auto;
    overflow: visible;
}

.chart-frame > div,
.chart-frame .js-plotly-plot,
.chart-frame .plot-container,
.chart-frame .svg-container,
.chart-frame .main-svg {
    max-width: 100%;
    overflow: visible !important;
}

.chart-legend-text-spacing{
     letter-spacing: 2px;
    }

.chart-title {
    display: block;
    color: var(--app-text-blue-dark);
    flex: 1 1 auto;
    min-width: 0;
    width: 100%;
    max-width: 100%;
    margin-left: 0;
    font-size: clamp(1.02rem, 0.94rem + 0.45vw, 1.42rem);
    line-height: 1.12;
    margin: 0;
    text-align: left;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.chart-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex: 0 0 auto;
    width: auto;
    min-width: auto;
    font-size: var(--app-font-size-lg);
    color: var(--app-text-blue-dark);
}

.chart-icon i {
    flex: 0 0 auto;
    line-height: 1.1;
}

.chart-icon-cog {
    text-align: center;
}

.chart-icon-select {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    align-self: center;
    flex: 0 0 auto;
    flex-shrink: 0;
    margin-left: auto;
    border: 0;
    background: transparent;
    padding: 0;
    width: 2rem;
    min-width: 2rem;
    min-height: 2rem;
}

.chart-sample-line,
.chart-alert,
.chart-alert p {
    min-width: 0;
    max-width: 100%;
}

.chart-sample-line p,
.chart-alert p {
    overflow-wrap: anywhere;
}

.chart-icon-select i {
    color: var(--app-text-blue-dark);
    font-size: var(--app-font-size-base);
    transition: var(--app-transition-normal);
    margin-bottom: 0;
    pointer-events: none;
}


.chart-icon-select i:hover {
    color: var(--app-bg-red-light);
    transform: scale(1.4);
    box-shadow: var(--bs-box-shadow-sm);
    cursor: pointer;
}

.chart-icon-select:hover i,
.chart-icon-select:focus-visible i {
    color: var(--app-bg-red-light);
    transform: scale(1.4);
}

.chart-icon-select:focus-visible {
    outline: 2px solid var(--app-bg-red-light);
    outline-offset: 2px;
    border-radius: 999px;
}

.map-color-scale {
    width: min(430px, calc(100% - 3rem));
    margin: 0.9rem auto 0;
    color: var(--app-text-blue-dark);
}

.map-color-scale__body {
    display: flex;
    align-items: flex-start;
    justify-content: center;
    gap: 0.85rem;
}

.map-color-scale__title {
    flex: 0 0 auto;
    font-size: 0.95rem;
    font-weight: 500;
    line-height: 1;
    padding-top: 0.15rem;
}

.map-color-scale__legend {
    flex: 1 1 18rem;
    min-width: 12rem;
    max-width: 22rem;
}

.map-color-scale__bar {
    width: 100%;
    height: 14px;
    border-radius: 0;
    min-height: 14px;
    background-color: var(--map-scale-color, #0F3250);
    background-image: var(--map-scale-gradient);
    box-shadow: inset 0 0 0 1px rgba(15, 50, 80, 0.08);
}

.map-color-scale__ticks {
    display: grid;
    grid-template-columns: 1fr 1fr 1fr;
    align-items: center;
    gap: 0.75rem;
    margin-top: 0.35rem;
    font-size: 0.82rem;
    font-weight: 600;
    line-height: 1;
    letter-spacing: 0.01em;
}

.map-color-scale__tick {
    white-space: nowrap;
}

.map-color-scale__tick--start {
    text-align: left;
}

.map-color-scale__tick--center {
    text-align: center;
}

.map-color-scale__tick--end {
    text-align: right;
}

@media (max-width: 640px) {
    .map-color-scale {
        width: min(100%, calc(100% - 1rem));
    }

    .map-color-scale__body {
        align-items: stretch;
        flex-direction: column;
        gap: 0.6rem;
    }

    .map-color-scale__title {
        font-size: 0.85rem;
        padding-top: 0;
    }

    .map-color-scale__ticks {
        font-size: 0.72rem;
    }
}


.success-icon {
    margin: var(--app-spacing-sm);
    color: var(--app-bg-green);
    font-size: 4rem;
}


.chart-icon-kpi {
    font-size: inherit;
    width: auto;
    height: auto;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    text-align: center;
    color: var(--app-text-blue-dark);
    margin-right: 1rem; /* remove previous left offset to allow proper centering */
}

.card-kpi > .d-flex > .col-11 > .d-flex {
    width: 100%;
    min-width: 0;
    flex-wrap: nowrap;
    justify-content: flex-start !important;
    gap: 0.75rem;
}

.card-kpi > .d-flex > .col-11 > .d-flex > .number-kpi,
.card-kpi > .d-flex > .col-11 > .d-flex > .chart-icon-kpi {
    flex: 0 0 auto;
}

/*Table*/

.table-wrapper {
  overflow-x: auto; /* allow horizontal scroll for wide tables */
  overflow-y: hidden;
  width: 100%;
  border-radius: var(--bs-border-radius-lg);
  box-shadow: var(--bs-box-shadow-sm);
  -webkit-overflow-scrolling: touch; /* momentum on iOS */
}

.styled-table {
   border-collapse: collapse;
   width: 100%;
   height: auto;
   background: var(--app-card-bg);
   border-radius: var(--bs-border-radius-lg);
}

.styled-table thead tr {
    background-color: var(--app-bg-red);
    color: var(--app-text-white);
    font-size: var(--app-font-size-base);
    font-weight: var(--bs-body-font-weight-bold);
    text-align: left;
    box-shadow: var(--app-box-shadow-sm);
}

.styled-table tbody tr {
    font-size: var(--app-font-size-sm);
    font-weight: var(--bs-body-font-weight-light);
    text-align: left;
}

.styled-table th,
.styled-table td {
    padding: 12px 15px;
}

.styled-table tbody tr {
    border-bottom: 1px solid var(--app-border-light);
}

.styled-table tbody tr:nth-of-type(even) {
    background-color: var(--app-bg-blue-light);
}

.styled-table tbody tr:last-of-type {
    border-bottom: 2px solid var(--app-bg-red);
}

/* Plotly legends on mobile: hide ONLY for charts that have a colorbar */
@media (max-width: 768px) {
  .plotly-graph-div.has-colorbar .legend {
    display: none !important;
  }
}
/* Extra small screens: stack table rows into cards using data-label */
@media (max-width: 480px) {
  .styled-table thead { display: none; }
  .styled-table,
  .styled-table tbody,
  .styled-table tr,
  .styled-table td { display: block; width: 100%; }
  .styled-table tr {
    margin-bottom: 8px;
    border: 1px solid var(--app-border-light);
    border-radius: var(--bs-border-radius-lg);
    overflow: hidden;
    background: var(--app-card-bg);
  }
  .styled-table td {
    position: relative;
    padding-left: 50%;
    white-space: normal; /* allow wrapping inside stacked layout */
  }
  .styled-table td::before {
    content: attr(data-label);
    position: absolute;
    left: 12px;
    top: 12px;
    width: 45%;
    font-weight: 600;
    color: inherit;
  }
}

.invalid-feedback {
    color: var(--app-text-red-light);
}


.form-control {
    border: none;
    background-color: var(--app-bg-blue-light);
}

.form-control:focus {
  color: var(--bs-body-color);
  background-color: var(--app-bg-white);
  outline: 0;
  box-shadow: 0 0.125rem 0.3rem 0.125rem rgba(var(--app-bg-blue-rgb));
}

.was-validated .form-control:invalid, .form-control.is-invalid {
  border-color: var(--app-bg-red-light);
  padding-right: calc(1.5em + 0.75rem);
  background-image: url("../img/danger.0abffe84a2f1.svg");
  background-repeat: no-repeat;
  background-position: right calc(0.375em + 0.1875rem) center;
  background-size: calc(0.75em + 0.375rem) calc(0.75em + 0.375rem);
}

.form-control.is-invalid:focus {
    box-shadow: 0 0.125rem 0.3rem 0.125rem rgba(var(--app-bg-red-light-rgb));
}

/***************************************
 * 6. DESIGN RESPONSIVE
 ***************************************/

/* Large Screens (max-width: 1600px) */
@media (max-width: 1600px) {
    .sidebar-section {
        gap: var(--app-spacing-sm);
    }
    .sidebar-section-title,
    .sidebar-section i {
        font-size: var(--app-font-size-sm);
        letter-spacing: var(--app-letter-spacing-md);
    }
}

/* Medium Screens (max-width: 1300px) */
@media (max-width: 1300px) {
    .sidebar-section-title,
    .sidebar-section i {
        font-size: var(--app-font-size-sm);
        letter-spacing: var(--app-letter-spacing-sm);
    }

    .btn-custom {
        font-size: var(--app-font-size-base);
        padding: var(--app-spacing-xs);
    }


    .number-kpi{
        font-size: var(--app-font-size-xxl);
    }

    .form-check .form-check-input {
        height: 0.8em;
        width: 0.8em;
        margin-left: -1.2em;
    }
    .form-check-label {
        font-size: var(--app-font-size-sm);
    }
}

/* Small Screens (max-width: 1024px) */
@media (max-width: 1024px) {
    .sidebar-nav,
    .sidebar-section {
        --sidebar-icon-column-width: 1.25rem;
        --sidebar-inline-padding: var(--app-spacing-xs);
    }

    .main-container {
        flex-direction: column;
    }
    .widget-container {
        width: 100%;
        margin-top: var(--app-spacing-sm);
        justify-content: space-between;
        flex-wrap: wrap;
        gap: var(--app-spacing-md);
    }
    .widget {
        margin-bottom: var(--app-spacing-sm);
    }
    .dropdown-widget {
        width: 100%;
        max-width: 300px;
    }

    .mobile-header {
        display: flex;
        height: 50px;
    }

    .sidebar {
        width: 250px;
        transform: translateX(-100%);
        transition: transform var(--app-transition-normal);
        z-index: 1001;
        top: 60px; /* Start below the mobile-header */
        border-radius: var(--bs-border-radius-xl);
        height: calc(100vh - 60px); /* Adjust height to account for mobile-header */
        padding: var(--app-spacing-lg);
    }

    .sidebar-layout,
    .sidebar-main,
    .sidebar-bottom {
        gap: var(--app-spacing-md);
    }

    .sidebar.active {
        transform: translateX(0);
    }

    main {
        width: 100%;
        margin-left: 0;
        padding-top: 72px;

    }

    .sidebar-toggle {
        display: block;
        position: relative;
        top: 0;
        left: 0;
        z-index: 1001;
        margin: 0;
        padding: var(--app-spacing-xs) var(--app-spacing-sm);
    }

    .sidebar-header {
        padding: var(--app-spacing-xs) 0;
    }

    .btn-dropdown {
        min-width: 100%;
    }

    .number-kpi{
        font-size: var(--app-font-size-xxl);
    }
    .body-kpi{
        font-size: var(--app-font-size-sm);
    }

    .sidebar-section-title,
    .sidebar-section i {
        font-size: var(--app-font-size-base);
        letter-spacing: var(--app-letter-spacing-lg);
    }

    .sidebar-nav a,
    .sidebar-nav a i {
        padding: var(--app-spacing-xs) var(--app-spacing-xs);
        font-size: var(--app-font-size-base);
    }

    .sidebar-nav--pages .sidebar-nav__link {
        gap: 0.65rem;
    }

    .sidebar-nav__icon {
        width: var(--sidebar-icon-column-width);
        min-width: var(--sidebar-icon-column-width);
    }

    .sidebar-support-grid {
        grid-template-columns: 1fr;
        gap: 0.8rem;
    }

    .sidebar-support-item {
        align-items: stretch;
        gap: 0.4rem;
    }

    .sidebar-support-label {
        text-align: left;
        font-size: var(--app-font-size-sm);
        line-height: 1.25;
    }

    /* Réduit la taille de police de la ligne d'échantillon sous chaque graphique
       pour les formats tablette et smartphone, en utilisant la variable définie */
    .chart-sample-line,
    .chart-sample-line p {
        font-size: var(--app-font-size-sm);
    }
}


@media (max-width: 425px) {
    .page-hero {
        padding: 0.9rem;
    }

    .page-title {
        font-size: 1.45rem;
    }

    .page-context__item {
        width: 100%;
    }

    .chart-title {
        font-size: 0.98rem;
    }

    .chart-icon {
        gap: 0.5rem;
        font-size: var(--app-font-size-base);
    }

    .chart-icon-select i {
        font-size: var(--app-font-size-xs);
    }

    .number-kpi {
        font-size: var(--app-font-size-xl);
    }

    .body-kpi {
        font-size: var(--app-font-size-sm);
        letter-spacing: normal;
    }
}

/* Sidebar Container Queries
   Container queries to improve sidebar responsiveness from 420px to 2560px */
@container sidebar (min-width: 261px) and (max-width: 340px) {
  .sidebar-nav,
  .sidebar-section {
    --sidebar-inline-padding: clamp(6px, 2vw, 10px);
  }
  .sidebar-section { gap: clamp(6px, 1vw, 10px); }
  .sidebar-section-title { font-size: clamp(0.6rem, 2.5vw, 0.9rem); letter-spacing: var(--app-letter-spacing-sm); }
  .sidebar-section i { font-size: clamp(0.7rem, 2.5vw, 0.95rem); }

  .sidebar-nav a { font-size: clamp(0.7rem, 2.7vw, 0.95rem); padding: clamp(4px, 1.2vw, 8px) clamp(6px, 2vw, 12px); }

  .btn-dropdown { font-size: clamp(0.75rem, 2.6vw, 0.95rem); padding: clamp(6px, 1.6vw, 10px); }
  .dropdown-menu.custom-dropdown { min-width: 100%; max-width: 100%; }

  .sidebar-filters { font-size: clamp(0.55rem, 0.65vw, 0.75rem); }
  .sidebar-footer { font-size: clamp(0.55rem, 2vw, 0.75rem); }
}

@container sidebar (max-width: 260px) {
  .sidebar-nav,
  .sidebar-section {
    --sidebar-inline-padding: 10px;
  }
  .sidebar-section { gap: 6px; }
  .sidebar-section-title { letter-spacing: var(--app-letter-spacing-sm); }
  .sidebar-nav a { padding: 6px 10px; }

  .btn-dropdown { padding: 6px; }
  .dropdown-menu.custom-dropdown { min-width: 100%; max-width: 100%; }
}


/***************************************
 * 5. PAGES SPÉCIFIQUES
 *    5.1 Page annexes (mise en page autonome)
 ***************************************/
/* Neutralise le layout global (body en flex + main décalé) pour la page annexes */
body.body-annexes {
  display: block;
  height: auto;
  margin: 0;
  min-height: 100vh;
}

/* Conteneur principal plein écran */
.annexes-page {
  width: 100%;
  display: flex;
  flex-direction: column;
}

/* Neutralise la règle globale main { width:85%; margin-left:15% } */
body.body-annexes main {
  width: 100% !important;
  margin: 0 !important;
  background-color: transparent !important;
}

/* Bannière supérieure */
.annexes-banner {
  width: 100%;
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 12px 16px;
  background-color: var(--app-bg-blue-dark);
  color: var(--app-text-blue);
  border-radius: 0 0 var(--app-border-radius-xl) var(--app-border-radius-xl);
  box-shadow: var(--app-box-shadow-m);
}
.annexes-banner img { height: 60px; width: auto; }
.annexes-banner h1 { margin: 0; font-size: 3rem; color: var(--app-text-blue); }

/* Zone de contenu */
.annexes-content {
  flex: 1;
  padding: 16px;
  overflow: auto;
}

/* Accessibilité des liens de bascule */
.annexes-toggle { text-decoration: none; }
.annexes-toggle span { font-weight: var(--bs-body-font-weight-bold); }
.annexes-toggle:focus {
    outline: 2px dashed var(--app-text-blue);
    outline-offset: 4px;
}

/* Bandeau inférieur fixé pour la page annexes */
.annexes-bottom-banner {
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  width: 100%;
  background-color: var(--app-bg-blue-dark);
  color: var(--app-text-white);
  box-shadow: 0 -0.25rem 0.75rem rgba(0, 0, 0, 0.35);
  border-radius: var(--app-border-radius-xl) var(--app-border-radius-xl) 0 0;
  z-index: 1040;
}

.annexes-bottom-inner {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 10px 16px;
}

.annexes-bottom-logo {
  height: 40px;
  width: auto;
}

.annexes-bottom-link {
  margin-left: 30px;
  color: var(--app-text-white);
  text-decoration: none;
  font-weight: var(--bs-body-font-weight-extralight-bold);
}
.annexes-bottom-link:hover,
.annexes-bottom-link:focus { text-decoration: underline; }

.annexes-bottom-link--alt {
    margin-left: 0;
    color: var(--app-text-muted);
}

/* Prévenir le chevauchement du contenu par le bandeau bas */
body.body-annexes .annexes-content { padding-bottom: 72px; }

.chart-sample-line {
  color: var(--app-text-muted-light);
  font-weight: var(--bs-body-font-weight);
  text-align: left;
}

.chart-sample-line p {
    margin: 0;
}

.chart-sample-line b {
    font-weight: var(--bs-body-font-weight-bold);
}

/* ======================= */
/* Nouvelles classes neutres
   Remplacent les classes "card-*" selon la fonction
   - Pour les sections de contenu avec iframe: .content-section + .embed-container
   - Pour les cartes de navigation: .card-tile-*
*/

/* Section de contenu (ex: page d'embed) */
.content-section {
  width: 95%;
  max-width: 1200px;
  margin: var(--app-spacing-lg) auto;
  border-radius: var(--bs-border-radius-lg);
  box-shadow: var(--bs-box-shadow-lg);
  background: var(--app-card-bg);
  overflow: hidden;
}

.embed-container {
  position: relative;
  width: 100%;
  padding-top: 56.25%; /* 16:9 */
  background: var(--app-bg-blue-light);
}
.embed-container iframe {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  border: 0;
}

/* En-tête de section générique */
.section-header {
  display: block;
  text-align: center;
  padding: var(--app-spacing-md) var(--app-spacing-lg);
  background: var(--app-bg-white);
  /* hauteur mini standardisée pour aligner le contenu suivant */
  min-height: 120px;
}
.section-header h1 { margin: 0 0 var(--app-spacing-sm); }
.section-header p {
  margin: 0;
  color: var(--app-text-blue-dark);
  text-align: center;
  text-justify: inter-word;
}

/* Corps générique de section */
.section-body {
  padding: var(--app-spacing-md) var(--app-spacing-lg);
  background: var(--app-bg-white);
  text-align: left;
}
.section-body p {
  text-align: justify;
  text-justify: inter-word;
}

/* Cartes de navigation (accueil support) */
.card-tile-link {
  display: flex;
  flex-direction: column;
  width: 100%;
  height: 100%;
  box-sizing: border-box;
  border-radius: var(--bs-border-radius-lg);
  box-shadow: var(--bs-box-shadow-lg);
  background: var(--app-card-bg);
  overflow: hidden;
  transition: var(--app-card-transform);
  text-decoration: none;
}
.card-tile-link:hover {
  transform: translateY(-4px) scale(1.05);
  box-shadow: var(--app-box-shadow-xl);
  text-decoration: none;
}

.card-tile-header {
  padding: var(--app-spacing-md) var(--app-spacing-lg);
  background: var(--app-bg-white);
  text-align: center;
  min-height: 200px;
  display: flex;
  flex-direction: column;
  justify-content: center;
}
.card-tile-header h1 { margin: 0 0 var(--app-spacing-sm); }
.card-tile-header p { margin: 0; color: var(--app-text-blue-dark); }

.card-tile-body {
  background: var(--app-bg-blue-light);
  text-align: center;
}
.card-tile-body img {
  max-width: 100%;
  height: auto;
  display: block;
  margin: 0 auto;
}

/***************************************
 * PAGE DESCRIPTION - ALIGNEMENT & JUSTIFICATION
 ***************************************/
.page-description {
    max-width: 72rem;
    margin-bottom: 0.25rem;
    line-height: 1.6;
    text-align: left;
}

.page-shell {
    padding: 0 0.75rem;
    margin-bottom: 1.25rem;
}

.page-hero {
    display: flex;
    flex-direction: column;
    gap: 0.9rem;
    padding: 1.1rem 1.2rem;
    border-radius: var(--bs-border-radius-xl);
    background: linear-gradient(
        135deg,
        rgba(255, 255, 255, 0.92),
        rgba(239, 246, 247, 0.96)
    );
    box-shadow: var(--app-box-shadow-sm);
    width: 100%;
    box-sizing: border-box;
}

.page-eyebrow {
    display: inline-flex;
    align-items: center;
    width: fit-content;
    padding: 0.3rem 0.7rem;
    border-radius: 999px;
    background-color: rgba(176, 210, 217, 0.35);
    color: var(--app-text-blue-dark);
    font-size: 0.78rem;
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
}

.page-title {
    margin: 0;
    font-size: clamp(1.7rem, 2.4vw, 2.35rem);
    line-height: 1.08;
}

.page-context {
    display: flex;
    flex-wrap: wrap;
    gap: 0.75rem;
}

.page-context__item {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.45rem;
    padding: 0.55rem 0.8rem;
    border-radius: var(--bs-border-radius-lg);
    background-color: rgba(176, 210, 217, 0.22);
    border: 1px solid rgba(15, 50, 80, 0.08);
}

.page-context__label {
    font-size: 0.76rem;
    font-weight: 700;
    color: var(--app-text-blue-dark);
    text-transform: uppercase;
    letter-spacing: 0.08em;
}

.page-context__value {
    font-size: 0.92rem;
    font-weight: 600;
    color: var(--app-text-blue-dark);
    min-width: 0;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

/***************************************
 * MODAL TÉLÉCHARGEMENT (PDF) — STYLES & CORRECTION FADE
 * - Empêche la fenêtre (dialog) d'être affectée par le fade d'opacité
 * - Conserve le fondu de l'arrière-plan (backdrop) natif Bootstrap
 * - Habillage conforme à la charte (couleurs, rayons, ombres)
 ***************************************/
/* Neutraliser le fade/transition sur la fenêtre elle-même */
.pdf-download-modal.fade { opacity: 1 !important; transition: none !important; }
.pdf-download-modal .modal-dialog { transform: none !important; transition: none !important; }
.pdf-download-modal.show .modal-dialog { transform: none !important; }

/* Habillage de la modale */
.pdf-download-modal .modal-content {
  border-radius: var(--app-border-radius-xl);
  border: 1px solid var(--app-border-extralight);
  box-shadow: var(--app-box-shadow-lg);
  background-color: var(--app-bg-blue-light);
}

.pdf-download-modal .modal-header {
  background-color: var(--app-bg-blue);
  color: var(--app-text-white);
  border-top-left-radius: var(--app-border-radius-xl);
  border-top-right-radius: var(--app-border-radius-xl);
}

.pdf-download-modal .modal-title { font-weight: var(--bs-body-font-weight-bold); }

.pdf-download-modal .btn-close {
  filter: invert(1) grayscale(100%);
  opacity: 0.8;
}
.pdf-download-modal .btn-close:hover { opacity: 1; }

.pdf-download-modal .modal-body { color: var(--app-text-blue-dark); }

/* Spinner aux couleurs de la charte */
.pdf-download-modal .spinner-border { color: var(--app-text-red-light); border-color: currentColor; border-right-color: transparent; }


/**
    * LOCK GENERAL
 */
.lock-state{
    opacity: 0.5;
    filter: grayscale(30%);
    transition: opacity 120ms ease-in-out, filter 120ms ease-in-out, transform 120ms ease-in-out;
    transform: none;
    pointer-events: none;
    user-select: none;
    box-shadow: none;
}


/**
 * SIDEBAR LOCKED — ÉTAT VISUEL
 * Quand la sidebar est verrouillée (classe .sidebar-locked posée par JS),
 * on grise légèrement les boutons/contrôles pour indiquer l’inactivité.
 * Le bouton Reset (#reset-all-filters) reste visuellement actif.
 */
.sidebar.sidebar-locked .btn:not(#reset-all-filters),
.sidebar.sidebar-locked button:not(#reset-all-filters),
.sidebar.sidebar-locked a.btn:not(#reset-all-filters),
.sidebar.sidebar-locked .dropdown-toggle,
.sidebar.sidebar-locked .dropdown-item,
.sidebar.sidebar-locked .sidebar-nav a,
.sidebar.sidebar-locked [role="button"]:not(#reset-all-filters),
.sidebar.sidebar-locked .filters-display .filter-badge,
.sidebar.sidebar-locked .filters-display .filter-badge .filter-badge-remove {
  opacity: 0.65;
  filter: grayscale(30%);
  cursor: not-allowed !important;
  transition: opacity 120ms ease-in-out, filter 120ms ease-in-out, transform 120ms ease-in-out;
}

/* Neutraliser les effets hover/active pendant le lock (ex. légers lifts/ombres) */
.sidebar.sidebar-locked .btn:not(#reset-all-filters):hover,
.sidebar.sidebar-locked button:not(#reset-all-filters):hover,
.sidebar.sidebar-locked a.btn:not(#reset-all-filters):hover,
.sidebar.sidebar-locked .dropdown-toggle:hover,
.sidebar.sidebar-locked .dropdown-item:hover,
.sidebar.sidebar-locked .sidebar-nav a:hover,
.sidebar.sidebar-locked .filters-display .filter-badge:hover,
.sidebar.sidebar-locked .filters-display .filter-badge .filter-badge-remove:hover {
  transform: none !important;
  box-shadow: none !important;
}

/* Éviter l’anneau de focus trompeur pendant le lock */
.sidebar.sidebar-locked .btn:not(#reset-all-filters):focus,
.sidebar.sidebar-locked button:not(#reset-all-filters):focus,
.sidebar.sidebar-locked a.btn:not(#reset-all-filters):focus,
.sidebar.sidebar-locked .dropdown-toggle:focus,
.sidebar.sidebar-locked .dropdown-item:focus,
.sidebar.sidebar-locked .sidebar-nav a:focus,
.sidebar.sidebar-locked .filters-display .filter-badge:focus,
.sidebar.sidebar-locked .filters-display .filter-badge .filter-badge-remove:focus {
  box-shadow: none !important;
  outline: none !important;
}

/* Bouton Reset: reste pleinement actif et lisible même en mode verrouillé */
.sidebar.sidebar-locked #reset-all-filters,
.sidebar.sidebar-locked #reset-all-filters.btn {
  opacity: 1 !important;
  filter: none !important;
  cursor: pointer !important;
}