/* =========================================================
   LA LISEUSE

   Le rose de la maison — celui de Lifestyle et du jeu des paires — et
   non un troisième rose inventé pour l'occasion : fuchsia franc, rose
   poudré, ivoire, et le jaune en accent. Playfair pour les titres,
   Bebas pour les petites capitales, comme partout où la maison se fait
   gaie.

   Deux états dans une seule page : la table d'accueil, où l'on choisit
   un fichier, et le livre ouvert, qui prend l'écran entier. Et là, le
   rose se retire sur les bords — on lit un livre, on ne regarde pas une
   affiche. La couleur tient la barre, les boutons et la table ; le
   texte garde son papier.

   Trois papiers, parce qu'on ne lit pas à la même heure : blanc rosé le
   jour, crème le soir, nuit au lit.
   ========================================================= */

body.liseuse-rose {
  --rs-fuchsia: #ff1f8e;
  --rs-rose: #ffd6ec;
  --rs-rose-pale: #fff2f9;
  --rs-ivoire: #faf6f0;
  --rs-jaune: #f5e642;
  --rs-ocean: #1b6ca8;
  --rs-noir: #1a1a1a;

  --fond-teinte: #fbdcee;
  background-color: var(--rs-ivoire);
}

body.liseuse-rose .page-head h1 {
  font-family: 'Playfair Display', Georgia, serif;
  font-weight: 900;
  color: var(--rs-fuchsia);
}
body.liseuse-rose .breadcrumb a { color: var(--rs-ocean); }
body.liseuse-rose .page-head .lead { color: #4a4038; }

/* ---------- Choisir un fichier ---------- */

.lz-depot {
  display: grid; justify-items: center; gap: 14px;
  padding: 52px 24px;
  border: 3px dashed var(--rs-fuchsia); border-radius: 22px;
  background: #fff;
  box-shadow: 8px 8px 0 var(--rs-rose);
  text-align: center;
  transition: background .15s ease, box-shadow .15s ease;
}
.lz-depot.est-vise {
  background: var(--rs-rose-pale);
  box-shadow: 8px 8px 0 var(--rs-jaune);
}
.lz-depot-signe { margin: 0; font-size: 3rem; line-height: 1; }
.lz-depot-note { margin: 0; color: #6d6058; font-size: .92rem; }

/* Le bouton d'ouverture : celui de la maison, passé au rose */
.lz-depot .btn.btn-primary {
  background: var(--rs-fuchsia);
  border: 2px solid var(--rs-noir);
  color: #fff;
  border-radius: 999px;
  box-shadow: 4px 4px 0 var(--rs-noir);
  font-family: 'Playfair Display', Georgia, serif;
  font-weight: 700;
}
.lz-depot .btn.btn-primary:hover {
  background: var(--rs-noir);
  box-shadow: 4px 4px 0 var(--rs-fuchsia);
}

.lz-alerte {
  margin: 18px 0 0; padding: 13px 17px;
  border-radius: 12px;
  background: #fff; border: 2px solid var(--rs-rose);
  color: #4a4038; font-size: .95rem; line-height: 1.5;
}
.lz-alerte.est-rate { border-color: #d63a3a; color: #a02a1c; }
.lz-alerte[hidden] { display: none; }

/* ---------- Ce qu'on promet ---------- */

.lz-promesse {
  display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px;
  margin-top: 44px;
}
.lz-promesse > div {
  padding: 22px;
  background: #fff;
  border: 2px solid var(--rs-noir); border-radius: 18px;
  box-shadow: 5px 5px 0 var(--rs-rose);
}
.lz-promesse h2 {
  margin: 0 0 10px;
  font-family: 'Bebas Neue', 'Poppins', sans-serif;
  font-size: 1.2rem; letter-spacing: .06em; color: var(--rs-fuchsia);
}
.lz-promesse p {
  margin: 0; font-size: .93rem; line-height: 1.65; color: #55493f;
}

/* =========================================================
   LE LIVRE OUVERT
   ========================================================= */

.lz { --lz-facteur: 1; }

.lz,
.lz.fond-papier {
  --lz-fond: #fff8fb;
  --lz-encre: #1a1a1a;
  --lz-encre-pale: #7c6f74;
  --lz-trait: #f6dcea;
  --lz-barre: #fff;
  --lz-accent: #ff1f8e;
}

.lz.fond-creme {
  --lz-fond: #f4ecd8;
  --lz-encre: #3b3226;
  --lz-encre-pale: #7b6b53;
  --lz-trait: #e0d3b8;
  --lz-barre: #f9f3e4;
  --lz-accent: #c2185b;
}

.lz.fond-nuit {
  --lz-fond: #16131a;
  --lz-encre: #ddd6da;
  --lz-encre-pale: #8d8189;
  --lz-trait: #2e2732;
  --lz-barre: #1d1922;
  --lz-accent: #ff7ab8;
}

.lz-lecture[hidden] { display: none !important; }
.lz-lecture {
  position: fixed; inset: 0; z-index: 60;
  display: flex; flex-direction: column;
  background: var(--lz-fond); color: var(--lz-encre);
}

.lz-barre {
  min-height: 55px;
  flex: 0 0 auto;
  display: flex; align-items: center; gap: 12px;
  padding: 8px 12px;
  background: var(--lz-barre);
  border-bottom: 2px solid var(--lz-accent);
}

.lz-identite {
  flex: 1 1 auto; min-width: 0; margin: 0; text-align: center;
  display: flex; flex-direction: column; gap: 1px;
}
.lz-identite-titre {
  font-family: 'Playfair Display', Georgia, serif;
  font-weight: 700; font-size: 1rem;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.lz-identite-auteur {
  font-family: 'Bebas Neue', 'Poppins', sans-serif;
  font-size: .82rem; letter-spacing: .08em; color: var(--lz-encre-pale);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}

.lz-outils { display: flex; gap: 6px; }

.lz-bouton {
  min-height: 38px; padding: 0 13px;
  border: 2px solid var(--lz-trait); border-radius: 999px;
  background: transparent; color: var(--lz-encre);
  font: inherit; font-size: .86rem; cursor: pointer;
  white-space: nowrap;
  transition: background .12s ease, border-color .12s ease, color .12s ease;
}
.lz-bouton:hover {
  border-color: var(--lz-accent); background: var(--lz-accent); color: #fff;
}

/* ---------- La table des chapitres ---------- */

.lz-plan {
  position: absolute; top: 57px; bottom: 0; left: 0; z-index: 2;
  width: min(84vw, 340px);
  display: none; flex-direction: column;
  padding: 12px; overflow-y: auto;
  background: var(--lz-barre); border-right: 2px solid var(--lz-accent);
  box-shadow: 10px 0 30px rgba(26, 26, 26, .16);
}
.lz.montre-plan .lz-plan { display: flex; }
.lz-plan button {
  padding: 11px 13px; border: 0; border-radius: 10px;
  background: transparent; color: var(--lz-encre);
  font: inherit; font-size: .92rem; text-align: left; cursor: pointer;
  line-height: 1.35;
}
.lz-plan button:hover { background: var(--lz-trait); }
.lz-plan button.est-ici {
  background: var(--lz-accent); color: #fff; font-weight: 700;
}

/* ---------- Le texte, en pages ---------- */

/* ── Une marge, et non un retrait intérieur ──
   Le rognage d'un bloc tombe sur son retrait intérieur, pas sur son
   texte : avec du « padding », la page suivante se serait montrée par
   la tranche pendant qu'on lit. Avec une marge, le rognage tombe
   exactement sur la colonne, et rien ne dépasse jamais. */
.lz-vue {
  flex: 1 1 auto; min-height: 0; position: relative;
  overflow: hidden;
  margin: 20px clamp(16px, 5vw, 64px);
  touch-action: pan-y;
}

/* ── Une colonne, une page ──
   Le texte est coulé en colonnes de la largeur de la vue. Tourner la
   page revient à décaler le bloc : la mise en page est déjà faite, et
   le navigateur la refait seul quand on change la taille des lettres. */
.lz-texte {
  column-fill: auto;
  transition: transform .22s ease;
  font-family: var(--serif, Georgia, 'Times New Roman', serif);
  /* Un plancher de dix-sept points : le site écrit plus petit sur un
     téléphone, et le livre y tombait à quinze. On suit la taille choisie
     par le lecteur dans son navigateur si elle est plus grande, jamais
     si elle est plus petite. */
  font-size: calc(max(1.08rem, 17px) * var(--lz-facteur, 1));
  line-height: 1.72;
  text-align: justify;
  hyphens: auto;
  -webkit-hyphens: auto;
}

.lz-texte p { margin: 0 0 .85em; }
.lz-texte p + p { text-indent: 1.3em; }
.lz-texte h1, .lz-texte h2, .lz-texte h3, .lz-texte h4 {
  font-family: 'Playfair Display', Georgia, serif;
  color: var(--lz-accent);
  line-height: 1.25; text-align: left; text-wrap: balance;
  margin: 0 0 .7em; break-after: avoid;
}
.lz-texte h1 { font-size: 1.5em; }
.lz-texte h2 { font-size: 1.25em; }
.lz-texte h3 { font-size: 1.08em; }
.lz-texte img {
  display: block; max-width: 100%; max-height: 78vh; height: auto;
  margin: .6em auto; break-inside: avoid; border-radius: 6px;
}
.lz-texte figure { margin: 1em 0; break-inside: avoid; }
.lz-texte figcaption {
  font-family: 'Bebas Neue', 'Poppins', sans-serif;
  font-size: .84em; letter-spacing: .05em;
  color: var(--lz-encre-pale); text-align: center;
}
.lz-texte blockquote {
  margin: 1em 0; padding-left: 1em;
  border-left: 3px solid var(--lz-accent); color: var(--lz-encre-pale);
}
.lz-texte a { color: var(--lz-accent); }
.lz-texte a[data-vers] { cursor: pointer; text-decoration: underline; }
.lz-texte hr { border: 0; border-top: 2px solid var(--lz-trait); margin: 1.4em 0; }
.lz-texte table { width: 100%; border-collapse: collapse; font-size: .9em; }
.lz-texte td, .lz-texte th { border: 1px solid var(--lz-trait); padding: 5px 8px; }
.lz-texte pre {
  white-space: pre-wrap; font-size: .86em;
  font-family: ui-monospace, Menlo, Consolas, monospace;
}

/* ---------- Où l'on en est ---------- */

.lz-pied {
  flex: 0 0 auto;
  display: flex; align-items: center; gap: 12px;
  padding: 6px 12px 10px;
  border-top: 2px solid var(--lz-trait); background: var(--lz-barre);
}
.lz-fleche {
  width: 48px; height: 40px; padding: 0;
  border: 2px solid var(--lz-trait); border-radius: 999px;
  background: transparent; color: var(--lz-encre);
  font-size: 1.1rem; cursor: pointer;
  transition: background .12s ease, border-color .12s ease, color .12s ease;
}
.lz-fleche:hover {
  border-color: var(--lz-accent); background: var(--lz-accent); color: #fff;
}
.lz-ou {
  flex: 1 1 auto; min-width: 0; margin: 0; text-align: center;
  font-family: 'Bebas Neue', 'Poppins', sans-serif;
  font-size: .9rem; letter-spacing: .06em; color: var(--lz-encre-pale);
}
.lz-ou-chapitre {
  display: block;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.lz-ou-page { font-variant-numeric: tabular-nums; color: var(--lz-accent); }

/* ---------- Le téléphone ---------- */

@media (max-width: 700px) {
  .lz-promesse { grid-template-columns: 1fr; gap: 16px; }
  .lz-promesse > div { padding: 18px; }
  .lz-depot { padding: 34px 16px; box-shadow: 5px 5px 0 var(--rs-rose); }

  /* Le titre du livre vaut mieux que le mot « Chapitres » : le trait du
     bouton se comprend seul, le titre non. */
  .lz-identite-auteur { display: none; }
  .lz-mot { display: none; }
  .lz-bouton { padding: 0 11px; font-size: .82rem; }
  .lz-barre { gap: 8px; padding: 6px 8px; }
  .lz-vue { margin: 14px 18px; }
}

@media (prefers-reduced-motion: reduce) {
  .lz-texte { transition: none; }
}

/* ---------- Les questions ----------
   Elles servent au visiteur et au moteur : repliees pour ne pas noyer
   le bouton qui compte, mais ecrites en clair dans la page. */

.lz-questions { margin-top: 48px; }
.lz-questions-titre {
  margin: 0 0 16px;
  font-family: 'Playfair Display', Georgia, serif;
  font-size: 1.6rem; font-weight: 700; color: var(--rs-fuchsia);
}
.lz-questions details {
  margin-bottom: 10px;
  background: #fff;
  border: 2px solid var(--rs-rose); border-radius: 14px;
  overflow: hidden;
}
.lz-questions details[open] { border-color: var(--rs-fuchsia); }
.lz-questions summary {
  padding: 14px 18px;
  cursor: pointer;
  font-family: 'Bebas Neue', 'Poppins', sans-serif;
  font-size: 1.06rem; letter-spacing: .05em; color: var(--rs-noir);
  list-style: none;
}
.lz-questions summary::-webkit-details-marker { display: none; }
.lz-questions summary::after {
  content: '+'; float: right; color: var(--rs-fuchsia); font-size: 1.2rem;
}
.lz-questions details[open] summary::after { content: '3'; }
.lz-questions summary:hover { color: var(--rs-fuchsia); }
.lz-questions details p {
  margin: 0; padding: 0 18px 16px;
  font-size: .94rem; line-height: 1.7; color: #55493f;
  max-width: 68ch;
}
.lz-questions details a { color: var(--rs-ocean); }
.lz-questions code {
  padding: 1px 5px; border-radius: 4px;
  background: var(--rs-rose-pale); font-size: .92em;
}

@media (max-width: 700px) {
  .lz-questions summary { padding: 12px 14px; font-size: 1rem; }
  .lz-questions details p { padding: 0 14px 14px; }
}