body {
      margin: 0;
      height: 100%;
      overflow: hidden;
      width: 100% !important;
      box-sizing: border-box;
      font-family: "Roboto", sans-serif;
    }

    .backRight {
      position: absolute;
      right: 0;
      width: 50%;
      height: 100%;
      background: linear-gradient(45deg, rgba(172,0,254,1) 0%,rgba(172,0,254,1) 15%,rgba(0,187,210,1) 78%,rgba(0,187,210,1) 100%);
    }

    .backLeft {
      position: absolute;
      left: 0;
      width: 50%;
      height: 100%;
	  background: linear-gradient(135deg, rgba(0,187,210,1) 0%,rgba(0,187,210,1) 22%,rgba(172,0,254,1) 85%,rgba(172,0,254,1) 100%);
    }

    #back {
      width: 100%;
      height: 100%;
      position: absolute;
      z-index: -999;
    }

    .canvas-back {
      position: absolute;
      top: 0;
      left: 0;
      width: 100%;
      height: 100%;
      z-index: 10;
    }

    #slideBox {
      width: 50%;
      max-height: 100%;
      height: 100%;
      overflow: hidden;
      margin-left: 50%;
      position: absolute;
      box-shadow: 0 14px 28px rgba(0, 0, 0, 0.25), 0 10px 10px rgba(0, 0, 0, 0.22);
    }

    .topLayer {
      width: 200%;
      height: 100%;
      position: relative;
      left: -100%;
    }

    label {
      font-size: 0.8em;
      text-transform: uppercase;
    }

    input {
      background-color: transparent;
      border: 0;
      outline: 0;
      font-size: 1em;
      padding: 8px 1px;
      margin-top: 0.1em;
    }

    .left {
      width: 50%;
      height: 100%;
      overflow-y: auto;
      overflow-x: hidden;
      background: #3a3a3e;
      left: 0;
      position: absolute;
    }
    .left label {
      color: #e3e3e3;
    }
    .left input {
      border-bottom: 1px solid #e3e3e3;
      color: #e3e3e3;
    }
    .left input:focus, .left input:active {
      border-color: #03A9F4;
      color: #03A9F4;
    }
    .left input:-webkit-autofill {
      -webkit-box-shadow: 0 0 0 30px #2C3034 inset;
      -webkit-text-fill-color: #e3e3e3;
    }
    .left a {
      color: #03A9F4;
    }

    .right {
      width: 50%;
      height: 100%;
      overflow: scroll;
      background: #f9f9f9;
      right: 0;
      position: absolute;
    }
    .right label {
      color: #212121;
    }
    .right input {
      border-bottom: 1px solid #212121;
    }
    .right input:focus, .right input:active {
      border-color: #673AB7;
    }
    .right input:-webkit-autofill {
      -webkit-box-shadow: 0 0 0 30px #f9f9f9 inset;
      -webkit-text-fill-color: #212121;
    }

    .content {
      display: flex;
      flex-direction: column;
      justify-content: center;
      min-height: 100%;
      width: 80%;
      margin: 0 auto;
      position: relative;
    }

    .content h2 {
      font-weight: 300;
      font-size: 2.6em;
      margin: 0.2em 0 0.1em;
    }

    .left .content h2 {
      color: #03A9F4;
      font-weight: 500;
      margin: 1em 0;
    }

    .right .content h2 {
      color: #673AB7;
      font-weight: 500;
    }

    .form-element {
      margin: 1.6em 0;
    }
    .form-element.form-submit {
      margin: 1.6em 0 0;
    }

    .form-stack {
      display: flex;
      flex-direction: column;
    }

    /* Message d'erreur mobile */
    .mobile-error {
      display: block;
      color: #ff4444;
      font-size: 0.85em;
      margin-bottom: 8px;
      animation: blink 1s infinite;
      font-weight: 500;
    }

    @keyframes blink {
      0%, 49% {
        opacity: 1;
      }
      50%, 100% {
        opacity: 0.3;
      }
    }

    .checkbox {
      -webkit-appearance: none;
      outline: none;
      background-color: #e3e3e3;
      border: 1px solid #e3e3e3;
      box-shadow: 0 1px 2px rgba(0, 0, 0, 0.05), inset 0px -15px 10px -12px rgba(0, 0, 0, 0.05);
      padding: 12px;
      border-radius: 4px;
      display: inline-block;
      position: relative;
      flex-shrink: 0;
    }

    .checkbox:focus, .checkbox:checked:focus,
    .checkbox:active, .checkbox:checked:active {
      border-color: #03A9F4;
      box-shadow: 0 1px 2px rgba(0, 0, 0, 0.05), inset 0px 1px 3px rgba(0, 0, 0, 0.1);
    }

    .checkbox:checked {
      outline: none;
      box-shadow: 0 1px 2px rgba(0, 0, 0, 0.05), inset 0px -15px 10px -12px rgba(0, 0, 0, 0.05), inset 15px 10px -12px rgba(255, 255, 255, 0.1);
    }

    .checkbox:checked:after {
      outline: none;
      content: "✓";
      color: #03A9F4;
      font-size: 1.4em;
      font-weight: 900;
      position: absolute;
      top: -4px;
      left: 4px;
    }

    .form-checkbox {
      display: flex;
      align-items: flex-start;
    }
    .form-checkbox label {
      margin: 0 0 0 6px;
      font-size: 0.72em;
    }

    button {
      padding: 0.8em 1.2em;
      margin: 0 10px 0 0;
      width: auto;
      font-weight: 600;
      text-transform: uppercase;
      font-size: 1em;
      color: #fff;
      line-height: 1em;
      letter-spacing: 0.6px;
      border-radius: 3px;
      box-shadow: 0 2px 6px rgba(0, 0, 0, 0.1), 0 3px 6px rgba(0, 0, 0, 0.1);
      border: 0;
      outline: 0;
      transition: all 0.25s;
      cursor: pointer;
      position: relative;
      overflow: hidden;
    }
    
    button.signup {
      background: #03A9F4;
    }
    
    button.login {
      background: #673AB7;
    }
    
    button.skip {
      background: #ccc;
      color: #333;
    }
    
    button.off {
      background: none;
      box-shadow: none;
      margin: 0;
    }
    
    button.off.signup {
      color: #03A9F4;
    }
    
    button.off.login {
      color: #512DA8;
      background: #e3e3e3;
    }

    /* Style pour le bouton "Créer un compte" (goRight) - SANS EFFETS */
    button#goRight.login.off {
      background: #e3e3e3;
      color: #512DA8;
      transition: none;
    }

    button#goRight.login.off:hover,
    button#goRight.login.off:focus,
    button#goRight.login.off:active {
      background: #e3e3e3;
      color: #512DA8;
      box-shadow: none;
      transform: none;
    }

    /* ===================================== */
    /* STYLE CODEPEN pour "Connexion" (#logIn) */
    /* ===================================== */
    button#logIn.login {
      background: #673AB7;
      border: none;
      display: inline-flex;
      align-items: center;
      justify-content: center;
      gap: 8px;
      transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    }

    button#logIn.login span {
      display: inline-block;
      transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    }

    button#logIn.login svg {
      width: 18px;
      height: 18px;
      opacity: 0;
      transform: translateX(-10px);
      transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    }

    button#logIn.login:hover {
      background: #512DA8;
      padding-right: 1.8em;
      box-shadow: 0 4px 12px rgba(103, 58, 183, 0.4);
    }

    button#logIn.login:hover span {
      transform: translateX(-8px);
    }

    button#logIn.login:hover svg {
      opacity: 1;
      transform: translateX(0);
    }

    /* ===================================== */
    /* STYLE CODEPEN pour "Créer mon compte !" (#signUp) */
    /* ===================================== */
    button#signUp.signup {
      background: #03A9F4;
      border: none;
      display: inline-flex;
      align-items: center;
      justify-content: center;
      gap: 8px;
      transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    }

    button#signUp.signup span {
      display: inline-block;
      transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    }

    button#signUp.signup svg {
      width: 18px;
      height: 18px;
      opacity: 0;
      transform: translateX(-10px);
      transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    }

    button#signUp.signup:hover {
      background: #0288D1;
      padding-right: 1.8em;
      box-shadow: 0 4px 12px rgba(3, 169, 244, 0.4);
    }

    button#signUp.signup:hover span {
      transform: translateX(-8px);
    }

    button#signUp.signup:hover svg {
      opacity: 1;
      transform: translateX(0);
    }

    /* Garder les autres styles de boutons */
    button:focus.off, button:active.off, button:hover.off {
      box-shadow: none;
    }
    
    button:focus.off.signup:not(#goRight), 
    button:active.off.signup:not(#goRight), 
    button:hover.off.signup:not(#goRight) {
      color: #03A9F4;
      background: #212121;
    }

    button.skip:hover {
      background: #bbb;
      box-shadow: 0 4px 7px rgba(0, 0, 0, 0.1), 0 3px 6px rgba(0, 0, 0, 0.1);
    }

    button:disabled {
      opacity: 0.5;
      cursor: not-allowed;
    }

    /* Multi-step Form Styles */
    .step {
      display: none;
      animation: fadeIn 0.5s;
    }

    .step.active {
      display: block;
    }

    @keyframes fadeIn {
      from {
        opacity: 0;
        transform: translateX(-20px);
      }
      to {
        opacity: 1;
        transform: translateX(0);
      }
    }

    .progress-bar {
      display: flex;
      justify-content: space-between;
      margin-bottom: 2em;
      position: relative;
    }

    .progress-bar::before {
      content: '';
      position: absolute;
      top: 50%;
      left: 0;
      right: 0;
      height: 2px;
      background: #101010;
      transform: translateY(-50%);
      z-index: 0;
    }

    .progress-bar::after {
      content: '';
      position: absolute;
      top: 50%;
      left: 0;
      height: 2px;
      background: #03A9F4;
      transform: translateY(-50%);
      z-index: 1;
      transition: width 0.3s ease;
      width: 0%;
    }

    .progress-bar[data-step="1"]::after { width: 0%; }
    .progress-bar[data-step="2"]::after { width: 33.33%; }
    .progress-bar[data-step="3"]::after { width: 66.66%; }
    .progress-bar[data-step="4"]::after { width: 100%; }

    .progress-step {
      width: 40px;
      height: 40px;
      border-radius: 50%;
      background: #101010;
      display: flex;
      align-items: center;
      justify-content: center;
      color: #888;
      font-weight: 600;
      position: relative;
      z-index: 2;
      transition: all 0.3s;
    }

    .progress-step.active {
      background: #03A9F4;
      color: #fff;
      box-shadow: 0 0 0 4px rgba(3, 169, 244, 0.2);
    }

    .progress-step.completed {
      background: #03A9F4;
      color: #fff;
    }

    .step-description {
      color: #aaa;
      font-size: 0.9em;
      margin-bottom: 1.5em;
      line-height: 1.5;
    }

    .btn-group {
      display: flex;
      gap: 10px;
      flex-wrap: wrap;
    }

    .already-member {
      margin-top: 1.5em;
      display: flex;
      flex-wrap: nowrap;
    }

    @media only screen and (max-width: 768px) {
	  #inscription-logo {
        display:none;
      }
      #slideBox {
        width: 80%;
        margin-left: 20%;
      }

      .content h2 {
        font-size: 2em;
      }

      .progress-step {
        width: 32px;
        height: 32px;
        font-size: 0.85em;
      }

      .step-description {
        font-size: 0.8em;
      }

      label {
        font-size: 0.75em;
      }

      input {
        font-size: 0.95em;
      }

      button {
        font-size: 0.9em;
        padding: 0.7em 1em;
      }
    }

    @media only screen and (max-width: 420px) {
      .content h2 {
        font-size: 1.8em;
      }

      .btn-group {
        flex-direction: column;
      }

      .already-member {
        flex-direction: column;
      }

      button {
        margin: 0 0 10px 0;
        width: 100%;
      }

      .progress-step {
        width: 28px;
        height: 28px;
        font-size: 0.8em;
      }

      .step-description {
        font-size: 0.75em;
        margin-bottom: 1em;
      }
    }

    @media only screen and (max-height: 600px) {
      .content h2 {
        font-size: 1.8em;
        margin: 0.1em 0;
      }

      .progress-bar {
        margin-bottom: 1em;
      }

      .form-element {
        margin: 1em 0;
      }

      .step-description {
        font-size: 0.8em;
        margin-bottom: 1em;
      }

      label {
        font-size: 0.7em;
      }

      input {
        font-size: 0.9em;
        padding: 6px 1px;
      }

      button {
        padding: 0.6em 1em;
        font-size: 0.85em;
      }
    }