.green-dark {
  color: #3E7569;
}

@font-face {
  font-family: "Gotham";
  font-weight: 700;
  src: url("../assets/font/gotham/GothamBold.eot");
  src: url("../assets/font/gotham/GothamBold.eot") format("embedded-opentype"), url("../assets/font/gotham/GothamBold.woff2") format("woff2"), url("../assets/font/gotham/GothamBold.woff") format("woff"), url("../assets/font/gotham/GothamBold.ttf") format("truetype"), url("../assets/font/gotham/GothamBold.svg#GothamBold") format("svg");
}
@font-face {
  font-family: "Gotham";
  font-weight: 300;
  src: url("../assets/font/gotham/GothamLight.eot");
  src: url("../assets/font/gotham/GothamLight.eot") format("embedded-opentype"), url("../assets/font/gotham/GothamLight.woff2") format("woff2"), url("../assets/font/gotham/GothamLight.woff") format("woff"), url("../assets/font/gotham/GothamLight.ttf") format("truetype"), url("../assets/font/gotham/GothamLight.svg#GothamLight") format("svg");
}
@font-face {
  font-family: "Gotham";
  font-weight: 500;
  src: url("../assets/font/gotham/GothamMedium.eot");
  src: url("../assets/font/gotham/GothamMedium.eot") format("embedded-opentype"), url("../assets/font/gotham/GothamMedium.woff2") format("woff2"), url("../assets/font/gotham/GothamMedium.woff") format("woff"), url("../assets/font/gotham/GothamMedium.ttf") format("truetype"), url("../assets/font/gotham/GothamMedium.svg#GothamMedium") format("svg");
}
body {
  font-family: "Gotham", sans-serif;
  font-weight: 300;
  font-size: 15px;
  color: white;
}

.green-dark {
  color: #3E7569;
}

html,
body {
  height: 100%;
}

/* Chrome, Safari, Edge, Opera */
input::-webkit-outer-spin-button,
input::-webkit-inner-spin-button {
  appearance: none;
  margin: 0;
}

/* Firefox */
input[type=number] {
  appearance: textfield;
}

h1 {
  color: #fff;
  font-weight: 700;
  font-size: 3rem;
}

h2 {
  color: #fff;
  font-weight: 700;
  font-size: 1.6rem;
}
h2 span {
  color: #3E7569;
}

h3 {
  color: #fff;
  font-weight: 700;
  font-size: 1rem;
}

ul {
  padding-left: 0;
  font-size: 0.7rem;
}
ul li {
  list-style-type: custom-counter-style;
  display: inline;
}

a {
  color: #fff;
  text-decoration: none;
}
a:hover {
  color: #fff;
}

p {
  color: #fff;
  font-size: 1rem;
}

button {
  cursor: pointer;
}
button.start-quiz {
  background: #3E7569;
  color: #fff;
  border: none;
  display: block;
  width: 100%;
  padding: 17px 0;
  border-radius: 8px;
}
button.start-quiz:hover {
  color: white;
}
button.answer {
  border: none;
  background: transparent;
  padding: 10px;
  cursor: pointer;
  border-radius: 6px;
  margin: 5px 0;
}
button.answer label {
  color: #fff;
  font-size: 1rem;
  display: flex;
  flex-direction: row;
  align-content: center;
  align-items: center;
  cursor: pointer;
  justify-content: flex-start;
  text-align: left;
}
button.answer label span {
  display: flex;
  flex-direction: row;
  align-content: center;
  justify-content: center;
  align-items: center;
  padding: 10px 16px;
  color: #65D3EC;
  background: #fff;
  border-radius: 6px;
  font-size: 1rem;
  font-weight: bold;
  margin-right: 8px;
  cursor: pointer;
}
button.answer.was-correct {
  background: #75B94E;
  border: 2px solid #fff;
  color: #fff;
}
button.answer.was-correct label span {
  display: none;
}
button.answer.was-wrong {
  background: #E4032E;
  border: 2px solid #fff;
  color: white;
}
button.answer.was-wrong label span {
  display: none;
}
button.answer.selected {
  background: transparent;
  border: none;
  color: #086D84;
}
button.answer.selected label span {
  background: #086D84;
  color: #fff;
}
button.btn-see-question, button.btn-previous, button.btn-test-answer, button.btn-see-my-results, button.btn-next {
  font-weight: 500;
  border: none;
  background: #fff;
  color: #65D3EC;
  text-transform: uppercase;
  border-radius: 6px;
  padding: 10px;
  align-self: end;
  margin-top: 10px;
}
button.btn-see-question label,
button.btn-see-question span, button.btn-previous label,
button.btn-previous span, button.btn-test-answer label,
button.btn-test-answer span, button.btn-see-my-results label,
button.btn-see-my-results span, button.btn-next label,
button.btn-next span {
  cursor: pointer;
}
button.btn-see-question, button.btn-previous {
  align-self: start;
}

