/* =====================================================================
   SOMMAIRE de style.css (rangé en 3.8)
   Les blocs se suivent dans cet ordre, qui compte : un bloc plus bas l'emporte
   sur un bloc plus haut à sélecteur égal. Chercher le titre en MAJUSCULES.
    1. THÈMES : variables de chaque thème ([data-theme="…"])
    2. MISE EN PAGE : bandeau, recherche, filtres, grille, vignettes, fiche, zoom
    3. RÉGLAGES : vignettes de thème
    4. MODE PROPRIÉTAIRE : champs, boutons, messages
    5. CORRECTIONS ET MASQUAGE (propriétaire) : éditeur de fiche et de tome
    6. FUSION ET DOUBLONS PROBABLES (propriétaire)
    7. AIDE (Réglages, mode propriétaire seulement)
    8. PAGES RÉGLAGES ET DOUBLONS : pages, sections repliables
    9. BARRE ALPHABÉTIQUE ET SÉPARATEURS DE LETTRE (grille)
   10. 3.0 : NOUVEAUTÉS, TRI, TOMES MANQUANTS, STATISTIQUES, puis connexion (3.1)
   11. 3.4 : PRÉSENTATIONS DE LA BIBLIOTHÈQUE (éventail, mur, étagère, liste)
   12. 3.5 : FICHE PRÉCÉDENTE / SUIVANTE (barre du haut de la fiche)
   13. 3.6 : MON AVIS (fiche) ET CARNET DE LECTURE
   14. 3.9 : STYLE (réglages d'aspect, puis la section Style des Réglages)
   ===================================================================== */

/* =====================================================================
   THÈMES
   Toute la mise en forme passe par les variables ci-dessous. Un thème = un
   bloc [data-theme="…"] qui redéfinit tout ou partie de ces variables.
   Le thème actif est posé sur <html> par themes.js. Les blocs
   s'appliquent aussi à n'importe quel élément portant data-theme : c'est
   ce qui permet aux aperçus de la page Réglages de s'afficher chacun dans
   son propre thème.
   ===================================================================== */

:root, [data-theme="kiosque"] {
  --bg: #f2e8d6;            /* fond de page */
  --sheet: #f2e8d6;         /* fond de la fiche détail / des réglages */
  --surface: #fff;          /* champs, boutons ronds, fonds de carte */
  --text: #1a1a1a;
  --text-soft: #555;
  --text-vol: #333;
  --muted: #8a8375;
  --line: #1a1a1a;          /* couleur des traits */
  --shadow-c: #1a1a1a;      /* couleur des ombres décalées */

  --accent: #c1272d;        /* bandeau du haut */
  --on-accent: #fff;        /* titre dans le bandeau */
  --accent-sub: #f6dca3;    /* compteurs dans le bandeau */
  --topbar-pattern: radial-gradient(rgba(0,0,0,0.16) 1.6px, transparent 1.6px);
  --topbar-pattern-size: 11px 11px;
  --topbar-border: 6px solid var(--line);
  --brand-shadow: 3px 3px 0 var(--shadow-c);

  --gold: #f4c542;          /* mise en avant : survol, pastille "en cours" */
  --on-gold: #1a1a1a;
  --tan: #f6dca3;           /* puces, tags de genre, tome sélectionné */
  --chip-text: #1a1a1a;
  --chip-on-bg: #1a1a1a;
  --chip-on-text: #fff;

  --card-info-bg: rgba(0,0,0,.78);
  --card-title: #fff;
  --card-author: #f6dca3;
  --card-count: #d8cfbe;
  --card-placeholder: #ddd;
  --card-oneshot: var(--gold);

  --read: #3f6b3f;  --on-read: #fff;
  --fav: #c1272d;   --on-fav: #fff;

  --hover: rgba(0,0,0,.04);
  --divider: #ccc;
  --divider-strong: rgba(0,0,0,.25);
  --overlay: rgba(20,17,14,.6);

  --bw-s: 2px;  --bw-m: 3px;  --bw-l: 4px;          /* épaisseurs de trait */
  --sh-card: 5px 5px 0 var(--shadow-c);
  --sh-field: 4px 4px 0 var(--shadow-c);
  --sh-btn: 3px 3px 0 var(--shadow-c);
  --sh-mini: 2px 2px 0 var(--shadow-c);
  --sh-sheet-m: 0 -6px 0 var(--shadow-c);
  --sh-sheet: 8px 8px 0 var(--shadow-c);
  --r-card: 6px;  --r-field: 8px;  --r-sheet: 14px;  --r-cover: 4px;

  --font-display: 'Bangers', 'Impact', cursive;
  --font-body: 'Archivo', system-ui, sans-serif;
  --display-weight: 400;
  --display-tracking: 1px;
  --brand-size: clamp(28px, 6vw, 48px);
  --sheet-title-size: 26px;
}

[data-theme="atelier-noir"] {
  --bg: #14120f; --sheet: #1a1814; --surface: #221f19;
  --text: #efe6d4; --text-soft: #c9bfac; --text-vol: #ddd3c0; --muted: #8f8676;
  --line: #e8dcc4; --shadow-c: #000;
  --accent: #1d1a15; --on-accent: #f4b942; --accent-sub: #c9bfac;
  --topbar-pattern: repeating-linear-gradient(45deg, rgba(255,255,255,.035) 0 2px, transparent 2px 9px);
  --topbar-pattern-size: auto;
  --topbar-border: 3px solid #f4b942;
  --brand-shadow: 3px 3px 0 #000;
  --gold: #f4b942; --on-gold: #14120f;
  --tan: #3a332a; --chip-text: #efe6d4; --chip-on-bg: #f4b942; --chip-on-text: #14120f;
  --card-info-bg: rgba(0,0,0,.84); --card-title: #f4ead6; --card-author: #f4b942; --card-count: #a89e8c;
  --card-placeholder: #2b2720;
  --read: #6a9a5f; --fav: #d94a3d;
  --hover: rgba(255,255,255,.06); --divider: #3a352c; --divider-strong: rgba(255,255,255,.2);
  --overlay: rgba(0,0,0,.72);
  --bw-s: 2px; --bw-m: 2px; --bw-l: 3px;
  --sh-card: 5px 5px 0 #000; --sh-field: 3px 3px 0 #000; --sh-btn: 3px 3px 0 #000; --sh-mini: 2px 2px 0 #000;
  --sh-sheet-m: 0 -4px 0 #000; --sh-sheet: 8px 8px 0 #000;
  --font-display: 'Bebas Neue', 'Impact', sans-serif;
  --display-tracking: 2px;
  --brand-size: clamp(32px, 7vw, 56px);
  --sheet-title-size: 30px;
}

[data-theme="bibliotheque"] {
  --card-oneshot: #9a7608;
  --bg: #f7f5f0; --sheet: #fbfaf7; --surface: #fff;
  --text: #22252b; --text-soft: #555b66; --text-vol: #3a3f48; --muted: #8c9099;
  --line: #dcd8d0; --shadow-c: rgba(30,35,45,.10);
  --accent: #2f3e4e; --on-accent: #fff; --accent-sub: #c3cfdb;
  --topbar-pattern: none; --topbar-border: 0 solid transparent; --brand-shadow: none;
  --gold: #c9a227; --on-gold: #fff;
  --tan: #ece8df; --chip-text: #2f3e4e; --chip-on-bg: #2f3e4e; --chip-on-text: #fff;
  --card-info-bg: #fff; --card-title: #22252b; --card-author: #6a7381; --card-count: #9aa0aa;
  --card-placeholder: #e8e5de;
  --read: #4b7b5c; --fav: #b5443b;
  --hover: rgba(47,62,78,.05); --divider: #e6e2da; --divider-strong: #d3cec4;
  --overlay: rgba(25,30,38,.45);
  --bw-s: 1px; --bw-m: 1px; --bw-l: 1px;
  --sh-card: 0 1px 2px rgba(30,35,45,.06), 0 8px 20px rgba(30,35,45,.07);
  --sh-field: 0 1px 2px rgba(30,35,45,.06);
  --sh-btn: 0 1px 2px rgba(30,35,45,.08);
  --sh-mini: 0 1px 3px rgba(30,35,45,.15);
  --sh-sheet-m: 0 -8px 30px rgba(30,35,45,.15);
  --sh-sheet: 0 20px 50px rgba(30,35,45,.18);
  --r-card: 10px; --r-field: 10px; --r-sheet: 18px; --r-cover: 6px;
  --font-display: 'Playfair Display', Georgia, serif;
  --font-body: 'Source Sans 3', system-ui, sans-serif;
  --display-weight: 800; --display-tracking: .5px;
  --brand-size: clamp(24px, 5vw, 40px);
  --sheet-title-size: 26px;
}

[data-theme="fiche-archive"] {
  --card-oneshot: #8a4b1f;
  --bg: #e9e0cc; --sheet: #f4ecda; --surface: #fbf6ea;
  --text: #3b3226; --text-soft: #5e5243; --text-vol: #4a3f31; --muted: #8d806b;
  --line: #8a7a5f; --shadow-c: rgba(90,70,40,.28);
  --accent: #6d5537; --on-accent: #f7efdc; --accent-sub: #e3d6b8;
  --topbar-pattern: repeating-linear-gradient(0deg, rgba(255,255,255,.07) 0 1px, transparent 1px 22px);
  --topbar-pattern-size: auto;
  --topbar-border: 3px double #3b3226;
  --brand-shadow: none;
  --gold: #c8a24a; --on-gold: #3b3226;
  --tan: #e3d6b8; --chip-text: #3b3226; --chip-on-bg: #6d5537; --chip-on-text: #f7efdc;
  --card-info-bg: #fbf6ea; --card-title: #3b3226; --card-author: #6d5537; --card-count: #8d806b;
  --card-placeholder: #ddd1b6;
  --read: #5d7a4a; --fav: #a8432f;
  --hover: rgba(109,85,55,.07); --divider: #d6c9ab; --divider-strong: rgba(59,50,38,.3);
  --overlay: rgba(40,30,18,.5);
  --bw-s: 1px; --bw-m: 1px; --bw-l: 1px;
  --sh-card: 2px 3px 0 var(--shadow-c); --sh-field: 1px 2px 0 var(--shadow-c);
  --sh-btn: 1px 2px 0 var(--shadow-c); --sh-mini: 1px 1px 0 var(--shadow-c);
  --sh-sheet-m: 0 -3px 0 var(--shadow-c); --sh-sheet: 4px 5px 0 var(--shadow-c);
  --r-card: 2px; --r-field: 2px; --r-sheet: 4px; --r-cover: 1px;
  --font-display: 'Special Elite', 'Courier New', monospace;
  --font-body: 'IBM Plex Sans', system-ui, sans-serif;
  --display-weight: 400; --display-tracking: 1px;
  --brand-size: clamp(22px, 5vw, 38px);
  --sheet-title-size: 22px;
}

