@font-face {
  font-family: "LS";
  src: url(/fonts/LeagueSpartan-Black.ttf?d4303c11df0dad0324cf4652aeb3dbc1);
  font-weight: 900;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "LS";
  src: url(/fonts/LeagueSpartan-ExtraBold.ttf?3273ea0e69650f1142108f4a6bb3932a);
  font-weight: 800;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "LS";
  src: url(/fonts/LeagueSpartan-Bold.ttf?c311dbd01e80ebe50942d1ce22099692);
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "LS";
  src: url(/fonts/LeagueSpartan-SemiBold.ttf?eb71c3a8fa3a8659a3f70f421900b343);
  font-weight: 600;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "LS";
  src: url(/fonts/LeagueSpartan-Medium.ttf?a8c3b9360d69edbcf13e073b92e8b0ef);
  font-weight: 500;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "LS";
  src: url(/fonts/LeagueSpartan-Regular.ttf?09958bb07a94a6a4f1bbe55e80552d8f);
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "LS";
  src: url(/fonts/LeagueSpartan-Light.ttf?354c1d0b29bf33854f9c549fb32db91a);
  font-weight: 300;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "LS";
  src: url(/fonts/LeagueSpartan-ExtraLight.ttf?e5765d9f727ac0dd0babaff18df9a6ef);
  font-weight: 200;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "LS";
  src: url(/fonts/LeagueSpartan-Thin.ttf?a9af6f46ae0f83a403ec897f66d4d73b);
  font-weight: 100;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "In";
  src: url(/fonts/Inter-VariableFont_opsz,wght.ttf?e05c5f3d1fa6a3893d84c1eef4e89951);
  font-display: swap;
}
:root {
  --noir: 0, 0, 0;
  --blanc: 255, 255, 255;
  --bleu-principal: 0, 34, 255;
  --gris: 193, 193, 193;
  --vert-degrade: 153, 204, 0;
  --bleu-degrade: 22, 59, 124;
  --fond-page: 245, 245, 245;
  font-family: "In";
}

html {
  height: 100%;
  scrollbar-width: none;
}

#app {
  margin: 0;
  font-size: 0.8em;
  padding-bottom: 100px;
  padding-top: 61px;
  background-color: rgb(var(--fond-page));
}

.body-no-scroll {
  overflow: hidden;
  height: 100vh;
}

h1 {
  font-family: "LS";
  font-weight: 900;
  font-size: 2.5em;
}

h2 {
  font-family: "In";
  font-weight: bold;
  font-size: 1.5em;
  margin-top: 0;
  margin-bottom: 0.5vh;
  padding-top: 2vh;
}

h3 {
  font-family: "LS";
  font-weight: bold;
  font-size: 1.3em;
}

h4 {
  font-family: "LS";
  font-weight: 400;
  font-size: 1em;
}

h5 {
  font-family: "LS";
  font-weight: 600;
  font-size: 1em;
  color: rgb(var(--bleu-principal));
}

p {
  font-family: "In";
  font-weight: 400;
  font-size: 0.7em;
}

ul {
  font-family: "In";
  font-weight: 400;
  font-size: 0.7em;
}

a {
  text-decoration: none;
  color: inherit;
}

.bold {
  font-weight: bold;
}

.ecart {
  margin-left: 5%;
  margin-right: 5%;
}

.ecart-geotrek {
  margin-left: 1%;
  margin-right: 1%;
}

.hidden {
  visibility: hidden;
}

.disable {
  display: none;
}

.relative {
  position: relative;
}

.wp-block-list > li > ul > li {
  font-size: 1.4em;
  line-height: 2;
}

#texte-infos .wp-block-button__link {
  background-color: rgb(var(--bleu-principal));
  color: rgb(var(--blanc));
  border-radius: 100vh;
  border: rgb(var(--bleu-principal)) 1px solid;
  padding: 0.5em 22px;
  text-decoration: none;
  cursor: pointer;
  transition: all 0.3s;
}
#texte-infos .wp-block-button__link:hover {
  background-color: transparent;
  color: rgb(var(--bleu-principal));
}

.fill-bleu > path {
  fill: rgb(var(--bleu-principal));
}

.fill-blanc > path {
  fill: rgb(var(--blanc));
}

.stroke-noir > path {
  stroke: rgb(var(--noir));
}

.loader {
  background-color: rgb(var(--fond-page));
  cursor: wait;
  height: 100%;
  left: 0;
  position: fixed;
  top: 0;
  width: 100%;
  z-index: 997;
  transition: opacity 0.5s ease;
  display: flex;
  align-items: center;
  justify-content: center;
}

