/* Le calculateur de taxe d'aménagement (/outils/taxe-amenagement/), dans la grammaire des guides (src/commune.css) :
   une encre, des filets, le lagon pour l'action ; compact, sans ombre ni pastille. La page reste claire en thème
   sombre, comme les guides (commune.css, color-scheme: light). */
.page-taxe h1 { text-wrap: balance; }
.page-taxe .ta-outil > * { min-width: 0; }
.page-taxe .ta-outil { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.15fr); gap: 32px; align-items: start; margin: 8px 0 40px; }
.ta-form fieldset { min-width: 0; margin: 0 0 18px; padding: 0; border: 0; }
.ta-form legend { display: block; width: 100%; padding: 10px 0 4px; border-top: 2px solid var(--c-encre); font: 600 .75rem/1.2 var(--j-sans, sans-serif); letter-spacing: .06em; text-transform: uppercase; color: var(--c-gris); }
.ta-champ { display: grid; grid-template-columns: minmax(0, 1fr) minmax(140px, 46%); gap: 12px; align-items: center; padding: 7px 0; border-bottom: 1px solid var(--c-filet); }
.ta-champ > span:first-child { font-size: .9375rem; color: var(--c-encre-2); }
.ta-champ i { font-style: normal; font-size: .8125rem; color: var(--c-gris); }
.ta-saisie { display: flex; align-items: center; gap: 6px; }
.ta-saisie small { color: var(--c-gris); font-size: .8125rem; }
.ta-form input:not([type="checkbox"]):not([type="radio"]), .ta-form select {
  width: 100%; min-width: 0; height: 36px; padding: 0 10px; border: 1px solid var(--c-filet); border-radius: 6px; background: #fff; color: var(--c-encre);
  font: 400 .9375rem var(--j-sans, sans-serif); font-variant-numeric: tabular-nums; }
