:root {
    --padd		: 2.5vw;
    --primary   : #6FA4C4;
    --secondary : #DCC9B6;
    --tertiary  : #383330;
    --text      : #FFFFFF;
}

@font-face { font-family: "DIN-Bold"; src: url('../fonts/DIN-Bold.woff2') format('woff2'), url('../fonts/DIN-Bold.ttf') format('truetype'); }
@font-face { font-family: "DIN-Light"; src: url('../fonts/DIN-Light.woff2') format('woff2'), url('../fonts/DIN-Light.ttf') format('truetype'); }
@font-face { font-family: "DIN-Medium"; src: url('../fonts/DIN-Medium.woff2') format('woff2'), url('../fonts/DIN-Medium.ttf') format('truetype'); }
@font-face { font-family: "DIN-Regular"; src: url('../fonts/DIN-Regular.woff2') format('woff2'), url('../fonts/DIN-Regular.ttf') format('truetype'); }

@font-face {
  font-family: "Roboto";
  src: url('../fonts/Roboto-Regular.ttf');
}

body {
    margin: 0;
    line-height: 1.2;
}

sup {
  font-size: 0.6em!important;
  line-height: 0.6em!important;
  font-family: 'Roboto';
}

strong { font-family: "DIN-Bold", sans-serif }

body main {
    width: 100%;
    display: flex;
    height: 100vh;
}

body main section.presentation {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: flex-start;
    row-gap: 1vw;
}

body main section.presentation article.logos {
    width: 100%;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: flex-start;
    row-gap: var(--padd);
}

body main section.presentation article.logos img.logo {
    width: 30%;
}
body main section.presentation article.logos img.logo_prog {
    width: 50%;
}
body main section.presentation article.text {
    color: var(--text);
    font-size: 0.9vw;
    line-height: 1.2;
    width: 68%;
    padding-left: 3%;
}
body main section.presentation article.text p:first-child {
    text-align: center;
}
body main section.presentation article.text p {
    font-family: "DIN-Regular", sans-serif;
}

body main section.presentation article.text .offre {
  width: 16%;
  position: absolute;
}

body main section.presentation article.dispos {
    position: relative;
    margin-left: -100%;
    margin-top: -70%;
}
body main section.presentation article.dispos img.desktop {
    width: 7vw;
}
body main section.presentation article.dispos img.mobile {
    width: 38vw;
}

body main section.form {
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
    align-items: center;
    font-family: "DIN-Regular";
    line-height: 1.2;
    overflow-y: scroll;
    gap: 1.5vw;
}

body main section.form form {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    text-align: center;
    font-weight: bold;
    width: 100%;
    padding: 0 1.5vw;
}
body main section.form form div h2 {
    font-family: 'DIN-Light';
}

body main section.form .acheter {
    font-size: 0.9vw;
}

body main section.form form div p {
    font-family: 'DIN-Bold';
    margin-top: 0vw;
    font-size: 0.9vw;
    font-weight: bold;
}
body main section.form form h2 {
    line-height: 1.2;
    font-size: 1.3vw;
    margin: 2vw 0 0 0;
    font-weight: 500;
}
body main section.form form .inputs {
    width: 100%;
    display: flex;
    flex-direction: column;
    row-gap: 0.8vw;
    align-items: center;
}
body main section.form form .inputs input {
    border: 1px solid var(--tertiary);
    /*padding: 10px 20px 5px 20px;*/
    padding: 10px 20px;
    width: 100%;
    /*font-family: 'DIN-Light';*/
    line-height: 1.4;
}
body main section.form form .inputs input::placeholder {
    /*font-family: 'DIN-Light';
    line-height: 4;
    color: black;
    opacity: 1;*/
}
body main section.form form .inputs .infos1,
body main section.form form .inputs .infos2,
body main section.form form .inputs .infos3 {
    width: 100%;
    display: flex;
    justify-content: space-between;
}
body main section.form form .inputs .infos1 label,
body main section.form form .inputs .infos2 label,
body main section.form form .inputs .infos3 label {
    width: 49%;
}
body main section.form form div.acheter div.checkbox {
    width: 48%;
}

body main section.form form .inputs input[type='number'] {
    width: unset;
}

.oneinput {
  width: 48%;
}

.oneinput input{
  font-family: 'Roboto';
}


