/* Feuille globale (components/sheet/Sheet.jsx). Prefixe unique `bs-`.
   Chaque page pose sa DA en redefinissant les variables --bs-* sur une classe passee a <Sheet>.
   `.bs-scope` : meme jeu de variables pour un conteneur qui reutilise l'en-tete ou les lignes. */

.bs,
.bs-scope {
  --bs-bg: #14151b;
  --bs-text: #e7e3d8;
  --bs-gold: #c9a94a;
  --bs-alpha: 72%;
  --bs-blur: 22px;
  --bs-grain: 0.07;
  --bs-btn-radius: 12px;
  --bs-card: color-mix(in srgb, var(--bs-text) 5%, transparent);
  --bs-accent-line: color-mix(in srgb, var(--bs-accent) 62%, var(--bs-text));
  --bs-muted: color-mix(in srgb, var(--bs-text) 62%, transparent);
  --bs-line: color-mix(in srgb, var(--bs-text) 14%, transparent);
  --bs-line-strong: color-mix(in srgb, var(--bs-text) 30%, transparent);
  --bs-fill: color-mix(in srgb, var(--bs-text) 6%, transparent);
  --bs-fill-strong: color-mix(in srgb, var(--bs-text) 11%, transparent);
  --bs-accent: #8b0000;
  --bs-font: 'Montserrat', 'Roboto', sans-serif;
  --bs-z: 100000;
}

.bs {
  font-family: var(--bs-font);
  font-size: 15px;
  line-height: 1.4;
  letter-spacing: 0;
  color: var(--bs-text);
}

.bs *,
.bs *::before,
.bs *::after { box-sizing: border-box; }

.bs-backdrop {
  position: fixed;
  inset: 0;
  z-index: var(--bs-z);
  background: rgba(0, 0, 0, 0.55);
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.22s ease, visibility 0s linear 0.22s;
}

.bs.is-open .bs-backdrop {
  opacity: 1;
  visibility: visible;
  transition: opacity 0.22s ease;
}

.bs-panel {
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: calc(var(--bs-z) + 1);
  max-width: 620px;
  max-height: 86vh;
  max-height: 86dvh;
  margin: 0 auto;
  display: flex;
  flex-direction: column;
  color: var(--bs-text);
  /* Acrylique : fond teinte semi-transparent + flou de ce qui est derriere + grain (::before). */
  background: color-mix(in srgb, var(--bs-bg) var(--bs-alpha), transparent);
  -webkit-backdrop-filter: blur(var(--bs-blur)) saturate(1.35);
  backdrop-filter: blur(var(--bs-blur)) saturate(1.35);
  border-top: 1px solid var(--bs-line-strong);
  border-radius: 20px 20px 0 0;
  transform: translateY(100%);
  visibility: hidden;
  transition: transform 0.28s cubic-bezier(0.2, 0.7, 0.2, 1), visibility 0s linear 0.28s;
}

.bs.is-open .bs-panel {
  transform: none;
  visibility: visible;
  transition: transform 0.28s cubic-bezier(0.2, 0.7, 0.2, 1);
}

.bs-panel::before {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='200' height='200'%3E%3Cfilter id='n' x='0' y='0' width='100%25' height='100%25'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 1 0 0 0 0 1 0 0 0 0 1 .9 0 0 0 -.3'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
  opacity: var(--bs-grain);
  pointer-events: none;
}

.bs-panel > * { position: relative; }

/* Sans flou d'arriere-plan disponible : fond plein, lisible. */
@supports not (((-webkit-backdrop-filter: blur(1px)) or (backdrop-filter: blur(1px))) or (-webkit-backdrop-filter: blur(1px))) {
  .bs-panel { background: var(--bs-bg); }
}

.bs-drag { flex: 0 0 auto; touch-action: none; }

.bs-grab {
  display: block;
  box-sizing: content-box;
  width: 34px;
  height: 4px;
  margin: 0 auto;
  border-top: 10px solid transparent;
  border-bottom: 6px solid transparent;
  border-radius: 2px;
  background: var(--bs-line-strong);
  background-clip: padding-box;
}

.bs-head {
  position: relative;
  display: flex;
  align-items: center;
  gap: 10px;
  min-height: 46px;
  padding: 2px 12px 2px 18px;
  overflow: hidden;
}

