.pro-bg-couche {

    background-image: url("/assets/images/bgcouche.jpg");

    height: -o-calc(100vh - 117px);

    /* opera */

    height: -webkit-calc(100vh - 117px);

    /* google, safari */

    height: calc(100vh - 117px);

    /* firefox */

    background-size: cover
    ;
    background-position: center;

}

.pro-bg-dicte {

    background-image: url("/assets/images/background-dicte.jpg");

    height: -o-calc(100vh - 117px);

    /* opera */

    height: -webkit-calc(100vh - 117px);

    /* google, safari */

    height: calc(100vh - 117px);

    /* firefox */

    background-size: cover
    ;
    background-position: center;

}


.pro-bg-horizon {

    background-image: url("/assets/images/horizon_totem.jpg");

    height: -o-calc(100vh - 117px);

    /* opera */

    height: -webkit-calc(100vh - 117px);

    /* google, safari */

    height: calc(100vh - 117px);

    /* firefox */

    background-size: cover
    ;
    background-position: center;

}



.pro-bg-debout {

    background-image: url("/assets/images/bgdebout.jpg");

    height: -o-calc(100vh - 117px);

    /* opera */

    height: -webkit-calc(100vh - 117px);

    /* google, safari */

    height: calc(100vh - 117px);

    /* firefox */

    background-size: cover;

    background-position: center;

}


.pro-bouton-bg{
    height: -o-calc(100vh + 70px);

    /* opera */

    height: -webkit-calc(100vh + 70px);

    /* google, safari */

    height: calc(100vh + 70px) !important;

    /* firefox */

    background-size: cover
    ;
    background-position: center;
    padding-top: 40px !important;
    padding-bottom: 40px !important;
    background-repeat: no-repeat;
}
.pro-bg-confetti {

    background-image: url("/assets/images/background-confetti.jpg");

    height: -o-calc(100vh - 117px);

    /* opera */

    height: -webkit-calc(100vh - 117px);

    /* google, safari */

    height: calc(100vh - 117px);

    /* firefox */

    background-size: cover;

    background-position: center;

}

/* HEADER */

.pro-header {

    height: 117px;

    background-color: #004259;

    width: 100%;

    display: flex;

    align-items: center;

    box-shadow: 0px 3px 6px #00000029;

}



.pro-logo-img {

    display: flex;

    align-items: center;

    margin-left: 8%;

    margin-right: 5%;

}



.pro-code-container {

    display: flex;

}



.pro-code-container-left {

    display: flex;

    align-items: end;

}



.pro-code-container-right {

    display: flex;

    flex-direction: column;

}



.pro-flec-code {

    align-items: end;

}



.pro-code-text {

    font-family: 'Montserrat', sans-serif;

    font-weight: 400;
}



.pro-code-input-label-error {

    height: 18px;

    margin: 0px;

    font-family: 'Montserrat', sans-serif;

    font-size: 18px;

    color: #F44040;

    visibility: hidden;

}



.pro-code-input-label {

    font-family: 'Montserrat', sans-serif;

    font-size: 18px;

    color: #ffffff;

}



.pro-niveau {

    display: flex;

    flex-direction: row;

    justify-content: flex-end;

    align-items: center;

    margin-left: auto;

    margin-right: 8%;

}

.pro-niveau-image-techto {

    align-self: center;

    max-width: 100%;

    padding-right: 20px;

}



.pro-code-afficher {

    font-family: 'Montserrat', sans-serif;

    font-weight: 700;

    font-size: 18px;

    color: #ffffff;

    margin-top: 10px;

}



.pro-code-le-code {

    font-family: 'Montserrat', sans-serif;

    font-weight: 700;

    font-size: 31px;

    color: #ffffff;

    padding-top: 5px;

    text-decoration: none;

}

/*Les styles de font ou de boutons | Nouveau CSS */
.pro-error{
    color: red;
    font-family: Montserrat, serif;
    font-size: 16px;
    font-weight: 700;
    line-height: 1.3em;
    text-align: center;
    background-color: white;
    padding: 5px;
    box-shadow: 0px 3px 6px #00000029;
    margin-top: 15px;
}
.pro-dicte-pop .pro-error{
    color:#004259 !important;
    text-align: left !important;
    margin-top: 10px;
}
.pro-etape-un-niveau-deux .col-md-2{
    text-align: center;
}
.pro-texte-centrer{
	text-align:center;
}
.pro-ombrage{
	-webkit-box-shadow: 2px 2px 9px 3px rgba(0,0,0,0.4); 
	box-shadow: 2px 2px 9px 3px rgba(0,0,0,0.4);
}
.espace-haut{
    margin-top:40px;
}
.espace-en-bas{
    margin-bottom:80px;
}

.bleu{
    color:#004259 !important;
}

.pro-titre-blanc{
	color:white;
	font-family: Montserrat, serif;
	font-size:32px;
	font-weight:700;
	line-height:1.3em;
}
.texte-gras{
    font-weight: 700 !important;
}
.pro-texte-intro-blanc{
	color:white;
	font-family: Montserrat, serif;
	font-size:22px;
	font-weight:500;
	line-height:1.3em;
}
.pro-bouton-background-bois{
	transition:0.2s;
}
.pro-bouton-background-bois:hover{
	transform: scale(1.03) !important;
}

.pro-form-submit .pro-tableau-btn{
    width:50%;
}
.image-techto{
    margin-top:5% !important;
}

.pro-titre-noir{
	color:black;
	font-family: Montserrat, serif;
	font-size:30px;
	font-weight:700;
	font-style: italic;
	text-transform:uppercase;
	line-height:1.3em;
}
.pro-texte-blanc{
	color:white;
	font-family: Montserrat, serif;
	font-size:20px;
	font-weight:700;
	line-height:1.3em;
}