[data-theme="ligne-claire"] {
  --card-oneshot: #c0342b;
  --bg: #fffdf6; --sheet: #fffdf6; --surface: #fff;
  --text: #1d1d1b; --text-soft: #4d4d48; --text-vol: #2c2c29; --muted: #8a8a82;
  --line: #1d1d1b; --shadow-c: transparent;
  --accent: #1b5fa8; --on-accent: #fff; --accent-sub: #ffe27a;
  --topbar-pattern: none; --topbar-border: 4px solid var(--line); --brand-shadow: none;
  --gold: #f6c445; --on-gold: #1d1d1b;
  --tan: #fbecc0; --chip-text: #1d1d1b; --chip-on-bg: #c0342b; --chip-on-text: #fff;
  --card-info-bg: #fff; --card-title: #1d1d1b; --card-author: #1b5fa8; --card-count: #77776f;
  --card-placeholder: #eef3f8;
  --read: #2f7d3a; --fav: #c0342b;
  --hover: rgba(27,95,168,.06); --divider: #d8d8cf; --divider-strong: rgba(29,29,27,.35);
  --overlay: rgba(10,30,60,.45);
  --bw-s: 2px; --bw-m: 2px; --bw-l: 3px;
  --sh-card: none; --sh-field: none; --sh-btn: none; --sh-mini: none; --sh-sheet-m: none; --sh-sheet: none;
  --r-card: 4px; --r-field: 6px; --r-sheet: 10px; --r-cover: 3px;
  --font-display: 'Fredoka', 'Trebuchet MS', sans-serif;
  --font-body: 'Nunito', system-ui, sans-serif;
  --display-weight: 700; --display-tracking: .5px;
  --brand-size: clamp(26px, 5.5vw, 44px);
  --sheet-title-size: 26px;
}

[data-theme="manga"] {
  --bg: #fafafa; --sheet: #fff; --surface: #fff;
  --text: #111; --text-soft: #444; --text-vol: #222; --muted: #888;
  --line: #111; --shadow-c: #111;
  --accent: #111; --on-accent: #fff; --accent-sub: #ff4d4d;
  --topbar-pattern: radial-gradient(rgba(255,255,255,.22) 1.1px, transparent 1.2px);
  --topbar-pattern-size: 6px 6px;
  --topbar-border: 5px solid #ff3b3b;
  --brand-shadow: 3px 3px 0 #ff3b3b;
  --gold: #ff3b3b; --on-gold: #fff;
  --tan: #ececec; --chip-text: #111; --chip-on-bg: #111; --chip-on-text: #fff;
  --card-info-bg: #111; --card-title: #fff; --card-author: #ff6b6b; --card-count: #aaa;
  --card-placeholder: #e5e5e5;
  --read: #111; --on-read: #fff; --fav: #ff3b3b;
  --hover: rgba(0,0,0,.05); --divider: #ddd; --divider-strong: rgba(0,0,0,.4);
  --overlay: rgba(0,0,0,.6);
  --bw-s: 2px; --bw-m: 3px; --bw-l: 3px;
  --sh-card: none; --sh-field: none; --sh-btn: none; --sh-mini: none; --sh-sheet-m: none; --sh-sheet: 6px 6px 0 #111;
  --r-card: 0; --r-field: 0; --r-sheet: 0; --r-cover: 0;
  --font-display: 'Anton', 'Impact', sans-serif;
  --display-weight: 400; --display-tracking: 1px;
  --brand-size: clamp(28px, 6vw, 50px);
  --sheet-title-size: 28px;
}

[data-theme="comics-us"] {
  --bg: #fff3c4; --sheet: #fffaf0; --surface: #fff;
  --text: #111; --text-soft: #3d3d3d; --text-vol: #222; --muted: #7a6f52;
  --line: #111; --shadow-c: #111;
  --accent: #ffd400; --on-accent: #e5243b; --accent-sub: #111;
  --topbar-pattern: radial-gradient(rgba(229,36,59,.28) 2px, transparent 2.2px);
  --topbar-pattern-size: 10px 10px;
  --topbar-border: 6px solid var(--line);
  --brand-shadow: 4px 4px 0 #111;
  --gold: #00a8e8; --on-gold: #fff;
  --tan: #bfe9ff; --chip-text: #111; --chip-on-bg: #e5243b; --chip-on-text: #fff;
  --card-info-bg: #111; --card-title: #fff; --card-author: #ffd400; --card-count: #bbb;
  --card-placeholder: #ffe680;
  --read: #1f9e4a; --fav: #e5243b;
  --bw-s: 3px; --bw-m: 3px; --bw-l: 4px;
  --sh-card: 7px 7px 0 var(--shadow-c); --sh-field: 5px 5px 0 var(--shadow-c);
  --sh-btn: 4px 4px 0 var(--shadow-c); --sh-sheet: 10px 10px 0 var(--shadow-c);
  --r-card: 0; --r-field: 0; --r-sheet: 0; --r-cover: 0;
  --font-display: 'Luckiest Guy', 'Impact', cursive;
  --display-weight: 400; --display-tracking: 1.5px;
  --brand-size: clamp(26px, 6vw, 46px);
  --sheet-title-size: 24px;
}

[data-theme="western"] {
  --bg: #e8d5b0; --sheet: #f1e2c2; --surface: #f8edd4;
  --text: #3a2414; --text-soft: #5c3f28; --text-vol: #45301d; --muted: #8b6f52;
  --line: #3a2414; --shadow-c: rgba(58,36,20,.55);
  --accent: #7a2e14; --on-accent: #f6e9cc; --accent-sub: #f0c987;
  --topbar-pattern: repeating-linear-gradient(90deg, rgba(0,0,0,.06) 0 2px, transparent 2px 15px);
  --topbar-pattern-size: auto;
  --topbar-border: 5px solid #3a2414;
  --brand-shadow: 2px 3px 0 rgba(0,0,0,.4);
  --gold: #d9a441; --on-gold: #3a2414;
  --tan: #e2c999; --chip-text: #3a2414; --chip-on-bg: #3a2414; --chip-on-text: #f6e9cc;
  --card-info-bg: rgba(58,36,20,.86); --card-title: #f8edd4; --card-author: #f0c987; --card-count: #d4bd96;
  --card-placeholder: #d9c096;
  --read: #5b7a3a; --fav: #a8321a;
  --hover: rgba(58,36,20,.06); --divider: #cdb48a; --divider-strong: rgba(58,36,20,.35);
  --overlay: rgba(40,22,10,.55);
  --bw-s: 2px; --bw-m: 2px; --bw-l: 3px;
  --sh-card: 4px 4px 0 var(--shadow-c); --sh-field: 3px 3px 0 var(--shadow-c);
  --sh-btn: 2px 2px 0 var(--shadow-c); --sh-mini: 2px 2px 0 var(--shadow-c);
  --sh-sheet-m: 0 -4px 0 var(--shadow-c); --sh-sheet: 6px 6px 0 var(--shadow-c);
  --r-card: 3px; --r-field: 4px; --r-sheet: 8px; --r-cover: 2px;
  --font-display: 'Rye', 'Georgia', serif;
  --font-body: 'Lora', Georgia, serif;
  --display-weight: 400; --display-tracking: 1px;
  --brand-size: clamp(22px, 5vw, 38px);
  --sheet-title-size: 22px;
}

[data-theme="neon-sf"] {
  --bg: #0a0f1f; --sheet: #0f1630; --surface: #121a33;
  --text: #e6ecff; --text-soft: #b4c0e6; --text-vol: #cdd6f4; --muted: #7d8ab3;
  --line: #2b3a6b; --shadow-c: rgba(0,0,0,.5);
  --accent: #0f1630; --on-accent: #22d3ee; --accent-sub: #f0abfc;
  --topbar-pattern: linear-gradient(rgba(34,211,238,.09) 1px, transparent 1px), linear-gradient(90deg, rgba(34,211,238,.09) 1px, transparent 1px);
  --topbar-pattern-size: 22px 22px;
  --topbar-border: 1px solid rgba(34,211,238,.5);
  --brand-shadow: 0 0 14px rgba(34,211,238,.75);
  --gold: #22d3ee; --on-gold: #06101f;
  --tan: #1c2650; --chip-text: #e6ecff; --chip-on-bg: #f0abfc; --chip-on-text: #0a0f1f;
  --card-info-bg: rgba(6,10,24,.88); --card-title: #e6ecff; --card-author: #22d3ee; --card-count: #8f9bc6;
  --card-placeholder: #1a2346;
  --read: #34d399; --on-read: #06101f; --fav: #f472b6; --on-fav: #0a0f1f;
  --hover: rgba(34,211,238,.07); --divider: #24305a; --divider-strong: rgba(34,211,238,.35);
  --overlay: rgba(2,5,15,.75);
  --bw-s: 1px; --bw-m: 1px; --bw-l: 1px;
  --sh-card: 0 0 0 1px rgba(34,211,238,.18), 0 10px 28px rgba(0,0,0,.55);
  --sh-field: 0 0 0 1px rgba(34,211,238,.15);
  --sh-btn: 0 0 10px rgba(34,211,238,.25);
  --sh-mini: 0 0 6px rgba(34,211,238,.35);
  --sh-sheet-m: 0 -10px 40px rgba(0,0,0,.6);
  --sh-sheet: 0 0 0 1px rgba(34,211,238,.25), 0 24px 60px rgba(0,0,0,.6);
  --r-card: 10px; --r-field: 10px; --r-sheet: 16px; --r-cover: 8px;
  --font-display: 'Exo 2', system-ui, sans-serif;
  --font-body: 'Exo 2', system-ui, sans-serif;
  --display-weight: 800; --display-tracking: 2px;
  --brand-size: clamp(22px, 5vw, 38px);
  --sheet-title-size: 24px;
}

[data-theme="pastel"] {
  --card-oneshot: #8a6fd1;
  --bg: #fff6f9; --sheet: #fffafc; --surface: #fff;
  --text: #4a3f5c; --text-soft: #6e6380; --text-vol: #574b6a; --muted: #a49bb3;
  --line: #ecd6e3; --shadow-c: #f3cfe0;
  --accent: #ffb3c8; --on-accent: #7a3d63; --accent-sub: #7a3d63;
  --topbar-pattern: radial-gradient(rgba(255,255,255,.55) 2px, transparent 2.2px);
  --topbar-pattern-size: 14px 14px;
  --topbar-border: 0 solid transparent;
  --brand-shadow: 2px 2px 0 #fff;
  --gold: #ffd27f; --on-gold: #4a3f5c;
  --tan: #d8f3e8; --chip-text: #4a3f5c; --chip-on-bg: #b9a3f0; --chip-on-text: #fff;
  --card-info-bg: #fff; --card-title: #4a3f5c; --card-author: #c46b8f; --card-count: #a49bb3;
  --card-placeholder: #fde4ee;
  --read: #6cc49a; --fav: #ff7a9c;
  --hover: rgba(185,163,240,.12); --divider: #f0dde8; --divider-strong: #e6c9da;
  --overlay: rgba(74,63,92,.4);
  --bw-s: 2px; --bw-m: 2px; --bw-l: 2px;
  --sh-card: 0 5px 0 var(--shadow-c); --sh-field: 0 3px 0 var(--shadow-c);
  --sh-btn: 0 3px 0 var(--shadow-c); --sh-mini: 0 2px 0 var(--shadow-c);
  --sh-sheet-m: 0 -6px 0 var(--shadow-c); --sh-sheet: 0 8px 0 var(--shadow-c);
  --r-card: 16px; --r-field: 14px; --r-sheet: 24px; --r-cover: 10px;
  --font-display: 'Baloo 2', 'Trebuchet MS', sans-serif;
  --font-body: 'Nunito', system-ui, sans-serif;
  --display-weight: 800; --display-tracking: .5px;
  --brand-size: clamp(26px, 5.5vw, 44px);
  --sheet-title-size: 26px;
}

