/* ==========================================================
   MODULES ASSOCIES - SEMS
   Classes isolées
========================================================== */

.sems-essential-modules {

    --sem-dark: #07375f;
    --sem-blue: #087fc7;
    --sem-green: #18b87e;
    --sem-orange: #ff7b12;
    --sem-purple: #7a49e7;

    --sem-text: #5d7490;
    --sem-border: #dfebf3;

    position: relative;

    width: 100%;

    overflow: hidden;

    padding: 65px 5% 75px;

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

    background:
        radial-gradient(
            circle at 96% 0%,
            rgba(220, 241, 253, .72),
            transparent 25%
        ),
        radial-gradient(
            circle at 0% 100%,
            rgba(222, 242, 253, .65),
            transparent 20%
        ),
        linear-gradient(
            115deg,
            #ffffff 0%,
            #fbfdff 56%,
            #f5fbff 100%
        );
}


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

.sems-essential-modules__container {

    position: relative;

    z-index: 5;

    width: 100%;

    max-width: 1400px;

    margin: 0 auto;
}


/* ==========================================================
   HEADER
========================================================== */

.sems-essential-modules__header {

    margin-bottom: 34px;
}


.sems-essential-modules__label {

    display: flex;

    align-items: center;

    gap: 12px;

    margin-bottom: 18px;

    color: var(--sem-blue);

    font-size: 14px;

    font-weight: 800;

    letter-spacing: .8px;

    text-transform: uppercase;
}