.loader-hidden {
  opacity: 0;
}

.slider {
  display: flex;
  overflow: auto;
  scrollbar-width: none;
  padding: 0 5%;
  cursor: grab;
  -webkit-user-select: none;
     -moz-user-select: none;
          user-select: none;
}

.grabbing {
  cursor: grabbing;
}

.cartes-container {
  display: flex;
  flex-wrap: wrap;
  gap: 13px;
}

.carte {
  display: flex;
  padding: 13px;
  background-color: rgb(var(--blanc));
  box-sizing: border-box;
  justify-content: space-between;
  box-shadow: 0 1px 2px 0 rgba(var(--noir), 0.25);
  border-radius: 1vh;
  align-items: center;
  gap: 3%;
  max-width: 400px;
  cursor: pointer;
  height: 100%;
}

.description-carte > * {
  margin: 2% 0;
}

.description-carte > *:first-child {
  margin-top: 0;
}

.description-carte > *:last-child {
  margin-bottom: 0;
}

.carte:first-child {
  margin-top: 0;
}

.image-carte {
  width: 33%;
  height: 33%;
  aspect-ratio: 1;
}

.image-carte > img {
  width: 100%;
  height: 100%;
  border-radius: 8px;
  -o-object-fit: cover;
     object-fit: cover;
}

.description-carte {
  width: 64%;
  display: flex;
  flex-direction: column;
  justify-content: center;
}

.description-carte .carte-loc {
  display: flex;
  gap: 0.5%;
  align-items: center;
}

.ligne-sep {
  background-color: rgb(var(--noir));
  height: 3px;
  width: 65px;
  margin-bottom: 3vh;
}

#promo {
  padding: 0 0 2vh;
  background-color: rgb(var(--blanc));
  margin-top: 3vh;
}

#liste-promo {
  gap: 4%;
  scrollbar-width: none;
}

.event-promo {
  display: flex;
  height: 30vh;
  width: 40vw;
  flex-direction: column;
  justify-content: flex-end;
  align-items: center;
  padding: 8px;
  box-sizing: border-box;
  flex: 0 0 auto;
  position: relative;
  color: rgb(var(--blanc));
  border-radius: 1vh;
  text-align: center;
  background-size: cover;
  background-position: center;
  cursor: pointer;
}

.event-promo::before {
  content: "";
  position: absolute;
  top: 50%;
  left: 0;
  height: 50%;
  width: 100%;
  background-image: linear-gradient(rgba(var(--bleu-principal), 0), rgba(var(--bleu-principal), 0.5) 40%, rgba(var(--noir), 1) 80%);
  border-bottom-right-radius: 1vh;
  border-bottom-left-radius: 1vh;
}

.event-promo > * {
  margin: 0;
  position: relative;
}

#texte-infos {
  font-size: 1.55em;
  line-height: 100%;
}

#texte-infos img {
  width: 100%;
  max-width: 600px;
  height: auto;
}

#texte-infos a {
  all: revert;
}

#texte-infos h4 {
  margin-bottom: 0;
}

.sous-ligne {
  width: 40px;
  height: 1px;
  background-color: grey;
  margin-bottom: 14px;
}

.map {
  width: 100%;
  height: calc(100% - 138px - 82.5px);
  border: none;
  bottom: 82.5px;
  position: fixed;
}

h4.type-club {
  color: rgb(var(--bleu-principal));
  margin: 0;
}

.ligne-type-club {
  width: 40px;
  height: 1px;
  background-color: rgb(var(--bleu-principal));
}

.mask {
  height: 100%;
  width: 100%;
  position: fixed;
  bottom: 0;
  left: 0;
  z-index: 9997;
  background-color: rgba(0, 0, 0, 0);
  transition: all var(--duration) ease-out;
}

.modal-container {
  height: 95%;
  width: 94%;
  margin: 0 3%;
  border-radius: 2vh 2vh 0 0;
  position: fixed;
  bottom: 0;
  left: 0;
  z-index: 9998;
  background-color: rgb(var(--blanc));
  padding: 0 5%;
  box-sizing: border-box;
  display: flex;
  flex-direction: column;
  align-items: center;
  box-shadow: 0 -10px 50px 5px rgba(var(--noir), 0.5);
  cursor: grab;
}

