@charset "UTF-8";

.formation-parcours {
  background-color: var(--blanc);
  padding-inline: 0;
}

.formation-parcours--container {
  width: min(100% - 32px, 1280px);
  margin-inline: auto;
  padding-block: 32px;
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  grid-template-areas: "content" "aside";
  gap: 32px;
}

@media screen and (min-width: 992px) {
  .formation-parcours--container {
    padding-block: 64px;
    grid-template-columns: minmax(0, 775px) minmax(300px, 411px);
    grid-template-areas: "content aside";
    align-items: start;
    gap: clamp(48px, 5vw, 122px);
  }
}

.formation-parcours {
  /* ==================================================
     CONTENT
  ================================================== */
}

.formation-parcours--content {
  grid-area: content;
  min-width: 0;
  box-shadow: 0 -16px 48.1px 0 rgba(39, 15, 61, 0.1);
  border-radius: 16px;
  padding: 24px 16px;
}

.formation-parcours {
  /* ==================================================
  SELECTION
  ================================================== */
}

.formation-parcours--selection {
  padding-top: 16px;
  display: flex;
  flex-direction: column;
  gap: 16px;
  overflow: hidden;
}

.formation-parcours--selection .title {
  color: var(--bleu-nuit);
  font-family: var(--borna);
  font-size: 20px;
  font-style: normal;
  font-weight: 600;
  line-height: 160%;
}

