/* ══════════════════════════════════════
   TOP RACHAT – CSS FRONTEND
══════════════════════════════════════ */
.top-rachat {
    --tr-orange:       #ff6900;
    --tr-orange-dark:  #d95700;
    --tr-orange-light: #fff3eb;
    --tr-blue:         #1E73BE;
    --tr-bg:           #f9f9f9;
    --tr-white:        #ffffff;
    --tr-text:         #1a1a1a;
    --tr-muted:        #777;
    --tr-border:       #e2e2e2;
    --tr-radius:       10px;
    --tr-shadow:       0 2px 12px rgba(0,0,0,0.08);
    --tr-shadow-hover: 0 8px 28px rgba(0,0,0,0.14);
    font-family: 'Lato','Helvetica Neue',Arial,sans-serif;
    box-sizing: border-box;
}
.top-rachat *, .top-rachat *::before, .top-rachat *::after { box-sizing: inherit; }

.top-rachat .section-header { display:flex; align-items:center; justify-content:center; flex-wrap:wrap; gap:16px; margin-bottom:16px; }
.top-rachat .tabs { display:flex; gap:8px; flex-wrap:wrap; justify-content:center; }
.top-rachat .tab { padding:8px 20px; border-radius:50px; border:2px solid var(--tr-border); background:var(--tr-white); color:var(--tr-muted); font-family:inherit; font-size:13px; font-weight:700; cursor:pointer; transition:all 0.2s; white-space:nowrap; }
.top-rachat .tab:hover { border-color:var(--tr-orange); color:var(--tr-orange); }
.top-rachat .tab.active { background:var(--tr-orange); border-color:var(--tr-orange); color:#fff; }

.top-rachat .section-divider { height:3px; background:linear-gradient(to right,var(--tr-orange) 0%,var(--tr-blue) 60%,transparent 100%); border-radius:3px; margin-bottom:24px; }

.top-rachat .slider-outer { position:relative; padding:0 58px; }
.top-rachat .slider-track { display:flex; gap:18px; overflow-x:auto; scroll-snap-type:x mandatory; -webkit-overflow-scrolling:touch; padding-bottom:4px; scrollbar-width:none; cursor:grab; }
.top-rachat .slider-track:active { cursor:grabbing; }
.top-rachat .slider-track::-webkit-scrollbar { display:none; }

.top-rachat .arrow { position:absolute; top:50%; transform:translateY(-50%); width:46px; height:46px; border-radius:50%; border:2px solid var(--tr-border); background:var(--tr-white); color:var(--tr-blue); cursor:pointer; display:flex; align-items:center; justify-content:center; z-index:10; box-shadow:var(--tr-shadow); transition:all 0.2s; font-size:20px; padding:0; }
.top-rachat .arrow:hover { background:var(--tr-blue); border-color:var(--tr-blue); color:#fff; box-shadow:var(--tr-shadow-hover); }
.top-rachat .arrow.prev { left:0; }
.top-rachat .arrow.next { right:0; }

.top-rachat .nav-bar { display:flex; align-items:center; justify-content:center; gap:14px; margin-top:22px; width:100%; }
.top-rachat .nav-btn { width:38px; height:38px; border-radius:50%; border:2px solid var(--tr-border); background:var(--tr-white); color:var(--tr-blue); cursor:pointer; display:flex; align-items:center; justify-content:center; font-size:16px; padding:0; box-shadow:var(--tr-shadow); transition:all 0.2s; flex-shrink:0; }
.top-rachat .nav-btn:hover { background:var(--tr-orange); border-color:var(--tr-orange); color:#fff; }

.top-rachat .dots-wrap { display:flex; align-items:center; gap:7px; flex-wrap:wrap; justify-content:center; max-width:320px; }
.top-rachat .dot { width:9px; height:9px; border-radius:50%; background:var(--tr-border); border:2px solid var(--tr-border); cursor:pointer; transition:all 0.25s; flex-shrink:0; padding:0; }
.top-rachat .dot.active { background:var(--tr-orange); border-color:var(--tr-orange); transform:scale(1.35); }
.top-rachat .dot:hover:not(.active) { background:var(--tr-blue); border-color:var(--tr-blue); }

.top-rachat .product-card { flex:0 0 200px; scroll-snap-align:start; background:var(--tr-white); border:1px solid var(--tr-border); border-radius:var(--tr-radius); overflow:hidden; display:flex; flex-direction:column; transition:box-shadow 0.25s,transform 0.25s,border-color 0.25s; box-shadow:var(--tr-shadow); }
.top-rachat .product-card:hover { transform:translateY(-5px); box-shadow:var(--tr-shadow-hover); border-color:var(--tr-orange); }

.top-rachat .card-img-wrap { position:relative; width:100%; height:185px; background:#fff; display:flex; align-items:center; justify-content:center; overflow:hidden; border-bottom:1px solid var(--tr-border); flex-shrink:0; }
.top-rachat .card-img { width:100%; height:100%; object-fit:contain; display:block; padding:6px; }
.top-rachat .card-img-placeholder { font-size:64px; user-select:none; }

.top-rachat .card-ribbon { position:absolute; top:10px; left:0; padding:3px 10px 3px 8px; font-size:10px; font-weight:900; letter-spacing:0.1em; text-transform:uppercase; color:#fff; border-radius:0 4px 4px 0; }
.top-rachat .card-ribbon.livre { background:var(--tr-blue); }
.top-rachat .card-ribbon.cd    { background:#8B45C6; }
.top-rachat .card-ribbon.dvd   { background:#C63A45; }

.top-rachat .card-body { padding:12px 12px 10px; flex:1; }
.top-rachat .card-title { font-size:13px; font-weight:700; line-height:1.4; color:var(--tr-text); display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden; text-align:center; margin:0; }

.top-rachat .card-footer { padding:10px 12px 13px; display:flex; align-items:center; justify-content:space-between; gap:8px; border-top:1px solid var(--tr-border); background:var(--tr-orange-light); }
.top-rachat .price-block { display:flex; flex-direction:column; line-height:1; }
.top-rachat .price-label { font-size:9px; font-weight:700; text-transform:uppercase; letter-spacing:0.12em; color:var(--tr-orange-dark); margin-bottom:2px; }
.top-rachat .price-value { font-size:21px; font-weight:900; color:var(--tr-orange); }

.top-rachat .btn-vendre { padding:8px 12px; background:var(--tr-orange); color:#fff; border:none; border-radius:6px; font-family:inherit; font-size:11px; font-weight:900; cursor:pointer; text-transform:uppercase; letter-spacing:0.06em; transition:background 0.2s,transform 0.1s; box-shadow:0 3px 10px rgba(255,105,0,0.30); white-space:nowrap; text-decoration:none; display:inline-block; }
.top-rachat .btn-vendre:hover { background:var(--tr-orange-dark); transform:scale(1.05); color:#fff; }
.top-rachat .btn-vendre:active { transform:scale(0.97); }

@media (max-width:768px) { .top-rachat .slider-outer { padding:0 4px; } .top-rachat .arrow { display:none; } }
@media (max-width:600px) { .top-rachat .product-card { flex:0 0 170px; } .top-rachat .card-img-wrap { height:150px; } }