/* =============================================================================
   style.css — Layout général + filtres génériques.
   Convention CSS du projet (voir CLAUDE.md, section "## CSS") :
     - vars.css      : tokens (couleurs, tailles, URLs SVG) — variables :root
     - core.css      : header / navbar / footer
     - style.css     : layout général + filtres génériques (CE fichier)
     - mod_*.css     : styles spécifiques à un module
     - mod_carto.css : tout ce qui est spécifique à la cartographie
                       (.carto-filtre, .map-container, dropdowns carto)
   Règle : un sélecteur n'a qu'UN seul foyer. Éviter d'ajouter des !important.
   Pas de @import ici : vars.css et core.css sont chargés par bundle_resources().
   ============================================================================= */

#footer {
    display: none
}

[content-active="content-tabActive-tab_carto_main"] {
    overflow: hidden;
}

/* [content-active="content-tabActive-tab_accueil"] #footer {
    display: block;
} */

.navbar-brand,
#logoMarianne {
    background: none !important;
}

#logoMarianne .fr-header__brand-baseline,
.navbar-brand .fr-header__brand-baseline .bold {
    color: var(--color1-text);
}

/* Nom de l'application et sous-titre, à droite des logos.
   - centrés verticalement sur la hauteur du bandeau (ils étaient calés en haut par un
     padding fixe) ;
   - séparés des logos par le liseré color5 des filtres et onglets de l'application ;
   - sous-titre en 400 et non 300, avec une ombre légère : sur l'image de fond du
     bandeau, le texte fin et blanc se lisait mal. */
.navbar-brand .fr-header__brand-baseline {
    display: inline-flex;
    flex-direction: column;
    justify-content: center;
    gap: 3px;
    height: 70px;
    padding: 0 10px 0 14px;
    margin-left: 4px;
    border-left: 3px solid var(--color5);
    text-shadow: 0 1px 3px rgba(0, 0, 0, 0.45);
}

.navbar-brand .fr-header__brand-baseline .bold {
    font-size: 22px;
    font-weight: 700;
    letter-spacing: 0.08em;
    line-height: 24px;
}

.navbar-brand .fr-header__brand-baseline span:not(.bold) {
    font-size: 13px;
    font-weight: 400;
    line-height: 16px;
    opacity: 0.92;
}

/* Logo CYCLORAMA à la place du nom et du sous-titre. L'image source est très large
   (3117 x 594) : seule la hauteur est fixée, la largeur suit le ratio (~230 px). */
.navbar-brand .fr-header__brand-baseline .logo-cyclorama {
    display: block;
    height: 44px;
    width: auto;
}


#footer .logos-right {
    display: none
}

#home-content #footer {
    text-align: center;
}

#home-content #footer .logos-right {
    float: none;
    display: inline-block;
    background: #FFF;
    padding: 15px;
    border-radius: 5px;
    text-align: center;
}

#home-content #footer .logos-right a img {
    opacity: 1;
    margin: 0 3px;
    max-height: 40px;
}


/**ACCUEIL**/
#home-content {

    min-height: calc(100vh - var(--headerHeight));
    text-align: center;
    padding-left: 0;
    padding-right: 0;
    display: flex;
    /* Référence de positionnement pour le badge de version (.version-badge). */
    position: relative;
}

#homeContent {

    background-size: cover;
    background-repeat: no-repeat;
}

#home-content .left,
#home-content .right {
    display: inline-block;
    min-height: calc(100vh - var(--headerHeight));
    vertical-align: top;
}

#home-content .left {
    width: 30%;
    max-width: 800px;
    position: relative;

    background-size: cover;


}

/* Illustration collée à l'écran (sticky) et à la hauteur de la fenêtre, au lieu de
   s'étirer sur toute la hauteur de la page : déplier les actualités précédentes
   allongeait la page, l'image avec, et le logo centré dedans descendait. Elle suit
   désormais le défilement, le logo reste au milieu de l'écran. */
#home-content .left #illu {
    background: url(../img/bg_home.jpg) top center;
    background-repeat: no-repeat;
    width: 100%;
    position: sticky;
    top: var(--headerHeight);
    height: calc(100vh - var(--headerHeight));
    background-size: cover;
    display: flex;
    align-items: center;
    justify-content: center;
}

#home-content .right {
    width: 69%;
    padding: 10px 20px;
}

#home-content h1,
#home-content h2 {
    font-size: 22px;
    font-weight: 700;
    text-align: center;
    clear: both;
    color: var(--color1);
}

/* Texte courant aligné à gauche : le justifié creusait des blancs irréguliers entre les
   mots sur les colonnes étroites. Les listes héritaient, elles, du centrage de
   #home-content. Titres et cartes d'accès restent centrés. */
#home-content p,
#home-content .markdown-content ul {
    text-align: left;
}

#home-content .other-links {
    text-align: center;
    padding-top: 15px
}

#home-content .accueil_bloc {
    text-align: center;
}

#home-content .other-links a {
    display: inline-block;
    text-decoration: underline;
    color: var(--color2);
    font-weight: 700;
    padding: 15px;
    padding: 15px 4px;
    padding-top: 0
}

#home-content .item {
    background: var(--color1);
    display: inline-block;
    overflow: hidden;
    position: relative;
    margin: 15px 0;
    border-radius: 5px;
    text-align: center;
}

#home-content .item .picto_appli {
    position: absolute;
    top: 120px;
    height: 80px;
    z-index: 1;
    left: 50%;
    transform: translateX(-50%);
    border-radius: 10px 10px 0 0;
    background: #FFF;

}

#home-content .item .picto_appli .icon {
    display: flex;
    justify-content: center;
    align-items: center;
}

#home-content .item .picto_appli .icon:after {
    content: "\f015";
    font: normal normal normal 14px / 1 FontAwesome;
    color: #FFF;
    line-height: 40px;
}

/* Pictos des boîtes : identiques aux icônes des onglets de la navbar (app_ui.R). */
#home-content .col-md-4:nth-child(1) .picto_appli .icon:after {
    content: "\f279";
    /* map — onglet Cartographie & Statistiques */
}

#home-content .col-md-4:nth-child(2) .picto_appli .icon:after {
    content: "\f276";
    /* map-pin — onglet Fiches masses d'eau */
}

#home-content .col-md-4:nth-child(3) .picto_appli .icon:after {
    content: "\f02d";
    /* book — onglet Documentation & Liens utiles */
}

#home-content .item .btn {
    display: inline-block;
    margin: 8px auto;
    text-align: center;
    background: var(--color5);
    color: var(--color5-text);
    width: auto;
    position: relative;
    z-index: 2;
    font-weight: 600;
}

#home-content .item-img {
    height: 200px;
    text-align: center;
}

#home-content img {
    width: 110%;
    opacity: 0.35;
}

#home-content .item-title {
    padding: 10px;
    /* Fond bleu clair pour différencier les boîtes (token partagé avec .actu-bloc) */
    background: var(--color-bg-light);
    color: #454545;
    bottom: 0;
    left: 0;
    width: calc(100%);
    text-align: center;
    font-weight: 600;
    font-size: 14px;
    line-height: 14px;
    position: relative;
    text-decoration: none !important;
}

.picto_appli {
    background: rgba(255, 255, 255, 0.3);
    width: 100px;
    height: 100px;
    border-radius: 10px;
    display: flex;
    justify-content: center;
    align-items: center;
}

.picto_appli .icon {
    display: block;
    position: relative;
    width: 0;
    height: 0;
}

.picto_appli .icon:before {
    content: " ";
    width: 20px;
    height: 20px;
    display: block;
    background: var(--color5);
    border-radius: 5px;
    position: absolute;
    top: 0px;
    left: -5px;

}

.picto_appli .icon:after {
    content: " ";
    width: 40px;
    height: 40px;
    display: block;
    background: var(--color1);
    border-radius: 5px;
    position: absolute;
    bottom: -10px;
    left: -35px;

}

.navbar-inverse {
    /* Voile teinté (brand) au-dessus de la carte de fond : garantit la lisibilité du texte blanc */
    /* background: linear-gradient(rgba(18, 86, 110, 0.9), rgba(18, 86, 110, 0.9)), */
    background: url('../img/bg_header_dce.png') top center;
    background-size: cover;
    max-height: var(--headerHeight);
}

.navbar-inverse .navbar-collapse {
    float: right;
    padding-top: 11px;
}

#navBar.navbar-nav>li>a {
    color: #FFF;
    text-shadow: 0 1px 2px rgba(0, 0, 0, 0.35);
}

.navbar-nav>li>a i {
    display: block;
    margin: 0 auto 2px;
    /* Pictos toujours affichés ; simplement atténués hors onglet actif/survolé */
    opacity: 0.9;
    font-size: 23px;
}

#navBar.navbar-nav>li>a:hover i,
#navBar.navbar-nav>li.active>a i {
    opacity: 1;
}

#navBar.navbar-nav>li>a:hover,
#navBar.navbar-nav>li.active>a {
    background: var(--color1-text) !important;
    color: var(--color1) !important;
    text-shadow: none;
}

@media (max-width: 1080px) {
    #home-content {
        text-align: center;
    }

    #home-content .right {
        max-width: 100% !important;
        width: calc(100% - 30px) !important;
        padding: 15px
    }

    #home-content .left {
        display: none
    }

}

