/* Identite KoPass — direction editoriale.
   Le site montre des chiffres dates et verifiables ; il devait en avoir l'air.
   Les concurrents sont tous sombres et violets : un fond papier, des titres en
   serif et une colonne de lecture etroite le distinguent au premier coup d'oeil
   et servent le propos — on lit un releve, pas un tableau de bord.
   La discipline structurelle est empruntee a shadcn/ui : rayon unique, filets
   d'un cheveu, gris neutres, aucune ombre portee sur les surfaces courantes. */
:root {
  color-scheme: light;
  /* Aucune police n'est chargee : la CSP interdit les ressources externes, et
     une police web couterait de toute facon un aller-retour reseau sur chaque
     page. Les deux piles ci-dessous existent sur tous les systemes vises. */
  --font-sans: ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  --font-serif: ui-serif, "Iowan Old Style", "Palatino Linotype", Palatino, "Book Antiqua", Georgia, serif;
  --font-mono: ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas, monospace;
  font-family: var(--font-sans);
  line-height: 1.5;
  font-weight: 400;
  --radius: 0.625rem;
  --radius-sm: 0.375rem;
  /* Terre de Sienne. Choisie contre l'indigo de tout le secteur, et parce
     qu'elle tient le 4.5:1 sur papier des le ton 500. */
  --brand-400: #9a3412;
  --brand-500: #7c2d12;
  --brand-600: #6b2410;
  --brand-700: #57190b;
  /* Echelle d'encre chaude. Les noms restent ceux d'origine : neuf cents lignes
     de regles s'y referent, et les renommer n'aurait rien change a l'ecran. */
  --slate-200: #292524;
  --slate-300: #44403c;
  --slate-400: #78716c;
  /* 500 et 600 restent des gris de TEXTE, pas des gris de bordure : quinze
     regles s'en servent pour des mentions secondaires. Les avoir eclaircis par
     symetrie avec le theme sombre rendait « Reformulee en francais » illisible
     a 1,4:1 sur papier. Les bordures vivent dans 700 et 800. */
  --slate-500: #6b6560;
  --slate-600: #767066;
  --slate-700: #e7e2d8;
  --slate-800: #f2efe9;
  --page-bg: #fffefb;
  --surface: #fff;
  --surface-subtle: #faf8f3;
  --chrome-bg: #fffefb;
  --banner-bg: #fff;
  --card-border: #e7e2d8;
  --heading: #1c1917;
  --on-brand: #fff;
  --focus-ring: #7c2d12;
  --filter-active-bg: #f6ece7;
  --language-text: #7c2d12;
  /* Un lien sortant ne doit pas se confondre avec un lien interne : teinte
     franchement differente de l'accent, et non un simple degrade de celui-ci. */
  --external-link: #0f766e;
  --code-bg: #f2efe9;
  --code-text: #44403c;
  --success-text: #15803d;
  --danger-text: #b91c1c;
  --warning-text: #a16207;
  --violet-text: #7e22ce;
  --legal-warning-bg: #fdf6e7;
  --legal-warning-text: #78350f;
  --legal-warning-code: #92400e;
  --banner-shadow: 0 18px 40px rgba(28, 25, 23, .14);
  /* Palette dediee aux types d'entree. Elle n'emprunte PAS les couleurs
     semantiques (succes, danger, alerte) : une categorie n'est ni une reussite
     ni une erreur, et reutiliser ces teintes rendrait les deux lectures
     ambigues. Une teinte par type, pour que skill et mcp_server — les deux
     categories le plus souvent confondues — ne se ressemblent jamais.
     Tons soutenus : sur papier il faut 4.5:1. */
  --kind-library: #4338ca;
  --kind-cli: #57534e;
  --kind-mcp_server: #0e7490;
  --kind-agent: #047857;
  --kind-model: #a16207;
  --kind-app: #a21caf;
  --kind-skill: #6d28d9;
  --kind-other: #78716c;
}

/* Le sombre reste disponible, mais il n'est plus le defaut : il est demande,
   par le systeme ou par le selecteur. Meme identite, encre chaude inversee. */
@media (prefers-color-scheme: dark) {
  :root:not([data-theme]) {
    color-scheme: dark;
    --brand-400: #e8a087;
    --brand-500: #e07a5f;
    --brand-600: #d16a4f;
    --brand-700: #b85440;
    --slate-200: #f5f5f4;
    --slate-300: #d6d3d1;
    --slate-400: #a8a29e;
    --slate-500: #78716c;
    --slate-600: #57534e;
    --slate-700: #3a3532;
    --slate-800: #292524;
    --page-bg: #1c1917;
    --surface: #242020;
    --surface-subtle: #201d1c;
    --chrome-bg: #1a1716;
    --banner-bg: #242020;
    --card-border: #3a3532;
    --heading: #fafaf9;
    --on-brand: #1c1917;
    --focus-ring: #e8a087;
    --filter-active-bg: rgba(224, 122, 95, .16);
    --language-text: #e8a087;
    --external-link: #5eead4;
    --code-bg: #201d1c;
    --code-text: #e7e5e4;
    --success-text: #86efac;
    --danger-text: #fca5a5;
    --warning-text: #fcd34d;
    --violet-text: #c4b5fd;
    --legal-warning-bg: #3a2410;
    --legal-warning-text: #fef3c7;
    --legal-warning-code: #fde68a;
    --banner-shadow: 0 20px 50px rgba(0, 0, 0, .55);
    --kind-library: #a5b4fc;
    --kind-cli: #d6d3d1;
    --kind-mcp_server: #67e8f9;
    --kind-agent: #6ee7b7;
    --kind-model: #fcd34d;
    --kind-app: #f0abfc;
    --kind-skill: #c4b5fd;
    --kind-other: #a8a29e;
  }
}

:root[data-theme="dark"] {
  color-scheme: dark;
  --brand-400: #e8a087;
  --brand-500: #e07a5f;
  --brand-600: #d16a4f;
  --brand-700: #b85440;
  --slate-200: #f5f5f4;
  --slate-300: #d6d3d1;
  --slate-400: #a8a29e;
  --slate-500: #78716c;
  --slate-600: #57534e;
  --slate-700: #3a3532;
  --slate-800: #292524;
  --page-bg: #1c1917;
  --surface: #242020;
  --surface-subtle: #201d1c;
  --chrome-bg: #1a1716;
  --banner-bg: #242020;
  --card-border: #3a3532;
  --heading: #fafaf9;
  --on-brand: #1c1917;
  --focus-ring: #e8a087;
  --filter-active-bg: rgba(224, 122, 95, .16);
  --language-text: #e8a087;
  --external-link: #5eead4;
  --code-bg: #201d1c;
  --code-text: #e7e5e4;
  --success-text: #86efac;
  --danger-text: #fca5a5;
  --warning-text: #fcd34d;
  --violet-text: #c4b5fd;
  --legal-warning-bg: #3a2410;
  --legal-warning-text: #fef3c7;
  --legal-warning-code: #fde68a;
  --banner-shadow: 0 20px 50px rgba(0, 0, 0, .55);
  --kind-library: #a5b4fc;
  --kind-cli: #d6d3d1;
  --kind-mcp_server: #67e8f9;
  --kind-agent: #6ee7b7;
  --kind-model: #fcd34d;
  --kind-app: #f0abfc;
  --kind-skill: #c4b5fd;
  --kind-other: #a8a29e;
}

/* Le selecteur « Clair » doit gagner contre un systeme regle en sombre : les
   valeurs de :root sont deja claires, seul color-scheme a besoin d'etre force. */
:root[data-theme="light"] { color-scheme: light; }

* { box-sizing: border-box; }
html { min-height: 100%; }
body { margin: 0; background: var(--page-bg); color: var(--slate-200); }
html:lang(ja) body {
  font-family: -apple-system, BlinkMacSystemFont, "Hiragino Kaku Gothic ProN", "Yu Gothic", Meiryo, sans-serif;
  line-break: strict;
  word-break: normal;
}
html:lang(zh) body {
  font-family: -apple-system, BlinkMacSystemFont, "PingFang SC", "Microsoft YaHei", "Noto Sans CJK SC", sans-serif;
  line-break: strict;
  word-break: normal;
}
html:lang(de) .radar-filter, html:lang(de) .site-header__link { overflow-wrap: anywhere; }
button, input, select { font: inherit; }
button { cursor: pointer; }
a { color: inherit; }
[hidden], .hidden { display: none !important; }

