/* ════════════════════════════════════════════════════════════════
   EDUCATED — SUPPORTS DE COURS : LA GRILLE EN CARTES

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

   Principe : le tableau RESTE un tableau. On ne change ni le display
   des lignes ni celui des cellules — DevExpress leur impose sa
   hauteur et son flux, et le lui disputer fait se chevaucher les
   lignes. La carte vit à l'intérieur de la cellule du titre, qui
   s'étend sur toute la largeur ; les autres cellules sont masquées.
   ════════════════════════════════════════════════════════════════ */


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

/* L'en-tête reste dans le DOM : c'est lui qui porte le tri, et les
   boutons de la barre le cliquent. Il ne s'affiche simplement plus. */
.eds-cards thead {
    position: absolute !important;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip: rect(0 0 0 0);
    white-space: nowrap;
}

/* Toutes les cellules d'une ligne de données, sauf celle qui accueille
   la carte : leur contenu y a été recomposé.

   ⚠ La règle exclut les lignes de groupe. Sans cette exclusion, la
   cellule qui porte le nom de la matière — qui n'est ni l'hôte de la
   carte ni le chevron — disparaissait avec les autres, et il ne
   restait qu'un chevron seul au-dessus de chaque section. */
.eds-cards tbody tr:not(.dxbl-grid-group-row) > td:not(.eds-host) {
    display: none !important;
}

/* La ligne vide de fin de grille n'a plus lieu d'être.

   ⚠ On ne masque QUE celle-là. Les lignes marquées
   dxbl-*-virtual-spacer-element sont les cales du défilement virtuel de
   DevExpress : elles réservent la hauteur des lignes non rendues. Les
   masquer fausserait le calcul du défilement dès qu'une matière compte
   plus de documents que l'écran n'en affiche. Elles sont de hauteur nulle,
   donc invisibles de toute façon. */
.eds-cards tr.dxbl-grid-empty-row {
    display: none !important;
}

/* Les bordures du tableau n'ont plus de sens : ce sont les cartes qui
   portent leur propre contour. L'espacement vertical entre elles vient
   de border-spacing, seul moyen d'espacer des lignes de tableau. */
.eds-cards,
.eds-cards table {
    border: 0 !important;
    background: transparent !important;
    border-collapse: separate !important;

    /* border-spacing écartait les cartes de 9 px… mais en ajoutait autant
       AVANT la première ligne et APRÈS la dernière — d'où la bande vide
       sous la barre de tri, redoublée par la cale de défilement virtuel
       qui occupe la première ligne du tableau.

       L'écart passe donc sur la carte elle-même, qui est un simple div :
       il ne s'applique qu'entre les cartes, et nulle part ailleurs. */
    border-spacing: 0 !important;
}

/* ── La largeur suit la fenêtre ──────────────────────────────────
   DevExpress pose la largeur de chaque colonne en style EN LIGNE dans
   le <colgroup> : width: 119px, 187px, 453px… La cellule qui porte la
   carte hérite de la somme de celles qu'elle couvre, et cette somme ne
   bouge pas quand la fenêtre rétrécit — d'où le bouton de
   téléchargement qui sortait de l'écran et la barre de défilement
   horizontale.

   Ces largeurs avaient un sens pour des colonnes ; il n'y a plus
   qu'une cellule visible par ligne. On les libère, et le tableau
   reprend la largeur de son conteneur.

   Le !important est nécessaire : il s'agit de battre un style en ligne,
   et c'est la seule déclaration qui le fasse. */
.eds-cards colgroup col {
    width: auto !important;
}

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

/* Le conteneur de la grille n'a plus de raison de défiler en largeur. */
.eds-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, ce
   n'est pas le dernier qui gagne mais le plus spécifique — la règle
   simple ci-dessous était écrasée, et le titre d'origine restait
   affiché au-dessus de la carte. */
