@charset "UTF-8";
/*%=====PRMNNT-START====================================================================%*/
* {
  /* initialise tout les balises */
  margin: 0;
  /* pas de marge par defaut */
  padding: 0;
  /* pas de marge interne par defaut */
  max-width: 100vw;
  /* limite à la taille de l'ecran */ }

html {
  /* définit les propriétés de la page */
  height: 100%;
  background: #FFFFFF; }

/*------Polices-------------------------------------*/
/*@font-face {
	font-family: "Vudotronic";
	font-style: normal;
	font-weight: normal;
	src: url('../_polices/Vudotronic.otf');
}*/
@font-face {
  font-family: "SourceSansPro-Regular";
  font-style: normal;
  font-weight: normal;
  src: url("../_polices/SourceSansPro-Regular.otf"); }
@font-face {
  font-family: "SourceSansPro-Bold";
  font-style: normal;
  font-weight: bold;
  src: url("../_polices/SourceSansPro-Bold.otf"); }
@font-face {
  font-family: "SourceSansVariable-Roman";
  font-style: normal;
  font-weight: lighter;
  src: url("../_polices/SourceSansVariable-Roman.otf"); }
@font-face {
  font-family: "ArialLight";
  font-style: normal;
  font-weight: lighter;
  src: url("../_polices/Arial Nova Light.ttf"); }
@font-face {
  font-family: "Mont-HeavyDEMO";
  font-style: normal;
  font-weight: normal;
  src: url("../_polices/Mont-HeavyDEMO.otf"); }
@font-face {
  font-family: "coolvetica rg";
  font-style: normal;
  font-weight: normal;
  src: url("../_polices/coolvetica rg.otf"); }
/*------Variables-----------------------------------*/
main#corps .hidden {
  display: none; }
main#corps .lazy-background {
  background: #000; }
main#corps * > span.info {
  display: none;
  color: #fff;
  background: rgba(0, 0, 0, 0.95);
  border: solid 0.5px #D44510;
  padding: 13px 18px;
  border-radius: 4px;
  -moz-border-radius: 4px;
  -webkit-border-radius: 4px;
  width: auto;
  max-width: 350px;
  text-align: justify;
  position: absolute;
  font-family: "SourceSansPro-Regular";
  font-size: 0.7rem;
  transform: translate(12rem, -4rem);
  transform-origin: bottom left;
  z-index: 2; }
  main#corps * > span.info.br {
    transform: translate(-18rem, -4rem); }
main#corps *:hover > span.info {
  display: block; }
main#corps #chapitre1 {
  width: 78vw;
  height: 24vh;
  padding: 2vh 11vw;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  background-position: center;
  background-size: contain;
  background-repeat: no-repeat; }
  main#corps #chapitre1 h1 {
    color: #FFFFFF; }
main#corps .red {
  color: #D44510; }
main#corps section {
  height: auto;
  display: flex;
  flex-direction: column;
  align-content: center;
  justify-content: flex-start;
  width: 90%;
  padding: 2rem 5%; }
  main#corps section h1 {
    margin: 1.5rem auto 1rem auto;
    position: relative;
    list-style: none;
    font-family: "SourceSansPro-Regular";
    font-size: 3rem;
    width: 70%;
    text-align: left; }
  main#corps section h2 {
    margin: 1.5rem auto 1rem auto;
    position: relative;
    list-style: none;
    font-family: "SourceSansPro-Regular";
    font-size: 2rem;
    width: 70%;
    text-align: left; }
    main#corps section h2.center {
      text-align: center; }
  main#corps section h3 {
    margin: 1.5rem auto 1rem auto;
    position: relative;
    list-style: none;
    font-family: "SourceSansPro-Regular";
    font-size: 1.8rem;
    width: 70%;
    text-align: left; }
  main#corps section h4 {
    margin: 1.5rem auto 1rem auto;
    position: relative;
    list-style: none;
    font-family: "SourceSansPro-Regular";
    font-size: 1.6rem;
    width: 70%;
    text-align: left; }
  main#corps section p {
    margin: 1rem auto 1rem auto;
    list-style: none;
    text-align: justify;
    font-family: "SourceSansPro-Regular";
    font-size: 1rem;
    width: 70%; }
    main#corps section p.lilt {
      margin: 0.5rem auto 0.5rem auto;
      font-size: 0.8rem;
      width: 100%; }
      main#corps section p.lilt a {
        text-decoration: none;
        border-bottom: solid 0.5px #D44510; }
  main#corps section ul {
    margin: 1rem auto 1rem auto;
    width: 70%; }
    main#corps section ul li {
      list-style: none;
      text-align: justify;
      font-family: "SourceSansPro-Regular";
      font-size: 1rem; }
  main#corps section ol {
    margin: 1rem auto 1rem auto;
    width: 70%; }
    main#corps section ol li {
      list-style: decimal;
      text-align: justify;
      font-family: "SourceSansPro-Regular";
      font-size: 1rem; }
