/* ALX-0056 (repris de KIN-0031) : notice d'utilisation (/aide), mise en page de
   présentation, standard docs/notice-utilisation.md.
   Trois niveaux bien distincts : la partie (bandeau numéroté, couleur du rôle),
   l'étape (carte numérotée « 2.3 »), la légende (pastilles). Captures réduites,
   agrandies au clic dans une fenêtre (public/js/notice.js). Repris tel quel dans
   la page autonome (scripts/build-notice.js), qui y ajoute les jetons du thème.
   Couleur par rôle : la couleur principale par défaut (responsable) ; la couleur
   d'accent pour le rôle de terrain, avec data-role="terrain" sur la partie, sa
   carte de couverture et son entrée du sommaire. */

.notice { --role: var(--brand); display: grid; grid-template-columns: 220px minmax(0, 1fr); gap: 44px; align-items: start; }
@media (max-width: 960px) { .notice { grid-template-columns: minmax(0, 1fr); gap: 0; } .notice-toc { display: none; } }
/* Exemple isolé, sans sommaire (catalogue /composants). */
.notice.is-single { display: block; }

/* Sommaire : parties en gras avec leur numéro, étapes en retrait. */
.notice-toc { position: sticky; top: calc(var(--topbar-h, 0px) + 20px); max-height: calc(100vh - var(--topbar-h, 0px) - 40px); overflow-y: auto; padding-bottom: 16px; }
.notice-toc-title { margin: 0 0 10px; font-size: 0.72rem; letter-spacing: 0.09em; text-transform: uppercase; color: var(--muted); font-weight: 700; }
.notice-toc ol { list-style: none; margin: 0; padding: 0; display: grid; gap: 2px; }
.notice-toc > ol > li + li { margin-top: 10px; }
.notice-toc a { display: flex; gap: 8px; align-items: baseline; padding: 4px 10px; border-radius: var(--radius-pill, 999px); color: var(--ink); text-decoration: none; }
.notice-toc a:hover, .notice-toc a:focus-visible { background: var(--surface); }
.notice-toc .toc-part > a { font-weight: 700; font-size: 0.95rem; }
.notice-toc .toc-part > a span { color: var(--role); font-variant-numeric: tabular-nums; }
.notice-toc .toc-part[data-role="terrain"] { --role: var(--accent); }
.notice-toc .toc-part ol a { font-size: 0.87rem; color: var(--muted); padding-left: 28px; }

.notice-main { min-width: 0; display: grid; gap: 72px; padding-bottom: 48px; }

/* Couverture */
.notice-cover { display: grid; gap: 18px; padding: clamp(24px, 4vw, 44px); border-radius: calc(var(--radius, 18px) * 1.5); background: linear-gradient(135deg, color-mix(in oklab, var(--brand) 14%, var(--surface)), var(--surface) 62%); box-shadow: var(--shadow-sm); }
.notice-cover .kicker { margin: 0; font-size: 0.78rem; letter-spacing: 0.09em; text-transform: uppercase; font-weight: 700; color: var(--brand); }
.notice-cover h1 { margin: 0; font-family: var(--font-display); font-size: clamp(2rem, 5vw, 3rem); line-height: 1.08; letter-spacing: -0.03em; text-wrap: balance; }
.notice-cover .lead { margin: 0; max-width: 58ch; font-size: 1.12rem; line-height: 1.55; color: var(--muted); }
.notice-roles { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; }
@media (max-width: 640px) { .notice-roles { grid-template-columns: minmax(0, 1fr); } }
.notice-role { display: grid; gap: 4px; padding: 16px 18px; border-radius: var(--radius, 18px); background: var(--surface); border: 1px solid var(--line); text-decoration: none; color: var(--ink); border-left: 5px solid var(--role); }
.notice-role[data-role="terrain"] { --role: var(--accent); }
.notice-role strong { font-size: 1.02rem; }
.notice-role span { color: var(--muted); font-size: 0.93rem; }
.notice-role:hover, .notice-role:focus-visible { box-shadow: var(--shadow-sm); }

.notice-callout { display: grid; gap: 6px; padding: 18px 22px; border-radius: var(--radius, 18px); background: color-mix(in oklab, var(--warning) 16%, var(--surface)); border: 1px solid color-mix(in oklab, var(--warning) 40%, transparent); }
.notice-callout strong { font-size: 1.02rem; }
.notice-callout p { margin: 0; max-width: 64ch; }

