/* ============================================================
   ELECTROO SHOP — CSS Additionnel v2.2
   Base originale v2.1 + hero images flottantes + logos paiement
   ============================================================ */

/* ── HEADER TOP — nouvelle structure gauche/droite ─────────── */
.header-top-left {
    display: flex;
    align-items: center;
    gap: var(--space-2);
    color: #94a3b8;
    font-size: var(--font-size-xs);
}
.header-top-right {
    display: flex;
    align-items: center;
    gap: var(--space-3);
    color: #94a3b8;
    font-size: var(--font-size-xs);
}
.header-top-phone {
    display: flex;
    align-items: center;
    gap: var(--space-2);
    color: #94a3b8;
    transition: color var(--transition);
    text-decoration: none;
}
.header-top-phone:hover { color: white; }
.header-top-hours { color: #64748b; }

/* ── NAV — dropdown au hover (desktop) ─────────────────────── */
@media (min-width: 769px) {
    .has-dropdown:hover > .nav-link-group + .dropdown-menu,
    .has-dropdown:hover > .dropdown-menu {
        display: block !important;
    }
    .has-dropdown > .dropdown-menu {
        display: none;
    }
}

/* ── TRUST BAR (hors hero) ──────────────────────────────────── */
.trust-bar {
    background: var(--bg-light);
    border-bottom: 1px solid var(--border);
    padding: 20px 0;
}
.trust-bar .trust-items {
    gap: var(--space-8);
}
.trust-bar .trust-item {
    color: var(--text-secondary);
}
.trust-bar .trust-item strong {
    color: var(--text-primary);
    font-size: var(--font-size-sm);
}
.trust-bar .trust-item span {
    font-size: var(--font-size-xs);
    color: var(--text-muted);
}

/* ── CATÉGORIES TICKER (défilement horizontal) ──────────────── */
.categories-ticker-wrapper {
    overflow: hidden;
    position: relative;
    padding: var(--space-4) 0 var(--space-10);
    cursor: default;
}
.categories-ticker-wrapper::before,
.categories-ticker-wrapper::after {
    content: '';
    position: absolute;
    top: 0;
    bottom: 0;
    width: 80px;
    z-index: 2;
    pointer-events: none;
}
.categories-ticker-wrapper::before {
    left: 0;
    background: linear-gradient(to right, var(--bg-white), transparent);
}
.categories-ticker-wrapper::after {
    right: 0;
    background: linear-gradient(to left, var(--bg-white), transparent);
}
.categories-ticker {
    display: flex;
    align-items: stretch;
    gap: 14px;
    width: max-content;
    will-change: transform;
}
.category-ticker-card {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 8px;
    padding: 18px 20px;
    background: white;
    border: 1.5px solid var(--border);
    border-radius: var(--radius-lg);
    text-align: center;
    min-width: 120px;
    transition: all var(--transition);
    text-decoration: none;
    flex-shrink: 0;
}
.category-ticker-card:hover {
    border-color: var(--primary);
    box-shadow: var(--shadow-md);
    transform: translateY(-3px);
}
.category-ticker-icon { font-size: 2rem; line-height: 1; }
.category-ticker-name {
    font-family: var(--font-display);
    font-size: var(--font-size-xs);
    font-weight: 600;
    color: var(--text-primary);
    line-height: 1.3;
    white-space: nowrap;
}

/* ── BRANDS TICKER (défilement horizontal) ──────────────────── */
.section-brands { background: var(--bg-light); padding: var(--space-10) 0; }
.brands-ticker-wrapper {
    overflow: hidden;
    position: relative;
    padding: var(--space-4) 0;
    cursor: default;
}
.brands-ticker-wrapper::before,
.brands-ticker-wrapper::after {
    content: '';
    position: absolute;
    top: 0;
    bottom: 0;
    width: 80px;
    z-index: 2;
    pointer-events: none;
}
.brands-ticker-wrapper::before { left: 0; background: linear-gradient(to right, var(--bg-light), transparent); }
.brands-ticker-wrapper::after  { right: 0; background: linear-gradient(to left, var(--bg-light), transparent); }
.brands-ticker { display: flex; align-items: center; gap: var(--space-6); width: max-content; will-change: transform; }
.brand-ticker-item {
    font-family: var(--font-display);
    font-size: var(--font-size-base);
    font-weight: 700;
    color: var(--text-secondary);
    padding: 10px 22px;
    background: white;
    border: 1.5px solid var(--border);
    border-radius: var(--radius-full);
    white-space: nowrap;
    flex-shrink: 0;
    transition: all var(--transition);
    cursor: default;
}
.brand-ticker-item:hover { border-color: var(--primary); color: var(--primary); }

/* ── AVIS CLIENTS ────────────────────────────────────────────── */
.section-reviews { background: var(--bg-light); }
.reviews-score {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: var(--space-2);
    margin-bottom: var(--space-8);
    padding: var(--space-6);
    background: white;
    border: 1.5px solid var(--border);
    border-radius: var(--radius-xl);
    max-width: 300px;
    margin-left: auto;
    margin-right: auto;
}
.reviews-score-number { font-family: var(--font-display); font-size: 3rem; font-weight: 800; color: var(--primary); line-height: 1; }
.reviews-score-stars  { color: var(--accent); font-size: 1.5rem; letter-spacing: 2px; }
.reviews-score-label  { font-size: var(--font-size-xs); color: var(--text-muted); margin-bottom: 0; }
.reviews-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
    gap: var(--space-5);
}
.review-card {
    background: white;
    border: 1.5px solid var(--border);
    border-radius: var(--radius-lg);
    padding: var(--space-6);
    display: flex;
    flex-direction: column;
    gap: var(--space-3);
    transition: all var(--transition);
}
.review-card:hover { border-color: var(--primary); box-shadow: var(--shadow-md); }
.review-header { display: flex; align-items: center; gap: var(--space-3); }
.review-avatar {
    width: 40px;
    height: 40px;
    border-radius: var(--radius-full);
    background: var(--primary);
    color: white;
    display: flex;
    align-items: center;
    justify-content: center;
    font-family: var(--font-display);
    font-weight: 700;
    font-size: var(--font-size-base);
    flex-shrink: 0;
}
.review-meta  { flex: 1; }
.review-name  { display: block; font-size: var(--font-size-sm); font-weight: 600; color: var(--text-primary); }
.review-stars { color: var(--accent); font-size: var(--font-size-sm); letter-spacing: 1px; }
.review-verified { font-size: var(--font-size-xs); color: var(--success); font-weight: 600; white-space: nowrap; }
.review-comment { font-size: var(--font-size-sm); color: var(--text-secondary); line-height: 1.7; font-style: italic; margin: 0; }
.review-date  { font-size: var(--font-size-xs); color: var(--text-muted); }