.font-size-small {
  font-size: 0.7rem;
}

header {
  padding: 20px 0 10px;
}
header .logo img {
  width: 100%;
  max-width: 250px;
  margin-left: -20px;
}

.container #question-number-info {
  text-transform: uppercase;
  color: #086D84;
  font-size: 1.3rem;
  font-weight: bold;
}
.container #wrapper-btn {
  margin: auto;
}
.container #quiz-container > label {
  font-weight: 500;
  font-size: 2rem;
  line-height: 2rem;
}
.container #quiz-container > label span {
  font-weight: bold;
  font-size: 3.5rem;
  line-height: 3.5rem;
}
.container #quiz-container > label span.font-size-small {
  font-size: 1.2rem;
  line-height: 1.5rem;
  font-weight: 300;
  font-style: italic;
  margin-top: 15px;
  margin-bottom: 15px;
  display: block;
}
.container #quiz-container .feedback {
  padding-left: 20px;
  font-size: 1.2rem;
  line-height: 1.6rem;
}
.container #quiz-container .feedback span {
  font-weight: bold;
}
.container #quiz-container .feedback ul {
  margin-top: 0;
}
.container #quiz-container .feedback ul li {
  display: block;
  font-size: 1rem;
  line-height: 1.6rem;
}
.container #quiz-container form button.answer label {
  font-weight: 500;
  font-size: 1.2rem;
  line-height: 1.2rem;
  display: flex;
  flex-direction: row;
  align-content: center;
  align-items: center;
  cursor: pointer;
  justify-content: flex-start;
  text-align: left;
}
.container #quiz-container form button.answer label span {
  font-size: 1.2rem;
}
.container #section-user-form {
  margin-top: 20px;
}
.container #section-user-form .beacon-reduce-width {
  max-width: 80% !important;
}
.container #section-user-form form {
  margin-bottom: 10px;
}
.container #section-user-form form.was-validated .form-control:valid,
.container #section-user-form form.was-validated .form-control:invalid {
  background-image: none !important;
}
.container #section-user-form form.was-validated .form-control:valid.is-invalid,
.container #section-user-form form.was-validated .form-control:invalid.is-invalid {
  border-color: #dc3545;
  box-shadow: 0 0 0 0.25rem rgba(220, 53, 69, 0.25) !important;
}
.container #section-user-form form .form-floating input {
  border-radius: 9px;
}
.container #section-user-form form .form-floating label {
  color: #707070;
  font-weight: 300;
  font-style: italic;
  margin-left: 10px;
  font-size: 1.2rem;
}
.container #section-user-form form .receive-communication .form-check-label {
  font-size: 11px;
}

.fond-0 {
  background-color: #46D5B8;
  background-image: url("../assets/images/background/fond-0-2.png");
  background-repeat: no-repeat;
  background-size: contain;
  background-position: top 100% left 100%;
  background-attachment: fixed;
}
.fond-0.success {
  background: #65D3EC url("../assets/images/background/fond-0-2.png") no-repeat;
  background-size: contain;
  background-position: top 100% left 100%;
}
.fond-0 .container #question-number-info {
  color: #086D84;
}
.fond-0 .container button.answer label span {
  color: #65D3EC;
}
.fond-0 .container button.answer.selected {
  background: transparent;
  border: none;
  color: #086D84;
}
.fond-0 .container button.answer.selected label {
  color: #086D84;
}
.fond-0 .container button.answer.selected label span {
  background: #086D84;
  color: #fff;
}
.fond-0 .container button.btn-previous, .fond-0 .container button.btn-see-my-results, .fond-0 .container button.btn-next {
  color: #65D3EC;
}

.fond-1 {
  background: #E9A8EC url("../assets/images/background/fond-1.png") no-repeat;
  background-size: contain;
  background-position: bottom 0 left 100%;
  background-attachment: fixed !important;
}
.fond-1.success {
  background: #E9A8EC url("../assets/images/background/fond-1-success.png") no-repeat;
  background-size: contain;
  background-position: bottom 0 left 100%;
}
.fond-1 .container #question-number-info {
  color: #792E7E;
}
.fond-1 .container button.answer label span {
  color: #E9A8EC;
}
.fond-1 .container button.answer.selected {
  background: transparent;
  border: none;
  color: #792E7E;
}
.fond-1 .container button.answer.selected label {
  color: #792E7E;
}
.fond-1 .container button.answer.selected label span {
  background: #792E7E;
  color: #fff;
}
.fond-1 .container button.btn-previous, .fond-1 .container button.btn-see-my-results, .fond-1 .container button.btn-next {
  color: #E9A8EC;
}
.fond-1 .container button.btn-test-answer {
  background: #792E7E;
  color: #fff;
}

