/*
|--------------------------------------------------------------------------------------------------
| LA FEUILLE DU MODULE DOCUMENTAIRE
|--------------------------------------------------------------------------------------------------
|
| ⚠️ POURQUOI DU CSS PUR, ET PAS DES UTILITAIRES TAILWIND. Une classe utilitaire posée depuis un
| PAQUET n'existe que si l'hôte a recompilé sa feuille en balayant `vendor/groupe/*`. Mesuré le
| 20/09/2026 : les variantes `sm:` dont cet écran a besoin sont ABSENTES de la feuille de Coste et
| PARTIELLEMENT absentes de celle de Basalte. Une classe absente ne peint rien et ne lève rien :
| l'écran ne casse pas, il se décale — et personne ne le rapporte comme un défaut de style.
|
| Écrit ici, le comportement voyage avec le paquet et vaut sur les deux ERP par une montée de
| version, sans qu'aucun hôte n'ait à recompiler quoi que ce soit.
|
| ⚠️ ET LES COULEURS VIENNENT DE LA PALETTE DE L'HÔTE (`var(--gray-400)`), jamais d'une teinte
| écrite ici : la charte de Coste n'est pas celle de Basalte.
*/

/*
| UNE LIGNE DE LA GED : le nom à gauche, les actions à droite.
|
| ⚠️ SUR UN TÉLÉPHONE, ELLE S'EMPILE — ET C'EST LE DÉFAUT QUE MATTHIEU A PHOTOGRAPHIÉ LE 20/09/2026.
| La ligne était un `flex` horizontal dont le bloc d'actions refusait de rétrécir : sur 390 px,
| « Renommer Déplacer Supprimer » mangeait la largeur et le nom du dossier tombait à « a.. ».
| Pire, les compteurs refusaient eux aussi de rétrécir À L'INTÉRIEUR du bouton : ils débordaient et
| passaient SOUS les actions, ce qui donnait à lire « 0 fichierRenommer ».
|
| La règle de la maison tranche dans le même sens : blocs EMPILÉS, jamais côte à côte.
*/
.ged-ligne {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.75rem;
    padding-top: 0.5rem;
    padding-bottom: 0.5rem;
}

.ged-ligne__titre {
    display: flex;
    min-width: 0;
    flex: 1 1 auto;
    align-items: center;
    gap: 0.5rem;
    text-align: left;
}

/*
| Le nom prend la place restante et se coupe proprement, au lieu d'être écrasé à deux lettres.
|
| ⚠️ LA BASE EST `0`, ET PAS `auto` : avec une base intrinsèque, un conteneur qui a le droit de
| passer à la ligne (`flex-wrap`, nécessaire pour renvoyer les compteurs dessous) RENVOIE le nom à
| la ligne suivante au lieu de le rétrécir — l'icône restait alors seule sur sa ligne, au-dessus du
| nom. Mesuré sur « 04. Coste Capital Corporate Services Ltd » à 375 px.
*/
.ged-ligne__nom {
    min-width: 0;
    flex: 1 1 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.ged-ligne__detail {
    flex: 0 0 auto;
    font-size: 0.75rem;
    line-height: 1rem;
    color: var(--gray-400, #9ca3af);
}

.ged-ligne__actions {
    display: flex;
    flex: 0 0 auto;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.25rem 0.75rem;
}

/*
| ⚠️ LE SEUIL EST 768 px, celui de `md` chez Tailwind, et non 640 px. Cet écran porte jusqu'à QUATRE
| actions sur la ligne d'un fichier (« Marquer temporaire » en plus) : à 700 px elles tiennent encore
| côte à côte du nom, mais de justesse, et le nom redevient illisible.
*/
@media (max-width: 767px) {
    .ged-ligne {
        flex-direction: column;
        align-items: stretch;
        gap: 0.25rem;
    }

    .ged-ligne__titre {
        flex-wrap: wrap;
    }

    /* Les compteurs et les mentions passent sur leur PROPRE ligne, sous le nom. */
    .ged-ligne__detail {
        flex: 1 1 100%;
    }

    .ged-ligne__actions {
        justify-content: flex-start;
    }
}