.article {
  display: flex;
  flex-direction: column;
  gap: 5vw;
  margin-bottom: 10vw;
}
.article__title {
  color: var(--sColor);
  font-family: var(--ffMXBoIt);
  font-size: 2rem;
  line-height: 2.25rem;
  text-transform: uppercase;
}
.article__subtitle {
  color: var(--sColor);
  font-family: var(--ffMSeBoIt);
  font-size: var(--fsCorpsMore);
  line-height: var(--fsSubtitle);
  margin-block: 2.5vw 0.5vw;
  text-transform: uppercase;
}
.article__precisions {
  display: flex;
  flex-wrap: wrap;
  gap: 5vw 0;
  margin-top: var(--fsCorpsMore);
}
.article__precision {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
}
.article__precisionTitle {
  font-family: var(--ffMBo);
  font-size: var(--fsCorps);
  line-height: var(--fsOther);
  text-transform: uppercase;
}
.article__precisionContent > p {
  font-family: var(--ffMMe);
  font-size: var(--fsCorpsLess);
  line-height: var(--fsOther);
}
.article__precisionContent > ul {
  display: flex;
  flex-direction: column;
  gap: 1.5vw;
}
.article__precisionContent > ul > li:has(ul > li) {
  font-family: var(--ffMMe);
  font-size: var(--fsCorps);
  line-height: var(--fsOther);
}
.article__precisionContent > ul > li > ul > li {
  font-size: var(--fsLittle);
  line-height: var(--fsOther);
}
.article__gallery {
  display: flex;
  flex-direction: column;
  gap: 3.5vw;
  margin-top: 5vw;
}
.article__gallery--button:has(.button ~ .button ~ .button) {
  margin-block: 7.5vw;
}
.article__precisionContent * {
  color: var(--mColor);
}
.article__gallery--button {
  align-items: start;
}
.article__gallery--button .button--download {
  margin: 0;
}
.article__illustrations {
  display: flex;
  flex-direction: column;
}
.formation > .article > .article__content {
  height: fit-content;
}
.article__illustrations {
  display: flex;
  flex-direction: column;
  height: auto;
  position: relative;
  overflow: hidden;
  width: 100%;
}

.article__picture {
  width: 100%;
  object-fit: cover;
  display: block;
}

@media (min-width: 575.98px) {
  .article__precision {
    flex: 0 0 47%;
  }
  .article__gallery {
    flex-direction: row;
    flex-wrap: wrap;
    gap: 3.5vw;
    justify-content: space-between;
  }
}

@media (min-width: 991.98px) {
  .article__precision {
    flex: 0 0 30%;
  }
  .article__title {
    font-size: 2.5rem;
    line-height: 3rem;
  }
  .article__gallery--button:has(.button ~ .button ~ .button) {
    justify-content: center;
  }

  .article {
    display: flex;
    flex-direction: row;
    gap: 2.5vw;
    align-items: stretch;
    min-height: 18.75rem;
  }

  .article__illustrations {
    flex: 1;
    min-height: 18.75rem;
    position: relative;
  }

  .article__content {
    flex: 2;
    display: flex;
    flex-direction: column;
  }

  .article__picture {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    overflow: visible;
  }
}

@media (min-width: 991.98px) {
  .article {
    flex-direction: row;
    gap: 2.5vw;
  }
  .article__picture {
    height: 100%;
  }
  .article__subtitle {
    margin-block: 1.5rem 0.5rem;
  }
  .article__gallery {
    gap: 1.5vw;
    margin-top: 3vw;
  }
  .article__precision {
    flex: 1 0 44%;
  }
  .article__gallery--button:has(.button ~ .button ~ .button) {
    margin-block: 3.5vw;
  }

  /* Pour s'assurer que l'image couvre bien toute la hauteur */
  .article__picture {
    height: 100%;
    object-fit: cover;
    width: 100%;
  }
}

@media (min-width: 1199.98px) {
  .article__gallery--button:has(.button ~ .button ~ .button) {
    margin-block: 3.5vw 0;
  }
}

@media (min-width: 1599.98px) {
  .article__gallery {
    margin-top: 1.5vw;
  }
  .article__precisionContent > ul {
    gap: 0.75vw;
  }
  .article__gallery--button:has(.button ~ .button ~ .button) {
    margin-block: 1.5vw 0;
  }
}

@media (min-width: 1799.98px) {
  .article__content {
    flex: 0 0 50%;
  }
}

@media (min-width: 1919.98px) {
  body > .formation {
    padding-inline: 10vw;
  }
  .formation > .article {
    margin-bottom: 6.5vw;
  }
  .formation > .article > .article__content {
    flex: 0 0 48%;
  }
}