@media (max-width: 1660px) {

    .navbar-inverse .navbar-collapse {
        width: calc(100% - 548px);
    }

    #navBar .fa-fw {
        width: 0.92em
    }

    #navBar.navbar-nav>li {
        margin: 0 0;
    }

    .navbar-brand .fr-header__brand-top,
    .fr-header__brand-baseline {
        padding-right: 0
    }

    .navbar-brand .fr-header__brand-top {
        height: 60px;
    }

    #home-content .right {
        max-width: calc(100% - 512px);
        width: 70%;
    }

    #home-content .left {
        max-width: 500px
    }

    #home-content .left #illu {
        max-width: 500px;
        background-position: bottom;
    }

}

.menu-opened .navbar-inverse .navbar-toggle,
.menu-opened .navbar-inverse .navbar-toggle:focus,
.navbar-inverse .navbar-toggle:hover {
    background: #f4f4f4;
}

.menu-opened .navbar-inverse .navbar-toggle .icon-bar,
.menu-opened .navbar-inverse .navbar-toggle:focus .icon-bar,
.menu-opened .navbar-inverse .navbar-toggle:hover .icon-bar {
    background: var(--color1)
}

@media (max-width: 1549px) {

    .navbar-inverse .navbar-toggle,
    .navbar-inverse .navbar-toggle:focus {
        border: none;
        border-radius: 0;
        background: var(--color3)
    }

    #navBar,
    .navbar-header {
        width: 100%
    }

    #navBar {
        width: 400px;
        position: absolute;
        right: 15px;
        top: 0;
        background: #f4f4f4;
        box-shadow: 0 6px 16px rgba(0, 0, 0, 0.2);
    }

    /* Menu déroulant (mode replié) : fond clair → texte et pictos foncés, alignés à gauche.
       On neutralise ici le style "barre sur image" (texte blanc + ombre) hérité du mode large. */
    #navBar.navbar-nav>li {
        margin: 0;
        border-bottom: 1px solid rgba(0, 0, 0, 0.08);
    }

    #navBar.navbar-nav>li>a {
        color: var(--text-color);
        text-shadow: none;
        text-align: left;
        padding: 12px 18px;
    }

    #navBar.navbar-nav>li>a i {
        display: inline-block;
        vertical-align: middle;
        margin: 0 12px 0 0;
        opacity: 1;
        font-size: 20px;
        width: 24px;
        text-align: center;
    }

    .navbar-default .navbar-collapse.collapse ul {
        display: none;
        width: 100%
    }

    .navbar-default .navbar-collapse.collapse.in ul {
        display: block;
        float: right;
    }

    #navBar.navbar-nav>li {
        display: block
    }

    .navbar-toggle {
        display: block !important;
        z-index: 10;
        margin-top: 18px
    }

    .fr-header__brand-baseline {
        position: relative;
    }

    #logoMarianne a:nth-child(2) .logo {
        height: 30%;
        vertical-align: top;
        margin-top: 12px;
        margin-left: 10px
    }
}

@media (max-width: 768px) {
    #navBar {
        width: 100%;
        position: relative;
        right: 0;
        top: 0;
        background: #f4f4f4;
        float: none;
        margin: 0 auto;
    }
}

.open-details .overlay-graph-details {
    display: none !important
}

/**Modal**/
#shiny-modal-wrapper .modal-header,
.modal-title {
    background: #FFF;
    color: var(--color1)
}

.modal-title .btn-close {
    color: var(--color1)
}

#modal-mea {
    margin-top: -15px
}

#modal-mea .mea-item .mea-value:before,
#modal-mea .mea-item .mea-value:after {
    content: "\e900";
    font-family: 'bdetm';
    color: var(--color3-text);
    position: absolute;
    font-size: 14px
}

#modal-mea .mea-item .mea-value:before {
    top: 5px;
    left: 5px
}

#modal-mea .mea-item .mea-value:after {
    bottom: 5px;
    right: 5px
}

.tab-content .js-plotly-plot {
    height: auto !important;
}

.nav-tabs {
    border-top: 1px solid var(--color1);
}

.nav-tabs>li.active>a,
.nav-tabs>li.active>a:focus,
.nav-tabs>li.active>a:hover {
    border-radius: 0
}

.nav-tabs li a {
    border-top: none !important
}

#carto_main_1-carto_attributs_1-ui_table_stats_element div.dataTables_scrollBody>table>tbody>tr td:nth-child(1) {
    color: var(--color1);
    font-weight: 700;
    text-align: right;
}

#carto_main_1-carto_attributs_1-ui_table_stats_element div.dataTables_scrollBody>table>tbody>tr {
    height: 40.5px
}

#shiny-modal-wrapper .pretty.p-switch.p-fill input:checked~.state.p-primary:before {
    background: var(--color3) !important;
    color: var(--color3-text) !important;
    border-color: rgba(0, 0, 0, 0.2) !important;
}

#shiny-modal-wrapper .pretty.p-switch .state:before {
    border-color: rgba(0, 0, 0, 0.2);
    background: #FFF
}

#shiny-modal-wrapper .pretty.p-switch .state label:after {
    background: rgba(0, 0, 0, 0.2);
}

/****CHECKBOX / RADIO BUTTON***/
.mCustomScrollBox,
.mCSB_container {
    overflow: visible !important;

}

.carto-filtre {
    color: #454545 !important;
    padding-top: 15px;
}

/* Pas de filet sous chaque filtre : il se lisait comme un trait parasite sous les
   pickers. Les groupes restent séparés par le filet color1 de .carto-filtre-header. */
.item-filtre {
    padding-top: 10px
}

/* Carto seulement : un filet *entre* deux filtres qui se suivent (thème / milieu /
   indicateurs). Posé en haut du second plutôt qu'en bas de chacun : le dernier filtre
   d'un groupe n'en a pas, et le trait ne double plus celui de l'en-tête suivant.
   .carto-filtre n'existe que dans la carto, la fiche n'est donc pas concernée. */
.carto-filtre .item-filtre+.item-filtre {
    border-top: 1px solid #CCC;
    margin-top: 10px;
}

.carto-filtre-group {
    margin-bottom: 20px
}

.carto-filtre-header {
    color: var(--color1);
    font-weight: 600;
    /* font-size: 17px; */
    font-size: 15px;
    border-bottom: 1px solid var(--color1);
    vertical-align: middle;
    line-height: 22px;
}

.carto-filtre-header::before {
    font: normal normal normal 14px / 1 FontAwesome;
    content: "\f0b0";
    background: var(--color1);
    display: inline-block;
    color: var(--color1-text);
    height: 22px;
    width: 22px;
    line-height: 24px;
    text-align: center;
    border-radius: 50%;
    margin-right: 3px;
    margin-bottom: 2px;
    font-size: 9px;
}

.carto-filtre-header .btn-close {
    float: right;
    padding: 0 5px;
    display: inline-block;
    background: var(--color1);
    color: var(--color1-text);
    border: none;
    margin-right: 5px;
}

.carto-filtre-header .btn-close::before {
    font: normal normal normal 12px / 1 FontAwesome;
    content: "\f021";
    color: white;
    margin-right: 3px
}

.carto-filtre .dropdown-toggle {
    max-width: 450px;
}

.graph-details,
.glossaire-details,
.remerciement-details {
    top: 0 !important;
}

.carto-filtre .bootstrap-select>.dropdown-toggle {
    border-radius: 5px !important
}

.btn-group .radiobtn {
    padding: 0;
    margin: 0;
    padding-right: 7px;
    border: none;
    background: none !important;
    text-align: center;
    /* Autoriser le retour à la ligne : sans cela Bootstrap impose white-space:nowrap,
       et le libellé (picto + texte) déborde de sa cellule justifiée en panneau étroit
       (laptop) et se fait couper par le bord du panneau. */
    white-space: normal;
}

.btn-group>.btn-group:first-child .radiobtn {
    text-align: left !important;
}

.btn-group>.btn-group:last-child .radiobtn {
    text-align: right !important;
}

.check-btn-icon {
    background: #FFF;
    border: 1px solid #CCC;
    border-radius: 5px;
    display: inline-block;
    color: #CCC
}

.check-btn-icon .icon-svg-antea {
    background-color: #CCC;
    height: 40px;
    width: 40px;
}

.check-btn-icon .icon-svg-antea,
.btn-group .radiobtn .label {
    display: inline-block;
    vertical-align: middle;
}

.btn-group .radiobtn .label {
    color: #CCC;
    /* font-size: 18px; */
    font-size: 14px;
    font-weight: 300;
    position: relative;
    padding-left: 0px;
    /* le mot trop long casse au lieu de déborder/être coupé (cellule justifiée étroite) */
    overflow-wrap: anywhere;
}

.btn-group .radiobtn.active .check-btn-icon {
    background: var(--color1);
    border-color: transparent;
    border-left: 3px solid var(--color5)
}

.btn-group .radiobtn.active .label {
    color: var(--color1)
}

.btn-group .radiobtn.active .check-btn-icon .icon-svg-antea {
    background-color: var(--color1-text);
}

/* === Carto : picto au-dessus, nom en dessous avec le « i » à côté ===
   Par défaut le picto et le libellé sont alignés côte à côte (inline). Ici on empile : picto centré sur sa ligne, nom
   centré dessous, et le « i » revient dans le flux juste après le nom. */

/* On centre chaque bouton (les règles génériques alignent le 1er à gauche / le
   dernier à droite, ce qui désaligne les pictos une fois empilés). */
.carto-filtre .btn-group>.btn-group:first-child .radiobtn,
.carto-filtre .btn-group>.btn-group:last-child .radiobtn {
    text-align: center !important;
}

/* Le nom passe sous le picto */
.carto-filtre .btn-group .radiobtn .label {
    display: block;
    margin-top: 4px;
}

