/* ============================================================
   YLLY — FAQ (accordion)
   Figma: NovCast > node 893:12937 (theme grey)
   Bullet = étoile orange, toggle = chevron, 2 thèmes (light/grey)
   ============================================================ */

.yl-faq {
    background-color: var(--color-surface-white);
    padding-block: var(--section-py-md) var(--section-py-sm);
}

/* Variante sombre/grey */
.yl-faq--grey {
    background-color: var(--color-surface-default);
}

.yl-faq__inner {
    margin-inline: auto;
    max-width: 1440px;
    padding-inline: clamp(24px, 6vw, 256px);
}

/* ── Header ──────────────────────────────────────────────── */
.yl-faq__header {
    align-items: center;
    display: flex;
    flex-direction: column;
    gap: 16px;
    margin-bottom: 35px;
    text-align: center;
}

/* Title — 40px SemiBold, LS -0.8px, LH 1, var(--color-text-default) */
.yl-faq__title {
    color: var(--color-text-default);
    font-family: 'Instrument Sans', sans-serif;
    font-size: 40px;
    font-weight: 600;
    letter-spacing: -0.8px;
    line-height: 1;
    margin: 0;
}

/* Subtitle — 18px Medium, LS -0.09px, LH 1.7, #333 */
.yl-faq__subtitle {
    color: #333;
    font-family: 'Instrument Sans', sans-serif;
    font-size: 18px;
    font-weight: 500;
    letter-spacing: -0.09px;
    line-height: 1.7;
    margin: 0;
}

/* ── List ────────────────────────────────────────────────── */
.yl-faq__list {
    display: flex;
    flex-direction: column;
    gap: 8px;
    margin-inline: auto;
    max-width: 928px;
}

.yl-faq__item {
    border-bottom: 1px solid var(--color-stroke-light);
}

/* Question button — bullet-star à gauche, chevron à droite */
.yl-faq__question {
    align-items: center;
    background: transparent;
    border: 0;
    cursor: pointer;
    display: flex;
    gap: 12px;
    padding: 24px 0;
    text-align: left;
    width: 100%;
}

.yl-faq__question:hover .yl-faq__question-text {
    color: var(--color-surface-secondary);
}

/* Bullet — orange star rotée 30deg (comme le design Figma) */
/* Etoile — Figma node 893:12945 (20.538 x 20.722).
   La rotation de 30deg est deja incorporee au trace exporte. */
.yl-faq__bullet {
    display: block;
    flex-shrink: 0;
    width: 20.538px;
    height: 20.722px;
}

.yl-faq__question-text {
    color: var(--color-text-default);
    flex: 1;
    font-family: 'Instrument Sans', sans-serif;
    font-size: 18px;
    font-weight: 500;
    letter-spacing: -0.09px;
    line-height: 1.7;
    transition: color .2s ease;
}

/* Chevron — pointe vers le bas (fermé), pivote 180deg quand ouvert */
.yl-faq__chevron {
    display: block;
    flex-shrink: 0;
    height: 20px;
    transition: transform .3s ease;
    width: 20px;
}

.yl-faq__question[aria-expanded="true"] .yl-faq__chevron {
    transform: rotate(180deg);
}

/* ── Answer ──────────────────────────────────────────────── */
.yl-faq__answer {
    overflow: hidden;
}

.yl-faq__answer[hidden] {
    display: none;
}

.yl-faq__answer-inner {
    color: #555;
    font-family: 'Instrument Sans', sans-serif;
    font-size: 16px;
    font-weight: 400;
    line-height: 1.7;
    padding: 0 32px 24px;
}

.yl-faq__answer-inner p {
    margin: 0;
}

/* ── Responsive ──────────────────────────────────────────── */
@media (max-width: 768px) {
    .yl-faq__inner {
        padding-inline: 24px;
    }

    .yl-faq__title {
        font-size: 28px;
        letter-spacing: -0.56px;
    }

    .yl-faq__question-text {
        font-size: 16px;
    }

    .yl-faq__subtitle {
        font-size: 16px;
    }
}