/* ==========================================================================
   NumiApp — Module SHOP (site public) — charte dédiée (esprit Temu)
   --------------------------------------------------------------------------
   Le shop a sa propre identité (cahier §3.1) :
     - couleur d'accent : sky #0EA5E9 (= theme_color de la section Shop),
       distincte du lime #84CC16 de l'épicerie ;
     - DENSITÉ ÉLEVÉE : plus de produits par écran que l'épicerie, cartes
       compactes, badge de remise -X % très visible, prix barré systématique ;
     - signature visuelle : le bloc prix (prix promo + prix barré + remise %),
       la réassurance (livraison, retours) et les offres flash à compte à rebours.
   Tout est porté par le scope .numi-shop : aucun autre module n'est touché.
   Le vert NumiApp #1CB084 reste la base de marque (badge, liens neutres).
   ========================================================================== */

.numi-shop {
    --ns-accent: #0EA5E9;
    --ns-accent-dark: #0369A1;
    --ns-accent-soft: #F0F9FF;
    --ns-brand: #1CB084;
    --ns-ink: #0F172A;
    --ns-muted: #64748B;
    --ns-line: #E6EAF0;
    --ns-bg: #F7F9FB;
    --ns-danger: #DC2626;
    --ns-hot: #F97316;
    --ns-radius: 12px;
    font-family: 'Inter', 'Poppins', system-ui, -apple-system, sans-serif;
    color: var(--ns-ink);
    background: var(--ns-bg);
}

.numi-shop .ns-container { max-width: 1240px; margin: 0 auto; padding: 0 14px; }

