@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@400;500;600;700;800&family=DM+Sans:wght@300;400;500;600&display=swap');
/* ============================================================
   Yeyoussoda — style.css — Thème CLAIR
   Mobile (≤480px) | Tablette (481–1024px) | Desktop (≥1025px)
   ============================================================ */

:root {
    --primary:       #E8604A;
    --primary-dark:  #C94A35;
    --primary-light: #F08070;
    --dark:          #F8F5F0;
    --dark2:         #FFFFFF;
    --dark3:         #F0EBE3;
    --navy:          #2C3E50;
    --navy-dark:     #1A252F;
    --navy-mid:      #34495E;
    --navy-light:    #4A6278;
    --gray:          #7A8899;
    --gray-dark:     #4A5568;
    --light:         #F8F5F0;
    --white:         #fff;
    --text:          #1A2332;
    --text-light:    #4A5568;
    --border:        rgba(0,0,0,0.08);
    --border-dark:   rgba(0,0,0,0.15);
    --success:       #00A854;
    --orange-money:  #FF6B00;
    --paypal:        #003087;
    --card:          #1E88E5;
    --radius:        16px;
    --shadow:        0 4px 20px rgba(0,0,0,0.08);
    --shadow-lg:     0 8px 40px rgba(0,0,0,0.12);
}

/* ===== RESET ===== */
* { margin:0; padding:0; box-sizing:border-box; }
html { scroll-behavior:smooth; }
body {
    font-family:'DM Sans',sans-serif;
    background: #F8F5F0;
    color: var(--text);
    min-height:100vh;
    overflow-x:hidden;
}
h1,h2,h3,h4 { font-family:'Poppins',sans-serif; color: var(--text); }
img { max-width:100%; height:auto; display:block; }

/* ===== INPUTS GLOBAUX — THÈME CLAIR ===== */
input, select, textarea {
    color: var(--text) !important;
    background: #fff !important;
    border: 1.5px solid rgba(0,0,0,0.25) !important;
    border-radius: 12px;
    outline: none;
    transition: border-color .2s, box-shadow .2s;
}
input:hover, select:hover, textarea:hover {
    border-color: rgba(0,0,0,0.4) !important;
}
input:focus, select:focus, textarea:focus {
    border-color: var(--primary) !important;
    box-shadow: 0 0 0 3px rgba(232,96,74,0.15) !important;
}
input::placeholder, textarea::placeholder {
    color: var(--gray) !important;
}
input:-webkit-autofill,
input:-webkit-autofill:hover,
input:-webkit-autofill:focus {
    -webkit-text-fill-color: var(--text) !important;
    -webkit-box-shadow: 0 0 0px 1000px #fff inset !important;
    transition: background-color 5000s ease-in-out 0s;
}

