/* =========================================
   HEXA ESPORT — shop.css v4
   DA cohérente avec le site (dark bleu/violet)
   ========================================= */

.shop-page { padding-top: 100px; padding-bottom: 120px; min-height: 100vh; }
.shop-container { max-width: 1200px; margin: 0 auto; padding: 0 40px; }

/* ── HERO ─────────────────────────────────── */
.shop-hero { text-align: center; padding: 60px 0 70px; border-bottom: 1px solid var(--glass-border); margin-bottom: 80px; position: relative; }
.shop-hero::after { content:''; position:absolute; bottom:-1px; left:50%; transform:translateX(-50%); width:100px; height:2px; background:var(--gradient); border-radius:2px; }
.shop-hero-tag { font-family:var(--font-display); font-size:0.75rem; letter-spacing:4px; color:var(--hexa-blue); opacity:0.7; }
.shop-hero-title { font-family:var(--font-display); font-size:clamp(3rem,7vw,5.5rem); letter-spacing:4px; color:white; line-height:1; margin:12px 0 14px; }
.shop-hero-sub { font-size:1rem; color:rgba(255,255,255,0.45); }

/* ── SECTIONS ─────────────────────────────── */
.shop-section { margin-bottom: 100px; }
.shop-section:last-child { margin-bottom: 0; }

.shop-section-title-wrap { display:flex; align-items:center; gap:20px; margin-bottom:16px; }
.shop-section-line { flex:1; height:1px; background:linear-gradient(to right,var(--glass-border),transparent); }
.shop-section-line:first-child { background:linear-gradient(to left,var(--glass-border),transparent); }
.shop-section-title { font-family:var(--font-display); font-size:1.4rem; letter-spacing:3px; color:white; white-space:nowrap; display:flex; align-items:center; gap:10px; }
.shop-section-title i { color:var(--hexa-blue); font-size:1.1rem; }
.shop-section-sub { text-align:center; font-size:0.9rem; color:rgba(255,255,255,0.5); line-height:1.7; margin-bottom:40px; }
.shop-section-sub strong { color:white; }

/* ══════════════════════════════════════════
   MAILLOTS
   ══════════════════════════════════════════ */
.jerseys-grid { display:grid; grid-template-columns:1fr 1fr; gap:24px; margin-bottom:24px; }

.jersey-card {
    background:var(--glass);
    border:1px solid var(--glass-border);
    border-radius:20px;
    overflow:hidden;
    display:flex;
    flex-direction:column;
    transition:var(--transition);
}

.jersey-card:hover { transform:translateY(-6px); border-color:rgba(0,210,255,0.2); box-shadow:0 20px 50px rgba(0,0,0,0.35); }

