/* ==========================================================================
   mg-front.bundle.css — variables + brand + app + components-v2 (concatenes)
   Regenerer apres modification des CSS sources :
   Get-Content variables.css, brand.css, app.css, components-v2.css | Set-Content mg-front.bundle.css
   ========================================================================== */
/* ==========================================================================
   Mokhtar GSM — Design Tokens v4
   « Retail Tech Confiance » — Navy #00002A · Rouge #E0070C · Cyan #00C2FF
   Inclure EN PREMIER dans le layout public (avant brand.css / app.css)
   ========================================================================== */

:root {
    /* ==================================================================
       TOKENS MINIMALISTES (contrat)
       ================================================================== */
    --color-primary: #00002A;
    --color-accent:  #E0070C;
    --color-whatsapp: #25D366;
    --color-bg-light: #F8FAFC;
    --color-bg-white: #FFFFFF;
    --color-text-main: #1A1A1A;
    --color-text-muted: #6B7280;
    --color-border: #E2E8F0;
    --color-success: #16A34A;
    --color-error: #DC2626;

    --font-main: 'Inter', system-ui, -apple-system, sans-serif;
    --fs-h1: 2.25rem;
    --fs-h2: 1.5rem;
    --fs-h3: 1.25rem;
    --fs-body: 1rem;
    --fs-small: 0.875rem;

    --space-xs: 8px;
    --space-sm: 16px;
    --space-md: 24px;
    --space-lg: 48px;
    --space-xl: 80px;

    --radius-sm: 6px;
    --radius-md: 12px;
    --shadow-card: 0 2px 8px rgba(0,0,0,0.06);

    /* ==================================================================
       ADN VISUEL — palette extraite du logo (Digital-First)
       ================================================================== */

    /* Rouge logo — promos, urgence, stock faible */
    --color-brand-red:        #E0070C;
    --color-brand-red-hover:  #C0060A;
    --color-brand-red-active: #A00508;
    --color-brand-red-soft:   rgba(224, 7, 12, 0.12);
    --color-brand-red-muted:  rgba(224, 7, 12, 0.06);

    /* Deep Navy logo — titres, header, footer, CTA principaux */
    --color-navy:             #00002A;
    --color-navy-hover:       #0A0A45;
    --color-navy-active:      #12125A;
    --color-navy-soft:        rgba(0, 0, 42, 0.08);
    --color-navy-muted:       rgba(0, 0, 42, 0.04);

    /* Cyan Tech — nouveautés, micro-interactions, focus */
    --color-accent-tech:      #00C2FF;
    --color-accent-tech-hover:#00A8DB;
    --color-accent-tech-soft: rgba(0, 194, 255, 0.14);
    --color-accent-tech-muted:rgba(0, 194, 255, 0.08);

    /* WhatsApp — canal de confiance Maroc */
    --color-whatsapp:         #25D366;
    --color-whatsapp-hover:   #1DA851;
    --color-whatsapp-soft:    rgba(37, 211, 102, 0.14);

    /* Alias sémantiques */
    --color-primary:          var(--color-navy);
    --color-primary-hover:    var(--color-navy-hover);
    --color-primary-active:   var(--color-navy-active);
    --color-primary-soft:     var(--color-navy-soft);
    --color-primary-muted:    var(--color-navy-muted);

    --color-secondary:        var(--color-navy);
    --color-secondary-hover:  var(--color-navy-hover);
    --color-secondary-soft:   var(--color-navy-soft);

    --color-accent-promo:        var(--color-brand-red);
    --color-accent-promo-hover:  var(--color-brand-red-hover);
    --color-accent-promo-soft:   var(--color-brand-red-soft);
    --color-accent-promo-text:   #7F1D1D;

    /* ==================================================================
       NEUTRES — surfaces froides, interface aérée
       ================================================================== */

    --color-bg:             #FFFFFF;
    --color-bg-soft:        #F8FAFC;
    --color-bg-muted:       #F1F5F9;
    --color-surface:        #FFFFFF;
    --color-surface-raised: #FFFFFF;
    --color-surface-float:  #F8FAFC;

    --color-text:           #1A1A1A;
    --color-text-muted:     #6B7280;
    --color-text-subtle:      #94A3B8;
    --color-heading:        var(--color-navy);

    --color-border:         #E2E8F0;
    --color-border-strong:  #CBD5E1;
    --color-divider:        #F1F5F9;

    --color-on-primary:     #FFFFFF;
    --color-on-secondary:   #FFFFFF;
    --color-on-promo:       #FFFFFF;
    --color-on-dark-muted:  #C7D2FE;

    /* ==================================================================
       ÉTATS — feedback, stock, formulaires
       ================================================================== */

    --color-success:        #16A34A;
    --color-success-soft:   rgba(22, 163, 74, 0.12);
    --color-success-text:   #166534;

    --color-danger:         #DC2626;
    --color-danger-soft:    rgba(220, 38, 38, 0.12);
    --color-danger-text:    #991B1B;

    --color-warning:        #D97706;
    --color-warning-soft:   rgba(217, 119, 6, 0.12);
    --color-warning-text:   #92400E;

    --color-info:           var(--color-accent-tech);
    --color-info-soft:      var(--color-accent-tech-soft);

    --color-stock-ok:       #16A34A;
    --color-stock-low:      var(--color-brand-red);
    --color-stock-out:      #64748B;

    --color-focus-ring:     rgba(0, 194, 255, 0.45);
    --focus-ring:           0 0 0 3px var(--color-focus-ring);

    /* ==================================================================
       TYPOGRAPHIE
       Display : Plus Jakarta Sans · Body : Inter · Prix : tabular-nums
       ================================================================== */

    --font-display: 'Plus Jakarta Sans', 'Inter', system-ui, -apple-system, sans-serif;
    --font-body:    'Inter', system-ui, -apple-system, sans-serif;
    --font-mono:    ui-monospace, 'Cascadia Code', monospace;

    --text-xs:   0.75rem;
    --text-sm:   0.875rem;
    --text-base: 1rem;
    --text-lg:   1.125rem;
    --text-xl:   1.25rem;
    --text-2xl:  1.5rem;
    --text-3xl:  1.875rem;
    --text-4xl:  2.25rem;
    --text-5xl:  3rem;

    --font-normal:    400;
    --font-medium:    500;
    --font-semibold:  600;
    --font-bold:      700;
    --font-extrabold: 800;

    --leading-tight:   1.2;
    --leading-snug:    1.35;
    --leading-normal:  1.6;
    --leading-relaxed: 1.75;

    --tracking-tight:  -0.02em;
    --tracking-normal:  0;
    --tracking-wide:    0.04em;
    --tracking-wider:   0.08em;

    --text-price:      1.15rem;
    --text-price-lg:   1.5rem;
    --text-price-old:  0.9rem;
    --weight-price:    800;

    /* ==================================================================
       ESPACEMENTS (échelle 4px)
       ================================================================== */

    --space-0:  0;
    --space-1:  0.25rem;
    --space-2:  0.5rem;
    --space-3:  0.75rem;
    --space-4:  1rem;
    --space-5:  1.25rem;
    --space-6:  1.5rem;
    --space-8:  2rem;
    --space-10: 2.5rem;
    --space-12: 3rem;
    --space-16: 4rem;
    --space-20: 5rem;

    --section-y:    3.5rem;
    --section-y-lg: 5rem;
    --container-px: 1rem;

    /* ==================================================================
       RAYONS, OMBRES, TRANSITIONS
       ================================================================== */

    --radius-xs:   6px;
    --radius-sm:   6px;
    --radius-md:   12px;
    --radius-lg:   20px;
    --radius-xl:   28px;
    --radius-pill: 999px;

    --shadow-xs:  0 1px 2px rgba(0, 0, 42, 0.04);
    --shadow-sm:  0 1px 3px rgba(0, 0, 42, 0.06);
    --shadow-md:  0 2px 8px rgba(0,0,0,0.06);
    --shadow-lg:  0 20px 25px -5px rgba(0, 0, 42, 0.08), 0 8px 10px -6px rgba(0, 0, 42, 0.04);
    --shadow-xl:  0 25px 50px -12px rgba(0, 0, 42, 0.12);
    --shadow-card:        0 10px 15px -3px rgba(0, 0, 0, 0.05);
    --shadow-card-hover:  0 16px 24px -4px rgba(0, 0, 0, 0.08);

    --transition-fast:   0.15s ease;
    --transition-base:   0.2s ease;
    --transition-lift:   0.3s ease;
    --transition-slow:   0.35s ease;
    --transition-spring: 0.4s cubic-bezier(0.34, 1.4, 0.64, 1);

    /* ==================================================================
       COMPOSANTS
       ================================================================== */

    --header-height:  72px;
    --header-bg:      rgba(255, 255, 255, 0.98);
    --topbar-bg:      var(--color-navy);
    --topbar-text:    var(--color-on-dark-muted);

    --btn-height:      44px;
    --btn-height-sm:   36px;
    --btn-height-lg:   52px;
    --btn-radius:      12px;
    --btn-font-weight: var(--font-semibold);
    --btn-lift:        -2px;

    --card-radius:       var(--radius-md);
    --card-border:       none;
    --card-thumb-ratio:  1 / 1;
    --badge-promo-bg:    var(--color-brand-red);
    --badge-promo-color: var(--color-on-promo);

    --hero-min-height: 420px;
    --hero-overlay:    linear-gradient(105deg, rgba(0, 0, 42, 0.92) 0%, rgba(0, 0, 42, 0.55) 55%, rgba(0, 0, 42, 0.25) 100%);
    --hero-title-size: clamp(1.875rem, 4vw, 3rem);

    --footer-bg:   var(--color-navy);
    --footer-text: var(--color-on-dark-muted);

    --touch-target-min: 44px;

    --z-dropdown: 1050;
    --z-sticky:   1030;
    --z-fixed:    1040;
    --z-modal:    1060;

    /* ==================================================================
       ALIAS LEGACY (brand.css / app.css)
       ================================================================== */

    --brand-primary:       var(--color-navy);
    --brand-primary-dark:  var(--color-navy-hover);
    --brand-primary-soft:  var(--color-navy-soft);
    --brand-secondary:     var(--color-navy);
    --brand-accent:        var(--color-accent-tech);
    --brand-red:           var(--color-brand-red);
    --whatsapp:            var(--color-whatsapp);
    --success:             var(--color-success);
    --danger:              var(--color-danger);
    --warning:             var(--color-warning);
    --bg:                  var(--color-bg);
    --bg-soft:             var(--color-bg-soft);
    --surface:             var(--color-surface);
    --text:                var(--color-text);
    --text-muted:          var(--color-text-muted);
    --heading:             var(--color-heading);
    --border:              var(--color-border);
    --transition:          var(--transition-lift);

    --bs-primary:            var(--color-navy);
    --bs-primary-rgb:        0, 0, 42;
    --bs-link-color:         var(--color-navy);
    --bs-link-hover-color:   var(--color-accent-tech-hover);
    --bs-body-color:         var(--color-text);
    --bs-body-font-family:   var(--font-body);
    --bs-border-radius:      0.75rem;
}

