/*--------- [THEME WAKA PAR AGENCE WAKA Copyright 2020-2021 https://agence-waka.fr/] ---------*/
@import url('https://fonts.googleapis.com/css2?family=Open+Sans:3000;0,ital,wght@0,400;0,600;0,700;0,800;1,600&display=swap');


:root {
    --color_light : #fff;
    --color_noir : #000;
    --color_primary_font : #000000;
    --color_primary_elements: #00A9F4;
    --color_secondary_elements: #fff;
    --wysiwyg-margin-elts: 2rem;
    --margin-gouttiere:0.84%
}

.container { max-width: 1620px; padding: 0 }
.row [class^="col"], .owl-carousel .owl-item { padding: 0 40px;}


/*--------- [ STYLAGE DE BASE : boutons, wysiwyg, blocs, modules... ] ---------*/
body, input, textarea,  button { font-family: 'Open Sans', Arial, Verdana, sans-serif; font-size:1.8rem; line-height: 1.3; font-weight: 300; color: var(--color_primary_font) !important;   }
a { text-decoration:none; color:var(--color_primary_font);}
a:hover { color:var(--color_primary_elements); }
h1, h2, h3, h4, h5  { font-weight: 400; }
h1 {     font-size: 3rem;    line-height: 3.4rem; margin-bottom:1.5rem; font-weight: bold  }
h2 { font-size:2.8rem; line-height:3.3rem; margin-bottom:1.5rem;}
h3 { font-size: 2.2rem; line-height:2.7rem; margin-bottom:1.2rem;}
h4 { font-size:1.7rem; line-height:2.2rem; margin-bottom:1rem; font-weight: bold}
h5 { font-size:1.5rem; line-height:1.5rem; margin-bottom:0.8rem; font-weight: bold}

