/* MaBiblia  -  lisible de loin, utilisable d une main, pendant une visite */

:root {
  --fond: #ffffff;
  --texte: #1a1a1a;
  --doux: #5b6470;
  --trait: #d9dee5;
  --accent: #1f4e79;
  --accentDoux: #eaf1f8;
  --surligne: #fff3a3;
  --livre: #7a5d00;
  --livreDoux: #fdf6e0;
  box-sizing: border-box;
  padding-top: env(safe-area-inset-top, 0px);
  padding-bottom: env(safe-area-inset-bottom, 0px);
}

*, *::before, *::after { box-sizing: inherit; }

body {
  margin: 0;
  font-family: system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  font-size: 18px;
  line-height: 1.5;
  color: var(--texte);
  background: var(--fond);
}

header {
  position: sticky;
  top: env(safe-area-inset-top, 0px);
  background: var(--fond);
  border-bottom: 1px solid var(--trait);
  padding: 10px 16px 0;
  z-index: 5;
}

h1 { font-size: 22px; margin: 0 0 8px; color: var(--accent); }

nav { display: flex; gap: 8px; }

.onglet {
  border: none;
  background: none;
  font: inherit;
  color: var(--doux);
  padding: 8px 4px 10px;
  border-bottom: 3px solid transparent;
  cursor: pointer;
}
.onglet.actif { color: var(--accent); border-bottom-color: var(--accent); font-weight: 600; }

main { padding: 16px; max-width: 760px; margin: 0 auto; }

#compteur { margin: 0 0 8px; }
.choix { display: inline-flex; align-items: center; gap: 8px; margin-top: 12px; color: var(--doux); font-size: 16px; }
.choix input { width: 20px; height: 20px; }
.cout { font-size: 14px; color: var(--doux); margin-top: 8px; }
.avis { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; margin-top: 12px; color: var(--doux); font-size: 15px; }
.avis input[type=text] { flex: 1 1 200px; font-size: 16px; padding: 8px; }
.gratuit { color: #1e7a48; font-weight: 600; }

/* le bandeau de lecture est fixe en bas: on reserve sa hauteur,
   sinon il recouvre les derniers boutons de la page */
body.enLecture main { padding-bottom: 96px; }

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

input[type=text] {
  flex: 1 1 240px;
  min-width: 0;
  font: inherit;
  padding: 12px;
  border: 1px solid var(--trait);
  border-radius: 8px;
}
input[type=text]:focus { outline: 2px solid var(--accent); border-color: var(--accent); }

button {
  font: inherit;
  padding: 12px 16px;
  border: 1px solid var(--accent);
  border-radius: 8px;
  background: var(--accent);
  color: #fff;
  cursor: pointer;
  min-height: 48px;
}
button.doux { background: #fff; color: var(--accent); }
button:disabled { opacity: 0.5; cursor: default; }

.etat { color: var(--doux); min-height: 24px; margin: 12px 0 0; }
.erreur { color: #a3261b; }

.bloc { border: 1px solid var(--trait); border-radius: 10px; padding: 14px; margin: 16px 0; }
.bloc.livre { border-color: #e6d6a0; background: var(--livreDoux); }
/* un resultat eloigne du sujet: visible, mais discret */
.bloc.eloigne { opacity: 0.72; border-style: dashed; }
.bloc.synthese { border-color: #cfe0f0; background: var(--accentDoux); }

.source { font-size: 14px; text-transform: uppercase; letter-spacing: 0.04em; color: var(--livre); font-weight: 600; }
.intitule { font-weight: 600; margin-top: 4px; }
.petit { font-size: 14px; color: var(--doux); }

/* les exemples bibliques appartiennent a leur intitule: on les rattache */
.exemples { margin-top: 12px; padding-left: 12px; border-left: 3px solid var(--trait); }
.exemple { margin-top: 10px; }

.contexte:empty { display: none; }
.contexte { margin-top: 12px; padding: 10px 12px; background: var(--accentDoux); border-radius: 8px; }
.ligne { padding: 6px; display: flex; gap: 10px; align-items: baseline; justify-content: space-between; border-radius: 6px; }
.ligne.cible { font-weight: 600; }

/* le surlignage ne change QUE la couleur: aucune marge, aucun deplacement.
   L ombre etale la couleur autour du bloc sans pousser le texte. */
.encours {
  background: var(--surligne);
  /* deborde seulement a gauche et a droite: en haut et en bas, la couleur
     mordait sur le bloc voisin et sur le bouton Ecouter */
  box-shadow: 6px 0 0 var(--surligne), -6px 0 0 var(--surligne);
}
button.mini { padding: 4px 10px; min-height: 32px; font-size: 14px; }

.verset { padding: 12px 0; border-top: 1px solid var(--trait); }
.verset:first-of-type { border-top: none; }
.ref { font-weight: 600; color: var(--accent); }
.texte { margin: 4px 0 8px; white-space: pre-line; }

.actions { display: flex; gap: 8px; flex-wrap: wrap; }
.actions button { padding: 8px 12px; min-height: 40px; font-size: 16px; }

.grandNombre { font-size: 40px; font-weight: 700; color: var(--accent); line-height: 1.1; }

/* la Bible: livres et chapitres */
.livres { display: flex; flex-wrap: wrap; gap: 8px; margin: 12px 0; }
.livres button { padding: 8px 12px; min-height: 40px; font-size: 16px; }
.chapitres { display: flex; flex-wrap: wrap; gap: 6px; margin: 12px 0; }
.chapitres button { min-width: 48px; min-height: 44px; padding: 6px; }
.titrePartie { margin: 16px 0 4px; color: var(--doux); font-size: 14px; text-transform: uppercase; letter-spacing: 0.04em; }
.versetLu { padding: 6px; border-radius: 6px; }
.versetLu .numero { color: var(--accent); font-weight: 600; margin-right: 6px; }
.barreLecture { position: sticky; top: 64px; background: var(--fond); padding: 8px 0; display: flex; gap: 8px; flex-wrap: wrap; z-index: 4; }

ul.themes { list-style: none; padding: 0; margin: 12px 0 0; }
ul.themes li { border-top: 1px solid var(--trait); }
ul.themes button {
  width: 100%;
  text-align: left;
  background: none;
  color: var(--texte);
  border: none;
  border-radius: 0;
  padding: 14px 4px;
}

/* sans cette ligne, display:flex annule l attribut hidden, et le bandeau
   reste visible en permanence */
#lecteur[hidden] { display: none; }

#lecteur {
  position: fixed;
  z-index: 10;
  left: 0; right: 0;
  bottom: env(safe-area-inset-bottom, 0px);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 12px 16px;
  background: var(--accent);
  color: #fff;
}
#lecteur button { background: #fff; color: var(--accent); border-color: #fff; }
#lecteur .reglages { display: flex; align-items: center; gap: 8px; }
#lecteur label { font-size: 14px; }
#vitesse {
  font: inherit;
  font-size: 16px;
  padding: 8px;
  border-radius: 8px;
  border: 1px solid #fff;
  background: #fff;
  color: var(--accent);
  min-height: 44px;
}

@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --fond: #14181d;
    --texte: #eef1f5;
    --doux: #9aa4b1;
    --trait: #2b323b;
    --accent: #7fb3e8;
    --accentDoux: #1b2733;
    --livre: #e0c26a;
    --livreDoux: #241f14;
  }
  :root:not([data-theme="light"]) button { color: #10161c; }
  :root:not([data-theme="light"]) button.doux { background: transparent; color: var(--accent); }
  :root:not([data-theme="light"]) { --surligne: #6b5c14; }
}