/* Pas de barre de titre : le titre est une simple etiquette au-dessus du contenu. */
.bs-title {
  position: relative;
  flex: 1 1 auto;
  min-width: 0;
  margin: 0;
  padding: 0;
  font-family: inherit;
  font-size: 20px;
  font-weight: 700;
  line-height: 1.2;
  letter-spacing: 0;
  text-transform: none;
  color: var(--bs-text);
  border: 0;
}

.bs-meta {
  position: relative;
  font-size: 13px;
  font-weight: 500;
  color: var(--bs-muted);
  font-feature-settings: "tnum";
  font-variant-numeric: tabular-nums;
}

.bs .bs-icon-btn,
.bs-scope .bs-icon-btn {
  position: relative;
  flex: 0 0 auto;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 36px;
  height: 36px;
  margin: 0;
  padding: 0;
  font-size: 15px;
  line-height: 1;
  color: var(--bs-text);
  background: var(--bs-card);
  border: 1px solid var(--bs-line);
  border-radius: var(--bs-btn-radius);
  box-shadow: none;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
}

.bs .bs-icon-btn:hover,
.bs-scope .bs-icon-btn:hover {
  background: var(--bs-fill-strong);
  border-color: var(--bs-line-strong);
}

.bs .bs-back { margin-left: -6px; font-size: 13px; }

/* pastille de compteur sur un bouton d'icone (notifications non lues) */
.bs-badge {
  position: absolute;
  top: -5px;
  right: -5px;
  min-width: 17px;
  height: 17px;
  padding: 0 4px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-family: inherit;
  font-size: 10px;
  font-weight: 700;
  line-height: 1;
  color: #fff;
  background: #b3261e;
  border-radius: 9px;
  font-feature-settings: "tnum";
  font-variant-numeric: tabular-nums;
}

/* selecteur segmente (filtres) */
.bs-seg {
  display: flex;
  gap: 4px;
  margin: 0 0 10px;
  padding: 4px;
  border: 1px solid var(--bs-line);
  border-radius: 14px;
}

.bs .bs-seg > button {
  flex: 1 1;
  min-width: 0;
  height: 34px;
  margin: 0;
  padding: 0 6px;
  font-family: inherit;
  font-size: 13px;
  font-weight: 600;
  letter-spacing: 0;
  text-transform: none;
  color: var(--bs-muted);
  background: transparent;
  border: 0;
  border-radius: 10px;
  box-shadow: none;
  cursor: pointer;
}

.bs .bs-seg > button.is-active {
  color: var(--bs-bg);
  background: var(--bs-text);
}

.bs .bs-seg--sub { padding: 3px; border-color: transparent; }
.bs .bs-seg--sub > button { height: 28px; font-size: 12px; }
.bs .bs-seg--sub > button.is-active { color: var(--bs-text); background: transparent; box-shadow: inset 0 0 0 1px var(--bs-line); }

/* liste de notifications dans une feuille : sans cadre propre, fond de la feuille */
.bs .nb-wrap--sheet { --nb-bg: transparent; }
.bs .nb-wrap--sheet .nb-item { padding: 11px 6px; }

.bs-body {
  flex: 1 1 auto;
  min-height: 0;
  overflow-y: auto;
  overscroll-behavior: contain;
  padding: 10px 16px calc(18px + env(safe-area-inset-bottom, 0px));
  scrollbar-width: thin;
  scrollbar-color: var(--bs-line-strong) transparent;
}

/* Contenus generiques : liste d'entrees, titre de groupe, bloc d'identite */

.bs-list {
  margin: 0;
  padding: 0;
  list-style: none;
}

.bs .bs-row {
  width: 100%;
  display: flex;
  align-items: center;
  gap: 14px;
  min-height: 50px;
  margin: 0;
  padding: 0 6px;
  font-family: inherit;
  font-size: 15px;
  font-weight: 500;
  letter-spacing: 0;
  text-transform: none;
  text-align: left;
  text-decoration: none;
  color: var(--bs-text);
  background: transparent;
  border: 0;
  border-bottom: 1px solid var(--bs-line);
  border-radius: 0;
  box-shadow: none;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
}

.bs .bs-row:hover { background: var(--bs-fill); }
.bs-list > li:last-child > .bs-row { border-bottom: 0; }

.bs .bs-row > i {
  flex: 0 0 22px;
  font-size: 16px;
  text-align: center;
  color: var(--bs-muted);
}

.bs .bs-row.is-active { font-weight: 700; background: var(--bs-fill-strong); }
.bs .bs-row.is-active > i { color: var(--bs-text); }

.bs-row-label {
  flex: 1 1 auto;
  min-width: 0;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
}

