/* 
    LE CSS EST SÉPRARÉ EN SECTION. UNE SECTION DÉBUTE AVEC UN COMMENTAIRE ET SE TERMINE AU PROCHAIN COMMENTAIRE 
*/


/* CSS GLOBAL */
@font-face {
    font-family: 'Avenir Next Regular';
    font-style: normal;
    font-weight: normal;
    src: local('Avenir Next Regular'), url('/assets/fonts/AvenirNextLTPro-Regular.otf') format('opentype');
}

@font-face {
    font-family: 'Avenir Next Bold';
    font-style: normal;
    font-weight: normal;
    src: local('Avenir Next Bold'), url('/assets/fonts/AvenirNextLTPro-Bold.otf') format('opentype');
}

body{
    font-family: 'Avenir Next Bold';
    overflow-x: hidden;
}

.font_weight_regular{
    font-family: 'Avenir Next Regular';
}

.ui-draggable-handle{
    -ms-touch-action: none;
        touch-action: none;
}


#image_background{
    display:block;
    width:100%; 
    height:100%; 
    position:fixed; 
    top:0px; 
    z-index:-100; 
    background-image: url('/assets/images/image_fond.png'); 
    background-size:cover;
}

#image_contour_borne_parent{
    position: absolute; 
    margin: auto; 
    display: block; 
    bottom: 0px; 
    top: 0px; 
    left: 50%; 
    transform: translate(-50%, 0);
}

#image_contour_borne{
    display:block;
    width:1900px; 
    height:3356px; 
    margin:auto; 
    position:relative; 
    background-image: url('/assets/images/image_borne4.png'); 
    z-index:-2; 
    background-size:cover; 
    left:-5px; 
    top:-37px;
}

.bouton_revenir{
    position:absolute; 
    left:20px; 
    top:525px; 
    z-index:999;
}
.bouton_revenir a{
    width: 55px; 
    background-color:#8fa21f;
}
.bouton_revenir a:hover{
    background-color:#8fa21f;
}



/* POUR LE HTML SUR L'IMAGE D'ACCUEIL */
.accueil_texte_borne{
    display:none;
}

#image_accueil{
    width:1080px; 
    height:1920px; 
    margin:auto; 
    position:absolute; 
    background-image: url('/assets/images/borne_ecran_complet6.png'); 
    z-index:99999; 
    background-size:cover; 
    top:182px; 
    left:1px; 
    right:0;
}
#btn_fermer_image_accueil{
    width:353px; 
    position:relative; 
    top:887px; 
    left:393px; 
    background:#FF0000; 
    color:white; 
    font-weight:bold; 
    font-size:40px; 
    text-align:center; 
    border-radius:45px; 
    padding:10px 0px; 
    cursor:pointer;
}

#image_accueil_partie_bas{
    position:absolute; 
    bottom:20px; 
    left:0; 
    right:0;
}

#accueil_titre_ligne_vert{
    margin:auto; 
    margin-top:27px; 
    width:fit-content; 
    height:fit-content; 
    font-size:32px; 
    font-weight:bold; 
    text-align:center; 
    color:white; 
    border-top: 6px solid #90C83C; 
    border-bottom: 6px solid #90C83C;
}
#accueil_titre_ligne_vert>div{
    margin-left:10px; 
    margin-right:10px;
}

#accueil_carousel_metier_parent_parent{
    display:flex; 
    justify-content:center; 
    width:100%; 
    margin-top:12px;
}

#accueil_carousel_metier_parent{
    width:761px; 
    margin-top:29px; 
    overflow-x:hidden;
}

#accueil_carousel_metier{
    display:flex; 
    justify-content:space-between; 
    width: 4040px; 
    position:relative;
    overflow: hidden;
}

.accueil_encadre_metier{
    width:350px; 
    height:125px; 
    cursor:pointer; 
    color:white; 
    text-align:center; 
    font-size:21px; 
    font-weight:bold; 
    display:flex; 
    align-items:center;
}
.accueil_encadre_metier>div{
    width:100%; 
    height:76px;
    padding:10px;
}
.accueil_encadre_metier>div.accueil_encadre_metier_sinistre, .accueil_encadre_metier>div.accueil_encadre_metier_op_potable,
.accueil_encadre_metier>div.accueil_encadre_metier_ventilation{
    height:102px;
}

#accueil_fleche_gauche{
    width:75px; 
    position:relative; 
    right:426px; 
    top:53px; 
    cursor:pointer;
}

#accueil_fleche_droite{
    width:75px; 
    position:relative; 
    left:426px; 
    top:53px; 
    cursor:pointer;
}

#accueil_encadre_vert{
    margin:auto; 
    margin-top:46px; 
    margin-bottom: 38px;
    width:761px; 
    height:328px; 
    border:4px solid #90C83C;
}

#accueil_bandeau_vert{
    width:100%; 
    height:92px; 
    background-color:#90C83C;
}
#accueil_bandeau_vert>img{
    width:79px; 
    margin-top:4px; 
    margin-left:20px; 
    float:left;
}
#accueil_bandeau_vert>span{
    color:white; 
    font-size:22px; 
    font-weight:bold;
    margin-left:14px; 
    position:relative; 
    top:31px; 
    float:left;
}

#accueil_texte_encadre{
    height:auto; 
    width:97%; 
    color:white; 
    font-size:19px; 
    margin:15px; 
    line-height:31px;
}

#accueil_logo_gouv{
    width:100%; 
    display:flex; 
    align-items:center; 
    justify-content: center;
    margin-top:20px;
}
#accueil_logo_gouv>img{
    width:320px;
}

#qrcode_image_accueil_parent{
    display:none;
}

a:hover:after {
    content: attr(data-title);
    position: absolute;
    top: 100%;
    left: 80%;
  }


/* POUR LA VUE DE LA BORNE UNE FOIS UN MÉTIER CHOISI */
#div_ecran_borne{
    width:1080px; 
    height:1920px; 
    margin:auto; 
    margin-top: 182px; 
    background-image: url('/assets/images/borne_ecran_complet_vide2.png'); 
    position:relative;
}

#espace_haut_video{
    width:100%; 
    height:480px;
}


/* VIDEO TEMOIGNAGE */
.splide__slide{
    width: 100%; 
    height:606px;
}

.video_temoignage_thumbnail{
    width:300px; 
    height:300px; 
    border:1px solid black; 
    display:block; 
    float:left; 
    margin:45px; 
    background-size: contain; 
    border-radius:25px; 
    cursor:pointer; 
    display:flex; 
    justify-content:center; 
    align-items:center;
}


/* POUR LA VIDÉO PRINCIPALE ET LES JEUX */
#main_video_parent{
    position:relative;
    max-width:1920px;
}

#btn_retour_algo_parent{
    position:absolute; 
    right:90px; 
    top:28px; 
    z-index:99;
}
#btn_retour_algo{
    width: 55px; 
    background-color:#8fa21f;
    float:right;
}

