/* CSS Template vue essentiel etapes */
.container-fluid.essentiel-etapes-view-title {
  background-color: var(--bs-sncf);
}

.essentiel-etapes-view-title h1,
.essentiel-etapes-view-title .h1-title {
  color: var(--bs-sncf-mid-dark);
  font-size: 32px;
  font-family: Arial;
  font-style: normal;
  font-weight: 700;
  line-height: 40px;
  text-transform: uppercase;
  margin: 0;
  padding: 4rem 0 2rem 0;
}

.view-essentiel-etapes.container-fluid {
  padding: 0;
}

.view-essentiel-etapes .b-carousel {
  background: var(--bs-sncf);
}


#views-exposed-form-essentiel-des-etapes-page-1 .container-fluid {
  background-color: var(--bs-sncf);
}

.essentiel-etapes .badge {
  color: #414042;
  border-radius: 20px;
  height: 30px;
}

.essentiel-etapes .badge.badge-statut-finalise {
  background-color: #E6FAE1;
  max-width: 92px;
}

.essentiel-etapes .badge.badge-statut-etape-en-cours {
  background-color: #F5F5F5;
  max-width: 130px;
}

.essentiel-etapes .badge.badge-statut-a-venir {
  background-color: #FFF;
  max-width: 82px;
  border: 1px solid #D5D5D5;
}

/* .essentiel-etapes .badge.badge-statut-a-venir {
    display: none !important;
} */

.essentiel-etapes .badge {
  margin-left: 1.5rem;
}

.essentiel-etapes .badge.badge-statut-finalise span.dot {
  background-color: #30C26D;
}

.essentiel-etapes .badge.badge-statut-etape-en-cours span.dot {
  background-color: #C40065;
}

.essentiel-etapes .badge.badge-statut-a-venir span.dot {
  background-color: var(--bs-sncf);
}

.essentiel-etapes .badge span.dot {
  height: 16px;
  width: 16px;
  border-radius: 50%;
  display: inline-block;
  margin-right: .3rem;
}

.essentiel-etapes .date-projet {
  font-size: 25px;
  font-weight: 700;
  line-height: 22px;
  padding: 1rem 2.5rem;
}

.essentiel-etapes .date-projet.horizon {
  font-size: 29px;
}

.essentiel-etapes .finalise .date-projet,
.essentiel-etapes .a-venir .date-projet {
  color: var(--bs-sncf);
}

.essentiel-etapes .etape-en-cours .date-projet {
  color: #C40065;
}

.essentiel-etapes .active-slide .date-projet {
  color: #F5F5F5;
}

.exposed-form-essentiel-etapes {
  padding-bottom: 4rem;
}

.exposed-form-essentiel-etapes .form-item .form-select.is-valid:not([multiple]):not([size]) {
  background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3e%3cpath fill='none' stroke='%23343a40' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='M2 5l6 6 6-6'/%3e%3c/svg%3e");
  font-size: 16px;
  color: var(--bs-sncf);
  padding-right: 0;
  width: 183px;
  border-color: var(--bs-sncf);
  font-weight: 400;
  line-height: 24px;
}

.exposed-form-essentiel-etapes .form-actions {
  display: none;
}

.exposed-form-essentiel-etapes select {
  background-color: #F0FAFB;
}

.exposed-form-essentiel-etapes .form-item {
  margin-bottom: 0;
}

.sections-cards {
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding: 0 1rem;
}

.sections-cards .card {
  background-color: #fff;
  border-radius: 0;
  padding: 1rem;
}

.sections-cards .card .card-title {
  font-size: 20px;
  line-height: 22px;
  color: #000;
}

.sections-cards .card .card-text {
  font-size: 16px;
  line-height: 22px;
}

.container-fluid.vue-essentiel-etapes {
  padding: 0;
}

.items-essentiel-etapes-list {
  padding: 4rem;
}

.image-item-essentiel-etapes:after {
  position: relative;
}

