/* Masse Global Business — thème (repris à l'identique de la version Tailwind) */

:root,
html[data-bs-theme="light"] {
  --radius: 0.875rem;
  --r-lg: var(--radius);
  --r-xl: calc(var(--radius) + 4px);
  --r-2xl: calc(var(--radius) + 8px);
  --r-3xl: 1.5rem;

  --background: oklch(0.985 0.004 240);
  --foreground: oklch(0.22 0.04 250);
  --card: oklch(1 0 0);
  --primary: oklch(0.55 0.15 245); /* Bleu MGB */
  --primary-foreground: oklch(0.99 0 0);
  --secondary: oklch(0.95 0.02 245);
  --muted: oklch(0.955 0.008 245);
  --muted-foreground: oklch(0.48 0.03 250);
  --accent: oklch(0.87 0.15 88); /* Jaune MGB */
  --accent-foreground: oklch(0.25 0.05 70);
  --destructive: oklch(0.58 0.22 27);
  --whatsapp: oklch(0.62 0.17 150);
  --whatsapp-foreground: oklch(0.99 0 0);
  --border: oklch(0.91 0.012 245);
  --gradient-hero: linear-gradient(135deg, oklch(0.5 0.16 248) 0%, oklch(0.62 0.14 235) 100%);
  --shadow-card: 0 10px 30px -12px oklch(0.4 0.1 250 / 0.25);
  --hero-foreground: var(--primary-foreground);

  --font-display: "Sora", ui-sans-serif, system-ui, sans-serif;
  --font-sans: "Manrope", ui-sans-serif, system-ui, sans-serif;

  --bs-body-bg: var(--background);
  --bs-body-color: var(--foreground);
  --bs-emphasis-color: var(--foreground);
  --bs-heading-color: inherit;
  --bs-border-color: var(--border);
  --bs-secondary-color: var(--muted-foreground);
  --bs-link-color: var(--primary);
  --bs-link-hover-color: var(--primary);
  --bs-body-font-family: var(--font-sans);
  color-scheme: light;
}

html[data-bs-theme="dark"] {
  --background: oklch(0.17 0.025 255);
  --foreground: oklch(0.96 0.005 245);
  --card: oklch(0.22 0.03 255);
  --primary: oklch(0.68 0.14 240);
  --primary-foreground: oklch(0.15 0.03 255);
  --secondary: oklch(0.27 0.04 255);
  --muted: oklch(0.26 0.03 255);
  --muted-foreground: oklch(0.72 0.025 250);
  --accent: oklch(0.86 0.15 88);
  --accent-foreground: oklch(0.2 0.04 70);
  --destructive: oklch(0.68 0.19 25);
  --whatsapp: oklch(0.66 0.16 150);
  --whatsapp-foreground: oklch(0.12 0.02 150);
  --border: oklch(1 0 0 / 10%);
  --gradient-hero: linear-gradient(135deg, oklch(0.3 0.08 252) 0%, oklch(0.22 0.05 255) 100%);
  --shadow-card: 0 10px 30px -12px oklch(0 0 0 / 0.6);
  --hero-foreground: var(--foreground);

  --bs-body-bg: var(--background);
  --bs-body-color: var(--foreground);
  --bs-emphasis-color: var(--foreground);
  --bs-border-color: var(--border);
  --bs-secondary-color: var(--muted-foreground);
  --bs-link-color: var(--primary);
  --bs-link-hover-color: var(--primary);
  color-scheme: dark;
}

/* ---------- Base ---------- */
* { border-color: var(--border); }
html { transition: background-color .3s ease, color .3s ease; }
body {
  background-color: var(--background);
  color: var(--foreground);
  font-family: var(--font-sans);
  -webkit-font-smoothing: antialiased;
}
h1, h2, h3, h4, .font-display { font-family: var(--font-display); letter-spacing: -0.02em; }
h1, h2, h3, h4 { color: inherit; }
a { color: inherit; text-decoration: none; }
img { max-width: 100%; height: auto; display: block; }
button { color: inherit; }

/* ---------- Utilitaires ---------- */
.wrap { max-width: 72rem; margin-inline: auto; padding-inline: 1rem; }
.wrap-5xl { max-width: 64rem; margin-inline: auto; padding-inline: 1rem; }
.wrap-xl { max-width: 36rem; margin-inline: auto; padding-inline: 1rem; }
.wrap-md { max-width: 28rem; margin-inline: auto; }
.wrap-sm { max-width: 24rem; margin-inline: auto; padding-inline: 1rem; }
.page-pad { padding-block: 2.5rem; }
.page-pad-lg { padding-block: 4rem; }
.section-sm { padding-block: 2rem; }
.py-tw-20 { padding-block: 5rem; }
.py-tw-24 { padding-block: 6rem; }
.p-tw-5 { padding: 1.25rem; }
.p-tw-10 { padding: 2.5rem; }
.pt-tw-3 { padding-top: .75rem; }
.mt-tw-3 { margin-top: .75rem; }
.mt-tw-5 { margin-top: 1.25rem; }
.mt-tw-6 { margin-top: 1.5rem; }
.mt-tw-8 { margin-top: 2rem; }
.mt-tw-10 { margin-top: 2.5rem; }
.mt-tw-12 { margin-top: 3rem; }
.mt-tw-16 { margin-top: 4rem; }
.mb-tw-3 { margin-bottom: .75rem; }
.mb-tw-6 { margin-bottom: 1.5rem; }
.gap-tw-3 { gap: .75rem !important; }
.gap-tw-4 { gap: 1rem !important; }
.gap-tw-8 { gap: 2rem !important; }
.text-xs { font-size: .75rem; line-height: 1rem; }
.small { font-size: .875rem; line-height: 1.25rem; }
.fs-tw-lg { font-size: 1.125rem; }
.fs-tw-xl { font-size: 1.25rem; }
.fs-tw-2xl { font-size: 1.5rem; line-height: 2rem; }
.h-2xl { font-size: 1.5rem; line-height: 2rem; font-weight: 700; }
.fw-extrabold { font-weight: 800; }
.text-brand { color: var(--primary) !important; }
.text-muted-mgb { color: var(--muted-foreground) !important; }
.text-whatsapp { color: var(--whatsapp) !important; }
.text-destructive { color: var(--destructive) !important; }
.bg-hero { background-image: var(--gradient-hero); }
.shadow-card { box-shadow: var(--shadow-card) !important; }

