/* ══════════════════════════════════════════════════════════════════════════
   MES LIVRES — la bande-annonce et la petite étagère personnelle
   Les couleurs, les arrondis et les boutons viennent du site : ce fichier ne
   décrit que ce qui n'existe nulle part ailleurs.
   ══════════════════════════════════════════════════════════════════════════ */

.ba {
  position: relative; overflow: hidden;
  border-radius: 18px;
  border: 1px solid rgba(255,255,255,.10);
  background:
    radial-gradient(120% 90% at 18% 0%, rgba(60,119,190,.30), transparent 62%),
    radial-gradient(110% 90% at 92% 8%, rgba(192,9,58,.26), transparent 60%),
    #0A1220;
  box-shadow: 0 30px 70px -38px rgba(0,0,0,.85);
  outline: none;
}
body:not(.dark) .ba {
  border-color: rgba(9,45,89,.12);
  background:
    radial-gradient(120% 90% at 18% 0%, rgba(60,119,190,.16), transparent 62%),
    radial-gradient(110% 90% at 92% 8%, rgba(192,9,58,.12), transparent 60%),
    #F4F8FD;
}
.ba:focus-visible { box-shadow: 0 0 0 2px var(--crimson, #C0093A); }

/* ── les barres de progression, une par scène ───────────────────────────── */
.ba-barres {
  position: absolute; top: 0; left: 0; right: 0; z-index: 3;
  display: flex; gap: 4px; padding: 10px 14px 0;
}
.ba-barre {
  flex: 1; height: 2px; border-radius: 999px; cursor: pointer;
  background: rgba(255,255,255,.14); overflow: hidden;
}
body:not(.dark) .ba-barre { background: rgba(9,45,89,.12); }
.ba-barre i { display: block; height: 100%; width: 0; background: rgba(255,255,255,.85); }
body:not(.dark) .ba-barre i { background: var(--crimson, #C0093A); }

/* ── l'écran ────────────────────────────────────────────────────────────── */
.ba-ecran {
  position: relative; min-height: 370px; cursor: pointer;
  padding: 34px 40px 18px;
  display: flex; align-items: center; justify-content: center;
}
/* le voile du bas, qui pose le lien sans couper l'image */
.ba::after {
  content: ''; position: absolute; left: 0; right: 0; bottom: 0; height: 120px;
  pointer-events: none; z-index: 1;
  background: linear-gradient(180deg, transparent, rgba(6,11,20,.55));
}
body:not(.dark) .ba::after { background: linear-gradient(180deg, transparent, rgba(244,248,253,.75)); }
.ba-pied, .ba-ecran { position: relative; z-index: 2; }
.ba-scene { width: 100%; display: flex; gap: 30px; align-items: center; justify-content: center; }
.ba-scene.entre { animation: ba-entre .5s cubic-bezier(.2,.7,.3,1) both; }
@keyframes ba-entre { from { opacity: 0; transform: translateY(12px); } to { opacity: 1; transform: none; } }
@media (prefers-reduced-motion: reduce) { .ba-scene.entre { animation: none; } }

.ba-kick {
  font-size: 11px; font-weight: 800; letter-spacing: .18em; text-transform: uppercase;
  color: #FFB8C9; margin-bottom: 8px;
}
body:not(.dark) .ba-kick { color: var(--crimson, #C0093A); }
.ba-titre {
  margin: 0 0 8px; font-size: clamp(21px, 2.4vw, 30px); font-weight: 900;
  letter-spacing: -.5px; line-height: 1.12; color: #fff; text-wrap: balance;
}
body:not(.dark) .ba-titre { color: var(--navy, #092D59); }
.ba-ligne {
  margin: 0; font-size: 15px; line-height: 1.6; color: #C6D6E8; max-width: 46ch;
}
body:not(.dark) .ba-ligne { color: #4A6079; }
.ba-chips { display: flex; flex-wrap: wrap; gap: 7px; margin-top: 12px; }
.ba-chip {
  font-size: 12px; font-weight: 700; padding: 5px 11px; border-radius: 999px;
  color: #DCE7F5; background: rgba(255,255,255,.08); border: 1px solid rgba(255,255,255,.14);
}
body:not(.dark) .ba-chip { color: var(--navy,#092D59); background: rgba(9,45,89,.05); border-color: rgba(9,45,89,.12); }

/* ── la scène d'ouverture ───────────────────────────────────────────────── */
.ba-intro { flex-direction: column; text-align: center; }
.ba-intro .bulles { height: 64px; margin-bottom: 14px; }
.ba-intro .ba-ligne { margin-inline: auto; }
.ba-intro .ba-chips { justify-content: center; }

/* ── une scène de livre ─────────────────────────────────────────────────── */
.ba-livre { text-align: left; }
.ba-couv { position: relative; flex: 0 0 auto; }
.ba-couv img {
  width: clamp(150px, 17vw, 218px); aspect-ratio: 150/212; object-fit: cover;
  border-radius: 12px; background: #0c1a30;
  box-shadow: 0 26px 50px -22px rgba(0,0,0,.8);
  animation: ba-zoom 5.4s ease-out both;
}
@keyframes ba-zoom { from { transform: scale(1.04) translateY(6px); } to { transform: none; } }
@media (prefers-reduced-motion: reduce) { .ba-couv img { animation: none; } }
.ba-niv {
  position: absolute; top: 10px; left: 10px;
  font-size: 11px; font-weight: 900; letter-spacing: .08em;
  padding: 4px 9px; border-radius: 999px; color: #fff;
  background: rgba(10,18,32,.72); border: 1px solid rgba(255,255,255,.22);
}
.ba-texte { max-width: 460px; }

/* l'extrait réel, présenté comme une page du manuel */
.ba-page {
  margin-top: 14px; padding: 12px 14px; border-radius: 12px;
  background: rgba(255,255,255,.06); border: 1px solid rgba(255,255,255,.12);
}
body:not(.dark) .ba-page { background: #fff; border-color: rgba(9,45,89,.10); }
.ba-pk { font-size: 10px; font-weight: 800; letter-spacing: .16em; color: #9FB6D2; }
.ba-pt { display: block; font-size: 17px; font-weight: 900; letter-spacing: .02em; color: #fff; margin: 3px 0 4px; }
body:not(.dark) .ba-pt { color: var(--navy,#092D59); }
.ba-ph { margin: 0; font-size: 14px; font-style: italic; color: #C6D6E8; line-height: 1.5; }
body:not(.dark) .ba-ph { color: #4A6079; }
.ba-pn { display: block; margin-top: 7px; font-size: 11px; color: #8FA5BF; }

/* ── la scène « dans chaque chapitre » ──────────────────────────────────── */
.ba-chap { flex-direction: column; text-align: center; }
.ba-quatre {
  display: grid; grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 10px; margin: 6px 0 12px; width: 100%; max-width: 760px;
}
.ba-q {
  padding: 12px 10px; border-radius: 12px; text-align: center;
  background: rgba(255,255,255,.06); border: 1px solid rgba(255,255,255,.12);
}
body:not(.dark) .ba-q { background: #fff; border-color: rgba(9,45,89,.10); }
.ba-qi { display: block; font-size: 18px; margin-bottom: 5px; color: #FFB8C9; }
body:not(.dark) .ba-qi { color: var(--crimson,#C0093A); }
.ba-q b { display: block; font-size: 13.5px; color: #fff; margin-bottom: 3px; }
body:not(.dark) .ba-q b { color: var(--navy,#092D59); }
.ba-q span { font-size: 12px; line-height: 1.45; color: #9FB6D2; }
.ba-chap .ba-ligne { margin-inline: auto; }

/* ── les commandes ──────────────────────────────────────────────────────── */
/* Aucune commande dessinée : on clique à gauche ou à droite de l'image,
   comme sur un aperçu de film. Le seul bouton est le lien vers la collection. */
.ba-pied {
  display: flex; justify-content: flex-end;
  padding: 0 16px 16px; margin-top: -4px;
}
.ba-cta { box-shadow: 0 14px 30px -16px rgba(192,9,58,.8); }
.ba-actions { display: flex; flex-wrap: wrap; gap: 10px; }

/* ── l'étagère personnelle ──────────────────────────────────────────────── */
.lv-grid { display: flex; flex-wrap: wrap; gap: 16px; }
.lv-item { width: 150px; display: flex; flex-direction: column; gap: 9px; }
.lv-couv {
  width: 150px; height: 212px; object-fit: cover; border-radius: 10px;
  background: #0c1a30; box-shadow: 0 10px 26px -16px rgba(0,0,0,.55);
}
.lv-item b { font-size: 13.5px; line-height: 1.3; }
.lv-item .btn { width: 100%; justify-content: center; }

/* ── téléphone ──────────────────────────────────────────────────────────── */
@media (max-width: 760px) {
  .ba-ecran { padding: 26px 14px 10px; min-height: 430px; }
  .ba-scene { flex-direction: column; gap: 16px; text-align: center; }
  .ba-livre .ba-texte { max-width: none; }
  .ba-livre .ba-chips { justify-content: center; }
  .ba-couv img { width: 132px; }
  .ba-ligne { font-size: 14.5px; }
  .ba-page { text-align: left; }
  .ba-quatre { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .ba-intro .bulles { height: 52px; }
  .lv-item, .lv-couv { width: 44vw; max-width: 170px; }
  .lv-couv { height: auto; aspect-ratio: 150/212; }
}