/* ==========================================================================
   BLIZZΛRD — Feuille de style principale
   Univers : glace, métal, cristaux. Motif central : le chevron Λ (montée de rang).
   Sommaire : 1. Polices  2. Jetons  3. Base  4. Mise en page  5. En-tête & navigation
   6. Pied de page  7. Boutons  8. Formulaires  9. Panneaux  10. Puces & étiquettes
   11. Avatars & cadres  12. Jauges  13. Onglets & filtres  14. Listes & tableaux
   15. Notifications & toasts  16. Fil & publications  17. Forum  18. Profil
   19. Quêtes  20. Badges  21. Classements  22. Équipes  23. Tournois  24. Accueil
   25. Authentification  26. Pages éditoriales  27. Utilitaires  28. Animations
   ========================================================================== */

/* 1. Polices — Geologica (OFL), auto-hébergée, axes graisse + « netteté » (SHRP) */
@font-face {
  font-family: "Geologica";
  src: url("../fonts/geologica-latin.woff2") format("woff2");
  font-weight: 100 900;
  font-style: normal;
  font-display: swap;
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: "Geologica";
  src: url("../fonts/geologica-latin-ext.woff2") format("woff2");
  font-weight: 100 900;
  font-style: normal;
  font-display: swap;
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: "Geologica";
  src: url("../fonts/geologica-greek.woff2") format("woff2");
  font-weight: 100 900;
  font-style: normal;
  font-display: swap;
  unicode-range: U+0370-0377, U+037A-037F, U+0384-038A, U+038C, U+038E-03A1, U+03A3-03FF;
}

/* 2. Jetons de design */
:root {
  color-scheme: dark;
  --bg: #080A10;
  --bg-2: #111622;
  --bg-3: #161D2C;
  --bg-4: #1D2638;
  --bg-input: #0C1019;
  --line: #222C40;
  --line-strong: #33415C;
  --ice: #76D7FF;
  --ice-deep: #2F8FCB;
  --ice-soft: rgba(118, 215, 255, .12);
  --volt: #9475FF;
  --volt-soft: rgba(148, 117, 255, .14);
  --frost: #F4F7FF;
  --steel: #9BA6BA;
  --steel-dim: #7B879E;
  --gold: #FFC857;
  --mythic: #FF6FB5;
  --success: #5BE7A9;
  --danger: #FF5C7A;
  --danger-soft: rgba(255, 92, 122, .12);
  --warning: #FFC857;

  --r-commun: #9BA6BA;
  --r-rare: #76D7FF;
  --r-epique: #9475FF;
  --r-legendaire: #FFC857;
  --r-mythique: #FF6FB5;

  --font: "Geologica", "Segoe UI", system-ui, -apple-system, Roboto, "Helvetica Neue", Arial, sans-serif;
  --fs-xs: .75rem;    /* 12 */
  --fs-sm: .875rem;   /* 14 */
  --fs-base: 1rem;    /* 16 */
  --fs-md: 1.125rem;  /* 18 */
  --fs-lg: 1.3125rem; /* 21 */
  --fs-xl: 1.5rem;    /* 24 */
  --fs-2xl: 1.875rem; /* 30 */
  --fs-3xl: 2.25rem;  /* 36 */
  --fs-4xl: 3rem;     /* 48 */

  --gutter: 16px;
  --container: 1240px;
  --header-h: 64px;
  --tabbar-h: 64px;
  --cut: 14px;
  --ease-out: cubic-bezier(.2, .8, .2, 1);
}

@property --spin {
  syntax: "<angle>";
  inherits: false;
  initial-value: 0deg;
}