/* ---------------------------------------------------------------- bandeaux */
.numi-shop .ns-topbar {
    background: linear-gradient(135deg, #0284C7 0%, var(--ns-accent) 55%, #38BDF8 100%);
    color: #fff;
    padding: 14px 0 18px;
}
.numi-shop .ns-brandline { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; }
.numi-shop .ns-logo { display: inline-flex; align-items: center; gap: 8px; font-weight: 900; font-size: 22px; letter-spacing: -.3px; }
.numi-shop .ns-logo .ns-dot { width: 30px; height: 30px; border-radius: 9px; background: #fff; color: var(--ns-accent-dark); display: grid; place-items: center; font-size: 16px; }
.numi-shop .ns-slogan { opacity: .96; font-size: 13px; }
.numi-shop .ns-quick { margin-left: auto; display: inline-flex; gap: 8px; }
.numi-shop .ns-quicklink {
    background: rgba(255,255,255,.18); color: #fff; font-weight: 700; font-size: 13px;
    padding: 7px 15px; border-radius: 999px; text-decoration: none;
}
.numi-shop .ns-quicklink:hover { background: #fff; color: var(--ns-accent-dark); }

.numi-shop .ns-search { margin-top: 14px; display: flex; gap: 8px; }
.numi-shop .ns-search input { flex: 1; border: 0; border-radius: 999px; padding: 13px 20px; font-size: 15px; box-shadow: 0 4px 14px rgba(0,0,0,.10); }
.numi-shop .ns-search button { border: 0; border-radius: 999px; padding: 0 24px; background: #fff; color: var(--ns-accent-dark); font-weight: 800; cursor: pointer; }

/* --------------------------------------------------------------- sections */
.numi-shop .ns-section { padding: 22px 0 6px; }
.numi-shop .ns-section-title { display: flex; align-items: baseline; gap: 10px; margin-bottom: 12px; }
.numi-shop .ns-section-title h2 { font-size: 18px; font-weight: 900; margin: 0; letter-spacing: -.2px; }
.numi-shop .ns-section-title .ns-sub { color: var(--ns-muted); font-size: 12.5px; }
.numi-shop .ns-section-title a { margin-left: auto; font-weight: 800; font-size: 13px; color: var(--ns-accent-dark); }

/* ------------------------------------------------------------ héros animé */
.numi-shop .ns-hero {
    border-radius: var(--ns-radius); overflow: hidden; color: #fff; padding: 28px;
    background: linear-gradient(120deg, #0F172A 0%, #0369A1 45%, #0EA5E9 100%);
    background-size: 200% 200%; animation: nsShift 9s ease infinite;
    display: flex; align-items: center; justify-content: space-between; gap: 18px; flex-wrap: wrap;
}
@keyframes nsShift { 0%{background-position:0% 50%} 50%{background-position:100% 50%} 100%{background-position:0% 50%} }
.numi-shop .ns-hero h1 { font-size: 26px; font-weight: 900; margin: 0 0 6px; }
.numi-shop .ns-hero p { margin: 0; opacity: .95; }
.numi-shop .ns-hero .ns-cta { background: #fff; color: var(--ns-accent-dark); font-weight: 900; padding: 12px 22px; border-radius: 999px; text-decoration: none; white-space: nowrap; }

/* -------------------------------------------------------- offre flash + timer */
.numi-shop .ns-flash-head { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; }
.numi-shop .ns-flash-head h2 { color: var(--ns-hot); }
.numi-shop .ns-timer { display: inline-flex; gap: 5px; align-items: center; font-weight: 900; }
.numi-shop .ns-timer span { background: var(--ns-hot); color: #fff; border-radius: 7px; padding: 4px 8px; font-variant-numeric: tabular-nums; min-width: 30px; text-align: center; }
.numi-shop .ns-timer .ns-tsep { background: none; color: var(--ns-ink); padding: 0; }
.numi-shop .ns-rail { display: grid; grid-auto-flow: column; grid-auto-columns: minmax(160px, 1fr); gap: 12px; overflow-x: auto; padding-bottom: 6px; }
.numi-shop .ns-rail .ns-card { min-width: 0; }

/* --------------------------------------------------------- catégories (3 col) */
.numi-shop .ns-cats { display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; }
@media (max-width: 640px) { .numi-shop .ns-cats { grid-template-columns: repeat(2, 1fr); } }
.numi-shop .ns-cat {
    display: flex; align-items: center; gap: 12px; background: #fff; border: 1px solid var(--ns-line);
    border-radius: var(--ns-radius); padding: 12px; text-decoration: none; color: var(--ns-ink);
    transition: transform .12s, box-shadow .12s;
}
.numi-shop .ns-cat:hover { transform: translateY(-3px); box-shadow: 0 10px 24px rgba(15,23,42,.09); }
.numi-shop .ns-cat .ns-catic { width: 44px; height: 44px; border-radius: 12px; display: grid; place-items: center; font-size: 22px; background: var(--ns-accent-soft); flex: 0 0 auto; }
.numi-shop .ns-cat .ns-catname { font-weight: 800; font-size: 13.5px; line-height: 1.2; }
.numi-shop .ns-cat .ns-catcount { color: var(--ns-muted); font-size: 11.5px; }

/* --------------------------------------------------------------- grille dense */
.numi-shop .ns-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(168px, 1fr)); gap: 12px; }
.numi-shop .ns-grid.ns-dense { grid-template-columns: repeat(auto-fill, minmax(136px, 1fr)); gap: 9px; }
@media (max-width: 640px) { .numi-shop .ns-grid { grid-template-columns: repeat(2, 1fr); gap: 9px; } }

/* ------------------------------------------------------------------- cartes */
.numi-shop .ns-card {
    background: #fff; border: 1px solid var(--ns-line); border-radius: var(--ns-radius);
    padding: 9px; display: flex; flex-direction: column; position: relative;
    transition: box-shadow .12s, transform .12s;
}
.numi-shop .ns-card:hover { box-shadow: 0 12px 26px rgba(15,23,42,.10); transform: translateY(-2px); }
.numi-shop .ns-photolink { display: block; }
.numi-shop .ns-photo { width: 100%; aspect-ratio: 1 / 1; object-fit: cover; border-radius: 9px; background: var(--ns-bg); display: block; }
.numi-shop .ns-badges { position: absolute; top: 15px; left: 15px; z-index: 3; display: flex; flex-direction: column; gap: 4px; align-items: flex-start; }
.numi-shop .ns-badge { font-size: 10.5px; font-weight: 900; padding: 3px 7px; border-radius: 7px; color: #fff; letter-spacing: .2px; }
.numi-shop .ns-badge-pct { background: var(--ns-danger); }
.numi-shop .ns-badge-new { background: var(--ns-accent); }
.numi-shop .ns-badge-hot { background: var(--ns-hot); }
.numi-shop .ns-title {
    font-size: 12.5px; font-weight: 700; line-height: 1.3; margin: 7px 0 3px;
    display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; min-height: 32px;
}
.numi-shop .ns-brand { font-size: 11px; color: var(--ns-muted); font-weight: 700; text-transform: uppercase; letter-spacing: .3px; }
.numi-shop .ns-priceline { display: flex; align-items: baseline; gap: 6px; flex-wrap: wrap; margin-top: 5px; }
.numi-shop .ns-price { font-size: 17px; font-weight: 900; color: var(--ns-danger); }
.numi-shop .ns-was { color: var(--ns-muted); text-decoration: line-through; font-size: 12px; }
.numi-shop .ns-foot { display: flex; align-items: center; justify-content: space-between; gap: 6px; margin-top: 5px; font-size: 11px; color: var(--ns-muted); flex-wrap: wrap; }
.numi-shop .ns-note { display: inline-flex; align-items: center; gap: 4px; }
.numi-shop .ns-star { color: #F59E0B; font-weight: 800; }
.numi-shop .ns-sep { opacity: .6; }
.numi-shop .ns-ship { background: var(--ns-accent-soft); color: var(--ns-accent-dark); border-radius: 6px; padding: 2px 6px; font-weight: 800; }
.numi-shop .ns-stockline { font-size: 11px; margin-top: 4px; }
.numi-shop .ns-stockout { color: var(--ns-danger); font-weight: 800; }
.numi-shop .ns-lowstock { color: #B45309; font-weight: 800; }
.numi-shop .ns-add {
    margin-top: 8px; border: 0; background: var(--ns-accent); color: #fff; border-radius: 999px;
    padding: 8px 10px; font-weight: 900; font-size: 12.5px; cursor: pointer; width: 100%;
}
.numi-shop .ns-add:hover { background: var(--ns-accent-dark); }
.numi-shop .ns-add[disabled] { background: var(--ns-line); color: var(--ns-muted); cursor: not-allowed; }

/* --------------------------------------------------------- coupons / réassurance */
.numi-shop .ns-coupons { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 12px; }
.numi-shop .ns-coupon {
    border: 1.5px dashed var(--ns-accent); background: var(--ns-accent-soft); border-radius: var(--ns-radius);
    padding: 12px 14px; display: flex; align-items: center; gap: 12px;
}
.numi-shop .ns-coupon .ns-cval { font-size: 22px; font-weight: 900; color: var(--ns-accent-dark); }
.numi-shop .ns-coupon .ns-ccode { font-weight: 900; letter-spacing: 1px; }
.numi-shop .ns-coupon .ns-clabel { font-size: 12px; color: var(--ns-muted); }
.numi-shop .ns-reassure { display: flex; gap: 10px; flex-wrap: wrap; padding: 12px 0; }
.numi-shop .ns-reassure .ns-rc { flex: 1 1 200px; background: #fff; border: 1px solid var(--ns-line); border-radius: var(--ns-radius); padding: 11px 14px; font-size: 13px; font-weight: 700; }
.numi-shop .ns-sponsor-strip { background: linear-gradient(90deg,#0F172A,#0369A1); color: #fff; border-radius: var(--ns-radius); padding: 14px 18px; display: flex; align-items: center; gap: 12px; }
.numi-shop .ns-sponsor-strip .ns-sponsor { font-size: 11px; border: 1px solid rgba(255,255,255,.4); border-radius: 6px; padding: 1px 6px; }

/* --------------------------------------------------------- en-tête catégorie */
.numi-shop .ns-cathead { border-radius: var(--ns-radius); padding: 20px; color: #fff; display: flex; align-items: center; gap: 14px; }
.numi-shop .ns-cathead .ns-catic { width: 54px; height: 54px; border-radius: 14px; background: rgba(255,255,255,.22); display: grid; place-items: center; font-size: 26px; }
.numi-shop .ns-cathead h1 { margin: 0; font-size: 22px; font-weight: 900; }
.numi-shop .ns-cathead .ns-catcount { opacity: .95; font-size: 13px; }
.numi-shop .ns-breadcrumb { font-size: 13px; color: var(--ns-muted); margin: 12px 0; }
.numi-shop .ns-breadcrumb a { color: var(--ns-accent-dark); font-weight: 700; }

/* --------------------------------------------------------------- filtres */
.numi-shop .ns-toolbar { display: flex; gap: 10px; align-items: center; flex-wrap: wrap; background: #fff; border: 1px solid var(--ns-line); border-radius: var(--ns-radius); padding: 11px; margin: 12px 0; }
.numi-shop .ns-chips { display: flex; gap: 7px; flex-wrap: wrap; }
.numi-shop .ns-chip { border: 1px solid var(--ns-line); background: #fff; border-radius: 999px; padding: 5px 13px; font-size: 12.5px; cursor: pointer; font-weight: 700; }
.numi-shop .ns-chip.active { background: var(--ns-accent); border-color: var(--ns-accent); color: #fff; }
.numi-shop .ns-toolbar select, .numi-shop .ns-toolbar input { border: 1px solid var(--ns-line); border-radius: 9px; padding: 7px 10px; font-size: 13px; background: #fff; }
.numi-shop .ns-toggle { display: inline-flex; align-items: center; gap: 6px; font-size: 13px; font-weight: 700; }
.numi-shop .ns-filtre-grp { display: inline-flex; align-items: center; gap: 8px; }

/* ------------------------------------------------------------ fiche produit */
.numi-shop .ns-item { display: grid; grid-template-columns: 1fr 1fr; gap: 24px; }
@media (max-width: 860px) { .numi-shop .ns-item { grid-template-columns: 1fr; } }
.numi-shop .ns-gallery { display: grid; grid-template-columns: 74px 1fr; gap: 10px; }
.numi-shop .ns-thumbs { display: flex; flex-direction: column; gap: 8px; }
.numi-shop .ns-thumbs img { width: 74px; height: 74px; object-fit: cover; border-radius: 9px; border: 1.5px solid var(--ns-line); cursor: pointer; }
.numi-shop .ns-thumbs img.active { border-color: var(--ns-accent); }
.numi-shop .ns-gallery .ns-mainimg { width: 100%; aspect-ratio: 1 / 1; object-fit: cover; border-radius: var(--ns-radius); border: 1px solid var(--ns-line); background: #fff; }
.numi-shop .ns-flags { display: flex; gap: 7px; flex-wrap: wrap; margin-bottom: 8px; }
.numi-shop .ns-flag { font-size: 11.5px; font-weight: 800; padding: 4px 10px; border-radius: 999px; background: var(--ns-accent-soft); color: var(--ns-accent-dark); }
.numi-shop .ns-flag.red { background: #FEF2F2; color: var(--ns-danger); }
.numi-shop .ns-item h1 { font-size: 23px; font-weight: 900; margin: 6px 0; }
.numi-shop .ns-pricebox { background: #fff; border: 1px solid var(--ns-line); border-radius: var(--ns-radius); padding: 15px; margin: 13px 0; }
.numi-shop .ns-pricebox .ns-big { font-size: 30px; font-weight: 900; color: var(--ns-danger); }
.numi-shop .ns-pricebox .ns-was { font-size: 15px; }
.numi-shop .ns-variantblk { margin: 12px 0; }
.numi-shop .ns-variantblk label { font-size: 12px; color: var(--ns-muted); font-weight: 700; display: block; margin-bottom: 5px; }
.numi-shop .ns-variants { display: flex; gap: 8px; flex-wrap: wrap; }
.numi-shop .ns-variant { border: 1.5px solid var(--ns-line); background: #fff; border-radius: 9px; padding: 7px 13px; cursor: pointer; font-weight: 700; font-size: 13px; }
.numi-shop .ns-variant.active { border-color: var(--ns-accent); background: var(--ns-accent-soft); color: var(--ns-accent-dark); }
.numi-shop .ns-specs { font-size: 13px; }
.numi-shop .ns-specs .ns-spec { display: flex; justify-content: space-between; border-bottom: 1px dashed var(--ns-line); padding: 6px 0; }
.numi-shop .ns-qty { display: inline-flex; align-items: center; border: 1px solid var(--ns-line); border-radius: 999px; overflow: hidden; background: #fff; }
.numi-shop .ns-qty button { border: 0; background: #fff; width: 38px; height: 40px; font-size: 18px; cursor: pointer; color: var(--ns-accent-dark); }
.numi-shop .ns-qty input { width: 46px; border: 0; text-align: center; font-weight: 900; }
.numi-shop .ns-primary { background: var(--ns-accent); color: #fff; border: 0; border-radius: 999px; padding: 13px 24px; font-weight: 900; cursor: pointer; font-size: 15px; }
.numi-shop .ns-primary:hover { background: var(--ns-accent-dark); }
.numi-shop .ns-secondary { background: #fff; color: var(--ns-ink); border: 1px solid var(--ns-line); border-radius: 999px; padding: 12px 20px; font-weight: 800; cursor: pointer; }
.numi-shop .ns-vendorcard { background: #fff; border: 1px solid var(--ns-line); border-radius: var(--ns-radius); padding: 13px; margin: 12px 0; display: flex; align-items: center; gap: 12px; }
.numi-shop .ns-vendorcard img { width: 52px; height: 52px; border-radius: 10px; object-fit: cover; }

/* ------------------------------------------------------ panier / tunnel / blocs */
.numi-shop .ns-panel { background: #fff; border: 1px solid var(--ns-line); border-radius: var(--ns-radius); padding: 17px; }
.numi-shop .ns-line { display: flex; gap: 12px; align-items: center; padding: 12px 0; border-bottom: 1px solid var(--ns-line); }
.numi-shop .ns-line:last-child { border-bottom: 0; }
.numi-shop .ns-line img { width: 62px; height: 62px; border-radius: 9px; object-fit: cover; background: var(--ns-bg); }
.numi-shop .ns-line .ns-lname { font-weight: 700; font-size: 14px; }
.numi-shop .ns-line .ns-lunit { color: var(--ns-muted); font-size: 12px; }
.numi-shop .ns-line .ns-lright { margin-left: auto; text-align: right; }
.numi-shop .ns-remove { background: none; border: 0; color: var(--ns-danger); font-size: 12.5px; cursor: pointer; font-weight: 800; }
.numi-shop .ns-row { display: flex; justify-content: space-between; padding: 5px 0; font-size: 14px; }
.numi-shop .ns-row.total { font-weight: 900; font-size: 18px; border-top: 1px solid var(--ns-line); margin-top: 8px; padding-top: 12px; }
.numi-shop .ns-row .ns-disc { color: var(--ns-brand); font-weight: 800; }
.numi-shop .ns-couponbox { display: flex; gap: 8px; margin: 10px 0; }
.numi-shop .ns-couponbox input { flex: 1; border: 1px solid var(--ns-line); border-radius: 9px; padding: 9px 11px; }
.numi-shop .ns-couponbox button { border: 0; background: var(--ns-ink); color: #fff; border-radius: 9px; padding: 0 16px; font-weight: 800; cursor: pointer; }
.numi-shop .ns-slots { display: flex; gap: 8px; flex-wrap: wrap; }
.numi-shop .ns-slot { border: 1.5px solid var(--ns-line); background: #fff; border-radius: 11px; padding: 9px 14px; cursor: pointer; font-weight: 800; font-size: 13.5px; }
.numi-shop .ns-slot.active { border-color: var(--ns-accent); background: var(--ns-accent-soft); color: var(--ns-accent-dark); }
.numi-shop .ns-empty { text-align: center; padding: 40px; color: var(--ns-muted); }
.numi-shop .ns-note { background: #FFFBEB; border: 1px solid #FDE68A; border-radius: 11px; padding: 11px 14px; font-size: 13px; color: #92400E; }
.numi-shop .ns-cartbar { position: sticky; bottom: 0; z-index: 40; background: #fff; border-top: 1px solid var(--ns-line); padding: 10px 0; box-shadow: 0 -6px 20px rgba(15,23,42,.08); transition: background .2s; }
.numi-shop .ns-cartbar[data-flash="1"] { background: var(--ns-accent-soft); }
.numi-shop .ns-cartbar .ns-inner { display: flex; align-items: center; gap: 14px; }
.numi-shop .ns-cartbar .ns-count { font-weight: 900; }
.numi-shop .ns-cartbar .ns-total { font-weight: 900; font-size: 18px; }

/* ------------------------------------------------------------- divers */
.numi-shop a { color: var(--ns-accent-dark); }
.numi-shop .ns-badge-brand { background: var(--ns-brand); color: #fff; font-size: 11px; font-weight: 800; padding: 3px 9px; border-radius: 999px; }
.numi-shop .ns-hint { font-size: 12px; color: var(--ns-muted); }
@media (max-width: 640px) { .numi-shop .ns-hero h1 { font-size: 20px; } }