/* =========================
   BREADCRUMB CLEAN UI
========================= */

.region.region-breadcrumb {
  display: flex !important;
  justify-content: center !important;
  gap: 12px !important;
  padding: 12px 0 !important;
}

/* RESET */
.region.region-breadcrumb nav,
.region.region-breadcrumb .block {
  background: transparent !important;
  border: none !important;
  box-shadow: none !important;
}

/* =========================
   CARD MENU
========================= */

.region.region-breadcrumb .nav-link {
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
  justify-content: center !important;

  width: 88px;
  height: 88px;

  padding: 10px;

  border-radius: 12px;

  background: #ffffff;
  color: #111827;

  border: 1px solid #e5e7eb;

  text-decoration: none;
  font-weight: 600;
  text-transform: none;

  transition: all 0.18s ease;
}

/* =========================
   ICONES
========================= */

.region.region-breadcrumb .nav-link i {
  font-size: 26px !important;
  margin-bottom: 6px;

  color: #3888b2;

  transition: all 0.18s ease;
}

/* =========================
   TEXTE
========================= */

.region.region-breadcrumb .link-text {
  font-size: 11px;
  font-weight: 500;

  text-align: center;
  color: #374151;
}

/* =========================
   HOVER (PROPRE)
========================= */

.region.region-breadcrumb .nav-link:hover {
  background: #f9fafb;

  border-color: #d1d5db;

  transform: translateY(-2px);
}

/* icône hover */
.region.region-breadcrumb .nav-link:hover i {
  color: #3290c3;
}

/* =========================
   ACTIVE
========================= */

.region.region-breadcrumb .nav-item.active .nav-link {
  background: #eef2ff;

  border-color: #c7d2fe;
}

.region.region-breadcrumb .nav-item.active .nav-link i {
  color: #4338ca;
}