main#corps #chapitre2 {
  display: flex;
  flex-direction: column;
  align-content: center;
  justify-content: flex-start; }
  main#corps #chapitre2 .formulaire {
    width: 60%;
    opacity: 1;
    transform: scale(1);
    overflow: hidden;
    margin: 0 auto;
    display: block;
    transition: all 0.6s ease; }
    main#corps #chapitre2 .formulaire.hidden {
      height: 0;
      opacity: 0;
      transform: scale(0); }
    main#corps #chapitre2 .formulaire > h1 {
      width: 100%;
      font-family: "SourceSansPro-Regular";
      text-align: center; }
    main#corps #chapitre2 .formulaire .ligne {
      width: 100%;
      display: inline-flex;
      margin: 2px 0; }
    main#corps #chapitre2 .formulaire .form-motif {
      display: flex;
      flex-direction: column;
      align-items: flex-start;
      width: 100%; }
      main#corps #chapitre2 .formulaire .form-motif label {
        font-family: "SourceSansPro-Regular";
        font-size: 1.2rem;
        margin-bottom: 0.5rem; }
      main#corps #chapitre2 .formulaire .form-motif select {
        font-family: "SourceSansPro-Regular";
        font-size: 1rem;
        width: 100%;
        padding: 0.5rem;
        border: 1px solid #A2A2A2;
        border-radius: 5px;
        transition: all 0.3s ease; }
        main#corps #chapitre2 .formulaire .form-motif select:hover, main#corps #chapitre2 .formulaire .form-motif select:focus {
          border-color: #D44510; }
      main#corps #chapitre2 .formulaire .form-motif button {
        font-family: "SourceSansPro-Bold";
        font-size: 1rem;
        padding: 0.7rem 1.5rem;
        margin-top: 1rem;
        background-color: #D44510;
        border: none;
        border-radius: 5px;
        cursor: pointer;
        transition: background-color 0.3s ease; }
        main#corps #chapitre2 .formulaire .form-motif button:hover {
          background-color: #a5360c; }
      main#corps #chapitre2 .formulaire .form-motif .text-motif {
        width: calc(50% - 20px);
        padding: 10px;
        margin: 4px 0;
        font-family: "SourceSansPro-Regular";
        font-size: 1rem;
        text-align: left; }
      main#corps #chapitre2 .formulaire .form-motif #incidentType {
        width: 50%;
        padding: 10px 7px;
        font-family: "SourceSansPro-Regular" !important;
        font-size: 1rem;
        text-align: left;
        border: none;
        border-bottom: solid 2px #D44510;
        -webkit-appearance: none;
        -moz-appearance: none;
        appearance: none; }
        main#corps #chapitre2 .formulaire .form-motif #incidentType option {
          margin-top: 0;
          padding-top: 0;
          font-family: "SourceSansPro-Regular" !important;
          font-size: 1rem;
          border: none;
          border-radius: 0; }
    main#corps #chapitre2 .formulaire .form-group {
      width: 50%;
      margin: 4px 0;
      padding: 4px 0;
      height: 2.2em; }
      main#corps #chapitre2 .formulaire .form-group .form-control {
        width: calc(100% - 20px);
        padding: 10px;
        font-family: "SourceSansPro-Regular";
        font-size: 1rem;
        border: solid 1px #FFFFFF00; }
        main#corps #chapitre2 .formulaire .form-group .form-control:focus {
          border: none;
          box-shadow: none; }
    main#corps #chapitre2 .formulaire .form-check {
      margin: 0.5rem auto 0.5rem auto;
      width: 100%; }
      main#corps #chapitre2 .formulaire .form-check .form-check-label {
        list-style: none;
        text-align: justify;
        font-family: "SourceSansPro-Regular";
        font-size: 0.8rem;
        width: 100%; }
  main#corps #chapitre2 #quiz-form {
    width: 94%;
    margin: 2rem auto;
    padding: 1.5rem;
    border: 1px solid #A2A2A2;
    border-radius: 10px; }
    main#corps #chapitre2 #quiz-form .form-motif {
      display: flex;
      flex-direction: column;
      align-items: flex-start;
      width: 100%; }
      main#corps #chapitre2 #quiz-form .form-motif p {
        font-family: "SourceSansPro-Regular";
        font-size: 1.2rem;
        margin: 1rem 0;
        width: 100%; }
      main#corps #chapitre2 #quiz-form .form-motif label {
        font-family: "SourceSansPro-Regular";
        font-size: 1rem;
        margin-bottom: 0.5rem;
        display: flex;
        align-items: center; }
        main#corps #chapitre2 #quiz-form .form-motif label input[type="radio"] {
          margin-right: 10px; }
      main#corps #chapitre2 #quiz-form .form-motif button {
        font-family: "SourceSansPro-Bold";
        font-size: 1rem;
        padding: 0.7rem 1.5rem;
        margin-top: 1rem;
        background-color: #D44510;
        border: none;
        border-radius: 5px;
        cursor: pointer;
        transition: background-color 0.3s ease; }
        main#corps #chapitre2 #quiz-form .form-motif button:hover {
          background-color: #a5360c; }
      main#corps #chapitre2 #quiz-form .form-motif #prev-btn {
        background-color: #A2A2A2; }
        main#corps #chapitre2 #quiz-form .form-motif #prev-btn:hover {
          background-color: #898989; }
      main#corps #chapitre2 #quiz-form .form-motif #submit-btn {
        display: none; }
  main#corps #chapitre2 #progress-container {
    width: 60vw;
    height: 20px;
    background-color: #e0e0e0;
    border-radius: 5px;
    margin: 20px auto; }
  main#corps #chapitre2 #progress-bar {
    width: 0%;
    height: 20px;
    background-color: #D44510;
    border-radius: 5px; }
  main#corps #chapitre2 #progress-text {
    transform: translateY(-37px);
    font-size: 16px;
    text-align: center; }

