/* ===== FAQ Numeria ===== */

:root {
    --faq-color-primary: #064e40;
    --faq-color-black: #000000;
    --faq-color-accent: #ea660d;
    --faq-color-white: #ffffff;
    --faq-color-light: #f2f2f2;
    --faq-color-border: rgba(6, 78, 64, 0.16);

    --faq-radius: 0;
    --faq-padding: 30px;
    --faq-gap: 20px;

    --faq-font: "Inter", sans-serif;
    --faq-font-size: 18px;
    --faq-line-height: 28px;

    --faq-question-size: 22px;
    --faq-question-line-height: 30px;
    --faq-answer-size: 18px;
    --faq-answer-line-height: 28px;
}

/* ============================================================
 * Conteneur global
 * ============================================================ */
.faq-numeria {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: flex-start;
    gap: var(--faq-gap);
    max-width: 900px;
    margin-inline: auto;
    margin-right: 0;
    font-family: var(--faq-font);
}

.faq-numeria .toggle {
    scroll-margin-top: 120px;
}

/* ============================================================
 * Item fermé
 * ============================================================ */
.faq-numeria .toggle {
    width: 100%;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 0;

    padding: var(--faq-padding) !important;
    margin: 0 !important;

    border-radius: var(--faq-radius);
    border: 1px solid var(--faq-color-border) !important;
    background: var(--faq-color-light);

    box-sizing: border-box;
    overflow: hidden;
    transition:
        background 0.3s ease,
        border-color 0.3s ease,
        box-shadow 0.3s ease,
        transform 0.3s ease;
}

.faq-numeria .toggle:hover {
    transform: translateY(-2px);
    box-shadow: 0 8px 20px rgba(0, 0, 0, 0.06);
}

.faq-numeria .toggle+.toggle {
    margin-top: 0 !important;
}

/* ============================================================
 * Ligne titre + bouton
 * ============================================================ */
.faq-numeria .toggle>.toggle-title {
    margin: 0 !important;
    width: 100%;
}

.faq-numeria .toggle>.toggle-title a.toggle-heading {
    display: flex !important;
    justify-content: space-between;
    align-items: center;
    align-self: stretch;
    width: 100%;

    padding: 0 !important;
    margin: 0 !important;
    gap: 16px;

    text-decoration: none !important;
    box-shadow: none !important;
    border: 0 !important;
    background: transparent !important;
}

/* ============================================================
 * Titre / question
 * ============================================================ */
.faq-numeria .toggle>.toggle-title a .faq-question {
    color: var(--faq-color-black);
    font-family: var(--faq-font);
    font-size: var(--faq-question-size);
    font-style: normal;
    font-weight: 700;
    line-height: var(--faq-question-line-height);
    text-transform: none !important;
    text-align: left !important;
    letter-spacing: 0;

    flex: 1 1 auto;
    display: block;
    transition: color 0.3s ease;
}

/* ============================================================
 * Bouton toggle
 * ============================================================ */
.faq-numeria .faq-toggle-btn {
    flex: 0 0 38px;
    width: 38px;
    height: 38px;
    position: relative;
    display: block;
}

.faq-numeria .faq-icon {
    position: absolute;
    top: 0;
    left: 0;
    width: 38px;
    height: 38px;
    display: block;

    transform-origin: center center;
    transition:
        transform 0.3s ease-out,
        opacity 0.2s ease-out;
    will-change: transform, opacity;
}

.faq-numeria .faq-icon--inactive {
    opacity: 1;
    transform: rotate(0deg);
}

.faq-numeria .faq-icon--active {
    opacity: 0;
    transform: rotate(0deg);
}

.faq-numeria .toggle:not(.open):not(.active) .toggle-heading:hover .faq-icon--inactive,
.faq-numeria .toggle:not(.open):not(.active) .toggle-heading:focus .faq-icon--inactive {
    transform: rotate(90deg);
}

/* ============================================================
 * Contenu / réponse masqué par défaut
 * ============================================================ */
.faq-numeria .faq-item-inner {
    max-height: 0;
    overflow: hidden;
    opacity: 0;
    transform: translateY(-6px);
    width: 100%;
    margin: 0 !important;
    padding: 0 !important;
    transition:
        max-height 0.35s ease,
        opacity 0.25s linear,
        transform 0.35s ease;
    will-change: max-height, opacity, transform;
}

.faq-numeria .inner-toggle-wrap {
    padding: 0 !important;
    margin: 0 !important;
    width: 100%;
}

/* ============================================================
 * Reset Salient / WPBakery
 * ============================================================ */
.faq-numeria .faq-item-inner .wpb_row,
.faq-numeria .faq-item-inner .vc_row,
.faq-numeria .faq-item-inner .vc_row-fluid {
    margin-left: 0 !important;
    margin-right: 0 !important;
    padding-left: 0 !important;
    padding-right: 0 !important;
    padding-top: 0 !important;
    padding-bottom: 0 !important;
    width: 100% !important;
    max-width: 100% !important;
    box-sizing: border-box !important;
}

