body {
        margin: 0;
        padding: 0;
        height: 100vh;
        width: 100vw;
        font-family: system-ui;
        overflow: hidden;
        }

        #toolbar-administration {
          display: none !important;
        }

        .e-value-page {
          display: flex; 
          flex-direction: column; 
          height: 100vh;
        }

        .subtitle {
          color:rgb(43, 68, 109);
          font-weight: 600;
        }

        a {
            color: #1d3c6e;
        }

        #main{
            display: flex;
            width: 100%;
            height: 100%;
            position: relative;
            background-color: rgb(245, 245, 245);
            flex-direction: column;
        }

        #main-container{
            display: flex;
            flex: 150 1 auto;
        }

        #container{
            flex: 3 1 auto;
            background-color: rgb(245, 245, 245);
            align-content: center;
        }
        #header{
            z-index: 1000;
            background-color: rgb(245, 245, 245);
            display: flex;
            flex-direction: row;
            justify-content: space-between;
            padding: 10px;
            align-items: center;
            box-shadow: 0px 5px 5px rgb(107, 107, 107, 0.2);
        }

        #liseret {
            background-color: #1d3c6e;
            height: 4px;
            width: auto;
            z-index: 999;
        }

        #titre{
            display: flex;
            flex-direction: column;
        }

        #logo-div{
            display: flex;
            flex-direction: row-reverse;
            gap:10px;
        }
        #logo-div > img{
            display: flex;
            max-height: 50px;
        }

        #sidebar {
            flex: 1.5;
            background-color: rgb(245, 245, 245);
            box-shadow: -2px 0 5px rgba(0, 0, 0, 0.2);
            transition: all 0.2s;
            display: flex;
            flex-direction: column;      /* IMPORTANT */
            align-items: stretch;        /* pour que les enfants prennent toute la largeur */
            justify-content: flex-start; /* aligne le contenu en haut */
            z-index: 999;
            overflow-y: auto;            /* pour scroller si le contenu dépasse */
            max-height: 87vh;
        }

        #panel-button{
            position: absolute;
            z-index: 9990;
            height: 50px;
            width: 40px;
            border: none;
            background-color: rgb(43 68 109);
            border-radius: 30px 0px 0px 30px;
            color: #000000;
            right: -8px;
            top: 22px;
            cursor: pointer;
            box-shadow: -5px 2px 5px rgba(0,0,0,0.2);
            font-weight: bold;
            font-size: large;
            background-clip: padding-box;
            font: -webkit-mini-control;
            font-family: monospace;
            font-size:26px;
            color:white;
        }
        #leaflet-map{
            width: auto;
            height: 100%;
        }

        #location-container{
            z-index: 1000;
            position: absolute;
            right: 50px;
            top: 20px;
            background-color: rgb(245, 245, 245);
            padding: 10px;
            border-radius: 10px;
        }

        #location-container > select{
            border: none;
            background-color: transparent;
        }

        #tools{
            z-index: 1000;
            position: absolute;
            background-color: rgb(43 68 109);;
            border-radius: 0px 0px 30px 0px;
            
            box-shadow: 5px 2px 5px rgba(0,0,0,0.2);
            background-clip: padding-box;
            display: flex;
            flex-direction: column;
            align-content: center;
            align-items: center;
            font-size:28px;
            color:white;
            padding-right: 5px;
            padding-bottom: 10px;
        }

        .tool{
            width: 40px;
            height: 40px;
            padding: 5px;
            cursor: pointer;
            align-content: center;
            text-align: center;
        }

        .tool> img:hover{
            transition: all 0.1s;
            width: 30px;
        }

        #tools > hr {
            display: none;
            width: 26px;
            margin: 0;
            opacity:0.4;
            border: none;
            height: 1px;
            background-color: #FFF;
        }

        .tool > img {
            width: 20px;
            filter: invert(1);
        }

        .leaflet-control-zoom{
            background-color: rgb(43 68 109);;
        }

        #footer{
            display: flex;
            height:20px;
            justify-content: space-between;
            font-size: small;
            align-items: center;
            align-content: center;
            padding: 10px;
            box-shadow: 0 -5px 3px -3px rgb(107, 107, 107, 0.2), 0 5px 5px -5px;
            z-index: 9999;
        }

        #footer > div > a{
            padding-inline: 5px;
        }



        /* SIBBARE ELEMENTSE  */

        #main-section{
            display: none;
            width: 100%;
            height: 100%;
            border-radius: 10px;
            flex: 1 1 auto;
            flex-direction: column;
        }

        #menu-section{
            width: auto;
            display: flex;
            flex-wrap: wrap;
            gap: 10px;
            align-content: center;
            align-items: center;
            padding: 10px;
        }

        #infos-section{
            background-color: rgb(255, 255, 255);
            height: 100%;
            width: auto;
            border-radius: 10px;
            display: flex;
            flex-direction: column;
            margin: 10px;
            overflow: hidden;
        }

        #text-section {
            display: flex;
            flex-direction: column;
            gap: 10px;
            padding: 10px;
            overflow-y: auto;
            height: 0;
            min-height: 100%;
        }

        .content-element {
            font-size: smaller;
        }
        .title-element {
            font-weight: bold;
        }

        .cell {
            display: grid;
            flex-direction: column;
            padding: 10px;
            border-radius: 5px;
            gap: 10px;
            flex-wrap: wrap;
            align-items: center;
            border: 1px solid rgba(0, 0, 0, 0.2);

        }

        .navigable{
            background-color: rgb(255, 255, 255);
            padding: 10px;
            border-radius: 10px;
            align-content: space-around;
            font-family: system-ui;
            cursor: pointer;
        }

        .navigable:hover{
            background-color: #e0e0e0;
            
        }

        .next{
            color: rgb(190, 190, 190);
            font-family: monospace;
            font-size: x-large;
            font-weight: bolder;
        }

        .amp{
            display: flex;
            gap: 5px;
            align-content: center;
            align-items: center;
            background-color: #2b446d;
            color: #ffff;
            font-weight: 700;
            font-family: monospace;
            border-radius: 10px;
            padding: 5px;
            margin: 6px;
            border: 1px solid rgba(0, 0, 0, 0.2);

        }

        #title-section{
            display: flex;
            flex-wrap: wrap;
            gap: 10px;
            /* padding: 10px; */
            /* border-radius: 10px; */
            /* display: none; */
        }

        .close{
            font-weight: bold;
            padding: 5px;
            cursor: pointer;
            color: rgb(190, 190, 190);
            font-family: monospace;
            font-size: x-large;
            font-weight: bolder;
        }

        .close:hover{
            color: rgb(202, 37, 37);
        }
        

        #title-text{
            display: flex;
            flex-direction: column;
        }


        #title-container{
            display: flex;
            align-items: center;
            gap: 10px;
        }

        
        #title-container > img{
            display: flex;
            max-height: 50px;
        }

        #img-section{
            display: flex;
            position: relative;
            height: 350px;
            background-image: url("../img/golfe_normand_breton.jpg");
            background-size: cover;
            padding-bottom: 10px;
        }

        #search-section {
            position: absolute;
            top: 15px;
            right: 20px;
            display: flex;
            align-items: center;
            background-color: white;
            border-radius: 20px;
            padding: 5px 10px;
            box-shadow: 0 2px 5px rgba(0,0,0,0.2);
            z-index: 1001;
        }

        #search-input {
            border: none;
            outline: none;
            font-size: 14px;
            font-family: system-ui;
            background: transparent;
            width: 200px;
            height: 30px;
        }

        #search-icon {
            width: 16px;
            height: 16px;
            margin-left: 8px;
            cursor: pointer;
            filter: invert(0.4);
        }

        /* POPUP */

        #popup-content {
            font-family: system-ui;
            background-color: white;
            border-radius: 5px;
            width: 300px;
            text-align: left;
        }

        .popup-header h3 {
        font-size: 14px;
        margin: 0 0 10px;
        }

        .popup-body {
        display: flex;
        flex-direction: column;
        align-items: center;
        }

        .popup-image {
        max-width: 100%;
        height: auto;
        margin-bottom: 10px;
        }

        .popup-body p {
        font-size: 12px;
        margin: 2px 0;
        }

        .popup-footer {
        text-align: center;
        }

        .popup-link {
        font-size: 12px;
        color: #007BFF;
        text-decoration: none;
        }

        .leaflet-control-attribution{
            display: none;
        }

        .leaflet-interactive:focus {
            outline: none;
        }
    
        #clickable-rectangles {
            position: absolute;
            top: 65px; /* positionné plus bas que la barre de recherche */
            left: 6px;
            display: flex;
            flex-direction: row; /* disposition horizontale */
            gap: 8px;
            z-index: 1000;
        }

        .clickable-rectangle {
            background-color: rgba(255, 255, 255, 0.9);
            border: 2px solid #1d3c6e;
            color: #1d3c6e;
            padding: 8px 12px;
            border-radius: 10px;
            cursor: pointer;
            font-weight: bold;
            font-family: system-ui;
            transition: background-color 0.2s, color 0.2s;
            white-space: nowrap;
        }

        .clickable-rectangle:hover {
            background-color: #1d3c6e;
            color: white;
        }
        
