/* =========================================================
   E2H — PRÉVISUALISATION SERVICE FILAMENT
   CSS autonome
========================================================= */

.service-preview{
    --service-color:#22d3ee;
    position:relative;
    width:100%;
    overflow:hidden;
    padding:30px;
    border:1px solid rgba(56,189,248,.20);
    border-radius:24px;
    background:
        radial-gradient(
            circle at var(--mx,50%) var(--my,50%),
            color-mix(in srgb,var(--service-color) 9%,transparent),
            transparent 34%
        ),
        linear-gradient(
            145deg,
            rgba(9,35,57,.96),
            rgba(3,15,27,.98)
        );
    box-shadow:
        inset 0 1px 0 rgba(255,255,255,.025),
        0 18px 45px rgba(0,0,0,.22);
    transition:
        border-color .35s ease,
        box-shadow .35s ease,
        transform .35s ease;
}

.service-preview:hover{
    border-color:color-mix(
        in srgb,
        var(--service-color) 45%,
        transparent
    );

    box-shadow:
        0 0 0 1px color-mix(
            in srgb,
            var(--service-color) 8%,
            transparent
        ),
        0 0 35px color-mix(
            in srgb,
            var(--service-color) 15%,
            transparent
        ),
        inset 0 1px 0 rgba(255,255,255,.04);

    transform:translateY(-2px);
}

/* =========================================================
   NUMÉRO
========================================================= */

.service-preview__number{
    position:absolute;
    top:15px;
    right:20px;
    font-family:'JetBrains Mono',monospace;
    font-size:42px;
    line-height:1;
    font-weight:500;
    color:rgba(125,211,252,.08);
    pointer-events:none;
}

/* =========================================================
   ICÔNE
========================================================= */

.service-preview__icon{
    position:relative;
    width:62px;
    height:62px;
    display:flex;
    align-items:center;
    justify-content:center;
    margin-bottom:28px;
    border-radius:17px;
    font-size:20px;

    background:
        linear-gradient(
            145deg,
            color-mix(
                in srgb,
                var(--service-color) 15%,
                rgba(3,20,34,.95)
            ),
            rgba(3,18,31,.95)
        );

    border:1px solid color-mix(
        in srgb,
        var(--service-color) 55%,
        transparent
    );

    color:var(--service-color);

    box-shadow:
        0 0 18px color-mix(
            in srgb,
            var(--service-color) 18%,
            transparent
        ),
        inset 0 0 16px color-mix(
            in srgb,
            var(--service-color) 7%,
            transparent
        );

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

.service-preview:hover .service-preview__icon{
    transform:translateY(-3px) scale(1.04);

    box-shadow:
        0 0 25px color-mix(
            in srgb,
            var(--service-color) 30%,
            transparent
        ),
        inset 0 0 18px color-mix(
            in srgb,
            var(--service-color) 10%,
            transparent
        );
}

/* =========================================================
   CONTENU
========================================================= */

.service-preview__content{
    position:relative;
    z-index:2;
}

.service-preview__title{
    margin:0 0 12px;
    font-family:'Playfair Display',Georgia,serif;
    font-size:23px;
    line-height:1.15;
    font-weight:700;
    color:#edf8ff;
}

.service-preview__description{
    margin:0;
    font-family:'Source Sans 3',Arial,sans-serif;
    font-size:15px;
    line-height:1.7;
    font-weight:300;
    color:rgba(226,242,252,.50);
}

/* =========================================================
   BADGE NEW
========================================================= */

.service-preview__new{
    display:inline-flex;
    align-items:center;
    gap:7px;
    margin-top:18px;
    padding:5px 9px;
    border:1px solid rgba(74,222,128,.25);
    border-radius:999px;
    background:rgba(74,222,128,.07);
    color:#4ade80;
    font-family:'JetBrains Mono',monospace;
    font-size:8px;
    letter-spacing:.15em;
    text-transform:uppercase;
}

.service-preview__new-dot{
    width:6px;
    height:6px;
    border-radius:50%;
    background:#4ade80;
    box-shadow:0 0 8px rgba(74,222,128,.7);
}

/* =========================================================
   LIGNE
========================================================= */

.service-preview__line{
    width:45px;
    height:1px;
    margin:25px auto 0;

    background:
        linear-gradient(
            90deg,
            transparent,
            color-mix(
                in srgb,
                var(--service-color) 55%,
                transparent
            ),
            transparent
        );
}

/* =========================================================
   COULEURS
========================================================= */

.service-preview--cyan{--service-color:#22d3ee}
.service-preview--sky{--service-color:#38bdf8}
.service-preview--blue{--service-color:#60a5fa}
.service-preview--indigo{--service-color:#818cf8}
.service-preview--violet{--service-color:#a78bfa}
.service-preview--purple{--service-color:#c084fc}
.service-preview--fuchsia{--service-color:#e879f9}
.service-preview--pink{--service-color:#f472b6}
.service-preview--rose{--service-color:#fb7185}
.service-preview--red{--service-color:#f87171}
.service-preview--orange{--service-color:#fb923c}
.service-preview--amber{--service-color:#fbbf24}
.service-preview--lime{--service-color:#a3e635}
.service-preview--green{--service-color:#4ade80}
.service-preview--emerald{--service-color:#34d399}
.service-preview--teal{--service-color:#2dd4bf}

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

@media(max-width:640px){

    .service-preview{
        padding:24px;
        border-radius:20px;
    }

    .service-preview__title{
        font-size:21px;
    }

    .service-preview__description{
        font-size:14px;
    }
}