@media screen and (max-width: 991.98px) {
  main#corps section {
    height: auto;
    width: 92vw;
    padding: 2rem 4vw; }
  main#corps #chapitre2 {
    flex-direction: column; }
    main#corps #chapitre2 .formulaire {
      width: 100%;
      padding: 0 0 0 0; }
      main#corps #chapitre2 .formulaire .ligne {
        display: flex;
        flex-direction: column; }
      main#corps #chapitre2 .formulaire .form-motif .text-motif {
        width: calc(100% - 20px); }
      main#corps #chapitre2 .formulaire .form-motif #incidentType {
        width: calc(100% - 14px); }
      main#corps #chapitre2 .formulaire .form-group {
        width: 100%; } }
/*-----Input Select-------------------------------*/
.select {
  cursor: pointer;
  display: inline-block;
  position: relative; }

.custom-select {
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  -moz-transition: all 0.2s ease-in;
  -o-transition: all 0.2s ease-in;
  -webkit-transition: all 0.2s ease-in;
  transition: all 0.2s ease-in; }

 /*.custom-select:after {
     content: "";
     width: 0;
     height: 0;
     //border: 7px solid transparent;
     //border-color:#9E9E9E transparent transparent transparent;
     position: absolute;
     //top: 16px;
     //right: 10px;
     transform: rotateZ(0deg);
     transition: all 0.5s;
     transform-origin: 50% 25%;
}*/
/*.custom-select:hover {
     background-color: #b83729;
}
*/
 /*.custom-select:active, .custom-select.active {
     background-color: #fff;
     color: #9E9E9E;
}
 .custom-select:active:after, .custom-select.active:after {
     transform: rotateZ(180deg);
     transition: all 0.5s;
     transform-origin: 50% 25%;
}
 .custom-select:focus{
    outline: 2px;
}
 .select-options {
     max-height: 200px;
     overflow-y: auto;
     display: block;
     position: absolute;
     top: 100%;
     right: 0;
     left: 0;
     z-index: 999;
     margin: 0;
     padding: 0;
     list-style: none;
     background-color: #AED581;
     border-radius: 0px 0px 5px 5px;
}
 .select-options li {
     color: #424242;
     margin: 0;
     padding: 12px 0;
    //text-indent: 15px;
    
    //border-top: 1px solid #AED581;
     -moz-transition: all 0.15s ease-in;
     -o-transition: all 0.15s ease-in;
     -webkit-transition: all 0.15s ease-in;
     transition: all 0.15s ease-in;
     padding-left: 15px;
}
 .select-options li:hover {
     color: #424242;
     background: #fff;
}
 .select-options li[rel="hide"] {
     display: none;
}*/
/*-----Suite fonction---------------------------*/
#incidentDescription {
  width: calc(100% - 20px);
  height: 220px;
  padding: 10px;
  font-family: "SourceSansPro-Regular";
  font-size: 1rem;
  border: none; }
  #incidentDescription:focus {
    border: none;
    box-shadow: none; }