/* ---------- Utilitaires typographiques ---------- */
.font-display { font-family: var(--font-display); }
.font-body    { font-family: var(--font-body); }

.text-h1 {
    font-family: var(--font-display);
    font-size: clamp(var(--text-3xl), 4vw, var(--text-5xl));
    font-weight: var(--font-extrabold);
    line-height: var(--leading-tight);
    letter-spacing: var(--tracking-tight);
    color: var(--color-heading);
}
.text-h2 {
    font-family: var(--font-display);
    font-size: clamp(var(--text-2xl), 3vw, var(--text-4xl));
    font-weight: var(--font-extrabold);
    line-height: var(--leading-tight);
    letter-spacing: var(--tracking-tight);
    color: var(--color-heading);
}
.text-h3 {
    font-family: var(--font-display);
    font-size: var(--text-2xl);
    font-weight: var(--font-bold);
    line-height: var(--leading-snug);
    letter-spacing: var(--tracking-tight);
    color: var(--color-heading);
}
.text-h4 {
    font-family: var(--font-display);
    font-size: var(--text-xl);
    font-weight: var(--font-bold);
    line-height: var(--leading-snug);
    color: var(--color-heading);
}
.text-body    { font-size: var(--text-base); line-height: var(--leading-normal); }
.text-caption { font-size: var(--text-sm); color: var(--color-text-muted); line-height: var(--leading-normal); }
.text-price,
.text-price-lg {
    font-variant-numeric: tabular-nums;
    font-feature-settings: "tnum" 1;
    font-weight: var(--weight-price);
    color: var(--color-heading);
}
.text-price    { font-size: var(--text-price); }
.text-price-lg { font-size: var(--text-price-lg); }

:focus-visible {
    outline: none;
    box-shadow: var(--focus-ring);
}
/* ==========================================================================
   Mokhtar GSM — Brand overrides v4
   S'appuie sur variables.css (tokens v4). Inclure AVANT app.css.
   ========================================================================== */

/* Bootstrap — boutons primaires (Navy logo) */
.btn-primary {
    --bs-btn-bg: var(--color-navy);
    --bs-btn-border-color: var(--color-navy);
    --bs-btn-hover-bg: var(--color-navy-hover);
    --bs-btn-hover-border-color: var(--color-navy-hover);
    --bs-btn-active-bg: var(--color-navy-active);
    --bs-btn-active-border-color: var(--color-navy-active);
    border-radius: var(--radius-sm);
    padding: 12px 24px;
    transition: transform var(--transition-lift), box-shadow var(--transition-lift), background var(--transition-base);
}
.btn-primary:hover {
    transform: translateY(var(--btn-lift));
    box-shadow: var(--shadow-md);
}

