html {
  /* 62.5% of 16px browser font size is 10px */
  font-size: 62.5%;
  height: 100%; }

body {
  font-family: "Roboto", sans-serif;
  font-weight: normal;
  background-color: #22415E;
  height: 100vh;
  margin: 0;
  padding: 0;
  font-size: 1.4rem;
  line-height: 2.1rem; }

h1,
h2 {
  font-family: "RobotoSlab", sans-serif;
  font-weight: 500;
  margin-top: 0; }

p {
  margin: 0; }

a {
  font-family: "RobotoSlab", sans-serif;
  font-weight: 500; }
  a, a:hover {
    text-decoration: none; }

.btn-container {
  position: relative;
  width: 100%;
  display: flex;
  justify-content: flex-end;
  align-items: center;
  z-index: 1; }
  .btn-container.abs-container {
    position: absolute;
    top: 20px;
    right: 0; }

.btn-blanc {
  display: flex;
  align-items: center;
  justify-content: center;
  background-color: #FFFFFF;
  color: #22415E;
  border-radius: 200px;
  border: none; }

.btn-round {
  height: 36px;
  width: 36px; }

.btn-bleu {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 200px;
  border: 2px solid #22415E;
  height: 44px;
  padding: 5px 18px 5px 18px; }
  .btn-bleu::after {
    content: "";
    position: relative;
    width: 15px;
    height: 100%;
    background-image: url("../src/svg/picto_next.svg");
    background-repeat: no-repeat;
    background-position: right center; }

.lien-bleu {
  border: none;
  border-bottom: 2px solid #22415E;
  padding: 0; }

.btn-bleu,
.lien-bleu {
  font-family: "RobotoSlab", sans-serif;
  font-weight: 500;
  font-size: 1.5rem;
  line-height: 2.25rem;
  margin-top: 20px;
  color: #22415E;
  background-color: transparent; }

.btn-langues {
  position: relative; }
  .btn-langues::after {
    content: "";
    position: relative;
    height: 100%;
    width: 11px;
    background-image: url(../src/svg/picto_down.svg);
    background-repeat: no-repeat;
    background-position: right center; }

.btn-close {
  background-image: url(../src/svg/picto_close.svg);
  background-repeat: no-repeat;
  background-position: center; }

.btn-menu {
  background-image: url(../src/svg/picto_menu.svg);
  background-repeat: no-repeat;
  background-position: center;
  width: 49px;
  height: 44px;
  border-radius: 200px 0 0 200px;
  margin-left: 10px; }

.container {
  padding: 20px;
  height: calc(100% - 40px); }

