/*

1920 ~ 1366 = 71,1458%
1080 ~  768 = 71,1111%

*/

@charset "utf-8";

@font-face {
    font-family: 'FatFrank_Heavy';
    src: url(fonts/FatFrank-Heavy.eot); /* IE9 Compat Modes */
    src: url(fonts/FatFrank-Heavy.eot?#iefix) format('embedded-opentype'), /* IE6-IE8 */
        url(fonts/FatFrank-Heavy.woff) format('woff'), /* Modern Browsers */
        url(fonts/FatFrank-Heavy.ttf)  format('truetype'), /* Safari, Android, iOS */
        url(fonts/FatFrank-Heavy.svg#66354d69a605349760895b91f3e8a8e8) format('svg'); /* Legacy iOS */
    font-style:   normal;
    font-weight:  400;
}
@font-face {
    font-family: 'Montserrat_regular';
    src: url(fonts/Montserrat-Regular.woff) format('woff'), /* Modern Browsers */
        url(fonts/Montserrat-Regular.ttf)  format('truetype'); /* Safari, Android, iOS */
    font-style:   normal;
    font-weight:  400;
}
@font-face {
    font-family: 'Montserrat_bold'; /* 700 */
    src: url(fonts/Montserrat-Bold.woff) format('woff'), /* Modern Browsers */
        url(fonts/Montserrat-Bold.ttf)  format('truetype'); /* Safari, Android, iOS */
    font-style:   normal;
    font-weight:  400;
}
@font-face {
    font-family: 'Montserrat_extrabold'; /* 700 */
    src: url(fonts/Montserrat-ExtraBold.woff) format('woff'), /* Modern Browsers */
        url(fonts/Montserrat-ExtraBold.ttf)  format('truetype'); /* Safari, Android, iOS */
    font-style:   normal;
    font-weight:  400;
}
@font-face {
    font-family: 'Montserrat_black'; /* 800 */
    src: url(fonts/Montserrat-Black.woff) format('woff'), /* Modern Browsers */
        url(fonts/Montserrat-Black.ttf)  format('truetype'); /* Safari, Android, iOS */
    font-style:   normal;
    font-weight:  400;
}







/* ---- RESET MEYER ------------*/

* {
    -moz-box-sizing: border-box;
    -webkit-box-sizing: border-box;
    box-sizing: border-box;
}

html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, img, ins, kbd, q, s, samp,
small, strike, strong, sub, xxxxxsup, tt, var,
b, u, i, center,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td,
article, aside, canvas, details, embed, 
figure, figcaption, footer, header, hgroup, 
menu, nav, output, ruby, section, summary,
time, mark, audio, video {
    margin: 0;
    padding: 0;
    border: 0;
    font-size: 100%;
    font: inherit;
    vertical-align: baseline;
}
/* HTML5 display-role reset for older browsers */
article, aside, details, figcaption, figure, 
footer, header, hgroup, menu, nav, section {
    display: block;
}
body {
    line-height: 1;
}
ol, ul {
    list-style: none;
}
blockquote, q {
    quotes: none;
}
blockquote:before, blockquote:after,
q:before, q:after {
    content: '';
    content: none;
}
table {
    border-collapse: collapse;
    border-spacing: 0;
}


/* -------------- */
/* --- police --- */
/* -------------- */

body {
    font-family:FatFrank_Heavy,Montserrat_regular;
    color:#fff;
    text-transform:uppercase;
    text-align: center;
}

/* ------------------ */
/* --- raccourcis --- */
/* ------------------ */

xxxxxxxxxx .mb0 {
    margin-bottom: 0 !important;
}
xxxxxxxxxx .mb5 {
    margin-bottom: 5px !important;
}
xxxxxxxxxx .mb10 {
    margin-bottom: 10px !important;
}
xxxxxxxxxx .open_sansbold {
    font-family: open_sansbold;
}
.clearboth {
    clear:both
}

xxxxxxxxxxx.displaynone {
    display:none
}

xxxxxxxxxx .pre {
    white-space:pre-line;
}

xxxxxxxxxx .tac {
    text-align: center;
}

xxxxxxxxxx [data-xml] {
    white-space:pre-line;
}


/* --------------- */
/* --- polices --- */
/* --------------- */

xxxxxxxxxx b {
    font-weight:bold
}

xxxxxxxxxx .paragraphe {
    font-size:20px;
}


#question sup {
    display: inline-block;
    vertical-align: bottom;
    margin-bottom: 37px;
    line-height: 1px;
}
@media screen and (max-width: 1366px/*resp*/) {
	#question sup {
		margin-bottom: 28px;
	}	
}


