/* Hallmark · checked: 2026-11-12 · genre: modern-minimal (inferred) · shape: app screen
 * floor: tokens, 4px scale, no gradient, no glass, no card in card; focus, hover and active on every control; reduced motion respected
 * built: the project · scope: theory reading screens (one page per chapter, FR/EN) */

/* Théorie : lecture par chapitre. Jetons éditoriaux seulement (tokens.css, editorial.css), aucune couleur écrite en dur.
   Les classes « th- » sont nouvelles ; les classes du moteur de surlignage et du workflow (blk, call, ans, rows, grid, btn, lnk...) restent
   celles de widgets.css. Ce fichier passe après widgets.css, board.css et glass.css : il en reprend la main sur .wd.th. */

.wd.th { --th-measure: 58ch; /* environ 72 à 75 caractères par ligne en Inter 17 px */ --th-gap: 24px; padding-bottom: 96px; }

/* ---------- Trame : table des matières à gauche, texte à droite ---------- */
.wd.th .shell {
  display: grid; grid-template-columns: 16rem minmax(0, 46rem); justify-content: center;
  gap: 0 clamp(24px, 4vw, 64px); max-width: 92rem; margin: 0 auto; padding: 0 clamp(16px, 3vw, 40px);
}
.wd.th.pan .shell { grid-template-columns: 16rem minmax(0, 44rem); justify-content: start; padding-right: calc(27rem + 24px); }
.wd.th .wmain { min-width: 0; padding: 32px 0 96px; }
.wd.th .th-art { min-width: 0; }

.wd.th .ico { width: 20px; height: 20px; flex: none; fill: none; stroke: currentColor; stroke-width: 1.5; stroke-linecap: round; stroke-linejoin: round; }

/* ---------- Table des matières ---------- */
.wd.th .th-toc { position: sticky; top: 16px; align-self: start; max-height: calc(100vh - 32px); overflow: auto; padding: 32px 0 24px; }
.wd.th .th-toc-tog { display: none; }
.wd.th .th-toc-g { margin: 24px 0 8px; font: 500 var(--t15) / 1.3 var(--sans); color: var(--ardoise); }
.wd.th .th-toc-body > .th-toc-g:first-child { margin-top: 0; }
.wd.th .th-toc-l { list-style: none; margin: 0; padding: 0; }
.wd.th .th-toc-a {
  display: grid; grid-template-columns: 2.5rem minmax(0, 1fr) auto; gap: 0 8px; align-items: baseline;
  padding: 8px 8px 8px 12px; min-height: 40px; border-top: 1px solid var(--filet); border-radius: 0;
  color: var(--ardoise); text-decoration: none; font: 400 var(--t15) / 1.35 var(--sans);
  transition: color var(--rapide), background-color var(--rapide);
}
.wd.th .th-toc-l li:first-child .th-toc-a { border-top: 0; }
.wd.th .th-toc-a:hover { color: var(--encre); background: color-mix(in srgb, var(--encre) 5%, transparent); }
.wd.th .th-toc-a:active { background: color-mix(in srgb, var(--encre) 10%, transparent); }
.wd.th .th-toc-a:focus-visible { outline: 2px solid var(--accent); outline-offset: -2px; }
.wd.th .th-toc-a[aria-current="page"] { color: var(--encre); font-weight: 600; box-shadow: inset 2px 0 0 var(--accent); }
.wd.th .th-no { font-variant-numeric: tabular-nums; color: var(--ardoise); }
.wd.th .th-tt { overflow-wrap: break-word; }
.wd.th .th-st { display: inline-flex; align-items: center; font-size: var(--t13); color: var(--ardoise); white-space: nowrap; font-variant-numeric: tabular-nums; }
.wd.th .th-st .ico { width: 16px; height: 16px; }
.wd.th .th-st--ok { color: var(--accent); }
.wd.th .th-toc-sum { margin: 24px 0 0; font-size: var(--t13); color: var(--ardoise); }

