@charset "UTF-8";
@font-face {
  font-family: "Grold";
  src: url("../font/Grold/Grold-Thin.otf") format("opentype");
  font-weight: 100;
  font-style: normal;
}
@font-face {
  font-family: "Grold";
  src: url("../font/Grold/Grold-ThinItalic.otf") format("opentype");
  font-weight: 100;
  font-style: italic;
}
@font-face {
  font-family: "Grold";
  src: url("../font/Grold/Grold-ExtraLight.otf") format("opentype");
  font-weight: 200;
  font-style: normal;
}
@font-face {
  font-family: "Grold";
  src: url("../font/Grold/Grold-ExtraLightItalic.otf") format("opentype");
  font-weight: 200;
  font-style: italic;
}
@font-face {
  font-family: "Grold";
  src: url("../font/Grold/Grold-Light.otf") format("opentype");
  font-weight: 300;
  font-style: normal;
}
@font-face {
  font-family: "Grold";
  src: url("../font/Grold/Grold-LightItalic.otf") format("opentype");
  font-weight: 300;
  font-style: italic;
}
@font-face {
  font-family: "Grold";
  src: url("../font/Grold/Grold-SemiLight.otf") format("opentype");
  font-weight: 350;
  font-style: normal;
}
@font-face {
  font-family: "Grold";
  src: url("../font/Grold/Grold-SemiLightItalic.otf") format("opentype");
  font-weight: 350;
  font-style: italic;
}
@font-face {
  font-family: "Grold";
  src: url("../font/Grold/Grold-Regular.otf") format("opentype");
  font-weight: 400;
  font-style: normal;
}
@font-face {
  font-family: "Grold";
  src: url("../font/Grold/Grold-Italic.otf") format("opentype");
  font-weight: 400;
  font-style: italic;
}
@font-face {
  font-family: "Grold";
  src: url("../font/Grold/Grold-Medium.otf") format("opentype");
  font-weight: 500;
  font-style: normal;
}
@font-face {
  font-family: "Grold";
  src: url("../font/Grold/Grold-MediumItalic.otf") format("opentype");
  font-weight: 500;
  font-style: italic;
}
@font-face {
  font-family: "Grold";
  src: url("../font/Grold/Grold-Bold.otf") format("opentype");
  font-weight: 700;
  font-style: normal;
}
@font-face {
  font-family: "Grold";
  src: url("../font/Grold/Grold-BoldItalic.otf") format("opentype");
  font-weight: 700;
  font-style: italic;
}
@font-face {
  font-family: "Grold";
  src: url("../font/Grold/Grold-ExtraBold.otf") format("opentype");
  font-weight: 800;
  font-style: normal;
}
@font-face {
  font-family: "Grold";
  src: url("../font/Grold/Grold-ExtraBoldItalic.otf") format("opentype");
  font-weight: 800;
  font-style: italic;
}
@font-face {
  font-family: "Grold";
  src: url("../font/Grold/Grold-Black.otf") format("opentype");
  font-weight: 900;
  font-style: normal;
}
@font-face {
  font-family: "Grold";
  src: url("../font/Grold/Grold-BlackItalic.otf") format("opentype");
  font-weight: 900;
  font-style: italic;
}
@font-face {
  font-family: "Grold";
  src: url("../font/Grold/Grold-ExtraBlack.otf") format("opentype");
  font-weight: 950;
  font-style: normal;
}
@font-face {
  font-family: "Grold";
  src: url("../font/Grold/Grold-ExtraBlackItalic.otf") format("opentype");
  font-weight: 950;
  font-style: italic;
}
@font-face {
  font-family: "GroldSlim";
  src: url("../font/Grold/GroldSlim-Thin.otf") format("opentype");
  font-weight: 100;
  font-style: normal;
}
@font-face {
  font-family: "GroldSlim";
  src: url("../font/Grold/GroldSlim-ThinItalic.otf") format("opentype");
  font-weight: 100;
  font-style: italic;
}
@font-face {
  font-family: "GroldSlim";
  src: url("../font/Grold/GroldSlim-ExtraLight.otf") format("opentype");
  font-weight: 200;
  font-style: normal;
}
@font-face {
  font-family: "GroldSlim";
  src: url("../font/Grold/GroldSlim-ExtraLightItalic.otf") format("opentype");
  font-weight: 200;
  font-style: italic;
}
@font-face {
  font-family: "GroldSlim";
  src: url("../font/Grold/GroldSlim-Light.otf") format("opentype");
  font-weight: 300;
  font-style: normal;
}
@font-face {
  font-family: "GroldSlim";
  src: url("../font/Grold/GroldSlim-LightItalic.otf") format("opentype");
  font-weight: 300;
  font-style: italic;
}
@font-face {
  font-family: "GroldSlim";
  src: url("../font/Grold/GroldSlim-SemiLight.otf") format("opentype");
  font-weight: 350;
  font-style: normal;
}
@font-face {
  font-family: "GroldSlim";
  src: url("../font/Grold/GroldSlim-SemiLightItalic.otf") format("opentype");
  font-weight: 350;
  font-style: italic;
}
@font-face {
  font-family: "GroldSlim";
  src: url("../font/Grold/GroldSlim-Regular.otf") format("opentype");
  font-weight: 400;
  font-style: normal;
}
@font-face {
  font-family: "GroldSlim";
  src: url("../font/Grold/GroldSlim-Italic.otf") format("opentype");
  font-weight: 400;
  font-style: italic;
}
@font-face {
  font-family: "GroldSlim";
  src: url("../font/Grold/GroldSlim-Medium.otf") format("opentype");
  font-weight: 500;
  font-style: normal;
}
@font-face {
  font-family: "GroldSlim";
  src: url("../font/Grold/GroldSlim-MediumItalic.otf") format("opentype");
  font-weight: 500;
  font-style: italic;
}
@font-face {
  font-family: "GroldSlim";
  src: url("../font/Grold/GroldSlim-Bold.otf") format("opentype");
  font-weight: 700;
  font-style: normal;
}
@font-face {
  font-family: "GroldSlim";
  src: url("../font/Grold/GroldSlim-BoldItalic.otf") format("opentype");
  font-weight: 700;
  font-style: italic;
}
@font-face {
  font-family: "GroldSlim";
  src: url("../font/Grold/GroldSlim-ExtraBold.otf") format("opentype");
  font-weight: 800;
  font-style: normal;
}
@font-face {
  font-family: "GroldSlim";
  src: url("../font/Grold/GroldSlim-ExtraBoldItalic.otf") format("opentype");
  font-weight: 800;
  font-style: italic;
}
@font-face {
  font-family: "GroldSlim";
  src: url("../font/Grold/GroldSlim-Black.otf") format("opentype");
  font-weight: 900;
  font-style: normal;
}
@font-face {
  font-family: "GroldSlim";
  src: url("../font/Grold/GroldSlim-BlackItalic.otf") format("opentype");
  font-weight: 900;
  font-style: italic;
}
@font-face {
  font-family: "GroldSlim";
  src: url("../font/Grold/GroldSlim-ExtraBlack.otf") format("opentype");
  font-weight: 950;
  font-style: normal;
}
@font-face {
  font-family: "GroldSlim";
  src: url("../font/Grold/GroldSlim-ExtraBlackItalic.otf") format("opentype");
  font-weight: 950;
  font-style: italic;
}
@keyframes bounce {
  0% {
    transform: translateY(0);
  }
  50% {
    transform: translateY(-10px);
  }
  100% {
    transform: translateY(0);
  }
}
body {
  /* background: linear-gradient(45deg, #FFB44E, #FF7869, #7ADBCD, #1E4E5F);    */
  background: url("../images/background.jpg") no-repeat center center fixed;
  background-size: cover;
  font-family: "GroldSlim", sans-serif;
  font-weight: 200;
  /*font-family: serif;*/
  font-size: 20px;
  line-height: 1.25;
  min-height: 100vh;
}

