/* TonIAssistant · "Notre méthode". Every selector is scoped under .md or prefixed md-.
   Reads the page tokens (--sc-*, --glow) when present, falls back to Palette L otherwise.
   Without JS, or with reduced motion, every state is the final one. method.js adds .md-js to animate. */

.md {
  --md-ink: var(--sc-ink, #0a1020);
  --md-soft: var(--sc-ink-soft, #4b5670);
  --md-accent: var(--sc-accent, #2152ff);
  --md-glow: var(--glow, #62d8ff);
  --md-bg: var(--sc-canvas, #ffffff);
  --md-card: #ffffff;
  --md-surface: var(--sc-surface, #f3f6fd);
  --md-line: color-mix(in oklab, var(--md-ink) 10%, transparent);
  --md-line-strong: color-mix(in oklab, var(--md-ink) 18%, transparent);
  --md-accent-soft: color-mix(in oklab, var(--md-accent) 8%, var(--md-card));
  --md-accent-line: color-mix(in oklab, var(--md-accent) 28%, transparent);
  --md-muted: color-mix(in oklab, var(--md-ink) 22%, var(--md-card));
  --md-display: var(--sc-font-display, "Bricolage Grotesque", "Geist", system-ui, sans-serif);
  --md-text: var(--sc-font-text, "Geist", system-ui, -apple-system, "Segoe UI", sans-serif);
  --md-mono: var(--sc-font-mono, "Geist Mono", ui-monospace, Menlo, monospace);
  --md-ease: var(--sc-ease-out, cubic-bezier(0.23, 1, 0.32, 1));
  --md-gutter: var(--sc-gutter, clamp(1.25rem, 5vw, 5.5rem));
  --md-maxw: var(--sc-maxw, 82rem);
  --md-t-xs: var(--sc-t-xs, clamp(0.75rem, 0.72rem + 0.15vw, 0.82rem));
  --md-t-sm: var(--sc-t-sm, clamp(0.875rem, 0.84rem + 0.18vw, 0.95rem));
  --md-t-base: var(--sc-t-base, clamp(1rem, 0.96rem + 0.22vw, 1.125rem));
  --md-t-lg: var(--sc-t-lg, clamp(1.2rem, 1.1rem + 0.5vw, 1.5rem));
  --md-t-3xl: var(--sc-t-3xl, clamp(2.8rem, 1.9rem + 4.2vw, 5rem));
  --md-gap: 18px;
  --md-dot: 38px;

  position: relative;
  background: var(--md-bg);
  color: var(--md-ink);
  font-family: var(--md-text);
  font-size: var(--md-t-base);
  line-height: 1.55;
  padding-block: clamp(4.5rem, 8vw, 8rem);
  overflow-x: clip;
}
.md *, .md *::before, .md *::after { box-sizing: border-box; }
.md .ia { color: var(--md-accent); }
.md-wrap { width: 100%; max-width: var(--md-maxw); margin-inline: auto; padding-inline: var(--md-gutter); }
.md-sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

/* ---------- head ---------- */
.md-head { display: grid; grid-template-columns: minmax(0, 1.6fr) minmax(0, 0.8fr); column-gap: clamp(2rem, 5vw, 5rem); align-items: end; }
.md-eyebrow { grid-column: 1 / -1; margin: 0 0 14px; font-size: var(--md-t-xs); letter-spacing: 0.08em; text-transform: uppercase; color: var(--md-accent); font-weight: 500; }
.md-title { margin: 0; font-family: var(--md-display); font-weight: 500; font-size: var(--md-t-3xl); line-height: 0.98; letter-spacing: -0.035em; text-wrap: balance; }

/* ---------- steps: one row per field on desktop (subgrid keeps the five columns aligned) ---------- */
.md-steps { list-style: none; margin: clamp(3rem, 6vw, 4.5rem) 0 0; padding: 0;
  display: grid; grid-template-columns: 0.95fr 1.05fr 1.3fr 0.95fr 1.1fr; grid-template-rows: auto auto auto 1fr auto; column-gap: var(--md-gap); }
.md-step { grid-row: span 5; display: grid; grid-template-rows: subgrid; min-width: 0; position: relative; }

/* the rail */
.md-node { position: relative; height: calc(var(--md-dot) + 30px); margin-bottom: 22px; }
.md-when { position: absolute; left: 0; top: 0; font-size: var(--md-t-xs); font-weight: 500; letter-spacing: 0.06em; text-transform: uppercase; color: var(--md-accent); white-space: nowrap; }
.md-dot { position: absolute; left: 0; bottom: 0; width: var(--md-dot); height: var(--md-dot); border-radius: 50%; display: grid; place-items: center; z-index: 1;
  font-family: var(--md-mono); font-size: 0.8rem; font-weight: 500; background: var(--md-accent); color: #fff;
  box-shadow: 0 0 0 5px var(--md-bg), 0 0 0 6px var(--md-accent-line);
  transition: background 320ms var(--md-ease), color 320ms var(--md-ease), box-shadow 320ms var(--md-ease); }
.md-seg { position: absolute; left: calc(var(--md-dot) + 8px); right: calc(-1 * var(--md-gap) + 8px); bottom: calc(var(--md-dot) / 2 - 1px); height: 2px; border-radius: 2px;
  background: color-mix(in oklab, var(--md-accent) 14%, var(--md-card)); overflow: hidden; }
.md-seg i { position: absolute; inset: 0; border-radius: inherit; transform-origin: left center; transform: scaleX(var(--seg, 1));
  background: linear-gradient(90deg, var(--md-accent), color-mix(in oklab, var(--md-accent) 55%, var(--md-glow))); }
.md-step--open .md-seg { right: 0; background: repeating-linear-gradient(90deg, var(--md-accent-line) 0 6px, transparent 6px 12px);
  -webkit-mask: linear-gradient(90deg, #000 40%, transparent); mask: linear-gradient(90deg, #000 40%, transparent); }
.md-step--open .md-seg i { -webkit-mask: repeating-linear-gradient(90deg, #000 0 6px, transparent 6px 12px); mask: repeating-linear-gradient(90deg, #000 0 6px, transparent 6px 12px); }

.md-name { margin: 0 0 10px; font-family: var(--md-display); font-weight: 500; font-size: clamp(1.3rem, 1.1rem + 0.5vw, 1.6rem); line-height: 1.1; letter-spacing: -0.02em; }
.md-do { margin: 0 0 18px; color: var(--md-soft); font-size: var(--md-t-sm); line-height: 1.55; text-wrap: pretty; }

/* what you get: a small artifact per phase */
.md-get { align-self: start; display: grid; gap: 6px; padding: 14px 14px 16px; border-radius: 16px; background: var(--md-card);
  box-shadow: inset 0 0 0 1px var(--md-accent-line), 0 18px 40px -28px color-mix(in oklab, var(--md-accent) 55%, transparent);
  transition: box-shadow 420ms var(--md-ease), transform 420ms var(--md-ease); }
.md-get__label { margin: 0; font-size: 0.72rem; letter-spacing: 0.08em; text-transform: uppercase; color: var(--md-accent); font-weight: 500; }
.md-get__text { margin: 0; font-size: var(--md-t-sm); font-weight: 500; line-height: 1.4; color: var(--md-ink); }
.md-vis { margin: 8px 0 0; padding: 12px 0 0; border-top: 1px dashed var(--md-line-strong); display: grid; gap: 8px; font-size: 0.8rem; color: var(--md-soft); list-style: none; }
.md-vis__k { display: flex; justify-content: space-between; align-items: baseline; font-size: 0.72rem; letter-spacing: 0.06em; text-transform: uppercase; color: var(--md-soft); }

/* 01 baseline bars */
.md-bar { display: grid; gap: 4px; }
.md-bar b { font-weight: 400; line-height: 1.2; }
.md-bar i, .md-cmp i { display: block; height: 6px; border-radius: 6px; background: var(--md-surface); position: relative; overflow: hidden; }
.md-bar i::after, .md-cmp i::after { content: ""; position: absolute; inset: 0; border-radius: inherit; transform-origin: left center; transform: scaleX(var(--w));
  background: color-mix(in oklab, var(--md-ink) 62%, var(--md-card)); transition: transform 760ms var(--md-ease); }
.md-bar:nth-of-type(2) i::after { transition-delay: 90ms; } .md-bar:nth-of-type(3) i::after { transition-delay: 180ms; } .md-bar:nth-of-type(4) i::after { transition-delay: 270ms; }

/* 02 checklist */
.md-vis--check li { display: flex; align-items: center; gap: 9px; line-height: 1.25; color: var(--md-ink); transition: color 300ms var(--md-ease); }
.md-vis--check li::before { content: ""; flex: none; width: 16px; height: 16px; border-radius: 50%; background: var(--md-accent);
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='none' stroke='white' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m4.5 8.2 2.3 2.3 4.7-5'/%3E%3C/svg%3E");
  box-shadow: inset 0 0 0 1.5px var(--md-accent); transition: background-color 260ms var(--md-ease), box-shadow 260ms var(--md-ease), transform 260ms var(--md-ease); }
.md-vis--check li:nth-child(2)::before { transition-delay: 160ms; } .md-vis--check li:nth-child(3)::before { transition-delay: 320ms; }
.md-vis--check li:nth-child(4)::before { transition-delay: 480ms; } .md-vis--check li:nth-child(5)::before { transition-delay: 640ms; }

/* 03 weekly point */
.md-wk { font-family: var(--md-mono); font-weight: 500; font-size: 0.95rem; letter-spacing: 0; color: var(--md-accent); text-transform: none; font-variant-numeric: tabular-nums; }
.md-cells { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); gap: 4px; }
.md-cells i { height: 20px; border-radius: 5px; background: var(--md-accent); transition: background-color 200ms var(--md-ease), transform 200ms var(--md-ease); }
.md-cells i:nth-child(odd) { background: color-mix(in oklab, var(--md-accent) 80%, var(--md-glow)); }
.md-vis__row { display: flex; flex-wrap: wrap; gap: 6px 12px; }
.md-vis__row em { font-style: normal; display: inline-flex; align-items: center; gap: 6px; color: var(--md-ink); }
.md-vis__row em::before { content: ""; width: 7px; height: 7px; border-radius: 50%; background: var(--md-accent); }

/* 04 start vs month 3 */
.md-cmp { display: grid; gap: 3px; }
.md-cmp b { font-weight: 400; line-height: 1.2; margin-bottom: 1px; }
.md-cmp i { height: 5px; }
.md-cmp i.a::after { background: var(--md-muted); }
.md-cmp i.b::after { background: var(--md-accent); transition-delay: 260ms; }
.md-legend { display: flex; gap: 14px; margin-top: 2px; }
.md-legend em { font-style: normal; display: inline-flex; align-items: center; gap: 6px; }
.md-legend em::before { content: ""; width: 10px; height: 4px; border-radius: 2px; background: var(--md-muted); }
.md-legend em.b::before { background: var(--md-accent); }

/* 05 channels */
.md-vis--chan { display: flex; flex-wrap: wrap; gap: 6px; }
.md-chip { display: inline-flex; align-items: center; gap: 6px; padding: 5px 10px; border-radius: 999px; font-size: 0.78rem; line-height: 1.2;
  background: var(--md-accent-soft); color: var(--md-accent); box-shadow: inset 0 0 0 1px var(--md-accent-line);
  transition: background-color 300ms var(--md-ease), color 300ms var(--md-ease), box-shadow 300ms var(--md-ease); }
.md-chip::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: currentColor; }
.md-chip:nth-child(2) { transition-delay: 200ms; } .md-chip:nth-child(3) { transition-delay: 400ms; } .md-chip:nth-child(4) { transition-delay: 600ms; }

/* with you: one line that never breaks, under the whole timeline */
.md-with { position: relative; margin: 26px 0 0; padding: 18px 0 0; font-size: var(--md-t-sm); line-height: 1.35; color: var(--md-ink); font-weight: 500; }
.md-with span { display: block; margin-bottom: 4px; font-size: 0.72rem; letter-spacing: 0.08em; text-transform: uppercase; color: var(--md-accent); font-weight: 500; white-space: nowrap; }
.md-with::before { content: ""; position: absolute; top: 0; left: 0; right: calc(-1 * var(--md-gap)); height: 3px; border-radius: 3px;
  background: linear-gradient(90deg, var(--md-accent), color-mix(in oklab, var(--md-glow) 80%, var(--md-accent))); transform-origin: left center; transition: transform 900ms var(--md-ease); transition-delay: calc(var(--i, 0) * 140ms); }
.md-step--open .md-with::before { right: 0; -webkit-mask: linear-gradient(90deg, #000 55%, transparent); mask: linear-gradient(90deg, #000 55%, transparent); }
.md-with::after { content: ""; position: absolute; top: -5px; left: 0; width: 13px; height: 13px; border-radius: 50%; background: var(--md-accent);
  box-shadow: 0 0 0 3px var(--md-bg), 0 0 0 7px color-mix(in oklab, var(--md-glow) 30%, transparent); }

/* ---------- the verdict ---------- */
.md-judge { margin-top: clamp(3rem, 6vw, 4.5rem); display: grid; grid-template-columns: minmax(0, 0.8fr) minmax(0, 1.2fr); gap: clamp(1.5rem, 4vw, 4rem); align-items: center;
  padding: clamp(1.5rem, 3vw, 2.5rem); border-radius: 24px; background: var(--md-surface); }
.md-judge__title { margin: 0 0 8px; font-family: var(--md-display); font-weight: 500; font-size: clamp(1.6rem, 1.3rem + 1vw, 2.2rem); line-height: 1.05; letter-spacing: -0.025em; }
.md-judge__copy p { margin: 0; color: var(--md-soft); font-size: var(--md-t-base); max-width: 30rem; }
.md-fork { display: grid; grid-template-columns: auto minmax(56px, 120px) minmax(0, 1fr); align-items: center; }
.md-fork__start { grid-column: 1; grid-row: 1; font-family: var(--md-mono); font-size: 0.78rem; padding: 7px 12px; border-radius: 999px; background: var(--md-card);
  box-shadow: inset 0 0 0 1px var(--md-line-strong); white-space: nowrap; }
.md-fork__lines { grid-column: 2; grid-row: 1; width: 100%; height: 100%; overflow: visible; }
.md-fork__lines path { fill: none; stroke-width: 2; vector-effect: non-scaling-stroke; stroke-linecap: round; stroke-dasharray: 1; stroke-dashoffset: 0; transition: stroke-dashoffset 900ms var(--md-ease); }
.md-fork__yes { stroke: var(--md-accent); }
.md-fork__no { stroke: var(--md-line-strong); transition-delay: 150ms !important; }
.md-fork__ends { grid-column: 3; grid-row: 1; list-style: none; margin: 0; padding: 0; display: grid; grid-auto-rows: 1fr; gap: 12px; }
.md-end { display: grid; gap: 2px; padding: 12px 16px; border-radius: 14px; background: var(--md-card); box-shadow: inset 0 0 0 1px var(--md-line);
  font-size: var(--md-t-sm); line-height: 1.4; transition: opacity 500ms var(--md-ease), transform 500ms var(--md-ease); }
.md-end b { font-weight: 600; }
.md-end span { color: var(--md-soft); }
.md-end--yes { box-shadow: inset 0 0 0 1.5px var(--md-accent-line); }
.md-end--yes b { color: var(--md-accent); }

/* ---------- motion: start states, only when method.js runs and motion is allowed ---------- */
.md-js .md-reveal { opacity: 0; transform: translateY(14px); transition: opacity 700ms var(--md-ease), transform 700ms var(--md-ease); }
.md-js.is-in .md-reveal { opacity: 1; transform: none; }
.md-js .md-seg i { transform: scaleX(var(--seg, 0)); }
.md-js .md-step:not(.is-on) .md-dot { background: var(--md-card); color: var(--md-soft); box-shadow: 0 0 0 5px var(--md-bg), inset 0 0 0 1.5px var(--md-line-strong); }
.md-js .md-step.is-cur .md-dot { animation: md-pulse 1.8s var(--md-ease) infinite; }
@keyframes md-pulse { 0% { box-shadow: 0 0 0 5px var(--md-bg), 0 0 0 6px var(--md-accent-line), 0 0 0 6px color-mix(in oklab, var(--md-accent) 35%, transparent); }
  100% { box-shadow: 0 0 0 5px var(--md-bg), 0 0 0 6px var(--md-accent-line), 0 0 0 18px color-mix(in oklab, var(--md-accent) 0%, transparent); } }
.md-js .md-step:not(.is-on) .md-get { box-shadow: inset 0 0 0 1px var(--md-line), 0 18px 40px -28px transparent; }
.md-js .md-step:not(.is-on) .md-get__label { color: var(--md-soft); }
.md-js .md-step:not(.is-on) .md-bar i::after,
.md-js .md-step:not(.is-on) .md-cmp i::after { transform: scaleX(0); transition-delay: 0ms; }
.md-js .md-step:not(.is-on) .md-vis--check li { color: var(--md-soft); }
.md-js .md-step:not(.is-on) .md-vis--check li::before { background-color: var(--md-card); background-image: none; box-shadow: inset 0 0 0 1.5px var(--md-line-strong); transition-delay: 0ms; }
.md-js .md-cells i:not(.is-on) { background: var(--md-surface); }
.md-js .md-step:not(.is-on) .md-chip:not(.is-pilot) { background: var(--md-card); color: var(--md-soft); box-shadow: inset 0 0 0 1px var(--md-line); transition-delay: 0ms; }
.md-js:not(.is-in) .md-with::before { transform: scaleX(0); }
.md-js .md-judge:not(.is-on) .md-fork__lines path { stroke-dashoffset: 1; }
.md-js .md-judge:not(.is-on) .md-end { opacity: 0; transform: translateX(-8px); }
.md-js .md-judge .md-end--no { transition-delay: 220ms; }

/* ---------- tablet and phone: the rail turns vertical ---------- */
@media (max-width: 1023px) {
  .md { --md-dot: 34px; }
  .md-head { grid-template-columns: minmax(0, 1fr); row-gap: 16px; }
  .md-steps { grid-template-columns: minmax(0, 1fr); grid-template-rows: none; }
  .md-step { grid-row: auto; grid-template-rows: none; grid-template-columns: var(--md-dot) minmax(0, 1fr); column-gap: 16px; padding-bottom: 34px; }
  .md-step:last-child { padding-bottom: 0; }
  .md-step > :not(.md-node) { grid-column: 2; }
  .md-dot { top: 0; bottom: auto; }
  .md-when { left: calc(var(--md-dot) + 16px); top: 8px; }
  .md-name { margin-top: 30px; }
  .md-seg { left: calc(var(--md-dot) / 2 - 1px); right: auto; top: calc(var(--md-dot) + 6px); bottom: 6px; width: 2px; height: auto; }
  .md-seg i { transform-origin: center top; transform: scaleY(var(--seg, 1)); }
  .md-js .md-seg i { transform: scaleY(var(--seg, 0)); }
  .md-step--open .md-seg { bottom: -10px; background: repeating-linear-gradient(180deg, var(--md-accent-line) 0 6px, transparent 6px 12px);
    -webkit-mask: linear-gradient(180deg, #000 40%, transparent); mask: linear-gradient(180deg, #000 40%, transparent); }
  .md-step--open .md-seg i { -webkit-mask: repeating-linear-gradient(180deg, #000 0 6px, transparent 6px 12px); mask: repeating-linear-gradient(180deg, #000 0 6px, transparent 6px 12px); }
  .md-node { position: absolute; inset: 0 auto 0 0; width: var(--md-dot); height: auto; margin: 0; }
  .md-do { max-width: 40rem; margin-bottom: 14px; }
  .md-get { max-width: 30rem; }
  .md-with { justify-self: start; margin-top: 14px; padding: 7px 14px 7px 12px; border-radius: 14px; display: block;
    background: color-mix(in oklab, var(--md-glow) 16%, var(--md-card)); font-size: 0.85rem; }
  .md-with span { display: inline; margin: 0 8px 0 0; font-size: 0.7rem; color: color-mix(in oklab, var(--md-accent) 75%, var(--md-ink)); }
  .md-with::before, .md-with::after { display: none; }
  .md-judge { grid-template-columns: minmax(0, 1fr); }
}
@media (max-width: 560px) {
  .md { padding-top: 2.5rem; }
  .md-title { font-size: clamp(2.2rem, 1.4rem + 4vw, 2.8rem); }
  .md-do { font-size: 1rem; line-height: 1.55; }
  .md-fork { grid-template-columns: minmax(0, 1fr); row-gap: 12px; }
  .md-fork__start { justify-self: start; }
  .md-fork__lines { display: none; }
  .md-fork__start, .md-fork__ends { grid-column: 1; grid-row: auto; }
  .md-fork__ends { grid-auto-rows: auto; padding-left: 14px; border-left: 2px solid var(--md-accent-line); }
}

@media (prefers-reduced-motion: reduce) {
  .md *, .md *::before, .md *::after { transition: none !important; animation: none !important; }
}

/* phones: the gap to the next section was 72 + 72 px */
@media (max-width: 560px) { .md { padding-bottom: var(--sc-7, 3rem); } }