:root {
  --color-bg: #f6f7fa;
  --color-primary: #252462;
  --color-accent: #19cbc7;
  --color-warm: #ff7f50;
  --color-pastel: #ffe8e0;
}

body {
  background: var(--color-bg);
  color: var(--color-primary);
}

.hero {
  background: linear-gradient(90deg, var(--color-primary) 60%, var(--color-accent) 100%);
  color: white;
  padding: 3rem 1rem 5rem 1rem;
  border-radius: 0 0 40px 40px;
  margin-bottom: 2rem;
  box-shadow: 0 8px 32px #0002;
}

.search-card {
  margin-top: -70px;
  box-shadow: 0 4px 24px #25246222;
  border-radius: 1.5rem;
  background: white;
}

.logo-muli {
  font-weight: bold;
  font-size: 2.7rem;
  letter-spacing: 0.04em;
  color: var(--color-warm);
}

.slogan {
  font-size: 1.3rem;
  color: var(--color-pastel);
  font-style: italic;
}

.bg-warning {
  background: linear-gradient(90deg, #ffdc80 0%, #ffd700 100%) !important;
  color: #222 !important;
}

.bg-accent {
  background: linear-gradient(90deg, #19cbc7 0%, #12a5a2 100%) !important;
  color: #fff !important;
}

.badge.bg-warning,
.badge.bg-warning.text-dark {
  background: linear-gradient(90deg, #ffdc80 0%, #ffd700 100%) !important;
  color: #222 !important;
  border: none;
}

.badge.bg-success,
.badge.bg-success.text-dark {
  background: linear-gradient(90deg, #7be382 0%, #58b055 100%) !important;
  color: #1e4223 !important;
  border: none;
}

.badge.bg-accent,
.badge.bg-accent.text-dark {
  background: linear-gradient(90deg, #19cbc7 0%, #12a5a2 100%) !important;
  color: #fff !important;
  border: none;
}

.badge.bg-light,
.badge.bg-light.text-dark,
.badge.bg-secondary {
  background: linear-gradient(90deg, #f6f7fa 0%, #eae9f5 100%) !important;
  color: #666 !important;
  border: 1px solid #eaeaea !important;
}

.badge.bg-info {
  background: linear-gradient(90deg, #c6e6ff 0%, #62b6fa 100%) !important;
  color: #145473 !important;
  border: none;
}

/* Ajoute éventuellement dans styles.css pour des cartes + douces */
.card .btn {
    border-radius: 2em;
    font-weight: 500;
    font-size: 1rem;
}
.card {
    border-radius: 18px;
}

/* Dans /assets/styles.css */
.card.search-card {
    box-shadow: 0 8px 32px #0003;
    border-radius: 1.5rem;
}

.fa-muli {
  display: inline-block;
  width: 1em;
  height: 1em;
/*  vertical-align: middle;*/
  vertical-align: -0.1em;
  background: currentColor;
  -webkit-mask: url('./logo.svg') no-repeat center;
  mask: url('./logo.svg') no-repeat center;
  -webkit-mask-size: contain;
  mask-size: contain;
}

.btn-accent,
.btn.btn-accent {
  background: linear-gradient(90deg, #19cbc7 0%, #12a5a2 100%) !important;
  color: #fff !important;
  border: none !important;
}

.btn-accent:hover, .btn.btn-accent:hover {
  background: linear-gradient(90deg, #12a5a2 0%, #19cbc7 100%) !important;
  color: #fff !important;
}

.btn-muli-primary, .btn.btn-muli-primary {
  background: linear-gradient(90deg, #252462 60%, #484865 100%) !important;
  color: #fff !important;
  border: none !important;
}

.btn-muli-primary:hover, .btn.btn-muli-primary:hover {
  background: linear-gradient(90deg, #484865 40%, #252462 100%) !important;
  color: #fff !important;
}

.btn-warm, .btn.btn-warm {
  background: linear-gradient(90deg, #ff7f50 0%, #ffb380 100%) !important;
  color: #fff !important;
  border: none !important;
}

.btn-warm:hover, .btn.btn-warm:hover {
  background: linear-gradient(90deg, #ffb380 0%, #ff7f50 100%) !important;
  color: #fff !important;
}