.pro-texte-bravo{
	color:white;
	font-family: Montserrat, serif;
	font-size:30px;
	font-weight:400;
	line-height:1.3em;
}

.pro-code-bravo{
	color:white;
	font-family: Montserrat, serif;
	font-size:32px;
	font-weight:700;
	line-height:1.3em;
    padding: 15px;
    background-color: #004259;
    margin-top:15px;
}

.pro-titre-niveau-noir{
	color:black;
	font-family: Montserrat, serif;
	font-size:45px;
	font-weight:900;
	font-style: italic;
	text-transform:uppercase;
	line-height:1.3em;
}

.pro-texte-code{
	color:white;
	font-family: Montserrat, serif;
	font-size:35px;
	font-weight:700;
	text-transform:uppercase;
	line-height:1.3em;
}

.pro-question-bleu{
	color:#004259;
	font-family: Montserrat, serif;
	font-size:22px;
	font-weight:900;
	line-height:1.3em;
}
.pro-h3-bleu{
	color:#438BB5;
	font-family: Montserrat, serif;
	font-size:20px;
	font-weight:700;
	line-height:1.3em;
}
.pro-h2-bleu{
	color:#004259;
	font-family: Montserrat, serif;
	font-size:30px;
	font-weight:700;
	line-height:1.3em;
}
.pro-bouton-questionnaire{
	color:#004259 !important;
	background-color:white !important;
	border-radius:25px !important;
	border:2px solid white !important;
	padding:25px !important;
	font-family: Montserrat, serif !important;
	font-size:25px !important;
	font-weight:700 !important;
	line-height:1.3em !important;
    width: 100% !important;
    margin-bottom:25px !important;
    white-space: break-spaces !important;
}
.pro-bouton-questionnaire:hover, .pro-bouton-questionnaire:active, .pro-selected{
	color:white !important;
	background-color:#004259 !important;
	border:2px solid #004259 !important;
}
.pro-bouton-questionnaire-regulier{
	font-weight:400;
}

.pro-etape-questionnaire input{
    display:none;
}

.pro-bouton-annexe-4{
	color:#004259;
	background-color:white;
	border-radius:25px;
	padding:10px;
	font-family: Montserrat, serif;
	font-size:21px;
	font-weight:800;
	line-height:1.3em;
}
.pro-bouton-annexe-4:hover{
	color:white;
	background: rgb(29,164,215);
	background: linear-gradient(90deg, rgba(29,164,215,1) 0%, rgba(23,128,168,1) 100%);
}
.pro-trois-forces{
	color:#004259;
	background-color:white;
	border-radius:15px;
	padding:12px;
	font-family: Montserrat, serif;
	font-size:28px;
	font-weight:800;
	line-height:1.3em;
}

.pro-texte-symbole{
	color:white;
	font-family: Montserrat, serif;
	font-size:25px;
	font-weight:500;
	line-height:1.3em;
    margin-bottom: 40px;
}

/* INTRO 1 */

.pro-full-height{
    height: 100%;
}

.pro-tableau-btn{

    position: relative;

    text-align: center;
}

.pro-tableau-btn{

    margin-top: 5%;

}

.pro-intro1-container{
    display: flex;
    flex-direction: row;
    align-items: center;
}

.pro-intro1-video-container{
    width: 65%;
    margin-left: -3%;
    margin-right: -2%;
}

.pro-intro-text-container{
    width: 33%;
    margin-left: 30px;
}

.pro-intro-text-container h2{

    margin-bottom: 20px;

    margin-top: 20px;
}
    

.pro-intro-fleche-suivant-container{
    width: 15%;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-direction: row;
    flex-wrap: nowrap;
}

.pro-fleche-suivant{
    transition:0.2s !important;
}

.pro-fleche-suivant:hover{
    transform:scale(1.05) !important;
}

.pro-tableau-btn{
    width: 100%;
}

/* INTRO 2 */

.pro-intro2-container{
    display: flex;
    flex-direction: row;
    align-items: center;
}

.pro-intro2-second-row{
    display: flex;
    flex-direction: column;
    width: 45%;
    flex-wrap: nowrap;
    justify-content: center;
    align-items: flex-start;
    margin-left: 10%;
    margin-right: -6%;
}
.pro-intro2-colonne-deux{
    width: 40%;
    margin-right: -5%;
}
.pro-intro2-colonne-trois{
    width: 5%;
}
.container-i {
    display: flex;
    flex-direction: row;
    flex-wrap: nowrap;
    align-content: center;
    justify-content: center;
    align-items: center;
}

.pro-texte-i{
	color: #004259;
    background-color: white;
    border-radius: 10px;
    border: 1px solid white;
    padding: 10px;
    padding-left: 45px;
    padding-right: 20px;
    font-family: Montserrat, serif;
    font-size: 20px;
    font-weight: 700;
    line-height: 1.3em;
    margin-left: -20px;
}

.container-i img {
    margin-right: -15px;
    margin-top: -10px;
    z-index: 30;
}
.pro-intro2-second-row .video-container {
    margin: 0px;
    margin-top: -20px;
  }

  li.container-icon-et-texte {
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    align-content: center;
    justify-content: flex-start;
    align-items: center;
    margin-bottom: 25px;
}

li.container-icon-et-texte img{
    width:14%;
    margin-right:15px;
}

li.container-icon-et-texte p{
    width:70%;
    margin-bottom: 0px;
}

/* Niveau 1 - Etape 1 */

.pro-niveau-un-etape-un {
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    align-content: center;
    align-items: center;
}
.pro-niveau-un-etape-un .colonne-un{
    text-align: center;
}
.pro-niveau-un-etape-un .video-container{
    margin:0px;
    width:100%;
}
.pro-niveau-un-etape-un .colonne-trois{
    margin-left:-3%;
}

