/* ==========================================================================
   154 — Page Turn
   Petit livre ouvert : chaque feuille est un wrapper 3D à deux faces
   (recto/verso, backface-visibility) qui pivote autour de la reliure
   (transform-origin: left center) sous perspective. Pendant la rotation :
   balayage de lumière sur la feuille (::after keyframé) et ombre portée
   sur la page du dessous (.page-turn__cast) qui s'intensifie puis se
   retire. Au survol du bord droit, les feuilles restantes se soulèvent
   légèrement en éventail (invitation, angle décroissant --pgt-lift).
   Z-index par états : pile de droite décroissante, pile de gauche
   croissante, feuille en rotation au-dessus de tout.
   Racine : .page-turn — états .is-flipped / .is-turning (feuilles) et
   .is-invite / .is-turning-fwd / .is-turning-bwd (racine), posés par
   anim.js. Démo CONTENUE (~292×230 px), jamais de fixed.
   ========================================================================== */

.page-turn {
  --pgt-accent: var(--ml-accent, #7c8cff);
  --pgt-paper: color-mix(in srgb, var(--ml-surface, #151a24) 86%, #ffffff);
  --pgt-turn: 0.95s;
  --pgt-ease: cubic-bezier(0.42, 0.05, 0.28, 1);

  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 14px;
  outline: none;
  color: var(--ml-fg, #e8eaf2);
}

.page-turn:focus-visible {
  outline: 2px solid var(--pgt-accent);
  outline-offset: 6px;
  border-radius: 14px;
}

/* --- Livre ------------------------------------------------------------------ */

.page-turn__book {
  position: relative;
  width: 292px;
  height: 192px;
  perspective: 1300px;
}

/* Couverture débordante derrière les pages */
.page-turn__book::before {
  content: "";
  position: absolute;
  inset: -6px -7px -8px;
  border-radius: 10px;
  background: color-mix(in srgb, var(--ml-bg, #0d1017) 72%, black);
  border: 1px solid rgba(255, 255, 255, 0.06);
  box-shadow: 0 18px 30px rgba(0, 0, 0, 0.35);
}

/* Pli central, posé au-dessus des pages à plat (les feuilles en rotation
   et les hotspots passent au-dessus). */
.page-turn__book::after {
  content: "";
  position: absolute;
  top: 0;
  bottom: 0;
  left: 50%;
  width: 22px;
  transform: translateX(-50%);
  background: linear-gradient(90deg, transparent, rgba(0, 0, 0, 0.32), transparent);
  z-index: 4;
  pointer-events: none;
}

/* --- Pages de fond (sous les feuilles) --------------------------------------- */

.page-turn__base {
  position: absolute;
  top: 0;
  bottom: 0;
  width: 50%;
  box-sizing: border-box;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 18px 16px;
  text-align: center;
}

.page-turn__base--left {
  left: 0;
  border-radius: 8px 1px 1px 8px;
  background:
    linear-gradient(270deg, rgba(0, 0, 0, 0.3), transparent 30%),
    var(--pgt-paper);
}

.page-turn__base--right {
  right: 0;
  border-radius: 1px 8px 8px 1px;
  background:
    linear-gradient(90deg, rgba(0, 0, 0, 0.3), transparent 30%),
    var(--pgt-paper);
}

/* Page de titre / colophon */
.page-turn__kicker {
  font-size: 0.5rem;
  font-weight: 650;
  text-transform: uppercase;
  letter-spacing: 0.26em;
  color: var(--pgt-accent);
}

.page-turn__title {
  margin: 0;
  font-family: Georgia, "Iowan Old Style", "Times New Roman", serif;
  font-size: 1.02rem;
  font-weight: 600;
  line-height: 1.32;
  letter-spacing: 0.01em;
}

.page-turn__author {
  font-size: 0.55rem;
  letter-spacing: 0.08em;
  color: var(--ml-muted, #8b91a3);
}

.page-turn__fin {
  font-family: Georgia, "Iowan Old Style", "Times New Roman", serif;
  font-style: italic;
  font-size: 1rem;
}

.page-turn__fleuron {
  font-size: 0.8rem;
  line-height: 1;
  color: var(--pgt-accent);
}

/* --- Feuilles 3D ------------------------------------------------------------- */

.page-turn__leaf {
  position: absolute;
  top: 0;
  bottom: 0;
  left: 50%;
  width: 50%;
  transform-origin: left center;
  transform-style: preserve-3d;
  transition: transform 0.45s var(--pgt-ease);
}

/* Pile de droite : la feuille 1 dessus. Une fois tournées (pile de gauche),
   l'ordre s'inverse : la dernière tournée dessus. --pgt-lift = angle de
   l'invitation (éventail décroissant). */
.page-turn__leaf--1 { z-index: 3; --pgt-lift: -12deg; }
.page-turn__leaf--2 { z-index: 2; --pgt-lift: -7deg; }
.page-turn__leaf--3 { z-index: 1; --pgt-lift: -3deg; }

.page-turn__leaf.is-flipped { transform: rotateY(-180deg); }

.page-turn__leaf--1.is-flipped { z-index: 1; }
.page-turn__leaf--2.is-flipped { z-index: 2; }
.page-turn__leaf--3.is-flipped { z-index: 3; }

/* Pendant la rotation : au-dessus de tout, durée pleine (le repos et
   l'invitation utilisent la transition courte de base). */
.page-turn__leaf.is-turning {
  z-index: 5;
  transition-duration: var(--pgt-turn);
}

/* Invitation : survol du bord droit, les feuilles restantes se soulèvent */
.page-turn.is-invite .page-turn__leaf:not(.is-flipped):not(.is-turning) {
  transform: rotateY(var(--pgt-lift, -8deg));
}

/* --- Faces recto/verso --------------------------------------------------------- */

.page-turn__face {
  position: absolute;
  inset: 0;
  box-sizing: border-box;
  display: flex;
  flex-direction: column;
  gap: 7px;
  padding: 16px 15px 12px;
  overflow: hidden;
  -webkit-backface-visibility: hidden;
  backface-visibility: hidden;
}

.page-turn__face--front {
  border-radius: 1px 8px 8px 1px;
  background:
    linear-gradient(90deg, rgba(0, 0, 0, 0.3), transparent 30%),
    var(--pgt-paper);
}

/* Pré-retournée : visible une fois la feuille à -180°, côté gauche.
   Son bord droit local devient la reliure — gouttière et coins adaptés. */
.page-turn__face--back {
  transform: rotateY(180deg);
  border-radius: 8px 1px 1px 8px;
  background:
    linear-gradient(270deg, rgba(0, 0, 0, 0.3), transparent 30%),
    var(--pgt-paper);
}

/* Courbure simulée : balayage de lumière pendant la rotation */
.page-turn__face::after {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  opacity: 0;
  background: linear-gradient(
    105deg,
    transparent 34%,
    rgba(255, 255, 255, 0.14) 47%,
    rgba(255, 255, 255, 0.04) 56%,
    transparent 68%
  );
  background-size: 240% 100%;
  background-position: 110% 0;
}

.page-turn__leaf.is-turning .page-turn__face::after {
  animation: page-turn-sheen var(--pgt-turn) var(--pgt-ease);
}

@keyframes page-turn-sheen {
  0% {
    opacity: 0;
    background-position: 110% 0;
  }
  22% {
    opacity: 1;
  }
  78% {
    opacity: 1;
  }
  100% {
    opacity: 0;
    background-position: -10% 0;
  }
}

/* Contenu des pages */
.page-turn__chap {
  font-size: 0.52rem;
  font-weight: 650;
  text-transform: uppercase;
  letter-spacing: 0.18em;
  color: var(--pgt-accent);
}

.page-turn__quote {
  margin: 4px 0 0;
  font-family: Georgia, "Iowan Old Style", "Times New Roman", serif;
  font-size: 0.76rem;
  line-height: 1.55;
}

.page-turn__folio {
  margin-top: auto;
  align-self: flex-end;
  font-size: 0.55rem;
  color: var(--ml-muted, #8b91a3);
}

/* Sur une page de gauche, le folio se range côté extérieur */
.page-turn__face--back .page-turn__folio {
  align-self: flex-start;
}

/* --- Ombres portées sur les pages du dessous ----------------------------------- */

.page-turn__cast {
  position: absolute;
  top: 0;
  bottom: 0;
  width: 50%;
  z-index: 4;
  opacity: 0;
  pointer-events: none;
}

.page-turn__cast--left {
  left: 0;
  border-radius: 8px 1px 1px 8px;
  background: linear-gradient(to left, rgba(0, 0, 0, 0.55), rgba(0, 0, 0, 0.1) 55%, transparent 85%);
}

.page-turn__cast--right {
  right: 0;
  border-radius: 1px 8px 8px 1px;
  background: linear-gradient(to right, rgba(0, 0, 0, 0.55), rgba(0, 0, 0, 0.1) 55%, transparent 85%);
}

/* Côté que la feuille quitte : ombre forte au décollage, qui se retire */
.page-turn.is-turning-fwd .page-turn__cast--right,
.page-turn.is-turning-bwd .page-turn__cast--left {
  animation: page-turn-cast-release var(--pgt-turn) ease-out;
}

/* Côté où la feuille atterrit : l'ombre s'intensifie puis se retire */
.page-turn.is-turning-fwd .page-turn__cast--left,
.page-turn.is-turning-bwd .page-turn__cast--right {
  animation: page-turn-cast-receive var(--pgt-turn) ease-in-out;
}

@keyframes page-turn-cast-release {
  0% { opacity: 0; }
  18% { opacity: 0.5; }
  100% { opacity: 0; }
}

@keyframes page-turn-cast-receive {
  0%, 30% { opacity: 0; }
  62% { opacity: 0.55; }
  100% { opacity: 0; }
}

/* --- Zones cliquables (bords) --------------------------------------------------- */

.page-turn__hot {
  position: absolute;
  top: 0;
  bottom: 0;
  width: 27%;
  z-index: 6;
  margin: 0;
  padding: 0;
  border: 0;
  background: transparent;
  cursor: pointer;
}

.page-turn__hot--next {
  right: -6px;
  border-radius: 0 10px 10px 0;
}

.page-turn__hot--prev {
  left: -6px;
  border-radius: 10px 0 0 10px;
}

.page-turn__hot:disabled {
  cursor: default;
}

.page-turn__hot:focus-visible {
  outline: 2px solid var(--pgt-accent);
  outline-offset: -3px;
}

/* --- Indicateur de page ----------------------------------------------------------- */

.page-turn__dots {
  display: flex;
  gap: 6px;
}

.page-turn__dot {
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: color-mix(in srgb, var(--ml-muted, #8b91a3) 38%, transparent);
  transition: background 0.3s ease, transform 0.3s ease;
}

.page-turn__dot.is-on {
  background: var(--pgt-accent);
  transform: scale(1.3);
}

/* --- Reduced motion ----------------------------------------------------------------
   Rotation quasi instantanée, pas d'invitation ni de balayage/ombres animés ;
   le JS raccourcit aussi son verrou. --- */

@media (prefers-reduced-motion: reduce) {
  .page-turn__leaf,
  .page-turn__leaf.is-turning {
    transition-duration: 0.01s;
  }

  .page-turn.is-invite .page-turn__leaf:not(.is-flipped):not(.is-turning) {
    transform: none;
  }

  .page-turn__leaf.is-turning .page-turn__face::after,
  .page-turn.is-turning-fwd .page-turn__cast--right,
  .page-turn.is-turning-fwd .page-turn__cast--left,
  .page-turn.is-turning-bwd .page-turn__cast--right,
  .page-turn.is-turning-bwd .page-turn__cast--left {
    animation: none;
  }

  .page-turn__dot {
    transition: none;
  }
}