@import url("vendor/bootstrap.min.162406281941.css");
@font-face {
  font-family: 'Metropolis';
  src:  url("../fonts/Metropolis-Regular.7b9a798c0a74.woff2") format('woff2'),
       url("../fonts/Metropolis-Regular.67ef19648828.woff") format('woff');
}
@font-face {
  font-family: 'Metropolis Bold';
  src:  url("../fonts/Metropolis-Bold.dc6926c36da3.woff2") format('woff2'),
       url("../fonts/Metropolis-Bold.c9052976e063.woff") format('woff');
}

:root {
  --main-color: rgb(41, 81, 155);
  --secondary-color: #fecb49;
  --text-color: #333333;

  --bs-primary: var(--main-color);
  --bs-secondary: var(--secondary-color);
  --font: "Metropolis";
  --font-bold: "Metropolis Bold";

  --bs-link-color: var(--main-color);;
  --bs-link-color-rgb: 41, 81, 155;

}

html,
body{
  margin: 0;
  height: 100%;
  overflow: hidden;
  font-family: 'Metropolis', sans-serif;
  text-rendering: optimizeLegibility;
  -webkit-font-smoothing: antialiased;
  color: var(--text-color);
}
body{
  height: 100%;
  display: flex;
  flex-flow: column;
}
body header{
  flex: 0 1 auto;
  box-shadow: rgba(149, 157, 165, 0.2) 0px 8px 24px;
}
body main{
  flex: 1 1 auto;
  overflow: hidden;
}
body footer{
  flex: 0 1 auto;
  padding: 10px;
  text-align: center;
}
tr{
  border-width: 1px;
}

h1, h2, h3, h4, h5, h6{
  font-family: var(--font-bold);
  color: var(--main-color);
}

#notification{
  width: 90%;
  top: 160px;
  right: 10px;
  margin: auto;
  padding: 1rem;
  display: none;
  max-width: 600px;
  position: fixed;
  padding-left: 2rem;
  border-radius: 5px;
  background-color: white;
  box-shadow: rgba(149, 157, 165, 0.2) 0px 8px 24px;
  &::before{
    content: "";
    position: absolute;
    width: 0.5rem;
    height: calc(100% - 1.5rem);
    top: 0.75rem;
    left: 0.5rem;
    border-radius: 1rem;
    background: var(--secondary-color);
  }
}

#api-loader{
  top: 50%;
  left: 50%;
  width: 5em;
  height: 5em;
  opacity: 0.7;
  display: flex;
  z-index: 1000;
  position: fixed;
  border-radius: 5px;
  align-items: center;
  background-color: white;
  margin: -2.5em 0 -2.5em 0;
  justify-content: space-around;
}

#api-loader-animation{
  animation: ilRouleRouleRouleSansSarreter 1.3s infinite linear;
  transform: translateZ(0);
  text-indent: -9999em;
  border-radius: 50%;
  font-size: 10px;
  display: block;
  color: #666;
  height: 1em;
  width: 1em;
}

@keyframes ilRouleRouleRouleSansSarreter{
  37.5%{box-shadow: 0 -3em 0 -1em, 2em -2em 0 -1em, 3em 0em 0 0, 2em 2em 0 0.2em, 0 3em 0 0em, -2em 2em 0 -1em, -3em 0em 0 -1em, -2em -2em 0 -1em;}
  0%, 100%{box-shadow: 0 -3em 0 0.2em, 2em -2em 0 0em, 3em 0 0 -1em, 2em 2em 0 -1em, 0 3em 0 -1em, -2em 2em 0 -1em, -3em 0 0 -1em, -2em -2em 0 0;}
  75%{box-shadow: 0em -3em 0 -1em, 2em -2em 0 -1em, 3em 0em 0 -1em, 2em 2em 0 -1em, 0 3em 0 -1em, -2em 2em 0 0, -3em 0em 0 0.2em, -2em -2em 0 0;}
  50%{box-shadow: 0 -3em 0 -1em, 2em -2em 0 -1em, 3em 0 0 -1em, 2em 2em 0 0em, 0 3em 0 0.2em, -2em 2em 0 0, -3em 0em 0 -1em, -2em -2em 0 -1em;}
  87.5%{box-shadow: 0em -3em 0 0, 2em -2em 0 -1em, 3em 0 0 -1em, 2em 2em 0 -1em, 0 3em 0 -1em, -2em 2em 0 0, -3em 0em 0 0, -2em -2em 0 0.2em;}
  12.5%{box-shadow: 0 -3em 0 0, 2em -2em 0 0.2em, 3em 0 0 0, 2em 2em 0 -1em, 0 3em 0 -1em, -2em 2em 0 -1em, -3em 0 0 -1em, -2em -2em 0 -1em;}
  62.5%{box-shadow: 0 -3em 0 -1em, 2em -2em 0 -1em, 3em 0 0 -1em, 2em 2em 0 -1em, 0 3em 0 0, -2em 2em 0 0.2em, -3em 0 0 0, -2em -2em 0 -1em;}
  25%{box-shadow: 0 -3em 0 -0.5em, 2em -2em 0 0, 3em 0 0 0.2em, 2em 2em 0 0, 0 3em 0 -1em, -2em 2em 0 -1em, -3em 0 0 -1em, -2em -2em 0 -1em;}
}

