/* =========================
   SERVICE SLUG — pages métier Hees
   Version adaptée boutique / e-commerce
   ========================= */

.service-showcase{
    padding: 34px 0 22px;
}

.service-showcase__hero{
    position: relative;
    overflow: hidden;
    border-radius: calc(var(--radius) + 10px);
    border: 1px solid rgba(255,255,255,.10);
    background:
        radial-gradient(860px 440px at 8% 0%, rgba(184,10,36,.28), transparent 58%),
        radial-gradient(520px 260px at 92% 12%, rgba(255,255,255,.05), transparent 55%),
        linear-gradient(180deg, rgba(255,255,255,.03), rgba(255,255,255,.02));
    box-shadow: 0 22px 60px rgba(0,0,0,.28);
}

.service-showcase__hero::before{
    content:"";
    position:absolute;
    inset:0;
    background:
        linear-gradient(125deg, rgba(255,255,255,.04), transparent 30%, transparent 70%, rgba(255,255,255,.03));
    pointer-events:none;
}

.service-showcase__hero-grid{
    position:relative;
    z-index:2;
    display:grid;
    grid-template-columns: 1.05fr .95fr;
    gap: 26px;
    align-items: center;
    padding: 34px;
}

.service-showcase__eyebrow{
    margin:0 0 12px;
    display:inline-flex;
    align-items:center;
    gap:10px;
    padding:8px 12px;
    border-radius:999px;
    border:1px solid rgba(255,255,255,.10);
    background:rgba(255,255,255,.04);
    color:var(--muted);
    font-size:12px;
    font-weight:850;
    letter-spacing:.12em;
    text-transform:uppercase;
}

.service-showcase__eyebrow::before{
    content:"";
    width:10px;
    height:10px;
    border-radius:999px;
    background:rgba(184,10,36,.92);
    box-shadow:0 0 0 4px rgba(184,10,36,.16);
}

.service-showcase__content h1{
    margin:0 0 16px;
    max-width:15ch;
    font-size:clamp(30px, 3.6vw, 52px);
    line-height:1.08;
    letter-spacing:-.02em;
}

.service-showcase__lead{
    margin:0 0 24px;
    max-width:60ch;
    color:var(--muted);
    line-height:1.8;
    font-size:16px;
}

.service-showcase__actions{
    display:flex;
    gap:12px;
    flex-wrap:wrap;
}

.service-showcase__points{
    margin-top:28px;
    display:grid;
    grid-template-columns:repeat(3, 1fr);
    gap:14px;
}

.service-showcase__point{
    padding:14px 14px;
    border-radius:20px;
    border:1px solid rgba(255,255,255,.10);
    background:rgba(255,255,255,.03);
    box-shadow: inset 0 1px 0 rgba(255,255,255,.03);
}

.service-showcase__point strong{
    display:block;
    margin-bottom:5px;
    font-size:14px;
}

.service-showcase__point span{
    display:block;
    color:var(--muted);
    font-size:13px;
    line-height:1.55;
}

.service-showcase__demo-note{
    margin-top:14px;
    display:inline-flex;
    align-items:center;
    gap:10px;
    padding:10px 12px;
    border-radius:999px;
    border:1px solid rgba(184,10,36,.18);
    background:rgba(184,10,36,.08);
    color:var(--text);
    font-size:13px;
    font-weight:700;
}

.service-showcase__demo-dot{
    width:10px;
    height:10px;
    border-radius:999px;
    background:rgba(184,10,36,.95);
    box-shadow:0 0 0 4px rgba(184,10,36,.14);
    flex:0 0 auto;
}

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

.service-preview-card{
    display:block;
    border-radius:calc(var(--radius) + 8px);
    border:1px solid rgba(184,10,36,.22);
    background:
        radial-gradient(520px 220px at 20% 0%, rgba(184,10,36,.18), transparent 60%),
        rgba(255,255,255,.04);
    padding:18px;
    transition:
        transform .25s ease,
        border-color .25s ease,
        box-shadow .25s ease,
        background .25s ease;
    box-shadow:
        0 18px 46px rgba(0,0,0,.22),
        0 0 0 1px rgba(184,10,36,.06),
        0 0 40px rgba(184,10,36,.08);
}