#btn_retour_accueil_parent{
    position:absolute; 
    right:20px; 
    top:28px; 
    z-index:99;
}
#btn_retour_accueil{
    width: 55px; 
    background-color:#f00;
    float:right;
}

#btn_prochaine_etape_parent{
    position:absolute; 
    right:20px; 
    top:525px; 
    z-index:99;
    width: 87px;
}
#btn_prochaine_etape{
    width: 55px; 
    background-color:#8fa21f;
}
#btn_restart_parent{
    position:absolute; 
    right:90px; 
    top:525px; 
    z-index:99;
    width: 85px;
}
#btn_restart{
    width: 55px; 
    background-color:#8fa21f;
}

.restart_format{
    position:relative; 
    right:5px; 
    top:-1px; 
    transform: scale(1.5);
}

#countdown_timer{
    position:absolute; 
    left:5px; 
    top:10px; 
    z-index:99; 
    font-size: 5em; 
    color: #f9df4c; 
    display:none;
}
#countdown_timer.countdown_timer_dark{
    color:#080808;
}

/* TRONC COMMUN */
#tronc_commun_choix_determinants > div{
    width:437px; 
    height:384px; 
    position:absolute; 
    top:113px; 
    right:114px; 
    padding:10px;
}

.btn_choix_determinant{
    background-color: #6eb43f;
    font-size: 13px;
    padding: 6px;
    margin-bottom: 15px;
    margin-right: 5px;
}

.btn_choix_determinant_selected, .btn_choix_determinant:hover, .btn_choix_determinant:active, .btn_primary_vert:hover, .btn_primary_vert:active{
    background-color: #548a30 !important;
}

#tronc_commun_choix_determinants_reponse{
    width:337px; 
    height:247px; 
    position:absolute; 
    bottom:0px; 
    left:54px; 
    font-size:20px; 
    color:white; 
    display:none;
}

.btn_primary_vert{
    background-color: #6eb43f;
}

/* JEU SOL 1 */
.sol_jeu_image_clique{
    height: 253px; 
    position:absolute; 
    top:251px; 
    cursor: pointer;
}

#sol_jeu_image_clique1{
    width:195px;
    left:73px;
}
#sol_jeu_image_clique2{
    width:180px;
    left:275px;
}
#sol_jeu_image_clique3{
    width:180px;
    left:467px;
}
#sol_jeu_image_clique4{
    width:180px;
    left:653px;
}
#sol_jeu_image_clique5{
    width:180px;
    left:835px;
}

.sol_jeu_image_big_class{
    display:none; 
    width:378px; 
    height: 378px; 
    position:absolute; 
    top:68px; 
    left:366px; 
    cursor: pointer;
}

/* JEU SOL 2 Drag-Drop */
#sol_jeu_drag_drop_bandeau_objets{
    width:450px; 
    position:relative; 
    top: 482px;
    height:126px; 
    display:flex; 
    background-color:#ffffff61;
}
#draggable_becher img{
    width: 75px; 
    position:relative; 
    top:25px; 
    left:39px;
}
#draggable_pelle img{
    width: 118px; 
    position:relative; 
    top:5px; 
    left:15px;
}
#draggable_meche img{
    width: 118px; 
    position:relative; 
    top:5px; 
    left:15px;
}

#sol_jeu_drop_becher_1{
    width:307px; 
    height: 286px; 
    position:absolute; 
    top:320px; 
    left:562px;
}
#sol_jeu_drop_pelle_1{
    width:500px; 
    height: 286px; 
    position:absolute; 
    top:192px; 
    left:0px;
}
#sol_jeu_drop_pelle_2{
    width:99px; 
    height: 162px; 
    position:absolute; 
    top:175px; 
    right:115px;
}
#sol_jeu_drop_pelle_3{
    width:114px; 
    height: 286px; 
    position:absolute; 
    top:192px; 
    right:0px;
}
#sol_jeu_drop_meche_1{
    width:90px; 
    height: 263px; 
    position:absolute; 
    top:316px; 
    left:488px;
}
#sol_jeu_drop_meche_2{
    width:123px; 
    height: 152px; 
    position:absolute; 
    top:340px; 
    right:108px;
}

/* JEUX EBOUEUR */
#eboueur_texte_camion {
    position:absolute; 
    left:15px; 
    top:64px; 
    z-index:99; 
    color:white; 
    font-size: 2.6em; 
}

#eboueur_jeu_clique_camion_arriere, #eboueur_jeu_clique_camion_frontal, #eboueur_jeu_clique_camion_lateral, #eboueur_jeu_clique_camion_benne{
    display:block; 
    width:257px; 
    height: 258px; 
    position:absolute; 
    top:194px; 
    cursor: pointer;
}

#eboueur_jeu_clique_camion_arriere{
    left:28px; 
}
#eboueur_jeu_clique_camion_frontal{
    left:284px;
}
#eboueur_jeu_clique_camion_lateral{
    left:540px;
}
#eboueur_jeu_clique_camion_benne{
    left:796px;
}

#eboueur_jeu_clique_camion_over_video{
    position:absolute; 
    left:0px; 
    top:0px; 
    width:1080px; 
    height:608px; 
    display:none; 
    background-image: url('/assets/images/screenshot_fin_video_eboueur2.png'); 
    background-size:contain;
}

/* EBOUEUR clique bouton cabine */
#eboueur_jeu_clique_bouton_over_video{
    position:absolute; 
    left:0px; 
    top:0px; 
    width:100%; 
    height:605px; 
    display:none;
}

#eboueur_jeu_clique_bouton_reussis{
    width:60px; 
    height: 50px; 
    position:absolute; 
    top:332px; 
    left:381px;
}

/* Eboueur Bouton "Clique et participe à une vrai ronde de sécurité" */
#btn_eboueur_cliquer_image{
    width:160px; 
    height: 100px; 
    position:absolute; 
    top:72px; 
    left:400px; 
    cursor:pointer; 
    display:none;
    color: white;
    text-align: center;
    padding: 8px;
    margin-top: 12px;
    transform: rotate(2deg);
}

.pulse-text {
    font-size: 15px;
    animation: 5s pulse-text infinite;
}
@keyframes pulse-text {
    0%{
        font-size: 15px;
    }
    50% {
        font-size: 16px;
    }
    100% {
        font-size: 15px;
    }
}



/* JEUX TRIEUR */
.slide-right {
    width: 100%;
    animation: 3.75s slide-right linear;
}
@keyframes slide-right {
    from {
        left: -27%;
    }
    to {
        left: 110%;
    }
}

#jeu_bouteille_score{
    position: absolute;
    text-align: center;
    top: 163px;
    z-index: 99;
    font-size: 1.5em;
    color: #f9df4c;
}

.jeu_bouteille_clique{
    position:absolute;
    left:-27%; 
    width:334px; 
    cursor:pointer;
}

