/* Bulle — feuille de style commune (navigation + lecteur) */
:root {
  --bg: #0f1115;
  --bg-2: #161922;
  --card: #1c2029;
  --card-2: #242935;
  --line: #2b313d;
  --text: #e9eaef;
  --muted: #9aa2b4;
  --accent: #ffb454;
  --accent-ink: #231a05;
  --blue: #6cc3ff;
  --ok: #4fd38c;
  --warn: #ff7b7b;
  --radius: 12px;
  --shadow: 0 10px 30px rgba(0, 0, 0, .35);
  --bar-h: 56px;
  --thumb: 156px;        /* largeur des vignettes (réglage) */
  --hover-scale: 1.05;   /* zoom au survol (réglage) */
  color-scheme: dark;
}
:root[data-theme="light"] {
  --bg: #f4f5f8;
  --bg-2: #ffffff;
  --card: #e9ebf0;
  --card-2: #dfe2e9;
  --line: #d3d7e0;
  --text: #1b1f2a;
  --muted: #5d6474;
  --accent: #e08a00;
  --accent-ink: #ffffff;
  --shadow: 0 10px 30px rgba(20, 30, 60, .18);
  --cover-shadow: 3px 5px 12px rgba(20, 30, 60, .28);
  color-scheme: light;
}
:root[data-theme="light"] .topbar { background: rgba(244, 245, 248, .88); }
:root[data-theme="light"] .badge { background: rgba(255, 255, 255, .9); color: #1b1f2a; }
:root[data-theme="light"] .card .info { background: rgba(255, 255, 255, .9); color: #1b1f2a; }
:root[data-theme="light"] .letters { background: linear-gradient(var(--bg) 80%, transparent); }
* { box-sizing: border-box; }
html, body { margin: 0; padding: 0; background: var(--bg); color: var(--text); }
body {
  font: 15px/1.45 system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
  min-height: 100vh;
}
a { color: inherit; text-decoration: none; }
button { font: inherit; color: inherit; cursor: pointer; }
img { display: block; }
[hidden] { display: none !important; }
.muted { color: var(--muted); }

/* ---------- barre du haut ---------- */
.topbar {
  position: sticky; top: 0; z-index: 20;
  display: flex; align-items: center; gap: 12px;
  height: calc(var(--bar-h) + env(safe-area-inset-top, 0px)); padding: env(safe-area-inset-top, 0px) max(16px, env(safe-area-inset-left)) 0 max(16px, env(safe-area-inset-right));   /* appli installée sur iPad / iPhone : sous la barre d'état */
  background: rgba(15, 17, 21, .85); backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px);
  border-bottom: 1px solid var(--line);
}
.brand { display: flex; align-items: center; gap: 9px; font-weight: 700; font-size: 19px; letter-spacing: .2px; }
.brand svg { width: 26px; height: 26px; }
.brand span { color: var(--accent); }
.search { flex: 1; display: flex; justify-content: center; }
.search input {
  width: min(520px, 100%); height: 38px; padding: 0 14px 0 38px; border-radius: 999px;
  border: 1px solid var(--line); background: var(--bg-2) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%239aa2b4' stroke-width='2' stroke-linecap='round'%3E%3Ccircle cx='11' cy='11' r='7'/%3E%3Cpath d='m20 20-3.5-3.5'/%3E%3C/svg%3E") 12px center / 18px no-repeat;
  color: var(--text); font: inherit; outline: none;
}
.search input:focus { border-color: var(--accent); }
.iconbtn {
  width: 38px; height: 38px; border-radius: 50%; border: 1px solid var(--line); background: var(--bg-2);
  display: inline-flex; align-items: center; justify-content: center; flex: none;
}
.iconbtn:hover { background: var(--card-2); }
.iconbtn svg { width: 20px; height: 20px; }
.iconbtn.spin svg { animation: spin 1s linear infinite; }
@keyframes spin { to { transform: rotate(360deg); } }

/* ---------- onglets principaux : colonne à gauche (ou rangée en haut) ---------- */
.layout { display: flex; align-items: flex-start; }
.content { flex: 1; min-width: 0; }
.sidebar {
  position: sticky; top: var(--bar-h); z-index: 18; flex: none; width: 200px; height: calc(100vh - var(--bar-h));
  display: flex; flex-direction: column; gap: 2px; padding: 12px 10px calc(12px + env(safe-area-inset-bottom));
  overflow-y: auto; overflow-x: hidden; scrollbar-width: thin; border-right: 1px solid var(--line); background: var(--bg);
}
.sidebar a { display: flex; align-items: center; gap: 10px; padding: 9px 12px; border-radius: 10px; font-size: 14px; font-weight: 600; color: var(--muted); white-space: nowrap; border: 1px solid transparent; transition: background .12s, color .12s; }
.sidebar a svg { width: 20px; height: 20px; flex: none; }
.sidebar a .lbl { overflow: hidden; text-overflow: ellipsis; }
.sidebar a:hover { color: var(--text); background: var(--bg-2); }
.sidebar a.on { color: var(--text); background: var(--card); box-shadow: inset 3px 0 0 var(--accent); }
.sidebar .cnt { margin-left: auto; font-size: 11.5px; font-weight: 700; color: var(--muted); background: var(--bg-2); border: 1px solid var(--line); border-radius: 999px; padding: 0 7px; line-height: 18px; }
.sidebar .cnt:empty { display: none; }
.sidebar a.on .cnt { background: var(--bg); }
.sidebar a.sub { padding: 7px 12px 7px 20px; font-weight: 500; font-size: 13.5px; }
.sidebar a.sub svg { width: 16px; height: 16px; opacity: .8; }
.sidebar .sep { height: 1px; background: var(--line); margin: 8px 6px; flex: none; }
.sidebar .grow { flex: 1; min-height: 12px; }
/* couverture au hasard en bas de la colonne : deux images se relaient avec une transition tirée au sort */
.sidebar .grow.on { position: relative; min-height: 110px; margin: 8px 6px 6px; perspective: 700px; overflow: hidden; }
.sidebar .grow .sc { position: absolute; left: 0; top: 0; width: 120px; aspect-ratio: 2 / 3; object-fit: cover; border-radius: 8px; border: 1px solid rgba(255, 255, 255, .18); box-shadow: 4px 8px 22px rgba(0, 0, 0, .55); cursor: pointer; opacity: 0; transform: none; transition: opacity 1.4s ease, transform 1.4s cubic-bezier(.2, .8, .25, 1), filter 1.4s ease; will-change: opacity, transform; pointer-events: none; }
/* état de départ selon la transition tirée au sort ; l'arrivée (.in) est toujours la même */
.sidebar .grow .sc[data-fx="slide-left"] { transform: translateX(-120%); }
.sidebar .grow .sc[data-fx="slide-up"] { transform: translateY(70%); }
.sidebar .grow .sc[data-fx="flip"] { transform: rotateY(-100deg); }
.sidebar .grow .sc[data-fx="zoom"] { transform: scale(.3); }
.sidebar .grow .sc[data-fx="drop"] { transform: translateY(-140%) rotate(-14deg); }
.sidebar .grow .sc[data-fx="blur"] { filter: blur(12px); transform: scale(1.1); }
.sidebar .grow .sc[data-fx="spin"] { transform: rotate(-180deg) scale(.4); }
.sidebar .grow img.sc.in { opacity: 1; filter: none; transform: rotate(var(--tilt, 0deg)); pointer-events: auto; }
.sidebar .grow img.sc.in:hover { transform: rotate(0deg) scale(1.05); z-index: 2; }
.sidebar .grow .sc.out { opacity: 0; transform: scale(.9); }
.sidebar .grow .sc[data-fx="drop"].out { transform: translateY(40%) rotate(10deg); }
.sidebar .grow .sc[data-fx="slide-left"].out { transform: translateX(60%); }
:root[data-skin="bd"] .sidebar .grow .sc { border: 2px solid var(--ink); border-radius: 4px; box-shadow: 5px 5px 0 var(--ink), var(--edge); }
:root[data-skin="bling"] .sidebar .grow .sc { border: 2px solid #c99a2e; box-shadow: inset 0 0 0 1px #f6e27a, 0 10px 24px rgba(0, 0, 0, .65); }
:root[data-skin="girly"] .sidebar .grow .sc { border: 2px solid #ffb3d4; border-radius: 14px; }
.sidebar .drophint { display: none; font-size: 12px; color: var(--muted); text-align: center; padding: 8px 6px 0; white-space: normal; line-height: 1.3; }
.side-lists:empty { display: none; }
/* cibles de dépôt (glisser-déposer un album ou une série) */
body.dragging .sidebar [data-drop] { border-color: var(--accent); border-style: dashed; color: var(--text); animation: pulse 1.2s ease-in-out infinite; }
body.dragging .sidebar .drophint { display: block; }
.sidebar [data-drop].over, body.dragging .sidebar [data-drop].over { background: var(--accent); color: var(--accent-ink); border-style: solid; border-color: var(--accent); animation: none; transform: scale(1.03); }
.sidebar [data-drop].over .cnt { color: var(--accent-ink); background: rgba(255, 255, 255, .35); border-color: transparent; }
.listcard.over { background: var(--accent); color: var(--accent-ink); border-color: var(--accent); }
body.dragging .listcard { border-style: dashed; border-color: var(--accent); }
.card.dragging { opacity: .45; }
@keyframes pulse { 50% { border-color: transparent; } }
/* écrans moyens : icônes seules */
@media (min-width: 701px) and (max-width: 1000px) {
  :root[data-tabs="left"] .sidebar { width: 62px; padding: 12px 8px; }
  :root[data-tabs="left"] .sidebar a { justify-content: center; padding: 10px 0; }
  :root[data-tabs="left"] .sidebar a .lbl, :root[data-tabs="left"] .sidebar .cnt, :root[data-tabs="left"] .sidebar .drophint { display: none; }
  :root[data-tabs="left"] .sidebar a.sub { padding: 8px 0; }
  :root[data-tabs="left"] .sidebar a.sub svg { width: 18px; height: 18px; }
}
/* onglets en haut (réglage, ou automatiquement sous 700 px) */
:root[data-tabs="top"] .layout { display: block; }
:root[data-tabs="top"] .sidebar {
  width: auto; height: auto; flex-direction: row; gap: 4px; padding: 6px 12px; overflow-x: auto; overflow-y: hidden;
  border-right: 0; border-bottom: 1px solid var(--line); scrollbar-width: none; background: rgba(15, 17, 21, .85); backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px);
}
:root[data-tabs="top"] .sidebar::-webkit-scrollbar { display: none; }
:root[data-tabs="top"] .sidebar a { flex: none; padding: 6px 12px; border-radius: 999px; font-size: 13.5px; }
:root[data-tabs="top"] .sidebar a.on { box-shadow: none; border-color: var(--line); background: var(--bg-2); }
:root[data-tabs="top"] .sidebar a.sub { padding: 6px 12px; }
:root[data-tabs="top"] .sidebar a svg { width: 17px; height: 17px; }
:root[data-tabs="top"] .sidebar .sep, :root[data-tabs="top"] .sidebar .grow, :root[data-tabs="top"] .sidebar .drophint, :root[data-tabs="top"] .sidebar .side-settings { display: none; }
:root[data-tabs="top"] .side-lists { display: contents; }
:root[data-theme="light"][data-tabs="top"] .sidebar { background: rgba(244, 245, 248, .88); }
/* favori : coin plié avec une étoile, toujours visible */
.card .fav { position: absolute; left: -1px; top: -1px; width: 46px; height: 46px; z-index: 3; pointer-events: none; clip-path: polygon(0 0, 100% 0, 0 100%); background: linear-gradient(135deg, var(--accent), #ff8a3d); filter: drop-shadow(1px 1px 2px rgba(0, 0, 0, .4)); }
.card .fav b { position: absolute; left: 5px; top: 1px; font-size: 16px; line-height: 1; color: #231a05; font-weight: 900; }
.card .remove { position: absolute; right: 8px; top: 8px; width: 26px; height: 26px; border-radius: 50%; border: 0; background: rgba(15, 17, 21, .8); color: #fff; font-size: 15px; line-height: 1; opacity: 0; transition: opacity .15s; }
.card:hover .remove, .card:focus-within .remove { opacity: 1; }
@media (hover: none) { .card .remove { opacity: .9; } }
.listhead { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; margin: 0 0 14px; }
.listhead h1 { margin: 0; }
.listgrid { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 12px; }
.listcard { display: flex; align-items: center; gap: 12px; padding: 14px 16px; border-radius: 14px; background: var(--bg-2); border: 1px solid var(--line); }
.listcard:hover { background: var(--card); }
.listcard .lic { width: 40px; height: 40px; border-radius: 10px; background: var(--card-2); display: inline-flex; align-items: center; justify-content: center; font-size: 20px; flex: none; }
.listcard b { display: block; }
.listcard small { color: var(--muted); }
.sheet .lists-row { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin-top: 10px; }
.sheet select { height: 36px; border-radius: 9px; border: 1px solid var(--line); background: var(--card); color: var(--text); padding: 0 10px; font: inherit; }
.btn.fav-on { color: var(--accent); border-color: var(--accent); }
.h1tools { display: inline-flex; gap: 6px; margin-left: 10px; vertical-align: middle; }
.h1tools .btn { height: 32px; padding: 0 10px; font-size: 13px; }

/* ---------- fil d'Ariane ---------- */
.crumbs { display: flex; flex-wrap: wrap; align-items: center; gap: 4px; padding: 14px 16px 0; color: var(--muted); font-size: 14px; }
.crumbs a:hover { color: var(--text); }
.crumbs .sep { opacity: .5; }
.crumbs .crumb-back { width: 34px; height: 34px; margin: -6px 6px -6px -4px; flex: none; border-radius: 50%; border: 1px solid var(--line); background: var(--card); color: var(--text); display: inline-flex; align-items: center; justify-content: center; }
.crumbs .crumb-back svg { width: 20px; height: 20px; }
.crumbs .crumb-back:hover { background: var(--bg-2); }
@media (hover: none) { .crumbs .crumb-back { width: 40px; height: 40px; } }
:root[data-skin="bd"] .crumbs .crumb-back { border: 2px solid var(--ink); box-shadow: 2px 2px 0 var(--ink); }
.crumbs .cur { color: var(--text); font-weight: 600; }

/* ---------- contenu ---------- */
main { padding: 10px 16px calc(40px + env(safe-area-inset-bottom)); max-width: 1800px; margin: 0 auto; }
h1 { font-size: 22px; margin: 10px 0 14px; }
h2 { font-size: 15px; text-transform: uppercase; letter-spacing: .08em; color: var(--muted); margin: 26px 0 12px; display: flex; align-items: baseline; gap: 10px; }
h2 small { text-transform: none; letter-spacing: 0; font-weight: 400; }
.grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(var(--thumb), 1fr)); gap: 18px 14px; }
.row { display: grid; grid-auto-flow: column; grid-auto-columns: var(--thumb); gap: 14px; overflow-x: auto; padding: 8px 2px 12px; scroll-snap-type: x proximity; scrollbar-width: thin; }
.row .card { scroll-snap-align: start; }
.card { position: relative; display: block; border-radius: var(--radius); outline: none; --c: #5b6578; }
.card:focus-visible .cover { box-shadow: 0 0 0 3px var(--accent); }
.cover {
  position: relative; aspect-ratio: 2 / 3; border-radius: var(--radius); overflow: hidden;
  background: var(--card) center / cover no-repeat; border: 1px solid var(--line);
  box-shadow: var(--cover-shadow, 3px 5px 12px rgba(0, 0, 0, .55));   /* petite ombre derrière chaque vignette */
  transition: transform .22s cubic-bezier(.2, .7, .3, 1.1), box-shadow .22s ease;
}
.card { transition: z-index 0s .2s; }
.card:hover { z-index: 3; transition: z-index 0s; }
@media (hover: hover) {
  .card:hover .cover, .card:focus-visible .cover { transform: translateY(-4px) scale(var(--hover-scale)); box-shadow: 6px 14px 30px rgba(0, 0, 0, .6); }
}
.cover img { width: 100%; height: 100%; object-fit: cover; }
.cover.folder img { transform: scale(1.0); }
/* --- style « halo » : fine bordure de la couleur de la couverture + lueur --- */
:root[data-covers="glow"] .card .cover { border-color: var(--c); border-color: color-mix(in srgb, var(--c) 75%, var(--bg)); box-shadow: 0 0 0 1px rgba(0, 0, 0, .35), var(--cover-shadow, 3px 5px 12px rgba(0, 0, 0, .55)), 0 0 22px -6px var(--c); }
@media (hover: hover) { :root[data-covers="glow"] .card:hover .cover { box-shadow: 0 0 0 1px rgba(0, 0, 0, .35), 6px 14px 30px rgba(0, 0, 0, .6), 0 0 34px -4px var(--c); } }
/* --- style « livre » : dos, tranche, bordure colorée, ombre portée, pile pour les séries --- */
:root[data-covers="book"] .card.album .cover, :root[data-covers="book"] .card.folder .cover, :root[data-covers="book"] .sheet .cover {
  border-radius: 3px 9px 9px 3px; border-color: var(--c); border-color: color-mix(in srgb, var(--c) 70%, #000);
  box-shadow: -1px 0 0 rgba(0, 0, 0, .5), 3px 0 0 -1px #eee7d6, 5px 0 0 -2px #d9d1bd, 7px 0 0 -3px #c3bba6,
    9px 9px 18px rgba(0, 0, 0, .55), 0 0 22px -8px var(--c);
}
:root[data-covers="book"] .card.album .cover::before, :root[data-covers="book"] .card.folder .cover::before, :root[data-covers="book"] .sheet .cover::before {
  content: ""; position: absolute; inset: 0; z-index: 2; pointer-events: none; border-radius: inherit;
  background: linear-gradient(90deg, rgba(0, 0, 0, .38) 0, rgba(255, 255, 255, .16) 2.5%, rgba(0, 0, 0, .14) 5%, rgba(0, 0, 0, 0) 9%, rgba(0, 0, 0, 0) 90%, rgba(255, 255, 255, .07) 100%),
    linear-gradient(180deg, rgba(255, 255, 255, .08), rgba(255, 255, 255, 0) 30%);
}
:root[data-covers="book"] .cover.ghost, :root[data-covers="book"] .cover.ghost::before { box-shadow: none; background: transparent; border-radius: var(--radius); }
@media (hover: hover) {
  :root[data-covers="book"] .card.album:hover .cover, :root[data-covers="book"] .card.folder:hover .cover, :root[data-covers="book"] .card:focus-visible .cover {
    transform: perspective(900px) rotateY(-9deg) translateY(-5px) scale(var(--hover-scale));
    box-shadow: -1px 0 0 rgba(0, 0, 0, .5), 4px 0 0 -1px #eee7d6, 7px 0 0 -2px #d9d1bd, 10px 0 0 -3px #c3bba6,
      18px 18px 30px rgba(0, 0, 0, .6), 0 0 34px -4px var(--c);
  }
}
/* les séries : deux albums qui dépassent derrière la couverture, dans la couleur de la série */
:root[data-covers="book"] .card.folder { isolation: isolate; }
:root[data-covers="book"] .card.folder::before, :root[data-covers="book"] .card.folder::after {
  content: ""; position: absolute; left: 0; top: 0; width: 100%; aspect-ratio: 2 / 3; z-index: -1; border-radius: 3px 9px 9px 3px;
  background: var(--c); background: linear-gradient(90deg, color-mix(in srgb, var(--c) 55%, #000), color-mix(in srgb, var(--c) 80%, var(--card)) 30%, color-mix(in srgb, var(--c) 65%, var(--card)));
  border: 1px solid rgba(0, 0, 0, .45); box-shadow: 4px 4px 12px rgba(0, 0, 0, .45); transition: transform .22s cubic-bezier(.2, .7, .3, 1.1);
}
:root[data-covers="book"] .card.folder::before { transform: rotate(-3deg) translate(-5px, 3px) scale(.96); opacity: .8; }
:root[data-covers="book"] .card.folder::after { transform: rotate(2.5deg) translate(6px, 1px) scale(.98); opacity: .9; }
@media (hover: hover) {
  :root[data-covers="book"] .card.folder:hover::before { transform: rotate(-6deg) translate(-10px, 5px) scale(.96); }
  :root[data-covers="book"] .card.folder:hover::after { transform: rotate(5deg) translate(12px, 2px) scale(.98); }
}
:root[data-covers="book"] .grid { gap: 22px 20px; }
:root[data-covers="book"] .row { gap: 20px; padding-left: 6px; }
:root[data-covers="book"] .card .fav { left: 2px; }
.cover .ph { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; color: var(--muted); }
.cover .ph svg { width: 42%; height: 42%; opacity: .5; }
.cover.err { border-color: var(--warn); }
.badge.count { gap: 5px; padding-left: 7px; }
.badge.count svg { width: 14px; height: 14px; opacity: .85; }
.badge {
  position: absolute; top: 8px; right: 8px; min-width: 26px; height: 26px; padding: 0 8px; border-radius: 999px;
  display: inline-flex; align-items: center; justify-content: center; font-size: 12px; font-weight: 700;
  background: rgba(15, 17, 21, .8); color: var(--text); backdrop-filter: blur(4px);
}
.badge.ok { background: var(--ok); color: #06301b; }
.badge.ok svg { width: 16px; height: 16px; }
.badge.warn { background: var(--warn); color: #3a0b0b; }
.bar { position: absolute; left: 0; right: 0; bottom: 0; height: 5px; background: rgba(0, 0, 0, .55); }
.bar i { display: block; height: 100%; background: var(--accent); }
.card .title { margin: 8px 2px 0; font-size: 13.5px; font-weight: 600; line-height: 1.3; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.card .sub { margin: 2px 2px 0; font-size: 12px; color: var(--muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.card .info {
  position: absolute; left: 8px; bottom: 10px; width: 28px; height: 28px; border-radius: 50%; border: 0; z-index: 3;
  background: rgba(15, 17, 21, .75); color: #fff; font-weight: 700; font-family: Georgia, serif; font-style: italic;
  opacity: 0; transition: opacity .15s; backdrop-filter: blur(4px);
}
.card .info.sum { left: 42px; font-family: inherit; font-style: normal; font-size: 16px; letter-spacing: -1px; line-height: 1; padding-bottom: 6px; }
.card:hover .info, .card:focus-within .info { opacity: 1; }
/* bulle de résumé au-dessus d'une vignette */
.sumpop { position: fixed; z-index: 45; background: var(--bg-2); color: var(--text); border: 1px solid var(--line); border-radius: 14px; box-shadow: var(--shadow); padding: 12px 14px; font-size: 14px; line-height: 1.45; animation: fade .15s; }
.sumpop b { display: block; margin-bottom: 4px; }
.sumpop p { margin: 0; }
.sumpop .ext { white-space: nowrap; }
.sumpop::after { content: ""; position: absolute; left: var(--tail-x, 50%); width: 16px; height: 16px; background: var(--bg-2); border-right: 1px solid var(--line); border-bottom: 1px solid var(--line); transform: translateX(-50%) rotate(45deg); bottom: -9px; }
.sumpop[data-tail="up"]::after { bottom: auto; top: -9px; transform: translateX(-50%) rotate(-135deg); }
:root[data-skin="bd"] .sumpop { background: var(--paper); color: var(--pop-ink); border: 2.5px solid var(--ink); border-radius: 20px; box-shadow: 4px 4px 0 var(--ink); font-family: var(--hand); font-size: 16px; }
:root[data-skin="bd"] .sumpop b { font-family: var(--lettering); font-weight: 400; letter-spacing: .04em; font-size: 18px; }
:root[data-skin="bd"] .sumpop::after { background: var(--paper); border-right: 2.5px solid var(--ink); border-bottom: 2.5px solid var(--ink); width: 20px; height: 20px; bottom: -12px; }
:root[data-skin="bd"] .sumpop[data-tail="up"]::after { top: -12px; bottom: auto; }
:root[data-skin="bd"] .sumpop a { color: #1d4ed8; }
@media (hover: none) { .card .info { opacity: .9; } }

.empty { text-align: center; color: var(--muted); padding: 60px 20px; }
.empty strong { color: var(--text); }
.spinner { width: 28px; height: 28px; border: 3px solid var(--line); border-top-color: var(--accent); border-radius: 50%; animation: spin .9s linear infinite; margin: 0 auto 14px; }

/* barre des lettres verticale, sur un côté */
.letters.rail { --lh: clamp(19px, calc((100vh - var(--bar-h) - 76px) / 27), 42px); position: fixed; top: calc(50% + var(--bar-h) / 2); transform: translateY(-50%); z-index: 15; display: flex; flex-direction: column; gap: 0; padding: 6px 4px; background: var(--bg-2); border: 1px solid var(--line); border-radius: 14px; box-shadow: var(--shadow); max-height: calc(100vh - var(--bar-h) - 24px); overflow: hidden; }
.letters.rail.right { right: 10px; }
.letters.rail.left { left: 10px; }
.letters.rail button { min-width: 44px; width: 44px; height: var(--lh); border-radius: 8px; font-size: calc(var(--lh) * .58); font-weight: 700; line-height: 1; padding: 0; }
.letters.rail button.on { background: transparent; border-color: transparent; color: var(--text); }
.letters.rail button.on:hover { background: var(--accent); color: var(--accent-ink); transform: scale(1.12); }
.letters.rail.size-normal { --lh: 21px; padding: 4px 2px; border-radius: 12px; }
.letters.rail.size-normal button { min-width: 24px; width: 24px; font-size: 12px; font-weight: 600; }
body:has(.letters.rail.right) main { padding-right: 72px; }
body:has(.letters.rail.left) main { padding-left: 72px; }
body:has(.letters.rail.right.size-normal) main { padding-right: 48px; }
body:has(.letters.rail.left.size-normal) main { padding-left: 48px; }
:root[data-tabs="left"] .letters.rail.left { left: 210px; }
@media (min-width: 701px) and (max-width: 1000px) { :root[data-tabs="left"] .letters.rail.left { left: 70px; } }
@media (max-width: 700px) { .letters.rail, .letters.rail.size-normal { --lh: 19px; right: 2px; padding: 2px 1px; } .letters.rail.left, :root[data-tabs="left"] .letters.rail.left { left: 2px; } .letters.rail button, .letters.rail.size-normal button { width: 22px; min-width: 22px; font-size: 11px; } body:has(.letters.rail.right) main, body:has(.letters.rail.right.size-normal) main { padding-right: 30px; } body:has(.letters.rail.left) main, body:has(.letters.rail.left.size-normal) main { padding-left: 30px; } }

/* barre des lettres (gros dossiers) */
.letters { position: sticky; top: var(--bar-h); z-index: 10; display: flex; flex-wrap: wrap; gap: 4px; padding: 8px 0; background: linear-gradient(var(--bg) 80%, transparent); }
.letters button { min-width: 28px; height: 28px; border-radius: 7px; border: 1px solid transparent; background: transparent; color: var(--muted); font-size: 13px; font-weight: 600; }
.letters button.on { color: var(--text); background: var(--bg-2); border-color: var(--line); }
.letters button.on:hover { background: var(--card-2); }
.letters button:disabled { opacity: .3; cursor: default; }

/* ---------- fiche album (modale) ---------- */
.backdrop { position: fixed; inset: 0; z-index: 50; background: rgba(0, 0, 0, .6); display: flex; align-items: center; justify-content: center; padding: 16px; animation: fade .15s; }
@keyframes fade { from { opacity: 0; } }
.sheet {
  width: min(680px, 100%); max-height: calc(100vh - 32px); overflow: auto; background: var(--bg-2);
  border: 1px solid var(--line); border-radius: 16px; box-shadow: var(--shadow); display: grid;
  grid-template-columns: 200px 1fr; gap: 18px; padding: 18px; position: relative;
}
.sheet .cover { align-self: start; }
.sheet .sheet-left { align-self: start; display: flex; flex-direction: column; gap: 10px; min-width: 0; }
.sheet .sheet-listsel select { width: 100%; }
.sheet h3 { margin: 4px 0 6px; font-size: 19px; line-height: 1.25; padding-right: 36px; }
.sheet .path { font-size: 12.5px; color: var(--muted); word-break: break-all; }
.sheet dl { display: grid; grid-template-columns: auto 1fr; gap: 4px 14px; margin: 14px 0; font-size: 14px; }
.sheet dt { color: var(--muted); }
.sheet dd { margin: 0; }
.sheet .error { color: var(--warn); background: rgba(255, 123, 123, .1); border: 1px solid rgba(255, 123, 123, .3); border-radius: 8px; padding: 8px 10px; font-size: 13.5px; }
.sheet .actions { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 6px; }
.sheet .summary { margin: 0 0 14px; padding: 10px 12px; border-left: 3px solid var(--accent); background: var(--card); border-radius: 0 10px 10px 0; font-size: 14px; line-height: 1.5; color: var(--text); }
.sheet .summary.muted { color: var(--muted); font-style: italic; }
.sheet .summary .ext { white-space: nowrap; }
.btn { display: inline-flex; align-items: center; gap: 7px; height: 38px; padding: 0 14px; border-radius: 10px; border: 1px solid var(--line); background: var(--card); font-weight: 600; font-size: 14px; }
.btn:hover { background: var(--card-2); }
.btn.primary { background: var(--accent); color: var(--accent-ink); border-color: transparent; }
.btn.primary:hover { filter: brightness(1.08); }
.btn svg { width: 18px; height: 18px; }
.close { position: absolute; top: 10px; right: 10px; }
.pbar { height: 8px; border-radius: 999px; background: var(--card-2); overflow: hidden; margin: 4px 0 0; }
.pbar i { display: block; height: 100%; background: var(--accent); }
@media (max-width: 560px) {
  .sheet { grid-template-columns: 1fr; padding: 14px; }
  .sheet .sheet-left { width: 60%; margin: 0 auto; }
  .sheet .sheet-left .cover { width: 78%; margin: 0 auto; }
}

/* profils et code d'accès */
.backdrop.locked { background: rgba(0, 0, 0, .85); }
.sheet.pin, .sheet.profiles { display: block; }
.sheet.pin input, .pin-inline input { height: 40px; border-radius: 10px; border: 1px solid var(--line); background: var(--card); color: var(--text); padding: 0 12px; font: inherit; font-size: 16px; }
.sheet.pin input { width: 100%; margin: 10px 0; }
.sheet .error[hidden] { display: none; }
.ptiles { display: flex; flex-wrap: wrap; gap: 12px; margin: 14px 0; }
.ptile { display: flex; flex-direction: column; align-items: center; gap: 8px; width: 108px; padding: 12px 6px; border-radius: 14px; border: 2px solid transparent; background: var(--card); position: relative; }
.ptile:hover { background: var(--card-2); }
.ptile.on { border-color: var(--accent); }
.ptile.add { border: 2px dashed var(--line); background: transparent; color: var(--muted); }
.pavatar { width: 56px; height: 56px; border-radius: 50%; background: linear-gradient(135deg, var(--accent), #ff7b4a); color: #231a05; display: inline-flex; align-items: center; justify-content: center; font-weight: 800; font-size: 24px; }
.pavatar.small { width: 24px; height: 24px; font-size: 13px; }
.ptile.add .pavatar { background: var(--card-2); color: var(--muted); }
.pname { font-size: 13.5px; font-weight: 600; text-align: center; }
.plock { position: absolute; top: 6px; right: 8px; font-size: 12px; }
.pin-inline { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; margin-top: 8px; }
.pin-inline input { flex: 1; min-width: 120px; }
.pin-inline .error { width: 100%; color: var(--warn); margin: 0; }
.plist { display: flex; flex-direction: column; gap: 6px; align-items: flex-end; }
.prow { display: inline-flex; align-items: center; gap: 8px; }
.ignored-here { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 14px; margin: 4px 0 14px; font-size: 13.5px; }
.ignored-here code { font-size: 12.5px; }
.btn.mini { height: 28px; padding: 0 9px; font-size: 12.5px; }

/* toast */
.toast { position: fixed; right: 16px; top: calc(var(--bar-h) + env(safe-area-inset-top, 0px) + 12px); z-index: 60; animation: toastin .25s cubic-bezier(.2, .8, .3, 1.1); background: var(--card-2); border: 1px solid var(--line); color: var(--text); padding: 10px 16px; border-radius: 12px; box-shadow: var(--shadow); font-size: 14px; max-width: calc(100vw - 32px); display: flex; align-items: center; gap: 10px; }
.toast .spinner { width: 16px; height: 16px; border-width: 2px; margin: 0; }
@keyframes toastin { from { opacity: 0; transform: translateY(-10px) scale(.96); } }
body:has(.letters.rail.right) .toast { right: 72px; }   /* à gauche de la barre des lettres, sans la cacher */
@media (max-width: 700px) { .toast, body:has(.letters.rail.right) .toast { left: 12px; right: 12px; justify-content: center; } }

/* ---------- réglages mobiles ---------- */
@media (max-width: 700px) {
  :root[data-covers="book"] .grid, .grid { grid-template-columns: repeat(auto-fill, minmax(min(var(--thumb), 44vw), 1fr)); gap: 14px 10px; }
  .row { grid-auto-columns: min(var(--thumb), 40vw); }
  main { padding-left: 12px; padding-right: 12px; }
  .brand b { display: none; }
  .topbar { gap: 8px; }
  .card .title { font-size: 12.5px; }
  .stats { display: none; }
}
.stats { font-size: 13px; color: var(--muted); white-space: nowrap; }

/* ---------- pages (pagination) ---------- */
.pager { display: flex; flex-wrap: wrap; align-items: center; gap: 4px; margin: 6px 0 14px; }
.pager .pg { min-width: 34px; height: 34px; padding: 0 8px; border-radius: 8px; border: 1px solid var(--line); background: var(--bg-2); color: var(--text); font-weight: 600; }
.pager .pg:hover:not(:disabled) { background: var(--card-2); }
.pager .pg.on { background: var(--accent); color: var(--accent-ink); border-color: transparent; }
.pager .pg:disabled { opacity: .35; cursor: default; }
.pager .dots { padding: 0 4px; color: var(--muted); }
.pager .pginfo { margin-left: auto; color: var(--muted); font-size: 13px; }
.h1sub { font-size: 14px; font-weight: 400; }

/* ---------- page Réglages ---------- */
.settings { display: grid; grid-template-columns: repeat(auto-fit, minmax(340px, 1fr)); gap: 18px; align-items: start; }
.settings section { background: var(--bg-2); border: 1px solid var(--line); border-radius: 16px; padding: 6px 18px 14px; }
.settings h2 { margin: 12px 0 6px; }
.field { display: flex; align-items: center; justify-content: space-between; gap: 14px; padding: 10px 0; border-top: 1px solid var(--line); }
.field:first-of-type { border-top: 0; }
.flabel { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.flabel small { color: var(--muted); font-size: 12.5px; }
.field select, .field input[type=number] { max-width: 56%; height: 36px; border-radius: 9px; border: 1px solid var(--line); background: var(--card); color: var(--text); padding: 0 10px; font: inherit; }
.field input[type=number] { width: 90px; }
.field .actions { display: flex; flex-wrap: wrap; gap: 8px; justify-content: flex-end; }
.switch { position: relative; width: 46px; height: 26px; flex: none; }
.switch input { position: absolute; inset: 0; opacity: 0; margin: 0; cursor: pointer; z-index: 2; width: 100%; height: 100%; }
.switch i { position: absolute; inset: 0; border-radius: 999px; background: var(--card-2); border: 1px solid var(--line); transition: background .15s; }
.switch i::after { content: ""; position: absolute; top: 3px; left: 3px; width: 18px; height: 18px; border-radius: 50%; background: var(--muted); transition: transform .15s, background .15s; }
.switch input:checked + i { background: var(--accent); border-color: transparent; }
.switch input:checked + i::after { transform: translateX(20px); background: var(--accent-ink); }
.settings code { background: var(--card); padding: 1px 6px; border-radius: 6px; font-size: 12.5px; }
/* présentation « signets » : une colonne d'onglets, une seule rubrique affichée */
.settings.tabbed { display: grid; grid-template-columns: 200px minmax(0, 1fr); gap: 18px; }
.stabs { display: flex; flex-direction: column; gap: 4px; position: sticky; top: calc(var(--bar-h) + 12px); background: var(--bg-2); border: 1px solid var(--line); border-radius: 16px; padding: 8px; }
.stabs .tab { padding: 9px 14px; border-radius: 10px; font-weight: 600; color: var(--muted); border: 1px solid transparent; }
.stabs .tab:hover { color: var(--text); background: var(--bg-2); }
.stabs .tab.on { color: var(--text); background: var(--card); border-color: var(--line); box-shadow: inset 3px 0 0 var(--accent); }
.spane section { max-width: 900px; }
@media (max-width: 760px) {
  .settings.tabbed { grid-template-columns: 1fr; }
  .stabs { position: static; flex-direction: row; flex-wrap: wrap; background: none; border: 0; padding: 0; }
  .stabs .tab { padding: 6px 12px; border-radius: 999px; border-color: var(--line); background: var(--bg-2); font-size: 13.5px; }
  .stabs .tab.on { background: var(--accent); color: var(--accent-ink); box-shadow: none; border-color: transparent; }
}
.adult-gate { max-width: 460px; background: var(--bg-2); border: 1px solid var(--line); border-radius: 16px; padding: 14px 18px; }
.sidebar a.adult .adultcnt { background: #c8102e; color: #fff; border-color: transparent; }
.sidebar a.adult.unlocked .adultcnt { background: var(--ok); color: #06250f; }
.badge.adult { background: #c8102e; color: #fff; font-weight: 800; letter-spacing: .02em; }
.btn.adult-on { background: #c8102e; color: #fff; border-color: transparent; }
.card .cover .retry { position: absolute; right: 8px; bottom: 10px; z-index: 3; width: 28px; height: 28px; border-radius: 50%; border: 1px solid rgba(255, 255, 255, .25); background: rgba(15, 17, 21, .85); color: #fff; font-size: 17px; line-height: 1; display: inline-flex; align-items: center; justify-content: center; opacity: 0; transition: opacity .15s; }
.card:hover .cover .retry, .card:focus-within .cover .retry, .card .cover.err .retry, .card .cover.fail .retry { opacity: 1; }
.card .cover .retry:hover { background: var(--accent); color: var(--accent-ink); }
.card .cover .retry.spin { animation: spin 1s linear infinite; }
.card .cover.err .retry, .card .cover.fail .retry { top: 6px; bottom: auto; }
.card .cover.err .badge.warn { top: 6px; left: 6px; right: auto; }
.card .cover.fail .badge { right: 40px; }
.cover.folder .badge.ok { top: auto; bottom: 10px; }                 /* dossier tout lu : coche en bas à droite */
.cover.folder .badge.adult { top: 40px; }                             /* sous le compteur d'albums */
.settings p a { color: var(--blue); }

/* ---------- Bédéthèque ---------- */
.bdt-panel { background: var(--bg-2); border: 1px solid var(--line); border-radius: 14px; padding: 12px 14px; margin: 0 0 16px; }
.bdt-panel.full { border-color: rgba(79, 211, 140, .45); }
.bdt-row { display: flex; align-items: flex-start; gap: 12px; flex-wrap: wrap; }
.bdt-logo { flex: none; width: 34px; height: 34px; border-radius: 9px; background: #e8541e; color: #fff; font-weight: 800; font-size: 13px; display: inline-flex; align-items: center; justify-content: center; letter-spacing: .5px; }
.bdt-main { flex: 1 1 320px; min-width: 0; display: flex; flex-direction: column; gap: 6px; font-size: 14px; }
.bdt-actions { display: flex; flex-wrap: wrap; gap: 6px; align-items: flex-start; }
.bdt-actions .btn { height: 34px; padding: 0 11px; font-size: 13px; }
.bdt-progress { display: flex; align-items: center; gap: 10px; }
.bdt-progress .pbar { flex: 1; max-width: 260px; margin: 0; }
.bdt-missing, .bdt-unmatched { display: flex; flex-wrap: wrap; gap: 5px; align-items: center; color: var(--muted); font-size: 13px; }
.chip { display: inline-flex; align-items: center; gap: 4px; padding: 3px 9px; border-radius: 999px; background: rgba(255, 123, 123, .14); color: var(--text); border: 1px solid rgba(255, 123, 123, .35); font-size: 12.5px; }
.chip small { color: var(--muted); }
.chip.gray { background: var(--card); border-color: var(--line); }
.chip:hover { background: var(--card-2); }
.ext { color: var(--blue); font-size: 13px; margin-left: 6px; white-space: nowrap; }
.warnlabel { display: inline-block; margin-left: 6px; padding: 1px 7px; border-radius: 999px; background: rgba(255, 180, 84, .18); color: var(--accent); font-size: 12px; font-weight: 600; }
.bdt-choose { margin-top: 10px; display: flex; flex-direction: column; gap: 8px; }
.bdt-choose p { margin: 0; }
.cands { display: grid; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); gap: 8px; }
.cand { text-align: left; display: flex; flex-direction: column; gap: 2px; padding: 9px 12px; border-radius: 10px; border: 1px solid var(--line); background: var(--card); }
.cand:hover { background: var(--card-2); border-color: var(--accent); }
.cand small { color: var(--muted); }
.bdt-search { display: flex; gap: 8px; }
.bdt-search input { flex: 1; height: 36px; border-radius: 9px; border: 1px solid var(--line); background: var(--card); color: var(--text); padding: 0 12px; font: inherit; min-width: 0; }
.bdt-results .error { color: var(--warn); }
/* dossier de one shots */
.os-sec { margin-top: 10px; border-top: 1px solid var(--line); padding-top: 8px; }
.os-sec summary { cursor: pointer; font-weight: 600; font-size: 14px; }
.os-item { display: flex; flex-wrap: wrap; gap: 6px 12px; align-items: center; padding: 6px 0; border-bottom: 1px dashed var(--line); }
.os-item:last-child { border-bottom: 0; }
.os-name { flex: 0 1 260px; min-width: 0; font-size: 13.5px; }
.os-cands { display: flex; flex-wrap: wrap; gap: 5px; align-items: center; flex: 1 1 300px; }
.os-cands .chip { cursor: pointer; }
.os-search { flex: 1 1 100%; display: flex; flex-direction: column; gap: 8px; padding: 8px 0 4px; }
.os-search .small { font-size: 12.5px; margin: 0; }
.os-ok { margin: 8px 0 0; padding-left: 18px; font-size: 13.5px; columns: 2 320px; }
.os-ok li { break-inside: avoid; margin-bottom: 3px; }
.os-ok li .os-search { break-inside: avoid; }
.linkbtn { border: 0; background: none; color: var(--muted); text-decoration: underline; cursor: pointer; font: inherit; font-size: 12px; padding: 0; }
.card .sub.bdt { position: relative; padding-bottom: 6px; }
.card .sub.bdt i { position: absolute; left: 0; bottom: 0; height: 3px; background: var(--accent); border-radius: 2px; }
.card .sub.bdt.full { color: var(--ok); }
.card .sub.bdt.full i { background: var(--ok); }
.cover.ghost { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 4px; border: 2px dashed var(--line); background: transparent; color: var(--muted); box-shadow: none; }
.cover.ghost .gnum { font-size: 26px; font-weight: 800; letter-spacing: .5px; }
.cover.ghost .glabel { font-size: 12px; text-transform: uppercase; letter-spacing: .1em; }
.card.ghost .title { color: var(--muted); }
.tabs { display: flex; flex-wrap: wrap; gap: 6px; margin: 0 0 14px; }
.tabs .tab { padding: 6px 12px; border-radius: 999px; border: 1px solid var(--line); background: var(--bg-2); font-size: 13.5px; font-weight: 600; color: var(--muted); }
.tabs .tab.on { background: var(--accent); color: var(--accent-ink); border-color: transparent; }
.coltable { width: 100%; border-collapse: collapse; font-size: 14px; }
.coltable th { text-align: left; color: var(--muted); font-weight: 600; font-size: 12.5px; text-transform: uppercase; letter-spacing: .06em; padding: 6px 10px; border-bottom: 1px solid var(--line); }
.coltable td { padding: 8px 10px; border-bottom: 1px solid var(--line); vertical-align: top; }
.coltable td a { color: var(--text); }
.coltable td a:hover { color: var(--accent); }
.coltable .num { white-space: nowrap; min-width: 110px; }
.coltable .num.ok { color: var(--ok); }
.coltable .pbar { margin-top: 4px; }
.unlinked { margin-top: 18px; color: var(--muted); }
.unlinked summary { cursor: pointer; font-weight: 600; }
.chips { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 10px; }
@media (max-width: 700px) { .coltable th:nth-child(3), .coltable td:nth-child(3) { display: none; } }

/* ======================================================================
   Lecteur
   ====================================================================== */
body.reader { overflow: hidden; height: 100dvh; background: #000; touch-action: manipulation; }
body.reader.bg-dark { background: #15171c; }
body.reader.bg-gray { background: #5a5e68; }
body.reader.bg-white { background: #f3f1ea; }
body.reader.night #stage img { filter: brightness(calc(1 - var(--night, 0))); }   /* seulement en mode nuit : un filtre sur une image zoomée coûte cher */
body.reader.hide-bars { cursor: none; }
.rbar {
  position: fixed; left: 0; right: 0; z-index: 10; height: var(--bar-h); display: flex; align-items: center; gap: 10px;
  padding: 0 max(12px, env(safe-area-inset-right)) 0 max(12px, env(safe-area-inset-left));
  background: rgba(15, 17, 21, .82); backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px);
  transition: transform .22s ease, opacity .22s ease;
}
.rbar.top { top: 0; padding-top: env(safe-area-inset-top); height: calc(var(--bar-h) + env(safe-area-inset-top)); }
.rbar.bottom { bottom: 0; padding-bottom: env(safe-area-inset-bottom); height: calc(var(--bar-h) + env(safe-area-inset-bottom)); }
.hide-bars .rbar.top { transform: translateY(-110%); opacity: 0; }
.hide-bars .rbar.bottom { transform: translateY(110%); opacity: 0; }
.rbtn { flex: none; width: 40px; height: 40px; border-radius: 10px; border: 0; background: transparent; display: inline-flex; align-items: center; justify-content: center; color: var(--text); }
.rbtn:hover { background: rgba(255, 255, 255, .1); }
.rbtn.on { color: var(--accent); }
.rbtn svg { width: 22px; height: 22px; }
.rbtn.text { width: auto; padding: 0 10px; font-weight: 600; font-size: 14px; }
.rtitle { flex: 1; min-width: 0; line-height: 1.2; }
.rtitle .f { font-size: 12px; color: var(--muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.rtitle .n { font-size: 15px; font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.rcount { flex: none; font-variant-numeric: tabular-nums; font-weight: 600; font-size: 14px; color: var(--muted); }
.rbar input[type=range] { flex: 1; min-width: 60px; accent-color: var(--accent); height: 28px; margin: 0 4px; }
.rtools { display: flex; gap: 2px; flex: none; }

#stage {
  position: fixed; inset: 0; overflow: hidden; display: flex; align-items: center; justify-content: center;
  max-width: none; width: auto; margin: 0; padding: 0;   /* c'est un <main> : sans ça il hérite des marges et de la largeur maxi (1800 px) de la bibliothèque */
  -webkit-overflow-scrolling: touch; overscroll-behavior: contain;
}
#stage .wrap { width: 100%; height: 100%; display: flex; align-items: center; justify-content: center; }
#stage img { max-width: 100%; max-height: 100%; width: auto; height: auto; user-select: none; -webkit-user-drag: none; -webkit-touch-callout: none; object-fit: contain; }
#stage img:not([src]) { display: none; }
body.fit-width #stage { overflow-y: auto; align-items: flex-start; }
body.fit-width #stage .wrap { height: auto; min-height: 100%; align-items: flex-start; }
body.fit-width #stage img { width: 100%; max-height: none; }
body.fit-original #stage { overflow: auto; align-items: flex-start; justify-content: flex-start; }
body.fit-original #stage .wrap { width: max-content; height: max-content; min-width: 100%; min-height: 100%; }
body.fit-original #stage img { max-width: none; max-height: none; }
/* double page */
#stage .spread { width: 100%; height: 100%; display: flex; align-items: center; justify-content: center; gap: 0; }
#stage .spread img { max-height: 100%; max-width: 50%; width: auto; height: auto; object-fit: contain; }
#stage .spread img:only-child, #stage .spread img:not([hidden]):first-child:has(+ img[hidden]) { max-width: 100%; }
#stage .spread.rtl { flex-direction: row-reverse; }
#stage .spread img[hidden] { display: none; }
/* défilement continu */
body.mode-scroll #stage { overflow-y: auto; align-items: flex-start; justify-content: center; }
#stage .scroll { width: var(--scroll-w, 100%); max-width: 100%; margin: 0 auto; display: flex; flex-direction: column; }
#stage .scroll .spage { width: 100%; background: rgba(255, 255, 255, .04); }
#stage .scroll .spage img { width: 100%; height: auto; max-width: none; max-height: none; display: block; }
#stage .scroll .spage img:not([src]) { display: none; }
body.mode-scroll #stage .wrap, body.mode-double #stage .wrap { display: none; }
/* case par case : l'image reste mise en page « page entière », une transformation la cadre sur la case */
body.mode-panels #stage { overflow: hidden; }
body.mode-panels #stage img { transform-origin: 0 0; will-change: transform; transition: transform .55s cubic-bezier(.22, .75, .25, 1); }
body.mode-panels #stage img.nofx { transition: none; }
/* voile autour de la case (réglage « assombrir le reste de la planche ») : troué à la case, le trou suit l'image */
#stage .dim { position: absolute; inset: 0; z-index: 2; pointer-events: none; background: rgba(0, 0, 0, var(--dim, 0)); transition: clip-path .55s cubic-bezier(.22, .75, .25, 1); }
#stage .dim.nofx { transition: none; }
body:not(.mode-panels) #stage .dim, body.zoomed #stage .dim { display: none; }
body.mode-panels:not(.zoomed) #stage { cursor: grab; }
body.mode-panels:not(.zoomed) #stage:active { cursor: grabbing; }
body.mode-panels .rbtn#panels, body.mode-panels #panels { color: var(--accent); }
/* pas de barre de défilement visible dans le lecteur : molette, touches et doigt suffisent */
#stage { scrollbar-width: none; }
#stage::-webkit-scrollbar { display: none; }
/* zoom libre */
#stage .wrap, #stage .spread { transform-origin: 0 0; will-change: transform; }
body.zoomed #stage { overflow: hidden !important; cursor: grab; }
body.zoomed #stage:active { cursor: grabbing; }
body.zoomed #stage img { transition: none; }
/* bande des miniatures (clic droit) */
.strip { position: fixed; inset: 0; z-index: 30; background: rgba(0, 0, 0, .78); backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px); display: flex; flex-direction: column; justify-content: center; align-items: stretch; animation: fade .15s; }
.strip-row { display: flex; gap: 14px; overflow-x: auto; overflow-y: hidden; padding: 24px 40px; scroll-behavior: auto; scrollbar-width: none; align-items: flex-end; }
.strip-row::-webkit-scrollbar { display: none; }
.sthumb { flex: none; width: min(22vh, 180px); border: 0; background: transparent; padding: 0; color: #fff; display: flex; flex-direction: column; align-items: center; gap: 8px; opacity: .8; transition: transform .15s, opacity .15s; }
.sthumb img { width: 100%; aspect-ratio: 2 / 3; object-fit: contain; background: #1c2029; border-radius: 6px; box-shadow: 0 8px 24px rgba(0, 0, 0, .6); border: 2px solid transparent; }
.sthumb span { font-weight: 700; font-size: 14px; background: rgba(0, 0, 0, .6); padding: 2px 10px; border-radius: 999px; }
.sthumb:hover, .sthumb.sel { opacity: 1; transform: translateY(-8px) scale(1.06); }
.sthumb.cur { opacity: 1; transform: scale(1.12); }
.sthumb.cur img { border-color: var(--accent); }
.sthumb.cur span { background: var(--accent); color: var(--accent-ink); }
.sthumb { position: relative; }
.sthumb .setcov { position: absolute; top: 8px; left: 50%; transform: translateX(-50%); font-style: normal; font-size: 12px; font-weight: 700; white-space: nowrap; padding: 3px 10px; border-radius: 999px; background: rgba(15, 17, 21, .85); color: #fff; border: 1px solid rgba(255, 255, 255, .3); opacity: 0; transition: opacity .15s; cursor: pointer; }
.sthumb:hover .setcov, .sthumb.sel .setcov { opacity: 1; }
.sthumb .sbad { width: 100%; aspect-ratio: 2 / 3; display: flex; align-items: center; justify-content: center; text-align: center; padding: 10px; box-sizing: border-box; font-style: normal; font-size: 11.5px; line-height: 1.35; color: #ffd1d1; background: repeating-linear-gradient(135deg, #2a1c22 0 10px, #23171c 10px 20px); border: 2px dashed #a8495a; border-radius: 6px; overflow: hidden; word-break: break-word; }
.sthumb.cur .sbad { border-color: var(--accent); }
.sthumb .setcov:hover { background: var(--accent); color: var(--accent-ink); border-color: transparent; }
.sthumb.iscover .setcov { opacity: 1; background: var(--accent); color: var(--accent-ink); border-color: transparent; pointer-events: none; }
.sthumb.iscover img { border-color: var(--accent); }
.strip-hint { text-align: center; color: rgba(255, 255, 255, .7); font-size: 13.5px; padding-bottom: 18px; }
body.strip-open #stage { filter: blur(2px); }
#stage .loading { position: fixed; top: calc(var(--bar-h) + 14px); right: 14px; z-index: 5; width: 22px; height: 22px; border: 3px solid rgba(255, 255, 255, .25); border-top-color: var(--accent); border-radius: 50%; animation: spin .9s linear infinite; }
#stage.loading-visible img { opacity: .85; }
.rmsg { position: fixed; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 12px; text-align: center; padding: 24px; color: var(--muted); z-index: 6; }
.rmsg h2 { color: var(--text); margin: 0; letter-spacing: 0; text-transform: none; font-size: 20px; }
.rmsg .btn { background: var(--card-2); }

/* fin d'album */
.end { position: fixed; inset: 0; z-index: 30; background: rgba(0, 0, 0, .78); display: flex; align-items: center; justify-content: center; padding: 20px; animation: fade .2s; }
.end .box { background: var(--bg-2); border: 1px solid var(--line); border-radius: 18px; padding: 24px; width: min(420px, 100%); text-align: center; box-shadow: var(--shadow); }
.end .box h2 { letter-spacing: 0; text-transform: none; color: var(--text); font-size: 22px; margin: 0 0 6px; justify-content: center; }
.end .box p { margin: 0 0 18px; color: var(--muted); }
.end .box .nxt { font-weight: 700; color: var(--text); }
.end .actions { display: flex; flex-direction: column; gap: 10px; }
.end .btn { justify-content: center; height: 44px; }

/* flash de direction (manga) */
.hint { position: fixed; left: 50%; top: 50%; transform: translate(-50%, -50%); z-index: 20; background: rgba(15, 17, 21, .85); border: 1px solid var(--line); border-radius: 14px; padding: 14px 20px; font-size: 15px; font-weight: 600; pointer-events: none; animation: hint 1.4s forwards; }
@keyframes hint { 0% { opacity: 0; } 15% { opacity: 1; } 75% { opacity: 1; } 100% { opacity: 0; } }

/* ======================================================================
   Mosaïque de couvertures en fond (navigation seulement)
   ====================================================================== */
#mosaic { position: fixed; inset: 0; z-index: 0; overflow: hidden; pointer-events: none; }
#mosaic .mz { position: absolute; left: -60px; top: -90px; opacity: var(--mosaic-opacity, .45); filter: saturate(.85) brightness(var(--mosaic-brightness, .7)); }
:root[data-mosaic="drift"] #mosaic .mz { animation: drift 110s ease-in-out infinite alternate; }
@keyframes drift { from { transform: translate(0, 0); } to { transform: translate(-60px, -90px); } }
#mosaic .mt { position: absolute; width: 120px; height: 180px; object-fit: cover; transition: opacity 1s ease; border: 1px solid rgba(0, 0, 0, .35); }
#mosaic .mt.fade { opacity: 0; }
#mosaic::after { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(15, 17, 21, .35), rgba(15, 17, 21, .55)); }
:root[data-theme="light"] #mosaic::after { background: linear-gradient(180deg, rgba(244, 245, 248, .5), rgba(244, 245, 248, .65)); }
.rangewrap { display: inline-flex; align-items: center; gap: 10px; }
.rangewrap input[type=range] { width: 160px; accent-color: var(--accent); }
.rangewrap output { min-width: 44px; text-align: right; font-variant-numeric: tabular-nums; color: var(--muted); font-size: 13.5px; }
.layout { position: relative; z-index: 1; }   /* au-dessus de la mosaïque ; la barre du haut reste « sticky » (fixée en haut) */
.topbar { position: sticky; top: 0; z-index: 20; }
/* numéro de version à côté du logo */
.topbar .ver { flex: none; font-size: 11.5px; font-weight: 700; color: var(--muted); border: 1px solid var(--line); border-radius: 999px; padding: 1px 8px; line-height: 18px; white-space: nowrap; margin-left: -4px; }
.topbar .ver:empty { display: none; }
.topbar .ver:hover { color: var(--text); border-color: var(--accent); }
:root[data-skin="bd"] .topbar .ver { font-family: var(--hand); font-size: 14px; font-weight: 400; border: 2px solid var(--ink); background: var(--paper); color: var(--pop-ink); box-shadow: 2px 2px 0 var(--ink); }
:root[data-skin="bling"] .topbar .ver { font-family: var(--serif); border-color: var(--accent); color: var(--accent); }
:root[data-skin="girly"] .topbar .ver { border: 2px solid var(--accent); color: var(--accent); }
@media (max-width: 700px) { .topbar .ver { display: none; } }
body:has(#mosaic) .sidebar { background: color-mix(in srgb, var(--bg) 72%, transparent); backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); }
@media (prefers-reduced-motion: reduce) { #mosaic .mz { animation: none !important; } }

/* ======================================================================
   Habillage « bande dessinée », ligne claire : contours noirs, aplats, lettrage, bulles, cases
   (navigation seulement : le lecteur reste sobre)
   ====================================================================== */
@font-face { font-family: "Bangers"; src: url("/static/fonts/Bangers.woff") format("woff"); font-display: swap; }
@font-face { font-family: "Patrick Hand SC"; src: url("/static/fonts/PatrickHandSC.woff") format("woff"); font-display: swap; }
@font-face { font-family: "Comic Neue"; src: url("/static/fonts/ComicNeue-Regular.woff") format("woff"); font-weight: 400; font-display: swap; }
@font-face { font-family: "Comic Neue"; src: url("/static/fonts/ComicNeue-Bold.woff") format("woff"); font-weight: 700; font-display: swap; }
:root[data-skin="bd"] {
  --ink: #14110e; --pop: #ffd23f; --pop-ink: #1a1405; --red: #e63946; --paper: #fff9ee;
  --edge: 0 0 0 1px rgba(255, 255, 255, .16);      /* fin liseré clair : les contours noirs se voient sur fond sombre */
  --lettering: "Bangers", "Impact", "Arial Narrow", sans-serif;
  --hand: "Patrick Hand SC", "Comic Neue", "Trebuchet MS", sans-serif;
  --accent: #ffd23f; --accent-ink: #1a1405;
}
:root[data-skin="bd"][data-theme="light"] { --edge: none; --bg: #f3ecdd; --bg-2: #fff9ee; --card: #f6efe0; --card-2: #ece3cf; --line: #cdbf9f; --accent: #f2b705; --accent-ink: #1a1405; }
:root[data-skin="bd"] body { font-family: "Comic Neue", "Trebuchet MS", system-ui, sans-serif; font-size: 15.5px; }
:root[data-skin="bd"] h1, :root[data-skin="bd"] .brand b, :root[data-skin="bd"] .sheet h3, :root[data-skin="bd"] .listhead h1 { font-family: var(--lettering); font-weight: 400; letter-spacing: .03em; }
:root[data-skin="bd"] h1 { font-size: 30px; text-shadow: 2px 2px 0 var(--ink); }
:root[data-skin="bd"][data-theme="light"] h1 { text-shadow: none; }
:root[data-skin="bd"] h1 .h1sub { font-family: var(--hand); font-size: 16px; letter-spacing: 0; text-shadow: none; }
:root[data-skin="bd"] .brand b { font-size: 26px; letter-spacing: .05em; }
/* titres de section : cartouche de récitatif jaune, un peu de travers */
:root[data-skin="bd"] h2 { display: inline-flex; align-items: baseline; gap: 10px; font-family: var(--lettering); font-weight: 400; letter-spacing: .06em; font-size: 17px; color: var(--pop-ink); background: var(--pop); border: 2.5px solid var(--ink); border-radius: 3px; padding: 3px 12px 2px; box-shadow: 4px 4px 0 var(--ink), var(--edge); transform: rotate(-1.2deg); margin: 28px 0 16px 4px; text-transform: uppercase; }
:root[data-skin="bd"] h2 small { color: var(--pop-ink); opacity: .8; font-family: var(--hand); font-size: 14px; letter-spacing: 0; }
:root[data-skin="bd"] .crumbs { font-family: var(--hand); font-size: 16px; }
:root[data-skin="bd"] .card .title { font-family: var(--hand); font-size: 16px; font-weight: 400; line-height: 1.2; letter-spacing: .01em; }
:root[data-skin="bd"] .card .sub { font-family: var(--hand); font-size: 14px; }
/* barre du haut et colonne : contours épais */
:root[data-skin="bd"] .topbar { border-bottom: 3px solid var(--ink); box-shadow: 0 3px 0 rgba(255, 255, 255, .1); }
:root[data-skin="bd"] .iconbtn, :root[data-skin="bd"] .search input { border: 2px solid var(--ink); box-shadow: 2px 2px 0 var(--ink), var(--edge); }
:root[data-skin="bd"] .search input { font-family: var(--hand); font-size: 17px; }
:root[data-skin="bd"] .iconbtn:active { transform: translate(2px, 2px); box-shadow: 0 0 0 var(--ink); }
:root[data-skin="bd"] .sidebar { border-right: 3px solid var(--ink); }
:root[data-skin="bd"] .sidebar a { font-family: var(--lettering); font-weight: 400; letter-spacing: .05em; font-size: 16.5px; border-width: 2px; }
:root[data-skin="bd"] .sidebar a.sub { font-family: var(--hand); font-size: 15.5px; letter-spacing: 0; }
:root[data-skin="bd"] .sidebar a.on { background: var(--pop); color: var(--pop-ink); border-color: var(--ink); box-shadow: 3px 3px 0 var(--ink), var(--edge); }
:root[data-skin="bd"] .sidebar a.on .cnt { background: var(--paper); color: var(--pop-ink); border-color: var(--ink); }
:root[data-skin="bd"] .sidebar .cnt { font-family: var(--hand); font-size: 13px; }
:root[data-skin="bd"] .sidebar .sep { height: 2px; background: var(--ink); opacity: .7; }
:root[data-skin="bd"] .sidebar .drophint { font-family: var(--hand); }
:root[data-skin="bd"] body.dragging .sidebar [data-drop] { border-color: var(--ink); }
:root[data-skin="bd"] .sidebar [data-drop].over { background: var(--red); color: #fff; border-color: var(--ink); }
:root[data-tabs="top"][data-skin="bd"] .sidebar { border-right: 0; border-bottom: 3px solid var(--ink); }
/* boutons = petites bulles */
:root[data-skin="bd"] .btn { font-family: var(--lettering); font-weight: 400; letter-spacing: .05em; font-size: 15.5px; border: 2px solid var(--ink); border-radius: 999px; background: var(--bg-2); box-shadow: 3px 3px 0 var(--ink), var(--edge); color: var(--text); }
:root[data-skin="bd"] .btn:hover { background: var(--card-2); }
:root[data-skin="bd"] .btn:active { transform: translate(2px, 2px); box-shadow: 1px 1px 0 var(--ink); }
:root[data-skin="bd"] .btn.primary { background: var(--pop); color: var(--pop-ink); border-color: var(--ink); }
:root[data-skin="bd"] .btn.fav-on { background: var(--pop); color: var(--pop-ink); }
:root[data-skin="bd"] .btn.mini { font-size: 13.5px; }
:root[data-skin="bd"] .pager .pg { border: 2px solid var(--ink); font-family: var(--lettering); font-weight: 400; letter-spacing: .04em; box-shadow: 2px 2px 0 var(--ink), var(--edge); }
:root[data-skin="bd"] .pager .pg.on { background: var(--pop); color: var(--pop-ink); }
:root[data-skin="bd"] .pager .pginfo { font-family: var(--hand); }
/* les blocs = des cases : contour noir, ombre dure */
:root[data-skin="bd"] .bdt-panel, :root[data-skin="bd"] .settings section, :root[data-skin="bd"] .stabs, :root[data-skin="bd"] .adult-gate, :root[data-skin="bd"] .sheet, :root[data-skin="bd"] .listcard, :root[data-skin="bd"] .letters.rail, :root[data-skin="bd"] .ptile, :root[data-skin="bd"] .coltable, :root[data-skin="bd"] .empty strong {
  border: 2.5px solid var(--ink); border-radius: 6px; box-shadow: 5px 5px 0 var(--ink), var(--edge); background: var(--bg-2);
}
:root[data-skin="bd"] .empty strong { display: inline-block; padding: 6px 14px; font-family: var(--hand); font-weight: 400; font-size: 18px; }
:root[data-skin="bd"] .settings section h2 { margin-top: 4px; }
:root[data-skin="bd"] .flabel span { font-family: var(--hand); font-size: 16.5px; }
:root[data-skin="bd"] .listcard .lic { border: 2px solid var(--ink); }
:root[data-skin="bd"] .listcard:hover { background: var(--card-2); transform: translate(-1px, -1px); box-shadow: 6px 6px 0 var(--ink), var(--edge); }
:root[data-skin="bd"] .letters.rail button { font-family: var(--lettering); font-weight: 400; }
:root[data-skin="bd"] .letters.rail button.on:hover { background: var(--pop); color: var(--pop-ink); }
:root[data-skin="bd"] .bdt-logo { border: 2px solid var(--ink); box-shadow: 2px 2px 0 var(--ink); font-family: var(--lettering); font-weight: 400; letter-spacing: .05em; }
:root[data-skin="bd"] .chip { border: 1.5px solid var(--ink); font-family: var(--hand); }
:root[data-skin="bd"] .sheet .summary { border: 2px solid var(--ink); border-left-width: 6px; border-radius: 6px; font-family: var(--hand); font-size: 16px; background: var(--paper); color: var(--pop-ink); }
:root[data-skin="bd"] .sheet dt, :root[data-skin="bd"] .sheet dd { font-family: var(--hand); font-size: 15.5px; }
/* couvertures : contour noir et ombre dure, en plus du dos et de la tranche */
:root[data-skin="bd"] .card .cover, :root[data-skin="bd"] .sheet .cover { border: 2.5px solid var(--ink); border-radius: 4px; }
:root[data-skin="bd"][data-covers="book"] .card.album .cover, :root[data-skin="bd"][data-covers="book"] .card.folder .cover, :root[data-skin="bd"][data-covers="book"] .sheet .cover {
  border-radius: 3px 7px 7px 3px; border-color: var(--ink);
  box-shadow: 3px 0 0 -1px #eee7d6, 5px 0 0 -2px #d9d1bd, 7px 0 0 -3px #c3bba6, 8px 8px 0 var(--ink), var(--edge), 0 0 20px -6px var(--c);
}
:root[data-skin="bd"][data-covers="glow"] .card .cover, :root[data-skin="bd"][data-covers="flat"] .card .cover { box-shadow: 6px 6px 0 var(--ink), var(--edge), 0 0 20px -6px var(--c); }
@media (hover: hover) {
  :root[data-skin="bd"][data-covers="book"] .card.album:hover .cover, :root[data-skin="bd"][data-covers="book"] .card.folder:hover .cover { box-shadow: 4px 0 0 -1px #eee7d6, 7px 0 0 -2px #d9d1bd, 10px 0 0 -3px #c3bba6, 14px 14px 0 var(--ink), var(--edge), 0 0 30px -4px var(--c); }
  :root[data-skin="bd"][data-covers="glow"] .card:hover .cover, :root[data-skin="bd"][data-covers="flat"] .card:hover .cover { box-shadow: 10px 10px 0 var(--ink), var(--edge), 0 0 30px -4px var(--c); }
}
:root[data-skin="bd"][data-covers="book"] .card.folder::before, :root[data-skin="bd"][data-covers="book"] .card.folder::after { border: 2px solid var(--ink); box-shadow: 4px 4px 0 var(--ink); }
:root[data-skin="bd"] .cover.ghost { border: 2.5px dashed var(--ink); box-shadow: none; }
:root[data-skin="bd"] .card .fav { background: var(--pop); clip-path: polygon(0 0, 100% 0, 0 100%); }
:root[data-skin="bd"] .card .fav b { color: var(--ink); }
:root[data-skin="bd"] .badge { border: 2px solid var(--ink); font-family: var(--hand); font-size: 14px; background: var(--paper); color: var(--pop-ink); backdrop-filter: none; }
:root[data-skin="bd"] .badge.ok { background: var(--ok); }
:root[data-skin="bd"] .card .info { border: 2px solid var(--ink); background: var(--paper); color: var(--ink); font-family: Georgia, serif; }
/* le toast = une bulle de BD avec sa queue */
:root[data-skin="bd"] .toast { background: var(--paper); color: var(--pop-ink); border: 2.5px solid var(--ink); border-radius: 22px; padding: 12px 20px; font-family: var(--hand); font-size: 18px; box-shadow: 4px 4px 0 var(--ink); top: calc(var(--bar-h) + env(safe-area-inset-top, 0px) + 22px); }
:root[data-skin="bd"] .toast::after { content: ""; position: absolute; right: 40px; top: -14px; width: 22px; height: 22px; background: var(--paper); border-left: 2.5px solid var(--ink); border-top: 2.5px solid var(--ink); transform: skewX(30deg) rotate(45deg); }   /* queue de la bulle vers la barre du haut */
:root[data-skin="bd"] .toast .btn { font-size: 13px; }
:root[data-skin="bd"] .toast a { color: #1d4ed8; text-decoration: underline; }
/* onomatopée : étoile jaune qui éclate */
.pow { position: fixed; z-index: 70; transform: translate(-50%, -50%) rotate(var(--rot, -6deg)) scale(.3); pointer-events: none; font-family: "Bangers", "Impact", sans-serif; font-size: 34px; letter-spacing: .06em; color: #1a1405; padding: 22px 34px; background: #ffd23f; clip-path: polygon(50% 0%, 61% 14%, 78% 6%, 80% 24%, 98% 30%, 86% 44%, 100% 58%, 82% 64%, 86% 84%, 68% 80%, 60% 100%, 48% 86%, 32% 98%, 28% 80%, 8% 82%, 18% 66%, 0% 54%, 16% 42%, 6% 24%, 24% 22%, 24% 4%, 40% 12%); animation: pow .95s cubic-bezier(.2, 1.4, .4, 1) forwards; text-shadow: 2px 2px 0 #fff; filter: drop-shadow(0 0 0 #14110e); }
@keyframes pow { 0% { transform: translate(-50%, -50%) rotate(var(--rot)) scale(.3); opacity: 0; } 25% { transform: translate(-50%, -50%) rotate(var(--rot)) scale(1.15); opacity: 1; } 70% { transform: translate(-50%, -58%) rotate(var(--rot)) scale(1); opacity: 1; } 100% { transform: translate(-50%, -80%) rotate(var(--rot)) scale(.9); opacity: 0; } }
/* profils, code d'accès, fiche */
:root[data-skin="bd"] .sheet { border-radius: 10px; }
:root[data-skin="bd"] .pavatar { border: 2.5px solid var(--ink); background: var(--pop); color: var(--pop-ink); font-family: var(--lettering); font-weight: 400; }
:root[data-skin="bd"] .pname { font-family: var(--hand); font-size: 16px; }
:root[data-skin="bd"] .sheet select, :root[data-skin="bd"] .settings select, :root[data-skin="bd"] .settings input[type=number], :root[data-skin="bd"] .sheet.pin input, :root[data-skin="bd"] .pin-inline input, :root[data-skin="bd"] .bdt-search input { border: 2px solid var(--ink); border-radius: 8px; font-family: var(--hand); font-size: 16px; }
:root[data-skin="bd"] .switch i { border: 2px solid var(--ink); }
:root[data-skin="bd"] .stabs .tab { font-family: var(--lettering); font-weight: 400; letter-spacing: .05em; font-size: 16px; }
:root[data-skin="bd"] .stabs .tab.on { background: var(--pop); color: var(--pop-ink); border: 2px solid var(--ink); box-shadow: 2px 2px 0 var(--ink); }
:root[data-skin="bd"] .tabs .tab { border: 2px solid var(--ink); border-radius: 999px; font-family: var(--lettering); font-weight: 400; letter-spacing: .05em; box-shadow: 2px 2px 0 var(--ink), var(--edge); }
:root[data-skin="bd"] .tabs .tab.on { background: var(--pop); color: var(--pop-ink); }
:root[data-skin="bd"] .coltable th { font-family: var(--lettering); font-weight: 400; letter-spacing: .05em; }
:root[data-skin="bd"] .stats { font-family: var(--hand); font-size: 15px; }

/* colonne de gauche (tous les habillages sauf Sobre) : plus large, plus grande, avec des onomatopées entre les lignes */
.sidebar .ono { display: none; }
:root:not([data-skin="sobre"])[data-tabs="left"] .sidebar { width: 236px; padding: 16px 12px calc(16px + env(safe-area-inset-bottom)); gap: 4px; }
:root:not([data-skin="sobre"])[data-tabs="left"] .sidebar a { padding: 12px 14px; font-size: 19px; letter-spacing: .06em; gap: 12px; }
:root:not([data-skin="sobre"])[data-tabs="left"] .sidebar a svg { width: 24px; height: 24px; stroke-width: 2.4; }
:root:not([data-skin="sobre"])[data-tabs="left"] .sidebar a.sub { padding: 8px 14px 8px 24px; font-size: 16.5px; }
:root:not([data-skin="sobre"])[data-tabs="left"] .sidebar .ono { display: block; font-family: var(--lettering); font-size: 22px; line-height: 1; color: var(--c1, var(--pop)); -webkit-text-stroke: 1px var(--ink); text-shadow: 2px 2px 0 var(--ink); transform: rotate(var(--rot, -5deg)); margin: 2px 0 2px 10px; pointer-events: none; user-select: none; font-style: normal; letter-spacing: .04em; opacity: .95; }
:root:not([data-skin="sobre"])[data-tabs="left"] .sidebar .ono::before { content: "\2605"; font-size: 11px; vertical-align: middle; margin-right: 4px; opacity: .8; }
:root:not([data-skin="sobre"])[data-tabs="left"] .letters.rail.left { left: 246px; }
@media (min-width: 701px) and (max-width: 1000px) {
  :root:not([data-skin="sobre"])[data-tabs="left"] .sidebar { width: 62px; padding: 12px 8px; }
  :root:not([data-skin="sobre"])[data-tabs="left"] .sidebar a { padding: 10px 0; }
  :root:not([data-skin="sobre"])[data-tabs="left"] .sidebar .ono { display: none; }
  :root:not([data-skin="sobre"])[data-tabs="left"] .letters.rail.left { left: 70px; }
}

/* effet transparence : verre dépoli sur les panneaux, la mosaïque transparaît */
:root[data-glass="on"] .sidebar, :root[data-glass="on"] .bdt-panel, :root[data-glass="on"] .settings section, :root[data-glass="on"] .stabs, :root[data-glass="on"] .adult-gate, :root[data-glass="on"] .sheet,
:root[data-glass="on"] .listcard, :root[data-glass="on"] .letters.rail, :root[data-glass="on"] .pager .pg, :root[data-glass="on"] .toast, :root[data-glass="on"] .sumpop, :root[data-glass="on"] .coltable {
  background-color: color-mix(in srgb, var(--bg-2) 62%, transparent); backdrop-filter: blur(14px) saturate(1.2); -webkit-backdrop-filter: blur(14px) saturate(1.2);
}
:root[data-glass="on"] .sheet.pin, :root[data-glass="on"] .sheet.profiles { background-color: color-mix(in srgb, var(--bg-2) 80%, transparent); }
:root[data-glass="on"] .card .title, :root[data-glass="on"] .card .sub { text-shadow: 0 1px 2px rgba(0, 0, 0, .5); }
:root[data-glass="on"][data-theme="light"] .card .title, :root[data-glass="on"][data-theme="light"] .card .sub { text-shadow: 0 1px 0 rgba(255, 255, 255, .7); }
:root[data-glass="on"][data-skin="bd"] .toast, :root[data-glass="on"][data-skin="bd"] .sumpop, :root[data-glass="on"][data-skin="bd"] .sheet .summary { background-color: color-mix(in srgb, var(--paper) 82%, transparent); }
:root[data-glass="on"][data-skin="bd"] .toast::after, :root[data-glass="on"][data-skin="bd"] .sumpop::after { background: var(--paper); }
:root[data-glass="on"] #mosaic .mz { mask-image: radial-gradient(ellipse at 60% 40%, rgba(0, 0, 0, .55), rgba(0, 0, 0, 1) 75%); -webkit-mask-image: radial-gradient(ellipse at 60% 40%, rgba(0, 0, 0, .55), rgba(0, 0, 0, 1) 75%); }

/* le laboratoire : champignon discret dans la barre, panneau BDConverter */
.shroom { width: 34px; height: 34px; border: 0; background: transparent; padding: 2px; opacity: .3; transition: opacity .2s, transform .2s; flex: none; margin-left: -4px; }
.shroom svg { width: 100%; height: 100%; }
.shroom:hover, .shroom:focus-visible, body.lab-open .shroom { opacity: 1; transform: rotate(-8deg) scale(1.15); }
.lab { position: fixed; top: var(--bar-h); right: 0; bottom: 0; width: min(100%, 980px); z-index: 40; display: flex; flex-direction: column; background: var(--bg); border-left: 1px solid var(--line); box-shadow: -12px 0 40px rgba(0, 0, 0, .5); animation: labin .25s ease-out; }
@keyframes labin { from { transform: translateX(40px); opacity: 0; } }
.labbar { display: flex; align-items: center; gap: 10px; padding: 8px 12px; border-bottom: 1px solid var(--line); background: var(--bg-2); }
.labtitle { flex: 1; font-weight: 700; }
.lab iframe { flex: 1; width: 100%; border: 0; background: #fff; }
:root[data-skin="bd"] .lab { border-left: 3px solid var(--ink); }
:root[data-skin="bd"] .labbar { border-bottom: 3px solid var(--ink); }
:root[data-skin="bd"] .labtitle { font-family: var(--lettering); font-weight: 400; letter-spacing: .05em; font-size: 20px; }
@media (max-width: 700px) { .shroom { display: none; } }

/* ======================================================================
   habillage Bling-bling : noir et or, serif, paillettes
   ====================================================================== */
:root[data-skin="bling"] {
  --bg: #0a0906; --bg-2: #141108; --card: #1c180c; --card-2: #26200f; --line: #5a4a1c; --text: #f5ecd4; --muted: #b8a36a;
  --accent: #e9c45c; --accent-ink: #1a1405; --blue: #f1d98a; --radius: 8px;
  --gold: linear-gradient(135deg, #f6e27a 0%, #c99a2e 40%, #fff3b0 55%, #b8860b 100%);
  --serif: Georgia, "Times New Roman", "Palatino Linotype", serif;
  --cover-shadow: 0 10px 24px rgba(0, 0, 0, .65);
}
:root[data-skin="bling"][data-theme="light"] { --bg: #fbf6e8; --bg-2: #fffdf7; --card: #f3ead2; --card-2: #ecdfb9; --line: #d9c27a; --text: #2a2208; --muted: #7a6530; --accent: #c99a2e; --accent-ink: #fffbe8; --blue: #9a7414; --cover-shadow: 0 10px 24px rgba(90, 60, 0, .3); }
:root[data-skin="bling"] body { font-family: var(--serif); font-size: 15.5px; }
:root[data-skin="bling"] .topbar { border-bottom: 0; background: linear-gradient(180deg, rgba(20, 17, 8, .96), rgba(20, 17, 8, .85)); box-shadow: 0 2px 0 #c99a2e, 0 3px 0 #f6e27a, 0 10px 30px rgba(0, 0, 0, .5); }
:root[data-skin="bling"][data-theme="light"] .topbar { background: rgba(251, 246, 232, .92); }
:root[data-skin="bling"] .brand b, :root[data-skin="bling"] h1, :root[data-skin="bling"] .listhead h1, :root[data-skin="bling"] .sheet h3 { font-family: var(--serif); font-weight: 700; letter-spacing: .06em; text-transform: uppercase; background: var(--gold); -webkit-background-clip: text; background-clip: text; color: transparent; }
:root[data-skin="bling"] h1 { font-size: 26px; }
:root[data-skin="bling"] h1 .h1sub, :root[data-skin="bling"] h1 .h1tools { background: none; color: var(--muted); -webkit-text-fill-color: var(--muted); text-transform: none; letter-spacing: 0; }
:root[data-skin="bling"] h1 .h1tools .btn { -webkit-text-fill-color: var(--text); }
:root[data-skin="bling"] h2 { font-family: var(--serif); font-weight: 700; letter-spacing: .14em; color: var(--accent); border-bottom: 1px solid; border-image: var(--gold) 1; padding-bottom: 6px; margin: 30px 0 16px; }
:root[data-skin="bling"] h2 small { color: var(--muted); }
:root[data-skin="bling"] .sidebar { border-right: 1px solid var(--line); background: linear-gradient(180deg, var(--bg-2), var(--bg)); }
:root[data-skin="bling"] .sidebar a { font-family: var(--serif); text-transform: uppercase; letter-spacing: .1em; font-size: 14px; border-radius: 6px; }
:root[data-skin="bling"]:not([data-skin="sobre"])[data-tabs="left"] .sidebar a { font-size: 15px; }
:root[data-skin="bling"] .sidebar a.on { background: var(--gold); color: #1a1405; box-shadow: 0 4px 16px rgba(233, 196, 92, .35); }
:root[data-skin="bling"] .sidebar a.on .cnt { background: rgba(0, 0, 0, .25); color: #1a1405; border-color: transparent; }
:root[data-skin="bling"] .sidebar a.on svg { color: #1a1405; }
:root[data-skin="bling"] .sidebar .sep { background: var(--gold); opacity: .6; }
:root[data-skin="bling"][data-tabs="left"] .sidebar .ono { font-family: var(--serif); font-style: italic; font-weight: 700; font-size: 19px; letter-spacing: .08em; background: var(--gold); -webkit-background-clip: text; background-clip: text; color: transparent; -webkit-text-stroke: 0; text-shadow: none; animation: sparkle 2.6s ease-in-out infinite; }
:root[data-skin="bling"][data-tabs="left"] .sidebar .ono::before { content: "✦"; background: none; color: #f6e27a; -webkit-text-fill-color: #f6e27a; }
@keyframes sparkle { 0%, 100% { filter: brightness(1); } 50% { filter: brightness(1.35) drop-shadow(0 0 6px rgba(246, 226, 122, .7)); } }
:root[data-skin="bling"] .btn, :root[data-skin="bling"] .pager .pg, :root[data-skin="bling"] .tabs .tab, :root[data-skin="bling"] .stabs .tab { font-family: var(--serif); text-transform: uppercase; letter-spacing: .08em; font-size: 13px; border: 1px solid var(--accent); border-radius: 6px; background: var(--bg-2); color: var(--text); }
:root[data-skin="bling"] .btn:hover, :root[data-skin="bling"] .pager .pg:hover:not(:disabled) { background: var(--card-2); box-shadow: 0 0 14px -4px var(--accent); }
:root[data-skin="bling"] .btn.primary, :root[data-skin="bling"] .pager .pg.on, :root[data-skin="bling"] .tabs .tab.on, :root[data-skin="bling"] .stabs .tab.on, :root[data-skin="bling"] .btn.fav-on { background: var(--gold); color: #1a1405; border-color: transparent; box-shadow: none; }
:root[data-skin="bling"] .iconbtn, :root[data-skin="bling"] .search input { border-color: var(--accent); }
:root[data-skin="bling"] .search input { font-family: var(--serif); font-style: italic; }
:root[data-skin="bling"] .card .cover, :root[data-skin="bling"] .sheet .cover { border: 2px solid #c99a2e; box-shadow: inset 0 0 0 1px #f6e27a, var(--cover-shadow), 0 0 22px -6px var(--accent); }
:root[data-skin="bling"][data-covers="book"] .card.album .cover, :root[data-skin="bling"][data-covers="book"] .card.folder .cover { box-shadow: 3px 0 0 -1px #f6e27a, 5px 0 0 -2px #c99a2e, 7px 0 0 -3px #8a6512, var(--cover-shadow), 0 0 22px -6px var(--accent); }
:root[data-skin="bling"] .card .title { font-family: var(--serif); font-weight: 700; letter-spacing: .02em; }
:root[data-skin="bling"] .card .fav { background: var(--gold); }
:root[data-skin="bling"] .card .fav b { color: #1a1405; }
:root[data-skin="bling"] .badge.ok { background: var(--gold); color: #1a1405; }
:root[data-skin="bling"] .bdt-panel, :root[data-skin="bling"] .settings section, :root[data-skin="bling"] .stabs, :root[data-skin="bling"] .sheet, :root[data-skin="bling"] .listcard, :root[data-skin="bling"] .letters.rail, :root[data-skin="bling"] .coltable, :root[data-skin="bling"] .adult-gate { border: 1px solid var(--line); box-shadow: inset 0 1px 0 rgba(246, 226, 122, .25), 0 12px 30px rgba(0, 0, 0, .45); }
:root[data-skin="bling"] .settings section h2, :root[data-skin="bling"] .flabel span { letter-spacing: .06em; }
:root[data-skin="bling"] .toast { border: 1px solid var(--accent); font-family: var(--serif); box-shadow: 0 0 24px -6px var(--accent), var(--shadow); }
:root[data-skin="bling"] .pavatar { background: var(--gold); color: #1a1405; border: 0; }
:root[data-skin="bling"] .pow { background: var(--gold); color: #1a1405; font-family: var(--serif); font-weight: 700; text-shadow: 0 1px 0 #fff3b0; }
:root[data-skin="bling"] .lab { border-left: 1px solid var(--accent); }

/* ======================================================================
   habillage Girly : rose pastel, rondeurs, cœurs
   ====================================================================== */
:root[data-skin="girly"] {
  --bg: #2b1a2a; --bg-2: #3a2238; --card: #472a45; --card-2: #553355; --line: #6e4a6c; --text: #ffeaf5; --muted: #e0a9cc;
  --accent: #ff79b0; --accent-ink: #3a0b22; --blue: #ffb3d4; --ok: #7ee0b0; --radius: 18px;
  --pink: linear-gradient(135deg, #ff8fc0, #ffb3d4 60%, #ffd1e3);
  --cute: "Comic Neue", "Trebuchet MS", system-ui, sans-serif; --hand: "Patrick Hand SC", "Comic Neue", sans-serif;
  --cover-shadow: 0 8px 22px rgba(255, 121, 176, .25);
}
:root[data-skin="girly"][data-theme="light"] { --bg: #fff0f6; --bg-2: #ffffff; --card: #ffe3ee; --card-2: #ffd1e3; --line: #f6b9d2; --text: #4a1f36; --muted: #a46385; --accent: #ff5fa2; --accent-ink: #ffffff; --blue: #d63f86; --shadow: 0 10px 30px rgba(255, 95, 162, .18); }
:root[data-skin="girly"] body { font-family: var(--cute); font-size: 15.5px; }
:root[data-skin="girly"] .topbar { border-bottom: 2px solid var(--accent); background: color-mix(in srgb, var(--bg-2) 88%, transparent); }
:root[data-skin="girly"] .brand b, :root[data-skin="girly"] h1, :root[data-skin="girly"] .listhead h1, :root[data-skin="girly"] .sheet h3 { font-family: var(--hand); font-weight: 400; letter-spacing: .03em; color: var(--accent); }
:root[data-skin="girly"] h1 { font-size: 30px; }
:root[data-skin="girly"] h1 .h1sub { font-family: var(--cute); font-size: 15px; color: var(--muted); }
:root[data-skin="girly"] .brand span { color: #ffb3d4; }
:root[data-skin="girly"] h2 { display: inline-flex; align-items: baseline; gap: 10px; font-family: var(--hand); font-weight: 400; font-size: 19px; letter-spacing: .04em; text-transform: none; color: #3a0b22; background: var(--pink); border-radius: 999px; padding: 4px 18px 3px 14px; margin: 26px 0 16px; box-shadow: 0 4px 14px rgba(255, 121, 176, .35); }
:root[data-skin="girly"] h2::before { content: "♥"; margin-right: 6px; color: #ff2f84; }
:root[data-skin="girly"] h2 small { color: #5a1a3a; }
:root[data-skin="girly"] .sidebar { border-right: 2px solid var(--line); }
:root[data-skin="girly"] .sidebar a { border-radius: 999px; font-family: var(--cute); font-weight: 700; }
:root[data-skin="girly"] .sidebar a.on { background: var(--pink); color: #3a0b22; box-shadow: 0 4px 14px rgba(255, 121, 176, .35); border-color: transparent; }
:root[data-skin="girly"] .sidebar a.on .cnt { background: rgba(255, 255, 255, .6); color: #3a0b22; border-color: transparent; }
:root[data-skin="girly"] .sidebar .sep { background: var(--accent); opacity: .5; height: 2px; border-radius: 2px; }
:root[data-skin="girly"][data-tabs="left"] .sidebar .ono { font-family: var(--hand); font-size: 21px; color: var(--c1, #ff79b0); -webkit-text-stroke: 0; text-shadow: 0 2px 0 rgba(0, 0, 0, .15); animation: bounce 3s ease-in-out infinite; }
:root[data-skin="girly"][data-theme="light"][data-tabs="left"] .sidebar .ono { color: #ff5fa2; text-shadow: 0 2px 0 #ffd1e3; }
:root[data-skin="girly"][data-tabs="left"] .sidebar .ono::before { content: "♥"; color: #ff2f84; font-size: 13px; }
@keyframes bounce { 0%, 100% { transform: rotate(var(--rot, -4deg)) translateY(0); } 50% { transform: rotate(var(--rot, -4deg)) translateY(-3px); } }
:root[data-skin="girly"] .btn, :root[data-skin="girly"] .pager .pg, :root[data-skin="girly"] .tabs .tab, :root[data-skin="girly"] .stabs .tab { border-radius: 999px; border: 2px solid var(--accent); background: var(--bg-2); color: var(--text); font-weight: 700; font-family: var(--cute); }
:root[data-skin="girly"] .btn:hover, :root[data-skin="girly"] .pager .pg:hover:not(:disabled) { background: var(--card-2); }
:root[data-skin="girly"] .btn.primary, :root[data-skin="girly"] .pager .pg.on, :root[data-skin="girly"] .tabs .tab.on, :root[data-skin="girly"] .stabs .tab.on, :root[data-skin="girly"] .btn.fav-on { background: var(--pink); color: #3a0b22; border-color: transparent; }
:root[data-skin="girly"] .iconbtn, :root[data-skin="girly"] .search input { border: 2px solid var(--accent); }
:root[data-skin="girly"] .search input { font-family: var(--hand); font-size: 17px; }
:root[data-skin="girly"] .card .cover, :root[data-skin="girly"] .sheet .cover { border: 2px solid #ffb3d4; border-radius: 14px; box-shadow: var(--cover-shadow), 0 0 0 4px color-mix(in srgb, var(--bg) 70%, #ff79b0); }
:root[data-skin="girly"][data-covers="book"] .card.album .cover, :root[data-skin="girly"][data-covers="book"] .card.folder .cover { border-radius: 8px 14px 14px 8px; box-shadow: 3px 0 0 -1px #ffd1e3, 5px 0 0 -2px #ffb3d4, 7px 0 0 -3px #ff8fc0, var(--cover-shadow); }
:root[data-skin="girly"][data-covers="book"] .card.folder::before, :root[data-skin="girly"][data-covers="book"] .card.folder::after { border-radius: 10px; border: 2px solid #ffb3d4; }
:root[data-skin="girly"] .card .title { font-family: var(--cute); font-weight: 700; }
:root[data-skin="girly"] .card .fav { background: #ff5fa2; }
:root[data-skin="girly"] .card .fav b { color: #fff; }
:root[data-skin="girly"] .badge { background: rgba(255, 143, 192, .9); color: #3a0b22; border-radius: 999px; }
:root[data-skin="girly"] .bdt-panel, :root[data-skin="girly"] .settings section, :root[data-skin="girly"] .stabs, :root[data-skin="girly"] .sheet, :root[data-skin="girly"] .listcard, :root[data-skin="girly"] .letters.rail, :root[data-skin="girly"] .coltable, :root[data-skin="girly"] .adult-gate { border: 2px solid var(--line); border-radius: 22px; }
:root[data-skin="girly"] .flabel span { font-weight: 700; }
:root[data-skin="girly"] .field select, :root[data-skin="girly"] .field input[type=number], :root[data-skin="girly"] .sheet.pin input, :root[data-skin="girly"] .pin-inline input { border-radius: 999px; border: 2px solid var(--line); }
:root[data-skin="girly"] .switch input:checked + i { background: var(--pink); }
:root[data-skin="girly"] .toast { border: 2px solid var(--accent); border-radius: 999px; font-family: var(--hand); font-size: 17px; }
:root[data-skin="girly"] .pavatar { background: var(--pink); color: #3a0b22; border: 0; }
:root[data-skin="girly"] .pow { background: #ff5fa2; color: #fff; clip-path: none; border-radius: 48% 52% 45% 55% / 55% 45% 55% 45%; font-family: var(--hand); font-size: 30px; text-shadow: 0 2px 0 rgba(0, 0, 0, .2); }
:root[data-skin="girly"] .lab { border-left: 2px solid var(--accent); }

/* ======================================================================
   habillage Aquarium : grand bleu, bancs de poissons, bulles qui remontent
   ====================================================================== */
:root[data-skin="ocean"] {
  --bg: #032238; --bg-2: #052c48; --card: #093a5c; --card-2: #0d4970; --line: #1b6a8f; --text: #e4fbff; --muted: #8cc7d9;
  --accent: #ffb347; --accent-ink: #2a1300; --blue: #5fe0e6; --ok: #6fe3a5; --warn: #ff7a7a; --radius: 16px;
  --sea: #2fd6d0; --coral: #ff8fb1;
  --round: ui-rounded, "SF Pro Rounded", "Varela Round", "Nunito", "Trebuchet MS", system-ui, sans-serif;
  --cover-shadow: 0 10px 26px rgba(0, 10, 20, .6);
  --shadow: 0 12px 34px rgba(0, 12, 24, .55);
  color-scheme: dark;
}
:root[data-skin="ocean"][data-theme="light"] { --bg: #dff5fa; --bg-2: #f6fdff; --card: #cdeef5; --card-2: #b6e3ee; --line: #86c9dc; --text: #06324a; --muted: #3f7a91; --accent: #ff7a1a; --accent-ink: #ffffff; --blue: #0e8fa8; --sea: #0bb3ad; --cover-shadow: 0 10px 24px rgba(6, 60, 90, .25); --shadow: 0 12px 30px rgba(6, 60, 90, .18); color-scheme: light; }
:root[data-skin="ocean"] body { font-family: var(--round); font-size: 15px; background: radial-gradient(120% 70% at 50% -10%, #0e5d86 0%, transparent 60%), linear-gradient(180deg, var(--bg) 0%, #021626 100%) fixed; }
:root[data-skin="ocean"][data-theme="light"] body { background: radial-gradient(120% 70% at 50% -10%, #ffffff 0%, transparent 60%), linear-gradient(180deg, #e9f9fc 0%, #b9e6f0 100%) fixed; }
/* bancs de poissons qui traversent l'écran, et bulles qui remontent (derrière tout le contenu) */
:root[data-skin="ocean"] body::before { content: ""; position: fixed; inset: 0; z-index: 0; pointer-events: none; }
:root[data-skin="ocean"] body::before { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='900' height='180' viewBox='0 0 900 180'%3E%3Cg transform='translate(80 40)' fill='%23ffb347'%3E%3Cpath d='M-20.0 0 C-8.0 -12.0 14.0 -12.0 22.0 0 C14.0 12.0 -8.0 12.0 -20.0 0Z'/%3E%3Cpath d='M-18.0 0 L-32.0 -10.0 L-29.0 0 L-32.0 10.0Z'/%3E%3Ccircle cx='12.0' cy='-3.0' r='1.6' fill='%23021a2a'/%3E%3C/g%3E%3Cg transform='translate(150 70)' fill='%23ffb347'%3E%3Cpath d='M-14.0 0 C-5.6 -8.399999999999999 9.799999999999999 -8.399999999999999 15.399999999999999 0 C9.799999999999999 8.399999999999999 -5.6 8.399999999999999 -14.0 0Z'/%3E%3Cpath d='M-12.6 0 L-22.4 -7.0 L-20.299999999999997 0 L-22.4 7.0Z'/%3E%3Ccircle cx='8.399999999999999' cy='-2.0999999999999996' r='1.1199999999999999' fill='%23021a2a'/%3E%3C/g%3E%3Cg transform='translate(118 100)' fill='%23ffd08a'%3E%3Cpath d='M-11.0 0 C-4.4 -6.6000000000000005 7.700000000000001 -6.6000000000000005 12.100000000000001 0 C7.700000000000001 6.6000000000000005 -4.4 6.6000000000000005 -11.0 0Z'/%3E%3Cpath d='M-9.9 0 L-17.6 -5.5 L-15.950000000000001 0 L-17.6 5.5Z'/%3E%3Ccircle cx='6.6000000000000005' cy='-1.6500000000000001' r='0.8800000000000001' fill='%23021a2a'/%3E%3C/g%3E%3Cg transform='translate(520 120)' fill='%235fe0e6'%3E%3Cpath d='M-16.0 0 C-6.4 -9.600000000000001 11.200000000000001 -9.600000000000001 17.6 0 C11.200000000000001 9.600000000000001 -6.4 9.600000000000001 -16.0 0Z'/%3E%3Cpath d='M-14.4 0 L-25.6 -8.0 L-23.200000000000003 0 L-25.6 8.0Z'/%3E%3Ccircle cx='9.600000000000001' cy='-2.4000000000000004' r='1.2800000000000002' fill='%23021a2a'/%3E%3C/g%3E%3Cg transform='translate(570 90)' fill='%235fe0e6'%3E%3Cpath d='M-12.0 0 C-4.8 -7.199999999999999 8.4 -7.199999999999999 13.2 0 C8.4 7.199999999999999 -4.8 7.199999999999999 -12.0 0Z'/%3E%3Cpath d='M-10.799999999999999 0 L-19.2 -6.0 L-17.4 0 L-19.2 6.0Z'/%3E%3Ccircle cx='7.199999999999999' cy='-1.7999999999999998' r='0.96' fill='%23021a2a'/%3E%3C/g%3E%3Cg transform='translate(590 140)' fill='%2390f0f2'%3E%3Cpath d='M-10.0 0 C-4.0 -6.0 7.0 -6.0 11.0 0 C7.0 6.0 -4.0 6.0 -10.0 0Z'/%3E%3Cpath d='M-9.0 0 L-16.0 -5.0 L-14.5 0 L-16.0 5.0Z'/%3E%3Ccircle cx='6.0' cy='-1.5' r='0.8' fill='%23021a2a'/%3E%3C/g%3E%3C/svg%3E"), url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='1400' height='180' viewBox='0 0 1400 180'%3E%3Cg transform='translate(200 60) scale(-1 1)' fill='%232fd6d0'%3E%3Cpath d='M-26.0 0 C-10.4 -15.600000000000001 18.2 -15.600000000000001 28.6 0 C18.2 15.600000000000001 -10.4 15.600000000000001 -26.0 0Z'/%3E%3Cpath d='M-23.400000000000002 0 L-41.6 -13.0 L-37.7 0 L-41.6 13.0Z'/%3E%3Ccircle cx='15.600000000000001' cy='-3.9000000000000004' r='2.08' fill='%23021a2a'/%3E%3C/g%3E%3Cg transform='translate(900 130) scale(-1 1)' fill='%23ff8fb1'%3E%3Cpath d='M-18.0 0 C-7.2 -10.8 12.6 -10.8 19.8 0 C12.6 10.8 -7.2 10.8 -18.0 0Z'/%3E%3Cpath d='M-16.2 0 L-28.8 -9.0 L-26.1 0 L-28.8 9.0Z'/%3E%3Ccircle cx='10.8' cy='-2.7' r='1.4400000000000002' fill='%23021a2a'/%3E%3C/g%3E%3Cg transform='translate(960 110) scale(-1 1)' fill='%23ff8fb1'%3E%3Cpath d='M-12.0 0 C-4.8 -7.199999999999999 8.4 -7.199999999999999 13.2 0 C8.4 7.199999999999999 -4.8 7.199999999999999 -12.0 0Z'/%3E%3Cpath d='M-10.799999999999999 0 L-19.2 -6.0 L-17.4 0 L-19.2 6.0Z'/%3E%3Ccircle cx='7.199999999999999' cy='-1.7999999999999998' r='0.96' fill='%23021a2a'/%3E%3C/g%3E%3Cg transform='translate(1180 50) scale(-1 1)' fill='%23ffd23f'%3E%3Cpath d='M-14.0 0 C-5.6 -8.399999999999999 9.799999999999999 -8.399999999999999 15.399999999999999 0 C9.799999999999999 8.399999999999999 -5.6 8.399999999999999 -14.0 0Z'/%3E%3Cpath d='M-12.6 0 L-22.4 -7.0 L-20.299999999999997 0 L-22.4 7.0Z'/%3E%3Ccircle cx='8.399999999999999' cy='-2.0999999999999996' r='1.1199999999999999' fill='%23021a2a'/%3E%3C/g%3E%3C/svg%3E"); background-repeat: repeat-x, repeat-x; background-size: 900px 180px, 1400px 180px; background-position: 0 22%, 0 78%; opacity: .4; animation: swim 90s linear infinite; }
:root[data-skin="ocean"][data-theme="light"] body::before { opacity: .28; }
@keyframes swim { to { background-position: 900px 22%, -1400px 78%; } }
:root[data-skin="ocean"] .topbar { background: color-mix(in srgb, var(--bg-2) 86%, transparent); border-bottom: 0; box-shadow: 0 1px 0 var(--line), 0 6px 0 -3px color-mix(in srgb, var(--sea) 35%, transparent); }
:root[data-skin="ocean"] .brand b, :root[data-skin="ocean"] h1, :root[data-skin="ocean"] .listhead h1, :root[data-skin="ocean"] .sheet h3 { font-family: var(--round); font-weight: 800; letter-spacing: .01em; color: var(--text); }
:root[data-skin="ocean"] .brand b { color: var(--sea); }
:root[data-skin="ocean"] .brand span { color: var(--accent); }
:root[data-skin="ocean"] h1 { font-size: 28px; }
:root[data-skin="ocean"] h1 .h1sub { font-weight: 400; color: var(--muted); }
/* titres de section : un petit poisson en tête, une vague en dessous */
:root[data-skin="ocean"] h2 { font-family: var(--round); font-weight: 800; font-size: 17px; letter-spacing: .02em; color: var(--sea); padding-bottom: 9px; margin: 30px 0 16px; border: 0; background: radial-gradient(circle at 10px -4px, transparent 9px, var(--sea) 10px, var(--sea) 11.5px, transparent 12.5px) 0 100% / 20px 8px repeat-x; background-size: 20px 8px; }
:root[data-skin="ocean"] h2::before { content: "><(((º>"; font-family: var(--mono, ui-monospace, Menlo, monospace); font-size: 12px; letter-spacing: -.02em; color: var(--accent); margin-right: 10px; display: inline-block; animation: wiggle 3s ease-in-out infinite; }
@keyframes wiggle { 0%, 100% { transform: translateX(0); } 50% { transform: translateX(5px); } }
:root[data-skin="ocean"] h2 small { color: var(--muted); font-weight: 400; }
:root[data-skin="ocean"] .crumbs { font-family: var(--round); }
:root[data-skin="ocean"] .sidebar { border-right: 0; background: linear-gradient(180deg, color-mix(in srgb, var(--bg-2) 92%, transparent), color-mix(in srgb, var(--bg) 70%, transparent)); box-shadow: 1px 0 0 var(--line); }
:root[data-skin="ocean"] .sidebar a { border-radius: 999px; font-weight: 700; }
:root[data-skin="ocean"] .sidebar a:hover { background: color-mix(in srgb, var(--sea) 14%, transparent); }
:root[data-skin="ocean"] .sidebar a.on { background: linear-gradient(135deg, var(--sea), #1a9fd0); color: #022033; border-color: transparent; box-shadow: 0 6px 18px -6px var(--sea); }
:root[data-skin="ocean"] .sidebar a.on .cnt { background: rgba(255, 255, 255, .55); color: #022033; border-color: transparent; }
:root[data-skin="ocean"] .sidebar a.on svg { color: #022033; }
:root[data-skin="ocean"] .sidebar .sep { height: 6px; opacity: .55; background: radial-gradient(circle at 6px -2px, transparent 5px, var(--sea) 5.5px, var(--sea) 6.6px, transparent 7.2px) 0 0 / 12px 6px repeat-x; }
:root[data-skin="ocean"][data-tabs="left"] .sidebar .ono { font-family: var(--round); font-weight: 800; font-size: 19px; color: var(--c1, var(--sea)); -webkit-text-stroke: 0; text-shadow: 0 2px 0 rgba(0, 0, 0, .25); animation: float 4s ease-in-out infinite; }
:root[data-skin="ocean"][data-tabs="left"] .sidebar .ono::before { content: "°∘"; font-size: 12px; color: #bff6ff; }
@keyframes float { 0%, 100% { transform: rotate(var(--rot, -4deg)) translateY(0); } 50% { transform: rotate(calc(var(--rot, -4deg) * -1)) translateY(-4px); } }
:root[data-skin="ocean"] .btn, :root[data-skin="ocean"] .pager .pg, :root[data-skin="ocean"] .tabs .tab, :root[data-skin="ocean"] .stabs .tab { border-radius: 999px; font-family: var(--round); font-weight: 700; border: 1px solid var(--line); background: color-mix(in srgb, var(--card) 85%, transparent); }
:root[data-skin="ocean"] .btn:hover, :root[data-skin="ocean"] .pager .pg:hover:not(:disabled) { border-color: var(--sea); background: color-mix(in srgb, var(--sea) 16%, var(--card)); }
:root[data-skin="ocean"] .btn.primary, :root[data-skin="ocean"] .pager .pg.on, :root[data-skin="ocean"] .tabs .tab.on, :root[data-skin="ocean"] .stabs .tab.on, :root[data-skin="ocean"] .btn.fav-on { background: linear-gradient(135deg, #ffc46b, var(--accent)); color: var(--accent-ink); border-color: transparent; box-shadow: 0 6px 16px -6px var(--accent); }
:root[data-skin="ocean"] .btn.adult-on { background: var(--coral); border-color: var(--coral); color: #3a0b1d; }
:root[data-skin="ocean"] .iconbtn, :root[data-skin="ocean"] .search input { border-radius: 999px; border-color: var(--line); background: color-mix(in srgb, var(--card) 85%, transparent); }
:root[data-skin="ocean"] .search input:focus { border-color: var(--sea); box-shadow: 0 0 0 3px color-mix(in srgb, var(--sea) 30%, transparent); }
:root[data-skin="ocean"] .card .cover, :root[data-skin="ocean"] .sheet .cover { border-radius: 12px; box-shadow: var(--cover-shadow), 0 0 0 1px color-mix(in srgb, var(--sea) 40%, transparent); }
:root[data-skin="ocean"][data-covers="book"] .card.album .cover, :root[data-skin="ocean"][data-covers="book"] .card.folder .cover { border-radius: 4px 12px 12px 4px; box-shadow: 3px 0 0 -1px #bff6ff, 5px 0 0 -2px var(--sea), 7px 0 0 -3px #0d4970, var(--cover-shadow); }
:root[data-skin="ocean"][data-covers="book"] .card.folder::before, :root[data-skin="ocean"][data-covers="book"] .card.folder::after { border-radius: 6px 12px 12px 6px; }
@media (hover: hover) { :root[data-skin="ocean"] .card:hover .cover { animation: bob 1.6s ease-in-out infinite; box-shadow: var(--cover-shadow), 0 0 0 2px var(--sea), 0 0 26px -4px var(--sea); } }
@keyframes bob { 0%, 100% { translate: 0 0; rotate: 0deg; } 50% { translate: 0 -4px; rotate: .6deg; } }
:root[data-skin="ocean"] .card .title { font-weight: 700; }
:root[data-skin="ocean"] .card .fav { background: linear-gradient(135deg, #ffc46b, var(--accent)); }
:root[data-skin="ocean"] .badge { border-radius: 999px; background: rgba(2, 30, 48, .85); color: #bff6ff; border: 1px solid color-mix(in srgb, var(--sea) 60%, transparent); }
:root[data-skin="ocean"] .badge.ok { background: var(--ok); color: #03200f; border-color: transparent; }
:root[data-skin="ocean"] .badge.adult { background: var(--coral); color: #3a0b1d; border-color: transparent; }
:root[data-skin="ocean"] .bar i { background: linear-gradient(90deg, var(--sea), var(--accent)); }
:root[data-skin="ocean"] .bdt-panel, :root[data-skin="ocean"] .settings section, :root[data-skin="ocean"] .stabs, :root[data-skin="ocean"] .sheet, :root[data-skin="ocean"] .listcard, :root[data-skin="ocean"] .letters.rail, :root[data-skin="ocean"] .coltable, :root[data-skin="ocean"] .adult-gate { border: 1px solid var(--line); border-radius: 20px; background-color: color-mix(in srgb, var(--bg-2) 90%, transparent); box-shadow: inset 0 1px 0 rgba(255, 255, 255, .06), var(--shadow); }
:root[data-skin="ocean"] .flabel span { font-weight: 700; }
:root[data-skin="ocean"] .field select, :root[data-skin="ocean"] .field input[type=number], :root[data-skin="ocean"] .sheet.pin input, :root[data-skin="ocean"] .pin-inline input { border-radius: 999px; border: 1px solid var(--line); }
:root[data-skin="ocean"] .switch input:checked + i { background: var(--sea); }
:root[data-skin="ocean"] .letters.rail button.on:hover, :root[data-skin="ocean"] .letters button.on:hover { background: var(--sea); color: #022033; }
:root[data-skin="ocean"] .toast { border: 1px solid var(--sea); border-radius: 22px 22px 22px 6px; font-family: var(--round); box-shadow: 0 0 0 4px color-mix(in srgb, var(--sea) 15%, transparent), var(--shadow); }
:root[data-skin="ocean"] .pavatar { background: var(--sea); color: #022033; border: 0; }
/* éclat : une grosse bulle irisée */
:root[data-skin="ocean"] .pow { clip-path: none; border-radius: 50%; aspect-ratio: 1; display: flex; align-items: center; justify-content: center; padding: 26px; font-family: var(--round); font-weight: 900; font-size: 24px; letter-spacing: .02em; color: #022033; text-shadow: 0 1px 0 rgba(255, 255, 255, .7); background: radial-gradient(circle at 32% 28%, #ffffff 0 9%, transparent 10%), radial-gradient(circle at 50% 50%, rgba(191, 246, 255, .55) 0 58%, rgba(95, 224, 230, .95) 70%, rgba(255, 143, 177, .9) 100%); border: 2px solid rgba(255, 255, 255, .8); box-shadow: 0 0 24px rgba(95, 224, 230, .6); filter: none; }
:root[data-skin="ocean"] .lab { border-left: 1px solid var(--sea); }
:root[data-skin="ocean"] .sumpop { border-color: var(--sea); border-radius: 18px; }
:root[data-skin="ocean"] .topbar .ver { border-radius: 999px; border-color: var(--sea); color: var(--sea); }
:root[data-skin="ocean"] .sidebar .grow .sc { border: 2px solid var(--sea); border-radius: 12px; box-shadow: 0 0 0 4px color-mix(in srgb, var(--sea) 18%, transparent), 0 10px 24px rgba(0, 10, 20, .55); }

/* ======================================================================
   habillage Nuit étoilée : bleu nuit qui respire (clair ↔ foncé), étoiles qui scintillent, étoile filante
   ====================================================================== */
:root[data-skin="stars"], :root[data-skin="stars"][data-theme="light"] {
  --bg: #04122b; --bg-2: #081a3a; --card: #0d2350; --card-2: #132e63; --line: #244a86; --text: #eef5ff; --muted: #9fb6da;
  --accent: #ffe08a; --accent-ink: #1a1400; --blue: #9ccaff; --ok: #8ff0c0; --warn: #ff8a9a; --radius: 10px;
  --lav: #8ec5ff;
  --astro: "Palatino Linotype", "Book Antiqua", Palatino, "URW Palladio L", Georgia, serif;
  --cover-shadow: 0 10px 26px rgba(0, 0, 10, .7);
  --shadow: 0 12px 34px rgba(0, 0, 12, .6);
  color-scheme: dark;
}
:root[data-skin="stars"] body { font-size: 15px; background-color: #04122b; background-image: radial-gradient(70% 55% at 80% 0%, rgba(90, 160, 255, .22), transparent 70%), radial-gradient(60% 45% at 10% 100%, rgba(30, 90, 190, .25), transparent 70%); background-attachment: fixed; animation: nightcycle 48s ease-in-out infinite; }
/* le ciel passe lentement d'un bleu nuit clair (crépuscule) au bleu presque noir du cœur de la nuit, et revient */
@keyframes nightcycle { 0%, 100% { background-color: #0d2b5c; } 50% { background-color: #020916; } }
:root[data-skin="stars"] body::before { content: ""; position: fixed; inset: 0; z-index: 0; pointer-events: none; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='397' height='397' viewBox='0 0 397 397'%3E%3Ccircle cx='53.3' cy='336.4' r='0.86' fill='%23d6e8ff' opacity='0.47'/%3E%3Ccircle cx='302.1' cy='187.5' r='0.63' fill='%23ffffff' opacity='0.46'/%3E%3Ccircle cx='11.3' cy='331.8' r='0.66' fill='%23ffffff' opacity='0.82'/%3E%3Ccircle cx='105.7' cy='318.3' r='0.75' fill='%23ffffff' opacity='0.94'/%3E%3Ccircle cx='12.1' cy='10.1' r='0.72' fill='%23d6e8ff' opacity='0.81'/%3E%3Ccircle cx='384.7' cy='288.2' r='0.72' fill='%23d6e8ff' opacity='0.96'/%3E%3Ccircle cx='219.5' cy='137.2' r='0.81' fill='%23d6e8ff' opacity='0.97'/%3E%3Ccircle cx='367.8' cy='165.2' r='0.95' fill='%23fff4cf' opacity='0.46'/%3E%3Ccircle cx='249.9' cy='287.3' r='0.58' fill='%23fff4cf' opacity='0.60'/%3E%3Ccircle cx='286.4' cy='282.3' r='0.96' fill='%23d6e8ff' opacity='0.70'/%3E%3Ccircle cx='361.3' cy='75.4' r='0.57' fill='%23d6e8ff' opacity='0.91'/%3E%3Ccircle cx='200.6' cy='233.8' r='0.42' fill='%23ffffff' opacity='0.85'/%3E%3Ccircle cx='160.5' cy='263.9' r='0.62' fill='%23fff4cf' opacity='0.87'/%3E%3Ccircle cx='293.1' cy='34.3' r='0.80' fill='%23ffffff' opacity='0.87'/%3E%3Ccircle cx='206.8' cy='156.1' r='0.69' fill='%23ffffff' opacity='0.68'/%3E%3Ccircle cx='122.5' cy='336.8' r='0.77' fill='%23fff4cf' opacity='0.64'/%3E%3Ccircle cx='67.6' cy='199.4' r='0.99' fill='%23ffffff' opacity='0.72'/%3E%3Ccircle cx='341.5' cy='92.2' r='0.71' fill='%23fff4cf' opacity='0.61'/%3E%3Ccircle cx='361.2' cy='261.7' r='0.77' fill='%23fff4cf' opacity='0.40'/%3E%3Ccircle cx='311.1' cy='325.7' r='0.93' fill='%23fff4cf' opacity='0.71'/%3E%3Ccircle cx='51.3' cy='308.6' r='0.52' fill='%23ffffff' opacity='0.69'/%3E%3Ccircle cx='144.8' cy='220.1' r='0.96' fill='%23d6e8ff' opacity='0.69'/%3E%3Ccircle cx='141.6' cy='137.4' r='0.72' fill='%23fff4cf' opacity='0.87'/%3E%3Ccircle cx='131.5' cy='238.1' r='0.88' fill='%23fff4cf' opacity='0.51'/%3E%3Ccircle cx='232.0' cy='341.8' r='0.88' fill='%23d6e8ff' opacity='0.42'/%3E%3Ccircle cx='374.6' cy='28.0' r='0.92' fill='%23d6e8ff' opacity='0.41'/%3E%3Ccircle cx='300.0' cy='99.1' r='0.47' fill='%23fff4cf' opacity='0.51'/%3E%3Ccircle cx='115.2' cy='66.5' r='0.55' fill='%23ffffff' opacity='0.79'/%3E%3Ccircle cx='257.3' cy='116.9' r='0.82' fill='%23d6e8ff' opacity='0.68'/%3E%3Ccircle cx='9.4' cy='153.5' r='0.65' fill='%23ffffff' opacity='0.56'/%3E%3Ccircle cx='100.6' cy='289.9' r='0.99' fill='%23fff4cf' opacity='0.66'/%3E%3Ccircle cx='387.3' cy='89.5' r='0.64' fill='%23ffffff' opacity='0.83'/%3E%3Ccircle cx='63.6' cy='279.7' r='0.81' fill='%23fff4cf' opacity='0.90'/%3E%3Ccircle cx='387.9' cy='250.4' r='0.82' fill='%23d6e8ff' opacity='0.53'/%3E%3C/svg%3E"), url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='613' height='613' viewBox='0 0 613 613'%3E%3Ccircle cx='586.0' cy='581.0' r='0.47' fill='%23ffffff' opacity='0.62'/%3E%3Ccircle cx='103.6' cy='495.9' r='1.42' fill='%23ffe08a' opacity='0.76'/%3E%3Ccircle cx='372.0' cy='356.3' r='0.59' fill='%23ffe08a' opacity='0.78'/%3E%3Ccircle cx='492.6' cy='527.3' r='1.01' fill='%23ffe08a' opacity='0.73'/%3E%3Ccircle cx='272.7' cy='164.4' r='0.44' fill='%23ffffff' opacity='0.62'/%3E%3Ccircle cx='571.2' cy='556.5' r='0.91' fill='%23b9a6ff' opacity='0.50'/%3E%3Ccircle cx='108.8' cy='141.4' r='0.61' fill='%23ffffff' opacity='0.48'/%3E%3Ccircle cx='312.8' cy='612.2' r='1.21' fill='%23ffffff' opacity='1.00'/%3E%3Ccircle cx='273.2' cy='254.2' r='1.03' fill='%23ffe08a' opacity='0.87'/%3E%3Ccircle cx='216.9' cy='601.3' r='1.55' fill='%23ffffff' opacity='0.97'/%3E%3Ccircle cx='245.1' cy='452.8' r='1.19' fill='%23ffffff' opacity='0.69'/%3E%3Ccircle cx='566.9' cy='307.0' r='1.40' fill='%23ffe08a' opacity='0.80'/%3E%3Ccircle cx='278.7' cy='553.6' r='0.82' fill='%23b9a6ff' opacity='0.95'/%3E%3Ccircle cx='443.7' cy='298.3' r='0.67' fill='%23ffe08a' opacity='0.89'/%3E%3Ccircle cx='511.9' cy='537.4' r='1.14' fill='%23ffe08a' opacity='0.59'/%3E%3Ccircle cx='586.9' cy='432.9' r='1.01' fill='%23b9a6ff' opacity='0.70'/%3E%3Ccircle cx='377.5' cy='249.3' r='1.28' fill='%23ffe08a' opacity='0.71'/%3E%3Ccircle cx='572.6' cy='382.1' r='0.49' fill='%23ffe08a' opacity='0.84'/%3E%3C/svg%3E"), url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='853' height='853' viewBox='0 0 853 853'%3E%3Cpath d='M140 120 l3 10 l10 3 l-10 3 l-3 10 l-3 -10 l-10 -3 l10 -3z' fill='%23fff4cf'/%3E%3Cpath d='M620 480 l2 7 l7 2 l-7 2 l-2 7 l-2 -7 l-7 -2 l7 -2z' fill='%23d9ceff'/%3E%3Cpath d='M380 760 l2.5 8 l8 2.5 l-8 2.5 l-2.5 8 l-2.5 -8 l-8 -2.5 l8 -2.5z' fill='%23ffffff'/%3E%3C/svg%3E"); background-size: 397px 397px, 613px 613px, 853px 853px; animation: twinkle 5s ease-in-out infinite alternate; }
@keyframes twinkle { from { opacity: .55; } to { opacity: 1; } }
/* une étoile filante de temps en temps */
:root[data-skin="stars"] body::after { content: ""; position: fixed; z-index: 0; pointer-events: none; top: 12%; left: 78%; width: 170px; height: 2px; border-radius: 2px; background: linear-gradient(90deg, rgba(255, 255, 255, 0), rgba(255, 244, 207, .9) 85%, #fff); filter: drop-shadow(0 0 6px #fff4cf); transform: rotate(-24deg) translateX(0); opacity: 0; animation: shoot 13s ease-in infinite 3s; }
@keyframes shoot { 0%, 86% { opacity: 0; transform: rotate(-24deg) translateX(0); } 88% { opacity: 1; } 97% { opacity: .9; } 100% { opacity: 0; transform: rotate(-24deg) translateX(-70vw); } }
:root[data-skin="stars"] .topbar { background: rgba(3, 14, 36, .82); border-bottom: 1px solid rgba(142, 197, 255, .25); }
:root[data-skin="stars"] .brand b, :root[data-skin="stars"] h1, :root[data-skin="stars"] .listhead h1, :root[data-skin="stars"] .sheet h3 { font-family: var(--astro); font-weight: 400; letter-spacing: .08em; color: #fff7dc; text-shadow: 0 0 12px rgba(255, 224, 138, .45); }
:root[data-skin="stars"] .brand span { color: var(--lav); }
:root[data-skin="stars"] h1 { font-size: 30px; font-style: italic; }
:root[data-skin="stars"] h1 .h1sub { font-style: normal; letter-spacing: 0; color: var(--muted); text-shadow: none; font-family: system-ui, sans-serif; }
/* titres de section : une petite constellation */
:root[data-skin="stars"] h2 { font-family: var(--astro); font-weight: 400; font-size: 19px; letter-spacing: .14em; text-transform: uppercase; color: var(--accent); padding-bottom: 8px; margin: 30px 0 16px; border-bottom: 1px dashed rgba(142, 197, 255, .45); }
:root[data-skin="stars"] h2::before { content: "✦"; color: #fff4cf; margin-right: 10px; text-shadow: 0 0 10px #ffe08a; display: inline-block; animation: twinkle 2.4s ease-in-out infinite alternate; }
:root[data-skin="stars"] h2::after { content: "·  ✧  ·"; margin-left: 12px; font-size: 12px; color: var(--lav); letter-spacing: .3em; }
:root[data-skin="stars"] h2 small { color: var(--muted); letter-spacing: .02em; text-transform: none; font-family: system-ui, sans-serif; }
:root[data-skin="stars"] .crumbs { font-family: var(--astro); font-style: italic; }
:root[data-skin="stars"] .sidebar { border-right: 1px solid rgba(142, 197, 255, .2); background: linear-gradient(180deg, rgba(6, 22, 52, .85), rgba(3, 14, 36, .6)); }
:root[data-skin="stars"] .sidebar a { font-family: var(--astro); letter-spacing: .06em; font-size: 15px; }
:root[data-skin="stars"] .sidebar a:hover { color: #fff7dc; background: rgba(255, 224, 138, .06); }
:root[data-skin="stars"] .sidebar a.on { color: #fff7dc; background: linear-gradient(90deg, rgba(255, 224, 138, .18), rgba(142, 197, 255, .08)); border-color: rgba(255, 224, 138, .5); box-shadow: 0 0 18px -6px var(--accent); }
:root[data-skin="stars"] .sidebar a.on::after { content: "✦"; margin-left: auto; color: var(--accent); font-size: 12px; text-shadow: 0 0 8px var(--accent); }
:root[data-skin="stars"] .sidebar a.on .cnt { background: var(--accent); color: var(--accent-ink); border-color: transparent; }
:root[data-skin="stars"] .sidebar .sep { background: linear-gradient(90deg, transparent, var(--lav), transparent); opacity: .6; }
:root[data-skin="stars"][data-tabs="left"] .sidebar .ono { font-family: var(--astro); font-style: italic; font-size: 19px; letter-spacing: .04em; color: var(--c1, #fff4cf); -webkit-text-stroke: 0; text-shadow: 0 0 10px rgba(255, 224, 138, .6); animation: twinkle 3.2s ease-in-out infinite alternate; }
/* pas de violet ni de couleurs vives dans le ciel : les onomatopées passent en or pâle et bleu ciel, une sur deux */
:root[data-skin="stars"][data-tabs="left"] .sidebar .ono { color: #fff1c4 !important; }
:root[data-skin="stars"][data-tabs="left"] .sidebar .ono:nth-of-type(2n) { color: #a8d4ff !important; text-shadow: 0 0 10px rgba(142, 197, 255, .6); }
:root[data-skin="stars"][data-tabs="left"] .sidebar .ono::before { content: "✧"; color: var(--accent); font-style: normal; }
:root[data-skin="stars"] .btn, :root[data-skin="stars"] .pager .pg, :root[data-skin="stars"] .tabs .tab, :root[data-skin="stars"] .stabs .tab { border-radius: 999px; border: 1px solid rgba(142, 197, 255, .4); background: rgba(12, 32, 72, .75); letter-spacing: .02em; }
:root[data-skin="stars"] .btn:hover, :root[data-skin="stars"] .pager .pg:hover:not(:disabled) { border-color: var(--accent); box-shadow: 0 0 14px -4px var(--accent); }
:root[data-skin="stars"] .btn.primary, :root[data-skin="stars"] .pager .pg.on, :root[data-skin="stars"] .tabs .tab.on, :root[data-skin="stars"] .stabs .tab.on, :root[data-skin="stars"] .btn.fav-on { background: radial-gradient(120% 160% at 30% 0%, #fff4cf, var(--accent) 55%, #e6b84a); color: var(--accent-ink); border-color: transparent; box-shadow: 0 0 18px -4px var(--accent); }
:root[data-skin="stars"] .btn.adult-on { background: var(--lav); border-color: var(--lav); color: #04163a; }
:root[data-skin="stars"] .iconbtn, :root[data-skin="stars"] .search input { border-radius: 999px; border-color: rgba(142, 197, 255, .4); background: rgba(12, 32, 72, .75); }
:root[data-skin="stars"] .search input:focus { border-color: var(--accent); box-shadow: 0 0 14px -4px var(--accent); }
:root[data-skin="stars"] .card .cover, :root[data-skin="stars"] .sheet .cover { border-radius: 6px; box-shadow: var(--cover-shadow), 0 0 0 1px rgba(142, 197, 255, .25); }
:root[data-skin="stars"][data-covers="book"] .card.album .cover, :root[data-skin="stars"][data-covers="book"] .card.folder .cover { border-radius: 2px 6px 6px 2px; box-shadow: 3px 0 0 -1px #e3f0ff, 5px 0 0 -2px var(--lav), 7px 0 0 -3px #1f4a8a, var(--cover-shadow); }
@media (hover: hover) { :root[data-skin="stars"] .card:hover .cover { box-shadow: var(--cover-shadow), 0 0 0 1px var(--accent), 0 0 30px -2px rgba(255, 224, 138, .55); } }
:root[data-skin="stars"] .card .title { letter-spacing: .01em; }
:root[data-skin="stars"] .card .fav { background: linear-gradient(135deg, #fff4cf, var(--accent)); }
:root[data-skin="stars"] .card .fav b { color: var(--accent-ink); }
:root[data-skin="stars"] .badge { border-radius: 999px; background: rgba(3, 14, 36, .85); color: #fff4cf; border: 1px solid rgba(255, 224, 138, .5); }
:root[data-skin="stars"] .badge.ok { background: var(--ok); color: #04261a; border-color: transparent; }
:root[data-skin="stars"] .badge.adult { background: var(--lav); color: #04163a; border-color: transparent; }
:root[data-skin="stars"] .bar i { background: linear-gradient(90deg, var(--lav), var(--accent)); box-shadow: 0 0 8px var(--accent); }
:root[data-skin="stars"] .bdt-panel, :root[data-skin="stars"] .settings section, :root[data-skin="stars"] .stabs, :root[data-skin="stars"] .sheet, :root[data-skin="stars"] .listcard, :root[data-skin="stars"] .letters.rail, :root[data-skin="stars"] .coltable, :root[data-skin="stars"] .adult-gate { border: 1px solid rgba(142, 197, 255, .28); border-radius: 14px; background-color: rgba(6, 22, 52, .82); box-shadow: 0 0 40px -18px var(--lav), var(--shadow); }
:root[data-skin="stars"] .field select, :root[data-skin="stars"] .field input[type=number], :root[data-skin="stars"] .sheet.pin input, :root[data-skin="stars"] .pin-inline input { border-radius: 999px; border: 1px solid rgba(142, 197, 255, .4); }
:root[data-skin="stars"] .switch input:checked + i { background: var(--accent); box-shadow: 0 0 10px -2px var(--accent); }
:root[data-skin="stars"] .letters.rail button.on:hover, :root[data-skin="stars"] .letters button.on:hover { background: var(--accent); color: var(--accent-ink); }
:root[data-skin="stars"] .toast { border: 1px solid rgba(255, 224, 138, .6); border-radius: 999px; box-shadow: 0 0 24px -6px var(--accent), var(--shadow); }
:root[data-skin="stars"] .toast::before { content: "✦"; color: var(--accent); }
:root[data-skin="stars"] .pavatar { background: var(--lav); color: #04163a; border: 0; }
/* éclat : une étoile dorée */
:root[data-skin="stars"] .pow { clip-path: polygon(50% 0%, 61% 34%, 98% 35%, 68% 57%, 79% 92%, 50% 71%, 21% 92%, 32% 57%, 2% 35%, 39% 34%); padding: 56px 58px 50px; font-family: var(--astro); font-weight: 700; font-style: italic; font-size: 19px; letter-spacing: .02em; color: #3a2a00; text-shadow: 0 1px 0 rgba(255, 255, 255, .6); background: radial-gradient(circle at 50% 45%, #fffbe6 0 20%, #ffe08a 50%, #e6a92e 100%); filter: drop-shadow(0 0 14px rgba(255, 224, 138, .8)); }
:root[data-skin="stars"] .lab { border-left: 1px solid rgba(142, 197, 255, .4); }
:root[data-skin="stars"] .sumpop { border-color: rgba(255, 224, 138, .5); }
:root[data-skin="stars"] .topbar .ver { border-radius: 999px; border-color: rgba(255, 224, 138, .5); color: var(--accent); font-family: var(--astro); }
:root[data-skin="stars"] .sidebar .grow .sc { border: 1px solid rgba(255, 224, 138, .6); border-radius: 6px; box-shadow: 0 0 22px -4px rgba(255, 224, 138, .5), 0 10px 24px rgba(0, 0, 10, .6); }

@media (prefers-reduced-motion: reduce) {
  :root[data-skin="ocean"] body::before, :root[data-skin="ocean"] body::after, :root[data-skin="stars"] body::before, :root[data-skin="stars"] body::after, :root[data-skin="ocean"] h2::before, :root[data-skin="stars"] h2::before { animation: none !important; }
  :root[data-skin="stars"] body::after { display: none; }
}
:root[data-skin="stars"] #mosaic .mz { filter: saturate(.6) brightness(.5) hue-rotate(-12deg); }

/* ---- qualité HD / SD : sélecteur du menu et pastille sur les couvertures */
.sidebar .qual { display: flex; align-items: center; gap: 2px; margin: 2px 6px 6px; padding: 3px; border-radius: 10px; background: var(--bg-2); border: 1px solid var(--line); flex: none; }
.sidebar .qual .qlbl { font-size: 11px; font-weight: 700; color: var(--muted); text-transform: uppercase; letter-spacing: .04em; padding: 0 6px 0 5px; }
.sidebar .qual button { flex: 1; border: 0; background: transparent; color: var(--muted); font: inherit; font-size: 12.5px; font-weight: 700; padding: 4px 0; border-radius: 7px; cursor: pointer; min-width: 0; }
.sidebar .qual button:hover { color: var(--text); }
.sidebar .qual button.on { background: var(--accent); color: var(--accent-ink, #231a05); }
@media (min-width: 701px) and (max-width: 1000px) {
  :root[data-tabs="left"] .sidebar .qual { flex-direction: column; margin: 2px 0 6px; }
  :root[data-tabs="left"] .sidebar .qual .qlbl { display: none; }
  :root[data-tabs="left"] .sidebar .qual button { width: 100%; font-size: 11px; }
}
:root[data-tabs="top"] .sidebar .qual { margin: 0 4px; border-radius: 999px; }
:root[data-tabs="top"] .sidebar .qual .qlbl { display: none; }
:root[data-tabs="top"] .sidebar .qual button { padding: 3px 9px; border-radius: 999px; }
.qtag { position: absolute; left: 8px; top: 8px; z-index: 2; padding: 1px 6px; border-radius: 5px; font-size: 10.5px; font-weight: 800; letter-spacing: .03em; line-height: 16px; pointer-events: none;
  background: rgba(15, 17, 21, .78); color: #fff; border: 1px solid rgba(255, 255, 255, .35); backdrop-filter: blur(4px); }
.qtag.hd { background: #1f6feb; border-color: rgba(255, 255, 255, .55); }
.qtag.hd.part { background: rgba(31, 111, 235, .72); font-weight: 700; }
.qtag.sd { background: rgba(90, 96, 110, .85); }
.qtag.sd.part { background: rgba(90, 96, 110, .72); font-weight: 700; }
:root[data-skin="bd"] .qtag { border: 2px solid var(--ink); border-radius: 3px; box-shadow: 2px 2px 0 var(--ink); }
.setsub { margin: 22px 0 6px; font-size: 15px; }
.qtag.static { position: static; display: inline-block; vertical-align: 1px; }
/* pastille HD / SD en haut à gauche ; si le coin est pris par le ruban « favori », elle se décale à côté */
.card .cover:has(.fav) .qtag { left: 40px; }
:root[data-covers="book"] .card .cover .qtag { left: 12px; }
:root[data-covers="book"] .card .cover:has(.fav) .qtag { left: 44px; }
.qstats { font-size: 14px; margin-bottom: 6px; }
.qrun { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; font-size: 13.5px; }
.qrun .pbar { flex-basis: 100%; }
/* ---- comptes : vignettes image, rôle, écran « Mon compte » */
img.pavatar { object-fit: cover; padding: 0; }
.pavatar.big { width: 72px; height: 72px; font-size: 30px; }
.prole { font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: .04em; color: var(--muted); background: var(--bg-2); border: 1px solid var(--line); border-radius: 999px; padding: 1px 7px; }
.ptile .prole { position: absolute; left: 6px; top: 6px; font-size: 9.5px; padding: 0 5px; }
.avatar-edit { align-items: center; gap: 10px; flex-wrap: wrap; }
.prow select { margin-left: 4px; }
/* ---- page Activité */
.stiles { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 12px; margin: 6px 0 18px; }
.stile { background: var(--card); border: 1px solid var(--line); border-radius: 14px; padding: 14px 16px; display: flex; flex-direction: column; gap: 2px; }
.stile b { font-size: 26px; line-height: 1.1; }
.stile span { font-size: 13px; color: var(--muted); }
.bars { display: flex; justify-content: flex-start; align-items: flex-end; gap: 6px; height: 120px; padding: 0 2px 22px; margin: 4px 0 18px; border-bottom: 1px solid var(--line); position: relative; }
.bars .bar { flex: 1; min-width: 0; max-width: 90px; height: 100%; display: flex; flex-direction: column; justify-content: flex-end; position: relative; }
.bars .bar i { display: block; background: var(--accent); border-radius: 6px 6px 2px 2px; min-height: 2px; opacity: .9; }
.bars .bar span { position: absolute; left: 0; right: 0; top: 100%; margin-top: 4px; text-align: center; font-size: 11px; color: var(--muted); white-space: nowrap; overflow: hidden; }
.bars .bar span em { display: block; font-style: normal; font-weight: 700; color: var(--text); font-size: 11px; }
.acols { display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: 0 28px; }
.alist { list-style: none; margin: 4px 0 16px; padding: 0; }
.alist li { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 4px 12px; padding: 7px 0; border-bottom: 1px solid var(--line); font-size: 14px; }
.alist li .muted { font-size: 12.5px; }
.atable td, .atable th { padding: 6px 10px; text-align: left; }
.atable td:nth-child(n+2), .atable th:nth-child(n+2) { text-align: right; }
.atable .pavatar.small { vertical-align: middle; margin-right: 4px; }
:root[data-skin="bd"] .stile { border: 2px solid var(--ink); box-shadow: 4px 4px 0 var(--ink); border-radius: 6px; }

/* ======================================================================
   habillage Fanzine : un zine imprimé en risographie. Papier crème au grain fin,
   deux encres (rose fluo et bleu riso) un peu décalées, surligneur jaune, scotch,
   tampons. Plus doux et plus soigné qu'une photocopie, mais fait main.
   ====================================================================== */
:root[data-skin="riso"], :root[data-skin="riso"][data-theme="light"] {
  --bg: #f4eee2; --bg-2: #fbf7ef; --card: #fffcf6; --card-2: #f1e8d7; --line: #dccfb6; --text: #23264a; --muted: #6d6a7c;
  --accent: #ff4f9a; --accent-ink: #ffffff; --blue: #2f5bd3; --ok: #1fa37f; --warn: #e8543f; --radius: 6px;
  --pink: #ff4f9a; --rblue: #2f5bd3; --yel: #ffc83a; --mint: #1fa37f;
  --zine: "Avenir Next Condensed", "Futura", "Franklin Gothic Medium", "Arial Narrow", "Helvetica Neue", sans-serif;
  --type: "Iowan Old Style", "Palatino Linotype", "Book Antiqua", Georgia, serif;
  --hand2: "Patrick Hand SC", var(--hand, "Comic Neue"), "Comic Sans MS", cursive;
  --ink-shadow: 3px 3px 0 rgba(47, 91, 211, .9);
  --cover-shadow: none;
  --shadow: 0 1px 0 rgba(35, 38, 74, .08), 0 12px 28px -14px rgba(35, 38, 74, .35);
  color-scheme: light;
}
/* papier : grain très fin + deux taches de trame (rose en haut à droite, bleue en bas à gauche) */
:root[data-skin="riso"] body {
  font-family: var(--type); font-size: 15.5px; color: var(--text);
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='240' height='240'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 .14 0 0 0 0 .13 0 0 0 0 .22 0 0 0 .07 0'/%3E%3C/filter%3E%3Crect width='240' height='240' filter='url(%23n)'/%3E%3C/svg%3E"), var(--bg);
  background-attachment: fixed;
}
/* deux taches de trame imprimée : rose en haut à droite, bleue en bas à gauche */
:root[data-skin="riso"] body::before { content: ""; position: fixed; inset: 0; z-index: 0; pointer-events: none;
  background: radial-gradient(circle, rgba(255, 79, 154, .32) 1.15px, transparent 1.7px) 0 0 / 8px 8px;
  -webkit-mask-image: radial-gradient(48% 42% at 100% 0%, #000 0%, transparent 100%); mask-image: radial-gradient(48% 42% at 100% 0%, #000 0%, transparent 100%); }
:root[data-skin="riso"] body::after { content: ""; position: fixed; inset: 0; z-index: 0; pointer-events: none;
  background: radial-gradient(circle, rgba(47, 91, 211, .26) 1.15px, transparent 1.7px) 4px 4px / 8px 8px;
  -webkit-mask-image: radial-gradient(46% 40% at 0% 100%, #000 0%, transparent 100%); mask-image: radial-gradient(46% 40% at 0% 100%, #000 0%, transparent 100%); }
:root[data-skin="riso"] ::selection { background: var(--yel); color: var(--text); }
/* barre du haut : filet double à l'encre, liseré rose décalé */
:root[data-skin="riso"] .topbar { background: color-mix(in srgb, var(--bg-2) 94%, transparent); border-bottom: 1.5px solid var(--text); box-shadow: 0 3px 0 -1px var(--bg-2), 0 4px 0 -1px var(--text), 0 7px 0 -2px rgba(255, 79, 154, .8); }
:root[data-skin="riso"] .brand b { font-family: var(--zine); font-weight: 800; font-size: 25px; letter-spacing: .01em; text-transform: uppercase; color: var(--rblue); text-shadow: 2px 1.5px 0 rgba(255, 79, 154, .85); }
:root[data-skin="riso"] .brand span { color: var(--pink); text-shadow: -1.5px 1px 0 rgba(47, 91, 211, .8); }
:root[data-skin="riso"] .topbar .ver { border-radius: 999px; border: 1.5px solid var(--text); color: var(--text); background: var(--yel); font-family: var(--zine); font-weight: 700; letter-spacing: .04em; transform: rotate(-4deg); }
/* titres : grosses capitales condensées, bleu riso avec le rose mal calé derrière */
:root[data-skin="riso"] h1, :root[data-skin="riso"] .listhead h1, :root[data-skin="riso"] .sheet h3 { font-family: var(--zine); font-weight: 800; text-transform: uppercase; letter-spacing: .005em; color: var(--rblue); text-shadow: 3px 2px 0 rgba(255, 79, 154, .8); }
:root[data-skin="riso"] h1 { font-size: 34px; line-height: 1.05; }
@media (hover: hover) { :root[data-skin="riso"] h1:hover { animation: misreg .5s steps(3) 1; } }
@keyframes misreg { 33% { text-shadow: -2px 1px 0 rgba(255, 79, 154, .85); } 66% { text-shadow: 4px 3px 0 rgba(255, 79, 154, .8); } }
:root[data-skin="riso"] h1 .h1sub { font-family: var(--type); font-weight: 400; font-style: italic; text-transform: none; color: var(--muted); text-shadow: none; letter-spacing: 0; font-size: 15px; }
/* titres de section : coup de surligneur jaune, petit bout de scotch, numéro au tampon */
:root[data-skin="riso"] h2 { position: relative; display: inline-flex; align-items: baseline; gap: 10px; font-family: var(--zine); font-weight: 800; font-size: 19px; text-transform: uppercase; letter-spacing: .03em; color: var(--text); padding: 3px 14px 2px; margin: 34px 0 18px 4px;
  background: linear-gradient(97deg, transparent 0 1.5%, rgba(255, 200, 58, .85) 2.5% 96%, transparent 97.5%) 0 62% / 100% 70% no-repeat; rotate: -.6deg; }
:root[data-skin="riso"] h2::before { content: ""; position: absolute; left: -14px; top: -10px; width: 44px; height: 15px; background: rgba(255, 252, 240, .72); border-left: 1px dashed rgba(35, 38, 74, .18); border-right: 1px dashed rgba(35, 38, 74, .18); transform: rotate(-28deg); box-shadow: 0 1px 2px rgba(0, 0, 0, .1); backdrop-filter: blur(.5px); }
:root[data-skin="riso"] h2 small { font-family: var(--type); font-style: italic; font-weight: 400; text-transform: none; color: var(--text); opacity: .7; letter-spacing: 0; font-size: 13px; }
:root[data-skin="riso"] .crumbs { font-family: var(--type); font-style: italic; }
:root[data-skin="riso"] .crumbs .cur { font-style: normal; font-family: var(--zine); text-transform: uppercase; letter-spacing: .03em; color: var(--rblue); }
:root[data-skin="riso"] .crumbs .crumb-back { border: 1.5px solid var(--text); box-shadow: 2px 2px 0 var(--pink); background: var(--bg-2); }
/* colonne de gauche : feuille de carnet, lignes bleues pâles, marge rose */
:root[data-skin="riso"] .sidebar { border-right: 1.5px solid var(--text); background: linear-gradient(90deg, transparent 0 22px, rgba(255, 79, 154, .35) 22px 23.5px, transparent 23.5px), repeating-linear-gradient(180deg, transparent 0 31px, rgba(47, 91, 211, .14) 31px 32px), var(--bg-2); }
:root[data-skin="riso"] .sidebar a, :root[data-skin="riso"]:not([data-skin="sobre"])[data-tabs="left"] .sidebar a { font-family: var(--zine); font-weight: 700; text-transform: uppercase; font-size: 13.5px; letter-spacing: .04em; border-radius: 4px; color: var(--text); }
:root[data-skin="riso"] .sidebar a svg { color: var(--rblue); }
:root[data-skin="riso"] .sidebar a:hover { color: var(--rblue); background: rgba(47, 91, 211, .07); }
:root[data-skin="riso"] .sidebar a.on { color: #fff; background: var(--pink); border-color: transparent; box-shadow: 2px 2px 0 var(--rblue); transform: rotate(-1deg); }
:root[data-skin="riso"] .sidebar a.on svg { color: #fff; }
:root[data-skin="riso"] .sidebar a.on .cnt { background: #fff; color: var(--pink); border-color: transparent; }
:root[data-skin="riso"] .sidebar .cnt { border-radius: 999px; font-family: var(--zine); font-weight: 700; border: 1px solid var(--text); background: var(--bg-2); }
:root[data-skin="riso"] .sidebar .sep { height: 2px; background: repeating-linear-gradient(90deg, var(--text) 0 6px, transparent 6px 11px); opacity: .45; }
:root[data-skin="riso"][data-tabs="left"] .sidebar .ono { font-family: var(--hand2); font-size: 18px; letter-spacing: .02em; color: var(--c1, var(--pink)); -webkit-text-stroke: 0; text-shadow: 1.5px 1px 0 rgba(47, 91, 211, .55); }
:root[data-skin="riso"][data-tabs="left"] .sidebar .ono::before { content: "✎"; color: var(--rblue); text-shadow: none; }
:root[data-skin="riso"] .sidebar .qual { background: var(--card); border: 1.5px solid var(--text); border-radius: 999px; }
:root[data-skin="riso"] .sidebar .qual button { font-family: var(--zine); border-radius: 999px; }
:root[data-skin="riso"] .sidebar .qual button.on { background: var(--rblue); color: #fff; }
/* boutons : étiquettes cartonnées, contour encre, ombre bleue décalée */
:root[data-skin="riso"] .btn, :root[data-skin="riso"] .pager .pg, :root[data-skin="riso"] .tabs .tab, :root[data-skin="riso"] .stabs .tab { font-family: var(--zine); font-weight: 700; text-transform: uppercase; font-size: 12.5px; letter-spacing: .05em; border: 1.5px solid var(--text); border-radius: 6px; background: var(--card); color: var(--text); box-shadow: 2px 2px 0 var(--text); transition: transform .12s, box-shadow .12s; }
:root[data-skin="riso"] .btn:hover, :root[data-skin="riso"] .pager .pg:hover:not(:disabled), :root[data-skin="riso"] .stabs .tab:hover { transform: translate(-1px, -1px); box-shadow: 3px 3px 0 var(--rblue); }
:root[data-skin="riso"] .btn:active { transform: translate(1px, 1px); box-shadow: 0 0 0 var(--text); }
:root[data-skin="riso"] .btn.primary, :root[data-skin="riso"] .pager .pg.on, :root[data-skin="riso"] .tabs .tab.on, :root[data-skin="riso"] .stabs .tab.on { background: var(--pink); color: #fff; box-shadow: 3px 3px 0 var(--rblue); }
:root[data-skin="riso"] .btn.fav-on { background: var(--yel); color: var(--text); }
:root[data-skin="riso"] .btn.adult-on { background: var(--text); color: var(--yel); }
:root[data-skin="riso"] .iconbtn, :root[data-skin="riso"] .search input { border: 1.5px solid var(--text); border-radius: 999px; background: var(--card); color: var(--text); }
:root[data-skin="riso"] .iconbtn svg { color: var(--rblue); }
:root[data-skin="riso"] .search input { font-family: var(--type); font-style: italic; }
:root[data-skin="riso"] .search input:focus { box-shadow: 3px 3px 0 var(--pink); outline: none; }
/* couvertures : filet d'encre, ombre pleine décalée (bleu, rose, jaune en alternance), légèrement de travers */
:root[data-skin="riso"] .card .cover, :root[data-skin="riso"] .sheet .cover { border-radius: 3px; border: 1.5px solid var(--text); box-shadow: 5px 5px 0 var(--rblue); }
:root[data-skin="riso"] .card:nth-child(3n+2) .cover { box-shadow: 5px 5px 0 var(--pink); rotate: .5deg; }
:root[data-skin="riso"] .card:nth-child(3n) .cover { box-shadow: 5px 5px 0 var(--yel), 5px 5px 0 1.5px var(--text); rotate: -.5deg; }
:root[data-skin="riso"][data-covers="book"] .card.album .cover, :root[data-skin="riso"][data-covers="book"] .card.folder .cover { border-radius: 2px 4px 4px 2px; }
:root[data-skin="riso"][data-covers="book"] .card.folder::before, :root[data-skin="riso"][data-covers="book"] .card.folder::after { border: 1.5px solid var(--text); border-radius: 3px; background: var(--card-2); }
:root[data-skin="riso"] .card .cover img { filter: contrast(1.03) saturate(1.05); }
@media (hover: hover) { :root[data-skin="riso"] .card:hover .cover { rotate: -1.5deg; box-shadow: 7px 7px 0 var(--pink), -2px -2px 0 rgba(47, 91, 211, .7); } }
:root[data-skin="riso"] .card .title { font-family: var(--zine); font-weight: 700; font-size: 14px; letter-spacing: .01em; }
:root[data-skin="riso"] .card .sub { font-family: var(--type); font-style: italic; }
:root[data-skin="riso"] .card .fav { background: var(--yel); }
:root[data-skin="riso"] .card .fav b { color: var(--text); }
/* pastilles : petits tampons ronds */
:root[data-skin="riso"] .badge { border-radius: 999px; font-family: var(--zine); font-weight: 800; background: var(--card); color: var(--text); border: 1.5px solid var(--text); }
:root[data-skin="riso"] .badge.ok { background: var(--mint); color: #fff; border-color: var(--text); }
:root[data-skin="riso"] .badge.adult { background: var(--text); color: var(--yel); }
:root[data-skin="riso"] .qtag { border: 1.5px solid var(--text); border-radius: 3px; font-family: var(--zine); box-shadow: 1.5px 1.5px 0 var(--text); backdrop-filter: none; }
:root[data-skin="riso"] .qtag.hd { background: var(--rblue); }
:root[data-skin="riso"] .qtag.sd { background: var(--card); color: var(--text); }
:root[data-skin="riso"] .bar i { background: repeating-linear-gradient(135deg, var(--pink) 0 6px, var(--rblue) 6px 12px); }
:root[data-skin="riso"] .pbar i { background: var(--pink); }
/* panneaux : fiches de carton crème, contour encre, ombre bleue ; un sur deux en rose */
:root[data-skin="riso"] .bdt-panel, :root[data-skin="riso"] .settings section, :root[data-skin="riso"] .stabs, :root[data-skin="riso"] .sheet, :root[data-skin="riso"] .listcard, :root[data-skin="riso"] .letters.rail, :root[data-skin="riso"] .coltable, :root[data-skin="riso"] .adult-gate, :root[data-skin="riso"] .stile {
  border: 1.5px solid var(--text); border-radius: 8px; background-color: var(--card); box-shadow: 5px 5px 0 rgba(47, 91, 211, .85); }
:root[data-skin="riso"] .settings section:nth-of-type(2n), :root[data-skin="riso"] .stile:nth-child(2n) { box-shadow: 5px 5px 0 rgba(255, 79, 154, .85); }
:root[data-skin="riso"] .stile b { font-family: var(--zine); color: var(--rblue); text-shadow: 2px 1.5px 0 rgba(255, 79, 154, .7); }
:root[data-skin="riso"] .bars .bar i { background: var(--rblue); box-shadow: 2px 0 0 rgba(255, 79, 154, .8); border-radius: 2px; }
:root[data-skin="riso"] .flabel span { font-family: var(--zine); font-weight: 700; text-transform: uppercase; letter-spacing: .03em; font-size: 13.5px; }
:root[data-skin="riso"] .flabel small { font-style: italic; }
:root[data-skin="riso"] .field select, :root[data-skin="riso"] .field input[type=number], :root[data-skin="riso"] .field input[type=text], :root[data-skin="riso"] .sheet.pin input, :root[data-skin="riso"] .pin-inline input, :root[data-skin="riso"] .sheet select { border-radius: 6px; border: 1.5px solid var(--text); font-family: var(--type); background: var(--bg-2); color: var(--text); }
:root[data-skin="riso"] .switch input:checked + i { background: var(--pink); }
:root[data-skin="riso"] .letters.rail button { font-family: var(--zine); font-weight: 700; }
:root[data-skin="riso"] .letters.rail button.on:hover, :root[data-skin="riso"] .letters button.on:hover { background: var(--yel); color: var(--text); }
/* notifications : un post-it jaune collé de travers */
:root[data-skin="riso"] .toast { border: 1.5px solid var(--text); border-radius: 2px; font-family: var(--hand2); font-size: 17px; background: var(--yel); color: var(--text); box-shadow: 3px 4px 0 rgba(35, 38, 74, .25); rotate: -1.5deg; }
:root[data-skin="riso"] .pavatar { background: var(--pink); color: #fff; border: 1.5px solid var(--text); font-family: var(--zine); font-weight: 800; }
/* éclat : coup de tampon encreur rose, de travers */
:root[data-skin="riso"] .pow { clip-path: none; background: rgba(255, 252, 246, .9); color: var(--pink); border: 3px solid var(--pink); outline: 1.5px solid var(--pink); outline-offset: 3px; border-radius: 10px; padding: 10px 22px; font-family: var(--zine); font-weight: 800; font-size: 26px; text-transform: uppercase; letter-spacing: .06em; text-shadow: none; filter: none; rotate: -8deg; mix-blend-mode: multiply; }
:root[data-skin="riso"] .lab { border-left: 1.5px solid var(--text); box-shadow: -5px 0 0 var(--pink); }
:root[data-skin="riso"] .sumpop { border: 1.5px solid var(--text); border-radius: 8px; box-shadow: 4px 4px 0 var(--rblue); background: var(--card); }
:root[data-skin="riso"] .sidebar .grow .sc { border: 1.5px solid var(--text); border-radius: 3px; box-shadow: 4px 4px 0 var(--pink); }
:root[data-skin="riso"] .sidebar .grow .sc:nth-child(2n) { box-shadow: 4px 4px 0 var(--rblue); }
/* la mosaïque de fond devient une impression bichromie pâle sur le papier */
:root[data-skin="riso"] #mosaic .mz { filter: grayscale(1) contrast(.9) brightness(1.35) sepia(.25); mix-blend-mode: multiply; }

/* ---- Aquarium : bulles qui remontent ; certaines, tirées au sort, gonflent puis éclatent (avec un petit « blop ») */
#bubbles { position: fixed; inset: 0; z-index: 0; pointer-events: none; overflow: hidden; }
#bubbles .bub { position: absolute; bottom: -40px; left: var(--x); width: var(--s); height: var(--s); border-radius: 50%;
  background: radial-gradient(circle at 32% 30%, rgba(255, 255, 255, .85) 0 12%, rgba(191, 246, 255, .25) 26%, rgba(191, 246, 255, .06) 60%, rgba(191, 246, 255, .35) 100%);
  box-shadow: inset 0 0 0 1px rgba(191, 246, 255, .55); opacity: .75;
  animation: bub-rise var(--d) linear forwards, bub-wobble 2.6s ease-in-out infinite alternate; }
#bubbles .bub i { position: absolute; inset: 0; border-radius: 50%; transition: transform .9s cubic-bezier(.3, 1.5, .5, 1); }
#bubbles .bub.grow i { transform: scale(var(--g, 2.2)); background: inherit; box-shadow: inherit; }
#bubbles .bub.grow { background: none; box-shadow: none; }
#bubbles .bub.pop { animation-play-state: paused, paused; }
#bubbles .bub.pop i { animation: bub-pop .32s ease-out forwards; }
#bubbles .bub.pop::before, #bubbles .bub.pop::after { content: ""; position: absolute; left: 50%; top: 50%; width: 4px; height: 4px; margin: -2px; border-radius: 50%; background: rgba(220, 250, 255, .9);
  box-shadow: 14px -10px 0 -1px rgba(220, 250, 255, .8), -13px -9px 0 -1px rgba(220, 250, 255, .8), 10px 12px 0 -1px rgba(220, 250, 255, .7), -11px 11px 0 -1px rgba(220, 250, 255, .7), 0 -16px 0 -1px rgba(220, 250, 255, .8);
  animation: bub-spray .38s ease-out forwards; }
#bubbles .bub.pop::after { transform: rotate(45deg); }
@keyframes bub-rise { from { transform: translateY(0); } to { transform: translateY(calc(-100vh - 80px)); } }
@keyframes bub-wobble { from { margin-left: -6px; } to { margin-left: 6px; } }
@keyframes bub-pop { 0% { transform: scale(var(--g, 2.2)); opacity: 1; } 60% { transform: scale(calc(var(--g, 2.2) * 1.25)); opacity: .5; box-shadow: inset 0 0 0 2px rgba(220, 250, 255, .9); background: none; } 100% { transform: scale(calc(var(--g, 2.2) * 1.4)); opacity: 0; background: none; } }
@keyframes bub-spray { from { opacity: 1; scale: .4; } to { opacity: 0; scale: 1.6; } }
:root[data-skin="ocean"][data-theme="light"] #bubbles .bub { opacity: .9; filter: brightness(.8) saturate(1.6); }
/* bouton « son » de l'aquarium : seulement dans cet habillage */
#bubble-mute { display: none; }
:root[data-skin="ocean"] #bubble-mute { display: inline-flex; }
#bubble-mute.off svg .w { display: none; }
#bubble-mute:not(.off) svg .x { display: none; }
/* ---- fiche d'un album : boutons rangés (lecture en avant, actions courantes, liste, puis le reste en petit) */
.sheet .sheet-actions { display: flex; flex-direction: column; gap: 10px; margin-top: 12px; }
.sheet .sheet-actions .sa-main, .sheet .sheet-actions .sa-row { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
.sheet .sheet-actions .btn.big { padding: 10px 22px; font-size: 16px; }
.sheet .sheet-actions .lists-row { display: contents; }
.sheet .sheet-actions .lists-row select { min-width: 190px; }
.sheet .sheet-actions .sa-minor { padding-top: 10px; border-top: 1px solid var(--line); gap: 6px; }
.sheet .sheet-actions .sa-minor .btn { opacity: .85; }
.sheet .sheet-actions .sa-minor .btn:hover { opacity: 1; }
.sheet .sheet-actions .sa-row:empty { display: none; }

/* ======================================================================
   habillage Quatre saisons : suit la date (printemps, été, automne, hiver).
   Couleurs de la saison, et ce qui flotte dans l'air derrière le contenu :
   pétales au printemps, lucioles en été, feuilles mortes en automne, neige en hiver.
   ====================================================================== */
:root[data-skin="seasons"] { --round: ui-rounded, "SF Pro Rounded", "Varela Round", "Nunito", "Trebuchet MS", system-ui, sans-serif; --radius: 14px; color-scheme: dark;
  --cover-shadow: 0 10px 24px rgba(0, 0, 0, .45); --shadow: 0 12px 30px rgba(0, 0, 0, .4); }
:root[data-skin="seasons"][data-theme="light"] { color-scheme: light; --cover-shadow: 0 10px 22px rgba(60, 40, 20, .2); --shadow: 0 12px 28px rgba(60, 40, 20, .16); }
/* printemps : vert tendre et fleurs de cerisier */
:root[data-skin="seasons"][data-season="spring"] { --bg: #0f1f19; --bg-2: #142a21; --card: #173026; --card-2: #1e3b2f; --line: #2c5141; --text: #f1fbf4; --muted: #a2c7b2; --s1: #ff9ec4; --s2: #8fd694; --accent: #ff9ec4; --accent-ink: #3a0d20; --blue: #8fd694; --ok: #8fd694; --warn: #ff8a8a; --sky1: rgba(255, 158, 196, .16); --sky2: rgba(143, 214, 148, .14); }
:root[data-skin="seasons"][data-season="spring"][data-theme="light"] { --bg: #f3fbf2; --bg-2: #fbfefa; --card: #e7f5e5; --card-2: #d8eed5; --line: #b7dbb3; --text: #1f3a2a; --muted: #5d7f69; --s1: #e5679a; --s2: #4fa85a; --accent: #e5679a; --accent-ink: #fff; --blue: #4fa85a; --sky1: rgba(229, 103, 154, .14); --sky2: rgba(79, 168, 90, .12); }
/* été : soleil et mer du soir */
:root[data-skin="seasons"][data-season="summer"] { --bg: #102330; --bg-2: #142b3b; --card: #183447; --card-2: #1f4157; --line: #2f5670; --text: #fff7ea; --muted: #bccbd2; --s1: #ffc23d; --s2: #3fc1c9; --accent: #ffc23d; --accent-ink: #2b1b00; --blue: #3fc1c9; --ok: #7fe0a0; --warn: #ff8a6a; --sky1: rgba(255, 194, 61, .2); --sky2: rgba(63, 193, 201, .14); }
:root[data-skin="seasons"][data-season="summer"][data-theme="light"] { --bg: #fff8e8; --bg-2: #fffdf6; --card: #fff0cc; --card-2: #ffe6ad; --line: #efd394; --text: #3a2a10; --muted: #806a45; --s1: #f29f05; --s2: #1a9fb0; --accent: #f29f05; --accent-ink: #fff; --blue: #1a9fb0; --sky1: rgba(242, 159, 5, .18); --sky2: rgba(26, 159, 176, .1); }
/* automne : roux, brique et or */
:root[data-skin="seasons"][data-season="autumn"] { --bg: #1e140e; --bg-2: #261910; --card: #2e1e14; --card-2: #3a2619; --line: #573a25; --text: #fff1e6; --muted: #d6b69e; --s1: #e8772e; --s2: #c9a03a; --accent: #e8913a; --accent-ink: #2a1500; --blue: #c9a03a; --ok: #a9c46a; --warn: #e85a3a; --sky1: rgba(232, 119, 46, .18); --sky2: rgba(184, 64, 42, .14); }
:root[data-skin="seasons"][data-season="autumn"][data-theme="light"] { --bg: #fbf1e4; --bg-2: #fffaf3; --card: #f5e2c9; --card-2: #eed2ad; --line: #e0bd90; --text: #3d2414; --muted: #85614a; --s1: #c8541f; --s2: #a87a14; --accent: #c8541f; --accent-ink: #fff; --blue: #a87a14; --sky1: rgba(200, 84, 31, .14); --sky2: rgba(168, 122, 20, .12); }
/* hiver : bleu glacier et blanc */
:root[data-skin="seasons"][data-season="winter"] { --bg: #0e1a26; --bg-2: #122131; --card: #16283c; --card-2: #1d3249; --line: #2c4865; --text: #f2f8ff; --muted: #a9bed5; --s1: #bfe3ff; --s2: #7fb2e5; --accent: #9fd3ff; --accent-ink: #06203a; --blue: #7fb2e5; --ok: #9fe3c8; --warn: #ff8f9a; --sky1: rgba(191, 227, 255, .14); --sky2: rgba(127, 178, 229, .12); }
:root[data-skin="seasons"][data-season="winter"][data-theme="light"] { --bg: #f2f7fc; --bg-2: #fbfdff; --card: #e3edf7; --card-2: #d3e3f2; --line: #b9cfe4; --text: #1a2c40; --muted: #5d738a; --s1: #3b82c4; --s2: #7fa9d4; --accent: #3b82c4; --accent-ink: #fff; --blue: #3b82c4; --sky1: rgba(59, 130, 196, .12); --sky2: rgba(127, 169, 212, .14); }
:root[data-skin="seasons"] body { font-family: var(--round); font-size: 15px; background: radial-gradient(90% 60% at 85% -10%, var(--sky1), transparent 70%), radial-gradient(80% 60% at 0% 110%, var(--sky2), transparent 70%), var(--bg) fixed; }
#seasonfx { position: fixed; inset: 0; z-index: 0; pointer-events: none; width: 100vw; height: 100vh; }
:root[data-skin="seasons"] .topbar { background: color-mix(in srgb, var(--bg-2) 88%, transparent); border-bottom: 0; box-shadow: 0 1px 0 var(--line), 0 4px 0 -2px color-mix(in srgb, var(--s1) 45%, transparent); }
:root[data-skin="seasons"] .brand b, :root[data-skin="seasons"] h1, :root[data-skin="seasons"] .listhead h1, :root[data-skin="seasons"] .sheet h3 { font-family: var(--round); font-weight: 800; letter-spacing: .01em; color: var(--text); -webkit-text-stroke: 0; text-shadow: none; }
:root[data-skin="seasons"] .brand b { color: var(--s1); }
:root[data-skin="seasons"] .brand span { color: var(--s2); }
:root[data-skin="seasons"] h1 { font-size: 28px; }
:root[data-skin="seasons"] h1 .h1sub { font-weight: 400; color: var(--muted); }
/* titres de section : l'emblème de la saison, puis un petit trait aux deux couleurs */
:root[data-skin="seasons"] h2 { font-family: var(--round); font-weight: 800; font-size: 17px; letter-spacing: .02em; color: var(--s1); padding-bottom: 8px; margin: 30px 0 16px; border: 0; background: linear-gradient(90deg, var(--s1), var(--s2) 40%, transparent 85%) 0 100% / 100% 2px no-repeat; }
:root[data-skin="seasons"] h2::before { content: var(--emblem, "✿"); margin-right: 10px; display: inline-block; animation: sway 4s ease-in-out infinite; }
:root[data-skin="seasons"][data-season="spring"] { --emblem: "🌸"; }
:root[data-skin="seasons"][data-season="summer"] { --emblem: "☀️"; }
:root[data-skin="seasons"][data-season="autumn"] { --emblem: "🍂"; }
:root[data-skin="seasons"][data-season="winter"] { --emblem: "❄️"; }
@keyframes sway { 0%, 100% { transform: rotate(-8deg); } 50% { transform: rotate(8deg) translateY(-1px); } }
:root[data-skin="seasons"] h2 small { color: var(--muted); font-weight: 400; }
:root[data-skin="seasons"] .crumbs { font-family: var(--round); }
:root[data-skin="seasons"] .sidebar { border-right: 0; background: linear-gradient(180deg, color-mix(in srgb, var(--bg-2) 92%, transparent), color-mix(in srgb, var(--bg) 70%, transparent)); box-shadow: 1px 0 0 var(--line); }
:root[data-skin="seasons"] .sidebar a { border-radius: 999px; font-family: var(--round); font-weight: 700; color: var(--text); }
:root[data-skin="seasons"] .sidebar a:hover { background: color-mix(in srgb, var(--s1) 14%, transparent); }
:root[data-skin="seasons"] .sidebar a.on { background: linear-gradient(135deg, var(--s1), color-mix(in srgb, var(--s1) 60%, var(--s2))); color: var(--accent-ink); border-color: transparent; box-shadow: 0 6px 18px -6px var(--s1); }
:root[data-skin="seasons"] .sidebar a.on svg { color: var(--accent-ink); }
:root[data-skin="seasons"] .sidebar a.on .cnt { background: rgba(255, 255, 255, .55); color: var(--accent-ink); border-color: transparent; }
:root[data-skin="seasons"] .sidebar .sep { height: 2px; background: linear-gradient(90deg, transparent, var(--s1), var(--s2), transparent); opacity: .6; }
:root[data-skin="seasons"][data-tabs="left"] .sidebar .ono { font-family: var(--round); font-weight: 800; font-size: 18px; color: var(--s1) !important; -webkit-text-stroke: 0; text-shadow: 0 2px 0 rgba(0, 0, 0, .2); animation: sway 5s ease-in-out infinite; }
:root[data-skin="seasons"][data-tabs="left"] .sidebar .ono:nth-of-type(2n) { color: var(--s2) !important; }
:root[data-skin="seasons"][data-tabs="left"] .sidebar .ono::before { content: var(--emblem); font-size: 12px; margin-right: 4px; }
:root[data-skin="seasons"] .btn, :root[data-skin="seasons"] .pager .pg, :root[data-skin="seasons"] .tabs .tab, :root[data-skin="seasons"] .stabs .tab { border-radius: 999px; font-family: var(--round); font-weight: 700; border: 1px solid var(--line); background: color-mix(in srgb, var(--card) 85%, transparent); color: var(--text); box-shadow: none; text-transform: none; }
:root[data-skin="seasons"] .btn:hover, :root[data-skin="seasons"] .pager .pg:hover:not(:disabled) { border-color: var(--s1); background: color-mix(in srgb, var(--s1) 16%, var(--card)); }
:root[data-skin="seasons"] .btn.primary, :root[data-skin="seasons"] .pager .pg.on, :root[data-skin="seasons"] .tabs .tab.on, :root[data-skin="seasons"] .stabs .tab.on, :root[data-skin="seasons"] .btn.fav-on { background: linear-gradient(135deg, color-mix(in srgb, var(--s1) 70%, #fff), var(--s1)); color: var(--accent-ink); border-color: transparent; }
:root[data-skin="seasons"] .iconbtn, :root[data-skin="seasons"] .search input { border-radius: 999px; border-color: var(--line); background: color-mix(in srgb, var(--card) 85%, transparent); color: var(--text); }
:root[data-skin="seasons"] .search input:focus { border-color: var(--s1); box-shadow: 0 0 0 3px color-mix(in srgb, var(--s1) 30%, transparent); }
:root[data-skin="seasons"] .card .cover, :root[data-skin="seasons"] .sheet .cover { border-radius: 10px; border: 0; box-shadow: var(--cover-shadow), 0 0 0 1px color-mix(in srgb, var(--s1) 35%, transparent); }
:root[data-skin="seasons"][data-covers="book"] .card.album .cover, :root[data-skin="seasons"][data-covers="book"] .card.folder .cover { border-radius: 3px 10px 10px 3px; box-shadow: 3px 0 0 -1px color-mix(in srgb, var(--s1) 50%, #fff), 5px 0 0 -2px var(--s1), 7px 0 0 -3px var(--card-2), var(--cover-shadow); }
@media (hover: hover) { :root[data-skin="seasons"] .card:hover .cover { box-shadow: var(--cover-shadow), 0 0 0 2px var(--s1), 0 0 24px -4px var(--s1); } }
:root[data-skin="seasons"] .card .title { font-family: var(--round); font-weight: 700; }
:root[data-skin="seasons"] .card .fav { background: linear-gradient(135deg, color-mix(in srgb, var(--s1) 60%, #fff), var(--s1)); }
:root[data-skin="seasons"] .badge { border-radius: 999px; background: color-mix(in srgb, var(--bg) 88%, transparent); color: var(--text); border: 1px solid color-mix(in srgb, var(--s1) 55%, transparent); }
:root[data-skin="seasons"] .badge.ok { background: var(--ok); color: #0b2414; border-color: transparent; }
:root[data-skin="seasons"] .bar i, :root[data-skin="seasons"] .pbar i, :root[data-skin="seasons"] .bars .bar i { background: linear-gradient(90deg, var(--s2), var(--s1)); }
:root[data-skin="seasons"] .bdt-panel, :root[data-skin="seasons"] .settings section, :root[data-skin="seasons"] .stabs, :root[data-skin="seasons"] .sheet, :root[data-skin="seasons"] .listcard, :root[data-skin="seasons"] .letters.rail, :root[data-skin="seasons"] .coltable, :root[data-skin="seasons"] .adult-gate, :root[data-skin="seasons"] .stile { border: 1px solid var(--line); border-radius: 18px; background-color: color-mix(in srgb, var(--card) 88%, transparent); box-shadow: var(--shadow); }
:root[data-skin="seasons"] .stile b { color: var(--s1); }
:root[data-skin="seasons"] .field select, :root[data-skin="seasons"] .field input[type=number], :root[data-skin="seasons"] .field input[type=text], :root[data-skin="seasons"] .sheet.pin input, :root[data-skin="seasons"] .pin-inline input { border-radius: 999px; border: 1px solid var(--line); }
:root[data-skin="seasons"] .switch input:checked + i { background: var(--s1); }
:root[data-skin="seasons"] .letters.rail button.on:hover, :root[data-skin="seasons"] .letters button.on:hover { background: var(--s1); color: var(--accent-ink); }
:root[data-skin="seasons"] .toast { border: 1px solid var(--s1); border-radius: 20px; font-family: var(--round); box-shadow: 0 0 0 4px color-mix(in srgb, var(--s1) 15%, transparent), var(--shadow); }
:root[data-skin="seasons"] .toast::before { content: var(--emblem); margin-right: 6px; }
:root[data-skin="seasons"] .pavatar { background: var(--s1); color: var(--accent-ink); border: 0; }
:root[data-skin="seasons"] .pow { clip-path: none; border-radius: 999px; padding: 14px 26px; font-family: var(--round); font-weight: 900; font-size: 22px; color: var(--accent-ink); background: radial-gradient(circle at 35% 30%, color-mix(in srgb, var(--s1) 50%, #fff), var(--s1)); text-shadow: none; -webkit-text-stroke: 0; filter: drop-shadow(0 8px 16px rgba(0, 0, 0, .3)); }
:root[data-skin="seasons"] .topbar .ver { border-radius: 999px; border-color: var(--s1); color: var(--s1); }
:root[data-skin="seasons"] .sidebar .grow .sc { border: 2px solid var(--s1); border-radius: 10px; }
:root[data-skin="seasons"] .qtag.hd { background: var(--s2); color: var(--bg); }
@media (prefers-reduced-motion: reduce) { :root[data-skin="seasons"] h2::before, :root[data-skin="seasons"] .sidebar .ono { animation: none !important; } }
:root[data-skin="seasons"] .sheet, :root[data-skin="seasons"] .sumpop { background-color: var(--bg-2); }
/* bouton de saison (habillage Quatre saisons) : il montre la saison affichée, un clic passe à la suivante */
#season-btn { display: none; font-size: 19px; line-height: 1; }
:root[data-skin="seasons"] #season-btn { display: inline-flex; }
#season-btn.turn { animation: season-turn .5s ease; }
@keyframes season-turn { 0% { transform: rotate(0) scale(1); } 50% { transform: rotate(180deg) scale(.6); } 100% { transform: rotate(360deg) scale(1); } }

/* ---- mode léger : bouton « planche de BD » à côté du champignon, et tout ce qu'il coupe */
.lite { width: 34px; height: 34px; border: 0; background: transparent; padding: 2px; opacity: .45; transition: opacity .2s, transform .2s; flex: none; margin-left: -6px; cursor: pointer; }
.lite svg { width: 100%; height: 100%; }
.lite svg .zz { display: none; }
.lite:hover, .lite:focus-visible { opacity: 1; transform: rotate(6deg) scale(1.12); }
.lite.on { opacity: 1; filter: grayscale(.85); }
.lite.on svg .zz { display: inline; }
:root[data-lite="on"] *, :root[data-lite="on"] *::before, :root[data-lite="on"] *::after { -webkit-backdrop-filter: none !important; backdrop-filter: none !important; }
:root[data-lite="on"] body, :root[data-lite="on"] body::before, :root[data-lite="on"] body::after,
:root[data-lite="on"] .sidebar .ono, :root[data-lite="on"] h2::before, :root[data-lite="on"] h1, :root[data-lite="on"] .card .cover { animation: none !important; }
:root[data-lite="on"][data-skin="stars"] body::after, :root[data-lite="on"][data-skin="ocean"] body::before { display: none; }
:root[data-lite="on"] .card .cover, :root[data-lite="on"] .card:hover .cover { transition: none; }

/* appli Android : lecture hors connexion */
.offline-slot { display: inline-flex; gap: 6px; align-items: center; flex-wrap: wrap; }
.offline-slot .btn.ok { background: rgba(79, 211, 140, .16); color: #4fd38c; border-color: rgba(79, 211, 140, .45); cursor: default; }

/* =====================================================================================================
   Présentation TÉLÉPHONE (écran de 700 px ou moins) : barre d'onglets en bas à portée du pouce, pochettes
   à trois par ligne, fiche d'album qui monte du bas, réglages en liste, décor animé coupé.
   Sur PC et tablette (plus de 700 px), rien de tout cela ne s'applique.
   ===================================================================================================== */
.tabbar, .more { display: none; }
:root[data-phone="on"] {
  --tabbar-h: 58px;
  --thumb: 100px;
}
:root[data-phone="on"] body { padding-bottom: calc(var(--tabbar-h) + env(safe-area-inset-bottom, 0px)); }
/* --- barre du haut : logo + recherche, rien d'autre (le reste est dans « Plus ») --- */
:root[data-phone="on"] .topbar { gap: 8px; padding-left: 10px; padding-right: 10px; }
:root[data-phone="on"] .topbar .ver, :root[data-phone="on"] .topbar .stats, :root[data-phone="on"] .topbar .shroom, :root[data-phone="on"] .topbar .lite,
:root[data-phone="on"] .topbar #season-btn, :root[data-phone="on"] .topbar #bubble-mute, :root[data-phone="on"] .topbar #scan-btn,
:root[data-phone="on"] .topbar a[href="#/settings"], :root[data-phone="on"] .topbar #profile-btn { display: none !important; }
:root[data-phone="on"] .search input { height: 38px; font-size: 16px; }   /* 16 px : pas de zoom automatique sur iPhone */
/* --- l'ancienne rangée d'onglets disparaît --- */
:root[data-phone="on"] .sidebar { display: none !important; }
:root[data-phone="on"] .layout { display: block; }
:root[data-phone="on"] main { padding: 6px 12px 24px; }
:root[data-phone="on"] .crumbs { padding: 10px 12px 0; font-size: 13.5px; }
:root[data-phone="on"] h1 { font-size: 20px; margin: 8px 0 10px; }
:root[data-phone="on"] h2 { margin: 18px 0 8px; font-size: 13.5px; }
:root[data-phone="on"] .h1tools { display: flex; flex-wrap: wrap; gap: 6px; margin: 8px 0 0; }
:root[data-phone="on"] .h1tools .btn { height: 30px; font-size: 12.5px; }
/* --- pochettes : trois par ligne, rangées qui défilent au doigt --- */
:root[data-phone="on"] .grid, :root[data-phone="on"][data-covers="book"] .grid { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px 8px; }
:root[data-phone="on"] .row { grid-auto-columns: calc((100vw - 24px - 16px) / 3); gap: 8px; padding: 4px 2px 10px; scroll-snap-type: x mandatory; }
:root[data-phone="on"] .card .title { font-size: 12px; margin-top: 6px; -webkit-line-clamp: 2; }
:root[data-phone="on"] .card .sub { font-size: 11px; }
:root[data-phone="on"] .card .info { opacity: 1; width: 24px; height: 24px; left: 6px; bottom: 8px; font-size: 13px; }
:root[data-phone="on"] .card .info.sum { left: 34px; font-size: 14px; }
:root[data-phone="on"] .card .fav { width: 36px; height: 36px; }
:root[data-phone="on"] .card .fav b { font-size: 13px; left: 4px; }
:root[data-phone="on"] .card .remove { opacity: 1; width: 24px; height: 24px; }
:root[data-phone="on"] .listgrid { grid-template-columns: 1fr; }
:root[data-phone="on"] .pager .pg { min-width: 38px; height: 38px; }
/* --- décor : rien ne bouge en arrière-plan --- */
:root[data-phone="on"] #mosaic, :root[data-phone="on"] #seasonfx, :root[data-phone="on"] #bubbles, :root[data-phone="on"] .sidebar .ono, :root[data-phone="on"] .stars-sky { display: none !important; }
:root[data-phone="on"] .topbar { backdrop-filter: none; -webkit-backdrop-filter: none; }
/* --- Bédéthèque : panneau compact --- */
:root[data-phone="on"] .bdt-panel { padding: 10px 12px; font-size: 13.5px; }
:root[data-phone="on"] .bdt-row { flex-wrap: wrap; }
:root[data-phone="on"] .bdt-actions { width: 100%; display: flex; flex-wrap: wrap; gap: 6px; }
:root[data-phone="on"] .bdt-actions .btn { height: 30px; font-size: 12.5px; padding: 0 10px; }
/* --- barre d'onglets du bas --- */
:root[data-phone="on"] .tabbar {
  display: flex; position: fixed; left: 0; right: 0; bottom: 0; z-index: 40;
  height: calc(var(--tabbar-h) + env(safe-area-inset-bottom, 0px)); padding: 0 4px env(safe-area-inset-bottom, 0px);
  background: var(--bg-2); border-top: 1px solid var(--line); box-shadow: 0 -6px 20px rgba(0, 0, 0, .25);
}
.tabbar a, .tabbar button { flex: 1; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 3px; min-width: 0; height: var(--tabbar-h); border: 0; background: none; color: var(--muted); font: inherit; font-size: 10.5px; font-weight: 600; letter-spacing: .01em; position: relative; -webkit-tap-highlight-color: transparent; }
.tabbar a[hidden] { display: none; }
.tabbar svg { width: 23px; height: 23px; }
.tabbar span { max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.tabbar .on { color: var(--accent); }
.tabbar .on::before { content: ""; position: absolute; top: 0; left: 50%; width: 28px; height: 3px; border-radius: 0 0 3px 3px; background: var(--accent); transform: translateX(-50%); }
.tabbar .cnt { position: absolute; top: 6px; left: calc(50% + 6px); min-width: 16px; height: 16px; padding: 0 4px; border-radius: 999px; background: var(--accent); color: var(--accent-ink); font-size: 10px; font-weight: 800; font-style: normal; line-height: 16px; text-align: center; }
.tabbar .cnt:empty { display: none; }
/* --- feuille « Plus » qui monte du bas --- */
:root[data-phone="on"] .more { display: block; position: fixed; inset: 0; z-index: 45; background: rgba(0, 0, 0, .55); animation: fade .15s; }
:root[data-phone="on"] .more[hidden] { display: none; }
.more .panel { position: absolute; left: 0; right: 0; bottom: 0; max-height: 82vh; overflow: auto; background: var(--bg-2); border-radius: 18px 18px 0 0; padding: 8px 12px calc(14px + env(safe-area-inset-bottom, 0px)); box-shadow: var(--shadow); animation: up .22s cubic-bezier(.2, .8, .3, 1); }
@keyframes up { from { transform: translateY(40px); opacity: .4; } }
.more .grip { width: 38px; height: 4px; border-radius: 2px; background: var(--line); margin: 2px auto 10px; }
.more .mhead { display: flex; align-items: center; gap: 10px; padding: 4px 4px 10px; }
.more .mhead .pavatar { width: 34px; height: 34px; font-size: 15px; }
.more .mhead b { font-size: 16px; }
.more .mhead small { display: block; color: var(--muted); font-size: 12.5px; }
.more .mhead .btn { margin-left: auto; height: 32px; font-size: 13px; }
.more .mgrid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 8px; margin-bottom: 8px; }
.more .mgrid a, .more .mgrid button { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 6px; padding: 12px 4px 10px; border-radius: 14px; background: var(--card); border: 1px solid var(--line); color: var(--text); font: inherit; font-size: 12px; font-weight: 600; text-align: center; min-height: 72px; }
.more .mgrid svg { width: 22px; height: 22px; color: var(--accent); }
.more .mgrid .on { border-color: var(--accent); box-shadow: inset 0 0 0 1px var(--accent); }
.more .mgrid .cnt { font-size: 11px; color: var(--muted); font-weight: 500; }
.more .mrow { display: flex; align-items: center; gap: 10px; padding: 11px 6px; border-top: 1px solid var(--line); font-size: 14.5px; font-weight: 600; color: var(--text); width: 100%; background: none; border-left: 0; border-right: 0; border-bottom: 0; font-family: inherit; text-align: left; }
.more .mrow svg { width: 20px; height: 20px; color: var(--muted); flex: none; }
.more .mrow .right { margin-left: auto; color: var(--muted); font-weight: 500; font-size: 13px; display: inline-flex; gap: 4px; }
.more .mrow .right button { height: 26px; padding: 0 9px; border-radius: 999px; border: 1px solid var(--line); background: var(--card); color: var(--muted); font: inherit; font-size: 12px; font-weight: 700; }
.more .mrow .right button.on { background: var(--accent); color: var(--accent-ink); border-color: transparent; }
.more .mrow .switch { margin-left: auto; }
/* --- fiche d'album : feuille qui monte du bas, gros boutons --- */
:root[data-phone="on"] .backdrop { align-items: flex-end; padding: 0; }
:root[data-phone="on"] .sheet { width: 100%; max-height: 92vh; border-radius: 18px 18px 0 0; border-bottom: 0; grid-template-columns: 96px 1fr; gap: 12px; padding: 16px 14px calc(16px + var(--tabbar-h) + env(safe-area-inset-bottom, 0px)); animation: up .22s cubic-bezier(.2, .8, .3, 1); }
/* pochette et titre côte à côte en haut, puis chaque bloc en pleine largeur */
:root[data-phone="on"] .sheet { grid-template-rows: auto auto auto 1fr; grid-template-areas: "cover head" "cover path" "cover err" "cover gap" "dl dl" "listsel listsel" "sum sum" "act act"; align-items: start; row-gap: 4px; }
:root[data-phone="on"] .sheet .sheet-left, :root[data-phone="on"] .sheet > div:not(.sheet-left) { display: contents; }
:root[data-phone="on"] .sheet .sheet-left .cover { grid-area: cover; width: 96px; margin: 0; }
:root[data-phone="on"] .sheet h3 { grid-area: head; margin: 0; }
:root[data-phone="on"] .sheet > div > .path { grid-area: path; }   /* le sous-titre seulement, pas la ligne « Fichier » du tableau */
:root[data-phone="on"] .sheet p.error { grid-area: err; margin: 0; }
:root[data-phone="on"] .sheet .sheet-listsel { grid-area: listsel; }
:root[data-phone="on"] .sheet .sheet-listsel select { height: 42px; font-size: 14.5px; }
:root[data-phone="on"] .sheet .summary-slot { grid-area: sum; }
:root[data-phone="on"] .sheet .sheet-actions { grid-area: act; margin-top: 4px; }
:root[data-phone="on"] .sheet h3 { font-size: 17px; }
:root[data-phone="on"] .sheet dl { grid-area: dl; grid-template-columns: max-content 1fr; font-size: 13.5px; gap: 4px 12px; margin: 8px 0 4px; }
:root[data-phone="on"] .sheet dd { margin: 0; min-width: 0; }
:root[data-phone="on"] .sheet .sa-main { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
:root[data-phone="on"] .sheet .sa-main .btn { width: 100%; height: 46px; font-size: 15px; justify-content: center; }
:root[data-phone="on"] .sheet .sa-main .btn.primary.big { grid-column: 1 / -1; height: 50px; font-size: 16px; }
:root[data-phone="on"] .sheet .offline-slot { grid-column: 1 / -1; display: grid; grid-template-columns: 1fr auto; }
:root[data-phone="on"] .sheet .sa-row { display: flex; flex-wrap: wrap; gap: 6px; }
:root[data-phone="on"] .sheet .sa-row .btn { flex: 1 1 45%; height: 40px; justify-content: center; font-size: 13.5px; white-space: nowrap; }
:root[data-phone="on"] .sheet .sa-minor .btn { flex: 1 1 30%; height: 36px; font-size: 12.5px; }
:root[data-phone="on"] .sheet .close { top: 10px; right: 10px; }
:root[data-phone="on"] .sumpop { left: 12px !important; right: 12px !important; width: auto !important; }
/* --- réglages : une liste de rubriques, puis une rubrique plein écran ; chaque réglage sur deux lignes --- */
:root[data-phone="on"] .settings.tabbed { grid-template-columns: 1fr; gap: 0; }
:root[data-phone="on"] .stabs { display: none; }
:root[data-phone="on"] .settings section { padding: 4px 14px 10px; border-radius: 14px; }
:root[data-phone="on"] .settings h2 { margin: 10px 0 4px; }
:root[data-phone="on"] .field { flex-direction: column; align-items: stretch; gap: 8px; padding: 12px 0; }
:root[data-phone="on"] .field.inline { flex-direction: row; align-items: center; justify-content: space-between; }
:root[data-phone="on"] .field select, :root[data-phone="on"] .field input[type=number], :root[data-phone="on"] .field input[type=text] { max-width: none; width: 100%; height: 42px; font-size: 15px; }
:root[data-phone="on"] .field .actions { justify-content: flex-start; }
:root[data-phone="on"] .field .actions .btn { height: 38px; }
.smenu { display: flex; flex-direction: column; gap: 0; background: var(--bg-2); border: 1px solid var(--line); border-radius: 14px; overflow: hidden; margin-top: 6px; }
.smenu a { display: flex; align-items: center; gap: 12px; padding: 14px 14px; border-top: 1px solid var(--line); color: var(--text); font-weight: 600; font-size: 15px; }
.smenu a:first-child { border-top: 0; }
.smenu a small { display: block; font-weight: 400; color: var(--muted); font-size: 12.5px; margin-top: 1px; }
.smenu a::after { content: "›"; margin-left: auto; color: var(--muted); font-size: 20px; line-height: 1; }
.smenu .ico { width: 34px; height: 34px; border-radius: 10px; display: inline-flex; align-items: center; justify-content: center; background: var(--card); color: var(--accent); font-size: 17px; flex: none; }
/* --- divers --- */
:root[data-phone="on"] .toast { top: auto; bottom: calc(var(--tabbar-h) + env(safe-area-inset-bottom, 0px) + 12px); }
/* lettres : une rangée discrète sous la barre du haut, qu'on fait défiler du doigt (jamais la barre latérale) */
:root[data-phone="on"] .letters, :root[data-phone="on"] .letters.rail { position: sticky; top: calc(var(--bar-h) + env(safe-area-inset-top, 0px)); left: auto; right: auto; transform: none; flex-direction: row; flex-wrap: nowrap; overflow-x: auto; gap: 2px; padding: 6px 0; margin: 0 -12px; padding-left: 12px; padding-right: 12px; border: 0; border-radius: 0; box-shadow: none; background: var(--bg); scrollbar-width: none; max-height: none; width: auto; }
:root[data-phone="on"] .letters::-webkit-scrollbar { display: none; }
:root[data-phone="on"] .letters button, :root[data-phone="on"] .letters.rail button { flex: none; min-width: 30px; width: 30px; height: 30px; font-size: 13px; font-weight: 700; border-radius: 8px; }
:root[data-phone="on"] .letters button:disabled { opacity: .3; }
:root[data-phone="on"] body:has(.letters.rail.right) main, :root[data-phone="on"] body:has(.letters.rail.left) main { padding-left: 12px; padding-right: 12px; }
:root[data-phone="on"] .listhead .btn[data-action="back"] { display: none; }
:root[data-phone="on"] .crumbs:not(:has(.sep)):not(:has(.cur)) { display: none; }   /* « Accueil » seul : inutile sur téléphone */