/* PALETTE */
/* PRIMARY: Blue */
/* NEUTRAL: Gray */
/* ACCENT: Green */
/* ACCENT: Yellow */
/* ACCENT: Red */
/* BREAKPOINTS */
*, *:before, *:after {
  box-sizing: border-box;
}

html, body, div, span, object, iframe, figure, h1, h2, h3, h4, h5, h6, p, blockquote, pre, a, code, em, img, small, strike, strong, sub, sup, tt, b, u, i, ol, ul, li, fieldset, form, label, table, caption, tbody, tfoot, thead, tr, th, td, main, canvas, embed, footer, header, nav, section, video {
  margin: 0;
  padding: 0;
  border: 0;
  font-size: 100%;
  font: inherit;
  vertical-align: baseline;
  text-rendering: optimizeLegibility;
  -webkit-font-smoothing: antialiased;
  text-size-adjust: none;
}

footer, header, nav, section, main {
  display: block;
}

body {
  line-height: 1;
}

ol, ul {
  list-style: none;
}

blockquote, q {
  quotes: none;
}

blockquote:before, blockquote:after, q:before, q:after {
  content: "";
  content: none;
}

table {
  border-collapse: collapse;
  border-spacing: 0;
}

input {
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;
  border-radius: 0;
  outline: none;
}

a {
  text-decoration: none;
  color: inherit;
  border: none;
}
a:hover {
  color: #3183C8;
}

@font-face {
  font-family: "RifficFree-Bold";
  src: url("static_files/fonts/RifficFree-Bold.ttf");
}
@font-face {
  font-family: "SegoeUI";
  src: url("static_files/fonts/Segoe UI.woff");
}
@font-face {
  font-family: "SegoeUI-Bold";
  src: url("static_files/fonts/Segoe UI Bold.woff");
}
@font-face {
  font-family: "SegoeUI-Italic";
  src: url("static_files/fonts/Segoe UI Italic.woff");
}
@font-face {
  font-family: "SegoeUI-Bold-Italic";
  src: url("static_files/fonts/Segoe UI Bold Italic.woff");
}
h1, h2, h3, h4, h5, h6 {
  font-family: "SegoeUI", sans-serif !important;
}

p {
  font-family: "RifficFree-Bold", sans-serif !important;
}

.pill {
  display: inline-flex;
  align-items: center;
  gap: 8px;
}

a.pill {
  text-decoration: none;
  color: var(--pill-fg, inherit);
}

.pill.pill--genre, .pill.pill--mechanic, .pill.pill--attribute {
  padding: 4px 12px;
  border: 2px solid var(--pill-border, var(--pill-fg, transparent));
  border-radius: 8px;
  background: var(--pill-bg, #FFFFFF);
  color: var(--pill-fg, inherit);
  cursor: pointer;
}
.pill.pill--genre:hover, .pill.pill--mechanic:hover, .pill.pill--attribute:hover {
  filter: brightness(1.1);
}

.pill.pill--mechanic {
  cursor: default;
}

.pill__icon.genre_logo, .pill__icon.mechanic_logo {
  width: 36px;
  height: 36px;
  background: currentColor;
}
.pill__icon.genre_logo img, .pill__icon.mechanic_logo img {
  width: 100%;
  height: 100%;
  visibility: hidden;
}

.pill__label {
  font-size: 1.2em;
}

.pill.pill--attribute {
  background: #5F6B7A;
  color: #F8F9FA;
}

.pill__icon.attr_icon {
  width: 36px;
  height: 36px;
  filter: none;
  aspect-ratio: 1/1;
}

.pill.pill--tag {
  padding: 6px 12px;
  border-radius: 999px;
  background: #E1E7EC;
  color: #5F6B7A;
}
.pill.pill--tag .pill__icon {
  width: 20px;
  height: 20px;
  margin-right: 6px;
  opacity: 0.9;
}

.genre_checkbox {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 12px 15px;
}

.order-status {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
}

.order-status__dot {
  width: 14px;
  height: 14px;
  border-radius: 999px;
  display: inline-block;
  border: 2px solid rgba(0, 0, 0, 0.1);
}

.order-status__dot--en-attente-de-caution {
  background-color: #facc15;
}

.order-status__dot--en-cours {
  background-color: #22c55e;
}

.order-status__dot--verification-du-materiel,
.order-status__dot--verification-du-materiel-en-cours {
  background-color: #3b82f6;
}

.order-status__dot--passee {
  background-color: #9ca3af;
}

.order-status__label {
  font-size: 0.95em;
  font-weight: 500;
}

.btn, #game_amount_button, .submit_cancel .cancel {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.5em;
  font-weight: bold;
  font-size: 1.25rem;
  padding: 1rem 1.5rem;
  border-radius: 6px;
  border: none;
  cursor: pointer;
  transition: transform 0.1s ease, background-color 0.2s ease, color 0.2s ease, box-shadow 0.2s ease;
}
.btn:disabled, #game_amount_button:disabled, .submit_cancel .cancel:disabled {
  cursor: not-allowed;
}

.btn--primary, #game_amount_button {
  background-color: #F4CA64;
  color: #211934;
}
.btn--primary:disabled, #game_amount_button:disabled {
  background-color: #E1E7EC;
  color: #5F6B7A;
}

.btn--modifier {
  background: #2A9187;
  color: #F8F9FA;
}
.btn--modifier:disabled {
  background-color: #B8C4CE;
  color: #211934;
}
.btn--modifier:hover {
  color: #211934;
}
.btn--modifier:hover:disabled {
  background-color: #B8C4CE;
  color: #211934;
}

.btn--danger, .submit_cancel .cancel {
  background: #DC3030;
  color: #FFFFFF;
}
.btn--danger:disabled, .submit_cancel .cancel:disabled {
  background-color: #B8C4CE;
  color: #211934;
}
.btn--danger:hover, .submit_cancel .cancel:hover {
  background: rgb(222.2128099174, 61.0871900826, 61.0871900826);
  color: #211934;
}
.btn--danger:hover:disabled, .submit_cancel .cancel:hover:disabled {
  background-color: #B8C4CE;
  color: #211934;
}

#game_amount_button {
  border-radius: 6px;
  border-top-left-radius: 0;
  border-bottom-left-radius: 0;
}
#game_amount_button .btn__icon {
  display: none;
}
#game_amount_button.is-added {
  background: #3CAEA3;
}
#game_amount_button.is-added > #text_price {
  color: #FFFFFF;
}
#game_amount_button.is-added .btn__icon::before, #game_amount_button.is-added .btn__icon::after {
  border-color: #FFFFFF;
  background: #FFFFFF;
}
#game_amount_button.is-loading {
  opacity: 0.85;
  pointer-events: none;
}
#game_amount_button:disabled {
  color: #211934;
  border-radius: 10px;
  border-top-left-radius: 0;
  border-bottom-left-radius: 0;
  background: #E1E7EC;
}
#game_amount_button:disabled > #text_price {
  color: #5F6B7A;
}
#game_amount_button:disabled .btn__icon {
  opacity: 0.5;
}

@media (prefers-reduced-motion: reduce) {
  #game_amount_button {
    transition: none;
  }
  #game_amount_button::before {
    transition: none;
  }
  #game_amount_button .btn__icon {
    transition: none;
  }
}
.mini_total {
  margin: 0.25em 0;
  color: #5F6B7A;
  font-size: 0.95em;
}

.form-group {
  /* Useful for &:focus + label structure */
  display: flex;
  flex-direction: row-reverse;
  justify-content: flex-end;
  margin: 1em;
}
.form-group a {
  color: #CAA53D;
}
.form-group a:hover {
  color: #3183C8;
}
.form-group {
  /* make appearance for checkbox and radio button the same as for */
}
.form-group input[type=checkbox], .form-group input[type=radio] {
  -webkit-appearance: auto;
  -moz-appearance: auto;
  appearance: auto;
}
.form-group input {
  flex: 1;
}
.form-group p, .form-group input {
  padding-left: 10px;
  font-size: 1.5em;
  color: #211934;
  border: none;
  border-bottom: 2px solid #CFD6DE;
  transition: all 0.2s ease-in-out;
  text-align: right;
}
.form-group p:focus, .form-group input:focus {
  border-bottom-color: #2368A2;
  transform: translateX(0.5em);
}
.form-group p:has(+ input:focus), .form-group input:has(+ input:focus) {
  transform: translateX(1em);
}
.form-group p:focus ~ label, .form-group input:focus ~ label {
  color: #2368A2;
}
.form-group p:focus + label, .form-group input:focus + label {
  transform: translateX(-0.5em);
}
.form-group label {
  font-size: 1.5em;
  color: #5F6B7A;
  border-bottom: 2px solid #CFD6DE;
  transition: all 0.2s ease-in-out;
}

.form__group {
  display: flex;
  flex-direction: row-reverse;
  justify-content: flex-end;
  margin: 1em;
}

.form__control {
  padding-left: 10px;
  font-size: 1.5em;
  color: #211934;
  border: none;
  border-bottom: 2px solid #CFD6DE;
  transition: all 0.2s ease-in-out;
  text-align: right;
}
.form__control:focus {
  border-bottom-color: #2368A2;
  transform: translateX(0.5em);
}

