/* ============================================================
   Lecteur intégré — Mallette pédagogique numérique
   Chambre d'agriculture Auvergne-Rhône-Alpes

   Feuille chargée uniquement par la page du lecteur : elle n'a
   pas à peser sur le catalogue.

   Le feuilletage lui-même est confié à StPageFlip (MIT), qui
   calcule la pliure du papier et suit le curseur. Cette feuille
   ne décrit donc plus l'animation : elle habille les feuillets
   que la bibliothèque met en scène — papier, ombres, reliure.
   ============================================================ */

.reader {
  display: flex;
  flex-direction: column;
  background: var(--gray-100);
  border-bottom: 1px solid var(--gray-200);
}

/* ------------------------------------------------------------
   Barre d'outils
   ------------------------------------------------------------ */

.reader__bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-4);
  flex-wrap: wrap;
  padding: 12px var(--space-6);
  background: var(--white);
  border-bottom: 1px solid var(--gray-200);
}

.reader__bar-left {
  display: flex;
  align-items: center;
  gap: var(--space-4);
  min-width: 0;
}

.reader__bar-right {
  display: flex;
  align-items: center;
  gap: var(--space-2);
}

/* Le retour porte la même pilule que les outils de la barre : c'est
   le seul élément cliquable du lecteur, il ne peut pas rester en
   texte nu à côté du titre. */
.reader__back {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  min-height: 44px;
  padding: 0 var(--space-4) 0 var(--space-3);
  background: var(--white);
  border: 1px solid var(--gray-300);
  border-radius: var(--radius-pill);
  font-family: var(--font-label);
  text-transform: uppercase;
  letter-spacing: var(--ls-caps-sm);
  font-size: var(--fs-eyebrow);
  font-weight: var(--fw-semibold);
  color: var(--gray-700);
  text-decoration: none;
  white-space: nowrap;
  transition: all var(--dur-fast) var(--ease-standard);
}

.reader__back:hover {
  border-color: var(--green-600);
  background: var(--green-050);
  color: var(--green-700);
  text-decoration: none;
}

/* La flèche de retour réutilise le chevron, retourné. Le décalage
   est écrit avant la rotation : à l'écran, la flèche recule. */
.reader__back .icon {
  transform: rotate(180deg);
  transition: transform var(--dur-fast) var(--ease-standard);
}

.reader__back:hover .icon { transform: rotate(180deg) translateX(2px); }

/* Le titre porte lui-même le filet qui le sépare du retour, et
   quitte le vert : dans cette barre, le vert ne dit plus que le
   survol. Il reste en display: block, sans quoi l'ellipse des
   titres longs ne s'appliquerait plus. */
