/* =========================================================
   KIDNKOD — COURS PAGE
   Charte :
   Violet  #330394
   Orange  #FCA203
   Blanc   #FFFFFF
========================================================= */

/* ================= VARIABLES ================= */
:root{
  --kk-violet:#330394;
  --kk-orange:#FCA203;
  --kk-white:#FFFFFF;
  --kk-ink:#111827;
  --kk-muted:#4b5563;
}

/* ================= TOGGLE ================= */
.btn-toggle-group{
  display:flex;
  justify-content:center;
}
.btn-toggle-group .btn{
  margin:0 5px;
  border:2px solid #ccc;
  color:#000;
  border-radius:999px;
  padding:.85rem 1.1rem;
  font-weight:700;
}
.btn-toggle-group .btn:hover{
  border-color:var(--kk-violet);
}
.btn-toggle-group .btn-selected{
  border-color:var(--kk-violet)!important;
  background-color:#fff!important;
  color:var(--kk-violet)!important;
  box-shadow:0 0 10px rgba(51,3,148,.25);
}

/* ================= CARTES ================= */
.card.shadow-sm{
  border-radius:16px;
}
.card.shadow-sm .card-body{
  padding:1.25rem;
}
@media (max-width:576px){
  .card.shadow-sm .card-body{
    padding:1rem;
  }
}

/* ================= IMAGES ================= */
.bg-image img{
  border-radius:14px;
}

/* ================= TITRES ================= */
.card h5{
  font-weight:700;
  letter-spacing:-.2px;
}

/* ================= META ================= */
.kidnkod-meta{
  font-size:.92rem;
  color:var(--kk-muted);
  line-height:1.35;
}

/* ================= DESCRIPTION (même hauteur) ================= */
.kidnkod-desc{
  display:-webkit-box;
  -webkit-line-clamp:3;
  -webkit-box-orient:vertical;
  overflow:hidden;
}

/* ================= CTA ================= */
.kidnkod-cta{
  background-color:var(--kk-violet);
  border-color:var(--kk-violet);
  border-radius:14px;
  font-weight:700;
  letter-spacing:.2px;
}
.kidnkod-cta:hover{
  opacity:.95;
}
.kidnkod-outline{
  color:var(--kk-violet);
  border-color:var(--kk-violet);
  border-radius:14px;
  font-weight:700;
}
.kidnkod-outline:hover{
  background:rgba(51,3,148,.06);
}

/* ================= DROPDOWN ================= */
.dropdown-menu{
  overflow-x:auto;
  white-space:nowrap;
  max-width:100vw;
  padding:.5rem;
  border-radius:14px;
  box-shadow:0 10px 30px rgba(0,0,0,.12);
}
.dropdown-menu .btn{
  border-radius:12px;
}
.dropdown-item{
  display:block;
  width:100%;
  text-align:left;
}

/* ================= PROMO ================= */
.badge-promo-card{
  position:absolute;
  top:.5rem;
  right:.5rem;
  z-index:2;
  border-radius:999px;
  padding:.45rem .8rem;
}
.card.has-promo .card-body{
  padding-top:2.8rem;
}
@media (max-width:576px){
  .card.has-promo .card-body{
    padding-top:3.2rem;
  }
}

/* ================= BADGES — ORANGE / BLANC (NO VIOLET) ================= */

.kk-badge{
  display:inline-flex;
  align-items:center;
  gap:.4rem;

  padding:.45rem .7rem;
  border-radius:999px;

  font-size:.82rem;
  font-weight:600;
  line-height:1;
  white-space:nowrap;

  background:
    linear-gradient(
      180deg,
      rgba(252,162,3,.12) 0%,
      rgba(255,255,255,1) 75%
    );

  color:#1f2937;

  border:1px solid rgba(252,162,3,.28);

  box-shadow:
    0 1px 0 rgba(255,255,255,.95) inset,
    0 4px 12px rgba(17,24,39,.04);
}

/* Badges neutres (âge, durée) */
.kk-badge--neutral{
  background:#ffffff;
  border-color:rgba(17,24,39,.12);
  box-shadow:none;
}

/* Classes conservées pour le mapping PHP */
.kk-badge--violet{}
.kk-badge--orange{}
/* =========================================================
   FORCE BADGES ORANGE/BLANC — 0 VIOLET (override hard)
   À COLLER TOUT EN BAS DE cours.css
========================================================= */

:root{
  /* on garde le violet pour le site (CTA, toggle),
     mais on n’en veut PAS sur les badges */
  --kk-badge-border: rgba(252,162,3,.28);
  --kk-badge-text: #1f2937;
}

/* 1) on force notre rendu même si Bootstrap .badge ou autre passe avant */
.kk-badge,
.badge.kk-badge,
span.kk-badge{
  background: linear-gradient(
    180deg,
    rgba(252,162,3,.12) 0%,
    rgba(255,255,255,1) 75%
  ) !important;

  color: var(--kk-badge-text) !important;
  border: 1px solid var(--kk-badge-border) !important;

  box-shadow:
    0 1px 0 rgba(255,255,255,.95) inset,
    0 4px 12px rgba(17,24,39,.04) !important;
}

/* 2) underline / pseudo éléments : on neutralise tout ce qui pourrait être violet */
.kk-badge::before,
.kk-badge::after{
  background: none !important;
  content: none !important;
}

/* 3) variante neutral : encore plus sobre */
.kk-badge--neutral,
.badge.kk-badge--neutral{
  background: #fff !important;
  color: var(--kk-badge-text) !important;
  border-color: rgba(17,24,39,.12) !important;
  box-shadow: none !important;
}

/* 4) sécurité : si tu as des classes legacy "violet/orange" qui traînent,
      on les rend inoffensives pour les badges */
.kk-badge--violet,
.kk-badge--orange{
  background: inherit !important;
  color: inherit !important;
  border-color: inherit !important;
}