/* =========================================================
   MU Guard — finitions « plus »
   Chargée en dernier (après la variante de couleurs).
   1. Bannières des pages : texte lisible, voile et cadrage réglables
      (Admin → Images → Bannières des pages, variables --veil, --bx, --by, --vm)
   2. Annonces : liste, lecture, bloc de l'accueil
   3. Finitions générales
   ========================================================= */

/* ---------- Jetons (style sombre par défaut, Céleste plus bas) ---------- */
html body.hx {
  --nx-bg: #0b0c10; --nx-card: #12141a; --nx-card2: #171a22; --nx-ink: #f3ecdc; --nx-ink2: #c9bfab; --nx-muted: #9c917f;
  --nx-line: rgba(226, 178, 90, .18); --nx-line2: rgba(226, 178, 90, .38); --nx-gold: #e2b25a; --nx-gold-d: #f0c97a;
  --nx-shadow: 0 24px 50px -28px rgba(0, 0, 0, .85); --nx-shadow-hi: 0 34px 60px -26px rgba(0, 0, 0, .95);
  --nx-veil-rgb: 7 8 11; --nx-halo: 0 2px 14px rgba(0, 0, 0, .85), 0 0 2px rgba(0, 0, 0, .6);
  --nx-r: 16px; --nx-serif: "Cinzel", "Trajan Pro", Georgia, serif; --nx-sans: "Alegreya Sans", "Segoe UI", system-ui, sans-serif;
  --c-add: #3fbf7f; --c-bal: #5aa8ff; --c-fix: #ff9a4a; --c-imp: #ff5a5a;
}
html body.hx.skin-celeste {
  --nx-bg: #fbf7ee; --nx-card: #fffdf8; --nx-card2: #f8f1e2; --nx-ink: #1d2130; --nx-ink2: #3f4554; --nx-muted: #6c6658;
  --nx-line: rgba(185, 131, 32, .22); --nx-line2: rgba(185, 131, 32, .45); --nx-gold: #b98320; --nx-gold-d: #7c540c;
  --nx-shadow: 0 22px 44px -30px rgba(50, 55, 75, .55); --nx-shadow-hi: 0 34px 60px -30px rgba(50, 55, 75, .7);
  --nx-veil-rgb: 251 247 238; --nx-halo: 0 1px 0 rgba(255, 255, 255, .8), 0 0 14px rgba(251, 247, 238, .95), 0 0 34px rgba(251, 247, 238, .85);
  --c-add: #1f9d5c; --c-bal: #2a77d4; --c-fix: #d06a12; --c-imp: #c9342a;
}

/* =========================================================
   1. Bannières des pages
   ========================================================= */
