/* =========================
   SERVICES – AJOUTS
   ========================= */

.split {
    display              : grid;
    grid-template-columns: 1.05fr .95fr;
    gap                  : var(--space-4);
    align-items          : center;
}

.split__content {
    max-width     : 70ch;
    min-width     : 360px;
    display       : flex;
    align-items   : center;
    flex-direction: column;
}

.split__media {
    display        : flex;
    justify-content: center;
    align-items    : center;
    width          : 100%;
    height         : 100%;

}

.split.reverse {
    grid-template-columns: .95fr 1.05fr;
}


.services-hero {
    background: var(--white);
    padding   : var(--space-4) 0;
    margin-top: 0;
}

.services-hero__inner {
    text-align   : center;
    max-width    : 60rem;
    margin-inline: auto;
}

.services-hero__inner .lead {
    max-width: 60rem;
}

.services-hero__text {
    margin     : 0;
    margin-top : var(--space-2);
    color      : var(--navy);
    font-size  : clamp(14px, 1.1vw, 16px);
    line-height: 1.5;
}

.cards--services .card {
    text-align: center;
}

.card--link {
    cursor: pointer;
}

.card--link .btn {
    justify-self: center;
}

/* Placeholders spécifiques services */
.ph--wide {
    aspect-ratio: 16 / 9;
}

/* Ancres */
.service-section {
    scroll-margin-top: 120px;
}

.service-kicker {
    margin: 0 0 var(--space-2);
    color : var(--navy);
}

.service-list {
    margin      : 0;
    padding-left: 18px;
    color       : var(--navy);
}

.service-list li {
    margin: 10px 0;
}

@media (max-width: 760px) {

    .service-cta-under,
    .service-cta-under--right {
        display        : flex;
        justify-content: center;
    }
}

/* =========================
   SERVICES – SECTIONS DÉTAILLÉES (BALANCE)
   ========================= */

.service-section .split {
    align-items: start;
    gap        : clamp(18px, 2.4vw, 36px);
}

/* Cas normal : contenu + image (image à droite) */
.service-section .split {
    grid-template-columns: 1fr minmax(340px, 480px);
}

/* Cas reverse : image + contenu (image à gauche) */
.service-section .split.reverse {
    grid-template-columns: minmax(340px, 480px) 1fr;
}

/* Image : on la garde grande en hauteur */
.service-section .ph--tall,
.service-section .ph--wide {
    aspect-ratio: 4 / 3;
    max-height  : 420px;
    /* avant 360 -> plus grande */
}

/* Tablette / mobile : stack */
@media (max-width: 1024px) {
    .split__content {
        order     : 1;
        width     : 100%;
        max-width : unset;
        text-align: center;
    }

    .split__media {
        order: 2;
    }

    .service-section .split,
    .service-section .split.reverse {
        grid-template-columns: 1fr;
    }

    .split__content {
        min-width: 0;
    }

    .service-section .ph--tall,
    .service-section .ph--wide {
        max-height: 340px;
    }

    .split,
    .split.reverse {
        grid-template-columns: 1fr !important;
    }

    .split__content {
        max-width: unset !important;
        width    : 100%;
    }
}

/* =========================
   MIROITERIE – image plus large
   ========================= */

#miroiterie .split {
    grid-template-columns: 1fr minmax(460px, 620px);
}

/* image plus horizontale */
#miroiterie .ph--wide {
    aspect-ratio: 16 / 9;
    /* plus long visuellement */
    max-height  : 360px;
    /* moins haute qu’avant */
}

.bullets {
    list-style    : none;
    padding-left  : 0;
    width         : 100%;
    height        : 100%;
    display       : flex;
    flex-direction: column;
    gap           : 0.5em;
    max-width     : 760px
}

.bullets li {
    margin          : 0;
    display         : flex;
    gap             : 2em;
    align-items     : center;
    padding         : 1em;
    background-color: white;
    border-radius   : 10px;
    color           : var(--navy);
    border          : 1px solid var(--navy);
}

.bullets li i {
    width          : 32px;
    display        : flex;
    justify-content: start;
    align-items    : center;
    color          : var(--navy);
}

h2 {
    text-align: center;
}