:root {
  --bg: #ffffff;
  --bg-panel: #f4f6f8;
  --card-bg: #ffffff;
  --ink: #0b1220;
  --ink-soft: #6b7280;
  --border: #eef0f3;
  --blue: #007AFF;
  --green: #2f6f4f;
  --shadow: rgba(10, 30, 60, .06);
}

[data-theme="dark"] {
  --bg: #0b1220;
  --bg-panel: #141b26;
  --card-bg: #141b26;
  --ink: #f3f5f7;
  --ink-soft: #9aa3ad;
  --border: #232b38;
  --shadow: rgba(0, 0, 0, .3);
}

* { box-sizing: border-box; }

body {
  margin: 0;
  font-family: 'Inter', -apple-system, BlinkMacSystemFont, sans-serif;
  background: var(--bg);
  color: var(--ink);
  transition: background .15s, color .15s;
}

a { color: inherit; }

/* Topbar : nav texte | recherche en ligne | icônes minimalistes */
.topbar {
  display: grid;
  /* 1fr de chaque côté = les deux colonnes restent toujours égales, donc la
     recherche au centre reste vraiment centrée dans la page (pas juste entre
     deux blocs de largeurs différentes). Sa propre largeur se réduit entre
     160 et 480px selon la place disponible, sans jamais chevaucher le menu :
     un 1fr ne descend jamais sous le contenu minimal du logo/nav ou des icônes. */
  grid-template-columns: 1fr minmax(160px, 480px) 1fr;
  align-items: center;
  gap: 24px;
  padding: 16px 32px;
}
.topbar-left { display: flex; align-items: center; gap: 24px; justify-self: start; min-width: max-content; }

/* Identité — anneau + nom, façon Halo : pas de badge/pictogramme, juste un
   tracé minimal et la typographie. */
.brand-mark { display: flex; align-items: center; gap: 9px; text-decoration: none; flex-shrink: 0; }
.brand-ring { width: 20px; height: 20px; border-radius: 50%; border: 3.5px solid var(--blue); flex-shrink: 0; box-sizing: border-box; }
.brand-wordmark { font-family: 'Inter Tight', sans-serif; font-weight: 700; font-size: 17px; letter-spacing: -0.01em; color: var(--ink); text-transform: uppercase; }
.topbar-nav { display: flex; gap: 24px; font-size: 14px; font-weight: 500; }
.topbar-nav a { text-decoration: none; color: var(--ink-soft); }
.topbar-nav a:hover { color: var(--ink); }
.topbar-nav a.active { color: var(--blue); }

/* Nav mobile (Catalogue/Créateurs/Blog) — remplace .topbar-nav sous 900px,
   où le méga-menu au survol n'est de toute façon pas utilisable au tactile.
   Vit dans .mobile-bottom-row (voir plus bas), sur la même ligne que le logo
   et les icônes ; flex:1/min-width:0 pour se réduire ou défiler plutôt que
   de pousser le logo/les icônes hors de l'écran. */
.topbar-nav-mobile {
  display: flex;
  align-items: center;
  justify-content: flex-start;
  flex: 1;
  min-width: 0;
  gap: 14px;
  overflow-x: auto;
  scrollbar-width: none;
  -ms-overflow-style: none;
}
.topbar-nav-mobile::-webkit-scrollbar { display: none; }
.topbar-nav-mobile a, .topbar-nav-mobile button {
  text-decoration: none;
  color: var(--ink-soft);
  font-size: 13.5px;
  font-weight: 600;
  font-family: inherit;
  white-space: nowrap;
  flex-shrink: 0;
  border: none;
  background: none;
  padding: 0;
  cursor: pointer;
}
.topbar-nav-mobile a:hover, .topbar-nav-mobile button:hover { color: var(--ink); }
.topbar-nav-mobile a.active, .topbar-nav-mobile button.active { color: var(--blue); }

/* Méga-menu mobile — panneau plein écran ouvert par le bouton "Catalogue"
   de la barre du bas, remplace le méga-menu au survol (inutilisable au
   tactile). Masqué par défaut, affiché/masqué via toggleMobileMegaMenu(). */
.mobile-mega-overlay {
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, .5);
  z-index: 45;
}
.mobile-mega-menu {
  position: fixed;
  left: 0; right: 0; bottom: 0; top: 12%;
  background: var(--card-bg);
  border-radius: 20px 20px 0 0;
  z-index: 46;
  display: flex;
  flex-direction: column;
  overflow: hidden;
}
.mobile-mega-menu-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 16px 20px;
  border-bottom: 1px solid var(--border);
  font-weight: 700;
  font-size: 16px;
}
.mobile-mega-menu-body {
  overflow-y: auto;
  padding: 16px 20px 112px;
  display: flex;
  flex-direction: column;
  gap: 22px;
}
.mobile-mega-menu-body .mega-menu-col { display: flex; flex-direction: column; gap: 12px; }
.mobile-mega-menu-body .mega-menu-title { font-size: 17px; }
.mobile-mega-menu-body .mega-menu-sub { font-size: 15px; }

/* .mobile-mega-menu/.mobile-mega-overlay fixent leur propre `display`
   ci-dessus, ce qui l'emporte sur le `display:none` de l'attribut HTML
   `hidden` (règle de la feuille de style navigateur, toujours de priorité
   plus faible qu'une règle auteur) — d'où le besoin de ce sélecteur plus
   spécifique pour que le masquage via `hidden` fonctionne réellement. */
.mobile-mega-overlay[hidden], .mobile-mega-menu[hidden] { display: none; }

/* Le déclencheur ("Catalogue" dans .topbar-nav-mobile) n'existe que sous
   900px, mais si la fenêtre est agrandie après ouverture sur mobile, le
   panneau resterait sinon affiché (son état ouvert/fermé n'est pas lié à la
   largeur d'écran) — donc on le force à disparaître au-delà de 900px. */
@media (min-width: 901px) {
  .mobile-mega-overlay, .mobile-mega-menu { display: none !important; }
}