.menu-container {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: auto;
  background-color: #22415E;
  color: #FFFFFF;
  z-index: 10; }
  .menu-container .menu-content {
    display: flex;
    flex-direction: column;
    position: relative;
    padding: 20px 20px 54px 20px; }
    .menu-container .menu-content .menu-titre {
      width: 100%;
      font-family: "RobotoSlab", sans-serif;
      font-weight: 500;
      font-size: 2rem;
      line-height: 3rem;
      text-align: center;
      padding-bottom: 12px;
      border-bottom: 1px solid #FFFFFF; }
    .menu-container .menu-content .menu-items {
      width: 100%;
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: center; }
      .menu-container .menu-content .menu-items a {
        margin-top: 20px;
        color: #FFFFFF;
        font-size: 1.6rem;
        line-height: 2.4rem; }
        .menu-container .menu-content .menu-items a.active {
          color: #19AAC1; }

.popup-container {
  position: absolute;
  background-color: #FFFFFF;
  color: #22415E;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  border-radius: 31px;
  width: 90%; }
  .popup-container .popup-content {
    position: relative;
    padding: 40px 30px;
    text-align: center;
    display: flex;
    flex-direction: column;
    align-items: center; }
    .popup-container .popup-content h1 {
      color: #046980;
      font-size: 2.5rem;
      line-height: 3.6rem; }
    .popup-container .popup-content p {
      color: #22415E; }

/* width */
::-webkit-scrollbar {
  width: 2px; }

/* Track */
::-webkit-scrollbar-track {
  background: rgba(34, 65, 94, 0.3); }

/* Handle */
::-webkit-scrollbar-thumb {
  background: #22415E; }

/* Handle on hover */
::-webkit-scrollbar-thumb:hover {
  background: #22415E; }

.mat {
  height: 100%;
  position: relative;
  background-image: url("../src/img/matpoi.png");
  background-repeat: no-repeat;
  background-size: cover;
  background-position: center;
  overflow: hidden; }
  .mat .btn-container {
    padding-top: 20px;
    z-index: 0; }
  .mat .POI {
    position: relative;
    height: calc(100vh - 64px); }
    .mat .POI button {
      position: absolute;
      background-color: transparent;
      width: 100px;
      height: 120px;
      box-shadow: none;
      border: none;
      outline: none;
      -webkit-tap-highlight-color: transparent; }
    .mat .POI #POI-1 {
      right: 20%;
      top: -2%; }
    .mat .POI #POI-2 {
      left: 43%;
      top: 40%; }
    .mat .POI #POI-3 {
      left: 20%;
      bottom: 22%; }
    .mat .POI #POI-4 {
      left: 43%;
      bottom: 12%; }
.mat .POI #POI-5 {
  left: 5%;
  top: 35%;
}
.mat .POI #POI-6 {
  right: 5%;
  bottom: 40%;
}
.mat .POI #POI-7 {
  left: 6%;
  bottom: 12%;
}
  .mat .popup-container {
    height: 75%;
    display: none; }
    .mat .popup-container .popup-content {
      height: calc(100% - 34px);
      overflow: hidden;
      padding: 8px 8px 26px 8px; }
      .mat .popup-container .popup-content .btn-container {
        padding: 0; }
      .mat .popup-container .popup-content .fiches {
        padding: 0 5px;
        overflow: hidden; }