.mouse-position {
  position: absolute;
  bottom: 30px;
  font-size:12px;
  right: 12px;
  background-color: rgba(255, 255, 255, 0.8);
  padding: 4px 6px;
  z-index: 1000;
  pointer-events: none; /* pour ne pas gêner les interactions avec la carte */
}

.info-icon {
  display: inline-flex;          /* bloque la taille */
  align-items: center;           /* centre vertical */
  justify-content: center;       /* centre horizontal */
  width: 14px;                   /* largeur fixe */
  height: 14px;                  /* hauteur fixe */
  border-radius: 50%;            /* cercle parfait */
  border: 1px solid #1d3c6e;           /* couleur de fond */
  color: #1d3c6e;                  /* couleur du "i" */
  font-size: 12px;
  font-weight: bold;
  cursor: pointer;
  margin-top:-6px;
  margin-left: 8px;
  line-height: 1;
  flex-shrink: 0;                /* empêche l'étirement en flex */
  
  position: relative; /* nécessaire pour positionner la tooltip */
}

.info-icon::before {
  content: "i";
}

/* Tooltip */
.info-icon::after {
  content: attr(data-tooltip);
  position: absolute;
  top: 50%;
  right: 125%;                /* décale à gauche de l'icône */
  transform: translateY(-50%); /* centre verticalement */
  background: #1d3c6e;
  color: #fff;
  padding: 8px 10px;
  border-radius: 4px;
  font-size: 14px;
  white-space: nowrap;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.2s ease;
}