.bs-row-end {
  flex: 0 0 auto;
  font-size: 13px;
  color: var(--bs-muted);
}

.bs-group-title {
  margin: 18px 0 2px;
  padding: 0 0 8px;
  font-family: inherit;
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0;
  text-transform: none;
  color: var(--bs-muted);
  border-bottom: 1px solid var(--bs-line);
}

.bs-group-title:first-child { margin-top: 0; }

/* Carte d'identite : bandeau de tuiles, photo de profil, pseudo */

.bs .bs-hero {
  position: relative;
  display: flex;
  align-items: center;
  gap: 14px;
  width: 100%;
  min-height: 92px;
  margin: 0 0 12px;
  padding: 14px 16px 14px 14px;
  overflow: hidden;
  font-family: inherit;
  letter-spacing: 0;
  text-transform: none;
  text-align: left;
  text-decoration: none;
  box-shadow: none;
  cursor: pointer;
  color: var(--bs-text);
  background: var(--bs-card);
  border: 1px solid var(--bs-line);
  border-radius: 16px;
}

.bs-hero-mosaic {
  position: absolute;
  inset: 0;
  pointer-events: none;
  opacity: 0.55;
  --mosaic: var(--bs-gold);
  --mosaic-strength: 0.5;
}

.bs-hero-mosaic .tile-mosaic {
  display: block;
  width: 100%;
  height: 100%;
}

.bs-hero-avatar {
  position: relative;
  flex: 0 0 62px;
  width: 62px;
  height: 62px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  font-size: 22px;
  font-weight: 700;
  background: var(--bs-bg);
  border: 1px solid var(--bs-gold);
  border-radius: 14px;
  --mosaic: var(--bs-text);
  --mosaic-strength: 0.5;
}

.bs-hero-avatar img,
.bs-hero-avatar .tile-mosaic {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.bs-hero-avatar span { position: relative; }

.bs-hero-text {
  position: relative;
  flex: 1 1 auto;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 3px;
}

.bs-hero-kicker {
  font-size: 12px;
  font-weight: 600;
  color: var(--bs-gold);
}

.bs-hero-name {
  font-size: 18px;
  font-weight: 700;
  line-height: 1.2;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
}

.bs-hero-sub {
  font-size: 13px;
  color: var(--bs-muted);
}

.bs-hero > i {
  position: relative;
  flex: 0 0 auto;
  font-size: 13px;
  color: var(--bs-muted);
}

/* Faux champ de recherche (ouvre la recherche du site) */

.bs .bs-search {
  width: 100%;
  display: flex;
  align-items: center;
  gap: 12px;
  height: 46px;
  margin: 0 0 12px;
  padding: 0 18px;
  font-family: inherit;
  font-size: 14px;
  font-weight: 500;
  letter-spacing: 0;
  text-transform: none;
  text-align: left;
  color: var(--bs-muted);
  background: var(--bs-card);
  border: 1px solid var(--bs-line);
  border-radius: 23px;
  box-shadow: none;
  cursor: pointer;
}

.bs .bs-search:hover { border-color: var(--bs-line-strong); }

/* Tuiles de navigation */

/* 6 colonnes : une tuile en occupe 2 (3 par ligne), `--half` 3 (2 par ligne), `--full` 6.
   La repartition est calculee par SheetTiles pour ne jamais laisser une tuile seule. */
.bs-tiles {
  display: grid;
  grid-template-columns: repeat(6, minmax(0, 1fr));
  grid-gap: 8px;
  gap: 8px;
}

.bs .bs-tile.bs-tile--half { grid-column: span 3; padding: 12px; font-size: 13px; }
.bs .bs-tile.bs-tile--full { grid-column: span 6; padding: 12px; font-size: 13px; }

.bs .bs-tile {
  position: relative;
  grid-column: span 2;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  justify-content: space-between;
  gap: 16px;
  min-height: 86px;
  margin: 0;
  padding: 12px 9px 11px 10px;
  font-family: inherit;
  font-size: 12px;
  font-weight: 600;
  line-height: 1.2;
  letter-spacing: 0;
  text-transform: none;
  text-align: left;
  text-decoration: none;
  color: var(--bs-text);
  background: var(--bs-card);
  border: 1px solid var(--bs-line);
  border-radius: 14px;
  box-shadow: none;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
}

.bs .bs-tile:hover { border-color: var(--bs-line-strong); }

.bs .bs-tile > i {
  font-size: 18px;
  color: var(--bs-gold);
}

/* Certaines pages fixent une taille sur `span` : ces libelles reprennent celle de leur parent. */
.bs-tile-label,
.bs-row-label,
.bs-hero-avatar span {
  font-size: inherit;
  font-family: inherit;
  color: inherit;
}

.bs-tile-label {
  max-width: 100%;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
}

.bs .bs-tile.is-active {
  background: color-mix(in srgb, var(--bs-accent) 30%, transparent);
  border-color: var(--bs-accent-line);
}

.bs .bs-tile.is-active::after {
  content: "";
  position: absolute;
  top: 12px;
  right: 12px;
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--bs-gold);
}