/* Niveau 1 - Etape 2 */

.pro-etape-un-niveau-deux{
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    align-content: center;
    justify-content: center;
    align-items: center;
}

.pro-influenceur .video-container{
    display: flex;
    flex-direction: row;
    justify-content: center;
    align-content: center;
    align-items: center;
    flex-wrap: wrap;
    margin:inherit;
    width: 735px;
    height: 500px;
    background-image: url("/assets/images/background-video-influenceur.png");
    background-repeat: no-repeat, repeat;
}
.pro-influenceur{
    width:70%;
    margin: auto;
}

/* Niveau 1 - Etape 3 - Bravo */

.tri-pro-bravo{
    background-image: url("/assets/images/background-bravo.png");
    background-repeat: no-repeat, repeat;
    background-position: center;
    background-size: cover;
    padding:42px;
    margin: auto;
    width:634px;
    height:538px;
    display: flex;
    flex-direction: column;
    flex-wrap: wrap;
    align-content: center;
    justify-content: center;
    align-items: center;
    margin-bottom:30px;
}

.pro-titre-bravo{
    margin-top:80px;
}

.pro-video-bravo .video-container{
    width:80%;
}

/* Etape Questionnaire */

section.pro-bg-couche.pro-etape-questionnaire {
    text-align: center;
    display: flex;
}
.question-suivante, .question-precedente{
    display: flex;
    flex-direction: row;
    align-content: center;
    justify-content: center;
    align-items: center;
}
.pro-etape-questionnaire .col-md-2{
    display: flex;
    flex-direction: row;
    align-content: center;
    justify-content: center;
    align-items: center;
}

/* Niveau 2 - Etape 3 */

.pro-niveau-deux-etape-trois .video-container {
    margin: auto !important;
    width: 80% !important;
}

.pro-niveau-deux-etape-trois {
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    align-content: center;
    align-items: center;
}
.pro-niveau-deux-etape-trois .colonne-un{
    text-align: center;
}
.pro-niveau-deux-etape-trois .video-container{
    margin:0px;
    width:100%;
}
.pro-niveau-deux-etape-trois .colonne-trois{
    margin-left:-3%;
}

/* Niveau 2 - Etape 4 */

.pro-niveau-deux-etape-quatre {
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    align-content: center;
    justify-content: center;
    align-items: center;
}

.pro-les-videos .video-container{
    margin:auto;
}

.pro-bloc-avec-symbole {
    background-color: #004259;
    border-radius: 30px;
    -webkit-box-shadow: 5px 5px 15px 5px rgba(0,0,0,0.16); 
    box-shadow: 5px 5px 15px 5px rgba(0,0,0,0.16);
    padding:42px;
    margin: auto;
    display: flex;
    flex-direction: column;
    flex-wrap: wrap;
    align-content: center;
    justify-content: center;
    align-items: center;
    margin-bottom:30px;
    width:80%;
    text-align: center;
}

.col-md-6.pro-les-symboles {
    text-align: center;
}

img.pro-symbole {
    margin-top: -110px;
    margin-bottom: 40px;
}

/* Niveau 2 Etape 2 */

.soumettre-formulaire .pro-bouton-precedent{
    margin-bottom:45%;
    margin-top:50px;
}

/* Niveau 3 - etape 3 */

.pro-niveau-trois-etape-trois {
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    justify-content: center;
}
.pro-niveau-trois-etape-trois .colonne-deux{
    align-self: center;
    text-align: center;
    margin-top:-5% !important;
}

.pro-bouton{
    font-family: Montserrat, serif;
    font-size: 21px;
    font-weight: 800;
    line-height: 1.3em;
    color:#004259;
    text-align: center;
    padding-top:15px;
    padding-bottom:15px;
    padding-left:25px;
    padding-right:25px;
    background-color: white;
    border-radius:25px;
    -webkit-box-shadow: 5px 5px 15px -1px rgba(0,0,0,0.16); 
    box-shadow: 5px 5px 15px -1px rgba(0,0,0,0.16);
    transition: 0.2s !important;
    width:331px;
}
.pro-col{
    width: 33%;
}
.pro-bouton-result{
    font-family: Montserrat, serif;
    font-size: 21px;
    font-weight: 800;
    line-height: 1.3em;
    color:#004259;
    text-align: center;
    padding-top:15px;
    padding-bottom:15px;
    padding-left:25px;
    padding-right:25px;
    background-color: white;
    border-radius:25px;
    -webkit-box-shadow: 5px 5px 15px -1px rgba(0,0,0,0.16); 
    box-shadow: 5px 5px 15px -1px rgba(0,0,0,0.16);
    transition: 0.2s !important;
    width: 85%;
    margin-right:15px;
}
.pro-force-result{
    margin-top:25px;
    margin-bottom:25px;
    text-align: center;
}
.pro-list-force{
        display: flex;
        flex-direction: row;
        align-content: flex-start;
        justify-content: center;
        align-items: center;
        margin-top:3%;
}
.pro-result{
    display: flex;
    width: 100%;
    flex-direction: row;
    align-content: center;
    justify-content: center;
    align-items: center;
    flex-wrap: wrap;
}

.pro-bouton-result:hover{
    color:white;
    background: rgb(29,164,215);
    background: linear-gradient(180deg, rgba(29,164,215,1) 0%, rgba(23,128,168,1) 100%);
}
.pro-bouton:hover{
    color:white;
    background: rgb(29,164,215);
    background: linear-gradient(180deg, rgba(29,164,215,1) 0%, rgba(23,128,168,1) 100%);
}

