/* =============================================================================
   SMACL E-Learning — Preview card & modal
   ============================================================================= */

/* ── Card ─────────────────────────────────────────────────────────────────── */
.elearning-preview-card {
  width: 560px;
  max-width: 100%;
  margin-left: auto;
  margin-right: auto;
}

/* ── Thumbnail ────────────────────────────────────────────────────────────── */
.elearning-preview-thumbnail {
  display: block;
  cursor: pointer;
  width: 100%;
  background: #1a1a2e;
  overflow: hidden;
}

.elearning-thumbnail-img {
  display: block;
  width: 560px;
  max-width: 100%;
  height: 315px;
  object-fit: cover;
  transition: transform 0.3s ease, opacity 0.3s ease;
}

.elearning-preview-thumbnail:hover .elearning-thumbnail-img,
.elearning-preview-thumbnail:focus .elearning-thumbnail-img {
  transform: scale(1.03);
  opacity: 0.85;
}

/* Placeholder quand pas d'image */
.elearning-thumbnail-placeholder {
  height: 220px;
  background-color: #e9ecef;
}

.elearning-module-icon {
  font-size: 4rem;
  opacity: 0.4;
}

/* ── Overlay play ─────────────────────────────────────────────────────────── */
.elearning-overlay {
  background: rgba(0, 0, 0, 0);
  transition: background 0.3s ease;
  pointer-events: none;
}

.elearning-preview-thumbnail:hover .elearning-overlay,
.elearning-preview-thumbnail:focus .elearning-overlay {
  background: rgba(0, 0, 0, 0.35);
}

.elearning-play-btn {
  width: 64px;
  height: 64px;
  background: rgba(255, 255, 255, 0.92);
  color: #1a1a2e;
  opacity: 0;
  transform: scale(0.8);
  transition: opacity 0.3s ease, transform 0.3s ease;
}

.elearning-preview-thumbnail:hover .elearning-play-btn,
.elearning-preview-thumbnail:focus .elearning-play-btn {
  opacity: 1;
  transform: scale(1);
}

/* ── Modal fullscreen ─────────────────────────────────────────────────────── */

/* Passe au-dessus d'Axeptio (z-index max) */
.elearning-modal.show {
  z-index: 2147483647;
}
.elearning-modal.show + .modal-backdrop {
  z-index: 2147483646;
}

.elearning-modal .modal-header {
  background: rgb(250, 250, 250);
  border-bottom: 1px solid #dee2e6;
}

.elearning-modal .modal-header .btn-close {
  filter: none;
}

.elearning-modal .modal-body {
  overflow: hidden;
  padding: 0;
}

.elearning-iframe {
  display: block;
  width: 100%;
  height: 100%;
  border: none;
}