/* ===== AUTH MODAL ===== */
.auth-modal-overlay {
    display:none; position:fixed; inset:0; z-index:300;
    background:rgba(0,0,0,0.4); backdrop-filter:blur(8px);
    align-items:center; justify-content:center; padding:20px;
}
.auth-modal-overlay.active { display:flex; animation:fadeIn .2s ease; }
@keyframes fadeIn { from{opacity:0} to{opacity:1} }
.auth-modal-inner { animation:slideUp .3s cubic-bezier(.34,1.56,.64,1); width:100%; max-width:440px; }
@keyframes slideUp { from{transform:translateY(40px);opacity:0} to{transform:translateY(0);opacity:1} }
.auth-container { width:100%; }
.auth-logo { text-align:center; margin-bottom:28px; }
.auth-logo img { display:block; max-width:120px; height:auto; margin:0 auto; border-radius:12px; }
.auth-logo .logo-text {
    font-family:'Poppins',sans-serif; font-size:40px; font-weight:800;
    background:linear-gradient(135deg,var(--primary),var(--primary-light));
    -webkit-background-clip:text; -webkit-text-fill-color:transparent;
    letter-spacing:-2px;
}
.auth-logo p { color:var(--gray); margin-top:6px; font-size:13px; }
.auth-card {
    background:#fff; border:1px solid var(--border);
    border-radius:24px; padding:32px;
    box-shadow:var(--shadow-lg); position:relative;
}
.auth-close-btn {
    position:absolute; top:16px; right:16px;
    width:32px; height:32px; background:rgba(0,0,0,0.06);
    border:none; border-radius:50%; color:var(--gray);
    cursor:pointer; font-size:16px; display:flex;
    align-items:center; justify-content:center; transition:.2s;
}
.auth-close-btn:hover { background:rgba(0,0,0,0.1); color:var(--text); }
.auth-tabs {
    display:grid; grid-template-columns:1fr 1fr;
    background:var(--dark3); border-radius:12px;
    padding:4px; margin-bottom:32px;
}
.auth-tab { padding:10px; text-align:center; border-radius:10px; cursor:pointer; font-weight:500; font-size:14px; color:var(--gray); transition:.2s; }
.auth-tab.active { background:var(--primary); color:#fff; }
.form-group { margin-bottom:20px; }
.form-group label { display:block; font-size:13px; color:var(--gray-dark); margin-bottom:8px; font-weight:500; }
.form-group input, .form-group select {
    width:100%; padding:14px 16px;
    background:#fff; border:1.5px solid var(--border-dark);
    border-radius:12px; color:var(--text); font-size:15px;
    font-family:'DM Sans',sans-serif; transition:.2s; outline:none;
    box-sizing:border-box;
}
.form-group input:focus, .form-group select:focus {
    border-color:var(--primary); background:#fff;
    box-shadow:0 0 0 3px rgba(232,96,74,0.1);
}
.form-group select option { background:#fff; color:var(--text); }
.role-selector { display:grid; grid-template-columns:1fr 1fr; gap:12px; margin-bottom:24px; }
.role-card { padding:20px 16px; background:var(--dark3); border:2px solid var(--border); border-radius:14px; cursor:pointer; text-align:center; transition:.2s; }
.role-card:hover { border-color:var(--primary-light); }
.role-card.selected { border-color:var(--primary); background:rgba(232,96,74,0.08); }
.role-card .role-icon { font-size:32px; margin-bottom:8px; }
.role-card .role-name { font-weight:600; font-size:15px; color:var(--text); }
.role-card .role-desc { font-size:12px; color:var(--gray); margin-top:4px; }
.btn-primary {
    width:100%; padding:16px; background:var(--primary);
    color:#fff; border:none; border-radius:12px;
    font-size:16px; font-weight:600; font-family:'Poppins',sans-serif;
    cursor:pointer; transition:.2s; letter-spacing:.3px;
}
.btn-primary:hover { background:var(--primary-dark); transform:translateY(-1px); box-shadow:0 4px 16px rgba(232,96,74,0.3); }
.divider { display:flex; align-items:center; gap:12px; margin:24px 0; }
.divider::before,.divider::after { content:''; flex:1; height:1px; background:var(--border); }
.divider span { color:var(--gray); font-size:13px; }
.social-btns { display:grid; grid-template-columns:1fr 1fr; gap:12px; }
.btn-social {
    padding:12px; background:#fff; border:1.5px solid var(--border-dark);
    border-radius:12px; color:var(--text); cursor:pointer; font-size:13px; font-weight:500;
    display:flex; align-items:center; justify-content:center; gap:8px; transition:.2s;
    font-family:'DM Sans',sans-serif;
}
.btn-social:hover { border-color:var(--primary); background:rgba(232,96,74,0.05); }

/* ===== NAVBAR ===== */
.navbar {
    position:sticky; top:0; z-index:100;
    background:rgba(255,255,255,0.96); backdrop-filter:blur(20px);
    border-bottom:1px solid var(--border);
    padding:0 24px; height:64px;
    display:flex; align-items:center; gap:16px;
    box-shadow:0 1px 12px rgba(0,0,0,0.06);
}
.nav-logo { font-family:'Poppins',sans-serif; font-weight:800; font-size:24px; background:linear-gradient(135deg,var(--primary),var(--primary-light)); -webkit-background-clip:text; -webkit-text-fill-color:transparent; letter-spacing:-1px; cursor:pointer; white-space:nowrap; flex-shrink:0; }
.nav-logo img { height:50px; width:auto; }
.nav-search { flex:1; max-width:520px; display:flex; align-items:center; background:var(--dark3); border:1.5px solid var(--border); border-radius:50px; overflow:hidden; transition:.2s; }
.nav-search:focus-within { border-color:var(--primary); box-shadow:0 0 0 3px rgba(232,96,74,0.1); }
.nav-search input { flex:1; padding:10px 20px; background:transparent !important; border:none !important; outline:none; color:var(--text) !important; font-size:14px; font-family:'DM Sans',sans-serif; min-width:0; box-shadow:none !important; }
.nav-search input::placeholder { color:var(--gray) !important; }
.search-btn-group { display:flex; flex-shrink:0; }
.search-icon-btn { padding:10px 12px; background:transparent !important; border:none; color:var(--gray); cursor:pointer; font-size:16px; transition:.2s; }
.search-icon-btn:hover { color:var(--primary); }
.search-submit { padding:8px 18px; background:var(--primary) !important; border:none; color:#fff !important; cursor:pointer; font-size:14px; border-radius:0 50px 50px 0; font-weight:600; transition:.2s; font-family:'Poppins',sans-serif; white-space:nowrap; }
.search-submit:hover { background:var(--primary-dark) !important; }
.nav-actions { display:flex; align-items:center; gap:10px; margin-left:auto; flex-shrink:0; }
.nav-icon-btn { position:relative; width:40px; height:40px; background:var(--dark3); border:1.5px solid var(--border); border-radius:50%; cursor:pointer; display:flex; align-items:center; justify-content:center; font-size:18px; transition:.2s; color:var(--text); flex-shrink:0; }
.nav-icon-btn:hover { border-color:var(--primary); color:var(--primary); background:rgba(232,96,74,0.06); }
.badge { position:absolute; top:-4px; right:-4px; background:var(--primary); color:#fff; font-size:10px; font-weight:700; width:18px; height:18px; border-radius:50%; display:flex; align-items:center; justify-content:center; font-family:'Poppins',sans-serif; }
.nav-avatar { width:40px; height:40px; border-radius:50%; background:linear-gradient(135deg,var(--primary),var(--primary-light)); display:flex; align-items:center; justify-content:center; font-weight:700; font-size:16px; cursor:pointer; color:#fff !important; font-family:'Poppins',sans-serif; flex-shrink:0; }
.nav-sell-btn { padding:8px 20px; background:var(--primary); border:none; color:#fff !important; border-radius:50px; font-weight:600; font-size:13px; cursor:pointer; transition:.2s; font-family:'Poppins',sans-serif; white-space:nowrap; }
.nav-sell-btn:hover { background:var(--primary-dark); box-shadow:0 4px 12px rgba(232,96,74,0.3); }

/* BARRE RECHERCHE MOBILE */
.nav-search-mobile { display:none; padding:8px 12px; background:rgba(255,255,255,0.97); border-bottom:1px solid var(--border); position:sticky; top:56px; z-index:99; }
.nav-search-mobile form { display:flex; width:100%; align-items:center; background:var(--dark3); border:1.5px solid var(--border); border-radius:50px; overflow:hidden; }
.nav-search-mobile input { flex:1; padding:9px 16px; background:transparent !important; border:none !important; outline:none; color:var(--text) !important; font-size:14px; font-family:'DM Sans',sans-serif; min-width:0; box-shadow:none !important; }
.nav-search-mobile input::placeholder { color:var(--gray) !important; }
.nav-search-mobile .search-icon-btn { padding:8px 10px; font-size:15px; }
.nav-search-mobile .search-submit { padding:8px 14px; font-size:13px; border-radius:0 50px 50px 0; background:var(--primary) !important; border:none; color:#fff !important; cursor:pointer; font-weight:600; font-family:'Poppins',sans-serif; }

/* ===== HERO ===== */
.hero { background:linear-gradient(135deg, #FFF8F5 0%, #F8F0E8 50%, #FFF5F0 100%); padding:60px 24px 40px; text-align:center; border-bottom:1px solid var(--border); }
.hero h1 { font-size:clamp(28px,5vw,64px); font-weight:800; line-height:1.1; margin-bottom:16px; letter-spacing:-2px; color:var(--text); }
.hero h1 span { background:linear-gradient(135deg,var(--primary),var(--primary-light)); -webkit-background-clip:text; -webkit-text-fill-color:transparent; }
.hero p { color:var(--gray); font-size:clamp(14px,2vw,18px); max-width:500px; margin:0 auto 32px; }
.hero-search { max-width:640px; margin:0 auto 32px; display:flex; background:#fff; border:2px solid var(--border-dark); border-radius:50px; overflow:hidden; transition:.2s; box-shadow:var(--shadow); }
.hero-search:focus-within { border-color:var(--primary); box-shadow:0 0 0 4px rgba(232,96,74,0.12); }
.hero-search input { flex:1; padding:16px 20px; background:transparent !important; border:none !important; outline:none; color:var(--text) !important; font-size:15px; font-family:'DM Sans',sans-serif; min-width:0; box-shadow:none !important; }
.hero-search input::placeholder { color:var(--gray) !important; }
.hero-search-icons { display:flex; align-items:center; padding:0 6px; gap:2px; flex-shrink:0; }
.hero-search-icons button { width:36px; height:36px; background:transparent !important; border:none; color:var(--gray); cursor:pointer; font-size:17px; border-radius:50%; transition:.2s; }
.hero-search-icons button:hover { background:rgba(232,96,74,0.1) !important; color:var(--primary); }
.hero-search-submit { margin:8px; padding:0 22px; background:var(--primary) !important; border:none; color:#fff !important; border-radius:50px; font-weight:700; font-size:14px; cursor:pointer; transition:.2s; font-family:'Poppins',sans-serif; }
.hero-search-submit:hover { background:var(--primary-dark) !important; }
.hero-tags { display:flex; flex-wrap:wrap; gap:8px; justify-content:center; margin-bottom:20px; }
.hero-tag { padding:6px 14px; background:#fff; border:1.5px solid var(--border-dark); border-radius:50px; font-size:12px; color:var(--gray-dark); cursor:pointer; transition:.2s; box-shadow:0 1px 4px rgba(0,0,0,0.05); }
.hero-tag:hover { color:var(--primary); border-color:var(--primary); background:rgba(232,96,74,0.05); }

/* ===== SECTIONS ===== */
.section { padding:40px 24px; max-width:1200px; margin:0 auto; }
.section-header { display:flex; align-items:center; justify-content:space-between; margin-bottom:24px; flex-wrap:wrap; gap:8px; }
.section-title { font-size:clamp(18px,3vw,24px); font-weight:700; color:var(--text); }
.see-all { color:var(--primary); font-size:14px; cursor:pointer; font-weight:500; }
.see-all:hover { text-decoration:underline; }

/* CATEGORIES */
.categories-grid { display:grid; grid-template-columns:repeat(auto-fill,minmax(100px,1fr)); gap:10px; }
.cat-card { background:#fff; border:1.5px solid var(--border); border-radius:14px; padding:16px 10px; text-align:center; cursor:pointer; transition:.2s; box-shadow:0 1px 6px rgba(0,0,0,0.04); }
.cat-card:hover { border-color:var(--primary); transform:translateY(-4px); background:rgba(232,96,74,0.04); box-shadow:var(--shadow); }
.cat-icon { font-size:28px; margin-bottom:6px; }
.cat-name { font-size:12px; font-weight:600; color:var(--text); }
.cat-count { font-size:11px; color:var(--gray); margin-top:2px; }

/* PRODUCTS GRID */
.products-grid { display:grid; grid-template-columns:repeat(auto-fill,minmax(200px,1fr)); gap:16px; }
.product-card { background:#fff; border:1.5px solid var(--border); border-radius:20px; overflow:hidden; cursor:pointer; transition:.25s; position:relative; box-shadow:0 2px 8px rgba(0,0,0,0.05); }
.product-card:hover { border-color:rgba(232,96,74,0.3); transform:translateY(-4px); box-shadow:0 12px 28px rgba(0,0,0,0.1); }
.product-img { width:100%; height:180px; object-fit:cover; background:var(--dark3); display:flex; align-items:center; justify-content:center; font-size:56px; }
.product-badge { position:absolute; top:10px; left:10px; background:var(--primary); color:#fff !important; font-size:10px; font-weight:700; padding:3px 8px; border-radius:50px; font-family:'Poppins',sans-serif; }
.product-fav { position:absolute; top:10px; right:10px; width:34px; height:34px; background:rgba(255,255,255,0.9); border:1px solid var(--border); border-radius:50%; color:var(--text); font-size:15px; cursor:pointer; display:flex; align-items:center; justify-content:center; transition:.2s; backdrop-filter:blur(4px); }
.product-fav:hover { background:rgba(232,96,74,0.1); border-color:var(--primary); }
.product-info { padding:14px; }
.product-seller { font-size:11px; color:var(--gray); margin-bottom:4px; display:flex; align-items:center; gap:4px; }
.product-name { font-weight:600; font-size:14px; margin-bottom:8px; line-height:1.3; color:var(--text); }
.product-price { font-family:'Poppins',sans-serif; font-size:18px; font-weight:800; color:var(--primary); }
.product-old-price { font-size:12px; color:var(--gray); text-decoration:line-through; margin-left:6px; }
.product-footer { display:flex; align-items:center; justify-content:space-between; margin-top:10px; gap:6px; flex-wrap:wrap; }
.product-stars { color:var(--primary-light); font-size:11px; }
.btn-add-cart { padding:7px 12px; background:var(--primary); border:none; color:#fff !important; border-radius:50px; font-size:11px; font-weight:600; cursor:pointer; transition:.2s; font-family:'Poppins',sans-serif; white-space:nowrap; }
.btn-add-cart:hover { background:var(--primary-dark); }

/* BANNER */
.promo-banner { margin:0 24px 40px; background:linear-gradient(135deg,var(--primary) 0%,#FF8A65 50%,var(--primary-light) 100%); border-radius:20px; padding:32px; position:relative; overflow:hidden; display:flex; align-items:center; justify-content:space-between; gap:20px; box-shadow:0 8px 32px rgba(232,96,74,0.25); }
.promo-banner::before { content:''; position:absolute; right:-60px; top:-60px; width:280px; height:280px; border-radius:50%; background:rgba(255,255,255,0.1); }
.promo-banner h2 { font-size:clamp(18px,3vw,28px); color:#fff !important; margin-bottom:8px; }
.promo-banner p { color:rgba(255,255,255,0.9) !important; margin-bottom:16px; font-size:14px; }
.btn-banner { padding:12px 24px; background:#fff; border:none; border-radius:50px; font-weight:700; font-size:14px; cursor:pointer; color:var(--primary) !important; font-family:'Poppins',sans-serif; transition:.2s; white-space:nowrap; }
.btn-banner:hover { transform:translateY(-2px); box-shadow:0 4px 16px rgba(0,0,0,0.15); }
.promo-emoji { font-size:70px; flex-shrink:0; }

/* ===== PRODUCT DETAIL ===== */
.detail-back { display:flex; align-items:center; gap:8px; padding:16px 24px; cursor:pointer; color:var(--gray); font-size:14px; font-weight:500; transition:.2s; }
.detail-back:hover { color:var(--primary); }
.detail-layout { display:grid; grid-template-columns:1fr 1fr; gap:40px; padding:0 24px 40px; max-width:1100px; margin:0 auto; }
.detail-gallery { position:relative; }
.detail-main-img { width:100%; aspect-ratio:1; border-radius:20px; background:var(--dark3); display:flex; align-items:center; justify-content:center; font-size:100px; margin-bottom:16px; border:1.5px solid var(--border); overflow:hidden; box-shadow:var(--shadow); }
.detail-thumbs { display:flex; gap:10px; flex-wrap:wrap; }
.detail-thumb { width:72px; height:72px; border-radius:12px; background:var(--dark3); display:flex; align-items:center; justify-content:center; font-size:28px; border:2px solid var(--border); cursor:pointer; transition:.2s; overflow:hidden; }
.detail-thumb.active { border-color:var(--primary); }
.detail-info { padding-top:8px; }
.detail-cat { color:var(--primary); font-size:13px; font-weight:500; margin-bottom:8px; }
.detail-title { font-size:clamp(20px,3vw,32px); font-weight:800; line-height:1.2; margin-bottom:12px; color:var(--text); }
.detail-rating { display:flex; align-items:center; gap:12px; margin-bottom:20px; flex-wrap:wrap; }
.stars-big { color:var(--primary-light); font-size:18px; }
.review-count { color:var(--gray); font-size:14px; }
.detail-price-row { display:flex; align-items:baseline; gap:12px; margin-bottom:24px; flex-wrap:wrap; }
.detail-price { font-family:'Poppins',sans-serif; font-size:clamp(26px,4vw,40px); font-weight:800; color:var(--primary); }
.detail-old { font-size:18px; color:var(--gray); text-decoration:line-through; }
.detail-discount { background:rgba(232,96,74,0.12); color:var(--primary); padding:4px 12px; border-radius:50px; font-size:13px; font-weight:700; }
.detail-seller-box { background:var(--dark3); border:1.5px solid var(--border); border-radius:16px; padding:14px; display:flex; align-items:center; gap:12px; margin-bottom:20px; }
.seller-avatar { width:44px; height:44px; border-radius:50%; background:linear-gradient(135deg,var(--primary),var(--primary-light)); display:flex; align-items:center; justify-content:center; font-weight:700; font-size:16px; font-family:'Poppins',sans-serif; flex-shrink:0; color:#fff !important; }
.seller-name { font-weight:600; font-size:14px; color:var(--text); }
.seller-info { font-size:12px; color:var(--gray); }
.seller-badge { background:rgba(0,168,84,0.12); color:var(--success); padding:3px 10px; border-radius:50px; font-size:11px; font-weight:600; margin-left:auto; white-space:nowrap; }
.detail-options { margin-bottom:20px; }
.detail-options label { font-size:13px; color:var(--gray-dark); margin-bottom:8px; display:block; font-weight:500; }
.size-btns { display:flex; gap:8px; flex-wrap:wrap; }
.size-btn { padding:8px 14px; background:#fff; border:1.5px solid var(--border-dark); border-radius:8px; color:var(--text); cursor:pointer; font-size:13px; font-weight:500; transition:.2s; }
.size-btn.active,.size-btn:hover { border-color:var(--primary); background:rgba(232,96,74,0.08); color:var(--primary); }
.qty-row { display:flex; align-items:center; gap:14px; margin-bottom:20px; flex-wrap:wrap; }
.qty-control { display:flex; align-items:center; background:#fff; border-radius:12px; overflow:hidden; border:1.5px solid var(--border-dark); }
.qty-btn { width:42px; height:42px; background:transparent !important; border:none; color:var(--text) !important; font-size:20px; cursor:pointer; transition:.2s; }
.qty-btn:hover { background:var(--primary) !important; color:#fff !important; }
.qty-val { width:44px; text-align:center; font-weight:600; font-size:16px; color:var(--text) !important; }
.detail-actions { display:flex; gap:10px; }
.btn-cart-big { flex:1; padding:14px; background:var(--primary); border:none; color:#fff !important; border-radius:14px; font-size:15px; font-weight:700; cursor:pointer; transition:.2s; font-family:'Poppins',sans-serif; }
.btn-cart-big:hover { background:var(--primary-dark); box-shadow:0 4px 16px rgba(232,96,74,0.3); }
.btn-buy-now { flex:1; padding:14px; background:transparent; border:2px solid var(--primary); color:var(--primary) !important; border-radius:14px; font-size:15px; font-weight:700; cursor:pointer; transition:.2s; font-family:'Poppins',sans-serif; }
.btn-buy-now:hover { background:var(--primary); color:#fff !important; }
.detail-description { margin-top:16px; }
.detail-description h4 { font-size:16px; margin-bottom:8px; color:var(--text); }
.detail-description p { color:var(--text-light); font-size:14px; line-height:1.7; }

/* ===== CART ===== */
.cart-layout { display:grid; grid-template-columns:1fr 360px; gap:28px; padding:20px 24px; max-width:1100px; margin:0 auto; }
.cart-title { font-size:clamp(20px,3vw,28px); font-weight:800; margin-bottom:20px; color:var(--text); }
.cart-item { background:#fff; border:1.5px solid var(--border); border-radius:18px; padding:16px; display:flex; gap:14px; margin-bottom:14px; align-items:center; box-shadow:0 1px 6px rgba(0,0,0,0.04); }
.cart-item-img { width:80px; height:80px; border-radius:12px; background:var(--dark3); display:flex; align-items:center; justify-content:center; font-size:36px; flex-shrink:0; }
.cart-item-info { flex:1; min-width:0; }
.cart-item-name { font-weight:600; font-size:14px; margin-bottom:4px; color:var(--text); }
.cart-item-meta { font-size:12px; color:var(--gray); margin-bottom:8px; }
.cart-item-price { font-family:'Poppins',sans-serif; font-size:17px; font-weight:700; color:var(--primary); }
.cart-item-qty { display:flex; align-items:center; background:var(--dark3); border-radius:8px; overflow:hidden; border:1.5px solid var(--border); }
.cart-qty-btn { width:34px; height:34px; background:transparent !important; border:none; color:var(--text) !important; font-size:18px; cursor:pointer; }
.cart-qty-btn:hover { background:rgba(232,96,74,0.1) !important; }
.cart-qty-val { width:34px; text-align:center; font-weight:600; font-size:14px; color:var(--text) !important; }
.cart-item-del { color:var(--gray); background:transparent !important; border:none; cursor:pointer; font-size:18px; padding:8px; transition:.2s; flex-shrink:0; }
.cart-item-del:hover { color:#ff4444; }
.cart-summary { background:#fff; border:1.5px solid var(--border); border-radius:20px; padding:24px; height:fit-content; position:sticky; top:80px; box-shadow:var(--shadow); }
.cart-summary h3 { font-size:18px; margin-bottom:20px; color:var(--text); }
.summary-row { display:flex; justify-content:space-between; margin-bottom:12px; font-size:14px; }
.summary-row span:first-child { color:var(--gray); }
.summary-row span:last-child { color:var(--text); font-weight:500; }
.summary-row.total { border-top:1px solid var(--border); padding-top:14px; margin-top:6px; font-size:17px; font-weight:700; }
.summary-row.total span:last-child { color:var(--primary); font-family:'Poppins',sans-serif; }
.coupon-row { display:flex; gap:8px; margin:16px 0; }
.coupon-input { flex:1; padding:11px 14px; background:var(--dark3); border:1.5px solid var(--border); border-radius:10px; color:var(--text); font-family:'DM Sans',sans-serif; outline:none; font-size:14px; min-width:0; }
.coupon-input:focus { border-color:var(--primary); }
.btn-coupon { padding:11px 14px; background:var(--dark3); border:1.5px solid var(--primary); color:var(--primary); border-radius:10px; cursor:pointer; font-weight:600; font-size:13px; transition:.2s; font-family:'Poppins',sans-serif; white-space:nowrap; }
.btn-coupon:hover { background:var(--primary); color:#fff !important; }
.btn-checkout { width:100%; padding:15px; background:var(--primary); border:none; color:#fff !important; border-radius:14px; font-size:15px; font-weight:700; cursor:pointer; margin-top:8px; transition:.2s; font-family:'Poppins',sans-serif; }
.btn-checkout:hover { background:var(--primary-dark); }
.payment-icons { display:flex; gap:8px; margin-top:14px; justify-content:center; flex-wrap:wrap; }
.payment-icon { padding:5px 10px; border-radius:8px; font-size:11px; font-weight:700; border:1.5px solid var(--border); color:var(--text-light); }

/* ===== TOAST ===== */
.toast { position:fixed; bottom:80px; right:16px; z-index:500; background:#fff; border:1.5px solid var(--border); border-radius:14px; padding:12px 18px; display:flex; align-items:center; gap:12px; transform:translateY(120px); opacity:0; transition:.3s; box-shadow:var(--shadow-lg); max-width:300px; color:var(--text); }
.toast.show { transform:translateY(0); opacity:1; }
.toast-icon { font-size:20px; flex-shrink:0; }
.toast-text { font-size:14px; font-weight:500; color:var(--text); }
.toast.success { border-color:rgba(0,168,84,0.3); }
.toast.error   { border-color:rgba(255,68,68,0.3); }

/* ===== BOTTOM NAV ===== */
.bottom-nav { display:none; position:fixed; bottom:0; left:0; right:0; z-index:100; background:rgba(255,255,255,0.97); backdrop-filter:blur(20px); border-top:1px solid var(--border); padding:6px 0 env(safe-area-inset-bottom); grid-template-columns:repeat(5,1fr); box-shadow:0 -2px 16px rgba(0,0,0,0.06); }
.bottom-nav-item { display:flex; flex-direction:column; align-items:center; gap:3px; padding:6px 0; cursor:pointer; color:var(--gray); transition:.2s; font-size:11px; }
.bottom-nav-item.active { color:var(--primary); }
.bottom-nav-item span:first-child { font-size:20px; }

/* ===== SELL ===== */
.sell-layout { max-width:760px; margin:0 auto; padding:24px; }
.sell-title { font-size:clamp(22px,4vw,32px); font-weight:800; margin-bottom:8px; color:var(--text); }
.sell-subtitle { color:var(--gray); margin-bottom:28px; font-size:14px; }
.upload-zone { border:2px dashed rgba(232,96,74,0.3); border-radius:18px; padding:40px 24px; text-align:center; margin-bottom:20px; cursor:pointer; transition:.2s; background:#fff; }
.upload-zone:hover { border-color:var(--primary); background:rgba(232,96,74,0.03); }
.upload-icon { font-size:44px; margin-bottom:14px; }
.upload-zone p { color:var(--gray); font-size:14px; }
.upload-zone strong { color:var(--text); }
.form-section { background:#fff; border:1.5px solid var(--border); border-radius:18px; padding:24px; margin-bottom:16px; box-shadow:0 1px 6px rgba(0,0,0,0.04); }
.form-section-title { font-size:17px; font-weight:700; margin-bottom:18px; display:flex; align-items:center; gap:10px; color:var(--text); }
.form-grid { display:grid; grid-template-columns:1fr 1fr; gap:14px; }
.form-grid.full { grid-template-columns:1fr; }
textarea { width:100%; padding:13px 15px; background:#fff; border:1.5px solid var(--border-dark); border-radius:12px; color:var(--text); font-size:15px; font-family:'DM Sans',sans-serif; resize:vertical; min-height:96px; outline:none; transition:.2s; box-sizing:border-box; }
textarea:focus { border-color:var(--primary); box-shadow:0 0 0 3px rgba(232,96,74,0.1); }

/* ===== PRIX — FLEXBOX (GNF à droite) ===== */
.price-input-wrap {
    display:flex;
    align-items:center;
    background:#fff;
    border:1.5px solid var(--border-dark);
    border-radius:12px;
    overflow:hidden;
    transition:.2s;
}
.price-input-wrap:focus-within {
    border-color:var(--primary);
    box-shadow:0 0 0 3px rgba(232,96,74,0.1);
}
.price-input-wrap input {
    flex:1 !important;
    width:auto !important;
    min-width:0 !important;
    padding:13px 16px !important;
    border:none !important;
    border-radius:0 !important;
    background:transparent !important;
    box-shadow:none !important;
    outline:none !important;
    color:var(--text) !important;
}
.price-currency {
    padding:13px 14px;
    color:var(--primary);
    font-weight:700;
    font-size:14px;
    background:rgba(232,96,74,0.08);
    border-left:1.5px solid var(--border);
    white-space:nowrap;
    flex-shrink:0;
    color:var(--primary) !important;
}

/* ===== LISTENING ===== */
.listening-indicator { display:flex; gap:4px; align-items:center; justify-content:center; margin:16px 0; }
.listening-bar { width:4px; border-radius:4px; background:var(--primary); animation:listenBar 1s ease-in-out infinite; }
.listening-bar:nth-child(1){height:20px;animation-delay:0s}
.listening-bar:nth-child(2){height:35px;animation-delay:.15s}
.listening-bar:nth-child(3){height:28px;animation-delay:.3s}
.listening-bar:nth-child(4){height:40px;animation-delay:.15s}
.listening-bar:nth-child(5){height:22px;animation-delay:0s}
@keyframes listenBar{0%,100%{transform:scaleY(.5)}50%{transform:scaleY(1)}}

/* ===== UTILS ===== */
.notification-dot { width:8px; height:8px; background:var(--primary); border-radius:50%; display:inline-block; margin-left:4px; }
.verified-icon { color:var(--primary); font-size:14px; }
.notif-wrapper { min-height:100vh; }

::-webkit-scrollbar { width:5px; }
::-webkit-scrollbar-track { background:var(--dark3); }
::-webkit-scrollbar-thumb { background:rgba(0,0,0,0.15); border-radius:3px; }
::-webkit-scrollbar-thumb:hover { background:var(--primary); }

/* ============================================================
   MOBILE — ≤ 480px
   ============================================================ */
@media (max-width:480px) {
    .navbar { padding:0 12px; gap:8px; height:56px; }
    .nav-logo img { height:36px; }
    .nav-search { display:none; }
    .nav-sell-btn { display:none; }
    .nav-actions { gap:6px; }
    .nav-icon-btn { width:34px; height:34px; font-size:15px; }
    .nav-icon-btn .badge { width:15px; height:15px; font-size:9px; top:-3px; right:-3px; }
    .nav-avatar { width:34px; height:34px; font-size:13px; }
    .nav-search-mobile { display:block; top:56px; padding:7px 10px; }
    .hero { padding:28px 14px 20px; }
    .hero h1 { font-size:26px; letter-spacing:-1px; margin-bottom:12px; }
    .hero p { font-size:14px; margin-bottom:20px; }
    .hero-search { margin-bottom:16px; border-radius:40px; }
    .hero-search input { padding:12px 16px; font-size:14px; }
    .hero-search-submit { padding:0 14px; font-size:12px; margin:6px; }
    .hero-search-icons button { width:32px; height:32px; font-size:15px; }
    .hero-tags { gap:6px; }
    .hero-tag { padding:5px 10px; font-size:11px; }
    .section { padding:20px 12px; }
    .section-title { font-size:17px; }
    .categories-grid { grid-template-columns:repeat(auto-fill,minmax(76px,1fr)); gap:8px; }
    .cat-card { padding:12px 6px; border-radius:12px; }
    .cat-icon { font-size:22px; margin-bottom:4px; }
    .cat-name { font-size:10px; }
    .products-grid { grid-template-columns:repeat(2,1fr); gap:10px; }
    .product-img { height:130px; font-size:42px; }
    .product-info { padding:10px; }
    .product-name { font-size:12px; margin-bottom:6px; }
    .product-price { font-size:15px; }
    .product-footer { flex-direction:column; align-items:flex-start; gap:5px; }
    .btn-add-cart { width:100%; text-align:center; padding:7px 8px; font-size:11px; }
    .promo-banner { margin:0 12px 24px; padding:18px; border-radius:14px; }
    .promo-banner h2 { font-size:17px; margin-bottom:6px; }
    .promo-banner p { font-size:12px; margin-bottom:10px; }
    .btn-banner { padding:9px 16px; font-size:12px; }
    .promo-emoji { display:none; }
    .detail-back { padding:10px 14px; }
    .detail-layout { grid-template-columns:1fr; gap:16px; padding:0 12px 24px; }
    .detail-main-img { font-size:72px; border-radius:14px; }
    .detail-thumb { width:58px; height:58px; font-size:22px; }
    .detail-title { font-size:20px; }
    .detail-price { font-size:26px; }
    .detail-seller-box { padding:12px; }
    .detail-actions { flex-direction:column; gap:8px; }
    .btn-cart-big,.btn-buy-now { width:100%; padding:14px; }
    .cart-layout { grid-template-columns:1fr; gap:14px; padding:12px; }
    .cart-title { font-size:18px; margin-bottom:12px; }
    .cart-item { padding:12px; gap:10px; border-radius:14px; }
    .cart-item-img { width:66px; height:66px; font-size:26px; }
    .cart-item-name { font-size:13px; }
    .cart-summary { position:static; padding:14px; }
    .sell-layout { padding:12px; }
    .form-section { padding:16px; }
    .form-grid { grid-template-columns:1fr; }
    .sell-title { font-size:20px; }
    .auth-card { padding:20px 16px; border-radius:18px; }
    .auth-logo .logo-text { font-size:30px; }
    .auth-modal-inner { max-width:100%; }
    .role-card { padding:12px 8px; }
    .role-card .role-icon { font-size:22px; }
    .role-card .role-name { font-size:12px; }
    .role-card .role-desc { display:none; }
    .social-btns { grid-template-columns:1fr; }
    .bottom-nav { display:grid; }
    .bottom-nav-item { font-size:10px; padding:5px 0; }
    .bottom-nav-item span:first-child { font-size:19px; }
    .toast { right:10px; left:10px; max-width:none; bottom:72px; border-radius:12px; }
    .profile-page,.params-page,.commandes-page,.notif-page { padding:12px; }
}

/* ============================================================
   TABLETTE — 481px à 1024px
   ============================================================ */
@media (min-width:481px) and (max-width:1024px) {
    .navbar { padding:0 16px; gap:12px; height:60px; }
    .nav-logo img { height:42px; }
    .nav-search { display:flex; max-width:280px; }
    .nav-sell-btn { display:none; }
    .nav-actions { gap:8px; }
    .nav-icon-btn { width:36px; height:36px; font-size:16px; }
    .nav-avatar { width:36px; height:36px; font-size:14px; }
    .nav-search-mobile { display:none; }
    .bottom-nav { display:grid; }
    .hero { padding:40px 20px 28px; }
    .hero h1 { font-size:clamp(28px,4vw,44px); }
    .section { padding:28px 18px; }
    .categories-grid { grid-template-columns:repeat(auto-fill,minmax(88px,1fr)); gap:10px; }
    .products-grid { grid-template-columns:repeat(auto-fill,minmax(160px,1fr)); gap:12px; }
    .product-img { height:150px; }
    .promo-banner { margin:0 18px 28px; padding:26px; }
    .promo-emoji { font-size:52px; }
    .detail-layout { grid-template-columns:1fr 1fr; gap:24px; padding:0 18px 28px; }
    .cart-layout { grid-template-columns:1fr; gap:18px; padding:16px; }
    .cart-summary { position:static; }
    .form-grid { grid-template-columns:1fr 1fr; }
    .auth-card { padding:28px 22px; }
    .toast { bottom:76px; right:14px; max-width:280px; }
    .profile-page,.params-page { max-width:100%; padding:18px; }
    .commandes-page,.notif-page { max-width:100%; padding:18px; }
}

/* ============================================================
   DESKTOP — ≥ 1025px
   ============================================================ */
@media (min-width:1025px) {
    .navbar { height:64px; padding:0 28px; gap:20px; }
    .nav-logo img { height:50px; }
    .nav-search { display:flex; max-width:520px; }
    .nav-sell-btn { display:flex; }
    .nav-search-mobile { display:none !important; }
    .nav-icon-btn { width:40px; height:40px; font-size:18px; }
    .nav-avatar { width:40px; height:40px; font-size:16px; }
    .bottom-nav { display:none !important; }
    .toast { bottom:24px; right:24px; max-width:320px; }
    .products-grid { grid-template-columns:repeat(auto-fill,minmax(220px,1fr)); gap:20px; }
    .product-img { height:200px; font-size:64px; }
    .product-price { font-size:20px; }
    .product-footer { flex-direction:row; flex-wrap:nowrap; }
    .btn-add-cart { width:auto; }
    .cart-layout { grid-template-columns:1fr 380px; }
    .cart-summary { position:sticky; top:80px; }
    .detail-layout { grid-template-columns:1fr 1fr; gap:40px; }
    .detail-title { font-size:32px; }
    .detail-price { font-size:40px; }
    .sell-layout { padding:28px; }
    .profile-page,.params-page { max-width:500px; padding:28px; }
    .commandes-page,.notif-page { max-width:700px; padding:28px; }
}