/* ==========================================================
   SCORING & EXPIRATIONS
   Styles isolés pour ne pas modifier les autres blocs
========================================================== */

.sems-scoring {
    --ss-dark: #07375f;
    --ss-blue: #087fc7;
    --ss-green: #19b97c;
    --ss-orange: #ff8a17;
    --ss-red: #ef4169;
    --ss-purple: #8a4de3;

    --ss-text: #5b7390;
    --ss-border: #e0ebf3;

    position: relative;

    width: 100%;

    overflow: hidden;

    padding: 65px 5% 70px;

    font-family:
        Inter,
        Arial,
        sans-serif;

    background:
        radial-gradient(
            circle at 94% 0%,
            rgba(218, 240, 253, .72),
            transparent 24%
        ),
        radial-gradient(
            circle at 0% 70%,
            rgba(224, 243, 253, .60),
            transparent 21%
        ),
        linear-gradient(
            115deg,
            #ffffff 0%,
            #fbfdff 55%,
            #f6fbff 100%
        );
}


/* ==========================================================
   CONTAINER
========================================================== */

.sems-scoring__container {
    position: relative;

    z-index: 5;

    width: 100%;

    max-width: 1400px;

    margin: auto;
}


/* ==========================================================
   TOP GRID
========================================================== */

.sems-scoring__top {
    display: grid;

    grid-template-columns:
        minmax(550px, 1fr)
        610px;

    gap: 60px;

    align-items: center;
}


/* ==========================================================
   LABEL
========================================================== */

.sems-scoring__label {
    display: flex;

    align-items: center;

    gap: 14px;

    margin-bottom: 17px;

    color: var(--ss-blue);

    font-size: 14px;

    font-weight: 800;

    letter-spacing: 1.2px;
}


.sems-scoring__label > span {
    width: 28px;

    height: 3px;

    display: block;

    border-radius: 10px;

    background: var(--ss-blue);
}


/* ==========================================================
   TITRE
========================================================== */

/*
   Important :
   même taille / logique visuelle que
   "Ce que permet le Référencement des fournisseurs"
*/

.sems-scoring__title {
    max-width: 760px;

    margin: 0 0 22px;

    color: var(--ss-dark);

    font-size: clamp(26px, 2.4vw, 36px);

    line-height: 1.15;

    letter-spacing: -1.4px;

    font-weight: 800;
}


/* ==========================================================
   INTRO TEXT
========================================================== */

.sems-scoring__intro p {
    max-width: 760px;

    margin: 0 0 15px;

    color: var(--ss-text);

    font-size: 15px;

    line-height: 1.7;
}


/* ==========================================================
   SCORE PANEL
========================================================== */

.sems-scoring__panel {
    display: grid;

    grid-template-columns:
        210px
        minmax(0,1fr);

    min-height: 245px;

    overflow: hidden;

    border:
        1px solid
        var(--ss-border);

    border-radius: 17px;

    background:
        rgba(255,255,255,.97);

    box-shadow:
        0 18px 42px
        rgba(27, 90, 130, .08);
}


/* ==========================================================
   SCORE GLOBAL
========================================================== */

.sems-scoring__global {
    padding: 25px 22px;

    border-right:
        1px solid
        #edf2f5;
}


.sems-scoring__global-title {
    display: block;

    margin-bottom: 5px;

    color: var(--ss-dark);

    font-size: 15px;
}


.sems-scoring__global-subtitle {
    color: #728aa1;

    font-size: 11px;
}


/* ==========================================================
   GAUGE
========================================================== */

.sems-scoring__gauge {
    position: relative;

    width: 140px;
    height: 80px;

    overflow: hidden;

    margin:
        25px
        auto
        12px;
}


.sems-scoring__gauge::before {
    content: "";

    position: absolute;

    width: 140px;
    height: 140px;

    border-radius: 50%;

    background:
        conic-gradient(
            from 270deg,
            #1ebe79 0deg,
            #38cc8b 147deg,
            #e4eaf0 147deg,
            #e4eaf0 180deg,
            transparent 180deg
        );
}


