/* Chiffres des titres. Le « 1 » de Hammersmith One se confond avec « I » :
   les chiffres 0-9 des titres viennent d'IBM Plex Sans SemiBold. */
@font-face {
  font-family: "Ninja Admin Digits"; font-weight: 400; font-style: normal; font-display: swap;
  src: url("fonts/IBMPlexSans-SemiBold.woff2") format("woff2");
  unicode-range: U+0030-0039;
}

/* Ninja Admin — interface components. Every value comes from tokens.css (both themes). */

:root {
  /* motion: short and quiet; the ninja does not show off */
  --na-dur-fast: 120ms;
  --na-dur: 200ms;
  --na-ease: cubic-bezier(.2, 0, 0, 1);
  /* titles: digits from IBM Plex Sans (see the @font-face above) */
  --font-display: "Ninja Admin Digits", "Hammersmith One", system-ui, sans-serif;
}
@media (prefers-reduced-motion: reduce) {
  :root { --na-dur-fast: 0ms; --na-dur: 0ms; }
}

.na-icon { width: 1.25em; height: 1.25em; flex: none; display: inline-block; vertical-align: -0.25em; }

/* ---------------------------------------------------------------- button */
.na-btn {
  font-family: var(--font-text); font-size: 15px; line-height: 20px; font-weight: 600;
  display: inline-flex; align-items: center; justify-content: center; gap: var(--space-2);
  min-height: 36px; padding: 6px 14px;
  border-radius: var(--radius-md); border: var(--border-hairline) solid transparent;
  background: var(--surface-raised); color: var(--ink); border-color: var(--border-strong);
  cursor: pointer; text-decoration: none; white-space: nowrap;
  transition: background var(--na-dur-fast) var(--na-ease), border-color var(--na-dur-fast) var(--na-ease), color var(--na-dur-fast) var(--na-ease);
}
.na-btn:hover { border-color: var(--ink-muted); }
.na-btn:focus-visible { outline: var(--border-control) solid var(--focus); outline-offset: 2px; }
.na-btn[disabled] { opacity: .45; cursor: not-allowed; }
.na-btn--primary { background: var(--accent); border-color: var(--accent); color: var(--on-mask); }
.na-btn--primary:hover { border-color: var(--on-mask); }
.na-btn--ghost { background: transparent; border-color: transparent; color: var(--ink-muted); }
.na-btn--ghost:hover { color: var(--ink); background: var(--surface-sunken); border-color: transparent; }
.na-btn--danger { background: transparent; border-color: var(--danger); color: var(--danger); }
.na-btn--danger:hover { background: var(--surface-sunken); }
.na-btn--sm { min-height: 30px; padding: 4px 10px; font-size: 13px; line-height: 20px; }
.na-btn--icon { padding: 0; width: 36px; }
.na-btn--sm.na-btn--icon { width: 30px; }

/* ---------------------------------------------------------------- field */
.na-field { display: grid; gap: var(--space-2); font-family: var(--font-text); }
.na-field__label { font-size: 13px; line-height: 20px; font-weight: 600; color: var(--ink); }
.na-field__hint { font-size: 13px; line-height: 20px; color: var(--ink-muted); }
.na-field__error { font-size: 13px; line-height: 20px; color: var(--danger); display: flex; gap: var(--space-1); align-items: center; }
.na-input {
  font-family: var(--font-text); font-size: 15px; line-height: 24px; color: var(--ink);
  background: var(--surface-sunken); border: var(--border-hairline) solid var(--border-strong);
  border-radius: var(--radius-md); padding: var(--space-2) var(--space-3); width: 100%; box-sizing: border-box;
  transition: border-color var(--na-dur-fast) var(--na-ease);
}
.na-input::placeholder { color: var(--ink-muted); }
.na-input:focus { outline: var(--border-control) solid var(--focus); outline-offset: 1px; }
.na-input[aria-invalid="true"] { border-color: var(--danger); }
textarea.na-input { min-height: 120px; resize: vertical; }
.na-input--code { font-family: var(--font-code); font-size: 14px; }
.na-search { position: relative; display: flex; align-items: center; }
.na-search .na-icon { position: absolute; left: var(--space-3); color: var(--ink-muted); pointer-events: none; }
.na-search .na-input { padding-left: 40px; padding-right: 44px; }
.na-search kbd {
  position: absolute; right: var(--space-2); font-family: var(--font-code); font-size: 12px; line-height: 18px;
  color: var(--ink-muted); border: var(--border-hairline) solid var(--border); border-radius: var(--radius-sm); padding: 0 6px;
}

/* ---------------------------------------------------------------- tag */
.na-tag {
  font-family: var(--font-text); font-size: 12px; line-height: 16px; font-weight: 600; letter-spacing: .08em; text-transform: uppercase;
  display: inline-flex; align-items: center; gap: var(--space-1);
  padding: 4px 10px; border-radius: var(--radius-full);
  background: var(--surface-sunken); color: var(--ink-muted); border: var(--border-hairline) solid var(--border);
  text-decoration: none; white-space: nowrap;
}
a.na-tag:hover { color: var(--ink); border-color: var(--border-strong); }
.na-tag--lang { color: var(--ink); }
.na-tags { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-2); }

/* ---------------------------------------------------------------- tabs */
.na-tabs { display: flex; gap: var(--space-5); border-bottom: var(--border-hairline) solid var(--border); font-family: var(--font-text); }
.na-tab {
  font: inherit; font-size: 15px; line-height: 24px; font-weight: 600; color: var(--ink-muted);
  background: none; border: 0; padding: var(--space-3) 0; margin-bottom: -1px; cursor: pointer;
  border-bottom: var(--border-control) solid transparent; display: inline-flex; gap: var(--space-2); align-items: center;
}
.na-tab:hover { color: var(--ink); }
.na-tab[aria-selected="true"] { color: var(--ink); border-bottom-color: var(--accent); }
.na-tab:focus-visible { outline: var(--border-control) solid var(--focus); outline-offset: 2px; border-radius: var(--radius-sm); }
.na-tab__count { font-size: 12px; color: var(--ink-muted); font-weight: 400; }