.contact_info {
  width: calc(100% - 20px);
  padding: 10px;
  font-family: "SourceSansPro-Regular";
  font-size: 1rem;
  border: none; }
  .contact_info a {
    color: #000000;
    transition: color .4s; }
    .contact_info a:hover {
      color: #D44510;
      transition: color .4s; }

.btn {
  width: auto;
  margin: 3rem auto;
  padding: 10px;
  font-family: "SourceSansPro-Regular";
  font-size: 1rem;
  border: solid 2px #D44510 !important;
  border-radius: 0 !important;
  color: #FFFFFF;
  background-color: #D44510; }

.btn:hover {
  background-color: #FFFFFF;
  color: #000000;
  transition: all 0.4s; }

#successMessage {
  position: relative;
  width: 50%;
  margin: 5rem auto;
  opacity: 1;
  overflow: hidden;
  transform: scale(1);
  transform-origin: bottom;
  transition: all 0.6s ease; }

#successMessage.hidden {
  height: 0;
  opacity: 0;
  margin: 0;
  padding: 0;
  transform: scale(0); }

#score-circle-container {
  display: flex;
  justify-content: center;
  align-items: center;
  height: 200px; }

#score-circle {
  width: 150px;
  height: 150px;
  border-radius: 50%;
  border: 10px solid #f0f0f0;
  position: relative;
  background: conic-gradient(#4caf50 0%, #4caf50 calc(var(--percentage) * 1%), #f0f0f0 calc(var(--percentage) * 1%)); }

#score-text {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  font-size: 24px;
  font-weight: bold; }

@media screen and (max-width: 991.98px) {
  #successMessage {
    position: relative;
    width: 90%;
    margin: 2rem auto; } }