/* Le « i » (.tdb-info, même badge que dans la fiche) suit le nom, dans le flux.
   font-style et font-weight sont repris explicitement : le libellé est en 300. */
.carto-filtre .btn-group .radiobtn .label .tdb-info {
    margin-left: 4px;
    vertical-align: middle;
    font-style: italic;
    font-weight: 700;
}

.carto-filtre .radio label {
    padding-left: 0
}

.carto-filtre .shiny-options-group .radio label span {
    padding-left: 27px
}

.carto-filtre input[type="radio"] {
    /* Add if not using autoprefixer */
    -webkit-appearance: none;
    /* Remove most all native input styles */
    appearance: none;
    /* For iOS < 15 */
    background-color: #E9E7E8;
    /* Not removed via appearance */
    margin: 0;

    font: inherit;
    color: currentColor;
    width: 20px;
    height: 20px;
    border: none;
    border-radius: 0.15em;
    transform: translateY(-0.075em);

    display: block;
    margin-right: 8px;
    text-align: center;

}

.carto-filtre input[type="radio"]::before {
    content: "\e900";
    font-family: 'bdetm';
    color: var(--color1);
    width: 10px;
    height: 10px;
    transform: scale(0);
    transform-origin: bottom left;
    transition: 120ms transform ease-in-out;
    display: inline-block;
    /* Windows High Contrast Mode */
    cursor: pointer;
    box-shadow: none;
    border: none;
    margin-left: -2px;
}

.carto-filtre input[type="radio"]:checked::before {
    transform: scale(1);
    box-shadow: none;
    border: none
}

.carto-filtre input[type="radio"]:focus {
    box-shadow: none;
    border: none
}

.carto-filtre .item-filtre .dropdown-toggle,
.carto-filtre .item-filtre .selectize-input {
    background: #FFF !important;
    border: 1px solid #ccc !important;
    color: #666 !important;
    font-size: 12px !important;
}

/* Couleur du texte du picker (.filter-option-inner-inner) : voir mod_carto.css
   (foyer unique des règles spécifiques aux filtres carto). */

.carto-filtre .item-filtre .bootstrap-select .dropdown-toggle .caret {
    border-top: 4px dashed #666 !important;
    border-bottom: none !important
}

.carto-filtre .item-filtre .dropdown-toggle.selected {
    background: var(--color1) !important;
    border: 1px solid var(--color1) !important;
    border-left: 3px solid var(--color5) !important;
    color: var(--color1-text) !important;
}

.carto-filtre .item-filtre .bootstrap-select .dropdown-toggle.selected .caret {
    border-top: 4px dashed var(--color1-text) !important;
}

.side .map-bottom-panel .filter-item .control-label {
    padding-left: 16px;
    position: relative;
    font-weight: 600;
}

.side .map-bottom-panel .filter-item .control-label:after {
    content: "\e900";
    font-family: 'bdetm';
    color: var(--color1);
    position: absolute;
    font-size: 14px;
    left: 0
}

.map-bottom-panel-title div:before {
    content: "\e905";
    font-family: 'bdetm';
    color: var(--color1);
    display: inline-block;
    margin-right: 5px;
    font-weight: 300;
}
.carto-filtre .carto-filtre-group:nth-child(2) .form-group{
    margin-bottom:0
}

/* .icon-svg-antea.bv_aelb { */
.antea-france {
    -webkit-mask: var(--svg-bv);
    mask: var(--svg-bv);
    display: block;
    height: 28px;
    width: 25px;
    background-color: var(--color3-text);
}

/**FICHE**/

/**Slider*/
.filter-container .irs .irs-single,
.filter-container .irs .irs-from,
.filter-container .irs .irs-to,
.filter-container .irs .irs-bar--single,
.filter-container .irs .irs-bar {
    background: var(--color3);
    color: var(--color3-text)
}

.filter-container .irs .irs-bar--single,
.filter-container .irs .irs-bar {
    border-color: rgba(0, 0, 0, 0.2);
}

.filter-container .irs .irs-line {
    background: var(--color1);
    border-color: rgba(0, 0, 0, 0.2);
}

.filter-container .item>div {
    display: inline-block;
    width: 100%;
    vertical-align: middle;
}

.filter-container.level2.fixed {
    position: fixed;
    top: var(--headerHeight);
    left: 0;
    right: 0;
    z-index: 99999;
}

.selectize-dropdown,
.selectize-dropdown.form-control {
    z-index: 999999;
}




[content-active="content-tabActive-tab_fiche_main"] .filter-container {
    padding: 15px;
    text-align: center;
    margin: 0 !important
}

#tdb-container-top,
#tdb-container-body {
    margin-left: 0;
    margin-right: 0
}

[content-active="content-tabActive-tab_fiche_main"] .filter-container .dropdown-toggle,
[content-active="content-tabActive-tab_fiche_main"] .filter-container select,
[content-active="content-tabActive-tab_fiche_main"] .filter-container .selectize-input {
    border-radius: var(--buttonRadius) !important;

}

[content-active="content-tabActive-tab_fiche_main"] .filter-container.level1 {
    background: #f6f6f4;
    color: #666 !important
}

[content-active="content-tabActive-tab_fiche_main"] #export-reload-btns.filter-container.level1 {
    background: var(--color1Darker);
    color: var(--color1-text)
}

[content-active="content-tabActive-tab_fiche_main"] .filter-container.level2 {
    background: var(--color5);
    padding: 5px 15px;
    color: var(--color5-text) !important
}

[content-active="content-tabActive-tab_fiche_main"] .filter-container .shiny-input-container {
    width: 100%;
    margin-bottom: 0
}

.filter-container .item {
    display: inline-block;
    float: none;
    text-align: left;
    margin: 0 15px
}

/* Barre de filtres de la fiche (département / catégorie / masse d'eau / bouton) :
   passage en flex pour que les items se partagent toujours la largeur totale
   selon des proportions fixes (ci-dessous), quel que soit leur contenu (ex: picker
   désactivé, liste "Chargement..." remplacée). Avec l'ancien display:inline-block,
   chaque item se dimensionnait sur son propre contenu, ce qui faisait bouger/
   désaligner les items entre deux rendus. align-items:flex-end aligne le bouton
   "Appliquer" (sans label) sur la ligne des champs de saisie des items voisins
   (qui ont un label au-dessus). */
/* La barre de filtres et la carte de situation sont côte à côte : align-items flex-start
   évite que la barre (haute d'une centaine de pixels) ne soit étirée sur les 300px de la
   carte, ce qui décalerait ses champs vers le bas. */
/* Le panneau de filtres contient les champs à gauche et la carte de situation à droite.
   align-items:flex-start garde les champs en haut du panneau : sans cela ils seraient
   alignés sur le bas des 300px de la carte. */
/* Ligne haute de la fiche : la sélection (filtres + carte) à gauche, le contenu à
   droite. align-items:flex-start laisse chaque colonne à sa hauteur propre — sans quoi
   le panneau de gauche serait étiré et sa position sticky n'aurait plus d'effet. */
/* Marge basse : la fiche entière (indicateurs DCE compris) tient désormais dans cette
   ligne, il n'y a plus de .fiche-bas pour porter l'espace sous la page. */
.fiche-haut {
    display: flex;
    align-items: flex-start;
    gap: 24px;
    padding: 20px 10px 20px 30px;
}

/* Le bas de la fiche (indicateurs, graphiques) reprend la gouttiere de .fiche-haut :
   sans elle il touchait les bords de la page alors que tout le haut est en retrait. */
.fiche-bas {
    display: block;
    padding: 0 50px 20px;
}

/* Le bloc de filtres reste visible pendant le défilement de la fiche. top se cale sous
   la navbar (--headerHeight) et sous l'en-tête de fiche, lui aussi collant. Le z-index
   passe au-dessus du contenu du tableau de bord, qui défile dessous. */
/* RESPONSIVE FICHE — largeur du panneau : --fiche-panneau-largeur (vars.css, 32% de la
   page). La transition sert au repli (plus bas). */
#fiche_filtre {
    flex: 0 0 var(--fiche-panneau-largeur);
    min-width: 0;
    position: sticky;
    top: var(--headerHeight);
    z-index: 20;
    transition: flex-basis 0.3s ease;
}

/* ---------------------------------------------------------------------------
   RESPONSIVE FICHE — repli du panneau filtres + carte
   Même principe que le panneau de filtres de la carto (.close-filter / closed-filter) :
   un bouton sur le bord du panneau le replie, et le contenu de la fiche prend toute la
   largeur. Utile sur les petits écrans de PC, une fois la masse d'eau choisie.
   La classe fiche-filtre-replie est posée sur .fiche-haut par script.js.
   --------------------------------------------------------------------------- */

/* Bouton en haut à droite du panneau, sur la ligne du titre « Sélectionner une masse
   d'eau » (qui lui laisse la place, voir padding-right plus bas). */
#fiche_filtre .fiche-replier {
    position: absolute;
    top: 0;
    right: 0;
    z-index: 2;
    width: 28px;
    height: 28px;
    padding: 0;
    border: none;
    border-radius: var(--radius-bloc);
    background: var(--color1);
    color: var(--color1-text);
    font-size: 13px;
    line-height: 28px;
    text-align: center;
    cursor: pointer;
}

#fiche_filtre .fiche-replier:hover,
#fiche_filtre .fiche-replier:focus {
    background: var(--color1Darker);
}

#fiche_filtre .carto-filtre-header {
    padding-right: 36px;
}

