/* MUNGO Fret & Transit — assistant (complète styles.css ; ordre des couches déclaré dans styles.css) */
@layer pages {
  /* ---------- page assistant ---------- */
  .as-hero { padding-block: clamp(1.75rem, 1.2rem + 2.5vw, 3rem) var(--sp-5); background: var(--c-beton); }
  .as-hero__in { display: grid; gap: var(--sp-5); align-items: end; }
  @media (min-width: 64em) { .as-hero__in { grid-template-columns: minmax(0, 1.3fr) minmax(0, 0.7fr); } }
  .as-hero__txt { display: grid; gap: var(--sp-4); justify-items: start; }
  .as-hero h1 { font-size: clamp(2rem, 1.6rem + 2vw, 3.1rem); max-width: 20ch; }
  .as-hero .lead { max-width: 58ch; font-size: var(--step-0); }
  /* La limite gris / blanc passe dans l'en-tête de l'application : la conversation « pose » sur la page. */
  .as-app { background: linear-gradient(var(--c-beton) 0 10.5rem, var(--c-white) 10.5rem); padding-bottom: clamp(2.5rem, 2rem + 2vw, 4rem); }
  .scenarios { display: grid; gap: 0.7rem; padding: 1rem 0 1.1rem; }
  .scenarios__head { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 0.5rem 1rem; }
  .scenarios__t { font-family: var(--font-mono); font-size: 0.75rem; letter-spacing: 0.12em; text-transform: uppercase; color: var(--c-orange-text); font-weight: 600; }
  .scenarios__list { display: flex; flex-wrap: wrap; gap: 0.5rem; }
  .scn { display: inline-flex; align-items: center; gap: 0.45rem; min-height: 2.75rem; padding: 0.4rem 0.8rem 0.4rem 0.45rem; border: 1.5px solid var(--c-line); border-radius: var(--r-pill); background: var(--c-white); color: var(--c-marine); font-weight: 700; font-size: 0.875rem; white-space: nowrap; text-align: left; transition: all var(--dur-1) var(--ease); }
  .scn:hover { border-color: var(--c-orange); background: var(--c-orange-pale); }
  .scn[aria-pressed='true'], .scn.is-running { border-color: var(--c-marine); background: var(--c-marine); color: var(--c-white); }
  .scn__n { display: grid; place-items: center; width: 1.85rem; height: 1.85rem; border-radius: 50%; background: var(--c-beton); color: var(--c-orange-text); font-size: 0.75rem; }
  .scn.is-running .scn__n { background: var(--c-orange); color: var(--c-ink); }
  @media (max-width: 47.99em) {
    .scenarios__list { flex-wrap: nowrap; overflow-x: auto; scroll-snap-type: x proximity; margin-inline: calc(-1 * var(--gutter)); padding: 0.15rem var(--gutter) 0.4rem; scroll-padding-inline: var(--gutter); scrollbar-width: thin; }
    .scn { scroll-snap-align: start; flex: none; }
  }
  .tourbar { display: flex; flex-wrap: wrap; align-items: center; gap: 0.5rem 0.75rem; margin-bottom: 0.9rem; padding: 0.7rem 0.9rem; border-radius: var(--r-3); background: var(--c-marine); color: var(--c-white); }
  .tourbar__txt { flex: 1; min-width: 12rem; font-weight: 600; font-size: 0.9375rem; }
  .tourbar__txt b { color: var(--c-orange-soft); }
  .tourbar .btn { min-height: 2.75rem; }
  .tourbar :focus-visible { outline-color: var(--c-orange); }
  .tourbar__note { width: 100%; font-size: 0.8125rem; color: #C9D5E2; }
  .app { display: grid; gap: var(--sp-4); align-items: start; }
  @media (min-width: 64em) {
    .app.is-reasoning { grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); }
    .app .reason { position: sticky; top: calc(var(--header-h) + 1rem); height: min(82dvh, 760px); }
  }
  @media (max-width: 63.99em) { .app .reason { max-height: 34rem; } }
  .tools-ph { margin: var(--sp-5) 0 0; max-width: 18rem; aspect-ratio: 1; border-radius: 50%; overflow: hidden; border: 6px solid var(--c-white); box-shadow: var(--sh-2); }
  @media (max-width: 63.99em) { .tools-ph { display: none; } }
  .guards { display: grid; gap: var(--sp-4); grid-template-columns: repeat(auto-fill, minmax(min(100%, 21rem), 1fr)); counter-reset: g; }
  .guards li { display: flex; gap: 1rem; padding: 1.25rem; border-radius: var(--r-3); background: var(--c-beton); }
  .guard__n { display: grid; place-items: center; flex: none; width: 2.5rem; height: 2.5rem; border-radius: 50%; background: var(--c-marine); color: var(--c-white); font-weight: 600; }
  .guards h3 { font-size: 1.0625rem; margin-bottom: 0.3rem; }
  .guards p { color: var(--c-muted); font-size: 0.9375rem; }
  .prod { display: grid; gap: var(--sp-5); grid-template-columns: repeat(auto-fit, minmax(min(100%, 22rem), 1fr)); }
  .prod__col { padding: 1.5rem; border-radius: var(--r-3); background: rgb(255 255 255 / 0.06); border: 1px solid rgb(255 255 255 / 0.12); }
  .prod__col h3 { margin-bottom: 1rem; }
  .prod__col ul { display: grid; gap: 0.75rem; }
  .prod__col li { display: flex; gap: 0.6rem; color: #DCE5EF; }
  .prod__col li .i { color: var(--c-orange-soft); margin-top: 0.2em; width: 1.1em; height: 1.1em; }
  .prod__col--keep { background: var(--c-white); border-color: transparent; }
  .prod__col--keep h3 { color: var(--c-marine); }
  .prod__col--keep li { color: var(--c-ink); }
  .prod__col--keep li .i { color: var(--c-ok); }

  /* Outils : tableau à 4 colonnes sur grand écran, liste empilée sur téléphone (pas de défilement de côté) */
  .tools-list { display: none; }
  @media (max-width: 47.99em) {
    .table-wrap--tools { display: none; }
    .tools-list { display: block; margin-block: var(--sp-5); border-radius: var(--r-3); border: 1px solid var(--c-line-soft); background: var(--c-white); }
    .tools-list__title { padding: 1rem 1.1rem 0.6rem; font-size: 1rem; font-weight: 800; color: var(--c-marine); }
    .tools-list li { padding: 0.85rem 1.1rem; border-top: 1px solid var(--c-line-soft); }
    .tools-list code { font-family: var(--font-mono); font-weight: 600; color: var(--c-orange-text); font-size: 0.875rem; }
    .tools-list p { margin: 0.2rem 0 0; font-size: 0.9375rem; }
    .tools-list__meta { color: var(--c-muted); }
    .tools-list ul { list-style: none; margin: 0; padding: 0; }
    .tools-list p.tools-list__meta { font-size: 0.875rem; margin-top: 0.15rem; }
    .tools-list__meta span { font-weight: 600; color: var(--c-ink); }
    .tools-list__meta a { display: inline-block; padding-block: 0.6rem; margin-block: -0.6rem; }
  }

}