/* ---------------------------------------------------------------- header */
.na-header {
  display: flex; align-items: center; gap: var(--space-5); height: var(--header-height, 64px); padding: 0 var(--space-5);
  background: var(--surface); border-bottom: var(--border-hairline) solid var(--border); font-family: var(--font-text);
}
.na-header__logo { display: inline-flex; line-height: 0; }
.na-header__logo svg { height: 32px; width: auto; }
.na-header__nav { display: flex; gap: var(--space-4); }
.na-header__nav a { color: var(--ink-muted); text-decoration: none; font-size: 15px; font-weight: 600; }
.na-header__nav a:hover, .na-header__nav a[aria-current="page"] { color: var(--ink); }
.na-header__search { flex: 1; max-width: 420px; margin-left: auto; }
.na-header__actions { display: flex; align-items: center; gap: var(--space-2); }
.na-header__me { display: inline-flex; line-height: 0; border-radius: var(--radius-full); }
.na-header__me:focus-visible { outline: var(--border-control) solid var(--focus); outline-offset: 2px; }
@media (max-width: 960px) { .na-header__nav, .na-header__search { display: none; } }

/* ---------------------------------------------------------------- toast */
.na-toast {
  display: inline-flex; align-items: center; gap: var(--space-2); font-family: var(--font-text); font-size: 15px; line-height: 20px;
  background: var(--ink); color: var(--ink-inverse); padding: var(--space-3) var(--space-4); border-radius: var(--radius-md);
  box-shadow: var(--shadow-overlay);
}
.na-toast--float { position: fixed; bottom: var(--space-5); left: 50%; transform: translate(-50%, 8px); opacity: 0;
  transition: opacity var(--na-dur) var(--na-ease), transform var(--na-dur) var(--na-ease); z-index: 50; pointer-events: none; }
.na-toast--float.is-on { opacity: 1; transform: translate(-50%, 0); }

