/* Module impact : page publique /impact (totaux, graphiques en colonnes HTML/CSS, tableaux, méthode).
   Jetons sémantiques uniquement (docs/DESIGN.md) : aucune couleur ni police en dur, aucun [data-theme]. */

.imp-tete .pg-titre { max-width: 18ch; }
.imp-tete .pg-chapeau a { color: var(--encre); font-weight: var(--gras); }
.imp-section .section-tete { margin-bottom: var(--e-6); }

/* ---------- Totaux (tuiles) ---------- */
.imp-tuiles { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 15rem), 1fr)); gap: var(--e-4); margin: 0; padding: 0; list-style: none; }
.imp-tuile { display: flex; flex-direction: column; gap: var(--e-2); min-width: 0; padding: var(--e-5); border: 1px solid var(--trait); border-radius: var(--r-bloc); background: var(--surface); }
.imp-tuile-libelle { font-weight: var(--gras); color: var(--encre-2); }
.imp-tuile-valeur { display: block; font-size: 2.25rem; line-height: 1.05; color: var(--encre); overflow-wrap: anywhere; }
.imp-tuile-valeur .m3 { margin-left: 2px; font-size: .55em; vertical-align: super; color: var(--encre-2); }
.imp-tuile-forte { border-top: 4px solid var(--offre); }
.imp-tuile-sous { font-size: 0.875rem; line-height: 1.4; color: var(--encre-2); }
.imp-note { margin-top: var(--e-4); max-width: 52em; font-size: 0.9375rem; color: var(--encre-2); }
.imp-vide { border: 1px solid var(--trait); border-radius: var(--r-bloc); }
@media (max-width: 759px) {
    .imp-tuiles { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--e-3); }
    .imp-tuile { padding: var(--e-4) var(--e-3); }
    .imp-tuile-valeur { font-size: 1.5rem; }
}

/* ---------- Graphiques en colonnes ---------- */
.imp-graphiques { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 26rem), 1fr)); gap: var(--e-4); margin-bottom: var(--e-5); }
.imp-graph-bloc { min-width: 0; }
.imp-graph { margin: 0; }
.imp-graph-legende { display: flex; flex-direction: column; gap: 2px; margin-bottom: var(--e-3); }
.imp-graph-titre { font-family: var(--police-titre); font-weight: var(--titre-graisse); font-variation-settings: var(--titre-variation); font-size: 1.1875rem; color: var(--encre); }
.imp-graph-sous { font-size: 0.875rem; color: var(--encre-2); }
.imp-graph-zone { padding: var(--e-6) 0 2.25rem 4.25rem; }
.imp-graph-trace { position: relative; height: 13rem; }
.imp-graph-grads { position: absolute; inset: 0; pointer-events: none; }
.imp-graph-grad { position: absolute; left: 0; right: 0; bottom: var(--pos); height: 0; border-top: 1px solid var(--trait); }
.imp-graph-grad.est-zero { border-top-color: var(--trait-champ); }
.imp-graph-grad-val { position: absolute; right: calc(100% + 8px); top: 0; transform: translateY(-50%); font: var(--donnees-graisse) 0.875rem/1 var(--police-donnees); color: var(--encre-2); white-space: nowrap; font-variant-numeric: tabular-nums; }
.imp-graph-colonnes { position: absolute; inset: 0; display: flex; margin: 0; padding: 0; list-style: none; }
.imp-graph-col { position: relative; flex: 1 1 0; min-width: 0; }
.imp-graph-barre { position: absolute; left: 50%; bottom: var(--bas); width: min(24px, 64%); height: var(--h); min-height: 2px; transform: translateX(-50%); border-radius: 4px 4px 0 0; background: var(--offre); }
.imp-graph-col.est-negatif .imp-graph-barre { border-radius: 0 0 4px 4px; }
.imp-graph-co2 .imp-graph-barre { background: var(--succes); }
.imp-graph-val { position: absolute; left: 50%; bottom: calc(var(--haut) + 6px); transform: translateX(-50%); font: var(--donnees-graisse) 0.875rem/1 var(--police-donnees); color: var(--encre); white-space: nowrap; }
.imp-graph-col:first-child .imp-graph-val { left: 0; transform: none; }
.imp-graph-col:last-child .imp-graph-val { left: auto; right: 0; transform: none; }
.imp-graph-mois { position: absolute; left: 50%; top: calc(100% + 8px); transform: translateX(-50%); font-size: 0.875rem; line-height: 1; color: var(--encre-2); white-space: nowrap; }
@media (max-width: 759px) {
    .imp-graph-zone { padding-left: 3.75rem; }
    .imp-graph-trace { height: 11rem; }
    .imp-graph-col:not(.est-cle) .imp-graph-mois { display: none; }
}

