/* =====================================================================
   LA CONSOLE EasyTech, ÉTAGE ABONNÉ (/admin/abonnes, db/1438-1440).

   Sa propre feuille et son propre <link> dans App.razor, après
   modele-erp.css : la règle du dépôt est qu'un écran ne s'ajoute plus à la
   queue du gabarit, où chaque branche entrait en conflit avec toutes les
   autres sur la dernière ligne du fichier et sur la clé de cache partagée
   (CLAUDE.md).

   AUCUNE COULEUR EN DUR : tout passe par les jetons --et-*.
   ===================================================================== */

/* --- Bandeau « pas encore d'étage abonné » ----------------------------- */
.abn-indispo {
    display: flex; gap: 12px; align-items: flex-start;
    padding: 14px 16px; margin-bottom: 16px;
    background: var(--et-neutre-bg); border: 1px solid var(--et-hairline);
    color: var(--et-ink); font-size: 13px;
}
.abn-indispo > i { font-size: 18px; color: var(--et-muted); flex-shrink: 0; }

/* --- La liste ---------------------------------------------------------- */
.abn-nom { font-weight: 600; color: var(--et-ink); }
.abn-activite { font-size: 12px; color: var(--et-muted); margin-top: 1px; }
.abn-echeance { font-size: 11.5px; color: var(--et-muted); margin-top: 2px; }

.abn-pastille {
    display: inline-flex; align-items: center; padding: 2px 7px;
    font-size: 12px; font-weight: 600; white-space: nowrap;
    background: var(--et-neutre-bg); color: var(--et-muted);
}
.abn-pastille.est-ok         { background: var(--et-succes-bg);        color: var(--et-succes-ink); }
.abn-pastille.est-info       { background: var(--et-info-bg);          color: var(--et-form-blue); }
.abn-pastille.est-attention  { background: var(--et-avertissement-bg); color: var(--et-avertissement-ink); }
.abn-pastille.est-danger     { background: var(--et-danger-badge-bg);  color: var(--et-danger-ink); }

/* Les modules souscrits, en jetons courts : une liste séparée par des
   virgules se lit mal en cellule, et un module de plus ne doit pas pousser
   la colonne suivante. */
.abn-module {
    display: inline-block; margin: 1px 3px 1px 0; padding: 1px 6px;
    font-family: var(--et-font-mono); font-size: 11px;
    background: var(--et-neutre-bg); color: var(--et-ink);
}

/* --- La fiche ---------------------------------------------------------- */
.abn-fiche-titre {
    margin: 16px 0 6px; font-size: 11px; font-weight: 700; letter-spacing: .07em;
    text-transform: uppercase; color: var(--et-muted);
}

/* LE PREMIER DOSSIER PORTE LE CODE de l'abonné : on ne le supprime pas sans
   supprimer l'abonné, et l'écran doit le dire avant qu'on essaie. */
.abn-propre {
    display: inline-block; margin-left: 7px; padding: 0 6px;
    font-size: 11px; font-weight: 600;
    background: var(--et-info-bg); color: var(--et-form-blue);
}

.abn-note {
    display: flex; gap: 8px; align-items: flex-start;
    margin-top: 12px; padding: 9px 11px;
    background: var(--et-info-bg); border: 1px solid var(--et-info-bord);
    color: var(--et-ink); font-size: 12.5px; line-height: 1.45;
}
.abn-note > i { flex-shrink: 0; color: var(--et-form-blue); }

/* --- Responsive : paliers du dépôt, géométrie seulement ---------------- */
@media (max-width: 1024px) {
    /* La cible tactile ne descend jamais sous 44 px, et ne rétrécit jamais. */
    .abn-module { padding: 3px 7px; }
}
@media (max-width: 560px) {
    .abn-indispo, .abn-note { padding: 10px 12px; }
}