@import url("boxicons/style/boxicons.min.css");
@import url(https://fonts.googleapis.com/css?family=Poppins:300,400,500,600,700&display=swap);
@font-face {
  font-family: 'Roboto';
  font-style: normal;
  font-weight: 300;
  font-display: swap;
  src: url(../../fonts/roboto/KFOlCnqEu92Fr1MmSU5fCRc4EsA.woff2) format('woff2');
  unicode-range: U+0460-052F, U+1C80-1C88, U+20B4, U+2DE0-2DFF, U+A640-A69F, U+FE2E-FE2F;
}
/* cyrillic */
@font-face {
  font-family: 'Roboto';
  font-style: normal;
  font-weight: 300;
  font-display: swap;
  src: url(../../fonts/roboto/KFOlCnqEu92Fr1MmSU5fABc4EsA.woff2) format('woff2');
  unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
}
/* greek-ext */
@font-face {
  font-family: 'Roboto';
  font-style: normal;
  font-weight: 300;
  font-display: swap;
  src: url(../../fonts/roboto/KFOlCnqEu92Fr1MmSU5fCBc4EsA.woff2) format('woff2');
  unicode-range: U+1F00-1FFF;
}
/* greek */
@font-face {
  font-family: 'Roboto';
  font-style: normal;
  font-weight: 300;
  font-display: swap;
  src: url(../../fonts/roboto/KFOlCnqEu92Fr1MmSU5fBxc4EsA.woff2) format('woff2');
  unicode-range: U+0370-0377, U+037A-037F, U+0384-038A, U+038C, U+038E-03A1, U+03A3-03FF;
}
/* vietnamese */
@font-face {
  font-family: 'Roboto';
  font-style: normal;
  font-weight: 300;
  font-display: swap;
  src: url(../../fonts/roboto/KFOlCnqEu92Fr1MmSU5fCxc4EsA.woff2) format('woff2');
  unicode-range: U+0102-0103, U+0110-0111, U+0128-0129, U+0168-0169, U+01A0-01A1, U+01AF-01B0, U+0300-0301, U+0303-0304, U+0308-0309, U+0323, U+0329, U+1EA0-1EF9, U+20AB;
}
/* latin-ext */
@font-face {
  font-family: 'Roboto';
  font-style: normal;
  font-weight: 300;
  font-display: swap;
  src: url(../../fonts/roboto/KFOlCnqEu92Fr1MmSU5fChc4EsA.woff2) format('woff2');
  unicode-range: U+0100-02AF, U+0304, U+0308, U+0329, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* latin */
@font-face {
  font-family: 'Roboto';
  font-style: normal;
  font-weight: 300;
  font-display: swap;
  src: url(../../fonts/roboto/KFOlCnqEu92Fr1MmSU5fBBc4.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
/* cyrillic-ext */
@font-face {
  font-family: 'Roboto';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url(../../fonts/roboto/KFOmCnqEu92Fr1Mu72xKOzY.woff2) format('woff2');
  unicode-range: U+0460-052F, U+1C80-1C88, U+20B4, U+2DE0-2DFF, U+A640-A69F, U+FE2E-FE2F;
}
/* cyrillic */
@font-face {
  font-family: 'Roboto';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url(../fonts/roboto/KFOmCnqEu92Fr1Mu5mxKOzY.woff2) format('woff2');
  unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
}
/* greek-ext */
@font-face {
  font-family: 'Roboto';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url(../fonts/roboto/KFOmCnqEu92Fr1Mu7mxKOzY.woff2) format('woff2');
  unicode-range: U+1F00-1FFF;
}
/* greek */
@font-face {
  font-family: 'Roboto';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url(https://fonts.gstatic.com/s/roboto/v30/KFOmCnqEu92Fr1Mu4WxKOzY.woff2) format('woff2');
  unicode-range: U+0370-0377, U+037A-037F, U+0384-038A, U+038C, U+038E-03A1, U+03A3-03FF;
}
/* vietnamese */
@font-face {
  font-family: 'Roboto';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url(../../fonts/roboto/KFOmCnqEu92Fr1Mu7WxKOzY.woff2) format('woff2');
  unicode-range: U+0102-0103, U+0110-0111, U+0128-0129, U+0168-0169, U+01A0-01A1, U+01AF-01B0, U+0300-0301, U+0303-0304, U+0308-0309, U+0323, U+0329, U+1EA0-1EF9, U+20AB;
}
/* latin-ext */
@font-face {
  font-family: 'Roboto';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url(../../fonts/roboto/KFOmCnqEu92Fr1Mu7GxKOzY.woff2) format('woff2');
  unicode-range: U+0100-02AF, U+0304, U+0308, U+0329, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* latin */
@font-face {
  font-family: 'Roboto';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url(../fonts/roboto/KFOmCnqEu92Fr1Mu4mxK.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
    font-family: Material Design Icons;
    src: url("../fonts/materialdesignicons/materialdesignicons.eot");
    src: url("../fonts/materialdesignicons/materialdesignicons.eot?#iefix&v=5.8.55") format("embedded-opentype"),url("../fonts/materialdesignicons/materialdesignicons.woff2") format("woff2"),url("../fonts/materialdesignicons/materialdesignicons.woff") format("woff"),url("../fonts/materialdesignicons/materialdesignicons.ttf") format("truetype");
    font-weight: 400;
    font-style: normal
}
body {
    font-family: 'Roboto', sans-serif;
    font-weight: 400;
    background-color: #f4f4f4;
    display: flex;
    justify-content: center;
    align-items: flex-start; /* Aligner le contenu en haut */
    height: 100vh;
    margin: 0;
    overflow: auto; /* Permettre le défilement */
}

.form-container {
  background-color: #fff;
      padding-bottom: 50px;
      margin-bottom: 40px;
      border-radius: 8px;
      box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
      width: 90%;
      max-width: 1000px;
      text-align: center;
      margin-top: 40px;
      overflow: hidden;
}

.logo {
    max-width: 40%; /* Ajuster la taille du logo */
    margin-bottom: 20px;
}
div#header {
    margin-bottom: 40px;
        background: linear-gradient(90deg, #021f82, #1b46d4);
    padding: 20px;
    color: #FFF;
}
#content{
  padding: 0 20px;
}

h1 {
  margin: 20px 0 35px;
  text-align: left;
  font-size: 25px;
  color: rgba(255, 255, 255, 1);
  font-weight: 400;
  font-family: 'Roboto';
  text-transform: uppercase;
}

p {
    font-size: 16px;
    margin-bottom: 20px;
}

  label {
    text-align: left;
        display: block;
        margin-bottom: 0px;
        font-size: 14px;
        margin-left: 4px;
        width: -webkit-fill-available;
  }
  #header label {
      color: #FFF;
      text-align: left;
      padding: 0 0 8px;
  }
  #contact label {
      text-align: left;
  }
  #contact input {
    border-radius: 0;
    border: none;
    border-bottom: 1px solid #CCC;
}
div#contact_ok {
    display: block;
    margin: 45px 0 25px 0;
}

div#contact {
    display: none;
}
div#contact.show {
    display: block;
}