.faq-numeria .faq-item-inner .span_12,
.faq-numeria .faq-item-inner .row_col_wrap_12 {
    margin-left: 0 !important;
    margin-right: 0 !important;
    padding-left: 0 !important;
    padding-right: 0 !important;
    width: 100% !important;
    max-width: 100% !important;
    box-sizing: border-box !important;
}

.faq-numeria .faq-item-inner .vc_column_container,
.faq-numeria .faq-item-inner .wpb_column,
.faq-numeria .faq-item-inner .vc_column-inner,
.faq-numeria .faq-item-inner .wpb_wrapper,
.faq-numeria .faq-item-inner .wpb_text_column,
.faq-numeria .faq-item-inner .wpb_content_element,
.faq-numeria .faq-item-inner .faq-answer {
    padding: 0 !important;
    margin: 0 !important;
    width: 100% !important;
    max-width: 100% !important;
    box-sizing: border-box !important;
    float: none !important;
}

.faq-numeria .faq-item-inner .faq-answer {
    margin-top: 30px !important;
}

.faq-numeria .faq-item-inner .vc_column-inner>.wpb_wrapper {
    gap: 0 !important;
}

.faq-numeria .faq-item-inner .row-bg-wrap,
.faq-numeria .faq-item-inner .inner-wrap,
.faq-numeria .faq-item-inner .row-bg-layer,
.faq-numeria .faq-item-inner .row-bg {
    display: none !important;
}

/* ============================================================
 * Paragraphes / textes
 * ============================================================ */

.faq-numeria .faq-item-inner .faq-answer,
.faq-numeria .faq-item-inner .faq-answer p,
.faq-numeria .faq-item-inner .faq-answer li,
.faq-numeria .faq-item-inner .faq-answer ul,
.faq-numeria .faq-item-inner .faq-answer ol,
.faq-numeria .faq-item-inner .faq-answer strong,
.faq-numeria .faq-item-inner .faq-answer b,
.faq-numeria .faq-item-inner .faq-answer em,
.faq-numeria .faq-item-inner .faq-answer i,
.faq-numeria .faq-item-inner .faq-answer span,
.faq-numeria .faq-item-inner .faq-answer div,
.faq-numeria .faq-item-inner .faq-answer h1,
.faq-numeria .faq-item-inner .faq-answer h2,
.faq-numeria .faq-item-inner .faq-answer h3,
.faq-numeria .faq-item-inner .faq-answer h4,
.faq-numeria .faq-item-inner .faq-answer h5,
.faq-numeria .faq-item-inner .faq-answer h6 {
    color: var(--faq-color-white) !important;
}

.faq-numeria .faq-item-inner .wpb_wrapper p,
.faq-numeria .faq-item-inner .wpb_wrapper p:last-child,
.faq-numeria .faq-item-inner .faq-answer p,
.faq-numeria .faq-item-inner .faq-answer p:last-child,
.faq-numeria .faq-item-inner .faq-answer ul,
.faq-numeria .faq-item-inner .faq-answer ol,
.faq-numeria .faq-item-inner .faq-answer li {
    padding-top: 0 !important;
    padding-bottom: 0 !important;
    padding-left: 0 !important;
    margin-top: 0 !important;
}

.faq-numeria .faq-item-inner .wpb_wrapper p,
.faq-numeria .faq-item-inner .faq-answer p,
.faq-numeria .faq-item-inner .faq-answer li {
    color: var(--faq-color-white) !important;
    font-family: var(--faq-font) !important;
    font-size: var(--faq-answer-size) !important;
    font-style: normal !important;
    font-weight: 400 !important;
    line-height: var(--faq-answer-line-height) !important;
    text-transform: none !important;
    text-align: left !important;
    padding-right: 50px !important;
}

.faq-numeria .faq-item-inner .faq-answer p+p,
.faq-numeria .faq-item-inner .faq-answer ul,
.faq-numeria .faq-item-inner .faq-answer ol {
    margin-top: 12px !important;
}

.faq-numeria .faq-item-inner .faq-answer ul,
.faq-numeria .faq-item-inner .faq-answer ol {
    margin-bottom: 0 !important;
    padding-left: 22px !important;
    color: var(--faq-color-white) !important;
}

.faq-numeria .faq-item-inner .faq-answer strong,
.faq-numeria .faq-item-inner .faq-answer b {
    font-weight: 700 !important;
    color: var(--faq-color-white) !important;
}

.faq-numeria .faq-item-inner .faq-answer em,
.faq-numeria .faq-item-inner .faq-answer i {
    font-style: italic !important;
}

/* ============================================================
 * Liens réponses
 * ============================================================ */
.faq-numeria .faq-item-inner .wpb_wrapper a,
.faq-numeria .faq-item-inner .faq-answer a {
    color: var(--faq-color-white) !important;
    text-decoration: underline !important;
    text-decoration-color: var(--faq-color-accent) !important;
    text-decoration-thickness: 2px !important;
    text-underline-offset: 0.18em !important;
    border-bottom: 0 !important;
    box-shadow: none !important;
    background-image: none !important;
    transition: opacity 0.2s ease;
}