.service-preview-card:hover{
    transform:translateY(-4px);
    border-color:rgba(184,10,36,.48);
    background:
        radial-gradient(520px 220px at 20% 0%, rgba(184,10,36,.26), transparent 60%),
        rgba(255,255,255,.05);
    box-shadow:
        0 24px 60px rgba(0,0,0,.30),
        0 0 0 1px rgba(184,10,36,.10),
        0 0 52px rgba(184,10,36,.12);
}

.service-preview-card__top{
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:12px;
    margin-bottom:14px;
}

.service-preview-card__badge{
    display:inline-flex;
    align-items:center;
    justify-content:center;
    padding:7px 11px;
    border-radius:999px;
    background:rgba(184,10,36,.14);
    border:1px solid rgba(184,10,36,.35);
    color:var(--text);
    font-size:12px;
    font-weight:850;
}

.service-preview-card__hint{
    color:var(--muted);
    font-size:13px;
    font-weight:700;
}

.service-preview-card__screen{
    border-radius:22px;
    overflow:hidden;
    border:1px solid rgba(255,255,255,.10);
    background:rgba(15,15,18,.94);
}

.service-preview-card__browser{
    display:flex;
    align-items:center;
    gap:8px;
    height:42px;
    padding:0 14px;
    border-bottom:1px solid rgba(255,255,255,.08);
    background:rgba(255,255,255,.03);
}

.service-preview-card__browser span{
    width:10px;
    height:10px;
    border-radius:999px;
    background:rgba(255,255,255,.18);
}

.service-preview-card__mockup{
    padding:16px;
}

/* Layout boutique */
.service-preview-card__hero{
    display:grid;
    grid-template-columns:1fr .92fr;
    gap:14px;
    margin-bottom:14px;
}

.service-preview-card__hero-text,
.service-preview-card__image,
.service-preview-card__block{
    border-radius:18px;
    background:rgba(255,255,255,.04);
}

.service-preview-card__hero-text{
    padding:16px;
    min-height:220px;
    display:flex;
    flex-direction:column;
    gap:10px;
}

.service-preview-card__line{
    display:block;
    border-radius:999px;
    background:rgba(255,255,255,.10);
}

.service-preview-card__line--small{
    width:34%;
    height:12px;
}

.service-preview-card__line--big{
    width:86%;
    height:28px;
}

.service-preview-card__line--medium{
    width:68%;
    height:16px;
}

.service-preview-card__button{
    display:block;
    width:44%;
    height:40px;
    margin-top:auto;
    border-radius:999px;
    background:linear-gradient(135deg, rgba(184,10,36,.9), rgba(225,80,105,.9));
}

.service-preview-card__image{
    min-height:220px;
    position:relative;
    overflow:hidden;
    display:flex;
    align-items:center;
    justify-content:center;
    text-align:center;
    color:rgba(255,255,255,.72);
    font-size:13px;
    font-weight:800;
}

.service-preview-card__image::before{
    content:"";
    position:absolute;
    inset:0;
    background:
        linear-gradient(135deg, rgba(184,10,36,.28), rgba(255,255,255,.06)),
        radial-gradient(circle at top right, rgba(255,255,255,.12), transparent 30%);
}

.service-preview-card__image span{
    position:relative;
    z-index:2;
    padding:16px;
}

/* Au lieu d’anciens blocs génériques, on les stylise comme un mini catalogue */
.service-preview-card__blocks{
    display:grid;
    grid-template-columns:repeat(3, 1fr);
    gap:14px;
    margin-bottom:14px;
}

.service-preview-card__block{
    min-height:118px;
    position:relative;
    overflow:hidden;
    border:1px solid rgba(255,255,255,.06);
}

.service-preview-card__block::before{
    content:"";
    position:absolute;
    inset:0;
    background:
        linear-gradient(180deg, rgba(255,255,255,.04), rgba(255,255,255,.015));
}