h1, h2, h3, h4, h5, h6 {
  font-family: "Grold", serif;
}

h1 {
  font-size: 3.5rem;
}

h2 {
  font-size: 3rem;
}

h3 {
  font-size: 2.5rem;
}

h4 {
  font-size: 2rem;
}

h5 {
  font-size: 1.5rem;
  font-weight: 200;
}

/* Personnalisation du popover */
.tippy-box[data-theme~=custom] {
  background-color: #FF796C; /* Couleur de fond */
  color: #000; /* Couleur du texte */
  border-radius: 8px; /* Coins arrondis */
  padding: 5px;
  font-size: 14px;
  box-shadow: 0px 4px 10px rgba(0, 0, 0, 0.2);
}

/* Modifier la flèche du popover */
.tippy-box[data-theme~=custom][data-placement^=top] > .tippy-arrow::before {
  border-top-color: #FF796C; /* Couleur de la flèche */
}

.badge-INSCRIPTION_ATTENTE {
  background-color: #FFB358;
}

.badge-DESINSCRIPTION {
  background-color: #FF796C;
}

.badge-INSCRIPTION {
  background-color: #7EDBCD;
}

.badge-DESINSCRIPTION_ATTENTE {
  background-color: #204E5F;
}

.badge-MAIL_BILLET {
  background-color: #9b59b6;
}

