/* Elaris — paramètres rangés par catégorie : rail de navigation collant + cartes de section.
   Structure du design Claude Design (templates/, 2026-09-14) dans les tokens Afterglow. */

.set-head h1 { margin: var(--s2) 0 var(--s5); }
.set-layout { display: flex; flex-wrap: wrap; gap: 26px; align-items: flex-start; }

/* ── Rail ── */
.set-rail {
  flex: 1 1 220px; max-width: 246px; min-width: 0; display: flex; flex-direction: column; gap: 4px;
  position: sticky; top: 90px;
}
.set-nav {
  display: flex; align-items: center; gap: 11px; padding: 11px 13px; border-radius: 11px; text-decoration: none;
  font-size: 0.85rem; font-weight: 600; color: var(--ink-dim); transition: background var(--t-fast), color var(--t-fast);
}
.set-nav:hover { color: var(--ink); }
.set-nav.is-on { color: var(--ink); background: var(--accent-soft); box-shadow: inset 0 0 0 1px var(--border-strong); }
.set-nav-dot { width: 6px; height: 6px; border-radius: 50%; background: var(--ink-faint); }
.set-nav.is-on.set-nav-profil .set-nav-dot { background: var(--accent); }
.set-nav.is-on.set-nav-securite .set-nav-dot { background: var(--success); }
.set-nav.is-on.set-nav-parrainage .set-nav-dot { background: var(--tier-l); }
.set-nav.is-on.set-nav-donnees .set-nav-dot { background: var(--ink-soft); }
.set-nav.is-on.set-nav-admin .set-nav-dot { background: var(--tier-e); }
.set-nav-label { flex: 1; min-width: 0; }
.set-nav-badge { padding: 3px 7px; border-radius: 999px; font-size: 0.56rem; letter-spacing: 0.1em; color: var(--ink-soft); background: var(--accent-soft); }
.set-nav-badge.is-warn { color: var(--danger); background: rgba(255, 143, 160, 0.14); }
.set-since { margin-top: 10px; padding: 13px; border-radius: 12px; background: rgba(5, 7, 13, 0.5); box-shadow: inset 0 0 0 1px var(--border); display: flex; flex-direction: column; gap: 6px; }
.set-since strong { font-size: 0.85rem; font-weight: 500; color: var(--ink-soft); font-variant-numeric: tabular-nums; }

/* ── Sections ── */
.set-main { flex: 1 1 460px; min-width: 0; }
.set-sec { display: flex; flex-direction: column; gap: 18px; }
.set-sec[hidden] { display: none !important; }
.set-card { padding: 22px; border-radius: 16px; background: rgba(8, 12, 22, 0.6); box-shadow: inset 0 0 0 1px var(--border); }
.set-card.is-hero { background: linear-gradient(180deg, rgba(20, 31, 54, 0.75), rgba(8, 12, 22, 0.75)); }
.set-card.is-banner {
  display: flex; align-items: center; justify-content: space-between; gap: 14px; flex-wrap: wrap;
  background: linear-gradient(150deg, rgba(58, 92, 150, 0.35), rgba(20, 31, 54, 0.6)); box-shadow: inset 0 0 0 1px var(--border-strong);
}
.set-card.is-banner h2, .set-card-head h2, .set-h { font-size: 1rem; font-weight: 600; color: var(--ink); }
.set-card.is-banner p { margin-top: 5px; font-size: 0.8rem; color: var(--ink-dim); }
.set-card-head { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; flex-wrap: wrap; margin-bottom: 14px; }
.set-card-head.is-inline { justify-content: flex-start; align-items: center; margin-bottom: 0; }
.set-meta { font-size: 0.6rem; letter-spacing: 0.16em; color: var(--ink-faint); }
.set-desc { margin-top: 6px; font-size: 0.8rem; line-height: 1.55; color: var(--ink-dim); }
.set-note { margin-top: 12px; }
.set-h.is-danger { color: var(--danger); }

.set-row { display: flex; align-items: center; justify-content: space-between; gap: 14px; flex-wrap: wrap; margin-top: 10px; }
.set-card > .set-row:first-child { margin-top: 0; }
.set-row-main { display: flex; align-items: center; gap: 10px; min-width: 0; flex: 1 1 240px; }
.set-row-main.is-col { flex-direction: column; align-items: flex-start; gap: 0; }
.set-email { font-size: 0.9rem; overflow: hidden; text-overflow: ellipsis; }
.set-chip { padding: 4px 9px; border-radius: 999px; font-size: 0.58rem; letter-spacing: 0.12em; text-transform: uppercase; white-space: nowrap; color: var(--ink-soft); background: var(--accent-soft); }
.set-chip.is-good { color: var(--success); background: rgba(143, 214, 165, 0.12); }
.set-chip.is-bad { color: var(--danger); background: rgba(255, 143, 160, 0.12); }
.set-chip.is-violet { color: var(--tier-e); background: rgba(179, 86, 255, 0.14); }
.set-divider { margin-top: 18px; padding-top: 18px; border-top: 1px solid var(--border); }

