
    :root {
        --text: #3A4255;
--links: #3A4255;
--titles: #3A4255;
--page-background: #d3e5d3;
--highlight: #438d42;
--boxes-background: #FFFFFF;
--boxes-border: #E5E5E5;
--section-titles: #3A4255;
--section-titles-background: #FFFFFF;
--header-background: #438D42;
--header-links: #FFFFFF;
--footer-background: #FFFFFF;
--footer-links: #3A4255;
    }
    
/* ==========================================================================
LIGHT BASIC HEADER THEME
========================================================================== */
/*
The CSS rules below apply to the whole portal.
Some suggestions:
- You should add below CSS rules that apply to elements that show up in all pages (such as the
header or footer) or built-in pages such as the Explore page, the MapBuilder, the ChartBuilder and the API
page.
- For CSS that applies to a specific user-created page, add it directly in the "CSS"
tab in the page edit section. This makes it easier to keep track of which classes
are page specific and which ones are generic and apply to the whole portal.
*/
/* Portal Header - Logo and main navigation
========================================================================== */
.portal-header {
    padding: 0 26px 0 13px;
        /*border-bottom: 1px solid rgba(113 119 144 / 25%);
background-color: #438D42; 
    */
box-shadow: 0px 4px 3px rgba(0, 0, 0, 0.25);

}
/* Logo */
.ods-front-header__logo {
    display: block;
    width: auto; /* Logo width */
    height: auto; /* Logo height */
    max-height: 40px;
    padding-left: 13px;
    margin-right: 65px;
}
.ods-responsive-menu-collapsible__content {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
}
.portal-navigation {
    margin: 0;
    -webkit-box-flex: 1;
    -ms-flex: 1 1 auto;
    flex: 1 1 auto;
}
.ods-front-header__menu {
    margin: 0;
}
.ods-front-header__menu-item-link {
    border: none;
    font-size: .733rem;
    text-transform: uppercase;
    letter-spacing: .8px;
    line-height: 59px;
    padding: 0 13px;
    opacity: 1;
}
.ods-front-header__menu-item-link:hover,
.ods-front-header__menu-item-link--active {
    background-color: #438d42;
    color: #FFFFFF; /* Header link color when the link is active */
}

.leko-logo {
    height: 30px;
}
.bapps-logo {
    
}
.bapps-logo img {
    height: 50px
}
.ods-responsive-menu-collapsible--collapsed .leko-logo img {
    display:none;
}

.ods-responsive-menu-placeholder__container {
    text-align: center;
    display: flex;
    align-items: center;
}

.leko-logo img {
    height: 30px
}
/* Management Menu
========================================================================== */
.ods-front-header__management-menu {
    position: static;
    top: auto;
    right: auto;
    line-height: 59px;
    font-size: .833rem;
}
.ods-front-header__management-menu-item {
    margin: 0 0 0 26px;
}
.ods-front-header__management-menu-item-link--active,
.ods-front-header__management-menu-item-link:hover {
    border: none;
    color: white;
}
.ods-front-header__account-avatar-container {
    margin-bottom: 0;
    vertical-align: middle;
}
.ods-front-header__management-menu-item--backoffice {
    padding: 0;
    border: none;
    background: none;
}
/* Button "Back Office" in header */
.ods-front-header__management-menu-item--backoffice .ods-front-header__management-menu-item-link--backoffice {
    display: inline-block;
    color: white;
    border: 1px solid white;
    padding: 5px;
    background-color: transparent;
    border-radius: 4px;
}
.ods-front-header__management-menu-item-link--backoffice:hover {
    color: #438D42;
    background-color: white;
}
.ods-front-header__management-menu-item-link {
    padding-bottom: 0;
}
/* Header - Mobile (small screens)
========================================================================== */
.ods-responsive-menu-placeholder.ods-responsive-menu-placeholder--active {
    height: 100%;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
}
.ods-responsive-menu--collapsed .ods-responsive-menu-collapsible__content {
    -webkit-box-align: start;
    -ms-flex-align: start;
    align-items: flex-start;
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
    -ms-flex-direction: column;
    flex-direction: column;
}
.ods-responsive-menu-collapsible--collapsed .ods-front-header__menu-item-link {
    width: 100%;
    border-left: none;
}
.ods-responsive-menu-collapsible--collapsed .portal-navigation,
.ods-responsive-menu-collapsible--collapsed .ods-front-header__menu,
.ods-responsive-menu-collapsible--collapsed .portal-management-menu {
    width: 100%;
}
.ods-responsive-menu-collapsible--collapsed .ods-front-header__logo {
    display: none;
}
/* Management Menu - Mobile (small screens)
========================================================================== */
.ods-responsive-menu-collapsible--collapsed .ods-front-header__management-menu {
    padding: 13px;
}
.ods-responsive-menu-collapsible--collapsed .ods-front-header__management-menu-item {
    padding-left: 0;
}
.ods-responsive-menu-collapsible--collapsed .ods-front-header__management-menu-item--backoffice {
    padding: 0;
}
.ods-responsive-menu-collapsible--collapsed .ods-front-header__management-menu-item-link--backoffice {
    display: -webkit-inline-box;
    display: -ms-inline-flexbox;
    display: inline-flex;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
}

