#netco-cartes {
  height: 800px;
}

#leaflet {
  height: 1280px;
  width: 100%;
  position: relative;
  z-index: 0;
  outline: none !important;
}

#leaflet.fullwidth {
  margin-left: calc((100vw - var(--container-width)) / -2);
  width: 100vw;
}

#leaflet .small-screen {
  display: none;
}

@media screen and (max-width: 1080px) {
  #leaflet {
    height: auto;
  }
  #leaflet.fullwidth {
    width: 100vw;
    margin-right: -1rem;
    margin-left: -1rem;
    margin-bottom: 2rem;
  }
  #leaflet > *:not(.small-screen) {
    display: none;
  }
  #leaflet .small-screen {
    display: block;
    width: 100%;
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: center;
  }

  #leaflet .small-screen > a {
    border-radius: 0.25rem;
    text-align: center;
    background-color: var(--blue);
    color: white;
    padding: 1rem 1.5rem;
    margin: 0 auto;
    text-decoration: none;
    display: inline-block;
    transition: 0.2s;
    position: absolute;
    bottom: 1.5rem;
  }
  #leaflet .small-screen > a:hover {
    background-color: var(--yellow);
    color: var(--blue);
  }
}

@media screen and (max-width: 640px) {
  #leaflet .small-screen > a {
    position: static;
  }
}

.leaflet-map-pane,
.leaflet-overlay-pane {
  position: relative;
  height: 100%;
}

#leaflet .leaflet-overlay-pane::after {
  content: "";
  background: linear-gradient(white, transparent 10%, transparent 90%, white);
  position: absolute;
  inset: 0;
  height: 100%;
  z-index: 800;
  pointer-events: none;
}

/* .leaflet-overlay-pane,
.leaflet-map-pane,
#netco-cartes {
  overflow: hidden;
} */

#leaflet.leaflet-container {
  background: transparent;
  font-family: inherit;
  font-size: inherit;
}

#leaflet .leaflet-overlay-pane .pays {
  fill: var(--lighter-gray);
}

#leaflet .pays:is(.netco, .masanes, .abmtecna, .brec) {
  transition: 0.1s;
}

#leaflet .pays.netco {
  fill: var(--light-blue);
}

#leaflet .pays.netco.hovers {
  fill: hsl(212, 37%, 80%);
}

#leaflet .pays.abmtecna.hovers {
  fill: hsl(250, 100%, 90%);
  /* stroke: hsl(250, 100%, 90%); */
}

#leaflet .pays.masanes.hovers {
  fill: hsl(32, 100%, 90%);
  /* stroke: hsl(32, 100%, 90%); */
}

#leaflet .pays.brec.hovers {
  fill: hsl(0, 100%, 90%);
  /* stroke: hsl(32, 100%, 90%); */
}

#leaflet .pays.meteoro.hovers {
  fill: hsl(255, 67%, 90%);
  /* stroke: hsl(32, 100%, 90%); */
}

/* #leaflet .pays.netco:hover {
  fill: hsl(212, 37%, 80%);
}

#leaflet .pays.abmtecna:hover {
  fill: hsl(250, 100%, 90%);
}

#leaflet .pays.masanes:hover {
  fill: hsl(32, 100%, 90%);
} */

.leaflet-tooltip {
  border-radius: 0.25rem;
  padding: 1rem;
  box-shadow: 0 0 0.5rem rgba(0, 0, 0, 0.25);
  font-family: inherit;
  opacity: 1;
}

.netco-tooltip {
  width: 16rem;
  max-width: 20rem;
  white-space: normal;
  display: flex;
  flex-direction: column;
  gap: 1rem;
}

.netco-tooltip img {
  width: 60%;
  object-fit: contain;
}

.netco-tooltip img.brec {
  width: 25%;
  object-fit: contain;
}

.netco-tooltip .site {
  font-weight: 600;
}

.netco-tooltip a {
  text-decoration: none;
  color: var(--blue);
}

.netco-tooltip a i {
  margin-right: 0.5rem;
}

.netco-tooltip a + a {
  margin-top: -0.5rem;
}

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

.leaflet-image-layer {
  object-fit: contain;
  z-index: 200 !important;
}

.image-overlay {
  opacity: 0%;
  transition: 0.4s;
}

.image-overlay.hovers {
  opacity: 100%;
}

.company-tooltip {
  opacity: 0% !important;
  transition: 0.4s opacity;
  padding: 1rem;
  display: flex;
  flex-direction: column;
  gap: 1rem;

  width: 16rem;
}

.company-tooltip.hovers {
  opacity: 100% !important;
}

.company-tooltip img {
  max-width: 12rem;
  margin: 0 auto;
}

.company-tooltip p {
  margin: 0;
  text-align: center;
  font-size: 1.1rem;
  white-space: normal;
  line-height: 1;
}

.company-tooltip .flag {
  font-size: 2rem;
}

.company-tooltip.brec {
  width: 8rem;
}

.company-tooltip.brec p {
  white-space: nowrap;
}

.leaflet-tooltip-bottom::before {
  display: none !important;
}