:root {
  --color-primary: #0D2342;
  --color-secondary: #F0C2B5;
  --color-tertiary: #FFED9E;
  --color-quaternary: #D9F5A8;
  --color-quinary: #E38A73;
  --color-gray-350: #d0d0d0;
}

.chiffre-cle-list {
    display: grid;
    grid-template-columns: 1fr;
    gap: 2rem;
}

@media screen and (min-width: 620px) {
    .chiffre-cle-list {
        grid-template-columns: repeat(2, 1fr);
        gap: 20px 40px;
    }
}

@media screen and (min-width: 992px) {
    .chiffre-cle-list {
        grid-template-columns: repeat(4, 1fr);
        gap: 20px;
    }
}

@media screen and (min-width: 1440px) {
    .chiffre-cle-list {
        gap: 50px;
    }
}

.chiffre-cle {
    max-width: 100%;
    min-width: 200px;

    text-align: center;
}

.chiffre-cle--has-icon .chiffre-cle__body {
    padding-left: 30px;
}

.chiffre-cle__inner {
    position: relative;

    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 1rem;
}

@media screen and (min-width: 620px) {
    .chiffre-cle + .chiffre-cle .chiffre-cle__inner::before {
        content: '';
        position: absolute;
        left: -20px;

        width: 1px;
        height: 130px;

        background:  linear-gradient(to bottom, #ffffff 0%,#D0D0D0 50%,#ffffff 100%);
    }
}

@media screen and (min-width: 992px) {
    .chiffre-cle + .chiffre-cle .chiffre-cle__inner::before {
        left: -10px;
    }
}

@media screen and (min-width: 1440px) {
    .chiffre-cle + .chiffre-cle .chiffre-cle__inner::before {
        left: -25px;
    }
}

@media screen and (min-width: 620px) and (max-width: 991px) {
    .chiffre-cle:nth-child(odd) .chiffre-cle__inner::before {
        display: none;
    }
}

.chiffre-cle__body {
    position: relative;

    text-align: left;

    margin-top: 10px;
}

.chiffre-cle__bg-image {
    position: absolute;
    z-index: 0;
    top: -8px;
    left: 0;

    width: 98px;
}

.chiffre-cle__overtitle,
.chiffre-cle__title,
.chiffre-cle__number {
    position: relative;
}

.pentagon-icon {
    width: 80px;
    height: auto;
}

.pentagon-icon path {
    fill: currentColor;
}

/* Couleurs des pentagones */
.pentagon-icon.tertiary { 
    color: var(--color-tertiary);
}
.pentagon-icon.secondary { 
    color: var(--color-secondary);
}
.pentagon-icon.quaternary { 
    color: var(--color-quaternary);
}
.pentagon-icon.quinary { 
    color: var(--color-quinary);
}
.pentagon-icon.light { 
    color: var(--color-gray-350);
}
.chiffre-cle__overtitle {
    position: absolute;
    top: -16px;

    font-size: 1.5rem;
    font-weight: 600;

    margin: 0;
}

.chiffre-cle__number {
    z-index: 1;

    font-weight: 700;
    font-size: 3.2rem;
    font-stretch: 63%; 
}

@media screen and (min-width: 992px) {
    .chiffre-cle__number {
        font-size: 3.6rem;
    }
}

.chiffre-cle__title {
    text-transform: uppercase;
    font-weight: 800;
    font-size: 1.6rem;

    margin: 0;
}

@media screen and (min-width: 992px) {
    .chiffre-cle__title {
        font-size: 1.7rem;
    }
}

.chiffre-cle__bottom {
    text-align: left;
    font-size: 1.5rem;

    padding-left: 30px;
}
.frame-type-tctheme_chiffrecles.bg-color--light {
    background-color: #f6f6f6;
}

/* Contenu avec fond coloré */
.frame-type-tctheme_chiffrecles[class*="bg-color--"] .chiffre-cle-list {
    padding: 46px 0;
}

.frame-type-tctheme_chiffrecles[class*="bg-color--"] .chiffre-cle__inner::before {
    top: 10px;
    background: var(--color-gray-350);

    height: 80px;
}

.frame-type-tctheme_chiffrecles.bg-color--primary .pentagon-icon {
    opacity: 0.3;
}

.frame-type-tctheme_chiffrecles.bg-color--primary .pentagon-icon.primary {
    color: rgba(255,255,255,0.25);
    opacity: 1;
}

.frame-type-tctheme_chiffrecles.bg-color--secondary .pentagon-icon.secondary,
.frame-type-tctheme_chiffrecles.bg-color--tertiary .pentagon-icon.tertiary,
.frame-type-tctheme_chiffrecles.bg-color--quaternary .pentagon-icon.quaternary,
.frame-type-tctheme_chiffrecles.bg-color--quinary .pentagon-icon.quinary {
    color: rgba(255,255,255,0.5);
    opacity: 1;
}

.frame-type-tctheme_chiffrecles.bg-color--secondary .pentagon-icon.primary,
.frame-type-tctheme_chiffrecles.bg-color--tertiary .pentagon-icon.primary,
.frame-type-tctheme_chiffrecles.bg-color--quaternary .pentagon-icon.primary,
.frame-type-tctheme_chiffrecles.bg-color--quinary .pentagon-icon.primary,
.frame-type-tctheme_chiffrecles.bg-color--light .pentagon-icon.primary {
    color: rgba(13,35,66,0.3);
}

.frame-type-tctheme_chiffrecles.bg-color--light .pentagon-icon.light {
    color: var(--color-gray-350);
}