/* =========================================================
   Revisly — page « Paramètres »
   (se charge par-dessus dashboard.css)
   ========================================================= */

.reglages{
  display:grid;grid-template-columns:212px minmax(0,1fr);gap:24px;
  align-items:start;max-width:920px;margin:0 auto;width:100%;
}

/* ---------- sommaire ---------- */
.sousnav{position:sticky;top:88px;display:flex;flex-direction:column;gap:2px}
.sousnav button{
  display:flex;align-items:center;gap:10px;width:100%;text-align:left;
  padding:9px 12px;border-radius:10px;font-size:.9375rem;color:var(--ink-secondary);
  transition:background .15s,color .15s;
}
.sousnav button svg{width:17px;height:17px;flex:none}
.sousnav button:hover{background:var(--surface-soft-hover);color:var(--ink-primary)}
.sousnav button.on{background:var(--sky-tint);color:var(--ink-primary)}
.sousnav button.on svg{color:var(--sky-soft)}

/* ---------- panneaux ---------- */
.panneau{display:flex;flex-direction:column;gap:18px}
.bloc{background:var(--surface-card);border:.8px solid var(--surface-border);border-radius:16px;padding:22px}
.bloc > h2{font-size:1rem;font-weight:600;letter-spacing:-.01em}
.bloc > .aide{margin-top:5px;font-size:.8125rem;color:var(--ink-tertiary)}
.bloc .corps{margin-top:18px}

/* ---------- choix illustrés ---------- */
.choix{display:grid;grid-template-columns:repeat(3,1fr);gap:10px}
.choix button{
  border:.8px solid var(--surface-border);border-radius:12px;padding:10px;
  background:var(--surface-soft);text-align:center;transition:border-color .15s,background .15s;
}
.choix button:hover{border-color:var(--border-fort)}
.choix button.on{border-color:var(--sky);background:var(--sky-tint)}
.choix .nom{display:block;margin-top:9px;font-size:.8125rem;font-weight:500}

.apercu{height:54px;border-radius:8px;overflow:hidden;display:flex;border:.8px solid var(--surface-border)}
.apercu .rail{width:30%}
.apercu .zone{flex:1;padding:7px}
.apercu .barre{height:5px;border-radius:3px;margin-bottom:5px}
.apercu .barre.court{width:55%}

