/*
 * Section Formulaire (flexible-event-formulaire). Namespacé, dépend de
 * event-base.css (variables --event-*) et du système générique
 * .flexible-event-form (formulaires CF7, cf. event-base.css).
 * Structure 2 colonnes reprise du Hero (carte formulaire toujours blanche,
 * quel que soit le fond de section choisi) mais sans le fold 100vh, propre
 * au Hero.
 */

.flexible-event-formulaire__inner {
    display: flex;
    align-items: flex-start;
    gap: 48px;
}

.flexible-event-formulaire__col-left {
    flex: 1 1 50%;
    display: flex;
    flex-direction: column;
    gap: 16px;
}

.flexible-event-formulaire__col-right {
    flex: 1 1 50%;
}

.flexible-event-formulaire__eyebrow {
    display: flex;
    align-items: center;
    gap: 8px;
    margin: 0 0 8px;
    font-family: var(--event-font-body);
    font-weight: 700;
    font-size: 16px;
    text-transform: uppercase;
    color: var(--event-color-accent);
}

.flexible-event-formulaire__eyebrow::before {
    content: '';
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: var(--event-color-accent);
    flex-shrink: 0;
}

/* Bleu accent illisible sur fond bleu foncé : bascule en blanc, comme le
   reste du texte de la section (cf. --event-section-color-text). */
.flexible-event-section--bg-dark .flexible-event-formulaire__eyebrow {
    color: var(--event-color-white);
}

.flexible-event-section--bg-dark .flexible-event-formulaire__eyebrow::before {
    background: var(--event-color-white);
}

/* text-align: left explicite — sinon la règle globale non scopée
   `h2 { text-align: center; }` (style/header.css) s'applique.
   color: la police s'inverse automatiquement en blanc si le fond de
   section choisi est "dark" (--event-section-color-text, posée par
   cyllene_event_bg_class() / event-base.css), noir par défaut sinon. */
.flexible-event-formulaire__title {
    font-family: var(--event-font-heading);
    font-weight: 800;
    font-size: 32px;
    line-height: 1.2;
    margin: 0;
    color: var(--event-section-color-text, var(--event-color-text));
    text-align: left;
}

.flexible-event-formulaire__description {
    font-family: var(--event-font-body);
    font-size: 16px;
    line-height: 1.5;
    color: var(--event-section-color-text, var(--event-color-text-muted));
}

/* font-family répété explicitement sur chaque enfant (p/li) : une règle
   globale du site ciblant directement l'élément (ex. `p { font-family: ... }`)
   l'emporte sur l'héritage depuis .description, l'hérité ne s'applique que
   si AUCUNE règle ne vise l'élément lui-même pour cette propriété. */
.flexible-event-formulaire__description p {
    margin: 0 0 4px;
    font-family: var(--event-font-body);
    color: inherit;
}

.flexible-event-formulaire__description p:last-child {
    margin-bottom: 0;
}

.flexible-event-formulaire__description ul,
.flexible-event-formulaire__description ol {
    margin: 8px 0 0;
    padding: 0;
    list-style: none;
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.flexible-event-formulaire__description li {
    position: relative;
    padding-left: 20px;
    font-family: var(--event-font-body);
    font-size: 15px;
    color: inherit;
}

.flexible-event-formulaire__description ul li::before {
    content: '';
    position: absolute;
    left: 0;
    top: 8px;
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: var(--event-color-accent);
}

/* Puces blanches sur fond foncé (le bleu accent se lit mal sur navy). */
.flexible-event-section--bg-dark .flexible-event-formulaire__description ul li::before {
    background: var(--event-color-white);
}

.flexible-event-formulaire__form-card {
    background: var(--event-color-white);
    border-radius: var(--event-radius-card);
    padding: 32px;
    box-shadow: 0 4px 24px rgba(0, 0, 0, 0.1);
}

.flexible-event-formulaire__form-placeholder {
    font-family: var(--event-font-body);
    font-size: 13px;
    color: var(--event-color-text-muted);
}

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

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

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

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

@media (max-width: 1199px) {
    .flexible-event-formulaire__inner {
        flex-direction: column;
    }

    .flexible-event-formulaire__col-left,
    .flexible-event-formulaire__col-right {
        flex: 1 1 100%;
        width: 100%;
    }

    .flexible-event-formulaire__col-right {
        max-width: 480px;
    }

    .flexible-event-formulaire__title {
        font-size: 28px;
    }
}

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

@media (max-width: 767px) {
    .flexible-event-formulaire__inner {
        gap: 32px;
    }

    .flexible-event-formulaire__col-right {
        max-width: none;
    }

    .flexible-event-formulaire__title {
        font-size: 24px;
    }

    .flexible-event-formulaire__form-card {
        padding: 20px;
    }
}