/*
 * get.lyriks.io/first-steps: the getting-started guide (two checks, the loop
 * in four steps, the words on the screen, the questions).
 *
 * The page wears the site chrome from style.css (nav, hero, guide grid with
 * its sticky table of contents, footer) and keeps its own reading rhythm for
 * the document itself: a narrow column, one card per step of the loop,
 * terminal-skinned blocks for whatever gets typed or pasted, and collapsible
 * answers.
 *
 * Everything here is scoped under `.fs` (the document element) on purpose.
 * The guide's own class names collide with the site's (.wrap, .steps, .copy,
 * .hero) and mean different things there, so the colliding ones are renamed
 * with an `fs-` prefix in the markup and the rest only ever match inside the
 * document. The colours are the site's tokens under the guide's own names, so
 * the rules below read like the guide was written and paint like the site.
 *
 * Served under the same CSP as the other pages (style-src 'self', nothing
 * inline), which is why the four inline styles the draft carried are classes
 * here (.fs-muted, .fs-m0, .fs-pt, .fs-mt).
 */
.fs {
	--muted: var(--ink-2);
	--faint: var(--ink-3);
	--surface: var(--soft);
	--line-soft: var(--line-2);
	--sans: var(--font);
	/* What the reader copies into a terminal or an LLM wears one skin, so it is
	   recognisable at a glance. A soft, violet-cast dark rather than the near
	   black of the demos: on a page this bright, black blocks read as holes
	   punched through it. A chip inside a sentence stays in the page's own
	   light for the same reason (see `.fs code`); only what is meant to be
	   copied whole goes dark.

	   Once a check is validated the blocks inside it turn to the green the
	   whole page already uses for done (--ok), in the same soft dark register:
	   what is behind you reads differently from what is still ahead. */
	--term: #3a3352;
	--term-bar: #322c48;
	--term-edge: #4a4268;
	--term-ink: #f1edfb;
	--term-faint: #a89cc6;
	--term-accent: #c9b6ff;
	--term-line: rgba(255, 255, 255, 0.13);
	--term-ok: #23463e;
	--term-ok-bar: #1e3b35;
	--term-ok-edge: #305a50;
	--term-ok-ink: #e8f6f1;
	--term-ok-faint: #8bb8ad;
	--term-ok-accent: #84e7c9;
	font-size: 16.5px;
	line-height: 1.6;
}
/* `hidden` must win over the display a class sets (the shortcuts are
   inline-flex, and hidden until the reader's installation is known). */
.fs [hidden] {
	display: none !important;
}
.fs a {
	color: var(--ink);
}
.fs .col {
	max-width: 66ch;
}
.fs .fs-wrap {
	margin-bottom: clamp(36px, 5vw, 56px);
}
.fs section,
.fs .act,
.fs [id] {
	scroll-margin-top: 96px; /* clears the sticky nav */
}
.fs .sec-lede {
	color: var(--muted);
	margin: 0 0 26px;
}

/* The hero carries a whole sentence, not a slogan: wider and a notch smaller
   than the install guide's, or it wraps into six lines on a laptop. */
.fs-hero h1 {
	max-width: 24ch;
	font-size: clamp(30px, 3.8vw, 50px);
}

/* ------------------------------------------------------------ the loop */
.fs .loop-scroll {
	overflow-x: auto;
	margin: 22px 0 12px;
}
.fs .loop-scroll svg {
	display: block;
	width: 100%;
	min-width: 700px;
	height: auto;
}
.fs .node rect {
	fill: var(--white);
	stroke: var(--ink);
	stroke-width: 1.3;
}
.fs .node text {
	font-family: var(--sans);
	font-size: 14px;
	fill: var(--ink);
}
.fs .node:hover rect {
	fill: var(--surface);
}
.fs .node.soon rect {
	stroke: var(--faint);
	stroke-dasharray: 5 4;
	fill: var(--paper);
}
.fs .node.soon text {
	fill: var(--muted);
}
.fs .flag {
	font-family: var(--mono);
	font-size: 10.5px;
	fill: var(--muted);
}
.fs .entry text {
	font-family: var(--mono);
	font-size: 12px;
	fill: var(--ink);
}
.fs .flow {
	stroke: var(--faint);
	stroke-width: 1.3;
	fill: none;
}
@media (min-width: 721px) {
	.fs .loop-list {
		display: none;
	}
}
@media (max-width: 720px) {
	.fs .loop-scroll {
		display: none;
	}
}
.fs .loop-list {
	margin: 20px 0 12px;
	padding-left: 1.3em;
}
.fs .loop-list li {
	margin: 7px 0;
}
.fs .legend {
	font-size: 0.87rem;
	color: var(--muted);
	margin: 0;
}
.fs .legend code {
	font-size: 0.82rem;
}