.jeu_bouteille_clique_style_1{
    top:310px;
}
.jeu_bouteille_clique_style_2{
    top:275px;
}
.jeu_bouteille_clique_style_3{
    top:300px;
}
.jeu_bouteille_clique_style_4{
    top:331px;
}
.jeu_bouteille_clique_style_5{
    top:275px;
}

/* JEU RAS 1 */
#ras_jeu_clique_objet_over_video{
    position:absolute; 
    left:0px; 
    top:0px; 
    width:1080px; 
    height:608px; 
    background-image: url('/assets/images/ras_jeu1.png'); 
    display:none; 
    background-size:contain;
}

#ras_jeu_clique_objet_1, #ras_jeu_clique_objet_2, #ras_jeu_clique_objet_3, #ras_jeu_clique_objet_4{
    display:block; 
    position:absolute; 
    cursor: pointer;
}
#ras_jeu_clique_objet_1{
    width:359px; 
    height: 297px; 
    top:259px; 
    left:49px; 
}
#ras_jeu_clique_objet_2{
    width:132px; 
    height: 204px; 
    top:258px; 
    left:427px; 
}
#ras_jeu_clique_objet_3{
    width:116px; 
    height: 193px; 
    top:277px; 
    left:572px; 
}
#ras_jeu_clique_objet_4{
    width:302px; 
    height: 462px; 
    top:58px; 
    left:719px; 
}

/* JEU RAS 2*/
#ras_jeu_camera{
    position:absolute; 
    left:0px; 
    top:0px; 
    width:1080px; 
    height:608px; 
    display:none; 
    background-size:contain;
}

#ras_image_reveal{
    position: absolute;
    top:0;
    right:0;
    left:0;
    bottom:0;
    margin:auto;
    width:1080px;
    height:608px;
    text-align: center;
    overflow:hidden;
}

#ras_ecran_reveal{
    z-index: 5555;
    position: absolute;
    width: 97px;
    height: 70px;
    background: url('/assets/images/RAS_jeu_image_decouvre.jpg') 412px 50px no-repeat fixed;
    background-size: 1080px 608px;
    cursor:none;
    border-radius: 9px;
}

#ras_camera_thermique img{
    width:950px; 
    cursor:none; 
    transform: rotate(-5deg);
}
.ras_jeu_camera_zone_froide{
    position:absolute;
}

#ras_jeu_camera_zone_froide_1{
    width:131px; 
    height: 144px; 
    top:11px; 
    left:446px;
}
#ras_jeu_camera_zone_froide_2{
    width:192px; 
    height: 144px; 
    top:213px; 
    left:276px;
}
#ras_jeu_camera_zone_froide_3{
    width:164px; 
    height: 152px; 
    bottom:112px; 
    left:66px;
}
#ras_jeu_camera_zone_froide_4{
    width:312px; 
    height: 80px; 
    bottom:0px; 
    left:132px;
}
#ras_jeu_camera_score{
    position: absolute; 
    text-align:right; 
    right:109px; 
    top: 32px; 
    z-index: 99; 
    font-size: 1.5em; 
    color: #f9df4c;
}

/* JEU RAS 3*/
#ras_jeu_bouger_meuble{
    position:absolute; 
    left:0px; 
    top:0px; 
    width:1080px; 
    height:608px; 
    background-image: url('/assets/images/RAS_mur.png'); 
    display:none; 
    background-size:contain;
}

#ras_jeu_bouger_meuble img{
    width:1080px; 
    position:relative;
}

.slide-meuble-left {
    animation: 3.75s slide-meuble-left linear;
    -webkit-animation-fill-mode: forwards; /* Chrome 16+, Safari 4+ */
    -moz-animation-fill-mode: forwards;    /* FF 5+ */
    -o-animation-fill-mode: forwards;      /* Not implemented yet */
    -ms-animation-fill-mode: forwards;     /* IE 10+ */
    animation-fill-mode: forwards;         /* When the spec is finished */
}
@keyframes slide-meuble-left {
    from {
        right: 0px;
    }
    to {
        right: 315px;
    }
}


/* TABLEAU Opérateur d'eau */
#op_eau_jeu_choix_parcours{
    position:absolute; 
    left:0px; 
    top:0px; 
    width:1080px; 
    height:608px; 
    display:none; 
    /* background-image: url('/assets/images/image_tableau.png'); 
    background-size:contain; */
}

.op_eau_tableau_fleche{
    width:60px;
    height:60px;
    color: #c6cdd3;
    position:relative;
    top:3px;
}
#op_eau_clique_travail_manuel .op_eau_tableau_fleche{
    top:10px;
}
#op_eau_clique_travail_intellectuel .op_eau_tableau_fleche{
    top:6px;
}

.op_eau_tableau_fleche.op_eau_tableau_fleche_vu{
    color: #8fa21f;
}

/* Tableau Opérateur eau */
#op_eau_clique_travail_manuel{
    width: 752px;
    height: 75px;
    position: absolute;
    top: 128px;
    left: 159px;
    cursor:pointer;
}
#op_eau_clique_travail_avec_techno{
    width: 752px;
    height: 75px;
    position: absolute;
    top: 227px;
    left: 159px;
    cursor:pointer;
}
#op_eau_clique_travail_intellectuel{
    width:752px; 
    height: 100px; 
    position:absolute; 
    top:321px; 
    left:159px;
    cursor:pointer;
}

/* Opérateur d'eau écran d'ordi */
#op_eau_ecran_ordi{
    position:absolute; 
    left:0px; 
    top:0px; 
    width:100%; 
    height:100%; 
    display:none; 
}

.op_eau_ecran_ordi_image{
    width: 432px;
    position: relative;
    top: 153px;
    left: 323px;
    cursor:pointer;
}

/* Opérateur d'eau jeu drag-drop */
#op_eau_jeu_drag_drop_bandeau_objets{
    width:450px; 
    position:relative; 
    top: 482px;
    height:126px; 
    display:flex; 
    background-color:#ffffff61;
}
#draggable_cadena{
    position: relative;
    left: 28px;
    z-index: 2;
}
#draggable_cadena img{
    width: 53px; 
}
#draggable_levier{
    position: relative;
    top: -12px;
    left: 50px;
}
#draggable_levier img{
    width: 68px;
}
#draggable_roue_1{
    position: relative;
    top: -1px;
    left: 32px;
}
#draggable_roue_1 img{
    width: 92px;
}
#draggable_roue_2{
    position: relative;
    top: -1px;
    left: 32px;
}
#draggable_roue_2 img{
    width: 92px;
}

#op_eau_jeu_drop_cadena_1, #op_eau_jeu_drop_levier_1{
    width: 96px;
    height: 100px;
    position: absolute;
    top: 276px;
    right: 120px;
}
#op_eau_jeu_drop_roue_1{
    width: 107px;
    height: 124px;
    position: absolute;
    top: 298px;
    left: 75px;
}
#op_eau_jeu_drop_roue_2{
    width: 107px;
    height: 117px;
    position: absolute;
    top: 152px;
    left: 345px;
}

