body {background-color: black;}
.sectionVideo {
    color: #777;
    text-align: center;
    width:100%;
    margin-left:auto;
    margin-right:auto;
    padding-bottom: 7vh;
    background-color: #000;
    position:relative;
}
.complet{
    background-color: #000000;
}
p {
  font-size: 60px;
  color: #777;
}

* { margin: 0; padding: 0; }
#clicMOI{
    width:10%;
}

    #conteneurqrCode {
        background-color: #fff0;
        width: 99.5%;
        height: 20%;
        position: absolute;
        z-index: 1;
        bottom: .5em;
        right: .6em;
    }
    #qrcode {
        background-image: url("");
        width: 100%;
        height: 100%;
        opacity: 1;
        filter: drop-shadow(0.35rem 0.35rem 0.4rem rgba(0, 0, 0, 0.5));
        background-size: contain;
        background-repeat: no-repeat;
        background-size: contain;
        background-position: right;
    }
/**********  La barre de progression **********/
    #barreDeProgression {
        display: none;
        margin-left: auto;
        float: none;
        clear: both;
        max-width: 90%;
        position: relative;
        height: 0;
        margin-right: auto;
        margin-top: 1.8vh;
        background-color: #000000;
    }
    #barreDeProgression img{
        position:absolute;
        width: 4vh;
        cursor: pointer;
    }
    #platine{
        margin-bottom: -4vh;
        background-color: #000000;
    }
    #slider{
        margin-top::3vh;
        background-color: #000000;
    }
    .infos{
        display: flex;
        text-align: start;
        color: #454545;
        font-size: 1.2vh;
        background-color: #000000;
    }
    .donneesLecteur {
        padding-left:.5vw;
        background-color: #000000;
    }
    #lectureVideo,
    #pauseVideo{
        cursor: pointer;
    }
    #pleinEcran,
    #fenetre{
        left:4vh;
        cursor: pointer;
    }
    #aide{
        position:absolute;
        left: 8vh;
        cursor: pointer;
    }
    #volumePlus{
        right: 5vh;
        cursor: pointer;
    }
    #volumeMoins{
        right:0vh;
        cursor: pointer;
    }
    #progression{
        display:none;
        background-color: transparent;
        height:3vh;
        width:100%
    }
/********** Range Input Styles **********/
    /*Range Reset*/
    input[type="range"] {
       -webkit-appearance: none;
        appearance: none;
        background: transparent;
        cursor: pointer;
        width: 15rem;
    }

    /* Removes default focus */
    input[type="range"]:focus {
      outline: none;
    }

    /***** Chrome, Safari, Opera and Edge Chromium styles *****/
    /* slider track */
    input[type="range"]::-webkit-slider-runnable-track {
       background-color: #053a5f;
       border-radius: 0.5rem;
       height: 0.5rem;  
    }

    /* slider thumb */
    input[type="range"]::-webkit-slider-thumb {
      -webkit-appearance: none; /* Override default look */
       appearance: none;
       margin-top: -6px; /* Centers thumb on the track */

       /*custom styles*/
        border-radius: 100%;
        background-color: #5cd5eb;
        height: 2vh;
        width: 2vh;
    }

    input[type="range"]:focus::-webkit-slider-thumb {   
      border: 1px solid #053a5f;
      outline: 3px solid #053a5f;
      outline-offset: 0.125rem; 
    }

    /******** Firefox styles ********/
    /* slider track */
    input[type="range"]::-moz-range-track {
       background-color: #053a5f;
       border-radius: 0.5rem;
       height: 0.5rem;
    }

    /* slider thumb */
    input[type="range"]::-moz-range-thumb {
        border: none;
        border-radius: 100%;
        background-color: #5cd5eb;
        height: 2vh;
        width: 2vh;
    }

    input[type="range"]:focus::-moz-range-thumb {
      border: 1px solid #053a5f;
      outline: 3px solid #053a5f;
      outline-offset: 0.125rem; 
    }
    .custom-range {
      &::-webkit-slider-thumb {
        background-clip: padding-box;
        border: 0.4rem solid rgba(0, 255, 0, 0.5);
        transform: scale(4);
      }
      &::-moz-range-thumb {
        background-clip: padding-box;
        border: 0.4rem solid rgba(0, 255, 0, 0.5);
        box-sizing: border-box;
        transform: scale(4);
      }
    }
