@media only screen and (width >= 1025px) {
  .frame {
    background-color: var(--surface);
    flex-direction: column;
    align-items: flex-end;
    gap: 64px;
    width: 100%;
    padding: 90px;
    display: flex;
    position: relative;
  }

  .frame .texte {
    flex-direction: column;
    flex: none;
    justify-content: center;
    align-items: center;
    gap: 12px;
    width: 100%;
    display: flex;
    position: relative;
  }

  .frame .titre-page {
    color: var(--legal-accent);
    letter-spacing: 2.4px;
    align-self: stretch;
    margin-top: -1px;
    font-family: var(--text-legals-font-family);
    font-size: 24px;
    font-weight: 400;
    line-height: normal;
    position: relative;
  }

  .frame .terms {
    flex-wrap: wrap;
    flex: none;
    align-self: stretch;
    align-items: flex-end;
    gap: 16px;
    width: 100%;
    display: flex;
    position: relative;
  }

  .frame .sous-titre {
    color: var(--black);
    letter-spacing: 0;
    flex: 1;
    margin-top: -1px;
    font-family: var(--text-legals-font-family);
    font-size: 48px;
    font-weight: 500;
    line-height: normal;
    position: relative;
  }

  .frame .div {
    color: var(--black);
    letter-spacing: 0;
    align-self: stretch;
    font-family: var(--text-legals-font-family);
    font-size: 24px;
    font-weight: 500;
    line-height: normal;
    position: relative;
  }

  .frame .span {
    color: var(--black);
    letter-spacing: 0;
    font-family: var(--text-legals-font-family);
    font-size: 24px;
    font-weight: 500;
  }

  .frame .text-wrapper-2 {
    text-decoration: underline;
  }

  .frame .div-2 {
    flex-direction: column;
    flex: none;
    align-items: flex-start;
    gap: 24px;
    width: 100%;
    display: inline-flex;
    position: relative;
  }

  .frame .div-3 {
    flex-direction: column;
    flex: none;
    align-items: flex-start;
    gap: 12px;
    display: inline-flex;
    position: relative;
  }

  .frame .text-wrapper-3 {
    color: var(--legal-accent);
    letter-spacing: 2.4px;
    width: 100%;
    margin-top: -1px;
    font-family: var(--text-legals-font-family);
    font-size: 24px;
    font-weight: 500;
    line-height: normal;
    position: relative;
  }

  .frame .p-texte {
    color: var(--black);
    letter-spacing: 0;
    width: 100%;
    font-family: var(--text-legals-font-family);
    font-size: 24px;
    font-weight: 500;
    line-height: normal;
    position: relative;
  }
}

@media only screen and (width >= 601px) and (width <= 1024px) {
  .frame {
    background-color: var(--surface);
    flex-direction: column;
    align-items: flex-end;
    gap: 54px;
    width: 100%;
    padding: 72px;
    display: flex;
    position: relative;
  }

  .frame .texte {
    flex-direction: column;
    flex: none;
    justify-content: center;
    align-items: center;
    gap: 12px;
    width: 100%;
    display: flex;
    position: relative;
  }

  .frame .titre-page {
    color: var(--legal-accent);
    letter-spacing: 2.4px;
    align-self: stretch;
    margin-top: -1px;
    font-family: var(--text-legals-font-family);
    font-size: 20px;
    font-weight: 400;
    line-height: normal;
    position: relative;
  }

  .frame .terms {
    flex-wrap: wrap;
    flex: none;
    align-self: stretch;
    align-items: flex-end;
    gap: 16px;
    width: 100%;
    display: flex;
    position: relative;
  }

  .frame .sous-titre {
    color: var(--black);
    letter-spacing: 0;
    flex: 1;
    margin-top: -1px;
    font-family: var(--text-legals-font-family);
    font-size: 40px;
    font-weight: 500;
    line-height: normal;
    position: relative;
  }

  .frame .div {
    color: var(--black);
    letter-spacing: 0;
    align-self: stretch;
    font-family: var(--text-legals-font-family);
    font-size: 20px;
    font-weight: 500;
    line-height: normal;
    position: relative;
  }

  .frame .span {
    color: var(--black);
    letter-spacing: 0;
    font-family: var(--text-legals-font-family);
    font-size: 20px;
    font-weight: 500;
  }

  .frame .text-wrapper-2 {
    text-decoration: underline;
  }

  .frame .div-2 {
    flex-direction: column;
    flex: none;
    align-items: flex-start;
    gap: 20px;
    width: 100%;
    display: inline-flex;
    position: relative;
  }

  .frame .div-3 {
    flex-direction: column;
    flex: none;
    align-items: flex-start;
    gap: 12px;
    display: inline-flex;
    position: relative;
  }

  .frame .text-wrapper-3 {
    color: var(--legal-accent);
    letter-spacing: 2.4px;
    width: 100%;
    margin-top: -1px;
    font-family: var(--text-legals-font-family);
    font-size: 20px;
    font-weight: 500;
    line-height: normal;
    position: relative;
  }

  .frame .p-texte {
    color: var(--black);
    letter-spacing: 0;
    width: 100%;
    font-family: var(--text-legals-font-family);
    font-size: 20px;
    font-weight: 500;
    line-height: normal;
    position: relative;
  }
}