.btn-outline-primary {
    --bs-btn-color: var(--color-navy);
    --bs-btn-border-color: var(--color-navy);
    --bs-btn-hover-bg: var(--color-navy);
    --bs-btn-hover-border-color: var(--color-navy);
    --bs-btn-active-bg: var(--color-navy);
    border-radius: var(--radius-sm);
}

.text-primary { color: var(--color-navy) !important; }
.bg-primary { background-color: var(--color-navy) !important; }
.text-brand-secondary { color: var(--color-navy) !important; }
.text-promo { color: var(--color-brand-red) !important; }
.bg-brand-soft { background-color: var(--color-bg-soft) !important; }

.btn-whatsapp {
    background-color: var(--color-whatsapp);
    border-color: var(--color-whatsapp);
    color: #fff;
    border-radius: var(--radius-sm);
    padding: 12px 24px;
}
.btn-whatsapp:hover {
    background-color: var(--color-whatsapp-hover);
    color: #fff;
    transform: translateY(var(--btn-lift));
}
/* ==========================================================================
   Mokhtar GSM - Styles applicatifs (composants front-office)
   ========================================================================== */

body {
    background: var(--bg);
    color: var(--text);
    font-family: var(--font-body, "Inter", system-ui, -apple-system, sans-serif);
    line-height: var(--leading-normal, 1.6);
}

h1, h2, h3, h4, h5, .h1, .h2, .h3 {
    font-family: var(--font-main, var(--font-body, "Inter", system-ui, -apple-system, sans-serif));
    color: var(--heading);
    font-weight: 800;
    letter-spacing: var(--tracking-tight, -0.02em);
}
a { text-decoration: none; }
.section { padding: var(--section-y, 3.5rem) 0; }
@media (min-width: 992px) {
    .section { padding: var(--section-y-lg, 5rem) 0; }
}
.section-title {
    font-family: var(--font-display);
    font-weight: 800;
    letter-spacing: var(--tracking-tight, -0.02em);
    margin-bottom: .35rem;
    color: var(--color-heading);
}
.section-subtitle { color: var(--text-muted); margin-bottom: 2rem; line-height: 1.6; }

/* ---------- Topbar ---------- */
.topbar {
    background: var(--color-primary, var(--brand-secondary));
    color: #fff;
    font-size: .85rem;
}
.topbar a { color: inherit; }
.topbar__link { display: inline-flex; align-items: center; gap: .4rem; color: inherit; }
.topbar__text { display: inline-flex; align-items: center; gap: .4rem; opacity: .92; }
.topbar__sep { opacity: .7; }

/* ---------- Header ---------- */
.site-header {
    position: sticky;
    top: 0;
    z-index: 1030;
    background: rgba(255, 255, 255, 0.96);
    backdrop-filter: saturate(180%) blur(10px);
    box-shadow: var(--shadow-sm);
    border-bottom: 1px solid var(--border);
    overflow: visible;
}
.site-header .navbar-collapse { overflow: visible; }
.brand-logo { height: 44px; width: auto; }
.nav-main .nav-link {
    color: var(--heading);
    font-weight: 600;
    padding: .5rem .9rem;
    border-radius: var(--radius-sm);
}
.nav-main .nav-link:hover,
.nav-main .nav-link.active { color: var(--brand-primary); background: var(--brand-primary-soft); }

