/* CSS GLOBAL */
/*! modern-normalize v3.0.1 | MIT License | https://github.com/sindresorhus/modern-normalize */
/*
Document
========
*/
/**
Use a better box model (opinionated).
*/
*,
::before,
::after {
  box-sizing: border-box;
}

html {
  /* Improve consistency of default fonts in all browsers. (https://github.com/sindresorhus/modern-normalize/issues/3) */
  font-family: system-ui, "Segoe UI", Roboto, Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji";
  line-height: 1.15; /* 1. Correct the line height in all browsers. */
  -webkit-text-size-adjust: 100%; /* 2. Prevent adjustments of font size after orientation changes in iOS. */
  tab-size: 4; /* 3. Use a more readable tab size (opinionated). */
}

/*
Sections
========
*/
body {
  margin: 0; /* Remove the margin in all browsers. */
}

/*
Text-level semantics
====================
*/
/**
Add the correct font weight in Chrome and Safari.
*/
b,
strong {
  font-weight: bolder;
}

/**
1. Improve consistency of default fonts in all browsers. (https://github.com/sindresorhus/modern-normalize/issues/3)
2. Correct the odd 'em' font sizing in all browsers.
*/
code,
kbd,
samp,
pre {
  font-family: ui-monospace, SFMono-Regular, Consolas, "Liberation Mono", Menlo, monospace; /* 1 */
  font-size: 1em; /* 2 */
}

/**
Add the correct font size in all browsers.
*/
small {
  font-size: 80%;
}

/**
Prevent 'sub' and 'sup' elements from affecting the line height in all browsers.
*/
sub,
sup {
  font-size: 75%;
  line-height: 0;
  position: relative;
  vertical-align: baseline;
}

sub {
  bottom: -0.25em;
}

sup {
  top: -0.5em;
}

/*
Tabular data
============
*/
/**
Correct table border color inheritance in Chrome and Safari. (https://issues.chromium.org/issues/40615503, https://bugs.webkit.org/show_bug.cgi?id=195016)
*/
table {
  border-color: currentColor;
}

/*
Forms
=====
*/
/**
1. Change the font styles in all browsers.
2. Remove the margin in Firefox and Safari.
*/
button,
input,
optgroup,
select,
textarea {
  font-family: inherit; /* 1 */
  font-size: 100%; /* 1 */
  line-height: 1.15; /* 1 */
  margin: 0; /* 2 */
}

/**
Correct the inability to style clickable types in iOS and Safari.
*/
button,
[type=button],
[type=reset],
[type=submit] {
  appearance: button;
}

/**
Remove the padding so developers are not caught out when they zero out 'fieldset' elements in all browsers.
*/
legend {
  padding: 0;
}

/**
Add the correct vertical alignment in Chrome and Firefox.
*/
progress {
  vertical-align: baseline;
}

/**
Correct the cursor style of increment and decrement buttons in Safari.
*/
::-webkit-inner-spin-button,
::-webkit-outer-spin-button {
  height: auto;
}

/**
1. Correct the odd appearance in Chrome and Safari.
2. Correct the outline style in Safari.
*/
[type=search] {
  appearance: textfield; /* 1 */
  outline-offset: -2px; /* 2 */
}

/**
Remove the inner padding in Chrome and Safari on macOS.
*/
::-webkit-search-decoration {
  appearance: none;
}

/**
1. Correct the inability to style clickable types in iOS and Safari.
2. Change font properties to 'inherit' in Safari.
*/
::-webkit-file-upload-button {
  appearance: button; /* 1 */
  font: inherit; /* 2 */
}

/*
Interactive
===========
*/
/*
Add the correct display in Chrome and Safari.
*/
summary {
  display: list-item;
}

figure {
  margin: 0;
}

/** VARIABLES + FONTS **/
/*** FONTS ***/
@font-face {
  font-family: "Poppins";
  src: url("../fonts/Poppins-Regular.woff") format("woff");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Poppins";
  src: url("../fonts/Poppins-Italic.woff") format("woff");
  font-weight: 400;
  font-style: italic;
  font-display: swap;
}
@font-face {
  font-family: "Poppins";
  src: url("../fonts/Poppins-SemiBold.woff") format("woff");
  font-weight: 600;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Poppins";
  src: url("../fonts/Poppins-SemiBoldItalic.woff") format("woff");
  font-weight: 600;
  font-style: italic;
  font-display: swap;
}
@font-face {
  font-family: "Poppins";
  src: url("../fonts/Poppins-Bold.woff") format("woff");
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Poppins";
  src: url("../fonts/Poppins-BoldItalic.woff") format("woff");
  font-weight: 700;
  font-style: italic;
  font-display: swap;
}
/*** COLORS ***/
/** GENERAL **/
html, body {
  margin: 0;
  padding: 0;
  background: #00162C;
  color: #ffffff;
  font-family: "Poppins", sans-serif;
}

