/* ============================================================================
   RSKTV Player Pro — Réglages v3 (04/10/2026)
   « Un centre de contrôle calme : on voit avant d'entrer. »

   - Colonne des rubriques : une ligne chacune, icônes vectorielles monochromes.
   - Aperçu : survoler une rubrique affiche son contenu à droite (reglages.js /
     _activateSettCat(btn, true)).
   - Panneau : grand titre éditorial + une ligne qui dit ce qu'on trouve ici,
     puis des lignes « libellé / explication / valeur ».
   - Choix multiples ramenés à UNE ligne + liste (reglages.js).

   Règles TV tenues : un seul aplat rouge (= le focus) ; la rubrique ouverte se
   signale par la teinte, jamais par un fond rouge ; textes >= 22 px ; marges
   de sécurité sur les 4 bords ; ni ombre floue ni scale() (perf-nav.css) ;
   flexbox préfixé, pas de gap ni de grid (Chromium 56). Couleurs = jetons de
   thème (themes.css) : les 7 thèmes, dont le clair, sont couverts.
   Chargé APRÈS perf-nav.css : ce fichier fait autorité sur #section-settings.
   ========================================================================== */

#section-settings,
#section-settings .sett-layout,
#section-settings .sett-right,
#section-settings .sett-panel { background: var(--rsk-bg) !important; }

/* ── Colonne des rubriques ─────────────────────────────────────────────── */
#section-settings .sett-left {
  width: 540px !important; min-width: 540px !important;
  padding: 72px 0 48px 64px !important;
  background: var(--rsk-bg-2, var(--rsk-bg)) !important;
  border-right: 1px solid var(--rsk-border) !important;
  -webkit-box-sizing: border-box; box-sizing: border-box;
}
#section-settings .sett-left-title {
  display: block !important;
  font-size: 52px !important; font-weight: 800 !important;
  letter-spacing: -0.02em !important; text-transform: none !important;
  color: var(--rsk-text) !important;
  padding: 0 0 40px 24px !important; margin: 0 !important;
  border: 0 !important;
}
#section-settings .sett-cat-item {
  display: -webkit-flex !important; display: flex !important;
  -webkit-align-items: center !important; align-items: center !important;
  height: 76px !important; min-height: 76px !important;
  margin: 0 40px 6px 0 !important; padding: 0 24px !important;
  border: 0 !important; border-radius: 16px !important;
  background: transparent !important;
  box-shadow: none !important;
}
#section-settings .sett-cat-icon {
  width: 30px !important; height: 30px !important; min-width: 30px;
  margin: 0 22px 0 0 !important; padding: 0 !important;
  background: transparent !important; border: 0 !important; border-radius: 0 !important;
  color: var(--rsk-text-mute) !important;
  display: -webkit-flex !important; display: flex !important;
  -webkit-align-items: center; align-items: center;
  -webkit-justify-content: center; justify-content: center;
}
#section-settings .sett-cat-icon svg { width: 30px; height: 30px; display: block; }
#section-settings .sett-cat-label {
  font-size: 28px !important; font-weight: 600 !important;
  color: var(--rsk-text-dim) !important;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
  -webkit-flex: 1; flex: 1;
}
#section-settings .sett-cat-arr { display: none !important; }

/* Rubrique ouverte (non focalisée) : la TEINTE, jamais un fond rouge. */
#section-settings .sett-cat-item.sett-cat-active .sett-cat-label { color: var(--rsk-text) !important; font-weight: 700 !important; }
#section-settings .sett-cat-item.sett-cat-active .sett-cat-icon  { color: var(--rsk-accent) !important; }

/* Focus : le seul aplat rouge de l'écran. */
#section-settings .sett-cat-item:focus,
#section-settings .sett-cat-item.is-focused,
#section-settings .sett-cat-item.focused { background: var(--rsk-accent) !important; }
#section-settings .sett-cat-item:focus .sett-cat-label,
#section-settings .sett-cat-item.is-focused .sett-cat-label,
#section-settings .sett-cat-item.focused .sett-cat-label,
#section-settings .sett-cat-item:focus .sett-cat-icon,
#section-settings .sett-cat-item.is-focused .sett-cat-icon,
#section-settings .sett-cat-item.focused .sett-cat-icon { color: #fff !important; background: transparent !important; }

#section-settings .sett-left-version {
  margin-top: auto !important; padding: 0 0 0 24px !important;
  font-size: 22px !important; color: var(--rsk-text-mute) !important;
}

/* ── Panneau ───────────────────────────────────────────────────────────── */
#section-settings .sett-right { width: calc(100% - 540px) !important; }
#section-settings .sett-panel { padding: 72px 96px 72px 72px !important; }
#section-settings .sett-panel-title {
  display: block !important;
  font-size: 56px !important; font-weight: 800 !important;
  letter-spacing: -0.02em !important; line-height: 1.1 !important;
  color: var(--rsk-text) !important;
  margin: 0 0 12px 0 !important; padding: 0 !important; border: 0 !important;
}
#section-settings .sett-panel-title::before { display: none !important; }
#section-settings .sett-panel-sub {
  font-size: 24px; line-height: 1.4; color: var(--rsk-text-dim);
  margin: 0 0 40px 0; max-width: 980px;
}