/* =====================================================================
   MISE EN PAGE (ne contient plus aucune couleur en dur : tout vient
   des variables du thème)
   ===================================================================== */

* { box-sizing: border-box; }

html, body {
  margin: 0;
  background: var(--bg);
  color: var(--text);
  font-family: var(--font-body);
}
/* Pas de défilement horizontal. Sur <body>, « hidden » en ferait une zone de défilement à
   part, ce qui casse les éléments collants (barre alphabétique) : on y met « clip », qui
   coupe ce qui dépasse sans créer de zone de défilement. */
html { overflow-x: hidden; }
body { overflow-x: clip; }

.topbar {
  background-color: var(--accent);
  background-image: var(--topbar-pattern);
  background-size: var(--topbar-pattern-size, auto);
  border-bottom: var(--topbar-border);
  padding: 20px 20px 22px;
}

.topbar-inner { max-width: 1400px; margin: 0 auto; }

.brand-row {
  display: flex;
  align-items: baseline;
  gap: 16px;
  flex-wrap: wrap;
}

.brand {
  font-family: var(--font-display);
  font-weight: var(--display-weight);
  font-size: var(--brand-size);
  color: var(--on-accent);
  letter-spacing: var(--display-tracking);
  margin: 0;
  text-shadow: var(--brand-shadow);
  text-transform: uppercase;    /* 3.9 : le titre est écrit « Ma Bibliothèque BD » ; Réglages → Style peut le laisser tel quel */
}

.stats {
  font-size: 13px;
  font-weight: 700;
  color: var(--accent-sub);
}

.gear-btn {
  margin-left: auto;
  align-self: center;
  width: 42px; height: 42px;
  flex-shrink: 0;
  border-radius: 50%;
  border: var(--bw-m) solid var(--line);
  background: var(--surface);
  color: var(--text);
  display: flex; align-items: center; justify-content: center;
  cursor: pointer;
  padding: 0;
  box-shadow: var(--sh-btn);
  transition: transform .12s ease;
}
.gear-btn svg { width: 22px; height: 22px; transition: transform .4s ease; }
.gear-btn:hover svg { transform: rotate(60deg); }
.gear-btn:active { transform: scale(.94); }

.controls {
  display: flex;
  gap: 12px;
  margin-top: 18px;
  flex-wrap: wrap;
  align-items: center;
}

.field {
  display: flex;
  align-items: center;
  gap: 10px;
  background: var(--surface);
  border: var(--bw-m) solid var(--line);
  border-radius: var(--r-field);
  padding: 10px 14px;
  flex: 1 1 220px;
  min-width: 0;
  box-shadow: var(--sh-field);
}

.field .icon { width: 17px; height: 17px; color: var(--muted); flex-shrink: 0; }

.field input {
  border: none;
  outline: none;
  font-family: var(--font-body);
  font-size: 15px;
  font-weight: 600;
  width: 100%;
  min-width: 0;
  background: transparent;
  color: var(--text);
}
.field input::placeholder { color: var(--muted); }

.field-select select {
  border: none;
  outline: none;
  font-family: var(--font-body);
  font-size: 14px;
  font-weight: 600;
  width: 100%;
  min-width: 0;
  background: transparent;
  color: var(--text);
  cursor: pointer;
  appearance: none;
  -webkit-appearance: none;
}
.field-select select option { background: var(--surface); color: var(--text); }
.field-select { flex: 0 1 190px; }

.chips { display: flex; gap: 8px; flex-wrap: wrap; }

.chip {
  border: var(--bw-s) solid var(--line);
  background: var(--tan);
  color: var(--chip-text);
  font-size: 12.5px;
  font-weight: 800;
  padding: 9px 14px;
  border-radius: 999px;
  cursor: pointer;
  font-family: var(--font-body);
  transition: transform .08s ease;
}
.chip:active { transform: scale(0.95); }
.chip-sep { width: 2px; align-self: stretch; background: var(--divider-strong); border-radius: 2px; margin: 4px 2px; }
.chip[data-active="true"] {
  background: var(--chip-on-bg);
  color: var(--chip-on-text);
  border-color: var(--chip-on-bg);
}

main { max-width: 1400px; margin: 0 auto; padding: 32px 20px 80px; }

.grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(148px, 1fr));
  gap: 22px;
}

.card {
  cursor: pointer;
  border: var(--bw-l) solid var(--line);
  border-radius: var(--r-card);
  box-shadow: var(--sh-card);
  overflow: hidden;
  background: var(--surface);
  display: flex;
  flex-direction: column;
  transition: transform .12s ease;
  position: relative;
}
.card:hover { transform: translateY(-3px); }
/* 2.8 : vignette atteinte au clavier */
.card:focus { outline: none; }
.card:focus-visible { outline: 3px solid var(--text); outline-offset: 3px; transform: translateY(-3px); }
.sheet-title:focus { outline: none; }

.card-cover-wrap { position: relative; aspect-ratio: 500 / 680; background: var(--card-placeholder); }
.card-cover-wrap img { width: 100%; height: 100%; object-fit: cover; display: block; }

.card-badges { position: absolute; top: 6px; right: 6px; display: flex; flex-direction: column; gap: 4px; align-items: flex-end; }
.badge {
  font-size: 10px;
  font-weight: 800;
  padding: 3px 7px;
  border-radius: 999px;
  border: var(--bw-s) solid var(--line);
  background: var(--gold);
  color: var(--on-gold);
}
.badge.read { background: var(--read); color: var(--on-read); }
.badge.inprogress { background: var(--gold); color: var(--on-gold); }
.badge.fav { background: var(--fav); color: var(--on-fav); }
.badge.private { background: var(--text); color: var(--bg); }          /* 2.9 : fiche réservée au propriétaire */

.magnify-btn {
  width: 24px; height: 24px;
  flex-shrink: 0;
  border-radius: 50%;
  border: var(--bw-s) solid var(--line);
  background: var(--surface);
  color: var(--text);
  cursor: pointer;
  display: flex; align-items: center; justify-content: center;
  padding: 0;
  box-shadow: var(--sh-mini);
  transition: transform .08s ease;
}
.magnify-btn:hover { background: var(--gold); color: var(--on-gold); }
.magnify-btn:active { transform: translate(1px,1px); }
.magnify-btn svg { width: 13px; height: 13px; }

.card-info { background: var(--card-info-bg); padding: 9px 10px; flex: 1; }
.card-title { color: var(--card-title); font-size: 12.5px; font-weight: 700; line-height: 1.2; }
.card-author { color: var(--card-author); font-size: 10.5px; margin-top: 3px; }
.card-count { color: var(--card-count); font-size: 10px; margin-top: 2px; }
.card-count.oneshot { color: var(--card-oneshot); font-weight: 800; letter-spacing: .3px; }

.empty-state {
  text-align: center;
  padding: 60px 20px;
  font-size: 15px;
  color: var(--muted);
  font-weight: 600;
}

.sync-note {
  text-align: center;
  margin-top: 30px;
  font-size: 11.5px;
  color: var(--muted);
  min-height: 16px;
}

.overlay {
  position: fixed; inset: 0;
  background: var(--overlay);
  display: flex; align-items: flex-end; justify-content: center;
  z-index: 50;
}
.overlay[hidden] { display: none; }
@media (min-width: 720px) {
  .overlay { align-items: center; padding: 20px; }
}

.sheet {
  background: var(--sheet);
  color: var(--text);
  border: var(--bw-l) solid var(--line);
  border-radius: var(--r-sheet) var(--r-sheet) 0 0;
  width: 100%;
  max-width: 640px;
  max-height: 88vh;
  overflow-y: auto;
  position: relative;
  box-shadow: var(--sh-sheet-m);
  overflow-x: hidden;         /* 3.5 : le petit glissement d'une fiche à l'autre ne fait pas apparaître de barre */
}
@media (min-width: 720px) {
  .sheet { border-radius: var(--r-sheet); box-shadow: var(--sh-sheet); }
}

.sheet-close {
  position: absolute; top: 14px; right: 14px;
  width: 36px; height: 36px;
  border-radius: 50%;
  border: var(--bw-m) solid var(--line);
  background: var(--surface);
  color: var(--text);
  display: flex; align-items: center; justify-content: center;
  cursor: pointer;
  z-index: 2;
}
.sheet-close svg { width: 18px; height: 18px; }

.sheet-body {
  display: flex;
  flex-direction: column;
  padding: 4px 22px 22px;     /* 3.5 : le haut de la fiche est la barre ‹ › ✕ (.sheet-top) */
  gap: 18px;
}
@media (min-width: 560px) {
  .sheet-body { flex-direction: row; align-items: flex-start; }
}

.sheet-cover-wrap {
  position: relative;
  flex-shrink: 0;
  align-self: center;
}
@media (min-width: 560px) { .sheet-cover-wrap { align-self: flex-start; } }

.sheet-cover {
  width: 150px;
  aspect-ratio: 500/680;
  object-fit: cover;
  border: var(--bw-m) solid var(--line);
  border-radius: var(--r-cover);
  display: block;
}

.sheet-cover-wrap .magnify-btn {
  position: absolute;
  top: 8px;
  right: 8px;
  width: 30px;
  height: 30px;
}
.sheet-cover-wrap .magnify-btn svg { width: 16px; height: 16px; }
.sheet-cover-wrap .magnify-btn[hidden] { display: none; }

.sheet-info { flex: 1; min-width: 0; }

.sheet-title {
  font-family: var(--font-display);
  font-weight: var(--display-weight);
  letter-spacing: calc(var(--display-tracking) / 2);
  font-size: var(--sheet-title-size);
  color: var(--text);
  line-height: 1.1;
  margin: 0;
}
.sheet-author { font-size: 13.5px; font-weight: 700; color: var(--text-soft); margin-top: 4px; }
.sheet-meta { font-size: 12.5px; font-weight: 700; color: var(--text); margin-top: 10px; }

.sheet-genres { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 10px; }
.sheet-genres[hidden] { display: none; }
.genre-tag {
  font-size: 11px;
  font-weight: 800;
  padding: 4px 10px;
  border-radius: 999px;
  border: var(--bw-s) solid var(--line);
  background: var(--tan);
  color: var(--chip-text);
}

.sheet-actions { display: flex; gap: 10px; margin-top: 16px; flex-wrap: wrap; }

.btn {
  font-family: var(--font-body);
  font-size: 12.5px;
  font-weight: 800;
  padding: 10px 14px;
  border-radius: var(--r-field);
  border: var(--bw-m) solid var(--line);
  cursor: pointer;
  background: var(--surface);
  color: var(--text);
  box-shadow: var(--sh-btn);
}
.btn:active { transform: translate(1px,1px); }
.btn-outline[data-on="true"] { background: var(--chip-on-bg); color: var(--chip-on-text); border-color: var(--chip-on-bg); }
#btn-fav[data-on="true"] { background: var(--fav); color: var(--on-fav); border-color: var(--line); }

