/*
Theme Name: Mobile Clinique
Theme URI: https://mobileclinique.ch
Author: Mobile Clinique
Author URI: https://mobileclinique.ch
Description: Thème bloc (FSE) sombre et technique pour la vente de smartphones et accessoires reconditionnés. Compatible WooCommerce, construit sur le design system Mobile Clinique. Accent sky-blue, typographie Space Grotesk / IBM Plex.
Version: 1.0.0
Requires at least: 6.5
Tested up to: 6.8
Requires PHP: 7.4
License: GNU General Public License v2 or later
License URI: http://www.gnu.org/licenses/gpl-2.0.html
Text Domain: mobile-clinique
Tags: e-commerce, full-site-editing, block-patterns, dark-mode, custom-colors, custom-logo, wide-blocks, woocommerce
*/

/* ─── Brand variables (mirror of the design system tokens) ─── */
:root {
  --mc-bg: #0a0a0c;
  --mc-bg-deep: #060608;
  --mc-surface: #101013;
  --mc-surface-raised: #16161a;
  --mc-surface-overlay: #1c1c21;
  --mc-border: rgba(255,255,255,0.07);
  --mc-border-strong: rgba(255,255,255,0.13);
  --mc-border-accent: rgba(56,189,248,0.32);
  --mc-text: #f4f4f6;
  --mc-muted: #a1a1aa;
  --mc-subtle: #71717a;
  --mc-accent: #38bdf8;
  --mc-accent-hover: #7dd3fc;
  --mc-accent-active: #0ea5e9;
  --mc-accent-subtle: rgba(56,189,248,0.10);
  --mc-on-accent: #041420;
  --mc-success: #34d399;
  --mc-warning: #fbbf24;
  --mc-danger: #f87171;
  --mc-radius-control: 6px;
  --mc-radius-card: 14px;
  --mc-font-display: "Space Grotesk", "Helvetica Neue", Arial, sans-serif;
  --mc-font-body: "IBM Plex Sans", "Helvetica Neue", Arial, sans-serif;
  --mc-font-mono: "IBM Plex Mono", ui-monospace, Menlo, monospace;
  --mc-shadow-md: 0 8px 24px rgba(0,0,0,0.50);
  --mc-shadow-lg: 0 18px 48px rgba(0,0,0,0.55);
  --mc-edge: inset 0 1px 0 rgba(255,255,255,0.06);
  --mc-glow: 0 0 18px rgba(56,189,248,0.18);
}

html { -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; }
body { background: var(--mc-bg); color: var(--mc-text); }

/* Mono kicker utility (usable in patterns / custom HTML) */
.mc-kicker {
  font-family: var(--mc-font-mono);
  font-size: 0.6875rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--mc-accent-hover);
}

