/*
 * Base du catalogue Flexible Content "Événement" (event_sections).
 * Variables partagées par toutes les sections style/landing-event/*.css
 * (déclarer 'cyllene-event-base' en dépendance à l'enqueue).
 *
 * [MAQUETTE] : codes hex des 2 bleus, typo, spacing/grille — valeurs
 * ci-dessous provisoires en attendant les maquettes des autres sections.
 *
 * ── Convention de breakpoints (à respecter dans toutes les sections event) ──
 * CSS ne permet pas d'utiliser une custom property dans une media query,
 * donc ces valeurs sont documentées ici et à recopier en dur. Desktop-first
 * (max-width), 4 paliers nommés :
 *   - Grand écran   : @media (min-width: 1920px)   — écrans ≥24"
 *   - Petit écran   : pas de media query (styles de base) — laptops 13-15"
 *                     (~1280-1919px), c'est la cible par défaut de tout le CSS
 *   - Tablette      : @media (max-width: 1199px)    — ~768-1199px
 *   - Mobile        : @media (max-width: 767px)
 * Toujours dans cet ordre dans le fichier (du plus large au plus étroit) pour
 * que la cascade fonctionne sans avoir à combiner min-width/max-width.
 */

:root {
    --event-color-white:      #FFFFFF;
    --event-color-blue-light: #EFF6FF;
    --event-color-blue-dark:  #002266;
    --event-color-navy:       #002266;
    --event-color-text:       #0A1628;
    --event-color-text-muted: #6B7280;
    --event-color-accent:     #0066FF;
    --event-color-border:     #E5E7EB;

    /* Fonds du sélecteur "Fond de section" (cyllene_event_bg_field), dédiés
       et découplés des couleurs décoratives ci-dessus (ex. --event-color-blue-light
       est aussi réutilisée par des accents de carte dans certaines sections
       — la changer ici ne doit pas les affecter). */
    --event-section-bg-white: #F7F7F8;
    --event-section-bg-light: #DCEAFF;

    --event-radius-card: 12px;
    --event-section-padding-y: 80px;
    --event-container-max-width: 1200px;
    --event-container-padding-x: 24px;

    --event-font-heading: 'Be Vietnam Pro', sans-serif;
    --event-font-body:    'Manrope', sans-serif;
}

.flexible-event {
    font-family: var(--event-font-body);
    color: var(--event-color-text);
}

/* ── Section reset + système de fond (§2.3 du plan) ─────────────────────── */

.flexible-event-section {
    position: relative;
    padding: var(--event-section-padding-y) 0;
}

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

.flexible-event-section--bg-light {
    background: var(--event-section-bg-light);
    --event-section-color-text: var(--event-color-text);
}

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

.flexible-event-section--bg-white,
.flexible-event-section--bg-light,
.flexible-event-section--bg-dark {
    color: var(--event-section-color-text);
}

/*
 * Convention pour tout texte de section dont la couleur doit s'inverser sur
 * fond foncé (ex. titre, sous-titre) : ne JAMAIS coder `color: var(--event-color-text)`
 * en dur dans le CSS d'une section — utiliser `color: var(--event-section-color-text,
 * var(--event-color-text))` à la place. --event-section-color-text n'est
 * défini que par les 3 classes --bg-* ci-dessus ; en son absence (fallback),
 * le var() retombe sur --event-color-text (texte sombre par défaut).
 */

.flexible-event-section__inner {
    max-width: var(--event-container-max-width);
    margin: 0 auto;
    padding: 0 var(--event-container-padding-x);
}

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

@media (max-width: 767px) {
    .flexible-event-section {
        padding: calc(var(--event-section-padding-y) / 2) 0;
    }
}

/*
 * ── Formulaires CF7 (.flexible-event-form) ──────────────────────────────
 * Style générique partagé par toutes les sections qui intègrent un
 * formulaire CF7 (Hero, section Formulaire, modale CTA) : pilules + grille
 * 2 colonnes.
 *
 * Grille 2 colonnes : deux mécanismes complémentaires.
 *   1. .wpcf7-grid-row — convention à utiliser dans le gabarit CF7 fourni à
 *      l'éditeur (cf. réponse form CRSW-228) : un <div class="wpcf7-grid-row">
 *      contenant 2 <label> se met en colonnes directement via le CSS ci-dessous,
 *      sans JS. C'est le cas nominal pour les formulaires event.
 *   2. .flexible-event-form-grid / -field — reconstruction en JS
 *      (js/landing-event-modal.js, normalizeCf7Grid()) pour les formulaires
 *      CF7 existants qui n'utilisent PAS cette convention (ex. sélectionnés
 *      via cyllene_acf_project_cta_modale_form() dans une modale CTA) : leur
 *      structure HTML est hors de notre contrôle.
 */

.flexible-event-form * {
    box-sizing: border-box;
    max-width: 100%;
}

/* CF7 enveloppe automatiquement chaque <label> dans son propre <p> (wpautop) :
   les enfants directs de .wpcf7-grid-row sont donc des <p>, pas des <label>. */
.flexible-event-form .wpcf7-grid-row {
    display: flex;
    flex-wrap: wrap;
    gap: 16px;
}

.flexible-event-form .wpcf7-grid-row > p {
    margin: 0;
    flex: 1 1 calc(50% - 8px);
    min-width: 200px;
}

/* Espacement entre chaque ligne du formulaire (ligne = <p> ou .wpcf7-grid-row,
   enfants directs du <form> généré par CF7). */
.flexible-event-form form > p,
.flexible-event-form form > .wpcf7-grid-row {
    margin: 0 0 20px;
}

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