.ods-catalog-sort__selector__opt--selected {
    color: #FFFFFF;
    background-color: #3A4255;
    border-color: #3A4255;
}
/* Portal Footer
========================================================================== */
.portal-footer {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-pack: justify;
    -ms-flex-pack: justify;
    justify-content: space-between;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    border-top: 1px solid #DEE5EF;
    background-color: #FFFFFF;
    height: auto;
    min-height: 50px;
    padding: 0 26px;
}
.ods-front-footer__link--active {
    font-weight: normal;
    color: #438d42; /* Give current language a color highlight */
}
/* Explore Page - Catalog Cards
========================================================================== */
.ods-catalog-card {
    border-radius: 4px;
    padding: 26px;
    -webkit-transition: all .2s;
    -o-transition: all .2s;
    transition: all .2s;
}
.ods-catalog-card:hover {
    -webkit-transform: scale(1.02);
    -ms-transform: scale(1.02);
    transform: scale(1.02);
    -webkit-box-shadow: 0 0 10px 0 #e3e9f1;
    box-shadow: 0 0 10px 0 #e3e9f1;
}
.ods-catalog-card:hover:before {
    display: none;
}
.ods-catalog-card__theme-icon {
    position: absolute;
    top: 26px;
    left: 26px;
}
.ods-catalog-card__title {
    color: #438d42;
    font-weight: 400;
    font-size: 1.44rem;
    line-height: 1.2;
}
.ods-catalog-card__metadata-item {
    font-size: .833rem;
    line-height: 1.4;
    margin-bottom: 4px;
}
.ods-catalog-card__visualization {
    color: #3A4255;
    padding: 0 0 4px 0;
}
.ods-catalog-card__keyword {
    color: #3A4255;
    font-size: 0.833rem;
    padding: .15rem .35rem;
    background-color: #E5E5E5;
    border-radius: 7px;
}
.ods-catalog-card__keyword:hover {
    color: #FFFFFF;
    background-color: #142E7B;
}
/* Edit dataset button */
.ods-dataset-visualization__edit-dataset-link {
    color: #FFFFFF;
}
/* Explore Page - Filter Sidebar
========================================================================== */
/* Improve sidebar title size and alignement */
.ods-filters__count,
.ods-filters__export-catalog-title,
.ods-filters__filters,
.ods-filters__filters-summary{
    font-size: 1.44rem;
    line-height: 1.2;
    font-weight: 400;
    padding: 0;
    margin-bottom: 13px;
}
.ods-catalog-sort-labels {
    font-size: .833rem;
    line-height: 1.4;
}
.odswidget-facet__facet-title {
    font-size: 1.2rem;
    line-height: 1.3;
    margin-bottom: 13px;
    font-weight: 400;
}
.odswidget-text-search__search-box {
    font-size: 1rem;
}
/* Catalog Sort Selector */
.ods-catalog-sort__selector {
    font-size: .833rem;
}
.ods-catalog-sort__selector__opt,
.ods-catalog-sort__selector__opt--select .ods-catalog-sort__selector__more-button {
    background-color: #d3e5d3;
    border-color: #142E7B;
    color: #142E7B;
}
.ods-catalog-sort__selector__opt--selected,
.ods-catalog-sort__selector__opt--selected:hover,
.ods-catalog-sort__selector__opt:hover:not(.ods-catalog-sort__selector__opt--selected),
.ods-catalog-sort__selector__opt:hover:not(.ods-catalog-sort__selector__opt--selected) button {
    color: #FFFFFF;
    background-color: #142E7B;
    border-color: #142E7B;
}
/* Removed small left border from sidebar items */
.odswidget-facet__category,
.ods-filters__export-catalog-link {
    padding-left: 0;
    border: none;
}
.odswidget-facet--disjunctive .odswidget-facet__category:hover:before {
    content: '';
}
/* ==========================================================================
   Lien du compte utilisateur (Avatar + Nom)
   ========================================================================== */

/* Effet au survol ciblant le lien du compte */
.ods-front-header__login-signup-buttons-button a[href="/account"]:hover {
    background-color: rgba(255, 255, 255, 0.2) !important;
    border-radius: 10px; /* Optionnel : adoucit les angles de la zone de survol pour s'accorder avec le design ODS */
}

