/* =========================================================
   LE MAGAZINE QUI SE FEUILLETTE
   Un PDF dans un onglet est un document. Un magazine se feuillette.
   Tout ce qui suit ne sert qu'à cette différence-là.
   ========================================================= */

.fe {
  position: fixed; inset: 0; z-index: 400;
  display: flex; flex-direction: column;
  background: #15211d;
  color: #fff;
}
.fe[hidden] { display: none; }
body.fe-ouvert { overflow: hidden; }

/* ---------- La barre du haut ---------- */
.fe__barre {
  display: flex; align-items: center; gap: .8rem;
  padding: .55rem .8rem;
  background: rgba(0, 0, 0, .36);
  border-bottom: 1px solid rgba(255, 255, 255, .1);
  flex: none;
}
.fe__fermer {
  flex: none; width: 40px; height: 40px;
  display: grid; place-items: center;
  border: 0; border-radius: 50%; cursor: pointer;
  background: rgba(255, 255, 255, .1); color: #fff;
}
.fe__fermer:hover { background: rgba(255, 255, 255, .2); }
.fe__titre {
  flex: 1; min-width: 0; font-size: .96rem; font-weight: 700;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.fe__outils { display: flex; align-items: center; gap: .35rem; flex: none; }
.fe__o {
  display: inline-flex; align-items: center; gap: .35rem;
  min-height: 36px; padding: .4rem .7rem;
  border: 1px solid rgba(255, 255, 255, .18); border-radius: 9px;
  background: rgba(255, 255, 255, .07); color: #fff;
  font: inherit; font-size: .82rem; cursor: pointer; text-decoration: none;
}
.fe__o:hover { background: rgba(255, 255, 255, .16); }
.fe__o[aria-pressed="true"] { background: var(--c-anis, #c6d64a); color: #15211d; border-color: transparent; }
.fe__zoom { font-size: .78rem; min-width: 3.4em; text-align: center; color: rgba(255,255,255,.75); }

/* ---------- La scène ---------- */
.fe__scene {
  flex: 1; min-height: 0; position: relative;
  display: flex; align-items: center; justify-content: center;
  padding: 1.1rem 4.2rem;
  /* La perspective est portée par la scène : c'est elle qui donne
     au tourne-page sa profondeur. Sans elle, la rotation serait un
     simple écrasement horizontal. */
  perspective: 2400px;
}

.fe__livre {
  display: flex; align-items: stretch; justify-content: center;
  height: 100%; max-width: 100%;
  transform-style: preserve-3d;
}
.fe__feuille {
  position: relative; height: 100%;
  background: #fff;
  box-shadow: 0 18px 50px -18px rgba(0, 0, 0, .8);
}
.fe__page { display: block; height: 100%; width: auto; max-width: 100%; }

/* La reliure : une ombre au pli, comme sur un magazine ouvert à plat. */
.fe__livre--double .fe__feuille--g {
  border-radius: 4px 0 0 4px;
  box-shadow: inset -22px 0 28px -22px rgba(0, 0, 0, .5), 0 18px 50px -18px rgba(0, 0, 0, .8);
}
.fe__livre--double .fe__feuille--d {
  border-radius: 0 4px 4px 0;
  box-shadow: inset 22px 0 28px -22px rgba(0, 0, 0, .5), 0 18px 50px -18px rgba(0, 0, 0, .8);
}

/* ---------- Le tourne-page ----------
   Une rotation autour de la reliure, pas un fondu : c'est le geste
   qui dit « magazine ». Il dure un peu plus de trois dixièmes de
   seconde — assez pour se voir, trop court pour qu'on l'attende. */
@keyframes fe-tourne-d {
  from { transform: rotateY(22deg); opacity: .45; }
  to   { transform: rotateY(0deg); opacity: 1; }
}
@keyframes fe-tourne-g {
  from { transform: rotateY(-22deg); opacity: .45; }
  to   { transform: rotateY(0deg); opacity: 1; }
}
.fe__livre--tourne-d { animation: fe-tourne-d .34s cubic-bezier(.22, .61, .36, 1); transform-origin: left center; }
.fe__livre--tourne-g { animation: fe-tourne-g .34s cubic-bezier(.22, .61, .36, 1); transform-origin: right center; }

/* ---------- Les flèches ---------- */
.fe__fl {
  position: absolute; top: 50%; transform: translateY(-50%);
  width: 48px; height: 48px; z-index: 2;
  display: grid; place-items: center;
  border: 0; border-radius: 50%; cursor: pointer;
  background: rgba(255, 255, 255, .13); color: #fff;
  transition: background .16s, transform .16s;
}
.fe__fl:hover { background: rgba(255, 255, 255, .26); }
.fe__fl--g { left: .7rem; }
.fe__fl--d { right: .7rem; }
.fe__fl--g:hover { transform: translateY(-50%) translateX(-3px); }
.fe__fl--d:hover { transform: translateY(-50%) translateX(3px); }

/* ---------- Les miniatures ---------- */
.fe__minis {
  position: absolute; inset: 0 0 0 auto; width: min(230px, 46vw);
  overflow-y: auto; overscroll-behavior: contain;
  display: grid; grid-template-columns: 1fr 1fr; gap: .5rem;
  align-content: start;
  padding: .7rem;
  background: rgba(0, 0, 0, .64);
  backdrop-filter: blur(8px);
  border-left: 1px solid rgba(255, 255, 255, .12);
}
.fe__minis[hidden] { display: none; }
.fe__mini {
  position: relative; display: block; padding: 0;
  border: 2px solid transparent; border-radius: 5px;
  background: rgba(255, 255, 255, .08); cursor: pointer;
  aspect-ratio: 1 / 1.414;
}
.fe__mini.actif { border-color: var(--c-anis, #c6d64a); }
.fe__mini__toile { display: block; width: 100%; height: 100%; }
.fe__mini canvas { display: block; width: 100%; height: auto; border-radius: 3px; }
.fe__mini em {
  position: absolute; bottom: 2px; right: 3px;
  font-size: .6rem; font-style: normal; font-weight: 700;
  padding: 0 .25rem; border-radius: 3px;
  background: rgba(0, 0, 0, .64); color: #fff;
}

/* ---------- Le pied ---------- */
.fe__pied {
  flex: none; display: flex; align-items: center; gap: .9rem;
  padding: .5rem 1rem .7rem;
  background: rgba(0, 0, 0, .36);
  border-top: 1px solid rgba(255, 255, 255, .1);
}
.fe__barre-pages { flex: 1; accent-color: var(--c-anis, #c6d64a); }
.fe__n { font-size: .78rem; color: rgba(255, 255, 255, .78); white-space: nowrap; }

.fe__attente, .fe__erreur {
  color: rgba(255, 255, 255, .82); font-size: .92rem; text-align: center;
}
.fe__erreur { padding: 1rem; }
.fe__erreur a { color: var(--c-anis, #c6d64a); }
.fe__erreur[hidden] { display: none; }

/* Zoomé, la page déborde : on la fait défiler plutôt que de la rétrécir. */
.fe--zoome .fe__scene { align-items: flex-start; overflow: auto; }
.fe--zoome .fe__livre { height: auto; }
.fe--zoome .fe__page { height: auto; width: auto; max-width: none; }

/* ---------- Téléphone ----------
   Une seule page : deux pages de magazine côte à côte sur neuf
   centimètres ne se lisent pas, et l'animation ne ferait que masquer
   qu'on ne lit rien. */
@media (max-width: 899px) {
  .fe__scene { padding: .7rem .55rem; }
  .fe__fl { width: 42px; height: 42px; background: rgba(0, 0, 0, .42); }
  .fe__fl--g { left: .25rem; }
  .fe__fl--d { right: .25rem; }
  .fe__outils .fe__o span { display: none; }
  .fe__o { padding: .4rem .55rem; }
  .fe__titre { font-size: .84rem; }
  .fe__minis { width: min(190px, 62vw); grid-template-columns: 1fr; }
}

/* ---------- Mouvement réduit ----------
   Les pages changent, elles ne tournent plus. */
@media (prefers-reduced-motion: reduce) {
  .fe__livre--tourne-d, .fe__livre--tourne-g { animation: none; }
  .fe__fl { transition: none; }
}