/* ---------- En-tête du chapitre : position, reprise, langue ---------- */
.wd.th .th-head { display: grid; grid-template-columns: minmax(0, 1fr) auto; grid-template-areas: "pos lang" "tools tools"; align-items: center; gap: 12px 16px; margin: 0 0 32px; }
.wd.th .th-pos { grid-area: pos; margin: 0; font: 400 var(--t13) / 1.3 var(--sans); color: var(--ardoise); }
.wd.th .th-lang { grid-area: lang; }
.wd.th .th-tools { grid-area: tools; display: flex; flex-wrap: wrap; align-items: center; gap: 4px; margin-left: -12px; }
.wd.th .th-tool {
  display: inline-flex; align-items: center; gap: 8px; min-height: 40px; padding: 0 12px; border: 0; border-radius: var(--r-champ); background: none;
  color: var(--ardoise); font: 400 var(--t15) / 1 var(--sans); cursor: pointer;
  transition: color var(--rapide), background-color var(--rapide);
}
.wd.th .th-tool:hover { color: var(--encre); background: color-mix(in srgb, var(--encre) 6%, transparent); }
.wd.th .th-tool:active { background: color-mix(in srgb, var(--encre) 12%, transparent); }
.wd.th .th-tool:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.wd.th .th-tool[aria-pressed="true"], .wd.th .th-tool[aria-expanded="true"] { color: var(--encre); background: var(--surface2); }
.wd.th .th-tool .n { font-variant-numeric: tabular-nums; color: var(--ardoise); }
.wd.th .th-lang { display: inline-flex; gap: 4px; padding: 4px; border: 1px solid var(--contour); border-radius: 999px; }
.wd.th .th-lang-b {
  min-height: 40px; padding: 0 16px; border: 0; border-radius: 999px; background: none; color: var(--ardoise);
  font: 500 var(--t15) / 1 var(--sans); cursor: pointer;
  transition: color var(--rapide), background-color var(--rapide);
}
.wd.th .th-lang-b:hover { color: var(--encre); background: color-mix(in srgb, var(--encre) 6%, transparent); }
.wd.th .th-lang-b:active { background: color-mix(in srgb, var(--encre) 12%, transparent); }
.wd.th .th-lang-b:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.wd.th .th-lang-b[aria-pressed="true"] { background: var(--accent); color: var(--sur-accent); }
.wd.th .th-lang-b[aria-pressed="true"]:hover { background: color-mix(in srgb, var(--accent) 86%, var(--encre)); }
.wd.th .th-lang-b[aria-pressed="true"]:active { background: color-mix(in srgb, var(--accent) 74%, var(--encre)); }

/* ---------- Titre, aide, texte ---------- */
.wd.th .th-title {
  margin: 0 0 16px;
  font: 500 clamp(32px, 4.4vw, 48px) / 1.12 var(--editorial); letter-spacing: -0.015em; text-wrap: balance; overflow-wrap: break-word;
}
.wd.th .th-title:focus { outline: none; }
.wd.th .th-title .hn { margin-right: 0.4em; font: inherit; color: var(--ardoise); }
.wd.th .th-note { margin: 0 0 16px; font-size: var(--t15); color: var(--ardoise); }
.wd.th .th-help { margin: 0 0 32px; max-width: var(--th-measure); }
.wd.th .th-help summary { display: inline-block; min-height: 40px; padding: 8px 0; cursor: pointer; font-size: var(--t15); color: var(--ardoise); }
.wd.th .th-help summary:hover { color: var(--encre); text-decoration: underline; text-underline-offset: 4px; }
.wd.th .th-help summary:active { color: var(--encre); }
.wd.th .th-help summary:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.wd.th .th-help p { margin: 4px 0 0; font-size: var(--t15); line-height: 1.6; color: var(--ardoise); }