.bs .bs-quiet {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  width: 100%;
  height: 44px;
  margin: 14px 0 0;
  padding: 0;
  font-family: inherit;
  font-size: 13px;
  font-weight: 600;
  letter-spacing: 0;
  text-transform: none;
  color: var(--bs-muted);
  background: transparent;
  border: 0;
  border-top: 1px solid var(--bs-line);
  border-radius: 0;
  box-shadow: none;
  cursor: pointer;
}

.bs .bs-quiet:hover { color: var(--bs-text); }

/* Champ de saisie, note, resultat avec couverture (recherche) */

.bs .bs-field {
  position: -webkit-sticky;
  position: sticky;
  top: 0;
  z-index: 2;
  display: flex;
  align-items: center;
  gap: 12px;
  height: 48px;
  margin: 0 0 12px;
  padding: 0 8px 0 18px;
  color: var(--bs-muted);
  background: color-mix(in srgb, var(--bs-bg) 92%, var(--bs-text));
  border: 1px solid var(--bs-line-strong);
  border-radius: 24px;
  cursor: text;
}

.bs .bs-field:focus-within { border-color: var(--bs-gold); }

.bs .bs-field input {
  flex: 1 1 auto;
  min-width: 0;
  height: 100%;
  margin: 0;
  padding: 0;
  font-family: inherit;
  font-size: 16px;
  color: var(--bs-text);
  background: transparent;
  border: 0;
  outline: 0;
  box-shadow: none;
  -webkit-appearance: none;
     -moz-appearance: none;
          appearance: none;
}

.bs .bs-field input::placeholder { color: var(--bs-muted); }
.bs .bs-field input::-webkit-search-cancel-button { -webkit-appearance: none; appearance: none; }

.bs .bs-field-clear {
  flex: 0 0 auto;
  width: 34px;
  height: 34px;
  margin: 0;
  padding: 0;
  font-size: 13px;
  color: var(--bs-muted);
  background: transparent;
  border: 0;
  border-radius: 50%;
  box-shadow: none;
  cursor: pointer;
}

.bs-note {
  margin: 26px 0;
  font-size: 14px;
  text-align: center;
  color: var(--bs-muted);
}

.bs .bs-result {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 10px 6px;
  text-decoration: none;
  color: var(--bs-text);
  border-bottom: 1px solid var(--bs-line);
}

.bs .bs-result:hover { background: var(--bs-fill); }
.bs-list > li:last-child > .bs-result { border-bottom: 0; }

.bs-result img,
.bs-result-ph {
  flex: 0 0 46px;
  width: 46px;
  height: 64px;
  object-fit: cover;
  border: 1px solid var(--bs-line);
  border-radius: 8px;
  background: var(--bs-card);
}

.bs-result-ph {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: var(--bs-muted);
}

