/* ========================================
   MODULE FAQ — front

   La mise en page (cartes, grilles, couleurs, ombres, arrondis, colonnes
   collantes) est portée par les utilitaires MDB et global.css directement dans
   les templates. On ne garde ici que ce qui n'a AUCUN équivalent utilitaire :
   hauteurs de défilement, suggestions de recherche en surimpression, rendu du
   HTML des réponses et quelques ajustements de l'accordéon.
   ======================================== */

/* --- Liste des thèmes : hauteurs proposées en back-office ---------------- */
/* Un palier plutôt qu'une valeur libre en pixels : les templates n'ont pas le
   droit au style en ligne, la hauteur passe donc par une classe. */
.faq-scroll-sm,
.faq-scroll-md,
.faq-scroll-lg {
    overflow-y: auto;
    scrollbar-gutter: stable;
    overscroll-behavior: contain;
}

.faq-scroll-sm { max-height: min(20rem, 45vh); }
.faq-scroll-md { max-height: min(30rem, 60vh); }
.faq-scroll-lg { max-height: min(40rem, 70vh); }

/* --- Recherche et suggestions ------------------------------------------- */
/* Le champ de recherche est le point d'ancrage du panneau de suggestions. */
.faq-search {
    position: relative;
}

/* Le navigateur affiche sa propre croix sur un input[type=search] : elle double
   le bouton d'effacement et casse l'alignement dans le groupe. */
.faq-search__input::-webkit-search-cancel-button {
    display: none;
}

.faq-suggestions {
    position: absolute;
    top: calc(100% + 0.25rem);
    left: 0;
    right: 0;
    z-index: 1020;
    max-height: 22rem;
    overflow-y: auto;
    background-color: #fff;
}

/* --- Accordéon ----------------------------------------------------------- */
/* MDB pose un fond et une ombre sur l'en-tête ouvert : sur fond blanc, la carte
   paraît alors coupée en deux. */
.faq-item .accordion-button:not(.collapsed) {
    background-color: #fff;
    box-shadow: none;
    color: var(--body-text);
}

.faq-item .accordion-button:focus {
    box-shadow: none;
    outline: 2px solid rgba(var(--primary-rgb), 0.35);
    outline-offset: -2px;
}

/* L'amorce n'a plus lieu d'être une fois la réponse dépliée : elle répèterait
   les premières lignes du texte juste au-dessus. */
.faq-item .accordion-button:not(.collapsed) .faq-item__excerpt {
    display: none;
}

.faq-item__title {
    line-height: 1.35;
}

/* --- Réponses (HTML saisi en back-office) -------------------------------- */
/* TinyMCE produit des <p>, <ul>, <table>… sans classe : on les cadre ici, faute
   de pouvoir poser des utilitaires sur du contenu rédigé. */
.faq-answer > :last-child {
    margin-bottom: 0;
}

.faq-answer ul,
.faq-answer ol {
    padding-left: 1.25rem;
}

.faq-answer li + li {
    margin-top: 0.25rem;
}

.faq-answer code {
    padding: 0.15rem 0.35rem;
    border-radius: 0.25rem;
    background-color: var(--bs-light-gray);
    color: var(--bs-tertiary);
}

.faq-answer table {
    width: 100%;
    margin-bottom: 1rem;
    border-collapse: collapse;
}

.faq-answer th,
.faq-answer td {
    padding: 0.5rem 0.75rem;
    border-top: 1px solid var(--bs-light-gray);
    text-align: left;
}

.faq-answer img {
    max-width: 100%;
    height: auto;
    border-radius: 0.5rem;
}

/* --- Carte d'aide -------------------------------------------------------- */
/* Pastille ronde à taille fixe : aucun utilitaire ne fixe des dimensions. */
.faq-support-icon {
    width: 44px;
    height: 44px;
    flex-shrink: 0;
}

/* ========================================
   MODULE FAQ — écran de mise en page (admin)
   ======================================== */

/* La poignée de glissement : le curseur est le seul indice qu'une carte se
   déplace, et aucun utilitaire ne le pose. */
.faq-layout-handle {
    cursor: grab;
}

.faq-layout-block:active .faq-layout-handle {
    cursor: grabbing;
}

/* Une colonne vide doit rester une cible de dépôt : sans hauteur minimale, il
   n'y a rien où lâcher le bloc. */
.faq-layout-column {
    min-height: 4rem;
}