body {
  width: 100%;
  margin: 0 auto;
}
body.position-relative {
  position: relative;
}

.weight-semibold {
  font-weight: 600;
}

@media screen and (max-width: 768px) {
  .hidemob {
    display: none !important;
  }
  .showmob {
    display: block !important;
  }
}
@media screen and (min-width: 767px) {
  .showmob {
    display: none !important;
  }
  .hidemob {
    display: block !important;
  }
}
/** HEADER LOGO **/
header {
  width: 100%;
  padding: 1rem;
  background: #00162C;
}
header img {
  display: block;
  margin: 0 auto;
  width: 6.25rem;
}

/** BUTTONS **/
button, .button {
  border-radius: 1.875rem;
  font-size: 1.25rem;
  background: #F39230;
  color: #ffffff;
  text-decoration: none;
  padding: 0.75rem 1.25rem;
  transition: all 0.4s;
  cursor: pointer;
  border: none;
  outline: none;
  min-width: 200px;
  text-align: center;
}
@media screen and (max-width: 768px) {
  button, .button {
    font-size: 1.125rem;
  }
}
button:hover, .button:hover {
  transform: scale(1.05);
}
button:disabled, .button:disabled {
  opacity: 0.45;
  cursor: not-allowed;
  transform: none;
}
button.navigation, .button.navigation {
  background: #000000;
}
button.qr, .button.qr {
  border-radius: 0.625rem;
  box-sizing: border-box;
  border: 2px solid #00162C;
  padding: 0.5rem 1.25rem;
  width: 100%;
}
@media screen and (max-width: 768px) {
  button.qr, .button.qr {
    font-size: 1rem;
  }
}
button.qr.selected, .button.qr.selected {
  background: #ffffff;
  border-color: #ffffff;
  color: #F39230;
}
button[data-action=signup], .button[data-action=signup] {
  background: #ffffff;
  font-weight: 600;
  color: #F39230;
  border-color: #F39230;
}
@media screen and (max-width: 768px) {
  button[data-action=signup], .button[data-action=signup] {
    font-size: 1.25rem;
  }
}

/** HOMEPAGE **/
.homepage {
  display: flex;
  flex-direction: row;
  align-items: stretch;
  justify-content: center;
  text-align: center;
  width: 100%;
  height: calc(100dvh - 82px);
  background: #00162C;
}
@media screen and (max-width: 768px) {
  .homepage {
    flex-direction: column;
    height: auto;
    gap: 2.5rem;
  }
}
.homepage .hp-jumbo {
  background: url("../img/hp-bg-jumbo.jpg") center no-repeat;
  background-size: cover;
  padding: 5rem 1rem;
  width: 50%;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
}
@media screen and (max-width: 768px) {
  .homepage .hp-jumbo {
    width: 100%;
    height: auto;
    padding: 1rem;
    background: url("../img/hp-bg-jumbo.jpg") center no-repeat;
    background-size: cover;
  }
}
.homepage .hp-jumbo img {
  display: block;
  margin: 0 auto;
  width: 100%;
  max-width: 500px;
}
@media screen and (max-width: 768px) {
  .homepage .hp-jumbo img {
    max-width: 300px;
  }
}
.homepage .hp-column {
  width: 50%;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 2.5rem;
  padding: 2rem;
}
@media screen and (max-width: 768px) {
  .homepage .hp-column {
    width: 100%;
    padding: 0;
  }
}
.homepage figure.hp-frise img {
  display: block;
  width: 100%;
}
.homepage figure.hp-title {
  padding: 0 1rem;
}
.homepage figure.hp-title img {
  display: block;
  width: 100%;
}
.homepage .hp-txt {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 1rem;
  padding: 0 1rem;
}
.homepage .hp-txt .hp-txt-title {
  font-weight: 600;
  font-size: 1.25rem;
}
.homepage .hp-txt p {
  margin: 0;
  line-height: 1.3;
}

