:root {
  --bg: #f4f2ee;
  --card: #ffffff;
  --text: #1d2321;
  --muted: #6b736f;
  --accent: #1f6f5c;
  --accent-soft: #d9ebe5;
  --danger: #c0392b;
  --border: #e3e0da;
  --on-accent: #ffffff;
}
/* Mode sombre : automatique (réglage du téléphone), ou forcé par data-mode */
@media (prefers-color-scheme: dark) {
  :root:not([data-mode="light"]) {
    --bg: #121615;
    --card: #1b211f;
    --text: #e8ece9;
    --muted: #8d9692;
    --accent: #4fb89a;
    --accent-soft: #1f3a32;
    --danger: #e57366;
    --border: #2a322f;
    --on-accent: #0d1a16;
  }
}
:root[data-mode="dark"] {
  --bg: #121615;
  --card: #1b211f;
  --text: #e8ece9;
  --muted: #8d9692;
  --accent: #4fb89a;
  --accent-soft: #1f3a32;
  --danger: #e57366;
  --border: #2a322f;
  --on-accent: #0d1a16;
}
* { box-sizing: border-box; -webkit-tap-highlight-color: transparent; }
html, body { margin: 0; }
body {
  background: var(--bg);
  color: var(--text);
  font: 16px/1.4 system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  min-height: 100vh;
  padding-bottom: calc(40px + env(safe-area-inset-bottom));
}
header {
  display: flex; justify-content: space-between; align-items: center;
  padding: calc(20px + env(safe-area-inset-top)) 20px 12px;
  max-width: 640px; margin: 0 auto;
}
h1 { margin: 0; font-size: 1.6rem; letter-spacing: -0.02em; }
#date { margin: 2px 0 0; color: var(--muted); }
#date::first-letter { text-transform: uppercase; }

.ring { position: relative; width: 56px; height: 56px; }
.ring svg { width: 100%; height: 100%; transform: rotate(-90deg); }
.ring circle { fill: none; stroke-width: 3.5; }
.ring .bg { stroke: var(--border); }
.ring .fg { stroke: var(--accent); stroke-linecap: round; stroke-dasharray: 97.4; stroke-dashoffset: 97.4; transition: stroke-dashoffset .35s ease; }
.ring span { position: absolute; inset: 0; display: grid; place-items: center; font-size: .8rem; font-weight: 600; }

main { max-width: 640px; margin: 0 auto; padding: 0 16px; }
ul { list-style: none; margin: 0; padding: 0; }
li {
  display: flex; align-items: center; gap: 12px;
  background: var(--card); border: 1px solid var(--border);
  border-radius: 14px; padding: 14px 12px 14px 14px; margin-bottom: 8px;
  transition: opacity .2s, transform .15s;
}
li.done { opacity: .55; }
li.done .t { text-decoration: line-through; color: var(--muted); }
li.dragging { opacity: .4; transform: scale(.98); }

.check {
  flex: none; width: 28px; height: 28px; border-radius: 50%;
  border: 2px solid var(--muted); background: none; padding: 0; cursor: pointer;
  display: grid; place-items: center; color: transparent;
}
li.done .check { background: var(--accent); border-color: var(--accent); color: var(--on-accent); }
.check svg { width: 16px; height: 16px; }

.t { flex: 1; word-break: break-word; cursor: pointer; }
.t[contenteditable="true"] { outline: 2px solid var(--accent); border-radius: 6px; padding: 2px 4px; cursor: text; }

.handle, .del {
  flex: none; border: 0; background: none; color: var(--muted);
  width: 32px; height: 32px; border-radius: 8px; cursor: pointer; font-size: 1.1rem;
}
.handle { cursor: grab; touch-action: none; }
.del:active { color: var(--danger); background: var(--accent-soft); }

#empty, #alldone { text-align: center; color: var(--muted); margin-top: 32px; }

