@charset "UTF-8";
/* Popup modale de récupération d'identifiants */
#modalRecupId {
  display: none;
  width: 600px; }
  #modalRecupId .modal-content {
    padding: 0; }
  #modalRecupId iframe {
    border: none;
    width: 100%;
    height: 280px; }

body {
  min-height: 100%;
  height: 100%;
  font-size: 15px;
  color: #000;
  font-family: 'Oswald Regular', arial, sans-serif; }

input:-webkit-autofill,
input:-webkit-autofill:hover,
input:-webkit-autofill:focus,
input:-webkit-autofill:active {
  -webkit-transition: background-color 5000s ease-in-out 0s,
 -webkit-box-shadow 5000s ease-in-out 0s !important;
  transition: background-color 5000s ease-in-out 0s,
 -webkit-box-shadow 5000s ease-in-out 0s !important;
  transition: background-color 5000s ease-in-out 0s,
 box-shadow 5000s ease-in-out 0s !important;
  transition: background-color 5000s ease-in-out 0s,
 box-shadow 5000s ease-in-out 0s,
 -webkit-box-shadow 5000s ease-in-out 0s !important;
  -webkit-box-shadow: 0 0 0px 1000px #fff inset !important;
  -webkit-text-fill-color: #000 !important; }

::-webkit-input-placeholder {
  font-style: italic;
  color: #c9c9c9; }

:-moz-placeholder {
  font-style: italic;
  color: #c9c9c9; }

::-moz-placeholder {
  font-style: italic;
  color: #c9c9c9; }

:-ms-input-placeholder {
  font-style: italic;
  color: #c9c9c9; }

#page {
  min-height: 100vh; }

.contenu {
  background-color: #fff;
  padding: 4vh 0 0; }

#logo {
  width: 75%;
  margin: 10px auto;
  min-width: 100px;
  max-width: 350px;
  margin-bottom: 10vh; }

h2 {
  margin: 0;
  font-size: 1.35em;
  text-transform: uppercase;
  font-family: 'Oswald Regular', sans-serif;
  font-weight: 600;
  letter-spacing: 1px; }
  h2 span {
    color: #4f88c6; }

main {
  width: 90%;
  margin: auto; }

.input-field {
  margin-top: 2rem;
  height: 45px; }
  .input-field .prefix {
    width: 2rem;
    top: -0.6rem; }
    .input-field .prefix img {
      width: auto; }
    .input-field .prefix ~ input {
      margin-left: 0;
      padding-left: 2.5rem;
      font-family: 'Oswald Regular', sans-serif; }
      .input-field .prefix ~ input[type=text], .input-field .prefix ~ input[type=email], .input-field .prefix ~ input[type=password], .input-field .prefix ~ input[type=text]:not(.browser-default), .input-field .prefix ~ input[type=email]:not(.browser-default), .input-field .prefix ~ input[type=password]:not(.browser-default) {
        border-bottom: 2px solid #4f88c6;
        -webkit-box-shadow: none;
        box-shadow: none; }
        .input-field .prefix ~ input[type=text]:focus, .input-field .prefix ~ input[type=text].valid, .input-field .prefix ~ input[type=text].invalid, .input-field .prefix ~ input[type=email]:focus, .input-field .prefix ~ input[type=email].valid, .input-field .prefix ~ input[type=email].invalid, .input-field .prefix ~ input[type=password]:focus, .input-field .prefix ~ input[type=password].valid, .input-field .prefix ~ input[type=password].invalid, .input-field .prefix ~ input[type=text]:not(.browser-default):focus, .input-field .prefix ~ input[type=text]:not(.browser-default).valid, .input-field .prefix ~ input[type=text]:not(.browser-default).invalid, .input-field .prefix ~ input[type=email]:not(.browser-default):focus, .input-field .prefix ~ input[type=email]:not(.browser-default).valid, .input-field .prefix ~ input[type=email]:not(.browser-default).invalid, .input-field .prefix ~ input[type=password]:not(.browser-default):focus, .input-field .prefix ~ input[type=password]:not(.browser-default).valid, .input-field .prefix ~ input[type=password]:not(.browser-default).invalid {
          -webkit-box-shadow: none;
          box-shadow: none; }
        .input-field .prefix ~ input[type=text]:focus, .input-field .prefix ~ input[type=email]:focus, .input-field .prefix ~ input[type=password]:focus, .input-field .prefix ~ input[type=text]:not(.browser-default):focus, .input-field .prefix ~ input[type=email]:not(.browser-default):focus, .input-field .prefix ~ input[type=password]:not(.browser-default):focus {
          border-bottom-color: #505569; }
        .input-field .prefix ~ input[type=text].valid + label, .input-field .prefix ~ input[type=email].valid + label, .input-field .prefix ~ input[type=password].valid + label, .input-field .prefix ~ input[type=text]:not(.browser-default).valid + label, .input-field .prefix ~ input[type=email]:not(.browser-default).valid + label, .input-field .prefix ~ input[type=password]:not(.browser-default).valid + label {
          color: #4f88c6 !important; }
  .input-field > label {
    color: #a5a5a5 !important;
    font-style: italic;
    line-height: 0.9rem;
    margin-left: 2rem !important;
    width: calc(100% - 2rem) !important; }
    .input-field > label:not(.label-icon).active {
      color: #4f88c6 !important;
      line-height: 1.2rem; }

.button_form {
  display: inline-block;
  cursor: pointer;
  font-size: 1em;
  font-family: 'Oswald Regular', sans-serif;
  letter-spacing: 0.6px;
  background-color: #4f88c6;
  color: #fff;
  text-align: center;
  -webkit-transition: background-color 0.3s ease-in-out;
  transition: background-color 0.3s ease-in-out;
  position: relative;
  margin: 15px auto; }
  .button_form:hover, .button_form:focus {
    background-color: #505569;
    outline: 0; }
  .button_form::before {
    content: ' ';
    width: 45px;
    background: url("../images/next.png") no-repeat;
    background-size: 100% 100%;
    position: absolute;
    top: 0;
    left: calc(100% + 1px);
    bottom: 0; }
  .button_form span {
    display: inline-block;
    margin: 10px 30px;
    text-transform: uppercase; }

#oubli_form {
  font-family: 'Oswald Regular', sans-serif;
  margin-top: 15px; }
  #oubli_form a {
    position: relative;
    padding-left: 10px;
    z-index: 1;
    color: #000;
    text-decoration: underline; }
    #oubli_form a:hover, #oubli_form a:focus {
      color: #4f88c6;
      outline: 0; }

@media screen and (max-width: 359px) {
  #page {
    padding-top: 4vh; }
  #logo {
    margin-bottom: 8vh; }
  h2 {
    font-size: 1.1em; } }

@media screen and (min-width: 600px) {
  .contenu {
    padding: 4vh 0 0;
    width: 50%;
    float: left; }
  .bg {
    position: fixed;
    width: 50%;
    left: 50%; }
    .bg .crop {
      position: relative;
      width: calc(100% + 21px);
      min-height: calc(100vh + 21px);
      margin: -10px; }
      .bg .crop > div {
        width: calc((100% / 2));
        position: absolute;
        top: 0;
        left: 0;
        border: 10px solid #fff; }
      .bg .crop #img1 {
        background: url("../images/bg1.jpg") no-repeat center center;
        background-size: cover;
        height: 48%; }
      .bg .crop #img2 {
        background: url("../images/bg2.jpg") no-repeat center center;
        background-size: cover;
        height: 52%;
        top: inherit;
        bottom: 0; }
      .bg .crop #img3 {
        background: url("../images/bg3.jpg") no-repeat center center;
        background-size: cover;
        height: 25%;
        left: calc(100% / 2); }
      .bg .crop #img4 {
        background: url("../images/bg4.jpg") no-repeat top center;
        background-size: cover;
        height: 45%;
        top: 25%;
        left: calc(100% / 2); }
      .bg .crop #img5 {
        background: url("../images/bg5.jpg") no-repeat center center;
        background-size: cover;
        height: 30%;
        top: 70%;
        left: calc(100% / 2); }
  header, main {
    width: 80%;
    max-width: 500px;
    margin-left: 10%; }
  #logo {
    margin-left: 0; }
  #fields {
    width: 80%; }
  .input-field .prefix ~ input {
    max-width: 320px; } }