/* ── Formulaires ── */
.set-form { display: flex; flex-direction: column; gap: 12px; }
.set-form .field { margin: 0; }
.set-input { width: 100%; height: 42px; border-radius: 11px; }
.set-btn, .set-btn-primary { align-self: flex-start; border-radius: 10px; }
.set-btn-primary { color: var(--bg); background: var(--accent); border: 1px solid transparent; }
.set-btn-primary:hover { background: #d6e7ff; color: var(--bg); }
.set-btn.is-danger { color: var(--danger); border: 1px solid rgba(255, 143, 160, 0.4); }
.set-secret { display: flex; align-items: center; gap: var(--s2); flex-wrap: wrap; }
.set-secret code, .set-codes { user-select: all; }
.set-arrow { display: inline-block; width: 0; height: 0; border-top: 4px solid transparent; border-bottom: 4px solid transparent; border-left: 6px solid currentColor; }

/* ── Profil ── */
.set-profile { display: flex; align-items: flex-start; gap: 20px; flex-wrap: wrap; }
.set-avatar-col { flex: 0 0 auto; display: flex; flex-direction: column; align-items: center; gap: 9px; }
.set-avatar { box-shadow: 0 0 26px rgba(188, 215, 255, 0.18); transition: transform var(--t-fast), border-color var(--t-fast); }
.set-avatar:hover { transform: scale(1.04); }
.set-avatar-hint { font-size: 0.54rem; letter-spacing: 0.12em; color: var(--ink-faint); text-align: center; }
.set-profile-main { flex: 1 1 240px; min-width: 0; }
.set-name-row { display: flex; align-items: baseline; gap: 10px; flex-wrap: wrap; }
.set-pseudo { font-size: 1.35rem; font-weight: 600; color: var(--ink); }
.set-save-status { font-size: 0.72rem; color: var(--ink-faint); }
.set-label-row { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin: 16px 0 7px; }
.set-label-row label { font-size: 0.74rem; color: var(--ink-dim); }
.set-counter { font-size: 0.64rem; color: var(--ink-faint); font-variant-numeric: tabular-nums; }
.set-counter.is-near { color: var(--tier-l); }

.set-switch-row { display: flex; align-items: center; gap: 11px; margin-top: 14px; cursor: pointer; }
.set-switch-row strong { display: block; font-size: 0.8rem; color: var(--ink); }
.set-switch-row small { display: block; margin-top: 2px; font-size: 0.72rem; color: var(--ink-dim); }
.set-switch-input { position: absolute; opacity: 0; width: 1px; height: 1px; }
.set-switch { flex: 0 0 auto; position: relative; width: 40px; height: 22px; border-radius: 999px; background: rgba(5, 7, 13, 0.8); box-shadow: inset 0 0 0 1px var(--border-strong); transition: background var(--t-fast); }
.set-switch::after { content: ''; position: absolute; top: 3px; left: 3px; width: 16px; height: 16px; border-radius: 50%; background: var(--ink); transition: transform var(--t-fast); }
.set-switch-input:checked + .set-switch { background: rgba(188, 215, 255, 0.45); box-shadow: inset 0 0 0 1px rgba(188, 215, 255, 0.6); }
.set-switch-input:checked + .set-switch::after { transform: translateX(18px); }
.set-switch-input:focus-visible + .set-switch { outline: 2px solid var(--accent); outline-offset: 2px; }

.set-backs { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 84px), 1fr)); gap: 12px; }
.set-backs .sleeve-option { width: 100%; display: flex; flex-direction: column; overflow: hidden; border-radius: 11px; padding: 0; }
.set-backs .sleeve-option:hover { transform: translateY(-4px); }
.set-back-name { padding: 5px 6px; font-size: 0.54rem; letter-spacing: 0.1em; text-transform: uppercase; color: var(--ink-soft); text-align: center;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis; background: rgba(5, 7, 13, 0.9); }

