:root {
  --vert: #2D5A2D; --vert-fonce: #234723; --creme: #FBF7EF; --orange: #F2A93B;
  --orange-clair: #FFD98E; --tomate: #D9482B; --texte: #2B2B23; --muted: #7A766B;
  --chip: #E4F0DC; --chip-txt: #2E5E33; --card-r: 16px;
  --nav-h: 62px;
}
* { margin: 0; padding: 0; box-sizing: border-box; -webkit-tap-highlight-color: transparent; }
html { font-size: 16px; }
body { font-family: 'Segoe UI', system-ui, sans-serif; background: var(--creme); color: var(--texte); }

/* ---- Loader ---- */
#loader { position: fixed; inset: 0; background: linear-gradient(160deg, var(--vert), var(--vert-fonce)); color: #fff; display: flex; align-items: center; justify-content: center; z-index: 100; transition: opacity .4s; }
#loader.done { opacity: 0; pointer-events: none; }
.loader-box { text-align: center; padding: 20px; }
.tomato-bounce { font-size: 60px; animation: bounce 1s infinite alternate ease-in-out; }
@keyframes bounce { to { transform: translateY(-12px); } }
.loader-box h1 { margin: 8px 0 4px; }
.loader-box p { opacity: .85; font-size: 14px; margin-bottom: 16px; }
.progress { width: 240px; height: 10px; background: rgba(255,255,255,.25); border-radius: 6px; overflow: hidden; margin: 0 auto; }
#loader-bar { height: 100%; width: 0; background: var(--orange); border-radius: 6px; transition: width .2s; }

/* ---- Topbar ---- */
#topbar { position: sticky; top: 0; z-index: 20; background: var(--vert); color: #fff; display: flex; align-items: center; justify-content: space-between; padding: 10px 16px; padding-top: max(10px, env(safe-area-inset-top)); }
.brand { font-size: 17px; }
.icon-btn { background: none; border: none; font-size: 20px; cursor: pointer; color: inherit; padding: 4px 8px; border-radius: 8px; }
.icon-btn.big { font-size: 24px; }
.icon-btn:active { background: rgba(0,0,0,.08); }

/* ---- Layout / nav ---- */
#layout { display: flex; min-height: calc(100dvh - 48px); }
#nav { position: fixed; bottom: 0; left: 0; right: 0; height: calc(var(--nav-h) + env(safe-area-inset-bottom)); padding-bottom: env(safe-area-inset-bottom); background: #fff; border-top: 1px solid #E5DFD2; display: flex; z-index: 20; }
.nav-btn { flex: 1; background: none; border: none; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 2px; cursor: pointer; color: var(--muted); font-size: 11px; }
.nav-btn span { font-size: 22px; }
.nav-btn.active { color: var(--vert); font-weight: 700; }
.nav-btn.active span { transform: scale(1.15); }
#main { flex: 1; padding: 18px 16px calc(var(--nav-h) + 24px + env(safe-area-inset-bottom)); max-width: 1080px; margin: 0 auto; width: 100%; }