#section-settings .sett-group-lbl {
  display: block;
  font-size: 20px !important; font-weight: 700 !important;
  letter-spacing: 0.16em !important; text-transform: uppercase !important;
  color: var(--rsk-text-mute) !important;
  padding: 28px 0 14px 4px !important; margin: 0 !important;
  border: 0 !important;
}
#section-settings .sett-group-lbl::after { display: none !important; }
#section-settings .sett-group-lbl:first-of-type { padding-top: 0 !important; }

/* ── Lignes ────────────────────────────────────────────────────────────── */
#section-settings .sett-opt-row {
  min-height: 88px !important;
  padding: 16px 28px !important; margin: 0 0 8px 0 !important;
  border: 0 !important; border-radius: 16px !important;
  background: var(--rsk-surface) !important;
  box-shadow: none !important;
  -webkit-box-sizing: border-box; box-sizing: border-box;
}
#section-settings .sett-opt-info {
  -webkit-flex: 1; flex: 1; min-width: 0;
  display: -webkit-flex; display: flex;
  -webkit-flex-direction: column; flex-direction: column;
}
#section-settings .sett-opt-lbl  { font-size: 28px !important; font-weight: 600 !important; color: var(--rsk-text) !important; }
#section-settings .sett-opt-hint { font-size: 22px !important; line-height: 1.35 !important; color: var(--rsk-text-dim) !important; margin-top: 4px !important; }
#section-settings .sett-opt-value,
#section-settings .sett-choix-val {
  font-size: 26px !important; font-weight: 500 !important;
  color: var(--rsk-text-dim) !important;
  margin-left: 32px !important; white-space: nowrap; text-align: right;
}
#section-settings .sett-choix-arr { font-size: 34px; color: var(--rsk-text-mute); margin-left: 16px; line-height: 1; }

/* Les pictogrammes emoji des lignes disparaissent : couleurs et tailles
   disparates, ils ne disaient rien que le libellé ne dise déjà. */
#section-settings .sett-opt-row .sett-btn-ico,
#section-settings .sett-account-btn-ico { display: none !important; }

/* Lignes d'information (non sélectionnables) : discrètes. */
#section-settings .sett-opt-row.sett-readonly { background: transparent !important; min-height: 64px !important; padding: 10px 28px !important; }
#section-settings .sett-opt-row.sett-readonly .sett-opt-lbl { font-size: 24px !important; font-weight: 500 !important; color: var(--rsk-text-dim) !important; }
#section-settings .sett-opt-row.sett-readonly .sett-opt-value { color: var(--rsk-text) !important; }

/* Focus d'une ligne : aplat accent, texte blanc. */
#section-settings .sett-opt-row.focusable:focus,
#section-settings .sett-opt-row.focusable.is-focused,
#section-settings .sett-opt-row.focusable.focused { background: var(--rsk-accent) !important; border: 0 !important; }
#section-settings .sett-opt-row.focusable:focus .sett-opt-lbl,
#section-settings .sett-opt-row.focusable.is-focused .sett-opt-lbl,
#section-settings .sett-opt-row.focusable.focused .sett-opt-lbl,
#section-settings .sett-opt-row.focusable:focus .sett-opt-value,
#section-settings .sett-opt-row.focusable.is-focused .sett-opt-value,
#section-settings .sett-opt-row.focusable.is-focused .sett-choix-val,
#section-settings .sett-opt-row.focusable.focused .sett-choix-val,
#section-settings .sett-opt-row.focusable:focus .sett-choix-val,
#section-settings .sett-opt-row.focusable.is-focused .sett-choix-arr,
#section-settings .sett-opt-row.focusable:focus .sett-choix-arr { color: #fff !important; }
#section-settings .sett-opt-row.focusable:focus .sett-opt-hint,
#section-settings .sett-opt-row.focusable.is-focused .sett-opt-hint,
#section-settings .sett-opt-row.focusable.focused .sett-opt-hint { color: rgba(255,255,255,0.86) !important; }

