/* settings.css — Réglages (Mon compte, Membres, Clés API, Intégrations), loaded after charte.css and before soft.css.
   Le second volet reprend celui du CRM (.crm-nav). Membres : la carte « Inviter un membre », le lien montré une fois, la
   liste. Clés API : le formulaire en cases groupées, le jeton montré une fois, la liste. Intégrations : « Connecter un agent ». */

.members-section { display:grid; gap:16px; margin:0 0 18px; }

/* ——— Inviter un membre ——— */
.member-invite-head { display:flex; align-items:center; gap:14px; margin-bottom:18px; }
.member-invite-head img.clay { width:48px; height:48px; object-fit:contain; flex-shrink:0; }
.member-invite-head h2, .member-directory h2 { font-size:17px; font-weight:700; letter-spacing:-.02em; }
.member-invite-head p { margin-top:4px; color:var(--slate); font-size:13.5px; line-height:1.5; }
.member-invite-form { display:grid; grid-template-columns:repeat(3, minmax(0, 1fr)); gap:14px 16px; align-items:start; }
.member-invite-form .field { min-width:0; gap:6px; }
.member-invite-form label { font-size:13px; }
.member-invite-form input { height:44px; font-size:14px; }
.member-invite-form .field-error { margin-top:2px; }
.member-invite-form .btn { grid-column:1 / -1; justify-self:start; }

/* ——— Le lien d'invitation, affiché une fois ——— */
.notice.member-link { display:grid; gap:8px; margin:0; padding:14px 16px; font-size:13px; }
.member-link label { color:inherit; font-size:13px; font-weight:600; }
.member-link input { height:42px; font-family:var(--font-mono); font-size:12.5px; }
.member-link p { margin:0; font-size:12.5px; line-height:1.5; }

/* ——— Les membres ——— */
.member-directory h2 { display:flex; align-items:baseline; gap:8px; margin-bottom:4px; }
.member-directory .member-count { margin:0; color:var(--ash); font-size:13px; font-weight:500; }
.portal-app .member-directory .member-list { margin:0; padding:0; background:none; border:0; border-radius:0; }
.portal-app .member-directory .member-row { flex-wrap:wrap; gap:8px 14px; padding:14px 0; border-top:1px solid var(--hairline); border-bottom:0; }
.portal-app .member-directory .member-row:first-child { border-top:0; }
.member-directory .member-identity strong { font-size:14.5px; font-weight:600; }
.member-directory .member-identity span { overflow-wrap:anywhere; }
.member-actions { display:flex; flex-wrap:wrap; align-items:center; gap:2px; margin-left:auto; }
.member-actions form { margin:0; }
.member-empty { padding:14px 0 2px; color:var(--slate); font-size:14px; }
.member-directory .pagination { margin-top:12px; }

/* ——— Le rôle d'un membre ——— */
.member-role-form { display:flex; align-items:center; gap:4px; margin:0; }
.member-role-form select { height:34px; min-width:150px; font-size:13px; }
.member-role { align-self:center; }
.member-directory .member-role-error { flex-basis:100%; order:10; margin:0; }

/* ——— Clés API ——— */
.keys-section { display:grid; gap:16px; margin:0 0 18px; }
.key-create .member-invite-head img.clay { width:48px; height:48px; object-fit:contain; flex-shrink:0; }
.key-create h2 { font-size:17px; font-weight:700; letter-spacing:-.02em; }
.key-create .member-invite-head p { margin-top:4px; color:var(--slate); font-size:13.5px; line-height:1.5; }
.key-form { display:grid; gap:18px; }
.key-form .field { max-width:420px; gap:6px; }
.key-form input[type=text] { height:44px; font-size:14px; }
.key-form fieldset { margin:0; padding:0; border:0; min-width:0; }
.key-form legend { margin-bottom:8px; font-size:13px; font-weight:600; color:var(--ink); }
.key-form .btn { justify-self:start; }
.key-all { margin-bottom:6px; font-weight:600; }
.key-all small { margin-left:6px; color:var(--ash); font-size:12.5px; font-weight:500; }
.key-groups { display:grid; grid-template-columns:repeat(auto-fill, minmax(220px, 1fr)); gap:10px 24px; }
.key-group-title { margin:6px 0 2px; font-family:var(--font-mono); font-size:11px; letter-spacing:.12em; text-transform:uppercase; color:var(--ash); }
.key-durations { display:flex; flex-wrap:wrap; gap:4px 22px; }
.key-durations legend { flex-basis:100%; }
.key-token code { font-size:12px; }
.key-scope-pills { display:flex; flex-wrap:wrap; gap:4px; flex-basis:100%; margin:0; padding:0; list-style:none; }
.key-dates { display:flex; flex-wrap:wrap; gap:4px 18px; margin:0; color:var(--slate); font-size:12.5px; }
.key-dates div { display:flex; gap:5px; }
.key-dates dt { color:var(--ash); }
.key-dates dd { margin:0; }
.key-row code { font-family:var(--font-mono); font-size:12.5px; }