/* ------------- */
/* --- blocs --- */
/* ------------- */

body {
    background-color:#000
}

#debug {
    color:#000;
    width:200px;
    height:500px;
    position:absolute;
    left:10px;
    top:10px;
    border:1px solid fuchsia;
    background-color:#fef;
}

#global {
    /*
    position:absolute;
    left:250px;
    top:10px;
    */
    position:relative;
    width:1920px;
    height:1078px; /* 1080px fait FF et IE rajouter des scrolls */
    overflow: hidden;
}
body[data-navigateur="chrome"] #global {
    height:1080px;    
}
@media screen and (max-width: 1366px/*resp*/) {
    #global {
        width:1366px;
        height:766px;
    }
    body[data-navigateur="chrome"] #global {
    height:768px;    
}
}

.slide {
    display:none;
    position:absolute;
    left:0;
    top:0;
    width:100%;
    height:100%;        
    /*    border:1px solid red;*/
    background-color:#eee;
}


#intro video {
    display:block;
    width:100%;
}

/*
* #choix_langue
*/

#choix_langue {
    background:transparent url(img/back_oie_choix_langue.jpg) left top no-repeat;
    background-size:cover;

}
#choix_langue h2 {
    position:absolute;
    top:456px;
    left: 630px;
    width: 660px;
    font-family: FatFrank_Heavy;
    font-size: 50px;
}
@media screen and (max-width: 1366px/*resp*/) {
    #choix_langue h2 {
        top:324.2667px; /* 456px; */ 
        left: 448.21875px; /* 630px; */
        width: 469.5625px; /* 660px; */
        font-size: 35.5556px; /* 50px */
    }
}

#choix_langue [data-langue] {
    cursor:pointer;
    border:4px solid #fff;
    position:absolute;
    top:542px;
    height:59px;
    padding-top: 15px;
    font-family: Montserrat_regular;
    font-size: 20px;
}
@media screen and (max-width: 1366px/*resp*/) {
    #choix_langue [data-langue] {
        border-width:3px; /* 4px */
        top:385.4222px; /* 542px; */
        height:41.9556px; /* 59px; */
        padding-top: 10.6667px; /* 15px; */
        font-size: 14.22px; /* 20px; */ 
    }
}
#choix_langue [data-langue]:hover {
    background-color:#fff;
    color:#3c9cff;
}

#choix_langue [data-langue="en"] {
    left: 780px;
    width: 160px;
}
@media screen and (max-width: 1366px/*resp*/) {
    #choix_langue [data-langue="en"] {
        left: 554.9375px; /* 780px; */ 
        width: 113.7778px; /* 160px; */
    }
}
#choix_langue [data-langue="fr"] {
    left:963px;
    width:177px;
}
@media screen and (max-width: 1366px/*resp*/) {
    #choix_langue [data-langue="fr"] {
        left:685.134375px; /* 963px; */
        width:125.928125px; /* 177px; */
    }
}

#choix_langue video {
    display:none;
    width:100%;        
    position:absolute;
    left:0;
    top:0;
    z-index:1;
}

/*
* #choix_categorie
*/

