.gabarit #led-list-components {
  grid-template-areas: "hero" "formation-nav" "container-content" "formation-complementary";
}

.gabarit .formation-single-nav-region {
  position: sticky;
  top: 0;
  z-index: 50;
  grid-area: formation-nav;
  align-self: start;
  width: 100%;
  min-width: 0;
  padding: 24px;
  background-color: var(--blanc, #fff);
  /* margin-top: 8px;
  margin-bottom: 16px; */
}

/* body.admin-bar .formation-single-nav-region {
  top: 32px;
} */

[data-formation-anchor] {
  scroll-margin-top: 88px;
}

body.admin-bar [data-formation-anchor] {
  scroll-margin-top: 120px;
}

@media screen and (max-width: 991px) {
  /* body.admin-bar .formation-single-nav-region {
    top: 46px;
  } */

  body.admin-bar [data-formation-anchor] {
    scroll-margin-top: 134px;
  }
}

.formation-nav {
  width: 100%;
  font-family: var(--borna);
}

.formation-nav--desktop {
  display: none;
  width: 100%;
  margin: 0;
  padding: 0;
  list-style: none;
}

.formation-nav--desktop li {
  min-width: 0;
}

.formation-nav--link {
  display: block;
  height: 100%;
  margin-bottom: -1px;
  padding: 12px 6px;
  border-bottom: 2px solid transparent;
  color: var(--bleu-nuit);
  text-align: center;
  font-size: clamp(16px, 1.5vw, 18px);
  font-family: var(--borna);
  font-style: normal;
  font-weight: 700;
  line-height: 180%;
  text-decoration: none;
  transition: border-color 0.2s ease, color 0.2s ease;
}

.formation-nav--link[aria-current="true"] {
  border-bottom-color: var(--bleu-ciel);
  color: var(--bleu-clair);
}

@media (hover: hover) {
  .formation-nav--link:hover {
    color: var(--bleu-ciel);
    text-decoration: none;
  }
}

.formation-nav--mobile,
.formation-nav--select-wrapper,
.formation-nav--mobile select {
  width: 100%;
}

.formation-nav--select-wrapper {
  position: relative;
}

.formation-nav--select-wrapper::after {
  content: "";
  position: absolute;
  right: 0;
  width: 48px;
  height: 48px;
  mask: url(../images/indicator.svg) no-repeat center;
  mask-size: contain;
  background-color: var(--bleu-ciel);
}

.formation-nav--mobile select {
  appearance: none;
  padding: 24px 50px 0 16px;
  background-color: var(--blanc);
  color: var(--bleu-nuit);
  font: var(--borna);
  font-size: 16px;
  font-weight: 600;
  line-height: 140%;
}

.formation-nav--screen-reader-text {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  clip-path: inset(50%);
  border: 0;
  white-space: nowrap;
}

@media screen and (min-width: 992px) {
  .formation-nav--desktop {
    display: grid;
    grid-template-columns: repeat(var(--formation-nav-count, 4), minmax(0, 1fr));
  }

  .formation-nav--mobile {
    display: none;
  }
}