/* Shortcuts into the reader's own installation (see app.js). */
.fs .shortcut {
	display: inline-flex;
	align-items: center;
	font: inherit;
	font-size: 0.82rem;
	border: 1px solid var(--line);
	border-radius: 6px;
	padding: 3px 11px;
	margin: 7px 6px 0 0;
	background: var(--white);
	color: var(--muted);
	text-decoration: none;
	cursor: pointer;
}
.fs .shortcut:hover {
	border-color: var(--violet);
	color: var(--ink);
}
.fs .fs-steps .shortcut {
	margin-bottom: 2px;
}
/* A word of code inside a sentence (the slash command, the server name, the
   placeholder to replace) is read in place, not copied whole: it stays light,
   washed with the brand violet so it still reads as something typed. */
.fs code {
	background: #f2edfd;
	color: #3f3168;
	border: 1px solid #e4dbfb;
	border-radius: 5px;
	padding: 1px 6px;
	font-family: var(--mono);
	font-size: 0.86em;
}
.fs .mcp-addr {
	display: inline-block;
	margin: 7px 6px 0 0;
	padding: 5px 10px;
	background: var(--term);
	color: var(--term-ink);
	border-color: var(--term-edge);
}

/* ------------------------------------------------------ action blocks */
.fs .act {
	border-top: 1px solid var(--line);
	padding: 26px 0;
}
.fs .act:last-of-type {
	border-bottom: 1px solid var(--line);
}
.fs .act > p {
	margin: 0 0 14px;
	color: var(--muted);
}
.fs .fs-steps {
	margin: 0 0 14px;
	padding-left: 1.3em;
}
.fs .fs-steps li {
	margin: 6px 0;
}

.fs figure.demo {
	margin: 0 0 18px;
}
.fs figure.demo .ph {
	aspect-ratio: 16 / 9;
	border: 1px dashed var(--faint);
	background: var(--surface);
	border-radius: var(--r-sm);
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	gap: 4px;
	text-align: center;
	padding: 16px;
	color: var(--faint);
	font-family: var(--mono);
	font-size: 0.78rem;
	line-height: 1.5;
}
/* A demo plays like a GIF: no controls, no sound, looping, and deaf to the
   pointer so no browser chrome ever shows over it. app.js starts it when it
   comes on screen; without the script it stays on its poster frame. */
.fs figure.demo video {
	display: block;
	width: 100%;
	height: auto;
	aspect-ratio: 16 / 9;
	background: var(--surface);
	border: 1px solid var(--line);
	border-radius: var(--r-sm);
	pointer-events: none;
}
/* Reduced motion: nothing moves on its own, so the person gets the controls. */
.fs figure.demo video.is-manual {
	pointer-events: auto;
}
.fs figure.demo img {
	display: block;
	width: 100%;
	height: auto;
	border: 1px solid var(--line);
	border-radius: var(--r-sm);
}
.fs figure.demo figcaption {
	font-size: 0.84rem;
	color: var(--muted);
	margin-top: 8px;
}

/* A prompt is pasted into an LLM whole, so it wears the copy skin. Grey mono
   on a grey card was barely readable, and it read as decoration rather than as
   something to take away. */
.fs .prompt {
	border: 1px solid var(--term-edge);
	border-radius: var(--r-sm);
	margin: 0 0 14px;
	overflow: hidden;
	background: var(--term);
}
.fs .prompt-head {
	display: flex;
	justify-content: space-between;
	align-items: center;
	gap: 12px;
	padding: 7px 12px;
	background: var(--term-bar);
	border-bottom: 1px solid var(--term-line);
}
/* The head of a prompt card says what the prompt does, in words, after a
   small label of what the card is. */
.fs .pid {
	display: flex;
	align-items: baseline;
	flex-wrap: wrap;
	gap: 2px 10px;
	font-family: var(--sans);
	font-size: 0.9rem;
	font-weight: 600;
	line-height: 1.35;
	color: var(--term-ink);
}
.fs .pid-kind {
	font-family: var(--mono);
	font-size: 0.66rem;
	font-weight: 500;
	letter-spacing: 0.1em;
	text-transform: uppercase;
	color: var(--term-faint);
}
.fs .fs-copy {
	font: inherit;
	font-size: 0.8rem;
	border: 1px solid rgba(255, 255, 255, 0.28);
	background: rgba(255, 255, 255, 0.14);
	border-radius: 6px;
	padding: 3px 11px;
	cursor: pointer;
	color: #fff;
}
.fs .fs-copy:hover {
	border-color: rgba(255, 255, 255, 0.55);
	background: rgba(255, 255, 255, 0.22);
}
.fs pre {
	margin: 0;
	padding: 14px 16px;
	font-family: var(--mono);
	font-size: 0.81rem;
	line-height: 1.62;
	white-space: pre-wrap;
	overflow-wrap: break-word;
	color: var(--term-ink);
}
/* The address inside a prompt is the one thing to look for before pasting, and
   it is the colour the prompt character wears in the demos. */
.fs pre .mcp-url {
	color: var(--term-accent);
}

.fs .result {
	background: var(--surface);
	padding: 13px 15px;
	border-radius: var(--r-sm);
	margin: 0 0 14px;
}
.fs .notice {
	border-left: 3px solid var(--violet);
	background: var(--surface);
	padding: 11px 15px;
	margin: 0 0 14px;
	font-size: 0.94rem;
}
.fs .fs-muted {
	color: var(--muted);
}
.fs .fs-m0 {
	margin: 0;
}
.fs .fs-pt {
	padding-top: 24px;
}
.fs .fs-mt {
	margin-top: 18px;
}

