/* D1094 - WEVIA Lab full standardization
 * Yacine: standardise taille blocs, page fluide, pas de duplication patch,
 * boutons fonctionnent, schemas beaux, cards meme taille meme bouton standard
 */

/* === 1. CARDS uniform size === */
.lab .grid {
  display: grid !important;
  grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  gap: 22px !important;
  grid-auto-rows: 1fr !important;
}
.lab .grid .card,
.lab .grid .card.span6 {
  min-height: 560px !important;
  max-height: 680px !important;
  display: flex !important;
  flex-direction: column !important;
  padding: 22px 24px 70px !important;
  border-radius: 18px !important;
  position: relative !important;
  box-sizing: border-box !important;
  overflow: hidden !important;
  background: linear-gradient(135deg, rgba(30,27,75,0.45), rgba(15,12,41,0.55)) !important;
  border: 1px solid rgba(167,139,250,0.18) !important;
  backdrop-filter: blur(8px) !important;
  transition: transform 0.25s ease, border-color 0.25s ease, box-shadow 0.25s ease !important;
}
.lab .grid .card:hover {
  transform: translateY(-3px) !important;
  border-color: rgba(167,139,250,0.45) !important;
  box-shadow: 0 14px 40px rgba(0,0,0,0.45), 0 0 0 1px rgba(167,139,250,0.25) !important;
}

/* === 2. CARD content uniform structure === */
.lab .grid .card .ico {
  font-size: 28px !important;
  width: 52px !important;
  height: 52px !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  background: linear-gradient(135deg, rgba(124,58,237,0.18), rgba(192,38,211,0.10)) !important;
  border-radius: 14px !important;
  margin-bottom: 14px !important;
  box-shadow: 0 4px 14px rgba(124,58,237,0.18) !important;
}
.lab .grid .card .uc {
  font-size: 11px !important;
  font-weight: 700 !important;
  color: #A5B4FC !important;
  letter-spacing: 0.08em !important;
  text-transform: none !important;
  margin-bottom: 8px !important;
  line-height: 1.4 !important;
}
.lab .grid .card h3 {
  font-size: 18px !important;
  font-weight: 800 !important;
  color: #FFFFFF !important;
  margin: 0 0 10px !important;
  line-height: 1.3 !important;
  letter-spacing: -0.01em !important;
}
.lab .grid .card .desc,
.lab .grid .card p {
  font-size: 13px !important;
  color: #CBD5E1 !important;
  line-height: 1.55 !important;
  margin: 0 0 14px !important;
  flex-shrink: 1 !important;
}

/* === 3. TAGS uniform === */
.lab .grid .card .tags {
  display: flex !important;
  flex-wrap: wrap !important;
  gap: 6px !important;
  margin: 0 0 14px !important;
}
.lab .grid .card .tags .tag,
.lab .grid .card .tag {
  display: inline-block !important;
  padding: 4px 10px !important;
  font-size: 10px !important;
  font-weight: 700 !important;
  color: #C4B5FD !important;
  background: rgba(168,85,247,0.16) !important;
  border-radius: 6px !important;
  border: 1px solid rgba(168,85,247,0.28) !important;
  letter-spacing: 0.03em !important;
}

/* === 4. SCHEMAS uniform: aspect-ratio + max-height + spacing === */
.lab .grid .card .exp-schema {
  width: 100% !important;
  aspect-ratio: 800/280 !important;
  max-height: 230px !important;
  min-height: 180px !important;
  margin: auto 0 14px !important;
  border-radius: 14px !important;
  overflow: hidden !important;
  position: relative !important;
  box-shadow: 0 6px 24px rgba(15,12,41,0.5) !important;
  border: 1px solid rgba(167,139,250,0.18) !important;
}
.lab .grid .card .exp-schema svg {
  display: block !important;
  width: 100% !important;
  height: 100% !important;
  border-radius: 14px !important;
  object-fit: cover !important;
}

/* === 5. BUTTONS unified standard === */
.lab .grid .card .go,
.lab .grid .card .card-link,
.lab .grid .card .btn {
  position: absolute !important;
  bottom: 18px !important;
  left: 24px !important;
  right: 24px !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  padding: 11px 18px !important;
  font-size: 13px !important;
  font-weight: 700 !important;
  color: #FFFFFF !important;
  background: linear-gradient(135deg, #7c3aed, #5b21b6) !important;
  border: none !important;
  border-radius: 10px !important;
  cursor: pointer !important;
  letter-spacing: 0.02em !important;
  text-decoration: none !important;
  text-align: center !important;
  transition: transform 0.2s, box-shadow 0.2s, filter 0.2s !important;
  box-shadow: 0 4px 14px rgba(124,58,237,0.35) !important;
  width: auto !important;
}
.lab .grid .card .go:hover,
.lab .grid .card .card-link:hover,
.lab .grid .card .btn:hover {
  transform: translateY(-1px) !important;
  box-shadow: 0 8px 22px rgba(124,58,237,0.55) !important;
  filter: brightness(1.1) !important;
}

/* Override absolute badges/marquers haut-droite (skillforge etc) */
.lab .grid .card > div[style*="position:absolute"][style*="top:10px"],
.lab .grid .card > div[style*="position:absolute"][style*="top: 10px"] {
  position: absolute !important;
  top: 14px !important;
  right: 14px !important;
  padding: 4px 10px !important;
  border-radius: 14px !important;
  font-size: 9px !important;
  font-weight: 800 !important;
  letter-spacing: 0.06em !important;
  z-index: 2 !important;
}

/* === 6. KILL inline pollution D993 === */
.lab .grid .card [style*="D993-DARK-SPEC"],
.lab .grid .card [style*="-webkit-text-fill-color:#E8EDF6"] {
  color: inherit !important;
  -webkit-text-fill-color: inherit !important;
}

/* === 7. Master section above grid (hero orchestration) - same aspect-ratio === */
.lab .master .exp-schema,
section.hero .exp-schema {
  aspect-ratio: 800/280 !important;
  max-height: 380px !important;
}

/* === 8. Filter bar tighter & cleaner === */
.cat-filter-bar {
  display: flex !important;
  flex-wrap: wrap !important;
  gap: 8px !important;
  margin: 28px 0 22px !important;
  padding: 14px 18px !important;
  background: rgba(15,12,41,0.55) !important;
  border-radius: 12px !important;
  border: 1px solid rgba(167,139,250,0.18) !important;
  align-items: center !important;
}
.cat-filter-bar .cat-pill {
  padding: 6px 14px !important;
  font-size: 12px !important;
  font-weight: 700 !important;
  border-radius: 18px !important;
  background: rgba(167,139,250,0.10) !important;
  color: #C4B5FD !important;
  border: 1px solid rgba(167,139,250,0.25) !important;
  cursor: pointer !important;
  transition: all 0.2s !important;
}
.cat-filter-bar .cat-pill:hover { background: rgba(167,139,250,0.22) !important; }
.cat-filter-bar .cat-pill.active {
  background: linear-gradient(135deg, #7c3aed, #5b21b6) !important;
  color: #fff !important;
  border-color: transparent !important;
}
.cat-filter-bar .cat-count {
  display: inline-block !important;
  margin-left: 4px !important;
  padding: 1px 6px !important;
  font-size: 10px !important;
  background: rgba(255,255,255,0.18) !important;
  border-radius: 8px !important;
}

/* === 9. Mobile responsive === */
@media (max-width: 900px) {
  .lab .grid { grid-template-columns: 1fr !important; }
  .lab .grid .card { min-height: 480px !important; max-height: none !important; }
}
/* D1094 - WEVIA Lab full standardization
 * Yacine: standardise taille blocs, page fluide, pas de duplication patch,
 * boutons fonctionnent, schemas beaux, cards meme taille meme bouton standard
 */

/* === 1. CARDS uniform size === */
#lab .grid, .grid {
  display: grid !important;
  grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  gap: 22px !important;
  grid-auto-rows: 1fr !important;
}
#lab .grid, .grid .card,
#lab .grid, .grid .card.span6 {
  min-height: 560px !important;
  max-height: 680px !important;
  display: flex !important;
  flex-direction: column !important;
  padding: 22px 24px 70px !important;
  border-radius: 18px !important;
  position: relative !important;
  box-sizing: border-box !important;
  overflow: hidden !important;
  background: linear-gradient(135deg, rgba(30,27,75,0.45), rgba(15,12,41,0.55)) !important;
  border: 1px solid rgba(167,139,250,0.18) !important;
  backdrop-filter: blur(8px) !important;
  transition: transform 0.25s ease, border-color 0.25s ease, box-shadow 0.25s ease !important;
}
#lab .grid, .grid .card:hover {
  transform: translateY(-3px) !important;
  border-color: rgba(167,139,250,0.45) !important;
  box-shadow: 0 14px 40px rgba(0,0,0,0.45), 0 0 0 1px rgba(167,139,250,0.25) !important;
}