/************************** la fenetre modale **********/
	.modaleOverlayYT {
            float: none;
            clear: both;
            position: absolute;
            top: 0;
            left: 0;
            bottom: 0;
            right: 0;
            z-index:2;
            cursor: pointer;
		}
        .conteneurVideo.paused::after {
              content: "En lecture, sous la vidéo, est inscrit le nom de l'espèce à l'écran.\A Pour en savoir plus, cliquez sur la vidéo ou le nom.";
              white-space: pre-wrap;
              position: absolute;
              top: 0;
              left: 0;
              bottom: 0;
              right: 0;
              cursor: pointer;
              background-color: black;
              background-repeat: no-repeat;
              background-position: center;
              background-size: 10vh;
            background-image: url(data:image/svg+xml;utf8;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIGhlaWdodD0iODAwIiB3aWR0aD0iMTIwMCIgdmlld0JveD0iLTM1LjIwMDA1IC00MS4zMzMyNSAzMDUuMDY3MSAyNDcuOTk5NSI+PHBhdGggZD0iTTIyOS43NjMgMjUuODE3Yy0yLjY5OS0xMC4xNjItMTAuNjUtMTguMTY1LTIwLjc0OC0yMC44ODFDMTkwLjcxNiAwIDExNy4zMzMgMCAxMTcuMzMzIDBTNDMuOTUxIDAgMjUuNjUxIDQuOTM2QzE1LjU1MyA3LjY1MiA3LjYgMTUuNjU1IDQuOTAzIDI1LjgxNyAwIDQ0LjIzNiAwIDgyLjY2NyAwIDgyLjY2N3MwIDM4LjQyOSA0LjkwMyA1Ni44NUM3LjYgMTQ5LjY4IDE1LjU1MyAxNTcuNjgxIDI1LjY1IDE2MC40YzE4LjMgNC45MzQgOTEuNjgyIDQuOTM0IDkxLjY4MiA0LjkzNHM3My4zODMgMCA5MS42ODItNC45MzRjMTAuMDk4LTIuNzE4IDE4LjA0OS0xMC43MiAyMC43NDgtMjAuODgyIDQuOTA0LTE4LjQyMSA0LjkwNC01Ni44NSA0LjkwNC01Ni44NXMwLTM4LjQzMS00LjkwNC01Ni44NSIgZmlsbD0icmVkIi8+PHBhdGggZD0iTTkzLjMzMyAxMTcuNTU5bDYxLjMzMy0zNC44OS02MS4zMzMtMzQuODk0eiIgZmlsbD0iI2ZmZiIvPjwvc3ZnPg==);
              font-size: 1.5vh;
              padding-top: .5vh;
              color: white;
              font-style: italic;
            }

        .conteneurVideo.ended::after {
            content:"Le plaisir d'apprendre avec clic-M.O.I";
            position: absolute;
            top: 0;
            left: 0;
            bottom: 0;
            right: 0;
            cursor: pointer;
            background-color: black;
            background-repeat: no-repeat;
            background-position: center; 
            background-size: 64px 64px;
            background-image: url(data:image/svg+xml;utf8;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIxMjgiIGhlaWdodD0iMTI4IiB2aWV3Qm94PSIwIDAgNTEwIDUxMCI+PHBhdGggZD0iTTI1NSAxMDJWMEwxMjcuNSAxMjcuNSAyNTUgMjU1VjE1M2M4NC4xNSAwIDE1MyA2OC44NSAxNTMgMTUzcy02OC44NSAxNTMtMTUzIDE1My0xNTMtNjguODUtMTUzLTE1M0g1MWMwIDExMi4yIDkxLjggMjA0IDIwNCAyMDRzMjA0LTkxLjggMjA0LTIwNC05MS44LTIwNC0yMDQtMjA0eiIgZmlsbD0iI0ZGRiIvPjwvc3ZnPg==);
        }
        .conteneurVideo.qcmPatience::after {
            content:"Le plaisir d'apprendre avec clic-M.O.I";
            position: absolute;
            top: 0;
            left: 0;
            bottom: 0;
            right: 0;
            cursor: pointer;
            background-color: black;
            background-repeat: no-repeat;
            background-position: center; 
            background-size: 64px 64px;
            background-image: url(data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBzdGFuZGFsb25lPSJubyI/Pgo8IURPQ1RZUEUgc3ZnIFBVQkxJQyAiLS8vVzNDLy9EVEQgU1ZHIDEuMS8vRU4iICJodHRwOi8vd3d3LnczLm9yZy9HcmFwaGljcy9TVkcvMS4xL0RURC9zdmcxMS5kdGQiPgo8c3ZnIHdpZHRoPSI0MHB4IiBoZWlnaHQ9IjQwcHgiIHZpZXdCb3g9IjAgMCA0MCA0MCIgdmVyc2lvbj0iMS4xIiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHhtbG5zOnhsaW5rPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5L3hsaW5rIiB4bWw6c3BhY2U9InByZXNlcnZlIiBzdHlsZT0iZmlsbC1ydWxlOmV2ZW5vZGQ7Y2xpcC1ydWxlOmV2ZW5vZGQ7c3Ryb2tlLWxpbmVqb2luOnJvdW5kO3N0cm9rZS1taXRlcmxpbWl0OjEuNDE0MjE7IiB4PSIwcHgiIHk9IjBweCI+CiAgICA8ZGVmcz4KICAgICAgICA8c3R5bGUgdHlwZT0idGV4dC9jc3MiPjwhW0NEQVRBWwogICAgICAgICAgICBALXdlYmtpdC1rZXlmcmFtZXMgc3BpbiB7CiAgICAgICAgICAgICAgZnJvbSB7CiAgICAgICAgICAgICAgICAtd2Via2l0LXRyYW5zZm9ybTogcm90YXRlKDBkZWcpCiAgICAgICAgICAgICAgfQogICAgICAgICAgICAgIHRvIHsKICAgICAgICAgICAgICAgIC13ZWJraXQtdHJhbnNmb3JtOiByb3RhdGUoLTM1OWRlZykKICAgICAgICAgICAgICB9CiAgICAgICAgICAgIH0KICAgICAgICAgICAgQGtleWZyYW1lcyBzcGluIHsKICAgICAgICAgICAgICBmcm9tIHsKICAgICAgICAgICAgICAgIHRyYW5zZm9ybTogcm90YXRlKDBkZWcpCiAgICAgICAgICAgICAgfQogICAgICAgICAgICAgIHRvIHsKICAgICAgICAgICAgICAgIHRyYW5zZm9ybTogcm90YXRlKC0zNTlkZWcpCiAgICAgICAgICAgICAgfQogICAgICAgICAgICB9CiAgICAgICAgICAgIHN2ZyB7CiAgICAgICAgICAgICAgICAtd2Via2l0LXRyYW5zZm9ybS1vcmlnaW46IDUwJSA1MCU7CiAgICAgICAgICAgICAgICAtd2Via2l0LWFuaW1hdGlvbjogc3BpbiAxLjVzIGxpbmVhciBpbmZpbml0ZTsKICAgICAgICAgICAgICAgIC13ZWJraXQtYmFja2ZhY2UtdmlzaWJpbGl0eTogaGlkZGVuOwogICAgICAgICAgICAgICAgYW5pbWF0aW9uOiBzcGluIDEuNXMgbGluZWFyIGluZmluaXRlOwogICAgICAgICAgICB9CiAgICAgICAgXV0+PC9zdHlsZT4KICAgIDwvZGVmcz4KICAgIDxnIGlkPSJvdXRlciI+CiAgICAgICAgPGc+CiAgICAgICAgICAgIDxwYXRoIGQ9Ik0yMCwwQzIyLjIwNTgsMCAyMy45OTM5LDEuNzg4MTMgMjMuOTkzOSwzLjk5MzlDMjMuOTkzOSw2LjE5OTY4IDIyLjIwNTgsNy45ODc4MSAyMCw3Ljk4NzgxQzE3Ljc5NDIsNy45ODc4MSAxNi4wMDYxLDYuMTk5NjggMTYuMDA2MSwzLjk5MzlDMTYuMDA2MSwxLjc4ODEzIDE3Ljc5NDIsMCAyMCwwWiIgc3R5bGU9ImZpbGw6YmxhY2s7Ii8+CiAgICAgICAgPC9nPgogICAgICAgIDxnPgogICAgICAgICAgICA8cGF0aCBkPSJNNS44NTc4Niw1Ljg1Nzg2QzcuNDE3NTgsNC4yOTgxNSA5Ljk0NjM4LDQuMjk4MTUgMTEuNTA2MSw1Ljg1Nzg2QzEzLjA2NTgsNy40MTc1OCAxMy4wNjU4LDkuOTQ2MzggMTEuNTA2MSwxMS41MDYxQzkuOTQ2MzgsMTMuMDY1OCA3LjQxNzU4LDEzLjA2NTggNS44NTc4NiwxMS41MDYxQzQuMjk4MTUsOS45NDYzOCA0LjI5ODE1LDcuNDE3NTggNS44NTc4Niw1Ljg1Nzg2WiIgc3R5bGU9ImZpbGw6cmdiKDIxMCwyMTAsMjEwKTsiLz4KICAgICAgICA8L2c+CiAgICAgICAgPGc+CiAgICAgICAgICAgIDxwYXRoIGQ9Ik0yMCwzMi4wMTIyQzIyLjIwNTgsMzIuMDEyMiAyMy45OTM5LDMzLjgwMDMgMjMuOTkzOSwzNi4wMDYxQzIzLjk5MzksMzguMjExOSAyMi4yMDU4LDQwIDIwLDQwQzE3Ljc5NDIsNDAgMTYuMDA2MSwzOC4yMTE5IDE2LjAwNjEsMzYuMDA2MUMxNi4wMDYxLDMzLjgwMDMgMTcuNzk0MiwzMi4wMTIyIDIwLDMyLjAxMjJaIiBzdHlsZT0iZmlsbDpyZ2IoMTMwLDEzMCwxMzApOyIvPgogICAgICAgIDwvZz4KICAgICAgICA8Zz4KICAgICAgICAgICAgPHBhdGggZD0iTTI4LjQ5MzksMjguNDkzOUMzMC4wNTM2LDI2LjkzNDIgMzIuNTgyNCwyNi45MzQyIDM0LjE0MjEsMjguNDkzOUMzNS43MDE5LDMwLjA1MzYgMzUuNzAxOSwzMi41ODI0IDM0LjE0MjEsMzQuMTQyMUMzMi41ODI0LDM1LjcwMTkgMzAuMDUzNiwzNS43MDE5IDI4LjQ5MzksMzQuMTQyMUMyNi45MzQyLDMyLjU4MjQgMjYuOTM0MiwzMC4wNTM2IDI4LjQ5MzksMjguNDkzOVoiIHN0eWxlPSJmaWxsOnJnYigxMDEsMTAxLDEwMSk7Ii8+CiAgICAgICAgPC9nPgogICAgICAgIDxnPgogICAgICAgICAgICA8cGF0aCBkPSJNMy45OTM5LDE2LjAwNjFDNi4xOTk2OCwxNi4wMDYxIDcuOTg3ODEsMTcuNzk0MiA3Ljk4NzgxLDIwQzcuOTg3ODEsMjIuMjA1OCA2LjE5OTY4LDIzLjk5MzkgMy45OTM5LDIzLjk5MzlDMS43ODgxMywyMy45OTM5IDAsMjIuMjA1OCAwLDIwQzAsMTcuNzk0MiAxLjc4ODEzLDE2LjAwNjEgMy45OTM5LDE2LjAwNjFaIiBzdHlsZT0iZmlsbDpyZ2IoMTg3LDE4NywxODcpOyIvPgogICAgICAgIDwvZz4KICAgICAgICA8Zz4KICAgICAgICAgICAgPHBhdGggZD0iTTUuODU3ODYsMjguNDkzOUM3LjQxNzU4LDI2LjkzNDIgOS45NDYzOCwyNi45MzQyIDExLjUwNjEsMjguNDkzOUMxMy4wNjU4LDMwLjA1MzYgMTMuMDY1OCwzMi41ODI0IDExLjUwNjEsMzQuMTQyMUM5Ljk0NjM4LDM1LjcwMTkgNy40MTc1OCwzNS43MDE5IDUuODU3ODYsMzQuMTQyMUM0LjI5ODE1LDMyLjU4MjQgNC4yOTgxNSwzMC4wNTM2IDUuODU3ODYsMjguNDkzOVoiIHN0eWxlPSJmaWxsOnJnYigxNjQsMTY0LDE2NCk7Ii8+CiAgICAgICAgPC9nPgogICAgICAgIDxnPgogICAgICAgICAgICA8cGF0aCBkPSJNMzYuMDA2MSwxNi4wMDYxQzM4LjIxMTksMTYuMDA2MSA0MCwxNy43OTQyIDQwLDIwQzQwLDIyLjIwNTggMzguMjExOSwyMy45OTM5IDM2LjAwNjEsMjMuOTkzOUMzMy44MDAzLDIzLjk5MzkgMzIuMDEyMiwyMi4yMDU4IDMyLjAxMjIsMjBDMzIuMDEyMiwxNy43OTQyIDMzLjgwMDMsMTYuMDA2MSAzNi4wMDYxLDE2LjAwNjFaIiBzdHlsZT0iZmlsbDpyZ2IoNzQsNzQsNzQpOyIvPgogICAgICAgIDwvZz4KICAgICAgICA8Zz4KICAgICAgICAgICAgPHBhdGggZD0iTTI4LjQ5MzksNS44NTc4NkMzMC4wNTM2LDQuMjk4MTUgMzIuNTgyNCw0LjI5ODE1IDM0LjE0MjEsNS44NTc4NkMzNS43MDE5LDcuNDE3NTggMzUuNzAxOSw5Ljk0NjM4IDM0LjE0MjEsMTEuNTA2MUMzMi41ODI0LDEzLjA2NTggMzAuMDUzNiwxMy4wNjU4IDI4LjQ5MzksMTEuNTA2MUMyNi45MzQyLDkuOTQ2MzggMjYuOTM0Miw3LjQxNzU4IDI4LjQ5MzksNS44NTc4NloiIHN0eWxlPSJmaWxsOnJnYig1MCw1MCw1MCk7Ii8+CiAgICAgICAgPC9nPgogICAgPC9nPgo8L3N2Zz4K);
        }
        .conteneurVideo {
            float: none;
            clear: both;
            max-width: 90%;
            position: relative;
            padding-bottom: 36.25%;
            padding-top: 25px;
            height: 0;
            margin-left: auto;
            margin-right: auto;
            border: solid 1px black;
        }
        .conteneurVideo iframe, .conteneurVideo object, .conteneurVideo embed {             position:absolute;
            top:0;
            left:0;
            width:100%;
            height:100%;
        }
		#contenuFenetreModaleVideo{
			width:100%;
			min-height: 74vh;
		}
        .identification {
            display:none;
            position: relative;
            margin-left:auto;
            margin-right:auto;
            font-family: arial;
            /*font-size: 1vh;*/
            background-color: #000 !important;
            border: none;
            /*border-radius: .8rem;*/
            color: white;
            /*padding: .5rem;*/
            text-align: center;
            text-decoration: none;
            margin-top: .1vh;
            /*max-width: 45vh;*/
            cursor: pointer;
        }
        #espece {
            font-family: arial;
            color: white;
            opacity: 1;
            font-size: 1.5em;
        }
        .clignotementTexte {
            animation: blinker 1s linear infinite;
        }

            @keyframes blinker {
              50% {
                opacity: 0;
              }
            }
            a {
                text-decoration: none;
            }

            a:link {
              color: white;
            }

            a:visited {
              color: white;
            }
            .modeEmploi {
                position: initial;
                font-family: arial;
                font-size: 1.2vh;
                font-style: italic;
                /* background-color: #4479d9; */
                border: none;
                /*border-radius: .8rem;*/
                color: #404040;
                padding: .5rem;
                text-align: center;
                text-decoration: none;
                /*display: initial;*/
                padding:0;
                opacity:0;
            }
            .conteneurQCM{
                display: inline-flex;
                background-color: transparent;
                width:50%;
                margin-left: auto;
                margin-right: auto;
                margin-top: .7em;
            }
            #score,
            #qcm {
                background-color: #4479d9;
                padding: .5vw;
                font-size: 1.3vw;
                margin-left: auto;
                margin-right: auto;
                border-radius: .5vw;
                color: white;
                cursor: pointer;
                /*margin-top: 1vw;*/
                display: none;
            }
            #qcm:hover{
                background-color: #47b5ed; 
            }
            #score{
                /*width: 10vw;*/
                margin-left: 1vw;
                cursor: default;
            }
            #questions {
                margin: 10px 0;
                display: grid;
                grid-template-columns: auto auto;
                grid-gap: 15px;
            }
            .option {
                background: #fafafa;
                border: 1px solid #eee;
                border-radius: 10px;
                padding: 5px 5px;
                cursor: pointer;
                text-align: center;
                font-size: 1.5vw;
                color:#777;
            }
            .hover:hover{
               background-color:#4479d9; 
               color:#fff;
            }
            input[type="radio"] {
                margin-right: 0.5vw;
            }
