@charset "UTF-8";

.tuto3-accueil {
    display: flex;
    background: #FAF7EC;
    width: 100%;
    height:100%;
    margin:0 auto;
    background: url(../images/accueil_tuto1_avec_titre.png) center / contain no-repeat;
    text-align: center;
}

h1.tuto3-accueil-title {
    display: inline-block;
    visibility: hidden;
    color: #016ED7;
    font-family: 'Raleway', sans-serif;
    font-weight: 900;
    text-transform: uppercase;
    white-space: nowrap;
}

h1.tuto3-accueil-title > span {
    display: inline-block;
    vertical-align: middle;
}

h1.tuto3-accueil-title .vous-avez-dit {
    font-size: 40px;
}

h1.tuto3-accueil-title .ia {
    font-size: 175px;
    margin-left: 8px;
    margin-top: -38px;
}

h1.tuto3-accueil-title .point-interrogation {
    font-size: 300px;
    margin-top: -27px;
    margin-left: 11px;
}

.basic-link{
     pointer-events: auto;
 }
.credits{
    text-align: left;
    pointer-events: none;
}
.credits a {
    color: #00A387;
}

.credits .une-production {
    color: #347D70;
    font-size: 14px;
}
.credits-click{
    position:absolute;
    top:80px;
    left:0px;
    right:0px;
    bottom:0px;
}

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

    .tuto3-accueil {
        display: flex;
        align-items: stretch;
        background: #FAF7EC;
        width: 100%;
        height:100%;
        margin:0 auto;
        background: url(../images/accueil_tuto1_S_2X.png) top 50px center / 90vw no-repeat;
    }

    h1.tuto3-accueil-title {
        visibility: visible;
        margin: 0 auto;
        transform: scale(0.4, 0.4);
        transform-origin: 0% 0%;

        left: calc( 50vw - 150px );
        top:calc( 40vw + 100px );
        position: relative;
    }

}

/* --------------------------------------*/
.qcm-instructions-panel {
    width: 100%;
    position:relative;
}
.qcm-instructions-panel .instructions-panel-top {
    background: url(../images/tuto3_texture.png);
    padding: 20px;


}
.qcm-zoom{
    position:absolute;
    top: 252px;
    right: 20px;

    height: 48px;
    width: auto;
    border: 1px solid rgba(121, 121, 121, 0.61);
    border-radius: 24px;
    background-color: #5937B9;
    box-shadow: 0 2px 5px 0 rgba(0, 0, 0, 0.39);
    padding: 5px 20px;
    margin-top: 20px;

    color: #FFFFFF;
    font-family: 'Raleway', sans-serif;
    font-size: 20px;
    font-weight: 600;
    line-height: 24px;
    text-transform: uppercase;

    cursor:pointer;
}
.image-for-qcm {
    /*background: url(../images/texture.png);*/
    background-size:cover;
    background-position:center;
    width: 300px;
    height: 300px;
    border: solid 1px #999999;
    background-color:rgba(255, 255, 255, 0.53);
    border-radius: 5px;
    overflow: hidden;
    margin: 0px auto;

}
.qcm-instructions-panel .instructions-panel-bottom {

    width: 100%;
    text-align: center;

}
.instructions-panel-bottom button {

    height: 48px;
    width: auto;
    border: 1px solid rgba(121, 121, 121, 0.61);
    border-radius: 24px;
    background-color: #5937B9;
    box-shadow: 0 2px 5px 0 rgba(0, 0, 0, 0.39);
    padding: 5px 20px;
    margin-top: 20px;

    color: #FFFFFF;
    font-family: 'Raleway', sans-serif;
    font-size: 20px;
    font-weight: 600;
    line-height: 24px;
    text-transform: uppercase;
    cursor:pointer;
}
.savoir-plus {

    font-family: 'Raleway', sans-serif;
    font-size: 20px;
    font-weight: bold;
    line-height: 30px;
    color: #000000;
    padding:30px;

}
.savoir-plus ul{
    list-style:none;
}
.savoir-plus p{
    margin-top:30px;
}
.tuto3-description{
    position:absolute;
    left: 50%;
    top: 20px;
    font-family: 'Raleway', sans-serif;
    font-size: 30px;
    font-weight: bold;
    text-transform: uppercase;
    color:#FF7558;

    width: 80%;
    max-width: 1024px;
    transform: translate(-50%,-50%);




}

.embiframe{
    width:640px;
    height:480px;
    margin:0 auto;
}
.step-contents{
    text-align:center;
}
.description{
    text-align:left;
    display: inline-block;
}
.gras{
    font-weight:bold;
}
.description li{
    color:#FF7558;
    list-style: inside;
    font-family: 'Raleway', sans-serif;
}

.aller-retour{


    height: 48px;
    width: auto;
    border: 1px solid rgba(121, 121, 121, 0.61);
    border-radius: 24px;
    background-color: #5937B9;
    box-shadow: 0 2px 5px 0 rgba(0, 0, 0, 0.39);
    padding: 5px 20px;
    margin-top: 20px;

    color: #FFFFFF;
    font-family: 'Raleway', sans-serif;
    font-size: 20px;
    font-weight: 600;
    line-height: 24px;
    text-transform: uppercase;

    cursor:pointer;
}
.right-text{
    /*position:absolute;
    top:300px;
    left:calc(50% + 320px);
    font-size:18px;
    font-family: 'Rambla', sans-serif;
    color:#D2553F;
    padding:20px;*/

    position:absolute;
    top:200px;
    left:calc(50% + 350px);
    width:calc(50% - 300px);
    max-width:300px;
    font-size:24px;
    font-family: 'Rambla', sans-serif;
    color:#D2553F;
    text-align:left;
}


.consignes{
    position:absolute;
    top:200px;
    left:calc(50% + 350px);
    width:calc(50% - 300px);
    max-width:300px;
    font-size:24px;
    font-family: 'Rambla', sans-serif;
    color:#D2553F;
    text-align:left;

}

.intro-step .video-background {
    cursor:pointer;
}
.step-header .title-link a:nth-child(1) {
    padding-right:10px;
}
.step-header .title-link a:nth-child(2) {
    padding-left:0px;
}


.intro-step {
    background: url(../images/tuto3_texture.png);
}
.intro-step .video-background {
    background: #F8AE37 url(../images/b_video.svg) center / 140px 140px no-repeat;
}
.intro-step .video-parent .video-infos .video-title {
    color: #4462CE;
}
.intro-step .video-parent .video-infos {
    background: rgba(243, 215, 49, 0.46);
}