/* =========================================================
   MeiuBuy — thème "boutique" (TEST)
   Tout le thème de test est dans ce fichier : il se charge après style.css
   et ne touche qu'à l'apparence. Les pages et leur contenu ne changent pas.
   Pour revenir au thème noir : retirer la ligne theme-pro.css des pages .html
   et remettre assets/fond.webp comme logo dans index.html.
   ========================================================= */
@import url("https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700;800&display=swap");

:root {
  --ink: #101828;
  --head: #101828;             /* header et haut de l'accueil : bleu nuit */
  --red: #e01e2b;
  --red-dark: #b8131e;
  --red-text: #c41622;         /* rouge un peu plus foncé pour les textes */
  --white: #101828;            /* style.css utilise --white pour le texte principal */
  --grey: #4f4f4f;
  --bg: #d6d6d6;
  --surface: #eeeeee;          /* cartes et fenêtres : gris clair neutre à la place du blanc */
  --panel: #eeeeee;
  --border: #c2c2c2;
  --soft: #e0e0e0;
  --muted: #5a5a5a;
  --placeholder: #6f6f6f;
  --rail: #cacaca;             /* fond des barres de progression */
  --hover-line: #a3a3a3;       /* bordure des cartes au survol */
  --ok: #0e5f2e;
}

/* Textes rouges et d'état, plus foncés pour rester lisibles sur le gris */
.step-num, .form-msg, .p-hint, .btn-danger, .acc-danger h2, .suggestions .s-best, .adm-card.tone-red strong {
  color: var(--red-text);
}

/* Couleur de page en bleu nuit : c'est elle qui remplit le petit espace au bord de l'aperçu.
   Le gris du site reste peint par body, donc rien d'autre ne change. */
html { background-color: var(--head); }
body { font-family: "Inter", system-ui, sans-serif; min-height: 100vh; }

/* Plus de particules sur le fond (le logo garde ses effets au survol) */
#bg-canvas, .cursor-glow { display: none; }

/* Police : Inter partout, le nom "MeiuBuy" du header garde son style */
.user-avatar, .confirm-modal h2, .confirm-icon, .stock-pill strong, .steps strong, .step-num,
.cat-head h2, .cat-price, .drawer-head h2, .cart-total-row strong, .p-title, .p-price,
.g-soon strong, .p-empty h1, .acc-guest h1, .acc-section h1, .acc-card h2, .fav-price, .co-title,
.co-step h2 small, .co-total strong, .ship-result strong, .ship-parcels, .order-number,
.order-total strong, .adm-head h1, .adm-card strong, .adm-order-amount, .adm-order-body h3 {
  font-family: "Inter", system-ui, sans-serif;
  font-style: normal;
  letter-spacing: -.01em;
}
.cat-head h2, .p-title, .acc-section h1, .co-title, .adm-head h1 { font-weight: 700; }

