/* method.css (Fable, 2026-10-30, V9.5): the method page's own parts, on top of v9.css (header, footer, contact, cards, buttons). The four
   steps on a rail, the thirteen entry points with their redirection to our dossiers, the Analysis telemetry card (T2), the button back; also
   the 404's title. Same tokens as the home (v9.css :root): marine and white, the language's accent only as a contour. */

/* the top: title, lead, the four steps */
.m-top { padding: 152px var(--edge) 0; }
.m-top h1 { font-size: 48px; line-height: 1.1; font-weight: 600; letter-spacing: -0.03em; }
.m-lead { max-width: 36em; margin-top: 16px; font-size: 18px; line-height: 1.5; color: var(--fg-1); }
.steps { position: relative; max-width: 760px; margin: 48px 0 0; padding: 0; list-style: none; }
.step { position: relative; display: grid; grid-template-columns: 40px minmax(0, 1fr); gap: 0 20px; padding-bottom: 36px; }
.step:last-child { padding-bottom: 0; }
.step:not(:last-child)::before { content: ""; position: absolute; left: 19.5px; top: 44px; bottom: 4px; width: 1px; background: var(--line); }   /* the rail */
.step-ico { display: flex; align-items: center; justify-content: center; width: 40px; height: 40px; border: 1px solid var(--line-2); border-radius: 50%; background: var(--bg); color: var(--fg-1); }
.step-ico .xi { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 1.5; stroke-linecap: round; stroke-linejoin: round; }
.step h3 { margin-top: 7px; font-size: 22px; line-height: 1.2; font-weight: 500; letter-spacing: -0.012em; }
.step p { max-width: 58ch; margin-top: 8px; font-size: 15px; line-height: 1.55; color: var(--fg-1); }
.step .step-price { margin-top: 12px; color: var(--fg); font-weight: 500; }

/* sections */
.m-sec { margin-top: 112px; }

/* the entry points: two columns of rows, a hairline above each; where one of our dossiers starts from the input, its family and the link */
.rows { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0 48px; margin: 0; }
.row { display: grid; grid-template-columns: 24px minmax(0, 1fr); gap: 4px 14px; align-content: start; padding: 18px 0; border-top: 1px solid var(--line); scroll-margin-top: 96px; }
.row:target { border-top-color: var(--acc); }
.row-ico { width: 20px; height: 20px; margin-top: 2px; color: var(--fg-2); fill: none; stroke: currentColor; stroke-width: 1.5; stroke-linecap: round; stroke-linejoin: round; }
.row dt { font-size: 16px; line-height: 1.5; font-weight: 500; }
.row dd { grid-column: 2; margin: 0; font-size: 14px; line-height: 1.55; color: var(--fg-1); }
.row-case { display: flex; align-items: center; gap: 8px; width: fit-content; min-height: 36px; margin-top: 8px; font-size: 14px; font-weight: 500; color: var(--fg); }
.row-fam { padding: 2px 8px; border: 1px solid var(--line); border-radius: 999px; font-size: 14px; line-height: 1.4; letter-spacing: 0.02em; text-transform: uppercase; color: var(--fg-2); transition: border-color var(--fast) var(--ease); }
.row-case .i-r { width: 14px; height: 14px; color: var(--fg-2); transition: transform var(--fast) var(--ease); }
.row-case:hover { text-decoration: underline; text-underline-offset: 4px; text-decoration-thickness: 1px; }
.row-case:hover .row-fam { border-color: var(--acc); }
.row-case:hover .i-r { transform: translateX(3px); }

/* Analysis, the telemetry card (T2): the two scales side by side, green to red over the grades that judge (A to E, 1 to 5); F and 6
   hatched and neutral: they mean « cannot be judged », not « worst »; only the two ends written; the rules in one strip */
.tm { --g1: #22C55E; --g2: #84CC16; --g3: #EAB308; --g4: #F97316; --g5: #EF4444;
  --na: repeating-linear-gradient(135deg, rgba(255,255,255,.16) 0 2px, rgba(255,255,255,.04) 2px 6px);
  display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 24px 48px; padding: var(--pad); }
.tm-scale { min-width: 0; }
.tm-name { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: 4px 16px; font-size: 15px; line-height: 1.4; font-weight: 500; }
.tm-meta { font-size: 14px; font-weight: 400; color: var(--fg-2); }
.tm-track { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 2px; margin: 10px 0 0; padding: 0; list-style: none; }
.tm-c { display: flex; align-items: center; justify-content: center; height: 26px; font-size: 14px; line-height: 1; font-weight: 600; font-variant-numeric: tabular-nums; color: #04091A; }
.tm-c1 { background: var(--g1); border-radius: 5px 0 0 5px; }
.tm-c2 { background: var(--g2); } .tm-c3 { background: var(--g3); } .tm-c4 { background: var(--g4); } .tm-c5 { background: var(--g5); }
.tm-na { background: var(--na); color: var(--fg); border-radius: 0 5px 5px 0; }
.tm-ends { display: flex; justify-content: space-between; gap: 16px; margin-top: 10px; font-size: 14px; line-height: 1.4; color: var(--fg-2); }
.tm-ends span:last-child { text-align: right; white-space: nowrap; }
.tm-rules { grid-column: 1 / -1; display: flex; flex-wrap: wrap; padding-top: 16px; border-top: 1px solid var(--line); font-size: 14px; line-height: 1.5; color: var(--fg-1); }
.tm-rules li + li::before { content: "·"; margin: 0 10px; color: var(--fg-2); }

/* the button back to the home (the line button of v9.css, its arrow pointing back) */
.m-back { margin-top: 64px; }
.button-line .i-l { transition: transform var(--fast) var(--ease); }
.button-line:hover .i-l { transform: translateX(-3px); }
.nf .m-back { margin-top: 32px; }
.nf { padding-bottom: 0; }

@media (prefers-reduced-motion: reduce) { .button-line .i-l, .row-case .i-r { transform: none !important; } }
@media (max-width: 1023.98px) { .rows { grid-template-columns: minmax(0, 1fr); } }
@media (max-width: 767.98px) {
  .m-top { padding-top: 104px; }
  .m-top h1 { font-size: 36px; }
  .m-lead { font-size: 17px; }
  .steps { margin-top: 36px; }
  .step { grid-template-columns: 36px minmax(0, 1fr); gap: 0 16px; padding-bottom: 28px; }
  .step:not(:last-child)::before { left: 17.5px; top: 40px; }
  .step-ico { width: 36px; height: 36px; }
  .step h3 { margin-top: 5px; font-size: 20px; }
  .m-sec { margin-top: 80px; }
  .tm { grid-template-columns: minmax(0, 1fr); }
  .tm-rules { flex-direction: column; gap: 4px; }
  .tm-rules li + li::before { content: none; }
}