/* ========================================
   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;
}

/* --- Barre d'outils ------------------------------------------------------ */
/* Select2 prend 100 % de son parent : sans largeur posée ici, le tri s'étalerait
   ou s'écraserait selon la place laissée par le titre. Les libellés longs sont
   tronqués par Select2 lui-même. */
.faq-sort {
    width: 13rem;
}

@media (max-width: 575.98px) {
    .faq-sort {
        width: 9.5rem;
    }
}

/* « Tout déplier » calé sur le sélecteur de tri voisin (Select2, thème par
   défaut : 28 px, bordure #aaa, rayon 4 px). Un bouton MDB, même en btn-sm,
   dépasse nettement et casse l'alignement de la ligne. */
.faq-toolbar-btn {
    height: 28px;
    border: 1px solid #aaa;
    border-radius: 4px;
    transition: background-color 0.15s ease;
}

.faq-toolbar-btn:hover,
.faq-toolbar-btn:focus-visible {
    background-color: var(--bs-light-gray) !important;
}

/* --- 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;
}

/* Encadrés, cartes et colonnes rédigés avec les utilitaires MDB : leur dernier
   paragraphe ne doit pas laisser de marge sous le texte. */
.faq-answer div > :last-child {
    margin-bottom: 0;
}

/* Intertitres d'une réponse longue : la police de titre du site, en plus petit
   que le titre de la question qui les coiffe. */
.faq-answer h2,
.faq-answer h3 {
    margin: 2rem 0 0.85rem;
    font-family: 'Marcellus', serif;
    color: var(--mdb-gray-900, #212529);
    line-height: 1.3;
}

.faq-answer h2 { font-size: 1.3rem; }
.faq-answer h3 { font-size: 1.1rem; }

.faq-answer > h2:first-child,
.faq-answer > h3:first-child {
    margin-top: 0;
}

/* Étapes numérotées : pastille ronde aux couleurs du site devant chaque étape.
   Aucun utilitaire ne pose de compteur CSS. */
.faq-answer ol.faq-steps {
    counter-reset: faq-step;
    list-style: none;
    padding-left: 0;
}

.faq-answer ol.faq-steps > li {
    counter-increment: faq-step;
    position: relative;
    min-height: 2rem;
    padding-left: 3rem;
}

.faq-answer ol.faq-steps > li + li {
    margin-top: 1rem;
}

.faq-answer ol.faq-steps > li::before {
    content: counter(faq-step);
    position: absolute;
    top: 0;
    left: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 2rem;
    height: 2rem;
    border-radius: 50%;
    background-color: rgba(var(--primary-rgb, 85, 107, 47), 0.12);
    color: rgb(var(--primary-rgb, 85, 107, 47));
    font-weight: 700;
    font-size: 0.9rem;
}

/* Page dédiée à une question : lecture longue, on laisse respirer le texte. */
.faq-answer--page {
    font-size: 1.05rem;
    line-height: 1.75;
}

.faq-answer--page p,
.faq-answer--page ul,
.faq-answer--page ol {
    margin-bottom: 1.25rem;
}

/* --- 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;
}