/**
 * assets/css/gains-carousel.css
 *
 * Carrousel "preuves de résultats" partagé (includes/gains_proof_carousel.php),
 * utilisé par public/index.php, public/formation.php (id=12) et
 * public/commander-compte-monetise.php.
 *
 * 2026-10-11 : même rendu que comptedejamonetise.com -- grands panneaux
 * noirs, défilement continu vers la gauche (translateX -50% sur une liste
 * dupliquée x2), bords fondus, pause au survol / au toucher (.paused posé
 * par gains-carousel.js). Plus de flèches ni de points.
 *
 * L'espacement au-dessus du carrousel reste la responsabilité de la page
 * qui l'inclut. public/communaute.php garde sa propre copie inline.
 */
.proof-viewport {
    overflow: hidden;
    position: relative;
    -webkit-mask-image: linear-gradient(90deg, transparent 0, #000 10%, #000 90%, transparent 100%);
    mask-image: linear-gradient(90deg, transparent 0, #000 10%, #000 90%, transparent 100%);
}

.proof-track {
    display: flex;
    gap: 24px;
    width: max-content;
    padding: 10px 0;
    animation: proof-scroll 60s linear infinite;
}
/* Pause au survol uniquement avec une vraie souris : sur mobile, le
   :hover reste "collé" après un toucher et bloquait le défilement. Au
   toucher, c'est gains-carousel.js qui alterne pause / reprise. */
.proof-track.paused {
    animation-play-state: paused;
}
@media (hover: hover) and (pointer: fine) {
    .proof-viewport:hover .proof-track {
        animation-play-state: paused;
    }
}
@keyframes proof-scroll {
    from { transform: translateX(0); }
    to   { transform: translateX(-50%); }
}

.proof-card {
    width: 300px;
    flex-shrink: 0;
    background: #000;
    border: 1px solid var(--border);
    border-radius: 28px;
    padding: 22px 22px 26px;
    box-shadow: 0 24px 50px -28px rgba(0, 0, 0, .9);
}
.proof-head {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-bottom: 14px;
}
.proof-av {
    width: 40px;
    height: 40px;
    border-radius: 50%;
    flex-shrink: 0;
    background: var(--accent);
    color: #14140F;
    display: flex;
    align-items: center;
    justify-content: center;
    font-family: var(--font-display);
    font-weight: 700;
    font-size: 14px;
}
.proof-tag {
    font-size: 12px;
    font-weight: 700;
    color: var(--text);
    white-space: nowrap;
    background: var(--bg-surface-2);
    border: 1px solid var(--border);
    border-radius: 6px;
    padding: 3px 8px;
}
/* Montant réel lu sur la capture, en en-tête (2026-10-11). */
.proof-amount {
    font-family: var(--font-display);
    font-size: 20px;
    font-weight: 700;
    color: #4ADE80;
    white-space: nowrap;
    letter-spacing: -0.01em;
}
.proof-shot {
    border-radius: 16px;
    overflow: hidden;
    background: #fff;
    aspect-ratio: 9 / 12;
}
.proof-shot img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: top;
    display: block;
}

@media (max-width: 640px) {
    .proof-viewport {
        -webkit-mask-image: linear-gradient(90deg, transparent 0, #000 6%, #000 94%, transparent 100%);
        mask-image: linear-gradient(90deg, transparent 0, #000 6%, #000 94%, transparent 100%);
    }
    .proof-track { gap: 14px; animation-duration: 45s; }
    .proof-card { width: 72vw; max-width: 290px; padding: 18px 16px 20px; border-radius: 24px; }
    .proof-av { width: 34px; height: 34px; font-size: 12px; }
    .proof-amount { font-size: 18px; }
    .proof-shot { border-radius: 12px; }
}

/* La règle globale prefers-reduced-motion de style.css fige l'animation :
   on laisse alors défiler à la main. */
@media (prefers-reduced-motion: reduce) {
    .proof-viewport { overflow-x: auto; }
}