/* ---------------------------------------------------------------- code block */
.na-code { background: var(--code-ground); border-radius: var(--radius-md); overflow: hidden; font-family: var(--font-code); color: var(--code-ink); }
.na-code__bar {
  display: flex; align-items: center; gap: var(--space-3); padding: var(--space-2) var(--space-2) var(--space-2) var(--space-4);
  border-bottom: var(--border-hairline) solid var(--code-border, #3a3a37); font-family: var(--font-text);
}
.na-code__lang { font-size: 12px; line-height: 16px; font-weight: 600; letter-spacing: .08em; text-transform: uppercase; color: var(--syntax-keyword); }
.na-code__file { font-family: var(--font-code); font-size: 13px; color: var(--code-comment); }
.na-code__copy {
  margin-left: auto; font-family: var(--font-text); font-size: 13px; font-weight: 600; line-height: 20px;
  display: inline-flex; gap: var(--space-1); align-items: center; cursor: pointer;
  color: var(--code-ink); background: transparent; border: var(--border-hairline) solid var(--code-border, #3a3a37); border-radius: var(--radius-md); padding: 4px 10px;
}
.na-code__copy:hover { border-color: var(--code-comment); }
.na-code__copy:focus-visible { outline: var(--border-control) solid var(--mask-gold); outline-offset: 2px; }
.na-code__copy.is-done { color: var(--syntax-string); border-color: var(--syntax-string); }
.na-code__body { position: relative; }
.na-code pre { margin: 0; padding: var(--space-3) var(--space-4); overflow-x: auto; font-size: 14px; line-height: 22px; tab-size: 2; }
.na-code code { font-family: inherit; }
.na-code .ln { display: block; padding-left: 3.2em; position: relative; }
.na-code .ln::before { content: attr(data-n); position: absolute; left: 0; width: 2.2em; text-align: right; color: var(--code-comment); opacity: .7; user-select: none; }
.na-code--compact pre { font-size: 13px; line-height: 20px; padding: var(--space-3); }
.na-code.is-collapsed .na-code__body { max-height: 240px; overflow: hidden; }
.na-code.is-collapsed .na-code__body::after { content: ""; position: absolute; inset: auto 0 0 0; height: 72px; background: linear-gradient(transparent, var(--code-ground)); pointer-events: none; }
.na-code__more {
  display: block; width: 100%; font-family: var(--font-text); font-size: 13px; font-weight: 600; line-height: 20px; cursor: pointer;
  color: var(--code-ink); background: var(--code-raised, #1a1a19); border: 0; border-top: var(--border-hairline) solid var(--code-border, #3a3a37); padding: var(--space-2);
}
.na-code__more:focus-visible { outline: var(--border-control) solid var(--mask-gold); outline-offset: -2px; }
.tk-k { color: var(--syntax-keyword); } .tk-s { color: var(--syntax-string); } .tk-n { color: var(--syntax-number); }
.tk-f { color: var(--syntax-function); } .tk-v { color: var(--syntax-variable); } .tk-t { color: var(--syntax-type); }
.tk-c { color: var(--code-comment); font-style: italic; }

/* ---------------------------------------------------------------- quality signals */
.na-signals { display: flex; flex-wrap: wrap; gap: var(--space-2) var(--space-4); margin: 0; padding: 0; list-style: none; font-family: var(--font-text); font-size: 13px; line-height: 20px; color: var(--ink-muted); }
.na-signal { display: inline-flex; align-items: center; gap: 6px; }
.na-signal > span:not(.na-icon) { min-width: 0; }
.na-signal .na-icon { width: 16px; height: 16px; }
.na-signal--ok .na-icon { color: var(--success); }
.na-signal--warn .na-icon { color: var(--warning); }
.na-signal--fail .na-icon { color: var(--danger); }
.na-signal--fail { color: var(--danger); }
.na-signal strong { color: var(--ink); font-weight: 600; }

/* ---------------------------------------------------------------- vote */
.na-vote { display: inline-grid; justify-items: center; gap: 2px; font-family: var(--font-text); }
.na-vote__btn {
  width: 40px; height: 40px; display: grid; place-items: center; cursor: pointer;
  border-radius: var(--radius-md); border: var(--border-hairline) solid var(--border-strong); background: var(--surface-raised); color: var(--ink-muted);
  transition: background var(--na-dur-fast) var(--na-ease), color var(--na-dur-fast) var(--na-ease);
}
.na-vote__btn:hover { color: var(--ink); border-color: var(--ink-muted); }
.na-vote__btn:focus-visible { outline: var(--border-control) solid var(--focus); outline-offset: 2px; }
.na-vote__btn[aria-pressed="true"] { background: var(--accent); border-color: var(--accent); color: var(--on-mask); }
.na-vote__count { font-size: 15px; line-height: 20px; font-weight: 600; color: var(--ink); }
.na-vote__label { font-size: 12px; line-height: 16px; color: var(--ink-muted); }
.na-vote--inline { display: inline-flex; align-items: center; gap: var(--space-2); }
.na-vote--inline .na-vote__btn { width: 32px; height: 32px; }
.na-vote--inline .na-vote__count { color: var(--ink); }
.na-vote--inline.is-on .na-vote__count { color: var(--accent-text); }

/* ---------------------------------------------------------------- rank */
.na-rank {
  display: inline-flex; align-items: center; gap: 6px; font-family: var(--font-text);
  font-size: 12px; line-height: 16px; font-weight: 600; letter-spacing: .08em; text-transform: uppercase;
  padding: 3px 10px 3px 8px; border-radius: var(--radius-full); white-space: nowrap;
}
.na-rank__pips { display: inline-flex; gap: 3px; }
.na-rank__pips i { width: 6px; height: 6px; transform: rotate(45deg); background: currentColor; display: block; border-radius: 1px; }
.na-rank--genin { color: var(--ink-muted); border: var(--border-hairline) solid var(--border-strong); }
.na-rank--chunin { color: var(--accent-text); border: var(--border-hairline) solid var(--accent-text); }
.na-rank--jonin { color: var(--on-mask); background: var(--accent); box-shadow: 0 0 0 2px var(--avatar-line); }

/* ---------------------------------------------------------------- person (avatar + name + rank) */
.na-person { display: inline-flex; align-items: center; gap: var(--space-2); font-family: var(--font-text); font-size: 15px; line-height: 20px; }
.na-person__avatar { line-height: 0; flex: none; }
.na-person__name { color: var(--ink); font-weight: 600; text-decoration: none; }
a.na-person__name { display: inline-flex; align-items: center; min-height: 24px; } /* cible d’au moins 24 px (WCAG 2.2, 2.5.8) */
a.na-person__name:hover { text-decoration: underline; }
.na-person__meta { color: var(--ink-muted); font-size: 13px; }

/* ---------------------------------------------------------------- script card */
.na-script {
  display: grid; gap: var(--space-4); padding: var(--space-5); font-family: var(--font-text);
  background: var(--surface-raised); border: var(--border-hairline) solid var(--border); border-radius: var(--radius-lg); box-shadow: var(--shadow-raised);
}
.na-script__head { display: grid; grid-template-columns: 1fr auto; gap: var(--space-2) var(--space-4); align-items: start; }
.na-script__title { margin: 0; font-family: var(--font-display); font-weight: 400; font-size: 19px; line-height: 24px; }
.na-script__title a { color: var(--ink); text-decoration: none; }
.na-script__title a:hover { color: var(--accent-text); }
.na-script__desc { margin: 0; font-size: 15px; line-height: 24px; color: var(--ink-muted); }
.na-script__by { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-2) var(--space-3); }
.na-script__foot { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--space-3); padding-top: var(--space-4); border-top: var(--border-hairline) solid var(--border); }
.na-script__actions { display: flex; align-items: center; gap: var(--space-2); }
.na-script--featured { box-shadow: 0 0 0 3px var(--avatar-line), var(--shadow-raised); border-color: transparent; }

/* ---------------------------------------------------------------- article card */
.na-article-card {
  display: grid; gap: var(--space-3); padding: var(--space-5); font-family: var(--font-text);
  background: var(--surface-raised); border: var(--border-hairline) solid var(--border); border-radius: var(--radius-lg);
}
.na-article-card__kicker { display: flex; gap: var(--space-2); align-items: center; }
.na-article-card__title { margin: 0; font-family: var(--font-display); font-weight: 400; font-size: 24px; line-height: 30px; }
.na-article-card__title a { color: var(--ink); text-decoration: none; }
.na-article-card__title a:hover { color: var(--accent-text); }
.na-article-card__excerpt { margin: 0; font-size: 15px; line-height: 24px; color: var(--ink-muted); }
.na-article-card__meta { display: flex; align-items: center; gap: var(--space-3); flex-wrap: wrap; }

/* ---------------------------------------------------------------- article page (prose) */
.na-prose { max-width: var(--content-max, 720px); font-family: var(--font-text); font-size: 17px; line-height: 28px; color: var(--ink); }
.na-prose > * + * { margin-top: var(--space-4); }
.na-prose h1 { font-family: var(--font-display); font-weight: 400; font-size: 32px; line-height: 38px; margin: 0; }
.na-prose .na-lead { font-size: 19px; line-height: 30px; color: var(--ink-muted); }
.na-prose h2 { font-family: var(--font-display); font-weight: 400; font-size: 24px; line-height: 30px; margin-top: var(--space-7); }
.na-prose h3 { font-family: var(--font-display); font-weight: 400; font-size: 19px; line-height: 24px; margin-top: var(--space-6); }
.na-prose p { margin-bottom: 0; }
.na-prose a { color: var(--accent-text); text-decoration: underline; text-underline-offset: 3px; }
.na-prose a:focus-visible { outline: var(--border-control) solid var(--focus); outline-offset: 2px; border-radius: 2px; }
.na-prose :not(pre) > code {
  font-family: var(--font-code); font-size: .92em; background: var(--surface-sunken); border: var(--border-hairline) solid var(--border);
  border-radius: var(--radius-sm); padding: 1px 5px;
}
.na-prose ul, .na-prose ol { padding-left: 1.4em; }
.na-prose li + li { margin-top: var(--space-2); }
.na-prose li::marker { color: var(--ink-muted); }
.na-prose blockquote {
  margin-left: 0; margin-right: 0; padding: var(--space-4) 0; color: var(--ink-muted); font-size: 19px; line-height: 30px;
  border-top: var(--border-hairline) solid var(--border); border-bottom: var(--border-hairline) solid var(--border);
}
.na-prose hr { border: 0; border-top: var(--border-hairline) solid var(--border); margin: var(--space-6) 0; }

/* ---------------------------------------------------------------- callout */
.na-callout {
  display: grid; grid-template-columns: auto 1fr; gap: var(--space-1) var(--space-3); padding: var(--space-4);
  border-radius: var(--radius-md); background: var(--surface-sunken); border: var(--border-hairline) solid var(--border-strong);
  font-family: var(--font-text); font-size: 15px; line-height: 24px; color: var(--ink);
}
.na-callout > .na-icon, .na-callout__icon { grid-row: span 2; margin-top: 2px; line-height: 0; display: inline-flex; }
.na-callout > .na-icon, .na-callout__icon svg { width: 20px; height: 20px; }
.na-callout__title { font-weight: 600; }
.na-callout__body { color: var(--ink-muted); }
.na-callout--info { border-color: var(--info); } .na-callout--info > .na-icon, .na-callout--info .na-callout__icon { color: var(--info); }
.na-callout--warn { border-color: var(--warning); } .na-callout--warn > .na-icon, .na-callout--warn .na-callout__icon { color: var(--warning); }
.na-callout--danger { border-color: var(--danger); } .na-callout--danger > .na-icon, .na-callout--danger .na-callout__icon { color: var(--danger); }
.na-callout--ok { border-color: var(--success); } .na-callout--ok > .na-icon, .na-callout--ok .na-callout__icon { color: var(--success); }

/* ---------------------------------------------------------------- empty state */
.na-empty { display: grid; justify-items: center; text-align: center; gap: var(--space-3); padding: var(--space-7) var(--space-5); font-family: var(--font-text); }
.na-empty__art { line-height: 0; margin-bottom: var(--space-2); }
.na-empty__title { margin: 0; font-family: var(--font-display); font-weight: 400; font-size: 24px; line-height: 30px; color: var(--ink); }
.na-empty__text { margin: 0; max-width: 420px; font-size: 15px; line-height: 24px; color: var(--ink-muted); }
.na-empty__actions { display: flex; gap: var(--space-2); margin-top: var(--space-2); flex-wrap: wrap; justify-content: center; }

/* ---------------------------------------------------------------- layout */
.na-page { max-width: var(--container-max, 1200px); margin: 0 auto; padding: 0 var(--space-5); }
.na-page--narrow { max-width: var(--content-max, 720px); }
.na-stack { display: grid; gap: var(--space-4); }
.na-grid { display: grid; gap: var(--space-4); grid-template-columns: repeat(auto-fill, minmax(var(--card-min, 340px), 1fr)); }
.na-with-sidebar { display: grid; gap: var(--space-6); grid-template-columns: minmax(0, 1fr) var(--sidebar, 280px); }
@media (max-width: 960px) { .na-with-sidebar { grid-template-columns: 1fr; } }
@media (max-width: 640px) { .na-page { padding: 0 var(--space-4); } .na-grid { grid-template-columns: 1fr; } }


/* ================================================================
   Ajouts du frontend Ninja Admin (nov. 2026)
   Composants et règles créés pendant le développement, faute de
   maquette ou pour remplacer les styles en ligne des planches.
   Les noms de classes sont ceux du code livré (frontend/assets/css).
   ================================================================ */

/* ---------------------------------------------------------------- accessibilité */
[hidden] { display: none !important; }
.sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0; }
[tabindex="-1"]:focus:not(:focus-visible) { outline: none; }
/* élément non interactif focalisé par programme (titre, région, message annoncé) : jamais de contour ; les contrôles gardent le leur en :focus-visible */
[tabindex="-1"]:not(a):not(button):not(input):not(select):not(textarea):not(summary):not([role=tab]):not([role=menuitem]):not([role=menuitemradio]):not([role=option]):not([role=radio]):not([role=button]):not([role=link]):focus { outline: none; }
/* commande d'écriture indisponible (lecture seule) : reste focalisable, raison annoncée par aria-describedby */
[data-write][aria-disabled="true"] { opacity: .5; cursor: not-allowed; }