/* ── BANDEAU AVANT FOOTER ───────────────────────────────────── */
.section-bottom-bar { background: var(--secondary); padding: var(--space-8) 0; }
.bottom-bar-items {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: var(--space-12);
    flex-wrap: wrap;
}
.bottom-bar-item { display: flex; flex-direction: column; align-items: center; gap: var(--space-2); color: white; text-align: center; }
.bottom-bar-icon { font-size: 2rem; }
.bottom-bar-item strong { font-family: var(--font-display); font-size: var(--font-size-sm); font-weight: 600; }

/* ── NAV LINK ACCOUNT ────────────────────────────────────────── */
.nav-link--account { background: rgba(255,255,255,.15); border-radius: var(--radius-sm); margin-left: var(--space-2); }
.nav-link--account:hover { background: rgba(255,255,255,.25); }

/* ── HERO BULLETS & SOCIAL PROOF ───────────────────────────── */
.hero-bullets { display: flex; flex-direction: column; gap: 8px; margin-bottom: 24px; padding: 0; list-style: none; }
.hero-bullets li { display: flex; align-items: center; gap: 8px; font-size: var(--font-size-base); color: rgba(255,255,255,.85); }
.hero-bullets li span { color: #34d399; font-weight: 700; }
.hero-social-proof { font-size: var(--font-size-sm); color: rgba(255,255,255,.65); margin-top: 12px; }

/* ── HERO 3 IMAGES FLOTTANTES ───────────────────────────────── */
.hero-images-stack { position: relative; width: 500px; height: 440px; flex-shrink: 0; }
.hero-img-card {
    position: absolute;
    background: rgba(255,255,255,.1);
    backdrop-filter: blur(10px);
    border: 1.5px solid rgba(255,255,255,.2);
    border-radius: 20px;
    padding: 14px;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 8px;
    box-shadow: 0 10px 40px rgba(0,0,0,.35);
}
.hero-img-card img { object-fit: contain; border-radius: 12px; display: block; }
.hero-img-card--1 { bottom: 0; left: 0; width: 240px; z-index: 3; animation: heroFloat1 4s ease-in-out infinite; }
.hero-img-card--1 img { width: 210px; height: 210px; }
.hero-img-card--2 { top: 0; right: 0; width: 220px; z-index: 2; animation: heroFloat2 3.5s ease-in-out infinite; animation-delay: .7s; }
.hero-img-card--2 img { width: 190px; height: 190px; }
.hero-img-card--3 { top: 120px; left: 220px; width: 180px; z-index: 1; animation: heroFloat3 5s ease-in-out infinite; animation-delay: 1.4s; }
.hero-img-card--3 img { width: 150px; height: 150px; }
.hero-img-badge { font-size: .62rem; font-weight: 700; padding: 3px 10px; border-radius: 999px; background: var(--primary); color: white; letter-spacing: .04em; text-transform: uppercase; white-space: nowrap; }
.hero-img-badge--accent  { background: #f59e0b; color: #0f172a; }
.hero-img-badge--success { background: #16a34a; color: white; }
.hero-discount-badge {
    position: absolute; bottom: 20px; right: 0;
    width: 76px; height: 76px; border-radius: 999px;
    background: linear-gradient(135deg, #dc2626, #ea580c);
    display: flex; flex-direction: column; align-items: center; justify-content: center;
    z-index: 4; box-shadow: 0 4px 20px rgba(220,38,38,.5);
    animation: heroFloat2 3s ease-in-out infinite;
}
.hero-discount-label { font-size: .58rem; color: rgba(255,255,255,.85); font-weight: 600; text-transform: uppercase; letter-spacing: .06em; line-height: 1; }
.hero-discount-value { font-size: .78rem; color: white; font-weight: 800; text-transform: uppercase; line-height: 1.2; }
@keyframes heroFloat1 { 0%,100%{transform:translateY(0) rotate(-1deg)} 50%{transform:translateY(-14px) rotate(-1deg)} }
@keyframes heroFloat2 { 0%,100%{transform:translateY(0) rotate(2deg)}  50%{transform:translateY(-10px) rotate(2deg)} }
@keyframes heroFloat3 { 0%,100%{transform:translateY(0) rotate(-2deg)} 50%{transform:translateY(-18px) rotate(-2deg)} }

/* ── LOGOS PAIEMENT FOOTER ──────────────────────────────────── */
.payment-logos { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.payment-logo { display: inline-flex; align-items: center; justify-content: center; border-radius: 6px; height: 30px; padding: 4px 8px; overflow: hidden; }
.payment-logo svg { height: 20px; width: auto; display: block; }
.payment-logo--virement {
    background: rgba(255,255,255,.1);
    border: 1px solid rgba(255,255,255,.2);
    color: #94a3b8;
    font-size: .72rem;
    font-weight: 600;
    gap: 5px;
    padding: 4px 10px;
    white-space: nowrap;
    height: 30px;
    display: inline-flex;
    align-items: center;
    border-radius: 6px;
}

/* ── RESPONSIVE ─────────────────────────────────────────────── */
@media (max-width: 1100px) {
    .hero-images-stack { width: 400px; height: 380px; }
    .hero-img-card--1 { width: 200px; }
    .hero-img-card--1 img { width: 170px; height: 170px; }
    .hero-img-card--2 { width: 180px; }
    .hero-img-card--2 img { width: 150px; height: 150px; }
    .hero-img-card--3 { top: 100px; left: 180px; width: 150px; }
    .hero-img-card--3 img { width: 120px; height: 120px; }
}
@media (max-width: 768px) {
    .hero-images-stack { display: none; }
    .trust-bar .trust-items { gap: var(--space-5); }
    .bottom-bar-items { gap: var(--space-6); }
    .reviews-grid { grid-template-columns: 1fr; }
}
@media (max-width: 480px) {
    .bottom-bar-items { gap: var(--space-4); }
    .bottom-bar-item strong { font-size: var(--font-size-xs); }
}