/* porté (scopé #sec-reglages) */

#sec-reglages * { box-sizing: border-box; margin: 0; }#sec-reglages .vue { display: none; height: calc(100% - 36px); flex-direction: column; }#sec-reglages .vue.active { display: flex; }#sec-reglages .vue .body-scroll { flex: 1; overflow-y: auto; padding-bottom: 32px; }#sec-reglages .top-bar {
      padding: 12px 18px;
      display: flex;
      align-items: center;
      justify-content: space-between;
      border-bottom: 3px solid var(--ink);
      flex-shrink: 0;
    }#sec-reglages .top-bar-left {
      display: flex;
      align-items: center;
      gap: 10px;
    }#sec-reglages .back-btn {
      width: 36px; height: 36px;
      border: 3px solid var(--ink);
      background: var(--paper);
      font-family: var(--fd);
      font-size: 22px;
      display: flex;
      align-items: center;
      justify-content: center;
      box-shadow: 3px 3px 0 var(--ink);
      cursor: pointer;
    }#sec-reglages .back-btn:active { transform: translate(2px, 2px); box-shadow: 1px 1px 0 var(--ink); }#sec-reglages .page-title { font-family: var(--fd); font-size: 22px; letter-spacing: 3px; }#sec-reglages .top-sticker {
      transform: rotate(3deg);
      position: relative;
    }#sec-reglages .top-sticker::before {
      content: '';
      position: absolute;
      top: 3px; left: 3px; right: -3px; bottom: -3px;
      background: var(--ink);
    }#sec-reglages .top-sticker .body {
      position: relative;
      padding: 5px 10px;
      border: 3px solid var(--ink);
      font-family: var(--fd);
      font-size: 11px;
      letter-spacing: 1.5px;
    }#sec-reglages .top-sticker.deco .body { background: #FF5252; color: var(--paper); }#sec-reglages .top-sticker.saved .body { background: #5BE885; }#sec-reglages .top-sticker.pin .body { background: #FFD600; }#sec-reglages .profile-card {
      margin: 16px 16px 8px;
      position: relative;
      transform: rotate(-0.7deg);
    }#sec-reglages .profile-card::before {
      content: '';
      position: absolute;
      top: 7px; left: 7px; right: -7px; bottom: -7px;
      background: var(--ink);
    }#sec-reglages .profile-card .body {
      position: relative;
      border: 4px solid var(--ink);
      background: var(--paper);
      padding: 14px;
      display: flex;
      align-items: center;
      gap: 12px;
    }#sec-reglages .profile-card .avatar { position: relative; flex-shrink: 0; border: none; box-shadow: none; }#sec-reglages .profile-card .avatar::before {
      content: '';
      position: absolute;
      top: 4px; left: 4px;
      width: 64px; height: 64px;
      background: var(--ink);
    }#sec-reglages .profile-card .avatar .frame {
      position: relative;
      width: 64px; height: 64px;
      border: 3px solid var(--ink);
      background: var(--paper);
      overflow: hidden;
    }#sec-reglages .profile-card .avatar .frame .ava-emo { width: 100%; height: 100%; border: none; box-shadow: none; }#sec-reglages .profile-card .avatar img { width: 100%; height: 100%; display: block; }#sec-reglages .profile-card .meta { flex: 1; min-width: 0; }#sec-reglages .profile-card .name {
      font-family: var(--fd);
      font-size: 16px;
      line-height: 24px;
    }#sec-reglages .profile-card .meta-row {
      display: flex;
      gap: 5px;
      margin-top: 5px;
      flex-wrap: wrap;
    }#sec-reglages .meta-chip {
      display: inline-flex;
      align-items: center;
      gap: 3px;
      padding: 1px 6px;
      border: 2px solid var(--ink);
      background: var(--paper);
      font-family: var(--fd);
      font-size: 10px;
      letter-spacing: 0.8px;
      box-shadow: 2px 2px 0 var(--ink);
    }#sec-reglages .meta-chip img { width: 12px; height: 9px; border: 1px solid var(--ink); }#sec-reglages .meta-chip.xp { background: #FF2E93; color: var(--paper); }#sec-reglages .meta-chip.coins { background: #FFD600; }#sec-reglages .meta-chip .ic { width: 12px; height: 12px; display: inline-block; }#sec-reglages .meta-chip .ic img { width: 100%; height: 100%; border: none; }#sec-reglages .cat-list {
      padding: 4px 16px 16px;
      display: flex;
      flex-direction: column;
      gap: 8px;
    }#sec-reglages .cat-row {
      position: relative;
      cursor: pointer;
    }#sec-reglages .cat-row::before {
      content: '';
      position: absolute;
      top: 4px; left: 4px; right: -4px; bottom: -4px;
      background: var(--ink);
    }#sec-reglages .cat-row .inner {
      position: relative;
      border: 3px solid var(--ink);
      background: var(--paper);
      padding: 10px 12px;
      display: flex;
      align-items: center;
      gap: 12px;
    }#sec-reglages .cat-row:active .inner { transform: translate(2px, 2px); }#sec-reglages .cat-row:active::before { display: none; }#sec-reglages .cat-icon {
      position: relative;
      flex-shrink: 0;
    }#sec-reglages .cat-icon::before {
      content: '';
      position: absolute;
      top: 2.5px; left: 2.5px;
      width: 36px; height: 36px;
      background: var(--ink);
    }#sec-reglages .cat-icon .inner-ico {
      position: relative;
      width: 36px; height: 36px;
      border: 2.5px solid var(--ink);
      display: flex;
      align-items: center;
      justify-content: center;
      overflow: hidden;
      transform: rotate(-3deg);
    }#sec-reglages .cat-icon .inner-ico img { width: 28px; height: 28px; display: block; }#sec-reglages .cat-icon.yellow .inner-ico { background: #FFD600; }#sec-reglages .cat-icon.cyan .inner-ico { background: #5BD8E5; }#sec-reglages .cat-icon.magenta .inner-ico { background: #FF2E93; }#sec-reglages .cat-icon.green .inner-ico { background: #5BE885; }#sec-reglages .cat-icon.orange .inner-ico { background: #FF9F45; }#sec-reglages .cat-icon.purple .inner-ico { background: #9D4EDD; }#sec-reglages .cat-icon.red .inner-ico { background: #FF5252; }#sec-reglages .cat-icon.lime .inner-ico { background: #B5FF66; }#sec-reglages .cat-icon.pink .inner-ico { background: #FF80AB; }#sec-reglages .cat-meta { flex: 1; min-width: 0; }#sec-reglages .cat-title {
      font-family: var(--fd);
      font-size: 15px;
      letter-spacing: 1px;
    }#sec-reglages .cat-sub {
      font-family: var(--fb);
      font-weight: 700;
      font-size: 10px;
      letter-spacing: 0.5px;
      color: color-mix(in srgb, var(--ink) 55.00000000000001%, transparent);
      margin-top: 1px;
    }#sec-reglages .cat-badge {
      padding: 2px 6px;
      border: 2px solid var(--ink);
      font-family: var(--fd);
      font-size: 9px;
      letter-spacing: 1px;
      box-shadow: 2px 2px 0 var(--ink);
      flex-shrink: 0;
    }#sec-reglages .cat-badge.warn { background: #FFD600; }#sec-reglages .cat-badge.danger { background: #FF5252; color: var(--paper); }#sec-reglages .cat-badge.ok { background: #5BE885; }#sec-reglages .cat-badge.soon { background: #9D4EDD; color: var(--paper); }#sec-reglages .cat-chev {
      font-family: var(--fd);
      font-size: 22px;
      flex-shrink: 0;
    }#sec-reglages .version-row {
      display: flex;
      justify-content: center;
      padding: 6px 0 18px;
    }#sec-reglages .version-badge {
      position: relative;
      transform: rotate(-2deg);
    }#sec-reglages .version-badge::before {
      content: '';
      position: absolute;
      top: 3px; left: 3px; right: -3px; bottom: -3px;
      background: var(--ink);
    }#sec-reglages .version-badge .body {
      position: relative;
      padding: 5px 12px;
      border: 3px solid var(--ink);
      background: var(--paper);
      font-family: var(--fb);
      font-weight: 700;
      font-size: 11px;
      letter-spacing: 1.5px;
    }#sec-reglages .sub-content {
      padding: 18px 16px;
      display: flex;
      flex-direction: column;
      gap: 18px;
    }#sec-reglages .sub-card {
      position: relative;
    }#sec-reglages .sub-card::before {
      content: '';
      position: absolute;
      top: 5px; left: 5px; right: -5px; bottom: -5px;
      background: var(--ink);
    }#sec-reglages .sub-card .inner {
      position: relative;
      border: 3px solid var(--ink);
      background: var(--paper);
      padding: 14px;
      display: flex;
      flex-direction: column;
      gap: 12px;
    }#sec-reglages .sub-card-title {
      font-family: var(--fb);
      font-weight: 700;
      font-size: 10px;
      letter-spacing: 2px;
      color: color-mix(in srgb, var(--ink) 55.00000000000001%, transparent);
      margin-bottom: -4px;
    }#sec-reglages .setting-row {
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: 10px;
    }#sec-reglages .setting-row .label { flex: 1; min-width: 0; }#sec-reglages .setting-row .label-text {
      font-family: var(--fd);
      font-size: 14px;
      letter-spacing: 0.5px;
    }#sec-reglages .setting-row .label-desc {
      font-family: var(--fb);
      font-weight: 700;
      font-size: 10px;
      letter-spacing: 0.5px;
      color: color-mix(in srgb, var(--ink) 55.00000000000001%, transparent);
      margin-top: 2px;
      line-height: 14px;
    }#sec-reglages .divider-row {
      height: 2px;
      background: color-mix(in srgb, var(--ink) 10%, transparent);
      margin: 0 -14px;
    }#sec-reglages .switch {
      position: relative;
      width: 50px;
      height: 28px;
      border: 3px solid var(--ink);
      background: #E8E8E8;
      cursor: pointer;
      box-shadow: 3px 3px 0 var(--ink);
      flex-shrink: 0;
    }#sec-reglages .switch::after {
      content: '';
      position: absolute;
      top: 1px; left: 1px;
      width: 20px; height: 20px;
      background: var(--paper);
      border: 2px solid var(--ink);
      transition: left 0.15s;
    }#sec-reglages .switch.on { background: #FF2E93; }#sec-reglages .switch.on::after { left: 23px; }#sec-reglages .pills {
      display: flex;
      gap: 6px;
      flex-shrink: 0;
    }#sec-reglages .pill {
      border: 3px solid var(--ink);
      background: var(--paper);
      padding: 5px 12px;
      font-family: var(--fd);
      font-size: 12px;
      letter-spacing: 1px;
      box-shadow: 3px 3px 0 var(--ink);
      cursor: pointer;
    }#sec-reglages .pill.active { background: #FF2E93; color: var(--paper); }#sec-reglages .picker-btn {
      display: inline-flex;
      align-items: center;
      gap: 6px;
      border: 3px solid var(--ink);
      background: #FFD600;
      padding: 4px 8px;
      font-family: var(--fd);
      font-size: 12px;
      letter-spacing: 1px;
      box-shadow: 3px 3px 0 var(--ink);
      flex-shrink: 0;
    }#sec-reglages .picker-btn .flag { width: 16px; height: 12px; border: 1px solid var(--ink); }#sec-reglages .picker-btn .chev { font-family: var(--fd); font-size: 14px; }#sec-reglages .input-wrap { position: relative; }#sec-reglages .input-wrap::before {
      content: '';
      position: absolute;
      top: 4px; left: 4px; right: -4px; bottom: -4px;
      background: var(--ink);
    }#sec-reglages .input-wrap input {
      position: relative;
      width: 100%;
      border: 3px solid var(--ink);
      background: var(--paper);
      padding: 10px 12px;
      font-family: var(--fb);
      font-weight: 700;
      font-size: 15px;
      color: var(--ink);
      outline: none;
      letter-spacing: 1px;
    }#sec-reglages .helper {
      font-family: var(--fb);
      font-weight: 700;
      font-size: 10px;
      letter-spacing: 1px;
    }#sec-reglages .helper.info { color: color-mix(in srgb, var(--ink) 55.00000000000001%, transparent); }#sec-reglages .helper.warn { color: #FF5252; }#sec-reglages .theme-grid {
      display: grid;
      grid-template-columns: repeat(4, 1fr);
      gap: 8px;
      margin-top: 4px;
    }#sec-reglages .swatch {
      position: relative;
      aspect-ratio: 1;
      cursor: pointer;
    }#sec-reglages .swatch::before {
      content: '';
      position: absolute;
      top: 3px; left: 3px; right: -3px; bottom: -3px;
      background: var(--ink);
    }#sec-reglages .swatch .ins {
      position: relative;
      border: 3px solid var(--ink);
      width: 100%; height: 100%;
    }#sec-reglages .swatch.active .ins::after {
      content: '✓';
      position: absolute;
      top: 2px; right: 2px;
      width: 18px; height: 18px;
      background: var(--paper);
      border: 2px solid var(--ink);
      font-family: var(--fd);
      font-size: 11px;
      display: flex;
      align-items: center;
      justify-content: center;
    }#sec-reglages .swatch .lbl {
      position: absolute;
      bottom: -16px;
      left: 0; right: 0;
      text-align: center;
      font-family: var(--fb);
      font-weight: 700;
      font-size: 8px;
      letter-spacing: 0.8px;
      color: color-mix(in srgb, var(--ink) 60%, transparent);
    }#sec-reglages .pin-card {
      background: var(--paper);
    }#sec-reglages .pin-card .icon-huge {
      width: 80px; height: 80px;
      margin: 0 auto;
      display: flex;
      align-items: center;
      justify-content: center;
    }#sec-reglages .pin-card .icon-huge img { width: 100%; height: 100%; }#sec-reglages .pin-card .title {
      font-family: var(--fd);
      font-size: 22px;
      letter-spacing: 1.5px;
      text-align: center;
    }#sec-reglages .pin-card .copy {
      font-family: var(--fb);
      font-weight: 700;
      font-size: 11px;
      line-height: 16px;
      text-align: center;
      color: color-mix(in srgb, var(--ink) 70%, transparent);
    }#sec-reglages .pin-card .warning {
      background: #FFD600;
      border: 2.5px solid var(--ink);
      padding: 6px 10px;
      font-family: var(--fb);
      font-weight: 700;
      font-size: 10px;
      letter-spacing: 1px;
      text-align: center;
    }#sec-reglages .pin-card .cta {
      position: relative;
      cursor: pointer;
    }#sec-reglages .pin-card .cta::before {
      content: '';
      position: absolute;
      top: 5px; left: 5px; right: -5px; bottom: -5px;
      background: var(--ink);
    }#sec-reglages .pin-card .cta .body {
      position: relative;
      padding: 12px;
      border: 3px solid var(--ink);
      background: #FF2E93;
      color: var(--paper);
      font-family: var(--fd);
      font-size: 16px;
      letter-spacing: 2px;
      text-align: center;
    }#sec-reglages .danger-row {
      display: flex;
      flex-direction: column;
      gap: 3px;
      cursor: pointer;
    }#sec-reglages .danger-row .lbl {
      font-family: var(--fd);
      font-size: 14px;
      letter-spacing: 0.5px;
      color: #FF5252;
    }#sec-reglages .danger-row .desc {
      font-family: var(--fb);
      font-weight: 700;
      font-size: 10px;
      color: color-mix(in srgb, var(--ink) 55.00000000000001%, transparent);
    }