@import 'https://fonts.googleapis.com/css2?family=Cairo:wght@700&family=Exo+2&display=swap';
*:before,
*:after {
  box-sizing: inherit; }

.progressbar {
  height: 2em;
  width: 85%;
  margin-top: 1.5em;
  background-color: #fff;
  border-radius: 25px;
  border: 10px solid #1A519E;
  margin-left: 10%; }

.numerotation {
  display: flex;
  justify-content: space-between; }
  .numerotation p {
    font-size: 2em;
    font-weight: 700px;
    color: #1A519E; }

.relative {
  position: relative;
  width: 100%; }

#file {
  margin-top: 1.5em;
  width: 83.1%;
  margin-left: 10%;
  position: absolute;
  top: 8px;
  right: 5.9%; }

.main__inform {
  text-align: center;
  margin-bottom: 3%;
  padding-top: 1em; }
  .main__inform__img {
    width: 2.5em;
    height: 2.5em; }
    .main__inform__img--active {
      border: 10px solid #1078ad;
      border-radius: 50%; }
  .main__inform a {
    color: white;
    padding: 0.6% 3%;
    background-color: #1078ad;
    border-radius: 5px;
    font-size: 2em;
    font-weight: 700; }

.main__tags {
  display: flex;
  justify-content: space-between;
  width: 50%;
  margin: 3% auto; }

.main__tag h3 {
  color: #1078ad;
  font-weight: 700; }

.main__Preambule {
  width: 60%;
  margin: 2% auto;
  background-color: #96C5DC;
  padding: 3% 2% 4%;
  border-radius: 5px; }
  .main__Preambule h3 {
    color: #1078ad;
    font-weight: 700;
    font-size: 2em; }
  .main__Preambule p {
    margin: 2% 0; }

.main__questionnaire {
  text-align: center;
  padding-top: 7em; }

.main__Resultat {
  padding-top: 7em;
  text-align: center; }