/* ---------------------------------------------------------------- boutons : variantes de formulaire */
.na-btn--block { min-height: 40px; width: 100%; box-sizing: border-box; justify-content: center; }
.na-btn--tall { min-height: 40px; }

/* ---------------------------------------------------------------- socle partagé (repris de site.css) */
.hint { margin: 0; font-size: 13px; line-height: 20px; color: var(--ink-muted); }
.eyebrow { margin: 0; font: 600 12px/16px var(--font-text); letter-spacing: .08em; text-transform: uppercase; color: var(--ink-muted); }
.panel { display: grid; gap: 12px; align-content: start; padding: 20px; border-radius: 12px; background: var(--surface-raised); border: 1px solid var(--border); }
.panel--flush { padding: 0; gap: 0; }
.tblwrap { overflow-x: auto; border: 1px solid var(--border); border-radius: 12px; background: var(--surface-raised); }
.pill { display: inline-flex; align-items: center; gap: 6px; min-height: 24px; padding: 0 10px; border-radius: 999px; border: 1px solid var(--border-strong); font: 600 12px/18px var(--font-text); color: var(--ink-muted); white-space: nowrap; }
.pill--ok { color: var(--success); border-color: currentColor; }
.pill--warn { color: var(--warning); border-color: currentColor; }
.pill--danger { color: var(--danger); border-color: currentColor; }
.pill--info { color: var(--info); border-color: currentColor; }
.pill--accent { color: var(--accent-text); border-color: currentColor; }
.pill--solid { background: var(--ink); color: var(--ink-inverse); border-color: var(--ink); }
.rating { display: inline-flex; align-items: center; gap: 4px; font-size: 13px; line-height: 20px; color: var(--ink-muted); white-space: nowrap; }
.rating b { color: var(--ink); font-weight: 600; }
.rating .star { color: var(--star); }
.rating--none { font-style: normal; }
.token { display: inline-flex; align-items: center; gap: 4px; height: 28px; padding: 0 4px 0 10px; border-radius: 999px; background: var(--ink); color: var(--ink-inverse); font: 600 13px/20px var(--font-text); }
.token button { display: grid; place-items: center; width: 22px; height: 22px; border: 0; border-radius: 999px; background: transparent; color: inherit; cursor: pointer; padding: 0; }
@keyframes na-pulse { 0%, 100% { opacity: .55; } 50% { opacity: 1; } }
.skel { display: block; border-radius: 6px; background: var(--surface-sunken); animation: na-pulse 1.4s ease-in-out infinite; }
.spin { display: inline-flex; animation: na-spin 1s linear infinite; }
@keyframes na-spin { to { transform: rotate(360deg); } }
@media (prefers-reduced-motion: reduce) { .skel, .spin { animation: none; } }
.more-bar { display: grid; justify-items: center; gap: 8px; }
.more-bar p { margin: 0; font-size: 13px; color: var(--ink-muted); }