input[type="file"] { border:0 !important;}
textarea {  resize:none;}
::placeholder { color:#928f8f; transition: all 0.3s ease;}
:focus::placeholder {  opacity:0.2; }
input[type="checkbox"], input[type="radio"] { margin-right: 0.6rem; position: relative; top:2rem;}
textarea, input, button { -webkit-appearance: none; border-radius: 0; }

.btn-picto {  box-shadow: 0 10px 25px #0687c1; overflow:hidden; padding-top: 0; padding-bottom: 0; line-height: 60px; transition:all 0.5s ease; vertical-align: middle;  width: 230px; height: 60px; background: #fff; border:1px solid #00A9F4; border-radius: 84px; font-size: 2rem; font-weight: bold; color: var(--color_primary_elements) !important; text-align: center; position: relative; padding-right: 60px}
.btn-picto span { transition:all 0.5s ease; width: 50px; height: 50px; display: block; position: absolute; top:5px; right:5px}
.btn-picto[disabled] { opacity: 0.5; cursor: not-allowed}
.btn-picto  .arrow  { background-image:url(../images/picto-arrow.svg); }
.btn-picto  .cadenas  { background-image:url(../images/picto-cadenas.svg); }
.btn-picto  .fusee  { background-image:url(../images/picto-fusee.svg); }
.btn-picto  .haltere  { background-image:url(../images/picto-haltere.svg); }
.btn-picto:hover  {  padding-right: 2.5rem;  }
.btn-picto:hover span  {  right: -100px}
.btn-picto[disabled]:hover {  padding-right: 70px}
.btn-picto[disabled]:hover span { right: 5px; }

@media all and (max-width:1024px) {
    .btn-picto:hover  {  padding-right: 70px;  }
    .btn-picto:hover span  {  right:5px}
}


/*--------- [ STYLAGE DES PAGES ] ---------*/
html, body, #wrapper { height: 100%;}
#wrapper { overflow: auto}


/***** CONNECTION ******/
#connection {  max-width: 100%; padding: 0; height: 100%;  }
#connection > .row { height: 100%}

#connection .row .col-50:nth-child(1) { background-size:cover; background-position: center}
#connection .row .col-50:nth-child(2) { background:var(--color_primary_elements); border-radius: 0 0 130px 0; text-align: center; color:var(--color_light); display: flex; align-items: center; justify-content: center}
#connection .logo_boreale { position: absolute; top:28px; left: 50px }
#connection .content { width: 42%; min-width: 300px}
#connection .content img { width: 100%; margin-bottom: 7.75rem}
#connection .label_effect  { position: relative; z-index: 10; font-size: 18px;}
#connection .label_effect label {   position: absolute; top:46px; left:0; width: 100%;  white-space:nowrap; z-index: -1;  transition: 0.4s; }
#connection .label_effect input:focus~label, #connection .label_effect input.has-content~label {    top: 0px;   font-size: 1.4rem;    }
#connection input {  font-size: 17px; border-radius: 3.9rem; text-align: center; font-weight: bold; border: 1px solid #fff; height: 72px; line-height: 72px; background: transparent; padding:0 1.8rem; color:#fff !important; margin:22.5px 0}
#connection .mdp {  padding:0.6rem 0 3rem }
#connection .mdp a { color:#fff; border-bottom: 1px solid  #fff; transition: all 0.2s ease; font-size: 1.6rem; opacity: 0.6;}
#connection .mdp a:hover { opacity: 1; }
#connection button { margin-top: 2.4rem }
#connection .mdp_oublie { display: none}

/***** PAGES CONTENEUR BLEU ******/
.conteneur_bleu { background:var(--color_primary_elements); border-radius: 0 130px 0 0; min-height:calc(100% - 110px); padding: 6.5rem 0 3rem; color:#fff}
#accueil {   }
#accueil .bienvenue { font-size: 4.5rem; font-weight: 800; line-height: 6.5rem  }
#accueil .presentation { font-size: 2.5rem; line-height: 3.5rem; opacity: 0.66; padding:1.5rem 0 10rem  }
#accueil .recap {  display: flex; justify-content: space-between; text-align: center; margin: 0 -10px;}
#accueil .recap > div { width: 30%; border: 3px solid #fff; border-radius: 55px 55px 55px 0; padding: 6.3rem 4.0rem 9.3rem; position: relative; margin: 0 10px }
#accueil .recap > div .picto {  background:var(--color_primary_elements); position: absolute; top:-35px; left:50%; margin-left:-53px; width: 105px; }
#accueil .recap h2 { font-size: 3rem; font-weight: 800; padding-bottom: 3.8rem }
#accueil .recap h2 strong{  display: block; font-size: 5rem; font-weight: 800; padding-top: 1rem }
#accueil .recap .texte { line-height: 4rem; font-size: 2.5rem}
#accueil .recap .bouton { position: absolute; left:0; right: 0; bottom: -35px; display: none}
#accueil .recap .bouton a { max-width: 220px}
#accueil .recap > div.resultats { background: #fff; padding-top: 1.3rem}
#accueil .recap > div.resultats .picto_on { padding-bottom: 1.2rem;}
#accueil .recap > div.resultats h2 { color:var(--color_primary_elements); padding-bottom: 1.4rem }
#accueil .recap > div.resultats  .bouton {bottom: 15px}
#accueil .recap > div.resultats  .texte { color:#B5BAD0}
#etape-intro .conteneur {   border: 3px solid #fff; border-radius: 55px 55px 55px 0; position: relative; margin-top: 3.5rem; padding: 9rem 13rem}
#etape-intro .picto {  background:var(--color_primary_elements); position: absolute; top:-35px; left:150px; width: 105px; text-align: center}
#etape-intro .titre { font-size: 4rem; line-height: 4rem; font-weight: 800; padding-bottom: 3.5rem}
#etape-intro .presentation { font-size: 3.5rem; line-height: 4.5rem; font-weight: 300; padding-bottom: 4.5rem}
#etape-intro .rule li { display: flex; align-items: center; font-size: 3rem; line-height: 3.5rem; font-weight: 600; overflow: hidden; padding: 5px 0  }
#etape-intro .rule li p { flex:0 0 60px;}
#etape-intro .rule li span { display: block; overflow: hidden; }
#etape-intro .bouton {   position: absolute; left:0; right: 0; bottom: -35px; text-align: center; display: none;}
#etape-termine {  text-align: center; padding: 6.5rem 0; display: flex; align-items: center; justify-content: center}
#etape-termine .titre { font-size: 6rem; line-height: 7rem; font-weight: 800; margin:7rem 0 10rem}
#etape-termine .bouton a { width: 240px; height: 70px; border: 1px solid #fff; display: inline-block; font-size: 22px; font-weight: bold; border-radius: 35px; line-height: 70px; color:#fff;  }
#etape-termine .bouton a:hover { background: #fff; color:var(--color_primary_elements)}

    /***** PAGES QUESTIONNAIRE******/
.questionnaire { padding:5rem 0 0; min-height:calc(100% - 177px); }
.questionnaire .intro {  padding-bottom: 7rem }
.questionnaire .intro .thematique {  font-size: 2rem; line-height:2.6rem; font-weight: bold }
.questionnaire .intro .question { font-size: 4rem; line-height: 4.5rem; font-weight: bold; padding:0.5rem 0 2rem  }
.questionnaire .intro .indication { font-size: 2.5rem; font-style: italic; font-weight: bold; color:#fff;  padding: 5px 10px; display: inline-block; background: #00A9F4; margin-bottom: 1.5rem }

.questionnaire .boutons { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; padding: 60px 0 120px}
.questionnaire .boutons p { padding: 13px;}
.questionnaire .boutons button, .questionnaire .boutons .checkbox label { transition:all 0.3s ease;  font-size: 2.2rem; font-weight: bold; border-radius: 35px; text-align: center;  line-height: 70px;  display: block; padding: 0; width: 240px; height: 70px; }
.questionnaire .boutons button  { color:#fff !important;   background:#78CC04;  }
.questionnaire .boutons button:hover { background: var(--color_primary_elements)}
.questionnaire .boutons button[type=submit][disabled] { background: #D5D5D5; color:#989898 !important; cursor: not-allowed}
.questionnaire .boutons .checkbox input { display: none;}
.questionnaire .boutons .checkbox label {  transition:all 0.1s ease;   border: 1px solid #D5D5D5; color:#989898 !important;  }
.questionnaire .boutons .checkbox input:checked + label { color:#fff !important;  border-color:var(--color_primary_elements);    background: var(--color_primary_elements);   }
.barre_temps {  position: fixed; left:0; right: 0;  bottom: 0;    width:100%;    height: 67px; background:#B5BAD0; overflow: hidden; white-space: nowrap; font-size: 2.5rem; font-weight: bold}
.barre_temps .questions {  position: absolute;    top: 0; bottom:0; left:34px; color:var(--color_primary_elements); white-space: nowrap; line-height: 67px;}
.barre_temps .questions span:first-child { font-weight:300; }
.barre_temps .timer {  position: absolute;    top: 14px; left:calc(100vw - 130px); color:var(--color_primary_elements);  align-items: center; justify-content: flex-end; display: flex; width:95px;}
.barre_temps .timer .chrono { padding-left: 10px; line-height: 0}
.barre_temps .barre_defilante {    height: 100%;    overflow: hidden;    width: 100%;    background-color:var(--color_primary_elements);    border-radius: inherit;    overflow: hidden;    position: relative;   /*transition: all 0.4s ease;*/}
.barre_temps .barre_defilante .questions, .barre_temps .barre_defilante .timer {    color: #fff;}
.custom_radio_checkbox { padding-bottom: 2.7rem }
.custom_radio_checkbox input{    display: none}
.custom_radio_checkbox label { position: relative; font-size: 2.8rem; line-height:3.5rem; transition:all 0.1s ease;padding-left: 55px; display: inline-block}
.custom_radio_checkbox label:before {  width: 32px; height: 32px; position: absolute; top:0px; left:0; border: 3px solid #ccc; background: #fff;  content: '';      }
.custom_radio_checkbox input:checked + label { text-shadow:1px 0  var(--color_primary_elements); color:var(--color_primary_elements);}
.custom_radio_checkbox [type="radio"] + label:before{  border-radius: 100%    }
.custom_radio_checkbox input:checked + label:after, .custom_radio_checkbox input:not(:checked) + label:after {   content:"";    width: 32px;    height: 32px;    background: var(--color_primary_elements);    position: absolute;    top: 3px;    left: 3px;    border-radius: 100%;     transition: all 0.2s ease;}
.custom_radio_checkbox [type="checkbox"]:checked + label:after, .custom_radio_checkbox [type="checkbox"]:not(:checked) + label:after  { border-radius: 0}
.custom_radio_checkbox input:not(:checked) + label:after {    opacity: 0;    transform: scale(0);}
.custom_radio_checkbox input:checked + label:after {    opacity: 1;    transform: scale(1);}

/* type bouton */
.reponse-choix-boutons { display: flex; flex-wrap: wrap; padding-bottom: 2rem  }
.reponse-choix-boutons p { flex:0 0 50%; padding-right: 3.5rem}

/* type texte */
.reponse-choix-texte { display: flex; flex-wrap: wrap; margin:0 -1.7rem   }
.reponse-choix-texte p { padding:0 1.7rem 3.5rem}
.reponse-choix-texte input { display: none;}
.reponse-choix-texte label { transition:all 0.1s ease;font-weight: 300; font-size: 2.8rem; border-radius: 39px; border: 1px solid #707070;  display: block; text-align: center; line-height:3.9rem; padding: 1.4rem 8rem}
.reponse-choix-texte input:checked + label { color:var(--color_primary_elements);  text-shadow:1px 0  var(--color_primary_elements); border-color:var(--color_primary_elements);    box-shadow: 0 0 0 4px var(--color_primary_elements);  }

/* type texte libre */
.reponse-choix-texte-libre { }
.reponse-choix-texte-libre p { font-size: 2.8rem; line-height: 3.5rem; display: flex; align-items: center; padding-bottom: 20px; white-space: nowrap}
.reponse-choix-texte-libre p label { font-weight: bold;  }
.reponse-choix-texte-libre p input[type=number], .reponse-choix-texte-libre p input[type=text] {-moz-appearance: textfield;    transition: all 0.1s ease;    font-weight: 300;    font-size: 2.8rem;    border-radius: 39px;    border: 1px solid #707070;    display:inline-block;    text-align: center;    line-height: 3.9rem;    padding: 1.4rem 8rem; margin-bottom: 0 !important;  }
.reponse-choix-texte-libre p input::-webkit-outer-spin-button, .reponse-choix-texte-libre p input::-webkit-inner-spin-button { -webkit-appearance: none;; }
.reponse-choix-texte-libre p span { padding-left: 15px;}
.reponse-choix-texte-libre.une-ligne { display: flex; flex-wrap: wrap }
.reponse-choix-texte-libre.une-ligne p {margin-right: 60px; }
.reponse-choix-texte-libre.une-ligne p:last-child { margin-right: 0}


/* type pictos */
.reponse-choix-pictos  { overflow: hidden; margin: 0 -5px }
.reponse-choix-pictos p { padding: 0 1% 2.5rem; /*float: left; width: 50%*/}
.reponse-choix-pictos label { border:1px solid transparent; /*border:1px solid #C1C1C1;*/ padding: 15px; position: relative; display: block}
.reponse-choix-pictos label img { /*width: 100%*/ max-width: 180px; }
.reponse-choix-pictos.nb-pictos-1 label img, .reponse-choix-pictos.nb-pictos-2 label img { max-width: 450px }
.reponse-choix-pictos .reponse-container { display: flex; flex-wrap: wrap; justify-content: center; align-items: center; gap: 20px 60px; width:100% }
.reponse-choix-pictos.nb-pictos-4 .reponse-container  {gap: 20px 10px;}
.reponse-choix-pictos label:before { content:""; position: absolute; top:-1px; left:-1px; right: -1px; bottom: -1px; border: 10px solid var(--color_primary_elements); opacity: 0; visibility: hidden; transition: all 0.2s ease; }
.reponse-choix-pictos label:after {  content:""; position: absolute; top:-1px;right: -1px; width: 35px; height: 35px;  background:var(--color_primary_elements) url(../images/picto-check-02.svg) no-repeat center; background-size: 20px auto; opacity: 0; visibility: hidden; transition: all 0.2s ease; }
.reponse-choix-pictos input { display: none}
.reponse-choix-pictos input:checked + label { border-color:  var(--color_primary_elements);}
.reponse-choix-pictos input:checked + label:before, .reponse-choix-pictos  input:checked + label:after { opacity: 1; visibility: visible}
.reponse-choix-pictos .reponse-videos { margin: 0;}
.reponse-choix-pictos .reponse-videos > div { flex: 0 0 25%; }
.reponse-choix-pictos .reponse-videos .video {text-align:left;  }
/* type draggable visuel */
.reponse-visuel-draggable { display: flex; margin:0   }
.reponse-visuel-draggable > div {flex:0 0 50%; }
.reponse-visuel-draggable > div:nth-child(1) { padding-right: 5px}
.reponse-visuel-draggable > div:nth-child(2)  { padding-left: 5px; }
.reponse-visuel-draggable .conteneur_steps { display: flex; flex-wrap: wrap;  }
.reponse-visuel-draggable .conteneur_steps .step:last-child .cadre:before { display: none;}
.reponse-visuel-draggable .conteneur_steps.visuel .step .cadre:before { display: none;}
.reponse-visuel-draggable .conteneur_steps.visuel .cadre { z-index: 10; cursor: move}
.reponse-visuel-draggable .step { padding: 0 35px 12.5px 0; flex: 0 0 33.33%}
.reponse-visuel-draggable .step .num { font-size: 2rem;   color:var(--color_primary_elements); font-weight: normal; padding-bottom: 5px}
.reponse-visuel-draggable .step .cadre {  position: relative; line-height: 0; display: inline-block}
.reponse-visuel-draggable .step .cadre img { max-width: 100%;}
.reponse-visuel-draggable .step .cadre:before { content:""; background:url(../images/arrow-right-02.svg) no-repeat; width: 17px; height: 28px; background-size: auto 28px; position: absolute; top:50%; right:-28px; margin-top: -14px; }
.reponse-visuel-draggable .conteneur_steps.mf-4parligne .step {  flex: 0 0 25% !important; }

/* type boîtes */
.reponse-boites {display: flex; margin-top: 3rem; padding-bottom: 3rem; flex-wrap: wrap; }
.reponse-boites > div:nth-child(1) {  margin-top: 37px; }
.reponse-boites > div:nth-child(1) > div {}

.reponse-boites > div {  flex:1;}
.reponse-boites > div.separator {  flex:.2;}
.reponse-boites .titre_col { margin-bottom: -10px;text-align: center; position: relative; z-index: 2; padding: 0 40px; justify-content: center; align-items:flex-end; display: flex;  }
.reponse-boites .titre_col span { display: inline-block; font-weight: bold; background:#fff; color:#00a9f4; font-size: 2.2rem; line-height:2.4rem;  }
.reponse-boites .titre_col span::after { content: ''; display: block; background: #fff; height: 20px; margin-top: -22px; width: 200px; }

.reponse-boites.mf-2parligne .sortable li, .reponse-boites.mf-2parligne .droppable div { width: 48%; float: left; margin-left: 2% ; }
.reponse-boites .sortable li, .reponse-boites .droppable div { margin-bottom:10px; }
.reponse-boites .droppable div:last-child { margin-bottom:0; }
.reponse-boites .une_colonne_droppable .droppable { height: 100%}
.reponse-boites .droppable {   text-align: center; position: relative;  border:2px solid transparent;  border-radius: 40px 0 20px 20px;  border-color: #ccc; margin: 0 20px; padding: 30px 20px; transition: all 300ms ease }
.reponse-boites .droppable p { display: none; color:#aaa; margin-top: 10px; }
.reponse-boites .droppable.ui-droppable-active { /*background: #ececec;*/ }
.reponse-boites .droppable.ui-droppable-active p { display: block;}
.reponse-boites .droppable.ui-droppable-hover { opacity: .7}
.reponse-boites .sortable li, .reponse-boites .droppable li {  text-align: center; position:relative;  }
.reponse-boites.mf-2parligne.mf-big .sortable .draggable, .reponse-boites.mf-2parligne.mf-big .droppable .draggable {  min-height: 50px; line-height: 50px; }
.reponse-boites .draggable{ cursor: move;  }
.reponse-boites .sortable li img, .reponse-boites .droppable img { width: 100%; max-width: 100%;}
.reponse-boites .draggable-text { font-weight: bold; background:#00a9f4; color:#fff; font-size: 2.2rem; padding: 8px; text-align: center }
.reponse-boites .depot {  }
.reponse-boites .deco { border: 1px dashed #aaa; position:absolute; width: 100%; top:1px; bottom: 1px; }


/* type lego */
.reponse-lego { display: flex; justify-content: space-around; flex-wrap: wrap}
.reponse-lego .modele { flex:1; text-align: center; display: flex; align-self: center; justify-content: center}
.reponse-lego .modele img { width: 100%; max-width: 500px;}
.reponse-lego .legos { flex:0 0 315px; display: flex; padding: 0 20px }
.reponse-lego .legos > div { padding: 0 15px;}
.reponse-lego .legos .deco{ border: 1px dashed #aaa;  border-radius: 2px; position:absolute;}
.reponse-lego .legos [id^=lego]{  line-height: 0;margin-bottom:18px;}
.reponse-lego .legos [id^=lego] img{  cursor: move}
.reponse-lego .legos #lego-0 { margin-bottom:36px; }
.reponse-lego .legos #lego-0 .deco { width:72px; height: 144px; }
.reponse-lego .legos #lego-1 .deco { width:72px; height: 108px; }
.reponse-lego .legos #lego-2 .deco { width:72px; height: 36px; }
.reponse-lego .legos #lego-3 .deco { width:144px; height: 36px; }
.reponse-lego .legos #lego-4 .deco { width:36px; height: 36px; }
.reponse-lego .legos #lego-5 .deco { width:108px; height: 36px; }
.reponse-lego .legos #lego-6 .deco { width:72px; height: 72px; }
.reponse-lego .board { flex:0 0 576px; height: 288px; outline:1px solid #707070}
.reponse-lego .hole { background:url('../images/lego-hole.svg') no-repeat; width: 36px; height: 36px; float:left;}

@media all and (max-width:1400px) {
    .reponse-lego .legos { padding: 0 10px; flex:0 0 275px}
    .reponse-lego .legos > div { padding: 0 10px;}

}

@media all and (max-width:1200px) {
    .reponse-lego { margin-top: -20px}
    .reponse-lego .modele { flex: 0 0 100%; padding-bottom: 30px}
    .reponse-lego .modele img { max-width: 320px;}
}


    /* type sortable etiquette */
.reponse-etiquette-sortable .conteneur_etiquettes {    column-count: 2;}
.reponse-etiquette-sortable .conteneur_etiquettes .etiquette, .ui-state-highlight {  margin-bottom: 23px; height: 60px; overflow: hidden }
.reponse-etiquette-sortable .conteneur_etiquettes .etiquette .numero {  float:left;  width: 60px; height: 60px; line-height: 60px; color:#fff; font-size: 18px; font-weight: bold; text-align:center; background:var(--color_primary_elements); }
.reponse-etiquette-sortable .conteneur_etiquettes .etiquette .conteneur { border: 1px dashed #B6BACE;  height: 60px; margin-left: 85px }
.reponse-etiquette-sortable .conteneur_etiquettes .etiquette .cadre { border: 1px solid var(--color_primary_elements); height: 60px; margin: -1px; position: relative; z-index: 2; background: #fff; text-align: center; line-height: 60px;font-size: 18px;  color:var(--color_primary_elements); font-weight: normal}
.ui-state-highlight { border: 2px dashed #B6BACE}

    /* type videos */
.reponse-videos { display: flex; margin: 0 -40px; align-items: center  }
.reponse-videos  > div {flex:0 0 50%; padding: 0 40px; }
.reponse-videos  > div p.custom_radio_checkbox:last-child { padding-bottom: 0}
.reponse-videos .video { text-align: center }
.reponse-videos .video iframe { max-width: 100%  }
.reponse-videos .video img {max-height: 500px; max-width: 500px; }

    /* lecteur audio */
.audio-player {  width: 500px; max-width: 100%; background: #f1f3f4; color: #000; font-size: 2.5rem; overflow: hidden; margin-bottom: 3rem; border-radius: 39px; }
.audio-player .timeline { background: #c1c2c3; width: 100%; position: relative; cursor: pointer;  }
.audio-player .timeline .progress { background: #00a9f4; width: 0%; height: 100%; transition: 0.25s; }
.audio-player .controls { display: flex; justify-content: space-between; align-items: center; padding: 15px 20px; }
.audio-player .controls > * { display: flex; justify-content: center; align-items: center; }
.audio-player .controls > .timeline { display: inline; height:5px; }
.audio-player .controls .toggle-play.play { cursor: pointer; position: relative; left: 0; height: 0; width: 0; border: 7px solid #0000; border-left: 13px solid #000; }
.audio-player .controls .toggle-play.play:hover { transform: scale(1.1); }
.audio-player .controls .toggle-play.pause { height: 15px; width: 20px; cursor: pointer; position: relative; }
.audio-player .controls .toggle-play.pause:before { position: absolute; top: 0; left: 0px; background: #000; content: ""; height: 15px; width: 3px; }
.audio-player .controls .toggle-play.pause:after { position: absolute; top: 0; right: 8px; background: #000; content: ""; height: 15px; width: 3px; }
.audio-player .controls .toggle-play.pause:hover { transform: scale(1.1); }
.audio-player .controls .time { display: flex; padding-right: 10px }
.audio-player .controls .time > * { padding: 2px; }
.audio-player .controls .volume-container { cursor: pointer; position: relative; z-index: 2; }
.audio-player .controls .volume-container .volume-button { height: 26px; display: flex; align-items: center; }
.audio-player .controls .volume-container .volume-button .volume { transform: scale(0.7); }
.audio-player .controls .volume-container .volume-slider { position: absolute; top: 15px; left: -3px; z-index: -1; width: 0; height: 15px; background: white; box-shadow: 0 0 20px #000a; transition: 0.25s; }
.audio-player .controls .volume-container .volume-slider .volume-percentage { background: coral; height: 100%; width: 75%; }
.audio-player .controls .volume-container:hover .volume-slider { left: -123px; width: 120px;}

/***** PAGES RESULTATS******/
.resultats { padding-top: 3rem }
.resultats .back a { background:url(../images/picto-back.svg) no-repeat; background-size: 3.6rem; font-size: 1.6rem; font-weight: 600; padding-left:5rem; display: inline-block; height: 3.6rem; line-height: 3.6rem; margin-bottom: 3rem}
.resultats .telecharger { float: right; }
.resultats .telecharger a { font-size: 2rem; font-weight: 400;  color:var(--color_primary_elements);  text-decoration: underline; }
.resultats .titre { font-size: 2.5rem; font-weight: 900; line-height: 4rem; text-transform: uppercase }
.resultats .texte { font-size: 2.0rem; line-height: 2.5rem; color:#454545; font-weight: normal}
.conteneur_resultats  { display: flex; flex: 1 1 auto;    flex-wrap: wrap; color:#454545; padding: 3rem 0; justify-content: space-between; margin-top: 5rem }
.conteneur_resultats > div { position: relative; border: 2px solid #B6BACE;  ; border-radius:0 55px 55px 55px;  padding:0 30px 20px;flex-basis: 0;    -webkit-box-flex: 1;    flex-grow: 1;     flex: 0 0 33%;    max-width: 33%; }
.conteneur_resultats > div:last-child {     flex: 0 0 23.9%;    max-width: 23.9%;}
.conteneur_resultats  .entete {  margin:-11px 0 0 -10px; display: inline-block; padding: 0 20px 20px 11px; background: #fff;   }
.conteneur_resultats  .entete div { display: flex; }
.conteneur_resultats  .entete .picto { padding-right: 10px }
.conteneur_resultats  .entete .picto img { height: 50px;  }
.conteneur_resultats  .entete .txt { font-size: 13px; font-weight: 600; line-height:1.4}
.conteneur_resultats  .entete .txt strong { display: block; font-weight: 800; font-size: 2.9rem; line-height:1.2  }
.conteneur_resultats .recap {  display: flex; align-items: flex-end; border-bottom: 2px solid #B6BACE; flex-wrap:wrap; padding-bottom: 15px; padding-right:50px; margin-bottom: 15px; }
.conteneur_resultats .recap > div { display: flex; align-items: center; padding-right: 15px; padding-bottom: 10px}
.conteneur_resultats .recap .picto { margin-right: 10px; }
.conteneur_resultats .recap .picto img { height: 32px; }
.conteneur_resultats .recap .txt { font-size: 12px;  font-weight: normal}
.conteneur_resultats .recap .txt strong { color:var(--color_primary_elements); display: block; font-size: 1.6rem }
.conteneur_resultats .liste li { display: flex; font-size: 15px; font-weight: normal; justify-content: space-between; padding: 10px 0  }
.conteneur_resultats .liste li .texte { padding-right: 10px;}
.conteneur_resultats .liste li > div { display: flex; flex:0 0 195px; align-items: center; justify-content: space-between}
.conteneur_resultats .liste li .barre {  width: 140px; height: 15px; background: #EFEFEF; border-radius: 15px;   }
.conteneur_resultats .liste li .barre div { background:var(--color_primary_elements);  border-radius: 15px; height: 15px;  }
.conteneur_resultats .liste li  .prc { font-size: 16px; font-weight: bold;  color:var(--color_primary_elements);  padding-left: 10px; text-align: right}
.conteneur_resultats .liste li  .loading { width: 170px; background: #EFEFEF; display: block; height: 20px; }
.conteneur_resultats .comments { font-size: 1.3rem; font-weight: 600; padding:20px 0 10px}
.conteneur_resultats textarea,
.conteneur_resultats .textarea { background: #EFF4FD; border: 0; border-radius:0 55px 55px 55px; padding: 20px; font-weight: normal; min-height: 200px}
.chart { text-align: center; position: relative }
.chart .circular-chart {    display: block;     max-width: 225px;    max-height: 250px; margin: 0 auto}
.chart .circle-bg {    fill: none;    stroke: #eee;    stroke-width: 3.8;}
.chart .circle {    fill: none;    stroke-width: 2.8;    stroke-linecap: round;    animation: progress 1s ease-out forwards; stroke: var(--color_primary_elements);}
.chart .percentage {    fill:var(--color_primary_elements);  font-weight: 800;     font-size: 10px;  font-family: 'Open Sans', Arial, Verdana;   text-anchor: middle;}
.chart .prc { color:var(--color_primary_elements);  font-weight: 800;     font-size: 5.8rem; position: absolute; top:0; left:0; right: 0; bottom: 0; display: flex; justify-content: center; align-items: center   }
@keyframes progress {    0% {        stroke-dasharray: 0 100;    }}
.conteneur_resultats .circle_top .chart  { position: absolute; top:15px; right: 15px; width: 80px; height: 80px }
.conteneur_resultats .circle_top .chart .prc { font-size: 19px; }


/***** PAGES ENTRAINEMENT ******/
.titre_entrainement { font-size: 7rem; text-align: center;   line-height: 7rem; margin-bottom:4.5rem; font-weight: 800; padding-top: 3rem }
.infos_entrainement { font-size: 3.5rem; text-align: center;   line-height: 4.5rem; margin-bottom:1.5rem; font-weight: bold   }
.txt_avant { font-size: 3rem; text-align: center;   line-height: 3.5rem; margin-bottom:1.5rem; font-weight: bold; padding-top: 3rem   }
.bouton_entrainement { justify-content: center; flex-wrap: wrap; display: flex; align-items: center}
.bouton_entrainement.consigne  .btn-picto {width: 360px  }
.bouton_entrainement .btn-picto { font-size: 2.2rem;  }
.bouton_entrainement .passer { padding: 1rem 0 1rem 3rem}
.bouton_entrainement .passer a  { text-align:center; color:#fff;   font-size: 3rem; text-decoration:underline; font-weight: bold; background: url(../images/arrow_right_white.svg) no-repeat right center; display: inline-block; vertical-align: top; padding: 5px 30px 7px 0;  }
.bouton_entrainement .passer a:hover  { text-decoration: none; }
.liste_consignes { max-width:100%; margin:40px auto  }
.liste_consignes.p_consignes li { min-height: 150px  }
.liste_consignes  { display: flex; flex-wrap: wrap  }
.liste_consignes li { flex:0 0 50%; padding: 10px;  }
.liste_consignes li .picto { flex: 0 0 100px; text-align: center; line-height: 0}
.liste_consignes li .picto img {  }
.liste_consignes li > div { height:100%; display: flex; border: 3px solid #fff; border-radius: 35px; align-items: center; padding: 3.5rem; font-weight: bold; font-size: 3.5rem; line-height:4rem  }
.liste_consignes li:nth-child(1) > div { border-bottom-right-radius:0 }
.liste_consignes li:nth-child(2) > div { border-bottom-left-radius:0 }
.liste_consignes li:nth-last-child(1) > div { border-top-left-radius:0}
.liste_consignes li:nth-last-child(2) > div {  border-top-right-radius:0}
.liste_consignes.p_intro li:nth-child(3) > div { border-top-right-radius:0; border-bottom-right-radius:0}
.liste_consignes.p_intro li:nth-child(4) > div {border-top-left-radius:0; border-bottom-left-radius:0 }


#entrainement-termine { display: flex; align-items: center; justify-content: center; text-align: center  }
#entrainement-termine .ligne_01, #entrainement-termine .ligne_02 {  font-size: 6rem; font-weight: 600}
#entrainement-termine .ligne_02 { font-weight: 800; padding: 3rem 0 10rem}

.conseils_points { display: flex;    justify-content: space-around;   text-align: center;    margin: 6rem -10px 6rem;}
.conseils_points > div { width: 30%;margin: 0 50px;}
.conseils_points div.cadre { border: 3px solid #fff;border-radius: 0 55px 0 55px;padding: 2.3rem 4rem 10rem;position: relative; margin-bottom: 6rem}
.conseils_points .nbr { font-size: 5rem; font-weight: bold; padding-bottom: 5rem }
.conseils_points .txt { font-size: 2.5rem; font-weight: bold;  line-height: 4rem }
.conseils_points .info { font-size: 2.5rem; font-weight: bold;  line-height: 3rem }
.conseils_points .picto { position: absolute; left:0; right: 0; bottom:-40px; text-align: center; }
#entrainement-consignes .bouton  { text-align: center }
#entrainement-consignes .bouton a { width: 340px }




    /*--------- [ LAYOUT ] ---------*/

html.menu-open { overflow: hidden;}
#header { background: #fff;   z-index: 9999  }
#header .row { height: 110px; }
#header .col-12-12 { display: flex;align-items: center; justify-content: space-between}
#header .conteneur { display: flex;align-items: center; justify-content: space-between; }
#header #hmobile {   width: calc(100% - 114px); text-align: right}
#header.deco #hmobile { width: auto}
#header .hlogo {   display: inline-block; vertical-align: top}
#header .hlogo img { height: 80px}
#header .helements { display: flex; align-items: center}
.hlogo_part { border-left: 1px solid #707070; margin-left: 37px; padding: 10px 0 10px 37px; line-height: 0}
.hlogo_part img { height: 60px}
.hamburger, #hmenu .arrow  { display:none;}
#header .hliensdeco { font-size: 1.6rem; font-weight: bold; display: flex; align-items: center }
#header .hliensdeco li { padding-left: 70px; }
#header .hliensdeco li:first-child { padding-left: 0; }
#header .hliensdeco a { font-size: 2.1rem; font-weight: normal; color:#72797F; transition:all 0.3s ease; }
#header .hliensdeco li.current_page_item  a, #header .hliensdeco li a:hover { color:#97bf0d}
#header .profil { display: flex; font-weight: bold; padding-right: 25px; align-items: center}
#header .profil .visuel { line-height: 0; padding-left: 15px;}
#header .profil img { width: 54px; height: 54px; border-radius: 54px;  }
#header .profil .nom { font-size: 2.6rem;  line-height: 2.2rem; padding-bottom: 0.3rem; padding-top: 0.4rem}
#header .profil .fonction { text-transform: uppercase; font-size: 1.1rem; line-height: 1.8rem;  }
#header .profil .fonction a { color: #97BF0D; }
#header  .deco a { display: flex; }
#header  .deco a:hover svg path { fill:var(--color_primary_elements);  }



@media all and (max-width:1300px) {
    .conteneur_resultats > div { flex: 0 0 36%;        max-width: 36%;}
    .conteneur_resultats .liste li { display: block}
    .conteneur_resultats .liste li .texte { padding-bottom: 5px}
    .reponse-boites .droppable { margin: 0 10px; padding-top: 20px; min-height: 35vh}
    .reponse-boites > div:nth-child(1) { padding-right: 20px; flex:0 0 220px;}
    .reponse-boites .titre_col { margin-bottom: 10px; padding: 0; }
    .reponse-boites  .titre_col span { padding: 0 5px;  font-size: 2rem}
    .reponse-boites .draggable-text { font-size: 2rem}

}

@media all and (max-height:1150px) {
    html { font-size: 45%}
    #header .row { height: 75px; }
    #header #hmobile {  width: calc(100% - 100px);}
    #header .hlogo img { height: 50px}
    .hlogo_part { border: 0; margin-left: 0; padding-left: 0}
    .hlogo_part img { height: 40px}
    #accueil .recap > div.resultats  .bouton {bottom:-35px}
    #accueil .recap > div.resultats  .bouton a { opacity: 1}
    #etape-intro .presentation { font-size: 2.5rem; line-height: 3.5rem;}
    .conteneur_bleu { padding: 4.5rem 0 3rem; min-height: calc(100% - 75px);}
    #connection .content img { margin-bottom: 3rem}
    .custom_radio_checkbox label:before { width: 24px; height: 24px; top:-2px;}
    .custom_radio_checkbox input:checked + label:after, .custom_radio_checkbox input:not(:checked) + label:after {   width: 24px; height: 24px; top:1px; }
    .custom_radio_checkbox label { padding-left: 45px;}
    .questionnaire { padding-top: 3rem;     min-height: calc(100% - 75px);}
    .questionnaire .intro { padding-bottom: 3rem}
    .questionnaire .boutons { padding-top: 60px }
    .questionnaire .boutons button, .questionnaire .boutons .checkbox label { height: 60px; line-height: 60px;}
    .barre_temps { height: 45px; line-height: 45px; }
    .barre_temps .questions { line-height: 45px;}
    .barre_temps .timer { top:2px;}
    .barre_temps .timer .chrono { display: none;}
    .reponse-visuel-draggable .step .num { font-size: 1.5rem}
    .reponse-videos .video iframe { max-height: 280px  }
    .titre_entrainement, .txt_avant { padding-top:0 }
    .titre_entrainement { font-size: 6rem; margin-bottom: 3.5rem}

    .liste_consignes { margin: 20px auto}
    .liste_consignes li > div {  font-size: 2.5rem; line-height: 3.5rem; padding: 2.5rem }
    .liste_consignes li .picto { flex:0 0 80px;}
    .liste_consignes li .picto img { max-width: 45px;}
}

@media all and (max-height:900px) {
    .questionnaire .boutons { padding-top: 0}
}


@media all and (max-width:1023px) {
    html { font-size: 45%}
    #connection .row .col-50:nth-child(1) { display: none;}
    #connection .row .col-50:nth-child(2) { border-radius: 0; max-width: 100%;     flex: 0 0 100%;}
    #header .hlogo { display: none;}
    .hlogo_part { border:0; margin-left: 0; padding-left: 0}
    #header #hmobile { width: 100%}
    #accueil .recap, .conseils_points { flex-direction: column; padding: 0 25px}
    #accueil .recap > div, .conseils_points > div { width: 100%; margin: 0 0 100px}
    #accueil .recap > div.resultats { margin-bottom: 50px}
    .conseils_points { margin-bottom: 0}
    .conseils_points > div { margin-bottom: 50px;}
    .conseils_points .nbr { padding-bottom: 2rem}
    .conseils_points .txt br { display: none;}
    .conseils_points div.cadre { padding-bottom: 8.5rem}


    .conteneur_bleu { padding-bottom: 8.5rem; border-radius: 0}
    #etape-intro .conteneur { padding: 55px 30px}
    .reponse-choix-boutons { display: block}
    .reponse-choix-boutons p { flex: 0 0 100%}
    .questionnaire .boutons button, .questionnaire .boutons .checkbox label { width: 150px;}
    .questionnaire .boutons p { padding: 8px}
    .reponse-choix-texte p { padding: 0 1.1rem 2.2rem}
    .reponse-choix-pictos p { width: 25%}
    .reponse-visuel-draggable { display: block}
    .reponse-videos { display: block; margin: 0}
    .reponse-videos > div { padding: 0 0 20px}
    .reponse-etiquette-sortable .conteneur_etiquettes { column-count: 1;}
    .reponse-etiquette-sortable .conteneur_etiquettes .etiquette .conteneur { margin-left: 55px;}
    .reponse-etiquette-sortable .conteneur_etiquettes .etiquette, .ui-state-highlight { height: 40px; margin-bottom: 10px;}
    .reponse-etiquette-sortable .conteneur_etiquettes .etiquette .numero { width: 40px; line-height: 40px}
    .reponse-etiquette-sortable .conteneur_etiquettes .etiquette .cadre { height: 40px; line-height: 40px}
    #etape-termine .titre {  line-height: 3.5rem; font-size: 3rem}
    #etape-termine .picto img  { width: 80px;}
    #etape-termine .bouton a { width: 150px; height: 60px; line-height: 60px; font-size: 2.2rem}
    .conteneur_resultats { display: block}
    .conteneur_resultats > div { flex:0 0 100%!important;; max-width: 100% !important; margin: 0 0 50px}

    .reponse-boites { margin-top: 0}
    .reponse-boites > div:nth-child(1) { flex:0 0 100%}
    .reponse-boites .sortable { display: flex; margin:0 -5px 20px; flex-wrap: wrap}
    .reponse-boites .sortable li {  margin: 5px;}
    .reponse-boites .droppable { min-height: 30vh}


}

@media all and (max-width:989px) {
    .liste_consignes li { flex: 0 0 100%; padding: 0 0 20px; border-radius:35px !important;}
    .liste_consignes li div { border-radius: 35px !important;}
    .liste_consignes.p_consignes li { min-height: 0}

}