.slide-bar {
  background-color: rgb(var(--bleu-principal));
  height: 4px;
  width: 40%;
  border-radius: 4vh;
  margin: 14px 0;
  -webkit-user-select: none;
     -moz-user-select: none;
          user-select: none;
}

.border-bottom {
  border-bottom: rgb(var(--bleu-principal)) 1px solid;
}

.scroll {
  width: 100%;
  height: 80%;
  overflow-x: auto;
  cursor: default;
}

.fiche-image {
  width: 100%;
  height: 25%;
  display: flex;
  flex-direction: column;
  box-sizing: border-box;
}

.fiche-image > * {
  margin-bottom: 7px;
  box-sizing: border-box;
}

.slider-container {
  overflow: hidden;
  cursor: grab;
  height: 100%;
}

.slider-image {
  white-space: nowrap;
  transform: translateX(var(--translateX));
  transition: transform var(--durationImage) ease-in-out;
  height: 100%;
}

.slider-translate-move {
  transition: none;
}

.slider-image img {
  height: 100%;
  width: 100%;
  -o-object-fit: cover;
     object-fit: cover;
  border-radius: 8px;
  margin-right: 10%;
}

.slider-image img:last-child {
  margin-right: 0;
}

.points-slider {
  display: flex;
  justify-content: center;
  gap: 11px;
}

.point-slider {
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background-color: #d9d9d9;
}

.point-slider.image-active {
  background-color: rgb(var(--bleu-principal));
}

.fiche-infos {
  width: 100%;
  padding: 11px 0;
  font-size: 1.5em;
}

.fiche-infos h3, h5 {
  margin: 0;
}

.fiche-infos h4 {
  margin: 7px 0;
}

.fiche-infos div {
  display: flex;
  gap: 0.5%;
  align-items: center;
}

.fiche-infos .type-club {
  margin: 0 0 11px;
}

.fiche-details {
  width: 100%;
  padding: 7px 0 18px;
  font-size: 1.5em;
}

.liste-contacts {
  display: flex;
  gap: 14px;
  padding-bottom: 11px;
}

.case-contact {
  background-color: rgb(var(--bleu-principal));
  width: 31px;
  height: 31px;
  border-radius: 5px;
  display: flex;
  justify-content: center;
  align-items: center;
  cursor: pointer;
}

.case-contact > * {
  height: 100%;
  width: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
}

.affichage-reseaux {
  position: absolute;
  left: 31px;
  background-color: rgb(var(--noir));
  color: rgb(var(--blanc));
  width: -moz-fit-content;
  width: fit-content;
  border-radius: 100px;
  padding: 10% 40%;
  box-sizing: border-box;
  margin-left: 3px;
  z-index: 1000;
}

.affichage-reseaux a {
  white-space: nowrap;
}

#fiche-texte {
  word-break: break-all;
}

#fiche-carte {
  width: 100%;
  height: 180px;
}

.modal-translate-move {
  transform: translateY(var(--translateY));
  transition: none;
}

.modal-enter-from {
  transform: translateY(94vh);
}

.modal-leave-to {
  transform: translateY(94vh);
  transition: transform var(--duration) ease-out;
}

.modal-container.fiche-spots {
  height: 55vh;
}

.fiche-spots h3 {
  margin-bottom: 2%;
}

.fiche-coordonnees {
  width: 100%;
  font-size: 1.5em;
}

.fiche-coordonnees > p {
  font-size: 0.9em;
  font-family: "LS";
  font-weight: 400;
  margin: 3% 0;
}

.fiche-bouton {
  margin: 5% 0;
}

#clubs {
  margin-top: 2em;
}

.modal-translate-move.mask-spots {
  transform: translateY(var(--translateY));
  transition: none;
}

.modal-enter-from.mask-spots {
  transform: translateY(55vh);
}

.modal-leave-to.mask-spots {
  transform: translateY(55vh);
  transition: transform var(--duration) ease-in-out;
}

#bandeau-header {
  background-image: linear-gradient(to right, rgb(var(--vert-degrade)), rgb(var(--bleu-degrade)));
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 8.5px;
  box-sizing: border-box;
  width: 100%;
  box-shadow: 0px 4px 10px 0px rgba(var(--noir), 0.3);
  position: fixed;
  top: 0;
  z-index: 1000;
  height: 61px;
}

#logo-cdj {
  height: 100%;
  width: auto;
}

#logo-cdj > img {
  height: 100%;
  width: auto;
}

#geoloc {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: space-between;
  cursor: pointer;
}

#bandeau-header h6 {
  margin: 0;
  color: rgb(var(--blanc));
  margin-top: 20%;
  font-family: "LS";
  font-weight: bold;
}