/* ---------------------------------------------------------------- LoadingStates */
/* États de chargement : squelettes, erreur réseau, « Charger plus » (planches LoadingStates, ScriptCard, ArticleCard). */
.sk-rows{display:grid}
.sk-row{display:grid;grid-template-columns:32px minmax(0,1fr) 90px;gap:12px 16px;align-items:center;padding:14px 16px;border-bottom:1px solid var(--border)}
.sk-row:last-child{border-bottom:0}
.sk-tbl{width:100%;border-collapse:collapse}
.sk-tbl th{text-align:left;font:600 12px/16px var(--font-text);letter-spacing:.06em;text-transform:uppercase;color:var(--ink-muted);padding:12px;border-bottom:1px solid var(--border);white-space:nowrap}
.sk-tbl td{padding:14px 12px;border-bottom:1px solid var(--border)}
.sk-tbl tr:last-child td{border-bottom:0}
.sk-tbl .num{text-align:right}
.sk-tbl .num .skel{margin-left:auto}
.ls-err{display:grid;justify-items:center;text-align:center;gap:12px;padding:40px 20px;border:1px solid var(--border);border-radius:12px;background:var(--surface-raised)}
.ls-err__ic{display:grid;place-items:center;width:48px;height:48px;border-radius:999px;background:var(--surface-sunken);color:var(--danger)}
.ls-err h3{margin:0;font:400 21px/27px var(--font-display)}
.ls-err p{margin:0;max-width:440px;font-size:15px;line-height:24px;color:var(--ink-muted)}
.ls-err code{font-size:12px;color:var(--ink-muted)}
.more-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(240px,100%),1fr));gap:16px}
.more-cell{display:grid;gap:8px;padding:20px 16px;border:1px dashed var(--border-strong);border-radius:12px}
.more-cell>b{font-size:13px;color:var(--ink-muted);font-weight:600}
@media (prefers-reduced-motion:reduce){.spin{animation:none}}
@media (max-width:640px){.sk-tbl .c-hide{display:none}.sk-row{grid-template-columns:32px minmax(0,1fr)}.sk-row>:last-child{display:none}}
/* squelettes (styles en ligne des planches) */
.sk-card-tags{display:flex;gap:8px}
.sk-card-head{display:grid;gap:10px}
.sk-card-lines{display:grid;gap:8px}
.sk-card-by{display:flex;gap:10px;align-items:center}
.sk-pill{height:24px;border-radius:999px}
.sk-w88{width:88px}.sk-w64{width:64px}.sk-w72{width:72px}.sk-w96{width:96px}.sk-w120{width:120px}.sk-w140{width:140px}.sk-w160{width:160px}
.sk-w100p{width:100%}.sk-w92p{width:92%}.sk-w84p{width:84%}.sk-w80p{width:80%}.sk-w70p{width:70%}.sk-w60p{width:60%}
.sk-h22{height:22px}.sk-h20{height:20px}.sk-h14{height:14px}
.sk-av{width:32px;height:32px;border-radius:999px;flex:none}
.sk-btn{width:96px;height:32px;border-radius:8px}
.sk-cover{aspect-ratio:40/21;width:100%;border-radius:8px}
.sk-row__text{display:grid;gap:8px}
.sk-row__av{width:32px;height:32px;border-radius:999px}
.sk-row__end{width:72px;height:14px;justify-self:end}
.sk-h12{height:12px}.sk-h16{height:16px}.sk-h18{height:18px}
.sk-member{display:flex;gap:12px;align-items:center}
.sk-member__text{display:grid;gap:6px;flex:1}
.sk-av36{width:36px;height:36px;border-radius:999px;flex:none}
.ls-err .spin{display:inline-flex}
.sk-w40p{width:40%}

/* ---------------------------------------------------------------- ReadOnlyBanner */
/* Bandeau lecture seule (planches ReadOnlyBanner, ReadOnlyDemo). */
.rob{background:var(--surface-raised);border-bottom:1px solid var(--warning);box-shadow:inset 4px 0 0 var(--warning);color:var(--ink);font-family:var(--font-text)}
.rob__in{max-width:1200px;margin:0 auto;padding:10px 24px;box-sizing:border-box;display:flex;flex-wrap:wrap;align-items:center;gap:4px 12px;font-size:14px;line-height:22px}
.rob__ic{display:inline-flex;flex:none;color:var(--warning)}
.rob__txt{margin:0;flex:1 1 420px;min-width:0}
.rob__txt strong{font-weight:600}
.rob__txt>span{color:var(--ink-muted)}
.rob a{white-space:nowrap;font-weight:600}
@media (max-width:640px){.rob__in{padding:10px 16px;align-items:flex-start}.rob__txt{flex-basis:calc(100% - 32px)}.rob a{margin-left:32px}}

/* ---------------------------------------------------------------- PasswordField */
/* Champ mot de passe et case à cocher des formulaires de compte (planches Signup, ForgotPassword, Settings). */
.pw-wrap{position:relative;display:flex;align-items:center}
.pw-wrap .na-input{padding-right:48px}
.pw-wrap .na-btn{position:absolute;right:4px}
.pw-wrap~.meter{display:grid;grid-template-columns:repeat(4,1fr);gap:4px}
.pw-wrap~.meter i{height:4px;border-radius:2px;background:var(--border)}
.pw-wrap~.meter i.on{background:var(--accent)}
.check{display:flex;gap:10px;align-items:flex-start;font-size:13px;line-height:20px;color:var(--ink-muted)}
.check input{width:18px;height:18px;margin:1px 0 0;flex:none}

