/* =============================================================================
   article3.css - "SHOULD I USE PT?" DECISION TREE
   Article : Post-Tension vs. Reinforced Concrete (pilier)
   Chemin  : public_html/assets/css/articles/article3.css
   Dashboard, Extra stylesheets : css/articles/article3.css

   Repris de l'ancien article PHP (bloc <style> de l'en-tete), limite a
   l'outil insere par js/articles/article3.js. Regles prefixees par
   .dt-wrapper. Les icones Font Awesome sont remplacees par une fleche CSS.
   ============================================================================= */

.dt-wrapper {
    background: #f4f6f8;
    border: 1px solid #d5dde5;
    border-top: 4px solid #2C5370;
    padding: 28px 30px;
    margin: 2.5rem 0;
    font-family: var(--font-body,'Inter',sans-serif);
}
.dt-wrapper .dt-eyebrow {
    font-size: 0.72rem;
    font-weight: 700;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: #2C5370;
    margin-bottom: 6px;
}
.dt-wrapper .dt-title {
    font-family: var(--font-heading,'Merriweather',serif);
    font-size: 1.35rem;
    font-weight: 700;
    color: #111;
    margin: 0 0 6px;
    line-height: 1.25;
}
.dt-wrapper .dt-title em { font-style: italic; font-weight: 300; color: #2C5370; }
.dt-wrapper .dt-subtitle { font-size: 0.875rem; color: #666; line-height: 1.55; margin: 0 0 22px; }

/* Progress bar */
.dt-wrapper .dt-progress-wrap { margin-bottom: 22px; }
.dt-wrapper .dt-progress-label { display: flex; justify-content: space-between; font-size: 0.72rem; color: #888; margin-bottom: 6px; font-weight: 600; text-transform: uppercase; letter-spacing: 0.07em; }
.dt-wrapper .dt-progress-track { height: 4px; background: #d0d9e2; border-radius: 2px; }
.dt-wrapper .dt-progress-fill { height: 4px; background: #2C5370; border-radius: 2px; transition: width 0.4s ease; }

/* Question card */
.dt-wrapper .dt-question-card { background: #fff; border: 1px solid #d5dde5; padding: 22px 20px; border-radius: 4px; }
.dt-wrapper .dt-question-num { font-size: 0.7rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.1em; color: #2C5370; margin-bottom: 8px; }
.dt-wrapper .dt-question-text { font-family: var(--font-heading,'Merriweather',serif); font-size: 1.05rem; font-weight: 700; color: #111; margin: 0 0 18px; line-height: 1.45; }

/* Answer buttons */
.dt-wrapper .dt-answers { display: flex; flex-direction: column; gap: 10px; }
.dt-wrapper .dt-answer-btn {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 13px 16px;
    border: 1px solid #c0cad4;
    border-radius: 4px;
    background: #fff;
    cursor: pointer;
    font-size: 0.875rem;
    color: #333;
    text-align: left;
    transition: border-color 0.18s, background 0.18s, color 0.18s;
    font-family: var(--font-body,'Inter',sans-serif);
}
.dt-wrapper .dt-answer-btn:hover { border-color: #2C5370; background: #eef3f7; color: #2C5370; }
.dt-wrapper .dt-answer-btn .dt-ans-icon { font-size: 0.8rem; color: #2C5370; flex-shrink: 0; }
.dt-wrapper .dt-answer-btn span { flex: 1; }

/* Result card */
.dt-wrapper .dt-result { display: none; background: #fff; border: 1px solid #d5dde5; padding: 22px 20px; border-radius: 4px; }
.dt-wrapper .dt-result.visible { display: block; }
.dt-wrapper .dt-result-badge {
    display: inline-block;
    padding: 4px 12px;
    border-radius: 2px;
    font-size: 0.7rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.1em;
    margin-bottom: 12px;
}
.dt-wrapper .dt-result-badge.pt  { background: #2C5370; color: #fff; }
.dt-wrapper .dt-result-badge.rc  { background: #7a9ab5; color: #fff; }
.dt-wrapper .dt-result-badge.rev { background: #b85c2a; color: #fff; }
.dt-wrapper .dt-result-title { font-family: var(--font-heading,'Merriweather',serif); font-size: 1.1rem; font-weight: 700; color: #111; margin: 0 0 10px; line-height: 1.35; }
.dt-wrapper .dt-result-body { font-size: 0.9rem; color: #444; line-height: 1.65; margin: 0 0 16px; }
.dt-wrapper .dt-result-factors { list-style: none; padding: 0; margin: 0 0 18px; }
.dt-wrapper .dt-result-factors li { font-size: 0.85rem; color: #555; padding: 6px 0 6px 20px; position: relative; border-bottom: 1px solid #f0f0f0; line-height: 1.45; }
.dt-wrapper .dt-result-factors li::before { content: '\2192'; position: absolute; left: 0; color: #2C5370; font-weight: 700; }
.dt-wrapper .dt-result-cta { display: inline-block; background: #2C5370; color: #fff; padding: 9px 20px; text-decoration: none; font-weight: 600; font-size: 0.85rem; border-radius: 3px; transition: background 0.2s; }
.dt-wrapper .dt-result-cta:hover { background: #1d3d57; }

.dt-wrapper .dt-restart-btn {
    display: flex;
    align-items: center;
    gap: 7px;
    background: none;
    border: 1px solid #c0cad4;
    border-radius: 4px;
    padding: 8px 14px;
    font-size: 0.78rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.07em;
    color: #777;
    cursor: pointer;
    margin-top: 14px;
    font-family: var(--font-body,'Inter',sans-serif);
    transition: border-color 0.18s, color 0.18s;
}
.dt-wrapper .dt-restart-btn:hover { border-color: #2C5370; color: #2C5370; }
.dt-wrapper .dt-disclaimer {
    font-size: 0.75rem;
    color: #999;
    line-height: 1.55;
    border-top: 1px solid #d5dde5;
    padding-top: 12px;
    margin-top: 18px;
    font-style: italic;
}

/* --- Ajouts ------------------------------------------------------------- */
.dt-wrapper .dt-answer-btn { width: 100%; }
.dt-wrapper .dt-answer-btn::after {
    content: "\203A";
    flex-shrink: 0;
    font-size: 1.1rem;
    line-height: 1;
    color: #bbb;
}
.dt-wrapper .dt-answer-btn:hover::after { color: #2C5370; }
.dt-wrapper .dt-answer-btn:focus-visible,
.dt-wrapper .dt-restart-btn:focus-visible,
.dt-wrapper .dt-result-cta:focus-visible { outline: 2px solid #2C5370; outline-offset: 2px; }
body .dt-wrapper a.dt-result-cta { color: #fff; }

@media (max-width: 600px) {
    .dt-wrapper { padding: 20px 16px; }
    .dt-wrapper .dt-question-card,
    .dt-wrapper .dt-result { padding: 18px 14px; }
}