/* Inspecteur Jeu */
#inspecteur_jeu_instrument{
    position:absolute; 
    left:0px; 
    top:0px; 
    width:1080px; 
    height:608px; 
    display:none; 
    background-size:contain;
}


#inspecteur_image_reveal{
    position: absolute;
    top:0;
    right:0;
    left:0;
    bottom:0;
    margin:auto;
    width:1080px;
    height:608px;
    text-align: center;
    overflow:hidden;
}

#inspecteur_ecran_reveal{
    z-index: 5555;
    position: absolute;
    width: 125px;
    height: 0px;
    background: 412px 50px no-repeat fixed;
    background-size: 1080px 608px;
    cursor:none;
    border-radius: 9px;
    transform: rotate(-5deg);
    font-size: 130%;
    color: #080808;
    
}

.inspecteur_ecran_affichage{
    width: 60%; 
    height: 34px;
    transform: rotate(-1deg);
    position: relative;
    top: -35px;
    left: -13px;
}


span.inspecteur_ecran_reveal {
    font-size: 75%;
    font-family: 'Franklin Gothic Medium';
    color: #080808;
  }

#inspecteur_instrument_chiffre img{
    width:450px; 
    cursor:none; 
    transform: rotate(-5deg);
}
.inspecteur_jeu_instrument_zone{
    position:absolute;
}

#inspecteur_jeu_instrument_zone_1{
    width:100px; 
    height: 100px; 
    top:300px; 
    right:300px;
    color: white;
}
#inspecteur_jeu_instrument_zone_2{
    width:100px; 
    height: 100px; 
    top:213px; 
    left:276px;
    color: white;
}
#inspecteur_jeu_instrument_zone_3{
    width:100px; 
    height: 100px; 
    bottom:112px; 
    left:66px;
    color: white;
}

#inspecteur_jeu_instrument_score{
    position: absolute; 
    text-align:right; 
    right:35px; 
    top: 80px; 
    z-index: 99; 
    font-size: 1.5em; 
    color: transparent;

}
    
  .outer-wrapper{
    display: inline-block;
    /* margin: 111px 985px; */
    padding: 25px 15px;
    /* background: #eee; */
    min-width: 50px;
    left:1075px; 
    top:50px;
    background-color:rgba(250, 250, 250, 0.3);
  }
  
  .column-wrapper{
    height: 200px;
    width: 20px;
    background: #CFD8DC;
    transform: rotate(180deg);
    margin: 0 auto;
    opacity: 1;
  }
  
  .column{
    width: 20px;
    height: 0%;
    background: #90A4AE;
    opacity: 1;
  }
  
  .percentage, .value{
    margin-top: 10px;
    padding: 5px 10px;
    color: #FFF;
    background: #263238;
    position: relative;
    border-radius: 4px;
    text-align: center;
    opacity: 1;
  }
  #inspecteur_jeu_text{
    position: relative;
    color: white;
    font-size: 42px;
    font-family: 'Avenir Next Bold';
    background-color:rgba(0,0,0,0.3);
    height: 8em;
    margin: 150px 218px;
    text-align: center;
    padding: 50px;  
  }

  #inspecteur_jeu_text_reussi{
    position: relative;
    color: white;
    font-size: 42px;
    font-family: 'Avenir Next Bold';
    background-color:rgba(0,0,0,0.3);
    height: 7em;
    margin: 160px 218px;
    text-align: center;
    padding: 50px;  
  }

 #inspecteur_jeu_text_echoue{
    position: relative;
    color: white;
    font-size: 38px;
    font-family: 'Avenir Next Bold';
    background-color:rgba(0,0,0,0.3);
    height: 10em;
    margin: 120px  218px;
    text-align: center;
    padding: 50px;
  }


  /* Choix parcour conseiller energetique */
#conseiller_en_jeu_choix_parcours{
    position:absolute; 
    left:0px; 
    top:0px; 
    width:1080px; 
    height:608px; 
}

.conseiller_en_tableau_fleche_infiltration_air{
    width: 60px;
    height: 60px;
    color: #c6cdd3;
    position: relative;
    top: -94px;
    left: 293px;
    background-color: rgba(7, 26, 91, 0.6);
    border-radius: 50%;
    border: 4px solid white;
}

.conseiller_en_tableau_fleche_isolant{
    width:60px;
    height:60px;
    color: #c6cdd3;
    position:relative;
    top:-140px;
    left:135px;
    transform:rotate(-90deg);
    background-color: rgba(7, 26, 91, 0.6);
    border-radius: 50%;
    border: 4px solid white;
}

.conseiller_en_tableau_sous_sol{
    width:60px;
    height:60px;
    color: #c6cdd3;
    position:relative;
    top:140px;
    left:142px;
    transform:rotate(90deg);
    background-color: rgba(7, 26, 91, 0.6);
    border-radius: 50%;
    border: 4px solid white;

}

#conseiller_en_clique_infiltration_air {
    position: absolute;
    width: 320px;
    left: 723px;
    top: 335px;
}

#conseiller_en_clique_isolant{
    position: absolute;
    width: 320px;
    top: 191px;
    left: 468px;
}


#conseiller_en_clique_sous_sol{
    position: absolute;
    width: 320px;
    top: 335px;
    left: 283px;
}

#text_jeu_conseiller_bouton {
    background-color: rgba(7, 26, 91, 0.6);
    width: 300px;
    padding: 25px;
    margin: 20px;
    text-align: center;
    color: white;
    border: 2px solid white;
  }


.conseiller_en_fleche_vu{
    color: #8fa21f;
}

  /* Pour le jeu du Grenier*/
#conseiller_en_jeu_isolant{
    position: absolute;
    left: 0px;
    top: -185px;
    width: 100%;
    height: 100%;
    display: none;
}

.grenier_jeu_image_big_class{
    display:none; 
    width:740px; 
    height: 470px; 
    position:relative; 
    top: 245px; 
    left:150px; 
    cursor: pointer;
}

.conseiller_en_jeu_image_clique{
    height: 253px; 
    position:absolute; 
    top:251px; 
    cursor: pointer;
}
#conseiller_en_jeu_image_clique1{
    width:150px;
    left: 200px;
}
#conseiller_en_jeu_image_clique2{
    width:150px;
    left:450px;
}
#conseiller_en_jeu_image_clique3{
    width:150px;
    left:700px;
}

.conseiller_en_image{
    width:150px;
    border: 4px solid white;
}

h4.text_image{
    color: white;
    text-align: center;
}

#grenier_crochet{
    font-size: 30px;
    color:green;
    position: relative;
    top: -40px;
    left: 5px;
}

#grenier_bran_scie_x{
    font-size: 30px;
    color:red;
    position: relative;
    top: -40px;
    left: 5px;
}

#grenier_cellulose_x{
    font-size: 30px;
    color:red;
    position: relative;
    top: -40px;
    left: 5px;
}

