/*
 * Section Pourquoi venir (flexible-event-pourquoi). Namespacé, dépend de
 * event-base.css (variables --event-*).
 * Typo/couleurs d'après maquette CRSW-228 (wd-project/why).
 *
 * Grille desktop (.flexible-event-pourquoi__points) et carrousel mobile
 * (.flexible-event-pourquoi__points-mobile) sont deux blocs HTML totalement
 * séparés (cf. template-parts/event/sections/pourquoi_venir.php), affichés
 * en exclusif l'un de l'autre par media query — AUCUNE classe ni logique
 * CSS commune entre les deux. Un essai précédent avec une structure Swiper
 * unique neutralisée en display:contents sur desktop a produit plusieurs
 * bugs de calcul flexbox en cascade (flex-basis calc() + gap traversant un
 * display:contents) : l'isolation complète, quitte à dupliquer le markup
 * des cartes (factorisé côté PHP via cyllene_event_pourquoi_render_point()),
 * est le choix retenu.
 */

/* Padding réduit par rapport au générique de event-base.css (80px) : cette
   section est plus dense visuellement sur la maquette. Bords latéraux
   resserrés aussi (16px au lieu des 24px génériques), propre à cette
   section — ne touche pas .flexible-event-section__inner partagé. */
.flexible-event-pourquoi.flexible-event-section {
    padding: 48px 0 !important;
}

.flexible-event-pourquoi.flexible-event-section .flexible-event-pourquoi__inner {
    padding-left: 12px !important;
    padding-right: 12px !important;
}

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

.flexible-event-pourquoi__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-pourquoi__eyebrow {
    color: var(--event-color-white);
}

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

/* 28px (pas les 40px de la maquette/description.txt) : à cette taille, le
   titre de cet événement tient sur une seule ligne dans le conteneur
   (~1176px). Écart assumé vs. la fiche technique, demandé explicitement
   ("quitte à baisser un peu la police du titre").
   text-align: left obligatoire — sinon la règle globale non scopée
   `h2 { text-align: center; }` (style/header.css) s'applique, notre règle
   ne redéfinissait jamais cette propriété. */
.flexible-event-pourquoi__title {
    font-family: var(--event-font-heading);
    font-weight: 800;
    font-size: 28px;
    line-height: 1.2;
    margin: 0 0 16px;
    color: var(--event-section-color-text, var(--event-color-text));
    text-align: left;
    white-space: nowrap;
}

.flexible-event-pourquoi__subtitle {
    font-family: var(--event-font-body);
    font-weight: 400;
    font-size: 22px;
    line-height: 1.4;
    margin: 0 0 40px;
    color: var(--event-section-color-text, var(--event-color-text));
    max-width: 900px;
}

/* ── Carte "point clé" — style partagé (contenu, pas layout de grille) ──── */

.flexible-event-pourquoi__point {
    width: 100%;
    height: 100%;
    min-height: 200px;
    background: var(--event-color-white);
    border-radius: var(--event-radius-card);
    padding: 20px;
    display: flex;
    flex-direction: column;
    gap: 12px;
    box-shadow: 0 2px 8px rgba(10, 22, 40, 0.06);
}

/* Icône + titre côte à côte sur la même ligne (pas empilés). */
.flexible-event-pourquoi__point-head {
    display: flex;
    align-items: center;
    gap: 12px;
}

.flexible-event-pourquoi__point-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    width: 44px;
    height: 44px;
    border-radius: 12px;
    background: var(--event-color-blue-light);
}

.flexible-event-pourquoi__point-icon img {
    width: 22px;
    height: 22px;
    object-fit: contain;
}

.flexible-event-pourquoi__point-title {
    margin: 0;
    font-family: var(--event-font-body);
    font-weight: 800;
    font-size: 18px;
    line-height: 1.3;
    color: var(--event-color-accent);
}

/* Le head (icône+titre) reste ancré en haut (flux normal de la colonne
   flex .point) ; seul le texte flotte au centre de l'espace restant, via
   des marges verticales auto plutôt qu'un centrage global du bloc. Générique
   (grille desktop ET carrousel mobile) — cf. min-height sur .point ci-dessus. */
.flexible-event-pourquoi__point-text {
    margin-top: auto;
    margin-bottom: auto;
    font-family: var(--event-font-body);
    font-size: 14px;
    line-height: 1.5;
    color: var(--event-color-text-muted);
}

/* ── Grille desktop/tablette ──────────────────────────────────────────── */

.flexible-event-pourquoi__points {
    display: flex;
    flex-wrap: wrap;
    gap: 24px;
    margin-bottom: 48px;
}

.flexible-event-pourquoi__points--cols-4 > .flexible-event-pourquoi__point {
    flex: 1 1 calc(25% - 18px);
    min-width: 220px;
}

.flexible-event-pourquoi__points--cols-1,
.flexible-event-pourquoi__points--cols-2,
.flexible-event-pourquoi__points--cols-3 {
    justify-content: center;
}

.flexible-event-pourquoi__points--cols-1 > .flexible-event-pourquoi__point,
.flexible-event-pourquoi__points--cols-2 > .flexible-event-pourquoi__point,
.flexible-event-pourquoi__points--cols-3 > .flexible-event-pourquoi__point {
    flex: 0 1 280px;
    min-width: 220px;
}

