/*
 * Scale pages (/bareme-kilometrique, 2027, voiture electrique) and the calculator.
 * Loaded after site.css on the `scale` and `calculator` templates. Same world as the home page:
 * fragments of the product carry data-ui and keep the app's own conventions (1px lines, small
 * radii); outside them, square corners, no rules, surfaces separated by tone.
 * Surface briefs: .impeccable/surfaces/resources-views-site-scale-edge.md and -calculator-edge.md.
 */

.tool-page > section { max-width: var(--page); margin: var(--section-gap) auto 0; padding-inline: var(--gutter); }
.tool-page h2 { margin: 0; font-size: var(--step-h); }
.tool-page h3 { margin: 0; font-size: var(--step-lead); }

/* Full-bleed bands, as on the home page. */
.tool-page > .tool-band, .tool-page > .tool-close { max-width: none; padding: var(--section-gap) max(var(--gutter), calc((100% - var(--page)) / 2 + var(--gutter))); }
.tool-band { background: var(--tone-1); }

/* Hero: the title on the left, the product doing the sum on the right. */
.tool-page > .tool-hero { margin-top: 0; padding-top: 1rem; display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--split-gap); row-gap: 2.5rem; align-items: center; }
.tool-hero__crumbs { grid-column: 1 / -1; }
.tool-hero__crumbs .crumbs { margin: 0; }
.tool-hero__text { grid-column: 1 / span 6; display: grid; gap: 1.5rem; justify-items: start; }
.tool-hero h1 { margin: 0; font-size: var(--step-head); letter-spacing: -0.045em; line-height: 0.98; max-width: 14ch; }
.tool-hero .lead { margin: 0; max-width: 40ch; }
.tool-hero .meta { margin: 0; max-width: 58ch; }
.tool-hero .actions { margin: 0.5rem 0 0; }
.tool-hero__ui { grid-column: 7 / -1; }