#logo {
  height: 100%;
}

#logo img {
  height: 100%;
}

#titre-page {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

header {
  background-color: rgb(var(--blanc));
  padding-top: 1vh;
  box-sizing: border-box;
}

h1 {
  padding: 0.2em 0 0;
  margin: 0.5em 0;
}

nav {
  display: flex;
  width: 100%;
  height: auto;
  position: fixed;
  left: 0;
  bottom: 0;
  height: 92px;
  justify-content: center;
  align-items: flex-end;
  padding-top: 2%;
  z-index: 998;
}

nav::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  height: 100%;
  width: 100%;
  background-image: linear-gradient(rgba(var(--bleu-principal), 0), rgba(var(--bleu-principal), 1));
  opacity: 50%;
}

nav > div {
  display: flex;
  justify-content: space-between;
  background-color: rgb(var(--blanc));
  width: 94%;
  padding: 21px 12px;
  box-sizing: border-box;
  position: relative;
  border-radius: 2vh 2vh 0 0;
  box-shadow: 0 5px 4px 1px rgba(77, 92, 26, 0.25);
  height: 82.5;
}

nav > div > a {
  width: 20%;
  border-right: 1px rgb(var(--gris)) solid;
  display: flex;
  align-items: center;
  flex-direction: column;
}

nav img {
  min-height: 24px;
  width: auto;
}

nav svg {
  min-height: 24px;
  width: auto;
}

nav > div > a:last-child {
  border-right: 0;
}

nav h4 {
  margin-top: 4.5px;
  margin-bottom: 0;
}

.active {
  color: rgb(var(--bleu-principal));
}

.active > .stroke path {
  stroke: rgb(var(--bleu-principal));
}

.active > .fill path {
  fill: rgb(var(--bleu-principal));
}

.geotrek-pict {
  height: 24px;
  width: 24px;
}

.bouton-principal {
  background-color: rgb(var(--blanc));
  color: rgb(var(--bleu-principal));
  border-radius: 100vh;
  border: rgb(var(--bleu-principal)) 1px solid;
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-size: 1.2em;
  font-family: "LS";
  font-weight: bold;
  gap: 10px;
  width: -moz-fit-content;
  width: fit-content;
  padding: 0 22px;
  height: 31px;
  cursor: pointer;
}

.bouton-principal p {
  margin: 0;
  font-weight: bold;
}

.bouton-secondaire {
  font-size: 1em;
  padding: 0 15px;
  height: 23px;
}

.bouton-bleu {
  background-color: rgb(var(--bleu-principal));
  color: rgb(var(--blanc));
}

.bouton-page-download {
  background-color: transparent;
  color: rgb(var(--blanc));
  border: rgb(var(--blanc)) 2px solid;
  font-size: 2.5em;
  height: 50px;
}

.bouton-page-download.bouton-secondaire {
  height: 35px;
  margin-top: 10%;
  font-size: 1.5em;
}

.section-filtres {
  margin: 3% 0 8%;
}

.liste-filtre {
  gap: 2.5%;
}

.filtre {
  height: 9vh;
  width: 28vw;
  display: flex;
  align-items: flex-end;
  justify-content: center;
  padding: 2%;
  box-sizing: border-box;
  flex: 0 0 auto;
  position: relative;
  border-radius: 0.5vh;
  text-align: center;
}

.filtre::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  height: 100%;
  width: 100%;
  background-image: linear-gradient(rgba(var(--bleu-principal), 0), rgba(var(--bleu-principal), 0.5) 50%, rgba(var(--noir), 1) 100%);
  border-radius: 0.5vh;
}

.filtre > * {
  margin: 0;
  position: relative;
}

.filtre h5 {
  color: rgb(var(--blanc));
  font-size: 1.1em;
}

.voir-plus {
  display: flex;
  justify-content: center;
  margin: 34px 0 5px;
  background-color: rgb(var(--blanc));
  padding: 1vh 0;
  box-sizing: border-box;
}

.gros-points {
  font-size: 4em;
  pointer-events: none;
}

.filtre-mask {
  position: fixed;
  z-index: 9000;
  top: 0;
  left: 0;
  width: 80%;
  height: 100%;
  background-color: rgba(var(--noir), 0.8);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 0 10%;
  gap: 28px;
  transition: opacity 0.5s ease-in-out;
}

.geoloc-mask {
  width: 344px;
  padding: 0 calc(50% - 172px);
}

