/* ============================================================
   Cartes « livre » (préfixe .lv-) : la couverture posée comme un vrai livre,
   le titre écrit dessus en HTML, puis catégorie, titre, phrase, prix, action.
   Un seul composant pour l'accueil, /histoires, /livres et les rayons.
   Gabarit HTML : /js/carte-livre.js. Lecteur : /js/feuilleter.js.
   Les tokens viennent de la charte (--bg --surface --ink --sub --line --brand
   --cta) ; rien ici ne touche histoires.css ni occasions.css.
   ============================================================ */

/* ---------- filtre par âge ---------- */
.lv-ages{display:flex;flex-wrap:wrap;align-items:center;gap:10px;margin:6px 0 18px}
.lv-ages-titre{font-weight:800;font-size:14px;color:var(--sub);margin-right:4px}
.lv-age-btn{background:var(--surface,#fff);border:2px solid var(--line,#EFE6DD);border-radius:999px;
  padding:10px 20px;font-family:inherit;font-weight:800;font-size:15px;line-height:1.2;cursor:pointer;
  color:var(--ink);transition:border-color .15s,background .15s}
.lv-age-btn:hover[aria-pressed="false"]{border-color:var(--brand)}
.lv-age-btn[aria-pressed="true"]{background:var(--cta);border-color:transparent;color:#fff}
.lv-age-btn:focus-visible,.lv-feuillette:focus-visible,.lv-lien:focus-visible{outline:3px solid var(--brand);outline-offset:3px}
.lv-grille.lv-aucune{padding:0;gap:0}
.lv-vide{margin:4px 0 30px;padding:18px 22px;border-radius:16px;background:color-mix(in srgb,var(--brand) 7%,var(--bg));
  color:var(--ink);font-weight:600}
.lv-vide[hidden]{display:none}

/* ---------- titres de groupe ---------- */
.lv-groupe{margin:0 0 10px;font-size:clamp(26px,3vw,36px)}
.lv-sous-titre{margin:18px 0 4px;font-size:clamp(20px,2.2vw,26px)}
.lv-intro{margin:0 0 14px;color:var(--sub);max-width:720px}

/* ---------- grille ---------- */
.lv-grille{display:grid;gap:30px 28px;grid-template-columns:repeat(3,minmax(0,1fr));padding:8px 0 46px}
.lv-grille>.tuile{align-self:stretch;aspect-ratio:auto;min-height:220px;min-width:0}
.lv-grille>.tuile[hidden]{display:none}
.lv-grille>p,.lv-grille>.ssr-liste{grid-column:1/-1}
@media (max-width:1020px){.lv-grille{grid-template-columns:repeat(2,minmax(0,1fr));gap:24px 20px}}
@media (max-width:640px){.lv-grille{grid-template-columns:minmax(0,1fr);gap:22px}}

/* ---------- la carte ---------- */
.lv-carte{display:flex;flex-direction:column;background:var(--surface,#fff);border:1px solid var(--line,#EFE6DD);
  border-radius:var(--radius,24px);overflow:hidden;min-width:0;
  transition:transform .2s ease,box-shadow .2s ease,border-color .2s ease}
.lv-carte[hidden]{display:none}
.lv-carte:hover,.lv-carte:focus-within{transform:translateY(-4px);box-shadow:0 22px 46px rgba(20,16,40,.14);border-color:color-mix(in srgb,var(--brand) 55%,var(--line))}
.lv-lien{display:flex;flex-direction:column;flex:1;color:inherit;text-decoration:none}

/* la scène : un fond doux sur lequel le livre est posé */
.lv-scene{position:relative;padding:38px 42px 34px;perspective:1000px;
  background:radial-gradient(120% 90% at 50% 10%,color-mix(in srgb,var(--brand) 10%,#fff),color-mix(in srgb,var(--accent,#7C6BF0) 9%,var(--bg)))}
.lv-scene::after{content:"";position:absolute;left:18%;right:18%;bottom:20px;height:18px;border-radius:50%;
  background:radial-gradient(closest-side,rgba(43,36,64,.26),transparent);filter:blur(5px)}
.lv-livre{position:relative;container-type:inline-size;aspect-ratio:1/1;width:100%;
  transform:rotateY(-13deg) rotateX(2deg);transform-origin:50% 60%;transform-style:preserve-3d;
  border-radius:3px 9px 9px 3px;transition:transform .35s ease;z-index:1;
  box-shadow:-3px 4px 0 -1px #ebe3d6,10px 16px 26px rgba(43,36,64,.28),2px 2px 5px rgba(43,36,64,.2)}
.lv-carte:hover .lv-livre,.lv-carte:focus-within .lv-livre{transform:rotateY(-6deg) rotateX(1deg) scale(1.025)}
.lv-couv{position:absolute;inset:0;border-radius:3px 9px 9px 3px;overflow:hidden;background:var(--line)}
.lv-couv img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;display:block}
.lv-couv img.entre{opacity:0;transition:opacity .55s ease}
.lv-couv img.entre.visible{opacity:1}
/* la reliure : un pli sombre, puis un filet de lumière, sur le bord gauche */
.lv-livre::before{content:"";position:absolute;z-index:2;inset:0;border-radius:3px 9px 9px 3px;pointer-events:none;
  background:linear-gradient(90deg,rgba(20,14,34,.38) 0,rgba(20,14,34,.12) 3.2%,rgba(255,255,255,.34) 4.2%,rgba(255,255,255,0) 6.5%,rgba(255,255,255,0) 92%,rgba(20,14,34,.14) 100%)}
/* la tranche des pages, côté droit */
.lv-livre::after{content:"";position:absolute;z-index:0;top:2%;bottom:-1.5%;right:-3.2%;width:3.6%;border-radius:0 4px 4px 0;
  background:repeating-linear-gradient(180deg,#fffdf8 0 2px,#e9e0d1 2px 3px);box-shadow:inset 2px 0 3px rgba(43,36,64,.16)}

/* le titre posé sur la couverture : plaque claire, lisible sur toute illustration */
.lv-plaque{position:absolute;z-index:3;left:50%;top:3%;transform:translateX(-50%);width:max-content;max-width:80%;
  padding:.32em .85em .38em;border-radius:10px;text-align:center;
  background:rgba(255,251,244,.93);box-shadow:0 5px 16px rgba(20,14,34,.28),inset 0 0 0 1.5px rgba(228,146,46,.45);
  font-family:"Baloo 2",system-ui,sans-serif;font-weight:800;line-height:1.08;color:var(--ink);
  font-size:17px;font-size:clamp(13px,5.8cqw,23px);text-wrap:balance}

/* le texte sous le livre */
.lv-corps{display:flex;flex-direction:column;flex:1;padding:20px 26px 8px}
.lv-cat{margin:0 0 6px;font-weight:800;font-size:12px;letter-spacing:.13em;text-transform:uppercase;color:var(--brand)}
.lv-nom{margin:0 0 6px;font-size:clamp(21px,1.9vw,26px);line-height:1.12}
.lv-sous{margin:-2px 0 8px;font-size:13px;line-height:1.3;font-style:italic;color:var(--sub);opacity:.85}
.lv-pitch{margin:0 0 14px;color:var(--sub);font-size:15.5px;line-height:1.5;
  display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden}
.lv-meta{display:flex;align-items:flex-end;justify-content:space-between;gap:8px 14px;flex-wrap:wrap;margin-top:auto}
.lv-age{display:inline-block;font-weight:800;font-size:13px;color:var(--ink);padding:5px 12px;border-radius:999px;
  background:color-mix(in srgb,var(--brand) 11%,var(--surface,#fff))}
.lv-prix{margin:0 0 0 auto;font-weight:800;font-size:15.5px;color:var(--brand);text-align:right;line-height:1.25}
.lv-prix small{display:block;color:var(--sub);font-weight:600;font-size:12.5px}
.lv-cta{display:block;margin-top:14px;text-align:center;background:var(--cta);color:#fff;font-weight:800;font-size:15px;
  padding:13px 16px;border-radius:999px;box-shadow:0 10px 24px color-mix(in srgb,var(--brand) 26%,transparent);transition:transform .18s ease}
.lv-lien:hover .lv-cta{transform:translateY(-1px)}
.lv-feuillette{display:block;width:calc(100% - 52px);margin:10px 26px 22px;padding:11px 16px;border-radius:999px;cursor:pointer;
  background:transparent;border:2px solid color-mix(in srgb,var(--brand) 55%,var(--line));color:var(--ink);
  font-family:inherit;font-weight:800;font-size:14.5px;transition:background .15s,border-color .15s}
.lv-feuillette::before{content:"";display:inline-block;width:17px;height:13px;margin-right:9px;vertical-align:-1px;background:currentColor;
  -webkit-mask:no-repeat center/contain url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 18 14'%3E%3Cpath d='M9 2.2C7.6 1 5 .6 1 .8v10.7c4-.2 6.6.2 8 1.4 1.4-1.2 4-1.6 8-1.4V.8C13 .6 10.4 1 9 2.2zM9 2.4v10.2' fill='none' stroke='%23000' stroke-width='1.5' stroke-linejoin='round'/%3E%3C/svg%3E");
  mask:no-repeat center/contain url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 18 14'%3E%3Cpath d='M9 2.2C7.6 1 5 .6 1 .8v10.7c4-.2 6.6.2 8 1.4 1.4-1.2 4-1.6 8-1.4V.8C13 .6 10.4 1 9 2.2zM9 2.4v10.2' fill='none' stroke='%23000' stroke-width='1.5' stroke-linejoin='round'/%3E%3C/svg%3E")}
.lv-feuillette:hover{background:color-mix(in srgb,var(--brand) 9%,var(--surface,#fff));border-color:var(--brand)}
@media (max-width:640px){
  .lv-scene{padding:30px 44px 30px}
  .lv-corps{padding:18px 20px 6px}
  .lv-feuillette{width:calc(100% - 40px);margin:10px 20px 20px}
}
@media (prefers-reduced-motion:reduce){
  .lv-carte,.lv-livre,.lv-cta{transition:none}
  .lv-carte:hover{transform:none}
}

/* ---------- le lecteur « Feuilleter » ---------- */
body.lv-bloque{overflow:hidden}
.lv-modale{position:fixed;inset:0;z-index:1000;display:flex;align-items:center;justify-content:center;padding:16px;
  background:rgba(30,22,50,.74);-webkit-backdrop-filter:blur(4px);backdrop-filter:blur(4px)}
.lv-modale[hidden]{display:none}
.lv-dialogue{position:relative;display:flex;flex-direction:column;width:min(1040px,100%);max-height:calc(100dvh - 32px);
  background:var(--bg,#FFF9F5);border-radius:22px;box-shadow:0 30px 80px rgba(0,0,0,.45);overflow:hidden}
.lv-tete{display:flex;align-items:center;gap:14px;padding:14px 18px 12px 24px;border-bottom:1px solid var(--line)}
.lv-tete-titre{flex:1;min-width:0;margin:0;font-size:clamp(17px,2.2vw,22px);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.lv-compteur{font-weight:800;font-size:14px;color:var(--sub);white-space:nowrap}
.lv-fermer{flex:none;width:42px;height:42px;border-radius:50%;border:0;cursor:pointer;background:color-mix(in srgb,var(--ink) 8%,transparent);
  color:var(--ink);font-size:26px;line-height:1;display:grid;place-items:center}
.lv-fermer:hover{background:color-mix(in srgb,var(--ink) 15%,transparent)}
.lv-fermer:focus-visible,.lv-nav:focus-visible,.lv-pied-cta:focus-visible{outline:3px solid var(--brand);outline-offset:2px}
.lv-scene-lecteur{position:relative;flex:1;min-height:0;overflow:auto;padding:22px 24px;display:flex;align-items:center;justify-content:center;touch-action:pan-y;
  background:radial-gradient(120% 100% at 50% 0,color-mix(in srgb,var(--brand) 8%,#fff),color-mix(in srgb,var(--accent,#7C6BF0) 8%,var(--bg)))}
.lv-ouvert{display:grid;grid-template-columns:1fr 1fr;width:100%;max-width:880px;border-radius:6px 12px 12px 6px;overflow:hidden;background:#fffdf8;
  box-shadow:0 18px 44px rgba(43,36,64,.28),0 2px 6px rgba(43,36,64,.2);position:relative}
.lv-ouvert::after{content:"";position:absolute;top:0;bottom:0;left:50%;width:36px;margin-left:-18px;pointer-events:none;
  background:linear-gradient(90deg,transparent,rgba(43,36,64,.16) 48%,rgba(43,36,64,.05) 52%,transparent)}
.lv-ouvert.couverture{grid-template-columns:1fr;max-width:min(520px,100%)}
.lv-ouvert.couverture::after{display:none}
.lv-page-img{background:var(--line);aspect-ratio:1/1;position:relative}
.lv-page-img img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;display:block}
.lv-page-txt{display:flex;align-items:center;justify-content:center;padding:clamp(18px,4vw,44px);aspect-ratio:1/1;overflow:auto;
  background:linear-gradient(180deg,#fffdf8,#faf4e8)}
.lv-page-txt p{margin:0;max-width:30ch;font-size:clamp(16px,1.9vw,21px);line-height:1.6;color:var(--ink);white-space:pre-line;text-align:center}
.lv-ouvert.couverture .lv-page-txt{aspect-ratio:auto;padding:14px 18px;background:#fffdf8}
.lv-ouvert.couverture .lv-page-txt p{font-size:15px;color:var(--sub)}
.lv-corps-lecteur{flex:1;min-height:0;display:flex;flex-direction:column}
.lv-corps-lecteur>.lv-scene-lecteur{flex:1}
.lv-nav{position:absolute;top:50%;z-index:2;transform:translateY(-50%);width:54px;height:54px;border-radius:50%;border:2px solid #fff;cursor:pointer;
  background:var(--ink);color:#fff;box-shadow:0 8px 22px rgba(43,36,64,.42);font-family:Arial,sans-serif;font-size:34px;font-weight:700;line-height:1;
  padding:0 0 4px;display:grid;place-items:center;transition:transform .15s,background .15s}
.lv-nav:hover:not([disabled]){background:var(--brand);transform:translateY(-50%) scale(1.07)}
.lv-nav[disabled]{opacity:.45;cursor:default;box-shadow:0 3px 8px rgba(43,36,64,.2)}
.lv-nav.prec{left:10px}.lv-nav.suiv{right:10px}
.lv-pied-cta[hidden]{display:none}
button.lv-pied-cta{border:0;cursor:pointer;font-family:inherit}
/* Lecteur intégré (creer.html) : même rendu que la modale, posé dans la page. */
.lv-int{border-radius:18px;overflow:hidden;border:1px solid var(--line);box-shadow:0 10px 30px rgba(43,36,64,.1);background:var(--bg,#FFF9F5)}
.lv-int .lv-scene-lecteur{padding:22px 66px;overflow:visible;container-type:inline-size;border-radius:0}
.lv-int .lv-scene-lecteur:focus-visible{outline:3px solid var(--brand);outline-offset:-3px}
.lv-int .lv-ouvert{max-width:none}
.lv-int .lv-ouvert.couverture{max-width:min(440px,100%)}
.lv-int-pied{display:flex;align-items:center;justify-content:space-between;gap:10px 16px;flex-wrap:wrap;padding:12px 18px;border-top:1px solid var(--line)}
.lv-int-pied .lv-compteur{font-size:15px;color:var(--ink)}
.lv-agrandir{display:inline-flex;align-items:center;gap:8px;min-height:44px;padding:0 18px;border-radius:999px;cursor:pointer;
  background:var(--surface,#fff);border:2px solid var(--ink);color:var(--ink);font-family:inherit;font-weight:800;font-size:15px}
.lv-agrandir:hover{background:var(--ink);color:#fff}
.lv-agrandir:focus-visible{outline:3px solid var(--brand);outline-offset:2px}
.lv-int-mention{margin:0;flex:1 1 220px;font-size:13px;font-weight:700;color:var(--sub)}
@media (max-width:720px){
  .lv-int .lv-scene-lecteur{padding:12px;display:block}
  .lv-int .lv-ouvert{max-width:none;margin:0 auto}
  .lv-int .lv-nav{top:calc(12px + 50cqw)}
  .lv-int .lv-nav.prec{left:20px}.lv-int .lv-nav.suiv{right:20px}
}
.lv-pied{display:flex;align-items:center;justify-content:space-between;gap:12px 20px;flex-wrap:wrap;padding:14px 24px 16px;border-top:1px solid var(--line)}
.lv-mention{margin:0;font-size:13px;font-weight:700;color:var(--sub)}
.lv-pied-cta{display:inline-block;background:var(--cta);color:#fff;font-weight:800;font-size:15px;padding:12px 24px;border-radius:999px;
  text-decoration:none;box-shadow:0 10px 24px color-mix(in srgb,var(--brand) 26%,transparent)}
.lv-charge{position:absolute;inset:0;display:grid;place-items:center;color:var(--sub);font-weight:700}
@media (max-width:720px){
  .lv-modale{padding:0;align-items:stretch}
  .lv-dialogue{max-height:100dvh;height:100dvh;border-radius:0;width:100%}
  .lv-scene-lecteur{padding:12px;align-items:flex-start}
  .lv-ouvert{grid-template-columns:1fr;max-width:480px;border-radius:10px}
  .lv-ouvert::after{display:none}
  .lv-page-txt{aspect-ratio:auto;padding:20px 22px;min-height:120px}
  .lv-page-txt p{font-size:17px}
  .lv-nav{top:calc(12px + 24vw);width:50px;height:50px}
  .lv-nav.prec{left:6px}.lv-nav.suiv{right:6px}
  .lv-pied{padding:12px 16px calc(14px + env(safe-area-inset-bottom))}
  .lv-pied-cta{width:100%;text-align:center}
  .lv-tete{padding:12px 12px 10px 18px}
}

/* ---------- Défilement des pages dans la carte (public/js/carte-swipe.js) ---------- */
/* Chrome ignore le défilement tactile du rail sous preserve-3d, et avale le défilement vertical de la page sous rotateY+rotateX combinés : tilt réduit à rotateY. */
.lv-avec-pages .lv-livre{transform-style:flat;transform:rotateY(-13deg)}
.lv-avec-pages:hover .lv-livre,.lv-avec-pages:focus-within .lv-livre{transform:rotateY(-6deg) scale(1.025)}
@media (prefers-reduced-motion:reduce){.lv-avec-pages:hover .lv-livre{transform:rotateY(-13deg)}}
.lv-pages{position:absolute;inset:0;z-index:1;display:flex;overflow-x:auto;overflow-y:hidden;scroll-snap-type:x mandatory;
  -webkit-overflow-scrolling:touch;scrollbar-width:none;touch-action:pan-x pan-y;border-radius:inherit}
.lv-pages::-webkit-scrollbar{display:none}
.lv-pg{position:relative;flex:0 0 100%;height:100%;scroll-snap-align:start;scroll-snap-stop:always;background:var(--line)}
.lv-pg img{-webkit-user-drag:none;user-select:none}
.lv-pg:not(.lv-pg-couv):not(.lv-pg-fin)::after{content:"";position:absolute;inset:0;pointer-events:none;
  background:linear-gradient(90deg,rgba(20,14,34,.22) 0,rgba(20,14,34,0) 5%)}
.lv-pg-fin{display:grid;place-items:center;background:linear-gradient(160deg,#fffdf8,#f6ecdc)}
.lv-fin{display:flex;flex-direction:column;align-items:center;gap:4px;border:0;cursor:pointer;font-family:inherit;color:var(--ink);
  background:transparent;padding:14px 18px;text-align:center}
.lv-fin-t{display:inline-block;background:var(--cta);color:#fff;font-weight:800;font-size:clamp(13px,5.2cqw,17px);
  padding:.7em 1.3em;border-radius:999px;box-shadow:0 8px 20px color-mix(in srgb,var(--brand) 28%,transparent)}
.lv-fin-s{font-weight:700;font-size:clamp(11px,4cqw,13px);color:var(--sub)}
.lv-fin:focus-visible{outline:3px solid var(--brand);outline-offset:-6px}
.lv-avec-pages .lv-plaque{opacity:calc(1 - var(--lv-p,0) * 2.6);pointer-events:none}
.lv-fleche{position:absolute;z-index:4;top:50%;transform:translateY(-50%);width:38px;height:38px;border-radius:50%;
  border:2px solid #fff;background:var(--ink);color:#fff;cursor:pointer;display:none;place-items:center;padding:0 0 3px;
  font-family:Arial,sans-serif;font-size:26px;font-weight:700;line-height:1;opacity:0;transition:opacity .18s,background .15s;
  box-shadow:0 6px 16px rgba(43,36,64,.4)}
.lv-fleche.prec{left:8px}.lv-fleche.suiv{right:8px}
.lv-fleche:hover{background:var(--brand)}
@media (hover:hover) and (pointer:fine){
  .lv-avec-pages .lv-fleche{display:grid}
  .lv-avec-pages:hover .lv-fleche,.lv-avec-pages:focus-within .lv-fleche{opacity:1}
  .lv-avec-pages.lv-debut .lv-fleche.prec,.lv-avec-pages.lv-bout .lv-fleche.suiv{opacity:0!important;pointer-events:none}
}
.lv-points{position:absolute;z-index:2;left:0;right:0;bottom:7px;display:flex;justify-content:center;gap:6px;pointer-events:none}
.lv-points i{width:7px;height:7px;border-radius:50%;background:color-mix(in srgb,var(--ink) 22%,transparent);transition:background .15s,transform .15s}
.lv-points i.on{background:var(--brand);transform:scale(1.25)}
.lv-indice{position:absolute;z-index:4;left:50%;bottom:7%;transform:translateX(-50%);margin:0;width:max-content;max-width:88%;
  padding:.45em 1em;border-radius:999px;background:rgba(43,36,64,.82);color:#fff;font-weight:800;font-size:clamp(11px,4.4cqw,14px);
  pointer-events:none;animation:lv-indice-vie 7s ease forwards}
@keyframes lv-indice-vie{0%,6%{opacity:0;transform:translate(-50%,6px)}14%,82%{opacity:1;transform:translate(-50%,0)}100%{opacity:0}}
@media (prefers-reduced-motion:reduce){.lv-indice{animation:none}.lv-points i{transition:none}}