#choix_categorie {
    background:transparent url(img/back_oie_choix_categorie.jpg) left top no-repeat;
    background-size:cover; /* 71.1111%; */
}
.just_refreshed #choix_categorie {
    opacity:0;
}
#choix_categorie h2 {
    position:absolute;
    top:341px;
    left:523px;
    width:867px;
    font-family: FatFrank_Heavy;
    font-size: 50px;
}
@media screen and (max-width: 1366px/*resp*/) {
    #choix_categorie h2 {
        top:242.4889px; /* 341px; */
        left:372.0927083px; /* 523px; */
        width:616.834375px; /* 867px; */
        font-size: 35.5556px; /* 50px; */
    }
}
#choix_categorie [data-categorie] {
    cursor:pointer;
    /*   border:1px solid;*/
    width:220px;
    padding-top:220px;
    position:absolute;
    top:442px;
    font-family: Montserrat_regular;
    font-size: 20px;
    font-weight: 700;
    line-height: 24px;
}
@media screen and (max-width: 1366px/*resp*/) {
    #choix_categorie [data-categorie] {
        width:156.5208333px; /* 220px; */
        padding-top:156.4444px; /* 220px; */
        top:314.3111px; /* 442px; */
        font-size: 14.22px; /* 20px; */
        line-height: 17.0667px; /* 24px; */
    }
}
#choix_categorie [data-categorie="metiers"] {
    background:transparent url(img/picto_metiers.png) center top no-repeat;
    left:523px;
}
@media screen and (max-width: 1366px/*resp*/) {
    #choix_categorie [data-categorie="metiers"] {
        left:372.0927083px; /* 523px; */
    }
}
#choix_categorie [data-categorie="walt_disney_company"] {
    background:transparent url(img/picto_walt_disney_company.png) center top no-repeat;
    left:844px;
}
@media screen and (max-width: 1366px/*resp*/) {
    #choix_categorie [data-categorie="walt_disney_company"] {
        left:600.4708333px; /* 844px; */
    }
}
#choix_categorie [data-categorie="disneyland_paris"] {
    background:transparent url(img/picto_disneyland_paris.png) center top no-repeat;
    left:1170px;
}
@media screen and (max-width: 1366px/*resp*/) {
    #choix_categorie [data-categorie="disneyland_paris"] {
        left:832.40625px; /* 1170px; */
    }
}

@media screen and (max-width: 1366px/*resp*/) {
    #choix_categorie [data-categorie] {
        background-size:91%;
    }
}


#choix_categorie video {
    display:none;
    position:absolute;
    left:0;
    top:0;
    width:100%;
    height:100%;
}


/*
 * Transition vidéo
 */

#video_transition video {
    display:none;
    position:absolute;
    left:0;
    top:0;
    width:100%;
    height:100%;

    /*    transform:rotate(180deg);*/
}

/*
 * Question
 */

#question {
    display:none;
    position:relative;
    z-index:1;   
    width:100%;
    height:100%;
    /*   background:transparent url() left top no-repeat;*/
}
@media screen and (max-width: 1366px/*resp*/) {
    #question {
        background-size:100%
    }
}
/*
#question.non_centree {
    padding-top: 85px;
}
@media screen and (max-width: 1366px) {
    #question.non_centree {
        padding-top: 60.4444px; 
    }
}
*/
#bg_fallback {
    background:transparent url() left top no-repeat;    
    /*    transform:rotate(180deg);*/
}
@media screen and (max-width: 1366px/*resp*/) {
	#bg_fallback {
		background-size:cover;
	}
}
#global[data-categorie-actuelle=metiers] #bg_fallback {
    /*  background:fuchsia;*/
    background-image:url(img/back_metiers.jpg);
}
#global[data-categorie-actuelle=walt_disney_company] #bg_fallback {
    /*    background:yellowgreen;*/
    background-image:url(img/back_walt_disney_company.jpg);
}
#global[data-categorie-actuelle=disneyland_paris] #bg_fallback {
    /*    background:#999;*/
    background-image:url(img/back_disneyland_paris.jpg);
}



#question[data-mode=question] .reponse,
#question[data-mode=reponse] .question,

#question[data-mode=reponse][data-qcm_nb="0"] #q_texte, /* on ne réaffiche la réponse que s'il s'agit d'un QCM */
#question[data-q_texte=false] #q_texte,

#question[data-mode=reponse][data-qcm_nb="0"][data-q_et_r_meme_structure=false] #q_img, /* on ne réaffiche la réponse que s'il s'agit d'un QCM ou d'une même structure */
#question[data-q_img=false] #q_img,

