/* =============================================================================
   FAQ Widget flottant — Mas Saint Antoine
   Bouton pill fixe en bas-droite, panneau slide-up
   z-index : 9998 (sous HBook 9999)
   ============================================================================= */

:root {
    --fw-gold:       #8B6914;
    --fw-gold-dark:  #6B5010;
    --fw-gold-bg:    #FDF8F0;
    --fw-radius:     16px;
    --fw-shadow:     0 10px 40px rgba(0,0,0,.15);
    --fw-ease-out:   cubic-bezier(.25,.46,.45,.94);
}

/* ── BOUTON FLOTTANT ──────────────────────────────────────────────────────────── */
.msa-faq-widget-btn {
    position: fixed;
    bottom: 24px;
    right: 24px;
    z-index: 9998;

    display: inline-flex;
    align-items: center;
    gap: 8px;

    padding: 14px 20px;
    border-radius: 28px;
    border: none;
    cursor: pointer;

    background: var(--fw-gold);
    color: #fff;
    font-size: 15px;
    font-weight: 500;
    line-height: 1;
    white-space: nowrap;

    box-shadow: 0 4px 12px rgba(0,0,0,.15);
    transition: transform 150ms ease, box-shadow 150ms ease;

    /* masquer le texte sur mobile — voir @media ci-dessous */
}

.msa-faq-widget-btn:hover,
.msa-faq-widget-btn:focus-visible {
    transform: scale(1.05);
    box-shadow: 0 6px 20px rgba(0,0,0,.22);
    outline: none;
}

.msa-faq-widget-btn-icon {
    font-size: 18px;
    line-height: 1;
}

.msa-faq-widget-btn-label {
    /* visible desktop, caché mobile */
}

/* ── PULSE ANIMATION (1 seule fois, contrôlée par JS) ────────────────────────── */
@keyframes msa-faq-pulse {
    0%   { transform: scale(1); }
    50%  { transform: scale(1.08); }
    100% { transform: scale(1); }
}

.msa-faq-widget-btn.is-pulsing {
    animation: msa-faq-pulse 2s ease-in-out 3;
}

/* ── PANNEAU ──────────────────────────────────────────────────────────────────── */
.msa-faq-widget-panel {
    position: fixed;
    bottom: 24px;
    right: 24px;
    z-index: 9998;

    width: 380px;
    max-height: 520px;
    border-radius: var(--fw-radius);
    background: #fff;
    box-shadow: var(--fw-shadow);
    overflow: hidden;

    display: flex;
    flex-direction: column;

    /* Fermé par défaut */
    opacity: 0;
    transform: translateY(12px) scale(.97);
    pointer-events: none;
    transition: opacity 200ms var(--fw-ease-out),
                transform 250ms var(--fw-ease-out);
}

.msa-faq-widget-panel.is-open {
    opacity: 1;
    transform: translateY(0) scale(1);
    pointer-events: auto;
}

/* ── HEADER ───────────────────────────────────────────────────────────────────── */
.msa-faq-widget-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 14px 16px;
    background: var(--fw-gold);
    color: #fff;
    flex-shrink: 0;
}

.msa-faq-widget-header span {
    font-size: 15px;
    font-weight: 600;
}

.msa-faq-widget-close {
    background: none;
    border: none;
    color: #fff;
    font-size: 18px;
    line-height: 1;
    cursor: pointer;
    padding: 4px 6px;
    border-radius: 4px;
    opacity: .85;
    transition: opacity 150ms, background 150ms;
}

.msa-faq-widget-close:hover,
.msa-faq-widget-close:focus-visible {
    opacity: 1;
    background: rgba(255,255,255,.18);
    outline: none;
}

/* ── RECHERCHE ────────────────────────────────────────────────────────────────── */
.msa-faq-widget-search {
    padding: 10px 12px;
    border-bottom: 1px solid #EDE8DC;
    flex-shrink: 0;
}

.msa-faq-widget-input {
    width: 100%;
    padding: 8px 12px;
    border: 1.5px solid #D4B76A;
    border-radius: 20px;
    font-size: .9rem;
    color: #2C2C2C;
    outline: none;
    box-sizing: border-box;
    background: var(--fw-gold-bg);
    transition: border-color 150ms;
}

.msa-faq-widget-input:focus {
    border-color: var(--fw-gold);
}