.ta-form input[type="number"] { text-align: right; }
.ta-form input:focus-visible, .ta-form select:focus-visible { outline: 2px solid var(--c-lagon); outline-offset: 1px; }
.ta-types { display: flex; flex-wrap: wrap; gap: 6px; padding: 10px 0; border-bottom: 1px solid var(--c-filet); }
.ta-types label { position: relative; }
.ta-types input { position: absolute; opacity: 0; inset: 0; margin: 0; cursor: pointer; }
.ta-types span { display: inline-flex; align-items: center; min-height: 34px; padding: 0 12px; border: 1px solid var(--c-filet); border-radius: 17px; background: #fff; font-size: .875rem; color: var(--c-encre-2); }
.ta-types input:checked + span { border-color: var(--c-encre); background: var(--c-encre); color: #fff; }
.ta-types input:focus-visible + span { outline: 2px solid var(--c-lagon); outline-offset: 2px; }
.ta-case { display: flex; gap: 10px; align-items: flex-start; padding: 9px 0; border-bottom: 1px solid var(--c-filet); font-size: .9375rem; color: var(--c-encre-2); }
.ta-case input { width: 18px; height: 18px; margin: 2px 0 0; accent-color: var(--c-lagon); flex: none; }
.ta-aide { margin: 6px 0; font-size: .8125rem; color: var(--c-gris); }
.ta-aide strong { color: var(--c-encre); }
.ta-aide-surface { padding: 8px 0; border-bottom: 1px solid var(--c-filet); }
.ta-aide-surface summary { cursor: pointer; font-size: .875rem; color: var(--c-lagon); }
.ta-aide-surface .bouton { margin-top: 10px; }
[data-ta-si][hidden] { display: none; }

.ta-resultat { position: sticky; top: 72px; padding: 18px 20px; border: 1px solid var(--c-filet); border-top: 3px solid var(--c-encre); border-radius: 0; background: #fff; }
.ta-total-lib { margin: 0; font-size: .8125rem; letter-spacing: .04em; text-transform: uppercase; color: var(--c-gris); }
.ta-total-val { margin: 2px 0; font: 600 2.25rem/1.1 var(--j-etroit, sans-serif); color: var(--c-encre); font-variant-numeric: tabular-nums; }
.ta-total-sous { margin: 0 0 12px; font-size: .875rem; color: var(--c-encre-2); }
.ta-parts { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 0; margin: 0 0 12px; border-top: 1px solid var(--c-filet); border-bottom: 1px solid var(--c-filet); }
.ta-parts div { padding: 8px 10px 8px 0; }
.ta-parts div + div { padding-left: 10px; border-left: 1px solid var(--c-filet); }
.ta-parts dt { font-size: .75rem; color: var(--c-gris); }
.ta-parts dd { margin: 2px 0 0; font: 600 1.125rem var(--j-etroit, sans-serif); color: var(--c-encre); }
.ta-parts small, .ta-detail small { display: block; font: 400 .75rem/1.35 var(--j-sans, sans-serif); color: var(--c-gris); }
.ta-alerte { margin: 0 0 14px; font-size: .875rem; line-height: 1.45; color: var(--c-encre); }
.ta-picto { display: inline-flex; align-items: center; justify-content: center; width: 16px; height: 16px; margin-left: 4px; border-radius: 50%; background: var(--ponctuation, #E8453C); color: #fff; font: 700 .6875rem/1 var(--j-sans, sans-serif); cursor: help; vertical-align: 1px; }
.ta-alertes { margin: 0 0 12px; padding: 8px 12px 8px 26px; border-left: 3px solid var(--c-sable); background: #FBF8F1; font-size: .8125rem; color: var(--c-encre-2); }
.ta-detail summary { cursor: pointer; font-weight: 500; font-size: .9375rem; padding: 4px 0; }
.ta-lignes { list-style: none; margin: 4px 0 0; padding: 0; }
.ta-lignes li { padding: 8px 0; border-top: 1px solid var(--c-filet); }
.ta-lignes p { margin: 0; }
.ta-l-titre { font-weight: 500; font-size: .9375rem; color: var(--c-encre); }
.ta-l-calc { font-size: .875rem; color: var(--c-encre-2); font-variant-numeric: tabular-nums; }
.ta-l-parts { font-size: .8125rem; color: var(--c-encre-2); }
.ta-l-note { font-size: .75rem; color: var(--c-gris); }
.ta-resultat h3 { margin: 14px 0 4px; font-size: 1rem; }
.ta-echeance { margin: 0 0 8px; font-size: .875rem; }
.page-taxe #taux .table { font-size: .8125rem; }
.page-taxe #taux .table th[scope="row"] { white-space: nowrap; }
.page-taxe #taux .table :is(td, th) { vertical-align: top; }
.page-taxe #taux .table .num, .page-taxe #taux .table td:last-child { white-space: nowrap; }
.page-taxe abbr { text-decoration: underline dotted; cursor: help; }

.ta-barre { display: none; }
@media (max-width: 860px) {
  .ta-barre { position: fixed; left: 0; right: 0; bottom: 0; z-index: 20; display: flex; align-items: center; gap: 10px; padding: 12px 16px calc(12px + env(safe-area-inset-bottom)); background: var(--c-encre); color: #fff; font-size: .9375rem; text-decoration: none; transition: transform .2s ease; }
  .ta-barre b { margin-left: auto; font: 600 1.25rem var(--j-etroit, sans-serif); }
  .ta-barre-cachee { transform: translateY(110%); }
  .page-taxe main { padding-bottom: 64px; }
  .page-taxe .ta-outil { grid-template-columns: 1fr; gap: 20px; }
  .ta-resultat { position: static; padding: 14px 14px; }
  .ta-total-val { font-size: 2rem; }
}
@media (max-width: 480px) {
  .ta-champ { grid-template-columns: 1fr; gap: 4px; }
  .ta-parts { grid-template-columns: 1fr; }
  .ta-parts div + div { padding-left: 0; border-left: 0; border-top: 1px solid var(--c-filet); }
}