.form__label {
  font-size: 1.5em;
  color: #5F6B7A;
  border-bottom: 2px solid #CFD6DE;
  transition: all 0.2s ease-in-out;
}

.numeric_input input {
  text-align: center;
}

.checkbox {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
}

#messages.toast-messages {
  position: fixed;
  top: 16px;
  left: 50%;
  transform: translateX(-50%);
  width: min(92vw, 560px);
  z-index: 2000;
}
#messages.toast-messages .alert {
  display: flex;
  align-items: center;
  gap: 10px;
  margin: 8px 0;
  padding: 12px 16px;
  border-radius: 10px;
  border: 2px solid #E1E7EC;
  background: #FFFFFF;
  box-shadow: 0 12px 30px rgba(0, 0, 0, 0.22);
  color: #211934;
}
#messages.toast-messages .alert--success, #messages.toast-messages .alert.success {
  background: #E7FFFE;
  color: #1B655E;
  border-color: #3CAEA3;
}
#messages.toast-messages .alert--info, #messages.toast-messages .alert.info {
  background: #EFF8FF;
  color: #1A4971;
  border-color: #3183C8;
}
#messages.toast-messages .alert--warning, #messages.toast-messages .alert.warning {
  background: #FFFCF4;
  color: #8C6D1F;
  border-color: #F4CA64;
}
#messages.toast-messages .alert--error, #messages.toast-messages .alert.error {
  background: #FCE8E8;
  color: #891B1B;
  border-color: #DC3030;
}
#messages.toast-messages .alert .alert__text {
  flex: 1 1 auto;
}
#messages.toast-messages .alert .alert__close {
  -webkit-appearance: none;
  appearance: none;
  border: none;
  background: transparent;
  color: currentColor;
  width: 32px;
  height: 32px;
  line-height: 1;
  padding: 0;
  margin: 0 0 0 auto;
  cursor: pointer;
  opacity: 0.7;
  border-radius: 6px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  transition: transform 0.12s ease, opacity 0.12s ease, background-color 0.12s ease;
}
#messages.toast-messages .alert .alert__close:hover {
  opacity: 1;
  transform: scale(1.06);
}
#messages.toast-messages .alert .alert__close:focus-visible {
  outline: 2px solid #3183C8;
  outline-offset: 2px;
}
#messages.toast-messages .alert .alert__close .icon-close {
  width: 18px;
  height: 18px;
  pointer-events: none;
}

@keyframes toast-out {
  from {
    opacity: 1;
    transform: translateY(0);
  }
  to {
    opacity: 0;
    transform: translateY(-8px);
  }
}
.card, .game-list .card_game {
  background: #FFFFFF;
  position: relative;
}

.card__overlay {
  position: absolute;
  inset: 0;
  opacity: 0;
}

.card_game_reveal * {
  transition: all 0.5s ease-in-out !important;
}

.card:hover > .card__overlay, .game-list .card_game:hover > .card__overlay {
  opacity: 1;
}

table {
  width: 100%;
  border-collapse: separate;
  border-spacing: 0;
  border-radius: 10px;
  border: 2px solid #B8C4CE;
  overflow: hidden;
}
table thead {
  height: 48px;
}
table th, table td {
  text-align: center;
  vertical-align: middle;
  font-size: 1.25rem;
  padding: 0 0.25rem;
}
table th {
  padding: 0.5em 0;
  background-color: #203D54;
  font-weight: bold;
  font-size: 1.5rem;
  letter-spacing: 0.5px;
  color: #FFFFFF;
}
table img {
  padding: 8px 0;
  max-height: 140px;
}
table tr:nth-of-type(2n+1) {
  background-color: #FFFFFF;
}
table tr:nth-of-type(2n) {
  background-color: #E1E7EC;
}

.table__image, .game_img_grid {
  max-height: 160px;
  border-radius: 10px;
}

.ribbon {
  display: inline-block;
  position: absolute;
  top: 1rem;
  right: 0;
  z-index: 10;
  display: flex;
  flex-direction: column;
  gap: 0.35rem;
  font-size: 1.5rem;
}
.ribbon.ribbon--status {
  background: none;
}
.ribbon.ribbon--image .ribbon__label {
  border-radius: 1.25rem 0 0 1.25rem;
  padding: 0.4rem 1.25rem 0.4rem 1.8rem;
  font-weight: bold;
  position: relative;
  clip-path: polygon(0 50%, 1rem 0, 100% 0, 100% 100%, 1rem 100%);
}

.ribbon__label--rating {
  background-color: #F4CA64;
  color: #211934;
}

.ribbon__label--promo {
  background-color: #DC3030;
  color: #F8F9FA;
}

.ribbon__label--new {
  background-color: #2A9187;
  color: #F8F9FA;
}

header,
.site-header {
  display: flex;
  flex-flow: row wrap;
  align-items: center;
  justify-content: space-between;
  gap: 0 1em;
  height: fit-content;
  width: 100dvw;
  padding: 6px 24px;
  font-size: 1.25em;
  background-color: #FFFFFF;
  border-bottom-right-radius: 10px;
  border-bottom-left-radius: 10px;
  border-left: 3px solid #E1E7EC;
  border-right: 3px solid #E1E7EC;
  border-bottom: 3px solid #E1E7EC;
}
@media (max-width: 1288px) {
  header,
  .site-header {
    justify-content: center;
  }
  header .header-search,
  .site-header .header-search {
    order: 3;
    flex: 0 0 100%;
  }
}

#logo,
.site-header__logo {
  transition: transform 0.1s ease-out;
}

.header-search {
  position: relative;
  flex: 1 1 420px;
  max-width: 640px;
  display: flex;
  align-items: center;
  justify-content: center;
}
.header-search__form {
  position: relative;
  width: 100%;
  display: flex;
  align-items: center;
  gap: 8px;
}
.header-search__icon {
  position: absolute;
  left: 12px;
  display: inline-grid;
  place-items: center;
  color: #8895A7;
}
.header-search__input {
  -webkit-appearance: none;
  appearance: none;
  width: 100%;
  padding: 10px 40px 10px 40px;
  font-size: 1.25rem;
  color: #211934;
  background: #FFFFFF;
  border: 2px solid #E1E7EC;
  border-radius: 20px;
  outline: none;
  transition: border-color 0.2s ease, box-shadow 0.2s ease;
}
.header-search__input::placeholder {
  color: #B8C4CE;
}
.header-search__input:focus {
  border-color: #3183C8;
  box-shadow: 0 0 0 3px rgba(49, 131, 200, 0.25);
}
.header-search__spinner {
  position: absolute;
  right: 12px;
  width: 20px;
  height: 20px;
  opacity: 0.9;
  display: none;
}

#header-search-preview {
  width: 100%;
  position: relative;
  z-index: 500;
}

.header-search-box {
  position: absolute;
  inset-inline: 0;
  margin-inline: auto;
  top: 4px;
  width: min(900px, 92dvw);
  background: #FFFFFF;
  border: 2px solid #E1E7EC;
  border-top: none;
  border-bottom-left-radius: 20px;
  border-bottom-right-radius: 20px;
  box-shadow: 0 8px 16px rgba(0, 0, 0, 0.18);
  overflow: hidden;
}
@media (max-width: 768px) {
  .header-search-box {
    width: 100%;
    border-left: none;
    border-right: none;
    border-radius: 0 0 20px 20px;
  }
}

.header-search__list {
  list-style: none;
  margin: 0;
  padding: 6px;
  max-height: 60dvh;
  overflow-y: auto;
}

.header-search__item {
  margin: 0;
  margin-bottom: 4px;
}

.header-search__link {
  display: grid;
  grid-template-columns: 56px 1fr;
  gap: 12px;
  align-items: center;
  color: #211934;
  text-decoration: none;
  border-radius: 6px;
  transition: background-color 0.12s ease, transform 0.12s ease;
}
.header-search__link:hover, .header-search__link:focus-visible {
  background: #F8F9FA;
  outline: none;
}

.header-search__link[aria-disabled=true] {
  color: #211934;
  text-decoration: none;
}
.header-search__link[aria-disabled=true]:hover, .header-search__link[aria-disabled=true]:focus-visible {
  color: #211934;
  text-decoration: none;
}

.header-search__thumb {
  width: 56px;
  height: 56px;
  border-radius: 6px;
  overflow: hidden;
  background: #F8F9FA;
  border: 1px solid #E1E7EC;
  display: inline-grid;
  place-items: center;
}
.header-search__thumb[aria-hidden=true] {
  background: none;
  border: 0px solid #E1E7EC;
}
.header-search__thumb img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.header-search__meta {
  display: grid;
  grid-template-columns: 1fr repeat(4, 80px) auto;
  align-items: center;
  column-gap: 0.5rem;
  padding: 0;
  margin: 0;
  list-style: none;
  font-size: 1.25rem;
}
.header-search__meta li {
  justify-self: center;
  display: inline-block;
}
.header-search__meta .pill__icon.attr_icon {
  filter: invert(0.8);
}
.header-search__meta .pill.pill--attribute {
  background: rgba(95, 107, 122, 0);
}
.header-search__meta .header-search__title {
  font-size: 1.25rem;
  font-weight: 700;
  color: #2368A2;
  justify-self: left;
}
.header-search__meta .header-search__title[aria-disabled=true] {
  color: #211934;
  font-size: 1.25rem;
  font-weight: 700;
}