.sheet-volumes { margin-top: 18px; }
.sheet-volumes-label { font-size: 11px; letter-spacing: .4px; font-weight: 800; color: var(--muted); text-transform: uppercase; margin-bottom: 8px; }

.volume-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 5px; max-height: 320px; overflow-y: auto; }
.vol-row {
  font-size: 12.5px;
  color: var(--text-vol);
  padding: 5px 6px 5px 4px;
  border-bottom: 1px dotted var(--divider);
  border-radius: 6px;
  display: flex;
  align-items: center;
  gap: 8px;
  cursor: pointer;
}
.vol-row:hover { background: var(--hover); }
.vol-row.active { background: var(--tan); color: var(--chip-text); }
.vol-row.is-read .vol-label { color: var(--muted); text-decoration: line-through; text-decoration-color: var(--muted); }
.vol-row .num { color: var(--fav); font-weight: 800; flex-shrink: 0; min-width: 1.6em; }
.vol-row .num.hs { font-size: .85em; }                                  /* 2.9 : hors-série */
.vol-row .vol-label { flex: 1; min-width: 0; }

.vol-check {
  width: 22px; height: 22px;
  flex-shrink: 0;
  border-radius: 50%;
  border: var(--bw-s) solid var(--line);
  background: var(--surface);
  color: var(--on-read);
  font-size: 12px;
  font-weight: 800;
  line-height: 1;
  cursor: pointer;
  display: flex; align-items: center; justify-content: center;
  padding: 0;
}
.vol-row.is-read .vol-check { background: var(--read); border-color: var(--read); }

@media (max-width: 420px) {
  .grid { grid-template-columns: repeat(auto-fill, minmax(120px, 1fr)); gap: 14px; }
  .card-title { font-size: 11.5px; }
}

/* zoom de couverture : volontairement identique dans tous les thèmes
   (fond quasi noir, pour regarder l'image et rien d'autre) */
.zoom-overlay {
  position: fixed; inset: 0;
  background: rgba(10,8,6,.9);
  display: flex; align-items: center; justify-content: center;
  padding: 30px;
  z-index: 60;
}
.zoom-overlay[hidden] { display: none; }

.zoom-img {
  max-width: 100%;
  max-height: 100%;
  border: 4px solid #fff;
  border-radius: 6px;
  box-shadow: 0 10px 40px rgba(0,0,0,.5);
}

.zoom-close {
  position: absolute; top: 18px; right: 18px;
  width: 40px; height: 40px;
  border-radius: 50%;
  border: 3px solid #fff;
  background: rgba(0,0,0,.5);
  color: #fff;
  display: flex; align-items: center; justify-content: center;
  cursor: pointer;
}
.zoom-close svg { width: 18px; height: 18px; }

/* =====================================================================
   RÉGLAGES
   ===================================================================== */

.settings-h {
  font-size: 12px; letter-spacing: .5px; font-weight: 800; text-transform: uppercase;
  color: var(--muted); margin: 0 0 4px;
}
.settings-hint { font-size: 12.5px; color: var(--text-soft); margin: 0 0 14px; }

.theme-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
  gap: 14px;
}

/* Chaque carte porte son propre data-theme : elle se dessine dans son thème. */
.theme-card {
  font: inherit;
  text-align: left;
  padding: 0;
  cursor: pointer;
  background: var(--bg);
  color: var(--text);
  border: var(--bw-m) solid var(--line);
  border-radius: var(--r-card);
  box-shadow: var(--sh-btn);
  overflow: hidden;
  display: flex; flex-direction: column;
  position: relative;
  transition: transform .12s ease;
}
.theme-card:hover { transform: translateY(-2px); }
.theme-card .tc-bar {
  background-color: var(--accent);
  background-image: var(--topbar-pattern);
  background-size: var(--topbar-pattern-size, auto);
  border-bottom: var(--topbar-border);
  padding: 9px 10px 8px;
  font-family: var(--font-display);
  font-weight: var(--display-weight);
  letter-spacing: var(--display-tracking);
  color: var(--on-accent);
  text-shadow: var(--brand-shadow);
  font-size: 17px;
  line-height: 1.1;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.theme-card .tc-body { padding: 10px; display: flex; gap: 7px; align-items: flex-end; }
.theme-card .tc-mini {
  flex: 1;
  aspect-ratio: 5 / 7;
  background: var(--card-placeholder);
  border: var(--bw-s) solid var(--line);
  border-radius: calc(var(--r-card) / 2);
  box-shadow: var(--sh-mini);
  position: relative;
  overflow: hidden;
}
.theme-card .tc-mini::after {
  content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 28%;
  background: var(--card-info-bg);
}
.theme-card .tc-mini:nth-child(2) { background: var(--gold); }
.theme-card .tc-mini:nth-child(3) { background: var(--tan); }
.theme-card .tc-foot { padding: 0 10px 10px; font-family: var(--font-body); }
.theme-card .tc-name { font-weight: 800; font-size: 13px; color: var(--text); }
.theme-card .tc-desc { font-size: 11px; color: var(--text-soft); margin-top: 1px; line-height: 1.25; }
.theme-card .tc-check {
  position: absolute; top: 6px; right: 6px;
  width: 22px; height: 22px; border-radius: 50%;
  background: var(--gold); color: var(--on-gold);
  border: var(--bw-s) solid var(--line);
  display: none; align-items: center; justify-content: center;
  font-size: 13px; font-weight: 800;
}
.theme-card[aria-pressed="true"] { outline: 3px solid var(--gold); outline-offset: 2px; }
.theme-card[aria-pressed="true"] .tc-check { display: flex; }


/* =====================================================================
   MODE PROPRIÉTAIRE
   ===================================================================== */
/* Tout ce qui montre ou modifie un statut est réservé au propriétaire. */
html:not(.is-owner) .owner-only { display: none !important; }

.owner-status { font-size: 13px; color: var(--text); margin: 0 0 12px; line-height: 1.4; }
.owner-status.on { border-left: 4px solid var(--read); padding-left: 10px; }
.owner-row { display: flex; gap: 10px; flex-wrap: wrap; }
.owner-form { display: flex; gap: 10px; flex-wrap: wrap; align-items: center; margin-bottom: 6px; }
.owner-input {
  flex: 1 1 180px; min-width: 0;
  font: 600 14px var(--font-body);
  padding: 10px 12px;
  border: var(--bw-m) solid var(--line);
  border-radius: var(--r-field);
  background: var(--surface); color: var(--text);
  box-shadow: var(--sh-field);
}
.btn-ghost { background: transparent; box-shadow: none; }
.owner-msg { font-size: 12.5px; font-weight: 700; min-height: 16px; margin: 4px 0 0; color: var(--text-soft); }
.owner-msg.err { color: var(--fav); }
.settings-hint code, .owner-status code { font-size: 12px; }

/* =====================================================================
   CORRECTIONS ET MASQUAGE (propriétaire)
   ===================================================================== */
.sheet-orig { font-size: 11.5px; font-style: italic; color: var(--muted); margin: 6px 0 0; line-height: 1.35; }
.sheet-orig[hidden], .sheet-edit[hidden], .edit-confirm[hidden],
#edit-hide[hidden], #edit-reset[hidden], .toast[hidden] { display: none; }
/* 2.9 : partager une fiche, fiche réservée au propriétaire */
.sheet-share { margin-top: 10px; }
.share-btn { display: inline-flex; align-items: center; gap: 8px; min-height: 44px; box-sizing: border-box; }
.share-btn svg { width: 18px; height: 18px; flex-shrink: 0; }
.edit-private { margin-top: 14px; padding-top: 12px; border-top: var(--bw-s) dashed var(--line); }
.edit-private .settings-hint { margin: 6px 0 0; }

.sheet-edit {
  margin-top: 14px; padding: 14px;
  border: var(--bw-s) dashed var(--line); border-radius: var(--r-field);
  background: var(--hover);
}
.edit-form { display: flex; flex-direction: column; gap: 10px; }
.edit-field { display: flex; flex-direction: column; gap: 4px; flex: 1 1 0; min-width: 0; }
.edit-field > span { font-size: 11px; letter-spacing: .4px; font-weight: 800; color: var(--muted); text-transform: uppercase; }
.edit-field .owner-input { flex: none; width: 100%; box-sizing: border-box; }
.edit-genres { display: flex; gap: 10px; flex-wrap: wrap; }
.edit-genres .edit-field { flex: 1 1 140px; }
.edit-buttons { display: flex; gap: 10px; flex-wrap: wrap; margin-top: 2px; }
.edit-danger { margin-top: 14px; padding-top: 12px; border-top: 1px dotted var(--divider-strong); }
.edit-danger .settings-hint { margin: 8px 0 0; }
.edit-confirm { display: inline-flex; gap: 8px; align-items: center; flex-wrap: wrap; font-size: 13px; font-weight: 700; color: var(--text); }
.btn-danger { background: var(--fav); color: var(--on-fav); }

/* liste des tomes */
.vol-check-gap { width: 22px; flex-shrink: 0; }
.vol-edit {
  flex-shrink: 0; width: 26px; height: 26px; padding: 0;
  border: 1px solid transparent; border-radius: 6px;
  background: transparent; color: var(--muted);
  font-size: 14px; line-height: 1; cursor: pointer;
}
.vol-edit:hover, .vol-edit:focus-visible { border-color: var(--line); color: var(--text); background: var(--surface); }
.vol-row.is-hidden { opacity: .5; }
.vol-row.is-hidden .vol-label { font-style: italic; }
.vol-row.is-hidden .num { color: var(--muted); }
.vol-editor { list-style: none; padding: 8px 6px 10px 34px; border-bottom: 1px dotted var(--divider); }
.vol-editor-form { display: flex; gap: 8px; flex-wrap: wrap; align-items: center; }
.vol-editor-form .vol-editor-input { flex: 1 1 100%; }
.vol-editor-form .btn, .vol-editor-row .btn { padding: 8px 11px; font-size: 12px; }
.vol-editor-row { display: flex; gap: 8px; flex-wrap: wrap; margin-top: 8px; }
.vol-editor-row:empty { display: none; }
.edit-orig { font-size: 11.5px; font-style: italic; color: var(--muted); margin: 6px 0 0; }
.edit-orig:empty { display: none; }

/* message temporaire (bas d'écran, au-dessus de tout) */
.toast {
  position: fixed; left: 50%; bottom: max(18px, env(safe-area-inset-bottom));
  transform: translateX(-50%);
  z-index: 1000;
  display: flex; align-items: center; gap: 14px;
  max-width: calc(100vw - 32px); box-sizing: border-box;
  padding: 11px 14px 11px 16px;
  font: 700 13px var(--font-body);
  background: var(--chip-on-bg); color: var(--chip-on-text);
  border: var(--bw-s) solid var(--line); border-radius: var(--r-field);
  box-shadow: var(--sh-btn);
}
.toast-btn {
  flex-shrink: 0;
  font: 800 12.5px var(--font-body);
  padding: 6px 10px; border-radius: 6px; cursor: pointer;
  background: var(--gold); color: var(--on-gold); border: 0;
}

/* Réglages → fiches masquées */
.hidden-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 8px; max-height: 340px; overflow-y: auto; }
.hidden-list li {
  display: flex; align-items: center; gap: 12px;
  padding: 9px 10px; border: 1px solid var(--divider); border-radius: var(--r-field);
  background: var(--surface);
}
.hl-text { flex: 1; min-width: 0; }
.hl-title { font-size: 13.5px; font-weight: 800; color: var(--text); }
.hl-why { font-size: 11.5px; color: var(--text-soft); margin-top: 2px; overflow-wrap: anywhere; }
.hidden-list .btn { flex-shrink: 0; padding: 8px 11px; font-size: 12px; }

