/* =========================
   Livre Photo — "Vrai livre" (CSS)
   Layout : image TOP + texte dessous
   Effet : couverture + spine + pages + profondeur
   ========================= */

:root{
  --lp-radius: 22px;

  --lp-bg: rgba(255,255,255,.055);
  --lp-stroke: rgba(255,255,255,.12);

  --lp-shadowA: 0 18px 50px rgba(0,0,0,.22);
  --lp-shadowB: 0 40px 120px rgba(0,0,0,.36);

  /* 3D */
  --lp-tiltX: 2.2deg;        /* inclinaison “livre posé” */
  --lp-tiltY: -1.2deg;
  --lp-depth: 18px;          /* épaisseur pages */

  /* spine (reliure) */
  --lp-spine: 26px;

  /* pages */
  --lp-pageLight: rgba(255,255,255,.10);
  --lp-pageDark: rgba(0,0,0,.35);
}

*{ box-sizing:border-box; }

/* Page */
.lp-page{
  padding: clamp(18px,3.5vw,56px) 0;
}

.lp-shell{
  width: min(1120px, calc(100% - 40px));
  margin: 0 auto;
  perspective: 1400px;
}

/* =========================
   CARD = LIVRE
   ========================= */
.lp-card{
  position: relative;
  overflow: hidden;
  border-radius: var(--lp-radius);
  border: 1px solid var(--lp-stroke);
  background: var(--lp-bg);

  display:flex;
  flex-direction:column;

  transform-style: preserve-3d;
  transform: rotateX(var(--lp-tiltX)) rotateY(var(--lp-tiltY));
  transition: transform .22s ease, box-shadow .26s ease, filter .26s ease;

  box-shadow:
    var(--lp-shadowA),
    inset 0 0 0 1px rgba(255,255,255,.05),
    inset 0 22px 60px rgba(0,0,0,.20);
}

/* Lift premium */
.lp-card:hover{
  transform: rotateX(calc(var(--lp-tiltX) * 0.55)) rotateY(calc(var(--lp-tiltY) * 0.55)) translateY(-3px);
  box-shadow:
    var(--lp-shadowB),
    inset 0 0 0 1px rgba(255,255,255,.06),
    inset 0 26px 74px rgba(0,0,0,.22);
  filter: brightness(1.015);
}

/* =========================
   SPINE (reliure gauche)
   ========================= */
.lp-card::before{
  content:"";
  position:absolute;
  top:0;
  bottom:0;
  left:0;
  width: var(--lp-spine);
  pointer-events:none;

  background:
    /* tranche / spine */
    linear-gradient(90deg,
      rgba(0,0,0,.55) 0%,
      rgba(0,0,0,.35) 30%,
      rgba(255,255,255,.08) 55%,
      rgba(0,0,0,.30) 78%,
      rgba(0,0,0,.55) 100%
    ),
    /* petites nervures */
    repeating-linear-gradient(180deg,
      rgba(255,255,255,.06) 0px,
      rgba(255,255,255,.06) 1px,
      rgba(255,255,255,0) 10px,
      rgba(255,255,255,0) 16px
    );

  opacity: .78;

  /* petit bevel */
  box-shadow:
    inset -1px 0 0 rgba(255,255,255,.08),
    inset -10px 0 18px rgba(0,0,0,.35);
}

/* =========================
   PAGES (épaisseur : bas + droite)
   ========================= */
.lp-card::after{
  content:"";
  position:absolute;
  inset:0;
  pointer-events:none;

  background:
    /* pages en bas */
    linear-gradient(180deg,
      rgba(255,255,255,0) 0%,
      rgba(255,255,255,0) calc(100% - var(--lp-depth)),
      rgba(255,255,255,.07) calc(100% - var(--lp-depth) + 1px),
      rgba(0,0,0,.42) 100%
    ),
    /* pages à droite */
    linear-gradient(90deg,
      rgba(255,255,255,0) 0%,
      rgba(255,255,255,0) calc(100% - var(--lp-depth)),
      rgba(255,255,255,.08) calc(100% - var(--lp-depth) + 1px),
      rgba(0,0,0,.38) 100%
    ),
    /* mini stries pages (bas) */
    repeating-linear-gradient(90deg,
      rgba(255,255,255,.08) 0px,
      rgba(255,255,255,.08) 1px,
      rgba(255,255,255,0) 6px,
      rgba(255,255,255,0) 10px
    );

  /* on limite les stries au bas via masque */
  -webkit-mask: linear-gradient(180deg, rgba(0,0,0,0) 0%, rgba(0,0,0,0) 78%, rgba(0,0,0,1) 100%);
          mask: linear-gradient(180deg, rgba(0,0,0,0) 0%, rgba(0,0,0,0) 78%, rgba(0,0,0,1) 100%);

  opacity:.85;
}