.grande_image_grenier{
    width:740px; 
    position: relative;
    top: 0px; 
    left:0px;
    border: 10px solid white;
}

#grenier_bran_de_scie_big_x {
    font-size: 30px;
    color: red;
    position: relative;
    top: -70px;
    left: 15px;
  }
  #grenier_cellulose_big_x {
    font-size: 30px;
    color: red;
    position: relative;
    top: -70px;
    left: 15px;
  }
  #grenier_big_crochet {
    font-size: 30px;
    color:green;
    position: relative;
    top: -70px;
    left: 15px;
  }

  .x_mini{
    font-size: 30px; 
    color:red
  }

    /* Pour le jeu d'infiltration d'air */

#conseiller_en_jeu_infiltration_air{
    display: none;
}

#infiltration_jeu_main{
    position:absolute; 
    left:0px; 
    top:0px; 
    width:1080px; 
    height:608px; 
    display:none; 
    background-size:contain;
}

#infiltration_air_jeu_main_score{
    position: absolute; 
    text-align:right; 
    right:190px; 
    top: 32px; 
    z-index: 99; 
    font-size: 1.5em; 
    color: #f9df4c;
}

#infiltration_air_image_reveal{
    position: absolute;
    top:0;
    right:0;
    left:0;
    bottom:0;
    margin:auto;
    width:1080px;
    height:608px;
    text-align: center;
    overflow:hidden;
}

#infiltration_air_main_reveal{
    z-index: 5555;
    position: absolute;
    width: 97px;
    height: 70px;
    background-size: 1080px 608px;
    cursor:none;
    border-radius: 9px;
}

#infiltration_air_main img{
    width:450px; 
    cursor:none; 
    transform: rotate(-5deg);
}


#infiltration_jeu_instrument_zone_1{
    width:100px; 
    height: 100px; 
    top:408px; 
    left:539px;
}

#infiltration_jeu_instrument_zone_2{
    width:100px; 
    height: 100px; 
    top:16px; 
    left:521px;
}

#infiltration_jeu_instrument_zone_3{
    width: 200px;
    height: 200px;
    bottom: 242px;
    left: 169px;
}

.infiltration_jeu_instrument_zone{
    position:absolute;
}

#surbrillance_infiltration_1{
    width:100px; 
    height: 100px; 
    top:408px; 
    left:539px;
    border-radius:70%;
    -webkit-border-radius:50%;
    outline: none;
    border-color: blue;
    box-shadow: 0 0 50px blue;
    opacity: 0.63;
    display:none;
    background-color: rgba(7, 26, 91, 0.6);
    border: 4px solid white;

}

#surbrillance_infiltration_2{
    width:100px; 
    height: 100px; 
    top:16px; 
    left:521px;
    border-radius:50%;
    -webkit-border-radius:50%;
    outline: none;
    border-color: blue;
    box-shadow: 0 0 50px blue;
    opacity: 0.63;
    display:none;
    background-color: rgba(7, 26, 91, 0.6);
    border: 4px solid white;
}

#surbrillance_infiltration_3{
    width:200px; 
    height: 200px; 
    bottom:242px; 
    left:169px;
    border-radius:50%;
    -webkit-border-radius:50%;
    outline: none;
    border-color: blue;
    box-shadow: 0 0 50px blue;
    opacity: 0.63;
    display:none;
    background-color: rgba(7, 26, 91, 0.6);
    border: 4px solid white;
}

.main_infiltration{
    position:relative;
    color:white;
    font-size: 60px;
    top: 70px;
    left:210px;
}

#infiltration_jeu_text_echoue{
    position: relative;
    color: white;
    font-size: 38px;
    font-family: 'Avenir Next Bold';
    background-color:rgba(0,0,0,0.3);
    height: 7em;
    margin: 160px 218px;
    text-align: center;
    padding: 50px;
    top: -600px;
    display:none;
  }

  #infiltration_jeu_text_reussi{
    position: relative;
    color: white;
    font-size: 38px;
    font-family: 'Avenir Next Bold';
    background-color:rgba(0,0,0,0.3);
    height: 7em;
    margin: 160px 218px;
    text-align: center;
    padding: 95px;  
    top: -615px;
    display:none;
  }

  .zone1{
    position: relative;
    font-size: 40px;
    left: 27px;
    top: 29px;
    color: white;
  }
  .zone2{
    position: relative;
    font-size: 40px;
    left: 23px;
    top: 28px;
    color: white;
  }
  .zone3{
    position: relative;
    font-size: 40px;
    left: 75px;
    top: 79px;
    color: white;
  }
  
  /*Pour le jeu du sous sol*/
#conseiller_en_jeu_sous_sol{
    display: none;
}
#sous_sol_jeu_ipad{
    position:absolute; 
    left:0px; 
    top:0px; 
    width:1080px; 
    height:608px; 
    display:none; 
    background-size:contain;
}

#sous_sol_jeu_ipad_score{
    position: absolute; 
    text-align:right; 
    right:192px; 
    top: 32px; 
    z-index: 99; 
    font-size: 1.5em; 
    color: #f9df4c;
    width: 450px;
}

#sous_sol_etiquettes{
        position: absolute;
        border: 1px solid black;
        right: 857px;
        top: 170px;
        width:223px; 
        height:280px; 
        background-size:contain;
        background-color: rgba(0, 0, 0, 0.6);
        text-align: left;
        font-size: medium;
        color: white;
        padding: 7px;
        display: none;
}

#sous_sol_ipad_zone_1{
    width:100px; 
    height: 100px; 
    top:60px; 
    left:375px;
}

#sous_sol_ipad_zone_2{
    width:100px; 
    height: 100px; 
    top:350px; 
    left:595px;
}

#sous_sol_ipad_zone_3{
    width:100px; 
    height: 100px; 
    top:355px; 
    left:740px;
}

#sous_sol_ipad_zone_4{
    width:100px; 
    height: 100px; 
    top:327px; 
    left:890px;
}

.sous_sol_ipad_zone{
    position:absolute;
}

#sous_sol_image_reveal{
    position: absolute;
    top:0;
    right:0;
    left:0;
    bottom:0;
    margin:auto;
    width:1080px;
    height:608px;
    text-align: center;
    overflow:hidden;
}

.sous_sol_ecran_affichage{
    width: 100%; 
    height: 34px;
    transform: rotate(-1deg);
    position: relative;
    top: 9px;
    left: -18px;
    pointer-events: none;
}

#sous_sol_ipad img{
    width:150px; 
    cursor:none; 
    transform: rotate(90deg);
}

#sous_sol_ipad_reveal{
    z-index: 5555;
    position: absolute;
    width: 97px;
    height: 70px;
    background-size: 1080px 608px;
    cursor:none;
    border-radius: 9px;
    pointer-events: none;
}