/** MENTIONS LEGALES **/
.legal {
  background: #00162C;
  width: 100%;
  max-width: 768px;
  margin: 0 auto;
  padding: 1rem 1rem 3rem;
  line-height: 1.4;
}
.legal h1 {
  font-weight: 600;
  font-size: 1.75rem;
  line-height: 1.3;
  color: #F39230;
  margin: 0 0 1.25rem;
}
.legal h2 {
  font-weight: 600;
  font-size: 1.125rem;
  color: #F39230;
  margin: 1.75rem 0 0.75rem;
  scroll-margin-top: 1rem;
}
.legal p {
  margin: 0 0 1rem;
}
.legal a {
  color: #ffffff;
  text-decoration: underline;
}

/** QUIZ **/
.quiz {
  background: #F39230;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: flex-start;
  gap: 2.5rem;
  width: 100%;
  min-height: calc(100dvh - 82px);
  padding-top: 2.5rem;
  position: relative;
}
@media screen and (max-width: 768px) {
  .quiz {
    min-height: auto;
    padding-top: 1.5rem;
  }
}
.quiz progress {
  width: 100%;
  max-width: 600px;
  margin: 0 auto;
  appearance: none;
  background: #ffffff;
  border: none;
  height: 6px;
  border-radius: 20px;
}
@media screen and (max-width: 768px) {
  .quiz progress {
    width: 80%;
  }
}
.quiz progress::-webkit-progress-bar {
  background: #ffffff;
}
.quiz progress::-webkit-progress-value {
  background-color: #00162C;
  border-radius: 20px;
}
.quiz progress[value]::-moz-progress-bar {
  background-color: #00162C;
  border-radius: 20px;
}
.quiz .quiz-header {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 1rem;
  text-align: center;
  width: 100%;
  max-width: 532px;
  padding: 0 1rem;
  position: relative;
}
@media screen and (max-width: 768px) {
  .quiz .quiz-header {
    max-width: auto;
  }
}
.quiz .quiz-header .qh-decor {
  display: none;
  position: absolute;
  inset: 0;
  pointer-events: none;
}
@media screen and (max-width: 768px) {
  .quiz .quiz-header .qh-decor.is-active {
    display: block;
  }
}
.quiz .quiz-header .qh-decor figure.qh-q1-top {
  position: absolute;
  top: -25%;
  left: 0;
}
.quiz .quiz-header .qh-decor figure.qh-q1-top img {
  display: block;
  width: 115px;
}
.quiz .quiz-header .qh-decor figure.qh-stars {
  position: absolute;
  top: 0;
  left: 10%;
}
.quiz .quiz-header .qh-decor figure.qh-stars img {
  display: block;
  width: 60px;
}
.quiz .quiz-header .qh-decor figure.qh-feuille {
  position: absolute;
  top: 0;
  right: 0;
}
.quiz .quiz-header .qh-decor figure.qh-feuille img {
  display: block;
  width: 60px;
}
.quiz .quiz-header .qh-decor figure.qh-q3-top01 {
  position: absolute;
  top: -15%;
  left: 5%;
}
.quiz .quiz-header .qh-decor figure.qh-q3-top01 img {
  display: block;
  width: 90px;
}
.quiz .quiz-header .qh-nb {
  background: #00162C;
  border-radius: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  width: 80px;
  height: 80px;
}
.quiz .quiz-header .qh-nb span {
  font-size: 1.75rem;
}
@media screen and (max-width: 768px) {
  .quiz .quiz-header .qh-nb {
    width: 60px;
    height: 60px;
  }
  .quiz .quiz-header .qh-nb span {
    font-size: 1.5rem;
  }
}
.quiz .quiz-header .qh-question {
  font-weight: 600;
  font-size: 2.25rem;
}
@media screen and (max-width: 768px) {
  .quiz .quiz-header .qh-question {
    font-size: 1.75rem;
  }
}
.quiz .quiz-reponse {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 1rem;
  text-align: center;
  width: 100%;
  max-width: 532px;
  padding: 0 1.5rem;
  position: relative;
  z-index: 1;
}
@media screen and (max-width: 768px) {
  .quiz .quiz-reponse {
    max-width: auto;
  }
}
.quiz > button.navigation {
  margin: 0 auto;
  position: relative;
  z-index: 1;
}
.quiz figure.quiz-frise {
  width: 100%;
  position: absolute;
  bottom: 0;
}
@media screen and (max-width: 768px) {
  .quiz figure.quiz-frise {
    position: relative;
  }
}
.quiz figure.quiz-frise img {
  width: 100%;
}