#question[data-mode=reponse][data-qcm_nb="0"] #q_video, /* on ne réaffiche la réponse que s'il s'agit d'un QCM */
#question[data-q_video=false] #q_video,

#question[data-mode=question] #r_texte,
#question[data-r_texte=false] #r_texte,

#question[data-mode=question] #r_img,
#question[data-r_img=false] #r_img,

#question[data-mode=question] #r_video,
#question[data-r_video=false] #r_video,

#question[data-qcm_nb="0"] #qcm {
    display:none !important;
}
.just_refreshed #question .reponse {
    display:none !important;
}

#images_q_et_r {
    position:relative;
}

#question[data-mode=reponse][data-q_et_r_meme_structure=true] #r_img_wrapper {
    position:absolute;   
    left:0;
    top:0;
    width:100%;
}
#question[data-mode=reponse][data-q_et_r_meme_structure=true] #r_img {
    margin:0 auto;
}
/* --- METIERS --- */

#global[data-categorie-actuelle=metiers] #question h2 {
    color:#2dd9c3;
}
#global[data-categorie-actuelle=metiers] #question h2::after {
    background-color:#2dd9c3;
}
#global[data-categorie-actuelle=metiers] #qcm li {
    border-color:#2dd9c3;
}
#global[data-categorie-actuelle=metiers] #qcm li::before {
    background-color:#2dd9c3;
}
#global[data-categorie-actuelle=metiers] #question #qcm li.checked {
    border-color:#2dd9c3 ;
    background-color:#2dd9c3 ; /* si c'est la bonne réponse, on affiche la couleur verte du "checked" et non le bisque du "bonne réponse" */
}
#global[data-categorie-actuelle=metiers] #question li.checked::before {
    background-color:#2dd9c3 ; /* si c'est la bonne réponse, on affiche la couleur verte du "checked" et non le bisque du "bonne réponse" */
}


/* --- PARIS --- */

#global[data-categorie-actuelle=disneyland_paris] #question h2 {
    color:#ffeed2;
}
#global[data-categorie-actuelle=disneyland_paris] #question h2::after {
    background-color:#ffeed2;
}
#global[data-categorie-actuelle=disneyland_paris] #qcm li {
    border-color:#fb9da0;
}
#global[data-categorie-actuelle=disneyland_paris] #qcm li::before {
    background-color:#fb9da0;
}
#global[data-categorie-actuelle=disneyland_paris] #question #qcm li.checked {
    border-color:#fb9da0 ;
    background-color:#fb9da0 ; /* si c'est la bonne réponse, on affiche la couleur verte du "checked" et non le bisque du "bonne réponse" */
}
#global[data-categorie-actuelle=disneyland_paris] #question li.checked::before {
    background-color:#fb9da0 ; /* si c'est la bonne réponse, on affiche la couleur verte du "checked" et non le bisque du "bonne réponse" */
}
/* --- COMPANY --- */

#global[data-categorie-actuelle=walt_disney_company] #question h2 {
    color:#fe6a3c;
}
#global[data-categorie-actuelle=walt_disney_company] #question h2::after {
    background-color:#fe6a3c;
}
#global[data-categorie-actuelle=walt_disney_company] #qcm li {
    border-color:#fe6a3c;
}
#global[data-categorie-actuelle=walt_disney_company] #qcm li::before {
    background-color:#fe6a3c;
}
#global[data-categorie-actuelle=walt_disney_company] #question #qcm li.checked {
    border-color:#fe6a3c ;
    background-color:#fe6a3c ; /* si c'est la bonne réponse, on affiche la couleur verte du "checked" et non le bisque du "bonne réponse" */
}
#global[data-categorie-actuelle=walt_disney_company] #question #qcm li.checked::before {
    background-color:#fe6a3c ; /* si c'est la bonne réponse, on affiche la couleur verte du "checked" et non le bisque du "bonne réponse" */
}

