:root {
  --font-title: "Vesper Libre", serif;
  --font-text: "Raleway", sans-serif;
  --font-text-2: "Lato", sans-serif;
  --font-base: "Raleway", sans-serif;
  --font-weight-thin: 100;
  --font-weight-extra-light: 200;
  --font-weight-light: 300;
  --font-weight-normal: 400;
  --font-weight-medium: 500;
  --font-weight-semibold: 600;
  --font-weight-bold: 700;
  --font-weight-extra-bold: 800;
  --font-weight-black: 900;

  --surface: white;
  --background: #EEE7DF;
  --background-muted: #EEE7DF;
  --background-soft: #AF9173;

  --foreground: #003F87;
  --foreground-muted: hsl(210, 21%, 33%);

  --separator: hsl(210, 73%, 15%);

  --button-forground: white;
  --button-background: #003F87;
  --button-background-hover: #AF9173;

  --border: #003F87;
  --select-border: #cbd5e1;
  --select-border-hover: #003F87;
  --border-error: red;

  --size-60: 3.75rem;
  --size-56: 3.5rem;
  --size-50: 3.125rem;
  --size-46: 2.875rem;
  --size-40: 2.5rem;
  --size-36: 2.25rem;
  --size-32: 2rem;
  --size-30: 1.875rem;
  --size-28: 1.75rem;
  --size-26: 1.625rem;
  --size-24: 1.5rem;
  --size-22: 1.375rem;
  --size-21: 1.3125rem;
  --size-20: 1.25rem;
  --size-16: 1rem;
  --size-15: .9375rem;
  --size-14: .875rem;
  --size-12: .75rem;
  --size-10: .625rem;
  --size-8: .5rem;
  --size-6: .375rem;
  --size-5: .3125rem;
  --size-4: .25rem;
  --size-2: .125rem;
  --size-1: .0625rem;
  --size-0: 0;
  --durtion-fast: 140ms;
  --durtion-medium: 280ms;
  --durtion-slow: 350ms;
  --animation-style-1: ease-in-out;
  --animation-style-2: cubic-bezier(.77, 0, .175, 1);
  --animation-style-3: cubic-bezier(.19, 1, .22, 1);
}

body {
  overflow-x: hidden;
  font-family: var(--font-base);
  font-weight: var(--font-weight-normal);
  font-size: var(--size-16);
  line-height: var(--size-28);
  position: relative;
  text-rendering: optimizelegibility;
  -moz-osx-font-smoothing: grayscale;
  background-color: var(--background);
}

hr {
  display: block;
  margin-top: var(--size-46);
  margin-bottom: var(--size-46);
  width: 60%;
  border: 0;
  border-top: var(--size-2) solid var(--separator);
}

h1, h2, h3, h4, h5, h6 {
  color: var(--foreground);
  line-height: 1.2;
}

a {
  color: var(--foreground-muted);
}
a:hover {
  color: var(--foreground);
}

p {
  line-height: 1.5;
  color: var(--foreground-muted);
  max-width: 72ch;
  margin: 0;
}
p + p {
  margin-top: var(--size-16);
}

header {
  display: flex;
  flex-direction: column;
  align-items: center;
}
header img {
  display: block;
  margin-bottom: var(--size-16);
}
header h1 {
  display: block;
  max-width: 40ch;
  text-align: center;
  text-wrap: balance;
}
header p {
  text-align: center;
  text-wrap: balance;
}

.container {
  max-width: 960px;
  width: 100vw;
  padding: var(--size-32);
}

.card {
  position: relative;
  display: flex;
  align-items: flex-start;
  background-color: var(--surface);
  padding: var(--size-24);
  border-radius: var(--size-32);
  gap: var(--size-24);
}
.card .card-form {
  width: 100%;
}
.card .wrapper-details {
  width: 50%;
  min-width: 350px;
  background-color: var(--background);
  padding: var(--size-24);
  border-radius: var(--size-12);
  margin-left: auto;
}
@media (max-width: 780px) {
  .card .wrapper-details {
    width: 100%;
  }
}
.card .wrapper-details .table {
  width: 100%;
  border-collapse: collapse;
}
.card .wrapper-details .table tr:not(.total) {
  border-bottom: 8px solid transparent;
}
.card .wrapper-details .table tr td:last-child {
  text-align: right;
}
.card .wrapper-details .table tr.total {
  border-top: 24px solid transparent;
}
.card .wrapper-details .table tr.total td:first-child {
  font-weight: var(--font-weight-bold);
  font-size: var(--size-20);
}
.card .wrapper-details .table tr.total td:last-child {
  text-align: right;
  font-size: var(--size-24);
  font-weight: var(--font-weight-bold);
}
.card .credit-card {
  width: 60%;
  margin-inline: auto;
  margin-block: var(--size-46);
  border: var(--size-2) solid var(--select-border);
  padding: var(--size-24);
  border-radius: var(--size-16);
}

.button {
  cursor: pointer;
  padding: var(--size-14) var(--size-24);
  color: var(--button-forground);
  background-color: var(--button-background);
  border-radius: var(--size-8);
  border: 0;
  font-weight: var(--font-weight-bold);
  line-height: var(--size-22);
  box-shadow: var(--size-0) var(--size-0) var(--size-0) var(--size-0) var(--color-pink);
  transition: box-shadow var(--durtion-medium) var(--animation-style-1), background-color var(--durtion-medium) var(--animation-style-1);
}
.button:hover {
  box-shadow: var(--size-0) var(--size-0) var(--size-0) var(--size-2) var(--color-white), var(--size-0) var(--size-0) var(--size-0) var(--size-4) var(--button-shadow);
  background-color: var(--button-background-hover);
}

