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

:root {
    --faq-bleu-marine: #122945;
    --faq-blanc: #fff;
    --faq-beige-rose: #eddfdf;
    --faq-radius: 10px;
    --faq-padding: 30px;
    --faq-gap: 25px;
    --faq-font: "Bricolage Grotesque";
    --faq-font-size: 18px;
    --faq-line-height: 150%;
}

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

/* Améliore le scroll sur ancres (header sticky) */
.faq-numeria .toggle {
    scroll-margin-top: 120px;
}

/* ============================================================
 * Item (carte fermée / inactive)
 * ============================================================ */
.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-beige-rose) !important;
    background: transparent;

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

.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;
    text-decoration: none !important;
    gap: 16px;
}

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

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

/* ============================================================
 * Bouton toggle (icônes)
 * ============================================================ */
.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);
}

/* ============================================================
 * Séparateur slash — caché sans occuper d'espace
 * ============================================================ */
.faq-numeria .faq-slash {
    display: none;
    width: 100%;
    height: 0;
    margin: 0;
    padding: 0;
    line-height: 0;
    overflow: hidden;
}

.faq-numeria .faq-slash img {
    display: block;
    height: auto;
}

/* ============================================================
 * 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 — neutralise toute la structure 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 .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 — reset total des marges/paddings Salient */
.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 {
    padding-top: 0 !important;
    padding-bottom: 0 !important;
    padding-left: 0 !important;
    margin: 0 !important;
    margin-bottom: 0 !important;
}

/* Style texte de la réponse */
.faq-numeria .faq-item-inner .wpb_wrapper p,
.faq-numeria .faq-item-inner .faq-answer p {
    color: var(--faq-blanc) !important;
    font-family: var(--faq-font) !important;
    font-size: var(--faq-font-size) !important;
    font-style: normal !important;
    font-weight: 400 !important;
    line-height: var(--faq-line-height) !important;
    text-transform: none !important;
    text-align: left !important;
    padding-right: 50px !important;
}

/* ============================================================
 * Liens dans les réponses
 * ============================================================ */
.faq-numeria .faq-item-inner .wpb_wrapper a {
    color: var(--faq-blanc) !important;
    text-decoration-line: underline !important;
    text-decoration-style: solid !important;
    text-decoration-skip-ink: auto !important;
    text-decoration-color: #f5c15e !important;
    text-decoration-thickness: 5% !important;
    text-underline-offset: 40% !important;
    text-underline-position: from-font !important;
    border-bottom: 0 !important;
    box-shadow: none !important;
    background-image: none !important;
}

.faq-numeria .faq-item-inner .wpb_wrapper a:hover,
.faq-numeria .faq-item-inner .wpb_wrapper a:focus {
    color: var(--faq-blanc) !important;
    text-decoration-color: #f5c15e !important;
    border-bottom: 0 !important;
    box-shadow: none !important;
    background-image: none !important;
}

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

/* ============================================================
 * État OUVERT (open / active)
 * ============================================================ */
.faq-numeria .toggle.open,
.faq-numeria .toggle.active,
.faq-numeria .toggle:has(.toggle-heading[aria-expanded="true"]) {
    background: var(--faq-bleu-marine);
    overflow: hidden;
}

.faq-numeria .toggle.open .faq-slash,
.faq-numeria .toggle.active .faq-slash,
.faq-numeria .toggle:has(.toggle-heading[aria-expanded="true"]) .faq-slash {
    display: block;
    height: auto;
    overflow: visible;
    margin: 10px 0;
}

.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-blanc);
    font-weight: 500;
    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;
}

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

    .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 {
        padding-right: 30px !important;
    }
}

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

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

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

    .faq-numeria .toggle>.toggle-title a .faq-question {
        font-size: 17px !important;
    }

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

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

    .faq-numeria .toggle>.toggle-title a .faq-question {
        font-size: 16px !important;
    }

    .faq-numeria .faq-item-inner .wpb_wrapper p,
    .faq-numeria .faq-item-inner .faq-answer p {
        font-size: 15px !important;
    }

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

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