/* Tutoriel uniquement : accordéons HTML natifs, aucun style du lecteur. */
.vht .vht-contents { margin-top: 42px; padding-bottom: 14px; }
.vht .vht-contents h2 { font-size: 14px; color: var(--vht-muted); letter-spacing: .04em; margin: 0; }
.vht .vht-steps { border-top: 1px solid var(--vht-line); }
.vht details.vht-step { display: block; padding: 0; margin: 0; border-bottom: 1px solid var(--vht-line); scroll-margin-top: 120px; }
.vht details.vht-step > summary, .vht .vht-faq summary {
    position: relative; display: block; list-style: none; cursor: pointer;
    padding: 27px 52px 27px 0; min-height: 72px; line-height: 1.35;
    -webkit-tap-highlight-color: transparent;
}
.vht details.vht-step > summary::-webkit-details-marker, .vht .vht-faq summary::-webkit-details-marker { display: none; }
.vht details.vht-step > summary::marker, .vht .vht-faq summary::marker { content: ''; }
.vht .vht-step .vht-accordion-title { display: block; font-family: inherit; text-transform: none; letter-spacing: -.015em; font-size: clamp(23px, 2.4vw, 33px); line-height: 1.35; margin: 0; font-weight: 700; color: var(--vht-ink); }
.vht details.vht-step > summary::after, .vht .vht-faq summary::after {
    content: ''; position: absolute; width: 15px; height: 15px;
    border-right: 2px solid currentColor; border-bottom: 2px solid currentColor;
    color: #79737e; right: 13px; top: 50%; font-size: inherit;
    transform: translateY(-70%) rotate(45deg); transition: transform 160ms ease, color 160ms ease;
}
.vht details.vht-step[open] > summary::after, .vht .vht-faq details[open] summary::after {
    content: ''; color: var(--vht-purple); transform: translateY(-25%) rotate(225deg);
}
.vht details.vht-step > summary:hover .vht-accordion-title, .vht .vht-faq summary:hover { color: var(--vht-purple); }
.vht details.vht-step[open] > summary .vht-accordion-title { color: var(--vht-purple); }
.vht .vht-accordion-body { display: flex; gap: clamp(25px, 5vw, 60px); align-items: flex-start; padding: 0 0 30px; }
.vht .vht-accordion-body .vht-step-copy { flex: 1; min-width: 0; }
.vht .vht-accordion-body > .vht-figure { flex: 0 1 410px; min-width: 0; }
.vht .vht-faq summary { font-size: clamp(19px, 1.7vw, 24px); font-weight: 700; padding-block: 23px; }
.vht .vht-faq details > p { font-size: 16px; line-height: 1.65; padding-right: 30px; }
@media (max-width: 700px) {
    .vht .vht-contents { margin-top: 30px; }
    .vht details.vht-step > summary { padding: 22px 42px 22px 0; }
    .vht .vht-step .vht-accordion-title { display: block; font-family: inherit; text-transform: none; letter-spacing: -.015em; font-size: 23px; line-height: 1.35; }
    .vht details.vht-step > summary::after, .vht .vht-faq summary::after { width: 12px; height: 12px; right: 7px; }
    .vht .vht-accordion-body { flex-direction: column; gap: 22px; padding-bottom: 27px; }
    .vht .vht-accordion-body > .vht-figure { flex: auto; width: 100%; max-width: 420px; align-self: center; }
    .vht .vht-faq summary { padding: 21px 42px 21px 0; font-size: 20px; }
}
@media (prefers-reduced-motion: reduce) {
    .vht details.vht-step > summary::after, .vht .vht-faq summary::after { transition: none; }
}