/* ══════════════════════════════════════════════════════════════════
   BrahimGSM — Systeme de design
   Jetons, remise a zero, typographie, grille, boutons, formulaires.

   Parente assumee avec forcemobile.com : meme famille de mise en page
   (blanc dominant, panneaux detoures, prix en avant, hauteurs reservees
   sur les cartes). L'identite, elle, est propre a BrahimGSM :

     · couleurs tirees du LOGO de la boutique — marine #15324A, ambre
       #E07A2F et cyan #0EA5C9. Le cyan n'existe pas chez Force Mobiles :
       c'est le marqueur le plus visible des deux enseignes.
     · page BLANCHE et bandes de section teintees, la ou Force Mobiles
       pose des cartes blanches sur un canevas gris. Le rapport est
       inverse, l'impression generale differe des le premier coup d'oeil.
     · Manrope (humaniste, arrondie) au lieu de Space Grotesk (techno,
       carree).
     · angles un cran plus doux, ombres plus resserrees.
   ══════════════════════════════════════════════════════════════════ */

/* ── 1. Jetons ─────────────────────────────────────────────────── */
:root {
    /* Couleurs de marque — relevees sur assets/images/logo-mark.svg */
    --mg-navy:        #15324A;
    --mg-navy-700:    #1E4667;
    --mg-navy-900:    #0C2033;
    --mg-orange:      #E07A2F;   /* ambre du logo, plus chaud que l'orange fm */
    --mg-orange-600:  #C4661F;
    --mg-orange-50:   #FDF1E4;
    --mg-cyan:        #0EA5C9;   /* accent secondaire, propre a BrahimGSM */
    --mg-cyan-600:    #0B87A6;
    --mg-cyan-50:     #E4F6FB;

    /* Neutres — page blanche, bandes teintees pour rythmer les sections */
    --mg-white:       #ffffff;
    --mg-bg:          #ffffff;
    --mg-panel:       #ffffff;
    --mg-surface:     #F1F4F7;
    --mg-surface-2:   #E5EAF0;
    --mg-border:      #DFE5EC;
    --mg-border-soft: #EDF1F5;

    /* Texte */
    --mg-ink:         #14202E;
    --mg-ink-soft:    #4E5C6B;
    --mg-ink-muted:   #7C8896;

    /* Etats */
    --mg-green:       #17915A;
    --mg-green-50:    #E6F5ED;
    --mg-red:         #C43F32;
    --mg-red-50:      #FBEDEB;
    --mg-wa:          #25D366;

    /* Typographie */
    --mg-font-head: 'Manrope', system-ui, sans-serif;
    --mg-font-body: 'Inter', system-ui, -apple-system, sans-serif;

    --mg-t-display: clamp(2.6rem, 5.2vw, 4.4rem);
    --mg-t-h1:      clamp(2.2rem, 4.2vw, 3.4rem);
    --mg-t-h2:      clamp(1.85rem, 3.2vw, 2.7rem);
    --mg-t-h3:      clamp(1.15rem, 1.6vw, 1.4rem);
    --mg-t-lead:    clamp(1rem, 1.3vw, 1.15rem);

    /* Espacement (base 4px) */
    --mg-sp-1: 4px;   --mg-sp-2: 8px;   --mg-sp-3: 12px;
    --mg-sp-4: 16px;  --mg-sp-5: 20px;  --mg-sp-6: 24px;
    --mg-sp-8: 32px;  --mg-sp-10: 40px; --mg-sp-12: 48px;
    --mg-sp-16: 64px; --mg-sp-20: 80px;
    /* Rythme vertical. Deux sections voisines cumulent leur retrait :
       a 116px cela faisait 232px de vide entre chaque bloc, bien trop.
       A 56px on retombe sur ~112px — de l'air, sans le trou. */
    --mg-section: clamp(40px, 4.4vw, 56px);

    /* Rayons — un cran plus doux que chez Force Mobiles */
    --mg-r-xs: 6px;   --mg-r-sm: 10px;
    --mg-r-md: 12px;  --mg-r-lg: 16px;
    --mg-r-xl: 22px;  --mg-r-pill: 999px;

    /* Ombres — resserrees : moins de flou, plus courtes. Sur page blanche
       une ombre etalee devient un halo gris ; ici elle sert seulement a
       decoller le panneau, le filet fait le reste. */
    --mg-sh-xs: 0 1px 2px rgba(21, 50, 74, .05);
    --mg-sh-sm: 0 2px 6px rgba(21, 50, 74, .06);
    --mg-sh-md: 0 6px 16px rgba(21, 50, 74, .09);
    --mg-sh-lg: 0 14px 34px rgba(21, 50, 74, .12);
    --mg-sh-orange: 0 6px 18px rgba(224, 122, 47, .28);

    /* Mouvement */
    --mg-ease: cubic-bezier(.4, 0, .2, 1);
    --mg-t-fast: .18s var(--mg-ease);
    --mg-t-base: .28s var(--mg-ease);

    --mg-container: 1280px;
    --mg-header-h: 82px;
    --mg-bottomnav-h: 62px;
}

