/* OVIIGI PENTAGONE PREMIUM V461Q */
/* Prévisualisation exclusivement */

@media (min-width: 1px) {

  #comprendre-transfert .steps-grid {
    --penta-width: 330px;
    --penta-height: 282px;

    display: grid !important;
    grid-template-columns: repeat(2, var(--penta-width)) !important;
    grid-template-rows: repeat(2, var(--penta-height)) !important;

    justify-content: center !important;
    align-content: center !important;
    gap: 0 !important;

    position: relative;
    width: 100%;
    max-width: 920px;
    min-height: 810px;
    margin: 40px auto 0 !important;
    padding: 0 !important;
    overflow: visible;
  }

  #comprendre-transfert .steps-grid > .step {
    position: relative !important;
    box-sizing: border-box !important;
    display: flex !important;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    text-align: center;

    width: var(--penta-width) !important;
    height: var(--penta-height) !important;
    min-width: 0 !important;
    max-width: none !important;
    margin: 0 !important;
    padding: 45px 40px 48px !important;

    border: 0 !important;
    border-radius: 0 !important;

    background: linear-gradient(
      145deg,
      #315371 0%,
      #152d49 55%,
      #0b1e36 100%
    ) !important;

    clip-path: polygon(
      50% 0%,
      100% 37%,
      81% 100%,
      19% 100%,
      0% 37%
    );

    filter: none !important;
    box-shadow: none !important;
    transform: none !important;
    overflow: hidden;
  }

  #comprendre-transfert .steps-grid > .step::before {
    content: "";
    position: absolute;
    inset: 3px;
    z-index: 0;

    background: linear-gradient(
      145deg,
      #183652,
      #0c2039
    );

    clip-path: inherit;
    pointer-events: none;
  }

  #comprendre-transfert .steps-grid > .step > * {
    position: relative;
    z-index: 1;
  }

  #comprendre-transfert .steps-grid > .step:nth-child(1) {
    grid-column: 1 !important;
    grid-row: 1 !important;
    background: #3c83c3 !important;
  }

  #comprendre-transfert .steps-grid > .step:nth-child(2) {
    grid-column: 2 !important;
    grid-row: 1 !important;
    background: #d99548 !important;
  }

  #comprendre-transfert .steps-grid > .step:nth-child(3) {
    grid-column: 1 !important;
    grid-row: 2 !important;
    background: #8773ba !important;
  }

  #comprendre-transfert .steps-grid > .step:nth-child(4) {
    grid-column: 2 !important;
    grid-row: 2 !important;
    background: #42a6a0 !important;
  }

  #comprendre-transfert .steps-grid > .step:nth-child(5) {
    grid-column: 1 / span 2 !important;
    grid-row: 1 / span 2 !important;
    justify-self: center !important;
    align-self: center !important;

    width: 290px !important;
    height: 250px !important;
    z-index: 5;

    background: #67c6c0 !important;
  }

  #comprendre-transfert .step .number {
    margin: 0 0 10px !important;
    font-size: 29px !important;
    line-height: 1.1 !important;
    color: #80e1df !important;
  }

  #comprendre-transfert .step h3 {
    margin: 0 0 9px !important;
    font-size: 17px !important;
    line-height: 1.25 !important;
    color: #ffffff !important;
  }

  #comprendre-transfert .step p {
    margin: 0 !important;
    font-size: 12px !important;
    line-height: 1.45 !important;
    color: #d3dfeb !important;
  }

  #comprendre-transfert .step:nth-child(5) .number {
    color: #a3fff0 !important;
  }
}



/* OVIIGI PENTAGONE RESPONSIVE V461T */
@media (max-width: 900px) {

  #comprendre-transfert .steps-grid {
    --penta-width: min(43vw, 260px);
    --penta-height: min(37vw, 222px);

    min-height: calc(2 * var(--penta-height) + 28px);
    margin-top: 24px !important;
  }

  #comprendre-transfert .steps-grid > .step {
    padding: 18px 18px 24px !important;
  }

  #comprendre-transfert .steps-grid > .step:nth-child(5) {
    width: calc(var(--penta-width) * .88) !important;
    height: calc(var(--penta-height) * .88) !important;
  }

  #comprendre-transfert .step .number {
    font-size: clamp(13px, 3.4vw, 23px) !important;
    margin-bottom: 5px !important;
  }

  #comprendre-transfert .step h3 {
    font-size: clamp(10px, 2.2vw, 15px) !important;
    margin-bottom: 5px !important;
  }

  #comprendre-transfert .step p {
    font-size: clamp(9px, 1.7vw, 12px) !important;
    line-height: 1.3 !important;
  }
}

/* OVIIGI PENTAGONE COMPACT V461V */

/* Supprimer les grandes reserves verticales */
#comprendre-transfert {
  padding-top: 30px !important;
  padding-bottom: 32px !important;
}

#comprendre-transfert .steps-grid {
  align-content: start !important;
  margin-top: 20px !important;
  margin-bottom: 0 !important;
}

