:root {
  color-scheme: dark;

  /* Fond violet sombre (référence donnée par l'utilisateur) : un noir teinté de violet,
     avec une grande lueur violette en haut de page qui s'éteint vers le noir.
     Assez foncé pour que les panneaux et le texte gardent le même contraste. */
  --bg: #08070d;
  --bg-deep: #05040a;          /* le fond vers lequel le décor s'éteint, en bas de page */
  --surface: #100d18;
  --glass: rgba(255, 255, 255, .035);
  --glass-strong: rgba(255, 255, 255, .06);
  --line: rgba(255, 255, 255, .08);
  --line-strong: rgba(255, 255, 255, .15);
  --text: #f5f3f8;
  --muted: #948fa3;           /* gris très légèrement violet, pour aller avec le fond */
  --faint: #605c70;

  --lavender: #ece4ff;
  --lavender-ink: #16111f;
  --violet: #a78bfa;
  --violet-deep: #7c3aed;
  --gold: #f0b44c;
  --depleted: #ff6b6b;

  --v-solide: #6ee7a0;
  --v-correct: #93b4ff;
  --v-limite: #f5b75b;
  --v-risque: #ff6b6b;
  --v-inconnu: #3b3b46;

  /* Rôles (icônes tank / soigneur / DPS) */
  --role-tank: #7fb2ff;
  --role-heal: #5fe0b4;
  --role-dps: #ff8a8a;

  --display: "Poppins", "Segoe UI", system-ui, sans-serif;
  --body: "Inter", "Segoe UI", system-ui, sans-serif;
  --mono: ui-monospace, "Cascadia Mono", Consolas, monospace;

  --radius: 20px;
  /* Raid avec un boss choisi : colonne "Boss" après la parse */
}

* { box-sizing: border-box; }
/* La place de la barre de défilement est toujours réservée : sinon, en passant d'une page
   longue (accueil) à une page courte (« Chargement… » de /account), la page s'élargissait
   de ~15 px sous Windows et la barre du haut, centrée, sautait (demande de l'utilisateur). */
html { scroll-behavior: smooth; scrollbar-gutter: stable; }
/* Ancres de la barre : le titre ne passe pas sous la barre de navigation */
#comment, #indice, #addon, #apercu, #outils, #honneurs, #formules, #questions { scroll-margin-top: 104px; }
html, body { margin: 0; }
body {
  background: var(--bg);
  color: var(--text);
  font-family: var(--body);
  font-size: 15px;
  line-height: 1.5;
  font-variant-numeric: tabular-nums;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}
a { color: inherit; text-underline-offset: 3px; text-decoration-color: var(--faint); }
a:hover { text-decoration-color: var(--text); }
:focus-visible { outline: 2px solid var(--violet); outline-offset: 2px; border-radius: 6px; }
[hidden] { display: none !important; }
/* Chaque vue ne montre que ses propres éléments de barre (login, compte et admin compris) */
body:not(.view-home) .home-only, body:not(.view-app) .app-only { display: none !important; }
code { font-family: var(--mono); font-size: .9em; background: var(--glass-strong); border: 1px solid var(--line); padding: 1px 6px; border-radius: 6px; }
kbd {
  font: 500 12px var(--body);
  display: inline-grid; place-items: center;
  min-width: 26px; height: 24px; padding: 0 7px;
  border-radius: 7px;
  background: linear-gradient(180deg, rgba(255, 255, 255, .12), rgba(255, 255, 255, .04));
  border: 1px solid var(--line-strong);
  box-shadow: inset 0 -1px 0 rgba(0, 0, 0, .5);
  color: var(--text);
}

/* ------------------------------------------------------------------ */
/* Barres de défilement                                                */
/* ------------------------------------------------------------------ */
/* Chrome, Edge, Safari, Opera */
::-webkit-scrollbar { width: 12px; height: 12px; }
::-webkit-scrollbar-track, ::-webkit-scrollbar-corner { background: transparent; }
::-webkit-scrollbar-thumb {
  background-color: rgba(255, 255, 255, .12);
  border: 3px solid transparent;
  border-radius: 999px;
  background-clip: padding-box;
  min-height: 40px;
}
::-webkit-scrollbar-thumb:hover { background-color: rgba(255, 255, 255, .22); }
::-webkit-scrollbar-thumb:active { background-color: var(--violet); }
::-webkit-scrollbar-button { display: none; }
/* Dans le champ de collage, la barre n'apparaît qu'au survol */
textarea::-webkit-scrollbar-thumb { background-color: transparent; }
textarea:hover::-webkit-scrollbar-thumb, textarea:focus::-webkit-scrollbar-thumb { background-color: rgba(255, 255, 255, .12); }
textarea::-webkit-scrollbar { width: 10px; }
::-webkit-resizer {
  background: linear-gradient(135deg, transparent 50%, var(--faint) 50%, var(--faint) 58%, transparent 58%, transparent 70%, var(--faint) 70%, var(--faint) 78%, transparent 78%);
}
.table-scroll::-webkit-scrollbar { height: 8px; }
.table-scroll::-webkit-scrollbar-thumb { border-width: 2px; }
/* Firefox (seule option possible : barre fine et couleurs) */
@supports (-moz-appearance: none) {
  * { scrollbar-width: thin; scrollbar-color: rgba(255, 255, 255, .16) transparent; }
}

/* ------------------------------------------------------------------ */
/* Décor : la lumière violette du haut, et la lueur qui suit le défilement */
/* ------------------------------------------------------------------ */
/* Lumière d'ambiance (demande de l'utilisateur : passé le haut de page, tout devenait noir).
 * Posée en `fixed`, donc elle accompagne le défilement sur toute la longueur de la page.
 * La règle « pas de calque fixe » vise un calque **flouté** : ici il n'y a que des dégradés
 * radiaux, sans `filter` ni `mix-blend-mode`, et l'animation ne touche que `transform`,
 * donc tout reste sur le compositeur et ne coûte rien au défilement.
 * En `z-index: -1` : sous les panneaux, au-dessus de la couleur de fond. */
.ambient {
  position: fixed;
  inset: -15%;
  z-index: -1;
  pointer-events: none;
  background: radial-gradient(80vw 70vh at 50% 18%, rgba(96, 58, 180, .12), transparent 72%);
  animation: ambient-drift 68s ease-in-out infinite alternate;
}
/* Mouvement très léger : quelques pourcents sur une minute, juste de quoi ne pas figer */
@keyframes ambient-drift {
  from { transform: translate3d(-1.6%, -1.2%, 0) scale(1.04); }
  to { transform: translate3d(1.6%, 1.4%, 0) scale(1.09); }
}

/* Le décor, c'est UN dégradé radial violet en haut de page, et rien d'autre
 * (référence en image donnée par l'utilisateur, redemandée trois fois : les versions
 * à plusieurs calques, faisceaux et flous ont toutes été jugées trop chargées).
 *
 * Le dégradé est posé directement sur `.prism-light` : pas de calque intérieur, pas de
 * `clip-path`, pas de `mask-image`, pas de `filter`, pas de `mix-blend-mode`. Les six `<i>`
 * restent dans `index.html` mais ne servent plus à rien — ils sont masqués ici.
 *
 * Le centre de l'ellipse est au-dessus du bord haut (`at 50% -12%`) : la lumière semble
 * venir de plus haut que la page, et elle est éteinte avant la moitié de l'écran.
 * Au-delà de ~.4 d'opacité, le titre passe dessous et devient pénible à lire. */
.prism-light {
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 100vh;
  z-index: 0;
  pointer-events: none;
  transition: opacity .6s ease;
  background: radial-gradient(118% 76% at 50% -12%,
    rgba(139, 92, 246, .38) 0%,
    rgba(112, 72, 206, .24) 30%,
    rgba(74, 46, 138, .09) 56%,
    transparent 76%);
}
.prism-light i, .prism-light::after { display: none; }
.view-app .prism-light, .view-player .prism-light,
.view-login .prism-light, .view-account .prism-light, .view-admin .prism-light { opacity: .6; }

/* ------------------------------------------------------------------ */
/* Navigation en verre                                                 */
/* ------------------------------------------------------------------ */
.nav-wrap {
  position: fixed;
  top: 16px; left: 0; right: 0;
  z-index: 20;
  padding: 0 16px;
  pointer-events: none;
}
.nav {
  pointer-events: auto;
  max-width: 1080px;
  margin: 0 auto;
  display: flex;
  align-items: center;
  gap: 18px;
  padding: 7px 7px 7px 20px;
  border-radius: 999px;
  background: rgba(20, 17, 28, .55);
  border: 1px solid var(--line);
  -webkit-backdrop-filter: blur(18px) saturate(150%);
  backdrop-filter: blur(18px) saturate(150%);
  box-shadow: 0 10px 40px rgba(0, 0, 0, .45), inset 0 1px 0 rgba(255, 255, 255, .05);
}
.view-app .nav { max-width: 1600px; }
/* Le logo : [GroupScout], G et S en majuscules. Pour un compte connecté, il ouvre le menu des pages. */
.logo {
  display: inline-flex; align-items: baseline; gap: 4px;
  text-decoration: none;
  font: 700 16px/1.4 var(--display);
  letter-spacing: .005em;
  color: var(--text);
}
.logo-br { font-weight: 400; color: var(--violet); transition: color .3s ease; }
.logo:hover .logo-br, .logo:focus-visible .logo-br { color: var(--lavender); }
.logo-word { display: inline-block; }
/* Toujours écrit en entier (demande de l'utilisateur : « plus de [gs] ») : « group » en
   blanc, « scout » en violet, comme les deux mots du nom. */
.logo-s { color: var(--violet); }
/* Compte connecté : le logo ouvre le menu (chevron), le badge du milieu s'efface */
.logo-caret { display: none; width: 13px; height: 13px; align-self: center; color: var(--muted); transition: transform .2s, color .2s; }
body.logged-in .logo-caret { display: block; }
body.logged-in .logo { cursor: pointer; padding: 4px 8px 4px 0; margin: -4px 0; border-radius: 999px; }
body.logged-in .logo:hover .logo-caret, .logo.menu-open .logo-caret { color: var(--violet); }
.logo.menu-open .logo-caret { transform: rotate(180deg); }
body.logged-in .nav-badge { display: none; }
.nav-badge {
  display: inline-flex; align-items: center; gap: 7px;
  font-size: 12px; color: var(--muted);
  padding-left: 16px;
  border-left: 1px solid var(--line);
}
.nav-badge::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: var(--violet); box-shadow: 0 0 10px var(--violet); }
.nav-links { display: flex; gap: 6px; margin: 0 auto; font-size: 13px; }
.nav-links:empty, .nav-cta-slot:empty { display: none; }
/* Sans liens, c'est le bloc du compte qui part à droite (margin-left: auto) */
.nav-link {
  display: inline-flex; align-items: center; gap: 7px;
  height: 34px; padding: 0 12px; border-radius: 999px;
  color: var(--muted); text-decoration: none;
  transition: color .15s, background .15s;
}
.nav-link svg { width: 14px; height: 14px; flex: none; }
.nav-link:hover { color: var(--text); background: rgba(255, 255, 255, .05); }
.nav-link.is-current { color: var(--text); background: rgba(167, 139, 250, .14); box-shadow: inset 0 0 0 1px rgba(167, 139, 250, .3); }
.nav-me.is-current { border-color: rgba(167, 139, 250, .45); background: rgba(167, 139, 250, .12); }
/* Visiteur : « Se connecter » puis « Créer un compte », le bouton principal tout à droite */
body.anon .nav-cta-slot { order: 1; }

/* Paliers de `fitNav` : posés un à un tant que le contenu dépasse du fond en pilule.
   Du plus décoratif au plus utile, et les règles qui ne concernent pas la vue affichée
   sont simplement sans effet. */
.nav.fit-1 .nav-badge { display: none; }
.nav.fit-2 .nav-me-status { display: none; }
.nav.fit-3 { gap: 12px; padding-left: 14px; }
.nav.fit-3 .nav-links { gap: 2px; }
.nav.fit-3 .nav-session { gap: 10px; }
.nav.fit-4 .nav-status { display: none; }               /* compteurs de la session */
.nav.fit-4 .nav-me-name { max-width: 11ch; }
/* Les liens gardent leur icône (et leur info-bulle), perdent leur libellé */
.nav.fit-5 .nav-link span { display: none; }
.nav.fit-5 .nav-link { padding: 0 10px; }
/* Le logo ne fait plus que [gs] au repos : il n'y a plus de mot à cacher ici, juste
   quelques pixels à gagner. Le vrai gain de ce palier est ailleurs : la barre part
   désormais 110 px plus courte qu'avec l'ancien « GROUPSCOUT ». */
.nav.fit-6 .logo { gap: 2px; letter-spacing: 0; }
.nav.fit-7 .logo-br { display: none; }
/* Téléphone : le bouton de la barre saute, la zone de collage de la page le remplace */
.nav.fit-7 .nav-cta { display: none; }
.nav.fit-7 .nav-me-name { max-width: 8ch; }
/* Paliers ajoutés avec les liens de pages (session d'un admin sur téléphone : icônes des
   liens, code de session, « Copier le lien », compte et sortie) : le pseudo cède la place
   à une icône, puis, en tout dernier recours, les liens disparaissent */
.nav-me-ico, .copy-ico { display: none; width: 15px; height: 15px; flex: none; }
.nav.fit-8 .nav-me-name, .nav.fit-8 .nav-me-status, .nav.fit-8 #copyLink span { display: none; }
.nav.fit-8 .nav-me-ico, .nav.fit-8 .copy-ico { display: block; }
.nav.fit-8 .nav-me, .nav.fit-8 #copyLink { padding: 0 10px; }
/* Les blocs de la barre ne rétrécissent jamais : sinon leur contenu passe sous le voisin
   au lieu de déborder, et fitNav, qui mesure les bords des blocs, ne le voit pas */
.nav > .nav-links, .nav > .nav-session, .nav > .nav-cta-slot, .nav > .nav-account { flex-shrink: 0; }
.nav.fit-9 { gap: 6px; padding-left: 12px; }
.nav.fit-9 .nav-link, .nav.fit-9 .nav-me, .nav.fit-9 #copyLink, .nav.fit-9 .nav-logout { padding: 0 8px; }
.nav.fit-9 .nav-links { gap: 0; }
.nav.fit-9 .nav-account { gap: 4px; }
/* Logo toujours en entier (plus de [gs]) : sur un téléphone, dans une session, il faut
   encore resserrer le code de session, puis le logo, et en dernier recours l'icône du
   compte s'efface — « Mon compte » reste dans le menu du logo */
.nav.fit-10 .session-chip { letter-spacing: .05em; padding: 5px 9px 5px 8px; gap: 6px; }
.nav.fit-11 .logo { font-size: 14px; }
.nav.fit-12 .nav-me { display: none; }
.nav > *, .nav-links a, .nav-me, .nav-badge, .nav-account .btn { white-space: nowrap; }
.nav-status { font-size: 13px; color: var(--muted); white-space: nowrap; }
.nav-status b { color: var(--text); font-weight: 500; }

/* Session : code, direct, lien — juste à côté du logo (le compte part à droite) */
.nav-session { display: flex; align-items: center; gap: 14px; min-width: 0; }

