/* JM Electric 2026 — Composant : FAQ V2
   Conforme au composant FAQ.jsx de la maquette V2.
   - Container blanc avec border + shadow
   - Items numérotés (italic transparent)
   - Toggle button rond (jaune + rotate quand ouvert)
   - Réponse indentée (pl-[4.5rem])
   - Section max-w 5xl (1024px)
*/

.faq--v2 {
    padding: 80px 16px;
    max-width: 1024px;
    margin: 0 auto;
}
.faq-head {
    text-align: center;
    margin-bottom: 56px;
    padding: 0 24px;
}
.faq-head .eyebrow { margin-bottom: 16px; }
.faq-title {
    font-family: var(--font-display);
    font-weight: 900;
    text-transform: uppercase;
    color: var(--navy);
    letter-spacing: -0.01em;
    line-height: .92;
    font-size: clamp(2.4rem, 4.4vw, 3rem);
}
.faq-title .title-highlight {
    position: relative;
    display: inline-block;
    margin-top: 4px;
}
.faq-title .title-highlight::after {
    content: '';
    position: absolute;
    left: 0; right: 0;
    bottom: 6px;
    height: 12px;
    background: var(--yellow);
    opacity: .55;
    border-radius: 2px;
    z-index: -1;
}

/* Liste FAQ : container white avec border + shadow */
.faq-list {
    background: var(--white);
    border: 1px solid #f3f4f6;
    border-radius: 28px;
    box-shadow: 0 8px 30px -6px rgba(31,48,107,.07);
    overflow: hidden;
}

.faq-item {
    border-bottom: 1px solid #f3f4f6;
    transition: background .2s;
}
.faq-item:last-child { border-bottom: 0; }
.faq-item.open { background: rgba(255,251,235,.40); }

/* Question (button) */
.faq-question {
    width: 100%;
    text-align: left;
    display: flex;
    align-items: center;
    gap: 20px;
    padding: 24px;
    background: none;
    border: 0;
    cursor: pointer;
    transition: background .2s;
    color: inherit;
    font-family: inherit;
}
@media (min-width: 1024px) { .faq-question { padding: 24px 32px; } }
.faq-question:hover { background: var(--bg); }
.faq-item.open .faq-question:hover { background: rgba(255,251,235,.60); }

.faq-num {
    font-family: var(--font-display);
    font-style: italic;
    font-weight: 900;
    font-size: 1.4rem;
    line-height: 1;
    color: rgba(31,48,107,.25);
    width: 32px;
    flex-shrink: 0;
    font-variant-numeric: tabular-nums;
}
.faq-q-text {
    flex: 1;
    font-size: 16px;
    font-weight: 800;
    color: var(--navy);
    line-height: 1.4;
}
.faq-toggle {
    flex-shrink: 0;
    width: 36px; height: 36px;
    border-radius: 50%;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: rgba(31,48,107,.06);
    color: rgba(31,48,107,.60);
    transition: background .2s, color .2s, transform .25s;
}
.faq-toggle svg { width: 16px; height: 16px; }
.faq-item.open .faq-toggle {
    background: var(--yellow);
    color: var(--navy);
    transform: rotate(180deg);
}

/* Réponse — animation grid-rows pour collapse fluide */
.faq-answer {
    display: grid;
    grid-template-rows: 0fr;
    opacity: 0;
    transition: grid-template-rows .3s ease, opacity .3s ease;
}
.faq-item.open .faq-answer {
    grid-template-rows: 1fr;
    opacity: 1;
}
.faq-answer-inner {
    overflow: hidden;
}
.faq-answer-inner p,
.faq-answer-inner > * {
    padding: 0 24px 28px;
    padding-left: 4.5rem;
    font-size: 15.5px;
    color: rgba(31,48,107,.75);
    line-height: 1.7;
    margin: 0;
}
@media (min-width: 1024px) {
    .faq-answer-inner p,
    .faq-answer-inner > * {
        padding: 0 32px 28px;
        padding-left: 5.25rem;
    }
}

/* Pied de FAQ */
.faq-foot {
    text-align: center;
    font-size: 13.5px;
    color: var(--ink-55);
    margin-top: 32px;
}
.faq-foot-link {
    font-weight: 800;
    color: var(--navy);
    text-decoration: underline;
    text-decoration-color: var(--yellow);
    text-decoration-thickness: 2px;
    text-underline-offset: 4px;
    transition: text-decoration-color .2s;
}
.faq-foot-link:hover { text-decoration-color: var(--navy); }