/* =============================================================
   efficiency-calc.css — Energy Efficiency Calculator tab
   Uses the shared tokens from tokens.css / main.css. The one new
   colour is the section accent, registered in main.css.
   ============================================================= */

.eff-hero {
    position: relative;
    background: linear-gradient(160deg, rgba(129,140,248,.10), transparent 62%), var(--surface-1);
    border: 1px solid var(--border-strong);
    border-radius: var(--r-card-lg, 18px);
    padding: 26px 28px;
    margin-bottom: var(--gap-lg, 20px);
    overflow: hidden;
}
.eff-hero::after {                        /* liseré d'accent, comme les autres onglets */
    content: ''; position: absolute; inset: 0 0 auto 0; height: 2px;
    background: linear-gradient(90deg, var(--a-efficiency), transparent 70%);
}
.eff-eyebrow {
    display: block; font-size: var(--fs-2xs, .68rem); letter-spacing: var(--ls-2xwide, .16em);
    text-transform: uppercase; color: var(--a-efficiency); margin-bottom: 8px;
}
.eff-title { font-size: var(--fs-h1, 1.7rem); font-weight: 800; letter-spacing: -.02em; margin-bottom: 8px; }
.eff-sub   { color: var(--text-dim); font-size: var(--fs-sm, .9rem); max-width: 68ch; line-height: 1.6; }

/* ---------- entrées ---------- */
.eff-controls {
    display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
    gap: var(--gap-md, 14px); margin-top: 22px;
}
.eff-field { display: flex; flex-direction: column; gap: 6px; }
.eff-field label {
    font-size: var(--fs-2xs, .68rem); letter-spacing: var(--ls-wide, .06em);
    text-transform: uppercase; color: var(--text-dim);
}
.eff-field input {
    background: var(--bg-deep); color: var(--text);
    border: 1px solid var(--border-strong); border-radius: var(--r-xs, 8px);
    padding: 10px 12px; font-size: .95rem; font-variant-numeric: tabular-nums;
    transition: border-color var(--t-fast, .15s), box-shadow var(--t-fast, .15s);
}
.eff-field input:focus-visible {
    outline: none; border-color: var(--a-efficiency);
    box-shadow: 0 0 0 3px rgba(129,140,248,.22);
}
.eff-field .eff-hint { font-size: var(--fs-note, .75rem); color: var(--text-dim); }
.eff-reset {
    align-self: end; background: transparent; color: var(--text-dim);
    border: 1px solid var(--border-strong); border-radius: var(--r-pill, 99px);
    padding: 9px 14px; font-size: .8rem; cursor: pointer;
    transition: color var(--t-fast, .15s), border-color var(--t-fast, .15s);
}
.eff-reset:hover { color: var(--text); border-color: var(--a-efficiency); }

/* ---------- résultat ---------- */
.eff-card {
    background: var(--surface-1); border: 1px solid var(--border-strong);
    border-radius: var(--r-card, 14px); padding: 22px 24px;
    margin-bottom: var(--gap-lg, 20px);
}
.eff-card-title {
    font-size: var(--fs-h3, 1.05rem); font-weight: 700; margin-bottom: 4px;
}
.eff-card-sub { color: var(--text-dim); font-size: var(--fs-sm, .88rem); margin-bottom: 18px; line-height: 1.55; }

.eff-headline {
    display: flex; align-items: baseline; gap: 10px; flex-wrap: wrap;
    padding-bottom: 16px; margin-bottom: 18px; border-bottom: 1px solid var(--border-soft);
    font-variant-numeric: tabular-nums;
}
.eff-headline-from { font-size: 1.5rem; font-weight: 700; color: var(--text-dim); }
.eff-headline-arrow { color: var(--a-efficiency); font-size: 1.2rem; }
.eff-headline-to { font-size: 1.5rem; font-weight: 800; color: var(--text); }
.eff-headline-note { font-size: var(--fs-xs, .78rem); color: var(--a-efficiency); margin-left: auto; }

