/* ════════════════════════════════════════════════════════════════
   EDUCATED — Frise d'avancement du stage
   Fichier : wwwroot/css/educated-progress.css
   À charger APRÈS le bundle DevExpress et educated-design-tokens.css

   Quatre états, chacun avec sa couleur :
     done      vert   — étape franchie
     current   indigo — étape en cours, marqueur pulsant
     todo      gris   — étape à venir
     rejected  rouge  — dossier refusé à cette étape

   La frise est horizontale par défaut et bascule en vertical dans un
   conteneur étroit (requête de conteneur, pas media query : dans un
   layout XAF à colonnes, la fenêtre est large et la colonne ne l'est pas).
   ════════════════════════════════════════════════════════════════ */


/* ╔══════════════════════════════════════════════════════════════╗
   ║  1. CONTENEUR                                                 ║
   ╚══════════════════════════════════════════════════════════════╝ */

.edu-pg {
    font-family: var(--font-body, "Geist", "Public Sans", system-ui, sans-serif);
    width: 100%;
    box-sizing: border-box;
    padding: 18px 16px 14px;
    background: var(--surface-1, #fff);
    border: 1px solid var(--line, #E5E7EB);
    border-radius: var(--radius-lg, 12px);
    container-type: inline-size;
    container-name: edu-pg;
}


/* ── Barre de progression globale ─────────────────────────────── */
.edu-pg-meter {
    height: 4px;
    border-radius: 999px;
    background: var(--surface-3, #EEF2F6);
    overflow: hidden;
    margin-bottom: 20px;
}

.edu-pg-meter-fill {
    height: 100%;
    border-radius: 999px;
    background: var(--gradient-brand, linear-gradient(90deg, #5955FF 0%, #4338CA 100%));
    transition: width 420ms var(--ease-std, cubic-bezier(.4,0,.2,1));
}


/* ╔══════════════════════════════════════════════════════════════╗
   ║  2. LA FRISE — disposition horizontale                        ║
   ╚══════════════════════════════════════════════════════════════╝ */

.edu-pg-steps {
    display: flex;
    align-items: flex-start;
    list-style: none;
    margin: 0;
    padding: 0;
    gap: 0;
}

.edu-pg-step {
    flex: 1 1 0;
    min-width: 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    position: relative;
    padding: 0 4px;
}

    /* Le trait de liaison : tracé par l'étape, vers la précédente.
       Il prend la couleur de l'étape courante, ce qui remplit la frise
       de gauche à droite au fur et à mesure de l'avancement. */
    .edu-pg-step::before {
        content: "";
        position: absolute;
        top: 15px;                /* moitié de la hauteur du marqueur */
        right: 50%;
        width: 100%;
        height: 2px;
        background: var(--edu-pg-line, var(--line, #E5E7EB));
        z-index: 0;
    }

    .edu-pg-step:first-child::before {
        display: none;
    }


/* ── Marqueur ─────────────────────────────────────────────────── */
.edu-pg-marker {
    position: relative;
    z-index: 1;
    flex: 0 0 30px;
    width: 30px;
    height: 30px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    box-sizing: border-box;
    border-radius: 50%;
    overflow: hidden;
    line-height: 0;
    font-size: 12.5px;
    font-weight: 700;
    background: var(--edu-pg-bg, #fff);
    color: var(--edu-pg-fg, #94A3B8);
    border: 2px solid var(--edu-pg-border, #E5E7EB);
    transition: background 180ms ease, border-color 180ms ease, color 180ms ease;
}

    .edu-pg-marker svg {
        display: block;
        width: 14px;
        height: 14px;
    }

.edu-pg-num {
    line-height: 1;
}


/* ── Libellés ─────────────────────────────────────────────────── */
.edu-pg-text {
    margin-top: 9px;
    display: flex;
    flex-direction: column;
    gap: 2px;
    min-width: 0;
}

.edu-pg-label {
    font-size: 12px;
    font-weight: 600;
    line-height: 1.3;
    letter-spacing: -0.005em;
    color: var(--edu-pg-label, var(--ink-2, #94A3B8));
    overflow-wrap: anywhere;
}

.edu-pg-date {
    font-size: 11px;
    font-weight: 500;
    color: var(--ink-2, #94A3B8);
    font-variant-numeric: tabular-nums;
}


/* ╔══════════════════════════════════════════════════════════════╗
   ║  3. LES ÉTATS — une seule variable par couleur                ║
   ╚══════════════════════════════════════════════════════════════╝ */

/* ── Franchie : vert plein, trait vert ────────────────────────── */
.edu-pg-step.edu-pg-done {
    --edu-pg-bg: var(--success, #059669);
    --edu-pg-fg: #fff;
    --edu-pg-border: var(--success, #059669);
    --edu-pg-line: var(--success, #059669);
    --edu-pg-label: var(--ink-1, #334155);
}

/* ── En cours : indigo, marqueur mis en avant par un halo ─────── */
.edu-pg-step.edu-pg-current {
    --edu-pg-bg: var(--brand, #4F46E5);
    --edu-pg-fg: #fff;
    --edu-pg-border: var(--brand, #4F46E5);
    --edu-pg-line: var(--success, #059669); /* le trait AMONT est franchi */
    --edu-pg-label: var(--brand, #4F46E5);
}

    .edu-pg-step.edu-pg-current .edu-pg-marker {
        box-shadow: 0 0 0 4px var(--brand-soft, #EEEAFF);
        animation: edu-pg-pulse 2.4s ease-in-out infinite;
    }

    .edu-pg-step.edu-pg-current .edu-pg-label {
        font-weight: 700;
    }

@keyframes edu-pg-pulse {
    0%, 100% {
        box-shadow: 0 0 0 4px var(--brand-soft, #EEEAFF);
    }

    50% {
        box-shadow: 0 0 0 7px rgba(79,70,229,.12);
    }
}

/* ── À venir : gris, contour seul ─────────────────────────────── */
.edu-pg-step.edu-pg-todo {
    --edu-pg-bg: var(--surface-1, #fff);
    --edu-pg-fg: #94A3B8;
    --edu-pg-border: var(--line, #E5E7EB);
    --edu-pg-line: var(--line, #E5E7EB);
    --edu-pg-label: var(--ink-2, #94A3B8);
}

/* ── Refusée : rouge ──────────────────────────────────────────── */
.edu-pg-step.edu-pg-rejected {
    --edu-pg-bg: var(--danger, #E11D48);
    --edu-pg-fg: #fff;
    --edu-pg-border: var(--danger, #E11D48);
    --edu-pg-line: var(--danger, #E11D48);
    --edu-pg-label: var(--danger, #E11D48);
}

    .edu-pg-step.edu-pg-rejected .edu-pg-marker {
        box-shadow: 0 0 0 4px var(--danger-soft, #FCDCE5);
    }

    .edu-pg-step.edu-pg-rejected .edu-pg-label {
        font-weight: 700;
    }


/* ╔══════════════════════════════════════════════════════════════╗
   ║  4. CONTENEUR ÉTROIT — bascule en frise verticale             ║
   ╚══════════════════════════════════════════════════════════════╝ */

@container edu-pg (max-width: 560px) {
    .edu-pg-steps {
        flex-direction: column;
        align-items: stretch;
        gap: 0;
    }

    .edu-pg-step {
        flex: 0 0 auto;
        flex-direction: row;
        align-items: flex-start;
        text-align: left;
        gap: 12px;
        padding: 0 0 18px 0;
    }

        .edu-pg-step:last-child {
            padding-bottom: 0;
        }

        /* Le trait devient vertical, tracé vers l'étape suivante */
        .edu-pg-step::before {
            top: 32px;
            bottom: -2px;
            left: 14px;
            right: auto;
            width: 2px;
            height: auto;
        }

        .edu-pg-step:first-child::before {
            display: block;
        }

        .edu-pg-step:last-child::before {
            display: none;
        }

    .edu-pg-text {
        margin-top: 4px;
        padding-bottom: 2px;
    }

    .edu-pg-label {
        font-size: 13px;
    }
}


/* Le trait vertical doit porter la couleur de l'étape SUIVANTE :
   en vertical, il descend au lieu de remonter. On le neutralise sur
   l'étape courante pour éviter un trait vert sous une étape en cours. */
@container edu-pg (max-width: 560px) {
    .edu-pg-step.edu-pg-current::before,
    .edu-pg-step.edu-pg-todo::before {
        background: var(--line, #E5E7EB);
    }

    .edu-pg-step.edu-pg-done::before {
        background: var(--success, #059669);
    }
}


/* ════════════════════════════════════════════════════════════════
   FIN educated-progress.css
   ════════════════════════════════════════════════════════════════ */