/*
 * Section Avis clients (flexible-event-avis). Namespacé, dépend de
 * event-base.css (variables --event-*). Carte de citation dupliquée-adaptée
 * de template-parts/project/sections/partials/imgcit-quote.php (CRSW-219) —
 * icône réutilisée directement (assets/images/quote-project.svg, générique,
 * pas de donnée propre au catalogue Project), CSS/JS dupliqués (isolation).
 * Pas de description.txt fournie pour cette section : typo reprise des
 * conventions déjà établies.
 */

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

.flexible-event-section--bg-dark .flexible-event-avis__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. */
.flexible-event-avis__title {
    font-family: var(--event-font-heading);
    font-weight: 800;
    font-size: 32px;
    line-height: 1.25;
    margin: 0 0 40px;
    color: var(--event-section-color-text, var(--event-color-text));
    text-align: left;
}

.flexible-event-avis__subtitle {
    font-family: var(--event-font-body);
    font-size: 18px;
    margin: 0 0 40px;
    color: var(--event-section-color-text, var(--event-color-text-muted));
}

/* ── Carte citation — partagée grille statique / carrousel ──────────────── */

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

.flexible-event-avis__card-icon {
    width: 28px;
    height: auto;
}

.flexible-event-avis__card-text {
    margin: 0;
    flex: 1 1 auto;
    min-width: 0;
    overflow-wrap: break-word;
    font-family: var(--event-font-body);
    font-size: 15px;
    line-height: 1.55;
    color: var(--event-color-text);
}

.flexible-event-avis__card-author {
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.flexible-event-avis__card-author::before {
    content: '';
    display: block;
    width: 48px;
    height: 2px;
    background: var(--event-color-accent);
    margin-bottom: 10px;
}

.flexible-event-avis__card-author-name {
    font-family: var(--event-font-body);
    font-weight: 700;
    font-size: 15px;
    color: var(--event-color-accent);
}

.flexible-event-avis__card-author-role {
    font-family: var(--event-font-body);
    font-weight: 400;
    font-size: 13px;
    color: var(--event-color-accent);
}

/* ── Grille statique (1 à 3 avis) ─────────────────────────────────────── */

.flexible-event-avis__grid {
    display: flex;
    flex-wrap: wrap;
    gap: 24px;
}

/* Carrousel mobile (cas 1-3 avis) masqué hors mobile — cf. media query
   <768px plus bas. Isolation complète vs. la grille ci-dessus, même
   principe que Pourquoi venir : aucune classe/logique CSS commune.
   Sélecteur à 2 classes (idem pourquoi-venir-flexible.css) : un CSS tiers
   (swiper-custom.css) redéclare `.swiper { display: block; }` à spécificité
   égale (0,1,0) et se charge après le nôtre sur certains environnements —
   on passe à 0,2,0 pour ne plus dépendre de l'ordre de chargement. */
.flexible-event-avis__mobile.swiper {
    display: none;
}

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

.flexible-event-avis__grid--cols-1 .flexible-event-avis__card,
.flexible-event-avis__grid--cols-2 .flexible-event-avis__card {
    flex: 0 1 340px;
}

.flexible-event-avis__grid--cols-3 .flexible-event-avis__card {
    flex: 1 1 calc(33.333% - 16px);
    min-width: 260px;
}

/* ── Carrousel (>3 avis) ──────────────────────────────────────────────── */

.flexible-event-avis--slider {
    position: relative;
    padding: 0 48px;
}

.flexible-event-avis__swiper .swiper-slide {
    height: auto;
    padding: 4px;
}

.flexible-event-avis__nav-prev,
.flexible-event-avis__nav-next {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    width: 36px;
    height: 36px;
    border-radius: 50%;
    border: 1px solid var(--event-color-border);
    background: var(--event-color-white);
    color: var(--event-color-accent);
    font-size: 20px;
    line-height: 1;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
}

.flexible-event-avis__nav-prev {
    left: 0;
}

.flexible-event-avis__nav-next {
    right: 0;
}

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

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

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

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

@media (max-width: 1199px) {
    .flexible-event-avis__grid--cols-3 .flexible-event-avis__card {
        flex: 1 1 calc(50% - 12px);
    }

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

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

@media (max-width: 767px) {
    /* Bascule d'affichage grille ↔ carrousel mobile (cas 1-3 avis). */
    .flexible-event-avis__grid {
        display: none;
    }

    .flexible-event-avis__mobile {
        display: block;
        width: 100%;
        max-width: 100%;
        overflow: hidden;
        margin-bottom: 40px;
        padding-bottom: 32px;
        position: relative;
    }

    .flexible-event-avis__mobile .swiper-wrapper {
        width: 100%;
        max-width: 100%;
        display: flex;
        align-items: stretch;
    }

    .flexible-event-avis__mobile .swiper-slide {
        display: block;
        flex: 0 0 100%;
        width: 100%;
        min-width: 0;
        height: auto;
    }

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

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

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

    .flexible-event-avis--slider {
        padding: 0 40px;
    }

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

    .flexible-event-avis__card {
        padding: 20px;
    }
}