.header-search__price {
  font-size: 1.25rem;
  font-weight: 700;
  color: #211934;
  white-space: nowrap;
  justify-self: end;
}

.header-search__see-all .header-search__link {
  grid-template-columns: 1fr;
  justify-content: center;
  text-align: center;
  font-weight: 700;
}

.site-header:has(#header-search-preview .header-search-box) .header-search__input {
  border-bottom-left-radius: 0;
  border-bottom-right-radius: 0;
  border-bottom-color: transparent;
}

.header-search__icon::after {
  content: "";
  position: absolute;
  inset: -8px;
  pointer-events: none;
}

.site-nav {
  flex: 1 1 600px;
  width: fit-content;
}

nav > ul,
.site-nav > .site-nav__list {
  display: flex;
  flex-flow: row wrap;
  justify-content: center;
  align-items: center;
  gap: 12px 16px;
  margin: 0.5em;
}

nav > ul > *,
.site-nav__item {
  display: flex;
  align-items: center;
}

.site-nav__item {
  transition: transform 0.2s ease-out;
}

.site-nav__item form {
  display: contents;
}

nav > ul a,
.site-nav__link {
  all: unset;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  color: #3183C8;
  cursor: pointer;
  position: relative;
  outline: revert;
}
nav > ul a:after,
.site-nav__link:after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: -8px;
  height: 2px;
  background: #2368A2;
  transform: scaleX(0);
  transform-origin: right;
  transition: transform 0.2s ease-out;
}
nav > ul a:hover, nav > ul a:focus-visible,
.site-nav__link:hover,
.site-nav__link:focus-visible {
  color: #2368A2;
  text-decoration: none;
}
nav > ul a:hover:after, nav > ul a:focus-visible:after,
.site-nav__link:hover:after,
.site-nav__link:focus-visible:after {
  transform: scaleX(1);
  transform-origin: left;
}

.site-nav__icon {
  display: inline-grid;
  place-items: center;
  line-height: 1;
}

.nav-icon,
.site-nav__icon > svg {
  width: 1.35em;
  height: 1.35em;
  display: block;
  stroke: currentColor;
  fill: none;
  stroke-width: 2;
  vector-effect: non-scaling-stroke;
  font-size: 1.25em;
}

.nav-icon * {
  stroke-linecap: round;
  stroke-linejoin: round;
}

.site-nav__link.test_disconnection svg {
  width: 1.35em;
  height: 1.35em;
}

.site-nav__count {
  color: #DC3030;
  font-weight: 600;
}

.site-nav__label, .site-nav__count {
  white-space: nowrap;
  font-size: 1.5em;
}

#nav_authentication {
  display: flex;
  flex-wrap: wrap;
  flex-direction: row;
  align-items: center;
  justify-content: right;
  gap: 16px;
  margin-left: 42px;
}

footer,
.site-footer {
  height: fit-content;
  margin-top: auto;
  text-align: center;
}

footer li,
.site-footer__item {
  display: inline-block;
  padding: 0 20px;
}

footer a,
.site-footer__link {
  color: #5F6B7A;
  text-decoration: underline;
}
footer a:hover,
.site-footer__link:hover {
  color: #E1E7EC;
}

body {
  min-height: 100vh;
  min-height: 100dvh;
  background-image: url(../images/background.svg);
  background-size: 80%;
  background-repeat: repeat;
  background-position: top;
  padding: 0 10%;
  display: flex;
  flex-direction: column;
  align-items: center;
  color: #211934;
  font-size: 1rem;
}
body::before {
  content: "";
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: -1;
}

::-webkit-scrollbar {
  width: 4px;
  height: 4px;
}

::-webkit-scrollbar-thumb {
  background: #888;
}

::-webkit-scrollbar-thumb:hover {
  background: #555;
}

main {
  flex: 1 1 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: flex-start;
  gap: 1.25rem;
}

h1, h2, h3, h4, h5, h6 {
  color: #5F6B7A;
  margin-bottom: 1rem;
}

h1 {
  font-size: 2rem;
  font-weight: 700;
  text-align: center;
  margin-bottom: 2rem;
}

h2 {
  font-size: 1.5rem;
  font-weight: 700;
  text-align: center;
  margin-bottom: 1.5rem;
}

p {
  color: #211934;
  text-align: center;
}

/* Chrome, Safari, Edge, Opera */
input::-webkit-outer-spin-button,
input::-webkit-inner-spin-button {
  -webkit-appearance: none;
  margin: 0;
}

/* Firefox */
input[type=number] {
  -moz-appearance: textfield;
}

textarea, select, input, button {
  outline: none;
}

input:-webkit-autofill,
input:-webkit-autofill:hover,
input:-webkit-autofill:focus,
input:-webkit-autofill:active {
  -webkit-background-clip: text;
  /* -webkit-text-fill-color: $gray8 */
  transition: background-color 5000s ease-in-out 0s;
  box-shadow: inset 0 0 20px 20px #FFFFFF;
}

.custom_block {
  margin: 2rem;
  padding: 2rem;
  background: #FFFFFF;
  border-radius: 10px;
  border: 2px solid #B8C4CE;
  font-size: 1.25rem;
}

.bienvenu {
  width: 100%;
  font-size: 2em;
  height: fit-content;
  background-color: #FFFFFF;
  border-radius: 10px;
  border: 2px solid #E1E7EC;
}
.bienvenu .flex-grow {
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: space-evenly;
  flex-wrap: wrap;
}
.bienvenu .flex-grow div {
  flex: 1 1 0;
  min-width: 250px;
}
.bienvenu .flex-grow img {
  flex: 0 0 900px;
  max-width: 100%;
  min-width: 300px;
  padding: 20px 0;
}
.bienvenu p {
  text-wrap: balance;
  font-size: 2rem;
  color: #2368A2;
  line-height: 1.25em;
}

.clear {
  clear: both;
}

.bold {
  font-weight: bold;
}

.italic {
  font-style: italic;
}

.underline {
  text-decoration: underline;
}

.white_bg {
  background-color: #FFFFFF;
  border-radius: 10px;
  border: 2px solid #E1E7EC;
}

.pagination {
  width: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
}

.links_group {
  margin-top: 1.5em;
}
.links_group li {
  margin: 0.5em 0;
  text-decoration: underline;
}

.hide {
  -moz-transition: height 0.5s ease-in-out;
  -ms-transition: height 0.5s ease-in-out;
  -o-transition: height 0.5s ease-in-out;
  -webkit-transition: height 0.5s ease-in-out;
  transition: height 0.5s ease-in-out;
  height: 0;
  overflow: hidden;
  visibility: visible;
  width: 100%;
}
.hide .expanded_search_bar {
  padding: 0;
}
.hide .expanded_search_bar table {
  margin: 0;
}
.hide * {
  -moz-transition: height 0.5s ease-in-out, visibility 0.5s ease-in-out;
  -ms-transition: height 0.5s ease-in-out, visibility 0.5s ease-in-out;
  -o-transition: height 0.5s ease-in-out, visibility 0.5s ease-in-out;
  -webkit-transition: height 0.5s ease-in-out, visibility 0.5s ease-in-out;
  transition: height 0.5s ease-in-out, visibility 0.5s ease-in-out;
}

.chevron-icon {
  transition: transform 0.25s ease-out;
  color: #3183C8;
  transform: scale(1.5) translateY(2px);
}

.coupon:has(.hide:not(.hidden)) .chevron-icon,
.booking:has(+ .hide:not(.hidden)) .chevron-icon {
  transform: rotate(180deg) scale(1.5);
}
.coupon:has(.hide:not(.hidden)) .chevron-icon:hover,
.booking:has(+ .hide:not(.hidden)) .chevron-icon:hover {
  transform: rotate(180deg) scale(2);
}

.plus_minus {
  position: relative;
  width: 30px;
  height: 30px;
}
.plus_minus:before, .plus_minus:after {
  content: "";
  position: absolute;
  background-color: #3183C8;
  transition: transform 0.25s ease-out;
}
.plus_minus {
  /* Vertical line */
}
.plus_minus:before {
  top: 0;
  left: 50%;
  width: 4px;
  height: 100%;
  margin-left: -2px;
}
.plus_minus {
  /* horizontal line */
}
.plus_minus:after {
  top: 50%;
  left: 0;
  width: 100%;
  height: 4px;
  margin-top: -2px;
}
.plus_minus:hover {
  cursor: pointer;
}
.plus_minus:hover:before {
  transform: rotate(90deg);
}
.plus_minus:hover:after {
  transform: rotate(180deg);
}

#url_cgv {
  text-decoration: underline;
  color: #2368A2;
}
#url_cgv:hover {
  color: #63A2D8;
}

@media (max-width: 1000px) {
  body {
    font-size: 1.5em;
  }
  body .custom_block {
    margin: 1em;
    padding: 1em;
  }
}
.u-flex {
  display: flex;
}

