/* =========================================================
   VENTURI DECO — PAGE SERVICES
   ========================================================= */

/* =========================================================
   INTRODUCTION
   ========================================================= */

.services-intro__grid {
    display: grid;
    grid-template-columns:
        minmax(0, 1.15fr)
        minmax(300px, 0.85fr);

    gap: clamp(
        50px,
        9vw,
        130px
    );

    align-items: start;
}

.services-intro__text {
    padding-top: 25px;
}

.services-intro__text p:first-child {
    margin-bottom: var(--space-md);

    color: var(--color-white);

    font-size: 1.1rem;
}

/* Navigation rapide entre les services */
.services-index {
    display: grid;
    grid-template-columns:
        repeat(
            3,
            minmax(0, 1fr)
        );

    margin-top: var(--space-xl);

    border-top: 1px solid var(--color-border);
    border-left: 1px solid var(--color-border);
}

.services-index__link {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--space-md);

    min-height: 90px;
    padding: var(--space-md);

    border-right: 1px solid var(--color-border);
    border-bottom: 1px solid var(--color-border);

    color: var(--color-white);

    font-family: var(--font-title);
    font-size: 1.25rem;

    transition:
        color var(--transition-fast),
        background-color var(--transition-fast);
}

.services-index__link span {
    color: var(--color-orange);

    font-family: var(--font-body);
    font-size: 0.7rem;
}

.services-index__link:hover {
    background: var(--color-orange);
    color: var(--color-white);
}

.services-index__link:hover span {
    color: var(--color-white);
}

/* =========================================================
   DÉTAIL D’UN SERVICE
   ========================================================= */

.services-list {
    border-top: 1px solid var(--color-border);
}

.service-detail {
    display: grid;
    grid-template-columns:
        minmax(320px, 1fr)
        minmax(0, 1fr);

    gap: clamp(
        45px,
        8vw,
        110px
    );

    align-items: center;

    padding-block: var(--section-spacing);

    border-bottom: 1px solid var(--color-border);
}

/* Alterne la position de l’image */
.service-detail:nth-child(even) .service-detail__media {
    order: 2;
}

.service-detail:nth-child(even) .service-detail__content {
    order: 1;
}

/* Image */
.service-detail__media {
    position: relative;

    min-height: 520px;
    overflow: hidden;

    border-radius: var(--radius-medium);
}

.service-detail__image {
    width: 100%;
    height: 100%;

    object-fit: cover;

    filter:
        brightness(0.9)
        saturate(0.85);

    transition:
        filter var(--transition-slow),
        transform var(--transition-slow);
}

.service-detail:hover .service-detail__image {
    filter:
        brightness(1)
        saturate(1);

    transform: scale(1.035);
}

/* Numéro orange sur l’image */
.service-detail__number {
    position: absolute;
    top: var(--space-md);
    left: var(--space-md);

    display: flex;
    align-items: center;
    justify-content: center;

    width: 58px;
    height: 58px;

    border-radius: 50%;

    background: var(--color-orange);
    color: var(--color-white);

    font-family: var(--font-title);
    font-size: 1.35rem;

    box-shadow: var(--shadow-orange);
}

/* Contenu */
.service-detail__label {
    display: block;

    margin-bottom: var(--space-sm);

    color: var(--color-orange);

    font-size: 0.68rem;
    font-weight: 700;
    letter-spacing: 0.15em;
    text-transform: uppercase;
}

.service-detail__title {
    margin-bottom: var(--space-md);
}

.service-detail__description {
    margin-bottom: var(--space-lg);

    line-height: 1.9;
}

/* Liste des prestations */
.service-detail__features {
    display: grid;
    grid-template-columns:
        repeat(
            2,
            minmax(0, 1fr)
        );

    gap: 12px var(--space-md);

    margin-bottom: var(--space-lg);

    list-style: none;
}

.service-detail__feature {
    position: relative;

    padding-left: 22px;

    color: rgba(255, 255, 255, 0.78);

    font-size: 0.84rem;
}

.service-detail__feature::before {
    content: "";

    position: absolute;
    top: 0.7em;
    left: 0;

    width: 8px;
    height: 2px;

    background: var(--color-orange);
}

/* =========================================================
   ENGAGEMENTS
   ========================================================= */

.services-commitments {
    background: var(--color-surface);
}

.services-commitments__grid {
    display: grid;
    grid-template-columns:
        repeat(
            3,
            minmax(0, 1fr)
        );

    gap: var(--space-md);

    margin-top: var(--space-xl);
}

/* =========================================================
   MATIÈRES ET FINITIONS
   ========================================================= */

.services-materials {
    overflow: hidden;
}

.services-materials__track {
    display: flex;
    gap: var(--space-lg);

    width: max-content;

    padding-block: var(--space-md);

    animation:
        materials-scroll
        28s
        linear
        infinite;
}

.services-materials__item {
    display: inline-flex;
    align-items: center;
    gap: var(--space-lg);

    color: rgba(255, 255, 255, 0.3);

    font-family: var(--font-title);
    font-size:
        clamp(
            2.5rem,
            6vw,
            5rem
        );

    white-space: nowrap;
}

.services-materials__item::after {
    content: "✦";

    color: var(--color-orange);

    font-family: var(--font-body);
    font-size: 1.4rem;
}

@keyframes materials-scroll {
    to {
        transform: translateX(-50%);
    }
}

@media (prefers-reduced-motion: reduce) {
    .services-materials__track {
        width: auto;
        flex-wrap: wrap;

        animation: none;
    }
}