.eff-kpis {
    display: grid; grid-template-columns: repeat(auto-fit, minmax(168px, 1fr));
    gap: 1px; background: var(--border-soft);
    border: 1px solid var(--border-soft); border-radius: var(--r-xs, 8px); overflow: hidden;
}
.eff-kpi { background: var(--surface-2); padding: 14px 16px; display: flex; flex-direction: column; gap: 4px; }
.eff-kpi-label {
    font-size: var(--fs-2xs, .66rem); letter-spacing: var(--ls-wide, .06em);
    text-transform: uppercase; color: var(--text-dim);
}
.eff-kpi-value {
    font-size: 1.42rem; font-weight: 700; letter-spacing: -.01em;
    font-variant-numeric: tabular-nums; line-height: 1.15;
}
.eff-kpi-unit { font-size: .82rem; font-weight: 500; color: var(--text-dim); }
.eff-kpi-sub  { font-size: var(--fs-note, .75rem); color: var(--text-dim); line-height: 1.45; }
.eff-pos { color: #3fb950; }

.eff-compare {
    margin-top: 16px; padding: 12px 14px;
    background: var(--info-soft); border: 1px solid var(--info-line);
    border-radius: var(--r-xs, 8px); font-size: var(--fs-sm, .88rem); line-height: 1.55;
}
.eff-compare strong { color: var(--text); font-variant-numeric: tabular-nums; }
.eff-compare-missing { color: var(--text-dim); }

/* ---------- échelle « où s'arrêter » ---------- */
.eff-ladder-wrap { overflow-x: auto; }
.eff-ladder {
    width: 100%; border-collapse: collapse; font-size: var(--fs-sm, .88rem);
    font-variant-numeric: tabular-nums; min-width: 620px;
}
/* main.css déclare `th, td { text-align: right }` pour toute l'app, avec la
   première colonne à gauche. Il faut donc déclarer les DEUX ici : ne styler que
   les th laissait les td suivre la règle globale, et les colonnes se
   décalaient. Les chiffres restent à droite — c'est le bon alignement pour des
   nombres tabulaires, et c'est la convention du reste de l'app. */
.eff-ladder thead th,
.eff-ladder tbody td { text-align: right; }
.eff-ladder thead th:first-child,
.eff-ladder tbody td:first-child { text-align: left; }

.eff-ladder thead th {
    padding: 9px 12px; font-size: var(--fs-2xs, .66rem);
    letter-spacing: var(--ls-wide, .06em); text-transform: uppercase;
    color: var(--text-dim); border-bottom: 1px solid var(--border-strong); font-weight: 600;
}
.eff-ladder tbody tr {
    border-bottom: 1px solid var(--border-soft); cursor: pointer;
    transition: background var(--t-fast, .15s);
}
.eff-ladder tbody tr:hover { background: var(--surface-2); }
.eff-ladder tbody tr:last-child { border-bottom: none; }
.eff-ladder td { padding: 11px 12px; vertical-align: top; }
.eff-td-step b, .eff-td-ret b { display: block; font-weight: 700; }
.eff-td-sub { display: block; font-size: var(--fs-note, .75rem); color: var(--text-dim); margin-top: 2px; }
.eff-row-in  { background: rgba(129,140,248,.055); }
.eff-row-out { opacity: .62; }
.eff-row-out:hover { opacity: 1; }

/* Verdicts — sémantiques, distincts de l'accent de section. */
.eff-v-great { color: #3fb950; }
.eff-v-good  { color: #7ee787; }
.eff-v-close { color: #d29922; }
.eff-v-poor  { color: #f85149; }
.eff-v-none  { color: var(--text-dim); }

.eff-empty { color: var(--text-dim); font-size: var(--fs-sm, .88rem); padding: 18px 4px; line-height: 1.6; }
.eff-ladder-hint { color: var(--text-dim); font-size: var(--fs-note, .75rem); margin-top: 12px; }

.eff-notes { margin-top: var(--gap-lg, 20px); }
.eff-notes li { color: var(--text-dim); font-size: var(--fs-sm, .86rem); line-height: 1.6; margin-bottom: 9px; }
.eff-notes li strong { color: var(--text); }
.eff-notes li:last-child { margin-bottom: 0; }

@media (max-width: 720px) {
    .eff-hero { padding: 20px 18px; }
    .eff-card { padding: 18px 16px; }
    .eff-headline-note { margin-left: 0; width: 100%; }
}