.msa-faq-widget-input::placeholder { color: #aaa; }

/* ── CONTENU SCROLLABLE ───────────────────────────────────────────────────────── */
.msa-faq-widget-content {
    overflow-y: auto;
    flex: 1 1 auto;
    padding: 8px 0 4px;
    overscroll-behavior: contain;
}

.msa-faq-widget-title {
    font-size: .8rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .04em;
    color: #8B8B8B;
    margin: 4px 12px 6px;
}

/* ── ITEMS <details> ──────────────────────────────────────────────────────────── */
.msa-faq-widget-item {
    border-bottom: 1px solid #F0EAD8;
}

.msa-faq-widget-item:last-of-type { border-bottom: none; }

.msa-faq-widget-item summary {
    list-style: none;
    padding: 10px 14px;
    font-size: .9rem;
    font-weight: 500;
    color: #2C2C2C;
    cursor: pointer;
    line-height: 1.45;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    transition: background 150ms, color 150ms;
}

.msa-faq-widget-item summary::-webkit-details-marker { display: none; }

.msa-faq-widget-item summary::after {
    content: '▾';
    font-size: .65rem;
    color: #C8A94A;
    flex-shrink: 0;
    transition: transform 200ms;
}

.msa-faq-widget-item[open] summary::after {
    transform: rotate(180deg);
}

.msa-faq-widget-item summary:hover,
.msa-faq-widget-item summary:focus-visible {
    background: var(--fw-gold-bg);
    color: var(--fw-gold);
    outline: none;
}

.msa-faq-widget-item[open] summary {
    color: var(--fw-gold);
    background: var(--fw-gold-bg);
}

/* Réponse */
.msa-faq-widget-answer {
    padding: 2px 14px 12px;
    font-size: .85rem;
    color: #444;
    line-height: 1.65;
}

.msa-faq-widget-answer p  { margin: 0 0 .5rem; }
.msa-faq-widget-answer p:last-child { margin-bottom: 0; }
.msa-faq-widget-answer ul,
.msa-faq-widget-answer ol { margin: .3rem 0 .5rem 1.1rem; padding: 0; }
.msa-faq-widget-answer li { margin-bottom: .25rem; }
.msa-faq-widget-answer strong { color: var(--fw-gold); }
.msa-faq-widget-answer a { color: var(--fw-gold); }

/* ── RÉSULTATS DE RECHERCHE ───────────────────────────────────────────────────── */
.msa-faq-widget-results { padding: 0; }

.msa-faq-widget-result-item {
    border-bottom: 1px solid #F0EAD8;
}

.msa-faq-widget-result-item summary {
    list-style: none;
    padding: 10px 14px;
    font-size: .88rem;
    font-weight: 500;
    color: #2C2C2C;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    transition: background 150ms, color 150ms;
}

.msa-faq-widget-result-item summary::-webkit-details-marker { display: none; }
.msa-faq-widget-result-item summary::after {
    content: '▾';
    font-size: .65rem;
    color: #C8A94A;
    flex-shrink: 0;
    transition: transform 200ms;
}
.msa-faq-widget-result-item[open] summary::after { transform: rotate(180deg); }
.msa-faq-widget-result-item summary:hover { background: var(--fw-gold-bg); color: var(--fw-gold); outline: none; }
.msa-faq-widget-result-item[open] summary { background: var(--fw-gold-bg); color: var(--fw-gold); }

.msa-faq-widget-result-answer {
    padding: 2px 14px 12px;
    font-size: .83rem;
    color: #444;
    line-height: 1.6;
}
.msa-faq-widget-result-answer p { margin: 0 0 .4rem; }
.msa-faq-widget-result-answer ul,
.msa-faq-widget-result-answer ol { margin: .2rem 0 .4rem 1rem; padding: 0; }
.msa-faq-widget-result-answer li { margin-bottom: .2rem; }
.msa-faq-widget-result-answer strong { color: var(--fw-gold); }

/* ── NO RESULTS ───────────────────────────────────────────────────────────────── */
.msa-faq-widget-no-results {
    padding: 16px 14px;
    font-size: .88rem;
    color: #888;
    text-align: center;
    margin: 0;
}

.msa-faq-widget-no-results a { color: var(--fw-gold); font-weight: 500; }

/* ── FOOTER CTA ───────────────────────────────────────────────────────────────── */
.msa-faq-widget-footer {
    border-top: 1px solid #EDE8DC;
    padding: 10px 12px;
    flex-shrink: 0;
}

.msa-faq-widget-cta {
    display: block;
    text-align: center;
    padding: 9px 12px;
    border-radius: 8px;
    background: var(--fw-gold);
    color: #fff;
    font-size: .88rem;
    font-weight: 600;
    text-decoration: none;
    transition: background 150ms;
}

.msa-faq-widget-cta:hover { background: var(--fw-gold-dark); }

/* ── MOBILE < 768px ───────────────────────────────────────────────────────────── */
@media (max-width: 767px) {
    /* Bouton : cercle 56px, icône seule */
    .msa-faq-widget-btn {
        bottom: 16px;
        right: 16px;
        width: 56px;
        height: 56px;
        padding: 0;
        border-radius: 50%;
        justify-content: center;
    }

    .msa-faq-widget-btn-label { display: none; }

    .msa-faq-widget-btn-icon { font-size: 22px; }

    /* Panneau : pleine largeur */
    .msa-faq-widget-panel {
        bottom: 16px;
        right: 16px;
        left: 16px;
        width: auto;
        max-height: 70vh;
    }
}