/* Carrousel mobile masqué hors mobile (cf. media query <768px plus bas).
   Sélecteur à 2 classes (pas juste .flexible-event-pourquoi__points-mobile) :
   un CSS tiers (swiper-custom.css) redéclare `.swiper { display: block; }`
   avec la même spécificité (0,1,0) — à égalité de spécificité c'est l'ordre
   de chargement qui décide, et ce fichier tiers se charge après le nôtre sur
   certains environnements. On force notre propre spécificité (0,2,0) pour ne
   plus dépendre de cet ordre. */
.flexible-event-pourquoi__points-mobile.swiper {
    display: none;
}

/* ── Étiquettes ───────────────────────────────────────────────────────── */

.flexible-event-pourquoi__tags {
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
}

/* Icône silhouette fixe, identique sur toutes les étiquettes (pas de champ
   ACF par item, cf. layout) : pastille via ::before + mask, comme les
   flèches CTA (assets/icon-user.svg, assets/arrow-right.svg). */
.flexible-event-pourquoi__tag {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 10px 18px;
    border-radius: 999px;
    background: var(--event-color-navy);
    color: var(--event-color-white);
    font-family: var(--event-font-body);
    font-size: 14px;
    font-weight: 500;
}

.flexible-event-pourquoi__tag::before {
    content: '';
    display: inline-block;
    width: 14px;
    height: 14px;
    flex-shrink: 0;
    -webkit-mask: url('../../assets/icon-user.svg') no-repeat center / contain;
    mask: url('../../assets/icon-user.svg') no-repeat center / contain;
    background-color: var(--event-color-white);
}

/* --event-color-navy vaut désormais la même couleur que --event-color-blue-dark
   (#002266, cf. correction de couleur "bleu foncé") : sur une section en fond
   foncé, le badge navy devient invisible (même teinte que le fond derrière).
   Sur ce fond, on bascule sur le même traitement "verre dépoli" que les
   encadrés du Hero (fond blanc semi-transparent + liseré blanc). */
.flexible-event-section--bg-dark .flexible-event-pourquoi__tag {
    background: rgba(255, 255, 255, 0.12);
    border: 1px solid rgba(255, 255, 255, 0.4);
}

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

@media (min-width: 1920px) {
    /* Conteneur élargi (1600px), synchronisé sur le Hero au même palier —
       sinon la section paraît plus étroite/plus de marge que le Hero
       au-dessus sur les très grands écrans. */
    .flexible-event-pourquoi__inner {
        max-width: 1600px;
    }

    .flexible-event-pourquoi__title {
        font-size: 36px;
    }

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

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

@media (max-width: 1199px) {
    .flexible-event-pourquoi__points--cols-4 > .flexible-event-pourquoi__point {
        flex: 1 1 calc(50% - 12px);
    }

    .flexible-event-pourquoi__title {
        font-size: 26px;
        white-space: normal;
    }

    .flexible-event-pourquoi__subtitle {
        font-size: 18px;
    }
}

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

@media (max-width: 767px) {
    /* Bascule d'affichage : grille desktop cachée, carrousel affiché. Les
       deux blocs sont indépendants, ce commutateur est la SEULE interaction
       entre eux. */
    .flexible-event-pourquoi__points {
        display: none;
    }

    .flexible-event-pourquoi__points-mobile {
        display: block;
        overflow: hidden;
        margin-bottom: 40px;
        padding-bottom: 32px;
        position: relative;
    }

    .flexible-event-pourquoi__points-mobile .swiper-wrapper {
        display: flex;
        align-items: stretch;
    }

    /* Hauteur fixe commune : le texte de chaque point clé n'a pas forcément
       la même longueur (ex. "Démo live, pas de slides" plus court que
       "Un plan de sortie chiffré, ..."), Swiper ne stabilise pas la hauteur
       du wrapper tout seul dans ce cas → sans ça, la hauteur du carrousel
       varie d'une carte à l'autre (saut visuel + pagination qui bouge). */
    .flexible-event-pourquoi__points-mobile .swiper-slide {
        display: block;
        flex: 0 0 100%;
        width: 100%;
        height: auto;
        min-height: 170px;
    }

    /* Centrage du texte + min-height de la carte : règles génériques
       (cf. .flexible-event-pourquoi__point / __point-text plus haut),
       s'appliquent déjà ici sans rien redéfinir. */

    .flexible-event-pourquoi__pagination {
        display: flex;
        justify-content: center;
        align-items: center;
        gap: 8px;
        position: absolute;
        left: 0;
        right: 0;
        bottom: 0;
    }

    .flexible-event-pourquoi__pagination .swiper-pagination-bullet {
        width: 8px;
        height: 8px;
        border-radius: 50%;
        background: var(--event-color-border);
        opacity: 1;
        margin: 0;
        cursor: pointer;
    }

    .flexible-event-pourquoi__pagination .swiper-pagination-bullet-active {
        background: var(--event-color-accent);
    }

    .flexible-event-pourquoi__title {
        font-size: 22px;
        white-space: normal;
    }

    .flexible-event-pourquoi__subtitle {
        font-size: 16px;
        margin-bottom: 24px;
    }

    /* Bloc d'étiquettes centré dans l'écran, pas collé à gauche. */
    .flexible-event-pourquoi__tags {
        justify-content: center;
    }
}