body main section.form form p.typos {
    font-size: 0.9vw;
    font-family: 'DIN-Bold';
}
body main section.form form div.acheter,
body main section.form form div.typos {
    display: flex;
    justify-content: space-evenly;
    align-items: center;
    width: 100%;
    column-gap: 0.5vw;
    font-family: 'DIN-Bold';
}
body main section.form form div.acheter {
    justify-content: space-between;
}

body main section.form form .checkbox { width: 6.25vw; height: 40px; border-radius: 0; display: flex; justify-content: center; align-items: center; color: var(--tertiary); background-color: white; border: 1px solid var(--tertiary); }
body main section.form form .checkbox label { position: absolute; font-size: 0.85vw; line-height: 1.3vw; }
body main section.form form .checkbox.active { color: var(--tertiary); background-color: var(--secondary); border: 1px solid var(--secondary); transition: all 0.3s ease; }
body main section.form form .checkbox input[type='radio'] { width: 100%; margin: 0; height: 100%; opacity: 0; z-index: 10; cursor: pointer; }

body main section.form form .donnees {
    display: flex;
    flex-direction: row;
    column-gap: 1vw;
    justify-content: center;
    width: 100%;
}
body main section.form form .donnees input[type='checkbox'] {
    width: 20%;
    margin: 0;
}
body main section.form form p.mention,
body main section.form form .donnees label {
    font-size: 0.55vw;
    line-height: 1.2;
    text-align: left;
    font-weight: 500;
}
body main section.form article.or a,
body main section.form form button[type='submit'],
body main section.presentation article.contact a {
    background-color: var(--tertiary);
    border: 1px solid var(--tertiary);
    color: var(--text);
    border-radius: 0;
    padding: 15px 50px;
    margin-top: 1.5vw;
    text-decoration: none;
    font-family: 'Roboto';
    font-size: 1vw;
    line-height: 1.5;
}
body main section.form form button[type='submit'] {
    padding: 10px 61px 10px 61px;
    font-weight: bold;
}

body main section.form article.or a:hover,
body main section.form form button[type='submit']:hover {
    background-color: var(--text);
    color: var(--tertiary);
    cursor: pointer;
}

body main section.form::-webkit-scrollbar {
    display: none;
}


body main section.form article.or {
    display: flex;
    flex-direction: column;
    align-items: center;
    margin-top: 0;
}
body main section.form article.or p,
body main section.form article.or h2,
body main section.form article.or a {
    margin: 0;
}
body main section.form article.or p {
    font-weight: bold;
}
body main section.form article.or a {
    padding: 10px 38px 10px 38px;
    line-height: 1.5;
    font-weight: bold;
}
body main section.form article.or h2 {
    font-family: "DIN-Light";
    font-weight: 500;
}

body main section.form article.footer p {
    font-size: 0.6vw;
    line-height: 4;
    color: var(--tertiary);
    cursor: pointer;
}
body main section.form article.footer p a {
    color: var(--tertiary);
    text-decoration: underline var(--tertiary) solid;
    text-underline-offset: 3px;
    padding: 20px 0;
}

.din-bold {
  font-family: 'DIN-Bold';
}

@media (min-width: 1025px) {

    .mobile { display: none; }

    body main section {
        height: 100%;
        width: 25%;
    }

    body main section.image {
        width: 50%;
    }

    body main section.image img {
        width: 150%;
        height: 100%;
        max-width: none !important;
    }

    body main section.presentation {
        background: linear-gradient(180deg, rgba(111,164,196,1) 40%, rgba(247,249,252,0) 100%);
    }

    body main section.form {
        position: fixed;
        top: 0;
        right: 0;
    }

    
}