/* palettes figées : chaque aperçu montre son propre thème */
.ap-sombre .rail{background:#1a1a1a}
.ap-sombre .zone{background:#202020}
.ap-sombre .barre{background:#3a3a3a}
.ap-sombre .barre:first-child{background:#6cb4e4}
.ap-clair .rail{background:#ffffff}
.ap-clair .zone{background:#f5f5f4}
.ap-clair .barre{background:#dcdbd8}
.ap-clair .barre:first-child{background:#1a7ab8}
.ap-systeme .rail{background:linear-gradient(135deg,#1a1a1a 0 50%,#ffffff 50% 100%)}
.ap-systeme .zone{background:linear-gradient(135deg,#202020 0 50%,#f5f5f4 50% 100%)}
.ap-systeme .barre{background:linear-gradient(135deg,#3a3a3a 0 50%,#dcdbd8 50% 100%)}
.ap-systeme .barre:first-child{background:linear-gradient(135deg,#6cb4e4 0 50%,#1a7ab8 50% 100%)}

/* ---------- tailles de texte ---------- */
.tailles{display:grid;grid-template-columns:repeat(3,1fr);gap:10px}
.tailles button{
  border:.8px solid var(--surface-border);border-radius:12px;padding:14px 10px;
  background:var(--surface-soft);text-align:center;transition:border-color .15s,background .15s;
}
.tailles button:hover{border-color:var(--border-fort)}
.tailles button.on{border-color:var(--sky);background:var(--sky-tint)}
.tailles .ex{display:block;font-weight:600;line-height:1}
.tailles .nom{display:block;margin-top:8px;font-size:.75rem;color:var(--ink-tertiary)}

/* ---------- lignes et interrupteurs ---------- */
.lignes{display:flex;flex-direction:column}
.ligne{display:flex;align-items:center;gap:16px;padding:14px 0;border-bottom:.8px solid var(--surface-line)}
.ligne:first-child{padding-top:0}
.ligne:last-child{border-bottom:0;padding-bottom:0}
.ligne .txt{flex:1;min-width:0}
.ligne .txt b{display:block;font-size:.9375rem;font-weight:500}
.ligne .txt span{display:block;margin-top:3px;font-size:.8125rem;color:var(--ink-tertiary)}
.bascule{
  flex:none;position:relative;width:44px;height:26px;border-radius:999px;
  background:var(--track);border:.8px solid var(--surface-border);
  transition:background .2s,border-color .2s;
}
.bascule::after{
  content:"";position:absolute;top:2px;left:2px;width:19px;height:19px;border-radius:999px;
  background:var(--ink-mute);transition:transform .2s,background .2s;
}
.bascule.on{background:rgba(26,122,184,.35);border-color:var(--sky)}
.bascule.on::after{transform:translateX(18px);background:var(--sky-soft)}

/* ---------- listes déroulantes ---------- */
.grille{display:grid;grid-template-columns:1fr 1fr;gap:14px}
.champ{display:flex;flex-direction:column;gap:6px;min-width:0}
.champ label{font-size:.8125rem;font-weight:500;color:var(--ink-secondary)}
.champ .boite{
  display:flex;align-items:center;
  background:var(--surface-soft);border:.8px solid var(--surface-border);
  border-radius:10px;padding:9px 12px;min-height:40px;
}
.champ .boite:focus-within{border-color:var(--sky);box-shadow:0 0 0 3px rgba(26,122,184,.22)}
.champ select{
  flex:1;min-width:0;background:none;border:0;outline:0;appearance:none;cursor:pointer;
  color:var(--ink-primary);font:inherit;font-size:.875rem;
}
.champ select option{background:var(--surface-card);color:var(--ink-primary)}

/* ---------- raccourcis ---------- */
.raccourcis{display:flex;flex-direction:column;gap:2px}
.raccourci{display:flex;align-items:center;gap:16px;padding:11px 0;border-bottom:.8px solid var(--surface-line)}
.raccourci:last-child{border-bottom:0}
.raccourci .quoi{flex:1;min-width:0;font-size:.875rem}
.raccourci .ou{font-size:.75rem;color:var(--ink-tertiary);white-space:nowrap}
.touches{display:flex;gap:5px;flex:none}
kbd{
  display:inline-block;min-width:22px;padding:2px 7px;border-radius:6px;text-align:center;
  background:var(--surface-soft);border:.8px solid var(--surface-border);
  font:inherit;font-size:.75rem;font-weight:600;color:var(--ink-secondary);
}

/* ---------- données ---------- */
.bloc.sensible{border-color:rgba(207,86,71,.35)}
.bloc.sensible > h2{color:var(--ink-ko)}
.btn-danger{background:rgba(207,86,71,.18);border:.8px solid rgba(207,86,71,.5);color:var(--ink-ko)}
.btn-danger:hover{background:rgba(207,86,71,.26)}

.etat{font-size:.8125rem;color:var(--moss)}
.actions-bloc{margin-top:18px;display:flex;align-items:center;gap:12px;flex-wrap:wrap}

@media (prefers-reduced-motion: reduce){
  .bascule,.bascule::after,.choix button,.tailles button{transition:none}
}

@media (max-width:900px){
  .reglages{grid-template-columns:1fr}
  .sousnav{
    position:static;flex-direction:row;gap:6px;overflow-x:auto;padding-bottom:4px;
  }
  .sousnav button{white-space:nowrap}
  .sousnav button .lbl{display:inline}
}
@media (max-width:640px){
  .grille{grid-template-columns:1fr}
  .choix,.tailles{grid-template-columns:1fr}
  .raccourci{flex-wrap:wrap;gap:8px}
  .raccourci .ou{width:100%}
}