/* =========================================================
   Flipbook — feuilletage 3D piloté au scroll
   Utilisé uniquement sur les pages Rome et Techniques d'impression.
   ========================================================= */

.fb-intro{ margin-bottom: 30px; }
.fb-intro p{ font-size:15px; color:var(--ink-soft); max-width:520px; line-height:1.6; }

.fb-scrollzone{ position:relative; }
.fb-stage{
  position:sticky; top:0; height:100vh; overflow:hidden;
  display:flex; align-items:center; justify-content:center;
  background: radial-gradient(ellipse 80% 60% at 50% 45%, var(--panel) 0%, var(--bg) 72%);
}

.fb-counter{
  position:absolute; top:26px; left:50%; transform:translateX(-50%); z-index:60;
  font-size:11px; letter-spacing:.08em; text-transform:uppercase; color:var(--ink-soft);
  background:var(--bg); border:1px solid var(--line); padding:8px 18px; border-radius:20px;
}
.fb-counter b{ color:var(--ink); font-weight:700; }

.fb-hint{
  position:absolute; bottom:32px; left:50%; transform:translateX(-50%); z-index:60;
  font-size:12.5px; color:var(--accent); font-weight:600; transition:opacity .4s ease;
  display:flex; align-items:center; gap:8px;
}
.fb-hint::after{ content:"↓"; animation:fbBounce 1.6s ease-in-out infinite; }
@keyframes fbBounce{ 0%,100%{ transform:translateY(0);} 50%{ transform:translateY(5px);} }

.fb-book{
  position:relative;
  width:min(84vw, 900px);
  aspect-ratio:296 / 210;
  perspective:2600px;
  filter:drop-shadow(0 30px 55px rgba(0,0,0,.38));
}

.fb-slot{
  position:absolute; top:0; width:50%; height:100%; overflow:hidden; background:#efece4; z-index:1;
}
.fb-left{ left:0; border-radius:4px 0 0 4px; }
.fb-right{ left:50%; border-radius:0 4px 4px 0; }
.fb-slot img{ width:100%; height:100%; object-fit:cover; display:block; cursor:zoom-in; }

.fb-spine{
  position:absolute; left:calc(50% - 5px); top:0; width:10px; height:100%; z-index:5; pointer-events:none;
  background:linear-gradient(90deg, rgba(0,0,0,.2), rgba(0,0,0,.03) 35%, rgba(0,0,0,.03) 65%, rgba(0,0,0,.2));
}

.fb-stack{ position:absolute; top:1.5%; bottom:1.5%; width:12px; z-index:0; pointer-events:none; transition:opacity .3s ease; }
.fb-stack-right{ right:-7px; }
.fb-stack-left{ left:-7px; }
.fb-stack span{
  position:absolute; inset:0; background:#e6e2d8; border:1px solid rgba(0,0,0,.07);
}
.fb-stack-right span{ border-radius:0 3px 3px 0; }
.fb-stack-left span{ border-radius:3px 0 0 3px; }
.fb-stack-right span:nth-child(1){ transform:translateX(3px); opacity:.75; }
.fb-stack-right span:nth-child(2){ transform:translateX(6px); opacity:.5; }
.fb-stack-right span:nth-child(3){ transform:translateX(9px); opacity:.3; }
.fb-stack-left span:nth-child(1){ transform:translateX(-3px); opacity:.75; }
.fb-stack-left span:nth-child(2){ transform:translateX(-6px); opacity:.5; }
.fb-stack-left span:nth-child(3){ transform:translateX(-9px); opacity:.3; }

.fb-leaf{
  position:absolute; top:0; left:50%; width:50%; height:100%; z-index:10;
  transform-style:preserve-3d; transform-origin:left center; will-change:transform;
}
.fb-leaf-face{
  position:absolute; inset:0; overflow:hidden; background:#efece4; backface-visibility:hidden;
}
.fb-leaf-face.fb-front{ transform:rotateY(0deg); border-radius:0 4px 4px 0; box-shadow:3px 0 16px rgba(0,0,0,.18); }
.fb-leaf-face.fb-back{ transform:rotateY(180deg); border-radius:4px 0 0 4px; box-shadow:-3px 0 16px rgba(0,0,0,.18); }
.fb-leaf-face img{ width:100%; height:100%; object-fit:cover; display:block; }
.fb-leaf-shade{ position:absolute; inset:0; opacity:0; pointer-events:none; }
.fb-front .fb-leaf-shade{ background:linear-gradient(90deg, rgba(0,0,0,.4), transparent 45%); }
.fb-back .fb-leaf-shade{ background:linear-gradient(270deg, rgba(0,0,0,.4), transparent 45%); }

@media (max-width:760px){
  .fb-book{ width:92vw; }
  .fb-counter{ top:16px; font-size:10.5px; padding:6px 14px; }
  .fb-hint{ bottom:20px; font-size:11.5px; }
}
@media (prefers-reduced-motion: reduce){
  .fb-hint::after{ animation:none; }
}