.mat .popup-container .popup-content .fiches #Fiche-1, .mat .popup-container .popup-content .fiches #Fiche-2, .mat .popup-container .popup-content .fiches #Fiche-3, .mat .popup-container .popup-content .fiches #Fiche-4, .mat .popup-container .popup-content .fiches #Fiche-5, .mat .popup-container .popup-content .fiches #Fiche-6, .mat .popup-container .popup-content .fiches #Fiche-7 {
  display: none;
  height: 100%;
  padding: 0 13px;
  overflow-x: hidden;
  overflow-y: auto;
}
.mat .popup-container .popup-content .fiches #Fiche-1 > *:not(:last-child):not(h1), .mat .popup-container .popup-content .fiches #Fiche-2 > *:not(:last-child):not(h1), .mat .popup-container .popup-content .fiches #Fiche-3 > *:not(:last-child):not(h1), .mat .popup-container .popup-content .fiches #Fiche-4 > *:not(:last-child):not(h1), .mat .popup-container .popup-content .fiches #Fiche-5 > *:not(:last-child):not(h1), .mat .popup-container .popup-content .fiches #Fiche-6 > *:not(:last-child):not(h1), .mat .popup-container .popup-content .fiches #Fiche-7 > *:not(:last-child):not(h1) {
  margin-bottom: 20px;
}
.mat .popup-container .popup-content .fiches #Fiche-1 h1, .mat .popup-container .popup-content .fiches #Fiche-2 h1, .mat .popup-container .popup-content .fiches #Fiche-3 h1, .mat .popup-container .popup-content .fiches #Fiche-4 h1, .mat .popup-container .popup-content .fiches #Fiche-5 h1, .mat .popup-container .popup-content .fiches #Fiche-6 h1, .mat .popup-container .popup-content .fiches #Fiche-7 h1 {
  margin-bottom: 13px;
}
.mat .popup-container .popup-content .fiches #Fiche-1 .img-zoom, .mat .popup-container .popup-content .fiches #Fiche-2 .img-zoom, .mat .popup-container .popup-content .fiches #Fiche-3 .img-zoom, .mat .popup-container .popup-content .fiches #Fiche-4 .img-zoom, .mat .popup-container .popup-content .fiches #Fiche-5 .img-zoom, .mat .popup-container .popup-content .fiches #Fiche-6 .img-zoom, .mat .popup-container .popup-content .fiches #Fiche-7 .img-zoom {
  position: relative;
}
.mat .popup-container .popup-content .fiches #Fiche-1 .img-zoom img, .mat .popup-container .popup-content .fiches #Fiche-2 .img-zoom img, .mat .popup-container .popup-content .fiches #Fiche-3 .img-zoom img, .mat .popup-container .popup-content .fiches #Fiche-4 .img-zoom img, .mat .popup-container .popup-content .fiches #Fiche-5 .img-zoom img, .mat .popup-container .popup-content .fiches #Fiche-6 .img-zoom img, .mat .popup-container .popup-content .fiches #Fiche-7 .img-zoom img {
  display: block;
  width: 100%;
}
.mat .popup-container .popup-content .fiches #Fiche-1 .img-zoom .btn-zoom, .mat .popup-container .popup-content .fiches #Fiche-2 .img-zoom .btn-zoom, .mat .popup-container .popup-content .fiches #Fiche-3 .img-zoom .btn-zoom, .mat .popup-container .popup-content .fiches #Fiche-4 .img-zoom .btn-zoom, .mat .popup-container .popup-content .fiches #Fiche-5 .img-zoom .btn-zoom, .mat .popup-container .popup-content .fiches #Fiche-6 .img-zoom .btn-zoom, .mat .popup-container .popup-content .fiches #Fiche-7 .img-zoom .btn-zoom {
  position: absolute;
  bottom: 7px;
  right: 7px;
  background-image: url(../src/svg/picto_zoom.svg);
  background-repeat: no-repeat;
  background-position: center;
}

.fslightbox-container {
  background: #000000 !important; }
  .fslightbox-container .fslightbox-slide-btn-container, .fslightbox-container .fslightbox-slide-number-container, .fslightbox-container .fslightbox-toolbar-button:first-child {
    display: none !important; }
  .fslightbox-container .fslightbox-nav .fslightbox-toolbar {
    background: transparent !important;
    top: 20px;
    right: 20px; }

.fslightbox-toolbar-button:last-child {
  border-radius: 200px;
  border: none;
  height: 34px;
  width: 34px;
  background: url(../src/svg/picto_close.svg) no-repeat #FFFFFF center; }
  .fslightbox-toolbar-button:last-child svg {
    display: none; }
.fslightbox-container > .fslightbox-absoluted {
  pointer-events: none;
}

@media (min-width:800px){
  .mat .popup-container {
    height: fit-content;
   }
}

@media (min-width: 800px) and (max-width: 1200px) {
  .mat {
    background-size: contain;
    width: auto;
  }
  .mat .POI {
    width: 500px;
    margin-left: auto;
    margin-right: auto;
  }
  .mat .POI button {
    width: 150px;
    height: 150px;
  }
  .mat .POI #POI-1 {
    right: 9%;
    top: 6%;
  }
  .mat .POI #POI-2 {
    left: 35%;
    top: 40%;
  }
  .mat .POI #POI-3 {
    left: 18%;
    bottom: 27%;
  }
  .mat .POI #POI-4 {
    left: 36%;
    bottom: 13%;
  }
  .mat .POI #POI-5 {
    left: -7%;
    top: 38%;
  }
  .mat .POI #POI-6 {
    right: -10%;
    bottom: 40%;
  }
  .mat .POI #POI-7 {
    left: -10%;
    bottom: 15%;
  }
}

/*# sourceMappingURL=mat.css.map */