/* ===== Header : bande sombre sur toutes les pages, le logo garde ses couleurs ===== */
.topbar {
  background: var(--head);
  backdrop-filter: none;
  padding-top: 12px;
  padding-bottom: 12px;
  color: #fff;
}
.brand-white { color: #fff; }
.brand-red { color: #f5212f; }
.topbar .btn { color: #fff; }
.topbar .btn-ghost, .topbar .btn-icon, .user-btn {
  background: rgba(255, 255, 255, .07);
  border: 1px solid rgba(255, 255, 255, .16);
}
.topbar .btn-ghost:hover, .topbar .btn-icon:hover, .user-btn:hover, .user-btn[aria-expanded="true"] {
  background: rgba(255, 255, 255, .14);
  border-color: rgba(255, 255, 255, .3);
}
.user-chevron { color: #aab2c0; }
.user-avatar { color: #fff; font-weight: 700; }
.cart-count { color: #fff; }

/* ===== Boutons ===== */
.btn { border-radius: 8px; }
.btn:hover { transform: none; }
.btn-icon { border-radius: 8px; }
.user-btn { border-radius: 8px; }
.user-avatar { border-radius: 6px; }
.btn-red, .btn-discord, .btn-danger-solid { color: #fff; }
.btn-red:hover { background: var(--red-dark); box-shadow: none; }
.btn-discord:hover { box-shadow: none; background: #4752c4; }
.btn-danger-solid:hover { box-shadow: none; }
.btn-ghost { background: var(--surface); }
.btn-ghost:hover { border-color: var(--ink); }
.btn-danger { border-color: var(--red); }
.btn-danger:hover { color: #fff; }

/* ===== Accueil : haut sombre avec le logo, catalogue sur fond clair ===== */
.hero {
  background: var(--head);
  overflow: hidden;
  overflow: clip;
  padding-top: 84px;
}
.logo-wrap { width: min(800px, 100%); margin-bottom: 4px; }
.logo-img {
  filter: none;
  mix-blend-mode: normal;
  -webkit-mask-image: none;
  mask-image: none;
}

.stock-pill, .search, .quick-tags, .steps, .catalog { animation: none; }

.stock-pill {
  background: rgba(255, 255, 255, .08);
  border-color: rgba(255, 255, 255, .14);
  border-radius: 8px;
  backdrop-filter: none;
  color: #c5cad4;
}
.stock-pill strong { color: #fff; }
.stock-dot::after { display: none; }

.search-bubble {
  background: var(--surface);
  border: 1px solid transparent;
  border-radius: 12px;
  box-shadow: 0 10px 30px rgba(0, 0, 0, .25);
}
.search-bubble:hover { transform: scale(1.015); border-color: transparent; }
.search-bubble:focus-within {
  transform: scale(1.02);
  border-color: transparent;
  box-shadow: 0 0 0 3px rgba(255, 255, 255, .25), 0 10px 30px rgba(0, 0, 0, .25);
}
.search-bubble:focus-within .search-icon { color: var(--ink); }
#search-input::placeholder { color: var(--placeholder); }
.search-submit { color: #fff; border-radius: 8px; }
.search-submit:hover { box-shadow: none; }

.suggestions {
  background: var(--surface);
  border-radius: 12px;
  box-shadow: 0 18px 40px rgba(16, 24, 40, .22);
}
.suggestions li:hover, .suggestions li.active { background: var(--soft); }
.suggestions .s-thumb { background: var(--soft); border-radius: 6px; }
.suggestions .s-price { color: var(--ink); }
.suggestions li:hover .s-go, .suggestions li.active .s-go { color: var(--ink); }
.suggestions .s-best { background: rgba(224, 30, 43, .1); border-radius: 4px; }

.quick-tags { position: relative; color: #aab2c0; }
.tag { color: #e6e9ef; border-color: rgba(255, 255, 255, .2); border-radius: 8px; }
.tag:hover { border-color: rgba(255, 255, 255, .4); background: rgba(255, 255, 255, .08); }

/* Le fond clair démarre au milieu de la bande des étapes et descend jusqu'en bas */
.quick-tags::after {
  content: "";
  position: absolute;
  z-index: 1;
  top: calc(100% + 64px);
  left: 50%;
  width: 200vw;
  margin-left: -100vw;
  height: 100000px;
  background: var(--bg);
  pointer-events: none;
}
.steps, .catalog { position: relative; z-index: 2; }

.steps {
  background: var(--surface);
  border-radius: 12px;
  box-shadow: 0 8px 24px rgba(16, 24, 40, .1);
}
.steps strong { font-weight: 600; }
.step-num { font-weight: 700; font-size: 1.05rem; }
.step-arrow { color: #8f8f8f; }

.footer { color: var(--muted); }

/* ===== Catalogue ===== */
.cat-sort select { background-color: var(--surface); border-radius: 8px; }
.cat-sort select:hover, .cat-sort select:focus { border-color: var(--ink); }
.cat-sort select option, .acc-form select option, .adm-order-form select option { background: var(--surface); }

.cat-chip { background: var(--surface); border-radius: 8px; }
.cat-chip:hover { border-color: var(--ink); }
.cat-chip.active { color: #fff; background: var(--ink); border-color: var(--ink); }

.cat-card { background: var(--surface); border-radius: 12px; }
.cat-card:hover {
  transform: translateY(-2px);
  border-color: var(--hover-line);
  box-shadow: 0 10px 26px rgba(16, 24, 40, .1);
}
.cat-img, .fav-img { background: var(--soft); }
.cat-name { font-weight: 500; }
.cat-dots span, .swatch span { border-color: rgba(16, 24, 40, .18); }
.cat-price { color: var(--ink); font-weight: 700; }

/* ===== Fenêtres : menu du compte, connexion, panier, messages ===== */
.user-dropdown {
  background: var(--surface);
  color: var(--ink);
  border-radius: 12px;
  box-shadow: 0 18px 44px rgba(16, 24, 40, .2);
}
.user-dropdown a, .user-dropdown button { border-radius: 8px; }
.user-dropdown a:hover, .user-dropdown button:hover { background: var(--soft); }
.user-dropdown a:hover svg { color: var(--ink); }
.user-dropdown .ud-admin { color: #6b4606; background: #fef8e1; }
.user-dropdown .ud-admin svg { color: #6b4606; }
.user-dropdown .ud-admin:hover { background: #fdf0c0; }

.overlay { background: rgba(16, 24, 40, .45); backdrop-filter: blur(2px); }
.modal {
  background: var(--surface);
  border-radius: 14px;
  box-shadow: 0 24px 60px rgba(16, 24, 40, .25);
}
.close:hover { color: var(--ink); transform: none; }
.tabs { background: var(--soft); border-radius: 10px; }
.tab { border-radius: 8px; }
.tab.active { background: var(--ink); color: #fff; }
.confirm-icon { background: #e7eefc; color: #1a3f91; }

.drawer { background: var(--surface); box-shadow: -14px 0 40px rgba(16, 24, 40, .14); }
.ci-img img { background: var(--soft); border-radius: 8px; }
.qty { border-radius: 8px; }
.qty button:hover { color: var(--ink); }

.toast {
  background: var(--surface);
  border-color: var(--border);
  border-radius: 10px;
  box-shadow: 0 14px 36px rgba(16, 24, 40, .18);
}

/* Champs de formulaire */
.auth-form input, .acc-form input, .acc-form select, .co-note, .adm-search,
.adm-order-form input, .adm-order-form select, .adm-order-form textarea {
  background: var(--surface);
  border-radius: 8px;
}
.auth-form input:focus, .acc-form input:focus, .acc-form select:focus, .co-note:focus {
  border-color: var(--ink);
  box-shadow: 0 0 0 3px rgba(16, 24, 40, .08);
}
.adm-search:focus, .adm-order-form input:focus, .adm-order-form select:focus, .adm-order-form textarea:focus {
  border-color: var(--ink);
}
.acc-form label small, .adm-order-form small { color: var(--muted); }

/* ===== Page article ===== */
.g-main { background: var(--soft); border-radius: 12px; }
.g-badge, .g-count, .g-zoom, .g-nav {
  background: rgba(16, 24, 40, .78);
  color: #fff;
  backdrop-filter: none;
}
.g-badge { color: #fff; border-color: transparent; border-radius: 6px; }
.g-count, .g-zoom { border-radius: 6px; }
.g-nav { border-color: transparent; }
.g-nav:hover { background: var(--ink); border-color: var(--ink); }
.g-thumb { border-radius: 8px; opacity: .75; }
.g-thumb.active { border-color: var(--ink); }
.g-soon { background: var(--soft); }
.g-soon-dot, .opt-model-soon { border-color: rgba(16, 24, 40, .35); }

.p-info { background: var(--surface); border-radius: 12px; backdrop-filter: none; }
.p-price { color: var(--ink); font-weight: 700; }
.p-weight { background: var(--soft); border-radius: 8px; }
.p-weight svg { color: var(--grey); }

.opt { background: var(--surface); border-radius: 8px; }
.opt:hover { border-color: var(--ink); transform: none; }
.opt.active { border-color: var(--ink); background: var(--soft); box-shadow: inset 0 0 0 1px var(--ink); }
.opt-model img { background: var(--soft); border-radius: 6px; }
.swatch.active { border-color: var(--ink); }

.p-added, .form-msg.ok { color: var(--ok); }
.p-perks li::before { color: var(--ok); }

.fav-btn { background: var(--surface); }
.fav-btn.active { background: rgba(224, 30, 43, .08); }

.lightbox { background: rgba(16, 24, 40, .94); }
.lb-nav { color: #fff; background: rgba(255, 255, 255, .14); }
.lb-count { color: #c5cad4; }

/* ===== Compte ===== */
.acc-side, .acc-card, .fav-card, .adm-tabs, .adm-card, .order-steps li {
  background: var(--surface);
  border-radius: 12px;
}
.acc-nav a { border-radius: 8px; }
.acc-nav a:hover { background: var(--soft); }
.acc-nav a.active { background: var(--soft); box-shadow: inset 3px 0 0 var(--ink); }
.acc-count:not(:empty) { color: #fff; }
.acc-guest-icon { color: var(--ink); background: var(--soft); border-color: var(--border); }
.acc-danger { border-color: rgba(224, 30, 43, .3); }
.addr-card.is-default { border-color: var(--ink); }
.addr-badge { background: var(--soft); color: var(--ink); border-radius: 6px; }
.order-steps li::before { background: var(--soft); color: var(--ink); }

.fav-card:hover { transform: translateY(-2px); border-color: var(--hover-line); }
.fav-price { color: var(--ink); }
.fav-remove { background: var(--surface); box-shadow: 0 2px 8px rgba(16, 24, 40, .18); }
.fav-remove:hover { background: var(--surface); }

/* Statuts de commande : couleurs lisibles sur fond clair */
.order-status { border-radius: 6px; }
.tone-wait { background: #fef8e1; color: #6b4606; }
.tone-ok { background: #e7eefc; color: #1a3f91; }
.tone-done { background: #e4f6ea; color: var(--ok); }
.tone-off { background: var(--soft); color: var(--grey); }
.order-progress li::before { background: var(--rail); }
.order-progress li.done::before { background: var(--ink); }
.order-items img { background: var(--soft); border-radius: 6px; }
.order-total strong { color: var(--ink); }
.co-done-icon { color: var(--ok); background: #e4f6ea; border-color: #bfe6cc; }

/* ===== Commande ===== */
.co-num { background: var(--ink); color: #fff; }
.co-address { background: var(--surface); border-radius: 10px; }
.co-address:hover { border-color: var(--ink); }
.co-address.selected { border-color: var(--ink); background: var(--soft); }
.co-address.selected .co-radio { border-color: var(--ink); }
.co-address.selected .co-radio::after { background: var(--ink); }
.co-item img { background: var(--soft); border-radius: 8px; }
.co-how, .ship-result > div, .ship-rates, .ship-grid li { background: var(--soft); }
.ship-price { color: var(--ink); }
.co-total strong { color: var(--ink); font-weight: 700; }
.co-warning { background: rgba(224, 30, 43, .07); border-color: rgba(224, 30, 43, .3); }

/* ===== Admin ===== */
.adm-tabs a { border-radius: 8px; }
.adm-tabs a.active { background: var(--ink); color: #fff; }
.adm-tabs a.active .acc-count { background: var(--surface); color: var(--ink); }
.adm-card.tone-wait { border-color: #efd98c; background: var(--surface); }
.adm-card.tone-wait strong { color: #6b4606; }
.adm-card.tone-ok { background: var(--surface); }
.adm-card.tone-ok strong { color: #1a3f91; }
.adm-card.tone-red { border-color: var(--border); }
.adm-bar { background: var(--rail); }
.adm-bar span { background: var(--ink); }
.adm-bars-grey .adm-bar span { background: #8f8f8f; }
.adm-mini li, .adm-order-form { background: var(--soft); }
.adm-chip { background: var(--surface); border-radius: 8px; }
.adm-chip:hover { border-color: var(--ink); }
.adm-chip.active { color: #fff; background: var(--ink); border-color: var(--ink); }
.adm-order-head:hover, .adm-table tbody tr:hover { background: var(--soft); }
.adm-table td { border-bottom-color: var(--border); }

/* ===== Bouton jour / nuit, en haut à gauche ===== */
.topbar { justify-content: flex-start; gap: 14px; }
.actions { width: auto; }
.site-links { margin-right: 0; }
.theme-switch {
  --opt: 44px;
  position: relative;
  display: inline-flex;
  flex-shrink: 0;
  height: var(--opt);
  border: 1px solid rgba(255, 255, 255, .16);
  border-radius: 8px;
  background: rgba(255, 255, 255, .07);
}
.theme-opt {
  width: var(--opt);
  display: grid;
  place-items: center;
  color: #aab2c0;
  transition: color .6s;
}
.theme-opt + .theme-opt { border-left: 1px solid rgba(255, 255, 255, .16); }
.theme-opt:hover, .theme-opt[aria-pressed="true"] { color: #fff; }

/* Le cadre qui entoure le thème actif : il glisse d'un côté à l'autre */
.theme-frame {
  position: absolute;
  top: -1px;
  bottom: -1px;
  left: -1px;
  width: calc(var(--opt) + 2px);
  border: 1.5px solid #fff;
  border-radius: 8px;
  pointer-events: none;
  transition: transform 1s cubic-bezier(.65, 0, .35, 1);
}
html[data-theme="dark"] .theme-frame { transform: translateX(var(--opt)); }

@media (max-width: 1000px) {
  .hero { padding-top: 116px; }
}
@media (max-width: 760px) {
  .actions { width: auto; }
  .theme-switch { --opt: 40px; }
}
/* Téléphone : tout tient sur une ligne, l'inscription reste accessible depuis la fenêtre Connexion */
@media (max-width: 480px) {
  .theme-switch { --opt: 34px; }
  .topbar { gap: 8px; }
  .actions [data-open-auth="register"] { display: none; }
}

/* Changement de thème en 2 secondes : la nouvelle couleur s'étend en cercle (voir theme.js) */
::view-transition { pointer-events: none; }
::view-transition-old(root),
::view-transition-new(root) { animation: none; mix-blend-mode: normal; }

/* Navigateurs sans cet effet : les couleurs changent en fondu */
html.theme-fade,
html.theme-fade *,
html.theme-fade *::before,
html.theme-fade *::after {
  transition: background-color 2s ease, color 2s ease, border-color 2s ease, fill 2s ease, stroke 2s ease !important;
}

/* ===== Mode nuit : le gris devient un noir doux, le bleu du haut ne change pas ===== */
html[data-theme="dark"] {
  color-scheme: dark;
  --ink: #f2f2f2;
  --white: #f2f2f2;
  --grey: #ababab;
  --bg: #141414;
  --surface: #1f1f1f;
  --panel: #1f1f1f;
  --border: #363636;
  --soft: #2a2a2a;
  --muted: #949494;
  --placeholder: #949494;
  --rail: #363636;
  --hover-line: #666;
  --ok: #4ade80;
  --red-text: #ff5c66;
}

/* Sélections : fond clair, donc texte noir */
html[data-theme="dark"] .cat-chip.active,
html[data-theme="dark"] .adm-chip.active,
html[data-theme="dark"] .tab.active,
html[data-theme="dark"] .co-num,
html[data-theme="dark"] .adm-tabs a.active,
html[data-theme="dark"] .g-nav:hover {
  color: #000;
}

html[data-theme="dark"] .cat-dots span,
html[data-theme="dark"] .swatch span { border-color: rgba(255, 255, 255, .25); }
html[data-theme="dark"] .g-soon-dot,
html[data-theme="dark"] .opt-model-soon { border-color: rgba(255, 255, 255, .35); }
html[data-theme="dark"] .step-arrow { color: #777; }
html[data-theme="dark"] .cat-card:hover { box-shadow: none; }

/* Statuts et messages : couleurs vives sur fond sombre */
html[data-theme="dark"] .tone-wait { background: rgba(250, 204, 21, .12); color: #facc15; }
html[data-theme="dark"] .tone-ok { background: rgba(96, 165, 250, .12); color: #60a5fa; }
html[data-theme="dark"] .tone-done { background: rgba(74, 222, 128, .12); color: #4ade80; }
html[data-theme="dark"] .co-done-icon { color: #4ade80; background: rgba(74, 222, 128, .1); border-color: rgba(74, 222, 128, .35); }
html[data-theme="dark"] .confirm-icon { background: rgba(96, 165, 250, .12); color: #60a5fa; }
html[data-theme="dark"] .user-dropdown .ud-admin { color: #facc15; background: rgba(250, 204, 21, .08); }
html[data-theme="dark"] .user-dropdown .ud-admin svg { color: #facc15; }
html[data-theme="dark"] .user-dropdown .ud-admin:hover { background: rgba(250, 204, 21, .14); }
html[data-theme="dark"] .adm-card.tone-wait { border-color: rgba(250, 204, 21, .35); }
html[data-theme="dark"] .adm-card.tone-wait strong { color: #facc15; }
html[data-theme="dark"] .adm-card.tone-ok strong { color: #60a5fa; }

/* ===== Header un peu plus grand, et plus haut dans les pages du site ===== */
.topbar { padding-top: 18px; padding-bottom: 18px; }
.brand { font-size: 1.85rem; }
.site-links a, .site-links button { padding: 9px 14px; font-size: .98rem; }
.topbar .btn-icon { width: 48px; height: 48px; }
.topbar .btn-icon svg { width: 24px; height: 24px; }
.theme-switch { --opt: 48px; }
.user-btn { padding: 5px 14px 5px 5px; }
.user-btn .user-avatar { width: 38px; height: 38px; font-size: 1.05rem; }
.user-name { font-size: 1rem; }
.topbar .btn-ghost, .topbar .btn-red { padding: 12px 20px; font-size: .95rem; }

/* le contenu commence sous le header, qui est plus haut */
.hero { padding-top: 104px; }
.product-page, .account-page, .checkout-page, .admin-page { padding-top: 118px; }
.p-info, .acc-side, .co-summary { top: 112px; }

@media (max-width: 1000px) {
  .hero { padding-top: 140px; }
  .product-page, .account-page, .checkout-page, .admin-page { padding-top: 144px; }
}
@media (max-width: 760px) {
  .topbar { padding-top: 12px; padding-bottom: 12px; }
  .topbar .btn-icon { width: 40px; height: 40px; }
  .topbar .btn-icon svg { width: 22px; height: 22px; }
  .theme-switch { --opt: 40px; }
  .user-btn .user-avatar { width: 34px; height: 34px; }
  .topbar .btn-ghost, .topbar .btn-red { padding: 9px 12px; font-size: .8rem; }
  .hero { padding-top: 116px; }
  .product-page, .account-page, .checkout-page, .admin-page { padding-top: 118px; }
}
@media (max-width: 480px) {
  .theme-switch { --opt: 34px; }
}

/* ===== Plus d'espace entre le header et le contenu des pages ===== */
.product-page, .account-page, .checkout-page, .admin-page { padding-top: 150px; }
.breadcrumb { margin-bottom: 28px; }
@media (max-width: 1000px) {
  .product-page, .account-page, .checkout-page, .admin-page { padding-top: 172px; }
}
@media (max-width: 760px) {
  .product-page, .account-page, .checkout-page, .admin-page { padding-top: 136px; }
  .breadcrumb { margin-bottom: 20px; }
}