/* Petite flèche */
.info-icon::before,
.info-icon::after {
  z-index: 10;
}

.info-icon:hover::after {
  opacity: 1;
}

.leaflet-control-measure {
    display: none;
}
.leaflet-control-measure-toggle {
    display: none !important;
}

.leaflet-left.leaflet-top {
  left: 75px; /* décale vers la droite */
}

.leaflet-control-measure-interaction {
    background:rgb(43 68 109);
    color:white;
}

.tEvalue {
    background: rgb(43 68 109);
    color:white;
    border:0px;
}

.tEvalue p {
    margin:3px;
}

.tEvalue p .heading {
    color:#999;
    display: inline-block;
    width: 60px;
}

.tEvalue::before {
    
    border-color:transparent;
}

#sidebar .interrogation-titre {
    padding:8px;
    background:rgb(43, 68, 109);
    font-weight: 600;
    color:white;
    
}

#sidebar .interrogation-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 12px;
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.1);
}

#sidebar .interrogation-table th,
#sidebar .interrogation-table td {
  padding: 8px 12px;
  border: 1px solid #e0e0e0;
  text-align: left;
}

#sidebar .interrogation-table th {
  background-color: #f4f4f4;
  font-weight: bold;
  color: #333;
}

#sidebar .interrogation-table tr:nth-child(even) {
  background-color: #fafafa;
}

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

#sidebar img {
  width:100%;
  height:auto;
}


.leaflet-control-measure .results .heading {
    display: inline-block;
    margin-right: 5px;
    color: #999;
    width: 60px;
}

.tEvalue .indication {
    font-style: italic;
    font-size: 11px;
}

#left-sidebar {
  position: absolute;
  top: 70px;
  bottom:40px;
  left: 0;
  width: 490px;
  background-color: white;
  box-shadow: 2px 0 5px rgba(0,0,0,0.2);
  display: none; /* masqué par défaut */
  flex-direction: column;
  justify-content: space-between;
  padding: 10px;
  z-index: 501;
  opacity: 0;
  transform: translateX(-100%);
}

/* classe d'affichage active */
#left-sidebar.active {
  display: flex;
  opacity: 1;
  transform: translateX(0);
  transition: transform 0.3s ease, opacity 0.3s ease;
}

#left-sidebar-content {
  overflow-y: auto;
  flex-grow: 1;
  padding-left:60px;
  padding-right:5px;
}

.leaflet-bottom.leaflet-left {
  z-index: 500;
}