.u-flex-center {
  display: flex;
  align-items: center;
  justify-content: center;
}

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

.u-sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

.u-m-0 {
  margin: 0px;
}

.u-mt-0 {
  margin-top: 0px;
}

.u-mr-0 {
  margin-right: 0px;
}

.u-mb-0 {
  margin-bottom: 0px;
}

.u-ml-0 {
  margin-left: 0px;
}

.u-mx-0 {
  margin-left: 0px;
  margin-right: 0px;
}

.u-my-0 {
  margin-top: 0px;
  margin-bottom: 0px;
}

.u-p-0 {
  padding: 0px;
}

.u-pt-0 {
  padding-top: 0px;
}

.u-pr-0 {
  padding-right: 0px;
}

.u-pb-0 {
  padding-bottom: 0px;
}

.u-pl-0 {
  padding-left: 0px;
}

.u-px-0 {
  padding-left: 0px;
  padding-right: 0px;
}

.u-py-0 {
  padding-top: 0px;
  padding-bottom: 0px;
}

.u-m-1 {
  margin: 4px;
}

.u-mt-1 {
  margin-top: 4px;
}

.u-mr-1 {
  margin-right: 4px;
}

.u-mb-1 {
  margin-bottom: 4px;
}

.u-ml-1 {
  margin-left: 4px;
}

.u-mx-1 {
  margin-left: 4px;
  margin-right: 4px;
}

.u-my-1 {
  margin-top: 4px;
  margin-bottom: 4px;
}

.u-p-1 {
  padding: 4px;
}

.u-pt-1 {
  padding-top: 4px;
}

.u-pr-1 {
  padding-right: 4px;
}

.u-pb-1 {
  padding-bottom: 4px;
}

.u-pl-1 {
  padding-left: 4px;
}

.u-px-1 {
  padding-left: 4px;
  padding-right: 4px;
}

.u-py-1 {
  padding-top: 4px;
  padding-bottom: 4px;
}

.u-m-2 {
  margin: 8px;
}

.u-mt-2 {
  margin-top: 8px;
}

.u-mr-2 {
  margin-right: 8px;
}

.u-mb-2 {
  margin-bottom: 8px;
}

.u-ml-2 {
  margin-left: 8px;
}

.u-mx-2 {
  margin-left: 8px;
  margin-right: 8px;
}

.u-my-2 {
  margin-top: 8px;
  margin-bottom: 8px;
}

.u-p-2 {
  padding: 8px;
}

.u-pt-2 {
  padding-top: 8px;
}

.u-pr-2 {
  padding-right: 8px;
}

.u-pb-2 {
  padding-bottom: 8px;
}

.u-pl-2 {
  padding-left: 8px;
}

.u-px-2 {
  padding-left: 8px;
  padding-right: 8px;
}

.u-py-2 {
  padding-top: 8px;
  padding-bottom: 8px;
}

.u-m-3 {
  margin: 12px;
}

.u-mt-3 {
  margin-top: 12px;
}

.u-mr-3 {
  margin-right: 12px;
}

.u-mb-3 {
  margin-bottom: 12px;
}

.u-ml-3 {
  margin-left: 12px;
}

.u-mx-3 {
  margin-left: 12px;
  margin-right: 12px;
}

.u-my-3 {
  margin-top: 12px;
  margin-bottom: 12px;
}

.u-p-3 {
  padding: 12px;
}

.u-pt-3 {
  padding-top: 12px;
}

.u-pr-3 {
  padding-right: 12px;
}

.u-pb-3 {
  padding-bottom: 12px;
}

.u-pl-3 {
  padding-left: 12px;
}

.u-px-3 {
  padding-left: 12px;
  padding-right: 12px;
}

.u-py-3 {
  padding-top: 12px;
  padding-bottom: 12px;
}

.u-m-4 {
  margin: 16px;
}

.u-mt-4 {
  margin-top: 16px;
}

.u-mr-4 {
  margin-right: 16px;
}

.u-mb-4 {
  margin-bottom: 16px;
}

.u-ml-4 {
  margin-left: 16px;
}

.u-mx-4 {
  margin-left: 16px;
  margin-right: 16px;
}

.u-my-4 {
  margin-top: 16px;
  margin-bottom: 16px;
}

.u-p-4 {
  padding: 16px;
}

.u-pt-4 {
  padding-top: 16px;
}

.u-pr-4 {
  padding-right: 16px;
}

.u-pb-4 {
  padding-bottom: 16px;
}

.u-pl-4 {
  padding-left: 16px;
}

.u-px-4 {
  padding-left: 16px;
  padding-right: 16px;
}

.u-py-4 {
  padding-top: 16px;
  padding-bottom: 16px;
}

.u-m-5 {
  margin: 20px;
}

.u-mt-5 {
  margin-top: 20px;
}

.u-mr-5 {
  margin-right: 20px;
}

.u-mb-5 {
  margin-bottom: 20px;
}

.u-ml-5 {
  margin-left: 20px;
}

.u-mx-5 {
  margin-left: 20px;
  margin-right: 20px;
}

.u-my-5 {
  margin-top: 20px;
  margin-bottom: 20px;
}

.u-p-5 {
  padding: 20px;
}

.u-pt-5 {
  padding-top: 20px;
}

.u-pr-5 {
  padding-right: 20px;
}

.u-pb-5 {
  padding-bottom: 20px;
}

.u-pl-5 {
  padding-left: 20px;
}

.u-px-5 {
  padding-left: 20px;
  padding-right: 20px;
}

.u-py-5 {
  padding-top: 20px;
  padding-bottom: 20px;
}

.u-m-6 {
  margin: 24px;
}

.u-mt-6 {
  margin-top: 24px;
}

.u-mr-6 {
  margin-right: 24px;
}

.u-mb-6 {
  margin-bottom: 24px;
}

.u-ml-6 {
  margin-left: 24px;
}

.u-mx-6 {
  margin-left: 24px;
  margin-right: 24px;
}

.u-my-6 {
  margin-top: 24px;
  margin-bottom: 24px;
}

.u-p-6 {
  padding: 24px;
}

.u-pt-6 {
  padding-top: 24px;
}

.u-pr-6 {
  padding-right: 24px;
}

.u-pb-6 {
  padding-bottom: 24px;
}

.u-pl-6 {
  padding-left: 24px;
}

.u-px-6 {
  padding-left: 24px;
  padding-right: 24px;
}

.u-py-6 {
  padding-top: 24px;
  padding-bottom: 24px;
}

.u-flex {
  display: flex;
}

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

.u-justify-between {
  justify-content: space-between;
}

.u-gap-0 {
  gap: 0;
}

.u-gap-1 {
  gap: 4px;
}

.u-gap-2 {
  gap: 8px;
}

.u-gap-3 {
  gap: 12px;
}

.u-gap-4 {
  gap: 16px;
}

/* PRIMARY: Blue */
.bg_blue1 {
  background-color: #203D54;
}

.bg_blue2 {
  background-color: #1A4971;
}

.bg_blue3 {
  background-color: #2368A2;
}

.bg_blue4 {
  background-color: #3183C8;
}

.bg_blue5 {
  background-color: #63A2D8;
}

.bg_blue6 {
  background-color: #AAD4F5;
}

.bg_blue7 {
  background-color: #EFF8FF;
}

/* NEUTRAL: Gray */
.bg_gray1 {
  background-color: #211934;
}

.bg_gray2 {
  background-color: #5F6B7A;
}

.bg_gray3 {
  background-color: #8895A7;
}

.bg_gray4 {
  background-color: #B8C4CE;
}

.bg_gray5 {
  background-color: #CFD6DE;
}

.bg_gray6 {
  background-color: #E1E7EC;
}

.bg_gray7 {
  background-color: #F8F9FA;
}

.bg_gray8 {
  background-color: #FFFFFF;
}

/* ACCENT: Green */
.bg_green1 {
  background-color: #124544;
}

.bg_green2 {
  background-color: #1B655E;
}

.bg_green3 {
  background-color: #2A9187;
}

.bg_green4 {
  background-color: #3CAEA3;
}

.bg_green5 {
  background-color: #6ED7D3;
}

.bg_green6 {
  background-color: #A8EEEB;
}

.bg_green7 {
  background-color: #E7FFFE;
}

/* ACCENT: Yellow */
.bg_yellow1 {
  background-color: #5C4813;
}

.bg_yellow2 {
  background-color: #8C6D1F;
}

.bg_yellow3 {
  background-color: #CAA53D;
}

.bg_yellow4 {
  background-color: #F4CA64;
}

.bg_yellow5 {
  background-color: #FAE29F;
}

.bg_yellow6 {
  background-color: #FDF3D7;
}

.bg_yellow7 {
  background-color: #FFFCF4;
}

/* ACCENT: Red */
.bg_red1 {
  background-color: #611818;
}

.bg_red2 {
  background-color: #891B1B;
}

.bg_red3 {
  background-color: #B82020;
}

.bg_red4 {
  background-color: #DC3030;
}

.bg_red5 {
  background-color: #E46464;
}

.bg_red6 {
  background-color: #F5AAAA;
}