@media only screen and (width <= 600px) {
  .frame {
    background-color: var(--surface);
    flex-direction: column;
    align-items: flex-end;
    gap: 32px;
    width: 100%;
    padding: 40px;
    display: flex;
    position: relative;
  }

  .frame .texte {
    flex-direction: column;
    flex: none;
    justify-content: center;
    align-items: center;
    gap: 12px;
    width: 100%;
    display: flex;
    position: relative;
  }

  .frame .titre-page {
    color: var(--legal-accent);
    letter-spacing: 2.4px;
    align-self: stretch;
    margin-top: -1px;
    font-family: var(--text-legals-font-family);
    font-size: 16px;
    font-weight: 400;
    line-height: normal;
    position: relative;
  }

  .frame .terms {
    flex-wrap: wrap;
    flex: none;
    align-self: stretch;
    align-items: flex-end;
    gap: 16px;
    width: 100%;
    display: flex;
    position: relative;
  }

  .frame .sous-titre {
    color: #303030;
    letter-spacing: 0;
    flex: 1;
    margin-top: -1px;
    font-family: var(--text-legals-font-family);
    font-size: 32px;
    font-weight: 500;
    line-height: normal;
    position: relative;
  }

  .frame .div {
    color: #303030;
    letter-spacing: 0;
    align-self: stretch;
    font-family: var(--text-legals-font-family);
    font-size: 16px;
    font-weight: 500;
    line-height: normal;
    position: relative;
  }

  .frame .span {
    color: #303030;
    letter-spacing: 0;
    font-family: var(--text-legals-font-family);
    font-size: 16px;
    font-weight: 500;
  }

  .frame .text-wrapper-2 {
    text-decoration: underline;
  }

  .frame .div-2 {
    flex-direction: column;
    flex: none;
    align-items: flex-start;
    gap: 16px;
    width: 100%;
    display: inline-flex;
    position: relative;
  }

  .frame .div-3 {
    flex-direction: column;
    flex: none;
    align-items: flex-start;
    gap: 12px;
    width: 100%;
    display: inline-flex;
    position: relative;
  }

  .frame .text-wrapper-3 {
    color: #312e76;
    width: 100%;
    font-family: var(--text-legals-font-family);
    font-weight: 500;
    font-size: px;
    letter-spacing: 2.4px;
    margin-top: -1px;
    line-height: normal;
    position: relative;
  }

  .frame .p-texte {
    color: #303030;
    width: 100%;
    font-family: var(--text-legals-font-family);
    font-weight: 500;
    font-size: px;
    letter-spacing: 0;
    line-height: normal;
    position: relative;
  }
}

.white {
  color: #fff;
  text-decoration: none;
}