#toast {
  position: fixed; left: 50%; bottom: calc(24px + env(safe-area-inset-bottom)); transform: translateX(-50%);
  background: var(--text); color: var(--bg); padding: 10px 16px; border-radius: 10px;
  font-size: .9rem; display: flex; gap: 14px; align-items: center;
}
#toast button { background: none; border: 0; color: var(--accent); font: inherit; font-weight: 600; cursor: pointer; }

.ver { text-align: center; color: var(--muted); font-size: .75rem; opacity: .8; margin: 20px 0 0; }
body.login .ver { position: fixed; left: 0; right: 0; bottom: calc(14px + env(safe-area-inset-bottom)); margin: 0; }

[hidden] { display: none !important; }

/* ---- Proverbe du jour ---- */
#proverbe {
  display: flex; gap: 12px; align-items: flex-start;
  margin: 4px 0 16px; padding: 14px 16px;
  background: var(--accent-soft); border-radius: 14px;
}
#proverbe svg { flex: none; width: 22px; height: 22px; color: var(--accent); opacity: .8; margin-top: 2px; }
#proverbe .label { display: block; font-size: .72rem; font-weight: 600; letter-spacing: .08em; text-transform: uppercase; color: var(--accent); }
#proverbe p { margin: 3px 0 0; font-style: italic; line-height: 1.35; }

/* ---- Page publique ---- */
body.public li { cursor: pointer; user-select: none; }
body.public li:active { transform: scale(.985); }

/* ---- Formulaire d'ajout (admin) ---- */
form.inline { display: flex; gap: 8px; margin: 0 0 16px; }
form.inline input, .login input {
  flex: 1; min-width: 0; font: inherit; color: var(--text);
  background: var(--card); border: 1px solid var(--border);
  border-radius: 12px; padding: 12px 14px;
}
form.inline input:focus, .login input:focus { outline: 2px solid var(--accent); border-color: transparent; }
form.inline button {
  width: 48px; border: 0; border-radius: 12px;
  background: var(--accent); color: var(--on-accent); font-size: 1.6rem; cursor: pointer;
}

/* ---- Admin ---- */
.eyebrow { margin: 0 0 2px; font-size: .75rem; font-weight: 600; letter-spacing: .08em; text-transform: uppercase; color: var(--accent); }
nav { display: flex; gap: 6px; }
nav a {
  color: var(--text); text-decoration: none; font-size: .9rem;
  padding: 8px 12px; border: 1px solid var(--border); border-radius: 10px; background: var(--card);
}
.summary {
  display: flex; align-items: center; gap: 24px;
  background: var(--accent-soft); border-radius: 14px; padding: 14px 16px; margin: 4px 0 16px;
}
.summary div { display: flex; flex-direction: column; }
.summary strong { font-size: 1.5rem; line-height: 1.1; }
.summary span { font-size: .8rem; color: var(--muted); }
.ghost {
  margin-left: auto; font: inherit; font-size: .85rem; color: var(--accent);
  background: none; border: 1px solid var(--accent); border-radius: 10px; padding: 8px 12px; cursor: pointer;
}
body.admin .t { cursor: text; }
.status { flex: none; width: 10px; height: 10px; border-radius: 50%; background: var(--border); }
.status.on { background: var(--accent); }
.hint { text-align: center; color: var(--muted); font-size: .8rem; margin-top: 16px; }

/* ---- Pied de page (liste) ---- */
.foot {
  max-width: 640px; margin: 24px auto 0; padding: 0 20px;
  display: flex; justify-content: center; gap: 18px; font-size: .85rem; color: var(--muted);
}
.foot a { color: var(--accent); text-decoration: none; }

