/* screen-parametres.css — polissage « Apple » de l'écran Paramètres.
   Couche présentation UNIQUEMENT : aucune modification de logique/formulaire.

   Réutilise le KIT (fondation design) :
   tokens --ease, --ease-spring, --dur-2/--dur-3, --shadow-sm/md, --r-pill et les
   composants .segmented / .btn-pill. Ce fichier N'EN REDÉFINIT AUCUN — il les
   consomme avec repli (var(--token, fallback)) pour rester correct avant le merge
   du KIT (classes non rendues = repli silencieux, jamais cassé).

   Portée : tout est scopé sous `body:has(.param-sections)` → ne s'applique QUE sur
   les pages Paramètres (qui incluent partials/parametres-tabs.ejs). Chargé
   globalement via head.ejs, inerte ailleurs. */

/* ─────────────────────────────────────────────────────────────────────────
   1. Cartes : ombres FROIDES + grain Apple (regroupement « inset grouped »)
   ───────────────────────────────────────────────────────────────────────── */
body:has(.param-sections) .app-card {
  border-radius: 16px;
  box-shadow:
    var(--shadow-sm, 0 1px 2px rgba(15, 37, 68, 0.05)),
    0 8px 28px -16px rgba(15, 37, 68, 0.22);
  transition: box-shadow var(--dur-2, 0.22s) var(--ease, cubic-bezier(0.4, 0, 0.2, 1)),
              transform var(--dur-2, 0.22s) var(--ease, cubic-bezier(0.4, 0, 0.2, 1));
}
@media (hover: hover) {
  body:has(.param-sections) .app-card:hover {
    box-shadow:
      var(--shadow-md, 0 2px 6px rgba(15, 37, 68, 0.07)),
      0 18px 44px -20px rgba(15, 37, 68, 0.28);
  }
}

/* ─────────────────────────────────────────────────────────────────────────
   2. Liste « inset grouped » iOS : rangées réglage avec séparateurs hairline.
   À appliquer via <div class="param-list"> contenant des .param-row.
   ───────────────────────────────────────────────────────────────────────── */
