/* ==========================================================================
   FAQ cards (div.faq-cards > details > summary.q + div.a) : articles du blog
   (avec css/blog.css) et page FAQ de chaque langue (inc/faq.php).
   ========================================================================== */
body.cf-faq-page {
    --cf-blog-accent: #ff6b35;
    --cf-blog-accent-soft: #ffd2bf;
    --cf-blog-accent-pale: #fff2ea;
    --cf-blog-ink: #102038;
    --cf-blog-ink-soft: #53647a;
    --cf-blog-surface: #ffffff;
    --cf-blog-surface-alt: #fffaf6;
}

:is(body.cf-blog-single, body.cf-faq-page) .entry-content .faq-cards details {
    margin: 12px 0;
    padding: 14px 18px;
    border: 1px solid #ead8cc;
    border-radius: 18px;
    background: var(--cf-blog-surface);
    box-shadow: 0 10px 30px rgba(15, 25, 41, 0.05);
    transition: background-color 0.2s ease, box-shadow 0.2s ease;
}

:is(body.cf-blog-single, body.cf-faq-page) .entry-content .faq-cards details[open] {
    background: var(--cf-blog-surface-alt);
    box-shadow: 0 18px 46px rgba(15, 25, 41, 0.08);
}

:is(body.cf-blog-single, body.cf-faq-page) .entry-content .faq-cards summary {
    cursor: pointer;
    list-style: none;
}

:is(body.cf-blog-single, body.cf-faq-page) .entry-content .faq-cards summary::-webkit-details-marker {
    display: none;
}

:is(body.cf-blog-single, body.cf-faq-page) .entry-content .faq-cards .q {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 10px;
    padding-inline-end: 28px;
    position: relative;
    color: var(--cf-blog-ink);
    font-weight: 700;
    letter-spacing: -0.01em;
}

:is(body.cf-blog-single, body.cf-faq-page) .entry-content .faq-cards .q::after {
    content: "";
    position: absolute;
    right: 4px;
    top: 50%;
    width: 9px;
    height: 9px;
    border-right: 2px solid var(--cf-blog-accent);
    border-bottom: 2px solid var(--cf-blog-accent);
    transform: translateY(-70%) rotate(45deg);
    transition: transform 0.2s ease;
}

:is(body.cf-blog-single, body.cf-faq-page) .entry-content .faq-cards details[open] .q::after {
    transform: translateY(-30%) rotate(-135deg);
}

:is(body.cf-blog-single, body.cf-faq-page) .entry-content .faq-cards .badge {
    display: inline-block;
    padding: 2px 9px;
    border: 1px solid var(--cf-blog-accent-soft);
    border-radius: 9999px;
    background: var(--cf-blog-accent-pale);
    color: var(--cf-blog-accent);
    font-size: 0.74rem;
    font-weight: 600;
    letter-spacing: 0.02em;
    text-transform: lowercase;
}

:is(body.cf-blog-single, body.cf-faq-page) .entry-content .faq-cards .a {
    margin-top: 10px;
    color: var(--cf-blog-ink-soft);
    line-height: 1.7;
}

:is(body.cf-blog-single, body.cf-faq-page) .entry-content .faq-cards .a > :last-child {
    margin-bottom: 0;
}

/* ---------- Page FAQ : largeur de lecture, rubriques, encadré de contact ---------- */
body.cf-faq-page .entry-header,
body.cf-faq-page .entry-content {
    max-width: 780px;
    margin-inline: auto;
}

body.cf-faq-page #intro p {
    color: var(--cf-blog-ink-soft);
    font-size: 1.05rem;
    line-height: 1.6;
}

body.cf-faq-page .entry-content .faq-cards > h2 {
    margin: 30px 0 4px;
    font-size: 1.25rem;
    color: var(--cf-blog-ink);
}

body.cf-faq-page .entry-content .faq-cards .q {
    min-height: 26px;
    font-size: 1rem;
    line-height: 1.35;
}

body.cf-faq-page .entry-content .faq-cards .a a {
    color: #c2410c;
    text-decoration: underline;
    text-underline-offset: 3px;
}

body.cf-faq-page .cf-faq-contact {
    margin: 32px 0 8px;
    padding: 18px 18px 16px;
}

body.cf-faq-page .cf-faq-contact h2 {
    margin: 0 0 10px;
    font-size: 1.1rem;
    color: var(--cf-blog-ink);
}

body.cf-faq-page .cf-faq-contact .cf-faq-ecrire {
    display: inline-flex;
    align-items: center;
    min-height: 44px;
    margin-bottom: 6px;
    padding: 0 18px;
    border-radius: 999px;
    background: var(--cf-blog-ink);
    color: #fff !important;
    font-weight: 700;
    text-decoration: none;
}

@media (max-width: 600px) {
    body.cf-faq-page .entry-content .faq-cards details {
        padding: 13px 15px;
    }

    body.cf-faq-page .entry-content .faq-cards > h2 {
        margin-top: 24px;
        font-size: 1.12rem;
    }
}