/* =======================================================
   Vegaïa Trustpilot Slider — slider.css  v2.0
   3 cartes visibles sur desktop, 1 sur mobile
   ======================================================= */

:root {
    --vtp-green:       #00b67a;
    --vtp-green-dark:  #007a52;
    --vtp-bg:          #f9fafb;
    --vtp-card-bg:     #ffffff;
    --vtp-text:        #1a1a2e;
    --vtp-muted:       #6b7280;
    --vtp-border:      #e5e7eb;
    --vtp-shadow:      0 4px 24px rgba(0,0,0,.08);
    --vtp-radius:      16px;
    --vtp-font:        'Georgia', 'Times New Roman', serif;
    --vtp-font-ui:     'Helvetica Neue', Arial, sans-serif;
    --vtp-gap:         20px;
    --vtp-btn-size:    48px;
}

/* -------------------------------------------------------
   Wrapper
------------------------------------------------------- */
.vtp-wrapper {
    font-family:   var(--vtp-font-ui);
    background:    var(--vtp-bg);
    padding:       48px 0 40px;
    border-radius: 24px;
    position:      relative;
    max-width:     1160px;
    margin:        0 auto;
    box-sizing:    border-box;
    overflow:      visible;
}

.vtp-wrapper::before {
    content:       '';
    position:      absolute;
    inset:         0;
    border-radius: 24px;
    background:    radial-gradient(ellipse at 20% 0%,   rgba(0,182,122,.07) 0%, transparent 60%),
                   radial-gradient(ellipse at 80% 100%, rgba(0,182,122,.05) 0%, transparent 60%);
    pointer-events: none;
}

/* -------------------------------------------------------
   Zone navigation (flèches + piste)
------------------------------------------------------- */
.vtp-track-outer {
    display:       flex;
    align-items:   center;
    position:      relative;
    padding:       0 68px;
    box-sizing:    border-box;
}

/* -------------------------------------------------------
   Boutons flèches — TOUJOURS VISIBLES
------------------------------------------------------- */
.vtp-btn {
    position:      absolute;
    top:           50%;
    transform:     translateY(-50%);
    z-index:       10;
    width:         var(--vtp-btn-size);
    height:        var(--vtp-btn-size);
    border-radius: 50%;
    border:        2px solid var(--vtp-border);
    background:    var(--vtp-card-bg);
    cursor:        pointer;
    display:       flex;
    align-items:   center;
    justify-content: center;
    flex-shrink:   0;
    color:         var(--vtp-text);
    box-shadow:    0 2px 12px rgba(0,0,0,.12);
    transition:    background .2s, border-color .2s, color .2s, box-shadow .2s;
    padding:       0;
    line-height:   1;
}

.vtp-prev { left:  8px; }
.vtp-next { right: 8px; }

.vtp-btn:hover {
    background:    var(--vtp-green);
    border-color:  var(--vtp-green);
    color:         #fff;
    box-shadow:    0 4px 20px rgba(0,182,122,.35);
    transform:     translateY(-50%) scale(1.1);
}
.vtp-btn:active  { transform: translateY(-50%) scale(.94); }
.vtp-btn:focus-visible {
    outline:       3px solid var(--vtp-green);
    outline-offset: 3px;
}
.vtp-btn:disabled {
    opacity:       .3;
    cursor:        default;
    pointer-events: none;
}

.vtp-btn svg { display: block; flex-shrink: 0; }

/* -------------------------------------------------------
   Piste (overflow caché)
------------------------------------------------------- */
.vtp-track {
    flex:          1;
    overflow:      hidden;
    position:      relative;
}

/* -------------------------------------------------------
   Rail animé par JS via translateX
------------------------------------------------------- */
.vtp-rail {
    display:       flex;
    gap:           20px;
    transition:    transform .45s cubic-bezier(.4,0,.2,1);
    will-change:   transform;
    align-items:   stretch;
}

/* -------------------------------------------------------
   Slide individuel (largeur gérée par JS)
------------------------------------------------------- */
.vtp-slide {
    flex:          0 0 auto;
    display:       flex;
    box-sizing:    border-box;
}

