/*
    Violet clair : #853ea5
    Violet foncé : #502d87
    Gris clair   : #4a4a49
    Gris foncé   : #3c3c3b
*/

@font-face {
    font-family: 'exo';
    font-style: normal;
    font-weight: normal;
    src: url('Exo2.0-Medium.otf') format('truetype');
}

@font-face {
    font-family: 'Roboto';
    font-style: normal;
    font-weight: normal;
    src: url(Roboto.woff) format('woff');
}

@font-face {
    font-family: 'Satoshi-Variable';
    src: url('fonts/Satoshi-Variable.woff2') format('woff2'),
    url('fonts/Satoshi-Variable.woff') format('woff'),
    url('fonts/Satoshi-Variable.ttf') format('truetype');
    font-weight: 300 900;
    font-display: swap;
    font-style: normal;
}

body
{
    background-image:none;
    background-size:100% auto;
    font-family: 'Satoshi-Variable', Roboto, sans-serif;
    font-size: 100%;
    margin:0;
}

p
{
/*    position: relative; */
    font-size: 100%;
}

div
{
    font-size: 100%;
}

hr.form_field {
  margin: 20px 30px;
}

input::-moz-placeholder, textarea::-moz-placeholder
{
    font-style: italic;
    font-weight:normal;
}

input::-webkit-input-placeholder, textarea::-webkit-input-placeholder
{
    font-style: italic;
    font-weight:normal;
}

input:-ms-input-placeholder, textarea:-ms-input-placeholder
{
    font-style: italic;
    font-weight:normal;
}

.form_frame {
/*
  position: absolute;
  width: 100%;
*/
  display: flex;
  margin-left: auto;
  margin-right: auto;
  flex-direction: column;
  align-items: center;
  width:900px;
}

.form_header_css {
  display:block;
  margin: 1em auto 1px;
  max-width: 100vw;
}

#div_form_to_fill {
  min-width: 500px;
  margin:0 50px;
}

@media all and (max-device-width: 768px) {
  .form_header_css {
    max-width: 100vw !important;
  }
  #div_form_to_fill {
    min-width: 0;
    margin:0 5px;
  }
}

.form_fieldlabel {
    color: black;
}

.reolin_form_link {
  padding: 0 15px;
  cursor: pointer;
  text-decoration: underline !important;
}

/* Add an arrow after links */
.reolin_form_link::after {
  content: " →";
}



fieldset {
  border: none;
  position: relative;
}

fieldset::after {
  position: absolute;
/*  top: 50%; */
  top: 15px;
  transform: translateY(-50%);
/*  right: 0; */
  right: 15px;
/*  font-size: 1.5em; */
  font-size: 1em;
  pointer-events: none;
}

fieldset.has-success::after {
  content: "✓";
  color: greenyellow;
}

fieldset.has-error::after {
  content: "X";
  color: tomato;
}

fieldset.has-success label.form_label {
/*  color: greenyellow;*/
}

fieldset.has-error label.form_label {
  color: tomato;
}

fieldset .character_limit{
  position: absolute;
  bottom: 2em;
  right: 2em;
  font-size: 10px;
}

div.form_label {
  padding:0 15px;
  word-wrap:break-word;
}

h1.form_label {
  margin-left: 10px;
  margin-right: 10px;
  text-align:center;
  word-wrap:break-word;
}

span.form_label {
  color: #853ea5; /* violet clair */
  height: 50px;
  line-height: 45px;
  float:left;
  margin-left:20px;
}

input.form_field {
  font-size: 1.2em;
  width: 100%;
  height: 50px;
  border: 1px solid #aaa;
  border-radius: 2px;
  padding: 1em 1em .3em 1em;
  position: relative;
  /*  background: transparent; */
  background: white;
/*  color: #008080; */
  color: #3c3c3b; /* gris foncé */
  outline: none;
}

input.form_field + label.form_label {
  display: block;
  cursor: text;
/*  color: #777; */
  color: #853ea5; /* violet clair */
  transition: .15s ease-out all;
  position: absolute;
/*  top: 1.3em;
  left: 2.3em; */
  top: 1em;
  left: 2em;
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
    max-width: calc(100% - 70px);
}

input.form_field:focus + label.form_label,
.not-empty label.form_label {
  top: 1em;
  left: 3em;
/*  font-weight: bold; */
  font-size: .7em;
  color: #502d87; /* violet foncé */
  transition: .15s ease-out all;
}

input.form_field::placeholder {
  font-size: 0.6em;
}




