/* ════════════════════════════════════════════════════════════════
   EDUCATED — STAGES : LA GRILLE EN CARTES

   Rien ici ne s'applique tant que stages-cards.js n'a pas posé la
   classe .edi-cards sur la grille. Script retiré ou coupé
   (window.EDUCATED_STAGES_CARDS = false), la grille XAF revient
   exactement comme avant.

   Le tableau RESTE un tableau : la carte vit dans la cellule du
   sujet, qui s'étend sur toute la largeur ; les autres cellules sont
   masquées. Et ici la ligne reste CLIQUABLE — elle ouvre la fiche,
   qui porte le parcours complet.
   ════════════════════════════════════════════════════════════════ */


/* ── Ce qui disparaît ───────────────────────────────────────────── */

.edi-cards thead {
    position: absolute !important;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip: rect(0 0 0 0);
    white-space: nowrap;
}

.edi-cards tbody tr > td:not(.edi-host) {
    display: none !important;
}

.edi-cards tr.dxbl-grid-empty-row {
    display: none !important;
}

.edi-cards,
.edi-cards table {
    border: 0 !important;
    background: transparent !important;
    border-collapse: separate !important;
    border-spacing: 0 !important;
}

.edi-cards tbody tr {
    background: transparent !important;
}


/* ── La largeur suit la fenêtre ─────────────────────────────────── */

.edi-cards colgroup col { width: auto !important; }

.edi-cards table {
    width: 100% !important;
    min-width: 0 !important;
    table-layout: auto !important;
}

.edi-cards { overflow-x: hidden !important; }


/* ── La cellule qui porte la carte ──────────────────────────────── */

/* La classe est répétée pour peser plus lourd que grid.css, qui cible
   td.xaf-action avec ses propres !important. Entre deux !important,
   c'est le plus spécifique qui gagne. */
.edi-cards td.edi-host.edi-host.edi-host {
    font-size: 0 !important;
    line-height: 0 !important;
    color: transparent !important;
    padding: 0 !important;
    border: 0 !important;
    background: transparent !important;
    white-space: normal !important;
}

.edi-cards td.edi-host > *:not(.edi-card) {
    display: none !important;
}


/* ── La carte ───────────────────────────────────────────────────── */