.flexible-event-form .wpcf7-form-control-wrap:has(> input[type="hidden"]) {
    display: none;
}

.flexible-event-form [data-class="wpcf7cf_group"] {
    display: none;
}

.flexible-event-form [data-class="wpcf7cf_group"]:not(.wpcf7cf-hidden) {
    display: block !important;
}

.flexible-event-form-grid {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-start;
    gap: 16px;
    width: 100%;
}

.flexible-event-form-field {
    flex: 1 1 calc(50% - 8px);
    min-width: 200px;
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.flexible-event-form-field:empty {
    display: none;
}

.flexible-event-form-field:has(select),
.flexible-event-form-field:has(textarea),
.flexible-event-form-field:has(input[type="file"]),
.flexible-event-form-field:has(.wpcf7-list-item),
.flexible-event-form-field:has([data-class="wpcf7cf_group"]) {
    flex: 1 1 100%;
}

.flexible-event-form-field:has(.wpcf7-submit) {
    flex: 0 0 auto;
    margin: 8px auto 0;
}

.flexible-event-form .wpcf7-form-control-wrap {
    display: block;
    width: 100%;
}

.flexible-event-form label {
    display: block;
    font-size: 13px;
    font-weight: 600;
    color: var(--event-color-text);
    margin-bottom: 8px;
}

.flexible-event-form input[type="text"],
.flexible-event-form input[type="email"],
.flexible-event-form input[type="tel"],
.flexible-event-form input[type="number"],
.flexible-event-form input[type="url"],
.flexible-event-form textarea,
.flexible-event-form select {
    display: block;
    width: 100%;
    background: transparent;
    border: 1px solid var(--event-color-border);
    border-radius: 20px;
    padding: 14px 16px;
    font-family: var(--event-font-body);
    font-size: 14px;
    color: var(--event-color-text);
    transition: border-color 200ms ease, box-shadow 200ms ease;
    box-sizing: border-box;
    resize: vertical;
}

.flexible-event-form textarea {
    min-height: 100px;
}

.flexible-event-form input:focus,
.flexible-event-form textarea:focus,
.flexible-event-form select:focus {
    outline: none;
    border-color: var(--event-color-accent);
    box-shadow: 0 0 0 3px rgba(0, 102, 255, 0.15);
}

.flexible-event-form .wpcf7-acceptance {
    flex: 1 1 100%;
    font-size: 13px;
    color: var(--event-color-text-muted);
    line-height: 1.5;
}

/* CF7 imbrique la case et le texte dans un <label> unique (à l'intérieur de
   .wpcf7-list-item) : c'est ce <label>, pas .wpcf7-acceptance, qu'il faut
   mettre en flex pour centrer verticalement la case sur le texte. Surcharge
   volontaire de la règle générique ".flexible-event-form label" (gras,
   display: block) : ici on veut du texte normal aligné avec la case. */
.flexible-event-form .wpcf7-acceptance label {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-bottom: 0;
    font-weight: 400;
    cursor: pointer;
}

.flexible-event-form .wpcf7-acceptance input[type="checkbox"] {
    flex-shrink: 0;
    margin: 0;
}

.flexible-event-form .wpcf7-required,
.flexible-event-form abbr[title="required"] {
    display: none;
}

/* CF7 place [submit] dans son propre <p> : centré plutôt qu'aligné à gauche par défaut. */
.flexible-event-form p:has(> .wpcf7-submit) {
    text-align: center;
}

.flexible-event-form button[type="submit"],
.flexible-event-form input[type="submit"],
.flexible-event-form .wpcf7-submit {
    /* display: flex (pas inline-flex) + margin auto : centre le bouton dans
       son bloc parent quel que soit ce parent (p, div de groupe wpcf7cf...),
       sans dépendre d'un text-align: center sur un sélecteur de parent
       précis qui ne matche pas toujours selon la structure du formulaire. */
    display: flex;
    margin: 0 auto;
    align-items: center;
    justify-content: center;
    gap: 10px;
    background: var(--event-color-accent);
    color: var(--event-color-white);
    border: none;
    border-radius: 10px;
    padding: 14px 36px;
    font-family: var(--event-font-body);
    font-weight: 600;
    font-size: 16px;
    cursor: pointer;
    transition: background 200ms ease, transform 200ms ease;
}

/* <input type="submit"> ne supporte ni ::after ni mask+background-color
   (élément remplacé, CF7 génère un <input> et non un <button>) : la seule
   flèche fiable est un background-image SVG inline pré-coloré en blanc,
   casée à droite via un padding-right dédié. */
.flexible-event-form input[type="submit"] {
    padding-right: 52px;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='19' viewBox='0 0 16 19' fill='none'%3E%3Cpath d='M13.938 14.0676L9.15202 19C7.9385 17.7436 7.94074 15.7089 9.15703 14.4554L11.7407 11.7927L13.938 14.0676Z' fill='white'/%3E%3Cpath d='M6.93747 3.9967C8.1227 2.71184 10.0919 2.66276 11.3357 3.88705L16 8.47788L15.9903 8.48834V11.6963H0C3.31192e-06 9.92156 1.39284 8.48282 3.11097 8.48282H11.4953L6.93747 3.9967Z' fill='white'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 28px center;
    background-size: 13px auto;
}

.flexible-event-form button[type="submit"]:hover,
.flexible-event-form input[type="submit"]:hover,
.flexible-event-form .wpcf7-submit:hover {
    transform: translateY(-1px);
}

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

@media (max-width: 767px) {
    .flexible-event-form-field,
    .flexible-event-form .wpcf7-grid-row > p {
        flex: 1 1 100%;
    }
}