/* -- -- -- -- -- CONTENU STANDARD - COMPONENT - DÉBUT -- -- -- -- -- */

header.standard--history {
  padding-bottom: 134px;
  margin-top: 8px;
}

@media (width > 991px) {
  header.standard--history {
    margin-block: 46px 0px;
    padding-inline: 70px 100px;
  }
}

/* -- -- -- -- -- CONTENU STANDARD - COMPONENT - FIN -- -- -- -- -- */

/* -- -- -- -- -- HISTOIRE ET VALEURS - DÉBUT -- -- -- -- -- */

.history {
  position: relative;
  background-color: var(--color-grey);
  padding-block: 20vw 30px;
}

.history .mascot {
  aspect-ratio: 157 / 212;
  position: absolute;
  top: -36.5vw;
  left: 18px;
  width: 40vw;
}

.history > .legend > .corps {
  padding-bottom: 30px;
  border-bottom: 1px solid var(--color-black);
}

.history > .svgContainer {
  display: none;
}

.values {
  background-color: var(--color-grey);
  padding-bottom: 45px;
}

.values > .wrapper {
  display: grid;
  gap: 24px;
  padding-top: 30px;
  border-top: 1px solid #b3bacd;
}

.value > .name {
  margin-bottom: 16px;
}

@media (width > 450px) {
  .history .mascot {
    top: -32.5vw;
    left: 18px;
    width: 36vw;
  }
}

@media (width > 575px) {
  .history .mascot {
    top: -28vw;
    left: 18px;
    width: 35vw;
  }
}

@media (width > 767px) {
  .history .mascot {
    aspect-ratio: 157/232;
  }
}

@media (width > 991px) {
  .body > *.history {
    display: flex;
    gap: 97px;
    padding-block: unset;
    margin-bottom: unset;
    justify-content: flex-end;
  }

  .history > .part {
    display: flex;
    align-items: center;
    position: relative;
    z-index: 1;
    gap: 63px;
    justify-content: center;
    padding-inline: 35px;
  }

  .history .mascot {
    position: static;
    aspect-ratio: 353 / 529;
    margin-top: -81px;
    margin-bottom: -12px;
    width: 30%;
  }

  .history > .part > .legend > .corps {
    border-bottom: none;
    padding-bottom: unset;
  }

  .history > .part > .legend {
    display: flex;
    padding-block: 97px 84px;
    flex-direction: column;
    justify-content: center;
    width: 49%;
    position: relative;
    z-index: 1;
    max-width: 428px;
    margin-right: 35px;
  }

  .values {
    padding-block: 0px 75px;
  }

  .values > .wrapper {
    display: flex;
    gap: 67px;
    align-items: flex-start;
    justify-content: center;
    padding-inline: 30px;
    padding-top: 60px;
  }

  .values > .wrapper > .value {
    flex: 0 0 30%;
  }

  .value > .name {
    margin-bottom: 24px;
  }

  .value > .corps * {
    line-height: 1.25rem;
  }

  .history > .svgContainer {
    display: block;
    overflow: hidden;
    position: absolute;
    top: 0%;
    right: 0%;
    z-index: 0;
    width: 45%;
    aspect-ratio: 1/1;
  }

  .history > .svgContainer > .filigrane {
    display: block;
    position: relative;
    top: -40%;
    right: -10%;
  }
}

@media (width > 1199px) {
  .history .mascot {
    width: 40%;
  }

  .history > .part {
    gap: 92px;
    margin-inline: auto;
  }

  .history > .svgContainer > .filigrane {
    top: -20%;
    right: -22%;
  }
}

@media (width > 1399px) {
  .history > .svgContainer > .filigrane {
    top: -20%;
    right: -22%;
  }
}

@media (width > 1439px) {
  .body > .history,
  .body > .values {
    max-width: unset;
    margin-inline: unset;
    padding-inline: 0;
  }

  .body > .values {
    padding-inline: 30px;
  }

  .values > .wrapper {
    max-width: 1440px;
    margin-inline: auto;
    padding-inline: unset;
  }

  .history > .svgContainer > .filigrane {
    top: -20%;
    right: -15%;
    width: 100%;
  }

  .history > .legend {
    max-width: 480px;
  }

  .history .mascot {
    width: 32.5%;
  }
}

@media (width > 1599px) {
  .values > .wrapper {
    max-width: 1582px;
    padding-inline: 71px;
  }

  .history .mascot {
    width: 30%;
  }

  .history > .part > .legend {
    max-width: 530px;
  }
}

@media (width > 1919px) {
  .history > .svgContainer > .filigrane {
    top: -10%;
    right: -13%;
    width: 100%;
    scale: 1.25;
  }

  .history > .legend {
    margin-right: 22.5%;
  }

  .history .mascot {
    width: 35%;
  }
}

/* -- -- -- -- -- HISTOIRE ET VALEURS - FIN -- -- -- -- -- */

/* -- -- -- -- -- CONTENU STANDARD MODIFIES - DÉBUT -- -- -- -- -- */

.standard--history {
  margin-top: 48px;
  padding-bottom: 40px;
}

@media (width > 991px) {
  .body > .standard--history {
    gap: 49px;
  }
}

/* -- -- -- -- -- CONTENU STANDARD MODIFIES - FIN -- -- -- -- -- */