/* =====================================================================
 * SOS Pare-Brise+ — Widget Avis Google (v1.4.0)
 * Charte : navy #21326a · jaune #ffcc2b/#ffc40c · bleu lien #2aa9e0
 * Police : Outfit (heritee du theme). Typos calees sur la maquette Figma.
 * ===================================================================== */

.sospb-avis {
    --navy: #21326a;
    --jaune: #ffcc2b;
    --jaune-d: #ffc40c;
    --bleu: #2aa9e0;
    --gris: #6b7280;
    --surface: #f6f8fc;
    --radius: 18px;
    position: relative;            /* ancrage de la pastille en mobile */
    font-family: "Outfit", sans-serif;
    color: var(--navy);
}
.sospb-avis *,
.sospb-avis *::before,
.sospb-avis *::after { box-sizing: border-box; }

.sospb-avis__notice {
    padding: 16px 20px;
    border: 1px dashed #c3ccdd;
    border-radius: 10px;
    background: var(--surface);
    color: var(--gris);
    font-size: 14px;
}

/* --- Titre (Outfit 900) --- */
.sospb-avis__titre {
    font-weight: 900;
    font-size: clamp(24px, 2.4vw, 30px);
    line-height: 1.2;
    margin: 0 0 26px;
}
.sospb-avis__titre .titre-accent { color: var(--jaune-d); }

/* --- En-tete : surtitre (cyan, capitales espacees) + titre --- */
.sospb-avis__entete { margin: 0 0 22px; }
.sospb-avis__surtitre {
    margin: 0 0 8px;
    font-weight: 700;
    font-size: 14px;
    letter-spacing: .14em;
    text-transform: uppercase;
    color: var(--bleu);
}
.sospb-avis__entete .sospb-avis__titre { margin: 0; }

/* =====================================================================
 * Carte resume : la HAUTEUR est definie par la colonne texte.
 * La mascotte s'adapte a cette hauteur (height %), est ancree en haut
 * et debordee/coupee par overflow:hidden. La medaille est positionnee
 * DANS la figure (= taille exacte de la mascotte) : elle reste calee
 * sur la main et grossit/retrecit avec le bonhomme.
 * ===================================================================== */
.sospb-avis__resume {
    position: relative;
    display: flex;
    align-items: stretch;
    gap: 28px;                     /* plus d'air entre mascotte et texte */
    background: var(--surface);
    border-radius: var(--radius);
    padding: 24px 32px 0;          /* pas de padding bas : la mascotte touche le bord */
    overflow: hidden;
    margin-bottom: 28px;
    min-height: 230px;
}

/* Colonne mascotte : LARGE (contient la medaille sans deborder sur le texte).
   La mascotte est plus petite et calee a gauche -> la medaille vit dans
   l'espace a droite de la colonne, le texte demarre apres la colonne. */
.sospb-avis__mascotte-wrap {
    position: relative;
    flex: 0 0 44%;
    max-width: 44%;
    align-self: stretch;
    display: flex;
    align-items: flex-end;         /* bonhomme cale en bas */
    justify-content: flex-start;   /* mascotte a gauche */
    z-index: 2;                    /* securite si la medaille frole le texte */
}

/* Figure = mascotte (plus petite que la colonne). */
.sospb-avis__figure {
    position: relative;            /* containing block de la medaille */
    width: 62%;                    /* mascotte plus petite ; place a droite pour la medaille */
    line-height: 0;
}
.sospb-avis__mascotte {
    display: block;
    width: 100%;
    height: auto;
}

/* Medaille : top/left en % (controles Elementor) + width en cqw du figure.
   transform centre la medaille sur le point regle. */
.sospb-avis__medaille {
    position: absolute;
    width: 50%;                    /* % de la figure (= largeur colonne). Surchargeable via le controle Elementor. */
    transform: translate(-50%, -50%);
    aspect-ratio: 1 / 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 1px;
    text-align: center;
    background: #fff;
    border: 4px solid var(--jaune);
    border-radius: 50%;
    box-shadow: 0 6px 18px rgba(33, 50, 106, .18);
    padding: 7%;
    container-type: inline-size;   /* le contenu se dimensionne en cqw de la medaille */
    line-height: 1;
}
/* Chiffres : tailles en cqw de la medaille -> scalent avec elle.
   Repere maquette : note 22px pour une image ~220px => ~10cqw.
   On garde un peu plus gros ici pour la lisibilite (ajuste si besoin). */
.sospb-avis__note {
    font-weight: 800;
    font-size: 32cqw;
    color: var(--navy);
}
.sospb-avis__note-sur { font-size: 16cqw; font-weight: 700; }
.sospb-avis__count {
    font-size: 14cqw;
    font-weight: 600;
    color: var(--gris);
}
.sospb-avis__medaille .sospb-stars { font-size: 18cqw; margin: 1cqw 0; }

