/* =====================================================================
   FAQ - Vincent Eurieult
   Rendue par le mu-plugin yv-ve-schema.php via le hook yv_ai_render_blocks.
   Reprend le design system .ve-* (marine + or, angles nets, filets fins).
   Ne jamais mettre ces règles dans le thème : ce fichier appartient au
   mu-plugin, vincent.css appartient au thème.
   ===================================================================== */

.ve-faq__list {
    border-top: 1px solid var(--ve-line, #e3e3db);
}

.ve-faq__item {
    border: 1px solid var(--ve-line, #e3e3db);
    border-top: 0;
    background: var(--ve-paper-2, #fff);
}

.ve-faq__item + .ve-faq__item {
    border-top: 0;
}

.ve-faq__q {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 20px;
    padding: 22px clamp(18px, 3vw, 30px);
    cursor: pointer;
    list-style: none;
    font-family: var(--font-heading, Georgia, serif);
    font-size: clamp(1.02rem, 1.5vw, 1.2rem);
    font-weight: 500;
    line-height: 1.4;
    color: var(--ve-navy, #14233F);
    transition: color .3s var(--ve-ease, ease), background-color .3s var(--ve-ease, ease);
}

.ve-faq__q::-webkit-details-marker { display: none; }
.ve-faq__q::marker { content: ""; }

.ve-faq__q:hover { color: var(--ve-gold-deep, #8A6A2E); }

.ve-faq__q:focus-visible {
    outline: 2px solid var(--ve-gold, #B79149);
    outline-offset: -2px;
}

.ve-faq__qt { flex: 1 1 auto; }

/* Croix / moins en CSS pur : pas de dépendance à une librairie d'icônes. */
.ve-faq__ic {
    position: relative;
    flex: 0 0 auto;
    width: 26px;
    height: 26px;
    border: 1px solid var(--ve-line-dark, rgba(183, 145, 73, .28));
    border-radius: 2px;
    transition: transform .35s var(--ve-ease, ease), border-color .3s;
}

.ve-faq__ic::before,
.ve-faq__ic::after {
    content: "";
    position: absolute;
    top: 50%;
    left: 50%;
    width: 11px;
    height: 1px;
    background: var(--ve-gold-deep, #8A6A2E);
    transform: translate(-50%, -50%);
    transition: opacity .3s var(--ve-ease, ease);
}

.ve-faq__ic::after { transform: translate(-50%, -50%) rotate(90deg); }

.ve-faq__item[open] .ve-faq__ic { transform: rotate(180deg); border-color: var(--ve-gold, #B79149); }
.ve-faq__item[open] .ve-faq__ic::after { opacity: 0; }

.ve-faq__item[open] .ve-faq__q { color: var(--ve-gold-deep, #8A6A2E); }

.ve-faq__a {
    padding: 0 clamp(18px, 3vw, 30px) 26px;
    border-top: 1px solid var(--ve-line-soft, #eeeee8);
    margin-top: -1px;
    padding-top: 20px;
}

.ve-faq__a p {
    font-size: 1rem;
    line-height: 1.8;
    color: var(--ve-text-2, #4a5468);
    margin: 0 0 1rem;
}

.ve-faq__a p:last-child { margin-bottom: 0; }

.ve-faq__a strong { color: var(--ve-navy, #14233F); font-weight: 600; }

.ve-faq__a ul,
.ve-faq__a ol {
    margin: 0 0 1rem;
    padding-left: 1.2rem;
    color: var(--ve-text-2, #4a5468);
    line-height: 1.75;
}

.ve-faq__a li + li { margin-top: .4rem; }

.ve-faq__a a {
    color: var(--ve-gold-deep, #8A6A2E);
    text-decoration: underline;
    text-underline-offset: 3px;
}

@media (max-width: 640px) {
    .ve-faq__q { padding: 18px 16px; gap: 14px; }
    .ve-faq__a { padding: 18px 16px 22px; }
    .ve-faq__ic { width: 22px; height: 22px; }
}