/* klludil — bouton & modale de la visionneuse (fiche produit) */
.klludil-block { margin: 14px 0; }

.klludil-viewer-btn {
  display: inline-flex; align-items: center; gap: 8px;
  text-decoration: none;
  padding: 10px 18px; border: 0; border-radius: 6px;
  background: #2b2b2b; color: #fff;
  font-weight: 600; font-size: 14px; cursor: pointer;
  transition: background .15s ease, transform .12s ease;
}
.klludil-viewer-btn:hover { background: #000; transform: translateY(-1px); color: #fff; }
.klludil-viewer-ico { font-size: 17px; line-height: 1; }

/* Modale visionneuse */
.klludil-modal {
  position: fixed; inset: 0; z-index: 100000;
  background: rgba(0, 0, 0, .82);
  display: flex; align-items: center; justify-content: center;
  padding: 2vh 2vw;
}
.klludil-modal-box {
  width: min(1100px, 96vw); height: 92vh;
  background: #fff; border-radius: 10px; overflow: hidden;
  display: flex; flex-direction: column;
  box-shadow: 0 24px 80px rgba(0, 0, 0, .45);
}
.klludil-modal-bar {
  display: flex; align-items: center; gap: 14px;
  padding: 10px 14px; border-bottom: 1px solid #e8e8e8; background: #fafafa;
}
.klludil-modal-title { font-weight: 700; font-size: 14px; margin-right: auto; }
.klludil-modal-ext { font-size: 12.5px; text-decoration: underline; color: #555; }
.klludil-modal-ext:hover { color: #000; }
.klludil-modal-close {
  border: 0; background: #eee; border-radius: 6px;
  width: 34px; height: 34px; font-size: 20px; line-height: 1; cursor: pointer;
}
.klludil-modal-close:hover { background: #2b2b2b; color: #fff; }
.klludil-modal-frame { flex: 1; width: 100%; border: 0; }

body.klludil-modal-open { overflow: hidden; }

@media (max-width: 767px) {
  .klludil-viewer-btn { width: 100%; justify-content: center; }
  .klludil-modal { padding: 0; }
  .klludil-modal-box { width: 100vw; height: 100vh; border-radius: 0; }
}