/* === 2. CARD content uniform structure === */
#lab .grid, .grid .card .ico {
  font-size: 28px !important;
  width: 52px !important;
  height: 52px !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  background: linear-gradient(135deg, rgba(124,58,237,0.18), rgba(192,38,211,0.10)) !important;
  border-radius: 14px !important;
  margin-bottom: 14px !important;
  box-shadow: 0 4px 14px rgba(124,58,237,0.18) !important;
}
#lab .grid, .grid .card .uc {
  font-size: 11px !important;
  font-weight: 700 !important;
  color: #A5B4FC !important;
  letter-spacing: 0.08em !important;
  text-transform: none !important;
  margin-bottom: 8px !important;
  line-height: 1.4 !important;
}
#lab .grid, .grid .card h3 {
  font-size: 18px !important;
  font-weight: 800 !important;
  color: #FFFFFF !important;
  margin: 0 0 10px !important;
  line-height: 1.3 !important;
  letter-spacing: -0.01em !important;
}
#lab .grid, .grid .card .desc,
#lab .grid, .grid .card p {
  font-size: 13px !important;
  color: #CBD5E1 !important;
  line-height: 1.55 !important;
  margin: 0 0 14px !important;
  flex-shrink: 1 !important;
}

/* === 3. TAGS uniform === */
#lab .grid, .grid .card .tags {
  display: flex !important;
  flex-wrap: wrap !important;
  gap: 6px !important;
  margin: 0 0 14px !important;
}
#lab .grid, .grid .card .tags .tag,
#lab .grid, .grid .card .tag {
  display: inline-block !important;
  padding: 4px 10px !important;
  font-size: 10px !important;
  font-weight: 700 !important;
  color: #C4B5FD !important;
  background: rgba(168,85,247,0.16) !important;
  border-radius: 6px !important;
  border: 1px solid rgba(168,85,247,0.28) !important;
  letter-spacing: 0.03em !important;
}

/* === 4. SCHEMAS uniform: aspect-ratio + max-height + spacing === */
#lab .grid, .grid .card .exp-schema {
  width: 100% !important;
  aspect-ratio: 800/280 !important;
  max-height: 230px !important;
  min-height: 180px !important;
  margin: auto 0 14px !important;
  border-radius: 14px !important;
  overflow: hidden !important;
  position: relative !important;
  box-shadow: 0 6px 24px rgba(15,12,41,0.5) !important;
  border: 1px solid rgba(167,139,250,0.18) !important;
}
#lab .grid, .grid .card .exp-schema svg {
  display: block !important;
  width: 100% !important;
  height: 100% !important;
  border-radius: 14px !important;
  object-fit: cover !important;
}

/* === 5. BUTTONS unified standard === */
#lab .grid, .grid .card .go,
#lab .grid, .grid .card .card-link,
#lab .grid, .grid .card .btn {
  position: absolute !important;
  bottom: 18px !important;
  left: 24px !important;
  right: 24px !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  padding: 11px 18px !important;
  font-size: 13px !important;
  font-weight: 700 !important;
  color: #FFFFFF !important;
  background: linear-gradient(135deg, #7c3aed, #5b21b6) !important;
  border: none !important;
  border-radius: 10px !important;
  cursor: pointer !important;
  letter-spacing: 0.02em !important;
  text-decoration: none !important;
  text-align: center !important;
  transition: transform 0.2s, box-shadow 0.2s, filter 0.2s !important;
  box-shadow: 0 4px 14px rgba(124,58,237,0.35) !important;
  width: auto !important;
}
#lab .grid, .grid .card .go:hover,
#lab .grid, .grid .card .card-link:hover,
#lab .grid, .grid .card .btn:hover {
  transform: translateY(-1px) !important;
  box-shadow: 0 8px 22px rgba(124,58,237,0.55) !important;
  filter: brightness(1.1) !important;
}

/* Override absolute badges/marquers haut-droite (skillforge etc) */
#lab .grid, .grid .card > div[style*="position:absolute"][style*="top:10px"],
#lab .grid, .grid .card > div[style*="position:absolute"][style*="top: 10px"] {
  position: absolute !important;
  top: 14px !important;
  right: 14px !important;
  padding: 4px 10px !important;
  border-radius: 14px !important;
  font-size: 9px !important;
  font-weight: 800 !important;
  letter-spacing: 0.06em !important;
  z-index: 2 !important;
}

