/* ============================================================
   Ville Verte - visionneuse "livre" (partagee : hub, page brochure, embed)
   Les proportions d'une page viennent de --vvb-pa (largeur / hauteur).
   ============================================================ */
#vv-brochure{
  --vvb-teal:#0F7480;
  --vvb-teal-dark:#0B5560;
  --vvb-mint:#CCE5DF;
  --vvb-ink:#12333A;
  --vvb-glass:rgba(255,255,255,.55);
  --vvb-glass-strong:rgba(255,255,255,.78);
  --vvb-pa:0.704;                 /* proportion d'une page : largeur / hauteur */
  --vvb-book-max:1280px;
  --vvb-single-max:560px;
  font-family:"Poppins","Segoe UI",system-ui,sans-serif;
  color:var(--vvb-ink);
  background:transparent;
  max-width:1440px;
  margin:0 auto;
  width:100%;
}
#vv-brochure *{box-sizing:border-box;margin:0;padding:0}
#vv-brochure button{font:inherit;cursor:pointer;border:none;background:none;color:inherit}
#vv-brochure button:focus-visible,
#vv-brochure a:focus-visible,
#vv-brochure input:focus-visible{outline:3px solid var(--vvb-teal);outline-offset:2px}
#vv-brochure [hidden]{display:none !important}

#vv-brochure .vvb-head{
  padding:12px 18px 4px;display:flex;align-items:center;
  justify-content:space-between;gap:12px;flex-wrap:wrap;
}
#vv-brochure .vvb-brand{line-height:1.15;color:var(--vvb-teal-dark)}
#vv-brochure .vvb-brand strong{display:block;font-size:1.05rem;font-weight:800}
#vv-brochure .vvb-brand span{font-size:.78rem;opacity:.8}
#vv-brochure .vvb-actions{display:flex;gap:8px;flex-wrap:wrap;align-items:center}
#vv-brochure .vvb-download,
#vv-brochure .vvb-embedbtn{
  display:inline-flex;align-items:center;gap:8px;
  background:var(--vvb-teal);color:#fff;
  font-weight:700;font-size:.9rem;padding:9px 16px;
  border-radius:999px;text-decoration:none;white-space:nowrap;
  box-shadow:0 3px 10px rgba(15,116,128,.35);
}
#vv-brochure .vvb-download:hover,
#vv-brochure .vvb-embedbtn:hover{background:var(--vvb-teal-dark)}
#vv-brochure .vvb-embedbtn{
  background:rgba(255,255,255,.75);color:var(--vvb-teal-dark);
  border:1.5px solid rgba(15,116,128,.35);box-shadow:none;
  -webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);
}
#vv-brochure .vvb-embedbtn:hover{background:#fff;color:var(--vvb-teal-dark)}
#vv-brochure .vvb-embedbtn.vvb-copied{background:var(--vvb-mint);border-color:var(--vvb-mint)}
/* choix de la langue : FR / EN */
#vv-brochure .vvb-lang{
  display:inline-flex;align-items:center;gap:2px;padding:3px;
  background:rgba(255,255,255,.75);border:1.5px solid rgba(15,116,128,.35);
  border-radius:999px;
  -webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);
}
#vv-brochure .vvb-lang button{
  font-size:.78rem;font-weight:700;letter-spacing:.04em;line-height:1.2;
  padding:7px 12px;border-radius:999px;color:var(--vvb-teal-dark);
}
#vv-brochure .vvb-lang button:hover{background:rgba(15,116,128,.12)}
#vv-brochure .vvb-lang button[aria-pressed="true"]{background:var(--vvb-teal);color:#fff}

#vv-brochure .vvb-sections{
  display:flex;gap:8px;overflow-x:auto;
  padding:10px 16px;scrollbar-width:none;
}
#vv-brochure .vvb-sections::-webkit-scrollbar{display:none}
#vv-brochure .vvb-chip{
  flex:none;background:rgba(255,255,255,.72);
  -webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);
  border:1.5px solid rgba(15,116,128,.25);
  border-radius:999px;padding:6px 13px;font-size:.82rem;font-weight:600;
}
#vv-brochure .vvb-chip[aria-current="true"]{background:var(--vvb-teal);border-color:var(--vvb-teal);color:#fff}

