/* Calculateur des outils gratuits (src/components/tool/Calculator.astro) : les champs sur une
   carte blanche, le résultat sur le panneau noir des chiffres, comme le panneau financier des
   fiches techniques. Rien ne bouge en dehors du focus et du survol ; le résultat change de
   valeur, pas de taille. */
.tool-calculator {
  margin-block: clamp(2rem, 4vw, 3.5rem);
  scroll-margin-top: 6rem;
}

.tool-calculator-title {
  font-size: var(--text-heading);
  line-height: var(--leading-heading);
  text-wrap: balance;
  margin-block-end: 1.25rem;
}

.tool-calculator-form {
  display: grid;
  gap: 1rem;
}

@media (min-width: 900px) {
  .tool-calculator-form {
    grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr);
    align-items: stretch;
  }
}

.tool-calculator-fields {
  display: grid;
  gap: 1.1rem;
  margin: 0;
  padding: clamp(1.25rem, 3vw, 2rem);
  border: 1px solid var(--color-line);
  border-radius: var(--radius-panel);
  background: var(--color-surface);
  box-shadow: 0 1px 2px var(--color-shadow);
}

.tool-field {
  display: grid;
  gap: 0.4rem;
}

.tool-field label {
  font-size: var(--text-sm);
  font-weight: var(--font-weight-semibold);
  letter-spacing: var(--tracking-body);
}

.tool-field-input {
  position: relative;
  display: flex;
  align-items: center;
}

.tool-field-input input {
  inline-size: 100%;
  min-block-size: 2.75rem;
  padding: 0.55rem 2.75rem 0.55rem 0.85rem;
  border: 1px solid var(--color-connection);
  border-radius: var(--radius-control);
  background: var(--color-canvas);
  color: var(--color-ink);
  font: inherit;
  font-size: var(--text-base);
  font-variant-numeric: tabular-nums;
  transition:
    border-color var(--duration-fast, 150ms) ease,
    box-shadow var(--duration-fast, 150ms) ease;
}

.tool-field-input input:hover {
  border-color: var(--color-muted);
}

.tool-field-input input:focus-visible {
  outline: none;
  border-color: var(--color-ink);
  box-shadow: 0 0 0 3px var(--color-accent-soft);
}

.tool-field-unit {
  position: absolute;
  inset-inline-end: 0.85rem;
  color: var(--color-muted);
  font-size: var(--text-sm);
  pointer-events: none;
}

.tool-field-hint {
  margin: 0;
  color: var(--color-muted);
  font-size: var(--text-sm);
}

.tool-calculator-results {
  display: flex;
  flex-direction: column;
  gap: 1rem;
  padding: clamp(1.25rem, 3vw, 2rem);
  border-radius: var(--radius-panel);
  background: var(--color-graphite);
  color: var(--color-surface);
}

.tool-results-label {
  margin: 0;
  font-family: var(--font-mono);
  font-size: var(--text-micro);
  letter-spacing: var(--tracking-label);
  text-transform: uppercase;
  color: rgb(255 255 255 / 0.72);
}

.tool-calculator-results dl {
  display: grid;
  gap: 0.85rem;
  margin: 0;
}

.tool-result {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 1rem;
  padding-block-end: 0.85rem;
  border-block-end: 1px solid rgb(255 255 255 / 0.14);
}

.tool-result dt {
  font-size: var(--text-sm);
  color: rgb(255 255 255 / 0.82);
}

.tool-result dd {
  margin: 0;
  font-variant-numeric: tabular-nums;
  font-size: var(--text-lg);
  font-weight: var(--font-weight-semibold);
  text-align: end;
  white-space: nowrap;
}

.tool-result--main {
  flex-direction: column;
  align-items: flex-start;
  gap: 0.25rem;
}

.tool-result--main dd {
  font-size: clamp(2rem, 6vw, 2.75rem);
  line-height: 1;
  text-align: start;
}

.tool-result--main dd output {
  color: var(--color-surface);
  border-block-end: 3px solid var(--color-accent);
}

.tool-calculator-note {
  margin: auto 0 0;
  font-size: var(--text-sm);
  color: rgb(255 255 255 / 0.78);
}

.tool-calculator-note a {
  color: inherit;
}
/* Guides des ressources : ce qu’editorial.css ne porte pas déjà. Signature, repères de section,
   mesure de lecture (environ 68 signes), formules, tableaux chiffrés, encadrés de fin, sources. */

/* Signature : le nom à l’encre ; la date et la durée ensemble sur la seconde ligne. */
.guide-byline-meta {
  white-space: nowrap;
}
.guide-byline a {
  color: var(--color-graphite);
  font-weight: 500;
  text-decoration: underline;
  text-decoration-color: transparent;
  text-underline-offset: 4px;
  transition: text-decoration-color var(--motion-hover)
    var(--motion-ease-transition);
}
.guide-byline a:hover {
  text-decoration-color: currentColor;
}
.guide-byline-dot {
  padding-inline: 3px;
  color: var(--color-accent);
}
.guide-byline-download {
  margin-top: 12px;
}
.guide-byline-download .text-link {
  font-size: 0.875rem;
}

/* Guide réglementaire lu dans une autre langue : le pays de la règle, sous le chapeau, en
   filet d’accent comme les encadrés de fin. */
.guide-lead {
  display: grid;
  gap: 22px;
}
.guide-jurisdiction {
  max-width: 640px;
  padding: 2px 0 2px 16px;
  border-left: 2px solid var(--color-accent);
  color: var(--color-graphite);
  font-size: 0.9375rem;
  line-height: 1.55;
}
.guide-jurisdiction strong {
  font-weight: 600;
}