/* ---------- Tableaux ---------- */
.imp-tableau { margin-top: var(--e-2); }
.imp-tableau-titre { margin: var(--e-6) 0 var(--e-3); font-size: var(--t-h4); }
.imp-tableau .tableau tbody th, .imp-prix .tableau tbody th { padding: 12px 14px; border-bottom: 1px solid var(--trait); font: var(--gras) 0.9375rem/1.4 var(--police-texte); letter-spacing: normal; color: var(--encre); white-space: nowrap; }
.imp-tableau .tableau tbody tr:last-child th, .imp-prix .tableau tbody tr:last-child th { border-bottom: 0; }
.imp-tableau .tableau td { white-space: nowrap; }
.imp-autres th, .imp-autres td { color: var(--encre-2); font-style: italic; }

/* ---------- Méthode ---------- */
.imp-methode-grille { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--e-6); align-items: start; }
@media (min-width: 1100px) { .imp-methode-grille { grid-template-columns: minmax(0, 1.6fr) minmax(0, 1fr); } }
.imp-etapes { display: flex; flex-direction: column; gap: var(--e-5); margin: 0; padding: 0; list-style: none; counter-reset: etape; }
.imp-etapes > li { position: relative; padding-left: 3rem; counter-increment: etape; }
.imp-etapes > li::before { content: counter(etape, decimal-leading-zero); position: absolute; left: 0; top: 2px; font: var(--donnees-graisse) 0.9375rem/1.4 var(--police-donnees); color: var(--encre-2); }
.imp-etapes h3 { margin-bottom: var(--e-2); font-size: var(--t-h4); }
.imp-etapes p { max-width: 44em; color: var(--encre-2); }
.imp-etapes p + p { margin-top: var(--e-2); }
.imp-etapes a { color: var(--encre); font-weight: var(--gras); }
.imp-formule { margin: var(--e-2) 0; }
.imp-formule span { display: inline-block; padding: 8px 12px; border-radius: var(--r-petit); background: var(--fond-2); font: var(--donnees-graisse) 0.875rem/1.5 var(--police-donnees); color: var(--encre); }
.imp-regle { font-size: 0.875rem; color: var(--encre-2); font-style: italic; }
.imp-sites { margin-top: var(--e-3); }
.imp-sites summary { display: inline-flex; align-items: center; min-height: var(--cible); font-weight: var(--gras); color: var(--encre); cursor: pointer; }
.imp-sites ul { margin: var(--e-1) 0 0; padding-left: 1.25rem; color: var(--encre-2); }
.imp-sources h3 { font-size: var(--t-h4); margin-bottom: var(--e-3); }
.imp-sources ol { display: flex; flex-direction: column; gap: var(--e-3); margin: 0; padding-left: 1.25rem; }
.imp-sources li { font-size: 0.9375rem; line-height: 1.45; }
.imp-sources a { color: var(--encre); font-weight: var(--gras); overflow-wrap: anywhere; }
.imp-source-meta, .imp-source-retenu { display: block; font-size: 0.875rem; color: var(--encre-2); }
.imp-source-retenu { margin-top: 2px; }

/* ---------- Page « Économie estimée » (gabarit des pages d'information) ---------- */
.imp-prix .tableau td, .imp-prix .tableau tbody th { white-space: normal; }
.imp-prix .nombre { white-space: nowrap; }