/* Video Shortcode Projets - Styles */

/* Container principal */
.video-projet-container {
    width: 100%;
    margin: 0 auto;
    position: relative;
    overflow: hidden;
}

/* Wrapper pour maintenir le ratio d'aspect */
.video-projet-wrapper {
    position: relative;
    width: 100%;
    background-color: #000;
    display: flex;
    align-items: center;
    justify-content: center;
}

/* Format horizontal 16:9 */
.video-horizontal .video-projet-wrapper {
    aspect-ratio: 16 / 9;
}

/* Format vertical 9:16 */
.video-vertical .video-projet-wrapper {
    max-width: 600px; /* Largeur maximale pour les vidéos verticales */
    margin: 0 auto;
    aspect-ratio: 9 / 16;
}

/* Élément vidéo */
.video-projet {
    width: 100%;
    height: 100%;
    object-fit: contain;
    display: block;
}

/* Supprimer tous les contrôles et interactions */
.video-projet::-webkit-media-controls {
    display: none !important;
    opacity: 0 !important;
    visibility: hidden !important;
}

.video-projet::-webkit-media-controls-panel {
    display: none !important;
    opacity: 0 !important;
    visibility: hidden !important;
}

.video-projet::-webkit-media-controls-play-button {
    display: none !important;
    opacity: 0 !important;
    visibility: hidden !important;
}

.video-projet::-webkit-media-controls-start-playback-button {
    display: none !important;
    opacity: 0 !important;
    visibility: hidden !important;
}

.video-projet::-webkit-media-controls-enclosure {
    display: none !important;
}

.video-projet::-webkit-media-controls-overlay-play-button {
    display: none !important;
}

.video-projet::-webkit-media-controls-timeline {
    display: none !important;
}

.video-projet::-webkit-media-controls-current-time-display {
    display: none !important;
}

.video-projet::-webkit-media-controls-time-remaining-display {
    display: none !important;
}

.video-projet::-webkit-media-controls-mute-button {
    display: none !important;
}

.video-projet::-webkit-media-controls-volume-slider {
    display: none !important;
}

.video-projet::-webkit-media-controls-fullscreen-button {
    display: none !important;
}

/* Supprimer les contrôles pour les autres navigateurs */
.video-projet::-moz-media-controls {
    display: none !important;
}

.video-projet::-ms-media-controls {
    display: none !important;
}

/* Désactiver le clic droit et les interactions sur desktop uniquement */
.video-projet {
    pointer-events: none;
}

/* Réactiver les interactions sur mobile pour les contrôles */
.mobile-device .video-projet {
    pointer-events: auto;
}

/* Afficher les contrôles sur mobile */
.mobile-device .video-projet::-webkit-media-controls {
    display: flex !important;
    opacity: 1 !important;
    visibility: visible !important;
}

.mobile-device .video-projet::-webkit-media-controls-panel {
    display: flex !important;
    opacity: 1 !important;
    visibility: visible !important;
}

.mobile-device .video-projet::-webkit-media-controls-play-button {
    display: block !important;
    opacity: 1 !important;
    visibility: visible !important;
}

.mobile-device .video-projet::-webkit-media-controls-start-playback-button {
    display: block !important;
    opacity: 1 !important;
    visibility: visible !important;
}

/* Réactiver les événements pour le container si nécessaire pour d'autres interactions */
.video-projet-container {
    pointer-events: auto;
}

/* Supprimer le curseur pointer sur la vidéo */
.video-projet {
    cursor: default;
}

/* Message d'erreur */
.video-projet-error {
    padding: 20px;
    background-color: #fff3cd;
    border: 1px solid #ffc107;
    border-radius: 4px;
    color: #856404;
    text-align: center;
    margin: 20px 0;
}

/* Responsive - Tablettes */
@media screen and (max-width: 768px) {
    .video-vertical .video-projet-wrapper {
        max-width: 100%;
    }
}

/* Responsive - Mobiles */
@media screen and (max-width: 480px) {
    .video-horizontal .video-projet-wrapper {
        aspect-ratio: 16 / 9;
    }
    
    .video-vertical .video-projet-wrapper {
        max-width: 100%;
        aspect-ratio: 9 / 16;
    }
}

/* Fallback pour les navigateurs ne supportant pas aspect-ratio */
@supports not (aspect-ratio: 16 / 9) {
    .video-horizontal .video-projet-wrapper {
        padding-bottom: 56.25%; /* 9/16 = 0.5625 */
    }
    
    .video-vertical .video-projet-wrapper {
        padding-bottom: 177.78%; /* 16/9 = 1.7778 */
    }
    
    @supports not (aspect-ratio: 16 / 9) {
        .video-projet {
            position: absolute;
            top: 0;
            left: 0;
        }
    }
}

/* Support pour les thèmes Divi */
.et_pb_module .video-projet-container {
    margin-bottom: 0;
}

.et_pb_video_box .video-projet-container {
    width: 100%;
}