/* Outil : 4 étapes qui s'enchaînent horizontalement, carte en dessous */
.outil { margin: 1rem 0 2.5rem; }

.etapes-nav { display: flex; gap: .4rem; list-style: none; padding: 0; margin: 0 0 .75rem; overflow-x: auto; }
.etapes-nav li { margin: 0; flex: none; }
.etapes-nav button { font: inherit; font-size: .88rem; padding: .35rem .75rem; border-radius: 999px; border: 1px solid var(--line); background: var(--surface); color: var(--ink); cursor: pointer; white-space: nowrap; }
.etapes-nav button[aria-current] { background: var(--z1); border-color: var(--z1); color: #fff; font-weight: 600; }
.etapes-nav button:disabled { color: #9aa59f; cursor: default; }

.etapes { position: relative; display: flex; align-items: stretch; gap: 1rem; overflow-x: auto; scroll-snap-type: x mandatory; padding: .25rem .1rem 1rem; margin-bottom: .5rem; }
.etape { flex: 0 0 min(23rem, 88%); scroll-snap-align: start; background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); padding: 1rem 1.1rem; display: flex; flex-direction: column; }
.etape[hidden] { display: none; }
.etape h2 { display: flex; align-items: center; gap: .55rem; font-size: 1.1rem; margin: 0 0 .5rem; }
.etape .num { display: inline-flex; align-items: center; justify-content: center; flex: none; width: 1.8rem; height: 1.8rem; border-radius: 50%; background: var(--z1); color: #fff; font-size: .95rem; font-weight: 700; }
.etape[data-etape="2"] .num { background: var(--z2); }
.etape[data-etape="3"] .num { background: var(--z3); }
.etape[data-etape="4"] .num { background: var(--ink); }
.etape .pourquoi { font-size: .92rem; color: var(--muted); background: var(--bg); border-radius: var(--radius); padding: .6rem .75rem; margin: 0 0 .9rem; }
.etape .boutons { margin-top: auto; padding-top: .75rem; }

.outil label { display: block; font-weight: 600; font-size: .95rem; margin-bottom: .2rem; }
.outil input[type="text"], .outil input[type="number"], .outil select, .outil textarea {
  width: 100%; padding: .5rem .6rem; border: 1px solid #b9c4be; border-radius: var(--radius); font: inherit; background: #fff;
}
.outil textarea { font-family: ui-monospace, SFMono-Regular, Consolas, monospace; font-size: .9rem; }
.outil .aide { font-size: .85rem; color: var(--muted); margin: .4rem 0 0; }
.outil .facultatif { font-weight: 400; color: var(--muted); font-size: .9rem; }
.outil fieldset.choix { border: 0; padding: 0; margin: 0 0 .5rem; }
.outil fieldset.choix legend { font-weight: 600; font-size: .95rem; margin-bottom: .2rem; }
.outil fieldset.choix label, .outil label.case { font-weight: 400; display: flex; gap: .4rem; align-items: center; }
.outil .zones-saisie { display: grid; grid-template-columns: repeat(3, 1fr); gap: .5rem; margin: .5rem 0 .25rem; }
.outil .zones-saisie label { font-size: .85rem; }
.outil .zones-saisie input { margin-top: .2rem; }
.outil .unite { font-weight: 400; color: var(--muted); }
.outil .boutons { display: flex; flex-wrap: wrap; gap: .5rem; }

/* Suggestions d'adresse dans le flux du bloc : une liste flottante serait coupée par le défilement horizontal */
.autocomplete ul { margin: 2px 0 0; padding: 0; list-style: none; background: #fff; border: 1px solid #b9c4be; border-radius: var(--radius); }
.autocomplete li { padding: .45rem .6rem; cursor: pointer; font-size: .92rem; margin: 0; border-bottom: 1px solid var(--line); }
.autocomplete li:last-child { border-bottom: 0; }
.autocomplete li:hover { background: var(--accent-soft); }

#o-message { margin: 0 0 .75rem; }
.notice.ok { background: var(--accent-soft); }
.resultats { width: 100%; border-collapse: collapse; font-size: .9rem; }
.resultats th, .resultats td { text-align: left; padding: .35rem .3rem; border-bottom: 1px solid var(--line); }
.resultats thead th { font-size: .78rem; color: var(--muted); font-weight: 600; }
.pastille { display: inline-block; width: .8rem; height: .8rem; border-radius: 3px; margin-right: .4rem; vertical-align: -1px; }
.pastille.z0 { background: #1f6f55; }
.pastille.z1 { background: #d08a1e; }
.pastille.z2 { background: #376ebe; }
#o-rapport { margin-top: .75rem; font-size: .9rem; }
#o-rapport ul { margin: .4rem 0; }
#o-rapport .echecs { max-height: 12rem; overflow: auto; color: var(--error); }
#o-export { margin-top: 1rem; }

/* La carte, sous les étapes, sur toute la largeur */
#o-carte { height: 65vh; min-height: 380px; max-height: 46rem; border: 1px solid var(--line); border-radius: var(--radius); }

/* Texte de la page outil : largeur de lecture confortable */
main.wrap-large > article > :is(p, h2, h3, ul, ol, .definition, .meta-page, .tableau) { max-width: 46rem; }

/* Fond de carte atténué pour que les trois zones ressortent (même filtre que l'export, voir outil.js) */
.fond-carte { filter: grayscale(85%) brightness(108%) contrast(85%); }