/* =========================
   COUVERTURE (gloss + highlight)
   ========================= */
.lp-card .lp-content,
.lp-card .lp-media{
  position: relative;
  z-index: 2;
}

/* highlight “vernis” discret */
.lp-card .lp-media::before{
  content:"";
  position:absolute;
  inset:-1px;
  pointer-events:none;
  background:
    radial-gradient(900px 420px at 16% 10%,
      rgba(255,255,255,.14),
      rgba(255,255,255,0) 60%
    );
  opacity:.75;
  z-index: 2;
}

/* =========================
   IMAGE
   ========================= */
.lp-media{
  position:relative;
  width:100%;
  height:360px;
  overflow:hidden;
  border-bottom:1px solid var(--lp-stroke);
}

.lp-media img{
  width:100%;
  height:100%;
  object-fit:cover;
  display:block;
  transform: scale(1.02);
}

/* overlay cinéma */
.lp-media::after{
  content:"";
  position:absolute;
  inset:0;
  pointer-events:none;
  background:
    linear-gradient(180deg, rgba(0,0,0,.08), rgba(0,0,0,.38));
  z-index: 1;
}

/* =========================
   TEXTE
   ========================= */
.lp-content{
  padding: clamp(22px,3vw,44px);
  display:flex;
  flex-direction:column;
  gap:12px;
}

/* kicker */
.lp-kicker{
  margin:0;
  display:inline-flex;
  align-items:center;
  gap:10px;
  font-weight:800;
  letter-spacing:.18em;
  text-transform:uppercase;
  font-size:11px;
  opacity:.85;
}

.lp-kicker::before{
  content:"";
  width:44px;
  height:1px;
  background:currentColor;
  opacity:.45;
}

/* title */
.lp-title{
  margin:0;
  font-size: clamp(28px,3.2vw,44px);
  line-height:1.06;
  letter-spacing:-0.02em;
}

/* lead */
.lp-lead{
  margin:0;
  font-size: clamp(15px,1.55vw,18px);
  line-height:1.65;
  opacity:.86;
}

/* copy */
.lp-text{
  margin-top:2px;
  padding-top:12px;
  border-top:1px solid var(--lp-stroke);
}

.lp-text p{
  margin:0 0 12px;
  line-height:1.85;
  opacity:.84;
  font-size:15.5px;
}
.lp-text p:last-child{ margin-bottom:0; }

/* foot */
.lp-foot{
  margin-top:6px;
  padding-top:14px;
  border-top:1px solid var(--lp-stroke);
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:14px;
}

/* price */
.lp-price{
  display:flex;
  flex-direction:column;
  gap:2px;
}
.lp-price-label{ font-size:12px; opacity:.72; }
.lp-price-value{ font-weight:900; font-size:18px; letter-spacing:-0.01em; }

/* CTA */
.lp-cta{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  text-decoration:none;
  font-weight:900;
  letter-spacing:.02em;
  padding:12px 16px;
  border-radius:999px;
  border:1px solid var(--lp-stroke);
  background:rgba(255,255,255,.06);
  transition:transform .14s ease, box-shadow .18s ease, background .18s ease;
}

.lp-cta:hover{
  transform:translateY(-1px);
  box-shadow:0 14px 30px rgba(0,0,0,.16);
  background:rgba(255,255,255,.10);
}

.lp-cta:active{ transform:translateY(0); }

.lp-note{
  margin:0;
  font-size:12.5px;
  opacity:.65;
}

/* =========================
   Responsive
   ========================= */
@media (max-width:960px){
  .lp-shell{ width:min(1120px, calc(100% - 28px)); }

  .lp-foot{
    flex-direction:column;
    align-items:flex-start;
  }
  .lp-cta{
    width:100%;
    text-align:center;
  }
}

@media (max-width:768px){
  .lp-media{ height:260px; }

  /* mobile : on coupe le 3D (ça peut gêner la lecture) */
  .lp-card{
    transform:none;
  }
  .lp-card:hover{
    transform:none;
  }

  /* spine + pages un peu moins marqués */
  .lp-card::before{ opacity:.55; }
  .lp-card::after{ opacity:.70; }
}