@media (max-width: 1024px) {

    .desktop { display: none; }

    body main {
        width: 100%;
        display: flex;
        flex-direction: column;
        height: unset;
    }

    body main p {
        font-size: 4vw;
        line-height: 1.3;
    }

    body main section {
        height: 100vh;
    }


    body main section.presentation article.logos img.logo_prog {
        margin-top: 5vw;
    }

    body main section.presentation article.text p:first-child {
        font-size: 4.2vw;
    }

    body main section.presentation article.dispos {
      top: 28%;
      left: 46%;
    }

    body main section.presentation article.text {
        width: 85%;
        margin-top: 5vw;
    }
    body main section.presentation article.text p {
        margin: 4vw 0 0 0;
        font-size: 3.4vw;
    }

    body main section.presentation article.contact a {
        padding: 20px 50px 20px 50px;
        line-height: 3;
    }

    body main section.form form h2 {
        font-size: 6vw;
    }
    body main section.form form .checkbox {
        width: 36.25vw;
    }
    body main section.form form .checkbox label {
        font-size: 3.4vw;
        /* margin-top: 1.5vw; */
    }
    body main section.form form p.acheter,
    body main section.form form p.typos {
        font-size: 4vw;
    }
    body main section.form form button[type='submit'] {
        padding: 10px 56px 10px 56px;
        margin-top: 6vw;
    }

    body main section.form form p.mention,
    body main section.form form .donnees label {
        font-size: 3vw;
        margin-top: 5vw;
    }
    body main section.form form .donnees {
        column-gap: 5vw;
    }
    body main section.form article.or {
        margin-top: 4vw;
    }

    body main section.form form button[type='submit'],
    body main section.form article.or a,
    body main section.presentation article.contact a {
        font-size: 4.4vw;
    }
    body main section.form {
        overflow: unset;
    }
    body main section.form form div.typos {
        column-gap: 1.5vw;
    }
    body main section.form article.footer {
        background-color: var(--secondary);
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: center;
        width: 100%;
        row-gap: 0vw;
        padding-top: 6vw;
        padding-bottom: 10vw;
        margin-top: 10vw;
    }
    body main section.form article.footer p {
        font-size: 3.5vw;
        margin-top: 2vw;
        color: var(--text);
    }
    body main section.form article.footer p a {
        color: var(--text);
        text-decoration: underline var(--text) solid;
        text-underline-offset: 3px;
        
    }

    body main section.presentation article.contact {
        margin-top: 10vw;
    }

    body main section.presentation article.dispos img.mobile {
      width: 68vw;
    }

    .offre {
      width: 40%;
      position: absolute;
      margin-left: 0vw;
      top: 34%;
  }
}




div#error_message {
    font-family: 'DIN-Regular';
}

/* ---- Formulaire ----- */

  .small-required {
    font-weight: 500;
    font-size: 0.7vw;
  }

  .formLeads div {
    width: 100%;
  }
  
  .formLeads::-webkit-scrollbar {
    display: none;
  }
  
  .formLeads .form-top {
    text-align: center;
  }
  
  .formLeads h4 {
  }
  
  .formLeads img {
    width: 25%;
    text-align: center;
    margin-bottom: 1.5vw;
  }

  .formLeads .titre-form {
    margin-bottom: 1.5vw;
  }
  
.formLeads .titre-form h3 {
    font-size: 1.3vw;
    font-weight: 300;
    margin-bottom: 0.2vw;
    text-transform: uppercase;
}

.mab_checkbox input {
  font-family: 'Roboto';
}

