/*!
 * methode.css — page Méthode & IA (methode.html, en/method.html). Préfixe mt-.
 * À charger après styles.css et content.css. Budget : fonts + styles + content + methode < 80 Kio.
 * Documentation : docs/portfolio-design-system.md
 */
@layer pages {
  .mt-hero h1 { max-inline-size: 12em; }
  .mt-hero .link-arrow .icon { rotate: 90deg; }
  .mt-hero .link-arrow:hover .icon { translate: 0 3px; }

  /* ---------- Cycle en V (version allégée) ---------- */
  .mt-v { margin: 0 0 var(--space-l); }
  .mt-v svg { display: block; inline-size: 100%; block-size: auto; overflow: visible; font-family: var(--font-sans); }
  .mt-v .mt-v--wide { display: none; }
  .mt-v .mt-v--mini { max-inline-size: 22rem; }
  @media (min-width: 48em) { .mt-v .mt-v--wide { display: block; } .mt-v .mt-v--mini { display: none; } }
  .mt-v .v-l { fill: none; stroke: var(--c-line-strong); stroke-width: 1.5; }
  .mt-v .v-d { fill: none; stroke: var(--c-accent-text); stroke-dasharray: 3 6; opacity: 0.6; }
  .mt-v circle { fill: var(--c-raised); stroke: var(--c-line-strong); stroke-width: 1.25; }
  .mt-v text { fill: var(--c-text); }
  .mt-v .v-up circle { stroke: var(--c-led-text); stroke-width: 1.5; }
  .mt-v .v-up .v-n { fill: var(--c-led-text); }
  .mt-v .v-tip circle { fill: var(--c-accent); stroke: var(--c-accent); }
  .mt-v .v-tip .v-n { fill: var(--c-on-accent); }
  .mt-v .v-n { font: 600 14px var(--font-sans); font-variant-numeric: tabular-nums; text-anchor: middle; dominant-baseline: central; }
  .mt-v--mini .v-n { font-size: 11px; }
  .mt-v .v-t { font-size: 16px; font-weight: 600; letter-spacing: -0.01em; text-anchor: middle; }
  .mt-v .v-s { font: 500 12px var(--font-mono); letter-spacing: 0.06em; fill: var(--c-text-2); }

  /* Étapes : 7 cellules + une note, dans la grille à filets .cells (la liste « s'efface » pour que ses éléments soient des cellules) */
  .mt-steps { display: contents; list-style: none; }
  .mt-steps > li { min-inline-size: 0; padding: var(--space-s) var(--space-m); background: var(--c-raised); }
  .mt-step { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 0.25rem var(--space-s); align-content: start; }
  .mt-step > :not(.mt-step__num) { grid-column: 2; }
  .mt-step__num {
    grid-row: 1 / span 2; display: grid; place-items: center; inline-size: 2rem; block-size: 2rem;
    border: 1px solid var(--c-line-strong); border-radius: 50%;
    font-size: 0.8125rem; font-weight: 600; font-variant-numeric: tabular-nums;
  }
  .mt-step--tip .mt-step__num { border-color: var(--c-accent); background: var(--c-accent); color: var(--c-on-accent); }
  .mt-step--up .mt-step__num { border-color: var(--c-led-text); color: var(--c-led-text); }
  .mt-step h3 { font-size: var(--step-1); }
  @media (min-width: 40em) {
    .mt-steps > li { padding: var(--space-m); }
    .mt-step { grid-template-columns: minmax(0, 1fr); gap: 0.35rem; }
    .mt-step > :not(.mt-step__num) { grid-column: auto; }
    .mt-step__num { grid-row: auto; margin-block-end: 0.25rem; }
  }
  .mt-step p { color: var(--c-text-2); font-size: var(--step--1); line-height: 1.55; }
  .cells > .mt-steps__note { display: grid; align-content: center; background: var(--c-bg); color: var(--c-text-2); font-size: var(--step--1); }

  /* ---------- Section IA ---------- */
  .mt-ai { display: grid; gap: var(--space-xl); }
  .mt-ai > .section-head { margin-block-end: 0; }
  .mt-who { display: grid; gap: var(--space-s); }
  @media (min-width: 48em) { .mt-who { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
  .mt-who__card { display: grid; gap: var(--space-xs); align-content: start; padding: var(--space-l); border: 1px solid var(--c-line-strong); border-radius: var(--radius-l); background: var(--c-raised); }
  .mt-who__card--ai { border-style: dashed; background: var(--c-bg); }
  .mt-who__card h3 { display: flex; align-items: center; gap: 0.75rem; font-size: var(--step-2); }
  .mt-who__card h3 .icon { inline-size: 1.5rem; block-size: 1.5rem; color: var(--c-accent-text); }
  .mt-who__card p { font-size: var(--step-1); line-height: 1.5; color: var(--c-text-2); max-inline-size: 30em; }

  .mt-gain { display: grid; gap: var(--space-xl); }
  @media (min-width: 64em) { .mt-gain { grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: var(--space-2xl); } }
  .mt-gain h3 { font-size: var(--step-1); margin-block-end: var(--space-s); }
  .mt-gain__big { font-size: var(--step-2); line-height: 1.35; letter-spacing: -0.015em; max-inline-size: 24em; }
  .mt-checks { list-style: none; padding: 0; border-block-start: 1px solid var(--c-line); }
  .mt-checks li { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 0.75rem; padding-block: 0.7rem; border-block-end: 1px solid var(--c-line); }
  .mt-checks .icon { translate: 0 0.15em; color: var(--c-led-text); }
  .mt-proof { margin-block-start: var(--space-s); font-size: var(--step--1); color: var(--c-text-2); max-inline-size: 34em; }

  .mt-agents { display: grid; gap: var(--space-s); justify-items: start; padding: var(--space-l); border: 1px solid var(--c-line); border-inline-start: 3px solid var(--c-accent); border-radius: var(--radius-l); background: var(--c-raised); }
  @media (min-width: 64em) { .mt-agents { grid-template-columns: minmax(0, 1fr) auto; column-gap: var(--space-2xl); align-items: end; padding: var(--space-xl); } .mt-agents > :not(.link-arrow) { grid-column: 1; } .mt-agents > .link-arrow { grid-column: 2; grid-row: 1 / span 2; } }
  .mt-agents h3 { font-size: var(--step-2); }
  .mt-agents p { color: var(--c-text-2); max-inline-size: 40em; }

  /* ---------- Engagements ---------- */
  .mt-pledge { display: grid; gap: 0.4rem; align-content: start; }
  .mt-pledge .icon { inline-size: 1.5rem; block-size: 1.5rem; margin-block-end: 0.35rem; color: var(--c-accent-text); }
  .mt-pledge h3 { font-size: var(--step-1); }
  .mt-pledge p { color: var(--c-text-2); font-size: var(--step--1); line-height: 1.55; }
}