#header button {
    transform: translateY(-6px) translateX(20px);
}

input#site_id::placeholder {
    opacity: 0.5;
    color: #FFF;
}



input[type="text"], button {
    width: 90%;
    padding: 10px;
    border: 1px solid #ccc;
    border-radius: 4px;
}

input[type="email"], button {
  width: 20%;
  padding: 22px;
  border: 1px solid #ccc;
  border-radius: 60px;
}


input[type="checkbox"] {
    margin-right: 10px;
}

fieldset {
  margin-bottom: 20px;
      border: 1px dotted #ccc;
      padding: 30px 10px 22px 21px;
      border-radius: 10px;
}

legend {
  /* margin-left: 10px; */
  padding: 0 15px;
  text-align: left;
  color: #002cbd;
  font-size: 20px;
  text-transform: uppercase;
  font-weight: 400;
  font-size: 18px;
}

.achievement {
    display: flex;
    align-items: center;
    margin-bottom: 10px;
        width: 100%;
        color:#666;
}
.achievement.checked {
        color:#002cbd;
}

.validation-text {
    color: red;
    font-weight: bold;
    margin-left: 10px;
}

button {
    background-color: #002cbd;
    color: #fff;
    border: none;
    cursor: pointer;
}

button:hover {
    background-color: #2657f7;
}

.form-row {
    display: flex;
    justify-content: space-between;
    gap: 10px;
}

.form-group {
    flex: 1;
}
#contact_ok{
  display: block;
}
#contact_ok input, #contact_ok label{
width: fit-content;
float: left;
}
.publicOnly{
  display:none;
}
.publicOnly.false {
  padding-left: 8px;
      color: #666;
      display: inline;
      font-size: 11px;
      width: -webkit-fill-available;
      text-align: left;
}
.successValue{
  font-size: 14px;
  width: -webkit-fill-available;
  text-align: right;
}
input#site_id {
  border-radius: 30px;
  background: #FFF;
  text-align: center;
  color: #666;
  border: none;
  font-size: 31px;
  width: 70%;
  padding: 10px 0;
  font-family: 'Roboto', sans-serif;
}
#contact .form-group {
    margin-bottom: 40px;
}
input#label_site {
    background: transparent;
    text-align: center;
    border: none;
    color: #FFF;
    opacity: 0.7;
}
span.var{
  font-size:9px;
  color:#999;
  text-align: left;
}