/* Outil « Calculer la superficie d'un terrain » (scripts/blocks/superficie.mjs, assets/js/tools/superficie-ui.js) */
.sup-tool { max-width: 980px; display: grid; gap: 1.2rem; container: sup / inline-size; min-width: 0; }
.sup-tool * { min-width: 0; }
.sup-tool .sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }

/* Onglets */
.sup-modes { display: inline-flex; flex-wrap: wrap; gap: 4px; background: var(--sand); border-radius: 22px; padding: 4px; justify-self: start; max-width: 100%; }
.sup-modes button { font: inherit; font-weight: 650; border: 0; background: none; padding: .6rem 1.1rem; border-radius: 999px; cursor: pointer; color: var(--text); }
.sup-modes button[aria-selected="true"] { background: var(--ink); color: #fff; }
.sup-modes button:focus-visible { outline: 3px solid var(--copper); outline-offset: 2px; }

.sup-tool .form { gap: 1rem; }
.sup-intro { margin: 0; }
.sup-opt { font-weight: 400; color: var(--muted); }
.sup-tool .hint { margin: 0; }
.sup-err { margin: 0; color: #b3261e; font-size: .88rem; font-weight: 600; }
.sup-err:empty { display: none; }
:root[data-theme="dark"] .sup-err, :root[data-theme="dark"] .sup-err-i { color: #ffb4ab; }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) .sup-err, :root:not([data-theme="light"]) .sup-err-i { color: #ffb4ab; } }
.sup-tool [aria-invalid="true"] { border-color: #b3261e !important; box-shadow: inset 0 0 0 1px #b3261e; }
.sup-tool button:focus-visible, .sup-tool a:focus-visible, .sup-tool summary:focus-visible, .sup-tw:focus-visible { outline: 3px solid var(--copper); outline-offset: 2px; }

.sup-actions { display: flex; flex-wrap: wrap; gap: .6rem; align-items: center; }
.sup-tool .btn { cursor: pointer; font: inherit; font-weight: 650; max-width: 100%; white-space: normal; text-align: start; }
.sup-tool .form .btn.ghost, .sup-tool .btn.ghost { color: var(--text); border: 1px solid var(--input-line); padding: .7rem 1.1rem; background: transparent; }
.sup-tool .btn.ghost:hover { border-color: var(--copper); }

/* Liste des bornes */
.sup-pts-head, .sup-pt { display: grid; grid-template-columns: 2rem minmax(4.5rem, .7fr) 1fr 1fr auto; gap: .5rem; align-items: center; }
.sup-pts-head { font-size: .8rem; font-weight: 650; color: var(--muted); padding-inline: .1rem; }
.sup-pts { list-style: none; margin: 0; padding: 0; display: grid; gap: .5rem; }
.sup-pt .sup-num { font-family: var(--mono); font-size: .85rem; color: var(--muted); text-align: center; }
.sup-pt .sup-f { display: block; font-weight: 400; }
.sup-pt .sup-fl { display: none; font-size: .78rem; font-weight: 650; color: var(--muted); }
.sup-tool .form .sup-pt input { padding: .6rem .7rem; }
.sup-row-act { display: inline-flex; gap: .3rem; }
.sup-row-act button, .sup-vdel, .sup-tdel { font: inherit; width: 2.4rem; height: 2.4rem; border-radius: 10px; border: 1px solid var(--input-line); background: var(--surface); color: var(--text); cursor: pointer; display: inline-grid; place-items: center; }
.sup-row-act button:disabled { opacity: .4; cursor: default; }
.sup-row-act button:hover:not(:disabled), .sup-vdel:hover, .sup-tdel:hover { border-color: var(--copper); }
.sup-pt .sup-err { grid-column: 2 / -1; }
@container sup (max-width: 40rem) {
  .sup-pts-head { display: none; }
  .sup-pt { grid-template-columns: 2rem 1fr 1fr; border: 1px solid var(--line); border-radius: 12px; padding: .6rem; }
  .sup-pt .sup-f:first-of-type { grid-column: 2 / -1; }
  .sup-pt .sup-fl { display: block; margin-bottom: .2rem; }
  .sup-pt .sup-f:nth-of-type(2) { grid-column: 1 / 3; }
  .sup-row-act { grid-column: 1 / -1; justify-content: flex-end; }
  .sup-pt .sup-err { grid-column: 1 / -1; }
}
@container sup (max-width: 22rem) {
  .sup-pt { grid-template-columns: 2rem 1fr; }
  .sup-pt .sup-f:nth-of-type(2), .sup-pt .sup-f:nth-of-type(3) { grid-column: 1 / -1; }
}
.sup-paste summary, .sup-conv summary, .sup-pro summary { cursor: pointer; font-weight: 650; }
.sup-paste[open] { display: grid; gap: .8rem; }
.sup-paste-msg p { margin: 0; }

/* Carte */
.sup-mapbox { display: grid; gap: .6rem; }
.sup-map { position: relative; height: clamp(320px, 60vh, 520px); border-radius: var(--radius); border: 1px solid var(--line); overflow: hidden; background: var(--sand); z-index: 0; }
.sup-map:focus-visible { outline: 3px solid var(--copper); outline-offset: 2px; }
.sup-cross { position: absolute; inset: 50% auto auto 50%; width: 26px; height: 26px; margin: -13px 0 0 -13px; z-index: 500; pointer-events: none; }
.sup-cross::before, .sup-cross::after { content: ""; position: absolute; background: #0b0d22; box-shadow: 0 0 0 1px #fff; }
.sup-cross::before { inset: 12px 0 auto 0; height: 2px; } .sup-cross::after { inset: 0 auto 0 12px; width: 2px; }
.sup-tool .leaflet-container { font: inherit; font-size: .8rem; }
.sup-tool .leaflet-control-attribution { font-size: .72rem; }
.sup-tool .leaflet-control-attribution a { color: #0b4a8b; }
.sup-vx { display: grid !important; place-items: center; width: 26px; height: 26px; border-radius: 50%; background: #0b0d22; color: #fff; border: 2px solid #fff; font: 700 12px/1 var(--mono); box-shadow: 0 1px 4px rgba(0, 0, 0, .5); }
.sup-vx.edit { background: #9c5a2a; cursor: grab; }
.sup-vx:focus-visible { outline: 3px solid #0b0d22; outline-offset: 2px; }
.sup-pop-t { margin: 0 0 .5rem; font-weight: 650; color: #191b33; }
.leaflet-popup-content .sup-pop-del { color: #191b33; border-color: #191b33; padding: .5rem .9rem; font-size: .9rem; cursor: pointer; }
.sup-vlist-wrap { display: grid; gap: .5rem; }
.sup-h { font-size: 1.05rem; margin: 0; }
.sup-vlist { margin: 0; padding: 0; list-style: none; display: grid; gap: .3rem; max-height: 14rem; overflow: auto; }
.sup-vlist li { display: flex; justify-content: space-between; align-items: center; gap: .5rem; padding: .3rem .5rem; border: 1px solid var(--line); border-radius: 10px; font-size: .88rem; overflow-wrap: anywhere; }
.sup-goto { display: flex; flex-wrap: wrap; gap: .6rem; align-items: end; }
.sup-goto label { flex: 1 1 14rem; }

/* Mesures de terrain */
.sup-tris { list-style: none; margin: 0; padding: 0; display: grid; gap: .8rem; }
.sup-tris fieldset { border: 1px solid var(--line); border-radius: 12px; padding: .6rem .8rem .8rem; }
.sup-tri-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 7rem), 1fr)) auto; gap: .6rem; align-items: end; }
.sup-tri, .sup-quad { display: grid; gap: .8rem; }
.sup-tri[hidden], .sup-quad[hidden] { display: none; }
.sup-quad-fig { width: min(100%, 240px); height: auto; color: var(--text); }
.sup-quad-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 10rem), 1fr)); gap: .8rem 1rem; }
.sup-quad-grid > p { grid-column: 1 / -1; margin-top: -.5rem; }

/* Résultat (carte sombre, comme le convertisseur Lambert) */
.sup-out:empty { display: none; }
.sup-out:focus { outline: none; }
.sup-res { background: var(--ink); color: #eeecff; border-radius: 14px; padding: clamp(1.1rem, .8rem + 1.5vw, 1.8rem); display: grid; gap: 1rem; overflow-wrap: anywhere; }
.sup-res > * { margin: 0; }
.sup-res .sup-rt { font-size: 1.1rem; color: #fff; }
.sup-res .zn { font-family: var(--mono); font-size: .78rem; color: var(--copper-l); }
[dir="rtl"] .sup-res .zn { font-family: var(--sans); }
/* taille du résultat principal (plus spécifique que .sup-res p) */
.sup-res .sup-big { font-family: var(--mono); font-size: clamp(1.8rem, 1.2rem + 2.5vw, 2.6rem); font-weight: 600; color: #fff; line-height: 1.1; }
.sup-units { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 11rem), 1fr)); gap: .6rem 1.2rem; margin: 0; }
.sup-units dt { font-size: .8rem; color: rgba(236, 234, 255, .75); }
.sup-units dd { margin: 0; font-family: var(--mono); font-size: 1.05rem; }
.sup-res .sup-note, .sup-res .sup-sens, .sup-res p { font-size: .92rem; }
.sup-res .hint { color: rgba(236, 234, 255, .75); font-size: .82rem; }
.sup-warn { margin: 0; padding: .8rem 1rem; list-style: none; border-inline-start: 4px solid var(--copper-l); background: rgba(224, 153, 92, .12); border-radius: 8px; display: grid; gap: .4rem; font-size: .92rem; }
.sup-warn strong::before { content: "⚠ "; }
.sup-bad { font-size: 1rem; }
.sup-cmp { display: grid; gap: .6rem; border-top: 1px solid var(--line-d); padding-top: 1rem; }
.sup-cmp > * { margin: 0; }
.sup-explain { margin: 0; padding-inline-start: 1.2rem; display: grid; gap: .3rem; font-size: .88rem; color: rgba(236, 234, 255, .85); }
.sup-res .sup-h { color: #fff; }
.sup-sketch { margin: 0; display: grid; gap: .3rem; justify-items: center; }
.sup-sketch svg { width: min(100%, 420px); height: auto; background: rgba(255, 255, 255, .04); border-radius: 10px; }
.sup-sk-poly { fill: rgba(224, 153, 92, .18); stroke: var(--copper-l); stroke-width: 2; stroke-linejoin: round; }
.sup-sk-pt { fill: #fff; }
.sup-sk-lb { fill: #eeecff; font: 600 11px var(--mono); direction: ltr; unicode-bidi: plaintext; }
.sup-sk-n path { fill: var(--copper-l); } .sup-sk-n text { fill: #eeecff; font: 700 11px var(--sans); }
.sup-tw { overflow-x: auto; border-radius: 10px; border: 1px solid var(--line-d); }
.sup-tab { width: 100%; border-collapse: collapse; font-size: .86rem; overflow-wrap: normal; }
.sup-tab caption { text-align: start; font-weight: 650; padding: .6rem .8rem; color: #fff; }
.sup-tab th, .sup-tab td { padding: .45rem .8rem; text-align: end; border-top: 1px solid var(--line-d); white-space: nowrap; font-family: var(--mono); font-weight: 400; }
.sup-tab th[scope="row"], .sup-tab thead th:first-child { text-align: start; }
.sup-tab thead th { font-family: var(--sans); font-weight: 650; font-size: .78rem; color: rgba(236, 234, 255, .8); white-space: normal; }
.sup-pro { border-top: 1px solid var(--line-d); padding-top: .8rem; }
.sup-pro[open] > p { margin: .6rem 0 0; }
.sup-tool .sup-res .btn.ghost { color: #eeecff; border: 1px solid rgba(236, 234, 255, .5); }
.sup-res .btn.ghost:hover { border-color: var(--copper-l); background: rgba(255, 255, 255, .06); }
.sup-res .btn:focus-visible, .sup-res summary:focus-visible, .sup-res .sup-tw:focus-visible { outline-color: var(--copper-l); }
.sup-help { display: grid; gap: .6rem; border-top: 1px solid var(--line-d); padding-top: 1rem; }
.sup-help > * { margin: 0; }
.sup-print-head, .sup-print-foot { display: none; }

/* Convertisseur et mémoire */
.sup-conv[open] { display: grid; gap: 1rem; }
.sup-conv-out { margin: 0; font-family: var(--mono); font-size: 1rem; overflow-wrap: anywhere; }
.sup-err-i { color: #b3261e; font-family: var(--sans); }
.sup-store { display: flex; flex-wrap: wrap; gap: .4rem .8rem; align-items: center; }
.sup-clear-all { font: inherit; font-size: .85rem; background: none; border: 1px solid var(--input-line); color: var(--text); border-radius: 999px; padding: .35rem .9rem; cursor: pointer; }

@media (prefers-reduced-motion: reduce) { .sup-tool * { transition: none !important; animation: none !important; } }
.a11y-rm .sup-tool * { transition: none !important; animation: none !important; }

/* Impression : seul le résultat est imprimé, en noir sur blanc */
@media print {
  body * { visibility: hidden !important; }
  .sup-out, .sup-out * { visibility: visible !important; }
  .sup-out { position: absolute; inset: 0 0 auto 0; }
  .sup-res { background: #fff !important; color: #000 !important; padding: 0; border-radius: 0; }
  .sup-res *, .sup-res .zn, .sup-res .hint, .sup-units dt, .sup-explain, .sup-tab thead th, .sup-tab caption, .sup-res .sup-h, .sup-res .sup-rt, .sup-big { color: #000 !important; }
  .sup-tab th, .sup-tab td, .sup-tw, .sup-cmp, .sup-help, .sup-pro { border-color: #999 !important; }
  .sup-tw { overflow: visible; }
  .sup-tab th, .sup-tab td { white-space: normal; }
  .sup-sketch svg { background: none; }
  .sup-sk-poly { fill: #eee; stroke: #000; } .sup-sk-pt, .sup-sk-n path { fill: #000; } .sup-sk-lb, .sup-sk-n text { fill: #000; }
  .sup-warn { background: none; border-color: #000; }
  .sup-exports, .sup-help, .sup-xnote { display: none !important; }
  .sup-pro > p { display: block; }
  .sup-print-head { display: block; border-bottom: 2px solid #000; padding-bottom: .4rem; }
  .sup-print-head p { margin: 0; } .sup-print-t { font-weight: 700; font-size: 1.2rem; }
  .sup-print-foot { display: block; border-top: 1px solid #000; padding-top: .4rem; font-size: .8rem; }
  .sup-units, .sup-tab tr, .sup-sketch { break-inside: avoid; }
}