/* =====================================================================
   FUSION ET DOUBLONS PROBABLES (propriétaire)
   ===================================================================== */
.sheet-merged { font-size: 12px; color: var(--text-soft); margin: 6px 0 0; line-height: 1.5; }
.sheet-merged[hidden], .merge-picker[hidden], .merge-confirm[hidden], #merge-open[hidden] { display: none; }
.merged-item { white-space: nowrap; }
.link-btn {
  background: none; border: 0; padding: 0; cursor: pointer;
  font: 700 12px var(--font-body); color: var(--fav); text-decoration: underline;
}
.edit-merge { margin-top: 14px; padding-top: 12px; border-top: 1px dotted var(--divider-strong); }
.merge-picker { display: flex; flex-direction: column; gap: 8px; align-items: flex-start; }
.merge-picker .edit-field { width: 100%; }
.merge-results { list-style: none; margin: 0; padding: 0; width: 100%; display: flex; flex-direction: column; gap: 4px; }
.merge-hit {
  width: 100%; text-align: left; cursor: pointer;
  font: 600 12.5px var(--font-body); color: var(--text);
  background: var(--surface); border: 1px solid var(--divider); border-radius: 6px; padding: 8px 10px;
}
.merge-hit:hover, .merge-hit:focus-visible { border-color: var(--line); background: var(--tan); color: var(--chip-text); }
.merge-none { font-size: 12px; color: var(--muted); }
.merge-confirm { width: 100%; box-sizing: border-box; padding: 10px; border: var(--bw-s) solid var(--line); border-radius: var(--r-field); background: var(--surface); }
.merge-confirm p { margin: 0 0 10px; font-size: 13px; font-weight: 700; color: var(--text); line-height: 1.4; }

.dups-count { font-size: 12.5px; font-weight: 700; color: var(--text-soft); align-self: center; }
.dup-section { margin-top: 24px; }
.dup-empty { font-size: 13px; color: var(--muted); margin: 0; }
.dup-item {
  margin-top: 10px; padding: 12px;
  border: 1px solid var(--divider); border-radius: var(--r-field);
  background: var(--surface); color: var(--text);
}
.dup-pair { display: flex; flex-wrap: wrap; gap: 12px; }
.dup-col { flex: 1 1 260px; min-width: 0; display: flex; gap: 10px; align-items: flex-start; }
.dup-info { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 3px; align-items: flex-start; }
.dup-info .btn { margin-top: 6px; padding: 8px 11px; font-size: 12px; }
.dup-title { font-size: 13.5px; font-weight: 800; color: var(--text); overflow-wrap: anywhere; }
.dup-meta { font-size: 11.5px; color: var(--text-soft); overflow-wrap: anywhere; }
.dup-tomes { font-size: 11.5px; font-style: italic; color: var(--muted); overflow-wrap: anywhere; }
.dup-thumb {
  flex-shrink: 0; width: 64px; height: 88px; padding: 0; cursor: zoom-in;
  border: 1px solid var(--line); border-radius: var(--r-cover); overflow: hidden;
  background: var(--card-placeholder);
  display: flex; align-items: center; justify-content: center;
}
.dup-thumb img { width: 100%; height: 100%; object-fit: cover; display: block; }
.dup-thumb:disabled { cursor: default; }
.dup-nocover { font-size: 9.5px; color: var(--muted); text-align: center; padding: 4px; }
.dup-row { display: flex; flex-wrap: wrap; gap: 14px; margin-top: 8px; }
.dup-tome { width: 120px; display: flex; flex-direction: column; gap: 4px; align-items: flex-start; }
.dup-tome .dup-thumb { width: 84px; height: 116px; }
.dup-label { font-size: 11.5px; font-weight: 600; color: var(--text); overflow-wrap: anywhere; }
.dup-tome .btn { padding: 7px 10px; font-size: 11.5px; }
.dup-foot { flex-basis: 100%; display: flex; justify-content: flex-end; margin-top: 6px; }
.dup-foot .btn { padding: 7px 10px; font-size: 12px; }

/* =====================================================================
   AIDE (Réglages, mode propriétaire seulement)
   ===================================================================== */
.help { display: flex; flex-direction: column; gap: 6px; }
.help-item { border: 1px solid var(--divider); border-radius: var(--r-field); background: var(--surface); color: var(--text); }
.help-item > summary {
  cursor: pointer; list-style: none; padding: 10px 12px;
  font-size: 13.5px; font-weight: 800; display: flex; align-items: center; gap: 8px;
}
.help-item > summary::-webkit-details-marker { display: none; }
.help-item > summary::before { content: "▸"; color: var(--fav); transition: transform .15s; }
.help-item[open] > summary::before { transform: rotate(90deg); }
.help-item > summary:hover { background: var(--hover); }
.help-body { padding: 0 14px 12px 30px; font-size: 13px; line-height: 1.5; color: var(--text); }
.help-body p { margin: 6px 0; }
.help-body ul, .help-body ol { margin: 6px 0; padding-left: 20px; }
.help-body li { margin: 3px 0; }
.help-body code { font-size: 12px; background: var(--hover); padding: 0 3px; border-radius: 3px; overflow-wrap: anywhere; }

/* Croix pour vider un champ de recherche (apparaît dès qu'il y a du texte) */
.field-clear {
  flex-shrink: 0;
  width: 28px; height: 28px; padding: 0;      /* cible tactile confortable (iPhone/iPad) */
  margin: -4px -4px -4px 0;                    /* sans gonfler la hauteur du champ */
  border: none; border-radius: 50%;
  background: var(--muted); color: var(--surface);
  cursor: pointer;
  display: flex; align-items: center; justify-content: center;
  -webkit-tap-highlight-color: transparent;
  touch-action: manipulation;
}
.field-clear[hidden] { display: none; }
.field-clear svg { width: 12px; height: 12px; }
.field-clear:hover, .field-clear:focus-visible { background: var(--text); }

/* =====================================================================
   PAGES RÉGLAGES ET DOUBLONS (#/reglages, #/doublons)
   De vraies pages dans le flux, plus des fenêtres par-dessus la grille.
   ===================================================================== */
#home-view[hidden], .page[hidden] { display: none; }
html.view-page .controls { display: none; }      /* recherche et filtres : inutiles hors grille */
.page { max-width: 880px; margin: 0 auto; }
.back-link {
  display: inline-flex; align-items: center; min-height: 44px;
  font-size: 13.5px; font-weight: 700; color: var(--text-soft); text-decoration: none;
}
.back-link:hover, .back-link:focus-visible { color: var(--text); text-decoration: underline; }
.page-title {
  font-family: var(--font-display); font-weight: var(--display-weight);
  letter-spacing: calc(var(--display-tracking) / 2);
  font-size: var(--sheet-title-size); line-height: 1.1; color: var(--text);
  margin: 4px 0 6px;
}
.set-all { display: flex; gap: 8px; align-items: center; margin: 0 0 14px; color: var(--muted); font-size: 12.5px; }
.set-all-btn {
  background: none; border: 0; padding: 0; min-height: 36px; cursor: pointer;
  color: var(--text-soft); font: 600 12.5px var(--font-body);
  text-decoration: underline; text-underline-offset: 3px;
}
.set-all-btn:hover, .set-all-btn:focus-visible { color: var(--text); }
.set-block { margin-bottom: 22px; }
.set-block.is-closed { margin-bottom: 2px; }
/* titre de section cliquable : libellé, filet, chevron */
.set-head {
  width: 100%; min-height: 44px; padding: 0; margin: 0 0 6px;
  display: flex; align-items: center; gap: 10px;
  background: none; border: 0; cursor: pointer; text-align: left;
  font: 800 12px var(--font-body); letter-spacing: .5px; text-transform: uppercase; color: var(--muted);
  -webkit-tap-highlight-color: transparent;
}
.set-block.is-closed .set-head { margin-bottom: 0; }
.set-head .rule { flex: 1; height: 1px; background: var(--divider-strong); }
.set-head::after {
  content: ""; flex: none; width: 8px; height: 8px; margin: 0 4px 0 2px;
  border-right: 2px solid var(--muted); border-bottom: 2px solid var(--muted);
  transform: rotate(45deg) translate(-2px, -2px); transition: transform .15s ease;
}
.set-head[aria-expanded="true"]::after { transform: rotate(-135deg) translate(-2px, -2px); }
.set-head:hover .t, .set-head:focus-visible .t { color: var(--text); }
.set-body[hidden] { display: none; }
.app-version {
  margin: 30px 0 0; padding-top: 12px; border-top: 1px solid var(--divider-strong);
  font-size: 11.5px; color: var(--muted);
}
a.btn { display: inline-flex; align-items: center; text-decoration: none; }

/* Réglages → Aide : bouton vers le mode d'emploi en PDF */
.pdf-row { margin: 0 0 14px; }
.pdf-link { gap: 8px; min-height: 44px; box-sizing: border-box; }
.pdf-link svg { width: 18px; height: 18px; flex-shrink: 0; }

/* =====================================================================
   BARRE ALPHABÉTIQUE ET SÉPARATEURS DE LETTRE (grille)
   ===================================================================== */
.az[hidden] { display: none; }
.az {
  position: sticky; top: env(safe-area-inset-top, 0px); z-index: 20;
  display: flex; flex-wrap: wrap; gap: 3px;
  margin: -12px -20px 18px; padding: 8px 20px;          /* jusqu'aux bords de la zone (main a 20 px de marge) */
  background: var(--bg);
  border-bottom: var(--bw-s) solid var(--line);
}
.az button {
  min-width: 30px; height: 32px; padding: 0 4px;
  display: inline-flex; align-items: center; justify-content: center;
  border: 0; border-radius: 6px; background: transparent; cursor: pointer;
  font: 800 13px var(--font-body); color: var(--text-soft);
  -webkit-tap-highlight-color: transparent; touch-action: manipulation;
}
.az button:hover, .az button:focus-visible { background: var(--chip-on-bg); color: var(--chip-on-text); }
.az button.off { opacity: .28; cursor: default; }
.az button.off:hover { background: transparent; color: var(--text-soft); }
.letter-head {
  grid-column: 1 / -1;
  display: flex; align-items: center; gap: 12px;
  margin: 10px 0 -6px;
  font-family: var(--font-display); font-weight: var(--display-weight);
  letter-spacing: calc(var(--display-tracking) / 2);
  font-size: 26px; line-height: 1; color: var(--fav);
}
.letter-head:first-child { margin-top: 0; }
.letter-head::after { content: ""; flex: 1; height: 1px; background: var(--divider-strong); }
/* téléphone : 2 rangées de 14 cases, assez larges pour le doigt */
@media (max-width: 560px) {
  .az { display: grid; grid-template-columns: repeat(14, 1fr); gap: 2px; margin: -14px -20px 14px; padding: 6px 16px; }
  .az button { min-width: 0; height: 34px; padding: 0; font-size: 12.5px; }
  .letter-head { font-size: 22px; margin: 6px 0 -4px; }
}