/* ---------------------------------------------------------------- TagInput */
/* Champ de tags (planche TagInput) : jetons .token du socle, suggestions, création. */
.tagf{min-width:0}
.tagf>.hint{margin:0}
.tagbox{position:relative}
.tag-in{display:flex;flex-wrap:wrap;align-items:center;gap:6px;min-height:42px;padding:6px 8px;border:1px solid var(--border-strong);border-radius:8px;background:var(--surface-sunken);box-sizing:border-box;cursor:text}
[data-theme="light"] .tag-in{background:var(--surface)}
.tag-in:focus-within{outline:2px solid var(--focus);outline-offset:1px}
.tag-in:has([aria-invalid="true"]),.tagf:has(.na-field__error) .tag-in{border-color:var(--danger)}
.tag-in__tokens{display:contents}
.tag-in input{flex:1 1 120px;min-width:120px;border:0;background:transparent;color:var(--ink);font:15px/24px var(--font-text);padding:2px;outline:none}
.tag-in input::placeholder{color:var(--ink-muted)}
.token button:hover{background:color-mix(in srgb,var(--ink-muted) 30%,transparent)}
.drop-list{position:absolute;left:0;right:0;top:calc(100% + 4px);z-index:10;display:grid;padding:4px;border-radius:10px;background:var(--surface-raised);border:1px solid var(--border-strong);box-shadow:var(--shadow-overlay)}
.drop-list[hidden]{display:none}
.drop-list button{display:flex;align-items:center;justify-content:space-between;gap:12px;min-height:40px;padding:0 10px;border:0;border-radius:6px;background:none;color:var(--ink);font:14px/20px var(--font-text);cursor:pointer;text-align:left}
.drop-list button:hover,.drop-list button.is-active{background:var(--surface-sunken)}
.drop-list small{font-size:12px;color:var(--ink-muted);white-space:nowrap}
.drop-list .is-new span{color:var(--accent-text);font-weight:600}