/* Niveau 1 : la partie */
.notice-part { --role: var(--brand); display: grid; gap: 22px; scroll-margin-top: calc(var(--topbar-h, 0px) + 16px); }
.notice-part[data-role="terrain"] { --role: var(--accent); }
.part-head { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 6px 20px; align-items: center; padding: 22px 26px; border-radius: calc(var(--radius, 18px) * 1.3); background: color-mix(in oklab, var(--role) 13%, var(--surface)); }
.part-num { grid-row: span 3; width: 64px; height: 64px; border-radius: 50%; display: grid; place-items: center; background: var(--role); color: #fff; font: 800 1.7rem/1 var(--font-display); font-variant-numeric: tabular-nums; box-shadow: 0 6px 16px color-mix(in oklab, var(--role) 35%, transparent); }
.part-kicker { margin: 0; font-size: 0.75rem; letter-spacing: 0.09em; text-transform: uppercase; font-weight: 700; color: color-mix(in oklab, var(--role) 75%, var(--ink)); }
.part-head h2 { margin: 0; font-family: var(--font-display); font-size: clamp(1.6rem, 3.6vw, 2.25rem); line-height: 1.12; letter-spacing: -0.025em; text-wrap: balance; }
.part-head p { margin: 0; color: var(--muted); max-width: 62ch; }
@media (max-width: 560px) { .part-head { grid-template-columns: minmax(0, 1fr); } .part-num { grid-row: auto; width: 52px; height: 52px; font-size: 1.4rem; } }

/* Niveau 2 : l'étape, en carte de présentation */
.notice-step { display: grid; gap: 18px; padding: clamp(18px, 3vw, 28px); border-radius: calc(var(--radius, 18px) * 1.2); background: var(--surface); box-shadow: var(--shadow-sm); scroll-margin-top: calc(var(--topbar-h, 0px) + 16px); }
.step-head { display: flex; align-items: center; gap: 14px; padding-bottom: 14px; border-bottom: 1px solid var(--line); }
.step-num { flex: none; min-width: 48px; padding: 4px 10px; border-radius: var(--radius-pill, 999px); background: color-mix(in oklab, var(--role) 15%, var(--surface)); color: color-mix(in oklab, var(--role) 80%, var(--ink)); font-weight: 800; font-size: 0.95rem; text-align: center; font-variant-numeric: tabular-nums; }
.step-head h3 { margin: 0; font-size: 1.3rem; line-height: 1.25; letter-spacing: -0.015em; text-wrap: balance; }
.step-body { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 420px); gap: 28px; align-items: start; }
.step-body.is-text { grid-template-columns: minmax(0, 1fr); }
.step-body.is-phones { grid-template-columns: minmax(0, 1fr) auto; }
@media (max-width: 860px) { .step-body, .step-body.is-phones { grid-template-columns: minmax(0, 1fr); } }
.step-text { display: grid; gap: 12px; align-content: start; min-width: 0; }
.step-text p { margin: 0; max-width: 60ch; line-height: 1.6; }
.step-text ul, .step-text ol { margin: 0; padding-left: 1.25em; display: grid; gap: 7px; max-width: 60ch; line-height: 1.55; }
.step-figs { display: grid; gap: 18px; justify-items: center; min-width: 0; }
.step-body.is-phones .step-figs { grid-auto-flow: column; grid-auto-columns: 190px; justify-content: start; }
@media (max-width: 460px) { .step-body.is-phones .step-figs { grid-auto-columns: minmax(0, 1fr); } }

.notice .kbd { display: inline-block; padding: 0 9px; border-radius: var(--radius-pill, 999px); background: var(--surface-2); border: 1px solid var(--line); font-size: 0.88em; font-weight: 650; white-space: nowrap; }
.notice .tip { margin: 0; padding: 12px 16px; border-radius: 12px; background: color-mix(in oklab, var(--accent) 10%, var(--surface)); max-width: 60ch; }
.notice .tip b { color: color-mix(in oklab, var(--accent) 80%, var(--ink)); }