/************************* MODALE VIDEO *************************/
/************ Overlay ************/
.modaleOverlay {
    display: none;
    justify-content: center;
    align-items: center;
    position: fixed;
    inset: 0;
    height: 100vh;
    background-color: rgba(255, 255, 255, 0.5);
    transition: opacity .2s ease;
    z-index: 1001;
}

/************ Modale Vidéo ************/
.modaleVideo {
    display: none;
    position: fixed;
    z-index: 1001;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    box-sizing: border-box;
    width: 90vw;
    max-width: 700px;
    aspect-ratio: 3 / 4; /* toujours plus haute que large */
}

/* Si le navigateur ne supporte pas aspect-ratio */
@supports not (aspect-ratio: 3 / 4) {
    .modaleVideo {
        height: 80vh;
        width: calc(80vh * 0.75);
    }
}

/* Contenu de la modale vidéo */
.contenuModaleVideo {
    position: relative;
    background-color: #353535;
    width: 100%;
    height: 100%;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2),
                0 6px 20px rgba(0, 0, 0, 0.19);
    font-family: Jost, Arial;
    border-radius: 10px;
    display: flex;
    flex-direction: column;
    overflow: hidden;
}

/* Entête vidéo */
.enteteModaleVideo {
    padding: 1vh 0 0 0;
    color: #4479d9;
    text-align: center;
    border-radius: .5vh .5vh 0 0;
}