.node--type-page h2:first-of-type {
  display: none;
}

.header-left-sidebar {
  min-height:240px;
}

.contenu-rubrique {
  display:none;
  text-align: justify;
}

#toggle-buttons-wrapper {
  justify-content: center; /* centre horizontalement */
  margin-left:50px;
}

.toggle-btn:not(:last-child) {
  border-right: 0px solid black;
}

.toggle-btn.active {
  background-color: rgb(43 68 109);
  color:white;
}

/* Wrapper du groupe */
#toggle-buttons-wrapper-3, #toggle-buttons-wrapper {
  display: flex;
  margin: 20px;
}

#toggle-buttons-wrapper {
  display: flex;
  margin-left: 60px;
}

/* Conteneur des boutons */
#toggle-buttons-3, 
#toggle-buttons {
  display: flex;
  gap: -20px; /* plus de superposition */
}

/* Style des boutons */
.toggle-btn {
  background-color: #EEE;
  color: rgb(43 68 109);
  border: 1px solid #ccc;
  border-radius: 50px; /* arrondi complet */
  padding: 16px 32px;  /* boutons plus gros */
  cursor: pointer;
  font-family: system-ui;
  font-weight: bold;
  outline: none;
  transition: all 0.3s ease;
  box-shadow: 0 4px 6px rgba(0,0,0,0.1);
  position: relative;
  z-index: 1;
   margin-left: -15px; /* ajuster pour superposition */
}

/* Décalage pour effet superposé */
#toggle-buttons-3 .toggle-btn:nth-child(1) { z-index: 3; }
#toggle-buttons-3 .toggle-btn:nth-child(2) { z-index: 2; }
#toggle-buttons-3 .toggle-btn:nth-child(3) { z-index: 1; }

/* Hover pour surbrillance */
#toggle-buttons-3 .toggle-btn:hover {
  transform: translateY(-4px) scale(1.05);
  box-shadow: 0 8px 12px rgba(0,0,0,0.15);
}

/* Bouton actif */
#toggle-buttons-3 .toggle-btn.active {
  background-color: rgb(43 68 109);
  color: white;
  border-color: rgb(43 68 109);
  transform: translateY(-2px) scale(1.05);
  box-shadow: 0 6px 10px rgba(0,0,0,0.2);
}

#toggle-buttons-3 {
  display: flex;
  justify-content: center;
  width: 100%;
}

#toggle-buttons-3 .toggle-btn {
  flex: 1;                 /* chaque bouton prend la même largeur */
  height: 50px;            /* ajuste comme tu veux */
  border-radius: 25px;     /* arrondi total (la moitié de la hauteur) */
  background-color: #EEE;
  color: rgb(43, 68, 109);
  border: 1px solid #ccc;
  font-family: system-ui;
  font-weight: bold;
  cursor: pointer;
  transition: background-color 0.3s ease;
  margin-left: -15px;      /* superposition */
  position: relative;
  z-index: 1;
}

#toggle-buttons .toggle-btn.active {
  z-index: 5;
}

#toggle-buttons-3 .toggle-btn:first-child {
  margin-left: 0; /* pas de superposition pour le premier */
}

#toggle-buttons-3 .toggle-btn.active {
  background-color: rgb(43 68 109);
  color: white;
}

#content-enjeux-3,
#content-objectifs-3,
#content-actions-3 {
  display: none;
}

/* Styles flat pour les listes */
.contenu-boutons ul {
  list-style: none;
  padding: 0;
  margin: 0px 10px;
}

.contenu-boutons li {
  display: flex;
  justify-content: space-between;
  align-items: center;
  width: calc(100% - 30px);
  padding: 12px 16px;
  margin-bottom: 8px;
  border-radius: 8px;
  cursor: pointer;
  font-family: system-ui, sans-serif;
  font-size: 16px;
  font-weight: 500;
  color: #333;
  background-color: #f0f0f0;
  transition: background-color 0.2s, transform 0.2s;
}

/* Couleur spécifique par rubrique */
.contenu-boutons[data-edito="habitats"] li {
  border-left: 4px solid #1CA3EC; 
  color:#1CA3EC; 
}

.contenu-boutons[data-edito="mammiferes"] li {
  border-left: 4px solid #7F8C8D;
  color:#7F8C8D; 
}

.contenu-boutons[data-edito="poissons"] li {
  border-left: 4px solid #46b052;
  color:#46b052; 
}