/* Bloc bas fixe mobile — logo, nav et icônes sur une seule rangée.
   Masqué par défaut (desktop) ; affiché en fixed sous 900px, voir plus bas. */
.mobile-bottom-header {
  display: none;
}
.mobile-bottom-row {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 10px 16px;
}

/* Méga-menu "Catalogue" */
.nav-dropdown { position: relative; }
.mega-menu {
  display: none;
  position: absolute;
  top: 100%; left: 0;
  padding-top: 14px; /* pont invisible : garde le survol actif entre le lien et le menu */
  z-index: 50;
}
.nav-dropdown:hover .mega-menu,
.nav-dropdown:focus-within .mega-menu { display: block; }
.mega-menu-inner {
  background: var(--card-bg);
  border: 1px solid var(--border);
  border-radius: 16px;
  padding: 24px;
  box-shadow: 0 8px 24px var(--shadow);
  display: grid;
  grid-template-columns: repeat(4, 170px);
  gap: 20px 28px;
}
.mega-menu-col { display: flex; flex-direction: column; gap: 6px; }
.mega-menu-title { font-weight: 700; font-size: 13.5px; color: var(--ink); margin-bottom: 4px; text-decoration: none; }
.mega-menu-title.active { color: var(--blue); }
.mega-menu-sub { font-size: 12.5px; color: var(--ink-soft); text-decoration: none; }
.mega-menu-sub:hover { color: var(--ink); }
.mega-menu-sub.active { color: var(--blue); font-weight: 600; }

