TP_JO2024/home/dist/component/stepper/stepper.main.css

/*!
 * DSFR v1.11.2 | SPDX-License-Identifier: MIT | License-Filename: LICENSE.md | restricted use (see terms and conditions)
 */
@charset "UTF-8";

/* ¯¯¯¯¯¯¯¯¯ *\
  STEPPER
\* ˍˍˍˍˍˍˍˍˍ */
.fr-stepper {
  --title-spacing: 0;
  --text-spacing: 0;
  margin-bottom: 2rem;
  display: flex;
  flex-direction: column;
}

.fr-stepper__title {
  display: flex;
  flex-direction: column-reverse;
  font-weight: 700;
  font-size: 1.125rem;
  line-height: 1.5rem;

  --title-spacing: 0 0 0.75rem 0;
  --text-spacing: 0 0 0.75rem 0;
  color: var(--text-title-grey);
}

.fr-stepper__state {
  font-size: 0.875rem;
  line-height: 1.5rem;

  --title-spacing: 0 0 0.25rem 0;
  --text-spacing: 0 0 0.25rem 0;
  font-weight: 400;
  color: var(--text-mention-grey);
}

.fr-stepper__state::after {
  content: "\a";
  white-space: pre;
  line-height: 2rem;
}

.fr-stepper__details {
  font-size: 0.75rem;
  line-height: 1.25rem;
  margin-top: 0.75rem;
  color: var(--text-mention-grey);
}

.fr-stepper .fr-stepper__steps[data-fr-steps="2"][data-fr-current-step="2"] + .fr-stepper__details,
.fr-stepper .fr-stepper__steps[data-fr-steps="3"][data-fr-current-step="3"] + .fr-stepper__details,
.fr-stepper .fr-stepper__steps[data-fr-steps="4"][data-fr-current-step="4"] + .fr-stepper__details,
.fr-stepper .fr-stepper__steps[data-fr-steps="5"][data-fr-current-step="5"] + .fr-stepper__details,
.fr-stepper .fr-stepper__steps[data-fr-steps="6"][data-fr-current-step="6"] + .fr-stepper__details,
.fr-stepper .fr-stepper__steps[data-fr-steps="7"][data-fr-current-step="7"] + .fr-stepper__details,
.fr-stepper .fr-stepper__steps[data-fr-steps="8"][data-fr-current-step="8"] + .fr-stepper__details {
  display: none;
}

.fr-stepper__steps {
  --stepper-size: 0.5rem;
  --default-outer: calc((100% + var(--stepper-size)) / var(--steps));
  --default-inner: calc(var(--default-outer) - var(--stepper-size));
  --active-outer: calc((100% + var(--stepper-size)) / var(--current-step));
  --active-inner: calc(var(--active-outer) - var(--stepper-size));
  width: 100%;
  height: var(--stepper-size);
  background-repeat: no-repeat;
  background-size: calc((100% + var(--stepper-size)) * var(--current-step) / var(--steps) - var(--stepper-size)) 100%, 100% 100%;
  background-position: 0 0, 0 0;

  --current-step: 0;
  background-image: repeating-linear-gradient(to right, var(--background-active-blue-france) 0, var(--background-active-blue-france) var(--active-inner), transparent var(--active-inner), transparent var(--active-outer)), repeating-linear-gradient(to right, var(--background-contrast-grey) 0, var(--background-contrast-grey) var(--default-inner), transparent var(--default-inner), transparent var(--default-outer));
}

.fr-stepper__steps[data-fr-steps="2"] {
  --steps: 2;
  --step-width: calc(100% / 2);
}

.fr-stepper__steps[data-fr-steps="3"] {
  --steps: 3;
  --step-width: calc(100% / 3);
}

.fr-stepper__steps[data-fr-steps="4"] {
  --steps: 4;
  --step-width: calc(100% / 4);
}

.fr-stepper__steps[data-fr-steps="5"] {
  --steps: 5;
  --step-width: calc(100% / 5);
}

.fr-stepper__steps[data-fr-steps="6"] {
  --steps: 6;
  --step-width: calc(100% / 6);
}

.fr-stepper__steps[data-fr-steps="7"] {
  --steps: 7;
  --step-width: calc(100% / 7);
}

.fr-stepper__steps[data-fr-steps="8"] {
  --steps: 8;
  --step-width: calc(100% / 8);
}

.fr-stepper__steps[data-fr-current-step="1"] {
  --current-step: 1;
}

.fr-stepper__steps[data-fr-current-step="2"] {
  --current-step: 2;
}

.fr-stepper__steps[data-fr-current-step="3"] {
  --current-step: 3;
}

.fr-stepper__steps[data-fr-current-step="4"] {
  --current-step: 4;
}

.fr-stepper__steps[data-fr-current-step="5"] {
  --current-step: 5;
}

.fr-stepper__steps[data-fr-current-step="6"] {
  --current-step: 6;
}

.fr-stepper__steps[data-fr-current-step="7"] {
  --current-step: 7;
}

.fr-stepper__steps[data-fr-current-step="8"] {
  --current-step: 8;
}
@media (min-width: 36em) {
  /*! media sm */
}
@media (min-width: 48em) {
  /*! media md */
  .fr-stepper__title {
    font-size: 1.25rem;
    line-height: 1.75rem;
  }
}
@media (min-width: 62em) {
  /*! media lg */
}
@media (min-width: 78em) {
  /*! media xl */
}