/* =========================================================
   RESPONSIVE MULTI-ECRANS
   ========================================================= */

/* =========================================================
   Z-INDEX ESPECES / MODALES
   ========================================================= */

.player-container:has(.espece-visible){
    z-index:3000001;
}

.player-container:has(.modal-visible){
    z-index:3000001;
}

.player-container:has(.modal-visible) .modal-fiche.modal-visible{
    z-index:3000010;
}

.player-container:has(.modal-visible) .modal-overlay{
    z-index:1;
}

.player-container:has(.modal-visible) .modal-content{
    z-index:2;
}

.espece-nom,
.espece-infos{
    position:relative;
    z-index:3000003;
}

/* =========================================================
   DESKTOP / MAC / PC
   ========================================================= */

@media (min-width:1025px){

    .player-container{
        /*min-height:calc(100dvh - 90px);*/
    }

    .video-hint{
        font-size:18px;
        line-height:1.3;
        margin:8px 0;
        opacity:.75;
    }

    .video-launch-title{
        font-size:clamp(24px,3vw,60px);
        left:40px;
        right:40px;
        bottom:40px;
        text-align:right;
    }

    .espece-nom{
        font-size:28px;
        padding:0;
        border-radius:0;
        max-width:85%;
        white-space:normal;
    }

    .espece-ligne-1,
    .espece-ligne-2{
        font-size:22px;
    }

    .qcm-box{
        width:min(750px,80vw);
    }
}

/* =========================================================
   IIYAMA 43" / TV 4K
   ========================================================= */

@media (min-width:1800px){
    .video-launch-btn{
        width:100px;
        height:100px;
    }

    .video-launch-btn .material-icons{
        font-size:64px;
    }
    .video-hint{
        font-size:24px;
        margin:10px 0;
    }

    .controls-zone{
        min-height:130px;
    }

    .progress-bg{
        height:14px;
    }

    .video-launch-title{
        font-size:clamp(40px,2vw,56px);
        left:60px;
        right:60px;
        bottom:60px;
    }

    .espece-nom{
        font-size:34px;
        padding:0;
        border-radius:0;
    }

    .espece-ligne-1,
    .espece-ligne-2{
        font-size:28px;
    }

    .qcm-box{
        width:min(750px,70vw);
    }
}

/* =========================================================
   TABLETTES
   ========================================================= */

@media (min-width:768px) and (max-width:1024px){

    .video-hint{
        font-size:14px;
        margin:6px 0;
    }

    .controls-zone{
        min-height:90px;
    }

    .video-launch-title{
        left:25px;
        right:25px;
        bottom:25px;
        font-size:clamp(22px,4vw,38px);
        text-align:right;
    }

    .espece-nom{
        font-size:22px;
        padding:0;
        max-width:90vw;
        white-space:normal;
    }

    .espece-ligne-1,
    .espece-ligne-2{
        font-size:18px;
    }
    .modal-content{
        width:90vw;
        height:90vh;
        border-radius:16px;
    }
    .qcm-box{
        width:95vw;
        max-width:none;
        bottom:10px;
    }
}
/* =========================================================
   TABLETTE PORTRAIT
   ========================================================= */
@media (min-width:768px) and (max-width:1024px) and (orientation:portrait){

    .qcm-box{
        width:80vw;
        max-width:700px;
        bottom:-70px;
    }

    .qcm-answer{
        font-size:20px;
        min-height:48px;
    }

    .qcm-score{
        font-size:18px;
    }

    .qcm-question{
        font-size:18px;
    }

    .qcm-next{
        font-size:18px;
    }
}

/* =========================================================
   TABLETTE PAYSAGE
   ========================================================= */
@media (min-width:768px) and (max-width:1366px) and (orientation:landscape){

    .qcm-box{
        bottom:5px;
    }

    .modal-content{
        width:95vw;
        height:88vh;
        max-width:none;
    }
}
/* =========================================================
   SMARTPHONES
   ========================================================= */

@media (max-width:767px){
    .video-launch-btn{
        width:70px;
        height:70px;
    }

    .video-launch-btn .material-icons{
        font-size:44px;
    }
    .video-hint{
        font-size:12px;
        line-height:1.3;
        padding:0 10px;
        margin:4px 0;
    }

    .controls-zone{
        min-height:60px;
    }

    .video-launch-title{
        left:15px;
        right:15px;
        bottom:15px;
        font-size:clamp(16px,5vw,24px);
        line-height:1.2;
        text-align:right;
    }

    .espece-nom{
        font-size:16px;
        padding:0;
        max-width:88vw;
        white-space:normal;
    }

    .espece-ligne-1,
    .espece-ligne-2{
        font-size:13px;
    }

    .qcm-box{
        width:96vw;
        max-width:none;
        bottom:5px;
        padding:12px;
    }

    .video-click-layer,
    .video-overlay-modal{
        top:0;
    }
    .quality-info,
    #fullscreenBtn,
    #volDownBtn,
    #volUpBtn{
        display:none;
    }
}
/* =========================================================
   SMARTPHONE PORTRAIT
   ========================================================= */
@media (max-width:767px) and (orientation:portrait){

    .qcm-box{
        bottom:auto;
        top:calc(100% - 90px);
    }
}
/* =========================================================
   SMARTPHONE PAYSAGE
   ========================================================= */

@media (max-width:950px) and (orientation:landscape){
    #fullscreenBtn,
    #volDownBtn,
    #volUpBtn{
        display:none;
    }
    .qcm-box{
        width:95vw;
        bottom:10px !important;
        top:auto !important;
    }

    .qcm-answer{
        min-height:42px;
        font-size:16px;
    }

    .qcm-score{
        font-size:16px;
    }

    .qcm-question{
        font-size:16px;
    }

    .qcm-next{
        height:38px;
        font-size:14px;
    }

    .qcm-close{
        width:40px;
        height:40px;
        font-size:18px;
    }

    .qcm-bottom{
        grid-template-columns:
            80px
            1fr
            110px
            40px;
        gap:8px;
    }
}
/* =========================================================
   PLEIN ECRAN
   ========================================================= */

#videoPage:fullscreen{
    width:100vw;
    height:100vh;
    overflow:auto;
    background:#050d14;
}

#videoPage:fullscreen .modal-fiche.modal-visible{
    position:fixed;
    inset:0;
    z-index:2147483647;
}

/* =========================================================
   QCM PLEIN ECRAN
   ========================================================= */
.player-container:fullscreen .qcm-box,
.player-container:-webkit-full-screen .qcm-box,
#videoPage:fullscreen .qcm-box,
#videoPage:-webkit-full-screen .qcm-box{
    bottom:10px !important;
}