.pro-description{
    display: flex;
    flex-direction: column;
    align-content: center;
    justify-content: center;
    align-items: center;
    background-image: url("/assets/images/background-bois-bouton.png") !important;
    background-repeat: no-repeat, repeat !important;
    background-position: center !important;
    background-size: contain !important;
    width: 331px !important;
    height:225px !important;
    padding: 25px;
}
.pro-description .texte-blanc{
    font-family: Montserrat, serif;
    font-size: 21px;
    font-weight: 800;
    line-height: 1.3em;
    color:white;
    text-align: center;
}

/* Voici ton totem */

.pro-voici-ton-totem {
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    align-content: center;
    justify-content: center;
    align-items: center;
}

.pro-voici-ton-totem .colonne-deux{
    text-align: center;
}
.pro-voici-ton-totem .colonne-deux img{
    width: 280px;
}

.pro-voici-ton-totem .colonne-trois{
    text-align: center;
}

/* Niveau 3 - Etape 6 */

.pro-niveau-trois-etape-six {
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    padding-top: 40px;
    padding-bottom: 40px;
    align-content: flex-start;
    align-items: flex-start;
    justify-content: space-evenly;
}

.pro-bouton-force {
    color:white;
	font-family: Montserrat, serif;
	font-size:30px;
	font-weight:700;
	line-height:1.3em;
    text-transform: uppercase;
    margin-bottom: 40px !important;
    border-radius: 20px;
    text-align: center;
    background: rgb(29,164,215);
    background: linear-gradient(90deg, rgba(29,164,215,1) 0%, rgba(23,128,168,1) 100%);
    width: fit-content;
    margin: auto;
    -webkit-box-shadow: 5px 5px 15px -1px rgba(0,0,0,0.16); 
    box-shadow: 5px 5px 15px -1px rgba(0,0,0,0.16);
    padding-left: 40px;
    padding-right: 40px;
    padding-top: 10px;
    padding-bottom: 10px;
}

.pro-totem-result {
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    align-content: center;
    justify-content: flex-start;
    align-items: center;
    margin-bottom:30px !important;
}

.pro-totem-image{
    width:20%;
}

.pro-totem-image img{
    width:130px !important;
}

.pro-totem-part-info {
    background-color: #004259;
    padding: 15px;
    -webkit-box-shadow: 5px 5px 15px -1px rgba(0,0,0,0.16); 
    box-shadow: 5px 5px 15px -1px rgba(0,0,0,0.16);
    width:70%;
}

.pro-totem-info-nom{
    color:white;
	font-family: Montserrat, serif;
	font-size:25px;
	font-weight:900;
	line-height:1.3em;
    text-transform: uppercase;
}

.pro-totem-info-desc{
    color:white;
	font-family: Montserrat, serif;
	font-size:22px;
	font-weight:400;
	line-height:1.3em;
}

.pro-les-boutons-container {
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    align-content: center;
    justify-content: center;
    align-items: center;
}
.les-boutons {
    text-align: center;
    margin: 15px;
}
.les-boutons .pro-texte-blanc{
    margin-top:15px;
}

/* Niveau 4 | Dicte */

.pro-dicte-pop {
    position: absolute;
    background-color: white;
    border-radius:30px;
    padding: 25px;
    widtH: 80%;
    margin: auto;
    left: 50%;
    top: 52%;
    transform: translate(-50%, -50%);
}

.pro-dicte-pop label{
    display: inline !important;
}

.pro-dicte-vrai-titre{
    color:white;
	font-family: JMH Typewriter, serif;
	font-size:32px;
	font-weight:400;
	line-height:1.3em;
    text-align: center;
    width: 80%;
    margin: auto;
}
.pro-dicte-paragraphe{
    color:white;
	font-family: JMH Typewriter, serif;
	font-size:22px;
	font-weight:400;
	line-height:1.3em;
    text-align: center;
    width: 80%;
    margin: auto;
}

.pro-dicte-titre{
    color:#004259;
	font-family: JMH Typewriter, serif;
	font-size:45px;
	font-weight:900;
	line-height:1.5em;
    text-align: center;
    padding-top:20px;
    padding-bottom:80px;
}

.pro-dicte-pop-title{
    color:#004259;
	font-family: Montserrat, serif;
	font-size:22px;
	line-height:1.3em;
    margin-bottom:20px
}

.pro-dicte-form{
    color:#004259;
	font-family: Montserrat, serif;
	font-size:18px;
	font-weight:400;
	line-height:1.5em;
}

.pro-dicte-form-valider{
    color:white;
    background-color: #004259;
    border:2px solid #004259;
	font-family: Montserrat, serif;
    padding:10px;
    padding-top:5px;
    padding-bottom:5px;
	font-size:18px;
	font-weight:700;
	line-height:1.5em;
    margin-top:15px;
    display: inline-block;
    transition:0.2s;
}

.pro-dicte-form-valider:hover{
    color:#004259;
    background-color: white;
    border:2px solid #004259;
}

.pro-dicte-pop-result {
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    align-content: center;
    justify-content: center;
    align-items: center;
    margin-top:40px;
    margin-bottom:40px;
}

.pro-dicte-pop-result .video-container{
    width:39%;
    margin: 0px;
}
.pro-dicte-pop-result .pro-pop-texte{
    width:60%;
}
.pro-pop-texte{
    color:#004259;
	font-family: Montserrat, serif;
	font-size:18px;
	font-weight:400;
	line-height:1.4em;
}
.pro-dicte-suivant{
    text-align: right;
}
.pro-dicte-suivant img{
    width:85px !important;
}

/* Niveau 5 | Bravo */