textarea.form_field {
  font-size: 1.2em;
  width: 100%;
  height: 200px;
  border: 1px solid #aaa;
  border-radius: 2px;
  padding: 1em 1em .8em 1em;
  /*  background: transparent; */
  background: white;
  outline: none;
/*  color: #008080; */
}

textarea.form_field + label.form_label {
  display: block;
  cursor: text;
  color: #853ea5; /* violet clair */
  background-color: white;
  transition: .15s ease-out all;
  position: absolute;
  top: 1.3em;
  left: 2em;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
  max-width: calc(100% - 70px);
}

textarea.form_field:focus + label.form_label,
.not-empty label.form_label {
  top: 1.3em;
  left: 3em;
/*  font-weight: bold;*/
  font-size: .7em;
  color: #502d87; /* violet foncé */
  transition: .15s ease-out all;
}



:root {
  --select-border: #777;
  --select-focus: blue;
  --select-arrow: var(--select-border);
}

.form_select {
/*
  width: 100%;
  min-width: 15ch;
  max-width: 30ch;
*/
/*  border: 1px solid var(--select-border);
  border-radius: 0.25em;*/
/*  padding: 0.25em 0.5em; */
/*  font-size: 1.25rem; */
/*  width: calc(100% - 10px); */
  cursor: pointer;
  line-height: 1.1;
/*  background-color: #fff;
  background-image: linear-gradient(to top, #f9f9f9, #fff 33%);*/
  display: grid;
  grid-template-areas: "select";
  align-items: center;
}

.form_select::after {
  content: "";
  width: 0.8em;
  height: 0.5em;
  background-color: var(--select-arrow);
  clip-path: polygon(100% 0%, 0 0%, 50% 100%);
  justify-self:end;
  margin-right: 10px;
  pointer-events: none;   /* quand on clique on passe au travers de cet élément et c'est le select en dessous qui prend le click */
}

select.form_field,
.form_select:after {
  grid-area: select;
}

select.form_field {
  font-size: 1.2em;
  width: 100%;
/*  height: 200px; */
  border: 1px solid #aaa;
  border-radius: 2px;
/*  padding: 1em 1em .8em 1em; */
  padding: 1em 1em .2em 1em;
/*  background: transparent; */
  background: white;
  outline: none;
  color: #3c3c3b; /* gris foncé */

  /* hide arrow */
  appearance: none;
/*
  -webkit-appearance: none;
  -moz-appearance: none;
*/
  text-indent: 1px;
  text-overflow: '';
}

select.form_field:focus {
  outline: none;
/*  background: transparent; */
}


select.form_field + label.form_label {
/*.focus + label.form_label { */
  display: block;
  cursor: text;
/*  color: #777; */
  color: #853ea5; /* violet clair */
  transition: .15s ease-out all;
  position: absolute;
/*  top: 1.8em;
  left: 2.3em; */
  top: 1em;
  left: 2em;
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
    max-width: calc(100% - 70px);
}

select.form_field:focus + label.form_label,
.not-empty label.form_label {
  top: 1em;
  left: 3em;
    font-family: 'Satoshi-Variable', Roboto, sans-serif;
  font-size: .7em;
  color: #502d87; /* violet foncé */
  transition: .15s ease-out all;
}

select.form_field_missing {
  background-color: #F8E0E0 !important;
  /*    border-bottom: solid 2px red !important;*/
}


.choice3_begin {
    width:70px;
    padding: .5em;
    margin-top: .5em;
}

.choice3_end {
    width:70px;
    padding: .5em;
    margin-top: .5em;
}


/************/
/* Checkbox */
/************/
.cbx {
  display: flex;
  margin: auto;
  -webkit-user-select: none;
  user-select: none;
  cursor: pointer;
}
.cbx span {
  display: inline-block;
  vertical-align: middle;
  transform: translate3d(0, 0, 0);
}
.cbx span:first-child {
  flex-shrink: 0;
  position: relative;
  width: 18px;
  height: 18px;
  border-radius: 3px;
  transform: scale(1);
  vertical-align: middle;
/*  border: 1px solid #9098A9; */
  border: 1px solid #853ea5;
  transition: all 0.2s ease;
  background-color: white;
}
.cbx span:first-child svg {
  position: absolute;
  top: 3px;
  left: 2px;
  fill: none;
  stroke: #FFFFFF;
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
  stroke-dasharray: 16px;
  stroke-dashoffset: 16px;
  transition: all 0.3s ease;
  transition-delay: 0.1s;
  transform: translate3d(0, 0, 0);
}
.cbx span:first-child:before {
  content: "";
  width: 100%;
  height: 100%;
/*  background: #506EEC;*/ /* bleu foncé */
  background: #853ea5; /* violet clair */
  display: block;
  transform: scale(0);
  opacity: 1;
  border-radius: 50%;
}
.cbx span:last-child {
  padding-left: 8px;
}
.cbx:hover span:first-child {
/*  border-color: #506EEC; */ /* bleu foncé */
  border-color: #502d87; /* violet foncé */
}