/* ------------------------------------------------------------ lists */
.fs ul.plain {
	list-style: none;
	padding: 0;
	margin: 0;
	border-top: 1px solid var(--line);
}
.fs ul.plain li {
	padding: 14px 0;
	border-bottom: 1px solid var(--line);
	color: var(--muted);
}
.fs ul.plain b {
	color: var(--ink);
}

.fs dl.gloss {
	margin: 0;
	border-top: 1px solid var(--line);
}
.fs dl.gloss > div {
	display: grid;
	grid-template-columns: 230px 1fr;
	gap: 4px 24px;
	padding: 13px 0;
	border-bottom: 1px solid var(--line);
}
.fs dl.gloss dt {
	font-weight: 600;
}
.fs dl.gloss dd {
	margin: 0;
	color: var(--muted);
	font-size: 0.96rem;
}
@media (max-width: 620px) {
	.fs dl.gloss > div {
		grid-template-columns: 1fr;
	}
}

/* -------------------------------------------------------------- FAQ */
.fs #answers {
	background: var(--surface);
	border-radius: var(--r);
	padding: 24px clamp(16px, 3vw, 32px) 8px;
}
.fs details.q {
	border-bottom: 1px solid var(--line);
}
.fs details.q:last-of-type {
	border-bottom: 0;
}
.fs details.q summary {
	cursor: pointer;
	padding: 15px 34px 15px 0;
	position: relative;
	list-style: none;
	font-weight: 500;
}
.fs details.q summary::-webkit-details-marker {
	display: none;
}
.fs details.q summary::after {
	content: '+';
	position: absolute;
	right: 4px;
	top: 14px;
	font-family: var(--mono);
	font-size: 1.05rem;
	color: var(--muted);
}
.fs details.q[open] summary::after {
	content: '\2013';
}
.fs details.q .a {
	padding: 0 34px 18px 0;
	color: var(--muted);
	font-size: 0.96rem;
}
.fs details.q .a p {
	margin: 0 0 9px;
}
.fs details.q .a p:last-child {
	margin: 0;
}

/* The version line at the foot of the document, above the site footer. */
.fs .fs-foot {
	padding: 8px 0 0;
	font-size: 0.87rem;
	color: var(--muted);
	display: flex;
	justify-content: space-between;
	gap: 16px;
	flex-wrap: wrap;
}
.fs .fs-foot .v {
	font-family: var(--mono);
	font-size: 0.8rem;
}

/* ================= Refonte UX : parcours en trois parties ================= */
:root{--p1:var(--orange);--p2:var(--logo-purple);--p3:var(--royal);--ok:#1fa98a;--ok-ink:#0f7d65}
html{scroll-behavior:smooth}
@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}}
.sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
[id]{scroll-margin-top:92px}