/* vignette dont la couverture n'a pas pu être chargée (après 2 nouvelles tentatives) :
   on laisse voir le fond de la vignette plutôt qu'une icône d'image cassée */
.card-cover-wrap img.img-failed, .dup-thumb img.img-failed { visibility: hidden; }

/* =====================================================================
   3.0 : NOUVEAUTÉS, TRI, TOMES MANQUANTS, STATISTIQUES
   ===================================================================== */
.field-sort { flex: 0 1 210px; }
/* pastille « Nouveau » / « +3 tomes » : en haut à gauche, à l'écart des pastilles de statut */
.card-new { position: absolute; top: 6px; left: 6px; }
.badge.new { background: var(--fav); color: var(--on-fav); }
.date-head { font-size: 21px; }
@media (max-width: 560px) { .date-head { font-size: 18px; } }
.sheet-added { font-size: 11.5px; color: var(--text-soft); margin: 4px 0 0; line-height: 1.35; }
.sheet-missing { font-size: 12px; font-weight: 700; color: var(--fav); margin: 4px 0 0; line-height: 1.35; }
.sheet-added[hidden], .sheet-missing[hidden] { display: none; }
.vol-new {
  flex-shrink: 0; align-self: center;
  font-size: 9.5px; font-weight: 800; text-transform: uppercase; letter-spacing: .3px;
  padding: 2px 6px; border-radius: 999px; background: var(--fav); color: var(--on-fav);
}

.st-sec { margin-top: 26px; }
.st-sec:first-child { margin-top: 10px; }
.st-h {
  display: flex; align-items: center; gap: 10px; margin: 0 0 8px;
  font: 800 12px var(--font-body); letter-spacing: .5px; text-transform: uppercase; color: var(--muted);
}
.st-h::after { content: ""; flex: 1; height: 1px; background: var(--divider-strong); }
.st-tiles { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 10px; }
@media (max-width: 560px) { .st-tiles { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.st-tile {
  background: var(--surface); border: 1px solid var(--divider); border-radius: var(--r-field);
  padding: 12px 12px 10px; min-width: 0;
}
.st-num {
  font-family: var(--font-display); font-weight: var(--display-weight); letter-spacing: calc(var(--display-tracking) / 2);
  font-size: 30px; line-height: 1; color: var(--text);
}
.st-lab { margin-top: 4px; font-size: 12px; font-weight: 700; color: var(--text-soft); }
.st-meter-lab { margin: 0 0 6px; font-size: 13px; font-weight: 700; color: var(--text); }
.st-meter { height: 12px; border-radius: 6px; background: var(--hover); border: 1px solid var(--divider); overflow: hidden; margin-bottom: 12px; }
.st-meter-fill { display: block; height: 100%; background: var(--read); border-radius: 0 4px 4px 0; }
.st-bars { display: flex; flex-direction: column; gap: 2px; }
.st-row {
  display: grid; grid-template-columns: minmax(0, 13em) minmax(0, 1fr) auto; gap: 10px; align-items: center;
  min-height: 34px;
}
@media (max-width: 560px) { .st-row { grid-template-columns: minmax(0, 9.5em) minmax(0, 1fr) auto; gap: 8px; } }
.st-lab-btn, .st-lab-txt {
  font: 600 13px var(--font-body); color: var(--text); text-align: left;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.st-lab-btn {
  background: none; border: 0; padding: 0; min-height: 34px; cursor: pointer;
  text-decoration: underline; text-decoration-color: var(--divider-strong); text-underline-offset: 3px;
}
.st-lab-btn:hover, .st-lab-btn:focus-visible { text-decoration-color: var(--text); }
.st-lab-txt { color: var(--text-soft); font-style: italic; }
.st-track { display: block; height: 10px; }
.st-fill { display: block; height: 100%; background: var(--fav); border-radius: 0 4px 4px 0; }
.st-val { font-size: 12.5px; font-weight: 700; color: var(--text-soft); white-space: nowrap; font-variant-numeric: tabular-nums; }
.st-table { border-collapse: collapse; width: 100%; max-width: 520px; font-size: 13px; color: var(--text); }
.st-table th { text-align: left; font-size: 11.5px; font-weight: 800; color: var(--muted); padding: 6px 8px; border-bottom: 1px solid var(--divider-strong); }
.st-table td { padding: 7px 8px; border-bottom: 1px solid var(--divider); }
.st-table th:not(:first-child), .st-table td.n { text-align: right; font-variant-numeric: tabular-nums; }
.st-go { margin-top: 12px; }
.st-missing { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; }
.st-missing li { display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 10px; border-bottom: 1px solid var(--divider); padding: 2px 0; }
.st-missing .st-lab-btn { white-space: normal; overflow-wrap: anywhere; }
.st-miss-txt { font-size: 12.5px; color: var(--text-soft); }

/* 3.1 : connexion Supabase (Réglages → Mode propriétaire) */
.auth-box { margin-top: 4px; }
.auth-box .owner-input { font-size: 16px; }   /* 16 px : l'iPhone ne zoome pas sur le champ */

/* =====================================================================
   3.4 : PRÉSENTATIONS DE LA BIBLIOTHÈQUE (Réglages → Présentation)
   #grid[data-pres] : grille (défaut, règles ci-dessus), eventail, etagere, mur, liste
   ===================================================================== */

/* --- Éventail : jusqu'à 4 couvertures déployées, la première devant ---
   3.9 : sans cadre ni bandeau, posé sur la page, titre centré dessous ; 5 à 6 colonnes
   sur grand écran (8 avant), 2 sur téléphone */
#grid[data-pres="eventail"] { grid-template-columns: repeat(auto-fill, minmax(210px, 1fr)); gap: 26px 22px; }
#grid[data-pres="eventail"] .card { border: 0; border-radius: 0; box-shadow: none; background: transparent; overflow: visible; }
#grid[data-pres="eventail"] .card:focus-visible { outline-offset: 4px; border-radius: 6px; }
.card-cover-wrap.fan { aspect-ratio: 1 / 1; background: transparent; overflow: visible; display: flex; align-items: center; justify-content: center; }
.fan-info { text-align: center; padding: 4px 6px 0; }
.fan-info .card-title {
  color: var(--text); font-size: 14px;
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
}
.fan-info .card-count { color: var(--muted); font-size: 11.5px; margin-top: 2px; }
.card-cover-wrap.fan img.fan-i {
  position: absolute; top: 7%; left: 19%;
  width: 62%; height: auto; aspect-ratio: 500 / 680; object-fit: cover;
  border: var(--bw-s) solid var(--line); border-radius: var(--r-cover);
  box-shadow: var(--sh-mini);
  transform-origin: 50% 100%;
  transform: translateX(calc(var(--k) * 9%)) rotate(calc(var(--k) * 5deg));
  transition: transform .18s ease;
}
.card:hover .card-cover-wrap.fan img.fan-i,
.card:focus-visible .card-cover-wrap.fan img.fan-i { transform: translateX(calc(var(--k) * 13%)) rotate(calc(var(--k) * 8deg)); }
/* 3.9 : une couverture seule (one-shot, série d'un tome) à la même taille que celles de l'éventail, droite */
.card-cover-wrap.fan.solo img.fan-i, .card:hover .card-cover-wrap.fan.solo img.fan-i { transform: none; }
.card-cover-wrap.fan .card-badges, .card-cover-wrap.fan .card-new { z-index: 9; }
@media (max-width: 560px) {                          /* téléphone : 2 colonnes, éventail moins ouvert */
  #grid[data-pres="eventail"] { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 18px 14px; }
  .card-cover-wrap.fan img.fan-i { transform: translateX(calc(var(--k) * 6%)) rotate(calc(var(--k) * 4deg)); }
  .fan-info .card-title { font-size: 12.5px; }
}

/* --- Mur : les couvertures seules ; une série se voit en pile (2 tomes, 3 et plus) --- */
#grid[data-pres="mur"] { padding-top: 12px; }
.card.mur { overflow: visible; border-radius: var(--r-cover); }
.card.mur .card-cover-wrap { overflow: hidden; border-radius: calc(var(--r-cover) - 1px); }
.card.mur.pile1 { box-shadow: 5px -5px 0 -1px var(--surface), 5px -5px 0 1px var(--line), var(--sh-card); }
.card.mur.pile2 { box-shadow: 5px -5px 0 -1px var(--surface), 5px -5px 0 1px var(--line),
                               10px -10px 0 -1px var(--surface), 10px -10px 0 1px var(--line), var(--sh-card); }
.mur-cap {
  position: absolute; left: 0; right: 0; bottom: 0;
  padding: 22px 8px 7px;
  background: linear-gradient(to top, rgba(0,0,0,.82), rgba(0,0,0,0));
  color: #fff; display: flex; flex-direction: column; gap: 1px;
  opacity: 0; transition: opacity .15s ease; pointer-events: none;
}
.mur-title { font-size: 12px; font-weight: 800; line-height: 1.2; }
.mur-count { font-size: 10px; opacity: .85; }
.card.mur:hover .mur-cap, .card.mur:focus-visible .mur-cap, .card.mur.no-cover .mur-cap { opacity: 1; }

/* --- Étagère : les tomes debout sur une planche, le titre dessous --- */
#grid[data-pres="etagere"] { display: flex; flex-wrap: wrap; align-items: flex-start; gap: 30px 0; }
#grid[data-pres="etagere"] .letter-head { flex: 0 0 100%; margin: 4px 0 -12px; }
.card.shelf {
  border: 0; box-shadow: none; background: transparent; border-radius: 0; overflow: visible;
  padding: 0 14px; width: max-content; max-width: 100%;
}
.card.shelf:hover { transform: none; }
.card.shelf:hover .shelf-books { transform: translateY(-3px); }
.shelf-books {
  position: relative; height: 150px;
  display: flex; align-items: flex-end; gap: 3px;
  transition: transform .12s ease;
}
.shelf-b {
  height: 100%; width: auto; aspect-ratio: 500 / 680; object-fit: cover; display: block;   /* 3.9 : même hauteur pour tous */
  border: var(--bw-s) solid var(--line); border-radius: 2px 3px 3px 2px;
  background: var(--card-placeholder);
}
.shelf-ph { width: 105px; }
.shelf-b.img-failed { visibility: visible; }
.shelf-more {
  align-self: center; margin-left: 4px;
  font-size: 12px; font-weight: 800; color: var(--muted);
}
.shelf-books .card-badges { top: 4px; right: 4px; }
.shelf-books .card-new { top: 4px; left: 4px; }
.shelf-plank {
  height: 9px; margin: 0 -14px;
  background: var(--tan); border: var(--bw-s) solid var(--line); border-radius: 2px;
  box-shadow: 0 4px 0 var(--shadow-c);
}
.shelf-title {
  width: 0; min-width: 100%;                         /* jamais plus large que les tomes */
  margin-top: 9px; font-size: 12px; font-weight: 700; line-height: 1.25; color: var(--text);
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
}
@media (max-width: 560px) {
  #grid[data-pres="etagere"] { gap: 24px 0; }
  .shelf-books { height: 96px; }
  .shelf-ph { width: 68px; }
  .card.shelf { padding: 0 10px; }
  .shelf-plank { margin: 0 -10px; }
}

/* --- Liste : une ligne par fiche --- */
#grid[data-pres="liste"] { display: flex; flex-direction: column; gap: 10px; }
#grid[data-pres="liste"] .letter-head { margin: 8px 0 0; }
.card.row { flex-direction: row; align-items: center; gap: 12px; padding: 6px 12px 6px 6px; background: var(--card-info-bg); box-shadow: var(--sh-btn); border-width: var(--bw-m); }
.card.row:hover { transform: translateX(3px); }
.row-cover { flex: 0 0 54px; aspect-ratio: 500 / 680; background: var(--card-placeholder); border-radius: var(--r-cover); overflow: hidden; }
.row-cover img { width: 100%; height: 100%; object-fit: cover; display: block; }
.row-info { flex: 1; min-width: 0; }
.row-info .card-title { font-size: 14px; }
.row-info .card-author { font-size: 12px; }
.row-info .card-count { font-size: 11px; }
.row-badges { display: flex; flex-wrap: wrap; gap: 4px; justify-content: flex-end; flex: 0 0 auto; max-width: 40%; }
@media (max-width: 560px) {
  .row-cover { flex-basis: 46px; }
  .row-info .card-title { font-size: 13px; }
}

/* --- Réglages : choix de la présentation --- */
.pres-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(112px, 1fr)); gap: 12px; margin-top: 4px; }
.pres-btn {
  font-family: var(--font-body); color: var(--text); background: var(--surface);
  border: var(--bw-m) solid var(--line); border-radius: var(--r-field); box-shadow: var(--sh-btn);
  padding: 12px 8px 10px; cursor: pointer;
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 6px; min-height: 82px;
}
.pres-btn svg { width: 24px; height: 24px; }
.pres-name { font-size: 13px; font-weight: 800; }
.pres-sub { font-size: 10.5px; color: var(--muted); line-height: 1.25; text-align: center; }
.pres-btn[aria-pressed="true"] { background: var(--chip-on-bg); color: var(--chip-on-text); border-color: var(--chip-on-bg); }
.pres-btn[aria-pressed="true"] .pres-sub { color: inherit; opacity: .8; }
.pres-btn:active { transform: translate(1px,1px); }
.pres-btn:focus-visible { outline: 3px solid var(--text); outline-offset: 2px; }
.pres-site { margin-top: 18px; }
.pres-site-title { font-size: 15px; font-weight: 800; margin: 0 0 4px; color: var(--text); }
.pres-msg { margin-top: 10px; font-weight: 700; }
.pres-msg.err { color: var(--fav); }
@media (max-width: 560px) { .pres-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 9px; } }