/* ---------- Livre ---------- */
#vv-brochure .vvb-main{
  display:flex;align-items:center;gap:6px;padding:16px 18px;
  background:var(--vvb-glass);
  -webkit-backdrop-filter:blur(18px) saturate(1.35);
  backdrop-filter:blur(18px) saturate(1.35);
  border:1px solid rgba(255,255,255,.65);
  border-radius:22px;
  box-shadow:0 10px 36px rgba(18,51,58,.16), inset 0 1px 0 rgba(255,255,255,.7);
}
#vv-brochure .vvb-arrow{
  flex:none;width:46px;align-self:stretch;
  display:flex;align-items:center;justify-content:center;
  color:var(--vvb-teal);border-radius:14px;
}
#vv-brochure .vvb-arrow:hover{background:rgba(15,116,128,.09)}
#vv-brochure .vvb-arrow:disabled{opacity:.25;cursor:default;background:none}
#vv-brochure .vvb-arrow svg{width:30px;height:30px}

#vv-brochure .vvb-stagewrap{flex:1;min-width:0;overflow:hidden;padding:22px 30px 40px;position:relative}
#vv-brochure .vvb-spinner{
  display:none;position:absolute;top:50%;left:50%;
  width:38px;height:38px;margin:-19px 0 0 -19px;z-index:8;
  border:3.5px solid rgba(15,116,128,.22);border-top-color:var(--vvb-teal);
  border-radius:50%;
  animation:vvbspin .8s linear infinite;
}
#vv-brochure.vvb-wait .vvb-spinner{display:block}
@keyframes vvbspin{to{transform:rotate(360deg)}}

/* ---------- Zoom ---------- */
#vv-brochure .vvb-zoom{
  position:fixed;inset:0;z-index:10000;display:none;
  background:rgba(18,51,58,.7);
  -webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px);
}
#vv-brochure .vvb-zoom.vvb-open{display:block}
#vv-brochure .vvb-zoom-stage{
  position:absolute;inset:0;overflow:hidden;
  display:flex;align-items:center;justify-content:center;
  touch-action:none;cursor:grab;
  user-select:none;-webkit-user-select:none;
}
#vv-brochure .vvb-zoom-stage.vvb-drag{cursor:grabbing}
#vv-brochure .vvb-zoom-img{
  max-width:92vw;max-height:86vh;border-radius:8px;background:#fff;
  box-shadow:0 20px 60px rgba(0,0,0,.5);
  user-select:none;-webkit-user-drag:none;pointer-events:none;
  will-change:transform;
}
#vv-brochure .vvb-zoom-bar{
  position:absolute;left:50%;bottom:18px;transform:translateX(-50%);
  display:flex;align-items:center;gap:10px;z-index:2;
  background:rgba(255,255,255,.85);
  -webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);
  border-radius:999px;padding:8px 14px;
  box-shadow:0 4px 18px rgba(0,0,0,.3);
}
#vv-brochure .vvb-zoom-bar button{
  width:38px;height:38px;border-radius:50%;
  font-size:1.25rem;font-weight:700;line-height:1;
  background:#fff;color:var(--vvb-teal-dark);
  box-shadow:0 1px 4px rgba(0,0,0,.18);
}
#vv-brochure .vvb-zoom-bar button:hover{background:var(--vvb-mint)}
#vv-brochure .vvb-zoom-label{
  font-size:.85rem;font-weight:700;color:var(--vvb-ink);
  min-width:70px;text-align:center;
}
#vv-brochure .vvb-zoom-nav{
  position:absolute;top:50%;transform:translateY(-50%);z-index:2;
  width:48px;height:48px;border-radius:50%;
  background:rgba(255,255,255,.9);color:var(--vvb-teal-dark);
  box-shadow:0 2px 10px rgba(0,0,0,.3);
  display:flex;align-items:center;justify-content:center;
}
#vv-brochure .vvb-zoom-nav:hover{background:var(--vvb-mint)}
#vv-brochure .vvb-zoom-nav:disabled{opacity:.3;cursor:default;background:rgba(255,255,255,.9)}
#vv-brochure .vvb-zoom-nav svg{width:26px;height:26px}
#vv-brochure .vvb-zoom-nav.vvb-zprev{left:14px}
#vv-brochure .vvb-zoom-nav.vvb-znext{right:14px}
#vv-brochure .vvb-zoom-img.vvb-zloading{opacity:.35;transition:opacity .15s}
#vv-brochure .vvb-zoom-close{
  position:absolute;top:16px;right:16px;z-index:2;
  width:44px;height:44px;border-radius:50%;
  background:rgba(255,255,255,.9);color:var(--vvb-ink);
  font-size:1.15rem;font-weight:700;
  box-shadow:0 2px 8px rgba(0,0,0,.3);
}