/* Règles du calcul : petites cartes en grille */
.rule-grid { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 250px), 1fr)); gap: 12px; counter-reset: rule; }
.rule-grid li { counter-increment: rule; display: block; padding: 14px 16px; border-radius: 14px; background: var(--surface-2); border: 1px solid var(--line); font-size: 0.93rem; line-height: 1.5; }
.rule-grid li strong { display: flex; gap: 8px; align-items: baseline; margin-bottom: 4px; font-size: 0.98rem; }
.rule-grid li strong::before { content: counter(rule); flex: none; width: 22px; height: 22px; border-radius: 50%; display: grid; place-items: center; background: var(--role); color: #fff; font-size: 0.75rem; }

/* Captures : vignette cliquable, pastilles, légende */
.shot-fig { margin: 0; display: grid; gap: 10px; width: 100%; }
.shot { position: relative; display: block; width: 100%; padding: 0; border: 1px solid var(--line); border-radius: 12px; overflow: hidden; background: var(--surface); line-height: 0; cursor: zoom-in; box-shadow: var(--shadow-sm); }
.shot img { display: block; width: 100%; height: auto; }
.shot:hover, .shot:focus-visible { box-shadow: var(--shadow-md, var(--shadow-sm)); outline: 2px solid color-mix(in oklab, var(--brand) 60%, transparent); outline-offset: 2px; }
.is-phone .shot { border: 5px solid var(--ink); border-radius: 22px; }
.shot-zoom { position: absolute; right: 8px; bottom: 8px; padding: 4px 10px; border-radius: var(--radius-pill, 999px); background: rgb(0 0 0 / 68%); color: #fff; font: 600 0.75rem/1.4 var(--font-body); }
.pin { display: none; position: absolute; transform: translate(-50%, -110%); width: 22px; height: 22px; border-radius: 50%; background: var(--accent); color: #fff; font: 700 12px/22px var(--font-body); text-align: center; box-shadow: 0 0 0 2px #fff, 0 2px 6px rgb(0 0 0 / 25%); }
.pin.is-placed { display: block; }
.shot-fig figcaption { font-size: 0.88rem; color: var(--muted); line-height: 1.45; }
.legend { margin: 0; padding: 0; list-style: none; display: grid; gap: 5px; counter-reset: pin; }
/* Numéro en position absolue (pas de grille) : une légende peut mêler texte et étiquettes .kbd. */
.legend li { position: relative; min-height: 20px; padding-left: 28px; color: var(--ink); }
.legend li::before { counter-increment: pin; content: counter(pin); position: absolute; left: 0; top: 0.12em; width: 20px; height: 20px; border-radius: 50%; display: grid; place-items: center; background: var(--accent); color: #fff; font-size: 11px; font-weight: 700; line-height: 1; }

/* Fenêtre d'agrandissement */
.notice-zoom { width: min(1240px, 96vw); max-width: 96vw; max-height: 94vh; padding: 0; border: 0; border-radius: 18px; background: var(--surface); color: var(--ink); box-shadow: 0 30px 80px rgb(0 0 0 / 40%); overflow: hidden; }
.notice-zoom::backdrop { background: rgb(10 16 20 / 72%); }
.zoom-body { max-height: 94vh; overflow: auto; padding: 18px; display: grid; gap: 14px; justify-items: center; }
.zoom-body .shot { cursor: default; max-width: 100%; width: auto; }
.zoom-body .shot img { width: auto; max-width: 100%; }
.zoom-body .is-phone-shot { max-width: 420px; }
.zoom-body .pin { width: 28px; height: 28px; font-size: 14px; line-height: 28px; }
.zoom-body figcaption { width: 100%; max-width: 760px; font-size: 0.95rem; }
.zoom-close { position: absolute; top: 12px; right: 12px; z-index: 1; width: 42px; height: 42px; border-radius: 50%; border: 0; background: var(--ink); color: var(--surface); font: 400 1.7rem/42px var(--font-body); cursor: pointer; box-shadow: 0 4px 14px rgb(0 0 0 / 30%); }
.zoom-close:hover, .zoom-close:focus-visible { background: var(--brand); color: var(--on-brand, #fff); }

.notice-foot { color: var(--muted); font-size: 0.9rem; border-top: 1px solid var(--line); padding-top: 18px; }
@media (prefers-reduced-motion: no-preference) { .notice .shot { transition: box-shadow 0.15s; } }