.tw-grid { display: grid; grid-template-columns: minmax(0, 1fr); }
.tw-grid-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
@media (min-width: 640px) {
  .tw-grid-sm-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .tw-grid-sm-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .tw-grid-sm-4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
}
@media (min-width: 768px) {
  .tw-grid-md-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (min-width: 1024px) {
  .tw-grid-lg-4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
}

/* ---------- Composants communs ---------- */
.mgb-card { background: var(--card); border: 1px solid var(--border); border-radius: var(--r-2xl); }

.icon-box {
  display: grid; place-items: center; flex-shrink: 0;
  width: 2.75rem; height: 2.75rem; border-radius: var(--r-xl);
  background: var(--secondary); color: var(--primary); font-size: 1.25rem;
}
.icon-box-sm { width: 2.5rem; height: 2.5rem; }

.pill {
  display: inline-block; border-radius: 999px; padding: .125rem .5rem;
  font-size: .75rem; line-height: 1rem; font-weight: 700;
}
.pill-lg { padding: .25rem .75rem; }
.pill-accent { background: var(--accent); color: var(--accent-foreground); }
.pill-primary { background: var(--primary); color: var(--primary-foreground); }
.pill-secondary { background: var(--secondary); color: var(--primary); }

.mgb-btn {
  display: inline-flex; align-items: center; justify-content: center; gap: .5rem;
  border-radius: 999px; padding: .75rem 1.5rem; border: 0;
  font-weight: 700; line-height: 1.5rem; transition: filter .15s, opacity .15s;
  cursor: pointer;
}
.mgb-btn i { font-size: 1.25rem; line-height: 1; }
.mgb-btn-lg { padding-block: .875rem; }
.mgb-btn-square { border-radius: var(--r-lg); padding-block: .625rem; font-weight: 600; }
.mgb-btn-sm { padding: .5rem 1rem; font-size: .875rem; font-weight: 500; border-radius: calc(var(--radius) - 2px); }
.mgb-btn:disabled { opacity: .5; cursor: not-allowed; }
.mgb-btn-primary { background: var(--primary); color: var(--primary-foreground); }
.mgb-btn-primary:hover:not(:disabled) { filter: brightness(1.1); color: var(--primary-foreground); }
.mgb-btn-accent { background: var(--accent); color: var(--accent-foreground); }
.mgb-btn-accent:hover { filter: brightness(1.05); color: var(--accent-foreground); }
.mgb-btn-whatsapp { background: var(--whatsapp); color: var(--whatsapp-foreground); }
.mgb-btn-whatsapp:hover { filter: brightness(1.1); color: var(--whatsapp-foreground); }
.mgb-btn-outline { background: transparent; color: inherit; border: 1px solid currentColor; font-weight: 600; }
.mgb-btn-outline:hover { color: inherit; }

.price { font-family: var(--font-display); font-weight: 700; color: var(--primary); }
.price-xl { font-size: 1.875rem; line-height: 2.25rem; }
.old-price { font-size: .75rem; color: var(--muted-foreground); text-decoration: line-through; }

.page-title { font-size: 1.875rem; line-height: 2.25rem; font-weight: 800; margin-bottom: 1.5rem; }
.section-title { font-size: 1.5rem; line-height: 2rem; font-weight: 700; margin-bottom: 1.25rem; }
.section-title-row { margin-bottom: 1.25rem; }

.mgb-field {
  height: 2.75rem; border: 1px solid var(--border); border-radius: var(--r-xl);
  background: var(--card); color: var(--foreground); padding-inline: .75rem; font-size: .875rem;
}
.mgb-field:focus, .mgb-input:focus { outline: none; border-color: var(--primary); }
.mgb-input {
  width: 100%; border: 1px solid var(--border); border-radius: var(--r-xl);
  background: var(--background); color: var(--foreground); padding: .75rem 1rem; font-size: .875rem;
}
.mgb-input-sm { border-radius: var(--r-lg); padding: .625rem .75rem; font-size: 1rem; }
.field-label { display: block; margin-bottom: .25rem; font-size: .875rem; font-weight: 600; }

.link-btn { background: none; border: 0; padding: 0; color: var(--muted-foreground); text-decoration: underline; }
.link-btn:hover { color: var(--foreground); }

/* ---------- En-tête ---------- */
.site-header {
  position: sticky; top: 0; z-index: 1030;
  border-bottom: 1px solid var(--border);
  background: color-mix(in oklch, var(--background) 85%, transparent);
  backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px);
}
.topbar {
  background: var(--primary); color: var(--primary-foreground);
  padding: .375rem 1rem; text-align: center; font-size: .75rem; line-height: 1rem; font-weight: 500;
}
.header-inner { display: flex; align-items: center; justify-content: space-between; gap: 1rem; height: 4rem; }

.logo { display: inline-flex; align-items: center; flex-shrink: 0; }
.logo-img { display: block; height: 2.75rem; width: auto; }
@media (min-width: 640px) { .logo-img { height: 3.25rem; } }
/* Logo couleur sur fond clair, version blanche sur fond sombre */
.logo-on-dark { display: none; }
html[data-bs-theme="dark"] .logo-on-light { display: none; }
html[data-bs-theme="dark"] .logo-on-dark { display: block; }
.site-footer .logo-img { height: 4rem; }
.admin-brand .logo-img { height: 3rem; }

.main-nav { align-items: center; gap: 1.5rem; }
.main-nav a { font-size: .875rem; font-weight: 600; color: var(--muted-foreground); }
.main-nav a:hover { color: var(--foreground); }
/* Comme l'original : le lien actif reste gris (text-muted-foreground l'emporte sur text-primary). */