/* Panneau replié : il ne garde aucune largeur et son contenu est masqué. Le bouton
   reste seul visible, au bord gauche de la page, chevrons retournés. La carte Leaflet
   perd sa largeur avec le panneau : script.js la redessine au dépliage. */
.fiche-haut.fiche-filtre-replie {
    gap: 40px;
}

.fiche-haut.fiche-filtre-replie #fiche_filtre {
    flex-basis: 0;
}

.fiche-haut.fiche-filtre-replie #fiche_filtre>*:not(.fiche-replier) {
    visibility: hidden;
}

.fiche-haut.fiche-filtre-replie #fiche_filtre .fiche-replier {
    right: auto;
    left: 0;
}

.fiche-haut.fiche-filtre-replie #fiche_filtre .fiche-replier .fa,
.fiche-haut.fiche-filtre-replie #fiche_filtre .fiche-replier svg {
    transform: rotate(180deg);
}

/* RESPONSIVE FICHE — sur grand écran (au-delà de 1540px, seuil de « largeur
   confortable » déjà utilisé par mod_carto.css), le contenu a assez de place : pas de
   bouton de repli. L'état replié est neutralisé aussi, au cas où la fenêtre aurait été
   agrandie panneau replié. Le repli reste donc disponible entre 1025 et 1540px. */
@media (min-width: 1541px) {
    #fiche_filtre .fiche-replier {
        display: none;
    }

    #fiche_filtre .carto-filtre-header {
        padding-right: 0;
    }

    .fiche-haut.fiche-filtre-replie {
        gap: 24px;
    }

    .fiche-haut.fiche-filtre-replie #fiche_filtre {
        flex-basis: var(--fiche-panneau-largeur);
    }

    .fiche-haut.fiche-filtre-replie #fiche_filtre>*:not(.fiche-replier) {
        visibility: visible;
    }
}

.fiche-haut-contenu {
    flex: 1 1 auto;
    min-width: 0;
}

/* En colonne : les deux sélecteurs puis la carte (la fiche suit la sélection, sans
   bouton de validation).
   Fond et retrait neutralisés : le panneau se pose sur la page comme celui de la carto,
   sa structure tenant au filet de .carto-filtre-header et au cadre de la carte plutôt
   qu'à un aplat gris. */
/* .row pose deux pseudo-elements de clearfix (content:" "; display:table). Dans un
   conteneur flex ils deviennent des items a part entiere : de hauteur nulle, mais le
   gap leur reserve 15 px avant le premier champ et 15 px apres le dernier. D'ou un
   panneau de filtres decale vers le bas par rapport au titre de la masse d'eau, et une
   colonne de gauche plus haute que son contenu — c'est elle qui fixe la hauteur de
   .fiche-haut, donc le vide sous la fiche. */
#fiche_filtre .filter-container.level1::before,
#fiche_filtre .filter-container.level1::after {
    display: none;
}

#fiche_filtre .filter-container.level1 {
    display: flex;
    flex-direction: column;
    align-items: stretch;
    gap: 15px;
    width: 100%;
    background: transparent;
    padding: 0;
}

/* .filter-container .item porte un retrait de 15 px de chaque cote, herite de la barre
   de filtres horizontale de la carto ou il tenait lieu d'espacement. Dans cette colonne
   flex c'est le gap qui espace : le retrait ne faisait plus que desaligner les pickers
   et le bouton par rapport a l'en-tete et a la carte, restes au bord. */
#fiche_filtre .filter-container.level1 > .item,
#fiche_filtre .fiche-filtre-champs > .item {
    margin-left: 0;
    margin-right: 0;
}

/* Le libellé du groupe hérite de .carto-filtre-header (icône filtre, filet color1) ;
   seul l'espacement est adapté à cette colonne. */
#fiche_filtre .carto-filtre-header {
    margin-bottom: 5px;
    /* .filter-container centre son contenu : l'en-tete, lui, se lit a gauche */
    text-align: left;
}

#fiche_filtre .fiche-filtre-champs.carto-filtre-group {
    margin-bottom: 0;
}

#fiche_filtre .fiche-filtre-champs {
    display: flex;
    flex-direction: column;
    flex: 0 0 auto;
    width: 100%;
    min-width: 0;
}

/* Champ renseigne : aplat color1 et lisere color5 a gauche, comme les filtres de la
   carto (.carto-filtre .item-filtre .dropdown-toggle.selected). Cote carto la classe
   `selected` est posee par script.js au changement ; ici on s'appuie sur la classe
   bs-placeholder, que bootstrap-select retire des qu'une valeur est choisie. Elle est
   donc juste des le premier rendu — ce qui compte pour la fiche, dont les filtres
   arrivent deja remplis quand on vient de la carto. */
#fiche_filtre .fiche-filtre-champs .dropdown-toggle:not(.bs-placeholder) {
    background: var(--color1) !important;
    border: 1px solid var(--color1) !important;
    border-left: 3px solid var(--color5) !important;
    color: var(--color1-text) !important;
}

#fiche_filtre .fiche-filtre-champs .dropdown-toggle:not(.bs-placeholder) .filter-option-inner-inner {
    color: var(--color1-text) !important;
}

#fiche_filtre .fiche-filtre-champs .dropdown-toggle .caret {
    border-top: 4px dashed #666 !important;
    border-bottom: none !important;
}

#fiche_filtre .fiche-filtre-champs .dropdown-toggle:not(.bs-placeholder) .caret {
    border-top: 4px dashed var(--color1-text) !important;
}

/* Memes coins que les filtres de la carto (.carto-filtre .bootstrap-select >
   .dropdown-toggle) : l'onglet fiche impose sinon un radius nul a tous ses champs,
   d'ou leur allure de simple rectangle. */
#fiche_filtre .fiche-filtre-champs .bootstrap-select>.dropdown-toggle {
    border-radius: var(--radius-bloc) !important;
    max-width: 100%;
}

/* Carte de situation (mod_fiche_filtre.R) : occupe toute la largeur de la colonne.
   position:relative sert de référence à la recherche posée en surimpression.
   La hauteur vient d'un rapport de forme plutôt que d'une valeur fixe : une carte se lit
   dans un cadre à peu près carré, pas dans un bandeau. Les bornes évitent les extrêmes
   sur écran très large comme sur écran étroit. */
#fiche_filtre .map-info {
    flex: 0 0 auto;
    width: 100%;
    min-width: 0;
    position: relative;
    display: flex;
    height: auto;
    aspect-ratio: 4 / 3;
    min-height: 260px;
    /* RESPONSIVE FICHE — 420px au plus, et jamais plus que la hauteur d'écran restante
       sous la navbar et les filtres (--fiche-hauteur-filtres, vars.css) : sur un écran
       de 768px de haut, le panneau collant tient alors entièrement, sans que le bas de
       la carte soit caché. */
    max-height: min(420px, calc(100vh - var(--headerHeight) - var(--fiche-hauteur-filtres)));
}

/* Recherche de masse d'eau, en surimpression de la carte (même principe que
   #choix_comparaison-ctnt dans mod_carto.css). Décalée à droite des boutons de zoom
   Leaflet, et au-dessus d'eux via z-index. */
/* RESPONSIVE FICHE — passage en une colonne sous 1024px (même seuil que .hide-mobil
   dans mod_carto.css). Au-dessus, le panneau de 384px repliable laisse assez de place
   au contenu : les portables de 1280-1366px restent en deux colonnes. En dessous, la
   sélection repasse pleine largeur au-dessus du contenu, la carte redevient un bandeau,
   et le repli n'a plus d'objet : bouton masqué, état replié neutralisé. */
@media (max-width: 1024px) {
    .fiche-haut,
    .fiche-haut.fiche-filtre-replie {
        flex-direction: column;
        gap: 20px;
    }

    #fiche_filtre,
    .fiche-haut.fiche-filtre-replie #fiche_filtre {
        flex: 0 0 auto;
        width: 100%;
        position: static;
    }

    .fiche-haut.fiche-filtre-replie #fiche_filtre>*:not(.fiche-replier) {
        visibility: visible;
    }

    #fiche_filtre .fiche-replier {
        display: none;
    }

    #fiche_filtre .carto-filtre-header {
        padding-right: 0;
    }

    #fiche_filtre .map-info {
        aspect-ratio: auto;
        height: 320px;
        max-height: none;
    }
}

#fiche_filtre .map-info-search {
    position: absolute;
    z-index: 99;
    top: 10px;
    left: 50px;
    right: 10px;
    max-width: 500px;
    font-size: 12px;
}

/* L'apparence du champ (coins arrondis, fond blanc, liste large) vient de
   .select-carto dans mod_carto.css : seule la mise en surimpression reste ici. */

#fiche_filtre .map-info .leaflet {
    border: 1px solid #dedede;
    border-radius: var(--radius-bloc);
    display: flex;
    min-height: 0;
    width: 100%;
    height: 100% !important;
}

#fiche_filtre .map-info .leaflet-top,
#fiche_filtre .map-info .leaflet-bottom {
    z-index: 3;
}

/* Infobulle au survol d'une masse d'eau : carte de la fiche et volet cartographique
   partagent la même déclaration — c'est ce qui garantit que les deux ne divergeront plus.
   Leaflet les pose en white-space: nowrap ; sur une carte étroite un nom long sortait du
   cadre et s'y trouvait coupé. Le texte se replie donc en hauteur plutôt que de déborder.
   width et non max-width : les panneaux de Leaflet sont positionnés sans largeur propre,
   une infobulle absolue n'y trouve aucune largeur disponible et se replie alors sur son
   mot le plus long — mesuré, 72 px de large pour 238 px de haut. */