body:has(.param-sections) .param-list {
  display: flex;
  flex-direction: column;
  border: 1px solid var(--separator, rgba(15, 37, 68, 0.12));
  border-radius: 14px;
  overflow: hidden;
  background: var(--lg-surface-soft, var(--bg-secondary, #fff));
}
body:has(.param-sections) .param-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  padding: 0.85rem 1rem;
  margin: 0;
  cursor: pointer;
  transition: background var(--dur-1, 0.14s) var(--ease, ease);
}
body:has(.param-sections) .param-row + .param-row {
  border-top: 1px solid var(--separator, rgba(15, 37, 68, 0.10));
}
@media (hover: hover) {
  body:has(.param-sections) .param-row:hover {
    background: var(--fill-quaternary, rgba(94, 127, 168, 0.06));
  }
}
body:has(.param-sections) .param-row-text { display: flex; flex-direction: column; gap: 0.15rem; min-width: 0; }
body:has(.param-sections) .param-row-text strong { font-weight: 600; letter-spacing: -0.005em; }
body:has(.param-sections) .param-row-text small,
body:has(.param-sections) .param-row-text .app-muted {
  font-size: 0.78rem;
  color: var(--label-secondary, var(--slate));
  line-height: 1.35;
}
body:has(.param-sections) .param-row-control { flex-shrink: 0; }

/* ─────────────────────────────────────────────────────────────────────────
   3. Switch iOS — habille un <input type="checkbox" class="ios-switch">.
   Pur CSS, sans JS : la case native reste la source de vérité (clic, clavier,
   submit). On masque le rendu natif et on peint la piste + le pouce.
   ───────────────────────────────────────────────────────────────────────── */
body:has(.param-sections) input.ios-switch {
  -webkit-appearance: none;
  appearance: none;
  position: relative;
  flex-shrink: 0;
  width: 50px;
  height: 30px;
  margin: 0;
  border-radius: var(--r-pill, 999px);
  background: var(--fill-tertiary, rgba(15, 37, 68, 0.16));
  cursor: pointer;
  vertical-align: middle;
  transition: background var(--dur-2, 0.22s) var(--ease, cubic-bezier(0.4, 0, 0.2, 1));
}
body:has(.param-sections) input.ios-switch::after {
  content: "";
  position: absolute;
  top: 2px;
  left: 2px;
  width: 26px;
  height: 26px;
  border-radius: 50%;
  background: #fff;
  box-shadow: 0 1px 3px rgba(15, 37, 68, 0.35), 0 0 0 0.5px rgba(15, 37, 68, 0.08);
  transition: transform var(--dur-2, 0.22s) var(--ease-spring, cubic-bezier(0.34, 1.56, 0.64, 1));
}
body:has(.param-sections) input.ios-switch:checked {
  /* vert iOS pour l'état « actif » d'un réglage booléen */
  background: #34c759;
}
body:has(.param-sections) input.ios-switch:checked::after {
  transform: translateX(20px);
}
body:has(.param-sections) input.ios-switch:focus-visible {
  outline: 2px solid var(--accent, #5e7fa8);
  outline-offset: 3px;
}
body:has(.param-sections) input.ios-switch:disabled {
  opacity: 0.5;
  cursor: not-allowed;
}
:root[data-theme="dark"] body:has(.param-sections) input.ios-switch {
  background: rgba(255, 255, 255, 0.18);
}
@media (prefers-reduced-motion: reduce) {
  body:has(.param-sections) input.ios-switch,
  body:has(.param-sections) input.ios-switch::after { transition: none; }
}

/* Rangée switch posée sur un <label> : aligne libellé + interrupteur. */
body:has(.param-sections) label.param-row { font-weight: 400; }

/* ─────────────────────────────────────────────────────────────────────────
   4. Onglets Paramètres (param-tab) : finition pilule, transitions douces.
   On ne redéfinit pas .btn-pill — on aligne juste l'animation/feedback.
   ───────────────────────────────────────────────────────────────────────── */
body:has(.param-sections) .param-tab {
  transition: color var(--dur-1, 0.14s) var(--ease, ease),
              background var(--dur-1, 0.14s) var(--ease, ease),
              box-shadow var(--dur-2, 0.22s) var(--ease, ease);
}
body:has(.param-sections) .param-tab.is-active {
  box-shadow: var(--shadow-sm, 0 1px 2px rgba(15, 37, 68, 0.06));
}
body:has(.param-sections) .param-tab:active { transform: scale(0.97); }
@media (prefers-reduced-motion: reduce) {
  body:has(.param-sections) .param-tab:active { transform: none; }
}

/* ─────────────────────────────────────────────────────────────────────────
   5. Segmented control (réutilise le KIT .segmented + public/js/segmented.js).
   Repli visuel léger si le KIT n'est pas encore chargé (radios stylées en
   pilule), pour que les groupes de choix restent présentables avant le merge.
   ───────────────────────────────────────────────────────────────────────── */
body:has(.param-sections) .param-choices {
  display: inline-flex;
  flex-wrap: wrap;
  gap: 0.35rem;
}
body:has(.param-sections) .param-choices label {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  padding: 0.4rem 0.85rem;
  border-radius: var(--r-pill, 999px);
  border: 1px solid var(--separator, rgba(15, 37, 68, 0.14));
  font-size: 0.86rem;
  cursor: pointer;
  transition: background var(--dur-1, 0.14s) var(--ease, ease),
              border-color var(--dur-1, 0.14s) var(--ease, ease);
}
body:has(.param-sections) .param-choices label:has(input:checked) {
  background: var(--accent-soft, rgba(94, 127, 168, 0.16));
  border-color: var(--accent, #5e7fa8);
  font-weight: 600;
}
body:has(.param-sections) .param-choices input[type="radio"] { accent-color: var(--accent, #5e7fa8); }