/* -------------------------------------------------------
   Carte
------------------------------------------------------- */
.vtp-card {
    background:    var(--vtp-card-bg);
    border-radius: var(--vtp-radius);
    box-shadow:    var(--vtp-shadow);
    border:        1px solid var(--vtp-border);
    padding:       28px 26px;
    width:         100%;
    display:       flex;
    flex-direction: column;
    gap:           12px;
    transition:    box-shadow .3s, transform .3s;
}
.vtp-card:hover {
    box-shadow:    0 8px 40px rgba(0,182,122,.16);
    transform:     translateY(-3px);
}

/* En-tête */
.vtp-card-header {
    display:       flex;
    align-items:   center;
    gap:           12px;
}

.vtp-avatar {
    width:         42px;
    height:        42px;
    border-radius: 50%;
    background:    linear-gradient(135deg, var(--vtp-green), var(--vtp-green-dark));
    color:         #fff;
    font-size:     18px;
    font-weight:   700;
    display:       flex;
    align-items:   center;
    justify-content: center;
    flex-shrink:   0;
}

.vtp-meta {
    flex:          1;
    display:       flex;
    flex-direction: column;
    gap:           2px;
    min-width:     0;
}

.vtp-auteur {
    font-weight:   700;
    font-size:     .92rem;
    color:         var(--vtp-text);
    white-space:   nowrap;
    overflow:      hidden;
    text-overflow: ellipsis;
}

.vtp-date {
    font-size:     .74rem;
    color:         var(--vtp-muted);
}

.vtp-logo-tp {
    flex-shrink:   0;
    opacity:       .8;
    transition:    opacity .2s;
}
.vtp-logo-tp:hover { opacity: 1; }

/* Étoiles */
.vtp-etoiles { display: flex; gap: 2px; }

/* Titre */
.vtp-titre {
    font-family:   var(--vtp-font);
    font-size:     1rem;
    font-weight:   700;
    color:         var(--vtp-text);
    margin:        0;
    line-height:   1.3;
}

/* Texte */
.vtp-texte { margin: 0; padding: 0; border: none; flex: 1; }
.vtp-texte p {
    font-family:   var(--vtp-font);
    font-size:     .9rem;
    line-height:   1.65;
    color:         #374151;
    margin:        0;
    position:      relative;
    padding-left:  18px;
}
.vtp-texte p::before {
    content:       '\201C';
    position:      absolute;
    left:          0;
    top:           -4px;
    font-size:     1.8rem;
    color:         var(--vtp-green);
    line-height:   1;
    font-family:   Georgia, serif;
}

/* -------------------------------------------------------
   Dots
------------------------------------------------------- */
.vtp-dots {
    display:       flex;
    justify-content: center;
    gap:           8px;
    margin-top:    28px;
    flex-wrap:     wrap;
    padding:       0 16px;
}

.vtp-dot {
    width:         10px;
    height:        10px;
    border-radius: 50%;
    border:        none;
    background:    var(--vtp-border);
    cursor:        pointer;
    padding:       0;
    transition:    background .25s, width .3s;
}
.vtp-dot-active,
.vtp-dot:hover { background: var(--vtp-green); }
.vtp-dot-active { width: 24px; border-radius: 5px; }
.vtp-dot:focus-visible {
    outline:       3px solid var(--vtp-green);
    outline-offset: 3px;
}

/* -------------------------------------------------------
   Footer CTA
------------------------------------------------------- */
.vtp-footer { margin-top: 32px; text-align: center; }
.vtp-cta-trustpilot {
    display:       inline-flex;
    align-items:   center;
    gap:           10px;
    font-size:     .86rem;
    color:         var(--vtp-muted);
    text-decoration: none;
    transition:    color .2s;
}
.vtp-cta-trustpilot:hover { color: var(--vtp-green-dark); }

/* -------------------------------------------------------
   TABLET (2 cartes)
------------------------------------------------------- */
@media (max-width: 900px) {
    .vtp-wrapper     { padding: 40px 0 32px; }
    .vtp-track-outer { padding: 0 60px; }
}

/* -------------------------------------------------------
   MOBILE (1 carte — flèches toujours présentes)
------------------------------------------------------- */
@media (max-width: 600px) {
    .vtp-wrapper     { padding: 32px 0 28px; }
    .vtp-track-outer { padding: 0 52px; }

    .vtp-btn { width: 40px; height: 40px; }
    .vtp-btn svg { width: 18px; height: 18px; }
    .vtp-prev { left:  6px; }
    .vtp-next { right: 6px; }

    .vtp-card    { padding: 20px 18px; }
    .vtp-texte p { font-size: .88rem; }
}