/* === 6. KILL inline pollution D993 === */
#lab .grid, .grid .card [style*="D993-DARK-SPEC"],
#lab .grid, .grid .card [style*="-webkit-text-fill-color:#E8EDF6"] {
  color: inherit !important;
  -webkit-text-fill-color: inherit !important;
}

/* === 7. Master section above grid (hero orchestration) - same aspect-ratio === */
#lab .master .exp-schema,
section.hero .exp-schema {
  aspect-ratio: 800/280 !important;
  max-height: 380px !important;
}

/* === 8. Filter bar tighter & cleaner === */
.cat-filter-bar {
  display: flex !important;
  flex-wrap: wrap !important;
  gap: 8px !important;
  margin: 28px 0 22px !important;
  padding: 14px 18px !important;
  background: rgba(15,12,41,0.55) !important;
  border-radius: 12px !important;
  border: 1px solid rgba(167,139,250,0.18) !important;
  align-items: center !important;
}
.cat-filter-bar .cat-pill {
  padding: 6px 14px !important;
  font-size: 12px !important;
  font-weight: 700 !important;
  border-radius: 18px !important;
  background: rgba(167,139,250,0.10) !important;
  color: #C4B5FD !important;
  border: 1px solid rgba(167,139,250,0.25) !important;
  cursor: pointer !important;
  transition: all 0.2s !important;
}
.cat-filter-bar .cat-pill:hover { background: rgba(167,139,250,0.22) !important; }
.cat-filter-bar .cat-pill.active {
  background: linear-gradient(135deg, #7c3aed, #5b21b6) !important;
  color: #fff !important;
  border-color: transparent !important;
}
.cat-filter-bar .cat-count {
  display: inline-block !important;
  margin-left: 4px !important;
  padding: 1px 6px !important;
  font-size: 10px !important;
  background: rgba(255,255,255,0.18) !important;
  border-radius: 8px !important;
}

/* === 9. Mobile responsive === */
@media (max-width: 900px) {
  #lab .grid, .grid { grid-template-columns: 1fr !important; }
  #lab .grid, .grid .card { min-height: 480px !important; max-height: none !important; }
}
/* D1094 - WEVIA Lab full standardization v3 - selecteurs corrects */

/* === 1. CARDS uniform size === */
#lab .grid {
  display: grid !important;
  grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  gap: 22px !important;
  grid-auto-rows: 1fr !important;
}
#lab .grid .card,
#lab .grid .card.span6 {
  min-height: 560px !important;
  max-height: 680px !important;
  display: flex !important;
  flex-direction: column !important;
  padding: 22px 24px 70px !important;
  border-radius: 18px !important;
  position: relative !important;
  box-sizing: border-box !important;
  overflow: hidden !important;
  background: linear-gradient(135deg, rgba(30,27,75,0.45), rgba(15,12,41,0.55)) !important;
  border: 1px solid rgba(167,139,250,0.18) !important;
  backdrop-filter: blur(8px) !important;
  transition: transform 0.25s ease, border-color 0.25s ease, box-shadow 0.25s ease !important;
}
#lab .grid .card:hover {
  transform: translateY(-3px) !important;
  border-color: rgba(167,139,250,0.45) !important;
  box-shadow: 0 14px 40px rgba(0,0,0,0.45), 0 0 0 1px rgba(167,139,250,0.25) !important;
}

/* === 2. CARD content uniform structure === */
#lab .grid .card .ico {
  font-size: 28px !important;
  width: 52px !important;
  height: 52px !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  background: linear-gradient(135deg, rgba(124,58,237,0.18), rgba(192,38,211,0.10)) !important;
  border-radius: 14px !important;
  margin-bottom: 14px !important;
  box-shadow: 0 4px 14px rgba(124,58,237,0.18) !important;
  flex-shrink: 0 !important;
}
#lab .grid .card .uc {
  font-size: 11px !important;
  font-weight: 700 !important;
  color: #A5B4FC !important;
  letter-spacing: 0.08em !important;
  margin-bottom: 8px !important;
  line-height: 1.4 !important;
}
#lab .grid .card h3 {
  font-size: 18px !important;
  font-weight: 800 !important;
  color: #FFFFFF !important;
  margin: 0 0 10px !important;
  line-height: 1.3 !important;
  letter-spacing: -0.01em !important;
}
#lab .grid .card .desc,
#lab .grid .card > p {
  font-size: 13px !important;
  color: #CBD5E1 !important;
  line-height: 1.55 !important;
  margin: 0 0 14px !important;
}

/* === 3. TAGS uniform === */
#lab .grid .card .tags {
  display: flex !important;
  flex-wrap: wrap !important;
  gap: 6px !important;
  margin: 0 0 14px !important;
}
#lab .grid .card .tag {
  display: inline-block !important;
  padding: 4px 10px !important;
  font-size: 10px !important;
  font-weight: 700 !important;
  color: #C4B5FD !important;
  background: rgba(168,85,247,0.16) !important;
  border-radius: 6px !important;
  border: 1px solid rgba(168,85,247,0.28) !important;
  letter-spacing: 0.03em !important;
}

/* === 4. SCHEMAS uniform === */
#lab .grid .card .exp-schema {
  width: 100% !important;
  aspect-ratio: 800/280 !important;
  max-height: 230px !important;
  min-height: 180px !important;
  margin: auto 0 14px !important;
  border-radius: 14px !important;
  overflow: hidden !important;
  position: relative !important;
  box-shadow: 0 6px 24px rgba(15,12,41,0.5) !important;
  border: 1px solid rgba(167,139,250,0.18) !important;
}
#lab .grid .card .exp-schema svg {
  display: block !important;
  width: 100% !important;
  height: 100% !important;
  border-radius: 14px !important;
  object-fit: cover !important;
}

/* === 5. BUTTONS unified standard === */
#lab .grid .card .go,
#lab .grid .card .card-link,
#lab .grid .card > .btn {
  position: absolute !important;
  bottom: 18px !important;
  left: 24px !important;
  right: 24px !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  padding: 11px 18px !important;
  font-size: 13px !important;
  font-weight: 700 !important;
  color: #FFFFFF !important;
  background: linear-gradient(135deg, #7c3aed, #5b21b6) !important;
  border: none !important;
  border-radius: 10px !important;
  cursor: pointer !important;
  letter-spacing: 0.02em !important;
  text-decoration: none !important;
  text-align: center !important;
  transition: transform 0.2s, box-shadow 0.2s, filter 0.2s !important;
  box-shadow: 0 4px 14px rgba(124,58,237,0.35) !important;
  width: auto !important;
  z-index: 3 !important;
}
#lab .grid .card .go:hover,
#lab .grid .card .card-link:hover,
#lab .grid .card > .btn:hover {
  transform: translateY(-1px) !important;
  box-shadow: 0 8px 22px rgba(124,58,237,0.55) !important;
  filter: brightness(1.1) !important;
}