.pro-bravo{
    display: flex;
    flex-direction: column;
    flex-wrap: wrap;
    align-content: center;
    justify-content: center;
    align-items: center;
}
.titre-bravo{
    text-align: center;
    color:white;
	font-family: Montserrat, serif;
	font-size:100px;
	font-weight:700;
	line-height:1.3em;
    text-transform: uppercase;
    margin-bottom: 25px;
}
.bravo-formulaire {
    width: 80%;
}
.champ-formulaire {
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    align-content: center;
    justify-content: space-between;
    align-items: center;
    background-color: #004259;
    width: 100%;
    padding: 30px;
    color: white;
    font-family: Montserrat, serif;
	font-size:30px;
	font-weight:700;
	line-height:1.3em;
    margin-bottom:25px;
    box-shadow: 0px 3px 6px #00000029;
}
.champ-formulaire input{
    width: 65%;
    background-color: #004259;
    color: white;
    border-color: white;
    margin-left: 5px;
    padding: 10px;
}
.pro-submit-form{
    text-align: center;
    display: block;
    transition: 0.2s !important;
    margin-top:40px;
}
.pro-submit-form:hover{
    transform:scale(1.02) !important;
}

/* Niveau 5 | Liste des résultats */

.pro-resultat-section{
    display: flex;
    width: 100%;
    flex-direction: row;
    align-content: center;
    justify-content: center;
    align-items: center;
}

.pro-row-resultat{
    background-color: #004259; 
    /*manque le font family courgette-regular*/
    font-size: 50px;
    color: #ffffff;
    height: fit-content;
    margin-top: 10px;
    margin-bottom: 10px;
}

.pro-resultat-table{
    width: 80%;
    border-collapse: separate;
    border-spacing: 0 15px;
}

.pro-resultat-precedent{
    transform: rotate(180deg);
}