.sems-scoring__gauge::after {
    content: "";

    position: absolute;

    left: 17px;
    top: 17px;

    width: 106px;
    height: 106px;

    border-radius: 50%;

    background: #ffffff;
}


.sems-scoring__gauge-value {
    position: absolute;

    z-index: 3;

    bottom: 0;
    left: 50%;

    transform: translateX(-50%);

    display: flex;

    align-items: baseline;
}


.sems-scoring__gauge-value strong {
    color: var(--ss-dark);

    font-size: 35px;

    line-height: 1;

    font-weight: 800;
}


.sems-scoring__gauge-value span {
    color: var(--ss-dark);

    font-size: 11px;

    font-weight: 700;
}


/* status */

.sems-scoring__status {
    width: max-content;

    display: flex;

    align-items: center;

    gap: 6px;

    margin: auto;

    padding:
        6px
        12px;

    border-radius: 50px;

    background: #ddf7e9;

    color: #15935f;

    font-size: 11px;

    font-weight: 700;
}


/* ==========================================================
   CRITERIA
========================================================== */

.sems-scoring__criteria {
    display: flex;

    flex-direction: column;

    justify-content: center;

    gap: 17px;

    padding:
        24px
        26px;
}


.sems-scoring__criterion {
    display: grid;

    grid-template-columns:
        165px
        1fr
        52px;

    align-items: center;

    gap: 14px;
}


.sems-scoring__criterion-name {
    display: flex;

    align-items: center;

    gap: 9px;

    color: var(--ss-dark);

    font-size: 11px;

    font-weight: 700;
}


.sems-scoring__criterion-icon {
    width: 29px;
    height: 29px;

    flex: 0 0 29px;

    display: flex;

    align-items: center;
    justify-content: center;

    border-radius: 8px;

    font-size: 13px;
}


.sems-scoring__criterion-icon.blue {
    color: #1689d7;

    background: #e7f4fc;
}


.sems-scoring__criterion-icon.orange {
    color: #f18815;

    background: #fff0de;
}


.sems-scoring__criterion-icon.purple {
    color: #8850df;

    background: #efe8fd;
}


.sems-scoring__criterion-icon.red {
    color: #ea4269;

    background: #ffe6ee;
}


.sems-scoring__criterion > strong {
    color: var(--ss-dark);

    text-align: right;

    font-size: 10px;
}


/* ==========================================================
   PROGRESS
========================================================== */

.sems-scoring__progress {
    height: 9px;

    overflow: hidden;

    border-radius: 20px;

    background: #edf2f5;
}


.sems-scoring__progress span {
    display: block;

    height: 100%;

    border-radius: inherit;
}


.sems-scoring__progress.green span {
    background:
        linear-gradient(
            90deg,
            #21bca1,
            #28aaa9
        );
}


.sems-scoring__progress.blue span {
    background:
        linear-gradient(
            90deg,
            #1389e3,
            #2ea2ef
        );
}


.sems-scoring__progress.orange span {
    background:
        linear-gradient(
            90deg,
            #ff8716,
            #ffb14f
        );
}


.sems-scoring__progress.purple span {
    background:
        linear-gradient(
            90deg,
            #8650df,
            #af70eb
        );
}


.sems-scoring__progress.red span {
    background:
        linear-gradient(
            90deg,
            #ef4269,
            #f56d8b
        );
}


/* ==========================================================
   CLASSIFICATION TITLE
========================================================== */

.sems-scoring__classification-title {
    margin:
        38px
        0
        20px;

    color: var(--ss-dark);

    font-size: 20px;

    line-height: 1.4;

    font-weight: 800;
}


/* ==========================================================
   CARDS GRID
========================================================== */

.sems-scoring__cards {
    display: grid;

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

    gap: 18px;
}


.sems-scoring__card:nth-child(1),
.sems-scoring__card:nth-child(2),
.sems-scoring__card:nth-child(3) {
    grid-column: span 2;
}


.sems-scoring__card--wide {
    grid-column: span 3;
}


/* ==========================================================
   CARD
========================================================== */

