   <style>
   /* Styles pour le carrousel vidéo */
   
   .video-carousel-container {
       position: relative;
       width: 100%;
       max-width: 1400px;
       margin: 0 auto;
       padding: 20px 50px;
       overflow: hidden;
   }
   
   .video-carousel-wrapper {
       overflow: hidden;
       margin: 0 -10px;
   }
   
   .video-carousel {
       display: flex;
       transition: transform 0.5s ease;
       gap: 20px;
       padding: 10px;
   }
   
   .video-carousel-item {
       flex: 0 0 calc(25% - 15px);
       min-width: 0;
       background: white;
       border-radius: 12px;
       overflow: hidden;
       box-shadow: 0 4px 15px rgba(0, 0, 0, 0.08);
       transition: all 0.3s ease;
       border: 1px solid #eaeaea;
       position: relative;
       cursor: pointer;
   }
   
   .video-carousel-item:hover {
       transform: translateY(-5px);
       box-shadow: 0 8px 25px rgba(0, 0, 0, 0.15);
       border-color: #4a6cf7;
   }
   
   .video-carousel-item.playing {
       border-color: #4a6cf7;
       box-shadow: 0 8px 25px rgba(74, 108, 247, 0.3);
   }
   
   .video-thumbnail {
       position: relative;
       width: 100%;
       height: 200px;
       overflow: hidden;
   }
   
   .video-thumbnail img {
       width: 100%;
       height: 100%;
       object-fit: cover;
       transition: transform 0.5s ease;
   }
   
   .video-carousel-item:hover .video-thumbnail img {
       transform: scale(1.05);
   }
   
   .play-overlay {
       position: absolute;
       top: 0;
       left: 0;
       right: 0;
       bottom: 0;
       background: rgba(74, 108, 247, 0.9);
       display: flex;
       align-items: center;
       justify-content: center;
       opacity: 0;
       transition: opacity 0.3s ease;
   }
   
   .video-carousel-item:hover .play-overlay {
       opacity: 1;
   }
   
   .play-overlay i {
       color: white;
       text-shadow: 0 2px 10px rgba(0, 0, 0, 0.3);
   }
   
   .video-language {
       position: absolute;
       top: 12px;
       left: 12px;
       background: #4a6cf7;
       color: white;
       font-size: 12px;
       font-weight: bold;
       padding: 4px 10px;
       border-radius: 4px;
       z-index: 2;
   }
   
   .video-duration {
       position: absolute;
       bottom: 12px;
       right: 12px;
       background: rgba(0, 0, 0, 0.8);
       color: white;
       font-size: 12px;
       padding: 4px 10px;
       border-radius: 4px;
       z-index: 2;
   }
   
   .video-info {
       padding: 20px;
   }
   
   .video-title {
       font-size: 18px;
       font-weight: 600;
       color: #333;
       margin-bottom: 8px;
       line-height: 1.4;
   }
   
   .video-meta {
       display: flex;
       justify-content: space-between;
       align-items: center;
   }
   
   .video-date {
       font-size: 14px;
       color: #666;
   }
   /* Player vidéo intégré */
   
   .video-player {
       position: absolute;
       top: 0;
       left: 0;
       width: 100%;
       height: 100%;
       background: #000;
       display: none;
       z-index: 10;
   }
   
   .video-player iframe {
       width: 100%;
       height: 100%;
       border: none;
   }
   
   .video-carousel-item.playing .video-thumbnail,
   .video-carousel-item.playing .video-info {
       display: none;
   }
   
   .video-carousel-item.playing .video-player {
       display: block;
   }
   /* Contrôles du carrousel */
   
   .carousel-controls {
       position: absolute;
       top: 50%;
       left: 0;
       right: 0;
       transform: translateY(-50%);
       display: flex;
       justify-content: space-between;
       pointer-events: none;
       z-index: 5;
   }
   
   .carousel-btn {
       background: white;
       border: none;
       width: 50px;
       height: 50px;
       border-radius: 50%;
       display: flex;
       align-items: center;
       justify-content: center;
       cursor: pointer;
       box-shadow: 0 4px 15px rgba(0, 0, 0, 0.2);
       transition: all 0.3s ease;
       pointer-events: all;
   }
   
   .carousel-btn:hover {
       background: #4a6cf7;
       color: white;
       transform: scale(1.1);
   }
   
   .carousel-btn:disabled {
       opacity: 0.5;
       cursor: not-allowed;
       transform: none;
   }
   
   .carousel-btn:disabled:hover {
       background: white;
       color: inherit;
   }
   /* Indicateurs */
   
   .carousel-indicators {
       display: flex;
       justify-content: center;
       gap: 8px;
       margin-top: 20px;
   }
   
   .indicator {
       width: 10px;
       height: 10px;
       border-radius: 50%;
       background: #ddd;
       cursor: pointer;
       transition: all 0.3s ease;
   }
   
   .indicator.active {
       background: #4a6cf7;
       transform: scale(1.2);
   }
   /* Empty state */
   
   .empty-state {
       padding: 40px 20px;
       background: #f8f9fa;
       border-radius: 12px;
       border: 2px dashed #dee2e6;
   }
   /* Styles responsives */
   
   @media (max-width: 1200px) {
       .video-carousel-item {
           flex: 0 0 calc(33.333% - 13.33px);
       }
   }
   
   @media (max-width: 992px) {
       .video-carousel-item {
           flex: 0 0 calc(50% - 10px);
       }
       .video-carousel-container {
           padding: 20px 40px;
       }
   }
   
   @media (max-width: 768px) {
       .video-carousel-item {
           flex: 0 0 calc(100% - 0px);
       }
       .video-carousel-container {
           padding: 20px 30px;
       }
       .carousel-btn {
           width: 40px;
           height: 40px;
       }
   }
   
   @media (max-width: 576px) {
       .video-thumbnail {
           height: 180px;
       }
       .video-info {
           padding: 15px;
       }
       .video-title {
           font-size: 16px;
       }
       .video-carousel-container {
           padding: 20px 10px;
       }
       .filters-container .row {
           flex-direction: column;
       }
       .filters-container .col-lg-8,
       .filters-container .col-lg-4 {
           width: 100%;
       }
   }
   
   </style>