#systeme_ventilation_ipad img{
    width: 95px;
    font-size: 30px;
    color:green;
    position: relative;
    top: -26px;
    left: 32px;
}
#systeme_chauffage_ipad img{
    width: 95px;
    height: 130px;
    font-size: 30px;
    color:green;
    position: relative;
    top: -26px;
    left: 32px;
}
#chauffe_eau_ipad img{
    width: 95px;
    height: 130px;
    font-size: 30px;
    color:green;
    position: relative;
    top: -26px;
    left: 32px;
}
#panneau_elec_ipad img{
    width: 95px;
    height: 130px;
    font-size: 30px;
    color:green;
    position: relative;
    top: -26px;
    left: 32px;
}

 #sous_sol_jeu_text_echoue{
    position: relative;
    color: white;
    font-size: 38px;
    font-family: 'Avenir Next Bold';
    background-color:rgba(0,0,0,0.3);
    height: 7em;
    margin: 160px 218px;
    text-align: center;
    padding: 55px;
    top: -600px;
    display:none;
  }

  #sous_sol_jeu_text_reussi{
    position: relative;
    color: white;
    font-size: 38px;
    font-family: 'Avenir Next Bold';
    background-color:rgba(0,0,0,0.3);
    height: 7em;
    margin: 160px 235px;
    text-align: center;
    padding: 95px;  
    top: -615px;
    display:none;
  }

  .dot {
    height: 17px;
    width: 17px;
    border: 2px solid #bbb;
    border-radius: 50%;
    display: inline-block;
    position: fixed;
    top: 80px;
    left: 70px;
  }
  .dot2{
    height: 12px;
    width: 12px;
    background-color: #bbb;
    border-radius: 50%;
    display: inline-block;
    position: relative;
    top: -4px;
    left: 0px;
  }
  .battery{
    position: fixed;
    font-size:8px;
    left: 110px; 
    top:-20px; 
    color: black;
  }

  .video_text_ipad{
    position: fixed;
    font-size: 4px; 
    top: 86px; 
    left: 52px;
  }

  .text_refresh{
    position: fixed;
    font-size:10px;
    left: 95px; 
    top:84px;
  }

  /* VENTILATION */

  #ventilation_choix_parcours{
    position:absolute; 
    left:0px; 
    top:0px; 
    width:1080px; 
    height:608px; 
    display:none; 
}

#ventilation_bouton_buse_rotative {
    width: 266px;
    height: 93px;
    position: absolute;
    top: 477px;
    left: 150px;
    cursor: pointer;
  }

#ventilation_bouton_harnais {
    width: 280px;
    height: 88px;
    position: absolute;
    top: 482px;
    left: 634px;
    cursor: pointer;
  }

  #ventilation_jeu_pacman{
    display: none;
  }

.image_console{
        position: relative;
        top: -613px;
        width: 1080px;
}

  #console_jeu_pacman{
    position:relative;
    top: -1595px;
    left: 350px;
    width: 560px;
  }

  h6{
    margin: 268px auto -21px  -105px;
	color: rgb(246, 184, 30);
	font-size: 18px;
	font-weight: lighter;
	text-transform: uppercase;
	text-shadow: 1.5px 1.5px 0 rgba(239,0,0,1.00);;
}

kbd{
	font-size: 25px;
	padding: 5px;
    color: transparent;
    background: transparent;
    border: none !important;
}
#control_robot{
    position: relative;
    bottom: 1000px;
    left: 913px;
    width: 175px;
    height: 167px;
}

#control_robot2{
    position: relative;
    bottom: 76px;
    left: -927px;
    width: 175px;
    height: 167px;
}
#control_robot3{
    position: relative;
    bottom: 90px;
    left: -927px;
    width: 175px;
    height: 167px;
}
#position_fleche_bas{
    position: relative;
    top: 78px;
    right: -70px;
    width: 45px;
    background: transparent;
    border: none !important;
}
#position_fleche_haut{
    position: relative;
    top: 31px;
    right: -18px;
    width: 45px;
    background: transparent;
    border: none !important;
}

#position_fleche_droite{
    position: relative;
    top: 74px;
    right: -16px;
    background: transparent;
    border: none !important;
}
#position_fleche_gauche{
    position: relative;
    top: 74px;
    right: -21px;
    background: transparent;
    border: none !important;
}


.grid{
	display: flex;
	flex-wrap: wrap;
	width: 400px;
	height: 250px;
	margin-bottom: 80px;
}

.grid div{
	width : 40px;
	height: 40px;
}

.pac-dot {
	background-color: rgba(247,191,80,1.00);
	border: 7px solid rgba(10,7,67,1.00);
	border-radius: 10px;
	box-sizing: border-box;
}

.wall{
	background-color: grey;
}



.pac-man{
	/* background-color: yellow; */
    background:center / contain no-repeat url('/assets/videos/BUSE_ROBOT.gif');
    
	border-radius: 40px;
	border: none;
    animation: movePacman 2s linear;
	transform: scale(1.5);
}


@keyframes movePacman {
    0% {
      left: 0;
    }
    100% {
      left: 100px;
    }
  }


@-webkit-keyframes eat{
	0% {
		-webkit-transform: rotate(-90deg);
		transform: rotate(-90deg);
	}
	25% {
		-webkit-transform: rotate(-45deg);
		transform: rotate(-45deg);
	}
	50% {
		-webkit-transform: rotate(0deg);
		transform: rotate(0deg);
	}
	75% {
		-webkit-transform: rotate(-45deg);
		transform: rotate(-45deg);
	}
	100% {
		-webkit-transform: rotate(-90deg);
		transform: rotate(-90deg);
	}
}
@keyframes eat{
	0%{
		transform: rotate(-90deg);
	}
	50%{
		transform: rotate(0deg);
	}
	100%{
		transform: rotate(-90deg);
	}
}


.restart{
	position: absolute;
	width : 150px;
	height: 40px;
	margin-top: 100px;
	background-color: rgba(10,7,67,1.00);
	border: 2px solid rgba(239,0,0,1.00);
	border-radius: 5px;
	z-index: 200;
	cursor : pointer;
	display: flex;
	justify-content: center;
	align-items: center;
	font-family: 'Bungee', cursive;
	font-size: 22px;
	letter-spacing: 1.5px;
	color: rgb(246, 184, 30);
	text-shadow: 1px 1px 0 rgba(239,0,0,1.00); 
}

.restart:hover{
	transform: scale(1.1);
}

.restart::after{
	content: "RESTART";
	position : absolute;
}