.affiche__resultat {
  max-width: 65%;
  margin: 2em auto;
  padding: 2em 3em;
  background-color: #96C5DC;
  border-radius: 10px; }
  .affiche__resultat h3 {
    font-size: 2em;
    font-weight: 700;
    color: #1A519E; }
  .affiche__resultat p {
    font-size: 1.5em;
    font-weight: 500;
    margin: 1em 0; }
  .affiche__resultat span {
    font-size: 0.9em;
    color: #1A519E; }

.affiche {
  display: none; }

form {
  border: 3px solid #96C5DC;
  border-radius: 1em;
  padding: 2em 4em;
  max-width: 65%;
  margin: 3em auto; }

.barNumber {
  border: 3px solid #96C5DC;
  border-radius: 1em;
  margin-bottom: 1em; }

.questions {
  font-weight: 700;
  font-size: 1.5em;
  color: #7F7F7F;
  height: 15vh;
  padding-top: 5%; }

.reponces {
  height: 24vh;
  display: flex;
  padding-top: 5%;
  justify-content: space-evenly;
  flex-wrap: wrap; }
  .reponces label {
    margin-left: 0.4em;
    font-size: 2em; }
  .reponces .inputText {
    margin-left: 20%; }
  .reponces div {
    width: 45%; }

#repeter {
  border: 1px dotted #1A519E;
  border-radius: 5px;
  padding: 5px 10px;
  font-size: 1.5em;
  font-weight: 600;
  background-color: #1078ad;
  margin: 2em auto; }

.inputs {
  display: flex;
  justify-content: space-between; }
  .inputs #precedent,
  .inputs #suivant,
  .inputs #resultat {
    border: 1px dotted #1A519E;
    border-radius: 5px;
    padding: 5px 10px;
    font-size: 1.5em;
    font-weight: 600;
    background-color: #1078ad; }

.answer-inputs {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 25vh; }

.answer-inputs input[type="number"] {
  font-size: 16px;
  border: 1px solid #1078AD;
  width: 55%;
  padding: 10px; }

.answer-inputs .input-span {
  font-size: 22px;
  border: 1px solid #1078AD;
  border-left: none;
  padding: 4px 10px 5px;
  color: #555555;
  background-color: #edf6fa; }

.answer-inputs input[type="radio"] {
  -webkit-appearance: none; }

.answer-inputs input[type="radio"]:checked + label {
  background-color: #1078AD;
  color: #F4CF1B; }

.answer-inputs label {
  height: 80px;
  width: 120px;
  color: #1078AD;
  border-radius: 4px;
  border: 4px solid #1078AD;
  font-size: 30px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 9px 0px 0;
  transition: .5s ease;
  margin-right: 50px; }

.answer-inputs label span {
  font-size: 22px;
  position: relative;
  bottom: 5px; }

input:disabled {
  cursor: not-allowed; }

* {
  box-sizing: border-box;
  margin: 0px;
  padding: 0px;
  font-size: 16px;
  font-family: 'Cairo',sans-serif;
  font-weight: 700; }
  * body header {
    background-color: #96c5dc;
    position: fixed;
    display: flex;
    justify-content: space-between;
    width: 100%;
    height: 100px;
    background-image: url("../Design/Assets/SVG/Merged bar-1.svg");
    padding: 10px; }
    * body header div #lange1 {
      padding-left: 10px;
      padding-right: 10px;
      background-color: transparent;
      border-radius: 10px;
      color: #1a519e;
      border: 1px solid #1a519e;
      margin: 20px;
      font-size: 20px;
      text-decoration: none;
      outline: 0;
      cursor: pointer; }
    * body header div .Conseil__header {
      margin: 20px;
      font-size: 26px;
      text-decoration: none;
      color: black; }
    * body header div .Acceil__header {
      margin: 20px;
      font-size: 26px;
      text-decoration: none;
      color: #1a519e; }
  * body #general {
    position: absolute;
    z-index: -1;
    top: 100px; }
    * body #general #section1 {
      width: 100%;
      height: 160px;
      background-image: url("../Design/Assets/SVG/En chiffres-3.svg");
      background-repeat: no-repeat;
      background-size: 120%;
      background-position-x: -40px;
      text-align: center; }
      * body #general #section1 #p__section1 {
        width: 100%;
        line-height: 30px;
        margin: auto;
        color: #1078ad; }
    * body #general #section2 {
      color: #1a519e;
      font-size: 26px;
      height: 800px;
      text-align: center;
      display: grid;
      grid-template-columns: repeat(3, 1fr);
      grid-template-rows: repeat(4, 1fr); }
      * body #general #section2 #h1__section2 {
        color: #1078ad;
        font-size: 28px;
        grid-row: 1/2;
        grid-column: 1/4; }
      * body #general #section2 #img1__section2 {
        grid-row: 2/3;
        grid-column: 1/2;
        padding: 10px; }
      * body #general #section2 #img2__section2 {
        grid-row: 2/3;
        grid-column: 2/3;
        padding: 10px; }
      * body #general #section2 #img3__section2 {
        grid-row: 2/3;
        grid-column: 3/4;
        padding: 10px; }
      * body #general #section2 #img4__section2 {
        grid-row: 3/4;
        grid-column: 1/2;
        padding: 10px; }
      * body #general #section2 #img5__section2 {
        grid-row: 3/4;
        grid-column: 2/3;
        padding: 10px; }
      * body #general #section2 #img6__section2 {
        grid-row: 3/4;
        grid-column: 3/4;
        padding: 10px; }
      * body #general #section2 #img7__section2 {
        grid-row: 4/5;
        grid-column: 1/4;
        padding: 10px; }
    * body #general #article1 {
      display: flex;
      justify-content: space-around;
      text-align: center;
      background-color: #b1d4e6;
      height: 200px;
      padding: 20px; }
      * body #general #article1 #h1__article1 {
        color: #1078ad;
        font-size: 30px; }
      * body #general #article1 #p__article1 {
        color: #1a519e;
        font-size: 20px; }
      * body #general #article1 #lien1__article1 {
        width: 250px;
        height: 60px;
        background-color: #1078ad;
        border-radius: 6px;
        padding: 10px;
        margin-top: 50px;
        border: none;
        color: white;
        font-size: 16px;
        text-decoration: none; }
      * body #general #article1 #lien2__article1 {
        width: 250px;
        height: 60px;
        background-color: #1078ad;
        border-radius: 6px;
        padding: 10px;
        margin-top: 50px;
        border: none;
        color: white;
        font-size: 16px;
        text-decoration: none; }
    * body #general #section3 {
      height: 800px;
      width: 600px;
      display: grid;
      padding: 20px;
      grid-template-rows: repeat(5, 1fr);
      grid-template-columns: repeat(2, 1fr);
      text-align: center;
      margin: auto; }
      * body #general #section3 #h1__section3 {
        font-size: 30px;
        color: #1078ad;
        grid-row: 1/2;
        grid-column: 1/3; }
      * body #general #section3 #img1__section3 {
        grid-row: 2/3;
        grid-column: 1/2; }
      * body #general #section3 #img2__section3 {
        grid-row: 2/3;
        grid-column: 2/3; }
      * body #general #section3 #img3__section3 {
        grid-row: 3/4;
        grid-column: 1/2; }
      * body #general #section3 #img4__section3 {
        grid-row: 3/4;
        grid-column: 2/3; }
      * body #general #section3 #h2__section3 {
        grid-row: 4/5;
        grid-column: 1/3;
        font-size: 30px;
        color: #1078ad; }
      * body #general #section3 #img5__section3 {
        grid-row: 5/6;
        grid-column: 1/2;
        color: #1a519e; }
      * body #general #section3 #img6__section3 {
        grid-row: 5/6;
        grid-column: 2/3;
        color: #1a519e; }
    * body #general #section4 {
      background-color: #1078ad;
      padding: 20px; }
      * body #general #section4 h1 {
        font-size: 23px;
        color: #dce7e7;
        text-align: center; }
      * body #general #section4 div {
        display: flex;
        justify-content: space-around; }
        * body #general #section4 div #article1__section4 {
          font-size: 20px;
          color: white; }
          * body #general #section4 div #article1__section4 span {
            font-size: 20px;
            color: black; }
        * body #general #section4 div #article2__section4 {
          text-align: center;
          display: flex;
          flex-direction: column;
          justify-content: space-between;
          padding: 40px; }
          * body #general #section4 div #article2__section4 #h21__article2 {
            font-size: 20px;
            color: #f4cf1b; }
          * body #general #section4 div #article2__section4 #h22__article2 {
            font-size: 20px;
            color: #1078ad;
            background-color: #f4cf1b;
            width: 200px;
            padding: 10px;
            border-radius: 6px; }
          * body #general #section4 div #article2__section4 a {
            text-decoration: none;
            color: white;
            border-bottom: 1px solid #f4cf1b; }
    * body #general aside {
      text-align: center;
      padding: 10px;
      background-color: #96c5dc; }
      * body #general aside h1 {
        color: #1078ad; }
      * body #general aside button {
        width: 400px;
        background-color: #1078ad;
        border: none;
        border-radius: 6px;
        color: white;
        cursor: pointer;
        outline: 0; }
    * body #general #footer1 {
      width: 100%;
      display: grid;
      height: 400px;
      grid-template-columns: repeat(3, 1fr);
      grid-template-rows: repeat(2, 1fr);
      justify-content: center;
      align-items: center; }
      * body #general #footer1 #img__footer1 {
        text-align: center;
        width: 100%;
        grid-row: 1/2;
        grid-column: 1/4; }
      * body #general #footer1 #div1__footer1 {
        text-align: center;
        grid-row: 2/3;
        grid-column: 1/2;
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center; }
        * body #general #footer1 #div1__footer1 #lange2 {
          padding-left: 10px;
          padding-right: 10px;
          background-color: transparent;
          border-radius: 10px;
          color: #1a519e;
          border: 1px solid #1a519e;
          margin: 20px;
          font-size: 20px;
          text-decoration: none;
          outline: 0;
          cursor: pointer; }
        * body #general #footer1 #div1__footer1 .Conseil__header {
          margin: 20px;
          font-size: 26px;
          text-decoration: none;
          color: black; }
        * body #general #footer1 #div1__footer1 .Acceil__header {
          margin: 20px;
          font-size: 26px;
          text-decoration: none;
          color: #1a519e; }
      * body #general #footer1 #div2__footer1 {
        text-align: center;
        line-height: 40px;
        grid-row: 2/3;
        grid-column: 2/3; }
        * body #general #footer1 #div2__footer1 #h21__div2__footer1 {
          color: #1078ad;
          font-size: 20px; }
        * body #general #footer1 #div2__footer1 .h22__div2__footer1 {
          color: #369d53;
          font-size: 20px; }
      * body #general #footer1 #p__footer1 {
        grid-row: 2/3;
        grid-column: 3/4;
        width: 550px;
        margin: 10px;
        color: #7f7f7f;
        font-weight: 100px; }
    * body #general #footer2 {
      height: 60px;
      background-image: url("../Design/Assets/png/En chiffres-30@2x.png");
      background-repeat: no-repeat;
      background-size: 100%; }