/* Hero */
.hero .hero-cta{align-items:center}
.hero-alt{font-size:14px;color:var(--ink-2);text-decoration:underline;text-underline-offset:3px}
.hero-alt:hover{color:var(--ink)}
.band{transition:padding-left .2s ease}
.band:hover{padding-left:calc(var(--gut-bleed) + 10px)}
.band .no{font-family:var(--display);font-size:22px;font-weight:700;opacity:1;width:1.2em}
.band .meta.is-done{background:#fff;color:var(--ok-ink);padding:4px 10px;border-radius:999px;opacity:1}
@media (max-width:640px){.band{height:auto;padding-top:16px;padding-bottom:16px;flex-wrap:wrap;row-gap:4px}.band .meta{margin-left:calc(1.2em + 20px);text-align:left;width:100%}}

/* The index that follows the reading. It floats beside the text the whole way
   down, so it stays quiet: the reading face at a readable size, grey text, and
   one bar that marks where the reader is. Colour lives in the numbers alone:
   each part keeps the colour of its band, which is how the index and the page
   stay recognisably the same four parts without the text turning into a rainbow. */
.toc{gap:2px;font-family:var(--font);font-size:13.5px;letter-spacing:0;line-height:1.4}
.toc a{transition:color .15s,border-color .15s;padding:5px 0 5px 12px}
.toc a.sub{font-size:13.5px;color:var(--ink-2)}
.toc a.toc-part{display:flex;align-items:center;gap:9px;margin-top:16px;font-size:14.5px;color:var(--ink);font-weight:700}
.toc a.toc-part:first-child{margin-top:0}
.toc .tn{flex:none;display:inline-grid;place-items:center;width:22px;height:22px;border-radius:6px;font-family:var(--display);font-size:12.5px;font-weight:700;background:var(--ink);color:#fff}
.toc .t1 .tn{background:var(--p1);color:#1a1a1a}.toc .t2 .tn{background:var(--p2)}.toc .t3 .tn{background:var(--p3)}
.toc .toc-count{margin-left:auto;padding-right:6px;font-family:var(--mono);font-size:12px;font-weight:400;color:var(--ink-2)}
.toc .toc-count.is-done{color:var(--ok-ink);font-weight:700}
.toc a.is-current{color:var(--ink);border-color:var(--violet)}
.toc a.sub.is-current{font-weight:600}
/* Barre latérale fixe : visible dès 760px (y compris dans un panneau étroit) */
.guide{grid-template-columns:240px minmax(0,1fr)}
@media (max-width:1060px){.guide{grid-template-columns:210px minmax(0,1fr);gap:28px;padding-left:24px;padding-right:24px}}
@media (max-width:900px){
  .guide{grid-template-columns:188px minmax(0,1fr) !important}
  .toc{position:sticky !important;top:88px !important;grid-auto-flow:row !important;overflow:visible !important;padding-bottom:0 !important}
  .toc a{border-left:2px solid var(--line) !important;border-bottom:0 !important;padding:5px 0 5px 10px !important}
  .toc a.toc-part{font-size:13.5px}
  .toc a.sub{margin-left:8px;font-size:13px}
}
.toc{max-height:calc(100vh - 110px);overflow-y:auto;scrollbar-width:thin}
/* Écran étroit : la barre devient un bandeau fixe en haut, défilant horizontalement */
@media (max-width:759px){
  .guide{grid-template-columns:minmax(0,1fr) !important;padding-top:0}
  .toc{position:sticky !important;top:72px !important;z-index:20;display:flex !important;gap:6px;overflow-x:auto !important;overflow-y:hidden;max-height:none;
       margin:0 -24px;padding:10px 24px !important;background:rgba(255,255,255,.95);backdrop-filter:blur(10px);border-bottom:1px solid var(--line)}
  .toc a.sub{display:none}
  .toc a,.toc a.toc-part{flex:none;margin:0 !important;border:1px solid var(--line) !important;border-radius:99px;padding:6px 12px !important;white-space:nowrap;font-size:13px}
  .toc .tn{width:18px;height:18px;border-radius:5px;font-size:11px}
  .toc a.toc-part.is-current{border-color:var(--ink) !important}
  .fs .modebar{top:128px}
  [id]{scroll-margin-top:140px}
}

/* Parties */
.fs .part{margin:0 0 clamp(56px,8vw,96px);scroll-margin-top:84px}
.fs .part-head{display:grid;grid-template-columns:auto minmax(0,1fr);gap:18px;align-items:start;padding-bottom:22px;margin-bottom:28px;border-bottom:1px solid var(--ink)}
.fs .part-no{display:grid;place-items:center;width:52px;height:52px;border-radius:12px;font-family:var(--display);font-size:26px;font-weight:700;color:#fff}
.fs .p1 .part-no{background:var(--p1);color:#1a1a1a}.fs .p2 .part-no{background:var(--p2)}.fs .p3 .part-no{background:var(--p3)}
.fs .part-head h2{margin:2px 0 8px}
.fs .part-head p{margin:0;color:var(--muted);max-width:62ch}
.fs .sub-block{margin-top:clamp(40px,6vw,64px)}
.fs .sub-block.first{margin-top:0}
.fs .sub-block > h3,.fs .what-not h3{font-family:var(--display);font-size:clamp(20px,2.2vw,24px);font-weight:700;letter-spacing:-.02em;margin:0 0 10px}

/* Partie 1 : progression + checklist */
.fs .progress{height:8px;background:var(--line);border-radius:99px;overflow:hidden}
.fs .progress-fill{display:block;height:100%;width:0;background:var(--p1);border-radius:99px;transition:width .35s ease,background .35s}
.fs .progress.all .progress-fill{background:var(--ok)}
.fs .progress-label{margin:10px 0 18px;font-size:14px;color:var(--ink-2)}
.fs .progress-label.all{color:var(--ok-ink);font-weight:600}
.fs ol.checklist{list-style:none;margin:0;padding:0;display:grid;gap:12px}
.fs .check-item{border:1px solid var(--line);border-radius:var(--r);background:var(--white);transition:border-color .2s,box-shadow .2s}
.fs .check-item.is-open{box-shadow:var(--shadow-card);border-color:#d9d9e3}
.fs .check-item.is-done{border-color:var(--ok)}
.fs .check-toggle{all:unset;box-sizing:border-box;width:100%;display:flex;align-items:center;gap:14px;padding:18px 20px;cursor:pointer;border-radius:var(--r)}
.fs .check-toggle:focus-visible{outline:2px solid var(--violet);outline-offset:-2px}
.fs .check-toggle .state{flex:none;width:26px;height:26px;border:2px solid var(--ink-3);border-radius:50%;display:grid;place-items:center;transition:all .2s}
.fs .check-item.is-done .state{background:var(--ok);border-color:var(--ok)}
.fs .check-item.is-done .state::after{content:"";width:6px;height:11px;border:solid #fff;border-width:0 2.5px 2.5px 0;transform:translateY(-1px) rotate(45deg)}
.fs .check-title{flex:1;font-family:var(--display);font-size:19px;font-weight:700;letter-spacing:-.02em;line-height:1.25}
.fs .check-no{display:block;font-family:var(--font);font-size:13px;font-weight:600;letter-spacing:0;color:var(--ink-3);margin-bottom:2px}
/* One stylesheet, two languages: the suffix follows the page's own lang. */
html[lang='en'] .fs .check-item.is-done .check-no::after{content:" · done";color:var(--ok-ink)}
html[lang='fr'] .fs .check-item.is-done .check-no::after{content:" · fait";color:var(--ok-ink)}
.fs .chev{flex:none;width:10px;height:10px;border:solid var(--ink-3);border-width:0 2px 2px 0;transform:rotate(45deg);transition:transform .2s;margin:0 4px 4px}
.fs .check-item.is-open .chev,.fs details[open] > summary .chev{transform:rotate(-135deg);margin-bottom:-4px}
.fs .check-body{display:none;padding:0 20px 22px 60px;gap:14px}
.fs .check-item.is-open .check-body{display:grid}
.fs .check-body > *{margin:0}
.fs .path{display:flex;flex-wrap:wrap;gap:6px;align-items:center;background:#f2edfd;border-radius:10px;padding:8px 10px}
.fs .path span{font-size:14px;font-weight:600;background:#fff;border:1px solid var(--line);border-radius:6px;padding:4px 10px}
.fs .path span + span::before{content:"›";margin:0 8px 0 -2px;color:var(--ink-3);font-weight:400}
.fs .path span + span{padding-left:6px}
.fs .check-links:not(:has(a:not([hidden]))){display:none}
.fs ol.substeps{margin:0;padding:0;list-style:none;counter-reset:ss;display:grid;gap:16px}
.fs ol.substeps > li{counter-increment:ss;position:relative;padding-left:36px}
.fs ol.substeps > li::before{content:counter(ss);position:absolute;left:0;top:0;width:24px;height:24px;border-radius:50%;background:var(--soft);border:1px solid var(--line);display:grid;place-items:center;font-size:12px;font-weight:700}
.fs ol.substeps .prompt{margin-top:10px}
.fs .prompt-hint{margin:8px 0 0;font-size:14px;color:var(--ink-3)}
.fs .prompt-hint.is-filled{display:none}
.fs .confirm{display:flex;align-items:center;gap:12px;padding:14px 16px;border:2px dashed #d5d5e0;border-radius:12px;font-weight:600;cursor:pointer;transition:all .2s}
.fs .confirm:hover{border-color:var(--ok)}
.fs .confirm input{position:absolute;opacity:0;width:1px;height:1px}
.fs .confirm .box{flex:none;width:22px;height:22px;border:2px solid var(--ink-3);border-radius:6px;display:grid;place-items:center;background:#fff;transition:all .15s}
.fs .confirm input:focus-visible + .box{outline:2px solid var(--violet);outline-offset:2px}
.fs .confirm input:checked + .box{background:var(--ok);border-color:var(--ok)}
.fs .confirm input:checked + .box::after{content:"";width:5px;height:10px;border:solid #fff;border-width:0 2.5px 2.5px 0;transform:translateY(-1px) rotate(45deg)}
.fs .confirm:has(input:checked){border-style:solid;border-color:var(--ok);background:rgba(31,169,138,.07);color:var(--ok-ink)}
.fs .check-ko{background:#fff7e8;border-left:3px solid var(--orange);padding:10px 14px;border-radius:0 8px 8px 0;font-size:15px}
.fs .check-body figure.demo{max-width:none}
.fs .check-done{margin-top:16px;background:rgba(31,169,138,.09);border:1px solid var(--ok);border-radius:var(--r);padding:20px 22px;display:grid;gap:8px;justify-items:start}
.fs .check-done p{margin:0}
.fs .check-done .done-title{font-family:var(--display);font-size:20px;font-weight:700;color:var(--ok-ink)}
.fs .check-done .btn-sq{margin-top:6px;color:#fff}
.fs .feedback{margin-top:22px;padding:16px 18px;border-radius:12px;background:var(--soft);font-size:15px;color:var(--ink-2)}
.fs .feedback p{margin:0}
.fs .feedback strong{color:var(--ink)}
@media (max-width:560px){.fs .check-body{padding-left:20px}.fs .part-no{width:42px;height:42px;font-size:21px}}

/* Partie 2 */
.fs .what{display:grid;gap:clamp(20px,3vw,36px);grid-template-columns:minmax(0,1.2fr) minmax(0,1fr);align-items:start}
@media (max-width:1060px){.fs .what{grid-template-columns:minmax(0,1fr)}}
.fs .what-is p{margin:0 0 14px}
.fs .pitch{font-family:var(--display);font-size:clamp(24px,2.8vw,34px) !important;font-weight:700;letter-spacing:-.03em;line-height:1.12 !important;color:var(--ink)}
.fs .pitch .grad{display:inline !important}
.fs .what-not{border:1px solid var(--line);border-radius:var(--r);padding:20px 22px;background:var(--soft)}
.fs .what-not ul.plain{border-top:0}
.fs .what-not ul.plain li{padding:10px 0;font-size:15px}
.fs .what-not ul.plain li:last-child{border-bottom:0;padding-bottom:0}
.fs .acts{display:grid;gap:12px;margin:22px 0 28px}
.fs details.act-card{border:1px solid var(--line);border-radius:var(--r);background:#fff;transition:box-shadow .2s,border-color .2s}
.fs details.act-card[open]{box-shadow:var(--shadow-card);border-color:#d9d9e3}
.fs details.act-card > summary{list-style:none;display:flex;flex-wrap:wrap;align-items:center;gap:10px 14px;padding:18px 20px;cursor:pointer}
.fs details.act-card > summary::-webkit-details-marker{display:none}
.fs details.act-card > summary:focus-visible{outline:2px solid var(--violet);outline-offset:-2px;border-radius:var(--r)}
.fs .act-no{flex:none;display:grid;place-items:center;width:32px;height:32px;border-radius:8px;background:var(--p2);color:#fff;font-family:var(--display);font-weight:700}
.fs .act-title{flex:1 1 260px;font-family:var(--display);font-size:clamp(17px,1.8vw,20px);font-weight:700;letter-spacing:-.02em;line-height:1.25}
.fs .act-body{padding:0 20px 24px 66px;display:grid;gap:14px}
.fs .act-body > *{margin:0}
@media (max-width:560px){.fs .act-body{padding-left:20px}}
.fs .fs-foot{margin-top:40px}

/* Partie 3 */
.fs dl.gloss{display:grid;grid-template-columns:repeat(auto-fit,minmax(240px,1fr));gap:12px;border-top:0}
/* The connector, one card per client. A command must stay ONE line you can
   select and paste: wrapped, `--transport` lands on the next line and reads as
   a second argument, so it scrolls instead. */
/* One client per row. Side by side, a card left the command 295px of the 636
   it needs, so the reader had to drag a scrollbar to read what they are about
   to paste. */
.fs dl.clients{grid-template-columns:1fr;gap:10px}
.fs dl.clients dd code.cmd{display:block;margin:0 0 6px;padding:8px 10px 8px 26px;border-radius:8px;background:var(--term);color:var(--term-ink);border:1px solid var(--term-edge);font-size:12.5px;
	/* Wraps at spaces, never inside a token: a customer's address is longer
	   than the one on a laptop, and `--transport` split over two lines reads as
	   two arguments. The continuation hangs, so a wrapped command still reads
	   as one line. Anything unbreakable still scrolls rather than widening the
	   page. */
	white-space:pre-wrap;word-break:normal;overflow-wrap:normal;overflow-x:auto;text-indent:-16px}
.fs dl.clients dd code.cmd .mcp-url{color:var(--term-accent)}

/* Validated: the same blocks in the page's done green, so a step behind you
   stops asking for attention. */
.fs .check-item.is-done .prompt{background:var(--term-ok);border-color:var(--term-ok-edge)}
.fs .check-item.is-done .prompt-head{background:var(--term-ok-bar);border-bottom-color:rgba(255,255,255,.12)}
.fs .check-item.is-done .pid{color:var(--term-ok-ink)}
.fs .check-item.is-done .pid-kind{color:var(--term-ok-faint)}
.fs .check-item.is-done pre{color:var(--term-ok-ink)}
.fs .check-item.is-done pre .mcp-url,.fs .check-item.is-done code.cmd .mcp-url{color:var(--term-ok-accent)}
.fs .check-item.is-done .mcp-addr,.fs .check-item.is-done dl.clients dd code.cmd{background:var(--term-ok);color:var(--term-ok-ink);border-color:var(--term-ok-edge)}
.fs .check-item.is-done code{background:#e6f5f0;color:#1b5749;border-color:#cfe9e1}
.fs dl.gloss > div{display:block;border:1px solid var(--line);border-radius:12px;padding:14px 16px;border-top:3px solid var(--p3)}
.fs dl.gloss dt{font-weight:700;margin-bottom:4px}
.fs dl.gloss dd{margin:0;color:var(--ink-2);font-size:15px}
.fs mark{background:#efe6ff;color:inherit;border-radius:3px;padding:0 2px}
.fs .path span + span::before{content:none}
.fs .path span + span{padding-left:10px}
.fs .path i{font-style:normal;color:var(--ink-3)}
.fs p.col,.fs .sec-lede{display:block}
.fs ol.checklist,.fs .feedback,.fs .acts,.fs .check-done{max-width:none}
.fs .act-body figure.demo{max-width:none}
.fs dl.gloss > div{border-top:1px solid var(--line)}
.fs dl.gloss dt::before{content:"";display:inline-block;width:8px;height:8px;border-radius:2px;background:var(--p3);margin-right:8px;vertical-align:2px}

/* En-tête de carte : case cliquable + ouverture */
.fs .check-head{display:flex;align-items:center;gap:0;padding-left:16px}
.fs .check-head .check-toggle{padding-left:12px}
.fs .state-box{flex:none;position:relative;display:grid;place-items:center;width:40px;height:40px;border-radius:50%;cursor:pointer}
.fs .state-box:hover .state{border-color:var(--ok);background:rgba(31,169,138,.1)}
.fs .state-box input{position:absolute;inset:0;opacity:0;margin:0;cursor:pointer}
.fs .state-box input:focus-visible + .state{outline:2px solid var(--violet);outline-offset:3px}
.fs .state-box .state{width:28px;height:28px;border:2px solid var(--ink-3);border-radius:50%;display:grid;place-items:center;transition:all .2s}
.fs .check-item.is-done .state-box .state{background:var(--ok);border-color:var(--ok)}
.fs .check-item.is-done .state-box .state::after{content:"";width:6px;height:12px;border:solid #fff;border-width:0 2.5px 2.5px 0;transform:translateY(-1px) rotate(45deg)}
/* Carte validée : tout passe au vert */
.fs .check-item.is-done{background:rgba(31,169,138,.08);border-color:var(--ok);box-shadow:none}
.fs .check-item.is-done .check-title{color:var(--ok-ink)}
.fs .check-item.is-done .check-no{color:var(--ok-ink)}
.fs .check-item.is-done .chev{border-color:var(--ok-ink)}
.fs .check-body{padding-left:68px}
@media (max-width:560px){.fs .check-body{padding-left:20px}}
.fs .act-panels{margin:18px 0 28px}
.fs .act-panel{border:2px solid var(--p2);border-radius:var(--r);background:#fff;box-shadow:var(--shadow-card);margin-bottom:16px}
.fs .act-panel:focus{outline:none}
.fs .panel-head{display:flex;flex-wrap:wrap;align-items:center;gap:10px 14px;padding:20px 20px 12px}
.fs .panel-title{flex:1 1 260px;margin:0;font-family:var(--display);font-size:clamp(19px,2vw,23px);font-weight:700;letter-spacing:-.02em;line-height:1.2}
.fs .act-panel .act-body{padding:4px 20px 8px 66px}
@media (max-width:560px){.fs .act-panel .act-body{padding-left:20px}}

/* Liens vers l'installation Lyriks : actifs seulement quand la page connaît l'adresse */
.fs a[data-app-link]:not([href]){color:inherit;text-decoration:none;cursor:text}
.fs a[data-app-link][href]:not(.shortcut){text-decoration-style:solid;text-underline-offset:3px}
.fs ol.fs-steps .prompt{margin-top:10px}

/* Feedback + étoile GitHub */
.fs .star{width:16px;height:16px;fill:currentColor;flex:none}
.fs .done-star{font-size:14px;color:var(--ink-2);margin-top:6px}
.fs .done-star a{display:inline-flex;align-items:center;gap:4px;font-weight:600;color:var(--ok-ink)}
.fs .done-star .star{color:#f5b301}
.fs .love{margin-top:clamp(48px,7vw,72px);padding:clamp(22px,3vw,32px);border-radius:var(--r-lg);background:linear-gradient(135deg,rgba(128,71,244,.08),rgba(250,95,178,.08) 60%,rgba(255,161,1,.08));border:1px solid rgba(128,71,244,.18)}
.fs .love h3{font-family:var(--display);font-size:clamp(22px,2.6vw,28px);font-weight:700;letter-spacing:-.02em;margin:0 0 8px}
.fs .love-lede{margin:0 0 20px;color:var(--ink-2);max-width:60ch}
.fs .love-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(260px,1fr));gap:14px}
.fs .love-card{background:#fff;border:1px solid var(--line);border-radius:var(--r);padding:18px 20px;display:flex;flex-direction:column;gap:8px}
.fs .love-card p{margin:0}
.fs .love-card > p:not(.love-q){color:var(--ink-2);font-size:15px;flex:1}
.fs .love-q{font-family:var(--display);font-weight:700;font-size:18px;letter-spacing:-.01em}
.fs .love-actions{display:flex;flex-wrap:wrap;align-items:center;gap:8px;margin-top:8px}
.fs .love-actions .shortcut{margin:0}
.fs .btn-gh{display:inline-flex;align-items:center;gap:8px;background:#0a0a0a;color:#fff;font-family:var(--mono);font-size:12px;letter-spacing:.06em;text-transform:uppercase;text-decoration:none;padding:12px 18px;transition:filter .15s}
.fs .btn-gh:hover{filter:brightness(1.4)}
.fs .btn-gh .star{color:#f5b301}
.fs .love-gh{border-color:rgba(245,179,1,.5)}

.toc a.step-link{display:flex;gap:8px;align-items:baseline}
.toc a.step-link .an{flex:none;display:inline-grid;place-items:center;width:18px;height:18px;border-radius:5px;background:rgba(187,70,245,.14);color:#7a1fb0;font-family:var(--display);font-size:11px;font-weight:700}
.fs .act-panel{scroll-margin-top:150px}
@media (max-width:759px){.fs .act-panel{scroll-margin-top:200px}}

/* Partie 4 : Votre avis */
:root{--p4:var(--magenta)}
.fs li.step-win{list-style:none;position:relative;margin:14px 0 4px -22px;padding:16px 18px 16px 50px;border-radius:12px;
  background:linear-gradient(120deg,rgba(128,71,244,.10),rgba(250,95,178,.10) 70%,rgba(255,161,1,.10));border:1px solid rgba(128,71,244,.25);color:var(--ink)}
.fs li.step-win::before{content:counter(list-item);position:absolute;left:14px;top:15px;width:26px;height:26px;border-radius:50%;
  background:var(--grad-viva);color:#fff;display:grid;place-items:center;font-family:var(--display);font-weight:700;font-size:14px}
.fs li.step-win strong{display:block;font-family:var(--display);font-size:17px;letter-spacing:-.01em;margin-bottom:4px;color:#5b1fb0}

/* On a wide screen the guide stopped at 1200px whatever the room, which left
   the demos and the commands cramped between two empty margins. Past 1300px it
   takes the width, but only what has something to show grows with it: a line
   of prose past ~70 characters is a chore, so the text keeps its measure and
   the blocks take the rest. */
@media (min-width:1300px){
	.fs .part-head p,.fs .sec-lede,.fs .check-body > p,.fs .check-body > .confirm,
	.fs .check-body > .check-ko,.fs .check-body > details,.fs .check-body > .path,
	.fs .act-body > p,.fs .act-body > ol,.fs .act-body > .fs-muted,
	.fs .faq-list,.fs .check-done,.fs .feedback{max-width:70ch}
	.fs .prompt{max-width:92ch}
}

/* The connector, one client at a time. The reader names their client first,
   and only that command appears: three commands on screen when two of them
   are for somebody else is what made this card hard to read. Radios rather
   than script, so the choice survives a page with no JavaScript, and the
   rules sit at the end of the file because `dl.gloss > div` above them sets
   `display` at the same specificity. */
.fs .client-q{margin:18px 0 10px;font-weight:600}
.fs .client-radio{position:absolute;width:1px;height:1px;margin:-1px;padding:0;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0}
.fs .client-opts{display:flex;flex-wrap:wrap;gap:8px;margin:0 0 16px}
.fs .client-opts label{cursor:pointer;border:1px solid var(--p2);border-radius:999px;padding:7px 15px;font-size:15px;line-height:1.25;background:#fff;color:var(--ink-2)}
.fs .client-opts label:hover{background:#f2edfd;color:var(--ink)}
.fs dl.clients > div,.fs .client-only{display:none}
.fs #client-claude:checked ~ dl.clients > div[data-client="claude"],
.fs #client-codex:checked ~ dl.clients > div[data-client="codex"],
.fs #client-other:checked ~ dl.clients > div[data-client="other"],
.fs #client-other:checked ~ .client-only[data-client="other"]{display:block}
.fs #client-claude:checked ~ .client-opts label[for="client-claude"],
.fs #client-codex:checked ~ .client-opts label[for="client-codex"],
.fs #client-other:checked ~ .client-opts label[for="client-other"]{background:var(--p2);border-color:var(--p2);color:#fff}
.fs #client-claude:focus-visible ~ .client-opts label[for="client-claude"],
.fs #client-codex:focus-visible ~ .client-opts label[for="client-codex"],
.fs #client-other:focus-visible ~ .client-opts label[for="client-other"]{outline:2px solid var(--p2);outline-offset:2px}
/* The chosen pill already names the client, two centimetres above: the term
   would only say it twice. It stays in the accessibility tree, where the
   definition list still needs it. */
.fs dl.clients > div > dt{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}

/* Ticking a check scrolls the next card to the top of the screen, and that
   used to carry the progress out of view with it: the reader finished a step
   and lost every trace of where they were. It now rides under the nav for
   the length of part 1, and the cards land below it rather than under it. */
.fs .progress-sticky{position:sticky;top:calc(73px + env(safe-area-inset-top, 0px));z-index:20;background:#fff;padding:12px 0;box-shadow:0 8px 10px -10px rgba(20,16,40,.25)}
.fs .progress-sticky .progress-label{margin:10px 0 0}
.fs .check-item{scroll-margin-top:150px}

/* The language selector: both languages side by side, the current one in
   front, as on lyriks.io. A single "Français" link said where you could go
   but never where you were. The separator is drawn, not marked up, so the
   two files keep the same elements in the same order. */
.langsel{display:inline-flex;align-items:center;gap:7px;font-family:var(--mono);font-size:12px;white-space:nowrap}
.langsel > *{text-decoration:none;color:var(--ink-3)}
.langsel .on{color:var(--ink);font-weight:700}
.langsel a:hover{color:var(--ink)}
.langsel > * + *::before{content:"/";color:var(--line);margin-right:7px;font-weight:400}
/* In the burger menu it sits on its own row, sized like the entries above it
   rather than like the nav bar it came from. */
.mnav .langsel-m{display:flex;gap:10px;font-size:15px;padding:13px 2px;border-bottom:1px solid var(--line)}
.mnav .langsel-m > * + *::before{margin-right:10px}

/* Each step carries the prompt its demo types, in the open: the video shows
   it being written, and a reader who wants to run it should not have to
   retype what they just watched, nor click to reveal it. */
.fs .act-body > .prompt{margin:0 0 18px}