/* ---------------------------------------- page Le texte de la Bible (manuscrits)
   Styles propres à manuscrits.html, à fusionner dans site.css. Aucune couleur
   en dur : tout vient des jetons de site.css. Trois teintes de données
   distinguent l'Ancien Testament (--plan-0), le Nouveau (--plan-1) et la
   Bible entière (--plan-2) ; les confessions de l'arbre des traductions
   reprennent la même palette. */

.ms-page { padding-bottom: var(--s7); }
.ms-crumb { font-size: .85rem; color: var(--ink-faint); margin: var(--s4) 0 var(--s2); }
.ms-crumb a { color: var(--ink-soft); }

/* Ancre : laisser la place de l'en-tête collant. */
.ms-page [id] { scroll-margin-top: 5rem; }

.ms-lead { color: var(--ink-soft); max-width: 46rem; }
.ms-note { font-size: .84rem; color: var(--ink-faint); max-width: 46rem; }
.ms-caution {
  max-width: 46rem; padding: var(--s3) var(--s4); border-left: 3px solid var(--orange);
  background: var(--bg-alt); border-radius: 0 var(--radius-sm) var(--radius-sm) 0; font-size: .92rem;
}
.ms-callout {
  padding: var(--s3) var(--s4); border: 1px solid var(--border); border-radius: var(--radius-sm);
  background: var(--surface); max-width: 46rem;
}
.ms-sub { font-size: 1rem; margin: var(--s5) 0 var(--s3); }
.ms-nowrap { white-space: nowrap; }
.ms-stack-only { display: none; }
@media (max-width: 720px) { .ms-stack-only { display: inline; } }
.ms-count { font-size: .84rem; color: var(--ink-faint); margin: var(--s2) 0; font-variant-numeric: tabular-nums; }

/* Le P gothique (𝔓) et le 𝔐 : polices mathématiques quand il y en a une. */
.ms-frak { font-family: "Noto Sans Math", "STIX Two Math", "Cambria Math", "Segoe UI Symbol", "Apple Symbols", serif; }

/* --------------------------------------------------------- chiffres clés */
.ms-figures {
  list-style: none; margin: 0 0 var(--s5); padding: 0;
  display: grid; gap: var(--s2); grid-template-columns: repeat(auto-fit, minmax(min(100%, 9rem), 1fr));
}
.ms-figures li {
  background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius);
  padding: var(--s3) var(--s4); display: grid; gap: var(--s1); align-content: start;
}
.ms-figures strong {
  font-family: var(--font-read); font-size: 1.45rem; line-height: 1.1; color: var(--blue-ink);
  font-variant-numeric: tabular-nums;
}
.ms-figures span { font-size: .84rem; color: var(--ink-soft); line-height: 1.4; }

/* ---------------------------------------------------------------- sommaire */
.ms-toc {
  background: var(--bg-alt); border-radius: var(--radius); padding: var(--s4) var(--s5);
  margin: 0 0 var(--s6);
}
.ms-toc-head { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--s2); margin-bottom: var(--s2); }
.ms-toc-head .btn { min-height: var(--tap); }
.ms-toc h2 { font-size: .8rem; text-transform: uppercase; letter-spacing: .08em; color: var(--ink-faint); margin: 0; }
.ms-toc ol { margin: 0; padding-left: 1.5rem; columns: 2 16rem; column-gap: var(--s6); }
.ms-toc li { break-inside: avoid; }
.ms-toc a {
  display: inline-flex; align-items: center; min-height: var(--tap); color: var(--ink);
  text-decoration: none; padding: 0 var(--s1);
}
.ms-toc a:hover { color: var(--accent); text-decoration: underline; }

/* ---------------------------------------------------------------- sections */
.ms-section { margin-top: var(--s7); }
.ms-section > h2 { display: flex; align-items: baseline; gap: var(--s3); text-wrap: balance; }
.ms-num {
  flex: 0 0 auto; font-size: .9rem; font-weight: 700; color: var(--accent-ink); background: var(--accent);
  min-width: 2rem; height: 2rem; border-radius: 999px; display: inline-grid; place-items: center;
  transform: translateY(-.15em);
}

