/* Écran « Comptes » de l'Espace Admin, natif Le Fil (js/render.js : renderComptes, compteAccesRevele ; « À traiter » : js/comptes/a-traiter.js).
   Remplace les règles .compte-* de css/styles.css (supprimées). Jetons --f-* seulement ; boutons, champs et cartes du kit (css/fil-formulaires.css, css/fil-budget.css). */
.fb-carte.compte-form { display: flex; flex-direction: column; gap: 14px; margin: 18px 0 22px; }
.compte-form-h { margin: 0; font: 600 18px/1.3 Inter, system-ui, sans-serif; }
.compte-form-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 12px; }
.compte-field { display: flex; flex-direction: column; gap: 4px; min-width: 0; }
.compte-field > span, .compte-sejours-lbl { color: var(--f-encre-2); font: 500 14px/1.3 Inter, system-ui, sans-serif; }
.compte-submit { align-self: flex-start; min-width: 170px; }
.compte-list { display: flex; flex-direction: column; gap: 8px; }
.fb-carte.compte-row { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 14px; padding: 12px 14px; border-radius: 18px; }
.compte-row-info { display: flex; flex: 1 1 240px; flex-wrap: wrap; align-items: center; gap: 8px 12px; min-width: 0; }
.compte-row-mail { font: 500 16px/1.3 Inter, system-ui, sans-serif; overflow-wrap: anywhere; }
.compte-row-sej { flex-basis: 100%; margin-top: 2px; color: var(--f-encre-3); font: 400 12px/1.4 Inter, system-ui, sans-serif; }
.compte-role-tag { display: inline-block; padding: 4px 10px; border: 1px solid var(--f-filet); border-radius: 99px; color: var(--f-encre-2); font: 500 12px/1.2 Inter, system-ui, sans-serif; }
.compte-role-tag.role-admin { color: var(--f-encre); border-color: var(--f-encre); }
.compte-role-tag.role-directeur { color: var(--f-fait); border-color: var(--f-fait); }
.compte-role-tag.role-organisme, .compte-role-tag.compte-pending-tag { color: var(--f-attention); border-color: var(--f-attention); }
.compte-self { color: var(--f-encre-3); font: 500 12px/1.2 Inter, system-ui, sans-serif; }
.fb-carte.compte-row-pending { border-color: var(--f-attention); }
.compte-row-clickable { cursor: pointer; }
.compte-row-clickable:hover { background: var(--f-surface-2); }

/* Séjours rattachés (création d'un compte) */
.compte-sejours { display: flex; flex-direction: column; gap: 8px; }
.compte-sejours-list { display: flex; flex-wrap: wrap; gap: 8px; }
.compte-sejour-opt { display: inline-flex; align-items: center; gap: 10px; min-height: 44px; padding: 0 14px; border: 1px solid var(--f-filet); border-radius: 14px; background: var(--f-surface); font: 400 14px/1.3 Inter, system-ui, sans-serif; cursor: pointer; }
.compte-sejour-opt:hover { border-color: var(--f-encre-3); }
.compte-sejour-opt input { width: 20px; height: 20px; margin: 0; accent-color: var(--f-encre); }

/* Actions d'une ligne : supprimer, réinitialiser, rôle, valider */
.compte-del, .compte-reset { display: inline-grid; place-items: center; flex: none; min-width: 44px; min-height: 44px; padding: 0 12px; border: 1px solid var(--f-filet); border-radius: 14px; background: var(--f-surface); color: var(--f-encre-2); font: 500 14px/1 Inter, system-ui, sans-serif; cursor: pointer; }
.compte-del:hover:not(:disabled), .compte-reset:hover:not(:disabled) { border-color: var(--f-encre-3); color: var(--f-encre); }
.compte-del:hover:not(:disabled) { color: var(--f-urgent); border-color: var(--f-urgent); }
.compte-del svg { width: 16px; height: 16px; transform: rotate(45deg); }
.compte-reset:disabled { opacity: .5; cursor: default; }
.compte-role-edit { display: inline-flex; align-items: center; gap: 6px; flex: none; }
.fb-saisie.compte-role-select { width: auto; min-width: 0; }
.compte-role-save { min-width: 76px; }
.compte-valider { flex: none; min-height: 44px; padding: 0 16px; border: 1px solid var(--f-encre); border-radius: 14px; background: var(--f-encre); color: var(--f-fond); font: 600 14px/1 Inter, system-ui, sans-serif; cursor: pointer; }
.compte-valider:disabled { opacity: .5; cursor: default; }

/* Accès révélé : montré une seule fois, jamais relisible après fermeture */
.compte-mdp { display: flex; flex-direction: column; gap: 10px; margin: 6px 0 14px; padding: 14px; border: 1px solid var(--f-encre); border-radius: 18px; background: var(--f-surface-2); }
.compte-mdp-h { margin: 0; font: 600 16px/1.3 Inter, system-ui, sans-serif; overflow-wrap: anywhere; }
.compte-mdp-val { word-break: break-all; user-select: all; font: 600 18px/1.3 Inter, system-ui, sans-serif; font-variant-numeric: tabular-nums; }
.compte-mdp-actions { display: flex; flex-wrap: wrap; gap: 8px; }
.compte-mdp-note { margin: 0; color: var(--f-encre-2); font: 400 14px/1.5 Inter, system-ui, sans-serif; }