/* Menu du logo : sous la barre, sur son bord gauche (placé par placeNavMenu) */
.nav-menu {
  position: fixed; z-index: 25; pointer-events: auto;
  padding: 8px; border-radius: 20px; border: 1px solid var(--line);
  background: #16131f;
  box-shadow: 0 18px 50px rgba(0, 0, 0, .55);
  opacity: 0; transform: translateY(-6px); transition: opacity .18s ease, transform .18s ease;
}
.nav-menu.open { opacity: 1; transform: none; }
@media (prefers-reduced-motion: reduce) { .nav-menu { transition: none; } }
.nm-group { display: grid; gap: 2px; }
.nm-sep { height: 1px; background: var(--line); margin: 6px 6px; }
.nm-title { margin: 6px 10px 4px; font: 600 11px var(--body); letter-spacing: .05em; text-transform: uppercase; color: var(--faint); }
.nm-item {
  display: flex; align-items: center; gap: 12px; padding: 9px 10px; border-radius: 12px;
  color: var(--text); text-decoration: none; outline: none; transition: background .12s;
}
.nm-item:hover, .nm-item:focus-visible { background: rgba(167, 139, 250, .12); }
.nm-item.is-current { background: rgba(167, 139, 250, .09); }
.nm-ico { flex: none; display: grid; place-items: center; width: 30px; height: 30px; border-radius: 9px; color: var(--violet); background: rgba(167, 139, 250, .1); }
.nm-ico svg { width: 15px; height: 15px; }
.nm-text { display: grid; min-width: 0; }
.nm-text b { font: 500 13.5px var(--body); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.nm-text small { font-size: 11.5px; color: var(--muted); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.nm-code { font: 600 12px var(--mono); letter-spacing: .08em; color: var(--lavender); margin-right: 4px; }
/* Session : un point, vert et vivant pour celle où l'on est */
.nm-live i { width: 8px; height: 8px; border-radius: 50%; background: var(--faint); }
.nm-live.on i { background: var(--v-solide); box-shadow: 0 0 8px var(--v-solide); }
.nm-here { margin-left: auto; font-size: 11px; color: var(--v-solide); }
.session-chip {
  display: inline-flex; align-items: center; gap: 8px;
  font: 600 13px var(--display); letter-spacing: .16em;
  padding: 5px 12px 5px 10px;
  border-radius: 999px;
  background: rgba(124, 58, 237, .14);
  border: 1px solid rgba(167, 139, 250, .35);
}
.live-dot { width: 7px; height: 7px; border-radius: 50%; background: var(--faint); transition: background .2s; }
.live-dot.on { background: var(--v-solide); box-shadow: 0 0 8px var(--v-solide); animation: live 2s ease-in-out infinite; }
@keyframes live { 50% { opacity: .45; } }

/* Premier chargement : ni page ni barre tant que la bonne page n'est pas prête et le compte
   connu (sinon l'accueil apparaissait un instant avant une session, puis une barre réduite
   au logo). Retiré par endBoot, dans app.js. */
body.booting :is(main, #app, .nav-wrap) { visibility: hidden; }

/* Qui peut faire quoi */
.cannot-create .create-only, .cannot-search .search-only, .is-viewer .owner-only, .is-guest .manager-only { display: none !important; }
.logged-in .anon-only, body:not(.anon) .anon-only { display: none !important; }
.cannot-create .dz-ring::before, .cannot-create .dz-ring::after { animation: none; opacity: 0; }
/* Visiteur sans compte : la case de collage ne lui sert à rien, les boutons .hero-cta la remplacent */
body.anon .dropzone { display: none; }
.settings-panel :disabled { opacity: .7; cursor: default; }
.settings-panel .segmented button:disabled[aria-checked="false"] { opacity: .45; }
.refresh-slot { width: 30px; }

.session-note { color: var(--muted); font-size: 13px; margin: -6px 0 14px; max-width: 460px; }
.home-links { display: flex; flex-wrap: wrap; justify-content: center; gap: 8px; margin: 0 0 18px; }
.empty-session { font-family: inherit; cursor: pointer; color: var(--muted); }
.resume.empty-session b { font: 600 13px var(--display); letter-spacing: 0; }
.empty-session:disabled { opacity: .6; cursor: default; }
.resume {
  display: inline-flex; align-items: center; gap: 6px;
  font-size: 13px; color: var(--text); text-decoration: none;
  padding: 5px 14px;
  border-radius: 999px; border: 1px solid var(--line); background: var(--glass-strong);
}
.resume:hover { border-color: var(--line-strong); }
.resume b { font: 600 13px var(--display); letter-spacing: .14em; color: var(--violet); }

.adm-actions { display: flex; align-items: center; gap: 8px; white-space: nowrap; }

.toast {
  position: fixed; left: 50%; bottom: 24px; z-index: 30;
  transform: translateX(-50%);
  max-width: min(92vw, 560px);
  padding: 10px 18px;
  border-radius: 999px;
  font-size: 14px;
  background: rgba(20, 17, 28, .85);
  border: 1px solid var(--line-strong);
  -webkit-backdrop-filter: blur(16px);
  backdrop-filter: blur(16px);
  box-shadow: 0 16px 50px rgba(0, 0, 0, .5);
  animation: toast .2s ease-out;
}
/* Barre « connecté en tant que » : posée en bas à gauche, jamais dans la barre de
   navigation dont la largeur est déjà comptée au pixel près. Teinte ambre, celle des
   avertissements du site : on doit voir d'un coup d'œil qu'on n'est pas chez soi. */
.imp-bar {
  position: fixed; left: 16px; bottom: 16px; z-index: 29;
  display: flex; align-items: center; gap: 12px;
  max-width: min(92vw, 520px);
  padding: 8px 8px 8px 16px;
  border-radius: 999px;
  font-size: 13px;
  background: rgba(20, 17, 28, .9);
  border: 1px solid rgba(240, 180, 90, .5);
  -webkit-backdrop-filter: blur(16px);
  backdrop-filter: blur(16px);
  box-shadow: 0 16px 50px rgba(0, 0, 0, .5);
}
.imp-bar b { color: var(--text); }
.imp-bar .imp-who { color: var(--muted); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.imp-bar .imp-dot {
  flex: none; width: 8px; height: 8px; border-radius: 50%;
  background: var(--v-limite); box-shadow: 0 0 10px var(--v-limite);
}
.imp-bar .btn { flex: none; }
/* Le message passager se pose au-dessus de la barre plutôt que dessus */
body.impersonating .toast { bottom: 80px; }
/* Sur un écran étroit, la barre passe sur deux lignes plutôt que de couper le nom :
   savoir en tant que QUI on est connecté est tout l'intérêt de cette barre. */
@media (max-width: 560px) {
  .imp-bar {
    right: 16px; max-width: none;
    flex-wrap: wrap; row-gap: 8px;
    border-radius: 18px; padding: 10px 12px 10px 14px;
  }
  .imp-bar .imp-who { white-space: normal; }
  .imp-bar .btn { margin-left: auto; }
}

.toast.ok { border-color: rgba(110, 231, 160, .45); }
.toast.err { border-color: rgba(255, 107, 107, .55); color: #ffd0d0; }
@keyframes toast { from { opacity: 0; transform: translate(-50%, 8px); } }
.nav-cta { margin-left: 0; }

/* ------------------------------------------------------------------ */
/* Boutons, champs, contrôles                                          */
/* ------------------------------------------------------------------ */
.btn {
  font: 500 14px var(--body);
  border-radius: 999px;
  padding: 9px 18px;
  cursor: pointer;
  border: 1px solid transparent;
  white-space: nowrap;
  transition: background .15s, border-color .15s, box-shadow .15s, transform .15s;
}
.btn:active { transform: translateY(1px); }
.btn.primary {
  background: linear-gradient(180deg, #f6f1ff, #ddd0ff);
  color: var(--lavender-ink);
  box-shadow: inset 0 1px 0 #fff, 0 0 26px rgba(167, 139, 250, .35);
}
.btn.primary:hover { box-shadow: inset 0 1px 0 #fff, 0 0 34px rgba(167, 139, 250, .55); }
.btn.glass { background: var(--glass-strong); color: var(--text); border-color: var(--line); }
.btn.glass:hover { border-color: var(--line-strong); background: rgba(255, 255, 255, .09); }
.btn.ghost { background: transparent; color: var(--text); border-color: var(--line); }
.btn.ghost:hover { border-color: var(--line-strong); }
.btn.small { padding: 5px 12px; font-size: 13px; }
/* Un lien habillé en bouton : ni soulignement, ni ligne de base qui décale le texte */
a.btn { display: inline-flex; align-items: center; justify-content: center; gap: 8px; text-decoration: none; }
.btn svg { flex: none; width: 15px; height: 15px; }
.btn.big { height: 48px; padding: 0 26px; font-size: 15px; }
.btn.big svg { transition: transform .2s; }
.btn.big:hover svg { transform: translateX(3px); }

/* Barre du haut : tous les boutons à la même hauteur (« Se connecter » était un petit
   bouton, « Créer un compte » un grand : ils ne s'alignaient pas) */
.nav .btn { height: 36px; padding: 0 16px; font-size: 13px; display: inline-flex; align-items: center; justify-content: center; gap: 6px; }
.nav .nav-logout { padding: 0 11px; }
.nav .nav-me { height: 36px; padding-top: 0; padding-bottom: 0; }


select, textarea,
input[type="text"], input[type="email"], input[type="password"], input[type="number"], input[type="search"] {
  width: 100%;
  background: rgba(255, 255, 255, .035);
  color: var(--text);
  border: 1px solid var(--line);
  border-radius: 12px;
  padding: 8px 11px;
  font: 14px var(--body);
  transition: border-color .15s, background .15s;
}
select {
  appearance: none;
  padding-right: 30px;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12'%3E%3Cpath d='M3 4.5 6 7.5 9 4.5' fill='none' stroke='%238f8f9c' stroke-width='1.5' stroke-linecap='round'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 10px center;
  background-size: 12px;
}
select option { background: #111118; }
select:hover, input:hover, textarea:hover { border-color: var(--line-strong); }
select:focus, input:focus, textarea:focus { outline: none; border-color: var(--violet); background-color: rgba(167, 139, 250, .06); }
input::placeholder, textarea::placeholder { color: var(--faint); }
/* Chrome repeint les champs remplis automatiquement en blanc : on rend la couleur au thème.
   La transition interminable est l'astuce habituelle, le fond de l'autofill n'étant pas
   modifiable autrement que par une ombre intérieure. */
input:-webkit-autofill,
input:-webkit-autofill:hover,
input:-webkit-autofill:focus {
  -webkit-text-fill-color: var(--text);
  -webkit-box-shadow: 0 0 0 1000px #15151d inset;
  caret-color: var(--text);
  transition: background-color 9999s ease-in-out 0s;
}
/* Listes déroulantes personnalisées (public/select.js) */
.kselect { position: relative; min-width: 0; }
.kselect-native {
  position: absolute !important;
  inset: 0;
  width: 100% !important;
  /* !important : `.settings-panel :disabled` (spectateur) la rendait visible à 70 %,
     et un <select multiple> débordait alors sous le bouton */
  opacity: 0 !important;
  pointer-events: none;
}
.kselect-button {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  min-height: 36px;
  padding: 7px 10px 7px 12px;
  border-radius: 12px;
  border: 1px solid var(--line);
  background: rgba(255, 255, 255, .035);
  color: var(--text);
  font: 14px var(--body);
  text-align: left;
  cursor: pointer;
  transition: border-color .15s, background .15s, box-shadow .15s;
}
.kselect-label { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.kselect-chevron { flex: none; width: 12px; height: 12px; color: var(--muted); transition: transform .2s ease; }
.kselect-button:hover { border-color: var(--line-strong); background: rgba(255, 255, 255, .055); }
.kselect-button:focus-visible { outline: none; border-color: var(--violet); box-shadow: 0 0 0 3px rgba(124, 58, 237, .22); }
.kselect.is-open .kselect-button { border-color: var(--violet); background: rgba(167, 139, 250, .08); box-shadow: 0 0 0 3px rgba(124, 58, 237, .18); }
.kselect.is-open .kselect-chevron { transform: rotate(180deg); color: var(--text); }
.kselect-button:disabled { cursor: default; opacity: .7; }
.kselect-button:disabled:hover { border-color: var(--line); background: rgba(255, 255, 255, .035); }
.kselect-button:disabled .kselect-chevron { opacity: 0; }

.kselect-pop {
  position: fixed;
  z-index: 60;
  width: max-content;
  max-width: min(360px, calc(100vw - 16px));
  overflow-y: auto;
  padding: 5px;
  border-radius: 16px;
  background: rgba(21, 18, 29, .94);
  border: 1px solid var(--line-strong);
  -webkit-backdrop-filter: blur(20px) saturate(140%);
  backdrop-filter: blur(20px) saturate(140%);
  box-shadow: 0 22px 60px rgba(0, 0, 0, .6), 0 0 0 1px rgba(0, 0, 0, .4), inset 0 1px 0 rgba(255, 255, 255, .05);
  animation: kselect-in .14s ease-out;
  overscroll-behavior: contain;
}
.kselect-pop.is-above { animation-name: kselect-in-above; }
@keyframes kselect-in { from { opacity: 0; transform: translateY(-4px) scale(.98); } }
@keyframes kselect-in-above { from { opacity: 0; transform: translateY(4px) scale(.98); } }
.kselect-pop::-webkit-scrollbar { width: 8px; }
.kselect-pop::-webkit-scrollbar-thumb { border-width: 2px; }
.kselect-opt {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  padding: 8px 10px 8px 12px;
  border-radius: 10px;
  font-size: 14px;
  color: #cfcfda;
  cursor: pointer;
  white-space: nowrap;
}
.kselect-opt-label { overflow: hidden; text-overflow: ellipsis; }
.kselect-opt.is-active { background: rgba(255, 255, 255, .07); color: var(--text); }
.kselect-opt.is-selected { color: #fff; background: rgba(124, 58, 237, .18); }
.kselect-opt.is-selected.is-active { background: rgba(124, 58, 237, .26); }
.kselect-opt.is-disabled { opacity: .45; cursor: default; }
.kselect-check { flex: none; width: 12px; height: 12px; color: var(--violet); visibility: hidden; }
.kselect-opt.is-selected .kselect-check { visibility: visible; }
/* Choix multiple : une case à cocher à gauche de chaque ligne */
.kselect-pop.is-multi .kselect-opt { justify-content: flex-start; gap: 10px; }
.kselect-pop.is-multi .kselect-opt.is-selected { background: transparent; }
.kselect-pop.is-multi .kselect-opt.is-selected.is-active,
.kselect-pop.is-multi .kselect-opt.is-active { background: rgba(255, 255, 255, .07); }
.kselect-box {
  flex: none; display: grid; place-items: center;
  width: 16px; height: 16px; border-radius: 5px;
  border: 1.5px solid var(--line-strong); background: rgba(255, 255, 255, .03);
  transition: background .12s, border-color .12s;
}
.kselect-box .kselect-check { width: 11px; height: 11px; color: #120e1c; }
.kselect-opt.is-selected .kselect-box { background: var(--violet); border-color: var(--violet); }
.kselect-label.is-empty { color: var(--muted); }

textarea {
  min-height: 110px;
  resize: vertical;
  padding: 10px 12px;
  font: 13px/1.6 var(--mono);
}
textarea::placeholder, input::placeholder { color: var(--faint); }
#keyLevel { font: 600 17px var(--display); padding: 5px 11px; }

.toggle { display: flex; align-items: flex-start; gap: 10px; cursor: pointer; font-size: 13px; color: var(--muted); margin: 0 0 10px; }
.toggle input {
  appearance: none;
  flex: none;
  width: 34px; height: 20px;
  margin: 0;
  border-radius: 999px;
  background: rgba(255, 255, 255, .1);
  border: 1px solid var(--line);
  position: relative;
  cursor: pointer;
  transition: background .15s;
}
.toggle input::after {
  content: "";
  position: absolute; top: 2px; left: 2px;
  width: 14px; height: 14px;
  border-radius: 50%;
  background: var(--muted);
  transition: transform .15s, background .15s;
}
.toggle input:checked { background: var(--violet-deep); border-color: var(--violet); }
.toggle input:checked::after { transform: translateX(14px); background: #fff; }
.clip-status { font-size: 13px; color: var(--muted); margin: -2px 0 12px 44px; }
.clip-status:empty { display: none; }
.clip-status.ok { color: var(--v-solide); }
.clip-status.err { color: var(--depleted); }

.segmented {
  display: flex;
  padding: 3px;
  margin-bottom: 12px;
  border-radius: 999px;
  background: rgba(255, 255, 255, .03);
  border: 1px solid var(--line);
}
.segmented button {
  flex: 1;
  font: 500 14px var(--body);
  color: var(--muted);
  background: transparent;
  border: 0;
  border-radius: 999px;
  padding: 7px 10px;
  cursor: pointer;
  transition: color .15s, background .15s;
}
.segmented button:hover { color: var(--text); }
.segmented button[aria-checked="true"] {
  color: #fff;
  background: rgba(255, 255, 255, .1);
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .14), 0 0 18px rgba(167, 139, 250, .25);
}

.pill {
  display: inline-flex; align-items: center; gap: 8px;
  font-size: 12px; color: var(--text);
  padding: 5px 14px;
  border-radius: 999px;
  background: rgba(124, 58, 237, .14);
  border: 1px solid rgba(167, 139, 250, .35);
  box-shadow: 0 0 22px rgba(124, 58, 237, .25);
}
.pill-sep { width: 4px; height: 4px; border-radius: 50%; background: var(--violet); }

.chip {
  display: inline-block;
  font-size: 12px; font-weight: 500;
  padding: 2px 10px;
  border-radius: 999px;
  border: 1px solid currentColor;
}
.chip.v-solide { color: var(--v-solide); background: rgba(110, 231, 160, .1); }
.chip.v-correct { color: var(--v-correct); background: rgba(147, 180, 255, .1); }
.chip.v-limite { color: var(--v-limite); background: rgba(245, 183, 91, .1); }
.chip.v-risque { color: var(--v-risque); background: rgba(255, 107, 107, .1); }

/* ------------------------------------------------------------------ */
/* Accueil                                                             */
/* ------------------------------------------------------------------ */
.home { position: relative; z-index: 1; overflow-x: clip; }
.hero {
  min-height: 100vh;
  min-height: 100svh;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  padding: 120px 16px 48px;
}
.hero h1 {
  font: 500 clamp(38px, 6.4vw, 76px)/1.06 var(--display);
  letter-spacing: -.035em;
  margin: 22px 0 16px;
  text-shadow: 0 4px 40px rgba(0, 0, 0, .55);
}
.lead { color: #c8c3d6; font-size: clamp(15px, 1.6vw, 18px); max-width: 520px; margin: 0 0 34px; text-shadow: 0 2px 20px rgba(0, 0, 0, .8); }

.dropzone {
  width: min(100%, 500px);
  display: grid;
  justify-items: center;
  gap: 10px;
  padding: 30px 26px 26px;
  margin-bottom: 20px;
  border-radius: 28px;
  background: rgba(14, 12, 20, .55);
  border: 1px solid var(--line-strong);
  -webkit-backdrop-filter: blur(22px) saturate(140%);
  backdrop-filter: blur(22px) saturate(140%);
  box-shadow: 0 30px 80px rgba(0, 0, 0, .55), inset 0 1px 0 rgba(255, 255, 255, .06);
  cursor: pointer;
  transition: border-color .2s, box-shadow .2s, transform .2s;
}
.dropzone:hover, .dropzone:focus-visible {
  border-color: rgba(167, 139, 250, .55);
  box-shadow: 0 30px 80px rgba(0, 0, 0, .55), 0 0 0 4px rgba(124, 58, 237, .15), 0 0 60px rgba(124, 58, 237, .25);
  outline: none;
}
.dropzone.is-reading { transform: scale(.985); border-color: var(--violet); }
.dz-ring {
  position: relative;
  width: 44px; height: 44px;
  display: grid; place-items: center;
  border-radius: 50%;
  border: 1px solid rgba(167, 139, 250, .4);
}
.dz-ring::before, .dz-ring::after {
  content: "";
  position: absolute; inset: -1px;
  border-radius: 50%;
  border: 1px solid var(--violet);
  animation: ping 2.4s cubic-bezier(.2, .6, .3, 1) infinite;
}
.dz-ring::after { animation-delay: 1.2s; }
.dz-dot { width: 10px; height: 10px; border-radius: 50%; background: var(--violet); box-shadow: 0 0 16px var(--violet); }
@keyframes ping {
  from { transform: scale(1); opacity: .8; }
  to { transform: scale(2.1); opacity: 0; }
}
.dz-title { font: 500 19px var(--display); }
.dz-hint { color: var(--muted); font-size: 14px; display: inline-flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 6px; }
.dz-error { color: var(--depleted); font-size: 13px; max-width: 400px; }
/* ------------------------------------------------------------------ */
/* Page joueur                                                         */
/* ------------------------------------------------------------------ */
.player-page { position: relative; z-index: 1; max-width: 1180px; margin: 0 auto; padding: 104px 24px 60px; }
.player-search {
  display: flex; align-items: center; gap: 6px;
  width: min(100%, 640px);
  margin: 0 auto 28px;
  padding: 6px 6px 6px 18px;
  border-radius: 999px;
  background: rgba(14, 12, 20, .6);
  border: 1px solid var(--line-strong);
  -webkit-backdrop-filter: blur(22px) saturate(140%);
  backdrop-filter: blur(22px) saturate(140%);
  box-shadow: 0 20px 50px rgba(0, 0, 0, .45), inset 0 1px 0 rgba(255, 255, 255, .06);
  transition: border-color .2s, box-shadow .2s;
}
.player-search:focus-within { border-color: rgba(167, 139, 250, .55); box-shadow: 0 20px 50px rgba(0, 0, 0, .45), 0 0 0 4px rgba(124, 58, 237, .15); }
.ps-icon { flex: none; width: 16px; height: 16px; color: var(--violet); }
.player-search input,
.player-search input:focus { flex: 1; min-width: 0; background: transparent; border: 0; outline: none; color: var(--text); font: 15px var(--body); padding: 8px 8px 8px 6px; }
.player-search input::placeholder { color: var(--muted); }
.player-search .kselect { flex: none; width: 74px; }
.player-search .kselect-button { border-radius: 999px; padding: 7px 12px; }
.player-search .btn { padding: 9px 22px; }

.player-search-note { text-align: center; margin: -18px auto 28px; }

.player-empty { text-align: center; color: var(--muted); max-width: 520px; margin: 40px auto; }
.player-empty h2 { font: 500 24px var(--display); color: var(--text); margin: 0 0 8px; }
.player-empty .error { color: var(--depleted); }
/* Favoris : des cartes, plusieurs par ligne, au-dessus de l'historique */
.favs { max-width: 760px; margin: -12px auto 34px; }
.favs h3, .recent h3 { font: 600 12px var(--body); text-transform: uppercase; letter-spacing: .05em; color: var(--muted); margin: 0 0 8px 4px; }
.favs-count { color: var(--faint); margin-left: 4px; }
.favs-empty { margin: 0 4px; font-size: 13px; color: var(--faint); }
.fav-grid { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(170px, 1fr)); gap: 10px; }
.fav-card {
  --cls: var(--violet);
  position: relative; border-radius: 16px; border: 1px solid var(--line);
  background: linear-gradient(135deg, color-mix(in srgb, var(--cls) 10%, transparent), rgba(14, 12, 20, .6) 60%);
  transition: border-color .2s, transform .2s;
}
.fav-card:hover, .fav-card:focus-within { border-color: color-mix(in srgb, var(--cls) 45%, transparent); transform: translateY(-2px); }
.fav-link { display: flex; align-items: center; gap: 10px; padding: 12px 34px 12px 12px; color: inherit; text-decoration: none; border-radius: 16px; }
.fav-ico {
  flex: none; width: 34px; height: 34px; border-radius: 10px; background: color-mix(in srgb, var(--cls) 30%, #111) center / 112% no-repeat;
  box-shadow: 0 0 0 1px color-mix(in srgb, var(--cls) 50%, transparent);
}
.fav-text { display: grid; min-width: 0; }
.fav-name { font: 600 14px var(--display); color: var(--cls); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.fav-sub { font-size: 11.5px; color: var(--muted); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
/* Étoile : vide et discrète, pleine et violette quand le joueur est en favori */
.fav-star {
  display: grid; place-items: center; width: 30px; height: 30px; padding: 0; border: 0; border-radius: 99px;
  background: transparent; color: var(--faint); cursor: pointer; transition: color .15s, background .15s, transform .15s;
}
.fav-star svg { width: 15px; height: 15px; fill: none; stroke: currentColor; stroke-width: 1.4; }
.fav-star:hover, .fav-star:focus-visible { color: var(--lavender); background: rgba(167, 139, 250, .12); }
.fav-star.on { color: var(--violet); }
.fav-star.on svg { fill: currentColor; }
.fav-star:active { transform: scale(.88); }
.fav-card-star { position: absolute; top: 5px; right: 5px; width: 26px; height: 26px; }
.fav-card-star svg { width: 13px; height: 13px; }
.rc-star { flex: none; }
.ph-title { display: flex; align-items: center; gap: 8px; }
/* Icône de la spé à gauche du pseudo, dessinée comme celle des cartes de favoris */
.ph-ico {
  flex: none; width: 40px; height: 40px; margin-right: 4px; border-radius: 11px;
  background: color-mix(in srgb, var(--cls) 30%, #111) center / 112% no-repeat;
  box-shadow: 0 0 0 1px color-mix(in srgb, var(--cls) 50%, transparent);
}
.ph-star { width: 36px; height: 36px; }
.ph-star svg { width: 19px; height: 19px; }

/* Historique des recherches, sous le message d'accueil de la fiche joueur */
.recent { max-width: 760px; margin: -12px auto 40px; }
.favs + .recent { margin-top: 0; }
.recent-list { list-style: none; margin: 0; padding: 6px; border-radius: 18px; border: 1px solid var(--line); background: rgba(14, 12, 20, .5); }
.recent-row { display: flex; align-items: center; gap: 4px; border-radius: 12px; transition: background .15s; }
.recent-row:hover, .recent-row:focus-within { background: rgba(167, 139, 250, .08); }
.recent-link { flex: 1; min-width: 0; display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: baseline; gap: 10px; padding: 10px 6px 10px 12px; color: inherit; text-decoration: none; }
.rc-name { font: 600 14px var(--display); white-space: nowrap; }
.rc-sub { font-size: 12px; color: var(--muted); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.rc-when { font-size: 12px; color: var(--faint); white-space: nowrap; }
.rc-x { flex: none; display: grid; place-items: center; width: 30px; height: 30px; margin-right: 4px; border: 0; border-radius: 99px; background: transparent; color: var(--faint); cursor: pointer; transition: color .15s, background .15s; }
.rc-x svg { width: 14px; height: 14px; }
.rc-x:hover, .rc-x:focus-visible { color: var(--v-risque); background: rgba(255, 107, 107, .12); }

.player-head {
  --cls: var(--violet);
  position: relative;
  display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 16px 28px;
  padding: 22px 26px;
  margin-bottom: 18px;
  border-radius: 24px;
  background: rgba(14, 12, 20, .72);
  border: 1px solid var(--line);
  -webkit-backdrop-filter: blur(16px);
  backdrop-filter: blur(16px);
  overflow: hidden;
}
.player-head::before {
  content: ""; position: absolute; left: 0; top: 18px; bottom: 18px; width: 3px; border-radius: 3px;
  background: var(--cls); box-shadow: 0 0 14px color-mix(in srgb, var(--cls) 60%, transparent);
}
.ph-name { font: 600 34px var(--display); letter-spacing: -.03em; margin: 0; color: var(--cls); line-height: 1.1; }
.ph-sub { color: var(--muted); font-size: 14px; margin-top: 4px; }
.ph-stats { display: flex; flex-wrap: wrap; gap: 8px 22px; }
.ph-stat { display: grid; gap: 1px; text-align: right; }
.ph-stat small { color: var(--faint); font-size: 12px; }
.ph-stat b { font: 600 22px var(--display); }
/* Main : lien vers sa fiche, souligné en pointillés et violet au survol */
a.ph-main { color: inherit; text-decoration: none; border-radius: 8px; }
a.ph-main b { text-decoration: underline dotted rgba(167, 139, 250, .55); text-underline-offset: 4px; text-decoration-thickness: 1.5px; transition: color .15s; }
a.ph-main:hover b, a.ph-main:focus-visible b { color: var(--violet); }
a.ph-main:focus-visible { outline: 2px solid var(--violet); outline-offset: 3px; }
.ph-links { flex-basis: 100%; display: flex; flex-wrap: wrap; gap: 6px 18px; font-size: 13px; color: var(--muted); }

.player-metric { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin: 0 4px 12px; color: var(--muted); font-size: 13px; }
.player-metric .segmented { width: auto; }
.player-cards { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 12px; margin-bottom: 18px; }
.pcard {
  position: relative;
  display: grid; gap: 6px; align-content: start;
  padding: 16px 18px 16px;
  border-radius: 20px;
  background: rgba(14, 12, 20, .72);
  border: 1px solid var(--line);
  -webkit-backdrop-filter: blur(16px);
  backdrop-filter: blur(16px);
  color: inherit; font: inherit; text-align: left;
  cursor: pointer;
  transition: border-color .15s, background .15s, box-shadow .15s;
}
.pcard:hover { border-color: var(--line-strong); }
.pcard.active { border-color: rgba(167, 139, 250, .55); box-shadow: 0 0 0 3px rgba(124, 58, 237, .14), 0 18px 40px rgba(124, 58, 237, .14); }
.pc-title { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 4px 8px; font: 500 15px var(--display); }
.pc-index { display: flex; align-items: baseline; gap: 8px; }
.pc-index b { font: 600 42px var(--display); letter-spacing: -.03em; line-height: 1; }
.pc-index span { font-size: 14px; }
.pcard.v-solide .pc-index { color: var(--v-solide); }
.pcard.v-correct .pc-index { color: var(--v-correct); }
.pcard.v-limite .pc-index { color: var(--v-limite); }
.pcard.v-risque .pc-index { color: var(--v-risque); }
.pcard.v-inconnu .pc-index { color: var(--faint); }
.pc-meter { height: 4px; border-radius: 2px; background: rgba(255, 255, 255, .08); overflow: hidden; }
.pc-meter i { display: block; height: 100%; background: currentColor; border-radius: 2px; }
.pcard .pc-meter { color: var(--faint); }
.pcard.v-solide .pc-meter { color: var(--v-solide); }
.pcard.v-correct .pc-meter { color: var(--v-correct); }
.pcard.v-limite .pc-meter { color: var(--v-limite); }
.pcard.v-risque .pc-meter { color: var(--v-risque); }
.pc-sub { color: var(--muted); font-size: 12px; display: flex; flex-wrap: wrap; gap: 2px 10px; }
.pc-sub b { color: var(--text); font-weight: 500; }
/* Niveau de clé (Mythique+) et boss (raid) : − valeur +, sur sa propre ligne sous le titre, alignée d'une carte à l'autre */
.pc-picker { display: flex; align-items: center; gap: 6px; min-width: 0; margin-top: -2px; font-size: 12px; color: var(--muted); }
.pc-picker button { flex: none; }
.pc-picker b { flex: 1; min-width: 0; text-align: center; font-weight: 500; color: var(--text); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.pc-picker button {
  width: 22px; height: 22px; border-radius: 50%;
  border: 1px solid var(--line); background: var(--glass-strong); color: var(--muted);
  font: 500 14px/1 var(--body); cursor: pointer; display: grid; place-items: center;
}
.pc-picker button:hover { color: var(--text); border-color: var(--line-strong); }
.player-detail {
  padding: 6px 14px 8px;
  border-radius: 24px;
  background: rgba(14, 12, 20, .72);
  border: 1px solid var(--line);
  -webkit-backdrop-filter: blur(16px);
  backdrop-filter: blur(16px);
}
.player-detail .detail { display: block; margin: 8px 0; }
@media (max-width: 960px) { .player-cards { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 600px) {
  .player-page { padding: 88px 12px 40px; }
  .player-search { flex-wrap: wrap; border-radius: 22px; padding: 8px 8px 8px 14px; }
  .player-search .btn { flex: 1; }
  .ph-name { font-size: 26px; }
  .ph-ico { width: 32px; height: 32px; border-radius: 9px; }
  .ph-stat { text-align: left; }
  .pcard { padding: 14px 14px; }
  .pc-index b { font-size: 34px; }
}
@media (max-width: 420px) { .player-cards { grid-template-columns: 1fr; } }

/* Suggestions de joueurs sous un champ de recherche */
.player-search, .home-search { position: relative; z-index: 20; }
.suggest {
  position: absolute; left: 0; right: 0; top: calc(100% + 8px);
  padding: 6px;
  border-radius: 18px;
  background: rgba(18, 15, 25, .97);
  border: 1px solid var(--line-strong);
  box-shadow: 0 24px 60px rgba(0, 0, 0, .6), 0 0 0 1px rgba(167, 139, 250, .08);
  text-align: left;
  max-height: 340px;
  overflow-y: auto;
}
.suggest-item {
  display: grid; grid-template-columns: auto 1fr auto; align-items: baseline; gap: 10px;
  padding: 8px 12px;
  border-radius: 12px;
  cursor: pointer;
}
.suggest-item:hover, .suggest-item.active { background: rgba(167, 139, 250, .12); }
.si-name { font: 500 14px var(--display); }
.si-realm { color: var(--muted); font-size: 13px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.si-region { color: var(--faint); font-size: 11px; }

/* Accueil : recherche d'un joueur */
.home-search {
  display: flex; align-items: center; gap: 4px;
  width: min(100%, 440px);
  margin: 0 0 18px;
  padding: 4px 4px 4px 14px;
  border-radius: 999px;
  background: rgba(14, 12, 20, .5);
  border: 1px solid var(--line);
  -webkit-backdrop-filter: blur(16px);
  backdrop-filter: blur(16px);
  transition: border-color .2s, box-shadow .2s;
}
.home-search:focus-within { border-color: rgba(167, 139, 250, .5); box-shadow: 0 0 0 3px rgba(124, 58, 237, .14); }
.home-search svg { flex: none; width: 14px; height: 14px; color: var(--violet); }
.home-search input,
.home-search input:focus { flex: 1; min-width: 0; background: transparent; border: 0; outline: none; color: var(--text); font: 14px var(--body); padding: 6px 6px 6px 8px; }
.home-search input::placeholder { color: var(--muted); }

/* Sessions en cours (accueil, admin : ce PC ou le réseau local) */
.live-sessions {
  width: min(100%, 460px);
  display: grid; gap: 8px;
  margin: 0 0 18px;
  padding: 12px 13px 13px;
  border-radius: 22px;
  background: rgba(14, 12, 20, .5);
  border: 1px solid var(--line);
  text-align: left;
}
.ls-head { display: flex; align-items: baseline; justify-content: space-between; gap: 10px; font-size: 12px; color: var(--muted); }
.ls-list { display: grid; gap: 6px; }
.ls-row {
  display: grid; grid-template-columns: auto 1fr auto; align-items: center; gap: 12px;
  padding: 8px 11px;
  border-radius: 14px;
  background: rgba(255, 255, 255, .03);
  border: 1px solid transparent;
  color: var(--text); text-decoration: none;
  transition: background .15s, border-color .15s;
}
.ls-row:hover, .ls-row:focus-visible { outline: none; background: rgba(167, 139, 250, .09); border-color: rgba(167, 139, 250, .38); }
.ls-code { font: 600 13px var(--mono); letter-spacing: .08em; color: var(--lavender); }
.ls-main { display: grid; gap: 2px; min-width: 0; }
.ls-what { font-size: 13px; display: flex; align-items: center; gap: 6px; }
.ls-nums { font-size: 11px; color: var(--muted); }
.ls-tag {
  flex: none;
  font-style: normal; font-size: 10px; text-transform: uppercase; letter-spacing: .06em;
  padding: 1px 6px; border-radius: 999px;
  background: rgba(167, 139, 250, .16); color: var(--violet);
}
.ls-when { font-size: 11px; color: var(--muted); white-space: nowrap; }

/* Mot de passe du jour (affiché seulement en local, pour l'hôte) */
.daily-pass { display: grid; gap: 6px; font-size: 12px; color: var(--muted); }
.hero .daily-pass {
  justify-items: center;
  margin: -4px 0 16px;
  padding: 10px 16px 11px;
  border-radius: 18px;
  background: rgba(14, 12, 20, .5);
  border: 1px solid var(--line);
}
.dp-row { display: inline-flex; align-items: center; gap: 10px; }
.dp-value {
  font: 600 16px var(--mono);
  letter-spacing: .08em;
  color: var(--lavender);
  background: rgba(167, 139, 250, .1);
  border-color: rgba(167, 139, 250, .3);
  padding: 3px 10px;
  border-radius: 8px;
}
.dp-note { color: var(--faint); font-size: 11px; }

/* Hors réseau local : mot de passe de l'hôte pour créer une session */
.password-form {
  display: flex; align-items: center; gap: 2px;
  width: min(100%, 420px);
  margin: -6px 0 20px;
  padding: 5px 5px 5px 16px;
  border-radius: 999px;
  background: rgba(14, 12, 20, .55);
  border: 1px solid var(--line-strong);
  -webkit-backdrop-filter: blur(22px) saturate(140%);
  backdrop-filter: blur(22px) saturate(140%);
  box-shadow: 0 20px 50px rgba(0, 0, 0, .45), inset 0 1px 0 rgba(255, 255, 255, .06);
  transition: border-color .2s, box-shadow .2s;
}
.password-form:focus-within {
  border-color: rgba(167, 139, 250, .55);
  box-shadow: 0 20px 50px rgba(0, 0, 0, .45), 0 0 0 4px rgba(124, 58, 237, .15), 0 0 40px rgba(124, 58, 237, .22);
}
.pw-icon { flex: none; width: 16px; height: 16px; color: var(--violet); filter: drop-shadow(0 0 6px rgba(167, 139, 250, .6)); }
.password-form input,
.password-form input:focus {
  flex: 1; min-width: 0;
  background: transparent;
  border: 0; outline: none;
  color: var(--text);
  font: 15px var(--body);
  padding: 8px 8px 8px 10px;
}
.password-form input::placeholder { color: var(--muted); }
.password-form input[type="password"]:not(:placeholder-shown) { letter-spacing: .2em; }
.pw-eye {
  flex: none;
  display: grid; place-items: center;
  width: 34px; height: 34px;
  margin-right: 4px;
  border: 0; border-radius: 50%;
  background: transparent;
  color: var(--faint);
  cursor: pointer;
  transition: color .15s, background .15s;
}
.pw-eye:hover { color: var(--text); background: var(--glass-strong); }
.pw-eye svg { width: 16px; height: 16px; }
.pw-eye[aria-pressed="true"] { color: var(--violet); }
.pw-eye[aria-pressed="true"] .pw-eye-slash { display: none; }
.password-form .btn { padding: 9px 20px; }
.password-form.shake { animation: shake .4s ease; border-color: color-mix(in srgb, var(--depleted) 60%, transparent); }
@keyframes shake {
  20%, 60% { transform: translateX(-6px); }
  40%, 80% { transform: translateX(6px); }
}
.visually-hidden { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.dz-error:empty { display: none; }
.hero .toggle { max-width: 440px; text-align: left; }

.trusted { margin-top: 42px; display: grid; justify-items: center; gap: 12px; }
.trusted-label { font-size: 12px; color: var(--faint); }
.trusted-row { display: flex; flex-wrap: wrap; justify-content: center; gap: 12px 36px; }
.trusted-item { display: inline-flex; align-items: center; gap: 9px; font: 500 15px var(--display); color: #a9a9b4; letter-spacing: -.01em; }
.trusted-item .dot { width: 7px; height: 7px; border-radius: 50%; background: var(--faint); }
.trusted-item .dot.ok { background: var(--v-solide); box-shadow: 0 0 8px var(--v-solide); }
.trusted-item .dot.warn { background: var(--v-limite); }
.trusted-item .dot.err { background: var(--v-risque); }
.trusted-item small { font: 400 12px var(--body); color: var(--faint); }

.story {
  position: relative;
  max-width: 1080px;
  margin: 0 auto;
  padding: 120px 16px 120px 180px;
}
.story-kicker { font: 500 clamp(22px, 2.6vw, 30px)/1.2 var(--display); letter-spacing: -.02em; margin: 0 0 26px; }
.reveal { font: 500 clamp(26px, 3.6vw, 44px)/1.22 var(--display); letter-spacing: -.03em; margin: 0; max-width: 820px; }
.reveal .w { color: #34343c; transition: color .35s ease; }
.reveal .w.lit { color: var(--text); }
.reveal .w.hl.lit {
  background: linear-gradient(90deg, #c4b5fd, #8b5cf6 60%, #ec4899);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}
.prism-cube {
  position: absolute;
  left: -30px; top: 50%;
  width: 150px; height: 170px;
  border-radius: 26px;
  transform: translateY(-50%) rotate(-16deg) skewY(8deg);
  background:
    linear-gradient(140deg, rgba(255, 255, 255, .3), rgba(255, 255, 255, 0) 35%),
    conic-gradient(from 210deg, #0a84ff, #5e5ce6, #bf5af2, #ff2d55, #ff9500, #ffd60a, #34c759, #0a84ff);
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .35), 0 40px 90px rgba(94, 92, 230, .3);
  animation: float 9s ease-in-out infinite alternate;
}
.prism-cube i {
  position: absolute; inset: 16px;
  border-radius: 16px;
  background: linear-gradient(165deg, rgba(0, 0, 0, .88), rgba(0, 0, 0, .45) 55%, rgba(255, 255, 255, .18));
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .12);
}
@keyframes float {
  from { translate: 0 -8px; }
  to { translate: 0 10px; }
}

.card {
  position: relative;
  overflow: hidden;
  border-radius: 26px;
  padding: 24px;
  background: linear-gradient(180deg, #101016, #09090d);
  border: 1px solid var(--line);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .04);
}
.card.glow::after {
  content: "";
  position: absolute; inset: 0;
  pointer-events: none;
  background: radial-gradient(110% 60% at 50% 115%, rgba(124, 58, 237, .5), rgba(124, 58, 237, .12) 45%, transparent 70%);
}
.card > * { position: relative; z-index: 1; }
.card-kicker { display: block; font-size: 13px; color: var(--violet); margin-bottom: 6px; }
.card h2, .card h3 { font: 500 22px/1.25 var(--display); letter-spacing: -.02em; margin: 0 0 10px; }
.card p { color: var(--muted); margin: 0; }

/* Aperçu de l'accueil : un exemple statique de liste, avec les mêmes classes que la vraie
   (.strip, .who, .roles, .index…) pour que ce soit exactement le rendu du site, pas une
   maquette approchée. .premade et .premade-head, réutilisés tels quels pour le duo, ne
   dépendent pas de .board : ils tiennent seuls. */
.preview { max-width: 1080px; margin: 0 auto; padding: 0 16px 110px; text-align: center; }
/* Les deux blocs à la même hauteur (demande de l'utilisateur) : la grille les étire, et le
   pied du détail (honneurs) descend en bas pour que l'espace gagné ne reste pas en plein milieu */
.preview-grid { display: grid; grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr); gap: 16px; align-items: stretch; text-align: left; }
.preview-card { padding: 6px; }
/* Bandeau de la session d'exemple, comme la barre du haut d'une vraie session */
.preview-bar { display: flex; align-items: center; gap: 8px; padding: 12px 16px 10px; font-size: 12px; color: var(--muted); border-bottom: 1px solid var(--line); }
.preview-bar b { color: var(--text); font-weight: 600; }
.preview-dot { width: 7px; height: 7px; border-radius: 50%; background: var(--v-solide); box-shadow: 0 0 8px var(--v-solide); animation: live 2s ease-in-out infinite; }
.preview-live { margin-left: auto; color: var(--faint); white-space: nowrap; }
.demo-list { display: flex; flex-direction: column; padding-top: 4px; }
.demo-row {
  display: flex; align-items: center; gap: 16px;
  padding: 13px 16px;
  border-bottom: 1px solid var(--line);
  border-radius: 14px;
}
.demo-row.is-open { background: rgba(167, 139, 250, .1); }
.premade .demo-row { border-bottom: 1px solid rgba(167, 139, 250, .12); }
.premade .demo-row:last-child, .demo-list > .demo-row:last-child { border-bottom: 0; }
.demo-row .who { flex: 1; min-width: 0; }
.demo-row .index { flex: none; }
.demo-row .meter { flex: none; width: 56px; }
/* Panneau de détail d'exemple : même .breakdown que le vrai panneau */
/* .detail est caché par défaut (le vrai panneau l'affiche) : d'où le sélecteur double */
.preview-detail.detail { display: flex; flex-direction: column; margin: 0; padding: 22px; border-radius: 26px; border: 1px solid var(--line); background: linear-gradient(180deg, rgba(16, 14, 23, .96), rgba(11, 9, 16, .96)); animation: none; }
.pd-head { display: flex; align-items: stretch; gap: 14px; margin-bottom: 22px; }
.pd-head .strip { flex: none; }
.pd-head > div { flex: 1; min-width: 0; }
.pd-name { font: 500 22px/1.2 var(--display); letter-spacing: -.02em; }
.pd-sub { color: var(--muted); font-size: 12px; margin-top: 4px; }
.pd-index { display: grid; justify-items: end; align-content: center; font-size: 12px; color: var(--v-solide); }
.pd-index b { font: 600 30px/1 var(--display); }
.preview-detail .breakdown .val { min-width: 0; }
.preview-detail section { margin-bottom: 20px; }
.pd-foot { display: flex; flex-wrap: wrap; gap: 8px; margin-top: auto; padding-top: 16px; border-top: 1px solid var(--line); }
.hchip-demo { font-size: 12px; padding: 4px 11px; border-radius: 999px; border: 1px solid currentColor; }
.hchip-demo.up { color: var(--honor-up, #4ade80); background: rgba(74, 222, 128, .08); }
.hchip-demo.crown { color: var(--honor-crown, #f5c04a); background: rgba(245, 192, 74, .08); }
.preview-note { color: var(--faint); font-size: 12px; margin: 18px 0 0; }

/* Haut de page, visiteur sans compte : deux boutons et trois arguments */
.hero-cta { display: flex; flex-wrap: wrap; justify-content: center; gap: 12px; margin-bottom: 22px; }
.hero-perks { list-style: none; display: flex; flex-wrap: wrap; justify-content: center; gap: 8px 22px; padding: 0; margin: 0 0 8px; font-size: 13px; color: var(--muted); }
.hero-perks li { display: inline-flex; align-items: center; gap: 7px; }
.hero-perks li::before {
  content: ""; width: 14px; height: 14px; flex: none;
  background: var(--violet);
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='m3.5 8.5 3 3 6-7' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center / contain no-repeat;
  mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='m3.5 8.5 3 3 6-7' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center / contain no-repeat;
}

/* Les outils : six cartes */
.features { max-width: 1080px; margin: 0 auto; padding: 0 16px 110px; text-align: center; }
.feat-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; text-align: left; }
.feat { transition: border-color .2s, transform .2s; }
.feat:hover { border-color: rgba(167, 139, 250, .35); transform: translateY(-2px); }
.feat h3 { font-size: 18px; margin-top: 16px; }
.feat p { font-size: 14px; line-height: 1.6; }
.feat-ico {
  display: grid; place-items: center;
  width: 42px; height: 42px; border-radius: 13px;
  color: var(--violet);
  background: rgba(124, 58, 237, .14);
  box-shadow: inset 0 0 0 1px rgba(167, 139, 250, .3), 0 0 22px rgba(124, 58, 237, .2);
}
.feat-ico svg { width: 21px; height: 21px; fill: none; stroke: currentColor; stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; }

/* Honneurs : texte à gauche, jetons à essayer à droite */
.honors-show { max-width: 1080px; margin: 0 auto; padding: 0 16px 120px; }
.honors-card { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 32px; align-items: center; padding: 36px; }
.honors-text h2 { font-size: clamp(24px, 3vw, 32px); }
.honors-text p { line-height: 1.7; }
.honors-points { list-style: none; padding: 0; margin: 18px 0 0; display: grid; gap: 10px; font-size: 14px; color: #c9c5d6; }
.honors-points li { display: flex; gap: 10px; }
.honors-points li::before { content: ""; flex: none; width: 6px; height: 6px; margin-top: 8px; border-radius: 50%; background: var(--violet); box-shadow: 0 0 8px var(--violet); }
.honors-demo { border-radius: 20px; background: rgba(11, 9, 16, .7); border: 1px solid var(--line); padding: 8px 6px; }
.hd-head { display: flex; align-items: baseline; gap: 10px; padding: 8px 12px 12px; font-size: 12px; color: var(--faint); }
.hd-head b { color: var(--text); font: 500 14px var(--display); }
.hd-head span { margin-left: auto; }
.hd-row { display: flex; align-items: center; gap: 12px; padding: 10px 12px; border-top: 1px solid var(--line); }
.hd-row .strip { flex: none; align-self: stretch; }
.hd-who { flex: 1; min-width: 0; display: grid; gap: 2px; }
.hd-who b { font: 500 15px var(--display); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.hd-who small { font-size: 12px; color: var(--muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.hd-tokens { display: flex; gap: 8px; flex: none; }
.hd-tokens .hb { width: 36px; height: 36px; }
.hd-tokens .hb svg { width: 17px; height: 17px; }

/* Formules : gratuit / abonnement */
.plans { max-width: 1080px; margin: 0 auto; padding: 0 16px 110px; text-align: center; }
.plans-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; text-align: left; max-width: 900px; margin: 0 auto; }
.plan { display: flex; flex-direction: column; padding: 30px; }
.plan h3 { font-size: 22px; }
.plan-main { border-color: rgba(167, 139, 250, .4); }
.plan-list { list-style: none; padding: 0; margin: 12px 0 24px; display: grid; gap: 12px; font-size: 14px; line-height: 1.55; color: #c9c5d6; }
.plan-list li { display: flex; gap: 10px; }
.plan-list li::before {
  content: ""; width: 16px; height: 16px; flex: none; margin-top: 2px;
  background: var(--violet);
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='m3.5 8.5 3 3 6-7' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center / contain no-repeat;
  mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='m3.5 8.5 3 3 6-7' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center / contain no-repeat;
}
.plan .btn { margin-top: auto; align-self: flex-start; }

/* Questions */
.faq { max-width: 760px; margin: 0 auto; padding: 0 16px 110px; text-align: center; }
.faq-list { display: grid; gap: 10px; text-align: left; margin-top: 30px; }
.faq-item { border-radius: 18px; border: 1px solid var(--line); background: rgba(14, 12, 20, .6); transition: border-color .2s, background .2s; }
.faq-item[open] { border-color: rgba(167, 139, 250, .35); background: rgba(24, 18, 38, .6); }
.faq-item summary {
  list-style: none; cursor: pointer;
  display: flex; align-items: center; gap: 16px;
  padding: 18px 20px;
  font: 500 16px var(--display); letter-spacing: -.01em;
}
.faq-item summary::-webkit-details-marker { display: none; }
.faq-item summary:focus-visible { outline: 2px solid var(--violet); outline-offset: 2px; border-radius: 18px; }
.faq-plus { position: relative; flex: none; width: 14px; height: 14px; margin-left: auto; color: var(--violet); transition: transform .25s; }
.faq-plus::before, .faq-plus::after { content: ""; position: absolute; left: 0; right: 0; top: 6px; height: 2px; border-radius: 2px; background: currentColor; }
.faq-plus::after { transform: rotate(90deg); transition: transform .25s; }
.faq-item[open] .faq-plus::after { transform: rotate(0deg); }
.faq-item p { margin: 0; padding: 0 20px 20px; color: var(--muted); line-height: 1.7; font-size: 14px; }

/* Dernier appel, visiteur sans compte */
.final-cta { max-width: 1080px; margin: 0 auto; padding: 0 16px 90px; }
.final-card { text-align: center; padding: 64px 24px 56px; }
.final-card h2 { font: 500 clamp(28px, 4vw, 44px)/1.12 var(--display); letter-spacing: -.03em; margin: 0 auto 14px; max-width: 640px; }
.final-card p { max-width: 520px; margin: 0 auto 30px; }
.final-card .hero-cta { margin-bottom: 0; }

.footer-links { display: flex; flex-wrap: wrap; justify-content: center; gap: 8px 22px; margin-bottom: 14px; }
.footer-links a { color: var(--muted); text-decoration: none; font-size: 13px; }
.footer-links a:hover { color: var(--text); }
.footer p { margin: 0; }

@media (max-width: 960px) {
  .preview-grid, .honors-card, .plans-grid { grid-template-columns: 1fr; }
  .feat-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .honors-card { padding: 26px 20px; }
}
@media (max-width: 600px) {
  .feat-grid { grid-template-columns: 1fr; }
  .preview-live { display: none; }
  .demo-row .meter { display: none; }
  .demo-row { gap: 12px; padding: 12px; }
  .hero-cta .btn.big { flex: 1 1 220px; }
  .hd-head span { display: none; }
  .hd-tokens { gap: 5px; }
  .hd-tokens .hb { width: 32px; height: 32px; }
}

.steps {
  max-width: 1080px;
  margin: 0 auto;
  padding: 0 16px 120px;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 16px;
}
.steps .card { min-height: 290px; display: flex; flex-direction: column; }
.card-art { margin-top: auto; padding-top: 28px; display: flex; align-items: center; justify-content: center; gap: 8px; color: var(--muted); }
.card-art.keys kbd { min-width: 52px; height: 46px; font-size: 16px; border-radius: 12px; background: rgba(26, 18, 38, .8); }
.card-art.verdicts { flex-wrap: wrap; }

.explain { max-width: 1080px; margin: 0 auto; padding: 0 16px 120px; text-align: center; }
.section-title { font: 500 clamp(30px, 4.4vw, 48px)/1.1 var(--display); letter-spacing: -.035em; margin: 18px 0 10px; }
.section-lead { color: var(--muted); margin: 0 0 36px; }
.explain-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; text-align: left; }
.weights ul { list-style: none; padding: 0; margin: 14px 0 0; }
.weights li { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 10px 0; border-top: 1px solid var(--line); color: #c9c9d3; }
.weights b { font: 600 16px var(--body); color: var(--text); }
/* Mythique+ : deux colonnes de poids, DPS et tank / soigneur */
.weights-roles li { display: grid; grid-template-columns: 1fr 38px 38px; gap: 10px; }
.weights-roles b { text-align: right; }
.weights-roles .w-head { border-top: 0; padding-bottom: 4px; font-size: 12px; color: var(--muted); }
.weights-roles .w-head b { font: 600 11px/1.25 var(--body); color: var(--muted); text-transform: uppercase; letter-spacing: .04em; }
.weights .w-none { color: var(--faint); font-weight: 400; }
/* En-têtes plus longs côté raid (« Tout le palier ») : colonnes un peu plus larges */
.weights-roles:has(.w-none) li { grid-template-columns: 1fr 52px 52px; }

/* Démo « À ta façon » (bindTuneDemo) : curseurs à gauche (classes .w-* de la page du compte),
   trois candidats fictifs à droite qui se retrient pendant que les curseurs bougent */
.tune-card { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.05fr); gap: 32px; margin-top: 16px; padding: 30px; text-align: left; }
.tune-text p { line-height: 1.65; }
.tune-sliders { display: flex; flex-direction: column; gap: 12px; margin-top: 22px; }
.tune-card .tune-foot { display: flex; align-items: baseline; gap: 12px; flex-wrap: wrap; margin-top: 16px; }
.tune-foot .w-total { flex: none; }
.tune-hint { font-size: 12px; color: var(--faint); }
.tune-side { display: flex; flex-direction: column; justify-content: center; min-width: 0; }
.tune-list-card { padding: 6px; border-radius: 22px; border: 1px solid var(--line); background: rgba(11, 9, 16, .6); }
.tune-scene {
  margin-left: auto; padding: 3px 10px; border-radius: 99px; white-space: nowrap;
  font-size: 11px; color: var(--violet); border: 1px solid rgba(167, 139, 250, .35); background: rgba(167, 139, 250, .1);
}
/* Les chiffres suivent les curseurs : la jauge glisse, la couleur du verdict fond */
.tune-card .demo-row .index { transition: color .3s; }
.tune-card .demo-row .meter i { transition: width .3s ease, background-color .3s; }
.tune-card .demo-row .score { font-variant-numeric: tabular-nums; }
/* Curseur que la démo est en train de bouger : son bouton s'allume */
.w-range.is-moving::-webkit-slider-thumb { box-shadow: 0 0 0 1px var(--violet), 0 0 0 7px rgba(167, 139, 250, .25), 0 0 18px rgba(167, 139, 250, .6); }
.w-range.is-moving::-moz-range-thumb { box-shadow: 0 0 0 1px var(--violet), 0 0 0 7px rgba(167, 139, 250, .25), 0 0 18px rgba(167, 139, 250, .6); }
.tune-sliders .w-row:has(.is-moving) .w-lab { color: var(--lavender); }
@media (max-width: 960px) {
  .tune-card { grid-template-columns: 1fr; gap: 24px; padding: 24px 18px; }
}
@media (max-width: 600px) {
  .tune-count { display: none; }
}

.addon { max-width: 1080px; margin: 0 auto; padding: 0 16px 100px; }
.addon-card { display: grid; grid-template-columns: 1.1fr 1fr; gap: 28px; align-items: center; padding: 34px; }
.addon-card p { line-height: 1.7; }
.addon-sample {
  margin: 0;
  padding: 18px 20px;
  border-radius: 18px;
  background: rgba(5, 4, 9, .58);
  border: 1px solid var(--line);
  font: 13px/1.8 var(--mono);
  color: #cfcfe0;
  overflow-x: auto;
}
.footer { text-align: center; color: var(--faint); font-size: 13px; padding: 0 16px 40px; }

/* ------------------------------------------------------------------ */
/* Vue d'analyse                                                       */
/* ------------------------------------------------------------------ */
/* Réglages à gauche, liste au milieu, détail du joueur à droite (replié tant que rien n'est ouvert).
   Joueur ouvert : le panneau de gauche se replie et la liste glisse à gauche pour laisser la place au détail. */
.app {
  --rail-w: 330px;
  --drawer-w: min(640px, 44vw);
  --slide: .4s cubic-bezier(.22, .8, .24, 1);
  position: relative;
  z-index: 1;
  display: flex;
  align-items: flex-start;
  max-width: 1600px;
  margin: 0 auto;
  padding: 92px 24px 24px;
}
/* Pas de défilement propre au panneau : une seule barre, celle de la page */
.rail {
  flex: 0 0 var(--rail-w);
  min-width: 0;
  margin-right: 20px;
  display: flex;
  flex-direction: column;
  gap: 14px;
  /* Les panneaux gardent leur largeur pendant le repli (pas de texte qui se réorganise) */
  overflow: clip;
  overflow-clip-margin: 8px;
  transition: flex-basis var(--slide), margin var(--slide), opacity .28s ease, transform var(--slide), visibility 0s;
}
.rail > * { width: var(--rail-w); flex-shrink: 0; }
.panel {
  border-radius: var(--radius);
  padding: 18px;
  background: rgba(16, 14, 23, .72);
  border: 1px solid var(--line);
  -webkit-backdrop-filter: blur(16px);
  backdrop-filter: blur(16px);
}
.panel-title { font: 500 17px var(--display); letter-spacing: -.01em; margin: 0 0 12px; }
.hint { color: var(--muted); font-size: 12px; margin: 8px 0 12px; }

.actions { display: flex; gap: 8px; }
.diff { margin-top: 14px; font-size: 13px; }
.diff:empty { display: none; }
.diff .tallies { display: flex; flex-wrap: wrap; gap: 6px; }
.tally { border: 1px solid var(--line); background: rgba(255, 255, 255, .03); border-radius: 999px; padding: 2px 10px; color: var(--muted); }
.tally b { color: var(--text); font-weight: 600; }
.tally.new b { color: var(--violet); }
.diff .left { color: var(--muted); margin: 8px 0 0; font-size: 12px; }
.diff .invalid { color: var(--depleted); margin: 8px 0 0; font-size: 12px; }

.field-row { display: flex; gap: 10px; margin-bottom: 10px; }
.field { display: flex; flex-direction: column; gap: 5px; min-width: 0; }
.field.grow { flex: 1; }
.field.level { width: 76px; }
.field > span { font-size: 12px; color: var(--muted); }

.source { display: grid; grid-template-columns: 10px 1fr; gap: 2px 10px; margin-bottom: 12px; font-size: 14px; }
.source:last-child { margin-bottom: 0; }
.source .dot { width: 7px; height: 7px; border-radius: 50%; margin-top: 7px; background: var(--faint); }
.source .dot.ok { background: var(--v-solide); box-shadow: 0 0 8px var(--v-solide); }
.source .dot.warn { background: var(--v-limite); }
.source .dot.err { background: var(--v-risque); }
.source .meta { grid-column: 2; color: var(--muted); font-size: 12px; }

/* Points Warcraft Logs : la fraction donne le chiffre, la jauge la marge qui reste */
.wcl-rate { display: block; margin-top: 7px; }
.wcl-rate-top { display: flex; align-items: baseline; justify-content: space-between; gap: 10px; white-space: nowrap; }
.wcl-rate-top b { font-weight: 600; color: var(--text); font-variant-numeric: tabular-nums; }
.wcl-bar { display: block; height: 5px; margin-top: 5px; border-radius: 999px; background: rgba(255, 255, 255, .07); overflow: hidden; }
.wcl-bar i { display: block; height: 100%; border-radius: 999px; background: var(--violet); transition: width .45s ease, background .3s; }
.wcl-bar.mid i { background: var(--v-limite); }
.wcl-bar.high i { background: var(--v-risque); }

.main { flex: 1 1 0; min-width: 0; container: main / inline-size; }
/* Mesure de la largeur finale de la liste, sans transition (voir setDrawerOpen dans app.js) */
.app.no-slide, .app.no-slide * { transition: none !important; }

/* Détail du joueur cliqué */
.drawer {
  min-width: 0;
  flex: 0 0 0;
  position: sticky;
  top: 92px;
  height: calc(100vh - 116px);
  display: flex;
  justify-content: flex-end;   /* le contenu arrive par la droite */
  overflow: hidden;
  opacity: 0;
  transition: flex-basis var(--slide), margin var(--slide), opacity .28s ease;
}
.drawer-inner {
  flex: none;
  width: var(--drawer-w);
  height: 100%;
  display: flex;
  flex-direction: column;
  border-radius: 24px;
  background: rgba(14, 12, 20, .82);
  border: 1px solid var(--line);
  -webkit-backdrop-filter: blur(16px);
  backdrop-filter: blur(16px);
  transform: translateX(32px);
  transition: transform var(--slide);
}
@media (min-width: 861px) {
  .app.drawer-open .rail {
    flex-basis: 0; margin-right: 0;
    opacity: 0; transform: translateX(-24px);
    visibility: hidden; pointer-events: none;
    transition: flex-basis var(--slide), margin var(--slide), opacity .2s ease, transform var(--slide), visibility 0s .4s;
  }
  .app.drawer-open .drawer { flex-basis: var(--drawer-w); margin-left: 20px; opacity: 1; }
  .app.drawer-open .drawer-inner { transform: none; }
}
.drawer-head {
  display: grid;
  grid-template-columns: 1fr 36px;
  align-items: start;
  gap: 12px;
  padding: 16px 16px 14px 18px;
  border-bottom: 1px solid var(--line);
}
.drawer-title { display: grid; grid-template-columns: 3px minmax(0, 1fr) auto auto; align-items: center; column-gap: 12px; min-width: 0; }
.drawer-title .strip { height: 100%; min-height: 48px; }
.drawer-title .name { font-size: 22px; }
.drawer-fiche {
  display: inline-flex; align-items: center; gap: 4px; margin-top: 6px;
  padding: 3px 11px; border-radius: 999px; border: 1px solid rgba(167,139,250,.35);
  background: rgba(167,139,250,.1); color: var(--violet); font-size: 12px; font-weight: 500;
  text-decoration: none; white-space: nowrap; transition: background .15s, border-color .15s;
}
.drawer-fiche svg { flex: none; margin-right: -3px; transition: transform .15s; }
.drawer-fiche:hover { background: rgba(167,139,250,.18); border-color: rgba(167,139,250,.6); }
.drawer-fiche:hover svg { transform: translateX(2px); }
.drawer-fiche:focus-visible { outline: 2px solid var(--violet); outline-offset: 2px; }
.drawer-kicker { color: var(--faint); font-size: 11px; letter-spacing: .06em; text-transform: uppercase; margin-bottom: 2px; }
.drawer-index { margin: 0; }
.drawer-index b { font-size: 24px; }
.drawer-close {
  width: 36px; height: 36px; border-radius: 50%;
  border: 1px solid var(--line); background: var(--glass-strong);
  color: var(--muted); font-size: 20px; line-height: 1; cursor: pointer;
  transition: color .15s, border-color .15s;
}
.drawer-close:hover { color: var(--text); border-color: var(--line-strong); }
.drawer-close:focus-visible { outline: 2px solid var(--violet); outline-offset: 2px; }
.drawer-body { flex: 1; min-height: 0; overflow-y: auto; overscroll-behavior: contain; padding: 18px 18px 22px; }
.drawer .detail { display: block; margin: 0; padding: 0; background: none; border: 0; animation: none; }


/* Ton groupe : 5 cartes par ligne (donjon : 5 places ; raid : autant de lignes que nécessaire) */
.group-panel {
  margin: 6px 0 22px;
  padding: 16px 16px 14px;
  border-radius: 24px;
  background: rgba(14, 12, 20, .72);
  border: 1px solid var(--line);
  -webkit-backdrop-filter: blur(16px);
  backdrop-filter: blur(16px);
}
.group-panel { position: relative; z-index: 5; }
.group-head { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 12px; margin: 0 4px 12px; }
.group-title { font: 500 17px var(--display); letter-spacing: -.01em; margin: 0; }
.group-meta { color: var(--muted); font-size: 13px; margin-right: auto; }
.group-empty { color: var(--muted); font-size: 13px; margin: 2px 4px 4px; }

/* Ajout d'un joueur au groupe (recherche avec suggestions) */
.group-add {
  position: relative; z-index: 20;
  display: flex; align-items: center; gap: 4px;
  width: min(100%, 340px);
  padding: 3px 3px 3px 12px;
  border-radius: 999px;
  background: rgba(255, 255, 255, .03);
  border: 1px solid var(--line);
  transition: border-color .2s, box-shadow .2s;
}
.group-add:focus-within { border-color: rgba(167, 139, 250, .5); box-shadow: 0 0 0 3px rgba(124, 58, 237, .14); }
.group-add svg { flex: none; width: 13px; height: 13px; color: var(--violet); }
.group-add input,
.group-add input:focus { flex: 1; min-width: 0; background: transparent; border: 0; outline: none; color: var(--text); font: 13px var(--body); padding: 5px 4px 5px 6px; }
.group-add input::placeholder { color: var(--muted); }
.group-add input:disabled { cursor: default; }
.group-add .btn:disabled { opacity: .45; cursor: default; }
.g-remove {
  position: absolute; top: 6px; right: 6px; z-index: 1;
  display: grid; place-items: center;
  width: 20px; height: 20px; border-radius: 50%;
  color: var(--faint); font-size: 15px; line-height: 1;
  opacity: 0; transition: opacity .15s, color .15s, background .15s;
}
.gcard:hover .g-remove, .g-remove:focus-visible { opacity: 1; }
/* Carte du groupe : « remettre dans les candidats », à gauche de l'assistant (ou de la croix) */
.g-move {
  position: absolute; top: 6px; right: 50px; z-index: 1;
  display: grid; place-items: center;
  width: 20px; height: 20px; border-radius: 50%;
  color: var(--faint); cursor: pointer;
  opacity: 0; transition: opacity .15s, color .15s, background .15s;
}
.g-move.solo { right: 28px; }
.g-move svg { width: 12px; height: 12px; }
.gcard:hover .g-move, .g-move:focus-visible { opacity: 1; }
.g-move:hover { color: var(--violet); background: rgba(167, 139, 250, .14); }
@media (hover: none) { .g-move { opacity: .7; } }
.g-remove:hover { color: var(--text); background: rgba(255, 255, 255, .1); }
@media (hover: none) { .g-remove { opacity: .7; } }
/* Assistant : bouton du créateur à gauche de la croix, marque violette après le pseudo */
.g-assist {
  position: absolute; top: 6px; right: 28px; z-index: 1;
  display: grid; place-items: center;
  width: 20px; height: 20px; border-radius: 50%;
  color: var(--faint); cursor: pointer;
  opacity: 0; transition: opacity .15s, color .15s, background .15s;
}
.g-assist svg { width: 13px; height: 13px; }
.gcard:hover .g-assist, .g-assist:focus-visible { opacity: 1; }
.g-assist:hover { color: var(--text); background: rgba(255, 255, 255, .1); }
.g-assist.on { color: var(--violet); }
.g-assist.on:hover { color: var(--violet); background: rgba(167, 139, 250, .14); }
@media (hover: none) { .g-assist { opacity: .7; } }
.g-assist-mark { flex: none; display: inline-grid; place-items: center; color: var(--violet); }
.g-assist-mark svg { width: 13px; height: 13px; }
.group-meta b { color: var(--text); font-weight: 600; }
/* Raid : composition du groupe par rôle, à côté du titre (demande de l'utilisateur) */
.groles { display: inline-flex; align-items: center; gap: 6px; margin-left: 10px; vertical-align: -1px; }
.grole { --tint: var(--muted); display: inline-flex; align-items: center; gap: 4px; padding: 2px 8px 2px 6px; border-radius: 999px; color: var(--tint); background: color-mix(in srgb, var(--tint) 12%, transparent); box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--tint) 30%, transparent); }
.grole svg { width: 11px; height: 11px; }
.grole b { font: 600 13px var(--display); color: currentColor; }
.grole.role-tank { --tint: var(--role-tank); }
.grole.role-heal { --tint: var(--role-heal); }
.grole.role-dps { --tint: var(--role-dps); }
.grole.none { --tint: var(--faint); }
.group-grid { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 8px; }
/* Raid : une ligne par rôle, avec son petit titre (Tanks 1/2, Soigneurs 3/4, DPS 12) */
.group-rows { display: flex; flex-direction: column; gap: 12px; }
.group-row-head { display: flex; align-items: center; gap: 6px; margin: 0 0 6px 2px; color: var(--muted); font-size: 12px; }
.group-row-head .role { width: 18px; height: 18px; border-radius: 6px; }
.group-row-head .role svg { width: 11px; height: 11px; }
.group-row-head b { color: var(--text); font-weight: 600; margin-left: 2px; }
.gcard {
  --cls: var(--v-inconnu);
  position: relative;
  display: flex; flex-direction: column; gap: 3px;
  min-width: 0;
  padding: 11px 12px 10px;
  border-radius: 14px;
  background: var(--glass);
  border: 1px solid var(--line);
  overflow: hidden;
}
/* Trait de la couleur de la classe, comme la ligne de gauche de la liste */
.gcard::before {
  content: "";
  position: absolute; left: 12px; right: 12px; top: 0;
  height: 2px; border-radius: 0 0 2px 2px;
  background: var(--cls);
  box-shadow: 0 0 10px color-mix(in srgb, var(--cls) 60%, transparent);
}
.gcard[role="button"] { cursor: pointer; transition: border-color .15s, background .15s; }
.gcard[role="button"]:hover { border-color: var(--line-strong); background: rgba(255, 255, 255, .055); }
/* Sélection : doit rester visible au survol (le sélecteur [role="button"]:hover est plus fort que .open) */
.gcard.open, .gcard.open[role="button"] { border-color: color-mix(in srgb, var(--cls) 55%, transparent); background: color-mix(in srgb, var(--cls) 8%, rgba(255, 255, 255, .03)); }
.gcard.open[role="button"]:hover { border-color: color-mix(in srgb, var(--cls) 70%, transparent); background: color-mix(in srgb, var(--cls) 12%, rgba(255, 255, 255, .04)); }
.gcard:focus-visible { outline: 2px solid var(--violet); outline-offset: 2px; }
.group-grid .gcard.empty { align-items: center; justify-content: center; min-height: 84px; padding: 11px 12px 10px; max-width: none; border-style: dashed; background: transparent; color: var(--faint); font-size: 13px; text-align: center; }
.gcard.empty::before { display: none; }
.g-name { display: flex; align-items: center; gap: 7px; min-width: 0; }
.g-name .role { flex: none; }
.g-player { font: 500 15px var(--display); color: var(--cls); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.gcard:not(.has-class) .g-player { color: var(--text); }

/* Joueur qui vient d'arriver : allumé pendant le chargement (.waiting), puis 3 s une fois chargé,
   puis fondu de 1,5 s (délai négatif fixé en JS ; 4,5 s = FRESH_MS) */
.row.fresh > .row-head, .gcard.fresh {
  --fresh-bg: rgba(125, 211, 252, .16);
  --fresh-shadow: inset 0 0 0 1px rgba(125, 211, 252, .55), 0 0 24px rgba(56, 189, 248, .28);
  animation: fresh 4.5s ease-out;
}
.row.fresh.waiting > .row-head, .gcard.fresh.waiting { animation: none; background: var(--fresh-bg); box-shadow: var(--fresh-shadow); }
@keyframes fresh {
  0%, 66.7% { background: var(--fresh-bg); box-shadow: var(--fresh-shadow); }
}
.g-sub { color: var(--muted); font-size: 12px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.g-sub b { color: var(--text); font-weight: 500; }
.g-index { display: flex; align-items: baseline; gap: 6px; margin-top: 3px; font-size: 12px; color: var(--muted); }
.g-index b { font: 600 18px var(--display); }
.g-index.v-solide { color: var(--v-solide); }
.g-index.v-correct { color: var(--v-correct); }
.g-index.v-limite { color: var(--v-limite); }
.g-index.v-risque { color: var(--v-risque); }
.g-index .spinner { margin: 4px 0; }

/* Une seule ligne, hauteur fixe : rien ne saute quand la liste rétrécit (12 classes possibles) */
.group-foot { display: flex; align-items: center; justify-content: space-between; gap: 18px; flex-wrap: nowrap; margin: 14px 4px 0; padding-top: 12px; border-top: 1px solid var(--line); }
/* Buffs manquants : une icône par classe, sur une seule ligne (hauteur fixe, rien ne saute) */
.gbuffs { display: flex; align-items: center; flex-wrap: nowrap; gap: 5px; min-height: 28px; min-width: 0; overflow-x: auto; scrollbar-width: none; }
.gbuffs::-webkit-scrollbar { display: none; }
.gcounts { flex: none; }
.gfoot-label { color: var(--muted); font-size: 12px; margin-right: 5px; white-space: nowrap; }
.gbuff {
  --cls: var(--muted);
  position: relative;
  flex: none;
  display: grid; place-items: center;
  width: 26px; height: 26px;
  border-radius: 7px;
  overflow: hidden;
  font: 600 12px var(--display);
  color: #0b0b10;
  background: var(--cls);
  box-shadow: 0 0 0 1px color-mix(in srgb, var(--cls) 70%, transparent), 0 0 10px color-mix(in srgb, var(--cls) 25%, transparent);
  cursor: help;
}
/* L'icône recouvre la lettre ; si elle ne charge pas, la lettre reste visible */
.gbuff::before {
  content: "";
  position: absolute; inset: 0;
  background: var(--icon) center / 112% no-repeat;
}
.gbuff.ok {
  width: auto; height: auto;
  padding: 3px 10px;
  border-radius: 999px;
  font: 400 12px var(--body);
  color: var(--v-solide);
  background: rgba(110, 231, 160, .08);
  box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--v-solide) 35%, transparent);
  cursor: default;
}
.gbuff.ok::before { display: none; }
.gcounts { display: flex; gap: 6px; }
.gcount {
  display: inline-flex; align-items: baseline; gap: 5px;
  padding: 3px 11px;
  border-radius: 999px;
  font-size: 12px; color: var(--muted);
  background: var(--glass-strong);
  border: 1px solid var(--line);
}
.gcount b { font: 600 15px var(--display); color: var(--text); }
.gcount.none { color: var(--v-risque); border-color: color-mix(in srgb, var(--v-risque) 40%, transparent); background: rgba(255, 107, 107, .08); }
.gcount.none b { color: var(--v-risque); }
.group-note { margin: 10px 4px 0; color: var(--faint); font-size: 12px; }
.toolbar { display: flex; align-items: center; justify-content: space-between; gap: 16px; margin: 6px 4px 14px; }
.count { font: 500 30px var(--display); letter-spacing: -.03em; margin: 0; }
/* Profil d'indice utilisé, juste au-dessus des barres de l'indice dans le détail d'un joueur */
.index-profile { margin: -4px 0 12px; font-size: 12px; color: var(--muted); }
.index-profile b, .detail .index-profile b { color: var(--violet); font-weight: 600; }
.index-profile .ip-sep { color: var(--faint); margin: 0 2px; }
.count small { font: 400 14px var(--body); letter-spacing: 0; color: var(--muted); margin-left: 10px; }
/* Filtre par rôle : les rôles décochés partent dans la liste atténuée du dessous */
.role-filter { display: flex; align-items: center; gap: 4px; margin-right: auto; padding: 3px; border-radius: 999px; background: rgba(255, 255, 255, .03); border: 1px solid var(--line); }
.role-filter button {
  --tint: var(--muted);
  font: 500 13px var(--body);
  color: var(--muted);
  background: transparent;
  border: 0;
  border-radius: 999px;
  padding: 5px 12px;
  cursor: pointer;
  transition: color .15s, background .15s, box-shadow .15s;
}
.role-filter button:hover { color: var(--text); }
.role-filter button[data-role-filter="tank"] { --tint: var(--role-tank); }
.role-filter button[data-role-filter="heal"] { --tint: var(--role-heal); }
.role-filter button[data-role-filter="dps"] { --tint: var(--role-dps); }
.role-filter button[aria-pressed="true"] {
  color: var(--tint);
  background: color-mix(in srgb, var(--tint) 16%, transparent);
  box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--tint) 38%, transparent);
}
.role-filter button:focus-visible { outline: 2px solid var(--violet); outline-offset: 1px; }

/* Séparation vers les candidats des rôles décochés */
.list-split { display: flex; align-items: center; gap: 10px; padding: 14px 4px 8px; color: var(--faint); font-size: 12px; }
.list-split::after { content: ""; flex: 1; height: 1px; background: var(--line); }
.list-split b { color: var(--muted); font: 600 12px var(--display); }
.list-dim { opacity: .42; transition: opacity .2s; }
.list-dim:hover, .list-dim:focus-within { opacity: 1; }

.sort { display: flex; align-items: center; gap: 8px; color: var(--muted); font-size: 13px; }
.sort .kselect-button { width: auto; min-width: 150px; border-radius: 999px; padding-left: 14px; }

.board {
  border-radius: 24px;
  padding: 6px 14px 8px;
  background: rgba(14, 12, 20, .72);
  border: 1px solid var(--line);
  -webkit-backdrop-filter: blur(16px);
  backdrop-filter: blur(16px);
}

.colheads, .row-head {
  display: grid;
  grid-template-columns: var(--cols);
  align-items: center;
  column-gap: 12px;
}
.colheads { color: var(--faint); font-size: 12px; padding: 10px 0 10px; border-bottom: 1px solid var(--line); }
.num { text-align: right; }
.mode-raid .colheads, .mode-raid .row-head { grid-template-columns: var(--cols-raid); }
.mode-raid.has-boss .colheads, .mode-raid.has-boss .row-head { grid-template-columns: var(--cols-raid-boss); }
.colheads .c-boss { color: var(--violet); }

.list { display: flex; flex-direction: column; }
.row { border-bottom: 1px solid rgba(255, 255, 255, .05); }
/* Joueurs qui postulent ensemble */
.premade {
  position: relative;
  margin: 8px 0;
  margin-inline: -6px;
  padding: 0 6px 2px;
  border-radius: 16px;
  background: rgba(167, 139, 250, .06);
  box-shadow: inset 0 0 0 1px rgba(167, 139, 250, .28), 0 0 24px rgba(124, 58, 237, .12);
}
.premade-head { display: flex; align-items: center; gap: 10px; padding: 10px 4px 2px 12px; font-size: 12px; color: var(--muted); }
.premade-head b { color: var(--text); font-weight: 600; }
.premade-tag { color: var(--violet); font-weight: 500; }
.premade .row:last-child { border-bottom: 0; }
.list > .row:has(+ .premade) { border-bottom: 0; }
.row:last-child { border-bottom: 0; }
.row-head {
  width: 100%;
  color: inherit;
  padding: 11px 0;
  text-align: left;
  font: inherit;
  cursor: pointer;
  min-height: 62px;
  transition: background .15s;
}
.row-head:hover { background: rgba(255, 255, 255, .03); }
.row.open .row-head { background: rgba(167, 139, 250, .1); }
.row.open .row-head:hover { background: rgba(167, 139, 250, .13); }

/* Ligne de gauche : couleur de la classe du joueur (le verdict reste dans la colonne Indice) */
.strip {
  justify-self: center; align-self: stretch;
  width: 3px; border-radius: 3px;
  background: var(--strip, var(--v-inconnu));
  box-shadow: 0 0 10px color-mix(in srgb, var(--strip, transparent) 55%, transparent);
}

.who { min-width: 0; }
.who .name {
  font: 500 18px/1.2 var(--display);
  letter-spacing: -.015em;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.who .sub { color: var(--muted); font-size: 12px; margin-top: 2px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

/* Signalé par le jeu comme quittant souvent ses groupes */
.leaver { display: inline-flex; align-items: center; color: var(--v-risque); margin-right: 6px; vertical-align: -1px; cursor: help; }
.leaver svg { display: block; width: 12px; height: 12px; }

/* Note laissée par le candidat : présente sans prendre le pas sur le reste de la ligne */
.pnote {
  margin-top: 2px;
  font-size: 11.5px; line-height: 1.3;
  color: var(--muted); opacity: .6;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.row-head:hover .pnote, .row.open .pnote { opacity: .85; }
/* Dans le panneau de détail il y a la place : la note entière, sur deux lignes au plus */
.pnote-full {
  white-space: normal; font-size: 12px; opacity: .72; max-width: 46ch;
  display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2;
}

/* Note masquée par le jeu : on sait qu'elle existe, pas ce qu'elle dit */
.pnote-hidden { color: var(--violet); opacity: .8; }
/* Icône à part du texte : quand il passe sur deux lignes (panneau de détail), la seconde
   reste alignée sur la première au lieu de repasser sous l'icône */
.pnote-hidden { display: flex; align-items: center; gap: 5px; }
.pnote-hidden svg { flex: none; width: 13px; height: 13px; }
.pnote-hidden span { min-width: 0; overflow: hidden; text-overflow: ellipsis; }
.pnote-hidden.pnote-full { display: flex; align-items: flex-start; }
.pnote-hidden.pnote-full svg { margin-top: 1px; }
.pnote-hidden.pnote-full span { white-space: normal; }
.row-head:hover .pnote-hidden, .row.open .pnote-hidden { opacity: 1; }

/* Rôles avec lesquels le joueur a postulé */
.roles { position: relative; display: inline-flex; gap: 4px; margin-right: 9px; vertical-align: 1px; }
.role {
  --tint: var(--muted);
  display: inline-grid; place-items: center;
  width: 20px; height: 20px;
  border-radius: 7px;
  color: var(--tint);
  background: color-mix(in srgb, var(--tint) 14%, transparent);
  box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--tint) 32%, transparent);
}
.role svg { width: 12px; height: 12px; }
/* Pastille de rôle dans un tableau du détail (clé faite en tank, soigneur ou DPS) */
.role-mini { width: 16px; height: 16px; border-radius: 5px; margin-left: 6px; vertical-align: -3px; }
.role-mini svg { width: 10px; height: 10px; }
.cell-spec { display: block; color: var(--faint); font-size: 11px; }
.role-mini.same { opacity: .4; }          /* même spé qu'aujourd'hui : discret */
.cell-spec.other { color: var(--v-limite); }
.role-tank { --tint: var(--role-tank); }
.role-heal { --tint: var(--role-heal); }
.role-dps { --tint: var(--role-dps); }
/* Postule dans un autre rôle que sa spé Raider.IO : spé en ambre sous le nom (détail dans l'info-bulle) */
.spec-off { color: var(--v-limite); text-decoration: underline dotted color-mix(in srgb, var(--v-limite) 60%, transparent); text-underline-offset: 3px; cursor: help; }

/* Main du joueur */
.cell .sub.main-char { color: var(--text); }
.sub.main-char i, tr.main-row i { font-style: normal; color: var(--muted); }
table.mini tr.main-row td { color: var(--muted); font-size: 12px; padding-top: 2px; }
table.mini tr.main-row td:first-child { padding-left: 12px; }

.big { font: 600 17px/1.2 var(--body); letter-spacing: -.01em; }
.cell .sub { display: block; color: var(--muted); font-size: 11px; margin-top: 1px; }
.dim { color: var(--faint); }

.lvl { font-weight: 600; }
/* Clé timée +1 / +2 / +3 : pilule au fond léger et à la bordure de sa couleur, une étoile par
   niveau gagné. Couleurs des raretés de WoW : rare (bleu), épique (violet), légendaire (orange).
   (Bronze / argent / or avec effet néon essayés puis retirés : jugés pas beaux.) */
.pips {
  --pip: #4a9eff;
  display: inline-flex; align-items: center; gap: 1px; margin-left: 5px; padding: 2px 4px;
  vertical-align: middle; border-radius: 99px; line-height: 0;
  border: 1px solid color-mix(in srgb, var(--pip) 55%, transparent);
  background: color-mix(in srgb, var(--pip) 14%, transparent);
}
.pips-2 { --pip: #b46cf0; }
.pips-3 { --pip: #ff9a2e; }
.pip { width: 9px; height: 9px; fill: var(--pip); filter: drop-shadow(0 0 2px color-mix(in srgb, var(--pip) 60%, transparent)); }
.depleted { color: var(--depleted); }

.index { display: flex; align-items: center; gap: 10px; }
.index .score { font: 600 22px var(--display); width: 34px; text-align: right; }
.index .word { font-size: 13px; }
.meter { flex: 1; height: 4px; background: rgba(255, 255, 255, .08); border-radius: 2px; overflow: hidden; max-width: 60px; }
.meter i { display: block; height: 100%; background: currentColor; border-radius: 2px; }
.v-solide .index { color: var(--v-solide); }
.v-correct .index { color: var(--v-correct); }
.v-limite .index { color: var(--v-limite); }
.v-risque .index { color: var(--v-risque); }
.v-inconnu .index { color: var(--muted); }

.refresh {
  width: 30px; height: 30px;
  display: grid; place-items: center;
  border-radius: 999px;
  color: var(--faint);
  border: 1px solid transparent;
  transition: color .15s, border-color .15s, background .15s;
}
.refresh:hover { color: var(--text); border-color: var(--line); background: rgba(255, 255, 255, .05); }
.refresh svg { width: 14px; height: 14px; }
/* Ligne d'un candidat : « passer dans ton groupe » puis « recharger » */
.row-acts { display: flex; align-items: center; justify-content: flex-end; gap: 2px; padding-right: 6px; }   /* pas collé au bord de la liste */
/* Taille fixe : deux boutons + l'écart + la marge = 54 px, la largeur de la colonne dans la liste la plus serrée */
.board .row-acts .refresh { width: 23px; height: 23px; }
.row-move:hover { color: var(--violet); border-color: rgba(167, 139, 250, .4); background: rgba(167, 139, 250, .1); }
/* Recherche des candidats, dans la barre au-dessus de la liste */
/* Ajout d'un candidat : un champ souple, qui prend la place libre (340 px au plus) et peut
   descendre à 210 px ; les autres blocs de la barre ne rétrécissent jamais */
.toolbar > * { flex-shrink: 0; }
.toolbar .cand-add { flex: 1 1 340px; width: auto; min-width: 210px; max-width: 340px; margin-right: auto; }
.cand-plus { display: flex; align-items: center; gap: 6px; color: var(--violet); cursor: pointer; }
.cand-plus svg { width: 13px; height: 13px; flex: none; }
.cand-plus-text { display: none; font: 500 13px var(--body); color: var(--text); }
.cand-add input { text-overflow: ellipsis; }   /* champ resserré : le texte d'aide se termine par « … » */
/* Paliers de fitToolbar (app.js), du moins utile au plus utile :
   tb-1 plus de « Trier par » ni de petits compteurs gris, tb-2 titre et rôles resserrés,
   tb-3 le champ se replie en pilule « + Ajouter ». Au clic (focus), le champ s'ouvre
   PAR-DESSUS ses voisins : largeur fixe repliée (104 px) et marge négative de la différence,
   donc la place prise dans la barre ne change pas et rien ne bouge. */
.toolbar.tb-1 .sort > span, .toolbar.tb-1 .count small { display: none; }
.toolbar.tb-2 { gap: 10px; }
.toolbar.tb-2 .count { font-size: 24px; }
.toolbar.tb-2 .role-filter button { padding-left: 9px; padding-right: 9px; }
.toolbar.tb-3 .cand-add { flex: none; width: 104px; min-width: 0; height: 36px; padding: 0 14px; margin-right: 0; cursor: pointer; }
.toolbar.tb-3 .cand-add:hover { border-color: rgba(167, 139, 250, .45); background: rgba(167, 139, 250, .1); }
.toolbar.tb-3 .cand-plus-text { display: inline; }
.toolbar.tb-3 .cand-add input { width: 0; min-width: 0; padding: 0; opacity: 0; flex: none; }
.toolbar.tb-3 .cand-add .btn { display: none; }
.toolbar.tb-3 .cand-add:focus-within {
  width: 320px; margin-right: -216px; padding: 3px 3px 3px 12px;
  z-index: 25; background: #16131f;
}
.toolbar.tb-3 .cand-add:focus-within .cand-plus-text { display: none; }
.toolbar.tb-3 .cand-add:focus-within input { flex: 1; width: auto; padding: 5px 4px 5px 6px; opacity: 1; }
.toolbar.tb-3 .cand-add:focus-within .btn { display: inline-flex; }
.cand-add input:disabled { cursor: default; }

.loading { color: var(--muted); font-size: 13px; }
.c-msg { grid-column: 3 / -2; }
.spinner {
  display: inline-block; width: 12px; height: 12px;
  border: 2px solid rgba(255, 255, 255, .12); border-top-color: var(--violet);
  border-radius: 50%; animation: spin .8s linear infinite; vertical-align: -2px; margin-right: 6px;
}
@keyframes spin { to { transform: rotate(360deg); } }

/* Détail */
.detail {
  margin: 6px 0 12px;
  padding: 20px 20px 22px;
  border-radius: 18px;
  background: rgba(255, 255, 255, .025);
  border: 1px solid rgba(255, 255, 255, .05);
  display: none;
}
@keyframes open { from { opacity: 0; transform: translateY(-4px); } to { opacity: 1; transform: none; } }

.detail-links { display: flex; flex-wrap: wrap; gap: 8px 18px; font-size: 13px; margin-bottom: 18px; color: var(--muted); }
.detail-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 420px), 1fr)); gap: 26px 36px; }
.detail h3 { font: 500 16px var(--display); letter-spacing: -.01em; margin: 0 0 10px; }
.detail h3 small { font: 400 12px var(--body); letter-spacing: 0; color: var(--muted); margin-left: 8px; }
.detail .note { color: var(--muted); font-size: 12px; margin: 8px 0 0; }
.detail .error { color: var(--depleted); font-size: 14px; }

.breakdown { display: grid; grid-template-columns: auto 1fr auto; gap: 8px 12px; align-items: center; font-size: 13px; }
.breakdown .bar { height: 6px; background: rgba(255, 255, 255, .07); border-radius: 3px; overflow: hidden; }
.breakdown .bar i { display: block; height: 100%; border-radius: 3px; background: linear-gradient(90deg, var(--violet-deep), var(--lavender)); }
/* Survie en raid : mêmes seuils que la colonne « En vie » (ambre sous 85 %, rouge sous 50 %) */
.breakdown .bar.mid i { background: var(--v-limite); }
.breakdown .bar.low i { background: var(--v-risque); }
.breakdown .lab { display: grid; gap: 1px; }
.breakdown .lab small { font-size: 11px; color: var(--faint); }
.breakdown .val { text-align: right; color: var(--muted); min-width: 92px; }
.breakdown .off { color: var(--faint); }

table.mini { width: 100%; border-collapse: collapse; font-size: 13px; }
table.mini th { text-align: left; font-weight: 500; color: var(--faint); font-size: 11px; padding: 0 8px 6px 0; border-bottom: 1px solid var(--line); }
table.mini td { padding: 6px 8px 6px 0; border-bottom: 1px solid rgba(255, 255, 255, .04); white-space: nowrap; }
table.mini td.wrap { white-space: normal; }
table.mini .num, table.mini th.num { text-align: right; }
table.mini tr.mine td:first-child { box-shadow: inset 2px 0 0 var(--violet); padding-left: 8px; }
table.mini th.cur { color: var(--text); }
table.mini .big { font-size: 14px; }
.table-scroll { overflow-x: auto; }

/* Couleurs des parses Warcraft Logs */
.p-gold { color: #e5cc80; }
.p-pink { color: #e268a8; }
.p-orange { color: #ff8000; }
.p-purple { color: #b54df5; }
.p-blue { color: #3d8bff; }
.p-green { color: #1eff00; }
.p-gray { color: #9d9d9d; }

.empty { padding: 48px 12px; max-width: 520px; color: var(--muted); }
.empty h2 { font: 500 26px var(--display); letter-spacing: -.02em; color: var(--text); margin: 0 0 8px; }
.empty ol { padding-left: 20px; margin: 12px 0 0; }
.empty li { margin: 4px 0; }

/* ------------------------------------------------------------------ */
/* Responsive                                                          */
/* ------------------------------------------------------------------ */
/* Liste : tailles selon la largeur de la liste (pas de l'écran), qui rétrécit quand le détail est ouvert.
   Tout varie en continu entre une liste de 640 px (resserrée, toutes les colonnes gardées) et 920 px (tailles normales) :
   --k va de 0 à 280px avec la largeur du conteneur "main" (100cqi), donc rien ne saute pendant le glissement.
   Seul le passage aux lignes compactes (.cols-compact, 640 px ou moins, posé par listLayout() dans app.js) est un palier. */
.mobile-stats { display: none; }
.board {
  --k: clamp(0px, calc(100cqi - 640px), 280px);
  --cols: calc(4px + var(--k) * 2 / 280) minmax(calc(80px + var(--k) * 70 / 280), 2.2fr) calc(40px + var(--k) * 12 / 280) calc(60px + var(--k) * 10 / 280) calc(54px + var(--k) * 24 / 280) calc(54px + var(--k) * 30 / 280) calc(54px + var(--k) * 24 / 280) calc(46px + var(--k) * 18 / 280) minmax(calc(88px + var(--k) * 34 / 280), 1.2fr) calc(54px + var(--k) * 8 / 280);
  --cols-raid: calc(4px + var(--k) * 2 / 280) minmax(calc(80px + var(--k) * 70 / 280), 2.2fr) calc(40px + var(--k) * 12 / 280) calc(64px + var(--k) * 24 / 280) calc(64px + var(--k) * 20 / 280) calc(50px + var(--k) * 14 / 280) calc(46px + var(--k) * 18 / 280) minmax(calc(88px + var(--k) * 34 / 280), 1.2fr) calc(54px + var(--k) * 8 / 280);
  --cols-raid-boss: calc(4px + var(--k) * 2 / 280) minmax(calc(80px + var(--k) * 70 / 280), 2.2fr) calc(40px + var(--k) * 12 / 280) calc(64px + var(--k) * 24 / 280) calc(64px + var(--k) * 20 / 280) calc(50px + var(--k) * 14 / 280) calc(46px + var(--k) * 18 / 280) calc(50px + var(--k) * 20 / 280) minmax(calc(88px + var(--k) * 34 / 280), 1.2fr) calc(54px + var(--k) * 8 / 280);
  padding-inline: calc(12px + var(--k) * 2 / 280);
}
.board :is(.colheads, .row-head) { column-gap: calc(8px + var(--k) * 4 / 280); }
.board .colheads { font-size: calc(11px + var(--k) * 1 / 280); line-height: 1.2; align-items: end; }
.board .who .name { font-size: calc(16px + var(--k) * 2 / 280); }
.board .roles { margin-right: calc(6px + var(--k) * 3 / 280); gap: calc(3px + var(--k) * 1 / 280); }
.board .role { width: calc(18px + var(--k) * 2 / 280); height: calc(18px + var(--k) * 2 / 280); border-radius: calc(6px + var(--k) * 1 / 280); }
.board .role svg { width: calc(11px + var(--k) * 1 / 280); height: calc(11px + var(--k) * 1 / 280); }
.board .big { font-size: calc(15px + var(--k) * 2 / 280); }
.board .cell .sub { font-size: calc(10.5px + var(--k) * 0.5 / 280); line-height: 1.2; }
.board .index { gap: calc(5px + var(--k) * 5 / 280); padding-left: calc(8px - var(--k) * 8 / 280); }
.board .index .score { font-size: calc(19px + var(--k) * 3 / 280); width: calc(24px + var(--k) * 10 / 280); }
.board .index .word { font-size: calc(12px + var(--k) * 1 / 280); line-height: 1.2; }
.board .meter { max-width: max(0px, calc(var(--k) * 80 / 280 - 20px)); }   /* disparaît avant de devenir un simple point */
.board .refresh { width: calc(24px + var(--k) * 6 / 280); height: calc(24px + var(--k) * 6 / 280); }
.main.cols-compact .board { padding: 4px 10px 6px; }
.main.cols-compact .colheads { display: none; }
.main.cols-compact .row-head {
  grid-template-columns: 5px 1fr auto 60px;
  grid-template-areas:
    "strip who index refresh"
    "strip stats stats stats";
  row-gap: 6px;
  padding: 10px 0;
}
.cols-compact .strip { grid-area: strip; }
.cols-compact .who { grid-area: who; }
.cols-compact .c-index { grid-area: index; }
.cols-compact :is(.row-acts, .refresh-slot) { grid-area: refresh; }
.cols-compact :is(.c-ilvl, .c-score, .c-max, .c-dungeon, .c-recent, .c-prog, .c-top, .c-kills, .c-parse, .c-boss, .meter) { display: none; }
.cols-compact .mobile-stats { grid-area: stats; display: flex; flex-wrap: wrap; gap: 4px 14px; font-size: 12px; color: var(--muted); }
:where(.mobile-stats) b { color: var(--text); font-weight: 600; }
.cols-compact .c-msg { grid-area: stats; }
.group-wrap .group-grid { grid-template-columns: repeat(auto-fill, minmax(140px, 1fr)); }
@media (max-width: 1180px) {
  .app { --rail-w: 300px; }
}
@media (max-width: 960px) {
  .steps, .explain-grid { grid-template-columns: 1fr; }
  .steps .card { min-height: 0; }
  .addon-card { grid-template-columns: 1fr; }
  .story { padding-left: 16px; }
  .prism-cube { left: auto; right: -40px; top: 60px; width: 110px; height: 125px; transform: rotate(14deg) skewY(-6deg); opacity: .8; }
}
/* iOS (Safari) : sous 16 px, la mise au point d'un champ fait zoomer la page et le texte saute.
   Les champs en pilule ont une règle `input:focus` plus spécifique qui remet 13 à 15 px
   au moment même de la mise au point : il faut donc viser `:focus` aussi, sinon Safari zoome. */
@media (pointer: coarse) {
  input, textarea, select, .kselect-button { font-size: 16px; }
  /* même sélecteur d'attribut que la règle de base, sinon elle garde ses 14 px */
  select, textarea,
  input[type="text"], input[type="email"], input[type="password"], input[type="number"], input[type="search"] { font-size: 16px; }
  .home-search input, .home-search input:focus,
  .player-search input, .player-search input:focus,
  .group-add input, .group-add input:focus,
  .password-form input, .password-form input:focus { font-size: 16px; }
  /* Safari iOS laisse des traces du texte effacé quand le champ est posé sur un flou */
  .home-search, .player-search, .password-form, .group-add {
    -webkit-backdrop-filter: none;
    backdrop-filter: none;
  }
}


@media (max-width: 860px) {
  .nav { gap: 12px; padding-left: 16px; }
  .nav-badge, .nav-status { display: none; }
  .app { flex-direction: column; align-items: stretch; padding: 84px 12px 40px; }
  .main { order: -1; flex: none; }   /* la liste d'abord, les réglages ensuite */
  .rail { flex: none; margin: 14px 0 0; overflow: visible; }
  .rail > * { width: auto; }
  .toolbar { flex-wrap: wrap; align-items: center; }
  .count { white-space: nowrap; font-size: 24px; }
  .sort .kselect-button { max-width: 55vw; }
  .group-panel { padding: 14px 10px 12px; margin-top: 0; }
  .detail { padding: 16px 14px; }
  /* Détail du joueur : plein écran, glisse depuis la droite */
  .drawer {
    position: fixed; inset: 0; z-index: 60;
    height: auto; flex: none; opacity: 1;
    transform: translateX(100%);
    visibility: hidden;
    transition: transform var(--slide), visibility 0s .4s;
  }
  .app.drawer-open .drawer { transform: none; visibility: visible; transition: transform var(--slide), visibility 0s; }
  .app.drawer-open { z-index: 30; }   /* au-dessus de la barre de navigation */
  .drawer-inner { width: 100%; border-radius: 0; border: 0; background: rgba(11, 9, 16, .97); transform: none; }
  .drawer-head { padding: 14px 12px 12px 14px; }
  .drawer-title .name { font-size: 19px; }
  .drawer-body { padding: 16px 14px 28px; }
  body.has-drawer { overflow: hidden; }
}
@media (max-width: 600px) {
  .hero h1 br { display: none; }
  /* Session sur téléphone : "Nouvelle session" passe par le logo, qui ramène à l'accueil.
     Le logo, lui, reste : il ne fait plus que [gs], et c'est le palier fit-7 qui le
     resserre encore si la place manque vraiment. */
  .view-app .nav-cta { display: none; }
  .nav-session { gap: 8px; }
}
@media (max-width: 480px) {
  .nav-cta { padding: 8px 14px; font-size: 13px; }
  .dropzone { padding: 24px 18px 20px; }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation: none !important; transition: none !important; }
}

/* ------------------------------------------------------------------ */
/* Comptes : connexion, mon compte, administration */
/* ------------------------------------------------------------------ */
.nav-account { display: flex; align-items: center; gap: 8px; margin-left: auto; }
.nav-logout { padding: 7px 10px; }
.nav-logout svg { display: block; width: 15px; height: 15px; }
/* Déconnexion : rouge au survol (demande de l'utilisateur) */
.nav .nav-logout { transition: color .15s, border-color .15s, background .15s; }
.nav .nav-logout:hover, .nav .nav-logout:focus-visible {
  color: var(--v-risque); border-color: rgba(255, 107, 107, .45); background: rgba(255, 107, 107, .12);
}
/* Pseudo et statut sur une seule ligne : empilés, ça faisait bizarre dans la barre */
.nav-me {
  display: inline-flex; align-items: center; gap: 8px;
  padding: 6px 13px;
  border-radius: 999px;
  border: 1px solid var(--line);
  background: rgba(255, 255, 255, .03);
  text-decoration: none; color: var(--text);
  line-height: 1;
  transition: border-color .15s, background .15s;
}
.nav-me:hover { border-color: rgba(167, 139, 250, .4); background: rgba(167, 139, 250, .08); }
.nav-me-name { display: block; font: 600 13px var(--body); max-width: 18ch; overflow: hidden; text-overflow: ellipsis; }
.nav-me-status {
  font-size: 10px; text-transform: uppercase; letter-spacing: .06em; color: var(--muted);
  padding-left: 8px; border-left: 1px solid var(--line);
}
.nav-me-status.s-admin, .chip.s-admin { color: var(--violet); }
.nav-me-status.s-abonne, .chip.s-abonne { color: #7fd6a2; }

.auth { max-width: 560px; margin: 0 auto; padding: 120px 16px 80px; }
.auth-card { padding: 32px 30px 26px; }
.auth-card.auth-wide { padding: 30px 26px 24px; }
.auth { --auth-gap: 16px; }
.auth-wide { max-width: none; }
#account { max-width: 900px; }
.auth-title { font: 600 28px/1.2 var(--title); margin: 6px 0 6px; }
.auth-lead { color: var(--muted); margin: 0 0 22px; }
.auth-providers { display: grid; gap: 8px; margin-bottom: 4px; }
.auth-provider { width: 100%; justify-content: center; }
.auth-provider:disabled { opacity: .45; cursor: not-allowed; }
/* Google et Discord : logos officiels, en image pour servir aux boutons de connexion
   comme au bloc « Connexion » du compte. Dans un data URI, # s'écrit %23. */
.auth-provider { display: inline-flex; align-items: center; gap: 10px; }
.auth-provider[hidden] { display: none; }
.oauth-ico { width: 18px; height: 18px; flex: none; background: center / contain no-repeat; }
.oauth-google { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 48 48'%3E%3Cpath fill='%23EA4335' d='M24 9.5c3.54 0 6.71 1.22 9.21 3.6l6.85-6.85C35.9 2.38 30.47 0 24 0 14.62 0 6.51 5.38 2.56 13.22l7.98 6.19C12.43 13.72 17.74 9.5 24 9.5z'/%3E%3Cpath fill='%234285F4' d='M46.98 24.55c0-1.57-.15-3.09-.38-4.55H24v9.02h12.94c-.58 2.96-2.26 5.48-4.78 7.18l7.73 6c4.51-4.18 7.09-10.36 7.09-17.65z'/%3E%3Cpath fill='%23FBBC05' d='M10.53 28.59c-.48-1.45-.76-2.99-.76-4.59s.27-3.14.76-4.59l-7.98-6.19C.92 16.46 0 20.12 0 24c0 3.88.92 7.54 2.56 10.78l7.97-6.19z'/%3E%3Cpath fill='%2334A853' d='M24 48c6.48 0 11.93-2.13 15.89-5.81l-7.73-6c-2.15 1.45-4.92 2.3-8.16 2.3-6.26 0-11.57-4.22-13.47-9.91l-7.98 6.19C6.51 42.62 14.62 48 24 48z'/%3E%3C/svg%3E"); }
.oauth-discord { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='%235865F2' d='M20.317 4.3698a19.7913 19.7913 0 00-4.8851-1.5152.0741.0741 0 00-.0785.0371c-.211.3753-.4447.8648-.6083 1.2495-1.8447-.2762-3.68-.2762-5.4868 0-.1636-.3933-.4058-.8742-.6177-1.2495a.077.077 0 00-.0785-.037 19.7363 19.7363 0 00-4.8852 1.515.0699.0699 0 00-.0321.0277C.5334 9.0458-.319 13.5799.0992 18.0578a.0824.0824 0 00.0312.0561c2.0528 1.5076 4.0413 2.4228 5.9929 3.0294a.0777.0777 0 00.0842-.0276c.4616-.6304.8731-1.2952 1.226-1.9942a.076.076 0 00-.0416-.1057c-.6528-.2476-1.2743-.5495-1.8722-.8923a.077.077 0 01-.0076-.1277c.1258-.0943.2517-.1923.3718-.2914a.0743.0743 0 01.0776-.0105c3.9278 1.7933 8.18 1.7933 12.0614 0a.0739.0739 0 01.0785.0095c.1202.099.246.1981.3728.2924a.077.077 0 01-.0066.1276 12.2986 12.2986 0 01-1.873.8914.0766.0766 0 00-.0407.1067c.3604.698.7719 1.3628 1.225 1.9932a.076.076 0 00.0842.0286c1.961-.6067 3.9495-1.5219 6.0023-3.0294a.077.077 0 00.0313-.0552c.5004-5.177-.8382-9.6739-3.5485-13.6604a.061.061 0 00-.0312-.0286zM8.02 15.3312c-1.1825 0-2.1569-1.0857-2.1569-2.419 0-1.3332.9555-2.4189 2.157-2.4189 1.2108 0 2.1757 1.0952 2.1568 2.419 0 1.3332-.9555 2.4189-2.1569 2.4189zm7.9748 0c-1.1825 0-2.1569-1.0857-2.1569-2.419 0-1.3332.9554-2.4189 2.1569-2.4189 1.2108 0 2.1757 1.0952 2.1568 2.419 0 1.3332-.946 2.4189-2.1568 2.4189z'/%3E%3C/svg%3E"); }
.auth-sep { display: flex; align-items: center; gap: 12px; margin: 18px 0 4px; color: var(--faint); font-size: 12px; }
.auth-sep::before, .auth-sep::after { content: ""; flex: 1; height: 1px; background: var(--line); }
.auth-field { display: grid; gap: 6px; margin: 14px 0 0; }
.auth-field > span { font-size: 12px; color: var(--muted); }
.auth-field[hidden] { display: none; }
.auth-msg { color: #7fd6a2; font-size: 13px; margin: 12px 0 0; min-height: 0; }
.auth-msg:empty, .auth-error:empty { margin: 0; }
.auth-error { color: var(--depleted); font-size: 13px; margin: 12px 0 0; }
.auth-submit { width: 100%; justify-content: center; margin-top: 18px; }
.auth-foot { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 10px; margin-top: 18px; }
.linkish {
  background: none; border: 0; padding: 0;
  color: var(--violet); font: inherit; font-size: 13px; cursor: pointer;
  text-decoration: underline; text-underline-offset: 3px;
}
.linkish:hover { color: var(--lavender); }
.guest-note { margin-top: -6px; }

.acc-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; margin-top: 8px; }
.acc-box { padding: 16px 16px 14px; border-radius: 18px; border: 1px solid var(--line); background: rgba(255, 255, 255, .025); }
.acc-box h2 { font: 600 13px var(--body); text-transform: uppercase; letter-spacing: .05em; color: var(--muted); margin: 0 0 10px; }
.acc-box p { margin: 0 0 8px; }
.acc-wide { grid-column: 1 / -1; }
.acc-form { display: flex; gap: 8px; align-items: center; }
.acc-form-col { flex-direction: column; align-items: stretch; }
.acc-form input { flex: 1; min-width: 0; }
.acc-danger { border-color: rgba(255, 107, 107, .25); }
.acc-status { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; }
/* Les deux blocs (Warcraft Logs, Raider.IO) tiennent la même hauteur et leurs boutons
   s'alignent, même si une description est plus longue que l'autre. */
.acc-api { display: flex; flex-direction: column; }
.acc-api .note { margin-bottom: 14px; }
/* `.acc-box p` (une classe + un type) l'emportait sur `.acc-api-foot` (une classe) et
   remettait sa marge : le `margin-top: auto` ne poussait rien, et la ligne d'état restait
   collée sous la description, donc plus haut dans le bloc le plus court. */
.acc-api .acc-api-foot { display: flex; align-items: center; gap: 10px; margin: auto 0 0; }
/* Pseudo et mot de passe (demande de l'utilisateur) : les champs prennent toute la
   largeur, et le bouton descend en bas à droite du bloc comme dans les deux blocs
   d'API. Le formulaire est lui-même la colonne qui s'étire, sinon la marge automatique
   du pied n'aurait rien à pousser. */
.acc-fields { display: flex; flex-direction: column; gap: 8px; flex: 1; }
.acc-fields input { width: 100%; }
/* Le bouton ne colle pas au dernier champ, même quand le bloc n'a pas de place en trop */
.acc-fields .acc-api-foot { justify-content: flex-end; padding-top: 14px; }
.acc-api-foot .note { margin: 0; flex: 1; }
/* Répartition de l'indice : deux moitiés, donjons et raids */
/* Arrivée par /account#repartition : sous la barre du haut, et une lueur qui s'éteint */
.acc-weights { scroll-margin-top: 104px; }
.acc-weights.anchor-flash { animation: anchor-flash 2.2s ease-out; }
@keyframes anchor-flash {
  0%, 25% { border-color: rgba(167, 139, 250, .7); box-shadow: 0 0 0 4px rgba(167, 139, 250, .18), 0 0 32px rgba(167, 139, 250, .25); }
  100% { border-color: var(--line); box-shadow: none; }
}
@media (prefers-reduced-motion: reduce) { .acc-weights.anchor-flash { animation: none; } }
.w-cols { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; margin-top: 12px; }
.w-side { display: flex; flex-direction: column; padding: 14px 16px; border-radius: 14px; border: 1px solid var(--line); background: rgba(14, 12, 20, .5); }
.w-side h3 { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin: 0 0 12px; font: 600 15px var(--display); }
.w-badge { font: 500 11px var(--body); padding: 3px 9px; border-radius: 99px; color: var(--muted); border: 1px solid var(--line); }
.w-badge.on { color: var(--violet); border-color: rgba(167, 139, 250, .4); background: rgba(167, 139, 250, .1); }
/* Profils tout prêts : pastilles au-dessus des curseurs, celle qui correspond aux curseurs est allumée */
.w-presets { display: flex; flex-wrap: wrap; gap: 6px; margin: -2px 0 16px; }
.w-preset {
  padding: 5px 11px; border-radius: 99px; border: 1px solid var(--line); background: rgba(255, 255, 255, .03);
  font: 500 12px var(--body); color: var(--muted); cursor: pointer; transition: color .15s, border-color .15s, background .15s;
}
.w-preset:hover { color: var(--text); border-color: var(--line-strong); }
.w-preset.on { color: var(--violet); border-color: rgba(167, 139, 250, .45); background: rgba(167, 139, 250, .12); }
.w-rows { display: flex; flex-direction: column; gap: 12px; }
.w-row { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 4px 12px; align-items: baseline; }
.w-lab { font-size: 13px; color: var(--text); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.w-val { font-size: 13px; font-variant-numeric: tabular-nums; color: var(--lavender); min-width: 4ch; text-align: right; }
/* Nom du critère et son « ? » (explication du calcul, openIndexHelp) */
.w-side .w-lab { display: flex; align-items: center; gap: 7px; min-width: 0; }
.w-side .w-lab label { min-width: 0; overflow: hidden; text-overflow: ellipsis; cursor: pointer; }
.w-info {
  position: relative; flex: none; width: 17px; height: 17px; padding: 0;
  display: inline-flex; align-items: center; justify-content: center;
  border-radius: 50%; border: 1px solid var(--line-strong); background: rgba(255, 255, 255, .03);
  font: 600 10.5px/1 var(--body); color: var(--muted); cursor: pointer;
  transition: color .15s, border-color .15s, background .15s;
}
.w-info::before { content: ""; position: absolute; inset: -6px; border-radius: 50%; }
.w-info svg { display: block; width: 7px; height: 9px; }
.w-info:hover, .w-info:focus-visible { color: var(--violet); border-color: rgba(167, 139, 250, .55); background: rgba(167, 139, 250, .12); outline: none; }
.acc-box .w-help { margin: 12px 0 0; font-size: 12px; }
.w-foot { display: flex; align-items: center; gap: 12px; margin-top: auto; padding-top: 14px; }
.w-total { flex: 1; font-size: 12px; color: var(--v-limite); }
.w-total.full { color: var(--muted); }
.w-foot .btn:disabled { opacity: .4; cursor: default; }
/* Curseur : --p = valeur, --cap = le plus haut qu'il peut atteindre (ce que les autres laissent).
   La piste est remplie jusqu'à --p, libre jusqu'à --cap, hachurée au-delà. Les positions tiennent
   compte de la largeur du bouton (16 px) pour que le remplissage s'arrête pile sous son centre. */
.w-range {
  grid-column: 1 / -1; width: 100%; height: 20px; margin: 0; background: transparent; cursor: pointer;
  -webkit-appearance: none; appearance: none;
  --fill: calc(8px + (100% - 16px) * var(--p) / 100);
  --stop: calc(8px + (100% - 16px) * var(--cap) / 100);
}
.w-range:focus { outline: none; }
.w-range::-webkit-slider-runnable-track {
  height: 6px; border-radius: 99px;
  background:
    linear-gradient(to right, var(--violet) 0 var(--fill), rgba(255, 255, 255, .13) var(--fill) var(--stop), transparent var(--stop)),
    repeating-linear-gradient(135deg, rgba(255, 255, 255, .07) 0 3px, transparent 3px 6px);
}
.w-range::-moz-range-track {
  height: 6px; border-radius: 99px;
  background:
    linear-gradient(to right, var(--violet) 0 var(--fill), rgba(255, 255, 255, .13) var(--fill) var(--stop), transparent var(--stop)),
    repeating-linear-gradient(135deg, rgba(255, 255, 255, .07) 0 3px, transparent 3px 6px);
}
.w-range::-webkit-slider-thumb {
  -webkit-appearance: none; appearance: none; width: 16px; height: 16px; margin-top: -5px; border-radius: 50%;
  background: var(--lavender); border: 3px solid #1a1626; box-shadow: 0 0 0 1px rgba(167, 139, 250, .6);
  transition: box-shadow .15s;
}
.w-range::-moz-range-thumb {
  width: 16px; height: 16px; box-sizing: border-box; border-radius: 50%;
  background: var(--lavender); border: 3px solid #1a1626; box-shadow: 0 0 0 1px rgba(167, 139, 250, .6);
}
.w-range:hover::-webkit-slider-thumb, .w-range:focus-visible::-webkit-slider-thumb { box-shadow: 0 0 0 1px var(--violet), 0 0 0 6px rgba(167, 139, 250, .18); }
.w-range:hover::-moz-range-thumb, .w-range:focus-visible::-moz-range-thumb { box-shadow: 0 0 0 1px var(--violet), 0 0 0 6px rgba(167, 139, 250, .18); }
@media (max-width: 760px) { .w-cols { grid-template-columns: 1fr; } }
.acc-logins { list-style: none; margin: 14px 0 0; padding: 0; display: grid; gap: 8px; }
.acc-login { display: flex; align-items: center; gap: 12px; padding: 10px 12px; border: 1px solid var(--line); border-radius: 14px; background: rgba(255, 255, 255, .02); }
.acc-login .oauth-ico { width: 20px; height: 20px; }
.acc-login-main { flex: 1; min-width: 0; display: grid; gap: 1px; }
.acc-login-name { font-weight: 500; }
.acc-login-state { font-size: 12px; color: var(--muted); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.acc-login .btn { flex: none; }
.acc-dot { width: 8px; height: 8px; border-radius: 50%; flex: none; background: var(--faint); }
.acc-dot.on { background: #7fd6a2; box-shadow: 0 0 10px rgba(127, 214, 162, .55); }
.acc-dot.off { background: var(--v-limite); box-shadow: 0 0 10px rgba(240, 180, 90, .45); }

/* Modale : le pas-à-pas des deux sites. Fond flouté, carte centrée, défilement dans la
   carte et non derrière elle (`body.has-modal`), pour ne pas perdre sa place. */
.modal { position: fixed; inset: 0; z-index: 40; display: flex; align-items: center; justify-content: center; padding: 20px; }
.modal[hidden] { display: none; }
.modal-back { position: absolute; inset: 0; background: rgba(4, 3, 8, .68); -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px); animation: modal-back .2s ease-out; }
/* La carte ne défile pas : seul son contenu (.modal-body) défile, sous le titre qui reste en
   place. Quand c'était la carte qui défilait, sa lueur (.card.glow::after, posée à la hauteur
   de la carte) partait avec le texte, laissait un fond cassé en dessous et s'arrêtait avant la
   barre de défilement. Là, fond et lueur restent fixes et passent derrière la barre, dont la
   piste est transparente. La barre est tenue à l'écart du bord et des coins arrondis. */
.modal-card {
  position: relative;
  width: min(560px, 100%);
  max-height: min(86vh, 760px);
  display: flex; flex-direction: column;
  padding: 26px 0 0;
  animation: modal-card .22s cubic-bezier(.22, .61, .36, 1);
}
.modal-card > .modal-title { flex: none; margin-left: 26px; margin-right: 26px; }
.modal-card > .modal-body {
  flex: 1 1 auto; min-height: 0; overflow-y: auto; overscroll-behavior: contain;
  margin: 0 6px 14px 0; padding: 0 20px 8px 26px;
}
.modal-body::-webkit-scrollbar { width: 10px; }
.modal-body::-webkit-scrollbar-thumb { border-width: 2px; }
/* Code de vérification : six cases dessinées (.code-box) sous un seul vrai champ, rendu
   transparent et posé par-dessus — le collage et le remplissage automatique marchent d'un
   coup. La case en cours est allumée, avec un curseur qui clignote tant qu'elle est vide. */
.verify-form { display: grid; gap: 12px; margin-top: 18px; }
.code-field { position: relative; }
.code-boxes { display: grid; grid-template-columns: repeat(6, 1fr); gap: 8px; }
.code-box {
  position: relative; height: 60px;
  display: flex; align-items: center; justify-content: center;
  font: 600 28px var(--mono); color: var(--text);
  border-radius: 14px; border: 1px solid var(--line);
  background: rgba(255, 255, 255, .03);
  transition: border-color .15s, background .15s, box-shadow .15s, transform .15s;
}
.code-box.filled { border-color: rgba(167, 139, 250, .35); background: rgba(167, 139, 250, .06); }
.code-box.active {
  border-color: var(--violet); background: rgba(167, 139, 250, .1);
  box-shadow: 0 0 0 3px rgba(167, 139, 250, .18), 0 0 22px rgba(167, 139, 250, .22);
  transform: translateY(-1px);
}
.code-box.active:empty::after {
  content: ""; width: 2px; height: 28px; border-radius: 1px; background: var(--violet);
  animation: code-caret 1s steps(1) infinite;
}
@keyframes code-caret { 50% { opacity: 0; } }
.code-field.is-error .code-box { border-color: var(--depleted); box-shadow: none; background: rgba(255, 107, 107, .06); }
.code-field.is-error .code-box.active:empty::after { background: var(--depleted); }
.code-field.shake .code-boxes { animation: code-shake .38s cubic-bezier(.36, .07, .19, .97); }
@keyframes code-shake { 20%, 60% { transform: translateX(-6px); } 40%, 80% { transform: translateX(6px); } }
/* Le vrai champ couvre toutes les cases (un clic n'importe où y met le focus), sans rien afficher */
.modal-body .code-field input.code-input,
.modal-body .code-field input.code-input:focus {
  position: absolute; inset: 0; z-index: 2; width: 100%; height: 100%;
  margin: 0; padding: 0; border: 0; outline: none; box-shadow: none;
  background: transparent; color: transparent; caret-color: transparent;
  font-size: 16px; letter-spacing: 0; text-indent: 0; cursor: text;
}
.modal-body .code-field input.code-input::selection { background: transparent; }
.modal-body .code-field input.code-input:-webkit-autofill {
  -webkit-text-fill-color: transparent; box-shadow: none; transition: background-color 99999s;
}
@media (max-width: 420px) { .code-boxes { gap: 5px; } .code-box { height: 52px; font-size: 24px; border-radius: 12px; } }
@media (prefers-reduced-motion: reduce) { .code-box.active:empty::after, .code-field.shake .code-boxes { animation: none; } }
.verify-form .auth-error { margin: 0; min-height: 0; }
.verify-form .auth-error:empty { display: none; }
.verify-resend { margin: 16px 0 0; text-align: center; color: var(--muted); font-size: 13px; }

.keys-list { list-style: none; margin: 16px 0; padding: 0; display: grid; gap: 8px; }
.keys-item { display: flex; align-items: center; gap: 12px; padding: 10px 14px; border: 1px solid var(--line); border-radius: 14px; background: rgba(255, 255, 255, .02); }
.keys-item > span:nth-child(2) { flex: 1; min-width: 0; display: grid; gap: 2px; }
.keys-item small { color: var(--muted); font-size: 12px; }
.keys-item .note { white-space: nowrap; margin: 0; }
.keys-item.ok { opacity: .6; }
.modal-title { font: 600 22px/1.2 var(--title); margin: 0 0 16px; padding-right: 40px; }
.modal-x::before { content: ""; position: absolute; inset: -4px; border-radius: 50%; }
.modal-body > :first-child { margin-top: 0; }
.modal-body > :last-child { margin-bottom: 0; }
.modal-form { margin: 16px 0; }
.modal-form .btn { justify-content: center; }
/* `.modal-body` en plus : la modale est une `.card`, et `.card p { margin: 0 }` (une classe
   + un type) l'emportait sur `.modal-actions` seul et effaçait la marge du haut. */
.modal-body .modal-actions { display: flex; flex-direction: column; align-items: center; gap: 12px; margin: 22px 0 0; }
.modal-actions .btn { align-self: stretch; justify-content: center; }
.modal-body .modal-text { color: var(--muted); margin: 0; }
/* Bouton d'une confirmation qui supprime : rouge plutôt que lavande */
.btn.primary.danger { background: #ff6b6b; color: #1a0708; box-shadow: inset 0 1px 0 rgba(255, 255, 255, .5), 0 0 24px rgba(255, 107, 107, .3); }
.btn.primary.danger:hover { box-shadow: inset 0 1px 0 rgba(255, 255, 255, .6), 0 0 34px rgba(255, 107, 107, .5); }
/* Personnages du Battle.net lié : une ligne chacun, la liste défile dans la modale */
.bnet-chars { list-style: none; margin: 10px 0 14px; padding: 4px 0; max-height: 280px; overflow: auto; border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); }
.bnet-char { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) auto; gap: 10px; align-items: baseline; padding: 6px 2px; font-size: 14px; }
.bc-name { font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.bc-realm { color: var(--muted); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.bc-level { color: var(--faint); font-size: 12px; font-variant-numeric: tabular-nums; }
/* z-index : le titre (.card > * est positionné pour passer sur la lueur) recouvrait la
   croix et prenait les clics. Zone de clic de 44 px, au-delà du rond visible (::before). */
.modal-x {
  position: absolute; top: 10px; right: 10px; z-index: 3;
  width: 36px; height: 36px; padding: 0;
  display: inline-flex; align-items: center; justify-content: center;
  border-radius: 50%; border: 1px solid var(--line);
  background: rgba(255, 255, 255, .03); color: var(--muted);
  cursor: pointer; transition: color .15s, border-color .15s;
}
.modal-x:hover { color: var(--text); border-color: var(--line-strong); }
.modal-x svg { width: 16px; height: 16px; }
body.has-modal { overflow: hidden; }
/* Les étapes de la modale : un nombre violet dans un rond, et du texte à côté. Surtout
   pas `.steps`, déjà pris par la grille de trois colonnes de l'accueil. */
.modal-steps { list-style: none; counter-reset: etape; margin: 0 0 4px; padding: 0; }
.modal-steps li { counter-increment: etape; position: relative; padding: 0 0 12px 34px; color: var(--muted); font-size: 14px; }
.modal-steps li::before {
  content: counter(etape);
  position: absolute; left: 0; top: -1px;
  width: 22px; height: 22px;
  display: flex; align-items: center; justify-content: center;
  border-radius: 50%; border: 1px solid rgba(167, 139, 250, .35);
  color: var(--violet); font: 600 12px var(--body);
}
.modal-steps b { color: var(--text); }
/* Explication d'un critère de l'indice : le calcul, puis des exemples avec leur note en barre */
.modal-body .ix-lead { margin: 0 0 14px; }
.ix-calc { padding: 12px 14px; border-radius: 14px; border: 1px solid rgba(167, 139, 250, .25); background: rgba(167, 139, 250, .07); margin: 0 0 18px; }
.modal-body .ix-calc p { margin: 4px 0 0; font-size: 14px; color: var(--text); line-height: 1.55; }
.ix-calc b { color: var(--lavender); font-weight: 600; }
.modal-body .ix-kicker { display: block; margin: 0; font: 600 11px var(--body); text-transform: uppercase; letter-spacing: .06em; color: var(--violet); }
.ix-list { list-style: none; margin: 8px 0 14px; padding: 0; border-top: 1px solid var(--line); }
.ix-ex { display: grid; grid-template-columns: minmax(0, 1fr) 72px 52px; gap: 12px; align-items: center; padding: 8px 0; border-bottom: 1px solid var(--line); font-size: 13.5px; }
.ix-what { color: var(--muted); }
.ix-bar { height: 6px; border-radius: 99px; background: rgba(255, 255, 255, .08); overflow: hidden; }
.ix-bar i { display: block; height: 100%; border-radius: inherit; background: var(--violet); }
.ix-bar.ix-none { background: repeating-linear-gradient(135deg, rgba(255, 255, 255, .08) 0 3px, transparent 3px 6px); }
.ix-val { text-align: right; font-variant-numeric: tabular-nums; color: var(--text); font-weight: 600; }
.ix-val.ix-skip { color: var(--faint); font-weight: 500; font-size: 12px; }
.modal-body .ix-note { margin: 0 0 8px; font-size: 13px; }
.modal-body .ix-weight { margin: 14px 0 0; padding-top: 12px; border-top: 1px solid var(--line); font-size: 13px; }
.ix-weight b { color: var(--lavender); }
.ix-nav { display: flex; justify-content: space-between; gap: 12px; margin-top: 16px; }
.ix-nav .linkish { font-size: 13px; }
@media (max-width: 480px) { .ix-ex { grid-template-columns: minmax(0, 1fr) 44px; } .ix-bar { display: none; } }
@keyframes modal-back { from { opacity: 0; } }
@keyframes modal-card { from { opacity: 0; transform: translateY(10px); } }
.acc-danger .btn { border-color: rgba(255, 107, 107, .4); color: #ff9b9b; }

.adm-table td { vertical-align: middle; }
.adm-mail { display: block; font-size: 11px; color: var(--muted); }
.adm-ok { color: #7fd6a2; font-size: 12px; }
.adm-no { color: var(--depleted); font-size: 12px; }
.adm-seg { display: inline-flex; }
.seg-btn {
  border: 1px solid var(--line); border-right: 0;
  background: rgba(255, 255, 255, .03); color: var(--muted);
  font: 500 11px var(--body); padding: 5px 9px; cursor: pointer;
}
.seg-btn:first-child { border-radius: 999px 0 0 999px; padding-left: 12px; }
.seg-btn:last-child { border-right: 1px solid var(--line); border-radius: 0 999px 999px 0; padding-right: 12px; }
.seg-btn.on { background: rgba(167, 139, 250, .16); color: var(--text); border-color: rgba(167, 139, 250, .4); }
.seg-btn:disabled { opacity: .4; cursor: default; }

/* ------------------------------------------------------------------ */
/* Backoffice de l'admin (/admin)                                      */
/* ------------------------------------------------------------------ */
#admin { max-width: 1320px; }
#admin .note { color: var(--muted); font-size: 12px; }
#admin .error { color: var(--depleted); }
#adminCard { transition: opacity .15s; }
#adminCard.bo-loading { opacity: .6; }
.bo-tabs { display: flex; flex-wrap: wrap; gap: 6px; margin: 4px 0 22px; }
.bo-tab {
  font: 500 13px var(--body); color: var(--muted); text-decoration: none;
  padding: 7px 14px; border-radius: 999px; border: 1px solid var(--line); background: rgba(255, 255, 255, .03);
  transition: color .15s, background .15s, border-color .15s;
}
.bo-tab:hover { color: var(--text); border-color: var(--line-strong); }
.bo-tab.on { color: var(--text); background: rgba(167, 139, 250, .16); border-color: rgba(167, 139, 250, .45); }
.bo-section { margin-top: 26px; }
.bo-section h2 { font: 600 16px var(--display); margin: 0 0 10px; display: flex; align-items: center; gap: 8px; }
.bo-n { font: 500 11px var(--body); color: var(--muted); background: rgba(255, 255, 255, .06); border-radius: 999px; padding: 2px 8px; }
.bo-empty { margin: 0; }
.bo-tiles { display: grid; grid-template-columns: repeat(auto-fill, minmax(170px, 1fr)); gap: 10px; }
.bo-tile {
  display: grid; gap: 2px; padding: 12px 14px; border-radius: 14px;
  background: rgba(255, 255, 255, .03); border: 1px solid var(--line);
}
.bo-tile b { font: 600 22px var(--display); font-variant-numeric: tabular-nums; }
.bo-tile > span { font-size: 12px; color: var(--muted); }
.bo-tile small { font-size: 11px; color: var(--faint); line-height: 1.5; }
.bo-tile small .bo-yes, .bo-tile small .bo-no { font-size: 11px; margin-right: 4px; }
.bo-yes { color: #7fd6a2; font-size: 12px; }
.bo-no { color: var(--depleted); font-size: 12px; }
.bo-warn { color: var(--v-limite); font-size: 12px; }
.bo-code { font: 12px var(--mono); letter-spacing: .04em; }
.bo-honor { font-size: 12px; white-space: nowrap; }
.bo-honor.up, .bo-up { color: var(--honor-up); }
.bo-honor.down, .bo-down { color: var(--honor-down); }
.bo-honor.crown { color: var(--honor-crown); }
.bo-honor.crown.off { opacity: .5; text-decoration: line-through; }
.bo-counts { display: inline-flex; gap: 7px; font-variant-numeric: tabular-nums; }
.bo-counts > span { display: inline-flex; align-items: baseline; gap: 1px; min-width: 1.7em; justify-content: flex-end; }
.bo-counts i { font-style: normal; font-size: 10px; }
/* Colonnes « Donnés » (violet) et « Reçus » (bleu) : fond teinté et filet à gauche, pour ne pas les confondre */
.adm-table th.bo-given, .adm-table td.bo-given { background: rgba(167, 139, 250, .07); box-shadow: inset 1px 0 0 rgba(167, 139, 250, .35); padding-left: 8px; padding-right: 8px; }
.adm-table th.bo-got, .adm-table td.bo-got { background: rgba(125, 211, 252, .06); box-shadow: inset 1px 0 0 rgba(125, 211, 252, .35); padding-left: 8px; padding-right: 8px; }
.adm-table th.bo-given { color: var(--violet); }
.adm-table th.bo-got { color: #7dd3fc; }
.bo-counts .up { color: var(--honor-up); }
.bo-counts .down { color: var(--honor-down); }
.bo-counts .crown { color: var(--honor-crown); }
.bo-counts .z { color: var(--faint); opacity: .6; }
.bo-sub { display: block; font-size: 11px; color: var(--faint); }
.bo-sub.bo-no { color: var(--depleted); }
.bo-keys .bo-yes, .bo-keys .bo-no { font-size: 11px; }
.bo-keys .bo-no { color: var(--faint); text-decoration: line-through; }
.adm-seg.segmented { margin: 0; padding: 2px; }
.adm-seg.segmented .seg-btn { flex: none; font-size: 11px; padding: 4px 9px; border: 0; border-radius: 999px; background: transparent; }
.adm-seg.segmented .seg-btn.on { background: rgba(167, 139, 250, .18); color: var(--text); }
.adm-table a[data-adm], .bo-feed a[data-adm], .bo-dl a[data-adm], .bo-notes a[data-adm] { color: inherit; text-decoration: none; }
.adm-table a[data-adm]:hover, .bo-feed a[data-adm]:hover, .bo-dl a[data-adm]:hover, .bo-notes a[data-adm]:hover { text-decoration: underline; text-decoration-color: var(--violet); }
.adm-table td.wrap { max-width: 340px; }
.bo-agent { font-size: 11px; color: var(--muted); }
.bo-search { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin: 0 0 14px; }
.bo-search input[type="search"] { flex: 1 1 220px; max-width: 340px; }
.bo-filter { display: inline-flex; margin: 0; }
.bo-filter button { flex: none; font-size: 12px; padding: 5px 11px; }
.bo-pager { display: flex; align-items: center; justify-content: center; gap: 12px; margin-top: 14px; }
.bo-bar { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 10px; margin: 0 0 16px; font-size: 13px; }
.bo-bar a { color: var(--violet); text-decoration: none; }
.bo-dl { display: grid; grid-template-columns: max-content 1fr; gap: 8px 18px; margin: 0; font-size: 13px; }
.bo-dl dt { color: var(--muted); }
.bo-dl dd { margin: 0; display: flex; flex-wrap: wrap; align-items: center; gap: 6px 8px; }
.bo-feed { list-style: none; margin: 0; padding: 0; display: grid; font-size: 13px; }
.bo-feed li { display: grid; grid-template-columns: 110px 100px 1fr; gap: 10px; align-items: baseline; padding: 6px 0; border-bottom: 1px solid rgba(255, 255, 255, .04); }
.bo-feed-when { color: var(--faint); font-size: 12px; }
.bo-feed-type { font-size: 11px; color: var(--muted); }
.bo-feed-type.t-run { color: var(--v-correct); }
.bo-feed-type.t-honneur { color: var(--honor-up); }
.bo-feed-type.t-couronne { color: var(--honor-crown); }
.bo-feed-type.t-commentaire { color: var(--violet); }
.bo-feed-type.t-inscription { color: #7fd6a2; }
.bo-notes { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; }
.bo-notes li { padding: 10px 12px; border-radius: 12px; background: rgba(255, 255, 255, .03); border: 1px solid var(--line); }
.bo-note-head { font-size: 12px; color: var(--muted); }
.bo-acts { display: inline-flex; gap: 4px; margin-left: 6px; vertical-align: middle; }
.bo-notes .bo-acts { margin: 8px 0 0; }
.bo-act {
  font: 500 11px var(--body); color: var(--muted); cursor: pointer; white-space: nowrap;
  padding: 3px 9px; border-radius: 999px; border: 1px solid var(--line); background: rgba(255, 255, 255, .03);
  transition: color .15s, border-color .15s, background .15s;
}
.bo-act:hover { color: var(--text); border-color: var(--line-strong); }
.bo-act.danger:hover { color: #ff9b9b; border-color: rgba(255, 107, 107, .45); background: rgba(255, 107, 107, .08); }
.bo-note-edit { display: grid; gap: 6px; margin-top: 6px; }
.bo-note-edit textarea { width: 100%; resize: vertical; font: 13px/1.5 var(--body); }
.bo-note-edit .bo-acts { margin: 0; }
.bo-notes p { margin: 4px 0 0; font-size: 13px; white-space: pre-wrap; overflow-wrap: anywhere; }
@media (max-width: 720px) {
  .bo-feed li { grid-template-columns: 1fr; gap: 2px; }
  .bo-dl { grid-template-columns: 1fr; gap: 2px; }
  .bo-dl dd { margin-bottom: 8px; }
  .bo-tiles { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (max-width: 720px) {
  .acc-grid { grid-template-columns: 1fr; }
  .auth { padding-top: 96px; }
  .nav-account .nav-me-status { display: none; }
}

/* ------------------------------------------------------------------ */
/* Honneurs et commentaires privés                                     */
/* Couleurs propres aux honneurs : --gold reste réservé aux coffres.   */
/* ------------------------------------------------------------------ */
:root {
  --honor-up: #4ade80;
  --honor-crown: #f5c04a;
  --honor-down: #ff5a6a;
}
.k-up { --hc: var(--honor-up); --hs: 74, 222, 128; }
.k-crown { --hc: var(--honor-crown); --hs: 245, 192, 74; }
.k-down { --hc: var(--honor-down); --hs: 255, 90, 106; }

/* Dans une ligne ou une carte : sur la ligne du nom, sans changer la hauteur (FLIP) */
.hmini, .mynote { display: inline-flex; align-items: center; vertical-align: 1px; margin-left: 8px; font: 600 11px var(--body); letter-spacing: 0; color: var(--muted); cursor: help; }
.hmini { gap: 7px; }
.hmini > span { display: inline-flex; align-items: center; gap: 3px; }
.hmini svg { width: 12px; height: 12px; fill: currentColor; fill-opacity: .25; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.hm-crown { color: var(--honor-crown); }
.hmini.good .hm-up { color: var(--honor-up); }
.hmini.mid .hm-up { color: var(--v-limite); }
.hmini.bad .hm-up { color: var(--honor-down); }
.mynote { color: var(--violet); }
.mynote svg { width: 13px; height: 13px; }
.g-name .hmini, .g-name .mynote { margin-left: 2px; flex: none; }
/* Liste resserrée : les honneurs se coupent d'abord, puis le pseudo (jamais sous 4 lettres) */
.who .name { display: flex; align-items: center; }
.who .name > * { flex: none; }
.who .name > .pname { flex: 0 1 auto; min-width: 4ch; overflow: hidden; text-overflow: ellipsis; }
.who .name > .hmini { flex: 0 100 auto; min-width: 0; overflow: hidden; }

/* Panneau de détail et fiche joueur */
.social h3 { font: 500 16px var(--display); letter-spacing: -.01em; margin: 0 0 10px; }
.social h3 small { font: 400 12px var(--body); letter-spacing: 0; color: var(--muted); margin-left: 8px; }
.social .note { color: var(--muted); font-size: 13px; margin: 0; }
.snotes-head { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin: 20px 0 10px; min-height: 26px; }
.snotes-head h3 { margin: 0; }
.snav { display: flex; align-items: center; gap: 6px; flex: none; }
.snav-count { font: 500 12px var(--body); color: var(--muted); min-width: 34px; text-align: center; font-variant-numeric: tabular-nums; }
.snav-btn {
  display: grid; place-items: center; width: 26px; height: 26px; padding: 0;
  border-radius: 50%; border: 1px solid var(--line); background: rgba(255, 255, 255, .03);
  color: var(--muted); cursor: pointer; transition: color .15s, border-color .15s, background .15s;
}
.snav-btn svg { width: 13px; height: 13px; }
.snav-btn:hover:not(:disabled) { color: var(--text); border-color: var(--line-strong); }
.snav-btn:disabled { opacity: .35; cursor: default; }
.snav-add { color: var(--violet); border-color: rgba(167, 139, 250, .35); }
.snav-add:hover:not(:disabled), .snav-add.on { color: var(--lavender); background: rgba(167, 139, 250, .14); border-color: rgba(167, 139, 250, .55); }
.hchips { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
.hchip {
  display: inline-flex; align-items: center; gap: 6px;
  height: 30px; padding: 0 12px; border-radius: 999px;
  color: var(--hc); background: rgba(var(--hs), .08); border: 1px solid rgba(var(--hs), .32);
  font: 600 14px var(--display);
}
.hchip svg { width: 15px; height: 15px; fill: rgba(var(--hs), .3); stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.hratio { font: 600 13px var(--body); color: var(--text); margin-left: 4px; }
.hratio.good { color: var(--honor-up); }
.hratio.mid { color: var(--v-limite); }
.hratio.bad { color: var(--honor-down); }
.smine { color: var(--muted); font-size: 13px; margin: 10px 0 0; }
/* Même hauteur pour un commentaire d'une ligne et pour le champ du +, sinon le bloc grandit en passant de l'un à l'autre */
.social { --note-h: 60px; }
.social .snote-empty { min-height: var(--note-h); display: flex; align-items: center; }
.snote { box-sizing: border-box; min-height: var(--note-h); align-content: start; display: grid; gap: 3px; padding: 9px 12px; border-radius: 12px; background: rgba(167, 139, 250, .06); border: 1px solid rgba(167, 139, 250, .16); }
.snote-meta { display: flex; align-items: center; gap: 10px; font-size: 11px; color: var(--muted); }
.snote-meta .linkish { font-size: 11px; margin-left: auto; opacity: .7; }
.snote-meta .linkish:hover { opacity: 1; }
.snote-text { font-size: 13px; white-space: pre-wrap; overflow-wrap: anywhere; }
.note-form { display: flex; gap: 8px; align-items: flex-end; }
.note-form textarea {
  flex: 1; min-width: 0; min-height: 0; resize: none; box-sizing: border-box; height: var(--note-h);
  font: 13px/1.5 var(--body); padding: 8px 12px; border-radius: 12px;
}
#drawerSocial:not(:empty) { margin-bottom: 18px; padding-bottom: 18px; border-bottom: 1px solid var(--line); }
/* Fiche joueur : sous l'en-tête, honneurs à gauche et tes commentaires à droite */
.social-cols { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 18px 0; }
.social-cols .snotes-head { margin-top: 0; }
.social-col + .social-col { padding-left: 32px; border-left: 1px solid var(--line); }
@media (max-width: 760px) {
  .social-cols { grid-template-columns: 1fr; }
  .social-col + .social-col { padding: 18px 0 0; border-left: 0; border-top: 1px solid var(--line); }
}
.player-page .social-card { margin: 0 0 18px; }
.social-card {
  margin-top: 18px; padding: 20px 22px;
  border-radius: 18px; background: rgba(255, 255, 255, .025); border: 1px solid rgba(255, 255, 255, .05);
}

/* Page de fin de run */
.run-page { position: relative; z-index: 1; max-width: 1180px; margin: 0 auto; padding: 104px 24px 60px; }
.run-head { text-align: center; margin: 10px auto 26px; max-width: 720px; }
.run-title { font: 500 clamp(28px, 4vw, 42px)/1.1 var(--display); letter-spacing: -.03em; margin: 14px 0 8px; }
.run-sub { color: var(--muted); margin: 0; }
.run-sub b { color: var(--text); font-weight: 600; }
.run-lead { color: var(--faint); font-size: 13px; margin: 10px 0 0; }
.run-warn { color: var(--v-limite); }
/* Vérifié (Raider.IO ou un autre joueur du groupe) ou simplement déclaré */
.run-proof {
  display: inline-block; margin-left: 6px; vertical-align: middle;
  font-size: 12px; padding: 5px 12px; border-radius: 999px; cursor: help;
  color: var(--muted); border: 1px solid var(--line); background: rgba(255, 255, 255, .03);
}
.run-proof.ok { color: #7fd6a2; border-color: rgba(127, 214, 162, .35); background: rgba(127, 214, 162, .08); }
.run-group { margin-bottom: 18px; }
/* Page de vote partagée : « Tu es qui ? », et la recherche de son personnage s'il manque */
.run-claim { display: flex; flex-direction: column; align-items: center; gap: 10px; margin: 20px auto 6px; text-align: center; }
.run-claim[hidden] { display: none; }
.run-claim-note { color: var(--muted); font-size: 13px; margin: 0; max-width: 520px; }
.r-self .linkish { font-size: 13px; }
.rcard { gap: 4px; padding-bottom: 14px; }
.rcard .g-sub { margin-bottom: 12px; }
.r-self { margin-top: auto; height: 40px; display: flex; align-items: center; color: var(--faint); font-size: 13px; }
.r-before { margin-top: 8px; color: var(--faint); font-size: 11px; line-height: 1.35; }
.hbtns { margin-top: auto; display: flex; align-items: center; gap: 6px; }
/* Commentaire privé : à droite du pouce rouge, un peu plus petit et séparé des honneurs */
.k-note { --hc: var(--violet); --hs: 167, 139, 250; }
.hb.hb-note { width: 34px; height: 34px; margin-left: auto; }
.hb.hb-note svg { width: 16px; height: 16px; }
.run-note-form { display: grid; gap: 12px; margin-top: 14px; }
.run-note-form textarea { min-height: 0; resize: none; font: 14px/1.5 var(--body); padding: 10px 12px; border-radius: 12px; }
.run-note-actions { display: flex; align-items: center; justify-content: flex-end; gap: 16px; }
.run-foot { display: flex; flex-wrap: wrap; align-items: center; justify-content: flex-end; gap: 12px 18px; margin: 16px 4px 2px; }
.run-summary { color: var(--muted); font-size: 13px; margin-right: auto; }
.run-foot .btn:disabled { opacity: .4; cursor: default; box-shadow: none; }
@media (max-width: 900px) {
  .run-grid { grid-template-columns: repeat(auto-fill, minmax(190px, 1fr)); }
  .run-page { padding: 96px 16px 48px; }
}

/* Boutons d'honneur, style « jeton » (choisi sur maquette) : au clic la pièce tourne,
   un reflet la traverse, puis des étincelles jaillissent ; au survol elle se soulève
   sur une lueur de sa couleur. La classe .fx n'est posée que sur le bouton cliqué, au
   seul rendu qui suit le clic : le suivant ne rejoue pas l'animation. */
.hb {
  position: relative;
  width: 40px; height: 40px; padding: 0;
  display: grid; place-items: center;
  border-radius: 50%;
  background: rgba(255, 255, 255, .035);
  border: 1px solid rgba(255, 255, 255, .1);
  color: var(--muted);
  cursor: pointer;
  transition: color .25s, border-color .25s, background .25s, box-shadow .25s, opacity .25s, transform .25s;
}
.hb svg { width: 19px; height: 19px; display: block; fill: transparent; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; transition: fill .25s; }
.hb .ico { position: relative; z-index: 1; display: grid; place-items: center; }
.hb::after {
  content: ""; position: absolute; inset: 0; border-radius: 50%; pointer-events: none; opacity: 0;
  background: linear-gradient(115deg, transparent 30%, rgba(255, 255, 255, .55) 48%, transparent 62%);
  background-size: 250% 100%; background-position: 120% 0;
}
.hb .pt {
  position: absolute; left: 50%; top: 50%;
  width: 6px; height: 6px; margin: -3px;
  border-radius: 50%; pointer-events: none; opacity: 0;
  background: var(--hc); box-shadow: 0 0 8px var(--hc);
}
.hb.k-crown .pt:nth-of-type(odd) { width: 8px; height: 8px; margin: -4px; }
.hb.on { color: var(--hc); border-color: rgba(var(--hs), .7); background: rgba(var(--hs), .12); box-shadow: 0 6px 18px -4px rgba(var(--hs), .6); }
.hb.on svg { fill: rgba(var(--hs), .35); }
.hb.dim { opacity: .45; }
.hb:not(:disabled):hover { color: var(--hc); transform: translateY(-3px); border-color: rgba(var(--hs), .7); animation: honor-glow 2s ease-in-out infinite; }
.hb:focus-visible { outline: 2px solid var(--violet); outline-offset: 2px; }
.hb:disabled { cursor: default; }
.hb:disabled:not(.on) { opacity: .35; }
.hb.locked { opacity: .55; }
.hb.fx .ico { animation: honor-flip .7s cubic-bezier(.3, .9, .4, 1); }
.hb.fx::after { animation: honor-shine .8s .15s ease-out; }
.hb.fx .pt { animation: honor-burst .65s .32s cubic-bezier(.15, .7, .3, 1) both; }
.hb.k-crown.fx .pt { animation-duration: .85s; }
@keyframes honor-glow {
  0%, 100% { box-shadow: 0 10px 22px -6px rgba(var(--hs), .55); }
  50% { box-shadow: 0 14px 30px -4px rgba(var(--hs), .9); }
}
@keyframes honor-flip {
  0% { transform: perspective(200px) rotateY(0) scale(.8); }
  60% { transform: perspective(200px) rotateY(330deg) scale(1.2); }
  100% { transform: perspective(200px) rotateY(360deg) scale(1); }
}
@keyframes honor-shine {
  0% { opacity: 1; background-position: 120% 0; }
  100% { opacity: 1; background-position: -40% 0; }
}
@keyframes honor-burst {
  0% { opacity: 1; transform: rotate(var(--a)) translateY(0) scale(1); }
  100% { opacity: 0; transform: rotate(var(--a)) translateY(-32px) scale(.2); }
}
@media (prefers-reduced-motion: reduce) {
  .hb, .hb *, .hb::after { animation: none !important; transition: none !important; }
}

/* Mon compte : tes groupes */
.rr-dot { width: 8px; height: 8px; border-radius: 50%; background: var(--faint); }
.rr-dot.open { background: var(--honor-up); box-shadow: 0 0 10px rgba(74, 222, 128, .55); }
.ls-when { font-size: 11px; color: var(--muted); white-space: nowrap; }
.ls-when.open { color: var(--honor-up); }
.runs-pager { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-top: 12px; }
.runs-pager .note { margin: 0; }
.runs-pager .btn:disabled { opacity: .4; cursor: default; }


/* Détail raid : boss tué d'après Raider.IO sans log publié */
.rio-kill { color: var(--muted); font-size: 12px; border-bottom: 1px dotted var(--faint); cursor: help; }

/* Détail raid : difficulté affichée (flèches) et temps passé en vie sur un kill */
.detail h3:has(.diff-picker) { display: flex; align-items: center; gap: 8px; }
.detail h3 .diff-picker { display: inline-flex; margin: 0 0 0 auto; width: auto; flex: none; }
.detail h3 .diff-picker b { min-width: 64px; }
.alive { color: var(--muted); font-size: 12px; cursor: help; }
.alive.alive-mid { color: var(--v-limite); }
.alive.alive-low { color: var(--v-risque); }

/* ---------------- Backoffice : audience (analytics.js) ---------------- */
.au-top { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 18px; }
.au-livetag { display: inline-flex; align-items: center; gap: 7px; font-size: 12px; color: var(--muted); }
.au-livetag i { width: 7px; height: 7px; border-radius: 50%; background: #7fd6a2; box-shadow: 0 0 0 0 rgba(127, 214, 162, .5); animation: au-pulse 2s ease-out infinite; }
@keyframes au-pulse { 0% { box-shadow: 0 0 0 0 rgba(127, 214, 162, .5); } 70%, 100% { box-shadow: 0 0 0 7px rgba(127, 214, 162, 0); } }
@media (prefers-reduced-motion: reduce) { .au-livetag i { animation: none; } }
.au-periods { display: inline-flex; flex-wrap: wrap; margin: 0; border-radius: 20px; }
.au-periods a {
  font: 500 13px var(--body); color: var(--muted); text-decoration: none;
  padding: 6px 14px; border-radius: 999px; transition: color .15s, background .15s;
}
.au-periods a:hover { color: var(--text); }
.au-periods a[aria-checked="true"] { color: #fff; background: rgba(255, 255, 255, .1); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .14), 0 0 18px rgba(167, 139, 250, .25); }
.au-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 12px; margin-top: 12px; }
.au-grid.two { grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); }
.au-card { padding: 14px 16px; border-radius: 14px; background: rgba(255, 255, 255, .03); border: 1px solid var(--line); min-width: 0; }
.au-card h3 { font: 600 13px var(--display); margin: 0 0 10px; color: var(--text); }
.au-card .note { margin: -4px 0 10px; font-size: 12px; }
.au-live { max-width: 520px; margin-top: 10px; }

/* Barres verticales : une série, extrémité arrondie posée sur la ligne de base, 2 px d'écart */
.au-chart { --h: 140px; }
.au-bars { display: grid; gap: 2px; align-items: end; height: var(--h); border-bottom: 1px solid var(--line); }
.au-col { height: 100%; display: flex; align-items: flex-end; justify-content: center; cursor: default; border-radius: 4px 4px 0 0; }
.au-col:hover { background: rgba(255, 255, 255, .04); }
.au-bar { width: 100%; max-width: 28px; background: var(--violet); border-radius: 4px 4px 0 0; transition: background .15s; }
.au-col:hover .au-bar { background: var(--lavender); }
.au-axis { display: grid; gap: 2px; margin-top: 6px; }
.au-axis span { font-size: 10px; color: var(--faint); white-space: nowrap; overflow: visible; text-align: left; font-variant-numeric: tabular-nums; }

/* Répartitions : libellé, barre, nombre, part */
.au-shares { list-style: none; margin: 0; padding: 0; display: grid; gap: 7px; }
.au-shares li { display: grid; grid-template-columns: minmax(0, 1.4fr) minmax(40px, 1fr) 4.2em 3.2em; align-items: center; gap: 10px; font-size: 13px; }
.au-sl { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: var(--text); }
.au-sl .dim { font-size: 12px; }
.au-track { height: 8px; border-radius: 4px; background: rgba(255, 255, 255, .05); overflow: hidden; }
.au-track > span { display: block; height: 100%; min-width: 2px; background: var(--violet); border-radius: 4px; }
.au-n { font-variant-numeric: tabular-nums; text-align: right; color: var(--text); }
.au-p { font-variant-numeric: tabular-nums; text-align: right; color: var(--muted); font-size: 12px; }
.bo-section > .au-shares { max-width: 760px; }
.bo-section > .note + .au-shares { margin-top: 10px; }
.au-foot { margin-top: 28px; font-size: 12px; line-height: 1.6; }

/* Pages « Confidentialité » et « Conditions d'utilisation » (/confidentialite, /conditions) */
.footer-legal { display: flex; flex-wrap: wrap; justify-content: center; gap: 6px 18px; margin-top: 10px !important; }
.footer-legal a { color: var(--muted); text-underline-offset: 3px; }
.footer-legal a:hover { color: var(--text); }

.legal { max-width: 820px; margin: 0 auto; padding: 116px 16px 0; }
.legal-tabs {
  display: flex; width: fit-content; max-width: 100%; margin: 0 auto 18px; padding: 3px;
  border-radius: 999px; background: rgba(255, 255, 255, .03); border: 1px solid var(--line);
}
.legal-tabs a {
  padding: 7px 16px; border-radius: 999px; white-space: nowrap;
  font: 500 14px var(--body); color: var(--muted); text-decoration: none;
  transition: color .15s, background .15s;
}
.legal-tabs a:hover { color: var(--text); }
.legal-tabs a[aria-current="page"] {
  color: #fff; background: rgba(255, 255, 255, .1);
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .14), 0 0 18px rgba(167, 139, 250, .25);
}
.legal-tabs a:focus-visible { outline: 2px solid var(--violet); outline-offset: 2px; }
.legal-card { padding: 34px 34px 30px; }
.legal-title { font: 600 clamp(26px, 4vw, 34px)/1.15 var(--display); letter-spacing: -.02em; margin: 4px 0 6px; }
.card p.legal-date { font-size: 12px; color: var(--faint); margin: 0 0 18px; }
.card p.legal-lead { color: #c9c6d3; font-size: 15px; line-height: 1.65; margin: 0 0 20px; }
.legal-summary {
  list-style: none; margin: 0 0 22px; padding: 16px 18px; display: grid; gap: 8px;
  border-radius: 18px; border: 1px solid rgba(167, 139, 250, .22); background: rgba(124, 58, 237, .07);
  font-size: 14px; line-height: 1.55; color: var(--muted);
}
.legal-summary li { position: relative; padding-left: 22px; }
.legal-summary li::before {
  content: ""; position: absolute; left: 2px; top: .45em; width: 10px; height: 6px;
  border-left: 2px solid var(--violet); border-bottom: 2px solid var(--violet); transform: rotate(-45deg);
}
.legal b { color: var(--text); font-weight: 600; }
.legal-toc { display: flex; flex-wrap: wrap; gap: 6px; margin: 0 0 8px; }
.legal-toc a {
  font-size: 12px; color: var(--muted); text-decoration: none;
  padding: 4px 11px; border-radius: 999px; border: 1px solid var(--line); background: rgba(255, 255, 255, .02);
}
.legal-toc a:hover { color: var(--text); border-color: rgba(167, 139, 250, .35); }
.legal-sec { padding-top: 24px; margin-top: 24px; border-top: 1px solid var(--line); scroll-margin-top: 104px; }
.card .legal-sec h2 { font: 600 18px/1.3 var(--display); letter-spacing: -.01em; margin: 0 0 10px; }
.card .legal-sec p, .legal-sec li, .legal-data dd { color: var(--muted); font-size: 14px; line-height: 1.7; }
.card .legal-sec p + p { margin-top: 10px; }
.legal-sec ul { margin: 8px 0 0; padding-left: 20px; display: grid; gap: 6px; }
.legal-sec a:not(.btn) { color: var(--violet); text-underline-offset: 3px; }
.legal-sec a:not(.btn):hover { color: var(--lavender); }
.legal-data { margin: 4px 0 0; display: grid; gap: 10px; }
.legal-data > div { padding: 12px 14px; border-radius: 14px; border: 1px solid var(--line); background: rgba(255, 255, 255, .02); }
.legal-data dt { font: 600 14px var(--body); color: var(--text); margin-bottom: 4px; }
.legal-data dd { margin: 0; }
.legal-data dd.legal-keep { margin-top: 6px; font-size: 12px; color: var(--violet); }
.privacy-choice { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 16px; margin-top: 16px; }
.card .privacy-state { margin: 0; font-size: 14px; }
.card .privacy-state.on { color: #7fd6a2; }
.card .privacy-state.off { color: var(--muted); }
.legal-foot { padding-top: 34px; }
.auth-legal { margin: 14px 0 0; font-size: 12px; line-height: 1.55; color: var(--faint); text-align: center; }
.auth-legal a { color: var(--muted); text-underline-offset: 2px; }
.auth-legal a:hover { color: var(--text); }
@media (max-width: 600px) {
  .legal { padding-top: 96px; }
  .legal-card { padding: 24px 18px 22px; }
  .legal-tabs a { padding: 7px 12px; font-size: 13px; }
}

/* Visites une par une (onglet Audience) */
.au-timeline { list-style: none; margin: 0; padding: 0; display: grid; gap: 2px; }
.au-ev { display: grid; grid-template-columns: 5.5em 6.5em 1fr; align-items: baseline; gap: 12px; padding: 7px 10px; border-radius: 10px; font-size: 13px; }
.au-ev:nth-child(odd) { background: rgba(255, 255, 255, .02); }
.au-ev-t { font: 12px var(--mono); color: var(--faint); text-align: right; font-variant-numeric: tabular-nums; }
.au-ev-k { font-size: 11px; color: var(--muted); text-transform: uppercase; letter-spacing: .06em; }
.au-ev-w { color: var(--text); overflow-wrap: anywhere; }
.au-ev.k-page { background: rgba(167, 139, 250, .08); }
.au-ev.k-page .au-ev-k { color: var(--violet); }
.au-ev.k-action .au-ev-k { color: #7fd6a2; }
.au-ev.k-error .au-ev-k { color: var(--depleted); }
.au-ev.k-time .au-ev-w, .au-ev.k-scroll .au-ev-w { color: var(--muted); }
/* Une tuile peut porter un nom de domaine : il se coupe plutôt que de déborder */
.bo-tile b { overflow-wrap: anywhere; }
@media (max-width: 480px) { .au-ev { grid-template-columns: 4.4em 1fr; gap: 4px 10px; } .au-ev-k { grid-column: 2; } .au-ev-w { grid-column: 2; } }