/* ── 2. Remise a zero ──────────────────────────────────────────── */
*, *::before, *::after { box-sizing: border-box; }
* { margin: 0; }

html {
    -webkit-text-size-adjust: 100%;
    scroll-behavior: smooth;
    scroll-padding-top: calc(var(--mg-header-total, 121px) + 16px);
}
@media (prefers-reduced-motion: reduce) {
    html { scroll-behavior: auto; }
    *, *::before, *::after { animation-duration: .01ms !important; transition-duration: .01ms !important; }
}

body {
    background: var(--mg-bg);
    color: var(--mg-ink);
    font-family: var(--mg-font-body);
    font-size: 1rem;
    line-height: 1.65;
    font-weight: 400;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    min-height: 100vh;
}

img, picture, svg, video, canvas { display: block; max-width: 100%; }
img { height: auto; }
input, button, textarea, select { font: inherit; color: inherit; }
button { background: none; border: 0; cursor: pointer; }
a { color: inherit; text-decoration: none; }
ul, ol { padding: 0; list-style: none; }
table { border-collapse: collapse; width: 100%; }
hr { border: 0; border-top: 1px solid var(--mg-border); margin: var(--mg-sp-6) 0; }

:focus-visible { outline: 2px solid var(--mg-cyan); outline-offset: 2px; }
::selection { background: var(--mg-orange); color: #fff; }

/* iOS Safari zoome sur tout champ sous 16px et ne dezoome pas ensuite. */
@media (max-width: 768px) { input, select, textarea { font-size: 16px; } }

/* ── 3. Typographie ────────────────────────────────────────────── */
h1, h2, h3, h4, h5, h6,
.h4, .h5, .h6, .display-6, .text-h1, .text-h2, .text-h3 {
    font-family: var(--mg-font-head);
    font-weight: 700;
    line-height: 1.18;
    letter-spacing: -.03em;
    color: var(--mg-ink);
    text-wrap: balance;
}
h1, .text-h1 { font-size: var(--mg-t-h1); }
h2, .text-h2 { font-size: var(--mg-t-h2); }
h3, .text-h3 { font-size: var(--mg-t-h3); }
h4, .h4 { font-size: 1.1rem; }
h5, .h5 { font-size: 1rem; }
h6, .h6 { font-size: .9rem; }
.display-6 { font-size: var(--mg-t-h2); }
.lead { font-size: var(--mg-t-lead); color: var(--mg-ink-soft); line-height: 1.7; }
strong, b { font-weight: 600; }
small, .small { font-size: .85rem; }

/* Sur-titre — petit losange cyan puis capitales espacees.
   Force Mobiles pose un tiret orange ; le losange cyan est la signature
   BrahimGSM et reprend l'accent du logo. */
.mg-eyebrow, .eyebrow, .section-eyebrow, .mg-section-kicker {
    display: inline-flex; align-items: center; gap: var(--mg-sp-2);
    font-family: var(--mg-font-head);
    font-size: .75rem; font-weight: 600;
    letter-spacing: .16em; text-transform: uppercase;
    color: var(--mg-orange);
    margin-bottom: var(--mg-sp-4);
}
.mg-eyebrow::before, .eyebrow::before, .section-eyebrow::before, .mg-section-kicker::before {
    content: ''; width: 8px; height: 8px; flex-shrink: 0;
    background: var(--mg-cyan); border-radius: 2px;
    transform: rotate(45deg);
}

/* Dans un bloc centre, le sur-titre suit : inline-flex, il est porte
   par le text-align du parent, mais on force le cas ou il est en block. */
.text-center > .mg-eyebrow,
.text-center > .mg-section-kicker,
.text-center > .eyebrow { justify-content: center; }

/* ── 4. Mise en page ───────────────────────────────────────────── */
.container {
    width: 100%;
    max-width: var(--mg-container);
    margin-inline: auto;
    padding-inline: var(--mg-sp-6);
}
@media (min-width: 768px) { .container { padding-inline: var(--mg-sp-10); } }

.section, .mg-section { padding-block: var(--mg-section); }
.mg-section--tight { padding-block: clamp(48px, 5vw, 72px); }
.mg-section--surface { background: var(--mg-panel); }

/* Grille 12 colonnes — le balisage de BrahimGSM utilise row/col.
   minmax(0,1fr) et non 1fr : sans cela une colonne refuse de passer
   sous la largeur de son contenu et deborde de la rangee. */
.row {
    display: flex; flex-wrap: wrap;
    margin-inline: calc(var(--gx, 24px) / -2);
}
.row > * {
    flex: 0 0 auto; width: 100%; min-width: 0;
    padding-inline: calc(var(--gx, 24px) / 2);
    margin-top: var(--gy, 0);
}
.g-0{--gx:0;--gy:0} .g-1{--gx:4px;--gy:4px} .g-2{--gx:8px;--gy:8px}
.g-3{--gx:16px;--gy:16px} .g-4{--gx:24px;--gy:24px} .g-5{--gx:40px;--gy:40px}

.col      { flex: 1 0 0%; }
.col-auto { width: auto; }
.col-1{width:8.3333%}  .col-2{width:16.6667%} .col-3{width:25%}
.col-4{width:33.3333%} .col-5{width:41.6667%} .col-6{width:50%}
.col-7{width:58.3333%} .col-8{width:66.6667%} .col-9{width:75%}
.col-10{width:83.3333%} .col-11{width:91.6667%} .col-12{width:100%}
@media (min-width:576px){ .col-sm{flex:1 0 0%;width:auto} .col-sm-4{width:33.3333%} .col-sm-6{width:50%} .col-sm-12{width:100%} .g-sm-3{--gx:16px;--gy:16px} }
@media (min-width:768px){ .col-md{flex:1 0 0%;width:auto}
  .col-md-2{width:16.6667%} .col-md-3{width:25%} .col-md-4{width:33.3333%}
  .col-md-5{width:41.6667%} .col-md-6{width:50%} .col-md-7{width:58.3333%}
  .col-md-8{width:66.6667%} .col-md-9{width:75%} .col-md-12{width:100%} .g-md-4{--gx:24px;--gy:24px} }
@media (min-width:992px){ .col-lg{flex:1 0 0%;width:auto}
  .col-lg-2{width:16.6667%} .col-lg-3{width:25%} .col-lg-4{width:33.3333%}
  .col-lg-5{width:41.6667%} .col-lg-6{width:50%} .col-lg-7{width:58.3333%}
  .col-lg-8{width:66.6667%} .col-lg-9{width:75%} .col-lg-12{width:100%} .g-lg-5{--gx:40px;--gy:40px} }
@media (min-width:1200px){ .col-xl{flex:1 0 0%;width:auto} .col-xl-2{width:16.6667%} .col-xl-3{width:25%} .col-xl-4{width:33.3333%} }

/* ── 5. Utilitaires ────────────────────────────────────────────── */
.d-none{display:none!important} .d-block{display:block!important}
.d-inline{display:inline!important} .d-inline-block{display:inline-block!important}
.d-flex{display:flex!important} .d-inline-flex{display:inline-flex!important} .d-grid{display:grid!important}
@media(min-width:576px){.d-sm-none{display:none!important}.d-sm-block{display:block!important}.d-sm-flex{display:flex!important}.d-sm-inline{display:inline!important}}
@media(min-width:768px){.d-md-none{display:none!important}.d-md-block{display:block!important}.d-md-flex{display:flex!important}.d-md-grid{display:grid!important}.d-md-inline{display:inline!important}.d-md-inline-flex{display:inline-flex!important}}
@media(min-width:992px){.d-lg-none{display:none!important}.d-lg-block{display:block!important}.d-lg-flex{display:flex!important}.d-lg-inline{display:inline!important}.d-lg-inline-flex{display:inline-flex!important}}
@media(min-width:1200px){.d-xl-none{display:none!important}.d-xl-inline{display:inline!important}.d-xl-inline-flex{display:inline-flex!important}}

.flex-column{flex-direction:column!important} .flex-wrap{flex-wrap:wrap!important}
.flex-grow-1{flex-grow:1!important} .flex-shrink-0{flex-shrink:0!important}
@media(min-width:768px){.flex-md-row{flex-direction:row!important}}
.justify-content-start{justify-content:flex-start!important}
.justify-content-center{justify-content:center!important}
.justify-content-between{justify-content:space-between!important}
.justify-content-end{justify-content:flex-end!important}
@media(min-width:576px){.justify-content-sm-center{justify-content:center!important}}
.align-items-start{align-items:flex-start!important}
.align-items-center{align-items:center!important}
.align-items-end{align-items:flex-end!important}
@media(min-width:768px){.align-items-md-center{align-items:center!important}}
.align-middle{vertical-align:middle!important}
.gap-1{gap:var(--mg-sp-1)!important} .gap-2{gap:var(--mg-sp-2)!important}
.gap-3{gap:var(--mg-sp-4)!important} .gap-4{gap:var(--mg-sp-6)!important}
.ms-auto{margin-left:auto!important} .mt-auto{margin-top:auto!important}

.m-0{margin:0!important}
.mb-0{margin-bottom:0!important} .mb-1{margin-bottom:var(--mg-sp-1)!important}
.mb-2{margin-bottom:var(--mg-sp-2)!important} .mb-3{margin-bottom:var(--mg-sp-4)!important}
.mb-4{margin-bottom:var(--mg-sp-6)!important} .mb-5{margin-bottom:var(--mg-sp-10)!important}
.mt-1{margin-top:var(--mg-sp-1)!important} .mt-2{margin-top:var(--mg-sp-2)!important}
.mt-3{margin-top:var(--mg-sp-4)!important} .mt-4{margin-top:var(--mg-sp-6)!important}
.mt-5{margin-top:var(--mg-sp-10)!important}
.me-1{margin-right:var(--mg-sp-1)!important} .me-2{margin-right:var(--mg-sp-2)!important}
.ms-1{margin-left:var(--mg-sp-1)!important} .ms-2{margin-left:var(--mg-sp-2)!important}
.p-0{padding:0!important} .p-2{padding:var(--mg-sp-2)!important}
.p-3{padding:var(--mg-sp-4)!important} .p-4{padding:var(--mg-sp-6)!important} .p-5{padding:var(--mg-sp-10)!important}
@media(min-width:768px){.p-md-4{padding:var(--mg-sp-6)!important}.p-md-5{padding:var(--mg-sp-10)!important}}
.pt-3{padding-top:var(--mg-sp-4)!important} .pt-4{padding-top:var(--mg-sp-6)!important} .pt-5{padding-top:var(--mg-sp-10)!important}
.pb-0{padding-bottom:0!important} .pb-5{padding-bottom:var(--mg-sp-10)!important}
.py-0{padding-block:0!important} .py-1{padding-block:var(--mg-sp-1)!important}
.py-2{padding-block:var(--mg-sp-2)!important} .py-3{padding-block:var(--mg-sp-4)!important}
.py-4{padding-block:var(--mg-sp-6)!important} .py-5{padding-block:var(--mg-sp-10)!important}
@media(min-width:992px){.py-lg-5{padding-block:var(--mg-sp-16)!important}}
.px-2{padding-inline:var(--mg-sp-2)!important}

.text-center{text-align:center!important} .text-end{text-align:right!important}
@media(min-width:992px){.text-lg-start{text-align:left!important}}
.text-uppercase{text-transform:uppercase!important;letter-spacing:.1em}
.text-nowrap{white-space:nowrap!important}
.text-decoration-none{text-decoration:none!important}
.text-decoration-line-through{text-decoration:line-through!important}
.text-muted{color:var(--mg-ink-muted)!important}
.text-dark{color:var(--mg-ink)!important} .text-primary{color:var(--mg-navy)!important}
.text-light{color:#fff!important}
.text-danger{color:var(--mg-red)!important} .text-success{color:var(--mg-green)!important}
.text-warning{color:var(--mg-orange)!important} .text-info{color:var(--mg-navy-700)!important}
.fw-bold{font-weight:700!important} .fw-semibold{font-weight:600!important}
.fs-6{font-size:1rem!important}
.list-unstyled{list-style:none;padding-left:0}

.bg-light{background:var(--mg-surface)!important}
.bg-primary{background:var(--mg-navy)!important;color:#fff!important}
.bg-danger{background:var(--mg-red)!important;color:#fff!important}
.bg-success-subtle{background:#dcfce7!important}
.bg-brand-soft{background:var(--mg-panel)!important}

.border{border:1px solid var(--mg-border)!important} .border-0{border:0!important}
.border-top{border-top:1px solid var(--mg-border)!important}
.border-bottom{border-bottom:1px solid var(--mg-border)!important}
.rounded{border-radius:var(--mg-r-md)!important}
.shadow-sm{box-shadow:var(--mg-sh-sm)!important} .shadow-lg{box-shadow:var(--mg-sh-lg)!important}
.w-100{width:100%!important} .h-100{height:100%!important} .min-w-0{min-width:0!important}
.position-relative{position:relative!important} .top{top:0}
.order-1{order:1} .order-2{order:2}
@media(min-width:992px){.order-lg-1{order:1}.order-lg-2{order:2}}
.visually-hidden{position:absolute!important;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}

/* ── 6. Boutons ────────────────────────────────────────────────── */
.btn, .mg-btn, .mg-btn {
    display: inline-flex; align-items: center; justify-content: center;
    gap: var(--mg-sp-2);
    padding: 14px 26px;
    font-family: var(--mg-font-head);
    font-size: .925rem; font-weight: 600;
    letter-spacing: -.01em;
    border-radius: var(--mg-r-md);
    border: 1.5px solid transparent;
    background: var(--mg-surface);
    color: var(--mg-navy);
    cursor: pointer;
    white-space: nowrap;
    transition: background var(--mg-t-base), color var(--mg-t-base),
                border-color var(--mg-t-base), transform var(--mg-t-fast),
                box-shadow var(--mg-t-base);
}
.btn:active, .mg-btn:active { transform: translateY(1px); }
.btn:disabled, .mg-btn:disabled, .btn[disabled], .mg-btn[disabled] {
    opacity: .5; cursor: not-allowed; transform: none; box-shadow: none;
}

.btn-primary, .mg-btn-primary, .mg-btn--primary,
.mg-btn-cta, .mg-btn-cta-cart {
    background: var(--mg-orange); color: #fff;
    box-shadow: none;
}
.btn-primary:hover, .mg-btn-primary:hover, .mg-btn-cta-cart:hover {
    background: var(--mg-orange-600); color: #fff;
    transform: translateY(-2px);
    box-shadow: 0 14px 34px rgba(255, 107, 0, .34);
}

.btn-navy, .mg-btn-secondary, .mg-btn--navy {
    background: var(--mg-navy); color: #fff;
    box-shadow: 0 10px 26px rgba(6, 44, 89, .22);
}
.btn-navy:hover, .mg-btn-secondary:hover { background: var(--mg-navy-700); color: #fff; transform: translateY(-2px); }

.btn-outline, .btn-outline-primary, .btn-outline-secondary,
.mg-btn-outline, .btn-white, .mg-btn--ghost {
    background: transparent; color: var(--mg-navy);
    border-color: var(--mg-border);
}
.btn-outline:hover, .btn-outline-primary:hover, .btn-outline-secondary:hover,
.mg-btn-outline:hover, .btn-white:hover {
    border-color: var(--mg-cyan); background: var(--mg-cyan-50); color: var(--mg-navy);
}

.btn-outline-danger { background: transparent; color: var(--mg-red); border-color: #f3c9c9; }
.btn-outline-danger:hover { background: var(--mg-red); border-color: var(--mg-red); color: #fff; }
.btn-outline-success { background: transparent; color: var(--mg-green); border-color: #bfe6cd; }
.btn-outline-success:hover { background: var(--mg-green); border-color: var(--mg-green); color: #fff; }

.btn-whatsapp, .mg-btn-whatsapp { background: var(--mg-wa); color: #fff; }
.btn-whatsapp:hover, .mg-btn-whatsapp:hover { background: #1db855; color: #fff; transform: translateY(-2px); }

.btn-out-of-stock { background: var(--mg-surface); color: var(--mg-ink-muted); cursor: not-allowed; }

.btn-link {
    background: none; border-color: transparent; padding: 0;
    color: var(--mg-navy); text-decoration: underline; text-underline-offset: 3px;
    box-shadow: none;
}
.btn-link:hover { color: var(--mg-orange); transform: none; }

.btn-sm, .mg-btn-sm, .mg-btn--sm { padding: 10px 18px; font-size: .85rem; }
.btn-lg, .mg-btn-lg, .mg-btn--lg { padding: 17px 34px; font-size: 1rem; }
.d-grid > .btn, .d-grid > .mg-btn { width: 100%; }

/* Lien fleche */
.mg-link, .mg-section-head__link {
    display: inline-flex; align-items: center; gap: var(--mg-sp-2);
    font-family: var(--mg-font-head); font-weight: 600; font-size: .925rem;
    color: var(--mg-navy);
    transition: gap var(--mg-t-base), color var(--mg-t-base);
}
.mg-link:hover, .mg-section-head__link:hover { color: var(--mg-orange); gap: 14px; }

/* ── 7. Formulaires ───────────────────────────────────────────── */
.form-label {
    display: block; margin-bottom: var(--mg-sp-2);
    font-family: var(--mg-font-head);
    font-size: .85rem; font-weight: 600;
    color: var(--mg-ink);
}
.form-control, .form-select, .qty-input {
    display: block; width: 100%;
    padding: 12px 14px;
    background: var(--mg-white);
    color: var(--mg-ink);
    border: 1.5px solid var(--mg-border);
    border-radius: var(--mg-r-md);
    font-size: .95rem;
    transition: border-color var(--mg-t-base), box-shadow var(--mg-t-base);
}
.form-control::placeholder { color: var(--mg-ink-muted); }
.form-control:focus, .form-select:focus, .qty-input:focus {
    outline: none;
    border-color: var(--mg-cyan);
    box-shadow: 0 0 0 3px rgba(14, 165, 201, .15);
}
.form-control:disabled, .form-select:disabled { background: var(--mg-surface); opacity: .8; }
textarea.form-control { min-height: 128px; resize: vertical; }

.form-select {
    appearance: none; padding-right: 40px;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='none' stroke='%23062c59' stroke-width='2'%3E%3Cpath d='M4 6l4 4 4-4'/%3E%3C/svg%3E");
    background-repeat: no-repeat; background-position: right 14px center; background-size: 14px;
}
.form-control-sm, .form-select-sm { padding: 8px 11px; font-size: .85rem; }
.form-text { display: block; margin-top: var(--mg-sp-1); font-size: .8rem; color: var(--mg-ink-muted); }
.invalid-feedback { display: block; margin-top: var(--mg-sp-1); font-size: .8rem; color: var(--mg-red); font-weight: 500; }

.form-check { display: flex; align-items: center; gap: var(--mg-sp-2); min-height: 26px; }
.form-check-input {
    appearance: none; flex-shrink: 0;
    width: 20px; height: 20px;
    background: #fff;
    border: 1.5px solid var(--mg-border);
    border-radius: var(--mg-r-xs);
    cursor: pointer;
    transition: background var(--mg-t-fast), border-color var(--mg-t-fast);
}
.form-check-input[type="radio"] { border-radius: var(--mg-r-pill); }
.form-check-input:checked { background: var(--mg-cyan); border-color: var(--mg-cyan); }
.form-check-input:checked::after {
    content: ""; display: block; width: 100%; height: 100%;
    background: no-repeat center/68% url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='none' stroke='%23fff' stroke-width='3'%3E%3Cpath d='M3 8.5l3.2 3.2L13 5'/%3E%3C/svg%3E");
}
.form-check-input[type="radio"]:checked::after { background: radial-gradient(circle, #fff 36%, transparent 38%); }
.form-check-label { cursor: pointer; font-size: .9rem; }
.form-switch .form-check-input { width: 42px; border-radius: var(--mg-r-pill); position: relative; }
.form-switch .form-check-input::after {
    content: ""; position: absolute; top: 2px; left: 2px;
    width: 13px; height: 13px; border-radius: 50%;
    background: var(--mg-ink-muted);
    transition: transform var(--mg-t-fast), background var(--mg-t-fast);
}
.form-switch .form-check-input:checked::after { transform: translateX(20px); background: #fff; }

.input-group { display: flex; }
.input-group > .form-control { flex: 1 1 auto; border-top-right-radius: 0; border-bottom-right-radius: 0; }
.input-group > .btn, .input-group > .mg-btn { flex-shrink: 0; border-top-left-radius: 0; border-bottom-left-radius: 0; }

/* Selecteur de quantite */
.qty-group {
    display: inline-flex; align-items: stretch;
    border: 1.5px solid var(--mg-border);
    border-radius: var(--mg-r-md);
    overflow: hidden; background: #fff;
}
.qty-group .qty-input, .qty-group input[type="number"] {
    width: 56px; text-align: center; border: 0; border-radius: 0;
    padding-inline: 0; background: #fff;
    font-family: var(--mg-font-head); font-weight: 600;
    /* Les fleches natives du champ nombre occupaient la moitie d'une case de
       56px : le chiffre se retrouvait tronque, voire invisible. */
    appearance: textfield; -moz-appearance: textfield;
}
.qty-group input[type="number"]::-webkit-outer-spin-button,
.qty-group input[type="number"]::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }
.qty-group .qty-input:focus, .qty-group input[type="number"]:focus { box-shadow: none; outline: none; }
.qty-group__btn, .qty-group button {
    display: inline-flex; align-items: center; justify-content: center;
    min-width: 44px; padding-inline: 14px;
    background: var(--mg-surface); color: var(--mg-navy);
    border: 0; border-radius: 0;
    font-size: 1.05rem; font-weight: 700; line-height: 1;
    cursor: pointer;
}
.qty-group__btn:hover, .qty-group button:hover { background: var(--mg-surface-2); }

/* ── 8. Panneaux, tableaux, pastilles ─────────────────────────── */
.card, .mg-panel {
    display: flex; flex-direction: column;
    background: var(--mg-panel);
    border: 1px solid var(--mg-border);
    border-radius: var(--mg-r-lg);
}
.card-body { padding: var(--mg-sp-6); }

.table-responsive { overflow-x: auto; }
.table { width: 100%; font-size: .9rem; }
.table th {
    padding: 12px 14px;
    background: var(--mg-surface);
    color: var(--mg-ink);
    font-family: var(--mg-font-head);
    font-size: .78rem; font-weight: 600;
    letter-spacing: .06em; text-transform: uppercase;
    text-align: left; white-space: nowrap;
    border-bottom: 1px solid var(--mg-border);
}
.table td { padding: 12px 14px; border-bottom: 1px solid var(--mg-border-soft); vertical-align: middle; }
.table tbody tr:last-child td { border-bottom: 0; }
.table tbody tr:hover { background: var(--mg-surface); }
.table-sm th, .table-sm td { padding: 8px 10px; }
.table-bordered th, .table-bordered td { border: 1px solid var(--mg-border); }
.table-light th { background: var(--mg-surface-2); }

.badge {
    display: inline-flex; align-items: center; gap: 5px;
    padding: 5px 10px;
    background: var(--mg-navy); color: #fff;
    font-family: var(--mg-font-head);
    font-size: .7rem; font-weight: 600;
    letter-spacing: .04em;
    border-radius: var(--mg-r-xs);
}
.badge-soft { background: var(--mg-orange-50); color: var(--mg-orange); }

.status-pill {
    display: inline-flex; align-items: center; gap: 6px;
    padding: 5px 11px;
    border-radius: var(--mg-r-pill);
    background: var(--mg-surface);
    font-size: .75rem; font-weight: 600;
}
.st-nouvelle{background:var(--mg-orange-50);color:var(--mg-orange)}
.st-preparation{background:#e8f0fb;color:var(--mg-navy-700)}
.st-expediee{background:#e8f0fb;color:var(--mg-navy-700)}
.st-livree{background:#dcfce7;color:#15803d}
.st-annulee{background:var(--mg-red-50);color:var(--mg-red)}

.alert {
    padding: var(--mg-sp-4) var(--mg-sp-5);
    border: 1px solid var(--mg-border);
    border-radius: var(--mg-r-lg);
    background: var(--mg-panel);
}
.alert-light { background: var(--mg-surface); }
.alert-warning { border-color: #ffddc4; background: var(--mg-orange-50); }

.progress { height: 8px; background: var(--mg-surface-2); border-radius: var(--mg-r-pill); overflow: hidden; }
.progress-bar { height: 100%; background: var(--mg-orange); }

.spinner-border {
    display: inline-block; width: 20px; height: 20px;
    border: 2.5px solid currentColor; border-right-color: transparent;
    border-radius: 50%; animation: fmspin .7s linear infinite;
}
.spinner-border-sm { width: 14px; height: 14px; border-width: 2px; }
@keyframes fmspin { to { transform: rotate(360deg); } }

/* ── 9. Deroulants, onglets, replis ───────────────────────────── */
.dropdown { position: relative; }
/* Ouverture animee : on ne peut pas faire de transition sur `display`,
   donc le menu reste dans le flux et c'est l'opacite, le decalage et la
   visibilite qui bougent. pointer-events coupe les clics tant qu'il est
   masque. */
.dropdown-menu {
    position: absolute; z-index: 1000; top: 100%; left: 0;
    min-width: 250px;
    margin-top: 10px; padding: var(--mg-sp-2);
    background: #fff;
    border: 1px solid var(--mg-border);
    border-radius: var(--mg-r-lg);
    box-shadow: var(--mg-sh-lg);

    opacity: 0; visibility: hidden;
    transform: translateY(-8px) scale(.985);
    transform-origin: top center;
    pointer-events: none;
    transition: opacity .18s var(--mg-ease),
                transform .18s var(--mg-ease),
                visibility .18s var(--mg-ease);
}
.dropdown-menu.show {
    opacity: 1; visibility: visible;
    transform: translateY(0) scale(1);
    pointer-events: auto;
}
/* Passerelle invisible sur les 10px d'ecart : sans elle, le curseur qui
   descend du bouton vers le menu survole le vide, `mouseleave` se
   declenche et le menu se referme avant qu'on ait pu cliquer. */
.dropdown-menu::before {
    content: ''; position: absolute;
    top: -12px; left: 0; right: 0; height: 12px;
}
.dropdown-menu-end { left: auto; right: 0; }
.dropdown-header {
    padding: 8px 12px;
    font-family: var(--mg-font-head); font-size: .72rem; font-weight: 600;
    letter-spacing: .14em; text-transform: uppercase; color: var(--mg-ink-muted);
}
.dropdown-item {
    display: flex; align-items: center; gap: var(--mg-sp-3);
    padding: 10px 12px;
    border-radius: var(--mg-r-sm);
    color: var(--mg-ink); font-size: .92rem; font-weight: 500;
    transition: background var(--mg-t-fast), color var(--mg-t-fast);
}
.dropdown-item:hover, .dropdown-item.active { background: var(--mg-surface); color: var(--mg-orange); }
.dropdown-divider { height: 0; margin: var(--mg-sp-2) 0; border-top: 1px solid var(--mg-border); }
.dropdown-toggle .site-header__nav-chevron { transition: transform var(--mg-t-base); }
.dropdown-toggle[aria-expanded="true"] .site-header__nav-chevron { transform: rotate(180deg); }

.nav-tabs { display: flex; flex-wrap: wrap; gap: var(--mg-sp-2); border-bottom: 1px solid var(--mg-border); }
.nav-tabs .nav-link {
    padding: 12px 20px;
    background: none; border: 0; border-bottom: 2px solid transparent;
    font-family: var(--mg-font-head); font-size: .92rem; font-weight: 600;
    color: var(--mg-ink-muted); cursor: pointer;
    transition: color var(--mg-t-fast), border-color var(--mg-t-fast);
}
.nav-tabs .nav-link:hover { color: var(--mg-navy); }
.nav-tabs .nav-link.active { color: var(--mg-navy); border-bottom-color: var(--mg-cyan); }
.tab-content > .tab-pane { display: none; }
.tab-content > .tab-pane.active { display: block; }
.fade { transition: opacity var(--mg-t-base); }
.tab-pane.fade:not(.show) { opacity: 0; }
.tab-pane.fade.show { opacity: 1; }
.collapse:not(.show) { display: none; }
.nav { display: flex; flex-wrap: wrap; }
.nav-item { display: block; }

/* ── 10. Pagination ───────────────────────────────────────────── */
.pagination { display: flex; flex-wrap: wrap; gap: var(--mg-sp-2); justify-content: center; }
.pagination a, .pagination span, .page-link {
    display: inline-flex; align-items: center; justify-content: center;
    min-width: 44px; min-height: 44px; padding-inline: 12px;
    background: #fff;
    border: 1px solid var(--mg-border);
    border-radius: var(--mg-r-md);
    font-family: var(--mg-font-head); font-weight: 600;
    color: var(--mg-navy);
    transition: all var(--mg-t-fast);
}
.pagination a:hover, .page-link:hover { border-color: var(--mg-navy); background: var(--mg-navy); color: #fff; }
.pagination .active, .pagination [aria-current="page"], .page-item.active .page-link {
    background: var(--mg-orange); border-color: var(--mg-orange); color: #fff;
}
.page-item { display: inline-block; }
.page-item.disabled .page-link { opacity: .45; pointer-events: none; }

/* ── 11. Messages ─────────────────────────────────────────────── */
.mg-flash { position: relative; z-index: 30; }
.mg-flash__item {
    display: flex; align-items: center; gap: var(--mg-sp-3);
    max-width: var(--mg-container);
    margin: var(--mg-sp-4) auto 0;
    padding: var(--mg-sp-4) var(--mg-sp-5);
    background: #fff;
    border: 1px solid var(--mg-border);
    border-left: 4px solid var(--mg-navy);
    border-radius: var(--mg-r-md);
    box-shadow: var(--mg-sh-sm);
    font-size: .95rem;
}
.mg-flash__item--success { border-left-color: var(--mg-green); }
.mg-flash__item--error   { border-left-color: var(--mg-red); }
.mg-flash__item--info    { border-left-color: var(--mg-orange); }

.mg-toast, .toast {
    position: fixed; z-index: 1200; left: 50%; bottom: 26px;
    transform: translateX(-50%) translateY(140%);
    display: flex; align-items: center; gap: var(--mg-sp-3);
    padding: 14px 22px;
    background: var(--mg-navy); color: #fff;
    border-radius: var(--mg-r-md);
    box-shadow: var(--mg-sh-lg);
    font-weight: 500; font-size: .92rem;
    transition: transform .3s var(--mg-ease);
}
.mg-toast.is-visible, .toast.is-visible { transform: translateX(-50%) translateY(0); }
.mg-toast--error { background: var(--mg-red); }

.skip-link {
    position: absolute; top: -60px; left: 16px; z-index: 2000;
    padding: 12px 18px;
    background: var(--mg-navy); color: #fff;
    border-radius: var(--mg-r-md); font-weight: 600;
    transition: top var(--mg-t-base);
}
.skip-link:focus { top: 12px; }

/* ── 12. Revelation au defilement ─────────────────────────────── */
/* Revelation au defilement — RETIREE.
   Le principe consistait a masquer chaque section (opacity 0) puis a la
   devoiler quand elle entrait dans la fenetre. Sur cette page d'accueil
   les sections montent a 2000px de haut : on longeait de grands blocs
   vides avant que le contenu n'apparaisse d'un coup. Le seuil pouvait
   etre corrige, mais le principe restait fragile — un JavaScript non
   charge, un observateur qui ne se declenche pas, et c'est la boutique
   entiere qui reste blanche.
   Sur un site marchand le contenu doit s'afficher, point. La classe
   .mg-reveal reste dans le balisage, elle ne masque simplement plus rien. */
.mg-reveal { opacity: 1; transform: none; }