/* === 6. KILL inline pollution D993 === */
#lab .grid .card [style*="E8EDF6"] {
  color: inherit !important;
  -webkit-text-fill-color: inherit !important;
}

/* === 7. Master section above grid (hero orchestration) === */
#lab .master .exp-schema,
section.hero .exp-schema {
  aspect-ratio: 800/280 !important;
  max-height: 380px !important;
}

/* === 8. Filter bar === */
.cat-filter-bar {
  display: flex !important;
  flex-wrap: wrap !important;
  gap: 8px !important;
  margin: 28px 0 22px !important;
  padding: 14px 18px !important;
  background: rgba(15,12,41,0.55) !important;
  border-radius: 12px !important;
  border: 1px solid rgba(167,139,250,0.18) !important;
  align-items: center !important;
}
.cat-filter-bar .cat-pill {
  padding: 6px 14px !important;
  font-size: 12px !important;
  font-weight: 700 !important;
  border-radius: 18px !important;
  background: rgba(167,139,250,0.10) !important;
  color: #C4B5FD !important;
  border: 1px solid rgba(167,139,250,0.25) !important;
  cursor: pointer !important;
  transition: all 0.2s !important;
}
.cat-filter-bar .cat-pill:hover { background: rgba(167,139,250,0.22) !important; }
.cat-filter-bar .cat-pill.active {
  background: linear-gradient(135deg, #7c3aed, #5b21b6) !important;
  color: #fff !important;
  border-color: transparent !important;
}
.cat-filter-bar .cat-count {
  display: inline-block !important;
  margin-left: 4px !important;
  padding: 1px 6px !important;
  font-size: 10px !important;
  background: rgba(255,255,255,0.18) !important;
  border-radius: 8px !important;
}

/* === 9. Mobile responsive === */
@media (max-width: 900px) {
  #lab .grid { grid-template-columns: 1fr !important; }
  #lab .grid .card { min-height: 480px !important; max-height: none !important; }
}
/* D1094 - WEVIA Lab full standardization v3 - selecteurs corrects */

/* === 1. CARDS uniform size === */
.grid {
  display: grid !important;
  grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  gap: 22px !important;
  grid-auto-rows: 1fr !important;
}
.grid .card,
.grid .card.span6 {
  min-height: 560px !important;
  max-height: 680px !important;
  display: flex !important;
  flex-direction: column !important;
  padding: 22px 24px 70px !important;
  border-radius: 18px !important;
  position: relative !important;
  box-sizing: border-box !important;
  overflow: hidden !important;
  background: linear-gradient(135deg, rgba(30,27,75,0.45), rgba(15,12,41,0.55)) !important;
  border: 1px solid rgba(167,139,250,0.18) !important;
  backdrop-filter: blur(8px) !important;
  transition: transform 0.25s ease, border-color 0.25s ease, box-shadow 0.25s ease !important;
}
.grid .card:hover {
  transform: translateY(-3px) !important;
  border-color: rgba(167,139,250,0.45) !important;
  box-shadow: 0 14px 40px rgba(0,0,0,0.45), 0 0 0 1px rgba(167,139,250,0.25) !important;
}

/* === 2. CARD content uniform structure === */
.grid .card .ico {
  font-size: 28px !important;
  width: 52px !important;
  height: 52px !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  background: linear-gradient(135deg, rgba(124,58,237,0.18), rgba(192,38,211,0.10)) !important;
  border-radius: 14px !important;
  margin-bottom: 14px !important;
  box-shadow: 0 4px 14px rgba(124,58,237,0.18) !important;
  flex-shrink: 0 !important;
}
.grid .card .uc {
  font-size: 11px !important;
  font-weight: 700 !important;
  color: #A5B4FC !important;
  letter-spacing: 0.08em !important;
  margin-bottom: 8px !important;
  line-height: 1.4 !important;
}
.grid .card h3 {
  font-size: 18px !important;
  font-weight: 800 !important;
  color: #FFFFFF !important;
  margin: 0 0 10px !important;
  line-height: 1.3 !important;
  letter-spacing: -0.01em !important;
}
.grid .card .desc,
.grid .card > p {
  font-size: 13px !important;
  color: #CBD5E1 !important;
  line-height: 1.55 !important;
  margin: 0 0 14px !important;
}

/* === 3. TAGS uniform === */
.grid .card .tags {
  display: flex !important;
  flex-wrap: wrap !important;
  gap: 6px !important;
  margin: 0 0 14px !important;
}
.grid .card .tag {
  display: inline-block !important;
  padding: 4px 10px !important;
  font-size: 10px !important;
  font-weight: 700 !important;
  color: #C4B5FD !important;
  background: rgba(168,85,247,0.16) !important;
  border-radius: 6px !important;
  border: 1px solid rgba(168,85,247,0.28) !important;
  letter-spacing: 0.03em !important;
}

/* === 4. SCHEMAS uniform === */
.grid .card .exp-schema {
  width: 100% !important;
  aspect-ratio: 800/280 !important;
  max-height: 230px !important;
  min-height: 180px !important;
  margin: auto 0 14px !important;
  border-radius: 14px !important;
  overflow: hidden !important;
  position: relative !important;
  box-shadow: 0 6px 24px rgba(15,12,41,0.5) !important;
  border: 1px solid rgba(167,139,250,0.18) !important;
}
.grid .card .exp-schema svg {
  display: block !important;
  width: 100% !important;
  height: 100% !important;
  border-radius: 14px !important;
  object-fit: cover !important;
}

/* === 5. BUTTONS unified standard === */
.grid .card .go,
.grid .card .card-link,
.grid .card > .btn {
  position: absolute !important;
  bottom: 18px !important;
  left: 24px !important;
  right: 24px !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  padding: 11px 18px !important;
  font-size: 13px !important;
  font-weight: 700 !important;
  color: #FFFFFF !important;
  background: linear-gradient(135deg, #7c3aed, #5b21b6) !important;
  border: none !important;
  border-radius: 10px !important;
  cursor: pointer !important;
  letter-spacing: 0.02em !important;
  text-decoration: none !important;
  text-align: center !important;
  transition: transform 0.2s, box-shadow 0.2s, filter 0.2s !important;
  box-shadow: 0 4px 14px rgba(124,58,237,0.35) !important;
  width: auto !important;
  z-index: 3 !important;
}
.grid .card .go:hover,
.grid .card .card-link:hover,
.grid .card > .btn:hover {
  transform: translateY(-1px) !important;
  box-shadow: 0 8px 22px rgba(124,58,237,0.55) !important;
  filter: brightness(1.1) !important;
}

/* === 6. KILL inline pollution D993 === */
.grid .card [style*="E8EDF6"] {
  color: inherit !important;
  -webkit-text-fill-color: inherit !important;
}

/* === 7. Master section above grid (hero orchestration) === */
#lab .master .exp-schema,
section.hero .exp-schema {
  aspect-ratio: 800/280 !important;
  max-height: 380px !important;
}

/* === 8. Filter bar === */
.cat-filter-bar {
  display: flex !important;
  flex-wrap: wrap !important;
  gap: 8px !important;
  margin: 28px 0 22px !important;
  padding: 14px 18px !important;
  background: rgba(15,12,41,0.55) !important;
  border-radius: 12px !important;
  border: 1px solid rgba(167,139,250,0.18) !important;
  align-items: center !important;
}
.cat-filter-bar .cat-pill {
  padding: 6px 14px !important;
  font-size: 12px !important;
  font-weight: 700 !important;
  border-radius: 18px !important;
  background: rgba(167,139,250,0.10) !important;
  color: #C4B5FD !important;
  border: 1px solid rgba(167,139,250,0.25) !important;
  cursor: pointer !important;
  transition: all 0.2s !important;
}
.cat-filter-bar .cat-pill:hover { background: rgba(167,139,250,0.22) !important; }
.cat-filter-bar .cat-pill.active {
  background: linear-gradient(135deg, #7c3aed, #5b21b6) !important;
  color: #fff !important;
  border-color: transparent !important;
}
.cat-filter-bar .cat-count {
  display: inline-block !important;
  margin-left: 4px !important;
  padding: 1px 6px !important;
  font-size: 10px !important;
  background: rgba(255,255,255,0.18) !important;
  border-radius: 8px !important;
}

/* === 9. Mobile responsive === */
@media (max-width: 900px) {
  .grid { grid-template-columns: 1fr !important; }
  .grid .card { min-height: 480px !important; max-height: none !important; }
}
/* D1094 - WEVIA Lab standardization v4 - flex order + bouton sous schema */

/* === GRID === */
.grid {
  display: grid !important;
  grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  gap: 22px !important;
  grid-auto-rows: 1fr !important;
}

/* === CARDS uniform === */
.grid .card,
.grid .card.span6 {
  min-height: 540px !important;
  max-height: 640px !important;
  display: flex !important;
  flex-direction: column !important;
  padding: 22px 24px !important;
  border-radius: 18px !important;
  position: relative !important;
  box-sizing: border-box !important;
  overflow: hidden !important;
  background: linear-gradient(135deg, rgba(30,27,75,0.45), rgba(15,12,41,0.55)) !important;
  border: 1px solid rgba(167,139,250,0.18) !important;
  backdrop-filter: blur(8px) !important;
  transition: transform 0.25s, border-color 0.25s, box-shadow 0.25s !important;
}
.grid .card:hover {
  transform: translateY(-3px) !important;
  border-color: rgba(167,139,250,0.45) !important;
  box-shadow: 0 14px 40px rgba(0,0,0,0.45), 0 0 0 1px rgba(167,139,250,0.25) !important;
}

/* === CARD CONTENT — flex order forcé === */
.grid .card .ico { order: 1 !important; font-size: 24px !important; width: 46px !important; height: 46px !important;
  display: inline-flex !important; align-items: center !important; justify-content: center !important;
  background: linear-gradient(135deg, rgba(124,58,237,0.18), rgba(192,38,211,0.10)) !important;
  border-radius: 12px !important; margin: 0 0 12px !important;
  box-shadow: 0 4px 14px rgba(124,58,237,0.18) !important; flex-shrink: 0 !important; }

.grid .card .uc { order: 2 !important; font-size: 10px !important; font-weight: 700 !important;
  color: #A5B4FC !important; letter-spacing: 0.08em !important; margin: 0 0 6px !important; }

.grid .card h3 { order: 3 !important; font-size: 16px !important; font-weight: 800 !important;
  color: #FFFFFF !important; margin: 0 0 8px !important; line-height: 1.3 !important; }

.grid .card .desc,
.grid .card > p { order: 4 !important; font-size: 12px !important; color: #CBD5E1 !important;
  line-height: 1.55 !important; margin: 0 0 10px !important;
  display: -webkit-box !important; -webkit-line-clamp: 4 !important; -webkit-box-orient: vertical !important;
  overflow: hidden !important; }

.grid .card .tags { order: 5 !important; display: flex !important; flex-wrap: wrap !important;
  gap: 5px !important; margin: 0 0 12px !important; }
.grid .card .tag { display: inline-block !important; padding: 3px 8px !important; font-size: 9px !important;
  font-weight: 700 !important; color: #C4B5FD !important; background: rgba(168,85,247,0.16) !important;
  border-radius: 5px !important; border: 1px solid rgba(168,85,247,0.28) !important;
  letter-spacing: 0.03em !important; }

/* === SCHEMA in middle, fills space === */
.grid .card .exp-schema { order: 90 !important;
  width: 100% !important; aspect-ratio: 800/280 !important;
  max-height: 200px !important; min-height: 150px !important;
  margin: auto 0 12px !important; border-radius: 12px !important;
  overflow: hidden !important; position: relative !important;
  box-shadow: 0 6px 24px rgba(15,12,41,0.5) !important;
  border: 1px solid rgba(167,139,250,0.18) !important; flex-shrink: 0 !important; }
.grid .card .exp-schema svg { display: block !important; width: 100% !important; height: 100% !important;
  border-radius: 12px !important; object-fit: cover !important; }

/* === BUTTONS — bottom, normal flow === */
.grid .card .go,
.grid .card > .card-link {
  order: 100 !important;
  position: static !important; bottom: auto !important; left: auto !important; right: auto !important;
  display: flex !important; align-items: center !important; justify-content: center !important;
  margin: auto 0 0 !important;
  padding: 11px 18px !important; font-size: 13px !important; font-weight: 700 !important;
  color: #FFFFFF !important;
  background: linear-gradient(135deg, #7c3aed, #5b21b6) !important;
  border: none !important; border-radius: 10px !important; cursor: pointer !important;
  letter-spacing: 0.02em !important; text-decoration: none !important; text-align: center !important;
  transition: transform 0.2s, box-shadow 0.2s, filter 0.2s !important;
  box-shadow: 0 4px 14px rgba(124,58,237,0.35) !important;
  width: 100% !important; flex-shrink: 0 !important; }
.grid .card .go:hover,
.grid .card > .card-link:hover {
  transform: translateY(-1px) !important;
  box-shadow: 0 8px 22px rgba(124,58,237,0.55) !important;
  filter: brightness(1.1) !important; }

/* === Skill Forge spec — purple distinct === */
.grid .card[data-tool="skillforge"] { order: -1 !important; }
.grid .card[data-tool="skillforge"] > div[style*="position:absolute"][style*="top:10px"] {
  position: absolute !important; top: 14px !important; right: 14px !important; z-index: 5 !important; }

/* === KILL D993 inline pollution === */
.grid .card [style*="E8EDF6"] { color: inherit !important; -webkit-text-fill-color: inherit !important; }

/* === Master section above (hero) === */
section.hero .exp-schema { aspect-ratio: 800/280 !important; max-height: 380px !important; }

/* === Filter bar === */
.cat-filter-bar { display: flex !important; flex-wrap: wrap !important; gap: 8px !important;
  margin: 28px 0 22px !important; padding: 14px 18px !important;
  background: rgba(15,12,41,0.55) !important; border-radius: 12px !important;
  border: 1px solid rgba(167,139,250,0.18) !important; align-items: center !important; }
.cat-filter-bar .cat-pill { padding: 6px 14px !important; font-size: 12px !important;
  font-weight: 700 !important; border-radius: 18px !important;
  background: rgba(167,139,250,0.10) !important; color: #C4B5FD !important;
  border: 1px solid rgba(167,139,250,0.25) !important; cursor: pointer !important; transition: all 0.2s !important; }
.cat-filter-bar .cat-pill:hover { background: rgba(167,139,250,0.22) !important; }
.cat-filter-bar .cat-pill.active {
  background: linear-gradient(135deg, #7c3aed, #5b21b6) !important;
  color: #fff !important; border-color: transparent !important; }
.cat-filter-bar .cat-count { display: inline-block !important; margin-left: 4px !important;
  padding: 1px 6px !important; font-size: 10px !important;
  background: rgba(255,255,255,0.18) !important; border-radius: 8px !important; }

/* === Mobile === */
@media (max-width: 900px) {
  .grid { grid-template-columns: 1fr !important; }
  .grid .card { min-height: 460px !important; max-height: none !important; }
}
/* D1094 - WEVIA Lab standardization v5 - dedicated class avoid legacy */

/* === WRAPPER (new class to avoid .grid legacy 12-col) === */
.wevia-cards-grid {
  display: grid !important;
  grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  gap: 22px !important;
  margin: 28px 0 !important;
}

/* === CARDS uniform === */
.wevia-cards-grid > .card,
.wevia-cards-grid > .card.span6 {
  min-height: 540px !important;
  max-height: 640px !important;
  display: flex !important;
  flex-direction: column !important;
  padding: 22px 24px !important;
  border-radius: 18px !important;
  position: relative !important;
  box-sizing: border-box !important;
  overflow: hidden !important;
  background: linear-gradient(135deg, rgba(30,27,75,0.55), rgba(15,12,41,0.6)) !important;
  border: 1px solid rgba(167,139,250,0.18) !important;
  backdrop-filter: blur(8px) !important;
  transition: transform 0.25s, border-color 0.25s, box-shadow 0.25s !important;
  width: auto !important;
  grid-column: auto !important;
}
.wevia-cards-grid > .card:hover {
  transform: translateY(-3px) !important;
  border-color: rgba(167,139,250,0.45) !important;
  box-shadow: 0 14px 40px rgba(0,0,0,0.45), 0 0 0 1px rgba(167,139,250,0.25) !important;
}

/* D1118-CAT-HIDDEN-FIX: filter pills couldn't hide cards because .wevia-cards-grid > .card
   had display:flex !important which beat .card.cat-hidden{display:none} (sans !important).
   This rule restores filter functionality. */
.wevia-cards-grid > .card.cat-hidden,
.card.cat-hidden,
.lab .grid .card.cat-hidden { display: none !important; }


/* === CARD content flex order === */
.wevia-cards-grid > .card .ico { order: 1 !important; font-size: 24px !important; width: 46px !important; height: 46px !important;
  display: inline-flex !important; align-items: center !important; justify-content: center !important;
  background: linear-gradient(135deg, rgba(124,58,237,0.22), rgba(192,38,211,0.12)) !important;
  border-radius: 12px !important; margin: 0 0 12px !important; flex-shrink: 0 !important; }
.wevia-cards-grid > .card .uc { order: 2 !important; font-size: 10px !important; font-weight: 700 !important;
  color: #A5B4FC !important; letter-spacing: 0.08em !important; margin: 0 0 6px !important; }
.wevia-cards-grid > .card h3 { order: 3 !important; font-size: 16px !important; font-weight: 800 !important;
  color: #FFFFFF !important; margin: 0 0 8px !important; line-height: 1.3 !important; }
.wevia-cards-grid > .card .desc,
.wevia-cards-grid > .card > p { order: 4 !important; font-size: 12px !important; color: #CBD5E1 !important;
  line-height: 1.55 !important; margin: 0 0 10px !important;
  display: -webkit-box !important; -webkit-line-clamp: 4 !important; -webkit-box-orient: vertical !important;
  overflow: hidden !important; }
.wevia-cards-grid > .card .tags { order: 5 !important; display: flex !important; flex-wrap: wrap !important;
  gap: 5px !important; margin: 0 0 12px !important; }
.wevia-cards-grid > .card .tag { display: inline-block !important; padding: 3px 8px !important; font-size: 9px !important;
  font-weight: 700 !important; color: #C4B5FD !important; background: rgba(168,85,247,0.18) !important;
  border-radius: 5px !important; border: 1px solid rgba(168,85,247,0.32) !important; letter-spacing: 0.03em !important; }

/* === SCHEMA fills available === */
.wevia-cards-grid > .card .exp-schema { order: 90 !important;
  width: 100% !important; aspect-ratio: 800/280 !important;
  max-height: 200px !important; min-height: 150px !important;
  margin: auto 0 12px !important; border-radius: 12px !important;
  overflow: hidden !important; position: relative !important;
  box-shadow: 0 6px 24px rgba(15,12,41,0.5) !important;
  border: 1px solid rgba(167,139,250,0.18) !important; flex-shrink: 0 !important; }
.wevia-cards-grid > .card .exp-schema svg { display: block !important; width: 100% !important; height: 100% !important;
  border-radius: 12px !important; object-fit: cover !important; }

/* === BUTTON at bottom flex === */
.wevia-cards-grid > .card .go,
.wevia-cards-grid > .card > .card-link {
  order: 100 !important;
  position: static !important;
  display: flex !important; align-items: center !important; justify-content: center !important;
  margin: auto 0 0 !important;
  padding: 11px 18px !important; font-size: 13px !important; font-weight: 700 !important;
  color: #FFFFFF !important;
  background: linear-gradient(135deg, #7c3aed, #5b21b6) !important;
  border: none !important; border-radius: 10px !important; cursor: pointer !important;
  letter-spacing: 0.02em !important; text-decoration: none !important; text-align: center !important;
  transition: transform 0.2s, box-shadow 0.2s, filter 0.2s !important;
  box-shadow: 0 4px 14px rgba(124,58,237,0.35) !important;
  width: 100% !important; flex-shrink: 0 !important;
  box-sizing: border-box !important; }
.wevia-cards-grid > .card .go:hover,
.wevia-cards-grid > .card > .card-link:hover {
  transform: translateY(-1px) !important;
  box-shadow: 0 8px 22px rgba(124,58,237,0.55) !important;
  filter: brightness(1.1) !important; }

/* === KILL D993 pollution === */
.wevia-cards-grid > .card [style*="E8EDF6"] { color: inherit !important; -webkit-text-fill-color: inherit !important; }

/* === Master section above (hero) === */
section.hero .exp-schema { aspect-ratio: 800/280 !important; max-height: 380px !important; }

/* === Filter bar === */
.cat-filter-bar { display: flex !important; flex-wrap: wrap !important; gap: 8px !important;
  margin: 28px 0 22px !important; padding: 14px 18px !important;
  background: rgba(15,12,41,0.55) !important; border-radius: 12px !important;
  border: 1px solid rgba(167,139,250,0.18) !important; align-items: center !important; }
.cat-filter-bar .cat-pill { padding: 6px 14px !important; font-size: 12px !important;
  font-weight: 700 !important; border-radius: 18px !important;
  background: rgba(167,139,250,0.10) !important; color: #C4B5FD !important;
  border: 1px solid rgba(167,139,250,0.25) !important; cursor: pointer !important; transition: all 0.2s !important; }
.cat-filter-bar .cat-pill:hover { background: rgba(167,139,250,0.22) !important; }
.cat-filter-bar .cat-pill.active {
  background: linear-gradient(135deg, #7c3aed, #5b21b6) !important;
  color: #fff !important; border-color: transparent !important; }
.cat-filter-bar .cat-count { display: inline-block !important; margin-left: 4px !important;
  padding: 1px 6px !important; font-size: 10px !important;
  background: rgba(255,255,255,0.18) !important; border-radius: 8px !important; }

/* === Mobile === */
@media (max-width: 900px) {
  .wevia-cards-grid { grid-template-columns: 1fr !important; }
  .wevia-cards-grid > .card { min-height: 460px !important; max-height: none !important; }
}

/* D1098 - Force HERO master orchestration FULL SIZE */
.master .m-stage,
.master .orch-svg-wrap,
section.hero .m-stage,
section.hero .orch-svg-wrap {
  max-width: none !important;
  width: 100% !important;
  max-height: none !important;
  display: block !important;
}
.master .exp-schema[data-label*='Master orchestration'],
section.hero .exp-schema[data-label*='Master orchestration'] {
  aspect-ratio: 800/280 !important;
  max-height: 380px !important;
  min-height: 240px !important;
  width: 100% !important;
}
.master .exp-schema[data-label*='Master orchestration'] svg,
section.hero .exp-schema[data-label*='Master orchestration'] svg {
  width: 100% !important;
  height: 100% !important;
  max-height: 380px !important;
}

/* D1099 - VERTICAL CENTER master orch in hero grid */
.master {
  align-items: center !important;
}
.master .m-stage {
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  height: 100% !important;
}
.master .orch-svg-wrap {
  width: 100% !important;
  display: block !important;
}
/* ════════════════════════════════════════════════════════════════
 * D1263 — DT CARD CANONICAL ORDERING (root-cause fix)
 * Le module D1094 standardize.css force order:3 sur h3, order:4 sur p,
 * order:90 sur exp-schema pour toutes les .grid .card.
 * MAIS .dt-card a une structure unique (dt-tag, h3, p, exp-schema,
 * dt-input-wrap, dt-row-controls, dt-examples, fbk-bar) avec des
 * enfants .dt-* qui n'ont pas de selector dans D1094 → restent à
 * order:0 → s'affichent AVANT h3 visuellement.
 *
 * Solution : exception spécifique à .dt-card qui force l'ordre HTML
 * logique. Aucun changement HTML, aucun JS injection, pure CSS.
 * Zéro surpatch — c'est l'exception à la règle globale.
 * ════════════════════════════════════════════════════════════════ */

.grid .card.dt-card > .dt-tag         { order: 1  !important; }
.grid .card.dt-card > h3              { order: 2  !important; }
.grid .card.dt-card > p               { order: 3  !important; }
.grid .card.dt-card > .exp-schema     { order: 4  !important; }
.grid .card.dt-card > .dt-input-wrap  { order: 5  !important; }
.grid .card.dt-card > .dt-row-controls{ order: 6  !important; }
.grid .card.dt-card > .dt-examples    { order: 7  !important; }
.grid .card.dt-card > .dt-summary     { order: 8  !important; }
.grid .card.dt-card > .dt-modal       { order: 9  !important; }
.grid .card.dt-card > .fbk-bar        { order: 99 !important; }

/* Même règle pour le wrapper wevia-cards-grid (D1094 wrap) */
.wevia-cards-grid > .card.dt-card > .dt-tag         { order: 1  !important; }
.wevia-cards-grid > .card.dt-card > h3              { order: 2  !important; }
.wevia-cards-grid > .card.dt-card > p               { order: 3  !important; }
.wevia-cards-grid > .card.dt-card > .exp-schema     { order: 4  !important; }
.wevia-cards-grid > .card.dt-card > .dt-input-wrap  { order: 5  !important; }
.wevia-cards-grid > .card.dt-card > .dt-row-controls{ order: 6  !important; }
.wevia-cards-grid > .card.dt-card > .dt-examples    { order: 7  !important; }
.wevia-cards-grid > .card.dt-card > .dt-summary     { order: 8  !important; }
.wevia-cards-grid > .card.dt-card > .dt-modal       { order: 9  !important; }
.wevia-cards-grid > .card.dt-card > .fbk-bar        { order: 99 !important; }

/* ════════════════════════════════════════════════════════════════
 * D1269 — dt-hero-transversal : pleine largeur grid (Yacine demande)
 * Force la dt-card a span les 2 colonnes du wevia-cards-grid.
 * Layout interne 2 colonnes pour aerer (texte gauche, illustration droite).
 * ════════════════════════════════════════════════════════════════ */

.wevia-cards-grid > .card.dt-hero-transversal,
.grid .card.dt-hero-transversal {
  grid-column: 1 / -1 !important;
  max-width: 100% !important;
}

/* Layout 2-colonnes interne sur la dt-hero-transversal en desktop */
@media (min-width: 900px) {
  .wevia-cards-grid > .card.dt-hero-transversal {
    display: grid !important;
    grid-template-columns: 1fr 1fr !important;
    grid-template-areas:
      "tag       tag"
      "title     title"
      "desc      illust"
      "input     illust"
      "controls  illust"
      "examples  examples"
      "summary   summary"
      "modal     modal"
      "feedback  feedback";
    gap: 18px 28px !important;
    align-items: start !important;
    min-height: 0 !important;
    max-height: none !important;
  }
  .wevia-cards-grid > .card.dt-hero-transversal > .dt-tag         { grid-area: tag !important; }
  .wevia-cards-grid > .card.dt-hero-transversal > h3              { grid-area: title !important; }
  .wevia-cards-grid > .card.dt-hero-transversal > p               { grid-area: desc !important; }
  .wevia-cards-grid > .card.dt-hero-transversal > .exp-schema     { grid-area: illust !important; align-self: stretch !important; max-height: 380px !important; }
  .wevia-cards-grid > .card.dt-hero-transversal > .exp-schema svg { max-height: 380px !important; height: auto !important; }
  .wevia-cards-grid > .card.dt-hero-transversal > .dt-input-wrap  { grid-area: input !important; }
  .wevia-cards-grid > .card.dt-hero-transversal > .dt-row-controls{ grid-area: controls !important; }
  .wevia-cards-grid > .card.dt-hero-transversal > .dt-examples    { grid-area: examples !important; }
  .wevia-cards-grid > .card.dt-hero-transversal > .dt-summary     { grid-area: summary !important; }
  .wevia-cards-grid > .card.dt-hero-transversal > .dt-modal       { grid-area: modal !important; }
  .wevia-cards-grid > .card.dt-hero-transversal > .fbk-bar        { grid-area: feedback !important; }
}

/* Mobile: stack vertical preserve ordering */
@media (max-width: 899px) {
  .wevia-cards-grid > .card.dt-hero-transversal {
    display: flex !important;
    flex-direction: column !important;
  }
}

/* ════════════════════════════════════════════════════════════════
 * D1274 — Uniformise cards background AVEC WEVIA Avatar master
 * Yacine demande: meme fond bleu cosmic Avatar pour toutes les cards.
 * Master gradient: linear-gradient(125deg,#120f24,#1e1938,#291f4c) + radial glow purple
 * Application: toutes les .card span6 + dt-card. dt-card override son ancien bg.
 * Zero modification HTML. Pure CSS canonical.
 * ════════════════════════════════════════════════════════════════ */

.wevia-cards-grid > .card,
.wevia-cards-grid > .card.span6,
.lab .grid .card,
.lab .grid .card.span6,
.grid .card.dt-card,
.wevia-cards-grid > .card.dt-card {
  background: linear-gradient(125deg, #120f24 0%, #1e1938 52%, #291f4c 100%) !important;
  border: 1px solid #2e2750 !important;
  position: relative !important;
  overflow: hidden !important;
}

/* Radial glow overlay - meme effet que master Avatar */
.wevia-cards-grid > .card::after,
.lab .grid .card::after {
  content: "";
  position: absolute;
  inset: 0;
  background: radial-gradient(720px 380px at 80% 28%, rgba(124, 109, 255, 0.18), transparent 60%);
  pointer-events: none;
  z-index: 0;
}

/* Ensure card content stays above radial overlay */
.wevia-cards-grid > .card > *,
.lab .grid .card > * {
  position: relative;
  z-index: 1;
}

/* dt-card: glow stronger pour distinguer le premium hero */
.wevia-cards-grid > .card.dt-card::after,
.grid .card.dt-card::after {
  background: radial-gradient(720px 380px at 80% 28%, rgba(167, 139, 250, 0.25), transparent 60%) !important;
}


/* ════════════════════════════════════════════════════════════════
 * D1275 — 3 fixes Yacine: cat-bar fond cosmic + fbk Avatar vrai centrage + SkillForge no crop
 * ════════════════════════════════════════════════════════════════ */

/* Fix 1: Cat-filter-bar fond bleu cosmic identique master Avatar */
.cat-filter-bar {
  background: linear-gradient(125deg, #120f24 0%, #1e1938 52%, #291f4c 100%) !important;
  border: 1px solid #2e2750 !important;
  border-radius: 18px !important;
  padding: 16px 20px !important;
  position: relative !important;
  overflow: hidden !important;
}
.cat-filter-bar::after {
  content: "";
  position: absolute;
  inset: 0;
  background: radial-gradient(720px 200px at 50% 50%, rgba(124,109,255,0.12), transparent 60%);
  pointer-events: none;
  z-index: 0;
}
.cat-filter-bar > * {
  position: relative;
  z-index: 1;
}
.cat-filter-bar .cat-pill {
  background: rgba(255,255,255,0.06) !important;
  border: 1px solid rgba(167,139,250,0.25) !important;
  color: #E0E7FF !important;
  -webkit-text-fill-color: #E0E7FF !important;
}
.cat-filter-bar .cat-pill.active {
  background: linear-gradient(135deg, #6366f1 0%, #8b5cf6 100%) !important;
  color: #fff !important;
  -webkit-text-fill-color: #fff !important;
  border-color: transparent !important;
}
.cat-filter-bar .cat-count {
  color: #A5B4FC !important;
  -webkit-text-fill-color: #A5B4FC !important;
}

/* Fix 2: fbk-bar master Avatar VRAI centrage (override flex:1 du .fbk-q global) */
.master[data-tool] .fbk-bar .fbk-q {
  flex: 0 0 auto !important;
  text-align: center;
}

/* Fix 3: SVG illustrations no crop - max-width 100% au lieu de 420px */
.card.span6 .exp-schema svg,
.wevia-cards-grid > .card.span6 .exp-schema svg,
.lab .grid .card.span6 .exp-schema svg {
  max-width: 100% !important;
  width: 100% !important;
}
.card.span6 .exp-schema {
  max-width: 100% !important;
  width: 100% !important;
}