.items-essentiel-etapes-list .image-item-essentiel-etapes:after {
  content: '';
  height: 50%;
  width: 1px;
  position: absolute;
  right: 0;
  top: 0;
  background-color: #FFF;
}

.items-essentiel-etapes-list .field__item.last .image-item-essentiel-etapes:after {
  height: 0;
}

.items-essentiel-etapes-list .field__item {
  color: #FFF;
}

.item-title-essentiel-etapes {
  font-weight: 700;
  font-size: 22px;
  line-height: 28px;
}

.item-description-essentiel-etapes {
  font-weight: 400;
  font-size: 16px;
  line-height: 24px;
  max-width: 204px;
  margin: auto;
}

.items-essentiel-etapes-list .field__items {
  margin: 6px 0;
}

.items-essentiel-etapes-container {
  background: var(--bs-secondary);
}

h2.label-essentiel-etape {
  font-weight: 700;
  line-height: 40px;
  size: 32px;
  text-transform: uppercase;
  display: block;
  /* max-width: 431px; */
}

article.vue-essentiel-etapes>.container {
  margin-top: 6rem;
}

.shareblue.btn {
  align-items: center;
  display: flex;
  justify-content: space-between;
  width: 105px;
  color: var(--bs-secondary);
  font-family: Arial;
  font-size: 14px;
  font-style: normal;
  font-weight: 700;
  line-height: 18px;
  position: relative;
}

.shareblue.share_link::before {
  left: 30px;
  top: -90%;
}

.shareblue.share_link::after {
  left: 50px;
  z-index: none;
  top: -29%;
}

.essentiel-etapes .slick button.hidden-focus {
  /* background: none;
  border: none; */
}

.hidden-focus {
  clip: rect(0 0 0 0);
  clip-path: inset(50%);
  height: 1px;
  margin: 0;
  overflow: hidden;
  padding: 0;
  position: absolute;
  width: 1px;
  white-space: nowrap;
  background: var(--bs-CTA-1-background-color-hover);
  border: 0;
  color: var(--bs-CTA-1-font-color-hover);
  font-weight: 700;
  font-size: 1rem;
}

.hidden-focus:focus,
.hidden-focus:has(+ .hidden-focus:focus),
.hidden-focus:focus+.hidden-focus {
  width: initial;
  height: 3rem;
  overflow: initial;
  padding: initial;
  clip: initial;
  clip-path: initial;
  position: relative;

}


/* Etape en détail / etape projet */

.etape-en-detail .nav-pills .nav-link {
  min-height: 88px;
  width: 100%;
  background-color: #F0FAFB;
  color: #000;
  position: relative;
}

.etape-en-detail .nav-pills .nav-link h3 {
  font-weight: 700;
  font-size: 20px;
  line-height: 28px;
}

.etape-en-detail .nav-pills .nav-link {
  text-align: start;
}

.etape-en-detail .nav-pills .nav-link.active span {
  color: #000;
}

.etape-en-detail .nav-pills .nav-link.active {
  background-color: transparent;
  color: #000;
}

.etape-en-detail .nav-pills .nav-link.active::before {
  content: '';
  border-right: 6px var(--bs-sncf) solid;
  position: absolute;
  height: 88px;
  display: block;
  top: 0;
  left: 0;
  border-radius: 0 5px 5px 0;
}

.etape-en-detail .nav-link.active span.bicolor-text {
  color: #000;
}

.etape-en-detail .nav-link span.bicolor-text {
  color: var(--bs-sncf);
}

hr.divide {
  flex-shrink: 0;
  border-top: 2px solid var(--bs-sncf);
  opacity: 1;
}

/* Css Accordion mobile */

.container-fluid.accordion {
  display: none;
}

.etape-en-detail .accordion-item {
  margin: 1rem 0;
}

.etape-en-detail .accordion-item .accordion-button[aria-expanded="false"] {
  min-height: 88px;
  background-color: #F0FAFB;
  color: #000;
  font-weight: 700;
  font-size: 20px;
  line-height: 28px;
}