/* =====================================================================
   3.5 : FICHE PRÉCÉDENTE / SUIVANTE
   Barre du haut de la fiche, collée en haut quand on fait défiler : ‹ n / N › et ✕
   ===================================================================== */
.sheet-top {
  position: sticky; top: 0; z-index: 3;
  display: flex; align-items: center; gap: 10px;
  padding: 12px 14px 8px;
  background: var(--sheet);
}
.sheet-top .sheet-close { position: static; margin-left: auto; flex-shrink: 0; }
.sheet-nav { display: flex; align-items: center; gap: 8px; }
.sheet-nav[hidden] { display: none; }
.sheet-nav-btn {
  width: 36px; height: 36px; padding: 0; flex-shrink: 0;
  border-radius: 50%;
  border: var(--bw-m) solid var(--line);
  background: var(--surface); color: var(--text);
  display: flex; align-items: center; justify-content: center;
  cursor: pointer; box-shadow: var(--sh-mini);
}
.sheet-nav-btn svg { width: 18px; height: 18px; }
.sheet-nav-btn:hover:not(:disabled) { background: var(--gold); color: var(--on-gold); }
.sheet-nav-btn:active:not(:disabled) { transform: translate(1px,1px); }
.sheet-nav-btn:disabled { opacity: .3; cursor: default; box-shadow: none; }
.sheet-nav-btn:focus-visible, .sheet-close:focus-visible { outline: 3px solid var(--text); outline-offset: 2px; }
.sheet-pos { font-size: 12px; font-weight: 800; color: var(--muted); min-width: 4.5em; text-align: center; font-variant-numeric: tabular-nums; }
.sheet-body.slide-next { animation: sheet-in-next .18s ease-out; }
.sheet-body.slide-prev { animation: sheet-in-prev .18s ease-out; }
@keyframes sheet-in-next { from { transform: translateX(26px); opacity: .25; } to { transform: none; opacity: 1; } }
@keyframes sheet-in-prev { from { transform: translateX(-26px); opacity: .25; } to { transform: none; opacity: 1; } }
@media (prefers-reduced-motion: reduce) { .sheet-body.slide-next, .sheet-body.slide-prev { animation: none; } }
.sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }

/* =====================================================================
   3.6 : MON AVIS (fiche) ET CARNET DE LECTURE (#/carnet)
   ===================================================================== */
.badge.note { background: var(--surface); color: var(--text); }
.sheet-avis { margin-top: 18px; }
.sheet-avis[hidden] { display: none; }
.avis-line { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; margin-bottom: 6px; }
.avis-note {
  display: inline-block; font-weight: 800; font-size: 13px; line-height: 1;
  padding: 5px 9px; border-radius: 999px;
  border: var(--bw-s) solid var(--line); background: var(--gold); color: var(--on-gold);
  font-variant-numeric: tabular-nums; white-space: nowrap;
}
.avis-date { font-size: 12.5px; font-weight: 700; color: var(--text-soft); }
.avis-com { margin: 4px 0 10px; font-size: 13.5px; line-height: 1.5; color: var(--text); white-space: pre-wrap; overflow-wrap: anywhere; }
.avis-btn { margin-top: 2px; }
.avis-form { display: flex; flex-direction: column; gap: 10px; }
.avis-lab { font-size: 11px; letter-spacing: .4px; font-weight: 800; color: var(--muted); text-transform: uppercase; }
.avis-chips { display: flex; flex-wrap: wrap; gap: 6px; }
.avis-chip {
  min-width: 36px; height: 36px; padding: 0 6px;
  border-radius: 999px; border: var(--bw-s) solid var(--line);
  background: var(--surface); color: var(--text);
  font-family: var(--font-body); font-size: 13.5px; font-weight: 800; cursor: pointer;
  font-variant-numeric: tabular-nums;
}
.avis-chip[aria-checked="true"] { background: var(--chip-on-bg); color: var(--chip-on-text); border-color: var(--chip-on-bg); }
.avis-chip:focus-visible { outline: 3px solid var(--text); outline-offset: 2px; }
.avis-field { flex: none; }
.avis-field input[type="date"] { max-width: 210px; }
.avis-text { resize: vertical; min-height: 92px; font-family: var(--font-body); font-size: 14px; line-height: 1.45; }
.avis-msg:empty { display: none; }
.avis-msg { color: var(--fav); font-weight: 700; margin: 0; }
.avis-confirm { margin-top: 2px; }
.avis-warn { color: var(--fav); font-weight: 700; }
@media (max-width: 420px) { .avis-chip { min-width: 34px; height: 34px; } .avis-chips { gap: 5px; } }

/* carnet : colonnes (répartition des notes, lectures par mois) */
.cv-cols { display: flex; align-items: stretch; gap: 4px; height: 170px; max-width: 640px; }
.cv-col {
  flex: 1 1 0; min-width: 0; display: flex; flex-direction: column; align-items: center; gap: 4px;
  background: none; border: 0; padding: 0; font-family: var(--font-body); color: var(--text); cursor: default;
}
button.cv-col { cursor: pointer; border-radius: 6px; }
button.cv-col:hover .cv-bar, button.cv-col:focus-visible .cv-bar { filter: brightness(1.15); }
button.cv-col:focus-visible { outline: 3px solid var(--text); outline-offset: 2px; }
.cv-val { font-size: 11.5px; font-weight: 800; color: var(--text-soft); height: 15px; font-variant-numeric: tabular-nums; }
.cv-barwrap { flex: 1; width: 100%; display: flex; align-items: flex-end; justify-content: center; border-bottom: 1px solid var(--divider-strong); }
.cv-bar { display: block; width: 72%; max-width: 34px; background: var(--fav); border-radius: 4px 4px 0 0; }
.cv-lab { font-size: 11px; font-weight: 700; color: var(--muted); white-space: nowrap; }
.cv-col.zero .cv-lab { opacity: .7; }

