/* ===========================================================
   Ma Bibliothèque — feuille de style unique (sommaire, version 3.7)

   1. Thèmes : dix palettes, chacune claire et sombre (variables --bg, --ink, --accent…)
   2. Composants : bandeau, pastilles, jaquettes, index A–Z, grilles, page auteur,
      anomalies, aide, fiche livre, Mon avis, sagas, réglages, visionneuse, carnet
   3. Style paramétrable (Réglages → Style) : titres, bandeau, cartes, pastilles,
      boutons et champs, panneaux — chaque choix est un attribut data-… sur <html>
   4. Recherche et accueil (versions 2.0 et 3.1)
   5. Présentations de l'accueil : Éventail, Étagère, Mur (version 3.3)
   6. Page des sagas, graphiques du carnet, ordre des auteurs (version 3.6)

   Règle d'or : un ajout va dans la section de son composant, et une couleur passe
   toujours par une variable du thème.
   =========================================================== */

/* ===========================================================
   Ma Bibliothèque — thèmes
   10 thèmes, chacun en variante claire et sombre.
   data-theme = le thème choisi ; data-mode = auto | light | dark
   =========================================================== */

/* --- Nordique --- */
:root[data-theme="nordique"]{
  --bg:#f4f1ec;
  --ink:#2e2b28;
  --sub:#8b8479;
  --line:#e2dcd0;
  --chip:#e8e2d6;
  --card:#ffffff;
  --accent:#7f9c8f;
  --accent-ink:#f4f1ec;
  --radius:14px;
  --radius-lg:20px;
  --font-display:'Libre Franklin', system-ui, sans-serif;
  --font-body:'Libre Franklin', system-ui, sans-serif;
  --font-mono:'IBM Plex Mono', ui-monospace, monospace;
  --shadow:0 2px 10px rgba(40,35,30,0.07);
  --shadow-hi:0 10px 26px rgba(40,35,30,0.13);
  --scrim:rgba(255,255,255,0.78);
  --jacket-l1:62%;
  --jacket-l2:46%;
  --jacket-ink:99%;
}
:root[data-theme="nordique"][data-mode="dark"]{
  --bg:#1c1a15;
  --ink:#f1ede4;
  --sub:#a89f8f;
  --line:#3a352b;
  --chip:#2d2921;
  --card:#252119;
  --accent:#93b3a6;
  --accent-ink:#1c1a15;
  --radius:14px;
  --radius-lg:20px;
  --font-display:'Libre Franklin', system-ui, sans-serif;
  --font-body:'Libre Franklin', system-ui, sans-serif;
  --font-mono:'IBM Plex Mono', ui-monospace, monospace;
  --shadow:0 2px 10px rgba(0,0,0,0.38);
  --shadow-hi:0 10px 28px rgba(0,0,0,0.5);
  --scrim:rgba(0,0,0,0.72);
  --jacket-l1:26%;
  --jacket-l2:14%;
  --jacket-ink:92%;
}
@media (prefers-color-scheme: dark){
  :root[data-theme="nordique"][data-mode="auto"]{
  --bg:#1c1a15;
  --ink:#f1ede4;
  --sub:#a89f8f;
  --line:#3a352b;
  --chip:#2d2921;
  --card:#252119;
  --accent:#93b3a6;
  --accent-ink:#1c1a15;
  --radius:14px;
  --radius-lg:20px;
  --font-display:'Libre Franklin', system-ui, sans-serif;
  --font-body:'Libre Franklin', system-ui, sans-serif;
  --font-mono:'IBM Plex Mono', ui-monospace, monospace;
  --shadow:0 2px 10px rgba(0,0,0,0.38);
  --shadow-hi:0 10px 28px rgba(0,0,0,0.5);
  --scrim:rgba(0,0,0,0.72);
  --jacket-l1:26%;
  --jacket-l2:14%;
  --jacket-ink:92%;
  }
}

/* --- Papier & Grenat --- */
:root[data-theme="grenat"]{
  --bg:#faf7f2;
  --ink:#231f1d;
  --sub:#8a7f76;
  --line:#e6ded2;
  --chip:#f0e8dc;
  --card:#ffffff;
  --accent:#8c2f39;
  --accent-ink:#fdf8f3;
  --radius:6px;
  --radius-lg:10px;
  --font-display:'Fraunces', Georgia, serif;
  --font-body:'Spectral', Georgia, serif;
  --font-mono:'IBM Plex Mono', ui-monospace, monospace;
  --shadow:0 2px 10px rgba(40,35,30,0.07);
  --shadow-hi:0 10px 26px rgba(40,35,30,0.13);
  --scrim:rgba(255,255,255,0.78);
  --jacket-l1:62%;
  --jacket-l2:46%;
  --jacket-ink:99%;
}
:root[data-theme="grenat"][data-mode="dark"]{
  --bg:#1a1614;
  --ink:#f2ece4;
  --sub:#a4968a;
  --line:#332b26;
  --chip:#272019;
  --card:#221d1a;
  --accent:#c25d66;
  --accent-ink:#1a1614;
  --radius:6px;
  --radius-lg:10px;
  --font-display:'Fraunces', Georgia, serif;
  --font-body:'Spectral', Georgia, serif;
  --font-mono:'IBM Plex Mono', ui-monospace, monospace;
  --shadow:0 2px 10px rgba(0,0,0,0.38);
  --shadow-hi:0 10px 28px rgba(0,0,0,0.5);
  --scrim:rgba(0,0,0,0.72);
  --jacket-l1:26%;
  --jacket-l2:14%;
  --jacket-ink:92%;
}
@media (prefers-color-scheme: dark){
  :root[data-theme="grenat"][data-mode="auto"]{
  --bg:#1a1614;
  --ink:#f2ece4;
  --sub:#a4968a;
  --line:#332b26;
  --chip:#272019;
  --card:#221d1a;
  --accent:#c25d66;
  --accent-ink:#1a1614;
  --radius:6px;
  --radius-lg:10px;
  --font-display:'Fraunces', Georgia, serif;
  --font-body:'Spectral', Georgia, serif;
  --font-mono:'IBM Plex Mono', ui-monospace, monospace;
  --shadow:0 2px 10px rgba(0,0,0,0.38);
  --shadow-hi:0 10px 28px rgba(0,0,0,0.5);
  --scrim:rgba(0,0,0,0.72);
  --jacket-l1:26%;
  --jacket-l2:14%;
  --jacket-ink:92%;
  }
}

/* --- Encre & Or --- */
:root[data-theme="encre"]{
  --bg:#f4f6fb;
  --ink:#101729;
  --sub:#6b7694;
  --line:#dde2ee;
  --chip:#e8ecf5;
  --card:#ffffff;
  --accent:#9b7b33;
  --accent-ink:#ffffff;
  --radius:10px;
  --radius-lg:16px;
  --font-display:'Spectral', Georgia, serif;
  --font-body:'Spectral', Georgia, serif;
  --font-mono:'IBM Plex Mono', ui-monospace, monospace;
  --shadow:0 2px 10px rgba(40,35,30,0.07);
  --shadow-hi:0 10px 26px rgba(40,35,30,0.13);
  --scrim:rgba(255,255,255,0.78);
  --jacket-l1:62%;
  --jacket-l2:46%;
  --jacket-ink:99%;
}
:root[data-theme="encre"][data-mode="dark"]{
  --bg:#101729;
  --ink:#eef1f7;
  --sub:#8e9bb5;
  --line:#233049;
  --chip:#1b253c;
  --card:#182135;
  --accent:#c8a560;
  --accent-ink:#101729;
  --radius:10px;
  --radius-lg:16px;
  --font-display:'Spectral', Georgia, serif;
  --font-body:'Spectral', Georgia, serif;
  --font-mono:'IBM Plex Mono', ui-monospace, monospace;
  --shadow:0 2px 10px rgba(0,0,0,0.38);
  --shadow-hi:0 10px 28px rgba(0,0,0,0.5);
  --scrim:rgba(0,0,0,0.72);
  --jacket-l1:26%;
  --jacket-l2:14%;
  --jacket-ink:92%;
}
@media (prefers-color-scheme: dark){
  :root[data-theme="encre"][data-mode="auto"]{
  --bg:#101729;
  --ink:#eef1f7;
  --sub:#8e9bb5;
  --line:#233049;
  --chip:#1b253c;
  --card:#182135;
  --accent:#c8a560;
  --accent-ink:#101729;
  --radius:10px;
  --radius-lg:16px;
  --font-display:'Spectral', Georgia, serif;
  --font-body:'Spectral', Georgia, serif;
  --font-mono:'IBM Plex Mono', ui-monospace, monospace;
  --shadow:0 2px 10px rgba(0,0,0,0.38);
  --shadow-hi:0 10px 28px rgba(0,0,0,0.5);
  --scrim:rgba(0,0,0,0.72);
  --jacket-l1:26%;
  --jacket-l2:14%;
  --jacket-ink:92%;
  }
}

/* --- Terracotta --- */
:root[data-theme="terracotta"]{
  --bg:#f8f0e7;
  --ink:#3b2d26;
  --sub:#9a8375;
  --line:#e9dac9;
  --chip:#f0e2d2;
  --card:#fffaf4;
  --accent:#c2673f;
  --accent-ink:#fff7f0;
  --radius:16px;
  --radius-lg:24px;
  --font-display:'Fraunces', Georgia, serif;
  --font-body:'Libre Franklin', system-ui, sans-serif;
  --font-mono:'IBM Plex Mono', ui-monospace, monospace;
  --shadow:0 2px 10px rgba(40,35,30,0.07);
  --shadow-hi:0 10px 26px rgba(40,35,30,0.13);
  --scrim:rgba(255,255,255,0.78);
  --jacket-l1:62%;
  --jacket-l2:46%;
  --jacket-ink:99%;
}
:root[data-theme="terracotta"][data-mode="dark"]{
  --bg:#211813;
  --ink:#f5e9df;
  --sub:#b09685;
  --line:#3b2b22;
  --chip:#2d2019;
  --card:#281d16;
  --accent:#e08a5c;
  --accent-ink:#211813;
  --radius:16px;
  --radius-lg:24px;
  --font-display:'Fraunces', Georgia, serif;
  --font-body:'Libre Franklin', system-ui, sans-serif;
  --font-mono:'IBM Plex Mono', ui-monospace, monospace;
  --shadow:0 2px 10px rgba(0,0,0,0.38);
  --shadow-hi:0 10px 28px rgba(0,0,0,0.5);
  --scrim:rgba(0,0,0,0.72);
  --jacket-l1:26%;
  --jacket-l2:14%;
  --jacket-ink:92%;
}
@media (prefers-color-scheme: dark){
  :root[data-theme="terracotta"][data-mode="auto"]{
  --bg:#211813;
  --ink:#f5e9df;
  --sub:#b09685;
  --line:#3b2b22;
  --chip:#2d2019;
  --card:#281d16;
  --accent:#e08a5c;
  --accent-ink:#211813;
  --radius:16px;
  --radius-lg:24px;
  --font-display:'Fraunces', Georgia, serif;
  --font-body:'Libre Franklin', system-ui, sans-serif;
  --font-mono:'IBM Plex Mono', ui-monospace, monospace;
  --shadow:0 2px 10px rgba(0,0,0,0.38);
  --shadow-hi:0 10px 28px rgba(0,0,0,0.5);
  --scrim:rgba(0,0,0,0.72);
  --jacket-l1:26%;
  --jacket-l2:14%;
  --jacket-ink:92%;
  }
}

/* --- Cuir & Laiton --- */
:root[data-theme="bibliotheque"]{
  --bg:#f6f1e7;
  --ink:#2b2218;
  --sub:#8f8171;
  --line:#e3d8c6;
  --chip:#ece2d1;
  --card:#fffdf8;
  --accent:#9a6b1f;
  --accent-ink:#fffdf8;
  --radius:8px;
  --radius-lg:12px;
  --font-display:'Spectral', Georgia, serif;
  --font-body:'Spectral', Georgia, serif;
  --font-mono:'IBM Plex Mono', ui-monospace, monospace;
  --shadow:0 2px 10px rgba(40,35,30,0.07);
  --shadow-hi:0 10px 26px rgba(40,35,30,0.13);
  --scrim:rgba(255,255,255,0.78);
  --jacket-l1:62%;
  --jacket-l2:46%;
  --jacket-ink:99%;
}
:root[data-theme="bibliotheque"][data-mode="dark"]{
  --bg:#1e1813;
  --ink:#efe4d4;
  --sub:#a89681;
  --line:#362c22;
  --chip:#2a2219;
  --card:#251e17;
  --accent:#c9a227;
  --accent-ink:#1e1813;
  --radius:8px;
  --radius-lg:12px;
  --font-display:'Spectral', Georgia, serif;
  --font-body:'Spectral', Georgia, serif;
  --font-mono:'IBM Plex Mono', ui-monospace, monospace;
  --shadow:0 2px 10px rgba(0,0,0,0.38);
  --shadow-hi:0 10px 28px rgba(0,0,0,0.5);
  --scrim:rgba(0,0,0,0.72);
  --jacket-l1:26%;
  --jacket-l2:14%;
  --jacket-ink:92%;
}
@media (prefers-color-scheme: dark){
  :root[data-theme="bibliotheque"][data-mode="auto"]{
  --bg:#1e1813;
  --ink:#efe4d4;
  --sub:#a89681;
  --line:#362c22;
  --chip:#2a2219;
  --card:#251e17;
  --accent:#c9a227;
  --accent-ink:#1e1813;
  --radius:8px;
  --radius-lg:12px;
  --font-display:'Spectral', Georgia, serif;
  --font-body:'Spectral', Georgia, serif;
  --font-mono:'IBM Plex Mono', ui-monospace, monospace;
  --shadow:0 2px 10px rgba(0,0,0,0.38);
  --shadow-hi:0 10px 28px rgba(0,0,0,0.5);
  --scrim:rgba(0,0,0,0.72);
  --jacket-l1:26%;
  --jacket-l2:14%;
  --jacket-ink:92%;
  }
}

/* --- Brume --- */
:root[data-theme="brume"]{
  --bg:#f1f3f6;
  --ink:#1f2937;
  --sub:#8793a3;
  --line:#e0e5ec;
  --chip:#e7ecf2;
  --card:#ffffff;
  --accent:#5b7a99;
  --accent-ink:#ffffff;
  --radius:12px;
  --radius-lg:18px;
  --font-display:'Libre Franklin', system-ui, sans-serif;
  --font-body:'Libre Franklin', system-ui, sans-serif;
  --font-mono:'IBM Plex Mono', ui-monospace, monospace;
  --shadow:0 2px 10px rgba(40,35,30,0.07);
  --shadow-hi:0 10px 26px rgba(40,35,30,0.13);
  --scrim:rgba(255,255,255,0.78);
  --jacket-l1:62%;
  --jacket-l2:46%;
  --jacket-ink:99%;
}
:root[data-theme="brume"][data-mode="dark"]{
  --bg:#14181d;
  --ink:#e7ecf2;
  --sub:#8a94a3;
  --line:#262d36;
  --chip:#1d232a;
  --card:#1a2026;
  --accent:#8fb0cf;
  --accent-ink:#14181d;
  --radius:12px;
  --radius-lg:18px;
  --font-display:'Libre Franklin', system-ui, sans-serif;
  --font-body:'Libre Franklin', system-ui, sans-serif;
  --font-mono:'IBM Plex Mono', ui-monospace, monospace;
  --shadow:0 2px 10px rgba(0,0,0,0.38);
  --shadow-hi:0 10px 28px rgba(0,0,0,0.5);
  --scrim:rgba(0,0,0,0.72);
  --jacket-l1:26%;
  --jacket-l2:14%;
  --jacket-ink:92%;
}
@media (prefers-color-scheme: dark){
  :root[data-theme="brume"][data-mode="auto"]{
  --bg:#14181d;
  --ink:#e7ecf2;
  --sub:#8a94a3;
  --line:#262d36;
  --chip:#1d232a;
  --card:#1a2026;
  --accent:#8fb0cf;
  --accent-ink:#14181d;
  --radius:12px;
  --radius-lg:18px;
  --font-display:'Libre Franklin', system-ui, sans-serif;
  --font-body:'Libre Franklin', system-ui, sans-serif;
  --font-mono:'IBM Plex Mono', ui-monospace, monospace;
  --shadow:0 2px 10px rgba(0,0,0,0.38);
  --shadow-hi:0 10px 28px rgba(0,0,0,0.5);
  --scrim:rgba(0,0,0,0.72);
  --jacket-l1:26%;
  --jacket-l2:14%;
  --jacket-ink:92%;
  }
}