.contenu-boutons[data-edito="oiseaux"] li {
  border-left: 4px solid #db9404;
  color:#db9404; 
}

.contenu-boutons[data-edito="generiques"] li {
  border-left: 4px solid rgb(43 68 109);
  color:rgb(43 68 109);
}

/* Effet au survol */
.contenu-boutons li:hover {
  background-color: #e0e0e0;
  transform: translateX(2px);
}

/* Icône flèche à droite */
.contenu-boutons li::after {
  content: '➔';
  font-size: 16px;
  color: #666;
  margin-left: 8px;
  transition: transform 0.2s;
}

.contenu-boutons li:hover::after {
  transform: translateX(3px);
}

.breadcrumb {
  position: absolute;
  margin:30px 20px;
  background:rgba(43,68,109,0.8);
  box-shadow: 5px 5px 5px rgba(0,0,0,0.2);
  padding:8px 18px;
  color:white;
  border-radius:30px;
  font-weight: 600;
  font-size:15px;
}

.breadcrumb span {
  cursor: pointer;
  text-decoration: underline;
}

label {
   display: inline-flex;
  align-items: center;
  cursor: pointer;
  user-select: none;
  font-family: system-ui, sans-serif;
  font-weight: normal;
  font-size: 14px;
  color: #222;
  margin-bottom: 8px;
  gap: 12px; /* pour séparer case/texte proprement */
}

/* Checkbox carrée, bordure rgb(43 68 109), sans arrondi */
input[type="checkbox"] {
  appearance: none;
  -webkit-appearance: none;
  -moz-appearance: none;
  width: 18px;
  height: 18px;
  flex-shrink: 0; /* 👈 empêche la case de se réduire */
  border: 2px solid rgb(43, 68, 109);
  border-radius: 0;
  background-color: #fff;
  position: relative;
  transition: background-color 0.25s ease, border-color 0.25s ease;
}

/* Hover : éclaircir la bordure */
input[type="checkbox"]:hover {
  border-color: rgb(60, 85, 130);
}

/* Quand coché : fond rgb(43 68 109) */
input[type="checkbox"]:checked {
  background-color: rgb(43, 68, 109);
  border-color: rgb(43, 68, 109);
}

/* Coche bien centrée */
input[type="checkbox"]:checked::after {
  content: '';
  position: absolute;
  top: 50%;
  left: 50%;
  width: 8px;
  height: 8px;
  border-right: 2.5px solid #fff;
  border-bottom: 2.5px solid #fff;
  transform: translate(-50%, -60%) rotate(45deg);
  opacity: 1;
  transition: opacity 0.25s ease;
}

/* Coche invisible si non cochée */
input[type="checkbox"]::after {
  opacity: 0;
}

/* Focus accessible */
input[type="checkbox"]:focus {
  outline: 2px solid rgb(100 130 180);
  outline-offset: 2px;
}


/* Hiérarchie des niveaux */
.groupe {
  margin-bottom: 16px;
  font-weight: normal;
  font-size: 16px;
  color: #222;
}

.sous-groupe {
  margin-left: 24px;
  margin-bottom: 12px;
  font-weight: normal;
  font-size: 14px;
  color: #444;
}

.couches {
  list-style: none;
  padding-left: 32px;
  margin: 0 0 12px 0;
}

.couches li {
  margin-bottom: 6px;
  font-weight: normal;
  font-size: 13px;
  color: #444;
  display: flex;
  align-items: center;
  justify-content: space-between; /* espace entre label et icône */
}

.caret {
  display: inline-block;
  width: 0;
  height: 0;
  margin-right: 6px;
  vertical-align: middle;
  content: "";
  border-top: 5px solid transparent;
  border-bottom: 5px solid transparent;
  border-left: 6px solid rgb(43, 68, 109);
  cursor: pointer;
  transition: transform 0.2s ease;
}
.caret-down {
  transform: rotate(90deg);
}
.caret-right {
  transform: rotate(0deg);
}
.toggle-header {
  display: flex;
  align-items: center;
  gap: 0.25em;
  margin-bottom: 4px;
}

.leaflet-control-measure {
  z-index: 10000 !important;
}

.leaflet-control-measure-interaction {
  z-index: 10000 !important;
}

/* Pour les éléments dessinés par Leaflet-measure */
.leaflet-measure-path {
  z-index: 10000 !important;
}

.enjeu-panel { display: none; }
.enjeu-panel.active { display: block; }