.fond-2 {
  background: #F5C675 url("../assets/images/background/fond-2-2.png") no-repeat;
  background-size: contain;
  background-position: bottom 0 left 140%;
  background-attachment: fixed !important;
}
.fond-2.success {
  background: #F5C675 url("../assets/images/background/fond-2-2-success.png") no-repeat;
  background-size: contain;
  background-position: bottom 0 left 140%;
}
.fond-2 .container #question-number-info {
  color: #5C431A;
}
.fond-2 .container button.answer label span {
  color: #5C431A;
}
.fond-2 .container button.answer.selected {
  background: transparent;
  border: none;
  color: #50101C;
}
.fond-2 .container button.answer.selected label {
  color: #50101C;
}
.fond-2 .container button.answer.selected label span {
  background: #50101C;
  color: #fff;
}
.fond-2 .container button.btn-previous, .fond-2 .container button.btn-see-my-results, .fond-2 .container button.btn-next {
  color: #5C431A;
}
.fond-2 .container button.btn-test-answer {
  background: #50101C;
  color: #fff;
}

.fond-3 {
  background: #FF6161 url("../assets/images/background/fond-3-2.png") no-repeat;
  background-size: contain;
  background-position: bottom 0 left 120%;
  background-attachment: fixed !important;
}
.fond-3.success {
  background: #FF6161 url("../assets/images/background/fond-3-2-success.png") no-repeat;
  background-size: contain;
  background-position: bottom 0 left 120%;
}
.fond-3 .container #question-number-info {
  color: #8B1810;
}
.fond-3 .container button.answer label span {
  color: #8B1810;
}
.fond-3 .container button.answer.selected {
  background: transparent;
  border: none;
  color: #8B1810;
}
.fond-3 .container button.answer.selected label {
  color: #8B1810;
}
.fond-3 .container button.answer.selected label span {
  background: #8B1810;
  color: #fff;
}
.fond-3 .container button.btn-see-question, .fond-3 .container button.btn-previous, .fond-3 .container button.btn-see-my-results, .fond-3 .container button.btn-next {
  color: #8B1810;
}
.fond-3 .container button.btn-test-answer {
  background: #8B1810;
  color: #fff;
}

.fond-4 {
  background: #AEA5DF url("../assets/images/background/fond-4-2.png") no-repeat;
  background-size: contain;
  background-position: bottom 0 left 100%;
  background-attachment: fixed !important;
}
.fond-4.success {
  background: #AEA5DF url("../assets/images/background/fond-4-2-success.png") no-repeat;
  background-size: contain;
  background-position: bottom 0 left 100%;
}
.fond-4 .container #question-number-info {
  color: #2D295C;
}
.fond-4 .container button.answer label span {
  color: #AEA5DF;
}
.fond-4 .container button.answer.selected {
  background: transparent;
  border: none;
  color: #2D295C;
}
.fond-4 .container button.answer.selected label {
  color: #2D295C;
}
.fond-4 .container button.answer.selected label span {
  background: #2D295C;
  color: #fff;
}
.fond-4 .container button.btn-previous, .fond-4 .container button.btn-see-my-results, .fond-4 .container button.btn-next {
  color: #AEA5DF;
}
.fond-4 .container button.btn-test-answer {
  background: #2D295C;
  color: #fff;
}

.fond-5 {
  background: #F1A5C6 url("../assets/images/background/fond-5-2.png") no-repeat;
  background-size: contain;
  background-position: bottom 0 left 100%;
  background-attachment: fixed !important;
}
.fond-5.success {
  background: #F1A5C6 url("../assets/images/background/fond-5-2-success.png") no-repeat;
  background-size: contain;
  background-position: bottom 0 left 100%;
}
.fond-5 .container #question-number-info {
  color: #5F2D42;
}
.fond-5 .container button.answer label span {
  color: #F1A5C6;
}
.fond-5 .container button.answer.selected {
  background: transparent;
  border: none;
  color: #5F2D42;
}
.fond-5 .container button.answer.selected label {
  color: #5F2D42;
}
.fond-5 .container button.answer.selected label span {
  background: #5F2D42;
  color: #fff;
}
.fond-5 .container button.btn-previous, .fond-5 .container button.btn-next {
  color: #F1A5C6;
}
.fond-5 .container button.btn-see-my-results {
  color: #5F2D42;
}
.fond-5 .container button.btn-test-answer {
  background: #5F2D42;
  color: #fff;
}

