/* ============================================================
   Process Steps Custom — styles front-end
   ============================================================ */

.process-steps-custom {
    font-family: var(--primary-font), sans-serif;
    padding: var(--gap-xl) var(--gap-l);
    overflow-x: hidden;
}

/* ── Wrapper timeline ── */
.process-steps-custom__timeline {
    position: relative;
    max-width: 83%;
    margin: 0 auto;
    /* --step-count défini en inline style depuis render.php */
}

/* ─────────────────────────────────────────
   DESKTOP — timeline horizontale
   ───────────────────────────────────────── */

/* Ligne pleine largeur (dépasse à gauche/droite des dots) */
.process-steps-custom__track {
    position: absolute;
    left: 0;
    right: 0;
    top: 6px; /* centre vertical du dot actif (13px / 2) */
    height: 1px;
    background: color-mix(in srgb, var(--color-accent, #8b4f3f) 20%, transparent);
    pointer-events: none;
}

/* Fill animé par JS */
.process-steps-custom__track-fill {
    height: 100%;
    width: 0%;
    background: var(--color-accent, #8b4f3f);
    transition: width 0.35s cubic-bezier(0.4, 0, 0.2, 1);
}

/* Liste d'étapes */
.process-steps-custom__steps {
    display: flex;
    list-style: none;
    margin: 0;
    padding: 0;
    position: relative;
}

/* Étape */
.process-steps-custom__step {
    flex: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    padding: 0 var(--gap-s, 12px);
    position: relative;
}

/* Dot inactif : minuscule point */
.process-steps-custom__dot {
    display: block;
    width: 5px;
    height: 5px;
    border-radius: 50%;
    background: color-mix(in srgb, var(--color-accent, #8b4f3f) 35%, transparent);
    border: none;
    position: relative;
    z-index: 1;
    margin-bottom: var(--gap-m, 20px);
    margin-top: 4px; /* compense la diff de taille avec le dot actif */
    flex-shrink: 0;

    transition:
        width       0.35s cubic-bezier(0.34, 1.56, 0.64, 1),
        height      0.35s cubic-bezier(0.34, 1.56, 0.64, 1),
        margin-top  0.35s cubic-bezier(0.34, 1.56, 0.64, 1),
        background  0.3s ease,
        box-shadow  0.3s ease;
}

/* Dot actif */
.process-steps-custom__step--active .process-steps-custom__dot {
    width: 13px;
    height: 13px;
    margin-top: 0;
    background: var(--color-accent, #8b4f3f);
    box-shadow: 0 0 0 3px color-mix(in srgb, var(--color-accent, #8b4f3f) 20%, transparent);
}

/* Numéro */
.process-steps-custom__number {
    font-size: 1rem;
    font-weight: 700;
    line-height: 1;
    color: var(--color-accent, #8b4f3f);
    margin-bottom: 0.6em;
    letter-spacing: 0.02em;

    opacity: 0.3;
    transform: translateY(4px);
    transition: opacity 0.35s ease, transform 0.35s ease;
}

.process-steps-custom__step--active .process-steps-custom__number {
    opacity: 1;
    transform: translateY(0);
}

/* Titre */
.process-steps-custom__step-title {
    font-size: 1rem;
    font-weight: 700;
    line-height: 1.3;
    color: var(--color-primary, #2c2c2c);
    margin: 0 0 0.4em;

    opacity: 0.25;
    transform: translateY(6px);
    transition: opacity 0.4s ease, transform 0.4s ease;
}

.process-steps-custom__step--active .process-steps-custom__step-title {
    opacity: 1;
    transform: translateY(0);
}

/* Description */
.process-steps-custom__step-desc {
    font-size: 0.875rem;
    line-height: 1.55;
    color: var(--color-primary, #2c2c2c);
    margin: 0;

    opacity: 0.25;
    transform: translateY(6px);
    transition: opacity 0.4s ease, transform 0.4s ease;
}

.process-steps-custom__step--active .process-steps-custom__step-desc {
    opacity: 1;
    transform: translateY(0);
}

/* ─────────────────────────────────────────
   MOBILE — timeline verticale
   ───────────────────────────────────────── */

@media ( max-width: 900px ) {

    .process-steps-custom {
        padding: var(--gap-l) var(--gap-m);
    }

    .process-steps-custom__timeline {
        max-width: 100%;
        overflow-x: visible;
        padding-bottom: 0;
    }

    /* Ligne verticale calée sur le centre de la colonne dot (12px) */
    .process-steps-custom__track {
        left: 11px; /* centre de la colonne dot de 24px, moins 0.5px */
        right: auto;
        top: 0;
        bottom: 0;
        width: 1px;
        height: auto;
    }

    /* Pas de fill animé en vertical */
    .process-steps-custom__track-fill {
        display: none;
    }

    /* Empilement vertical des étapes */
    .process-steps-custom__steps {
        flex-direction: column;
        gap: var(--gap-l, 28px);
    }

    /* Chaque étape : dot à gauche, numéro + desc à droite */
    .process-steps-custom__step {
        display: grid;
        grid-template-columns: 24px 1fr;
        grid-template-rows: auto auto auto;
        column-gap: 16px;
        text-align: left;
        padding: 0;
        align-items: start;
    }

    /* Dot : centré dans sa colonne, aligné en haut */
    .process-steps-custom__dot {
        grid-column: 1;
        grid-row: 1 / 4;
        align-self: start;
        justify-self: center;
        margin-bottom: 0;
        margin-top: 3px;
        transition:
            width      0.35s cubic-bezier(0.34, 1.56, 0.64, 1),
            height     0.35s cubic-bezier(0.34, 1.56, 0.64, 1),
            margin-top 0.35s cubic-bezier(0.34, 1.56, 0.64, 1),
            background 0.3s ease,
            box-shadow 0.3s ease;
    }

    .process-steps-custom__step--active .process-steps-custom__dot {
        margin-top: 0;
    }

    /* Numéro : ligne 1, colonne 2 */
    .process-steps-custom__number {
        grid-column: 2;
        grid-row: 1;
        text-align: left;
        margin-bottom: 4px;
        transform: none;
        transition: opacity 0.35s ease;
    }

    .process-steps-custom__step--active .process-steps-custom__number {
        transform: none;
    }

    /* Titre : ligne 2, colonne 2 */
    .process-steps-custom__step-title {
        grid-column: 2;
        grid-row: 2;
        text-align: left;
        transform: none;
        transition: opacity 0.4s ease;
    }

    .process-steps-custom__step--active .process-steps-custom__step-title {
        transform: none;
    }

    /* Description : ligne 3, colonne 2 */
    .process-steps-custom__step-desc {
        grid-column: 2;
        grid-row: 3;
        text-align: left;
        transform: none;
        transition: opacity 0.4s ease;
    }

    .process-steps-custom__step--active .process-steps-custom__step-desc {
        transform: none;
    }
}