/** PROFIL **/
.profil {
  background: #00162C;
  display: flex;
  flex-direction: row;
  align-items: stretch;
  justify-content: center;
  text-align: left;
  width: 100%;
  min-height: calc(100dvh - 82px);
}
@media screen and (max-width: 768px) {
  .profil {
    flex-direction: column;
    align-items: center;
    text-align: center;
    min-height: 0;
    gap: 1.5rem;
    padding: 0.5rem 0 0;
  }
}
.profil figure.profil-visual {
  width: 50%;
  height: calc(100dvh - 82px);
  margin: 0;
  padding: 2rem 1rem;
  display: flex;
  align-items: center;
  justify-content: center;
}
@media screen and (max-width: 768px) {
  .profil figure.profil-visual {
    order: 2;
    width: 100%;
    height: auto;
    padding: 0 1rem;
  }
}
.profil figure.profil-visual img {
  display: block;
  width: auto;
  max-width: 100%;
  max-height: 100%;
}
@media screen and (max-width: 768px) {
  .profil figure.profil-visual img {
    width: 100%;
    max-width: 340px;
    max-height: none;
  }
}
.profil .profil-column {
  width: 50%;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  justify-content: center;
  gap: 1.5rem;
  padding: 2rem 3rem;
}
@media screen and (max-width: 768px) {
  .profil .profil-column {
    display: contents;
  }
}
@media screen and (max-width: 768px) {
  .profil .profil-heading {
    order: 1;
    padding: 0 1rem;
  }
}
.profil .profil-title {
  color: #F39230;
  font-size: 1.25rem;
}
.profil .profil-name {
  margin: 0;
  font-weight: 600;
  font-size: 1.5rem;
  line-height: 1.2;
}
.profil .profil-txt {
  margin: 0;
  line-height: 1.4;
}
@media screen and (max-width: 768px) {
  .profil .profil-txt {
    order: 3;
    padding: 0 1.5rem;
  }
}
.profil .profil-buttons {
  display: flex;
  flex-wrap: wrap;
  gap: 1rem;
  margin-top: 4rem;
}
@media screen and (max-width: 768px) {
  .profil .profil-buttons {
    order: 4;
    justify-content: center;
    width: 100%;
    padding: 0 1rem;
    margin-top: 0;
  }
}
.profil .profil-buttons button {
  white-space: nowrap;
}

/** FORM + STICKERS **/
figure.sticker01 {
  position: absolute;
  top: 20%;
  left: 0;
}
figure.sticker01 img {
  display: block;
  width: 300px;
}
@media screen and (max-width: 768px) {
  figure.sticker01 {
    top: 0;
    left: 0;
  }
  figure.sticker01 img {
    display: block;
    width: 80px;
  }
}

figure.sticker02 {
  position: absolute;
  top: 70px;
  right: 0;
}
figure.sticker02 img {
  display: block;
  width: 250px;
}
@media screen and (max-width: 768px) {
  figure.sticker02 {
    top: 70px;
    right: 0;
  }
  figure.sticker02 img {
    display: block;
    width: 75px;
  }
}

figure.sticker03 {
  position: absolute;
  bottom: 0;
  left: 6%;
}
figure.sticker03 img {
  display: block;
  width: 300px;
}
@media screen and (max-width: 768px) {
  figure.sticker03 {
    bottom: 0;
    left: 0;
  }
  figure.sticker03 img {
    display: block;
    width: 100px;
  }
}

figure.sticker04 {
  position: absolute;
  bottom: 3%;
  right: 0;
}
figure.sticker04 img {
  display: block;
  width: 300px;
}
@media screen and (max-width: 768px) {
  figure.sticker04 {
    bottom: 0;
    right: 0;
  }
  figure.sticker04 img {
    display: block;
    width: 80px;
  }
}

