/* Rendu d'un manuel (Manuel Studio) : aperçu dans l'éditeur et page publique « Centre d'aide ». */
.man-doc {
  --m-ink: #1d2433; --m-muted: #5b6475; --m-line: #e3e7ee; --m-soft: #f5f7fb;
  --m-brand: #2f7bff; --m-brand-soft: #e8f0ff; --m-accent: #e8590c;
  --m-warn: #fdecea; --m-tip: #e6f6ee; --m-info: #eef2fb; --m-radius: 10px;
  color: var(--m-ink); background: #fff;
  font: 16px/1.6 "Plus Jakarta Sans", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
}
.man-doc header.cover { border-bottom: 1px solid var(--m-line); padding-bottom: 28px; margin-bottom: 8px; }
.man-doc .kicker { color: var(--m-brand); font-weight: 600; font-size: 13px; letter-spacing: .8px; text-transform: uppercase; }
.man-doc h1 { font-size: 34px; line-height: 1.2; margin: 6px 0 10px; }
.man-doc .cover p { color: var(--m-muted); margin: 6px 0; max-width: 720px; }

/* Page de couverture : bandeau à l'écran, page entière à l'impression. */
.man-doc .cover-page { --cv-accent: var(--m-accent); --cv-bg: #0f1b2d; --cv-ink: #fff; --cv-muted: rgba(255,255,255,.68); --cv-line: rgba(255,255,255,.14);
  position: relative; display: flex; flex-direction: column; gap: 26px; margin: 0 0 28px; padding: 26px 32px 22px 38px; border-radius: 16px; overflow: hidden;
  background: var(--cv-bg); color: var(--cv-ink); -webkit-print-color-adjust: exact; print-color-adjust: exact; }