.jersey-img-wrap { position:relative; height:300px; overflow:hidden; background:#0a0818; }
.jersey-img { width:100%; height:100%; object-fit:cover; transition:transform 0.5s ease; display:block; }
.jersey-card:hover .jersey-img { transform:scale(1.04); }

.jersey-img-overlay {
    position:absolute; inset:0;
    background:linear-gradient(to top, rgba(8,6,18,0.9) 0%, transparent 50%);
    display:flex; align-items:flex-end; padding:20px;
}
.jersey-img-overlay span { font-family:var(--font-display); font-size:0.75rem; letter-spacing:4px; color:var(--hexa-blue); }
.jersey-img-overlay.dark span { color:var(--hexa-purple); }

.jersey-info { padding:24px; display:flex; flex-direction:column; gap:12px; flex:1; }

.jersey-tag { font-family:var(--font-display); font-size:0.65rem; letter-spacing:3px; color:var(--hexa-blue); }
.purple-tag { color:var(--hexa-purple); }

.jersey-name { font-family:var(--font-display); font-size:1.8rem; letter-spacing:2px; color:white; }
.jersey-name span { color:rgba(255,255,255,0.4); }

.jersey-desc { font-size:0.85rem; color:rgba(255,255,255,0.5); line-height:1.6; }

.jersey-features { list-style:none; display:flex; flex-direction:column; gap:5px; }
.jersey-features li { font-size:0.82rem; color:rgba(255,255,255,0.6); display:flex; align-items:center; gap:8px; }
.jersey-features li i { color:var(--hexa-blue); font-size:0.65rem; flex-shrink:0; }

.jersey-price { font-family:var(--font-display); font-size:1.8rem; letter-spacing:2px; color:white; margin-top:auto; }

.jersey-btn {
    display:flex; align-items:center; justify-content:center; gap:8px;
    padding:13px; border-radius:10px; text-decoration:none;
    font-family:var(--font-display); font-size:0.85rem; letter-spacing:2px;
    font-weight:700; text-transform:uppercase; transition:all 0.25s;
}

.jersey-btn-blue { background:linear-gradient(135deg,var(--hexa-blue),var(--hexa-purple)); color:white; box-shadow:0 4px 16px rgba(0,210,255,0.25); }
.jersey-btn-blue:hover { transform:translateY(-2px); box-shadow:0 8px 24px rgba(0,210,255,0.4); }

.jersey-btn-purple { background:linear-gradient(135deg,var(--hexa-purple),#6435c9); color:white; box-shadow:0 4px 16px rgba(157,80,187,0.25); }
.jersey-btn-purple:hover { transform:translateY(-2px); box-shadow:0 8px 24px rgba(157,80,187,0.4); }

.jersey-note { display:flex; align-items:center; gap:10px; padding:14px 18px; background:rgba(0,210,255,0.05); border:1px solid rgba(0,210,255,0.12); border-radius:10px; font-size:0.82rem; color:rgba(255,255,255,0.45); }
.jersey-note i { color:var(--hexa-blue); flex-shrink:0; }
.jersey-note strong { color:white; }

/* ══════════════════════════════════════════
   APEX LATENCY — BANNER
   ══════════════════════════════════════════ */
.apex-download-banner {
    display:flex; align-items:center; justify-content:space-between; gap:20px;
    background:linear-gradient(135deg, rgba(0,210,255,0.08), rgba(157,80,187,0.08));
    border:1px solid rgba(0,210,255,0.2);
    border-radius:14px; padding:20px 28px; margin-bottom:32px;
}

.apex-download-left { display:flex; align-items:center; gap:16px; }
.apex-icon { font-size:2rem; color:var(--hexa-blue); filter:drop-shadow(0 0 12px var(--hexa-blue)); }
.apex-download-title { font-family:var(--font-display); font-size:1.1rem; letter-spacing:2px; color:white; }
.apex-download-sub { font-size:0.78rem; color:rgba(255,255,255,0.4); margin-top:2px; }

.apex-download-btn {
    display:flex; align-items:center; gap:8px;
    padding:12px 24px; border-radius:10px; text-decoration:none;
    background:var(--gradient); color:white;
    font-family:var(--font-display); font-size:0.85rem; letter-spacing:2px;
    white-space:nowrap; transition:all 0.25s;
    box-shadow:0 4px 16px rgba(0,210,255,0.3);
}
.apex-download-btn:hover { transform:translateY(-2px); box-shadow:0 8px 24px rgba(0,210,255,0.45); }

/* ══════════════════════════════════════════
   PACKS GRID
   ══════════════════════════════════════════ */
.packs-grid   { display:grid; grid-template-columns:1fr 1fr; gap:20px; }
.packs-grid-3 { grid-template-columns:repeat(3,1fr); }

/* ── CARTE PACK ───────────────────────────── */
.pack-card {
    background:var(--glass);
    border:1px solid var(--glass-border);
    border-radius:18px;
    padding:28px 24px;
    display:flex; flex-direction:column; gap:12px;
    position:relative; transition:var(--transition);
}

.pack-card:hover { transform:translateY(-5px); border-color:rgba(0,210,255,0.2); box-shadow:0 16px 40px rgba(0,0,0,0.3); }

.pack-featured { border-color:rgba(0,210,255,0.35) !important; background:rgba(0,210,255,0.04); box-shadow:0 0 30px rgba(0,210,255,0.08); }
.pack-featured:hover { border-color:rgba(0,210,255,0.6) !important; box-shadow:0 20px 50px rgba(0,210,255,0.15) !important; }

.pack-best {
    position:absolute; top:-12px; left:50%; transform:translateX(-50%);
    background:var(--gradient); color:white;
    font-family:var(--font-display); font-size:0.65rem; letter-spacing:2px;
    padding:3px 14px; border-radius:2px; white-space:nowrap;
}

.pack-number { font-family:var(--font-display); font-size:0.65rem; letter-spacing:3px; color:rgba(255,255,255,0.25); }
.pack-name { font-family:var(--font-display); font-size:1.8rem; letter-spacing:2px; color:white; }
.pack-subtitle { font-family:var(--font-display); font-size:0.65rem; letter-spacing:3px; color:rgba(255,255,255,0.3); margin-top:-6px; }

.pack-price-wrap { display:flex; align-items:baseline; gap:8px; }
.pack-price { font-family:var(--font-display); font-size:2.8rem; letter-spacing:2px; color:var(--hexa-blue); }
.pack-price-old { font-size:0.85rem; color:rgba(255,255,255,0.25); text-decoration:line-through; }
.pack-period { font-size:0.8rem; color:rgba(255,255,255,0.35); }
.featured-price { color:var(--hexa-blue); filter:drop-shadow(0 0 10px var(--hexa-blue)); }

.pack-promo-tag { display:inline-block; background:rgba(0,210,255,0.1); border:1px solid rgba(0,210,255,0.25); color:var(--hexa-blue); font-size:0.7rem; font-weight:700; letter-spacing:2px; padding:4px 12px; border-radius:4px; width:fit-content; }
.featured-tag { background:linear-gradient(135deg,rgba(0,210,255,0.15),rgba(157,80,187,0.15)); border-color:rgba(0,210,255,0.3); }

.pack-savings { display:inline-block; background:rgba(0,210,255,0.08); border:1px solid rgba(0,210,255,0.2); color:var(--hexa-blue); font-size:0.75rem; font-weight:700; letter-spacing:1px; padding:5px 12px; border-radius:4px; width:fit-content; }
.pack-note { font-size:0.75rem; color:rgba(255,255,255,0.3); font-style:italic; }

.pack-features { list-style:none; display:flex; flex-direction:column; gap:7px; flex:1; margin:4px 0; }
.pack-features li { font-size:0.83rem; color:rgba(255,255,255,0.6); display:flex; align-items:center; gap:8px; border-bottom:1px solid rgba(255,255,255,0.04); padding-bottom:6px; }
.pack-features li:last-child { border-bottom:none; padding-bottom:0; }
.pack-features li i { color:var(--hexa-blue); font-size:0.6rem; flex-shrink:0; }

.pack-order-btn {
    display:flex; align-items:center; justify-content:center; gap:8px;
    padding:13px; border:none; border-radius:10px; cursor:pointer;
    font-family:var(--font-display); font-size:0.9rem; letter-spacing:2px;
    text-transform:uppercase; transition:all 0.25s; width:100%;
    background:rgba(255,255,255,0.06); border:1px solid rgba(255,255,255,0.1); color:rgba(255,255,255,0.5);
}
.pack-order-btn:hover { background:rgba(255,255,255,0.1); color:white; border-color:rgba(255,255,255,0.2); }

.featured-btn { background:var(--gradient); color:white; border:none; box-shadow:0 4px 20px rgba(0,210,255,0.3); }
.featured-btn:hover { transform:translateY(-2px); box-shadow:0 8px 28px rgba(0,210,255,0.45); background:var(--gradient); color:white; border:none; }

/* ── COACHING ─────────────────────────────── */
.coach-profile { display:flex; align-items:center; gap:20px; padding:20px 24px; background:var(--glass); border:1px solid var(--glass-border); border-radius:16px; margin-bottom:32px; }
.coach-avatar-wrap { width:70px; height:70px; border-radius:50%; padding:2px; background:var(--gradient); flex-shrink:0; }
.coach-avatar { width:100%; height:100%; border-radius:50%; object-fit:cover; border:3px solid var(--bg-base); display:block; }
.coach-name { font-family:var(--font-display); font-size:1.4rem; letter-spacing:2px; color:white; }
.coach-role { font-size:0.78rem; color:var(--hexa-blue); letter-spacing:1px; display:block; margin-bottom:8px; }
.coach-contacts { display:flex; gap:16px; flex-wrap:wrap; }
.coach-contacts span { font-size:0.78rem; color:rgba(255,255,255,0.4); display:flex; align-items:center; gap:5px; }
.coach-contacts i { color:var(--hexa-blue); }

.coaching-card { }
.coaching-card:hover { border-color:rgba(0,210,255,0.2) !important; }
.coaching-featured { border-color:rgba(0,210,255,0.35) !important; background:rgba(0,210,255,0.04); }
.coaching-best { position:absolute; top:-12px; left:50%; transform:translateX(-50%); background:var(--gradient); color:white; font-family:var(--font-display); font-size:0.65rem; letter-spacing:2px; padding:3px 14px; border-radius:2px; white-space:nowrap; }
.coaching-number { font-family:var(--font-display); font-size:0.65rem; letter-spacing:3px; color:rgba(255,255,255,0.25); }
.coaching-pack-name { font-family:var(--font-body); font-size:1.8rem; font-weight:900; color:white; }
.coaching-pack-price { color:var(--hexa-blue); }
.coaching-features li i { color:var(--hexa-blue); }
.coaching-btn { background:rgba(255,255,255,0.04); border:1px solid rgba(255,255,255,0.1); color:rgba(255,255,255,0.45); }
.coaching-btn:hover { background:rgba(0,210,255,0.07); border-color:rgba(0,210,255,0.25); color:var(--hexa-blue); }
.coaching-featured-btn { background:var(--gradient); color:white; border:none; box-shadow:0 4px 20px rgba(0,210,255,0.3); }
.coaching-featured-btn:hover { transform:translateY(-2px); box-shadow:0 8px 28px rgba(0,210,255,0.45); background:var(--gradient); color:white; border:none; }

.coaching-footer-note { display:flex; align-items:center; gap:10px; padding:14px 18px; background:rgba(0,210,255,0.04); border:1px solid rgba(0,210,255,0.1); border-radius:10px; font-size:0.82rem; color:rgba(255,255,255,0.4); margin-top:24px; }
.coaching-footer-note i { color:var(--hexa-blue); flex-shrink:0; }
.coaching-footer-note strong { color:white; }

/* ══════════════════════════════════════════
   MODAL
   ══════════════════════════════════════════ */
.order-modal-overlay { position:fixed; inset:0; background:rgba(0,0,0,0.88); backdrop-filter:blur(12px); z-index:9999; display:flex; align-items:center; justify-content:center; padding:20px; opacity:0; pointer-events:none; transition:opacity 0.3s; }
.order-modal-overlay.active { opacity:1; pointer-events:all; }

.order-modal { background:#090715; border:1px solid rgba(0,210,255,0.15); border-radius:16px; width:100%; max-width:460px; padding:0; position:relative; transform:translateY(20px); transition:transform 0.35s cubic-bezier(0.23,1,0.32,1); overflow:hidden; }
.order-modal-overlay.active .order-modal { transform:translateY(0); }

.modal-top-bar { height:3px; background:var(--gradient); }

.modal-close { position:absolute; top:14px; right:14px; background:rgba(255,255,255,0.05); border:none; color:rgba(255,255,255,0.4); width:28px; height:28px; border-radius:6px; font-size:0.8rem; cursor:pointer; display:flex; align-items:center; justify-content:center; transition:all 0.2s; z-index:2; }
.modal-close:hover { background:rgba(255,255,255,0.1); color:white; }

.modal-header { padding:24px 28px 0; }
.modal-tag { font-family:var(--font-display); font-size:0.65rem; letter-spacing:3px; color:var(--hexa-blue); }
.modal-header h3 { font-family:var(--font-display); font-size:1.4rem; letter-spacing:2px; color:white; margin:6px 0 2px; }
.modal-header p { font-size:0.85rem; color:var(--hexa-blue); font-weight:700; }

.modal-form { padding:20px 28px 28px; display:flex; flex-direction:column; gap:14px; }
.modal-field { display:flex; flex-direction:column; gap:6px; }
.modal-field label { font-family:var(--font-display); font-size:0.65rem; letter-spacing:2px; color:rgba(255,255,255,0.4); }
.req { color:var(--hexa-blue); }
.modal-field input,
.modal-field textarea { background:rgba(255,255,255,0.04); border:1px solid rgba(255,255,255,0.08); border-radius:8px; padding:11px 14px; color:white; font-family:var(--font-body); font-size:0.9rem; outline:none; transition:border-color 0.2s; resize:vertical; width:100%; }
.modal-field input:focus,
.modal-field textarea:focus { border-color:rgba(0,210,255,0.4); background:rgba(0,210,255,0.04); }
.modal-field input::placeholder,
.modal-field textarea::placeholder { color:rgba(255,255,255,0.15); }

.modal-submit { display:flex; align-items:center; justify-content:center; gap:8px; width:100%; padding:14px; background:var(--gradient); border:none; border-radius:10px; color:white; font-family:var(--font-display); font-size:0.9rem; letter-spacing:2px; cursor:pointer; transition:all 0.25s; box-shadow:0 4px 20px rgba(0,210,255,0.3); margin-top:4px; }
.modal-submit:hover { transform:translateY(-2px); box-shadow:0 8px 28px rgba(0,210,255,0.45); }

/* ── RESPONSIVE ───────────────────────────── */
@media (max-width:900px) { .packs-grid-3 { grid-template-columns:1fr; } .jerseys-grid { grid-template-columns:1fr; } }
@media (max-width:640px) { .shop-page { padding-top:90px; } .shop-container { padding:0 20px; } .packs-grid { grid-template-columns:1fr; } .apex-download-banner { flex-direction:column; align-items:flex-start; } }