.sems-scoring__card {
    position: relative;

    min-height: 125px;

    overflow: hidden;

    display: flex;

    align-items: center;

    gap: 20px;

    padding:
        20px
        23px;

    border:
        1px solid
        var(--ss-border);

    border-radius: 15px;

    background:
        rgba(255,255,255,.96);

    box-shadow:
        0 8px 25px
        rgba(27, 88, 127, .05);

    transition:
        transform .25s ease,
        box-shadow .25s ease;
}


.sems-scoring__card:hover {
    transform: translateY(-4px);

    box-shadow:
        0 16px 32px
        rgba(26, 88, 130, .09);
}


/* ==========================================================
   CARD ICON
========================================================== */

.sems-scoring__card-icon {
    position: relative;

    z-index: 3;

    width: 54px;
    height: 54px;

    flex: 0 0 54px;

    display: flex;

    align-items: center;
    justify-content: center;

    border-radius: 50%;

    color: #ffffff;

    font-size: 24px;
}


.sems-scoring__card-icon.green {
    background:
        linear-gradient(
            145deg,
            #39cf95,
            #16ad73
        );

    box-shadow:
        0 0 0 12px
        rgba(32, 187, 126, .11);
}


.sems-scoring__card-icon.orange {
    background:
        linear-gradient(
            145deg,
            #ffa130,
            #f17d12
        );

    box-shadow:
        0 0 0 12px
        rgba(255, 139, 22, .10);
}


.sems-scoring__card-icon.red {
    background:
        linear-gradient(
            145deg,
            #ff5b82,
            #e93862
        );

    box-shadow:
        0 0 0 12px
        rgba(237, 64, 104, .10);
}


.sems-scoring__card-icon.blue {
    background:
        linear-gradient(
            145deg,
            #379ff0,
            #167bd9
        );

    box-shadow:
        0 0 0 12px
        rgba(34, 138, 225, .10);
}


.sems-scoring__card-icon.purple {
    background:
        linear-gradient(
            145deg,
            #a462ec,
            #7d3fda
        );

    box-shadow:
        0 0 0 12px
        rgba(134, 73, 223, .10);
}


/* ==========================================================
   CARD TEXT
========================================================== */

.sems-scoring__card h4 {
    position: relative;

    z-index: 3;

    margin:
        0
        0
        7px;

    color: var(--ss-dark);

    font-size: 16px;

    font-weight: 800;
}


.sems-scoring__card p {
    position: relative;

    z-index: 3;

    max-width: 380px;

    margin: 0;

    color: var(--ss-text);

    font-size: 12px;

    line-height: 1.55;
}


/* ==========================================================
   NUMBERS
========================================================== */

.sems-scoring__number {
    position: absolute;

    z-index: 2;

    right: 18px;
    top: 15px;

    font-size: 25px;

    font-weight: 800;

    opacity: .17;
}


.sems-scoring__number.green {
    color: var(--ss-green);
}


.sems-scoring__number.orange {
    color: var(--ss-orange);
}


.sems-scoring__number.red {
    color: var(--ss-red);
}


.sems-scoring__number.blue {
    color: var(--ss-blue);
}


.sems-scoring__number.purple {
    color: var(--ss-purple);
}


/* ==========================================================
   CARD DECOR
========================================================== */

.sems-scoring__card-shape {
    position: absolute;

    width: 145px;
    height: 145px;

    right: -65px;
    bottom: -80px;

    border-radius: 50%;

    opacity: .08;
}


.sems-scoring__card-shape.green {
    background: var(--ss-green);
}


.sems-scoring__card-shape.orange {
    background: var(--ss-orange);
}


.sems-scoring__card-shape.red {
    background: var(--ss-red);
}


.sems-scoring__card-shape.blue {
    background: var(--ss-blue);
}


.sems-scoring__card-shape.purple {
    background: var(--ss-purple);
}


/* ==========================================================
   BENEFIT
========================================================== */

.sems-scoring__benefit {
    position: relative;

    min-height: 82px;

    overflow: hidden;

    display: flex;

    align-items: center;

    gap: 20px;

    margin-top: 22px;

    padding:
        14px
        24px;

    border:
        1px solid
        #ffd39d;

    border-left:
        5px solid
        var(--ss-orange);

    border-radius: 11px;

    background:
        linear-gradient(
            90deg,
            #fffaf4,
            #fff4e7
        );
}