/* ---------- Double page ---------- */
#vv-brochure .vvb-book{
  position:relative;
  margin:0 auto;
  width:min(100%, calc((100vh - 292px) * 2 * var(--vvb-pa)), var(--vvb-book-max));
  aspect-ratio:calc(2 * var(--vvb-pa)) / 1;
  perspective:1900px;
  transition:transform .9s cubic-bezier(.3,.08,.22,1);
}
/* en iframe, la hauteur suit le contenu : on ne se limite pas a la fenetre */
#vv-brochure.vvb-embed .vvb-book{width:min(100%, var(--vvb-book-max))}
#vv-brochure .vvb-book.vvb-coverR{transform:translateX(-25%)}
#vv-brochure .vvb-book.vvb-coverL{transform:translateX(25%)}
#vv-brochure .vvb-half{position:absolute;top:0;height:100%;width:50%}
#vv-brochure .vvb-half.vvb-l{left:0}
#vv-brochure .vvb-half.vvb-r{right:0}
#vv-brochure .vvb-half img{
  display:block;width:100%;height:100%;
  cursor:zoom-in;
  user-select:none;-webkit-user-drag:none;
  box-shadow:0 14px 30px -6px rgba(18,51,58,.28);
  background:#fff;
}
#vv-brochure .vvb-half.vvb-l img{border-radius:10px 0 0 10px}
#vv-brochure .vvb-half.vvb-r img{border-radius:0 10px 10px 0}
#vv-brochure .vvb-cast{
  position:absolute;inset:0;pointer-events:none;opacity:0;z-index:2;
}
#vv-brochure .vvb-half.vvb-l .vvb-cast{
  border-radius:10px 0 0 10px;
  background:linear-gradient(270deg, rgba(0,0,0,.34), rgba(0,0,0,0) 62%);
}
#vv-brochure .vvb-half.vvb-r .vvb-cast{
  border-radius:0 10px 10px 0;
  background:linear-gradient(90deg, rgba(0,0,0,.34), rgba(0,0,0,0) 62%);
}
#vv-brochure .vvb-spine{
  position:absolute;top:0;bottom:0;left:50%;width:44px;
  transform:translateX(-50%);pointer-events:none;z-index:3;
  background:linear-gradient(90deg, rgba(0,0,0,0) 0%, rgba(0,0,0,.10) 46%, rgba(0,0,0,.16) 50%, rgba(0,0,0,.10) 54%, rgba(0,0,0,0) 100%);
  opacity:1;transition:opacity .3s;
}

