.container-bloc-compteurs {justify-content: center; column-gap: 12rem; margin-top: 3rem;}
.container-bloc-compteurs .bloc-compteur {gap: 2rem;}
.container-bloc-compteurs .compteur-item {text-align: center; padding: 2rem; width: 100%; border-radius: 1.5rem; flex-direction: column; justify-content: center;}
.compteur-item:first-of-type {background-color: #1a3a6b; box-shadow: rgba(26, 58, 107, 0.4) 8px 8px;}
.compteur-item:nth-child(2) {background-color: var(--couleur-secondaire); box-shadow: rgba(137, 108, 74, 0.4) 8px 8px;}
.compteur-item:last-of-type {background-color: var(--couleur-principale); box-shadow: rgba(202, 55, 42, 0.4) 8px 8px;}
.container-bloc-compteurs .compteur-nombre, .container-bloc-compteurs .unite-nombre {font-size: 4rem; font-weight: 700; letter-spacing: .1rem;}
 
.container-bloc-compteurs .circle-progress {color: #fff; line-height: 1; text-shadow: 1px 1px 2px rgb(79 72 74);}
.container-bloc-compteurs .compteur-intitule {margin-top: .6rem; font-size: 2.4rem; color: #fff; font-family: var(--font-secondaire); margin-bottom: .5rem; text-shadow: 1px 1px 2px rgb(79 72 74);}
.bloc-compteur-intro {margin: 0 2rem 3rem;}



@media (min-width: 768px) {
    .container-bloc-compteurs .compteur-item {width: max-content; flex: 1; padding: 3rem 2rem;}
    .container-bloc-compteurs .compteur-nombre, .container-bloc-compteurs .unite-nombre { font-size: 4rem;}
    .container-bloc-compteurs .compteur-intitule {margin-left: auto; margin-right: auto; font-size: 2.8rem;}
    .bloc-compteur-intro  {max-width: 80rem; margin: 4rem auto 2rem;}
    .compteur-item:first-of-type {box-shadow: rgba(26, 58, 107, 0.4) -8px 8px;}
    .compteur-item:nth-child(2) {box-shadow: rgba(137, 108, 74, 0.4) 0px 8px;}
}
@media (min-width: 1000px) {
    .container-bloc-compteurs {margin-top: 5rem;}
}

@media (min-width: 1400px) {
    .container-bloc-compteurs .compteur-item {padding: 5rem 2rem;  justify-content: flex-start;}
}