.icon-btn {
    position: relative;
    width: 44px; height: 44px;
    display: inline-flex; align-items: center; justify-content: center;
    border-radius: var(--radius-pill);
    color: var(--heading);
    border: 1px solid var(--border);
    background: var(--color-bg, #fff);
    transition: var(--transition);
}
.icon-btn:hover { color: var(--color-navy); border-color: var(--color-navy); background: var(--color-navy-soft); }
.icon-btn .badge {
    position: absolute; top: -6px; right: -6px;
    background: var(--color-accent, var(--color-brand-red)); color: #fff; font-weight: 700;
}

/* ---------- Recherche ---------- */
.search-box { position: relative; }
.search-results {
    position: absolute; top: calc(100% + 8px); left: 0; right: 0;
    background: var(--color-bg, #fff); border: 1px solid var(--border); border-radius: var(--radius-md);
    box-shadow: var(--shadow-lg); z-index: 1050; overflow: hidden; display: none;
}
.search-results.show { display: block; }
.search-results a {
    display: flex; gap: .75rem; align-items: center;
    padding: .6rem .85rem; color: var(--text); border-bottom: 1px solid var(--border);
}
.search-results a:last-child { border-bottom: 0; }
.search-results a:hover { background: var(--bg-soft); }
.search-results img { width: 42px; height: 42px; object-fit: contain; border-radius: 8px; background: var(--bg-soft); }

/* ---------- Hero ---------- */
.hero {
    background:
        radial-gradient(900px 320px at 90% 10%, rgba(255, 107, 53, 0.16), transparent 55%),
        linear-gradient(135deg, var(--color-navy) 0%, var(--color-navy-hover) 100%);
    color: #fff;
    border-radius: 0 0 var(--radius-lg) var(--radius-lg);
    overflow: hidden;
}
.hero h1 { color: #fff; font-size: clamp(1.8rem, 4vw, 3rem); }
.hero p { color: rgba(255,255,255,.85); font-size: 1.1rem; }
.hero-img { max-width: 100%; filter: drop-shadow(0 24px 40px rgba(0,0,0,.35)); }

/* Slides du carrousel */
.hero-slide {
    min-height: 420px; display: flex; align-items: center;
    background-size: cover; background-position: center; color: #fff;
    background-color: var(--brand-secondary);
}
.hero-slide.hero {
    background-image:
        radial-gradient(900px 320px at 90% 10%, rgba(255, 107, 53, 0.16), transparent 55%),
        linear-gradient(135deg, var(--color-navy) 0%, var(--color-navy-hover) 100%);
}
.hero-slide-content { max-width: 640px; padding: 2rem 0; }
.hero-slide-content h1 { color: #fff; font-size: clamp(1.8rem, 4vw, 3rem); }
.hero-slide-content p { color: rgba(255,255,255,.85); font-size: 1.15rem; }

/* ---------- Cartes coordonnees (legacy — voir mg-trust-section) ---------- */
/* ---------- Cartes categories ---------- */
.cat-card {
    display: block; text-align: center; padding: 1.4rem 1rem;
    border: none; border-radius: var(--radius-md);
    background: var(--color-bg, #fff); color: var(--heading); transition: var(--transition-lift); height: 100%;
    box-shadow: var(--shadow-card);
}
.cat-card:hover {
    transform: translateY(var(--btn-lift, -2px));
    box-shadow: var(--shadow-card-hover);
    color: var(--color-navy);
}
.cat-card .cat-ic {
    width: 64px; height: 64px; margin: 0 auto .75rem;
    display: flex; align-items: center; justify-content: center;
    border-radius: var(--radius-pill); font-size: 1.8rem;
    transition: transform var(--transition-base), box-shadow var(--transition-base);
}
.cat-card:hover .cat-ic {
    transform: scale(1.06);
}

/* Icones categories — couleurs par famille (accueil + menu) */
.cat-ic-smartphones {
    background: rgba(0, 0, 42, 0.09);
    color: #00002A;
}
.cat-ic-tablettes {
    background: rgba(0, 194, 255, 0.16);
    color: #0095CC;
}
.cat-ic-smartwatches {
    background: rgba(79, 70, 229, 0.12);
    color: #4F46E5;
}
.cat-ic-ecouteurs {
    background: rgba(124, 58, 237, 0.12);
    color: #7C3AED;
}
.cat-ic-chargeurs {
    background: rgba(245, 158, 11, 0.16);
    color: #D97706;
}
.cat-ic-coques {
    background: rgba(224, 7, 12, 0.12);
    color: #E0070C;
}
.cat-ic-gaming {
    background: rgba(5, 150, 105, 0.12);
    color: #059669;
}

.cat-card .count { color: var(--text-muted); font-size: .85rem; }

/* ---------- Pages legales (CGV, confidentialite) ---------- */
.legal-page__card { border-radius: var(--radius-lg); }
.legal-page__body h2.h5 {
    font-family: var(--font-display);
    color: var(--color-heading);
    margin-top: 1.75rem;
    margin-bottom: 0.75rem;
    font-weight: 700;
}
.legal-page__body h2.h5:first-child { margin-top: 0; }
.legal-page__body p,
.legal-page__body li {
    color: var(--color-text);
    font-size: var(--text-sm);
    line-height: 1.7;
}
.legal-page__body ul { padding-left: 1.25rem; margin-bottom: 1rem; }
.legal-page__body a { color: var(--color-navy); font-weight: 500; }

/* ---------- Carte produit ---------- */
.product-card {
    border: none; border-radius: var(--radius-md);
    background: var(--color-bg, #fff); overflow: hidden; height: 100%;
    display: flex; flex-direction: column; transition: var(--transition-lift);
    box-shadow: var(--shadow-card);
}
.product-card:hover { box-shadow: var(--shadow-card-hover); transform: translateY(var(--btn-lift, -2px)); }
.product-thumb {
    position: relative; aspect-ratio: 1/1; background: var(--color-surface-float, var(--bg-soft));
    display: flex; align-items: center; justify-content: center; padding: 1rem;
}
.product-thumb img { max-width: 100%; max-height: 100%; object-fit: contain; }
.product-badge {
    position: absolute; top: 10px; left: 10px;
    background: var(--color-brand-red); color: #fff; font-weight: 700; font-size: .75rem;
    padding: .25rem .55rem; border-radius: var(--radius-sm);
}
.mg-product-card.product-card {
    border: none;
    box-shadow: var(--shadow-card);
}
.product-badge.new { background: var(--color-accent-tech); color: var(--color-navy); left: auto; right: 10px; border-radius: var(--radius-sm); font-weight: 800; }
.wish-btn {
    position: absolute; top: 8px; right: 8px; z-index: 2;
    width: 36px; height: 36px; border-radius: 50%;
    border: 1px solid var(--border); background: var(--color-bg, #fff); color: var(--text-muted);
    display: inline-flex; align-items: center; justify-content: center;
    transition: var(--transition);
}
.wish-btn:hover { color: var(--danger); border-color: var(--danger); }
.wish-btn.active { color: var(--danger); border-color: var(--danger); }
.icon-btn .wishlist-count { position: absolute; top: -6px; right: -6px; background: var(--danger); color: #fff; font-weight: 700; }
.product-body { padding: .9rem 1rem 1.1rem; display: flex; flex-direction: column; flex: 1; }
.product-cat { font-size: .75rem; color: var(--text-muted); text-transform: uppercase; letter-spacing: .03em; }
.product-name { font-size: .98rem; font-weight: 600; color: var(--heading); margin: .15rem 0 .5rem; }
.product-name a { color: inherit; }
.product-name a:hover { color: var(--color-accent-tech-hover); }
.price {
    color: var(--heading);
    font-weight: 800;
    font-size: 1.15rem;
    font-variant-numeric: tabular-nums;
    font-feature-settings: "tnum" 1;
}
.price-old { color: var(--text-muted); text-decoration: line-through; font-size: .9rem; margin-left: .4rem; }
.stock-ok { color: var(--success); font-size: .8rem; }
.stock-preorder { color: #d97706; font-size: .8rem; }
.stock-no { color: var(--danger); font-size: .8rem; }
.rating { color: var(--color-accent, var(--color-brand-red)); font-size: .85rem; }

/* ---------- Why us ---------- */
.feature-box { text-align: center; padding: 1.25rem; }
.feature-box .ic {
    width: 60px; height: 60px; margin: 0 auto 1rem;
    display: flex; align-items: center; justify-content: center; border-radius: var(--radius-pill);
    background: var(--brand-primary-soft); color: var(--brand-primary); font-size: 1.6rem;
}

/* ---------- Avis ---------- */
.review-card { border: 1px solid var(--border); border-radius: var(--radius-md); padding: 1.25rem; height: 100%; background: var(--color-bg, #fff); }

/* ---------- Galerie produit ---------- */
.gallery-main {
    border: 1px solid var(--border); border-radius: var(--radius-md);
    background: var(--bg-soft); aspect-ratio: 1/1; display: flex; align-items: center; justify-content: center; padding: 1.5rem;
}
.gallery-main img { max-width: 100%; max-height: 100%; object-fit: contain; }
.gallery-thumbs { display: flex; gap: .6rem; flex-wrap: wrap; margin-top: .8rem; }
.gallery-thumbs img {
    width: 70px; height: 70px; object-fit: contain; background: var(--bg-soft);
    border: 2px solid var(--border); border-radius: var(--radius-sm); cursor: pointer; padding: 4px;
}
.gallery-thumbs img.active { border-color: var(--color-navy); }

.product-rich-desc { line-height: 1.7; color: var(--text); }
.product-rich-desc p { margin-bottom: 1.15rem; }
.product-rich-desc p:last-child { margin-bottom: 0; }
.product-rich-desc h2,
.product-rich-desc h3 {
    font-family: var(--font-main, var(--font-body, "Inter", system-ui, -apple-system, sans-serif));
    font-weight: 700;
    color: var(--heading);
    margin: 1.75rem 0 0.75rem;
}
.product-rich-desc h2 { font-size: 1.35rem; }
.product-rich-desc h3 { font-size: 1.15rem; }
.product-rich-desc ul,
.product-rich-desc ol { margin: 0 0 1.15rem; padding-left: 1.35rem; }
.product-rich-desc li { margin-bottom: 0.35rem; }
.product-rich-desc strong, .product-rich-desc b { font-weight: 700; }
.product-desc-heading,
.product-specs-title {
    font-family: var(--font-main, var(--font-body, "Inter", system-ui, -apple-system, sans-serif));
    font-size: 1.15rem;
    font-weight: 700;
    color: var(--heading);
    margin: 1.75rem 0 0.75rem;
}
.product-specs-title { margin-top: 2rem; }
.product-feature-list {
    margin: 0 0 1.25rem;
    padding-left: 1.25rem;
}
.product-feature-list li { margin-bottom: 0.45rem; }
.product-rich-desc table { width: 100%; margin-top: 0.5rem; margin-bottom: 1rem; }
.product-rich-desc table th,
.product-rich-desc table td { padding: .6rem .75rem; border: 1px solid var(--border); vertical-align: top; }
.product-rich-desc table th { background: var(--bg-soft); font-weight: 600; width: 38%; }

/* ---------- Footer ---------- */
.site-footer { background: var(--color-primary, var(--brand-secondary)); color: rgba(255,255,255,.82); padding: 3rem 0 1.5rem; }
.site-footer h5 { color: #fff; }
.site-footer a { color: rgba(255,255,255,.82); }
.site-footer a:hover { color: #fff; }
.footer-social a {
    width: 40px; height: 40px; border-radius: var(--radius-pill);
    display: inline-flex; align-items: center; justify-content: center;
    background: rgba(255,255,255,.1); margin-right: .4rem;
}
.footer-social a:hover { background: var(--color-brand-red); }

/* ---------- WhatsApp flottant v3 ---------- */
.whatsapp-float {
    position: fixed; bottom: 22px; right: 22px; z-index: 1040;
    width: 58px; height: 58px; border-radius: var(--radius-pill);
    background: var(--color-whatsapp); color: #fff; font-size: 1.7rem;
    display: flex; align-items: center; justify-content: center;
    box-shadow: 0 8px 24px rgba(37, 211, 102, 0.35);
    transition: transform var(--transition-lift), box-shadow var(--transition-lift);
}
.whatsapp-float:hover {
    color: #fff;
    transform: translateY(var(--btn-lift, -2px)) scale(1.04);
    box-shadow: 0 12px 32px rgba(37, 211, 102, 0.45);
}
.whatsapp-float__dot {
    position: absolute; top: 6px; right: 6px;
    width: 12px; height: 12px;
    background: var(--color-brand-red);
    border: 2px solid #fff;
    border-radius: 50%;
    animation: mg-wa-pulse 2s ease-in-out infinite;
}
@keyframes mg-wa-pulse {
    0%, 100% { transform: scale(1); opacity: 1; }
    50% { transform: scale(1.15); opacity: 0.85; }
}

/* ---------- Divers ---------- */
.breadcrumb a { color: var(--color-navy); }
.badge-soft { background: var(--color-navy-soft); color: var(--color-navy); }
.qty-input { max-width: 110px; }
/* ==========================================================================
   Mokhtar GSM — Composants v4 (Retail Tech Confiance)
   Inclure APRES variables.css et brand.css pour activer les nouveaux styles.
   Classes prefixees mg- pour coexistence avec l'existant.
   ========================================================================== */

/* ================================================================== */
/* BOUTONS & CTA                                                       */
/* ================================================================== */

.mg-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: var(--space-2);
    min-height: var(--btn-height);
    padding: 0 var(--space-6);
    font-family: var(--font-body);
    font-size: var(--text-base);
    font-weight: var(--btn-font-weight);
    line-height: 1;
    border-radius: var(--btn-radius);
    border: 2px solid transparent;
    cursor: pointer;
    text-decoration: none;
    transition: background var(--transition-lift), border-color var(--transition-lift),
                color var(--transition-lift), transform var(--transition-lift), box-shadow var(--transition-lift);
    white-space: nowrap;
}
.mg-btn:disabled,
.mg-btn.is-disabled {
    opacity: 0.55;
    cursor: not-allowed;
    pointer-events: none;
}

/* Primaire — Navy logo */
.mg-btn-primary {
    background: var(--color-navy);
    border-color: var(--color-navy);
    color: #fff;
    box-shadow: var(--shadow-xs);
}
.mg-btn-primary:hover {
    background: var(--color-navy-hover);
    border-color: var(--color-navy-hover);
    color: #fff;
    transform: translateY(var(--btn-lift));
    box-shadow: var(--shadow-md);
}
.mg-btn-primary:active {
    background: var(--color-navy-active);
    transform: translateY(0);
}

/* Secondaire */
.mg-btn-secondary {
    background: var(--color-bg);
    border-color: var(--color-border-strong);
    color: var(--color-heading);
}
.mg-btn-secondary:hover {
    border-color: var(--color-navy);
    color: var(--color-navy);
    background: var(--color-navy-soft);
    transform: translateY(var(--btn-lift));
}

/* Outline */
.mg-btn-outline {
    background: transparent;
    border-color: var(--color-navy);
    color: var(--color-navy);
}
.mg-btn-outline:hover {
    background: var(--color-navy);
    color: var(--color-on-primary);
    transform: translateY(var(--btn-lift));
    box-shadow: var(--shadow-sm);
}

/* WhatsApp */
.mg-btn-whatsapp {
    background: var(--color-whatsapp);
    border-color: var(--color-whatsapp);
    color: #fff;
}
.mg-btn-whatsapp:hover {
    background: var(--color-whatsapp-hover);
    border-color: var(--color-whatsapp-hover);
    color: #fff;
    transform: translateY(var(--btn-lift));
    box-shadow: 0 8px 24px rgba(37, 211, 102, 0.32);
}

/* Promo / urgence */
.mg-btn-promo {
    background: var(--color-accent-promo);
    border-color: var(--color-accent-promo);
    color: var(--color-on-promo);
}
.mg-btn-promo:hover {
    background: var(--color-accent-promo-hover);
    border-color: var(--color-accent-promo-hover);
    color: var(--color-on-promo);
    transform: translateY(var(--btn-lift));
    box-shadow: 0 8px 20px rgba(224, 7, 12, 0.28);
}

/* Hero — fond clair sur image sombre */
.mg-btn-hero-light {
    background: #fff;
    border-color: #fff;
    color: var(--color-secondary);
    font-weight: var(--font-bold);
    min-height: var(--btn-height-lg);
    padding: 0 var(--space-8);
    border-radius: var(--radius-md);
}
.mg-btn-hero-light:hover {
    background: var(--color-bg-soft);
    color: var(--color-navy);
    transform: translateY(var(--btn-lift));
    box-shadow: var(--shadow-lg);
}

/* Ajouter au panier (icone) */
.mg-btn-cart {
    width: 40px;
    height: 40px;
    min-height: auto;
    padding: 0;
    border-radius: var(--radius-sm);
    background: var(--color-navy);
    border-color: var(--color-navy);
    color: #fff;
}
.mg-btn-cart:hover {
    background: var(--color-navy-hover);
    border-color: var(--color-navy-hover);
    transform: scale(1.05);
}

/* Tailles */
.mg-btn-sm { min-height: var(--btn-height-sm); padding: 0 var(--space-4); font-size: var(--text-sm); }
.mg-btn-lg { min-height: var(--btn-height-lg); padding: 0 var(--space-8); font-size: var(--text-lg); }
.mg-btn-block { width: 100%; }

/* ================================================================== */
/* CARTE PRODUIT v2                                                    */
/* ================================================================== */

.mg-product-card {
    display: flex;
    flex-direction: column;
    height: 100%;
    background: var(--color-surface);
    border: none;
    border-radius: var(--card-radius);
    box-shadow: var(--shadow-card);
    overflow: hidden;
    transition: transform var(--transition-lift), box-shadow var(--transition-lift);
}
.mg-product-card:hover {
    transform: translateY(var(--btn-lift));
    box-shadow: var(--shadow-card-hover);
}

.mg-product-card__media {
    position: relative;
    aspect-ratio: var(--card-thumb-ratio);
    background: var(--color-surface-float);
    display: flex;
    align-items: center;
    justify-content: center;
    padding: var(--space-4);
}
.mg-product-card__media img {
    max-width: 100%;
    max-height: 100%;
    object-fit: contain;
    transition: transform var(--transition-slow);
}
.mg-product-card:hover .mg-product-card__media img {
    transform: scale(1.04);
}

.mg-product-card__badge {
    position: absolute;
    top: var(--space-3);
    left: var(--space-3);
    background: var(--badge-promo-bg);
    color: var(--badge-promo-color);
    font-size: var(--text-xs);
    font-weight: var(--font-bold);
    padding: var(--space-1) var(--space-3);
    border-radius: var(--radius-sm);
    letter-spacing: var(--tracking-wide);
}
.mg-product-card__badge--new {
    left: auto;
    right: var(--space-3);
    background: var(--color-accent-tech);
    color: var(--color-navy);
    font-weight: var(--font-bold);
}

.mg-product-card__wish {
    position: absolute;
    top: var(--space-2);
    right: var(--space-2);
    width: 36px;
    height: 36px;
    border-radius: 50%;
    border: 1px solid var(--color-border);
    background: rgba(255,255,255,.92);
    color: var(--color-text-muted);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: var(--transition-base);
    backdrop-filter: blur(4px);
}
.mg-product-card__wish:hover,
.mg-product-card__wish.active,
.mg-product-card__wish.is-active {
    color: var(--color-danger);
    border-color: var(--color-danger);
}

.mg-product-card__body {
    padding: var(--space-4);
    display: flex;
    flex-direction: column;
    flex: 1;
    gap: var(--space-2);
}
.mg-product-card__cat {
    font-size: var(--text-xs);
    font-weight: var(--font-semibold);
    text-transform: uppercase;
    letter-spacing: var(--tracking-wider);
    color: var(--color-text-muted);
}
.mg-product-card__title {
    font-family: var(--font-display);
    font-size: var(--text-base);
    font-weight: var(--font-semibold);
    line-height: var(--leading-snug);
    color: var(--color-heading);
    margin: 0;
}
.mg-product-card__title a { color: inherit; }
.mg-product-card__title a:hover { color: var(--color-accent-tech); }

.mg-product-card__stock {
    font-size: var(--text-sm);
    font-weight: var(--font-medium);
}
.mg-product-card__stock--ok  { color: var(--color-stock-ok); }
.mg-product-card__stock--preorder { color: #d97706; }
.mg-product-card__stock--low { color: var(--color-stock-low); }
.mg-product-card__stock--out { color: var(--color-stock-out); }

.mg-product-card__footer {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    margin-top: auto;
    padding-top: var(--space-2);
}
.mg-product-card__price {
    font-size: var(--text-price);
    font-weight: var(--weight-price);
    font-variant-numeric: tabular-nums;
    font-feature-settings: "tnum" 1;
    color: var(--color-heading);
}
.mg-product-card__price-old {
    font-size: var(--text-price-old);
    color: var(--color-text-muted);
    text-decoration: line-through;
    margin-left: var(--space-2);
}

/* ================================================================== */
/* MEGA-MENU NAVIGATION                                                */
/* ================================================================== */

.mg-nav__list.navbar-nav { flex-direction: row; flex-wrap: wrap; }
.site-header .mg-nav__link.nav-link {
    display: inline-flex;
    align-items: center;
    gap: var(--space-2);
    padding: var(--space-2) var(--space-3);
    font-family: var(--font-body);
    font-size: var(--text-sm);
    font-weight: var(--font-semibold);
    color: var(--color-heading);
    border-radius: var(--radius-sm);
    transition: var(--transition-base);
}
.site-header .mg-nav__link.nav-link:hover,
.site-header .mg-nav__link.nav-link.active,
.site-header .mg-nav__item.is-open .mg-nav__link {
    color: var(--color-navy);
    background: var(--color-navy-soft);
}
.site-header .mg-nav__link--promo { color: var(--color-brand-red) !important; }
.site-header .mg-nav__link--promo:hover { background: var(--color-brand-red-soft) !important; }

.mg-nav__icon {
    width: 28px;
    height: 28px;
    border-radius: var(--radius-xs);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 0.9rem;
    flex-shrink: 0;
}
.mg-mega__link .cat-ic {
    width: 28px;
    height: 28px;
    margin: 0;
    font-size: 0.95rem;
    border-radius: var(--radius-xs);
}

.mg-mega {
    display: none;
    position: absolute;
    top: calc(100% + 8px);
    left: 0;
    min-width: 520px;
    background: var(--color-surface);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-xl);
    padding: var(--space-6);
    z-index: var(--z-dropdown);
}
.site-header .mg-nav__item { position: relative; }
.site-header .mg-nav__item.is-open .mg-mega { display: grid; }
.mg-mega--cols-2 { grid-template-columns: 1fr 1fr; gap: var(--space-4); }

/* Menu Boutique (dropdown categories) */
.site-header .mg-nav__item.dropdown { position: relative; }
.mg-boutique-menu {
    min-width: 280px;
    max-width: 320px;
    padding: var(--space-3);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-lg);
    margin-top: var(--space-2) !important;
}
.mg-boutique-menu .dropdown-header {
    font-family: var(--font-display);
    font-size: var(--text-xs);
    font-weight: var(--font-bold);
    text-transform: uppercase;
    letter-spacing: var(--tracking-wider);
    color: var(--color-text-muted);
    padding: var(--space-2) var(--space-3);
}
.mg-boutique-menu__item {
    display: flex;
    align-items: center;
    gap: var(--space-3);
    padding: var(--space-2) var(--space-3);
    border-radius: var(--radius-sm);
    font-size: var(--text-sm);
    font-weight: var(--font-medium);
}
.mg-boutique-menu__item:hover,
.mg-boutique-menu__item.active {
    background: var(--color-navy-soft);
    color: var(--color-navy);
}
.mg-boutique-menu__item .mg-nav__icon { margin: 0; }
@media (min-width: 992px) {
    .site-header .mg-nav__item.dropdown .dropdown-toggle::after {
        margin-left: var(--space-2);
    }
}
.mg-mega__title {
    font-family: var(--font-display);
    font-size: var(--text-sm);
    font-weight: var(--font-bold);
    color: var(--color-text-muted);
    text-transform: uppercase;
    letter-spacing: var(--tracking-wider);
    margin-bottom: var(--space-3);
}
.mg-mega__link {
    display: flex;
    align-items: center;
    gap: var(--space-3);
    padding: var(--space-2) var(--space-3);
    border-radius: var(--radius-sm);
    color: var(--color-text);
    font-size: var(--text-sm);
    font-weight: var(--font-medium);
}
.mg-mega__link:hover {
    background: var(--color-bg-soft);
    color: var(--color-navy);
}

/* ================================================================== */
/* HERO / BANNIERES                                                    */
/* ================================================================== */

.mg-hero-section .carousel-inner,
.mg-hero-section .carousel-item {
    border-radius: 0 0 var(--radius-xl) var(--radius-xl);
    overflow: hidden;
}

.mg-hero {
    position: relative;
    min-height: var(--hero-min-height);
    display: flex;
    align-items: center;
    background-color: var(--color-secondary);
    background-size: cover;
    background-position: center right;
    overflow: hidden;
}
.mg-hero::after {
    content: '';
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    height: 3px;
    background: linear-gradient(90deg, var(--color-navy) 0%, var(--color-brand-red) 50%, var(--color-accent-tech) 100%);
    z-index: 2;
}
.mg-hero::before {
    content: '';
    position: absolute;
    inset: 0;
    background: var(--hero-overlay);
    z-index: 0;
}
.mg-hero--gradient::before {
    background:
        radial-gradient(900px 320px at 90% 10%, rgba(0, 194, 255, 0.18), transparent 55%),
        linear-gradient(135deg, var(--color-navy) 0%, var(--color-navy-hover) 100%);
}
.mg-hero-section .mg-hero {
    border-radius: 0;
}
.mg-hero .container {
    position: relative;
    z-index: 1;
}
.mg-hero__inner {
    position: relative;
    z-index: 1;
    max-width: 620px;
    padding: var(--space-12) 0;
}
.mg-hero__eyebrow {
    display: inline-flex;
    align-items: center;
    gap: var(--space-2);
    background: var(--color-accent-tech-soft);
    border: 1px solid rgba(0, 194, 255, 0.35);
    color: var(--color-accent-tech);
    font-size: var(--text-sm);
    font-weight: var(--font-semibold);
    padding: var(--space-1) var(--space-4);
    border-radius: var(--radius-pill);
    margin-bottom: var(--space-4);
    backdrop-filter: blur(6px);
}
.mg-hero__title {
    font-family: var(--font-display);
    font-size: var(--hero-title-size);
    font-weight: var(--font-extrabold);
    line-height: var(--leading-tight);
    color: #fff;
    margin-bottom: var(--space-4);
}
.mg-hero__subtitle {
    font-size: var(--text-lg);
    line-height: var(--leading-relaxed);
    color: var(--color-on-dark-muted);
    margin-bottom: var(--space-6);
}
.mg-hero__actions {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-3);
}

/* Variante promo — accent rouge logo */
.mg-hero--promo::before {
    background: linear-gradient(105deg, rgba(0, 0, 42, 0.92) 0%, rgba(224, 7, 12, 0.28) 100%);
}
.mg-hero--promo .mg-hero__eyebrow {
    background: var(--color-brand-red-soft);
    border-color: rgba(224, 7, 12, 0.35);
    color: #fff;
}

/* ================================================================== */
/* SECTION MAGASIN DE CONFIANCE (coordonnees)                          */
/* ================================================================== */

.mg-trust-section {
    position: relative;
    padding: var(--space-10) 0 var(--space-12);
    overflow: hidden;
}
.mg-trust-section__bg {
    position: absolute;
    inset: 0;
    background:
        radial-gradient(900px 320px at 15% 0%, rgba(0, 194, 255, 0.08), transparent 55%),
        radial-gradient(700px 280px at 85% 100%, rgba(224, 7, 12, 0.05), transparent 50%),
        linear-gradient(180deg, var(--color-bg-soft) 0%, var(--color-bg) 100%);
    pointer-events: none;
}
.mg-trust-section__panel {
    position: relative;
    background: var(--color-surface);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-xl);
    box-shadow: var(--shadow-lg);
    padding: clamp(var(--space-8), 4vw, var(--space-12));
    overflow: hidden;
}
.mg-trust-section__panel::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 4px;
    background: linear-gradient(90deg, var(--color-navy) 0%, var(--color-brand-red) 50%, var(--color-accent-tech) 100%);
}
.mg-trust-section__header {
    max-width: 640px;
    margin: 0 auto var(--space-8);
}
.mg-trust-section__badge {
    display: inline-flex;
    align-items: center;
    gap: var(--space-2);
    padding: var(--space-1) var(--space-4);
    margin-bottom: var(--space-4);
    border-radius: var(--radius-pill);
    background: var(--color-navy-soft);
    border: 1px solid rgba(0, 0, 42, 0.10);
    color: var(--color-navy);
    font-size: var(--text-sm);
    font-weight: var(--font-semibold);
    letter-spacing: var(--tracking-wide);
}
.mg-trust-section__title {
    font-family: var(--font-display);
    font-size: clamp(var(--text-2xl), 3vw, var(--text-4xl));
    font-weight: var(--font-extrabold);
    line-height: var(--leading-tight);
    color: var(--color-heading);
    margin-bottom: var(--space-3);
}
.mg-trust-section__lead {
    font-size: var(--text-lg);
    line-height: var(--leading-relaxed);
    color: var(--color-text-muted);
    margin: 0;
}

.mg-trust-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: var(--space-4);
    margin-bottom: var(--space-6);
}
.mg-trust-card {
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: var(--space-2);
    padding: var(--space-5);
    min-height: 100%;
    background: var(--color-bg-soft);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-lg);
    transition: var(--transition-base);
    color: inherit;
    text-decoration: none;
}
.mg-trust-card--link:hover {
    transform: translateY(var(--btn-lift));
    box-shadow: var(--shadow-md);
    border-color: rgba(0, 0, 42, 0.12);
    background: var(--color-surface);
    color: inherit;
}
.mg-trust-card--link:hover .mg-trust-card__arrow {
    opacity: 1;
    transform: translate(2px, -2px);
}
.mg-trust-card--highlight {
    background: linear-gradient(145deg, rgba(37, 211, 102, 0.08) 0%, var(--color-bg-soft) 100%);
    border-color: rgba(37, 211, 102, 0.28);
}
.mg-trust-card--highlight:hover {
    border-color: var(--color-whatsapp);
    box-shadow: 0 8px 24px rgba(37, 211, 102, 0.18);
}
.mg-trust-card__icon {
    width: 52px;
    height: 52px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: var(--radius-md);
    font-size: 1.35rem;
    margin-bottom: var(--space-1);
}
.mg-trust-card__icon--addr  { background: var(--color-navy-soft); color: var(--color-navy); }
.mg-trust-card__icon--phone { background: var(--color-navy-soft); color: var(--color-navy); }
.mg-trust-card__icon--wa    { background: var(--color-whatsapp-soft); color: var(--color-whatsapp); }
.mg-trust-card__icon--email { background: rgba(220, 38, 38, 0.10); color: var(--color-danger); }
.mg-trust-card__icon--hours { background: var(--color-warning-soft); color: var(--color-warning); }
.mg-trust-card__icon--maps  { background: var(--color-navy-soft); color: var(--color-navy); }
.mg-trust-card__label {
    font-family: var(--font-display);
    font-size: var(--text-sm);
    font-weight: var(--font-bold);
    color: var(--color-heading);
    text-transform: uppercase;
    letter-spacing: var(--tracking-wider);
}
.mg-trust-card__value {
    font-size: var(--text-sm);
    line-height: var(--leading-relaxed);
    color: var(--color-text-muted);
}
.mg-trust-card__arrow {
    position: absolute;
    top: var(--space-4);
    right: var(--space-4);
    width: 28px;
    height: 28px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: var(--radius-pill);
    background: var(--color-navy-soft);
    color: var(--color-navy);
    font-size: 0.85rem;
    opacity: 0;
    transition: var(--transition-base);
}

.mg-trust-section__pills {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: var(--space-2);
    margin-bottom: var(--space-6);
    padding-top: var(--space-2);
    border-top: 1px solid var(--color-divider);
}
.mg-trust-pill {
    display: inline-flex;
    align-items: center;
    gap: var(--space-2);
    padding: var(--space-2) var(--space-4);
    border-radius: var(--radius-pill);
    background: var(--color-bg-muted);
    border: 1px solid var(--color-border);
    color: var(--color-secondary);
    font-size: var(--text-sm);
    font-weight: var(--font-medium);
}
.mg-trust-pill i {
    color: var(--color-accent-tech);
    font-size: 1rem;
}

.mg-trust-section__cta {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: var(--space-3);
}

@media (max-width: 991.98px) {
    .mg-trust-grid {
        grid-template-columns: repeat(2, 1fr);
    }
}
@media (max-width: 575.98px) {
    .mg-trust-section {
        padding: var(--space-8) 0;
    }
    .mg-trust-section__panel {
        padding: var(--space-6);
        border-radius: var(--radius-lg);
    }
    .mg-trust-grid {
        grid-template-columns: 1fr;
    }
    .mg-trust-section__cta .mg-btn {
        flex: 1 1 100%;
    }
    .mg-trust-card__arrow {
        opacity: 1;
    }
}

/* ================================================================== */
/* POURQUOI NOUS — icones SVG                                          */
/* ================================================================== */

.mg-features {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
    gap: var(--space-6);
}
.mg-feature {
    text-align: center;
    padding: var(--space-6) var(--space-4);
}
.mg-feature__icon {
    width: 64px;
    height: 64px;
    margin: 0 auto var(--space-4);
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: var(--radius-pill);
    background: var(--color-primary-soft);
}
.mg-feature__icon svg {
    width: 28px;
    height: 28px;
    stroke: var(--color-primary);
    fill: none;
    stroke-width: 2;
    stroke-linecap: round;
    stroke-linejoin: round;
}
.mg-feature__title {
    font-family: var(--font-display);
    font-size: var(--text-base);
    font-weight: var(--font-bold);
    color: var(--color-heading);
    margin-bottom: var(--space-2);
}
.mg-feature__text {
    font-size: var(--text-sm);
    color: var(--color-text-muted);
    line-height: var(--leading-normal);
}

/* Couleurs par feature */
.mg-feature--garantie .mg-feature__icon { background: var(--color-primary-soft); }
.mg-feature--garantie .mg-feature__icon svg { stroke: var(--color-primary); }
.mg-feature--livraison .mg-feature__icon { background: var(--color-success-soft); }
.mg-feature--livraison .mg-feature__icon svg { stroke: var(--color-success); }
.mg-feature--cod .mg-feature__icon { background: var(--color-accent-promo-soft); }
.mg-feature--cod .mg-feature__icon svg { stroke: var(--color-accent-promo); }
.mg-feature--support .mg-feature__icon { background: var(--color-accent-tech-soft); }
.mg-feature--support .mg-feature__icon svg { stroke: var(--color-accent, var(--color-brand-red)); }
.mg-feature--sav .mg-feature__icon { background: var(--color-secondary-soft); }
.mg-feature--sav .mg-feature__icon svg { stroke: var(--color-secondary); }

/* ================================================================== */
/* FOOTER                                                              */
/* ================================================================== */

.mg-footer-social a {
    width: 42px;
    height: 42px;
    border-radius: var(--radius-pill);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: rgba(255,255,255,.08);
    border: 1px solid rgba(255,255,255,.12);
    color: var(--color-on-dark-muted);
    transition: var(--transition-base);
}
.mg-footer-social a:hover {
    background: var(--color-primary);
    border-color: var(--color-primary);
    color: #fff;
    transform: translateY(-2px);
}

@media (max-width: 991.98px) {
    .site-header .mg-nav__list.navbar-nav { flex-direction: column; align-items: stretch !important; }
    .mg-boutique-menu {
        position: static !important;
        transform: none !important;
        min-width: 0;
        max-width: none;
        box-shadow: none;
        border: 0;
        padding: var(--space-1) 0 var(--space-3);
        margin: 0 0 0 var(--space-3) !important;
        background: transparent;
    }
    .site-header .mg-nav__item.dropdown .dropdown-toggle { width: 100%; text-align: left; }
}

/* ================================================================== */
/* FICHE PRODUIT — commande WhatsApp v4                                */
/* ================================================================== */

.mg-product-wa {
    background: var(--color-bg-soft);
    border-left: 4px solid var(--color-whatsapp) !important;
    border-radius: var(--radius-md) !important;
}

.mg-product-wa .h6 i.text-success {
    color: var(--color-whatsapp) !important;
}

.mg-label-ar {
    font-family: "Cairo", sans-serif;
    font-weight: 700;
}