.bg_red7 {
  background-color: #FCE8E8;
}

/* PRIMARYcolor: Blue */
.blue1 {
  color: #203D54;
}

.blue2 {
  color: #1A4971;
}

.blue3 {
  color: #2368A2;
}

.blue4 {
  color: #3183C8;
}

.blue5 {
  color: #63A2D8;
}

.blue6 {
  color: #AAD4F5;
}

.blue7 {
  color: #EFF8FF;
}

/* NEUTRALcolor: Gray */
.gray1 {
  color: #211934;
}

.gray2 {
  color: #5F6B7A;
}

.gray3 {
  color: #8895A7;
}

.gray4 {
  color: #B8C4CE;
}

.gray5 {
  color: #CFD6DE;
}

.gray6 {
  color: #E1E7EC;
}

.gray7 {
  color: #F8F9FA;
}

.gray8 {
  color: #FFFFFF;
}

/* ACCENTcolor: Green */
.green1 {
  color: #124544;
}

.green2 {
  color: #1B655E;
}

.green3 {
  color: #2A9187;
}

.green4 {
  color: #3CAEA3;
}

.green5 {
  color: #6ED7D3;
}

.green6 {
  color: #A8EEEB;
}

.green7 {
  color: #E7FFFE;
}

/* ACCENTcolor: Yellow */
.yellow1 {
  color: #5C4813;
}

.yellow2 {
  color: #8C6D1F;
}

.yellow3 {
  color: #CAA53D;
}

.yellow4 {
  color: #F4CA64;
}

.yellow5 {
  color: #FAE29F;
}

.yellow6 {
  color: #FDF3D7;
}

.yellow7 {
  color: #FFFCF4;
}

/* ACCENTcolor: Red */
.red1 {
  color: #611818;
}

.red2 {
  color: #891B1B;
}

.red3 {
  color: #B82020;
}

.red4 {
  color: #DC3030;
}

.red5 {
  color: #E46464;
}

.red6 {
  color: #F5AAAA;
}

.red7 {
  color: #FCE8E8;
}

.small {
  font-size: 0.875rem;
}

.medium {
  font-size: 1rem;
}

.large {
  font-size: 1.25rem;
}

.xlarge {
  font-size: 1.5rem;
}

.game_list_container {
  width: 100%;
  background: #FFFFFF;
}

.game-list {
  margin: 14px 0;
  display: flex;
  flex-flow: row wrap;
  justify-content: space-evenly;
  font-size: 1.25em;
}
.game-list .card_game_reveal {
  opacity: 0;
}

.game-list .card_game {
  width: calc(200px + 5vw);
  min-width: 400px;
  max-height: 400px;
  margin: 20px;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  align-items: center;
  align-content: center;
  text-align: center;
  transition: max-height 0.2s ease-in;
  position: relative;
  z-index: 1;
}
.game-list .card_game:hover {
  max-height: 1200px;
}

.game-list .card_game::after {
  content: "";
  position: absolute;
  border-radius: 20px;
  inset: 0;
  opacity: 0;
  transition: opacity 0.3s ease;
}

.game-list .card_game:hover::after {
  opacity: 1;
}

.game-list .card_game h1 {
  margin-top: 0.5em;
  color: #FFFFFF;
  font-size: 2.25rem;
  font-weight: 700;
  text-align: center;
  text-decoration-color: #E1E7EC;
}

.game-list .card_game .card_float {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  align-items: center;
  border-radius: 10px;
  width: 100%;
  height: 100%;
  position: absolute;
  bottom: 0;
  right: 0;
  opacity: 0;
  background: rgba(0, 0, 34, 0.6666666667);
  -webkit-backdrop-filter: blur(5px);
  backdrop-filter: blur(5px);
  transition: all 0.2s ease-in-out;
  z-index: 50;
  inset: 0;
}

.game-list .card_game:hover .card_float {
  opacity: 1;
}

.game-list .card_game .card_game_information {
  position: absolute;
  top: 0;
  right: 0;
}

.game-list .card_game .game_genres,
.game-list .card_game .game_attributes {
  height: fit-content;
  width: 100%;
  display: flex;
  justify-content: space-around;
  align-content: space-around;
  align-items: center;
  flex-wrap: wrap;
  color: black;
  font-size: 1.25em;
}

.game-list .card_game .game_genres p,
.game-list .card_game .game_attributes p {
  margin: 0;
  font-size: 1em;
  color: white;
  font-weight: bold;
  white-space: nowrap;
}

.game-list .card_game .game_genres div,
.game-list .card_game .game_attributes div {
  width: calc(20px + 10%);
  max-height: 80px;
  max-width: 80px;
  display: flex;
  justify-content: center;
  flex-direction: column;
  flex-wrap: nowrap;
  align-items: center;
}

.game-list .card_game .game_img {
  width: 100%;
}

.game-list .card_game .game_img img {
  width: 100%;
  max-width: 100%;
  border-radius: 10px;
  border: 1px solid #5F6B7A;
}

.game-list .price {
  width: fit-content;
  font-weight: 700;
  font-size: 2rem;
  padding: 0.25em 0.5em;
  border-radius: 10px 10px 0 0;
  background-color: #FFFFFF;
}

.game-list .price p {
  margin: 0;
  color: #5F6B7A;
}

.card-game__image {
  overflow: hidden;
  width: 100%;
}

.card-game__overlay {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  align-items: center;
  border-radius: 10px;
  width: 100%;
  height: 100%;
  position: absolute;
  bottom: 0;
  right: 0;
  opacity: 0;
  background: rgba(0, 0, 34, 0.6666666667);
  -webkit-backdrop-filter: blur(5px);
  backdrop-filter: blur(5px);
  transition: opacity 0.2s ease-in-out;
}

.card-game:hover > .card-game__overlay {
  opacity: 1;
}

.card-game__title {
  margin-top: 0.5em;
  color: #FFFFFF;
  font-size: 2.25rem;
  font-weight: 700;
  text-align: center;
  text-decoration: underline;
  text-decoration-color: #E1E7EC;
}

.card-game__attributes {
  height: fit-content;
  width: 100%;
  display: flex;
  justify-content: space-around;
  align-content: space-around;
  align-items: center;
  flex-wrap: wrap;
  color: black;
  font-size: 1.25em;
}

.card-game__price {
  width: fit-content;
  font-weight: 700;
  font-size: 2rem;
  padding: 0.25em 0.5em;
  border-radius: 10px 10px 0 0;
  background-color: #FFFFFF;
}

.card-game__price p {
  margin: 0;
  color: #5F6B7A;
}

.card_game_reveal {
  animation-name: fade-in;
  animation-duration: 0.5s;
  animation-fill-mode: forwards;
}

@keyframes slide-right {
  from {
    transform: translateX(-100%);
  }
  to {
    transform: translateX(0);
  }
}
@keyframes slide-left {
  from {
    transform: translateX(100%);
  }
  to {
    transform: translateX(0);
  }
}
@keyframes slide-bottom {
  from {
    transform: translateY(100%);
  }
  to {
    transform: translateY(0);
  }
}
@keyframes slide-top {
  from {
    transform: translateY(-100%);
  }
  to {
    transform: translateY(0);
  }
}
@keyframes pulse {
  0% {
    transform: scale(1);
  }
  50% {
    transform: scale(1.1);
  }
  100% {
    transform: scale(1);
  }
}
@keyframes fade-in {
  0% {
    opacity: 0;
    transform: scale(0);
  }
  100% {
    opacity: 1;
    transform: scale(1);
  }
}
#card_game_reveal_0 {
  animation-delay: 0s;
}

#card_game_reveal_1 {
  animation-delay: 0.1s;
}

#card_game_reveal_2 {
  animation-delay: 0.2s;
}

#card_game_reveal_3 {
  animation-delay: 0.3s;
}

#card_game_reveal_4 {
  animation-delay: 0.4s;
}

#card_game_reveal_5 {
  animation-delay: 0.5s;
}

#card_game_reveal_6 {
  animation-delay: 0.6s;
}

#card_game_reveal_7 {
  animation-delay: 0.7s;
}

#card_game_reveal_8 {
  animation-delay: 0.8s;
}

#card_game_reveal_9 {
  animation-delay: 0.9s;
}

#card_game_reveal_10 {
  animation-delay: 1s;
}

#card_game_reveal_11 {
  animation-delay: 1.1s;
}

#card_game_reveal_12 {
  animation-delay: 1.2s;
}

#card_game_reveal_13 {
  animation-delay: 1.3s;
}

#card_game_reveal_14 {
  animation-delay: 1.4s;
}

#card_game_reveal_15 {
  animation-delay: 1.5s;
}

#card_game_reveal_16 {
  animation-delay: 1.6s;
}

#card_game_reveal_17 {
  animation-delay: 1.7s;
}

#card_game_reveal_18 {
  animation-delay: 1.8s;
}

#card_game_reveal_19 {
  animation-delay: 1.9s;
}

#card_game_reveal_20 {
  animation-delay: 2s;
}

#card_game_reveal_21 {
  animation-delay: 2.1s;
}

#card_game_reveal_22 {
  animation-delay: 2.2s;
}