#liste-carte{
  display: flex;
  height: 100%;
  overflow: hidden;
}

#liste-résultats-export-filtres{
  transition: width 0.3s;
  max-width: 300px;
  width: 0;
  padding-top: 10px;
}

.résultats-export-filtres-visible{
  width: 25% !important;
  min-width: 200px;
  transition: width 0.3s;
}

#liste-résultats{
  height: calc(100% - 100px);
  overflow: scroll;
  margin-bottom: 15px;
}
.liste-résultats-élément {
  i{
    position: relative;
    display: block;
    padding-left: 20px;
  }
  i::before{
    position: absolute;
    left: 0;
    top: 4px;
  }
}
#carte{
  height: 100%;
  width: 100%;
}

.liste-résultats-élément{
  display: flex;
  flex-direction: column;
  padding: 10px;
  cursor: pointer;
  scroll-margin-top: 5px;
  border-bottom: 1px solid #eee;
}
.liste-résultats-élément:hover,
.survolé{
  background-color: var(--secondary-color);
}

.popup-fixed{
  position: fixed !important;
  top: 15% !important;
  bottom: 15% !important;
  left: 25% !important;
  right: 25% !important;
  transform: none !important;
  margin: 0;
  border-radius: 0;
}

@media all and (max-width: 2100px){
  .popup-fixed{
    left: 25% !important;
    right: 15% !important;
  }
}

@media all and (max-width: 900px){
  .popup-fixed{
    top: 3em !important;
    bottom: 3em !important;
    left: 250px !important;
    right: 5em !important;
  }
}

.leaflet-popup-tip-container{
  display: none;
}

.leaflet-popup-content-wrapper{
  border-radius: 0;
  height: 100%;
  width: 100%;
  cursor: initial;
}

.leaflet-popup-content{
  width: 100% !important;
  margin: 0 !important;
  overflow: scroll;
  padding: 20px;
  height: 100%;
}

.leaflet-popup{
  margin-bottom: 0 !important;
}

#problèmes li{
  display: flex;
  justify-content: space-between;
}

.petit{
  font-size: 0.8rem;
  font-style: normal;
  display: block;
}

.leaflet-container.action-ajout-point{
  cursor: not-allowed;
}
.leaflet-container.action-ajout-point .leaflet-interactive{
  cursor: crosshair;
}

#bouton-ajout-point,
#bouton-lister-point {
  background-color: var(--main-color);
  font-family: var(--font-bold) ;
  letter-spacing: 1px;
  color: white;
  white-space: nowrap;
  cursor: pointer;
  padding: 10px 15px;
  border-radius: 4px;
  display: flex;
  line-height: 1;
  gap: 10px;
  align-items: center;
  &::before{
    content: "";
    display: inline-block;
    width: 18px;
    height: 15px;
    background-size: cover;
    margin-bottom: 3px;
  }
}
#bouton-ajout-point::before{
  background-image: url("../images/add.af5e2c4c99b9.svg");
  height: 18px;
  margin-bottom: 0;
}
#bouton-lister-point::before{
  background-image: url("../images/EyesOpen.a2f24a306046.svg");
}
#bouton-lister-point.bouton-activé::before{
  background-image: url("../images/EyesClose.524c2de377b5.svg");
}

#bouton-ajout-point:hover,
#bouton-lister-point:hover,
.bouton-activé{
  color: var(--secondary-color) !important;
}

