/* LA DÉCOUVERTE AVANT COMPTE — decouvrir.html (CDC découverte, lot D2,
   11/09). Les jetons et les boutons viennent de kelveen.css ; le pollen dit
   l'action et le bâtiment choisi, rien d'autre. */

.avant-page{padding:118px 0 72px}
.avant{display:grid;gap:18px;max-width:760px;color:var(--evergreen)}
.avant :is(h1,p,ol,figure){margin:0}
.avant h1{font-size:clamp(1.9rem,4.4vw,3.1rem);line-height:1.02;letter-spacing:-.045em;text-wrap:balance}
.avant button{font:inherit}
.avant :is(button,a,input,[tabindex]):focus-visible{outline:3px solid var(--pollen);outline-offset:3px}

/* Le fil : trois pas, et c'est tout. */
.avant-fil{display:flex;flex-wrap:wrap;gap:6px 18px;padding:0;list-style:none;font-size:.8rem;font-weight:750;color:rgba(12,29,21,.55)}
.avant-fil li{display:inline-flex;align-items:center;gap:7px}
.avant-fil span{display:inline-grid;place-items:center;width:22px;height:22px;border-radius:50%;background:rgba(12,29,21,.08);font-size:.75rem}
.avant-fil [aria-current="step"]{color:var(--evergreen)}
.avant-fil [aria-current="step"] span{background:var(--pollen)}

.avant-recherche{display:grid;gap:8px}
.avant-recherche label{font-weight:800}
.avant-champ{display:flex;flex-wrap:wrap;gap:10px}
.avant-champ input{flex:1 1 260px;min-height:50px;padding:10px 14px;border:1px solid rgba(12,29,21,.3);border-radius:6px;
  background:var(--white);color:var(--evergreen);font:inherit;font-size:1rem}
.avant-aide,.avant-note{font-size:.86rem;line-height:1.55;color:rgba(12,29,21,.7);max-width:62ch}
.avant-note a,.avant-exemple a{color:inherit;font-weight:750;text-decoration-color:var(--pollen);text-decoration-thickness:2px;text-underline-offset:3px}
.avant-lien{justify-self:start;min-height:44px;padding:0;border:0;background:none;color:var(--evergreen);font-weight:750;
  text-decoration:underline;text-decoration-color:var(--pollen);text-decoration-thickness:2px;text-underline-offset:4px;cursor:pointer}

.avant-resultats{display:grid;gap:6px}
.avant-choix{min-height:48px;padding:10px 14px;border:1px solid rgba(12,29,21,.16);border-radius:8px;background:var(--white);
  color:var(--evergreen);text-align:left;cursor:pointer}
.avant-choix:hover{border-color:var(--evergreen)}
.avant-precision{margin-left:6px;font-size:.8rem;color:rgba(12,29,21,.62)}
.avant-etat{font-size:.9rem;color:rgba(12,29,21,.72)}
.avant-exemple{font-size:.9rem;color:rgba(12,29,21,.72)}
.avant-adresse{font-size:1.05rem;font-weight:800}
.avant-faits{font-size:.9rem;line-height:1.5;font-variant-numeric:tabular-nums}
.avant-source{color:rgba(12,29,21,.62)}
.avant-alerte{padding:12px 14px;border-left:3px solid var(--tangerine);border-radius:0 8px 8px 0;background:rgba(214,73,51,.08);
  font-size:.9rem;line-height:1.5}
.avant-intro{font-size:1rem;line-height:1.6;max-width:62ch}

/* La vue aérienne : l'orthophoto de l'IGN, les bâtiments par-dessus. */
.avant-carte{display:grid;gap:6px;max-width:560px}
.avant-carte svg{width:100%;aspect-ratio:1;display:block;border-radius:12px;background:#d7d3c1;overflow:hidden}
.avant-carte figcaption{font-size:.75rem;color:rgba(12,29,21,.6)}
.avant-bati{fill:rgba(255,253,244,.06);stroke:rgba(255,253,244,.8);stroke-width:1.2;vector-effect:non-scaling-stroke;cursor:pointer}
.avant-bati:hover,.avant-carte--choix .avant-bati{fill:rgba(255,253,244,.2)}
.avant-bati--choisi,.avant-bati--choisi:hover{fill:rgba(255,206,59,.34);stroke:var(--pollen);stroke-width:2.6}
.avant-point{fill:var(--tangerine);stroke:var(--white);stroke-width:1.5;vector-effect:non-scaling-stroke}

.avant-actions{display:flex;flex-wrap:wrap;gap:12px 16px;align-items:center}
.avant-second{border-color:rgba(12,29,21,.4);background:transparent;color:var(--evergreen)}
.avant-second:hover{border-color:var(--evergreen);background:rgba(12,29,21,.05)}
.avant-actions--discretes{gap:6px 22px}

.avant-resume{display:grid;gap:16px;grid-template-columns:minmax(0,240px) minmax(0,1fr);align-items:start}
.avant-resume>div{display:grid;gap:8px}
@media(max-width:640px){.avant-resume{grid-template-columns:1fr}.avant-page{padding-top:96px}}