#card_game_reveal_23 {
  animation-delay: 2.3s;
}

#card_game_reveal_24 {
  animation-delay: 2.4s;
}

#card_game_reveal_25 {
  animation-delay: 2.5s;
}

#card_game_reveal_26 {
  animation-delay: 2.6s;
}

#card_game_reveal_27 {
  animation-delay: 2.7s;
}

#card_game_reveal_28 {
  animation-delay: 2.8s;
}

.game-list .game_genres,
.game-list .game_attributes,
.game-list .price,
.game-list .card_game h1 {
  opacity: 0;
  transition: opacity 0.5s;
}

.game-list .card_game:hover > .card_float > .game_genres {
  animation: slide-right 0.5s forwards;
  opacity: 1;
}

.game-list .card_game:hover > .card_float > .game_attributes {
  animation: slide-left 0.5s forwards;
  opacity: 1;
}

.game-list .card_game:hover > .card_float > .price {
  animation: slide-bottom 0.5s forwards;
  opacity: 1;
}

.game-list .card_game:hover > .card_float > h1 {
  animation: slide-top 0.5s forwards;
  opacity: 1;
}

.card-game__overlay .card-game__attributes,
.card-game__overlay .card-game__price,
.card-game__overlay .card-game__title {
  opacity: 0;
  transition: opacity 0.5s;
}

.card-game:hover > .card-game__overlay > .card-game__attributes {
  animation: slide-right 0.5s forwards;
  opacity: 1;
}

.card-game:hover > .card-game__overlay > .card-game__price {
  animation: slide-bottom 0.5s forwards;
  opacity: 1;
}

.card-game:hover > .card-game__overlay > .card-game__title {
  animation: slide-top 0.5s forwards;
  opacity: 1;
}

.game_description .game_genres,
.game_description .game_attributes,
.game-desc__genres,
.game-desc__attributes {
  width: max-content;
  max-width: 100%;
  display: flex;
  flex-direction: row;
  align-content: center;
  align-items: center;
  justify-content: center;
  flex-wrap: wrap;
  gap: 12px 15px;
  margin: 1em auto;
}

.game_description .game_genres > *,
.game_description .game_attributes > *,
.game-desc__genres > *,
.game-desc__attributes > * {
  display: inline-flex;
  align-items: center;
  gap: 8px;
}

.game_description .game_genres .attr_label,
.game_description .game_attributes .attr_label,
.game-desc__genres .attr_label,
.game-desc__attributes .attr_label {
  font-size: 1.125em;
  text-transform: uppercase;
  letter-spacing: 0.03em;
  color: #8895A7;
}

.game_description .game_genres .attr_value,
.game_description .game_attributes .attr_value,
.game-desc__genres .attr_value,
.game-desc__attributes .attr_value {
  font-weight: 600;
  color: #2368A2;
  font-size: 1.35em;
}

.game_description .game_attributes .attr_label,
.game_description .game_attributes .attr_value,
.game-desc__attributes .attr_label,
.game-desc__attributes .attr_value {
  color: #E1E7EC;
}

.game_description .game_creators,
.game_description .game_mechanics,
.game-desc__creators,
.game-desc__mechanics {
  display: flex;
  flex-wrap: wrap;
  gap: 12px 15px;
}

.game_description .game_creators,
.game-desc__creators {
  width: 100%;
  max-width: 100%;
  justify-content: flex-start;
  margin-left: 0;
  margin-right: auto;
}

.game_description .game_mechanics,
.game-desc__mechanics {
  width: max-content;
  max-width: 100%;
  justify-content: center;
}

.mechanics_carousel,
.game-desc__carousel {
  position: relative;
  width: 100%;
  padding: 4px 0;
  display: flex;
  align-items: center;
  gap: 8px;
}

.mechanics_carousel .carousel_viewport,
.game-desc__carousel .carousel_viewport {
  position: relative;
  flex: 1 1 auto;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  -ms-overflow-style: none;
  scrollbar-width: none;
}
.mechanics_carousel .carousel_viewport::-webkit-scrollbar,
.game-desc__carousel .carousel_viewport::-webkit-scrollbar {
  display: none;
}

.carousel_track {
  width: 100px;
}

.mechanics_carousel .carousel_track,
.game-desc__carousel .carousel_track {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  white-space: nowrap;
}

.mechanics_carousel .carousel_track > *,
.game-desc__carousel .carousel_track > * {
  flex: 0 0 auto;
  scroll-snap-align: start;
}

.mechanics_carousel .carousel_arrow,
.game-desc__carousel .carousel_arrow {
  position: relative;
  flex: 0 0 auto;
  width: 36px;
  height: 36px;
  padding: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border: none;
  border-radius: 50%;
  background: transparent;
  font-size: 24px;
  line-height: 36px;
  color: #2368A2;
  cursor: pointer;
  opacity: 1;
  transition: transform 0.15s ease, color 0.15s ease;
}
.mechanics_carousel .carousel_arrow:hover,
.game-desc__carousel .carousel_arrow:hover {
  transform: scale(1.1);
  color: #3183C8;
}
.mechanics_carousel .carousel_arrow:focus, .mechanics_carousel .carousel_arrow:focus-visible,
.game-desc__carousel .carousel_arrow:focus,
.game-desc__carousel .carousel_arrow:focus-visible {
  outline: none;
  box-shadow: none;
}
.mechanics_carousel .carousel_arrow::-moz-focus-inner,
.game-desc__carousel .carousel_arrow::-moz-focus-inner {
  border: 0;
}
.mechanics_carousel .carousel_arrow:-moz-focusring,
.game-desc__carousel .carousel_arrow:-moz-focusring {
  outline: none;
}
.mechanics_carousel .carousel_arrow.is-popping::after,
.game-desc__carousel .carousel_arrow.is-popping::after {
  content: "";
  position: absolute;
  left: 50%;
  top: 50%;
  width: 36px;
  height: 36px;
  margin-left: -18px;
  margin-top: -18px;
  border-radius: 50%;
  border: 2px solid rgba(49, 131, 200, 0.55);
  pointer-events: none;
  animation: carousel-ring 0.45s ease-out forwards;
}

@keyframes carousel-ring {
  0% {
    transform: scale(0.7);
    opacity: 1;
  }
  100% {
    transform: scale(1.5);
    opacity: 0;
  }
}
#wishlist_page {
  margin: 2rem 0;
}

.wishlist_form {
  transform: scale(1.5);
  transition: transform 0.15s ease-out;
}
.wishlist_form:hover {
  transform: scale(1.6);
}

.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

.wishlist-btn {
  --heart-stroke: #8895A7;
  --heart-fill: #DC3030;
  position: relative;
  display: inline-grid;
  place-items: center;
  width: 44px;
  height: 44px;
  padding: 0;
  border: none;
  background: transparent;
  cursor: pointer;
  border-radius: 50%;
  transition: transform 0.12s ease-out;
}
.wishlist-btn:focus, .wishlist-btn:focus-visible {
  outline: none;
  box-shadow: none;
}
.wishlist-btn::-moz-focus-inner {
  border: 0;
}
.wishlist-btn:-moz-focusring {
  outline: none;
}
.wishlist-btn.is-ghost {
  text-decoration: none;
}
.wishlist-btn.is-active {
  --heart-stroke: #DC3030;
}
.wishlist-btn.is-popping .wishlist-heart {
  animation: heart-pop 0.28s ease-out both;
}
.wishlist-btn.is-popping::after {
  content: "";
  position: absolute;
  inset: 0;
  margin: auto;
  width: 44px;
  height: 44px;
  border-radius: 50%;
  border: 2px solid rgba(220, 48, 48, 0.55);
  pointer-events: none;
  animation: heart-ring 0.6s ease-out forwards;
}

.wishlist-heart {
  width: 28px;
  height: 28px;
  display: block;
}

.wishlist-heart__outline {
  fill: none;
  stroke: var(--heart-stroke);
  stroke-width: 2.2;
  vector-effect: non-scaling-stroke;
}

.wishlist-heart__fill {
  fill: var(--heart-fill);
  transform: scale(0);
  transform-origin: center;
  transform-box: fill-box;
  transition: transform 0.6s ease-in-out;
}

.wishlist-btn.is-active .wishlist-heart__fill {
  transform: scale(1);
  transition: none;
}

@keyframes heart-pop {
  0% {
    transform: scale(0.9);
  }
  50% {
    transform: scale(1.12);
  }
  100% {
    transform: scale(1);
  }
}
@keyframes heart-ring {
  0% {
    transform: scale(0.7);
    opacity: 1;
  }
  100% {
    transform: scale(1.5);
    opacity: 0;
  }
}
@media (prefers-reduced-motion: reduce) {
  .wishlist-btn {
    transition: none;
  }
  .wishlist-heart__fill {
    transition: none;
  }
  .wishlist-btn.is-popping .wishlist-heart {
    animation: none;
  }
  .wishlist-btn.is-popping::after {
    display: none;
  }
}
.game_description .game_text #text_to_expand,
.game-desc__text #text_to_expand,
#game_text #text_to_expand {
  overflow: hidden;
  max-height: 10em;
  mask-image: linear-gradient(black, transparent);
  -webkit-mask-image: linear-gradient(black, transparent);
  transition: max-height 600ms ease-in-out, opacity 400ms ease-in-out, mask-image 400ms ease-in-out, -webkit-mask-image 400ms ease-in-out;
  will-change: max-height, opacity;
  opacity: 0.95;
  position: relative;
}
.game_description .game_text #text_to_expand.collapsed,
.game-desc__text #text_to_expand.collapsed,
#game_text #text_to_expand.collapsed {
  opacity: 0.95;
}