.état-deploye::before, .état-en-cours-de-deploiement::before, .état-cible::before, .état-signe::before, .état-abandonne::before, .état-null::before {
  display: inline-block;
  border-radius: 100%;
  text-align: center;
  margin-right: 1ch;
  content: "";
  height: 1ch;
  width: 1ch;
}

.état-deploye::before {
  background-color: #11a33d;
}
.état-deploye b {
  color: #085f22;
}

.état-signe::before {
  background-color: #7d57d4;
}

.état-signe b {
  color: #3e1e88;
}

.état-en-cours-de-deploiement::before {
  background-color: #e6d818;
}

.état-en-cours-de-deploiement b{
  color: #57520c;
}

.état-cible::before {
  background-color: #48a3d8;
}

.état-cible b {
  color: #134a69;
}

.état-abandonne::before {
  background-color: #f15c5c;
}

.état-abandonne b {
  color: #701212;
}

.état-null::before {
  background-color: #aaa;
}

.état-null b {
  color: #444;
}

#export{
  overflow: hidden;
  color: white;
}

#export a{
  transition: all .3s ease;
  background-color: var(--main-color);
  padding: 0.5rem;
  text-decoration: none;
  font-family: var(--font-bold);
  color: white;
  display: block;
  width: 100%;
  text-align: center;
  font-size: 13px;
}

#export a:hover{
  background-color: var(--secondary-color);
  color: var(--main-color);
}

#texte-liste-résultats{
  padding: 0;
  margin: 0;
}

.liste-résultats-élément-adresse{
  display: flex;
  line-height: 1;
  margin-bottom: 10px;
  color: var(--main-color);
  justify-content: space-between;
}

/* bouton "filtres" */
.leaflet-control-layers-toggle{
  background-color: var(--main-color);
  border: 0;
  border-radius: 4px;
  background-image: url("../images/filter.4673afac2d69.svg") !important;
}

.leaflet-touch .leaflet-control-layers, .leaflet-touch .leaflet-bar{
  border: 0 !important;
}

#haut{
  padding: 10px;
}

#haut nav{
  display: flex;
  align-items: center;
  justify-content: space-between;
}

#haut .titre{
  font-size: 1.2em;
  margin-left: 1rem;
}

.dropdown-menu.show{
  z-index: 1001;
}

.pied-de-page{
  padding: 1rem;
  font-size: 14px;
}
.pied-de-page a{
  text-decoration: none;
  font-size: 14px;
}

#menu{
  display: flex;
  gap: 1rem;
}

blockquote{
  padding-left: 1rem;
  border-left: 5px solid #aaa;
}

#territoire{
  align-items: center;
  display: flex;
  gap: 1rem;
}

#territoire img{
  max-height: 2rem;
}

#territoire p{
  margin-bottom: 0 !important;
}

.leaflet-container{
  font-family: 'Metropolis', sans-serif !important;
  letter-spacing: 1px ;
}

.reset{
  position: absolute;
  right: 0;
  top: 10px;
  border: 0;
  color: var(--main-color);
  background-color: transparent;
  font-size: 12px;
}

.btn-outline-primary {
  --bs-btn-color: var(--bs-primary);
  --bs-btn-border-color: var(--bs-primary);
  --bs-btn-hover-color: #fff;
  --bs-btn-hover-bg: var(--bs-primary);
  --bs-btn-hover-border-color: var(--bs-primary);
  --bs-btn-focus-shadow-rgb: 13, 110, 253;
  --bs-btn-active-color: #fff;
  --bs-btn-active-bg: var(--bs-primary);
  --bs-btn-active-border-color: var(--bs-primary);
  --bs-btn-active-shadow: inset 0 3px 5px rgba(0, 0, 0, 0.125);
  --bs-btn-disabled-color: var(--bs-primary);
  --bs-btn-disabled-bg: transparent;
  --bs-btn-disabled-border-color: var(--bs-primary);
  --bs-gradient: none;
}
.btn-outline-secondary {
  --bs-btn-color: var(--bs-secondary);
  --bs-btn-border-color: var(--bs-secondary);
  --bs-btn-hover-color: #fff;
  --bs-btn-hover-bg: var(--bs-secondary);
  --bs-btn-hover-border-color: var(--bs-secondary);
  --bs-btn-focus-shadow-rgb: 13, 110, 253;
  --bs-btn-active-color: #fff;
  --bs-btn-active-bg: var(--bs-secondary);
  --bs-btn-active-border-color: var(--bs-secondary);
  --bs-btn-active-shadow: inset 0 3px 5px rgba(0, 0, 0, 0.125);
  --bs-btn-disabled-color: var(--bs-secondary);
  --bs-btn-disabled-bg: transparent;
  --bs-btn-disabled-border-color: var(--bs-secondary);
  --bs-gradient: none;
}