.eds-cards td.eds-host.eds-host.eds-host {
    /* Le texte d'origine du titre est toujours là — Blazor le suit —
       mais réduit à néant. La carte repose ses propres tailles. */
    font-size: 0 !important;
    line-height: 0 !important;
    color: transparent !important;
    padding: 0 !important;
    border: 0 !important;
    background: transparent !important;
    white-space: normal !important;
}

    /* La carte reprend des valeurs lisibles, que la cellule ne lui
       transmet plus. */
    .eds-cards td.eds-host .eds-card {
        font-size: 14px;
        line-height: 1.4;
        color: var(--ink-1, #1E293B);
    }

    /* font-size: 0 ne suffit pas quand XAF enveloppe le libellé dans un
       élément qui refixe sa taille : la valeur héritée est alors
       écrasée, et le titre réapparaissait au-dessus de la carte. On
       masque donc tout enfant de la cellule qui n'est pas la carte. */
    .eds-cards td.eds-host > *:not(.eds-card) {
        display: none !important;
    }


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

.eds-cards .eds-card {
    display: grid;
    min-width: 0;
    grid-template-columns: 44px minmax(0, 1fr) auto;
    grid-template-areas:
        "ext title dl"
        "ext meta  dl";
    align-items: center;
    column-gap: 13px;
    row-gap: 3px;

    background: var(--surface-1, #FFFFFF);
    border: 1px solid var(--line, #E5E7EB);
    border-radius: 13px;
    padding: 12px 14px;
    margin-bottom: 9px;
    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;
}

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


/* ── Le titre ───────────────────────────────────────────────────── */

.eds-cards .eds-title {
    grid-area: title;
    font-size: 14px;
    font-weight: 600;
    line-height: 1.3;
    color: var(--ink-0, #0F172A);

    /* .dxbl-grid-nowrap coupait les titres au milieu : deux supports
       d'une même matière commencent par les mêmes mots, et c'est la fin
       du titre qui les distingue. */
    white-space: normal;
    overflow-wrap: anywhere;
}


/* ── La pastille de format ──────────────────────────────────────── */

.eds-cards .eds-ext {
    grid-area: ext;
    width: 42px;
    height: 42px;
    border-radius: 11px;
    display: grid;
    place-items: center;

    font-family: "JetBrains Mono", ui-monospace, monospace;
    font-size: 9.5px;
    font-weight: 600;
    letter-spacing: 0;

    background: var(--surface-3, #F3F5F9);
    color: var(--ink-3, #94A3B8);
}

    .eds-cards .eds-ext[data-ext="PDF"] {
        background: var(--danger-soft, #FCDCE5);
        color: var(--danger, #E11D48);
    }

    .eds-cards .eds-ext[data-ext="DOC"],
    .eds-cards .eds-ext[data-ext="DOCX"],
    .eds-cards .eds-ext[data-ext="ODT"],
    .eds-cards .eds-ext[data-ext="TXT"] {
        background: var(--info-soft, #DCEAFE);
        color: var(--info, #2563EB);
    }

    .eds-cards .eds-ext[data-ext="PPT"],
    .eds-cards .eds-ext[data-ext="PPTX"] {
        background: var(--warning-soft, #FBE9CC);
        color: var(--warning, #B45309);
    }

    .eds-cards .eds-ext[data-ext="XLS"],
    .eds-cards .eds-ext[data-ext="XLSX"],
    .eds-cards .eds-ext[data-ext="CSV"] {
        background: var(--success-soft, #D0F4E2);
        color: var(--success, #059669);
    }

    .eds-cards .eds-ext[data-ext="ZIP"],
    .eds-cards .eds-ext[data-ext="RAR"],
    .eds-cards .eds-ext[data-ext="7Z"] {
        background: var(--surface-3, #F3F5F9);
        color: var(--ink-2, #475569);
    }


/* ── La ligne de méta ───────────────────────────────────────────── */

.eds-cards .eds-meta {
    grid-area: meta;
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 8px;
    min-width: 0;
}

.eds-cards .eds-tag {
    font-family: "JetBrains Mono", ui-monospace, monospace;
    font-size: 10px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: .04em;
    color: var(--ink-2, #475569);
    background: var(--surface-3, #F3F5F9);
    border-radius: 20px;
    padding: 3px 8px;
}

/* « Nouveau » — la seule pastille de couleur pleine de la carte.

   Elle est en vert et non aux couleurs de la marque : le violet sert déjà au
   bouton de téléchargement, et deux violets sur la même ligne se
   concurrenceraient. Le vert dit « bonne nouvelle » sans réclamer le geste.

   Elle vient en tête des métadonnées, avant même le type : c'est la seule
   information qui fait revenir l'apprenant sur cet écran. */
.eds-cards .eds-new {
    font-family: "JetBrains Mono", ui-monospace, monospace;
    font-size: 10px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .04em;
    color: #047857;
    background: #D1FAE5;
    border-radius: 20px;
    padding: 3px 8px;
    white-space: nowrap;
}

.eds-cards .eds-date {
    font-family: "JetBrains Mono", ui-monospace, monospace;
    font-size: 11.5px;
    color: var(--ink-3, #94A3B8);
}

/* La taille : même famille que la date et le nom de fichier, mais un ton
   plus effacé encore — elle ne se lit que lorsqu'on la cherche. */
.eds-cards .eds-size {
    font-family: "JetBrains Mono", ui-monospace, monospace;
    font-size: 11.5px;
    color: var(--ink-4, #CBD5E1);
    white-space: nowrap;
    flex: 0 0 auto;
}

.eds-cards .eds-file {
    font-family: "JetBrains Mono", ui-monospace, monospace;
    font-size: 11.5px;
    color: var(--ink-3, #94A3B8);
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.eds-cards .eds-desc {
    font-size: 12.5px;
    color: var(--ink-2, #475569);
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.eds-cards .eds-none {
    font-size: 12.5px;
    font-style: italic;
    color: var(--ink-3, #94A3B8);
}


/* ── Le bouton de téléchargement ────────────────────────────────── */

.eds-cards .eds-dl {
    grid-area: dl;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 38px;
    height: 38px;
    border-radius: 11px;
    border: 1px solid transparent;
    background: var(--gradient-brand, linear-gradient(135deg, #5955FF 0%, #3B2B9A 100%));
    color: #fff;
    text-decoration: none !important;
    transition: transform .12s ease, box-shadow .12s ease;
}

    .eds-cards .eds-dl svg {
        width: 17px;
        height: 17px;
    }

    .eds-cards .eds-dl:hover {
        box-shadow: 0 6px 16px -8px rgba(31,27,90,.6);
    }

    .eds-cards .eds-dl:active {
        transform: translateY(1px);
    }

    .eds-cards .eds-dl.off {
        background: var(--surface-3, #F3F5F9);
        border-color: var(--line, #E5E7EB);
        color: var(--ink-4, #CBD5E1);
        cursor: default;
    }


/* ── L'en-tête de matière ───────────────────────────────────────── */

.eds-cards tr.dxbl-grid-group-row td.eds-grp-cell.eds-grp-cell {
    /* Le libellé d'origine — « Matière: … (Nombre: 4) » — reste dans le
       DOM, réduit à zéro plutôt que retiré. */
    font-size: 0 !important;
    border: 0 !important;
    background: transparent !important;
    padding: 0 !important;

    /* La cellule s'étire sur toute la hauteur de la bande ; sans
       centrage explicite, son contenu se cale en haut et le nom de la
       matière flotte au-dessus du milieu. */
    display: flex !important;
    align-items: center !important;
}

/* Le nom et le compte, eux, s'alignent sur leur ligne de base l'un par
   rapport à l'autre — deux tailles de texte se lisent mieux ainsi que
   centrées l'une sur l'autre. */
.eds-cards .eds-grp {
    align-self: center;
}

/* ── Qui prend la largeur ────────────────────────────────────────
   Les colonnes étant libérées, le navigateur répartit à sa guise — et
   il doit concilier deux lignes qui n'ont ni le même nombre de cellules
   ni les mêmes portées : l'en-tête de matière (chevron + 6 colonnes) et
   la carte (indentation + sélection + 6 colonnes, décalées d'un cran).
   D'où le nom de matière repoussé vers la droite.

   On tranche plutôt que de laisser arbitrer : la cellule de contenu
   réclame 100 %, celles qui l'encadrent se réduisent à leur contenu.
   Le « width: 1% » est la façon habituelle de dire à un tableau
   « aussi étroit que possible » — il ne sera jamais respecté
   littéralement, seulement compris comme une demande de minimum. */

/* ── La bande de section ─────────────────────────────────────────
   DevExpress pose un fond gris derrière chaque ligne de groupe. J'ai
   cherché à l'enlever pour coller à la maquette, puis j'ai regardé le
   rendu : avec six ou huit matières dans une liste qui défile, cette
   bande sépare les sections mieux qu'un trait, et sans rien ajouter.
   Le rendu réel a raison contre la maquette — que j'ai mise à jour
   dans ce sens.

   Elle passe donc de « reste à supprimer » à « repère assumé » : coins
   arrondis, respiration, et le ton de surface du design system plutôt
   que le gris du composant. */
.eds-cards tr.dxbl-grid-group-row.dxbl-grid-group-row {
    background: var(--surface-3, #F3F5F9) !important;
    border-radius: 10px;
    padding: 9px 13px !important;
    margin-top: 6px;

    /* ⚠ La mise en page de la ligne est ICI, pas dans le script.

       Elle y était, et c'était une erreur : quand DevExpress redessine
       après un repli, la ligne revient non décorée. Tant que le script
       n'a pas repassé — un dixième de seconde plus tard — elle reprend
       sa disposition de tableau, son libellé brut réapparaît poussé à
       droite, et la bande se raccourcit. La feuille, elle, s'applique
       au rendu même.

       Le script ne fait plus que ce que lui seul peut faire : composer
       le libellé propre à partir de « Matière: X (Nombre: 4) ». */
    display: flex !important;
    align-items: center !important;
    width: 100% !important;
}

/* Les cellules sont visées par leur POSITION et non par une classe à
   nous : une ligne fraîchement rendue n'a pas encore nos classes, et
   c'est précisément celle-là qu'il faut habiller. */

.eds-cards tr.dxbl-grid-group-row > td:first-child {
    flex: 0 0 auto !important;
    width: auto !important;
}

.eds-cards tr.dxbl-grid-group-row > td:nth-child(2) {
    flex: 1 1 auto !important;
    width: auto !important;
    min-width: 0 !important;
    text-align: left !important;

    /* Le libellé d'origine ne s'affiche jamais, même le temps d'un
       rendu : c'est lui qui apparaissait à droite dans la vidéo. */
    font-size: 0 !important;
    display: flex !important;
    align-items: center !important;
}

.eds-cards tr.dxbl-grid-group-row > td.dxbl-grid-empty-cell {
    display: none !important;
}

.eds-cards td.eds-host.eds-host.eds-host {
    width: 100% !important;
    text-align: left !important;
}

/* La cellule du libellé, elle, ne réclame PAS 100 % : la règle de
   position ci-dessus lui donne « flex: 1 1 auto; width: auto », et une
   largeur de 100 % en plus du chevron faisait déborder la bande. */

.eds-cards tr.dxbl-grid-group-row td.dxbl-grid-empty-cell {
    width: 0 !important;
    padding: 0 !important;
}

.eds-cards tr.dxbl-grid-group-row td.dxbl-grid-expand-button-cell {
    /* « width: 1% » — la ruse habituelle pour dire à une cellule de tableau
       « aussi étroite que possible » — n'a plus de sens ici : la ligne est
       passée en flex, et 1 % s'y calcule vraiment. La cellule tombait à
       10 px, son bouton en débordait, et le chevron venait se poser SUR la
       première lettre du nom : ce n'était pas un manque d'espacement, mais
       un chevauchement. La largeur est donc laissée au contenu. */
    width: auto !important;
    flex: 0 0 auto !important;

    white-space: nowrap;
    border: 0 !important;
    background: transparent !important;

    /* 12 px entre le chevron et la première lettre du nom.

       Le chevron est un glyphe étroit et sans contour : collé au texte, il
       se lit comme un accident de rendu plutôt que comme une commande.
       L'écart le détache et donne à entendre qu'on peut cliquer dessus. */
    padding: 0 12px 0 0 !important;

    /* Même raison que pour la cellule du libellé : la cellule s'étire sur
       la hauteur de la bande, et son bouton se cale en haut si on ne le
       centre pas. */
    display: flex !important;
    align-items: center !important;
}

/* Le bouton lui-même porte des marges de composant qui décalent le
   chevron de quelques pixels vers le haut. On lui donne au passage une
   surface cliquable carrée : un glyphe de quelques pixels de large est une
   cible étroite, pénible à viser à la souris comme au doigt. */
.eds-cards tr.dxbl-grid-group-row button.dxbl-grid-expand-button {
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    width: 22px !important;
    min-width: 22px !important;
    height: 22px !important;
    margin: 0 !important;
    padding: 0 !important;
    line-height: 1 !important;
    border-radius: 6px;
    color: var(--ink-3, #64748B) !important;
    transition: background-color .12s ease, color .12s ease;
}

.eds-cards tr.dxbl-grid-group-row button.dxbl-grid-expand-button:hover {
    background: rgba(79, 70, 229, .10) !important;
    color: var(--brand, #4F46E5) !important;
}

/* La colonne fantôme de fin de ligne garde sa bordure sur les lignes de
   groupe : c'est le trait qui flottait à droite de chaque matière. */
.eds-cards tr.dxbl-grid-group-row td.dxbl-grid-empty-cell {
    border: 0 !important;
    background: transparent !important;
}

.eds-cards .eds-grp {
    display: inline-flex;
    align-items: baseline;
    gap: 10px;
    line-height: 1.3;
}

.eds-cards .eds-grp-name {
    font-family: "Geist", system-ui, sans-serif;
    font-size: 14.5px;
    font-weight: 700;
    color: var(--ink-0, #0F172A);
}

.eds-cards .eds-grp-n {
    font-family: "JetBrains Mono", ui-monospace, monospace;
    font-size: 11px;
    color: var(--ink-3, #94A3B8);
}


/* ── La barre de tri ────────────────────────────────────────────── */

/* La barre tient sur trois rangées : titre et compte, puces de
   matière, tri. Le retrait gauche aligne l'ensemble sur le bord des
   cartes — sans lui, la première rangée se fait rogner par le bord du
   conteneur de la grille. */
.eds-bar {
    display: flex;
    flex-direction: column;
    gap: 10px;
    padding: 2px 0 12px 6px;
}

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

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

.eds-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;
}

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

.eds-chips:empty,
.eds-sorts:empty {
    display: none;
}

/* Une puce de matière : le nom, et le nombre de documents qu'elle
   contient. Active, elle prend la couleur de la marque. */
.eds-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;
}

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

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

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

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

.eds-bar-label {
    font-family: "JetBrains Mono", ui-monospace, monospace;
    font-size: 10.5px;
    font-weight: 600;
    letter-spacing: .08em;
    text-transform: uppercase;
    color: var(--ink-3, #94A3B8);
    margin-right: 3px;
}

.eds-sort {
    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;
}

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

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


/* ── Téléphone ──────────────────────────────────────────────────── */

@media (max-width: 640px) {

    .eds-cards .eds-card {
        grid-template-columns: 38px minmax(0, 1fr) auto;
        column-gap: 10px;
        padding: 11px 12px;
    }

    .eds-cards .eds-ext {
        width: 36px;
        height: 36px;
        font-size: 9px;
    }

    /* Le nom du fichier passe à la ligne plutôt que de pousser la date
       hors de la carte. */
    .eds-cards .eds-file {
        flex-basis: 100%;
    }

    .eds-cards .eds-dl {
        width: 40px;
        height: 40px;
    }
}