.formLeads .titre-form span {
    font-size: 0.9vw;
    font-weight: bold;
}

  .formLeads form {
    margin-top: 2vw;
  }
  
  .formLeads #container_input {
    display: grid;
    grid-template-columns: 1fr 1fr;
    column-gap: 4%;
  }
  
  .formLeads #container_input input {
    background-color: #ffffff;
    width: 100%;
    font-size: 0.875rem;
    /* border-radius: 7px; */
    margin-bottom: 6%;
    color: black;
    padding: 0.5rem;
    height: 2.5vw;
    border: 1px black solid;
    font-family: 'Roboto';
  }
  
  .formLeads #container_input input::-webkit-input-placeholder,
  .formLeads #container_input input::-moz-placeholder,
  .formLeads #container_input input:-ms-input-placeholder,
  .formLeads #container_input input::placeholder {
    color: #707070;
    /*padding: 0vw;*/
    font-style: italic;
  }
  
  .formLeads form .projet {
    margin-top: 1vw;
  }
  
  .formLeads form .projet .mab_radio {
    border-radius: 7px;
  
    /* font-family: "albert-bold"; */
  }
  
  .formLeads .form-group .control {
    display: flex;
    justify-content: center;
    flex-wrap: wrap;
    gap: 4%;
  }
  
  .formLeads .projet p {
    color: black;
    text-align: center;
    margin-bottom: 1.25vw;
  }
  
  .formLeads .mab_radio {
    display: block;
    width: 48%;
    margin: 0;
  }
  .formLeads .optin.mab_radio {
    display: flex;
    width: 100%;
    margin: 0;
    margin-top: 0px;
    align-items: flex-start;
  }
  .formLeads .projet .mab_radio label {
    color: #707070;
    text-align: center;
    transition: all 0.3s ease;
    line-height: 1em;
    background-color: #f2f2f2;
    padding: 1rem 2rem;
    border-radius: 8px;
    width: 100%;
    display: block;
    cursor: pointer;
  }
  
  .formLeads .projet .control {
    display: flex;
    justify-content: space-between;
    flex-wrap: nowrap;
    gap: 0%;
  
  }
  .formLeads #projet .mab_radio input:checked + label,
  .formLeads #projet .mab_checkbox input:checked + label {
    background-color: #DCC9B6;
    color: #000000;
    font-weight: 700;
    border: 1px  #DCC9B6 solid;
  }

  .mab_checkbox input:checked + label {
    background-color: #DCC9B6 !important;
    color: #000000 !important;
    border: 1px  #DCC9B6 solid !important;
  }
  
  .formLeads #container_typo {
    display: flex;
    justify-content: space-between;
    align-items: center;
    /* font-family: "albert-bold"; */
  }
  
  .formLeads form .label-typo {
    text-align: center;
    color: #ffffff;
    margin-top: 1.5vw;
  }
  
  .mab_checkbox label {
    border: 1px black solid !important;
    background-color: #ffffff;
    color: black;
    border-radius: 0 !important;
  }
  
  .formLeads .mab_checkbox {
    width: 100% !important;
  }
  
  
  .formLeads form i {
    color: #ffffff;
  }
  
  .mab_radio__control {
    width: max(1.5vw, 20px);
    height: max(1.5vw, 20px);
    border: 1px solid #56809A;
    transition: background 0.3s ease;
  }
  
  .mab_radio__label,
  .mab_radio__input {
    display: flex;
    justify-content: center;
    align-items: center;
    text-align: left;
  }
  
  .formLeads .mab_radio input:checked + .mab_radio__control {
    background-color: #56809A;
  }
  
  .formLeads .optin {
    margin-top: 1.5vw;
  }
  
  .formLeads .optin input {
    margin-bottom: var(--padd4d);
    background-color: white;
    border: 1px solid var(--secondary);
    color: black;
    border-radius: 5px;
    width: 100%;
    height: 2vw;
    padding: 0 max(0.5vw, 15px);
    font-size: 75%;
    font-family: "klavika-web", sans-serif;
  }
  
  .formLeads button {
    background-color: var(--tertiary);
    border: 1px solid var(--tertiary);
    color: var(--text);
    border-radius: 0;
    padding: 10px 60px;
    margin-top: 2vw;
    text-decoration: none;
    font-family: 'Roboto';
    font-size: 1vw;
    line-height: 1.5;
    cursor: pointer;
    font-weight: bold;
  }

  .formLeads button:hover {
    background-color: var(--text);
    color: var(--tertiary);
    cursor: pointer;
  }
  
  .formLeads .form-footer {
    width: 25%;
    margin-top: 2.5vw;
  }
  
  .formLeads #projet .mab_checkbox label {
    font-size: 0.875rem;
    height: 2.5vw;
    font-family: 'Roboto';
  }
  .formLeads .mab_checkbox label {
    font-size: 0.875rem;
    height: 3vw;
    font-family: 'Roboto';
  }


  @media screen and (max-width : 1025px){
    .formLeads #projet .mab_checkbox label {
      font-size: 14px;
      height: 40px;
    }
    .formLeads .mab_checkbox label {
    font-size: 14px;
    height: 50px;
  }
  }
  .formLeads .mab_checkbox {
    height: 2.5vw;
  }
  #confirmation {
    color: black;
  }
  input::-webkit-outer-spin-button,
  input::-webkit-inner-spin-button {
    -webkit-appearance: none;
    margin: 0;
  }
  
  input[type="number"] {
    -moz-appearance: textfield;
  }
  
  #error_message {
    font-family: Arial;
  }

  .mg-2 {
    margin-top: 1.2vw;
    margin-bottom: 0.4vw;
  }

  .mg-3 {
    margin-bottom: 0.4vw;
  }

  .mg-4 {
    margin-top: 0.3vw;
  }

  .din-l {
    font-family: "DIN-Light";
  }

  .oneinput input {
    background-color: #ffffff;
    width: 100%;
    font-size: 0.875rem;
    /* border-radius: 7px; */
    margin-bottom: 6%;
    color: black;
    padding: 0.5rem;
    height: 2.5vw;
    border: 1px black solid;
    }

  @media (max-width: 1025px) {
    .formLeads img {
        width: 33%;
        margin: 5vw 0;
      }

      .mg-4 {
        margin-top: 2.5vw;
      }

      body main section.form form {
        padding: 0 5vw;
      }

      .formLeads .titre-form h3 {
        font-size: 5.9vw;
      }

      .formLeads .titre-form span {
        font-size: 4.2vw;
      }

      .formLeads .oneinput input {
        height: 10vw;
        padding: 0 3vw;
        font-size: 14px;
    }

      .mg-2 {
        margin-top: 3vw;
    }
      .formLeads h4 {
        font-size: 15px;
        margin-top: 10vw;
      }
    
       #modal_form .modal_wrapper {
        background-color: #002a43 !important;
        height: 100vh;
        width: 95% !important;
        max-width: none !important;
        padding: 0 42px 42px 42px !important;
        border-radius: 5px;
        max-height: calc(100vh - 80px);
        overflow: visible;
      }
      #modal_form .modal_wrapper{
        overflow:visible !important;
       }
      .formLeads .projet .mab_radio label {
        width: 35vw;
      }
    
      .formLeads #container_input input {
        height: 10vw;
        padding: 0 3vw;
        font-size: 14px;
      }
    
      .formLeads form .label-typo {
        margin-top: 4vw;
      }
    
      .formLeads #projet .mab_radio input:checked + label {
        background-color: #ebc371;
        color: white;
        width: 35vw;
        height: 100%;
        font-weight: bold;
      }
    
      .formLeads form .projet .mab_radio {
        height: 10.5vw;
        width: auto;
      }
    
      .formLeads #projet .mab_radio input:checked + label {
        background-color: #ebc371;
        color: white;
        width: 10vw;
        height: 100%;
        font-weight: bold;
      }
    
      .formLeads #container_input {
        column-gap: 2.5vw;
        margin-top: 5vw;
      }
    
      .formLeads #container_input label {
        margin-bottom: 1vw;
      }
    
      .fsize_vsm {
        font-size: 12px
      }
    
      .formLeads .optin {
        margin-top: 5.5vw;
      }
    
      .formLeads button {
        
        margin-top: 5vw;
        padding: 10px 55px 10px 55px;
        line-height: 1.5;
        font-weight: bold;
        margin-top: 7vw;
        font-size: 4.4vw;
      }

      .small-required {
        font-size: 2.5vw;
        font-weight: 500;

      }

    
      .formLeads form {
        margin-top: 5vw;
      }
    
      .formLeads .projet p {
        margin-bottom: 4.55vw;
        margin-top: 2vw;
      }
    
      .formLeads .mab_checkbox {
        height: 10vw;
      }
    
      .formLeads .mab_checkbox label {
        font-size: 13px
      }
    
      .mab_modal {
        z-index: 9999 !important;
      }
      .ui-autocomplete {
        z-index: 10000 !important;
      }
  }


/* form.formLeads input[type="text"],
form.formLeads input[type="email"],
form.formLeads input[type="number"] { font-family:'DIN-Light', sans-serif !important; } */

/* --- MODAL ML ---- */

#modal_ml .modal_wrapper { padding: 20px;}

#modal_ml {
  font-family: "DIN-Regular", sans-serif;
}

#modal_ml h2 {
  font-size: 20px;
  font-weight: 700;
  padding-bottom: 20px;
}
#modal_ml h3 {
  font-size: 16px;
  font-weight: 700;
  padding-bottom: 5px;

}

#modal_ml p {
  /* font-family: "albert"; */
  margin-bottom: 10px;
}

@media (max-width: 768px) {
  .mab_modal {
    z-index: 9999 !important;
  }
}

@media (max-width: 414px) {
  img.offre {
    top: 38.65%;
  }
}