/* Vitrine des fiches livre (2026-09-10) : montrer le resultat avant le texte.
   Pose par 04_TOOLS/organizen-editions-vitrine/vitrine_fiche.py. Themes clair et sombre. */
:root{--vt-bg:#fbf9f5;--vt-fg:#1b1726;--vt-muted:#5c5470;--vt-acc:#b08d57;--vt-acc-fg:#14100a;
  --vt-panel:#f2ecdf;--vt-line:#e0d3b8;--vt-soft:#fff;--vt-shadow:0 30px 60px -28px rgba(20,12,0,.55)}
@media(prefers-color-scheme:dark){:root{--vt-bg:#0d0b14;--vt-fg:#e8e4f0;--vt-muted:#a89ebd;--vt-acc:#d9b26f;
  --vt-acc-fg:#14100a;--vt-panel:#171327;--vt-line:#2c2440;--vt-soft:#1d1830;--vt-shadow:0 30px 60px -28px rgba(0,0,0,.9)}}
body{background:var(--vt-bg);color:var(--vt-fg)}
.vt{max-width:1080px;margin:0 auto;padding:22px 20px 70px;font-family:Georgia,"Times New Roman",serif}
.vt .sys{font-family:system-ui,-apple-system,"Segoe UI",Roboto,sans-serif}
.vt-nav{display:flex;justify-content:space-between;align-items:center;gap:12px;font:13px/1.4 system-ui,sans-serif;
  letter-spacing:.14em;text-transform:uppercase;margin-bottom:26px}
.vt-nav a{color:var(--vt-acc);text-decoration:none}
.vt-hero{display:grid;grid-template-columns:minmax(240px,380px) 1fr;gap:44px;align-items:center;margin-bottom:54px}
.vt-cover{position:relative;perspective:1200px}
.vt-cover img{width:100%;display:block;border-radius:10px;box-shadow:var(--vt-shadow);transform:rotateY(-8deg) rotateX(2deg);
  transition:transform .5s ease}
.vt-cover:hover img{transform:rotateY(0) rotateX(0)}
.vt-cover .vt-badge{position:absolute;top:14px;left:-10px;background:var(--vt-acc);color:var(--vt-acc-fg);font:700 12px/1.2 system-ui,sans-serif;
  letter-spacing:.08em;text-transform:uppercase;padding:8px 12px;border-radius:6px;box-shadow:0 8px 20px -8px rgba(0,0,0,.5)}
.vt-cover .vt-badge.b2{top:auto;bottom:18px;left:auto;right:-10px;background:var(--vt-soft);color:var(--vt-fg);border:1px solid var(--vt-line)}
.vt-kicker{color:var(--vt-acc);font:12px/1.4 system-ui,sans-serif;letter-spacing:.18em;text-transform:uppercase;margin:0 0 10px}
.vt-pitch h1{font-size:clamp(30px,4.6vw,48px);line-height:1.08;margin:0 0 10px;text-wrap:balance}
.vt-pitch .sub{color:var(--vt-muted);font-size:19px;margin:0 0 18px}
.vt-accroche{font-size:21px;line-height:1.45;margin:0 0 18px;font-style:italic}
.vt-benef{list-style:none;padding:0;margin:0 0 24px;font:16px/1.5 system-ui,sans-serif}
.vt-benef li{padding:6px 0 6px 30px;position:relative}
.vt-benef li:before{content:"";position:absolute;left:0;top:11px;width:18px;height:18px;border-radius:50%;background:var(--vt-acc);
  -webkit-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='%23000' d='M9 16.2 4.8 12l-1.4 1.4L9 19 21 7l-1.4-1.4z'/%3E%3C/svg%3E") center/contain no-repeat;
  mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='%23000' d='M9 16.2 4.8 12l-1.4 1.4L9 19 21 7l-1.4-1.4z'/%3E%3C/svg%3E") center/contain no-repeat}
.vt-cta{display:flex;flex-wrap:wrap;gap:12px;align-items:center;margin:0 0 12px}
.vt-btn{display:inline-block;padding:15px 26px;border-radius:10px;font:700 16px/1.2 system-ui,sans-serif;text-decoration:none;
  background:var(--vt-acc);color:var(--vt-acc-fg);box-shadow:0 12px 24px -12px rgba(0,0,0,.6)}
.vt-btn.ghost{background:transparent;color:var(--vt-fg);border:2px solid var(--vt-line);box-shadow:none}
.vt-rassure{color:var(--vt-muted);font:13px/1.5 system-ui,sans-serif;margin:0}
.vt-h2{font-size:clamp(24px,3.4vw,34px);line-height:1.15;margin:0 0 8px;text-wrap:balance}
.vt-lead{color:var(--vt-muted);font-size:17px;margin:0 0 22px}
.vt-demo{display:grid;grid-template-columns:minmax(260px,330px) 1fr;gap:44px;align-items:center;margin:0 0 56px;padding:34px;
  background:var(--vt-panel);border:1px solid var(--vt-line);border-radius:22px}
.vt-phone{position:relative;width:100%;max-width:300px;margin:0 auto;aspect-ratio:9/19;border-radius:38px;background:#111;
  padding:12px;box-shadow:0 40px 70px -30px rgba(0,0,0,.8),inset 0 0 0 2px #333}
.vt-phone:before{content:"";position:absolute;top:22px;left:50%;transform:translateX(-50%);width:34%;height:22px;background:#111;border-radius:12px;z-index:2}
.vt-phone .ecran{width:100%;height:100%;border-radius:28px;overflow:hidden;background:#f6f1e7;position:relative}
.vt-phone iframe{width:100%;height:100%;border:0;display:block}
.vt-demo ul{font:16px/1.5 system-ui,sans-serif;padding-left:20px;margin:0 0 18px}
.vt-demo ul li{margin:6px 0}
.vt-section{margin:0 0 50px}
.vt-desc{font-size:17px;line-height:1.8;max-width:760px}
.vt-desc p{margin:0 0 18px}
.vt-sommaire{display:grid;grid-template-columns:repeat(auto-fill,minmax(220px,1fr));gap:10px;list-style:none;padding:0;margin:0;font:15px/1.4 system-ui,sans-serif}
.vt-sommaire li{padding:12px 14px;background:var(--vt-panel);border:1px solid var(--vt-line);border-radius:10px}
.vt-sommaire li b{color:var(--vt-acc);margin-right:8px}
.vt .valeur{background:var(--vt-panel);border:1px solid var(--vt-line);border-radius:18px;padding:22px 24px;margin:0 0 50px}
.vt .valeur h2{margin:0 0 12px;font-size:22px}
.vt .valeur .faits{list-style:none;padding:0;margin:0 0 12px;display:flex;flex-wrap:wrap;gap:8px}
.vt .valeur .faits li{background:var(--vt-soft);border:1px solid var(--vt-line);border-radius:999px;padding:6px 13px;font:14px/1.3 system-ui,sans-serif}
.vt .offers{display:grid;grid-template-columns:repeat(auto-fit,minmax(260px,1fr));gap:18px;margin:0}
.vt .offers .offer{margin:0 !important;background:var(--vt-panel);border:1px solid var(--vt-line);border-radius:18px;padding:26px 22px;text-align:center}
.vt .offers .offer .price{font-size:32px;font-weight:700;margin:4px 0}
.vt .offers .offer .btn-buy{margin-top:8px}
.vt-autres{display:grid;grid-template-columns:repeat(auto-fill,minmax(150px,1fr));gap:18px}
.vt-autres a{text-decoration:none;color:var(--vt-fg);font:14px/1.3 system-ui,sans-serif}
.vt-autres img{width:100%;aspect-ratio:2/3;object-fit:cover;border-radius:8px;box-shadow:0 18px 30px -18px rgba(0,0,0,.6);margin-bottom:8px;
  transition:transform .3s}
.vt-autres a:hover img{transform:translateY(-4px)}
.vt-auteur{display:flex;gap:18px;align-items:center;padding:22px 24px;border:1px solid var(--vt-line);border-radius:18px;font:15px/1.55 system-ui,sans-serif;color:var(--vt-muted)}
.vt-auteur b{color:var(--vt-fg)}
.vt-foot{margin-top:30px;text-align:center;font:13px/1.5 system-ui,sans-serif}
.vt-foot a{color:var(--vt-acc);text-decoration:none;margin:0 8px}
@media(max-width:820px){
  .vt-hero{grid-template-columns:1fr;gap:26px}
  .vt-cover{max-width:250px;margin:0 auto}
  .vt-cover img{transform:none}
  .vt-demo{grid-template-columns:1fr;padding:22px 18px}
  .vt-phone{max-width:270px}
}