#question h2 {   
    font-family: FatFrank_heavy;
    font-size: 30px;
    line-height: 50px;
}
@media screen and (max-width: 1366px/*resp*/) {
    #question h2 {   
        font-size: 21.3333px; /* 30px; */
        line-height: 35.5556px; /* 50px; */ 
    }
}
#question h2::after {   
    content:'';
    width:85px;
    height:6px;
    margin: auto;
    display: block;
}
@media screen and (max-width: 1366px/*resp*/) {
    #question h2::after {   
        width:60.4739583px; /* 85px; */
        height:4.2667px; /* 6px; */
    }
}

#q_texte,
#r_texte {
    font-family: Montserrat_black;
    font-size: 40px;
    line-height: 50px;
    margin-top: 20px;
}
@media screen and (max-width: 1366px/*resp*/) {
    #q_texte,
    #r_texte {
        font-size: 28.4444px; /* 40px; */
        line-height: 35.5556px; /* 50px; */
        margin-top: 14.2222px; /* 20px; */
    }
}

.media {
    display:block;
    margin:35px auto 0;
}
@media screen and (max-width: 1366px/*resp*/) {
    .media {
        margin-top:24.8889px; /* 35px */
    }
}

/*
 * --- ETOILES ---
 */
#champ_etoiles {
    /*  border:1px solid fuchsia;*/
    position:relative;
}
#champ_etoiles .etoile {
    /*border:1px solid green;*/
    position:absolute;
    text-align:center;
}
#champ_etoiles svg {
    display:inline-block;
    width:100%;
    height:100%;
    vertical-align:middle;
    /*    margin:auto;*/
}
#global[data-categorie-actuelle=metiers] #champ_etoiles svg path {
    fill:#ffc65c
}
#global[data-categorie-actuelle=disneyland_paris] #champ_etoiles svg path {
    fill:#ffeed2
}
#global[data-categorie-actuelle=walt_disney_company] #champ_etoiles svg path {
    fill:#ffeed2
}




/*
 * --- CHRONO ---
 */

#media {
    position:relative;
    /*  outline:1px solid fuchsia*/
}
#question[data-mode="question"][data-flash=true][data-q_media=true][data-q_audio=false] #media {
    min-height:174px; /* hauteur du chrono ; pas de chrono en audio */
}
@media screen and (max-width: 1366px/*resp*/) {
    #question[data-mode="question"][data-flash=true][data-q_media=true][data-q_audio=false] #media {
        min-height:123.7333px; /* 174px; */ /* hauteur du chrono */
    }
}
#question[data-mode="question"][data-q_media=false] #media {
    display:none;
}
.chrono {
    display:none;
    cursor:pointer;
    height:174px;
}
#question[data-q_audio="true"] .chrono {
    display:none !important;
}
@media screen and (max-width: 1366px/*resp*/) {
    .chrono {
        height:123.7333px;
    }
}
#chrono_relative {
    margin:30px auto;
}
@media screen and (max-width: 1366px/*resp*/) {
    #chrono_relative {
        margin:21.3333px /* 30px */ auto;
    }
}
#chrono_absolute {
    position:absolute;
    right: 370px;
    top: 50%;
    margin-top: -77px;
}
@media screen and (max-width: 1366px/*resp*/) {
    #chrono_absolute {
        right: 250px; /* 290px; */
        margin-top: -54.7556px; /* -77px; */
    }
}
#question[data-mode="question"][data-flash=true][data-q_media=true] #chrono_absolute,
#question[data-mode="question"][data-flash=true][data-q_media=false] #chrono_relative {
    display:block;
}

/*
 * --- VIDEO ---
 */

#global .video_wrapper {
    position:relative;
}

#global #question[data-q_audio="false"] .video_wrapper {
    cursor:pointer;
    /* l'audio a ses propres boutons */
}





#global .video_wrapper .video_button {
    position:absolute;
    z-index:1;
    left:0;
    top:0;
    right:0;
    bottom:0;
}
#global #question[data-q_audio="false"] .video_wrapper .video_button {
    cursor:pointer;
    /* l'audio a ses propres boutons */
}
#global .video_wrapper.playing .video_button {
    display:none;
}
#global .video_wrapper .video_button {
    background:transparent url() center center no-repeat;
}
@media screen and (max-width: 1366px/*resp*/) {
    #global .video_wrapper .video_button {
        background-size:80.3556px; /* 113px; */
    }
}

