/* ===== FAQ Numeria – Styles (nouveau site) ===== */
#faq-numeria {
    --faq-border: 2px solid #f8f2ec;
    --faq-blue: #164194;
    --faq-radius: 16px;
    max-width: 895px;
    margin-inline: auto;
    float: right;
}

/* Largeur max du titre (texte de la question) */
#faq-numeria .toggle>.toggle-title a>span[itemprop="name"] {
    max-width: 682px;
}

/* Largeur max de la description (réponse) */
#faq-numeria .faq-item-inner .inner-toggle-wrap .wpb_text_column .wpb_wrapper {
    max-width: 673px;
}

/* Item (default / fermé) */
#faq-numeria .toggle {
    width: 100%;
    margin: 0 auto !important;

    display: flex;
    flex-direction: column;
    align-items: flex-start;

    padding: 35px 50px !important;

    border-radius: var(--faq-radius);
    border: var(--faq-border) !important;
    background: transparent;

    margin-bottom: 0 !important;
}

/* Espacement entre items (cartes séparées) */
#faq-numeria .toggle+.toggle {
    margin-top: 25px !important;
}

/* ---------- Header / Titre ---------- */
#faq-numeria .toggle>.toggle-title {
    margin: 0 !important;
    width: 100%;
}

#faq-numeria .toggle>.toggle-title a {
    /* typo */
    color: var(--faq-blue);
    font-family: "Public Sans";
    font-size: 20px;
    font-style: normal;
    font-weight: 400;
    line-height: 130%;
    text-transform: none;

    text-align: left;

    /* layout : question à gauche, icône à droite */
    display: flex !important;
    flex-direction: row !important;
    align-items: center !important;
    justify-content: space-between;
    gap: 50px;

    padding: 0 !important;
    margin: 0 !important;
}

/* Le texte du titre prend l'espace dispo (à gauche) */
#faq-numeria .toggle>.toggle-title a>span[itemprop="name"] {
    flex: 1 1 auto;
    order: 1;
    display: block;
}

/* Icône à droite */
#faq-numeria .faqTogglerIcon {
    flex: 0 0 auto;
    order: 2;

    width: 61px;
    height: 61px;
    display: block;
    margin: 0 !important;

    transform-origin: 50% 50%;
    transition: transform 0.35s ease;
    will-change: transform;
}

/* Rotation à l’ouverture */
#faq-numeria .toggle.open .faqTogglerIcon,
#faq-numeria .toggle.active .faqTogglerIcon,
#faq-numeria .toggle>.toggle-title a:has(.toggle-heading[aria-expanded="true"]) .faqTogglerIcon {
    transform: rotate(180deg);
}

/* Fallback si :has() non supporté */
#faq-numeria .toggle .toggle-title .toggle-heading[aria-expanded="true"] .faqTogglerIcon {
    transform: rotate(180deg);
}

/* ---------- Contenu ---------- */
#faq-numeria .faq-item-inner,
#faq-numeria .inner-toggle-wrap {
    padding: 0 !important;
    margin: 0 !important;
    width: 100%;
}

#faq-numeria .wpb_text_column .wpb_wrapper {
    width: 100%;
    max-width: 940px;
    margin: 0 !important;
    text-align: left !important;
}

/* Soulignement personnalisé pour les liens <a> dans les réponses */
#faq-numeria .faq-item-inner .wpb_wrapper u {
    text-decoration: none !important;
}

#faq-numeria .faq-item-inner .wpb_wrapper a {
    color: #fff !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: #fff !important;
    text-decoration-line: underline !important;
    text-decoration-color: #f5c15e !important;

    border-bottom: 0 !important;
    box-shadow: none !important;
    background-image: none !important;
}

/* ---------- Animation ouverture/fermeture ---------- */
#faq-numeria .toggle .faq-item-inner {
    max-height: 0;
    overflow: hidden;
    opacity: 0;
    transform: translateY(-6px);
    transition:
        max-height 0.35s ease,
        opacity 0.25s linear,
        transform 0.35s ease;
    will-change: max-height, opacity, transform;
}

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

/* ---------- État ouvert (open) ---------- */
#faq-numeria .toggle.open,
#faq-numeria .toggle.active,
#faq-numeria .toggle:has(.toggle-heading[aria-expanded="true"]) {
    background: var(--faq-blue);
    padding: 35px 50px 45px 50px !important;
    gap: 25px;
}

/* Titre en blanc quand ouvert */
#faq-numeria .toggle.open>.toggle-title a,
#faq-numeria .toggle.active>.toggle-title a,
#faq-numeria .toggle:has(.toggle-heading[aria-expanded="true"])>.toggle-title a {
    color: #fff;
    font-weight: 500;
}

/* Texte réponse en blanc quand ouvert */
#faq-numeria .toggle .faq-item-inner .wpb_wrapper p,
#faq-numeria .toggle.open .faq-item-inner .wpb_wrapper p,
#faq-numeria .toggle.active .faq-item-inner .wpb_wrapper p,
#faq-numeria .toggle:has(.toggle-heading[aria-expanded="true"]) .faq-item-inner .wpb_wrapper p {
    color: #fff !important;
}

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

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

/* ---------- Responsive ---------- */
@media screen and (max-width: 1300px) {
    #faq-numeria .toggle>.toggle-title a {
        font-size: 19px;
    }
}

@media screen and (max-width: 1000px) {
    #faq-numeria .toggle>.toggle-title a {
        font-size: 18px;
    }
}

@media screen and (max-width: 690px) {
    #faq-numeria .toggle>.toggle-title a {
        font-size: 17px;
    }

    #faq-numeria .toggle {
        padding: 28px 24px !important;
    }

    #faq-numeria .toggle.open,
    #faq-numeria .toggle.active,
    #faq-numeria .toggle:has(.toggle-heading[aria-expanded="true"]) {
        padding: 28px 24px 34px 24px !important;
    }

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

    #faq-numeria .faqTogglerIcon {
        width: 48px;
        height: 48px;
    }
}