body {
     margin: 0;
     padding: 0;
     font: 200 12px/15px 'Montserrat', 'Arial', sans-serif;
     color: #201A41;
     text-align: left;
 }

 a {
     color: #60584d;
 }

 a:hover {
     color: #995e0d;
     ;
 }

 h3 {
     font-size: 1.4em;
     font-weight: 900;
     color: #D38D31;
 }

 h4 {
     font-size: 1em;
     font-weight: 700;
 }

 .app-container {
     display: grid;
     grid-template-columns: 250px auto;
     grid-template-areas:
         "sidebar map";
     height: 100vh;
     width: 100%;
     overflow: hidden;
 }

 #map {
     width: 100%;
     height: 100%;
     grid-area: map;
     left: 0;
     top: 0;
 }


 .liste-couches {
     grid-area: sidebar;
     background-color: #ffffff;
     display: flex;
     flex-direction: column;
     box-shadow: 2px 0 10px rgba(0, 0, 0, 0.1);
     z-index: 10;
     height: 100%;
     padding-top: 5px;
     padding-right: 15px;
     padding-left: 15px;
     overflow: auto;
     width: 240px;
 }

 .lien_65P_2050:hover {
     color: #F29166;
 }


 #legende {
     font-size: 13px;
     font-weight: 100;
     padding: 10px;
     border: solid;
     border-color: #bdbdbd;
     border-width: .5px;
 }

 #legende_square {
     display: inline-block;
     height: 20px;
     width: 10px;
     margin-bottom: -3px;
     margin-right: 5px
 }

 #credits {
     background: #f3f3f3;
     padding: 7px;
     color: #606060;
     font-size: 10px
 }

 .maplibregl-popup {
     display: flex;
     left: 0;
     pointer-events: none;
     position: absolute;
     top: 0;
     will-change: transform
 }

 .maplibregl-popup-content {
     background-color: rgba(255, 255, 255, 0.87);
     border-radius: 5px;
     color: #363636;
     width: 310px;
     padding-left: 10px;
     padding-right: 7px;
     padding-top: 6px;
     padding-bottom: 6px;
 }