::selection { background: rgba(56,189,248,0.30); color: #fff; }

/* Focus ring */
a:focus-visible, button:focus-visible, .wp-element-button:focus-visible,
input:focus-visible, select:focus-visible, textarea:focus-visible {
  outline: none;
  box-shadow: 0 0 0 3px rgba(56,189,248,0.55);
}

/* Scrollbar */
::-webkit-scrollbar { width: 10px; height: 10px; }
::-webkit-scrollbar-thumb { background: #2a2a31; border-radius: 999px; border: 2px solid transparent; background-clip: padding-box; }

/* ════════════════════════════════════════════════════════════
   WooCommerce — brand overrides (classes outside theme.json reach)
   ════════════════════════════════════════════════════════════ */

/* Generic buttons (classic templates + add-to-cart) */
.woocommerce a.button,
.woocommerce button.button,
.woocommerce input.button,
.woocommerce #respond input#submit,
.woocommerce .button.alt,
.wc-block-components-button:not(.is-link) {
  background: var(--mc-accent) !important;
  color: var(--mc-on-accent) !important;
  border: none !important;
  border-radius: var(--mc-radius-control) !important;
  font-family: var(--mc-font-body);
  font-weight: 600;
  box-shadow: var(--mc-glow);
  transition: background 140ms cubic-bezier(0.2,0.8,0.2,1);
}
.woocommerce a.button:hover,
.woocommerce button.button:hover,
.woocommerce .button.alt:hover,
.wc-block-components-button:not(.is-link):hover {
  background: var(--mc-accent-hover) !important;
  color: var(--mc-on-accent) !important;
}

/* Secondary / outline buttons */
.woocommerce .button.wp-element-button.wc-block-cart__submit-button,
.woocommerce a.added_to_cart {
  border-radius: var(--mc-radius-control) !important;
}

/* Product cards */
.woocommerce ul.products li.product,
.wc-block-grid__product,
.wp-block-woocommerce-product-template li {
  background: var(--mc-surface);
  border: 1px solid var(--mc-border);
  border-radius: var(--mc-radius-card);
  box-shadow: var(--mc-edge);
  padding: 1rem;
  transition: transform 220ms cubic-bezier(0.2,0.8,0.2,1), border-color 140ms, box-shadow 220ms;
}
.woocommerce ul.products li.product:hover,
.wc-block-grid__product:hover {
  transform: translateY(-3px);
  border-color: var(--mc-border-strong);
  box-shadow: var(--mc-shadow-lg), var(--mc-edge);
}
.woocommerce ul.products li.product .woocommerce-loop-product__title,
.woocommerce ul.products li.product h2 {
  font-family: var(--mc-font-body);
  font-size: 0.9rem;
  font-weight: 600;
  color: var(--mc-text);
}

/* Prices */
.woocommerce .price,
.woocommerce-Price-amount,
.wc-block-components-product-price {
  font-family: var(--mc-font-display);
  font-weight: 600;
  color: var(--mc-text);
}
.woocommerce del .woocommerce-Price-amount { color: var(--mc-subtle); }
.woocommerce ins .woocommerce-Price-amount,
.wc-block-components-product-price__value.is-discounted { color: var(--mc-danger); }

/* Sale / onsale badge */
.woocommerce span.onsale,
.wc-block-components-product-sale-badge {
  background: var(--mc-danger) !important;
  color: #1a0606 !important;
  font-family: var(--mc-font-mono);
  font-weight: 600;
  border-radius: 999px;
  min-height: auto;
  padding: 4px 10px;
}

/* Star ratings */
.woocommerce .star-rating span::before,
.woocommerce p.stars a::before { color: var(--mc-warning); }

/* Inputs */
.woocommerce form .form-row input.input-text,
.woocommerce form .form-row textarea,
.woocommerce form .form-row select,
.wc-block-components-text-input input,
.select2-container .select2-selection {
  background: var(--mc-bg-deep) !important;
  border: 1px solid var(--mc-border-strong) !important;
  border-radius: var(--mc-radius-control) !important;
  color: var(--mc-text) !important;
}

/* Notices */
.woocommerce-message,
.woocommerce-info,
.wc-block-components-notice-banner {
  background: var(--mc-surface-raised) !important;
  border: 1px solid var(--mc-border-strong) !important;
  border-top: 3px solid var(--mc-accent) !important;
  color: var(--mc-text) !important;
  border-radius: var(--mc-radius-card);
}
.woocommerce-error {
  background: var(--mc-surface-raised) !important;
  border-top: 3px solid var(--mc-danger) !important;
  color: var(--mc-text) !important;
  border-radius: var(--mc-radius-card);
}

/* Tabs / details on single product */
.woocommerce-tabs ul.tabs li {
  background: var(--mc-surface);
  border: 1px solid var(--mc-border);
  border-radius: 999px;
}
.woocommerce-tabs ul.tabs li.active {
  background: var(--mc-accent-subtle);
  border-color: var(--mc-border-accent);
}
.woocommerce div.product .woocommerce-tabs ul.tabs::before { border-color: var(--mc-border); }

/* Quantity input */
.woocommerce .quantity .qty {
  background: var(--mc-bg-deep);
  border: 1px solid var(--mc-border-strong);
  border-radius: var(--mc-radius-control);
  color: var(--mc-text);
  font-family: var(--mc-font-mono);
}

/* Cart / checkout tables */
.woocommerce table.shop_table {
  border: 1px solid var(--mc-border);
  border-radius: var(--mc-radius-card);
  background: var(--mc-surface);
}
.woocommerce table.shop_table th { color: var(--mc-muted); font-family: var(--mc-font-mono); }