/* Corps vidéo */
.corpsModaleVideo {
    flex: 1;
    color: #fff;
    text-align: left;
    overflow-y: auto;
}

/* Pied vidéo */
.piedModaleVideo {
    padding: 2px 16px;
    color: white;
    border-radius: 0 0 .5vh .5vh;
    text-align: center;
}

/* Bouton fermeture vidéo */
.close {
    color: white;
    font-size: 3vh;
    position: absolute;
    right: 1vh;
    top: .5vh;
    cursor: pointer;
    font-family: Jost, Arial;
    font-weight: normal;
}
.close:hover,
.close:focus {
    color: #6592e6;
}

/* ---- Responsivité ---- */

/* Petits écrans (smartphones) */
@media (max-width: 600px) {
    .modaleVideo {
        width: 90vw;
        aspect-ratio: 3 / 5;
        max-height: 95vh;
    }
}

/* Écrans larges (paysage ou desktop) */
@media (orientation: landscape) {
    .modaleVideo {
        height: 80vh;
        width: calc(80vh * 0.7);
    }
}


/************************* MODALE QCM *************************/
.modaleQCM {
    display: none;
    position: absolute;
    z-index: 1001;
    width: 100%;
    overflow: auto;
    top: 95%; /* juste sous la barre */
    left: 50%;
    transform: translate(-50%, -50%);
    box-sizing: border-box;
}