.reader__title {
  padding: var(--space-2) 0 var(--space-2) var(--space-4);
  border-left: 1px solid var(--gray-200);
  font-family: var(--font-title);
  font-size: 17px;
  color: var(--gray-900);
  margin: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.reader__tool {
  width: 44px;
  height: 44px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: var(--white);
  border: 1px solid var(--gray-300);
  border-radius: var(--radius-pill);
  color: var(--gray-700);
  cursor: pointer;
  transition: all var(--dur-fast) var(--ease-standard);
}

.reader__tool:hover:not(:disabled) {
  border-color: var(--green-600);
  color: var(--green-700);
  background: var(--green-050);
}

.reader__tool:disabled { opacity: 0.4; cursor: not-allowed; }

.reader__tool[aria-expanded="true"] {
  background: var(--green-700);
  border-color: var(--green-700);
  color: var(--white);
}

.reader__zoom-sign {
  font-family: var(--font-label);
  font-size: 15px;
  font-weight: var(--fw-bold);
  line-height: 1;
}

.reader__zoom {
  display: inline-flex;
  align-items: center;
  gap: 4px;
}

.reader__zoom-value {
  font-family: var(--font-label);
  font-size: var(--fs-eyebrow);
  letter-spacing: 0.02em;
  color: var(--gray-700);
  min-width: 52px;
  text-align: center;
}

.reader__download { white-space: nowrap; }

/* ------------------------------------------------------------
   Sommaire
   ------------------------------------------------------------ */

.reader__summary {
  background: var(--white);
  border-bottom: 1px solid var(--gray-200);
  padding: var(--space-4) var(--space-6);
  animation: lecteur-sommaire var(--dur-base) var(--ease-standard);
}

.reader__summary[hidden] { display: none; }

@keyframes lecteur-sommaire {
  from { opacity: 0; transform: translateY(-6px); }
  to   { opacity: 1; transform: none; }
}

.reader__summary-title {
  font-family: var(--font-label);
  text-transform: uppercase;
  letter-spacing: var(--ls-caps);
  font-size: var(--fs-eyebrow);
  font-weight: var(--fw-semibold);
  color: var(--gray-600);
  margin: 0 0 var(--space-3);
}

.reader__thumbs {
  display: flex;
  gap: 10px;
  overflow-x: auto;
  padding-bottom: 6px;
}

.reader__thumb {
  flex: 0 0 auto;
  width: 74px;
  border: 2px solid transparent;
  border-radius: var(--radius-sm);
  background: var(--gray-050);
  padding: 0;
  cursor: pointer;
  overflow: hidden;
  transition: border-color var(--dur-fast) var(--ease-standard);
}

.reader__thumb img {
  width: 100%;
  height: auto;
  display: block;
  aspect-ratio: 1 / 1.414;
  object-fit: cover;
  background: var(--white);
}

.reader__thumb:hover { border-color: var(--green-400); }
.reader__thumb.is-current { border-color: var(--green-700); }

.reader__thumb-number {
  display: block;
  font-family: var(--font-label);
  font-size: 11px;
  color: var(--gray-600);
  padding: 3px 0;
  text-align: center;
}

/* ------------------------------------------------------------
   Scène

   Trois boîtes emboîtées, chacune avec un rôle :
     .reader__viewport — repère fixe pour les flèches, qui ne
                         doivent pas défiler avec le livre ;
     .reader__stage    — la zone visible, qui défile au zoom ;
     .reader__frame    — la largeur du livre, calculée en script
                         pour que la double page tienne en hauteur.
   ------------------------------------------------------------ */

.reader__viewport {
  position: relative;
}

.reader__stage {
  position: relative;
  display: flex;
  overflow: hidden;
  height: clamp(440px, calc(100svh - 250px), 1000px);
  padding: var(--space-5);
  overscroll-behavior: contain;
}

/* Le défilement n'a de sens qu'agrandi : à l'échelle 1 le livre tient
   dans la scène, et une barre de défilement n'y ferait que du bruit. */
.reader__stage--scroll { overflow: auto; }

/* Le sommaire ouvert prend de la hauteur : la scène lui cède la
   place et le livre se réduit d'autant. */
.reader--sommaire .reader__stage {
  height: clamp(340px, calc(100svh - 400px), 860px);
}

/* Centrage par les marges plutôt que par `justify-content` :
   au zoom, un contenu plus large que la scène resterait sinon
   inaccessible du côté gauche. */
.reader__frame {
  margin: auto;
  flex: 0 0 auto;
  max-width: none;
  /* Couverture et quatrième s'affichent seules, sur une moitié du
     livre : le cadre glisse alors pour les recentrer, comme un
     ouvrage que l'on ouvre puis que l'on referme. Une translation —
     et non une échelle — laisse intacte la géométrie dont la pliure
     se sert pour suivre le curseur. */
  transition: transform var(--dur-slow) var(--ease-standard);
}

.reader__frame[hidden] { display: none; }

.reader__book {
  /* StPageFlip pose ici sa mécanique (.stf__parent). */
  user-select: none;
  -webkit-user-select: none;
  cursor: grab;
}

.reader__book:active { cursor: grabbing; }

/* ------------------------------------------------------------
   Feuillets
   ------------------------------------------------------------ */

/* L'ombre porte sur chaque feuillet plutôt que sur la boîte du
   livre : sur la couverture, seule la moitié de cette boîte est
   occupée, et une ombre d'ensemble dessinerait un rectangle blanc
   là où il n'y a pas de page. */
.reader__leaf {
  background: var(--white);
  overflow: hidden;
  box-shadow: 0 12px 30px rgba(20, 40, 25, 0.16);
}

.reader__leaf img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  display: block;
  background: var(--white);
  pointer-events: none;
}

/* Ombre de reliure : le papier s'assombrit près du pli, comme
   sur un ouvrage ouvert à plat. Le voile est posé en pseudo-
   élément, donc découpé avec la page pendant la pliure. */
.reader__leaf::after {
  content: '';
  position: absolute;
  inset: 0;
  pointer-events: none;
  background: linear-gradient(to right, rgba(20, 40, 25, 0.10), rgba(20, 40, 25, 0) 26px);
}

.reader__leaf.--left::after {
  background: linear-gradient(to left, rgba(20, 40, 25, 0.10), rgba(20, 40, 25, 0) 26px);
}

/* Ni sur la couverture ni sur la quatrième — elles n'ont pas de
   vis-à-vis — ni en page simple, où il n'y a pas de pli. */
.reader__leaf.--hard::after,
.reader--portrait .reader__leaf::after { display: none; }

/* Feuillet dont l'image n'est pas encore demandée : un fond
   neutre vaut mieux qu'un rectangle vide et clignotant. */
.reader__leaf--pending {
  background:
    linear-gradient(var(--gray-050), var(--gray-050)) padding-box,
    var(--white);
}

.reader__leaf--failed {
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--gray-050);
}

.reader__failed {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--space-3);
  padding: var(--space-5);
  text-align: center;
  line-height: var(--lh-normal);
}

.reader__failed-text {
  font-family: var(--font-body);
  font-size: var(--fs-body-sm);
  color: var(--gray-600);
  margin: 0;
}