.recap {
  background: #64A2FF url("../assets/images/background/fond-recap-2.png") no-repeat top 0 left 100%;
  background-size: contain;
  background-position: bottom 0 left 100%;
  background-attachment: fixed !important;
}
.recap .space-between {
  height: 10px;
}
.recap #section-see-my-results #prenom {
  text-align: center;
  font-size: 2.2rem;
  font-weight: bold;
}
.recap #section-see-my-results .trait-svg {
  background-position: top 1% left 18%, top 1% right 18%;
  background-size: 100px;
  background-repeat: no-repeat;
  background-image: url("../assets/images/svg/svg-1-2.svg"), url("../assets/images/svg/svg-2-2.svg");
  padding: 10px 60px;
}
.recap #section-see-my-results .trait-svg h1 {
  text-transform: uppercase;
  font-size: 3.8rem;
  color: #044251;
  text-align: center;
  padding-bottom: 10px;
}
.recap #section-see-my-results .trait-svg h2 {
  text-align: center;
}
.recap #section-see-my-results .trait-svg h3 {
  text-align: center;
  color: #044251;
}
.recap #section-see-my-results .trait-svg p {
  font-weight: 500;
  text-align: center;
  font-size: 1rem;
  line-height: 1.3rem;
}
.recap #section-see-my-results .trait-svg p.participe {
  padding-top: 0;
  margin-bottom: 30px;
  font-size: 2.3rem !important;
}
.recap #section-see-my-results .trait-svg p.results {
  font-size: 2.3rem !important;
  line-height: 2.3rem;
  margin-bottom: 20px;
}
.recap #section-see-my-results .trait-svg .results {
  color: #044251;
}
.recap #section-see-my-results .trait-svg .wrapper-source {
  padding-top: 20px;
  text-align: center;
}
.recap #section-see-my-results .wrapper-don {
  display: flex;
  flex-direction: column;
  align-content: center;
  justify-content: center;
  align-items: center;
  color: #64A2FF;
  background: #fff;
  border-radius: 10px;
  padding: 15px 30px;
}
.recap #section-see-my-results .wrapper-don h1 {
  text-align: center;
  font-size: 3.3rem;
  font-weight: 500;
  color: #64A2FF;
}
.recap #section-see-my-results .wrapper-don p {
  font-weight: 300;
  text-align: center;
  font-size: 1rem;
  color: #64A2FF;
}
.recap #section-see-my-results .wrapper-don p.size-middle {
  font-size: 1.2rem;
  line-height: 1.6rem;
  margin-bottom: 20px;
}
.recap #section-see-my-results .wrapper-don p.size-middle span {
  font-size: 1.8rem;
  line-height: 1.8rem;
  color: #044251;
  display: block;
  font-weight: bold;
}
.recap #section-see-my-results .wrapper-don p.size-middle i {
  color: #044251;
  display: block;
  font-weight: bold;
}
.recap #section-see-my-results .wrapper-don a {
  color: #044251;
  text-align: center;
  text-decoration: none;
  margin: 10px auto;
  cursor: pointer;
  text-transform: uppercase;
  padding: 10px 20px;
  font-weight: 700;
  border: 1px solid #044251;
  border-radius: 4px;
}
.recap #section-see-my-results .wrapper-don a.btn-don {
  font-weight: 700;
  border-radius: 4px;
  font-size: 1.3rem;
  text-transform: uppercase;
  color: #fff;
  background: #044251;
  text-decoration: none;
  padding: 10px 45px;
}

.green-dark {
  color: #3E7569;
}