/* ---- Notifications (admin) ---- */
.by { flex: none; font-size: .78rem; color: var(--accent); background: var(--accent-soft); padding: 3px 8px; border-radius: 999px; }
.notif { background: var(--card); border: 1px solid var(--border); border-radius: 14px; padding: 16px; }
.notif-head { display: flex; gap: 12px; align-items: flex-start; }
.notif-head .ico {
  flex: none; width: 40px; height: 40px; border-radius: 12px;
  display: grid; place-items: center; background: var(--accent-soft); color: var(--accent);
}
.notif-head .ico svg { width: 22px; height: 22px; }
.notif-head p { margin: 3px 0 0; font-size: .88rem; color: var(--muted); }
.notif-actions { display: flex; gap: 8px; flex-wrap: wrap; margin-top: 14px; }
.notif-actions .ghost { margin-left: 0; }
.notif-actions:not(:has(button:not([hidden]))) { display: none; }
.primary-btn {
  font: inherit; font-size: .9rem; font-weight: 600; color: var(--on-accent); background: var(--accent);
  border: 0; border-radius: 10px; padding: 9px 14px; cursor: pointer;
}
.primary-btn.off { background: none; color: var(--danger); border: 1px solid var(--danger); }
.primary-btn:disabled { opacity: .6; }

/* ---- Comptes (admin) ---- */
h2 { font-size: 1.1rem; margin: 36px 0 12px; }
.userform { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; margin-bottom: 12px; }
.userform input, .userform select {
  min-width: 0; font: inherit; color: var(--text);
  background: var(--card); border: 1px solid var(--border); border-radius: 12px; padding: 11px 12px;
}
.userform select { appearance: none; }
.userform button {
  font: inherit; font-weight: 600; color: var(--on-accent); background: var(--accent);
  border: 0; border-radius: 12px; cursor: pointer;
}
li.user .t { display: flex; flex-direction: column; cursor: default; }
li.user small { color: var(--muted); font-size: .8rem; }
.avatar {
  flex: none; width: 36px; height: 36px; border-radius: 50%;
  display: grid; place-items: center; background: var(--border); color: var(--muted);
}
.avatar.admin { background: var(--accent-soft); color: var(--accent); }
.avatar svg { width: 20px; height: 20px; }
.key { flex: none; border: 0; background: none; width: 32px; height: 32px; border-radius: 8px; cursor: pointer; }

