/* =============================================================================
   article8.css - POST-TENSION SLAB REPAIR COST ESTIMATOR
   Article : Post-Tension Slab Repair Cost Calculator
   Chemin  : public_html/assets/css/articles/article8.css
   Dashboard, Extra stylesheets : css/articles/article8.css

   Repris de l'ancien article PHP (bloc <style> de l'en-tete), limite a
   l'estimateur insere par js/articles/article8.js. Regles prefixees par
   .estimator-wrapper. Les onglets et le tableau de reference ne sont plus
   utilises : le tableau est deja dans le corps de l'article.
   ============================================================================= */

.estimator-wrapper {
    border: 1px solid #dde6ee;
    border-radius: 6px;
    overflow: hidden;
    margin: 32px 0;
}
.estimator-wrapper .estimator-header {
    background: #2C5370;
    padding: 16px 22px;
    display: flex;
    align-items: center;
    gap: 10px;
}
.estimator-wrapper .estimator-header .est-icon { color: #fff; font-size: 1rem; }
.estimator-wrapper .estimator-header h3 { margin: 0; color: #fff; font-family: var(--font-heading,'Merriweather',serif); font-size: 1rem; font-weight: 700; }
.estimator-wrapper .estimator-header span { color: rgba(255,255,255,0.7); font-size: 0.8rem; margin-left: auto; }
.estimator-wrapper .estimator-body { padding: 22px; background: #fff; }

/* tab row */
.estimator-wrapper .est-tab-row { display: flex; gap: 4px; margin-bottom: 20px; border-bottom: 1px solid #dde6ee; }
.estimator-wrapper .est-tab { font-size: 0.85rem; font-weight: 600; padding: 7px 16px; cursor: pointer; color: #666; border: none; background: none; border-bottom: 2px solid transparent; margin-bottom: -1px; transition: color .15s; }
.estimator-wrapper .est-tab.active { color: #2C5370; border-bottom: 2px solid #2C5370; }
.estimator-wrapper .est-tab:hover:not(.active) { color: #333; }

/* step sections */
.estimator-wrapper .est-section-label { font-size: 0.78rem; font-weight: 700; text-transform: uppercase; letter-spacing: .07em; color: #2C5370; margin: 0 0 10px; }
.estimator-wrapper .est-divider { border: none; border-top: 1px solid #e5e5e5; margin: 18px 0; }

/* card buttons */
.estimator-wrapper .est-card-row { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 8px; margin-bottom: 4px; }
.estimator-wrapper .est-card { padding: 11px 14px; border-radius: 5px; border: 1px solid #ccd8e4; background: #fff; cursor: pointer; text-align: left; transition: border-color .15s, background .15s; }
.estimator-wrapper .est-card.active { border: 2px solid #2C5370; background: #eef4f8; }
.estimator-wrapper .est-card:hover:not(.active) { background: #f7f9fb; }
.estimator-wrapper .est-card-title { font-size: 0.85rem; font-weight: 700; color: #1a1a1a; }
.estimator-wrapper .est-card.active .est-card-title { color: #2C5370; }
.estimator-wrapper .est-card-sub   { font-size: 0.75rem; color: #777; margin-top: 3px; }

/* sliders */
.estimator-wrapper .est-slider-row { display: flex; align-items: center; gap: 10px; margin-bottom: 8px; }
.estimator-wrapper .est-slider-row label { font-size: 0.85rem; color: #555; min-width: 130px; }
.estimator-wrapper .est-slider-row input[type=range] { flex: 1; accent-color: #2C5370; }
.estimator-wrapper .est-slider-val { font-size: 0.85rem; font-weight: 700; color: #1a1a1a; min-width: 56px; text-align: right; }

/* results */
.estimator-wrapper .est-results-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; margin: 18px 0 4px; }
.estimator-wrapper .est-metric { background: #eef4f8; border-radius: 5px; padding: 12px 14px; }
.estimator-wrapper .est-metric.warn { background: #faeeda; }
.estimator-wrapper .est-metric-lbl { font-size: 0.7rem; font-weight: 700; text-transform: uppercase; letter-spacing: .06em; color: #555; margin-bottom: 5px; }
.estimator-wrapper .est-metric-val { font-size: 1.35rem; font-weight: 700; color: #2C5370; }
.estimator-wrapper .est-metric.warn .est-metric-val { color: #633806; }

.estimator-wrapper .est-breakdown { width: 100%; border-collapse: collapse; font-size: 0.85rem; margin-top: 14px; }
.estimator-wrapper .est-breakdown th { text-align: left; font-weight: 700; color: #555; padding: 5px 0; border-bottom: 1px solid #e5e5e5; font-size: 0.75rem; text-transform: uppercase; letter-spacing: .05em; }
.estimator-wrapper .est-breakdown td { padding: 6px 0; color: #222; border-bottom: 1px solid #f0f0f0; }
.estimator-wrapper .est-breakdown td:last-child { text-align: right; font-weight: 600; }
.estimator-wrapper .est-breakdown tr:last-child td { border-bottom: none; }

.estimator-wrapper .est-scope-note { font-size: 0.8rem; color: #666; line-height: 1.6; margin-top: 12px; }
.estimator-wrapper .est-disclaimer { background: #f7f9fb; border-left: 3px solid #2C5370; border-radius: 0 4px 4px 0; padding: 12px 16px; font-size: 0.78rem; color: #666; line-height: 1.6; margin-top: 18px; }

/* --- Ajouts ------------------------------------------------------------- */
.estimator-wrapper .est-card { font: inherit; width: 100%; }
.estimator-wrapper .est-card:focus-visible,
.estimator-wrapper .est-slider-row input[type=range]:focus-visible { outline: 2px solid #2C5370; outline-offset: 2px; }
.estimator-wrapper .est-breakdown th:last-child { text-align: right; }
.estimator-wrapper .est-quote-flag {
    display: inline-block;
    font-size: 0.7rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .06em;
    color: #633806;
    background: #faeeda;
    border-radius: 3px;
    padding: 2px 8px;
    margin-bottom: 8px;
}

@media (max-width: 600px) {
    .estimator-wrapper .estimator-header { flex-wrap: wrap; }
    .estimator-wrapper .estimator-header span { margin-left: 0; width: 100%; }
    .estimator-wrapper .estimator-body { padding: 16px; }
    .estimator-wrapper .est-results-grid { grid-template-columns: 1fr; }
    .estimator-wrapper .est-slider-row { flex-wrap: wrap; }
    .estimator-wrapper .est-slider-row label { min-width: 0; width: 100%; }
}