.edi-cards .edi-card {
    display: flex;
    flex-direction: column;
    gap: 7px;
    margin: 0 0 11px;
    padding: 15px 17px;
    background: var(--surface-1, #FFFFFF);
    border: 1px solid var(--line, #E5E7EB);
    border-left: 3px solid var(--success, #059669);
    border-radius: 13px;
    box-shadow: 0 1px 2px rgba(15, 23, 42, .05);
    transition: border-color .12s ease, box-shadow .12s ease;
    font-family: "Geist", "Public Sans", system-ui, sans-serif;
    font-size: 13px;
    line-height: 1.45;
    color: var(--ink-1, #1E293B);
    text-align: left;
}

/* Le filet gauche dit le type avant toute lecture : le dossier qui
   demande de l'attention porte la couleur de la marque, les stages
   annuels celle de ce qui est acquis. */
.edi-cards .edi-card.pfe {
    border-left-color: var(--brand, #4F46E5);
}

.edi-cards tr:hover .edi-card {
    border-color: var(--brand-line, #DAD4FF);
    border-left-color: var(--brand, #4F46E5);
    box-shadow: 0 6px 18px -12px rgba(31, 27, 90, .45);
}

/* La ligne ouvre la fiche : le curseur doit le dire. */
.edi-cards tbody tr { cursor: pointer; }

.edi-cards .edi-head {
    display: flex;
    align-items: baseline;
    gap: 9px;
    flex-wrap: wrap;
}

.edi-cards .edi-subject {
    font-size: 15px;
    font-weight: 700;
    line-height: 1.35;
    color: var(--ink-0, #0F172A);
    overflow-wrap: anywhere;
    text-wrap: balance;
}

.edi-cards .edi-kind {
    font-family: "JetBrains Mono", ui-monospace, monospace;
    font-size: 10px;
    font-weight: 700;
    letter-spacing: .06em;
    padding: 2px 8px;
    border-radius: 20px;
    background: var(--surface-3, #F3F5F9);
    color: var(--ink-2, #475569);
    white-space: nowrap;
}

.edi-cards .edi-kind.pfe {
    background: var(--brand-soft-2, #EEEBFF);
    color: var(--brand, #4F46E5);
}

.edi-cards .edi-meta {
    display: block;
    font-size: 12.5px;
    color: var(--ink-2, #475569);
    line-height: 1.5;
    overflow-wrap: anywhere;
}

.edi-cards .edi-meta .dot {
    font-style: normal;
    color: var(--ink-4, #CBD5E1);
    padding: 0 6px;
}

.edi-cards .edi-meta .when {
    font-family: "JetBrains Mono", ui-monospace, monospace;
    font-size: 11.5px;
    font-variant-numeric: tabular-nums;
}


/* ── La frise — PFE seulement ───────────────────────────────────── */

.edi-cards .edi-steps {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-wrap: wrap;
    margin-top: 1px;
}

.edi-cards .edi-dots {
    display: flex;
    align-items: center;
    gap: 4px;
}

.edi-cards .edi-dot {
    width: 7px;
    height: 7px;
    border-radius: 99px;
    background: var(--ink-4, #CBD5E1);
}

.edi-cards .edi-dot.done { background: var(--brand, #4F46E5); }

.edi-cards .edi-dot.now {
    background: var(--brand, #4F46E5);
    box-shadow: 0 0 0 3px var(--brand-soft-2, #EEEBFF);
}

.edi-cards .edi-step-label {
    font-size: 12px;
    font-weight: 600;
    color: var(--brand, #4F46E5);
}

.edi-cards .edi-step-n {
    font-family: "JetBrains Mono", ui-monospace, monospace;
    font-size: 10.5px;
    color: var(--ink-3, #94A3B8);
    font-variant-numeric: tabular-nums;
}


/* ── L'état des autres stages ───────────────────────────────────── */

.edi-cards .edi-badge {
    align-self: flex-start;
    font-family: "JetBrains Mono", ui-monospace, monospace;
    font-size: 10.5px;
    font-weight: 700;
    letter-spacing: .05em;
    padding: 4px 10px;
    border-radius: 20px;
    background: var(--success-soft, #D0F4E2);
    color: var(--success, #059669);
}

.edi-cards .edi-badge.wait {
    background: var(--warning-soft, #FBE9CC);
    color: var(--warning, #B45309);
}

.edi-cards .edi-badge.bad {
    background: var(--danger-soft, #FCDCE5);
    color: var(--danger, #E11D48);
}


/* ── La prochaine échéance ──────────────────────────────────────── */

.edi-cards .edi-next {
    display: flex;
    align-items: baseline;
    gap: 8px;
    flex-wrap: wrap;
    /* Le bandeau se serre sur son contenu. Dans une carte en colonne,
       un enfant s'étire sur toute la largeur par défaut : une échéance
       de trois mots occupait alors la largeur de l'écran et pesait plus
       lourd que le titre. Même geste que pour .edi-badge. */
    align-self: flex-start;
    max-width: 100%;
    margin-top: 3px;
    padding: 8px 11px;
    border-radius: 9px;
    background: var(--brand-soft-2, #EEEBFF);
    color: var(--ink-1, #1E293B);
    font-size: 12.5px;
}

.edi-cards .edi-next b {
    font-family: "JetBrains Mono", ui-monospace, monospace;
    font-size: 10px;
    font-weight: 700;
    letter-spacing: .07em;
    text-transform: uppercase;
    color: var(--brand, #4F46E5);
}


/* ── Pièces du dossier ──────────────────────────────────────────────
   Une MENTION, pas un lien. Le téléchargement passe par la fiche, où
   vit le contrôle métier : l'offrir ici le contournerait. Ni nom de
   fichier, ni icône, qui promettraient un geste qu'on ne rend pas.
   ──────────────────────────────────────────────────────────────────── */

.edi-cards .edi-docs {
    display: flex;
    gap: 7px;
    flex-wrap: wrap;
    margin-top: 4px;
}

.edi-cards .edi-doc {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    font-family: "JetBrains Mono", ui-monospace, monospace;
    font-size: 10.5px;
    font-weight: 600;
    letter-spacing: .03em;
    background: var(--surface-3, #F3F5F9);
    color: var(--ink-2, #475569);
    border-radius: 20px;
    padding: 4px 11px;
}

.edi-cards .edi-doc::before {
    content: "";
    width: 5px;
    height: 5px;
    border-radius: 99px;
    background: var(--success, #059669);
    flex: 0 0 5px;
}


/* ── La barre de l'écran ────────────────────────────────────────── */

.edi-bar {
    display: flex;
    flex-direction: column;
    gap: 10px;
    padding: 2px 0 16px 6px;
}

.edi-bar-top {
    display: flex;
    align-items: center;
    gap: 10px;
    flex-wrap: wrap;
}

.edi-h1 {
    font-family: "Geist", system-ui, sans-serif;
    font-size: 17px;
    font-weight: 700;
    letter-spacing: -.01em;
    color: var(--ink-0, #0F172A);
}

.edi-total {
    font-family: "JetBrains Mono", ui-monospace, monospace;
    font-size: 11px;
    font-weight: 600;
    color: var(--ink-3, #94A3B8);
    background: var(--surface-3, #F3F5F9);
    border-radius: 20px;
    padding: 3px 9px;
    font-variant-numeric: tabular-nums;
}

.edi-chips {
    display: flex;
    align-items: center;
    gap: 7px;
    flex-wrap: wrap;
}

.edi-chips:empty { display: none; }

.edi-chip {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    font-family: "Geist", system-ui, sans-serif;
    font-size: 12.5px;
    font-weight: 600;
    color: var(--ink-2, #475569);
    background: var(--surface-1, #FFFFFF);
    border: 1px solid var(--line, #E5E7EB);
    border-radius: 20px;
    padding: 6px 13px;
    cursor: pointer;
    transition: border-color .12s ease, color .12s ease, background .12s ease;
}

.edi-chip .n {
    font-family: "JetBrains Mono", ui-monospace, monospace;
    font-size: 10.5px;
    opacity: .65;
}

.edi-chip:hover {
    border-color: var(--brand, #4F46E5);
    color: var(--brand, #4F46E5);
}

.edi-chip.on {
    background: var(--brand, #4F46E5);
    border-color: transparent;
    color: #fff;
}

.edi-chip:focus-visible {
    outline: 2px solid var(--brand, #4F46E5);
    outline-offset: 2px;
}


/* ── Étroit ─────────────────────────────────────────────────────── */

@media (max-width: 560px) {
    .edi-cards .edi-card { padding: 13px 14px; }
    .edi-cards .edi-steps { gap: 6px; }
}

@media (prefers-reduced-motion: reduce) {
    .edi-cards .edi-card,
    .edi-chip { transition: none !important; }
}