.btn-primary{
  --bs-btn-bg : var(--main-color);
  --bs-btn-border-color: var(--main-color);
  --bs-btn-hover-bg: var(--secondary-color);
  --bs-btn-hover-border-color: var(--secondary-color);
  --bs-btn-hover-color:var(--main-color);
}
.btn-secondary{
  --bs-btn-bg : var(--secondary-color);
  --bs-btn-border-color: var(--secondary-color);
  --bs-btn-hover-bg: var(--main-color);
  --bs-btn-hover-border-color: var(--main-color);
  --bs-btn-hover-color:var(--secondary-color);
  --bs-btn-color: var(--bs-primary);
}

.btn{
  --bs-btn-border-radius: 4px;
  --bs-btn-padding-y: 10px;
  --bs-btn-padding-x: 15px;
  font-family:var(--font-bold);
  font-size: 13px;
  letter-spacing: 1px;
  line-height: 1;

}

.leaflet-control-geosearch .results>.active,
.leaflet-control-geosearch .results>:hover{
  border-color: var(--secondary-color) !important;
  background-color: var(--secondary-color) !important;
  color: var(--main-color) !important;
}

.results{
  font-family: var(--font-bold) !important;
}
.leaflet-touch .leaflet-geosearch-bar form{
  border:0 !important;
  box-shadow: rgba(149, 157, 165, 0.2) 0px 8px 24px;
}

.leaflet-touch .leaflet-geosearch-bar form input{
  color: var(--text-color);
  height: 40px !important;
  font-size: 14px;

}

#adresse-détail{
  form{
    label{
      display: block;
      font-family: var(--font-bold);
    }
    input, select, textarea{
      width: 100%;
      padding: 10px;
      border: 1px solid #eee;
    }
    p{
      margin: 1rem 0;
    }
    .form__footer, .messages{
      grid-column: 1/4;
    }
  }
}

.leaflet-popup-close-button{
  width: 48px !important;
  height: 48px !important;
  font: 32px sans-serif !important;
  border-radius: 0 0 0 15px !important;
  background-color: var(--main-color) !important;
  color: white !important;
}

.form{
  label{
    display: block;
    font-family: var(--font-bold);
  }
  input{
    border: 1px solid #eee;
    padding: 10px;
  }
}

label.requis{
  cursor: help;
  color: #500;
}


.messages{
  padding-left: 0;
  list-style-type: none;
  padding: 10px;
}


/* icônes svg carte */

svg circle{
  margin-top: -4px;
}

.leaflet-control-layers-overlays hr{
  margin: 0.5rem 0;
}

.leaflet-control-layers-overlays div{
  cursor: default;
}


.leaflet-control-container .leaflet-top, .leaflet-control-container .leaflet-control-geosearch, .leaflet-control-container .leaflet-pane{
  z-index: 400;
}

.nouvelle-ligne-grille{
  grid-column-start: 1;
}

.commentaires .auteur{
  font-weight: bold;
}

.commentaires .date-envoi{
  font-size: 0.75rem;
}

.commentaire{
  overflow-wrap: break-word;
}

.alert.error, .errorlist{
  background-color: #ffe2e2;
  border-color: #b92d14;
  color: #3d1106;
}

.alert.warning{
  background-color: #fffed7;
  border-color: #ffb01e;
  color: #6e3f00;
}

.alert.success{
  background-color: #e2ffd5;
  border-color: #0b8611;
  color: #0d3508;
}

.errorlist{
  list-style-type: none;
  padding: 1rem;
  border: 1px solid #5a1200;
  border-radius: 5px;
}

.leaflet-marker-icon.leaflet-div-icon{
  width: 3em !important;
  height: 3em !important;
  display: flex !important;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  background-color: rgba(255,255,255,.8) !important;
  border-color: #5d93e2 !important;
}