.filtre-mask > div {
  background-color: rgb(var(--blanc));
  box-sizing: border-box;
}

.filtre-mask h2 {
  font-family: "LS";
  margin: 0;
  padding: 0;
}

.container-filtre {
  border-radius: 2.5vh;
  width: 100%;
  padding: 3% 7%;
  overflow: hidden;
}

.container-filtre > h2 {
  text-align: center;
  padding-bottom: 2vh;
}

#container-geoloc {
  padding: 34px 30px 10px;
}

.filtres h2 {
  font-size: 1.3em;
}

.filtres > div {
  display: flex;
  align-items: center;
  border-bottom: 1px solid #b7b7b7;
}

.check-svg {
  width: 22px;
  height: 16px;
}

.filtres > div > .filtre-date:first-child {
  border-right: 1px solid #b7b7b7;
}

.filtres > div:last-child {
  border-bottom: none;
}

.close-filtre {
  padding: 0.8em 2em;
  border: 3px solid rgb(var(--bleu-principal));
  font-size: 1.2em;
  cursor: pointer;
  transition: all 0.3s;
}
.close-filtre:hover {
  background-color: rgb(var(--bleu-principal));
  color: rgb(var(--blanc));
}

.filtre-transition-enter-from {
  opacity: 0;
}

.filtre-transition-leave-to {
  opacity: 0;
}

.div-toggle {
  display: flex;
  align-items: center;
  justify-content: space-between;
  color: rgb(var(--blanc));
  background: #e2e2e2;
  padding: 0 6%;
}

.div-toggle h1 {
  font-weight: 700;
  font-size: 2em;
  margin: 0.7em 0;
}

#toggle-spots {
  background-color: rgb(var(--bleu-principal));
}

#toggle-clubs {
  background-color: #FFA600;
}

.switch {
  position: relative;
  width: 59px;
  height: 26px;
  cursor: pointer;
  overflow: hidden;
  border-radius: 50px;
  box-sizing: border-box;
  padding: 3px 4px;
  background: rgb(var(--blanc));
  box-shadow: inset 0 1px 1px 0 rgba(var(--noir), 0.5);
}

.switch input {
  position: absolute;
  top: -30px;
  left: -30px;
  width: 0;
  height: 0;
}

.switch input + div {
  position: relative;
  top: 0;
  left: 31px;
  width: 20px;
  height: 20px;
  border-radius: 50%;
  transition: all 0.5s;
  background-color: #DC0000;
  box-shadow: 0 1px 2px 0 rgba(var(--noir), 0.5);
}

.switch input:checked + div {
  left: 0;
  background-color: #3BDC00;
}

.toggle-loc > h2 {
  margin: 2vh 0;
  padding-top: 0.2em;
}

.toggle-loc {
  justify-content: center;
  gap: 4%;
}

#on-texte {
  color: #3BDC00;
}

#off-texte {
  color: #DC0000;
}

.div-curseur {
  padding: 3vh 0 5vh;
  position: relative;
}

/* Style du range */
input[type=range] {
  -webkit-appearance: none;
     -moz-appearance: none;
          appearance: none;
  width: 100%;
  background: rgb(var(--noir));
  outline: none;
  margin: 0;
  height: 2px;
}

/* Curseur (thumb) pour Chrome/Safari */
input[type=range]::-webkit-slider-thumb {
  -webkit-appearance: none;
          appearance: none;
  height: 32.6px;
  aspect-ratio: 1;
  background: rgb(var(--bleu-principal));
  border-radius: 50%;
  cursor: pointer;
}

/* Curseur (thumb) pour Firefox */
input[type=range]::-moz-range-thumb {
  -moz-appearance: none;
       appearance: none;
  height: 32.6px;
  aspect-ratio: 1;
  background: rgb(var(--bleu-principal));
  border-radius: 50%;
  cursor: pointer;
}

.tooltip {
  position: relative;
  font-size: 1.5em;
  font-weight: 400;
  width: -moz-fit-content;
  width: fit-content;
  text-align: center;
  font-family: "LS";
  margin-bottom: 10px;
}

.div-tooltip {
  width: 100%;
  box-sizing: border-box;
}

.filtre-date {
  height: 52px;
  cursor: pointer;
  display: flex;
  justify-content: space-between;
  align-items: center;
  width: 100%;
}

.filtres > .filtre-date {
  padding: 0;
}

.filtres > div > .filtre-date {
  padding: 0 10px;
  box-sizing: border-box;
  width: 50%;
}