.badge-MAIL_ALERTE {
  background-color: #34495e;
}

.badge-SONDAGE {
  background-color: #f1c40f;
}

.badge-BIENVENUE {
  background-color: #1abc9c;
}

.badge-JETONS {
  background-color: #282E33;
}

a {
  color: #204e60;
}
a:hover {
  color: #204E5F;
}

input, button, select {
  border-radius: 0 !important;
}

.color-1 {
  color: #204E5F !important;
}

.color-2 {
  color: #FF796C !important;
}

.color-3 {
  color: #FFB358 !important;
}

.color-4 {
  color: #7EDBCD !important;
}

.bg-color-1 {
  background-color: #204E5F !important;
  border-color: #204E5F !important;
}

.bg-color-2 {
  background-color: #FF796C !important;
  border-color: #FF796C !important;
  color: black !important;
}

.bg-color-3 {
  background-color: #FFB358 !important;
  border-color: #FFB358 !important;
  color: black !important;
}

.bg-color-4 {
  background-color: #7EDBCD !important;
  border-color: #7EDBCD !important;
  color: black !important;
}

.bg-primary, .btn-primary, .btn-primary:hover, .btn-primary:active, .btn-primary:focus {
  background-color: #204e60 !important;
  border-color: #204e60 !important;
}

.btn-danger, .btn-danger:hover, .btn-danger:active, .btn-danger:focus, .bg-danger {
  background-color: #FF796C !important;
  border-color: #FF796C !important;
}

.btn-secondary, .btn-secondary:hover, .btn-secondary:active, .btn-secondary:focus {
  background-color: #7EDBCD !important;
  border-color: #7EDBCD !important;
  color: #204E5F !important;
}

.bg-success, .btn-success, .btn-success:hover, .btn-success:active, .btn-success:focus {
  background-color: #7EDBCD !important;
  border-color: #7EDBCD !important;
  color: #204E5F !important;
}

div#header-img {
  background: url("../images/background-header.png") no-repeat center center;
  background-position: bottom center;
  background-size: cover;
  text-align: center;
}
div#header-img img {
  max-width: 400px;
}

.form-signin {
  width: 100%;
  max-width: 500px;
  padding: 15px;
  margin: auto;
}
.form-signin a {
  text-decoration: none;
}
.form-signin div.form-wrapper {
  background-color: #fff;
  padding: 40px;
  border-radius: 5px;
  box-shadow: 10px 10px 10px 0px rgba(0, 0, 0, 0.25);
}
.form-signin button {
  font-size: 1rem;
}

.center-screen {
  display: flex;
  flex-direction: column;
  justify-content: center;
  height: 100vh;
}

div.document-card {
  pointer-events: pointer;
  cursor: pointer;
}

div.document-disabled {
  opacity: 0.6;
  pointer-events: none;
}

/*
<figure class="media"><oembed url="https://www.youtube.com/watch?v=Za-Z3dg9xrA"></oembed></figure>
*/
figure.media {
  margin: 0;
  padding: 0;
  position: relative;
  padding-bottom: 56.25%; /* 16:9 aspect ratio */
  height: 0;
  overflow: hidden;
}

.btn {
  padding-top: 9px;
  border-radius: 15px;
}

.btn-hover {
  background: #204E5F;
  text-transform: uppercase;
  border-radius: 15px;
  padding: 10px 15px !important;
  margin: 12px 30px 12px 0;
  font-weight: bold;
  color: #fff;
}

.btn-hover:hover {
  background: #FF796C;
  color: #000;
}

div.event-card {
  min-height: 450px;
}

div.card-footer {
  text-transform: uppercase;
}

div.macaron {
  position: absolute;
  right: 0;
  bottom: 0;
  /*background-color: $color-primary;*/
  color: #fff;
  width: 70px;
  height: 70px;
  border-radius: 50%;
  box-shadow: 0px 0px 10px 0px rgba(0, 0, 0, 0.25);
  font-size: 1.5rem;
  text-align: center;
  line-height: 1.5rem;
  font-weight: bold;
  animation: bounce 2s infinite;
  animation-delay: 0.5s;
  display: flex;
  justify-content: center;
  align-items: center;
  padding: 8px 4px 4px 4px;
}

div.macaron2 {
  position: absolute;
  right: 3px;
  top: 3px;
  /*background-color: $color-primary;*/
  color: #fff;
  background: rgba(0, 0, 0, 0.5);
  padding: 8px 4px 4px 4px;
  border-radius: 10px;
  box-shadow: 0px 0px 10px 0px rgba(0, 0, 0, 0.25);
  font-size: 1.2rem;
  text-align: center;
  line-height: 1.2rem;
  font-weight: bold;
}

