/* ============================================
   Ressel Crew — Espace membre
   ============================================ */

:root {
  --color-gold: #fbbf24;
  --color-gold-light: #fcd34d;
  --color-gold-dark: #d97706;
  --sidebar-width: 260px;
}

[hidden] {
  display: none !important;
}

/* Couronne dorée sur le « e » */
.logo-e-crown {
  position: relative;
  display: inline-block;
}

.logo-e-crown .crown-icon {
  position: absolute;
  bottom: calc(100% - 2px);
  left: 50%;
  transform: translateX(-50%);
  width: 16px;
  height: 11px;
  fill: var(--color-gold);
  filter: drop-shadow(0 1px 3px rgba(251, 191, 36, 0.6));
  pointer-events: none;
}

.crown-icon-sm {
  width: 14px;
  height: 10px;
  fill: var(--color-gold);
  flex-shrink: 0;
}

.crown-icon-xs {
  width: 10px;
  height: 7px;
  fill: var(--color-gold);
  vertical-align: middle;
}

.logo-icon-member {
  background: linear-gradient(135deg, var(--color-gold), var(--color-gold-dark)) !important;
  box-shadow: 0 0 12px rgba(251, 191, 36, 0.35);
}

.member-badge {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 6px 12px;
  background: rgba(251, 191, 36, 0.12);
  border: 1px solid rgba(251, 191, 36, 0.35);
  border-radius: 100px;
  font-size: 0.75rem;
  font-weight: 600;
  color: var(--color-gold-light);
  letter-spacing: 0.02em;
}

.member-badge-inline {
  display: inline-flex;
  align-items: center;
  gap: 3px;
  font-size: 0.6875rem;
  font-weight: 600;
  color: var(--color-gold);
  margin-left: 4px;
}

/* Layout */
.app-body {
  overflow: hidden;
  height: 100vh;
  height: 100dvh;
}

.app-layout {
  display: flex;
  min-height: 100vh;
  min-height: 100dvh;
  height: 100%;
}

.app-sidebar {
  width: var(--sidebar-width);
  flex-shrink: 0;
  background: var(--color-bg-alt);
  border-right: 1px solid var(--color-border);
  display: flex;
  flex-direction: column;
  padding: 24px 16px;
  position: fixed;
  top: 0;
  left: 0;
  bottom: 0;
  z-index: 100;
  transition: transform 0.3s ease;
}

.app-sidebar .logo {
  margin-bottom: 32px;
  padding: 0 8px;
}

.app-sidebar .logo-text {
  font-size: 1.0625rem;
}

.app-nav {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.app-nav-link {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 12px 14px;
  border-radius: var(--radius-md);
  font-size: 0.9375rem;
  font-weight: 500;
  color: var(--color-text-muted);
  background: none;
  border: none;
  cursor: pointer;
  font-family: inherit;
  width: 100%;
  text-align: left;
  transition: all var(--transition);
}

.app-nav-link svg {
  width: 20px;
  height: 20px;
  flex-shrink: 0;
}

.app-nav-link:hover {
  background: rgba(255, 255, 255, 0.05);
  color: var(--color-text);
}

.app-nav-link.active {
  background: var(--color-accent-glow);
  color: var(--color-accent-light);
  border: 1px solid rgba(16, 185, 129, 0.25);
}

.app-nav-link-muted {
  color: var(--color-text-subtle);
  font-size: 0.875rem;
}

.app-sidebar-footer {
  border-top: 1px solid var(--color-border);
  padding-top: 16px;
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.app-main {
  flex: 1;
  margin-left: var(--sidebar-width);
  display: flex;
  flex-direction: column;
  min-height: 0;
  height: 100vh;
  height: 100dvh;
  overflow: hidden;
}

.app-header {
  display: flex;
  align-items: center;
  gap: 20px;
  padding: 20px 32px;
  border-bottom: 1px solid var(--color-border);
  background: rgba(10, 10, 11, 0.9);
  backdrop-filter: blur(12px);
  position: sticky;
  top: 0;
  z-index: 50;
}

.app-header-title h1 {
  font-size: 1.375rem;
  font-weight: 700;
  margin-bottom: 2px;
}

.app-header-title-row {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 8px 12px;
}

.app-header-title-row h1 {
  margin-bottom: 0;
}

.panel-category-nav {
  display: inline-flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 6px;
}

.panel-category-nav[hidden] {
  display: none;
}

.panel-category-link {
  padding: 4px 11px;
  border: 1px solid transparent;
  border-radius: 999px;
  background: transparent;
  color: var(--color-text-subtle);
  font-size: 0.8125rem;
  font-weight: 500;
  cursor: pointer;
  transition: background 0.15s, color 0.15s, border-color 0.15s;
}

.panel-category-link:hover {
  color: var(--color-text);
  background: rgba(255, 255, 255, 0.04);
}

.panel-category-link[aria-selected='true'] {
  color: var(--color-text);
  background: rgba(255, 255, 255, 0.08);
  border-color: rgba(255, 255, 255, 0.12);
}

#panel-suivi[data-suivi-view='home'] .suivi-chart-card {
  display: none;
}

#panel-suivi[data-suivi-view='home'] .publication-quick-card {
  display: none;
}

#panel-suivi[data-suivi-view='home'] .suivi-side-col {
  display: flex;
}

#panel-suivi[data-suivi-view='chart'] .suivi-layout,
#panel-suivi[data-suivi-view='chart'] .suivi-vinted-card--compact {
  display: none;
}

#panel-suivi[data-suivi-view='chart'] .suivi-chart-card {
  display: block;
}

.app-header-title p {
  font-size: 0.875rem;
  color: var(--color-text-muted);
}

.app-header-user {
  margin-left: auto;
  display: flex;
  align-items: center;
  gap: 10px;
}

/* Taille unifiée — header + aperçu + communauté (pas les cartes « Vos badges ») */
.app-header-user .member-badge,
.header-equipped-badge-wrap .rg-badge,
#badgePreviewSlot .rg-badge,
#panel-communaute .chat-author .admin-badge,
#panel-communaute .chat-role-badge,
#panel-communaute .chat-collection-badge .rg-badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 4px;
  padding: 5px 11px !important;
  min-height: 24px;
  box-sizing: border-box;
  font-size: 0.6875rem !important;
  font-weight: 800;
  letter-spacing: 0.05em;
  line-height: 1.2;
  border-radius: 999px;
  overflow: hidden;
  animation: none !important;
}

.app-header-user .member-badge {
  font-weight: 800;
  letter-spacing: 0.05em;
}

.app-header-user .member-badge .crown-icon-sm {
  width: 11px;
  height: 8px;
}

.header-equipped-badge-wrap .rg-badge-crew,
#badgePreviewSlot .rg-badge-crew,
#panel-communaute .chat-collection-badge .rg-badge-crew {
  animation: rg-crew-glow 3.5s ease-in-out infinite !important;
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.35),
    inset 0 -2px 4px rgba(4, 47, 46, 0.2),
    0 0 10px rgba(16, 185, 129, 0.32),
    0 0 12px rgba(251, 191, 36, 0.12) !important;
}

.header-equipped-badge-wrap .rg-badge-crew-month,
#badgePreviewSlot .rg-badge-crew-month,
#panel-communaute .chat-collection-badge .rg-badge-crew-month {
  animation: rg-crew-month-glow 4s ease-in-out infinite !important;
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.38),
    inset 0 -2px 4px rgba(76, 29, 149, 0.25),
    0 0 10px rgba(124, 58, 237, 0.35),
    0 0 12px rgba(251, 191, 36, 0.14) !important;
}

.header-equipped-badge-wrap .rg-badge-crew-trimestre,
#badgePreviewSlot .rg-badge-crew-trimestre,
#panel-communaute .chat-collection-badge .rg-badge-crew-trimestre {
  animation: rg-crew-trimestre-shift 5s ease-in-out infinite !important;
  box-shadow:
    inset 0 1px 0 rgba(153, 246, 228, 0.35),
    inset 0 -2px 4px rgba(0, 0, 0, 0.32),
    0 0 10px rgba(20, 184, 166, 0.34),
    0 0 12px rgba(244, 63, 94, 0.14) !important;
}

.header-equipped-badge-wrap .rg-badge-crew-semestre,
#badgePreviewSlot .rg-badge-crew-semestre,
#panel-communaute .chat-collection-badge .rg-badge-crew-semestre {
  animation: rg-crew-semestre-shift 4.2s ease-in-out infinite !important;
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.35),
    0 0 10px rgba(99, 102, 241, 0.28),
    0 0 12px rgba(251, 191, 36, 0.18) !important;
}

.header-equipped-badge-wrap .rg-badge-crew-annee,
#badgePreviewSlot .rg-badge-crew-annee,
#panel-communaute .chat-collection-badge .rg-badge-crew-annee {
  animation: rg-crew-annee-shift 3.8s ease-in-out infinite !important;
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.32),
    0 0 10px rgba(236, 72, 153, 0.28),
    0 0 14px rgba(255, 215, 0, 0.16) !important;
}

.header-equipped-badge-wrap .rg-badge-crew-cinq-ans,
#badgePreviewSlot .rg-badge-crew-cinq-ans,
#panel-communaute .chat-collection-badge .rg-badge-crew-cinq-ans {
  padding: 5px 11px 5px 9px !important;
  border-width: 1.5px !important;
  box-shadow: none !important;
}

.header-equipped-badge-wrap .rg-badge-crew::before,
.header-equipped-badge-wrap .rg-badge-crew-month::before,
.header-equipped-badge-wrap .rg-badge-crew-trimestre::before,
.header-equipped-badge-wrap .rg-badge-crew-semestre::before,
.header-equipped-badge-wrap .rg-badge-crew-annee::before,
.header-equipped-badge-wrap .rg-badge-crew-cinq-ans::before,
#badgePreviewSlot .rg-badge-crew::before,
#badgePreviewSlot .rg-badge-crew-month::before,
#badgePreviewSlot .rg-badge-crew-trimestre::before,
#badgePreviewSlot .rg-badge-crew-semestre::before,
#badgePreviewSlot .rg-badge-crew-annee::before,
#badgePreviewSlot .rg-badge-crew-cinq-ans::before,
#panel-communaute .chat-collection-badge .rg-badge-crew::before,
#panel-communaute .chat-collection-badge .rg-badge-crew-month::before,
#panel-communaute .chat-collection-badge .rg-badge-crew-trimestre::before,
#panel-communaute .chat-collection-badge .rg-badge-crew-semestre::before,
#panel-communaute .chat-collection-badge .rg-badge-crew-annee::before,
#panel-communaute .chat-collection-badge .rg-badge-crew-cinq-ans::before {
  animation: admin-shimmer 4s ease-in-out infinite !important;
}

.header-equipped-badge-wrap .rg-badge-crew-trimestre::after,
.header-equipped-badge-wrap .rg-badge-crew-semestre::after,
.header-equipped-badge-wrap .rg-badge-crew-annee::after,
.header-equipped-badge-wrap .rg-badge-crew-cinq-ans::after,
#badgePreviewSlot .rg-badge-crew-trimestre::after,
#badgePreviewSlot .rg-badge-crew-semestre::after,
#badgePreviewSlot .rg-badge-crew-annee::after,
#badgePreviewSlot .rg-badge-crew-cinq-ans::after,
#panel-communaute .chat-collection-badge .rg-badge-crew-trimestre::after,
#panel-communaute .chat-collection-badge .rg-badge-crew-semestre::after,
#panel-communaute .chat-collection-badge .rg-badge-crew-annee::after,
#panel-communaute .chat-collection-badge .rg-badge-crew-cinq-ans::after {
  bottom: 2px;
  left: 10%;
  right: 10%;
  height: 1px;
}

.header-equipped-badge-wrap .rg-badge-semestre-crown,
#badgePreviewSlot .rg-badge-semestre-crown,
#panel-communaute .chat-collection-badge .rg-badge-semestre-crown {
  animation: rg-crew-semestre-crown 2.4s ease-in-out infinite !important;
}

.header-equipped-badge-wrap .rg-badge-annee-crown,
#badgePreviewSlot .rg-badge-annee-crown,
#panel-communaute .chat-collection-badge .rg-badge-annee-crown {
  animation: rg-crew-annee-crown 2.2s ease-in-out infinite !important;
}

.header-equipped-badge-wrap .rg-badge-cinq-ans-crown,
#badgePreviewSlot .rg-badge-cinq-ans-crown,
#panel-communaute .chat-collection-badge .rg-badge-cinq-ans-crown {
  animation: rg-crew-cinq-ans-crown 2s ease-in-out infinite !important;
}

.header-equipped-badge-wrap .rg-badge-semestre-crown,
#badgePreviewSlot .rg-badge-semestre-crown,
#panel-communaute .chat-collection-badge .rg-badge-semestre-crown,
.header-equipped-badge-wrap .rg-badge-annee-crown,
#badgePreviewSlot .rg-badge-annee-crown,
#panel-communaute .chat-collection-badge .rg-badge-annee-crown,
.header-equipped-badge-wrap .rg-badge-cinq-ans-crown,
#badgePreviewSlot .rg-badge-cinq-ans-crown,
#panel-communaute .chat-collection-badge .rg-badge-cinq-ans-crown {
  width: 10px;
  height: 7px;
}

.header-equipped-badge-wrap .rg-badge-wood,
.header-equipped-badge-wrap .rg-badge-copper,
.header-equipped-badge-wrap .rg-badge-silver,
.header-equipped-badge-wrap .rg-badge-gold,
.header-equipped-badge-wrap .rg-badge-platinum,
.header-equipped-badge-wrap .rg-badge-diamond-lingot,
#badgePreviewSlot .rg-badge-wood,
#badgePreviewSlot .rg-badge-copper,
#badgePreviewSlot .rg-badge-silver,
#badgePreviewSlot .rg-badge-gold,
#badgePreviewSlot .rg-badge-platinum,
#badgePreviewSlot .rg-badge-diamond-lingot,
#panel-communaute .chat-collection-badge .rg-badge-wood,
#panel-communaute .chat-collection-badge .rg-badge-copper,
#panel-communaute .chat-collection-badge .rg-badge-silver,
#panel-communaute .chat-collection-badge .rg-badge-gold,
#panel-communaute .chat-collection-badge .rg-badge-platinum,
#panel-communaute .chat-collection-badge .rg-badge-diamond-lingot {
  border-radius: 6px !important;
}

.user-pill {
  display: flex;
  align-items: center;
  gap: 10px;
  border: none;
  padding: 0;
  background: transparent;
  color: inherit;
  font: inherit;
  text-align: left;
  cursor: pointer;
  border-radius: var(--radius-md);
  transition: background 0.15s ease, transform 0.15s ease;
}

.user-pill:hover {
  background: rgba(255, 255, 255, 0.05);
}

.user-pill:focus-visible {
  outline: 2px solid var(--color-accent);
  outline-offset: 3px;
}

.user-avatar {
  width: 36px;
  height: 36px;
  border-radius: 50%;
  background: linear-gradient(135deg, var(--color-accent), var(--color-accent-dark));
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: 700;
  font-size: 0.875rem;
}

.user-name {
  font-size: 0.9375rem;
  font-weight: 500;
}

.user-email {
  display: block;
  max-width: 180px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-size: 0.75rem;
  color: var(--color-text-subtle);
}

.admin-badge {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  width: fit-content;
  margin-top: 2px;
  padding: 5px 12px 5px 10px;
  border-radius: 999px;
  font-size: 0.75rem;
  font-weight: 800;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: #1a0800;
  position: relative;
  overflow: hidden;
  isolation: isolate;
}

.admin-badge-legendary {
  background: linear-gradient(135deg, #ffe566 0%, #ffb020 25%, #ff6b00 50%, #ff2060 75%, #ffe566 100%);
  background-size: 300% 300%;
  animation: admin-gradient 4s ease infinite, admin-badge-pulse 2.2s ease-in-out infinite;
  border: 1px solid rgba(255, 220, 100, 0.85);
  box-shadow:
    0 0 18px rgba(255, 180, 0, 0.55),
    0 0 36px rgba(255, 80, 0, 0.25),
    inset 0 1px 0 rgba(255, 255, 255, 0.45);
}

.admin-badge-glow {
  position: absolute;
  inset: -4px;
  border-radius: inherit;
  background: radial-gradient(circle at 50% 50%, rgba(255, 200, 50, 0.45), transparent 70%);
  animation: admin-glow-breathe 2.2s ease-in-out infinite;
  z-index: -1;
  pointer-events: none;
}

.admin-badge-shimmer {
  position: absolute;
  inset: 0;
  background: linear-gradient(
    105deg,
    transparent 35%,
    rgba(255, 255, 255, 0.55) 50%,
    transparent 65%
  );
  transform: translateX(-120%);
  animation: admin-shimmer 2.8s ease-in-out infinite;
  pointer-events: none;
}

.admin-badge-crown {
  width: 16px;
  height: 11px;
  flex-shrink: 0;
  fill: currentColor;
  filter: drop-shadow(0 0 3px rgba(255, 140, 0, 0.8));
  animation: admin-crown-bounce 2.2s ease-in-out infinite;
}

.admin-badge-crown-sm {
  width: 11px;
  height: 8px;
}

.member-badge.member-badge-admin {
  position: relative;
  overflow: hidden;
  isolation: isolate;
  gap: 6px;
  padding: 6px 14px;
  color: #1a0800;
  font-weight: 800;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  background: linear-gradient(135deg, #ffe566 0%, #ffb020 30%, #ff6b00 60%, #ffe566 100%);
  background-size: 300% 300%;
  animation: admin-gradient 4s ease infinite, admin-badge-pulse 2.2s ease-in-out infinite;
  border: 1px solid rgba(255, 200, 80, 0.7);
  box-shadow:
    0 0 20px rgba(255, 170, 0, 0.45),
    0 0 40px rgba(255, 80, 0, 0.2);
}

.user-pill.is-admin {
  padding: 6px 14px 6px 6px;
  background: rgba(255, 170, 0, 0.08);
  border: 1px solid rgba(255, 190, 60, 0.35);
  border-radius: 100px;
  box-shadow: 0 0 24px rgba(255, 140, 0, 0.15);
}

.admin-name {
  background: linear-gradient(90deg, #ffd700, #ff9500, #ff3366, #ffd700, #ff9500);
  background-size: 400% 100%;
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  animation: admin-name-flow 3s linear infinite;
  font-weight: 800;
  text-shadow: none;
}

.admin-avatar {
  background: linear-gradient(135deg, #ffd700, #ff6b00, #ff2060) !important;
  box-shadow:
    0 0 18px rgba(255, 170, 0, 0.65),
    0 0 32px rgba(255, 60, 0, 0.35);
  animation: admin-avatar-pulse 2s ease-in-out infinite;
}

@keyframes admin-gradient {
  0%, 100% { background-position: 0% 50%; }
  50% { background-position: 100% 50%; }
}

@keyframes admin-badge-pulse {
  0%, 100% {
    box-shadow:
      0 0 18px rgba(255, 180, 0, 0.55),
      0 0 36px rgba(255, 80, 0, 0.25),
      inset 0 1px 0 rgba(255, 255, 255, 0.45);
  }
  50% {
    box-shadow:
      0 0 28px rgba(255, 200, 50, 0.85),
      0 0 52px rgba(255, 60, 0, 0.45),
      inset 0 1px 0 rgba(255, 255, 255, 0.55);
  }
}

@keyframes admin-glow-breathe {
  0%, 100% { opacity: 0.6; transform: scale(1); }
  50% { opacity: 1; transform: scale(1.08); }
}

@keyframes admin-shimmer {
  0% { transform: translateX(-120%); }
  45%, 100% { transform: translateX(120%); }
}

@keyframes admin-crown-bounce {
  0%, 100% { transform: translateY(0) scale(1); }
  50% { transform: translateY(-1px) scale(1.08); }
}

@keyframes admin-name-flow {
  0% { background-position: 0% 50%; }
  100% { background-position: 400% 50%; }
}

@keyframes admin-avatar-pulse {
  0%, 100% { transform: scale(1); }
  50% { transform: scale(1.06); }
}

.trial-badge {
  display: inline-flex;
  align-items: center;
  width: fit-content;
  margin-top: 2px;
  padding: 2px 8px;
  border-radius: 999px;
  font-size: 0.6875rem;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: #fff;
  background: linear-gradient(135deg, #06b6d4 0%, #3b82f6 100%);
  box-shadow: 0 0 10px rgba(6, 182, 212, 0.35);
}

.member-badge.member-badge-trial {
  background: rgba(6, 182, 212, 0.12);
  border-color: rgba(6, 182, 212, 0.45);
  color: #67e8f9;
}

.trial-badge-dot {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: #22d3ee;
  box-shadow: 0 0 8px rgba(34, 211, 238, 0.8);
  animation: trial-pulse 2s ease-in-out infinite;
}

@keyframes trial-pulse {
  0%, 100% { opacity: 1; transform: scale(1); }
  50% { opacity: 0.65; transform: scale(0.92); }
}

.bots-recover-banner {
  display: flex;
  flex-direction: column;
  gap: 10px;
  margin: 0 0 14px;
  padding: 12px 14px;
  border-radius: var(--radius-md);
  border: 1px solid rgba(16, 185, 129, 0.25);
  background: rgba(16, 185, 129, 0.08);
}

.bots-recover-banner p {
  margin: 0;
  font-size: 0.875rem;
  color: var(--color-text-muted);
}

.app-sidebar-toggle {
  display: none;
  flex-direction: column;
  gap: 5px;
  background: none;
  border: none;
  cursor: pointer;
  padding: 4px;
}

.app-sidebar-toggle span {
  display: block;
  width: 22px;
  height: 2px;
  background: var(--color-text);
  border-radius: 2px;
}

.app-content {
  flex: 1;
  min-height: 0;
  padding: 32px;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
}

.app-panel {
  display: none;
  animation: fadeIn 0.3s ease;
}

.app-panel.active {
  display: block;
}

@keyframes fadeIn {
  from { opacity: 0; transform: translateY(8px); }
  to { opacity: 1; transform: translateY(0); }
}

/* Stats */
.stats-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 20px;
  margin-bottom: 32px;
}

.stat-card {
  padding: 24px;
  background: var(--color-bg-card);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
}

.stat-card-label {
  display: block;
  font-size: 0.8125rem;
  color: var(--color-text-muted);
  margin-bottom: 8px;
}

.stat-card-value {
  font-size: 1.75rem;
  font-weight: 700;
}

.stat-card-value.accent {
  color: var(--color-accent-light);
}

.stat-card-value.stat-negative {
  color: #f87171;
}

.stat-card-hint {
  display: block;
  margin-top: 6px;
  font-size: 0.75rem;
  color: var(--color-text-subtle);
}

.dashboard-month-wrap {
  margin-bottom: 28px;
  padding: 20px 24px;
  background: var(--color-bg-card);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
}

.dashboard-month-title {
  font-size: 1rem;
  margin-bottom: 14px;
}

.dashboard-month-scroll {
  max-height: min(280px, 42vh);
  overflow-x: hidden;
  overflow-y: auto;
  scroll-behavior: smooth;
  padding-right: 4px;
  margin-right: -4px;
  -webkit-overflow-scrolling: touch;
}

.dashboard-month-scroll::-webkit-scrollbar {
  width: 6px;
}

.dashboard-month-scroll::-webkit-scrollbar-track {
  background: transparent;
}

.dashboard-month-scroll::-webkit-scrollbar-thumb {
  background: rgba(255, 255, 255, 0.16);
  border-radius: 999px;
}

.dashboard-month-scroll::-webkit-scrollbar-thumb:hover {
  background: rgba(255, 255, 255, 0.28);
}

.dashboard-month-list {
  display: flex;
  flex-direction: column;
  gap: 8px;
  list-style: none;
  margin: 0;
  padding: 0;
}

.dashboard-month-item {
  display: grid;
  grid-template-columns: auto 1fr auto auto;
  gap: 12px;
  align-items: center;
  padding: 10px 12px;
  background: rgba(255, 255, 255, 0.03);
  border-radius: var(--radius-sm);
  font-size: 0.875rem;
}

.dashboard-month-item-type {
  font-size: 0.6875rem;
  font-weight: 600;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--color-text-subtle);
}

.dashboard-month-item-label {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.dashboard-month-item-date {
  font-size: 0.75rem;
  color: var(--color-text-subtle);
  white-space: nowrap;
}

.dashboard-month-item-amount {
  font-weight: 700;
  white-space: nowrap;
}

@media (max-width: 768px) {
  .dashboard-month-item {
    grid-template-columns: 1fr auto;
    grid-template-rows: auto auto;
  }

  .dashboard-month-item-type {
    grid-column: 1;
  }

  .dashboard-month-item-label {
    grid-column: 1 / -1;
  }

  .dashboard-month-item-date {
    grid-column: 1;
  }

  .dashboard-month-item-amount {
    grid-column: 2;
    grid-row: 2;
  }
}

.app-cards-row {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 20px;
}

.app-card {
  padding: 24px;
  background: var(--color-bg-card);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
}

.app-card h3 {
  font-size: 1.0625rem;
  margin-bottom: 8px;
}

.app-card-meta {
  font-size: 0.875rem;
  color: var(--color-text-muted);
  margin-bottom: 16px;
}

.btn-sm {
  padding: 8px 16px;
  font-size: 0.8125rem;
}

/* Formations — LMS premium */
.formation-panel {
  padding-bottom: 48px;
}

.formation-shell {
  max-width: 820px;
  margin: 0 auto;
}

.formation-view[hidden] {
  display: none;
}

.formation-overview {
  margin-bottom: 28px;
  padding: 24px 28px;
  border-radius: var(--radius-xl);
  border: 1px solid rgba(16, 185, 129, 0.18);
  background: linear-gradient(135deg, rgba(16, 185, 129, 0.08) 0%, rgba(16, 185, 129, 0.02) 55%, transparent 100%);
  box-shadow: var(--shadow-sm);
}

.formation-overview-label {
  margin: 0 0 14px;
  font-size: 0.6875rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--color-accent-light);
}

.formation-overview-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 16px;
  margin-bottom: 18px;
}

.formation-overview-stat {
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.formation-overview-stat strong {
  font-size: 1.375rem;
  font-weight: 700;
  letter-spacing: -0.02em;
  line-height: 1.1;
}

.formation-overview-stat span {
  font-size: 0.8125rem;
  color: var(--color-text-subtle);
}

.formation-progress-bar {
  height: 6px;
  border-radius: 100px;
  background: rgba(255, 255, 255, 0.06);
  overflow: hidden;
}

.formation-progress-bar--sm {
  height: 4px;
  flex: 1;
  min-width: 60px;
}

.formation-progress-bar-fill {
  height: 100%;
  border-radius: inherit;
  background: linear-gradient(90deg, var(--color-accent-dark), var(--color-accent-light));
  transition: width 0.35s ease;
}

.formation-module-list {
  display: flex;
  flex-direction: column;
  gap: 14px;
}

.formation-module-card {
  display: flex;
  align-items: stretch;
  gap: 0;
  width: 100%;
  padding: 0;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  background: var(--color-bg-card);
  color: inherit;
  text-align: left;
  cursor: pointer;
  overflow: hidden;
  transition: border-color 0.2s, box-shadow 0.2s, transform 0.2s;
}

.formation-module-card:hover {
  border-color: rgba(16, 185, 129, 0.28);
  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.25);
  transform: translateY(-1px);
}

.formation-module-card--done {
  border-color: rgba(16, 185, 129, 0.22);
}

.formation-module-card--soon {
  cursor: default;
  opacity: 0.72;
}

.formation-module-card--soon:hover {
  border-color: var(--color-border);
  box-shadow: none;
  transform: none;
}

.formation-module-card--soon .formation-module-card-num {
  background: rgba(255, 255, 255, 0.06);
  color: var(--color-text-muted);
}

.formation-module-card-status--soon {
  color: var(--color-text-muted);
  font-size: 0.75rem;
}

.formation-module-card-accent {
  width: 4px;
  flex-shrink: 0;
  background: rgba(255, 255, 255, 0.06);
}

.formation-module-card--done .formation-module-card-accent,
.formation-module-card:hover .formation-module-card-accent {
  background: linear-gradient(180deg, var(--color-accent), var(--color-accent-dark));
}

.formation-module-card-body {
  flex: 1;
  min-width: 0;
  padding: 20px 22px;
}

.formation-module-card-top {
  display: flex;
  align-items: flex-start;
  gap: 14px;
  margin-bottom: 14px;
}

.formation-module-card-num {
  width: 40px;
  height: 40px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: var(--radius-md);
  background: var(--color-accent-glow);
  font-size: 0.875rem;
  font-weight: 700;
  color: var(--color-accent-light);
  flex-shrink: 0;
}

.formation-module-card--done .formation-module-card-num {
  background: rgba(16, 185, 129, 0.2);
  color: #fff;
}

.formation-module-card-info h3 {
  margin: 0 0 4px;
  font-size: 1.0625rem;
  font-weight: 600;
  letter-spacing: -0.01em;
}

.formation-module-card-info p {
  margin: 0;
  font-size: 0.875rem;
  color: var(--color-text-muted);
  line-height: 1.45;
}

.formation-module-card-footer {
  display: flex;
  align-items: center;
  gap: 12px;
  flex-wrap: wrap;
}

.formation-module-card-meta {
  font-size: 0.75rem;
  color: var(--color-text-subtle);
  white-space: nowrap;
}

.formation-module-card-status {
  margin-left: auto;
  font-size: 0.75rem;
  font-weight: 600;
  color: var(--color-text-subtle);
  white-space: nowrap;
}

.formation-module-card-status--done {
  color: var(--color-accent-light);
}

.formation-module-card-chevron {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 48px;
  flex-shrink: 0;
  color: var(--color-text-subtle);
  border-left: 1px solid var(--color-border);
  transition: color 0.2s;
}

.formation-module-card:hover .formation-module-card-chevron {
  color: var(--color-accent-light);
}

.formation-module-card-chevron svg {
  width: 18px;
  height: 18px;
}

.formation-nav {
  display: flex;
  align-items: center;
  gap: 14px;
  flex-wrap: wrap;
  margin-bottom: 22px;
}

.formation-nav-btn {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 8px 14px 8px 10px;
  border: 1px solid var(--color-border);
  border-radius: 100px;
  background: rgba(255, 255, 255, 0.03);
  color: var(--color-text-muted);
  font-size: 0.8125rem;
  font-weight: 500;
  cursor: pointer;
  transition: border-color 0.15s, color 0.15s, background 0.15s;
}

.formation-nav-btn svg {
  width: 16px;
  height: 16px;
}

.formation-nav-btn:hover {
  border-color: var(--color-border-light);
  color: var(--color-text);
  background: rgba(255, 255, 255, 0.06);
}

.formation-breadcrumb {
  font-size: 0.8125rem;
  color: var(--color-text-subtle);
}

.formation-module-hero {
  margin-bottom: 28px;
  padding: 26px 28px;
  border-radius: var(--radius-xl);
  border: 1px solid var(--color-border);
  background: var(--color-bg-card);
}

.formation-module-hero-top {
  display: flex;
  gap: 18px;
  align-items: flex-start;
  margin-bottom: 22px;
}

.formation-module-badge {
  width: 52px;
  height: 52px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: var(--radius-md);
  background: linear-gradient(135deg, rgba(16, 185, 129, 0.25), rgba(16, 185, 129, 0.08));
  border: 1px solid rgba(16, 185, 129, 0.25);
  font-size: 1rem;
  font-weight: 700;
  color: var(--color-accent-light);
  flex-shrink: 0;
}

.formation-module-title {
  margin: 0 0 6px;
  font-size: 1.375rem;
  font-weight: 700;
  letter-spacing: -0.02em;
}

.formation-module-desc {
  margin: 0;
  color: var(--color-text-muted);
  font-size: 0.9375rem;
  line-height: 1.5;
}

.formation-module-progress-wrap {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.formation-module-progress-meta {
  display: flex;
  justify-content: space-between;
  font-size: 0.8125rem;
  color: var(--color-text-subtle);
}

.formation-module-progress-meta span:last-child {
  font-weight: 600;
  color: var(--color-accent-light);
}

.formation-lesson-track {
  display: flex;
  flex-direction: column;
  gap: 0;
  position: relative;
}

.formation-lesson-step {
  display: grid;
  grid-template-columns: 40px 1fr;
  gap: 16px;
  position: relative;
  padding-bottom: 14px;
}

.formation-lesson-step:last-child {
  padding-bottom: 0;
}

.formation-lesson-step:not(:last-child)::before {
  content: '';
  position: absolute;
  left: 19px;
  top: 40px;
  bottom: 0;
  width: 2px;
  background: rgba(255, 255, 255, 0.08);
}

.formation-lesson-step--done:not(:last-child)::before {
  background: rgba(16, 185, 129, 0.35);
}

.formation-lesson-step-marker {
  width: 40px;
  height: 40px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  border: 2px solid rgba(255, 255, 255, 0.1);
  background: var(--color-bg-alt);
  font-size: 0.8125rem;
  font-weight: 700;
  color: var(--color-text-subtle);
  z-index: 1;
}

.formation-lesson-step--done .formation-lesson-step-marker {
  border-color: rgba(16, 185, 129, 0.4);
  background: rgba(16, 185, 129, 0.15);
  color: var(--color-accent-light);
}

.formation-lesson-step-card {
  display: flex;
  align-items: center;
  gap: 14px;
  width: 100%;
  padding: 18px 20px;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  background: var(--color-bg-card);
  color: inherit;
  text-align: left;
  cursor: pointer;
  transition: border-color 0.15s, background 0.15s, box-shadow 0.15s;
}

.formation-lesson-step-card:hover {
  border-color: rgba(16, 185, 129, 0.28);
  background: var(--color-bg-card-hover);
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.2);
}

.formation-lesson-step--done .formation-lesson-step-card {
  border-color: rgba(16, 185, 129, 0.2);
}

.formation-lesson-step-body {
  flex: 1;
  min-width: 0;
}

.formation-lesson-step-body strong {
  display: block;
  font-size: 0.9375rem;
  font-weight: 600;
  margin-bottom: 4px;
}

.formation-lesson-step-body span {
  font-size: 0.8125rem;
  color: var(--color-text-subtle);
}

.formation-lesson-step-tags {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-shrink: 0;
}

.formation-lesson-tag {
  font-size: 0.6875rem;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  padding: 4px 10px;
  border-radius: 100px;
  background: rgba(255, 255, 255, 0.05);
  color: var(--color-text-subtle);
}

.formation-lesson-tag--quiz {
  background: rgba(16, 185, 129, 0.1);
  color: var(--color-accent-light);
}

.formation-lesson-tag--done {
  background: rgba(16, 185, 129, 0.18);
  color: var(--color-accent-light);
}

.formation-article {
  margin-bottom: 24px;
  padding: 28px 32px;
  border-radius: var(--radius-xl);
  border: 1px solid var(--color-border);
  background: var(--color-bg-card);
}

.formation-article-head {
  margin-bottom: 24px;
  padding-bottom: 20px;
  border-bottom: 1px solid var(--color-border);
}

.formation-lesson-title {
  margin: 0 0 8px;
  font-size: 1.5rem;
  font-weight: 700;
  letter-spacing: -0.02em;
  line-height: 1.25;
}

.formation-lesson-meta {
  margin: 0;
  font-size: 0.8125rem;
  color: var(--color-text-subtle);
}

.formation-lesson-content {
  display: flex;
  flex-direction: column;
  gap: 20px;
}

.formation-block-text {
  font-size: 1rem;
  line-height: 1.75;
  color: var(--color-text);
}

.formation-block-text p {
  margin: 0 0 12px;
}

.formation-block-text p:last-child {
  margin-bottom: 0;
}

.formation-block-text ul {
  margin: 10px 0 0;
  padding-left: 1.25rem;
}

.formation-block-text li {
  margin-bottom: 8px;
}

.formation-block-text strong {
  color: #fff;
  font-weight: 600;
}

.formation-block-text--definition {
  padding: 16px 18px;
  border-radius: var(--radius-lg);
  border: 1px solid rgba(16, 185, 129, 0.14);
  border-left: 3px solid var(--color-accent);
  background: rgba(16, 185, 129, 0.05);
}

.formation-block-text--definition .formation-def-term {
  margin: 0 0 10px;
  font-size: 1.0625rem;
  font-weight: 700;
  letter-spacing: 0.03em;
  color: var(--color-accent-light);
}

.formation-block-text--definition .formation-def-term-sub {
  font-weight: 500;
  font-size: 0.9375rem;
  color: var(--color-text-muted);
}

.formation-gear {
  display: flex;
  flex-direction: column;
  gap: 14px;
}

.formation-gear-title {
  margin: 0;
  font-size: 0.9375rem;
  font-weight: 700;
  color: var(--color-accent-light);
}

.formation-gear-intro {
  margin: 0;
  font-size: 0.875rem;
  color: var(--color-text-muted);
  line-height: 1.55;
}

.formation-gear-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.formation-gear-item {
  padding: 16px 18px;
  border-radius: var(--radius-lg);
  border: 1px solid rgba(16, 185, 129, 0.16);
  background: rgba(16, 185, 129, 0.04);
}

.formation-gear-item-head {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  justify-content: space-between;
  gap: 8px 12px;
  margin-bottom: 8px;
}

.formation-gear-item-head strong {
  font-size: 1rem;
  color: #fff;
}

.formation-gear-budget {
  font-size: 0.8125rem;
  font-weight: 600;
  color: var(--color-accent-light);
  white-space: nowrap;
}

.formation-gear-detail {
  margin: 0 0 12px;
  font-size: 0.9375rem;
  line-height: 1.6;
  color: var(--color-text);
}

.formation-gear-detail strong {
  color: #fff;
}

.formation-gear-link {
  display: inline-flex;
  align-items: center;
  font-size: 0.8125rem;
  font-weight: 600;
  color: var(--color-accent-light);
  text-decoration: none;
}

.formation-gear-link:hover {
  text-decoration: underline;
}

.formation-gear-link--soon,
.formation-gear-link--store {
  color: var(--color-text-muted);
  font-weight: 500;
  cursor: default;
}

.formation-gear-link--store {
  color: var(--color-accent-light);
}

.formation-block-template {
  padding: 18px 20px;
  border-radius: var(--radius-lg);
  border: 1px solid rgba(16, 185, 129, 0.22);
  background: rgba(16, 185, 129, 0.04);
}

.formation-block-template-title {
  margin: 0 0 8px;
  font-size: 0.8125rem;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--color-accent-light);
}

.formation-block-template-intro {
  margin: 0 0 12px;
  font-size: 0.875rem;
  color: var(--color-text-muted);
  line-height: 1.5;
}

.formation-block-template-text {
  margin: 0;
  padding: 14px 16px;
  border-radius: var(--radius-md);
  border: 1px dashed rgba(255, 255, 255, 0.14);
  background: rgba(0, 0, 0, 0.25);
  font-family: var(--font-sans);
  font-size: 0.875rem;
  line-height: 1.65;
  color: var(--color-text);
  white-space: pre-wrap;
  word-break: break-word;
  user-select: all;
}

.formation-offers {
  padding: 20px 22px;
  border-radius: var(--radius-xl);
  border: 1px solid var(--color-border);
  background: rgba(255, 255, 255, 0.02);
}

.formation-offers-title {
  margin: 0 0 6px;
  font-size: 0.9375rem;
  font-weight: 700;
  color: var(--color-text);
}

.formation-offers-intro {
  margin: 0 0 18px;
  font-size: 0.875rem;
  color: var(--color-text-muted);
  line-height: 1.55;
}

.formation-offers-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 14px;
  align-items: start;
}

.formation-offers-pair {
  display: flex;
  flex-direction: column;
  gap: 8px;
  border-radius: var(--radius-md);
  overflow: hidden;
  border: 1px solid var(--color-border);
  background: var(--color-bg-card);
}

.formation-offers-photo {
  overflow: hidden;
  background: #111;
  line-height: 0;
}

.formation-offers-photo img {
  display: block;
  width: 100%;
  height: auto;
  object-fit: contain;
  object-position: center;
}

.formation-offers-price {
  padding: 10px 12px;
  background: #fff;
  border-top: 1px solid var(--color-border);
}

.formation-offers-price img {
  display: block;
  width: 100%;
  height: auto;
  max-height: 72px;
  object-fit: contain;
  object-position: left center;
}

.formation-offers-caption {
  margin: 14px 0 0;
  font-size: 0.8125rem;
  color: var(--color-text-subtle);
  text-align: center;
}

.formation-article-pick {
  padding: 18px;
  border-radius: var(--radius-lg);
  border: 1px solid rgba(46, 204, 113, 0.28);
  background: linear-gradient(180deg, rgba(46, 204, 113, 0.08) 0%, rgba(0, 0, 0, 0.12) 100%);
}

.formation-article-pick-title {
  margin: 0 0 8px;
  font-size: 0.9375rem;
  color: #2ecc71;
  text-transform: uppercase;
  letter-spacing: 0.04em;
}

.formation-article-pick-intro {
  margin: 0 0 14px;
  font-size: 0.875rem;
  color: var(--color-text-muted);
  line-height: 1.45;
}

.formation-article-pick-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 14px;
  align-items: stretch;
}

.formation-article-pick-card {
  position: relative;
  cursor: pointer;
}

.formation-article-pick-card input {
  position: absolute;
  opacity: 0;
  pointer-events: none;
}

.formation-article-pick-card-inner {
  display: flex;
  flex-direction: column;
  height: 100%;
  border-radius: var(--radius-md);
  border: 2px solid var(--color-border);
  background: var(--color-bg-card);
  overflow: hidden;
  transition: border-color 0.15s, box-shadow 0.15s, transform 0.15s;
}

.formation-article-pick-card:hover .formation-article-pick-card-inner {
  border-color: rgba(46, 204, 113, 0.45);
}

.formation-article-pick-card input:checked + .formation-article-pick-card-inner {
  border-color: #2ecc71;
  box-shadow: 0 0 0 3px rgba(46, 204, 113, 0.18);
}

.formation-article-pick-card.is-correct .formation-article-pick-card-inner {
  border-color: #2ecc71;
  box-shadow: 0 0 0 3px rgba(46, 204, 113, 0.25);
}

.formation-article-pick-card.is-wrong .formation-article-pick-card-inner {
  border-color: #ef4444;
  box-shadow: 0 0 0 3px rgba(239, 68, 68, 0.2);
}

.formation-article-pick-photo {
  display: block;
  aspect-ratio: 4 / 5;
  background: #111;
  overflow: hidden;
  line-height: 0;
}

.formation-article-pick-photo img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: left center;
  display: block;
}

.formation-article-pick-placeholder {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  height: 100%;
  font-size: 1.75rem;
  font-weight: 700;
  color: rgba(255, 255, 255, 0.35);
  background: linear-gradient(145deg, rgba(59, 130, 246, 0.25), rgba(124, 58, 237, 0.2));
}

.formation-article-pick-body {
  display: flex;
  flex-direction: column;
  gap: 6px;
  padding: 12px;
}

.formation-article-pick-body strong {
  font-size: 0.875rem;
  line-height: 1.35;
}

.formation-article-pick-price {
  font-size: 1.0625rem;
  font-weight: 700;
  color: #2ecc71;
}

.formation-article-pick-meta {
  display: flex;
  flex-direction: column;
  gap: 3px;
  margin-top: 2px;
  font-size: 0.75rem;
  color: var(--color-text-subtle);
}

.formation-article-pick-likes {
  color: #fb7185;
  font-weight: 600;
}

.formation-article-pick-actions {
  margin-top: 14px;
}

.formation-article-pick-feedback {
  margin: 10px 0 0;
  font-size: 0.8125rem;
  line-height: 1.45;
  display: none;
}

.formation-article-pick-feedback.is-visible {
  display: block;
}

.formation-article-pick-feedback.is-ok {
  color: #2ecc71;
}

.formation-article-pick-feedback.is-ko,
.formation-article-pick-feedback.is-warn {
  color: #fbbf24;
}

@media (max-width: 760px) {
  .formation-article-pick-grid {
    grid-template-columns: 1fr;
  }
}

.formation-showcase {
  padding: 22px 24px 20px;
  border-radius: var(--radius-xl);
  border: 1px solid var(--color-border);
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.03) 0%, rgba(255, 255, 255, 0.01) 100%);
}

.formation-showcase-head {
  display: flex;
  flex-direction: column;
  gap: 4px;
  margin-bottom: 20px;
  text-align: center;
}

.formation-showcase-kicker {
  font-size: 0.6875rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--color-accent-light);
}

.formation-showcase-head strong {
  font-size: 0.9375rem;
  font-weight: 600;
  color: var(--color-text);
}

.formation-showcase-row {
  display: flex;
  align-items: stretch;
  justify-content: center;
  gap: 14px;
}

.formation-showcase-card {
  flex: 1 1 0;
  max-width: 280px;
  display: flex;
  flex-direction: column;
  border-radius: var(--radius-lg);
  overflow: hidden;
  border: 1px solid var(--color-border);
  background: var(--color-bg-card);
}

.formation-showcase-photo {
  aspect-ratio: 1 / 1;
  overflow: hidden;
  background: #111;
}

.formation-showcase-photo img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
}

.formation-showcase-card-foot {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 14px 16px;
  border-top: 1px solid var(--color-border);
  background: rgba(255, 255, 255, 0.02);
}

.formation-showcase-badge {
  font-size: 0.6875rem;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  padding: 5px 10px;
  border-radius: 100px;
  border: 1px solid var(--color-border);
  background: rgba(255, 255, 255, 0.04);
  color: var(--color-text-subtle);
  white-space: nowrap;
}

.formation-showcase-card--vendu .formation-showcase-badge {
  color: var(--color-accent-light);
  border-color: rgba(16, 185, 129, 0.28);
  background: rgba(16, 185, 129, 0.1);
}

.formation-showcase-prices {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 2px;
  margin-left: auto;
}

.formation-showcase-price-alt {
  font-size: 0.8125rem;
  color: var(--color-text-subtle);
  line-height: 1.2;
}

.formation-showcase-price {
  font-size: 1.125rem;
  font-weight: 700;
  letter-spacing: -0.02em;
  color: #2dd4bf;
  line-height: 1.2;
}

.formation-showcase-card--vendu .formation-showcase-price {
  color: var(--color-accent-light);
  font-size: 1.25rem;
}

.formation-showcase-arrow {
  flex-shrink: 0;
  align-self: center;
  width: 36px;
  height: 36px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  background: rgba(16, 185, 129, 0.12);
  border: 1px solid rgba(16, 185, 129, 0.22);
  color: var(--color-accent-light);
}

.formation-showcase-arrow svg {
  width: 18px;
  height: 18px;
}

.formation-showcase-foot {
  margin: 18px 0 0;
  padding-top: 16px;
  border-top: 1px solid var(--color-border);
  text-align: center;
  font-size: 0.875rem;
  color: var(--color-text-subtle);
}

.formation-showcase-foot strong {
  color: var(--color-accent-light);
}

.formation-steps {
  display: flex;
  flex-direction: column;
  gap: 14px;
}

.formation-steps-title {
  margin: 0;
  font-size: 1rem;
  font-weight: 700;
  color: var(--color-accent-light);
}

.formation-steps-intro {
  margin: 0;
  font-size: 0.9375rem;
  line-height: 1.65;
  color: var(--color-text);
}

.formation-steps-intro strong {
  color: #fff;
}

.formation-steps-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.formation-step {
  display: grid;
  grid-template-columns: 36px minmax(120px, 200px) minmax(0, 1fr);
  gap: 14px;
  align-items: start;
  padding: 14px;
  border-radius: var(--radius-lg);
  border: 1px solid rgba(255, 255, 255, 0.08);
  background: rgba(255, 255, 255, 0.02);
}

.formation-step-num {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;
  border-radius: var(--radius-sm);
  background: var(--color-accent-glow);
  color: var(--color-accent-light);
  font-size: 0.875rem;
  font-weight: 700;
}

.formation-step-media {
  margin: 0;
  border-radius: var(--radius-md);
  overflow: hidden;
  border: 1px solid rgba(255, 255, 255, 0.08);
}

.formation-step-media img {
  display: block;
  width: 100%;
  aspect-ratio: 3 / 4;
  object-fit: cover;
}

.formation-step-body {
  font-size: 0.9375rem;
  line-height: 1.6;
  color: var(--color-text);
  padding-top: 4px;
}

.formation-step-body strong {
  color: #fff;
}

@media (max-width: 720px) {
  .formation-step {
    grid-template-columns: 1fr;
  }

  .formation-step-num {
    justify-self: start;
  }
}

.formation-gallery {
  display: flex;
  flex-direction: column;
  gap: 14px;
}

.formation-gallery-title {
  margin: 0;
  font-size: 0.9375rem;
  font-weight: 700;
  color: var(--color-accent-light);
}

.formation-gallery-intro {
  margin: 0;
  font-size: 0.9375rem;
  line-height: 1.65;
  color: var(--color-text);
}

.formation-gallery-intro strong {
  color: #fff;
}

.formation-gallery-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 12px;
}

.formation-gallery-item {
  margin: 0;
  border-radius: var(--radius-md);
  overflow: hidden;
  border: 1px solid rgba(255, 255, 255, 0.08);
  background: rgba(255, 255, 255, 0.02);
}

.formation-gallery-item--featured {
  border-color: rgba(16, 185, 129, 0.35);
  box-shadow: 0 0 0 1px rgba(16, 185, 129, 0.12);
}

.formation-gallery-item img {
  display: block;
  width: 100%;
  aspect-ratio: 1;
  object-fit: cover;
}

.formation-gallery-item figcaption {
  padding: 10px 12px;
  font-size: 0.8125rem;
  line-height: 1.45;
  color: var(--color-text-muted);
  border-top: 1px solid rgba(255, 255, 255, 0.06);
}

.formation-gallery-item figcaption strong {
  color: #fff;
}

.formation-gallery-item--featured figcaption {
  color: var(--color-accent-light);
  font-weight: 600;
}

@media (max-width: 720px) {
  .formation-gallery-grid {
    grid-template-columns: 1fr;
  }
}

.formation-block-media {
  margin: 0;
  border-radius: var(--radius-md);
  overflow: hidden;
  border: 1px solid var(--color-border);
}

.formation-block-media img {
  display: block;
  width: 100%;
  height: auto;
}

.formation-block-media figcaption {
  padding: 10px 14px;
  font-size: 0.8125rem;
  color: var(--color-text-subtle);
  background: rgba(255, 255, 255, 0.03);
}

.formation-block-video {
  position: relative;
  padding-bottom: 56.25%;
  height: 0;
  border-radius: var(--radius-md);
  overflow: hidden;
  background: #000;
  border: 1px solid var(--color-border);
}

.formation-block-video iframe,
.formation-block-video video {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  border: 0;
}

.formation-block-video-placeholder {
  position: relative;
  aspect-ratio: 16 / 9;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 10px;
  border-radius: var(--radius-md);
  border: 1px dashed rgba(255, 255, 255, 0.12);
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.04) 0%, rgba(255, 255, 255, 0.01) 100%);
  color: var(--color-text-subtle);
  font-size: 0.875rem;
}

.formation-block-video-placeholder svg {
  width: 44px;
  height: 44px;
  color: var(--color-accent);
  opacity: 0.7;
}

.formation-block-callout {
  display: flex;
  gap: 14px;
  padding: 16px 18px;
  border-radius: var(--radius-md);
  border: 1px solid var(--color-border);
  background: rgba(255, 255, 255, 0.02);
}

.formation-block-callout-icon {
  width: 32px;
  height: 32px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: var(--radius-sm);
  flex-shrink: 0;
  font-size: 1rem;
}

.formation-block-callout--tip {
  border-color: rgba(16, 185, 129, 0.25);
  background: rgba(16, 185, 129, 0.06);
}

.formation-block-callout--tip .formation-block-callout-icon {
  background: rgba(16, 185, 129, 0.15);
}

.formation-block-callout--warn {
  border-color: rgba(251, 191, 36, 0.28);
  background: rgba(251, 191, 36, 0.06);
}

.formation-block-callout--warn .formation-block-callout-icon {
  background: rgba(251, 191, 36, 0.15);
}

.formation-block-callout-body h4 {
  margin: 0 0 6px;
  font-size: 0.75rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.06em;
}

.formation-block-callout-body p {
  margin: 0;
  font-size: 0.9375rem;
  line-height: 1.6;
}

.formation-quiz {
  padding: 26px 28px;
  border-radius: var(--radius-xl);
  border: 1px solid rgba(16, 185, 129, 0.2);
  background: linear-gradient(180deg, rgba(16, 185, 129, 0.06) 0%, rgba(16, 185, 129, 0.02) 100%);
}

.formation-quiz-head {
  display: flex;
  gap: 14px;
  align-items: flex-start;
  margin-bottom: 22px;
}

.formation-quiz-icon {
  width: 44px;
  height: 44px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: var(--radius-md);
  background: rgba(16, 185, 129, 0.15);
  color: var(--color-accent-light);
  flex-shrink: 0;
}

.formation-quiz-icon svg {
  width: 22px;
  height: 22px;
}

.formation-quiz-title {
  margin: 0 0 4px;
  font-size: 1.125rem;
  font-weight: 700;
}

.formation-quiz-intro {
  margin: 0;
  font-size: 0.875rem;
  color: var(--color-text-subtle);
}

.formation-quiz-form {
  display: flex;
  flex-direction: column;
  gap: 20px;
}

.formation-quiz-question {
  padding: 0;
  border: none;
  margin: 0;
  border-radius: var(--radius-md);
  transition: box-shadow 0.2s ease, background 0.2s ease;
}

.formation-quiz-question--missing {
  padding: 14px 14px 12px;
  background: rgba(251, 191, 36, 0.06);
  box-shadow: inset 0 0 0 1px rgba(251, 191, 36, 0.35);
}

.formation-quiz-question--missing legend {
  color: #fcd34d;
}

.formation-quiz-question legend {
  font-size: 0.9375rem;
  font-weight: 600;
  margin-bottom: 12px;
  padding: 0;
  line-height: 1.45;
}

.formation-quiz-options {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.formation-quiz-options--grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 10px;
}

.formation-quiz-prompt-media {
  margin: 0 0 12px;
  border-radius: var(--radius-md);
  overflow: hidden;
  border: 1px solid var(--color-border);
  background: #111;
}

.formation-quiz-prompt-media img {
  display: block;
  width: 100%;
  height: auto;
  max-height: 220px;
  object-fit: contain;
  object-position: left center;
  background: #fff;
}

.formation-quiz-prompt-media figcaption {
  padding: 8px 12px;
  font-size: 0.75rem;
  color: var(--color-text-subtle);
  background: rgba(255, 255, 255, 0.03);
}

.formation-quiz-option--image {
  height: 100%;
}

.formation-quiz-option-card--image {
  flex-direction: column;
  align-items: stretch;
  gap: 0;
  padding: 0;
  overflow: hidden;
  min-height: 100%;
}

.formation-quiz-option-photo {
  display: block;
  aspect-ratio: 4 / 5;
  background: #111;
  overflow: hidden;
}

.formation-quiz-option-photo img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: left center;
  display: block;
}

.formation-quiz-option-label {
  display: flex;
  flex-direction: column;
  gap: 4px;
  padding: 10px;
  font-size: 0.8125rem;
  line-height: 1.35;
}

.formation-quiz-option-label strong {
  font-size: 0.8125rem;
}

.formation-quiz-option-label span {
  font-size: 0.6875rem;
  color: var(--color-text-subtle);
}

.formation-quiz-option--image input:checked + .formation-quiz-option-card--image {
  border-color: var(--color-accent-light);
  box-shadow: 0 0 0 3px rgba(16, 185, 129, 0.18);
}

@media (max-width: 760px) {
  .formation-quiz-options--grid {
    grid-template-columns: 1fr;
  }
}

.formation-quiz-option {
  display: block;
  cursor: pointer;
}

.formation-quiz-option input {
  position: fixed;
  width: 1px;
  height: 1px;
  opacity: 0;
  pointer-events: none;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
}

.formation-quiz-option-card {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 14px 16px;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  background: rgba(0, 0, 0, 0.2);
  font-size: 0.875rem;
  line-height: 1.45;
  box-sizing: border-box;
  transition: background 0.15s, box-shadow 0.15s;
}

.formation-quiz-option-card::before {
  content: '';
  width: 18px;
  height: 18px;
  border-radius: 50%;
  border: 2px solid rgba(255, 255, 255, 0.2);
  flex-shrink: 0;
  transition: border-color 0.15s, background 0.15s;
}

.formation-quiz-option:hover .formation-quiz-option-card {
  border-color: var(--color-border-light);
  background: rgba(255, 255, 255, 0.04);
}

.formation-quiz-option input:checked + .formation-quiz-option-card {
  border-color: rgba(16, 185, 129, 0.35);
  background: rgba(16, 185, 129, 0.08);
  box-shadow: inset 0 0 0 1px rgba(16, 185, 129, 0.35);
}

.formation-quiz-option input:checked + .formation-quiz-option-card::before {
  border-color: var(--color-accent);
  background: var(--color-accent);
  box-shadow: inset 0 0 0 3px var(--color-bg-card);
}

.formation-quiz-option input:disabled + .formation-quiz-option-card {
  opacity: 0.65;
  cursor: not-allowed;
}

.formation-quiz-feedback {
  display: none;
  margin-top: 10px;
  padding: 10px 12px;
  border-radius: var(--radius-sm);
  font-size: 0.8125rem;
  line-height: 1.45;
}

.formation-quiz-feedback.is-visible {
  display: block;
}

.formation-quiz-feedback--ko {
  color: #fca5a5;
  background: rgba(248, 113, 113, 0.1);
}

.formation-quiz-feedback--missing {
  color: #fcd34d;
  background: rgba(251, 191, 36, 0.12);
  border: 1px solid rgba(251, 191, 36, 0.28);
  font-weight: 600;
}

.formation-quiz-result {
  display: none;
  margin: 18px 0 0;
  padding: 14px 16px;
  border-radius: var(--radius-md);
  font-size: 0.9375rem;
  font-weight: 600;
}

.formation-quiz-result.is-visible {
  display: block;
}

.formation-quiz-result--pass {
  color: var(--color-accent-light);
  background: rgba(16, 185, 129, 0.12);
  border: 1px solid rgba(16, 185, 129, 0.25);
}

.formation-quiz-result--fail {
  color: #fca5a5;
  background: rgba(248, 113, 113, 0.1);
  border: 1px solid rgba(248, 113, 113, 0.25);
}

.formation-quiz-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin-top: 20px;
  padding-top: 20px;
  border-top: 1px solid rgba(255, 255, 255, 0.06);
}

.formation-quiz-actions [hidden] {
  display: none;
}

@media (max-width: 640px) {
  .formation-overview {
    padding: 20px;
  }

  .formation-overview-grid {
    grid-template-columns: 1fr 1fr;
  }

  .formation-overview-grid .formation-overview-stat:last-child {
    grid-column: 1 / -1;
  }

  .formation-module-card-chevron {
    display: none;
  }

  .formation-article {
    padding: 22px 20px;
  }

  .formation-lesson-step {
    grid-template-columns: 32px 1fr;
    gap: 12px;
  }

  .formation-lesson-step-marker {
    width: 32px;
    height: 32px;
    font-size: 0.75rem;
  }

  .formation-lesson-step:not(:last-child)::before {
    left: 15px;
    top: 32px;
  }

  .formation-lesson-step-tags {
    display: none;
  }

  .formation-showcase {
    padding: 18px 16px;
  }

  .formation-offers-row {
    grid-template-columns: 1fr;
  }

  .formation-showcase-row {
    flex-direction: column;
    align-items: center;
    gap: 16px;
  }

  .formation-showcase-card {
    width: 100%;
    max-width: 320px;
  }

  .formation-showcase-arrow {
    transform: rotate(90deg);
  }
}

/* Box */
.box-coming-soon {
  text-align: center;
  padding: 48px 32px;
  margin-bottom: 32px;
  background: linear-gradient(135deg, rgba(16, 185, 129, 0.1), rgba(16, 185, 129, 0.02));
  border: 1px solid rgba(16, 185, 129, 0.25);
  border-radius: var(--radius-xl);
}

.box-coming-soon-tag {
  display: inline-block;
  padding: 6px 14px;
  margin-bottom: 16px;
  font-size: 0.75rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--color-accent-light);
  background: var(--color-accent-glow);
  border: 1px solid rgba(16, 185, 129, 0.3);
  border-radius: 100px;
}

.box-coming-soon-title {
  font-size: clamp(2.5rem, 6vw, 4rem);
  font-weight: 800;
  letter-spacing: -0.03em;
  line-height: 1;
  margin-bottom: 16px;
  background: linear-gradient(135deg, var(--color-text) 0%, var(--color-accent-light) 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}

.box-coming-soon-lead {
  max-width: 560px;
  margin: 0 auto;
  font-size: 1.0625rem;
  color: var(--color-text-muted);
  line-height: 1.7;
}

.box-coming-soon-lead strong {
  color: var(--color-text);
}

.box-coming-soon-note {
  margin-top: 28px;
  text-align: center;
  font-size: 0.875rem;
  color: var(--color-text-subtle);
}

.box-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 24px;
}

.box-card {
  position: relative;
  padding: 28px;
  background: var(--color-bg-card);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  text-align: center;
}

.box-card-featured {
  border-color: rgba(16, 185, 129, 0.4);
  box-shadow: var(--shadow-glow);
}

.box-card-badge {
  position: absolute;
  top: -10px;
  left: 50%;
  transform: translateX(-50%);
  padding: 4px 12px;
  background: var(--color-accent);
  color: #fff;
  font-size: 0.6875rem;
  font-weight: 600;
  text-transform: uppercase;
  border-radius: 100px;
}

.box-card h3 {
  font-size: 1.25rem;
  margin: 12px 0 8px;
}

.box-card p {
  font-size: 0.875rem;
  color: var(--color-text-muted);
  margin-bottom: 20px;
  line-height: 1.6;
}

.box-card-soon {
  opacity: 0.85;
  border-style: dashed;
}

.box-card-soon .box-card-badge {
  background: rgba(251, 191, 36, 0.2);
  color: #fbbf24;
}

.box-soon-label {
  display: block;
  padding: 14px;
  text-align: center;
  font-size: 1.125rem;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--color-text-subtle);
  background: rgba(255, 255, 255, 0.03);
  border: 1px dashed var(--color-border);
  border-radius: var(--radius-md);
}

.box-price {
  font-size: 2rem;
  font-weight: 700;
  margin-bottom: 20px;
  color: var(--color-accent-light);
}

/* Community */
.community-layout {
  display: grid;
  grid-template-columns: 260px 1fr;
  gap: 24px;
  min-height: 480px;
}

.community-channels {
  padding: 4px 0;
}

.community-channels-header {
  padding: 0 8px 20px;
  margin-bottom: 8px;
  border-bottom: 1px solid var(--color-border);
}

.community-channels-tag {
  display: block;
  font-size: 0.6875rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: var(--color-accent-light);
  margin-bottom: 6px;
}

.community-channels-header h3 {
  font-family: var(--font-serif);
  font-size: 1.375rem;
  font-weight: 400;
  font-style: italic;
  letter-spacing: 0.01em;
  color: var(--color-text);
  margin: 0;
}

.channel-list {
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.channel-btn {
  display: flex;
  align-items: center;
  gap: 12px;
  width: 100%;
  padding: 12px 14px;
  text-align: left;
  background: transparent;
  border: 1px solid transparent;
  border-radius: var(--radius-md);
  color: var(--color-text-muted);
  font-family: inherit;
  cursor: pointer;
  transition: all var(--transition);
  position: relative;
}

.channel-btn::before {
  content: '';
  position: absolute;
  left: 0;
  top: 50%;
  transform: translateY(-50%);
  width: 3px;
  height: 0;
  background: linear-gradient(180deg, var(--color-accent-light), var(--color-accent));
  border-radius: 0 4px 4px 0;
  transition: height 0.2s ease;
}

.channel-btn:hover {
  background: rgba(255, 255, 255, 0.04);
  border-color: rgba(255, 255, 255, 0.06);
  color: var(--color-text);
}

.channel-btn.active {
  background: linear-gradient(90deg, rgba(16, 185, 129, 0.12), rgba(16, 185, 129, 0.03));
  border-color: rgba(16, 185, 129, 0.22);
  color: var(--color-text);
}

.channel-btn.active::before {
  height: 60%;
}

.channel-btn-icon {
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 36px;
  height: 36px;
  border-radius: var(--radius-sm);
  background: rgba(255, 255, 255, 0.04);
  border: 1px solid var(--color-border);
  color: var(--color-text-subtle);
  transition: all var(--transition);
}

.channel-btn-icon svg {
  width: 18px;
  height: 18px;
}

.channel-btn-icon-gold {
  color: #fbbf24;
  border-color: rgba(251, 191, 36, 0.25);
  background: rgba(251, 191, 36, 0.08);
}

.channel-btn.active .channel-btn-icon {
  color: var(--color-accent-light);
  border-color: rgba(16, 185, 129, 0.35);
  background: rgba(16, 185, 129, 0.12);
}

.channel-btn-text {
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-width: 0;
}

.channel-btn-name {
  font-size: 0.9375rem;
  font-weight: 600;
  letter-spacing: 0.01em;
  line-height: 1.3;
  color: inherit;
}

.channel-btn-desc {
  font-size: 0.6875rem;
  font-weight: 500;
  letter-spacing: 0.02em;
  color: var(--color-text-subtle);
  line-height: 1.3;
}

.channel-btn.active .channel-btn-desc {
  color: var(--color-text-muted);
}

.community-chat {
  display: flex;
  flex-direction: column;
  background: var(--color-bg-card);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  overflow: hidden;
}

.chat-top-bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
  padding: 16px 20px;
  border-bottom: 1px solid var(--color-border);
  background: rgba(255, 255, 255, 0.02);
}

.chat-top-bar-left {
  min-width: 0;
}

.chat-channel-name {
  font-family: var(--font-serif);
  font-size: 1.25rem;
  font-weight: 400;
  font-style: italic;
  letter-spacing: 0.01em;
  margin-bottom: 4px;
  color: var(--color-text);
}

.chat-channel-desc {
  font-size: 0.8125rem;
  color: var(--color-text-subtle);
  margin: 0;
  letter-spacing: 0.02em;
}

.chat-online-wrap {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 8px;
  flex-shrink: 0;
}

.chat-online-meta {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 0.75rem;
  color: var(--color-text-muted);
}

.chat-online-meta strong {
  color: var(--color-accent-light);
}

.chat-online-pulse {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: #22c55e;
  box-shadow: 0 0 0 0 rgba(34, 197, 94, 0.5);
  animation: online-pulse 2s ease infinite;
}

@keyframes online-pulse {
  0%, 100% { box-shadow: 0 0 0 0 rgba(34, 197, 94, 0.45); }
  50% { box-shadow: 0 0 0 6px rgba(34, 197, 94, 0); }
}

.chat-online-avatars {
  display: flex;
  align-items: center;
  flex-direction: row-reverse;
  justify-content: flex-start;
  max-width: 280px;
  overflow-x: auto;
  padding: 2px 4px;
  scrollbar-width: none;
}

.chat-online-avatars::-webkit-scrollbar {
  display: none;
}

.online-avatar {
  position: relative;
  flex-shrink: 0;
  margin-left: -10px;
  cursor: default;
  transition: transform 0.15s ease, z-index 0s;
}

.online-avatar:first-child {
  margin-left: 0;
}

.online-avatar:hover {
  transform: translateY(-3px) scale(1.08);
  z-index: 10;
}

.online-avatar-img {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 36px;
  height: 36px;
  border-radius: 50%;
  font-size: 0.8125rem;
  font-weight: 700;
  color: #fff;
  background: linear-gradient(
    135deg,
    hsl(var(--avatar-hue, 160) 70% 45%),
    hsl(calc(var(--avatar-hue, 160) + 35) 65% 38%)
  );
  border: 2px solid var(--color-bg-card);
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.25);
}

.online-avatar-status {
  position: absolute;
  bottom: 0;
  right: 0;
  width: 10px;
  height: 10px;
  background: #22c55e;
  border: 2px solid var(--color-bg-card);
  border-radius: 50%;
}

.online-avatar-self .online-avatar-img {
  box-shadow: 0 0 0 2px var(--color-accent), 0 2px 8px rgba(16, 185, 129, 0.35);
}

.online-avatar-leader .online-avatar-img {
  background: linear-gradient(135deg, #3b82f6, #8b5cf6, #06b6d4);
  box-shadow: 0 0 0 2px rgba(96, 165, 250, 0.55), 0 2px 10px rgba(59, 130, 246, 0.35);
}

.chat-messages {
  flex: 1;
  padding: 20px;
  overflow-y: auto;
  display: flex;
  flex-direction: column;
  gap: 16px;
  min-height: 360px;
  max-height: 480px;
}

.chat-empty {
  margin: auto;
  padding: 32px 24px;
  text-align: center;
  font-size: 0.9375rem;
  color: var(--color-text-subtle);
  font-style: italic;
}

.chat-msg {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 4px;
  max-width: 85%;
  position: relative;
}

.chat-msg-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  width: 100%;
  max-width: 100%;
}

.chat-mod-actions {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.15s ease;
  flex-shrink: 0;
}

.chat-msg:hover .chat-mod-actions,
.chat-msg:focus-within .chat-mod-actions {
  opacity: 1;
  pointer-events: auto;
}

.chat-mod-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 28px;
  height: 28px;
  padding: 0;
  border: 1px solid rgba(255, 255, 255, 0.12);
  border-radius: 8px;
  background: rgba(0, 0, 0, 0.35);
  color: var(--color-text-subtle);
  cursor: pointer;
  transition: color 0.15s ease, border-color 0.15s ease, background 0.15s ease;
}

.chat-mod-btn svg {
  width: 14px;
  height: 14px;
}

.chat-mod-btn:hover {
  color: #fff;
  border-color: rgba(255, 255, 255, 0.22);
  background: rgba(0, 0, 0, 0.55);
}

.chat-mod-btn-ban:hover {
  color: #fca5a5;
  border-color: rgba(248, 113, 113, 0.45);
}

.chat-mod-menu {
  position: fixed;
  z-index: 1200;
  width: 220px;
  padding: 8px;
  border-radius: 12px;
  border: 1px solid rgba(255, 255, 255, 0.12);
  background: #141414;
  box-shadow: 0 12px 40px rgba(0, 0, 0, 0.45);
}

.chat-mod-menu-head {
  padding: 6px 10px 8px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.08);
  margin-bottom: 4px;
  font-size: 0.8125rem;
}

.chat-mod-menu-subtitle {
  margin: 0;
  padding: 6px 10px 4px;
  font-size: 0.75rem;
  color: var(--color-text-subtle);
}

.chat-mod-menu-section {
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.chat-mod-menu-item {
  width: 100%;
  padding: 9px 10px;
  border: 0;
  border-radius: 8px;
  background: transparent;
  color: var(--color-text);
  font-size: 0.8125rem;
  text-align: left;
  cursor: pointer;
  transition: background 0.15s ease;
}

.chat-mod-menu-item:hover {
  background: rgba(255, 255, 255, 0.06);
}

.chat-mod-menu-danger {
  color: #fca5a5;
}

.chat-mod-menu-success {
  color: #86efac;
}

.chat-mod-menu-back {
  color: var(--color-text-subtle);
  margin-top: 4px;
}

.chat-mod-reason-field {
  display: flex;
  flex-direction: column;
  gap: 4px;
  padding: 0 6px 8px;
  font-size: 0.75rem;
  color: var(--color-text-subtle);
}

.chat-mod-reason-field input {
  width: 100%;
  padding: 8px 10px;
  border-radius: 8px;
  border: 1px solid rgba(255, 255, 255, 0.12);
  background: rgba(255, 255, 255, 0.04);
  color: var(--color-text);
  font-size: 0.8125rem;
}

.member-ban-notice,
.chat-ban-notice {
  margin: 0 0 10px;
  padding: 10px 12px;
  border-radius: 10px;
  border: 1px solid rgba(248, 113, 113, 0.35);
  background: rgba(248, 113, 113, 0.1);
  color: #fecaca;
  font-size: 0.875rem;
}

.member-ban-popup {
  border: 1px solid rgba(248, 113, 113, 0.35);
  border-radius: 16px;
  padding: 0;
  background: #141414;
  color: var(--color-text);
  max-width: 440px;
  width: calc(100% - 32px);
}

.member-ban-popup::backdrop {
  background: rgba(0, 0, 0, 0.72);
}

.member-ban-popup-inner {
  display: flex;
  flex-direction: column;
  gap: 12px;
  padding: 22px;
}

.member-ban-popup-inner h3 {
  margin: 0;
  font-size: 1.2rem;
  color: #fecaca;
}

.member-ban-popup-icon {
  width: 42px;
  height: 42px;
  border-radius: 50%;
  display: grid;
  place-items: center;
  font-weight: 700;
  font-size: 1.25rem;
  color: #fecaca;
  background: rgba(248, 113, 113, 0.15);
  border: 1px solid rgba(248, 113, 113, 0.35);
}

.member-ban-popup-lead {
  margin: 0;
  color: var(--color-text);
  line-height: 1.5;
}

.member-ban-popup-reason {
  padding: 10px 12px;
  border-radius: 10px;
  background: rgba(255, 255, 255, 0.04);
  border: 1px solid rgba(255, 255, 255, 0.08);
}

.member-ban-popup-reason span {
  display: block;
  font-size: 0.75rem;
  color: var(--color-text-subtle);
  margin-bottom: 4px;
}

.member-ban-popup-reason p {
  margin: 0;
  font-size: 0.9375rem;
}

.member-ban-popup-list {
  margin: 0;
  padding-left: 18px;
  color: var(--color-text-subtle);
  font-size: 0.875rem;
  line-height: 1.5;
}

.member-ban-popup-duration {
  margin: 0;
  font-size: 0.8125rem;
  color: #fca5a5;
}

body.is-member-banned .bots-filter-form {
  opacity: 0.72;
}

.chat-msg-own {
  align-self: flex-end;
  align-items: flex-end;
  text-align: right;
}

.chat-msg-own .chat-msg-head {
  flex-direction: row-reverse;
}

.chat-author {
  display: inline-flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 6px;
  font-size: 0.8125rem;
  font-weight: 600;
  color: var(--color-accent-light);
  margin-bottom: 0;
  max-width: 100%;
}

.chat-msg-own .chat-author {
  justify-content: flex-end;
}

.chat-author-name {
  line-height: 1.4;
}

.chat-author-name-mod {
  padding: 0;
  border: 0;
  background: none;
  font: inherit;
  font-weight: 600;
  color: inherit;
  cursor: pointer;
  text-decoration: underline dotted rgba(255, 255, 255, 0.25);
  text-underline-offset: 3px;
}

.chat-author-name-mod:hover {
  color: #fff;
  text-decoration-color: rgba(255, 255, 255, 0.55);
}

.chat-role-badges {
  display: inline-flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 4px;
}

.chat-role-badge {
  display: inline-flex;
  align-items: center;
  gap: 3px;
  padding: 2px 8px;
  font-size: 0.625rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  border-radius: 100px;
  white-space: nowrap;
  vertical-align: middle;
}

.chat-role-crew {
  color: var(--color-gold);
  background: rgba(251, 191, 36, 0.12);
  border: 1px solid rgba(251, 191, 36, 0.28);
}

.chat-role-leader {
  color: #fff;
  background: linear-gradient(90deg, #3b82f6, #8b5cf6, #06b6d4);
  background-size: 200% 100%;
  animation: tl-gradient-shift 3s ease infinite;
}

.chat-role-admin {
  position: relative;
  overflow: hidden;
  isolation: isolate;
  color: #1a0800;
  border: 1px solid rgba(255, 200, 80, 0.75);
  padding: 3px 10px 3px 7px;
  gap: 4px;
}

/* Communauté — alignement des badges inline */
#panel-communaute .chat-author {
  gap: 5px;
  align-items: center;
}

#panel-communaute .chat-role-badges {
  gap: 4px;
  align-items: center;
}

#panel-communaute .chat-author .chat-role-admin.admin-badge {
  margin-top: 0;
  box-shadow:
    0 0 8px rgba(255, 180, 0, 0.35),
    0 0 14px rgba(255, 80, 0, 0.12) !important;
}

#panel-communaute .chat-author .admin-badge-crown {
  width: 10px;
  height: 7px;
}

#panel-communaute .chat-collection-badge {
  display: inline-flex;
  align-items: center;
  vertical-align: middle;
  line-height: 1;
}

#panel-communaute .chat-collection-badge .badge-semestre-aura,
#panel-communaute .chat-collection-badge .badge-semestre-orbit,
#panel-communaute .chat-collection-badge .badge-semestre-stars,
#panel-communaute .chat-collection-badge .badge-trimestre-stars {
  display: none !important;
}

.chat-author-admin .chat-author-name {
  background: linear-gradient(90deg, #ffd700, #ff9500, #ff3366, #ffd700);
  background-size: 300% 100%;
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  animation: admin-name-flow 3s linear infinite;
  font-weight: 800;
}

.chat-msg-admin .chat-text {
  background: linear-gradient(135deg, rgba(255, 180, 0, 0.14), rgba(255, 60, 0, 0.08));
  border: 1px solid rgba(255, 190, 60, 0.35);
  box-shadow: 0 0 20px rgba(255, 140, 0, 0.12);
}

.chat-msg-own.chat-msg-admin .chat-author {
  color: #ffd700;
}

.online-avatar-admin .online-avatar-img {
  background: linear-gradient(135deg, #ffd700, #ff6b00, #ff2060) !important;
  box-shadow: 0 0 14px rgba(255, 170, 0, 0.55);
  animation: admin-avatar-pulse 2s ease-in-out infinite;
}

.online-avatar-admin .online-avatar-status {
  background: #ffd700;
  box-shadow: 0 0 8px rgba(255, 200, 0, 0.9);
}

.chat-msg-own .chat-author,
.chat-author-own {
  color: var(--color-gold-light);
}

.chat-text {
  font-size: 0.9375rem;
  color: var(--color-text-muted);
  padding: 10px 14px;
  background: rgba(255, 255, 255, 0.04);
  border-radius: var(--radius-md);
}

.chat-msg-own .chat-text {
  background: var(--color-accent-glow);
  border: 1px solid rgba(16, 185, 129, 0.2);
  color: var(--color-text);
}

.chat-msg-has-image {
  max-width: 320px;
}

.chat-image-wrap {
  margin-top: 2px;
  border-radius: var(--radius-md);
  overflow: hidden;
  border: 1px solid var(--color-border);
  background: rgba(0, 0, 0, 0.2);
}

.chat-msg-own .chat-image-wrap {
  border-color: rgba(16, 185, 129, 0.25);
}

.chat-image {
  display: block;
  width: 100%;
  max-height: 280px;
  object-fit: cover;
  cursor: zoom-in;
}

.chat-image-preview {
  position: relative;
  margin: 0 16px 8px;
  padding: 8px;
  background: rgba(255, 255, 255, 0.03);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
}

.chat-image-preview img {
  display: block;
  max-width: 120px;
  max-height: 80px;
  border-radius: var(--radius-sm);
  object-fit: cover;
}

.chat-image-preview-remove {
  position: absolute;
  top: 4px;
  left: 108px;
  width: 22px;
  height: 22px;
  border: none;
  border-radius: 50%;
  background: rgba(0, 0, 0, 0.7);
  color: #fff;
  font-size: 1rem;
  line-height: 1;
  cursor: pointer;
}

.chat-form-error {
  margin: 0 16px 8px;
  padding: 8px 12px;
  font-size: 0.8125rem;
  color: #f87171;
  background: rgba(239, 68, 68, 0.1);
  border: 1px solid rgba(239, 68, 68, 0.25);
  border-radius: var(--radius-sm);
}

.chat-form-error[hidden] {
  display: none;
}

.chat-form {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 16px;
  border-top: 1px solid var(--color-border);
}

.chat-attach-btn {
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  padding: 0;
  background: rgba(255, 255, 255, 0.04);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  color: var(--color-text-muted);
  cursor: pointer;
  transition: all var(--transition);
}

.chat-attach-btn svg {
  width: 22px;
  height: 22px;
}

.chat-attach-btn:hover {
  color: var(--color-accent-light);
  border-color: rgba(16, 185, 129, 0.35);
  background: rgba(16, 185, 129, 0.08);
}

.chat-form input[type="text"] {
  flex: 1;
  padding: 12px 16px;
  background: var(--color-bg);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  color: var(--color-text);
  font-family: inherit;
  font-size: 0.9375rem;
}

.chat-form input[type="text"]:focus {
  outline: none;
  border-color: var(--color-accent);
}

/* Suivi */
.suivi-summary {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 16px;
  margin-bottom: 24px;
}

.suivi-summary-block {
  padding: 20px 22px;
  background: var(--color-bg-card);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
}

.suivi-summary-block--total {
  border-color: rgba(16, 185, 129, 0.15);
}

.suivi-summary-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 14px;
  flex-wrap: wrap;
}

.suivi-summary-head .suivi-summary-label {
  margin-bottom: 0;
}

.suivi-month-nav {
  display: flex;
  align-items: center;
  gap: 6px;
}

.suivi-month-btn {
  width: 32px;
  height: 32px;
  padding: 0;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-sm);
  background: rgba(255, 255, 255, 0.04);
  color: var(--color-text);
  font-size: 1.25rem;
  line-height: 1;
  cursor: pointer;
  transition: border-color var(--transition), color var(--transition);
}

.suivi-month-btn:hover:not(:disabled) {
  border-color: var(--color-accent);
  color: var(--color-accent-light);
}

.suivi-month-btn:disabled {
  opacity: 0.35;
  cursor: not-allowed;
}

.suivi-month-picker {
  padding: 6px 10px;
  background: var(--color-bg);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-sm);
  color: var(--color-text);
  font-family: inherit;
  font-size: 0.8125rem;
  cursor: pointer;
}

.suivi-month-picker:focus {
  outline: none;
  border-color: var(--color-accent);
}

.suivi-summary-label {
  display: block;
  margin-bottom: 14px;
  font-size: 0.8125rem;
  font-weight: 600;
  color: var(--color-text-muted);
}

.suivi-summary-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 12px;
}

.suivi-summary-stat {
  display: flex;
  flex-direction: column;
  gap: 4px;
  min-width: 0;
}

.suivi-summary-stat-label {
  font-size: 0.6875rem;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--color-text-subtle);
}

.suivi-summary-stat-value {
  font-size: 1.0625rem;
  font-weight: 700;
  white-space: nowrap;
}

.suivi-toolbar {
  display: grid;
  grid-template-columns: 1fr auto auto;
  gap: 10px;
  margin-bottom: 12px;
}

.suivi-search,
.suivi-filter-select {
  padding: 11px 14px;
  background: var(--color-bg);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  color: var(--color-text);
  font-family: inherit;
  font-size: 0.875rem;
}

.suivi-search:focus,
.suivi-filter-select:focus {
  outline: none;
  border-color: var(--color-accent);
}

.suivi-filter-result {
  margin: 0 0 12px;
  padding: 10px 12px;
  font-size: 0.8125rem;
  color: var(--color-text-muted);
  background: rgba(255, 255, 255, 0.03);
  border: 1px solid rgba(255, 255, 255, 0.05);
  border-radius: var(--radius-sm);
}

.suivi-filter-result[hidden] {
  display: none;
}

.suivi-chart-card {
  margin-bottom: 28px;
  padding: 22px 24px 18px;
  background: var(--color-bg-card);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
}

.suivi-chart-card--empty .suivi-chart-body {
  display: none;
}

.suivi-chart-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 14px;
}

.suivi-chart-title {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  margin: 0;
  font-size: 1.0625rem;
  font-weight: 600;
}

.suivi-chart-icon {
  color: var(--color-accent-light);
  flex-shrink: 0;
}

.suivi-chart-tabs {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-bottom: 16px;
}

.suivi-chart-tab {
  padding: 6px 12px;
  border: 1px solid transparent;
  border-radius: 999px;
  background: transparent;
  color: var(--color-text-subtle);
  font-size: 0.8125rem;
  cursor: pointer;
  transition: background 0.15s, color 0.15s, border-color 0.15s;
}

.suivi-chart-tab:hover {
  color: var(--color-text);
  background: rgba(255, 255, 255, 0.04);
}

.suivi-chart-tab[aria-selected='true'] {
  color: var(--color-text);
  background: rgba(255, 255, 255, 0.08);
  border-color: rgba(255, 255, 255, 0.12);
}

.suivi-chart-body {
  width: 100%;
  overflow-x: auto;
  padding-bottom: 4px;
}

.suivi-chart-svg {
  display: block;
  width: 100%;
  min-width: 640px;
  height: auto;
}

.suivi-chart-grid {
  stroke: rgba(255, 255, 255, 0.08);
  stroke-width: 1;
}

.suivi-chart-axis-y,
.suivi-chart-axis-x {
  fill: var(--color-text-subtle);
  font-size: 12px;
  font-family: inherit;
}

.suivi-chart-bar-value {
  fill: var(--color-text);
  font-size: 13px;
  font-weight: 600;
  font-family: inherit;
}

.suivi-chart-bar-value--negative {
  fill: #f87171;
}

.suivi-chart-bar {
  transition: opacity 0.15s;
}

.suivi-chart-bar-group:hover .suivi-chart-bar {
  opacity: 0.85;
}

.suivi-chart-empty {
  margin: 0;
  padding: 28px 12px;
  text-align: center;
  color: var(--color-text-subtle);
  font-size: 0.875rem;
}

.suivi-chart-empty[hidden] {
  display: none;
}

.suivi-layout {
  display: grid;
  grid-template-columns: minmax(280px, 1fr) minmax(320px, 1.2fr);
  gap: 32px;
  align-items: start;
}

.suivi-side-col {
  display: flex;
  flex-direction: column;
  gap: 20px;
}

.publication-quick-card {
  padding: 24px;
  background: var(--color-bg-card);
  border: 1px solid rgba(16, 185, 129, 0.22);
  border-radius: var(--radius-lg);
}

.publication-quick-card h3 {
  font-size: 1.0625rem;
  margin-bottom: 8px;
}

.publication-quick-desc {
  font-size: 0.8125rem;
  color: var(--color-text-muted);
  margin-bottom: 16px;
}

.publication-quick-card label {
  display: block;
  margin-bottom: 12px;
  font-size: 0.8125rem;
}

.publication-quick-card input {
  display: block;
  width: 100%;
  margin-top: 6px;
}

.publication-modal {
  position: fixed;
  inset: 0;
  z-index: 1200;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 20px;
}

.publication-modal[hidden] {
  display: none;
}

.publication-modal-backdrop {
  position: absolute;
  inset: 0;
  background: rgba(0, 0, 0, 0.72);
}

.publication-modal-panel {
  position: relative;
  width: min(720px, 100%);
  max-height: min(90vh, 900px);
  overflow: auto;
  background: var(--color-bg-card);
  border: 1px solid rgba(16, 185, 129, 0.28);
  border-radius: var(--radius-lg);
  box-shadow: 0 24px 80px rgba(0, 0, 0, 0.45);
}

.publication-modal-head {
  display: flex;
  justify-content: space-between;
  gap: 16px;
  padding: 20px 22px 12px;
  border-bottom: 1px solid var(--color-border);
}

.publication-modal-badge {
  display: inline-block;
  margin-bottom: 8px;
  padding: 4px 10px;
  border-radius: 999px;
  background: rgba(16, 185, 129, 0.14);
  border: 1px solid rgba(16, 185, 129, 0.28);
  color: var(--color-accent-light);
  font-size: 0.6875rem;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}

.publication-modal-head h2 {
  font-size: 1.25rem;
  margin-bottom: 4px;
}

.publication-modal-sub {
  font-size: 0.8125rem;
  color: var(--color-text-muted);
}

.publication-modal-close {
  width: 36px;
  height: 36px;
  border: none;
  border-radius: 8px;
  background: rgba(255, 255, 255, 0.06);
  color: var(--color-text);
  font-size: 1.5rem;
  line-height: 1;
  cursor: pointer;
}

.publication-modal-body {
  padding: 18px 22px 22px;
}

.publication-field {
  margin-bottom: 16px;
}

.publication-field label {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 12px;
  margin-bottom: 8px;
  font-size: 0.8125rem;
  font-weight: 600;
}

.publication-field textarea,
.publication-field input {
  width: 100%;
  padding: 12px 14px;
  border-radius: var(--radius-md);
  border: 1px solid var(--color-border);
  background: rgba(0, 0, 0, 0.18);
  color: var(--color-text);
  font: inherit;
  resize: vertical;
}

.publication-stats {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 10px;
  margin-bottom: 16px;
}

.publication-stat {
  padding: 12px;
  border-radius: var(--radius-md);
  background: rgba(16, 185, 129, 0.08);
  border: 1px solid rgba(16, 185, 129, 0.18);
}

.publication-stat-label {
  display: block;
  font-size: 0.6875rem;
  color: var(--color-text-muted);
  margin-bottom: 4px;
}

.publication-stat-value {
  font-size: 1rem;
  font-weight: 700;
}

.publication-checklist {
  margin: 0 0 16px;
  padding-left: 18px;
  color: var(--color-text-muted);
  font-size: 0.8125rem;
}

.publication-checklist li + li {
  margin-top: 4px;
}

.publication-copy-row {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.publication-copy-row .btn.copied {
  border-color: rgba(16, 185, 129, 0.45);
  color: var(--color-accent-light);
}

.publication-checklist-title {
  font-size: 0.875rem;
  margin-bottom: 8px;
}

.publication-modal-loading,
.publication-modal-error {
  font-size: 0.875rem;
  color: var(--color-text-muted);
}

.publication-modal-error {
  color: #fca5a5;
}

.profile-modal {
  position: fixed;
  inset: 0;
  z-index: 1200;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 20px;
}

.profile-modal[hidden] {
  display: none;
}

.profile-modal-backdrop {
  position: absolute;
  inset: 0;
  background: rgba(0, 0, 0, 0.72);
}

.profile-modal-panel {
  position: relative;
  width: min(520px, 100%);
  max-height: min(90vh, 720px);
  overflow: auto;
  background: var(--color-bg-card);
  border: 1px solid rgba(16, 185, 129, 0.28);
  border-radius: var(--radius-lg);
  box-shadow: 0 24px 80px rgba(0, 0, 0, 0.45);
}

.profile-modal-head {
  display: flex;
  justify-content: space-between;
  gap: 16px;
  padding: 20px 22px 12px;
  border-bottom: 1px solid var(--color-border);
}

.profile-modal-badge {
  display: inline-block;
  margin-bottom: 8px;
  padding: 4px 10px;
  border-radius: 999px;
  background: rgba(16, 185, 129, 0.14);
  border: 1px solid rgba(16, 185, 129, 0.28);
  color: var(--color-accent-light);
  font-size: 0.6875rem;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}

.profile-modal-head h2 {
  font-size: 1.25rem;
  margin-bottom: 4px;
}

.profile-modal-sub {
  font-size: 0.8125rem;
  color: var(--color-text-muted);
}

.profile-modal-close {
  width: 36px;
  height: 36px;
  border: none;
  border-radius: 8px;
  background: rgba(255, 255, 255, 0.06);
  color: var(--color-text);
  font-size: 1.5rem;
  line-height: 1;
  cursor: pointer;
}

.profile-modal-body {
  padding: 18px 22px 22px;
}

.profile-modal-preview {
  display: flex;
  align-items: center;
  gap: 14px;
  margin-bottom: 18px;
  padding: 14px 16px;
  border-radius: var(--radius-md);
  background: rgba(255, 255, 255, 0.03);
  border: 1px solid var(--color-border);
}

.profile-modal-avatar {
  flex-shrink: 0;
  width: 48px;
  height: 48px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: 700;
  font-size: 1.125rem;
  background: linear-gradient(135deg, var(--color-accent), var(--color-accent-dark));
}

.profile-modal-preview-text {
  display: flex;
  flex-direction: column;
  gap: 4px;
  min-width: 0;
}

.profile-modal-preview-text strong {
  font-size: 1rem;
}

.profile-modal-preview-text span {
  font-size: 0.8125rem;
  color: var(--color-text-muted);
  line-height: 1.4;
  word-break: break-word;
}

.profile-char-count {
  font-size: 0.75rem;
  font-weight: 500;
  color: var(--color-text-subtle);
}

.profile-form-error {
  margin: 0 0 12px;
  font-size: 0.8125rem;
  color: #f87171;
}

.profile-modal-actions {
  display: flex;
  justify-content: flex-end;
  gap: 10px;
  margin-top: 8px;
}

#profileEmailDisplay {
  opacity: 0.72;
  cursor: default;
}

.suivi-item-generate {
  margin-top: 6px;
}

.bot-listing-prepare-sale {
  border-color: rgba(16, 185, 129, 0.35);
  color: var(--color-accent-light);
}

.suivi-vinted-card {
  padding: 24px;
  background: var(--color-bg-card);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  margin-bottom: 16px;
}

.suivi-vinted-card--compact {
  margin-bottom: 20px;
  padding: 14px 18px;
  border-color: rgba(125, 211, 252, 0.22);
}

.suivi-vinted-bar {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}

.suivi-vinted-bar-main {
  flex: 1 1 220px;
  min-width: 0;
}

.suivi-vinted-bar-desc {
  margin: 4px 0 0;
  font-size: 0.8125rem;
  color: var(--color-text-subtle);
  line-height: 1.45;
}

.suivi-vinted-bar-actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
}

.suivi-vinted-setup {
  margin-top: 14px;
  padding-top: 14px;
  border-top: 1px solid var(--color-border);
}

.suivi-vinted-setup[hidden] {
  display: none;
}

.suivi-vinted-head h3 {
  margin: 6px 0 6px;
  font-size: 1.05rem;
}

.suivi-vinted-head p {
  margin: 0 0 14px;
  font-size: 0.8125rem;
  color: var(--color-text-subtle);
  line-height: 1.5;
}

.suivi-vinted-tag {
  display: inline-block;
  font-size: 0.6875rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: #7dd3fc;
}

.suivi-vinted-label {
  display: block;
  font-size: 0.8125rem;
  margin-bottom: 6px;
  color: var(--color-text-subtle);
}

.suivi-vinted-input {
  width: 100%;
  box-sizing: border-box;
  margin-bottom: 12px;
  padding: 10px 12px;
  border-radius: var(--radius-md);
  border: 1px solid var(--color-border);
  background: rgba(0, 0, 0, 0.2);
  color: inherit;
  font: inherit;
}

.suivi-vinted-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.suivi-vinted-status {
  margin: 12px 0 0;
  font-size: 0.8125rem;
  line-height: 1.45;
  color: var(--color-text-subtle);
}

.suivi-vinted-status--success {
  color: #6ee7b7;
}

.suivi-vinted-status--error {
  color: #fca5a5;
}

.suivi-vinted-status--info {
  color: #93c5fd;
}

.suivi-amounts-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
}

.suivi-item-flip-line {
  display: block;
  font-size: 0.8125rem;
  color: var(--color-text-subtle);
}

.suivi-item-margin {
  display: block;
  font-size: 1rem;
  font-weight: 800;
  margin-top: 4px;
}

.suivi-item-stock {
  display: inline-block;
  margin-top: 6px;
  font-size: 0.6875rem;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: #fbbf24;
}

.suivi-item-stock--warn {
  color: #fca5a5;
}

.suivi-item--flip .suivi-item-side {
  align-items: flex-end;
  text-align: right;
}

.suivi-item-source {
  margin-left: 6px;
  font-size: 0.625rem;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  vertical-align: middle;
}

.suivi-item-source--vinted {
  color: #7dd3fc;
}

.suivi-vinted-price {
  width: 100%;
  margin-top: 6px;
}

.suivi-vinted-price--pending {
  padding: 10px;
  border-radius: var(--radius-sm);
  background: rgba(251, 191, 36, 0.08);
  border: 1px solid rgba(251, 191, 36, 0.25);
}

.suivi-vinted-price-hint {
  margin: 0 0 8px;
  font-size: 0.75rem;
  color: #fbbf24;
  line-height: 1.35;
}

.suivi-vinted-price-row {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
}

.suivi-vinted-price-label {
  flex: 1 1 88px;
  min-width: 88px;
}

.suivi-vinted-price-input {
  width: 100%;
  padding: 6px 8px;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-sm);
  background: var(--color-surface);
  color: var(--color-text);
  font-size: 0.875rem;
}

.suivi-vinted-price-toggle {
  padding: 0;
  border: none;
  background: none;
  color: #fbbf24;
  font-size: 0.75rem;
  cursor: pointer;
  text-decoration: underline;
  text-underline-offset: 2px;
}

.suivi-vinted-price-toggle:hover {
  color: #fcd34d;
}

.suivi-item--price-pending {
  grid-template-columns: 64px 1fr;
  grid-template-areas:
    'thumb body'
    'side side';
  outline: 1px solid rgba(251, 191, 36, 0.3);
  outline-offset: -1px;
}

.suivi-item--price-pending .suivi-item-thumb,
.suivi-item--price-pending .suivi-item-thumb-btn,
.suivi-item--price-pending .suivi-item-thumb-empty {
  grid-area: thumb;
}

.suivi-item--price-pending .suivi-item-body {
  grid-area: body;
}

.suivi-item--price-pending .suivi-item-side {
  grid-area: side;
  width: 100%;
  align-items: stretch;
  text-align: left;
}

.suivi-vinted-price-field-label {
  display: block;
  font-size: 0.6875rem;
  color: var(--color-text-subtle);
  margin-bottom: 4px;
}

.suivi-vinted-price-label--buy {
  flex: 0 1 100px;
  min-width: 88px;
}

.suivi-vinted-price-save {
  flex-shrink: 0;
  pointer-events: auto;
  position: relative;
  z-index: 2;
}

.visually-hidden {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

.suivi-form,
.suivi-list-wrap {
  padding: 24px;
  background: var(--color-bg-card);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
}

.suivi-form h3,
.suivi-list-wrap h3 {
  font-size: 1.0625rem;
  margin-bottom: 20px;
}

.suivi-list-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 12px;
}

.suivi-list-header h3 {
  margin-bottom: 0;
}

.suivi-list-meta {
  display: flex;
  flex-wrap: wrap;
  flex-direction: row;
  align-items: center;
  justify-content: flex-end;
  gap: 10px;
}

.suivi-sync-badge {
  font-size: 0.6875rem;
  font-weight: 600;
  letter-spacing: 0.03em;
  text-transform: uppercase;
  color: var(--color-accent-light);
}

.suivi-sync-status {
  margin: 0 0 16px;
  font-size: 0.8125rem;
  color: var(--color-text-subtle);
}

.suivi-sync-status--warn {
  color: #fbbf24;
}

.suivi-sync-status--error {
  color: #f87171;
}

.suivi-list-count {
  font-size: 0.8125rem;
  color: var(--color-text-subtle);
}

.form-row {
  display: flex;
  flex-direction: column;
  gap: 16px;
  margin-bottom: 20px;
}

.form-row-inline {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
}

.form-row label {
  display: flex;
  flex-direction: column;
  gap: 6px;
  font-size: 0.8125rem;
  font-weight: 500;
  color: var(--color-text-muted);
}

.form-row input,
.form-row select {
  padding: 12px 14px;
  background: var(--color-bg);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  color: var(--color-text);
  font-family: inherit;
  font-size: 0.9375rem;
}

.form-row input:focus,
.form-row select:focus {
  outline: none;
  border-color: var(--color-accent);
}

.suivi-image-field {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.suivi-image-label {
  font-size: 0.8125rem;
  font-weight: 500;
  color: var(--color-text-muted);
}

.suivi-image-actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 10px;
}

.suivi-image-hint {
  font-size: 0.75rem;
  color: var(--color-text-subtle);
}

.suivi-image-hint kbd {
  display: inline-block;
  padding: 1px 5px;
  border-radius: 4px;
  border: 1px solid var(--color-border);
  background: rgba(255, 255, 255, 0.04);
  font-size: 0.6875rem;
  font-family: inherit;
}

.suivi-optional {
  font-weight: 400;
  color: var(--color-text-subtle);
}

.suivi-image-preview {
  position: relative;
  width: fit-content;
  max-width: 100%;
}

.suivi-image-preview img {
  display: block;
  width: 120px;
  height: 120px;
  object-fit: cover;
  border-radius: var(--radius-md);
  border: 1px solid var(--color-border);
}

.suivi-image-remove {
  position: absolute;
  top: 6px;
  right: 6px;
  width: 26px;
  height: 26px;
  border: none;
  border-radius: 50%;
  background: rgba(0, 0, 0, 0.72);
  color: #fff;
  font-size: 1.1rem;
  line-height: 1;
  cursor: pointer;
}

.suivi-form-error {
  margin: -8px 0 16px;
  font-size: 0.8125rem;
  color: #f87171;
}

.suivi-list {
  display: flex;
  flex-direction: column;
  gap: 10px;
  max-height: 620px;
  overflow-y: auto;
  padding-right: 4px;
}

.suivi-list li.suivi-empty {
  color: var(--color-text-subtle);
  justify-content: center;
  background: none;
  padding: 24px 14px;
  text-align: center;
}

.suivi-item {
  display: grid;
  grid-template-columns: 64px 1fr auto;
  gap: 14px;
  align-items: center;
  padding: 12px 14px;
  background: rgba(255, 255, 255, 0.03);
  border: 1px solid rgba(255, 255, 255, 0.04);
  border-radius: var(--radius-md);
}

.suivi-item-thumb,
.suivi-item-thumb-btn {
  width: 64px;
  height: 64px;
  border-radius: var(--radius-sm);
  overflow: hidden;
  flex-shrink: 0;
}

.suivi-item-thumb img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.suivi-item-thumb-btn {
  padding: 0;
  border: 1px solid var(--color-border);
  background: none;
  cursor: zoom-in;
}

.suivi-item-thumb-empty {
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(255, 255, 255, 0.04);
  color: var(--color-text-subtle);
  border: 1px dashed var(--color-border);
}

.suivi-item-body {
  display: flex;
  flex-direction: column;
  gap: 4px;
  min-width: 0;
}

.suivi-item-type {
  font-size: 0.6875rem;
  font-weight: 600;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--color-text-subtle);
}

.suivi-item-title {
  font-size: 0.9375rem;
  font-weight: 600;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.suivi-item-date {
  font-size: 0.75rem;
  color: var(--color-text-subtle);
}

.suivi-item-side {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 8px;
  flex-shrink: 0;
}

.suivi-item-amount {
  font-size: 1rem;
  font-weight: 700;
  white-space: nowrap;
}

.suivi-item-delete {
  padding: 0;
  border: none;
  background: none;
  color: var(--color-text-subtle);
  font-size: 0.75rem;
  cursor: pointer;
  text-decoration: underline;
  text-underline-offset: 2px;
}

.suivi-item-edit {
  padding: 0;
  border: none;
  background: none;
  color: var(--color-text-subtle);
  font-size: 0.75rem;
  cursor: pointer;
  text-decoration: underline;
  text-underline-offset: 2px;
}

.suivi-item-edit:hover {
  color: var(--color-accent-light);
}

.suivi-form-actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 10px;
}

.suivi-form--editing {
  outline: 1px solid rgba(34, 197, 94, 0.35);
  outline-offset: 4px;
  border-radius: var(--radius-md);
}

.suivi-item-delete:hover {
  color: #f87171;
}

.suivi-type-achat { color: #f87171; }
.suivi-type-vente { color: var(--color-accent-light); }

.suivi-lightbox {
  position: fixed;
  inset: 0;
  z-index: 9999;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 24px;
  background: rgba(0, 0, 0, 0.88);
}

.suivi-lightbox[hidden] {
  display: none;
}

.suivi-lightbox-img {
  max-width: min(92vw, 720px);
  max-height: 86vh;
  object-fit: contain;
  border-radius: var(--radius-md);
}

.suivi-lightbox-close {
  position: absolute;
  top: 20px;
  right: 24px;
  width: 40px;
  height: 40px;
  border: none;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.12);
  color: #fff;
  font-size: 1.5rem;
  cursor: pointer;
}

/* Lives */
.lives-list {
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.live-card {
  display: flex;
  align-items: center;
  gap: 24px;
  padding: 24px;
  background: var(--color-bg-card);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
}

.live-date {
  display: flex;
  flex-direction: column;
  align-items: center;
  min-width: 64px;
  padding: 12px;
  background: var(--color-accent-glow);
  border-radius: var(--radius-md);
  border: 1px solid rgba(16, 185, 129, 0.25);
}

.live-day {
  font-size: 0.6875rem;
  font-weight: 700;
  color: var(--color-accent);
  letter-spacing: 0.05em;
}

.live-time {
  font-size: 1.125rem;
  font-weight: 700;
}

.live-info {
  flex: 1;
}

.live-info h3 {
  font-size: 1.0625rem;
  margin-bottom: 4px;
}

.live-info p {
  font-size: 0.875rem;
  color: var(--color-text-muted);
}

/* Auth modals (index) */
.auth-overlay {
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, 0.75);
  backdrop-filter: blur(8px);
  z-index: 2000;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 24px;
  opacity: 0;
  visibility: hidden;
  transition: all 0.3s ease;
}

.auth-overlay.open {
  opacity: 1;
  visibility: visible;
}

.auth-modal {
  width: 100%;
  max-width: 440px;
  background: var(--color-bg-card);
  border: 1px solid var(--color-border-light);
  border-radius: var(--radius-xl);
  padding: 40px;
  position: relative;
  transform: translateY(20px);
  transition: transform 0.3s ease;
  max-height: 90vh;
  overflow-y: auto;
}

.auth-overlay.open .auth-modal {
  transform: translateY(0);
}

.auth-close {
  position: absolute;
  top: 16px;
  right: 16px;
  width: 36px;
  height: 36px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(255, 255, 255, 0.05);
  border: none;
  border-radius: 50%;
  color: var(--color-text-muted);
  font-size: 1.25rem;
  cursor: pointer;
  transition: all var(--transition);
}

.auth-close:hover {
  background: rgba(255, 255, 255, 0.1);
  color: var(--color-text);
}

.auth-modal h2 {
  font-size: 1.5rem;
  margin-bottom: 8px;
}

.auth-modal .auth-subtitle {
  font-size: 0.9375rem;
  color: var(--color-text-muted);
  margin-bottom: 28px;
}

.auth-form {
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.auth-form label {
  display: flex;
  flex-direction: column;
  gap: 6px;
  font-size: 0.8125rem;
  font-weight: 500;
  color: var(--color-text-muted);
}

.auth-form input {
  padding: 12px 14px;
  background: var(--color-bg);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  color: var(--color-text);
  font-family: inherit;
  font-size: 0.9375rem;
}

.auth-form input:focus {
  outline: none;
  border-color: var(--color-accent);
}

.auth-error {
  padding: 12px;
  background: rgba(239, 68, 68, 0.1);
  border: 1px solid rgba(239, 68, 68, 0.3);
  border-radius: var(--radius-md);
  color: #fca5a5;
  font-size: 0.875rem;
  display: none;
}

.auth-error.visible {
  display: block;
}

.auth-switch {
  margin-top: 20px;
  text-align: center;
  font-size: 0.875rem;
  color: var(--color-text-muted);
}

.auth-switch button {
  background: none;
  border: none;
  color: var(--color-accent-light);
  font-weight: 600;
  cursor: pointer;
  font-family: inherit;
  font-size: inherit;
}

.auth-switch button:hover {
  text-decoration: underline;
}

.payment-summary {
  padding: 20px;
  background: var(--color-bg);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  margin-bottom: 20px;
}

.payment-summary-row {
  display: flex;
  justify-content: space-between;
  font-size: 0.9375rem;
  margin-bottom: 8px;
}

.payment-summary-row.total {
  font-weight: 700;
  font-size: 1.125rem;
  padding-top: 12px;
  margin-top: 12px;
  border-top: 1px solid var(--color-border);
  color: var(--color-accent-light);
}

.recruitment-modal-tag {
  display: inline-block;
  padding: 4px 12px;
  margin-bottom: 12px;
  font-size: 0.75rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: #fbbf24;
  background: rgba(251, 191, 36, 0.12);
  border: 1px solid rgba(251, 191, 36, 0.25);
  border-radius: 100px;
}

.recruitment-modal-note {
  margin-top: 16px;
  font-size: 0.8125rem;
  color: var(--color-text-subtle);
  text-align: center;
  line-height: 1.5;
}

.recruitment-success-icon {
  width: 64px;
  height: 64px;
  margin: 0 auto 20px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.75rem;
  font-weight: 700;
  color: var(--color-accent-light);
  background: var(--color-accent-glow);
  border: 1px solid rgba(16, 185, 129, 0.3);
  border-radius: 50%;
}

.auth-form select {
  width: 100%;
  padding: 12px 14px;
  background: var(--color-bg);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  color: var(--color-text);
  font-family: inherit;
  font-size: 0.9375rem;
}

.auth-form select:focus {
  outline: none;
  border-color: var(--color-accent);
}

.payment-summary-referral .payment-discount {
  color: #fbbf24;
  font-weight: 600;
}

.payment-note {
  font-size: 0.75rem;
  color: var(--color-text-subtle);
  text-align: center;
  margin-top: 12px;
}

.btn-ghost-nav {
  padding: 10px 18px;
  font-size: 0.875rem;
}

/* Responsive app */
@media (max-width: 1024px) {
  .referral-tiers {
    grid-template-columns: 1fr;
  }

  .stats-grid {
    grid-template-columns: repeat(2, 1fr);
  }

  .app-cards-row,
  .box-grid {
    grid-template-columns: repeat(2, 1fr);
  }

  .suivi-summary {
    grid-template-columns: 1fr;
  }

  .suivi-summary-grid {
    grid-template-columns: repeat(2, 1fr);
  }

  .suivi-toolbar {
    grid-template-columns: 1fr;
  }

  .suivi-layout {
    grid-template-columns: 1fr;
  }

  .publication-stats {
    grid-template-columns: 1fr;
  }

  .form-row-inline {
    grid-template-columns: 1fr;
  }

  .suivi-item {
    grid-template-columns: 56px 1fr;
    grid-template-rows: auto auto;
  }

  .suivi-item-side {
    grid-column: 1 / -1;
    flex-direction: row;
    align-items: center;
    justify-content: space-between;
    padding-top: 4px;
    border-top: 1px solid rgba(255, 255, 255, 0.05);
  }
}

@media (max-width: 768px) {
  .app-sidebar {
    transform: translateX(-100%);
    padding-top: max(16px, env(safe-area-inset-top));
    padding-left: max(16px, env(safe-area-inset-left));
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
  }

  .app-sidebar.open {
    transform: translateX(0);
  }

  .app-sidebar .logo {
    overflow: visible;
    padding-top: 10px;
    margin-bottom: 24px;
  }

  .app-sidebar .logo-text {
    font-size: 1rem;
    line-height: 1.3;
  }

  .app-main {
    margin-left: 0;
  }

  .app-sidebar-toggle {
    display: flex;
    flex-shrink: 0;
  }

  .member-badge,
  .app-header-user .member-badge,
  .app-header-user .header-equipped-badge-wrap {
    display: none !important;
  }

  .app-content {
    padding: 20px;
  }

  .community-layout {
    grid-template-columns: 1fr;
  }

  .chat-top-bar {
    flex-direction: column;
    align-items: flex-start;
  }

  .chat-online-wrap {
    align-items: flex-start;
    width: 100%;
  }

  .chat-online-avatars {
    max-width: 100%;
  }

  .community-channels-header {
    width: 100%;
  }

  .channel-list {
    flex-direction: row;
    flex-wrap: wrap;
  }

  .channel-btn {
    width: auto;
    flex: 1 1 auto;
    min-width: 160px;
  }

  .channel-btn-desc {
    display: none;
  }

  .community-channels-header h3 {
    font-size: 1.125rem;
  }

  .stats-grid {
    grid-template-columns: 1fr;
  }

  .app-cards-row {
    grid-template-columns: 1fr;
  }

  .live-card {
    flex-direction: column;
    align-items: flex-start;
  }

  .app-header {
    padding: 10px 12px;
    padding-top: max(10px, env(safe-area-inset-top));
    padding-left: max(12px, env(safe-area-inset-left));
    padding-right: max(12px, env(safe-area-inset-right));
    gap: 8px;
    flex-wrap: nowrap;
    align-items: center;
  }

  .app-header-title {
    flex: 1;
    min-width: 0;
  }

  .app-header-title h1 {
    font-size: 1rem;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
  }

  .app-header-title p {
    display: none;
  }

  .app-header-title-row {
    gap: 6px;
  }

  .panel-category-nav {
    display: none;
  }

  .app-header-user {
    width: auto;
    flex-shrink: 0;
    justify-content: flex-end;
    margin-left: 0;
    gap: 0;
  }

  .user-pill {
    max-width: min(148px, 38vw);
    min-height: 40px;
    gap: 8px;
    padding: 4px 6px 4px 4px !important;
    border-radius: 999px;
  }

  .user-pill.is-admin,
  .user-pill.is-team-leader {
    max-width: min(148px, 38vw);
    padding: 4px 6px 4px 4px !important;
  }

  .user-avatar {
    width: 32px;
    height: 32px;
    font-size: 0.75rem;
    flex-shrink: 0;
  }

  .user-name-wrap {
    flex-direction: row;
    align-items: center;
    gap: 4px;
    min-width: 0;
    flex: 1;
  }

  .user-name {
    max-width: 100%;
    font-size: 0.8125rem;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }

  .user-email,
  .user-name-wrap .admin-badge,
  .user-name-wrap .team-leader-badge,
  .user-name-wrap .trial-badge {
    display: none !important;
  }

  .chat-composer {
    padding-bottom: max(12px, env(safe-area-inset-bottom));
  }

  .chat-composer-row {
    flex-wrap: wrap;
    gap: 8px;
  }

  .chat-input {
    min-height: 44px;
    font-size: 16px;
  }

  .chat-send-btn,
  .chat-image-btn {
    min-width: 44px;
    min-height: 44px;
  }

  .referral-hero h2 {
    font-size: 1.25rem;
  }

  .referral-card {
    padding: 16px;
  }

  .badges-grid {
    grid-template-columns: 1fr;
  }

  .app-sidebar-toggle {
    min-width: 44px;
    min-height: 44px;
  }
}

@media (max-width: 400px) {
  .user-name {
    display: none;
  }

  .user-pill,
  .user-pill.is-admin,
  .user-pill.is-team-leader {
    max-width: 40px;
    padding: 2px !important;
    gap: 0;
  }
}

@media (min-width: 769px) and (max-width: 1024px) {
  .app-header {
    padding: 16px 24px;
  }

  .app-content {
    padding: 24px;
  }

  .app-cards-row {
    grid-template-columns: repeat(2, 1fr);
  }

  .community-layout {
    grid-template-columns: 220px 1fr;
  }
}

/* Parrainage — espace membre */
.referral-hero {
  text-align: center;
  max-width: 560px;
  margin: 0 auto 40px;
}

.referral-hero h2 {
  font-size: 1.5rem;
  margin-bottom: 12px;
}

.referral-hero p {
  color: var(--color-text-muted);
  line-height: 1.65;
}

.referral-hero strong {
  color: var(--color-gold-light);
}

.referral-tiers {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 16px;
  margin-bottom: 28px;
}

.referral-tier {
  display: flex;
  align-items: flex-start;
  gap: 16px;
  padding: 20px;
  background: var(--color-bg-card);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
}

.referral-tier-featured {
  border-color: rgba(251, 191, 36, 0.4);
  background: rgba(251, 191, 36, 0.06);
}

.referral-tier-lifetime {
  border-color: rgba(251, 191, 36, 0.45);
  background: rgba(251, 191, 36, 0.05);
}

.referral-tier-leader {
  border-color: rgba(59, 130, 246, 0.45);
  background: linear-gradient(135deg, rgba(59, 130, 246, 0.08), rgba(168, 85, 247, 0.08));
}

.referral-tier-box {
  border-color: rgba(16, 185, 129, 0.4);
  background: rgba(16, 185, 129, 0.06);
}

.referral-tier-icon-lifetime {
  background: rgba(251, 191, 36, 0.2);
  border-color: rgba(251, 191, 36, 0.45);
  color: #fcd34d;
}

.referral-tier-icon-box {
  background: rgba(16, 185, 129, 0.18);
  border-color: rgba(16, 185, 129, 0.4);
  color: var(--color-accent-light);
  font-size: 0.9375rem;
}

.referral-tier-icon-leader {
  background: linear-gradient(135deg, rgba(59, 130, 246, 0.25), rgba(168, 85, 247, 0.25));
  border-color: rgba(96, 165, 250, 0.5);
  color: #93c5fd;
  animation: tl-pulse 2.5s ease-in-out infinite;
}

@keyframes tl-pulse {
  0%, 100% { box-shadow: 0 0 0 0 rgba(96, 165, 250, 0.3); }
  50% { box-shadow: 0 0 16px 4px rgba(168, 85, 247, 0.25); }
}

.referral-tier-icon {
  flex-shrink: 0;
  width: 40px;
  height: 40px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(251, 191, 36, 0.15);
  border: 1px solid rgba(251, 191, 36, 0.35);
  border-radius: 50%;
  font-weight: 700;
  font-size: 1.125rem;
  color: var(--color-gold);
}

.referral-tier h4 {
  font-size: 1rem;
  margin-bottom: 4px;
}

.referral-tier p {
  font-size: 0.875rem;
  color: var(--color-text-muted);
  line-height: 1.5;
}

.referral-tier strong {
  color: var(--color-gold-light);
}

.referral-progress-wrap {
  margin-bottom: 28px;
  padding: 20px 24px;
  background: var(--color-bg-card);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
}

.referral-progress-header {
  display: flex;
  justify-content: space-between;
  font-size: 0.875rem;
  color: var(--color-text-muted);
  margin-bottom: 12px;
}

.referral-progress-bar {
  height: 10px;
  background: rgba(255, 255, 255, 0.06);
  border-radius: 100px;
  overflow: hidden;
}

.referral-progress-fill {
  height: 100%;
  width: 0%;
  background: linear-gradient(90deg, var(--color-accent), var(--color-gold));
  border-radius: 100px;
  transition: width 0.5s ease;
}

.referral-progress-fill-leader {
  background: linear-gradient(90deg, #3b82f6, #a855f7, #06b6d4);
  background-size: 200% 100%;
  animation: tl-gradient-shift 3s ease infinite;
}

@keyframes tl-gradient-shift {
  0%, 100% { background-position: 0% 50%; }
  50% { background-position: 100% 50%; }
}

.referral-progress-leader {
  border-color: rgba(96, 165, 250, 0.25);
}

.referral-progress-lifetime {
  border-color: rgba(251, 191, 36, 0.25);
  margin-bottom: 16px;
}

.referral-progress-fill-lifetime {
  background: linear-gradient(90deg, #fbbf24, #f59e0b);
}

.referral-progress-box-discount {
  border-color: rgba(16, 185, 129, 0.25);
  margin-top: 16px;
}

.referral-progress-fill-box {
  background: linear-gradient(90deg, var(--color-accent), #34d399);
}

.referral-box-discount-unlocked {
  padding: 16px 20px;
  margin-bottom: 28px;
  background: rgba(16, 185, 129, 0.08);
  border: 1px solid rgba(16, 185, 129, 0.3);
  border-radius: var(--radius-lg);
}

.referral-box-discount-unlocked p {
  font-size: 0.9375rem;
  color: var(--color-text-muted);
  margin: 0;
}

.referral-box-discount-unlocked strong {
  color: var(--color-accent-light);
}

.referral-credits-notice {
  margin: 1rem 0 1.25rem;
  padding: 0.85rem 1rem;
  border-radius: 12px;
  border: 1px solid rgba(234, 179, 8, 0.35);
  background: rgba(234, 179, 8, 0.08);
}

.referral-credits-notice p {
  margin: 0;
  font-size: 0.92rem;
  color: var(--text-secondary, #cbd5e1);
}

.referral-credits-notice strong {
  color: #facc15;
}

.referral-lifetime-unlocked {
  padding: 16px 20px;
  margin-bottom: 16px;
  background: rgba(251, 191, 36, 0.08);
  border: 1px solid rgba(251, 191, 36, 0.3);
  border-radius: var(--radius-lg);
}

.referral-lifetime-unlocked p {
  font-size: 0.9375rem;
  color: var(--color-text-muted);
  margin: 0;
}

.referral-lifetime-unlocked strong {
  color: #fbbf24;
}

.team-leader-unlocked {
  display: flex;
  align-items: center;
  gap: 16px;
  padding: 20px 24px;
  margin-bottom: 28px;
  background: linear-gradient(135deg, rgba(59, 130, 246, 0.12), rgba(168, 85, 247, 0.12));
  border: 1px solid rgba(96, 165, 250, 0.35);
  border-radius: var(--radius-lg);
}

.team-leader-unlocked p {
  font-size: 0.9375rem;
  color: var(--color-text-muted);
  margin: 0;
}

.team-leader-unlocked strong {
  color: #93c5fd;
}

/* Team Leader — badge & nom animé */
.user-name-wrap {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 2px;
}

.user-pill.is-team-leader {
  padding: 6px 14px 6px 6px;
  background: rgba(59, 130, 246, 0.08);
  border: 1px solid rgba(96, 165, 250, 0.25);
  border-radius: 100px;
}

.team-leader-name {
  background: linear-gradient(90deg, #60a5fa, #a78bfa, #22d3ee, #60a5fa);
  background-size: 300% 100%;
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  animation: tl-name-flow 4s linear infinite;
  font-weight: 700;
}

@keyframes tl-name-flow {
  0% { background-position: 0% 50%; }
  100% { background-position: 300% 50%; }
}

.team-leader-avatar {
  background: linear-gradient(135deg, #3b82f6, #8b5cf6, #06b6d4) !important;
  box-shadow: 0 0 16px rgba(59, 130, 246, 0.45);
  animation: tl-pulse 2.5s ease-in-out infinite;
}

.team-leader-badge {
  display: inline-flex;
  align-items: center;
  padding: 3px 10px;
  font-size: 0.6875rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  border-radius: 100px;
  background: linear-gradient(90deg, #3b82f6, #8b5cf6, #06b6d4);
  background-size: 200% 100%;
  animation: tl-gradient-shift 3s ease infinite;
  color: #fff;
  white-space: nowrap;
}

.team-leader-badge-lg {
  padding: 8px 16px;
  font-size: 0.75rem;
}

.team-leader-badge-inline {
  font-size: 0.625rem;
  padding: 2px 8px;
  vertical-align: middle;
}

.member-badge-hidden {
  display: none !important;
}

.chat-author-leader {
  color: #93c5fd !important;
}

/* Box remise Team Leader */
.box-leader-notice {
  display: flex;
  align-items: center;
  gap: 16px;
  padding: 16px 20px;
  margin-bottom: 24px;
  background: linear-gradient(135deg, rgba(59, 130, 246, 0.1), rgba(168, 85, 247, 0.08));
  border: 1px solid rgba(96, 165, 250, 0.3);
  border-radius: var(--radius-lg);
}

.box-leader-notice p {
  margin: 0;
  font-size: 0.9375rem;
  color: var(--color-text-muted);
}

.box-leader-notice strong {
  color: #93c5fd;
}

.box-price-wrap {
  margin-bottom: 20px;
}

.box-price-old {
  display: block;
  font-size: 1rem;
  color: var(--color-text-subtle);
  text-decoration: line-through;
  margin-bottom: 4px;
}

.box-price-discounted {
  color: #93c5fd !important;
}

.referral-grid {
  display: grid;
  grid-template-columns: 1.4fr 1fr;
  gap: 24px;
  margin-bottom: 40px;
}

.referral-card {
  padding: 28px;
  background: var(--color-bg-card);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
}

.referral-card-beta {
  margin-bottom: 24px;
  border-color: rgba(251, 191, 36, 0.35);
  background: linear-gradient(135deg, rgba(251, 191, 36, 0.08) 0%, var(--color-bg-card) 55%);
}

.referral-beta-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  flex-wrap: wrap;
  margin-bottom: 12px;
}

.referral-beta-badge {
  display: inline-flex;
  align-items: center;
  padding: 4px 10px;
  border-radius: 999px;
  font-size: 0.75rem;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: #fbbf24;
  background: rgba(251, 191, 36, 0.15);
  border: 1px solid rgba(251, 191, 36, 0.35);
}

.referral-beta-count {
  font-size: 0.875rem;
  font-weight: 600;
  color: var(--color-text-muted);
}

.app-card-beta-invite {
  border-color: rgba(251, 191, 36, 0.35);
  background: linear-gradient(135deg, rgba(251, 191, 36, 0.08) 0%, var(--color-bg-card) 60%);
}

.referral-card h3 {
  font-size: 1.125rem;
  margin-bottom: 8px;
}

.referral-desc {
  font-size: 0.875rem;
  color: var(--color-text-muted);
  margin-bottom: 20px;
}

.referral-link-box {
  display: flex;
  gap: 12px;
  margin-bottom: 16px;
}

.referral-link-box input {
  flex: 1;
  padding: 12px 14px;
  background: var(--color-bg);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  color: var(--color-text-muted);
  font-family: inherit;
  font-size: 0.8125rem;
}

.referral-code-row {
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: 0.875rem;
  color: var(--color-text-muted);
}

.referral-code-row code {
  padding: 4px 10px;
  background: rgba(251, 191, 36, 0.12);
  border: 1px solid rgba(251, 191, 36, 0.3);
  border-radius: var(--radius-sm);
  color: var(--color-gold-light);
  font-weight: 600;
}

.referral-stats {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.referral-stat {
  flex: 1;
  padding: 20px;
  background: var(--color-bg-card);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  text-align: center;
}

.referral-stat-value {
  display: block;
  font-size: 2rem;
  font-weight: 700;
  margin-bottom: 4px;
}

.referral-stat-value.accent {
  color: var(--color-accent-light);
}

.referral-stat-value.gold {
  color: var(--color-gold);
}

.referral-stat-label {
  font-size: 0.8125rem;
  color: var(--color-text-muted);
}

.referral-how {
  padding: 28px;
  background: var(--color-bg-card);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  margin-bottom: 24px;
}

.referral-how h3 {
  font-size: 1.0625rem;
  margin-bottom: 20px;
}

.referral-steps {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 20px;
}

.referral-step {
  text-align: center;
}

.referral-step-num {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 36px;
  height: 36px;
  background: rgba(251, 191, 36, 0.15);
  border: 1px solid rgba(251, 191, 36, 0.35);
  border-radius: 50%;
  font-weight: 700;
  color: var(--color-gold);
  margin-bottom: 12px;
}

.referral-step p {
  font-size: 0.875rem;
  color: var(--color-text-muted);
  line-height: 1.5;
}

.referral-list-wrap {
  padding: 28px;
  background: var(--color-bg-card);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
}

.referral-list-wrap h3 {
  font-size: 1.0625rem;
  margin-bottom: 16px;
}

.referral-list li {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 14px 0;
  border-bottom: 1px solid var(--color-border);
  font-size: 0.9375rem;
}

.referral-list li:last-child {
  border-bottom: none;
}

.referral-list li.referral-empty {
  justify-content: center;
  color: var(--color-text-subtle);
  border: none;
}

.referral-date {
  font-size: 0.8125rem;
  color: var(--color-text-subtle);
}

/* Bannière parrainage — landing */
:root {
  --referral-banner-height: 0px;
}

.referral-banner {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 1001;
  background: linear-gradient(90deg, rgba(251, 191, 36, 0.15), rgba(16, 185, 129, 0.15));
  border-bottom: 1px solid rgba(251, 191, 36, 0.3);
  padding: 10px 0;
  padding-top: max(10px, env(safe-area-inset-top));
}

.referral-banner-inner {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 16px;
  flex-wrap: nowrap;
  font-size: 0.9375rem;
}

.referral-banner-text {
  margin: 0;
  flex: 1;
  min-width: 0;
  line-height: 1.4;
  text-align: center;
}

.referral-banner-detail--mobile {
  display: none;
}

.referral-banner-btn {
  flex-shrink: 0;
  white-space: nowrap;
}

body.has-referral-banner .header {
  top: var(--referral-banner-height, 52px);
}

body.has-referral-banner .hero {
  padding-top: calc(var(--header-height) + var(--referral-banner-height, 52px));
}

body.has-referral-banner .nav-links {
  top: calc(var(--header-height) + var(--referral-banner-height, 52px));
  max-height: calc(100dvh - var(--header-height) - var(--referral-banner-height, 52px));
  overflow-y: auto;
}

@media (max-width: 768px) {
  .referral-banner {
    padding: 6px 0;
    padding-top: max(6px, env(safe-area-inset-top));
    cursor: pointer;
  }

  .referral-banner-inner {
    flex-direction: row;
    align-items: center;
    gap: 8px;
    padding-left: max(12px, env(safe-area-inset-left));
    padding-right: max(12px, env(safe-area-inset-right));
  }

  .referral-banner-text {
    font-size: 0.75rem;
    text-align: left;
    line-height: 1.35;
    overflow: hidden;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
  }

  .referral-banner-detail--desktop {
    display: none;
  }

  .referral-banner-detail--mobile {
    display: inline;
  }

  /* Connexion / Rejoindre déjà dans le header — évite le chevauchement */
  .referral-banner-btn {
    display: none;
  }

  .referral-tiers {
    grid-template-columns: 1fr;
  }

  .referral-grid {
    grid-template-columns: 1fr;
  }

  .referral-steps {
    grid-template-columns: 1fr;
  }

  .referral-link-box {
    flex-direction: column;
  }

  .auth-modal {
    padding: 28px 20px;
    margin: 12px;
    max-height: calc(100dvh - 24px);
    border-radius: var(--radius-lg);
  }

  .auth-overlay {
    padding: env(safe-area-inset-top) env(safe-area-inset-right) env(safe-area-inset-bottom)
      env(safe-area-inset-left);
  }
}

/* ---- Bots Vinted ---- */

.bots-layout {
  display: flex;
  flex-direction: column;
  gap: 20px;
  max-width: 1200px;
}

.bots-status-bar {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
  padding: 12px 16px;
  background: var(--color-surface-elevated, rgba(255, 255, 255, 0.04));
  border: 1px solid var(--color-border, rgba(255, 255, 255, 0.08));
  border-radius: 12px;
  font-size: 0.875rem;
  color: var(--color-text-muted);
}

.bots-resume-btn {
  margin-left: auto;
  flex-shrink: 0;
}

.bots-status-dot {
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: #6b7280;
  flex-shrink: 0;
}

.bots-status-dot.online {
  background: #10b981;
  box-shadow: 0 0 8px rgba(16, 185, 129, 0.6);
}

.bots-status-dot.paused {
  background: #f59e0b;
}

.bots-offline-notice {
  padding: 14px 16px;
  background: rgba(239, 68, 68, 0.1);
  border: 1px solid rgba(239, 68, 68, 0.3);
  border-radius: 12px;
  font-size: 0.875rem;
}

.bots-offline-notice code {
  background: rgba(0, 0, 0, 0.2);
  padding: 2px 6px;
  border-radius: 4px;
  font-size: 0.8125rem;
}

.bots-grid {
  display: grid;
  grid-template-columns: minmax(280px, 340px) 1fr;
  gap: 24px;
  align-items: start;
}

.bots-sidebar {
  display: flex;
  flex-direction: column;
  gap: 20px;
}

.bots-card {
  background: var(--color-surface-elevated, rgba(255, 255, 255, 0.04));
  border: 1px solid var(--color-border, rgba(255, 255, 255, 0.08));
  border-radius: 16px;
  padding: 20px;
}

.bots-card h3 {
  margin: 0 0 16px;
  font-size: 1rem;
}

.bots-card-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 12px;
}

.bots-card-header h3 {
  margin: 0;
}

.bots-count {
  font-size: 0.8125rem;
  color: var(--color-text-subtle);
  background: rgba(251, 191, 36, 0.15);
  color: var(--color-gold);
  padding: 2px 8px;
  border-radius: 999px;
}

.bots-filter-form {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.bots-filter-form label {
  display: flex;
  flex-direction: column;
  gap: 6px;
  font-size: 0.8125rem;
  color: var(--color-text-muted);
}

.bots-filter-form input {
  padding: 10px 12px;
  border-radius: 8px;
  border: 1px solid var(--color-border, rgba(255, 255, 255, 0.12));
  background: rgba(0, 0, 0, 0.2);
  color: inherit;
  font-size: 0.9375rem;
}

.bots-brand-picker {
  position: relative;
}

.bots-brand-picker input[type='text'] {
  width: 100%;
  padding-right: 36px;
}

.bots-brand-picker input.is-selected {
  border-color: rgba(46, 204, 113, 0.45);
  box-shadow: 0 0 0 1px rgba(46, 204, 113, 0.15);
}

.bots-brand-clear {
  position: absolute;
  top: 50%;
  right: 8px;
  transform: translateY(-50%);
  width: 28px;
  height: 28px;
  border: none;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.08);
  color: inherit;
  cursor: pointer;
  font-size: 1.1rem;
  line-height: 1;
}

.bots-brand-clear:hover {
  background: rgba(255, 255, 255, 0.16);
}

.bots-brand-results {
  position: absolute;
  z-index: 25;
  top: calc(100% + 4px);
  left: 0;
  right: 0;
  max-height: 240px;
  overflow-y: auto;
  margin: 0;
  padding: 6px;
  list-style: none;
  border-radius: 10px;
  border: 1px solid var(--color-border, rgba(255, 255, 255, 0.12));
  background: var(--color-surface, #1a1d24);
  box-shadow: 0 12px 32px rgba(0, 0, 0, 0.35);
}

.bots-brand-option {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 2px;
  width: 100%;
  padding: 8px 10px;
  border: none;
  border-radius: 8px;
  background: transparent;
  color: inherit;
  text-align: left;
  cursor: pointer;
}

.bots-brand-option:hover,
.bots-brand-option:focus-visible {
  background: rgba(46, 204, 113, 0.12);
  outline: none;
}

.bots-brand-option strong {
  font-size: 0.875rem;
}

.bots-brand-option span {
  font-size: 0.75rem;
  color: var(--color-text-muted);
}

.bots-brand-empty {
  padding: 10px;
  font-size: 0.8125rem;
  color: var(--color-text-muted);
}

.bots-category-panel {
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding: 10px;
  border-radius: 10px;
  border: 1px solid var(--color-border, rgba(255, 255, 255, 0.12));
  background: rgba(0, 0, 0, 0.18);
}

.bots-category-selected {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  min-height: 0;
}

.bots-category-placeholder {
  font-size: 0.75rem;
  color: var(--color-text-muted);
  line-height: 1.4;
}

.bots-category-chip {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 4px 10px;
  border: none;
  border-radius: 999px;
  background: rgba(46, 204, 113, 0.16);
  color: #8ef0b3;
  font-size: 0.75rem;
  cursor: pointer;
}

.bots-category-chip span {
  font-size: 0.95rem;
  line-height: 1;
  opacity: 0.85;
}

.bots-category-search {
  width: 100%;
  padding: 9px 12px;
  border-radius: 8px;
  border: 1px solid var(--color-border, rgba(255, 255, 255, 0.12));
  background: rgba(0, 0, 0, 0.25);
  color: inherit;
  font-size: 0.875rem;
}

.bots-category-breadcrumb {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 4px;
  font-size: 0.75rem;
}

.bots-category-crumb {
  border: none;
  background: transparent;
  color: var(--color-text-muted);
  cursor: pointer;
  padding: 2px 4px;
  border-radius: 4px;
}

.bots-category-crumb:hover,
.bots-category-crumb.is-current {
  color: #8ef0b3;
}

.bots-category-crumb-sep {
  color: var(--color-text-subtle);
  user-select: none;
}

.bots-category-level,
.bots-category-search-results {
  list-style: none;
  margin: 0;
  padding: 0;
  max-height: 220px;
  overflow-y: auto;
}

.bots-category-row-all {
  border-bottom: 1px solid var(--color-border, rgba(255, 255, 255, 0.1));
  margin-bottom: 4px;
  padding-bottom: 4px;
}

.bots-category-all-label {
  font-weight: 600;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 2px;
}

.bots-category-all-sub {
  font-size: 0.6875rem;
  font-weight: 400;
  color: var(--color-text-muted);
}

.bots-category-row.is-covered-by-parent {
  opacity: 0.65;
}

.bots-category-row {
  display: grid;
  grid-template-columns: auto 1fr auto;
  align-items: center;
  gap: 8px;
  border-radius: 8px;
}

.bots-category-row:hover {
  background: rgba(255, 255, 255, 0.04);
}

.bots-category-check {
  display: flex;
  align-items: center;
  padding: 8px 0 8px 8px;
  cursor: pointer;
}

.bots-category-check input {
  width: 16px;
  height: 16px;
  accent-color: #2ecc71;
  cursor: pointer;
}

.bots-category-row-label {
  border: none;
  background: transparent;
  color: inherit;
  text-align: left;
  padding: 10px 0;
  font-size: 0.875rem;
  cursor: pointer;
}

.bots-category-row-go {
  width: 36px;
  height: 36px;
  border: none;
  border-radius: 8px;
  background: transparent;
  color: var(--color-text-muted);
  font-size: 1.25rem;
  cursor: pointer;
}

.bots-category-row-go:hover {
  background: rgba(255, 255, 255, 0.08);
  color: inherit;
}

.bots-category-search-results {
  border-radius: 8px;
  border: 1px solid var(--color-border, rgba(255, 255, 255, 0.12));
  background: rgba(0, 0, 0, 0.25);
}

.bots-category-search-option {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 2px;
  width: 100%;
  padding: 8px 10px;
  border: none;
  border-radius: 8px;
  background: transparent;
  color: inherit;
  text-align: left;
  cursor: pointer;
}

.bots-category-search-option:hover,
.bots-category-search-option:focus-visible {
  background: rgba(46, 204, 113, 0.12);
  outline: none;
}

.bots-category-search-option strong {
  font-size: 0.875rem;
}

.bots-category-search-option span {
  font-size: 0.75rem;
  color: var(--color-text-muted);
  line-height: 1.3;
}

.bots-category-empty {
  padding: 10px;
  font-size: 0.8125rem;
  color: var(--color-text-muted);
}

.bots-form-row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: 12px;
}

.bots-form-row label {
  min-width: 0;
}

.bots-filter-form input[type='number'] {
  width: 100%;
  max-width: 100%;
  box-sizing: border-box;
  -moz-appearance: textfield;
}

.bots-filter-form input[type='number']::-webkit-outer-spin-button,
.bots-filter-form input[type='number']::-webkit-inner-spin-button {
  -webkit-appearance: none;
  margin: 0;
}

.bots-form-hint {
  margin: 0;
  font-size: 0.75rem;
  color: var(--color-text-subtle);
}

.bots-color-field {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.bots-color-label {
  font-size: 0.8125rem;
  color: var(--color-text-muted);
}

.bots-color-picker {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.bots-color-swatch {
  width: 28px;
  height: 28px;
  border-radius: 50%;
  border: 2px solid transparent;
  background: var(--swatch-color);
  cursor: pointer;
  padding: 0;
  transition: transform 0.15s, box-shadow 0.15s;
}

.bots-color-swatch:hover {
  transform: scale(1.08);
}

.bots-color-swatch.selected {
  border-color: #fff;
  box-shadow: 0 0 0 2px var(--swatch-color);
}

.bots-form-error {
  margin-top: 12px;
  padding: 10px;
  background: rgba(239, 68, 68, 0.1);
  border-radius: 8px;
  color: #fca5a5;
  font-size: 0.8125rem;
}

.bots-filter-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.bots-filter-item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  padding: 10px 12px;
  border-radius: 10px;
  background: rgba(0, 0, 0, 0.15);
  border: 1px solid transparent;
  border-left: 3px solid var(--filter-color, #2ecc71);
}

.bots-filter-item.active {
  background: color-mix(in srgb, var(--filter-color, #2ecc71) 8%, rgba(0, 0, 0, 0.15));
  border-color: color-mix(in srgb, var(--filter-color, #2ecc71) 35%, transparent);
}

.bots-filter-color-btn {
  width: 14px;
  height: 14px;
  border-radius: 50%;
  border: none;
  background: var(--filter-color, #2ecc71);
  flex-shrink: 0;
  cursor: pointer;
  padding: 0;
  box-shadow: 0 0 0 2px color-mix(in srgb, var(--filter-color, #2ecc71) 30%, transparent);
  transition: transform 0.15s;
}

.bots-filter-color-btn:hover {
  transform: scale(1.15);
}

.bots-filter-item.inactive {
  opacity: 0.65;
}

.bots-filter-item.inactive .bots-filter-color-btn {
  opacity: 0.7;
}

.bots-filter-info {
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-width: 0;
}

.bots-filter-info strong {
  font-size: 0.875rem;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.bots-filter-meta {
  font-size: 0.75rem;
  color: var(--color-text-subtle);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.bots-form-actions {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.bots-card.is-editing {
  border-color: color-mix(in srgb, var(--color-gold) 45%, transparent);
  box-shadow: 0 0 0 1px color-mix(in srgb, var(--color-gold) 20%, transparent);
}

.bots-filter-actions {
  display: flex;
  gap: 4px;
  flex-shrink: 0;
  flex-wrap: wrap;
  justify-content: flex-end;
}

.bots-filter-actions .bot-edit {
  font-size: 0.75rem;
}

.bots-empty,
.bots-empty-feed {
  color: var(--color-text-subtle);
  font-size: 0.875rem;
  margin: 0;
}

.bots-feed-wrap {
  background: var(--color-surface-elevated, rgba(255, 255, 255, 0.04));
  border: 1px solid var(--color-border, rgba(255, 255, 255, 0.08));
  border-radius: 16px;
  padding: 20px;
  min-height: 400px;
}

.bots-feed-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 16px;
  flex-wrap: wrap;
}

.bots-feed-header h3 {
  margin: 0;
  font-size: 1rem;
}

.bots-feed-actions {
  display: flex;
  align-items: center;
  gap: 8px;
}

.bots-select {
  padding: 8px 12px;
  border-radius: 8px;
  border: 1px solid var(--color-border, rgba(255, 255, 255, 0.12));
  background: rgba(0, 0, 0, 0.2);
  color: inherit;
  font-size: 0.8125rem;
}

.bots-listings {
  display: flex;
  flex-direction: column;
  gap: 12px;
  max-height: 70vh;
  overflow-y: auto;
}

.bot-listing {
  display: flex;
  gap: 14px;
  padding: 12px;
  border-radius: 12px;
  background: rgba(0, 0, 0, 0.15);
  border: 1px solid transparent;
  border-left: 3px solid var(--filter-color, #2ecc71);
  transition: border-color 0.15s;
}

.bot-listing.unread {
  border-color: color-mix(in srgb, var(--filter-color, #fbbf24) 35%, transparent);
  background: color-mix(in srgb, var(--filter-color, #fbbf24) 6%, rgba(0, 0, 0, 0.15));
}

.bot-listing-img-wrap {
  flex-shrink: 0;
  width: 80px;
  height: 80px;
  border-radius: 8px;
  overflow: hidden;
  background: rgba(0, 0, 0, 0.3);
}

.bot-listing-img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.bot-listing-body {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.bot-listing-bot {
  font-size: 0.6875rem;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  align-self: flex-start;
  padding: 3px 8px;
  border-radius: 999px;
  color: var(--filter-color, var(--color-gold));
  background: color-mix(in srgb, var(--filter-color, var(--color-gold)) 18%, transparent);
  border: 1px solid color-mix(in srgb, var(--filter-color, var(--color-gold)) 35%, transparent);
}

.bot-listing-title {
  margin: 0;
  font-size: 0.9375rem;
  line-height: 1.3;
}

.bot-listing-prices {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
  margin-top: 2px;
}

.bot-listing-price-sale {
  font-size: 0.9375rem;
  font-weight: 600;
  color: var(--color-text);
}

.bot-listing-price-arrow {
  color: var(--color-text-subtle);
  font-size: 0.875rem;
}

.bot-listing-price-total {
  font-size: 0.9375rem;
  font-weight: 700;
  color: var(--color-gold);
}

.bot-listing-price-grand {
  font-size: 0.9375rem;
  font-weight: 700;
  color: #34d399;
}

.bot-listing-likes {
  font-size: 0.8125rem;
  color: #f472b6;
  font-weight: 600;
}

.bot-listing-price-detail {
  margin: 0;
  font-size: 0.75rem;
  color: var(--color-text-subtle);
  line-height: 1.3;
}

.bot-listing-price-unknown {
  font-size: 0.875rem;
  color: var(--color-text-muted);
}

.bot-listing-estimate {
  margin-top: 8px;
  padding: 10px 12px;
  background: rgba(16, 185, 129, 0.08);
  border: 1px solid rgba(16, 185, 129, 0.18);
  border-radius: var(--radius-sm);
}

.bot-listing-estimate--loading,
.bot-listing-estimate--empty {
  background: rgba(255, 255, 255, 0.03);
  border-color: rgba(255, 255, 255, 0.06);
  font-size: 0.8125rem;
  color: var(--color-text-subtle);
}

.bot-listing-estimate-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 8px;
}

.bot-listing-estimate-label {
  font-size: 0.75rem;
  color: var(--color-text-muted);
}

.bot-listing-estimate-value {
  font-size: 0.9375rem;
  color: var(--color-accent-light);
}

.bot-listing-estimate-margin {
  font-size: 0.8125rem;
  font-weight: 600;
  color: var(--color-text);
}

.bot-listing-estimate-meta {
  margin: 6px 0 0;
  font-size: 0.6875rem;
  color: var(--color-text-subtle);
  line-height: 1.4;
}

.bot-listing-vision-desc {
  margin: 0 0 8px;
  font-size: 0.75rem;
  color: var(--color-text-muted);
  line-height: 1.4;
}

.bot-listing-vision-desc strong {
  color: var(--color-text);
  font-weight: 600;
}

.bot-listing-estimate-source {
  margin: 0 0 8px;
  font-size: 0.6875rem;
  color: var(--color-text-subtle);
}

.bot-listing-comparables {
  margin: 8px 0 0;
  padding: 0;
  list-style: none;
  font-size: 0.6875rem;
}

.bot-listing-comparables li + li {
  margin-top: 4px;
}

.bot-listing-comparables a {
  color: var(--color-text-muted);
  text-decoration: none;
}

.bot-listing-comparables a:hover {
  color: var(--color-accent-light);
  text-decoration: underline;
}

.bots-price-insight {
  margin-bottom: 16px;
  padding: 14px 18px;
  background: rgba(16, 185, 129, 0.06);
  border: 1px solid rgba(16, 185, 129, 0.16);
  border-radius: var(--radius-lg);
}

.bots-sniper-panel {
  margin-bottom: 16px;
  padding: 16px 18px;
  border-radius: var(--radius-lg);
  background: rgba(255, 0, 110, 0.06);
  border: 1px solid rgba(255, 0, 110, 0.25);
}

.bots-sniper-head {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 16px;
  flex-wrap: wrap;
}

.bots-sniper-badge {
  display: inline-block;
  margin-right: 8px;
  padding: 2px 8px;
  font-size: 0.625rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  color: #fff;
  background: linear-gradient(90deg, #ff006e, #8338ec);
  border-radius: 999px;
}

.bots-sniper-desc {
  margin: 6px 0 0;
  font-size: 0.75rem;
  color: var(--color-text-muted);
}

.bots-sniper-toggle {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 0.8125rem;
  cursor: pointer;
}

.bots-sniper-status {
  margin: 10px 0 0;
  font-size: 0.75rem;
  color: var(--color-text-subtle);
}

.bots-sniper-picks {
  display: flex;
  flex-direction: column;
  gap: 14px;
  margin-top: 14px;
}

.bots-sniper-empty {
  margin: 0;
  font-size: 0.8125rem;
  color: var(--color-text-muted);
}

.bot-listing--sniper {
  position: relative;
  border: 2px solid transparent;
  border-radius: var(--radius-lg);
  background:
    linear-gradient(var(--color-surface, #12151c), var(--color-surface, #12151c)) padding-box,
    linear-gradient(120deg, #ff006e, #8338ec, #3a86ff, #06d6a0, #ffbe0b, #ff006e) border-box;
  background-size: 100% 100%, 300% 300%;
  animation: sniper-rainbow 4s linear infinite;
  box-shadow: 0 0 24px rgba(131, 56, 236, 0.25);
}

@keyframes sniper-rainbow {
  0% { background-position: 0 0, 0% 50%; }
  50% { background-position: 0 0, 100% 50%; }
  100% { background-position: 0 0, 0% 50%; }
}

.bot-listing--sold {
  opacity: 0.55;
  filter: grayscale(0.85);
}

.bot-listing--sold .bot-listing-img {
  opacity: 0.7;
}

.bot-listing-sold-badge {
  position: absolute;
  top: 10px;
  left: 10px;
  z-index: 2;
  padding: 4px 10px;
  font-size: 0.6875rem;
  font-weight: 800;
  letter-spacing: 0.12em;
  color: #fff;
  background: #64748b;
  border-radius: 6px;
}

.bot-listing-sold-label {
  color: #94a3b8;
  font-weight: 600;
}

.bot-listing-sniper-badge--sold {
  left: 10px;
  right: auto;
  background: #64748b;
  animation: none;
}

.bot-listing--instant {
  box-shadow: inset 0 0 0 1px rgba(16, 185, 129, 0.35);
}

.bot-listing--instant .bot-listing-meta {
  color: var(--color-accent-light);
}

.bot-listing-sniper-badge {
  position: absolute;
  top: 10px;
  left: 10px;
  z-index: 2;
  padding: 4px 10px;
  font-size: 0.6875rem;
  font-weight: 800;
  letter-spacing: 0.12em;
  color: #fff;
  background: linear-gradient(90deg, #ff006e, #ffbe0b);
  border-radius: 6px;
  animation: sniper-pulse 1.5s ease-in-out infinite;
}

.bot-listing-sniper-badge--niche {
  left: auto;
  right: 10px;
  background: linear-gradient(90deg, #7c3aed, #06b6d4);
  animation: none;
}

.bot-listing--sniper-discovery {
  box-shadow: 0 0 0 1px rgba(124, 58, 237, 0.35);
}

@keyframes sniper-pulse {
  0%, 100% { transform: scale(1); opacity: 1; }
  50% { transform: scale(1.05); opacity: 0.92; }
}

.bot-listing-estimate--sniper {
  background: rgba(255, 190, 11, 0.1);
  border-color: rgba(255, 190, 11, 0.35);
}

.bot-listing-sell-prediction {
  display: flex;
  flex-direction: column;
  gap: 2px;
  margin: 10px 0 8px;
  padding: 10px 12px;
  border-radius: var(--radius-md);
  font-size: 0.8125rem;
  border: 1px solid transparent;
}

.bot-listing-sell-prediction strong {
  font-size: 0.875rem;
  letter-spacing: 0.02em;
}

.bot-listing-sell-prediction--certain {
  background: linear-gradient(135deg, rgba(16, 185, 129, 0.18), rgba(59, 130, 246, 0.14));
  border-color: rgba(16, 185, 129, 0.45);
  color: #6ee7b7;
  animation: sell-glow 2.5s ease-in-out infinite;
}

.bot-listing-sell-prediction--high {
  background: rgba(16, 185, 129, 0.12);
  border-color: rgba(16, 185, 129, 0.3);
  color: var(--color-accent-light);
}

.bot-listing-sell-prediction--forming {
  background: rgba(245, 158, 11, 0.12);
  border-color: rgba(245, 158, 11, 0.32);
  color: #fcd34d;
}

.bot-listing-sell-prediction--forming strong {
  color: #fde68a;
}

.bot-listing-observation-note {
  font-size: 0.75rem;
  opacity: 0.9;
  margin-top: 2px;
}

.bot-listing-demand--early,
.bot-listing-demand--early-promising {
  background: rgba(245, 158, 11, 0.12);
  border-color: rgba(245, 158, 11, 0.28);
  color: #fcd34d;
}

.bot-listing-demand-meta--early,
.bot-listing-demand-meta--early-promising {
  color: #fcd34d;
}

.bot-listing-sell-prediction--good {
  background: rgba(59, 130, 246, 0.1);
  border-color: rgba(59, 130, 246, 0.25);
  color: #93c5fd;
}

.bot-listing-sell-prediction--moderate,
.bot-listing-sell-prediction--slow {
  background: rgba(148, 163, 184, 0.08);
  border-color: rgba(148, 163, 184, 0.2);
  color: var(--color-text-muted);
}

@keyframes sell-glow {
  0%, 100% { box-shadow: 0 0 0 rgba(16, 185, 129, 0); }
  50% { box-shadow: 0 0 18px rgba(16, 185, 129, 0.25); }
}

.bot-listing-demand {
  display: inline-block;
  margin-top: 8px;
  padding: 5px 10px;
  border-radius: 999px;
  font-size: 0.75rem;
  font-weight: 700;
}

.bot-listing-demand--viral,
.bot-listing-demand--hot {
  background: rgba(239, 68, 68, 0.16);
  border: 1px solid rgba(239, 68, 68, 0.35);
  color: #fca5a5;
}

.bot-listing-demand--warm {
  background: rgba(245, 158, 11, 0.14);
  border: 1px solid rgba(245, 158, 11, 0.3);
  color: #fcd34d;
}

.bot-listing-demand--stale,
.bot-listing-demand--cold {
  background: rgba(100, 116, 139, 0.12);
  border: 1px solid rgba(100, 116, 139, 0.25);
  color: #94a3b8;
}

.bot-listing-demand-meta {
  margin: 0 0 8px;
  font-size: 0.75rem;
  color: var(--color-text-muted);
}

.bot-listing-demand-meta--viral,
.bot-listing-demand-meta--hot {
  color: #fca5a5;
  font-weight: 600;
}

.bots-price-insight-head {
  display: flex;
  flex-direction: column;
  gap: 4px;
  margin-bottom: 10px;
}

.bots-price-insight-title {
  font-size: 0.8125rem;
  font-weight: 700;
  color: var(--color-accent-light);
}

.bots-price-insight-desc {
  font-size: 0.8125rem;
  color: var(--color-text-muted);
  line-height: 1.45;
}

.bots-price-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.bots-price-chip {
  padding: 5px 10px;
  font-size: 0.75rem;
  font-weight: 500;
  color: var(--color-text-muted);
  background: rgba(255, 255, 255, 0.04);
  border: 1px solid rgba(255, 255, 255, 0.06);
  border-radius: 100px;
}

.bots-price-chip--loading {
  color: var(--color-accent-light);
  border-color: rgba(16, 185, 129, 0.22);
}

.price-index-list {
  display: flex;
  flex-direction: column;
  gap: 8px;
  margin-bottom: 12px;
}

.price-index-item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  padding: 10px 12px;
  background: rgba(255, 255, 255, 0.03);
  border-radius: var(--radius-sm);
}

.price-index-item-main {
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-width: 0;
}

.price-index-item-main strong {
  font-size: 0.875rem;
}

.price-index-item-meta {
  font-size: 0.75rem;
  color: var(--color-text-subtle);
}

.price-index-status {
  margin-top: 10px;
  font-size: 0.8125rem;
  color: var(--color-text-muted);
}

.price-index-status--warn {
  color: #fbbf24;
}

.price-index-status--error {
  color: #f87171;
}

.bots-count-test {
  font-size: 0.625rem;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: #fbbf24;
}

.bot-listing-meta {
  margin: 0;
  font-size: 0.8125rem;
  color: var(--color-text-muted);
}

.bot-listing-actions {
  display: flex;
  gap: 8px;
  margin-top: 6px;
  flex-wrap: wrap;
}

@media (max-width: 900px) {
  .bots-grid {
    grid-template-columns: 1fr;
  }

  .bots-listings {
    max-height: none;
  }
}

/* ---- Collection badges (preview TEST) ---- */

.badges-hero {
  margin-bottom: 24px;
}

.badges-hero-tag {
  display: inline-block;
  margin-bottom: 10px;
  padding: 4px 10px;
  border-radius: 999px;
  font-size: 0.6875rem;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--color-accent-light);
  background: var(--color-accent-glow);
  border: 1px solid rgba(16, 185, 129, 0.3);
}

.badges-hero h2 {
  font-size: 1.5rem;
  margin-bottom: 8px;
}

.badges-hero p {
  color: var(--color-text-muted);
  max-width: 560px;
  line-height: 1.6;
}

.badges-equipped-card {
  padding: 20px 22px;
  margin-bottom: 20px;
  border-radius: var(--radius-lg);
  border: 1px solid var(--color-border);
  background: var(--color-bg-alt);
}

.badges-equipped-head h3 {
  font-size: 1rem;
  margin-bottom: 4px;
}

.badges-equipped-head p {
  font-size: 0.8125rem;
  color: var(--color-text-subtle);
  margin-bottom: 16px;
}

.badges-chat-preview {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 10px;
  padding: 16px 18px;
  border-radius: var(--radius-md);
  background: rgba(0, 0, 0, 0.25);
  border: 1px solid var(--color-border);
  min-height: 64px;
  position: relative;
  overflow: hidden;
}

.badges-chat-preview-name {
  font-size: 0.9375rem;
  font-weight: 700;
  color: var(--color-accent-light);
}

.badges-equipped-label {
  margin-top: 12px;
  font-size: 0.8125rem;
  color: var(--color-text-subtle);
}

.badges-tier-legend {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 12px 18px;
  margin-bottom: 20px;
  padding: 12px 16px;
  border-radius: var(--radius-md);
  background: rgba(255, 255, 255, 0.02);
  border: 1px solid var(--color-border);
  font-size: 0.75rem;
  color: var(--color-text-muted);
}

.badges-tier-dot {
  display: inline-block;
  width: 10px;
  height: 10px;
  border-radius: 50%;
  margin-right: 4px;
  vertical-align: middle;
}

.badges-tier-dot-common { background: #6b7280; }
.badges-tier-dot-uncommon { background: #10b981; }
.badges-tier-dot-rare { background: #3b82f6; }
.badges-tier-dot-epic { background: #a855f7; }
.badges-tier-dot-legendary { background: #f59e0b; }
.badges-tier-dot-mythic { background: #ec4899; }
.badges-tier-dot-goat { background: linear-gradient(135deg, #ffd700, #ff2060); }

.badges-category {
  margin-top: 28px;
}

.badges-category:first-of-type {
  margin-top: 20px;
}

.badges-category-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 16px;
  margin-bottom: 14px;
  padding-bottom: 12px;
  border-bottom: 1px solid var(--color-border);
}

.badges-category-head h3 {
  margin: 6px 0 2px;
  font-size: 1.15rem;
}

.badges-category-head p {
  margin: 0;
  font-size: 0.85rem;
  color: var(--color-text-subtle);
}

.badges-category-tag {
  display: inline-block;
  padding: 3px 10px;
  border-radius: 999px;
  font-size: 0.68rem;
  font-weight: 800;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: #6ee7b7;
  background: rgba(16, 185, 129, 0.1);
  border: 1px solid rgba(16, 185, 129, 0.28);
}

.badges-category-tag-soon {
  color: #fbbf24;
  background: rgba(251, 191, 36, 0.08);
  border-color: rgba(251, 191, 36, 0.28);
}

.badges-category-progress {
  flex-shrink: 0;
  padding: 6px 12px;
  border-radius: var(--radius-md);
  font-size: 0.85rem;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
  color: var(--unlock-accent, #fbbf24);
  background: rgba(255, 255, 255, 0.03);
  border: 1px solid var(--color-border);
}

.badges-category-soon .badges-category-head {
  opacity: 0.72;
}

.badges-category-soon-label {
  flex-shrink: 0;
  padding: 6px 12px;
  border-radius: var(--radius-md);
  font-size: 0.78rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: #fbbf24;
  background: rgba(251, 191, 36, 0.08);
  border: 1px dashed rgba(251, 191, 36, 0.35);
}

.badges-category-teaser {
  margin: 0;
  padding: 14px 16px;
  border-radius: var(--radius-md);
  font-size: 0.85rem;
  color: var(--color-text-subtle);
  background: rgba(255, 255, 255, 0.02);
  border: 1px dashed var(--color-border);
}

.badges-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
  gap: 16px;
  margin-bottom: 20px;
}

.badge-card-legendary-spotlight {
  background:
    linear-gradient(145deg, rgba(186, 230, 253, 0.08) 0%, var(--color-bg-alt) 40%, rgba(255, 255, 255, 0.04) 100%);
  border-color: rgba(203, 213, 225, 0.35);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.06),
    0 0 24px rgba(255, 255, 255, 0.06);
}

.badge-card-legendary-spotlight.is-unlocked {
  border-color: rgba(255, 255, 255, 0.38);
  box-shadow:
    0 0 32px rgba(255, 255, 255, 0.12),
    0 0 48px rgba(186, 230, 253, 0.1),
    inset 0 1px 0 rgba(255, 255, 255, 0.1);
}

.badge-card-legendary-spotlight.is-unlocked .badge-card-tier {
  color: #e0f2fe;
  text-shadow: 0 0 12px rgba(255, 255, 255, 0.4);
}

.badge-card {
  display: flex;
  flex-direction: column;
  gap: 10px;
  padding: 18px;
  border-radius: var(--radius-lg);
  border: 1px solid var(--color-border);
  background: var(--color-bg-alt);
  transition: border-color 0.2s, transform 0.2s, box-shadow 0.2s;
  cursor: pointer;
}

.badge-card:hover {
  border-color: rgba(16, 185, 129, 0.35);
  transform: translateY(-2px);
}

.badge-card.is-equipped {
  border-color: rgba(16, 185, 129, 0.55);
  box-shadow: 0 0 24px rgba(16, 185, 129, 0.12);
}

.badge-card.is-locked {
  opacity: 0.52;
  filter: grayscale(0.35) saturate(0.7);
  cursor: not-allowed;
}

.badge-card.is-locked:has([data-badge-progress]) {
  opacity: 0.88;
  filter: grayscale(0.08) saturate(0.95);
  cursor: default;
}

.badge-card.is-locked:hover {
  transform: none;
  border-color: var(--color-border);
}

.badge-card.is-locked .badge-card-visual {
  position: relative;
}

.badge-card.is-locked .badge-card-visual::after {
  display: none;
}

.badge-objective {
  margin-top: 4px;
  padding: 12px;
  border-radius: var(--radius-md);
  background: rgba(255, 255, 255, 0.04);
  border: 1px solid rgba(255, 255, 255, 0.08);
}

.badge-objective-label {
  margin: 0 0 8px;
  font-size: 0.82rem;
  font-weight: 600;
  color: var(--color-text-muted);
  text-transform: uppercase;
  letter-spacing: 0.04em;
}

.badge-progress-track {
  height: 10px;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.08);
  overflow: hidden;
  border: 1px solid rgba(255, 255, 255, 0.06);
}

.badge-progress-fill {
  display: block;
  height: 100%;
  width: 0%;
  border-radius: inherit;
  background: linear-gradient(90deg, #10b981, #34d399, #6ee7b7);
  transition: width 0.45s ease;
  box-shadow: 0 0 12px rgba(16, 185, 129, 0.35);
}

.badge-card.is-unlocked .badge-progress-fill {
  background: linear-gradient(90deg, #fbbf24, #f59e0b);
  box-shadow: 0 0 14px rgba(251, 191, 36, 0.4);
}

.badge-progress-text {
  margin: 8px 0 0;
  font-size: 0.85rem;
  color: var(--color-text-subtle);
  font-variant-numeric: tabular-nums;
}

.badge-auto-note {
  margin: 8px 0 0;
  padding: 10px 12px;
  border-radius: var(--radius-md);
  font-size: 0.85rem;
  font-weight: 600;
  color: #6ee7b7;
  background: rgba(16, 185, 129, 0.08);
  border: 1px solid rgba(16, 185, 129, 0.25);
  text-align: center;
}

.badge-card.is-locked .badge-auto-note {
  color: var(--color-text-muted);
  background: rgba(0, 0, 0, 0.2);
  border-color: var(--color-border);
}

.badge-card.is-unlocked {
  opacity: 1;
  filter: none;
}

.badge-card.is-unlocked .badge-objective[hidden] {
  display: none !important;
}

.badge-card.is-unlocked:not(.is-equipped):hover {
  border-color: rgba(251, 191, 36, 0.45);
}

.badges-unlock-counter {
  margin-top: 10px;
  font-size: 0.95rem;
  color: var(--unlock-accent, #fbbf24);
  font-weight: 600;
}

.header-equipped-badge-wrap {
  display: inline-flex;
  align-items: center;
  margin-left: 8px;
  vertical-align: middle;
  position: relative;
  overflow: visible;
}

.header-equipped-badge {
  display: inline-flex;
  align-items: center;
  position: relative;
  overflow: visible;
}

#badgePreviewSlot {
  display: inline-flex;
  align-items: center;
  position: relative;
  overflow: hidden;
  max-width: 240px;
}

.header-equipped-badge-wrap .rg-badge {
  transform: none;
  transform-origin: left center;
}

.chat-collection-badge {
  display: inline-flex;
  align-items: center;
  vertical-align: middle;
}

.header-equipped-badge-wrap .badge-semestre-aura,
.header-equipped-badge-wrap .badge-semestre-orbit,
.header-equipped-badge-wrap .badge-semestre-stars,
.header-equipped-badge .badge-semestre-aura,
.header-equipped-badge .badge-semestre-orbit,
.header-equipped-badge .badge-semestre-stars,
#badgePreviewSlot .badge-semestre-aura,
#badgePreviewSlot .badge-semestre-orbit,
#badgePreviewSlot .badge-semestre-stars,
.header-equipped-badge-wrap .badge-trimestre-stars,
.header-equipped-badge .badge-trimestre-stars,
#badgePreviewSlot .badge-trimestre-stars {
  display: none !important;
}

.header-equipped-badge-wrap .badge-trimestre-stars,
.header-equipped-badge .badge-trimestre-stars,
#badgePreviewSlot .badge-trimestre-stars {
  display: none !important;
}

.badge-card-admin-pill {
  padding: 9px 22px;
  font-size: 0.9375rem;
}

.badge-card-admin-only .badge-auto-note {
  color: var(--unlock-accent, #fbbf24);
}

.badge-unlock-symbols-canvas {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
  z-index: 3;
  opacity: 0.42;
  background: transparent;
}

.badge-unlock-modal--ultimate .badge-unlock-panel {
  animation: badge-unlock-pop 0.55s cubic-bezier(0.34, 1.56, 0.64, 1) forwards,
    badge-ultimate-shake 0.5s ease 0.55s 2;
}

.badge-unlock-modal--ultimate .badge-unlock-backdrop {
  animation: badge-ultimate-flash 1.2s ease 0.2s 2;
}

@keyframes badge-ultimate-shake {
  0%, 100% { transform: scale(1) translateX(0); }
  25% { transform: scale(1.02) translateX(-4px); }
  75% { transform: scale(1.02) translateX(4px); }
}

@keyframes badge-ultimate-flash {
  0%, 100% { filter: brightness(1); }
  50% { filter: brightness(1.35); }
}

.badge-card-goat {
  grid-column: 1 / -1;
  max-width: 100%;
  background: linear-gradient(135deg, rgba(255, 140, 0, 0.06), rgba(255, 32, 96, 0.04));
  border-color: rgba(255, 180, 0, 0.25);
}

@media (min-width: 720px) {
  .badge-card-goat {
    display: grid;
    grid-template-columns: 1fr 1.2fr;
    grid-template-rows: auto auto 1fr auto;
    column-gap: 20px;
    align-items: start;
  }

  .badge-card-goat .badge-card-tier { grid-column: 1; }
  .badge-card-goat .badge-card-visual { grid-column: 1; grid-row: 2 / 4; }
  .badge-card-goat h4 { grid-column: 2; grid-row: 1; align-self: end; }
  .badge-card-goat p { grid-column: 2; grid-row: 2; }
  .badge-card-goat .badge-card-condition { grid-column: 2; grid-row: 3; }
  .badge-card-goat .badge-equip-btn { grid-column: 2; grid-row: 4; justify-self: start; }
}

.badge-card-tier {
  font-size: 0.625rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--color-text-subtle);
}

.badge-card-visual {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 88px;
  padding: 16px 12px;
}

.badge-card h4 {
  font-size: 0.9375rem;
}

.badge-card p {
  font-size: 0.8125rem;
  color: var(--color-text-muted);
  line-height: 1.5;
  flex: 1;
}

.badge-card-condition {
  font-size: 0.75rem;
  color: var(--color-text-subtle);
  padding: 6px 10px;
  border-radius: var(--radius-sm);
  background: rgba(255, 255, 255, 0.03);
  border: 1px dashed var(--color-border);
}

.badge-equip-btn {
  align-self: flex-start;
  margin-top: auto;
}

.badges-footnote {
  font-size: 0.8125rem;
  color: var(--color-text-subtle);
  line-height: 1.55;
  padding: 14px 16px;
  border-radius: var(--radius-md);
  background: rgba(255, 255, 255, 0.02);
  border: 1px solid var(--color-border);
}

/* Base badge pill */
.rg-badge {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  padding: 9px 20px;
  border-radius: 999px;
  font-size: 0.9375rem;
  font-weight: 800;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  white-space: nowrap;
  isolation: isolate;
  overflow: hidden;
}

/* 1 — Commun : plat, gris, zero animation */
.rg-badge-common {
  color: #9ca3af;
  background: rgba(107, 114, 128, 0.15);
  border: 1px solid rgba(107, 114, 128, 0.35);
}

/* 2 — Peu commun : bordure verte */
.rg-badge-uncommon {
  color: #6ee7b7;
  background: rgba(16, 185, 129, 0.1);
  border: 1px solid rgba(16, 185, 129, 0.45);
}

.rg-badge-crew {
  color: #ecfdf5;
  border-radius: 999px;
  padding: 9px 20px;
  font-size: 0.9375rem;
  font-weight: 800;
  letter-spacing: 0.06em;
  background:
    linear-gradient(
      135deg,
      #34d399 0%,
      #10b981 28%,
      #fbbf24 52%,
      #10b981 78%,
      #059669 100%
    );
  background-size: 220% 220%;
  border: 1px solid rgba(167, 243, 208, 0.75);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.45),
    inset 0 -2px 4px rgba(4, 47, 46, 0.2),
    0 0 20px rgba(16, 185, 129, 0.35),
    0 0 32px rgba(251, 191, 36, 0.15);
  animation: rg-crew-glow 3.5s ease-in-out infinite;
  text-shadow: 0 1px 2px rgba(4, 47, 46, 0.45);
}

.rg-badge-crew::before {
  content: '';
  position: absolute;
  inset: 0;
  border-radius: inherit;
  background: linear-gradient(
    105deg,
    transparent 32%,
    rgba(255, 255, 255, 0.45) 50%,
    transparent 68%
  );
  transform: translateX(-130%);
  animation: admin-shimmer 3.6s ease-in-out infinite;
  pointer-events: none;
  z-index: 1;
  mix-blend-mode: soft-light;
}

.rg-badge-uncommon.rg-badge-crew {
  color: #ecfdf5;
  background:
    linear-gradient(
      135deg,
      #34d399 0%,
      #10b981 28%,
      #fbbf24 52%,
      #10b981 78%,
      #059669 100%
    );
  background-size: 220% 220%;
  border: 1px solid rgba(167, 243, 208, 0.75);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.45),
    inset 0 -2px 4px rgba(4, 47, 46, 0.2),
    0 0 20px rgba(16, 185, 129, 0.35),
    0 0 32px rgba(251, 191, 36, 0.15);
}

@keyframes rg-crew-glow {
  0%, 100% {
    background-position: 0% 50%;
    box-shadow:
      inset 0 1px 0 rgba(255, 255, 255, 0.45),
      inset 0 -2px 4px rgba(4, 47, 46, 0.2),
      0 0 20px rgba(16, 185, 129, 0.35),
      0 0 32px rgba(251, 191, 36, 0.15);
  }
  50% {
    background-position: 100% 50%;
    box-shadow:
      inset 0 1px 0 rgba(255, 255, 255, 0.55),
      inset 0 -2px 4px rgba(4, 47, 46, 0.15),
      0 0 28px rgba(16, 185, 129, 0.48),
      0 0 40px rgba(251, 191, 36, 0.22);
  }
}

.rg-badge-crew-month {
  color: #faf5ff;
  border-radius: 999px;
  padding: 9px 22px;
  font-size: 0.9375rem;
  font-weight: 800;
  letter-spacing: 0.06em;
  background:
    linear-gradient(
      135deg,
      #7c3aed 0%,
      #a855f7 24%,
      #fbbf24 50%,
      #c084fc 76%,
      #6d28d9 100%
    );
  background-size: 240% 240%;
  border: 1px solid rgba(216, 180, 254, 0.78);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.48),
    inset 0 -2px 5px rgba(76, 29, 149, 0.32),
    0 0 22px rgba(124, 58, 237, 0.42),
    0 0 34px rgba(251, 191, 36, 0.22);
  animation: rg-crew-month-glow 4s ease-in-out infinite;
  text-shadow: 0 1px 2px rgba(76, 29, 149, 0.48);
}

.rg-badge-crew-month::before {
  content: '';
  position: absolute;
  inset: 0;
  border-radius: inherit;
  background: linear-gradient(
    105deg,
    transparent 30%,
    rgba(255, 255, 255, 0.48) 50%,
    transparent 70%
  );
  transform: translateX(-130%);
  animation: admin-shimmer 4.2s ease-in-out infinite;
  pointer-events: none;
  z-index: 1;
  mix-blend-mode: soft-light;
}

.rg-badge-rare.rg-badge-crew-month {
  color: #faf5ff;
  background:
    linear-gradient(
      135deg,
      #7c3aed 0%,
      #a855f7 24%,
      #fbbf24 50%,
      #c084fc 76%,
      #6d28d9 100%
    );
  background-size: 240% 240%;
  border: 1px solid rgba(216, 180, 254, 0.78);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.48),
    inset 0 -2px 5px rgba(76, 29, 149, 0.32),
    0 0 22px rgba(124, 58, 237, 0.42),
    0 0 34px rgba(251, 191, 36, 0.22);
}

@keyframes rg-crew-month-glow {
  0%, 100% {
    background-position: 0% 50%;
    box-shadow:
      inset 0 1px 0 rgba(255, 255, 255, 0.48),
      inset 0 -2px 5px rgba(76, 29, 149, 0.32),
      0 0 22px rgba(124, 58, 237, 0.42),
      0 0 34px rgba(251, 191, 36, 0.22);
  }
  50% {
    background-position: 100% 50%;
    box-shadow:
      inset 0 1px 0 rgba(255, 255, 255, 0.58),
      inset 0 -2px 5px rgba(76, 29, 149, 0.22),
      0 0 30px rgba(167, 139, 250, 0.52),
      0 0 44px rgba(251, 191, 36, 0.3);
  }
}

.rg-badge-crew-trimestre {
  color: #ecfeff;
  padding: 10px 26px;
  font-size: 0.9375rem;
  font-weight: 800;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  background:
    linear-gradient(165deg, #042f2e 0%, #115e59 34%, #9f1239 54%, #134e4a 80%, #0f172a 100%);
  background-size: 260% 260%;
  border: 1px solid rgba(45, 212, 191, 0.68);
  box-shadow:
    inset 0 1px 0 rgba(153, 246, 228, 0.38),
    inset 0 -4px 10px rgba(0, 0, 0, 0.42),
    inset 0 0 14px rgba(244, 63, 94, 0.14),
    0 0 0 1px rgba(15, 23, 42, 0.85),
    0 0 22px rgba(20, 184, 166, 0.4),
    0 0 38px rgba(244, 63, 94, 0.2);
  animation: rg-crew-trimestre-shift 5s ease-in-out infinite;
  text-shadow:
    0 0 10px rgba(45, 212, 191, 0.42),
    0 1px 2px rgba(0, 0, 0, 0.65);
}

.rg-badge-crew-trimestre::before {
  content: '';
  position: absolute;
  inset: 0;
  border-radius: inherit;
  background: linear-gradient(
    105deg,
    transparent 28%,
    rgba(153, 246, 228, 0.42) 50%,
    transparent 72%
  );
  transform: translateX(-130%);
  animation: admin-shimmer 4.4s ease-in-out infinite;
  pointer-events: none;
  z-index: 1;
  mix-blend-mode: soft-light;
}

.rg-badge-crew-trimestre::after {
  content: '';
  position: absolute;
  left: 14%;
  right: 14%;
  bottom: 5px;
  height: 2px;
  border-radius: 999px;
  background: linear-gradient(90deg, transparent, #fb7185, #2dd4bf, #fb7185, transparent);
  opacity: 0.88;
  pointer-events: none;
  z-index: 1;
}

.rg-badge-epic.rg-badge-crew-trimestre {
  color: #ecfeff;
  background:
    linear-gradient(165deg, #042f2e 0%, #115e59 34%, #9f1239 54%, #134e4a 80%, #0f172a 100%);
  background-size: 260% 260%;
  border: 1px solid rgba(45, 212, 191, 0.68);
  box-shadow:
    inset 0 1px 0 rgba(153, 246, 228, 0.38),
    inset 0 -4px 10px rgba(0, 0, 0, 0.42),
    inset 0 0 14px rgba(244, 63, 94, 0.14),
    0 0 0 1px rgba(15, 23, 42, 0.85),
    0 0 22px rgba(20, 184, 166, 0.4),
    0 0 38px rgba(244, 63, 94, 0.2);
  animation: rg-crew-trimestre-shift 5s ease-in-out infinite;
}

@keyframes rg-crew-trimestre-shift {
  0%, 100% {
    background-position: 0% 50%;
    box-shadow:
      inset 0 1px 0 rgba(153, 246, 228, 0.38),
      inset 0 -4px 10px rgba(0, 0, 0, 0.42),
      inset 0 0 14px rgba(244, 63, 94, 0.14),
      0 0 0 1px rgba(15, 23, 42, 0.85),
      0 0 22px rgba(20, 184, 166, 0.4),
      0 0 38px rgba(244, 63, 94, 0.2);
  }
  50% {
    background-position: 100% 50%;
    box-shadow:
      inset 0 1px 0 rgba(153, 246, 228, 0.48),
      inset 0 -4px 10px rgba(0, 0, 0, 0.32),
      inset 0 0 18px rgba(244, 63, 94, 0.22),
      0 0 0 1px rgba(45, 212, 191, 0.45),
      0 0 30px rgba(45, 212, 191, 0.52),
      0 0 48px rgba(251, 113, 133, 0.28);
  }
}

@keyframes rg-crew-trimestre-stars {
  0%, 100% { opacity: 0.55; transform: translateX(-50%) translateY(0); }
  50% { opacity: 1; transform: translateX(-50%) translateY(-2px); }
}

.badge-card-visual--trimestre {
  position: relative;
  padding: 16px 12px;
  min-height: 72px;
  overflow: visible;
  display: flex;
  align-items: center;
  justify-content: center;
}

.badge-card-visual--trimestre .rg-badge-crew-trimestre {
  transform: none;
  box-shadow:
    inset 0 1px 0 rgba(153, 246, 228, 0.38),
    inset 0 -3px 8px rgba(0, 0, 0, 0.35),
    0 0 16px rgba(20, 184, 166, 0.3),
    0 0 24px rgba(244, 63, 94, 0.16) !important;
}

/* — Six mois crew : légendaire, au-dessus du trimestre — */
.rg-badge-crew-semestre {
  color: #fffbeb;
  padding: 11px 28px 11px 22px;
  font-size: 0.9375rem;
  font-weight: 800;
  letter-spacing: 0.12em;
  background:
    linear-gradient(
      145deg,
      #1e1b4b 0%,
      #312e81 18%,
      #6366f1 38%,
      #fbbf24 52%,
      #ffd700 58%,
      #4338ca 72%,
      #0f172a 100%
    );
  background-size: 320% 320%;
  border: 1px solid rgba(251, 191, 36, 0.82);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.55),
    inset 0 -5px 12px rgba(15, 23, 42, 0.55),
    inset 0 0 20px rgba(129, 140, 248, 0.18),
    0 0 0 1px rgba(99, 102, 241, 0.45),
    0 0 28px rgba(99, 102, 241, 0.48),
    0 0 44px rgba(251, 191, 36, 0.38),
    0 0 64px rgba(255, 215, 0, 0.22);
  animation: rg-crew-semestre-shift 4.2s ease-in-out infinite;
  text-shadow:
    0 0 12px rgba(255, 215, 0, 0.55),
    0 1px 2px rgba(15, 23, 42, 0.75);
  z-index: 2;
}

.rg-badge-semestre-crown {
  width: 15px;
  height: 10px;
  fill: currentColor;
  filter: drop-shadow(0 0 5px rgba(255, 215, 0, 0.95));
  animation: rg-crew-semestre-crown 2.4s ease-in-out infinite;
}

.rg-badge-crew-semestre::before {
  content: '';
  position: absolute;
  inset: 0;
  border-radius: inherit;
  background: linear-gradient(
    105deg,
    transparent 22%,
    rgba(255, 255, 255, 0.55) 50%,
    transparent 78%
  );
  transform: translateX(-130%);
  animation: admin-shimmer 3.2s ease-in-out infinite;
  pointer-events: none;
  z-index: 1;
  mix-blend-mode: soft-light;
}

.rg-badge-crew-semestre::after {
  content: '';
  position: absolute;
  left: 10%;
  right: 10%;
  bottom: 4px;
  height: 2px;
  border-radius: 999px;
  background: linear-gradient(90deg, transparent, #818cf8, #ffd700, #fbbf24, #818cf8, transparent);
  opacity: 0.95;
  pointer-events: none;
  z-index: 1;
}

.rg-badge-legendary.rg-badge-crew-semestre {
  color: #fffbeb;
  background:
    linear-gradient(
      145deg,
      #1e1b4b 0%,
      #312e81 18%,
      #6366f1 38%,
      #fbbf24 52%,
      #ffd700 58%,
      #4338ca 72%,
      #0f172a 100%
    );
  background-size: 320% 320%;
  border: 1px solid rgba(251, 191, 36, 0.82);
  animation: rg-crew-semestre-shift 4.2s ease-in-out infinite;
}

@keyframes rg-crew-semestre-shift {
  0%, 100% {
    background-position: 0% 50%;
    box-shadow:
      inset 0 1px 0 rgba(255, 255, 255, 0.55),
      inset 0 -5px 12px rgba(15, 23, 42, 0.55),
      inset 0 0 20px rgba(129, 140, 248, 0.18),
      0 0 0 1px rgba(99, 102, 241, 0.45),
      0 0 28px rgba(99, 102, 241, 0.48),
      0 0 44px rgba(251, 191, 36, 0.38),
      0 0 64px rgba(255, 215, 0, 0.22);
  }
  50% {
    background-position: 100% 50%;
    box-shadow:
      inset 0 1px 0 rgba(255, 255, 255, 0.65),
      inset 0 -5px 12px rgba(15, 23, 42, 0.42),
      inset 0 0 26px rgba(255, 215, 0, 0.24),
      0 0 0 1px rgba(251, 191, 36, 0.62),
      0 0 38px rgba(129, 140, 248, 0.62),
      0 0 58px rgba(255, 215, 0, 0.48),
      0 0 82px rgba(99, 102, 241, 0.35);
  }
}

@keyframes rg-crew-semestre-crown {
  0%, 100% { transform: translateY(0) scale(1); filter: drop-shadow(0 0 5px rgba(255, 215, 0, 0.95)); }
  50% { transform: translateY(-1px) scale(1.08); filter: drop-shadow(0 0 10px rgba(255, 215, 0, 1)); }
}

@keyframes rg-crew-semestre-stars {
  0%, 100% { opacity: 0.65; transform: translateX(-50%) translateY(0) scale(1); }
  50% { opacity: 1; transform: translateX(-50%) translateY(-3px) scale(1.04); }
}

@keyframes rg-crew-semestre-aura {
  0%, 100% { opacity: 0.45; transform: translate(-50%, -50%) scale(0.92); }
  50% { opacity: 0.85; transform: translate(-50%, -50%) scale(1.08); }
}

.badge-card-visual--semestre {
  position: relative;
  padding: 16px 12px;
  min-height: 72px;
  overflow: visible;
  display: flex;
  align-items: center;
  justify-content: center;
}

.badge-semestre-aura,
.badge-semestre-orbit {
  display: none !important;
}

.badge-card-visual--semestre .rg-badge-crew-semestre {
  transform: none;
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.5),
    inset 0 -3px 8px rgba(15, 23, 42, 0.38),
    0 0 16px rgba(99, 102, 241, 0.32),
    0 0 26px rgba(251, 191, 36, 0.24) !important;
}

/* — Un an crew : mythique — */
.rg-badge-crew-annee {
  color: #fff1f2;
  padding: 11px 30px 11px 22px;
  font-size: 0.9375rem;
  font-weight: 800;
  letter-spacing: 0.14em;
  background:
    linear-gradient(
      145deg,
      #0f0518 0%,
      #500724 16%,
      #831843 32%,
      #ec4899 48%,
      #ffd700 54%,
      #be185d 68%,
      #312e81 84%,
      #0f0518 100%
    );
  background-size: 340% 340%;
  border: 1px solid rgba(244, 114, 182, 0.75);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.5),
    inset 0 -4px 10px rgba(0, 0, 0, 0.48),
    inset 0 0 18px rgba(236, 72, 153, 0.2),
    0 0 20px rgba(236, 72, 153, 0.42),
    0 0 36px rgba(255, 215, 0, 0.28),
    0 0 52px rgba(168, 85, 247, 0.22);
  animation: rg-crew-annee-shift 3.8s ease-in-out infinite;
  text-shadow:
    0 0 14px rgba(244, 114, 182, 0.55),
    0 0 8px rgba(255, 215, 0, 0.35),
    0 1px 2px rgba(0, 0, 0, 0.7);
}

.rg-badge-annee-crown {
  width: 16px;
  height: 11px;
  fill: currentColor;
  filter: drop-shadow(0 0 6px rgba(255, 215, 0, 0.95));
  animation: rg-crew-annee-crown 2.2s ease-in-out infinite;
}

.rg-badge-crew-annee::before {
  content: '';
  position: absolute;
  inset: 0;
  border-radius: inherit;
  background: linear-gradient(
    105deg,
    transparent 20%,
    rgba(255, 255, 255, 0.5) 50%,
    transparent 80%
  );
  transform: translateX(-130%);
  animation: admin-shimmer 2.8s ease-in-out infinite;
  pointer-events: none;
  z-index: 1;
  mix-blend-mode: soft-light;
}

.rg-badge-crew-annee::after {
  content: '';
  position: absolute;
  left: 8%;
  right: 8%;
  bottom: 4px;
  height: 2px;
  border-radius: 999px;
  background: linear-gradient(90deg, transparent, #f472b6, #ffd700, #a855f7, #ffd700, transparent);
  opacity: 0.92;
  pointer-events: none;
  z-index: 1;
}

.rg-badge-mythic.rg-badge-crew-annee {
  color: #fff1f2;
  background:
    linear-gradient(
      145deg,
      #0f0518 0%,
      #500724 16%,
      #831843 32%,
      #ec4899 48%,
      #ffd700 54%,
      #be185d 68%,
      #312e81 84%,
      #0f0518 100%
    );
  background-size: 340% 340%;
  border: 1px solid rgba(244, 114, 182, 0.75);
  animation: rg-crew-annee-shift 3.8s ease-in-out infinite;
}

@keyframes rg-crew-annee-shift {
  0%, 100% {
    background-position: 0% 50%;
    box-shadow:
      inset 0 1px 0 rgba(255, 255, 255, 0.5),
      inset 0 -4px 10px rgba(0, 0, 0, 0.48),
      inset 0 0 18px rgba(236, 72, 153, 0.2),
      0 0 20px rgba(236, 72, 153, 0.42),
      0 0 36px rgba(255, 215, 0, 0.28),
      0 0 52px rgba(168, 85, 247, 0.22);
  }
  50% {
    background-position: 100% 50%;
    box-shadow:
      inset 0 1px 0 rgba(255, 255, 255, 0.62),
      inset 0 -4px 10px rgba(0, 0, 0, 0.38),
      inset 0 0 22px rgba(255, 215, 0, 0.26),
      0 0 28px rgba(244, 114, 182, 0.55),
      0 0 44px rgba(255, 215, 0, 0.38),
      0 0 64px rgba(168, 85, 247, 0.32);
  }
}

@keyframes rg-crew-annee-crown {
  0%, 100% { transform: translateY(0) scale(1); filter: drop-shadow(0 0 6px rgba(255, 215, 0, 0.95)); }
  50% { transform: translateY(-1px) scale(1.1); filter: drop-shadow(0 0 12px rgba(255, 215, 0, 1)); }
}

.badge-card-visual--annee {
  position: relative;
  padding: 16px 12px;
  min-height: 72px;
  overflow: visible;
  display: flex;
  align-items: center;
  justify-content: center;
}

.badge-card-visual--annee .rg-badge-crew-annee {
  transform: none;
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.48),
    inset 0 -3px 8px rgba(0, 0, 0, 0.4),
    0 0 18px rgba(236, 72, 153, 0.35),
    0 0 28px rgba(255, 215, 0, 0.22) !important;
}

/* — Cinq ans crew : GOAT suprême — */
.badge-card[data-badge-id="cinq-ans-crew"].is-unlocked {
  border-color: rgba(255, 180, 0, 0.38);
  background:
    linear-gradient(165deg, rgba(26, 8, 0, 0.55) 0%, var(--color-bg-alt) 42%, rgba(69, 10, 10, 0.35) 100%);
  box-shadow:
    0 0 28px rgba(255, 107, 0, 0.1),
    inset 0 1px 0 rgba(255, 215, 0, 0.08);
}

.badge-card[data-badge-id="cinq-ans-crew"].is-unlocked .badge-card-tier {
  color: #ffd700;
  text-shadow: 0 0 14px rgba(255, 140, 0, 0.55);
}

.badge-card[data-badge-id="cinq-ans-crew"].is-equipped {
  border-color: rgba(255, 215, 0, 0.58);
  box-shadow:
    0 0 36px rgba(255, 107, 0, 0.2),
    0 0 56px rgba(255, 32, 96, 0.12),
    inset 0 0 24px rgba(255, 140, 0, 0.04);
}

.badge-card-visual--cinq-ans {
  position: relative;
  padding: 20px 14px;
  min-height: 84px;
  overflow: visible;
  display: flex;
  align-items: center;
  justify-content: center;
}

.badge-cinq-ans-shell {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

/* Noir + contour or — une seule couche, zéro trou */
.rg-badge-crew-cinq-ans {
  position: relative;
  z-index: 1;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 11px 28px 11px 20px;
  border: 2px solid #d4af37;
  border-radius: 999px;
  overflow: hidden;
  background-color: #0a0908;
  background-image: linear-gradient(168deg, #1e1a16 0%, #12100e 45%, #0a0908 100%);
  box-shadow:
    inset 0 1px 0 rgba(255, 236, 179, 0.32),
    inset 0 -10px 18px rgba(0, 0, 0, 0.55);
}

.badge-card-visual--cinq-ans .rg-badge-crew-cinq-ans {
  animation: rg-cinq-ans-card-glow 3.2s ease-in-out infinite;
}

.rg-badge-crew-cinq-ans::before {
  content: '';
  position: absolute;
  inset: 0;
  border-radius: inherit;
  background: linear-gradient(
    105deg,
    transparent 18%,
    rgba(255, 248, 220, 0.42) 50%,
    transparent 82%
  );
  transform: translateX(-130%);
  animation: admin-shimmer 2.6s ease-in-out infinite;
  pointer-events: none;
  z-index: 1;
  mix-blend-mode: soft-light;
}

.rg-badge-crew-cinq-ans::after {
  content: '';
  position: absolute;
  left: 10%;
  right: 10%;
  bottom: 5px;
  height: 1px;
  border-radius: 999px;
  background: linear-gradient(90deg, transparent, #ffd700, #fff8e7, #ffd700, transparent);
  opacity: 0.85;
  pointer-events: none;
  z-index: 1;
}

.rg-badge-cinq-ans-label {
  position: relative;
  z-index: 2;
  color: #fceec8;
  font-weight: 800;
  letter-spacing: 0.15em;
  text-transform: uppercase;
  text-shadow:
    0 0 10px rgba(255, 215, 0, 0.4),
    0 1px 2px rgba(0, 0, 0, 0.85);
}

.rg-badge-cinq-ans-crown {
  position: relative;
  z-index: 2;
  width: 17px;
  height: 11px;
  fill: #ffd966;
  filter: drop-shadow(0 0 5px rgba(255, 215, 0, 0.75));
  animation: rg-crew-cinq-ans-crown 2.2s ease-in-out infinite;
}

@keyframes rg-cinq-ans-card-glow {
  0%, 100% {
    box-shadow:
      inset 0 1px 0 rgba(255, 236, 179, 0.32),
      inset 0 -10px 18px rgba(0, 0, 0, 0.55),
      0 0 18px rgba(255, 200, 50, 0.18),
      0 0 32px rgba(255, 120, 0, 0.08);
  }
  50% {
    box-shadow:
      inset 0 1px 0 rgba(255, 236, 179, 0.32),
      inset 0 -10px 18px rgba(0, 0, 0, 0.55),
      0 0 24px rgba(255, 220, 100, 0.28),
      0 0 42px rgba(255, 140, 0, 0.12);
  }
}

@keyframes rg-crew-cinq-ans-crown {
  0%, 100% { transform: translateY(0); filter: drop-shadow(0 0 5px rgba(255, 215, 0, 0.75)); }
  50% { transform: translateY(-1px); filter: drop-shadow(0 0 10px rgba(255, 248, 220, 0.95)); }
}

.header-equipped-badge-wrap .rg-badge-cinq-ans-label,
#badgePreviewSlot .rg-badge-cinq-ans-label,
#panel-communaute .chat-collection-badge .rg-badge-cinq-ans-label {
  letter-spacing: 0.08em;
  text-shadow: 0 0 6px rgba(255, 215, 0, 0.35);
}

/* 3 — Rare : dégradé bleu statique */
.rg-badge-rare {
  color: #bfdbfe;
  background: linear-gradient(135deg, rgba(59, 130, 246, 0.35), rgba(37, 99, 235, 0.2));
  border: 1px solid rgba(96, 165, 250, 0.5);
  box-shadow: 0 0 10px rgba(59, 130, 246, 0.15);
}

/* 4 — Épique : dégradé animé + pulse */
.rg-badge-epic {
  color: #fff;
  background: linear-gradient(90deg, #7c3aed, #a855f7, #ec4899, #7c3aed);
  background-size: 250% 100%;
  border: 1px solid rgba(168, 85, 247, 0.6);
  animation: rg-epic-flow 3s linear infinite, rg-epic-pulse 2s ease-in-out infinite;
}

@keyframes rg-epic-flow {
  0% { background-position: 0% 50%; }
  100% { background-position: 250% 50%; }
}

@keyframes rg-epic-pulse {
  0%, 100% { box-shadow: 0 0 12px rgba(168, 85, 247, 0.35); }
  50% { box-shadow: 0 0 22px rgba(236, 72, 153, 0.5); }
}

/* 5 — Légendaire : or + shimmer + glow */
.rg-badge-legendary {
  color: #1a0800;
  background: linear-gradient(135deg, #ffe566, #ffb020, #ff8c00, #ffe566);
  background-size: 280% 280%;
  border: 1px solid rgba(255, 200, 80, 0.75);
  animation: admin-gradient 4s ease infinite, admin-badge-pulse 2.2s ease-in-out infinite;
}

/* 6 — Mythique : anneau néon rotatif */
.rg-badge-mythic {
  color: #fff;
  background: linear-gradient(135deg, #831843, #be185d, #db2777);
  border: 1px solid rgba(244, 114, 182, 0.5);
  box-shadow: 0 0 20px rgba(236, 72, 153, 0.4);
  animation: rg-mythic-pulse 2s ease-in-out infinite;
}

.rg-badge-orbit {
  position: absolute;
  inset: -3px;
  border-radius: inherit;
  padding: 2px;
  background: conic-gradient(from 0deg, #f472b6, #a855f7, #22d3ee, #f472b6);
  -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
  mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
  -webkit-mask-composite: xor;
  mask-composite: exclude;
  animation: rg-orbit-spin 2.5s linear infinite;
  pointer-events: none;
  z-index: -1;
}

@keyframes rg-orbit-spin {
  to { transform: rotate(360deg); }
}

@keyframes rg-mythic-pulse {
  0%, 100% { box-shadow: 0 0 16px rgba(236, 72, 153, 0.35); }
  50% { box-shadow: 0 0 28px rgba(168, 85, 247, 0.55); }
}

/* 7 — GOAT : tout activé */
.rg-badge-goat {
  color: #1a0800;
  padding: 7px 16px 7px 12px;
  font-size: 0.75rem;
  background: linear-gradient(135deg, #ffd700 0%, #ff6b00 35%, #ff2060 65%, #ffd700 100%);
  background-size: 320% 320%;
  border: 1px solid rgba(255, 220, 100, 0.9);
  animation: admin-gradient 3s ease infinite, rg-goat-mega-pulse 1.8s ease-in-out infinite;
}

.rg-badge-goat .rg-badge-crown {
  width: 16px;
  height: 11px;
  fill: currentColor;
  filter: drop-shadow(0 0 4px rgba(255, 100, 0, 0.9));
  animation: admin-crown-bounce 1.8s ease-in-out infinite;
}

.rg-badge-aura {
  position: absolute;
  inset: -8px;
  border-radius: inherit;
  background: radial-gradient(circle, rgba(255, 180, 0, 0.5), transparent 65%);
  animation: rg-goat-aura 2s ease-in-out infinite;
  z-index: -2;
  pointer-events: none;
}

@keyframes rg-goat-aura {
  0%, 100% { opacity: 0.5; transform: scale(0.95); }
  50% { opacity: 1; transform: scale(1.12); }
}

@keyframes rg-goat-mega-pulse {
  0%, 100% {
    box-shadow:
      0 0 24px rgba(255, 180, 0, 0.6),
      0 0 48px rgba(255, 60, 0, 0.3);
  }
  50% {
    box-shadow:
      0 0 36px rgba(255, 220, 50, 0.95),
      0 0 64px rgba(255, 32, 96, 0.45),
      0 0 80px rgba(255, 140, 0, 0.2);
  }
}

/* Shared effects (legendary, mythic, goat) */
.rg-badge-shimmer {
  position: absolute;
  inset: 0;
  background: linear-gradient(105deg, transparent 35%, rgba(255, 255, 255, 0.55) 50%, transparent 65%);
  transform: translateX(-120%);
  animation: admin-shimmer 2.8s ease-in-out infinite;
  pointer-events: none;
}

.rg-badge-glow {
  position: absolute;
  inset: -4px;
  border-radius: inherit;
  background: radial-gradient(circle at 50% 50%, rgba(255, 200, 50, 0.45), transparent 70%);
  animation: admin-glow-breathe 2.2s ease-in-out infinite;
  z-index: -1;
  pointer-events: none;
}

.rg-badge-crown {
  width: 12px;
  height: 9px;
  flex-shrink: 0;
  fill: currentColor;
}

@media (prefers-reduced-motion: reduce) {
  .rg-badge-epic,
  .rg-badge-legendary,
  .rg-badge-mythic,
  .rg-badge-goat,
  .rg-badge-ice,
  .rg-badge-fire,
  .rg-badge-neon,
  .rg-badge-matrix,
  .rg-badge-cosmic,
  .rg-badge-holo,
  .rg-badge-shadow,
  .rg-badge-electric,
  .rg-badge-diamond,
  .rg-badge-phoenix,
  .rg-badge-venom,
  .rg-badge-royal,
  .rg-badge-orbit,
  .rg-badge-shimmer,
  .rg-badge-glow,
  .rg-badge-aura,
  .rg-badge-frost,
  .rg-badge-flame,
  .rg-badge-scanline,
  .rg-badge-stars,
  .rg-badge-drip,
  .rg-badge-wood,
  .rg-badge-copper,
  .rg-badge-copper::before,
  .rg-badge-silver,
  .rg-badge-silver::before,
  .rg-badge-gold,
  .rg-badge-gold::before,
  .rg-badge-platinum,
  .rg-badge-platinum::before,
  .rg-badge-diamond-lingot,
  .rg-badge-diamond-lingot::before,
  .rg-badge-crew,
  .rg-badge-crew::before,
  .rg-badge-crew-month,
  .rg-badge-crew-month::before,
  .rg-badge-crew-trimestre,
  .rg-badge-crew-trimestre::before,
  .badge-trimestre-stars,
  .rg-badge-crew-semestre,
  .rg-badge-crew-semestre::before,
  .rg-badge-semestre-crown,
  .rg-badge-crew-annee,
  .rg-badge-crew-annee::before,
  .rg-badge-annee-crown,
  .rg-badge-crew-cinq-ans,
  .rg-badge-crew-cinq-ans::before,
  .rg-badge-cinq-ans-crown,
  .badge-semestre-stars,
  .badge-semestre-aura,
  .badge-semestre-orbit {
    animation: none !important;
  }

  .badge-card-visual:has(.rg-badge-wood) .rg-badge-wood,
  .badge-card-visual:has(.rg-badge-copper) .rg-badge-copper,
  .badge-card-visual:has(.rg-badge-silver) .rg-badge-silver,
  .badge-card-visual:has(.rg-badge-gold) .rg-badge-gold,
  .badge-card-visual:has(.rg-badge-platinum) .rg-badge-platinum,
  .badge-card-visual:has(.rg-badge-diamond-lingot) .rg-badge-diamond-lingot {
    transform: none;
  }

  .badge-unlock-aura--wood {
    animation: none !important;
  }
}

/* ---- Galerie bonus — styles spéciaux ---- */

.badges-bonus-header {
  margin: 36px 0 20px;
  padding-top: 28px;
  border-top: 1px solid var(--color-border);
}

.badges-bonus-header h3 {
  font-size: 1.25rem;
  margin: 8px 0 6px;
}

.badges-bonus-header p {
  color: var(--color-text-muted);
  font-size: 0.875rem;
  max-width: 520px;
}

.badges-grid-bonus {
  margin-bottom: 8px;
}

.badge-card-featured {
  grid-column: 1 / -1;
  background: linear-gradient(135deg, rgba(88, 28, 135, 0.12), rgba(251, 191, 36, 0.06));
  border-color: rgba(168, 85, 247, 0.35);
}

@media (min-width: 900px) {
  .badge-card-featured {
    display: grid;
    grid-template-columns: 1fr 1.5fr;
    grid-template-rows: auto auto auto;
    column-gap: 24px;
    align-items: center;
  }

  .badge-card-featured .badge-card-tier { grid-column: 1; }
  .badge-card-featured .badge-card-visual { grid-column: 1; grid-row: 2; }
  .badge-card-featured h4 { grid-column: 2; grid-row: 1; align-self: end; }
  .badge-card-featured p { grid-column: 2; grid-row: 2; }
  .badge-card-featured .badge-equip-btn { grid-column: 2; grid-row: 3; justify-self: start; }
}

/* Glace */
.rg-badge-ice {
  color: #e0f2fe;
  background: linear-gradient(135deg, rgba(125, 211, 252, 0.35), rgba(14, 165, 233, 0.2));
  border: 1px solid rgba(186, 230, 253, 0.6);
  box-shadow: 0 0 16px rgba(56, 189, 248, 0.25), inset 0 1px 0 rgba(255, 255, 255, 0.35);
  animation: rg-ice-shiver 3s ease-in-out infinite;
}

.rg-badge-frost {
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.35) 0%, transparent 45%);
  pointer-events: none;
  animation: rg-frost-fade 2.5s ease-in-out infinite;
}

@keyframes rg-ice-shiver {
  0%, 100% { box-shadow: 0 0 14px rgba(56, 189, 248, 0.2); }
  50% { box-shadow: 0 0 22px rgba(186, 230, 253, 0.45); }
}

@keyframes rg-frost-fade {
  0%, 100% { opacity: 0.5; }
  50% { opacity: 1; }
}

/* Feu */
.rg-badge-fire {
  color: #fff;
  background: linear-gradient(135deg, #dc2626, #ea580c, #fbbf24, #dc2626);
  background-size: 300% 300%;
  border: 1px solid rgba(251, 146, 60, 0.7);
  animation: rg-fire-flow 2s ease infinite, rg-fire-flicker 0.15s ease-in-out infinite alternate;
}

.rg-badge-flame {
  position: absolute;
  inset: -6px;
  background: radial-gradient(ellipse at 50% 100%, rgba(255, 100, 0, 0.5), transparent 70%);
  animation: rg-flame-rise 1.2s ease-in-out infinite;
  z-index: -1;
  pointer-events: none;
}

@keyframes rg-fire-flow {
  0%, 100% { background-position: 0% 50%; }
  50% { background-position: 100% 50%; }
}

@keyframes rg-fire-flicker {
  from { filter: brightness(1); }
  to { filter: brightness(1.15); }
}

@keyframes rg-flame-rise {
  0%, 100% { opacity: 0.6; transform: scaleY(0.9); }
  50% { opacity: 1; transform: scaleY(1.1); }
}

/* Néon cyber */
.rg-badge-neon {
  color: #4ade80;
  background: rgba(0, 0, 0, 0.6);
  border: 1px solid #22c55e;
  text-shadow: 0 0 8px rgba(74, 222, 128, 0.9), 0 0 16px rgba(34, 197, 94, 0.5);
  box-shadow: 0 0 12px rgba(34, 197, 94, 0.4), inset 0 0 12px rgba(34, 197, 94, 0.08);
  animation: rg-neon-flicker 4s ease-in-out infinite;
}

.rg-badge-scanline {
  position: absolute;
  inset: 0;
  background: repeating-linear-gradient(
    0deg,
    transparent,
    transparent 2px,
    rgba(34, 197, 94, 0.06) 2px,
    rgba(34, 197, 94, 0.06) 4px
  );
  pointer-events: none;
  animation: rg-scan-move 3s linear infinite;
}

@keyframes rg-neon-flicker {
  0%, 100% { opacity: 1; }
  92% { opacity: 1; }
  93% { opacity: 0.85; }
  94% { opacity: 1; }
  96% { opacity: 0.9; }
  97% { opacity: 1; }
}

@keyframes rg-scan-move {
  from { transform: translateY(0); }
  to { transform: translateY(4px); }
}

/* Matrix */
.rg-badge-matrix {
  color: #22c55e;
  font-family: ui-monospace, 'Cascadia Code', monospace;
  background: #0a0f0a;
  border: 1px solid rgba(34, 197, 94, 0.45);
  text-shadow: 0 0 6px rgba(34, 197, 94, 0.8);
  box-shadow: 0 0 14px rgba(34, 197, 94, 0.2);
  animation: rg-matrix-glow 2s ease-in-out infinite;
}

@keyframes rg-matrix-glow {
  0%, 100% { box-shadow: 0 0 10px rgba(34, 197, 94, 0.15); }
  50% { box-shadow: 0 0 20px rgba(34, 197, 94, 0.35); }
}

/* Cosmos */
.rg-badge-cosmic {
  color: #e9d5ff;
  background: linear-gradient(135deg, #1e1b4b, #4c1d95, #312e81);
  background-size: 200% 200%;
  border: 1px solid rgba(167, 139, 250, 0.5);
  animation: rg-cosmic-drift 6s ease infinite;
  box-shadow: 0 0 20px rgba(139, 92, 246, 0.35);
}

.rg-badge-stars {
  position: absolute;
  inset: 0;
  background-image:
    radial-gradient(1px 1px at 20% 30%, rgba(255, 255, 255, 0.9), transparent),
    radial-gradient(1px 1px at 70% 60%, rgba(255, 255, 255, 0.7), transparent),
    radial-gradient(1px 1px at 45% 80%, rgba(255, 255, 255, 0.8), transparent),
    radial-gradient(1px 1px at 85% 25%, rgba(255, 255, 255, 0.6), transparent);
  animation: rg-stars-twinkle 2s ease-in-out infinite;
  pointer-events: none;
}

@keyframes rg-cosmic-drift {
  0%, 100% { background-position: 0% 50%; }
  50% { background-position: 100% 50%; }
}

@keyframes rg-stars-twinkle {
  0%, 100% { opacity: 0.6; }
  50% { opacity: 1; }
}

/* Holographique */
.rg-badge-holo {
  color: #fff;
  background: linear-gradient(
    90deg,
    #ff006e,
    #8338ec,
    #3a86ff,
    #06d6a0,
    #ffbe0b,
    #ff006e
  );
  background-size: 400% 100%;
  border: 1px solid rgba(255, 255, 255, 0.35);
  animation: rg-holo-shift 3s linear infinite;
  box-shadow: 0 0 18px rgba(131, 56, 236, 0.35);
}

@keyframes rg-holo-shift {
  0% { background-position: 0% 50%; filter: hue-rotate(0deg); }
  100% { background-position: 400% 50%; filter: hue-rotate(20deg); }
}

/* Ombre */
.rg-badge-shadow {
  color: #fca5a5;
  background: linear-gradient(135deg, #0f0f0f, #1a1a1a);
  border: 1px solid rgba(239, 68, 68, 0.35);
  box-shadow: 0 0 16px rgba(239, 68, 68, 0.15);
}

.rg-badge-orbit-red {
  background: conic-gradient(from 0deg, #ef4444, #7f1d1d, #ef4444) !important;
}

/* Électrique */
.rg-badge-electric {
  color: #1a1a00;
  background: linear-gradient(135deg, #fef08a, #facc15, #fef9c3);
  border: 1px solid #fde047;
  animation: rg-electric-zap 0.8s ease-in-out infinite;
}

.rg-badge-bolt {
  width: 10px;
  height: 14px;
  fill: #ca8a04;
  filter: drop-shadow(0 0 4px rgba(250, 204, 21, 0.9));
  animation: rg-bolt-flash 0.8s ease-in-out infinite;
}

@keyframes rg-electric-zap {
  0%, 100% { box-shadow: 0 0 12px rgba(250, 204, 21, 0.4); }
  50% { box-shadow: 0 0 24px rgba(254, 240, 138, 0.9), 0 0 36px rgba(250, 204, 21, 0.4); }
}

@keyframes rg-bolt-flash {
  0%, 100% { opacity: 1; transform: scale(1); }
  50% { opacity: 0.7; transform: scale(1.15); }
}

/* Diamant */
.rg-badge-diamond {
  color: #334155;
  background: linear-gradient(135deg, #f8fafc, #cbd5e1, #e2e8f0, #f1f5f9);
  background-size: 200% 200%;
  border: 1px solid rgba(255, 255, 255, 0.7);
  animation: rg-diamond-sparkle 4s ease infinite;
  box-shadow: 0 0 14px rgba(255, 255, 255, 0.25);
}

@keyframes rg-diamond-sparkle {
  0%, 100% { background-position: 0% 50%; }
  50% { background-position: 100% 50%; }
}

/* Phénix */
.rg-badge-phoenix {
  color: #fff;
  background: linear-gradient(135deg, #f97316, #ef4444, #fbbf24);
  background-size: 250% 250%;
  border: 1px solid rgba(251, 146, 60, 0.6);
  animation: rg-phoenix-rise 3s ease infinite;
}

.rg-badge-aura-fire {
  background: radial-gradient(circle, rgba(249, 115, 22, 0.55), transparent 65%) !important;
}

@keyframes rg-phoenix-rise {
  0%, 100% { background-position: 0% 80%; box-shadow: 0 0 20px rgba(249, 115, 22, 0.4); }
  50% { background-position: 100% 20%; box-shadow: 0 0 32px rgba(239, 68, 68, 0.55); }
}

/* Toxic */
.rg-badge-venom {
  color: #ecfccb;
  background: linear-gradient(135deg, #365314, #4d7c0f, #65a30d);
  border: 1px solid #84cc16;
  box-shadow: 0 0 16px rgba(132, 204, 22, 0.35);
  animation: rg-venom-pulse 1.5s ease-in-out infinite;
}

.rg-badge-drip {
  position: absolute;
  bottom: -2px;
  left: 20%;
  width: 6px;
  height: 8px;
  background: #84cc16;
  border-radius: 0 0 50% 50%;
  box-shadow: 12px 0 0 #a3e635, 24px 0 0 #84cc16;
  animation: rg-drip-bounce 2s ease-in-out infinite;
  pointer-events: none;
}

@keyframes rg-venom-pulse {
  0%, 100% { filter: brightness(1); }
  50% { filter: brightness(1.2); box-shadow: 0 0 24px rgba(163, 230, 53, 0.5); }
}

@keyframes rg-drip-bounce {
  0%, 100% { transform: translateY(0); opacity: 0.8; }
  50% { transform: translateY(2px); opacity: 1; }
}

/* Royal */
.rg-badge-royal {
  color: #fef3c7;
  padding: 6px 14px 6px 10px;
  background: linear-gradient(135deg, #4c1d95, #6b21a8, #581c87);
  background-size: 200% 200%;
  border: 1px solid rgba(251, 191, 36, 0.55);
  animation: rg-royal-flow 5s ease infinite, rg-royal-glow 2.5s ease-in-out infinite;
}

.rg-badge-orbit-gold {
  background: conic-gradient(from 0deg, #fbbf24, #f59e0b, #fde68a, #fbbf24) !important;
}

.rg-badge-royal .rg-badge-crown {
  fill: #fbbf24;
  filter: drop-shadow(0 0 4px rgba(251, 191, 36, 0.9));
  animation: admin-crown-bounce 2s ease-in-out infinite;
}

@keyframes rg-royal-flow {
  0%, 100% { background-position: 0% 50%; }
  50% { background-position: 100% 50%; }
}

@keyframes rg-royal-glow {
  0%, 100% { box-shadow: 0 0 18px rgba(168, 85, 247, 0.4); }
  50% { box-shadow: 0 0 28px rgba(251, 191, 36, 0.45); }
}

/* ---- Galerie EXTRÊME (×30) ---- */

.badges-extreme-header {
  margin-top: 40px;
}

.badges-hero-tag-extreme {
  color: #fecaca;
  background: rgba(239, 68, 68, 0.12);
  border-color: rgba(239, 68, 68, 0.35);
}

.badges-grid-extreme {
  grid-template-columns: repeat(auto-fill, minmax(168px, 1fr));
  gap: 12px;
}

.badge-card-compact {
  padding: 14px;
  gap: 8px;
}

.badge-card-compact h4 {
  font-size: 0.8125rem;
}

.badge-card-compact .badge-card-visual {
  min-height: 48px;
  padding: 8px 4px;
}

.badge-card-compact p {
  display: none;
}

.badge-card-omega {
  grid-column: 1 / -1;
  margin-top: 8px;
  padding: 22px;
  background: linear-gradient(135deg, rgba(255, 0, 128, 0.08), rgba(255, 140, 0, 0.06), rgba(124, 58, 237, 0.08));
  border-color: rgba(255, 100, 200, 0.35);
  animation: rg-omega-card-pulse 3s ease-in-out infinite;
}

.badge-card-omega p {
  display: block;
  font-size: 0.8125rem;
  color: var(--color-text-muted);
}

.badges-extreme-footnote {
  margin-top: 16px;
}

@keyframes rg-omega-card-pulse {
  0%, 100% { box-shadow: 0 0 0 transparent; }
  50% { box-shadow: 0 0 40px rgba(255, 80, 200, 0.12); }
}

.rg-badge-sunset {
  color: #fff;
  background: linear-gradient(90deg, #f97316, #ec4899, #8b5cf6, #f97316);
  background-size: 300% 100%;
  border: 1px solid rgba(251, 146, 60, 0.5);
  animation: rg-epic-flow 4s linear infinite;
}

.rg-badge-ocean {
  color: #bae6fd;
  background: linear-gradient(180deg, #0369a1, #0c4a6e);
  border: 1px solid rgba(56, 189, 248, 0.5);
  overflow: hidden;
}

.rg-badge-wave {
  position: absolute;
  bottom: 0;
  left: -100%;
  width: 300%;
  height: 40%;
  background: rgba(125, 211, 252, 0.25);
  border-radius: 40%;
  animation: rg-wave-roll 3s linear infinite;
  pointer-events: none;
}

@keyframes rg-wave-roll {
  to { transform: translateX(33%); }
}

.rg-badge-blood {
  color: #fecaca;
  background: linear-gradient(135deg, #450a0a, #991b1b);
  border: 1px solid #dc2626;
  box-shadow: 0 0 14px rgba(220, 38, 38, 0.35);
  animation: rg-blood-throb 2s ease-in-out infinite;
}

@keyframes rg-blood-throb {
  50% { box-shadow: 0 0 22px rgba(239, 68, 68, 0.55); }
}

.rg-badge-ghost {
  color: rgba(255, 255, 255, 0.85);
  background: rgba(255, 255, 255, 0.06);
  border: 1px dashed rgba(255, 255, 255, 0.35);
  animation: rg-ghost-float 3s ease-in-out infinite;
}

@keyframes rg-ghost-float {
  0%, 100% { opacity: 0.65; transform: translateY(0); }
  50% { opacity: 1; transform: translateY(-2px); }
}

.rg-badge-pixel {
  color: #4ade80;
  font-family: ui-monospace, monospace;
  font-size: 0.625rem;
  background: #14532d;
  border: 3px solid #166534;
  border-radius: 0;
  box-shadow: 4px 4px 0 #052e16;
  image-rendering: pixelated;
}

.rg-badge-synthwave {
  color: #f0abfc;
  background: linear-gradient(180deg, #1e1b4b 60%, #701a75 100%);
  border: 1px solid #e879f9;
  text-shadow: 0 0 8px #d946ef;
  overflow: hidden;
}

.rg-badge-grid {
  position: absolute;
  inset: 0;
  background:
    linear-gradient(rgba(236, 72, 153, 0.15) 1px, transparent 1px),
    linear-gradient(90deg, rgba(236, 72, 153, 0.15) 1px, transparent 1px);
  background-size: 6px 6px;
  animation: rg-grid-scroll 2s linear infinite;
  pointer-events: none;
}

@keyframes rg-grid-scroll {
  to { background-position: 0 6px; }
}

.rg-badge-sakura {
  color: #831843;
  background: linear-gradient(135deg, #fce7f3, #fbcfe8, #f9a8d4);
  border: 1px solid #f472b6;
  animation: rg-sakura-bloom 3s ease-in-out infinite;
}

@keyframes rg-sakura-bloom {
  50% { filter: brightness(1.1); box-shadow: 0 0 16px rgba(244, 114, 182, 0.4); }
}

.rg-badge-camo {
  color: #ecfccb;
  background:
    radial-gradient(circle at 20% 30%, #365314 8px, transparent 8px),
    radial-gradient(circle at 70% 60%, #3f6212 6px, transparent 6px),
    radial-gradient(circle at 40% 80%, #4d7c0f 7px, transparent 7px),
    #1a2e05;
  border: 1px solid #4d7c0f;
}

.rg-badge-goldbar {
  color: #422006;
  background: linear-gradient(180deg, #fde68a, #d97706, #fde68a);
  border: 1px solid #b45309;
  box-shadow: inset 0 2px 0 rgba(255, 255, 255, 0.4);
}

.rg-badge-copper {
  --bronze-hi: #f5e6cc;
  --bronze-light: #e8c99a;
  --bronze-mid: #d4a574;
  --bronze-deep: #c9956a;
  --bronze-edge: #9a7348;

  color: #4a3218;
  border-radius: 8px;
  padding: 10px 22px;
  font-size: 0.9375rem;
  font-weight: 800;
  letter-spacing: 0.06em;
  border: none;
  background-color: var(--bronze-mid);
  background-image:
    radial-gradient(ellipse 90% 60% at 25% 12%, rgba(255, 248, 235, 0.75) 0%, transparent 55%),
    radial-gradient(ellipse 50% 40% at 82% 88%, rgba(154, 115, 72, 0.25) 0%, transparent 52%),
    radial-gradient(ellipse 28% 22% at 92% 18%, rgba(134, 168, 140, 0.12) 0%, transparent 68%),
    repeating-linear-gradient(
      92deg,
      transparent 0 5px,
      rgba(255, 255, 255, 0.04) 5px 6px,
      transparent 6px 13px
    ),
    linear-gradient(
      112deg,
      #f5e6cc 0%,
      #e8c99a 18%,
      #d4a574 38%,
      #c9956a 52%,
      #ddb87a 62%,
      #d4a574 78%,
      #c9956a 100%
    );
  background-size: 100% 100%, 100% 100%, 100% 100%, 100% 100%, 220% 100%;
  background-position: 0 0, 0 0, 0 0, 0 0, 0% 0;
  animation:
    rg-bronze-glow 3.2s ease-in-out infinite,
    rg-bronze-sheen 4.5s ease-in-out infinite;
  box-shadow:
    inset 0 1px 0 rgba(255, 248, 235, 0.55),
    inset 0 -3px 6px rgba(120, 80, 40, 0.22),
    inset 2px 0 4px rgba(255, 255, 255, 0.08),
    inset -2px 0 4px rgba(100, 65, 30, 0.12),
    0 0 0 1px rgba(154, 115, 72, 0.65),
    0 0 0 2px rgba(180, 130, 75, 0.35),
    0 4px 14px rgba(180, 130, 75, 0.28);
  text-shadow:
    0 1px 0 rgba(255, 248, 235, 0.45),
    0 -1px 0 rgba(90, 60, 30, 0.35);
}

@keyframes rg-bronze-glow {
  0%, 100% {
    box-shadow:
      inset 0 1px 0 rgba(255, 248, 235, 0.55),
      inset 0 -3px 6px rgba(120, 80, 40, 0.22),
      inset 2px 0 4px rgba(255, 255, 255, 0.08),
      inset -2px 0 4px rgba(100, 65, 30, 0.12),
      0 0 0 1px rgba(154, 115, 72, 0.65),
      0 0 0 2px rgba(180, 130, 75, 0.35),
      0 4px 14px rgba(180, 130, 75, 0.28);
  }
  50% {
    box-shadow:
      inset 0 1px 0 rgba(255, 248, 235, 0.65),
      inset 0 -3px 6px rgba(120, 80, 40, 0.18),
      inset 2px 0 4px rgba(255, 255, 255, 0.12),
      inset -2px 0 4px rgba(100, 65, 30, 0.1),
      0 0 0 1px rgba(180, 140, 90, 0.75),
      0 0 0 2px rgba(212, 165, 116, 0.45),
      0 4px 18px rgba(212, 165, 116, 0.42),
      0 0 22px rgba(232, 201, 154, 0.2);
  }
}

@keyframes rg-bronze-sheen {
  0%, 100% { background-position: 0 0, 0 0, 0 0, 0 0, 0% 0; }
  50% { background-position: 0 0, 0 0, 0 0, 0 0, 100% 0; }
}

.rg-badge-copper::before {
  content: '';
  position: absolute;
  inset: 0;
  border-radius: inherit;
  background: linear-gradient(
    105deg,
    transparent 32%,
    rgba(255, 255, 255, 0.42) 50%,
    transparent 68%
  );
  transform: translateX(-130%);
  animation: admin-shimmer 3.4s ease-in-out infinite;
  pointer-events: none;
  z-index: 1;
  mix-blend-mode: soft-light;
}

.rg-badge-copper::after {
  content: '';
  position: absolute;
  inset: 2px 4px auto;
  height: 42%;
  border-radius: 5px 5px 3px 3px;
  background: linear-gradient(180deg, rgba(255, 252, 245, 0.35) 0%, transparent 100%);
  pointer-events: none;
  z-index: 0;
}

.rg-badge-uncommon.rg-badge-copper {
  color: #4a3218;
  background-color: var(--bronze-mid);
  border: none;
}

.rg-badge-rare.rg-badge-copper {
  color: #4a3218;
  background-color: var(--bronze-mid);
  border: none;
}

.badge-card-visual:has(.rg-badge-copper) {
  padding: 4px 0;
}

.badge-card-visual:has(.rg-badge-copper) .rg-badge-copper {
  transform: perspective(420px) rotateX(5deg);
  transform-origin: center bottom;
}

.rg-badge-silver {
  --silver-hi: #f8fafc;
  --silver-light: #e2e8f0;
  --silver-mid: #cbd5e1;
  --silver-deep: #94a3b8;
  --silver-edge: #64748b;

  color: #1e293b;
  border-radius: 8px;
  padding: 10px 22px;
  font-size: 0.9375rem;
  font-weight: 800;
  letter-spacing: 0.06em;
  border: none;
  background-color: var(--silver-mid);
  background-image:
    radial-gradient(ellipse 90% 60% at 25% 12%, rgba(255, 255, 255, 0.82) 0%, transparent 55%),
    radial-gradient(ellipse 50% 40% at 82% 88%, rgba(71, 85, 105, 0.22) 0%, transparent 52%),
    radial-gradient(ellipse 28% 22% at 92% 18%, rgba(147, 197, 253, 0.14) 0%, transparent 68%),
    repeating-linear-gradient(
      92deg,
      transparent 0 5px,
      rgba(255, 255, 255, 0.06) 5px 6px,
      transparent 6px 13px
    ),
    linear-gradient(
      112deg,
      #f8fafc 0%,
      #e2e8f0 18%,
      #cbd5e1 38%,
      #94a3b8 52%,
      #cbd5e1 68%,
      #e2e8f0 82%,
      #94a3b8 100%
    );
  background-size: 100% 100%, 100% 100%, 100% 100%, 100% 100%, 220% 100%;
  background-position: 0 0, 0 0, 0 0, 0 0, 0% 0;
  animation:
    rg-silver-glow 3.2s ease-in-out infinite,
    rg-silver-sheen 4.5s ease-in-out infinite;
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.72),
    inset 0 -3px 6px rgba(71, 85, 105, 0.22),
    inset 2px 0 4px rgba(255, 255, 255, 0.14),
    inset -2px 0 4px rgba(71, 85, 105, 0.14),
    0 0 0 1px rgba(100, 116, 139, 0.65),
    0 0 0 2px rgba(148, 163, 184, 0.35),
    0 4px 14px rgba(100, 116, 139, 0.28);
  text-shadow:
    0 1px 0 rgba(255, 255, 255, 0.55),
    0 -1px 0 rgba(51, 65, 85, 0.35);
}

@keyframes rg-silver-glow {
  0%, 100% {
    box-shadow:
      inset 0 1px 0 rgba(255, 255, 255, 0.72),
      inset 0 -3px 6px rgba(71, 85, 105, 0.22),
      inset 2px 0 4px rgba(255, 255, 255, 0.14),
      inset -2px 0 4px rgba(71, 85, 105, 0.14),
      0 0 0 1px rgba(100, 116, 139, 0.65),
      0 0 0 2px rgba(148, 163, 184, 0.35),
      0 4px 14px rgba(100, 116, 139, 0.28);
  }
  50% {
    box-shadow:
      inset 0 1px 0 rgba(255, 255, 255, 0.85),
      inset 0 -3px 6px rgba(71, 85, 105, 0.18),
      inset 2px 0 4px rgba(255, 255, 255, 0.18),
      inset -2px 0 4px rgba(71, 85, 105, 0.1),
      0 0 0 1px rgba(148, 163, 184, 0.78),
      0 0 0 2px rgba(191, 219, 254, 0.42),
      0 4px 18px rgba(148, 163, 184, 0.42),
      0 0 22px rgba(191, 219, 254, 0.22);
  }
}

@keyframes rg-silver-sheen {
  0%, 100% { background-position: 0 0, 0 0, 0 0, 0 0, 0% 0; }
  50% { background-position: 0 0, 0 0, 0 0, 0 0, 100% 0; }
}

.rg-badge-silver::before {
  content: '';
  position: absolute;
  inset: 0;
  border-radius: inherit;
  background: linear-gradient(
    105deg,
    transparent 28%,
    rgba(255, 255, 255, 0.55) 50%,
    transparent 72%
  );
  transform: translateX(-130%);
  animation: admin-shimmer 3.2s ease-in-out infinite;
  pointer-events: none;
  z-index: 1;
  mix-blend-mode: soft-light;
}

.rg-badge-silver::after {
  content: '';
  position: absolute;
  inset: 2px 4px auto;
  height: 42%;
  border-radius: 5px 5px 3px 3px;
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.42) 0%, transparent 100%);
  pointer-events: none;
  z-index: 0;
}

.rg-badge-rare.rg-badge-silver {
  color: #1e293b;
  background-color: var(--silver-mid);
  border: none;
}

.badge-card-visual:has(.rg-badge-silver) {
  padding: 4px 0;
}

.badge-card-visual:has(.rg-badge-silver) .rg-badge-silver {
  transform: perspective(420px) rotateX(5deg);
  transform-origin: center bottom;
}

.rg-badge-gold {
  --gold-hi: #fffbeb;
  --gold-light: #fde68a;
  --gold-mid: #fbbf24;
  --gold-deep: #d97706;
  --gold-edge: #b45309;

  color: #422006;
  border-radius: 8px;
  padding: 10px 22px;
  font-size: 0.9375rem;
  font-weight: 800;
  letter-spacing: 0.06em;
  border: none;
  background-color: var(--gold-mid);
  background-image:
    radial-gradient(ellipse 90% 60% at 25% 12%, rgba(255, 251, 235, 0.88) 0%, transparent 55%),
    radial-gradient(ellipse 50% 40% at 82% 88%, rgba(180, 83, 9, 0.28) 0%, transparent 52%),
    radial-gradient(ellipse 28% 22% at 92% 18%, rgba(255, 215, 0, 0.18) 0%, transparent 68%),
    repeating-linear-gradient(
      92deg,
      transparent 0 5px,
      rgba(255, 255, 255, 0.07) 5px 6px,
      transparent 6px 13px
    ),
    linear-gradient(
      112deg,
      #fffbeb 0%,
      #fde68a 16%,
      #fbbf24 34%,
      #f59e0b 48%,
      #fde68a 62%,
      #fbbf24 78%,
      #d97706 100%
    );
  background-size: 100% 100%, 100% 100%, 100% 100%, 100% 100%, 240% 100%;
  background-position: 0 0, 0 0, 0 0, 0 0, 0% 0;
  animation:
    rg-gold-glow 3s ease-in-out infinite,
    rg-gold-sheen 4.2s ease-in-out infinite;
  box-shadow:
    inset 0 1px 0 rgba(255, 251, 235, 0.72),
    inset 0 -3px 6px rgba(146, 64, 14, 0.28),
    inset 2px 0 4px rgba(255, 255, 255, 0.16),
    inset -2px 0 4px rgba(146, 64, 14, 0.16),
    0 0 0 1px rgba(180, 83, 9, 0.68),
    0 0 0 2px rgba(251, 191, 36, 0.38),
    0 4px 16px rgba(217, 119, 6, 0.32);
  text-shadow:
    0 1px 0 rgba(255, 251, 235, 0.55),
    0 -1px 0 rgba(120, 53, 15, 0.4);
}

@keyframes rg-gold-glow {
  0%, 100% {
    box-shadow:
      inset 0 1px 0 rgba(255, 251, 235, 0.72),
      inset 0 -3px 6px rgba(146, 64, 14, 0.28),
      inset 2px 0 4px rgba(255, 255, 255, 0.16),
      inset -2px 0 4px rgba(146, 64, 14, 0.16),
      0 0 0 1px rgba(180, 83, 9, 0.68),
      0 0 0 2px rgba(251, 191, 36, 0.38),
      0 4px 16px rgba(217, 119, 6, 0.32);
  }
  50% {
    box-shadow:
      inset 0 1px 0 rgba(255, 251, 235, 0.88),
      inset 0 -3px 6px rgba(146, 64, 14, 0.22),
      inset 2px 0 4px rgba(255, 255, 255, 0.22),
      inset -2px 0 4px rgba(146, 64, 14, 0.12),
      0 0 0 1px rgba(245, 158, 11, 0.82),
      0 0 0 2px rgba(253, 224, 71, 0.48),
      0 4px 20px rgba(251, 191, 36, 0.48),
      0 0 26px rgba(255, 215, 0, 0.28);
  }
}

@keyframes rg-gold-sheen {
  0%, 100% { background-position: 0 0, 0 0, 0 0, 0 0, 0% 0; }
  50% { background-position: 0 0, 0 0, 0 0, 0 0, 100% 0; }
}

.rg-badge-gold::before {
  content: '';
  position: absolute;
  inset: 0;
  border-radius: inherit;
  background: linear-gradient(
    105deg,
    transparent 28%,
    rgba(255, 255, 255, 0.62) 50%,
    transparent 72%
  );
  transform: translateX(-130%);
  animation: admin-shimmer 2.8s ease-in-out infinite;
  pointer-events: none;
  z-index: 1;
  mix-blend-mode: soft-light;
}

.rg-badge-gold::after {
  content: '';
  position: absolute;
  inset: 2px 4px auto;
  height: 42%;
  border-radius: 5px 5px 3px 3px;
  background: linear-gradient(180deg, rgba(255, 251, 235, 0.48) 0%, transparent 100%);
  pointer-events: none;
  z-index: 0;
}

.rg-badge-epic.rg-badge-gold {
  color: #422006;
  background-color: var(--gold-mid);
  border: none;
  animation:
    rg-gold-glow 3s ease-in-out infinite,
    rg-gold-sheen 4.2s ease-in-out infinite;
}

.badge-card-visual:has(.rg-badge-gold) {
  padding: 4px 0;
}

.badge-card-visual:has(.rg-badge-gold) .rg-badge-gold {
  transform: perspective(420px) rotateX(5deg);
  transform-origin: center bottom;
}

.rg-badge-platinum {
  --plat-hi: #f8fafc;
  --plat-light: #e0e7ff;
  --plat-mid: #c7d2fe;
  --plat-deep: #a5b4fc;
  --plat-edge: #6366f1;

  color: #1e1b4b;
  border-radius: 8px;
  padding: 10px 20px;
  font-size: 0.875rem;
  font-weight: 800;
  letter-spacing: 0.05em;
  border: none;
  background-color: var(--plat-mid);
  background-image:
    radial-gradient(ellipse 90% 60% at 25% 12%, rgba(255, 255, 255, 0.92) 0%, transparent 55%),
    radial-gradient(ellipse 50% 40% at 82% 88%, rgba(99, 102, 241, 0.28) 0%, transparent 52%),
    radial-gradient(ellipse 28% 22% at 92% 18%, rgba(253, 224, 71, 0.16) 0%, transparent 68%),
    repeating-linear-gradient(
      92deg,
      transparent 0 5px,
      rgba(255, 255, 255, 0.08) 5px 6px,
      transparent 6px 13px
    ),
    linear-gradient(
      112deg,
      #f8fafc 0%,
      #e0e7ff 16%,
      #c7d2fe 34%,
      #a5b4fc 48%,
      #fde68a 54%,
      #c7d2fe 68%,
      #e0e7ff 82%,
      #818cf8 100%
    );
  background-size: 100% 100%, 100% 100%, 100% 100%, 100% 100%, 260% 100%;
  background-position: 0 0, 0 0, 0 0, 0 0, 0% 0;
  animation:
    rg-platinum-glow 3.4s ease-in-out infinite,
    rg-platinum-sheen 4.8s ease-in-out infinite;
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.78),
    inset 0 -3px 6px rgba(79, 70, 229, 0.22),
    inset 2px 0 4px rgba(255, 255, 255, 0.18),
    inset -2px 0 4px rgba(99, 102, 241, 0.16),
    0 0 0 1px rgba(99, 102, 241, 0.62),
    0 0 0 2px rgba(199, 210, 254, 0.42),
    0 4px 18px rgba(99, 102, 241, 0.32),
    0 0 24px rgba(253, 224, 71, 0.12);
  text-shadow:
    0 1px 0 rgba(255, 255, 255, 0.62),
    0 -1px 0 rgba(49, 46, 129, 0.35);
}

@keyframes rg-platinum-glow {
  0%, 100% {
    box-shadow:
      inset 0 1px 0 rgba(255, 255, 255, 0.78),
      inset 0 -3px 6px rgba(79, 70, 229, 0.22),
      inset 2px 0 4px rgba(255, 255, 255, 0.18),
      inset -2px 0 4px rgba(99, 102, 241, 0.16),
      0 0 0 1px rgba(99, 102, 241, 0.62),
      0 0 0 2px rgba(199, 210, 254, 0.42),
      0 4px 18px rgba(99, 102, 241, 0.32),
      0 0 24px rgba(253, 224, 71, 0.12);
  }
  50% {
    box-shadow:
      inset 0 1px 0 rgba(255, 255, 255, 0.92),
      inset 0 -3px 6px rgba(79, 70, 229, 0.16),
      inset 2px 0 4px rgba(255, 255, 255, 0.24),
      inset -2px 0 4px rgba(99, 102, 241, 0.1),
      0 0 0 1px rgba(129, 140, 248, 0.82),
      0 0 0 2px rgba(224, 231, 255, 0.52),
      0 4px 22px rgba(129, 140, 248, 0.48),
      0 0 32px rgba(253, 224, 71, 0.28),
      0 0 48px rgba(99, 102, 241, 0.18);
  }
}

@keyframes rg-platinum-sheen {
  0%, 100% { background-position: 0 0, 0 0, 0 0, 0 0, 0% 0; }
  50% { background-position: 0 0, 0 0, 0 0, 0 0, 100% 0; }
}

.rg-badge-platinum::before {
  content: '';
  position: absolute;
  inset: 0;
  border-radius: inherit;
  background: linear-gradient(
    105deg,
    transparent 28%,
    rgba(255, 255, 255, 0.68) 50%,
    transparent 72%
  );
  transform: translateX(-130%);
  animation: admin-shimmer 2.6s ease-in-out infinite;
  pointer-events: none;
  z-index: 1;
  mix-blend-mode: soft-light;
}

.rg-badge-platinum::after {
  content: '';
  position: absolute;
  inset: 2px 4px auto;
  height: 42%;
  border-radius: 5px 5px 3px 3px;
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.52) 0%, transparent 100%);
  pointer-events: none;
  z-index: 0;
}

.rg-badge-legendary.rg-badge-platinum {
  color: #1e1b4b;
  background-color: var(--plat-mid);
  border: none;
  animation:
    rg-platinum-glow 3.4s ease-in-out infinite,
    rg-platinum-sheen 4.8s ease-in-out infinite;
}

.badge-card-visual:has(.rg-badge-platinum) {
  padding: 4px 0;
}

.badge-card-visual:has(.rg-badge-platinum) .rg-badge-platinum {
  transform: perspective(420px) rotateX(5deg);
  transform-origin: center bottom;
}

/* — Diamant Club 100K — même lingot, couleur cristal + feu prismatique — */
.badge-card-visual--diamond {
  padding: 4px 0;
}

.rg-badge-diamond-lingot {
  --diamond-hi: #ffffff;
  --diamond-light: #f8fafc;
  --diamond-mid: #f1f5f9;
  --diamond-deep: #dbeafe;
  --diamond-edge: #cbd5e1;

  color: #1e293b;
  border-radius: 8px;
  padding: 10px 18px;
  font-size: 0.875rem;
  font-weight: 800;
  letter-spacing: 0.05em;
  border: none;
  overflow: hidden;
  background-color: var(--diamond-mid);
  background-image:
    radial-gradient(ellipse 88% 58% at 22% 10%, rgba(255, 255, 255, 0.98) 0%, transparent 58%),
    radial-gradient(ellipse 36% 28% at 78% 22%, rgba(34, 211, 238, 0.28) 0%, transparent 72%),
    radial-gradient(ellipse 32% 24% at 62% 78%, rgba(167, 139, 250, 0.22) 0%, transparent 70%),
    radial-gradient(ellipse 28% 20% at 18% 72%, rgba(244, 114, 182, 0.18) 0%, transparent 68%),
    radial-gradient(ellipse 22% 16% at 88% 62%, rgba(253, 224, 71, 0.2) 0%, transparent 65%),
    repeating-linear-gradient(
      92deg,
      transparent 0 5px,
      rgba(255, 255, 255, 0.12) 5px 6px,
      transparent 6px 13px
    ),
    linear-gradient(
      112deg,
      #ffffff 0%,
      #f0f9ff 14%,
      #ffffff 26%,
      #ecfeff 36%,
      #faf5ff 44%,
      #ffffff 52%,
      #fef9c3 56%,
      #fdf2f8 60%,
      #ffffff 68%,
      #e0f2fe 78%,
      #f8fafc 88%,
      #e2e8f0 100%
    );
  background-size: 100% 100%, 100% 100%, 100% 100%, 100% 100%, 100% 100%, 100% 100%, 280% 100%;
  background-position: 0 0, 0 0, 0 0, 0 0, 0 0, 0 0, 0% 0;
  animation:
    rg-diamond-glow 3.2s ease-in-out infinite,
    rg-diamond-sheen 4.2s ease-in-out infinite;
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.95),
    inset 0 -3px 7px rgba(148, 163, 184, 0.18),
    inset 2px 0 5px rgba(255, 255, 255, 0.35),
    inset -2px 0 5px rgba(186, 230, 253, 0.14),
    0 0 0 1px rgba(255, 255, 255, 0.82),
    0 0 0 2px rgba(226, 232, 240, 0.55),
    0 4px 16px rgba(255, 255, 255, 0.28),
    0 0 22px rgba(186, 230, 253, 0.22);
  text-shadow:
    0 1px 0 rgba(255, 255, 255, 0.85),
    0 -1px 0 rgba(100, 116, 139, 0.22);
}

.rg-badge-diamond-lingot::before {
  content: '';
  position: absolute;
  inset: 0;
  border-radius: inherit;
  background: linear-gradient(
    105deg,
    transparent 24%,
    rgba(255, 255, 255, 0.82) 48%,
    rgba(186, 230, 253, 0.35) 52%,
    rgba(255, 255, 255, 0.75) 56%,
    transparent 78%
  );
  transform: translateX(-130%);
  animation: admin-shimmer 2.8s ease-in-out infinite;
  pointer-events: none;
  z-index: 1;
  mix-blend-mode: overlay;
}

.rg-badge-diamond-lingot::after {
  content: '';
  position: absolute;
  inset: 2px 4px auto;
  height: 44%;
  border-radius: 5px 5px 3px 3px;
  background: linear-gradient(
    180deg,
    rgba(255, 255, 255, 0.72) 0%,
    rgba(255, 255, 255, 0.18) 55%,
    transparent 100%
  );
  pointer-events: none;
  z-index: 0;
}

.rg-badge-legendary.rg-badge-diamond-lingot {
  color: #1e293b;
  background-color: var(--diamond-mid);
  border: none;
  animation:
    rg-diamond-glow 3.2s ease-in-out infinite,
    rg-diamond-sheen 4.2s ease-in-out infinite;
}

.badge-card-visual--diamond .rg-badge-diamond-lingot {
  transform: perspective(420px) rotateX(5deg);
  transform-origin: center bottom;
}

.badge-card.is-locked .rg-badge-diamond-lingot {
  filter: grayscale(0.25) brightness(0.78);
}

@keyframes rg-diamond-glow {
  0%, 100% {
    box-shadow:
      inset 0 1px 0 rgba(255, 255, 255, 0.95),
      inset 0 -3px 7px rgba(148, 163, 184, 0.18),
      inset 2px 0 5px rgba(255, 255, 255, 0.35),
      inset -2px 0 5px rgba(186, 230, 253, 0.14),
      0 0 0 1px rgba(255, 255, 255, 0.82),
      0 0 0 2px rgba(226, 232, 240, 0.55),
      0 4px 16px rgba(255, 255, 255, 0.28),
      0 0 22px rgba(186, 230, 253, 0.22);
  }
  50% {
    box-shadow:
      inset 0 1px 0 rgba(255, 255, 255, 1),
      inset 0 -3px 7px rgba(148, 163, 184, 0.12),
      inset 2px 0 6px rgba(255, 255, 255, 0.48),
      inset -2px 0 5px rgba(244, 114, 182, 0.1),
      0 0 0 1px rgba(255, 255, 255, 0.95),
      0 0 0 2px rgba(255, 255, 255, 0.62),
      0 4px 20px rgba(255, 255, 255, 0.42),
      0 0 28px rgba(34, 211, 238, 0.28),
      0 0 36px rgba(167, 139, 250, 0.18),
      0 0 44px rgba(253, 224, 71, 0.1);
  }
}

@keyframes rg-diamond-sheen {
  0%, 100% { background-position: 0 0, 0 0, 0 0, 0 0, 0 0, 0 0, 0% 0; }
  50% { background-position: 0 0, 0 0, 0 0, 0 0, 0 0, 0 0, 100% 0; }
}

.rg-badge-wood {
  --wood-highlight: #e8c89a;
  --wood-face: #a0683a;
  --wood-shadow: #4a2c12;
  --wood-edge: #2d1808;

  border-radius: 9px;
  padding: 10px 22px;
  font-size: 0.9375rem;
  color: #f5e6cc;
  font-weight: 700;
  letter-spacing: 0.07em;
  text-transform: uppercase;
  border: none;
  background-color: var(--wood-face);
  background-image:
    radial-gradient(ellipse 34px 16px at 12% 52%, rgba(35, 18, 6, 0.5) 0%, transparent 72%),
    radial-gradient(ellipse 24px 12px at 88% 38%, rgba(30, 15, 5, 0.4) 0%, transparent 70%),
    radial-gradient(ellipse 18px 8px at 58% 78%, rgba(25, 12, 4, 0.28) 0%, transparent 68%),
    repeating-linear-gradient(
      87.5deg,
      transparent 0 4px,
      rgba(0, 0, 0, 0.055) 4px 5px,
      transparent 5px 7px,
      rgba(255, 255, 255, 0.025) 7px 8px,
      transparent 8px 22px
    ),
    repeating-linear-gradient(
      90deg,
      rgba(255, 240, 210, 0.05) 0 1px,
      transparent 1px 19px,
      rgba(0, 0, 0, 0.04) 19px 20px,
      transparent 20px 41px
    ),
    linear-gradient(
      178deg,
      #c9956a 0%,
      #b8844f 10%,
      #a0683a 24%,
      #8b5a2b 40%,
      #7a4a22 52%,
      #945930 58%,
      #6b3f1a 74%,
      #5c3418 88%,
      var(--wood-shadow) 100%
    );
  box-shadow:
    inset 0 1px 0 rgba(255, 236, 200, 0.32),
    inset 0 -3px 5px rgba(0, 0, 0, 0.38),
    inset 3px 0 4px rgba(0, 0, 0, 0.14),
    inset -3px 0 4px rgba(0, 0, 0, 0.14),
    0 0 0 1px var(--wood-edge),
    0 0 0 2px #6b4423,
    0 0 0 3px rgba(20, 10, 4, 0.55),
    0 4px 12px rgba(0, 0, 0, 0.5),
    0 1px 0 rgba(255, 200, 120, 0.1);
  text-shadow:
    0 1px 0 rgba(0, 0, 0, 0.85),
    0 -1px 0 rgba(255, 220, 160, 0.22),
    1px 0 0 rgba(0, 0, 0, 0.25),
    -1px 0 0 rgba(255, 210, 140, 0.08);
}

.rg-badge-wood::before {
  content: '';
  position: absolute;
  inset: 0;
  border-radius: inherit;
  background:
    repeating-linear-gradient(
      0deg,
      transparent 0 2px,
      rgba(0, 0, 0, 0.035) 2px 3px,
      transparent 3px 9px
    ),
    linear-gradient(180deg, rgba(255, 255, 255, 0.07) 0%, transparent 35%, rgba(0, 0, 0, 0.08) 100%);
  mix-blend-mode: overlay;
  pointer-events: none;
  z-index: 0;
}

.rg-badge-wood::after {
  content: '';
  position: absolute;
  inset: 2px;
  border-radius: 5px;
  border: 1px solid rgba(255, 220, 160, 0.14);
  box-shadow:
    inset 0 1px 2px rgba(255, 236, 200, 0.1),
    inset 0 -1px 3px rgba(0, 0, 0, 0.25);
  pointer-events: none;
  z-index: 0;
}

.rg-badge-uncommon.rg-badge-wood {
  color: #f5e6cc;
  background-color: var(--wood-face);
  border: none;
  box-shadow:
    inset 0 1px 0 rgba(255, 236, 200, 0.32),
    inset 0 -3px 5px rgba(0, 0, 0, 0.38),
    inset 3px 0 4px rgba(0, 0, 0, 0.14),
    inset -3px 0 4px rgba(0, 0, 0, 0.14),
    0 0 0 1px var(--wood-edge),
    0 0 0 2px #6b4423,
    0 0 0 3px rgba(20, 10, 4, 0.55),
    0 4px 12px rgba(0, 0, 0, 0.5),
    0 1px 0 rgba(255, 200, 120, 0.1);
}

.badge-card-visual:has(.rg-badge-wood) {
  padding: 4px 0;
}

.badge-card-visual:has(.rg-badge-wood) .rg-badge-wood {
  transform: perspective(420px) rotateX(4deg);
  transform-origin: center bottom;
}

.rg-badge-chrome {
  color: #334155;
  background: linear-gradient(135deg, #f1f5f9 0%, #94a3b8 40%, #e2e8f0 60%, #64748b 100%);
  background-size: 200% 200%;
  border: 1px solid #cbd5e1;
  animation: rg-chrome-sweep 3s ease infinite;
}

@keyframes rg-chrome-sweep {
  50% { background-position: 100% 100%; }
}

.rg-badge-rust {
  color: #fef3c7;
  background: linear-gradient(135deg, #78350f, #92400e, #451a03);
  border: 1px solid #b45309;
}

.rg-badge-candy {
  color: #fff;
  background: linear-gradient(90deg, #f472b6, #c084fc, #67e8f9, #f472b6);
  background-size: 300% 100%;
  animation: rg-epic-flow 2.5s linear infinite;
  border: 2px solid #fff;
}

.rg-badge-void {
  color: #c4b5fd;
  background: #0a0a0a;
  border: 1px solid #4c1d95;
  overflow: hidden;
}

.rg-badge-void-core {
  position: absolute;
  inset: 20%;
  border-radius: 50%;
  background: radial-gradient(circle, #7c3aed, transparent 70%);
  animation: rg-void-suck 2s ease-in-out infinite;
  pointer-events: none;
}

@keyframes rg-void-suck {
  0%, 100% { transform: scale(0.8); opacity: 0.6; }
  50% { transform: scale(1.3); opacity: 1; }
}

.rg-badge-plasma {
  color: #fff;
  background: radial-gradient(circle at 30% 30%, #22d3ee, #a855f7, #ec4899);
  background-size: 200% 200%;
  border: 1px solid rgba(255, 255, 255, 0.4);
  animation: rg-plasma-morph 3s ease infinite;
  box-shadow: 0 0 20px rgba(168, 85, 247, 0.5);
}

@keyframes rg-plasma-morph {
  0%, 100% { background-position: 0% 0%; border-radius: 999px; }
  33% { background-position: 100% 50%; border-radius: 40% 60% 50% 50%; }
  66% { background-position: 50% 100%; border-radius: 60% 40% 50% 50%; }
}

.rg-badge-glitch {
  color: #fff;
  background: #111;
  border: 1px solid #fff;
  animation: rg-glitch-skew 0.3s steps(2) infinite;
}

.rg-badge-glitch::before,
.rg-badge-glitch::after {
  content: attr(data-text);
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: inherit;
  border-radius: inherit;
}

.rg-badge-glitch::before {
  color: #0ff;
  clip-path: inset(20% 0 40% 0);
  animation: rg-glitch-r 0.4s steps(2) infinite;
}

.rg-badge-glitch::after {
  color: #f0f;
  clip-path: inset(50% 0 10% 0);
  animation: rg-glitch-b 0.35s steps(2) infinite reverse;
}

@keyframes rg-glitch-skew {
  0%, 100% { transform: skew(0); }
  25% { transform: skew(-2deg); }
  75% { transform: skew(2deg); }
}

@keyframes rg-glitch-r {
  to { transform: translateX(-2px); }
}

@keyframes rg-glitch-b {
  to { transform: translateX(2px); }
}

.rg-badge-wire {
  color: #67e8f9;
  background: transparent;
  border: 1px solid #22d3ee;
  box-shadow: 0 0 8px rgba(34, 211, 238, 0.4), inset 0 0 8px rgba(34, 211, 238, 0.1);
  animation: rg-wire-pulse 2s ease-in-out infinite;
}

@keyframes rg-wire-pulse {
  50% { box-shadow: 0 0 16px rgba(34, 211, 238, 0.7); color: #a5f3fc; }
}

.rg-badge-storm {
  color: #e2e8f0;
  background: linear-gradient(135deg, #334155, #1e293b);
  border: 1px solid #64748b;
  animation: rg-storm-flash 4s ease-in-out infinite;
}

@keyframes rg-storm-flash {
  0%, 89%, 100% { filter: brightness(1); }
  90% { filter: brightness(2); box-shadow: 0 0 24px rgba(255, 255, 255, 0.6); }
  92% { filter: brightness(1); }
}

.rg-badge-vaporwave {
  color: #5eead4;
  background: linear-gradient(180deg, #312e81 50%, #be185d 100%);
  border: 1px solid #2dd4bf;
  text-shadow: 2px 2px 0 #ec4899;
  overflow: hidden;
}

.rg-badge-aurora {
  color: #fff;
  background: linear-gradient(90deg, #064e3b, #0891b2, #7c3aed, #059669, #0891b2);
  background-size: 400% 100%;
  border: 1px solid rgba(255, 255, 255, 0.3);
  animation: rg-aurora-flow 5s ease infinite;
  box-shadow: 0 0 20px rgba(16, 185, 129, 0.25);
}

@keyframes rg-aurora-flow {
  0%, 100% { background-position: 0% 50%; }
  50% { background-position: 100% 50%; }
}

.rg-badge-supernova {
  color: #1e1b4b;
  background: radial-gradient(circle, #fff 0%, #fde68a 30%, #f97316 60%, #7c2d12 100%);
  border: 1px solid #fde68a;
  animation: rg-nova-pulse 1.5s ease-in-out infinite;
  overflow: hidden;
}

.rg-badge-nova-burst {
  position: absolute;
  inset: -20%;
  background: radial-gradient(circle, rgba(255, 255, 255, 0.6), transparent 55%);
  animation: rg-nova-expand 1.5s ease-out infinite;
  pointer-events: none;
}

@keyframes rg-nova-pulse {
  50% { transform: scale(1.04); box-shadow: 0 0 30px rgba(253, 224, 71, 0.7); }
}

@keyframes rg-nova-expand {
  0% { transform: scale(0.5); opacity: 1; }
  100% { transform: scale(1.5); opacity: 0; }
}

.rg-badge-obsidian {
  color: #94a3b8;
  background: linear-gradient(145deg, #0f172a, #1e293b 50%, #020617);
  border: 1px solid #334155;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.08);
}

.rg-badge-pearl {
  color: #475569;
  background: linear-gradient(135deg, #fff1f2, #fce7f3, #e0e7ff, #ecfdf5, #fff1f2);
  background-size: 400% 400%;
  border: 1px solid rgba(255, 255, 255, 0.8);
  animation: rg-pearl-shift 6s ease infinite;
}

@keyframes rg-pearl-shift {
  50% { background-position: 100% 100%; }
}

.rg-badge-circuit {
  color: #4ade80;
  background: #052e16;
  border: 1px solid #166534;
  font-family: ui-monospace, monospace;
  font-size: 0.625rem;
  overflow: hidden;
}

.rg-badge-graffiti {
  color: #fff;
  background:
    radial-gradient(circle at 10% 80%, #ef4444 0 8px, transparent 8px),
    radial-gradient(circle at 90% 20%, #3b82f6 0 10px, transparent 10px),
    radial-gradient(circle at 50% 50%, #eab308 0 6px, transparent 6px),
    #18181b;
  border: 2px solid #fff;
  transform: rotate(-1deg);
}

.rg-badge-samurai {
  color: #fff;
  background: linear-gradient(90deg, #991b1b 33%, #fff 33% 66%, #1e293b 66%);
  border: 1px solid #fca5a5;
  font-size: 0.625rem;
}

.rg-badge-laser {
  color: #fff;
  background: #450a0a;
  border: 1px solid #ef4444;
  overflow: hidden;
  text-shadow: 0 0 8px #ef4444;
  animation: rg-laser-pulse 0.5s ease-in-out infinite alternate;
}

.rg-badge-laser-beam {
  position: absolute;
  top: 50%;
  left: -100%;
  width: 80%;
  height: 2px;
  background: linear-gradient(90deg, transparent, #ef4444, #fff, #ef4444, transparent);
  animation: rg-laser-sweep 1.2s linear infinite;
  pointer-events: none;
}

@keyframes rg-laser-pulse {
  to { box-shadow: 0 0 20px rgba(239, 68, 68, 0.8); }
}

@keyframes rg-laser-sweep {
  to { left: 120%; }
}

.rg-badge-molten {
  color: #fff;
  background: linear-gradient(180deg, #fef08a, #f97316, #dc2626, #7f1d1d);
  background-size: 100% 300%;
  border: 1px solid #fb923c;
  animation: rg-molten-rise 2s ease infinite;
  font-weight: 900;
}

@keyframes rg-molten-rise {
  0%, 100% { background-position: 0% 0%; }
  50% { background-position: 0% 100%; }
}

.rg-badge-ninja {
  color: #e2e8f0;
  background: #0f172a;
  border: 1px solid #334155;
  box-shadow: 4px 4px 0 #000;
  animation: rg-ninja-strike 4s ease-in-out infinite;
}

@keyframes rg-ninja-strike {
  0%, 90%, 100% { opacity: 1; }
  92% { opacity: 0.3; transform: translateX(4px); }
  94% { opacity: 1; transform: translateX(0); }
}

.rg-badge-celestial {
  color: #422006;
  background: linear-gradient(135deg, #fffbeb, #fef3c7, #fde68a);
  border: 1px solid #fbbf24;
  box-shadow: 0 0 16px rgba(251, 191, 36, 0.35);
}

.rg-badge-quantum {
  color: #e0e7ff;
  background: linear-gradient(135deg, #312e81, #1e1b4b);
  border: 1px solid #818cf8;
  animation: rg-quantum-phase 2s ease-in-out infinite;
}

@keyframes rg-quantum-phase {
  0%, 100% { opacity: 1; filter: hue-rotate(0deg); }
  50% { opacity: 0.85; filter: hue-rotate(90deg); }
}

/* OMEGA — fusion de tout */
.rg-badge-omega {
  color: #fff;
  padding: 8px 20px 8px 14px;
  font-size: 0.8125rem;
  letter-spacing: 0.12em;
  background: linear-gradient(
    135deg,
    #ffd700,
    #ff006e,
    #8338ec,
    #06d6a0,
    #ff6b00,
    #ffd700
  );
  background-size: 500% 500%;
  border: 2px solid rgba(255, 255, 255, 0.6);
  animation:
    rg-omega-bg 4s ease infinite,
    rg-goat-mega-pulse 1.5s ease-in-out infinite,
    rg-glitch-skew 4s steps(1) infinite;
  text-shadow: 0 0 10px rgba(255, 255, 255, 0.8);
}

.rg-badge-omega .rg-badge-crown {
  fill: #fff;
  filter: drop-shadow(0 0 6px #ffd700);
}

@keyframes rg-omega-bg {
  0%, 100% { background-position: 0% 50%; filter: hue-rotate(0deg) saturate(1.2); }
  50% { background-position: 100% 50%; filter: hue-rotate(30deg) saturate(1.5); }
}

@media (prefers-reduced-motion: reduce) {
  .badges-grid-extreme .rg-badge,
  .badges-grid-extreme .rg-badge::before,
  .badges-grid-extreme .rg-badge::after,
  .badge-card-omega {
    animation: none !important;
  }
}

/* ---- Modal déblocage badge (FX + thème par badge) ---- */

.badge-unlock-modal {
  --unlock-accent: #fbbf24;
  --unlock-backdrop-glow: rgba(251, 191, 36, 0.18);
  --unlock-panel-border: rgba(251, 191, 36, 0.45);
  --unlock-panel-shadow: 0 0 70px rgba(255, 180, 0, 0.25);
  --unlock-tag-bg: linear-gradient(135deg, #ffe566, #ffb020);
  --unlock-tag-color: #1a0800;
  --unlock-title-grad: linear-gradient(90deg, #ffd700, #ff9500, #ff3366);
  --unlock-visual-bg: rgba(255, 255, 255, 0.04);
  --unlock-visual-border: var(--color-border);
  position: fixed;
  inset: 0;
  z-index: 10000;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 20px;
  pointer-events: none;
}

.badge-unlock-modal .badge-unlock-backdrop,
.badge-unlock-modal .badge-unlock-panel,
.badge-unlock-modal .badge-unlock-content .btn {
  pointer-events: auto;
}

.badge-unlock-modal[hidden] {
  display: none !important;
}

.badge-unlock-backdrop {
  position: absolute;
  inset: 0;
  z-index: 0;
  background: transparent;
  backdrop-filter: none;
}

.badge-unlock-themed-fx-canvas {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
  z-index: 2;
  display: none;
  visibility: hidden;
  opacity: 0;
  background: transparent;
}

.badge-unlock-themed-fx-canvas--webgl {
  display: none;
  visibility: hidden;
  opacity: 0;
}

.badge-unlock-themed-fx-canvas--webgl {
  z-index: 2;
}

.badge-unlock-modal--webgl-fx .badge-unlock-backdrop {
  background: transparent;
}

.badge-unlock-modal[data-theme="holo"] .badge-unlock-backdrop {
  background: transparent;
}

.badge-unlock-modal--scanlines::after {
  display: none;
}

@keyframes scanline-drift {
  to { background-position: 0 40px; }
}

.badge-unlock-modal--grid-fx::before {
  display: none;
}

@keyframes synthwave-grid-scroll {
  from { background-position: 0 0, 0 0; }
  to { background-position: 0 32px, 0 32px; }
}

.badge-unlock-modal--vhs::after {
  animation: scanline-drift 6s linear infinite, vhs-flicker 0.15s steps(2) infinite;
}

@keyframes vhs-flicker {
  0%, 100% { opacity: 1; }
  50% { opacity: 0.92; }
}

.badge-unlock-modal--void-vortex .badge-unlock-backdrop {
  animation: void-backdrop-spin 20s linear infinite;
}

@keyframes void-backdrop-spin {
  from { filter: hue-rotate(0deg); }
  to { filter: hue-rotate(360deg); }
}

.badge-unlock-aura {
  position: absolute;
  inset: 0;
  pointer-events: none;
  z-index: 1;
  opacity: 0;
  display: none;
}

.badge-unlock-modal.badge-unlock-animate .badge-unlock-aura {
  animation: badge-aura-in 0.6s ease forwards;
}

@keyframes badge-aura-in {
  to { opacity: 1; }
}

/* Auras thématiques */
.badge-unlock-aura--celestial {
  background:
    radial-gradient(ellipse 80% 50% at 50% 20%, rgba(254, 243, 199, 0.35), transparent),
    radial-gradient(ellipse 60% 40% at 20% 60%, rgba(253, 224, 71, 0.12), transparent),
    radial-gradient(ellipse 60% 40% at 80% 60%, rgba(253, 224, 71, 0.12), transparent);
  animation: badge-aura-in 0.6s ease forwards, celestial-rays 5s ease-in-out infinite;
}

@keyframes celestial-rays {
  0%, 100% { opacity: 0.85; filter: brightness(1); }
  50% { opacity: 1; filter: brightness(1.15); }
}

.badge-unlock-aura--fire {
  background:
    radial-gradient(ellipse at 50% 100%, rgba(249, 115, 22, 0.35), transparent 60%),
    radial-gradient(ellipse at 30% 80%, rgba(239, 68, 68, 0.2), transparent 50%);
  animation: badge-aura-in 0.5s ease forwards, fire-flicker 0.2s ease-in-out infinite alternate;
}

@keyframes fire-flicker {
  from { opacity: 0.8; }
  to { opacity: 1; }
}

.badge-unlock-aura--ice {
  background:
    radial-gradient(ellipse at 50% 30%, rgba(186, 230, 253, 0.25), transparent 55%),
    radial-gradient(circle at 20% 70%, rgba(255, 255, 255, 0.08), transparent 40%);
  animation: badge-aura-in 0.6s ease forwards, ice-shimmer 3s ease-in-out infinite;
}

@keyframes ice-shimmer {
  50% { filter: brightness(1.1); }
}

.badge-unlock-aura--void {
  background: radial-gradient(circle at 50% 45%, rgba(124, 58, 237, 0.35), transparent 45%);
  animation: badge-aura-in 0.6s ease forwards, void-pulse 2.5s ease-in-out infinite;
}

@keyframes void-pulse {
  50% { transform: scale(1.02); opacity: 0.9; }
}

.badge-unlock-aura--neon {
  background:
    radial-gradient(ellipse at 50% 50%, rgba(34, 197, 94, 0.12), transparent 50%),
    repeating-linear-gradient(0deg, transparent, transparent 3px, rgba(34, 197, 94, 0.03) 3px, rgba(34, 197, 94, 0.03) 6px);
}

.badge-unlock-aura--cosmic {
  background:
    radial-gradient(circle at 15% 25%, rgba(255, 255, 255, 0.15) 0 1px, transparent 1px),
    radial-gradient(circle at 85% 35%, rgba(255, 255, 255, 0.12) 0 1px, transparent 1px),
    radial-gradient(circle at 50% 70%, rgba(129, 140, 248, 0.2), transparent 55%);
  background-size: 100% 100%, 100% 100%, 100% 100%;
  animation: badge-aura-in 0.6s ease forwards, cosmic-twinkle 2s ease-in-out infinite;
}

@keyframes cosmic-twinkle {
  50% { opacity: 0.75; }
}

.badge-unlock-aura--aurora {
  background: linear-gradient(
    120deg,
    transparent 0%,
    rgba(52, 211, 153, 0.15) 25%,
    rgba(34, 211, 238, 0.2) 50%,
    rgba(167, 139, 250, 0.15) 75%,
    transparent 100%
  );
  background-size: 200% 200%;
  animation: badge-aura-in 0.6s ease forwards, aurora-flow 4s ease infinite;
}

@keyframes aurora-flow {
  0%, 100% { background-position: 0% 50%; }
  50% { background-position: 100% 50%; }
}

.badge-unlock-aura--holo {
  background: linear-gradient(
    135deg,
    rgba(255, 0, 110, 0.08),
    rgba(131, 56, 236, 0.1),
    rgba(58, 134, 255, 0.08),
    rgba(6, 214, 160, 0.08)
  );
  background-size: 300% 300%;
  animation: badge-aura-in 0.5s ease forwards, holo-shift 3s linear infinite;
}

@keyframes holo-shift {
  to { background-position: 100% 100%; }
}

.badge-unlock-aura--synthwave {
  background:
    linear-gradient(rgba(232, 121, 249, 0.08) 1px, transparent 1px),
    linear-gradient(90deg, rgba(232, 121, 249, 0.08) 1px, transparent 1px),
    radial-gradient(ellipse at 50% 100%, rgba(190, 24, 93, 0.25), transparent 60%);
  background-size: 24px 24px, 24px 24px, 100% 100%;
  perspective: 400px;
}

.badge-unlock-aura--toxic {
  background: radial-gradient(ellipse at 50% 80%, rgba(132, 204, 22, 0.25), transparent 55%);
  animation: badge-aura-in 0.5s ease forwards, toxic-pulse 1.5s ease-in-out infinite;
}

@keyframes toxic-pulse {
  50% { filter: brightness(1.2); }
}

.badge-unlock-aura--electric {
  background: radial-gradient(ellipse at 50% 50%, rgba(250, 204, 21, 0.2), transparent 50%);
  animation: badge-aura-in 0.4s ease forwards, storm-flash-aura 3s ease-in-out infinite;
}

@keyframes storm-flash-aura {
  0%, 92%, 100% { opacity: 0.7; }
  93% { opacity: 1; filter: brightness(1.5); }
}

.badge-unlock-aura--ocean {
  background:
    radial-gradient(ellipse at 50% 0%, rgba(56, 189, 248, 0.2), transparent 50%),
    linear-gradient(180deg, rgba(14, 165, 233, 0.08), transparent);
  animation: badge-aura-in 0.6s ease forwards, ocean-sway 4s ease-in-out infinite;
}

@keyframes ocean-sway {
  50% { transform: translateY(4px); }
}

.badge-unlock-aura--blood {
  background: radial-gradient(ellipse at 50% 40%, rgba(153, 27, 27, 0.3), transparent 55%);
}

.badge-unlock-aura--ghost {
  background: radial-gradient(ellipse at 50% 50%, rgba(255, 255, 255, 0.06), transparent 60%);
  animation: badge-aura-in 0.8s ease forwards, ghost-float 3s ease-in-out infinite;
}

.badge-unlock-aura--royal {
  background:
    radial-gradient(ellipse at 50% 30%, rgba(251, 191, 36, 0.2), transparent 50%),
    radial-gradient(ellipse at 50% 70%, rgba(168, 85, 247, 0.15), transparent 55%);
}

.badge-unlock-aura--goat,
.badge-unlock-aura--omega {
  background:
    radial-gradient(ellipse at 50% 40%, rgba(255, 140, 0, 0.25), transparent 50%),
    radial-gradient(ellipse at 50% 60%, rgba(255, 32, 96, 0.15), transparent 55%);
  animation: badge-aura-in 0.5s ease forwards, goat-aura-pulse 2s ease-in-out infinite;
}

@keyframes goat-aura-pulse {
  50% { opacity: 1; filter: brightness(1.2); }
}

.badge-unlock-aura--shadow {
  background: radial-gradient(ellipse at 50% 50%, rgba(239, 68, 68, 0.1), transparent 55%);
}

.badge-unlock-aura--glitch {
  animation: badge-aura-in 0.3s steps(2) forwards, glitch-aura 0.15s steps(2) infinite;
}

@keyframes glitch-aura {
  50% { transform: translateX(2px); opacity: 0.85; }
}

.badge-unlock-aura--sunset {
  background: linear-gradient(180deg, rgba(249, 115, 22, 0.15), rgba(236, 72, 153, 0.1), transparent);
}

.badge-unlock-aura--gold,
.badge-unlock-aura--default {
  background: radial-gradient(ellipse at 50% 35%, var(--unlock-backdrop-glow), transparent 55%);
}

.badge-unlock-aura--wood {
  background:
    radial-gradient(ellipse at 50% 28%, rgba(251, 191, 36, 0.24), transparent 52%),
    radial-gradient(ellipse at 22% 72%, rgba(146, 64, 14, 0.2), transparent 48%),
    radial-gradient(ellipse at 78% 62%, rgba(180, 120, 60, 0.14), transparent 42%);
  animation: badge-wood-aura-pulse 3.2s ease-in-out infinite;
}

@keyframes badge-wood-aura-pulse {
  0%, 100% { opacity: 1; transform: scale(1); }
  50% { opacity: 0.88; transform: scale(1.03); }
}

.badge-unlock-modal--wood .badge-unlock-panel {
  background:
    linear-gradient(165deg, rgba(45, 24, 8, 0.94), rgba(18, 9, 3, 0.97));
}

.badge-unlock-modal--wood .badge-unlock-visual {
  background:
    repeating-linear-gradient(
      87deg,
      transparent 0 4px,
      rgba(0, 0, 0, 0.05) 4px 5px,
      transparent 5px 20px
    ),
    linear-gradient(178deg, rgba(160, 104, 58, 0.28), rgba(74, 44, 18, 0.42));
  border: 2px solid rgba(184, 132, 79, 0.52);
  box-shadow:
    inset 0 2px 10px rgba(0, 0, 0, 0.35),
    inset 0 -1px 0 rgba(255, 236, 200, 0.08),
    0 0 28px rgba(146, 64, 14, 0.22);
}

.badge-unlock-modal--wood.badge-unlock-animate .badge-unlock-visual::before {
  border-color: rgba(251, 191, 36, 0.75);
}

.badge-unlock-modal--wood .badge-unlock-visual .rg-badge-wood {
  transform: perspective(520px) rotateX(7deg) scale(1.18);
}

.badge-unlock-modal--wood.badge-unlock-animate .badge-unlock-visual .rg-badge-wood {
  animation: badge-wood-pop 0.85s cubic-bezier(0.34, 1.56, 0.64, 1) 0.12s both;
}

@keyframes badge-wood-pop {
  0% {
    transform: perspective(520px) rotateX(22deg) scale(0.25);
    opacity: 0;
    filter: blur(6px);
  }
  65% {
    transform: perspective(520px) rotateX(3deg) scale(1.24);
    opacity: 1;
    filter: blur(0);
  }
  100% {
    transform: perspective(520px) rotateX(7deg) scale(1.18);
    opacity: 1;
  }
}

.badge-unlock-themed-fx-canvas,
.badge-unlock-themed-fx-canvas--webgl,
.badge-unlock-fx-canvas,
.badge-unlock-symbols-canvas,
.badge-unlock-three {
  display: none !important;
  visibility: hidden !important;
  opacity: 0 !important;
  pointer-events: none !important;
}

.badge-unlock-panel {
  position: relative;
  z-index: 4;
  width: min(440px, 100%);
  border-radius: var(--radius-lg);
  border: 1px solid var(--unlock-panel-border);
  background: linear-gradient(165deg, rgba(20, 20, 28, 0.96), rgba(10, 10, 14, 0.98));
  backdrop-filter: blur(14px);
  box-shadow: 0 20px 48px rgba(0, 0, 0, 0.55);
  overflow: hidden;
  transform: scale(0.85);
  opacity: 0;
}

.badge-unlock-modal.badge-unlock-animate .badge-unlock-panel {
  animation: badge-unlock-pop 0.55s cubic-bezier(0.34, 1.56, 0.64, 1) forwards;
}

@keyframes badge-unlock-pop {
  to {
    transform: scale(1);
    opacity: 1;
  }
}

.badge-unlock-three {
  display: block;
  width: 100%;
  height: 200px;
  pointer-events: none;
  opacity: 0.85;
}

.badge-unlock-three-fallback {
  background:
    radial-gradient(circle at 50% 50%, rgba(255, 200, 50, 0.2), transparent 60%),
    linear-gradient(135deg, rgba(124, 58, 237, 0.12), rgba(255, 140, 0, 0.08));
}

.badge-unlock-content {
  position: relative;
  padding: 0 28px 28px;
  text-align: center;
  margin-top: -24px;
}

.badge-unlock-tag {
  display: inline-block;
  margin-bottom: 10px;
  padding: 5px 14px;
  border-radius: 999px;
  font-size: 0.6875rem;
  font-weight: 800;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--unlock-tag-color);
  background: var(--unlock-tag-bg);
  box-shadow: 0 0 16px var(--unlock-backdrop-glow);
}

.badge-unlock-content h2 {
  font-size: 1.5rem;
  margin-bottom: 16px;
  background: var(--unlock-title-grad);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  filter: drop-shadow(0 2px 10px var(--unlock-backdrop-glow));
}

.badge-unlock-visual {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 96px;
  margin-bottom: 12px;
  padding: 22px 20px;
  border-radius: var(--radius-md);
  background: var(--unlock-visual-bg);
  border: 1px solid var(--unlock-visual-border);
  overflow: hidden;
}

.badge-unlock-modal.badge-unlock-animate .badge-unlock-visual::before {
  display: none;
}

.badge-unlock-modal.badge-unlock-animate .badge-unlock-visual .rg-badge,
.badge-unlock-modal.badge-unlock-animate .badge-unlock-visual .admin-badge-legendary {
  animation: badge-visual-pop 0.7s cubic-bezier(0.34, 1.56, 0.64, 1) 0.12s both;
}

@keyframes badge-unlock-ring {
  from {
    transform: scale(1);
    opacity: 0.9;
  }
  to {
    transform: scale(8);
    opacity: 0;
  }
}

@keyframes badge-visual-pop {
  0% {
    transform: scale(0) rotate(-15deg);
    opacity: 0;
    filter: blur(4px);
  }
  70% {
    transform: scale(1.15) rotate(3deg);
    opacity: 1;
    filter: blur(0);
  }
  100% {
    transform: scale(1) rotate(0);
    opacity: 1;
  }
}

.badge-unlock-tier {
  font-size: 0.8125rem;
  color: var(--unlock-accent);
  margin-bottom: 8px;
  text-shadow: 0 0 12px var(--unlock-backdrop-glow);
}

.badge-unlock-fx-note {
  font-size: 0.6875rem;
  color: var(--color-text-muted);
  margin-bottom: 20px;
  letter-spacing: 0.02em;
  text-shadow: 0 1px 8px rgba(0, 0, 0, 0.65);
}

.badge-unlock-content .btn {
  width: 100%;
  color: var(--unlock-tag-color);
  background: var(--unlock-tag-bg);
  border: none;
  box-shadow: 0 0 20px var(--unlock-backdrop-glow);
}

@media (prefers-reduced-motion: reduce) {
  .badge-unlock-modal.badge-unlock-animate .badge-unlock-panel {
    animation: none;
    transform: none;
    opacity: 1;
  }
}

/* ——— Tuto plateforme ——— */

.tuto-shell {
  max-width: 820px;
  margin: 0 auto;
}

.tuto-view[hidden] {
  display: none;
}

.tuto-hero {
  margin-bottom: 28px;
  padding: 24px 28px;
  border-radius: var(--radius-xl);
  border: 1px solid rgba(59, 130, 246, 0.2);
  background: linear-gradient(135deg, rgba(59, 130, 246, 0.1) 0%, rgba(59, 130, 246, 0.02) 60%, transparent 100%);
}

.tuto-hero h2 {
  margin: 0 0 8px;
  font-size: 1.375rem;
}

.tuto-hero p {
  margin: 0;
  color: var(--color-text-muted);
  font-size: 0.9375rem;
  line-height: 1.55;
}

.tuto-section-list,
.tuto-module-list {
  display: flex;
  flex-direction: column;
  gap: 14px;
}

.tuto-section-card,
.tuto-module-card {
  display: flex;
  align-items: center;
  gap: 16px;
  padding: 20px 22px;
  border-radius: var(--radius-lg);
  border: 1px solid var(--color-border);
  background: var(--color-bg-card);
  cursor: pointer;
  transition: border-color 0.2s, background 0.2s;
  text-align: left;
  width: 100%;
  font: inherit;
  color: inherit;
}

.tuto-section-card:hover:not(:disabled),
.tuto-module-card:hover {
  border-color: rgba(59, 130, 246, 0.35);
  background: rgba(59, 130, 246, 0.04);
}

.tuto-section-card:disabled,
.tuto-section-card--locked {
  opacity: 0.55;
  cursor: not-allowed;
}

.tuto-section-card-num,
.tuto-module-card-num {
  flex-shrink: 0;
  width: 40px;
  height: 40px;
  display: grid;
  place-items: center;
  border-radius: var(--radius-md);
  background: rgba(59, 130, 246, 0.12);
  color: #60a5fa;
  font-weight: 700;
  font-size: 0.875rem;
}

.tuto-section-card-body,
.tuto-module-card-body {
  flex: 1;
  min-width: 0;
}

.tuto-section-card-body h3,
.tuto-module-card-body h3 {
  margin: 0 0 4px;
  font-size: 1.0625rem;
}

.tuto-section-card-body p,
.tuto-module-card-body p {
  margin: 0;
  font-size: 0.875rem;
  color: var(--color-text-muted);
}

.tuto-section-card-meta,
.tuto-module-card-meta {
  flex-shrink: 0;
  font-size: 0.75rem;
  font-weight: 600;
  color: var(--color-text-subtle);
}

.tuto-section-card-badge {
  flex-shrink: 0;
  padding: 4px 10px;
  border-radius: 999px;
  font-size: 0.6875rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  background: rgba(16, 185, 129, 0.12);
  color: var(--color-accent-light);
}

.tuto-section-card-badge--soon {
  background: rgba(255, 255, 255, 0.06);
  color: var(--color-text-subtle);
}

.tuto-nav {
  margin-bottom: 20px;
}

.tuto-nav-btn {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 8px 0;
  border: none;
  background: none;
  color: var(--color-text-muted);
  font: inherit;
  font-size: 0.875rem;
  cursor: pointer;
}

.tuto-nav-btn:hover {
  color: var(--color-text);
}

.tuto-nav-btn svg {
  width: 18px;
  height: 18px;
}

.tuto-section-header {
  display: flex;
  gap: 16px;
  align-items: flex-start;
  margin-bottom: 24px;
}

.tuto-section-num {
  flex-shrink: 0;
  width: 48px;
  height: 48px;
  display: grid;
  place-items: center;
  border-radius: var(--radius-md);
  background: rgba(59, 130, 246, 0.15);
  color: #60a5fa;
  font-weight: 700;
  font-size: 1rem;
}

.tuto-section-header h2 {
  margin: 0 0 6px;
  font-size: 1.5rem;
}

.tuto-section-header p {
  margin: 0;
  color: var(--color-text-muted);
  font-size: 0.9375rem;
}

.tuto-module-article {
  display: flex;
  flex-direction: column;
  gap: 24px;
}

.tuto-module-head h2 {
  margin: 0 0 8px;
  font-size: 1.375rem;
}

.tuto-module-head p {
  margin: 0;
  color: var(--color-text-muted);
  line-height: 1.6;
}

.tuto-module-meta {
  font-size: 0.8125rem;
  color: var(--color-text-subtle);
  margin-top: 8px;
}

.tuto-mock-wrap {
  padding: 20px;
  border-radius: var(--radius-lg);
  border: 1px dashed rgba(255, 255, 255, 0.12);
  background: rgba(0, 0, 0, 0.2);
}

.tuto-mock-label {
  margin: 0 0 14px;
  font-size: 0.6875rem;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--color-text-subtle);
}

.tuto-mock--compact.stats-grid {
  grid-template-columns: repeat(4, 1fr);
  gap: 12px;
}

.tuto-mock--compact .stat-card {
  padding: 14px 12px;
}

.tuto-mock--compact .stat-card-value {
  font-size: 1.25rem;
}

.tuto-mock-activity-title {
  margin: 0 0 12px;
  font-size: 0.875rem;
  font-weight: 600;
  color: var(--color-text-muted);
}

.tuto-mock-activity-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.tuto-mock-activity-item {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 12px;
  border-radius: var(--radius-md);
  background: var(--color-bg-card);
  border: 1px solid var(--color-border);
  font-size: 0.8125rem;
}

.tuto-mock-activity-tag {
  flex-shrink: 0;
  font-size: 0.625rem;
  font-weight: 700;
  letter-spacing: 0.04em;
  color: var(--color-text-subtle);
}

.tuto-mock-activity-name {
  flex: 1;
  min-width: 0;
  overflow: hidden;
}

.tuto-mock-activity-gain {
  flex-shrink: 0;
  font-weight: 600;
  color: var(--color-accent-light);
}

.tuto-mock-cards.app-cards-row {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 12px;
}

.tuto-mock-cards--duo {
  max-width: 480px;
}

.tuto-mock-btn-fake {
  display: inline-block;
  margin-top: 10px;
  padding: 6px 12px;
  border-radius: var(--radius-md);
  font-size: 0.75rem;
  font-weight: 600;
  background: rgba(255, 255, 255, 0.06);
  color: var(--color-text-muted);
  border: 1px solid var(--color-border);
}

.tuto-mock-box {
  text-align: center;
}

.tuto-mock-box-tag {
  display: inline-block;
  margin: 0 0 8px;
  padding: 4px 10px;
  border-radius: 999px;
  font-size: 0.6875rem;
  font-weight: 700;
  text-transform: uppercase;
  background: rgba(16, 185, 129, 0.12);
  color: var(--color-accent-light);
}

.tuto-mock-box-title {
  margin: 0 0 8px;
  font-size: 1.25rem;
}

.tuto-mock-box-lead {
  margin: 0 0 16px;
  font-size: 0.8125rem;
  color: var(--color-text-muted);
}

.tuto-mock-box-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 10px;
}

.tuto-mock-box-card {
  padding: 14px 10px;
  border-radius: var(--radius-md);
  border: 1px solid var(--color-border);
  background: var(--color-bg-card);
  font-size: 0.75rem;
}

.tuto-mock-box-card--featured {
  border-color: rgba(16, 185, 129, 0.3);
}

.tuto-mock-box-badge {
  display: block;
  margin-bottom: 8px;
  font-size: 0.625rem;
  font-weight: 700;
  color: var(--color-text-subtle);
}

.tuto-mock-referral-tiers {
  display: flex;
  gap: 10px;
  margin-bottom: 16px;
  flex-wrap: wrap;
}

.tuto-mock-referral-tier {
  flex: 1;
  min-width: 80px;
  padding: 12px;
  border-radius: var(--radius-md);
  border: 1px solid var(--color-border);
  background: var(--color-bg-card);
  text-align: center;
}

.tuto-mock-referral-tier strong {
  display: block;
  font-size: 1.25rem;
  margin-bottom: 4px;
}

.tuto-mock-referral-tier span {
  font-size: 0.6875rem;
  color: var(--color-text-muted);
}

.tuto-mock-referral-link {
  margin-bottom: 16px;
}

.tuto-mock-referral-link label {
  display: block;
  margin-bottom: 6px;
  font-size: 0.75rem;
  font-weight: 600;
  color: var(--color-text-muted);
}

.tuto-mock-referral-link-row {
  padding: 10px 12px;
  border-radius: var(--radius-md);
  border: 1px solid var(--color-border);
  background: var(--color-bg);
  font-size: 0.75rem;
  overflow: hidden;
}

.tuto-mock-referral-stats {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 10px;
}

.tuto-mock-referral-stats div {
  padding: 12px;
  border-radius: var(--radius-md);
  border: 1px solid var(--color-border);
  background: var(--color-bg-card);
  text-align: center;
}

.tuto-mock-referral-stats strong {
  display: block;
  font-size: 1.125rem;
  margin-bottom: 4px;
}

.tuto-mock-referral-stats span {
  font-size: 0.6875rem;
  color: var(--color-text-muted);
}

.tuto-mock-formation-label {
  margin: 0 0 12px;
  font-size: 0.6875rem;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--color-accent-light);
}

.tuto-mock-formation-stats {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 12px;
  margin-bottom: 14px;
}

.tuto-mock-formation-stats div {
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.tuto-mock-formation-stats strong {
  font-size: 1.25rem;
}

.tuto-mock-formation-stats span {
  font-size: 0.75rem;
  color: var(--color-text-subtle);
}

.tuto-mock-formation-progress {
  height: 6px;
  border-radius: 100px;
  background: rgba(255, 255, 255, 0.06);
  overflow: hidden;
}

.tuto-mock-formation-progress span {
  display: block;
  height: 100%;
  border-radius: inherit;
  background: linear-gradient(90deg, var(--color-accent-dark), var(--color-accent-light));
}

.tuto-mock-formation-modules {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.tuto-mock-formation-module {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 12px 14px;
  border-radius: var(--radius-md);
  border: 1px solid var(--color-border);
  background: var(--color-bg-card);
}

.tuto-mock-formation-module.is-done {
  border-color: rgba(16, 185, 129, 0.25);
}

.tuto-mock-formation-module-num {
  flex-shrink: 0;
  width: 32px;
  height: 32px;
  display: grid;
  place-items: center;
  border-radius: var(--radius-md);
  background: rgba(16, 185, 129, 0.12);
  color: var(--color-accent-light);
  font-weight: 700;
  font-size: 0.8125rem;
}

.tuto-mock-formation-module-body {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.tuto-mock-formation-module-body strong {
  font-size: 0.875rem;
}

.tuto-mock-formation-module-body span {
  font-size: 0.75rem;
  color: var(--color-text-subtle);
}

.tuto-mock-formation-module-status {
  flex-shrink: 0;
  font-size: 0.6875rem;
  font-weight: 700;
  color: var(--color-accent-light);
}

.tuto-mock-formation-module-chevron {
  flex-shrink: 0;
  color: var(--color-text-subtle);
}

.tuto-mock-formation-breadcrumb {
  margin: 0 0 8px;
  font-size: 0.75rem;
  color: var(--color-text-muted);
}

.tuto-mock-formation-lesson-title {
  margin: 0 0 12px;
  font-size: 1.125rem;
}

.tuto-mock-formation-lesson-block {
  padding: 14px;
  margin-bottom: 14px;
  border-radius: var(--radius-md);
  border: 1px solid var(--color-border);
  background: var(--color-bg-card);
  font-size: 0.8125rem;
  color: var(--color-text-muted);
}

.tuto-mock-formation-quiz {
  padding: 14px;
  border-radius: var(--radius-md);
  border: 1px solid rgba(16, 185, 129, 0.25);
  background: rgba(16, 185, 129, 0.06);
}

.tuto-mock-formation-quiz strong {
  display: block;
  margin-bottom: 4px;
  font-size: 0.9375rem;
}

.tuto-mock-formation-quiz p {
  margin: 0 0 10px;
  font-size: 0.8125rem;
  color: var(--color-text-muted);
}

.tuto-mock-bots-status-bar {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 12px 14px;
  border-radius: var(--radius-md);
  border: 1px solid var(--color-border);
  background: var(--color-bg-card);
  font-size: 0.875rem;
}

.tuto-mock-bots-dot {
  width: 10px;
  height: 10px;
  border-radius: 50%;
  flex-shrink: 0;
}

.tuto-mock-bots-dot--on {
  background: var(--color-accent-light);
  box-shadow: 0 0 8px rgba(16, 185, 129, 0.5);
}

.tuto-mock-bots-status-note {
  margin: 10px 0 0;
  font-size: 0.75rem;
  color: var(--color-text-subtle);
}

.tuto-mock-bots-layout {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1.15fr);
  gap: 12px;
  margin-top: 12px;
}

.tuto-mock-bots-layout-col--form .tuto-mock-bots-form,
.tuto-mock-bots-layout-col--feed .tuto-mock-bots-feed {
  margin: 0;
}

.tuto-mock-bots-form-title {
  margin: 0 0 10px;
  font-weight: 700;
  font-size: 0.875rem;
}

.tuto-mock-bots-field {
  margin-bottom: 8px;
}

.tuto-mock-bots-field label {
  display: block;
  font-size: 0.625rem;
  font-weight: 600;
  color: var(--color-text-subtle);
  margin-bottom: 3px;
}

.tuto-mock-bots-field > span:not(.tuto-mock-bots-search) {
  display: block;
  padding: 6px 8px;
  border-radius: var(--radius-md);
  border: 1px solid var(--color-border);
  background: var(--color-bg);
  font-size: 0.75rem;
}

.tuto-mock-bots-placeholder {
  color: var(--color-text-muted);
}

.tuto-mock-bots-search {
  margin-bottom: 6px;
}

.tuto-mock-bots-categories {
  list-style: none;
  margin: 0;
  padding: 0;
  max-height: 72px;
  overflow: hidden;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  background: var(--color-bg);
}

.tuto-mock-bots-categories li {
  padding: 4px 8px;
  font-size: 0.6875rem;
  color: var(--color-text-muted);
  border-bottom: 1px solid rgba(255, 255, 255, 0.04);
}

.tuto-mock-bots-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 8px;
}

.tuto-mock-bots-swatches {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}

.tuto-mock-bots-swatch {
  width: 18px;
  height: 18px;
  border-radius: 50%;
  background: var(--sw);
  border: 2px solid transparent;
}

.tuto-mock-bots-swatch.is-selected {
  border-color: #fff;
  box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.4);
}

.tuto-mock-bots-hint {
  margin: 8px 0 0;
  font-size: 0.625rem;
  color: var(--color-text-subtle);
  line-height: 1.4;
}

.tuto-mock-btn-fake--primary {
  display: block;
  width: 100%;
  margin-top: 10px;
  text-align: center;
  background: rgba(16, 185, 129, 0.15);
  border-color: rgba(16, 185, 129, 0.35);
  color: var(--color-accent-light);
}

.tuto-mock-btn-fake--sm {
  font-size: 0.625rem;
  padding: 4px 8px;
}

.tuto-mock-bots-filters-card {
  padding: 12px;
  border-radius: var(--radius-md);
  border: 1px solid var(--color-border);
  background: var(--color-bg-card);
}

.tuto-mock-bots-filters-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 10px;
  font-size: 0.875rem;
}

.tuto-mock-bots-filters-count {
  display: grid;
  place-items: center;
  min-width: 22px;
  height: 22px;
  padding: 0 6px;
  border-radius: 999px;
  background: rgba(230, 126, 34, 0.2);
  color: #fbbf24;
  font-size: 0.75rem;
  font-weight: 700;
}

.tuto-mock-bots-filters {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.tuto-mock-bots-filters li {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 8px 10px;
  border-radius: var(--radius-md);
  border: 1px solid var(--filter-border, var(--color-border));
  background: color-mix(in srgb, var(--filter-color, #333) 8%, var(--color-bg-card));
  font-size: 0.6875rem;
}

.tuto-mock-bots-filter-dot {
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: var(--c, #2ecc71);
  flex-shrink: 0;
}

.tuto-mock-bots-filter-info {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 1px;
}

.tuto-mock-bots-filter-info span {
  font-size: 0.625rem;
  color: var(--color-text-subtle);
}

.tuto-mock-bots-filter-actions {
  display: flex;
  gap: 4px;
  flex-shrink: 0;
}

.tuto-mock-bots-filter-actions span {
  padding: 3px 6px;
  border-radius: 4px;
  border: 1px solid var(--color-border);
  background: rgba(0, 0, 0, 0.2);
  font-size: 0.5625rem;
  color: var(--color-text-muted);
}

.tuto-mock-bots-feed-head {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 8px;
  margin-bottom: 10px;
  font-size: 0.8125rem;
}

.tuto-mock-bots-feed-actions {
  display: flex;
  align-items: center;
  gap: 6px;
}

.tuto-mock-bots-feed-select {
  font-size: 0.625rem;
  color: var(--color-text-muted);
  padding: 4px 8px;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
}

.tuto-mock-bots-listing {
  display: flex;
  gap: 10px;
  padding: 10px;
  margin-bottom: 8px;
  border-radius: var(--radius-md);
  border: 1px solid var(--color-border);
  border-left: 3px solid var(--listing-border, #e74c3c);
  background: var(--color-bg-card);
}

.tuto-mock-bots-listing:last-child {
  margin-bottom: 0;
}

.tuto-mock-bots-listing-img {
  width: 56px;
  height: 56px;
  border-radius: var(--radius-md);
  background: rgba(255, 255, 255, 0.06);
  flex-shrink: 0;
}

.tuto-mock-bots-listing-body {
  flex: 1;
  min-width: 0;
}

.tuto-mock-bots-listing-bot {
  display: inline-block;
  margin-bottom: 4px;
  padding: 2px 6px;
  border-radius: 4px;
  font-size: 0.5625rem;
  font-weight: 700;
  letter-spacing: 0.03em;
  color: #fff;
  background: var(--listing-border, #e74c3c);
}

.tuto-mock-bots-listing-body h4 {
  margin: 0 0 4px;
  font-size: 0.75rem;
  line-height: 1.3;
}

.tuto-mock-bots-listing-price {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 4px;
  margin: 0 0 6px;
  font-size: 0.6875rem;
  color: var(--color-text-muted);
}

.tuto-mock-bots-listing-price strong {
  color: var(--color-text);
  font-size: 0.8125rem;
}

.tuto-mock-bots-listing-arrow {
  color: var(--color-text-subtle);
}

.tuto-mock-bots-listing-likes {
  color: #f87171;
}

.tuto-mock-bots-listing-signal {
  margin-bottom: 4px;
  padding: 3px 8px;
  border-radius: 4px;
  font-size: 0.5625rem;
  font-weight: 600;
  color: #fcd34d;
  background: rgba(251, 191, 36, 0.12);
  border: 1px solid rgba(251, 191, 36, 0.25);
}

.tuto-mock-bots-listing-analysis {
  margin-bottom: 6px;
  padding: 4px 8px;
  border-radius: 4px;
  font-size: 0.5625rem;
  color: var(--color-text-subtle);
  background: rgba(255, 255, 255, 0.04);
  border: 1px solid var(--color-border);
}

.tuto-mock-bots-listing-meta {
  margin: 0 0 8px;
  font-size: 0.5625rem;
  color: var(--color-text-subtle);
}

.tuto-mock-bots-listing-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 4px;
}

.tuto-mock-bots-listing-actions .tuto-mock-btn-fake {
  font-size: 0.5625rem;
  padding: 4px 8px;
}

.tuto-mock-photo-annotate {
  position: relative;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  overflow: hidden;
  background: #000;
}

.tuto-mock-photo-annotate img {
  display: block;
  width: 100%;
  height: auto;
}

.tuto-mock-annotate-circle {
  position: absolute;
  left: 17.5%;
  top: 2.8%;
  width: 10.5%;
  height: 4.2%;
  border: 2px solid #fbbf24;
  border-radius: 999px;
  box-shadow: 0 0 0 2px rgba(251, 191, 36, 0.25);
  pointer-events: none;
}

.tuto-mock-annotate-arrow {
  position: absolute;
  left: 24%;
  top: 5.5%;
  width: 28%;
  height: 14%;
  color: #fbbf24;
  pointer-events: none;
  filter: drop-shadow(0 0 4px rgba(251, 191, 36, 0.35));
}

.tuto-mock-annotate-caption {
  position: absolute;
  left: 34%;
  top: 10%;
  max-width: 42%;
  margin: 0;
  padding: 6px 10px;
  border-radius: var(--radius-md);
  border: 1px solid rgba(251, 191, 36, 0.45);
  background: rgba(0, 0, 0, 0.82);
  font-size: 0.6875rem;
  color: var(--color-text-muted);
  line-height: 1.35;
  pointer-events: none;
}

.tuto-mock-annotate-caption strong {
  color: #fbbf24;
}

.tuto-mock-suivi-graphique-spot {
  padding: 12px 14px;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  background: var(--color-bg-card);
  margin-bottom: 10px;
}

.tuto-mock-suivi-graphique-spot-bar h1 {
  margin: 0;
  font-size: 1.125rem;
  font-weight: 600;
}

.tuto-mock-suivi-graphique-spot-sub {
  margin: 4px 0 0;
  font-size: 0.75rem;
  color: var(--color-text-subtle);
}

.tuto-mock-graphique-btn {
  pointer-events: none;
  cursor: default;
  color: #fbbf24 !important;
  border: 2px solid #fbbf24 !important;
  background: rgba(251, 191, 36, 0.12) !important;
  box-shadow:
    0 0 0 3px rgba(251, 191, 36, 0.22),
    0 0 14px rgba(251, 191, 36, 0.35);
  animation: tuto-graphique-pulse 2s ease-in-out infinite;
}

@keyframes tuto-graphique-pulse {
  0%,
  100% {
    box-shadow:
      0 0 0 3px rgba(251, 191, 36, 0.22),
      0 0 14px rgba(251, 191, 36, 0.35);
  }

  50% {
    box-shadow:
      0 0 0 5px rgba(251, 191, 36, 0.32),
      0 0 20px rgba(251, 191, 36, 0.5);
  }
}

.tuto-mock-annotate-caption--spot {
  position: static;
  max-width: none;
  margin: 10px 0 0;
}

.tuto-mock-photo-plain {
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  overflow: hidden;
  background: #000;
}

.tuto-mock-photo-plain img {
  display: block;
  width: 100%;
  height: auto;
}

.tuto-mock-suivi-chart-preview {
  margin-top: 10px;
  padding: 12px;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  background: var(--color-bg-card);
}

.tuto-mock-suivi-chart-preview-head {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  margin-bottom: 12px;
}

.tuto-mock-suivi-chart-preview-head strong {
  font-size: 0.8125rem;
}

.tuto-mock-suivi-chart-tabs {
  display: flex;
  gap: 6px;
  font-size: 0.5625rem;
}

.tuto-mock-suivi-chart-tabs span {
  padding: 4px 8px;
  border-radius: 999px;
  border: 1px solid var(--color-border);
  color: var(--color-text-subtle);
}

.tuto-mock-suivi-chart-tabs span.is-active {
  border-color: rgba(16, 185, 129, 0.35);
  background: rgba(16, 185, 129, 0.12);
  color: var(--color-accent-light);
}

.tuto-mock-suivi-chart-bars {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 6px;
  height: 100px;
  padding: 0 4px;
}

.tuto-mock-suivi-chart-bars div {
  flex: 1;
  height: var(--h, 40%);
  min-height: 8px;
  border-radius: 3px 3px 0 0;
  background: linear-gradient(180deg, #34d399, #059669);
  position: relative;
}

.tuto-mock-suivi-chart-bars div:nth-child(2) { background: linear-gradient(180deg, #fbbf24, #d97706); }
.tuto-mock-suivi-chart-bars div:nth-child(3) { background: linear-gradient(180deg, #a78bfa, #7c3aed); }
.tuto-mock-suivi-chart-bars div:nth-child(4) { background: linear-gradient(180deg, #22d3ee, #0891b2); }
.tuto-mock-suivi-chart-bars div:nth-child(5) { background: linear-gradient(180deg, #fb7185, #e11d48); }

.tuto-mock-suivi-chart-bars div span {
  position: absolute;
  top: -16px;
  left: 50%;
  transform: translateX(-50%);
  font-size: 0.5rem;
  color: var(--color-text-muted);
  white-space: nowrap;
}

.tuto-mock-suivi-chart-preview-foot {
  margin: 10px 0 0;
  font-size: 0.625rem;
  color: var(--color-text-subtle);
  text-align: center;
}

.tuto-mock-suivi-summary {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
}

.tuto-mock-suivi-block {
  padding: 12px;
  border-radius: var(--radius-md);
  border: 1px solid var(--color-border);
  background: var(--color-bg-card);
}

.tuto-mock-suivi-block--total {
  border-color: rgba(16, 185, 129, 0.2);
}

.tuto-mock-suivi-block-title {
  margin: 0 0 10px;
  font-size: 0.6875rem;
  font-weight: 600;
  color: var(--color-text-muted);
}

.tuto-mock-suivi-stats {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 8px;
}

.tuto-mock-suivi-stats div {
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.tuto-mock-suivi-stats span {
  font-size: 0.625rem;
  color: var(--color-text-subtle);
}

.tuto-mock-suivi-stats strong {
  font-size: 0.8125rem;
}

.tuto-mock-suivi-sync-bar {
  padding: 12px;
  border-radius: var(--radius-md);
  border: 1px solid rgba(16, 185, 129, 0.25);
  background: rgba(16, 185, 129, 0.06);
}

.tuto-mock-suivi-sync-tag {
  display: inline-block;
  margin-bottom: 6px;
  padding: 2px 8px;
  border-radius: 999px;
  font-size: 0.625rem;
  font-weight: 700;
  text-transform: uppercase;
  color: var(--color-accent-light);
  background: rgba(16, 185, 129, 0.15);
}

.tuto-mock-suivi-sync-bar p {
  margin: 0 0 10px;
  font-size: 0.75rem;
  color: var(--color-text-muted);
  line-height: 1.45;
}

.tuto-mock-suivi-sync-actions {
  display: flex;
  gap: 8px;
}

.tuto-mock-suivi-sync-status {
  margin: 8px 0 0;
  font-size: 0.6875rem;
  color: var(--color-text-subtle);
}

.tuto-mock-suivi-sync-alert {
  margin-top: 10px;
  padding: 10px 12px;
  border-radius: var(--radius-md);
  border: 1px solid rgba(251, 191, 36, 0.35);
  background: rgba(251, 191, 36, 0.08);
  font-size: 0.75rem;
  color: var(--color-text-muted);
  line-height: 1.45;
}

.tuto-mock-suivi-sync-alert strong {
  display: block;
  margin-bottom: 4px;
  color: #fcd34d;
}

.tuto-mock-suivi-sync-alert p {
  margin: 0;
}

.tuto-mock-suivi-form-title {
  margin: 0 0 10px;
  font-weight: 700;
  font-size: 0.875rem;
}

.tuto-mock-suivi-history-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  margin-bottom: 10px;
  font-size: 0.875rem;
}

.tuto-mock-suivi-sync-badge {
  font-size: 0.5625rem;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--color-accent-light);
}

.tuto-mock-suivi-toolbar {
  display: flex;
  gap: 8px;
  margin-bottom: 10px;
}

.tuto-mock-suivi-toolbar .tuto-mock-bots-search {
  flex: 1;
  display: block;
  padding: 6px 8px;
  border-radius: var(--radius-md);
  border: 1px solid var(--color-border);
  font-size: 0.6875rem;
  color: var(--color-text-subtle);
}

.tuto-mock-suivi-filter {
  padding: 6px 8px;
  border-radius: var(--radius-md);
  border: 1px solid var(--color-border);
  font-size: 0.6875rem;
  color: var(--color-text-muted);
}

.tuto-mock-suivi-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.tuto-mock-suivi-item {
  display: flex;
  gap: 10px;
  padding: 10px;
  border-radius: var(--radius-md);
  border: 1px solid var(--color-border);
  background: var(--color-bg-card);
}

.tuto-mock-suivi-item-thumb {
  width: 48px;
  height: 48px;
  border-radius: var(--radius-md);
  background: rgba(255, 255, 255, 0.06);
  flex-shrink: 0;
}

.tuto-mock-suivi-item-body {
  flex: 1;
  min-width: 0;
  font-size: 0.6875rem;
}

.tuto-mock-suivi-item-tag {
  display: inline-block;
  margin-bottom: 4px;
  padding: 1px 6px;
  border-radius: 4px;
  font-size: 0.5625rem;
  font-weight: 700;
  color: var(--color-accent-light);
  background: rgba(16, 185, 129, 0.12);
}

.tuto-mock-suivi-item-body strong {
  display: block;
  margin-bottom: 4px;
  font-size: 0.75rem;
}

.tuto-mock-suivi-item-body p {
  margin: 0 0 6px;
  color: var(--color-text-muted);
}

.tuto-mock-suivi-negociated {
  display: inline-block;
  margin-bottom: 6px;
  padding: 0;
  border: none;
  background: none;
  font: inherit;
  font-size: 0.6875rem;
  font-weight: 600;
  color: #fbbf24;
  cursor: default;
  text-decoration: underline;
  text-underline-offset: 2px;
}

.tuto-mock-suivi-item-actions {
  display: flex;
  gap: 8px;
}

.tuto-mock-suivi-item-actions span {
  font-size: 0.625rem;
  color: var(--color-text-subtle);
}

.tuto-mock-community-layout {
  display: grid;
  grid-template-columns: minmax(0, 0.85fr) minmax(0, 1.15fr);
  gap: 10px;
}

.tuto-mock-community-layout-side,
.tuto-mock-community-layout-main {
  min-width: 0;
}

.tuto-mock-community-tag {
  margin: 0 0 4px;
  font-size: 0.5625rem;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--color-text-subtle);
}

.tuto-mock-community-channels-title {
  margin: 0 0 8px;
  font-size: 0.8125rem;
  font-weight: 700;
}

.tuto-mock-community-channel-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.tuto-mock-community-channel {
  padding: 8px 10px;
  border-radius: var(--radius-md);
  border: 1px solid var(--color-border);
  background: var(--color-bg-card);
  font-size: 0.6875rem;
}

.tuto-mock-community-channel.is-active {
  border-color: rgba(16, 185, 129, 0.45);
  background: rgba(16, 185, 129, 0.08);
}

.tuto-mock-community-channel strong {
  display: block;
  margin-bottom: 2px;
  font-size: 0.75rem;
}

.tuto-mock-community-channel span {
  color: var(--color-text-subtle);
  font-size: 0.625rem;
}

.tuto-mock-community-chat {
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  background: var(--color-bg-card);
  overflow: hidden;
}

.tuto-mock-community-chat-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 8px;
  padding: 10px 12px;
  border-bottom: 1px solid var(--color-border);
}

.tuto-mock-community-chat-head strong {
  display: block;
  font-size: 0.8125rem;
}

.tuto-mock-community-chat-head > div:first-child span {
  display: block;
  font-size: 0.625rem;
  color: var(--color-text-subtle);
}

.tuto-mock-community-online {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 0.625rem;
  color: var(--color-text-muted);
  white-space: nowrap;
}

.tuto-mock-community-messages {
  padding: 10px 12px;
  display: flex;
  flex-direction: column;
  gap: 10px;
  max-height: 200px;
  overflow: hidden;
}

.tuto-mock-community-msg {
  max-width: 88%;
  padding: 8px 10px;
  border-radius: var(--radius-md);
  border: 1px solid var(--color-border);
  background: rgba(255, 255, 255, 0.03);
  font-size: 0.6875rem;
}

.tuto-mock-community-msg.is-own {
  margin-left: auto;
  border-color: rgba(16, 185, 129, 0.35);
  background: rgba(16, 185, 129, 0.12);
}

.tuto-mock-community-msg-head {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 4px;
  margin-bottom: 4px;
}

.tuto-mock-community-msg-head strong {
  font-size: 0.6875rem;
}

.tuto-mock-community-msg p {
  margin: 0;
  color: var(--color-text-muted);
  line-height: 1.4;
}

.tuto-mock-community-badge {
  padding: 1px 5px;
  border-radius: 4px;
  font-size: 0.5rem;
  font-weight: 700;
  letter-spacing: 0.03em;
  text-transform: uppercase;
}

.tuto-mock-community-badge--crew {
  color: #fbbf24;
  background: rgba(251, 191, 36, 0.15);
}

.tuto-mock-community-badge--tl {
  color: #c084fc;
  background: rgba(192, 132, 252, 0.15);
}

.tuto-mock-community-badge--admin {
  color: #fb923c;
  background: rgba(251, 146, 60, 0.15);
}

.tuto-mock-community-compose {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 10px 12px;
  border-top: 1px solid var(--color-border);
}

.tuto-mock-community-attach {
  font-size: 0.875rem;
  opacity: 0.7;
}

.tuto-mock-community-input {
  flex: 1;
  padding: 6px 10px;
  border-radius: var(--radius-md);
  border: 1px solid var(--color-border);
  background: var(--color-bg);
  font-size: 0.6875rem;
  color: var(--color-text-subtle);
}

.tuto-mock-community-compose .tuto-mock-btn-fake--primary {
  width: auto;
  margin: 0;
  padding: 6px 12px;
  font-size: 0.6875rem;
}

.tuto-mock-community-rules {
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  background: var(--color-bg-card);
  overflow: hidden;
}

.tuto-mock-community-rules-head {
  margin: 0;
  padding: 10px 12px;
  font-size: 0.75rem;
  font-weight: 700;
  border-bottom: 1px solid var(--color-border);
  background: rgba(255, 255, 255, 0.02);
}

.tuto-mock-community-rules-list {
  list-style: none;
  margin: 0;
  padding: 8px 10px;
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.tuto-mock-community-rule {
  display: flex;
  align-items: flex-start;
  gap: 8px;
  padding: 8px 10px;
  border-radius: var(--radius-md);
  border: 1px solid var(--color-border);
  background: rgba(255, 255, 255, 0.02);
  font-size: 0.6875rem;
}

.tuto-mock-community-rule-icon {
  flex-shrink: 0;
  font-size: 0.875rem;
  line-height: 1.2;
}

.tuto-mock-community-rule strong {
  display: block;
  margin-bottom: 2px;
  font-size: 0.6875rem;
}

.tuto-mock-community-rule p {
  margin: 0;
  color: var(--color-text-muted);
  line-height: 1.35;
}

.tuto-mock-community-rules-foot {
  margin: 0;
  padding: 8px 12px;
  border-top: 1px solid var(--color-border);
  font-size: 0.625rem;
  color: var(--color-text-subtle);
  background: rgba(239, 68, 68, 0.06);
}

.tuto-mock-badges-overview {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.tuto-mock-badges-tag {
  display: inline-block;
  margin-bottom: 4px;
  padding: 2px 8px;
  border-radius: 999px;
  font-size: 0.5rem;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--color-accent-light);
  background: var(--color-accent-glow);
  border: 1px solid rgba(16, 185, 129, 0.3);
}

.tuto-mock-badges-title {
  margin: 0 0 4px;
  font-size: 0.875rem;
  font-weight: 700;
}

.tuto-mock-badges-lead {
  margin: 0 0 6px;
  font-size: 0.625rem;
  color: var(--color-text-muted);
  line-height: 1.4;
}

.tuto-mock-badges-counter {
  margin: 0;
  font-size: 0.6875rem;
  color: var(--color-text-subtle);
}

.tuto-mock-badges-counter strong {
  color: var(--color-accent-light);
}

.tuto-mock-badges-equipped,
.tuto-mock-badges-hero {
  padding: 10px 12px;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  background: var(--color-bg-card);
}

.tuto-mock-badges-equipped-title {
  margin: 0 0 2px;
  font-size: 0.75rem;
  font-weight: 700;
}

.tuto-mock-badges-equipped-sub {
  margin: 0 0 8px;
  font-size: 0.625rem;
  color: var(--color-text-subtle);
}

.tuto-mock-badges-preview {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 8px;
  padding: 8px 10px;
  border-radius: var(--radius-md);
  background: rgba(0, 0, 0, 0.25);
  border: 1px solid var(--color-border);
}

.tuto-mock-badges-preview strong {
  font-size: 0.75rem;
  color: var(--color-accent-light);
}

.tuto-mock-badges-equipped-label {
  margin: 8px 0 0;
  font-size: 0.625rem;
  color: var(--color-text-subtle);
}

.tuto-mock-badges-legend {
  display: flex;
  flex-wrap: wrap;
  gap: 8px 12px;
  padding: 8px 10px;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  background: rgba(255, 255, 255, 0.02);
  font-size: 0.5625rem;
  color: var(--color-text-muted);
}

.tuto-mock-badges-dot {
  display: inline-block;
  width: 8px;
  height: 8px;
  margin-right: 4px;
  border-radius: 50%;
  vertical-align: middle;
}

.tuto-mock-badges-dot--common { background: #6b7280; }
.tuto-mock-badges-dot--uncommon { background: #10b981; }
.tuto-mock-badges-dot--rare { background: #3b82f6; }
.tuto-mock-badges-dot--epic { background: #a855f7; }
.tuto-mock-badges-dot--legendary { background: #f59e0b; }
.tuto-mock-badges-dot--mythic { background: #ec4899; }
.tuto-mock-badges-dot--goat { background: linear-gradient(135deg, #ffd700, #ff2060); }

.tuto-mock-badges-category {
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  background: var(--color-bg-card);
  overflow: hidden;
}

.tuto-mock-badges-category-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 8px;
  padding: 10px 12px;
  border-bottom: 1px solid var(--color-border);
}

.tuto-mock-badges-category-head strong {
  display: block;
  font-size: 0.75rem;
}

.tuto-mock-badges-category-sub {
  display: block;
  font-size: 0.5625rem;
  color: var(--color-text-subtle);
}

.tuto-mock-badges-category-progress {
  font-size: 0.625rem;
  color: var(--color-text-muted);
  white-space: nowrap;
}

.tuto-mock-badges-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 6px;
  padding: 8px;
}

.tuto-mock-badges-grid--crew {
  grid-template-columns: repeat(4, minmax(0, 1fr));
}

.tuto-mock-badges-card {
  display: flex;
  flex-direction: column;
  gap: 4px;
  padding: 8px;
  border-radius: var(--radius-md);
  border: 1px solid var(--color-border);
  background: rgba(255, 255, 255, 0.02);
  font-size: 0.5625rem;
}

.tuto-mock-badges-card.is-locked {
  opacity: 0.45;
}

.tuto-mock-badges-card.is-equipped {
  border-color: rgba(16, 185, 129, 0.4);
  box-shadow: 0 0 0 1px rgba(16, 185, 129, 0.15);
}

.tuto-mock-badges-card-tier {
  font-size: 0.5rem;
  color: var(--color-text-subtle);
  text-transform: uppercase;
  letter-spacing: 0.04em;
}

.tuto-mock-badges-card-visual {
  display: flex;
  justify-content: center;
  padding: 4px 0;
}

.tuto-mock-badges-pill {
  display: inline-block;
  padding: 2px 8px;
  border-radius: 999px;
  font-size: 0.5rem;
  font-weight: 700;
  letter-spacing: 0.03em;
  text-transform: uppercase;
  border: 1px solid transparent;
}

.tuto-mock-badges-pill--common {
  color: #d1d5db;
  background: rgba(107, 114, 128, 0.25);
  border-color: rgba(107, 114, 128, 0.4);
}

.tuto-mock-badges-pill--uncommon {
  color: #6ee7b7;
  background: rgba(16, 185, 129, 0.15);
  border-color: rgba(16, 185, 129, 0.35);
}

.tuto-mock-badges-pill--rare {
  color: #93c5fd;
  background: rgba(59, 130, 246, 0.15);
  border-color: rgba(59, 130, 246, 0.35);
}

.tuto-mock-badges-pill--epic {
  color: #d8b4fe;
  background: rgba(168, 85, 247, 0.15);
  border-color: rgba(168, 85, 247, 0.35);
}

.tuto-mock-badges-pill--legendary {
  color: #fcd34d;
  background: rgba(245, 158, 11, 0.15);
  border-color: rgba(245, 158, 11, 0.35);
}

.tuto-mock-badges-pill--mythic {
  color: #f9a8d4;
  background: rgba(236, 72, 153, 0.15);
  border-color: rgba(236, 72, 153, 0.35);
}

.tuto-mock-badges-pill--goat {
  color: #fff;
  background: linear-gradient(135deg, rgba(255, 215, 0, 0.35), rgba(255, 32, 96, 0.35));
  border-color: rgba(255, 215, 0, 0.45);
}

.tuto-mock-badges-card strong {
  font-size: 0.5625rem;
  line-height: 1.2;
}

.tuto-mock-badges-card-desc {
  color: var(--color-text-subtle);
  line-height: 1.3;
  min-height: 2.4em;
}

.tuto-mock-badges-equip {
  margin-top: auto;
  padding: 3px 6px;
  font-size: 0.5rem;
  text-align: center;
}

.tuto-mock-badges-equip.is-active {
  border-color: rgba(16, 185, 129, 0.5);
  color: var(--color-accent-light);
}

.tuto-mock-badges-equip-flow {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.tuto-mock-badges-equip-steps {
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.tuto-mock-badges-equip-step {
  display: flex;
  align-items: flex-start;
  gap: 8px;
  padding: 8px 10px;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  background: rgba(255, 255, 255, 0.02);
  font-size: 0.625rem;
}

.tuto-mock-badges-equip-step span {
  flex-shrink: 0;
  width: 18px;
  height: 18px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  font-size: 0.5625rem;
  font-weight: 700;
  color: var(--color-accent-light);
  background: var(--color-accent-glow);
  border: 1px solid rgba(16, 185, 129, 0.3);
}

.tuto-mock-badges-equip-step p {
  margin: 0;
  color: var(--color-text-muted);
  line-height: 1.35;
}

.tuto-mock-cards .app-card {
  padding: 16px;
}

.tuto-mock-cards .app-card h3 {
  font-size: 0.9375rem;
  margin-bottom: 6px;
}

.tuto-mock-cards .app-card-meta {
  font-size: 0.75rem;
}

.tuto-redact {
  display: inline-block;
  background: #000;
  color: transparent;
  border-radius: 3px;
  user-select: none;
  vertical-align: middle;
  line-height: 1.2;
  min-width: 7ch;
  font-size: 0.75rem;
}

.tuto-redact--sm {
  min-width: 4ch;
}

.tuto-redact--lg {
  min-width: 10ch;
}

.tuto-redact--xl {
  min-width: 16ch;
}

.tuto-points {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.tuto-point {
  padding: 14px 16px;
  border-radius: var(--radius-md);
  border: 1px solid var(--color-border);
  background: var(--color-bg-card);
}

.tuto-point strong {
  display: block;
  margin-bottom: 4px;
  font-size: 0.9375rem;
}

.tuto-point p {
  margin: 0;
  font-size: 0.875rem;
  color: var(--color-text-muted);
  line-height: 1.5;
}

.tuto-tip {
  padding: 14px 16px;
  border-radius: var(--radius-md);
  border: 1px solid rgba(59, 130, 246, 0.25);
  background: rgba(59, 130, 246, 0.08);
  font-size: 0.875rem;
  line-height: 1.5;
  color: var(--color-text-muted);
}

.tuto-tip strong {
  color: #93c5fd;
}

@media (max-width: 768px) {
  .tuto-mock--compact.stats-grid {
    grid-template-columns: repeat(2, 1fr);
  }

  .tuto-mock-cards.app-cards-row {
    grid-template-columns: 1fr;
  }

  .tuto-mock-box-grid {
    grid-template-columns: 1fr;
  }

  .tuto-mock-referral-stats {
    grid-template-columns: 1fr;
  }

  .tuto-mock-formation-stats {
    grid-template-columns: 1fr;
  }

  .tuto-mock-bots-layout {
    grid-template-columns: 1fr;
  }

  .tuto-mock-suivi-summary {
    grid-template-columns: 1fr;
  }

  .tuto-mock-community-layout {
    grid-template-columns: 1fr;
  }

  .tuto-mock-badges-grid,
  .tuto-mock-badges-grid--crew {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}