.wd.th .th-content { min-width: 0; }
.wd.th .th-content h3 { margin: 48px 0 16px; max-width: var(--th-measure); font: 500 clamp(24px, 3vw, 30px) / 1.2 var(--editorial); letter-spacing: -0.01em; text-wrap: balance; overflow-wrap: break-word; }
.wd.th .th-content h4 { margin: 32px 0 8px; max-width: var(--th-measure); font: 500 var(--t20) / 1.3 var(--editorial); text-wrap: balance; overflow-wrap: break-word; }
.wd.th .th-content > h3:first-child { margin-top: 32px; }
.wd.th .at h3 { margin-top: 48px; }
.wd.th .intro { margin: 0 0 16px; max-width: var(--th-measure); font: 400 var(--t20) / 1.55 var(--editorial); color: var(--ardoise); text-wrap: pretty; }
.wd.th .blk { margin: 0 0 16px; }
.wd.th .blk p, .wd.th .blk li {
  max-width: var(--th-measure); font: 400 var(--t17) / 1.7 var(--sans); text-wrap: pretty; overflow-wrap: break-word; hyphens: auto;
}
.wd.th .blk ul, .wd.th .blk ol { margin: 0; padding-left: 24px; }
.wd.th .blk ul { list-style: disc; }
.wd.th .blk ol { list-style: decimal; }
.wd.th .blk li { margin: 0 0 8px; padding-left: 4px; }
.wd.th .blk li::marker { color: var(--ardoise); }
.wd.th .intro p { font: inherit; }
.wd.th .th-quote { margin: 0; max-width: var(--th-measure); padding: 4px 0 4px 20px; border-left: 2px solid var(--accent); font: 400 var(--t20) / 1.6 var(--editorial); overflow-wrap: break-word; hyphens: auto; text-wrap: pretty; }
.wd.th .call { max-width: var(--th-measure); font: 400 var(--t17) / 1.65 var(--sans); }
.wd.th .tw { margin: 8px 0 0; }
.wd.th .tw:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.wd.th .blk a, .wd.th .th-help a { color: var(--encre); text-decoration: underline; text-underline-offset: 4px; }
.wd.th .blk a:hover { text-decoration-thickness: 2px; }

/* « Ajouter à mon workflow » : un bouton texte sous le passage, toujours visible (plus de marge de droite). */
.wd.th .wfadd {
  position: static; left: auto; top: auto; width: auto; opacity: 1; display: inline-flex; align-items: center; gap: 8px;
  margin: 4px 0 0 -8px; min-height: 40px; padding: 0 12px 0 8px; border: 0; border-radius: var(--r-champ); background: none;
  color: var(--ardoise); font: 400 var(--t15) / 1 var(--sans); white-space: normal; cursor: pointer;
  transition: color var(--rapide), background-color var(--rapide);
}
.wd.th .wfadd .ico { width: 16px; height: 16px; }
.wd.th .wfadd:hover { color: var(--encre); background: color-mix(in srgb, var(--encre) 6%, transparent); text-decoration: none; }
.wd.th .wfadd:active { background: color-mix(in srgb, var(--encre) 12%, transparent); }
.wd.th .wfadd:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }

/* ---------- Pied de chapitre ---------- */
.wd.th .th-foot { margin-top: 48px; padding-top: 24px; max-width: var(--th-measure); gap: 12px; }
.wd.th .th-suite { margin: 32px 0 0; max-width: var(--th-measure); }
.wd.th .th-suite-t { margin: 0 0 8px; font: 500 var(--t15) / 1.3 var(--sans); color: var(--ardoise); }
.wd.th .th-suite-l { display: flex; flex-wrap: wrap; gap: 8px; }
.wd.th .th-suite-a {
  display: inline-flex; align-items: center; gap: 8px; min-height: 44px; padding: 0 16px; border: 1px solid var(--contour); border-radius: 999px;
  color: var(--encre); text-decoration: none; font: 400 var(--t15) / 1.3 var(--sans);
  transition: background-color var(--rapide);
}
.wd.th .th-suite-a:hover { background: var(--surface); }
.wd.th .th-suite-a:active { background: color-mix(in srgb, var(--encre) 10%, var(--surface)); }
.wd.th .th-suite-a:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.wd.th .th-suite-tab { margin: 16px 0 0; font-size: var(--t15); color: var(--ardoise); }
.wd.th .th-suite-tab a { color: var(--ardoise); text-underline-offset: 4px; }
.wd.th .th-suite-tab a:hover { color: var(--encre); }