/* 3. Base */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; scroll-padding-top: calc(var(--header-h) + 16px); }
body {
  margin: 0;
  min-height: 100vh;
  background: var(--bg);
  color: var(--frost);
  font-family: var(--font);
  font-size: var(--fs-base);
  font-weight: 400;
  line-height: 1.6;
  font-variation-settings: "SHRP" 0;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  position: relative;
  isolation: isolate;
}
/* Treillis de givre (motif hexagonal des cristaux de glace), très discret */
body::before {
  content: "";
  position: fixed;
  inset: 0 0 auto 0;
  height: 560px;
  z-index: -1;
  pointer-events: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='56' height='97' viewBox='0 0 56 97'%3E%3Cpath d='M0 0l56 97M56 0L0 97M0 48.5h56' stroke='%2376D7FF' stroke-opacity='.07' stroke-width='1' fill='none'/%3E%3C/svg%3E");
  -webkit-mask-image: linear-gradient(to bottom, #000 0%, transparent 100%);
  mask-image: linear-gradient(to bottom, #000 0%, transparent 100%);
}
img, svg, video { display: block; max-width: 100%; }
img { height: auto; }
a { color: var(--ice); text-decoration: none; text-underline-offset: .2em; }
a:hover { text-decoration: underline; }
p { margin: 0 0 1em; }
ul, ol { margin: 0 0 1em; padding-left: 1.25em; }
h1, h2, h3, h4 {
  margin: 0 0 .5em;
  line-height: 1.15;
  font-weight: 750;
  font-variation-settings: "SHRP" 70;
  letter-spacing: -.01em;
  text-wrap: balance;
}
h1 { font-size: var(--fs-3xl); font-weight: 820; letter-spacing: -.02em; font-variation-settings: "SHRP" 100; }
h2, .h2 { font-size: var(--fs-xl); }
h3, .h3 { font-size: var(--fs-md); }
h4, .h4 { font-size: var(--fs-base); }
@media (min-width: 1024px) {
  h1 { font-size: var(--fs-4xl); }
  h2, .h2 { font-size: var(--fs-2xl); }
  h3, .h3 { font-size: var(--fs-lg); }
}
h1.h3 { font-weight: 750; letter-spacing: -.01em; font-variation-settings: "SHRP" 70; }
hr { border: 0; border-top: 1px solid var(--line); margin: 24px 0; }
button { font: inherit; color: inherit; }
::selection { background: rgba(118, 215, 255, .32); color: var(--frost); }
:focus-visible { outline: 2px solid var(--ice); outline-offset: 2px; }
[hidden] { display: none !important; }
code, kbd { font-family: ui-monospace, "Cascadia Mono", Consolas, monospace; font-size: .9em; background: var(--bg-4); padding: .1em .35em; }
.icon { width: 1.15em; height: 1.15em; flex: none; display: inline-block; vertical-align: -.2em; }
.skip-link {
  position: absolute; left: 16px; top: -60px; z-index: 200;
  background: var(--ice); color: #04121C; padding: 10px 16px; font-weight: 700;
}
.skip-link:focus { top: 12px; }
html { scrollbar-color: var(--line-strong) var(--bg); }

/* 4. Mise en page */
.container { width: 100%; max-width: var(--container); margin-inline: auto; padding-inline: var(--gutter); }
@media (min-width: 640px) { :root { --gutter: 24px; } }
@media (min-width: 1024px) { :root { --gutter: 32px; } }
.site-main { padding-block: 28px 64px; min-height: calc(100vh - var(--header-h) - 200px); }
@media (max-width: 1119px) { .site-main { padding-bottom: calc(var(--tabbar-h) + 48px + env(safe-area-inset-bottom)); } }

.page-head { display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between; gap: 16px 24px; margin-bottom: 28px; }
.page-head h1 { margin: 0; }
.page-head__lead { color: var(--steel); max-width: 62ch; margin: 8px 0 0; }
.page-head__actions { display: flex; flex-wrap: wrap; gap: 10px; }

.section { margin-block: 40px; }
.section-head { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; margin-bottom: 16px; }
.section-head h2 { margin: 0; font-size: var(--fs-lg); }
.section-head a { font-size: var(--fs-sm); font-weight: 600; }

.layout-split { display: grid; grid-template-columns: minmax(0, 1fr); gap: 24px; }
@media (min-width: 1024px) {
  .layout-split { grid-template-columns: minmax(0, 1fr) 340px; gap: 32px; align-items: start; }
  .layout-split--left { grid-template-columns: 260px minmax(0, 1fr); }
  .layout-split .aside-sticky { position: sticky; top: calc(var(--header-h) + 20px); }
}
.stack > * + * { margin-top: var(--stack, 16px); }
.cluster { display: flex; flex-wrap: wrap; align-items: center; gap: var(--gap, 10px); }
.grid { display: grid; gap: var(--gap, 16px); }
.grid--2 { grid-template-columns: repeat(auto-fill, minmax(min(100%, 420px), 1fr)); }
.grid--3 { grid-template-columns: repeat(auto-fill, minmax(min(100%, 300px), 1fr)); }
.form-grid { display: grid; gap: 0 20px; grid-template-columns: repeat(auto-fill, minmax(min(100%, 230px), 1fr)); }
.form-grid--wide { grid-template-columns: repeat(auto-fill, minmax(min(100%, 340px), 1fr)); }
.form-grid > .field--wide { grid-column: 1 / -1; }
.grid--4 { grid-template-columns: repeat(auto-fill, minmax(min(100%, 220px), 1fr)); }

/* 5. En-tête et navigation */
.site-header {
  position: sticky; top: 0; z-index: 60;
  background: rgba(8, 10, 16, .84);
  -webkit-backdrop-filter: saturate(150%) blur(14px);
  backdrop-filter: saturate(150%) blur(14px);
  border-bottom: 1px solid var(--line);
}
.site-header__inner { height: var(--header-h); display: flex; align-items: center; gap: 20px; }
.brand { display: inline-flex; align-items: center; gap: 10px; min-width: 0; color: var(--frost); font-weight: 850; font-size: 1.25rem; letter-spacing: .04em; font-variation-settings: "SHRP" 100; flex: 0 1 auto; }
.brand:hover { text-decoration: none; color: var(--frost); }
/* Logo : emblème d'origine (carré) ou logo envoyé dans l'administration (proportions libres) */
.brand__logo { display: block; flex: none; width: auto; height: 34px; max-width: 204px; object-fit: contain; }
.brand__name { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.brand-lambda {
  background: linear-gradient(135deg, var(--ice), var(--volt));
  -webkit-background-clip: text; background-clip: text;
  color: transparent;
}
.primary-nav { display: none; }
.primary-nav ul { list-style: none; margin: 0; padding: 0; display: flex; gap: 2px; }
/* Huit rubriques (dont « Trouve ton Mate » et « Pack ta Base ») : marges et corps resserrés, en-tête un peu plus large que
   le contenu sur grand écran (1 312 px au plus), pour garder la jauge d'XP (dès 1 280 px environ, selon la longueur du nom du
   site et la pastille des boosters) et la recherche des visiteurs (dès 1 280 px) ; un libellé n'est jamais coupé sur deux
   lignes : s'il manque de place, l'en-tête passe en mode compact (jauge et recherche en icône) */
.primary-nav a {
  position: relative; display: block; padding: 8px 4.5px; white-space: nowrap;
  color: var(--steel); font-weight: 600; font-size: .84375rem;
  font-variation-settings: "SHRP" 40;
}
.primary-nav a:hover { color: var(--frost); text-decoration: none; }
.primary-nav a[aria-current="page"] { color: var(--frost); }
.primary-nav a[aria-current="page"]::after {
  content: ""; position: absolute; left: 4.5px; right: 4.5px; bottom: -13px; height: 2px;
  background: var(--ice); box-shadow: 0 0 12px rgba(118, 215, 255, .6);
}
@media (min-width: 1120px) {
  .primary-nav { display: block; }
  .site-header .container { max-width: 1312px; }
}

.header-actions { margin-left: auto; display: flex; align-items: center; gap: 8px; }
.icon-btn {
  position: relative; display: inline-grid; place-items: center;
  width: 40px; height: 40px; color: var(--steel); background: transparent; border: 0; cursor: pointer;
}
.icon-btn:hover { color: var(--frost); background: var(--bg-3); text-decoration: none; }
.icon-btn .icon { width: 22px; height: 22px; }
.count-pip {
  position: absolute; top: 4px; right: 3px; min-width: 18px; height: 18px; padding: 0 5px;
  display: grid; place-items: center; background: var(--volt); color: #fff;
  font-size: 11px; font-weight: 750; line-height: 1; font-variant-numeric: tabular-nums;
  clip-path: polygon(0 0, calc(100% - 4px) 0, 100% 4px, 100% 100%, 4px 100%, 0 calc(100% - 4px));
}

/* Pastille dorée d'un lien du menu (boosters à ouvrir dans Pack ta Base) */
.nav-pip {
  display: inline-grid; place-items: center; min-width: 18px; height: 18px; padding: 0 5px; margin-left: 5px; vertical-align: 1px;
  background: var(--gold); color: #1A1204; font-size: 11px; font-weight: 800; line-height: 1; font-variant-numeric: tabular-nums;
  clip-path: polygon(0 0, calc(100% - 4px) 0, 100% 4px, 100% 100%, 4px 100%, 0 calc(100% - 4px));
}
.drawer nav .nav-pip { margin-left: auto; }
/* De 1 120 à 1 279 px, menu complet mais serré : la pastille devient un point (le nombre reste lu par les lecteurs
   d'écran), marges un peu réduites, pour que le nom du site tienne en entier */
@media (min-width: 1120px) and (max-width: 1279px) {
  .site-header__inner { gap: 14px; }
  .primary-nav a { padding-inline: 3.5px; }
  .primary-nav a[aria-current="page"]::after { left: 3.5px; right: 3.5px; }
  .primary-nav .nav-pip { min-width: 0; width: 8px; height: 8px; padding: 0; margin-left: 3px; font-size: 0; vertical-align: 5px; }
}

/* Jauge d'XP permanente dans l'en-tête */
.xp-chip { display: none; align-items: center; gap: 10px; padding: 6px 10px 6px 6px; color: var(--frost); }
.xp-chip:hover { background: var(--bg-3); text-decoration: none; }
.xp-chip__level {
  display: grid; place-items: center; min-width: 30px; height: 30px; padding: 0 6px;
  background: var(--volt); color: #fff; font-weight: 800; font-size: .875rem;
  font-variant-numeric: tabular-nums; font-variation-settings: "SHRP" 100;
  clip-path: polygon(0 0, calc(100% - 6px) 0, 100% 6px, 100% 100%, 6px 100%, 0 calc(100% - 6px));
}
.xp-chip__body { display: grid; gap: 4px; width: 92px; }
.xp-chip__label { font-size: 11px; line-height: 1; color: var(--steel); display: flex; justify-content: space-between; gap: 6px; }
/* Rang long (« Combattant », « … Immortel ») : coupé proprement, le pourcentage reste lisible */
.xp-chip__label > :first-child { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.xp-chip__label > :last-child { flex: none; white-space: nowrap; }
@media (min-width: 1180px) { .xp-chip { display: inline-flex; } }

/* Menus déroulants (details/summary : fonctionnent sans JavaScript) */
.dropdown { position: relative; }
.dropdown > summary { list-style: none; cursor: pointer; }
.dropdown > summary::-webkit-details-marker { display: none; }
.dropdown__panel {
  position: absolute; right: 0; top: calc(100% + 10px); z-index: 70;
  width: min(340px, calc(100vw - 24px));
  background: var(--bg-3); border: 1px solid var(--line-strong);
  box-shadow: 0 24px 48px -12px rgba(0, 0, 0, .7);
  animation: drop-in .16s var(--ease-out);
}
.dropdown__panel--sm { width: 240px; }
.dropdown__head { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 12px 14px; border-bottom: 1px solid var(--line); }
.dropdown__head strong { font-size: var(--fs-sm); }
.dropdown__foot { border-top: 1px solid var(--line); padding: 10px 14px; text-align: center; font-size: var(--fs-sm); }
.menu-list { list-style: none; margin: 0; padding: 6px; }
.menu-list a, .menu-list button {
  display: flex; align-items: center; gap: 10px; width: 100%;
  padding: 9px 10px; color: var(--frost); background: none; border: 0; text-align: left;
  font-size: var(--fs-sm); font-weight: 500; cursor: pointer;
}
.menu-list a:hover, .menu-list button:hover { background: var(--bg-4); text-decoration: none; }
.menu-list .icon { color: var(--steel); }
.menu-list hr { margin: 6px 0; }
.user-trigger { display: flex; align-items: center; gap: 8px; padding: 4px; }
.user-trigger:hover { background: var(--bg-3); }
.user-card { display: flex; align-items: center; gap: 12px; padding: 14px; border-bottom: 1px solid var(--line); }
.user-card strong { display: block; font-size: var(--fs-base); }
.user-card span { font-size: var(--fs-xs); color: var(--steel); }

/* Barre d'onglets mobile */
.tabbar {
  position: fixed; left: 0; right: 0; bottom: 0; z-index: 60;
  display: grid; grid-template-columns: repeat(5, 1fr);
  height: calc(var(--tabbar-h) + env(safe-area-inset-bottom));
  padding-bottom: env(safe-area-inset-bottom);
  background: rgba(8, 10, 16, .94);
  -webkit-backdrop-filter: blur(14px); backdrop-filter: blur(14px);
  border-top: 1px solid var(--line);
}
.tabbar a, .tabbar button {
  position: relative; display: grid; place-items: center; align-content: center; gap: 3px;
  color: var(--steel); font-size: 11px; font-weight: 600; background: none; border: 0; cursor: pointer;
}
.tabbar a:hover { text-decoration: none; color: var(--frost); }
.tabbar .icon { width: 22px; height: 22px; }
.tabbar [aria-current="page"] { color: var(--ice); }
.tabbar [aria-current="page"]::before {
  content: ""; position: absolute; top: -1px; left: 30%; right: 30%; height: 2px; background: var(--ice);
}
@media (min-width: 1120px) { .tabbar { display: none; } }

.drawer {
  position: fixed; inset: 0; z-index: 90; display: none;
  background: rgba(4, 6, 10, .72);
}
.drawer.is-open { display: block; }
.drawer__panel {
  position: absolute; right: 0; top: 0; bottom: 0; width: min(360px, 88vw);
  background: var(--bg-2); border-left: 1px solid var(--line-strong);
  overflow-y: auto; padding: 18px 16px calc(24px + env(safe-area-inset-bottom));
  animation: drawer-in .22s var(--ease-out);
}
.drawer__head { display: flex; align-items: center; justify-content: space-between; margin-bottom: 12px; }
.drawer nav ul { list-style: none; margin: 0 0 18px; padding: 0; }
.drawer nav a { display: flex; align-items: center; gap: 12px; padding: 12px 8px; color: var(--frost); font-weight: 600; border-bottom: 1px solid var(--line); }
.drawer nav a:hover { text-decoration: none; background: var(--bg-3); }
.drawer nav .icon { color: var(--ice); }
.drawer__label { font-size: var(--fs-xs); color: var(--steel); margin: 18px 8px 4px; }

.search-inline { display: none; position: relative; }
.search-inline .icon { position: absolute; left: 10px; top: 50%; transform: translateY(-50%); color: var(--steel); width: 18px; height: 18px; pointer-events: none; }
.search-inline input {
  width: 160px; height: 38px; padding: 0 12px 0 36px;
  background: var(--bg-input); border: 1px solid var(--line); color: var(--frost); font: inherit; font-size: var(--fs-sm);
  transition: width .2s var(--ease-out), border-color .15s;
}
.search-inline input:focus { outline: none; border-color: var(--ice); width: 220px; }
@media (min-width: 1280px) { .search-inline { display: block; } .search-toggle { display: none; } }
/* Membres connectés (jauge d'XP, notifications, avatar) et en-tête compact : recherche en icône */
.is-member .search-inline, .site-header--compact .search-inline, .site-header--compact .xp-chip { display: none; }
.is-member .search-toggle, .site-header--compact .search-toggle { display: inline-grid; }
.site-header--compact .brand { font-size: 1.1rem; letter-spacing: .02em; }
/* Petits écrans : quatre icônes pour un membre (recherche, messages, notifications, compte) ; le nom du site garde sa place */
@media (max-width: 400px) {
  .site-header__inner { gap: 12px; }
  .header-actions { gap: 2px; }
  .brand { gap: 8px; }
}
/* Très petits écrans : la recherche reste dans le menu « Plus » */
@media (max-width: 359px) { .is-member .header-actions .search-toggle { display: none; } }

/* 6. Pied de page */
.site-footer { border-top: 1px solid var(--line); background: #06080D; padding: 40px 0 28px; color: var(--steel); font-size: var(--fs-sm); }
.site-footer__grid { display: grid; gap: 28px; grid-template-columns: repeat(auto-fit, minmax(170px, 1fr)); }
.site-footer h2 { font-size: var(--fs-sm); color: var(--frost); margin: 0 0 10px; font-variation-settings: "SHRP" 40; }
.site-footer ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 6px; }
.site-footer a { color: var(--steel); }
.site-footer a:hover { color: var(--frost); }
.site-footer__about p { max-width: 34ch; }
.site-footer ul.site-footer__social { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 14px; }
.site-footer__social a { display: inline-flex; align-items: center; gap: 8px; min-height: 36px; padding: 0 12px; border: 1px solid var(--line); background: var(--bg-2); }
.site-footer__social a:hover { border-color: var(--line-strong); text-decoration: none; }
.site-footer__social .icon { width: 16px; height: 16px; }
.site-footer__bottom { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 12px; margin-top: 32px; padding-top: 20px; border-top: 1px solid var(--line); font-size: var(--fs-xs); }
@media (max-width: 1119px) { .site-footer { padding-bottom: calc(var(--tabbar-h) + 28px + env(safe-area-inset-bottom)); } }

/* 7. Boutons */
.btn {
  --cut: 8px;
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  height: 42px; padding: 0 18px;
  font: inherit; font-size: .9375rem; font-weight: 650; letter-spacing: .01em; line-height: 1;
  font-variation-settings: "SHRP" 60;
  color: var(--frost); background-color: var(--bg-4); border: 0; cursor: pointer;
  clip-path: polygon(0 0, calc(100% - var(--cut)) 0, 100% var(--cut), 100% 100%, var(--cut) 100%, 0 calc(100% - var(--cut)));
  white-space: nowrap; text-decoration: none;
  transition: background-color .15s, color .15s, transform .1s;
}
.btn:hover { background-color: #27324A; text-decoration: none; color: var(--frost); }
.btn:active { transform: translateY(1px); }
.btn:focus-visible { clip-path: none; outline: 2px solid var(--frost); outline-offset: 2px; }
.btn .icon { width: 18px; height: 18px; flex: none; }
@media (max-width: 480px) { .btn { max-width: 100%; white-space: normal; height: auto; min-height: 42px; padding-block: 10px; line-height: 1.25; text-align: center; } }
.btn--primary { background-color: var(--ice); color: #03131D; }
.btn--primary:hover { background-color: #A2E5FF; color: #03131D; }
.btn--volt { background-color: var(--volt); color: #fff; }
.btn--volt:hover { background-color: #A78DFF; color: #fff; }
/* Boutons à contour : le trait suit aussi les deux angles taillés (dégradés en diagonale). */
.btn--ghost, .btn--danger, .btn--success, .btn.is-active {
  box-shadow: inset 0 0 0 1px var(--edge);
  background-image:
    linear-gradient(to bottom left, transparent calc(50% - .75px), var(--edge) calc(50% - .75px), var(--edge) calc(50% + .75px), transparent calc(50% + .75px)),
    linear-gradient(to top right, transparent calc(50% - .75px), var(--edge) calc(50% - .75px), var(--edge) calc(50% + .75px), transparent calc(50% + .75px));
  background-size: var(--cut) var(--cut);
  background-position: top right, bottom left;
  background-repeat: no-repeat;
}
.btn--ghost { --edge: var(--line-strong); background-color: transparent; }
.btn--ghost:hover { --edge: var(--ice); background-color: var(--ice-soft); }
.btn--danger { --edge: rgba(255, 92, 122, .45); background-color: var(--danger-soft); color: #FF95A8; }
.btn--danger:hover { background-color: rgba(255, 92, 122, .22); color: #FFC2CD; }
.btn--success { --edge: rgba(91, 231, 169, .45); background-color: rgba(91, 231, 169, .14); color: var(--success); }
.btn--link { background: none; color: var(--ice); padding: 0; height: auto; clip-path: none; }
.btn--link:hover { background: none; text-decoration: underline; color: var(--ice); }
.btn--sm { height: 34px; padding: 0 12px; font-size: var(--fs-sm); --cut: 6px; }
.btn--xs { height: 28px; padding: 0 10px; font-size: var(--fs-xs); --cut: 5px; }
.btn--lg { height: 52px; padding: 0 26px; font-size: 1.0625rem; --cut: 11px; }
.btn--block { width: 100%; }
.btn--icon { width: 42px; padding: 0; }
.btn--sm.btn--icon { width: 34px; }
.btn[disabled], .btn.is-disabled { opacity: .45; pointer-events: none; }
.btn.is-active { --edge: rgba(118, 215, 255, .5); background-color: var(--ice-soft); color: var(--ice); }
.btn-row { display: flex; flex-wrap: wrap; gap: 10px; align-items: center; }
form.inline { display: inline; }

/* 8. Formulaires */
.form { max-width: 640px; }
.form--wide { max-width: none; }
.field { display: grid; gap: 6px; margin-bottom: 18px; min-width: 0; align-content: start; }
.field-row { display: grid; gap: 0 16px; }
@media (min-width: 640px) { .field-row { grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); } }
.label { font-weight: 600; font-size: var(--fs-sm); color: var(--frost); display: flex; justify-content: space-between; gap: 8px; }
.label .optional { color: var(--steel-dim); font-weight: 400; }
.hint { font-size: .8125rem; color: var(--steel); margin: 0; }
ul.hint { padding-left: 1.2em; display: grid; gap: 4px; }
.hint strong { color: #C3CBDA; font-weight: 600; }
.input, .select, .textarea {
  width: 100%; min-width: 0;
  background: var(--bg-input); color: var(--frost);
  border: 1px solid var(--line); border-radius: 0;
  padding: 11px 14px; font: inherit; font-size: 1rem; line-height: 1.4;
  transition: border-color .15s, box-shadow .15s;
}
.input::placeholder, .textarea::placeholder { color: #5C6880; }
.input:hover, .select:hover, .textarea:hover { border-color: var(--line-strong); }
.input:focus, .select:focus, .textarea:focus { outline: none; border-color: var(--ice); box-shadow: 0 0 0 3px rgba(118, 215, 255, .16); }
.textarea { min-height: 130px; resize: vertical; line-height: 1.6; }
.textarea--sm { min-height: 84px; }
.select {
  appearance: none; -webkit-appearance: none; padding-right: 40px; cursor: pointer;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M6 9l6 6 6-6' fill='none' stroke='%239BA6BA' stroke-width='2'/%3E%3C/svg%3E");
  background-repeat: no-repeat; background-position: right 12px center; background-size: 18px;
}
.select option { background: var(--bg-2); }
.has-error .input, .has-error .select, .has-error .textarea { border-color: var(--danger); }
.field-error { color: #FF95A8; font-size: .8125rem; margin: 0; display: flex; gap: 6px; align-items: center; }
.input-group { display: flex; }
.input-group .input { flex: 1; }
.input-group .btn { --cut: 0px; clip-path: none; height: auto; }
.counter { font-size: var(--fs-xs); color: var(--steel-dim); text-align: right; font-variant-numeric: tabular-nums; }
.counter.is-over { color: var(--danger); }

.check { display: flex; align-items: flex-start; gap: 10px; cursor: pointer; font-size: var(--fs-sm); line-height: 1.5; }
.check input { flex: none; margin-top: 2px; }
input[type="checkbox"], input[type="radio"] {
  appearance: none; -webkit-appearance: none;
  width: 18px; height: 18px; margin: 0;
  border: 1px solid var(--line-strong); background: var(--bg-input);
  display: inline-grid; place-items: center; cursor: pointer;
  transition: background .12s, border-color .12s;
}
input[type="radio"] { border-radius: 50%; }
input[type="checkbox"]:checked, input[type="radio"]:checked { background: var(--ice); border-color: var(--ice); }
input[type="checkbox"]:checked::after {
  content: ""; width: 10px; height: 6px; border: 2px solid #03131D; border-top: 0; border-right: 0;
  transform: rotate(-45deg) translate(1px, -1px);
}
input[type="radio"]:checked::after { content: ""; width: 6px; height: 6px; border-radius: 50%; background: #03131D; }
input[type="checkbox"]:focus-visible, input[type="radio"]:focus-visible { outline: 2px solid var(--ice); outline-offset: 2px; }

.switch { display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: 14px 0; border-bottom: 1px solid var(--line); cursor: pointer; }
.switch:last-child { border-bottom: 0; }
.switch__text strong { display: block; font-size: var(--fs-sm); }
.switch__text > span { display: block; font-size: .8125rem; color: var(--steel); }
.switch input {
  width: 44px; height: 24px; border-radius: 0; flex: none; position: relative;
  clip-path: polygon(0 0, calc(100% - 6px) 0, 100% 6px, 100% 100%, 6px 100%, 0 calc(100% - 6px));
  background: var(--bg-4); border: 0;
}
.switch input::after { content: ""; position: absolute; left: 4px; top: 4px; width: 16px; height: 16px; background: var(--steel); transition: transform .18s var(--ease-out), background .18s; transform: none; border: 0; }
.switch input:checked { background: rgba(118, 215, 255, .3); }
.switch input:checked::after { transform: translateX(20px); background: var(--ice); width: 16px; height: 16px; border: 0; }
.switch input:focus-visible { clip-path: none; }

.choice-grid { display: grid; gap: 8px; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); }
.choice {
  position: relative; display: flex; align-items: center; gap: 10px; padding: 10px 12px;
  border: 1px solid var(--line); background: var(--bg-input); cursor: pointer; font-size: var(--fs-sm);
}
.choice:hover { border-color: var(--line-strong); }
.choice:has(input:checked) { border-color: var(--ice); background: var(--ice-soft); }

.file-drop { display: grid; gap: 10px; padding: 14px; border: 1px dashed var(--line-strong); background: var(--bg-input); }
.file-drop { min-width: 0; }
.file-drop input[type="file"] { width: 100%; max-width: 100%; min-width: 0; font-size: var(--fs-sm); color: var(--steel); }
.file-drop input[type="file"]::file-selector-button {
  margin-right: 12px; padding: 8px 14px; border: 0; background: var(--bg-4); color: var(--frost); font: inherit; font-weight: 600; cursor: pointer;
}
.preview-img { max-height: 160px; width: auto; border: 1px solid var(--line); }

.password-meter { height: 4px; background: var(--bg-4); margin-top: 2px; overflow: hidden; }
.password-meter span { display: block; height: 100%; width: 0; background: var(--danger); transition: width .25s, background .25s; }
.password-meter[data-score="2"] span { width: 50%; background: var(--warning); }
.password-meter[data-score="3"] span { width: 75%; background: var(--ice); }
.password-meter[data-score="4"] span { width: 100%; background: var(--success); }
.password-meter[data-score="1"] span { width: 25%; }
.hp-field { position: absolute !important; left: -9999px !important; width: 1px; height: 1px; overflow: hidden; }

fieldset { border: 0; padding: 0; margin: 0 0 20px; min-width: 0; }
legend { font-weight: 700; font-size: var(--fs-md); margin-bottom: 12px; padding: 0; font-variation-settings: "SHRP" 70; }

/* 9. Panneaux (forme d'éclat de glace : deux coins taillés) */
.panel {
  --panel-bg: var(--bg-2);
  --panel-edge: var(--line);
  position: relative; isolation: isolate;
  padding: 20px;
  background: var(--panel-edge);
  clip-path: polygon(0 0, calc(100% - var(--cut)) 0, 100% var(--cut), 100% 100%, var(--cut) 100%, 0 calc(100% - var(--cut)));
}
.panel::before {
  content: ""; position: absolute; inset: 1px; z-index: -1;
  background: var(--panel-bg);
  clip-path: polygon(0 0, calc(100% - var(--cut) + .6px) 0, 100% calc(var(--cut) - .6px), 100% 100%, calc(var(--cut) - .6px) 100%, 0 calc(100% - var(--cut) + .6px));
}
@media (min-width: 640px) { .panel { padding: 24px; } }
.panel--raised { --panel-bg: var(--bg-3); }
.panel--glow { --panel-edge: linear-gradient(135deg, var(--ice), var(--line) 32%, var(--line) 68%, var(--volt)); }
.panel--volt { --panel-edge: linear-gradient(135deg, var(--volt), var(--line) 45%); }
.panel--gold { --panel-edge: linear-gradient(135deg, var(--gold), var(--line) 45%); }
.panel--danger { --panel-edge: linear-gradient(135deg, var(--danger), var(--line) 45%); }
.panel--tight { padding: 16px; }
.panel--flush { padding: 0; }
.panel__title { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin: 0 0 14px; font-size: var(--fs-md); }
.panel__title a { font-size: var(--fs-sm); font-weight: 600; }
.panel__title .icon { color: var(--ice); }

.box { background: var(--bg-2); border: 1px solid var(--line); padding: 18px; }
.box--sunken { background: var(--bg-input); }

.callout { display: flex; gap: 12px; align-items: flex-start; padding: 14px 16px; border-left: 3px solid var(--ice); background: var(--ice-soft); font-size: var(--fs-sm); margin-bottom: 20px; }
.callout .icon { color: var(--ice); margin-top: 2px; }
.callout p:last-child { margin-bottom: 0; }
.callout--warning { border-color: var(--warning); background: rgba(255, 200, 87, .1); }
.callout--warning .icon { color: var(--warning); }
.callout--danger { border-color: var(--danger); background: var(--danger-soft); }
.callout--danger .icon { color: var(--danger); }
.callout--success { border-color: var(--success); background: rgba(91, 231, 169, .1); }
.callout--success .icon { color: var(--success); }

/* 10. Puces, étiquettes, rangs */
.tag {
  display: inline-flex; align-items: center; gap: 5px;
  padding: 3px 8px; font-size: var(--fs-xs); font-weight: 600; line-height: 1.4;
  color: var(--steel); background: var(--bg-4); white-space: nowrap;
}
.tag .icon { width: 13px; height: 13px; }
a.tag:hover { color: var(--frost); text-decoration: none; background: #27324A; }
.tag--ice { color: var(--ice); background: var(--ice-soft); }
.tag--volt { color: #B9A6FF; background: var(--volt-soft); }
.tag--success { color: var(--success); background: rgba(91, 231, 169, .12); }
.tag--danger { color: #FF95A8; background: var(--danger-soft); }
.tag--warning { color: var(--warning); background: rgba(255, 200, 87, .12); }
.tag--demo { color: var(--gold); background: rgba(255, 200, 87, .1); box-shadow: inset 0 0 0 1px rgba(255, 200, 87, .35); }
.hashtag { color: var(--ice); font-weight: 600; }

.rarity { font-size: var(--fs-xs); font-weight: 700; font-variation-settings: "SHRP" 80; }
.rarity--commun { color: var(--r-commun); }
.rarity--rare { color: var(--r-rare); }
.rarity--epique { color: var(--r-epique); }
.rarity--legendaire { color: var(--r-legendaire); }
.rarity--mythique { background: linear-gradient(90deg, var(--ice), var(--volt), var(--mythic)); -webkit-background-clip: text; background-clip: text; color: transparent; }

.rank-chip { display: inline-flex; align-items: center; vertical-align: middle; gap: 6px; font-size: .8125rem; font-weight: 700; color: var(--rank-color, var(--steel)); white-space: nowrap; font-variation-settings: "SHRP" 80; }
.rank-chip .icon { width: 18px; height: 18px; }
.rank--recrue, .rank-chip--recrue { --rank-color: #9BA6BA; }
.rank--combattant, .rank-chip--combattant { --rank-color: #A8E6FF; }
.rank--elite, .rank-chip--elite { --rank-color: #76D7FF; }
.rank--maitre, .rank-chip--maitre { --rank-color: #9475FF; }
.rank--legende, .rank-chip--legende { --rank-color: #FFC857; }
.rank--immortel, .rank-chip--immortel { --rank-color: #F4F7FF; }
.rank-chip--immortel .icon { filter: drop-shadow(0 0 6px rgba(148, 117, 255, .9)); }
.rank-chip--legende .icon { filter: drop-shadow(0 0 5px rgba(255, 200, 87, .6)); }
.insignia { color: var(--rank-color, var(--steel)); width: 48px; height: 48px; }
.insignia--sm { width: 32px; height: 32px; }

.role-tag { display: inline-flex; align-items: center; gap: 4px; font-size: 11px; font-weight: 700; padding: 1px 6px; line-height: 1.5; vertical-align: 2px; }
.role-tag--admin { color: #FF95A8; background: rgba(255, 107, 139, .14); }
.role-tag--mod { color: #B9A6FF; background: var(--volt-soft); }
.role-tag--verified { color: var(--ice); padding: 0; background: none; }
.role-tag--verified .icon { width: 14px; height: 14px; }
.role-tag--beta { color: #5BE7A9; background: rgba(91, 231, 169, .12); }
.user-title { font-size: var(--fs-xs); color: var(--steel); font-weight: 500; }

.level-pip {
  display: inline-grid; place-items: center; min-width: 26px; height: 22px; padding: 0 5px;
  font-size: 12px; font-weight: 800; color: #fff; background: var(--volt); font-variant-numeric: tabular-nums;
  clip-path: polygon(0 0, calc(100% - 5px) 0, 100% 5px, 100% 100%, 5px 100%, 0 calc(100% - 5px));
}

/* Difficulté : chevrons Λ empilés */
.difficulty { display: inline-flex; align-items: center; gap: 6px; font-size: var(--fs-xs); color: var(--steel); }
.difficulty__marks { display: inline-flex; gap: 2px; }
.difficulty__marks i { width: 10px; height: 8px; background: var(--bg-4); clip-path: polygon(50% 0, 100% 100%, 70% 100%, 50% 45%, 30% 100%, 0 100%); }
.difficulty__marks i.on { background: var(--ice); }
.difficulty--difficile .difficulty__marks i.on { background: var(--volt); }
.difficulty--legendaire .difficulty__marks i.on { background: var(--gold); }

/* 11. Avatars et cadres cosmétiques */
.avatar {
  --size: 44px;
  --cut: calc(var(--size) * .2);
  position: relative; display: inline-grid; place-items: center; flex: none;
  width: var(--size); height: var(--size);
  background: hsl(var(--hue, 210) 42% 20%);
  color: hsl(var(--hue, 210) 85% 86%);
  clip-path: polygon(0 0, calc(100% - var(--cut)) 0, 100% var(--cut), 100% 100%, var(--cut) 100%, 0 calc(100% - var(--cut)));
  font-weight: 750; font-size: calc(var(--size) * .36); line-height: 1; font-variation-settings: "SHRP" 80;
  overflow: hidden;
}
.avatar img { width: 100%; height: 100%; object-fit: cover; }
.avatar--xs { --size: 24px; font-size: 10px; }
.avatar--sm { --size: 32px; }
.avatar--md { --size: 44px; }
.avatar--lg { --size: 72px; }
.avatar--xl { --size: 128px; }
.avatar.has-frame { padding: max(2px, calc(var(--size) * .055)); background: var(--frame, var(--ice)); }
.avatar.has-frame > img, .avatar.has-frame > .avatar__initials {
  --cut: calc(var(--size) * .17);
  width: 100%; height: 100%; clip-path: polygon(0 0, calc(100% - var(--cut)) 0, 100% var(--cut), 100% 100%, var(--cut) 100%, 0 calc(100% - var(--cut)));
  background: hsl(var(--hue, 210) 42% 20%); display: grid; place-items: center;
}
.frame-givre { --frame: linear-gradient(135deg, #E4F6FF, #76D7FF 45%, #2F8FCB); }
.frame-cristal { --frame: conic-gradient(from 45deg, #F4F7FF, #76D7FF, #C9F0FF, #F4F7FF, #76D7FF, #A9E9FF, #F4F7FF); }
.frame-tempete { --frame: linear-gradient(135deg, #D3C6FF, #9475FF 40%, #3D22A8 80%, #9475FF); }
.frame-aurore { --frame: linear-gradient(120deg, #5BE7A9, #76D7FF, #9475FF, #5BE7A9); background-size: 300% 300% !important; animation: aurora-shift 8s linear infinite; }
.frame-immortel { --frame: conic-gradient(from var(--spin), #76D7FF, #9475FF, #FF6FB5, #FFC857, #76D7FF); animation: spin-frame 6s linear infinite; }
.frame-champion { --frame: linear-gradient(135deg, #FFF1C9, #FFC857 45%, #C46E12); }
.frame-staff { --frame: linear-gradient(135deg, #FFC2CD, #FF6B8B 45%, #A3203F); }
.avatar-stack { display: flex; }
.avatar-stack .avatar { margin-left: -8px; }
.avatar-stack .avatar:first-child { margin-left: 0; }

.user-chip { display: inline-flex; align-items: center; gap: 10px; min-width: 0; color: var(--frost); }
.user-chip:hover { text-decoration: none; }
.user-chip:hover .user-chip__name { color: var(--ice); }
.user-chip__meta { display: grid; min-width: 0; line-height: 1.3; }
.user-chip__name { font-weight: 650; font-size: var(--fs-sm); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; display: inline-flex; align-items: center; gap: 6px; }
.user-chip__sub { font-size: var(--fs-xs); color: var(--steel); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

/* 12. Jauges de progression (segments de 10 %, extrémité taillée) */
.meter {
  --value: 0;
  position: relative; height: 8px; overflow: hidden;
  background: #1A2233;
  clip-path: polygon(0 0, 100% 0, calc(100% - 4px) 100%, 0 100%);
}
.meter__fill {
  position: absolute; inset: 0 auto 0 0;
  width: calc(var(--value) * 1%);
  background: linear-gradient(90deg, var(--ice-deep), var(--ice) 65%, #D5F3FF);
  animation: meter-fill 1s var(--ease-out) both;
}
.meter::after {
  content: ""; position: absolute; inset: 0;
  background: repeating-linear-gradient(90deg, transparent 0 calc(10% - 2px), rgba(8, 10, 16, .85) calc(10% - 2px) 10%);
}
.meter--xs { height: 4px; }
.meter--xs::after { display: none; }
.meter--sm { height: 6px; }
.meter--lg { height: 12px; clip-path: polygon(0 0, 100% 0, calc(100% - 6px) 100%, 0 100%); }
.meter--volt .meter__fill { background: linear-gradient(90deg, #5B3FD6, var(--volt) 65%, #D3C6FF); }
.meter--gold .meter__fill { background: linear-gradient(90deg, #C46E12, var(--gold)); }
.meter--done .meter__fill { background: linear-gradient(90deg, #2DBF84, var(--success)); }
.meter-label { display: flex; justify-content: space-between; gap: 12px; font-size: var(--fs-xs); color: var(--steel); margin-bottom: 6px; font-variant-numeric: tabular-nums; }
.meter-label strong { color: var(--frost); font-weight: 650; }

/* 13. Onglets et filtres */
.tabs { position: relative; display: flex; gap: 4px; overflow-x: auto; scrollbar-width: none; border-bottom: 1px solid var(--line); margin-bottom: 24px; }
.tabs::-webkit-scrollbar { display: none; }
.tabs a, .tabs button {
  position: relative; display: inline-flex; align-items: center; gap: 8px; flex: none;
  padding: 12px 14px; color: var(--steel); font-weight: 600; font-size: var(--fs-sm); background: none; border: 0; cursor: pointer; white-space: nowrap;
}
.tabs a:hover, .tabs button:hover { color: var(--frost); text-decoration: none; }
.tabs [aria-current="page"], .tabs [aria-selected="true"] { color: var(--frost); }
.tabs [aria-current="page"]::after, .tabs [aria-selected="true"]::after { content: ""; position: absolute; left: 10px; right: 10px; bottom: -1px; height: 2px; background: var(--ice); }
.tabs .count { font-size: 11px; color: var(--steel-dim); font-variant-numeric: tabular-nums; }

.pills { display: flex; flex-wrap: wrap; gap: 6px; }
.pill {
  display: inline-flex; align-items: center; gap: 6px; padding: 6px 12px;
  font-size: .8125rem; font-weight: 600; color: var(--steel);
  background: var(--bg-2); border: 1px solid var(--line); cursor: pointer;
}
.pill:hover { color: var(--frost); border-color: var(--line-strong); text-decoration: none; }
.pill.is-active, .pill[aria-current="page"] { color: var(--ice); border-color: rgba(118, 215, 255, .5); background: var(--ice-soft); }
.pill .icon { width: 15px; height: 15px; }
.toolbar { display: flex; flex-wrap: wrap; gap: 12px; align-items: center; justify-content: space-between; margin-bottom: 20px; }
.toolbar form { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; }
.toolbar .input, .toolbar .select { height: 40px; padding-top: 0; padding-bottom: 0; width: auto; }

/* 14. Listes et tableaux */
.list { list-style: none; margin: 0; padding: 0; }
.list.panel { padding: 8px 20px; }
.list.panel--tight { padding: 6px 16px; }
@media (min-width: 640px) { .list.panel:not(.panel--tight) { padding: 8px 24px; } }
.list-row { display: flex; align-items: center; gap: 14px; padding: 14px 0; border-bottom: 1px solid var(--line); }
.list-row:last-child { border-bottom: 0; }
.list-row__main { flex: 1; min-width: 0; }
.list-row__title { font-weight: 650; color: var(--frost); display: block; }
.list-row__sub { font-size: var(--fs-xs); color: var(--steel); }
.panel > .list-row:first-child, .panel.list > .list-row:first-child { padding-top: 4px; }
.panel.list > .list-row:last-child { padding-bottom: 4px; }
.icon-tile { width: 36px; height: 36px; flex: none; display: grid; place-items: center; background: var(--bg-4); color: var(--ice); clip-path: polygon(50% 0, 100% 25%, 100% 75%, 50% 100%, 0 75%, 0 25%); }
.icon-tile .icon { width: 18px; height: 18px; }

.search-big { position: relative; display: flex; gap: 8px; max-width: 760px; margin-bottom: 28px; }
.search-big > .icon { position: absolute; left: 14px; top: 50%; transform: translateY(-50%); color: var(--steel); pointer-events: none; }
.search-big .input { flex: 1; height: 50px; padding-left: 44px; font-size: var(--fs-md); }
.search-big .btn { height: 50px; }
@media (max-width: 559px) { .search-big .btn { padding-inline: 14px; } }

.table-wrap { position: relative; overflow-x: auto; border: 1px solid var(--line); background: var(--bg-2); }
.table { width: 100%; border-collapse: collapse; font-size: var(--fs-sm); }
.table th, .table td { padding: 12px 14px; text-align: left; border-bottom: 1px solid var(--line); vertical-align: middle; }
.table th { font-size: var(--fs-xs); font-weight: 700; color: var(--steel); background: var(--bg-3); white-space: nowrap; font-variation-settings: "SHRP" 60; }
.table tbody tr:last-child td { border-bottom: 0; }
.table tbody tr:hover td { background: rgba(118, 215, 255, .03); }
.table .num { text-align: right; font-variant-numeric: tabular-nums; white-space: nowrap; }
.table .col-rank { width: 1%; padding-right: 18px; }
.cell-member { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.table .actions { text-align: right; white-space: nowrap; }
.table tr.is-me td { background: var(--ice-soft); }

.stat-strip { display: grid; grid-template-columns: repeat(auto-fit, minmax(110px, 1fr)); border: 1px solid var(--line); background: var(--bg-2); }
.stat-strip > div { padding: 14px 16px; border-right: 1px solid var(--line); border-bottom: 1px solid var(--line); margin: 0 -1px -1px 0; }
.stat-strip dt { font-size: var(--fs-xs); color: var(--steel); }
.stat-strip dd { margin: 2px 0 0; font-size: var(--fs-lg); font-weight: 750; font-variant-numeric: tabular-nums; font-variation-settings: "SHRP" 90; }
.stat-strip--inline { display: inline-grid; grid-auto-flow: column; grid-auto-columns: minmax(96px, auto); grid-template-columns: none; margin: 0; }
.stat-strip--inline > div { padding: 10px 16px; }
@media (max-width: 720px) { .stat-strip--inline { display: grid; grid-auto-flow: row; grid-template-columns: repeat(auto-fit, minmax(130px, 1fr)); } }
/* Bandeau à cases de largeur libre : sur mobile, une valeur longue (récompense) passe sur sa propre ligne au lieu d'une colonne étroite */
@media (max-width: 720px) {
  .stat-strip--flow { display: flex; flex-wrap: wrap; }
  .stat-strip--flow > div { flex: 1 1 110px; }
  .stat-strip--flow > .stat-strip__wide { flex: 2 1 230px; }
}

.kv { display: grid; grid-template-columns: max-content 1fr; gap: 8px 18px; margin: 0; font-size: var(--fs-sm); }
.kv dt { color: var(--steel); }
.kv dd { margin: 0; min-width: 0; overflow-wrap: anywhere; }

/* 15. Notifications, messages flash et toasts */
.notif-list { list-style: none; margin: 0; padding: 0; }
.notif {
  position: relative; display: grid; grid-template-columns: 36px 1fr auto; gap: 12px; align-items: start;
  padding: 12px 14px; border-bottom: 1px solid var(--line);
}
.notif:last-child { border-bottom: 0; }
.notif.is-unread { background: linear-gradient(90deg, rgba(148, 117, 255, .12), transparent 70%); }
.notif.is-unread::before { content: ""; position: absolute; left: 0; top: 0; bottom: 0; width: 2px; background: var(--volt); }
.notif__icon { width: 36px; height: 36px; display: grid; place-items: center; background: var(--bg-4); color: var(--ice); clip-path: polygon(0 0, calc(100% - 7px) 0, 100% 7px, 100% 100%, 7px 100%, 0 calc(100% - 7px)); }
.notif__icon .icon { width: 18px; height: 18px; }
.notif__icon--like { color: var(--mythic); }
.notif__icon--badge, .notif__icon--level_up, .notif__icon--rank_up { color: var(--gold); }
.notif__icon--sanction, .notif__icon--warning { color: var(--danger); }
.notif__icon--xp, .notif__icon--quest_completed { color: var(--volt); }
.notif__title { font-size: var(--fs-sm); font-weight: 600; color: var(--frost); line-height: 1.4; }
.notif__title:hover { color: var(--ice); }
.notif__body { font-size: .8125rem; color: var(--steel); margin-top: 2px; }
.notif__time { font-size: 11px; color: var(--steel-dim); white-space: nowrap; }
.notif-empty { padding: 28px 16px; text-align: center; color: var(--steel); font-size: var(--fs-sm); }

.toasts {
  position: fixed; z-index: 100; top: calc(var(--header-h) + 12px); right: 16px;
  display: grid; gap: 10px; width: min(380px, calc(100vw - 32px)); pointer-events: none;
}
@media (max-width: 1119px) {
  .toasts { top: auto; bottom: calc(var(--tabbar-h) + 12px + env(safe-area-inset-bottom)); left: 16px; right: 16px; width: auto; }
}
.toast {
  --cut: 10px;
  pointer-events: auto;
  position: relative; isolation: isolate;
  display: grid; grid-template-columns: 38px 1fr auto; gap: 12px; align-items: center;
  padding: 12px 12px 12px 14px;
  background: var(--toast-edge, var(--line-strong)); clip-path: polygon(0 0, calc(100% - var(--cut)) 0, 100% var(--cut), 100% 100%, var(--cut) 100%, 0 calc(100% - var(--cut)));
  box-shadow: 0 18px 40px -16px rgba(0, 0, 0, .8);
  animation: toast-in .4s cubic-bezier(.2, .9, .3, 1.15) both;
}
.toast::before { content: ""; position: absolute; inset: 1px; z-index: -1; background: #121927; clip-path: polygon(0 0, calc(100% - var(--cut) + .6px) 0, 100% calc(var(--cut) - .6px), 100% 100%, calc(var(--cut) - .6px) 100%, 0 calc(100% - var(--cut) + .6px)); }
.toast__icon { width: 38px; height: 38px; display: grid; place-items: center; color: var(--ice); background: var(--ice-soft); clip-path: polygon(0 0, calc(100% - 7px) 0, 100% 7px, 100% 100%, 7px 100%, 0 calc(100% - 7px)); }
.toast__icon .icon { width: 20px; height: 20px; }
.toast__title { font-weight: 700; font-size: var(--fs-sm); font-variation-settings: "SHRP" 80; }
.toast__text { font-size: .8125rem; color: var(--steel); }
.toast__close { background: none; border: 0; color: var(--steel); cursor: pointer; padding: 4px; }
.toast__close:hover { color: var(--frost); }
.toast--success { --toast-edge: linear-gradient(135deg, var(--success), var(--line-strong) 40%); }
.toast--success .toast__icon { color: var(--success); background: rgba(91, 231, 169, .12); }
.toast--error { --toast-edge: linear-gradient(135deg, var(--danger), var(--line-strong) 40%); }
.toast--error .toast__icon { color: var(--danger); background: var(--danger-soft); }
.toast--warning .toast__icon { color: var(--warning); background: rgba(255, 200, 87, .12); }
.toast--xp { --toast-edge: linear-gradient(135deg, var(--ice), var(--line-strong) 45%); }
.toast--xp .toast__title { font-size: var(--fs-md); color: var(--ice); font-variant-numeric: tabular-nums; }
.toast--level { --toast-edge: linear-gradient(135deg, var(--volt), var(--ice)); }
.toast--level .toast__icon { color: #fff; background: var(--volt); }
.toast--level .toast__title { font-size: var(--fs-md); }
.toast--badge { --toast-edge: linear-gradient(135deg, var(--gold), var(--line-strong) 45%); }
.toast--badge .toast__icon { color: var(--gold); background: rgba(255, 200, 87, .12); }
.toast--quest { --toast-edge: linear-gradient(135deg, var(--volt), var(--line-strong) 45%); }
.toast--quest .toast__icon { color: var(--volt); background: var(--volt-soft); }
.toast.is-leaving { animation: toast-out .25s ease forwards; }

/* 16. Fil d'actualité, publications, commentaires */
.composer { margin-bottom: 20px; }
.composer__head { display: flex; gap: 12px; align-items: flex-start; }
.composer__body { flex: 1; min-width: 0; }
.composer .textarea { min-height: 96px; }
.composer__tools { display: flex; flex-wrap: wrap; gap: 10px; align-items: center; justify-content: space-between; margin-top: 10px; }
.composer__tools .select { width: auto; height: 38px; padding-top: 0; padding-bottom: 0; font-size: var(--fs-sm); }
.composer__tools .file-label { display: inline-flex; align-items: center; gap: 6px; font-size: var(--fs-sm); color: var(--steel); cursor: pointer; }
.composer__tools .file-label:hover { color: var(--frost); }
.composer__tools .file-label input { position: absolute; width: 1px; height: 1px; opacity: 0; }
.composer__tools .file-label:focus-within { color: var(--frost); outline: 2px solid var(--ice); outline-offset: 3px; }
/* Image jointe : vignette, nom, poids et bouton pour la retirer (visible dès que l'image est choisie) */
.attach { display: flex; align-items: center; gap: 12px; margin-top: 10px; padding: 8px 8px 8px 10px; border: 1px solid var(--line); background: var(--bg-2); }
.attach__thumb { flex: none; width: 72px; height: 72px; object-fit: cover; background: var(--bg-3); }
.attach__meta { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.attach__name { font-size: var(--fs-sm); font-weight: 650; color: var(--frost); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.attach__info { font-size: var(--fs-xs); color: var(--steel); }
.attach__clear { flex: none; }
.attach.is-error { border-color: rgba(255, 92, 122, .45); background: var(--danger-soft); }
.attach.is-error .attach__info { color: #FF95A8; }

.feed { display: grid; gap: 14px; }
.post { background: var(--bg-2); border: 1px solid var(--line); padding: 18px; }
.post.is-pinned { border-color: rgba(118, 215, 255, .4); }
.post.is-hidden { opacity: .6; border-style: dashed; }
.post__head { display: flex; align-items: flex-start; gap: 12px; margin-bottom: 12px; }
.post__head .user-chip { flex: 1; }
.post__meta { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 10px; font-size: var(--fs-xs); color: var(--steel); }
.post__meta a { color: var(--steel); }
.post__meta a:hover { color: var(--frost); }
.post__body { font-size: .96875rem; line-height: 1.65; overflow-wrap: anywhere; }
.post__body p:last-child { margin-bottom: 0; }
/* Bloc (et non lien en ligne) : sinon la découpe des coins se calcule sur la hauteur d'une ligne de texte et masque l'image */
.post__image { display: block; margin-top: 14px; --cut: 12px; clip-path: polygon(0 0, calc(100% - var(--cut)) 0, 100% var(--cut), 100% 100%, var(--cut) 100%, 0 calc(100% - var(--cut))); background: var(--bg-input); }
.post__image img { display: block; width: 100%; height: auto; max-height: 560px; object-fit: contain; }
.post__tags { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 12px; }
.post__actions { display: flex; flex-wrap: wrap; align-items: center; gap: 4px; margin-top: 14px; padding-top: 10px; border-top: 1px solid var(--line); }
.action {
  display: inline-flex; align-items: center; gap: 7px; padding: 7px 10px;
  color: var(--steel); background: none; border: 0; cursor: pointer; font-size: .8125rem; font-weight: 600;
  font-variant-numeric: tabular-nums;
}
.action:hover { color: var(--frost); background: var(--bg-3); text-decoration: none; }
.action .icon { width: 18px; height: 18px; }
.action.is-liked { color: var(--mythic); }
.action.is-liked .icon { fill: currentColor; }
.action.is-saved { color: var(--ice); }
.action.is-saved .icon { fill: currentColor; }
.action--end { margin-left: auto; }
.badge-hint { font-size: var(--fs-xs); color: var(--steel-dim); }

.comments { margin-top: 18px; display: grid; gap: 2px; }
.comment { display: grid; grid-template-columns: 32px 1fr; gap: 10px; padding: 12px 0; border-top: 1px solid var(--line); }
.comment--reply { margin-left: 42px; }
.comment__head { display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 10px; font-size: var(--fs-xs); color: var(--steel); }
.comment__head a.name { color: var(--frost); font-weight: 650; font-size: var(--fs-sm); }
.comment__body { font-size: .9375rem; overflow-wrap: anywhere; margin-top: 2px; }
.comment__body p:last-child { margin-bottom: 0; }
.comment__actions { display: flex; gap: 2px; margin-top: 4px; }
.comment__actions .action { padding: 4px 8px; font-size: var(--fs-xs); }
.comment-form { display: grid; gap: 8px; margin-top: 12px; }
.comment-form .textarea { min-height: 70px; }

/* Rendu du texte des membres */
.rich blockquote, .quote {
  margin: 10px 0; padding: 10px 14px; background: var(--bg-input); border-left: 3px solid var(--volt); color: #D3D9E6; font-size: .9375rem;
}
.quote__author { display: block; font-size: var(--fs-xs); font-weight: 700; color: #B9A6FF; margin-bottom: 4px; }
.rich code { background: var(--bg-4); }
.spoiler {
  background: repeating-linear-gradient(135deg, #2C3A55 0 5px, #24304A 5px 10px); color: transparent; cursor: pointer;
  padding: 1px .25em; box-decoration-break: clone; -webkit-box-decoration-break: clone; transition: background .2s, color .2s;
}
.spoiler:not(.is-revealed) * { color: transparent !important; }
.spoiler:not(.is-revealed):not(:focus) a { pointer-events: none; }
.spoiler:hover { background: repeating-linear-gradient(135deg, #34446A 0 5px, #2A3858 5px 10px); }
.spoiler.is-revealed, .spoiler:focus { background: rgba(118, 215, 255, .08); color: var(--frost); outline: none; }
.spoiler:focus-visible { box-shadow: 0 0 0 2px var(--ice); }
.mention { color: var(--ice); font-weight: 600; }

/* 17. Forum */
.forum-cats { display: grid; gap: 0; border: 1px solid var(--line); background: var(--bg-2); }
.forum-cat { display: grid; grid-template-columns: 48px 1fr; gap: 16px; align-items: center; padding: 18px; border-bottom: 1px solid var(--line); }
.forum-cat:last-child { border-bottom: 0; }
@media (min-width: 800px) { .forum-cat { grid-template-columns: 48px minmax(0, 1fr) 140px 260px; } }
.forum-cat__icon {
  width: 48px; height: 48px; display: grid; place-items: center;
  color: var(--cat-color, var(--ice)); background: color-mix(in srgb, var(--cat-color, var(--ice)) 14%, transparent);
  clip-path: polygon(0 0, calc(100% - 10px) 0, 100% 10px, 100% 100%, 10px 100%, 0 calc(100% - 10px));
}
.forum-cat__icon .icon { width: 24px; height: 24px; }
.forum-cat__name { font-weight: 700; font-size: var(--fs-md); color: var(--frost); font-variation-settings: "SHRP" 70; }
.forum-cat__desc { font-size: var(--fs-sm); color: var(--steel); margin: 2px 0 0; }
.forum-cat__counts { display: none; font-size: var(--fs-xs); color: var(--steel); font-variant-numeric: tabular-nums; }
.forum-cat__counts strong { color: var(--frost); font-size: var(--fs-sm); }
.forum-cat__last { display: none; font-size: var(--fs-xs); color: var(--steel); min-width: 0; }
.forum-cat__last a { display: block; color: var(--frost); font-weight: 600; font-size: .8125rem; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
@media (min-width: 800px) { .forum-cat__counts, .forum-cat__last { display: block; } }

.topic-list { border: 1px solid var(--line); background: var(--bg-2); }
.topic-row { display: grid; grid-template-columns: 1fr auto; gap: 12px; align-items: center; padding: 14px 18px; border-bottom: 1px solid var(--line); }
.topic-row:last-child { border-bottom: 0; }
@media (min-width: 800px) { .topic-row { grid-template-columns: minmax(0, 1fr) 110px 200px; } }
.topic-row.is-pinned { background: linear-gradient(90deg, rgba(118, 215, 255, .06), transparent 60%); }
.topic-row__title { display: flex; align-items: center; gap: 8px; font-weight: 650; color: var(--frost); }
.topic-row__title .icon { color: var(--ice); width: 16px; height: 16px; }
.topic-row__title .icon--lock { color: var(--steel); }
.topic-row__meta { font-size: var(--fs-xs); color: var(--steel); margin-top: 2px; }
.topic-row__stats { font-size: var(--fs-xs); color: var(--steel); text-align: right; font-variant-numeric: tabular-nums; }
.topic-row__last { display: none; font-size: var(--fs-xs); color: var(--steel); }
@media (min-width: 800px) { .topic-row__last { display: flex; align-items: center; gap: 8px; } }

.thread { display: grid; gap: 14px; }
.reply { display: grid; background: var(--bg-2); border: 1px solid var(--line); }
@media (min-width: 800px) { .reply { grid-template-columns: 180px minmax(0, 1fr); } }
.reply.is-op { border-color: rgba(118, 215, 255, .35); }
.reply.is-hidden { opacity: .6; border-style: dashed; }
.reply__author { display: flex; gap: 12px; align-items: center; padding: 14px 16px; border-bottom: 1px solid var(--line); background: var(--bg-3); }
@media (min-width: 800px) {
  .reply__author { flex-direction: column; align-items: flex-start; border-bottom: 0; border-right: 1px solid var(--line); padding: 18px 16px; }
}
.reply__author .name { font-weight: 700; color: var(--frost); }
.reply__author-meta { display: grid; gap: 4px; font-size: var(--fs-xs); color: var(--steel); }
.reply__main { padding: 16px 18px; min-width: 0; display: flex; flex-direction: column; }
.reply__head { display: flex; justify-content: space-between; gap: 12px; font-size: var(--fs-xs); color: var(--steel); margin-bottom: 10px; }
.reply__body { flex: 1; overflow-wrap: anywhere; }
.reply__actions { display: flex; flex-wrap: wrap; gap: 4px; margin-top: 14px; padding-top: 10px; border-top: 1px solid var(--line); }
.mod-bar { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; padding: 10px 14px; margin-bottom: 18px; border: 1px dashed rgba(148, 117, 255, .45); background: var(--volt-soft); font-size: var(--fs-sm); }
.mod-bar strong { color: #B9A6FF; margin-right: 6px; }

/* 18. Profil */
.profile-banner {
  --cut: 18px;
  position: relative; height: 180px; overflow: hidden;
  background:
    linear-gradient(180deg, transparent 40%, rgba(8, 10, 16, .85)),
    linear-gradient(120deg, #0F2236, #161D3A 55%, #24154A);
  clip-path: polygon(0 0, 100% 0, 100% calc(100% - var(--cut)), calc(100% - var(--cut)) 100%, 0 100%);
}
.profile-banner img { width: 100%; height: 100%; object-fit: cover; }
@media (min-width: 800px) { .profile-banner { height: 240px; } }
.profile-head { position: relative; display: flex; flex-wrap: wrap; align-items: flex-end; gap: 18px 24px; margin-top: -56px; padding: 0 4px; }
.profile-head .avatar { box-shadow: none; }
.profile-head__id { flex: 1; min-width: min(220px, 100%); padding-bottom: 6px; }
.profile-head__name { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; margin: 0; font-size: var(--fs-2xl); }
.profile-head__title { color: var(--steel); font-size: var(--fs-sm); margin-top: 2px; }
.profile-head__actions { display: flex; flex-wrap: wrap; gap: 8px; padding-bottom: 8px; }
.profile-level { display: grid; grid-template-columns: auto 1fr; gap: 16px; align-items: center; }
.profile-level__num { font-size: var(--fs-4xl); font-weight: 850; line-height: 1; font-variation-settings: "SHRP" 100; font-variant-numeric: tabular-nums; color: var(--frost); }
.profile-level__num small { display: block; font-size: var(--fs-xs); font-weight: 600; color: var(--steel); letter-spacing: 0; }
/* Vitrine du profil (distincte de l'éditeur de vitrine de la page Badges, .showcase) */
.profile-showcase { display: flex; flex-wrap: wrap; align-items: center; gap: 14px; }
.profile-showcase img { width: 64px; height: 64px; }
.chips { display: flex; flex-wrap: wrap; gap: 6px; }

.profile-layout { display: grid; grid-template-columns: minmax(0, 1fr); gap: 24px; align-items: start; }
@media (min-width: 1024px) { .profile-layout { grid-template-columns: 340px minmax(0, 1fr); gap: 32px; } }

.member-card { display: flex; flex-direction: column; gap: 12px; }
.member-card__id { display: flex; gap: 14px; align-items: center; color: var(--frost); min-width: 0; }
.member-card__id:hover { text-decoration: none; }
.member-card__id:hover .member-card__name { color: var(--ice); }
.member-card__text { display: grid; gap: 3px; min-width: 0; }
.member-card__name { font-weight: 700; font-size: var(--fs-md); display: inline-flex; align-items: center; gap: 6px; font-variation-settings: "SHRP" 70; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.member-card__foot { display: flex; flex-wrap: wrap; align-items: center; gap: 12px; margin-top: auto; padding-top: 10px; border-top: 1px solid var(--line); font-size: var(--fs-xs); color: var(--steel); }
.member-card__foot > span { display: inline-flex; align-items: center; gap: 5px; }
.member-card__follow { margin-left: auto; }

.settings-section + .settings-section { margin-top: 20px; }
.preset-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(72px, 1fr)); gap: 10px; }
.preset { position: relative; cursor: pointer; display: grid; justify-items: center; gap: 4px; font-size: 11px; color: var(--steel); }
.preset input { position: absolute; opacity: 0; width: 1px; height: 1px; }
.preset img, .preset .avatar { width: 64px; height: 64px; outline: 2px solid transparent; outline-offset: 2px; }
.preset:has(input:checked) img, .preset:has(input:checked) .avatar { outline-color: var(--ice); }
.preset:has(input:focus-visible) img { outline-color: var(--frost); }
.cosmetic-grid { display: grid; gap: 10px; grid-template-columns: repeat(auto-fill, minmax(min(100%, 210px), 1fr)); }
.cosmetic { position: relative; display: flex; align-items: center; gap: 12px; padding: 12px; border: 1px solid var(--line); background: var(--bg-input); cursor: pointer; }
.cosmetic input { position: absolute; opacity: 0; width: 1px; height: 1px; }
.cosmetic:has(input:checked) { border-color: var(--ice); background: var(--ice-soft); }
.cosmetic:has(input:focus-visible) { outline: 2px solid var(--frost); outline-offset: 2px; }
.cosmetic.is-locked { opacity: .45; cursor: not-allowed; }
.cosmetic__name { font-weight: 650; font-size: var(--fs-sm); display: block; }
.cosmetic__hint { font-size: 11px; color: var(--steel); display: block; }
.deco-preview { position: relative; width: 56px; height: 36px; flex: none; overflow: hidden; background: linear-gradient(120deg, #0F2236, #161D3A 55%, #24154A); }
.checklist { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; font-size: var(--fs-sm); }
.checklist li { display: flex; gap: 10px; align-items: center; }
.checklist .icon { color: var(--steel-dim); }
.checklist li.is-done { color: var(--steel); }
.checklist li.is-done .icon { color: var(--success); }
.connection { display: grid; grid-template-columns: 48px 1fr auto; gap: 14px; align-items: center; padding: 16px 0; border-bottom: 1px solid var(--line); }
.connection:last-child { border-bottom: 0; }
.connection__icon { width: 48px; height: 48px; display: grid; place-items: center; background: var(--bg-4); color: var(--ice); clip-path: polygon(0 0, calc(100% - 10px) 0, 100% 10px, 100% 100%, 10px 100%, 0 calc(100% - 10px)); }

/* Décorations de bannière */
.deco-snow::after, .deco-aurora::after, .deco-storm::after, .deco-shards::after {
  content: ""; position: absolute; inset: 0; pointer-events: none;
}
.deco-snow::after {
  background-image:
    radial-gradient(2px 2px at 20px 30px, #fff, transparent),
    radial-gradient(1.5px 1.5px at 80px 120px, #E4F6FF, transparent),
    radial-gradient(2px 2px at 150px 60px, #fff, transparent),
    radial-gradient(1px 1px at 210px 160px, #fff, transparent),
    radial-gradient(1.5px 1.5px at 260px 20px, #E4F6FF, transparent);
  background-size: 300px 200px;
  opacity: .7;
  animation: snowfall 14s linear infinite;
}
.deco-aurora::after {
  background: linear-gradient(100deg, transparent 10%, rgba(91, 231, 169, .35) 30%, rgba(118, 215, 255, .3) 45%, rgba(148, 117, 255, .35) 60%, transparent 80%);
  background-size: 200% 100%;
  mix-blend-mode: screen;
  animation: aurora-wave 12s ease-in-out infinite alternate;
}
.deco-storm::after {
  background: radial-gradient(ellipse at 70% 20%, rgba(148, 117, 255, .55), transparent 55%);
  animation: storm-flash 7s steps(1, end) infinite;
}
.deco-shards::after {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='120' height='120' viewBox='0 0 120 120'%3E%3Cpath d='M20 10l14 30-14 20-8-26zM90 20l18 18-10 36-16-30zM50 70l12 10-4 30-14-16z' fill='%2376D7FF' fill-opacity='.18'/%3E%3C/svg%3E");
}

/* 19. Quêtes */
.quest-nav { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 24px; }
@media (max-width: 639px) {
  /* Une seule ligne défilante plutôt que cinq lignes de filtres sur téléphone */
  .quest-nav, .pills--scroll { position: relative; flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none; margin-inline: -16px; padding-inline: 16px; }
  .quest-nav::-webkit-scrollbar, .pills--scroll::-webkit-scrollbar { display: none; }
  .quest-nav .pill, .pills--scroll .pill { flex: none; }
}
.quest-grid { display: grid; gap: 16px; grid-template-columns: repeat(auto-fill, minmax(min(100%, 330px), 1fr)); }
.quest { display: flex; flex-direction: column; gap: 14px; min-height: 100%; }
.quest__top { display: flex; gap: 14px; align-items: flex-start; }
.quest__icon {
  width: 52px; height: 52px; flex: none; display: grid; place-items: center;
  color: var(--ice); background: var(--ice-soft);
  clip-path: polygon(0 0, calc(100% - 11px) 0, 100% 11px, 100% 100%, 11px 100%, 0 calc(100% - 11px));
}
.quest__icon .icon { width: 26px; height: 26px; }
.quest__icon img { width: 100%; height: 100%; object-fit: cover; }
.quest--secret .quest__icon { color: var(--volt); background: var(--volt-soft); }
.quest__cat { font-size: var(--fs-xs); color: var(--steel); display: flex; gap: 8px; flex-wrap: wrap; }
.quest__title { margin: 2px 0 0; font-size: var(--fs-md); line-height: 1.25; }
.quest__desc { font-size: var(--fs-sm); color: #C3CBDA; margin: 0; }
.quest__objectives { list-style: none; margin: 0; padding: 0; display: grid; gap: 10px; }
.quest__reward { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; margin-top: auto; padding-top: 14px; border-top: 1px solid var(--line); }
.xp-reward { font-weight: 800; color: var(--ice); font-variant-numeric: tabular-nums; font-variation-settings: "SHRP" 100; }
.reward-badge { display: inline-flex; align-items: center; gap: 6px; font-size: var(--fs-xs); color: var(--steel); }
.reward-badge img { width: 26px; height: 26px; }
.quest__footer { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 10px; }
.quest__timer { font-size: var(--fs-xs); color: var(--steel); display: inline-flex; align-items: center; gap: 5px; }
.quest--completed { --panel-edge: linear-gradient(135deg, var(--success), var(--line) 40%); }
.quest--completed .quest__icon { color: var(--success); background: rgba(91, 231, 169, .12); }
.quest--completed .quest__desc { color: var(--steel); }
.quest-state { display: inline-flex; align-items: center; gap: 6px; font-size: var(--fs-sm); font-weight: 650; }
.quest-state--done { color: var(--success); }
.quest-state--pending { color: var(--warning); }
.quest-state--locked { color: var(--steel); }
.quest details summary { cursor: pointer; font-size: var(--fs-sm); color: var(--ice); font-weight: 600; }
.quest form { display: grid; gap: 8px; margin-top: 10px; }
.quest__footer form.inline { display: inline; margin-top: 0; }
.quest__claim { flex: 1 1 100%; }
.quest__claim .hint { margin: 0; }
.quest__code { flex: 1 1 220px; margin-top: 0 !important; }
.quest__code .input { min-width: 0; text-transform: uppercase; letter-spacing: .06em; }
.weekly-banner { display: grid; gap: 14px; align-items: center; margin-bottom: 28px; }
@media (min-width: 800px) { .weekly-banner { grid-template-columns: auto 1fr auto; gap: 24px; } }
.weekly-banner__icon {
  width: 56px; height: 56px; display: grid; place-items: center; color: #B9A6FF; background: var(--volt-soft);
  clip-path: polygon(50% 0, 100% 25%, 100% 75%, 50% 100%, 0 75%, 0 25%);
}
.weekly-banner__icon .icon { width: 26px; height: 26px; }

/* 20. Badges */
.badge-grid { display: grid; gap: 14px; grid-template-columns: repeat(auto-fill, minmax(min(100%, 200px), 1fr)); }
.badge-tile { position: relative; display: grid; justify-items: center; text-align: center; gap: 8px; padding: 20px 14px 16px; background: var(--bg-2); border: 1px solid var(--line); }
.badge-tile img { width: 88px; height: 88px; }
.badge-tile__name { font-weight: 700; font-size: var(--fs-sm); margin: 0; font-variation-settings: "SHRP" 70; }
.badge-tile__desc { font-size: var(--fs-xs); color: var(--steel); margin: 0; }
.badge-tile__cond { font-size: var(--fs-xs); color: #C3CBDA; margin: 0; }
.badge-tile__date { font-size: 11px; color: var(--steel-dim); }
.badge-tile.is-locked img { filter: grayscale(1) brightness(.55); opacity: .55; }
.badge-tile.is-locked .badge-tile__name { color: var(--steel); }
.badge-tile.is-secret img { filter: brightness(0) invert(.18); }
.badge-tile .meter { width: 100%; margin-top: 4px; }
.badge-tile__lock { position: absolute; top: 12px; right: 12px; color: var(--steel-dim); }
.badge-tile__feature { position: absolute; top: 8px; left: 8px; }
.badge-tile__feature button { background: none; border: 0; padding: 6px; color: var(--steel-dim); cursor: pointer; }
.badge-tile__feature button:hover { color: var(--gold); }
.badge-tile__feature button.is-on { color: var(--gold); }
.badge-tile__feature button.is-on .icon { fill: currentColor; }
.showcase { display: grid; gap: 16px; align-items: center; }
@media (min-width: 800px) { .showcase { grid-template-columns: minmax(220px, 1fr) 2fr; } }
.showcase__list { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 10px; min-height: 64px; align-items: center; }
.showcase__list li { display: grid; place-items: center; width: 64px; height: 64px; background: var(--bg-3); border: 1px solid var(--line); }
.showcase__list li[hidden] { display: none; }
.showcase__list img { width: 52px; height: 52px; }
.showcase__list .showcase__empty { width: auto; height: auto; padding: 10px 14px; background: none; border: 1px dashed var(--line-strong); color: var(--steel); font-size: var(--fs-sm); }
.badge-tile--legendaire:not(.is-locked) { border-color: rgba(255, 200, 87, .35); }
.badge-tile--mythique:not(.is-locked) { border-color: rgba(255, 111, 181, .35); }

/* Badge qui scintille (effet « sparkle ») : un reflet balaie l'hexagone et trois éclats s'allument tour à tour */
.badge-fx { position: relative; display: inline-grid; place-items: center; line-height: 0; isolation: isolate; }
.badge-fx img { display: block; }
.badge-fx--sparkle::before {
  content: ""; position: absolute; inset: 0; z-index: 1; pointer-events: none;
  clip-path: polygon(50% 5%, 89% 27.5%, 89% 72.5%, 50% 95%, 11% 72.5%, 11% 27.5%);
  background: linear-gradient(110deg, transparent 40%, rgba(255, 255, 255, .5) 50%, transparent 60%) no-repeat;
  background-size: 260% 100%; background-position: 130% 0;
  animation: badge-sheen 4.2s ease-in-out infinite;
}
.badge-fx__spark {
  position: absolute; z-index: 2; width: 24%; aspect-ratio: 1; pointer-events: none; opacity: 0;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3E%3Cdefs%3E%3CradialGradient id='g'%3E%3Cstop offset='0' stop-color='%23fff' stop-opacity='.85'/%3E%3Cstop offset='1' stop-color='%23B6EBFF' stop-opacity='0'/%3E%3C/radialGradient%3E%3C/defs%3E%3Ccircle cx='10' cy='10' r='7' fill='url(%23g)'/%3E%3Cpath d='M10 1l1.6 7.4L19 10l-7.4 1.6L10 19l-1.6-7.4L1 10l7.4-1.6z' fill='%23fff'/%3E%3C/svg%3E") center / contain no-repeat;
  animation: badge-twinkle 2.7s ease-in-out infinite;
}
.badge-fx__spark:nth-of-type(1) { top: 0; right: 4%; }
.badge-fx__spark:nth-of-type(2) { bottom: 6%; left: 2%; width: 18%; animation-delay: .9s; }
.badge-fx__spark:nth-of-type(3) { top: 22%; left: 10%; width: 14%; animation-delay: 1.8s; }
@keyframes badge-sheen { 0% { background-position: 130% 0; } 45%, 100% { background-position: -30% 0; } }
@keyframes badge-twinkle { 0%, 100% { opacity: 0; transform: scale(.3) rotate(0deg); } 35% { opacity: 1; transform: scale(1) rotate(45deg); } 60% { opacity: 0; transform: scale(.5) rotate(90deg); } }
@media (prefers-reduced-motion: reduce) {
  .badge-fx--sparkle::before { animation: none; background: none; }
  .badge-fx__spark { animation: none; opacity: .8; transform: none; }
}

/* 21. Classements */
.podium { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; align-items: end; margin-bottom: 24px; }
.podium__step {
  --cut: 12px;
  display: grid; justify-items: center; gap: 6px; text-align: center; padding: 18px 8px 16px;
  background: var(--bg-2); clip-path: polygon(0 0, calc(100% - var(--cut)) 0, 100% var(--cut), 100% 100%, var(--cut) 100%, 0 calc(100% - var(--cut))); border-top: 2px solid var(--line-strong);
}
.podium__step--1 { order: 2; padding-top: 30px; background: linear-gradient(180deg, rgba(255, 200, 87, .14), var(--bg-2) 60%); border-top-color: var(--gold); }
.podium__step--2 { order: 1; background: linear-gradient(180deg, rgba(118, 215, 255, .12), var(--bg-2) 60%); border-top-color: var(--ice); }
.podium__step--3 { order: 3; background: linear-gradient(180deg, rgba(148, 117, 255, .12), var(--bg-2) 60%); border-top-color: var(--volt); }
.podium__place { font-size: var(--fs-2xl); font-weight: 850; line-height: 1; font-variation-settings: "SHRP" 100; }
.podium__step--1 .podium__place { color: var(--gold); font-size: var(--fs-3xl); }
.podium__step--2 .podium__place { color: var(--ice); }
.podium__step--3 .podium__place { color: var(--volt); }
.podium__name { font-weight: 700; font-size: var(--fs-sm); max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.podium__value { font-size: var(--fs-xs); color: var(--steel); font-variant-numeric: tabular-nums; }
.rank-num { font-weight: 800; font-variant-numeric: tabular-nums; color: var(--steel); font-variation-settings: "SHRP" 100; }
.my-rank { display: flex; flex-wrap: wrap; gap: 12px; align-items: center; justify-content: space-between; margin-bottom: 18px; }
.rank-num--1 { color: var(--gold); }
.rank-num--2 { color: var(--ice); }
.rank-num--3 { color: var(--volt); }
.leaderboard td:first-child, .leaderboard th:first-child { width: 56px; }
.leaderboard .rank-chip { margin-right: 4px; }
.xp-plus { color: var(--success); font-variant-numeric: tabular-nums; }
.xp-minus { color: #FF95A8; font-variant-numeric: tabular-nums; }
.reward-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 12px; font-size: var(--fs-sm); }
.reward-list li { display: grid; grid-template-columns: 64px 1fr; gap: 10px; align-items: start; }
.reward-list .level-pip { justify-self: start; }
.rank-ladder { list-style: none; margin: 0; padding: 0; display: grid; gap: 2px; }
.rank-ladder li { display: flex; justify-content: space-between; align-items: center; gap: 10px; padding: 8px 10px; border-left: 2px solid transparent; }
.rank-ladder li:not(.is-reached):not(.is-current) .rank-chip { opacity: .55; }
.rank-ladder li.is-current { border-left-color: var(--volt); background: var(--volt-soft); }
/* Sous-paliers : en retrait sous le palier qui les précède */
.rank-ladder li.rank-ladder__division { padding: 4px 10px 4px 32px; }
.rank-ladder__division .rank-chip { font-size: .75rem; }
.rank-ladder__division .rank-chip .icon { width: 16px; height: 16px; }
.podium .rank-chip { font-size: 11px; }

/* 22. Équipes */
.team-card { display: flex; flex-direction: column; gap: 14px; }
.team-card__head { display: flex; gap: 14px; align-items: center; }
.team-logo {
  --size: 56px;
  width: var(--size); height: var(--size); flex: none; display: grid; place-items: center;
  background: var(--bg-4); color: var(--ice); font-weight: 850; font-size: calc(var(--size) * .3); font-variation-settings: "SHRP" 100;
  clip-path: polygon(50% 0, 100% 25%, 100% 75%, 50% 100%, 0 75%, 0 25%);
}
.team-logo img { width: 100%; height: 100%; object-fit: cover; }
.team-logo--lg { --size: 104px; }
.team-logo--sm { --size: 36px; }
.team-card__name { margin: 0; font-size: var(--fs-md); }
.team-card__name a { color: var(--frost); }
.team-card__tag { color: var(--steel); font-weight: 600; font-size: var(--fs-sm); }
.team-card__desc { font-size: var(--fs-sm); color: #C3CBDA; margin: 0; }
.team-card__foot { margin-top: auto; display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: 10px; padding-top: 12px; border-top: 1px solid var(--line); font-size: var(--fs-xs); color: var(--steel); }
.team-hero { display: grid; gap: 20px; align-items: end; grid-template-columns: auto 1fr; margin-top: -52px; position: relative; padding: 0 4px; }
.roster { display: grid; gap: 10px; grid-template-columns: repeat(auto-fill, minmax(min(100%, 260px), 1fr)); }
.roster__member { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 12px 14px; background: var(--bg-2); border: 1px solid var(--line); }
.roster .user-chip__sub { white-space: normal; line-height: 1.4; }

/* 23. Tournois */
.tournament-card { display: flex; flex-direction: column; gap: 14px; }
.tournament-card__banner { --cut: 12px; height: 120px; margin: -4px -4px 0; clip-path: polygon(0 0, calc(100% - var(--cut)) 0, 100% var(--cut), 100% 100%, var(--cut) 100%, 0 calc(100% - var(--cut))); background: linear-gradient(120deg, #10233A, #1C1546); position: relative; overflow: hidden; }
.tournament-card__banner img { width: 100%; height: 100%; object-fit: cover; }
.tournament-card__status { position: absolute; left: 12px; top: 12px; }
.tournament-card__title { margin: 0; font-size: var(--fs-md); }
.tournament-card__title a { color: var(--frost); }
.tournament-card__facts { display: flex; flex-wrap: wrap; gap: 6px; }
.tournament-card__foot { margin-top: auto; display: flex; justify-content: space-between; align-items: center; gap: 10px; padding-top: 12px; border-top: 1px solid var(--line); font-size: var(--fs-xs); color: var(--steel); }
.countdown { font-variant-numeric: tabular-nums; font-weight: 700; color: var(--frost); }

/* Tournois officiels : étiquette dorée pleine, liseré et sceau du badge sur la carte, bandeau sur la page du tournoi */
.tag--official { color: #1F1504; background: linear-gradient(135deg, #FFE7A6, var(--gold) 55%, #E7A93A); font-weight: 750; }
.tag--official .icon { color: currentColor; }
.tag--xs { padding: 1px 6px; font-size: 11px; vertical-align: 1px; }
.tournament-card--official .tournament-card__banner { background: linear-gradient(120deg, #33240A, #10233A 55%, #1C1546); }
.tournament-card--official .tournament-card__banner::after { content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 2px; background: linear-gradient(90deg, var(--gold), rgba(255, 200, 87, 0)); }
.tournament-card--official > div > .tag--official { margin-bottom: 8px; }
.official-seal { position: absolute; right: 14px; top: 10px; line-height: 0; filter: drop-shadow(0 4px 10px rgba(0, 0, 0, .55)); }
.official-seal img { width: 52px; height: 52px; }
.list-row__main > .tag--official { margin-bottom: 4px; }
.official-banner {
  display: flex; align-items: center; gap: 16px; margin-bottom: 20px; padding: 14px 18px;
  border-left: 3px solid var(--gold); background: linear-gradient(100deg, rgba(255, 200, 87, .15), rgba(255, 200, 87, .03) 65%, transparent);
}
.official-banner > img, .official-banner > .badge-fx { flex: none; filter: drop-shadow(0 4px 12px rgba(255, 200, 87, .25)); }
.official-banner__title { margin: 0 0 2px; font-size: var(--fs-md); font-weight: 750; color: var(--gold); font-variation-settings: "SHRP" 80; }
.official-banner__text { margin: 0; font-size: var(--fs-sm); color: #D5DCE8; }
.official-banner__text strong { color: var(--frost); }
.official-reward { display: flex; align-items: center; gap: 10px; padding-top: 12px; border-top: 1px solid var(--line); }
.official-reward > img { flex: none; }
.official-choice {
  display: flex; align-items: center; gap: 16px; margin-bottom: 22px; padding: 14px 16px;
  background: rgba(255, 200, 87, .06); box-shadow: inset 0 0 0 1px rgba(255, 200, 87, .3);
}
.official-choice > img, .official-choice > .badge-fx { flex: none; }
.official-choice .switch { flex: 1; min-width: 0; padding: 0; border-bottom: 0; }
.official-choice .switch input:checked { background: rgba(255, 200, 87, .32); }
.official-choice .switch input:checked::after { background: var(--gold); }
@media (max-width: 479px) {
  .official-banner { align-items: flex-start; gap: 12px; padding: 12px 14px; }
  .official-banner > img { width: 52px; height: 52px; }
  .official-choice { align-items: flex-start; gap: 12px; }
  .official-choice > img { width: 40px; height: 40px; }
}

.bracket-scroll { position: relative; overflow-x: auto; padding-bottom: 12px; }
.bracket { display: grid; grid-auto-flow: column; grid-auto-columns: minmax(220px, 240px); gap: 36px; align-items: stretch; min-width: min-content; }
.bracket__round { display: flex; flex-direction: column; }
.bracket__round-title { font-size: var(--fs-xs); font-weight: 700; color: var(--steel); margin-bottom: 10px; font-variation-settings: "SHRP" 60; }
.bracket__matches { flex: 1; display: flex; flex-direction: column; justify-content: space-around; gap: 16px; }
.match-card { position: relative; background: var(--bg-2); border: 1px solid var(--line); font-size: var(--fs-sm); }
.match-card.is-ready { border-color: rgba(118, 215, 255, .45); }
.match-card.is-disputed { border-color: rgba(255, 92, 122, .6); }
.match-card.is-mine { box-shadow: 0 0 0 1px var(--volt); }
.match-card.is-void { opacity: .35; }
.bracket__round:not(:last-child) .match-card::after {
  content: ""; position: absolute; right: -19px; top: 50%; width: 18px; height: 1px; background: var(--line-strong);
}
.match-card__slot { display: grid; grid-template-columns: 1fr auto; gap: 8px; align-items: center; padding: 8px 10px; }
.match-card__slot + .match-card__slot { border-top: 1px solid var(--line); }
.match-card__slot.is-winner { background: var(--ice-soft); }
.match-card__slot.is-winner .match-card__name { color: var(--frost); font-weight: 700; }
.match-card__slot.is-loser .match-card__name { color: var(--steel-dim); }
.match-card__name { color: #C3CBDA; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.match-card__name.is-empty { color: var(--steel-dim); font-style: italic; }
.match-card__score { font-weight: 800; font-variant-numeric: tabular-nums; min-width: 22px; text-align: right; }
.match-card__foot { display: flex; justify-content: space-between; gap: 8px; padding: 6px 10px; border-top: 1px solid var(--line); font-size: 11px; color: var(--steel); }
.match-card__foot a { font-weight: 600; }
.bracket-section + .bracket-section { margin-top: 32px; }
.group-table td:first-child { width: 32px; }
.group-table tr.is-qualified td { background: rgba(91, 231, 169, .06); }
.group-table tr.is-qualified td:first-child { box-shadow: inset 2px 0 0 var(--success); }

.match-card__seed { display: inline-block; min-width: 18px; margin-right: 6px; font-size: 11px; color: var(--steel-dim); font-variant-numeric: tabular-nums; }
.match-row { display: grid; gap: 10px; }
.match-row__head { display: flex; justify-content: space-between; align-items: center; gap: 10px; }
.match-row__versus { margin: 0; font-size: var(--fs-md); }
.match-row__plan { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 8px 12px; padding: 8px 10px; background: var(--bg-input); }
.match-row__plan .icon { width: 15px; height: 15px; color: var(--steel); vertical-align: -2px; }
.score-form { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 10px; }
.score-form__team { font-weight: 650; font-size: var(--fs-sm); max-width: 16ch; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.score-form__input { width: 76px; text-align: center; font-weight: 750; font-variant-numeric: tabular-nums; }
.score-form__sep { color: var(--steel); font-weight: 700; }
.score-form .btn { margin-left: auto; }
@media (max-width: 559px) { .score-form .btn { margin-left: 0; width: 100%; } }
.is-strong { font-weight: 700; color: var(--frost); }
.stat-strip dd.small-dd { font-size: var(--fs-sm); font-weight: 650; line-height: 1.5; }
.manage-match { display: grid; gap: 10px; }
@media (min-width: 900px) { .manage-match { grid-template-columns: 1.2fr 1fr; align-items: center; } }
.manage-match__actions { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; }
.status-dot { display: inline-flex; align-items: center; gap: 6px; font-size: var(--fs-xs); font-weight: 650; }
.status-dot::before { content: ""; width: 8px; height: 8px; background: currentColor; clip-path: polygon(50% 0, 100% 50%, 50% 100%, 0 50%); }
.status--registration { color: var(--success); }
.status--ongoing { color: var(--ice); }
.status--completed { color: var(--steel); }
.status--draft { color: var(--warning); }
.status--cancelled { color: var(--danger); }

/* 24. Accueil */
.hero { display: grid; gap: 32px; align-items: center; padding: 20px 0 12px; }
@media (min-width: 1024px) { .hero { grid-template-columns: minmax(0, 1.05fr) minmax(0, .95fr); gap: 48px; padding: 40px 0 24px; } }
.hero__title {
  font-size: clamp(2.5rem, 6.4vw, 4.5rem); line-height: .98; font-weight: 880; letter-spacing: -.03em;
  font-variation-settings: "SHRP" 100; margin: 0 0 20px; max-width: 13ch;
}
.hero__lead { font-size: var(--fs-md); color: #C3CBDA; max-width: 52ch; margin-bottom: 28px; }
.hero__facts { display: flex; flex-wrap: wrap; gap: 8px 24px; margin-top: 28px; font-size: var(--fs-sm); color: var(--steel); }
.hero__facts strong { color: var(--frost); font-variant-numeric: tabular-nums; }

/* L'ascension : les rangs gravissent la pente du Λ */
.ascent { position: relative; aspect-ratio: 5 / 4; max-width: 560px; width: 100%; justify-self: center; container-type: inline-size; }
.ascent__mountain { position: absolute; inset: 0; width: 100%; height: 100%; }
.ascent__steps { list-style: none; margin: 0; padding: 0; position: absolute; inset: 0; }
.ascent__step {
  --icon: 38px;
  position: absolute; display: flex; flex-direction: row-reverse; align-items: center; gap: 10px;
  transform: translate(calc(-100% + var(--icon) / 2), -50%);
  animation: rise .6s var(--ease-out) both; animation-delay: calc(var(--i) * 90ms + 200ms);
}
.ascent__step .insignia { width: var(--icon); height: var(--icon); flex: none; filter: drop-shadow(0 4px 10px rgba(0, 0, 0, .6)); }
.ascent__label { display: grid; line-height: 1.2; white-space: nowrap; text-align: right; }
.ascent__label strong { font-size: var(--fs-sm); font-variation-settings: "SHRP" 90; color: var(--rank-color); }
.ascent__label span { font-size: 11px; color: var(--steel); }
.ascent__step--summit { --icon: 56px; }
.ascent__step--summit .insignia { filter: drop-shadow(0 0 18px rgba(148, 117, 255, .8)); }
/* Sous-paliers : petits losanges sur l'arête, entre deux paliers */
.ascent__pip {
  position: absolute; width: 7px; height: 7px; transform: translate(-50%, -50%) rotate(45deg);
  background: var(--rank-color); border: 1px solid rgba(8, 10, 16, .85);
  box-shadow: 0 0 8px var(--rank-color); opacity: .9;
  animation: pip-in .6s var(--ease-out) both; animation-delay: calc(var(--i) * 90ms + 260ms);
}
@keyframes pip-in { from { opacity: 0; } }
@container (max-width: 470px) { .ascent__pip { display: none; } }
@media (max-width: 520px) {
  .ascent__pip { display: none; }
  .ascent__label span { display: none; }
  .ascent__step { --icon: 28px; }
  .ascent__step--summit { --icon: 40px; }
}

/* Bannières de l'accueil (pubs, partenaires, infos du site) : carrousel au format 3:1.
   Les traits (un par bannière) sont sous la bannière : ils ne cachent jamais l'image. */
.spotlight { --cut: 14px; display: grid; gap: 8px; min-width: 0; }
.spotlight__frame {
  position: relative; min-width: 0; background: var(--bg-3);
  clip-path: polygon(0 0, calc(100% - var(--cut)) 0, 100% var(--cut), 100% 100%, var(--cut) 100%, 0 calc(100% - var(--cut)));
}
.spotlight__viewport {
  display: flex; overflow-x: auto; overflow-y: hidden; overscroll-behavior-x: contain;
  scroll-snap-type: x mandatory; scrollbar-width: none;
}
.spotlight__viewport::-webkit-scrollbar { display: none; }
.spotlight__slide { position: relative; flex: 0 0 100%; aspect-ratio: 3 / 1; scroll-snap-align: start; scroll-snap-stop: always; overflow: hidden; }
.spotlight__link { display: block; height: 100%; color: var(--frost); }
.spotlight__link:hover { text-decoration: none; }
.spotlight__link:focus-visible { outline: 3px solid var(--frost); outline-offset: -3px; }
.spotlight__image { display: block; width: 100%; height: 100%; object-fit: cover; }
.spotlight__caption {
  position: absolute; left: 0; right: 0; bottom: 0; padding: 32px 14px 10px;
  background: linear-gradient(180deg, rgba(8, 10, 16, 0), rgba(8, 10, 16, .86));
}
.spotlight__title {
  display: block; max-width: 34ch; color: var(--frost);
  font-size: clamp(.875rem, 2.4vw, 1.5rem); font-weight: 800; line-height: 1.15; letter-spacing: -.01em;
  font-variation-settings: "SHRP" 90; text-shadow: 0 2px 12px rgba(0, 0, 0, .6);
}
/* Mention (Publicité, Partenaire…) et annonceur, quand la bannière en a une : dans le coin de l'image */
.spotlight__mention {
  position: absolute; top: 6px; left: 6px; z-index: 1; margin: 0; max-width: calc(100% - 12px);
  display: flex; flex-wrap: wrap; gap: 3px; pointer-events: none; font-size: 10px; line-height: 1.25;
}
.spotlight__mention > span, .spotlight__host { padding: 2px 6px; background: rgba(8, 10, 16, .8); color: #DCE3F0; }
.spotlight__label { font-weight: 750; color: var(--frost) !important; }
.spotlight__host {
  position: absolute; top: 6px; right: 6px; z-index: 1; display: inline-flex; align-items: center; gap: 4px;
  font-size: 10px; line-height: 1.25; pointer-events: none;
}
.spotlight__host .icon { width: 11px; height: 11px; }
.spotlight__bar { display: flex; align-items: center; gap: 6px; min-height: 32px; min-width: 0; }
.spotlight__dot:focus-visible { outline: 2px solid var(--frost); outline-offset: 2px; }
.spotlight__dots { display: flex; flex-wrap: wrap; min-width: 0; margin-left: -2px; }
.spotlight__dot { position: relative; width: 28px; height: 32px; padding: 0; background: none; border: 0; cursor: pointer; }
.spotlight__dot::before, .spotlight__dot::after { content: ""; position: absolute; top: 14px; height: 4px; left: 6px; right: 6px; }
.spotlight__dot::before { background: var(--line-strong); }
.spotlight__dot:hover::before { background: var(--steel-dim); }
.spotlight__dot[aria-current="true"]::before { left: 2px; right: 2px; background: rgba(118, 215, 255, .3); }
.spotlight__dot::after { left: 2px; right: 2px; background: var(--ice); transform: scaleX(0); transform-origin: left center; }
.spotlight__dot[aria-current="true"]::after { transform: scaleX(1); }
/* Défilement automatique : la pastille active se remplit pendant l'affichage de la bannière */
.spotlight.is-ticking .spotlight__dot[aria-current="true"]::after { animation: spotlight-fill var(--spotlight-interval, 6s) linear both; }
.spotlight.is-holding .spotlight__dot[aria-current="true"]::after { animation-play-state: paused; }
@keyframes spotlight-fill { from { transform: scaleX(0); } to { transform: scaleX(1); } }
.spotlight__manage { margin-left: auto; display: inline-flex; align-items: center; gap: 6px; font-size: var(--fs-xs); font-weight: 600; white-space: nowrap; }
.spotlight__manage .icon { width: 14px; height: 14px; }
@media (min-width: 640px) {
  .spotlight__mention, .spotlight__host { top: 10px; font-size: 12px; }
  .spotlight__mention { left: 10px; gap: 4px; }
  .spotlight__host { right: 10px; }
  .spotlight__mention > span, .spotlight__host { padding: 3px 8px; }
  .spotlight__caption { padding: 48px 22px 16px; }
}
@media (max-width: 400px) {
  .spotlight__host span { display: none; }
}
@media (forced-colors: active) {
  .spotlight__dot::before { background: GrayText; }
  .spotlight__dot::after { background: Highlight; }
}

/* Page d'une bannière (infos complémentaires) */
.spotlight-page { --cut: 18px; }
.spotlight-page__banner {
  aspect-ratio: 3 / 1; background: var(--bg-3); overflow: hidden;
  clip-path: polygon(0 0, calc(100% - var(--cut)) 0, 100% var(--cut), 100% 100%, var(--cut) 100%, 0 calc(100% - var(--cut)));
}
.spotlight-page__banner img { display: block; width: 100%; height: 100%; object-fit: cover; }
.spotlight-page__body { padding: 20px 0 0; }
.spotlight-page__mention { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 10px; margin: 0 0 10px; font-size: var(--fs-sm); color: var(--steel); }
.spotlight-page__mention .spotlight__label { padding: 3px 8px; background: var(--bg-4); font-size: var(--fs-xs); }
.spotlight-page__title { font-size: clamp(1.5rem, 4vw, 2.25rem); margin: 0 0 6px; }
.spotlight-page__text { font-size: var(--fs-md); line-height: 1.65; max-width: 68ch; margin-top: 18px; }

.status-panel { display: grid; gap: 24px; }
@media (min-width: 900px) { .status-panel { grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr); gap: 32px; } }
.status-panel__id { display: flex; gap: 18px; align-items: center; margin-bottom: 20px; }
.status-panel__hello { margin: 0; font-size: var(--fs-2xl); }
.status-panel__level { display: grid; grid-template-columns: auto 1fr; gap: 18px; align-items: center; }
/* Hexagone du niveau dessiné en image de fond (et non découpé par clip-path) : sur certains navigateurs, la découpe
   disparaissait quand le carrousel de l'accueil passait à la bannière suivante, et l'hexagone devenait carré. */
.big-level {
  display: grid; place-items: center; width: 84px; height: 84px;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 84 84'%3E%3Cdefs%3E%3ClinearGradient id='g' x1='0' y1='0' x2='1' y2='1'%3E%3Cstop offset='0' stop-color='%239475FF'/%3E%3Cstop offset='1' stop-color='%235B3FD6'/%3E%3C/linearGradient%3E%3C/defs%3E%3Cpolygon points='42 0 84 21 84 63 42 84 0 63 0 21' fill='url(%23g)'/%3E%3C/svg%3E") center / 100% 100% no-repeat;
}
.big-level strong { font-size: var(--fs-3xl); font-weight: 880; line-height: 1; font-variation-settings: "SHRP" 100; font-variant-numeric: tabular-nums; }
.big-level small { display: block; font-size: 10px; font-weight: 700; margin-top: -2px; text-align: center; color: rgba(255, 255, 255, .8); }
.daily-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 12px; }
.daily-list li { display: grid; grid-template-columns: 1fr auto; gap: 6px 12px; align-items: center; }
.daily-list .meter { grid-column: 1 / -1; }
.daily-list__name { font-size: var(--fs-sm); font-weight: 600; }
.daily-list__xp { font-size: var(--fs-xs); color: var(--ice); font-weight: 700; }
.daily-list li.is-done .daily-list__name { color: var(--steel); text-decoration: line-through; text-decoration-color: rgba(155, 166, 186, .5); }

.leader-mini { list-style: none; margin: 0; padding: 0; display: grid; gap: 10px; }
.leader-mini li { display: grid; grid-template-columns: 22px 1fr auto; gap: 10px; align-items: center; }
.leader-mini .rank-num { text-align: center; }
.leader-mini__value { font-size: var(--fs-xs); color: var(--ice); font-weight: 700; font-variant-numeric: tabular-nums; }

/* 25. Authentification */
.auth { display: grid; gap: 32px; align-items: start; max-width: 1040px; margin: 0 auto; }
@media (min-width: 900px) { .auth { grid-template-columns: minmax(0, 1fr) 440px; gap: 48px; padding-top: 24px; } }
.auth__intro h1 { font-size: clamp(2rem, 4vw, 3rem); max-width: 14ch; }
.auth__intro p { color: #C3CBDA; max-width: 46ch; }
.auth__perks { list-style: none; padding: 0; margin: 24px 0 0; display: grid; gap: 14px; }
.auth__perks li { display: grid; grid-template-columns: 36px 1fr; gap: 12px; align-items: start; font-size: var(--fs-sm); color: #C3CBDA; }
.auth__perks .icon { width: 22px; height: 22px; color: var(--ice); margin-top: 2px; }
.auth__perks strong { display: block; color: var(--frost); }
.auth__card h2 { font-size: var(--fs-xl); margin-bottom: 18px; }
.auth__alt { margin-top: 18px; font-size: var(--fs-sm); color: var(--steel); text-align: center; }

/* 26. Pages éditoriales et légales */
.prose { max-width: 72ch; font-size: 1rem; line-height: 1.7; color: #D8DEEA; }
.prose h2 { margin-top: 2em; font-size: var(--fs-xl); color: var(--frost); }
.prose h3 { margin-top: 1.6em; color: var(--frost); }
.prose li { margin-bottom: .4em; }
.prose a { text-decoration: underline; }
.placeholder-field { color: var(--warning); background: rgba(255, 200, 87, .1); padding: 0 .3em; font-weight: 600; }
.prose p, .prose ul, .prose ol, .prose dl, .prose .table-wrap { margin: 0 0 1em; }
.prose ul, .prose ol { padding-left: 1.3em; }
.prose strong { color: var(--frost); }
.prose h2 { scroll-margin-top: calc(var(--header-h) + 16px); }
.prose .table-wrap { font-size: var(--fs-sm); line-height: 1.5; }
.prose .table td, .prose .table th { vertical-align: top; }
.prose code { font-size: .875em; background: var(--bg-3); padding: .1em .35em; }

/* Document à sommaire (pages légales, règlement) */
.doc { display: grid; gap: 28px; }
.doc__toc { font-size: var(--fs-sm); }
.doc__toc-title { margin: 0 0 8px; font-weight: 700; color: var(--frost); }
.doc__toc ol { list-style: none; margin: 0; padding: 0; display: grid; gap: 2px; }
.doc__toc a { display: block; padding: 5px 0 5px 12px; color: var(--steel); border-left: 2px solid var(--line); line-height: 1.4; }
.doc__toc a:hover { color: var(--frost); border-left-color: var(--ice); text-decoration: none; }
.doc__meta { margin: 0 0 1.5em; font-size: var(--fs-xs); color: var(--steel-dim); }
.legal-card { display: grid; grid-template-columns: max-content minmax(0, 1fr); gap: 8px 20px; margin: 0 0 1.2em; padding: 16px 18px; background: var(--bg-2); border: 1px solid var(--line); font-size: var(--fs-sm); line-height: 1.55; }
.legal-card dt { color: var(--steel); }
.legal-card dd { margin: 0; color: var(--frost); overflow-wrap: anywhere; }
@media (max-width: 560px) { .legal-card { grid-template-columns: 1fr; gap: 2px; } .legal-card dd { margin-bottom: 8px; } }
@media (max-width: 1023px) {
  .doc__toc { padding: 14px 16px; background: var(--bg-2); border: 1px solid var(--line); }
}
@media (min-width: 1024px) {
  .doc { grid-template-columns: 220px minmax(0, 1fr); gap: 48px; align-items: start; }
  .doc__toc { position: sticky; top: calc(var(--header-h) + 24px); }
}

.empty {
  display: grid; justify-items: center; text-align: center; gap: 10px;
  padding: 48px 20px; border: 1px dashed var(--line-strong); color: var(--steel);
}
.empty .icon { width: 40px; height: 40px; color: var(--line-strong); }
.empty h2, .empty h3 { color: var(--frost); margin: 0; font-size: var(--fs-md); }
.empty p { margin: 0; max-width: 46ch; font-size: var(--fs-sm); }

.error-page { display: grid; justify-items: start; gap: 16px; padding: 48px 0; max-width: 640px; }
.error-page__code { font-size: clamp(4rem, 14vw, 9rem); font-weight: 900; line-height: .9; font-variation-settings: "SHRP" 100; letter-spacing: -.04em; color: transparent; -webkit-text-stroke: 2px var(--line-strong); }
.error-page__secret { font-size: 11px; color: #1A2233; user-select: all; margin-top: 48px; }
.error-page__secret:hover { color: var(--steel-dim); }

.pagination { display: flex; flex-wrap: wrap; justify-content: center; gap: 6px; margin-top: 28px; }
.pagination a, .pagination span {
  display: inline-grid; place-items: center; min-width: 40px; height: 40px; padding: 0 10px;
  background: var(--bg-2); border: 1px solid var(--line); color: var(--frost); font-weight: 600; font-size: var(--fs-sm); font-variant-numeric: tabular-nums;
}
.pagination a:hover { border-color: var(--ice); text-decoration: none; }
.pagination [aria-current="page"] { background: var(--ice); color: #03131D; border-color: var(--ice); }
.pagination .is-gap { background: none; border: 0; color: var(--steel); }

.cookie-banner {
  position: fixed; z-index: 95; left: 16px; right: 16px; bottom: calc(16px + env(safe-area-inset-bottom));
  max-width: 560px; margin-left: auto;
}
@media (max-width: 1119px) { .cookie-banner { bottom: calc(var(--tabbar-h) + 12px + env(safe-area-inset-bottom)); } }
.cookie-banner p { font-size: var(--fs-sm); color: #C3CBDA; }

/* 27. Utilitaires */
.sr-only { position: absolute !important; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0; }
.muted { color: var(--steel); }
.small { font-size: var(--fs-sm); }
.xsmall { font-size: var(--fs-xs); }
.nowrap { white-space: nowrap; }
.num { font-variant-numeric: tabular-nums; }
.text-ice { color: var(--ice); }
.text-volt { color: var(--volt); }
.text-success { color: var(--success); }
.text-danger { color: var(--danger); }
.text-gold { color: var(--gold); }
.mt-0 { margin-top: 0 !important; }
.mb-0 { margin-bottom: 0 !important; }
.mt-1 { margin-top: 8px; } .mt-2 { margin-top: 16px; } .mt-3 { margin-top: 24px; } .mt-4 { margin-top: 32px; }
.mb-1 { margin-bottom: 8px; } .mb-2 { margin-bottom: 16px; } .mb-3 { margin-bottom: 24px; }
.w-full { width: 100%; }
.truncate { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; min-width: 0; }
@media (max-width: 639px) { .hide-sm { display: none !important; } }
@media (min-width: 1024px) { .hide-lg { display: none !important; } }
@media (max-width: 1023px) { .show-lg { display: none !important; } }

/* 28. Animations (désactivées si l'utilisateur préfère réduire les animations) */
@keyframes meter-fill { from { width: 0; } }
@keyframes toast-in { from { opacity: 0; transform: translateY(-10px) scale(.97); } }
@keyframes toast-out { to { opacity: 0; transform: translateX(24px); } }
@keyframes drop-in { from { opacity: 0; transform: translateY(-6px); } }
@keyframes drawer-in { from { transform: translateX(24px); opacity: 0; } }
@keyframes rise { from { opacity: 0; transform: translate(calc(-100% + var(--icon) / 2), calc(-50% + 14px)); } }
@keyframes aurora-shift { to { background-position: 300% 0; } }
@keyframes spin-frame { to { --spin: 360deg; } }
@keyframes snowfall { from { background-position: 0 0; } to { background-position: 40px 200px; } }
@keyframes aurora-wave { from { background-position: 0% 0; } to { background-position: 100% 0; } }
@keyframes storm-flash { 0%, 100% { opacity: .25; } 47% { opacity: .25; } 48% { opacity: 1; } 49% { opacity: .35; } 50% { opacity: .9; } 52% { opacity: .25; } }
@keyframes pulse-ring { 0% { box-shadow: 0 0 0 0 rgba(148, 117, 255, .55); } 100% { box-shadow: 0 0 0 10px rgba(148, 117, 255, 0); } }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: .001ms !important; animation-iteration-count: 1 !important; transition-duration: .001ms !important; scroll-behavior: auto !important; }
}
@media print {
  .site-header, .tabbar, .site-footer, .toasts, .cookie-banner { display: none !important; }
  body { background: #fff; color: #000; }
}


/* ==========================================================================
   Messagerie privée : boîte de réception à gauche, conversation à droite ;
   sur téléphone, l'une ou l'autre en plein écran.
   ========================================================================== */
.messenger-page__head { margin-bottom: 18px; }
.messenger {
  display: grid; grid-template-columns: minmax(250px, 340px) minmax(0, 1fr);
  height: clamp(480px, calc(100vh - var(--header-h) - 220px), 860px);
  border: 1px solid var(--line); background: var(--bg-2);
}
.messenger__list { min-width: 0; overflow-y: auto; border-right: 1px solid var(--line); overscroll-behavior: contain; }
.messenger__list .empty { margin: 16px; padding: 32px 16px; }
.messenger__list .pagination { padding: 12px; }
.messenger__pane { min-width: 0; min-height: 0; display: flex; flex-direction: column; }

.conv-list { display: flex; flex-direction: column; }
.conv-row { position: relative; display: flex; align-items: center; gap: 12px; padding: 12px 14px; border-bottom: 1px solid var(--line); color: var(--steel); }
.conv-row:hover { background: var(--bg-3); text-decoration: none; }
.conv-row.is-active { background: var(--ice-soft); box-shadow: inset 3px 0 0 var(--ice); }
.conv-row__main { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.conv-row__top { display: flex; align-items: baseline; justify-content: space-between; gap: 8px; }
.conv-row__name { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: var(--frost); font-weight: 650; }
.conv-row__time { flex: none; font-size: var(--fs-xs); color: var(--steel-dim); }
.conv-row__preview { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: var(--fs-sm); }
.conv-row.is-unread .conv-row__preview { color: var(--frost); font-weight: 560; }
.conv-row.is-unread .conv-row__time { color: var(--ice); }
.conv-row .conv-row__pip { position: static; flex: none; }

.thread__head { display: flex; align-items: center; gap: 12px; padding: 10px 14px; border-bottom: 1px solid var(--line); }
.thread__back { display: none; flex: none; }
.thread__who { flex: 1; min-width: 0; display: flex; flex-direction: column; align-items: flex-start; gap: 3px; }
.thread__name { max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: var(--frost); font-weight: 700; }
.thread__menu .dropdown__panel { right: 0; left: auto; }
.thread__menu .menu-list form { margin: 0; }
.thread__body { flex: 1; min-height: 0; overflow-y: auto; overscroll-behavior: contain; display: flex; flex-direction: column; gap: 6px; padding: 16px 18px 20px; }
.thread__older { align-self: center; display: inline-flex; align-items: center; gap: 6px; margin-bottom: 6px; font-size: var(--fs-sm); }
.thread__older .icon { width: 16px; height: 16px; }
.thread__day { align-self: center; margin: 10px 0 4px; font-size: var(--fs-xs); color: var(--steel); }
.thread__day span { display: inline-block; padding: 3px 10px; background: var(--bg-3); border: 1px solid var(--line); }
.thread__empty, .thread__placeholder { margin: auto; display: flex; flex-direction: column; align-items: center; gap: 10px; padding: 24px; text-align: center; color: var(--steel); }
.thread__empty p, .thread__placeholder p { margin: 0; max-width: 40ch; }
.thread__empty .icon, .thread__placeholder .icon { width: 40px; height: 40px; color: var(--line-strong); }
.thread__start { padding: 24px; max-width: 620px; }

.msg { display: flex; flex-direction: column; max-width: min(78%, 560px); }
.msg--mine { align-self: flex-end; align-items: flex-end; }
.msg--theirs { align-self: flex-start; align-items: flex-start; }
.msg__bubble { padding: 9px 13px 10px; font-size: .9375rem; line-height: 1.5; color: var(--frost); overflow-wrap: anywhere; }
.msg--theirs .msg__bubble { background: var(--bg-4); clip-path: polygon(0 0, 100% 0, 100% 100%, 9px 100%, 0 calc(100% - 9px)); }
.msg--mine .msg__bubble { background: linear-gradient(135deg, rgba(47, 143, 203, .55), rgba(148, 117, 255, .45)); clip-path: polygon(0 0, 100% 0, 100% calc(100% - 9px), calc(100% - 9px) 100%, 0 100%); }
.msg__bubble a { color: #BFEAFF; text-decoration: underline; text-underline-offset: 2px; }
.msg__bubble .quote { margin: 4px 0; }
.msg--deleted .msg__bubble { background: transparent; border: 1px dashed var(--line-strong); clip-path: none; color: var(--steel); }
.msg__meta { display: flex; align-items: center; gap: 8px; margin-top: 3px; font-size: .72rem; color: var(--steel-dim); }
.msg__seen { display: inline-flex; align-items: center; gap: 3px; color: var(--ice); }
.msg__seen .icon { width: 12px; height: 12px; }
.msg__report { display: inline-grid; place-items: center; width: 22px; height: 22px; color: var(--steel-dim); opacity: 0; transition: opacity .15s; }
.msg__report .icon { width: 13px; height: 13px; }
.msg__report:hover { color: var(--danger); }
.msg:hover .msg__report, .msg__report:focus-visible { opacity: 1; }
@media (hover: none) { .msg__report { opacity: .5; } }

.thread__composer { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: end; gap: 10px; padding: 12px 14px; border-top: 1px solid var(--line); background: var(--bg-2); }
.thread__composer .field-error { grid-column: 1 / -1; }
.thread__input { min-height: 44px; max-height: 180px; padding-block: 10px; line-height: 1.45; resize: none; }
.thread__send { height: 44px; }
.thread__blocked { display: flex; align-items: center; gap: 10px; padding: 14px 16px; border-top: 1px solid var(--line); font-size: var(--fs-sm); color: var(--steel); }
.thread__blocked p { margin: 0; }
.thread__blocked .icon { flex: none; width: 20px; height: 20px; }

.blocked-list { display: flex; flex-direction: column; gap: 10px; margin: 14px 0 0; padding: 0; list-style: none; }
.blocked-list li { display: flex; align-items: center; flex-wrap: wrap; gap: 10px; }
.blocked-list__name { font-weight: 600; color: var(--frost); }
.blocked-list form { margin-left: auto; }

@media (max-width: 899px) {
  .messenger { grid-template-columns: minmax(0, 1fr); height: auto; border: 0; background: transparent; }
  .messenger__list { overflow: visible; border: 1px solid var(--line); background: var(--bg-2); }
  .messenger--open .messenger__list, .messenger:not(.messenger--open) .messenger__pane { display: none; }
  .messenger--open .messenger__pane { height: calc(100dvh - var(--header-h) - var(--tabbar-h) - 24px - env(safe-area-inset-bottom)); border: 1px solid var(--line); background: var(--bg-2); }
  .messenger-open .site-main { padding-top: 12px; padding-bottom: calc(var(--tabbar-h) + 12px + env(safe-area-inset-bottom)); }
  .messenger-open .messenger-page__head, .messenger-open .site-footer { display: none; }
  .thread__back { display: inline-grid; }
  .thread__body { padding-inline: 12px; }
  .msg { max-width: 86%; }
}
@media (min-width: 900px) and (max-width: 1119px) {
  .messenger { height: clamp(480px, calc(100vh - var(--header-h) - var(--tabbar-h) - 220px), 860px); }
}

/* ==========================================================================
   Coéquipiers : annonces pour trouver des joueurs.
   Chaque carte prend la teinte de son jeu (--game) : liseré, pastille hexagonale,
   et un chevron Λ en filigrane, le motif du site. Le texte écrit dans cette teinte
   utilise --game-text, une variante assez claire pour rester lisible (Games::palette()).
   ========================================================================== */
.lfg-filters { display: grid; gap: 12px; margin-bottom: 12px; }
@media (min-width: 900px) { .lfg-filters { grid-template-columns: auto minmax(0, 1fr); align-items: center; } }
.lfg-filters .select { height: 40px; padding-top: 0; padding-bottom: 0; width: auto; max-width: 100%; }
.lfg-filters__check { align-items: center; padding: 0 4px; }
.lfg-scope .pill { min-height: 38px; }
.lfg-results { display: flex; justify-content: space-between; align-items: center; gap: 12px; margin: 4px 0 16px; }
.lfg-results a { display: inline-flex; align-items: center; gap: 6px; color: var(--steel); font-weight: 600; }
.lfg-results a:hover { color: var(--frost); text-decoration: none; }
.lfg-results .icon { width: 16px; height: 16px; }
.btn__count {
  display: inline-grid; place-items: center; min-width: 20px; height: 20px; padding: 0 6px;
  background: var(--volt); color: #fff; font-size: 11px; font-weight: 750; font-variant-numeric: tabular-nums;
  clip-path: polygon(0 0, calc(100% - 4px) 0, 100% 4px, 100% 100%, 4px 100%, 0 calc(100% - 4px));
}

.lfg-list { display: grid; gap: 16px; grid-template-columns: repeat(auto-fill, minmax(min(100%, 440px), 1fr)); }

.game-tile {
  --size: 48px;
  width: var(--size); height: var(--size); flex: none; display: grid; place-items: center;
  font-weight: 850; font-size: calc(var(--size) * .27); line-height: 1; font-variation-settings: "SHRP" 100;
  color: var(--game-text, var(--game, var(--ice)));
  background: var(--bg-4);
  background: color-mix(in srgb, var(--game, var(--ice)) 17%, var(--bg-4));
  clip-path: polygon(50% 0, 100% 25%, 100% 75%, 50% 100%, 0 75%, 0 25%);
}
.game-tile--lg { --size: 76px; }
.game-tile--sm { --size: 34px; font-size: 10px; }

.lfg-card, .lfg-detail {
  --cut: 14px;
  position: relative; isolation: isolate; overflow: hidden;
  background: linear-gradient(135deg, var(--game, var(--ice)), var(--line) 34%, var(--line));
  clip-path: polygon(0 0, calc(100% - var(--cut)) 0, 100% var(--cut), 100% 100%, var(--cut) 100%, 0 calc(100% - var(--cut)));
}
.lfg-card::before, .lfg-detail::before {
  content: ""; position: absolute; inset: 1px; z-index: -2; background: var(--bg-2);
  clip-path: polygon(0 0, calc(100% - var(--cut) + .6px) 0, 100% calc(var(--cut) - .6px), 100% 100%, calc(var(--cut) - .6px) 100%, 0 calc(100% - var(--cut) + .6px));
}
.lfg-card::after, .lfg-detail::after {
  content: ""; position: absolute; z-index: -1; pointer-events: none;
  right: -34px; top: -26px; width: 210px; height: 190px;
  background: linear-gradient(165deg, color-mix(in srgb, var(--game, var(--ice)) 34%, transparent), transparent 72%);
  clip-path: polygon(50% 0, 100% 100%, 74% 100%, 50% 44%, 26% 100%, 0 100%);
  opacity: .5;
}
.lfg-card { display: flex; flex-direction: column; gap: 14px; padding: 18px 18px 0; }
.lfg-card__head { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 10px 14px; align-items: center; }
.lfg-card__head .lfg-when { grid-column: 1 / -1; justify-self: start; }
@media (min-width: 560px) {
  .lfg-card__head { grid-template-columns: auto minmax(0, 1fr) auto; }
  .lfg-card__head .lfg-when { grid-column: auto; align-self: start; }
}
.lfg-card__titles { min-width: 0; }
.lfg-card__title { margin: 0; font-size: var(--fs-md); line-height: 1.3; overflow-wrap: anywhere; }
.lfg-card__title a { color: var(--frost); }
.lfg-card__title a:hover { color: var(--ice); text-decoration: none; }
.lfg-card__game, .lfg-detail__game { margin: 3px 0 0; font-size: var(--fs-xs); font-weight: 700; letter-spacing: .02em; color: var(--game-text, var(--game, var(--ice))); }
.lfg-card__desc { margin: 0; font-size: var(--fs-sm); color: #C3CBDA; overflow-wrap: anywhere; }
.lfg-card__foot {
  margin: auto -18px 0; padding: 12px 18px;
  display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 10px 14px;
  background: rgba(8, 10, 16, .38); border-top: 1px solid var(--line);
}
.lfg-card__cta { display: flex; align-items: center; gap: 12px; margin-left: auto; }
.lfg-card__cta form { margin: 0; }
.lfg-card.is-ended { opacity: .7; }
.lfg-card.is-ended .lfg-card__title a { color: var(--steel); }

.lfg-when {
  margin: 0; display: inline-flex; align-items: center; gap: 8px; padding: 4px 10px;
  font-size: var(--fs-xs); font-weight: 700; color: var(--steel); background: var(--bg-3); white-space: nowrap;
}
.lfg-when .icon { width: 14px; height: 14px; }
.lfg-when--now, .lfg-when--started { color: var(--success); background: rgba(91, 231, 169, .1); }
.lfg-when--upcoming { color: var(--ice); background: var(--ice-soft); }
.lfg-when--lg { margin-top: 12px; padding: 6px 12px; font-size: var(--fs-sm); white-space: normal; }
/* Cristal qui bat : la partie a lieu maintenant */
.lfg-when__pulse { width: 7px; height: 7px; flex: none; background: currentColor; transform: rotate(45deg); animation: lfg-pulse 1.8s ease-out infinite; }
@keyframes lfg-pulse {
  0% { box-shadow: 0 0 0 0 rgba(91, 231, 169, .6); }
  70%, 100% { box-shadow: 0 0 0 6px rgba(91, 231, 169, 0); }
}
@media (prefers-reduced-motion: reduce) { .lfg-when__pulse { animation: none; } }

.lfg-facts { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 6px; }
.lfg-facts__rank { color: var(--frost); background: color-mix(in srgb, var(--game, var(--ice)) 20%, var(--bg-4)); }
.lfg-facts__mood { background: transparent; box-shadow: inset 0 0 0 1px var(--line-strong); }

/* Places du groupe : une encoche par joueur, pleine quand elle est prise */
.seats { display: inline-flex; align-items: center; gap: 8px; color: var(--steel); font-size: var(--fs-xs); font-weight: 700; font-variant-numeric: tabular-nums; white-space: nowrap; }
.seats__pips { display: inline-flex; gap: 3px; }
.seats__pips i { width: 9px; height: 13px; background: var(--line-strong); clip-path: polygon(50% 0, 100% 32%, 100% 100%, 0 100%, 0 32%); }
.seats__pips i.is-taken { background: var(--game, var(--ice)); }
.seats--lg { font-size: var(--fs-sm); }
.seats--lg .seats__pips i { width: 12px; height: 17px; }

.lfg-detail { display: grid; gap: 18px; padding: 22px; --cut: 18px; }
@media (min-width: 640px) { .lfg-detail { padding: 28px; } }
.lfg-detail::after { width: 340px; height: 300px; right: -50px; top: -40px; }
.lfg-detail__head { display: flex; gap: 18px; align-items: flex-start; }
.lfg-detail__titles { min-width: 0; }
.lfg-detail__game { margin: 0 0 6px; font-size: var(--fs-sm); }
.lfg-detail__title { margin: 0; font-size: var(--fs-2xl); line-height: 1.15; overflow-wrap: anywhere; }
@media (min-width: 640px) { .lfg-detail__title { font-size: var(--fs-3xl); } }
@media (max-width: 479px) { .lfg-detail__head .game-tile--lg { --size: 56px; } }
.lfg-detail__desc { color: #D5DCEA; overflow-wrap: anywhere; }
.lfg-detail__desc > :last-child { margin-bottom: 0; }
.lfg-detail__foot { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: 14px; padding-top: 16px; border-top: 1px solid var(--line); }
.lfg-detail__foot .user-chip__sub { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 8px; white-space: normal; }
.lfg-detail__foot .btn-row { gap: 8px; }
.lfg-detail__foot form { margin: 0; }

.lfg-roster .list-row { justify-content: space-between; padding: 10px 0; }
.lfg-roster .list-row.lfg-roster__free { justify-content: flex-start; gap: 12px; }
.lfg-roster__slot { width: 32px; height: 32px; flex: none; display: grid; place-items: center; border: 1px dashed var(--line-strong); color: var(--steel-dim); }
.lfg-roster__slot .icon { width: 15px; height: 15px; }
.lfg-info { margin-top: 16px; padding: 14px 16px; background: var(--bg-input); border-left: 3px solid var(--game, var(--ice)); }
.lfg-info h3 { display: flex; align-items: center; gap: 8px; margin: 0 0 8px; font-size: var(--fs-sm); }
.lfg-info h3 .icon { width: 15px; height: 15px; color: var(--game-text, var(--game, var(--ice))); }
.lfg-info .prose > :last-child { margin-bottom: 0; }

.lfg-requests .list-row { flex-wrap: wrap; }
.lfg-requests form { margin-left: auto; display: flex; flex-wrap: wrap; gap: 8px; }
.lfg-requests__note { order: 3; flex-basis: 100%; margin: 0; padding: 8px 12px; color: #C3CBDA; background: var(--bg-input); border-left: 2px solid var(--line-strong); overflow-wrap: anywhere; }

.lfg-form fieldset + fieldset { padding-top: 22px; border-top: 1px solid var(--line); }
.lfg-when-choice .choice > span { display: grid; gap: 2px; }
.lfg-when-choice .choice small { color: var(--steel); font-size: var(--fs-xs); }
.lfg-starts { margin-top: 10px; display: grid; gap: 6px; max-width: 340px; }
.lfg-moods .pill { cursor: pointer; user-select: none; }
.lfg-moods .pill:has(input:checked) { color: var(--ice); border-color: rgba(118, 215, 255, .5); background: var(--ice-soft); }
.lfg-moods .pill:has(input:focus-visible) { outline: 2px solid var(--ice); outline-offset: 2px; }
.lfg-moods .pill:has(input:disabled) { opacity: .45; cursor: not-allowed; }

/* Accueil : quelques annonces du moment */
/* Accueil : bloc « Trouve ton Mate » (bouton vers les annonces, puis les 5 dernières) */
.lfg-home__title { margin: 0 0 4px; font-size: inherit; line-height: 1; }
.lfg-home__title + p { margin-top: 12px; }
.lfg-mini { list-style: none; margin: 0; padding: 0; }
.lfg-mini li { display: flex; gap: 12px; align-items: center; padding: 10px 0; border-bottom: 1px solid var(--line); }
.lfg-mini li:last-child { border-bottom: 0; padding-bottom: 0; }
.lfg-mini__main { min-width: 0; flex: 1; }
.lfg-mini__title { display: block; color: var(--frost); font-weight: 650; font-size: var(--fs-sm); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.lfg-mini__title:hover { color: var(--ice); text-decoration: none; }
.lfg-mini__sub { display: block; font-size: var(--fs-xs); color: var(--steel); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

/* Page d'une annonce : sur mobile, rejoindre vient juste après l'annonce ; sur grand écran, en colonne fixe à droite */
.lfg-layout { display: grid; gap: 24px; grid-template-columns: minmax(0, 1fr); }
@media (min-width: 1024px) {
  .lfg-layout { grid-template-columns: minmax(0, 1fr) 340px; column-gap: 32px; align-items: start; }
  .lfg-layout > * { grid-column: 1; }
  .lfg-layout > .lfg-layout__side { grid-column: 2; grid-row: 1 / span 3; position: sticky; top: calc(var(--header-h) + 20px); }
}

/* ==========================================================================
   Parrainage : lien d'invitation, récompenses, mates invités
   ========================================================================== */
.invite-link__field .input { font-size: var(--fs-sm); color: var(--frost); }
/* Téléphone : le lien sur toute la largeur, le bouton en dessous */
@media (max-width: 520px) {
  .invite-link__field { flex-direction: column; gap: 8px; }
  .invite-link__field .btn { justify-content: center; min-height: 44px; }
}
.invite-link__more { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 10px 16px; margin-top: 14px; font-size: var(--fs-sm); color: #C3CBDA; }
.invite-code { display: inline-block; padding: 2px 10px; margin-left: 4px; background: var(--bg-input); border: 1px solid var(--line-strong); color: var(--frost); font-weight: 750; letter-spacing: .14em; font-variant-numeric: tabular-nums; }
.invite-grid { display: grid; gap: 16px; margin-top: 16px; }
@media (min-width: 760px) { .invite-grid { grid-template-columns: minmax(0, 3fr) minmax(0, 2fr); } }
.invite-reward__prize { display: flex; align-items: center; gap: 14px; margin-top: 16px; font-size: var(--fs-sm); color: #C3CBDA; }
.invite-reward__prize img { width: 56px; height: 56px; flex: none; }
.invite-reward__xp { margin: 0 0 4px; font-size: var(--fs-2xl); font-weight: 780; line-height: 1.1; color: var(--frost); font-variation-settings: "SHRP" 90; }
.mate-list { list-style: none; margin: 0; padding: 0; border: 1px solid var(--line); background: var(--bg-2); }
.mate-list li { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 12px; padding: 12px 16px; border-bottom: 1px solid var(--line); }
.mate-list li:last-child { border-bottom: 0; }
.mate-list__name { font-weight: 650; min-width: 9ch; }
.mate-list__date { margin-left: auto; }
.invite-rules { margin-top: 20px; }
.input--code { text-transform: uppercase; letter-spacing: .12em; }
.input--code::placeholder { text-transform: none; letter-spacing: normal; }


/* ==========================================================================
   Matchs organisés : défis, horaires, veto des maps, scores
   ========================================================================== */
.container--form { max-width: 920px; }

/* Un camp : logo ou avatar, nom */
.fixture-side { display: inline-flex; align-items: center; gap: 10px; min-width: 0; }
.fixture-side__name { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-weight: 700; color: var(--frost); }
a.fixture-side__name:hover { color: var(--ice); }
.fixture-side--lg { flex-direction: column; gap: 12px; text-align: center; max-width: 100%; }
.fixture-side--lg .fixture-side__name { white-space: normal; overflow-wrap: anywhere; font-size: var(--fs-lg); font-weight: 780; line-height: 1.2; font-variation-settings: "SHRP" 80; }
.fixture-side--lg .avatar--lg, .fixture-side--lg .team-logo--lg { --size: 88px; }

/* Cartes des listes */
.fixture-list { display: grid; gap: 10px; }
.fixture-section + .fixture-section { margin-top: 36px; }
.fixture-card {
  position: relative; display: grid; grid-template-columns: minmax(0, 1fr) auto; grid-template-areas: "title when" "meta meta" "todo todo";
  align-items: center; gap: 10px 16px; padding: 14px 16px;
  background: var(--bg-2); border: 1px solid var(--line); border-left: 3px solid var(--line-strong);
}
.fixture-card:hover { border-color: var(--line-strong); }
.fixture-card:focus-within { border-color: var(--ice); }
.fixture-card.is-todo { border-left-color: var(--volt); background: linear-gradient(90deg, rgba(148, 117, 255, .08), var(--bg-2) 40%); }
.fixture-card.is-closed { opacity: .72; }
.fixture-card__title { grid-area: title; margin: 0; min-width: 0; font-size: var(--fs-base); }
.fixture-card__link { display: inline-flex; flex-wrap: wrap; align-items: center; gap: 6px 12px; max-width: 100%; color: var(--frost); }
.fixture-card__link:hover { text-decoration: none; }
.fixture-card__link:hover .fixture-side__name { color: var(--ice); }
.fixture-card__link::after { content: ""; position: absolute; inset: 0; }
.fixture-card__link:focus-visible { outline: none; }
.fixture-card__side { min-width: 0; max-width: 100%; display: flex; }
.fixture-card__side.is-mine .fixture-side__name { color: var(--ice); }
.fixture-card__side.is-winner .fixture-side__name::after { content: " ✓"; color: var(--success); }
.fixture-card__mid { font-size: var(--fs-xs); color: var(--steel-dim); font-weight: 600; }
.fixture-score { display: inline-flex; gap: 6px; font-size: var(--fs-md); font-weight: 800; color: var(--frost); font-variant-numeric: tabular-nums; }
.fixture-card__meta { grid-area: meta; display: flex; flex-wrap: wrap; align-items: center; gap: 6px; }
.fixture-card__when { grid-area: when; display: inline-flex; align-items: center; gap: 6px; margin: 0; font-size: var(--fs-sm); color: #C3CBDA; white-space: nowrap; }
.fixture-card__when .icon { width: 15px; height: 15px; color: var(--steel); }
.fixture-card__todo, .fixture-card__note { grid-area: todo; }
.fixture-card__todo { display: flex; align-items: center; gap: 8px; margin: 0; font-size: var(--fs-sm); font-weight: 650; color: #C9BCFF; }
.fixture-card__todo .icon { width: 16px; height: 16px; color: var(--volt); }
.fixture-card__note { margin: 0; font-size: var(--fs-sm); color: var(--steel); }
@media (max-width: 640px) {
  .fixture-card { grid-template-columns: minmax(0, 1fr); grid-template-areas: "title" "when" "meta" "todo"; }
  .fixture-card__when { white-space: normal; }
}

/* En-tête d'un match : deux camps face à face */
.versus {
  --cut: 18px;
  position: relative; display: grid; grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr); align-items: center; gap: 12px;
  padding: 28px 16px 24px;
  background:
    linear-gradient(100deg, rgba(118, 215, 255, .10), transparent 42%, transparent 58%, rgba(148, 117, 255, .12)),
    var(--bg-2);
  border: 1px solid var(--line);
  clip-path: polygon(0 0, calc(100% - var(--cut)) 0, 100% var(--cut), 100% 100%, var(--cut) 100%, 0 calc(100% - var(--cut)));
}
.versus__side { display: grid; justify-items: center; gap: 8px; min-width: 0; text-align: center; }
.versus__role { font-size: var(--fs-xs); color: var(--steel); }
.versus__side.is-mine .versus__role { color: var(--ice); }
.versus__side.is-winner .fixture-side__name { color: var(--success); }
.versus__center { display: grid; justify-items: center; gap: 6px; padding: 0 4px; text-align: center; }
.versus__vs {
  margin: 0; font-size: var(--fs-3xl); font-weight: 850; line-height: 1; letter-spacing: .02em; font-variation-settings: "SHRP" 100;
  background: linear-gradient(135deg, var(--ice), var(--volt)); -webkit-background-clip: text; background-clip: text; color: transparent;
}
.versus__score { display: flex; align-items: baseline; gap: 10px; margin: 0; font-size: var(--fs-4xl); font-weight: 850; line-height: 1; font-variant-numeric: tabular-nums; color: var(--steel); font-variation-settings: "SHRP" 100; }
.versus__score .is-winner { color: var(--frost); }
.versus__dash { font-size: var(--fs-2xl); color: var(--steel-dim); }
.versus__when { margin: 0; max-width: 22ch; font-size: var(--fs-sm); font-weight: 600; color: #C3CBDA; }
.versus__when::first-letter { text-transform: uppercase; }
@media (max-width: 560px) {
  .versus { gap: 6px; padding: 22px 10px 18px; }
  .fixture-side--lg .avatar--lg, .fixture-side--lg .team-logo--lg { --size: 60px; }
  .fixture-side--lg .fixture-side__name { font-size: var(--fs-base); }
  .versus__vs { font-size: var(--fs-2xl); }
  .versus__score { font-size: var(--fs-3xl); gap: 6px; }
  .versus__when { max-width: 13ch; font-size: var(--fs-xs); }
}

/* Horaire */
.fixture-time { margin: 0 0 12px; font-size: var(--fs-lg); font-weight: 700; color: var(--frost); }
.fixture-time:first-letter { text-transform: uppercase; }
.fixture-result { margin: 0 0 10px; font-size: var(--fs-md); }
.slot-offer { margin-top: 4px; padding: 14px 16px; background: var(--volt-soft); border-left: 3px solid var(--volt); }
.slot-offer + .slot-offer { margin-top: 12px; }
.slot-offer--mine { background: var(--bg-input); border-left-color: var(--line-strong); }
.slot-offer__title { margin: 0 0 10px; font-size: var(--fs-sm); font-weight: 650; }
.slot-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; }
.slot-list__item { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 8px 14px; }
.slot-list__when { font-weight: 650; }
.slot-list__when time:first-letter, .slot-history__when:first-letter { text-transform: uppercase; }
.slot-fields { margin: 0; }
.slot-fields legend { margin-bottom: 8px; }
.slot-fields__grid { display: grid; gap: 10px; grid-template-columns: repeat(auto-fill, minmax(min(100%, 210px), 1fr)); }
.slot-fields__slot { display: grid; gap: 4px; }
.slot-fields__label { font-size: var(--fs-xs); font-weight: 600; color: var(--steel); }
.slot-fields__label .optional { margin-left: 4px; font-weight: 400; color: var(--steel-dim); }
.slot-history { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; font-size: var(--fs-sm); }
.slot-history__item { display: grid; gap: 1px; padding-left: 10px; border-left: 2px solid var(--line-strong); }
.slot-history__item--accepted { border-left-color: var(--success); }
.slot-history__item--pending { border-left-color: var(--volt); }
.slot-history__item--declined .slot-history__when, .slot-history__item--withdrawn .slot-history__when { color: var(--steel); text-decoration: line-through; text-decoration-color: var(--steel-dim); }
.slot-history__meta { font-size: var(--fs-xs); color: var(--steel); }

/* Veto des maps : déroulé, puis les maps */
.veto-rail { list-style: none; margin: 0 0 16px; padding: 0; display: flex; flex-wrap: wrap; gap: 6px; counter-reset: veto; }
.veto-rail__step {
  counter-increment: veto; position: relative; display: grid; gap: 1px; min-width: 96px; flex: 1 1 96px; max-width: 150px;
  padding: 8px 10px 8px 26px; background: var(--bg-input); border: 1px solid var(--line); font-size: var(--fs-xs);
}
.veto-rail__step::before { content: counter(veto); position: absolute; left: 9px; top: 8px; color: var(--steel-dim); font-weight: 700; font-variant-numeric: tabular-nums; }
.veto-rail__step--decider::before { content: "•"; }
.veto-rail__action { font-weight: 750; color: var(--frost); }
.veto-rail__step--ban .veto-rail__action { color: #FF95A8; }
.veto-rail__step--pick .veto-rail__action { color: var(--ice); }
.veto-rail__step--decider .veto-rail__action { color: #B9A6FF; }
.veto-rail__who { color: var(--steel); overflow-wrap: anywhere; }
.veto-rail__map { color: var(--frost); font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.veto-rail__step.is-done { background: var(--bg-3); }
.veto-rail__step.is-current { border-color: var(--volt); box-shadow: 0 0 0 1px var(--volt), 0 0 18px rgba(148, 117, 255, .25); }
.fixture-maps__status { display: flex; align-items: center; gap: 8px; margin: 0 0 14px; font-size: var(--fs-sm); color: #C3CBDA; }
.fixture-maps__status .icon { width: 16px; height: 16px; flex: none; color: var(--steel); }
.fixture-maps__status.is-turn { color: #C9BCFF; font-weight: 650; }
.fixture-maps__status.is-turn .icon { color: var(--volt); }
.fixture-maps__status.is-done .icon { color: var(--success); }

.map-grid { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; grid-template-columns: repeat(auto-fill, minmax(min(100%, 138px), 1fr)); }
.map-tile { position: relative; display: grid; align-content: space-between; gap: 6px; min-height: 76px; padding: 12px; background: var(--bg-3); border: 1px solid var(--line); }
.map-tile__name { font-weight: 750; font-size: var(--fs-base); line-height: 1.25; color: var(--frost); overflow-wrap: anywhere; font-variation-settings: "SHRP" 60; }
.map-tile__state { font-size: var(--fs-xs); color: var(--steel); }
.map-tile.is-ban { background: var(--bg-input); border-style: dashed; }
.map-tile.is-ban .map-tile__name { color: var(--steel-dim); text-decoration: line-through; text-decoration-thickness: 2px; text-decoration-color: rgba(255, 92, 122, .7); }
.map-tile.is-ban .map-tile__state { color: #FF95A8; }
.map-tile.is-pick { border-color: rgba(118, 215, 255, .55); background: linear-gradient(160deg, var(--ice-soft), var(--bg-3) 70%); }
.map-tile.is-pick .map-tile__state { color: var(--ice); }
.map-tile.is-decider { border-color: rgba(148, 117, 255, .65); background: linear-gradient(160deg, var(--volt-soft), var(--bg-3) 70%); }
.map-tile.is-decider .map-tile__state { color: #C9BCFF; }
.map-tile:has(.map-tile__btn) { padding: 0; }
.map-tile__btn {
  display: grid; align-content: space-between; gap: 6px; width: 100%; min-height: 76px; padding: 12px; text-align: left;
  font: inherit; color: inherit; background: transparent; border: 0; cursor: pointer;
}
.map-tile__btn .map-tile__state { font-weight: 700; }
.map-grid--ban .map-tile__btn .map-tile__state { color: #FF95A8; }
.map-grid--pick .map-tile__btn .map-tile__state { color: var(--ice); }
.map-tile:has(.map-tile__btn:hover) { border-color: var(--line-strong); background: var(--bg-4); }
.map-grid--ban .map-tile:has(.map-tile__btn:hover) { border-color: rgba(255, 92, 122, .6); }
.map-grid--pick .map-tile:has(.map-tile__btn:hover) { border-color: var(--ice); }
.map-tile__btn:focus-visible { outline: 2px solid var(--frost); outline-offset: 2px; }
.map-order { list-style: none; margin: 0 0 12px; padding: 0; display: grid; gap: 6px; }
.map-order li { display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 12px; padding: 8px 12px; background: var(--bg-input); border-left: 3px solid var(--ice); }
.map-order li:last-child:not(:first-child) { border-left-color: var(--volt); }
.map-order__num { min-width: 8ch; font-size: var(--fs-xs); font-weight: 650; color: var(--steel); }
.map-order__name { font-weight: 700; }
.map-order__by { margin-left: auto; font-size: var(--fs-xs); color: var(--steel); }

/* Formulaire de défi */
.choice-grid--2 { grid-template-columns: repeat(auto-fit, minmax(min(100%, 230px), 1fr)); }
.choice-grid--3 { grid-template-columns: repeat(auto-fit, minmax(min(100%, 200px), 1fr)); }
.challenge-form .choice { align-items: flex-start; }
.challenge-form .choice input { flex: none; margin-top: 4px; }
.challenge-form .choice > span { display: grid; gap: 2px; }
.challenge-form .choice small { color: var(--steel); font-size: var(--fs-xs); line-height: 1.45; }
.choice.is-disabled { opacity: .55; cursor: not-allowed; }
.choice.is-disabled:hover { border-color: var(--line); }
.challenge-target { display: flex; align-items: center; min-height: 44px; padding: 6px 12px; background: var(--bg-input); border: 1px solid var(--line); }
.fixed-maps__grid { display: grid; gap: 10px; grid-template-columns: repeat(auto-fill, minmax(min(100%, 180px), 1fr)); }
.fixed-maps__slot { display: grid; gap: 4px; }

.fixture-cancel summary { cursor: pointer; color: #FF95A8; font-weight: 600; }
.settle { padding-top: 14px; border-top: 1px solid var(--line); }
.record { display: flex; gap: 10px; margin: 0; }
.record__cell { display: grid; justify-items: center; min-width: 64px; padding: 8px 10px; background: var(--bg-input); border: 1px solid var(--line); }
.record dd { margin: 0; }
.record__num { order: -1; font-size: var(--fs-xl); font-weight: 800; line-height: 1.1; font-variant-numeric: tabular-nums; }
.record__label { font-size: var(--fs-xs); color: var(--steel); }
.record__cell--won .record__num { color: var(--success); }
.record__cell--lost .record__num { color: #FF95A8; }

@media (forced-colors: active) {
  .map-tile.is-pick, .map-tile.is-decider, .veto-rail__step.is-current { outline: 2px solid CanvasText; }
  .versus__vs { color: CanvasText; background: none; }
}

/* ==========================================================================
   Avis : notes de 1 à 5 étoiles sur les membres et les équipes.
   Étoiles en or (même teinte que les récompenses légendaires), découpées
   dans un masque : remplies au dixième près, lisibles sans couleur grâce
   à la note écrite à côté.
   ========================================================================== */
:root { --star-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 2.6l2.9 6 6.6.9-4.8 4.6 1.2 6.5L12 17.5l-5.9 3.1 1.2-6.5-4.8-4.6 6.6-.9z'/%3E%3C/svg%3E"); }
.stars {
  --size: 16px;
  display: inline-block; flex: none; vertical-align: -3px;
  width: calc(var(--size) * 5); height: var(--size);
  background: linear-gradient(90deg, var(--gold) calc(var(--rating, 0) * 20%), #46526B 0);
  -webkit-mask: var(--star-mask) 0 0 / var(--size) var(--size) repeat-x;
          mask: var(--star-mask) 0 0 / var(--size) var(--size) repeat-x;
}
.stars--xs { --size: 12px; }
.stars--sm { --size: 15px; }
.stars--md { --size: 20px; }
.stars--lg { --size: 28px; }
.star-glyph {
  display: inline-block; flex: none; width: 1em; height: 1em; vertical-align: -.125em;
  background: var(--gold);
  -webkit-mask: var(--star-mask) center / contain no-repeat;
          mask: var(--star-mask) center / contain no-repeat;
}

/* Note moyenne dans l'en-tête d'un profil ou d'une équipe, et sur les cartes */
.rating-chip {
  display: inline-flex; align-items: center; gap: 8px; padding: 5px 10px;
  font-size: var(--fs-sm); color: var(--frost);
  background: rgba(255, 200, 87, .08); box-shadow: inset 0 0 0 1px rgba(255, 200, 87, .26);
}
.rating-chip:hover { text-decoration: none; background: rgba(255, 200, 87, .15); }
.rating-chip strong { font-weight: 750; font-variant-numeric: tabular-nums; }
.rating-chip__count { color: var(--steel); font-size: var(--fs-xs); }
.rating-mini { display: inline-flex; align-items: center; gap: 4px; color: var(--frost); font-weight: 650; font-variant-numeric: tabular-nums; }
.rating-mini .star-glyph { font-size: 13px; }
.rating-mini__n { color: var(--steel); font-weight: 500; }

/* Onglet « Avis » */
.profile-layout .tabs a { padding-left: 11px; padding-right: 11px; }
.ratings-board { display: grid; gap: 28px; }
.ratings-board .callout { margin-bottom: 0; }
.ratings-board, .ratings-board [id] { scroll-margin-top: calc(var(--header-h) + 16px); }
.ratings-board__top { display: flex; flex-wrap: wrap; gap: 20px; align-items: flex-start; }
.ratings-board__top > .rating-summary { flex: 1 1 260px; }
.ratings-board__top > .rating-form { flex: 2 1 320px; }

.rating-summary__score { display: flex; align-items: center; gap: 16px; margin-bottom: 18px; }
.rating-summary__avg {
  font-size: var(--fs-4xl); font-weight: 850; line-height: 1; color: var(--frost);
  font-variation-settings: "SHRP" 100; font-variant-numeric: tabular-nums;
}
.rating-summary__meta { display: grid; gap: 6px; }
.rating-summary__count { font-size: var(--fs-sm); color: var(--steel); }
.rating-bars { list-style: none; margin: 0; padding: 0; display: grid; gap: 2px; }
.rating-bars__row {
  display: grid; grid-template-columns: 30px minmax(0, 1fr) 4ch; align-items: center; gap: 10px;
  padding: 5px 6px; color: var(--steel); font-size: var(--fs-xs); font-weight: 650; font-variant-numeric: tabular-nums;
}
a.rating-bars__row:hover { color: var(--frost); background: var(--bg-3); text-decoration: none; }
a.rating-bars__row:focus-visible { outline: 2px solid var(--ice); outline-offset: 0; }
span.rating-bars__row { color: var(--steel-dim); }
.rating-bars__row.is-active { color: var(--frost); background: rgba(255, 200, 87, .1); box-shadow: inset 2px 0 0 var(--gold); }
.rating-bars__label { display: inline-flex; align-items: center; gap: 4px; }
.rating-bars__label .star-glyph { font-size: 11px; }
.rating-bars__track { position: relative; height: 8px; background: #1A2233; clip-path: polygon(0 0, 100% 0, calc(100% - 4px) 100%, 0 100%); }
.rating-bars__fill { position: absolute; inset: 0 auto 0 0; width: calc(var(--pct, 0) * 1%); background: linear-gradient(90deg, #C46E12, var(--gold)); }
.rating-bars__n { text-align: right; }

/* Saisie de la note : cinq boutons radio, dessinés en étoiles */
.star-input { margin: 0; padding: 0; border: 0; min-width: 0; }
.star-input__row { position: relative; display: flex; flex-wrap: wrap; align-items: center; gap: 2px; }
.star-input__radio { position: absolute; left: 0; top: 0; width: 1px; height: 1px; margin: 0; opacity: 0; pointer-events: none; }
.star-input__star { display: grid; place-items: center; width: 42px; height: 42px; cursor: pointer; }
.star-input__star::before {
  content: ""; width: 32px; height: 32px; background: #5D6982;
  -webkit-mask: var(--star-mask) center / contain no-repeat;
          mask: var(--star-mask) center / contain no-repeat;
  transition: background-color .15s var(--ease-out), transform .15s var(--ease-out);
}
.star-input__star:hover::before { transform: scale(1.1); }
.star-input__star.is-on::before { background: var(--gold); }
.star-input__radio:focus-visible + .star-input__star { outline: 2px solid var(--ice); outline-offset: -3px; }
.star-input__verdict { margin-left: 10px; font-size: var(--fs-sm); font-weight: 650; color: var(--frost); }
.star-input__verdict.is-empty { color: var(--steel); font-weight: 500; }
.star-input.has-error .star-input__star::before { background: rgba(255, 92, 122, .45); }
/* Sans JavaScript : les étoiles se remplissent jusqu'à celle qui est cochée */
:root:not(.js) .star-input:has([value="1"]:checked) .star-input__star:nth-of-type(-n+1)::before,
:root:not(.js) .star-input:has([value="2"]:checked) .star-input__star:nth-of-type(-n+2)::before,
:root:not(.js) .star-input:has([value="3"]:checked) .star-input__star:nth-of-type(-n+3)::before,
:root:not(.js) .star-input:has([value="4"]:checked) .star-input__star:nth-of-type(-n+4)::before,
:root:not(.js) .star-input:has([value="5"]:checked) .star-input__star:nth-of-type(-n+5)::before { background: var(--gold); }
.rating-form .callout { margin-bottom: 12px; }

/* Liste des avis */
.review-list { border-top: 1px solid var(--line); }
.review { display: grid; grid-template-columns: 44px minmax(0, 1fr); gap: 14px; padding: 18px 4px; border-bottom: 1px solid var(--line); }
.review.is-mine { padding-left: 12px; background: linear-gradient(90deg, var(--ice-soft), transparent 70%); box-shadow: inset 2px 0 0 var(--ice); }
.review.is-hidden { background: repeating-linear-gradient(135deg, transparent 0 10px, rgba(255, 92, 122, .05) 10px 20px); }
.review.is-hidden .review__text, .review.is-hidden .review__rating { opacity: .7; }
.review:target { animation: review-flash 1.8s var(--ease-out); }
.review__avatar:hover { text-decoration: none; }
.review__head { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 10px; }
.review__name { font-weight: 700; color: var(--frost); }
.review__when { margin-left: auto; font-size: var(--fs-xs); color: var(--steel); }
.review__rating { display: flex; align-items: center; gap: 10px; margin: 6px 0 0; }
.review__verdict { font-size: var(--fs-xs); font-weight: 650; color: var(--steel); }
.review__text { max-width: 72ch; margin: 8px 0 0; font-size: .9375rem; line-height: 1.6; color: #D5DBE7; overflow-wrap: anywhere; }
.review__actions { display: flex; flex-wrap: wrap; gap: 2px; margin: 8px 0 0 -8px; }
.review__actions .action { padding: 4px 8px; font-size: var(--fs-xs); }
.review__actions .action .icon { width: 15px; height: 15px; }
.action--danger:hover { color: #FF95A8; }
@keyframes review-flash { from { background-color: rgba(255, 200, 87, .16); } }
@media (max-width: 520px) {
  .review { grid-template-columns: 36px minmax(0, 1fr); gap: 10px; }
  .review .avatar--md { width: 36px; height: 36px; }
  .review__when { margin-left: 0; width: 100%; }
  .rating-summary__avg { font-size: var(--fs-3xl); }
}
@media (forced-colors: active) {
  .stars, .star-glyph, .star-input__star::before, .rating-bars__fill { forced-color-adjust: none; }
  .star-input__radio:checked + .star-input__star { outline: 2px solid CanvasText; }
}

/* Tirage au sort : en tête de la colonne de droite de l'accueil (sous les bannières sur téléphone) et page du tirage */
@media (max-width: 1023.98px) { .giveaway--aside { display: none; } .giveaway--aside + * { margin-top: 0; } }
@media (min-width: 1024px) { .giveaway--mobile { display: none; } .giveaway--mobile:first-child + * { margin-top: 0; } }
.giveaway--page { max-width: 560px; margin-bottom: 32px; }
.giveaway__head { display: flex; gap: 14px; align-items: center; margin-bottom: 14px; }
/* Hexagone doré dessiné en image de fond, sans découpe clip-path dans le panneau (même choix que l'hexagone du niveau) */
.giveaway__tile {
  width: 52px; height: 52px; flex: none; display: grid; place-items: center; color: #2A1C02;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 52 52'%3E%3Cdefs%3E%3ClinearGradient id='g' x1='0' y1='0' x2='1' y2='1'%3E%3Cstop offset='0' stop-color='%23FFE7A6'/%3E%3Cstop offset='.55' stop-color='%23FFC857'/%3E%3Cstop offset='1' stop-color='%23E7A93A'/%3E%3C/linearGradient%3E%3C/defs%3E%3Cpolygon points='26 0 52 13 52 39 26 52 0 39 0 13' fill='url(%23g)'/%3E%3C/svg%3E") center / 100% 100% no-repeat;
}
.giveaway__tile .icon { width: 24px; height: 24px; }
.giveaway__heading { margin: 0; min-width: 0; font-size: inherit; line-height: 1.2; }
.giveaway__prize { display: block; font-size: var(--fs-2xl); font-weight: 850; line-height: 1.05; color: var(--gold); font-variation-settings: "SHRP" 100; overflow-wrap: anywhere; }
.giveaway__prize--long { font-size: var(--fs-xl); }
.giveaway__prize--longer { font-size: var(--fs-lg); line-height: 1.15; }
.giveaway__prize-label { font-size: var(--fs-sm); font-weight: 650; color: var(--frost); font-variation-settings: normal; }
.giveaway__name { display: block; margin-top: 4px; font-size: var(--fs-sm); font-weight: 650; color: var(--steel); }
.giveaway__when { margin: 0 0 12px; font-size: var(--fs-sm); color: var(--steel); }
.giveaway__ok { display: flex; gap: 8px; align-items: flex-start; margin: 0 0 6px; font-size: var(--fs-sm); font-weight: 650; color: var(--success); }
.giveaway__ok .icon { width: 18px; height: 18px; flex: none; margin-top: 1px; }
.giveaway__result { display: flex; gap: 10px; align-items: center; margin: 0 0 8px; font-size: var(--fs-md); }
.giveaway__result .icon { width: 22px; height: 22px; flex: none; color: var(--gold); }
.giveaway__result strong { color: var(--gold); overflow-wrap: anywhere; }
.giveaway__foot { display: flex; justify-content: space-between; gap: 12px; margin: 14px 0 0; padding-top: 12px; border-top: 1px solid var(--line); font-size: var(--fs-xs); color: var(--steel); }
.giveaway__foot a { font-weight: 650; }
.btn--gold { color: #1F1504; background: linear-gradient(135deg, #FFE7A6, var(--gold) 55%, #E7A93A); }
.btn--gold:hover { color: #1F1504; background: linear-gradient(135deg, #FFF1C9, #FFD47A 55%, #EDB656); }