.cases {
  display: grid;
  gap: 15vw;
  margin: 5vw 0;
}
.miniatureC {
  background-color: #eaf3f4;
  display: block;
  margin-left: -5vw;
  width: 92.5vw;
}
.banner--casclient .miniatureC {
  background-color: #e7f2f4;
}
.banner--casclient .banner__container {
  display: flex;
  flex-direction: column;
  gap: 15vw;
}
.miniatureC__illustration {
  aspect-ratio: 16/9;
  height: auto;
  width: 100%;
}
.minitaureC {
  position: relative;
}
.page-11 .miniatureC__legend,
.page-15 .miniatureC__legend {
  height: 100%;
  min-height: unset;
  padding-bottom: 6rem;
}

.miniatureC__legend {
  display: flex;
  flex-direction: column;
  gap: var(--fsTitleH3);
  padding: 5vw;
}
.miniatureC__title {
  font-family: var(--ffMBo);
  font-size: var(--fsTitleH2);
  line-height: var(--fsTitle);
  margin-bottom: 3vw;
}
.miniatureC__legend > .category:first-child {
  margin-top: 5vw;
}
.miniatureC__legend > .button {
  bottom: 5vw;
  left: 0;
  margin: 0 5%;
  padding: 1.0625rem 1.5625rem 0.8125rem 1.5625rem;
  position: absolute;
  width: 90%;
}
.miniatureC__legend--casclients {
  position: relative;
}
.join__container .miniatureC__legend > .category:first-child {
  margin-top: 0;
}

ul.filter__container.phases_projet {
  display: box;
}

ul.filter__container.phases_projet li:nth-child(1) {
  order: 1;
}

ul.filter__container.phases_projet li:nth-child(2) {
  order: 3;
}

ul.filter__container.phases_projet li:nth-child(3) {
  order: 4;
}

ul.filter__container.phases_projet li:nth-child(4) {
  order: 2;
}
.cases--client .miniatureC__legend--casclients {
  padding-bottom: 25vw;
}
.banner--casclient .miniatureC__legend {
  padding: 5vw 5vw 17.5vw 5vw;
}

@media screen and (min-width: 575.98px) {
  .miniatureC__legend {
    gap: var(--fsCorpsLess);
    padding: 2.5vw 5vw;
  }
  .cases {
    gap: 10vw;
  }
  .miniatureC__legend > .button {
    bottom: 2.5vw;
    margin: 0 20% 1.5vw 20%;
    width: 60%;
  }
}

@media screen and (min-width: 767.98px) {
  .miniatureC__legend > .category:first-child {
    margin-top: 3vw;
  }
  .miniatureC__title {
    margin-bottom: 2vw;
    margin-top: 1vw;
  }
  .miniatureC__legend > .button {
    bottom: 3.5vw;
    margin: 0 22.5% 0vw 22.5%;
    position: absolute;
    width: 45%;
  }
  .miniatureC__legend {
    gap: var(--fsCorpsLess);
    padding: 2.5vw 5vw 15vw 5vw;
  }
  .cases--client .miniatureC__legend--casclients {
    padding-bottom: 15vw;
  }
  .cases--client .miniatureC__legend--casclients > .button {
    bottom: 3.5vw;
    margin: 0 22.5% 0vw 22.5%;
    position: absolute;
    width: 55%;
  }
  .banner--casclient .miniatureC__legend > .button {
    width: 55%;
  }
}

@media screen and (min-width: 991.98px) {
  .cases {
    gap: 2.5vw;
    grid-template-columns: 30vw 30vw;
    margin-top: 0;
    width: 100%;
  }
  .miniatureC {
    margin-left: 0;
    width: 100%;
  }
  /* BG HOME */
  .page-11 a.miniatureC {
    background: #fff;
  }
  /* BG HOME */
  .miniatureC:hover .miniatureC__illustration {
    transform: scale(1.15);
    transition: all 0.25s ease;
  }
  .miniatureC .imgContainer {
    height: auto;
    overflow: hidden;
  }
  .miniatureC .miniatureC__illustration {
    transform: scale(1);
    transition: all 0.25s ease;
  }
  .miniatureC:hover .button {
    background-color: var(--mColor);
    border: 0.0625rem solid var(--tColorLight);
    color: var(--tColorLight);
    gap: 2rem;
    padding-inline: 2rem;
    transition: all 0.25s linear;
  }
  .miniatureC:hover .button__arrow {
    display: none;
  }
  .miniatureC:hover .button__arrow--hovered {
    display: block;
  }
  .clientscases {
    display: grid;
    gap: 5vw 0;
    grid-template-columns: 25vw 62.5vw;
    grid-template-rows: auto auto auto;
    justify-content: space-between;
    margin-inline: 7.5vw;
  }
  .clientscases .filter {
    grid-area: 1/1/2/2;
  }
  .clientscases .cases {
    grid-area: 1/2/2/3;
    height: fit-content;
  }
  .clientscases .pagination {
    grid-area: 2/2/3/3;
  }
  .clientscases .testimonies {
    grid-area: 3/1/4/3;
  }
  .miniatureC {
    position: relative;
  }
  .miniatureC__legend {
    padding: 1.5vw 1.5vw 9vw 1.5vw;
  }
  .miniatureC__legend > .category:first-child {
    margin-top: 0;
  }
  .miniatureC__legend > .category:first-child {
    font-size: var(--fsCorpsLess);
    line-height: 1.4375rem;
    margin-bottom: 0;
  }
  .page-11 .miniatureC__title {
    font-size: 1.325rem;
  }
  .miniatureC__title {
    font-size: 1.525rem;
    line-height: var(--fsTitleMore);
    margin-bottom: var(--fsCorps);
    margin-top: var(--fsCorpsLess);
    min-height: 5vw;
  }
  .miniatureC__legend > .button {
    bottom: 2vw;
    left: 0;
    margin: 0 7.5% 0vw 7.5%;
    width: 85%;
  }
  .banner--casclient .banner__container {
    flex-direction: row;
    gap: 2.5vw;
    margin-inline: -5vw;
  }
  .join .miniatureC__legend > .button {
    bottom: 6vw;
  }
  .miniatureC__legend--casclients {
    height: 72.5%;
  }
  .cases--client .miniatureC__legend--casclients > .button {
    margin: 0 7.5%;
    width: 85%;
  }
  .banner--casclient .miniatureC__legend > .button {
    width: 85%;
  }
}

