/* ============================ */
/*         IMPORTS & ROOT       */
/* ============================ */
@import url("https://fonts.googleapis.com/css2?family=Alkatra:wght@400..700&display=swap");

:root {
  /* Couleurs principales */
  --color-fred: #4dccd9;
  --color-vannie: #8753da;
  --color-warning: #df7629;
  --color-danger: #a72828;

  /* Couleurs des alertes */
  --color-alert-success: #1f5051;
  --color-alert-danger: #511f1f;
  --color-alert-warning: #51341f;
  --color-alert-info: #287e9f;

  /* Couleur des boutons */
  --color-vannie-base: #493d7a;
  --color-vannie-hover: #3c3264;
  --color-vannie-active: #352c59;
  --color-fred-base: #2c7585;
  --color-fred-hover: #245f6c;
  --color-fred-active: #1e525d;

  --tblr-radius: 0.5rem;
  --tblr-font-family: "Alkatra";
}

/* ============================ */
/*           BASE               */
/* ============================ */
html {
  margin-left: 0 !important;
}

body {
  font-family: "Alkatra", system-ui;
  font-feature-settings: "cv03", "cv04", "cv11"; /* important pour fontawesome */
  font-size: 1rem;
}

/* ============================ */
/*           LAYOUT             */
/* ============================ */
.container-xxl {
  max-width: 90%;
}
@media (max-width: 768px) {
  .container-xxl {
    max-width: 95%;
  }
}

[data-bs-theme="dark"] .navbar-brand-autodark .navbar-brand-image {
  filter: none;
}

.navbar-brand-image {
  height: 3.5rem;
  width: auto;
}

.avatar-sm-vinted {
  --tblr-avatar-size: 1.5rem;
}

/* ============================ */
/*         NAVIGATION           */
/* ============================ */
.navbar-brand {
  padding-top: 0;
  padding-bottom: 0;
}

.nav-link {
  color: #ffffff;
}
.nav-link i {
  margin-right: 0.4rem;
  color: var(--tblr-primary) !important;
}
.nav-pills .nav-link.active,
.nav-pills .show > .nav-link {
  color: #ffffff;
  background-color: #4b3e7952;
}
.nav-link:focus,
.nav-link:hover {
  color: #52eeff;
  text-decoration: none;
}
.navbar-nav .nav-link.active,
.navbar-nav .nav-link.show {
  color: var(--color-vannie);
}
.username {
  color: var(--tblr-primary);
}

/* ============================ */
/*           BOUTONS            */
/* ============================ */
.btn-group-sm > .btn,
.btn-sm {
  --tblr-btn-padding-y: 0.3rem;
  --tblr-btn-padding-x: 0.5rem;
  --tblr-btn-font-size: 0.75rem;
  --tblr-btn-border-radius: var(--tblr-border-radius-sm);
}


/* VANNIE */
.vannie {
  color: var(--color-vannie);
}
.btn.btn-vannie {
  --tblr-btn-font-size: 1rem;
  --tblr-btn-font-family: var(--font-family);
  --tblr-btn-color: #fff;
  --tblr-btn-bg: var(--color-vannie-base);
  --tblr-btn-border-color: var(--color-vannie-base);
  --tblr-btn-hover-color: #fff;
  --tblr-btn-hover-bg: var(--color-vannie-hover);
  --tblr-btn-hover-border-color: var(--color-vannie-active);
  --tblr-btn-active-color: #fff;
  --tblr-btn-active-bg: var(--color-vannie-hover);
  --tblr-btn-active-border-color: var(--color-vannie-active);
}
.btn.btn-outline-vannie {
  --tblr-btn-font-size: 1rem;
  --tblr-btn-font-family: var(--font-family);
  --tblr-btn-color: hsl(252, 100%, 77%);
  --tblr-btn-bg: transparent;
  --tblr-btn-border-color: var(--color-vannie-base);
  --tblr-btn-hover-color: #fff;
  --tblr-btn-hover-bg: var(--color-vannie-base);
  --tblr-btn-hover-border-color: var(--color-vannie-base);
  --tblr-btn-active-color: #fff;
  --tblr-btn-active-bg: var(--color-vannie-base);
  --tblr-btn-active-border-color: var(--color-vannie-base);
}

/* FRED */
.fred {
  color: var(--color-fred);
}
.btn.btn-fred {
  --tblr-btn-font-size: 1rem;
  --tblr-btn-font-family: var(--font-family);
  --tblr-btn-color: #fff;
  --tblr-btn-bg: var(--color-fred-base);
  --tblr-btn-border-color: var(--color-fred-base);
  --tblr-btn-hover-color: #fff;
  --tblr-btn-hover-bg: var(--color-fred-hover);
  --tblr-btn-hover-border-color: var(--color-fred-active);
  --tblr-btn-active-color: #fff;
  --tblr-btn-active-bg: var(--color-fred-hover);
  --tblr-btn-active-border-color: var(--color-fred-active);
}
.btn.btn-outline-fred {
  --tblr-btn-font-size: 1rem;
  --tblr-btn-font-family: var(--font-family);
  --tblr-btn-color: hsl(191, 50%, 50%);
  --tblr-btn-bg: transparent;
  --tblr-btn-border-color: var(--color-fred-base);
  --tblr-btn-hover-color: #fff;
  --tblr-btn-hover-bg: var(--color-fred-base);
  --tblr-btn-hover-border-color: var(--color-fred-base);
  --tblr-btn-active-color: #fff;
  --tblr-btn-active-bg: var(--color-fred-base);
  --tblr-btn-active-border-color: var(--color-fred-base);
}

.btn.btn-outline-danger {
  --tblr-btn-font-size: 1rem;
  --tblr-btn-font-family: var(--font-family);
  --tblr-btn-color: hsl(0, 65%, 60%);
  --tblr-btn-bg: transparent;
  --tblr-btn-border-color: var(--color-danger);
  --tblr-btn-hover-color: #fff;
  --tblr-btn-hover-bg: var(--color-danger);
  --tblr-btn-hover-border-color: var(--color-danger);
  --tblr-btn-active-color: #fff;
  --tblr-btn-active-bg: var(--color-danger);
  --tblr-btn-active-border-color: var(--color-danger);

}

/* ============================ */
/*        BACKGROUNDS           */
/* ============================ */
.bg-vannie {
  background-color: var(--color-vannie-base);
  color:#fff;
}
.bg-fred {
  background-color: var(--color-fred-base);
  color:#fff;
}

/* ============================ */
/*           CARDS              */
/* ============================ */
.card-header {
  padding: 0.825rem 0.825rem;
}
.card-header.main {
  background-color: #4dccd92b; /* #4dccd914; */
}
.card-header.main i.icon-header {
  color: var(--color-fred);
}
.card-header.sidebar {
  background-color: #8753da2b; /* #8753da14; */
}
.card-header.sidebar i.icon-header {
  color: var(--color-vannie);
}
a.card:hover,
.card.card-focus:hover {
  text-decoration: none;
  box-shadow: #ffffff 0 0 20px 0;
}
.card-link-pop:hover,
.card.card-focus:hover {
  text-decoration: none;
  box-shadow: #4aedff 0 0 18px 10px;
  transform: scale(1.1);
  opacity: 1;
  z-index: 99;
}

.card-title{
  font-size: 1.15rem;
}

.card-song:hover {
  background-color: #3a7a801f;

}

.list-group-item.active {
  border-left-color: var(--color-vannie) !important;
}
.list-group-item {
  padding: 0.75rem 1rem;
}