#fiche_filtre .map-info .leaflet-tooltip:not(.etiquette-massedeau),
.map-container .leaflet-tooltip {
    white-space: normal;
    width: 210px;
    text-align: left;
    line-height: 1.4;
}

/* Étiquette de code posée en permanence sur chaque masse d'eau (voir
   tracer_massedeau_disponibles()). textOnly retire déjà le cadre blanc de Leaflet ; le
   halo blanc la rend lisible aussi bien sur le plan que sur la vue satellite. */
#fiche_filtre .map-info .leaflet-tooltip.etiquette-massedeau {
    padding: 0;
    font-size: 11px;
    font-weight: 700;
    color: #1b1b1b;
    text-shadow: -1px -1px 2px #fff, 1px -1px 2px #fff, -1px 1px 2px #fff, 1px 1px 2px #fff;
}

/* Les pickers restent pleine largeur. */
#fiche_filtre .filter-container.level1 .item .btn.dropdown-toggle {
    width: 100%;
}

.filter-container .item .shiny-input-container label,
.filter-container .item .shiny-input-container>div {
    display: inline-block;
    width: 100%
}

.filter-container .item label {
    width: 100%
}

.filter-container select {
    width: 100%
}

.filter-container .item .selectize-control.single .selectize-input,
.filter-container .item .dropdown.bootstrap-select {
    width: 100% !important;
    max-width: 100% !important;
}

/* Modif dropdown surtout pour les départements/régions */
.dropdown-menu {
    z-index: 1001 !important;
    /* max-width: 500px; */
    /* right: 0; */
    top: 100% !important;
    bottom: auto !important;
    margin-top: 2px;
}

/* Suppression de l'ascenseur sur le menu parent */
.bootstrap-select .dropdown-menu {
    max-height: none !important;
    overflow-y: visible !important;
}

/* Le plafond de hauteur + le défilement s'appliquent à la liste interne
   (.dropdown-menu.inner) et non au menu entier : la searchbox et les boutons
   « Tout sélectionner / Dé-sélectionner » en haut du menu occupent de la place,
   donc plafonner le menu entier rognait le bas de la liste. En ciblant .inner,
   toute la liste reste accessible au défilement. */
.bootstrap-select .dropdown-menu.inner {
    max-height: 300px !important;
    overflow-y: auto !important;
    overflow-x: hidden !important;
}

#tdb-container-body {
    padding: 20px 50px;
    display: flex;
}

/* Colonne de droite de .fiche-haut : le padding est porté par le conteneur flex. */
#tdb-container-top {
    flex: 1 1 auto;
    min-width: 0;
}

/* Code et nom de la masse d'eau affichée, en tête de la colonne de contenu, avec le
   bouton d'export poussé à l'extrémité droite de la même ligne. */
/* En-tête de la fiche : même vocabulaire que les filtres renseignés (liseré color5 à
   gauche, arrondi --radius-bloc) et que le bandeau de synthèse (fond #F4F4F4).
   Collant sous la navbar, comme le panneau de filtres : la masse d'eau affichée reste
   lisible pendant la lecture des tableaux DCE, en bas d'une longue colonne. Le fond est
   opaque, le contenu défile dessous. */
.fiche-titre-massedeau {
    position: sticky;
    top: var(--headerHeight);
    z-index: 15;
    display: flex;
    align-items: center;
    gap: 14px;
    margin-bottom: 15px;
    padding: 12px 18px;
    background: #F4F4F4;
    border-left: 3px solid var(--color5);
    border-radius: var(--radius-bloc);
    color: var(--color1Darker);
    /* Marge blanche sous le bandeau collé : le contenu qui défile disparaît 12px avant
       lui au lieu de venir buter contre son bord. Une ombre pleine plutôt qu'une marge :
       elle ne décale rien dans la page et reste invisible sur le fond blanc tant que
       rien ne passe dessous. */
    box-shadow: 0 12px 0 0 #FFF;
}

.fiche-titre-texte {
    min-width: 0;
}

/* Catégorie et code : de quoi repérer la masse d'eau, pas ce qu'on vient lire */
.fiche-titre-surtitre {
    font-size: 12px;
    font-weight: 600;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: #6b6b6b;
    line-height: 16px;
}

.fiche-titre-libelle {
    font-size: 20px;
    font-weight: 700;
    line-height: 26px;
    color: var(--color1Darker);
    overflow-wrap: anywhere;
}

.fiche-titre-code {
    font-size: 14px;
    line-height: 18px;
}

.fiche-titre-export {
    flex: 0 0 auto;
}

/* actionButton() rend l'icône et le libellé dans deux span : le flex les espace. */
.fiche-export-btn.btn {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 5px 14px;
    border: 1px solid var(--color1);
    border-radius: var(--buttonRadius);
    background: #FFF;
    color: var(--color1);
    font-size: 13px;
    font-weight: 600;
}

.fiche-export-btn.btn:hover,
.fiche-export-btn.btn:focus {
    background: var(--color1);
    color: var(--color1-text);
}

/* Pictogramme du type de masse d'eau (voir picto_massedeau()) : cale sur la ligne de
   base du titre plutot qu'en flex, pour que le nom long continue de passer a la ligne
   normalement. currentColor : il prend la couleur du titre. */
.picto-massedeau {
    vertical-align: -0.28em;
    margin-right: 10px;
    flex: 0 0 auto;
}

/* Variante en masque CSS (plan d'eau, voir picto_massedeau()) : la couleur du titre,
   comme le currentColor des SVG en ligne, au lieu du color1 par défaut des icônes
   .icon-svg-antea. Les dimensions sont posées en ligne par la fonction. */
.picto-massedeau.icon-svg-antea {
    display: inline-block;
    background-color: currentColor;
}

/* Les deux tables se partagent la largeur de la colonne, le graphique passe dessous. */
#tdb-container-top .tdb-tables {
    display: flex;
    text-align: left;
}

.filter-container#export-reload-btns {
    position: fixed;
    bottom: 0;
    left: 0;
    width: calc(100%);
    z-index: 10;
    text-align: center;
}

.filter-container#export-reload-btns>div {
    display: inline-block;
    margin: 0 20px
}

.modal .btn-line {
    background: var(--color1Darker);
    color: var(--color1-text);
    margin: -15px;
    margin-top: 0;
    text-align: center;
    padding: 15px;
}

.modal .shiny-input-container:not(.shiny-input-container-inline) {
    margin: 0 auto;
    margin-bottom: 15px;
}

.filter-container#export-reload-btns .btn.btn-default,
.modal .btn-line .btn.btn-default {
    border-radius: 0;
    border: none;
    background: var(--color3);
    color: var(--color3-text)
}

/* Les rubriques de la fiche se partagent la colonne à parts égales. flex-direction
   column : chaque bloc empile son titre au-dessus de sa table, alors que le display:flex
   d'origine (une seule rubrique, sans titre) les aurait mis côte à côte. */
#tdb-container-top .tdb-tables {
    gap: 20px;
}

/* Les deux colonnes du bloc se partagent la largeur : la table d'identification seule
   a gauche, la colonne acteurs + occupation du sol a droite. Le selecteur d'enfant
   direct evite que la table imbriquee dans la colonne de droite ne soit elle aussi
   etiree. */
#tdb-container-top .tdb-tables > .table-info,
#tdb-container-top .tdb-tables > .tdb-colonne {
    flex: 1 1 0;
    min-width: 0;
}

/* Identification, acteurs et occupation du sol : même bloc que les boîtes d'enjeux
   (fond blanc, contour gris clair, filet color1 en haut, titre à l'intérieur). */
#tdb-container-top .tdb-tables .table-info,
#tdb-container-top .graph-info {
    display: flex;
    flex-direction: column;
    background: #FFF;
    border: 1px solid #dedede;
    border-top: 3px solid var(--color1);
    border-radius: var(--radius-bloc);
    padding: 12px 15px;
}

/* Colonne de droite : la table, puis le graphique empile dessous. */
#tdb-container-top .tdb-colonne {
    display: flex;
    flex-direction: column;
    gap: 20px;
}

/* Pictogrammes des titres de rubrique : un seul espacement, quel que soit le titre. */
#tdb-container-top .tdb-table-titre>svg,
#tdb-container-top .tdb-table-titre>.fa,
#tdb-container-top .tdb-table-titre>.fas,
.tdb-section-titre .fa,
.tdb-section-titre .fas,
.tdb-infobox-titre .fa,
.tdb-infobox-titre .fas {
    margin-right: 8px;
    opacity: 0.85;
}

/* Même titre que .tdb-infobox-titre */
#tdb-container-top .tdb-table-titre {
    font-size: 15px;
    font-weight: 600;
    line-height: 22px;
    color: var(--color1);
    margin-bottom: 4px;
    padding-bottom: 6px;
    border-bottom: 1px solid #ededed;
}

#tdb-container-top .tdb-tables .table-info>div {
    width: 100%
}

/* table-layout:fixed : sans lui, la cellule s'elargit au lieu de couper son contenu et
   l'ellipse ne se declenche jamais. La largeur du libelle est figee ici, a ajuster si
   un libelle du referentiel venait a deborder. */
/* Meme habillage que les boites « Enjeux majeurs » plus bas dans la page : contour gris
   clair, filet color1 en haut. L'aplat bleu donnait a ces tables un poids visuel
   superieur aux enjeux, alors que l'identification n'est que du contexte. */
