/*--------------------------------------------------------------
This is your custom stylesheet.

Add your own styles here to make theme updates easier.
To override any styles from other stylesheets, simply copy them into here and edit away.

Make sure to respect the media queries! Otherwise you may
accidentally add desktop styles to the mobile layout.
https://www.w3schools.com/css/css_rwd_mediaqueries.asp
--------------------------------------------------------------*/

/* =====================================
   YouTube-like Course (Elementor)
   Classes used in templates: ytc-*
   ===================================== */

/* Sections */
.ytc-header { margin-bottom: 24px; }
.ytc-continue { margin-bottom: 32px; }
.ytc-playlists { margin-top: 8px; margin-bottom: 40px; }
.ytc-videos { margin-top: 8px; }

/* Cards - base */
.ytc-card {
  display: block;
  text-decoration: none;
  color: inherit;
}
.ytc-card .ytc-thumb {
  position: relative;
  width: 100%;
  aspect-ratio: 16 / 9;
  background: #111;
  overflow: hidden;
  border-radius: 10px;
}
.ytc-card .ytc-thumb img { width: 100%; height: 100%; object-fit: cover; display: block; }

/* Hover elevation */
.ytc-card { transition: transform .12s ease, box-shadow .12s ease; }
.ytc-card:hover { transform: translateY(-2px); box-shadow: 0 6px 20px rgba(0,0,0,.12); }

/* Title clamp (2 lignes) */
.ytc-title {
  margin-top: 10px;
  font-weight: 600;
  line-height: 1.3;
  display: -webkit-box;
  line-clamp: 2;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

/* Badges (durée, lock, gratuit) */
.ytc-badge {
  position: absolute;
  z-index: 2;
  top: 8px;
  padding: 4px 6px;
  line-height: 1;
  font-size: 12px;
  border-radius: 4px;
  color: #fff;
  background: rgba(0,0,0,.65);
}
.ytc-duration { right: 8px; }
.ytc-lock { left: 8px; background: #d93025; }
.ytc-free { left: 8px; background: #137333; }

/* Simple progress bar under title (optional) */
.ytc-progress {
  height: 4px;
  border-radius: 999px;
  background: #e5e7eb;
  margin-top: 8px;
  overflow: hidden;
}
.ytc-progress > span {
  display: block;
  height: 100%;
  background: #1a73e8;
  width: var(--ytc-progress, 0%);
}

/* Responsive helpers (Elementor grid spacing alignment) */
@media (min-width: 768px) {
  .ytc-videos .elementor-widget-loop-grid .elementor-grid,
  .ytc-playlists .elementor-widget-loop-grid .elementor-grid {
    gap: 18px;
  }
}

@media (max-width: 767px) {
  .ytc-card .ytc-title { font-size: 15px; }
}