/* Contenu de la modale QCM */
.contenuModaleQCM {
    position: relative;
    background-color: #353535;
    margin: auto;
    padding: 0;
    width: 40%;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2),
                0 6px 20px rgba(0, 0, 0, 0.19);
    font-family: Jost, Arial;
    border-radius: .5vh;
}

/* Entête QCM */
.enteteModaleQCM {
    padding: 1vh 0 0 0;
    color: #4479d9;
    text-align: center;
    border-radius: .5vh .5vh 0 0;
}

/* Corps QCM */
.corpsModaleQCM {
    color: #fff;
    text-align: left;
    padding: 0 4vh;
}

/* Pied QCM */
.piedModaleQCM {
    padding: 2px 16px;
    color: white;
    border-radius: 0 0 .5vh .5vh;
}

/* Élément indicateur de progression QCM */
.questionTotal {
    font: 1.5vw Arial, sans-serif;
    width: 2.5em;
    height: 2.5em;
    background-color: #4479d9;
    border: 0.1em solid white;
    color: white;
    text-align: center;
    border-radius: 50%;
    line-height: 2.5em;
    box-sizing: content-box;
    float: inline-start;
    margin-left: .3em;
    margin-top: -0.1em;
}

/* Titre QCM */
.modaleQCM h2 {
    font-size: 1.8vw;
}

    /* Extra small devices (phones, 600px and down) */
    @media only screen and (max-width: 375px) {
        .contenuModaleQCM {
            width: 80%;
        }
        .modaleQCM h2 {
            font-size: 3.8vw;
        }
        .option {
            padding: 0;
            font-size: 3.5vw;
        }
        #qcm {
            font-size: 3.3vw;
            width: 35vw;
            margin-top: 4vw;
        }
        #score {
            font-size: 3.3vw;
            width: 21vw;
            margin-top: 4vw;
        }
}
    /* Extra small devices (phones, 600px and down) */
    @media only screen and (max-width: 430px) {
        .contenuModaleQCM {
            width: 80%;
        }
        .modaleQCM h2 {
            font-size: 3.8vw;
        }
        .option {
            padding: 0;
            font-size: 3.5vw;
        }
        #qcm {
            font-size: 3.3vw;
            width: 35vw;
            margin-top: 4vw;
        }
        #score {
            font-size: 3.3vw;
            width: 21vw;
            margin-top: 4vw;
        }
        #qrcode {
            display:none;
        }
        #pleinEcran,
        #fenetre,
        #vol{
            display:none;
        }
         .close{
              font-size: 5vh;
          }

          .enteteModale{
              padding-top: 1vh;
          }
          .contenuModaleVideo{
              width:100%;
          }
            .modal-overlayYT {
                padding-bottom: 14.25%;
                top: 17vh;
            }
    }
    /* Extra small devices (phones, 600px and down) */
    @media only screen and (max-width: 600px) {
        #qrcode {
            display:none;
        }
        #pleinEcran,
        #fenetre,
        #vol{
            display:none;
        }
            .close{
              font-size: 5vh;
          }

          .enteteModale{
              padding-top: 1vh;
          }
    }
    /* Extra small devices (phones, 820px and down) */
    @media only screen and (max-width: 840px) and (orientation:portrait){
        .contenuModaleQCM {
            width: 80%;
        }
        .modaleQCM h2 {
            font-size: 3.8vw;
        }
        .option {
            padding: 0;
            font-size: 3.5vw;
        }
        #qcm {
            font-size: 2vw;
            width: 70%;
            margin-top: 2vw;
        }
        #score {
            font-size: 2vw;
            /*width: 21vw;*/
            margin-top: 2vw;
        }
        #qrcode {
            display:none;
        }
        #pleinEcran,
        #fenetre,
        #vol{
            display:none;
        }
            .close{
              font-size: 3vh;
          }

          .enteteModale{
              padding-top: 1vh;
          }
    }
    /* Extra small devices (phones, 820px and down) */
    @media only screen and (max-width: 840px) and (orientation:landscape){
        #qrcode {
            display:none;
        }
        #pleinEcran,
        #fenetre,
        #vol{
            display:none;
        }
        .enteteModaleQCM .close{
            font-size: 4vh;
        }
        .close{
            font-size: 5vh;
        }       
}
    /* Extra small devices (phones, 1024px and down) */
    @media only screen and (max-width: 1024px) and (orientation:portrait){
        #qrcode {
            display:none;
        }
        #vol{
            display:none;
        }
            .close{
              font-size: 3vh;
          }

          .enteteModale{
              padding-top: 1vh;
          }
    }
   @media only screen and (max-width: 1024px) and (orientation:landscape){
        #qrcode {
            display:none;
        }
       #vol{
            display:none;
        }
        .enteteModaleQCM .close{
            font-size: 4vh;
        }
        .close{
            font-size: 7vh;
        } 
}
    @media only screen and (max-width: 1080px) and (orientation:portrait){
        #qrcode {
            display:none;
        }
        #vol{
            display:none;
        }
}
   @media only screen and (max-width: 1080px) and (orientation:landscape){
        #qrcode {
            display:none;
        }
        #vol{
            display:none;
        }
        .enteteModaleQCM .close{
            font-size: 4vh;
        }
        .close{
            font-size: 7vh;
        } 
}
    /* Extra small devices (TV, 1201px and down) */
    @media only screen and (max-width: 1201px) and (orientation:portrait){

    }
    @media only screen and (max-width: 1201px) and (orientation:landscape){

  
    }