/* Ordinateur */
@media (min-width: 901px) {
  #comprendre-transfert .steps-grid {
    min-height: 570px !important;
    height: 570px !important;
    grid-template-rows:
      repeat(2, var(--penta-height)) !important;
  }
}

/* Tablette et telephone */
@media (max-width: 900px) {
  #comprendre-transfert .steps-grid {
    min-height: 0 !important;
    height: calc(2 * var(--penta-height)) !important;
    margin-top: 14px !important;
  }

  #comprendre-transfert {
    padding-top: 22px !important;
    padding-bottom: 24px !important;
  }
}

/* OVIIGI GLOBE MOBILE MASQUE V462I */
@media (max-width: 900px) {

  main > .transfer-hero .transfer-hero-visual,
  main > .transfer-hero .transfer-globe-placeholder,
  main > .transfer-hero .transfer-globe-image,
  main > .transfer-hero .transfer-globe-orbit {
    display: none !important;
  }

  main > .transfer-hero {
    grid-template-columns: 1fr !important;
  }

}


/* OVIIGI FORMULAIRE PREMIUM V462J-C */

#preparer-transfert.panel {
  max-width: 1050px !important;
  margin-left: auto !important;
  margin-right: auto !important;
  padding: 23px 27px !important;
  border: 1px solid rgba(35,220,226,.65) !important;
  border-radius: 21px !important;
  background: linear-gradient(
    130deg,#123e56,#0b2945 65%,#09223d
  ) !important;
  box-shadow: 0 12px 30px rgba(0,0,0,.14) !important;
}

#preparer-transfert .panel-heading {
  display: flex !important;
  align-items: center !important;
  gap: 13px !important;
  margin-bottom: 17px !important;
}

#preparer-transfert .symbol {
  color: #4be7e2 !important;
  font-size: 28px !important;
}

#preparer-transfert #form-title {
  font-size: clamp(19px,2.5vw,25px) !important;
  margin: 0 0 4px !important;
}

#preparer-transfert .panel-heading p {
  font-size: 12px !important;
  line-height: 1.4 !important;
  margin: 0 !important;
}

#preparer-transfert #transfer-form {
  display: grid !important;
  grid-template-columns: minmax(0,1fr) auto !important;
  gap: 9px !important;
  align-items: end !important;
}

#preparer-transfert #transfer-form label {
  grid-column: 1 / -1 !important;
  font-size: 12px !important;
  margin: 0 !important;
}

#preparer-transfert #domain {
  width: 100% !important;
  min-width: 0 !important;
  height: 46px !important;
  min-height: 46px !important;
  background: #071d34 !important;
  color: #e8faff !important;
  border: 1px solid #237eaa !important;
  border-radius: 11px !important;
  padding: 10px 14px !important;
  font-size: 14px !important;
}

#preparer-transfert #domain::placeholder {
  color: #9fb8cb !important;
}

#preparer-transfert #domain:focus {
  outline: 2px solid #31d4d1 !important;
  outline-offset: 1px !important;
}

#preparer-transfert #transfer-form button {
  width: auto !important;
  min-height: 46px !important;
  padding: 10px 20px !important;
  border: 1px solid #35dfe4 !important;
  border-radius: 11px !important;
  background: linear-gradient(
    105deg,#08bfc1,#078fe3
  ) !important;
  color: #fff !important;
  font-size: 13px !important;
  font-weight: 700 !important;
  white-space: nowrap !important;
}

#preparer-transfert .disclaimer {
  margin: 13px 0 0 !important;
  padding: 11px 13px !important;
  border: 1px solid rgba(47,129,174,.45) !important;
  border-left: 3px solid #f5a623 !important;
  border-radius: 9px !important;
  background: rgba(4,23,42,.45) !important;
  font-size: 11px !important;
  line-height: 1.5 !important;
}

#preparer-transfert .oviigi-transfer-nav {
  display: table !important;
  width: auto !important;
  margin: 14px auto 0 !important;
  padding: 7px 14px !important;
  font-size: 12px !important;
  border-radius: 30px !important;
}

@media (max-width:600px) {
  #preparer-transfert.panel {
    padding: 17px 15px !important;
    border-radius: 18px !important;
  }

  #preparer-transfert .panel-heading {
    gap: 10px !important;
    margin-bottom: 13px !important;
  }

  #preparer-transfert .symbol {
    font-size: 24px !important;
  }

  #preparer-transfert #form-title {
    font-size: 18px !important;
  }

  #preparer-transfert #transfer-form {
    gap: 7px !important;
  }

  #preparer-transfert #domain {
    height: 42px !important;
    min-height: 42px !important;
    padding: 8px 10px !important;
    font-size: 13px !important;
  }

  #preparer-transfert #transfer-form button {
    min-height: 42px !important;
    padding: 8px 11px !important;
    font-size: 12px !important;
  }

  #preparer-transfert .disclaimer {
    font-size: 10px !important;
  }
}