/* --- Agrume --- */
:root[data-theme="agrume"]{
  --bg:#fffdf7;
  --ink:#17140f;
  --sub:#8c8578;
  --line:#ece5d6;
  --chip:#fdf1dd;
  --card:#ffffff;
  --accent:#e8600d;
  --accent-ink:#fffdf7;
  --radius:10px;
  --radius-lg:16px;
  --font-display:'Space Grotesk', system-ui, sans-serif;
  --font-body:'Space Grotesk', system-ui, sans-serif;
  --font-mono:'IBM Plex Mono', ui-monospace, monospace;
  --shadow:0 2px 10px rgba(40,35,30,0.07);
  --shadow-hi:0 10px 26px rgba(40,35,30,0.13);
  --scrim:rgba(255,255,255,0.78);
  --jacket-l1:62%;
  --jacket-l2:46%;
  --jacket-ink:99%;
}
:root[data-theme="agrume"][data-mode="dark"]{
  --bg:#141210;
  --ink:#f7f3ea;
  --sub:#9b9386;
  --line:#2b2722;
  --chip:#241f19;
  --card:#1c1916;
  --accent:#ff8534;
  --accent-ink:#141210;
  --radius:10px;
  --radius-lg:16px;
  --font-display:'Space Grotesk', system-ui, sans-serif;
  --font-body:'Space Grotesk', system-ui, sans-serif;
  --font-mono:'IBM Plex Mono', ui-monospace, monospace;
  --shadow:0 2px 10px rgba(0,0,0,0.38);
  --shadow-hi:0 10px 28px rgba(0,0,0,0.5);
  --scrim:rgba(0,0,0,0.72);
  --jacket-l1:26%;
  --jacket-l2:14%;
  --jacket-ink:92%;
}
@media (prefers-color-scheme: dark){
  :root[data-theme="agrume"][data-mode="auto"]{
  --bg:#141210;
  --ink:#f7f3ea;
  --sub:#9b9386;
  --line:#2b2722;
  --chip:#241f19;
  --card:#1c1916;
  --accent:#ff8534;
  --accent-ink:#141210;
  --radius:10px;
  --radius-lg:16px;
  --font-display:'Space Grotesk', system-ui, sans-serif;
  --font-body:'Space Grotesk', system-ui, sans-serif;
  --font-mono:'IBM Plex Mono', ui-monospace, monospace;
  --shadow:0 2px 10px rgba(0,0,0,0.38);
  --shadow-hi:0 10px 28px rgba(0,0,0,0.5);
  --scrim:rgba(0,0,0,0.72);
  --jacket-l1:26%;
  --jacket-l2:14%;
  --jacket-ink:92%;
  }
}

/* --- Minuit --- */
:root[data-theme="minuit"]{
  --bg:#f6f6fb;
  --ink:#14162a;
  --sub:#7a7f9c;
  --line:#e2e3f0;
  --chip:#ebecf7;
  --card:#ffffff;
  --accent:#5b4bd6;
  --accent-ink:#ffffff;
  --radius:14px;
  --radius-lg:22px;
  --font-display:'Space Grotesk', system-ui, sans-serif;
  --font-body:'Space Grotesk', system-ui, sans-serif;
  --font-mono:'IBM Plex Mono', ui-monospace, monospace;
  --shadow:0 2px 10px rgba(40,35,30,0.07);
  --shadow-hi:0 10px 26px rgba(40,35,30,0.13);
  --scrim:rgba(255,255,255,0.78);
  --jacket-l1:62%;
  --jacket-l2:46%;
  --jacket-ink:99%;
}
:root[data-theme="minuit"][data-mode="dark"]{
  --bg:#0d0f1a;
  --ink:#e9eaf4;
  --sub:#868cab;
  --line:#222638;
  --chip:#181c2c;
  --card:#141827;
  --accent:#8f7dff;
  --accent-ink:#0d0f1a;
  --radius:14px;
  --radius-lg:22px;
  --font-display:'Space Grotesk', system-ui, sans-serif;
  --font-body:'Space Grotesk', system-ui, sans-serif;
  --font-mono:'IBM Plex Mono', ui-monospace, monospace;
  --shadow:0 2px 10px rgba(0,0,0,0.38);
  --shadow-hi:0 10px 28px rgba(0,0,0,0.5);
  --scrim:rgba(0,0,0,0.72);
  --jacket-l1:26%;
  --jacket-l2:14%;
  --jacket-ink:92%;
}
@media (prefers-color-scheme: dark){
  :root[data-theme="minuit"][data-mode="auto"]{
  --bg:#0d0f1a;
  --ink:#e9eaf4;
  --sub:#868cab;
  --line:#222638;
  --chip:#181c2c;
  --card:#141827;
  --accent:#8f7dff;
  --accent-ink:#0d0f1a;
  --radius:14px;
  --radius-lg:22px;
  --font-display:'Space Grotesk', system-ui, sans-serif;
  --font-body:'Space Grotesk', system-ui, sans-serif;
  --font-mono:'IBM Plex Mono', ui-monospace, monospace;
  --shadow:0 2px 10px rgba(0,0,0,0.38);
  --shadow-hi:0 10px 28px rgba(0,0,0,0.5);
  --scrim:rgba(0,0,0,0.72);
  --jacket-l1:26%;
  --jacket-l2:14%;
  --jacket-ink:92%;
  }
}

/* --- Botanique --- */
:root[data-theme="botanique"]{
  --bg:#f3f5ee;
  --ink:#1f2a1f;
  --sub:#7d8a79;
  --line:#e0e6d8;
  --chip:#e9eee0;
  --card:#ffffff;
  --accent:#2f6b4f;
  --accent-ink:#f3f5ee;
  --radius:16px;
  --radius-lg:24px;
  --font-display:'Fraunces', Georgia, serif;
  --font-body:'Libre Franklin', system-ui, sans-serif;
  --font-mono:'IBM Plex Mono', ui-monospace, monospace;
  --shadow:0 2px 10px rgba(40,35,30,0.07);
  --shadow-hi:0 10px 26px rgba(40,35,30,0.13);
  --scrim:rgba(255,255,255,0.78);
  --jacket-l1:62%;
  --jacket-l2:46%;
  --jacket-ink:99%;
}
:root[data-theme="botanique"][data-mode="dark"]{
  --bg:#141a15;
  --ink:#e8efe3;
  --sub:#8fa08b;
  --line:#28322a;
  --chip:#1d251e;
  --card:#1a211b;
  --accent:#6fb08a;
  --accent-ink:#141a15;
  --radius:16px;
  --radius-lg:24px;
  --font-display:'Fraunces', Georgia, serif;
  --font-body:'Libre Franklin', system-ui, sans-serif;
  --font-mono:'IBM Plex Mono', ui-monospace, monospace;
  --shadow:0 2px 10px rgba(0,0,0,0.38);
  --shadow-hi:0 10px 28px rgba(0,0,0,0.5);
  --scrim:rgba(0,0,0,0.72);
  --jacket-l1:26%;
  --jacket-l2:14%;
  --jacket-ink:92%;
}
@media (prefers-color-scheme: dark){
  :root[data-theme="botanique"][data-mode="auto"]{
  --bg:#141a15;
  --ink:#e8efe3;
  --sub:#8fa08b;
  --line:#28322a;
  --chip:#1d251e;
  --card:#1a211b;
  --accent:#6fb08a;
  --accent-ink:#141a15;
  --radius:16px;
  --radius-lg:24px;
  --font-display:'Fraunces', Georgia, serif;
  --font-body:'Libre Franklin', system-ui, sans-serif;
  --font-mono:'IBM Plex Mono', ui-monospace, monospace;
  --shadow:0 2px 10px rgba(0,0,0,0.38);
  --shadow-hi:0 10px 28px rgba(0,0,0,0.5);
  --scrim:rgba(0,0,0,0.72);
  --jacket-l1:26%;
  --jacket-l2:14%;
  --jacket-ink:92%;
  }
}

/* --- Rétro Pulp --- */
:root[data-theme="pulp"]{
  --bg:#f1e3c6;
  --ink:#1a1512;
  --sub:#857255;
  --line:#ddc99f;
  --chip:#e7d5ae;
  --card:#fbf3e0;
  --accent:#c2341d;
  --accent-ink:#fbf3e0;
  --radius:3px;
  --radius-lg:5px;
  --font-display:'Archivo', system-ui, sans-serif;
  --font-body:'Archivo', system-ui, sans-serif;
  --font-mono:'IBM Plex Mono', ui-monospace, monospace;
  --shadow:0 2px 10px rgba(40,35,30,0.07);
  --shadow-hi:0 10px 26px rgba(40,35,30,0.13);
  --scrim:rgba(255,255,255,0.78);
  --jacket-l1:62%;
  --jacket-l2:46%;
  --jacket-ink:99%;
}
:root[data-theme="pulp"][data-mode="dark"]{
  --bg:#17120e;
  --ink:#f1e3c6;
  --sub:#a08d6b;
  --line:#2e2518;
  --chip:#241d14;
  --card:#1e1810;
  --accent:#e0543a;
  --accent-ink:#17120e;
  --radius:3px;
  --radius-lg:5px;
  --font-display:'Archivo', system-ui, sans-serif;
  --font-body:'Archivo', system-ui, sans-serif;
  --font-mono:'IBM Plex Mono', ui-monospace, monospace;
  --shadow:0 2px 10px rgba(0,0,0,0.38);
  --shadow-hi:0 10px 28px rgba(0,0,0,0.5);
  --scrim:rgba(0,0,0,0.72);
  --jacket-l1:26%;
  --jacket-l2:14%;
  --jacket-ink:92%;
}
@media (prefers-color-scheme: dark){
  :root[data-theme="pulp"][data-mode="auto"]{
  --bg:#17120e;
  --ink:#f1e3c6;
  --sub:#a08d6b;
  --line:#2e2518;
  --chip:#241d14;
  --card:#1e1810;
  --accent:#e0543a;
  --accent-ink:#17120e;
  --radius:3px;
  --radius-lg:5px;
  --font-display:'Archivo', system-ui, sans-serif;
  --font-body:'Archivo', system-ui, sans-serif;
  --font-mono:'IBM Plex Mono', ui-monospace, monospace;
  --shadow:0 2px 10px rgba(0,0,0,0.38);
  --shadow-hi:0 10px 28px rgba(0,0,0,0.5);
  --scrim:rgba(0,0,0,0.72);
  --jacket-l1:26%;
  --jacket-l2:14%;
  --jacket-ink:92%;
  }
}
/* ===========================================================
   Ma Bibliothèque — composants
   Tous les thèmes partagent cette feuille ; seules les
   variables définies plus haut changent d'un thème à l'autre.
   =========================================================== */

*{box-sizing:border-box;}
html,body{margin:0; padding:0;}
html{scroll-behavior:smooth;}
body{
  background:var(--bg);
  color:var(--ink);
  font-family:var(--font-body);
  min-height:100vh;
  padding-bottom:3rem;
  -webkit-text-size-adjust:100%;
}
a{color:inherit; text-decoration:none;}
button{font-family:inherit; cursor:pointer;}
img{max-width:100%;}

a:focus-visible, button:focus-visible, .toggle:focus-within, input:focus-visible, select:focus-visible{
  outline:2px solid var(--accent); outline-offset:2px;
}

/* ---------- barre du haut ----------
   Reprise fidèle de l'en-tête de « Ma Bibliothèque BD » : bandeau plein dans la couleur
   d'accent avec une trame de points, gros titre façon BD avec ombre portée, épais filet
   en bas, champs blancs à bordure épaisse et ombre décalée, icône dans chaque champ,
   pastilles à bordure. Les couleurs viennent du thème actif (--accent, --ink, --card,
   --chip…) : avec « Rétro Pulp » on retrouve exactement le rendu de l'appli BD. */