/* Groupes repliables. */
.ms-group { border-top: 1px solid var(--border); }
.ms-group:last-child { border-bottom: 1px solid var(--border); }
.ms-group > summary {
  list-style: none; cursor: pointer; display: flex; align-items: center; gap: var(--s3);
  min-height: var(--tap); padding: var(--s3) 0;
}
.ms-group > summary::-webkit-details-marker { display: none; }
.ms-group > summary::before {
  content: ""; flex: 0 0 auto; width: .55rem; height: .55rem; margin-left: .2rem;
  border-right: 2px solid var(--ink-faint); border-bottom: 2px solid var(--ink-faint);
  transform: rotate(-45deg); transition: transform var(--fast) var(--ease);
}
.ms-group[open] > summary::before { transform: rotate(45deg); }
.ms-group > summary h3 { margin: 0; font-size: 1.12rem; }
.ms-group > summary h4, .ms-group > summary h5 { margin: 0; font-size: 1.02rem; }
.ms-group > summary:hover :is(h3, h4, h5) { color: var(--accent); }
/* La Bible dans d'autres langues : une histoire par langue, repliée. */
.ms-other { margin-left: var(--s3); }
.ms-other > summary .tag { margin-left: var(--s2); font-weight: 400; vertical-align: middle; }
.ms-group > summary:focus-visible { outline: 2px solid var(--focus); outline-offset: 2px; border-radius: var(--radius-sm); }
.ms-group-body { padding: 0 0 var(--s5); }

/* ---------------------------------------------------------------- fiches */
.ms-cards { display: grid; align-items: start; gap: var(--s3); grid-template-columns: repeat(auto-fill, minmax(min(100%, 19rem), 1fr)); margin: var(--s3) 0; }
.ms-card {
  min-width: 0; background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius);
  padding: var(--s4); display: flex; flex-direction: column; gap: var(--s2);
}
.ms-card > p { margin: 0; }
.ms-card-wide { margin: var(--s3) 0; }
.ms-card-head { display: grid; gap: var(--s1); }
.ms-card-head h4 { margin: 0; font-size: 1.02rem; line-height: 1.3; }
.ms-date { margin: 0; font-size: .8rem; color: var(--orange-ink); font-weight: 600; }
.ms-sigle {
  justify-self: start; font-family: var(--font-read); font-weight: 700; font-size: .92rem;
  color: var(--blue-ink); background: var(--bg-alt); border: 1px solid var(--border);
  border-radius: var(--radius-sm); padding: .05rem .45rem;
}
.ms-sigle a { color: inherit; text-decoration: none; }
.ms-src { font-size: .78rem; color: var(--ink-faint); margin: var(--s1) 0 0 !important; padding-top: var(--s2); border-top: 1px dashed var(--border); }
.ms-src span { text-transform: uppercase; letter-spacing: .06em; font-weight: 600; margin-right: .3rem; }
.ms-warning { border-left: 4px solid var(--orange); }

/* Échantillons d'écriture. */
.ms-sample-fig { margin: 0; padding: var(--s2) var(--s3); background: var(--bg-alt); border-radius: var(--radius-sm); }
.ms-sample { margin: 0; font-size: 1.6rem; line-height: 1.5; overflow-wrap: anywhere; }
.ms-sample.is-hebrew { font-family: var(--font-hebrew); }
.ms-sample.is-greek { font-family: var(--font-greek); letter-spacing: .04em; }
.ms-sample-fig figcaption { font-size: .76rem; color: var(--ink-faint); }

/* Débat : deux lectures côte à côte. */
.ms-debat { margin-top: var(--s2); border: 1px solid var(--border); border-radius: var(--radius-sm); background: var(--bg-alt); padding: var(--s3); }
.ms-debat-title { margin: 0 0 var(--s2); font-size: .72rem; text-transform: uppercase; letter-spacing: .08em; font-weight: 700; color: var(--ink-faint); }
.ms-debat dl { margin: 0; display: grid; gap: var(--s3); grid-template-columns: repeat(auto-fit, minmax(min(100%, 14rem), 1fr)); }
.ms-debat dt { font-weight: 650; font-size: .86rem; color: var(--blue-ink); }
.ms-debat div + div dt { color: var(--orange-ink); }
.ms-debat dd { margin: var(--s1) 0 0; font-size: .9rem; }

/* Listes datées. */
.ms-timeline { list-style: none; margin: var(--s3) 0; padding: 0; display: grid; gap: 0; max-width: 52rem; }
.ms-timeline li {
  display: grid; grid-template-columns: 9rem minmax(0, 1fr); gap: var(--s3);
  padding: var(--s3) 0; border-bottom: 1px solid var(--border);
}
.ms-tl-date { font-weight: 650; color: var(--orange-ink); font-size: .88rem; font-variant-numeric: tabular-nums; }
.ms-timeline strong { color: var(--ink); }
@media (max-width: 560px) {
  .ms-timeline li { grid-template-columns: minmax(0, 1fr); gap: var(--s1); }
}