.service-preview-card__block::after{
    content:"";
    position:absolute;
    left:14px;
    right:14px;
    bottom:16px;
    height:28px;
    border-radius:12px;
    background:
        linear-gradient(
            180deg,
            rgba(255,255,255,.08) 0 8px,
            transparent 8px 14px,
            rgba(255,255,255,.06) 14px 20px,
            transparent 20px 28px
        );
}

.service-preview-card__footer{
    display:flex;
    align-items:flex-start;
    justify-content:space-between;
    gap:12px;
    margin-top:14px;
}

.service-preview-card__footer strong{
    font-size:16px;
}

.service-preview-card__footer span{
    max-width:28ch;
    text-align:right;
    color:var(--muted);
    font-size:13px;
    line-height:1.55;
}

/* =========================
   HIGHLIGHT BLOCK
   ========================= */

.service-demo-highlight{
    padding-top:16px;
}

.service-demo-highlight__box{
    border-radius:calc(var(--radius) + 8px);
    border:1px solid rgba(184,10,36,.18);
    background:
        radial-gradient(680px 240px at 8% 0%, rgba(184,10,36,.16), transparent 60%),
        rgba(255,255,255,.03);
    padding:24px;
}

.service-demo-highlight__content{
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:18px;
}

.service-demo-highlight__actions{
    display:flex;
    gap:10px;
    flex-wrap:wrap;
    flex:0 0 auto;
}

/* =========================
   PROOF / BENEFITS / CTA
   ========================= */

.service-proof__grid{
    display:grid;
    grid-template-columns:repeat(3, 1fr);
    gap:16px;
}

.service-proof__icon{
    width:44px;
    height:44px;
    border-radius:14px;
    display:inline-flex;
    align-items:center;
    justify-content:center;
    margin-bottom:14px;
    background:rgba(184,10,36,.12);
    border:1px solid rgba(184,10,36,.24);
    color:var(--text);
    font-size:13px;
    font-weight:900;
    letter-spacing:.08em;
}

.service-proof .card,
.service-benefits .card{
    height:100%;
}

.service-benefits .grid-3{
    gap:16px;
}

.service-final-cta .cta-box{
    border-radius:calc(var(--radius) + 10px);
    border:1px solid rgba(184,10,36,.24);
    background:
        radial-gradient(720px 360px at 12% 0%, rgba(184,10,36,.20), transparent 58%),
        rgba(255,255,255,.03);
}

.service-final-cta .cta-content{
    padding:28px 24px;
}

/* =========================
   GENERIC POLISH
   ========================= */

.section-head{
    position:relative;
}

.section-head::before{
    content:"";
    position:absolute;
    top:-10px;
    left:0;
    width:92px;
    height:2px;
    border-radius:999px;
    background:rgba(184,10,36,.8);
}

.card{
    transition:transform .22s ease, border-color .22s ease, background .22s ease;
}

.card:hover{
    transform:translateY(-3px);
    border-color:rgba(184,10,36,.35);
    background:rgba(255,255,255,.04);
}

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

@media (max-width: 1080px){
    .service-showcase__hero-grid{
        grid-template-columns:1fr;
    }

    .service-showcase__points,
    .service-proof__grid{
        grid-template-columns:1fr;
    }

    .service-preview-card__hero{
        grid-template-columns:1fr;
    }

    .service-preview-card__blocks{
        grid-template-columns:1fr;
    }

    .service-demo-highlight__content{
        flex-direction:column;
        align-items:flex-start;
    }
}

@media (max-width: 720px){
    .service-showcase{
        padding:24px 0 16px;
    }

    .service-showcase__hero-grid{
        padding:22px;
    }

    .service-showcase__content h1{
        max-width:none;
        font-size:clamp(34px, 10vw, 52px);
    }

    .service-preview-card__top,
    .service-preview-card__footer{
        flex-direction:column;
        align-items:flex-start;
    }

    .service-preview-card__footer span{
        text-align:left;
    }

    .service-showcase__points{
        gap:12px;
    }
}