﻿/* Pages detail services / zones - Couvreur Bayonne */
.sd-article {
    max-width: 820px;
    margin: 0 auto;
    padding: 40px 24px 16px;
}
.sd-breadcrumb {
    font-size: 13px;
    color: #8a8a7d;
    margin: 0 0 26px;
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    align-items: center;
}
.sd-breadcrumb a { color: #6b7a4a; text-decoration: none; font-weight: 600; }
.sd-breadcrumb a:hover { color: var(--color-cta); }
.sd-breadcrumb span { color: #8a8a7d; }
.sd-section { margin-bottom: 38px; }
.sd-article h2 {
    color: var(--color-brand);
    font-size: 27px;
    line-height: 1.3;
    margin: 0 0 16px;
    position: relative;
    padding-left: 16px;
}
.sd-article h2::before {
    content: "";
    position: absolute;
    left: 0; top: 5px; bottom: 5px;
    width: 4px;
    background: var(--color-cta);
    border-radius: 3px;
}
.sd-article h3 { color: #2a3518; font-size: 20px; line-height: 1.35; margin: 26px 0 12px; }
.sd-article p { color: #333; font-size: 16px; line-height: 1.75; margin: 0 0 16px; }
.sd-article ul { margin: 0 0 16px; padding-left: 4px; list-style: none; }
.sd-article li {
    color: #333; font-size: 16px; line-height: 1.7; margin-bottom: 10px;
    padding-left: 28px; position: relative;
}
.sd-article li::before {
    content: "";
    position: absolute;
    left: 0; top: 8px;
    width: 14px; height: 14px;
    background: no-repeat center/contain url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23ff6a00' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='20 6 9 17 4 12'/%3E%3C/svg%3E");
}
.sd-article a { color: var(--color-brand); font-weight: 600; text-decoration: underline; text-underline-offset: 2px; }
.sd-article a:hover { color: var(--color-cta); }
.sd-article strong { color: #2a3518; }
/* Tableaux */
.sd-table-wrap { overflow-x: auto; margin: 20px 0; border-radius: 10px; box-shadow: 0 2px 10px rgba(0,0,0,0.05); }
.sd-article table { width: 100%; border-collapse: collapse; background: #fff; font-size: 15px; min-width: 480px; }
.sd-article thead th { background: var(--color-brand); color: #fff; font-weight: 600; text-align: left; padding: 13px 16px; }
.sd-article tbody td { padding: 12px 16px; border-bottom: 1px solid #ece9df; color: #444; line-height: 1.55; vertical-align: top; }
.sd-article tbody tr:nth-child(even) { background: #faf9f4; }
.sd-article tbody tr:last-child td { border-bottom: none; }
.sd-article table strong { color: var(--color-brand); }
/* CTA inline */
.sd-cta {
    background: linear-gradient(0deg,#eef0e6,#eef0e6); background-color: #eef0e6;
    border-radius: 14px; padding: 32px 28px; text-align: center; margin: 40px 0;
    border: 1px solid #e1e4d4;
}
.sd-cta p { margin: 0 0 18px; font-size: 18px; line-height: 1.5; color: #2a3518; font-weight: 600; }
.sd-cta .btn-cta { display: inline-block; }
/* FAQ */
.sd-faq .sd-q {
    font-weight: 700; color: #2a3518; font-size: 17px; margin: 0;
    padding: 16px 44px 16px 0; border-top: 1px solid #ece9df; position: relative; cursor: default;
}
.sd-faq .sd-q::after {
    content: "+"; position: absolute; right: 6px; top: 12px;
    color: var(--color-cta); font-size: 24px; font-weight: 400;
}
.sd-faq .sd-q + p { color: #555; font-size: 15.5px; line-height: 1.7; margin: 0 0 14px; padding-right: 12px; }
.sd-faq h2 { margin-bottom: 10px; }
/* Maillage interne - autres prestations / zones */
.sd-related { background: #f7f6f1; padding: 56px 24px; margin-top: 8px; }
.sd-related-inner { max-width: 1080px; margin: 0 auto; }
.sd-related h2 { color: var(--color-brand); text-align: center; font-size: 26px; margin: 0 0 32px; }
.sd-related-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(230px, 1fr)); gap: 16px; }
.sd-related-card {
    display: block; background: #fff; border: 1px solid #e3e0d6; border-radius: 10px;
    padding: 20px 22px; text-decoration: none; transition: border-color 0.2s, box-shadow 0.2s, transform 0.2s;
}
.sd-related-card:hover { border-color: var(--color-cta); box-shadow: 0 6px 18px rgba(0,0,0,0.07); transform: translateY(-2px); }
.sd-related-card strong { display: block; color: var(--color-brand); font-size: 17px; margin-bottom: 5px; }
.sd-related-card span { color: #666; font-size: 14px; line-height: 1.5; }
@media (max-width: 768px) {
    .sd-article { padding: 28px 20px 12px; }
    .sd-article h2 { font-size: 23px; }
    .sd-related { padding: 44px 20px; }
}