div.macaron3 {
  position: absolute;
  left: 3px;
  top: 3px;
  /*background-color: $color-primary;*/
  color: #fff;
  background: rgba(0, 0, 0, 0.5);
  padding: 8px 4px 4px 4px;
  border-radius: 10px;
  box-shadow: 0px 0px 10px 0px rgba(0, 0, 0, 0.25);
  font-size: 1.2rem;
  text-align: center;
  line-height: 1.2rem;
  font-weight: bold;
}

div.macaron4 {
  position: absolute;
  left: 5px;
  bottom: 5px;
  /*background-color: $color-primary;*/
  color: white;
  background: #FF796C;
  padding: 8px 4px 4px 4px;
  border-radius: 10px;
  box-shadow: 0px 0px 10px 0px rgba(0, 0, 0, 0.25);
  font-size: 1.2rem;
  text-align: center;
  line-height: 1.2rem;
  font-weight: bold;
}

div.macaron-reservation {
  position: absolute;
  left: 50%;
  top: -38px;
  transform: translateX(-50%);
  /*background-color: $color-primary;*/
  color: #204E5F;
  background: white;
  padding: 10px 10px 2px 10px;
  border-radius: 25px;
  font-family: "Grold", sans-serif;
  font-size: 2.5rem;
  text-align: center;
  font-weight: bold;
  min-width: 180px;
}

a.nav-link {
  background: white;
  border-radius: 15px;
  padding: 10px 15px 6px 15px !important;
  margin: 12px 30px 12px 0;
  position: relative;
  color: #204e60;
  text-transform: uppercase;
  font-weight: bold;
}
a.nav-link.active, a.nav-link:hover {
  color: white !important;
  background: #204E5F !important;
  text-decoration: none !important;
  box-shadow: 5px 10px 10px rgba(0, 0, 0, 0.25);
  /*&:before{
      content: "•";
      font-size: 3.5rem;
      color: $color-2;
      position: absolute;
      top: -26px;
      left: -13px;
  }*/
}
a.nav-link:hover {
  text-decoration: underline;
}

/* Style de base pour la pagination */
.pagination {
  display: flex;
  list-style: none;
  padding: 0;
  margin-top: 20px;
  justify-content: center;
}

.pagination li {
  margin: 0 4px;
}

.pagination a {
  display: inline-block;
  padding: 2px 12px;
  color: #FFF;
  text-decoration: none;
  border: 1px solid #ddd;
  border-radius: 4px;
}

/* Style pour l'élément actif */
.pagination .active a {
  background-color: #FF796C;
  color: #fff;
}

/* Style pour le survol */
.pagination a:hover {
  background-color: #f1f1f1;
}

/* Style pour les flèches "Next" et "Last" */
.pagination span {
  display: inline-block;
  color: #FFF;
  border-radius: 4px;
  cursor: not-allowed;
}

/* Style pour le survol des flèches désactivées */
.pagination span:hover {
  background-color: transparent;
}

div#back-to-top {
  position: fixed;
  bottom: 20px;
  right: 20px;
  width: 40px;
  height: 40px;
  background-color: #204e60;
  color: white;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  box-shadow: 0 2px 5px rgba(0, 0, 0, 0.3);
  z-index: 1000;
  border: 1px solid #fff;
}

div#mobile-jetons {
  display: none;
}

@media (max-width: 992px) {
  div#jeton-container {
    position: absolute !important;
    top: 12px !important;
    right: 5px !important;
  }
  div#jeton-container div.btn {
    font-size: 0.8rem;
  }
  div#jeton-container img {
    display: none;
  }
  div#mobile-jetons {
    display: block;
    position: absolute;
    top: 35px;
    right: -7px;
  }
  div#mobile-jetons img {
    max-width: 50px;
  }
  a.nav-link.active:before {
    position: absolute;
    top: -25px;
    left: -22px;
  }
  div#header-img img {
    max-width: 300px;
  }
  table.table-armonia tbody tr {
    display: block;
    margin-bottom: 50px !important;
  }
  table.table-armonia tbody tr td {
    width: 100%;
    display: block;
    text-align: center;
  }
  table.table-armonia tbody tr td span.event-name {
    font-size: 1.75rem;
    background: #F0F0F0;
    display: inline-block;
    width: 100%;
    padding: 10px;
  }
  figure.media {
    margin: 0;
    padding: 0;
    position: relative;
    padding-bottom: 75%; /* 4:3 aspect ratio */
    height: 0;
    overflow: hidden;
    width: 100%;
  }
  figure.media iframe, figure.media video, figure.media embed, figure.media object {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
  }
}/*# sourceMappingURL=app.css.map */