#ventilation_jeu_text_echoue{
    position: relative;
    color: white;
    font-size: 38px;
    font-family: 'Avenir Next Bold';
    background-color: rgba(0,0,0,0.3);
    height: 7em;
    margin: 0px 208px;
    text-align: center;
    padding: 80px;
    top: -140px;
    display: none;
    width: 740px;
    left: -952px;
  }

  #ventilation_jeu_text_reussi{
    position: relative;
    color: white;
    font-size: 38px;
    font-family: 'Avenir Next Bold';
    background-color: rgba(0,0,0,0.3);
    height: 7em;
    margin: 0px 208px;
    text-align: center;
    padding: 80px;
    top: -140px;
    display: none;
    width: 740px;
    left: -952px;
  }

  #choix_ventilation{
    position:absolute; 
    left:0px; 
    top:0px; 
    width:1080px; 
    height:608px; 
    display:none; 
    background-image: url('/assets/images/choix_ventilation.png'); 
    background-size:contain;
}

.circle-container {
    display: flex;
    justify-content: center;
    align-items: center;
    width: 80px;
    height: 80px;
    border-radius: 50%;
    position: relative;
    top: -1705px;
    border: 2px solid white;
    left: 38px;
  }

  #test {
    position: absolute;
    width: 60px;
    height: 60px;
    border-radius: 50%;
    background-color: #fff;
    border: none;
    outline: none;
    text-align: center;
    font-size: 16px;
    font-weight: bold;
    transform: translate(-50%, -50%);
  }
  
  #test:nth-child(1) {
    top: 50%;
    left: 0;
  }
  
  #test:nth-child(2) {
    top: 0;
    left: 50%;
  }
  
  #test:nth-child(3) {
    top: 50%;
    right: 0;
  }
  
  #test:nth-child(4) {
    bottom: 0;
    left: 50%;
  }

/* CHIMISTE */
#chimiste_choix_jeu {
    background-image: url('/assets/images/chimiste_choix_jeu.png'); 
    background-size:cover;
}
.chimiste_jeu_choix_bouton {
    background-color: rgba(7, 26, 91, 0.6);
    width: 300px;
    padding: 25px;
    margin: 20px;
    text-align: center;
    color: white;
    border: 2px solid white;
}
#chimiste_bouton_spectrometre {
    position: absolute;
    width: 320px;
    left: 80px;
    top: -46px;
}
#chimiste_bouton_spectrometre svg{
    position: relative;
    top:174px;
}
#chimiste_bouton_colorimetrie {
    position: absolute;
    width: 320px;
    right: 90px;
    top: 302px;
}
#chimiste_bouton_colorimetrie svg{
    transform:rotate(180deg);
    position: relative;
    left: -13px;
    top: -110px;
}
#chimiste_bouton_colorimetrie h3{
    width: 375px;
}

#chimiste_jeu_1_instruction{
    position: relative;
    color: white;
    font-size: 36px;
    font-family: 'Avenir Next Bold';
    background-color:rgba(0,0,0,0.58);
    margin: 150px 218px;
    text-align: center;
    padding: 50px;  
  }

#chimiste_jeu_1 {
    background-image: url('/assets/images/chimiste_machine.png'); 
    background-size:cover;
}
#chimiste_jeu_1_image_sans_fiole{
    width: 100%;
    height: 100%;
    background-image: url('/assets/images/chimiste_machine_sans_fiole.png'); 
    background-size:cover;
    position: absolute;
    top:0px;
}
#chimiste_jeu_1_image_reussi{
    width: 100%;
    height: 100%;
    background-image: url('/assets/images/chimiste_machine_resultat.jpg'); 
    background-size:cover;
    position: absolute;
    top:0px;
}
#chimiste_jeu_1_image_echoue{
    width: 100%;
    height: 100%;
    background-image: url('/assets/images/chimiste_console.png'); 
    background-size:cover;
    position: absolute;
    top:0px;
}
#chimiste_jeu_1_image_echoue>div{
    position: absolute;
    top: 219px;
    left: 503px;
    width: 233px;
    color: #040404;
    font-size: 19px;
}

#chimiste_jeu_1_drop_fiole{
    width: 248px;
    height: 211px;
    position: absolute;
    top: 81px;
    left: 136px;
}
#chimiste_jeu_1_draggable_fiole{
    width:100px;
    z-index: 9999;
    position: relative;
    left: 640px;
    top: 337px;
}
#chimiste_jeu_1_draggable_fiole img{
    width: 300px; 
    position:relative; 
    top:0px; 
    left:-100px;
}

/* CHIMISTE JEU 2 */
#chimiste_jeu_2_bandeau_objets{
    width: 411px;
    position: relative;
    top: 0px;
    left: 386px;
    height: 136px;
    display: flex;
    background-color: #2188059e;
}
#chimiste_jeu_2_bandeau_objets_instruction{
    position: absolute;
    color: white;
    width: 100%;
    text-align: center;
    top: 2px;
    font-size: 18px;
}
#chimiste_jeu_2_drop_liquide{
    width: 213px;
    height: 157px;
    position: absolute;
    top: 274px;
    right: 136px;
}
#chimiste_jeu_2_drop_gas{
    width: 157px;
    height: 130px;
    position: absolute;
    top: 243px;
    left: 531px;
}
#chimiste_jeu_2_drop_plasma{
    width: 145px;
    height: 135px;
    position: absolute;
    top: 240px;
    left: 422px;
}
#chimiste_jeu_2_draggable_liquide{
    width:100px;
    height:100px;
    position: relative;
    left: 13px;
    top: 30px;
    background-image: url('/assets/images/chimiste_bouton_rouge.png'); 
    background-size:cover;
}
#chimiste_jeu_2_draggable_liquide img{
    width: 47px;
    position: relative;
    top: 13px;
    left: 25px;
}
#chimiste_jeu_2_texte_liquide{
    color:white;
    position:relative;
    top: 13px;
    left: 21px;
}

#chimiste_jeu_2_draggable_gas{
    width:100px;
    height:100px;
    position: relative;
    left: 58px;
    top: 30px;
    background-image: url('/assets/images/chimiste_bouton_vert.png'); 
    background-size:cover;
}
#chimiste_jeu_2_draggable_gas img{
    width: 69px;
    position: relative;
    top: 1px;
    left: 16px;
}
#chimiste_jeu_2_texte_gas{
    color:white;
    position:relative;
    top: -8px;
    left: 34px;
}

#chimiste_jeu_2_draggable_plasma{
    width:100px;
    height:100px;
    position: relative;
    left: 98px;
    top: 30px;
    background-image: url('/assets/images/chimiste_bouton_jaune.png'); 
    background-size:cover;
}
#chimiste_jeu_2_draggable_plasma img{
    width: 50px;
    position: relative;
    top: 12px;
    left: 25px;
}
#chimiste_jeu_2_texte_plasma{
    color:white;
    position:relative;
    top: 10px;
    left: 21px;
}

/* INGÉNIEUR */
/* JEU 1 */
#ingenieur_jeu_1 {
    background-image: url('/assets/images/ingenieur_ecran.png'); 
    background-size:cover;
}

#ingenieur_div_ecran{
    width: 584px;
    height: 376px;
    position: relative;
    top: 90px;
    left: 224px;
    padding: 20px;
    color: #dfd8d8;
}