#tdb-container-top .tdb-tables .table-info table {
    background: transparent;
    width: 100% !important;
    height: 100% !important;
    margin-bottom: 0;
    table-layout: fixed;
    /* Le contour est porté par le bloc .table-info */
    border: none;
}

/* Colonne des intitules : largeur fixe, calee sur le libelle le plus long de chaque
   table (mesure : 229 px pour « Densite de la population en 2021 », 211 px pour
   « Contrat et Accord de territoire »). En pourcentage, elle suivrait la largeur de la fenetre
   et finirait par rogner les intitules sur ecran etroit ; en pixels, c'est la valeur
   qui cede la place — et elle, on peut la lire au clic. */
#tdb-container-top .tdb-tables > .table-info table tr>td:nth-child(1) {
    width: 250px;
}

#tdb-container-top .tdb-colonne .table-info table tr>td:nth-child(1) {
    width: 230px;
}

/* Une ligne par indicateur quoi qu'il arrive : le navigateur coupe a la largeur exacte
   de la colonne. Le texte complet reste dans le DOM, script.js le relit au clic. */
/* Taille posée explicitement : les boîtes d'enjeux s'alignent dessus */
#tdb-container-top .tdb-tables .table-info table tr>td {
    border: none;
    border-bottom: 1px solid #ededed;
    vertical-align: middle;
    font-size: 14px;
    font-weight: 600;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

/* Pas de filet sous la derniere ligne : le contour de la table le porte deja. */
#tdb-container-top .tdb-tables .table-info table tr:last-child>td {
    border-bottom: none;
}

/* Classe posee par script.js sur les seules cellules dont le contenu est reellement
   coupe. Le curseur « help » plutot que « pointer » : la bulle s'ouvre au survol, il n'y
   a rien a cliquer. */
#tdb-container-top .tdb-tables .table-info table tr>td.tdb-cellule-tronquee {
    cursor: help;
}

/* Le dernier mot et son « i » ne se separent pas. */
.tdb-insecable {
    white-space: nowrap;
}

/* « i » informatif pose apres un libelle quand le referentiel decrit l'indicateur.
   Discret au repos, il prend la couleur du titre au survol pour signaler qu'il reagit.
   Le contenu est dans data-info et la bulle est rendue par script.js. */
.tdb-info {
    display: inline-block;
    width: 15px;
    height: 15px;
    border: 1px solid #c3ccd2;
    border-radius: 50%;
    color: #8a969e;
    font-size: 11px;
    font-style: italic;
    font-weight: 700;
    line-height: 13px;
    text-align: center;
    vertical-align: 1px;
    cursor: help;
    /* La cellule est en nowrap avec ellipse : sans cela le « i » serait le premier
       rogne sur un libelle long, alors que c'est lui qui invite au survol. */
    flex: 0 0 auto;
}

.tdb-info:hover {
    border-color: var(--color1);
    color: var(--color1);
}

/* Bulle de lecture du contenu complet */
.popover.tdb-popover {
    max-width: 420px;
}

.popover.tdb-popover .popover-content {
    white-space: normal;
    word-break: break-word;
    font-size: 13px;
    line-height: 1.5;
    color: #666;
}

/* L'intitule s'efface, la valeur porte la couleur : c'est elle qu'on vient lire. */
#tdb-container-top .tdb-tables .table-info table tr>td:nth-child(1) {
    font-weight: normal;
    color: #6b6b6b;
}

/* Valeur en noir gras, comme dans les boîtes d'enjeux */
#tdb-container-top .tdb-tables .table-info table tr>td:nth-child(2) {
    color: #454545;
    font-weight: 700;
}

#tdb-container-top .graph-info {
    display: flex;
    flex-direction: column;
}

#tdb-container-top .right-content .table-info-container {
    display: flex;
    flex-wrap: wrap;
}

#tdb-container-top .right-content .table-info {
    border: 1px solid #dedede;
    flex: 1 1 100%;
}

#tdb-container-top .right-content .icon-info {
    width: 150px;
    float: left;
    display: table;
    height: 100%;
    background: #efefef;
    vertical-align: middle;
    position: relative;
}

#tdb-container-top .right-content .table-info>div:nth-child(2) {
    width: calc(100% - 150px);
    display: table;
    height: 100%;
}

#tdb-container-top .right-content .table-info {
    margin-bottom: 15px
}

#tdb-container-top .right-content .table-info:last-child {
    margin-bottom: 0
}

#tdb-container-top .right-content .table-info>div:nth-child(2) table {
    width: 100% !important;
    height: 100%;
    margin-bottom: 0;
}

#tdb-container-top .right-content .table-info .icon-svg-antea {
    width: 85px;
    height: 85px;
    position: absolute;
    top: 50%;
    left: 50%;
    position: absolute;
    top: 50%;
    -moz-transform: translateX(-50%) translateY(-50%);
    -webkit-transform: translateX(-50%) translateY(-50%);
    -o-transform: translateX(-50%) translateY(-50%);
    -ms-transform: translateX(-50%) translateY(-50%);
    transform: translateX(-50%) translateY(-50%);
    background-color: var(--color1Darker)
}

.icon.sylvicole {
    background: var(--svg-sylvicole);
    background-size: 100%
}

.graph-container .tab-pane {
    border: 1px solid var(--color1);
    border-top: none;
    padding: 15px
}

#tdb-container-body h2,
#tdb-container-body h3 {
    padding: 0;
    margin: 0;
}

#tdb-container-body h2 {

    font-size: 21px;
    font-weight: 600;
    border-bottom: 2px solid var(--color1Darker);
    color: var(--color1Darker);
    margin-bottom: 20px;
    padding-bottom: 10px
}

#tdb-container-body .panel-default>.panel-heading {

    cursor: pointer;
    padding: 0
}

#tdb-container-body h3 {
    padding: 8px 15px;
    background: var(--color5);
    color: var(--color5-text);
    font-size: 18px;
    font-weight: 600;
    -webkit-transition: all 0.6s ease-in;
    -moz-transition: all 0.6s ease-in;
    -ms-transition: all 0.6s ease-in;
    -o-transition: all 0.6s ease-in;
    transition: all 0.6s ease-in;
}

#tdb-container-body h3:hover {
    background: var(--color5-text);
    color: var(--color5);
}

#tdb-container-body h3 a {
    text-decoration: none;
    color: var(--color5-text) !important;
}

#tdb-container-body h3:hover a {
    color: var(--color5) !important;
}

#tdb-container-body .graph-item {
    text-align: center;
    margin: 20px 0;
    margin-bottom: 30px;
    border-top: 1px solid #dedede;
    padding-top: 30px;
    margin-top: 0
}

#tdb-container-body .grid-stack-item-content {
    text-align: center;
}

#tdb-container-body .gridstack {
    background: #FFF !important
}

#tdb-container-body .panel-body .graph-item:first-child {
    border-top: none;
}

#tdb-container-body h4 {
    display: inline-block;
    margin: 0;
    position: relative;
    padding: 8px 15px;
    padding-right: 50px;
    background: var(--color1);
    color: var(--color1-text);
    width: auto;
    min-height: 60px;
    margin-top: 15px
}

#tdb-container-body h4 .trash {
    position: absolute;
    right: 0;
    top: 0;
    background: var(--color3);
    color: var(--color3-text) !important;
    -webkit-transition: all 0.6s ease-in;
    -moz-transition: all 0.6s ease-in;
    -ms-transition: all 0.6s ease-in;
    -o-transition: all 0.6s ease-in;
    transition: all 0.6s ease-in;
    line-height: 50px;
    width: 40px;
    text-align: center;
    cursor: pointer;
    display: table;
    height: 100%;
    border-radius: 0 !important;
    border: none !important;
}

#tdb-container-body h4 .trash:hover {
    background: var(--color5);
    color: var(--color5-text) !important;


}

#tdb-container-body h4 .sous-titre {
    font-weight: normal;
    font-size: 16px;
    font-style: italic;
    margin-top: 5px;
    padding-top: 5px;
    border-top: 1px solid var(--color1Darker)
}

#tdb-container-body h4 .icon-cat {
    position: absolute;
    top: 0px;
    left: -45px;
    background: var(--color1Darker);
    padding: 10px 12px 0;
    display: table;
    height: 100%;
}

#tdb-container-body h4 .icon-cat i {
    background: var(--color1-text);
    height: 30px;
    width: 30px;
    margin-top: 8px
}

#tdb-container-body h4 .icon-type-indic {
    position: absolute;
    background: var(--color5);
    padding: 10px 12px 0;
    top: -15px;
    height: 38px;
    width: 38px;
    border-radius: 50%;
    left: -65px;
    z-index: 9;
}

#tdb-container-body h4 .icon-type-indic i {
    background: var(--color5-text);
    height: 25px;
    width: 25px;
    margin: -3px 0px 0 -5px;

}

/*POPUP carto*/

.highlight-indicator-ctnt {
    margin: 0 -15px;
    margin-top: -15px;
    margin-bottom: 15px;
    padding: 30px;
    background: url(./www/img/illu-foret.jpg) top center;
    background-size: cover;
    background-repeat: no-repeat;
}

.highlight-indicator {
    border-radius: 0;
    background: var(--color2);
    padding: 0;
    padding-left: 15px
}

.highlight-indicator .header-illu {
    height: 150px
}

.highlight-indicator .highlight-percent {
    border-radius: 0;
    margin-left: 10px;
    vertical-align: sub;
}

.popu-filter-container {
    background: var(--color5);
    padding: 5px 15px;
    color: var(--color5-text) !important;
}