.ms-two { display: grid; gap: var(--s5); grid-template-columns: repeat(auto-fit, minmax(min(100%, 20rem), 1fr)); }
.ms-quote { font-family: var(--font-read); font-size: 1.08rem; padding-left: var(--s3); border-left: 3px solid var(--blue); max-width: 46rem; }

.ms-types { list-style: none; padding: 0; margin: 0; display: grid; gap: var(--s2); grid-template-columns: repeat(auto-fill, minmax(min(100%, 19rem), 1fr)); }
.ms-types li { background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius-sm); padding: var(--s3); }
.ms-types p { margin: 0 0 var(--s1); }

/* ---------------------------------------------------------------- onglets */
.ms-tabs { margin: var(--s4) 0 var(--s3); }
.ms-tabs .chip { min-height: var(--tap); }
.ms-tabpanel { padding-top: var(--s2); }
.ms-panel-title { font-size: 1.15rem; margin: var(--s3) 0 var(--s2); }

/* Diagramme des copies de Qumrân : barre pleine = minimum, claire = marge. */
.ms-copies { margin: var(--s4) 0; max-width: 46rem; }
.ms-copies figcaption { font-size: .84rem; color: var(--ink-soft); margin-bottom: var(--s2); }
.ms-copies ul { list-style: none; margin: 0; padding: 0; display: grid; gap: .35rem; }
.ms-copies li { display: grid; grid-template-columns: minmax(7rem, 15rem) minmax(0, 1fr) 7.5rem; align-items: center; gap: var(--s2); font-size: .86rem; }
.ms-copies-bar { display: flex; height: .8rem; background: var(--bg-alt); border-radius: 999px; overflow: hidden; }
.ms-copies-bar .lo { background: var(--plan-0); }
.ms-copies-bar .hi { background: color-mix(in srgb, var(--plan-0) 40%, transparent); }
.ms-copies-n { color: var(--ink-faint); font-variant-numeric: tabular-nums; }
@media (max-width: 560px) {
  .ms-copies li { grid-template-columns: minmax(0, 1fr) 6.5rem; }
  .ms-copies-bar { grid-column: 1 / -1; grid-row: 2; }
}

.ms-variant-rows { margin: 0; display: grid; gap: var(--s2); }
.ms-variant-rows dt { font-size: .74rem; text-transform: uppercase; letter-spacing: .06em; color: var(--ink-faint); font-weight: 600; }
.ms-variant-rows dd { margin: 0; }

/* ---------------------------------------------------------------- tableaux */
.ms-table-wrap { margin: var(--s3) 0; }
.ms-table-wrap.is-scroll { overflow-x: auto; }
.ms-table { width: 100%; border-collapse: collapse; font-size: .9rem; background: var(--surface); }
.ms-table caption { text-align: left; font-weight: 650; padding: 0 0 var(--s2); }
.ms-table th, .ms-table td { text-align: left; vertical-align: top; padding: .55rem .6rem; border-bottom: 1px solid var(--border); }
.ms-table thead th {
  font-size: .74rem; text-transform: uppercase; letter-spacing: .05em; color: var(--ink-faint);
  border-bottom: 1px solid var(--border-strong); background: var(--bg-alt);
}
.ms-table tbody th { font-weight: 650; }
.ms-table small { display: block; color: var(--ink-faint); font-size: .8rem; margin-top: .2rem; }
.ms-table .ms-n { font-variant-numeric: tabular-nums; white-space: nowrap; }
.ms-table tr.is-total th, .ms-table tr.is-total td { font-weight: 700; border-top: 2px solid var(--border-strong); }
.ms-table tbody tr:target { background: color-mix(in srgb, var(--orange) 14%, transparent); }
.ms-sort {
  font: inherit; text-transform: inherit; letter-spacing: inherit; color: inherit; background: none; border: 0;
  padding: 0; min-height: var(--tap); cursor: pointer; display: inline-flex; align-items: center; gap: .3rem;
}
.ms-sort:hover { color: var(--accent); }
th[aria-sort="ascending"] .ms-sort span::after { content: "▲"; font-size: .7em; }
th[aria-sort="descending"] .ms-sort span::after { content: "▼"; font-size: .7em; }
th[aria-sort="ascending"] .ms-sort, th[aria-sort="descending"] .ms-sort { color: var(--accent); }
.ms-temoins .tag { margin-top: var(--s1); }
.ms-test-at { border-color: var(--plan-0); }
.ms-test-nt { border-color: var(--plan-1); }
.ms-test-both { border-color: var(--plan-2); }
.ms-cmp-oui { color: var(--blue-ink); font-weight: 600; }
.ms-cmp-non { color: var(--ink-faint); }
.ms-cmp-autre { color: var(--orange-ink); }
.ms-compare td, .ms-compare th { white-space: nowrap; }
/* La colonne des passages reste visible pendant le défilement horizontal. */
.ms-compare tbody th, .ms-compare thead th:first-child { position: sticky; left: 0; z-index: 1; background: var(--surface); }
.ms-compare thead th:first-child { background: var(--bg-alt); }
.ms-filterbar { display: grid; gap: var(--s2); }
.ms-filterbar .chip, .ms-page .filters .chip { min-height: var(--tap); }