#global[data-categorie-actuelle=metiers] .video_button {
    background-image:url(img/player_metiers.png);
}
#global[data-categorie-actuelle=walt_disney_company] .video_button {
    background-image:url(img/player_walt_disney_company.png);
}
#global[data-categorie-actuelle=disneyland_paris] .video_button {
    background-image:url(img/player_disneyland_paris.png);
}


/*
* audio
*/

#global #question[data-q_audio="true"] .video_masque {
  /*  outline:1px solid blue;*/
    height:115px; /* overflow pour améliorer le centreage vertical */
/*    width:268px;*/
    overflow:hidden;
    margin:auto;
}
@media screen and (max-width: 1366px/*resp*/) {
    #global #question[data-q_audio="true"] .video_masque {
        height:81.7778px; /* 115px; */ /* overflow pour améliorer le centreage vertical */
/*        width:190px;*/
    }
}
#global #question[data-q_audio="true"] .video_masque video {
    margin-left:-30px;
}
@media screen and (max-width: 1366px/*resp*/) {
    #global #question[data-q_audio="true"] .video_masque video {
        margin-left:-30px;
    }
}



#global #question[data-q_audio=true] .video_button {
    background:none;   
}
#question .audio_button_wrapper {
    display:none;
}
#global #question[data-q_audio=true] .audio_button_wrapper {
    display:block;
    position:absolute;
    top:13px;
    left:50%;
    margin-left:-195px;  
    /*    cursor:wait;*/
    z-index:2;
    /* les boutons font 40x40 */
    width:70px;
    height:80px;
    padding-top:20px;
    cursor:pointer;
    /*    outline:1px solid green;*/
}
@media screen and (max-width: 1366px/*resp*/) {
    #global #question[data-q_audio=true] .audio_button_wrapper {
        top: -1px;
        margin-left: -163px;
    }
}
#question img.audio_button {
    margin:auto;
    width:40px;
    height:40px;
}
#global #question[data-q_audio=true] .audio_button.play {
    display:block;
}
#global #question[data-q_audio=true] .audio_button.pause {
    display:none;
}
#global #question[data-q_audio=true] .video_wrapper.playing .audio_button.play {
    display:none;
}
#global #question[data-q_audio=true] .video_wrapper.playing .audio_button.pause {
    display:block;
}

.audio_button_refresh {
    display:none;
}
#question[data-q_audio=true] .video_wrapper .audio_button_refresh {
    display:block;
    cursor:pointer;
    width:55px;
    height:100px;
    /* outline:1px solid green;*/
    /* outline:1px solid fuchsia;*/
    position:absolute;
    top:1px;
    right: 50%;
    margin-right: -195px;
    background:transparent url(img/refresh.png) center 39px no-repeat;
    /*    cursor:wait;*/
    z-index:2;
}
@media screen and (max-width: 1366px/*resp*/) {
    #question[data-q_audio=true] .video_wrapper .audio_button_refresh {
        top:1px;
        margin-right: -151px;
        height:82px;
        background-position:center 23px;

    }
}
/*
#question[data-q_audio=true] .video_wrapper.already_played .audio_button_refresh {
    display:block;
}
*/

/*
 * ---
 */

.next {
    position:absolute;
    left:0;
    width:100%;
    bottom:50px;
    text-align:center;
}
@media screen and (max-width: 1366px/*resp*/) {
    .next {
        bottom:35.5729167px; /* 50px */
    }
}
.next span {
    display:inline-block;
    border:4px solid #fff;
    padding: 0 17px;
    cursor:pointer;
    font-family:Montserrat_extrabold;
    font-size: 16px;
    line-height:42px;
    letter-spacing: 1px;
}