/*GLOSSAIRE*/
[content-active="content-tabActive-tab_documentation"] .tab-content {
    padding: 15px 0
}

[content-active="content-tabActive-tab_documentation"] .dataTables_scrollHeadInner {
    background: var(--color5);
    color: var(--color5-text) !important;
}

[content-active="content-tabActive-tab_documentation"] table.dataTable>thead>tr>th,
[content-active="content-tabActive-tab_documentation"] table.dataTable>thead>tr>td {
    border-bottom: 1px solid rgba(0, 0, 0, 0.1);
}

[content-active="content-tabActive-tab_documentation"] table.dataTable tbody tr td {
    text-align: justify;
    vertical-align: top !important;
}

.tab-content .dataTables_wrapper .dataTables_paginate .paginate_button {
    border: none
}

.tab-content .dataTables_wrapper .dataTables_paginate .paginate_button:hover {
    border: none;
    background: var(--color1);
    color: #FFFFFF
}

.tab-content .dataTables_wrapper .dataTables_paginate .paginate_button.current {
    border: none;
    background: var(--color3);
    color: #FFFFFF !important
}

.tab-content table.dataTable tbody tr.even {
    background: #f1f1f1
}

.tab-content table.dataTable .form-control {
    border-radius: 0;
}

/* [content-active="content-tabActive-tab_documentation"] .highlight-indicator-ctnt,
[content-active="content-tabActive-tab_sources_donnees"] .highlight-indicator-ctnt,
[content-active="content-tabActive-tab_docs_utiles"] .highlight-indicator-ctnt {
    min-height: 190px;
    background-position: center;
} */

/**/
#carto_main_1-carto_filtre_1-carto_filtre_chasse_1-ui_filtre_chasse .col-sm-6:last-child {
    padding-left: 0;
}

#carto_main_1-carto_filtre_1-carto_filtre_chasse_1-ui_filtre_chasse .col-sm-6:last-child .btn,
#carto_main_1-carto_filtre_2-carto_filtre_chasse_1-ui_filtre_chasse .col-sm-6:last-child .btn {
    font-size: 12px
}

/*Style pour contenu texte*/
.txt-content.intro {
    margin-bottom: 20px
}

.txt-content h1 {
    color: var(--color1);
    font-weight: bold;
}

.txt-content h2 {
    color: var(--color3);
}

.txt-content h3 {
    color: var(--color1);
}

.txt-content p {
    text-align: justify;
}

/* Version application : désormais affichée sur l'accueil (voir .version-badge
   dans mod_accueil.css), plus dans le header. */
.navbar-inverse .navbar-collapse {
    position: relative;
}

/* Ajustement largeur filtre et carto */

/* Surcharger Bootstrap pour simuler des colonnes 2.5 / 6.5 */

/* .carto-filtre {
    flex: 0 0 20%;
    max-width: 20%;
}

.map-container {
    flex: 0 0 55%;
    max-width: 55%;
}

.col-md-3 carto-stats-panel {
    flex: 0 0 25%;
    max-width: 25%;
} */
/* =============================================================================
   FICHE MASSE D'EAU — section "Enjeux majeurs" (mod_fiche_tableaudebord.R)
   ============================================================================= */

/* Les enjeux majeurs ont pris la place du graphique : ils sont desormais dans la
   colonne de contenu, qui porte deja le retrait lateral de la page. */
#tdb-enjeux {
    padding-top: 20px;
}

/* Le séparateur demandé : un filet sur toute la largeur, le titre posé au milieu.
   Les deux ::before/::after tracent le filet de part et d'autre du texte. */
.tdb-section-titre {
    display: flex;
    align-items: center;
    gap: 15px;
    /* L'espace au-dessus est porte par le padding de la section (#tdb-enjeux,
       #tdb-indicateurs-dce) : un seul reglage a tenir, identique d'une section a l'autre. */
    margin: 0 0 15px;
    font-size: 21px;
    font-weight: 600;
    color: var(--color1);
    text-align: center;
}

/* Liseré gris clair : le titre en color1 porte seul l'accent */
.tdb-section-titre::before,
.tdb-section-titre::after {
    content: "";
    flex: 1 1 0;
    border-top: 2px solid #D4D4D4;
}

/* Les boîtes se répartissent la largeur et repassent à la ligne sur écran étroit */
.tdb-infobox-container {
    display: flex;
    flex-wrap: wrap;
    gap: 15px;
    align-items: stretch;
}

.tdb-infobox {
    flex: 1 1 220px;
    min-width: 0;
    border: 1px solid #dedede;
    border-top: 3px solid var(--color1);
    border-radius: var(--radius-bloc);
    background: #FFF;
    padding: 12px 15px;
}

.tdb-infobox-titre {
    font-size: 15px;
    font-weight: 600;
    color: var(--color1);
    margin-bottom: 4px;
    padding-bottom: 6px;
    border-bottom: 1px solid #ededed;
}

/* Libellé à gauche, valeur à droite : la valeur reste lisible même quand le libellé
   passe sur deux lignes. */
/* Lignes, libellés et valeurs : mêmes styles que les tables identification / acteurs
   (14px, libellé gris normal, valeur #454545 en gras, filet entre les lignes). */
.tdb-infobox-ligne {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 10px;
    padding: 6px 0;
    border-bottom: 1px solid #ededed;
}

.tdb-infobox-ligne:last-child {
    border-bottom: none;
}

.tdb-infobox-libelle {
    color: #6b6b6b;
    font-size: 14px;
    font-weight: normal;
    min-width: 0;
}

.tdb-infobox-valeur {
    font-size: 14px;
    font-weight: 700;
    color: #454545;
    text-align: right;
    white-space: nowrap;
}

/* ---------------------------------------------------------------------------
   Indicateurs de l'état des lieux (fiche masse d'eau)
   Section pleine largeur sous « Enjeux majeurs ». Un onglet par thème du
   référentiel, une table par onglet : libellés à gauche, un millésime par colonne.
   --------------------------------------------------------------------------- */

#tdb-indicateurs-dce {
    padding-top: 20px;
}

/* Le .nav-tabs global porte un filet supérieur destiné aux onglets posés sous un
   contenu. Ici les onglets coiffent la table : le filet passe sous eux. */
#tdb-indicateurs-dce .nav-tabs {
    border-top: none;
    border-bottom: 3px solid var(--color1);
    margin-bottom: 0;
}

#tdb-indicateurs-dce .nav-tabs>li>a {
    color: #6b6b6b;
    font-weight: 600;
    border-radius: var(--radius-bloc) var(--radius-bloc) 0 0;
}

/* Onglets non sélectionnés : fin liseré gris, pour qu'ils se lisent comme des
   intercalaires et non comme du texte flottant. Pas de bord bas, l'onglet repose sur le
   trait color1 des onglets. Le haut est porté par la règle ci-dessous : 3px au niveau
   thème (règle « liseré en haut » plus bas), 1px au niveau famille. !important sur le
   haut : la règle globale `.nav-tabs li a { border-top: none !important }` l'emporterait
   sinon. */
#tdb-indicateurs-dce .nav-tabs>li:not(.active)>a,
#tdb-indicateurs-dce .nav-tabs>li:not(.active)>a:focus,
#tdb-indicateurs-dce .nav-tabs>li:not(.active)>a:hover {
    border-left: 1px solid #D4D4D4;
    border-right: 1px solid #D4D4D4;
    border-bottom-color: transparent;
}

#tdb-indicateurs-dce .tab-content .nav-tabs>li:not(.active)>a,
#tdb-indicateurs-dce .tab-content .nav-tabs>li:not(.active)>a:focus,
#tdb-indicateurs-dce .tab-content .nav-tabs>li:not(.active)>a:hover {
    border-top: 1px solid #D4D4D4 !important;
}

/* mod_carto.css donne un aplat color1 a l'onglet actif, par un selecteur global non
   limite a la carto. Le texte doit donc passer en blanc : en reprenant seulement la
   couleur color1, il devenait bleu sur bleu, donc invisible. On garde l'aplat, qui est
   la convention des onglets de l'application. */
#tdb-indicateurs-dce .nav-tabs>li.active>a,
#tdb-indicateurs-dce .nav-tabs>li.active>a:focus,
#tdb-indicateurs-dce .nav-tabs>li.active>a:hover {
    background: var(--color1);
    color: var(--color1-text);
    border-color: var(--color1);
}

/* Onglets de thème (premier niveau seulement, d'où les > ) : liseré en haut de chaque
   onglet, gris clair au repos, color5 sur l'onglet actif — comme le liseré vertical des
   filtres renseignés et du bouton « Afficher la fiche ».
   !important obligatoire : la règle globale `.nav-tabs li a { border-top: none
   !important }` (haut de ce fichier) l'emporterait sinon, quelle que soit la
   spécificité. */
#tdb-indicateurs-dce>.tabbable>.nav-tabs>li>a,
#tdb-indicateurs-dce>.tabbable>.nav-tabs>li>a:focus,
#tdb-indicateurs-dce>.tabbable>.nav-tabs>li>a:hover {
    border-top: 3px solid #D4D4D4 !important;
}

#tdb-indicateurs-dce>.tabbable>.nav-tabs>li.active>a,
#tdb-indicateurs-dce>.tabbable>.nav-tabs>li.active>a:focus,
#tdb-indicateurs-dce>.tabbable>.nav-tabs>li.active>a:hover {
    border-top-color: var(--color5) !important;
}

/* Bandeau de synthèse, entre les onglets de thème et ceux de famille : un pictogramme
   coloré par famille, pour lire l'état ou la pression d'ensemble sans ouvrir chaque
   onglet. Il se replie sur écran étroit plutôt que de comprimer les intitulés. */