@media (min-width: 900px) {
  #nav { position: sticky; top: 48px; bottom: auto; height: calc(100dvh - 48px); width: 210px; flex-direction: column; border-top: none; border-right: 1px solid #E5DFD2; background: var(--vert-fonce); padding: 18px 10px; gap: 4px; }
  .nav-btn { flex: 0 0 auto; flex-direction: row; justify-content: flex-start; gap: 12px; padding: 12px 14px; border-radius: 12px; font-size: 15px; color: rgba(255,255,255,.85); }
  .nav-btn.active { background: var(--orange); color: #2B1D07; }
  .nav-btn.active span { transform: none; }
  #main { padding-bottom: 40px; }
}

/* ---- Composants ---- */
.panel { display: none; }
.panel.active { display: block; animation: fadein .25s; }
@keyframes fadein { from { opacity: 0; transform: translateY(6px); } }
h2 { font-size: clamp(19px, 5vw, 24px); margin-bottom: 14px; }
.searchrow { display: flex; gap: 8px; margin-bottom: 10px; }
.searchrow input, .searchrow select { flex: 1; min-width: 0; padding: 13px 16px; font-size: 16px; border: 2px solid #E5DFD2; border-radius: 14px; background: #fff; outline: none; }
.searchrow input:focus { border-color: var(--orange); }
.searchrow.small input { padding: 9px 12px; font-size: 14px; }
.searchrow select { flex: 0 0 76px; }
.btn-primary { background: var(--orange); color: #2B1D07; border: none; border-radius: 14px; padding: 12px 20px; font-size: 16px; font-weight: 700; cursor: pointer; }
.btn-primary:active { transform: scale(.97); }
.btn-ghost { background: #fff; color: var(--chip-txt); border: 1.5px solid #CFE0C6; border-radius: 14px; padding: 12px 18px; font-size: 15px; font-weight: 600; cursor: pointer; }
.btnrow { display: flex; gap: 10px; flex-wrap: wrap; margin: 10px 0; }
.checkline { display: flex; align-items: center; gap: 8px; font-size: 13.5px; color: var(--muted); margin-bottom: 8px; }
.hint { font-size: 13.5px; color: var(--muted); margin: 8px 0; }
.hint.feedback { color: var(--orange-fonce, #D98F1F); font-weight: 600; }
.small-muted { font-size: 12px; color: var(--muted); }

/* Chips */
.chipline { display: flex; flex-wrap: wrap; gap: 7px; margin: 8px 0; }
.chip { background: var(--chip); color: var(--chip-txt); border: none; border-radius: 16px; padding: 8px 14px; font-size: 14px; font-weight: 600; cursor: pointer; display: inline-flex; align-items: center; gap: 7px; }
.chip.suggestion { background: #F1EDE3; color: var(--muted); }
.chip.pantry { background: #F3EBDD; color: #7A6A4F; }
.chip.member { background: #fff; }
.chip.member.selected { background: var(--orange); color: #2B1D07; }
.chip .x { opacity: .55; font-size: 12px; }

/* Cartes recettes (grille) */
.cards { display: grid; gap: 12px; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); }
@media (min-width: 600px) { .cards { grid-template-columns: repeat(auto-fill, minmax(210px, 1fr)); } }
.rcard { background: #fff; border-radius: var(--card-r); box-shadow: 0 2px 8px rgba(0,0,0,.06); overflow: hidden; cursor: pointer; display: flex; flex-direction: column; }
.rcard:active { transform: scale(.98); }
.rcard .pic { height: 110px; background: #E9F2E2; display: flex; align-items: center; justify-content: center; font-size: 38px; }
.rcard .pic img { width: 100%; height: 100%; object-fit: cover; }
.rcard .body { padding: 10px 12px 12px; }
.rcard h4 { font-size: 14.5px; line-height: 1.3; margin-bottom: 4px; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.rcard .meta { font-size: 11.5px; color: var(--muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

/* Lignes (frigo, livres) */
.rows { display: flex; flex-direction: column; gap: 10px; }
.rrow { background: #fff; border-radius: var(--card-r); box-shadow: 0 2px 8px rgba(0,0,0,.06); padding: 13px 15px; cursor: pointer; display: flex; align-items: center; gap: 12px; }
.rrow .grow { flex: 1; min-width: 0; }
.rrow h4 { font-size: 15px; margin-bottom: 3px; }
.rrow .sub { font-size: 12.5px; color: var(--muted); }
.rrow .badge { background: var(--chip); color: var(--chip-txt); font-size: 12px; font-weight: 700; border-radius: 10px; padding: 6px 10px; white-space: nowrap; }

/* Onglets */
.tabrow { display: flex; gap: 8px; flex-wrap: wrap; margin-bottom: 12px; }
.tabrow.small .tab { padding: 7px 12px; font-size: 13px; }
.tab { background: #fff; border: 1.5px solid #E5DFD2; border-radius: 12px; padding: 10px 14px; font-size: 14px; font-weight: 600; cursor: pointer; color: var(--texte); }
.tab.active { background: var(--orange); border-color: var(--orange); color: #2B1D07; }

/* Enfants */
.roulette-box { background: #FFF3DE; border-radius: var(--card-r); padding: 16px; margin-bottom: 14px; }
.familybar { background: #F0F7EC; border-radius: var(--card-r); padding: 14px; margin-bottom: 14px; }
.famtitle { font-weight: 700; font-size: 14px; margin-bottom: 6px; }
.kcard { background: #F0F7EC; border-radius: var(--card-r); padding: 15px; margin-bottom: 10px; }
.kcard.reward { background: #FFF3DE; }
.kcard .khead { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.kcard .emo { font-size: 26px; }
.kcard b { font-size: 15px; }
.kcard .pts { background: var(--orange); color: #2B1D07; font-size: 11.5px; font-weight: 700; border-radius: 10px; padding: 3px 9px; }
.kcard.reward .pts { background: var(--tomate); color: #fff; }
.kcard p { font-size: 13.5px; color: #55524B; margin: 6px 0 10px; }
.kcard .btn-primary { padding: 9px 16px; font-size: 14px; }

/* Aide */
.helpcard { background: #fff; border-radius: var(--card-r); padding: 16px; margin-bottom: 10px; box-shadow: 0 2px 8px rgba(0,0,0,.05); }
.helpcard b { display: block; margin-bottom: 5px; font-size: 15px; }
.helpcard p { font-size: 13.5px; color: #55524B; line-height: 1.55; }
.helpcard.don { background: #FFF3DE; }
.helpcard .tiers { font-size: 15px; font-weight: 700; color: var(--texte); margin-top: 8px; }

/* Bibliothèque lecteur */
#lib-reader h3 { margin: 12px 0; }
/* Le décor appartient à la fenêtre… */
#reader-pages .page { background: #fff; border-radius: var(--card-r);
  box-shadow: 0 2px 8px rgba(0,0,0,.06); padding: 0 18px; }
/* …et le texte n'a AUCUN retrait vertical : il doit commencer exactement en haut de
   la fenêtre, sinon ses lignes ne tombent plus sur la grille et le bord de page en
   tranche une en deux. */
#reader-pages .flux { padding: 0; font-family: Georgia, serif; font-size: 15.5px;
  line-height: 1.75; }
.chap-item { padding: 10px 14px; }

/* Fiche recette */
#detail { position: fixed; inset: 0; background: rgba(43,43,35,.55); z-index: 50; display: flex; align-items: flex-end; justify-content: center; }
#detail[hidden] { display: none; }
@media (min-width: 700px) { #detail { align-items: center; padding: 24px; } }
#detail-card { background: var(--creme); width: 100%; max-width: 860px; max-height: 92dvh; border-radius: 22px 22px 0 0; overflow-y: auto; padding: 18px; }
@media (min-width: 700px) { #detail-card { border-radius: 22px; } }
/* flex-wrap et largeur plancher : sur un téléphone réglé en très grande police,
   les trois boutons d icônes mangeaient toute la largeur et la colonne de titres se
   réduisait à un mot par ligne. Elle passe désormais à la ligne au lieu de s écraser. */
.detail-head { display: flex; align-items: flex-start; gap: 12px; margin-bottom: 14px; flex-wrap: wrap; }
#detail-thumb { width: 74px; height: 74px; border-radius: 14px; object-fit: cover; }
.detail-emoji { width: 74px; height: 74px; border-radius: 14px; background: #E9F2E2; display: flex; align-items: center; justify-content: center; font-size: 34px; flex: 0 0 74px; }
.detail-titles { flex: 1 1 55%; min-width: 150px; }
.detail-titles h3 { font-size: 19px; line-height: 1.25; }
.hint.time { color: var(--chip-txt); font-weight: 600; }
.detail-body { display: grid; gap: 14px; }
@media (min-width: 700px) { .detail-body { grid-template-columns: 280px 1fr; align-items: start; } }
.detail-ing, .detail-instr { background: #fff; border-radius: var(--card-r); padding: 16px; }
.detail-ing ul { list-style: none; margin-top: 8px; }
.detail-ing li { font-size: 14px; padding: 5px 0; border-bottom: 1px dashed #EEE8DC; cursor: pointer; }
.detail-ing li .ing-cart { opacity: .35; font-size: 12px; float: right; }
.detail-ing li:active { background: #F6F1E7; }
.detail-instr #detail-steps { margin-top: 8px; font-size: 14.5px; line-height: 1.7; }
.hint.license { margin-top: 12px; font-size: 11.5px; word-break: break-all; }
.hint.license a { color: var(--chip-txt); }

#sugar-box { background: #FFF6E5; border-radius: 12px; padding: 10px 12px; margin: 10px 0 4px; }
.sugar-label { display: block; font-size: 12.5px; font-weight: 700; margin-bottom: 6px; }
#sugar-select { width: 100%; padding: 8px 10px; font-size: 13.5px; border: 1.5px solid #E5DFD2; border-radius: 10px; background: #fff; }
.sugar-note { margin: 7px 0 0 !important; font-size: 12px; line-height: 1.5; }
.sugar-swap { display: block; font-size: 12.5px; color: var(--chip-txt); font-weight: 600; margin-top: 2px; }

.detail-ing li { cursor: pointer; }
.detail-ing li .ing-cart { float: right; opacity: .45; font-size: 12px; }
.detail-ing li.in-cart { color: var(--chip-txt); font-weight: 600; }
.detail-ing li.in-cart .ing-cart { opacity: 1; }

/* Mes courses */
.shop-head { font-weight: 700; font-size: 14.5px; margin: 14px 0 6px; }
.shop-item { background: #fff; border-radius: 12px; padding: 11px 13px; margin-bottom: 5px; display: flex; align-items: center; gap: 11px; cursor: pointer; box-shadow: 0 1px 5px rgba(0,0,0,.05); }
.shop-item .tick { font-size: 17px; }
.shop-item .txt { flex: 1; font-size: 14.5px; }
.shop-item.done .txt { text-decoration: line-through; color: var(--muted); }
.shop-item .x { background: none; border: none; color: #B0A79A; font-size: 13px; cursor: pointer; padding: 4px 6px; }
.shop-item .merged { background: var(--chip); color: var(--chip-txt); font-size: 10.5px; font-weight: 700; border-radius: 8px; padding: 1px 6px; margin-left: 6px; vertical-align: middle; }
.rrow .cart-btn { background: none; border: none; font-size: 17px; cursor: pointer; padding: 6px; }

/* Saisons */
.chip.fruit { background: #FFE9EF; color: #A63D5A; }
.season-scroll { overflow-x: auto; }
#season-table table { border-collapse: collapse; width: 100%; min-width: 560px; }
#season-table th { font-size: 10.5px; padding: 4px 2px; color: var(--muted); }
#season-table th.cur { color: var(--orange-fonce, #D98F1F); }
#season-table td { font-size: 12px; padding: 3px 4px; }
#season-table td:first-child { white-space: nowrap; }
#season-table td.in, #season-table td.out { border-radius: 4px; border: 2px solid #fff; min-width: 22px; height: 18px; }
#season-table td.in { background: #7FB46B; }
#season-table td.out { background: #F1EDE3; }
#season-table td.cur { outline: 2px solid var(--orange); outline-offset: -2px; }
#season-table tr.grp td { font-weight: 700; font-size: 13.5px; padding-top: 12px; }

details#pantry-box { background: #fff; border-radius: var(--card-r); padding: 12px 15px; margin: 10px 0; }
details#pantry-box summary { cursor: pointer; font-weight: 700; font-size: 14px; }
details#pantry-box summary small { color: var(--muted); font-weight: 400; }

/* Repères nutritionnels sur la fiche recette */
.nutri {
  font-size: 13px; line-height: 1.55; margin: 6px 0 0;
  background: #FFF6E9; border-left: 3px solid #D9A441;
  padding: 8px 12px; border-radius: 0 8px 8px 0;
}
.nutri b { font-weight: 700; }
.nutri-note { display: block; margin-top: 4px; font-size: 11.5px; color: #7A6A4E; }

/* ---------- Liste de courses partagée ---------- */
.part-carte { background:#fff; border:1px solid #E3E0D6; border-radius:14px; padding:14px; margin-bottom:14px; }
.part-carte.active { border-color:#2D5A2D; }
.part-carte > b { font-size:15px; }
.part-tete { display:flex; align-items:center; gap:10px; flex-wrap:wrap; margin-bottom:8px; }
.part-code { font-family:ui-monospace,monospace; font-size:13px; background:#F4F7F0;
             border:1px solid #CFE0CB; border-radius:7px; padding:3px 8px; letter-spacing:1px; }
.part-membres { display:flex; gap:6px; flex-wrap:wrap; margin-bottom:10px; }
.part-membres .chip { background:#F0EFEA; border-radius:20px; padding:3px 11px; font-size:13px; }
.part-membres .chip.moi { background:#2D5A2D; color:#fff; }

.part-liste { margin-top:10px; }
.part-item { padding:8px 4px; border-bottom:1px solid #F0EFEA; }
.part-haut { display:flex; align-items:center; gap:8px; }
/* Ligne de saisie du prix : toujours présente, discrète tant qu elle est vide. */
.part-bas { display:flex; align-items:center; gap:8px; margin:5px 0 0 27px; opacity:.55; transition:opacity .15s; }
.part-bas:hover, .part-bas:focus-within, .part-bas.rempli { opacity:1; }
.part-bas label { display:flex; align-items:center; gap:5px; font-size:13px; }
.part-aide { display:block; margin-top:5px; font-size:12.5px; color:#2D5A2D; line-height:1.5; }
.part-item.done .txt { text-decoration:line-through; opacity:.6; }
.part-item .tick { background:none; border:0; font-size:17px; cursor:pointer; padding:0; line-height:1; }
.part-item .txt { flex:1 1 130px; min-width:0; font-size:14.5px; }
.part-item .pour { font-size:12px; color:#2D5A2D; }
.part-item .x { background:none; border:0; color:#A33; cursor:pointer; font-size:15px; padding:0 4px; }
.part-item .prix { display:flex; gap:5px; align-items:center; }
.part-item input[type=number] { width:78px; padding:5px 7px; font:inherit; font-size:13.5px;
                                border:1px solid #CFCBBE; border-radius:7px; }
.part-item select { padding:5px 7px; font:inherit; font-size:13px;
                    border:1px solid #CFCBBE; border-radius:7px; max-width:130px; }

.part-soldes { margin-top:14px; background:#F4F7F0; border-radius:10px; padding:12px 14px; }
.part-solde-l { font-size:13.5px; padding:2px 0; }
.part-solde-l .pos { color:#2D5A2D; font-weight:600; }
.part-solde-l .neg { color:#A33; font-weight:600; }
.part-regle { margin-top:9px; padding-top:9px; border-top:1px solid #D8E2D4; font-size:14px; line-height:1.7; }
.part-rgpd { margin-top:12px; font-size:12.5px; color:#6B6B6B; }
.part-rgpd summary { cursor:pointer; }
.part-rgpd p { margin:6px 0 0; line-height:1.6; }
.lienbouton { background:none; border:0; padding:0; font:inherit; color:#A33;
              text-decoration:underline; cursor:pointer; }

/* Bandeau « nouvelle version disponible » — une application installée ne se recharge
   presque jamais, il faut donc proposer explicitement la mise à jour. */
#maj-bandeau {
  position: fixed; left: 12px; right: 12px; bottom: 12px; z-index: 9999;
  background: #2D5A2D; color: #fff; border-radius: 12px; padding: 12px 16px;
  display: flex; align-items: center; gap: 12px; flex-wrap: wrap;
  font-size: 14.5px; box-shadow: 0 6px 20px rgba(0,0,0,.28);
}
#maj-bandeau span { flex: 1 1 160px; }
#maj-bandeau button {
  background: #F2A93B; color: #2B1D07; border: 0; border-radius: 9px;
  padding: 9px 16px; font: inherit; font-weight: 700; cursor: pointer; flex: 0 0 auto;
}
@media (min-width: 700px) { #maj-bandeau { left: auto; right: 20px; max-width: 420px; } }


/* Liste déroulante d'ingrédients */
.autocompletion {
  display: flex; flex-direction: column; gap: 2px; margin: 4px 0 0;
  background: #fff; border: 1px solid #E3E0D6; border-radius: 10px;
  padding: 4px; max-height: 250px; overflow-y: auto;
  box-shadow: 0 4px 14px rgba(0,0,0,.08);
}
.autocompletion .ac-item {
  background: none; border: 0; text-align: left; font: inherit; font-size: 14.5px;
  padding: 9px 10px; border-radius: 7px; cursor: pointer; color: inherit;
}
.autocompletion .ac-item:hover, .autocompletion .ac-item.actif { background: #EEF4EA; }


/* Rappel d'assaisonnement sur les recettes salées qui ne listent ni sel ni poivre */
.assaisonnement {
  font-size: 13px; line-height: 1.5; margin: 6px 0 0;
  background: #F4F7F0; border-left: 3px solid #2D5A2D;
  padding: 8px 12px; border-radius: 0 8px 8px 0; color: #2D5A2D;
}


/* Provenance des articles du caddie */
.merged.cliquable { cursor: pointer; border: 0; font: inherit; }
.merged.cliquable:hover { background: #2D5A2D; color: #fff; }
.origines {
  background: #fff; border: 1px solid #E3E0D6; border-radius: 12px;
  padding: 12px 14px; margin: 8px 0; box-shadow: 0 4px 14px rgba(0,0,0,.07);
}
.origine-item {
  display: block; width: 100%; text-align: left; background: #F4F7F0; border: 0;
  border-radius: 9px; padding: 10px 12px; margin-top: 6px; font: inherit;
  font-size: 14px; cursor: pointer; color: #2D5A2D;
}
.origine-item:hover { background: #E4EEDD; }


/* Bouton de provenance dans le caddie */
.shop-item .provenance { opacity: .45; transition: opacity .15s; }
.shop-item .provenance:hover, .shop-item:hover .provenance { opacity: 1; }

/* Mode magasin actif : le bouton reste enfoncé, la liste change de registre */
.btn-ghost.actif { background: #2e7d32; color: #fff; border-color: #2e7d32; }
#shop-list.magasin .shop-item .txt { font-weight: 600; }

/* Recherche de chapitre : reste visible quand on déroule un livre de 500 chapitres */
.chap-tools { position: sticky; top: 0; z-index: 3; background: var(--bg, #fff);
  padding: .5rem 0; display: flex; gap: .6rem; align-items: center; flex-wrap: wrap; }
.chap-tools input { flex: 1 1 14rem; padding: .5rem .7rem; font-size: 1rem;
  border: 1px solid var(--bord, #ccc); border-radius: .5rem; }
.chap-num { opacity: .5; font-variant-numeric: tabular-nums; margin-right: .3rem; }

/* Le filtre des chapitres masque les lignes par l'attribut « hidden ». Sans cette
   règle, « .rrow { display: flex } » l'emporte sur le style par défaut du navigateur :
   l'attribut était bien posé, mais rien ne disparaissait à l'écran. On tapait un
   numéro de chapitre et la liste ne bougeait pas. */
.rrow[hidden] { display: none; }

/* ── La liseuse : une vraie page de livre ───────────────────────────────────
   Papier crème, texte en romain justifié, lettrine, ombre de reliure à gauche.
   Le confort de lecture prime : ces textes font parfois cent pages. */
#lib-reader {
  --papier: #FBF6EA;
  --encre: #2E2A24;
  background: var(--papier);
  color: var(--encre);
  border-radius: 6px 10px 10px 6px;
  padding: 34px clamp(20px, 5vw, 60px) 48px;
  /* 44rem convenait a une colonne unique ; pour une double page il faut le double,
     sinon les deux pages ne trouvent jamais la place de s-afficher cote a cote. */
  max-width: min(96vw, 68rem);
  margin: 0 auto;
  box-shadow: 0 3px 18px rgba(0,0,0,.14), inset 14px 0 22px -18px rgba(90,70,40,.55);
  border-left: 3px solid #E4D9C0;
  position: relative;
}
#lib-reader #lib-back {
  background: transparent; border: 1px solid #D8CBB0; color: #6B5C42;
  margin-bottom: 22px;
}
#reader-title {
  font-family: Georgia, "Times New Roman", serif;
  font-size: clamp(19px, 2.6vw, 25px);
  font-weight: 600;
  text-align: center;
  line-height: 1.35;
  margin: 0 0 6px;
  color: #4A3F2C;
}
/* filet décoratif sous le titre, comme dans les livres anciens */
#reader-title::after {
  content: "❦";
  display: block;
  font-size: 15px;
  color: #B9A57C;
  margin: 12px 0 20px;
}
#reader-pages .flux {
  font-family: Georgia, "Times New Roman", serif;
  font-size: clamp(16px, 1.9vw, 18px);
  line-height: 1.75;
  text-align: justify;
  hyphens: auto;
  }
@media (max-width: 640px) {
  #lib-reader { padding: 24px 18px 34px; border-radius: 8px; }
  #reader-pages .flux { text-align: left; hyphens: none; }
  }

/* ── Liseuse : double page, pagination latérale ─────────────────────────────
   Le texte coule dans des colonnes hautes comme l'écran. On ne défile plus vers
   le bas : on tourne les pages. Les commandes restent sous le texte, visibles
   sans jamais avoir à remonter. */
#reader-pages {
  display: flex;
  gap: 48px;
  overflow: hidden;
  margin-top: 4px;
  position: relative;
}
/* Chaque page est une fenêtre à hauteur fixe. Le texte, à l'intérieur, coule
   normalement et se décale VERTICALEMENT : aucun déplacement latéral n'existe,
   donc aucune lettre ne peut être rognée sur le côté. */
#reader-pages .page {
  flex: 1 1 0;
  min-width: 0;
  overflow: hidden;
  position: relative;
}
#reader-pages .page[hidden] { display: none; }
#reader-pages .flux {
  position: absolute;
  top: 0; left: 0; right: 0;
  transition: transform .28s ease;
  will-change: transform;
  white-space: normal;
}
#reader-pages.double::before {          /* la pliure, seulement si deux pages */
  content: "";
  position: absolute; inset: 0 auto 0 50%;
  width: 22px; margin-left: -11px;
  background: linear-gradient(90deg, transparent, rgba(120,95,55,.13), transparent);
  pointer-events: none;
  z-index: 1;
}
/* Aucune marge entre paragraphes : elles casseraient la grille des lignes, et une
   ligne finirait coupee en deux par le bord de la page. Les livres imprimes separent
   les paragraphes par le seul alinea, pas par un blanc. */
#reader-pages .flux p { margin: 0; text-indent: 1.4em; }
#reader-pages .flux p:first-child { text-indent: 0; }
@media (max-width: 699px) { #reader-pages { gap: 0; } }

#reader-nav {
  display: flex; align-items: center; justify-content: center; gap: 22px;
  margin-top: 14px; padding-top: 12px;
  border-top: 1px solid #E4D9C0;
}
.page-btn {
  font: inherit; font-size: 26px; line-height: 1;
  width: 58px; height: 44px;
  background: #F3EADA; color: #5A4B33;
  border: 1px solid #DCCDAE; border-radius: 9px; cursor: pointer;
}
.page-btn:hover:not(:disabled) { background: #E8DBC2; }
.page-btn:disabled { opacity: .32; cursor: default; }
#page-num { font-variant-numeric: tabular-nums; min-width: 5.5em; text-align: center; }
.reader-aide { text-align: center; margin-top: 8px; opacity: .7; }

/* En lecture, la rubrique Livres s'efface : plus de titre ni de barre de recherche
   au-dessus du livre. Cliquer un chapitre doit ouvrir le LIVRE, rien d'autre. */
#p-books.lecture > h2,
#p-books.lecture > .searchrow,
#p-books.lecture > .btnrow,
#p-books.lecture > .hint { display: none; }

/* « hidden » ne suffit pas quand une règle donne un display à l'élément : « .rows »
   l'emportait, la liste des 500 chapitres gardait toute sa hauteur, et la liseuse se
   retrouvait 500 lignes plus bas. On remontait en haut de page et on ne voyait rien. */
#lib-list[hidden], #lib-reader[hidden], .rows[hidden] { display: none !important; }

/* Téléphone : la liseuse doit tenir dans l'écran RÉELLEMENT visible. « dvh » suit la
   barre d'adresse qui se rétracte, ce que « vh » ne fait pas — d'où la moitié du
   texte cachée sous le bord de l'écran. */
@media (max-width: 699px) {
  #reader-pages { height: calc(100dvh - 250px); min-height: 260px; }
}

/* Pied de liste : « 25 / 340 » et le bouton pour la suite */
.lot-pied { display: flex; align-items: center; justify-content: center; gap: 14px;
  padding: 16px 0 4px; grid-column: 1 / -1; }
.lot-pied .btn-ghost { padding: 9px 18px; font-size: 14px; cursor: pointer;
  border: 1.5px solid #CFCBBE; border-radius: 10px; background: #FCFCFA; font: inherit; }
.lot-pied .btn-ghost:hover { background: #F1EEE4; }