.faq-numeria .faq-item-inner .wpb_wrapper a:hover,
.faq-numeria .faq-item-inner .wpb_wrapper a:focus,
.faq-numeria .faq-item-inner .faq-answer a:hover,
.faq-numeria .faq-item-inner .faq-answer a:focus {
    color: var(--faq-color-white) !important;
    text-decoration-color: var(--faq-color-accent) !important;
    opacity: 0.85;
    border-bottom: 0 !important;
    box-shadow: none !important;
    background-image: none !important;
}

.faq-numeria .faq-item-inner .wpb_wrapper u,
.faq-numeria .faq-item-inner .faq-answer u {
    text-decoration: none !important;
}

/* ============================================================
 * État ouvert
 * ============================================================ */
.faq-numeria .toggle.open,
.faq-numeria .toggle.active,
.faq-numeria .toggle:has(.toggle-heading[aria-expanded="true"]) {
    background: var(--faq-color-primary);
    border-color: var(--faq-color-primary) !important;
    overflow: hidden;
    box-shadow: 0 10px 28px rgba(0, 0, 0, 0.12);
}

.faq-numeria .toggle.open:hover,
.faq-numeria .toggle.active:hover,
.faq-numeria .toggle:has(.toggle-heading[aria-expanded="true"]):hover {
    transform: none;
}

.faq-numeria .toggle.open>.toggle-title a .faq-question,
.faq-numeria .toggle.active>.toggle-title a .faq-question,
.faq-numeria .toggle:has(.toggle-heading[aria-expanded="true"])>.toggle-title a .faq-question {
    color: var(--faq-color-white);
    font-weight: 700;
    text-transform: none !important;
}

.faq-numeria .toggle.open .faq-icon--inactive,
.faq-numeria .toggle.active .faq-icon--inactive,
.faq-numeria .toggle:has(.toggle-heading[aria-expanded="true"]) .faq-icon--inactive {
    opacity: 0;
    transform: rotate(90deg);
}

.faq-numeria .toggle.open .faq-icon--active,
.faq-numeria .toggle.active .faq-icon--active,
.faq-numeria .toggle:has(.toggle-heading[aria-expanded="true"]) .faq-icon--active {
    opacity: 1;
    transform: rotate(90deg);
}

.faq-numeria .toggle.open .faq-item-inner,
.faq-numeria .toggle.active .faq-item-inner,
.faq-numeria .toggle:has(.toggle-heading[aria-expanded="true"]) .faq-item-inner {
    max-height: 9999px;
    opacity: 1;
    transform: translateY(0);
    overflow: visible;
}

/* ============================================================
 * Focus accessibilité
 * ============================================================ */
.faq-numeria .toggle>.toggle-title a.toggle-heading:focus-visible {
    outline: 2px solid var(--faq-color-accent);
    outline-offset: 4px;
}

/* ============================================================
 * Reduced motion
 * ============================================================ */
@media (prefers-reduced-motion: reduce) {

    .faq-numeria .toggle,
    .faq-numeria .toggle .faq-item-inner,
    .faq-numeria .faq-icon {
        transition: none !important;
    }
}

/* ============================================================
 * Responsive ≤ 1300px
 * ============================================================ */
@media screen and (max-width: 1300px) {

    .faq-numeria .faq-item-inner .wpb_wrapper p,
    .faq-numeria .faq-item-inner .faq-answer p,
    .faq-numeria .faq-item-inner .faq-answer li {
        padding-right: 30px !important;
    }
}

/* ============================================================
 * Responsive ≤ 1000px
 * ============================================================ */
@media screen and (max-width: 1000px) {
    .faq-numeria {
        margin-inline: 0;
        max-width: 100%;
        gap: 16px;
    }

    .faq-numeria .toggle>.toggle-title,
    .faq-numeria .toggle>.toggle-title * {
        text-align: left !important;
    }

    .faq-numeria .toggle {
        padding: 26px !important;
    }

    .faq-numeria .toggle>.toggle-title a .faq-question {
        font-size: 20px !important;
        line-height: 28px !important;
    }

    .faq-numeria .faq-item-inner .wpb_wrapper p,
    .faq-numeria .faq-item-inner .faq-answer p,
    .faq-numeria .faq-item-inner .faq-answer li {
        font-size: 17px !important;
        line-height: 27px !important;
        padding-right: 0 !important;
    }
}

/* ============================================================
 * Responsive ≤ 690px
 * ============================================================ */
@media screen and (max-width: 690px) {
    .faq-numeria .toggle {
        padding: 22px 20px !important;
    }

    .faq-numeria .toggle>.toggle-title a {
        gap: 12px;
    }

    .faq-numeria .toggle>.toggle-title a .faq-question {
        font-size: 18px !important;
        line-height: 26px !important;
    }

    .faq-numeria .faq-item-inner .wpb_wrapper p,
    .faq-numeria .faq-item-inner .faq-answer p,
    .faq-numeria .faq-item-inner .faq-answer li {
        font-size: 16px !important;
        line-height: 26px !important;
    }

    .faq-numeria .faq-toggle-btn {
        width: 32px;
        height: 32px;
        flex: 0 0 32px;
    }

    .faq-numeria .faq-icon {
        width: 32px;
        height: 32px;
    }
}