.filtres > .calendrier-container {
  justify-content: center;
}

.calendrier {
  width: 290px;
  height: 290px;
}

.calendrier-header {
  padding: 4px 16px;
  width: 100%;
  align-items: center;
  display: flex;
  justify-content: space-between;
  position: relative;
  border-right: 0;
  box-sizing: border-box;
}

.bouton-rond {
  color: rgba(var(--noir));
  margin: 0;
  height: 36px;
  width: 36px;
  font-size: 0.7rem;
  border-radius: 50%;
  background-color: rgb(var(--blanc));
  border: none;
  position: relative;
  cursor: pointer;
}

.bouton-rond::before {
  border-radius: inherit;
  color: inherit;
  content: "";
  left: 0;
  opacity: 0;
  position: absolute;
  top: 0;
  height: 100%;
  width: 100%;
  transition: opacity 0.2s cubic-bezier(0.4, 0, 0.6, 1);
  background-color: currentColor;
  z-index: auto;
}

.bouton-rond:hover::before {
  opacity: 0.08;
}

.bouton-rond:focus::before {
  opacity: 0.24;
}

.calendrier-body {
  position: relative;
  padding: 0 12px;
  height: 242px;
}

.calendrier-body > table {
  width: 266px;
}

.calendrier-body th {
  color: rgba(0, 0, 0, 0.38);
}

.calendrier-body td {
  width: 45px;
  text-align: center;
}

.bouton-rond.calendrier-body-button {
  height: 32px;
  width: 32px;
}

.date-ajd {
  color: rgb(var(--bleu-principal));
  border: thin solid;
}

.date-active {
  color: rgb(var(--blanc));
  background-color: rgb(var(--bleu-principal));
}

.container-select-mois {
  width: 100%;
  justify-content: center;
}

.filtres > .container-select-mois > .select-mois {
  border: 2px solid rgb(var(--bleu-principal));
  height: 50px;
  width: 230px;
  display: flex;
  align-items: center;
  justify-content: space-around;
  cursor: pointer;
  margin-top: 15px;
  box-sizing: border-box;
  transition: border 0.2s;
}

.filtres > .container-select-mois > .select-mois.select-mois-active {
  border: 6px solid rgb(var(--bleu-principal));
}

#calendrier-prec {
  opacity: 0;
  position: absolute;
  transform: translateX(-266px);
  top: 0;
}

#calendrier-prec.calendrier-actif, #calendrier-suiv.calendrier-actif {
  display: initial;
  transform: translateX(0);
  opacity: 1;
  transition: all 0.3s ease-in-out;
}

#calendrier-actuel.move-right {
  transition: all 0.3s ease-in-out;
  transform: translateX(266px);
  opacity: 0;
}

#calendrier-actuel.move-left {
  transition: all 0.2s ease-in-out;
  transform: translateX(-266px);
  opacity: 0;
}

#calendrier-suiv {
  opacity: 0;
  position: absolute;
  transform: translateX(266px);
  top: 0;
}

.container-filtre-clubs {
  max-height: 80vh;
  overflow-y: scroll;
}

.filtre-clubs {
  cursor: pointer;
  height: 52px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  border-bottom: 1px solid #b7b7b7;
}

.filtre-clubs:last-child {
  border-bottom: none;
}

.filtre-clubs input {
  position: absolute;
  width: 0;
  height: 0;
}

.filtre-clubs input + .check-svg {
  visibility: hidden;
}

.filtre-clubs input:checked + .check-svg {
  visibility: visible;
}

.download {
  width: 100%;
  height: 100%;
  background-image: linear-gradient(#99CC00, #163B7C);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 5%;
  margin: 0;
  position: fixed;
  top: 0;
  left: 0;
  z-index: 2000;
}

.download::before {
  content: "";
  background-image: url(/images/image_fond_appli.jpg?7214bd01ff9dc1b9d6d0b446cd6d02a0);
  background-position: center;
  mix-blend-mode: soft-light;
  background-size: cover;
  opacity: 0.5;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  position: absolute;
}

.download > * {
  position: relative;
}

.logo-download {
  width: 80%;
  max-width: 350px;
}

.logo-download > img {
  width: 100%;
  height: auto;
}

.boutons-download {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 20%;
  height: auto;
}

#infos-download {
  font-size: 2.5em;
  color: rgb(var(--blanc));
  text-align: center;
  margin: -0.5em 0.5em 2em;
}
#infos-download > p {
  margin: 0;
}
#infos-download > p > img {
  margin-left: 10px;
}