.formation-parcours--selection-list {
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.formation-parcours {
  /* ==================================================
  SELECTION ITEM / ACCORDION
  ================================================== */
}

.formation-parcours .selection-item {
  width: 100%;
  border: 1px solid #C5C8D6;
  /* ------------------------------------------
  HEADER
  ------------------------------------------- */
}

.formation-parcours .selection-item--header {
  width: 100%;
  display: grid;
  grid-template-columns: 64px minmax(0, 1fr) 32px;
  align-items: center;
  gap: 16px;
  padding: 16px;
  color: var(--bleu-nuit);
  text-align: left;
  cursor: pointer;
}

.formation-parcours .selection-item--icon {
  width: 64px;
  height: 64px;
  display: flex;
  align-items: center;
  justify-content: center;
  background-color: #2A4BA8;
  border-radius: 4px;
}

.formation-parcours .selection-item--icon::after {
  content: "";
  width: 32px;
  height: 32px;
  mask: var(--icon) no-repeat center;
  mask-size: contain;
  background-color: #FFF;
}

.formation-parcours .selection-item--content {
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.formation-parcours .selection-item--label {
  font-family: var(--borna);
  font-size: 16px;
  font-style: normal;
  font-weight: 700;
  line-height: 160%;
}

.formation-parcours .selection-item--value {
  font-family: var(--borna);
  font-size: 14px;
  font-style: normal;
  font-weight: 400;
  line-height: 160%;
}

.formation-parcours .selection-item--toggle {
  position: relative;
  width: 32px;
  height: 32px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.formation-parcours .selection-item--toggle::after {
  content: "";
  width: 24px;
  height: 24px;
  mask: url(../images/fi-rr-angle-small-down.svg) no-repeat center;
  mask-size: contain;
  background-color: #000;
  transition: transform 0.3s ease;
}

.formation-parcours .selection-item {
  /* ------------------------------------------
  PANEL
  ------------------------------------------- */
}

.formation-parcours .selection-item--panel {
  display: grid;
  grid-template-rows: 0fr;
  opacity: 0;
  transition: grid-template-rows 0.35s ease, opacity 0.25s ease;
}

.formation-parcours .selection-item--panel-inner {
  min-height: 0;
  overflow: hidden;
}

.formation-parcours .selection-item {
  /* ------------------------------------------
  OPEN
  ------------------------------------------- */
}

.formation-parcours .selection-item.is-open .selection-item--toggle::after {
  transform: rotate(180deg);
}

.formation-parcours .selection-item.is-open .selection-item--panel {
  grid-template-rows: 1fr;
  opacity: 1;
}

.formation-parcours {
  /* ==================================================
  OPTIONS
  ================================================== */
}

.formation-parcours .selection-options {
  margin: 0;
  padding: 0 16px 16px;
  border: 0;
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.formation-parcours .selection-options legend {
  width: 100%;
  margin-bottom: 16px;
  color: var(--bleu-nuit);
  font-family: var(--borna);
  font-size: 16px;
  font-style: normal;
  font-weight: 700;
  line-height: 160%;
}

.formation-parcours {
  /* ==================================================
  OPTION
  ================================================== */
}

.formation-parcours .selection-option {
  width: 100%;
  min-height: 72px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  padding: 16px;
  border: 1px solid #C6C6C6;
  cursor: pointer;
  transition: border-color 0.2s ease, background-color 0.2s ease;
}

.formation-parcours .selection-option+.formation-parcours .selection-option {
  margin-top: 12px;
}

@media (hover: hover) {
  .formation-parcours .selection-option:hover {
    border-color: var(--bleu-ciel);
  }
}

.formation-parcours .selection-option {
  /* ------------------------------------------
  TEXTE
  ------------------------------------------- */
}

.formation-parcours .selection-option--content {
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.formation-parcours .selection-option--content strong {
  font-family: var(--borna);
  color: var(--bleu-nuit);
  font-size: 16px;
  font-style: normal;
  font-weight: 700;
  line-height: 160%;
}

.formation-parcours .selection-option--content>span {
  font-family: var(--borna);
  color: var(--bleu-nuit);
  font-size: 16px;
  font-style: normal;
  font-weight: 400;
  line-height: 160%;
}

.formation-parcours .selection-option {
  /* ------------------------------------------
  LOGICIEL
  ------------------------------------------- */
}

.formation-parcours .selection-option--product {
  min-width: 0;
  display: flex;
  align-items: center;
  gap: 12px;
}

.formation-parcours .selection-option--product img {
  width: 40px;
  height: 40px;
  object-fit: contain;
  flex-shrink: 0;
}

.formation-parcours .selection-option--product strong {
  font-family: var(--borna);
  font-size: 14px;
  font-style: normal;
  font-weight: 700;
  line-height: 160%;
}

.formation-parcours .selection-option {
  /* ------------------------------------------
  RADIO CUSTOM
  ------------------------------------------- */
}

.formation-parcours .selection-option input[type=radio] {
  appearance: none;
  -webkit-appearance: none;
  width: 22px;
  height: 22px;
  flex: 0 0 22px;
  margin: 0;
  border: 1px solid #AEB4C4;
  border-radius: 50%;
  background-color: #FFF;
  cursor: pointer;
  transition: border-color 0.2s ease, box-shadow 0.2s ease;
}

.formation-parcours .selection-option input[type=radio]:checked {
  border-color: #2A4BA8;
  box-shadow: inset 0 0 0 4px #FFF, inset 0 0 0 12px #2A4BA8;
}

.formation-parcours .selection-option input[type=radio]:focus-visible {
  outline: 2px solid var(--bleu-ciel);
  outline-offset: 3px;
}

.formation-parcours .selection-option:has(input:checked) {
  border-color: #2A4BA8;
}

.formation-parcours {
  /* ==================================================
  RESPONSIVE
  ================================================== */
}

@media screen and (max-width: 599px) {
  .formation-parcours .selection-item--header {
    grid-template-columns: 48px minmax(0, 1fr) 24px;
    gap: 12px;
    padding: 12px;
  }

  .formation-parcours .selection-item--icon {
    width: 48px;
    height: 48px;
  }

  .formation-parcours .selection-item--icon::after {
    width: 24px;
    height: 24px;
  }

  .formation-parcours .selection-item--label {
    font-size: 14px;
  }

  .formation-parcours .selection-item--value {
    font-size: 13px;
  }

  .formation-parcours .selection-options {
    padding: 0 12px 12px;
  }

  .formation-parcours .selection-option {
    min-height: 64px;
    padding: 12px;
    gap: 12px;
  }

  .formation-parcours .selection-option--content>span {
    font-size: 12px;
  }

  .formation-parcours .selection-option--product img {
    width: 32px;
    height: 32px;
  }
}

.formation-parcours {
  /* ==================================================
  SEARCH / FILTERS
  ================================================== */
}

/* Guided parcours: context choices are always visible. */
.formation-parcours[data-variant="parcours"] .selection-context {
  min-width: 0;
  color: var(--bleu-nuit);
  font-family: var(--borna);
  border: 0;
}

.formation-parcours[data-variant="parcours"] .selection-context--help {
  margin: 0;
  font-size: 14px;
  line-height: 160%;
}

.formation-parcours[data-variant="parcours"] .selection-context--options {
  min-width: 0;
  margin: 0;
  /* padding: 16px; */
  border: 0;
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 16px;
}

@media screen and (min-width: 600px) {
  .formation-parcours[data-variant="parcours"] .selection-context--options {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

.formation-parcours[data-variant="parcours"] .selection-context--option {
  position: relative;
  min-width: 0;
  min-height: 72px;
  padding: 16px;
  display: flex;
  align-items: center;
  gap: 16px;
  border: 1px solid #C5C8D6;
  background-color: var(--blanc);
  font-size: 14px;
  font-weight: 600;
  line-height: 160%;
  text-align: left;
  cursor: pointer;
  transition: background-color 0.2s ease, border-color 0.2s ease, color 0.2s ease;
}

.formation-parcours[data-variant="parcours"] .selection-context--icon {
  width: 48px;
  height: 48px;
  flex: 0 0 48px;
}

.formation-parcours[data-variant="parcours"] .selection-context--icon::after {
  width: 24px;
  height: 24px;
}

.formation-parcours[data-variant="parcours"] .selection-context--text {
  min-width: 0;
}

@media (hover: hover) {
  .formation-parcours[data-variant="parcours"] .selection-context--option:not(:has(input:checked)):hover {
    border-color: var(--bleu-ciel);
    background-color: var(--bleu-acide);
  }
}

.formation-parcours[data-variant="parcours"] .selection-context--option input[type="radio"] {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  border: 0;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}

.formation-parcours[data-variant="parcours"] .selection-context--option:has(input:checked) {
  border-color: var(--bleu-ciel);
  background-color: var(--bleu-ciel);
  color: var(--blanc);
}

.formation-parcours[data-variant="parcours"] .selection-context--option:has(input:checked) .selection-context--icon {
  background-color: var(--blanc);
}

.formation-parcours[data-variant="parcours"] .selection-context--option:has(input:checked) .selection-context--icon::after {
  background-color: var(--bleu-nuit);
}

.formation-parcours[data-variant="parcours"] .selection-context--option:has(input:focus-visible) {
  outline: 2px solid var(--bleu-ciel);
  outline-offset: -4px;
}

@media screen and (max-width: 599px) {
  .formation-parcours[data-variant="parcours"] .selection-context--heading {
    padding: 12px;
  }

  .formation-parcours[data-variant="parcours"] .selection-context--help {
    font-size: 13px;
  }

  .formation-parcours[data-variant="parcours"] .selection-context--options {
    gap: 12px;
  }

  .formation-parcours[data-variant="parcours"] .selection-context--option {
    min-height: 64px;
    padding: 12px;
    gap: 12px;
  }
}

@media screen and (min-width: 600px) {
  .formation-parcours[data-variant="parcours"] .selection-context--icon {
    width: 64px;
    height: 64px;
    flex: 0 0 64px;
  }

  .formation-parcours[data-variant="parcours"] .selection-context--icon::after {
    width: 32px;
    height: 32px;
  }
}

.formation-parcours--filters {
  margin-top: 16px;
}

.formation-parcours--search {
  position: relative;
  border: 1px solid var(--bleu-ciel);
}

.formation-parcours--search input {
  width: 100%;
  height: 48px;
  padding: 0 56px 0 16px;
  border: 1px solid #E0F8FF;
  border-radius: 4px;
  background-color: var(--bleu-acide);
  font: inherit;
}

.formation-parcours--search input::placeholder {
  opacity: 0.6;
}

.formation-parcours--search-button {
  position: absolute;
  top: 50%;
  right: 16px;
  width: 24px;
  height: 24px;
  transform: translateY(-50%);
  mask: url(../images/icons/search.svg) no-repeat center;
  mask-size: contain;
  background-color: var(--bleu-ciel);
}

.formation-parcours {
  /* ==================================================
  FILTER TOGGLE MOBILE
  ================================================== */
}

.formation-parcours--filters-toggle {
  width: 100%;
  margin-top: 32px;
  padding: 16px 24px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  border: 0;
  border-top: 1px solid #C5C8D6;
  border-bottom: 1px solid #C5C8D6;
  background: transparent;
  color: var(--bleu-nuit);
  font-family: var(--borna);
  font-size: 20px;
  font-style: normal;
  font-weight: 600;
  line-height: 160%;
  text-align: left;
  cursor: pointer;
}

@media screen and (min-width: 768px) {
  .formation-parcours--filters-toggle {
    display: none;
  }
}

.formation-parcours--filters-toggle-icon {
  position: relative;
  width: 48px;
  height: 48px;
  flex: 0 0 48px;
  display: flex;
  align-items: center;
  justify-content: center;
  border: 2px solid var(--bleu-ciel);
  border-radius: 50%;
}

.formation-parcours--filters-toggle-icon::after {
  content: "";
  width: 16px;
  height: 16px;
  mask: url(../images/icons/chevron-down.svg) no-repeat center;
  mask-size: contain;
  background-color: var(--bleu-ciel);
  transition: transform 0.35s ease;
}

.formation-parcours {
  /* ==================================================
  FILTER PANEL
  ================================================== */
}

.formation-parcours--filters-panel {
  /*
  * Mobile fermé par défaut.
  * Même technique fluide que tes selection-item.
  */
  display: grid;
  grid-template-rows: 0fr;
  opacity: 0;
  transition: grid-template-rows 0.35s ease, opacity 0.25s ease;
}

.formation-parcours--filters-panel-inner {
  min-height: 0;
  overflow: hidden;
}

.formation-parcours--filters-panel {
  /* État ouvert mobile */
}

.formation-parcours--filters-panel.is-open {
  grid-template-rows: 1fr;
  opacity: 1;
}

.formation-parcours--filters-panel {
  /*
  * Desktop :
  * toujours visible, aucun accordion.
  */
}

@media screen and (min-width: 768px) {
  .formation-parcours--filters-panel {
    display: block;
    opacity: 1;
  }

  .formation-parcours--filters-panel-inner {
    overflow: visible;
  }
}

.formation-parcours {
  /* Chevron ouvert */
}

.formation-parcours .formation-parcours--filters-toggle.is-open .formation-parcours--filters-toggle-icon::after {
  transform: rotate(180deg);
}

.formation-parcours {
  /* ==================================================
  FILTERS LIST
  ================================================== */
}

.formation-parcours--filters-list {
  margin-top: 16px;
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 16px 24px;
}

@media screen and (min-width: 1200px) {
  .formation-parcours--filters-list {
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }
}

.formation-parcours .filter-group {
  min-width: 0;
}

.formation-parcours .filter-group--label {
  display: block;
  margin: 0 0 8px;
  color: var(--bleu-nuit);
  font-family: var(--borna);
  font-size: 14px;
  font-style: normal;
  font-weight: 600;
  line-height: 160%;
}

.formation-parcours .select-wrapper {
  position: relative;
  width: 100%;
}

.formation-parcours .select-wrapper select {
  appearance: none;
  -webkit-appearance: none;
  width: 100%;
  padding: 16px;
  border: 1px solid #E0F8FF;
  border-radius: 4px;
  background-color: var(--bleu-acide);
  color: var(--bleu-nuit);
  font-family: var(--inter);
  font-size: 14px;
  font-style: normal;
  font-weight: 400;
  line-height: 160%;
  display: flex;
  align-items: center;
  cursor: pointer;
}

.formation-parcours .select-wrapper select:focus {
  outline: 1px solid var(--bleu-ciel);
  outline-offset: 0;
}

.formation-parcours .select-wrapper::before {
  content: "";
  position: absolute;
  top: 50%;
  right: 16px;
  width: 24px;
  height: 24px;
  transform: translateY(-50%);
  border: 1px solid var(--bleu-ciel);
  border-radius: 50%;
  pointer-events: none;
}

.formation-parcours .select-wrapper::after {
  content: "";
  position: absolute;
  top: 50%;
  right: 22px;
  width: 12px;
  height: 12px;
  transform: translateY(-50%);
  mask: url(../images/icons/chevron-down.svg) no-repeat center;
  mask-size: contain;
  background-color: var(--bleu-ciel);
  pointer-events: none;
}

.formation-parcours--filters-reset {
  margin-top: 16px;
  cursor: pointer;
  color: var(--bleu-nuit);
  font-family: var(--inter);
  font-size: 12px;
  font-style: normal;
  font-weight: 500;
  line-height: 180%;
  display: flex;
  align-items: center;
  gap: 16px;
}

.formation-parcours--filters-reset::before {
  content: "";
  mask: url(../images/icons/reset.svg) no-repeat center;
  mask-size: contain;
  background-color: var(--bleu-ciel);
  height: 16px;
  width: 16px;
}

.formation-parcours {
  /* ==================================================
     RESULTS
  ================================================== */
}

.formation-parcours--results {
  margin-top: 32px;
}

.formation-parcours--results-count {
  margin: 0 0 8px;
  color: #6F6F6F;
  font-family: var(--borna);
  font-size: 16px;
  font-style: normal;
  font-weight: 700;
  line-height: 180%;
}

.formation-parcours--results-list {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 16px;
}

@media screen and (min-width: 768px) {
  .formation-parcours--results-list {
    grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
    gap: 24px;
  }
}

.formation-parcours {
  /* ==================================================
     FORMATION CARD
  ================================================== */
}

.formation-parcours .formation-card {
  padding: 16px;
  border-left: 4px solid #2A4BA8;
  border-radius: 4px;
  background-color: var(--bleu-acide);
  display: flex;
  flex-direction: column;
  cursor: pointer;
}

.formation-parcours .formation-card--tags {
  display: flex;
  flex-wrap: wrap;
  gap: 16px;
  margin-bottom: 16px;
}

.formation-parcours .formation-card--tags .tag {
  padding: 4px;
  display: inline-flex;
  align-items: center;
  border-radius: 20px;
  background-color: #E0F8FF;
  color: var(--bleu-nuit);
  font-size: 14px;
  line-height: 1;
}

.formation-parcours .formation-card--tags .tag:first-child {
  background-color: #AFDAFF;
}

.formation-parcours .formation-card--software {
  color: var(--bleu-ciel);
  font-family: var(--inter);
  font-size: 14px;
  font-style: normal;
  font-weight: 700;
  line-height: 160%;
}

.formation-parcours .formation-card--title {
  font-family: var(--borna);
  font-size: 24px;
  font-style: normal;
  font-weight: 600;
  line-height: 160%;
}

.formation-parcours .formation-card--description {
  margin: 8px 0 0;
  font-family: var(--borna);
  font-size: 14px;
  font-style: normal;
  font-weight: 400;
  line-height: 160%;
}

.formation-parcours .formation-card--link {
  margin-top: 20px;
  color: var(--bleu-ciel);
  font-size: 12px;
  font-weight: 700;
  text-decoration: none;
  align-self: flex-end;
  display: flex;
  gap: 8px;
  align-items: center;
  transition: gap 0.3s ease;
}

.formation-parcours .formation-card--link::after {
  content: "";
  display: block;
  height: 12px;
  width: 12px;
  mask: url(../images/icons/chevron-right.svg) no-repeat center;
  mask-size: contain;
  background-color: var(--bleu-ciel);
}

@media (hover: hover) {
  .formation-parcours .formation-card:hover .formation-card--link {
    gap: 16px;
  }
}

.formation-parcours {
  /* ==================================================
  PARCOURS RECOMMANDÉS
  ================================================== */
}

.formation-parcours--recommended {
  margin-top: 32px;
}

.formation-parcours--recommended[hidden] {
  display: none;
}

.formation-parcours--recommended-title {
  margin: 0 0 16px;
  color: #6F6F6F;
  font-family: var(--borna);
  font-size: 16px;
  font-style: normal;
  font-weight: 700;
  line-height: 180%;
}

.formation-parcours--recommended-title span {
  color: var(--bleu-ciel);
}

.formation-parcours--recommended-list {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.formation-parcours {
  /* ==================================================
  PARCOURS CARD
  ================================================== */
}

.formation-parcours .recommended-card {
  position: relative;
  display: block;
  padding: 16px 56px 16px 16px;
  border-left: 4px solid #2A4BA8;
  border-radius: 4px;
  background-color: var(--bleu-acide);
  color: var(--bleu-nuit);
  text-decoration: none;
}

.formation-parcours .recommended-card--tags {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-bottom: 16px;
}

.formation-parcours .recommended-card--tags .tag {
  display: inline-flex;
  align-items: center;
  padding: 4px 8px;
  border-radius: 80px;
  background-color: #E0F8FF;
  color: #456198;
  font-family: var(--inter);
  font-size: 14px;
  font-style: normal;
  font-weight: 400;
  line-height: 160%;
}

.formation-parcours .recommended-card--tags .tag:first-child {
  background-color: #AFDAFF;
}

.formation-parcours .recommended-card--title {
  margin: 0;
  color: var(--bleu-nuit);
  font-family: var(--borna);
  font-size: 16px;
  font-style: normal;
  font-weight: 700;
  line-height: 160%;
}

.formation-parcours .recommended-card--description {
  margin: 4px 0 0;
  color: var(--bleu-nuit);
  font-family: var(--borna);
  font-size: 14px;
  font-style: normal;
  font-weight: 400;
  line-height: 160%;
}

.formation-parcours .recommended-card--arrow {
  position: absolute;
  top: 50%;
  right: 20px;
  width: 24px;
  height: 24px;
  transform: translateY(-50%);
}

.formation-parcours .recommended-card--arrow::after {
  content: "";
  display: block;
  width: 100%;
  height: 100%;
  mask: url(../images/icons/chevron-right.svg) no-repeat center;
  mask-size: contain;
  background-color: var(--bleu-nuit);
  transition: transform 0.3s ease;
}

@media (hover: hover) {
  .formation-parcours .recommended-card:hover .recommended-card--arrow::after {
    transform: translateX(4px);
  }
}

.formation-parcours {
  /* ==================================================
     ASIDE
  ================================================== */
}

.formation-parcours--aside {
  grid-area: aside;
  display: flex;
  flex-direction: column;
  gap: 24px;
  border-radius: 8px;
}

@media screen and (min-width: 992px) {
  .formation-parcours--aside {
    position: sticky;
    top: 24px;
  }
}

.formation-parcours {
  /* ==================================================
  ASIDE PRODUCT
  ================================================== */
}

.formation-parcours--aside-product {
  padding: 24px 16px;
  border-radius: 8px;
  border: 1px solid #D7DFEA;
  box-shadow: 0 -16px 48.1px 0 rgba(39, 15, 61, 0.1);
}

.formation-parcours--aside-product .product-image {
  width: 100%;
  overflow: hidden;
  border-radius: 6px;
  height: 260px;
}

.formation-parcours--aside-product .product-image img {
  width: 100%;
  height: 100%;
  display: block;
  object-fit: cover;
}

.formation-parcours--aside-product>img {
  display: block;
  width: 63px;
  height: 64px;
  object-fit: contain;
  margin-top: 24px;
}

.formation-parcours--aside-product .product-header {
  margin-top: 24px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
}

.formation-parcours--aside-product .product-header h2 {
  font-size: 24px;
  font-style: normal;
  font-weight: 600;
  line-height: 160%;
}

.formation-parcours--aside-product .product-header .tag {
  border-radius: 80px;
  padding: 4px;
  background-color: #E0F8FF;
  color: var(--bleu-clair);
  font-size: 14px;
  font-weight: 400;
  line-height: 160%;
  white-space: nowrap;
}

.formation-parcours--aside-product .product-desc {
  margin-top: 12px;
}

.formation-parcours--aside-product .product-desc p {
  margin: 0;
  color: #000;
  font-size: 12px;
  line-height: 160%;
}

.formation-parcours--aside-product .product-download {
  margin-top: 16px;
}

.formation-parcours--aside-product .product-download .btn {
  width: 100%;
  justify-content: center;
  color: var(--bleu-ciel);
  border-color: var(--bleu-ciel);
  transition: all 0.3s ease;
}

.formation-parcours--aside-product .product-download .btn::after {
  background-color: var(--bleu-ciel) !important;
}

@media (hover: hover) {
  .formation-parcours--aside-product .product-download .btn:hover {
    color: #FFF;
    border-color: var(--bleu-ciel);
  }

  .formation-parcours--aside-product .product-download .btn:hover::after {
    background-color: var(--blanc) !important;
  }
}

.formation-parcours {
  /* ==================================================
     ASIDE REDIRECTION
  ================================================== */
}

.formation-parcours--aside-redirection {
  padding: 48px 24px;
  border-radius: 16px;
  background-color: var(--bleu-nuit);
  color: var(--blanc);
}

.formation-parcours--aside-redirection h3 {
  color: #FFF;
  font-size: 24px;
  font-style: normal;
  font-weight: 600;
  line-height: 120%;
}

.formation-parcours--aside-redirection p {
  margin: 12px 0 0;
  font-size: 16px;
  font-style: normal;
  font-weight: 500;
  line-height: 180%;
}

.formation-parcours--aside-redirection .btn {
  width: 100%;
  margin-top: 20px;
  justify-content: center;
}

@media (hover: hover) {
  .formation-parcours--aside-redirection .btn:hover {
    border-color: #FFF;
  }
}

.formation-parcours {
  /* ==================================================
     PARCOURS RECOMMANDÉS
  ================================================== */
}

.formation-parcours--recommended {
  margin-top: 32px;
}

.formation-parcours--recommended[hidden] {
  display: none;
}

.formation-parcours--recommended-title {
  margin: 0 0 16px;
  color: #6F6F6F;
  font-family: var(--borna);
  font-size: 16px;
  font-style: normal;
  font-weight: 700;
  line-height: 180%;
}

.formation-parcours--recommended-title span {
  color: var(--bleu-ciel);
}

.formation-parcours--recommended-list {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.formation-parcours .parcours-card {
  position: relative;
  width: 100%;
  min-width: 0;
  padding: 16px 56px 16px 16px;
  border-left: 4px solid #2A4BA8;
  border-radius: 4px;
  background-color: var(--bleu-acide);
  color: var(--bleu-nuit);
  text-decoration: none;
  display: block;
}

.formation-parcours .parcours-card--content {
  min-width: 0;
}

.formation-parcours .parcours-card--tags {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-bottom: 16px;
}

.formation-parcours .parcours-card--tags .tag {
  padding: 4px 8px;
  display: inline-flex;
  align-items: center;
  border-radius: 20px;
  background-color: #E0F8FF;
  color: var(--bleu-nuit);
  font-size: 12px;
  line-height: 1;
}

.formation-parcours .parcours-card--tags .tag:first-child {
  background-color: #AFDAFF;
}

.formation-parcours .parcours-card--title {
  margin: 0;
  font-family: var(--borna);
  font-size: 18px;
  font-style: normal;
  font-weight: 700;
  line-height: 160%;
}

.formation-parcours .parcours-card--description {
  margin: 4px 0 0;
  font-family: var(--borna);
  font-size: 14px;
  font-style: normal;
  font-weight: 400;
  line-height: 160%;
}

.formation-parcours .parcours-card--arrow {
  position: absolute;
  top: 50%;
  right: 20px;
  width: 18px;
  height: 18px;
  transform: translateY(-50%);
}

.formation-parcours .parcours-card--arrow::after {
  content: "";
  display: block;
  width: 100%;
  height: 100%;
  mask: url(../images/icons/chevron-right.svg) no-repeat center;
  mask-size: contain;
  background-color: var(--bleu-nuit);
  transition: transform 0.3s ease;
}

@media (hover: hover) {
  .formation-parcours .parcours-card:hover .parcours-card--arrow::after {
    transform: translateX(4px);
  }
}

/* Adaptations WordPress : liens de navigation et états sans contenu latéral. */
.formation-parcours--container.has-no-aside {
  grid-template-areas: "content";
}

@media screen and (min-width: 992px) {
  .formation-parcours--container.has-no-aside {
    grid-template-columns: minmax(0, 775px);
  }
}

.formation-parcours .selection-option--indicator {
  width: 22px;
  height: 22px;
  flex: 0 0 22px;
  border: 1px solid #AEB4C4;
  border-radius: 50%;
  background-color: #FFF;
}

.formation-parcours .selection-option.is-current {
  border-color: #2A4BA8;
}

.formation-parcours .selection-option.is-current .selection-option--indicator {
  border-color: #2A4BA8;
  box-shadow: inset 0 0 0 4px #FFF, inset 0 0 0 12px #2A4BA8;
}

.formation-parcours a.selection-option {
  color: inherit;
  text-decoration: none;
}

.formation-parcours--no-results {
  margin: 16px 0 0;
  color: var(--bleu-nuit);
  font-family: var(--borna);
}