/* ——— Connecter un agent ——— */
.agent-connect { margin:0 0 18px; }
.agent-connect .member-invite-head img.clay { width:48px; height:48px; object-fit:contain; flex-shrink:0; }
.agent-connect h2 { font-size:17px; font-weight:700; letter-spacing:-.02em; }
.agent-connect .member-invite-head p { margin-top:4px; color:var(--slate); font-size:13.5px; line-height:1.5; }
.agent-facts code, .agent-connect p code { font-family:var(--font-mono); font-size:12.5px; overflow-wrap:anywhere; }
.agent-example-title { margin:18px 0 6px; color:var(--slate); font-size:13px; }
.agent-example { margin:0; padding:14px 16px; overflow-x:auto; border-radius:14px; background:var(--navy-deep, #122433); color:#f4f6fa; font-family:var(--font-mono); font-size:12.5px; line-height:1.6; }
.agent-links { display:grid; gap:6px; margin:16px 0 0; padding:0; list-style:none; font-size:14px; }
.agent-links span { color:var(--slate); font-size:13px; }

@media (max-width:760px) {
  .member-invite-form { grid-template-columns:minmax(0, 1fr); }
  .member-invite-form .btn { justify-self:stretch; }
  .portal-app .member-directory .member-identity { flex-basis:100%; }
  .member-actions { margin-left:-12px; }
  .member-row .member-actions form { width:auto; }
}

/* ——— Double authentification : Mon compte, et la recommandation en tête des pages ——— */
.two-factor h2 { display:flex; align-items:center; gap:10px; }
.two-factor > p { max-width:72ch; color:var(--slate); font-size:14px; line-height:1.55; }
.two-factor-steps { display:grid; gap:18px; margin:6px 0 0; padding-left:20px; }
.two-factor-steps li { padding-left:4px; }
.two-factor-steps p { margin:0 0 10px; font-size:14px; line-height:1.5; }
.two-factor-qr { display:block; width:200px; height:200px; margin:4px 0 10px; padding:10px; border:1px solid var(--hairline); border-radius:12px; background:#fff; }
.two-factor-key { font-family:var(--font-mono); font-size:13px; letter-spacing:.04em; overflow-wrap:anywhere; }
.two-factor-buttons { display:flex; flex-wrap:wrap; gap:8px; }
.two-factor-manage { margin-top:14px; }
.two-factor-codes { margin:14px 0 4px; padding:14px 16px; border-radius:12px; background:var(--orange-tint, #fff4e8); }
.two-factor-codes p { margin:0 0 10px; font-size:13.5px; line-height:1.5; }
.two-factor-codes ul { display:grid; grid-template-columns:repeat(auto-fill, minmax(130px, 1fr)); gap:6px 14px; margin:0; padding:0; list-style:none; }
.two-factor-codes code { font-family:var(--font-mono); font-size:14px; }
.two-factor-banner { display:flex; align-items:center; gap:12px; margin:20px 24px 0 28px; padding:10px 12px 10px 16px; border:1px solid var(--hairline); border-radius:12px; background:var(--surface, #fff); }
.two-factor-banner .ui-icon { flex:none; width:20px; height:20px; color:var(--orange, #ff8a00); }
.two-factor-banner p { flex:1; margin:0; font-size:13.5px; line-height:1.45; }
.two-factor-banner form { margin:0; }
body:has(.live) .two-factor-banner { display:none; }
@media (max-width: 860px) { .two-factor-banner { flex-wrap:wrap; margin:16px 16px 0; } .two-factor-banner p { flex-basis:calc(100% - 32px); } }

/* ——— Notifications : le mobile, puis une ligne par notification, une case par canal ——— */
.notifications > p { max-width:72ch; margin-bottom:14px; color:var(--slate); font-size:14px; line-height:1.55; }
.notifications-form { display:grid; gap:16px; justify-items:start; }
.notifications-phone { width:min(100%, 320px); margin:0; }
.notifications-table { width:100%; border-collapse:collapse; font-size:14px; }
.notifications-table th, .notifications-table td { padding:12px 10px; border-top:1px solid var(--hairline); text-align:center; vertical-align:middle; }
.notifications-table thead th { border-top:0; color:var(--ash); font-size:12px; font-weight:600; letter-spacing:.04em; text-transform:uppercase; }
.notifications-table th[scope="row"], .notifications-table thead th:first-child { padding-left:0; text-align:left; }
.notifications-table th[scope="row"] strong { display:block; font-weight:600; }
.notifications-table th[scope="row"] span { display:block; margin-top:2px; color:var(--slate); font-size:13px; font-weight:400; }
.notifications-table td { width:72px; }
.notifications-table input[type="checkbox"] { width:18px; height:18px; accent-color:var(--orange, #ff8a00); cursor:pointer; }
.notifications-none { color:var(--ash); }
.notifications + .notifications { margin-top:18px; }
.notifications-scroll { overflow-x:auto; }
.notifications-members td { width:auto; min-width:110px; color:var(--slate); font-size:13px; white-space:nowrap; }
.notifications-members thead th { font-size:11px; line-height:1.3; text-transform:none; letter-spacing:0; }
.notifications-off { color:var(--ash); font-size:12.5px; }
.notifications-table .notifications-group th { padding:22px 0 6px; color:var(--ash); font-family:var(--font-mono); font-size:11px; font-weight:500; letter-spacing:.12em; text-align:left; text-transform:uppercase; }
.notifications-table tbody:first-of-type .notifications-group th { padding-top:10px; }
.notifications-members thead th[rowspan] { vertical-align:bottom; }
.notifications-members thead th[scope="colgroup"] { padding:0 10px 8px; border-bottom:1px solid var(--hairline); color:var(--ash); font-family:var(--font-mono); font-size:11px; font-weight:500; letter-spacing:.12em; text-transform:uppercase; }
@media (max-width:760px) {
  .notifications-table th, .notifications-table td { padding:10px 6px; }
  .notifications-table td { width:52px; }
  .notifications-members td { min-width:96px; }
}

/* ——— Copier un secret montré une fois ——— */
.copy-actions { display:flex; flex-wrap:wrap; align-items:center; gap:8px; }
.two-factor-codes .copy-actions { margin-top:12px; }
.copy-status { font-size:12.5px; font-weight:600; }

/* Réglages · Connexions : les clés des outils (lemlist d'abord), les séquences reliées, l'adresse de réception. */
.connection-card + .connection-card { margin-top:16px; }
.connection-card .member-invite-head { align-items:flex-start; }
.connection-state { margin:0 0 0 auto; flex:none; }
.connection-notice { margin:14px 0 0; }
.connection-form { display:flex; flex-wrap:wrap; align-items:flex-start; gap:12px; margin-top:18px; }
.connection-form .field { flex:1 1 320px; margin:0; }
.connection-form .btn { margin-top:26px; }
.connection-remove { display:block; margin-top:10px; }
.connection-links { list-style:none; margin:14px 0 16px; padding:0; border-top:1px solid var(--line); }
.connection-links li { display:grid; grid-template-columns:minmax(0, 1fr) minmax(200px, 320px); gap:8px 16px; align-items:center; padding:10px 0; border-bottom:1px solid var(--line); }
.connection-links label { display:flex; flex-wrap:wrap; align-items:center; gap:8px; font-size:14px; }
.connection-facts { margin:12px 0; color:var(--text-2); font-size:13.5px; }
.connection-quiet { margin:12px 0 0; color:var(--muted); font-size:13.5px; }
@media (max-width: 720px) {
  .connection-links li { grid-template-columns:1fr; }
  .connection-state { margin:0; }
  .connection-card .member-invite-head { flex-wrap:wrap; }
}