/* carnet : filtres et liste */
.cv-filters { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 10px; }
.cv-q { flex: 1 1 240px; min-width: 0; }
.cv-sel { flex: 0 1 auto; min-width: 0; max-width: 100%; }
.cv-meta { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; margin-bottom: 8px; }
.cv-count { font-size: 13px; font-weight: 800; color: var(--text); margin-right: auto; }
.cv-reset[hidden] { display: none; }
.cv-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; }
.cv-item { display: flex; gap: 12px; padding: 12px 0; border-bottom: 1px solid var(--divider); align-items: flex-start; }
.cv-thumb { flex: 0 0 52px; aspect-ratio: 500 / 680; background: var(--card-placeholder); border: var(--bw-s) solid var(--line); border-radius: var(--r-cover); overflow: hidden; }
.cv-thumb img { width: 100%; height: 100%; object-fit: cover; display: block; }
.cv-body { flex: 1; min-width: 0; }
.cv-top { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.cv-title { font-size: 14.5px; font-weight: 800; text-align: left; white-space: normal; overflow-wrap: anywhere; }
.cv-title.gone { color: var(--text-soft); font-style: italic; }
.cv-sub { font-size: 12px; color: var(--text-soft); margin-top: 3px; }
.cv-com { margin: 6px 0 0; }
.cv-empty { padding: 14px 0; color: var(--muted); font-style: italic; }
@media (max-width: 560px) {
  .cv-cols { height: 140px; gap: 2px; }
  .cv-lab { font-size: 10px; }
  .cv-sel { flex: 1 1 calc(50% - 4px); }
  .cv-thumb { flex-basis: 44px; }
}

/* =====================================================================
   3.9 : STYLE (Réglages → Style)
   Chaque aspect ne s'applique que sous son attribut sur <html> (posé par themes.js),
   et seulement quand il diffère du défaut « Thème » : sans choix, rien ici ne s'applique.
   Les réglages agissent surtout en redéfinissant, sur les éléments concernés, les variables
   du thème (traits --bw-*, ombres --sh-*, arrondis --r-*, couleur des traits --line).
   ===================================================================== */

/* --- Bandeau : police, écriture, ombre du titre --- */
:root[data-hdrpolice] .brand { font-size: calc(var(--brand-size) * var(--brand-k, 1)); }
:root[data-hdrpolice="bd"] .brand        { font-family: 'Bangers', Impact, cursive; font-weight: 400; letter-spacing: 1px; --brand-k: 1; }
:root[data-hdrpolice="affiche"] .brand   { font-family: 'Anton', Impact, sans-serif; font-weight: 400; letter-spacing: 1px; --brand-k: .92; }
:root[data-hdrpolice="classique"] .brand { font-family: 'Fraunces', Georgia, serif; font-weight: 800; letter-spacing: 0; --brand-k: .86; }
:root[data-hdrpolice="prestige"] .brand  { font-family: 'Abril Fatface', Georgia, serif; font-weight: 400; letter-spacing: .5px; --brand-k: .88; }
:root[data-hdrpolice="elegant"] .brand   { font-family: 'Spectral', Georgia, serif; font-weight: 700; font-style: italic; letter-spacing: 0; --brand-k: .9; }
:root[data-hdrpolice="moderne"] .brand   { font-family: 'Space Grotesk', system-ui, sans-serif; font-weight: 700; letter-spacing: -.5px; --brand-k: .84; }
:root[data-hdrpolice="sobre"] .brand     { font-family: 'Archivo', system-ui, sans-serif; font-weight: 800; letter-spacing: 0; --brand-k: .8; }
:root[data-hdrpolice="machine"] .brand   { font-family: 'Special Elite', 'Courier New', monospace; font-weight: 400; letter-spacing: 0; --brand-k: .8; }
:root[data-hdrpolice="manuscrit"] .brand { font-family: 'Caveat', 'Segoe Script', cursive; font-weight: 700; letter-spacing: 0; --brand-k: 1.1; }
:root[data-hdrcasse="normale"] .brand { text-transform: none; }
:root[data-hdrombre="decalee"] .brand { text-shadow: 3px 3px 0 var(--shadow-c); }
:root[data-hdrombre="douce"] .brand   { text-shadow: 0 2px 10px rgba(0,0,0,.35); }
:root[data-hdrombre="aucune"] .brand  { text-shadow: none; }

/* --- Bandeau : fond --- */
:root[data-hdrfond="trame"] .topbar   { background-image: radial-gradient(rgba(0,0,0,.16) 1.6px, transparent 1.6px); background-size: 11px 11px; }
:root[data-hdrfond="uni"] .topbar     { background-image: none; }
:root[data-hdrfond="degrade"] .topbar { background-image: linear-gradient(135deg, rgba(255,255,255,.18), rgba(0,0,0,.24)); background-size: auto; }

/* --- Bandeau : champs de recherche, de genre et de tri --- */
:root[data-hdrchamps="doux"] .topbar .field { --bw-m: 1px; --line: transparent; --sh-field: 0 2px 8px rgba(0,0,0,.18); border-radius: 12px; }
:root[data-hdrchamps="arrondis"] .topbar .field { --bw-m: 1px; --line: transparent; --sh-field: 0 1px 3px rgba(0,0,0,.14); border-radius: 999px; padding-left: 16px; padding-right: 16px; }
:root[data-hdrchamps="soulignes"] .topbar .field {
  background: transparent; border-width: 0 0 2px; border-color: var(--on-accent); border-radius: 0; box-shadow: none;
  padding-left: 2px; padding-right: 2px;
}
:root[data-hdrchamps="soulignes"] .topbar .field input,
:root[data-hdrchamps="soulignes"] .topbar .field select,
:root[data-hdrchamps="soulignes"] .topbar .field .icon { color: var(--on-accent); }
:root[data-hdrchamps="soulignes"] .topbar .field input::placeholder { color: var(--on-accent); opacity: .75; }
:root[data-hdrchamps="soulignes"] .topbar .field select option { color: var(--text); }

/* --- Bandeau : puces de filtre (la puce active reste pleine) --- */
:root[data-hdrpuces="douces"] .topbar .chip { border-color: transparent; box-shadow: 0 1px 4px rgba(0,0,0,.22); }
:root[data-hdrpuces="contour"] .topbar .chip { background: transparent; color: var(--on-accent); border-color: var(--on-accent); }
:root[data-hdrpuces] .topbar .chip[data-active="true"] { background: var(--chip-on-bg); color: var(--chip-on-text); border-color: var(--chip-on-bg); }

/* --- Bandeau : bouton Réglages (la zone à toucher garde 42 px) --- */
:root[data-hdrbouton="doux"] .gear-btn    { --bw-m: 1px; --line: transparent; --sh-btn: 0 2px 8px rgba(0,0,0,.22); }
:root[data-hdrbouton="contour"] .gear-btn { background: transparent; color: var(--on-accent); border-color: var(--on-accent); box-shadow: none; }
:root[data-hdrbouton="discret"] .gear-btn { background: transparent; color: var(--on-accent); border-color: transparent; box-shadow: none; }

/* --- Pages : police des titres (bandeau compris s'il est « Comme les titres ») --- */
:root[data-titres="bd"]        { --font-display: 'Bangers', Impact, cursive; --display-weight: 400; --display-tracking: 1px; }
:root[data-titres="classique"] { --font-display: 'Fraunces', Georgia, serif; --display-weight: 700; --display-tracking: 0px; }
:root[data-titres="moderne"]   { --font-display: 'Space Grotesk', system-ui, sans-serif; --display-weight: 700; --display-tracking: 0px; }

/* --- Pages : vignettes et fiche --- */
:root[data-cartes="douces"] .card  { --bw-l: 1px; border-color: var(--divider-strong); --sh-card: 0 3px 12px rgba(0,0,0,.16); --r-card: 12px; }
:root[data-cartes="douces"] .card.row { --bw-m: 1px; --sh-btn: 0 2px 8px rgba(0,0,0,.14); }
:root[data-cartes="douces"] .sheet { --bw-l: 1px; border-color: var(--divider-strong); --sh-sheet: 0 18px 50px rgba(0,0,0,.32); --sh-sheet-m: 0 -6px 30px rgba(0,0,0,.25); --r-sheet: 18px; }
:root[data-cartes="epurees"] .card { --bw-l: 0px; --sh-card: 0 0 0 transparent; --r-card: 10px; }
:root[data-cartes="epurees"] .card.row { --bw-m: 0px; --sh-btn: 0 0 0 transparent; }
:root[data-cartes="epurees"] .sheet { --bw-l: 0px; --sh-sheet: 0 18px 50px rgba(0,0,0,.3); --sh-sheet-m: 0 -6px 30px rgba(0,0,0,.22); --r-sheet: 16px; }

/* --- Pages : pastilles (vignettes, fiche, avis) --- */
:root[data-pastilles="douces"] :is(.badge, .avis-note, .genre-tag) { border-color: transparent; box-shadow: 0 1px 4px rgba(0,0,0,.28); }
:root[data-pastilles="plates"] :is(.badge, .avis-note, .genre-tag) { border-color: transparent; box-shadow: none; }

/* --- Pages : boutons, cases et champs --- */
:root[data-commandes="doux"] :is(.btn, .owner-input, .pres-btn, .avis-chip, .vol-check, .sheet-nav-btn, .sheet-close, .magnify-btn) {
  --bw-m: 1px; --bw-s: 1px; --line: var(--divider-strong);
  --sh-btn: 0 2px 6px rgba(0,0,0,.14); --sh-field: 0 1px 4px rgba(0,0,0,.10); --sh-mini: 0 1px 4px rgba(0,0,0,.18);
}
:root[data-commandes="doux"] .vol-row.is-read .vol-check { border-color: var(--read); }

/* --- Pages : panneaux (vignettes de thème, message, statistiques, aide, carnet) --- */
:root[data-panneaux="doux"] :is(.theme-card, .toast, .merge-confirm) {
  --bw-m: 1px; --bw-s: 1px; --line: var(--divider-strong); --sh-btn: 0 2px 10px rgba(0,0,0,.14); --sh-mini: 0 1px 3px rgba(0,0,0,.14);
}
:root[data-panneaux="bd"] :is(.st-tile, .help-item) { border: var(--bw-m) solid var(--line); box-shadow: var(--sh-btn); }
:root[data-panneaux="bd"] .st-h::after, :root[data-panneaux="bd"] .letter-head::after { height: var(--bw-s); background: var(--line); }

/* --- la section Style des Réglages --- */
.style-wrap { display: grid; grid-template-columns: minmax(0, 1fr) 300px; gap: 22px; align-items: start; }
.style-preview { position: sticky; top: 12px; border: 1px solid var(--divider); border-radius: var(--r-field); overflow: hidden; background: var(--bg); }
.style-preview .topbar { padding: 12px 12px 14px; --brand-size: 20px; }
.style-preview .brand-row { flex-wrap: nowrap; align-items: center; gap: 10px; }
.style-preview .brand { min-width: 0; line-height: 1.05; overflow-wrap: anywhere; }
.style-preview .gear-btn { width: 34px; height: 34px; }
.style-preview .gear-btn svg { width: 18px; height: 18px; }
.style-preview .sp-controls { margin-top: 10px; display: flex; }
.style-preview .field { flex: 1 1 100%; padding: 7px 10px; }
.style-preview .field input { font-size: 13px; }
.style-preview .chips { margin-top: 8px; }
.style-preview .chip { padding: 6px 10px; font-size: 11.5px; }
.style-preview .sp-body { display: flex; gap: 14px; padding: 14px 12px; align-items: flex-start; }
.style-preview .sp-body .card { width: 112px; flex: none; cursor: default; }
.style-preview .sp-body .card:hover { transform: none; }
.style-preview .sp-cover { width: 100%; height: 100%; background: linear-gradient(160deg, #3d6fb6, #1f3c6e); }
.style-preview .sp-side { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 10px; align-items: flex-start; }
.style-preview .sp-title { font-family: var(--font-display); font-weight: var(--display-weight); letter-spacing: calc(var(--display-tracking) / 2); font-size: 22px; line-height: 1.05; color: var(--text); }
.style-preview .st-tile { align-self: stretch; }
.style-preview .st-num { font-size: 22px; }
.style-presets { display: flex; flex-wrap: wrap; gap: 8px; margin: 2px 0 6px; align-items: center; }
.style-cur { font-size: 12px; font-weight: 700; color: var(--muted); }
.style-group { margin-top: 14px; }
.style-group-h { font: 800 11.5px var(--font-body); letter-spacing: .5px; text-transform: uppercase; color: var(--muted); margin: 0 0 8px; }
.style-row { display: grid; grid-template-columns: 170px minmax(0, 1fr); gap: 6px 12px; align-items: start; padding: 7px 0; border-top: 1px solid var(--divider); }
.style-row-lab { font-size: 13px; font-weight: 800; color: var(--text); padding-top: 6px; }
.style-opts { display: flex; flex-wrap: wrap; gap: 6px; }
.style-opt {
  font-family: var(--font-body); font-size: 12.5px; font-weight: 700; color: var(--text);
  background: var(--surface); border: 1px solid var(--divider-strong); border-radius: 999px;
  padding: 6px 11px; cursor: pointer; line-height: 1.2;
}
.style-opt[aria-pressed="true"] { background: var(--chip-on-bg); color: var(--chip-on-text); border-color: var(--chip-on-bg); }
.style-opt:focus-visible { outline: 3px solid var(--text); outline-offset: 2px; }
.style-opt.f { font-size: 15px; font-weight: 400; padding: 5px 11px; }
@media (max-width: 760px) {
  .style-wrap { grid-template-columns: minmax(0, 1fr); }
  .style-preview { position: relative; top: 0; order: -1; }
  .style-row { grid-template-columns: minmax(0, 1fr); }
  .style-row-lab { padding-top: 0; }
}