html body.hx :is(.forum-hero, .fcat-hero, .topic-hero, .rank-hero, .shop-hero, .gen-hero, .guide-hero, .char-hero, .rw-hero, .ref-hero, .act-hero, .nx-hero)::before {
  background-position: var(--bx, 70%) var(--by, 40%) !important;
}
/* voile : fort côté texte, transparent côté illustration (ou uniforme si --vm = 1) */
html body.hx :is(.forum-hero, .fcat-hero, .topic-hero, .rank-hero, .shop-hero, .gen-hero, .guide-hero, .char-hero, .rw-hero, .ref-hero, .act-hero, .nx-hero)::after,
html body.hx.skin-celeste.skin-celeste :is(.forum-hero, .fcat-hero, .topic-hero, .rank-hero, .shop-hero, .gen-hero, .guide-hero, .char-hero, .rw-hero, .ref-hero, .act-hero, .nx-hero)::after {
  background:
    linear-gradient(90deg,
      rgb(var(--nx-veil-rgb) / calc(.5 + var(--veil, .8) * .48)) 0%,
      rgb(var(--nx-veil-rgb) / calc(.3 + var(--veil, .8) * .62)) 38%,
      rgb(var(--nx-veil-rgb) / calc(var(--veil, .8) * (.35 + var(--vm, 0) * .45))) 72%,
      rgb(var(--nx-veil-rgb) / calc(var(--veil, .8) * (.15 + var(--vm, 0) * .6))) 100%),
    linear-gradient(0deg, rgb(var(--nx-veil-rgb) / 1) 0%, rgb(var(--nx-veil-rgb) / 0) 42%) !important;
}
/* texte des bannières : encre franche et halo (lisible sur n'importe quelle image) */
html body.hx :is(.forum-hero, .fcat-hero, .topic-hero, .rank-hero, .shop-hero, .gen-hero, .guide-hero, .char-hero, .act-hero, .nx-hero) h1 {
  text-shadow: var(--nx-halo) !important;
}
html body.hx.skin-celeste :is(.forum-hero, .fcat-hero, .topic-hero, .rank-hero, .shop-hero, .gen-hero, .guide-hero, .char-hero, .act-hero, .nx-hero) h1 {
  color: #171b28 !important; -webkit-text-fill-color: #171b28 !important;
}
html body.hx :is(.forum-hero, .fcat-hero, .topic-hero, .rank-hero, .shop-hero, .gen-hero, .guide-hero, .char-hero, .act-hero, .nx-hero) :is(p, .muted, .lead):not(.btn) {
  color: var(--nx-ink2) !important; font-weight: 500 !important; text-shadow: var(--nx-halo) !important; opacity: 1 !important;
}
html body.hx.skin-celeste :is(.forum-hero, .fcat-hero, .topic-hero, .rank-hero, .shop-hero, .gen-hero, .guide-hero, .char-hero, .act-hero, .nx-hero) :is(p, .muted, .lead):not(.btn) { color: #2c3140 !important; }
html body.hx :is(.forum-hero, .fcat-hero, .topic-hero, .rank-hero, .shop-hero, .gen-hero, .guide-hero, .char-hero, .act-hero, .nx-hero) .eyebrow { text-shadow: var(--nx-halo) !important; font-weight: 700 !important; }
html body.hx.skin-celeste :is(.forum-hero, .fcat-hero, .topic-hero, .rank-hero, .shop-hero, .gen-hero, .guide-hero, .char-hero, .act-hero, .nx-hero) .eyebrow { color: #6b4708 !important; }
/* petit écran : le texte prend toute la largeur, le voile devient uniforme */
@media (max-width: 760px) {
  html body.hx :is(.forum-hero, .fcat-hero, .topic-hero, .rank-hero, .shop-hero, .gen-hero, .guide-hero, .char-hero, .rw-hero, .ref-hero, .act-hero, .nx-hero)::after,
  html body.hx.skin-celeste.skin-celeste :is(.forum-hero, .fcat-hero, .topic-hero, .rank-hero, .shop-hero, .gen-hero, .guide-hero, .char-hero, .rw-hero, .ref-hero, .act-hero, .nx-hero)::after {
    background: linear-gradient(180deg, rgb(var(--nx-veil-rgb) / calc(.45 + var(--veil, .8) * .45)), rgb(var(--nx-veil-rgb) / calc(.6 + var(--veil, .8) * .38))),
                linear-gradient(0deg, rgb(var(--nx-veil-rgb) / 1) 0%, rgb(var(--nx-veil-rgb) / 0) 40%) !important;
  }
}

/* --- Appel final de l'accueil « Prêt à entrer dans Lorencia ? » --- */
html body.hx.is-lgb .bx-join::before {
  background:
    linear-gradient(90deg,
      rgb(var(--nx-veil-rgb) / calc(.55 + var(--veil, .8) * .44)) 0%,
      rgb(var(--nx-veil-rgb) / calc(.4 + var(--veil, .8) * .55)) 45%,
      rgb(var(--nx-veil-rgb) / calc(var(--veil, .8) * (.3 + var(--vm, 0) * .55))) 78%,
      rgb(var(--nx-veil-rgb) / calc(var(--veil, .8) * (.1 + var(--vm, 0) * .6))) 100%),
    linear-gradient(0deg, rgb(var(--nx-veil-rgb) / .9), rgb(var(--nx-veil-rgb) / 0) 45%),
    var(--bn-img, var(--lgb-join, var(--sk-cover, none))) var(--bx, 50%) var(--by, 60%) / cover no-repeat !important;
}
html body.hx .bx-join h2 { text-shadow: var(--nx-halo) !important; }
html body.hx.skin-celeste .bx-join h2 { color: #171b28 !important; -webkit-text-fill-color: #171b28 !important; }
html body.hx .bx-join p { font-weight: 500 !important; text-shadow: var(--nx-halo) !important; }
html body.hx.skin-celeste .bx-join p { color: #2c3140 !important; }
html body.hx.skin-celeste .bx-steps a { color: #1d2130 !important; font-weight: 700 !important; text-shadow: var(--nx-halo); }
html body.hx.skin-celeste .bx-steps b { background: #fffdf8 !important; box-shadow: 0 4px 12px -6px rgba(124, 84, 12, .6); }
html body.hx.skin-celeste .bx-ref { background: rgba(255, 253, 248, .94) !important; box-shadow: 0 10px 24px -16px rgba(60, 40, 10, .5); backdrop-filter: blur(6px); }
@media (max-width: 1100px) {
  html body.hx.is-lgb .bx-join::before {
    background: linear-gradient(180deg, rgb(var(--nx-veil-rgb) / calc(.5 + var(--veil, .8) * .45)), rgb(var(--nx-veil-rgb) / calc(.6 + var(--veil, .8) * .38))),
                var(--bn-img, var(--lgb-join, var(--sk-cover, none))) var(--bx, 50%) var(--by, 60%) / cover no-repeat !important;
  }
}

/* =========================================================
   2. Annonces
   ========================================================= */

/* --- Petits éléments communs --- */
.nx-tag { display: inline-flex; align-items: center; gap: 6px; padding: 4px 10px 4px 8px; border-radius: 999px; font: 700 10.5px/1 var(--nx-sans); letter-spacing: .12em; text-transform: uppercase;
  color: #fff; background: color-mix(in srgb, var(--t, #e2b25a) 76%, #000); box-shadow: 0 4px 14px -6px var(--t, #e2b25a), inset 0 0 0 1px rgba(255, 255, 255, .22); white-space: nowrap; }
.nx-tag i { width: 6px; height: 6px; border-radius: 50%; background: #fff; box-shadow: 0 0 0 2px rgba(255, 255, 255, .3); }
.nx-pill { display: inline-flex; align-items: center; padding: 4px 9px; border-radius: 999px; font: 700 10.5px/1 var(--nx-sans); letter-spacing: .1em; text-transform: uppercase;
  color: #3a2a06; background: linear-gradient(180deg, #ffe7a3, #e2b24a); box-shadow: 0 4px 12px -6px rgba(185, 131, 32, .9); }
.nx-pill.is-new { color: #fff; background: linear-gradient(180deg, #2bb0a0, #157a74); box-shadow: 0 4px 12px -6px rgba(21, 122, 116, .9); animation: nx-pulse 2.4s ease-in-out infinite; }
@keyframes nx-pulse { 50% { box-shadow: 0 0 0 4px rgba(43, 176, 160, .18), 0 4px 12px -6px rgba(21, 122, 116, .9); } }
.nx-badges { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; }
.nx-chg { display: inline-flex; flex-wrap: wrap; gap: 5px; }
.nx-chg b { display: inline-flex; align-items: center; gap: 4px; padding: 3px 8px; border-radius: 6px; font: 700 11px/1.1 var(--nx-sans); color: var(--c); background: color-mix(in srgb, var(--c) 12%, transparent); border: 1px solid color-mix(in srgb, var(--c) 30%, transparent); }
.nx-chg b span { font-weight: 500; }
.nx-chg .is-add, .nx-changes .is-add, .nx-sum .is-add { --c: var(--c-add); }
.nx-chg .is-bal, .nx-changes .is-bal, .nx-sum .is-bal { --c: var(--c-bal); }
.nx-chg .is-fix, .nx-changes .is-fix, .nx-sum .is-fix { --c: var(--c-fix); }
.nx-chg .is-imp, .nx-changes .is-imp, .nx-sum .is-imp { --c: var(--c-imp); }
.nx-day { position: absolute; right: 12px; bottom: 12px; display: grid; place-items: center; width: 50px; height: 54px; border-radius: 12px; background: rgba(255, 253, 248, .94); color: #1d2130;
  box-shadow: 0 10px 22px -10px rgba(0, 0, 0, .6); backdrop-filter: blur(6px); line-height: 1; }
.nx-day b { font: 700 20px/1 var(--nx-serif); }
.nx-day small { margin-top: 2px; font: 700 10px/1 var(--nx-sans); letter-spacing: .1em; text-transform: uppercase; color: #8a5a10; }
.nx-sec-h { display: flex; align-items: baseline; justify-content: space-between; gap: 16px; margin: 46px 0 18px; padding-bottom: 12px; border-bottom: 1px solid var(--nx-line); }
html body.hx .nx-sec-h h2 { margin: 0 !important; font: 600 1.25rem/1.2 var(--nx-serif) !important; letter-spacing: .08em; text-transform: uppercase; color: var(--nx-ink) !important; }
.nx-sec-h a { font: 700 13px/1 var(--nx-sans); letter-spacing: .06em; color: var(--nx-gold-d); text-decoration: none; }
.nx-sec-h a:hover { text-decoration: underline; }

/* --- Bannière de la liste --- */
html body.hx .nx-hero { position: relative; isolation: isolate; overflow: hidden; padding: 74px 0 56px; background-color: var(--nx-bg); }
html body.hx .nx-hero::before { content: ""; position: absolute; inset: 0; z-index: -2; background: var(--sk-cover, url("../img/home/siege-1920.webp")) var(--bx, 70%) var(--by, 40%) / cover no-repeat; }
html body.hx:not(.skin-celeste) .nx-hero::before { background-image: url("../img/home/siege-1920.webp"); }
html body.hx .nx-hero::after { content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none; }
.nx-hero-in { display: grid; grid-template-columns: minmax(0, 1fr) minmax(260px, 380px); gap: 40px; align-items: end; }
html body.hx .nx-hero h1 { margin: 6px 0 10px !important; font-size: clamp(2.3rem, 5vw, 3.6rem) !important; }
html body.hx .nx-hero .lead { max-width: 52ch; margin: 0; font-size: 1.12rem !important; }
.nx-hero-stats { display: flex; flex-wrap: wrap; gap: 10px; margin: 22px 0 0; padding: 0; list-style: none; }
.nx-hero-stats li { display: flex; align-items: baseline; gap: 7px; padding: 9px 14px; border-radius: 12px; background: color-mix(in srgb, var(--nx-card) 82%, transparent); border: 1px solid var(--nx-line); backdrop-filter: blur(8px); box-shadow: var(--nx-shadow); }
.nx-hero-stats b { font: 800 1.02rem/1 var(--nx-sans); color: var(--nx-ink); }
.nx-hero-stats small { font: 500 13px/1 var(--nx-sans); color: var(--nx-muted); }
.nx-hero-stats a { font: 700 13px/1 var(--nx-sans); color: var(--nx-gold-d); text-decoration: none; }
.nx-search { position: relative; display: flex; align-items: center; height: 54px; padding: 0 16px; gap: 10px; border-radius: 14px; background: var(--nx-card); border: 1px solid var(--nx-line2);
  box-shadow: var(--nx-shadow-hi); color: var(--nx-muted); transition: border-color .2s, box-shadow .2s; }
.nx-search:focus-within { border-color: var(--nx-gold); box-shadow: 0 0 0 4px color-mix(in srgb, var(--nx-gold) 18%, transparent), var(--nx-shadow-hi); }
html body.hx .nx-search input[type=search] { -webkit-appearance: none; appearance: none; outline: 0 !important; flex: 1; min-width: 0; height: 100%; padding: 0 !important; border: 0 !important; background: none !important; box-shadow: none !important; font: 500 16px/1 var(--nx-sans) !important; color: var(--nx-ink) !important; outline: 0; }
.nx-search a { display: grid; place-items: center; width: 26px; height: 26px; border-radius: 50%; color: var(--nx-ink2); background: var(--nx-card2); text-decoration: none; font-size: 18px; }

/* --- Filtres --- */
.nx-band { padding-top: 26px !important; }
.nx-tabs { display: flex; flex-wrap: wrap; gap: 8px; margin: 0 0 26px; }
.nx-tabs a { display: inline-flex; align-items: center; gap: 8px; height: 38px; padding: 0 14px; border-radius: 999px; border: 1px solid var(--nx-line); background: var(--nx-card);
  font: 700 12px/1 var(--nx-sans); letter-spacing: .1em; text-transform: uppercase; color: var(--nx-ink2); text-decoration: none; transition: transform .2s, border-color .2s, background .2s, color .2s; }
.nx-tabs a i { width: 8px; height: 8px; border-radius: 50%; background: var(--t); box-shadow: 0 0 0 3px color-mix(in srgb, var(--t) 22%, transparent); }
.nx-tabs a small { display: inline-grid; place-items: center; min-width: 22px; height: 20px; padding: 0 6px; border-radius: 999px; background: var(--nx-card2); color: var(--nx-muted); font-size: 11px; letter-spacing: 0; }
.nx-tabs a:hover { transform: translateY(-1px); border-color: color-mix(in srgb, var(--t, var(--nx-gold)) 60%, transparent); color: var(--nx-ink); }
.nx-tabs a[aria-current] { color: #fff; background: color-mix(in srgb, var(--t, #b98320) 90%, #000); border-color: transparent; box-shadow: 0 10px 22px -12px var(--t, #b98320); }
.nx-tabs a[aria-current] i { background: #fff; }
.nx-tabs a[aria-current] small { background: rgba(255, 255, 255, .22); color: #fff; }
.nx-found { margin: -8px 0 22px; color: var(--nx-ink2); }

/* --- À la une : une grande + deux secondaires --- */
.nx-feature { display: grid; grid-template-columns: minmax(0, 1.65fr) minmax(0, 1fr); grid-template-rows: 1fr 1fr; gap: 18px; min-height: 480px; }
.nx-feature.is-solo { grid-template-columns: 1fr; grid-template-rows: 1fr; min-height: 440px; }
.nx-feature > .nx-lead:first-child { grid-row: span 2; }
.nx-feature:not(.is-solo):has(> .nx-lead:nth-child(2):last-child) { grid-template-rows: 1fr; }
.nx-lead { position: relative; isolation: isolate; display: flex; align-items: flex-end; min-height: 230px; overflow: hidden; border-radius: 20px; text-decoration: none; color: #fff;
  background: #0d0f14; box-shadow: var(--nx-shadow-hi); outline: 1px solid rgba(255, 255, 255, .06); outline-offset: -1px; }
.nx-lead > img { position: absolute; inset: 0; z-index: -2; width: 100%; height: 100%; object-fit: cover; transition: transform .9s cubic-bezier(.2, .7, .2, 1), filter .5s; }
.nx-lead::before { content: ""; position: absolute; inset: 0; z-index: -1; background: linear-gradient(180deg, rgba(8, 9, 13, 0) 25%, rgba(8, 9, 13, .55) 55%, rgba(8, 9, 13, .94) 100%),
  linear-gradient(90deg, color-mix(in srgb, var(--t) 30%, transparent), transparent 60%); }
.nx-lead::after { content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 3px; background: linear-gradient(90deg, var(--t), transparent); transform: scaleX(.25); transform-origin: left; transition: transform .6s; }
.nx-lead:hover > img { transform: scale(1.05); }
.nx-lead:hover::after { transform: scaleX(1); }
.nx-lead-txt { display: grid; gap: 12px; padding: 30px 32px; max-width: 760px; }
.nx-lead strong { font: 700 clamp(1.5rem, 2.6vw, 2.3rem)/1.15 var(--nx-serif); letter-spacing: .02em; color: #fff; text-shadow: 0 2px 18px rgba(0, 0, 0, .55); text-wrap: balance; }
.nx-lead.is-side strong { font-size: 1.22rem; }
.nx-lead.is-side .nx-lead-txt { padding: 22px 24px; gap: 10px; }
.nx-lead .nx-ex { font: 400 1.04rem/1.55 var(--nx-sans); color: rgba(255, 255, 255, .86); max-width: 62ch; display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; }
.nx-lead .nx-meta { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 16px; font: 500 13px/1.2 var(--nx-sans); color: rgba(255, 255, 255, .74); }
.nx-lead .nx-chg b { color: #fff; background: color-mix(in srgb, var(--c) 45%, rgba(0, 0, 0, .3)); border-color: color-mix(in srgb, var(--c) 70%, transparent); }
.nx-go { display: inline-flex; align-items: center; gap: 6px; margin-left: auto; padding: 9px 16px; border-radius: 999px; font: 700 12px/1 var(--nx-sans); letter-spacing: .1em; text-transform: uppercase;
  color: #2a1d03; background: linear-gradient(180deg, #ffe7a3, #e2b24a); box-shadow: 0 10px 24px -12px rgba(226, 178, 74, .9); }
.nx-go span { transition: transform .25s; }
a:hover .nx-go span { transform: translateX(4px); }

/* --- Grille de cartes --- */
.nx-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(290px, 1fr)); gap: 22px; }
.nx-grid.is-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.nx-card { position: relative; display: flex; flex-direction: column; overflow: hidden; border-radius: var(--nx-r); background: var(--nx-card); border: 1px solid var(--nx-line); text-decoration: none; color: var(--nx-ink);
  box-shadow: var(--nx-shadow); transition: transform .35s cubic-bezier(.2, .7, .2, 1), box-shadow .35s, border-color .35s; }
.nx-card::after { content: ""; position: absolute; left: 0; top: 0; bottom: 0; width: 3px; background: var(--t); opacity: 0; transition: opacity .3s; }
.nx-card:hover { transform: translateY(-6px); box-shadow: var(--nx-shadow-hi); border-color: color-mix(in srgb, var(--t) 55%, transparent); }
.nx-card:hover::after { opacity: 1; }
.nx-card-img { position: relative; display: block; aspect-ratio: 16 / 9; overflow: hidden; background: #0d0f14; }
.nx-card-img img { width: 100%; height: 100%; object-fit: cover; transition: transform .8s cubic-bezier(.2, .7, .2, 1); }
.nx-card:hover .nx-card-img img { transform: scale(1.07); }
.nx-card-img::after { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(0, 0, 0, .28), transparent 35%, transparent 70%, rgba(0, 0, 0, .25)); pointer-events: none; }
.nx-card-img .nx-tag { position: absolute; left: 12px; top: 12px; z-index: 1; }
.nx-card-img .nx-pill { position: absolute; left: 12px; bottom: 12px; z-index: 1; }
.nx-card-img .nx-day { z-index: 1; }
.nx-card-body { display: flex; flex-direction: column; gap: 9px; flex: 1; padding: 18px 20px 18px; }
.nx-card strong { font: 700 1.12rem/1.3 var(--nx-sans); color: var(--nx-ink); text-wrap: balance; }
.nx-card small { font: 400 .95rem/1.5 var(--nx-sans); color: var(--nx-muted); display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; }
.nx-card-foot { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin-top: auto; padding-top: 12px; border-top: 1px dashed var(--nx-line); font: 500 12.5px/1 var(--nx-sans); color: var(--nx-muted); }
.nx-card-foot > b { margin-left: auto; font: 700 12px/1 var(--nx-sans); letter-spacing: .1em; text-transform: uppercase; color: var(--nx-gold-d); }

/* --- Lecture d'une annonce --- */
.nx-progress { position: fixed; left: 0; right: 0; top: 0; z-index: 9999; height: 3px; pointer-events: none; }
.nx-progress i { display: block; height: 100%; background: linear-gradient(90deg, var(--nx-gold), #ffe7a3, var(--nx-gold)); transform: scaleX(0); transform-origin: left; box-shadow: 0 0 10px rgba(226, 178, 74, .7); }
.nx-art-hero { position: relative; isolation: isolate; display: flex; align-items: flex-end; min-height: min(560px, 70vh); overflow: hidden; background: #0d0f14; }
.nx-art-hero > img { position: absolute; inset: 0; z-index: -2; width: 100%; height: 100%; object-fit: cover; object-position: center 30%; animation: nx-ken 24s ease-out both; }
@keyframes nx-ken { from { transform: scale(1.08); } to { transform: scale(1); } }
.nx-art-hero::before { content: ""; position: absolute; inset: 0; z-index: -1;
  background: linear-gradient(180deg, rgba(8, 9, 13, .45) 0%, rgba(8, 9, 13, .15) 30%, rgba(8, 9, 13, .6) 62%, rgba(8, 9, 13, .95) 100%),
              linear-gradient(90deg, rgba(8, 9, 13, .7) 0%, rgba(8, 9, 13, .2) 60%, transparent 100%),
              radial-gradient(80% 60% at 0% 100%, color-mix(in srgb, var(--t) 35%, transparent), transparent 70%); }
html body.hx.skin-celeste .nx-art-hero::after { content: ""; position: absolute; left: 0; right: 0; bottom: -1px; height: 80px; z-index: -1; background: linear-gradient(0deg, var(--nx-bg), transparent); opacity: .0; }
.nx-art-in { width: 100%; padding: 120px 20px 54px; color: #fff; }
.nx-crumb { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin-bottom: 18px; font: 600 13px/1 var(--nx-sans); letter-spacing: .04em; }
html body.hx .nx-crumb a { color: rgba(255, 255, 255, .86) !important; text-decoration: none; }
html body.hx .nx-crumb a:hover { color: #fff !important; text-decoration: underline; }
.nx-crumb span { color: rgba(255, 255, 255, .4); }
html body.hx .nx-art-hero h1, html body.hx.skin-celeste .hx-main .nx-art-hero h1 {
  margin: 16px 0 18px !important; max-width: 22ch; font: 700 clamp(2rem, 4.6vw, 3.6rem)/1.08 var(--nx-serif) !important; letter-spacing: .02em !important; text-transform: none !important;
  color: #fff !important; -webkit-text-fill-color: #fff !important; background: none !important; text-shadow: 0 4px 30px rgba(0, 0, 0, .55) !important; text-wrap: balance; animation: none !important;
}
.nx-art-meta { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 22px; font: 500 14px/1.2 var(--nx-sans); color: rgba(255, 255, 255, .82); }
.nx-art-meta .nx-chg b { color: #fff; background: color-mix(in srgb, var(--c) 45%, rgba(0, 0, 0, .3)); border-color: color-mix(in srgb, var(--c) 70%, transparent); }
.nx-author { display: inline-flex; align-items: center; gap: 10px; }
.nx-author > b { display: grid; place-items: center; width: 34px; height: 34px; border-radius: 50%; font: 700 15px/1 var(--nx-serif); color: #2a1d03; background: linear-gradient(180deg, #ffe7a3, #e2b24a); box-shadow: 0 0 0 3px rgba(255, 255, 255, .18); }
.nx-author strong { color: #fff; }

.nx-art-layout { display: grid; grid-template-columns: minmax(0, 1fr) 320px; gap: 34px; align-items: start; margin-top: -34px; position: relative; z-index: 2; }
.nx-paper { padding: 44px 52px 34px; border-radius: 20px; background: var(--nx-card); border: 1px solid var(--nx-line); box-shadow: var(--nx-shadow-hi); }
html body.hx .nx-body { max-width: 70ch; font: 400 1.12rem/1.75 var(--nx-sans) !important; color: var(--nx-ink2) !important; }
html body.hx .nx-body > p { margin: 0 0 1.1em !important; }
html body.hx .nx-body > p:first-child { font-size: 1.24rem !important; line-height: 1.65 !important; color: var(--nx-ink) !important; }
html body.hx .nx-body > p:first-child::first-letter { float: left; margin: .06em .12em 0 0; font: 700 3.4em/.82 var(--nx-serif); color: var(--nx-gold); }
html body.hx .nx-body strong { color: var(--nx-ink) !important; }
html body.hx .nx-body a { color: var(--nx-gold-d) !important; text-decoration: underline; text-underline-offset: 3px; }
html body.hx .nx-body h2 { position: relative; margin: 1.8em 0 .7em !important; padding-left: 16px; font: 700 1.4rem/1.25 var(--nx-serif) !important; letter-spacing: .03em !important; text-transform: none !important; color: var(--nx-ink) !important; scroll-margin-top: 110px; }
html body.hx .nx-body h2::before { content: ""; position: absolute; left: 0; top: .2em; bottom: .2em; width: 4px; border-radius: 4px; background: linear-gradient(180deg, var(--nx-gold), color-mix(in srgb, var(--nx-gold) 30%, transparent)); }
html body.hx .nx-body img { max-width: 100%; height: auto; border-radius: 14px; box-shadow: var(--nx-shadow); }
html body.hx .nx-body blockquote { margin: 1.4em 0; padding: 16px 20px; border-left: 3px solid var(--nx-gold); border-radius: 0 12px 12px 0; background: color-mix(in srgb, var(--nx-gold) 8%, transparent); font-style: italic; }
.nx-changes { display: grid; gap: 8px; margin: 0 0 1.4em !important; padding: 0 !important; list-style: none !important; max-width: none; }
.nx-changes span::first-letter { text-transform: uppercase; }
.nx-changes li { display: grid; grid-template-columns: 104px minmax(0, 1fr); align-items: start; gap: 14px; margin: 0 !important; padding: 12px 16px; border-radius: 12px; line-height: 1.5;
  background: color-mix(in srgb, var(--c) 7%, var(--nx-card)); border: 1px solid color-mix(in srgb, var(--c) 22%, transparent); border-left: 4px solid var(--c); transition: transform .2s; }
.nx-changes li::before, .nx-changes li::marker { content: none !important; }
.nx-changes li:hover { transform: translateX(3px); }
.nx-changes i { justify-self: start; padding: 5px 9px; border-radius: 6px; font: 700 10.5px/1 var(--nx-sans); font-style: normal; letter-spacing: .12em; text-transform: uppercase; color: #fff; background: var(--c); margin-top: 2px; }
.nx-changes span { color: var(--nx-ink); }
.nx-edit { margin: 18px 0 0; font: italic 400 14px/1.4 var(--nx-sans); color: var(--nx-muted); }
.nx-share { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; margin-top: 28px; padding-top: 22px; border-top: 1px solid var(--nx-line); }
.nx-share > span { margin-right: 6px; font: 700 12px/1 var(--nx-sans); letter-spacing: .16em; text-transform: uppercase; color: var(--nx-muted); }
.nx-sbtn { display: inline-flex; align-items: center; gap: 8px; height: 40px; padding: 0 16px; border-radius: 999px; border: 1px solid var(--nx-line2); background: var(--nx-card2); color: var(--nx-ink);
  font: 700 13.5px/1 var(--nx-sans); text-decoration: none; cursor: pointer; transition: transform .2s, background .2s, border-color .2s, color .2s; }
.nx-sbtn:hover { transform: translateY(-2px); border-color: var(--nx-gold); color: var(--nx-gold-d); }
.nx-sbtn.is-ok { color: #fff; background: var(--c-add); border-color: var(--c-add); }
.nx-pn { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; margin-top: 22px; }
.nx-pn a { display: flex; align-items: center; gap: 14px; padding: 12px; border-radius: 16px; background: var(--nx-card); border: 1px solid var(--nx-line); text-decoration: none; color: var(--nx-ink); box-shadow: var(--nx-shadow); transition: transform .25s, border-color .25s; }
.nx-pn a:hover { transform: translateY(-3px); border-color: color-mix(in srgb, var(--t) 60%, transparent); }
.nx-pn a.is-next { flex-direction: row-reverse; text-align: right; }
.nx-pn img { flex: none; width: 96px; height: 64px; object-fit: cover; border-radius: 10px; }
.nx-pn small { display: block; margin-bottom: 4px; font: 700 11px/1 var(--nx-sans); letter-spacing: .14em; text-transform: uppercase; color: var(--nx-gold-d); }
.nx-pn strong { font: 700 1rem/1.3 var(--nx-sans); display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.nx-pn a.is-prev small::before { content: "← "; }
.nx-pn a.is-next small::after { content: " →"; }

.nx-side { position: sticky; top: 96px; display: grid; gap: 18px; }
.nx-box { padding: 22px; border-radius: 18px; background: var(--nx-card); border: 1px solid var(--nx-line); box-shadow: var(--nx-shadow); }
html body.hx .nx-box h2 { margin: 0 0 14px !important; font: 700 .9rem/1 var(--nx-serif) !important; letter-spacing: .16em !important; text-transform: uppercase; color: var(--nx-ink) !important; }
.nx-toc ol { margin: 0; padding: 0; list-style: none; counter-reset: toc; display: grid; gap: 2px; }
.nx-toc li { counter-increment: toc; }
.nx-toc a { display: flex; gap: 10px; padding: 8px 10px; border-radius: 10px; font: 500 14.5px/1.35 var(--nx-sans); color: var(--nx-ink2); text-decoration: none; transition: background .2s, color .2s; }
.nx-toc a::before { content: counter(toc, decimal-leading-zero); font: 700 12px/1.6 var(--nx-sans); color: var(--nx-gold); }
.nx-toc a:hover, .nx-toc a.is-on { background: color-mix(in srgb, var(--nx-gold) 12%, transparent); color: var(--nx-ink); }
.nx-toc a.is-on { box-shadow: inset 3px 0 0 var(--nx-gold); }
.nx-sum ul { margin: 0 0 14px; padding: 0; list-style: none; display: grid; gap: 8px; }
.nx-sum li { display: flex; align-items: center; gap: 10px; padding: 9px 12px; border-radius: 10px; background: color-mix(in srgb, var(--c) 9%, transparent); font: 600 14px/1 var(--nx-sans); color: var(--nx-ink); }
.nx-sum li i { width: 10px; height: 10px; border-radius: 3px; background: var(--c); }
.nx-sum li b { margin-left: auto; font: 700 1.15rem/1 var(--nx-serif); color: var(--c); }
.nx-sum > a { font: 700 13px/1 var(--nx-sans); color: var(--nx-gold-d); text-decoration: none; }
.nx-cta { text-align: center; background: radial-gradient(120% 80% at 50% 0%, color-mix(in srgb, var(--nx-gold) 14%, var(--nx-card)), var(--nx-card)); }
.nx-cta img { width: 70%; height: auto; filter: drop-shadow(0 12px 18px rgba(0, 0, 0, .3)); }
.nx-cta p { margin: 8px 0 16px; font: 400 15px/1.5 var(--nx-sans); color: var(--nx-ink2); }
.nx-cta .btn { width: 100%; }
.nx-more { margin-top: 30px; margin-bottom: 30px; }

/* --- Bloc « Actualités » de l'accueil --- */
html body.hx .nxh .nxh-lead { position: relative; isolation: isolate; display: flex; align-items: flex-end; min-height: 300px; margin-top: 4px; overflow: hidden; border-radius: 16px; text-decoration: none; color: #fff; background: #0d0f14; box-shadow: var(--nx-shadow); }
.nxh-lead > img { position: absolute; inset: 0; z-index: -2; width: 100%; height: 100%; object-fit: cover; transition: transform .9s cubic-bezier(.2, .7, .2, 1); }
.nxh-lead::before { content: ""; position: absolute; inset: 0; z-index: -1; background: linear-gradient(180deg, rgba(8, 9, 13, 0) 20%, rgba(8, 9, 13, .6) 55%, rgba(8, 9, 13, .95) 100%), linear-gradient(90deg, color-mix(in srgb, var(--t) 28%, transparent), transparent 55%); }
.nxh-lead:hover > img { transform: scale(1.05); }
.nxh-lead-txt { display: grid; gap: 10px; padding: 24px 26px; width: 100%; }
html body.hx .nxh-lead strong { font: 700 1.55rem/1.18 var(--nx-serif); letter-spacing: .02em; color: #fff !important; -webkit-text-fill-color: #fff; text-shadow: 0 2px 16px rgba(0, 0, 0, .5); text-wrap: balance; }
.nxh-lead .nx-ex { font: 400 1rem/1.5 var(--nx-sans); color: rgba(255, 255, 255, .86); display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.nxh-lead .nx-meta { display: flex; align-items: center; flex-wrap: wrap; gap: 8px 14px; font: 500 13px/1 var(--nx-sans); color: rgba(255, 255, 255, .75); }
.nxh-list { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 14px; margin: 14px 0 0; padding: 0; list-style: none; }
.nxh-list a { display: flex; flex-direction: column; height: 100%; overflow: hidden; border-radius: 14px; background: var(--nx-card); border: 1px solid var(--nx-line); text-decoration: none; color: var(--nx-ink);
  transition: transform .3s cubic-bezier(.2, .7, .2, 1), box-shadow .3s, border-color .3s; }
.nxh-list a:hover { transform: translateY(-4px); box-shadow: var(--nx-shadow-hi); border-color: color-mix(in srgb, var(--t) 55%, transparent); }
.nxh-thumb { position: relative; display: block; aspect-ratio: 16 / 9; overflow: hidden; }
.nxh-thumb img { width: 100%; height: 100%; object-fit: cover; transition: transform .7s; }
.nxh-list a:hover .nxh-thumb img { transform: scale(1.08); }
.nxh-thumb .nx-tag { position: absolute; left: 8px; top: 8px; padding: 3px 8px 3px 6px; font-size: 9.5px; }
.nxh-body { display: grid; gap: 6px; padding: 11px 12px 13px; }
html body.hx .nxh-body strong { font: 700 .98rem/1.3 var(--nx-sans); color: var(--nx-ink) !important; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.nxh-body small { font: 500 12.5px/1.2 var(--nx-sans); color: var(--nx-muted); }
.nxh-cats { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; margin-top: 14px; padding-top: 14px; border-top: 1px dashed var(--nx-line); }
.nxh-cats a { display: inline-flex; align-items: center; gap: 6px; padding: 6px 10px; border-radius: 999px; font: 700 11px/1 var(--nx-sans); letter-spacing: .08em; text-transform: uppercase; color: var(--nx-ink2); text-decoration: none; border: 1px solid var(--nx-line); transition: border-color .2s, color .2s; }
.nxh-cats a i { width: 7px; height: 7px; border-radius: 50%; background: var(--t); }
.nxh-cats a:hover { color: var(--nx-ink); border-color: var(--t, var(--nx-gold)); }
.nxh-cats a.is-pn { margin-left: auto; border-color: transparent; color: var(--nx-gold-d); }

/* =========================================================
   3. Finitions générales
   ========================================================= */
html { scroll-behavior: smooth; }
html body.hx :is(a, button, input, select, textarea, summary):focus-visible { outline: 2px solid var(--nx-gold) !important; outline-offset: 3px !important; border-radius: 6px; }
html body.hx .btn, html body.hx .hx-btn { transition: transform .2s cubic-bezier(.2, .7, .2, 1), box-shadow .25s, filter .2s; }
html body.hx .btn:not(:disabled):hover, html body.hx .hx-btn:hover { transform: translateY(-2px); filter: saturate(1.08) brightness(1.03); }
html body.hx .btn:not(:disabled):active, html body.hx .hx-btn:active { transform: translateY(0); }
html body.hx :is(.fcard, .prod, .char, .bx-lgtiles a, .lg-tiles a) { transition: transform .35s cubic-bezier(.2, .7, .2, 1), box-shadow .35s, border-color .35s; }
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .nx-art-hero > img, .nx-pill.is-new { animation: none !important; }
  .nx-lead > img, .nx-card-img img, .nxh-lead > img, .nxh-thumb img { transition: none !important; }
}

/* =========================================================
   Écrans moyens et petits
   ========================================================= */
@media (max-width: 1100px) {
  .nx-art-layout { grid-template-columns: 1fr; margin-top: -24px; }
  .nx-side { position: static; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); }
  .nx-feature { grid-template-columns: 1fr 1fr; grid-template-rows: auto auto; min-height: 0; }
  .nx-feature > .nx-lead:first-child { grid-column: 1 / -1; grid-row: auto; min-height: 420px; }
  .nx-feature.is-solo > .nx-lead:first-child { min-height: 380px; }
}
@media (max-width: 860px) {
  .nx-hero-in { grid-template-columns: 1fr; gap: 22px; }
  .nx-grid.is-3 { grid-template-columns: 1fr 1fr; }
  .nxh-list { grid-template-columns: 1fr 1fr 1fr; gap: 10px; }
}
@media (max-width: 640px) {
  html body.hx .nx-hero { padding: 46px 0 34px; }
  .nx-tabs { flex-wrap: nowrap; overflow-x: auto; margin-inline: -20px; padding: 2px 20px 8px; scrollbar-width: none; }
  .nx-tabs::-webkit-scrollbar { display: none; }
  .nx-tabs a { flex: none; }
  .nx-feature { grid-template-columns: 1fr; gap: 14px; }
  .nx-feature > .nx-lead:first-child { min-height: 380px; }
  .nx-lead { min-height: 220px; border-radius: 16px; }
  .nx-lead-txt { padding: 20px; }
  .nx-go { margin-left: 0; }
  .nx-grid, .nx-grid.is-3 { grid-template-columns: 1fr; gap: 16px; }
  .nx-art-hero { min-height: 440px; }
  .nx-art-in { padding: 90px 16px 46px; }
  .nx-paper { padding: 26px 20px 22px; border-radius: 16px; }
  html body.hx .nx-body { font-size: 1.05rem !important; }
  .nx-changes li { grid-template-columns: 1fr; gap: 6px; }
  .nx-pn { grid-template-columns: 1fr; }
  .nx-pn a.is-next { flex-direction: row; text-align: left; }
  .nx-side { grid-template-columns: 1fr; }
  html body.hx .nxh .nxh-lead { min-height: 260px; }
  .nxh-lead-txt { padding: 18px; }
  html body.hx .nxh-lead strong { font-size: 1.28rem; }
  .nxh-list { grid-template-columns: 1fr; }
  .nxh-list a { flex-direction: row; align-items: center; }
  .nxh-thumb { flex: none; width: 120px; aspect-ratio: 4 / 3; }
  .nxh-thumb .nx-tag { display: none; }
  .nxh-cats a.is-pn { margin-left: 0; }
}

/* --- Admin (style Céleste) : cartes d'images et sélecteurs en version claire --- */
html body.hx.skin-celeste :is(.artslot, .homeclass-form) { background: var(--nx-card) !important; box-shadow: var(--nx-shadow) !important; border-color: var(--nx-line) !important; border-radius: 14px !important; }
html body.hx.skin-celeste .artslot-prev { background: var(--nx-card2) !important; }
html body.hx.skin-celeste .artslot-body strong { color: var(--nx-ink) !important; }
html body.hx.skin-celeste .artslot .file { color: var(--nx-ink2) !important; }
html body.hx.skin-celeste .preset-pick { background: var(--nx-card2) !important; }
html body.hx.skin-celeste .preset { color: var(--nx-ink2) !important; }
html body.hx.skin-celeste .bn-card { background: var(--nx-card) !important; box-shadow: var(--nx-shadow); }

/* --- Bloc Actualités : s'adapte au nombre d'annonces (1, 2 ou 3 sous la une) --- */
.nxh-ex { display: none; font: 400 .95rem/1.5 var(--nx-sans); font-style: normal; color: var(--nx-muted); }
.nxh-list.is-n1 { grid-template-columns: 1fr; }
.nxh-list.is-n1 a { flex-direction: row; align-items: stretch; }
.nxh-list.is-n1 .nxh-thumb { flex: none; width: 42%; aspect-ratio: auto; min-height: 150px; }
.nxh-list.is-n1 .nxh-body { align-content: center; gap: 8px; padding: 18px 22px; }
html body.hx .nxh-list.is-n1 .nxh-body strong { font-size: 1.15rem; }
.nxh-list.is-n1 .nxh-ex { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.nxh-list.is-n2 { grid-template-columns: 1fr 1fr; }
.nxh-list.is-n2 .nxh-ex { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; font-size: .9rem; }
@media (max-width: 640px) {
  .nxh-list.is-n1 .nxh-thumb { width: 120px; min-height: 0; }
  .nxh-list.is-n1 .nxh-body { padding: 11px 12px 13px; }
  .nxh-list .nxh-ex { display: none !important; }
  .nxh-list.is-n2 { grid-template-columns: 1fr; }
}

/* --- Raccourcis illustrés de l'accueil (Classement, Génération, Boutique, Forum) : texte lisible --- */
html body.hx :is(.lg-tiles, .bx-lgtiles) a::after,
html body.hx.skin-celeste.skin-celeste :is(.lg-tiles, .bx-lgtiles) a::after {
  background: linear-gradient(180deg, rgba(10, 13, 22, .12) 0%, rgba(10, 13, 22, .35) 35%, rgba(10, 13, 22, .82) 72%, rgba(10, 13, 22, .94) 100%) !important;
  transition: opacity .3s;
}
html body.hx :is(.lg-tiles, .bx-lgtiles) span { left: 14px !important; right: 14px !important; bottom: 12px !important; }
html body.hx :is(.lg-tiles, .bx-lgtiles) b {
  color: #fff !important; -webkit-text-fill-color: #fff !important; font-weight: 700 !important; font-size: 17px !important; letter-spacing: .08em;
  text-shadow: 0 1px 2px rgba(0, 0, 0, .9), 0 2px 12px rgba(0, 0, 0, .85), 0 0 24px rgba(0, 0, 0, .6) !important;
}
html body.hx :is(.lg-tiles, .bx-lgtiles) small {
  color: #fff !important; opacity: .95; font-weight: 600 !important; font-size: 12.5px !important;
  text-shadow: 0 1px 2px rgba(0, 0, 0, .95), 0 0 12px rgba(0, 0, 0, .8) !important;
}
html body.hx :is(.lg-tiles, .bx-lgtiles) a:hover b { color: #ffe9b4 !important; -webkit-text-fill-color: #ffe9b4 !important; }

/* =========================================================
   Forum : accueil (sections, forums, vignettes ou icônes)
   ========================================================= */
html body.hx .fx-board { margin-bottom: 26px; border: 1px solid var(--nx-line) !important; border-radius: 18px !important; overflow: hidden; background: var(--nx-card) !important; box-shadow: var(--nx-shadow) !important; }
html body.hx .fx-board .board-h { position: relative; align-items: center; padding: 16px 22px !important; border-bottom: 1px solid var(--nx-line) !important; }
html body.hx .fx-board .board-h h2 { display: flex; align-items: center; gap: 12px; font: 700 1.05rem/1.2 var(--nx-serif) !important; letter-spacing: .1em !important; text-transform: uppercase; }
html body.hx .fx-board .board-h h2::before { content: ""; width: 10px; height: 10px; transform: rotate(45deg); background: linear-gradient(135deg, #ffe7a3, var(--nx-gold)); box-shadow: 0 0 0 3px color-mix(in srgb, var(--nx-gold) 18%, transparent); }
html body.hx .fx-board .board-h span { padding: 5px 11px; border-radius: 999px; background: color-mix(in srgb, var(--nx-gold) 12%, transparent); color: var(--nx-gold-d) !important; font: 700 12px/1 var(--nx-sans) !important; }
html body.hx .fx-board .board-cols { display: none !important; }

html body.hx .fx-board .board-row { position: relative; display: grid; grid-template-columns: 132px minmax(0, 1fr) 64px 72px 210px; align-items: center; column-gap: 16px; padding: 16px 22px !important;
  border-bottom: 1px solid var(--nx-line) !important; background: transparent; transition: background .25s; }
html body.hx .fx-board.is-noimg .board-row, html body.hx .fx-board .board-row.no-thumb { grid-template-columns: 56px minmax(0, 1fr) 64px 72px 210px; }
html body.hx .fx-board .board-row:last-child { border-bottom: 0 !important; }
html body.hx .fx-board .board-row::before { content: ""; position: absolute; left: 0; top: 12px; bottom: 12px; width: 4px; border-radius: 0 4px 4px 0; background: var(--k); transform: scaleY(0); transition: transform .3s cubic-bezier(.2, .7, .2, 1); }
html body.hx .fx-board .board-row:hover { background: color-mix(in srgb, var(--k) 6%, transparent) !important; }
html body.hx .fx-board .board-row:hover::before { transform: scaleY(1); }

html body.hx .fx-board .board-thumb { position: relative; display: block; width: 132px; height: 76px; border-radius: 12px; overflow: hidden; border: 0 !important;
  box-shadow: 0 12px 24px -14px rgba(0, 0, 0, .6), inset 0 0 0 1px rgba(255, 255, 255, .12) !important; }
html body.hx .fx-board .board-thumb::after { content: ""; position: absolute; inset: 0; border-radius: inherit; box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .18), inset 0 -24px 30px -20px color-mix(in srgb, var(--k) 60%, transparent); pointer-events: none; }
html body.hx .fx-board .board-thumb img { width: 100%; height: 100%; object-fit: cover; transition: transform .7s cubic-bezier(.2, .7, .2, 1); }
html body.hx .fx-board .board-row:hover .board-thumb img { transform: scale(1.08); }
.board-ico { display: grid; place-items: center; width: 56px; height: 56px; border-radius: 16px; text-decoration: none;
  background: linear-gradient(160deg, color-mix(in srgb, var(--k) 22%, var(--nx-card)), color-mix(in srgb, var(--k) 8%, var(--nx-card)));
  border: 1px solid color-mix(in srgb, var(--k) 40%, transparent); box-shadow: 0 10px 20px -12px var(--k); transition: transform .3s; }
.board-ico img { width: 30px; height: 30px; object-fit: contain; filter: drop-shadow(0 2px 4px rgba(0, 0, 0, .25)); }
.board-row:hover .board-ico { transform: rotate(-4deg) scale(1.06); }

html body.hx .fx-board .board-main h3 { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 8px; margin: 0 !important; font: 700 1.04rem/1.25 var(--nx-serif) !important; letter-spacing: .03em !important; }
html body.hx .fx-board .board-main h3 a { color: var(--nx-ink) !important; text-decoration: none; }
html body.hx .fx-board .board-main h3 a::after { content: ""; position: absolute; inset: 0; }   /* toute la ligne est cliquable */
html body.hx .fx-board .board-main h3 a:hover { color: var(--k) !important; }
html body.hx .fx-board .board-main p { margin: 5px 0 0 !important; font: 400 .95rem/1.5 var(--nx-sans) !important; color: var(--nx-muted) !important; }
.fx-new { display: inline-flex; align-items: center; gap: 5px; padding: 3px 8px; border-radius: 999px; font: 700 10px/1 var(--nx-sans); letter-spacing: .1em; text-transform: uppercase; color: #fff; background: linear-gradient(180deg, #2bb0a0, #157a74); }
.fx-new::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: #fff; animation: nx-pulse 2s infinite; }

html body.hx .fx-board .board-num { position: relative; z-index: 1; display: grid; justify-items: center; gap: 3px; padding: 8px 4px; border-radius: 12px; background: color-mix(in srgb, var(--nx-gold) 6%, transparent); pointer-events: none; }
html body.hx .fx-board .board-num b { font: 700 1.25rem/1 var(--nx-serif) !important; color: var(--nx-ink) !important; }
html body.hx .fx-board .board-num small { display: block !important; font: 600 10.5px/1 var(--nx-sans) !important; letter-spacing: .1em; text-transform: uppercase; color: var(--nx-muted) !important; }
html body.hx .fx-board .board-last { position: relative; z-index: 1; display: flex; align-items: center; gap: 10px; min-width: 0; padding: 10px 12px !important; border: 1px solid var(--nx-line) !important; border-radius: 14px; background: color-mix(in srgb, var(--nx-card2) 70%, transparent); }
html body.hx .fx-board .board-last > span { display: grid; gap: 3px; min-width: 0; }
html body.hx .fx-board .board-last a { color: var(--nx-ink) !important; font: 700 .9rem/1.25 var(--nx-sans) !important; text-decoration: none; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
html body.hx .fx-board .board-last a:hover { color: var(--k) !important; text-decoration: underline; }
html body.hx .fx-board .board-last small { font: 500 .8rem/1.2 var(--nx-sans) !important; color: var(--nx-muted) !important; }
html body.hx .fx-board .board-last small b { color: var(--nx-ink2); }
.fx-empty { font: italic 400 .86rem/1.35 var(--nx-sans); color: var(--nx-muted); }
html body.hx .fx-board .board-num:nth-of-type(n) { padding: 8px 2px; }
html body.hx .fx-empty a { font-style: normal !important; color: var(--nx-gold-d) !important; white-space: normal !important; }

/* barre latérale : raccourcis illustrés lisibles */
html body.hx .board-banners a { border-radius: 14px !important; }
html body.hx .board-banners a::before { background: linear-gradient(90deg, rgba(10, 13, 22, .9) 0%, rgba(10, 13, 22, .62) 55%, rgba(10, 13, 22, .2) 100%) !important; opacity: 1 !important; }
html body.hx .board-banners b { color: #fff !important; -webkit-text-fill-color: #fff !important; text-shadow: 0 2px 10px rgba(0, 0, 0, .9) !important; }
html body.hx .board-banners small { color: rgba(255, 255, 255, .92) !important; font-weight: 600; text-shadow: 0 1px 6px rgba(0, 0, 0, .95) !important; }

@media (max-width: 1100px) {
  html body.hx .fx-board .board-row, html body.hx .fx-board.is-noimg .board-row, html body.hx .fx-board .board-row.no-thumb { grid-template-columns: auto minmax(0, 1fr) 70px 80px; row-gap: 12px; }
  html body.hx .fx-board .board-last { grid-column: 2 / -1; }
}
@media (max-width: 640px) {
  html body.hx .fx-board .board-row, html body.hx .fx-board.is-noimg .board-row, html body.hx .fx-board .board-row.no-thumb { grid-template-columns: auto minmax(0, 1fr); padding: 14px 16px !important; column-gap: 14px; }
  html body.hx .fx-board .board-thumb { width: 96px; height: 60px; }
  .board-ico { width: 48px; height: 48px; border-radius: 13px; }
  html body.hx .fx-board .board-num { display: none !important; }
  html body.hx .fx-board .board-last { grid-column: 1 / -1; }
  html body.hx .fx-board .board-h { flex-wrap: wrap; }
}

/* --- Forum v2 : sans icônes, titres avec lettrine dorée --- */
html body.hx .fx-board .board-h h2::before { content: none !important; display: none !important; }
html body.hx .fx-board .board-h { background: linear-gradient(90deg, color-mix(in srgb, var(--nx-gold) 16%, var(--nx-card)), var(--nx-card) 75%) !important; }
html body.hx .fx-board .board-h h2 { font: 700 1.12rem/1.2 var(--nx-serif) !important; letter-spacing: .14em !important; }
html body.hx .fx-board .board-h h2::after { content: ""; display: block; width: 46px; height: 2px; margin-left: 4px; background: linear-gradient(90deg, var(--nx-gold), transparent); }
html body.hx .fx-board .board-row.no-thumb, html body.hx .fx-board.is-noimg .board-row { grid-template-columns: minmax(0, 1fr) 64px 72px 210px !important; padding-left: 28px !important; }
html body.hx .fx-board .board-main h3 { font: 700 1.14rem/1.2 var(--nx-serif) !important; letter-spacing: .04em !important; text-transform: none; }
html body.hx .fx-board .board-main h3 a { text-transform: uppercase; }
.fx-cap {
  display: inline-block; margin-right: 1px; font: 700 1.75em/.9 "Cinzel Decorative", var(--nx-serif); vertical-align: -.08em;
  background: linear-gradient(180deg, #fff1c4 0%, #f0c76a 32%, #b98320 62%, #7c540c 100%); -webkit-background-clip: text; background-clip: text;
  color: transparent !important; -webkit-text-fill-color: transparent !important;
  filter: drop-shadow(0 1px 0 rgba(255, 255, 255, .5)) drop-shadow(0 2px 3px rgba(124, 84, 12, .35));
  transition: filter .3s, transform .3s;
}
html body.hx:not(.skin-celeste) .fx-cap { filter: drop-shadow(0 0 8px rgba(226, 178, 90, .45)); }
.board-row:hover .fx-cap { transform: translateY(-1px); filter: drop-shadow(0 1px 0 rgba(255, 255, 255, .5)) drop-shadow(0 0 10px rgba(226, 178, 74, .7)); }
html body.hx .fx-board .board-main h3 a:hover { color: var(--nx-gold-d) !important; }
html body.hx .fx-board .board-main p { margin-top: 6px !important; font-size: 1rem !important; }
@media (max-width: 1100px) { html body.hx .fx-board .board-row.no-thumb, html body.hx .fx-board.is-noimg .board-row { grid-template-columns: minmax(0, 1fr) 64px 72px !important; } html body.hx .fx-board .board-row.no-thumb .board-last, html body.hx .fx-board.is-noimg .board-last { grid-column: 1 / -1; } }
@media (max-width: 640px) { html body.hx .fx-board .board-row.no-thumb, html body.hx .fx-board.is-noimg .board-row { grid-template-columns: 1fr !important; padding-left: 16px !important; } }

/* --- Forum : bannière, recherche, chiffres, « Qui est en ligne », colonne de droite --- */
html body.hx .forum-hero .fsearch { display: flex; gap: 0; max-width: 560px; padding: 6px; border-radius: 16px; background: var(--nx-card); border: 1px solid var(--nx-line2); box-shadow: var(--nx-shadow-hi); }
html body.hx .forum-hero .fsearch input:not([type=hidden]) { flex: 1; border: 0 !important; background: transparent !important; box-shadow: none !important; font: 500 16px/1 var(--nx-sans) !important; padding: 0 14px !important; min-height: 46px; color: var(--nx-ink) !important; }
html body.hx .forum-hero .fsearch .btn { border-radius: 12px !important; min-height: 46px; }
html body.hx .fstats > div { border-radius: 16px !important; background: color-mix(in srgb, var(--nx-card) 88%, transparent) !important; border: 1px solid var(--nx-line) !important; backdrop-filter: blur(8px); box-shadow: var(--nx-shadow) !important; }
html body.hx .fstats dt { font: 700 11px/1 var(--nx-sans) !important; letter-spacing: .14em; text-transform: uppercase; color: var(--nx-muted) !important; }
html body.hx .fstats dd { font: 700 2rem/1 var(--nx-serif) !important; color: var(--nx-gold-d) !important; -webkit-text-fill-color: var(--nx-gold-d) !important; text-shadow: 0 1px 0 rgba(255, 255, 255, .6); }

html body.hx .board-stats { border-radius: 18px !important; overflow: hidden; border: 1px solid var(--nx-line) !important; box-shadow: var(--nx-shadow) !important; background: var(--nx-card) !important; }
html body.hx .board-stats .board-h { background: linear-gradient(90deg, color-mix(in srgb, var(--nx-gold) 16%, var(--nx-card)), var(--nx-card) 75%) !important; padding: 16px 22px !important; }
html body.hx .board-stats .board-h h2 { font: 700 1.12rem/1.2 var(--nx-serif) !important; letter-spacing: .14em !important; text-transform: uppercase; }
html body.hx .board-online { padding: 20px 22px !important; gap: 8px !important; }
html body.hx .board-online > a { padding: 6px 12px; border-radius: 999px; background: var(--nx-card2); border: 1px solid var(--nx-line); font-weight: 700; }
html body.hx .board-numbers dd { font: 700 1.5rem/1 var(--nx-serif) !important; color: var(--nx-ink) !important; }
html body.hx .board-numbers dt { font: 700 11px/1 var(--nx-sans) !important; letter-spacing: .12em; text-transform: uppercase; }

html body.hx .forum-side :is(.fside-box, .fme) { border-radius: 18px !important; border: 1px solid var(--nx-line) !important; box-shadow: var(--nx-shadow) !important; background: var(--nx-card) !important; }
html body.hx .forum-side .fside-box h3 { font: 700 .95rem/1.2 var(--nx-serif) !important; letter-spacing: .14em !important; text-transform: uppercase; color: var(--nx-ink) !important; padding-bottom: 12px; border-bottom: 1px solid var(--nx-line) !important; }
html body.hx .forum-side .fside-box h3::first-letter { font-size: 1.35em; color: var(--nx-gold); }
html body.hx .fside-list a, html body.hx .fside-top a, html body.hx .fside-team a { border-radius: 12px; transition: background .2s; }
html body.hx .fside-list a:hover, html body.hx .fside-top a:hover, html body.hx .fside-team a:hover { background: color-mix(in srgb, var(--nx-gold) 9%, transparent); }
html body.hx .board-banners a { min-height: 84px; }

/* =========================================================
   Accueil : vitrine des classes « Choisis ta voie »
   Mise en page éditoriale : liste des classes · grande illustration fondue
   devant un astrolabe doré · fiche typographique. Pas de boîtes.
   ========================================================= */
html, body { overflow-x: clip; }
.cv { --c: #5cb8ff; grid-column: 1 / -1; position: relative; isolation: isolate; margin: 70px 0 20px; }
.cv::before { content: ""; position: absolute; z-index: -2; left: calc(50% - 50vw); width: 100vw; top: -80px; bottom: -80px; pointer-events: none;
  background: radial-gradient(34% 46% at 47% 56%, color-mix(in srgb, var(--c) 22%, transparent), transparent 72%);
  transition: background 1s ease; }
.cv-head { display: grid; justify-items: center; gap: 12px; margin-bottom: 34px; text-align: center; }
.cv-over { display: flex; align-items: center; gap: 16px; margin: 0; font: 600 12px/1 var(--nx-sans); letter-spacing: .42em; text-transform: uppercase; color: var(--nx-gold-d); }
.cv-over i { width: 64px; height: 1px; background: linear-gradient(90deg, transparent, var(--nx-gold)); }
.cv-over i:last-child { transform: scaleX(-1); }
html body.hx .cv-title { margin: 0 !important; font: 500 clamp(1.8rem, 3.6vw, 2.7rem)/1.1 var(--nx-serif) !important; letter-spacing: .1em !important; text-transform: uppercase; color: var(--nx-ink) !important; }

.cv-grid { display: grid; grid-template-columns: 190px minmax(0, 1.05fr) minmax(0, 1fr); gap: 34px; align-items: center; }

/* liste des classes : un sommaire typographique */
.cv-list { display: grid; gap: 2px; align-self: center; padding-left: 14px; border-left: 1px solid var(--nx-line); }
.cv-list button { position: relative; display: flex; align-items: baseline; gap: 12px; padding: 6px 0 6px 6px; border: 0; background: none; cursor: pointer; text-align: left;
  font: 500 15px/1.2 var(--nx-serif); letter-spacing: .04em; color: var(--nx-muted); transition: color .25s, transform .35s cubic-bezier(.2, .7, .2, 1); }
.cv-list small { font: 600 10px/1 var(--nx-sans); letter-spacing: .1em; color: color-mix(in srgb, var(--nx-muted) 70%, transparent); font-variant-numeric: tabular-nums; }
.cv-list button::before { content: ""; position: absolute; left: -15.5px; top: 50%; width: 2px; height: 0; transform: translateY(-50%); background: var(--c); transition: height .35s cubic-bezier(.2, .7, .2, 1); }
.cv-list button:hover { color: var(--nx-ink); transform: translateX(3px); }
.cv-list button[aria-selected="true"] { color: var(--nx-ink); transform: translateX(6px); }
.cv-list button[aria-selected="true"] span { font-weight: 700; }
.cv-list button[aria-selected="true"] small { color: var(--c); }
.cv-list button[aria-selected="true"]::before { height: 70%; box-shadow: 0 0 10px var(--c); }
.cv-list button:focus-visible { outline: 1px solid var(--nx-gold) !important; outline-offset: 2px !important; }

/* scène : astrolabe, lueur, illustration fondue */
.cv-stagewrap { --px: 0; --py: 0; position: relative; aspect-ratio: 1 / 1.08; display: grid; place-items: center; }
.cv-astro { position: absolute; inset: -2%; width: 104%; height: 104%; z-index: -1; animation: cv-turn 90s linear infinite; opacity: .9;
  transform: translate(calc(var(--px) * -10px), calc(var(--py) * -10px)); }
@keyframes cv-turn { to { rotate: 1turn; } }
.cv-glow { position: absolute; inset: 14%; z-index: -1; border-radius: 50%; background: radial-gradient(circle, color-mix(in srgb, var(--c) 45%, transparent), transparent 68%); filter: blur(30px); transition: background 1s; }
.cv-art { position: absolute; inset: 4% 6% 0; margin: 0; transform: translate(calc(var(--px) * 14px), calc(var(--py) * 10px)); transition: transform .4s cubic-bezier(.2, .7, .2, 1); }
.cv-art[hidden] { display: none; }
.cv-art img { width: 100%; height: 100%; object-fit: cover; object-position: 50% 18%;
  -webkit-mask-image: radial-gradient(ellipse 50% 52% at 50% 46%, #000 58%, rgba(0, 0, 0, .55) 74%, transparent 100%);
  mask-image: radial-gradient(ellipse 50% 52% at 50% 46%, #000 58%, rgba(0, 0, 0, .55) 74%, transparent 100%);
  filter: saturate(1.08) contrast(1.04); }
.cv-art.is-in img { animation: cv-art-in 1s cubic-bezier(.2, .8, .2, 1) both; }
@keyframes cv-art-in { from { opacity: 0; transform: scale(1.06); filter: blur(8px) brightness(1.4); } to { opacity: 1; transform: none; filter: saturate(1.08) contrast(1.04); } }
.cv-dust { position: absolute; inset: 0; pointer-events: none; }
.cv-dust i { position: absolute; left: var(--x); top: var(--y); width: 3px; height: 3px; border-radius: 50%; background: #f6dc9a; box-shadow: 0 0 8px 2px rgba(226, 178, 74, .7); opacity: 0;
  animation: cv-dust var(--d) ease-in-out infinite; }
@keyframes cv-dust { 0%, 100% { opacity: 0; transform: translateY(0); } 50% { opacity: .9; transform: translateY(-26px); } }

/* fiche */
.cv-info { position: relative; }
.cv-panel[hidden] { display: none; }
.cv-kick { display: flex; align-items: center; gap: 14px; margin: 0; font: 600 11.5px/1 var(--nx-sans); letter-spacing: .32em; text-transform: uppercase; color: var(--nx-muted); }
.cv-kick i { width: 38px; height: 1px; background: var(--c); }
.cv-el { color: color-mix(in srgb, var(--c) 65%, var(--nx-ink)); }
html body.hx .cv-name { margin: 16px 0 0 !important; font: 600 clamp(2.6rem, 4.8vw, 4.1rem)/.98 var(--nx-serif) !important; letter-spacing: .02em !important; text-transform: uppercase;
  color: var(--nx-ink) !important; -webkit-text-fill-color: currentColor !important; background: none !important; text-shadow: none !important; }
html body.hx .cv-name::first-letter { color: var(--nx-gold); -webkit-text-fill-color: var(--nx-gold); }
.cv-desc { margin: 20px 0 0; max-width: 40ch; font: italic 400 1.2rem/1.6 var(--nx-sans); color: var(--nx-ink2); }

.cv-evo { position: relative; display: grid; grid-template-columns: repeat(var(--n), minmax(0, 1fr)); margin: 34px 0 0; padding: 0; list-style: none; max-width: 520px; }
.cv-evo::before { content: ""; position: absolute; left: 6px; right: 6px; top: 5px; height: 1px; background: linear-gradient(90deg, var(--nx-line2), var(--c)); }
.cv-evo li { position: relative; display: grid; gap: 12px; padding-right: 8px; }
.cv-evo i { width: 11px; height: 11px; transform: rotate(45deg); background: var(--nx-bg); border: 1px solid var(--nx-gold); }
.cv-evo li:last-child i { background: var(--c); border-color: var(--c); box-shadow: 0 0 0 4px color-mix(in srgb, var(--c) 18%, transparent), 0 0 14px var(--c); }
.cv-evo span { font: 500 13px/1.25 var(--nx-sans); color: var(--nx-muted); }
.cv-evo li:last-child span { color: var(--nx-ink); font-weight: 700; }

.cv-stats { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 18px 40px; margin: 34px 0 0; max-width: 520px; }
.cv-stats div { display: grid; grid-template-columns: 1fr auto; align-items: end; gap: 8px; }
.cv-stats dt { font: 600 11px/1 var(--nx-sans); letter-spacing: .26em; text-transform: uppercase; color: var(--nx-muted); }
.cv-stats dd { display: contents; }
.cv-stats b { font: 500 1.6rem/1 var(--nx-serif); color: var(--nx-ink); font-variant-numeric: tabular-nums; }
.cv-stats i { grid-column: 1 / -1; position: relative; height: 1px; background: var(--nx-line2); }
.cv-stats em { position: absolute; left: 0; top: -1px; height: 3px; width: 0; background: linear-gradient(90deg, var(--nx-gold), var(--c)); transition: width 1.2s cubic-bezier(.2, .7, .2, 1) .2s; }
.cv.is-seen .cv-panel:not([hidden]) .cv-stats em { width: var(--v); }

.cv-meta { display: flex; flex-wrap: wrap; gap: 6px 24px; margin: 26px 0 0; font: 400 14px/1.3 var(--nx-sans); color: var(--nx-muted); }
.cv-meta b { font: 600 1rem/1 var(--nx-serif); color: var(--nx-ink); margin-right: 3px; }
.cv-meta span + span { padding-left: 24px; border-left: 1px solid var(--nx-line2); }
.cv-skills { margin: 8px 0 0; font: italic 400 14px/1.4 var(--nx-sans); color: var(--nx-muted); }
.cv-skills::before { content: "Compétences — "; font-style: normal; letter-spacing: .08em; }
html[lang="en"] .cv-skills::before { content: "Skills — "; }

.cv-act { display: flex; flex-wrap: wrap; align-items: center; gap: 26px; margin-top: 34px; }
.cv-btn { position: relative; display: inline-grid; place-items: center; height: 54px; padding: 0 34px; text-decoration: none; isolation: isolate;
  font: 700 13px/1 var(--nx-sans); letter-spacing: .22em; text-transform: uppercase; color: #2a1d03 !important;
  background: linear-gradient(180deg, #ffe9b0, #e2b24a 55%, #b98320); clip-path: polygon(14px 0, calc(100% - 14px) 0, 100% 50%, calc(100% - 14px) 100%, 14px 100%, 0 50%);
  transition: filter .25s, transform .25s; }
.cv-btn::after { content: ""; position: absolute; inset: 2px; z-index: -1; clip-path: inherit; background: linear-gradient(180deg, rgba(255, 255, 255, .45), transparent 45%); }
.cv-btn:hover { filter: brightness(1.06) saturate(1.1); transform: translateY(-2px); }
.cv-link { font: 700 12.5px/1 var(--nx-sans); letter-spacing: .2em; text-transform: uppercase; color: var(--nx-ink) !important; text-decoration: none; padding-bottom: 6px;
  background: linear-gradient(var(--c), var(--c)) 0 100% / 30% 1px no-repeat; transition: background-size .35s; }
.cv-link:hover { background-size: 100% 1px; }
.cv-link span { display: inline-block; transition: transform .25s; }
.cv-link:hover span { transform: translateX(4px); }

/* entrée de la fiche */
.cv-panel.is-in > * { animation: cv-up .7s cubic-bezier(.2, .8, .2, 1) both; }
.cv-panel.is-in > :nth-child(2) { animation-delay: .06s; } .cv-panel.is-in > :nth-child(3) { animation-delay: .12s; } .cv-panel.is-in > :nth-child(4) { animation-delay: .18s; }
.cv-panel.is-in > :nth-child(5) { animation-delay: .24s; } .cv-panel.is-in > :nth-child(6) { animation-delay: .3s; } .cv-panel.is-in > :nth-child(n+7) { animation-delay: .36s; }
@keyframes cv-up { from { opacity: 0; transform: translateY(14px); } to { opacity: 1; transform: none; } }

@media (prefers-reduced-motion: reduce) { .cv-astro, .cv-dust i, .cv-art.is-in img, .cv-panel.is-in > * { animation: none !important; } .cv-stats em { transition: none; } }

@media (max-width: 1100px) {
  .cv-grid { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
  .cv-list { grid-column: 1 / -1; display: flex; gap: 4px 18px; overflow-x: auto; padding: 0 0 10px; border-left: 0; border-bottom: 1px solid var(--nx-line); scrollbar-width: none; }
  .cv-list::-webkit-scrollbar { display: none; }
  .cv-list button { flex: none; padding: 8px 2px; white-space: nowrap; }
  .cv-list button[aria-selected="true"], .cv-list button:hover { transform: none; }
  .cv-list button::before { left: 0; right: 0; top: auto; bottom: -11px; width: 0; height: 2px !important; margin: auto; transform: none; transition: width .35s; }
  .cv-list button[aria-selected="true"]::before { width: 100%; }
}
@media (max-width: 760px) {
  .cv { margin-top: 46px; }
  .cv-grid { grid-template-columns: 1fr; gap: 14px; }
  .cv-stagewrap { max-width: 420px; width: 100%; margin: 0 auto; }
  .cv-info { text-align: center; }
  .cv-kick { justify-content: center; }
  .cv-desc { margin-inline: auto; }
  .cv-evo, .cv-stats { margin-inline: auto; }
  .cv-evo span { font-size: 12px; }
  .cv-stats { text-align: left; gap: 16px 24px; }
  .cv-meta, .cv-act { justify-content: center; }
}
.cv-art { inset: 0; }
.cv-art img {
  -webkit-mask-image: radial-gradient(ellipse 47% 49% at 50% 50%, #000 48%, rgba(0, 0, 0, .6) 70%, transparent 100%);
  mask-image: radial-gradient(ellipse 47% 49% at 50% 50%, #000 48%, rgba(0, 0, 0, .6) 70%, transparent 100%);
}
.cv-astro { opacity: 1; }
@media (min-width: 1101px) { .cv-grid { grid-template-columns: 200px minmax(0, 1.05fr) minmax(0, 1fr); } }
.cv-list button { font-size: 14.5px; white-space: nowrap; }
/* même place que l'ancienne vitrine : après les Actualités et Le serveur */
.is-lgb .bx-grid > .cv { order: 4; }