/* Feuille en cours de tournage : decoupee en lamelles pour la courbure */
#vv-brochure .vvb-leaf{
  position:absolute;top:0;height:100%;width:50%;
  transform-style:preserve-3d;z-index:6;
}
#vv-brochure .vvb-leaf.vvb-fwd{left:50%}
#vv-brochure .vvb-leaf.vvb-bwd{left:0}
#vv-brochure .vvb-strip{
  position:absolute;top:0;height:100%;
  transform-style:preserve-3d;will-change:transform;
}
#vv-brochure .vvb-sf, #vv-brochure .vvb-sb{
  position:absolute;inset:0;overflow:hidden;
  -webkit-backface-visibility:hidden;backface-visibility:hidden;
  background-color:#fff;background-repeat:no-repeat;
}
#vv-brochure .vvb-sb{transform:rotateY(180deg)}
#vv-brochure .vvb-sshade{
  position:absolute;inset:0;pointer-events:none;opacity:0;
  background:rgba(0,0,0,.5);
}

/* ---------- Mode une page (petits ecrans) ---------- */
#vv-brochure .vvb-single{display:none;margin:0 auto;width:min(100%, calc((100vh - 282px) * var(--vvb-pa)), var(--vvb-single-max))}
#vv-brochure.vvb-embed .vvb-single{width:min(100%, var(--vvb-single-max))}
#vv-brochure .vvb-single img{
  display:block;width:100%;height:auto;border-radius:10px;cursor:zoom-in;
  box-shadow:0 14px 30px -6px rgba(18,51,58,.28);background:#fff;
  user-select:none;-webkit-user-drag:none;
}
#vv-brochure.vvb-mode-single .vvb-book, #vv-brochure.vvb-mode-single .vvb-spine{display:none}
#vv-brochure.vvb-mode-single .vvb-single{display:block}
#vv-brochure.vvb-mode-single .vvb-main{position:relative;padding-left:8px;padding-right:8px}
#vv-brochure.vvb-mode-single .vvb-arrow{
  position:absolute;top:50%;transform:translateY(-50%);z-index:5;
  width:40px;height:40px;border-radius:50%;
  background:rgba(255,255,255,.82);
  -webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px);
  box-shadow:0 2px 8px rgba(18,51,58,.22);
}
#vv-brochure.vvb-mode-single .vvb-arrow svg{width:24px;height:24px}
#vv-brochure.vvb-mode-single .vvb-arrow:first-of-type{left:10px}
#vv-brochure.vvb-mode-single .vvb-arrow:last-of-type{right:10px}
#vv-brochure.vvb-mode-single .vvb-stagewrap{padding-left:0;padding-right:0}

/* ---------- Controles ---------- */
#vv-brochure .vvb-controls{padding:18px 18px 16px;display:flex;justify-content:center}
#vv-brochure .vvb-counter-row{display:flex;align-items:center;gap:12px;width:100%;max-width:640px}
#vv-brochure .vvb-counter{
  font-variant-numeric:tabular-nums;font-weight:700;font-size:.88rem;
  white-space:nowrap;min-width:118px;text-align:center;
  background:rgba(255,255,255,.72);border:1.5px solid rgba(15,116,128,.25);
  -webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);
  border-radius:999px;padding:5px 12px;
}
/* min-width:0 : sur telephone le curseur retrecit au lieu de pousser "Toutes les pages" hors du cadre */
#vv-brochure .vvb-counter-row input[type=range]{flex:1;min-width:0;accent-color:var(--vvb-teal);height:28px}
#vv-brochure .vvb-grid-toggle{
  font-size:.82rem;font-weight:600;color:var(--vvb-teal-dark);
  text-decoration:underline;text-underline-offset:3px;white-space:nowrap;
}