/* Colonne avis vedette */
.sospb-avis__featured {
    flex: 1 1 auto;
    display: flex;
    flex-direction: column;
    justify-content: center;
    padding: 16px 0;               /* centrage equilibre */
}
.sospb-avis__featured-text {
    font-weight: 700;
    font-size: clamp(18px, 1.6vw, 22px);
    line-height: 1.26;
    margin: 0 0 14px;
    color: var(--navy);
    display: -webkit-box;
    -webkit-line-clamp: 4;
    -webkit-box-orient: vertical;
    overflow: hidden;
}
.sospb-avis__featured-meta { margin: 0; }
.sospb-avis__featured-author,
.sospb-avis__featured-date {
    color: var(--bleu);
    font-weight: 400;
    font-size: clamp(16px, 1.3vw, 20px);
}

/* =====================================================================
 * Etoiles : couche grise (flux) + couche jaune (absolue, clippee).
 * Pas de width fixe : la taille vient du font-size, superposition exacte.
 * ===================================================================== */
.sospb-stars {
    position: relative;
    display: inline-block;
    line-height: 0;
    white-space: nowrap;
}
.sospb-stars__bg,
.sospb-stars__fg { display: flex; }
.sospb-stars__fg {
    position: absolute;
    top: 0;
    left: 0;
    height: 100%;
    overflow: hidden;
}
.sospb-stars__bg svg { fill: #d8dee9; }
.sospb-stars__fg svg { fill: var(--jaune-d); }
.sospb-stars svg { width: 1em; height: 1em; display: block; }

/* =====================================================================
 * Carousel : cartes CLIQUABLES (ouvrent l'avis sur Google),
 * texte clampe pour des hauteurs homogenes.
 * ===================================================================== */
.sospb-avis__carousel-wrap { position: relative; padding: 0 4px; }
.sospb-avis__swiper { overflow: hidden; }
.sospb-avis__swiper .swiper-slide { height: auto; }

.sospb-avis-card {
    height: 100%;
    background: #fff;
    border: 1px solid #eef1f7;
    border-radius: 14px;
    box-shadow: 0 4px 16px rgba(33, 50, 106, .06);
    padding: 22px 24px 18px;
    display: flex;
    flex-direction: column;
    gap: 12px;
    text-decoration: none;
    color: inherit;
    transition: box-shadow .2s, transform .2s;
}
.sospb-avis-card:hover {
    box-shadow: 0 8px 24px rgba(33, 50, 106, .12);
    transform: translateY(-2px);
}
.sospb-avis-card__top {
    display: flex;
    align-items: center;
    justify-content: space-between;
}
.sospb-avis-card__top .sospb-stars { font-size: 20px; }
.sospb-avis-card__picto { width: 34px; height: 34px; object-fit: contain; }
.sospb-avis-card__text {
    margin: 0;
    color: #3b4252;
    font-size: 15px;
    line-height: 1.5;
    flex: 1 1 auto;
    display: -webkit-box;
    -webkit-line-clamp: 6;          /* avis longs : clamp 6 lignes */
    -webkit-box-orient: vertical;
    overflow: hidden;
}
.sospb-avis-card__meta { display: flex; flex-direction: column; gap: 2px; }
.sospb-avis-card__author { font-weight: 700; color: var(--navy); font-size: 16px; }
.sospb-avis-card__date { color: var(--gris); font-size: 13px; }
.sospb-avis-card__brand {
    border-top: 1px solid #eef1f7;
    padding-top: 12px;
    display: flex;
    align-items: center;
    justify-content: space-between;
}
.sospb-avis-card__brand img { height: 22px; width: auto; display: block; }
.sospb-avis-card__more {
    font-size: 12px;
    font-weight: 600;
    color: var(--bleu);
    white-space: nowrap;
}

/* =====================================================================
 * Widget RÉSEAU : UN SEUL bloc de cartes (.sospb-avis__cards) -> jamais de doublons.
 *  - Desktop : grille 3 colonnes.
 *  - Mobile (<768) : carousel CSS natif = défilement horizontal + scroll-snap,
 *    1 carte par vue. Aucune lib (pas de Swiper), aucun JS.
 * ===================================================================== */
.sospb-avis--reseau .sospb-avis__cards-wrap { position: relative; }
.sospb-avis--reseau .sospb-avis__cards {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 24px;
}
.sospb-avis--reseau .sospb-avis__cards-item { min-width: 0; }

/* Desktop : grille 3 colonnes, pas de flèches. */
.sospb-avis--reseau .sospb-avis__nav { display: none; }

@media (max-width: 767px) {
    .sospb-avis--reseau .sospb-avis__cards {
        grid-template-columns: none;
        grid-auto-flow: column;
        grid-auto-columns: 100%;        /* 1 carte PLEINE largeur, pas d'amorce */
        gap: 16px;
        overflow-x: auto;
        scroll-snap-type: x mandatory;
        -webkit-overflow-scrolling: touch;
        scrollbar-width: none;
        padding-bottom: 6px;
    }
    .sospb-avis--reseau .sospb-avis__cards::-webkit-scrollbar { display: none; }
    .sospb-avis--reseau .sospb-avis__cards-item { scroll-snap-align: start; }
    /* Flèches (mêmes que la DA / widget centre) sur le carousel mobile. */
    .sospb-avis--reseau .sospb-avis__nav { display: block; }
    /* Plus de titre -> réserve la place de la pastille note (flottante haut-droite). */
    .sospb-avis--reseau .sospb-avis__resume { min-height: 104px; }
}

/* Pagination */
.sospb-avis__pagination { position: static; margin-top: 18px; text-align: center; }
.sospb-avis__pagination .swiper-pagination-bullet {
    width: 9px; height: 9px; background: #c3ccdd; opacity: 1; transition: background .2s;
}
.sospb-avis__pagination .swiper-pagination-bullet-active { background: var(--navy); }

/* Chevrons (style widget Offres : triangles navy CSS pur) */
.sospb-avis__nav {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    width: 30px; height: 30px;
    padding: 0; border: 0;
    background: transparent;
    cursor: pointer;
    opacity: .55;
    transition: opacity .2s;
    z-index: 5;
}
.sospb-avis__nav:hover { opacity: 1; }
.sospb-avis__nav::before {
    content: "";
    position: absolute;
    top: 50%; left: 50%;
    width: 14px; height: 14px;
    border-top: 3px solid var(--navy);
    border-right: 3px solid var(--navy);
}
.sospb-avis__nav--prev { left: -6px; }
.sospb-avis__nav--prev::before { transform: translate(-30%, -50%) rotate(-135deg); }
.sospb-avis__nav--next { right: -6px; }
.sospb-avis__nav--next::before { transform: translate(-70%, -50%) rotate(45deg); }
.sospb-avis__nav.swiper-button-disabled { opacity: .2; cursor: default; }

/* Bouton "Voir tous les avis" */
.sospb-avis__cta-wrap { margin-top: 26px; text-align: center; }
.sospb-avis__cta {
    display: inline-flex;
    align-items: center;
    gap: 12px;
    padding: 14px 28px;
    border: 2px solid var(--navy);
    border-radius: 12px;           /* coins arrondis facon maquette mobile (plus de pilule) */
    color: var(--navy);
    font-weight: 700;
    font-size: 16px;
    text-decoration: none;
    background: #fff;
    transition: background .2s, color .2s;
}
.sospb-avis__cta:hover { background: var(--navy); color: #fff; }
.sospb-avis__cta-icon { width: 20px; height: 20px; fill: currentColor; }

/* =====================================================================
 * Responsive
 * ===================================================================== */
@media (max-width: 1024px) {
    .sospb-avis__mascotte-wrap { flex-basis: 34%; max-width: 34%; }
}

/* Mobile : on respecte la maquette mobile.
   - avis vedette masque
   - mascotte masquee
   - on garde UNIQUEMENT la pastille note, flottante en haut a droite,
     qui chevauche legerement le carousel (comme la maquette). */
@media (max-width: 767px) {
    /* La pastille se cale en haut a droite du WIDGET, au niveau du titre.
       min-height = hauteur pastille -> elle tombe toujours juste, quelle que
       soit la largeur (le titre peut passer sur 1, 2 ou 3 lignes sans la decaler). */
    .sospb-avis__entete {
        position: relative;
        min-height: 96px;
        padding-right: 112px;        /* reserve la place de la pastille a droite du titre */
    }

    .sospb-avis__resume {
        display: block;
        position: static;           /* la pastille s'ancre sur .sospb-avis (racine) */
        background: transparent;    /* plus de boite grise */
        padding: 0;
        min-height: 0;
        overflow: visible;
        margin: 0;
    }

    .sospb-avis__featured { display: none; }   /* avis vedette off */
    .sospb-avis__mascotte { display: none; }   /* mascotte off (le wrap reste pour porter la pastille) */

    .sospb-avis__mascotte-wrap {
        display: block;
        position: static;
        flex: none;
        width: 100%;
        max-width: none;
        height: 0;                  /* aucun encombrement : simple ancrage */
    }
    .sospb-avis__figure {
        position: static;           /* la pastille s'ancre sur .sospb-avis__resume */
        height: auto;
        width: auto;
    }

    /* Cercle STRICT : largeur ET hauteur fixes + overflow hidden -> impossible de deformer en ovale. */
    .sospb-avis__medaille {
        position: absolute !important;
        top: 0 !important;          /* knob vertical */
        right: 6px !important;      /* knob horizontal */
        left: auto !important;
        bottom: auto !important;
        transform: none !important;
        width: 96px !important;
        height: 96px !important;
        min-height: 0 !important;
        aspect-ratio: auto !important;
        overflow: hidden;
        padding: 6%;
        container-type: normal;
        z-index: 6;                 /* au-dessus du carousel */
    }
    .sospb-avis__medaille .sospb-avis__note { font-size: 26px; }
    .sospb-avis__medaille .sospb-avis__note-sur { font-size: 13px; }
    .sospb-avis__medaille .sospb-avis__count { font-size: 10px; }
    .sospb-avis__medaille .sospb-stars { font-size: 12px; margin: 1px 0; }

    .sospb-avis__carousel-wrap { position: relative; z-index: 1; }
    .sospb-avis__nav--prev { left: -2px; }
    .sospb-avis__nav--next { right: -2px; }
}