h3 {
  margin-bottom: var(--size-8);
}

form {
  width: 100%;
  display: flex;
  flex-direction: column;
  gap: var(--size-24);
}
form .compact {
  display: flex;
  flex-direction: column;
  gap: var(--size-8);
  margin-bottom: var(--size-16);
}
form .compact .compact {
  margin-bottom: 0;
}

.row-field {
  width: 100%;
  display: flex;
  align-items: center;
  gap: var(--size-16);
}
.row-field.type-button {
  justify-content: center;
}
.row-field .group-field {
  width: 100%;
  display: flex;
  flex-direction: column;
  gap: var(--size-2);
}
.row-field .group-field.field-error .field-control {
  box-shadow: inset 0 0 0 var(--size-1) var(--border-error);
}
.row-field .group-field.type-checkbox .field-label, .row-field .group-field.type-select .field-label {
  font-weight: var(--font-weight-bold);
  font-size: var(--size-18);
}
.row-field .group-field.type-select select {
  -moz-appearance: none;
  -webkit-appearance: none;
  appearance: none;
  background-image: url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIyNCIgaGVpZ2h0PSIyNCIgdmlld0JveD0iMCAwIDI0IDI0IiBmaWxsPSJub25lIiBzdHJva2U9ImN1cnJlbnRDb2xvciIgc3Ryb2tlLXdpZHRoPSIyIiBzdHJva2UtbGluZWNhcD0icm91bmQiIHN0cm9rZS1saW5lam9pbj0icm91bmQiIGNsYXNzPSJsdWNpZGUgbHVjaWRlLWNoZXZyb24tZG93biI+PHBhdGggZD0ibTYgOSA2IDYgNi02Ii8+PC9zdmc+");
  background-repeat: no-repeat, repeat;
  background-position: right var(--size-16) top 50%, 0 0;
  background-size: var(--size-16) auto, 100%;
}
.row-field .group-field.type-checkbox input {
  accent-color: var(--input-accent);
}
.row-field .group-field .field-label {
  font-size: var(--size-14);
}
.row-field .group-field .field-control {
  outline: none;
  width: 100%;
  min-height: var(--size-46);
  border-radius: var(--size-8);
  border: 0;
  box-shadow: inset 0 0 0 var(--size-1) var(--select-border);
  padding-inline: var(--size-16);
}
.row-field .group-field .field-control:focus {
  box-shadow: inset 0 0 0 var(--size-2) var(--select-border-hover);
}

.site-main {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 100dvh;
}

.site-footer {
  padding: var(--size-12) var(--size-0) var(--size-32);
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  font-size: var(--size-12);
}
.site-footer a {
  font-weight: 700;
}
.site-footer a, .site-footer p {
  color: var(--color-black);
}

.alert {
  display: table;
  padding: var(--size-12) var(--size-24);
  border-radius: var(--size-4);
  background-color: #fee2e2;
  color: #7f1d1d;
  margin: var(--size-0) auto var(--size-46);
}

.flex {
  display: flex;
}

.flex-col {
  flex-direction: column;
}

.items-center {
  align-items: center;
}

.justify-center {
  justify-content: center;
}

.poster-focal {
  border-radius: var(--size-12);
  border-bottom-left-radius: var(--size-32);
  border-bottom-right-radius: var(--size-32);
}

.logo-focal {
  width: 200px;
  height: 92px;
}

.logo-voir {
  width: 140px;
  height: 140px;
  aspect-ratio: 1;
  flex-shrink: 0;
}

.text-justify {
  text-align: justify;
}

.text-center {
  text-align: center;
}

/* Variables */
* {
  box-sizing: border-box;
}

.hidden {
  display: none !important;
}

#payment-message {
  color: rgb(105, 115, 134);
  font-size: 16px;
  line-height: 20px;
  padding-top: 12px;
  text-align: center;
}

#payment-element {
  margin-bottom: 24px;
}

/* Buttons and links */
button {
  background: var(--button-background);
  font-family: Arial, sans-serif;
  color: var(--button-forground);
  border-radius: 4px;
  border: 0;
  padding: 12px 16px;
  font-size: 16px;
  font-weight: 600;
  cursor: pointer;
  display: block;
  transition: all 0.2s ease;
  box-shadow: 0 4px 5.5px 0 rgba(0, 0, 0, 0.07);
  width: 100%;
}
button:not(:disabled):hover {
  background: var(--button-background-hover);
}
button:disabled {
  opacity: 0.5;
  cursor: default;
}

/* spinner/processing state, errors */
.spinner,
.spinner:before,
.spinner:after {
  border-radius: 50%;
}

.spinner {
  font-size: 22px;
  text-indent: -99999px;
  margin: 0px auto;
  position: relative;
  width: 20px;
  height: 20px;
  border-top: 2px solid transparent;
  border-bottom: 2px solid var(--color-white);
  border-left: 2px solid var(--color-white);
  border-right: 2px solid var(--color-white);
  animation: loading 2s infinite ease;
}

@-webkit-keyframes loading {
  0% {
    transform: rotate(0deg);
  }
  100% {
    transform: rotate(360deg);
  }
}
@keyframes loading {
  0% {
    transform: rotate(0deg);
  }
  100% {
    transform: rotate(360deg);
  }
}/*# sourceMappingURL=main.css.map */