.icon-btn {
  display: grid; place-items: center; width: 2.5rem; height: 2.5rem;
  border-radius: 999px; border: 0; background: transparent; color: var(--foreground); font-size: 1.25rem;
}
.icon-btn:hover { background: var(--muted); color: var(--foreground); }
.cart-count {
  position: absolute; right: -.125rem; top: -.125rem;
  display: grid; place-items: center; height: 1.25rem; min-width: 1.25rem; padding-inline: .25rem;
  border-radius: 999px; background: var(--accent); color: var(--accent-foreground);
  font-size: 10px; font-weight: 700; line-height: 1;
}
.theme-icon-dark, .icon-open { display: none; }
html[data-bs-theme="dark"] .theme-icon-dark { display: inline; }
html[data-bs-theme="dark"] .theme-icon-light { display: none; }
.icon-btn:not(.collapsed) .icon-open { display: inline; }
.icon-btn:not(.collapsed) .icon-closed { display: none; }

.mobile-nav { border-top: 1px solid var(--border); padding: .5rem 1rem; }
.mobile-nav.show, .mobile-nav.collapsing { display: flex; flex-direction: column; }
.mobile-nav a { padding-block: .75rem; font-weight: 600; }

.site-main { min-height: 60vh; }

/* ---------- Pied de page ---------- */
.site-footer { margin-top: 5rem; border-top: 1px solid var(--border); background: var(--card); }
.footer-grid { display: grid; gap: 2rem; padding-block: 3rem; }
@media (min-width: 640px) { .footer-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 1024px) { .footer-grid { grid-template-columns: 1.3fr 1fr 1fr 1fr; } }
.footer-col { display: flex; flex-direction: column; gap: .5rem; font-size: .875rem; }
.footer-col h4 { font-size: .875rem; font-weight: 700; margin: 0; }
.footer-col p, .footer-col a { display: flex; align-items: center; gap: .5rem; margin: 0; color: var(--muted-foreground); }
.footer-col a:hover { color: var(--primary); }
.footer-col i { font-size: 1rem; }
.tiktok-note { width: 1rem; text-align: center; font-weight: 700; }
.footer-bottom {
  margin: 0; border-top: 1px solid var(--border); padding-block: 1rem;
  text-align: center; font-size: .75rem; color: var(--muted-foreground);
}
.footer-bottom a:hover { color: var(--primary); }

/* ---------- Bouton WhatsApp flottant ---------- */
.wa-float { position: fixed; right: 1.25rem; bottom: 1.25rem; z-index: 1050; display: flex; align-items: center; gap: .5rem; }
.wa-float-label {
  display: none; border-radius: 999px; background: var(--card); color: var(--foreground);
  padding: .5rem .75rem; font-size: .875rem; font-weight: 600; box-shadow: var(--shadow-card);
}
.wa-float:hover .wa-float-label, .wa-float:focus-visible .wa-float-label { display: block; }
.wa-float-label { max-width: 16rem; }
.wa-float-hours { display: block; margin-top: .125rem; font-size: .75rem; font-weight: 500; color: var(--muted-foreground); }
.wa-float-btn { position: relative; }
.wa-float-dot {
  position: absolute; right: .125rem; top: .125rem; width: .75rem; height: .75rem; border-radius: 999px;
  background: var(--accent); border: 2px solid var(--background);
}
.wa-float.is-offline .wa-float-dot { background: var(--muted-foreground); }
.wa-float.is-offline .wa-float-btn { animation: none; }
@media (prefers-reduced-motion: reduce) { .wa-float-btn { animation: none; } }
.wa-float-btn {
  display: grid; place-items: center; width: 3.5rem; height: 3.5rem; border-radius: 999px;
  background: var(--whatsapp); color: var(--whatsapp-foreground); font-size: 1.75rem;
  box-shadow: var(--shadow-card); animation: wa-pulse 2s infinite;
}
@keyframes wa-pulse {
  0% { box-shadow: 0 0 0 0 color-mix(in oklch, var(--whatsapp) 60%, transparent); }
  70% { box-shadow: 0 0 0 16px transparent; }
  100% { box-shadow: 0 0 0 0 transparent; }
}

/* ---------- Carte produit ---------- */
.product-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1rem; }
@media (min-width: 1024px) { .product-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
.shop-item { display: flex; }
.shop-item.d-none { display: none !important; }

.pcard {
  display: flex; flex-direction: column; width: 100%; overflow: hidden;
  border: 1px solid var(--border); border-radius: var(--r-2xl); background: var(--card); color: var(--foreground);
  transition: transform .15s, box-shadow .15s;
}
.pcard:hover { transform: translateY(-.25rem); box-shadow: var(--shadow-card); color: var(--foreground); }
.pcard-media { position: relative; aspect-ratio: 1; overflow: hidden; background: var(--muted); }
.pcard-media img { width: 100%; height: 100%; object-fit: cover; transition: transform .5s; }
.pcard:hover .pcard-media img { transform: scale(1.05); }
.pcard-badges { position: absolute; left: .75rem; top: .75rem; display: flex; gap: .375rem; }
.pcard-out {
  position: absolute; inset-inline: 0; bottom: 0; padding-block: .25rem; text-align: center;
  background: color-mix(in oklch, var(--foreground) 80%, transparent); color: var(--background);
  font-size: .75rem; font-weight: 600;
}
.pcard-body { display: flex; flex: 1; flex-direction: column; gap: .25rem; padding: 1rem; }
.pcard-brand { font-size: .75rem; font-weight: 500; text-transform: uppercase; letter-spacing: .025em; color: var(--muted-foreground); }
.pcard-name { font-size: 1rem; font-weight: 600; line-height: 1.375; margin: 0; }
.pcard-price { margin-top: auto; display: flex; align-items: baseline; gap: .5rem; padding-top: .5rem; }

/* ---------- Accueil ---------- */
.hero-grid { display: grid; align-items: center; gap: 2rem; padding-block: 3rem; }
@media (min-width: 768px) { .hero-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); padding-block: 5rem; } }
.hero-text { display: flex; flex-direction: column; align-items: flex-start; gap: 1.25rem; color: var(--hero-foreground); }
.hero-text h1 { font-size: 2.25rem; line-height: 1.25; font-weight: 800; margin: 0; }
@media (min-width: 640px) { .hero-text h1 { font-size: 3rem; } }
.hero-text p { max-width: 28rem; opacity: .9; margin: 0; }
.hero-img { width: 100%; border-radius: var(--r-3xl); box-shadow: var(--shadow-card); }

