/* Module FAQ — front-office : accordéon animé (classes .vcf-*, surchargeables) */

/* --vcf-q-font / --vcf-a-font : familles Google Fonts renseignées dans
   le back-office — sinon inherit = typo de base du site hôte. */
.vcf {
    margin: 0 auto;
    max-width: 780px;
    display: flex;
    flex-direction: column;
    gap: 10px;
    font-family: inherit;
}

.vcf-item {
    border: 1px solid #e6e8ef;
    border-radius: 12px;
    background: #fff;
    box-shadow: 0 2px 10px rgba(13, 21, 38, .04);
    overflow: hidden;
    transition: box-shadow .25s ease, border-color .25s ease;
}
.vcf-item.open {
    border-color: #d8cff0;
    box-shadow: 0 6px 20px rgba(109, 91, 208, .10);
}

/* Question : ligne cliquable + chevron */
.vcf-q {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 14px;
    width: 100%;
    padding: 16px 20px;
    border: 0;
    background: none;
    font-family: var(--vcf-q-font, inherit);
    font-size: var(--vcf-q-size, 15.5px);
    font-weight: var(--vcf-q-weight, 600);
    color: var(--vcf-q-color, #1b2340);
    text-align: left;
    cursor: pointer;
}
/* Accent réglable (--vcf-accent) : survol + question ouverte. */
.vcf-q:hover,
.vcf-item.open .vcf-q { color: var(--vcf-accent, #6d5bd0); }
.vcf-chev {
    flex-shrink: 0;
    color: var(--vcf-accent, #6d5bd0);
    transition: transform .3s ease;
}
.vcf-item.open .vcf-chev { transform: rotate(180deg); }

/* Réponse : repliée via max-height, déroulée par le JS */
.vcf-a {
    max-height: 0;
    overflow: hidden;
    transition: max-height .4s ease;
}
.vcf-a-inner {
    padding: 0 20px 18px;
    font-family: var(--vcf-a-font, inherit);
    font-size: var(--vcf-a-size, 14.5px);
    font-weight: var(--vcf-a-weight, 400);
    line-height: 1.7;
    color: var(--vcf-a-color, #3c4358);
}
.vcf-a-inner > :first-child { margin-top: 0; }
.vcf-a-inner > :last-child { margin-bottom: 0; }
.vcf-a-inner a { color: var(--vcf-accent, #6d5bd0); }

/* ------------------------------------------------------------------
 | Mode « sans encart » (vcf-lines) : questions épurées séparées par
 | de fines lignes, bouton « + » cerclé à droite qui devient « − » à
 | l'ouverture. Fond transparent — la couleur vient de la page.
 * --------------------------------------------------------------- */
.vcf-lines {
    max-width: none;
    gap: 0;
}
.vcf-lines .vcf-item {
    border: 0;
    border-bottom: 1px solid #e2ddd2;
    border-radius: 0;
    background: transparent;
    box-shadow: none;
    overflow: visible;
}
.vcf-lines .vcf-item:first-child { border-top: 1px solid #e2ddd2; }
.vcf-lines .vcf-item.open { border-color: #e2ddd2; box-shadow: none; }
.vcf-lines .vcf-q {
    padding: 24px 4px;
    font-family: var(--vcf-q-font, inherit); /* même typo que le site hôte */
    font-size: var(--vcf-q-size, 21px);
    font-weight: var(--vcf-q-weight, 400);
    line-height: 1.3;
    color: var(--vcf-q-color, #2c2b26);
}
.vcf-lines .vcf-q:hover { color: var(--vcf-accent, #6d5bd0); }
.vcf-lines .vcf-a-inner {
    padding: 2px 60px 28px 4px;
    font-size: var(--vcf-a-size, 15px);
}

/* Bouton « + » cerclé (remplace le chevron en mode lignes) */
.vcf-plus {
    position: relative;
    flex-shrink: 0;
    width: 42px;
    height: 42px;
    border: 1px solid #d8d2c4;
    border-radius: 50%;
    transition: border-color .25s ease;
}
.vcf-plus::before,
.vcf-plus::after {
    content: '';
    position: absolute;
    top: 50%;
    left: 50%;
    background: #8a857a;
    transition: transform .3s ease;
}
.vcf-plus::before { width: 14px; height: 1.5px; transform: translate(-50%, -50%); }
.vcf-plus::after  { width: 1.5px; height: 14px; transform: translate(-50%, -50%); }
.vcf-lines .vcf-item.open .vcf-plus::after { transform: translate(-50%, -50%) scaleY(0); }
.vcf-lines .vcf-q:hover .vcf-plus { border-color: var(--vcf-accent, #6d5bd0); }
/* Le « − » reprend l'accent quand la question est ouverte. */
.vcf-lines .vcf-item.open .vcf-plus::before { background: var(--vcf-accent, #6d5bd0); }
.vcf-lines .vcf-item.open .vcf-plus { border-color: var(--vcf-accent, #6d5bd0); }

@media (max-width: 640px) {
    .vcf-q { padding: 14px 16px; font-size: var(--vcf-q-size, 15px); }
    .vcf-a-inner { padding: 0 16px 16px; }
    .vcf-lines .vcf-q { padding: 20px 4px; font-size: var(--vcf-q-size, 18px); }
    .vcf-lines .vcf-a-inner { padding: 0 12px 22px 4px; }
    .vcf-plus { width: 36px; height: 36px; }
}