/* Page Rénovation numérique : schéma « circuit d'un document » (assets/circuit.js), terrains et engagements.
   S'ajoute à v2.css. */
:root{
  --gain:#0E6B5C;--gain-ink:#0A4F44;--gain-bg:#D6EBE5;
  --leak:#B84E14;--leak-ink:#8A3709;--leak-bg:#F5E2D3;
}
.switch{display:flex;flex-wrap:wrap;gap:.5rem;margin-top:1.5rem}
.switch button,.pending button,.site button{font:700 .9rem var(--text);padding:.5rem 1.1rem;border:1px solid var(--ink);border-radius:2rem;background:transparent;color:var(--ink);cursor:pointer}
.switch button:hover,.pending button:hover,.site button:hover{background:var(--sage)}
.switch button[aria-pressed="true"]{background:var(--ink);color:var(--cream)}
.badge{margin:1.25rem 0 0;padding:.6rem .9rem;font-size:.9rem;border-left:4px solid var(--leak);background:var(--leak-bg);color:var(--leak-ink);max-width:62ch;border-radius:0 .4rem .4rem 0}
.badge.is-measured{border-color:var(--gain);background:var(--gain-bg);color:var(--gain-ink)}
.lane{margin-top:1.5rem;padding:1.4rem clamp(1rem,3vw,1.75rem) 1.5rem;background:var(--cream);border-left:6px solid var(--line);border-radius:0 .6rem .6rem 0}
.lane-avant{border-left-color:var(--leak)}
.lane-apres{border-left-color:var(--gain)}
.lane h3{font-size:1.3rem;margin-bottom:.2rem}
.lane-sub{margin:0;color:var(--muted);font-size:.95rem}
.steps{list-style:none;margin:1.25rem 0 1.5rem;padding:0;display:grid;grid-template-columns:repeat(auto-fit,minmax(10.5rem,1fr));gap:1.5rem .75rem}
.step{position:relative;padding:1.6rem .5rem 0 0}
.step::before{content:"";position:absolute;top:.46rem;left:0;right:0;height:2px;background:var(--line)}
.step::after{content:"";position:absolute;top:0;left:0;width:.95rem;height:.95rem;border-radius:50%;background:var(--gain)}
.step.is-leaky::after{background:var(--leak)}
.who{display:block;font-size:.8rem;color:var(--muted)}
.what{display:block;margin:.15rem 0 .4rem;font-weight:700;line-height:1.3}
.time{display:block;font-size:.9rem;font-weight:700}
.wait{display:block;font-size:.85rem;color:var(--leak-ink)}
.tags{list-style:none;margin:.5rem 0 0;padding:0;display:flex;flex-wrap:wrap;gap:.3rem}
.tag{font-size:.72rem;font-weight:700;padding:.1rem .5rem;border-radius:1rem;background:var(--leak-bg);color:var(--leak-ink)}
.stats{display:grid;grid-template-columns:repeat(auto-fit,minmax(8.5rem,1fr));gap:1rem;margin:0;padding-top:1rem;border-top:1px solid var(--line)}
.stats dt{font-size:.8rem;color:var(--muted)}
.stats dd{margin:0;font:1.7rem var(--display);letter-spacing:-.02em}
.lane-avant .stats dd{color:var(--leak-ink)}
.lane-apres .stats dd{color:var(--gain-ink)}
.compare{margin-top:1.5rem;display:grid;gap:.6rem;max-width:44rem}
.compare h3{font-size:1.1rem;margin-bottom:.2rem}
.bar{display:grid;grid-template-columns:4.5rem 1fr 4.5rem;gap:.75rem;align-items:center;font-size:.9rem}
.bar-track{height:.9rem;background:var(--line);border-radius:1rem;overflow:hidden}
.bar-fill{display:block;height:100%}
.bar-avant .bar-fill{background:var(--leak)}
.bar-apres .bar-fill{background:var(--gain)}
.bar-val{font-weight:700;text-align:right}
@media (prefers-reduced-motion:no-preference){.bar-fill{transition:width .5s ease}}
.pending{margin-top:1.5rem;padding:1.5rem;background:var(--cream);border-left:6px solid var(--line);max-width:48rem;border-radius:0 .6rem .6rem 0}
.pending h3{font-size:1.3rem}
@media (max-width:560px){
  .steps{grid-template-columns:1fr;gap:0}
  .step{padding:0 0 1.25rem 1.5rem;border-left:2px solid var(--line)}
  .step::before{display:none}
  .step::after{top:.25rem;left:-.5rem}
}

.sites{display:grid;grid-template-columns:repeat(auto-fit,minmax(15rem,1fr));gap:1rem;margin-top:2rem}
.site{background:var(--paper);border:1px solid var(--line);border-radius:.6rem;padding:1.4rem}
.site-kind{display:inline-block;font-size:.75rem;font-weight:700;padding:.15rem .6rem;border-radius:1rem;background:var(--coral);margin:0 0 .8rem}
.mesure{margin-top:2.5rem;max-width:62ch}
.mesure ul{margin:0;padding-left:1.25rem}
.mesure li{margin-bottom:.3rem}
.engagements-grille{list-style:none;margin:2rem 0 0;padding:0;display:grid;grid-template-columns:repeat(auto-fit,minmax(15rem,1fr));gap:1.5rem 2rem}
.engagements-grille li{border-top:2px solid var(--ink);padding-top:.8rem}
.engagements-grille strong{display:block;font:1.15rem var(--display);margin-bottom:.3rem}
.engagements-grille span{color:var(--muted)}