.cat-card { display: flex; flex-direction: column; align-items: center; gap: .5rem; padding: 1.5rem; transition: border-color .15s; }
.cat-card:hover { border-color: var(--primary); }
.cat-card i { font-size: 1.75rem; line-height: 1; color: var(--primary); }

.review { margin: 0; padding: 1.25rem; }
.review .stars { display: flex; gap: .125rem; margin-bottom: .5rem; color: var(--accent); font-size: 1rem; }
.review blockquote { margin: 0; font-size: .875rem; }
.review figcaption { margin-top: .75rem; font-size: .875rem; font-weight: 600; color: var(--muted-foreground); }

/* ---------- Recherche ---------- */
.search-box { position: relative; }
.search-box .ps-5 { padding-left: 2.5rem !important; }
.search-icon { position: absolute; left: .75rem; top: .75rem; font-size: 1.25rem; line-height: 1; color: var(--muted-foreground); pointer-events: none; }
.header-search { flex: 0 1 13rem; max-width: 11rem; }
.header-search .mgb-field { height: 2.125rem; border-radius: 999px; font-size: .8125rem; padding-right: .625rem; }
.header-search .ps-5 { padding-left: 2rem !important; }
.header-search .search-icon { top: .5rem; left: .625rem; font-size: 1rem; }
/* La liste de suggestions reste plus large que le champ */
.header-search .search-suggest { width: 22rem; max-width: calc(100vw - 2rem); right: auto; }
.search-suggest {
  position: absolute; z-index: 1040; left: 0; right: 0; top: calc(100% + .375rem);
  max-height: 24rem; overflow-y: auto; padding: .375rem;
  background: var(--card); border: 1px solid var(--border); border-radius: var(--r-xl); box-shadow: var(--shadow-card);
}
.search-suggest a { display: flex; align-items: center; gap: .75rem; padding: .5rem; border-radius: var(--r-lg); font-size: .875rem; }
.search-suggest a:hover, .search-suggest a[aria-selected="true"] { background: var(--muted); }
.search-suggest img { width: 2.5rem; height: 2.5rem; border-radius: var(--r-lg); object-fit: cover; background: var(--muted); flex-shrink: 0; }
.suggest-text { display: flex; flex-direction: column; min-width: 0; flex: 1; }
.suggest-name { font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.suggest-meta { font-size: .75rem; color: var(--muted-foreground); }
.suggest-price { font-weight: 700; color: var(--primary); white-space: nowrap; }
.suggest-cat { color: var(--primary); font-weight: 600; }
.suggest-all { justify-content: center; font-weight: 700; color: var(--primary); border-top: 1px solid var(--border); border-radius: 0 !important; }
.suggest-empty { margin: 0; padding: .75rem; font-size: .875rem; color: var(--muted-foreground); }

/* ---------- Boutique ---------- */
.cat-tabs { display: flex; gap: .5rem; overflow-x: auto; padding-bottom: .25rem; margin-bottom: 1.25rem; scrollbar-width: none; }
.cat-tabs::-webkit-scrollbar { display: none; }
.cat-tabs a {
  flex-shrink: 0; border: 1px solid var(--border); border-radius: 999px; padding: .5rem 1rem;
  font-size: .875rem; font-weight: 600; background: var(--card);
}
.cat-tabs a:hover { border-color: var(--primary); }
.cat-tabs a.active { background: var(--primary); border-color: var(--primary); color: var(--primary-foreground); }
.shop-layout { display: grid; gap: 1.5rem; }
.shop-bar { display: flex; flex-wrap: wrap; gap: .75rem; }
.shop-bar .search-box { min-width: 12rem; }
.shop-filter-toggle { display: inline-flex; align-items: center; gap: .5rem; font-weight: 600; }
.shop-filters-panel { border: 1px solid var(--border); border-radius: var(--r-2xl); background: var(--card); padding: 1rem; }
.shop-filters-panel.show, .shop-filters-panel.collapsing { display: block; }
@media (min-width: 992px) {
  .shop-layout { grid-template-columns: 15rem minmax(0, 1fr); grid-template-areas: "bar bar" "filters results"; align-items: start; }
  .shop-bar { grid-area: bar; }
  .shop-filters-panel { grid-area: filters; display: block !important; position: sticky; top: 7rem; }
  .shop-results { grid-area: results; }
}
.filter-group { border: 0; padding: 0; margin: 0 0 1.25rem; min-width: 0; }
.filter-group legend { font-size: .875rem; font-weight: 700; margin-bottom: .5rem; float: none; width: auto; }
.chip-sm { padding: .375rem .75rem; font-size: .8125rem; }
.active-filters { display: flex; flex-wrap: wrap; gap: .5rem; margin-bottom: 1rem; }
.active-filters a:hover { filter: brightness(.95); }
@media (min-width: 768px) { .product-grid.product-grid-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
.shop-pagination { display: flex; flex-wrap: wrap; justify-content: center; gap: .375rem; margin-top: 2rem; }
.shop-pagination a {
  display: grid; place-items: center; min-width: 2.5rem; height: 2.5rem; padding-inline: .5rem;
  border: 1px solid var(--border); border-radius: 999px; font-weight: 600; font-size: .875rem;
}
.shop-pagination a.active { background: var(--primary); border-color: var(--primary); color: var(--primary-foreground); }

/* ---------- Formulaires (commande, compte, contact) ---------- */
.form-alert {
  border-radius: var(--r-lg); padding: .75rem 1rem; margin-bottom: 1rem; font-size: .875rem; font-weight: 600;
  background: color-mix(in oklch, var(--destructive) 12%, var(--card)); border: 1px solid color-mix(in oklch, var(--destructive) 45%, transparent);
}
.form-alert-ok { background: color-mix(in oklch, var(--whatsapp) 15%, var(--card)); border-color: color-mix(in oklch, var(--whatsapp) 45%, transparent); }
.field-error { display: block; margin-top: .25rem; font-size: .8125rem; font-weight: 600; color: var(--destructive); }
.mgb-input.is-invalid { border-color: var(--destructive); }
.checkout-step { padding: 1.25rem; margin: 0; min-width: 0; }
.checkout-step legend { float: none; width: auto; font-family: var(--font-display); font-size: 1.125rem; font-weight: 700; margin-bottom: .75rem; }
.choice-grid { display: grid; gap: .75rem; }
@media (min-width: 640px) { .choice-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.choice { position: relative; margin: 0; cursor: pointer; }
.choice input { position: absolute; opacity: 0; }
.choice > span {
  display: flex; flex-direction: column; gap: .125rem; height: 100%; padding: .875rem 1rem;
  border: 1px solid var(--border); border-radius: var(--r-xl); font-size: .875rem; transition: border-color .15s, background .15s;
}
.choice > span i { color: var(--primary); font-size: 1.125rem; }
.choice small { color: var(--muted-foreground); }
.choice:hover > span { border-color: var(--primary); }
.choice input:checked + span { border-color: var(--primary); background: var(--secondary); box-shadow: inset 0 0 0 1px var(--primary); }
.choice input:focus-visible + span { outline: 2px solid var(--primary); outline-offset: 2px; }
.summary-thumb { width: 2.75rem; height: 2.75rem; border-radius: var(--r-lg); object-fit: cover; flex-shrink: 0; }
@media (min-width: 768px) { .checkout-summary { position: sticky; top: 7rem; } }
.mgb-btn.disabled { opacity: .5; pointer-events: none; }

/* ---------- Suivi et compte ---------- */
.order-steps { list-style: none; padding: 0; margin: 0; display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); }
.order-steps li { display: flex; flex-direction: column; align-items: center; gap: .375rem; text-align: center; position: relative; }
.order-steps li + li::before {
  content: ""; position: absolute; top: .875rem; right: 50%; width: 100%; height: 2px; background: var(--border); z-index: 0;
}
.order-steps li.step-done::before, .order-steps li.step-current::before { background: var(--primary); }
.step-dot {
  position: relative; z-index: 1; display: grid; place-items: center; width: 1.75rem; height: 1.75rem; border-radius: 999px;
  background: var(--card); border: 2px solid var(--border); color: var(--primary-foreground); font-size: 1rem;
}
.step-done .step-dot { background: var(--primary); border-color: var(--primary); }
.step-current .step-dot { border-color: var(--primary); box-shadow: 0 0 0 4px color-mix(in oklch, var(--primary) 20%, transparent); }
.step-current .step-dot::after { content: ""; width: .5rem; height: .5rem; border-radius: 999px; background: var(--accent); }
.step-label { font-size: .75rem; font-weight: 600; line-height: 1.2; }
.step-todo .step-label { color: var(--muted-foreground); }
.step-date { font-size: .6875rem; color: var(--muted-foreground); }
.status-lost { font-weight: 700; color: var(--destructive); }
.order-card summary { display: flex; flex-wrap: wrap; align-items: center; gap: .75rem; padding: 1rem; cursor: pointer; list-style: none; }
.order-card summary::-webkit-details-marker { display: none; }
.order-card-body { padding: .75rem 1rem 1rem; border-top: 1px solid var(--border); }
.pill-muted { background: var(--muted); color: var(--muted-foreground); }
.pill-success { background: var(--whatsapp); color: var(--whatsapp-foreground); }

/* ---------- Pages de contenu ---------- */
.prose { max-width: 46rem; }
.prose h2 { font-size: 1.25rem; font-weight: 700; margin: 2rem 0 .75rem; }
.prose p, .prose li { line-height: 1.7; }
.prose ul { padding-left: 1.25rem; }
.faq-item summary { padding: 1rem 1.25rem; font-weight: 700; cursor: pointer; }
.faq-answer { padding: 0 1.25rem 1rem; color: var(--muted-foreground); }
.faq-answer p:last-child { margin-bottom: 0; }

/* ---------- Carrousel d'accueil ---------- */
.hero-h { font-size: 2.25rem; line-height: 1.25; font-weight: 800; margin: 0; }
@media (min-width: 640px) { .hero-h { font-size: 3rem; } }
.hero-indicators { position: static; margin: 0 0 1.25rem; }
.hero-indicators [data-bs-target] { width: .625rem; height: .625rem; border-radius: 999px; background-color: var(--accent); border: 0; }

/* ---------- Fiche produit ---------- */
.product-layout { display: grid; gap: 2.5rem; }
@media (min-width: 768px) { .product-layout { grid-template-columns: repeat(2, minmax(0, 1fr)); align-items: start; } }
.product-media { overflow: hidden; border: 1px solid var(--border); border-radius: var(--r-3xl); background: var(--muted); }
.product-media { cursor: zoom-in; }
.product-media img { width: 100%; transition: transform .25s; }
.product-media.is-zoomed img { transform: scale(2); }
.zoom-modal { background: var(--card); border: 0; border-radius: var(--r-2xl); overflow: hidden; }
.zoom-modal img { width: 100%; }
.zoom-close { position: absolute; right: .75rem; top: .75rem; z-index: 2; background-color: var(--card); border-radius: 999px; padding: .5rem; opacity: .9; }
.product-thumbs { display: flex; flex-wrap: wrap; gap: .5rem; margin-top: .75rem; }
.product-thumb {
  width: 4.5rem; height: 4.5rem; padding: 0; overflow: hidden;
  border: 2px solid var(--border); border-radius: var(--r-lg); background: var(--muted);
}
.product-thumb img { width: 100%; height: 100%; object-fit: cover; }
.product-thumb.active, .product-thumb:hover { border-color: var(--primary); }
.product-info { display: flex; flex-direction: column; gap: 1.25rem; }
.product-title { font-size: 1.875rem; line-height: 2.25rem; font-weight: 800; margin: 0; }

.chip {
  border: 1px solid var(--border); border-radius: 999px; padding: .5rem 1rem;
  font-size: .875rem; font-weight: 500; cursor: pointer; user-select: none;
}
.chip:hover { border-color: var(--primary); }
.btn-check:checked + .chip { border-color: var(--primary); background: var(--secondary); color: var(--primary); }
.btn-check:focus-visible + .chip { outline: 2px solid var(--primary); outline-offset: 2px; }

.specs { margin: 0; }
.specs > div { display: flex; justify-content: space-between; padding: .75rem 1rem; font-size: .875rem; }
.specs > div + div { border-top: 1px solid var(--border); }
.specs dt { font-weight: 400; color: var(--muted-foreground); }
.specs dd { margin: 0; font-weight: 600; }

/* ---------- Panier ---------- */
.cart-layout { display: grid; gap: 2rem; }
@media (min-width: 768px) { .cart-layout { grid-template-columns: 1fr 380px; align-items: start; } }
.cart-item { display: flex; gap: 1rem; padding: .75rem; }
.cart-item img { width: 6rem; height: 6rem; border-radius: var(--r-xl); object-fit: cover; }
.qty-btn {
  display: grid; place-items: center; width: 2rem; height: 2rem; border-radius: 999px;
  border: 1px solid var(--border); background: transparent; font-size: 1rem;
}
.qty-value { width: 1.5rem; text-align: center; font-weight: 600; }
.remove-btn {
  display: grid; place-items: center; width: 2rem; height: 2rem; border-radius: 999px;
  border: 0; background: transparent; color: var(--destructive); font-size: 1rem;
}
.remove-btn:hover { background: var(--muted); }
.cart-summary { display: flex; flex-direction: column; gap: 1.25rem; padding: 1.25rem; }
.or-divider { display: flex; align-items: center; gap: .75rem; font-size: .75rem; color: var(--muted-foreground); }
.or-divider span { flex: 1; border-top: 1px solid var(--border); }
.success-badge {
  display: grid; place-items: center; width: 4rem; height: 4rem; margin: 0 auto 1rem;
  border-radius: 999px; background: var(--whatsapp); color: var(--whatsapp-foreground); font-size: 2rem;
}

/* ---------- Contact ---------- */
.contact-row { display: flex; align-items: center; gap: 1rem; padding: 1rem; transition: border-color .15s; }
.contact-row:hover { border-color: var(--primary); }
.map-frame { width: 100%; height: 24rem; border: 1px solid var(--border); border-radius: var(--r-2xl); }

/* ---------- À propos ---------- */
.about-intro { max-width: 48rem; display: flex; flex-direction: column; align-items: flex-start; gap: 1rem; }
.about-title { font-size: 1.875rem; line-height: 2.25rem; font-weight: 800; margin: 0; }
@media (min-width: 640px) { .about-title { font-size: 2.25rem; line-height: 2.5rem; } }
.about-cta { border-radius: var(--r-3xl); padding: 2rem; text-align: center; color: var(--hero-foreground); }
.about-cta h2 { font-size: 1.5rem; line-height: 2rem; font-weight: 800; margin: 0; }
.about-cta p { max-width: 36rem; margin: .5rem auto 0; opacity: .9; }

/* ---------- Admin ---------- */
.outline-pill {
  display: flex; align-items: center; gap: .5rem; border: 1px solid var(--border); border-radius: 999px;
  background: transparent; padding: .5rem 1rem; font-size: .875rem; font-weight: 600;
}
.outline-pill:hover { background: var(--muted); }
.stat-icon { font-size: 1.25rem; line-height: 1; color: var(--primary); }
.bar-chart { display: flex; align-items: flex-end; gap: .75rem; height: 10rem; margin-top: 1rem; }
.bar-col { display: flex; flex: 1; flex-direction: column; justify-content: flex-end; align-items: center; gap: .5rem; height: 100%; }
.bar { width: 100%; min-height: 2px; border-radius: calc(var(--radius) - 2px) calc(var(--radius) - 2px) 0 0; background: var(--primary); }
.status-select {
  border: 1px solid var(--border); border-radius: var(--r-lg); background: var(--background); color: var(--foreground);
  padding: .375rem .5rem; font-size: .875rem;
}

.pay-instructions { border-color: color-mix(in oklch, var(--accent) 70%, transparent); background: color-mix(in oklch, var(--accent) 14%, var(--card)); }

/* ---------- Phase 5 : favoris, promotions, avis, comparateur, newsletter ---------- */
.pcard-wrap { position: relative; display: flex; width: 100%; }
.pcard-fav { position: absolute; right: .625rem; top: .625rem; z-index: 2; margin: 0; }
.fav-btn {
  display: grid; place-items: center; width: 2.25rem; height: 2.25rem; border-radius: 999px; border: 0;
  background: color-mix(in oklch, var(--card) 88%, transparent); color: var(--foreground); font-size: 1rem;
  box-shadow: 0 2px 8px -2px oklch(0 0 0 / .25);
}
.fav-btn:hover, .fav-btn.is-fav, .fav-btn-inline.is-fav i { color: var(--destructive); }
.pill-flash { background: var(--destructive); color: #fff; }
.pcard-rating { font-size: .75rem; color: var(--accent-foreground); }
.pcard-rating i { color: var(--accent); }
html[data-bs-theme="dark"] .pcard-rating { color: var(--foreground); }
.product-media { position: relative; }
.product-flash { position: absolute; left: 1rem; top: 1rem; }
.countdown { font-size: .875rem; color: var(--destructive); font-weight: 600; }
.countdown strong, [data-countdown] { font-variant-numeric: tabular-nums; }
.product-actions { display: flex; flex-wrap: wrap; align-items: center; gap: .5rem; }
.product-actions form { margin: 0; }
.share { display: flex; align-items: center; gap: .125rem; margin-left: auto; }
.stock-alert { border-color: color-mix(in oklch, var(--accent) 60%, var(--border)); }
.stars { display: inline-flex; gap: .0625rem; color: var(--accent); }
.review-reply { margin-top: .75rem; padding: .625rem .75rem; border-left: 3px solid var(--primary); background: var(--secondary); border-radius: 0 var(--r-lg) var(--r-lg) 0; }
.star-input { display: inline-flex; flex-direction: row-reverse; gap: .25rem; }
.star-input input { position: absolute; opacity: 0; width: 1px; height: 1px; }
.star-input label { font-size: 1.75rem; line-height: 1; color: var(--border); cursor: pointer; transition: color .1s; }
.star-input label:hover, .star-input label:hover ~ label, .star-input input:checked ~ label { color: var(--accent); }
.star-input input:focus-visible + label { outline: 2px solid var(--primary); outline-offset: 2px; border-radius: 4px; }

.compare-wrap { overflow-x: auto; border: 1px solid var(--border); border-radius: var(--r-2xl); background: var(--card); }
.compare-table { width: 100%; min-width: 36rem; border-collapse: collapse; font-size: .875rem; }
.compare-table th, .compare-table td { padding: .75rem 1rem; border-bottom: 1px solid var(--border); vertical-align: top; text-align: left; }
.compare-table thead th { text-align: center; vertical-align: bottom; }
.compare-table thead img { margin: 0 auto; width: 7.5rem; height: 7.5rem; object-fit: cover; border-radius: var(--r-xl); }
.compare-table tbody th { color: var(--muted-foreground); font-weight: 600; width: 10rem; position: sticky; left: 0; background: var(--card); }
.compare-table tr:last-child th, .compare-table tr:last-child td { border-bottom: 0; }

.flash-sale { border: 2px solid color-mix(in oklch, var(--destructive) 60%, transparent); border-radius: var(--r-3xl); padding: 1.25rem; }
.flash-head { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: .75rem; margin-bottom: 1.25rem; }
.flash-head h2 { font-size: 1.5rem; font-weight: 800; color: var(--destructive); }
.countdown-big { font-family: var(--font-display); font-size: 1.25rem; }

.newsletter-band { margin-top: 5rem; background: var(--gradient-hero); color: var(--hero-foreground); }
.newsletter-band + .site-footer { margin-top: 0; }
.newsletter-inner { display: grid; gap: 1rem; padding-block: 2rem; align-items: center; }
@media (min-width: 768px) { .newsletter-inner { grid-template-columns: 1fr minmax(0, 26rem); } }
.newsletter-title { font-size: 1.375rem; font-weight: 800; margin: 0 0 .25rem; }
.newsletter-form { display: flex; flex-wrap: wrap; gap: .5rem; }
.newsletter-msg:empty { display: none; }
.nl-code { display: inline-block; margin-top: .25rem; padding: .125rem .5rem; border-radius: var(--r-lg); background: var(--accent); color: var(--accent-foreground); letter-spacing: .05em; }
.nl-popup {
  position: fixed; left: 1rem; bottom: 1rem; z-index: 1060; width: min(22rem, calc(100vw - 2rem));
  padding: 1.25rem; border-radius: var(--r-2xl); background: var(--card); border: 1px solid var(--border); box-shadow: var(--shadow-card);
}
.nl-close { position: absolute; right: .75rem; top: .75rem; }
.nl-badge { display: inline-block; margin: 0 0 .5rem; padding: .25rem .625rem; border-radius: 999px; background: var(--accent); color: var(--accent-foreground); font-weight: 800; }
@media (max-width: 575.98px) { .nl-popup { bottom: 5.5rem; } }

.consent {
  position: fixed; left: 50%; bottom: 1rem; transform: translateX(-50%); z-index: 1070; width: min(34rem, calc(100vw - 2rem));
  padding: 1rem 1.25rem; border-radius: var(--r-2xl); background: var(--card); border: 1px solid var(--border); box-shadow: var(--shadow-card);
}
@media (max-width: 575.98px) { .consent { bottom: 5.5rem; } }

/* Panier de l'en-tête : chariot bleu et pastille bleue avec le nombre d'articles (0 compris) */
.cart-btn { color: var(--primary); font-size: 1.5rem; }
.cart-btn:hover { color: var(--primary); }
.cart-badge {
  position: absolute; right: -.25rem; top: -.125rem;
  display: grid; place-items: center; height: 1.25rem; min-width: 1.25rem; padding-inline: .3rem;
  border-radius: 999px; background: var(--primary); color: var(--primary-foreground);
  border: 2px solid var(--background);
  font-size: .6875rem; font-weight: 700; line-height: 1; font-variant-numeric: tabular-nums;
}

/* Champ mot de passe avec bouton « œil » (ajouté par app.js) */
.pwd-wrap { position: relative; display: block; }
.pwd-wrap > input { width: 100%; padding-right: 2.75rem !important; }
.pwd-toggle {
  position: absolute; top: 50%; right: .25rem; transform: translateY(-50%);
  display: grid; place-items: center; width: 2.25rem; height: 2.25rem; padding: 0;
  border: 0; border-radius: var(--r-lg); background: transparent; color: var(--muted-foreground); font-size: 1.125rem; cursor: pointer;
}
.pwd-toggle:hover { color: var(--foreground); }
.pwd-toggle:focus-visible { outline: 2px solid var(--primary); outline-offset: -2px; }

/* Choix du paiement : logo du moyen de paiement à gauche (fond blanc, lisible en mode sombre) */
.choice-pay > span { display: grid; grid-template-columns: 4.5rem minmax(0, 1fr); column-gap: .875rem; align-items: center; }
.choice-pay > span > strong, .choice-pay > span > small { grid-column: 2; }
.choice-pay .pay-logo {
  grid-row: 1 / span 2; display: grid; place-items: center; width: 4.5rem; height: 2.75rem; padding: .25rem .375rem;
  background: #fff; border: 1px solid var(--border); border-radius: var(--r-lg);
}
.choice-pay .pay-logo img { max-width: 100%; max-height: 100%; object-fit: contain; }
.choice-pay .pay-logo-icon { background: var(--secondary); }
.choice-pay .pay-logo-icon i { font-size: 1.5rem; color: var(--primary); }

/* Connexion avec Google (bouton aux couleurs neutres recommandées par Google) */
.google-btn {
  display: flex; align-items: center; justify-content: center; gap: .625rem; width: 100%; min-height: 2.75rem; padding: .5rem 1rem;
  border: 1px solid #DADCE0; border-radius: var(--r-lg); background: #fff; color: #1F1F1F;
  font-size: .9375rem; font-weight: 600; text-decoration: none; transition: background .15s, box-shadow .15s;
}
.google-btn:hover { background: #F8FAFF; color: #1F1F1F; box-shadow: 0 1px 3px rgb(0 0 0 / .12); }
.google-btn:focus-visible { outline: 2px solid var(--primary); outline-offset: 2px; }
.auth-sep { display: flex; align-items: center; gap: .75rem; margin: 1.25rem 0 1rem; font-size: .8125rem; color: var(--muted-foreground); }
.auth-sep::before, .auth-sep::after { content: ""; flex: 1; height: 1px; background: var(--border); }
.google-msg { display: flex; gap: .5rem; align-items: flex-start; margin: .625rem 0 0; padding: .625rem .75rem; border-radius: var(--r-lg); background: var(--secondary); color: var(--foreground); font-size: .8125rem; font-weight: 600; }
.google-msg i { color: var(--primary); }

/* Fiche produit : boutons plus compacts (options, panier, WhatsApp, favori, comparer) */
#productForm .chip { padding: .3125rem .8125rem; font-size: .8125rem; }
#productForm .mgb-btn-lg { padding: .5625rem 1.125rem; font-size: .9375rem; }
#productForm .mgb-btn i { font-size: 1.0625rem; }
.product-actions .outline-pill { padding: .3125rem .8125rem; font-size: .8125rem; }
@media (min-width: 576px) { #productForm .mgb-btn-lg { flex: 0 1 auto !important; } }

/* Cartes produit de même taille dans une grille : pleine largeur et pleine hauteur de la case, image carrée fixe
   (sinon une carte avec une ligne de plus, la note par exemple, se recalculait plus étroite) */
.pcard-wrap {
  display: flex; flex-direction: column; height: 100%; overflow: hidden;
  border: 1px solid var(--border); border-radius: var(--r-2xl); background: var(--card);
  transition: transform .15s, box-shadow .15s;
}
.pcard-wrap:hover { transform: translateY(-.25rem); box-shadow: var(--shadow-card); }
.pcard-wrap > .pcard { flex: 1; height: auto; border: 0; border-radius: 0; background: transparent; }
.pcard-wrap > .pcard:hover { transform: none; box-shadow: none; }
.pcard-media { flex: none; width: 100%; }
.pcard-fav { z-index: 3; }
/* Bouton d'action de la carte, dans le cadre sous le prix */
.pcard-actions { padding: 0 1rem 1rem; }
.pcard-cart-form { margin: 0; }
.pcard-cart {
  display: flex; align-items: center; justify-content: center; gap: .375rem; width: 100%; min-height: 2.375rem; padding: .375rem .75rem;
  border: 1px solid var(--primary); border-radius: 999px; background: transparent; color: var(--primary);
  font-size: .8125rem; font-weight: 700; text-decoration: none; cursor: pointer; transition: background .15s, color .15s;
}
.pcard-cart:hover, .pcard-cart.is-added { background: var(--primary); color: var(--primary-foreground); }
.pcard-cart i { font-size: 1rem; }
.pcard-cart.is-disabled { border-color: var(--border); color: var(--muted-foreground); cursor: default; }
.pcard-cart.is-disabled:hover { background: transparent; color: var(--muted-foreground); }

/* Bouton « Payer avec Wave » (lien marchand, montant prérempli) */
.wave-pay-btn {
  display: flex; align-items: center; justify-content: center; gap: .625rem; width: 100%; min-height: 3rem; padding: .5rem 1.25rem;
  border-radius: 999px; background: #1DC4FF; color: #0B1B2B; font-weight: 800; font-size: 1rem; text-decoration: none;
  box-shadow: 0 4px 14px -6px rgb(29 196 255 / .8); transition: filter .15s, transform .15s;
}
.wave-pay-btn:hover { filter: brightness(1.05); color: #0B1B2B; transform: translateY(-1px); }
.wave-pay-btn img { height: 1.5rem; width: auto; padding: .125rem .375rem; border-radius: .375rem; background: #fff; }
.wave-pay-btn-sm { width: auto; min-height: 2.25rem; padding: .25rem 1rem; font-size: .875rem; }
.wave-pay-btn-sm img { height: 1.25rem; }

/* Bouton « Payer … avec … » (lien de paiement d'un moyen réglé dans l'administration) */
.pay-link-btn {
  display: flex; align-items: center; justify-content: center; gap: .625rem; width: 100%; min-height: 3rem; padding: .5rem 1.25rem;
  border-radius: 999px; background: var(--primary); color: var(--primary-foreground); font-weight: 800; font-size: 1rem; text-decoration: none;
  transition: filter .15s, transform .15s;
}
.pay-link-btn:hover { filter: brightness(1.08); color: var(--primary-foreground); transform: translateY(-1px); }
.pay-link-btn img { height: 1.5rem; width: auto; max-width: 5rem; object-fit: contain; padding: .125rem .375rem; border-radius: .375rem; background: #fff; }
.pay-link-btn-sm { width: auto; min-height: 2.25rem; padding: .25rem 1rem; font-size: .875rem; }
.pay-link-btn-sm img { height: 1.25rem; }
.pay-link-btn.wave-pay-btn, .pay-link-btn.wave-pay-btn:hover { color: #0B1B2B; }
.price-from { font-size: .75rem; font-weight: 600; color: var(--muted-foreground); margin-right: -.25rem; }
.pcard-price { flex-wrap: wrap; row-gap: 0; }

/* Fiche produit : prix affiché sur les boutons de stockage / RAM quand il diffère */
.chip { display: inline-flex; flex-direction: column; align-items: center; line-height: 1.2; }
.chip-price { margin-top: .125rem; font-size: .6875rem; font-weight: 700; color: var(--primary); white-space: nowrap; }
.btn-check:checked + .chip .chip-price { color: var(--primary); }
.chip-price[hidden] { display: none; }