/* Outil « Contenance : hectares, ares, centiares et m² » (scripts/blocks/contenance.mjs, assets/js/tools/contenance-ui.js) */
.cnt-tool { max-width: 920px; display: grid; gap: 1.4rem; min-width: 0; container: cnt / inline-size; }
.cnt-tool * { min-width: 0; }
.cnt-tool .sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
.cnt-tool .form { gap: .9rem; }
.cnt-tool .hint { margin: 0; }
.cnt-tool .cnt-h { font-size: clamp(1.25rem, 1.05rem + .8vw, 1.6rem); margin: 0; line-height: 1.25; }
.cnt-tool .cnt-h3 { font-size: 1.08rem; margin: 0; }
.cnt-intro { margin: 0; }
.cnt-tool .form input[type="text"] { font-size: 1.12rem; }
.cnt-err { margin: 0; color: #b3261e; font-size: .9rem; font-weight: 600; }
.cnt-err:empty { display: none; }
:root[data-theme="dark"] .cnt-err { color: #ffb4ab; }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) .cnt-err { color: #ffb4ab; } }
.cnt-tool [aria-invalid="true"] { border-color: #b3261e !important; box-shadow: inset 0 0 0 1px #b3261e; }
.cnt-tool button:focus-visible, .cnt-tool a:focus-visible, .cnt-tw:focus-visible { outline: 3px solid var(--copper); outline-offset: 2px; }
.cnt-out:focus { outline: none; }
.cnt-out:focus-visible > .cnt-res { outline: 3px solid var(--copper); outline-offset: 3px; }

/* Exemples */
.cnt-ex { display: grid; gap: .4rem; }
.cnt-ex > p { margin: 0; font-size: .9rem; font-weight: 650; color: var(--muted); }
.cnt-chips { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: .45rem; }
.cnt-chip { font: inherit; font-family: var(--mono); font-size: .88rem; border: 1px solid var(--input-line); background: var(--surface); color: var(--text); border-radius: 999px; padding: .45rem .85rem; cursor: pointer; max-width: 100%; overflow-wrap: anywhere; text-align: start; }
[dir="rtl"] .cnt-chip { font-family: var(--sans); }
.cnt-chip:hover { border-color: var(--copper); }

.cnt-actions { display: flex; flex-wrap: wrap; gap: .6rem; align-items: center; }
.cnt-tool .btn { cursor: pointer; font: inherit; font-weight: 650; max-width: 100%; white-space: normal; text-align: start; }
.cnt-copied { font-size: .9rem; }

/* Résultat (carte sombre, comme le convertisseur Lambert) */
.cnt-out:empty { display: none; }
.cnt-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; }
.cnt-res > * { margin: 0; }
.cnt-res .cnt-rt, .cnt-res .cnt-h3 { color: #fff; font-size: 1.1rem; margin: 0; }
.cnt-read { font-size: .92rem; color: rgba(236, 234, 255, .85); }
.cnt-res .cnt-big { font-family: var(--mono); font-size: clamp(1.35rem, 8cqi, 2.6rem); font-weight: 600; color: #fff; line-height: 1.1; }
.cnt-fon { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 15rem), 1fr)); gap: .6rem 1.2rem; margin: 0; }
.cnt-fon dt { font-size: .82rem; color: rgba(236, 234, 255, .78); }
.cnt-fon dd { margin: 0; font-family: var(--mono); font-size: 1.2rem; color: #fff; }
.cnt-fon dd[dir="rtl"] { font-family: var(--sans); }
.cnt-cdl dd { font-size: 1.02rem; }
.cnt-cdl .cnt-l { display: block; }
.cnt-res .hint { color: rgba(236, 234, 255, .78); font-size: .85rem; }
.cnt-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; }
.cnt-warn li::before { content: "⚠ "; }
.cnt-tw { overflow-x: auto; border-radius: 10px; border: 1px solid var(--line-d); }
.cnt-tab { width: 100%; border-collapse: collapse; font-size: .9rem; overflow-wrap: normal; }
.cnt-tab caption { text-align: start; font-weight: 650; padding: .6rem .8rem; color: #fff; }
.cnt-tab th, .cnt-tab td { padding: .5rem .8rem; text-align: start; border-top: 1px solid var(--line-d); vertical-align: top; }
.cnt-tab td:nth-child(2) { font-family: var(--mono); white-space: nowrap; }
.cnt-tab td:nth-child(3) { font-size: .82rem; color: rgba(236, 234, 255, .8); }
.cnt-tab thead th { font-weight: 650; font-size: .8rem; color: rgba(236, 234, 255, .8); }
.cnt-tab tbody th { font-weight: 600; }
.cnt-tab tr.cnt-ind td:nth-child(2) { font-style: italic; }
/* Tableau des unités sur écran étroit : une ligne par unité, valeur et précision l'une sous l'autre */
@container cnt (max-width: 34rem) {
  .cnt-tab thead { display: none; }
  .cnt-tab tr { display: grid; gap: .15rem; padding: .55rem .8rem; border-top: 1px solid var(--line-d); }
  .cnt-tab th, .cnt-tab td { display: block; padding: 0; border: 0; }
  .cnt-tab td:nth-child(2) { white-space: normal; overflow-wrap: anywhere; }
}
.cnt-tool .cnt-res .btn.ghost { color: #eeecff; border: 1px solid rgba(236, 234, 255, .5); background: transparent; padding: .7rem 1.1rem; }
.cnt-res .btn.ghost:hover { border-color: var(--copper-l); background: rgba(255, 255, 255, .06); }
.cnt-res .btn:focus-visible, .cnt-res .cnt-tw:focus-visible { outline-color: var(--copper-l); }
.cnt-help { display: grid; gap: .6rem; border-top: 1px solid var(--line-d); padding-top: 1rem; }
.cnt-help > * { margin: 0; }
.cnt-sent { font-size: 1rem; }
.cnt-explain { margin: 0; padding-inline-start: 1.2rem; display: grid; gap: .3rem; font-size: .9rem; color: rgba(236, 234, 255, .88); }
.cnt-print-head, .cnt-print-foot { display: none; }

/* Comparaison */
.cnt-cmp { border-top: 1px solid var(--line); padding-top: 1.4rem; }
.cnt-cmp .row2 { align-items: start; }
.cnt-f { display: grid; gap: .5rem; }
.cnt-cmp-out:empty { display: none; }

.cnt-store { display: flex; flex-wrap: wrap; gap: .4rem .8rem; align-items: center; }
.cnt-clear { 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) { .cnt-tool * { transition: none !important; animation: none !important; } }
.a11y-rm .cnt-tool * { transition: none !important; animation: none !important; }

/* Impression : seul le résultat de conversion est imprimé, en noir sur blanc */
@media print {
  body * { visibility: hidden !important; }
  .cnt-out, .cnt-out * { visibility: visible !important; }
  body *:has(.cnt-out) { position: static !important; transform: none !important; }
  .cnt-out { position: absolute; inset: 0 0 auto 0; }
  .cnt-res { background: #fff !important; color: #000 !important; padding: 0; border-radius: 0; }
  .cnt-res *, .cnt-fon dt, .cnt-fon dd, .cnt-tab caption, .cnt-tab thead th, .cnt-tab td, .cnt-res .hint, .cnt-read, .cnt-big { color: #000 !important; }
  .cnt-tab th, .cnt-tab td, .cnt-tw { border-color: #999 !important; }
  .cnt-tw { overflow: visible; }
  .cnt-warn { background: none; border-color: #000; }
  .cnt-exports, .cnt-help { display: none !important; }
  .cnt-print-head { display: block; border-bottom: 2px solid #000; padding-bottom: .4rem; }
  .cnt-print-head p { margin: 0; } .cnt-print-t { font-weight: 700; font-size: 1.2rem; }
  .cnt-print-foot { display: block; border-top: 1px solid #000; padding-top: .4rem; font-size: .8rem; }
}