@media screen and (max-width: 1366px/*resp*/) {
    .next span {
        border:3px /* 4px */ solid;
        padding: 0 12.0947917px; /* 0 17px; */
        font-size: 11.3778px; /* 16px; */
        line-height:29.8667px; /* 42px; */
        letter-spacing: 0.7114583px; /* 1px; */
    }
}
.next span:hover {
    background-color:#fff;
}
#global[data-categorie-actuelle=metiers] .next span:hover {
    color:#4643c8
}
#global[data-categorie-actuelle=walt_disney_company] .next span:hover {
    color:#fcc55b
}
#global[data-categorie-actuelle=disneyland_paris] .next span:hover {
    color:#fd637d
}

#qcm {
    position:relative;
    height:152px;
    margin-top:35px;
    font-family:Montserrat_extrabold
}
@media screen and (max-width: 1366px/*resp*/) {
    #qcm {
        height:108.0889px; /* 152px; */
        margin-top:24.8889px; /* 35px; */
    }
}
#qcm li {
    border:2px solid;
    display:block;
    cursor:pointer;
    position:absolute;
    font-size: 20px;
    min-width:427px;
    height:60px;
    line-height:58px;
    padding:0 20px 0 80px;
}
@media screen and (max-width: 1366px/*resp*/) {
    #qcm li {
        border:2px /* 2px */ solid;
        font-size: 14px; /* 20px; */ 
        min-width:303.7927083px; /* 427px; */
        height:42px; /* 60px; */
        line-height:40px; /* 58px; */
        padding:0 14.2291667px 0 56.9166667px; /* padding:0 20px 0 80px; */
    }
}

#qcm li.width_600px {
	width:600px;
}
@media screen and (max-width: 1366px/*resp*/) {
	#qcm li.width_600px {
		width:400px;
	}
}


#qcm li[data-nb_br="1"] span {
    line-height: 27px;
    display: block;
}
@media screen and (max-width: 1366px/*resp*/) {
    #qcm li[data-nb_br="1"] span {
        line-height: 19px; /* 27px; */
    }
}
#qcm li::before {
    content:'A';
    position:absolute;
    left:-1px; /* on se colle sur la bordure, parce qu'en mode zoomé, ça rajoutait un espace entre la bordure et le fond de cette lettre */
    top:-1px;   
    font-family: FatFrank_heavy;
    font-size: 28px;
    width:60px;
    display:block;
}
@media screen and (max-width: 1366px/*resp*/) {
    #qcm li::before {
        font-size: 20px; /* 28px; */
        width:42px; /* 60px; */
    }
}
#qcm li.nth-2::before {
    content:'B';
}
#qcm li.nth-3::before {
    content:'C';
}
#qcm li.nth-4::before {
    content:'D';
}


#qcm li.nth-3,
#qcm li.nth-4 {
    top:92px;
}
@media screen and (max-width: 1366px/*resp*/) {
    #qcm li.nth-3,
    #qcm li.nth-4 {
        top:65.4222px; /* 92px; */
    }
}
#qcm li.nth-1,
#qcm li.nth-3 {
    right:988px;
}
@media screen and (max-width: 1366px/*resp*/) {
    #qcm li.nth-1,
    #qcm li.nth-3 {
        right:702.9208333px; /* 988px; */
    }
}
#qcm li.nth-2,
#qcm li.nth-4 {
    left:964px;
}
@media screen and (max-width: 1366px/*resp*/) {
    #qcm li.nth-2,
    #qcm li.nth-4 {
        left:685.8458333px; /* 964px; */
    }
}


#question[data-mode=reponse] #qcm li.bonne_reponse {
    border-color:#080 !important;
    background-color:#080 !important; /* si c'est la bonne réponse, on affiche la couleur verte du "checked" et non le bisque du "bonne réponse" */
}
#question[data-mode=reponse] #qcm li.bonne_reponse::before {
    background-color:#080 !important; /* si c'est la bonne réponse, on affiche la couleur verte du "checked" et non le bisque du "bonne réponse" */
}


#refresh {
    position:absolute;
    top:0;
    left:0;
    width:250px;
    height:250px;
    cursor:pointer;
 /*   background-color:fuchsia*/
}
@media screen and (max-width: 1366px/*resp*/) {
    #refresh {
        width:500px;
    }
}