#vv-brochure .vvb-overlay{position:fixed;inset:0;background:rgba(18,51,58,.45);display:none;z-index:9999}
#vv-brochure .vvb-overlay.vvb-open{display:block}
#vv-brochure .vvb-sheet{
  position:absolute;inset:auto 0 0 0;top:8vh;
  background:var(--vvb-glass-strong);
  -webkit-backdrop-filter:blur(22px) saturate(1.3);
  backdrop-filter:blur(22px) saturate(1.3);
  border-radius:20px 20px 0 0;display:flex;flex-direction:column;
  box-shadow:0 -8px 40px rgba(0,0,0,.3);
}
#vv-brochure .vvb-sheet-head{display:flex;align-items:center;justify-content:space-between;padding:14px 18px}
#vv-brochure .vvb-sheet-head h2{font-size:1rem}
#vv-brochure .vvb-close{
  width:40px;height:40px;border-radius:50%;background:#fff;
  font-size:1.1rem;font-weight:700;box-shadow:0 1px 4px rgba(0,0,0,.15);
}
#vv-brochure .vvb-thumb-grid{
  overflow-y:auto;display:grid;
  grid-template-columns:repeat(auto-fill,minmax(105px,1fr));
  gap:12px;padding:4px 18px 24px;
}
#vv-brochure .vvb-thumb{display:flex;flex-direction:column;gap:4px;align-items:center;border-radius:10px;padding:6px}
#vv-brochure .vvb-thumb img{width:100%;border-radius:6px;background:#fff;box-shadow:0 1px 5px rgba(0,0,0,.18)}
#vv-brochure .vvb-thumb span{font-size:.72rem;font-weight:600;color:var(--vvb-teal-dark)}
#vv-brochure .vvb-thumb[aria-current="true"]{background:var(--vvb-mint)}

/* message d'erreur (brochure introuvable) */
#vv-brochure .vvb-error{
  margin:40px auto;max-width:520px;text-align:center;padding:28px 24px;
  background:var(--vvb-glass-strong);border-radius:18px;font-weight:600;
}

@media (max-width:600px){
  /* un seul bouton, celui de l'autre langue : l'en-tete reste sur une ligne */
  #vv-brochure .vvb-lang{padding:2px}
  #vv-brochure .vvb-lang button{padding:7px 9px}
  #vv-brochure .vvb-lang button[aria-pressed="true"]{display:none}
  #vv-brochure .vvb-arrow{width:36px}
  #vv-brochure .vvb-main{padding:10px 8px}
  #vv-brochure .vvb-stagewrap{padding:16px 14px 28px}
  #vv-brochure .vvb-controls{padding-top:14px}
}

/* ---------- Styles de tournage ---------- */
/* magazine : page rigide, perspective plus marquee, tranches visibles */
#vv-brochure.vvb-style-magazine .vvb-book{perspective:1500px;perspective-origin:50% 45%}
#vv-brochure.vvb-style-magazine .vvb-half img{box-shadow:0 22px 44px -12px rgba(18,51,58,.42)}
#vv-brochure.vvb-style-magazine .vvb-half.vvb-l .vvb-cast{background:linear-gradient(270deg, rgba(0,0,0,.5), rgba(0,0,0,0) 70%)}
#vv-brochure.vvb-style-magazine .vvb-half.vvb-r .vvb-cast{background:linear-gradient(90deg, rgba(0,0,0,.5), rgba(0,0,0,0) 70%)}
#vv-brochure.vvb-style-magazine .vvb-spine{width:60px;background:linear-gradient(90deg, rgba(0,0,0,0) 0%, rgba(0,0,0,.14) 44%, rgba(0,0,0,.24) 50%, rgba(0,0,0,.14) 56%, rgba(0,0,0,0) 100%)}
#vv-brochure .vvb-leaf-rigid{transform-style:preserve-3d;z-index:6}
#vv-brochure .vvb-sheet{
  position:absolute;inset:0;transform-style:preserve-3d;will-change:transform;
}
#vv-brochure .vvb-sheet .vvb-sf,#vv-brochure .vvb-sheet .vvb-sb{
  box-shadow:0 18px 40px -10px rgba(18,51,58,.45);
}
#vv-brochure .vvb-sheet img{display:block;width:100%;height:100%;object-fit:fill;user-select:none;pointer-events:none}
#vv-brochure .vvb-sheet .vvb-sshade{background:linear-gradient(90deg, rgba(0,0,0,.42), rgba(0,0,0,0) 55%, rgba(255,255,255,.18) 100%)}
#vv-brochure .vvb-leaf-rigid.vvb-bwd .vvb-sshade{background:linear-gradient(270deg, rgba(0,0,0,.42), rgba(0,0,0,0) 55%, rgba(255,255,255,.18) 100%)}
#vv-brochure .vvb-edge{
  position:absolute;top:2px;bottom:2px;z-index:1;pointer-events:none;
  background:repeating-linear-gradient(90deg, #f6f6f4 0 1px, #dcdcd7 1px 2px, #ffffff 2px 3px);
  box-shadow:0 10px 24px -8px rgba(18,51,58,.25);
}
#vv-brochure .vvb-edge-l{border-radius:4px 0 0 4px}
#vv-brochure .vvb-edge-r{border-radius:0 4px 4px 0}
#vv-brochure .vvb-edge[hidden]{display:none}
/* glisser : le livre entier bouge, les ombres de dos sont inutiles */
#vv-brochure.vvb-style-glisser .vvb-book{will-change:transform,opacity}