/* Sur petit écran, un tableau « empilable » devient une suite de cartes :
   chaque cellule reprend son intitulé de colonne. */
@media (max-width: 720px) {
  .ms-table.is-stack, .ms-table.is-stack tbody, .ms-table.is-stack tr, .ms-table.is-stack th, .ms-table.is-stack td { display: block; width: 100%; }
  .ms-table.is-stack caption { display: block; }
  .ms-table.is-stack thead { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); }
  .ms-table.is-stack thead .ms-sort { position: static; }
  .ms-table.is-stack tr { border: 1px solid var(--border); border-radius: var(--radius-sm); margin-bottom: var(--s2); padding: var(--s2) var(--s3); background: var(--surface); }
  .ms-table.is-stack th, .ms-table.is-stack td { border: 0; padding: .25rem 0; }
  .ms-table.is-stack td[data-label]::before {
    content: attr(data-label); display: block; font-size: .7rem; text-transform: uppercase; letter-spacing: .06em; color: var(--ink-faint);
  }
  .ms-table.is-stack .ms-n, .ms-nowrap { white-space: normal; }
  /* Deux cellules courtes côte à côte pour raccourcir chaque carte. */
  .ms-table.is-stack tbody tr { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); column-gap: var(--s3); }
  .ms-table.is-stack tbody th, .ms-table.is-stack tbody td { grid-column: 1 / -1; }
  .ms-table.is-stack tbody td.ms-half { grid-column: auto; }
  .ms-table { background: none; }
}
/* Sur téléphone, le tri reste accessible : on affiche une barre de tri. */
@media (max-width: 720px) {
  .ms-table.is-stack.ms-temoins thead { position: static; width: auto; height: auto; overflow: visible; clip-path: none; display: block; }
  .ms-table.is-stack.ms-temoins thead tr { display: flex; flex-wrap: wrap; gap: var(--s2); border: 0; padding: 0; background: none; margin-bottom: var(--s2); }
  .ms-table.is-stack.ms-temoins thead th { display: none; width: auto; }
  .ms-table.is-stack.ms-temoins thead th[data-sort] { display: block; background: none; border: 0; padding: 0; }
  .ms-table.is-stack.ms-temoins thead .ms-sort { border: 1px solid var(--border-strong); border-radius: var(--radius-btn); padding: 0 .75rem; background: var(--surface); }
}

/* ------------------------------------------------------------- passages */
.ms-passage { border: 1px solid var(--border); border-radius: var(--radius-sm); background: var(--surface); margin-bottom: var(--s2); }
.ms-passage > summary { cursor: pointer; min-height: var(--tap); padding: var(--s3); display: flex; flex-wrap: wrap; align-items: center; gap: var(--s2); font-weight: 650; }
.ms-passage > summary:hover { color: var(--accent); }
.ms-passage[open] > summary { border-bottom: 1px solid var(--border); }
.ms-passage > dl, .ms-passage > p { padding: 0 var(--s3); }
.ms-passage > dl { padding-top: var(--s3); }