.inp-cbx:checked + .cbx span:first-child {
/*  background: #506EEC; */ /* bleu foncé */
/*  border-color: #506EEC; */ /* bleu foncé */
  background: #853ea5; /* violet clair */
  border-color: #853ea5; /* violet clair */
  animation: wave 0.4s ease;
}
.inp-cbx:checked + .cbx span:first-child svg {
  stroke-dashoffset: 0;
}
.inp-cbx:checked + .cbx span:first-child:before {
  transform: scale(3.5);
  opacity: 0;
  transition: all 0.6s ease;
}

@keyframes wave {
  50% {
    transform: scale(0.9);
  }
}

/****************/
/* Radio button */
/****************/
@keyframes click-wave {
  0% {
    height: 20px;
    width: 20px;
    opacity: 0.35;
    position: relative;
  }
  100% {
    height: 200px;
    width: 200px;
    margin-left: -80px;
    margin-top: -80px;
    opacity: 0;
  }
}

.option-input-radio {
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;
  position: relative;
  top: 3.33333px;
  right: 0;
  bottom: 0;
  left: 0;
  height: 20px !important;
  width: 20px !important;
  transition: all 0.15s ease-out 0s;
  background: #cbd1d8; /* gris non coché */
  border: none;
  border-radius: 50%;
  color: #fff;
  cursor: pointer;
  display: inline-block;
  margin-right: 0.5rem;
  outline: none;
  z-index: 1000;
  padding: 0;

}
.option-input-radio:hover {
  background: #9faab7; /* gris foncé */
}
.option-input-radio:checked {
/*  background: #40e0d0; */
  background: #853ea5; /* violet clair */
}

/* coche */
.option-input-radio:checked::before {
  height: 20px;
  width: 20px;
  position: absolute;
  content: '✔';
  display: inline-block;
/*  font-size: 26.66667px; */
  font-size: 13px;
  text-align: center;
  line-height: 20px;
}

/* wave sur click */
.option-input-radio:checked::after {
  -webkit-animation: click-wave 0.65s;
  -moz-animation: click-wave 0.65s;
  animation: click-wave 0.65s;
/*  background: #40e0d0; */
  background: #853ea5; /* violet clair */
  content: '';
  display: block;
  position: relative;
  z-index: 100;
}

.option-input-radio::after {
  border-radius: 50%;
}

.studio_submit {
  border-radius: 4px;
  text-align: center;
}

.form_message {
  background-color:#853ea5;
  color:white;
  font-size:1.5em;text-align:center;
  margin-top:2em;
  height: max-content;
  padding: 2em;
  border-radius: 24px;
}

.form_button {
    text-align: center;
    border: 0;
    border-radius: 4px;
    cursor: pointer;
    height:30px;
    min-width: 100px;
    white-space: nowrap;
    padding:5px 10px 5px 10px;
    margin-top:10px;
}

/* Sections form */

.form_section {
    padding: 8px 0;
    margin: 50px 5px 5px 5px;
    border-radius: 8px;
    border-left: 1px solid #dadce0;
    border-right: 1px solid #dadce0;
    border-bottom: 1px solid #dadce0;
    box-shadow: 0 2px 6px rgba(0,0,0,0.26);
}

.form_section_header {
  height: 15px;
  background: rgb(133 62 165 / 80%);
  position: relative;
  width: calc(100% + 2px);
  top: -8px;
  border-radius: 8px 8px 0 0;
  left: -1px;
}

a.btn-login {
  border:none;
  box-sizing: border-box;
  font-size: 22px;
  line-height: 2.5;
  background-color: var(--btn-login_background);
  color: var(--btn-login_color);
  border-radius: 45px;
  text-decoration: none;
  /*width:50%;*/
  height: 60px;
  display: block;
  cursor:pointer;
  text-align:center;
  margin-top: 10px;
  margin-bottom: 2px;
}

a.btn-login:hover {
  opacity: 0.9;
}