:root{
  --hdr-line:var(--ink);          /* traits épais */
  --hdr-shadow:var(--ink);        /* ombres décalées */
  --hdr-bw:3px;                   /* épaisseur des traits */
  --hdr-sub:var(--chip);          /* compteurs à côté du titre */
}
:root[data-mode="dark"]{ --hdr-shadow:#000; --hdr-sub:var(--accent-ink); }
@media (prefers-color-scheme: dark){
  :root[data-mode="auto"]{ --hdr-shadow:#000; --hdr-sub:var(--accent-ink); }
}

.topbar{
  position:relative; z-index:30;
  background-color:var(--accent);
  background-image:radial-gradient(rgba(0,0,0,0.16) 1.6px, transparent 1.6px);
  background-size:11px 11px;
  border-bottom:6px solid var(--hdr-line);
  padding:20px 20px 22px;
  padding-top:max(20px, env(safe-area-inset-top));
  color:var(--accent-ink);
}
.topbar-inner{max-width:1240px; margin:0 auto;}

.brand-row{
  display:flex; align-items:baseline; gap:16px; flex-wrap:wrap;
}
.brand{
  font-family:'Bangers', 'Impact', var(--font-display);
  font-weight:400; letter-spacing:1px;
  font-size:calc(var(--brand-k, 1) * clamp(28px, 6vw, 48px)); line-height:1;   /* --brand-k : voir « STYLE PARAMÉTRABLE » */
  color:var(--accent-ink);
  /* --ink contraste toujours avec --accent-ink (sombre en clair, clair en sombre, dans les
     dix thèmes) : l'ombre reste lisible même quand le titre est foncé en mode sombre */
  text-shadow:3px 3px 0 var(--ink);
  text-transform:uppercase;
  white-space:nowrap;
}
.brand-stats{
  font-family:var(--font-body);
  font-size:13px; font-weight:700;
  color:var(--hdr-sub);           /* teinte « papier » comme les compteurs de l'appli BD */
}
.hdr-btns{margin-left:auto; align-self:center; display:flex; gap:10px;}
.icon-btn[hidden]{display:none;}
.icon-btn{
  align-self:center;
  width:42px; height:42px; flex:none; padding:0;
  border-radius:50%;
  border:var(--hdr-bw) solid var(--hdr-line);
  background:var(--card); color:var(--ink);
  display:flex; align-items:center; justify-content:center;
  box-shadow:3px 3px 0 var(--hdr-shadow);
  cursor:pointer;
  transition:transform .12s ease;
}
.icon-btn svg{width:22px; height:22px; display:block; transition:transform .4s ease;}
.icon-btn:active{transform:scale(.94);}
/* :hover n'est jamais relâché par un tap sur écran tactile : effet réservé à la souris */
@media (hover:hover) and (pointer:fine){
  .icon-btn.gear:hover svg{transform:rotate(60deg);}
}

.controls{
  display:flex; gap:12px; margin-top:18px;
  flex-wrap:wrap; align-items:center;
}
.field{
  display:flex; align-items:center; gap:10px;
  background:var(--card);
  border:var(--hdr-bw) solid var(--hdr-line);
  border-radius:8px;
  padding:10px 14px;
  flex:1 1 220px; min-width:0;
  box-shadow:4px 4px 0 var(--hdr-shadow);
  color:var(--ink);
}
.field .icon{width:17px; height:17px; color:var(--sub); flex-shrink:0;}
.field input, .field select{
  border:none; outline:none; background:transparent;
  font-family:var(--font-body); font-weight:600;
  color:var(--ink);
  width:100%; min-width:0; padding:0; margin:0;
  -webkit-appearance:none; appearance:none;
  border-radius:0; line-height:1.3;
}
.field input{font-size:15px;}
.field input::placeholder{color:var(--sub); opacity:1;}
.field select{font-size:14px; cursor:pointer;}
.field select option{background:var(--card); color:var(--ink);}
.field-select{flex:0 1 190px;}
.field:focus-within{outline:2px solid var(--accent-ink); outline-offset:2px;}

.search-clear{
  flex-shrink:0;
  width:28px; height:28px; padding:0;
  margin:-4px -4px -4px 0;            /* cible tactile confortable sans gonfler le champ */
  border:none; border-radius:50%;
  background:var(--sub); color:var(--card);
  display:flex; align-items:center; justify-content:center;
  cursor:pointer;
  -webkit-tap-highlight-color:transparent; touch-action:manipulation;
}
.search-clear[hidden]{display:none;}
.search-clear svg{width:12px; height:12px;}
@media (hover:hover) and (pointer:fine){
  .search-clear:hover{background:var(--ink);}
}

/* ---------- pastilles de statut (Favoris / Lus / Écoutés / Non lus) ---------- */
.status-pills{display:flex; gap:8px; flex-wrap:wrap; align-items:center;}
.status-pills[hidden]{display:none;}
.pill[hidden]{display:none;}
.pill{
  border:2px solid var(--hdr-line);
  background:var(--chip); color:var(--ink);
  font-family:var(--font-body); font-size:12.5px; font-weight:800;
  padding:9px 14px; border-radius:999px;
  cursor:pointer; white-space:nowrap; line-height:1.2;
  transition:transform .08s ease;
}
.pill:active{transform:scale(0.95);}
.pill.on{background:var(--ink); color:var(--card); border-color:var(--ink);}

@media (max-width:760px){
  .topbar{padding:16px 16px 18px; padding-top:max(16px, env(safe-area-inset-top));}
  /* titre, compteurs dessous, réglages à droite : tout tient sur la hauteur du bouton */
  .brand-row{
    display:grid; grid-template-columns:minmax(0, 1fr) auto;
    column-gap:12px; row-gap:6px; align-items:center;
  }
  .brand{grid-column:1; grid-row:1;}
  .brand-stats{grid-column:1; grid-row:2;}
  .hdr-btns{grid-column:2; grid-row:1 / span 2; margin-left:0; gap:8px;}
  /* iPhone : recherche sur toute la largeur, puis Format + Genre côte à côte (grille, et non
     flex : Safari iOS refuse parfois de rétrécir un <select> en flex), puis les pastilles. */
  .controls{
    display:grid; grid-template-columns:repeat(2, minmax(0, 1fr));
    gap:12px; margin-top:14px;
  }
  .field{min-width:0; padding:9px 12px;}
  .search-wrap{grid-column:1 / -1;}
  .status-pills{grid-column:1 / -1;}
}

/* ---------- mise en page ---------- */
#app{max-width:1240px; margin:0 auto; padding:1.5rem 1.3rem 4rem;}
.loading, .empty{color:var(--sub); padding:3.5rem 0; text-align:center; font-size:0.95rem;}

.section-title{
  font-size:0.7rem; letter-spacing:0.12em; text-transform:uppercase;
  color:var(--sub); font-family:var(--font-mono);
  margin:0 0 0.9rem;
  display:flex; align-items:center; gap:0.7rem;
}
.section-title .rule{flex:1; height:1px; background:var(--line);}

/* ---------- jaquette générée (livres sans couverture) ---------- */
.cover{
  position:relative; overflow:hidden; flex:none;
  border-radius:calc(var(--radius) - 4px);
  background:var(--chip);
  display:flex; align-items:center; justify-content:center;
  container-type:inline-size;     /* le texte de la jaquette suit la largeur de la couverture */
}
.cover img{width:100%; height:100%; object-fit:cover; display:block;}
.jacket{
  width:100%; height:100%;
  background:
    linear-gradient(150deg,
      hsl(var(--h) 34% var(--jacket-l1)) 0%,
      hsl(calc(var(--h) + 38) 40% var(--jacket-l2)) 100%);
  display:flex; flex-direction:column; justify-content:flex-end;
  padding:10% 9%;
  color:hsl(var(--h) 30% var(--jacket-ink));
  text-align:left;
}
.jacket::before{
  content:""; position:absolute; left:0; right:0; top:14%;
  border-top:1px solid currentColor; opacity:0.3;
}
.jacket .j-title{
  font-family:var(--font-display); font-weight:700;
  font-size:clamp(0.52rem, 13cqw, 1.5rem);
  line-height:1.15; letter-spacing:-0.01em;
  display:-webkit-box; -webkit-line-clamp:4; -webkit-box-orient:vertical;
  overflow:hidden;
}
.jacket .j-author{
  font-family:var(--font-mono);
  font-size:clamp(0.4rem, 8cqw, 0.72rem);
  opacity:0.82; margin-top:0.4em;
  display:-webkit-box; -webkit-line-clamp:1; -webkit-box-orient:vertical; overflow:hidden;
}

/* ---------- index A–Z ---------- */
.az{
  position:sticky; top:0; z-index:15;
  display:flex; flex-wrap:wrap; gap:0.2rem;
  padding:0.55rem 0.1rem; margin-bottom:1.4rem;
  background:var(--bg);
  border-bottom:1px solid var(--line);
}
.az a{
  font-family:var(--font-mono); font-size:0.7rem;
  min-width:1.55em; height:1.75em; padding:0 0.25em;
  display:inline-flex; align-items:center; justify-content:center;
  border-radius:6px; color:var(--sub);
}
.az a:hover{background:var(--accent); color:var(--accent-ink);}
.az a.off{opacity:0.28; pointer-events:none;}

.letter-head{
  font-family:var(--font-display); font-weight:700;
  font-size:1.5rem; color:var(--accent);
  margin:2.2rem 0 0.9rem; scroll-margin-top:64px;
  display:flex; align-items:center; gap:0.8rem;
}
.letter-head::after{content:""; flex:1; height:1px; background:var(--line);}
.letter-head:first-of-type{margin-top:0.4rem;}

/* ---------- grille d'auteurs ---------- */
.author-grid{
  display:grid;
  grid-template-columns:repeat(auto-fill, minmax(230px, 1fr));
  gap:0.9rem;
}
.author-card{
  background:var(--card);
  border:1px solid var(--line);
  border-radius:var(--radius-lg);
  padding:0.75rem 0.85rem 0.9rem;
  display:flex; flex-direction:column; gap:0.7rem;
  box-shadow:var(--shadow);
  transition:transform .15s ease, box-shadow .15s ease, border-color .15s ease;
}
.author-card:hover{transform:translateY(-3px); box-shadow:var(--shadow-hi); border-color:var(--accent);}
/* Quatre emplacements de largeur égale, quel que soit le nombre de livres :
   une vignette garde donc toujours la même taille et les mêmes proportions.
   Chez un auteur qui n'a qu'un livre, les trois emplacements restants
   restent vides — sans cela la vignette s'étirait sur toute la carte et
   l'image se retrouvait rognée à l'horizontale. */
.mosaic{display:grid; grid-template-columns:repeat(4, 1fr); gap:4px;}
.mosaic .cover{
  width:100%; min-width:0;
  aspect-ratio:2 / 3;          /* proportion d'une couverture de livre */
  border-radius:calc(var(--radius) - 6px);
}
/* dans la mosaïque, une tuile peut être large (auteur à un seul livre) :
   on plafonne le texte de la jaquette pour qu'il reste à l'échelle de la vignette */
.mosaic .jacket{padding:8% 8%;}
.mosaic .jacket .j-title{font-size:clamp(0.46rem, 5.5cqw, 0.74rem); -webkit-line-clamp:3;}
.mosaic .jacket .j-author{font-size:clamp(0.36rem, 3.6cqw, 0.56rem); margin-top:0.25em;}
.mosaic .jacket::before{top:18%;}

.author-card .meta{display:flex; align-items:baseline; justify-content:space-between; gap:0.5rem;}
.author-card .name{font-weight:600; font-size:0.95rem; line-height:1.25;}
.author-card .count{font-family:var(--font-mono); font-size:0.68rem; color:var(--sub); white-space:nowrap;}

/* ---------- grille de livres ---------- */
.book-grid{
  display:grid;
  grid-template-columns:repeat(auto-fill, minmax(250px, 1fr));
  gap:0.9rem;
}
.book-card{
  background:var(--card);
  border:1px solid var(--line);
  border-radius:var(--radius-lg);
  padding:0.85rem;
  display:flex; gap:0.9rem; align-items:flex-start;
  box-shadow:var(--shadow);
  transition:transform .15s ease, box-shadow .15s ease, border-color .15s ease;
}
.book-card:hover{transform:translateY(-3px); box-shadow:var(--shadow-hi); border-color:var(--accent);}
.book-card .cover{width:58px; height:86px;}
.book-card .info{min-width:0; flex:1;}
.book-card h3{
  font-family:var(--font-display);
  font-size:0.93rem; margin:0 0 0.2rem; font-weight:600; line-height:1.3;
}
.book-card .by{font-size:0.76rem; color:var(--sub); margin:0 0 0.5rem;}
.book-card .badges{display:flex; flex-wrap:wrap; gap:0.3rem;}

.badge{
  display:inline-flex; align-items:center; gap:0.25em;
  font-size:0.6rem; letter-spacing:0.05em; text-transform:uppercase;
  padding:0.28em 0.65em; border-radius:999px;
  border:1px solid var(--accent); color:var(--accent);
  font-family:var(--font-mono); white-space:nowrap;
}
.badge.fav{background:var(--accent); color:var(--accent-ink);}
.badge.status{border-color:var(--sub); color:var(--sub);}
.badge.inprogress{border-color:var(--accent); color:var(--accent); font-weight:600;}
.badge.rating{background:var(--ink); border-color:var(--ink); color:var(--card); font-weight:700;}
.badge.genre{border-color:var(--line); color:var(--sub); background:var(--chip);}

/* ---------- retour / en-tête auteur ---------- */
.back-link{
  display:inline-flex; align-items:center; gap:0.4em;
  font-size:0.82rem; color:var(--sub); margin-bottom:1.1rem;
}
.back-link:hover{color:var(--ink);}

.author-header{
  display:flex; align-items:baseline; justify-content:space-between; flex-wrap:wrap; gap:0.5rem;
  margin-bottom:1.3rem;
}
.author-header h1{font-family:var(--font-display); font-weight:700; font-size:1.8rem; margin:0; letter-spacing:-0.015em;}
.author-header .count{font-family:var(--font-mono); font-size:0.72rem; color:var(--sub);}

/* ---------- écran des anomalies ---------- */
.sr-only{position:absolute; width:1px; height:1px; overflow:hidden; clip-path:inset(50%); white-space:nowrap;}

.ano-fam{border:1px solid var(--line); border-radius:var(--radius); margin-bottom:0.7rem; overflow:hidden;}
.ano-head{
  display:flex; align-items:center; gap:0.7rem; width:100%;
  min-height:52px; padding:0.7rem 1rem; text-align:left;
  background:var(--card); border:0; color:var(--ink); cursor:pointer;
  font-family:inherit; font-size:0.92rem;
}
.ano-head:hover{background:var(--chip);}
.ano-head .t{flex:1; min-width:0;}
.ano-head .n{
  flex:none; font-family:var(--font-mono); font-size:0.72rem;
  padding:0.15rem 0.5rem; border-radius:999px; background:var(--chip); color:var(--sub);
}
.ano-head::after{
  content:''; flex:none; width:8px; height:8px; margin-left:0.2rem;
  border-right:2px solid var(--sub); border-bottom:2px solid var(--sub);
  transform:rotate(45deg) translate(-2px,-2px); transition:transform .15s ease;
}
.ano-head[aria-expanded="true"]::after{transform:rotate(-135deg) translate(-2px,-2px);}
.ano-body{padding:1rem; border-top:1px solid var(--line);}

.ano-row{padding:0.8rem 0; border-bottom:1px dashed var(--line);}
.ano-row:last-of-type{border-bottom:0;}
.ano-who{display:flex; flex-direction:column; gap:0.15rem; min-width:0;}
.ano-who .t{font-size:0.9rem; word-break:break-word;}
.ano-who .a{font-size:0.78rem; color:var(--sub); word-break:break-word;}

.ano-fix{display:flex; gap:0.5rem; margin-top:0.5rem; flex-wrap:wrap;}
.ano-fix input{
  flex:1 1 16rem; min-width:0; min-height:44px; padding:0.45rem 0.7rem;
  border:1px solid var(--line); border-radius:var(--radius); background:var(--bg);
  color:var(--ink); font-family:inherit; font-size:0.88rem;
}
.btn-mini{
  flex:none; min-height:44px; padding:0.45rem 0.9rem;
  border:1px solid var(--line); border-radius:999px;
  background:var(--card); color:var(--ink); cursor:pointer;
  font-family:inherit; font-size:0.82rem;
}
.btn-mini:hover{background:var(--ink); border-color:var(--ink); color:var(--bg);}
.btn-mini:disabled{opacity:0.5; cursor:default;}

.ano-opts{display:grid; grid-template-columns:repeat(auto-fit, minmax(240px, 1fr)); gap:0.6rem; margin-top:0.5rem;}
.ano-opt{
  display:flex; flex-direction:column; align-items:flex-start; gap:0.45rem;
  padding:0.7rem; border:1px solid var(--line); border-radius:var(--radius); background:var(--bg);
}
.ano-opt .ano-t{font-size:0.86rem; word-break:break-word;}
.ano-msg{margin:0.6rem 0 0; font-size:0.8rem; color:var(--danger, #b2685a);}

@media (max-width:760px){
  .ano-body{padding:0.8rem;}
  .ano-opts{grid-template-columns:1fr;}
}

/* ---------- aide propriétaire (même habillage que les anomalies) ---------- */
.aide-fam{border:1px solid var(--line); border-radius:var(--radius); margin-bottom:0.7rem; overflow:hidden;}
.aide-head{
  display:flex; align-items:center; gap:0.7rem; width:100%;
  min-height:52px; padding:0.7rem 1rem; text-align:left;
  background:var(--card); border:0; color:var(--ink); cursor:pointer;
  font-family:inherit; font-size:0.92rem;
}
.aide-head:hover{background:var(--chip);}
.aide-head .t{flex:1; min-width:0;}
.aide-head::after{
  content:''; flex:none; width:8px; height:8px; margin-left:0.2rem;
  border-right:2px solid var(--sub); border-bottom:2px solid var(--sub);
  transform:rotate(45deg) translate(-2px,-2px); transition:transform .15s ease;
}
.aide-head[aria-expanded="true"]::after{transform:rotate(-135deg) translate(-2px,-2px);}
.aide-body{padding:1rem; border-top:1px solid var(--line);}
.aide-body code{
  font-family:var(--font-mono); font-size:0.88em;
  background:var(--chip); padding:0.1em 0.35em; border-radius:4px;
}
@media (max-width:760px){
  .aide-body{padding:0.8rem;}
}

/* ---------- auteur précédent / suivant ----------
   Deux liens, deux présentations selon la place disponible :
   - jusqu'à 1400px (téléphone, iPad, petit portable) : une barre normale sous
     le titre, avec le nom de l'auteur visé et une zone tactile de 44px ;
   - au-delà : les mêmes liens passent en pastilles fixes dans les marges,
     là où il n'y a de toute façon rien d'autre. */
.author-nav{
  display:flex; align-items:center; gap:0.6rem;
  margin:-0.5rem 0 1.5rem;
}
.nav-author{
  display:inline-flex; align-items:center; gap:0.45rem;
  min-height:44px; max-width:48%; padding:0.4rem 0.9rem;
  border:1px solid var(--line); border-radius:999px;
  background:var(--card); color:var(--sub);
  font-size:0.82rem; line-height:1.2;
  transition:color .15s ease, border-color .15s ease, background .15s ease;
}
.nav-author:hover{color:var(--ink); border-color:var(--sub);}
.nav-author .n{overflow:hidden; text-overflow:ellipsis; white-space:nowrap;}
.nav-author svg{width:17px; height:17px; flex:none;}
.nav-author.next{margin-left:auto;}   /* reste à droite même sans précédent */

@media (min-width:1400px){
  .author-nav{display:block; margin:0;}
  .nav-author{
    position:fixed; top:50%; transform:translateY(-50%); z-index:20;
    width:56px; height:56px; max-width:none; padding:0;
    justify-content:center; border-radius:50%; box-shadow:var(--shadow);
  }
  .nav-author.prev{left:max(1rem, calc(50% - 700px));}
  .nav-author.next{right:max(1rem, calc(50% - 700px)); margin-left:0;}
  .nav-author:hover{background:var(--ink); border-color:var(--ink); color:var(--bg);}
  .nav-author svg{width:22px; height:22px;}
  /* le nom disparaît de l'œil mais reste dans l'infobulle et pour les
     lecteurs d'écran */
  .nav-author .n{position:absolute; width:1px; height:1px; overflow:hidden; clip-path:inset(50%);}
}

/* ---------- fiche livre ---------- */
.fiche{
  display:flex; gap:2rem; flex-wrap:wrap;
  background:var(--card); border:1px solid var(--line); border-radius:var(--radius-lg);
  padding:1.8rem; box-shadow:var(--shadow);
}
.fiche .cover-wrap{position:relative; flex:none;}
.fiche .cover{width:190px; height:278px; border-radius:var(--radius); box-shadow:var(--shadow-hi);}
.magnify{
  position:absolute; top:9px; right:9px;
  width:34px; height:34px; border-radius:999px;
  background:var(--scrim); border:1px solid var(--line);
  display:flex; align-items:center; justify-content:center;
  color:var(--ink);
}
.magnify svg{width:16px; height:16px;}
.fiche .details{flex:1 1 280px; min-width:240px;}
.fiche h1{font-family:var(--font-display); font-weight:700; font-size:1.6rem; margin:0 0 0.35rem; line-height:1.2; letter-spacing:-0.015em;}
.fiche .by-line{font-size:0.95rem; color:var(--sub); margin:0 0 1rem;}
.fiche .by-line a{text-decoration:underline; text-underline-offset:3px;}
.fiche .badges{display:flex; flex-wrap:wrap; gap:0.4rem; margin-bottom:1.4rem;}

.toggles{display:flex; flex-direction:column; gap:0.55rem; max-width:270px;}
.toggle{
  display:flex; align-items:center; gap:0.7em;
  padding:0.62em 0.85em; border-radius:999px;
  border:1px solid var(--line); background:var(--bg);
  font-size:0.85rem; user-select:none;
  transition:border-color .15s ease, background .15s ease;
}
.toggle input{width:16px; height:16px; accent-color:var(--accent);}
.toggle.active{border-color:var(--accent); background:var(--chip);}

/* ---------- Mon avis (note, date, commentaire — propriétaire seulement) ---------- */
.review{
  max-width:640px;                /* la note « 8/10 » reste sur la ligne des 10 boutons */
  margin-top:1.2rem; padding:1rem 1.1rem;
  border:1px solid var(--line); border-radius:var(--radius); background:var(--card);
  display:flex; flex-direction:column; gap:0.9rem;
}
.review[hidden]{display:none;}
.review-head{font-family:var(--font-display); font-weight:700; font-size:1rem;}
.review-private{font-family:var(--font-body); font-weight:400; font-size:0.78rem; color:var(--sub);}
.review-row{display:flex; flex-wrap:wrap; align-items:center; gap:0.5rem 0.7rem;}
.review-col{flex-direction:column; align-items:stretch;}
.review-lab{font-size:0.8rem; color:var(--sub); min-width:7.5em;}
.review .rating{display:flex; flex-wrap:wrap; gap:4px;}
.rate{
  width:34px; height:34px; padding:0; border-radius:8px;
  border:1px solid var(--line); background:var(--bg); color:var(--sub);
  font-family:var(--font-body); font-size:0.85rem; font-weight:700; cursor:pointer;
  -webkit-tap-highlight-color:transparent; touch-action:manipulation;
}
.rate.fill{background:var(--chip); color:var(--ink); border-color:var(--sub);}
.rate.on{background:var(--accent); color:var(--accent-ink); border-color:var(--accent);}
.rating-val{font-size:0.82rem; font-weight:700; color:var(--ink);}
.review input[type="date"]{
  font-family:var(--font-body); font-size:0.9rem; color:var(--ink);
  padding:0.4em 0.6em; border:1px solid var(--line); border-radius:8px; background:var(--bg);
  min-height:38px;
}
.review textarea{
  width:100%; box-sizing:border-box; resize:vertical; min-height:96px;
  font-family:var(--font-body); font-size:0.92rem; line-height:1.45; color:var(--ink);
  padding:0.6em 0.75em; border:1px solid var(--line); border-radius:8px; background:var(--bg);
}
.review textarea:focus, .review input[type="date"]:focus{outline:2px solid var(--accent); outline-offset:1px;}
.review-actions{display:flex; align-items:center; gap:0.8rem; flex-wrap:wrap;}
.review-msg{font-size:0.8rem; color:var(--sub);}
.review-msg.err{color:var(--danger, #b2685a);}
@media (max-width:760px){
  .review{padding:0.9rem;}
  .review-lab{min-width:0; width:100%;}
  /* sur iPhone, 10 boutons d'une ligne ne feraient que 25px de large : deux lignes de 5
     (1 à 5, puis 6 à 10), chaque bouton d'environ 55×44px, confortable au doigt */
  .review .rating{display:grid; grid-template-columns:repeat(5, minmax(0, 1fr)); gap:6px; width:100%;}
  .rate{width:auto; height:44px; font-size:0.95rem;}
}

.source-note{margin-top:1.4rem; font-size:0.7rem; color:var(--sub); font-family:var(--font-mono); line-height:1.6;}

/* ---------- séries ---------- */
.serie-head{
  display:flex; align-items:baseline; gap:0.8rem;
  margin:2.2rem 0 0.9rem; scroll-margin-top:12px;
}
.serie-head:first-of-type{margin-top:0.4rem;}
.serie-head .s-nom{
  font-family:var(--font-display); font-weight:700; font-size:1.15rem;
  color:var(--accent); letter-spacing:-0.01em;
}
.serie-head.hors .s-nom{color:var(--sub); font-weight:600; font-size:1rem;}
.serie-head .s-cnt{
  font-family:var(--font-mono); font-size:0.68rem; color:var(--sub); white-space:nowrap;
}
.serie-head::after{content:""; flex:1; height:1px; background:var(--line);}
.book-card h3 .tome{color:var(--sub); font-family:var(--font-mono); font-size:0.8em;}
/* tomes absents d'une saga (3.2, propriétaire seulement) : la ligne se colle sous l'en-tête */
.serie-head:has(+ .s-manque){margin-bottom:0.25rem;}
.s-manque{margin:0 0 0.9rem; font-size:0.8rem; color:var(--sub);}
.s-manque .s-prive{font-size:0.72rem; opacity:0.8;}

.serie-strip{
  margin:0 0 1.1rem; padding:0.7rem 0.9rem;
  border:1px solid var(--line); border-left:3px solid var(--accent);
  border-radius:var(--radius); background:var(--bg);
  display:flex; flex-wrap:wrap; align-items:center; gap:0.5rem 1.2rem;
}
.serie-strip .s-line{display:flex; flex-direction:column; gap:0.15rem; min-width:0; flex:1;}
.serie-strip .s-name{font-weight:600; font-size:0.9rem;}
.serie-strip .s-rank{font-family:var(--font-mono); font-size:0.7rem; color:var(--sub);}
.serie-strip .s-nav{display:flex; gap:0.9rem; white-space:nowrap;}
.serie-strip .s-nav a{font-size:0.78rem; color:var(--accent); text-decoration:underline; text-underline-offset:3px;}
.serie-strip .s-nav .off{font-size:0.78rem; color:var(--sub); opacity:0.45;}

/* ---------- corriger / masquer un livre ---------- */
.book-actions{display:flex; gap:1.1rem; flex-wrap:wrap; margin-top:1.4rem;}
.linkish{
  background:none; border:none; padding:0; color:var(--sub);
  font-size:0.8rem; text-decoration:underline; text-underline-offset:3px;
}
.linkish:hover{color:var(--ink);}
.linkish.danger:hover{color:var(--danger, #b2685a);}
.btn-main{
  border:1px solid var(--accent); background:var(--accent); color:var(--accent-ink);
  border-radius:999px; padding:0.5em 1.1em; font-size:0.82rem; font-weight:600;
  display:inline-block; text-decoration:none;
}
.btn-main.danger{background:var(--danger, #b2685a); border-color:var(--danger, #b2685a); color:#fff;}
.inline-form{
  margin-top:1.4rem; padding:1rem 1.1rem;
  border:1px solid var(--line); border-radius:var(--radius); background:var(--bg);
  max-width:420px;
}
.inline-form label{display:block; font-size:0.74rem; color:var(--sub); margin-bottom:0.35rem;}
.inline-form input[type="text"]{
  width:100%; font-family:var(--font-body); font-size:0.92rem;
  padding:0.55em 0.75em; border-radius:var(--radius); margin-bottom:0.8rem;
  border:1px solid var(--line); background:var(--card); color:var(--ink);
}
.inline-form input[type="text"]:focus{outline:2px solid var(--accent); outline-offset:1px; border-color:var(--accent);}
.inline-form .row{display:flex; gap:0.9rem; align-items:center;}
.inline-form .confirm-q{margin:0 0 0.4rem; font-weight:600; font-size:0.92rem;}
.hint-sm{margin:0.8rem 0 0; font-size:0.74rem; color:var(--sub); line-height:1.55;}
.form-error{
  margin:0.8rem 0 0; font-size:0.78rem; line-height:1.5;
  color:var(--danger, #b2685a);
}

/* ---------- livres masqués (réglages) ---------- */
.hidden-list{border:1px solid var(--line); border-radius:var(--radius); overflow:hidden;}
.hidden-row{
  display:flex; align-items:center; gap:1rem;
  padding:0.65rem 0.9rem; border-bottom:1px solid var(--line); background:var(--card);
}
.hidden-row:last-child{border-bottom:none;}
.hidden-row .who{flex:1; min-width:0;}
.hidden-row .t{display:block; font-size:0.86rem; font-weight:600;}
.hidden-row .a{display:block; font-size:0.74rem; color:var(--sub);}

/* ---------- page de réglages ---------- */
.settings h1{
  font-family:var(--font-display); font-weight:700; font-size:1.8rem;
  margin:0 0 0.3rem; letter-spacing:-0.015em;
}
.settings .lede{color:var(--sub); font-size:0.9rem; margin:0 0 2.2rem; max-width:52ch; line-height:1.6;}
.set-block{margin-bottom:2.6rem;}
.set-block.is-closed{margin-bottom:0.6rem;}
/* titre de section cliquable : même allure que les autres titres, plus un chevron */
.set-head{
  width:100%; min-height:44px; padding:0; margin:0 0 0.9rem;
  background:none; border:0; cursor:pointer; text-align:left;
  font-size:0.74rem; color:var(--ink);
}
.set-block.is-closed .set-head{margin-bottom:0;}
.set-head::after{
  content:''; flex:none; width:8px; height:8px; margin:0 0.3rem 0 0.1rem;
  border-right:2px solid var(--sub); border-bottom:2px solid var(--sub);
  transform:rotate(45deg) translate(-2px,-2px); transition:transform .15s ease;
}
.set-head[aria-expanded="true"]::after{transform:rotate(-135deg) translate(-2px,-2px);}
@media (hover:hover) and (pointer:fine){
  .set-head:hover .t{color:var(--accent);}
}
.set-all{display:flex; gap:0.5rem; align-items:center; margin:-1.2rem 0 1.6rem; color:var(--sub); font-size:0.8rem;}
.set-all-btn{
  background:none; border:0; padding:0.4rem 0; min-height:36px; cursor:pointer;
  color:var(--sub); font:inherit; text-decoration:underline; text-underline-offset:3px;
}
@media (hover:hover) and (pointer:fine){ .set-all-btn:hover{color:var(--ink);} }
.admin-links{display:flex; flex-wrap:wrap; gap:0.7rem;}
.app-version{
  margin:2.4rem 0 0; padding-top:1rem; border-top:1px solid var(--line);
  font-family:var(--font-mono); font-size:0.72rem; color:var(--sub);
}

.segmented{display:inline-flex; background:var(--chip); border-radius:999px; padding:3px; gap:2px; border:1px solid var(--line);}
.segmented button{
  border:none; background:none; color:var(--sub);
  font-size:0.8rem; padding:0.45em 1.1em; border-radius:999px;
}
.segmented button.on{background:var(--accent); color:var(--accent-ink); font-weight:600;}

.theme-grid{
  display:grid; grid-template-columns:repeat(auto-fill, minmax(215px, 1fr)); gap:0.9rem;
}
.theme-card{
  border:1px solid var(--line); border-radius:var(--radius-lg);
  background:var(--card); box-shadow:var(--shadow);
  overflow:hidden; text-align:left; padding:0;
  transition:transform .15s ease, box-shadow .15s ease, border-color .15s ease;
  position:relative;
}
.theme-card:hover{transform:translateY(-3px); box-shadow:var(--shadow-hi);}
.theme-card.on{border-color:var(--accent); box-shadow:0 0 0 2px var(--accent), var(--shadow);}
.theme-card .tick{
  position:absolute; top:9px; right:9px; width:24px; height:24px; border-radius:999px;
  background:var(--accent); color:var(--accent-ink);
  display:none; align-items:center; justify-content:center; font-size:0.72rem; z-index:2;
}
.theme-card.on .tick{display:flex;}

/* la vignette rejoue l'interface en miniature, avec les couleurs du thème */
.tp{padding:0.85rem 0.85rem 0.7rem; min-height:118px;}
.tp .tp-bar{display:flex; align-items:center; gap:0.4rem; margin-bottom:0.6rem;}
.tp .tp-brand{font-weight:700; font-size:0.68rem; letter-spacing:-0.01em;}
.tp .tp-pill{margin-left:auto; height:11px; width:46px; border-radius:99px;}
.tp .tp-row{display:flex; gap:0.4rem;}
.tp .tp-cover{width:30px; height:44px; border-radius:4px; flex:none;}
.tp .tp-lines{flex:1; display:flex; flex-direction:column; gap:4px; padding-top:3px;}
.tp .tp-l{height:6px; border-radius:3px;}
.tp .tp-chips{display:flex; gap:3px; margin-top:4px;}
.tp .tp-chip{height:9px; width:26px; border-radius:99px;}
.theme-card .tp-meta{
  padding:0.7rem 0.9rem 0.9rem; border-top:1px solid var(--line);
  background:var(--card);
}
.theme-card .tp-name{font-weight:600; font-size:0.88rem; color:var(--ink);}
.theme-card .tp-desc{font-size:0.72rem; color:var(--sub); margin-top:0.2rem; line-height:1.45;}

.stats{display:grid; grid-template-columns:repeat(auto-fill, minmax(140px,1fr)); gap:0.7rem;}
.stat{
  background:var(--card); border:1px solid var(--line); border-radius:var(--radius);
  padding:0.9rem 1rem;
}
.stat .n{font-family:var(--font-display); font-weight:700; font-size:1.5rem; line-height:1;}
.stat .l{font-family:var(--font-mono); font-size:0.64rem; text-transform:uppercase; letter-spacing:0.08em;
  color:var(--sub); margin-top:0.4rem;}
.bar{height:7px; border-radius:99px; background:var(--chip); overflow:hidden; margin-top:0.5rem;}
.bar i{display:block; height:100%; background:var(--accent);}

/* ---------- visionneuse de couverture ---------- */
.lightbox{
  position:fixed; inset:0; background:rgba(12,10,8,0.9);
  display:flex; align-items:center; justify-content:center;
  z-index:100; padding:2rem;
}
.lightbox.hidden{display:none;}
.lightbox img{max-width:92vw; max-height:88vh; border-radius:8px; box-shadow:0 10px 50px rgba(0,0,0,0.6);}
.lightbox-close{
  position:absolute; top:1.2rem; right:1.2rem;
  width:40px; height:40px; border-radius:999px; border:none;
  background:rgba(255,255,255,0.92); color:#111; font-size:1.1rem;
}

@media (max-width:760px){
  .letter-head{scroll-margin-top:84px; font-size:1.3rem;}
  .fiche{padding:1.2rem; gap:1.2rem;}
  .fiche .cover{width:135px; height:198px;}
  #app{padding:1.2rem 1rem 3rem;}
  .author-grid{grid-template-columns:repeat(auto-fill, minmax(150px,1fr));}
}

@media (prefers-reduced-motion: reduce){
  *{transition:none !important; animation:none !important;}
  html{scroll-behavior:auto;}
}

/* ----- vignettes d'aperçu dans les réglages ----- */
.tp[data-preview="nordique"]{background:#f4f1ec; color:#2e2b28;}
.tp[data-preview="nordique"] .tp-brand{font-family:'Libre Franklin', system-ui, sans-serif; color:#2e2b28;}
.tp[data-preview="nordique"] .tp-pill{background:#e8e2d6; border:1px solid #e2dcd0;}
.tp[data-preview="nordique"] .tp-cover{background:#7f9c8f;}
.tp[data-preview="nordique"] .tp-l{background:#e2dcd0;}
.tp[data-preview="nordique"] .tp-chip{background:#7f9c8f;}
:root[data-mode="dark"] .tp[data-preview="nordique"]{background:#1c1a15; color:#f1ede4;}
:root[data-mode="dark"] .tp[data-preview="nordique"] .tp-brand{font-family:'Libre Franklin', system-ui, sans-serif; color:#f1ede4;}
:root[data-mode="dark"] .tp[data-preview="nordique"] .tp-pill{background:#2d2921; border:1px solid #3a352b;}
:root[data-mode="dark"] .tp[data-preview="nordique"] .tp-cover{background:#93b3a6;}
:root[data-mode="dark"] .tp[data-preview="nordique"] .tp-l{background:#3a352b;}
:root[data-mode="dark"] .tp[data-preview="nordique"] .tp-chip{background:#93b3a6;}
@media (prefers-color-scheme: dark){
:root[data-mode="auto"] .tp[data-preview="nordique"]{background:#1c1a15; color:#f1ede4;}
:root[data-mode="auto"] .tp[data-preview="nordique"] .tp-brand{font-family:'Libre Franklin', system-ui, sans-serif; color:#f1ede4;}
:root[data-mode="auto"] .tp[data-preview="nordique"] .tp-pill{background:#2d2921; border:1px solid #3a352b;}
:root[data-mode="auto"] .tp[data-preview="nordique"] .tp-cover{background:#93b3a6;}
:root[data-mode="auto"] .tp[data-preview="nordique"] .tp-l{background:#3a352b;}
:root[data-mode="auto"] .tp[data-preview="nordique"] .tp-chip{background:#93b3a6;}
}
.tp[data-preview="grenat"]{background:#faf7f2; color:#231f1d;}
.tp[data-preview="grenat"] .tp-brand{font-family:'Fraunces', Georgia, serif; color:#231f1d;}
.tp[data-preview="grenat"] .tp-pill{background:#f0e8dc; border:1px solid #e6ded2;}
.tp[data-preview="grenat"] .tp-cover{background:#8c2f39;}
.tp[data-preview="grenat"] .tp-l{background:#e6ded2;}
.tp[data-preview="grenat"] .tp-chip{background:#8c2f39;}
:root[data-mode="dark"] .tp[data-preview="grenat"]{background:#1a1614; color:#f2ece4;}
:root[data-mode="dark"] .tp[data-preview="grenat"] .tp-brand{font-family:'Fraunces', Georgia, serif; color:#f2ece4;}
:root[data-mode="dark"] .tp[data-preview="grenat"] .tp-pill{background:#272019; border:1px solid #332b26;}
:root[data-mode="dark"] .tp[data-preview="grenat"] .tp-cover{background:#c25d66;}
:root[data-mode="dark"] .tp[data-preview="grenat"] .tp-l{background:#332b26;}
:root[data-mode="dark"] .tp[data-preview="grenat"] .tp-chip{background:#c25d66;}
@media (prefers-color-scheme: dark){
:root[data-mode="auto"] .tp[data-preview="grenat"]{background:#1a1614; color:#f2ece4;}
:root[data-mode="auto"] .tp[data-preview="grenat"] .tp-brand{font-family:'Fraunces', Georgia, serif; color:#f2ece4;}
:root[data-mode="auto"] .tp[data-preview="grenat"] .tp-pill{background:#272019; border:1px solid #332b26;}
:root[data-mode="auto"] .tp[data-preview="grenat"] .tp-cover{background:#c25d66;}
:root[data-mode="auto"] .tp[data-preview="grenat"] .tp-l{background:#332b26;}
:root[data-mode="auto"] .tp[data-preview="grenat"] .tp-chip{background:#c25d66;}
}
.tp[data-preview="encre"]{background:#f4f6fb; color:#101729;}
.tp[data-preview="encre"] .tp-brand{font-family:'Spectral', Georgia, serif; color:#101729;}
.tp[data-preview="encre"] .tp-pill{background:#e8ecf5; border:1px solid #dde2ee;}
.tp[data-preview="encre"] .tp-cover{background:#9b7b33;}
.tp[data-preview="encre"] .tp-l{background:#dde2ee;}
.tp[data-preview="encre"] .tp-chip{background:#9b7b33;}
:root[data-mode="dark"] .tp[data-preview="encre"]{background:#101729; color:#eef1f7;}
:root[data-mode="dark"] .tp[data-preview="encre"] .tp-brand{font-family:'Spectral', Georgia, serif; color:#eef1f7;}
:root[data-mode="dark"] .tp[data-preview="encre"] .tp-pill{background:#1b253c; border:1px solid #233049;}
:root[data-mode="dark"] .tp[data-preview="encre"] .tp-cover{background:#c8a560;}
:root[data-mode="dark"] .tp[data-preview="encre"] .tp-l{background:#233049;}
:root[data-mode="dark"] .tp[data-preview="encre"] .tp-chip{background:#c8a560;}
@media (prefers-color-scheme: dark){
:root[data-mode="auto"] .tp[data-preview="encre"]{background:#101729; color:#eef1f7;}
:root[data-mode="auto"] .tp[data-preview="encre"] .tp-brand{font-family:'Spectral', Georgia, serif; color:#eef1f7;}
:root[data-mode="auto"] .tp[data-preview="encre"] .tp-pill{background:#1b253c; border:1px solid #233049;}
:root[data-mode="auto"] .tp[data-preview="encre"] .tp-cover{background:#c8a560;}
:root[data-mode="auto"] .tp[data-preview="encre"] .tp-l{background:#233049;}
:root[data-mode="auto"] .tp[data-preview="encre"] .tp-chip{background:#c8a560;}
}
.tp[data-preview="terracotta"]{background:#f8f0e7; color:#3b2d26;}
.tp[data-preview="terracotta"] .tp-brand{font-family:'Fraunces', Georgia, serif; color:#3b2d26;}
.tp[data-preview="terracotta"] .tp-pill{background:#f0e2d2; border:1px solid #e9dac9;}
.tp[data-preview="terracotta"] .tp-cover{background:#c2673f;}
.tp[data-preview="terracotta"] .tp-l{background:#e9dac9;}
.tp[data-preview="terracotta"] .tp-chip{background:#c2673f;}
:root[data-mode="dark"] .tp[data-preview="terracotta"]{background:#211813; color:#f5e9df;}
:root[data-mode="dark"] .tp[data-preview="terracotta"] .tp-brand{font-family:'Fraunces', Georgia, serif; color:#f5e9df;}
:root[data-mode="dark"] .tp[data-preview="terracotta"] .tp-pill{background:#2d2019; border:1px solid #3b2b22;}
:root[data-mode="dark"] .tp[data-preview="terracotta"] .tp-cover{background:#e08a5c;}
:root[data-mode="dark"] .tp[data-preview="terracotta"] .tp-l{background:#3b2b22;}
:root[data-mode="dark"] .tp[data-preview="terracotta"] .tp-chip{background:#e08a5c;}
@media (prefers-color-scheme: dark){
:root[data-mode="auto"] .tp[data-preview="terracotta"]{background:#211813; color:#f5e9df;}
:root[data-mode="auto"] .tp[data-preview="terracotta"] .tp-brand{font-family:'Fraunces', Georgia, serif; color:#f5e9df;}
:root[data-mode="auto"] .tp[data-preview="terracotta"] .tp-pill{background:#2d2019; border:1px solid #3b2b22;}
:root[data-mode="auto"] .tp[data-preview="terracotta"] .tp-cover{background:#e08a5c;}
:root[data-mode="auto"] .tp[data-preview="terracotta"] .tp-l{background:#3b2b22;}
:root[data-mode="auto"] .tp[data-preview="terracotta"] .tp-chip{background:#e08a5c;}
}
.tp[data-preview="bibliotheque"]{background:#f6f1e7; color:#2b2218;}
.tp[data-preview="bibliotheque"] .tp-brand{font-family:'Spectral', Georgia, serif; color:#2b2218;}
.tp[data-preview="bibliotheque"] .tp-pill{background:#ece2d1; border:1px solid #e3d8c6;}
.tp[data-preview="bibliotheque"] .tp-cover{background:#9a6b1f;}
.tp[data-preview="bibliotheque"] .tp-l{background:#e3d8c6;}
.tp[data-preview="bibliotheque"] .tp-chip{background:#9a6b1f;}
:root[data-mode="dark"] .tp[data-preview="bibliotheque"]{background:#1e1813; color:#efe4d4;}
:root[data-mode="dark"] .tp[data-preview="bibliotheque"] .tp-brand{font-family:'Spectral', Georgia, serif; color:#efe4d4;}
:root[data-mode="dark"] .tp[data-preview="bibliotheque"] .tp-pill{background:#2a2219; border:1px solid #362c22;}
:root[data-mode="dark"] .tp[data-preview="bibliotheque"] .tp-cover{background:#c9a227;}
:root[data-mode="dark"] .tp[data-preview="bibliotheque"] .tp-l{background:#362c22;}
:root[data-mode="dark"] .tp[data-preview="bibliotheque"] .tp-chip{background:#c9a227;}
@media (prefers-color-scheme: dark){
:root[data-mode="auto"] .tp[data-preview="bibliotheque"]{background:#1e1813; color:#efe4d4;}
:root[data-mode="auto"] .tp[data-preview="bibliotheque"] .tp-brand{font-family:'Spectral', Georgia, serif; color:#efe4d4;}
:root[data-mode="auto"] .tp[data-preview="bibliotheque"] .tp-pill{background:#2a2219; border:1px solid #362c22;}
:root[data-mode="auto"] .tp[data-preview="bibliotheque"] .tp-cover{background:#c9a227;}
:root[data-mode="auto"] .tp[data-preview="bibliotheque"] .tp-l{background:#362c22;}
:root[data-mode="auto"] .tp[data-preview="bibliotheque"] .tp-chip{background:#c9a227;}
}
.tp[data-preview="brume"]{background:#f1f3f6; color:#1f2937;}
.tp[data-preview="brume"] .tp-brand{font-family:'Libre Franklin', system-ui, sans-serif; color:#1f2937;}
.tp[data-preview="brume"] .tp-pill{background:#e7ecf2; border:1px solid #e0e5ec;}
.tp[data-preview="brume"] .tp-cover{background:#5b7a99;}
.tp[data-preview="brume"] .tp-l{background:#e0e5ec;}
.tp[data-preview="brume"] .tp-chip{background:#5b7a99;}
:root[data-mode="dark"] .tp[data-preview="brume"]{background:#14181d; color:#e7ecf2;}
:root[data-mode="dark"] .tp[data-preview="brume"] .tp-brand{font-family:'Libre Franklin', system-ui, sans-serif; color:#e7ecf2;}
:root[data-mode="dark"] .tp[data-preview="brume"] .tp-pill{background:#1d232a; border:1px solid #262d36;}
:root[data-mode="dark"] .tp[data-preview="brume"] .tp-cover{background:#8fb0cf;}
:root[data-mode="dark"] .tp[data-preview="brume"] .tp-l{background:#262d36;}
:root[data-mode="dark"] .tp[data-preview="brume"] .tp-chip{background:#8fb0cf;}
@media (prefers-color-scheme: dark){
:root[data-mode="auto"] .tp[data-preview="brume"]{background:#14181d; color:#e7ecf2;}
:root[data-mode="auto"] .tp[data-preview="brume"] .tp-brand{font-family:'Libre Franklin', system-ui, sans-serif; color:#e7ecf2;}
:root[data-mode="auto"] .tp[data-preview="brume"] .tp-pill{background:#1d232a; border:1px solid #262d36;}
:root[data-mode="auto"] .tp[data-preview="brume"] .tp-cover{background:#8fb0cf;}
:root[data-mode="auto"] .tp[data-preview="brume"] .tp-l{background:#262d36;}
:root[data-mode="auto"] .tp[data-preview="brume"] .tp-chip{background:#8fb0cf;}
}
.tp[data-preview="agrume"]{background:#fffdf7; color:#17140f;}
.tp[data-preview="agrume"] .tp-brand{font-family:'Space Grotesk', system-ui, sans-serif; color:#17140f;}
.tp[data-preview="agrume"] .tp-pill{background:#fdf1dd; border:1px solid #ece5d6;}
.tp[data-preview="agrume"] .tp-cover{background:#e8600d;}
.tp[data-preview="agrume"] .tp-l{background:#ece5d6;}
.tp[data-preview="agrume"] .tp-chip{background:#e8600d;}
:root[data-mode="dark"] .tp[data-preview="agrume"]{background:#141210; color:#f7f3ea;}
:root[data-mode="dark"] .tp[data-preview="agrume"] .tp-brand{font-family:'Space Grotesk', system-ui, sans-serif; color:#f7f3ea;}
:root[data-mode="dark"] .tp[data-preview="agrume"] .tp-pill{background:#241f19; border:1px solid #2b2722;}
:root[data-mode="dark"] .tp[data-preview="agrume"] .tp-cover{background:#ff8534;}
:root[data-mode="dark"] .tp[data-preview="agrume"] .tp-l{background:#2b2722;}
:root[data-mode="dark"] .tp[data-preview="agrume"] .tp-chip{background:#ff8534;}
@media (prefers-color-scheme: dark){
:root[data-mode="auto"] .tp[data-preview="agrume"]{background:#141210; color:#f7f3ea;}
:root[data-mode="auto"] .tp[data-preview="agrume"] .tp-brand{font-family:'Space Grotesk', system-ui, sans-serif; color:#f7f3ea;}
:root[data-mode="auto"] .tp[data-preview="agrume"] .tp-pill{background:#241f19; border:1px solid #2b2722;}
:root[data-mode="auto"] .tp[data-preview="agrume"] .tp-cover{background:#ff8534;}
:root[data-mode="auto"] .tp[data-preview="agrume"] .tp-l{background:#2b2722;}
:root[data-mode="auto"] .tp[data-preview="agrume"] .tp-chip{background:#ff8534;}
}
.tp[data-preview="minuit"]{background:#f6f6fb; color:#14162a;}
.tp[data-preview="minuit"] .tp-brand{font-family:'Space Grotesk', system-ui, sans-serif; color:#14162a;}
.tp[data-preview="minuit"] .tp-pill{background:#ebecf7; border:1px solid #e2e3f0;}
.tp[data-preview="minuit"] .tp-cover{background:#5b4bd6;}
.tp[data-preview="minuit"] .tp-l{background:#e2e3f0;}
.tp[data-preview="minuit"] .tp-chip{background:#5b4bd6;}
:root[data-mode="dark"] .tp[data-preview="minuit"]{background:#0d0f1a; color:#e9eaf4;}
:root[data-mode="dark"] .tp[data-preview="minuit"] .tp-brand{font-family:'Space Grotesk', system-ui, sans-serif; color:#e9eaf4;}
:root[data-mode="dark"] .tp[data-preview="minuit"] .tp-pill{background:#181c2c; border:1px solid #222638;}
:root[data-mode="dark"] .tp[data-preview="minuit"] .tp-cover{background:#8f7dff;}
:root[data-mode="dark"] .tp[data-preview="minuit"] .tp-l{background:#222638;}
:root[data-mode="dark"] .tp[data-preview="minuit"] .tp-chip{background:#8f7dff;}
@media (prefers-color-scheme: dark){
:root[data-mode="auto"] .tp[data-preview="minuit"]{background:#0d0f1a; color:#e9eaf4;}
:root[data-mode="auto"] .tp[data-preview="minuit"] .tp-brand{font-family:'Space Grotesk', system-ui, sans-serif; color:#e9eaf4;}
:root[data-mode="auto"] .tp[data-preview="minuit"] .tp-pill{background:#181c2c; border:1px solid #222638;}
:root[data-mode="auto"] .tp[data-preview="minuit"] .tp-cover{background:#8f7dff;}
:root[data-mode="auto"] .tp[data-preview="minuit"] .tp-l{background:#222638;}
:root[data-mode="auto"] .tp[data-preview="minuit"] .tp-chip{background:#8f7dff;}
}
.tp[data-preview="botanique"]{background:#f3f5ee; color:#1f2a1f;}
.tp[data-preview="botanique"] .tp-brand{font-family:'Fraunces', Georgia, serif; color:#1f2a1f;}
.tp[data-preview="botanique"] .tp-pill{background:#e9eee0; border:1px solid #e0e6d8;}
.tp[data-preview="botanique"] .tp-cover{background:#2f6b4f;}
.tp[data-preview="botanique"] .tp-l{background:#e0e6d8;}
.tp[data-preview="botanique"] .tp-chip{background:#2f6b4f;}
:root[data-mode="dark"] .tp[data-preview="botanique"]{background:#141a15; color:#e8efe3;}
:root[data-mode="dark"] .tp[data-preview="botanique"] .tp-brand{font-family:'Fraunces', Georgia, serif; color:#e8efe3;}
:root[data-mode="dark"] .tp[data-preview="botanique"] .tp-pill{background:#1d251e; border:1px solid #28322a;}
:root[data-mode="dark"] .tp[data-preview="botanique"] .tp-cover{background:#6fb08a;}
:root[data-mode="dark"] .tp[data-preview="botanique"] .tp-l{background:#28322a;}
:root[data-mode="dark"] .tp[data-preview="botanique"] .tp-chip{background:#6fb08a;}
@media (prefers-color-scheme: dark){
:root[data-mode="auto"] .tp[data-preview="botanique"]{background:#141a15; color:#e8efe3;}
:root[data-mode="auto"] .tp[data-preview="botanique"] .tp-brand{font-family:'Fraunces', Georgia, serif; color:#e8efe3;}
:root[data-mode="auto"] .tp[data-preview="botanique"] .tp-pill{background:#1d251e; border:1px solid #28322a;}
:root[data-mode="auto"] .tp[data-preview="botanique"] .tp-cover{background:#6fb08a;}
:root[data-mode="auto"] .tp[data-preview="botanique"] .tp-l{background:#28322a;}
:root[data-mode="auto"] .tp[data-preview="botanique"] .tp-chip{background:#6fb08a;}
}
.tp[data-preview="pulp"]{background:#f1e3c6; color:#1a1512;}
.tp[data-preview="pulp"] .tp-brand{font-family:'Archivo', system-ui, sans-serif; color:#1a1512;}
.tp[data-preview="pulp"] .tp-pill{background:#e7d5ae; border:1px solid #ddc99f;}
.tp[data-preview="pulp"] .tp-cover{background:#c2341d;}
.tp[data-preview="pulp"] .tp-l{background:#ddc99f;}
.tp[data-preview="pulp"] .tp-chip{background:#c2341d;}
:root[data-mode="dark"] .tp[data-preview="pulp"]{background:#17120e; color:#f1e3c6;}
:root[data-mode="dark"] .tp[data-preview="pulp"] .tp-brand{font-family:'Archivo', system-ui, sans-serif; color:#f1e3c6;}
:root[data-mode="dark"] .tp[data-preview="pulp"] .tp-pill{background:#241d14; border:1px solid #2e2518;}
:root[data-mode="dark"] .tp[data-preview="pulp"] .tp-cover{background:#e0543a;}
:root[data-mode="dark"] .tp[data-preview="pulp"] .tp-l{background:#2e2518;}
:root[data-mode="dark"] .tp[data-preview="pulp"] .tp-chip{background:#e0543a;}
@media (prefers-color-scheme: dark){
:root[data-mode="auto"] .tp[data-preview="pulp"]{background:#17120e; color:#f1e3c6;}
:root[data-mode="auto"] .tp[data-preview="pulp"] .tp-brand{font-family:'Archivo', system-ui, sans-serif; color:#f1e3c6;}
:root[data-mode="auto"] .tp[data-preview="pulp"] .tp-pill{background:#241d14; border:1px solid #2e2518;}
:root[data-mode="auto"] .tp[data-preview="pulp"] .tp-cover{background:#e0543a;}
:root[data-mode="auto"] .tp[data-preview="pulp"] .tp-l{background:#2e2518;}
:root[data-mode="auto"] .tp[data-preview="pulp"] .tp-chip{background:#e0543a;}
}


/* ---------- Mon carnet de lecture (propriétaire) ---------- */
.carnet h1{font-family:var(--font-display); font-weight:700; font-size:1.8rem; margin:0 0 0.3rem; letter-spacing:-0.015em;}
.carnet .lede{color:var(--sub); font-size:0.9rem; margin:0 0 2rem; max-width:60ch; line-height:1.6;}
.carnet .carnet-lede{margin:0.6rem 0 0; font-size:0.8rem;}
.carnet-sec{margin-bottom:2.4rem;}
.carnet-ctrls{display:flex; flex-wrap:wrap; gap:0.7rem 1rem; margin:0 0 0.8rem;}
.carnet-ctrls label{display:flex; flex-direction:column; gap:0.25rem; font-size:0.72rem; color:var(--sub);
  font-family:var(--font-mono); text-transform:uppercase; letter-spacing:0.06em;}
.carnet-ctrls select{
  font-family:var(--font-body); font-size:0.88rem; text-transform:none; letter-spacing:0; color:var(--ink);
  padding:0.45em 2em 0.45em 0.75em; min-height:40px; border:1px solid var(--line); border-radius:8px;
  background:var(--card); cursor:pointer;
}
.carnet-count{font-size:0.8rem; color:var(--sub); margin:0 0 0.6rem;}
.carnet-list{display:flex; flex-direction:column; gap:0.5rem;}
.carnet-groupe{font-family:var(--font-display); font-weight:700; font-size:1.05rem; color:var(--accent); margin:1rem 0 0.2rem;}
.carnet-groupe:first-child{margin-top:0;}
.carnet-row{
  display:grid; grid-template-columns:minmax(0,1fr) auto; gap:0.35rem 1rem; align-items:center;
  padding:0.75rem 0.95rem; border:1px solid var(--line); border-radius:var(--radius);
  background:var(--card); color:var(--ink); text-decoration:none;
  transition:border-color .15s ease, box-shadow .15s ease;
}
@media (hover:hover) and (pointer:fine){ .carnet-row:hover{border-color:var(--accent); box-shadow:var(--shadow);} }
.c-main{display:flex; flex-direction:column; min-width:0;}
.c-titre{font-weight:600; font-size:0.95rem; overflow:hidden; text-overflow:ellipsis; white-space:nowrap;}
.c-auteur{font-size:0.8rem; color:var(--sub); overflow:hidden; text-overflow:ellipsis; white-space:nowrap;}
.c-meta{display:flex; align-items:center; gap:0.45rem; flex-wrap:wrap; justify-content:flex-end;}
.c-date{font-family:var(--font-mono); font-size:0.75rem; color:var(--sub); min-width:6.2em; text-align:right;}
.c-note{font-weight:800; font-size:0.85rem; min-width:3.2em; text-align:right;}
.c-note.vide{color:var(--line);}
.c-com{grid-column:1 / -1; margin:0; font-size:0.82rem; color:var(--sub); font-style:italic; line-height:1.45;}
@media (max-width:760px){
  .carnet-ctrls{display:grid; grid-template-columns:repeat(2, minmax(0,1fr));}
  .carnet-ctrls label:first-child{grid-column:1 / -1;}
  .carnet-ctrls select{width:100%;}
  .carnet-row{grid-template-columns:minmax(0,1fr); padding:0.7rem 0.8rem;}
  .c-meta{justify-content:flex-start;}
  .c-date{min-width:0; text-align:left;}
  .c-note{min-width:0; text-align:left;}
}

/* ===========================================================
   STYLE PARAMÉTRABLE (version 1.8, bandeau en 1.9)
   Chaque aspect de l'interface se choisit séparément dans Réglages → Style, et le choix
   est posé en attribut sur <html> (comme le thème) :
     data-titres    theme | bd | classique | moderne   police des titres de page et de section
     data-bandeau   bd | titres | affiche | classique | prestige | elegant | moderne | sobre | machine | manuscrit
                                                       police du titre « Ma Bibliothèque » (1.9 : 10 choix)
     data-hdrcasse  maj | normale                      titre du bandeau en majuscules ou non      (1.9)
     data-hdrombre  decalee | douce | aucune           ombre du titre du bandeau                  (1.9)
     data-hdrfond   trame | uni | degrade              fond du bandeau et filet du bas            (1.9)
     data-hdrchamps bd | doux | arrondis | soulignes   recherche, Format, Genre (et la croix)     (1.9)
     data-hdrpastilles bd | douces | contour           Lus, Écoutés, En cours, Non lus, Favoris   (1.9)
     data-hdrboutons bd | doux | contour | discrets    boutons ronds Carnet et Réglages           (1.9)
     data-cartes    douces | bd | epurees              cartes d'auteurs et de livres, fiche
     data-pastilles contour | bd                       Ebook, PDF, Audio, Lu, Écouté, En cours…
     data-commandes douces | bd                        boutons, cases, champs, menus, notes
     data-panneaux  doux | bd                          statistiques, thèmes, anomalies, aide…
   Valeur « d'origine » (theme / douces / contour / doux) = les règles plus haut dans cette
   feuille, sans rien ajouter. Les autres valeurs n'agissent que sous leur attribut : pour
   supprimer une option, il suffit de supprimer son groupe. Les couleurs viennent toujours
   du thème actif ; seuls traits, ombres, arrondis et polices changent.
   =========================================================== */
:root{
  --bd-s:2px;                                   /* trait fin : pastilles, petits boutons */
  --bd-m:3px;                                   /* trait courant : cartes, champs */
  --bd-r:min(var(--radius), 8px);               /* arrondi plafonné à 8px : les thèmes anguleux le restent */
  --bd-r-sm:min(var(--radius), 6px);
  --bd-sh-s:2px 2px 0 var(--hdr-shadow);
  --bd-sh-m:3px 3px 0 var(--hdr-shadow);
  --bd-sh-l:5px 5px 0 var(--hdr-shadow);
  --bd-sh-xl:7px 7px 0 var(--hdr-shadow);
  --titre-font:var(--font-display);             /* police des titres selon le choix */
}
:root[data-titres="bd"]{ --titre-font:'Bangers', 'Impact', var(--font-display); }
:root[data-titres="classique"]{ --titre-font:'Fraunces', Georgia, serif; }
:root[data-titres="moderne"]{ --titre-font:'Space Grotesk', system-ui, sans-serif; }

.inline-form :is(input[type="password"], input[type="email"]){
  width:100%; font-family:var(--font-body); font-size:0.92rem; padding:0.55em 0.75em;
  margin-bottom:0.8rem; box-sizing:border-box;
  border:1px solid var(--line); border-radius:var(--radius); background:var(--card); color:var(--ink);
}

/* ---------- 1. TITRES ---------- */
/* toutes les polices autres que celle du thème : mêmes éléments, même famille */
:root:is([data-titres="bd"], [data-titres="classique"], [data-titres="moderne"]) :is(.author-header h1, .fiche h1, .settings h1, .carnet h1,
  .letter-head, .serie-head .s-nom, .carnet-groupe, .stat .n, .review-head,
  .set-head, .carnet-sec > .section-title){
  font-family:var(--titre-font);
}
:root:is([data-titres="bd"], [data-titres="classique"], [data-titres="moderne"]) :is(.set-head, .carnet-sec > .section-title){
  text-transform:none; letter-spacing:0; font-size:1.2rem; font-weight:700; color:var(--ink);
}
/* Bangers n'a qu'une graisse et se lit mieux un peu plus grande et espacée */
:root[data-titres="bd"] :is(.author-header h1, .fiche h1, .settings h1, .carnet h1){
  font-weight:400; letter-spacing:0.5px; font-size:clamp(1.9rem, 4.5vw, 2.6rem); line-height:1.05;
}
:root[data-titres="bd"] .letter-head{font-weight:400; font-size:2rem; letter-spacing:1px;}
:root[data-titres="bd"] .serie-head .s-nom{font-weight:400; font-size:1.45rem; letter-spacing:0.5px;}
:root[data-titres="bd"] .serie-head.hors .s-nom{font-size:1.25rem;}
:root[data-titres="bd"] :is(.carnet-groupe, .review-head){font-weight:400; font-size:1.45rem; letter-spacing:0.5px;}
:root[data-titres="bd"] .stat .n{font-weight:400; font-size:1.9rem; letter-spacing:0.5px;}
:root[data-titres="bd"] :is(.set-head, .carnet-sec > .section-title){font-weight:400; font-size:1.35rem; letter-spacing:0.5px;}
:root[data-titres="bd"] .c-note{font-family:var(--titre-font); font-weight:400; font-size:1.15rem; letter-spacing:0.5px;}
@media (max-width:760px){ :root[data-titres="bd"] .letter-head{font-size:1.7rem;} }
/* classique (serif) et moderne (grotesque) : graisse affirmée, tailles d'origine */
:root:is([data-titres="classique"], [data-titres="moderne"]) :is(.author-header h1, .fiche h1, .settings h1, .carnet h1){
  font-weight:700; letter-spacing:-0.01em;
}

/* titre du bandeau : la police BD (par défaut) ou la même que les titres */

/* ---------- 1 bis. BANDEAU (version 1.9) ----------
   Les règles « BD » sont celles de la barre du haut, plus haut dans cette feuille : chaque
   groupe ci-dessous ne fait que les remplacer sous son attribut. Couleurs = thème actif
   (--accent pour le fond, --accent-ink pour ce qui est posé directement dessus). */

/* police du titre : --brand-k corrige la taille, car à corps égal Anton paraît bien plus
   grand que Caveat ; la taille reste calculée sur la largeur d'écran (voir .brand) */
:root[data-bandeau="titres"]{ --brand-k:0.8; }
:root[data-bandeau="titres"][data-titres="bd"]{ --brand-k:1; }
:root[data-bandeau="affiche"]{ --brand-k:0.92; }
:root[data-bandeau="classique"]{ --brand-k:0.8; }
:root[data-bandeau="prestige"]{ --brand-k:0.8; }
:root[data-bandeau="elegant"]{ --brand-k:0.84; }
:root[data-bandeau="moderne"]{ --brand-k:0.8; }
:root[data-bandeau="sobre"]{ --brand-k:0.78; }
:root[data-bandeau="machine"]{ --brand-k:0.8; }
:root[data-bandeau="manuscrit"]{ --brand-k:1.12; }
:root[data-bandeau="titres"] .brand{font-family:var(--titre-font); font-weight:800; letter-spacing:0;}
:root[data-bandeau="titres"][data-titres="bd"] .brand{font-weight:400; letter-spacing:1px;}
:root[data-bandeau="titres"][data-titres="theme"] .brand{font-weight:700;}
:root[data-bandeau="affiche"] .brand{font-family:'Anton', 'Impact', sans-serif; font-weight:400; letter-spacing:0.5px;}
:root[data-bandeau="classique"] .brand{font-family:'Fraunces', Georgia, serif; font-weight:700; letter-spacing:-0.01em;}
:root[data-bandeau="prestige"] .brand{font-family:'Abril Fatface', 'Didot', Georgia, serif; font-weight:400; letter-spacing:0.3px;}
:root[data-bandeau="elegant"] .brand{font-family:'Spectral', Georgia, serif; font-weight:600; letter-spacing:0.01em;}
:root[data-bandeau="moderne"] .brand{font-family:'Space Grotesk', system-ui, sans-serif; font-weight:700; letter-spacing:-0.02em;}
:root[data-bandeau="sobre"] .brand{font-family:'Libre Franklin', system-ui, sans-serif; font-weight:700; letter-spacing:-0.01em;}
:root[data-bandeau="machine"] .brand{font-family:'Special Elite', 'Courier New', monospace; font-weight:400; letter-spacing:0;}
:root[data-bandeau="manuscrit"] .brand{font-family:'Caveat', 'Segoe Script', cursive; font-weight:700; letter-spacing:0;}
/* les majuscules espacent : on gagne un peu de place en casse normale */
:root[data-hdrcasse="normale"] .brand{text-transform:none;}
:root[data-hdrombre="douce"] .brand{text-shadow:0 2px 6px rgba(0,0,0,0.35);}
:root[data-hdrombre="aucune"] .brand{text-shadow:none;}

/* fond : trame BD (défaut), uni, dégradé ; hors BD, plus de gros filet mais une ombre légère */
:root:is([data-hdrfond="uni"], [data-hdrfond="degrade"]) .topbar{
  background-image:none; border-bottom:0;
  box-shadow:0 1px 0 rgba(0,0,0,0.10), 0 6px 18px rgba(0,0,0,0.10);
}
:root[data-hdrfond="degrade"] .topbar{
  background-image:linear-gradient(135deg, var(--accent) 0%, color-mix(in srgb, var(--accent) 68%, var(--ink)) 100%);
  background-size:auto;           /* sinon le dégradé se répète en carreaux de 11px, comme la trame */
}

/* champs : recherche, Format, Genre */
:root[data-hdrchamps="doux"] .field{
  border:1px solid var(--line); border-radius:min(var(--radius), 12px);
  box-shadow:0 1px 3px rgba(0,0,0,0.12), 0 4px 12px rgba(0,0,0,0.08);
}
:root[data-hdrchamps="doux"] :is(.field input, .field select){font-weight:500;}
:root[data-hdrchamps="arrondis"] .field{
  border:0; border-radius:999px; padding-left:18px; padding-right:16px;
  box-shadow:0 2px 6px rgba(0,0,0,0.16);
}
:root[data-hdrchamps="arrondis"] :is(.field input, .field select){font-weight:500;}
:root[data-hdrchamps="soulignes"] .field{
  background:transparent; color:var(--accent-ink);
  border:0; border-bottom:2px solid var(--accent-ink); border-radius:0;
  box-shadow:none; padding-left:2px; padding-right:2px;
}
:root[data-hdrchamps="soulignes"] .field .icon{color:var(--accent-ink); opacity:0.8;}
:root[data-hdrchamps="soulignes"] :is(.field input, .field select){color:var(--accent-ink);}
:root[data-hdrchamps="soulignes"] .field input::placeholder{color:var(--accent-ink); opacity:0.7;}
:root[data-hdrchamps="soulignes"] .search-clear{background:var(--accent-ink); color:var(--accent);}
@media (hover:hover) and (pointer:fine){
  :root[data-hdrchamps="soulignes"] .search-clear:hover{opacity:0.8; background:var(--accent-ink);}
}

/* pastilles de statut */
:root[data-hdrpastilles="douces"] .pill{
  border-color:transparent; background:var(--card); font-weight:600;
  box-shadow:0 1px 3px rgba(0,0,0,0.16);
}
:root[data-hdrpastilles="douces"] .pill.on{background:var(--ink); color:var(--card); border-color:var(--ink);}
:root[data-hdrpastilles="contour"] .pill{
  border:1.5px solid var(--accent-ink); background:transparent; color:var(--accent-ink); font-weight:600;
}
:root[data-hdrpastilles="contour"] .pill.on{background:var(--accent-ink); color:var(--accent); border-color:var(--accent-ink); font-weight:700;}

/* boutons ronds Carnet et Réglages */
:root[data-hdrboutons="doux"] .icon-btn{border-color:transparent; box-shadow:0 2px 8px rgba(0,0,0,0.18);}
:root[data-hdrboutons="contour"] .icon-btn{
  background:transparent; color:var(--accent-ink); border:2px solid var(--accent-ink); box-shadow:none;
}
:root[data-hdrboutons="discrets"] .icon-btn{
  background:transparent; color:var(--accent-ink); border-color:transparent; box-shadow:none;
}
:root[data-hdrboutons="discrets"] .icon-btn svg{width:25px; height:25px;}
@media (hover:hover) and (pointer:fine){
  :root:is([data-hdrboutons="contour"], [data-hdrboutons="discrets"]) .icon-btn:hover{
    background:color-mix(in srgb, var(--accent-ink) 14%, transparent);
  }
}

/* ---------- 2. CARTES ET FICHE ---------- */
:root[data-cartes="bd"] :is(.author-card, .book-card){
  border:var(--bd-m) solid var(--hdr-line); border-radius:var(--bd-r);
  box-shadow:var(--bd-sh-l); transition:transform .12s ease, box-shadow .12s ease;
}
:root[data-cartes="bd"] :is(.author-card, .book-card):hover{border-color:var(--hdr-line); box-shadow:var(--bd-sh-l); transform:none;}
@media (hover:hover) and (pointer:fine){
  :root[data-cartes="bd"] :is(.author-card, .book-card):hover{transform:translate(-2px, -2px); box-shadow:var(--bd-sh-xl);}
}
:root[data-cartes="bd"] .author-card .name, :root[data-cartes="bd"] .book-card h3{font-weight:800;}
:root[data-cartes="bd"] .book-card h3{font-family:var(--font-body);}
:root[data-cartes="bd"] :is(.mosaic .cover, .book-card .cover){border:var(--bd-s) solid var(--hdr-line); border-radius:var(--bd-r-sm);}
:root[data-cartes="bd"] .fiche{border:var(--bd-m) solid var(--hdr-line); border-radius:var(--bd-r); box-shadow:var(--bd-sh-xl);}
:root[data-cartes="bd"] .fiche .cover{border:var(--bd-m) solid var(--hdr-line); border-radius:var(--bd-r-sm); box-shadow:var(--bd-sh-l);}
:root[data-cartes="bd"] .magnify{border:var(--bd-s) solid var(--hdr-line); background:var(--card); box-shadow:var(--bd-sh-s);}
@media (max-width:760px){
  :root[data-cartes="bd"] :is(.author-card, .book-card){box-shadow:var(--bd-sh-m);}
  :root[data-cartes="bd"] .fiche{box-shadow:var(--bd-sh-l);}
}
/* épurées : à plat, sans ombre, un simple filet qui prend la couleur d'accent au survol */
:root[data-cartes="epurees"] :is(.author-card, .book-card, .fiche){box-shadow:none;}
:root[data-cartes="epurees"] :is(.author-card, .book-card):hover{box-shadow:none; transform:none;}
:root[data-cartes="epurees"] .fiche .cover{box-shadow:none;}

/* ---------- 3. PASTILLES ---------- */
:root[data-pastilles="bd"] .badge{
  border:var(--bd-s) solid var(--hdr-line); background:var(--chip); color:var(--ink);
  font-family:var(--font-body); font-weight:800; font-size:0.62rem; letter-spacing:0.04em;
  padding:0.22em 0.7em;
}
:root[data-pastilles="bd"] .badge.genre{background:var(--card); color:var(--sub);}
:root[data-pastilles="bd"] .badge.status{background:var(--card); color:var(--ink);}
:root[data-pastilles="bd"] .badge.fav{background:var(--accent); color:var(--accent-ink);}
:root[data-pastilles="bd"] .badge.inprogress{background:var(--accent-ink); color:var(--accent); border-color:var(--accent);}
:root[data-pastilles="bd"] .badge.rating{background:var(--ink); color:var(--card); border-color:var(--ink);}

/* ---------- 4. BOUTONS, CASES, CHAMPS ---------- */
:root[data-commandes="bd"] :is(.btn-main, .btn-mini){
  border:var(--bd-s) solid var(--hdr-line); box-shadow:var(--bd-sh-m); font-weight:800; cursor:pointer;
  transition:transform .08s ease, box-shadow .08s ease;
}
:root[data-commandes="bd"] :is(.btn-main, .btn-mini):active{transform:translate(2px, 2px); box-shadow:var(--bd-sh-s);}
:root[data-commandes="bd"] .nav-author{border:var(--bd-s) solid var(--hdr-line); box-shadow:var(--bd-sh-m); color:var(--ink); font-weight:700;}
:root[data-commandes="bd"] .lightbox-close{border:var(--bd-m) solid #111; box-shadow:3px 3px 0 #000; font-weight:800;}
:root[data-commandes="bd"] .toggle{border:var(--bd-s) solid var(--hdr-line); background:var(--card); box-shadow:var(--bd-sh-m); font-weight:600;}
:root[data-commandes="bd"] .toggle.active{border-color:var(--hdr-line); background:var(--chip); font-weight:800;}
:root[data-commandes="bd"] .segmented{border:var(--bd-s) solid var(--hdr-line); background:var(--card); box-shadow:var(--bd-sh-m);}
:root[data-commandes="bd"] .segmented button{font-weight:700; color:var(--ink);}
:root[data-commandes="bd"] .segmented button.on{background:var(--ink); color:var(--card);}
:root[data-commandes="bd"] .rate{border:var(--bd-s) solid var(--hdr-line); background:var(--card); color:var(--ink); box-shadow:var(--bd-sh-s);}
:root[data-commandes="bd"] .rate.fill{background:var(--chip); border-color:var(--hdr-line);}
:root[data-commandes="bd"] .rate.on{background:var(--accent); color:var(--accent-ink); border-color:var(--hdr-line);}
:root[data-commandes="bd"] .rate:active{transform:translate(1px, 1px); box-shadow:none;}
:root[data-commandes="bd"] :is(.review input[type="date"], .review textarea, .ano-fix input, .carnet-ctrls select,
  .inline-form input[type="text"], .inline-form input[type="password"], .inline-form input[type="email"]){
  border:var(--bd-s) solid var(--hdr-line); border-radius:var(--bd-r);
  background:var(--card); color:var(--ink); box-shadow:var(--bd-sh-m);
}
:root[data-commandes="bd"] .carnet-ctrls select{font-weight:600;}

/* ---------- 5. PANNEAUX ---------- */
:root[data-panneaux="bd"] :is(.stat, .theme-card, .ano-fam, .aide-fam, .hidden-list, .carnet-row){
  border:var(--bd-s) solid var(--hdr-line); border-radius:var(--bd-r); box-shadow:var(--bd-sh-m);
}
:root[data-panneaux="bd"] .stat .l{color:var(--ink);}
:root[data-panneaux="bd"] .bar{height:12px; border:var(--bd-s) solid var(--hdr-line); background:var(--card);}
:root[data-panneaux="bd"] :is(.ano-body, .aide-body){border-top:var(--bd-s) solid var(--hdr-line);}
:root[data-panneaux="bd"] :is(.ano-head, .aide-head){font-weight:700;}
:root[data-panneaux="bd"] .ano-head .n{border:var(--bd-s) solid var(--hdr-line); background:var(--chip); color:var(--ink); font-weight:700;}
:root[data-panneaux="bd"] .ano-opt{border:var(--bd-s) solid var(--hdr-line); border-radius:var(--bd-r); background:var(--card);}
:root[data-panneaux="bd"] .hidden-row{border-bottom:var(--bd-s) solid var(--hdr-line);}
:root[data-panneaux="bd"] :is(.inline-form, .review){border:var(--bd-s) solid var(--hdr-line); border-radius:var(--bd-r); background:var(--bg);}
:root[data-panneaux="bd"] .serie-strip{
  border:var(--bd-s) solid var(--hdr-line); border-left:7px solid var(--accent);
  border-radius:var(--bd-r); background:var(--card); box-shadow:var(--bd-sh-m);
}
:root[data-panneaux="bd"] .serie-strip .s-name, :root[data-panneaux="bd"] .c-titre, :root[data-panneaux="bd"] .theme-card .tp-name{font-weight:800;}
:root[data-panneaux="bd"] .theme-card.on{border-color:var(--hdr-line); box-shadow:0 0 0 3px var(--accent), var(--bd-sh-m);}
:root[data-panneaux="bd"] .theme-card .tp-meta{border-top:var(--bd-s) solid var(--hdr-line);}
:root[data-panneaux="bd"] .carnet-row{transition:transform .12s ease, box-shadow .12s ease;}
@media (hover:hover) and (pointer:fine){
  :root[data-panneaux="bd"] :is(.theme-card, .carnet-row):hover{transform:translate(-2px, -2px); box-shadow:var(--bd-sh-l); border-color:var(--hdr-line);}
  :root[data-panneaux="bd"] .theme-card.on:hover{box-shadow:0 0 0 3px var(--accent), var(--bd-sh-l);}
}
/* filets de séparation et index A–Z, qui structurent les pages comme les panneaux */
:root[data-panneaux="bd"] :is(.letter-head, .serie-head)::after,
:root[data-panneaux="bd"] .section-title .rule{height:var(--bd-s); background:var(--hdr-line); opacity:0.85;}
:root[data-panneaux="bd"] .az{border-bottom:var(--bd-s) solid var(--hdr-line);}
:root[data-panneaux="bd"] .az a{font-weight:700; color:var(--ink); border:var(--bd-s) solid transparent;}
:root[data-panneaux="bd"] .app-version{border-top:var(--bd-s) solid var(--hdr-line);}
:root[data-panneaux="bd"] :is(.back-link, .section-title){color:var(--ink);}
:root[data-panneaux="bd"] .back-link{font-weight:700;}
@media (hover:hover) and (pointer:fine){
  :root[data-panneaux="bd"] .az a:hover{border-color:var(--hdr-line);}
}

/* ---------- section « Style » des Réglages ---------- */
.style-grid{display:grid; grid-template-columns:minmax(0, 1fr) minmax(260px, 340px); gap:1.6rem; align-items:start;}
.style-rows{display:flex; flex-direction:column; gap:1rem;}
.style-row{display:flex; flex-direction:column; gap:0.4rem;}
.style-row .style-lab{font-size:0.8rem; font-weight:700; color:var(--ink);}
.style-row .style-hint{font-size:0.72rem; color:var(--sub); margin-top:-0.15rem;}
.style-row .segmented{flex-wrap:wrap; border-radius:18px; align-self:flex-start; max-width:100%;}
.style-presets{display:flex; flex-wrap:wrap; gap:0.6rem; align-items:center; margin-bottom:1.2rem;}
.style-presets .style-lab{font-size:0.8rem; color:var(--sub); margin-right:0.2rem;}
.style-apercu{position:sticky; top:72px; display:flex; flex-direction:column; gap:0.9rem;}
.style-apercu .apercu-lab{font-family:var(--font-mono); font-size:0.66rem; text-transform:uppercase; letter-spacing:0.1em; color:var(--sub);}
.style-apercu .apercu-titre{font-family:var(--titre-font); font-size:1.6rem; line-height:1.1; margin:0; color:var(--ink);}
:root[data-titres="bd"] .style-apercu .apercu-titre{letter-spacing:0.5px;}
:root:is([data-titres="classique"], [data-titres="moderne"]) .style-apercu .apercu-titre{font-weight:700;}
.style-apercu .book-card{pointer-events:none;}
/* mini-bandeau de l'aperçu : les vraies classes du bandeau, en plus petit */
.style-apercu .apercu-bandeau{padding:14px 14px 16px; border-radius:var(--bd-r); z-index:auto; pointer-events:none;}
.style-apercu .apercu-bandeau .brand-row{display:flex; align-items:center; gap:10px; flex-wrap:nowrap;}
.style-apercu .apercu-bandeau .brand{font-size:calc(var(--brand-k, 1) * 23px); min-width:0; overflow:hidden; text-overflow:clip;}
.style-apercu .apercu-bandeau .hdr-btns{margin-left:auto; gap:8px;}
.style-apercu .apercu-bandeau .icon-btn{width:34px; height:34px;}
.style-apercu .apercu-bandeau .icon-btn svg{width:18px; height:18px;}
.style-apercu .apercu-bandeau .controls{display:flex; flex-direction:column; align-items:stretch; gap:10px; margin-top:12px;}
.style-apercu .apercu-bandeau .field{flex:none; padding:8px 12px;}
.style-apercu .apercu-bandeau .apercu-saisie{font-size:14px; font-weight:600; flex:1; min-width:0; white-space:nowrap; overflow:hidden;}
.style-apercu .apercu-bandeau .search-clear{width:24px; height:24px; margin:0;}
.style-apercu .apercu-bandeau .pill{padding:7px 12px;}
.style-rows .style-groupe{font-family:var(--font-mono); font-size:0.68rem; text-transform:uppercase; letter-spacing:0.12em;
  color:var(--sub); margin:0.6rem 0 -0.2rem; padding-bottom:0.35rem; border-bottom:1px solid var(--line);}
.style-rows .style-groupe:first-child{margin-top:0;}
.style-apercu .apercu-cmd{display:flex; flex-wrap:wrap; gap:0.6rem; align-items:center;}
.style-apercu .stat{max-width:150px;}
@media (max-width:760px){
  .style-grid{grid-template-columns:minmax(0, 1fr);}
  .style-apercu{position:static; order:-1;}
}
/* boutons « Police du titre » : chacun dans sa police, à une taille qui les rend comparables */
.segmented[data-style="bandeau"] button{font-size:0.95rem; letter-spacing:0;}
.segmented[data-style="bandeau"] button[data-val="bd"]{letter-spacing:0.5px;}
.segmented[data-style="bandeau"] button[data-val="manuscrit"]{font-size:1.15rem; font-weight:700;}

/* ---------- Recherche (version 2.0) : auteurs trouvés et sagas dans les résultats ---------- */
.auteurs-trouves{margin-bottom:1.6rem;}
.author-card .sagas{display:block; margin-top:0.25rem; font-size:0.74rem; color:var(--sub);}
.book-card .saga-line{font-size:0.74rem; font-style:italic; color:var(--ink); opacity:0.78; margin:-0.3rem 0 0.5rem;}

/* Connexion sécurisée (version 3.0) : le formulaire garde l'allure des autres réglages */
.inline-form :is(input[type="password"], input[type="email"]):focus{outline:2px solid var(--accent); outline-offset:1px; border-color:var(--accent);}
#auth-form .row{margin-top:0.2rem;}

/* ---------- Accueil et résultats (version 3.1) ---------- */
/* L'en-tête collant porte l'index A–Z (le choix de présentation est dans les Réglages depuis la 3.5) */
.home-head{
  position:sticky; top:0; z-index:15;
  display:flex; flex-wrap:wrap; align-items:center; gap:0.4rem 0.8rem;
  padding:0.45rem 0.1rem; margin-bottom:1.4rem;
  background:var(--bg); border-bottom:1px solid var(--line);
}
:root .home-head > .az{position:static; flex:1 1 320px; margin:0; padding:0.1rem 0; border:0; background:none; z-index:auto;}
:root[data-panneaux="bd"] .home-head{border-bottom:var(--bd-s) solid var(--hdr-line);}

/* Liste compacte des auteurs : nom et nombre de livres, en colonnes */
.author-list{
  list-style:none; margin:0 0 1.6rem; padding:0;
  columns:3 15rem; column-gap:1.4rem;
}
.author-list li{break-inside:avoid;}
.author-list a{
  display:flex; align-items:baseline; gap:0.6rem;
  padding:0.42rem 0.2rem; border-bottom:1px solid var(--line);
  color:var(--ink); text-decoration:none; min-height:44px; box-sizing:border-box; align-items:center;
}
.author-list .nom{flex:1; min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap;}
.author-list .nb{font-family:var(--font-mono); font-size:0.75rem; color:var(--sub);}
@media (hover:hover) and (pointer:fine){ .author-list a:hover .nom{color:var(--accent); text-decoration:underline;} }

/* Menu « Trier par » à droite du nombre de résultats */
.results-head{flex-wrap:wrap;}
.tri-select{
  display:inline-flex; align-items:center; gap:0.45rem;
  font-family:var(--font-mono); font-size:0.68rem; letter-spacing:0.08em; text-transform:uppercase; color:var(--sub);
}
.tri-select select{
  font:inherit; font-family:var(--font-body); font-size:0.82rem; letter-spacing:0; text-transform:none;
  color:var(--ink); background:var(--card); border:1px solid var(--line); border-radius:999px;
  padding:0.35em 0.9em; min-height:36px;
}
.book-card .tri-line{font-family:var(--font-mono); font-size:0.68rem; color:var(--sub); margin:-0.3rem 0 0.5rem;}

/* =========================================================
   Présentations de l'accueil — version 3.3 (Éventail, Étagère, Mur)
   ========================================================= */

/* --- Éventail : couvertures en éventail, carte toujours pleine --- */
.fan-card{gap:0.55rem;}
.fan{position:relative; height:150px; margin:0.2rem 0 0.1rem;}
.fan-item{
  position:absolute; bottom:0; left:50%; width:88px; height:132px;
  transform:translateX(calc(-50% + var(--i) * 34px)) rotate(calc(var(--i) * 5deg));
  transform-origin:50% 120%;
  transition:transform .2s ease;
}
.fan-item .cover{width:100%; height:100%; border-radius:4px; box-shadow:0 3px 10px rgba(0,0,0,.22);}
.fan[style*="--n:1"] .fan-item{width:96px; height:144px;}
.fan-card:hover .fan-item{transform:translateX(calc(-50% + var(--i) * 40px)) rotate(calc(var(--i) * 7deg));}

/* --- Étagère : livres debout sur une planche --- */
.shelf{
  display:flex; flex-wrap:wrap; align-items:flex-end; column-gap:1.4rem; row-gap:0;
  padding:0 0.6rem;
  background:repeating-linear-gradient(to bottom, transparent 0 150px,
    color-mix(in srgb, var(--accent) 55%, #6b4f35) 150px 162px, transparent 162px 196px);
}
.shelf-author{display:flex; flex-direction:column; height:196px; justify-content:flex-start; min-width:72px;}
.shelf-books{height:150px; display:flex; align-items:flex-end; gap:3px; padding-bottom:0;}
.shelf-books .cover{width:72px; height:108px; border-radius:2px 4px 4px 2px; box-shadow:2px 0 4px rgba(0,0,0,.25), inset 3px 0 0 rgba(0,0,0,.12);}
.shelf-books .cover:nth-child(3n+2){height:116px;}
.shelf-books .cover:nth-child(3n){height:102px;}
.shelf-author:hover .cover{transform:translateY(-6px); transition:transform .15s ease;}
.shelf-more{align-self:flex-end; font-family:var(--font-mono); font-size:0.7rem; color:var(--sub); padding:0 0.2rem 0.3rem;}
.shelf-name{margin-top:14px; font-size:0.74rem; line-height:1.15; font-weight:600; width:0; min-width:100%; overflow:hidden; display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical;}

/* --- Mur : une grande couverture par auteur, pile derrière s'il en a plusieurs --- */
.wall{display:grid; grid-template-columns:repeat(auto-fill, minmax(140px, 1fr)); gap:1.3rem 1rem; padding:6px 8px 0 0;}
.wall-tile{position:relative; aspect-ratio:2 / 3; border-radius:6px; transition:transform .15s ease;}
.wall-tile .cover{position:absolute; inset:0; width:100%; height:100%; border-radius:6px; box-shadow:0 4px 14px rgba(0,0,0,.25); z-index:1;}
.wall-tile.pile2::before, .wall-tile.pile3::before, .wall-tile.pile3::after{
  content:""; position:absolute; inset:0; border-radius:6px; background:var(--card); border:1px solid var(--line);
  box-shadow:0 2px 6px rgba(0,0,0,.15);
}
.wall-tile.pile2::before, .wall-tile.pile3::before{transform:translate(5px, -5px);}
.wall-tile.pile3::after{transform:translate(10px, -10px); z-index:-1;}
.wall-tile:hover{transform:translateY(-4px);}
/* jaquette de remplacement : le titre en haut, le nom de l'auteur est déjà dans la légende */
.wall-tile .jacket{justify-content:flex-start; padding-top:24%;}
.wall-tile .jacket .j-author{display:none;}
.wall-cap{
  position:absolute; left:0; right:0; bottom:0; z-index:2; padding:2.2rem 0.6rem 0.55rem;
  border-radius:0 0 6px 6px; color:#fff; display:flex; flex-direction:column; gap:0.1rem;
  background:linear-gradient(to top, rgba(0,0,0,.82), rgba(0,0,0,.45) 60%, transparent);
}
.wall-cap .name{font-weight:700; font-size:0.86rem; line-height:1.2; text-shadow:0 1px 2px rgba(0,0,0,.5);}
.wall-cap .count{font-family:var(--font-mono); font-size:0.64rem; opacity:0.85;}

@media (max-width:640px){
  .wall{grid-template-columns:repeat(3, 1fr); gap:1rem 0.7rem;}
  .wall-cap{padding:1.6rem 0.4rem 0.4rem;}
  .wall-cap .name{font-size:0.72rem;}
  .fan-grid{grid-template-columns:repeat(2, 1fr);}
  .fan{height:118px;}
  .fan-item{width:66px; height:99px; transform:translateX(calc(-50% + var(--i) * 20px)) rotate(calc(var(--i) * 5deg));}
  .fan[style*="--n:1"] .fan-item{width:72px; height:108px;}
}
@media (max-width:640px){
  .home-head{flex-wrap:wrap;}
}
@media (max-width:640px){
  .shelf{column-gap:0.9rem; padding:0 0.2rem;}
  .shelf-books .cover{width:58px; height:87px;}
  .shelf-books .cover:nth-child(3n+2){height:93px;}
  .shelf-books .cover:nth-child(3n){height:82px;}
  .shelf-books .cover:nth-child(n+5){display:none;}
}

/* Réglages → Accueil des visiteurs (3.4) */
#accueil-site-seg, #presentation-seg{flex-wrap:wrap;}
.site-msg{font-size:0.8rem; color:var(--sub); margin:0.7rem 0 0; min-height:1.2em; max-width:62ch;}
.site-msg:empty{display:none;}
.site-msg.ok{color:var(--ok, #4a7a5c);}
.site-msg.err{color:var(--danger, #b2685a);}
@media (max-width:640px){
  /* six boutons : en grille de trois plutôt qu'une pilule qui se casse en deux lignes */
  #presentation-seg, #accueil-site-seg{display:grid; grid-template-columns:repeat(3, 1fr); border-radius:16px; width:100%;}
  #presentation-seg button, #accueil-site-seg button{text-align:center; border-radius:12px;}
}

/* =========================================================
   Page des sagas, graphiques du carnet, ordre des auteurs — version 3.6
   ========================================================= */
.set-sub{font-family:var(--font-mono); font-size:0.68rem; text-transform:uppercase; letter-spacing:0.12em;
  color:var(--sub); margin:1.5rem 0 0.7rem; padding-bottom:0.35rem; border-bottom:1px solid var(--line);}
#ordre-seg{flex-wrap:wrap;}
.ordre-note{font-size:0.8rem; color:var(--sub); margin:0 0 1.2rem;}
.ordre-note a{color:var(--accent); text-decoration:underline; text-underline-offset:2px;}

/* page des sagas : mêmes titres, commandes et lignes que le carnet */
.carnet-ctrls input[type="search"]{
  font-family:var(--font-body); font-size:0.88rem; text-transform:none; letter-spacing:0; color:var(--ink);
  padding:0.45em 0.75em; min-height:40px; width:16rem; max-width:100%; border:1px solid var(--line); border-radius:8px;
  background:var(--card); -webkit-appearance:none; appearance:none;
}
.carnet-row.saga-row{grid-template-columns:auto minmax(0,1fr); gap:0.4rem 1rem;}
.saga-covers{display:flex; padding-left:14px; width:144px;}
.saga-covers .cover{width:40px; height:59px; flex:none; margin-left:-14px; border-radius:3px;
  box-shadow:0 0 0 2px var(--card), 0 2px 5px rgba(0,0,0,0.18);}
.saga-txt{display:flex; flex-direction:column; gap:0.15rem; min-width:0;}
.saga-prog{display:flex; align-items:center; gap:0.6rem; margin-top:0.3rem; font-size:0.76rem; color:var(--sub);}
.saga-prog .bar{flex:0 1 150px; margin:0; height:6px;}
.saga-prog.fini .saga-lus{color:var(--accent); font-weight:700;}
.saga-manque{font-size:0.74rem; color:var(--sub);}
.sagas-page .lede{margin-bottom:1.2rem;}
.sagas-page .saga-bilan{margin-top:-0.6rem; font-size:0.85rem; color:var(--ink);}
.sagas-page .s-prive{font-size:0.75rem; color:var(--sub); opacity:0.8;}

/* graphiques du carnet */
.histos{display:grid; grid-template-columns:repeat(auto-fit, minmax(280px, 1fr)); gap:1rem; margin-top:1.4rem;}
.histo{margin:0; padding:0.9rem 1rem 0.85rem; border:1px solid var(--line); border-radius:var(--radius); background:var(--card); min-width:0;}
.histo figcaption{display:flex; align-items:center; justify-content:space-between; flex-wrap:wrap; gap:0.4rem 0.6rem;
  font-family:var(--font-mono); font-size:0.68rem; text-transform:uppercase; letter-spacing:0.08em; color:var(--sub); margin-bottom:0.4rem; min-height:32px;}
.histo select{font-family:var(--font-body); font-size:0.8rem; text-transform:none; letter-spacing:0; color:var(--ink);
  padding:0.3em 0.5em; min-height:32px; border:1px solid var(--line); border-radius:8px; background:var(--card); cursor:pointer;}
.h-plot{position:relative; padding:1.7rem 0 0 1.5rem;}
.h-max{position:absolute; left:0; top:1.7rem; transform:translateY(-50%); font-family:var(--font-mono); font-size:0.62rem; color:var(--sub);}
.h-bars{display:flex; align-items:flex-end; gap:2px; height:110px; border-bottom:1px solid var(--sub);
  background:linear-gradient(var(--line), var(--line)) top / 100% 1px no-repeat;}
.h-slot{flex:1 1 0; min-width:0; height:100%; display:flex; align-items:flex-end; justify-content:center; outline:none; cursor:default;}
.h-slot i{display:block; width:min(72%, 26px); height:var(--h); background:var(--accent); border-radius:4px 4px 0 0;}
.h-slot.on i, .h-slot:focus-visible i{filter:brightness(1.15) saturate(1.1);}
.h-slot:focus-visible{box-shadow:inset 0 -2px 0 var(--ink);}
.h-libs{display:flex; gap:2px; margin-top:0.3rem;}
.h-libs span{flex:1 1 0; min-width:0; text-align:center; font-family:var(--font-mono); font-size:0.62rem; color:var(--sub); white-space:nowrap;}
.h-tip{position:absolute; z-index:3; pointer-events:none; white-space:nowrap; font-size:0.72rem; font-weight:600;
  background:var(--ink); color:var(--card); padding:0.22em 0.6em; border-radius:6px;}
.h-resume{margin:0.6rem 0 0; font-size:0.78rem; color:var(--sub); line-height:1.5;}
.h-resume b{color:var(--ink);}
.h-note{display:block; font-size:0.72rem; opacity:0.85;}

:root[data-commandes="bd"] :is(.carnet-ctrls input[type="search"], .histo select){
  border:var(--bd-s) solid var(--hdr-line); border-radius:var(--bd-r); background:var(--card); color:var(--ink); box-shadow:var(--bd-sh-m);}
:root[data-commandes="bd"] .histo select{font-weight:600;}
:root[data-panneaux="bd"] .histo{border:var(--bd-s) solid var(--hdr-line); border-radius:var(--bd-r); box-shadow:var(--bd-sh-m);}
:root[data-panneaux="bd"] .saga-prog .bar{height:9px;}

@media (max-width:760px){
  #ordre-seg{display:grid; grid-template-columns:repeat(3, 1fr); border-radius:16px; width:100%;}
  #ordre-seg button{text-align:center; border-radius:12px; padding:0.45em 0.4em;}
  .carnet-row.saga-row{grid-template-columns:auto minmax(0,1fr);}
  .saga-covers{width:92px;}
  .saga-covers .cover:nth-child(n+4){display:none;}
  .carnet-ctrls input[type="search"]{width:100%;}
  .histo{padding:0.8rem 0.75rem;}
}