.etape-en-detail .accordion-item .accordion-button[aria-expanded="false"] span {
  color: var(--bs-sncf);
}

.etape-en-detail .accordion-item .accordion-button {
  box-shadow: none;
  text-align: start;
  display: inline-block;
}

.etape-en-detail .accordion-item .accordion-button:focus {
  border: none;
}

.etape-en-detail .accordion-item .accordion-button:not(.collapsed) span {
  color: #000;
}

.etape-en-detail .accordion-item .accordion-button[aria-expanded="true"] {
  background-color: transparent;
  color: #000;
  height: 88px;
}

.etape-en-detail .accordion-item .accordion-button[aria-expanded="true"]::before {
  content: '';
  border-right: 6px var(--bs-sncf) solid;
  position: absolute;
  height: 88px;
  display: block;
  top: 0;
  left: 0;
  border-radius: 0 5px 5px 0;
}

.etape-en-detail .accordion-item .accordion-button.collapsed.show .sc-document-wrapper {
  max-width: 320px;
}

/* .etape-en-detail .accordion-item .accordion-button[aria-expanded="true"] span.bicolor-text::before {
  content: attr(data-text);
  color: #000;
}

.etape-en-detail .accordion-item .accordion-button[aria-expanded="false"] span.bicolor-text::before {
  content: attr(data-text);
  color: var(--bs-sncf);
} */

/* Etape en détail / node */

.etape-en-detail.etape-projet {
  max-width: 475px;
}

.etape-en-detail-title {
  display: flex;
  flex-direction: column;
  flex-shrink: 0;
  align-self: stretch;
  color: var(--sncf-carbone, #333);
  font-size: 28px;
  font-family: Arial;
  font-style: normal;
  font-weight: 700;
  line-height: 36px;
  margin-bottom: 1.5rem;
}

.etape-en-detail.etape-projet .media--type-image .field__item {
  display: flex;
  justify-content: center;
  align-items: center;
  margin: 3rem 0;
}

.etape-en-detail.etape-projet .media--type-document .field__item {
  width: 475px;
  margin: 2rem auto;
}

/* Bloc documentation projet */

.card.bloc-doc-projet {
  display: flex;
  width: 456px;
  padding: 24px 20px;
  flex-direction: column;
  align-items: flex-start;
  gap: 16px;
  align-self: stretch;
  background: #F4F5F6;
}

.card.bloc-doc-projet img {
  width: 60px;
  height: 60px;
}




@media screen and (max-width: 968px) {
  .view-essentiel-etapes .b-carousel {
    background: none;
    position: relative;
  }

  .view-essentiel-etapes .b-carousel::before {
    content: "";
    background: #F0FAFB;
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: calc(100% - 68px);
  }
}

@media screen and (max-width: 768px) {
  .items-essentiel-etapes-list .image-item-essentiel-etapes:after {
    height: 0;
  }

  .exposed-form-essentiel-etapes {
    flex-wrap: wrap;
    padding-bottom: 1rem;
  }

  .exposed-form-essentiel-etapes .form-item {
    width: 100%;
  }

  .etape-en-detail.etape-projet {
    max-width: 256px;
  }

  .container-fluid.etape-en-detail .pills {
    display: none !important;
  }

  .container-fluid.accordion {
    display: block;
  }

  .essentiel-etapes .date-projet {
    font-size: 23px;
  }

  .label-essentiel-etape {
    font-size: 22px;
  }
}

@media screen and (max-width: 768px) {
  .shareblue.btn {
    height: 44px;
    width: 44px;
    margin-top: 2rem;
    border-radius: 0;
    border: 1px solid #D9D9D9;
  }

  .shareblue span {
    display: none;
  }

  .essentiel-etapes-view-title h1,
  .essentiel-etapes-view-title .h1-title {
    font-size: 22px;
    line-height: 32px;
    margin-right: 1rem;
  }
}

.view-essentiel-etapes .triangle svg path {
  fill: var(--bs-secondary);
}