/* Interrupteur : « activé » en VERT — le rouge reste réservé au focus. */
#section-settings .sett-toggle {
  width: 72px !important; height: 40px !important; border-radius: 20px !important;
  background: var(--rsk-border-2, rgba(128,128,128,0.35)) !important;
  border: 0 !important; box-shadow: none !important; margin-left: 32px !important;
}
#section-settings .sett-toggle::after {
  width: 32px !important; height: 32px !important; top: 4px !important; left: 4px !important;
  background: #fff !important; box-shadow: none !important;
}
#section-settings .sett-toggle.sett-toggle-on { background: var(--rsk-green) !important; }
#section-settings .sett-toggle.sett-toggle-on::after { left: 36px !important; }
#section-settings .sett-opt-row.focusable.is-focused .sett-toggle,
#section-settings .sett-opt-row.focusable:focus .sett-toggle { background: rgba(255,255,255,0.32) !important; }
#section-settings .sett-opt-row.focusable.is-focused .sett-toggle.sett-toggle-on,
#section-settings .sett-opt-row.focusable:focus .sett-toggle.sett-toggle-on { background: var(--rsk-green) !important; }

/* Boutons d'action (pilules). */
#section-settings .sett-account-actions { margin: 8px 0 0 0 !important; }
#section-settings .sett-account-btn {
  min-height: 72px !important; padding: 0 36px !important; margin: 0 16px 12px 0 !important;
  border: 0 !important; border-radius: 36px !important;
  background: var(--rsk-surface) !important; box-shadow: none !important;
}
#section-settings .sett-account-btn-lbl { font-size: 26px !important; font-weight: 600 !important; color: var(--rsk-text) !important; }
#section-settings .sett-account-btn:focus,
#section-settings .sett-account-btn.is-focused,
#section-settings .sett-account-btn.focused { background: var(--rsk-accent) !important; }
#section-settings .sett-account-btn:focus .sett-account-btn-lbl,
#section-settings .sett-account-btn.is-focused .sett-account-btn-lbl,
#section-settings .sett-account-btn.focused .sett-account-btn-lbl { color: #fff !important; }

/* ── Liste des choix (reglages.js) ─────────────────────────────────────── */
#sett-choix-ov {
  display: none; position: fixed; left: 0; top: 0; right: 0; bottom: 0;
  z-index: 99980; background: rgba(0,0,0,0.66);
}
#sett-choix-ov .sett-choix-box {
  position: absolute; left: 50%; top: 50%;
  -webkit-transform: translate(-50%, -50%); transform: translate(-50%, -50%);
  width: 720px; max-height: 820px; overflow: hidden;
  padding: 40px 0 24px; border-radius: 24px;
  background: var(--rsk-bg-2, var(--rsk-bg)); border: 1px solid var(--rsk-border);
  -webkit-box-sizing: border-box; box-sizing: border-box;
}
#sett-choix-ov .sett-choix-titre { font-size: 40px; font-weight: 800; letter-spacing: -0.02em; color: var(--rsk-text); padding: 0 44px 6px; }
#sett-choix-ov .sett-choix-aide  { font-size: 22px; color: var(--rsk-text-dim); padding: 0 44px 24px; }
#sett-choix-ov .sett-choix-liste { max-height: 640px; overflow: hidden; padding: 0 24px; }
#sett-choix-ov .sett-choix-opt {
  display: -webkit-flex; display: flex; -webkit-align-items: center; align-items: center;
  min-height: 76px; padding: 0 20px; margin-bottom: 6px; border-radius: 16px;
  font-size: 28px; font-weight: 600; color: var(--rsk-text);
}
#sett-choix-ov .sett-choix-coche { width: 44px; font-size: 28px; color: var(--rsk-green); visibility: hidden; }
#sett-choix-ov .sett-choix-opt.est-choisi .sett-choix-coche { visibility: visible; }
#sett-choix-ov .sett-choix-opt.est-curseur { background: var(--rsk-accent); color: #fff; }
#sett-choix-ov .sett-choix-opt.est-curseur .sett-choix-coche { color: #fff; }

/* ── Polissage (passe 2) ───────────────────────────────────────────────── */
/* Un seul point focal : le titre du PANNEAU. Celui de la colonne devient une
   étiquette, alignée sur le haut du grand titre. */
#section-settings .sett-left { padding-top: 92px !important; }
#section-settings .sett-left-title {
  font-size: 22px !important; font-weight: 700 !important;
  letter-spacing: 0.2em !important; text-transform: uppercase !important;
  color: var(--rsk-text-mute) !important; padding: 0 0 44px 24px !important;
}
/* Lignes sans bloc .sett-opt-info (« Modifier la clé ») : le libellé prend la
   place, la valeur part à droite comme partout ailleurs. */
#section-settings .sett-opt-row > .sett-opt-lbl { -webkit-flex: 1; flex: 1; }
#section-settings .sett-opt-action { color: var(--rsk-text-dim) !important; }
#section-settings .sett-opt-row.focusable.is-focused .sett-opt-action,
#section-settings .sett-opt-row.focusable:focus .sett-opt-action { color: #fff !important; }
/* Badges d'information : neutres. Le rouge reste au focus. */
#section-settings .sett-account-badge {
  background: transparent !important; border: 1px solid var(--rsk-border-2, var(--rsk-border)) !important;
  color: var(--rsk-text) !important; border-radius: 20px !important;
  padding: 4px 16px !important; font-size: 22px !important;
}