.man-doc .cover-page::before { content: ''; position: absolute; inset: 0 auto 0 0; width: 7px; background: var(--cv-accent); }
.man-doc .cover-page.t-light { --cv-bg: #f4f6fa; --cv-ink: var(--m-ink); --cv-muted: var(--m-muted); --cv-line: var(--m-line); border: 1px solid var(--m-line); }
.man-doc .cv-top { display: flex; align-items: center; justify-content: space-between; gap: 16px; }
.man-doc .cv-logo { height: 30px; width: auto; display: block; }
.man-doc .cv-brand { font-weight: 700; font-size: 18px; }
.man-doc .cv-site { font-size: 12px; letter-spacing: .6px; text-transform: uppercase; color: var(--cv-muted); }
.man-doc .cv-main { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.05fr); gap: 32px; align-items: center; }
.man-doc .cv-main.no-img { grid-template-columns: 1fr; }
.man-doc .cv-kicker { color: var(--cv-accent); font-weight: 700; font-size: 13px; letter-spacing: 1px; text-transform: uppercase; }
.man-doc .cv-title { font-size: 38px; line-height: 1.12; margin: 8px 0 12px; color: var(--cv-ink); }
.man-doc .cv-sub { font-size: 17px; line-height: 1.5; color: var(--cv-muted); margin: 0 0 14px; }
.man-doc .cv-aud { font-size: 14px; margin: 0; color: var(--cv-ink); }
.man-doc .cv-aud span { display: inline-block; margin-right: 6px; padding: 1px 8px; border-radius: 99px; background: var(--cv-accent); color: #fff; font-size: 11px; font-weight: 700; letter-spacing: .5px; text-transform: uppercase; vertical-align: 1px; }
.man-doc .cv-shot img { display: block; width: 100%; height: auto; max-height: 300px; object-fit: cover; object-position: top left; border-radius: 10px; border: 1px solid var(--cv-line); box-shadow: 0 18px 40px rgba(0,0,0,.35); background: #fff; }
.man-doc .cover-page.t-light .cv-shot img { box-shadow: 0 14px 34px rgba(16,24,40,.16); }
.man-doc .cv-foot { display: flex; justify-content: space-between; gap: 16px; flex-wrap: wrap; padding-top: 14px; border-top: 1px solid var(--cv-line); font-size: 12.5px; color: var(--cv-muted); }
.man-doc .demo-banner { margin-top: 18px; padding: 10px 14px; border-radius: var(--m-radius); background: var(--m-info); font-size: 14px; color: #33415c; }
.man-doc section.chapter { padding-top: 48px; }
.man-doc h2 { font-size: 26px; margin: 0 0 6px; scroll-margin-top: 20px; }
.man-doc h2 .num { color: var(--m-brand); margin-right: 8px; }
.man-doc h3 { font-size: 19px; margin: 36px 0 8px; scroll-margin-top: 20px; }
.man-doc .lead { color: var(--m-muted); font-size: 17px; margin: 0 0 8px; }
.man-doc p { margin: 10px 0; }
.man-doc ol.steps { padding-left: 0; list-style: none; counter-reset: s; margin: 14px 0; }
.man-doc ol.steps > li { counter-increment: s; position: relative; padding-left: 38px; margin: 10px 0; }
.man-doc ol.steps > li::before { content: counter(s); position: absolute; left: 0; top: 1px; width: 26px; height: 26px; border-radius: 50%; background: var(--m-brand); color: #fff; font-size: 13px; font-weight: 700; display: grid; place-items: center; }
.man-doc .ui { font-weight: 600; white-space: nowrap; }
.man-doc .ui::before { content: "« "; font-weight: 400; color: var(--m-muted); }
.man-doc .ui::after { content: " »"; font-weight: 400; color: var(--m-muted); }
.man-doc kbd { font: 13px ui-monospace, SFMono-Regular, Menlo, monospace; background: var(--m-soft); border: 1px solid var(--m-line); border-bottom-width: 2px; border-radius: 5px; padding: 1px 6px; }
.man-doc .mark { display: inline-grid; place-items: center; width: 22px; height: 22px; border-radius: 50%; background: var(--m-accent); color: #fff; font-size: 12px; font-weight: 700; vertical-align: 1px; }
.man-doc ol.legend { list-style: none; padding: 0; margin: 12px 0 0; display: grid; gap: 6px; }
.man-doc ol.legend li { display: flex; gap: 6px; align-items: baseline; font-size: 15px; }
.man-doc ol.legend li > span:last-child { margin-left: 4px; }
.man-doc ol.legend li .mark { flex: none; }

.man-doc figure.shot { margin: 18px 0 26px; }
.man-doc figure.shot .frame { display: inline-block; max-width: 100%; border: 1px solid var(--m-line); border-radius: var(--m-radius); overflow: hidden; box-shadow: 0 1px 2px rgba(16,24,40,.06), 0 6px 18px rgba(16,24,40,.06); background: #fff; }
.man-doc figure.shot.full .frame { display: block; }
.man-doc .figwrap { position: relative; max-width: 100%; }
.man-doc .figwrap img { display: block; width: 100%; height: auto; }
.man-doc .mk-svg { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; }
.man-doc .mk-box { fill: none; stroke: var(--m-accent); stroke-width: 2.5; }
.man-doc .mk-halo { fill: #fff; }
.man-doc .mk-dot { fill: var(--m-accent); }
.man-doc .mk-num { fill: #fff; font: 700 15px -apple-system, "Segoe UI", Arial, sans-serif; text-anchor: middle; dominant-baseline: central; }
.man-doc .fig-missing { padding: 30px; color: #b42318; background: var(--m-warn); }
.man-doc figcaption { color: var(--m-muted); font-size: 14px; margin-top: 8px; }
.man-doc .msplit { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 28px; align-items: start; }
.man-doc .msplit figure.shot { margin-top: 6px; }
.man-doc .msplit > *, .man-doc figure.shot { min-width: 0; }

.man-doc .note { border-radius: var(--m-radius); padding: 12px 16px 12px 46px; margin: 16px 0; position: relative; font-size: 15px; }
.man-doc .note::before { position: absolute; left: 15px; top: 11px; font-size: 17px; }
.man-doc .note > strong:first-child { display: block; margin-bottom: 2px; }
.man-doc .note.k-warn { background: var(--m-warn); } .man-doc .note.k-warn::before { content: "⚠️"; }
.man-doc .note.k-tip { background: var(--m-tip); } .man-doc .note.k-tip::before { content: "💡"; }
.man-doc .note.k-info { background: var(--m-info); } .man-doc .note.k-info::before { content: "ℹ️"; }

.man-doc .role { display: inline-block; font-size: 12px; font-weight: 600; padding: 1px 8px; border-radius: 99px; margin-right: 4px; white-space: nowrap; }
.man-doc .role.admin { background: #fde8e8; color: #9b1c1c; }
.man-doc .role.gest { background: #e1effe; color: #1e429f; }
.man-doc .role.tech { background: #fdf6b2; color: #723b13; }
.man-doc .role.all { background: #e5e7eb; color: #374151; }
.man-doc .roles { margin: 2px 0 10px; }
.man-doc table.grid { border-collapse: collapse; width: 100%; margin: 14px 0; font-size: 15px; }
.man-doc { overflow-wrap: anywhere; }
.man-doc table.grid th, .man-doc table.grid td { text-align: left; padding: 8px 10px; border-bottom: 1px solid var(--m-line); vertical-align: top; }
.man-doc table.grid th { font-size: 13px; color: var(--m-muted); font-weight: 600; background: var(--m-soft); }
.man-doc .print-toc { display: none; }

@media (max-width: 760px) {
  .man-doc .cover-page { padding: 20px 18px 18px 24px; gap: 18px; }
  .man-doc .cv-main { grid-template-columns: 1fr; gap: 18px; }
  .man-doc .cv-title { font-size: 28px; }
  .man-doc .cv-site { display: none; }
  .man-doc .msplit { grid-template-columns: 1fr; }
  .man-doc .ui, .man-doc table.grid td:first-child { white-space: normal; }
  .man-doc table.grid { display: block; overflow-x: auto; }
  .man-doc figure.shot .frame { display: block; width: fit-content; }
  .man-doc h1 { font-size: 28px; }
}

@media print {
  @page { size: Letter; margin: 16mm 14mm; }
  @page cover { margin: 0; }
  .man-doc .cover-page { page: cover; break-after: page; width: 8.5in; height: 11in; box-sizing: border-box; margin: 0; border-radius: 0; border: 0;
    padding: .8in .75in .6in .9in; gap: 0; justify-content: space-between; }
  .man-doc .cover-page::before { width: .22in; }
  .man-doc .cv-logo { height: .42in; }
  .man-doc .cv-main { grid-template-columns: 1fr; gap: .45in; align-content: center; flex: 1; padding: .6in 0; }
  .man-doc .cv-title { font-size: 40pt; }
  .man-doc .cv-sub { font-size: 15pt; }
  .man-doc .cv-shot img { max-height: 4.6in; box-shadow: 0 10px 30px rgba(0,0,0,.3); }
  .man-doc { font-size: 11pt; }
  .man-doc section.chapter { break-before: page; padding-top: 0; }
  .man-doc figure.shot, .man-doc .note, .man-doc table.grid, .man-doc ol.legend { break-inside: avoid; }
  .man-doc h2, .man-doc h3, .man-doc .roles { break-after: avoid; }
  .man-doc figure.shot .frame { box-shadow: none; }
  .man-doc .msplit { gap: 20px; }
  .man-doc .msplit .figwrap { max-width: 300px; }
  .man-doc .print-toc { display: block; margin: 26px 0 0; }
  .man-doc .print-toc h2 { font-size: 18px; margin-bottom: 8px; }
  .man-doc .print-toc ol { list-style: none; padding: 0; margin: 0; columns: 2; column-gap: 32px; }
  .man-doc .print-toc li { padding: 5px 0; border-bottom: 1px solid var(--m-line); break-inside: avoid; }
  .man-doc .print-toc .n { display: inline-block; width: 2em; color: var(--m-brand); font-weight: 600; }
  .man-doc a { color: inherit; text-decoration: none; }
}