/* Sections : un repère « 04 » au-dessus de chaque titre, une mesure de lecture pour la prose. */
.guide-section + .guide-section {
  margin-top: clamp(64px, 7vw, 96px);
}
.guide-section-head .section-index {
  margin-bottom: 18px;
  gap: 14px;
  font-size: var(--text-micro);
  color: var(--color-muted);
}
.guide-section-head .section-index > span {
  width: 24px;
}
.guide-prose > p {
  max-width: 34em;
}
.guide-prose > .guide-note {
  font-size: 0.875rem;
  line-height: 1.7;
  color: var(--color-muted);
}

/* Formules : le terme défini, le signe en rouge, la définition. */
.guide-formula {
  display: grid;
  gap: 10px;
}
.guide-formula > span {
  margin-bottom: 2px;
}
.guide-formula-term {
  font-weight: 600;
}
.guide-formula-sign {
  padding-inline: 3px;
  color: var(--color-accent);
}
.guide-formula-definition {
  color: #3d3d3d;
  font-weight: 450;
}

/* Tableaux : les colonnes de chiffres s’alignent à droite, en chiffres tabulaires. */
.guide-table .editorial-table th,
.guide-table .editorial-table td {
  padding: 15px 18px;
  vertical-align: bottom;
}
.guide-table .is-number {
  text-align: right;
  font-variant-numeric: tabular-nums;
}

/* Fin du guide : exemple chiffré, « Dans Enskel », sources. */
.guide-end {
  display: grid;
  gap: 24px;
  max-width: 680px;
  margin-top: clamp(72px, 8vw, 110px);
}
.guide-example {
  padding: clamp(24px, 3vw, 34px);
  border-radius: var(--radius-panel);
  background: var(--color-surface);
  box-shadow: var(--shadow-panel);
}
.guide-panel-label {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 14px;
  color: var(--color-muted);
  font: 400 var(--text-micro)/1.5 var(--font-mono);
  letter-spacing: 0.13em;
  text-transform: uppercase;
}
.guide-panel-label::before {
  content: '';
  flex: 0 0 22px;
  height: 1px;
  background: var(--color-accent);
}
.guide-example-text {
  color: var(--color-graphite);
  font-size: 1.125rem;
  line-height: 1.65;
  letter-spacing: -0.015em;
  font-variant-numeric: tabular-nums;
}
.guide-example-download {
  margin-top: 20px;
  padding-top: 18px;
  border-top: 1px solid var(--color-line);
}
.guide-example-download .text-link {
  font-size: 0.9375rem;
}
.guide-enskel {
  padding: clamp(26px, 3.4vw, 40px);
}
.guide-enskel-text {
  color: #f4f4f4;
  font-size: clamp(1.1875rem, 1.6vw, 1.375rem);
  line-height: 1.5;
  letter-spacing: -0.025em;
}
.guide-enskel .rich-link {
  color: #fff;
}
.guide-enskel-actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 18px 28px;
  margin-top: 28px;
}
.guide-enskel .text-link {
  gap: 14px;
  color: #fff;
  font-size: 0.9375rem;
}
.guide-enskel .link-arrow {
  color: var(--color-accent);
}
@media (hover: hover) {
  .guide-enskel .text-link:hover {
    color: #fff;
  }
}
.guide-sources li {
  display: grid;
  gap: 2px;
}
.guide-source-host {
  color: var(--color-muted);
  font: 400 var(--text-micro)/1.6 var(--font-mono);
  letter-spacing: 0.08em;
}

@media (width < 640px) {
  .guide-example-text {
    font-size: 1.0625rem;
  }
  .guide-enskel-actions {
    align-items: flex-start;
    flex-direction: column;
  }
  .guide-table .editorial-table th,
  .guide-table .editorial-table td {
    padding: 13px 14px;
  }
}

/* Sommaire, dès 1 200 px : il passe dans la colonne de droite, à l’aplomb de la signature (mêmes
   colonnes qu’.editorial-hero-bottom), et reste collant pendant la lecture (editorial.css). Un
   rail fin porte la section en cours, marquée d’un trait rouge (aria-current, ReadingContents).
   L’ordre du document ne change pas : le sommaire précède le texte au clavier, à toute largeur.
   Plus étroit, il garde la colonne de gauche, puis la liste au-dessus du texte. */
@media (width >= 1200px) {
  .guide .editorial-reading-layout {
    grid-template-columns: minmax(0, 1fr) minmax(230px, 0.44fr);
    gap: clamp(36px, 7vw, 120px);
  }
  .guide .editorial-toc {
    grid-area: 1 / 2;
  }
  .guide .editorial-reading-body {
    grid-area: 1 / 1;
  }
  .guide .editorial-toc ol {
    gap: 0;
    margin-top: 20px;
    border-inline-start: 1px solid var(--color-line);
  }
  .guide .editorial-toc li a {
    position: relative;
    padding-block: 9px;
    padding-inline-start: 20px;
  }
  /* Le trait se déploie depuis son centre ; en mouvement réduit, il apparaît (global.css). */
  .guide .editorial-toc li a::before {
    content: '';
    position: absolute;
    inset-block: 0;
    inset-inline-start: -1px;
    width: 2px;
    background: var(--color-accent);
    transform: scaleY(0);
    transition: transform var(--motion-hover) var(--motion-ease-out);
  }
  .guide .editorial-toc li a[aria-current='true']::before {
    transform: scaleY(1);
  }
  .guide .editorial-toc .text-link {
    margin-top: 18px;
  }
}