.game_description .game_text #text_to_expand.expanded,
.game-desc__text #text_to_expand.expanded,
#game_text #text_to_expand.expanded {
  overflow: visible;
  opacity: 1;
  transition: max-height 600ms ease-in-out, opacity 400ms ease-in-out;
  will-change: max-height, opacity;
}

.game_description .game_text #text_to_expand.mask-off,
.game-desc__text #text_to_expand.mask-off,
#game_text #text_to_expand.mask-off {
  mask-image: none;
  -webkit-mask-image: none;
}

#text_to_expand:not(.mask-off)::after {
  content: "";
  position: absolute;
  bottom: 0;
  left: 0;
  width: 100%;
  height: 3em;
  background: linear-gradient(to bottom, rgba(255, 255, 255, 0), white);
  pointer-events: none;
  opacity: 1;
  transition: opacity 0.4s ease;
}

#text_to_expand.mask-off::after {
  opacity: 0;
}

.text-toggle,
#toggle_button {
  background: none;
  border: none;
  padding: 0.5em;
  font: inherit;
  font-weight: bold;
  font-size: 1.25em;
  cursor: pointer;
  text-align: center;
  width: 100%;
  transition: all 0.2s ease-out;
  color: #2368A2;
  box-shadow: 0 0 3pt 2pt #2368A2;
  border-radius: 999px;
}
.text-toggle:focus, .text-toggle:focus-visible,
#toggle_button:focus,
#toggle_button:focus-visible {
  outline: 2px solid #5F6B7A;
  outline-offset: 2px;
  outline-color: transparent;
}
.text-toggle .chevron,
#toggle_button .chevron {
  display: inline-block;
  transition: transform 0.3s ease;
}
.text-toggle[aria-expanded=true] .chevron,
#toggle_button[aria-expanded=true] .chevron {
  transform: rotate(180deg);
}
.text-toggle .chevron-icon,
#toggle_button .chevron-icon {
  width: 28px;
  height: 28px;
  display: inline-block;
}

#game_price_header {
  margin-bottom: 1em;
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
}
#game_price_header .wishlist-btn {
  margin: 0 1em;
}

#date_options {
  width: 520px;
}

#reservation_title {
  width: 100%;
  color: #5F6B7A;
  font-size: 1.5em;
  font-weight: bold;
  text-align: left;
  text-underline-ofFset: 8px;
  margin-bottom: 0;
}

#form_date {
  max-width: 600px;
  margin: 1em auto;
  height: 100%;
  display: flex;
  flex-direction: column;
  justify-content: space-around;
  align-items: center;
  gap: 12px;
  text-align: center;
}
#form_date .option, #form_date .item, #form_date input {
  font-size: 1.5rem;
  text-align: center;
  letter-spacing: 0.5px;
}

#dates_input:not(:has(select option)) {
  cursor: not-allowed;
  display: none;
}

#reservation_badges {
  display: inline-flex;
  flex-direction: row;
  flex-wrap: wrap;
  gap: 1em;
}

.badge {
  width: fit-content;
  display: inline-flex;
  align-items: center;
  gap: 0.3em;
  padding: 0.5rem 1rem;
  border-radius: 999px;
  background-color: #EFF8FF;
  color: #1A4971;
  font-size: 0.9em;
}

.badge__icon {
  display: inline-block;
}

.badge--pickup {
  background-color: #E7FFFE;
  color: #1B655E;
}

.badge--caution {
  background-color: #FFFCF4;
  color: #8C6D1F;
}

#game_price_container {
  width: 400px;
  display: inline-flex;
  flex-direction: row;
  flex-wrap: nowrap;
  justify-content: center;
  align-items: stretch;
  font-size: 1.5rem;
}

#text_price {
  display: flex;
  justify-content: center;
  align-items: center;
  text-align: center;
  border-radius: 10px;
  padding: 0 1rem;
  border: 2px solid #E1E7EC;
  border-right: 1px solid #E1E7EC;
  border-top-right-radius: 0;
  border-bottom-right-radius: 0;
}

#game_amount {
  border-left: 1px solid #E1E7EC;
}

#game_amount_button {
  font-size: 1.5rem;
}

#info_cgv {
  margin: 0;
}

@keyframes colorchange {
  from {
    color: #1A4971;
  }
  to {
    color: #5F6B7A;
  }
}
.ts-control {
  cursor: pointer;
  padding-bottom: 24px;
}
.ts-control::before, .ts-control::after {
  content: "";
  position: absolute;
  background: #3183C8;
  left: 50%;
  transform: translateX(-50%);
  transition: transform 0.3s ease-in;
}
.ts-control::before {
  bottom: 0;
  height: 2px;
  width: 100%;
  transform: translateX(-50%) scaleX(0);
  transform-origin: 50% 50%;
}
.ts-control::after {
  bottom: 3px;
  width: 24px;
  height: 16px;
  clip-path: polygon(0 0, 100% 0, 50% 100%);
  -webkit-clip-path: polygon(0 0, 100% 0, 50% 100%);
}
.ts-control:focus-within::before, .ts-control.active::before {
  transform: translateX(-50%) scaleX(1);
}
.ts-control:focus-within::after, .ts-control.active::after {
  animation: none;
  transform: translateX(-50%) translateY(24px);
}
.ts-control > * {
  cursor: pointer;
}

@media (prefers-reduced-motion: reduce) {
  .ts-control::before, .ts-control::after {
    transition: none;
  }
  .ts-control::after {
    animation: none;
  }
}
#game_image {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
}

#game_img {
  height: calc(640px - 2em);
  min-height: 640px;
  background-color: #FFFFFF;
  border-radius: 2em;
  border: 2px solid #B8C4CE;
}

#game_info_price_container {
  display: flex;
  justify-content: center;
  flex-wrap: wrap;
  flex-direction: column;
  gap: 1em;
  align-items: stretch;
  max-width: 48%;
}
@media (max-width: 1620px) {
  #game_info_price_container {
    flex-direction: column;
    justify-content: center;
    max-width: 100%;
  }
}

@media (max-width: 1584px) {
  #game_info_price_container {
    max-width: 100%;
    width: 100%;
  }
}
@media (max-width: 1710px) {
  #game_date_form {
    order: 4;
  }
}
#game_description_page {
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-evenly;
  gap: 2em;
  flex: 1 1 auto;
  padding: 2em 0;
  width: 100%;
}
@media (max-width: 1620px) {
  #game_description_page {
    flex-direction: column;
    align-items: stretch;
    justify-content: center;
  }
}

#game_text {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  align-items: center;
  min-width: 360px;
  max-width: 100%;
  width: auto;
  max-height: fit-content;
  overflow: hidden;
}
#game_text p {
  line-height: 1.75em;
  margin-top: 0;
}

#title_game_text {
  width: 100%;
  color: #5F6B7A;
  font-size: 1.5em;
  font-weight: bold;
  text-align: left;
  text-underline-ofFset: 8px;
  padding: 0.5em 1em;
}

#game_text_button {
  width: fit-content;
  color: #211934;
  font-size: 1.25em;
  text-decoration: underline;
}
#game_text_button:hover {
  color: #5F6B7A;
}

#game_info {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: space-between;
  position: relative;
}

.game_genres {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-items: center;
}

#game_title_info {
  margin-bottom: 12px;
  letter-spacing: -2px;
  font-size: 2.25em;
  color: #5F6B7A;
  text-align: left;
}

.game_creators, .game_attributes, .game_genres {
  margin-bottom: 28px;
}

.game_creators {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 12px;
  width: 100%;
}

.game_attributes {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  justify-content: center;
}

.game_genres {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  justify-content: center;
}

#game_info_header {
  width: 100%;
  margin-bottom: 8px;
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
}

#cart,
.cart {
  width: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
}

.delete_from_cart,
.cart__delete-btn {
  margin: 0.5em;
  width: 40px;
  height: 40px;
  cursor: pointer;
  display: flex;
  align-items: center;
  border: none;
}
.delete_from_cart span,
.cart__delete-btn span {
  transition: 200ms;
}
.delete_from_cart:focus,
.cart__delete-btn:focus {
  outline: none;
}
.delete_from_cart .icon,
.cart__delete-btn .icon {
  height: 40px;
  width: 40px;
  display: flex;
  align-items: center;
  justify-content: center;
}
.delete_from_cart svg,
.cart__delete-btn svg {
  width: 15px;
  fill: #eee;
}

