/* ============================================================
   PAGE PUBLIQUE — NOS SERVICES
   Version plus graphique : fonds, formes, décalages, relief
   ============================================================ */

.services-page {
    background: #f6f1e6;
}

.services-hero .hero-showcase-img {
    object-position: center 54%;
}

/* ---------- grande scène ---------- */

.services-stage {
    position: relative;
    overflow: hidden;
    padding: 36px 0 80px;
    background:
        radial-gradient(circle at 12% 20%, rgba(222, 184, 116, .16) 0, rgba(222, 184, 116, .16) 120px, transparent 121px),
        radial-gradient(circle at 88% 12%, rgba(31, 82, 57, .10) 0, rgba(31, 82, 57, .10) 100px, transparent 101px),
        linear-gradient(180deg, #f5efe2 0%, #efe2c8 100%);
}

.services-blob {
    position: absolute;
    pointer-events: none;
    opacity: .9;
}

.services-blob-one {
    top: 110px;
    left: -70px;
    width: 240px;
    height: 240px;
    border-radius: 56% 44% 62% 38% / 42% 48% 52% 58%;
    background: rgba(32, 78, 53, .10);
}

.services-blob-two {
    right: -80px;
    top: 360px;
    width: 260px;
    height: 260px;
    border-radius: 50%;
    background: rgba(232, 191, 122, .22);
}

.services-blob-three {
    left: 9%;
    bottom: 50px;
    width: 160px;
    height: 70px;
    border-radius: 999px;
    border: 16px solid rgba(255, 255, 255, .42);
    transform: rotate(-18deg);
}

/* ---------- intro ---------- */

.services-intro {
    position: relative;
    z-index: 2;
    margin-bottom: 26px;
}

.services-intro-content {
    position: relative;
    max-width: 760px;
    padding: 34px 36px;
    border-radius: 34px 10px 34px 10px;
    background: #183d2f;
    box-shadow: 0 18px 42px rgba(38, 48, 40, .14);
    color: #fff;
}

.services-intro-content::after {
    content: "";
    position: absolute;
    right: -16px;
    bottom: -16px;
    width: 140px;
    height: 140px;
    border-radius: 32px 8px 32px 8px;
    background: rgba(239, 189, 117, .30);
    z-index: -1;
}

.services-kicker,
.service-label {
    margin: 0 0 9px;
    color: #efbd75;
    font-size: 11px;
    font-weight: 900;
    letter-spacing: .12em;
    text-transform: uppercase;
}

.services-intro-content h2,
.services-ribbon h2 {
    margin: 0;
    font-family: Georgia, "Times New Roman", serif;
    font-style: italic;
    letter-spacing: -.025em;
    line-height: .98;
}

.services-intro-content h2 {
    font-size: clamp(35px, 4vw, 56px);
}

.services-intro-content h2 span,
.services-ribbon h2 span {
    display: block;
    color: #efbd75;
}

.services-intro-content > p:last-child {
    max-width: 540px;
    margin: 18px 0 0;
    color: rgba(255, 255, 255, .84);
    font-size: 14px;
    line-height: 1.65;
}

/* ---------- collage principal ---------- */

.services-collage {
    position: relative;
    z-index: 2;
    display: grid;
    grid-template-columns: repeat(12, 1fr);
    gap: 18px;
    align-items: start;
}

.service-panel {
    position: relative;
    overflow: visible;
}

.service-panel::before {
    content: "";
    position: absolute;
    inset: 18px -10px -14px 18px;
    z-index: 0;
    border-radius: 28px 10px 28px 10px;
    background: rgba(28, 65, 45, .10);
    transform: rotate(-2.5deg);
}

.service-panel > * {
    position: relative;
    z-index: 1;
}

.service-panel-click {
    grid-column: 1 / span 7;
}

.service-panel-click::before {
    background: rgba(28, 65, 45, .14);
}

.service-panel-chicken {
    grid-column: 8 / span 5;
    margin-top: 54px;
}

.service-panel-chicken::before {
    background: rgba(184, 129, 63, .20);
    transform: rotate(2deg);
}

.service-panel-bread {
    grid-column: 1 / span 4;
    margin-top: -26px;
}

.service-panel-bread::before {
    background: rgba(230, 202, 145, .50);
    transform: rotate(-3deg);
}

.service-panel-pickup {
    grid-column: 5 / span 4;
    margin-top: 18px;
}

.service-panel-pickup::before {
    background: rgba(195, 177, 226, .20);
    transform: rotate(2.2deg);
}

.service-panel-special {
    grid-column: 9 / span 4;
    margin-top: -26px;
}

.service-panel-special::before {
    background: rgba(22, 62, 43, .18);
    transform: rotate(-2deg);
}

/* ---------- cartes ---------- */

.service-panel-media,
.service-panel-body {
    overflow: hidden;
    border: 1px solid rgba(29, 51, 38, .08);
    box-shadow: 0 14px 32px rgba(37, 47, 40, .10);
}

.service-panel-media {
    border-radius: 28px 10px 0 0;
    background: #d8c89f;
}

.service-panel-body {
    padding: 24px 25px 26px;
    border-top: 0;
    border-radius: 0 0 28px 10px;
    background: #fffdf8;
}

.service-panel-media img {
    width: 100%;
    height: 100%;
    display: block;
    object-fit: cover;
}

.service-panel-click .service-panel-media {
    height: 356px;
}

.service-panel-click .service-panel-media img {
    object-position: center 56%;
}

.service-panel-chicken .service-panel-media {
    height: 220px;
    background: #3a2418;
}

.service-panel-chicken .service-panel-media img {
    object-position: center 58%;
}

.service-panel-bread .service-panel-media,
.service-panel-pickup .service-panel-media,
.service-panel-special .service-panel-media {
    height: 200px;
}

.service-panel-special .service-panel-body {
    background: #173e2e;
}

.service-panel-special .service-label,
.service-panel-special h3 {
    color: #fff;
}

.service-panel-special .service-label {
    color: #efbd75;
}

.service-panel-special .service-panel-body > p:last-of-type {
    color: rgba(255, 255, 255, .82);
}

.service-badge {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 42px;
    height: 28px;
    padding: 0 11px;
    border-radius: 999px;
    background: #183d2f;
    color: #fff;
    font-size: 11px;
    font-weight: 900;
    letter-spacing: .06em;
}

.service-panel-special .service-badge {
    background: #fff;
    color: #173e2e;
}

.service-panel h3 {
    margin: 0;
    color: #173e2e;
    font-family: Georgia, "Times New Roman", serif;
    font-style: italic;
    font-size: clamp(27px, 2.6vw, 38px);
    line-height: 1.02;
}

/* CORRECTION CARTE 05 UNIQUEMENT */
.service-panel.service-panel-special h3 {
    color: #fff;
}

.service-panel-body > p:last-of-type {
    margin: 13px 0 0;
    color: #59635a;
    font-size: 14px;
    line-height: 1.56;
}

.service-action {
    display: inline-flex;
    align-items: center;
    margin-top: 18px;
    padding: 11px 18px;
    border-radius: 999px;
    background: #1f6a47;
    color: #fff;
    text-decoration: none;
    font-size: 13px;
    font-weight: 800;
    box-shadow: 0 8px 18px rgba(31, 106, 71, .20);
}

.service-action:hover {
    opacity: .88;
}

/* ---------- ruban final ---------- */

.services-ribbon {
    position: relative;
    padding: 78px 0 64px;
    background:
        linear-gradient(176deg, #fffdf7 0 62%, #f7f0e3 62% 100%);
}

.services-ribbon::before {
    content: "";
    position: absolute;
    inset: 0 0 auto 0;
    height: 72px;
    background: #efe2c8;
    clip-path: polygon(0 0, 100% 24%, 100% 100%, 0 70%);
}

.services-ribbon-inner {
    position: relative;
    z-index: 1;
    display: grid;
    grid-template-columns: 1.05fr .95fr;
    gap: 46px;
    align-items: center;
}

.services-ribbon h2 {
    color: #173e2e;
    font-size: clamp(34px, 4vw, 52px);
}

.services-ribbon-inner > p {
    margin: 0;
    color: #59635a;
    font-size: 15px;
    line-height: 1.72;
}

/* ---------- responsive ---------- */

@media (max-width: 980px) {
    .services-ribbon-inner {
        grid-template-columns: 1fr;
    }

    .services-collage {
        grid-template-columns: 1fr 1fr;
    }

    .service-panel-click {
        grid-column: 1 / -1;
    }

    .service-panel-chicken,
    .service-panel-bread,
    .service-panel-pickup,
    .service-panel-special {
        grid-column: auto;
        margin-top: 0;
    }

    .service-panel-bread,
    .service-panel-special {
        margin-top: 0;
    }
}

@media (max-width: 680px) {
    .services-stage {
        padding-top: 28px;
        padding-bottom: 56px;
    }

    .services-collage {
        grid-template-columns: 1fr;
    }

    .services-intro-content {
        padding: 26px 24px;
        border-radius: 24px 8px 24px 8px;
    }

    .services-intro-content::after,
    .services-blob-three {
        display: none;
    }

    .service-panel-click,
    .service-panel-chicken,
    .service-panel-bread,
    .service-panel-pickup,
    .service-panel-special {
        grid-column: 1 / -1;
    }

    .service-panel::before {
        inset: 12px -6px -10px 10px;
    }

    .service-panel-click .service-panel-media {
        height: 280px;
    }

    .service-panel-media,
    .service-panel-body {
        border-radius: 22px 8px 0 0;
    }

    .service-panel-body {
        border-top: 0;
        border-radius: 0 0 22px 8px;
    }

    .service-panel-bread .service-panel-media,
    .service-panel-pickup .service-panel-media,
    .service-panel-special .service-panel-media,
    .service-panel-chicken .service-panel-media {
        height: 190px;
    }

    .services-ribbon {
        padding-top: 62px;
    }
}