/* ---- Écran de choix (admin) ---- */
.lead { color: var(--muted); margin: 8px 0 16px; }
.tiles { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.tile {
  display: flex; flex-direction: column; align-items: flex-start; gap: 6px;
  background: var(--card); border: 1px solid var(--border); border-radius: 20px;
  padding: 20px 18px 22px; text-decoration: none; color: var(--text);
  transition: transform .12s, border-color .12s, box-shadow .12s;
}
.tile:hover { border-color: var(--accent); box-shadow: 0 6px 20px rgba(0,0,0,.06); }
.tile:active { transform: scale(.97); }
.tile .ico {
  width: 56px; height: 56px; border-radius: 16px; margin-bottom: 10px;
  display: grid; place-items: center; background: var(--accent-soft); color: var(--accent);
}
.tile .ico svg { width: 30px; height: 30px; }
.tile .label { font-size: 1.2rem; font-weight: 700; }
.tile .sub { font-size: .85rem; color: var(--muted); line-height: 1.3; }
@media (max-width: 340px) { .tiles { grid-template-columns: 1fr; } }

/* ---- Connexion ---- */
body.login { display: grid; place-items: center; padding: 16px; }
.login .card {
  width: 100%; max-width: 360px; display: flex; flex-direction: column; gap: 14px;
  background: var(--card); border: 1px solid var(--border); border-radius: 22px; padding: 32px 24px 28px;
}
.login img { align-self: center; border-radius: 16px; }
.login .titles { text-align: center; margin-bottom: 4px; }
.login h1 { font-size: 1.4rem; }
.login .titles p { margin: 4px 0 0; color: var(--muted); font-size: .9rem; }
.login label { display: flex; flex-direction: column; gap: 6px; }
.login label > span:first-child { font-size: .82rem; font-weight: 600; color: var(--muted); }
.login input {
  width: 100%; font: inherit; color: var(--text);
  background: var(--bg); border: 1px solid var(--border); border-radius: 12px; padding: 12px 14px;
}
.login input:focus { outline: 2px solid var(--accent); border-color: transparent; }
.pw { position: relative; display: block; }
.pw input { padding-right: 46px; }
.eye {
  position: absolute; right: 6px; top: 50%; transform: translateY(-50%);
  width: 36px; height: 36px; border: 0; background: none; color: var(--muted); cursor: pointer; border-radius: 8px;
}
.eye svg { width: 20px; height: 20px; }
.eye.on { color: var(--accent); }
.login .primary {
  margin-top: 6px; font: inherit; font-weight: 600; color: var(--on-accent); background: var(--accent);
  border: 0; border-radius: 12px; padding: 13px; cursor: pointer;
}
.error {
  margin: 0; padding: 10px 12px; border-radius: 10px; font-size: .9rem; text-align: center;
  color: var(--danger); background: color-mix(in srgb, var(--danger) 12%, transparent);
}

[hidden] { display: none !important; }

/* ---- Empreinte digitale ---- */
.fp-btn {
  width: 100%; display: flex; align-items: center; justify-content: center; gap: 10px;
  font: inherit; font-weight: 600; cursor: pointer; padding: 13px;
  color: var(--accent); background: none; border: 1.5px solid var(--accent); border-radius: 12px;
}
.fp-btn.main { color: var(--on-accent); background: var(--accent); }
.fp-btn:disabled { opacity: .6; }
.fp-btn .fp-ico { display: grid; }
.fp-btn svg { width: 24px; height: 24px; }
.or { display: flex; align-items: center; gap: 10px; margin: 16px 0 0; color: var(--muted); font-size: .8rem; }
.or::before, .or::after { content: ""; flex: 1; height: 1px; background: var(--border); }
.offer {
  display: flex; align-items: center; gap: 10px; margin: 0 0 14px; padding: 10px 12px;
  background: var(--accent-soft); border-radius: 12px; font-size: .88rem;
}
.offer .fp { flex: none; display: grid; color: var(--accent); }
.offer .fp svg { width: 22px; height: 22px; }
.offer a { flex: 1; color: var(--text); text-decoration: none; }
.offer b { color: var(--accent); }
.offer button { flex: none; border: 0; background: none; color: var(--muted); cursor: pointer; width: 28px; height: 28px; font-size: .95rem; }
body.compte .ico svg { width: 22px; height: 22px; }

/* ---- Listes multiples ---- */
.tabs {
  display: flex; gap: 8px; overflow-x: auto; margin: 2px 0 14px; padding-bottom: 2px;
  scrollbar-width: none; -webkit-overflow-scrolling: touch;
}
.tabs::-webkit-scrollbar { display: none; }
.tab {
  flex: none; display: flex; align-items: center; gap: 8px; font: inherit; cursor: pointer;
  padding: 8px 14px; border-radius: 999px; color: var(--text);
  background: var(--card); border: 1px solid var(--border);
}
.tab small { color: var(--muted); font-size: .78rem; font-variant-numeric: tabular-nums; }
.tab.on { background: var(--accent); border-color: var(--accent); color: var(--on-accent); }
.tab.on small { color: inherit; opacity: .85; }
.tab.done small::before { content: "✓ "; }
.tab.add { color: var(--accent); border-style: dashed; background: none; }

.listset { background: var(--card); border: 1px solid var(--border); border-radius: 14px; padding: 0 14px; margin: 18px 0 0; }
.listset summary { cursor: pointer; padding: 14px 0; font-weight: 600; list-style-position: inside; }
.listset[open] summary { border-bottom: 1px solid var(--border); margin-bottom: 14px; }
.listset form.inline { margin-bottom: 14px; }
.listset form.inline input {
  flex: 1; min-width: 0; font: inherit; color: var(--text);
  background: var(--bg); border: 1px solid var(--border); border-radius: 12px; padding: 11px 12px;
}
.listset form.inline button.small { width: auto; padding: 0 14px; font-size: .9rem; font-weight: 600; }
.vis { border: 0; padding: 0; margin: 0 0 14px; }
.vis legend { font-size: .85rem; font-weight: 600; color: var(--muted); padding: 0; margin-bottom: 6px; }
.opt { display: flex; align-items: center; gap: 10px; padding: 8px 0; cursor: pointer; }
.opt input { width: 20px; height: 20px; accent-color: var(--accent); flex: none; }
.pick { margin: 2px 0 4px 30px; padding-left: 12px; border-left: 2px solid var(--accent-soft); color: var(--muted); font-size: .9rem; }
.hint.left { text-align: left; margin: 6px 0 0; }
.ls-actions { display: flex; flex-wrap: wrap; gap: 8px; padding: 4px 0 14px; }
.ls-actions .ghost { margin-left: 0; }
.ls-actions button:disabled { opacity: .4; cursor: default; }
.danger {
  margin-left: auto; font: inherit; font-size: .85rem; color: var(--danger); background: none;
  border: 1px solid var(--danger); border-radius: 10px; padding: 8px 12px; cursor: pointer;
}
.danger:disabled { opacity: .4; cursor: default; }

/* Admin : tous les onglets visibles, y compris « + Liste » */
body.admin .tabs { flex-wrap: wrap; overflow: visible; }

.listnote { margin: 0 0 10px; font-size: .8rem; color: var(--muted); text-align: center; }
.umrow { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 6px 0; }
.umrow select { font: inherit; padding: 8px 10px; border-radius: 10px; border: 1px solid var(--border); background: var(--card); color: inherit; }
.tab .who { font-style: normal; font-size: .72rem; opacity: .75; margin-left: 6px; max-width: 9em; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

/* ---- Icônes, moments, jours ---- */
li.grp { background: none; border: 0; padding: 10px 4px 4px; margin: 4px 0 0; cursor: default !important; font-size: .78rem; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: var(--accent); }
body.public li.grp:active { transform: none; }
.when { flex: none; font-size: .72rem; color: var(--muted); white-space: nowrap; }
li.off { opacity: .5; }
li .edit { background: none; border: 0; font-size: 1.05rem; color: var(--muted); padding: 4px; cursor: pointer; }
.egrid { display: flex; flex-wrap: wrap; gap: 4px; max-height: 128px; overflow-y: auto; padding: 4px; border: 1px solid var(--border); border-radius: 12px; background: var(--bg); }
.egrid button { width: 40px; height: 40px; font-size: 1.3rem; border: 1px solid transparent; border-radius: 10px; background: none; cursor: pointer; color: var(--muted); }
.egrid button.on { background: var(--accent-soft); border-color: var(--accent); }
.legend { margin: 14px 0 6px; font-size: .85rem; font-weight: 600; color: var(--muted); }
.chips { display: flex; flex-wrap: wrap; gap: 6px; }
.chip { font: inherit; font-size: .9rem; padding: 7px 12px; border-radius: 999px; border: 1px solid var(--border); background: var(--card); color: var(--text); cursor: pointer; }
.chip.on { background: var(--accent); border-color: var(--accent); color: var(--on-accent); }
dialog { width: min(92vw, 440px); border: 0; border-radius: 18px; padding: 18px; background: var(--card); color: var(--text); box-shadow: 0 20px 60px rgba(0,0,0,.3); }
dialog::backdrop { background: rgba(0,0,0,.45); }
dialog h3 { margin: 0 0 12px; }
dialog input[type=text] { width: 100%; box-sizing: border-box; font: inherit; color: var(--text); background: var(--bg); border: 1px solid var(--border); border-radius: 12px; padding: 12px 14px; }
.td-actions { display: flex; gap: 10px; justify-content: flex-end; margin-top: 18px; }
.td-actions .ghost { margin-left: 0; }
.td-actions .primary-btn { padding: 10px 18px; }

/* ---- Mises à jour ---- */
.upd-line { margin: 0 0 6px; font-weight: 600; }
.upd-form { display: flex; gap: 8px; align-items: center; margin: 12px 0; }
.upd-form input[type=file] { flex: 1; min-width: 0; font: inherit; font-size: .85rem; }
.upd-form .primary-btn { padding: 10px 16px; }
.upd-list { margin-top: 8px; }
.upd-list li { padding: 8px 0 8px 0; margin: 0; background: none; border: 0; border-top: 1px solid var(--border); border-radius: 0; justify-content: space-between; font-size: .9rem; }
.upd-list button.small { margin-left: 0; padding: 6px 12px; }
.upd-list button:disabled { opacity: .5; cursor: default; }

/* ---- Sous-navigation de l'administration ---- */
.subnav { display: flex; flex-wrap: wrap; gap: 6px; max-width: 640px; margin: 0 auto 16px; padding: 0 16px; }
.subnav a {
  flex: none; display: flex; align-items: center; gap: 6px; text-decoration: none; font-size: .92rem; font-weight: 600;
  color: var(--text); background: var(--card); border: 1px solid var(--border); border-radius: 12px; padding: 8px 12px;
}
.subnav a.on { background: var(--accent); border-color: var(--accent); color: var(--on-accent); }
.aff { margin: 8px 0 0; padding: 8px 10px; border-radius: 10px; font-size: .85rem; font-weight: 600; }
.aff.ok { background: var(--accent-soft); color: var(--accent); }
.aff.bad { background: #fbe4e1; color: #a1281c; }
@media (prefers-color-scheme: dark) { .aff.bad { background: #3a1f1c; color: #ff9a8f; } }
li.dragging { position: relative; z-index: 5; opacity: .92; box-shadow: 0 8px 24px rgba(0,0,0,.18); transition: none; transform-origin: center; }
li.drop-before { box-shadow: 0 -3px 0 var(--accent); }
li.drop-after { box-shadow: 0 3px 0 var(--accent); }

/* ---- Thèmes de couleur (le thème « forêt » est celui par défaut ci-dessus) ---- */
:root[data-color="ocean"] { --accent:#1f5fa8;--accent-soft:#d8e6f5;--bg:#f1f4f8;--card:#ffffff;--border:#e0e5ec;--on-accent:#ffffff; }
@media (prefers-color-scheme: dark) { :root[data-color="ocean"]:not([data-mode="light"]) { --accent:#6aa9ee;--accent-soft:#1d3350;--bg:#0f1519;--card:#182026;--border:#26303a;--on-accent:#10151a; } }
:root[data-color="ocean"][data-mode="dark"] { --accent:#6aa9ee;--accent-soft:#1d3350;--bg:#0f1519;--card:#182026;--border:#26303a;--on-accent:#10151a; }
:root[data-color="sunset"] { --accent:#bf5516;--accent-soft:#f6e0d0;--bg:#f7f3ee;--card:#ffffff;--border:#e8e0d6;--on-accent:#ffffff; }
@media (prefers-color-scheme: dark) { :root[data-color="sunset"]:not([data-mode="light"]) { --accent:#f0955a;--accent-soft:#44281a;--bg:#161210;--card:#211a16;--border:#322823;--on-accent:#10151a; } }
:root[data-color="sunset"][data-mode="dark"] { --accent:#f0955a;--accent-soft:#44281a;--bg:#161210;--card:#211a16;--border:#322823;--on-accent:#10151a; }
:root[data-color="lavender"] { --accent:#6b4fb3;--accent-soft:#e6def5;--bg:#f4f2f8;--card:#ffffff;--border:#e4e0ec;--on-accent:#ffffff; }
@media (prefers-color-scheme: dark) { :root[data-color="lavender"]:not([data-mode="light"]) { --accent:#b39cf0;--accent-soft:#2f2548;--bg:#141217;--card:#1e1a24;--border:#2e2836;--on-accent:#10151a; } }
:root[data-color="lavender"][data-mode="dark"] { --accent:#b39cf0;--accent-soft:#2f2548;--bg:#141217;--card:#1e1a24;--border:#2e2836;--on-accent:#10151a; }
:root[data-color="rose"] { --accent:#b83a62;--accent-soft:#f6dbe4;--bg:#f8f2f4;--card:#ffffff;--border:#ebe0e4;--on-accent:#ffffff; }
@media (prefers-color-scheme: dark) { :root[data-color="rose"]:not([data-mode="light"]) { --accent:#f08aa9;--accent-soft:#4a2234;--bg:#171114;--card:#221a1e;--border:#33262c;--on-accent:#10151a; } }
:root[data-color="rose"][data-mode="dark"] { --accent:#f08aa9;--accent-soft:#4a2234;--bg:#171114;--card:#221a1e;--border:#33262c;--on-accent:#10151a; }
:root[data-color="graphite"] { --accent:#3d4a5c;--accent-soft:#dfe3e8;--bg:#f2f3f4;--card:#ffffff;--border:#dfe2e5;--on-accent:#ffffff; }
@media (prefers-color-scheme: dark) { :root[data-color="graphite"]:not([data-mode="light"]) { --accent:#9fb0c6;--accent-soft:#2a323d;--bg:#101214;--card:#1a1d21;--border:#292d33;--on-accent:#10151a; } }
:root[data-color="graphite"][data-mode="dark"] { --accent:#9fb0c6;--accent-soft:#2a323d;--bg:#101214;--card:#1a1d21;--border:#292d33;--on-accent:#10151a; }

/* ---- Choix d'apparence (page Mon compte) ---- */
.swatches { display: flex; flex-wrap: wrap; gap: 10px; margin: 8px 0 4px; }
.sw { display: flex; flex-direction: column; align-items: center; gap: 6px; font: inherit; font-size: .78rem; color: var(--text); background: none; border: 0; cursor: pointer; width: 64px; }
.sw i { width: 44px; height: 44px; border-radius: 50%; border: 3px solid transparent; box-shadow: 0 0 0 1px var(--border); display: block; }
.sw.on i { border-color: var(--card); box-shadow: 0 0 0 3px var(--accent); }
.sw.on { font-weight: 700; }
.seg { display: flex; border: 1px solid var(--border); border-radius: 12px; overflow: hidden; margin-top: 8px; }
.seg button { flex: 1; font: inherit; padding: 10px 6px; border: 0; background: var(--card); color: var(--text); cursor: pointer; }
.seg button + button { border-left: 1px solid var(--border); }
.seg button.on { background: var(--accent); color: var(--on-accent); font-weight: 600; }
.mode-title { display: block; margin-top: 14px; }
.pwform { display: flex; flex-direction: column; gap: 12px; }
.pwform label { display: flex; flex-direction: column; gap: 4px; font-size: .85rem; font-weight: 600; color: var(--muted); }
.pwform input { font: inherit; font-weight: 400; color: var(--text); background: var(--bg); border: 1px solid var(--border); border-radius: 12px; padding: 12px 14px; }
.pwform input:focus { outline: 2px solid var(--accent); border-color: transparent; }
.pwform .primary-btn { align-self: flex-start; }
/* En-tête admin : les boutons passent à la ligne si l'écran est étroit */
body.admin header { flex-wrap: wrap; gap: 10px 12px; }
body.admin header nav { flex-wrap: wrap; justify-content: flex-end; margin-left: auto; }
body.admin header nav a { white-space: nowrap; }

/* Admin : le titre garde toute la largeur, les badges passent dessous */
.tt { flex: 1; min-width: 0; }
.tt .t { display: block; }
.tt .meta { display: flex; flex-wrap: wrap; gap: 4px 8px; align-items: center; margin-top: 4px; }
.tt .meta:empty, .tt .meta:not(:has(:not([hidden]))) { display: none; }

/* ---- Droits d'ajout / liste perso ---- */
body.public li .edit { padding: 6px 8px; }
.user .own { display: flex; align-items: center; gap: 6px; font-size: .78rem; color: var(--muted); cursor: pointer; margin-left: auto; }
.user .own input { width: 18px; height: 18px; accent-color: var(--accent); }
.addedby { flex: none; font-size: .72rem; color: var(--muted); background: var(--bg); border: 1px solid var(--border); padding: 2px 8px; border-radius: 999px; }
.td-actions .danger { margin-right: auto; font: inherit; color: var(--danger); background: none; border: 1px solid var(--danger); border-radius: 10px; padding: 8px 12px; cursor: pointer; }