/*
 * Section FAQ (flexible-event-faq). Namespacé, dépend de event-base.css
 * (variables --event-*). Dupliquée-adaptée de style/landing-flexible/faq-flexible.css
 * (landing Sylius, CRSW-216) — isolation des catalogues, même animation
 * accordéon (grid-template-rows trick).
 */

/* text-align: left explicite — sinon la règle globale non scopée
   `h2 { text-align: center; }` (style/header.css) s'applique. Contrairement
   à l'original (centré), aligné à gauche pour rester cohérent avec le reste
   du catalogue événement. */
.flexible-event-faq__title {
    font-family: var(--event-font-heading);
    font-weight: 800;
    font-size: 32px;
    line-height: 1.2;
    margin: 0 0 32px;
    color: var(--event-section-color-text, var(--event-color-text));
    text-align: center;
}

.flexible-event-faq__list {
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.flexible-event-faq__item {
    min-height: 0;
}

/* display: block (pas flex) + chevron en position absolue : la hauteur du
   bouton dépend alors uniquement du flux normal de son texte, aucun calcul
   flexbox (align-items/min-width) ne peut plus la fausser sur plusieurs
   lignes — cause exacte non identifiée malgré vérification (span mesuré à
   la bonne hauteur, min-width:0 posé, box-sizing hérité correctement),
   donc on élimine toute la famille du problème plutôt que de continuer à
   deviner. */
.flexible-event-faq__question {
    position: relative;
    display: block;
    width: 100%;
    height: auto;
    /* appearance: none indispensable : le rendu natif du <button>
       (-webkit-appearance: button) empêche certains navigateurs de
       recalculer la hauteur pour du texte multi-lignes — la boîte reste
       dimensionnée sur 1 ligne (padding + ~1 line-height) alors que le
       texte peint déborde visuellement dessous, d'où l'effet de
       troncature/chevauchement constaté. line-height explicite car la
       règle globale non scopée `button { line-height: 1; }` (style.css)
       s'applique sinon au bouton lui-même. */
    appearance: none;
    -webkit-appearance: none;
    line-height: 1.3;
    padding: 28px 60px 28px 28px;
    background: var(--event-color-white);
    border: 1px solid var(--event-color-border);
    border-radius: 12px;
    cursor: pointer;
    text-align: left;
    transition: background-color 200ms ease, border-color 200ms ease, box-shadow 200ms ease;
}

.flexible-event-faq__question:hover {
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.08);
}

.flexible-event-faq__item.is-open .flexible-event-faq__question {
    background: var(--event-color-navy);
    border-color: var(--event-color-navy);
    box-shadow: none;
}

/* min-width: 0 indispensable : sans ça, un enfant flex garde une largeur
   minimale implicite basée sur son contenu (même piège que sur Avis
   clients) — le texte se met à déborder verticalement de sa propre boîte
   au lieu de se redimensionner correctement dans l'espace du bouton. */
.flexible-event-faq__question-text {
    min-width: 0;
    overflow-wrap: break-word;
    font-family: var(--event-font-body);
    font-weight: 600;
    font-size: 18px;
    line-height: 1.3;
    color: var(--event-color-text);
    transition: color 200ms ease;
}

.flexible-event-faq__item.is-open .flexible-event-faq__question-text {
    color: var(--event-color-white);
}

.flexible-event-faq__chevron {
    position: absolute;
    top: 50%;
    right: 28px;
    transform: translateY(-50%);
    color: var(--event-color-text);
    transition: transform 300ms ease, color 200ms ease;
}

.flexible-event-faq__item.is-open .flexible-event-faq__chevron {
    transform: translateY(-50%) rotate(180deg);
    color: var(--event-color-white);
}

/* Animation d'ouverture via max-height + overflow:hidden (méthode
   classique), pas grid-template-rows: 0fr — cette dernière ne retombait
   pas fiablement à une hauteur nulle dans ce contexte précis (réponse
   "fermée" qui empiétait quand même sur l'item suivant, y compris avec
   min-height:0 sur l'enfant), malgré son usage habituel pour ce genre
   d'accordéon. max-height à une valeur large (2000px) couvre largement
   n'importe quelle réponse réaliste. */
.flexible-event-faq__reponse {
    max-height: 0;
    overflow: hidden;
    transition: max-height 300ms ease;
}

.flexible-event-faq__item.is-open .flexible-event-faq__reponse {
    max-height: 2000px;
}

.flexible-event-faq__reponse-inner {
    padding: 0 8px 0 28px;
    transition: padding 300ms ease;
}

.flexible-event-faq__item.is-open .flexible-event-faq__reponse-inner {
    padding: 18px 8px 8px 28px;
}

.flexible-event-faq__reponse-inner p,
.flexible-event-faq__reponse-inner ul,
.flexible-event-faq__reponse-inner ol {
    font-family: var(--event-font-body);
    font-size: 15px;
    line-height: 1.6;
    color: var(--event-color-text);
    margin: 0;
}

.flexible-event-faq__reponse-inner p + p {
    margin-top: 12px;
}

/* ── Grand écran (≥24", ≥1920px) ──────────────────────────────────────── */

@media (min-width: 1920px) {
    .flexible-event-faq__inner {
        max-width: 1600px;
    }

    .flexible-event-faq__title {
        font-size: 40px;
    }
}

/* ── Tablette (~768-1199px) ───────────────────────────────────────────── */

@media (max-width: 1199px) {
    .flexible-event-faq__title {
        font-size: 28px;
    }
}

/* ── Mobile (<768px) ──────────────────────────────────────────────────── */

@media (max-width: 767px) {
    .flexible-event-faq__title {
        font-size: 24px;
    }

    .flexible-event-faq__question {
        padding: 16px 44px 16px 18px;
    }

    .flexible-event-faq__chevron {
        right: 18px;
    }

    .flexible-event-faq__question-text {
        font-size: 15px;
    }

    .flexible-event-faq__reponse-inner {
        padding: 0 8px 0 18px;
    }

    .flexible-event-faq__item.is-open .flexible-event-faq__reponse-inner {
        padding: 14px 8px 8px 18px;
    }
}