/* ---------- Style magazine : pliage papier ---------- */
#vv-brochure.vvb-style-magazine .vvb-book{perspective:none;touch-action:pan-y}
#vv-brochure .vvb-fold{
  position:absolute;top:0;height:100%;width:50%;z-index:6;
  transform-origin:50% 50%;pointer-events:none;
}
#vv-brochure .vvb-fold.vvb-fwd{left:50%}
#vv-brochure .vvb-fold.vvb-bwd{left:0}
#vv-brochure .vvb-fold-front,#vv-brochure .vvb-fold-back,#vv-brochure .vvb-fold-shade{
  position:absolute;inset:0;will-change:clip-path,transform;
}
#vv-brochure .vvb-fold-front,#vv-brochure .vvb-fold-back{
  overflow:hidden;border-radius:0 10px 10px 0;background:#fff;
}
#vv-brochure .vvb-fold-back{transform-origin:0 0}
#vv-brochure .vvb-fold-front img,#vv-brochure .vvb-fold-back img{
  position:absolute;inset:0;width:100%;height:100%;display:block;max-width:none;
  user-select:none;pointer-events:none;
}
#vv-brochure .vvb-fold-shade{pointer-events:none;opacity:0}
#vv-brochure .vvb-fold-back .vvb-fold-shade{opacity:1}
#vv-brochure.vvb-corner .vvb-half img{cursor:grab}
#vv-brochure.vvb-dragging .vvb-half img{cursor:grabbing}

/* ---------- Apercu compact (hub) ---------- */
#vv-brochure.vvb-preview{padding:0;background:transparent;min-height:0}
#vv-brochure.vvb-preview .vvb-head,#vv-brochure.vvb-preview .vvb-sections,
#vv-brochure.vvb-preview .vvb-controls,#vv-brochure.vvb-preview .vvb-arrow,
#vv-brochure.vvb-preview .vvb-spinner{display:none}
#vv-brochure.vvb-preview .vvb-main{gap:0;padding:0;background:transparent;border:none;box-shadow:none;border-radius:0;-webkit-backdrop-filter:none;backdrop-filter:none}
#vv-brochure.vvb-preview .vvb-stagewrap{padding:14px 14% 24px}
#vv-brochure.vvb-preview .vvb-book{width:100%;transition-duration:.6s}
#vv-brochure.vvb-preview .vvb-half img{cursor:default;box-shadow:0 8px 18px -6px rgba(18,51,58,.3);border-radius:4px}
#vv-brochure.vvb-preview .vvb-half.vvb-l img{border-radius:4px 0 0 4px}
#vv-brochure.vvb-preview .vvb-half.vvb-r img{border-radius:0 4px 4px 0}
#vv-brochure.vvb-preview .vvb-fold-front,#vv-brochure.vvb-preview .vvb-fold-back{border-radius:0 4px 4px 0}
#vv-brochure.vvb-preview .vvb-single{display:none}