@import url('https://fonts.googleapis.com/css2?family=Heebo:wght@100;200;300;400;500;600;700;800;900&display=swap');

:root {
    --input-color: #99A3BA;
    --input-border: #CDD9ED;
    --input-background: #fff;
    --input-placeholder: #CBD1DC;
    --input-border-focus: #F4D913;
    --group-color: var(--input-color);
    --group-border: var(--input-border);
    --group-background: #EEF4FF;
    --group-color-focus: #fff;
    --group-border-focus: var(--input-border-focus);
    --group-background-focus: #F4D913;
  }

/* BUTTON */
  .button {
    width: 190px;
    margin-top: 100px;
    height: 55px;
    position: relative;
  }
  .button .btnFirst {
    width: 180px;
    display: block;
    text-align: center;
    background: #F4D913;
    border-radius: 4px;
    padding: 5px;
    cursor: pointer;
    position: relative;
    overflow: hidden;
    transition: 0.3s all ease-in-out;
  }
  .button .btnFirst .text {
    display: block;
    font-size: 1.5em;
    letter-spacing: 3px;
    height: 45px;
    line-height: 45px;
    color: #fff;
    transition: 0.3s all ease-in-out;
    font-family: 'Heebo', sans-serif;
  }
  .button .btnFirst .progress {
    background: #F4D913;
    position: absolute;
    top: 0;
    left: 0;
    bottom: 0;
    right: 0;
    width: 0;
  }
  .button.connect .btnFirst {
    background: #e5e5e5;
    width: 0;
    padding: 5px 0;
    float: right;
    transition: 0.3s width ease-in-out 2s, 0.3s padding ease-in-out 2s;
  }
  .button.connect .btnFirst .text {
    animation: textHeight 0.6s ease-in-out forwards;
    overflow: hidden;
  }
  .button.connect .btnFirst .progress {
    width: 100%;
    transition: 1.4s width ease-out 0.6s;
  }
  .button.connected .btnFirst {
    display: none;
  }
  .button .svg-button {
    display: block;
    visibility: hidden;
    width: 190px;
    height: 55px;
    line-height: 45px;
    padding: 5px;
    text-align: center;
    position: absolute;
    border-radius: 4px;
    overflow: hidden;
    top: 0;
    left: 0;
  }
  .button .svg-button .letter {
    opacity: 0;
    color: #28e470;
    display: inline-block;
    transform: translate(0px, 5px);
  }
  .button .svg-button svg {
    position: absolute;
    top: 0;
    left: 0;
  }
  .noel .button .btnFirst {
    background: rgba(12,142,12,1);
    background: linear-gradient(90deg, rgba(142,12,12,1) 0%, rgba(12,142,12,1) 100%);
  }
  .noel .button .btnFirst .progress {
    background: rgba(12,142,12,1);
    background: linear-gradient(90deg, rgba(142,12,12,1) 0%, rgba(12,142,12,1) 100%);
  }

  .noel .form-group > span {
    background: rgba(12,142,12,1);
    background: linear-gradient(90deg, rgba(142,12,12,1) 0%, rgba(12,142,12,1) 100%);
    color: white;
  }

  .titreLogin {
    margin-top: 100px;
    padding-bottom: 100px;
    text-align: center;
    font-family: 'Heebo', sans-serif;
    font-style: italic;
    font-size: 2.5em;
  }
    .button .svg-button svg rect {
    fill: none;
    stroke: #28e470;
    stroke-width: 2;
    stroke-dasharray: 0, 480;
    stroke-dashoffset: 480;
    transition: all 0.3s ease-in-out;
  }
  .button.connected .svg-button {
    visibility: visible;
  }
  .button.connected .svg-button .letter {
    animation: slideUp 0.3s cubic-bezier(0.645, 0.045, 0.355, 1) forwards;
  }
  .button.connected .svg-button .letter:nth-child(1) {
    animation-delay: 0.05s;
  }
  .button.connected .svg-button .letter:nth-child(2) {
    animation-delay: 0.1s;
  }
  .button.connected .svg-button .letter:nth-child(3) {
    animation-delay: 0.15s;
  }
  .button.connected .svg-button .letter:nth-child(4) {
    animation-delay: 0.2s;
  }
  .button.connected .svg-button .letter:nth-child(5) {
    animation-delay: 0.25s;
  }
  .button.connected .svg-button .letter:nth-child(6) {
    animation-delay: 0.3s;
  }
  .button.connected .svg-button .letter:nth-child(7) {
    animation-delay: 0.35s;
  }
  .button.connected .svg-button .letter:nth-child(8) {
    animation-delay: 0.4s;
  }
  .button.connected .svg-button .letter:nth-child(9) {
    animation-delay: 0.45s;
  }
  .button.connected .svg-button svg rect {
    stroke-width: 6;
    stroke-dasharray: 400, 0;
    transition: all 0.3s ease-in-out;
  }

  /* error */

  .button.connectedN .btnFirst {
    display: none;
  }
  .button .svg-button-error {
    display: block;
    visibility: hidden;
    width: 190px;
    height: 55px;
    line-height: 45px;
    padding: 5px;
    text-align: center;
    position: absolute;
    border-radius: 4px;
    overflow: hidden;
    top: 0;
    left: 0;
  }
  .button .svg-button-error .letter {
    opacity: 0;
    color: darkred;
    display: inline-block;
    transform: translate(0px, 5px);
  }
  .button .svg-button-error svg {
    position: absolute;
    top: 0;
    left: 0;
  }
  .button .svg-button-error svg rect {
    fill: none;
    stroke: darkred;
    stroke-width: 2;
    stroke-dasharray: 0, 480;
    stroke-dashoffset: 480;
    transition: all 0.3s ease-in-out;
  }
  .button.connectedN .svg-button-error {
    visibility: visible;
  }
  .button.connectedN .svg-button-error .letter {
    animation: slideUp 0.3s cubic-bezier(0.645, 0.045, 0.355, 1) forwards;
  }
  .button.connectedN .svg-button-error .letter:nth-child(1) {
    animation-delay: 0.05s;
  }
  .button.connectedN .svg-button-error .letter:nth-child(2) {
    animation-delay: 0.1s;
  }
  .button.connectedN .svg-button-error .letter:nth-child(3) {
    animation-delay: 0.15s;
  }
  .button.connectedN .svg-button-error .letter:nth-child(4) {
    animation-delay: 0.2s;
  }
  .button.connectedN .svg-button-error .letter:nth-child(5) {
    animation-delay: 0.25s;
  }
  .button.connectedN .svg-button-error .letter:nth-child(6) {
    animation-delay: 0.3s;
  }
  .button.connectedN .svg-button-error svg rect {
    stroke-width: 6;
    stroke-dasharray: 400, 0;
    transition: all 0.3s ease-in-out;
  }
  
  @keyframes textHeight {
    0% {
      height: 45px;
      line-height: 45px;
      opacity: 1;
    }
    25% {
      line-height: 35px;
    }
    50% {
      height: 55px;
    }
    75% {
      line-height: 75px;
    }
    100% {
      height: 0;
      opacity: 0;
    }
  }
  @keyframes progressbar {
    0% {
      width: 0;
    }
    75% {
      width: 100%;
      left: 0;
    }
    100% {
      left: 190px;
    }
  }
  @keyframes slideUp {
    0% {
      opacity: 0;
      transform: translate(0px, 5px);
    }
    100% {
      opacity: 1;
      transform: translate(0px, 0px);
    }
  }


  /* */
  .form-field {
    display: block;
    width: 100%;
    padding: 8px 16px;
    line-height: 25px;
    font-size: 14px;
    font-weight: 500;
    font-family: inherit;
    border-radius: 6px;
    -webkit-appearance: none;
    color: var(--input-color);
    border: 1px solid var(--input-border);
    background: var(--input-background);
    transition: border 0.3s ease;
  }
  .form-field::-moz-placeholder {
    color: var(--input-placeholder);
  }
  .form-field:-ms-input-placeholder {
    color: var(--input-placeholder);
  }
  .form-field::placeholder {
    color: var(--input-placeholder);
  }
  .form-field:focus {
    outline: none;
    border-color: var(--input-border-focus);
  }
  
  .form-group {
    position: relative;
    display: flex;
    width: 80%;
  }
  .form-group > span,
  .form-group .form-field {
    white-space: nowrap;
    display: block;
  }
  .form-group > span:not(:first-child):not(:last-child),
  .form-group .form-field:not(:first-child):not(:last-child) {
    border-radius: 0;
  }
  .form-group > span:first-child,
  .form-group .form-field:first-child {
    border-radius: 6px 0 0 6px;
  }
  .form-group > span:last-child,
  .form-group .form-field:last-child {
    border-radius: 0 6px 6px 0;
  }
  .form-group > span:not(:first-child),
  .form-group .form-field:not(:first-child) {
    margin-left: -1px;
  }
  .form-group .form-field {
    position: relative;
    z-index: 1;
    flex: 1 1 auto;
    width: 1%;
    margin-top: 0;
    margin-bottom: 0;
  }
  .form-group > span {
    text-align: center;
    padding: 8px 12px;
    font-size: 14px;
    line-height: 25px;
    color: var(--group-color);
    background: var(--group-background);
    border: 1px solid var(--group-border);
    transition: background 0.3s ease, border 0.3s ease, color 0.3s ease;
    width: 115px;
  }
  .form-group:focus-within > span {
    color: var(--group-color-focus);
    background: var(--group-background-focus);
    border-color: var(--group-border-focus);
  }

  .divFlexLogin {
    flex-direction: column;
    align-items: center;
    justify-content: center;
    justify-content: flex-start;
  }