.bs-result-text {
  flex: 1 1 auto;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.bs-result-title {
  font-size: 15px;
  font-weight: 600;
  line-height: 1.25;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.bs-result-meta {
  font-size: 13px;
  color: var(--bs-muted);
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
}

.bs-result > i { flex: 0 0 auto; font-size: 12px; color: var(--bs-muted); }

/* Feuille haute (recherche) : occupe presque tout l'ecran, pour que le clavier ne la fasse pas sauter */
.bs--tall .bs-panel { height: 86vh; height: 86dvh; }

.bs-actions {
  display: flex;
  gap: 10px;
  margin-top: 16px;
}

.bs .bs-action {
  flex: 1 1;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  height: 44px;
  margin: 0;
  padding: 0 16px;
  font-family: inherit;
  font-size: 14px;
  font-weight: 600;
  letter-spacing: 0;
  text-transform: none;
  color: var(--bs-text);
  background: transparent;
  border: 1px solid var(--bs-line-strong);
  border-radius: 22px;
  box-shadow: none;
  cursor: pointer;
}

.bs .bs-action:hover { background: var(--bs-fill-strong); }

.bs .bs-action.is-primary {
  color: var(--bs-bg);
  background: var(--bs-text);
  border-color: var(--bs-text);
}

/* Boutons flottants ronds, empiles en bas a droite */

/* Calee a droite : le coin bas gauche est occupe par le widget Ko-fi flottant. */
.bs-trigger {
  position: fixed;
  right: 14px;
  bottom: calc(18px + env(safe-area-inset-bottom, 0px));
  z-index: 900;
  display: inline-flex;
  align-items: center;
  gap: 10px;
  max-width: calc(100vw - 210px);
  height: 44px;
  margin: 0;
  padding: 0 18px;
  font-family: var(--bs-font, 'Montserrat', 'Roboto', sans-serif);
  font-size: 14px;
  font-weight: 600;
  letter-spacing: 0;
  text-transform: none;
  color: var(--bs-text, #e7e3d8);
  background: color-mix(in srgb, var(--bs-bg, #14151b) 74%, transparent);
  -webkit-backdrop-filter: blur(18px) saturate(1.35);
  backdrop-filter: blur(18px) saturate(1.35);
  border: 1px solid var(--bs-line-strong, rgba(231, 227, 216, 0.3));
  border-radius: 22px;
  box-shadow: none;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
}

/* Bouton rond du menu, tout en bas a droite. La pastille de section se place au-dessus. */
.bs-trigger.bs-fab {
  width: 42px;
  height: 42px;
  max-width: none;
  padding: 0;
  justify-content: center;
  border-radius: 12px;
}

.bs-trigger.bs-fab > i { font-size: 15px; color: var(--bs-text, #e7e3d8); }

/* Boutons de page empiles au-dessus du bouton menu, de bas en haut. */
.bs-trigger.bs-fab--up { bottom: calc(68px + env(safe-area-inset-bottom, 0px)); }


@media (max-width: 380px) {
  .bs .bs-tile { padding-left: 8px; padding-right: 7px; font-size: 11px; }
}

@media (max-width: 768px) {
  html.bs-open { overflow: hidden; }
  /* Widget Ko-fi flottant (injecte par un script tiers, z-index maximal) : masque sous une feuille ouverte. */
  html.bs-open [class*="floatingchat-container"] { visibility: hidden; }
}

/* Bureau : tiroir a droite pour les feuilles marquees `drawer` */

@media (min-width: 769px) {
  .bs--drawer .bs-panel {
    top: 0;
    left: auto;
    width: min(480px, 100vw);
    max-width: none;
    max-height: none;
    margin: 0;
    border-top: 0;
    border-left: 1px solid var(--bs-line);
    border-radius: 0;
    transform: translateX(100%);
  }

  .bs--drawer.is-open .bs-panel { transform: none; }
  .bs--drawer .bs-grab { display: none; }
  .bs--drawer .bs-drag { touch-action: auto; }

  .bs--drawer .bs-head {
    gap: 14px;
    min-height: 76px;
    padding: 14px 16px 14px 26px;
  }

  .bs--drawer .bs-title { font-size: 22px; }
  .bs--drawer .bs-meta { font-size: 14px; }
  .bs--drawer .bs-icon-btn { width: 44px; height: 44px; font-size: 17px; }
  .bs--drawer .bs-body { padding: 22px 26px calc(28px + env(safe-area-inset-bottom, 0px)); }
}

/* Bureau : boite centree en haut d'ecran pour les feuilles marquees `dialog` */

@media (min-width: 769px) {
  .bs--dialog .bs-panel {
    top: 10vh;
    bottom: auto;
    width: min(640px, calc(100vw - 48px));
    height: auto;
    max-height: 76vh;
    border: 1px solid var(--bs-line-strong);
    border-radius: 20px;
    opacity: 0;
    transform: translateY(-14px);
    transition: transform 0.24s ease, opacity 0.2s ease, visibility 0s linear 0.24s;
  }

  .bs--dialog.is-open .bs-panel {
    opacity: 1;
    transform: none;
    transition: transform 0.24s ease, opacity 0.2s ease;
  }

  .bs--dialog .bs-grab { display: none; }
  .bs--dialog .bs-head { min-height: 56px; padding: 12px 14px 0 22px; }
  .bs--dialog .bs-body { padding: 12px 22px 22px; }
}

@media (prefers-reduced-motion: reduce) {
  .bs-backdrop,
  .bs-panel { transition: none !important; }
}

@media print {
  .bs,
  .bs-trigger { display: none; }
}

/* Couleurs + badge par palier Lucidite (--pc). Standalone (pas de deps --vc-*) :
   reutilisable hors de la zone commentaires (page /user, classement...). */
.vc-p-egare        { --pc: #8a8a8a; }
.vc-p-curieux      { --pc: #7d93a8; }
.vc-p-lucide       { --pc: #4f93d9; }
.vc-p-initie       { --pc: #28b6c4; }
.vc-p-eveille      { --pc: #36c46f; }
.vc-p-erudit       { --pc: #a9c43a; }
.vc-p-clairvoyant  { --pc: #d4af37; }
.vc-p-visionnaire  { --pc: #e6852f; }
.vc-p-transcendant { --pc: #e6479a; }
.vc-p-omniscient   { --pc: #b14ae6; }

.vc-palier {
  font-size: 0.7rem; font-weight: 800; letter-spacing: 0.4px; text-transform: uppercase;
  border-radius: 6px; padding: 3px 9px; line-height: 1;
  display: inline-flex; align-items: center; gap: 5px;
}
.vc-palier[class*="vc-p-"] {
  color: #15110a; background: var(--pc); border: none;
  box-shadow: 0 1px 6px color-mix(in srgb, var(--pc) 45%, transparent);
}
.vc-palier.vc-p-omniscient {
  background: linear-gradient(135deg, #b14ae6, #e6479a); color: #fff;
}

/* ─────────────────────────────────────────────────────────────────────────────
   COMPOSANT REUTILISABLE — badge de palier "sceau" (meme grammaire que
   /classement) : jeton numero romain biseaute (teinte grade) + libelle small-caps.
   Pilote par --pc -> ajouter la classe `vc-p-<slug>` a cote de `palier-badge`.
   Markup :
     <span class="palier-badge vc-p-lucide">
       <span class="palier-badge-num">III</span>
       <span class="palier-badge-label">Lucide</span>
     </span>
   ───────────────────────────────────────────────────────────────────────────── */
.palier-badge {
  --pc: #8b8f9c;
  display: inline-flex; align-items: stretch; max-width: 100%;
  font-family: 'Montserrat', sans-serif;
  line-height: 1;
  background: color-mix(in srgb, var(--pc) 9%, rgba(0,0,0,0.4));
  border: 1px solid color-mix(in srgb, var(--pc) 42%, transparent);
  border-radius: 5px;
  overflow: hidden;
}
/* numero romain : jeton biseaute grave, teinte grade (sceau) */
.palier-badge-num {
  display: inline-flex; align-items: center; justify-content: center;
  min-width: 2.4em; padding: 0 9px 0 7px;
  font-family: 'Montserrat', 'Roboto', sans-serif;
  font-size: 0.86rem; font-weight: 800; letter-spacing: 0.5px;
  color: #14110a;
  background: linear-gradient(160deg,
    color-mix(in srgb, var(--pc) 92%, #fff),
    color-mix(in srgb, var(--pc) 70%, transparent));
  font-feature-settings: "tnum";
  font-variant-numeric: tabular-nums;
  -webkit-clip-path: polygon(0 0, 100% 0, calc(100% - 7px) 50%, 100% 100%, 0 100%);
          clip-path: polygon(0 0, 100% 0, calc(100% - 7px) 50%, 100% 100%, 0 100%);
}
/* libelle du grade, precede d'une fine etoile gravee a 4 branches */
.palier-badge-label {
  display: inline-flex; align-items: center; gap: 7px;
  padding: 5px 12px 5px 9px;
  font-family: 'Montserrat', 'Roboto', sans-serif;
  font-size: 0.78rem; font-weight: 700; font-feature-settings: "smcp"; font-variant: small-caps;
  letter-spacing: 1.4px;
  color: color-mix(in srgb, var(--pc) 38%, #ffffff);
  text-shadow: 0 1px 2px rgba(0,0,0,0.55);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis; min-width: 0;
}
.palier-badge-label::before {
  content: ""; width: 6px; height: 6px; flex-shrink: 0;
  background: color-mix(in srgb, var(--pc) 85%, #fff);
  -webkit-clip-path: polygon(50% 0, 62% 38%, 100% 50%, 62% 62%, 50% 100%, 38% 62%, 0 50%, 38% 38%);
          clip-path: polygon(50% 0, 62% 38%, 100% 50%, 62% 62%, 50% 100%, 38% 62%, 0 50%, 38% 38%);
}