/* ---------------------------------------------------------------- canon */
.ms-tanakh { margin: var(--s3) 0; }
.ms-tanakh-grid { display: grid; gap: var(--s3); grid-template-columns: repeat(auto-fit, minmax(min(100%, 17rem), 1fr)); }
.ms-tanakh-col { background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius); padding: var(--s4); border-top: 4px solid var(--plan-0); }
.ms-tanakh-col:nth-child(2) { border-top-color: var(--plan-1); }
.ms-tanakh-col:nth-child(3) { border-top-color: var(--plan-2); }
.ms-tanakh-col h4 { margin: 0; font-size: 1.1rem; }
.ms-tanakh-col h4 small { font-weight: 400; color: var(--ink-soft); font-size: .88rem; }
.ms-tanakh-count { font-size: .84rem; color: var(--ink-soft); margin: var(--s1) 0 var(--s3); }
.ms-tanakh-col ul { list-style: none; margin: 0; padding: 0; display: grid; gap: .45rem; }
.ms-tanakh-col li { display: flex; flex-wrap: wrap; align-items: center; gap: .2rem .5rem; }
.ms-tanakh-heb { font-size: .82rem; font-style: italic; color: var(--ink-faint); }
.ms-tanakh-fr { display: flex; flex-wrap: wrap; gap: .25rem; }
.ms-tanakh-fr .tag { color: var(--ink); }
.ms-tanakh figcaption { margin-top: var(--s2); font-size: .9rem; font-weight: 600; }

/* ------------------------------------------------------ arbre des Bibles */
.ms-scroll { overflow-x: auto; border: 1px solid var(--border); border-radius: var(--radius); background: var(--surface); }
.ms-scroll:focus-visible { outline: 2px solid var(--focus); outline-offset: 2px; }
.ms-tree { display: block; width: 100%; height: auto; font-family: var(--font-ui); }
.ms-band { fill: transparent; }
.ms-band.is-alt { fill: var(--bg-alt); }
.ms-lane-name { font-size: 11px; font-weight: 700; fill: var(--ink-faint); text-transform: uppercase; letter-spacing: .06em; }
.ms-tick line { stroke: var(--border); stroke-width: 1; }
.ms-tick text { font-size: 11px; fill: var(--ink-faint); text-anchor: middle; font-variant-numeric: tabular-nums; }
.ms-edge { fill: none; stroke: var(--ink-faint); stroke-width: 1.5; }
.ms-edge.is-infl { stroke-dasharray: 5 4; }
.ms-edge.is-fin { stroke-dasharray: 1.5 3.5; stroke-linecap: round; }
.ms-node { stroke: var(--surface); stroke-width: 1.5; }
.ms-node.is-site { stroke: var(--ink); stroke-width: 2; }
.ms-node.is-lost { opacity: .55; }
.ms-node.c0, .ms-swatch.c0 { fill: var(--plan-0); background: var(--plan-0); }
.ms-node.c1, .ms-swatch.c1 { fill: var(--plan-1); background: var(--plan-1); }
.ms-node.c2, .ms-swatch.c2 { fill: var(--plan-2); background: var(--plan-2); }
.ms-node.c3, .ms-swatch.c3 { fill: var(--plan-3); background: var(--plan-3); }
.ms-node.c4, .ms-swatch.c4 { fill: var(--plan-4); background: var(--plan-4); }
.ms-node.c5, .ms-swatch.c5 { fill: var(--plan-5); background: var(--plan-5); }
.ms-node.cx, .ms-swatch.cx { fill: var(--ink-faint); background: var(--ink-faint); }
.ms-tree-label { font-size: 12px; fill: var(--ink); }
/* Halo de la couleur du fond : les traits passent derrière les étiquettes. */
.ms-tree-label, .ms-lane-name { paint-order: stroke; stroke: var(--surface); stroke-width: 5px; stroke-linejoin: round; }
.ms-tree-label.on-alt, .ms-lane-name.on-alt { stroke: var(--bg-alt); }
.ms-tree-label tspan { fill: var(--ink-faint); font-variant-numeric: tabular-nums; }
.ms-tree-label.is-site { font-weight: 700; text-decoration: underline; }
.ms-tree-item:hover .ms-tree-label, .ms-tree-item:focus-visible .ms-tree-label { fill: var(--accent); }
.ms-tree-item:focus-visible { outline: none; }
.ms-tree-item:focus-visible .ms-node { stroke: var(--focus); stroke-width: 3; }