@media screen and (min-width: 1199.98px) {
  body > .clientscases {
    margin-inline: 7.5vw;
  }
  .clientscases {
    gap: 5vw 3vw;
    grid-template-columns: 22.5vw 59.5vw;
  }
  .cases {
    grid-template-columns: 28.5vw 28.5vw;
  }
  .banner--casclient .miniatureC__legend > .button {
    left: 0;
  }
  .miniatureC__legend > .button {
    margin: 0 15% 0vw 15%;
    width: 75%;
  }
  .join .miniatureC__legend > .button {
    bottom: 4vw;
  }
  .miniatureC__legend--casclients {
    height: 70%;
    padding: 1.5vw 1.5vw 1.5vw 1.5vw !important;
  }
  .miniatureC__title {
    min-height: 5.625rem;
  }
  .cases--client .miniatureC__legend--casclients {
    padding-bottom: 10vw !important;
  }
  .banner--casclient .miniatureC__legend {
    padding: 1.5vw 1.5vw 7.5vw 1.5vw !important;
  }
  .banner--casclient .miniatureC__legend > .button {
    width: 70%;
    bottom: 4vw;
  }
}

@media screen and (min-width: 1399.98px) {
  body > .clientscases {
    margin-inline: 12.5vw;
  }
  .clientscases {
    gap: 5vw 3vw;
    grid-template-columns: 17.5vw 59.5vw;
  }
  .cases {
    grid-template-columns: 26vw 26vw;
  }
  .clientscases {
    grid-template-columns: 17.5vw 54.5vw;
  }
  .miniatureC__legend {
    padding-bottom: 7.5vw;
  }
  .miniatureC__legend > .button {
    margin: 0 15% 0vw 15%;
    width: 70%;
  }
  .join .miniatureC__legend > .button {
    margin: 0 5% 0vw 5%;
    width: 90%;
    bottom: 3vw;
  }
  .miniatureC__legend--casclients {
    height: 69%;
    padding-bottom: 7.5vw !important;
  }
  .cases--client .miniatureC__legend--casclients {
    padding-bottom: 7.5vw !important;
  }
}

@media screen and (min-width: 1599.98px) {
  .miniatureC__legend > .button {
    margin: 0 20% 0vw 20%;
    width: 60%;
    bottom: 4vw;
  }
  .miniatureC__legend--casclients {
    height: 72.5%;
  }
  .cases--client .miniatureC__legend--casclients {
    padding-bottom: 12vw !important;
  }
  .banner--casclient .miniatureC__legend > .button {
    width: 60%;
    bottom: 6vw;
  }
}

@media screen and (min-width: 1799.98px) {
  .miniatureC__title {
    margin-bottom: calc(var(--fsCorps) * 0.25);
    margin-top: calc(var(--fsCorpsLess) * 0.25);
  }
  .miniatureC__legend {
    padding-bottom: 5.5vw;
  }
  .miniatureC__legend > .button {
    bottom: 1vw;
    margin: 0 22.5% 0vw 22.5%;
    width: 55%;
  }
  .banner--casclient .miniatureC__legend > .button {
    left: 0;
  }
  .banner--casclient .banner__container {
    margin-inline: 2vw;
  }
  .miniatureC__legend--casclients {
    height: 60%;
  }
  .cases--client .miniatureC__legend--casclients {
    padding-bottom: 6.5vw !important;
  }
  .cases--client .miniatureC__legend--casclients > .button {
    bottom: 1.5vw;
  }
  .banner--casclient .miniatureC__legend > .button {
    bottom: 1vw;
    margin-inline: 20%;
  }
}

@media screen and (min-width: 1919.98px) {
  .cases {
    gap: 1.5vw;
    grid-template-columns: 23.5vw 23.5vw;
  }
  .clientscases {
    column-gap: 4vw;
  }
  .miniatureC__legend > .button {
    margin: 0 15.25% 0vw 15.25%;
    width: 57.5%;
  }
  .miniatureC__legend {
    padding-bottom: 5.5vw;
  }
  .miniatureC__legend--casclients > .button {
    margin: 0 21.25%;
  }
  body > .clientscases {
    margin-inline: 15vw;
  }
  .miniatureC__legend--casclients {
    padding-bottom: 4vw !important;
  }
}

@media screen and (min-width: 2099.98px) {
  .miniatureC__legend > .button {
    margin: 0 22.5% 0vw 22.5%;
    width: 55%;
  }
  .miniatureC__legend--casclients {
    height: 57.5%;
  }
  .banner--casclient .miniatureC__legend > .button {
    bottom: 2vw;
    margin-inline: 20%;
  }
}

@media screen and (min-width: 2199.98px) {
  .miniatureC__legend > .button {
    margin: 0 25% 0vw 25%;
    width: 50%;
  }
  .cases {
    margin-bottom: 3.5vw;
  }
}