/* 17 — RELIEF (Métiers + À propos + Parcours) */

.c-relief {
    --relief-line: color-mix(in srgb, var(--c-accent-1) 14%, transparent);

    position: relative;
    isolation: isolate;
    overflow: clip;
    background-color: var(--c-bg-3);
}

.c-relief::before,
.c-relief::after {
    content: "";
    position: absolute;
    z-index: -1;
    aspect-ratio: 1;
    border-radius: 50%;
    pointer-events: none;
}

.c-relief::before {
    inset-block-start: var(--space-8);
    inset-inline-end: -14%;
    width: clamp(20rem, 72vw, 60rem);
    border: var(--line) solid var(--relief-line);
}

.c-relief::after {
    inset-block-end: calc(var(--space-16) * -1);
    inset-inline-start: -10%;
    width: clamp(16rem, 48vw, 40rem);
    border: var(--line) dashed var(--relief-line);
}

.c-relief>.c-metiers,
.c-relief>.c-about,
.c-relief>.c-path {
    background-color: transparent;
}

.c-relief>.c-about {
    z-index: 0;
}

.c-relief>.c-metiers,
.c-relief>.c-path {
    z-index: 1;
}