/* Product conventions inside every fragment. */
.tool-page [data-ui] { --ui-line: #d7d9e0; --ui-radius: 10px; color: var(--ink); font-size: 0.9375rem; letter-spacing: 0; }
.tool-ui, .calc-app { background: #ffffff; border: 1px solid var(--ui-line); border-radius: var(--ui-radius); overflow: hidden; }
.tool-ui__bar { display: flex; flex-wrap: wrap; align-items: center; gap: 0.5rem 1.25rem; padding: 0.85rem 1.25rem; border-bottom: 1px solid var(--ui-line); }
.tool-ui__brand { display: inline-flex; align-items: center; gap: 0.45rem; font-weight: 600; letter-spacing: -0.02em; }
.tool-ui__brand .brand__mark { width: 1.08rem; height: 1rem; }
.tool-ui__ctx { font-weight: 600; }
.tool-ui__who { margin-left: auto; color: var(--ink-soft); }
.tool-ui__rows { margin: 0; padding: 0.25rem 1.25rem; }
.tool-ui__rows > div { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 0.25rem 1rem; padding: 0.75rem 0; border-bottom: 1px solid var(--ui-line); }
.tool-ui__rows > div:last-child { border-bottom: 0; }
.tool-ui__rows dt { color: var(--ink-soft); }
.tool-ui__rows dd { margin: 0; font-weight: 500; text-align: right; font-variant-numeric: tabular-nums; }
.tool-ui__total { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: baseline; gap: 0.25rem 1rem; margin: 0; padding: 1rem 1.25rem; background: #fff4e6; }
.tool-ui__total span { font-weight: 500; }
.tool-ui__total--warn strong { color: #b45309; }
.tool-ui__total strong { font-size: var(--step-h); font-weight: 600; letter-spacing: -0.03em; font-variant-numeric: tabular-nums; }
.tool-ui__formula { display: block; margin-top: 0.15rem; color: var(--ink); font-size: 0.8125rem; font-variant-numeric: tabular-nums; }
.tool-ui__steps { margin: 0; padding: 0.5rem 1.25rem; list-style: none; counter-reset: step; }
.tool-ui__steps li { display: grid; grid-template-columns: 6.5rem minmax(0, 1fr); gap: 1rem; padding: 0.7rem 0; border-bottom: 1px solid var(--ui-line); color: var(--ink-soft); }
.tool-ui__steps li:last-child { border-bottom: 0; }
.tool-ui__steps span { font-weight: 600; color: var(--ink); }
.tool-ui__steps .is-on span { display: inline-block; justify-self: start; padding: 0.1rem 0.6rem; border-radius: 999px; background: var(--ink); color: #ffffff; }
/* Rows on the scale pages: the two-wheeler tables take the full width of a text-only row. */
.tool-page .row__text table { margin-bottom: 1.5rem; }
.tool-ui__foot { margin: 0; padding: 0.85rem 1.25rem 1.1rem; font-size: 0.8125rem; color: var(--ink-soft); }

/* The scale table: the reference, set at reading size. */
.tool-table__head { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--split-gap); align-items: end; margin-bottom: 2rem; }
.tool-table__head h2 { grid-column: 1 / span 5; }
.tool-table__head p { grid-column: 6 / -1; margin: 0; max-width: none; }
.tool-page .scale-table { display: table; width: 100%; margin: 0; border-collapse: collapse; font-size: var(--step-body); font-variant-numeric: tabular-nums; }
.scale-table th, .scale-table td { padding: 1rem 1.25rem; text-align: left; vertical-align: top; }
.scale-table thead th { font-weight: 600; }
.scale-table tbody th { font-weight: 600; white-space: nowrap; }
.scale-rate { display: block; font-weight: 500; white-space: nowrap; }
.scale-constant { display: block; margin-top: 0.15rem; font-size: var(--step-small); color: var(--ink-soft); white-space: nowrap; }
.tool-note { margin: 1rem 0 0; max-width: 64ch; font-size: var(--step-small); color: var(--ink-soft); }
.tool-key { margin: 2.5rem 0 0; max-width: 42ch; font-size: var(--step-lead); font-weight: 500; line-height: 1.32; }

/* 2027: three facts set as a list in large type, no boxes. */

/* How it is computed: the steps beside a trip that crosses 5 000 km. */
.tool-how { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--split-gap); row-gap: 2.5rem; align-items: center; }
.tool-how__text { grid-column: 1 / span 6; }
.tool-how > .tool-ui { grid-column: 7 / -1; }
.tool-steps { margin: 1.75rem 0 0; padding: 0; list-style: none; max-width: none; }
.tool-steps li { padding: 0.85rem 0; }
.tool-steps strong { display: block; font-weight: 600; }
.tool-try { margin-top: 1.5rem; }
.tool-crossing__road { position: relative; height: 10px; margin: 1.5rem 1.25rem 0.5rem; background: #e7e8ed; border-radius: 5px; }
.tool-crossing__road::after { content: ''; position: absolute; left: calc(50% - 1px); top: -5px; width: 2px; height: 20px; background: var(--ink); }
.tool-crossing__done, .tool-crossing__trip { position: absolute; top: 0; bottom: 0; }
.tool-crossing__done { left: 0; width: 25%; background: var(--ink); border-radius: 5px 0 0 5px; }
.tool-crossing__trip { left: 25%; width: 50%; background: var(--accent); }
.tool-crossing__marks { position: relative; height: 1.25rem; margin: 0 1.25rem 0.5rem; font-size: 0.8125rem; color: var(--ink-soft); }
.tool-crossing__marks span { position: absolute; top: 0; transform: translateX(-50%); white-space: nowrap; }
.tool-crossing__marks span:nth-child(1) { left: 25%; }
.tool-crossing__marks span:nth-child(2) { left: 50%; color: var(--ink); font-weight: 600; }
.tool-crossing__marks span:nth-child(3) { left: 75%; }

/* Reading: the text column with one fragment pinned beside it. */
.tool-vehicles__list { margin: 0; padding: 0 1.25rem; list-style: none; }
.tool-vehicles__list li { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 0.6rem 1rem; align-items: start; padding: 0.9rem 0; border-bottom: 1px solid var(--ui-line); }
.tool-vehicles__km { grid-row: 2; }
.tool-vehicles__list p { margin: 0; font-weight: 600; font-variant-numeric: tabular-nums; }
.tool-vehicles__list span { display: block; margin-top: 0.15rem; font-size: 0.8125rem; font-weight: 400; color: var(--ink-soft); }
.tool-vehicles__amount { text-align: right; }

.tool-faq h2 { margin-bottom: 2rem; }
/* A closed answer leaves the layout entirely, so nothing hidden is measured beside the next heading. */
.tool-faq details:not([open]) .faq__answer { display: none; }

/* Close: the navy field and the monthly document, as on the home page. */
.tool-page > .tool-close { margin-bottom: 0; display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--split-gap); row-gap: 3rem; align-items: center; background: var(--ink); color: #ffffff; }
.tool-close__text { grid-column: 1 / span 6; }
.tool-close h2 { margin-bottom: 1.5rem; color: #ffffff; font-size: var(--step-head); letter-spacing: -0.045em; line-height: 0.98; }
.tool-close p { margin: 0; max-width: 42ch; color: #d6dbea; }
.tool-close__actions { display: flex; flex-wrap: wrap; align-items: center; gap: 1rem 1.5rem; margin-top: 2rem !important; }
.tool-close__actions a:not(.btn) { color: #ffffff; }
.tool-pdf { grid-column: 7 / -1; padding: clamp(1.5rem, 3vw, 2.5rem); background: #ffffff; color: var(--ink); border-radius: 4px; box-shadow: 0 24px 60px rgb(0 0 0 / 45%); }
.tool-pdf__head { display: flex; justify-content: space-between; align-items: flex-start; gap: 1rem; margin-bottom: 1.5rem; }
.tool-pdf__brand { display: inline-flex; align-items: center; gap: 0.45rem; font-size: 1.25rem; font-weight: 600; letter-spacing: -0.03em; }
.tool-pdf__brand .brand__mark { width: 1.3rem; height: 1.2rem; }
.tool-pdf__title { text-align: right; font-weight: 600; line-height: 1.3; }
.tool-pdf__title span { display: block; font-weight: 400; color: var(--ink-soft); }
.tool-pdf table { display: table; width: 100%; margin: 0; border-collapse: collapse; font-size: 0.875rem; }
.tool-pdf th, .tool-pdf td { padding: 0.6rem 0.5rem; border-bottom: 1px solid var(--ui-line); background: none !important; color: var(--ink); text-align: left; font-weight: 400; vertical-align: top; }
.tool-pdf thead th { font-size: 0.8125rem; font-weight: 500; color: var(--ink-soft); }
.tool-pdf td span { display: block; font-size: 0.8125rem; color: var(--ink-soft); }
.tool-pdf td:nth-child(n + 3), .tool-pdf th:nth-child(n + 3) { text-align: right; white-space: nowrap; }
.tool-pdf tfoot td { border-bottom: 0; font-weight: 600; }
.tool-pdf tfoot td:nth-child(2), .tool-pdf tfoot td:nth-child(4) { text-align: right; white-space: nowrap; }
.tool-pdf__rule { margin: 1.25rem 0 0 !important; font-size: 0.875rem; color: var(--ink) !important; max-width: none !important; }
.tool-pdf__stamp { margin: 0.5rem 0 0 !important; font-size: 0.8125rem; color: var(--ink-soft) !important; max-width: none !important; }

/* Calculator: the page is the app window, the form on top and the demonstrated result below. */
.tool-page > .calc-hero { align-items: start; }
.calc-hero .tool-hero__text { grid-column: 1 / span 5; position: sticky; top: calc(var(--header-height) + 2rem); padding-top: 2rem; }
.calc-app { grid-column: 6 / -1; }
.calc-app .calculator { margin: 0; padding: 1.25rem; background: var(--tone-1); border-bottom: 1px solid var(--ui-line); }
/* Each field is a subgrid of three rows (label, input, error), so inputs line up across a row whatever
   wraps above or below them. */
.calc-app__fields { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: 1rem; row-gap: 0; }
.calc-app__fields > * { grid-row: span 3; margin-bottom: 0.9rem; }
.calc-app .calc-app__field { display: grid; grid-template-rows: subgrid; row-gap: 0.35rem; font-size: 0.8125rem; font-weight: 400; color: var(--ink-soft); }
.calc-app__field > span:first-child { line-height: 1.25rem; align-self: end; }
.calc-app__input { display: flex; align-items: center; background: #ffffff; border: 1px solid var(--ui-line); border-radius: 6px; transition: border-color var(--t-press) ease, box-shadow var(--t-press) ease; }
/* Focus reads like the rest of the site: a solid navy ring, not a pale halo. */
.calc-app__input:focus-within { border-color: var(--ink); box-shadow: 0 0 0 2px var(--ink); }
.calc-app__input:has([aria-invalid='true']) { border-color: #b3261e; background: #fffafa; }
.calc-app__error { color: #8f1d12; font-size: 0.8125rem; line-height: 1.35; }
.calc-app .calculator input, .calc-app .calculator select { width: 100%; min-width: 0; min-height: 0; height: 2.75rem; padding: 0 0.7rem; border: 0; border-radius: 6px; background: none; font: 500 1rem/1 var(--font); color: var(--ink); outline: none; -moz-appearance: textfield; appearance: textfield; }
.calc-app .calculator select { appearance: auto; cursor: pointer; }
.calc-app .calculator input::-webkit-inner-spin-button, .calc-app .calculator input::-webkit-outer-spin-button { -webkit-appearance: none; margin: 0; }
.calc-app__input em { padding-right: 0.7rem; font-style: normal; color: var(--ink-soft); white-space: nowrap; }
.calc-app .calc-app__go { align-self: start; margin-top: calc(1.25rem + 0.35rem); height: 2.75rem; padding: 0 1.25rem; border: 0; border-radius: 6px; background: var(--ink); color: #ffffff; font: 500 0.9375rem/1 var(--font); cursor: pointer; transition: transform var(--t-press) var(--ease-out), background-color var(--t-hover) ease; }
.calc-app__go:active { transform: scale(0.97); }
@media (hover: hover) and (pointer: fine) {
  .calc-app__go:hover { background: #2c3b66; }
}
.calc-app__hint { margin: 0.75rem 0 0; font-size: 0.8125rem; color: var(--ink-soft); }
.calc-app__hint + .calc-app__hint { margin-top: 0.25rem; }
.calc-app__out { padding: 1.25rem; }
.calc-app__amount { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: 0.25rem 1rem; margin: 0 0 0.5rem; font-weight: 500; }
.calc-app__amount strong { font-size: var(--step-h); font-weight: 600; letter-spacing: -0.03em; font-variant-numeric: tabular-nums; }
.calc-app__vehicle { margin: 0 0 0.25rem; font-size: 0.875rem; color: var(--ink-soft); }
.calc-app .tool-ui__rows { padding: 0; }
.calc-app .result { margin: 0; padding: 0; background: none; }
.calc-app .tool-ui__rows > div { display: block; }
.calc-app .tool-ui__rows dd { margin-top: 0.2rem; text-align: left; }
.calc-app__crossing { margin: 0.75rem 0 0; padding: 0.6rem 0.8rem; background: #fff4e6; border-radius: 6px; color: #7a4100; font-size: 0.875rem; }
.calc-app__lines { margin: 0.75rem 0 0; padding: 0; list-style: none; font-size: 0.875rem; font-variant-numeric: tabular-nums; }
.calc-app__lines li { padding: 0.3rem 0; }
.calc-app__label { margin: 0.9rem 0 0; font-size: 0.875rem; font-weight: 600; }
.calc-app__note { margin: 0.6rem 0 0; font-size: 0.8125rem; color: var(--ink-soft); }
.calc-app__errors { margin: 1.25rem 1.25rem 0; padding: 0.85rem 1rem; background: #fdecea; border-radius: 6px; color: #8f1d12; }
.calc-app__errors-title { margin: 0 0 0.35rem; font-weight: 600; }
.calc-app__errors ul { margin: 0; padding-left: 1.1rem; }
.calc-app__errors a { color: inherit; }
.calc-app__detail { margin-top: 0.9rem; border-top: 1px solid var(--ui-line); }
.calc-app__detail summary { display: flex; align-items: center; justify-content: space-between; min-height: 2.75rem; font-size: 0.875rem; font-weight: 600; cursor: pointer; list-style: none; }
.calc-app__detail summary::-webkit-details-marker { display: none; }
.calc-app__detail summary::after { content: '+'; font-size: 1.25rem; font-weight: 400; transition: transform var(--t-ui) var(--ease-out); }
.calc-app__detail[open] summary::after { transform: rotate(45deg); }
.calc-app__detail > :not(summary) { margin-top: 0.5rem; }
.calc-app__disclaimer { margin: 1rem 0 0; padding-top: 0.85rem; border-top: 1px solid var(--ui-line); font-size: 0.8125rem; color: var(--ink-soft); }

@media (max-width: 64rem) {
  .tool-hero__text, .calc-hero .tool-hero__text, .tool-hero__ui, .calc-app, .tool-how__text, .tool-how > .tool-ui, .tool-close__text, .tool-pdf { grid-column: 1 / -1; }
  .tool-table__head h2, .tool-table__head p { grid-column: 1 / -1; }
  .tool-table__head p { margin-top: 0.75rem; }
  .calc-hero .tool-hero__text { position: static; padding-top: 0; }
}

@media (max-width: 40rem) {
  .tool-hero .actions .btn, .tool-close__actions .btn, .tool-try .btn { width: 100%; }
  .tool-page .scale-table, .scale-table tbody, .scale-table tr { display: block; }
  .scale-table thead { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); }
  .scale-table tr { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .scale-table tbody th { grid-column: 1 / -1; padding: 0.9rem 0.75rem 0.25rem; }
  .scale-table td { padding: 0.4rem 0.75rem 0.9rem; font-size: var(--step-small); }
  .scale-table td::before { content: attr(data-label); display: block; margin-bottom: 0.2rem; color: var(--ink-soft); }
  .scale-rate, .scale-constant { white-space: normal; }
  .tool-pdf thead th:nth-child(4), .tool-pdf tbody td:nth-child(4), .tool-pdf tfoot td:nth-child(3) { display: none; }
  .tool-pdf__head { flex-direction: column; }
  .tool-pdf__title { text-align: left; }
  .calc-app__fields > .calc-app__go, .calc-app__fields > .calc-app__field:nth-child(5) { grid-column: 1 / -1; width: 100%; }
  .calc-app__fields > .calc-app__go { grid-row: auto; margin-top: 0; }
}

/* Motion. Signature: the trip segment draws across the 5 000 km mark as the fragment scrolls in;
   on a result, the amount comes into focus. Everything starts from its finished state. */
@media (prefers-reduced-motion: no-preference) {
  /* An operating tool: the form is usable at once, so the cascade is short and quick. */
  .calc-app__fields > * { animation: rise 320ms var(--ease-out) both; }
  .calc-app__fields > :nth-child(1) { animation-delay: 80ms; }
  .calc-app__fields > :nth-child(2) { animation-delay: 120ms; }
  .calc-app__fields > :nth-child(3) { animation-delay: 160ms; }
  .calc-app__fields > :nth-child(4) { animation-delay: 200ms; }
  .calc-app__fields > :nth-child(5) { animation-delay: 240ms; }
  .calc-app__fields > :nth-child(6) { animation-delay: 280ms; }
  /* Every calculation reloads the page: on a result or an error nothing replays, only the amount comes into focus. */
  .calc-app:has(.result, .calc-app__errors), .calc-app:has(.result, .calc-app__errors) .calc-app__fields > * { animation: none; }
  .calc-app .result .calc-app__amount strong { animation: price-in 300ms var(--ease-out) both; }
  .calc-app__detail::details-content { opacity: 0; transition: opacity 200ms var(--ease-out), content-visibility 200ms allow-discrete; }
  .calc-app__detail[open]::details-content { opacity: 1; }
}
@supports (animation-timeline: view()) {
  @media (prefers-reduced-motion: no-preference) {
    .tool-how > .tool-ui, .tool-pdf { animation: app-in linear both; animation-timeline: view(); animation-range: entry 0% entry 60%; }
    .tool-crossing__trip { animation: trip-draw linear both; animation-timeline: view(); animation-range: entry 40% cover 50%; }
    .tool-key, .tool-steps li, .tool-faq h2, .tool-faq details, .tool-table__head > * { animation: rise linear both; animation-timeline: view(); animation-range: entry 0% entry 60%; }
  }
}
@keyframes trip-draw { from { clip-path: inset(0 100% 0 0); } to { clip-path: inset(0); } }