/* ============================================================
   TutoVideoPlayer — Intégration Épurée MarocPsy
   - Couleurs claires médicales
   - Zéro arrondi (border-radius: 0)
   - Harmonisation avec le thème MarocPsy
   ============================================================ */

:root {
    --course-accent: var(--profile-accent, var(--pro-teal, #143767));
    --course-accent-dark: var(--pro-teal-hover, #0f294d);
    --course-accent-light: var(--profile-soft, var(--pro-teal-light, #eaeef4));
}

.tuto-video {
    width: 100%;
    margin: 0.85rem 0 1.25rem;
}

.tuto-video-wide,
.psy-profile-video-panel .tuto-video-wide,
.psy-profile-panel .tuto-video-wide {
    width: 100%;
    max-width: 100%;
    margin-inline: 0;
}

/* ── Cadre vidéo (Sans arrondi, bordure fine claire) ── */
.tuto-video-frame {
    position: relative;
    width: 100%;
    border: 1px solid #dce1e7;
    border-radius: 0;
    background: #ffffff;
    box-shadow: 0 1px 3px rgba(15, 23, 42, 0.05);
    overflow: hidden;
}

.tuto-video-frame.has-player {
    aspect-ratio: auto;
}

.tuto-video-frame.is-secure {
    overflow: hidden;
    border: 1px solid #dce1e7;
    border-radius: 0;
    background: #ffffff;
}

/* ── Direction bilingue ── */
.tuto-secure-video.svp-wrapper {
    direction: ltr;
}
[dir="rtl"] .tuto-secure-video.svp-wrapper,
html[dir="rtl"] .tuto-secure-video.svp-wrapper,
.tuto-secure-video[data-video-language="ar"] {
    direction: rtl;
}

/* ── Boîte du lecteur sécurisé ── */
.tuto-secure-video .svp-player-box {
    border-radius: 0;
    border: none;
    background: #ffffff;
    box-shadow: none;
}

.tuto-secure-video .svp-player-box:hover {
    box-shadow: none;
}

/* ── Titre supérieur clair ── */
.tuto-secure-video .svp-title {
    min-height: 48px;
    padding: .75rem 1rem;
    color: #142a49;
    background: #f3f5f8;
    border-color: #dce1e7;
    border-radius: 0;
    font-size: .88rem;
    font-weight: 700;
}

.tuto-secure-video .svp-title i,
.tuto-secure-video .svp-set-label i,
.tuto-secure-video .svp-set-header {
    color: var(--course-accent);
}

/* ── Boutons de lecture (Carrés, sans arrondi) ── */
.tuto-secure-video .svp-play-overlay-btn,
.tuto-secure-video .svp-btn-play {
    border-radius: 0;
    background: var(--course-accent);
    color: #ffffff;
    box-shadow: 0 2px 8px rgba(20,55,103, 0.28);
}

.tuto-secure-video .svp-play-overlay-btn:hover,
.tuto-secure-video .svp-btn-play:hover {
    background: var(--course-accent-dark);
    color: #ffffff;
}

/* ── Barre de progression sobre ── */
.tuto-secure-video .svp-progress-wrap {
    background: #f3f5f8;
    border-top: 1px solid #dce1e7;
    border-radius: 0;
}

.tuto-secure-video .svp-progress-track {
    background: #dce1e7;
    border-radius: 0;
}

.tuto-secure-video .svp-progress-buf {
    background: #c5ccd6;
    border-radius: 0;
}

.tuto-secure-video .svp-progress-fill {
    background: var(--course-accent);
    border-radius: 0;
}

.tuto-secure-video .svp-progress-thumb,
.tuto-secure-video .svp-vol-slider::-webkit-slider-thumb {
    border-radius: 0;
    background: var(--course-accent);
    box-shadow: 0 1px 3px rgba(15, 23, 42, 0.3);
}

.tuto-secure-video .svp-controls {
    background: #ffffff;
    border-top: 1px solid #dce1e7;
    border-radius: 0;
}

/* ── Boutons de commande légers ── */
.tuto-secure-video .svp-btn {
    border-radius: 0;
    border-color: #c5ccd6;
    background: #ffffff;
    color: #2c384a;
}

.tuto-secure-video .svp-btn:hover,
.tuto-secure-video .svp-btn.svp-btn-on {
    border-color: var(--course-accent);
    background: var(--course-accent-light);
    color: var(--course-accent);
}

.tuto-secure-video .svp-chip {
    border-radius: 0;
    border-color: #c5ccd6;
    background: #f3f5f8;
    color: #2c384a;
}

.tuto-secure-video .svp-chip:hover {
    border-color: var(--course-accent);
    background: var(--course-accent-light);
    color: var(--course-accent);
}

.tuto-secure-video .svp-chip-on {
    border-radius: 0 !important;
    border-color: var(--course-accent) !important;
    background: var(--course-accent) !important;
    color: #ffffff !important;
    box-shadow: none !important;
}

.tuto-secure-video .svp-settings-panel {
    left: 0;
    right: auto;
    direction: ltr;
    text-align: left;
    border-radius: 0;
    border-color: #c5ccd6;
    background: #ffffff;
    box-shadow: 0 10px 28px rgba(15, 23, 42, 0.12);
}

[dir="rtl"] .tuto-secure-video .svp-settings-panel,
html[dir="rtl"] .tuto-secure-video .svp-settings-panel,
.tuto-secure-video[data-video-language="ar"] .svp-settings-panel {
    right: 0;
    left: auto;
    direction: rtl;
    text-align: right;
}

/* ── Modal Audio / Vidéo (Sans arrondi) ── */
.tuto-secure-video .svp-mode-dialog {
    border-radius: 0;
    border-color: #dce1e7;
    background: #ffffff;
    color: #142236;
    box-shadow: 0 16px 45px rgba(15, 23, 42, 0.18);
}

.tuto-secure-video .svp-mode-close {
    border-radius: 0;
    background: #f3f5f8;
    color: #5a6471;
}

.tuto-secure-video .svp-mode-dialog-icon,
.tuto-secure-video .svp-mode-option > i {
    border-radius: 0;
    background: var(--course-accent-light);
    color: var(--course-accent);
}

.tuto-secure-video .svp-mode-option {
    border-radius: 0;
    border-color: #c5ccd6;
    background: #ffffff;
    color: #142236;
}

.tuto-secure-video .svp-mode-option.is-primary {
    border-color: var(--course-accent);
    background: var(--course-accent-light);
}

.tuto-secure-video .svp-mode-option:hover {
    border-color: var(--course-accent);
    background: var(--course-accent-light);
}

/* ── En-tête et écran pour vidéos natives (Vimeo / MP4) ── */
.tuto-video-native-heading {
    display: flex;
    align-items: center;
    gap: .65rem;
    min-height: 48px;
    padding: .75rem 1rem;
    background: #f3f5f8;
    color: #142a49;
    border-bottom: 1px solid #dce1e7;
    border-radius: 0;
}

.tuto-video-native-heading i { color: var(--course-accent); }
.tuto-video-native-heading h2 { margin: 0; color: inherit; font-size: .88rem; font-weight: 700; }
.tuto-video-native-screen { width: 100%; aspect-ratio: 16 / 9; background: #000; border-radius: 0; }
/* Keep the 300% YouTube masking height. A Short uses a centered 9:16 picture
   inside the 16:9 black screen, instead of enlarging and cropping the picture. */
.tuto-secure-video[data-video-format="portrait"] .svp-yt-frame,
.tuto-secure-video[data-video-format="portrait"] .svp-screen-area iframe {
    left: 50%;
    width: 31.640625% !important;
    transform: translate(-50%, -50%);
}
.tuto-video-native-screen iframe,
.tuto-video-native-screen video { display: block; width: 100%; height: 100%; border: 0; border-radius: 0; object-fit: contain; }
.tuto-video-noscript { margin: 0; padding: 1.5rem; background: #f3f5f8; color: #142236; border-radius: 0; text-align: center; }

/* ── Remplacement global pour garantir aucun arrondi ── */
.tuto-video *,
.tuto-secure-video * {
    border-radius: 0 !important;
}
.tuto-video .svp-spinner,
.tuto-secure-video .svp-spinner {
    border-radius: 50% !important; /* Le spinner de chargement reste circulaire pour tourner */
}

@media (max-width: 760px) {
    .tuto-video-frame.is-secure,
    .tuto-secure-video .svp-player-box {
        border-radius: 0 !important;
    }
}

@media (max-width: 600px) {
    .tuto-secure-video .svp-settings-panel {
        left: -38px;
        right: auto;
    }
    [dir="rtl"] .tuto-secure-video .svp-settings-panel,
    html[dir="rtl"] .tuto-secure-video .svp-settings-panel,
    .tuto-secure-video[data-video-language="ar"] .svp-settings-panel {
        right: -38px;
        left: auto;
    }
}