/* ---------- Précédent et suivant ---------- */
.wd.th .th-pager { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 16px; margin: 48px 0 0; }
.wd.th .th-pg {
  display: flex; align-items: center; gap: 16px; min-height: 72px; padding: 12px 20px; border: 1px solid var(--contour); border-radius: var(--r-champ);
  color: var(--encre); text-decoration: none;
  transition: color var(--rapide), background-color var(--rapide);
}
.wd.th .th-pg-txt { display: flex; flex-direction: column; gap: 4px; min-width: 0; }
.wd.th .th-pg-k { font: 500 var(--t13) / 1.2 var(--sans); color: var(--ardoise); }
.wd.th .th-pg-t { font: 400 var(--t17) / 1.3 var(--editorial); overflow-wrap: break-word; }
.wd.th .th-pg--next, .wd.th .th-pg--end { grid-column: 2; justify-content: space-between; text-align: right; }
.wd.th .th-pg--next .th-pg-txt, .wd.th .th-pg--end .th-pg-txt { align-items: flex-end; }
.wd.th .th-pg--prev:hover, .wd.th .th-pg--end:hover { background: var(--surface); }
.wd.th .th-pg--prev:active, .wd.th .th-pg--end:active { background: color-mix(in srgb, var(--encre) 10%, var(--surface)); }
.wd.th .th-pg--next { background: var(--accent); border-color: var(--accent); color: var(--sur-accent); }
.wd.th .th-pg--next .th-pg-k { color: var(--sur-accent); }
.wd.th .th-pg--next:hover { background: color-mix(in srgb, var(--accent) 86%, var(--encre)); }
.wd.th .th-pg--next:active { background: color-mix(in srgb, var(--accent) 74%, var(--encre)); }
.wd.th .th-pg:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }

/* ---------- Barre d'outils flottante : la progression se lit dans le chapitre ---------- */
.wd.th .progress { height: 2px; background: none; }
.wd.th .progress i { width: 100%; transform: scaleX(0); transform-origin: 0 50%; }

/* ---------- Mobile : une colonne, table des matières repliée ---------- */
@media (max-width: 820px) {
  .wd.th .shell, .wd.th.pan .shell { grid-template-columns: minmax(0, 1fr); padding: 0 16px; }
  .wd.th .th-toc { position: static; max-height: none; overflow: visible; padding: 16px 0 0; }
  .wd.th .th-toc-tog {
    display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: center; gap: 12px; width: 100%; min-height: 48px; padding: 0 16px;
    border: 1px solid var(--contour); border-radius: var(--r-champ); background: var(--surface); color: var(--encre); text-align: left;
    font: 500 var(--t15) / 1.2 var(--sans); cursor: pointer;
    transition: background-color var(--rapide);
  }
  .wd.th .th-toc-tog:hover { background: color-mix(in srgb, var(--encre) 4%, var(--surface)); }
  .wd.th .th-toc-tog:active { background: color-mix(in srgb, var(--encre) 10%, var(--surface)); }
  .wd.th .th-toc-tog:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
  .wd.th .th-toc-cur { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-weight: 400; color: var(--ardoise); }
  .wd.th .th-chev { transition: transform var(--rapide); }
  .wd.th .th-toc-tog[aria-expanded="true"] .th-chev { transform: rotate(180deg); }
  .wd.th .th-toc-body:not(.is-open) { display: none; }
  .wd.th .th-toc-body { padding: 16px 0 8px; }
  .wd.th .wmain { padding-top: 16px; }
  .wd.th .th-head { margin-bottom: 24px; }
  .wd.th .th-lang-b { min-height: 40px; }
  .wd.th .th-tools { margin-left: -8px; }
  .wd.th .th-tool { padding: 0 8px; }
  .wd.th .th-help { margin-bottom: 24px; }
  .wd.th .th-toc-a { min-height: 44px; align-items: center; }
  .wd.th .th-content h3 { margin-top: 40px; }
}
@media (max-width: 560px) {
  .wd.th .th-pager { grid-template-columns: minmax(0, 1fr); }
  .wd.th .th-pg--next, .wd.th .th-pg--end { grid-column: 1; }
}
@media (prefers-reduced-motion: reduce) {
  .wd.th .th-toc-a, .wd.th .th-lang-b, .wd.th .wfadd, .wd.th .th-suite-a, .wd.th .th-pg, .wd.th .th-toc-tog, .wd.th .th-chev { transition: none; }
}
@media print {
  .wd.th .th-toc, .wd.th .th-head, .wd.th .th-help, .wd.th .th-pager, .wd.th .th-foot, .wd.th .th-suite, .wd.th .wfadd { display: none; }
  .wd.th .shell { display: block; padding: 0; }
}