/* @media (max-width: 576px){

} */
/* @media (max-width: 768px){

} */
/* @media (max-width: 1200px){

} */
/* @media (max-width: 1400px){

} */
@media (max-width: 768px) {
  .recap .space-between {
    display: none;
  }
}
@media (width <= 992px) {
  .space-between {
    height: 150px;
  }
  .fond-0 {
    background: #46D5B8 url("../assets/images/background/fond-0-2-mobile.png") no-repeat top 0 left 100%;
    background-size: contain;
  }
  .fond-1 {
    background: #E9A8EC url("../assets/images/background/fond-1-mobile.png") no-repeat top 0 left 100%;
    background-size: contain;
  }
  .fond-1.success {
    background: #E9A8EC url("../assets/images/background/fond-1-mobile-success.png") no-repeat top 0 left 100%;
    background-size: contain;
  }
  .fond-2 {
    background: #F5C675 url("../assets/images/background/fond-2-2-mobile.png") no-repeat top 0 left 100%;
    background-size: contain;
  }
  .fond-2.success {
    background: #F5C675 url("../assets/images/background/fond-2-2-mobile-success.png") no-repeat top 0 left 100%;
    background-size: contain;
  }
  .fond-3 {
    background: #FF6161 url("../assets/images/background/fond-3-2-mobile.png") no-repeat top 0 left 100%;
    background-size: contain;
  }
  .fond-3.success {
    background: #FF6161 url("../assets/images/background/fond-3-2-mobile-success.png") no-repeat top 0 left 100%;
    background-size: contain;
  }
  .fond-4 {
    background: #AEA5DF url("../assets/images/background/fond-4-2-mobile.png") no-repeat top 0 left 100%;
    background-size: contain;
  }
  .fond-4.success {
    background: #AEA5DF url("../assets/images/background/fond-4-2-mobile-success.png") no-repeat top 0 left 100%;
    background-size: contain;
  }
  .fond-5 {
    background: #F1A5C6 url("../assets/images/background/fond-5-2-mobile.png") no-repeat top 0 left 100%;
    background-size: contain;
  }
  .fond-5.success {
    background: #F1A5C6 url("../assets/images/background/fond-5-2-mobile-success.png") no-repeat top 0 left 100%;
    background-size: contain;
  }
  h1 {
    color: #fff;
    font-weight: 700;
    font-size: 2rem;
  }
  h2 {
    color: #fff;
    font-weight: 700;
    font-size: 1.3rem;
  }
  h2 span {
    color: #3E7569;
  }
  h3 {
    color: #fff;
    font-weight: 700;
    font-size: 1rem;
  }
  p {
    color: #fff;
    font-size: 1rem;
  }
  ul {
    font-size: 0.7rem;
  }
  ul li {
    list-style-type: custom-counter-style;
  }
  button.btn-test-answer, button.btn-previous, button.btn-see-my-results, button.btn-next {
    font-size: 1rem;
  }
  button.btn-test-answer label,
  button.btn-test-answer span, button.btn-previous label,
  button.btn-previous span, button.btn-see-my-results label,
  button.btn-see-my-results span, button.btn-next label,
  button.btn-next span {
    cursor: pointer;
  }
  header .logo img {
    width: 100%;
    max-width: 120px;
    margin: 0;
  }
  .container #section-user-form .beacon-reduce-width {
    max-width: 100% !important;
  }
  .container #section-user-form form .form-floating label {
    color: #707070;
    font-weight: 700;
  }
  .container #question-number-info {
    font-size: 1rem;
  }
  .container #quiz-container > label {
    font-weight: 500;
    font-size: 1.3rem;
    line-height: 1.6rem;
  }
  .container #quiz-container > label span {
    font-weight: bold;
    font-size: 2rem;
    line-height: 2rem;
  }
  .container #quiz-container > label span.font-size-small {
    font-size: 0.8rem;
    line-height: 1rem;
    font-weight: normal;
  }
  .container #quiz-container form button.answer label {
    font-size: 1.2rem;
    line-height: 1.2rem;
  }
  .container #quiz-container form button.answer label span {
    font-size: 1.2rem;
  }
  .font-size-small {
    font-size: 0.7rem;
  }
  .recap #section-see-my-results .trait-svg {
    background-position: top 1% left 10%, top 1% right 10%;
    padding: 10px 10px;
  }
  .recap #section-see-my-results .trait-svg h1 {
    font-size: 2.8rem;
    color: #fff;
  }
  .recap #section-see-my-results .trait-svg h2 {
    text-align: center;
  }
  .recap #section-see-my-results .trait-svg p {
    font-weight: 500;
    text-align: center;
  }
  .recap #section-see-my-results .trait-svg p.results {
    font-size: 2rem !important;
    color: #fff;
  }
  .recap #section-see-my-results .trait-svg ul {
    padding-left: 0;
  }
  .recap #section-see-my-results .trait-svg ul li {
    list-style-type: custom-counter-style;
  }
  .recap #section-see-my-results .trait-svg .results {
    color: #792E7E;
  }
  .recap #section-see-my-results .wrapper-don h1 {
    font-size: 2.3rem;
  }
  .recap #section-see-my-results .wrapper-don p {
    font-size: 1rem;
  }
  .recap #section-see-my-results .wrapper-don a.btn-don {
    font-size: 1rem;
  }
}

/*# sourceMappingURL=index.css.map */