.search-wrap { position: relative; width: 100%; max-width: 90vw; }
.search-inline {
  display: flex;
  align-items: center;
  gap: 10px;
  background: var(--bg-panel);
  border: 1px solid var(--border);
  border-radius: 999px;
  padding: 6px 18px 6px 6px;
}
.search-cat-wrap { position: relative; flex-shrink: 0; }
.search-cat-btn {
  display: flex;
  align-items: center;
  gap: 5px;
  max-width: 150px;
  border: none;
  background: none;
  color: var(--ink-soft);
  font-size: 12.5px;
  font-weight: 500;
  font-family: inherit;
  padding: 8px 10px 8px 14px;
  border-radius: 999px;
  cursor: pointer;
}
.search-cat-btn:hover { color: var(--ink); background: var(--border); }
.search-cat-btn span:first-child { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.search-cat-chevron { font-size: 10px; flex-shrink: 0; }
.search-cat-panel {
  position: absolute;
  top: calc(100% + 8px);
  left: 0;
  min-width: 180px;
  background: var(--card-bg);
  border: 1px solid var(--border);
  border-radius: 14px;
  padding: 6px;
  box-shadow: 0 8px 24px var(--shadow);
  z-index: 25;
}
.search-cat-option {
  display: block;
  width: 100%;
  text-align: left;
  border: none;
  background: none;
  color: var(--ink);
  font-size: 13.5px;
  font-family: inherit;
  padding: 8px 12px;
  border-radius: 8px;
  cursor: pointer;
}
.search-cat-option:hover { background: var(--bg-panel); }
.search-cat-option.active { background: var(--bg-panel); font-weight: 700; }
.search-cat-divider { flex-shrink: 0; width: 1px; height: 18px; background: var(--border); }
.search-inline-icon { font-size: 14px; color: var(--ink-soft); }
.search-inline input {
  flex: 1;
  min-width: 0;
  border: none;
  background: none;
  color: var(--ink);
  font-size: 14px;
  outline: none;
  font-family: inherit;
}
.search-dropdown {
  position: absolute;
  top: calc(100% + 8px);
  left: 0; right: 0;
  background: var(--card-bg);
  border: 1px solid var(--border);
  border-radius: 16px;
  padding: 8px;
  z-index: 20;
}
.search-dropdown:empty { display: none; padding: 0; border: none; }

.topbar-icons { display: flex; align-items: center; gap: 16px; justify-self: end; min-width: max-content; }
.lang-toggle {
  display: flex;
  align-items: center;
  background: var(--bg-panel);
  border: 1px solid var(--border);
  border-radius: 999px;
  padding: 3px;
  gap: 2px;
  flex-shrink: 0;
}
.lang-toggle-opt {
  padding: 5px 10px;
  border-radius: 999px;
  font-size: 11.5px;
  font-weight: 700;
  text-decoration: none;
  color: var(--ink-soft);
  line-height: 1;
}
.lang-toggle-opt:hover { color: var(--ink); }
.lang-toggle-opt.active { background: var(--ink); color: var(--bg); }
.icon-plain {
  position: relative;
  border: none;
  background: none;
  color: var(--ink);
  font-size: 19px;
  width: 32px; height: 32px;
  display: flex; align-items: center; justify-content: center;
  text-decoration: none;
  cursor: pointer;
}
.icon-plain:hover { opacity: .7; }
.cart-badge {
  position: absolute; top: -2px; right: -2px;
  background: var(--ink); color: var(--bg);
  font-size: 10px; font-weight: 700;
  border-radius: 999px; min-width: 16px; height: 16px;
  display: flex; align-items: center; justify-content: center;
  padding: 0 3px;
}

/* Modale générique (ex: "Poser une question") */
.modal-overlay {
  position: fixed; inset: 0;
  background: rgba(0,0,0,.4);
  z-index: 60;
  display: flex; align-items: center; justify-content: center;
  padding: 20px;
}
.modal-overlay[hidden] { display: none; }
.modal-box {
  background: var(--bg);
  border-radius: 20px;
  width: 420px;
  max-width: 100%;
  max-height: 90vh;
  overflow-y: auto;
  box-shadow: 0 16px 48px var(--shadow);
}
.modal-header { display: flex; align-items: center; justify-content: space-between; padding: 18px 22px; border-bottom: 1px solid var(--border); }
.modal-title { font-family: 'Inter Tight', sans-serif; font-size: 17px; font-weight: 700; }
.modal-close { border: none; background: none; color: var(--ink); font-size: 18px; cursor: pointer; }
.modal-body { padding: 20px 22px; }
.modal-body textarea {
  width: 100%;
  resize: vertical;
  border: 1px solid var(--border);
  border-radius: 12px;
  padding: 12px 14px;
  font-family: inherit;
  font-size: 13.5px;
  background: var(--bg);
  color: var(--ink);
}

/* Volet panier */
.cart-overlay {
  position: fixed; inset: 0;
  background: rgba(0,0,0,.4);
  z-index: 40;
}
.cart-drawer[hidden], .cart-overlay[hidden] { display: none; }
.cart-drawer {
  position: fixed;
  top: 0; right: 0;
  bottom: 0;
  width: 420px;
  max-width: 92vw;
  background: var(--bg);
  z-index: 41;
  display: flex;
  flex-direction: column;
  box-shadow: -4px 0 24px var(--shadow);
}
.cart-drawer-header {
  display: flex; align-items: center; justify-content: space-between;
  padding: 24px;
  border-bottom: 1px solid var(--border);
}
.cart-drawer-title { font-family: 'Inter Tight', sans-serif; font-size: 20px; font-weight: 700; }
.cart-drawer-close { border: none; background: none; color: var(--ink); font-size: 18px; cursor: pointer; }
.cart-drawer-body { flex: 1; overflow-y: auto; padding: 16px 24px; }
.cart-empty { color: var(--ink-soft); font-size: 14px; }
.cart-line {
  display: flex; align-items: center; gap: 12px;
  padding: 14px 0;
  border-bottom: 1px solid var(--border);
}
.cart-line-thumb {
  position: relative;
  width: 52px; height: 52px;
  border-radius: 12px;
  overflow: hidden;
  display: flex; align-items: center; justify-content: center;
  font-size: 26px;
  flex-shrink: 0;
}
.cart-line-info { flex: 1; min-width: 0; }
.cart-line-name { font-size: 13.5px; font-weight: 600; }
.cart-line-qty { font-size: 12px; color: var(--ink-soft); }
.cart-line-price { font-size: 13.5px; font-weight: 700; white-space: nowrap; }
.cart-line-remove { border: none; background: none; color: var(--ink-soft); font-size: 14px; cursor: pointer; padding: 4px; }
.cart-line-remove:hover { color: var(--ink); }
.cart-line-save-link {
  border: none; background: none; padding: 0; margin-top: 4px;
  color: var(--blue); font-size: 12px; text-decoration: underline;
  cursor: pointer;
}
.cart-drawer-footer { padding: 20px 24px; border-top: 1px solid var(--border); }
.cart-drawer-total { display: flex; align-items: center; justify-content: space-between; font-size: 15px; margin-bottom: 14px; }
.cart-drawer-view { width: 100%; }
.cart-page-list { border-top: 1px solid var(--border); }
.cart-page-footer { margin-top: 24px; padding-top: 20px; border-top: 1px solid var(--border); }

.search-result {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 8px;
  border-radius: 12px;
  text-decoration: none;
  color: var(--ink);
}
.search-result:hover { background: var(--bg-panel); }
.search-result-emoji {
  width: 40px; height: 40px;
  border-radius: 10px;
  display: flex; align-items: center; justify-content: center;
  font-size: 20px;
  flex-shrink: 0;
}
.search-result-text { display: flex; flex-direction: column; flex: 1; }
.search-result-text .name { font-size: 13.5px; font-weight: 600; }
.search-result-text .brand { font-size: 12px; color: var(--ink-soft); }
.search-result-price { font-size: 13.5px; font-weight: 700; }
.search-empty { padding: 8px; color: var(--ink-soft); font-size: 13.5px; }

/* Hero — grille de cartes catégories avec aperçu produits, pour naviguer/
   trier directement depuis l'accueil (façon Amazon), plutôt qu'une seule
   carte produit mise en avant. */
.hero { max-width: 1360px; margin: 0 auto; padding: 32px; }
.hero-cat-grid {
  display: flex;
  flex: 1 1 0;
  min-width: 0;
  gap: 20px;
  overflow-x: auto;
  scroll-snap-type: x proximity;
  scrollbar-width: none;
  -ms-overflow-style: none;
}
.hero-cat-grid::-webkit-scrollbar { display: none; }
.hero-cat-card {
  flex: 1 1 260px;
  min-width: 260px;
  scroll-snap-align: start;
  background: var(--bg-panel);
  border: 1px solid var(--border);
  border-radius: 20px;
  padding: 20px;
  display: flex;
  flex-direction: column;
  gap: 16px;
  text-decoration: none;
  color: inherit;
  transition: border-color .15s;
}
.hero-cat-card:hover { border-color: var(--ink-soft); }
.hero-cat-card-header { display: flex; align-items: center; gap: 10px; font-family: 'Inter Tight', sans-serif; font-weight: 700; font-size: 17px; }
.hero-cat-card-products { display: grid; grid-template-columns: repeat(2, 1fr); gap: 8px; }
.hero-cat-product {
  aspect-ratio: 1;
  border-radius: 12px;
  display: flex; align-items: center; justify-content: center;
  font-size: 34px;
  overflow: hidden;
}
.hero-cat-product .product-photo { width: 100%; height: 100%; object-fit: cover; }
.hero-cat-card-cta { font-size: 13.5px; font-weight: 600; color: var(--ink-soft); }
.hero-cat-card:hover .hero-cat-card-cta { color: var(--ink); }

/* Hero texte simple (pages sans promo produit, ex. Créateurs) */
.hero-text { background: var(--bg-panel); padding: 56px 32px; border-radius: 24px; text-align: center; }
.hero-eyebrow { font-size: 13px; letter-spacing: .08em; color: var(--ink-soft); margin-bottom: 8px; font-weight: 600; }
.hero-title { font-family: 'Inter Tight', sans-serif; font-size: 40px; font-weight: 700; margin-bottom: 12px; }
.hero-sub { font-size: 15px; color: var(--ink-soft); max-width: 480px; margin: 0 auto; line-height: 1.6; }

/* Sections */
.section { max-width: 1360px; margin: 0 auto; padding: 48px 32px; }
.section-alt { max-width: none; margin: 0; background: var(--bg-panel); }
.section-inner { max-width: 1360px; margin: 0 auto; }
.section-title { font-size: 24px; font-weight: 700; margin: 0 0 32px; }
.section-title.center { text-align: center; }
.section-head { display: flex; align-items: baseline; justify-content: space-between; margin-bottom: 24px; }
.section-head .section-title { margin: 0; }
.view-all { font-size: 14px; text-decoration: underline; }

/* Fil d'Ariane + barre d'outils catégorie */
.breadcrumb { font-size: 13px; color: var(--ink-soft); }
.breadcrumb a { text-decoration: none; }
.breadcrumb a:hover { color: var(--ink); }

/* Fiche produit */
.pdp-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 48px;
  margin-top: 20px;
}
.pdp-image {
  position: relative;
  border-radius: 20px;
  overflow: hidden;
  min-height: 420px;
  display: flex; align-items: center; justify-content: center;
}
.pdp-emoji { font-size: 160px; }
.pdp-thumbs { display: flex; gap: 8px; margin-top: 12px; flex-wrap: wrap; }
.pdp-thumb { width: 56px; height: 56px; border-radius: 10px; overflow: hidden; border: 2px solid transparent; padding: 0; cursor: pointer; background: var(--bg-panel); flex-shrink: 0; }
.pdp-thumb img { width: 100%; height: 100%; object-fit: cover; display: block; }
.pdp-thumb.active { border-color: var(--ink); }
.pdp-brand { font-size: 13px; font-weight: 700; text-transform: uppercase; letter-spacing: .04em; color: var(--ink-soft); margin-bottom: 8px; }
.pdp-brand-link { display: inline-block; text-decoration: none; }
.pdp-brand-link:hover { color: var(--ink); text-decoration: underline; }
.pdp-title { font-family: 'Inter Tight', sans-serif; font-size: 32px; font-weight: 700; margin: 0 0 14px; line-height: 1.2; }
.pdp-rating { font-size: 13px; color: #e0a13a; margin-bottom: 14px; }
.pdp-price { font-size: 24px; font-weight: 700; margin-bottom: 28px; }
.pdp-price .price-old { font-size: 15px; margin-left: 8px; }
.pdp-block { margin-bottom: 24px; }
.pdp-label { font-size: 12px; font-weight: 700; text-transform: uppercase; letter-spacing: .04em; color: var(--ink-soft); margin-bottom: 10px; }
.checkout-input {
  width: 100%;
  padding: 11px 16px;
  border-radius: 12px;
  border: 1px solid var(--border);
  background: var(--bg-panel);
  color: var(--ink);
  font-size: 14px;
  font-family: inherit;
}
.pdp-swatch-row { display: flex; gap: 10px; }
.pdp-swatch {
  width: 32px; height: 32px;
  border-radius: 50%;
  border: 2px solid var(--border);
  cursor: pointer;
  padding: 0;
}
.pdp-swatch.active { border-color: var(--ink); }
.pdp-size-row { display: flex; gap: 10px; flex-wrap: wrap; }
.pdp-size-btn {
  min-width: 44px;
  padding: 9px 14px;
  border-radius: 999px;
  border: 1px solid var(--border);
  background: var(--bg-panel);
  color: var(--ink);
  font-size: 13.5px;
  font-weight: 500;
  cursor: pointer;
}
.pdp-size-btn.active { background: var(--ink); color: var(--bg); border-color: var(--ink); }
.pdp-buy { margin-bottom: 24px; }
.pdp-accordion { border-top: 1px solid var(--border); padding: 16px 0; }
.pdp-accordion summary { font-weight: 600; font-size: 14px; cursor: pointer; }
.pdp-accordion p { margin: 12px 0 0; color: var(--ink-soft); font-size: 13.5px; line-height: 1.6; }

/* Avis clients */
.review-item { padding: 16px 0; border-top: 1px solid var(--border); }
.review-item-head { display: flex; align-items: center; gap: 10px; }
.review-item-stars { color: #e0a13a; font-size: 13px; }
.review-item-date { font-size: 12px; color: var(--ink-soft); margin-top: 2px; }
.review-item-comment { margin: 8px 0 0; font-size: 13.5px; color: var(--ink-soft); line-height: 1.6; }

/* Composer d'avis — carte type messagerie (sélecteur en pilule, zone de texte
   intégrée, bouton d'envoi en bas à droite séparé par un filet). */
.review-composer {
  background: var(--card-bg);
  border: 1px solid var(--border);
  border-radius: 20px;
  padding: 16px;
  margin-bottom: 28px;
}
.review-composer-top { display: flex; gap: 10px; margin-bottom: 10px; }
.review-rating-pill {
  appearance: none;
  -webkit-appearance: none;
  background: var(--bg-panel) url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='10' height='6'><path d='M0 0l5 6 5-6z' fill='%236b7280'/></svg>") no-repeat right 14px center;
  border: 1px solid var(--border);
  border-radius: 999px;
  padding: 8px 34px 8px 16px;
  font-size: 13px;
  font-weight: 600;
  color: var(--ink);
  cursor: pointer;
}
.review-composer-input {
  width: 100%;
  border: none;
  background: none;
  font-family: inherit;
  font-size: 14px;
  color: var(--ink);
  padding: 6px 4px;
  resize: vertical;
  outline: none;
}
.review-composer-input::placeholder { color: var(--ink-soft); }
.review-composer-bottom {
  display: flex; align-items: center; justify-content: space-between;
  padding-top: 12px;
  margin-top: 4px;
  border-top: 1px solid var(--border);
}
.review-composer-hint { font-size: 12px; color: var(--ink-soft); }
.review-composer-send {
  background: var(--ink);
  color: var(--bg);
  border: none;
  border-radius: 999px;
  padding: 9px 22px;
  font-weight: 600;
  font-size: 13.5px;
  cursor: pointer;
}
.review-composer-send:hover { opacity: .85; }

/* Messagerie acheteur/vendeur */
.messaging-layout {
  display: flex;
  border: 1px solid var(--border);
  border-radius: 16px;
  overflow: hidden;
  height: 560px;
}
.messaging-list {
  width: 260px;
  flex-shrink: 0;
  border-right: 1px solid var(--border);
  overflow-y: auto;
}
.messaging-list-item {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 12px 14px;
  text-decoration: none;
  color: inherit;
  border-bottom: 1px solid var(--border);
}
.messaging-list-item:hover, .messaging-list-item.active { background: var(--bg-panel); }
.messaging-thread { flex: 1; display: flex; flex-direction: column; min-width: 0; }
.messaging-thread-header { padding: 14px 18px; border-bottom: 1px solid var(--border); font-weight: 700; font-size: 14px; }
.messaging-thread-header a { text-decoration: none; color: inherit; }
.messaging-thread-body { flex: 1; overflow-y: auto; padding: 18px; display: flex; flex-direction: column; gap: 10px; }
.messaging-bubble {
  max-width: 70%;
  padding: 10px 14px;
  border-radius: 16px;
  font-size: 13.5px;
  line-height: 1.5;
}
.messaging-bubble.them { align-self: flex-start; background: var(--bg-panel); }
.messaging-bubble.me { align-self: flex-end; background: var(--ink); color: var(--bg); }
.messaging-composer { display: flex; gap: 10px; padding: 14px; border-top: 1px solid var(--border); align-items: flex-end; }
.messaging-composer textarea {
  flex: 1;
  resize: none;
  border: 1px solid var(--border);
  border-radius: 12px;
  padding: 10px 14px;
  font-family: inherit;
  font-size: 13.5px;
  background: var(--bg);
  color: var(--ink);
}

@media (max-width: 640px) {
  .messaging-layout { flex-direction: column; height: auto; }
  .messaging-list { width: 100%; max-height: 180px; border-right: none; border-bottom: 1px solid var(--border); }
  .messaging-thread { height: 420px; }
}

@media (max-width: 900px) {
  .pdp-grid { grid-template-columns: 1fr; gap: 24px; }
  .pdp-image { min-height: 280px; }
  .pdp-emoji { font-size: 100px; }
}
.cat-toolbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin: 24px 0;
  padding-bottom: 20px;
}
.cat-toolbar-count { font-size: 14px; color: var(--ink-soft); }
.cat-toolbar-filters { display: flex; gap: 10px; }
.cat-toolbar-filters select {
  padding: 9px 14px;
  border-radius: 999px;
  border: 1px solid var(--border);
  background: var(--bg-panel);
  color: var(--ink);
  font-size: 13.5px;
  cursor: pointer;
}

/* Category row */
.category-row {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 24px;
  padding-bottom: 8px;
}
.category-item {
  flex: 0 0 auto;
  scroll-snap-align: start;
  text-decoration: none;
  text-align: center;
  width: 120px;
}
.category-icon {
  width: 96px; height: 96px;
  border-radius: 50%;
  background: var(--bg-panel);
  display: flex; align-items: center; justify-content: center;
  font-size: 40px;
  margin: 0 auto 12px;
}
.category-name { font-size: 13.5px; font-weight: 500; }

/* Pills (sous-catégories, filtres) */
.scroll-row-wrap {
  position: relative;
  display: flex;
  align-items: center;
  gap: 8px;
}
.scroll-arrow {
  flex-shrink: 0;
  width: 32px; height: 32px;
  border-radius: 50%;
  border: 1px solid var(--border);
  background: var(--bg-panel);
  color: var(--ink);
  font-size: 16px;
  display: flex; align-items: center; justify-content: center;
  cursor: pointer;
}
.pill-row {
  display: flex;
  gap: 10px;
  overflow-x: auto;
  scrollbar-width: none;
  -ms-overflow-style: none;
}
.pill-row::-webkit-scrollbar { display: none; }
.pill {
  padding: 9px 18px;
  border-radius: 999px;
  border: 1px solid var(--border);
  font-size: 13.5px;
  font-weight: 500;
  text-decoration: none;
  white-space: nowrap;
  color: var(--ink);
  flex-shrink: 0;
}
.pill.active { background: var(--ink); color: var(--bg); border-color: var(--ink); }

/* Product cards — grande image, coins arrondis, bouton pilule */
.product-row {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 20px;
}
.product-scroll-row {
  display: flex;
  flex: 1 1 0;
  min-width: 0;
  gap: 20px;
  overflow-x: auto;
  scrollbar-width: none;
  -ms-overflow-style: none;
}
.product-scroll-row::-webkit-scrollbar { display: none; }
/* Même largeur que les cards de la grille 4 colonnes (repeat(4,1fr), gap 20px) */
.product-scroll-row .product-card { flex: 0 0 calc(25% - 15px); }

/* Card compacte (image seule) — historique de navigation */
.thumb-scroll-row {
  display: flex;
  gap: 14px;
  overflow-x: auto;
  scrollbar-width: none;
  -ms-overflow-style: none;
}
.thumb-scroll-row::-webkit-scrollbar { display: none; }
.product-thumb-card { flex: 0 0 100px; text-decoration: none; }
.product-thumb-card-img {
  position: relative;
  width: 100px; height: 100px;
  border-radius: 14px;
  overflow: hidden;
  border: 1px solid var(--border);
  background-color: var(--card-bg);
  display: flex; align-items: center; justify-content: center;
  font-size: 42px;
}
.product-photo { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.product-card {
  display: block;
  background: var(--card-bg);
  border: 1px solid var(--border);
  border-radius: 20px;
  overflow: hidden;
  text-decoration: none;
  color: inherit;
}
.product-thumb {
  position: relative;
  height: 220px;
  display: flex; align-items: center; justify-content: center;
}
.product-emoji { font-size: 76px; }
.product-fav {
  position: absolute;
  top: 12px; right: 12px;
  width: 32px; height: 32px;
  border-radius: 50%;
  border: none;
  background: var(--bg);
  color: var(--ink);
  font-size: 15px;
  display: flex; align-items: center; justify-content: center;
  cursor: pointer;
}
.badge {
  position: absolute;
  top: 12px; left: 12px;
  font-size: 11px;
  font-weight: 700;
  padding: 3px 8px;
  border-radius: 6px;
  color: #fff;
}
.badge-new { background: var(--green); }
.badge-sale { background: #d0453e; }
.product-body { padding: 16px 18px 18px; }
.product-name { font-weight: 700; font-size: 15.5px; margin-bottom: 4px; }
.product-desc { font-size: 12.5px; color: var(--ink-soft); line-height: 1.4; margin-bottom: 12px; }
.product-meta { display: flex; align-items: center; justify-content: space-between; margin-bottom: 14px; }
.product-rating { font-size: 12px; color: #e0a13a; }
.product-stock-warning { font-size: 12px; font-weight: 600; color: #b3690a; margin-bottom: 10px; }
.product-stock-warning.out { color: #d0453e; }
.review-count { color: var(--ink-soft); }
.product-price-row { font-size: 14.5px; font-weight: 700; }
.price-old { font-weight: 400; color: var(--ink-soft); text-decoration: line-through; font-size: 12px; margin-left: 4px; }
.btn-buy {
  display: flex; align-items: center; justify-content: space-between; gap: 8px;
  width: 100%;
  padding: 10px 18px;
  border-radius: 999px;
  border: none;
  background: var(--ink);
  color: var(--bg);
  font-weight: 600;
  font-size: 13.5px;
  text-decoration: none;
  cursor: pointer;
  transition: opacity .15s, transform .1s;
}
.btn-buy:hover { opacity: .85; }
.btn-buy:active { transform: scale(.97); }
.btn-buy:disabled { opacity: .4; cursor: not-allowed; }
.btn-buy .price-old { color: inherit; opacity: .7; }

/* Connexion (auth/login.php) */
.login-page {
  min-height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 32px;
  background: var(--bg);
}
.login-card {
  width: 400px;
  max-width: 100%;
  background: var(--card-bg);
  border: 1px solid var(--border);
  border-radius: 24px;
  padding: 48px 40px;
  text-align: center;
  box-shadow: 0 4px 24px var(--shadow);
}
.login-logo { justify-content: center; margin-bottom: 28px; }
.login-logo .brand-ring { width: 28px; height: 28px; border-width: 4.5px; }
.login-logo .brand-wordmark { font-size: 20px; }
.login-title { font-family: 'Inter Tight', sans-serif; font-weight: 700; font-size: 22px; margin-bottom: 8px; }
.login-sub { font-size: 14px; color: var(--ink-soft); margin-bottom: 32px; }
.login-error { color: #e05353; font-size: 13px; margin-bottom: 16px; }
.login-btn { margin-top: 4px; }

/* Info card générique (compte, statut vendeur…) */
.info-card {
  background: var(--card-bg);
  border: 1px solid var(--border);
  border-radius: 16px;
  padding: 20px;
}

/* Devenir créateur */
.pricing-card {
  background: var(--card-bg);
  border: 1px solid var(--border);
  border-radius: 20px;
  padding: 32px;
  text-align: center;
}
.pricing-name { font-weight: 700; font-size: 15px; color: var(--ink-soft); text-transform: uppercase; letter-spacing: .04em; margin-bottom: 8px; }
.pricing-price { font-family: 'Inter Tight', sans-serif; font-size: 42px; font-weight: 700; }
.pricing-period { font-family: 'Inter', sans-serif; font-size: 16px; font-weight: 500; color: var(--ink-soft); }
.pricing-billed { font-size: 13px; color: var(--ink-soft); margin: 6px 0 24px; }
.pricing-features { list-style: none; padding: 0; margin: 0 0 24px; text-align: left; display: flex; flex-direction: column; gap: 12px; }
.pricing-features li { font-size: 14px; padding-left: 26px; position: relative; }
.pricing-features li::before { content: '✓'; position: absolute; left: 0; color: var(--green); font-weight: 700; }
.pricing-note { font-size: 12.5px; color: var(--ink-soft); margin-top: 14px; line-height: 1.5; }

.become-creator-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 32px;
}
.become-creator-item { text-align: center; }
.become-creator-icon { font-size: 32px; margin-bottom: 12px; }
.become-creator-title { font-weight: 700; font-size: 15.5px; margin-bottom: 8px; }
.become-creator-item p { font-size: 13.5px; color: var(--ink-soft); line-height: 1.6; margin: 0; }

@media (max-width: 640px) {
  .become-creator-grid { grid-template-columns: 1fr; }
}

/* Blog */
.blog-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
  gap: 24px;
}
.blog-card { text-decoration: none; color: var(--ink); }
.blog-card-cover {
  height: 180px;
  border-radius: 16px;
  display: flex; align-items: center; justify-content: center;
  font-size: 64px;
  margin-bottom: 14px;
}
.blog-card-date { font-size: 12px; color: var(--ink-soft); margin-bottom: 4px; }
.blog-card-title { font-weight: 700; font-size: 16px; margin-bottom: 6px; line-height: 1.3; }
.blog-card-excerpt { font-size: 13px; color: var(--ink-soft); line-height: 1.5; }

.article-cover {
  height: 280px;
  border-radius: 20px;
  display: flex; align-items: center; justify-content: center;
  font-size: 96px;
  margin: 20px 0 24px;
}
.article-date { font-size: 13px; color: var(--ink-soft); margin-bottom: 8px; }
.article-title { font-family: 'Inter Tight', sans-serif; font-size: 32px; font-weight: 700; margin: 0 0 24px; line-height: 1.25; }
.article-body p { color: var(--ink-soft); font-size: 15px; line-height: 1.8; margin-bottom: 20px; }

/* Créateurs */
.creator-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
  gap: 28px;
}
.creator-item { text-decoration: none; text-align: center; }
.creator-avatar {
  width: 96px; height: 96px;
  border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  font-size: 40px;
  margin: 0 auto 12px;
}
.creator-name { font-weight: 600; font-size: 15px; margin-bottom: 4px; }
.creator-bio { font-size: 12.5px; color: var(--ink-soft); line-height: 1.4; }

.badge-halo {
  display: inline-block;
  font-family: 'Inter', sans-serif;
  font-size: 12px; font-weight: 600;
  background: var(--blue); color: #fff;
  padding: 3px 10px; border-radius: 999px;
  vertical-align: middle; margin-left: 8px;
}

/* Statut d'expédition (commandes vendeur/acheteur) — pilule inline, distincte
   de .badge qui est positionnée en absolu sur les vignettes produit. */
.status-pill {
  display: inline-block;
  font-size: 11.5px; font-weight: 700;
  padding: 3px 10px; border-radius: 999px;
  vertical-align: middle;
}
.status-pill-pending   { background: var(--blue-bg, #e8f2ff); color: var(--blue); }
.status-pill-shipped   { background: #fdecd8; color: #b3690a; }
.status-pill-delivered { background: #e3f3ea; color: var(--green); }
[data-theme="dark"] .status-pill-pending   { background: rgba(61,155,255,.15); }
[data-theme="dark"] .status-pill-shipped   { background: rgba(179,105,10,.2); }
[data-theme="dark"] .status-pill-delivered { background: rgba(47,111,79,.2); }

/* Boutique créateur — bannière + sous-nav façon page de marque */
.creator-banner {
  position: relative;
  padding: 72px 32px;
  overflow: hidden;
  /* Couleur fixe (pas var(--ink)) : le fond du bandeau est toujours la
     couleur pastel claire du créateur, quel que soit le thème clair/sombre
     du site — un texte qui suivrait le thème deviendrait blanc-sur-clair
     en mode sombre. */
  color: #0b1220;
}
.creator-banner-emoji {
  position: absolute;
  top: 50%; right: 6%;
  transform: translateY(-50%);
  font-size: 220px;
  opacity: .25;
  line-height: 1;
  pointer-events: none;
}
.creator-banner-inner { position: relative; max-width: 640px; }
.creator-banner-eyebrow { font-size: 13px; letter-spacing: .06em; font-weight: 600; opacity: .85; margin-bottom: 12px; }
.creator-banner-title { font-family: 'Inter Tight', sans-serif; font-size: 34px; font-weight: 700; line-height: 1.3; margin: 0; }
/* Avec une image de fond, le texte a besoin d'un fond propre pour rester
   lisible quelle que soit la photo envoyée par le vendeur (couleur fixe
   #0b1220 ci-dessus, indépendante du thème). */
.creator-banner.has-image .creator-banner-inner {
  background: rgba(255, 255, 255, .88);
  padding: 24px 28px;
  border-radius: 18px;
  display: inline-block;
  max-width: min(640px, 100%);
}
.creator-banner-about-btn {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  margin-top: 18px;
  padding: 9px 20px;
  border-radius: 999px;
  border: 1.5px solid currentColor;
  background: transparent;
  color: inherit;
  font-weight: 600;
  font-size: 13.5px;
  text-decoration: none;
}
.creator-banner-about-btn:hover { background: rgba(11, 18, 32, .08); }

.creator-subnav {
  display: flex;
  align-items: center;
  gap: 16px;
  padding: 14px 32px;
  border-bottom: 1px solid var(--border);
  flex-wrap: wrap;
}
.creator-subnav-brand { display: flex; align-items: center; gap: 10px; }
.creator-subnav-name { font-weight: 700; font-size: 15px; }
.btn-follow {
  padding: 8px 18px;
  border-radius: 999px;
  border: 1px solid var(--ink);
  background: transparent;
  color: var(--ink);
  font-weight: 600;
  font-size: 13.5px;
  cursor: pointer;
  text-decoration: none;
  display: inline-block;
  transition: opacity .15s, transform .1s;
}
.btn-follow:hover { opacity: .85; }
.btn-follow:active { transform: scale(.97); }
.btn-follow.active { background: var(--ink); color: var(--bg); }
.creator-subnav-followers { font-size: 13px; color: var(--ink-soft); }
.creator-subnav-stats { font-size: 13px; color: var(--ink-soft); white-space: nowrap; }
.creator-subnav-stats b { color: var(--ink); }
.creator-subnav-share {
  width: 32px; height: 32px;
  border-radius: 50%;
  border: 1px solid var(--border);
  background: transparent;
  color: var(--ink);
  cursor: pointer;
  font-size: 14px;
}
.creator-subnav-nav { display: flex; align-items: center; gap: 20px; margin-left: auto; flex-wrap: wrap; }
.creator-subnav-nav a { text-decoration: none; color: var(--ink-soft); font-size: 14px; font-weight: 500; white-space: nowrap; }
.creator-subnav-nav a:hover { color: var(--ink); }

/* Section "À propos" d'une boutique — portrait + nom en tête façon page de
   marque éditoriale, puis le texte libre du créateur en dessous. */
.creator-about { max-width: 720px; margin: 0 auto; }
.creator-about-header { text-align: center; margin-bottom: 40px; }
.creator-about-eyebrow { font-size: 12px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--ink-soft); margin: 16px 0 6px; }
.creator-about-title { font-family: 'Inter Tight', sans-serif; font-size: 28px; font-weight: 700; margin: 0; }
.creator-about-tagline { font-size: 16px; color: var(--ink-soft); font-style: italic; margin: 10px auto 0; max-width: 480px; line-height: 1.5; }
.creator-about-body { font-size: 16px; line-height: 1.8; color: var(--ink); white-space: pre-line; }

.creator-about-section { margin-top: 56px; }
.creator-about-section-title { font-family: 'Inter Tight', sans-serif; font-size: 20px; font-weight: 700; text-align: center; margin: 0 0 24px; }
.creator-about-highlights { display: grid; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); gap: 20px; }
.creator-about-highlight-card { border: 1px solid var(--border); border-radius: 16px; padding: 20px; }
.creator-about-highlight-title { font-weight: 700; font-size: 14.5px; margin-bottom: 6px; }
.creator-about-highlight-card p { color: var(--ink-soft); font-size: 13.5px; line-height: 1.6; margin: 0; }
.creator-about-values { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 12px; }
.creator-about-values li { padding-left: 28px; position: relative; font-size: 15px; line-height: 1.6; color: var(--ink); }
.creator-about-values li::before { content: "✓"; position: absolute; left: 0; top: 0; color: var(--green); font-weight: 700; }

@media (max-width: 640px) {
  .creator-banner { padding: 48px 20px; }
  .creator-banner-title { font-size: 24px; }
  .creator-banner-emoji { font-size: 140px; opacity: .18; }
  .creator-subnav { padding: 12px 20px; }
  .creator-subnav-nav { margin-left: 0; gap: 14px; }
  .creator-about-title { font-size: 22px; }
  .creator-about-body { font-size: 15px; }
}

/* Footer */
.site-footer {
  padding: 48px 32px 24px;
  border-top: 1px solid var(--border);
}
.site-footer-grid {
  display: grid;
  grid-template-columns: 1.4fr 1fr 1fr 1.4fr;
  gap: 32px;
  max-width: 1360px;
  margin: 0 auto 36px;
}
.site-footer-brand .site-footer-tagline {
  margin: 12px 0 0;
  font-size: 13px;
  line-height: 1.6;
  color: var(--ink-soft);
  max-width: 240px;
}
.site-footer-col { display: flex; flex-direction: column; gap: 10px; font-size: 13.5px; }
.site-footer-col-title { font-weight: 700; font-size: 13px; margin-bottom: 4px; }
.site-footer-col a { text-decoration: none; color: var(--ink-soft); }
.site-footer-col a:hover { color: var(--ink); }
.site-footer-newsletter p { margin: 0; font-size: 12.5px; color: var(--ink-soft); }
.site-footer-newsletter-form { display: flex; gap: 8px; margin-top: 2px; }
.site-footer-newsletter-form input {
  flex: 1;
  min-width: 0;
  padding: 10px 14px;
  border: 1px solid var(--border);
  border-radius: 999px;
  background: var(--bg-panel, transparent);
  color: var(--ink);
  font-size: 13px;
  outline: none;
}
.site-footer-newsletter-form button {
  padding: 10px 18px;
  border-radius: 999px;
  border: none;
  background: var(--ink);
  color: var(--bg);
  font-weight: 600;
  font-size: 13px;
  cursor: pointer;
  white-space: nowrap;
}
.site-footer-newsletter-status { font-size: 12.5px; margin-top: 2px; }
.site-footer-bottom {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 16px;
  max-width: 1360px;
  margin: 0 auto;
  padding-top: 20px;
  border-top: 1px solid var(--border);
}
.site-footer-copy { font-size: 12.5px; color: var(--ink-soft); text-transform: uppercase; }
.site-footer-legal { display: flex; gap: 16px; font-size: 12.5px; margin-left: auto; }
.site-footer-legal a { text-decoration: none; color: var(--ink-soft); }
.site-footer-legal a:hover { color: var(--ink); }

@media (max-width: 900px) {
  .site-footer-grid { grid-template-columns: 1fr 1fr; }
  .site-footer-brand, .site-footer-newsletter { grid-column: span 2; }
}
@media (max-width: 600px) {
  .site-footer-grid { grid-template-columns: 1fr; }
  .site-footer-brand, .site-footer-newsletter { grid-column: span 1; }
  .site-footer-bottom { justify-content: center; text-align: center; }
  .site-footer-legal { margin-left: 0; }
}

@media (max-width: 900px) {
  .topbar-nav { display: none; }

  /* Le logo/nav/icônes se déplacent en bas (fixe) — seule la recherche
     reste dans .topbar en haut, qui passe donc à une seule colonne. */
  .topbar-left { display: none; }
  .topbar > .topbar-icons { display: none; }
  .topbar { grid-template-columns: 1fr; }
  .search-wrap { width: 100%; max-width: none; min-width: 0; }

  .mobile-bottom-header {
    display: block;
    position: fixed;
    left: 0; right: 0; bottom: 0;
    background: var(--bg);
    border-top: 1px solid var(--border);
    z-index: 30;
  }
  .mobile-bottom-row .brand-wordmark { display: none; }
  body { padding-bottom: 96px; }

  .product-row { grid-template-columns: repeat(2, 1fr); }
  .product-scroll-row .product-card { flex-basis: calc(50% - 10px); }
  .become-creator-grid { grid-template-columns: repeat(2, 1fr); }
  .category-row {
    flex-wrap: nowrap;
    justify-content: flex-start;
    overflow-x: auto;
    scrollbar-width: none;
    -ms-overflow-style: none;
  }
  .category-row::-webkit-scrollbar { display: none; }
  .category-item { width: 92px; }
  .hero .scroll-arrow { display: none !important; }
  .hero-cat-card { flex: 0 0 86%; min-width: 0; }
}

@media (max-width: 640px) {
  .topbar { padding: 12px 16px; gap: 12px; }
  .mobile-bottom-row .topbar-icons { gap: 10px; }
  .icon-plain { width: 28px; height: 28px; font-size: 17px; }
  .search-inline { padding: 6px 12px 6px 4px; gap: 6px; }
  .search-inline input { font-size: 13px; }
  .search-cat-btn { max-width: 84px; padding: 8px 4px 8px 10px; font-size: 11.5px; }
  .hero-title { font-size: 36px; }
  .product-row { grid-template-columns: 1fr; }
  .product-scroll-row .product-card { flex-basis: 100%; }
  .cat-toolbar { flex-direction: column; align-items: stretch; gap: 12px; }
  .cat-toolbar-filters { flex-wrap: wrap; }
  .cat-toolbar-filters select { flex: 1; min-width: 130px; }
}