/* Optionnel : Ajouter une transition douce pour que l'apparition du fond soit plus fluide */
.ods-front-header__login-signup-buttons-button a[href="/account"] {
    transition: background-color 0.2s ease-in-out;
}
/* ==========================================================================
   Bouton de déconnexion (Management Menu)
   ========================================================================== */

/* Force la couleur du bouton en blanc */
.ods-front-header__login-signup-buttons-button form[action="/logout/"] button.rods-button-icon {
    color: #FFFFFF !important; 
}

/* Cible UNIQUEMENT les tracés de l'icône, en excluant la zone de délimitation transparente */
.ods-front-header__login-signup-buttons-button form[action="/logout/"] button.rods-button-icon path:not([fill="none"]) {
    fill: #FFFFFF !important;
}

/* Ajout d'un léger effet au survol pour l'UX (Optionnel) */
.ods-front-header__login-signup-buttons-button form[action="/logout/"] button.rods-button-icon:hover {
    background-color: rgba(255, 255, 255, 0.2) !important;
}
/* ==========================================================================
   CUSTOM LANGUAGE SELECTOR (PILL)
   ========================================================================== */

/* Autoriser le menu à sortir du header */
.portal-header {
    overflow: visible !important;
}

.lang-selector-container {
    position: relative;
    display: flex;
    align-items: center;
    height: 100%;
    margin-right: 15px; /* Espacement avec le menu management */
    
    /* Apparition fluide au survol */
    &:hover .lang-dropdown {
        opacity: 1;
        visibility: visible;
        transform: translateY(0);
    }

    /* Bouton Pilule */
    .lang-pill-button {
        background-color: #FFFFFF !important;
        border: none;
        cursor: pointer;
        display: flex;
        align-items: center;
        padding: 0 12px; /* Ajout d'un padding horizontal pour aérer */
        gap: 8px;
        height: 36px; /* Légèrement réduit pour s'adapter à la hauteur du header ODS */
        border-radius: 9999px;
        box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);
        transition: background-color 0.2s ease, box-shadow 0.2s ease, transform 0.2s ease;
        color: #333333 !important;
        line-height: initial !important; 

        &:hover {
            background-color: #f9f9f9 !important;
            box-shadow: 0 3px 8px rgba(0, 0, 0, 0.15);
        }

        .pill-flag-wrapper {
            display: flex;
            align-items: center;
            justify-content: center;
        }

        /* Drapeau Circulaire */
        .pill-flag-icon {
            font-size: 16px;
            width: 1.3em;
            height: 1.3em;
            border-radius: 50%;
            background-size: cover;
            background-position: center;
            box-shadow: inset 0 0 0 1px rgba(0,0,0,0.05);
            border: 1px solid #dddddd; 
        }

        /* Chevron */
        .pill-chevron-icon {
            font-size: 10px;
            color: #777777;
            transition: color 0.2s ease, transform 0.2s ease;
        }
    }

    &:hover .lang-pill-button .pill-chevron-icon {
        color: #333333;
        transform: translateY(1px);
    }

    /* Menu Déroulant */
    .lang-dropdown {
        position: absolute;
        top: calc(100% + 5px);
        right: 0;
        background-color: #ffffff;
        border-radius: 6px;
        box-shadow: 0 4px 12px rgba(0, 0, 0, 0.2);
        z-index: 9999;
        min-width: 180px;
        display: flex;
        flex-direction: column;
        height: auto !important; 
        line-height: initial !important;
        opacity: 0;
        visibility: hidden;
        transform: translateY(10px);
        transition: all 0.2s ease;

        .lang-item {
            display: flex;
            align-items: center;
            padding: 12px 20px;
            text-decoration: none;
            color: #333333;
            font-size: 14px;
            gap: 15px;
            border-left: none; /* Écrase le border du thème Leko par défaut */

            &:first-child { border-radius: 6px 6px 0 0; }
            &:last-child { border-radius: 0 0 6px 6px; }

            .fi {
                font-size: 18px;
                width: 1.3em;
                height: 1.3em;
                border-radius: 50%;
                background-size: cover;
                background-position: center;
                box-shadow: 0 1px 2px rgba(0,0,0,0.1);
                border: 1px solid #dddddd;
            }

            span {
                text-align: left;
                line-height: 1; /* Aligne le texte proprement avec l'icône */
            }

            &:hover {
                background-color: #f5f5f5;
                color: #000000;
            }

            &.active {
                background-color: #e9f2ff;
                font-weight: bold;
                color: #004b9d; 
            }
        }
    }
}