/* Mon compte et Paramètres généraux */

.settings-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; align-items: start; }
.settings-grid .span-2 { grid-column: 1 / -1; }
.settings-body { display: flex; flex-direction: column; gap: 16px; padding: 18px 20px 20px; }
.settings-body .field small, .settings-body label small { font-weight: 400; color: var(--muted); }
.card-head h2 { display: flex; align-items: center; gap: 9px; font-size: 15px; }
.card-head h2 .ic { width: 18px; height: 18px; color: var(--primary); }

.profile-card { grid-column: 1 / -1; display: flex; align-items: center; gap: 20px; padding: 22px 24px; overflow: hidden; position: relative; }
.profile-card::before {
  content: ""; position: absolute; inset: 0 0 auto auto; width: 320px; height: 320px; border-radius: 50%; transform: translate(35%, -55%);
  background: radial-gradient(circle, color-mix(in srgb, var(--primary) 22%, transparent), transparent 70%); pointer-events: none;
}
.profile-card h2 { font-size: 20px; }
.profile-card p { margin: 2px 0 4px; }
.avatar.xl {
  width: 72px; height: 72px; font-size: 24px; color: #fff;
  background: linear-gradient(135deg, var(--primary), #6a5cff); box-shadow: 0 8px 24px color-mix(in srgb, var(--primary) 35%, transparent);
}

.switch-row { display: flex; align-items: center; justify-content: space-between; gap: 16px; cursor: pointer; }
.switch-row > span:first-child { display: flex; flex-direction: column; gap: 2px; }
.switch-row strong { font-size: 14px; font-weight: 600; }
.switch-row small { color: var(--muted); font-size: 12.5px; font-weight: 400; }
input.switch {
  appearance: none; flex: none; position: relative; width: 44px; height: 26px; padding: 0; margin: 0; border: 0; border-radius: 99px;
  background: var(--border); cursor: pointer; transition: background .25s var(--ease-out);
}
input.switch::after {
  content: ""; position: absolute; top: 3px; left: 3px; width: 20px; height: 20px; border-radius: 50%; background: #fff;
  box-shadow: 0 1px 3px rgb(0 0 0 / .3); transition: transform .3s var(--ease-spring), width .2s;
}
input.switch:checked { background: var(--primary); }
input.switch:checked::after { transform: translateX(18px); }
input.switch:active::after { width: 24px; }
input.switch:checked:active::after { transform: translateX(14px); }
input.switch:focus-visible { outline: 2px solid var(--primary); outline-offset: 2px; }

.theme-pick { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; }
.theme-opt {
  display: flex; flex-direction: column; align-items: flex-start; gap: 2px; padding: 10px; border-radius: 12px;
  border: 2px solid var(--border); background: var(--surface); color: var(--text); font: inherit; text-align: left; cursor: pointer;
  transition: border-color .2s, transform .2s var(--ease-out), box-shadow .2s;
}
.theme-opt:hover { transform: translateY(-2px); }
.theme-opt.on { border-color: var(--primary); box-shadow: 0 0 0 4px color-mix(in srgb, var(--primary) 15%, transparent); }
.theme-opt small { color: var(--muted); font-size: 11.5px; }
.theme-thumb { display: grid; grid-template-columns: 1fr 2fr; grid-template-rows: 1fr 1fr; gap: 4px; width: 100%; height: 58px; padding: 6px; border-radius: 8px; margin-bottom: 6px; }
.theme-thumb i { border-radius: 4px; }
.theme-thumb i:first-child { grid-row: 1 / 3; }
.t-light { background: #f5f6fa; } .t-light i { background: #fff; box-shadow: 0 1px 2px rgb(0 0 0 / .08); } .t-light i:nth-child(2) { background: #2f5bea; }
.t-dark { background: #0d111a; } .t-dark i { background: #1c2433; } .t-dark i:nth-child(2) { background: #5b80ff; }
.t-auto { background: linear-gradient(135deg, #f5f6fa 50%, #0d111a 50%); }
.t-auto i { background: rgb(128 140 160 / .35); } .t-auto i:nth-child(2) { background: #2f5bea; }

.mfa-status { display: flex; align-items: center; gap: 14px; padding: 14px; border-radius: 12px; background: var(--warn-soft); }
.mfa-status.on { background: var(--success-soft); }
.mfa-status small { display: block; color: var(--muted); font-size: 12.5px; }
.mfa-icon { display: grid; place-items: center; flex: none; width: 42px; height: 42px; border-radius: 12px; background: var(--surface); color: var(--warn); }
.mfa-status.on .mfa-icon { color: var(--success); animation: popIn .5s var(--ease-spring) .3s both; }
.btn.ghost.danger { color: var(--danger); background: transparent; border-color: transparent; }
.btn.ghost.danger:hover { background: var(--danger-soft); }
.badge .ic { width: 12px; height: 12px; margin-right: 3px; vertical-align: -1px; }
.badge.success, .badge.warn { white-space: nowrap; }

.meter { height: 8px; border-radius: 99px; background: var(--surface-2); overflow: hidden; }
.meter span { display: block; height: 100%; width: var(--p); border-radius: inherit; background: linear-gradient(90deg, var(--success), #22d3ee); }

.mfa-users { list-style: none; margin: 0; padding: 6px 8px; }
.mfa-users li { display: flex; align-items: center; gap: 12px; padding: 9px 12px; border-radius: 10px; transition: background .15s; }
.mfa-users li:hover { background: var(--surface-2); }
.mfa-users .grow { flex: 1; min-width: 0; }
.mfa-users strong, .mfa-users small { display: block; }
.mfa-users small { color: var(--muted); font-size: 12px; }
.btn-ph { width: 94px; }

.save-bar {
  position: sticky; bottom: 16px; z-index: 5; display: flex; align-items: center; gap: 12px; padding: 12px 16px;
  border: 1px solid var(--border); border-radius: 14px; background: color-mix(in srgb, var(--surface) 85%, transparent);
  backdrop-filter: blur(10px); box-shadow: 0 10px 30px rgb(15 23 42 / .12);
}
.save-bar [data-dirty] { display: inline-flex; align-items: center; gap: 6px; color: var(--warn); animation: fadeSlide .3s var(--ease-out); }
.save-bar [data-dirty][hidden] { display: none; }
.save-bar .ic { width: 15px; height: 15px; }

.auto-note { display: inline-flex; align-items: center; gap: 6px; color: var(--muted); font-size: 12.5px; }
.auto-note .ic { width: 15px; height: 15px; }

/* Double authentification */
.mfa-card { text-align: left; display: flex; flex-direction: column; gap: 12px; }
.mfa-card > .logo, .mfa-card > h1, .mfa-card > .sub { text-align: center; }
.mfa-card .sub { margin-bottom: 6px; }
.logo.success { background: linear-gradient(135deg, var(--success), #22d3ee); animation: popIn .6s var(--ease-spring); }
.btn.block { width: 100%; height: 44px; font-size: 15px; }
.link-btn { border: 0; background: none; color: var(--primary); font: inherit; font-weight: 600; cursor: pointer; padding: 4px; }
.link-btn.muted { color: var(--muted); }
.link-btn:hover { text-decoration: underline; }
input.otp {
  text-align: center; font-size: 26px; font-weight: 700; letter-spacing: .35em; padding: 12px; margin-top: 8px;
  font-variant-numeric: tabular-nums; font-family: ui-monospace, "Cascadia Mono", Consolas, monospace;
}
input.otp.recovery-input { font-size: 20px; letter-spacing: .12em; }
.mfa-steps { margin: 0; padding-left: 20px; display: flex; flex-direction: column; gap: 12px; font-size: 13.5px; }
.mfa-steps li::marker { color: var(--primary); font-weight: 700; }
.qr { display: grid; place-items: center; margin: 10px 0 6px; }
.qr svg { width: 180px; height: 180px; padding: 8px; border-radius: 14px; background: #fff; box-shadow: var(--shadow); animation: popIn .5s var(--ease-spring); }
code.secret { padding: 2px 6px; border-radius: 6px; background: var(--surface-2); font-size: 12.5px; user-select: all; }
.recovery { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; list-style: none; margin: 4px 0; padding: 0; }
.recovery li { padding: 8px; border-radius: 9px; background: var(--surface-2); text-align: center; font-size: 15px; animation: rise .4s var(--ease-out) both; animation-delay: calc(var(--i) * 50ms); }

@media (max-width: 860px) {
  .settings-grid { grid-template-columns: 1fr; }
  .theme-pick { grid-template-columns: 1fr 1fr 1fr; }
  .profile-card { flex-direction: column; text-align: center; }
  .profile-card .chips { justify-content: center; }
  .skeleton .sk-row { grid-template-columns: 1fr 1fr; }
}