.sems-scoring__benefit-icon {
    position: relative;

    z-index: 3;

    width: 52px;
    height: 52px;

    flex: 0 0 52px;

    display: flex;

    align-items: center;
    justify-content: center;

    border:
        1px solid
        #ffd6a4;

    border-radius: 50%;

    color: #ffffff;

    background: #ff931c;

    box-shadow:
        inset
        0 0 0 10px
        #ffffff;

    font-size: 14px;
}


.sems-scoring__benefit-separator {
    width: 1px;

    height: 42px;

    background: #f3bc7a;
}


.sems-scoring__benefit-text {
    position: relative;

    z-index: 3;
}


.sems-scoring__benefit-text strong {
    display: block;

    margin-bottom: 5px;

    color: var(--ss-dark);

    font-size: 15px;
}


.sems-scoring__benefit-text p {
    margin: 0;

    color: var(--ss-text);

    font-size: 12px;
}


.sems-scoring__benefit-shape {
    position: absolute;

    right: -10px;
    bottom: -85px;

    width: 170px;
    height: 170px;

    border-radius: 50%;

    border:
        34px solid
        rgba(255, 149, 30, .07);
}


/* ==========================================================
   DECORATION
========================================================== */

.sems-scoring__shape {
    position: absolute;

    z-index: 1;

    border-radius: 50%;
}


.sems-scoring__shape--top {
    width: 500px;
    height: 500px;

    right: -175px;
    top: -330px;

    background:
        rgba(219, 240, 252, .65);
}


.sems-scoring__shape--left {
    width: 430px;
    height: 430px;

    left: -330px;
    top: 330px;

    background:
        rgba(222, 242, 253, .68);
}


/* dots */

.sems-scoring__dots {
    position: absolute;

    z-index: 2;

    width: 150px;
    height: 150px;

    opacity: .5;

    background-image:
        radial-gradient(
            rgba(58, 161, 218, .34) 2px,
            transparent 2px
        );

    background-size:
        19px
        19px;
}


.sems-scoring__dots--top {
    top: 65px;
    right: 35px;
}


.sems-scoring__dots--bottom {
    bottom: 45px;
    left: 25px;
}


/* ==========================================================
   RESPONSIVE
========================================================== */

@media (max-width: 1250px) {

    .sems-scoring__top {
        grid-template-columns:
            1fr
            530px;

        gap: 35px;
    }


    .sems-scoring__criterion {
        grid-template-columns:
            145px
            1fr
            48px;
    }

}


@media (max-width: 1000px) {

    .sems-scoring__top {
        grid-template-columns: 1fr;
    }


    .sems-scoring__panel {
        max-width: 700px;
    }


    .sems-scoring__cards {
        grid-template-columns:
            repeat(2, 1fr);
    }


    .sems-scoring__card:nth-child(n) {
        grid-column: span 1;
    }


    .sems-scoring__card:last-child {
        grid-column: 1 / -1;
    }

}


@media (max-width: 650px) {

    .sems-scoring {
        padding:
            45px
            20px
            60px;
    }


    .sems-scoring__label {
        font-size: 11px;
    }


    .sems-scoring__title {
        font-size: 30px;

        letter-spacing: -.6px;
    }


    .sems-scoring__intro p {
        font-size: 14px;
    }


    .sems-scoring__panel {
        grid-template-columns: 1fr;
    }


    .sems-scoring__global {
        border-right: none;

        border-bottom:
            1px solid
            #edf2f5;
    }


    .sems-scoring__criterion {
        grid-template-columns:
            1fr
            55px;

        gap: 8px;
    }


    .sems-scoring__progress {
        grid-column: 1 / -1;
    }


    .sems-scoring__cards {
        grid-template-columns: 1fr;
    }


    .sems-scoring__card:nth-child(n) {
        grid-column: auto;
    }


    .sems-scoring__benefit {
        align-items: flex-start;
    }

}