.sems-essential-modules__label > span {

    width: 28px;

    height: 3px;

    display: block;

    border-radius: 10px;

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


/* Même style que les autres titres validés */

.sems-essential-modules__title {

    margin: 0;

    color: var(--sem-dark);

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

    line-height: 1.15;

    letter-spacing: -1.4px;

    font-weight: 800;
}


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

.sems-essential-modules__grid {

    display: grid;

    grid-template-columns:
        repeat(4, minmax(0, 1fr));

    gap: 22px;
}


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

.sems-essential-module {

    position: relative;

    min-height: 245px;

    overflow: hidden;

    padding:
        24px
        24px
        26px;

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

    border-radius: 17px;

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

    box-shadow:
        0 9px 28px
        rgba(27, 88, 127, .055);

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


.sems-essential-module:hover {

    transform: translateY(-5px);

    border-color:
        rgba(13, 131, 196, .22);

    box-shadow:
        0 18px 36px
        rgba(27, 92, 135, .11);
}


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

.sems-essential-module__top {

    position: relative;

    z-index: 5;

    display: flex;

    align-items: center;

    margin-bottom: 20px;
}


/* ==========================================================
   NUMBER
========================================================== */

.sems-essential-module__number {

    width: 52px;

    height: 52px;

    display: flex;

    align-items: center;

    justify-content: center;

    margin-right: 14px;

    border-radius: 12px;

    font-size: 16px;

    font-weight: 800;
}


.sems-essential-module__number.blue {

    color: #087fc7;

    background: #e7f4fd;
}


.sems-essential-module__number.green {

    color: #14a968;

    background: #e4f8ed;
}


.sems-essential-module__number.orange {

    color: #ef7411;

    background: #fff0e1;
}


.sems-essential-module__number.purple {

    color: #7445de;

    background: #efe8fe;
}


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

.sems-essential-module__icon {

    width: 58px;

    height: 58px;

    display: flex;

    align-items: center;

    justify-content: center;

    border-radius: 14px;

    font-size: 27px;
}


.sems-essential-module__icon.blue {

    color: #087fd0;

    background:
        linear-gradient(
            145deg,
            #eaf7fe,
            #dceefa
        );
}


.sems-essential-module__icon.green {

    color: #11ad6d;

    background:
        linear-gradient(
            145deg,
            #e6faef,
            #d9f5e6
        );
}


.sems-essential-module__icon.orange {

    color: #f2700d;

    background:
        linear-gradient(
            145deg,
            #fff3e8,
            #ffe4d0
        );
}


.sems-essential-module__icon.purple {

    color: #7749e4;

    background:
        linear-gradient(
            145deg,
            #f2edff,
            #e7dfff
        );
}


/* ==========================================================
   ARROW
========================================================== */

.sems-essential-module__arrow {

    margin-left: auto;

    width: 38px;

    height: 38px;

    display: flex;

    align-items: center;

    justify-content: center;

    border-radius: 50%;

    text-decoration: none;

    font-size: 16px;

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


.sems-essential-module:hover
.sems-essential-module__arrow {

    transform: translateX(4px);
}


.sems-essential-module__arrow.blue {

    color: #087fc7;

    background: #e8f4fd;
}


.sems-essential-module__arrow.green {

    color: #149d62;

    background: #e6f8ed;
}


.sems-essential-module__arrow.orange {

    color: #f07812;

    background: #fff0e3;
}


.sems-essential-module__arrow.purple {

    color: #7040dc;

    background: #eee7fd;
}


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

.sems-essential-module h3 {

    position: relative;

    z-index: 4;

    margin:
        0
        0
        12px;

    color: var(--sem-dark);

    font-size: 18px;

    line-height: 1.35;

    font-weight: 800;
}


/* ==========================================================
   DESCRIPTION
========================================================== */

.sems-essential-module p {

    position: relative;

    z-index: 4;

    max-width: 290px;

    margin: 0;

    color: var(--sem-text);

    font-size: 13px;

    line-height: 1.6;
}


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

.sems-essential-module__corner {

    position: absolute;

    z-index: 1;

    right: -70px;

    bottom: -85px;

    width: 180px;

    height: 180px;

    display: block;

    border-radius: 50%;

    opacity: .08;
}


.sems-essential-module__corner.blue {
    background: var(--sem-blue);
}


.sems-essential-module__corner.green {
    background: var(--sem-green);
}


.sems-essential-module__corner.orange {
    background: var(--sem-orange);
}


.sems-essential-module__corner.purple {
    background: var(--sem-purple);
}


/* ==========================================================
   BACKGROUND DECORATIONS
========================================================== */

.sems-essential-modules__shape {

    position: absolute;

    z-index: 1;

    border-radius: 50%;

    pointer-events: none;
}


.sems-essential-modules__shape--top {

    width: 500px;

    height: 500px;

    top: -320px;

    right: -190px;

    background:
        rgba(218, 240, 253, .62);
}


.sems-essential-modules__shape--left {

    width: 400px;

    height: 400px;

    left: -290px;

    bottom: -300px;

    background:
        rgba(221, 241, 253, .62);
}


/* ==========================================================
   DOTS
========================================================== */

.sems-essential-modules__dots {

    position: absolute;

    z-index: 2;

    width: 145px;

    height: 145px;

    opacity: .5;

    background-image:
        radial-gradient(
            rgba(56, 159, 218, .36) 2px,
            transparent 2px
        );

    background-size:
        19px
        19px;
}


.sems-essential-modules__dots--left {

    left: 15px;

    top: 190px;
}


.sems-essential-modules__dots--right {

    right: 25px;

    top: 80px;
}


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

@media (max-width: 1200px) {

    .sems-essential-modules__grid {

        grid-template-columns:
            repeat(2, minmax(0, 1fr));
    }

}


@media (max-width: 750px) {

    .sems-essential-modules {

        padding:
            50px
            30px
            65px;
    }


    .sems-essential-modules__title {

        font-size: 32px;
    }

}


@media (max-width: 600px) {

    .sems-essential-modules {

        padding:
            42px
            20px
            55px;
    }


    .sems-essential-modules__label {

        font-size: 11px;
    }


    .sems-essential-modules__label > span {

        width: 24px;
    }


    .sems-essential-modules__title {

        font-size: 29px;

        letter-spacing: -.6px;
    }


    .sems-essential-modules__grid {

        grid-template-columns: 1fr;

        gap: 15px;
    }


    .sems-essential-module {

        min-height: 225px;
    }

}