@media (min-width: 960px) {
  #page {
    background-size: auto 100%; }
  .contenu {
    padding: 6vh 0 0;
    width: 45%;
    float: left;
    min-height: 100vh; }
  .bg {
    left: 45%;
    width: 55%;
    height: 100vh;
    overflow: hidden; }
    .bg .crop > div {
      width: calc((100% / 3)); }
    .bg .crop #img3 {
      left: calc(100% / 3); }
    .bg .crop #img4 {
      left: calc(100% / 3); }
    .bg .crop #img5 {
      left: calc(100% / 3); }
    .bg .crop #img6 {
      background: url("../images/bg6.jpg") no-repeat center center;
      background-size: cover;
      height: 36%;
      left: calc((100% / 3) * 2); }
    .bg .crop #img7 {
      background: url("../images/bg7.jpg") no-repeat center center;
      background-size: cover;
      height: 27%;
      top: 36%;
      left: calc((100% / 3) * 2); }
    .bg .crop #img8 {
      background: url("../images/bg8.jpg") no-repeat bottom center;
      background-size: cover;
      height: 37%;
      top: inherit;
      bottom: 0;
      left: calc((100% / 3) * 2); }
  h2 {
    font-size: 1.6rem; } }

@media screen and (min-height: 680px) {
  #logo {
    margin-bottom: 20vh; }
  #fields {
    margin-top: 5vh; }
  .button_form {
    margin-top: 7vh; } }

@media screen and (min-width: 1200px) {
  header, main {
    width: 100%;
    max-width: 600px;
    margin-left: 10%; } }

@media all and (-ms-high-contrast: none) {
  #page .contenu main .field.input-field {
    overflow: visible;
    text-align: left !important; }
    #page .contenu main .field.input-field .prefix {
      text-align: center; }
      #page .contenu main .field.input-field .prefix ~ input::-ms-clear, #page .contenu main .field.input-field .prefix ~ input::-ms-reveal {
        display: none; } }