.pro-resultat-arrow{
    width: 10%;
    padding: 30px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.pro-resultat-totem{
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
}

.pro-resultat-nom{
    width: 65%;
}

.pro-resultat-img{
    width: 20%;
}

.pro-resultat-img > *{
    padding-right: 30px;
}

/* Nouveau medias querry */

@media (min-width:1600px) and (max-width:1800px){
    .pro-bg-debout, .pro-bg-couche, .pro-bg-horizon, .pro-bg-confetti{
        height:auto !important;
        padding-top: 40px;
        padding-bottom: 40px;
    }
    .pro-bouton-bg{
        height: calc(100vh + 70px) !important;
    }
    .pro-titre-blanc{
        font-size: 30px;
    }
    .pro-texte-intro-blanc{
        font-size: 20px;
    }
    
    /* Niveau 2 Etape 2 */

    .soumettre-formulaire .pro-bouton-precedent{
        margin-bottom:45%;
        margin-top:40px;
    }

    /* Symboles (etoiles, rond, carree...*/

    .pro-texte-symbole{
        font-size: 22px;
    }
    img.pro-symbole {
        margin-top: -70px;
    }

    /* Niveau 3 - Les boutons */

    .pro-bouton{
        width: 280px !important;
    }
    .pro-description{
        width: 280px !important;
        height: 200px !important;
    }

    /* Niveau 4 | Dicte */

    .pro-dicte-form{
	    font-size:16px;
    }

    .pro-dicte-form-valider{
	    font-size:18px;
    }
    .pro-pop-texte{
        font-size:16px;
    }

    /* Niveau 5 | Bravo */
    .titre-bravo{
	    font-size:90px;
    }
    .bravo-formulaire {
        width: 80%;
    }
    .champ-formulaire input{
        width: 60%;
    }
    .champ-formulaire label{
        font-size: 28px;
    }

}

@media (min-width:1300px) and (max-width:1599px){
    .pro-bg-debout, .pro-bg-couche, .pro-bg-horizon, .pro-bg-confetti{
        height:auto !important;
        padding-top: 40px;
        padding-bottom: 40px;
    }
    .pro-bouton-precedent .pro-texte-blanc{
        color: white !important;
    }
    .pro-bouton-bg{
        height: calc(100vh + 70px) !important;
    }
    .pro-titre-blanc{
        font-size: 25px;
    }
    .pro-titre-noir{
        font-size: 25px;
    }
    .pro-texte-intro-blanc{
        font-size: 18px;
    }
    .pro-texte-blanc{
        font-size: 18px;
    }
    .pro-titre-niveau-noir{
        font-size:40px;
    }
    .colonne-un img{
        width: 160px;
    }
    .pro-fleche-suivant img{
        width:90px;
    }
    /* Influenceur */
    .pro-influenceur {
        width: 100%;
        margin: auto;
    }
    .pro-influenceur .video-container {
        width: 655px;
        height: 440px;
        background-size: contain;
    }
    /* Fin influenceur */

    /* Bravo */
    .tri-pro-bravo{
        width: 600px;
        height: 510px;
    }
    /* Fin bravo */

    /* Questionnaire */
    .pro-bouton-questionnaire{
        font-size: 20px;
    }
    .pro-h2-bleu{
        font-size: 25px;
    }
    .pro-h3-bleu{
        font-size: 18px;
    }
    .pro-question-bleu{
        font-size: 20px;
    }
    /* Fin questionnaire */

    /* Niveau 2 Etape 2 */

    .soumettre-formulaire .pro-bouton-precedent{
        margin-bottom:30%;
        margin-top:20px;
    }
    .image-techto img{
        width:400px;
    }

    /* Symboles (etoiles, rond, carree...*/
    .pro-bloc-avec-symbole{
        width: 95%;
        margin-top: 50px;
    }

    .pro-texte-symbole{
        font-size: 22px;
    }

    img.pro-symbole {
        margin-top: -70px;
        margin-bottom:25px;
        width:145px;
    }

    /* Niveau 3 - Les boutons */

    .pro-bouton{
        width: 230px !important;
        font-size: 16px !important;
    }
    .pro-description{
        width: 230px !important;
        height: 170px !important;
        padding: 15px;
    }
    .pro-description .texte-blanc{
        font-size: 15px !important;
    }
    .pro-bouton-result{
        font-size: 18px !important;
    }

    /* Niveau 3 - Etape 6 */

.pro-bouton-force {
	font-size:25px;
}
.pro-totem-image{
    width:30%;
}

.pro-totem-image img{
    width:130px !important;
}

.pro-totem-info-nom{
	font-size:22px;
}

.pro-totem-info-desc{
	font-size:18px;
}

    /* Niveau 4 | Dicte */
    .pro-dicte-pop{
        width:90%;
    }
    .pro-dicte-form{
        font-size:14px;
    }

    .pro-dicte-form-valider{
        font-size:16px;
    }
    .pro-pop-texte{
        font-size:15px;
    }

    /* Niveau 5 | Bravo */
    .titre-bravo{
	    font-size:80px;
    }
    .bravo-formulaire {
        width: 90%;
    }
    .champ-formulaire input{
        width: 60%;
    }
    .champ-formulaire label{
        font-size: 25px;
    }

    /* Tableau des Resultats */

    .pro-row-resultat{
        font-size: 35px;
        line-height: 1.2em;
    }
    .pro-resultat-nom {
        padding-left: 15px !important;
    }
    .pro-resultat-img{
        width: 24%;
    }
}

@media (min-width:1180px) and (max-width:1299px){
    .pro-bg-debout, .pro-bg-couche, .pro-bg-horizon, .pro-bg-confetti{
        height:auto !important;
        padding-top: 40px;
        padding-bottom: 40px;
    }
    .pro-bouton-precedent .pro-texte-blanc{
        color: white !important;
    }
    .pro-bouton-bg{
        height: calc(100vh + 50px) !important;
    }
    .pro-titre-blanc{
        font-size: 22px;
    }
    .pro-titre-noir{
        font-size: 22px;
    }
    .pro-texte-intro-blanc{
        font-size: 17px;
    }
    .pro-texte-blanc{
        font-size: 17px;
    }
    .pro-titre-niveau-noir{
        font-size:30px;
    }
    .colonne-un img{
        width: 160px;
    }
    .pro-fleche-suivant img{
        width:90px;
    }
    /* Influenceur */
    .pro-influenceur {
        width: 100%;
        margin: auto;
    }
    .pro-influenceur .video-container {
        width: 600px;
        height: 410px;
        background-size: contain;
    }
    /* Fin influenceur */

    /* Bravo */
    .tri-pro-bravo{
        width: 550px;
        height: 470px;
        padding: 35px;
    }
    .pro-texte-bravo{
        font-size: 20px;
    }
    .pro-code-bravo{
        font-size: 25px;
    }
    /* Fin bravo */

    /* Questionnaire */
    .pro-bouton-questionnaire{
        font-size: 20px;
    }
    .pro-h2-bleu{
        font-size: 25px;
    }
    .pro-h3-bleu{
        font-size: 18px;
    }
    .pro-question-bleu{
        font-size: 20px;
    }
    /* Fin questionnaire */

    /* Niveau 2 Etape 2 */

    .soumettre-formulaire .pro-bouton-precedent{
        margin-bottom:30%;
        margin-top:20px;
    }
    .image-techto img{
        width:400px;
    }

    /* Symboles (etoiles, rond, carree...*/
    .pro-bloc-avec-symbole{
        width: 95%;
        margin-top: 50px;
    }

    .pro-texte-symbole{
        font-size: 20px;
    }

    img.pro-symbole {
        margin-top: -60px;
        margin-bottom:25px;
        width:130px;
    }

    /* Niveau 3 - Les boutons */

    .pro-bouton{
        width: 210px !important;
        font-size: 15px !important;
    }
    .pro-description{
        width: 210px !important;
        height: 155px !important;
        padding: 15px;
    }
    .pro-description .texte-blanc{
        font-size: 13px !important;
    }
    .pro-bouton-result{
        font-size: 16px !important;
    }   
    
    /* Niveau 3 - Etape 6 */

    .pro-bouton-force {
	    font-size:25px;
    }
    .pro-totem-image{
        width:30%;
    }

    .pro-totem-image img{
        width:130px !important;
    }

    .pro-totem-info-nom{
        font-size:22px;
    }

    .pro-totem-info-desc{
        font-size:18px;
    }

    /* Niveau 4 | Dicte */
        .pro-dicte-pop{
            width:95%;
        }
        .pro-dicte-form{
            font-size:14px;
        }

        .pro-dicte-form-valider{
            font-size:16px;
        }
        .pro-pop-texte{
            font-size:15px;
        }

    /* Niveau 5 | Bravo */
    .titre-bravo{
	    font-size:75px;
    }
    .bravo-formulaire {
        width: 90%;
    }
    .champ-formulaire input{
        width: 55%;
    }
    .champ-formulaire label{
        font-size: 25px;
    }
    /* Tableau des Resultats */

    .pro-row-resultat{
        font-size: 35px;
        line-height: 1.2em;
    }
    .pro-resultat-nom {
        padding-left: 15px !important;
    }
    .pro-resultat-img{
        width: 28%;
    }
    .pro-resultat-img img{
        width: 45%;
    }
}

@media (min-width:981px) and (max-width:1179px){
    .pro-bg-debout, .pro-bg-couche, .pro-bg-horizon, .pro-bg-confetti{
        height:auto !important;
        padding-top: 40px;
        padding-bottom: 40px;
    }
    .pro-bouton-precedent .pro-texte-blanc{
        color: white !important;
    }
    .pro-bouton-bg{
        height: 980px !important;
    }
    .pro-niveau-un-etape-un{
        background-image: none;
        background-color: #438BB5;
        display: flex;
        flex-direction: column;
        align-content: flex-start;
        justify-content: flex-start;
        align-items: center;
        height:auto !important;
    }
    .pro-intro1-container .video-container{
        width: 85%;
    }
    .pro-niveau-un-etape-un .video-container {
        margin: auto;
        width: 60%;
    }
    .colonne-un{
        width: 100%;
    }
    .pro-bouton-bg .colonne-un, .pro-bouton-bg .pro-list-force{
        width: 50%;
    }
    .colonne-un img{
        width: 160px;
    }
    .colonne-deux{
        width: 100%;
    }
    .pro-bouton-bg .colonne-deux{
        width: 50%;
    }
    .colonne-trois{
        width: 85%;
    }
    .pro-titre-niveau-noir{
        font-size:35px;
    }
    .pro-titre-blanc{
        font-size: 18px;
    }
    .pro-niveau-un-etape-un .colonne-trois{
        margin-left: 0px;
        width: 80%;
    }
    .pro-niveau-deux-etape-trois .colonne-trois{
        margin-left: 10%;
        margin-right:10%;
    }
    .pro-titre-noir{
        font-size: 18px;
    }
    .pro-texte-intro-blanc{
        font-size: 14px;
    }
    .pro-texte-blanc{
        font-size: 15px;
    }
    .pro-texte-i{
        font-size: 15px;
    }
    .pro-fleche-suivant img{
        width:80px;
    }

    /* Influenceur */
    .pro-influenceur {
        width: 100%;
        margin: auto;
    }
    .pro-influenceur .video-container {
        width: 500px;
        height: 340px;
        background-size: contain;
    }
    /* Fin influenceur */

    /* Bravo */
    .tri-pro-bravo{
        width: 550px;
        height: 470px;
        padding: 35px;
    }
    .pro-texte-bravo{
        font-size: 20px;
    }
    .pro-code-bravo{
        font-size: 25px;
    }
    /* Fin bravo */

    /* Questionnaire */
    .pro-bouton-questionnaire{
        font-size: 20px;
    }
    .pro-h2-bleu{
        font-size: 25px;
    }
    .pro-h3-bleu{
        font-size: 18px;
    }
    .pro-question-bleu{
        font-size: 20px;
    }
    /* Fin questionnaire */

    /* Niveau 2 Etape 2 */

    .pro-question-11{
        display: flex !important;
        flex-direction: row !important;
        flex-wrap: wrap !important;
        align-content: center !important;
        justify-content: center !important;
        align-items: center !important;
    }

    .soumettre-formulaire .pro-bouton-precedent{
        margin-bottom:30%;
        margin-top:20px;
    }
    .image-techto img{
        width:400px;
    }

    /* Symboles (etoiles, rond, carree...*/
    .pro-bloc-avec-symbole{
        width: 80%;
        margin-top: 50px;
    }

    .pro-texte-symbole{
        font-size: 20px;
    }

    img.pro-symbole {
        margin-top: -60px;
        margin-bottom:25px;
        width:130px;
    }

    /* Niveau 3 - Les boutons */
    .pro-niveau-trois-etape-trois .colonne-deux{
        width: 100%;
        margin-top: 55% !important;
    }
    .pro-niveau-trois-etape-trois .pro-list-force{
        width:100%;
    }
    .pro-bouton{
        width: 230px !important;
        font-size: 15px !important;
    }
    .pro-description{
        width: 230px !important;
        height: 170px !important;
        padding: 15px;
    }
    .pro-description .texte-blanc{
        font-size: 15px !important;
    }
    .pro-bouton-result{
        font-size: 17px !important;
    }   

    /* Niveau 3 - Etape 6 */

        .pro-bouton-force {
            font-size:25px;
        }
        .pro-totem-image{
            width:15%;
        }

        .pro-totem-image img{
            width:115px !important;
        }

        .pro-totem-info-nom{
            font-size:22px;
        }

        .pro-totem-info-desc{
            font-size:18px;
        }

        /* Niveau 4 | Dicte */
            .pro-dicte-pop{
                width:95%;
            }
            .pro-dicte-pop-title{
                font-size:20px;
            }
            .pro-dicte-form{
                font-size:14px;
            }

            .pro-dicte-form-valider{
                font-size:16px;
            }
            .pro-pop-texte{
                font-size:15px;
            }

        /* Niveau 5 | Bravo */
    .titre-bravo{
	    font-size:70px;
    }
    .bravo-formulaire {
        width: 90%;
    }
    .champ-formulaire input{
        width: 50%;
    }
    .champ-formulaire label{
        font-size: 22px;
    }
    /* Tableau des Resultats */

    .pro-row-resultat{
        font-size: 28px;
        line-height: 1.2em;
    }
    .pro-resultat-nom {
        padding-left: 15px !important;
    }
    .pro-resultat-img{
        width: 28%;
    }
    .pro-resultat-img img{
        width: 45%;
    }
}

@media (max-width:980px){
    .pro-bg-debout, .pro-bg-couche{
        background-image: none;
        background-color: #438BB5;
        display: flex;
        flex-direction: column;
        align-content: flex-start;
        justify-content: flex-start;
        align-items: center;
        height:auto !important;
        padding-top:30px;
        padding-bottom:30px;
    }
    .pro-bg-horizon, .pro-bg-confetti{
        display: flex;
        flex-direction: column;
        align-content: center;
        justify-content: center;
        align-items: center;
        height:auto !important;
        padding-top:30px;
        padding-bottom:30px;
    }
    .pro-bouton-bg{
        height: 1220px !important;
    }
    .pro-bouton-precedent .pro-texte-blanc{
        color: white !important;
    }
    .pro-la-dicte{
        height: 900px !important;
    }
    .video{
        width: 100%;
        height: 100%;
    }
    .pro-intro1-container, .pro-intro2-container{
        width: 100%;
        margin:auto;
    }
    .pro-intro1-container .video-container, .pro-intro2-container .video-container{
        width: 80%;
        margin:auto;
    }
    .pro-intro-text-container, .pro-intro2-second-row, .pro-intro2-colonne-deux, .pro-intro2-colonne-trois{
        width:85%;
        margin-left:0px;
        margin:auto;
    }
    .pro-intro2-second-row{
        justify-content: center;
        align-items: center;
    }
    .pro-intro2-colonne-trois{
        margin-bottom:30px;
        text-align: center;
    }
    li.container-icon-et-texte{
        align-content: center;
        justify-content: center;
        align-items: center;
        margin-top:30px;
        margin-bottom:30px;
    }
    .pro-niveau-un-etape-un .colonne-trois, .pro-niveau-deux-etape-trois .colonne-trois{
        margin-left: 10%;
        margin-right: 10%;
    }
    li.container-icon-et-texte p {
        width: fit-content;
        margin-bottom: 0px;
    }
    .pro-intro-text-container .bouton-voir-tableau{
        width: 100%;
        display: block;
        text-align: center;
        margin-bottom: 30px;
    }
    .pro-intro-text-container img{
        width:70%;
    }
    .pro-niveau-un-etape-un .pro-fleche-suivant{
        text-align: center;
        display: block;
        margin-bottom:30px;
    }

    /* Influenceur */
    .pro-etape-un-niveau-deux{
        align-content: center;
        justify-content: center;
        align-items: center;
    }
    .pro-influenceur {
        width: 100%;
        margin: auto;
    }
    .pro-influenceur .video-container {
        width: 550px;
        height: 380px;
        background-size: contain;
    }
    .pro-etape-un-niveau-deux .video{
        width: 90% !important;
        height: 90% !important;
    }
    /* Fin influenceur */

    /* Bravo */
    .tri-pro-bravo{
        width: 550px;
        height: 470px;
        padding: 35px;
    }
    .pro-texte-bravo{
        font-size: 20px;
    }
    .pro-code-bravo{
        font-size: 25px;
    }
    /* Fin bravo */

    /* Questionnaire */
    .pro-bouton-questionnaire{
        font-size: 20px;
    }
    .pro-h2-bleu{
        font-size: 25px;
    }
    .pro-h3-bleu{
        font-size: 18px;
        color:#ffffff !important;
    }
    .pro-question-bleu{
        font-size: 20px;
    }
    /* Fin questionnaire */

    /* Niveau 2 Etape 2 */

    .pro-envoyer-formulaire{
        display: flex !important;
        flex-direction: row !important;
        flex-wrap: wrap !important;
        align-content: center !important;
        justify-content: center !important;
        align-items: center !important;
    }

    .soumettre-formulaire .pro-bouton-precedent{
        margin-bottom:30%;
        margin-top:20px;
    }
    .image-techto img{
        width:400px;
    }

    /* Symboles (etoiles, rond, carree...*/
    .pro-bloc-avec-symbole{
        width: 80%;
        margin-top: 50px;
    }

    .pro-texte-symbole{
        font-size: 20px;
    }

    img.pro-symbole {
        margin-top: -60px;
        margin-bottom:25px;
        width:130px;
    }

    /* Niveau 3 - Les boutons */
    .pro-niveau-trois-etape-trois .colonne-deux{
        width: 100%;
        margin-top: 68% !important;
    }
    .pro-niveau-trois-etape-trois .pro-list-force{
        width:100%;
    }
    .pro-niveau-trois-etape-trois .pro-titre-blanc{
        font-size: 25px !important;
    }
    .pro-bouton{
        width: 310px !important;
        font-size: 15px !important;
    }
    .pro-description{
        width: 310px !important;
        height: 225px !important;
        padding: 15px;
    }
    .pro-description .texte-blanc{
        font-size: 16px !important;
    }
    .pro-bouton-result{
        font-size: 18px !important;
    }   

    /* Niveau 3 - Etape 6 */

    .pro-bouton-force {
        font-size:25px;
    }
    .pro-totem-image{
        width:15%;
    }

    .pro-totem-image img{
        width:115px !important;
    }

    .pro-totem-part-info{
        widtH:80%;
    }

    .pro-totem-info-nom{
        font-size:22px;
    }

    .pro-totem-info-desc{
        font-size:18px;
    }
    .pro-niveau-trois-etape-six .colonne-un, .pro-niveau-trois-etape-six .colonne-deux{
        width:100% !important;
    }

    /* Niveau 4 | Dicte */
        .pro-dicte-pop{
            width:95%;
        }
        .pro-dicte-pop-title{
            font-size:20px;
        }
        .pro-dicte-form{
            font-size:14px;
        }

        .pro-dicte-form-valider{
            font-size:16px;
        }
        .pro-pop-texte{
            font-size:15px;
        }
        .pro-dicte-pop-result .video-container{
            width:39%;
            margin-right:10px;
        }
        .pro-dicte-pop-result .pro-pop-texte{
            width: 58%;
        }

    /* Niveau 5 | Bravo */
    .titre-bravo{
	    font-size:70px;
    }
    .bravo-formulaire {
        width: 90%;
    }
    .champ-formulaire input{
        width: 50%;
    }
    .champ-formulaire label{
        font-size: 22px;
    }
    /* Tableau des Resultats */

    .pro-row-resultat{
        font-size: 28px;
        line-height: 1.2em;
    }
    .pro-resultat-nom {
        padding-left: 15px !important;
    }
    .pro-resultat-img{
        width: 28%;
    }
    .pro-resultat-img img{
        width: 45%;
    }
}



/* Vieux media querry */

@media (max-width: 1400px) {

    .pro-niveau {

        margin-right: 3%;

    }

    .pro-logo-img {

        margin-left: 3%;

    }

    .pro-text-techto{

        font-size: 16px;

    }

    .pro-text-title{

        font-size: 2rem;

    }

}