:root {
  --wayo: #F47A1F;
  /* orange Wayo */
  --wayo-dark: #d65e10;
  --font: 'Urbanist', sans-serif;
}

body {
  font-family: 'Urbanist', system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;
}

.hero-grad {
  /* margin-top: 70px !important; */
  background: linear-gradient(135deg, #fff7ef 0%, #ffdcb8 100%);
}

.text-wayo {
  color: var(--wayo) !important;
}

.bg-wayo {
  background: var(--wayo) !important;
}

.btn-wayo {
  background: var(--wayo);
  color: #fff !important;
  cursor: pointer !important;
  border: 0;
}

.btn-wayo:hover {
  background: var(--wayo);
  color: #fff !important;
  border: 0;
}

.btn-outline-wayo {
  background-color: #fff;
  cursor: pointer !important;
}

.btn-outline-wayo-join {
  background-color: #FC7B30;
  cursor: pointer !important;
  color: #fff !important;
}

.btn-outline-wayo:hover {
  background-color: #fff;
}

.btn-outline-wayo-join:hover {
  background-color: #FC7B30;
  color: #fff !important;
}

.join-button {
  width: 100%;
  background-color: #FC7B30;
  margin-top: 20px;
  box-shadow: none;
  border: none;
  border-radius: 6px;
  height: 40px;
  color: white;
  font-weight: 700;
  box-shadow: 0 0 10px 0 rgba(0, 0, 0, 0.2);
  transition: all 0.2s ease-in-out;
}

.join-button:hover {
  background-color: #ee7626;
  color: white;
}

.community-app-button {
  text-align: center;
}

.border-white-10 {
  border-color: rgba(255, 255, 255, .1) !important;
}

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

/* utilitaire pour l’avatar */

.card-img-customer {
  height: 545px;
}

.bg-logo-communaute {
  background: #ffdcb8;
}

.cercle-logo {
  width: 170px;
  height: 170px;
  border-radius: 50%;
  border: 2px solid #fc7b30;
  background-color: transparent;
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 0 auto;
  overflow: hidden;
  /* masque ce qui dépasse du cercle */
}

.logo-communaute {
  width: 150px;
  /* taille de l’image (tu peux ajuster) */
  height: 150px;
  /* même valeur que width = cercle parfait */
  border-radius: 50%;
  /* rend l’image ronde */
  object-fit: cover;
  /* garde le bon cadrage sans déformation */
  display: block;
  margin: 0 auto;
  /* centre horizontalement */
}


/* Cards */
.price-badge {
  font-weight: 800;
  padding: .24rem .6rem;
  border-radius: 999px;
  background: #fff;
  border: 1px solid var(--g-200);
  font-size: .8rem;
  font-weight: 800;
  color: var(--orange);
}

.class-card {
  background: #f6f6f7;
  border: 1px solid var(--g-200);
  border-radius: 14px;
  display: flex;
}

.img-card-dt-communitites {
  height: 500px;
  width: 100%;
}

/* Pour les écrans ≤ 768px (tablette/mobile) */
@media (max-width: 768px) {
  .img-card-dt-communitites {
    height: 300px;
  }
}

/* Pour les écrans très petits ≤ 480px (mobile) */
@media (max-width: 480px) {
  .img-card-dt-communitites {
    height: 200px;
  }
}

.class-card .fomo-badge {
  background: linear-gradient(135deg, #ffedd5, #fed7aa);
  color: #b45309;
  border: 1px solid #FBD38D;
  padding: .25rem .1rem;
  border-radius: 10px;
  font-weight: 800;
  font-size: .8rem;
  box-shadow: 0 6px 16px rgba(245, 124, 31, .15);
  animation: fomoPulse 2.6s ease-in-out infinite;
  width: 120px;
}

@keyframes fomoPulse {

  0%,
  100% {
    box-shadow: 0 0 0 0 rgba(245, 124, 31, .28)
  }

  50% {
    box-shadow: 0 0 0 8px rgba(245, 124, 31, 0)
  }
}

@media (max-width: 768px) {
  .card-img-customer {
    height: auto;
  }
}

/* RTL Support */
[dir="rtl"] .list-inline-item {
  margin-right: 0 !important;
  margin-left: 1rem !important;
}

[dir="rtl"] .list-inline-item:last-child {
  margin-left: 0 !important;
}

[dir="rtl"] .list-inline-item i {
  margin-right: 0 !important;
  margin-left: 0.25rem !important;
}