#facturation_page {
  max-width: 960px;
  height: fit-content;
  flex: initial;
}
#facturation_page .header {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-evenly;
  margin: 0.25em 0;
  width: 100%;
}
#facturation_page .header__title {
  font-size: 2rem;
}
#facturation_page .header__img {
  width: 148px;
  height: 148px;
  overflow-clip-margin: unset;
  overflow: visible;
  object-fit: cover;
  opacity: 0.9;
}
#facturation_page .header__image-fade {
  mask-image: radial-gradient(circle, black 20%, transparent 100%);
  -webkit-mask-image: radial-gradient(circle, black 20%, transparent 100%);
}
#facturation_page .address {
  text-align: center;
}
#facturation_page .address__btn {
  margin: 2rem auto;
}
#facturation_page .caution__desc {
  display: block;
  margin: 0 auto;
}

#payment_success .payment_header__title {
  font-size: 2.25rem;
  text-align: center;
  margin: 1rem 0;
}
#payment_success .payment__body {
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-evenly;
}
#payment_success .payment__desc {
  flex: 1 1 0;
  padding: 2rem;
  min-width: 250px;
  font-size: 1.5rem;
}
#payment_success .payment__desc p {
  margin: 1rem 0;
}
#payment_success .payment__img {
  flex: 0 0 400px;
  max-width: 100%;
  min-width: 300px;
  max-height: 400px;
  overflow-clip-margin: unset;
  overflow: visible;
  object-fit: cover;
  object-position: top;
  border-radius: 6px;
  mask-image: radial-gradient(circle, black 80%, transparent 100%);
  -webkit-mask-image: radial-gradient(circle, black 80%, transparent 100%);
}

#payment_cancel h1 {
  font-size: 2.25rem;
  text-align: center;
}
#payment_cancel div p {
  font-size: 1.5rem;
  text-align: center;
  margin: 1rem 0;
}

.cart__coupon {
  margin: 2rem 0;
}
.cart__coupon .coupon__list {
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: center;
  gap: 1rem;
}
.cart__coupon .coupon__form {
  display: flex;
  align-items: center;
  justify-content: center;
}
.cart__coupon .coupon__item {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 1rem;
}
.cart__coupon .coupon__name {
  display: inline-block;
}
.cart__coupon .coupon__remove-form {
  display: inline-block;
}

.cart_block {
  margin: 2rem 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: space-between;
  gap: 1.5rem;
}

.payment {
  width: 100%;
}

.payment__btns {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: 1rem;
  margin: 2rem 0;
}

#legal_informations,
.legal-info {
  background-color: white;
  padding: 16px calc(20px + 2%);
  margin: 0 calc(20px + 5%);
  border-radius: 10px;
}

#account_page {
  margin: 2rem 0;
}

.htmx-indicator {
  opacity: 0;
  transition: opacity 0.35s ease-in-out;
  /* invert the color of the spinner */
  filter: invert(100%);
  width: 64px;
}

.htmx-request .htmx-indicator,
.htmx-request.htmx-indicator {
  opacity: 1;
}

.account_block {
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  justify-content: space-between;
  align-items: stretch;
  align-content: center;
  gap: 24px;
  margin-top: 24px;
}

.profil {
  position: relative;
  flex: 1 1 720px;
  margin-right: 0 auto;
}

.profil, .coupons {
  max-height: 724px;
}

.profil, .coupons, .historic {
  overflow-y: auto;
}

.newsletter {
  display: flex;
  justify-content: center;
  margin-top: 24px;
}

#button_edit {
  position: absolute;
  top: 0.5rem;
  right: 0.5rem;
}

.account_form, .coupons {
  flex: 1;
}

.coupons {
  min-width: 400px;
}

.coupons_list {
  display: grid;
  grid-template-columns: 1fr;
  grid-auto-rows: auto;
  margin-top: 16px;
}

.coupon {
  display: flex;
  flex-direction: column;
  margin: 6px 0;
  padding: 1rem;
  background-color: #F8F9FA;
  border: 2px solid #E1E7EC;
  border-radius: 10px;
}

.coupon__header {
  display: flex;
  flex-direction: row;
  justify-content: space-between;
  align-items: center;
}
.coupon__header .plus_minus {
  height: 24px;
  width: 24px;
}

.coupon__title {
  font-size: 1.25rem;
  font-weight: 400;
  text-align: left;
  color: #211934;
  vertical-align: middle;
  width: fit-content;
}

.coupon__title-code {
  color: #211934;
  font-weight: 700;
}

.coupon__title, .plus_minus {
  display: inline-block;
}

.hidden {
  /* display: none !important */
  visibility: hidden;
}

.booking {
  background-color: #F8F9FA;
  border: 2px solid #E1E7EC;
  border-radius: 10px;
  margin: 14px 0 4px 0;
  padding: 0.75rem 2rem;
  display: flex;
  flex-direction: row;
  justify-content: space-between;
  align-items: center;
  gap: 0 0.5em;
}
.booking .game_images {
  display: flex;
  gap: 0 0.5em;
}
.booking .game_images img {
  width: calc(148px - 2em);
  height: calc(148px - 2em);
  max-width: 96px;
  max-height: 96px;
  max-width: 148px;
  max-height: 148px;
  aspect-ratio: 1/1;
  border-radius: 10px;
}

.table__game-name {
  font-size: 1.25rem;
  font-weight: 700;
}
.table__game-name p {
  color: #3183C8;
  text-decoration: underline;
}

.historic {
  display: flex;
  flex-direction: column;
  width: 100%;
}

.facturation,
.cart__billing {
  display: flex;
}
.facturation img,
.cart__billing img {
  min-width: calc(80px + 20%);
  max-width: 400px;
  aspect-ratio: 1/1;
  border-radius: 10px;
}

#search_bar {
  flex-direction: row-reverse;
}

#search_bar, .expanded_search_bar {
  flex: 1;
  display: flex;
  justify-content: center;
  align-items: baseline;
  align-content: center;
  flex-wrap: wrap;
  width: 100%;
  padding: 1.25em;
  transition: height 0.5s ease-in-out;
}
#search_bar form, .expanded_search_bar form {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  align-items: center;
  flex-wrap: nowrap;
}
#search_bar form input, .expanded_search_bar form input {
  text-align: right;
}

.expanded_search_bar {
  width: 100%;
}

#search_bar {
  display: flex;
}
#search_bar form {
  width: 100%;
  display: flex;
  flex-wrap: wrap;
  align-content: center;
  justify-content: space-around;
  align-items: center;
  flex-direction: row;
}
#search_bar .ts-wrapper img {
  width: 32px;
  height: 32px;
  filter: invert(100%);
}
#search_bar .ts-wrapper .option, #search_bar .ts-wrapper .item {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 10px;
  background: #FFFFFF;
  border-radius: 10px;
  border: 2px solid #E1E7EC;
  margin: 10px;
}

.submit_cancel {
  display: flex;
  justify-content: space-around;
  text-align: center;
  vertical-align: middle;
  flex-wrap: wrap;
}
.submit_cancel .cancel {
  background: #DC3030;
}

.genre_logo:hover {
  transform: scale(1.1);
  transition: transform 0.25s ease-in-out;
}

.login_button {
  margin: 0.25em;
}

/* Global responsive overrides */
/* >= md down */
@media (max-width: 1200px) {
  header {
    column-gap: 8vw;
  }
}
@media (max-width: 992px) {
  header {
    width: 90vw;
  }
  table {
    width: 90vw;
  }
  .game-list .card_game {
    min-width: 320px;
  }
}
/* Phones and small tablets */
@media (max-width: 576px) {
  body {
    padding: 0 4%;
    background-size: 120%;
  }
  header {
    width: 100%;
    column-gap: 4vw;
    font-size: 1.1em;
  }
  nav > ul {
    margin: 0.25em;
  }
  nav > ul > * {
    margin: 0 0.25em;
  }
  nav > ul h2 {
    font-size: 1.1em;
    white-space: normal;
  }
  .bienvenu .flex-grow {
    flex-direction: column;
  }
  .bienvenu .flex-grow div {
    min-width: unset;
  }
  .bienvenu .flex-grow img {
    flex: 0 0 auto;
    min-width: 240px;
  }
  .game-list .card_game {
    min-width: 280px;
    width: 92vw;
    margin: 14px;
  }
  .game-list .card_game h1 {
    font-size: 1.5em;
  }
  .game-list .card_game .game_genres div, .game-list .card_game .game_attributes div {
    max-width: 64px;
    max-height: 64px;
  }
  .game_description .game_genres, .game_description .game_attributes {
    width: 100%;
    column-gap: 8px;
    row-gap: 8px;
  }
  #search_bar form {
    flex-direction: column;
    align-items: stretch;
  }
  .form-group {
    margin: 0.5em;
  }
  .form-group p, .form-group input, .form-group label {
    font-size: 1.2em;
  }
  .form-group input {
    text-align: left;
  }
  .facturation, .facturation_title {
    width: 100%;
  }
  #logo_facturation {
    width: 96px;
    height: 96px;
  }
  table {
    margin: 10px;
    width: 100%;
    font-size: 1.1em;
  }
  table img {
    max-height: 80px;
  }
  footer li {
    padding: 0 8px;
  }
  .game_date_form #id_date #dates_input {
    width: 100%;
  }
  #payment_process {
    max-width: 100%;
  }
}

/*# sourceMappingURL=style.css.map */