.form-container {
  backdrop-filter: blur(10px);
  background: rgba(0, 22, 44, 0.5);
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  justify-content: center;
  width: 100%;
  height: calc(100dvh - 82px);
  max-width: 732px;
  margin: 0 auto;
  padding: 1rem;
  gap: 1.25rem;
  position: relative;
  z-index: 2;
}
@media screen and (max-width: 768px) {
  .form-container {
    max-width: auto;
    height: auto;
    min-height: calc(100dvh - 82px);
    backdrop-filter: none;
    background: transparent;
  }
}
.form-container .fc-title {
  font-weight: 600;
  font-size: 1.75rem;
  line-height: 1.3;
  color: #F39230;
}
.form-container form {
  width: 100%;
}
.form-container form fieldset {
  padding: 0;
  margin: 0;
  border: none;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  justify-content: center;
  gap: 1rem;
  width: 100%;
}
.form-container form fieldset legend {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}
.form-container form fieldset .field {
  width: 100%;
}
.form-container form fieldset .field-error {
  display: none;
  margin: 0.35rem 0 0;
  font-size: 12px;
  color: #D2091E;
}
.form-container form fieldset .field-error:not(:empty) {
  display: block;
}
.form-container form fieldset input {
  width: 100%;
  border-radius: 0.625rem;
  border: 2px solid transparent;
  padding: 8px 20px;
}
.form-container form fieldset input.is-invalid {
  border-color: #D2091E;
}
.form-container form fieldset .required-note {
  font-size: 12px;
}
.form-container form fieldset .form-error {
  width: 100%;
  margin: 0;
  font-size: 14px;
  color: #D2091E;
  text-align: center;
}
.form-container form fieldset label {
  display: grid;
  grid-template-columns: 1rem auto;
  flex-direction: row;
  align-items: center;
  justify-content: flex-start;
  gap: 0.375rem;
  width: 100%;
}
.form-container form fieldset label input {
  width: auto;
}
.form-container form fieldset label input[type=checkbox] {
  width: 1rem;
  height: 1rem;
  margin: 0;
  accent-color: #F39230;
}
.form-container form fieldset label input.is-invalid {
  outline: 2px solid #D2091E;
}
.form-container form fieldset label span.label-txt {
  width: 100%;
}
.form-container form fieldset label span.label-txt a {
  color: #ffffff;
  text-decoration: underline;
}
.form-container form fieldset label .field-error {
  grid-column: 1/-1;
}
.form-container form fieldset label.upload {
  display: flex;
  flex-direction: column-reverse;
  align-items: flex-start;
  justify-content: flex-start;
  cursor: pointer;
}
.form-container form fieldset label.upload input {
  display: none;
  padding: 0;
  padding-left: 33px;
  font-size: 12px;
}
.form-container form fieldset label.upload.has-file input {
  display: block;
}
.form-container form fieldset label.upload span.label-upload {
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: flex-start;
  gap: 0.5rem;
}
.form-container form fieldset label.upload span.label-upload p {
  margin: 0;
  text-decoration: underline;
}
.form-container form fieldset label.upload span.label-upload img {
  display: block;
  width: 25px;
}
.form-container form fieldset label.upload ::-webkit-file-upload-button, .form-container form fieldset label.upload ::file-selector-button {
  display: none;
}
.form-container form fieldset button {
  margin: 0 auto;
}
.form-container.is-success .fc-title, .form-container:has(.form-success:not([hidden])) .fc-title {
  display: none;
}
.form-container .form-success {
  position: relative;
  align-self: center;
  width: 100%;
  max-width: 26rem;
  margin: 0 auto;
  padding: 3.29rem 0 0.8rem;
  text-align: center;
}
.form-container .form-success p {
  position: relative;
  z-index: 1;
  margin: 0;
}
.form-container .form-success .fs-title {
  font-weight: 600;
  font-size: 2.25rem;
  line-height: 1.14;
  color: #F39230;
}
.form-container .form-success .fs-text {
  margin-top: 1.68rem;
  font-size: 1rem;
  line-height: 1.5;
  letter-spacing: -0.004em;
}
.form-container .form-success .fs-confettis {
  position: absolute;
  top: 0;
  right: -2.4%;
  bottom: 0;
  left: -2.4%;
  pointer-events: none;
}
.form-container .form-success .fs-confettis img {
  position: absolute;
  display: block;
  height: auto;
}
.form-container .form-success .fs-confettis .fsc01 {
  top: 0;
  left: 8.75%;
  width: 81.52%;
}
.form-container .form-success .fs-confettis .fsc02 {
  top: 37.56%;
  left: 12.96%;
  width: 77.68%;
}
.form-container .form-success .fs-confettis .fsc03 {
  top: 10.77%;
  left: 72.11%;
  width: 20.43%;
}
.form-container .form-success .fs-confettis .fsc04 {
  top: 8.56%;
  left: 0;
  width: 22.98%;
}
.form-container .form-success .fs-confettis .fsc05 {
  top: 68.39%;
  left: 2.46%;
  width: 5.67%;
}
.form-container .form-success .fs-confettis .fsc06 {
  top: 91.53%;
  left: 94.31%;
  width: 5.67%;
}

/** FOOTER **/
footer {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 0.75rem;
  width: 100%;
  padding: 1.5rem 1rem;
  background: #00162C;
  font-size: 12px;
  text-align: center;
}
footer p {
  margin: 0;
}
footer a {
  color: #ffffff;
  text-decoration: underline;
}

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