/* --- Navigation latérale --- */

.reader__nav {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  z-index: 4;
  width: 52px;
  height: 52px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: var(--white);
  border: 1px solid var(--gray-300);
  border-radius: var(--radius-pill);
  color: var(--green-700);
  cursor: pointer;
  box-shadow: var(--shadow-sm);
  transition: all var(--dur-fast) var(--ease-standard);
}

.reader__nav--prev { left: var(--space-4); }
.reader__nav--next { right: var(--space-4); }

.reader__nav:hover:not(:disabled) {
  background: var(--green-700);
  border-color: var(--green-700);
  color: var(--white);
}

.reader__nav:disabled { opacity: 0.35; cursor: not-allowed; box-shadow: none; }

.reader__nav--prev .icon { transform: rotate(180deg); }

/* ------------------------------------------------------------
   Pied : progression
   ------------------------------------------------------------ */

.reader__foot {
  background: var(--white);
  border-top: 1px solid var(--gray-200);
  padding: 10px var(--space-6);
}

.reader__progress {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  max-width: 640px;
  margin: 0 auto;
}

.reader__progress[hidden] { display: none; }

.reader__slider-label {
  font-family: var(--font-label);
  text-transform: uppercase;
  letter-spacing: var(--ls-caps-sm);
  font-size: var(--fs-eyebrow);
  color: var(--gray-600);
}

.reader__slider {
  flex: 1;
  min-width: 0;
  accent-color: var(--green-600);
  height: 44px;
}

.reader__counter {
  font-family: var(--font-label);
  font-size: var(--fs-eyebrow);
  letter-spacing: 0.02em;
  color: var(--gray-700);
  min-width: 76px;
  text-align: right;
  font-variant-numeric: tabular-nums;
}

.reader__hint {
  font-family: var(--font-body);
  font-size: var(--fs-body-sm);
  color: var(--gray-600);
  text-align: center;
  margin: var(--space-5) 0 0;
}

.reader__hint kbd {
  font-family: var(--font-label);
  font-size: 12px;
  font-weight: var(--fw-bold);
  color: var(--gray-700);
  background: var(--white);
  border: 1px solid var(--gray-300);
  border-radius: var(--radius-sm);
  padding: 2px 7px;
}

.reader__noscript {
  font-family: var(--font-body);
  font-size: var(--fs-body-sm);
  color: var(--gray-700);
  text-align: center;
}

.reader__noscript-links a {
  display: inline-block;
  padding: 4px 8px;
  color: var(--green-700);
}

/* Repli servi par le serveur : la première page, visible sans
   script et pendant que la bibliothèque s'installe. Il couvre la
   scène plutôt que de s'y ajouter, pour ne pas en fausser la
   largeur pendant que le livre se met en place. */
.reader__fallback {
  position: absolute;
  inset: 0;
  z-index: 2;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: var(--space-6) var(--space-5);
  background: var(--gray-100);
  transition: opacity var(--dur-base) var(--ease-standard);
}

.reader__fallback img {
  max-width: min(70vw, 620px);
  max-height: 100%;
  width: auto;
  height: auto;
  display: block;
  background: var(--white);
  box-shadow: var(--shadow-md);
}

.reader__fallback--out {
  opacity: 0;
  pointer-events: none;
}

/* ------------------------------------------------------------
   Plein écran
   ------------------------------------------------------------ */

.reader:fullscreen {
  background: var(--gray-900);
  height: 100vh;
}

.reader:fullscreen .reader__viewport { flex: 1; min-height: 0; }

.reader:fullscreen .reader__stage {
  height: 100%;
  padding: var(--space-4);
}

.reader:fullscreen .reader__leaf {
  box-shadow: 0 18px 50px rgba(0, 0, 0, 0.55);
}

/* ------------------------------------------------------------
   Responsive
   ------------------------------------------------------------ */

@media (max-width: 900px) {
  .reader__bar { padding: 10px var(--space-4); }
  .reader__title { display: none; }
  .reader__stage {
    height: clamp(380px, calc(100svh - 220px), 800px);
    padding: var(--space-4) var(--space-2);
  }
  .reader__nav { width: 44px; height: 44px; }
  .reader__nav--prev { left: 4px; }
  .reader__nav--next { right: 4px; }
  .reader__download span:last-child { display: none; }
}

@media (max-width: 560px) {
  .reader__zoom { display: none; }
  .reader__slider-label { display: none; }
}

/* ------------------------------------------------------------
   Mouvement réduit

   La bibliothèque anime en JavaScript : la durée de pliure est
   ramenée au minimum côté script (voir reader.js). Il reste ici
   à neutraliser les transitions propres à l'habillage.
   ------------------------------------------------------------ */

@media (prefers-reduced-motion: reduce) {
  .reader__summary { animation: none !important; }
  .reader__tool,
  .reader__nav,
  .reader__frame,
  .reader__fallback { transition: none; }
}