.ms-legend { display: grid; gap: var(--s1); margin: var(--s3) 0 0; font-size: .84rem; color: var(--ink-soft); }
.ms-legend p { margin: 0; display: flex; flex-wrap: wrap; align-items: center; gap: var(--s1) var(--s3); }
.ms-legend strong { color: var(--ink); min-width: 7rem; }
.ms-legend span { display: inline-flex; align-items: center; gap: .35rem; }
.ms-legend-mark { width: 14px; height: 14px; }
.ms-swatch { display: inline-block; width: .8rem; height: .8rem; border-radius: 3px; flex: 0 0 auto; margin-right: .35rem; vertical-align: -.05em; }
.ms-line { display: inline-block; width: 1.6rem; height: 0; border-top: 2px solid var(--ink-faint); }
.ms-line.is-infl { border-top-style: dashed; }
.ms-line.is-fin { border-top-style: dotted; }
.ms-site-mark { text-decoration: underline; color: var(--ink); }
.ms-on-site { margin-top: var(--s1); color: var(--blue-ink); text-decoration: none; border-color: var(--blue); }
.ms-versions small { max-width: 34rem; }

/* --------------------------------------------- frise verticale de la transmission */
.ms-frise-box { width: 100%; max-width: 52rem; margin: var(--s4) auto 0; }
.ms-frise { display: block; font-family: var(--font-ui); }
.ms-frise .ms-band.is-alt { fill: var(--bg-alt); }
.ms-epoch-name { font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: .06em; fill: var(--ink-soft); }
.ms-epoch-span { font-size: 11px; fill: var(--ink-faint); font-variant-numeric: tabular-nums; }
.ms-axis { stroke: var(--border-strong); stroke-width: 2; }
/* L'axe passe derrière les titres d'époque (halo de la couleur du fond). */
.ms-epoch-name, .ms-epoch-span { paint-order: stroke; stroke: var(--bg); stroke-width: 5px; stroke-linejoin: round; }
.ms-epoch-name.on-alt, .ms-epoch-span.on-alt { stroke: var(--bg-alt); }
.ms-fdot { stroke: var(--surface); stroke-width: 1.5; }
.ms-fdot.s-at, .ms-fbar.s-at, .ms-swatch.s-at { fill: var(--plan-0); background: var(--plan-0); }
.ms-fdot.s-nt, .ms-fbar.s-nt, .ms-swatch.s-nt { fill: var(--plan-1); background: var(--plan-1); }
.ms-fdot.s-tous, .ms-fbar.s-tous, .ms-swatch.s-tous { fill: var(--plan-2); background: var(--plan-2); }
.ms-fbar { opacity: .75; }
.ms-leader { fill: none; stroke: var(--border-strong); stroke-width: 1; }
.ms-pill { fill: var(--surface); stroke: var(--plan-2); stroke-width: 1; }
.ms-flabel { font-size: 12.5px; font-weight: 650; fill: var(--ink); }
.ms-fsub { font-size: 11px; fill: var(--ink-faint); }
.ms-flink:hover .ms-flabel, .ms-flink:focus-visible .ms-flabel { fill: var(--accent); text-decoration: underline; }
.ms-flink:focus-visible { outline: none; }

/* ---------------------------------------------------------------- glossaire */
.ms-search { display: grid; gap: var(--s1); max-width: 26rem; margin-bottom: var(--s2); font-size: .86rem; color: var(--ink-soft); }
.ms-glossary { margin: 0; display: grid; gap: 0; grid-template-columns: repeat(auto-fill, minmax(min(100%, 22rem), 1fr)); column-gap: var(--s5); }
.ms-glossary > div { padding: var(--s2) 0; border-bottom: 1px solid var(--border); }
.ms-glossary > div[hidden] { display: none; }
.ms-glossary dt { font-weight: 700; }
.ms-glossary dd { margin: .15rem 0 0; color: var(--ink-soft); font-size: .92rem; }
.ms-sigles th { white-space: nowrap; }

/* ---------------------------------------------------------------- ressources */
.ms-res-group h3 { font-size: 1rem; margin: var(--s5) 0 var(--s2); }
.ms-res { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--s2); grid-template-columns: repeat(auto-fill, minmax(min(100%, 20rem), 1fr)); }
.ms-res li { background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius-sm); padding: var(--s3); }
.ms-res a { font-weight: 650; }
.ms-res p { margin: var(--s1) 0 0; font-size: .88rem; color: var(--ink-soft); }
.ms-host { display: block; font-size: .76rem; color: var(--ink-faint); overflow-wrap: anywhere; }

@media (max-width: 520px) {
  .ms-toc { padding: var(--s3) var(--s4); }
  .ms-card { padding: var(--s3); }
  .ms-sample { font-size: 1.3rem; }
}