.set-tiles { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 200px), 1fr)); gap: 10px; }
.set-tile, .set-link {
  display: flex; align-items: center; justify-content: space-between; gap: 12px; text-decoration: none;
  font-size: 0.8rem; font-weight: 600; color: var(--ink-soft); transition: color var(--t-fast), box-shadow var(--t-fast);
}
.set-tile { padding: 14px 16px; border-radius: 12px; background: rgba(5, 7, 13, 0.5); box-shadow: inset 0 0 0 1px var(--border); }
.set-tile:hover { color: var(--ink); box-shadow: inset 0 0 0 1px var(--border-strong); }
.set-tile span:first-child { display: inline-flex; align-items: center; gap: 9px; min-width: 0; }
.set-tile small { font-weight: 400; color: var(--ink-faint); }
.set-ico { width: 18px; height: 18px; color: var(--accent); flex-shrink: 0; }
.set-links { display: flex; flex-direction: column; }
.set-link { padding: 13px 0; border-top: 1px solid var(--border); }
.set-link:first-child { border-top: 0; }
.set-link:hover { color: var(--ink); }

/* ── Parrainage ── */
.set-copy-row { display: flex; gap: 8px; margin-top: 16px; flex-wrap: wrap; }
.set-link-box { flex: 1 1 200px; min-width: 0; height: 42px; display: flex; align-items: center; padding: 0 14px; border-radius: 11px;
  font-size: 0.76rem; color: var(--ink-soft); background: rgba(5, 7, 13, 0.6); box-shadow: inset 0 0 0 1px var(--border);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis; user-select: all; }
.set-copy-row .ms-copy { min-height: 42px; }
.set-stats { display: flex; gap: 10px; margin-top: 16px; flex-wrap: wrap; }
.set-stat { flex: 1 1 110px; padding: 12px 14px; border-radius: 12px; background: rgba(5, 7, 13, 0.5); box-shadow: inset 0 0 0 1px var(--border); }
.set-stat strong { display: block; font-size: 1.1rem; font-weight: 500; line-height: 1; color: var(--ink); font-variant-numeric: tabular-nums; }
.set-stat span { display: block; margin-top: 6px; font-size: 0.58rem; letter-spacing: 0.14em; color: var(--ink-faint); }

/* ── Suppression ── */
.set-danger { margin-top: 18px; padding-top: 18px; border-top: 1px solid rgba(255, 143, 160, 0.16); }
.set-danger > summary { list-style: none; margin-top: 0; cursor: pointer; }
.set-danger > summary::-webkit-details-marker { display: none; }
.set-danger[open] > summary .set-btn { opacity: 0.5; }

@media (max-width: 760px) {
  .set-rail { position: static; max-width: none; flex-basis: 100%; flex-direction: row; overflow-x: auto; gap: 6px; padding-bottom: 4px; }
  .set-nav { flex: 0 0 auto; }
  .set-since { display: none; }
}

/* Progression de recruteur (retour Noé 2026-09-15). */
.set-stat strong.is-accent { color: var(--accent); }
.set-stat strong.is-good { color: var(--success); }
.set-ref-progress { margin-top: 16px; }
.set-ref-bar { height: 6px; border-radius: 999px; overflow: hidden; background: rgba(5, 7, 13, 0.7); box-shadow: inset 0 0 0 1px var(--border); }
.set-ref-bar span { display: block; height: 100%; border-radius: inherit; background: linear-gradient(90deg, var(--accent-deep), var(--success)); box-shadow: 0 0 12px rgba(143, 214, 165, 0.4); }
.set-code { font-weight: 600; color: var(--ink-soft); letter-spacing: 0.06em; user-select: all; }

/* ── Recadrage de la photo de profil (retour Noé 2026-09-15) : glisser + zoom dans un cercle. ── */
.set-crop-btn { padding: 4px 12px; border-radius: 999px; font-size: 0.66rem; font-weight: 600; color: var(--ink-soft); box-shadow: inset 0 0 0 1px var(--border-strong); }
.set-crop-btn:hover { color: var(--ink); background: var(--accent-soft); }
.avatar-picker-btn img, .avatar-big img, .avatar-sm img { transition: none; }
.crop-stage { display: grid; place-items: center; padding: var(--s3) 0; }
.crop-circle { position: relative; width: min(260px, 70vw); aspect-ratio: 1; border-radius: 50%; overflow: hidden; cursor: grab; touch-action: none;
  background: var(--bg-card); box-shadow: 0 0 0 3px var(--border-strong), 0 0 0 999px rgba(5, 7, 13, 0.35); }
.crop-circle.is-dragging { cursor: grabbing; }
.crop-circle img { width: 100%; height: 100%; object-fit: cover; user-select: none; pointer-events: none; }
.crop-zoom { display: flex; align-items: center; gap: var(--s3); margin-top: var(--s3); color: var(--ink-dim); }
.crop-zoom input { flex: 1; accent-color: var(--accent); }
.crop-hint { margin-top: var(--s2); text-align: center; }