:root {
  /* ===== BIBLE-PLUS DESIGN SYSTEM 2.0 — tokens ===== */
  --navy: #1E3358; --navy-dark: #12203C; --navy-light: #2E4E86;
  /* En mode clair, l'or ne sert QU'aux petits textes et aux icones : les grands
     titres y sont en --navy. L'ancien #A87C2F ne donnait que 3,57:1 sur le fond
     de page, sous la norme 4,5. Assombri de 14 %, il atteint 4,54:1 sans que la
     teinte de marque change a l'oeil. Les modes sombres, eux, reprennent l'or
     clair (voir plus bas) : ils ont le probleme inverse. */
  --gold: #886426; --gold-light: #C9A050; --gold-soft: #E6CD96; --gold-pale: #F6EBD4;
  --orange: #D95F35; --orange-deep: #B84427; --terra: #8A3B22; --magenta: #D8447A; --magenta-light: #EF6E9E;
  --bg: #FBF9F5; --bg-elev: #FFFFFF; --bg-soft: #F3EDE2;
  --text: #201B15; --text-soft: #57493B; --text-mute: #7B7066;
  --border: rgba(32,27,21,0.09); --hairline: rgba(32,27,21,0.07);
  --accent: var(--gold); --accent-soft: var(--gold-pale); --primary: var(--navy);
  /* Couleur du texte pose SUR une surface doree. L'or des modes sombres est
     clair : le blanc n'y offrait que 2,43:1. */
  --on-gold: #FFFFFF;
  --shadow-1: 0 1px 2px rgba(30,40,60,0.05);
  --shadow-2: 0 1px 2px rgba(30,40,60,0.04), 0 6px 18px rgba(30,40,60,0.07);
  --shadow-3: 0 2px 6px rgba(30,40,60,0.06), 0 16px 44px rgba(30,40,60,0.12);
  --shadow: var(--shadow-2); --shadow-lg: var(--shadow-3);
  --glow: 0 0 0 1px rgba(168,124,47,0.18), 0 6px 26px rgba(168,124,47,0.18);
  /* Une seule lueur chaude : il en existait trois quasi identiques
     (6/18/0,40 · 6/18/0,35 · 6/16/0,35), derive invisible mais reelle. */
  --glow-warm: 0 6px 18px rgba(224,101,58,0.38);
  --glow-gold: 0 4px 12px rgba(184,137,62,0.30);
  --font-serif: 'Cormorant Garamond', Georgia, 'Times New Roman', serif;
  --font-sans: 'Montserrat', 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
  --font-mono: 'JetBrains Mono', 'SF Mono', 'Monaco', 'Consolas', 'Menlo', monospace;
  --fs-base: 16px; --topbar-h: 58px; --bottombar-h: 66px; --content-max: 720px;
  /* 3 marches de surface + un filet pour les elements de quelques pixels.
     --radius-xl a ete fondu dans --radius-lg : deux valeurs pour un meme role. */
  --radius-xs: 3px; --radius-sm: 12px; --radius: 16px; --radius-lg: 22px;
  --ease: cubic-bezier(.33,.75,.25,1); --dur: .22s; --dur-slow: .38s;
  --safe-bottom: env(safe-area-inset-bottom, 0px); --safe-top: env(safe-area-inset-top, 0px);
  /* Tokens semantiques : une surface de marque et sa couleur de texte, pour ne
     plus detourner --navy (qui s'inverse en clair dans les themes sombres et
     provoquait du texte illisible). */
  --brand-surface: linear-gradient(135deg, #1E3358 0%, #12203C 100%);
  --on-brand: #FFFFFF;
  --brand-hairline: rgba(201,160,82,0.35);
  --tile-purple: #7C3AED; --tile-purple-bg: rgba(124,58,237,0.13);
  --tile-blue: #2563EB; --tile-blue-bg: rgba(37,99,235,0.13);
  --tile-pink: #EC4899; --tile-pink-bg: rgba(236,72,153,0.13);
  --tile-amber: #F59E0B; --tile-amber-bg: rgba(245,158,11,0.13);
  --tile-emerald: #10B981; --tile-emerald-bg: rgba(16,185,129,0.13);
  --tile-rose: #F43F5E; --tile-rose-bg: rgba(244,63,94,0.13);
  --tile-cyan: #06B6D4; --tile-cyan-bg: rgba(6,182,212,0.13);
  --tile-indigo: #6366F1; --tile-indigo-bg: rgba(99,102,241,0.13);
}
[data-theme="dark"] {
  --bg: #0D0B09; --bg-elev: rgba(255,255,255,0.055); --bg-soft: rgba(255,255,255,0.085);
  --text: #F4F0EA; --text-soft: #CCC2B7; --text-mute: #A69C90;
  /* Ancrage de la marque : les titres serif restent DORES en mode sombre
     (avant : peche), et les liseres prennent une pointe d'or. */
  --navy: #E8C88C; --navy-light: #F2DCB0;
  /* Sur fond noir, c'est l'or CLAIR qu'il faut : le #926C29 des modes clairs y
     serait trop sombre. On reprend --gold-light, deja dans la palette. */
  --gold: #C9A050; --on-gold: #12100D;
  --border: rgba(201,160,82,0.20); --hairline: rgba(201,160,82,0.13);
  --accent: #E58A5A; --accent-soft: rgba(229,138,90,0.15); --primary: #7FA0D8;
  --brand-surface: linear-gradient(135deg, #223A63 0%, #101D36 100%);
  --on-brand: #FFFFFF;
  --shadow-1: 0 1px 2px rgba(0,0,0,0.35);
  --shadow-2: 0 2px 6px rgba(0,0,0,0.35), 0 8px 24px rgba(0,0,0,0.4);
  --shadow-3: 0 4px 12px rgba(0,0,0,0.4), 0 20px 50px rgba(0,0,0,0.55);
  --glow: 0 0 0 1px rgba(229,138,90,0.22), 0 6px 26px rgba(229,138,90,0.2);
}
[data-theme="sepia"] {
  --bg: #F5EDD9; --bg-elev: #FBF5E5; --bg-soft: #ECE1C6;
  /* Le gris sepia d'origine (#9A8769) tombait a 2,98:1 — le plus bas de l'app. */
  --text: #3B2C1D; --text-soft: #6B5640; --text-mute: #70634D;
  --border: rgba(90,65,25,0.14); --hairline: rgba(90,65,25,0.10);
  --accent: #886714; --accent-soft: #F5EDDB; --primary: #6B4423;
  --gold: #886714;
}
[data-theme="noir"] {
  --bg: #000; --bg-elev: rgba(255,255,255,0.06); --bg-soft: rgba(255,255,255,0.10);
  --text: #FFFFFF; --text-soft: #D4D4D4; --text-mute: #8E8E8E;
  /* Ancrage de la marque en mode Noir : titres dores, fil d'or discret. */
  --navy: #EBCB8B; --navy-light: #F5E0B4;
  --gold: #C9A050; --on-gold: #0A0A0F;
  --border: rgba(201,160,82,0.24); --hairline: rgba(201,160,82,0.15);
  --accent: #E58A5A; --accent-soft: rgba(229,138,90,0.17); --primary: #E58A5A;
  --brand-surface: linear-gradient(135deg, #14203A 0%, #070C16 100%);
  --on-brand: #FFFFFF;
  --shadow-1: none; --shadow-2: 0 8px 24px rgba(0,0,0,0.6); --shadow-3: 0 20px 50px rgba(0,0,0,0.7);
}
[data-theme="noir"] body { background: #000; }
[data-theme="noir"] body::before { content:""; position:fixed; inset:0; z-index:-1; pointer-events:none; background: radial-gradient(130% 90% at 50% 120%, rgba(217,95,53,0.16), transparent 62%); }
* { box-sizing: border-box; -webkit-tap-highlight-color: transparent; }
html, body { margin: 0; padding: 0; height: 100%; overflow-x: hidden; overscroll-behavior-y: none; }
body { font-family: var(--font-sans); font-size: var(--fs-base); color: var(--text); background: var(--bg); line-height: 1.6; -webkit-font-smoothing: antialiased; transition: background 0.3s, color 0.3s; }
a { color: inherit; text-decoration: none; }
button { font: inherit; cursor: pointer; border: none; background: none; color: inherit; }

/* SPLASH */
.splash { position: fixed; inset: 0; z-index: 999; background: linear-gradient(180deg, var(--bg) 0%, var(--gold-pale) 100%); display: flex; align-items: center; justify-content: center; transition: opacity 0.5s ease; }
.splash.hide { opacity: 0; pointer-events: none; }
.splash-inner { text-align: center; padding: 20px; }
.splash-logo { width: 120px; height: 120px; margin: 0 auto 20px; }
.splash-title { font-family: var(--font-serif); font-size: calc(28px * var(--fs-scale)); font-weight: 600; margin: 0 0 6px; color: var(--navy); letter-spacing: 1.5px; }
.splash-sub { font-size: calc(12.5px * var(--fs-scale)); color: var(--text-mute); margin: 0 0 30px; }
.splash-loader { width: 40px; height: 3px; background: rgba(184,137,62,0.15); border-radius: var(--radius-xs); overflow: hidden; margin: 0 auto; }
.splash-loader div { height: 100%; background: var(--gold); animation: load 1.2s ease-in-out infinite; }
@keyframes load { 0% { transform: translateX(-100%); width: 30%; } 50% { width: 60%; } 100% { transform: translateX(150%); width: 30%; } }

/* TOPBAR */
.topbar { position: fixed; top: 0; left: 0; right: 0; z-index: 50; height: calc(var(--topbar-h) + var(--safe-top)); padding-top: var(--safe-top); background: var(--bg-elev); border-bottom: 1px solid var(--border); display: flex; align-items: center; padding-left: 8px; padding-right: 8px; backdrop-filter: saturate(180%) blur(10px); }
.topbar-title { flex: 1; text-align: center; font-family: var(--font-serif); font-size: calc(17px * var(--fs-scale)); font-weight: 600; color: var(--text); margin: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; padding: 0 8px; letter-spacing: 0.5px; }
.icon-btn { width: 44px; height: 44px; border-radius: 50%; display: inline-flex; align-items: center; justify-content: center; color: var(--text); transition: background 0.2s; }
.icon-btn:active { background: var(--bg-soft); }

/* DRAWER */
.drawer-backdrop { position: fixed; inset: 0; z-index: 90; background: rgba(0,0,0,0.5); opacity: 0; pointer-events: none; transition: opacity 0.3s; }
.drawer-backdrop.open { opacity: 1; pointer-events: auto; }
.drawer { position: fixed; top: 0; left: 0; bottom: 0; z-index: 100; width: 80%; max-width: 320px; background: var(--bg-elev); transform: translateX(-100%); transition: transform 0.3s ease; display: flex; flex-direction: column; padding-top: var(--safe-top); padding-bottom: var(--safe-bottom); overflow-y: auto; }
.drawer.open { transform: translateX(0); }
.drawer-header { background: var(--brand-surface); color: var(--on-brand); padding: 24px 20px 28px; }
.drawer-logo { display: flex; align-items: center; gap: 14px; }
.drawer-logo-img { width: 48px; height: 48px; flex-shrink: 0; }
.drawer-logo h2 { font-family: var(--font-serif); font-size: calc(17px * var(--fs-scale)); margin: 0 0 2px; font-weight: 600; letter-spacing: 1px; }
.drawer-logo p { font-size: calc(12.5px * var(--fs-scale)); margin: 0; opacity: 0.7; }
.drawer-nav { flex: 1; padding: 12px 8px; }
.drawer-link { display: flex; align-items: center; gap: 14px; padding: 12px 14px; border-radius: var(--radius-sm); color: var(--text); font-weight: 500; font-size: calc(15px * var(--fs-scale)); }
.drawer-link:active { background: var(--bg-soft); }
.drawer-link.active { background: var(--accent-soft); color: var(--accent); }
.drawer-link svg { flex-shrink: 0; opacity: 0.8; }
.drawer-divider { height: 1px; background: var(--border); margin: 12px 14px; }
.drawer-footer { padding: 16px 20px; border-top: 1px solid var(--border); color: var(--text-mute); font-size: calc(12.5px * var(--fs-scale)); }

/* MAIN */
.app { min-height: 100vh; padding-top: calc(var(--topbar-h) + var(--safe-top)); padding-bottom: calc(var(--bottombar-h) + var(--safe-bottom) + 8px); }
.content { max-width: var(--content-max); margin: 0 auto; padding: 16px; }

/* BOTTOMBAR */
.bottombar { position: fixed; left: 0; right: 0; bottom: 0; z-index: 50; height: calc(var(--bottombar-h) + var(--safe-bottom)); padding-bottom: var(--safe-bottom); background: var(--bg-elev); border-top: 1px solid var(--border); display: flex; }
.bottombar-btn { flex: 1; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 3px; padding: 8px 4px; color: var(--text-mute); font-size: calc(11px * var(--fs-scale)); font-weight: 500; transition: color 0.2s; }
.bottombar-btn.active, .bottombar-btn:active { color: var(--accent); }
.bottombar-btn svg { width: 22px; height: 22px; }

/* HOME */
.home-header { padding: 28px 20px 20px; text-align: center; }
.home-logo { width: 90px; height: 90px; margin: 0 auto 14px; display: block; }
.home-title { font-family: var(--font-serif); font-size: calc(28px * var(--fs-scale)); font-weight: 600; margin: 0 0 8px; color: var(--navy); letter-spacing: 2px; line-height: 1.15; }
.home-sub { font-size: calc(15px * var(--fs-scale)); color: var(--text-soft); margin: 0 0 22px; max-width: 300px; margin-left: auto; margin-right: auto; line-height: 1.5; }

.quick-actions { display: flex; gap: 8px; margin-bottom: 20px; overflow-x: auto; -webkit-overflow-scrolling: touch; padding: 4px 0; }
.quick-action { display: inline-flex; align-items: center; gap: 8px; padding: 10px 14px; background: var(--bg-elev); border: 1px solid var(--border); border-radius: 100px; color: var(--gold); font-size: calc(12.5px * var(--fs-scale)); font-weight: 600; flex-shrink: 0; box-shadow: var(--shadow); }
.quick-action:active { background: var(--accent-soft); }

.section-label { font-size: calc(12.5px * var(--fs-scale)); font-weight: 600; color: var(--text); margin: 0 0 12px; padding: 0 4px; }
.cat-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; }
.cat-item { background: var(--bg-elev); border: 1px solid var(--border); border-radius: var(--radius); padding: 16px 8px 14px; display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center; min-height: 110px; transition: transform 0.15s; }
.cat-item:active { transform: scale(0.96); }
.cat-icon { width: 48px; height: 48px; display: flex; align-items: center; justify-content: center; color: var(--gold); margin-bottom: 8px; }
.cat-icon svg { width: 32px; height: 32px; }
.cat-label { font-size: calc(12.5px * var(--fs-scale)); font-weight: 600; color: var(--text); line-height: 1.2; }
.cat-count { font-size: calc(11px * var(--fs-scale)); color: var(--text-mute); margin-top: 3px; }

.daily-card { background: linear-gradient(135deg, var(--gold-pale) 0%, var(--bg-elev) 100%); border-left: 3px solid var(--gold); border-radius: var(--radius); padding: 16px 18px; margin: 22px 0 16px; box-shadow: var(--shadow); }
.daily-eyebrow { font-size: calc(11px * var(--fs-scale)); letter-spacing: 1.8px; text-transform: uppercase; color: var(--gold); font-weight: 600; margin: 0 0 6px; }
.daily-num { font-family: var(--font-serif); font-size: calc(12.5px * var(--fs-scale)); color: var(--text-mute); margin: 0 0 4px; font-style: italic; }
.daily-title { font-family: var(--font-serif); font-size: calc(21px * var(--fs-scale)); font-weight: 600; margin: 0 0 10px; line-height: 1.2; color: var(--navy); }
.daily-excerpt { font-size: calc(12.5px * var(--fs-scale)); color: var(--text-soft); margin: 0 0 14px; line-height: 1.5; }
.daily-btn { display: inline-flex; align-items: center; gap: 6px; background: linear-gradient(135deg, var(--orange) 0%, var(--orange-deep) 100%); box-shadow: var(--glow-warm); color: white; padding: 9px 16px; border-radius: 100px; font-size: calc(12.5px * var(--fs-scale)); font-weight: 600; }

/* MORE */
.more-card { background: var(--bg-elev); border: 1px solid var(--border); border-radius: var(--radius); margin-bottom: 12px; overflow: hidden; }
.more-link { display: flex; align-items: center; gap: 14px; padding: 14px 16px; border-bottom: 1px solid var(--border); }
.more-link:last-child { border-bottom: none; }
.more-link:active { background: var(--bg-soft); }
.more-link-icon { width: 40px; height: 40px; border-radius: var(--radius-sm); background: var(--accent-soft); color: var(--accent); display: flex; align-items: center; justify-content: center; flex-shrink: 0; }
.more-link-content { flex: 1; }
.more-link-title { font-size: calc(15px * var(--fs-scale)); font-weight: 600; color: var(--text); }
.more-link-sub { font-size: calc(12.5px * var(--fs-scale)); color: var(--text-mute); margin-top: 1px; }
.more-link-chev { color: var(--text-mute); }

/* CATEGORY HEADER */
.cat-header { padding: 24px 20px 16px; text-align: center; border-bottom: 1px solid var(--border); margin-bottom: 16px; }
.cat-header-icon { color: var(--gold); margin-bottom: 10px; }
.cat-header-icon svg { width: 44px; height: 44px; }
.cat-header-title { font-family: var(--font-serif); font-size: calc(28px * var(--fs-scale)); font-weight: 600; color: var(--navy); margin: 0 0 4px; }
.cat-header-sub { font-size: calc(12.5px * var(--fs-scale)); color: var(--text-mute); margin: 0; }

/* TOC */
.tome-header { background: var(--bg-soft); padding: 14px 16px; margin: 16px -16px 14px; border-top: 1px solid var(--border); border-bottom: 1px solid var(--border); position: sticky; top: calc(var(--topbar-h) + var(--safe-top)); z-index: 5; }
.tome-num { font-size: calc(11px * var(--fs-scale)); letter-spacing: 2px; color: var(--gold); font-weight: 600; margin: 0 0 4px; text-transform: uppercase; }
.tome-titre { font-family: var(--font-serif); font-size: calc(17px * var(--fs-scale)); font-weight: 600; margin: 0; color: var(--navy); }
.tome-resume { font-size: calc(12.5px * var(--fs-scale)); color: var(--text-mute); margin: 2px 0 0; }
.partie-card { background: var(--bg-elev); border: 1px solid var(--border); border-radius: var(--radius); margin-bottom: 12px; overflow: hidden; }
.partie-header { padding: 14px 16px; border-bottom: 1px solid var(--border); background: var(--bg-soft); }
.partie-rom { font-size: calc(11px * var(--fs-scale)); color: var(--gold); font-weight: 600; letter-spacing: 1.5px; margin: 0; }
.partie-titre { font-family: var(--font-serif); font-size: calc(17px * var(--fs-scale)); font-weight: 600; margin: 2px 0 0; line-height: 1.3; color: var(--navy); }
.partie-meta { font-size: calc(11px * var(--fs-scale)); color: var(--text-mute); margin: 3px 0 0; }
.doctrine-list { padding: 4px 0; }
.doctrine-item { display: flex; align-items: center; gap: 12px; padding: 11px 16px; border-bottom: 1px solid var(--border); width: 100%; background: transparent; text-align: left; color: inherit; font: inherit; cursor: pointer; -webkit-tap-highlight-color: rgba(184,137,62,0.15); }
.doctrine-item:last-child { border-bottom: none; }
.doctrine-item:active { background: var(--bg-soft); }
.doctrine-num { flex-shrink: 0; width: 32px; height: 32px; border-radius: 50%; background: var(--accent-soft); color: var(--accent); display: flex; align-items: center; justify-content: center; font-family: var(--font-serif); font-size: calc(15px * var(--fs-scale)); font-weight: 600; }
.doctrine-titre { flex: 1; font-size: calc(15px * var(--fs-scale)); font-weight: 500; line-height: 1.3; }
.doctrine-chev { color: var(--text-mute); flex-shrink: 0; }

/* DOCTRINE */
.doctrine-page { background: var(--bg-elev); border-radius: 0 0 var(--radius-lg) var(--radius-lg); padding: 24px 20px 28px; margin: 0 auto 16px; max-width: var(--content-max); border-bottom: 1px solid var(--border); }
.doctrine-breadcrumb { font-size: calc(12.5px * var(--fs-scale)); color: var(--text-mute); margin: 0 0 14px; display: flex; gap: 6px; flex-wrap: wrap; align-items: center; }
.doctrine-breadcrumb .sep { opacity: 0.5; }
.doctrine-breadcrumb a { color: var(--gold); }
.doctrine-eyebrow { font-family: var(--font-serif); font-size: calc(15px * var(--fs-scale)); color: var(--gold); font-weight: 500; font-style: italic; margin: 0 0 8px; }
.doctrine-titre-h { font-family: var(--font-serif); font-size: calc(28px * var(--fs-scale)); font-weight: 600; margin: 0 0 20px; line-height: 1.15; color: var(--navy); }
.doctrine-actions { display: flex; gap: 6px; flex-wrap: wrap; }
.action-btn { display: inline-flex; align-items: center; gap: 6px; padding: 8px 14px; border-radius: 100px; background: var(--bg-soft); color: var(--text); font-size: calc(12.5px * var(--fs-scale)); font-weight: 500; border: 1px solid var(--border); }
.action-btn:active { background: var(--border); }
.action-btn.active { background: var(--gold); color: var(--on-gold); border-color: var(--gold); }

.section { padding: 20px 16px 8px; max-width: var(--content-max); margin: 0 auto; }
.section-titre { font-family: var(--font-serif); font-size: calc(12.5px * var(--fs-scale)); letter-spacing: 2.5px; text-transform: uppercase; color: var(--gold); font-weight: 600; margin: 0 0 12px; display: flex; align-items: center; gap: 10px; }
.section-titre::before, .section-titre::after { content: ''; flex: 1; height: 1px; background: var(--border); }
.section-body { font-family: var(--font-serif); font-size: calc(17px * var(--fs-scale)); line-height: 1.7; color: var(--text); text-align: justify; hyphens: auto; }
.section-body p { margin: 0 0 14px; }

.refs-section { padding: 12px 16px 0; max-width: var(--content-max); margin: 0 auto; }
.refs-header { font-family: var(--font-serif); font-size: calc(15px * var(--fs-scale)); font-weight: 600; color: var(--navy); margin: 12px 0 10px; }
.refs-grid { display: flex; flex-wrap: wrap; gap: 6px; padding-bottom: 8px; }
.verset-btn { display: inline-block; background: var(--bg-elev); border: 1px solid var(--border); color: var(--text); padding: 7px 12px; border-radius: 100px; font-size: calc(12.5px * var(--fs-scale)); font-weight: 500; user-select: none; }
.verset-btn:active { background: var(--gold); color: var(--on-gold); border-color: var(--gold); }
.refs-empty { color: var(--text-mute); font-size: calc(12.5px * var(--fs-scale)); font-style: italic; }

/* SEARCH */
/* La marge negative de -16 px supposait un parent avec 16 px de padding. Le
   parent est #app, qui n'en a pas : tout le contenu de la barre (champ de
   saisie, ligne Version, filtres) collait au bord de l'ecran. Le fond reste
   pleine largeur — c'est le padding qui remet le contenu en retrait. */
.search-bar { position: sticky; top: calc(var(--topbar-h) + var(--safe-top)); z-index: 10; background: var(--bg); padding: 14px 16px 8px; margin: 0 0 8px; }
.search-input-wrap { position: relative; background: var(--bg-elev); border: 1px solid var(--border); border-radius: 100px; display: flex; align-items: center; padding: 0 14px; box-shadow: var(--shadow); }
.search-input-wrap svg { color: var(--text-mute); flex-shrink: 0; }
.search-input { flex: 1; border: none; background: transparent; padding: 12px 8px; font-size: calc(15px * var(--fs-scale)); color: var(--text); outline: none; font-family: inherit; }
.search-clear { width: 28px; height: 28px; border-radius: 50%; background: var(--bg-soft); color: var(--text-mute); display: none; align-items: center; justify-content: center; }
.search-clear.show { display: flex; }
.search-tabs { display: flex; gap: 4px; overflow-x: auto; padding: 8px 0 12px; -webkit-overflow-scrolling: touch; }
.search-tab { padding: 7px 14px; font-size: calc(12.5px * var(--fs-scale)); font-weight: 500; color: var(--text-mute); border-radius: 100px; white-space: nowrap; border: 1px solid transparent; flex-shrink: 0; }
.search-tab.active { color: var(--on-gold); background: var(--gold); border-color: var(--gold); }
.search-results { padding-top: 12px; }
.search-empty { text-align: center; padding: 60px 20px; color: var(--text-mute); }
.search-empty-icon { font-size: calc(44px * var(--fs-scale)); opacity: 0.3; margin-bottom: 12px; }
.search-section-header { display: flex; justify-content: space-between; align-items: center; padding: 4px 4px 8px; font-size: calc(11px * var(--fs-scale)); letter-spacing: 1.5px; text-transform: uppercase; font-weight: 600; color: var(--gold); }
.search-section-header span:last-child { font-size: calc(11px * var(--fs-scale)); color: var(--text-mute); letter-spacing: 0; text-transform: none; }
.search-result { background: var(--bg-elev); border: 1px solid var(--border); border-radius: var(--radius); padding: 14px 16px; margin-bottom: 10px; display: block; }
.search-result:active { background: var(--bg-soft); }
.search-result-type { font-size: calc(11px * var(--fs-scale)); letter-spacing: 1.5px; color: var(--gold); font-weight: 600; text-transform: uppercase; margin: 0; }
.search-result-title { font-family: var(--font-serif); font-size: calc(17px * var(--fs-scale)); font-weight: 600; margin: 2px 0 4px; color: var(--navy); }
.search-result-meta { font-size: calc(11px * var(--fs-scale)); color: var(--text-mute); margin-bottom: 6px; }
.search-result-excerpt { font-size: calc(12.5px * var(--fs-scale)); color: var(--text-soft); line-height: 1.5; margin: 0; }
.search-result mark, .search-result-title mark, .search-result-excerpt mark { background: var(--accent-soft); color: var(--accent); padding: 1px 4px; border-radius: var(--radius-xs); font-weight: 600; }

.bsearch-version-pick { display: inline-flex; align-items: center; gap: 4px; padding: 4px 10px; background: var(--bg-elev); border: 1px solid var(--border); border-radius: 100px; font-size: calc(12.5px * var(--fs-scale)); color: var(--text); }
/* Les quatre filtres de portee tiennent sur UNE ligne : « Livre... » passait
   a la ligne suivante (384 px cumules pour 375 disponibles). Libelles
   raccourcis (« Ancien », « Nouveau ») et pas de retour a la ligne. Aux tres
   grandes tailles de texte, la rangee defile plutot que de se casser. */
.bsearch-scope { display: flex; flex-wrap: nowrap; gap: 6px; margin-top: 10px; overflow-x: auto; scrollbar-width: none; -webkit-overflow-scrolling: touch; }
.bsearch-scope::-webkit-scrollbar { display: none; }
.bsearch-scope-btn { display: inline-flex; align-items: center; gap: 3px; flex: 0 0 auto; white-space: nowrap; padding: 5px 9px; background: var(--bg-elev); border: 1px solid var(--border); border-radius: 100px; font-size: calc(12.5px * var(--fs-scale)); font-weight: 600; color: var(--text-mute); cursor: pointer; -webkit-tap-highlight-color: transparent; }
.bsearch-scope-btn.active { background: var(--gold); border-color: var(--gold); color: var(--on-gold); }
[data-theme="dark"] .bsearch-scope-btn { border-color: rgba(255,255,255,0.08); }
[data-theme="dark"] .bsearch-scope-btn.active { color: #0A0A0F; }
.book-picker-list { max-height: 62vh; overflow-y: auto; padding: 4px 4px 8px; }
.book-picker-section { font-size: calc(11px * var(--fs-scale)); text-transform: uppercase; letter-spacing: 0.5px; color: var(--text-mute); font-weight: 700; margin: 12px 6px 6px; }
.book-picker-section:first-child { margin-top: 4px; }
.book-picker-item { display: block; width: 100%; text-align: left; padding: 11px 14px; background: transparent; border: 0; border-radius: var(--radius-sm); font-size: calc(15px * var(--fs-scale)); color: var(--text); cursor: pointer; }
.book-picker-item:active { background: var(--bg-soft); }
.book-picker-item.active { background: var(--accent-soft); color: var(--accent); font-weight: 600; }

/* DICTIONNAIRE */
.dict-wrap { position: relative; padding-right: 28px; }
.dict-alpha { position: fixed; right: 6px; top: calc(var(--topbar-h) + var(--safe-top) + 24px); bottom: calc(var(--bottombar-h) + var(--safe-bottom) + 16px); z-index: 20; display: flex; flex-direction: column; justify-content: center; padding: 4px 0; font-size: calc(11px * var(--fs-scale)); font-weight: 700; background: var(--bg-elev); border-radius: 100px; border: 1px solid var(--border); box-shadow: var(--shadow); width: 22px; }
.dict-alpha a { flex: 1; display: flex; align-items: center; justify-content: center; color: var(--text-mute); font-size: calc(11px * var(--fs-scale)); }
.dict-alpha a.active { color: var(--gold); font-weight: 800; }
.dict-search-wrap { background: var(--bg-elev); border: 1px solid var(--border); border-radius: 100px; display: flex; align-items: center; padding: 0 14px; margin-bottom: 14px; box-shadow: var(--shadow); }
.dict-search-wrap svg { color: var(--text-mute); flex-shrink: 0; }
.dict-search { flex: 1; border: none; background: transparent; padding: 11px 8px; font-size: calc(15px * var(--fs-scale)); color: var(--text); outline: none; font-family: inherit; }
.dict-entry { background: var(--bg-elev); border-left: 3px solid var(--gold); padding: 13px 16px; margin-bottom: 8px; border-radius: 0 var(--radius) var(--radius) 0; }
.dict-mot { font-family: var(--font-serif); font-size: calc(17px * var(--fs-scale)); font-weight: 600; color: var(--navy); margin: 0 0 3px; }
.dict-cat { display: inline-block; font-size: calc(11px * var(--fs-scale)); letter-spacing: 1.5px; text-transform: uppercase; color: var(--text-mute); background: var(--bg-soft); padding: 2px 8px; border-radius: 100px; margin-bottom: 6px; font-weight: 600; }
.dict-def { font-size: calc(15px * var(--fs-scale)); line-height: 1.7; color: var(--text-soft); margin: 0; }
.dict-letter-header { font-family: var(--font-serif); font-size: calc(28px * var(--fs-scale)); font-weight: 700; color: var(--gold); margin: 18px 0 8px; border-bottom: 2px solid var(--accent-soft); padding-bottom: 4px; }

/* EMPTY */
.empty-state { text-align: center; padding: 60px 20px; color: var(--text-mute); }
.empty-state-icon { font-size: calc(44px * var(--fs-scale)); opacity: 0.3; margin-bottom: 14px; color: var(--gold); }
.empty-state-title { font-family: var(--font-serif); font-size: calc(21px * var(--fs-scale)); color: var(--navy); margin: 0 0 6px; font-weight: 600; }
.empty-state-msg { font-size: calc(15px * var(--fs-scale)); line-height: 1.6; }

/* SETTINGS */
.setting-group { background: var(--bg-elev); border-radius: var(--radius); margin-bottom: 14px; border: 1px solid var(--border); overflow: hidden; }
.setting-group-title { font-family: var(--font-serif); font-size: calc(12.5px * var(--fs-scale)); letter-spacing: 1.5px; text-transform: uppercase; color: var(--gold); font-weight: 600; padding: 14px 16px 4px; margin: 0; }
.setting-row { display: flex; align-items: center; justify-content: space-between; padding: 14px 16px; border-top: 1px solid var(--border); }
.setting-block { padding: 14px 16px; border-top: 1px solid var(--border); }
.setting-block .setting-label { margin-bottom: 10px; }
.setting-label { font-size: calc(15px * var(--fs-scale)); color: var(--text); flex: 1; }
.setting-label small { display: block; font-size: calc(11px * var(--fs-scale)); color: var(--text-mute); margin-top: 2px; }
.fontsize-options { display: flex; gap: 6px; }
.fs-btn { width: 32px; height: 32px; border-radius: 50%; display: flex; align-items: center; justify-content: center; background: var(--bg-soft); border: 1px solid var(--border); color: var(--text-soft); font-weight: 600; }
.fs-btn.active { background: var(--gold); color: var(--on-gold); border-color: var(--gold); }
.version-pref-item { display: flex; align-items: center; justify-content: space-between; gap: 10px; width: 100%; text-align: left; padding: 12px 14px; border-radius: var(--radius-sm); background: var(--bg-soft); border: 1px solid var(--border); font-size: calc(15px * var(--fs-scale)); color: var(--text); cursor: pointer; transition: background .15s, border-color .15s, color .15s; }
.version-pref-item:active { transform: scale(0.98); }
.version-pref-item.active { background: var(--accent-soft); color: var(--accent); font-weight: 600; border-color: var(--accent); }
.version-pref-check { opacity: 0; flex-shrink: 0; transition: opacity .15s; }
.version-pref-item.active .version-pref-check { opacity: 1; }

/* ABOUT */
.credit-row { display: flex; align-items: center; justify-content: space-between; padding: 13px 16px; border-top: 1px solid var(--border); }
.credit-key { font-size: calc(12.5px * var(--fs-scale)); color: var(--text-mute); }
.credit-val { font-family: var(--font-serif); font-size: calc(15px * var(--fs-scale)); color: var(--accent); font-style: italic; letter-spacing: 0.2px; }
.about-hero { background: var(--brand-surface); color: var(--on-brand); margin: 0; padding: 28px 20px; border-radius: 0 0 var(--radius-lg) var(--radius-lg); text-align: center; }
.about-logo { width: 70px; height: 70px; margin: 0 auto 10px; }
.about-hero h2 { font-family: var(--font-serif); font-size: calc(28px * var(--fs-scale)); margin: 0 0 4px; font-weight: 600; letter-spacing: 1px; }
.about-hero p { margin: 0; opacity: 0.75; font-size: calc(12.5px * var(--fs-scale)); }
.about-text { font-family: var(--font-serif); font-size: calc(15px * var(--fs-scale)); line-height: 1.7; color: var(--text); text-align: justify; hyphens: auto; }
.about-text p { margin: 0 0 14px; }

/* MODAL */
.modal-backdrop { position: fixed; inset: 0; z-index: 90; background: rgba(0,0,0,0.5); opacity: 0; pointer-events: none; transition: opacity 0.25s; }
.modal-backdrop.open { opacity: 1; pointer-events: auto; }
.modal { position: fixed; left: 0; right: 0; bottom: 0; z-index: 100; background: var(--modal-bg, var(--bg-elev)); border-radius: var(--radius-lg) var(--radius-lg) 0 0; padding: 20px 16px calc(20px + var(--safe-bottom)); transform: translateY(100%); transition: transform 0.3s ease; max-height: 88vh; overflow-y: auto; }
.modal.open { transform: translateY(0); }
/* Poignee des fenetres contextuelles : vrai bouton, pleine largeur, avec une
   hauteur de prise confortable. Elle etait un pseudo-element (.modal::before)
   et n a jamais pu recevoir de toucher — la barre ne servait a rien. */
.modal-grab { display: block; width: 100%; padding: 0; border: 0; background: none; height: 26px; margin: -12px 0 8px; cursor: pointer; -webkit-tap-highlight-color: transparent; }
.modal-grab::before { content: ''; display: block; width: 40px; height: 4px; background: var(--border); border-radius: var(--radius-xs); margin: 11px auto 0; transition: width .18s var(--ease), background .18s var(--ease); }
.modal-grab:active::before { width: 56px; background: var(--text-mute); }
.modal-header { display: flex; align-items: center; gap: 12px; margin-bottom: 4px; }
.modal-header h3 { font-family: var(--font-serif); font-size: calc(17px * var(--fs-scale)); font-weight: 600; margin: 0; flex: 1; color: var(--navy); }
.modal-sub { font-size: calc(12.5px * var(--fs-scale)); color: var(--text-mute); margin: 0 0 16px; }
.modal-actions { display: grid; grid-template-columns: repeat(5, 1fr); gap: 2px; padding: 10px 0 14px; border-top: 1px solid var(--border); border-bottom: 1px solid var(--border); margin-bottom: 14px; }
.modal-action { display: flex; flex-direction: column; align-items: center; gap: 4px; padding: 9px 2px; font-size: calc(11px * var(--fs-scale)); font-weight: 500; color: var(--text-soft); border-radius: var(--radius-sm); min-width: 0; }
.modal-action span { line-height: 1.1; text-align: center; }
.modal-action:active { background: var(--bg-soft); }
.modal-action svg { color: var(--gold); }
.modal-action.active svg { fill: var(--gold); }
.modal-versions { display: flex; flex-direction: column; gap: 8px; }
.modal-versions-label { font-family: var(--font-serif); font-size: calc(12.5px * var(--fs-scale)); letter-spacing: 1.5px; text-transform: uppercase; color: var(--gold); font-weight: 600; margin: 4px 0 10px; }
.modal-version-btn { display: flex; align-items: center; gap: 14px; padding: 12px 14px; background: var(--bg-soft); border: 1px solid var(--border); border-radius: var(--radius); text-align: left; width: 100%; }
.modal-version-btn:active, .modal-version-btn.active { background: var(--accent-soft); }
/* La pastille de version porte jusqu a 4 lettres (LSGS) : largeur minimale
   plutot que fixe, sinon le sigle est rogne aux grandes tailles de texte. */
.modal-version-code { min-width: 46px; height: 46px; border-radius: var(--radius-sm); background: var(--gold); color: var(--on-gold); display: flex; align-items: center; justify-content: center; font-weight: 700; font-size: calc(12.5px * var(--fs-scale)); flex-shrink: 0; letter-spacing: 0.5px; text-align: center; line-height: 1.05; padding: 0 6px; }
.modal-version-name { font-weight: 600; font-size: calc(15px * var(--fs-scale)); color: var(--text); }
.modal-version-desc { font-size: calc(11px * var(--fs-scale)); color: var(--text-mute); margin-top: 2px; }
/* Liste des autres versions : rassemblee et repliable (native <details>). */
.modal-versions-box { margin: 4px 0 6px; }
.modal-versions-box > .modal-versions { margin-top: 10px; }
.modal-versions-summary { list-style: none; cursor: pointer; display: flex; align-items: center; gap: 10px; padding: 12px 14px; background: var(--bg-soft); border: 1px solid var(--border); border-radius: var(--radius); font-family: var(--font-serif); font-size: calc(13px * var(--fs-scale)); letter-spacing: 1px; text-transform: uppercase; color: var(--gold); font-weight: 600; }
.modal-versions-summary::-webkit-details-marker { display: none; }
.modal-versions-summary::after { content: '⌄'; margin-left: auto; font-size: calc(16px * var(--fs-scale)); line-height: 1; transition: transform .2s var(--ease); color: var(--text-mute); }
.modal-versions-box[open] > .modal-versions-summary::after { transform: rotate(180deg); }
.modal-versions-summary .mvs-count { margin-left: 0; min-width: 22px; height: 22px; padding: 0 6px; border-radius: 100px; background: var(--gold); color: var(--on-gold); display: inline-flex; align-items: center; justify-content: center; font-family: var(--font-sans); font-size: calc(11px * var(--fs-scale)); letter-spacing: 0; }
.modal-versions-summary:active { background: var(--accent-soft); }

.modal-note-textarea { width: 100%; min-height: 80px; padding: 10px 12px; border: 1px solid var(--border); border-radius: var(--radius-sm); background: var(--bg-soft); font-family: inherit; font-size: calc(15px * var(--fs-scale)); color: var(--text); resize: vertical; outline: none; margin-bottom: 10px; }
.modal-note-textarea:focus { border-color: var(--gold); }
.modal-note-save { background: var(--gold); color: var(--on-gold); padding: 9px 16px; border-radius: 100px; font-size: calc(12.5px * var(--fs-scale)); font-weight: 600; display: inline-flex; align-items: center; gap: 6px; }

/* HIGHLIGHT COLORS */
/* Sélecteur de couleurs (mode surlignage) : pastilles élégantes + nom */
.hl-colors { display: flex; gap: 14px; flex-wrap: wrap; justify-content: center; padding: 6px 0 4px; }
.hl-color-btn { display: flex; flex-direction: column; align-items: center; gap: 6px; font-size: calc(12.5px * var(--fs-scale)); font-weight: 600; color: var(--text-soft); background: none; border: 0; transition: transform .12s; }
.hl-color-btn::before { content: ''; width: 40px; height: 40px; border-radius: 50%; background: var(--_c); box-shadow: inset 0 0 0 1px rgba(0,0,0,0.12); transition: box-shadow .15s; }
.hl-color-btn:active { transform: scale(0.92); }
.hl-color-btn.active::before { box-shadow: 0 0 0 3px var(--bg-elev), 0 0 0 5px var(--accent); }

/* Verset surligné dans le lecteur : texte foncé lisible sur la couleur claire */
.chapter-text [style*="border-left"] .chap-verse-num,
.chapter-text [style*="background"] .chap-verse-num { color: #8a6d1a !important; }
.chapter-text .chap-verse[style*="background"],
.chapter-text .chap-verse[style*="background"] * { color: #1A1A1A !important; }

/* Barre d'action rapide sous le verset (menu contextuel) */
.verse-quickbar { display: flex; align-items: center; justify-content: space-between; gap: 10px; flex-wrap: wrap; padding: 12px 0 4px; }
.vq-swatches { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; }
.vq-swatch { width: 20px; height: 20px; border-radius: 50%; box-shadow: inset 0 0 0 1px rgba(0,0,0,0.12); transition: transform .12s; }
.vq-swatch:active { transform: scale(0.88); }
.vq-swatch.active { box-shadow: 0 0 0 2px var(--bg-elev), 0 0 0 4px var(--accent); }
.vq-erase { display: inline-flex; align-items: center; justify-content: center; background: var(--bg-soft); color: var(--text-mute); box-shadow: inset 0 0 0 1px var(--border); }
.vq-copy { display: inline-flex; align-items: center; gap: 6px; padding: 8px 16px; border-radius: 100px; background: var(--bg-soft); border: 1px solid var(--border); font-size: calc(12.5px * var(--fs-scale)); font-weight: 600; color: var(--text); }
.vq-copy:active { background: var(--accent-soft); }
.vq-copy svg { color: var(--gold); }

/* Doctrines qui citent ce verset */
.modal-doctrines { display: flex; flex-direction: column; gap: 8px; margin-bottom: 14px; }
.modal-doctrine-link { display: flex; align-items: center; gap: 12px; padding: 11px 14px; background: var(--bg-elev); border: 1px solid var(--border); border-radius: var(--radius); box-shadow: var(--shadow-1); }
.modal-doctrine-link:active { background: var(--bg-soft); }
.modal-doctrine-link .md-num { flex-shrink: 0; width: 30px; height: 30px; border-radius: 50%; background: var(--accent-soft); color: var(--accent); display: flex; align-items: center; justify-content: center; font-family: var(--font-serif); font-weight: 700; font-size: calc(15px * var(--fs-scale)); }
.modal-doctrine-link .md-titre { flex: 1; font-size: calc(15px * var(--fs-scale)); font-weight: 600; color: var(--text); }
.modal-doctrine-link .md-go { color: var(--text-mute); }

/* Cartes de versets surlignés (liste) : propre et lisible dans tous les thèmes */
.hl-card { display: flex; align-items: center; gap: 12px; padding: 13px 15px; background: var(--bg-elev); border: 1px solid var(--border); border-radius: var(--radius); box-shadow: var(--shadow-1); margin-bottom: 10px; }
.hl-card:active { background: var(--bg-soft); }
.hl-dot { flex-shrink: 0; width: 14px; height: 14px; border-radius: 50%; box-shadow: inset 0 0 0 1px rgba(0,0,0,0.15); }
.hl-card-body { flex: 1; min-width: 0; }
.hl-card-ref { font-family: var(--font-serif); font-size: calc(15px * var(--fs-scale)); font-weight: 600; color: var(--navy); }
.hl-card-sub { font-size: calc(12.5px * var(--fs-scale)); color: var(--text-mute); }

/* LSG PREVIEW */
.lsg-preview { background: var(--bg-soft); border-radius: var(--radius); padding: 14px 16px; margin: 4px 0 14px; border-left: 3px solid var(--gold); }
.lsg-label { font-size: calc(11px * var(--fs-scale)); letter-spacing: 1.5px; text-transform: uppercase; color: var(--gold); font-weight: 600; margin-bottom: 8px; }
.lsg-text { font-family: var(--font-serif); font-size: calc(18px * var(--fs-scale)); line-height: 1.7; color: var(--text); text-align: justify; hyphens: auto; max-height: 42vh; overflow-y: auto; }
/* Pied de la carte du verset : pastilles de couleur (gauche) face a « Lire le
   chapitre » (droite). Sur ecran etroit, les elements passent a la ligne. */
.lsg-card-foot { display: flex; align-items: center; justify-content: space-between; gap: 10px; flex-wrap: wrap; margin-top: 12px; }
.lsg-card-foot .lsg-read-chapter { margin-top: 0; margin-left: auto; }
.lsg-card-foot .vq-swatches { flex: 0 1 auto; }
.lsg-text .lsg-verse-num { font-size: calc(11px * var(--fs-scale)); color: var(--gold); font-weight: 600; font-family: var(--font-sans); vertical-align: super; margin-right: 3px; margin-left: 2px; }
.lsg-loading { display: flex; align-items: center; gap: 10px; padding: 18px 16px; }
.lsg-loader { width: 18px; height: 18px; border: 2px solid var(--border); border-top-color: var(--gold); border-radius: 50%; animation: spin 0.8s linear infinite; flex-shrink: 0; }
@keyframes spin { to { transform: rotate(360deg); } }
.lsg-loading-text { font-size: calc(12.5px * var(--fs-scale)); color: var(--text-mute); margin: 0; font-style: italic; }
.lsg-error { display: flex; align-items: center; gap: 10px; color: var(--text-mute); }
.lsg-error svg { color: var(--text-mute); flex-shrink: 0; }
.lsg-error p { font-size: calc(12.5px * var(--fs-scale)); margin: 0; line-height: 1.5; }
.lsg-read-chapter { display: inline-flex; align-items: center; gap: 6px; margin-top: 10px; padding: 7px 12px; background: var(--bg-elev); border: 1px solid var(--border); color: var(--gold); border-radius: 100px; font-size: calc(12.5px * var(--fs-scale)); font-weight: 600; }
.lsg-read-chapter:active { background: var(--gold); color: var(--on-gold); border-color: var(--gold); }

/* CHAPTER */
.chapter-page { padding: 0; }
.chapter-toolbar { position: sticky; top: calc(var(--topbar-h) + var(--safe-top)); z-index: 9; display: flex; align-items: center; justify-content: space-between; gap: 8px; padding: 10px 16px; background: var(--bg); border-bottom: 1px solid var(--border); }
.chapter-book-pick { display: inline-flex; align-items: center; gap: 8px; padding: 7px 14px; background: var(--bg-elev); border: 1px solid var(--border); border-radius: 100px; font-family: var(--font-serif); font-size: calc(15px * var(--fs-scale)); font-weight: 600; color: var(--text); flex: 1; max-width: 60%; }
.chapter-book-pick:active { background: var(--bg-soft); }
.chapter-book-name { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.chapter-version-pick { display: inline-flex; align-items: center; gap: 4px; padding: 7px 12px; background: var(--accent-soft); border: 0; border-radius: 100px; font-size: calc(12.5px * var(--fs-scale)); font-weight: 700; color: var(--gold); flex-shrink: 0; }
.chapter-compare-btn { display: inline-flex; align-items: center; justify-content: center; width: 36px; height: 36px; border-radius: 50%; background: var(--bg-elev); border: 1px solid var(--border); color: var(--gold); flex-shrink: 0; }
.chapter-compare-btn:active { background: var(--accent-soft); }

.chapter-body { max-width: var(--content-max); margin: 0 auto; padding: 24px 20px 8px; }
.chapter-h { font-family: var(--font-serif); font-weight: 600; color: var(--navy); text-align: center; margin: 0 0 24px; font-size: calc(21px * var(--fs-scale)); letter-spacing: 1px; line-height: 1.2; }
.chapter-h-num { display: inline-block; font-size: calc(44px * var(--fs-scale)); color: var(--gold); margin-top: 4px; font-weight: 400; }
.chapter-text { font-family: var(--font-serif); font-size: calc(17px * var(--fs-scale)); line-height: 1.8; color: var(--text); text-align: justify; hyphens: auto; }
/* Sélection maison uniquement : on bloque la sélection native d'Android
   (poignées bleues + menu système) qui se superposait au surlignage de l'app
   et troublait l'utilisateur. Après l'appui long, seule la ligne de
   soulignement de l'app apparaît. */
.chapter-text, .chapter-text-mono, .chapter-text *, .chapter-text-mono * {
  -webkit-user-select: none; user-select: none;
  -webkit-touch-callout: none;
}
.chap-verse { display: inline; cursor: pointer; }
.chap-verse-num { font-family: var(--font-sans); font-size: calc(11px * var(--fs-scale)); font-weight: 600; color: var(--gold); vertical-align: super; margin-right: 3px; margin-left: 4px; }
.chap-verse-hl { background: var(--accent-soft); padding: 2px 4px; border-radius: var(--radius-xs); }
.chapter-loading { display: flex; flex-direction: column; align-items: center; padding: 80px 20px; gap: 14px; color: var(--text-mute); }
.chapter-loading p { margin: 0; font-size: calc(12.5px * var(--fs-scale)); }
.chapter-error { padding: 40px 20px; text-align: center; color: var(--text-mute); }
.chapter-error p { margin: 0 0 16px; font-size: calc(15px * var(--fs-scale)); line-height: 1.6; }
.chapter-nav { max-width: var(--content-max); margin: 16px auto 24px; padding: 16px 16px 0; display: grid; grid-template-columns: 1fr 1fr; gap: 8px; border-top: 1px solid var(--border); }
.chapter-nav-btn { display: flex; align-items: center; gap: 10px; padding: 12px 14px; background: var(--bg-elev); border: 1px solid var(--border); border-radius: var(--radius); color: var(--text); font-size: calc(15px * var(--fs-scale)); font-weight: 600; line-height: 1.3; }
.chapter-nav-btn.right { justify-content: flex-end; }
.chapter-nav-btn:active { background: var(--bg-soft); }
.chapter-nav-btn small { font-size: calc(11px * var(--fs-scale)); letter-spacing: 1px; text-transform: uppercase; color: var(--gold); font-weight: 600; }
.chapter-nav-btn svg { color: var(--gold); flex-shrink: 0; }

/* BOOK / CHAPTER PICKERS */
.book-picker { max-height: 60vh; overflow-y: auto; padding-bottom: 8px; }
.book-picker-section { margin-bottom: 18px; }
.book-picker-section-title { font-family: var(--font-serif); font-size: calc(11px * var(--fs-scale)); letter-spacing: 1.5px; text-transform: uppercase; color: var(--gold); font-weight: 600; margin: 0 0 10px; padding: 0 4px; }
.book-picker-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 6px; }
.book-picker-item { padding: 11px 12px; background: var(--bg-soft); border: 1px solid var(--border); border-radius: var(--radius-sm); color: var(--text); font-size: calc(12.5px * var(--fs-scale)); font-weight: 500; text-align: left; font-family: var(--font-serif); }
.book-picker-item:active { background: var(--accent-soft); }
.chapter-picker-grid { display: grid; grid-template-columns: repeat(6, 1fr); gap: 6px; max-height: 60vh; overflow-y: auto; padding-bottom: 8px; }
.chapter-picker-item { display: flex; align-items: center; justify-content: center; aspect-ratio: 1; background: var(--bg-soft); border: 1px solid var(--border); border-radius: var(--radius-sm); color: var(--text); font-family: var(--font-serif); font-size: calc(15px * var(--fs-scale)); font-weight: 600; }
.chapter-picker-item:active { background: var(--accent-soft); color: var(--accent); }

/* COMPARE */
.compare-versions { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; padding: 8px 16px; }
.cmp-version-pick { display: inline-flex; align-items: center; justify-content: center; gap: 4px; padding: 7px 10px; background: var(--accent-soft); border: 0; border-radius: 100px; font-size: calc(12.5px * var(--fs-scale)); font-weight: 700; color: var(--gold); }
.compare-grid { padding: 8px 16px 32px; max-width: var(--content-max); margin: 0 auto; }
.cmp-row { display: grid; grid-template-columns: 28px 1fr 1fr; gap: 8px; padding: 12px 0; border-bottom: 1px solid var(--border); }
.cmp-vnum { font-family: var(--font-sans); font-size: calc(12.5px * var(--fs-scale)); font-weight: 700; color: var(--gold); text-align: right; padding-top: 2px; }
.cmp-text { font-family: var(--font-serif); font-size: calc(15px * var(--fs-scale)); line-height: 1.55; color: var(--text); }
.cmp-label { display: block; font-size: calc(11px * var(--fs-scale)); letter-spacing: 1.2px; text-transform: uppercase; color: var(--gold); font-weight: 700; margin-bottom: 3px; }

/* TOAST */
.toast { position: fixed; bottom: calc(var(--bottombar-h) + var(--safe-bottom) + 16px); left: 50%; transform: translateX(-50%) translateY(20px); background: var(--navy-dark); color: white; padding: 10px 18px; border-radius: 100px; font-size: calc(12.5px * var(--fs-scale)); font-weight: 500; opacity: 0; pointer-events: none; transition: all 0.3s; z-index: 200; box-shadow: var(--shadow-lg); }
.toast.show { opacity: 1; transform: translateX(-50%) translateY(0); }

/* FONT SIZE */
[data-fontsize="s"] .chapter-text, [data-fontsize="s"] .section-body { font-size: 15px; }
[data-fontsize="m"] .chapter-text, [data-fontsize="m"] .section-body { font-size: 18px; }
[data-fontsize="l"] .chapter-text, [data-fontsize="l"] .section-body { font-size: 21px; }
[data-fontsize="xl"] .chapter-text, [data-fontsize="xl"] .section-body { font-size: 24px; }
[data-fontsize="s"] .doctrine-titre-h { font-size: 28px; }
[data-fontsize="l"] .doctrine-titre-h { font-size: 34px; }
[data-fontsize="xl"] .doctrine-titre-h { font-size: 38px; }

@media (min-width: 768px) {
  .home-header { padding: 48px 32px 28px; }
  .home-title { font-size: calc(28px * var(--fs-scale)); }
  .home-logo { width: 110px; height: 110px; }
  .cat-grid { grid-template-columns: repeat(4, 1fr); }
}
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: 0.01ms !important; transition-duration: 0.01ms !important; }
}

/* === PAROLES DE JÉSUS EN ROUGE === */
.jesus-word { color: #C53030; }
[data-theme="dark"] .jesus-word { color: #FF8B8B; }
[data-theme="noir"] .jesus-word { color: #FF9090; }
[data-theme="sepia"] .jesus-word { color: #8B2C0C; }

/* === TOGGLE SWITCH === */
.toggle-switch { width: 48px; height: 28px; background: var(--bg-soft); border-radius: 100px; position: relative; transition: background 0.2s; border: 1px solid var(--border); cursor: pointer; }
.toggle-switch span { position: absolute; left: 2px; top: 2px; width: 22px; height: 22px; background: white; border-radius: 50%; transition: left 0.2s; box-shadow: var(--shadow-1); }
.toggle-switch.on { background: var(--gold); border-color: var(--gold); }
.toggle-switch.on span { left: 22px; }

/* === STRONG WORDS === */
.strong-words-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(110px, 1fr)); gap: 8px; }
.strong-word-card { display: flex; flex-direction: column; align-items: center; gap: 4px; padding: 10px 8px; background: var(--bg-soft); border: 1px solid var(--border); border-radius: var(--radius-sm); text-align: center; }
.strong-word-card:active { background: var(--accent-soft); }
.strong-word-orig { font-size: calc(17px * var(--fs-scale)); font-weight: 600; color: var(--navy); direction: rtl; }
.strong-word-card[lang="grc"] .strong-word-orig { direction: ltr; }
.strong-word-trans { font-family: var(--font-serif); font-size: calc(15px * var(--fs-scale)); color: var(--text); font-style: italic; }
.strong-word-code { font-size: calc(11px * var(--fs-scale)); color: var(--gold); font-weight: 700; letter-spacing: 0.5px; }

.strong-detail { padding: 8px 0; }
.strong-detail-head { text-align: center; padding-bottom: 14px; border-bottom: 1px solid var(--border); margin-bottom: 8px; }
.strong-detail-orig { font-size: calc(28px * var(--fs-scale)); font-weight: 600; color: var(--navy); line-height: 1.2; margin-bottom: 4px; }
.strong-detail-translit { font-family: var(--font-serif); font-size: calc(17px * var(--fs-scale)); color: var(--gold); font-style: italic; margin-bottom: 4px; }
.strong-detail-pho { font-size: calc(12.5px * var(--fs-scale)); color: var(--text-mute); }
.strong-detail-def { font-size: calc(15px * var(--fs-scale)); line-height: 1.7; color: var(--text); }
.strong-detail-def ol { padding-left: 18px; }
.strong-detail-def li { margin-bottom: 4px; }
.strong-detail-def em { color: var(--gold); font-style: italic; }

/* === STRONG SEARCH === */
.strong-tabs { display: flex; gap: 6px; padding: 6px 0; }
.strong-tab { flex: 1; padding: 10px 14px; font-size: calc(15px * var(--fs-scale)); font-weight: 600; color: var(--text-mute); border-radius: var(--radius-sm); background: var(--bg-soft); border: 1px solid var(--border); }
.strong-tab.active { color: var(--on-gold); background: var(--gold); border-color: var(--gold); }

.strong-result { display: block; width: 100%; background: var(--bg-elev); border: 1px solid var(--border); border-radius: var(--radius); padding: 12px 14px; margin-bottom: 8px; text-align: left; }
.strong-result:active { background: var(--bg-soft); }
.strong-result-head { display: flex; align-items: baseline; gap: 10px; flex-wrap: wrap; margin-bottom: 4px; }
.strong-result-orig { font-size: calc(17px * var(--fs-scale)); font-weight: 600; color: var(--navy); }
.strong-result-translit { font-family: var(--font-serif); font-size: calc(15px * var(--fs-scale)); color: var(--gold); font-style: italic; }
.strong-result-num { font-size: calc(11px * var(--fs-scale)); font-weight: 700; color: var(--gold); letter-spacing: 0.5px; margin-left: auto; padding: 2px 8px; background: var(--accent-soft); border-radius: 100px; }
.strong-result-lsg { font-size: calc(12.5px * var(--fs-scale)); color: var(--text-mute); font-style: italic; }

/* === TIMELINE === */
.timeline-event { background: var(--bg-elev); border: 1px solid var(--border); border-radius: var(--radius); margin-bottom: 8px; overflow: hidden; cursor: pointer; }
.timeline-event:active { background: var(--bg-soft); }
.timeline-event.expanded { border-left: 3px solid var(--gold); }
.timeline-event-head { padding: 12px 14px; }
.timeline-event-date { font-size: calc(11px * var(--fs-scale)); letter-spacing: 1.5px; color: var(--gold); font-weight: 700; text-transform: uppercase; margin-bottom: 2px; }
.timeline-event-title { font-family: var(--font-serif); font-size: calc(15px * var(--fs-scale)); font-weight: 600; color: var(--text); line-height: 1.3; }
.timeline-event-body { display: none; padding: 0 14px 14px; border-top: 1px solid var(--border); margin-top: 4px; }
.timeline-event.expanded .timeline-event-body { display: block; }

/* === DICTIONNAIRE BS === */
.dictbs-def { font-size: calc(15px * var(--fs-scale)); line-height: 1.7; color: var(--text); text-align: justify; }
.dictbs-def p { margin: 0 0 12px; }
.dictbs-def em { color: var(--gold); font-style: italic; }
.dictbs-def strong { color: var(--navy); }
.dictbs-def ol, .dictbs-def ul { padding-left: 22px; margin: 8px 0; }
.dictbs-def .verset-btn { display: inline; padding: 2px 8px; font-size: calc(12.5px * var(--fs-scale)); }

/* === JOURNAL === */
.journal-list { margin-top: 8px; }

/* === HOME MENU GRID === */
.home-menu-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; }
.home-menu-item { background: transparent; border: 0; border-radius: var(--radius); padding: 8px 4px 4px; display: flex; flex-direction: column; align-items: center; justify-content: flex-start; text-align: center; min-height: 0; transition: transform 0.15s; }
.home-menu-item:active { transform: scale(0.96); background: var(--bg-soft); }
.home-menu-icon { width: 40px; height: 40px; border-radius: var(--radius-sm); background: var(--accent-soft); color: var(--gold); display: flex; align-items: center; justify-content: center; margin-bottom: 6px; }
.home-menu-label { font-size: calc(12.5px * var(--fs-scale)); font-weight: 600; color: var(--text); line-height: 1.2; }
.home-menu-sub { font-size: calc(11px * var(--fs-scale)); color: var(--text-mute); margin-top: 3px; }

/* === VOD CARD === */
.vod-card { background: linear-gradient(135deg, #FFF8E7 0%, var(--bg-elev) 100%); border-left-color: var(--navy); }
[data-theme="dark"] .vod-card { background: linear-gradient(135deg, #2A2615 0%, var(--bg-elev) 100%); }
[data-theme="sepia"] .vod-card { background: linear-gradient(135deg, #ECDFC0 0%, var(--bg-elev) 100%); }
.vod-text { font-family: var(--font-serif); font-size: calc(15px * var(--fs-scale)); line-height: 1.55; color: var(--text); font-style: italic; margin: 6px 0 12px; text-align: justify; hyphens: auto; }

/* === ONBOARDING === */
.onboarding { position: fixed; inset: 0; z-index: 200; background: var(--bg); display: flex; flex-direction: column; padding: env(safe-area-inset-top) 20px env(safe-area-inset-bottom); }
.onb-skip { display: flex; justify-content: flex-end; padding: 16px 4px; }
.onb-skip-btn { background: transparent; border: 0; color: var(--text-mute); font-size: calc(15px * var(--fs-scale)); font-weight: 500; padding: 8px 12px; cursor: pointer; }
.onb-content { flex: 1; display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center; gap: 20px; padding: 20px; }
.onb-icon { width: 110px; height: 110px; display: flex; align-items: center; justify-content: center; color: var(--gold); background: var(--accent-soft); border-radius: 50%; }
.onb-icon img { width: 80px; height: 80px; }
.onb-icon svg { width: 64px; height: 64px; }
.onb-title { font-family: var(--font-serif); font-size: calc(28px * var(--fs-scale)); line-height: 1.15; color: var(--navy); margin: 0; max-width: 280px; }
.onb-sub { font-size: calc(15px * var(--fs-scale)); line-height: 1.55; color: var(--text-soft); margin: 0; max-width: 320px; }
.onb-bottom { display: flex; flex-direction: column; align-items: center; gap: 24px; padding-bottom: 28px; }
.onb-dots { display: flex; gap: 8px; }
.onb-dot { width: 8px; height: 8px; border-radius: 50%; background: var(--border); transition: all 0.3s; }
.onb-dot.active { background: var(--gold); width: 24px; }
.onb-cta { display: inline-flex; align-items: center; gap: 10px; padding: 14px 28px; background: var(--gold); color: var(--on-gold); border: 0; border-radius: 100px; font-size: calc(15px * var(--fs-scale)); font-weight: 600; cursor: pointer; box-shadow: var(--glow-gold); transition: transform 0.15s; }
.onb-cta:active { transform: scale(0.96); }

/* === PÉRICOPES === */
.pericope-h1 { font-family: var(--font-serif); font-size: calc(11px * var(--fs-scale)); letter-spacing: 2.5px; text-transform: uppercase; color: var(--gold); font-weight: 700; margin: 24px 0 4px; padding: 12px 16px 6px; border-top: 1px solid var(--border); text-align: center; }
.pericope-h2 { font-family: var(--font-serif); font-size: calc(15px * var(--fs-scale)); color: var(--navy); font-style: italic; font-weight: 600; margin: 0 0 4px; padding: 4px 12px; text-align: center; }
.pericope-h3 { font-family: var(--font-serif); font-size: calc(17px * var(--fs-scale)); color: var(--text); font-weight: 600; margin: 14px 0 8px; padding: 0; font-style: italic; }
.pericope-body { display: contents; }
[data-theme="dark"] .pericope-h2, [data-theme="dark"] .pericope-h3 { color: var(--text); }

/* === BOUTONS BARRE CHAPITRE === */
.chapter-icon-btn { display: inline-flex; align-items: center; justify-content: center; width: 34px; height: 34px; border-radius: 50%; background: var(--bg-elev); border: 1px solid var(--border); color: var(--gold); flex-shrink: 0; transition: all 0.15s; }
.chapter-icon-btn:active { background: var(--accent-soft); transform: scale(0.92); }
.chapter-icon-btn.active { background: var(--gold); color: white; border-color: var(--gold); }

/* === MODE PLEIN ÉCRAN === */
body.reading-fullscreen .topbar,
body.reading-fullscreen .bottombar,
body.reading-fullscreen .chapter-toolbar,
body.reading-fullscreen .chapter-nav { display: none; }
body.reading-fullscreen .app { padding-top: env(safe-area-inset-top); padding-bottom: env(safe-area-inset-bottom); }
body.reading-fullscreen .chapter-text { max-width: 720px; margin: 0 auto; padding: 40px 20px; }

/* === SHARE CARD === */
.share-themes { display: grid; grid-template-columns: repeat(4, 1fr); gap: 8px; margin-bottom: 18px; }
.share-theme { padding: 16px 6px; border-radius: var(--radius); border: 2px solid transparent; cursor: pointer; transition: transform 0.15s; font-size: calc(11px * var(--fs-scale)); font-weight: 600; min-height: 60px; }
.share-theme:active { transform: scale(0.95); }
.share-theme.active { border-color: var(--gold); box-shadow: 0 0 0 2px var(--gold); }
.share-preview { background: var(--bg-soft); border-radius: var(--radius); padding: 14px; margin-bottom: 14px; overflow: hidden; }
.share-preview canvas { width: 100% !important; height: auto !important; border-radius: var(--radius-sm); display: block; box-shadow: var(--shadow-2); }
.share-actions { display: flex; gap: 10px; justify-content: center; }
.share-actions .action-btn { flex: 1; max-width: 200px; justify-content: center; }

/* === NAVE DETAIL === */
.nave-detail { font-size: calc(15px * var(--fs-scale)); line-height: 1.75; color: var(--text); }
.nave-detail p { margin: 0 0 14px; }
.nave-detail br { margin-bottom: 4px; }
.nave-ref-btn { display: inline; padding: 2px 8px; margin: 1px 2px; border: 1px solid var(--border); background: var(--bg-elev); color: var(--gold); border-radius: 100px; font-size: calc(12.5px * var(--fs-scale)); font-weight: 500; cursor: pointer; }
.nave-ref-btn:active { background: var(--gold); color: white; }

/* === SCROLL ANIMATIONS POUR LES CARTES === */
/* will-change retiré des listes : il créait une couche GPU par carte (lourd). */

/* Animations d'entrée pour transitions de page */
@keyframes fadeInUp {
  from { opacity: 0; transform: translateY(8px); }
  to { opacity: 1; transform: translateY(0); }
}
.app > * { animation: fadeInUp 0.3s ease-out; }

/* Active states améliorés */
.cat-item:active, .home-menu-item:active, .quick-action:active, .more-link:active, .search-result:active { transform: scale(0.97); transition: transform 0.1s; }
.daily-btn:active, .action-btn:active, .verset-btn:active, .modal-action:active { transform: scale(0.95); }

/* Transitions modales et drawer */
.modal, .drawer { will-change: transform; }

/* Apparition fluide des sections du chapitre */
@keyframes verseAppear { from { opacity: 0; } to { opacity: 1; } }
.chapter-text { animation: verseAppear 0.4s ease-out; }

/* === STYLE BIBLE STRONG : TUILES COLORÉES === */
.home-menu-item.tile-purple .home-menu-icon { background: var(--tile-purple-bg); color: var(--tile-purple); }
.home-menu-item.tile-blue .home-menu-icon { background: var(--tile-blue-bg); color: var(--tile-blue); }
.home-menu-item.tile-pink .home-menu-icon { background: var(--tile-pink-bg); color: var(--tile-pink); }
.home-menu-item.tile-amber .home-menu-icon { background: var(--tile-amber-bg); color: var(--tile-amber); }
.home-menu-item.tile-emerald .home-menu-icon { background: var(--tile-emerald-bg); color: var(--tile-emerald); }
.home-menu-item.tile-rose .home-menu-icon { background: var(--tile-rose-bg); color: var(--tile-rose); }
.home-menu-item.tile-cyan .home-menu-icon { background: var(--tile-cyan-bg); color: var(--tile-cyan); }
.home-menu-item.tile-indigo .home-menu-icon { background: var(--tile-indigo-bg); color: var(--tile-indigo); }

[data-theme="dark"] .home-menu-item.tile-purple .home-menu-label,
[data-theme="dark"] .home-menu-item.tile-blue .home-menu-label,
[data-theme="dark"] .home-menu-item.tile-pink .home-menu-label,
[data-theme="dark"] .home-menu-item.tile-amber .home-menu-label,
[data-theme="dark"] .home-menu-item.tile-emerald .home-menu-label,
[data-theme="dark"] .home-menu-item.tile-rose .home-menu-label,
[data-theme="dark"] .home-menu-item.tile-cyan .home-menu-label,
[data-theme="dark"] .home-menu-item.tile-indigo .home-menu-label { color: var(--text); }

.home-menu-icon { width: 44px; height: 44px; border-radius: var(--radius-sm); }
.home-menu-icon svg { width: 24px; height: 24px; }
.home-menu-item { background: transparent; border: 0; border-radius: var(--radius); }

/* Mode sombre : icônes plus vives */
[data-theme="dark"] .home-menu-item { background: transparent; }

/* === Doctrines accueil : pastilles allongées empilées (icône + titre) === */
.home-cat-list { display: flex; flex-direction: column; gap: 8px; }
.home-cat-item { display: flex; align-items: center; gap: 12px; background: var(--bg-elev); border: 1px solid var(--border); border-radius: 100px; padding: 12px 18px; transition: transform 0.12s, background 0.12s; }
.home-cat-item:active { transform: scale(0.985); background: var(--bg-soft); }
.home-cat-icon { flex: 0 0 auto; width: 26px; height: 26px; display: flex; align-items: center; justify-content: center; color: var(--gold); }
.home-cat-icon svg { width: 24px; height: 24px; }
.home-cat-label { flex: 1; font-size: calc(15px * var(--fs-scale)); font-weight: 600; color: var(--text); line-height: 1.2; }
.home-cat-chev { flex: 0 0 auto; color: var(--text-mute); }
[data-theme="dark"] .home-cat-item { background: var(--bg-elev); border-color: rgba(255,255,255,0.05); }
[data-theme="dark"] .home-menu-item.tile-purple .home-menu-icon { background: rgba(124,58,237,0.18); }
[data-theme="dark"] .home-menu-item.tile-blue .home-menu-icon { background: rgba(37,99,235,0.18); }
[data-theme="dark"] .home-menu-item.tile-pink .home-menu-icon { background: rgba(236,72,153,0.18); }
[data-theme="dark"] .home-menu-item.tile-amber .home-menu-icon { background: rgba(245,158,11,0.18); }
[data-theme="dark"] .home-menu-item.tile-emerald .home-menu-icon { background: rgba(16,185,129,0.18); }
[data-theme="dark"] .home-menu-item.tile-rose .home-menu-icon { background: rgba(244,63,94,0.18); }
[data-theme="dark"] .home-menu-item.tile-cyan .home-menu-icon { background: rgba(6,182,212,0.18); }
[data-theme="dark"] .home-menu-item.tile-indigo .home-menu-icon { background: rgba(99,102,241,0.18); }

/* === DASHBOARD DE STATS (style Bible Strong) === */
.stats-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; margin: 16px 0 8px; }
.stat-card { background: var(--bg-elev); border: 1px solid var(--border); border-radius: var(--radius); padding: 14px 12px; display: flex; flex-direction: column; gap: 4px; }
.stat-card-icon { width: 22px; height: 22px; color: var(--text-mute); margin-bottom: 4px; }
.stat-card-num { font-size: calc(21px * var(--fs-scale)); font-weight: 700; color: var(--text); font-family: var(--font-sans); }
.stat-card-label { font-size: calc(11px * var(--fs-scale)); color: var(--text-mute); }
[data-theme="dark"] .stat-card { background: var(--bg-elev); border-color: rgba(255,255,255,0.04); }

/* === LECTEUR BIBLIQUE MONOSPACE === */
body.bible-mono .chapter-text { font-family: var(--font-mono); line-height: 1.85; letter-spacing: -0.2px; }
body.bible-mono .chap-verse-num { font-family: var(--font-mono); }
body.bible-mono .pericope-h3 { font-family: var(--font-sans); font-weight: 600; font-style: normal; }

/* === STRONG PLEIN ÉCRAN === */
.strong-fullpage { padding-top: var(--topbar-h); min-height: 100vh; background: var(--bg); }
.strong-fp-header { padding: 14px 16px 10px; border-bottom: 1px solid var(--border); position: sticky; top: var(--topbar-h); background: var(--bg); z-index: 5; }
.strong-fp-ref { font-size: calc(17px * var(--fs-scale)); font-weight: 600; color: var(--text); margin: 0 0 4px; }
.strong-fp-sub { font-size: calc(12.5px * var(--fs-scale)); color: var(--text-mute); margin: 0; }
.strong-fp-verse-display { padding: 14px 16px; background: var(--bg-soft); margin-bottom: 0; border-bottom: 1px solid var(--border); }
.strong-fp-verse-text { font-family: var(--font-mono); font-size: calc(15px * var(--fs-scale)); line-height: 1.85; color: var(--text); }
.strong-fp-verse-text .sw-word { display: inline-block; padding: 1px 6px; margin: 1px 1px; background: var(--bg-elev); border: 1px solid var(--border); border-radius: var(--radius-sm); cursor: pointer; transition: all 0.15s; }
.strong-fp-verse-text .sw-word:active { background: var(--tile-blue-bg); border-color: var(--tile-blue); }
.strong-fp-verse-text .sw-word.active { background: var(--tile-blue); color: white; border-color: var(--tile-blue); }
.strong-fp-verse-text .sw-vnum { font-size: calc(11px * var(--fs-scale)); color: var(--text-mute); margin-right: 4px; }

/* Fiche Strong détaillée plein écran */
.strong-detail-fp { padding: 16px; }
.strong-detail-fp .sd-back { display: inline-flex; align-items: center; gap: 6px; padding: 8px 14px; background: var(--bg-soft); border-radius: 100px; font-size: calc(12.5px * var(--fs-scale)); color: var(--text); margin-bottom: 18px; }
.strong-detail-fp .sd-head { padding-bottom: 14px; }
.strong-detail-fp .sd-type { font-size: calc(11px * var(--fs-scale)); color: var(--text-mute); margin: 0 0 6px; }
.strong-detail-fp .sd-code { font-size: calc(15px * var(--fs-scale)); color: var(--accent); font-weight: 600; }
.strong-detail-fp .sd-translit { font-size: calc(28px * var(--fs-scale)); font-weight: 600; color: var(--text); margin: 4px 0 2px; }
.strong-detail-fp .sd-translit-sub { font-size: calc(15px * var(--fs-scale)); color: var(--text-mute); font-style: italic; }
.strong-detail-fp .sd-original { font-size: calc(44px * var(--fs-scale)); line-height: 1; color: var(--text); font-weight: 500; margin: 14px 0; direction: rtl; text-align: right; }
.strong-detail-fp .sd-original.greek { direction: ltr; text-align: left; }
.strong-detail-fp .sd-section { margin: 22px 0 8px; }
.strong-detail-fp .sd-section-title { font-size: calc(11px * var(--fs-scale)); letter-spacing: 1.5px; text-transform: uppercase; color: var(--text-mute); margin: 0 0 8px; font-weight: 600; }
.strong-detail-fp .sd-section-body { font-size: calc(15px * var(--fs-scale)); line-height: 1.65; color: var(--text); }
.strong-detail-fp .sd-section-body ol { padding-left: 22px; margin: 4px 0; }
.strong-detail-fp .sd-section-body li { margin-bottom: 6px; }
.strong-detail-fp .sd-concordance-btn { display: inline-flex; align-items: center; gap: 8px; padding: 10px 18px; background: var(--bg-soft); border: 1px solid var(--border); border-radius: var(--radius); font-size: calc(15px * var(--fs-scale)); color: var(--text); margin-top: 6px; }
.strong-detail-fp .sd-concordance-count { background: var(--tile-blue); color: white; padding: 2px 10px; border-radius: 100px; font-size: calc(12.5px * var(--fs-scale)); font-weight: 600; }

.sd-verse-result { background: var(--bg-elev); border: 1px solid var(--border); border-radius: var(--radius); padding: 12px 14px; margin-bottom: 8px; }
.sd-verse-ref { font-size: calc(12.5px * var(--fs-scale)); font-weight: 600; color: var(--accent); margin: 0 0 4px; }
.sd-verse-text { font-family: var(--font-mono); font-size: calc(12.5px * var(--fs-scale)); line-height: 1.6; color: var(--text); margin: 0; }
.sd-verse-text mark { background: var(--accent-soft); color: var(--accent); padding: 0 4px; border-radius: var(--radius-xs); text-decoration: underline; }

/* === LECTEUR MONOSPACE STYLE BIBLE STRONG (always on, désactivable) === */
.chapter-text-mono { font-family: var(--font-mono); line-height: 1.9; }
.chapter-text-mono .chap-verse-num { font-size: calc(11px * var(--fs-scale)); color: var(--text-mute); font-weight: 400; }
.chapter-text-mono .pericope-h3 { font-family: var(--font-sans); font-size: calc(15px * var(--fs-scale)); font-weight: 600; font-style: normal; color: var(--accent); }

/* === BG NOIR PROFOND DARK MODE === */
[data-theme="dark"] body { background: var(--bg); }
[data-theme="dark"] .topbar { background: rgba(10,10,15,0.92); border-bottom-color: rgba(255,255,255,0.05); }
[data-theme="dark"] .daily-card { background: var(--bg-elev); border: 1px solid rgba(255,255,255,0.04); }
[data-theme="dark"] .cat-item, [data-theme="dark"] .search-result, [data-theme="dark"] .more-link { background: var(--bg-elev); border-color: rgba(255,255,255,0.04); }
[data-theme="dark"] .vod-card { background: linear-gradient(135deg, rgba(31,56,100,0.15), var(--bg-elev)); }

/* === BARRE SÉLECTION VERSION (Trésor, Comparaison...) === */
.version-pick-bar { display: flex; align-items: center; gap: 8px; padding: 8px 0 14px; }
.version-pick-label { font-size: calc(12.5px * var(--fs-scale)); color: var(--text-mute); }
.version-pick-btn { display: inline-flex; align-items: center; gap: 6px; padding: 6px 12px; background: var(--bg-soft); border: 1px solid var(--border); border-radius: 100px; font-size: calc(12.5px * var(--fs-scale)); font-weight: 600; color: var(--text); }
.version-pick-btn:active { background: var(--accent-soft); }

/* === OPTIONS DE LECTURE === */
.opt-row { display: flex; gap: 6px; flex-wrap: wrap; }
.opt-pill { display: inline-flex; align-items: center; gap: 6px; padding: 8px 14px; background: var(--bg-soft); border: 1px solid var(--border); border-radius: 100px; font-size: calc(12.5px * var(--fs-scale)); font-weight: 500; color: var(--text); cursor: pointer; transition: all 0.15s; }
.opt-pill:active { transform: scale(0.96); }
.opt-pill.active { background: var(--gold); color: white; border-color: var(--gold); }
.opt-pill svg { flex-shrink: 0; }
[data-theme="dark"] .opt-pill { background: var(--bg-soft); border-color: rgba(255,255,255,0.05); }
[data-theme="dark"] .opt-pill.active { background: var(--gold); color: #1A1A1A; }

/* === LAYOUTS LECTEUR === */
/* paragraph : versets regroupés (par défaut, déjà géré par chapter-text) */
.chapter-text.layout-paragraph .chap-verse { display: inline; }

/* block : un verset par ligne */
.chapter-text.layout-block .chap-verse { display: block; margin-bottom: 0.5em; }
.chapter-text.layout-block.spacing-compact .chap-verse { margin-bottom: 0.2em; }
.chapter-text.layout-block.spacing-large .chap-verse { margin-bottom: 1em; }

/* spacing : agit sur line-height + marges */
.chapter-text.spacing-compact { line-height: 1.55; }
.chapter-text.spacing-normal { line-height: 1.85; }
.chapter-text.spacing-large { line-height: 2.2; letter-spacing: 0.3px; }

/* paragraph + spacing */
.chapter-text.layout-paragraph.spacing-compact .pericope-h3 { margin: 8px 0 4px; }
.chapter-text.layout-paragraph.spacing-large .pericope-h3 { margin: 22px 0 12px; }

/* Mode monospace ajusté pour chaque layout */
body.bible-mono .chapter-text.layout-paragraph { font-family: var(--font-mono); }
body.bible-mono .chapter-text.layout-block { font-family: var(--font-mono); }
body:not(.bible-mono) .chapter-text { font-family: var(--font-serif); }  /* taille geree par l agrandissement */
body:not(.bible-mono) .chapter-text .chap-verse-num { font-family: var(--font-sans); }

/* === STRONG INLINE (mots cliquables dans le lecteur LSGS) === */
.strong-inline { display: inline; background: transparent; border: 0; padding: 0 1px; margin: 0; font: inherit; color: inherit; cursor: pointer; border-radius: var(--radius-xs); transition: background 0.1s; -webkit-tap-highlight-color: transparent; }
.strong-inline:active { background: var(--accent-soft); }
.strong-inline:hover { background: var(--accent-soft); }
.strong-inline-num { display: inline-block; font-family: var(--font-sans); font-size: 0.55em; color: var(--accent); vertical-align: super; margin-left: 1px; font-weight: 600; opacity: 0.8; line-height: 1; }
[data-theme="dark"] .strong-inline:active,
[data-theme="dark"] .strong-inline:hover { background: rgba(184,137,62,0.18); }

/* === PAGE STRONG DÉTAILLÉE PLEIN ÉCRAN === */
.strong-fullpage-content { padding: 16px 16px 24px; }
.strong-fp-head { padding: 6px 0 18px; display: flex; flex-direction: column; align-items: flex-start; gap: 4px; border-bottom: 1px solid var(--border); margin-bottom: 16px; }
.strong-fp-type { font-size: calc(11px * var(--fs-scale)); color: var(--text-mute); margin: 0; text-transform: uppercase; letter-spacing: 1px; }
/* Le mot original reste un titre, pas une affiche : a 56 px il debordait des
   la taille de texte « Grand » (et l hebreu vocalise, plus haut, encore plus). */
.strong-fp-original { font-size: calc(28px * var(--fs-scale)); line-height: 1.25; font-weight: 500; color: var(--text); margin: 6px 0 4px; max-width: 100%; overflow-wrap: anywhere; }
.strong-fp-original.greek { font-family: var(--font-serif); }
.strong-fp-original.hebrew { direction: rtl; }
.strong-fp-translit { font-size: calc(17px * var(--fs-scale)); color: var(--accent); font-weight: 600; font-family: var(--font-serif); font-style: italic; margin: 0; }
.strong-fp-pho { font-size: calc(12.5px * var(--fs-scale)); font-weight: 400; color: var(--text-mute); font-style: normal; font-family: var(--font-sans); }
.strong-fp-code { font-size: calc(12.5px * var(--fs-scale)); font-weight: 700; color: var(--accent); letter-spacing: 1.5px; margin: 4px 0 0; padding: 2px 10px; background: var(--accent-soft); border-radius: 100px; }

.strong-fp-section { margin: 18px 0; }
.strong-fp-section-title { font-size: calc(11px * var(--fs-scale)); letter-spacing: 1.5px; text-transform: uppercase; color: var(--text-mute); font-weight: 600; margin: 0 0 8px; display: flex; align-items: center; gap: 8px; }
.strong-fp-count { background: var(--accent); color: white; padding: 2px 10px; border-radius: 100px; font-size: calc(11px * var(--fs-scale)); font-weight: 700; letter-spacing: 0.3px; text-transform: none; }
[data-theme="dark"] .strong-fp-count, [data-theme="noir"] .strong-fp-count { color: #0A0A0F; }
.strong-fp-section-body { font-size: calc(15px * var(--fs-scale)); line-height: 1.7; color: var(--text); margin: 0; }
.strong-fp-section-body ol, .strong-fp-section-body ul { padding-left: 22px; margin: 4px 0; }
.strong-fp-section-body li { margin-bottom: 6px; }

/* Liens vers d'autres codes Strong dans les définitions */
.strong-link { display: inline-block; background: var(--accent-soft); color: var(--accent); border: 0; padding: 1px 8px; margin: 0 2px; border-radius: 100px; font: inherit; font-size: calc(12.5px * var(--fs-scale)); font-weight: 600; cursor: pointer; }
.strong-link:active { background: var(--accent); color: white; }

/* Liste des versets dans concordance */
.strong-verse-result { display: block; width: 100%; text-align: left; background: var(--bg-elev); border: 1px solid var(--border); border-radius: var(--radius); padding: 12px 14px; margin-bottom: 8px; cursor: pointer; transition: background 0.15s; -webkit-tap-highlight-color: transparent; }
.strong-verse-result:active { background: var(--bg-soft); }
[data-theme="dark"] .strong-verse-result { background: var(--bg-elev); border-color: rgba(255,255,255,0.04); }
.strong-verse-ref { font-size: calc(12.5px * var(--fs-scale)); font-weight: 700; color: var(--accent); margin: 0 0 4px; letter-spacing: 0.3px; text-transform: uppercase; }
.strong-verse-text { font-size: calc(15px * var(--fs-scale)); line-height: 1.65; color: var(--text); margin: 0; font-family: var(--font-serif); }
.strong-conc-hit { color: var(--accent); font-weight: 700; text-decoration: underline; text-decoration-thickness: 1.5px; text-underline-offset: 2px; }
[data-theme="dark"] .strong-conc-hit { color: var(--gold); }

/* === Panneau d'étude par verset (pastilles + carrousel lexique) === */
.strong-verse-chips { font-family: var(--font-serif); font-size: calc(18px * var(--fs-scale)); line-height: 2.15; color: var(--text); margin: 0 0 12px; }
.strong-chip { display: inline; background: var(--accent-soft); color: var(--text); border: 0; border-radius: var(--radius-sm); padding: 2px 7px; margin: 0 1px; font: inherit; cursor: pointer; -webkit-tap-highlight-color: transparent; transition: background 0.12s, color 0.12s; }
.strong-chip:active { opacity: 0.8; }
.strong-chip.active { background: var(--accent); color: #0A0A0F; font-weight: 600; }
.strong-chip.linked { background: var(--accent); color: #0A0A0F; font-weight: 600; opacity: 0.55; box-shadow: inset 0 -2px 0 rgba(0,0,0,0.25); }
[data-theme="dark"] .strong-chip { background: rgba(184,137,62,0.16); }
[data-theme="dark"] .strong-chip.active { background: var(--gold); color: #0A0A0F; }

.strong-verse-nav { display: flex; justify-content: space-between; gap: 8px; margin-bottom: 12px; }
.strong-nav-btn { flex: 1; display: inline-flex; align-items: center; justify-content: center; gap: 5px; background: var(--bg-soft); border: 1px solid var(--border); color: var(--text); border-radius: var(--radius-sm); padding: 9px 10px; font-size: calc(12.5px * var(--fs-scale)); font-weight: 600; cursor: pointer; -webkit-tap-highlight-color: transparent; }
.strong-nav-btn:active { background: var(--bg-elev); }
.strong-nav-btn[disabled] { opacity: 0.35; pointer-events: none; }
[data-theme="dark"] .strong-nav-btn { border-color: rgba(255,255,255,0.06); }

.strong-cards-track { display: flex; gap: 12px; overflow-x: auto; scroll-snap-type: x mandatory; -webkit-overflow-scrolling: touch; padding-bottom: 4px; scrollbar-width: none; }
.strong-cards-track::-webkit-scrollbar { display: none; }
.strong-card { flex: 0 0 100%; scroll-snap-align: center; box-sizing: border-box; background: var(--bg-soft); border: 1px solid var(--border); border-radius: var(--radius); padding: 14px; max-height: 44vh; overflow-y: auto; }
[data-theme="dark"] .strong-card { background: var(--bg-elev); border-color: rgba(255,255,255,0.05); }
.strong-card-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 10px; }
.strong-card-orig { font-size: calc(21px * var(--fs-scale)); line-height: 1.3; color: var(--text); min-width: 0; overflow-wrap: anywhere; }
.strong-card-orig.greek { font-family: var(--font-serif); }
.strong-card-translit { font-size: calc(15px * var(--fs-scale)); font-weight: 600; color: var(--text); margin-top: 2px; }
.strong-card-pho { color: var(--text-mute); font-weight: 400; }
.strong-card-expand { flex: 0 0 auto; background: var(--accent-soft); color: var(--accent); border: 0; border-radius: var(--radius-sm); width: 34px; height: 34px; display: inline-flex; align-items: center; justify-content: center; cursor: pointer; }
.strong-card-expand:active { opacity: 0.8; }
.strong-card-type { font-size: calc(12.5px * var(--fs-scale)); color: var(--accent); font-weight: 600; margin: 8px 0 10px; letter-spacing: 0.3px; }
.strong-card-section { margin-bottom: 10px; }
.strong-card-label { font-size: calc(11px * var(--fs-scale)); text-transform: uppercase; letter-spacing: 0.5px; color: var(--text-mute); margin: 0 0 3px; font-weight: 700; }
/* Meme taille que les textes explicatifs du reste de l app (15 px / 1,7) :
   definitions, introductions, guide, Nave, dictionnaire. */
.strong-card-body { font-size: calc(17px * var(--fs-scale)); line-height: 1.75; color: var(--text); margin: 0; }
.strong-card-body p { margin: 0 0 6px; }
.strong-card-body p:last-child { margin-bottom: 0; }
.strong-cards-hint { text-align: center; font-size: calc(11px * var(--fs-scale)); color: var(--text-mute); margin: 8px 0 0; }

/* === Boutons dans la card de verset === */
.lsg-actions-row { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 10px; }
.lsg-read-chapter.primary { background: var(--accent); color: white; border-color: var(--accent); font-weight: 600; }
[data-theme="dark"] .lsg-read-chapter.primary { color: #0A0A0F; }
.lsg-read-chapter.primary:active { background: var(--gold); }

/* ============================================================
   GLASSMORPHISM — verre "carte de crédit", fond sobre, jour & nuit.
   Le verre est porté par sa propre matière (bord lumineux, reflet,
   léger flou) et non par un décor coloré. Actif en thèmes clair ET sombre.
   ============================================================ */

/* --- Surfaces translucides (tokens) --- */
[data-theme="dark"] {
  --bg-elev: rgba(255,255,255,0.07);
  --bg-soft: rgba(255,255,255,0.05);
  --border: rgba(255,255,255,0.16);
  --shadow: 0 1px 2px rgba(0,0,0,0.35), 0 10px 30px rgba(0,0,0,0.42);
  --shadow-lg: 0 16px 50px rgba(0,0,0,0.55);
}
[data-theme="light"] {
  --bg-elev: rgba(255,255,255,0.72);
  --bg-soft: rgba(255,255,255,0.52);
  --border: rgba(28,40,72,0.14);
  --shadow: 0 1px 2px rgba(40,55,95,0.08), 0 8px 26px rgba(40,55,95,0.12);
  --shadow-lg: 0 18px 50px rgba(40,55,95,0.18);
}

/* --- Fond sobre (quasi uni), juste assez pour que le flou se "sente" --- */
[data-theme="dark"] body { background: #0B0907; }
/* --- Barre du bas : pilule glissante --- */
.bottombar {
  --tab-count: 3;
  --tab-index: 0;
  overflow: hidden;
}
[data-theme="dark"] .bottombar { background: rgba(20,24,38,0.92); border: 0; border-top: 1px solid rgba(255,255,255,0.07); box-shadow: 0 -6px 22px rgba(0,0,0,0.3); }
[data-theme="light"] .bottombar { background: rgba(255,255,255,0.92); border: 0; border-top: 1px solid rgba(28,40,72,0.10); box-shadow: 0 -6px 22px rgba(40,55,95,0.08); -webkit-backdrop-filter: blur(16px) saturate(160%); backdrop-filter: blur(16px) saturate(160%); }
/* Pilule = une colonne de large ; translate par multiple de SA PROPRE largeur (fiable) */
.bottombar-pill {
  position: absolute;
  top: 8px;
  left: 0;
  width: calc(100% / var(--tab-count));
  height: calc(var(--bottombar-h) - 18px);
  transform: translateX(calc(var(--tab-index) * 100%));
  transition: transform 0.34s cubic-bezier(.32, .72, 0, 1);
  will-change: transform;
  pointer-events: none;
  z-index: 0;
}
.bottombar-pill::before {
  content: "";
  position: absolute;
  inset: 0 15px;
  border-radius: var(--radius);
  background: var(--accent-soft);
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.4);
}
/* Point indicateur, centré dans l'onglet actif */
.bottombar::after {
  content: "";
  position: absolute;
  top: 5px;
  left: 0;
  width: calc(100% / var(--tab-count));
  height: 5px;
  transform: translateX(calc(var(--tab-index) * 100%));
  transition: transform 0.34s cubic-bezier(.32, .72, 0, 1);
  pointer-events: none;
  z-index: 2;
  background: radial-gradient(circle at center, var(--accent) 0 2.5px, transparent 3px);
}
.bottombar-btn { position: relative; z-index: 1; transition: color 0.2s; }
.bottombar-btn.active { color: var(--accent); }
.bottombar-btn svg { transition: transform 0.25s; }
.bottombar-btn.active svg { transform: scale(1.1); }

/* Masquer la croix de suppression native des champs type=search (on garde la nôtre, arrondie) */
input[type="search"]::-webkit-search-cancel-button,
input[type="search"]::-webkit-search-decoration { -webkit-appearance: none; appearance: none; display: none; }
input[type="search"] { appearance: none; -webkit-appearance: none; }

/* Touche d'or sur les versets trouvés (recherche) */
.search-result.verse-hit { border-left: 3px solid var(--gold); }

/* ===== Palettes d'accueil (longues) ===== */
.home-palettes { display: flex; flex-direction: column; gap: 10px; }
/* Sections dépliables de l'accueil (Bibliothèque / Outils d'étude). */
.home-acc-head { width: 100%; display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 12px 8px; margin: 0; background: none; border: none; border-radius: var(--radius-sm); cursor: pointer; font-family: var(--font-serif); font-size: calc(14.5px * var(--fs-scale)); font-weight: 600; color: var(--text); text-align: left; -webkit-tap-highlight-color: transparent; }
.home-acc-head:active { background: var(--accent-soft); }
.home-acc-chev { color: var(--text-mute); transition: transform .22s ease; flex: none; }
.home-acc-head.open .home-acc-chev { transform: rotate(180deg); }
.home-acc-body { overflow: hidden; max-height: 0; opacity: 0; transition: max-height .28s ease, opacity .2s ease; }
.home-acc-body.open { max-height: 1200px; opacity: 1; padding-top: 4px; }
.home-palette { display: flex; align-items: center; gap: 14px; padding: 15px 16px; border-radius: var(--radius); background: var(--bg-elev); border: 1px solid var(--border); box-shadow: inset 0 1px 0 rgba(255,255,255,0.07); transition: transform .15s; }
.home-palette:active { transform: scale(0.99); }
.home-palette .hp-ic { width: 42px; height: 42px; border-radius: var(--radius-sm); display: grid; place-items: center; background: var(--accent-soft); color: var(--accent); flex: none; }
.home-palette .hp-txt { flex: 1; display: flex; flex-direction: column; min-width: 0; }
.home-palette .hp-txt b { font-family: var(--font-serif); font-size: calc(17px * var(--fs-scale)); color: var(--navy); font-weight: 600; line-height: 1.2; }
.home-palette .hp-txt small { color: var(--text-mute); font-size: calc(12.5px * var(--fs-scale)); margin-top: 3px; }
.home-palette .hp-go { color: var(--text-mute); font-size: calc(21px * var(--fs-scale)); flex: none; }

/* ===== Lecteur de livre ===== */
.livre-head { padding: 6px 0 10px; }
.back-link { color: var(--accent); font-size: calc(15px * var(--fs-scale)); display: inline-block; margin-bottom: 6px; }
.livre-title { font-family: var(--font-serif); font-size: calc(28px * var(--fs-scale)); color: var(--navy); font-weight: 600; line-height: 1.15; }
.livre-sub { color: var(--text-mute); font-size: calc(12.5px * var(--fs-scale)); margin-top: 3px; }
.livre-body { padding-bottom: 30px; }
.livre-h { font-family: var(--font-serif); font-size: calc(21px * var(--fs-scale)); color: var(--accent); margin: 20px 0 8px; font-weight: 600; }
.livre-p { font-size: calc(15px * var(--fs-scale)); line-height: 1.75; margin: 8px 0; color: var(--text-soft); text-align: justify; }
.livre-s { font-size: calc(12.5px * var(--fs-scale)); letter-spacing: 1.5px; text-transform: uppercase; color: var(--accent); font-weight: 700; margin: 16px 0 4px; }
.livre-r { font-size: calc(12.5px * var(--fs-scale)); line-height: 1.7; margin: 4px 0 8px; color: var(--text-mute, #8a8a8a); font-style: italic; }
/* Sommaire des chapitres */
.livre-toc { display: flex; flex-direction: column; gap: 2px; }
.livre-toc-groupe { font-size: calc(12.5px * var(--fs-scale)); letter-spacing: 1.5px; text-transform: uppercase; color: var(--accent); font-weight: 700; margin: 18px 0 6px; }
.livre-toc-item { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 13px 14px; border-radius: var(--radius-sm); background: var(--surface, rgba(255,255,255,0.04)); border: 1px solid var(--border, rgba(255,255,255,0.07)); text-decoration: none; transition: background .15s, border-color .15s; }
.livre-toc-item:active { background: rgba(156,107,30,0.14); }
.livre-toc-txt { font-family: var(--font-serif); font-size: calc(15px * var(--fs-scale)); color: var(--text-soft); line-height: 1.4; }
.livre-toc-go { color: var(--accent); font-size: calc(21px * var(--fs-scale)); flex-shrink: 0; }
/* Chapitre individuel */
.livre-back-chap { display: inline-block; margin-bottom: 10px; }
.livre-groupe { font-size: calc(12.5px * var(--fs-scale)); letter-spacing: 1.5px; text-transform: uppercase; color: var(--accent); font-weight: 700; margin: 4px 0 2px; }
.livre-chap-titre { margin-top: 2px; }
.livre-nav { display: flex; justify-content: space-between; align-items: center; gap: 12px; margin-top: 26px; padding-top: 16px; border-top: 1px solid var(--border, rgba(255,255,255,0.08)); }
.livre-nav-btn { display: flex; flex-direction: column; gap: 3px; max-width: 47%; font-family: var(--font-serif); font-size: calc(15px * var(--fs-scale)); color: var(--accent); text-decoration: none; padding: 8px 14px; border: 1px solid var(--accent); border-radius: var(--radius-sm); }
.livre-nav-btn:active { background: rgba(156,107,30,0.14); }
.livre-nav-prev { align-items: flex-start; text-align: left; }
.livre-nav-next { align-items: flex-end; text-align: right; }
.livre-nav-dir { font-family: var(--font-sans, inherit); font-size: calc(11px * var(--fs-scale)); letter-spacing: .3px; text-transform: uppercase; opacity: .7; }
.livre-nav-ttl { max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: calc(13px * var(--fs-scale)); }
.livre-nav-spacer { flex: 0 0 auto; }
.livre-tbl-wrap { overflow-x: auto; margin: 10px 0; border: 1px solid var(--border); border-radius: var(--radius-sm); }
.livre-tbl { width: 100%; border-collapse: collapse; font-size: calc(12.5px * var(--fs-scale)); }
.livre-tbl th, .livre-tbl td { padding: 8px 10px; border-bottom: 1px solid var(--border); text-align: left; vertical-align: top; }
.livre-tbl th { background: var(--accent-soft); color: var(--accent); font-weight: 600; }
.livre-tbl tr:last-child td { border-bottom: 0; }

/* ================================================================
   BIBLE-PLUS — DESIGN SYSTEM 2.0
   Couche finale d'harmonisation : premium, épuré, intemporel.
   ================================================================ */

/* --- Atmosphère : glow d'ambiance discret --- */
[data-theme="light"] body::before {
  content: ""; position: fixed; inset: 0; z-index: -1; pointer-events: none;
  background:
    radial-gradient(55% 42% at 16% -4%, rgba(201,160,80,0.16), transparent 70%),
    radial-gradient(50% 42% at 92% 104%, rgba(30,51,88,0.07), transparent 72%);
}
[data-theme="dark"] body::before {
  content: ""; position: fixed; inset: 0; z-index: -1; pointer-events: none;
  background:
    radial-gradient(60% 45% at 18% -6%, rgba(229,138,90,0.10), transparent 70%),
    radial-gradient(55% 45% at 90% 106%, rgba(127,160,216,0.06), transparent 72%);
}
[data-theme="sepia"] body::before {
  content: ""; position: fixed; inset: 0; z-index: -1; pointer-events: none;
  background: radial-gradient(55% 40% at 20% -4%, rgba(139,105,20,0.10), transparent 70%);
}

/* --- Barres : verre fin, hairline, présence discrète --- */
.topbar {
  -webkit-backdrop-filter: blur(20px) saturate(180%); backdrop-filter: blur(20px) saturate(180%);
  border: 0; border-bottom: 1px solid var(--hairline);
  box-shadow: none;
}
[data-theme="light"] .topbar { background: rgba(255,255,255,0.72); }
[data-theme="sepia"] .topbar { background: rgba(251,245,229,0.78); }
[data-theme="dark"]  .topbar { background: rgba(16,14,12,0.72); }
[data-theme="noir"]  .topbar { background: rgba(0,0,0,0.72); }

.bottombar { border: 0; border-top: 1px solid var(--hairline); box-shadow: none;
  -webkit-backdrop-filter: blur(20px) saturate(180%); backdrop-filter: blur(20px) saturate(180%); }
[data-theme="light"] .bottombar { background: rgba(255,255,255,0.78); }
[data-theme="sepia"] .bottombar { background: rgba(251,245,229,0.82); }
[data-theme="dark"]  .bottombar { background: rgba(16,14,12,0.82); }
[data-theme="noir"]  .bottombar { background: rgba(0,0,0,0.82); }
.bottombar-pill::before { background: var(--accent-soft); box-shadow: none; border-radius: var(--radius); }
.bottombar-btn span { font-size: calc(11px * var(--fs-scale)); letter-spacing: .3px; font-weight: 600; }

/* --- Surfaces : hiérarchie nette en 2 niveaux --- */
:is(.daily-card,.vod-card,.setting-group,.home-palette,.partie-card,.more-card) {
  background: var(--bg-elev); border: 1px solid var(--hairline);
  border-radius: var(--radius-lg); box-shadow: var(--shadow-2);
}
:is(.search-result,.cat-item,.home-cat-item,.strong-card,.dict-entry,.more-link,.timeline-event,.strong-result,.livre-toc-item,.home-menu-item) {
  background: var(--bg-elev); border: 1px solid var(--hairline);
  box-shadow: var(--shadow-1);
}
[data-theme="dark"] :is(.daily-card,.vod-card,.setting-group,.home-palette,.partie-card,.more-card,.search-result,.cat-item,.home-cat-item,.strong-card,.dict-entry,.more-link,.timeline-event,.strong-result,.livre-toc-item,.home-menu-item) {
  background: var(--bg-elev);
}
.daily-card { border-left: 3px solid var(--gold); }

/* --- Modals & drawer : voile + profondeur maîtrisée --- */
.modal { border-radius: var(--radius-lg) var(--radius-lg) 0 0; box-shadow: var(--shadow-3); border: 1px solid var(--hairline); border-bottom: 0;
  -webkit-backdrop-filter: blur(24px) saturate(180%); backdrop-filter: blur(24px) saturate(180%); }
.modal-backdrop { background: rgba(12,10,8,0.42); -webkit-backdrop-filter: blur(3px); backdrop-filter: blur(3px); }
.drawer { box-shadow: var(--shadow-3); border-right: 1px solid var(--hairline); }

/* --- Micro-interactions : pression tactile universelle --- */
:is(.search-result,.cat-item,.home-cat-item,.home-menu-item,.strong-card,.dict-entry,.more-link,.timeline-event,.livre-toc-item,.doctrine-item,.home-palette,.action-btn,.quick-action,.modal-action,.chapter-nav-btn,.livre-nav-btn) {
  transition: transform var(--dur) var(--ease), box-shadow var(--dur) var(--ease), border-color var(--dur) var(--ease), background var(--dur) var(--ease);
}
:is(.search-result,.cat-item,.home-cat-item,.home-menu-item,.strong-card,.dict-entry,.more-link,.timeline-event,.livre-toc-item,.doctrine-item,.home-palette):active {
  transform: scale(0.977); box-shadow: var(--shadow-1); border-color: var(--gold-light);
}
:is(button,.icon-btn):active { transform: scale(0.94); }
.bottombar-btn:active { transform: scale(0.94); }

/* --- Entrée de vue : élévation douce et discrète --- */
@keyframes viewIn { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: none; } }
#app > * { animation: viewIn var(--dur-slow) var(--ease) both; }
@media (prefers-reduced-motion: reduce) { #app > * { animation: none; } }

/* --- Boutons primaires : présence dorée --- */
.daily-btn, .onb-cta, .primary {
  border-radius: 100px; box-shadow: var(--glow);
  transition: transform var(--dur) var(--ease), box-shadow var(--dur) var(--ease), filter var(--dur) var(--ease);
}
.daily-btn:active, .onb-cta:active { transform: scale(0.965); filter: brightness(1.06); }

/* --- Champs de saisie : focus raffiné --- */
:is(input[type=search], input[type=text], textarea, .dict-search) {
  transition: border-color var(--dur) var(--ease), box-shadow var(--dur) var(--ease);
}
:is(input[type=search], input[type=text], textarea, .dict-search):focus {
  outline: none; border-color: var(--gold-light) !important;
  box-shadow: 0 0 0 3px rgba(168,124,47,0.14);
}

/* --- Titres : respiration et raffinement serif --- */
.home-title, .livre-title, .doctrine-titre-h, .cat-header-title { letter-spacing: 0.2px; }
.section-label, .setting-group-title, .modal-versions-label, .livre-toc-groupe, .tl-ex-label {
  letter-spacing: 1.6px; font-size: calc(11px * var(--fs-scale));
}

/* --- Scrollbar discrète (desktop) --- */
::-webkit-scrollbar { width: 8px; height: 8px; }
::-webkit-scrollbar-thumb { background: rgba(128,116,100,0.28); border-radius: 100px; }
::-webkit-scrollbar-track { background: transparent; }

/* --- Toast : capsule flottante --- */
.toast { border-radius: 100px; box-shadow: var(--shadow-3); border: 1px solid var(--hairline);
  -webkit-backdrop-filter: blur(16px); backdrop-filter: blur(16px); }

/* --- Toggle : mouvement huilé --- */
.toggle-switch span { transition: transform .26s var(--ease); }
.toggle-switch { transition: background .26s var(--ease); }

/* --- Radius harmonisés --- */
:is(.search-result,.cat-item,.more-link,.timeline-event,.dict-entry,.strong-card,.livre-toc-item,.home-menu-item,.home-cat-item) { border-radius: var(--radius); }
:is(.search-input-wrap,.dict-search-wrap) { border-radius: var(--radius-lg); }

/* ================================================================
   OUTILS D'ÉTUDE — Mon parcours, Mémorisation, Mon étude
   ================================================================ */

/* --- Tableau de bord « Mon parcours » (accueil) --- */
.parcours { background: var(--bg-elev); border: 1px solid var(--border); border-radius: var(--radius-lg); padding: 16px; margin-bottom: 22px; box-shadow: var(--shadow); }
.parcours-head { display: flex; align-items: center; justify-content: space-between; margin-bottom: 12px; }
.parcours-resume { display: flex; align-items: center; gap: 12px; padding: 12px; border-radius: var(--radius); background: linear-gradient(135deg, var(--accent-soft), transparent); border: 1px solid var(--border); margin-bottom: 12px; }
.parcours-resume:active { transform: scale(0.985); }
.parcours-resume-ic { width: 38px; height: 38px; border-radius: var(--radius-sm); background: var(--bg-elev); color: var(--accent); display: flex; align-items: center; justify-content: center; flex-shrink: 0; box-shadow: var(--shadow-1); }
.parcours-resume-txt { flex: 1; display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.parcours-resume-txt b { font-size: calc(15px * var(--fs-scale)); color: var(--text); }
.parcours-resume-txt span { font-size: calc(12.5px * var(--fs-scale)); color: var(--text-mute); }
.parcours-resume-go { color: var(--text-mute); font-size: calc(21px * var(--fs-scale)); line-height: 1; }
.parcours-stats { display: grid; grid-template-columns: repeat(4, 1fr); gap: 8px; }
.pstat { display: flex; flex-direction: column; align-items: center; gap: 3px; padding: 12px 4px; border-radius: var(--radius-sm); background: var(--bg-soft); transition: transform 0.15s; }
.pstat:active { transform: scale(0.95); }
.pstat-num { font-family: var(--font-serif); font-size: calc(21px * var(--fs-scale)); font-weight: 600; color: var(--navy); line-height: 1; }
.pstat-lbl { font-size: calc(11px * var(--fs-scale)); color: var(--text-mute); font-weight: 600; text-transform: uppercase; letter-spacing: 0.4px; }
.parcours-plan { display: block; margin-top: 14px; }
.parcours-plan-top { display: flex; justify-content: space-between; font-size: calc(12.5px * var(--fs-scale)); color: var(--text-soft); margin-bottom: 5px; font-weight: 600; }
.parcours-plan-track { height: 7px; border-radius: 100px; background: var(--bg-soft); overflow: hidden; }
.parcours-plan-fill { height: 100%; background: linear-gradient(90deg, var(--gold), var(--gold-light)); border-radius: 100px; transition: width 0.3s var(--ease); }
.parcours-actions { display: flex; gap: 8px; margin-top: 14px; }
.parcours-btn { flex: 1; display: inline-flex; align-items: center; justify-content: center; gap: 7px; padding: 11px; border-radius: 100px; background: var(--bg-soft); font-size: calc(12.5px * var(--fs-scale)); font-weight: 600; color: var(--text); border: 1px solid var(--border); }
.parcours-btn:active { transform: scale(0.97); }
.parcours-btn.accent { background: linear-gradient(135deg, var(--orange), var(--orange-deep)); color: #fff; border-color: transparent; box-shadow: var(--glow-warm); }
.parcours-badge { display: inline-block; background: var(--accent); color: #fff; border-radius: 100px; padding: 1px 8px; font-size: calc(11px * var(--fs-scale)); line-height: 1.5; }
.parcours-btn.accent .parcours-badge { background: rgba(255, 255, 255, 0.28); }

/* --- Mémorisation --- */
.memo-topline { display: flex; justify-content: space-between; font-size: calc(12.5px * var(--fs-scale)); color: var(--text-mute); font-weight: 600; margin: 4px 0 12px; }
.memo-mastered { color: var(--accent); }
.memo-card { background: var(--bg-elev); border: 1px solid var(--border); border-radius: var(--radius-lg); padding: 26px 20px; box-shadow: var(--shadow-2); text-align: center; min-height: 230px; display: flex; flex-direction: column; }
.memo-ref { font-family: var(--font-serif); font-size: calc(28px * var(--fs-scale)); font-weight: 600; color: var(--navy); margin-bottom: 12px; letter-spacing: 0.3px; }
.memo-boxes { display: flex; gap: 6px; justify-content: center; margin-bottom: 18px; }
.memo-box-dot { width: 8px; height: 8px; border-radius: 50%; background: var(--bg-soft); border: 1px solid var(--border); }
.memo-box-dot.on { background: var(--gold); border-color: var(--gold); }
.memo-body { flex: 1; display: flex; align-items: center; justify-content: center; }
.memo-body.hidden { min-height: 90px; }
.memo-verse { font-size: calc(17px * var(--fs-scale)); line-height: 1.65; color: var(--text); font-family: var(--font-serif); margin: 0; }
.memo-reveal { display: inline-flex; flex-direction: column; align-items: center; gap: 10px; color: var(--text-mute); padding: 20px; }
.memo-reveal svg { opacity: 0.55; }
.memo-reveal span { font-size: calc(15px * var(--fs-scale)); font-weight: 600; }
.memo-grade { display: flex; gap: 10px; margin-top: 16px; }
.memo-grade-btn { flex: 1; display: inline-flex; align-items: center; justify-content: center; gap: 8px; padding: 15px; border-radius: var(--radius); font-size: calc(15px * var(--fs-scale)); font-weight: 600; border: 1px solid var(--border); }
.memo-grade-btn:active { transform: scale(0.97); }
.memo-grade-btn.again { background: var(--bg-soft); color: var(--text-soft); }
.memo-grade-btn.known { background: linear-gradient(135deg, var(--tile-emerald), #0E9F70); color: #fff; border-color: transparent; box-shadow: 0 6px 16px rgba(16, 185, 129, 0.3); }
.memo-context { display: block; text-align: center; margin-top: 16px; font-size: calc(12.5px * var(--fs-scale)); color: var(--accent); font-weight: 600; }
.memo-done { text-align: center; padding: 26px 16px; }
.memo-done-ic { width: 76px; height: 76px; border-radius: 50%; margin: 0 auto 16px; background: var(--accent-soft); color: var(--accent); display: flex; align-items: center; justify-content: center; }
.memo-done h2 { font-family: var(--font-serif); font-size: calc(28px * var(--fs-scale)); color: var(--navy); margin: 0 0 8px; }
.memo-done p { color: var(--text-soft); font-size: calc(15px * var(--fs-scale)); margin: 0 auto 20px; max-width: 320px; line-height: 1.5; }
.memo-metrics { display: flex; gap: 12px; justify-content: center; }
.memo-metrics > div { background: var(--bg-elev); border: 1px solid var(--border); border-radius: var(--radius); padding: 14px 20px; }
.memo-metric-num { display: block; font-family: var(--font-serif); font-size: calc(28px * var(--fs-scale)); font-weight: 600; color: var(--navy); }
.memo-metric-lbl { font-size: calc(11px * var(--fs-scale)); color: var(--text-mute); }

/* --- Mon étude (recherche + étiquettes) --- */
.etude-search { display: flex; align-items: center; gap: 8px; background: var(--bg-elev); border: 1px solid var(--border); border-radius: 100px; padding: 0 16px; margin-bottom: 12px; box-shadow: var(--shadow-1); }
.etude-search svg { color: var(--text-mute); flex-shrink: 0; }
.etude-input { flex: 1; border: none; background: transparent; padding: 13px 0; font-size: calc(15px * var(--fs-scale)); color: var(--text); font-family: inherit; outline: none; }
.etude-clear { color: var(--text-mute); font-size: calc(15px * var(--fs-scale)); padding: 4px 6px; }
.etude-tags { display: flex; gap: 8px; overflow-x: auto; padding: 2px 0 12px; -webkit-overflow-scrolling: touch; }
.etude-chip { flex-shrink: 0; padding: 7px 14px; border-radius: 100px; background: var(--bg-soft); border: 1px solid var(--border); font-size: calc(12.5px * var(--fs-scale)); font-weight: 600; color: var(--text-soft); }
.etude-chip.active { background: var(--accent); color: #fff; border-color: var(--accent); }
.etude-card { margin-bottom: 10px; }
.etude-tagrow { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; margin-top: 8px; }
.etude-tag { font-size: calc(12.5px * var(--fs-scale)); font-weight: 600; color: var(--accent); background: var(--accent-soft); border-radius: 100px; padding: 2px 10px; }
.etude-tag-add { font-size: calc(12.5px * var(--fs-scale)); font-weight: 600; color: var(--text-mute); border: 1px dashed var(--border); border-radius: 100px; padding: 2px 10px; }
.etude-card a[data-openref] { color: var(--accent); font-weight: 600; }

/* --- Guide « Comment étudier la Bible » --- */
.guide-hero { text-align: center; padding: 18px 6px 22px; border-bottom: 1px solid var(--border); margin-bottom: 18px; }
.guide-title { font-family: var(--font-serif); font-size: calc(28px * var(--fs-scale)); font-weight: 600; color: var(--navy); margin: 0 0 8px; line-height: 1.15; }
.guide-sub { font-size: calc(15px * var(--fs-scale)); color: var(--text-soft); margin: 0 auto; max-width: 340px; line-height: 1.55; }
.guide-sec { margin-bottom: 26px; }
.guide-h { display: flex; align-items: center; gap: 12px; font-family: var(--font-serif); font-size: calc(21px * var(--fs-scale)); font-weight: 600; color: var(--navy); margin: 0 0 12px; line-height: 1.2; }
.guide-h-num { flex-shrink: 0; width: 32px; height: 32px; border-radius: 50%; background: var(--accent-soft); color: var(--accent); display: flex; align-items: center; justify-content: center; font-size: calc(15px * var(--fs-scale)); font-weight: 700; }
.guide-p { font-size: calc(15px * var(--fs-scale)); line-height: 1.7; color: var(--text); margin: 0 0 12px; }
.guide-steps { display: flex; flex-direction: column; gap: 10px; margin-top: 4px; }
.guide-step { background: var(--bg-elev); border: 1px solid var(--border); border-left: 3px solid var(--gold); border-radius: var(--radius); padding: 13px 15px; box-shadow: var(--shadow-1); }
.guide-step-t { font-weight: 700; color: var(--navy); font-size: calc(15px * var(--fs-scale)); margin-bottom: 3px; }
.guide-step-d { font-size: calc(15px * var(--fs-scale)); line-height: 1.6; color: var(--text-soft); }
.guide-tools { display: flex; flex-direction: column; gap: 10px; margin-top: 4px; }
.guide-tool { display: block; background: var(--bg-elev); border: 1px solid var(--border); border-radius: var(--radius); padding: 13px 15px; box-shadow: var(--shadow-1); }
.guide-tool:active { background: var(--bg-soft); }
.guide-tool-t { font-weight: 700; color: var(--accent); font-size: calc(15px * var(--fs-scale)); display: flex; justify-content: space-between; }
.guide-tool-go { color: var(--text-mute); }
.guide-tool-d { font-size: calc(15px * var(--fs-scale)); line-height: 1.6; color: var(--text-soft); margin-top: 3px; }

/* --- Étude thématique guidée --- */
.ts-cta { display: flex; align-items: center; gap: 12px; padding: 13px 15px; margin: 4px 0 18px; border-radius: var(--radius); background: linear-gradient(135deg, var(--accent-soft), transparent); border: 1px solid var(--border); }
.ts-cta:active { transform: scale(0.99); }
.ts-cta-ic { width: 40px; height: 40px; border-radius: var(--radius-sm); background: var(--bg-elev); color: var(--accent); display: flex; align-items: center; justify-content: center; flex-shrink: 0; box-shadow: var(--shadow-1); }
.ts-cta-txt { flex: 1; display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.ts-cta-txt b { font-size: calc(15px * var(--fs-scale)); color: var(--text); }
.ts-cta-txt span { font-size: calc(12.5px * var(--fs-scale)); color: var(--text-mute); }
.ts-cta-go { color: var(--text-mute); font-size: calc(21px * var(--fs-scale)); }
.ts-head { padding: 4px 0 8px; }
.ts-title { font-family: var(--font-serif); font-size: calc(28px * var(--fs-scale)); font-weight: 600; color: var(--navy); margin: 6px 0 6px; line-height: 1.15; }
.ts-sub { font-size: calc(15px * var(--fs-scale)); color: var(--text-soft); line-height: 1.55; margin: 0 0 14px; }
.ts-progress { height: 8px; border-radius: 100px; background: var(--bg-soft); overflow: hidden; }
.ts-progress-fill { height: 100%; width: 0; background: linear-gradient(90deg, var(--gold), var(--gold-light)); border-radius: 100px; transition: width 0.3s var(--ease); }
.ts-count { font-size: calc(12.5px * var(--fs-scale)); color: var(--text-mute); font-weight: 600; margin: 6px 0 4px; }
.ts-list { display: flex; flex-direction: column; gap: 10px; padding-top: 6px; }
.ts-card { background: var(--bg-elev); border: 1px solid var(--border); border-radius: var(--radius); padding: 12px 14px; box-shadow: var(--shadow-1); transition: opacity 0.2s; }
.ts-card.done { opacity: 0.62; }
.ts-card-top { display: flex; align-items: center; justify-content: space-between; margin-bottom: 4px; }
.ts-badge { font-size: calc(11px * var(--fs-scale)); font-weight: 700; letter-spacing: 1px; color: var(--text-mute); background: var(--bg-soft); border-radius: var(--radius-sm); padding: 2px 7px; }
.ts-check { width: 26px; height: 26px; border-radius: 50%; border: 2px solid var(--border); color: #fff; display: flex; align-items: center; justify-content: center; font-size: calc(15px * var(--fs-scale)); font-weight: 700; flex-shrink: 0; }
.ts-check.on { background: var(--tile-emerald); border-color: var(--tile-emerald); }
.ts-ref { font-family: var(--font-serif); font-size: calc(17px * var(--fs-scale)); font-weight: 600; color: var(--accent); text-align: left; }
.ts-text { font-size: calc(15px * var(--fs-scale)); line-height: 1.6; color: var(--text-soft); margin: 4px 0 0; }
.ts-empty { color: var(--text-mute); }

/* --- Barre de lecture audio (mini-lecteur flottant) --- */
.audio-bar {
  position: fixed; left: 10px; right: 10px;
  bottom: calc(var(--bottombar-h) + var(--safe-bottom) + 10px);
  z-index: 60; display: flex; align-items: center; gap: 10px;
  padding: 10px 12px; border-radius: 100px;
  /* Fond sombre fixe : lisible dans les 5 thèmes (dans certains, --navy devient clair). */
  background: linear-gradient(135deg, #223A63 0%, #101D36 100%);
  color: #fff; box-shadow: var(--shadow-3);
  transform: translateY(140%); opacity: 0;
  transition: transform 0.3s var(--ease), opacity 0.3s var(--ease);
  max-width: var(--content-max); margin: 0 auto;
  pointer-events: none;
}
.audio-bar.show { transform: translateY(0); opacity: 1; pointer-events: auto; }
.audio-eq { display: inline-flex; align-items: flex-end; gap: 2px; height: 18px; flex-shrink: 0; }
.audio-eq i { width: 3px; height: 100%; background: var(--gold-light); border-radius: var(--radius-xs); transform-origin: bottom; animation: audioEq 0.9s ease-in-out infinite; }
.audio-eq i:nth-child(2) { animation-delay: 0.2s; }
.audio-eq i:nth-child(3) { animation-delay: 0.4s; }
.audio-eq i:nth-child(4) { animation-delay: 0.1s; }
@keyframes audioEq { 0%, 100% { transform: scaleY(0.35); } 50% { transform: scaleY(1); } }
.audio-label { flex: 1; font-size: calc(12.5px * var(--fs-scale)); font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.audio-speed { flex-shrink: 0; font-size: calc(12.5px * var(--fs-scale)); font-weight: 700; color: #fff; background: rgba(255,255,255,0.16); border-radius: 100px; padding: 5px 11px; }
.audio-speed:active { background: rgba(255,255,255,0.28); }
.audio-stop { flex-shrink: 0; width: 34px; height: 34px; border-radius: 50%; background: var(--orange); color: #fff; display: flex; align-items: center; justify-content: center; }
.audio-stop:active { background: var(--orange-deep); }

/* --- Introductions aux livres bibliques --- */
.intros-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 10px; margin-bottom: 18px; }
.intro-chip { display: flex; flex-direction: column; gap: 3px; background: var(--bg-elev); border: 1px solid var(--border); border-radius: var(--radius); padding: 12px 13px; box-shadow: var(--shadow-1); }
.intro-chip:active { background: var(--bg-soft); }
.intro-chip b { font-family: var(--font-serif); font-size: calc(15px * var(--fs-scale)); color: var(--navy); }
.intro-chip span { font-size: calc(11px * var(--fs-scale)); color: var(--text-mute); line-height: 1.4; }
.intro-hero { text-align: center; padding: 8px 6px 18px; border-bottom: 1px solid var(--border); margin-bottom: 18px; }
.intro-cat { display: inline-block; font-size: calc(11px * var(--fs-scale)); font-weight: 700; letter-spacing: 1px; text-transform: uppercase; color: var(--accent); background: var(--accent-soft); border-radius: 100px; padding: 4px 12px; margin-bottom: 10px; }
.intro-title { font-family: var(--font-serif); font-size: calc(28px * var(--fs-scale)); font-weight: 600; color: var(--navy); margin: 0 0 6px; line-height: 1.1; }
.intro-theme { font-size: calc(15px * var(--fs-scale)); color: var(--text-soft); font-style: italic; margin: 0 auto 14px; max-width: 340px; line-height: 1.5; }
.intro-meta { display: flex; justify-content: center; gap: 18px; flex-wrap: wrap; font-size: calc(12.5px * var(--fs-scale)); color: var(--text-mute); }
.intro-meta b { color: var(--text-soft); font-weight: 600; }
.intro-h { font-family: var(--font-serif); font-size: calc(17px * var(--fs-scale)); font-weight: 600; color: var(--navy); margin: 22px 0 10px; }
.intro-p { font-size: calc(15px * var(--fs-scale)); line-height: 1.7; color: var(--text); margin: 0; }
.intro-plan { margin: 0; padding-left: 22px; }
.intro-plan li { font-size: calc(15px * var(--fs-scale)); line-height: 1.6; color: var(--text-soft); margin-bottom: 6px; }
.intro-christ { background: linear-gradient(135deg, var(--gold-pale), var(--bg-elev)); border-left: 3px solid var(--gold); border-radius: var(--radius); padding: 14px 16px; margin-top: 20px; }
.intro-christ .intro-h { margin-top: 0; }
.intro-christ p { font-size: calc(15px * var(--fs-scale)); line-height: 1.65; color: var(--text); margin: 0; }
.intro-cles { display: flex; flex-wrap: wrap; gap: 8px; }
.intro-themes { display: flex; flex-wrap: wrap; gap: 8px; }
.intro-theme-chip { font-size: calc(12.5px * var(--fs-scale)); font-weight: 600; color: var(--navy); background: var(--bg-soft); border: 1px solid var(--border); border-radius: 100px; padding: 6px 13px; }
.intro-note { background: var(--bg-soft); border-radius: var(--radius); padding: 14px 16px; margin-top: 20px; }
.intro-note .intro-h { margin-top: 0; }
.intro-note p { font-size: calc(15px * var(--fs-scale)); line-height: 1.65; color: var(--text-soft); margin: 0; }

/* --- Méditations quotidiennes --- */
.medit-home { display: block; }
.medit-card { background: var(--bg-elev); border: 1px solid var(--border); border-left: 3px solid var(--gold); border-radius: var(--radius-lg); padding: 22px 20px; box-shadow: var(--shadow-2); }
.medit-title { font-family: var(--font-serif); font-size: calc(28px * var(--fs-scale)); font-weight: 600; color: var(--navy); margin: 6px 0 12px; line-height: 1.15; }
.medit-ref { display: inline-block; font-family: var(--font-serif); font-size: calc(15px * var(--fs-scale)); font-weight: 600; color: #fff; background: linear-gradient(135deg, var(--gold), var(--gold-light)); border-radius: 100px; padding: 5px 14px; margin-bottom: 14px; }
.medit-text { font-size: calc(15px * var(--fs-scale)); line-height: 1.75; color: var(--text); margin: 0 0 16px; }
.medit-prayer { border-top: 1px solid var(--border); padding-top: 14px; }
.medit-prayer span { display: block; font-size: calc(11px * var(--fs-scale)); font-weight: 700; letter-spacing: 1.5px; text-transform: uppercase; color: var(--gold); margin-bottom: 5px; }
.medit-prayer p { font-family: var(--font-serif); font-style: italic; font-size: calc(15px * var(--fs-scale)); line-height: 1.6; color: var(--text-soft); margin: 0; }
.medit-nav { display: flex; justify-content: space-between; gap: 10px; margin-top: 16px; }
/* Rangee « Affichage » : deux cartes de meme largeur ET de meme hauteur, meme
   si un libelle tient sur deux lignes. */
.opt-actions { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; align-items: stretch; }
.opt-actions .action-btn { width: 100%; min-width: 0; justify-content: center; text-align: center; white-space: normal; line-height: 1.2; padding: 10px 6px; }

/* Références bibliques cliquables dans les textes (doctrines, livres, intros) */
.ref-link { color: var(--accent); font-weight: 600; cursor: pointer; text-decoration: underline; text-decoration-color: var(--accent-soft); text-underline-offset: 2px; }
.ref-link:active { opacity: 0.6; }

/* Sauvegarde : boutons d'action clairs (aucun JSON visible) */
.backup-btn { display: flex; align-items: center; gap: 14px; width: 100%; text-align: left; padding: 14px 16px; background: var(--bg-elev); border: 1px solid var(--border); border-radius: var(--radius); box-shadow: var(--shadow-1); margin-bottom: 10px; }
.backup-btn:active { transform: scale(0.99); background: var(--bg-soft); }
.backup-btn.primary { background: linear-gradient(135deg, var(--orange), var(--orange-deep)); border-color: transparent; box-shadow: var(--glow-warm); }
.backup-btn-ic { width: 42px; height: 42px; border-radius: var(--radius-sm); background: var(--accent-soft); color: var(--accent); display: flex; align-items: center; justify-content: center; flex-shrink: 0; }
.backup-btn.primary .backup-btn-ic { background: rgba(255,255,255,0.2); color: #fff; }
.backup-btn-txt { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.backup-btn-txt b { font-size: calc(15px * var(--fs-scale)); color: var(--text); }
.backup-btn-txt span { font-size: calc(12.5px * var(--fs-scale)); color: var(--text-mute); }
.backup-btn.primary .backup-btn-txt b { color: #fff; }
.backup-btn.primary .backup-btn-txt span { color: #fff; opacity: 0.85; }

/* Recherche interne aux livres */
.livre-search { display: flex; align-items: center; gap: 8px; background: var(--bg-elev); border: 1px solid var(--border); border-radius: 100px; padding: 0 16px; margin-bottom: 14px; box-shadow: var(--shadow-1); }
.livre-search svg { color: var(--text-mute); flex-shrink: 0; }
.livre-search-input { flex: 1; border: none; background: transparent; padding: 13px 0; font-size: calc(15px * var(--fs-scale)); color: var(--text); font-family: inherit; outline: none; }
.livre-search-empty { text-align: center; color: var(--text-mute); font-size: calc(15px * var(--fs-scale)); padding: 10px 0; }/* --- Correctifs multi-thèmes ---
   Les en-têtes à texte blanc (tiroir,hero « À propos ») utilisent var(--navy)
   comme fond ; or dans les thèmes sombres --navy devient CLAIR (blanc en mode
   Noir),rendant le texte illisible. On force un fond sombre lisible dans ces
   thèmes,tout en gardant le bleu/sépia voulu en modes Clair et Sépia. */
[data-theme="dark"] .drawer-header,[data-theme="noir"] .drawer-header,[data-theme="dark"] .about-hero,[data-theme="noir"] .about-hero{
  background: var(--brand-surface);
  color: var(--on-brand);
}/* Puces de thème (Thèmes majeurs) : lisibles quel que soit le mode. */
[data-theme="dark"] .intro-theme-chip,[data-theme="noir"] .intro-theme-chip{ color: var(--text); }/* Cartes à dégradé « or pâle » (Doctrine/Verset/Méditation du jour,plan,journal,« Christ dans ce livre ») : en thème clair le crème est joli,mais en modes
   sombres il délave le titre. On remplace par une teinte chaude discrète sur
   surface sombre — le liseré doré est conservé. */
[data-theme="dark"] .daily-card,[data-theme="noir"] .daily-card,[data-theme="dark"] .intro-christ,[data-theme="noir"] .intro-christ{
  background: linear-gradient(135deg, rgba(201,160,82,0.16) 0%, var(--bg-elev) 70%);
}

/* ================================================================
   BOTTOM NAV PREMIUM (façon ChristLab) — barre flottante + halo néon
   ================================================================ */
#bottombar.bottombar {
  position: fixed; left: 12px; right: 12px; top: auto;
  bottom: calc(var(--safe-bottom) + 12px);
  height: 62px; z-index: 55;
  display: flex; align-items: center; justify-content: space-evenly; gap: 4px;
  padding: 6px 8px; max-width: 460px; margin: 0 auto;
  background: var(--bg-elev);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-3);
  -webkit-backdrop-filter: saturate(180%) blur(14px);
  backdrop-filter: saturate(180%) blur(14px);
}
#bottombar .bottombar-btn {
  flex: 1; display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: 2px; padding: 4px 2px; color: var(--text-soft); text-decoration: none;
  position: relative; z-index: 1; background: none; border: 0;
}
#bottombar .bb-ic { position: relative; display: flex; align-items: center; justify-content: center; width: 40px; height: 30px; transition: transform .22s var(--ease); }
#bottombar .bb-ic svg { width: 22px; height: 22px; position: relative; z-index: 1; transition: none; }
#bottombar .bb-ic::before {
  content: ''; position: absolute; width: 42px; height: 42px; border-radius: 50%;
  background: radial-gradient(circle, var(--nav-c) 0%, rgba(0,0,0,0) 70%);
  opacity: 0; transform: scale(0.5); transition: opacity .25s var(--ease), transform .25s var(--ease); pointer-events: none;
}
#bottombar .bb-lbl { font-size: calc(11px * var(--fs-scale)); font-weight: 600; letter-spacing: .3px; transition: color .2s; }
#bottombar .bottombar-btn.active { color: var(--nav-c); }
/* Le bleu de l onglet Bible (#3E6DD1) ne donne que 3,71:1 sur la barre sombre. */
[data-theme="dark"] #bottombar .bottombar-btn[data-view="chapter"] { --nav-c: #537DD6 !important; }
[data-theme="dark"] #bottombar .bottombar-btn[data-view="chapter"],
[data-theme="noir"] #bottombar .bottombar-btn[data-view="chapter"] { --nav-c: #537DD6 !important; }
/* Sur fond clair, la couleur neon de l'onglet actif ne donnait que 2,40:1 sur
   son libelle — le pire score de l'app, sur le texte le plus souvent lu.
   Le halo et l'icone soulevee signalent deja l'onglet actif : le libelle peut
   reprendre la couleur du texte sans rien perdre. Les modes sombres gardent le
   neon, qui y ressort tres bien. */
[data-theme="light"] #bottombar .bottombar-btn.active .bb-lbl,
[data-theme="sepia"] #bottombar .bottombar-btn.active .bb-lbl { color: var(--text); }
#bottombar .bottombar-btn.active .bb-ic { transform: translateY(-4px) scale(1.06); }
#bottombar .bottombar-btn.active .bb-ic svg { transform: none; }
#bottombar .bottombar-btn.active .bb-ic::before { opacity: .22; transform: scale(1); }
#bottombar .bottombar-btn.active .bb-lbl { color: var(--nav-c); }
#bottombar .bottombar-btn:active .bb-ic { transform: translateY(-2px) scale(0.9); }/* Halo plus intense dans les thèmes sombres */
[data-theme="dark"] #bottombar .bottombar-btn.active .bb-ic::before,[data-theme="noir"] #bottombar .bottombar-btn.active .bb-ic::before{ opacity: .42; }
/* Neutraliser les anciens indicateurs (pilule + barre glissante) */
#bottombar .bottombar-pill, #bottombar::after { display: none !important; }
/* Dégagement pour la barre flottante */
#app.app { padding-bottom: calc(var(--bottombar-h) + var(--safe-bottom) + 24px); }

/* ================================================================
   LISIBILITÉ — échelle de texte agrandie ET globale
   Avant : le réglage « Taille du texte » n'agissait que sur le lecteur
   et le corps des doctrines ; tout le reste (cartes, listes, menus,
   introductions, méditations, guide) restait en 11–15 px, ce qui
   donnait une impression de texte trop petit même en « Très grand ».
   Ici : échelle relevée + facteur appliqué à toute l'interface.
   ================================================================ */
:root { --fs-scale: 1; }
[data-fontsize="s"]  { --fs-scale: 0.94; }
[data-fontsize="m"]  { --fs-scale: 1.08; }
[data-fontsize="l"]  { --fs-scale: 1.22; }
[data-fontsize="xl"] { --fs-scale: 1.38; }

/* Corps de lecture : valeurs revues à la hausse */
[data-fontsize="s"]  .chapter-text, [data-fontsize="s"]  .section-body { font-size: 17px; }
[data-fontsize="m"]  .chapter-text, [data-fontsize="m"]  .section-body { font-size: 20px; }
[data-fontsize="l"]  .chapter-text, [data-fontsize="l"]  .section-body { font-size: 24px; }
[data-fontsize="xl"] .chapter-text, [data-fontsize="xl"] .section-body { font-size: 28px; }

/* Interface : tout le texte suit le réglage (calc sur la taille de référence) */
body { font-size: calc(15px * var(--fs-scale)); }

.more-link-title, .search-result-title, .setting-label,
.hl-card-ref, .intro-chip b, .parcours-resume-txt b, .backup-btn-txt b,
.guide-step-t, .guide-tool-t, .modal-doctrine-link .md-titre,
.doctrine-titre, .livre-toc-txt, .medit-ref, .ts-ref, .cat-label
{ font-size: calc(15px * var(--fs-scale)); }

.more-link-sub, .search-result-excerpt, .search-result-type, .search-result-meta,
.intro-chip span, .parcours-resume-txt span, .backup-btn-txt span,
.guide-step-d, .guide-tool-d, .ts-text, .hl-card-sub, .etude-tag,
.daily-excerpt, .intro-meta, .intro-note p, .intro-christ p, .cat-count
{ font-size: calc(12.5px * var(--fs-scale)); }

.guide-p, .intro-p, .livre-p, .medit-text
{ font-size: calc(15px * var(--fs-scale)); }

.section-label, .setting-group-title, .modal-versions-label
{ font-size: calc(12.5px * var(--fs-scale)); }

.daily-title, .intro-title, .medit-title, .ts-title, .guide-title, .home-title
{ font-size: calc(28px * var(--fs-scale)); }

.guide-h, .intro-h, .section-titre, .partie-titre, .tome-titre
{ font-size: calc(17px * var(--fs-scale)); }

.bb-lbl { font-size: calc(11px * var(--fs-scale)); }
.topbar-title { font-size: calc(17px * var(--fs-scale)); }
.pstat-num, .memo-metric-num { font-size: calc(21px * var(--fs-scale)); }
.pstat-lbl { font-size: calc(11px * var(--fs-scale)); }
.verset-btn, .action-btn, .daily-btn, .modal-action, .etude-chip, .intro-theme-chip
{ font-size: calc(12.5px * var(--fs-scale)); }
.memo-verse { font-size: calc(17px * var(--fs-scale)); }
.medit-prayer p { font-size: calc(15px * var(--fs-scale)); }
.lsg-text { font-size: calc(19px * var(--fs-scale)); }

/* ================================================================
   LOT QUALITE — accessibilite, anti-debordement, nouveaux ecrans
   ================================================================ */

/* --- Anti-debordement global : aucun element ne depasse l ecran --- */
html, body { max-width: 100%; overflow-x: hidden; }
#app, #app * { min-width: 0; }
#app img, #app svg, #app video, #app canvas { max-width: 100%; height: auto; }
#app pre, #app code { white-space: pre-wrap; word-break: break-word; overflow-wrap: anywhere; }
#app table { display: block; max-width: 100%; overflow-x: auto; }
.livre-tbl-wrap, .strong-card, .dict-entry { max-width: 100%; overflow-x: auto; }
/* Les mots tres longs (references, termes grecs, URLs) ne cassent plus la mise en page */
.section-body, .guide-p, .intro-p, .livre-p, .medit-text, .search-result-excerpt,
.more-link-sub, .setting-label, .hl-card-ref, .ts-text, .modal-doctrine-link .md-titre,
.intro-theme-chip, .etude-tag, .backup-btn-txt b, .backup-btn-txt span
{ overflow-wrap: anywhere; }
/* Rangees de reglages : le libelle peut rentrer a la ligne, le controle reste visible */
.setting-row { display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; }
.setting-row > .setting-label { flex: 1 1 60%; min-width: 0; }
.setting-hint { display: block; font-size: calc(12.5px * var(--fs-scale)); color: var(--text-mute); font-weight: 400; margin-top: 2px; }

/* --- Accessibilite : cibles tactiles >= 44px sans changer le visuel --- */
.icon-btn, .chapter-icon-btn, .vq-swatch, .hl-color-btn, .doctrine-num,
.bottombar-btn, .etude-chip, .verset-btn, .action-btn, .modal-action, .tsw
{ position: relative; }
/* Dimensions reelles minimales (plus fiable qu un calque invisible, qui
   risquerait de recouvrir le contenu voisin). */
.chapter-icon-btn { width: 40px; height: 40px; }
.vq-swatch { width: 26px; height: 26px; }
.icon-btn { min-width: 44px; min-height: 44px; }
.hl-color-btn::before { width: 44px; height: 44px; }
.bottombar-btn { min-height: 46px; }
/* Boutons dont la HAUTEUR reelle tombe sous 44 px (onglets de recherche 38 px,
   selecteur de version 35 px...). On etend la cible a 44 px en VERTICAL
   seulement : horizontalement, on empieterait sur le bouton voisin d'une meme
   rangee. Le visuel ne bouge pas. */
.search-tab, .bsearch-scope-btn, .bsearch-version-pick, .chapter-version-pick,
.strong-nav-btn, .lsg-read-chapter, .etude-chip, .fs-btn { position: relative; }
.search-tab::after, .bsearch-scope-btn::after, .bsearch-version-pick::after,
.chapter-version-pick::after, .strong-nav-btn::after, .lsg-read-chapter::after,
.etude-chip::after, .fs-btn::after {
  content: ''; position: absolute; left: 0; right: 0; top: 50%;
  height: 44px; transform: translateY(-50%);
}
/* Champs et boutons : hauteur minimale confortable */
/* 44 px : seuil au-dessous duquel le taux d'erreur au pouce monte nettement. */
.action-btn, .daily-btn, .verset-btn, .etude-chip, .opt-pill,
.chapter-book-pick, .chapter-version-pick { min-height: 44px; }
.more-link, .backup-btn, .voice-item, .livre-toc-item, .doctrine-item { min-height: 48px; }
input[type="range"] { min-height: 44px; }

/* --- Choix de la voix (items de la carte depliable) --- */
.voice-item { display: flex; align-items: center; text-align: left; padding: 11px 14px; background: var(--bg-elev); border: 1px solid var(--border); border-radius: var(--radius); font-size: calc(15px * var(--fs-scale)); font-weight: 600; color: var(--text); }
.voice-item.active { border-color: var(--accent); box-shadow: 0 0 0 1px var(--accent); color: var(--accent); }
.voice-meta { display: block; font-size: calc(11px * var(--fs-scale)); font-weight: 400; color: var(--text-mute); margin-top: 2px; overflow-wrap: anywhere; }

/* --- Rapport de diagnostic --- */
.diag-pre { background: var(--bg-elev); border: 1px solid var(--border); border-radius: var(--radius); padding: 14px; font-family: var(--font-mono); font-size: calc(11px * var(--fs-scale)); line-height: 1.6; color: var(--text-soft); margin: 0 0 12px; max-width: 100%; overflow-x: auto; }

/* ================================================================
   SELECTION DE VERSETS — surbrillance + barre contextuelle
   ================================================================ */
.chap-verse.verse-selected {
  background: var(--accent-soft) !important;
  box-shadow: inset 0 0 0 2px var(--accent);
  border-radius: var(--radius-sm);
}
.sel-bar {
  position: fixed; left: 10px; right: 10px;
  bottom: calc(var(--bottombar-h) + var(--safe-bottom) + 14px);
  z-index: 70; max-width: var(--content-max); margin: 0 auto;
  background: var(--bg-elev); border: 1px solid var(--border);
  border-radius: var(--radius-lg); box-shadow: var(--shadow-3);
  padding: 10px 12px 12px;
  transform: translateY(140%); opacity: 0; pointer-events: none;
  transition: transform .28s var(--ease), opacity .28s var(--ease);
  -webkit-backdrop-filter: saturate(180%) blur(14px); backdrop-filter: saturate(180%) blur(14px);
}
.sel-bar.show { transform: translateY(0); opacity: 1; pointer-events: auto; }
.sel-bar-top { display: flex; align-items: center; gap: 10px; margin-bottom: 10px; }
.sel-bar-ref { font-family: var(--font-serif); font-size: calc(15px * var(--fs-scale)); font-weight: 600; color: var(--navy); flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.sel-bar-count { font-size: calc(11px * var(--fs-scale)); font-weight: 600; color: var(--text-mute); flex-shrink: 0; }
.sel-bar-close { font-size: calc(12.5px * var(--fs-scale)); font-weight: 600; color: var(--accent); padding: 6px 8px; flex-shrink: 0; }
.sel-swatches { display: flex; align-items: center; gap: 10px; padding: 2px 0 10px; border-bottom: 1px solid var(--hairline); margin-bottom: 10px; flex-wrap: wrap; }
.sel-swatch { width: 36px; height: 36px; border-radius: 50%; box-shadow: inset 0 0 0 1px rgba(0,0,0,0.12); flex-shrink: 0; transition: transform .12s; }
.sel-swatch:active { transform: scale(0.88); }
.sel-erase { display: inline-flex; align-items: center; justify-content: center; background: var(--bg-soft); color: var(--text-mute); box-shadow: inset 0 0 0 1px var(--border); }
.sel-actions { display: grid; grid-template-columns: repeat(4, 1fr); gap: 4px; }
.sel-act { display: flex; flex-direction: column; align-items: center; gap: 4px; padding: 8px 2px; border-radius: var(--radius-sm); font-size: calc(11px * var(--fs-scale)); font-weight: 600; color: var(--text-soft); min-width: 0; }
.sel-act svg { color: var(--gold); }
.sel-act:active { background: var(--bg-soft); }
/* En-tete de modale sans croix : titre centre */
.modal-header-nox { justify-content: center; }
.modal-header-nox h3 { text-align: center; }

/* ================================================================
   SURLIGNAGE LINEAIRE (facon feutre) — suit les lignes du texte
   ================================================================ */
/* Le surlignage s applique au TEXTE inline (.cv-t), pas au bloc du verset :
   la couleur suit donc les lignes et s arrete sur les mots — jamais de cadre,
   y compris en mode « un verset par ligne » ou le verset est un bloc. */
.chapter-text .chap-verse.verse-hl { background: none; border: 0; box-shadow: none; padding: 0; border-radius: 0; }
.chapter-text .chap-verse.verse-hl .cv-t {
  -webkit-box-decoration-break: clone;
  box-decoration-break: clone;
  background-image: linear-gradient(180deg,
    transparent 0%, transparent 12%,
    var(--hl-bg) 12%, var(--hl-bg) 95%,
    transparent 95%);
  padding: 0 1px;
}
.chapter-text .chap-verse.verse-hl { text-align: left; }
/* Texte fonce force pour rester lisible sur la couleur claire, tous themes */
[data-theme="light"] .chapter-text .chap-verse.verse-hl .cv-t, [data-theme="light"] .chapter-text .chap-verse.verse-hl .cv-t *,
[data-theme="sepia"] .chapter-text .chap-verse.verse-hl .cv-t, [data-theme="sepia"] .chapter-text .chap-verse.verse-hl .cv-t * { color: #1A1A1A !important; }
[data-theme="light"] .chapter-text .chap-verse.verse-hl .chap-verse-num,
[data-theme="sepia"] .chapter-text .chap-verse.verse-hl .chap-verse-num { color: #8a6d1a !important; }

/* Selection en cours : teinte + trait souligne, jamais de cadre */
/* Selection en cours : meme principe lineaire, sur le texte et non le bloc. */
.chap-verse.verse-selected { background: none !important; box-shadow: none !important; border-radius: 0 !important; padding: 0 !important; text-align: left; }
.chap-verse.verse-selected .cv-t {
  -webkit-box-decoration-break: clone; box-decoration-break: clone;
  background-image: linear-gradient(180deg,
    transparent 0%, transparent 12%,
    var(--accent-soft) 12%, var(--accent-soft) 95%,
    transparent 95%) !important;
  box-shadow: inset 0 -2px 0 0 var(--accent);
  padding: 0 1px;
}

/* ================================================================
   AGRANDISSEMENT : elements du lecteur qui restaient figes
   (numeros de versets, titre de chapitre, pericopes, mots Strong)
   ================================================================ */
.chap-verse-num { font-size: calc(11px * var(--fs-scale)) !important; }
.chapter-h { font-size: calc(21px * var(--fs-scale)); }
.chapter-h-num { font-size: calc(44px * var(--fs-scale)); }
.pericope-h1 { font-size: calc(15px * var(--fs-scale)); }
.pericope-h2 { font-size: calc(15px * var(--fs-scale)); }
.pericope-h3 { font-size: calc(12.5px * var(--fs-scale)); }
.strong-inline { font-size: inherit; }
.lsg-verse-num { font-size: calc(11px * var(--fs-scale)); }
.livre-h, .livre-chap-titre { font-size: calc(17px * var(--fs-scale)); }
.livre-s { font-size: calc(15px * var(--fs-scale)); }
.livre-r { font-size: calc(12.5px * var(--fs-scale)); }
.timeline-event-title { font-size: calc(15px * var(--fs-scale)); }
.timeline-event-date { font-size: calc(12.5px * var(--fs-scale)); }
.dict-entry, .strong-card { font-size: calc(15px * var(--fs-scale)); }
.memo-ref, .ts-ref { font-size: calc(17px * var(--fs-scale)); }
.modal-version-name { font-size: calc(15px * var(--fs-scale)); }
.modal-version-desc { font-size: calc(12.5px * var(--fs-scale)); }
.sel-bar-ref { font-size: calc(15px * var(--fs-scale)); }
.sel-act { font-size: calc(11px * var(--fs-scale)); }
.audio-label { font-size: calc(12.5px * var(--fs-scale)); }


/* ================================================================
   AGRANDISSEMENT : priorite garantie
   La regle « body:not(.bible-mono) .chapter-text » verrouillait la taille a
   18 px (specificite superieure) : en typographie « Serif classique » les
   versets ne grossissaient donc PAS. On redeclare ici avec une specificite
   suffisante pour que le reglage s applique dans tous les modes.
   ================================================================ */
html[data-fontsize="s"]  body .chapter-text, html[data-fontsize="s"]  body .section-body { font-size: 17px; }
html[data-fontsize="m"]  body .chapter-text, html[data-fontsize="m"]  body .section-body { font-size: 20px; }
html[data-fontsize="l"]  body .chapter-text, html[data-fontsize="l"]  body .section-body { font-size: 24px; }
html[data-fontsize="xl"] body .chapter-text, html[data-fontsize="xl"] body .section-body { font-size: 29px; }
html[data-fontsize="s"]  body .chapter-text-mono { font-size: 17px; }
html[data-fontsize="m"]  body .chapter-text-mono { font-size: 20px; }
html[data-fontsize="l"]  body .chapter-text-mono { font-size: 24px; }
html[data-fontsize="xl"] body .chapter-text-mono { font-size: 29px; }

/* ================================================================
   RANGEES D OPTIONS — cartes alignees, largeurs egales, sans vide
   Avant : flex + flex-wrap et pastilles dimensionnees par leur texte
   => « Tres grand » passait a la ligne, et les rangees a 2 options
   laissaient un espace a droite. Grille a colonnes egales : tout tient
   sur une seule ligne et occupe toute la largeur disponible.
   ================================================================ */
.opt-row {
  display: grid;
  grid-auto-flow: column;
  grid-auto-columns: minmax(0, 1fr);
  gap: 8px;
  align-items: stretch;
}
.opt-row .opt-pill {
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: center;
  gap: 6px;
  padding: 10px 6px;
  min-width: 0;
  width: 100%;
  text-align: center;
  white-space: normal;      /* le libelle peut tenir sur deux lignes */
  line-height: 1.2;
  hyphens: auto;
}
.opt-row .opt-pill svg { flex-shrink: 0; }

/* Couleurs de surlignage : reparties uniformement sur la largeur */
.hl-colors { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 10px; justify-content: initial; }
.hl-color-btn { width: 100%; min-width: 0; }

/* Rangee dense (4 tailles de texte) : libelle legerement resserre pour tenir
   sur UNE seule ligne, afin que toutes les pastilles gardent la meme hauteur
   et la meme forme. Le retour a la ligne reste autorise aux tres grandes
   tailles, ou il devient inevitable. */
.opt-row .opt-pill[data-fs] {
  font-size: calc(11px * var(--fs-scale));
  letter-spacing: -0.1px;
  padding: 10px 4px;
}
/* Hauteur identique pour toutes les pastilles d une meme rangee */
.opt-row .opt-pill { align-self: stretch; }


/* ================================================================
   PALETTE DE SURLIGNAGE PAR THEME
   Les pastels sont concus pour un fond clair. En modes sombres ils formaient
   des bandes saturees qui obligeaient a forcer le texte en noir (effet
   « autocollant »). On utilise ici des teintes TRANSLUCIDES : la couleur se lit
   comme un marqueur, et le texte garde la couleur du theme.
   ================================================================ */
[data-theme="dark"] .chap-verse.verse-hl[data-hlc="yellow"] .cv-t { --hl-bg: rgba(240, 200, 90, 0.26); }
[data-theme="dark"] .chap-verse.verse-hl[data-hlc="green"]  .cv-t { --hl-bg: rgba(110, 210, 140, 0.24); }
[data-theme="dark"] .chap-verse.verse-hl[data-hlc="blue"]   .cv-t { --hl-bg: rgba(110, 170, 250, 0.26); }
[data-theme="dark"] .chap-verse.verse-hl[data-hlc="pink"]   .cv-t { --hl-bg: rgba(250, 140, 175, 0.26); }
[data-theme="dark"] .chap-verse.verse-hl[data-hlc="orange"] .cv-t { --hl-bg: rgba(250, 165, 90, 0.26); }
[data-theme="dark"] .chap-verse.verse-hl[data-hlc="red"]    .cv-t { --hl-bg: rgba(240, 100, 100, 0.28); }

[data-theme="noir"] .chap-verse.verse-hl[data-hlc="red"]    .cv-t { --hl-bg: rgba(240, 100, 100, 0.32); }
[data-theme="noir"] .chap-verse.verse-hl[data-hlc="yellow"] .cv-t { --hl-bg: rgba(240, 200, 90, 0.30); }
[data-theme="noir"] .chap-verse.verse-hl[data-hlc="green"]  .cv-t { --hl-bg: rgba(110, 210, 140, 0.28); }
[data-theme="noir"] .chap-verse.verse-hl[data-hlc="blue"]   .cv-t { --hl-bg: rgba(110, 170, 250, 0.30); }
[data-theme="noir"] .chap-verse.verse-hl[data-hlc="pink"]   .cv-t { --hl-bg: rgba(250, 140, 175, 0.30); }
[data-theme="noir"] .chap-verse.verse-hl[data-hlc="orange"] .cv-t { --hl-bg: rgba(250, 165, 90, 0.30); }

/* Le trait bas reprend la teinte, en plus affirme */
[data-theme="dark"] .chap-verse.verse-hl .cv-t,
[data-theme="noir"] .chap-verse.verse-hl .cv-t { box-shadow: inset 0 -2px 0 0 var(--hl-bg); }

/* Onglets de « Mon espace » (Notes & Journal · Surlignés · Favoris) */
.espace-tabs { display: flex; gap: 6px; background: var(--bg-soft); border: 1px solid var(--border); border-radius: 100px; padding: 4px; margin: 0 0 16px; }
.espace-tab { flex: 1; border: 0; background: none; color: var(--text-mute); font: inherit; font-size: calc(12.5px * var(--fs-scale)); font-weight: 600; padding: 9px 6px; border-radius: 100px; cursor: pointer; white-space: nowrap; }
.espace-tab.active { background: var(--bg-elev); color: var(--text); box-shadow: var(--shadow-1); }

/* Pastilles de la liste « Versets surlignes » : cerclees en sombre pour rester
   visibles sur fond fonce. */
[data-theme="dark"] .hl-dot, [data-theme="noir"] .hl-dot { box-shadow: inset 0 0 0 1px rgba(255,255,255,0.35); }


/* ================================================================
   TRANSITION ENTRE LES MODES
   Le passage d'un theme a l'autre est un fondu enchaine compose par le GPU :
   soit l'API View Transitions (une seule image de la page), soit, a defaut,
   un voile plein ecran qui se dissout (.theme-wash, pose par applyTheme).
   On n'anime plus les couleurs de chaque element : sur un long chapitre cela
   revenait a repeindre des milliers de noeuds a chaque image — c'etait la
   cause des a-coups, surtout en passant des modes sombres aux modes clairs.
   ================================================================ */
::view-transition-old(root),
::view-transition-new(root) {
  animation-duration: .34s;
  animation-timing-function: cubic-bezier(.33,.75,.25,1);
}
.theme-wash {
  position: fixed; inset: 0; z-index: 99999; pointer-events: none;
  transition: opacity .34s cubic-bezier(.33,.75,.25,1);
}
@media (prefers-reduced-motion: reduce) {
  ::view-transition-old(root), ::view-transition-new(root) { animation: none; }
  .theme-wash { display: none; }
}

/* ================================================================
   « GENERALEMENT TRADUIT PAR » — pastilles + compte d occurrences
   La source Bible Strong donne « amour 60, charite 55, agapes 1; 118 ».
   Affichee brute, la suite de nombres passait pour du bruit.
   ================================================================ */
.sg-wrap { display: flex; flex-wrap: wrap; gap: 6px; margin: 2px 0 0; }
.sg-item {
  display: inline-flex; align-items: baseline; gap: 4px;
  padding: 4px 10px; border-radius: 100px;
  background: var(--accent-soft); color: var(--accent);
  font-size: calc(15px * var(--fs-scale)); font-weight: 600;
  max-width: 100%; overflow-wrap: anywhere;
}
.sg-item.sg-more { background: none; color: var(--text-mute); padding: 4px 2px; }
.sg-total { margin: 8px 0 0; font-size: calc(12.5px * var(--fs-scale)); color: var(--text-mute); }
/* Rendu cliquable : filtre la concordance sur ce mot francais. */
.sg-clic { border: 1px solid transparent; cursor: pointer; transition: background .15s, border-color .15s, color .15s; }
.sg-clic:active { transform: scale(0.97); }
.sg-clic.active { background: var(--gold); color: var(--on-gold); border-color: var(--gold); }
/* Bandeau du filtre en cours */
.strong-filtre { display: none; }
.strong-filtre.on {
  display: flex; align-items: center; gap: 10px; flex-wrap: wrap;
  margin: 0 0 12px; padding: 9px 12px; border-radius: var(--radius-sm);
  background: var(--accent-soft); color: var(--text);
  font-size: calc(12.5px * var(--fs-scale));
}
.strong-filtre b { color: var(--accent); }
.strong-filtre button {
  margin-left: auto; padding: 6px 12px; border-radius: 100px; min-height: 44px;
  background: var(--bg-elev); border: 1px solid var(--border); color: var(--text);
  font-size: calc(12.5px * var(--fs-scale)); font-weight: 600; cursor: pointer;
}
.strong-fp-note { text-align: center; color: var(--text-mute); font-size: calc(12.5px * var(--fs-scale)); margin-top: 14px; padding: 6px; }

/* ================================================================
   GRILLES DENSES AUX GRANDES TAILLES DE TEXTE
   Mesure a la taille « Geant » : les libelles d une seule piece (SURLIGNES,
   « Vie chretienne », « commencements ») depassaient leur colonne. Plutot que
   de couper les mots, on reduit le nombre de colonnes : le mot reste entier,
   la lecture reste confortable.
   ================================================================ */
html[data-fontsize="l"] .parcours-stats,
html[data-fontsize="xl"] .parcours-stats { grid-template-columns: repeat(2, 1fr); }
html[data-fontsize="l"] .cat-grid,
html[data-fontsize="xl"] .cat-grid { grid-template-columns: repeat(2, 1fr); }
html[data-fontsize="xl"] .intros-grid { grid-template-columns: 1fr; }
/* Filet de securite : un mot trop long se coupe plutot que de deborder. */
.pstat-lbl, .cat-label, .cat-count, .intro-chip b, .intro-chip span { overflow-wrap: break-word; hyphens: auto; }
.pstat, .cat-item, .intro-chip { min-width: 0; }

/* Ligne « Version : » de la recherche biblique : elle doit pouvoir passer a la
   ligne, sinon le libelle et la pastille debordent aux grandes tailles. */
.bsearch-verline { flex-wrap: wrap; row-gap: 8px; }
/* Pas de min-width:0 ici : cela autoriserait les elements a retrecir SOUS leur
   contenu, et « Version : » se retrouvait rogne. Le passage a la ligne suffit. */
.bsearch-version-pick { max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

/* ================================================================
   RETOUR AU VERSET
   Pastille flottante affichee sur les ecrans atteints depuis le modal verset
   (fiche Strong agrandie, references croisees, carte). Elle vit hors de #app,
   qui est reecrit de facon asynchrone par ces ecrans. Elle se place au-dessus
   de la barre du bas, et remonte si le mini-lecteur audio occupe la place.
   ================================================================ */
.nav-back {
  position: fixed; left: 50%; z-index: 58;
  bottom: calc(var(--bottombar-h) + var(--safe-bottom) + 10px);
  display: inline-flex; align-items: center; gap: 7px;
  max-width: calc(100% - 28px);
  padding: 10px 16px 10px 11px; border-radius: 100px;
  background: var(--bg-elev); color: var(--text);
  border: 1px solid var(--border); box-shadow: var(--shadow-3);
  font-size: calc(12.5px * var(--fs-scale)); font-weight: 600;
  transform: translateX(-50%) translateY(150%); opacity: 0; pointer-events: none;
  transition: transform .3s var(--ease), opacity .3s var(--ease), bottom .25s var(--ease);
}
.nav-back.show { transform: translateX(-50%) translateY(0); opacity: 1; pointer-events: auto; }
.nav-back:active { transform: translateX(-50%) scale(0.96); }
.nav-back svg { flex-shrink: 0; color: var(--accent); }
.nav-back span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
body:has(.audio-bar.show) .nav-back { bottom: calc(var(--bottombar-h) + var(--safe-bottom) + 68px); }

/* ================================================================
   SELECTEUR DE MODE DANS LA BARRE DU HAUT
   Present sur tous les ecrans, comme la loupe. Le bouton est un petit amas de
   pastilles rondes ; au toucher, les modes se deploient horizontalement vers
   la gauche, EN SURIMPRESSION du titre : la barre ne se reorganise pas.
   Chaque pastille garde une cible tactile de 44 px (calque ::before), meme
   principe que les pastilles de surlignage.
   ================================================================ */
.theme-pop { position: relative; display: flex; align-items: center; flex-shrink: 0; }
/* Le titre reste lisible : il se resserre juste ce qu'il faut pour que les
   pastilles deployees ne l'atteignent jamais (3 x 22 px + les ecarts).
   C'est une MARGE, pas un padding : avec overflow:hidden, le texte deborde
   dans le padding avant d'etre coupe, et venait donc sous les pastilles. */
.topbar-title { transition: margin-right .22s var(--ease); }
.topbar.theme-open .topbar-title { margin-right: 96px; }

/* Pastille unique du bouton : la couleur du mode courant, taille de la loupe. */
.tc-one { width: 22px; height: 22px; border-radius: 50%; background: var(--sw); box-shadow: 0 0 0 1px rgba(128,128,128,0.55); }
#btn-theme-top { transition: transform .28s var(--ease), background .2s; }
.theme-pop.open #btn-theme-top { transform: scale(0.94); background: var(--bg-soft); }

.theme-pop-list {
  position: absolute; right: 100%; top: 50%; margin-top: -11px;
  display: flex; align-items: center; gap: 8px; padding-right: 4px;
  pointer-events: none;
}
.theme-pop.open .theme-pop-list { pointer-events: auto; }
.tsw {
  position: relative; flex-shrink: 0;
  width: 22px; height: 22px; padding: 0; border: 0; border-radius: 50%;
  background: var(--sw);
  box-shadow: 0 0 0 1px rgba(128,128,128,0.55), var(--shadow-1);
  opacity: 0; transform: translateX(14px) scale(0.35);
  transition: opacity .2s var(--ease), transform .34s cubic-bezier(.2,.9,.3,1.25);
}
/* Cible tactile de 44 px sans grossir la pastille */
.tsw::before { content: ''; position: absolute; left: 50%; top: 50%; width: 44px; height: 44px; transform: translate(-50%, -50%); }
.theme-pop.open .tsw { opacity: 1; transform: none; }
/* Deploiement en cascade, en partant du bouton */
.theme-pop.open .tsw:nth-child(3) { transition-delay: 0s; }
.theme-pop.open .tsw:nth-child(2) { transition-delay: .05s; }
.theme-pop.open .tsw:nth-child(1) { transition-delay: .1s; }
@media (prefers-reduced-motion: reduce) {
  .tsw { transform: none; transition: opacity .12s linear; }
}

/* ================================================================
   CARTE DEPLIABLE — une seule carte qui resume le choix courant et deroule
   la liste au besoin. Sert aux voix ET aux versions bibliques (24 entrees
   qui n'ont pas a occuper l'ecran en permanence).
   ================================================================ */
.fold-card { background: var(--bg-elev); border: 1px solid var(--border); border-radius: var(--radius); box-shadow: var(--shadow-1); overflow: hidden; margin: 4px 0 2px; }
.fold-summary { display: flex; align-items: center; gap: 12px; width: 100%; padding: 13px 15px; text-align: left; background: none; border: 0; }
.fold-summary:active { background: var(--bg-soft); }
.fold-summary-txt { flex: 1; display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.fold-summary-txt b { font-size: calc(15px * var(--fs-scale)); color: var(--text); }
.fold-summary-txt span { font-size: calc(12.5px * var(--fs-scale)); color: var(--text-mute); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.fold-count { flex-shrink: 0; font-size: calc(11px * var(--fs-scale)); font-weight: 700; color: var(--accent); background: var(--accent-soft); border-radius: 100px; padding: 2px 9px; }
.fold-chev { flex-shrink: 0; color: var(--text-mute); transition: transform .28s var(--ease); }
.fold-card.open .fold-chev { transform: rotate(180deg); }
/* Deroulement fluide */
.fold-card .fold-list {
  display: block; max-height: 0; opacity: 0; overflow: hidden; padding: 0 10px;
  transition: max-height .32s var(--ease), opacity .26s var(--ease), padding .32s var(--ease);
}
.fold-card.open .fold-list { max-height: 62vh; opacity: 1; overflow-y: auto; padding: 4px 10px 10px; }
.fold-card .voice-item, .fold-card .version-pref-item { margin-bottom: 8px; }
.fold-card .voice-item:last-child, .fold-card .version-pref-item:last-child { margin-bottom: 0; }
/* Intertitre a l'interieur d'un deroule (ex. « Voix feminines ») */
.fold-sub {
  margin: 12px 2px 6px; font-size: calc(11px * var(--fs-scale)); font-weight: 700;
  letter-spacing: 1px; text-transform: uppercase; color: var(--text-mute);
}
.fold-list > .fold-sub:first-child { margin-top: 2px; }
/* Actions rattachees a la liste (ex. essayer la voix), en bas du deroule */
.fold-actions { display: flex; gap: 8px; }
.fold-list .fold-actions { margin-top: 10px; padding-top: 10px; border-top: 1px solid var(--border); }
.fold-actions .action-btn { flex: 1; min-width: 0; justify-content: center; text-align: center; white-space: normal; line-height: 1.2; }

/* Bloc licences de l'ecran A propos : texte de lecture + boutons de renvoi. */
.about-licence { padding: 4px 16px 16px; }
.about-licence p { font-size: calc(12.5px * var(--fs-scale)); line-height: 1.7; color: var(--text-soft); margin: 0 0 10px; }
.about-licence strong { color: var(--text); }
.about-licence .action-btn { margin: 2px 6px 8px 0; }