#ingenieur_jeu_1_question_1, #ingenieur_jeu_1_question_2{
    font-size: 21px;
    margin-bottom: 27px;
}

.ingenieur_checkbox{
    margin-bottom:10px;
}
#ingenieur_jeu_1_checkbox_1_bouton, #ingenieur_jeu_1_checkbox_2_bouton{
    padding: 5px;
}

/* INGÉNIEUR */
/* Jeu 2 */
#ingenieur_jeu_2 {
    background-image: url('/assets/images/ingenieur_jeu_2.png'); 
    background-size:cover;
    color:white;
}

#ingenieur_jeu_2_section_images{
    width: 879px;
    margin-left: auto;
    margin-right: auto;
    margin-top: 154px;
    display: flex;
}
.ingenieur_jeu_2_image_section{
    width:34%;
    height: 166px;
}
.ingenieur_jeu_2_image_titre{
    text-align: center;
    font-size: 22px;
    margin-top:10px;
    box-shadow: inset 100vw 0 0 rgba(0,0,0,0.4);
}
.ingenieur_jeu_2_image_texte{
    padding: 10px;
    box-shadow: inset 100vw 0 0 rgba(0,0,0,0.4);
    height: 126px;
    display:none;
}


#ingenieur_jeu_2_section_bas{
    width: 457px;
    margin-left: auto;
    margin-right: auto;
    margin-top: 28px;
}
#ingenieur_jeu_2_section_bas_instruction_parent{
    width: 140px;
    margin-left: auto;
    margin-right: auto;
}
#ingenieur_jeu_2_section_bas_image{
    width:54px;
    position: relative;
    left: 36px;
}
#ingenieur_jeu_2_section_bas_instruction{
    color:black;
}

.ingenieur_jeu_2_section_bas_phrases{
    display: none;
    color: black;
    width: 457px;
    margin-left: auto;
    margin-right: auto;
    margin-top: 31px;
}

#ingenieur_jeu_2_section_bas_phrase_2 {
    width: 330px;
}
#ingenieur_jeu_2_section_bas_phrase_3 {
    width: 291px;
}

/* SECTION SOUS VIDÉO PRINCIPAL */
#div_titre_principal_parent{
    margin:auto; 
    margin-top:35px; 
    width:fit-content; 
    max-width: 85%;
    height:fit-content; 
    font-size:32px; 
    font-weight:bold; 
    text-align:center; 
    color:white; 
    border-top: 6px solid #90C83C; 
    border-bottom: 6px solid #90C83C;
}
#div_titre_principal{
    margin-left:10px; 
    margin-right:10px;
    max-width: 745px;
}
#div_titre_principal p{
    margin-bottom:0px;
}

.titre_principal_petit{
    font-size:24px;
}


#div_encadre_vert{
    margin:auto; 
    margin-top:40px; 
    width:761px; 
    height:500px; 
    border:4px solid #90C83C;
}

#div_bandeau_vert{
    width:100%; 
    height:100px; 
    background-color:#90C83C;
}

#div_image_encadre_vert{
    width:88px; 
    margin-top:4px; 
    margin-left:20px; 
    float:left;
}

#div_texte_encadre_vert{
    width: 600px;
    color:white; 
    font-size:22px; 
    font-weight:bold; 
    margin-left:14px; 
    position:relative; 
    top: 24px;
    float:left;
    line-height:22px;
}

#div_texte_encadre_vert > p {
    margin-bottom: 5px;
}

#div_texte_encadre_vert h2 {
    color: white;
}

#div_texte_encadre_vert h3, #div_texte_encadre_vert h4 {
    color: white;
    font-size: 2.13rem;
}

#div_image_fond{
    width:100%; 
    height:392px; 
    background-image: url('/assets/images/temp_image_sol_qr.png'); 
    background-size:cover;
}

#div_image_logo{
    width:145px; 
    position:relative; 
    top:40px; 
    left:20px;
}

#div_texte{
    height:195px; 
    width:495px;
    margin-left:20px; 
    margin-top:140px; 
    color:white; 
    font-size:34px; 
    font-weight:bold; 
    float:left; 
    line-height:33px;
}

#qrcode_parent{
    height:128px; 
    width:128px; 
    float:left; 
    position:relative; 
    top:201px; 
    left:87px;
}



#logo_bas_gouv{
    width:100%; 
    display:flex; 
    align-items:center; 
    justify-content: center; 
    position:absolute; 
    bottom:25px;
}
#logo_bas_gouv>img{
    width:320px;
}


/* FORMULAIRE SATISFACTION FIN VIDÉO  */
.image_pouce_satisfaction_bigger{
    width: 83px !important;
    position: relative;
    top: -10px;
}

.satisfaction_bouton_vert{
    background-color:#598D35; 
    border-radius:15px; 
    width:165px; 
    height:50px; 
    padding:13px; 
    margin:0px 10px; 
    cursor:pointer;
}
.satisfaction_bouton_vert_clique{
    background-color:#31531A; 
}

#sondage_fin_question1{
    width:100%; 
    height: 100px; 
    color:white; 
    text-align:center; 
    font-size:46px; 
    margin-top:75px;
}

#sondage_fin_reponse1{
    width:100%; 
    height: 100px; 
    margin-top:10px; 
    text-align:center;
}

#sondage_fin_reponse1 img{
    width:62px;
    cursor:pointer;
}

#sondage_fin_question2{
    width:100%; 
    height: 100px; 
    color:white; 
    text-align:center; 
    font-size:40px; 
    margin-top:50px;
}

#sondage_fin_question2 span{
    font-size: 26px;
    position:relative; 
    top:-10px;
}

#sondage_fin_reponse2{
    width:100%; 
    height: 100px; 
    color:white; 
    text-align:center; 
    margin-top:45px; 
    display:flex; 
    justify-content:center;
}

#sondage_fin_merci_participation{
    width:100%; 
    height: 100px; 
    color:white; 
    text-align:center; 
    font-size:46px; 
    margin-top:260px; 
    display:none;
}

/* FOOTER */
#footer{
    width:100%; 
    background-color:white; 
    position:absolute; 
    top:3274px;
}

#footer_bande_grise{
    width:100%; 
    height:200px; 
    background-color:#353435;
    text-align: center;
    font-size: 32px;
    color:white;
    display: flex;
    align-items: center;
}
#footer_text{
    width:90%;
    margin-left: 5%;
    text-align: center;
}

.texte_commanditaire{
    font-size:27px;
}

.logo_commanditaire_argent{
    display:flex; 
    align-items:center; 
    width: 312px;
}

.logo_commanditaire_argent_dki{
    width:240px; 
    padding:34px; 
    position:relative;
    left:55px;
}


/* TEST POUR VIDÉO 360.  PAS UTILISER POUR L'INSTANT */
.player-wrapper {
    position: relative;
    width: 100%;
    height: 100vh;
}
.player {
    position: absolute; 
    top: 0;
    left: 0;
    height: 100%;
    width: 100%;
}