/* Refuge : composants propres (en plus d'admin.css, repris de Balise et de Topo) */


.link-btn { border: 0; background: none; padding: 0; font: inherit; font-weight: 600; color: var(--fg); text-decoration: underline; cursor: pointer; }
.pop-link { display: block; font: 600 13.5px/1.2 var(--font); padding: 9px 10px; text-decoration: none; }
.pop-link:hover { background: var(--bg-2); }
.notice { border: 1px solid var(--line-strong); background: var(--paper); padding: 12px 16px; margin: 0 0 16px; font-size: 14px; border-left: 4px solid var(--ink); }
.notice-warn { border-left-color: var(--warn); background: var(--warn-bg); }
.sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.spread { justify-content: space-between; align-items: center; }
.toolbar { display: flex; gap: 10px; flex-wrap: wrap; align-items: center; margin-bottom: 18px; }
.toolbar select { width: auto; min-width: 200px; }
.inline-label { flex-direction: row; align-items: center; gap: 6px; font-weight: 600; }
.inline-label input { width: auto; }
.inline-form-row { display: flex; gap: 8px; flex-wrap: wrap; align-items: center; }
.inline-form-row input:not([type=date]):not([type=checkbox]):not([type=radio]):not([type=hidden]) { flex: 1 1 220px; width: auto; }
.inline-form-row label.check { flex: 0 0 auto; white-space: nowrap; }
.inline-form-row input[type=date] { width: auto; }
.copy-row { display: flex; gap: 8px; margin: 10px 0; }
.copy-row input { font-size: 12.5px; }
.table { width: 100%; border-collapse: collapse; }
.table th { text-align: left; font-size: 12px; text-transform: uppercase; letter-spacing: .06em; color: var(--muted); padding: 10px 8px; border-bottom: 1px solid var(--line-strong); }
.table td { padding: 12px 8px; border-bottom: 1px solid var(--line); vertical-align: middle; }
.table tr:last-child td { border-bottom: 0; }
.table a { text-decoration: none; }
.table .num { text-align: right; }
.t-actions { text-align: right; }
.table-scroll { overflow-x: auto; }
.nowrap { white-space: nowrap; }
.foot-note { margin-top: 12px; }
.kpi-tile { text-decoration: none; color: inherit; }
.kpi-tile.on { border-color: var(--ink); box-shadow: inset 0 0 0 1px var(--ink); }
.kpi-tile b.kpi-money { font-size: 30px; }
.danger { display: flex; flex-direction: column; gap: 10px; align-items: flex-start; }
.danger form { display: flex; flex-direction: column; gap: 4px; }


/* Accueil : les apps de la personne */
.app-cards { display: grid; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); gap: 14px; }
.app-card { display: flex; flex-direction: column; gap: 10px; padding: 22px; background: var(--card); border: 1px solid var(--line-strong); border-radius: 2px; text-decoration: none; color: inherit; transition: background-color .18s, border-color .18s, color .18s; }
.app-logo { display: block; width: 44px; height: 44px; margin-bottom: 4px; }
/* Au survol (et au clavier), la carte prend la couleur de l'app, avec le texte en encre ou en crème selon l'app */
.app-card:hover, .app-card:focus-visible { background: var(--app-bg); border-color: var(--app-bg); color: var(--app-ink); }
.app-card:hover p, .app-card:focus-visible p { color: inherit; opacity: .85; }
.app-card b { font: 900 30px/1 var(--head); font-stretch: 85%; text-transform: uppercase; letter-spacing: -.01em; }
.app-card p { margin: 0; color: var(--muted); font-size: 14px; }
.app-card .app-go { margin-top: auto; font-weight: 700; font-size: 14px; }
.app-card:hover .app-go { text-decoration: underline; text-underline-offset: 3px; }

/* Apps d'une agence (plateforme) : cases à cocher sur une ligne */
.app-checks { display: flex; flex-wrap: wrap; gap: 6px 14px; align-items: center; }
.app-checks label.check { flex-direction: row; align-items: center; gap: 6px; font-weight: 600; }
.app-checks label.check input { width: auto; }
.app-pill { display: inline-block; padding: 2px 8px; border-radius: 2px; background: var(--accent); color: var(--accent-ink); font-size: 12px; font-weight: 700; }
.app-pill.is-off { background: var(--bg-2); color: var(--muted); font-weight: 600; }

/* Clé publique et réglages à coller dans les apps */
.key-box { display: block; width: 100%; padding: 10px 12px; background: var(--paper); border: 1px solid var(--line-mid); font: 12.5px/1.5 ui-monospace, SFMono-Regular, Menlo, monospace; white-space: pre-wrap; word-break: break-all; }

/* Page « pas d'accès » et déconnexion : le texte reste lisible dans la carte de connexion */
.login .card p { margin: 0; }

/* Encadré « Apps » du formulaire « Nouvelle agence » : sans la bordure par défaut du navigateur */
fieldset.app-checks { border: 0; padding: 0; margin: 0; min-width: 0; }
fieldset.app-checks legend { padding: 0; margin: 0 0 6px; width: 100%; }

/* Tableau qui défile (Plateforme) : un menu « ⋯ » ouvert ne doit pas être rogné par le cadre */
.table-scroll:has(details[open]) { overflow: visible; }

/* Apps en ligne auxquelles l'agence n'a pas accès : visibles, grisées, sans lien ni couleur au survol */
.app-card.is-locked { opacity: .55; cursor: default; }
.app-card.is-locked .app-logo { filter: grayscale(1); }
.app-card.is-locked:hover { background: var(--card); border-color: var(--line-strong); color: inherit; }
.app-card.is-locked:hover p { opacity: 1; color: var(--muted); }
.app-locked { margin-top: auto; font-size: 13px; font-weight: 600; color: var(--muted); }

/* Page Plateforme : état des passerelles d'une agence et clés de chiffrement des apps */
.bridge-state { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; margin-top: 8px; }
.bridge-state .pill { white-space: normal; }
.key-row + .key-row { margin-top: 10px; }
.key-row code { font-size: 13px; letter-spacing: .02em; }
.key-row .notice form { margin-top: 8px; }