/* Couverture d'ebook présentée comme un vrai livre (23/10/2026) : légère perspective, reliure ombrée à gauche,
   tranche des pages à droite. Usage : <span class="livre"><img src="couverture.jpg" alt=""></span>
   La largeur se règle sur .livre (l'image suit). Variante .livre.droit : de face, sans rotation. */
.livre{position:relative;display:inline-block;vertical-align:bottom;line-height:0;
  transform:perspective(1400px) rotateY(-20deg);transform-origin:left center;
  transition:transform .45s cubic-bezier(.2,.7,.2,1);
  filter:drop-shadow(18px 22px 22px rgba(0,0,0,.32))}
.livre img{display:block;width:100%;height:auto;position:relative;z-index:2;border-radius:2px 5px 5px 2px;box-shadow:none!important;transform:none!important}
/* reliure : pli sombre puis reflet, sur la gauche de la couverture */
.livre::after{content:"";position:absolute;z-index:3;left:0;top:0;bottom:0;width:9%;border-radius:2px 0 0 2px;pointer-events:none;
  background:linear-gradient(90deg,rgba(0,0,0,.38) 0,rgba(0,0,0,.12) 22%,rgba(255,255,255,.28) 34%,rgba(255,255,255,0) 52%,rgba(0,0,0,.10) 70%,rgba(0,0,0,0) 100%)}
/* tranche des pages, visible grâce à la rotation */
.livre::before{content:"";position:absolute;z-index:1;top:1.6%;bottom:1.6%;right:-4.5%;width:7%;border-radius:0 4px 4px 0;
  background:repeating-linear-gradient(180deg,#fdfcf8 0 2px,#e4e1d8 2px 3px);
  box-shadow:inset 6px 0 8px -4px rgba(0,0,0,.35)}
.livre:hover{transform:perspective(1400px) rotateY(-8deg)}
.livre.droit{transform:none}
.livre.droit:hover{transform:translateY(-4px)}
@media (prefers-reduced-motion:reduce){.livre{transition:none}}