/* MUNGO Fret & Transit — suivi (complète styles.css ; ordre des couches déclaré dans styles.css) */
@layer pages {
  /* ---------- suivi ---------- */
  .track { display: grid; gap: var(--sp-6); align-items: start; }
  @media (min-width: 64em) { .track { grid-template-columns: minmax(0, 0.85fr) minmax(0, 1.15fr); } }
  .track__form { display: grid; gap: var(--sp-5); }
  .demo-nos__t { font-size: 1rem; margin-bottom: 0.25rem; }
  .demo-nos > p { font-size: 0.875rem; margin-bottom: 0.75rem; }
  .demo-nos ul { list-style: none; padding: 0; display: grid; gap: 0.4rem; grid-template-columns: repeat(auto-fill, minmax(min(100%, 12.5rem), 1fr)); }
  .demo-no { display: grid; gap: 0.05rem; padding: 0.55rem 0.8rem; min-height: 2.75rem; border-radius: var(--r-2); border: 1.5px solid var(--c-line); background: var(--c-white); text-decoration: none; color: var(--c-marine); transition: border-color var(--dur-1), background-color var(--dur-1); }
  .demo-no:hover, .demo-no[aria-current='true'] { border-color: var(--c-orange); background: var(--c-orange-pale); color: var(--c-marine); }
  .demo-no span { font-weight: 600; font-size: 0.9375rem; }
  .demo-no small { color: var(--c-muted); font-size: 0.8125rem; }
  .track__out { min-width: 0; }
  .track__empty { display: grid; justify-items: center; text-align: center; gap: 0.75rem; padding: 3rem 1.5rem; border-radius: var(--r-3); border: 2px dashed var(--c-line); color: var(--c-muted); }
  .track__empty-ic { width: 2.75rem; height: 2.75rem; color: var(--c-line); }
  .tres { display: grid; gap: var(--sp-4); }
  .tres .card { box-shadow: var(--sh-2); border-color: transparent; padding: 1.4rem; }
  .tres__route { width: 100%; height: auto; }
  .tres__route .rl { stroke: var(--c-line); }
  .tres__route .rd { stroke: var(--c-marine); }
  .tres__route circle.p { fill: var(--c-white); stroke: var(--c-marine); stroke-width: 3; }
  .tres__route .v { fill: var(--c-orange); }
  .tres__route text { font-family: var(--font-mono); font-size: 13px; font-weight: 600; letter-spacing: 0.1em; fill: var(--c-marine); }
  .js .tres__route .rd { animation: draw 0.6s var(--ease) both; }
  .tres__acts { display: flex; flex-wrap: wrap; gap: 0.5rem; }
  .tres__err { padding: 1.25rem; border-radius: var(--r-3); background: var(--c-white); border: 2px solid var(--c-stop); display: grid; gap: 0.6rem; }
  .tres__err h3 { color: var(--c-stop); font-size: 1.125rem; }
  .glossary { display: grid; gap: 0; }
  .glossary > div { display: grid; gap: 0.4rem 1.25rem; padding: 0.85rem 0; border-bottom: 1px solid var(--c-line); }
  @media (min-width: 40em) { .glossary > div { grid-template-columns: 15rem 1fr; align-items: start; } }
  .glossary dd { color: var(--c-muted); font-size: 0.9375rem; }
  .proxy { padding: 1.5rem; border-radius: var(--r-3); background: var(--c-beton); border: 1.5px dashed var(--c-control); }
  .proxy h3 { margin-bottom: 0.75rem; }
  .proxy__txt { font-family: var(--font-mono); font-size: 0.875rem; line-height: 1.7; padding: 1rem; background: var(--c-white); border-radius: var(--r-2); margin-bottom: 0.75rem; }
  /* Sur téléphone, le formulaire de suivi passe avant la photo : la tâche principale reste sous le pouce */
  @media (max-width: 47.99em) { .page-hero__media { display: none; } }

}