.card { background: var(--surface); border: 1px solid var(--card-border); }
.htmx-indicator { display: none; }
.htmx-request .htmx-indicator, .htmx-request.htmx-indicator { display: flex; }
.source-badge { border-radius: 9999px; font-size: .65rem; padding: 2px 6px; }
@keyframes pulse-bar { 0%, 100% { opacity: 1; } 50% { opacity: .4; } }
.animate-pulse-bar { animation: pulse-bar 1.5s ease-in-out infinite; }
.pulse-bar { width: .5rem; height: 2rem; border-radius: .25rem; background: var(--brand-500); animation: pulse-bar 1.5s ease-in-out infinite; }
.pulse-delay-0 { animation-delay: 0s; }
.pulse-delay-1 { animation-delay: .15s; }
.pulse-delay-2 { animation-delay: .3s; }
.pulse-delay-3 { animation-delay: .45s; }
.pulse-delay-4 { animation-delay: .6s; }
.shortcut-btn { padding: .25rem .75rem; border: 1px solid var(--slate-700); border-radius: 9999px; background: var(--slate-800); color: var(--slate-300); font-size: .75rem; line-height: 1rem; transition: background-color 150ms ease; }
.shortcut-btn:hover { background: var(--slate-700); }
.score-progress { display: block; width: 100%; overflow: hidden; border: 0; border-radius: 9999px; background: var(--slate-700); appearance: none; }
.score-progress--thin { height: .25rem; margin-top: .25rem; }
.score-progress--medium { flex: 1 1 0%; height: .375rem; }
.score-progress--thick { height: .5rem; margin-top: .25rem; }
.score-progress::-webkit-progress-bar { background: var(--slate-700); }
.score-progress::-webkit-progress-value { background: var(--slate-600); }
.score-progress::-moz-progress-bar { background: var(--slate-600); }
.score-progress.is-brand::-webkit-progress-value { background: var(--brand-500); }
.score-progress.is-brand::-moz-progress-bar { background: var(--brand-500); }
.score-progress.is-green::-webkit-progress-value { background: #22c55e; }
.score-progress.is-green::-moz-progress-bar { background: #22c55e; }
.score-progress.is-yellow::-webkit-progress-value { background: #eab308; }
.score-progress.is-yellow::-moz-progress-bar { background: #eab308; }
.score-progress.is-orange::-webkit-progress-value { background: #f97316; }
.score-progress.is-orange::-moz-progress-bar { background: #f97316; }
.score-progress.is-red::-webkit-progress-value { background: #dc2626; }
.score-progress.is-red::-moz-progress-bar { background: #dc2626; }

.block { display: block; }
.flex { display: flex; }
.grid { display: grid; }
.flex-1 { flex: 1 1 0%; }
.flex-col { flex-direction: column; }
.flex-wrap { flex-wrap: wrap; }
.flex-shrink-0 { flex-shrink: 0; }
.items-center { align-items: center; }
.items-start { align-items: flex-start; }
.justify-between { justify-content: space-between; }
.justify-center { justify-content: center; }
.self-center { align-self: center; }
.grid-cols-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.col-span-2 { grid-column: span 2 / span 2; }
.gap-1 { gap: .25rem; }
.gap-1\.5 { gap: .375rem; }
.gap-2 { gap: .5rem; }
.gap-3 { gap: .75rem; }
.gap-4 { gap: 1rem; }
.gap-6 { gap: 1.5rem; }
.space-y-1\.5 > :not([hidden]) ~ :not([hidden]) { margin-top: .375rem; }
.space-y-2 > :not([hidden]) ~ :not([hidden]) { margin-top: .5rem; }

.mx-auto { margin-left: auto; margin-right: auto; }
.ml-1 { margin-left: .25rem; }
.mt-0\.5 { margin-top: .125rem; }
.mt-1 { margin-top: .25rem; }
.mt-1\.5 { margin-top: .375rem; }
.mt-2 { margin-top: .5rem; }
.mt-3 { margin-top: .75rem; }
.mt-8 { margin-top: 2rem; }
.mb-1 { margin-bottom: .25rem; }
.mb-2 { margin-bottom: .5rem; }
.mb-3 { margin-bottom: .75rem; }
.mb-4 { margin-bottom: 1rem; }
.mb-6 { margin-bottom: 1.5rem; }
.mb-8 { margin-bottom: 2rem; }
.mb-10 { margin-bottom: 2.5rem; }
.p-4 { padding: 1rem; }
.p-5 { padding: 1.25rem; }
.px-1\.5 { padding-left: .375rem; padding-right: .375rem; }
.px-2 { padding-left: .5rem; padding-right: .5rem; }
.px-3 { padding-left: .75rem; padding-right: .75rem; }
.px-4 { padding-left: 1rem; padding-right: 1rem; }
.px-5 { padding-left: 1.25rem; padding-right: 1.25rem; }
.px-6 { padding-left: 1.5rem; padding-right: 1.5rem; }
.px-8 { padding-left: 2rem; padding-right: 2rem; }
.py-0\.5 { padding-top: .125rem; padding-bottom: .125rem; }
.py-1 { padding-top: .25rem; padding-bottom: .25rem; }
.py-2 { padding-top: .5rem; padding-bottom: .5rem; }
.py-3 { padding-top: .75rem; padding-bottom: .75rem; }
.py-4 { padding-top: 1rem; padding-bottom: 1rem; }
.py-10 { padding-top: 2.5rem; padding-bottom: 2.5rem; }
.py-16 { padding-top: 4rem; padding-bottom: 4rem; }

.min-h-screen { min-height: 100vh; }
.min-w-0 { min-width: 0; }
.max-w-xl { max-width: 36rem; }
.max-w-5xl { max-width: 64rem; }
.w-2 { width: .5rem; }
.w-4 { width: 1rem; }
.w-5 { width: 1.25rem; }
.w-6 { width: 1.5rem; }
.w-8 { width: 2rem; }
.w-14 { width: 3.5rem; }
.w-16 { width: 4rem; }
.w-28 { width: 7rem; }
.w-32 { width: 8rem; }
.w-full { width: 100%; }
.h-1 { height: .25rem; }
.h-1\.5 { height: .375rem; }
.h-2 { height: .5rem; }
.h-8 { height: 2rem; }

.rounded { border-radius: .25rem; }
.rounded-lg { border-radius: .5rem; }
.rounded-xl { border-radius: .75rem; }
.rounded-full { border-radius: 9999px; }
.border { border-style: solid; border-width: 1px; }
.border-b { border-bottom-style: solid; border-bottom-width: 1px; }
.border-brand-500 { border-color: var(--brand-500); }
.border-brand-500\/30 { border-color: color-mix(in srgb, var(--brand-500) 30%, transparent); }
.border-brand-500\/40 { border-color: color-mix(in srgb, var(--brand-500) 40%, transparent); }
.border-slate-500 { border-color: var(--slate-500); }
.border-slate-600 { border-color: var(--slate-600); }
.border-slate-700 { border-color: var(--slate-700); }
.border-slate-800 { border-color: var(--slate-800); }
.border-purple-700 { border-color: #7e22ce; }
.border-orange-700 { border-color: #c2410c; }
.border-red-700 { border-color: #b91c1c; }
.border-blue-700 { border-color: #1d4ed8; }
.border-green-700 { border-color: #15803d; }
.border-green-800 { border-color: #166534; }
.border-cyan-700 { border-color: #0e7490; }
.border-cyan-800 { border-color: #155e75; }
.border-yellow-700 { border-color: #a16207; }

.bg-brand-500 { background-color: var(--brand-500); }
.bg-brand-500\/5 { background-color: rgba(99, 102, 241, .05); }
.bg-brand-500\/10 { background-color: rgba(99, 102, 241, .1); }
.bg-brand-500\/20 { background-color: rgba(99, 102, 241, .2); }
.bg-brand-600 { background-color: var(--brand-600); }
.bg-slate-500 { background-color: var(--slate-500); }
.bg-slate-600 { background-color: var(--slate-600); }
.bg-slate-700 { background-color: var(--slate-700); }
.bg-slate-800 { background-color: var(--slate-800); }
.bg-green-500 { background-color: #22c55e; }
.bg-orange-500 { background-color: #f97316; }
.bg-red-600 { background-color: #dc2626; }
.bg-yellow-500 { background-color: #eab308; }
.bg-purple-900\/40 { background-color: rgba(88, 28, 135, .4); }
.bg-orange-900\/40 { background-color: rgba(124, 45, 18, .4); }
.bg-red-900\/40 { background-color: rgba(127, 29, 29, .4); }
.bg-blue-900\/40 { background-color: rgba(30, 58, 138, .4); }
.bg-green-900\/40 { background-color: rgba(20, 83, 45, .4); }
.bg-cyan-900\/40 { background-color: rgba(22, 78, 99, .4); }
.bg-yellow-900\/40 { background-color: rgba(113, 63, 18, .4); }

.font-sans { font-family: inherit; }
.font-normal { font-weight: 400; }
.font-medium { font-weight: 500; }
.font-semibold { font-weight: 600; }
.font-bold { font-weight: 700; }
.text-xs { font-size: .75rem; line-height: 1rem; }
.text-sm { font-size: .875rem; line-height: 1.25rem; }
.text-base { font-size: 1rem; line-height: 1.5rem; }
.text-lg { font-size: 1.125rem; line-height: 1.75rem; }
.text-xl { font-size: 1.25rem; line-height: 1.75rem; }
.text-2xl { font-size: 1.5rem; line-height: 2rem; }
.text-3xl { font-size: 1.875rem; line-height: 2.25rem; }
.text-left { text-align: left; }
.text-center { text-align: center; }
.text-right { text-align: right; }
.text-white { color: var(--heading); }
.bg-brand-500.text-white, .bg-brand-600.text-white { color: var(--on-brand); }
.text-slate-200 { color: var(--slate-200); }
.text-slate-300 { color: var(--slate-300); }
.text-slate-400 { color: var(--slate-400); }
.text-slate-500 { color: var(--slate-500); }
.text-slate-600 { color: var(--slate-600); }
.text-brand-400 { color: var(--brand-400); }
.text-brand-500 { color: var(--brand-500); }
.text-purple-300 { color: #d8b4fe; }
.text-purple-400 { color: #c084fc; }
.text-orange-300 { color: #fdba74; }
.text-orange-400 { color: #fb923c; }
.text-red-300 { color: #fca5a5; }
.text-red-400 { color: #f87171; }
.text-blue-300 { color: #93c5fd; }
.text-blue-400 { color: #60a5fa; }
.text-green-300 { color: #86efac; }
.text-green-400 { color: #4ade80; }
.text-cyan-300 { color: #67e8f9; }
.text-cyan-400 { color: #22d3ee; }
.text-yellow-300 { color: #fde047; }
.text-yellow-400 { color: #facc15; }
.capitalize { text-transform: capitalize; }
.truncate { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.line-clamp-1, .line-clamp-2 { display: -webkit-box; overflow: hidden; -webkit-box-orient: vertical; }
.line-clamp-1 { -webkit-line-clamp: 1; }
.line-clamp-2 { -webkit-line-clamp: 2; }
.transition-all { transition: all 150ms ease; }
.transition-colors { transition: color 150ms ease, background-color 150ms ease, border-color 150ms ease; }
.placeholder-slate-500::placeholder { color: var(--slate-500); }
.focus\:outline-none:focus { outline: 2px solid transparent; outline-offset: 2px; }
.focus\:border-brand-500:focus { border-color: var(--brand-500); }
.focus\:ring-1:focus { box-shadow: 0 0 0 1px var(--brand-500); }
.focus\:ring-brand-500:focus { --ring-color: var(--brand-500); }
.hover\:bg-brand-700:hover { background-color: var(--brand-700); }
.hover\:bg-slate-700:hover { background-color: var(--slate-700); }
.hover\:bg-slate-800:hover { background-color: var(--slate-800); }
.hover\:border-slate-500:hover { border-color: var(--slate-500); }
.hover\:border-slate-600:hover { border-color: var(--slate-600); }
.hover\:text-brand-400:hover { color: var(--brand-400); }
.hover\:text-white:hover { color: var(--heading); }
.hover\:underline:hover { text-decoration-line: underline; }

/* Deux gabarits. La prose se lit mal au-dela d'une soixantaine de caracteres
   par ligne : 58rem reste la bonne mesure pour les pages juridiques. Une liste
   d'outils n'a aucune raison de subir la meme contrainte — enfermee dans cette
   colonne, elle laissait deux tiers d'un ecran large vides. */
.page { min-height: calc(100vh - 9rem); margin: 0 auto; padding: 2.5rem 0 3.5rem; }
.page--prose { width: min(100% - 2rem, 58rem); }
.page--wide { width: min(100% - 3rem, 82rem); }
/* Alias conserve : d'anciens gabarits peuvent encore porter cette classe. */
.legal-page { width: min(100% - 2rem, 58rem); min-height: calc(100vh - 9rem); margin: 0 auto; padding: 2.5rem 0 3rem; }
.skip-link { position: fixed; z-index: 1000; top: .5rem; left: .5rem; padding: .7rem 1rem; border-radius: .5rem; background: var(--heading); color: var(--surface); font-weight: 700; text-decoration: none; transform: translateY(-160%); }
.skip-link:focus { outline: 3px solid var(--focus-ring); outline-offset: 3px; transform: translateY(0); }
.page h1, .legal-page h1 { margin: .75rem 0 1.25rem; color: var(--heading); font-size: clamp(2rem, 5vw, 2.75rem); line-height: 1.15; }
.breadcrumbs { margin: 0 0 1rem; color: var(--slate-300); font-size: .875rem; }
.breadcrumbs ol { display: flex; flex-wrap: wrap; gap: .35rem; margin: 0; padding: 0; list-style: none; }
.breadcrumbs li + li::before { margin-right: .35rem; color: var(--slate-500); content: "/"; }
.breadcrumbs a { color: var(--brand-400); }
.site-header > nav { width: min(100% - 3rem, 82rem); margin: 0 auto; }
.site-header { padding: 1rem; border-bottom: 1px solid var(--slate-800); background: var(--chrome-bg); }
.site-header nav { display: flex; flex-wrap: wrap; justify-content: center; gap: .5rem; }
.site-header__link { padding: .45rem .7rem; border-radius: .5rem; color: var(--slate-300); font-size: .875rem; font-weight: 600; text-decoration: none; }
.site-header__link:hover { color: var(--heading); background: var(--slate-800); }
.site-header__link.is-active { color: var(--on-brand); background: var(--brand-600); }
.site-header__link:focus-visible { outline: 3px solid var(--focus-ring); outline-offset: 3px; }

/* Sélecteur natif sans script, avec les six autonymes et la langue active. */
.site-header nav { align-items: center; }
.site-header__sections { display: flex; flex-wrap: wrap; justify-content: center; gap: .5rem; }
.site-header__languages {
  position: relative;
  margin-left: auto;
  border: 1px solid var(--slate-700, #334155);
  border-radius: .5rem;
  background: var(--page-bg);
}
.site-header__languages summary {
  min-width: 6.5rem;
  padding: .45rem .65rem;
  color: var(--language-text);
  font-size: .8125rem;
  font-weight: 700;
  cursor: pointer;
}
.site-header__languages summary:focus-visible { outline: 3px solid var(--focus-ring); outline-offset: 2px; }
.site-header__languages ul {
  position: absolute;
  z-index: 20;
  top: calc(100% + .35rem);
  right: 0;
  min-width: 9rem;
  margin: 0;
  padding: .3rem;
  border: 1px solid var(--slate-700);
  border-radius: .5rem;
  background: var(--chrome-bg);
  box-shadow: var(--banner-shadow);
  list-style: none;
}
.site-header__languages li { margin: 0; }
.site-header__language {
  display: block;
  width: 100%;
  padding: .3rem .6rem;
  border-radius: .35rem;
  color: var(--slate-400, #94a3b8);
  font-size: .8125rem;
  font-weight: 700;
  letter-spacing: .03em;
  text-decoration: none;
}
a.site-header__language:hover { color: var(--heading); background: var(--slate-800); }
a.site-header__language:focus-visible { outline: 3px solid var(--focus-ring); outline-offset: 2px; }
.site-header__language.is-current { color: var(--on-brand); background: var(--brand-600); cursor: default; }
.content-language-notice {
  margin: 0 0 1rem;
  color: var(--slate-400);
  font-size: .8125rem;
}

/* Marque : logo + nom, ramene a l'accueil. */
.site-header__brand {
  display: inline-flex;
  align-items: center;
  gap: .55rem;
  margin-right: .85rem;
  color: var(--heading);
  font-size: 1rem;
  font-weight: 800;
  letter-spacing: -.025em;
  line-height: 1;
  text-decoration: none;
}
.site-header__brand img { display: block; border-radius: .4rem; transform: translateY(-.03rem); }
.site-header__brand-name { transform: translateY(.02rem); }
.site-header__brand:hover { color: var(--brand-400); }
.site-header__brand:focus-visible { outline: 3px solid var(--focus-ring); outline-offset: 3px; border-radius: .4rem; }

.site-header__themes {
  display: inline-flex;
  padding: .15rem;
  border: 1px solid var(--slate-700);
  border-radius: .5rem;
  background: var(--page-bg);
}
.site-header__theme {
  padding: .3rem .5rem;
  border: 0;
  border-radius: .35rem;
  background: transparent;
  color: var(--slate-400);
  font-size: .75rem;
  font-weight: 700;
}
.site-header__theme:hover { color: var(--heading); background: var(--slate-800); }
.site-header__theme[aria-pressed="true"] { color: var(--on-brand); background: var(--brand-600); }
.site-header__theme:focus-visible { outline: 3px solid var(--focus-ring); outline-offset: 2px; }

/* La pagination n'avait AUCUNE regle: "Suivant" s'affichait en lien nu, comme
   le selecteur de langue avant correction. Meme cause, meme remede. */
.radar-pagination {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: .75rem;
  margin: 2rem 0 .5rem;
  padding-top: 1.25rem;
  border-top: 1px solid var(--slate-800);
}
.radar-pagination a {
  display: inline-flex;
  align-items: center;
  gap: .4rem;
  min-height: 2.75rem;
  padding: .6rem 1.1rem;
  border: 1px solid var(--brand-600);
  border-radius: .6rem;
  background: transparent;
  color: var(--brand-400);
  font-size: .9rem;
  font-weight: 600;
  text-decoration: none;
}
.radar-pagination a:hover { background: var(--brand-600); color: var(--on-brand); }
.radar-pagination a:focus-visible { outline: 3px solid var(--focus-ring); outline-offset: 3px; }
/* Les fleches sont decoratives: le libelle porte deja le sens. */
.radar-pagination a[rel="prev"]::before { content: "\2190"; }
.radar-pagination a[rel="next"]::after { content: "\2192"; }
.radar-pagination__status {
  flex: 1 1 100%;
  order: -1;
  color: var(--slate-400);
  font-size: .8125rem;
  text-align: center;
}

@media (max-width: 40rem) {
  .radar-pagination a { flex: 1 1 auto; justify-content: center; }
}

@media (max-width: 40rem) {
  .site-header__languages { margin-left: 0; }
}
.back-link { color: var(--brand-400); font-size: .875rem; text-decoration: none; }
.back-link:hover { color: var(--brand-600); }
.legal-warning { margin-top: 1.5rem; padding: 1.25rem; border: 3px solid #f59e0b; border-radius: .75rem; background: var(--legal-warning-bg); color: var(--legal-warning-text); }
.legal-warning h2 { margin: 0 0 .5rem; color: var(--heading); font-size: 1.25rem; }
.legal-warning p { margin: 0 0 .75rem; }
.legal-warning ul { display: grid; grid-template-columns: repeat(auto-fit, minmax(16rem, 1fr)); gap: .35rem 1rem; margin: 0; padding-left: 1.25rem; }
.legal-warning code { font-size: .8rem; font-weight: 700; color: var(--legal-warning-code); overflow-wrap: anywhere; }
.identity-card, .legal-section, .source-card { margin-bottom: 1.25rem; padding: 1.25rem; border: 1px solid var(--card-border); border-radius: .75rem; background: var(--surface); }
.identity-card { display: grid; gap: .35rem; border-color: rgba(99, 102, 241, .45); }
.identity-card p { margin: 0; }
.legal-section h2, .source-card h2 { margin: 0 0 .75rem; color: var(--heading); font-size: 1.25rem; }
.legal-section p { margin: .6rem 0; color: var(--slate-300); }
.legal-section li { margin: .45rem 0; color: var(--slate-300); }
.legal-section a { color: var(--brand-400); }
.legal-section code { color: var(--warning-text); }
.legal-details { display: grid; grid-template-columns: minmax(10rem, .45fr) 1fr; gap: .6rem 1rem; margin: 0; }
.legal-details dt { color: var(--slate-400); font-weight: 600; }
.legal-details dd { margin: 0; color: var(--slate-200); overflow-wrap: anywhere; }
.source-intro { color: var(--slate-400); }
.source-table-wrap { overflow-x: auto; }
.source-table { width: 100%; border-collapse: collapse; }
.source-table th, .source-table td { padding: .75rem 1rem; border-top: 1px solid var(--slate-800); vertical-align: top; }
.source-table th { width: 11rem; color: var(--slate-500); font-size: .75rem; font-weight: 500; letter-spacing: .04em; text-align: left; text-transform: uppercase; }
.source-table td { color: var(--slate-200); font-size: .875rem; }
.needs-review { color: #fde047; font-weight: 500; }

.radar-intro { max-width: 44rem; margin: -1rem 0 2rem; color: var(--slate-300); font-size: 1.05rem; }
.radar-domain-grid, .radar-tools { display: grid; gap: 1rem; margin: 0; padding: 0; list-style: none; }
.radar-domain-grid { grid-template-columns: repeat(auto-fit, minmax(15rem, 1fr)); }
.radar-domain-card a { display: block; height: 100%; padding: 1.25rem; border: 1px solid var(--card-border); border-radius: .75rem; background: var(--surface); text-decoration: none; }
.radar-domain-card a:hover { border-color: var(--brand-500); }
.radar-domain-card h2 { margin: 0 0 .5rem; color: var(--heading); }
.radar-domain-card p { color: var(--slate-400); }
.radar-domain-card span { color: var(--brand-400); font-weight: 600; }
.radar-domain-card__count { display: block; margin: 1rem 0 .4rem; color: var(--slate-300); font-size: .8rem; }
.radar-search { margin: 0 0 2rem; padding: 1.25rem; border: 1px solid rgba(99, 102, 241, .45); border-radius: .75rem; background: var(--surface); }
.radar-search label { display: block; margin-bottom: .6rem; color: var(--heading); font-weight: 600; }
.radar-search__controls { display: flex; gap: .75rem; }
.radar-search input { min-width: 0; flex: 1; padding: .75rem 1rem; border: 1px solid var(--slate-600); border-radius: .65rem; background: var(--surface-subtle); color: var(--heading); font: inherit; }
.radar-search input:focus { border-color: var(--brand-500); outline: 2px solid transparent; box-shadow: 0 0 0 2px rgba(99, 102, 241, .35); }
.radar-search button { padding: .75rem 1.1rem; border: 1px solid var(--brand-500); border-radius: .65rem; background: var(--brand-600); color: var(--on-brand); font-weight: 700; }
.radar-search button:hover { background: var(--brand-700); }
.search-suggestions { margin: .35rem 0 0; padding: .25rem; border: 1px solid var(--slate-700); border-radius: .65rem; background: var(--surface-subtle); list-style: none; }
.search-suggestions[hidden] { display: none; }
.search-suggestions__option { margin: 0; }
.search-suggestions__link { display: flex; align-items: center; justify-content: space-between; gap: 1rem; padding: .65rem .75rem; border-radius: .45rem; color: var(--heading); text-decoration: none; }
.search-suggestions__link:hover, .search-suggestions__option[aria-selected="true"] .search-suggestions__link { background: var(--filter-active-bg); }
.search-suggestions__name { min-width: 0; overflow-wrap: anywhere; }
.search-suggestions__type { flex: none; color: var(--slate-400); font-size: .75rem; }
.search-suggestions__status { margin: .35rem 0 0; color: var(--slate-400); font-size: .75rem; }
.home-maintenance, .home-catalogue, .home-recent, .error-page { margin: 0 0 2rem; padding: 1.25rem; border: 1px solid var(--card-border); border-radius: .75rem; background: var(--surface); }
.home-maintenance { border-color: var(--card-border); border-left: 3px solid var(--brand-500); }
.home-maintenance h2, .home-catalogue h2, .home-recent h2, .error-page h2 { margin: 0 0 .75rem; color: var(--heading); }
.home-maintenance p, .home-catalogue p, .home-recent p, .error-page p { color: var(--slate-300); }
.home-stats { display: grid; grid-template-columns: repeat(auto-fit, minmax(12rem, 1fr)); gap: .75rem; margin: 1rem 0; padding: 0; list-style: none; }
.home-stat { padding: 1rem; border: 1px solid var(--slate-700); border-radius: .65rem; background: var(--surface-subtle); }
.home-stat strong, .home-stat span { display: block; }
.home-stat strong { margin-bottom: .4rem; color: var(--heading); font-size: 1.5rem; }
.home-stat span { color: var(--slate-300); font-size: .8rem; }
.home-catalogue__date, .home-catalogue__unknown { font-size: .82rem; }
.home-recent__list { display: grid; gap: .65rem; margin: 1rem 0; padding: 0; list-style: none; }
.home-recent__item { display: flex; flex-wrap: wrap; align-items: center; gap: .5rem 1rem; padding: .75rem; border: 1px solid var(--slate-700); border-radius: .6rem; background: var(--surface-subtle); }
.home-recent__item a, .home-recent__all, .error-page a { color: var(--brand-400); font-weight: 700; }
.home-recent__item span { color: var(--slate-400); font-size: .8rem; }
.error-page__code { margin: 0; color: var(--brand-400) !important; font-size: 3rem; font-weight: 800; line-height: 1; }
.error-page ul { display: flex; flex-wrap: wrap; gap: .75rem 1.25rem; padding-left: 1.25rem; }
.radar-filter-panel { margin: 0 0 1.5rem; padding: 1.25rem; border: 1px solid var(--card-border); border-radius: .85rem; background: var(--surface); }
.radar-filter-panel__header { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: .75rem; margin-bottom: 1rem; }
.radar-filter-panel__header h2 { margin: 0; color: var(--heading); font-size: 1.15rem; }
.radar-filter-clear { color: var(--brand-400); font-size: .8125rem; font-weight: 700; }
.radar-filter-clear:hover { color: var(--brand-600); }
.radar-filter-clear:focus-visible { outline: 3px solid var(--focus-ring); outline-offset: 3px; }
.radar-filter-form { display: grid; gap: 1rem; }
.radar-filter-panel__groups { display: grid; grid-template-columns: repeat(auto-fit, minmax(12rem, 1fr)); gap: 1rem; }
.radar-filter-panel .radar-filter-group { display: grid; grid-template-columns: 1fr; gap: .4rem; }
.radar-filter-panel .radar-filter-group label { color: var(--slate-300); font-size: .78rem; font-weight: 700; }
.radar-filter-panel .radar-filter-group select { width: 100%; min-height: 2.75rem; padding: .55rem .7rem; border: 1px solid var(--slate-600); border-radius: .6rem; background: var(--surface-subtle); color: var(--heading); }
.radar-filter-panel .radar-filter-group select:focus-visible { border-color: var(--brand-500); outline: 3px solid var(--focus-ring); outline-offset: 2px; }
.radar-filter-form button { justify-self: start; min-height: 2.75rem; padding: .6rem 1rem; border: 1px solid var(--brand-500); border-radius: .6rem; background: var(--brand-600); color: var(--on-brand); font-weight: 700; }
.radar-filter-form button:hover { background: var(--brand-700); }
.radar-filter-form button:focus-visible { outline: 3px solid var(--focus-ring); outline-offset: 3px; }
.radar-active-filters { display: flex; flex-wrap: wrap; gap: .65rem .5rem; align-items: center; margin-top: 1rem; }
.radar-filter-chip { display: inline-flex; gap: .4rem; align-items: center; min-height: 2rem; padding: .3rem .75rem; line-height: 1.3; border: 1px solid var(--brand-500); border-radius: 9999px; background: var(--filter-active-bg); color: var(--heading); font-size: .78rem; text-decoration: none; }
.radar-filter-chip:hover { border-color: var(--brand-400); }
.radar-filter-chip:focus-visible { outline: 3px solid var(--focus-ring); outline-offset: 2px; }
/* 12 px entre deux groupes les faisait lire comme un seul bloc : on ne
   voyait plus ou finissait « Activite » et ou commencait « Trier par ». */
.radar-filter-group { display: grid; grid-template-columns: minmax(5.75rem, .18fr) 1fr; gap: .75rem 1rem; align-items: start; }
.radar-filter-group + .radar-filter-group { margin-top: 1.25rem; }
.radar-filter-group h3 { margin: .4rem 0 0; color: var(--slate-400); font-size: .75rem; letter-spacing: .055em; text-transform: uppercase; }
.radar-filters { display: flex; flex-wrap: wrap; gap: .7rem .5rem; margin: 0; }
.radar-filter { display: inline-flex; gap: .4rem; align-items: center; min-height: 2rem; padding: .35rem .8rem; line-height: 1.3; border: 1px solid var(--slate-700); border-radius: 9999px; color: var(--slate-300); font-size: .8rem; text-decoration: none; }
.radar-filter:hover { border-color: var(--brand-500); color: var(--heading); }
.radar-filter:focus-visible { outline: 3px solid var(--focus-ring); outline-offset: 2px; }
.radar-filter.is-active { border-color: var(--brand-500); background: var(--filter-active-bg); color: var(--heading); box-shadow: inset 0 0 0 1px var(--brand-500); }
.radar-filter__count { min-width: 1.35rem; padding: .05rem .35rem; border-radius: 9999px; background: var(--slate-800); color: var(--slate-400); font-size: .7rem; text-align: center; }
.radar-filter.is-active .radar-filter__count { background: var(--brand-600); color: var(--on-brand); }
.radar-filter-more { flex: 1 1 100%; margin-top: .15rem; }
.radar-filter-more summary { width: fit-content; padding: .35rem .15rem; color: var(--brand-400); font-size: .8rem; font-weight: 700; cursor: pointer; }
.radar-filter-more summary:focus-visible { outline: 3px solid var(--focus-ring); outline-offset: 2px; }
.radar-filter-more__options { display: flex; flex-wrap: wrap; gap: .5rem; padding-top: .5rem; }
.search-results-count { margin: 0 0 1rem; color: var(--slate-300); }
.radar-live-search__domains { columns: 2; color: var(--slate-300); }
.radar-live-search__domains a { color: var(--brand-400); }
.radar-live-search__action { display: inline-flex; padding: .7rem 1rem; border: 1px solid var(--brand-500); border-radius: .65rem; background: var(--brand-600); color: var(--on-brand); font-weight: 700; text-decoration: none; }
.radar-live-search__action:hover { background: var(--brand-700); }
.radar-editorial, .radar-results, .radar-empty { margin-bottom: 1.25rem; padding: 1.25rem; border: 1px solid var(--card-border); border-radius: .75rem; background: var(--surface); }
.radar-editorial { border-color: rgba(99, 102, 241, .5); }
.radar-editorial h2, .radar-results h2, .radar-empty h2 { margin: 0 0 .75rem; color: var(--heading); }
.radar-editorial p, .radar-empty p, .radar-method { color: var(--slate-300); }
.radar-period { font-size: .8rem; color: var(--slate-500) !important; }
/* La marge negative collait la phrase de methode au chiffre qu'elle
   explique, sur la fiche outil comme sur les listes. */
.radar-method { margin-top: .9rem; color: var(--slate-400); font-size: .85rem; line-height: 1.5; max-width: 68ch; }
.radar-unavailable { border-color: var(--slate-700); background: var(--surface-subtle); }
.radar-unavailable h2 { color: var(--slate-300); font-size: 1rem; }
.radar-tool { display: grid; grid-template-columns: 2rem minmax(0, 1fr) auto; gap: 1rem 1.25rem; align-items: start; padding: 1.15rem 0; border-top: 1px solid var(--slate-800); }
.radar-tool__rank { padding-top: .1rem; color: var(--slate-500); font-weight: 700; font-variant-numeric: tabular-nums; text-align: right; }
.radar-tool__heading { display: flex; flex-wrap: wrap; gap: .5rem; align-items: center; }
.radar-tool__identity h3 { margin: 0; color: var(--heading); overflow-wrap: anywhere; }
/* Etoile des favoris. Masquee tant que favorites.js n'a pas confirme que le
   stockage local repond : un bouton visible mais sans effet vaut moins que pas
   de bouton du tout. La cible tactile fait 2.2rem, au-dessus du minimum de 24px
   recommande par WCAG 2.2 (critere 2.5.8). */
.favorite-toggle { display: inline-flex; align-items: center; justify-content: center; width: 2.2rem; height: 2.2rem; padding: 0; border: 1px solid transparent; border-radius: 9999px; background: none; color: var(--slate-400); font-size: 1.05rem; line-height: 1; cursor: pointer; transition: color .15s ease, background-color .15s ease; }
.favorite-toggle:hover { color: var(--kind-model); background: color-mix(in srgb, var(--kind-model) 12%, transparent); }
.favorite-toggle:focus-visible { outline: 2px solid var(--brand-500); outline-offset: 2px; }
.favorite-toggle.is-favorite { color: var(--kind-model); }
.favorite-toggle[hidden] { display: none; }
.favorites__intro { color: var(--slate-400); max-width: 60ch; }
.favorites__status { min-height: 1.4rem; color: var(--slate-400); font-size: .85rem; }
.favorites__notice { margin-top: 2rem; color: var(--slate-400); font-size: .8rem; max-width: 60ch; }
.favorites__clear { margin-top: 1rem; padding: .4rem .9rem; border: 1px solid var(--card-border); border-radius: .4rem; background: none; color: var(--slate-400); font-size: .85rem; cursor: pointer; }
.favorites__clear:hover { color: var(--heading); border-color: var(--brand-500); }
@media (prefers-reduced-motion: reduce) { .favorite-toggle { transition: none; } }
.entry-type-badge { display: inline-flex; align-items: center; min-height: 1.3rem; padding: .12rem .45rem; border: 1px solid var(--brand-500); border-radius: 9999px; color: var(--language-text); font-size: .65rem; font-weight: 700; letter-spacing: .025em; line-height: 1; }
/* Une teinte par type. Le fond reprend la teinte a faible opacite via
   color-mix, donc une seule variable suffit par categorie et les deux themes
   restent coherents sans dupliquer les regles. */
.entry-type-badge--library { --kind-color: var(--kind-library); }
.entry-type-badge--cli { --kind-color: var(--kind-cli); }
.entry-type-badge--mcp_server { --kind-color: var(--kind-mcp_server); }
.entry-type-badge--agent { --kind-color: var(--kind-agent); }
.entry-type-badge--model { --kind-color: var(--kind-model); }
.entry-type-badge--app { --kind-color: var(--kind-app); }
.entry-type-badge--skill { --kind-color: var(--kind-skill); }
.entry-type-badge--other { --kind-color: var(--kind-other); }
.entry-type-badge[class*="entry-type-badge--"] {
  border-color: color-mix(in srgb, var(--kind-color) 55%, transparent);
  background: color-mix(in srgb, var(--kind-color) 14%, transparent);
  color: var(--kind-color);
}
.vitality { display: flex; flex-wrap: wrap; gap: .35rem .55rem; align-items: center; width: fit-content; margin-top: .4rem; font-size: .72rem; }
.vitality-badge { display: inline-flex; gap: .35rem; align-items: center; padding: .14rem .4rem; border: 1px solid currentcolor; border-radius: .35rem; font-weight: 750; }
.vitality-badge::before { width: .42rem; height: .42rem; border-radius: 50%; background: currentcolor; content: ""; }
.vitality--active .vitality-badge { color: var(--success-text); }
.vitality--dormant .vitality-badge { color: var(--warning-text); }
.vitality--abandoned .vitality-badge { color: var(--danger-text); }
.vitality--unknown .vitality-badge { color: var(--slate-400); }
.vitality-date { color: var(--slate-400); }
.radar-tool__description { display: -webkit-box; max-width: 58rem; margin: .4rem 0; overflow: hidden; color: var(--slate-300); font-size: .875rem; line-height: 1.4; -webkit-box-orient: vertical; -webkit-line-clamp: 3; }
.radar-tool__description-origin { display: block; width: fit-content; margin-top: -.2rem; color: var(--slate-500); font-size: .68rem; }
.radar-tool__metadata { display: flex; flex-wrap: wrap; gap: .4rem; align-items: center; margin: .45rem 0; }
.radar-tool__language, .radar-tool__topic { padding: .12rem .45rem; border-radius: 9999px; font-size: .68rem; }
.radar-tool__language { border: 1px solid rgba(99, 102, 241, .7); color: var(--language-text); }
/* Aucune regle n'existait pour la licence : elle heritait du corps de texte,
   soit 16 px au milieu de pastilles de 11 px. */
.radar-tool__license { padding: .12rem .45rem; border: 1px solid var(--card-border); border-radius: 9999px; color: var(--slate-400); font-size: .68rem; white-space: nowrap; }
/* Les etoiles sont un chiffre, pas une etiquette : pas de pastille, mais une
   graisse qui les rend reperables quand on trie dessus. */
.radar-tool__stars { font-size: .68rem; font-weight: 700; color: var(--slate-300); white-space: nowrap; }
.radar-tool__downloads { font-size: .68rem; font-weight: 700; color: var(--kind-agent); white-space: nowrap; }
.radar-tool__topics { display: flex; flex-wrap: wrap; gap: .3rem; margin: 0; padding: 0; list-style: none; }
.radar-tool__topic { background: var(--slate-800); color: var(--slate-400); }
.radar-tool__source { color: var(--slate-500); font-size: .75rem; text-transform: uppercase; }
.radar-tool__external { display: inline-block; margin-top: .25rem; color: var(--external-link); font-size: .75rem; }
.radar-tool__install { display: flex; flex-wrap: wrap; gap: .35rem; align-items: center; margin: .45rem 0 0; color: var(--slate-400); font-size: .75rem; }
.radar-tool__install code { max-width: 100%; padding: .2rem .45rem; overflow-wrap: anywhere; border: 1px solid var(--slate-700); border-radius: .35rem; background: var(--code-bg); color: var(--code-text); user-select: all; }
.radar-tool__activity { display: block; width: fit-content; margin-top: .35rem; color: var(--success-text); font-size: .75rem; }
.radar-tool__activity.is-inactive { padding: .12rem .4rem; border: 1px solid var(--danger-text); border-radius: 9999px; color: var(--danger-text); font-weight: 600; }
.radar-tool__creation { display: block; width: fit-content; margin-top: .25rem; color: var(--slate-400); font-size: .75rem; }
.radar-tool__creation-marker { margin-left: .35rem; color: var(--violet-text); font-size: .68rem; font-weight: 600; text-transform: uppercase; letter-spacing: .04em; }
.radar-resource__label { display: block; width: fit-content; margin-top: .25rem; color: var(--violet-text); font-size: .7rem; font-weight: 600; text-transform: uppercase; letter-spacing: .04em; }
.radar-tool__momentum-source { display: block; width: fit-content; margin-top: .25rem; border: 1px solid currentcolor; border-radius: 9999px; padding: .1rem .4rem; font-size: .7rem; }
.radar-tool__momentum-source.is-measured { color: var(--success-text); }
.radar-tool__momentum-source.is-estimated { color: var(--warning-text); }
.radar-tool__metric { display: grid; justify-items: end; }
.radar-tool__metric > span { color: var(--slate-400); font-size: .75rem; }
.radar-tool__change.is-up { color: var(--success-text); }
.radar-tool__change.is-down { color: var(--danger-text); }
.radar-tool__change.is-stable { color: var(--warning-text); }
.radar-tool__change.is-pending { color: var(--slate-500); }

.tool-section { margin-bottom: 1.25rem; padding: 1.25rem; border: 1px solid var(--card-border); border-radius: .75rem; background: var(--surface); }
.tool-section h2 { margin: 0 0 .75rem; color: var(--heading); }
.tool-description { color: var(--slate-200); line-height: 1.65; }
.tool-source-link { color: var(--external-link); font-weight: 600; }
.tool-facts, .tool-classifications { display: grid; grid-template-columns: minmax(8rem, auto) 1fr; gap: .65rem 1rem; margin: 1rem 0; }
.tool-facts dt, .tool-classifications dt { color: var(--slate-500); font-size: .75rem; font-weight: 700; letter-spacing: .04em; text-transform: uppercase; }
.tool-facts dd, .tool-classifications dd { margin: 0; color: var(--slate-200); overflow-wrap: anywhere; }
.tool-classifications ul { display: flex; flex-wrap: wrap; gap: .35rem .75rem; margin: 0; padding: 0; list-style: none; }
.tool-current { display: flex; flex-wrap: wrap; gap: .75rem 1.25rem; align-items: center; }
.tool-current .radar-tool__metric { justify-items: start; }
.tool-history-wrap { max-height: 42rem; overflow: auto; }
.tool-history { width: 100%; border-collapse: collapse; }
.tool-history caption { padding: 0 0 .75rem; color: var(--slate-500); text-align: left; }
.tool-history th, .tool-history td { padding: .7rem .8rem; border-top: 1px solid var(--slate-800); color: var(--slate-200); text-align: left; }
.tool-history thead th { color: var(--slate-400); font-size: .75rem; text-transform: uppercase; }
.tool-history tbody th { font-weight: 500; }

.ad-slot { display: none; width: 100%; margin: 0; overflow: hidden; }
.ad-slot[data-ad-active="true"] { display: block; min-height: 15.625rem; margin: 1.5rem 0; }

.site-footer { padding: 1.5rem; border-top: 1px solid var(--slate-800); background: var(--chrome-bg); }
.site-footer nav { display: flex; flex-wrap: wrap; justify-content: center; gap: .75rem 1.25rem; }
.site-footer a, .site-footer button { padding: 0; border: 0; background: transparent; color: var(--slate-400); font-size: .875rem; text-decoration: none; }
.site-footer a:hover, .site-footer button:hover { color: var(--heading); text-decoration: underline; }

.cookie-banner { position: fixed; z-index: 1000; right: 1rem; bottom: 1rem; left: 1rem; padding: 1rem; border: 1px solid var(--brand-500); border-radius: 1rem; background: var(--banner-bg); box-shadow: var(--banner-shadow); }
.cookie-banner__content { width: min(100%, 58rem); margin: 0 auto; }
.cookie-banner h2 { margin: 0 0 .5rem; color: var(--heading); font-size: 1.25rem; }
.cookie-banner p { margin: 0; color: var(--slate-300); }
.cookie-banner__actions { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .75rem; margin-top: 1rem; }
.cookie-choice { min-height: 2.75rem; padding: .7rem 1rem; border: 2px solid var(--brand-500); border-radius: .65rem; background: var(--brand-600); color: var(--on-brand); font-weight: 700; }
.cookie-choice:hover { background: var(--brand-700); }
.cookie-choice:focus-visible, .site-footer button:focus-visible { outline: 3px solid var(--focus-ring); outline-offset: 3px; }

@media (min-width: 768px) {
  .md\:grid-cols-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .md\:grid-cols-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .md\:grid-cols-4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  .md\:col-span-1 { grid-column: span 1 / span 1; }
}

@media (max-width: 700px) {
  header { align-items: flex-start !important; flex-direction: column; gap: 1rem; }
  .radar-tool { grid-template-columns: 2rem minmax(0, 1fr); }
  .radar-tool__metric { grid-column: 2; justify-items: start; }
  .radar-search__controls { align-items: stretch; flex-direction: column; }
  .radar-filter-group { grid-template-columns: 1fr; gap: .35rem; }
  .radar-filter-group h3 { margin-top: 0; }
  .radar-filter { min-height: 2.75rem; }
  header nav { max-width: 100%; overflow-x: auto; padding-bottom: .25rem; }
  .legal-details { grid-template-columns: 1fr; }
  .legal-details dd { margin-bottom: .4rem; }
  .cookie-banner { right: .5rem; bottom: .5rem; left: .5rem; }
}

/* --- Zone entre l'en-tete et la liste -------------------------------------
   Elle empilait fil d'Ariane, titre, intro, recherche et filtres avec des
   marges heritees de chaque bloc, sans rythme commun : selon la page, le titre
   collait a l'intro ou flottait a dix rem du contenu. Un espacement unique
   remplace ces marges concurrentes. */
.page > * + * { margin-top: 0; }
.page .breadcrumbs { margin: 0 0 .75rem; }
.page > h1 + .radar-intro { margin-top: -.25rem; }
.radar-intro { max-width: 60ch; margin: 0 0 1.75rem; color: var(--slate-300); font-size: 1.05rem; line-height: 1.6; }
/* La barre de recherche et le panneau de filtres forment un bloc : les coller
   evite qu'ils paraissent appartenir a deux sections differentes. */
.page--wide .radar-search { margin-bottom: 1rem; }
.page--wide .radar-filter-panel { margin-bottom: 2rem; }
/* Sur un gabarit large, la recherche n'a pas besoin de toute la largeur : une
   ligne de saisie de 82rem est desagreable a viser. */
.page--wide .radar-search__controls { max-width: 46rem; }
/* Le compte de resultats servait de titre implicite sans en avoir l'allure. */
.search-results-count, .radar-view-count { margin: 0 0 1rem; color: var(--slate-400); font-size: .9rem; }

/* La metrique est le seul element aligne a droite : sans largeur minimale elle
   sautait d'une fiche a l'autre selon la longueur du nombre. */
.page--wide .radar-tool__metric { min-width: 9rem; }

/* ==========================================================================
   Fiche outil — hierarchie a trois niveaux
   --------------------------------------------------------------------------
   La fiche empilait dix blocs au meme poids visuel : nom, vitalite, lien
   source, description, origine de la description, langage, sujets, source,
   activite, anciennete, provenance du momentum. Aucun n'etait subordonne a un
   autre, d'ou l'impression de liste generique.

   Trois niveaux desormais : le nom, la description, puis tout le reste sur une
   ligne discrete.
   ========================================================================== */

/* Le filet de vitalite. C'est le seul signal que ni Glama, ni mcp.so, ni
   Smithery n'affichent : en balayant la page, on lit la sante de tout
   l'ecosysteme avant meme de lire un nom. Il ne remplace pas le badge, qui
   reste le porteur accessible de l'information. */
.page--wide .radar-tool { position: relative; padding-left: 1.1rem; }
.page--wide .radar-tool::before {
  position: absolute;
  top: 1.15rem;
  bottom: 1.15rem;
  left: 0;
  width: 3px;
  border-radius: 3px;
  background: var(--slate-700);
  content: "";
}
.page--wide .radar-tool[data-vitality="active"]::before { background: var(--success-text); }
.page--wide .radar-tool[data-vitality="dormant"]::before { background: var(--warning-text); }
.page--wide .radar-tool[data-vitality="archived"]::before,
.page--wide .radar-tool[data-vitality="abandoned"]::before { background: var(--danger-text); }
/* « Inconnu » n'est pas un mauvais etat, c'est une absence de mesure : un
   filet creux le dit sans le juger. */
.page--wide .radar-tool[data-vitality="unknown"]::before {
  background: repeating-linear-gradient(
    to bottom, var(--slate-700) 0 3px, transparent 3px 7px
  );
}

/* Le nom porte la fiche : il etait a la meme taille que le reste. */
.radar-tool__identity h3 { font-size: 1.075rem; letter-spacing: -.01em; }
.radar-tool__identity h3 a { text-decoration: none; }
.radar-tool__identity h3 a:hover { text-decoration: underline; }

/* Ligne de faits : cinq blocs devenus une ligne, separes par des points
   medians generes en CSS plutot que par du balisage. */
.radar-tool__facts {
  display: flex;
  flex-wrap: wrap;
  /* center, pas baseline : la ligne melange du texte nu et des pastilles
     bordees, dont la ligne de base ne coincide pas. Le separateur flottait
     donc, detache, a cote des pastilles. */
  gap: .35rem 1.1rem;
  align-items: center;
  margin: .55rem 0 0;
  color: var(--slate-500);
  font-size: .72rem;
}
/* Aucun separateur genere : un ::after se place DANS la boite de l'element,
   donc a l'interieur des pastilles bordees de la ligne ; et un ::before passe
   a la ligne avec l'element suivant, orphelin en debut de ligne sur mobile.
   L'espacement seul separe les faits, sans caractere a placer. */
.radar-tool__facts a { color: var(--slate-400); }
.radar-tool__facts a:hover { color: var(--brand-400); }

/* Provenance de la reformulation : information sur notre traitement, pas sur
   l'outil. Elle reste lisible par un lecteur d'ecran, sans occuper une ligne. */
.radar-tool__description-origin {
  margin: 0;
  color: var(--slate-600);
  font-size: .62rem;
  font-style: italic;
}

/* Le chiffre est ce que l'oeil cherche en premier dans une colonne : chiffres
   a chasse fixe pour qu'ils s'alignent d'une fiche a l'autre. */
.radar-tool__metric strong { font-variant-numeric: tabular-nums; font-size: 1.15rem; letter-spacing: -.02em; }

/* Fiche outil : la description et l'etoile de favori partagent une ligne, le
   bouton reste cale a droite quel que soit le nombre de lignes du texte. */
.tool-heading { display: flex; gap: 1rem; align-items: flex-start; justify-content: space-between; }
.tool-heading .tool-description { margin: 0; }
.tool-heading .favorite-toggle { flex: 0 0 auto; }

/* Detail de methode replie : la transparence sur le calcul reste accessible
   sans occuper cinq lignes au-dessus des resultats. */
.radar-method-detail { margin: 0 0 1.5rem; }
.radar-method-detail summary { width: fit-content; color: var(--brand-400); font-size: .8rem; font-weight: 700; cursor: pointer; }
.radar-method-detail summary:focus-visible { outline: 3px solid var(--focus-ring); outline-offset: 3px; }
.radar-method-detail p { margin: .6rem 0 0; max-width: 72ch; color: var(--slate-400); font-size: .82rem; line-height: 1.55; }

/* Le constat de maintenance : la seule phrase que la recherche GitHub ne peut
   pas ecrire. Elle merite d'etre lue avant les resultats, pas apres. */
.maintenance-verdict { margin: 0 0 1rem; padding: .7rem .95rem; border-left: 3px solid var(--warning-text); border-radius: 0 .5rem .5rem 0; background: color-mix(in srgb, var(--warning-text) 10%, transparent); color: var(--heading); font-size: .92rem; }

/* Observatoire A2A. Le graphique est en SVG et non en div stylees : la
   politique de securite du site interdit style-src 'unsafe-inline', et les
   attributs de presentation SVG (x, y, width, height) n'en sont pas. */
.a2a-chart { margin: 0; }
.a2a-chart__svg { display: block; width: 100%; height: 11rem; overflow: visible; }
.a2a-chart__bar { fill: var(--brand-400); }
.a2a-chart__tick { fill: var(--slate-400); font-size: 9px; }
.a2a-chart__note { margin: .75rem 0 0; color: var(--slate-300); font-size: .82rem; }
.a2a-chart__data { margin-top: .75rem; }
.a2a-chart__data summary { color: var(--brand-400); font-size: .82rem; font-weight: 700; cursor: pointer; }
.a2a-chart__data summary:focus-visible { outline: 3px solid var(--focus-ring); outline-offset: 3px; }
.a2a-table th, .a2a-table td { vertical-align: top; }
.a2a-project { min-width: 16rem; }
.a2a-project__name { display: block; }
.a2a-project__name a { color: var(--brand-400); font-weight: 700; }
.a2a-project__desc { display: block; margin-top: .2rem; color: var(--slate-400); font-size: .78rem; font-weight: 400; }
.a2a-measured, .a2a-empty { color: var(--slate-300); font-size: .82rem; }
.a2a-chart__bar--partial { fill: var(--slate-400); }
.a2a-partial { color: var(--slate-400); font-size: .78rem; font-weight: 400; }
.a2a-project__source { margin-left: .5rem; color: var(--slate-400); font-size: .72rem; font-weight: 400; }
.a2a-project__source:hover { color: var(--brand-400); }
.a2a-directory-link { margin: 1.5rem 0; }
.a2a-directory-link a { color: var(--brand-400); font-weight: 700; }

/* Outils voisins sur les fiches. */
.related-tools { display: grid; grid-template-columns: repeat(auto-fit, minmax(15rem, 1fr)); gap: .65rem; margin: 1rem 0 0; padding: 0; list-style: none; }
.related-tool { padding: .75rem; border: 1px solid var(--slate-700); border-radius: .6rem; background: var(--surface-subtle); }
.related-tool__name { display: block; color: var(--brand-400); font-weight: 700; }
.related-tool__desc { display: block; margin-top: .25rem; color: var(--slate-300); font-size: .8rem; }
.related-tool__topics { display: block; margin-top: .4rem; color: var(--slate-400); font-size: .72rem; }

/* ==========================================================================
   Couche editoriale. Elle vient apres tout le reste et n'en remplace rien :
   les regles ci-dessus continuent de gouverner la structure, celles-ci ne
   touchent qu'a la typographie, aux filets et au rythme vertical.
   ========================================================================== */

/* Colonne de lecture. Cinquante-huit rem tenaient plus de cent signes par
   ligne : au-dela de soixante-quinze, l'oeil perd le debut de la ligne
   suivante. La mesure est donc exprimee en signes, pas en pixels. */
.page--prose { width: min(100% - 2rem, 68ch); }
.legal-page { width: min(100% - 2rem, 68ch); }
.page--prose, .legal-page { font-size: 1.0625rem; line-height: 1.7; }

/* Titres en serif. C'est le seul geste vraiment visible de l'identite, et il
   ne coute aucune requete : la pile est entierement systeme. */
.page h1, .legal-page h1, .page h2, .legal-page h2, .tool-section h2, .card h2 {
  font-family: var(--font-serif);
  font-weight: 600;
  letter-spacing: -0.015em;
}
.page h1, .legal-page h1 {
  margin: .5rem 0 1rem;
  font-size: clamp(1.9rem, 4.2vw, 2.5rem);
  line-height: 1.2;
}
.page h2, .tool-section h2 { font-size: 1.3rem; line-height: 1.3; }

/* Le sous-titre d'une page : ce qu'on lit juste apres le titre. */
.radar-intro, .source-intro, .favorites__intro {
  max-width: 62ch;
  color: var(--slate-300);
  font-size: 1.0625rem;
  line-height: 1.7;
}

/* Cartes et sections : filet d'un cheveu, pas d'ombre. Une ombre sur fond
   papier fait flotter le bloc ; un filet le pose. */
.card, .tool-section, .home-stat, .radar-domain-card, .related-tool,
.source-card, .radar-filter-panel, .home-recent__item {
  border-color: var(--card-border);
  border-radius: var(--radius);
  box-shadow: none;
}

/* Les chiffres sont le produit : chasse fixe pour que les colonnes
   s'alignent, et graisse pour qu'ils prennent le pas sur leur legende. */
.home-stat strong, .a2a-chart__data td, .source-table td, .radar-tool__metric {
  font-variant-numeric: tabular-nums;
}
.home-stat strong {
  font-family: var(--font-serif);
  font-size: 1.75rem;
  font-weight: 600;
  letter-spacing: -0.02em;
}
.home-stat { background: var(--surface); }

/* Tableaux : filets horizontaux seuls, comme dans une revue. Les bordures
   verticales decoupent la lecture sans rien apporter. */
.source-table { border-collapse: collapse; width: 100%; }
.source-table th, .source-table td {
  padding: .7rem .75rem;
  border: 0;
  border-bottom: 1px solid var(--card-border);
  text-align: left;
  vertical-align: top;
}
.source-table thead th {
  color: var(--slate-400);
  font-size: .78rem;
  font-weight: 600;
  letter-spacing: .04em;
  text-transform: uppercase;
}
.source-table tbody tr:last-child th, .source-table tbody tr:last-child td {
  border-bottom: 0;
}

/* Chrome discret : la barre de navigation ne doit pas concurrencer le titre. */
.site-header { border-bottom: 1px solid var(--card-border); background: var(--chrome-bg); }
.site-header__brand-name { font-family: var(--font-serif); font-weight: 600; letter-spacing: -0.01em; }
.site-header__link { color: var(--slate-300); font-size: .9rem; }
.site-header__link.is-active { color: var(--heading); font-weight: 600; }

/* Liens de contenu : soulignes, avec une ligne qui ne colle pas au texte.
   Un lien qui ne se distingue que par la couleur echoue pour un daltonien. */
.page p a, .radar-intro a, .tool-section p a, .legal-page a {
  color: var(--brand-500);
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: .2em;
}
.page p a:hover, .tool-section p a:hover { color: var(--brand-700); }

code, .a2a-chart__tick { font-family: var(--font-mono); }
code { padding: .1em .35em; border-radius: var(--radius-sm); background: var(--code-bg); color: var(--code-text); font-size: .9em; }

.site-footer { border-top: 1px solid var(--card-border); }

/* Onglet actif : un souligne plutot qu'une pastille pleine. Sur un fond papier,
   un aplat de couleur au milieu de la navigation attire l'oeil avant le titre
   de la page, ce qui est exactement l'inverse de ce qu'on veut. */
.site-header__link.is-active {
  color: var(--heading);
  background: transparent;
  box-shadow: inset 0 -2px 0 var(--brand-500);
  border-radius: 0;
}
.site-header__theme[aria-pressed="true"] {
  color: var(--heading);
  background: var(--surface-subtle);
  box-shadow: inset 0 0 0 1px var(--card-border);
}

/* Bandeau de consentement. Il annonce qu'aucune regie n'est configuree : il
   n'a aucune raison d'etre l'element le plus voyant de chaque page. Deux
   boutons pleins cote a cote pesaient plus lourd que le titre de l'article. */
.cookie-banner__content { width: min(100%, 44rem); }
.cookie-banner h2 { font-family: var(--font-serif); font-size: 1.05rem; }
.cookie-banner p { font-size: .875rem; line-height: 1.55; }
.cookie-banner__actions { grid-template-columns: repeat(2, auto); justify-content: flex-end; gap: .5rem; }
.cookie-choice {
  padding: .5rem 1rem;
  border: 1px solid var(--card-border);
  border-radius: var(--radius-sm);
  background: var(--surface);
  color: var(--slate-200);
  font-size: .875rem;
  font-weight: 500;
}
.cookie-choice:hover { background: var(--surface-subtle); }
/* Les deux boutons sont strictement identiques : meme fond, meme bordure,
   meme graisse, meme taille. La CNIL demande que refuser soit aussi simple
   qu'accepter, et un aplat de couleur sur le seul bouton « accepter » est
   precisement le motif qu'elle sanctionne. Aucune regle ne doit distinguer
   [data-cookie-accept] de [data-cookie-refuse] ici. */

/* ==========================================================================
   Ce qui distingue KoPass. Ecrit apres le retour du 2026-08-17 : « les carres
   comme ca, ca fait copier-coller ». C'etait exact — une grille de blocs
   bordes est le degre zero de l'interface, on la trouve sur tous les sites.
   Le contenu n'est plus enferme : il est separe. Un filet horizontal ouvre
   chaque section, le blanc fait le reste. C'est la mise en page d'une revue,
   pas d'un tableau de bord, et elle correspond a ce que le site publie.
   ========================================================================== */

.card, .tool-section, .home-maintenance, .home-catalogue, .home-recent,
.source-card, .radar-filter-panel, .related-tool, .home-stat, .home-recent__item {
  border: 0;
  border-radius: 0;
  background: transparent;
  box-shadow: none;
  padding: 0;
}

/* Le filet d'ouverture de section. Il ne fait pas toute la largeur : il
   s'arrete court, comme un trait de plume, et c'est ce decrochage qui donne
   son caractere a la page. */
.tool-section, .home-maintenance, .home-recent, .source-card {
  margin: 2.75rem 0 0;
  padding-top: 1.5rem;
  border-top: 1px solid var(--card-border);
}
.tool-section::before, .home-maintenance::before, .home-recent::before,
.source-card::before {
  display: block;
  width: 3.5rem;
  height: 2px;
  margin: -1.5rem 0 1.25rem;
  background: var(--brand-500);
  content: "";
}
.home-maintenance { border-left: 0; }

/* Les blocs qui restent groupes le sont par l'espace, pas par une bordure. */
.related-tools { gap: 1.5rem 2rem; }
.related-tool { padding: 0; }
.home-recent__list { gap: 1.25rem; }
.home-recent__item { padding: 0; border: 0; }

/* Un chiffre editorial : grand, en serif, pose sur un filet. Rien autour.
   C'est la forme qu'on donne a une donnee dans une publication imprimee, et
   elle se lit mieux qu'une carte bordee parce que rien ne la concurrence. */
.home-stats {
  display: flex;
  flex-wrap: wrap;
  gap: 1.75rem 2.5rem;
  margin: 1.5rem 0 0;
  padding: 0;
  list-style: none;
}
.home-stat {
  /* Largeur fixe pour que les filets s'alignent sur une meme trame. Laisser
     chaque filet epouser son libelle donnait quatre longueurs differentes,
     ce qui se lit comme un defaut de fabrication plutot que comme un rythme. */
  flex: 0 0 auto;
  width: 10rem;
  padding-top: .5rem;
  border-top: 2px solid var(--heading);
}
.home-stat strong {
  display: block;
  margin: 0 0 .15rem;
  font-size: 2.1rem;
  line-height: 1;
}
.home-stat span {
  display: block;
  color: var(--slate-400);
  font-size: .8rem;
  line-height: 1.4;
}

/* Le formulaire de recherche garde un contour : c'est un champ, il doit se
   designer comme tel. Mais un seul filet, pas une carte. */
.radar-search { padding: 0; border: 0; background: transparent; }

/* La marque et sa devise. Trois mots sous le nom, en serif italique : c'est
   la seule chose qu'un annuaire concurrent ne peut pas ecrire, puisqu'il ne
   mesure rien dans le temps. */
.site-header__brand-text { display: flex; flex-direction: column; line-height: 1.1; }
.site-header__tagline {
  color: var(--slate-400);
  font-family: var(--font-serif);
  font-size: .7rem;
  font-style: italic;
  letter-spacing: .01em;
}

/* Les domaines et les entrees de classement suivaient le meme traitement en
   cartes. Ils passent en liste : un filet fin les separe, le nom porte le
   poids. Une grille de blocs bordes derriere un texte editorial cassait la
   page en deux moities qui ne se ressemblaient pas. */
.radar-domain-grid { gap: 0; }
.radar-domain-card {
  padding: 1.1rem 0;
  border: 0;
  border-top: 1px solid var(--card-border);
  border-radius: 0;
  background: transparent;
}
.radar-domain-card:first-child { border-top: 0; }
.radar-domain-card h2, .radar-domain-card h3 { margin: 0 0 .3rem; font-size: 1.15rem; }
.radar-domain-card__count { color: var(--slate-400); font-size: .8rem; }

.radar-tool {
  padding: 1.25rem 0;
  border: 0;
  border-top: 1px solid var(--card-border);
  border-radius: 0;
  background: transparent;
}
.radar-tool:first-child { border-top: 0; }