.tdb-synthese {
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
    padding: 16px 0;
}

/* overflow: hidden : la bande colorée de gauche suit l'arrondi de la boîte */
.tdb-synthese-item {
    display: flex;
    align-items: stretch;
    flex: 1 1 220px;
    min-width: 0;
    background: #F4F4F4;
    border-radius: var(--radius-bloc);
    overflow: hidden;
}

/* La couleur vient de la nomenclature de l'indicateur, posée en style inline : c'est
   elle qui porte l'information, le picto ne fait que nommer le sujet. Elle occupe
   toute la partie gauche de la boîte, sur toute sa hauteur. */
.tdb-synthese-picto {
    flex: 0 0 auto;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 48px;
    min-height: 52px;
    color: #FFF;
    font-size: 15px;
}

/* Pictogramme maison (code_picto « svg:<nom> », voir icone_picto()) : blanc comme les
   icônes Font Awesome voisines. Un peu plus large qu'elles, le dessin étant plus large
   que haut, pour un poids visuel comparable. */
.tdb-synthese-picto .tdb-synthese-svg {
    display: inline-block;
    width: 24px;
    height: 20px;
    background-color: currentColor;
}

.tdb-synthese-texte {
    min-width: 0;
    align-self: center;
    padding: 8px 12px;
}

.tdb-synthese-libelle {
    font-size: 12px;
    color: #6b6b6b;
    line-height: 1.3;
}

.tdb-synthese-valeur {
    font-size: 14px;
    font-weight: 700;
    color: var(--text-color);
    line-height: 1.3;
    overflow: hidden;
    text-overflow: ellipsis;
}

/* Onglets de second niveau : même couleurs que ceux de thème (aplat color1 sur l'onglet
   actif), la hiérarchie se lisant à la taille, plus petite. */
#tdb-indicateurs-dce .tab-content .nav-tabs {
    border-bottom-width: 1px;
}

/* Table posée juste sous les onglets de famille : son filet haut color1 de 3px se
   collait au trait des onglets et l'épaississait. Le trait des onglets suffit ; les
   coins du haut restent droits pour s'y raccorder. */
#tdb-indicateurs-dce .tab-content .tab-content .tdb-dce-table,
/* Même raccord quand la table des indicateurs sans famille arrive directement sous les
   onglets de thème, faute de bandeau (thème sans aucun code_picto, comme Risque) : son
   filet de 3px doublait sinon celui des onglets. :first-child = pas de bandeau avant. */
#tdb-indicateurs-dce .tab-pane>.tdb-dce-sans-famille:first-child .tdb-dce-table {
    border-top: none;
    border-radius: 0 0 var(--radius-bloc) var(--radius-bloc);
}

#tdb-indicateurs-dce .tab-content .nav-tabs>li>a {
    font-size: 13px;
    font-weight: 600;
    padding: 6px 12px;
}

/* Hauteur figée entre onglets : tous les panneaux d'un même jeu d'onglets sont empilés
   dans la même cellule de grille, seul l'actif est visible. Le conteneur prend la
   hauteur du plus long, donc changer d'onglet ne raccourcit plus la page et le
   navigateur n'a plus à remonter le scroll. Vaut aussi pour les onglets de famille. */
#tdb-indicateurs-dce .tab-content {
    display: grid;
}

#tdb-indicateurs-dce .tab-content>.tab-pane {
    display: block;
    grid-area: 1 / 1;
    visibility: hidden;
}

/* inherit et non visible : l'onglet de famille actif d'un thème masqué doit rester
   masqué avec lui. */
#tdb-indicateurs-dce .tab-content>.tab-pane.active {
    visibility: inherit;
}

/* Table des indicateurs sans famille, posée entre le bandeau et les onglets de famille */
#tdb-indicateurs-dce .tdb-dce-sans-famille {
    margin-bottom: 20px;
}

/* Même habillage que les tables du haut de fiche et que les boîtes d'enjeux :
   fond blanc, contour gris clair, filet color1 en haut. */
.tdb-dce-table {
    width: 100%;
    background: #FFF;
    border: 1px solid #dedede;
    border-top: 3px solid var(--color1);
    /* separate et non collapse : border-radius est ignoré sur une table en collapse.
       Les cellules n'ont que des filets bas, ils ne se doublent donc pas. */
    border-collapse: separate;
    border-spacing: 0;
    border-radius: var(--radius-bloc);
    text-align: left;
}

.tdb-dce-table thead th {
    font-size: 13px;
    font-weight: 600;
    color: #6b6b6b;
    padding: 12px 15px;
    border-bottom: 1px solid #dedede;
}

/* Largeur fixe des colonnes de valeur : la pastille (150px) plus le retrait de la
   cellule (2 x 15px). Le libellé prend le reste. Une modalité longue (« Surfaces
   toujours en herbes et peu de polycultures ») passe sur plusieurs lignes. */
.tdb-dce-table th.tdb-dce-valeur,
.tdb-dce-table td.tdb-dce-valeur {
    width: 180px;
    text-align: center;
}

/* Intertitre de famille : il segmente la table sans la surcharger, d'où l'aplat
   très clair plutôt qu'un bandeau coloré. */
.tdb-dce-table tr.tdb-dce-groupe>td {
    background: #f5f7f9;
    color: var(--color1);
    font-size: 13px;
    font-weight: 700;
    padding: 8px 15px;
    border-bottom: 1px solid #ededed;
}

.tdb-dce-table tbody td {
    padding: 8px 15px;
    border-bottom: 1px solid #ededed;
    vertical-align: middle;
}

.tdb-dce-table tbody tr:last-child>td {
    border-bottom: none;
}

/* L'intitulé s'efface, la valeur porte la couleur : même parti que les tables du
   haut de fiche. */
.tdb-dce-table td.tdb-dce-libelle {
    color: #6b6b6b;
    font-size: 14px;
}

/* Hiérarchie des indicateurs (colonne niveau du référentiel) : un cran de retrait par
   niveau, et le gras pour une ligne qui a des enfants. La tête de famille (niveau 0)
   est en gras plein et couleur de texte, les têtes intermédiaires en demi-gras. */
.tdb-dce-table td.tdb-dce-niveau-1 {
    padding-left: 35px;
}

.tdb-dce-table td.tdb-dce-niveau-2 {
    padding-left: 55px;
}

.tdb-dce-table td.tdb-dce-niveau-3 {
    padding-left: 75px;
}

.tdb-dce-table td.tdb-dce-libelle.tdb-dce-parent {
    font-weight: 600;
    color: var(--text-color);
}

.tdb-dce-table td.tdb-dce-libelle.tdb-dce-parent:not([class*="tdb-dce-niveau-"]) {
    font-weight: 700;
}

/* Pastille : entièrement colorée à la couleur de la nomenclature, arrondi des filtres. Le fond et
   la couleur du texte (noir ou blanc selon le contraste) sont posés en ligne par
   pastille_indicateur_dce(). Largeur fixe de 150px, centrée dans sa cellule : des
   pastilles de largeurs différentes se liraient comme un bord découpé. */
.tdb-dce-pastille {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 150px;
    margin: 0 auto;
    padding: 4px 10px;
    border-radius: var(--radius-bloc);
    background: #dedede;
    font-size: 13px;
    font-weight: 600;
    color: var(--text-color);
    line-height: 18px;
}

.tdb-dce-label {
    text-align: center;
}

/* Picto de thème (état, pression, risque) dans les onglets de premier niveau : ce sont
   les pictogrammes de la carto. background-color suit la couleur du texte de
   l'onglet, le picto passe donc en blanc sur l'onglet actif. */
/* Les SVG de la carto ont une large marge interne (cercle transparent) : il faut une
   boîte de 28px pour un dessin lisible. Les marges négatives haut/bas l'empêchent
   d'agrandir la hauteur de l'onglet. */
#tdb-indicateurs-dce .tdb-dce-picto-theme {
    width: 28px;
    height: 28px;
    margin: -6px 6px -6px -4px;
    vertical-align: middle;
    background-color: currentColor;
    -webkit-mask-size: contain;
    mask-size: contain;
    -webkit-mask-repeat: no-repeat;
    mask-repeat: no-repeat;
    -webkit-mask-position: center;
    mask-position: center;
}

/* Valeur quantitative : pas de pastille non plus, la couleur ne qualifierait rien. */
.tdb-dce-brut {
    font-size: 14px;
    font-weight: 600;
    color: var(--text-color);
}

/* Valeur absente : pas de pastille du tout — rien à lire, rien à qualifier. */
.tdb-dce-absent {
    font-size: 13px;
    font-style: italic;
    color: #9a9a9a;
}

@media screen and (max-width: 1100px) {
    .tdb-dce-table thead th,
    .tdb-dce-table tbody td,
    .tdb-dce-table tr.tdb-dce-groupe>td {
        padding-left: 10px;
        padding-right: 10px;
    }

    .tdb-dce-table td.tdb-dce-niveau-1 {
        padding-left: 25px;
    }

    .tdb-dce-table td.tdb-dce-niveau-2 {
        padding-left: 40px;
    }

    .tdb-dce-table td.tdb-dce-niveau-3 {
        padding-left: 55px;
    }

    .tdb-dce-pastille {
        padding-left: 8px;
        padding-right: 8px;
    }
}

/* Dans l'en-tête, l'espacement est porté par le gap du conteneur */
.fiche-titre-massedeau .picto-massedeau {
    margin-right: 0;
}