/* =========================================================
   CERFBOX - COMMENT ÇA FONCTIONNE
   ========================================================= */

.how-section {
    width: calc(100% - 3vw);

    margin:
            2.3vw
            auto
            0;

    background: var(--color-cream);
}

.how-inner {
    width: 100%;

    padding:
            3.6vw
            5vw
            3.8vw;
}

.how-header {
    text-align: center;
}

.how-header h2 {
    margin: 0;

    color: var(--color-black);

    font-family: var(--font-title);

    font-weight: var(--weight-semibold);

    line-height: 1.15;

    letter-spacing: -0.08vw;
}

.how-header p {
    margin:
            2vw
            0
            0;

    color: var(--color-text);

    font-family: var(--font-text);

    font-weight: var(--weight-regular);

    line-height: 1.2;
}

.how-header p strong {
    color: var(--color-black);

    font-weight: var(--weight-bold);
}

.how-grid {
    margin-top: 4.7vw;

    display: grid;

    grid-template-columns:
        repeat(3, 1fr);

    column-gap: 6.5vw;
}

.how-item {
    text-align: center;
}

.how-number {
    width: 5.208333vw;
    height: 5.902778vw;

    margin:
            0
            auto
            1.7vw;

    display: flex;
    align-items: flex-start;
    justify-content: center;

    padding-top: 1.05vw;

    background: var(--color-yellow);


    clip-path: polygon(
            0 0,
            100% 0,
            100% 65.7%,
            53.1% 100%,
            0 69.8%
    );

    color: var(--color-black-dark);

    font-family: var(--font-title);
    font-size: 2.15vw;
    font-weight: var(--weight-bold);

    line-height: 1;
}

.how-number::after {
    display: none;
}

.how-number span {
    position: static;

    transform: none;
}

.how-item h3 {
    margin:
            2.8vw
            0
            0;

    color: var(--color-text-dark);

    font-family: var(--font-text);

    font-weight: var(--weight-bold);

    line-height: 1.15;
}

.how-item p {
    margin:
            1.4vw
            0
            0;

    color: var(--color-text);

    font-family: var(--font-text);

    font-weight: var(--weight-regular);

    line-height: 1.12;
}

.how-item p strong {
    color: var(--color-black);

    font-weight: var(--weight-bold);
}