/* ============================================
   Services — la méthode, puis l'appel final
   La méthode : quatre étapes réelles, chacune dans une petite carte
   blanche, reliées par la ligne de points du bureau (la seule
   numérotation du site), le numéro sur une touche de la teinte de son
   étape (data-tint : vert, ciel, jaune, rouge). L'appel final, en
   rose : l'icône Mail en tuile d'app, la question, deux touches.
   ============================================ */

.svc-method {
    padding-top: var(--section);
}

.svc-steps {
    position: relative;
    display: grid;
    gap: 14px;
    margin-top: clamp(36px, 5vw, 56px);
    list-style: none;
}

.svc-step {
    position: relative;
    display: grid;
    grid-template-columns: 40px minmax(0, 1fr);
    column-gap: 16px;
    align-items: start;
    align-content: start;
    padding: 20px;
    border-radius: var(--r-panel);
    background: var(--paper);
    box-shadow: 0 0 0 var(--hair) var(--edge), var(--relief), var(--shadow-soft);
}

/* Le numéro : une petite tuile carrée, comme une app. */
.svc-step__num {
    grid-row: span 2;
    display: grid;
    place-items: center;
    width: 40px;
    aspect-ratio: 1;
    background: var(--app-clear);
    -webkit-mask: var(--icon-shape) center / 100% 100% no-repeat;
    mask: var(--icon-shape) center / 100% 100% no-repeat;
    box-shadow: inset 0 0 0 var(--hair) var(--edge), var(--relief);
    font-family: var(--font-mono);
    font-size: var(--t-small);
}

.svc-step[data-tint] .svc-step__num {
    background: var(--key-klein);
    box-shadow: inset 0 0 0 var(--hair) var(--klein-deep), inset 0 1px 0 color-mix(in oklch, var(--on-klein) 34%, transparent);
    color: var(--on-klein);
}

.svc-step__name {
    font-size: 1.05rem;
    font-weight: var(--w-medium);
    line-height: 1.3;
}

.svc-step__line {
    margin-top: 4px;
    font-size: var(--t-small);
    line-height: 1.5;
    text-wrap: pretty;
}

/* Ordinateur : quatre colonnes ; une ligne de points relie chaque
   tuile numérotée à la suivante (22 px de retrait, 40 px de tuile,
   18 px d'écart entre les colonnes). */
@media (min-width: 900px) {
    .svc-steps {
        grid-template-columns: repeat(4, minmax(0, 1fr));
        gap: 18px;
    }

    .svc-step:not(:last-child)::after {
        content: '';
        position: absolute;
        top: 43px;
        left: 72px;
        right: -30px;
        border-top: 2px dotted var(--line-strong);
    }

    .svc-step {
        grid-template-columns: 1fr;
        row-gap: 0;
        padding: 24px 22px 26px;
        background: transparent;
        box-shadow: none;
    }

    .svc-step__num {
        grid-row: auto;
        margin-bottom: 18px;
    }

    .svc-step__line {
        color: var(--ink-muted);
    }
}

/* ── L'appel final ── */
.svc-end {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 16px;
    padding-top: var(--section);
    text-align: center;
}

/* L'icône Mail : la tuile d'app de la page (page-services-base.css),
   en grand, à la teinte du bloc. */
.svc-end__icon {
    --app-size: 72px;
    filter: drop-shadow(0 1px 1px var(--app-shade)) drop-shadow(0 8px 16px var(--app-shade));
}

.svc-end__title {
    font-size: clamp(2rem, 5vw, 3.4rem);
    font-weight: var(--w-medium);
    line-height: 1.1;
    letter-spacing: var(--track-optical);
    text-wrap: balance;
}

.svc-end__note {
    color: var(--ink-muted);
}

.svc-end__actions {
    display: flex;
    flex-direction: column;
    align-items: stretch;
    gap: 12px;
    width: min(100%, 300px);
    margin-top: 8px;
}

@media (min-width: 600px) {
    .svc-end__actions {
        flex-direction: row;
        justify-content: center;
        width: auto;
        gap: 16px;
    }
}