/*------Include-Style-------------------------------*/
html.da {
  /* Styles spécifiques à la version "day" */ }
  html.da main#corps section h1 {
    color: #000000; }
  html.da main#corps section h2 {
    color: #000000; }
  html.da main#corps section h3 {
    color: #000000; }
  html.da main#corps section h4 {
    color: #000000; }
  html.da main#corps section p {
    color: #000000; }
    html.da main#corps section p a {
      color: #000000;
      transition: all 0.4s ease; }
      html.da main#corps section p a:hover {
        color: #D44510; }
  html.da main#corps section li {
    color: #000000; }
  html.da main#corps #chapitre1 {
    background: #FFFFFF; }
  html.da main#corps #chapitre2 {
    background: #FFFFFF; }
    html.da main#corps #chapitre2 .formulaire .form-motif .text-motif label {
      color: #DFDFDF; }
    html.da main#corps #chapitre2 .formulaire .form-motif .text-motif button {
      color: #DFDFDF; }
    html.da main#corps #chapitre2 .formulaire .form-motif .text-motif button {
      color: #FFFFFF; }
    html.da main#corps #chapitre2 .formulaire .form-motif #incidentType {
      color: #000000;
      background: #FFFFFF; }
      html.da main#corps #chapitre2 .formulaire .form-motif #incidentType option {
        color: #000000;
        background: #FFFFFF; }
    html.da main#corps #chapitre2 .formulaire .form-group .form-control {
      color: #000000;
      background: #FFFFFF;
      border: solid 0px #FFFFFF00;
      border-bottom: solid 1px #000000; }
      html.da main#corps #chapitre2 .formulaire .form-group .form-control::placeholder {
        color: #181818; }
    html.da main#corps #chapitre2 .formulaire .form-check .form-check-label {
      color: #000000; }
    html.da main#corps #chapitre2 .formulaire #incidentDescription {
      color: #000000;
      background: #FFFFFF;
      border: solid 0px #FFFFFF00;
      border-bottom: solid 1px #000000; }
    html.da main#corps #chapitre2 #quiz-form p {
      color: #000000; }
    html.da main#corps #chapitre2 #quiz-form label {
      color: #000000; }
  html.da main#corps #chapitre3 {
    background: #FFFFFF; }
  html.da main#corps #chapitre4 {
    background: #DFDFDF; }
  html.da main#corps #chapitre5 {
    background: #FFFFFF; }
  html.da main#corps #chapitre6 {
    background: #DFDFDF; }

html.ni {
  /* Styles spécifiques à la version "night" */ }
  html.ni main#corps section h1 {
    color: #FFFFFF; }
  html.ni main#corps section h2 {
    color: #FFFFFF; }
  html.ni main#corps section h3 {
    color: #FFFFFF; }
  html.ni main#corps section h4 {
    color: #FFFFFF; }
  html.ni main#corps section p {
    color: #FFFFFF; }
    html.ni main#corps section p a {
      color: #FFFFFF;
      transition: all 0.4s ease; }
      html.ni main#corps section p a:hover {
        color: #D44510; }
  html.ni main#corps section li {
    color: #FFFFFF; }
  html.ni main#corps #chapitre1 {
    background: #000000; }
  html.ni main#corps #chapitre2 {
    background: #000000; }
    html.ni main#corps #chapitre2 .formulaire .form-motif .text-motif label {
      color: #000000; }
    html.ni main#corps #chapitre2 .formulaire .form-motif .text-motif button {
      color: #DFDFDF; }
    html.ni main#corps #chapitre2 .formulaire .form-motif .text-motif button {
      color: #FFFFFF; }
    html.ni main#corps #chapitre2 .formulaire .form-motif #incidentType {
      color: #FFFFFF;
      background: #000000; }
      html.ni main#corps #chapitre2 .formulaire .form-motif #incidentType option {
        color: #FFFFFF;
        background: #000000; }
    html.ni main#corps #chapitre2 .formulaire .form-group .form-control {
      color: #FFFFFF;
      background: #000000;
      border: solid 0px #FFFFFF00;
      border-bottom: solid 1px #FFFFFF; }
      html.ni main#corps #chapitre2 .formulaire .form-group .form-control::placeholder {
        color: #DFDFDF; }
    html.ni main#corps #chapitre2 .formulaire .form-check .form-check-label {
      color: #FFFFFF; }
    html.ni main#corps #chapitre2 .formulaire #incidentDescription {
      color: #FFFFFF;
      background: #000000;
      border: solid 0px #FFFFFF00;
      border-bottom: solid 1px #FFFFFF; }
    html.ni main#corps #chapitre2 #quiz-form p {
      color: #FFFFFF; }
    html.ni main#corps #chapitre2 #quiz-form label {
      color: #FFFFFF; }
  html.ni main#corps #chapitre3 {
    background: #000000; }
  html.ni main#corps #chapitre4 {
    background: #181818; }
  html.ni main#corps #chapitre5 {
    background: #000000; }
  html.ni main#corps #chapitre6 {
    background: #181818; }