/* ---------------------------------------------------------------- DiffView */
/* Différences de code (planches DiffView et DiffStates, E-133 et E-134) */
.dv{display:grid;gap:16px;color:var(--ink);font-family:var(--font-text)}
.dv-file{border:1px solid var(--border);border-radius:12px;overflow:hidden;background:var(--surface-raised)}
.dv-head{display:flex;flex-wrap:wrap;align-items:center;gap:6px 10px;padding:8px 12px;border-bottom:1px solid var(--border);background:var(--surface-sunken);min-width:0}
.dv-head>button{display:inline-flex;align-items:center;justify-content:center;width:28px;height:28px;border:0;border-radius:6px;background:none;color:var(--ink-muted);cursor:pointer;flex:none}
.dv-head>button:hover{background:var(--surface-raised);color:var(--ink)}
.dv-path{flex:1 1 200px;min-width:0;font:600 13px/20px var(--font-code);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.dv-path s{color:var(--ink-muted);text-decoration:none}
.dv-add{font:600 13px/20px var(--font-code);color:var(--diff-add-ink)}
.dv-del{font:600 13px/20px var(--font-code);color:var(--diff-del-ink)}
.dv-n{display:inline-flex;gap:8px;white-space:nowrap}
.dv-bar{display:inline-flex;gap:2px}
.dv-bar i{width:8px;height:8px;border-radius:2px;background:var(--border)}
.dv-bar i.a{background:var(--diff-add-ink)}
.dv-bar i.d{background:var(--diff-del-ink)}
.dv-body{overflow-x:auto;background:var(--code-ground)}
.dv-t{width:100%;border-collapse:collapse;font:13px/20px var(--font-code);color:var(--code-ink)}
.dv-t td{padding:0 10px;white-space:pre;vertical-align:top}
.dv-t td.no,.dv-t td.one{width:1%;text-align:right;color:var(--code-comment);user-select:none}
.dv-t td.one{display:none}
.dv-t td.sg{width:1%;padding:0 4px;user-select:none}
.dv-t tr.add td{background:var(--diff-add)}
.dv-t tr.add td.sg{color:var(--diff-add-ink)}
.dv-t tr.del td{background:var(--diff-del)}
.dv-t tr.del td.sg{color:var(--diff-del-ink)}
.dv-t tr.hunk td{background:var(--diff-hunk);color:var(--diff-hunk-ink);padding-top:4px;padding-bottom:4px}
.dv-note{display:flex;flex-wrap:wrap;align-items:center;gap:8px 12px;padding:16px;font-size:14px;line-height:22px;color:var(--ink-muted)}
.dv-state{display:grid;justify-items:center;gap:10px;padding:32px 16px;text-align:center;border:1px dashed var(--border-strong);border-radius:12px;font-size:15px;line-height:24px;color:var(--ink-muted)}
.dv-state strong{color:var(--ink)}
.dv-state--err{border-style:solid;border-color:var(--danger)}
.dv-skel{display:grid;gap:8px;padding:16px}
.dv-wait{display:flex;align-items:center;gap:8px}
@media (max-width:640px){
  .dv-bar{display:none}
  .dv-t td.no{display:none}
  .dv-t td.one{display:table-cell}
}

/* ---------------------------------------------------------------- MissionCard */
/* Carte de mission (planche MissionCard). */
/* Carte de mission : liste des missions (Missions) et aperçu de publication (MissionNew). */
.mcw{display:grid;gap:8px;min-width:0;container-type:inline-size}
.mcard{position:relative;display:grid;gap:12px;padding:20px;border-radius:12px;background:var(--surface-raised);border:1px solid var(--border);color:var(--ink);min-width:0;text-align:left}
.mcard:hover{border-color:var(--border-strong)}
.mcard:focus-within{outline:2px solid var(--focus);outline-offset:2px}
.mcard--mine{box-shadow:inset 3px 0 0 var(--accent)}
.mcard--muted .mc-title,.mcard--muted .mc-sum{color:var(--ink-muted)}
.mc-top{display:flex;flex-wrap:wrap;align-items:center;gap:6px 8px;min-width:0}
.mtype{display:inline-flex;align-items:center;gap:6px;font:600 13px/20px var(--font-text);color:var(--ink)}
.mtype>span{display:inline-flex;color:var(--ink-muted)}
.mc-posted{margin-left:auto;font-size:13px;line-height:20px;color:var(--ink-muted);white-space:nowrap}
.mc-title{margin:0;font:600 18px/26px var(--font-text);overflow-wrap:anywhere;text-wrap:pretty}
.mc-title a,.mc-title span{color:var(--ink);text-decoration:none}
.mc-title a::after{content:"";position:absolute;inset:0;border-radius:12px}
.mc-title a:focus{outline:none}
.mcard:hover .mc-title a{color:var(--accent-text)}
.mc-sum{margin:0;font-size:15px;line-height:23px;color:var(--ink-muted);display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.mc-notag{margin:0;font-size:13px;line-height:20px;color:var(--ink-muted)}
.mc-facts{display:grid;grid-template-columns:repeat(auto-fit,minmax(118px,1fr));gap:10px 16px;margin:0;padding:12px 0;border-top:1px solid var(--border);border-bottom:1px solid var(--border)}
.mc-facts div{min-width:0}
.mc-facts dt{font:600 11px/16px var(--font-text);letter-spacing:.06em;text-transform:uppercase;color:var(--ink-muted)}
.mc-facts dd{margin:2px 0 0;font:600 14px/20px var(--font-text);color:var(--ink)}
.mc-facts dd.is-empty{font-weight:400;color:var(--ink-muted)}
/* pied : demandeur à gauche, compteur ou intervenant à droite, sur une grille stable */
.mc-foot{display:grid;grid-template-columns:minmax(0,1fr) auto;align-items:center;gap:8px 16px}
.req{display:grid;grid-template-columns:28px minmax(0,1fr);gap:0 10px;align-items:center;min-width:0}
.req__av{grid-row:span 2;line-height:0}
.req__line{display:flex;flex-wrap:wrap;align-items:center;gap:2px 8px;min-width:0;font-size:13px;line-height:20px;color:var(--ink-muted)}
.req__name{position:relative;z-index:1;font:600 14px/20px var(--font-text);color:var(--ink);text-decoration:none}
.req__name:hover{text-decoration:underline}
.mc-side{display:inline-flex;align-items:center;gap:6px;font:600 13px/20px var(--font-text);color:var(--ink);white-space:nowrap;justify-self:end}
.mc-side>span:first-child{display:inline-flex;color:var(--ink-muted)}
.mc-side--muted{color:var(--ink-muted);font-weight:400}
@container (max-width:480px){
  .mcard{padding:16px}
  .mc-title{font-size:17px;line-height:24px}
  .mc-foot{grid-template-columns:minmax(0,1fr)}
  .mc-side{justify-self:start}
  .mc-facts{grid-template-columns:repeat(2,minmax(0,1fr))}
}
@media (max-width:640px){
    .mcard{padding:16px}
  .mc-title{font-size:17px;line-height:24px}
  .mc-foot{grid-template-columns:minmax(0,1fr)}
  .mc-side{justify-self:start}
}

.mskel{display:grid;gap:12px;padding:20px;border-radius:12px;background:var(--surface-raised);border:1px solid var(--border)}
.mskel__row{display:flex;justify-content:space-between;gap:8px}

/* ---------------------------------------------------------------- HeaderMenus */
.bell{position:relative}
.user-menu{position:absolute;right:16px;top:calc(100% + 8px);z-index:30;width:240px;display:grid;padding:4px;border-radius:12px;background:var(--surface-raised);border:1px solid var(--border-strong);box-shadow:var(--shadow-overlay)}
.user-menu a{display:flex;align-items:center;gap:10px;min-height:44px;padding:0 12px;border-radius:var(--radius-full);color:var(--ink);text-decoration:none;font:600 15px/20px var(--font-text)}
.user-menu a:hover{background:var(--surface-sunken)}
.prefs{display:flex;align-items:center;gap:6px;padding-right:10px;margin-right:4px;border-right:1px solid var(--border)}
.lang{position:relative}
.lang-menu{position:absolute;right:0;top:calc(100% + 8px);z-index:30;min-width:180px;display:grid;padding:4px;border-radius:12px;background:var(--surface-raised);border:1px solid var(--border-strong);box-shadow:var(--shadow-overlay)}
.lang-menu button{display:flex;align-items:center;gap:10px;min-height:40px;padding:0 12px;border:0;border-radius:var(--radius-full);background:none;color:var(--ink);font:600 15px/20px var(--font-text);cursor:pointer;text-align:left}
.lang-menu button:hover{background:var(--surface-sunken)}
.lang-menu .cd{width:24px;font:600 12px/16px var(--font-code);color:var(--ink-muted)}
.lang-menu .nm{flex:1}
.lang-menu [aria-checked="false"] .ck{visibility:hidden}
.theme-sw{position:relative;flex:none;box-sizing:border-box;width:52px;height:28px;overflow:hidden;line-height:0;border-radius:999px;border:1px solid var(--border-strong);background:var(--surface-sunken);padding:0;cursor:pointer;color:var(--ink-muted)}
.theme-sw:focus-visible{outline:2px solid var(--focus);outline-offset:2px}
.theme-sw__trk{position:absolute;inset:0;display:flex;align-items:center;justify-content:space-between;padding:0 7px;opacity:.55}
.theme-sw__knob{position:absolute;top:2px;left:2px;width:22px;height:22px;border-radius:999px;background:var(--ink);color:var(--surface);display:grid;place-items:center;transition:transform .18s ease}
.theme-sw[aria-checked="true"] .theme-sw__knob{transform:translateX(24px);background:var(--accent);color:var(--on-mask)}
@media (prefers-reduced-motion:reduce){.theme-sw__knob{transition:none}}
.hseg{display:inline-flex;padding:2px;border-radius:var(--radius-full);border:1px solid var(--border-strong);background:var(--surface-sunken)}
.hseg button{min-width:44px;min-height:32px;border:0;border-radius:var(--radius-full);background:none;color:var(--ink-muted);font:600 13px/20px var(--font-code);cursor:pointer}
.hseg button[aria-pressed="true"]{background:var(--ink);color:var(--surface)}
.share{position:relative}
.share-menu{position:absolute;right:0;top:calc(100% + 8px);z-index:30;width:300px;display:grid;padding:4px;border-radius:12px;background:var(--surface-raised);border:1px solid var(--border-strong);box-shadow:var(--shadow-overlay)}
.share-menu a{display:grid;grid-template-columns:32px 1fr;gap:2px 12px;align-items:center;padding:10px 12px;border-radius:var(--radius-full);color:var(--ink);text-decoration:none}
.share-menu a:hover{background:var(--surface-sunken)}
.share-menu .ic{grid-row:span 2;display:grid;place-items:center;width:32px;height:32px;border-radius:8px;background:var(--surface-sunken)}
.share-menu strong{font:600 15px/20px var(--font-text)}
.share-menu small{font:13px/18px var(--font-text);color:var(--ink-muted)}
.bell-n{position:absolute;top:0;right:-4px;min-width:18px;height:18px;padding:0 5px;box-sizing:border-box;border-radius:999px;background:var(--accent);color:var(--on-mask);font:700 11px/18px var(--font-text);text-align:center;box-shadow:0 0 0 2px var(--surface)}
.share .h-chev{display:inline-flex}
.user-menu__head{display:grid;gap:2px;padding:8px 12px 12px;border-bottom:1px solid var(--border);margin-bottom:4px}
.user-menu__head span{font-size:13px;color:var(--ink-muted)}
.user-menu__logout{border-top:1px solid var(--border);margin-top:4px}
.user-menu button.user-menu__logout,.mobile-menu button.item{width:100%;border:0;background:none;cursor:pointer;text-align:left}
.user-menu button.user-menu__logout{display:flex;align-items:center;gap:10px;min-height:44px;padding:0 12px;border-radius:var(--radius-full);color:var(--ink);font:600 15px/20px var(--font-text)}
.user-menu button.user-menu__logout:hover{background:var(--surface-sunken)}
.bell-n--inline{position:static;margin-left:auto}

/* menu du compte, en groupes (décision du client du 5 nov. 2026) : filet entre deux groupes, dans le menu de l'avatar
   (.user-menu__sep) comme dans le menu mobile (.m-sep, largeur des lignes .item). Un groupe vide n'a pas de filet. */
.user-menu__sep, .mobile-menu .m-sep { height: 0; margin: var(--space-1) 0; border: 0; border-top: var(--border-hairline) solid var(--border); }
.user-menu__sep + .user-menu__logout { border-top: 0; margin-top: 0; }
/* icône pleine : la silhouette prend la couleur de l'icône (offres du menu du compte), vive dans les deux thèmes :
   --accent : l'or pur (accent) ; --verified : le bleu du badge « Éditeur vérifié » (verified) en sombre, mask-blue en clair,
   où verified (#1d5fa8, fait pour le texte) serait terne. Icône décorative : le libellé du lien, en ink, porte le sens.
   --knock redessine les détails intérieurs (la coche) dans la couleur du fond, survol compris. */
.na-ic-solid svg { fill: currentColor; }
.na-ic-solid--accent svg { color: var(--accent); }
.na-ic-solid--verified svg { color: var(--verified); }
[data-theme="light"] .na-ic-solid--verified svg { color: var(--mask-blue); }
.na-ic-solid--knock svg > :not(:first-child) { fill: none; stroke: var(--ic-knock, var(--surface-raised)); }
.mobile-menu .na-ic-solid { --ic-knock: var(--surface); }
.user-menu .na-ic-solid:hover, .mobile-menu .na-ic-solid:hover { --ic-knock: var(--surface-sunken); }

/* CodeField : champ de code à usage unique (validation du compte, double authentification, codes de secours) */
.na-code-field{justify-items:center;text-align:center}
.na-code-field .na-input{width:100%;max-width:220px;text-align:center;font-size:24px;letter-spacing:.4em}
.na-code-field--recovery .na-input{max-width:320px;letter-spacing:.2em}

/* HeaderMenus : menu du compte, chevron d'ouverture à côté de l'avatar */
.na-header__me{align-items:center;gap:2px;padding:2px 4px 2px 2px;border:0;background:none;cursor:pointer;color:var(--ink-muted)}
.na-header__me:hover,.na-header__me[aria-expanded="true"]{background:var(--surface-sunken);color:var(--ink)}
.hdr-me__chev{display:inline-flex;transition:transform .18s ease}
.na-header__me[aria-expanded="true"] .hdr-me__chev{transform:rotate(180deg)}
@media (prefers-reduced-motion:reduce){.hdr-me__chev{transition:none}}
/* HeaderMenus : rang du membre dans l'en-tête (Rank), réductible à ses losanges */
.hdr-rank{flex:none}
.hdr-rank--compact{padding:5px 8px;gap:0}
.hdr-rank--compact .hdr-rank__lb{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap}

/* ---------------------------------------------------------------- en-tête : focus clavier
   Un seul contour pour tout ce qui se focalise dans la barre et ses menus (logo, navigation, recherche, langue, thème,
   Partager, cloche, avatar, connexion, bouton et menu mobile, entrées des menus) : 2 px `focus`, décalé de 2 px,
   en :focus-visible seulement. Le contour suit le rayon de l'élément : chacun porte donc lui-même le rayon en pilule
   (cercle pour un bouton icône), et son survol avec. Seules les lignes pleine largeur du menu mobile (.item) gardent
   leur rectangle arrondi, qui porte le filet de l'entrée active. */
.na-header__logo, .na-header__nav a, .na-header :is(.na-btn, .na-input, .field-shell), .na-header__me,
.mobile-menu .field-shell { border-radius: var(--radius-full); }
.na-header__nav a { padding: 0 var(--space-2); margin: 0 calc(-1 * var(--space-2)); }
.na-header :is(a, button):focus-visible, .na-header .na-input:focus-visible,
.na-header .field-shell:has(input:focus-visible), .mobile-menu .field-shell:has(input:focus-visible),
.lang-menu button:focus-visible, .share-menu a:focus-visible, .user-menu :is(a, button):focus-visible,
.mobile-menu :is(a, button):focus-visible { outline: var(--border-control) solid var(--focus); outline-offset: 2px; }
.na-header .field-shell:focus-within, .mobile-menu .field-shell:focus-within { outline: none; }