/* ════════════════════════════════════════════════════════════════
  VOLT PC — Design system · v2 « Lumière »
  Clair · moderne · premium — blanc, ardoise & indigo électrique
  ════════════════════════════════════════════════════════════════ */

/* ════════════════════════════════════════════════════════════════
  VOLT PC — Design system · v4 « Cupertino »
  Style Apple : accent unique Action Blue, surfaces plates blanc /
  parchemin / anthracite, zéro dégradé, une seule ombre (visuels
  produit), typo SF Pro/Inter serrée, CTA en pilule.
  ════════════════════════════════════════════════════════════════ */
:root {
 /* ── Identité « SUNSET » (thème principal, clair & chaleureux) ──
   Orange coucher de soleil + secondaire corail/rose, sur papier chaud. */
 --bg: #ffffff;      /* papier pêche chaud */
 --bg-soft: #f3f3f4;
 --surface: #ffffff;    /* blanc chaud des cartes */
 --surface-2: #f5f5f6;
 --header-bg: rgba(255, 255, 255, 0.80);
 --hero-base: linear-gradient(160deg, #fafafa 0%, #f1f1f2 60%, #e9e9eb 100%);
 --site-glow-a: rgba(0, 0, 0, 0.05);  /* halo orange */
 --site-glow-b: rgba(0, 0, 0, 0.04);  /* halo corail (secondaire) */
 --tile-dark: #131315;

 --border: rgba(0, 0, 0, 0.10);
 --border-strong: rgba(0, 0, 0, 0.17);

 --text: #0a0a0b;     /* espresso chaud */
 --text-dim: #5b5b60;
 --text-faint: #68686f;

 --accent: #111114;      /* orange coucher de soleil (primaire) */
 --accent-soft: #2c2c31;
 --accent-ink: #111114;    /* variante texte (contraste sur clair) */
 --accent-2: #44444a;     /* corail / rose (secondaire) */
 --accent-on-dark: #ffffff;
 --gradient: #111114; /* dégradé sunset */
 --accent-wash: rgba(0, 0, 0, 0.05);
 --accent-wash-strong: rgba(0, 0, 0, 0.09);
 --on-primary: #ffffff;

 --green: #1c7d4d;
 --green-soft: #2dbd6e;
 --red: #d63a3a;
 --amber: #b45309;

 /* Rayons */
 --radius: 20px;
 --radius-sm: 13px;

 /* Élévation : ombres chaudes douces */
 --shadow-xs: none;
 --shadow-sm: none;
 --shadow: none;
 --shadow-lg: 0 18px 44px -22px rgba(0, 0, 0, 0.18);
 --shadow-accent: 0 12px 30px -14px rgba(0, 0, 0, 0.38);
 --shadow-product: rgba(0, 0, 0, 0.16) 0 8px 36px 2px;

 /* Typo : display caractériel + grotesk de lecture + mono (prix/specs) */
 --font-display: "Bricolage Grotesque", -apple-system, system-ui, sans-serif;
 --font-body: "Manrope", -apple-system, system-ui, sans-serif;
 --font-mono: "JetBrains Mono", ui-monospace, "SFMono-Regular", monospace;
}

* { box-sizing: border-box; margin: 0; padding: 0; }

html {
 scroll-behavior: smooth;
 overflow-x: clip;
}

body {
 font-family: var(--font-body);
 background: var(--bg);
 color: var(--text);
 min-height: 100vh;
 overflow-x: clip;        /* clip (et non hidden) : évite que body devienne un conteneur de défilement et casse position:sticky */
 font-size: 17px;         /* pace de lecture Apple (pas 16) */
 -webkit-font-smoothing: antialiased;
 text-rendering: optimizeLegibility;
}

h1, h2, h3, h4 { font-family: var(--font-display); letter-spacing: -0.02em; color: var(--text); }
a { color: inherit; text-decoration: none; }
button { font-family: inherit; cursor: pointer; }
input, select, textarea { font-family: inherit; }
img { max-width: 100%; }
[hidden] { display: none !important; }

/* Chiffres tabulaires : prix & stats ne « sautent » pas */
.price, .price-old, .kpi-value, .hero-stat strong, .summary-line, .cart-totals,
.specs-table td, .mini-table td { font-variant-numeric: tabular-nums; }

::selection { background: rgba(120, 120, 128, 0.26); color: var(--text); }

:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; border-radius: 4px; }

/* ─── Fond animé : la carte mère cachée (canvas circuit) ─── */
#bgfx {
 position: fixed;
 inset: 0;
 z-index: -1;
 pointer-events: none;
 opacity: 0.9;
}

/* ─── Bandeau annonce ─── */
.announce {
 position: relative;
 background: var(--gradient);
 color: #ffffff;
 font-size: 0.82rem;
 font-weight: 600;
 letter-spacing: 0.01em;
 text-align: center;
 padding: 9px 16px;
 overflow: hidden;
 white-space: nowrap;
 text-overflow: ellipsis;
}
.announce strong { font-weight: 800; }
.announce-ico { vertical-align: -2px; margin-right: 2px; }

/* ─── Header ─── */
.header {
 position: sticky;
 top: 0;
 z-index: 50;
 display: flex;
 align-items: center;
 gap: 22px;
 padding: 14px 28px;
 background: var(--header-bg);
 backdrop-filter: saturate(180%) blur(20px);
 -webkit-backdrop-filter: saturate(180%) blur(20px);
 border-bottom: 1px solid var(--border);
}

.logo {
 display: flex;
 align-items: center;
 gap: 9px;
 font-family: var(--font-display);
 font-size: 1.32rem;
 font-weight: 700;
 letter-spacing: -0.03em;
}
.logo em { font-style: normal; background: var(--gradient); -webkit-background-clip: text; background-clip: text; color: transparent; }

.nav { display: flex; gap: 2px; }
.nav a {
 padding: 8px 14px;
 border-radius: 999px;
 font-size: 0.92rem;
 font-weight: 500;
 color: var(--text-dim);
 transition: color 0.2s, background 0.2s;
}
.nav a:hover { color: var(--text); background: rgba(15, 23, 42, 0.05); }
.nav a.active { color: var(--accent-ink); background: var(--accent-wash); }
.nav .chev { font-size: 0.55rem; opacity: 0.6; vertical-align: 2px; }
.nav-sale { color: var(--accent); font-weight: 600; }
.nav-sale:hover { color: var(--accent-ink); background: var(--accent-wash); }
.nav-contact { font-weight: 600; }
.nav-contact:hover { color: var(--accent); background: var(--accent-wash); }

/* ─── Sous-menus déroulants ─── */
.nav-item { position: relative; }
.nav-menu {
 position: absolute;
 top: calc(100% + 10px);
 left: 0;
 translate: 0 6px;
 min-width: 250px;
 max-width: min(560px, calc(100vw - 24px));
 display: grid;
 gap: 2px;
 padding: 10px;
 background: var(--surface);
 border: 1px solid var(--border);
 border-radius: 18px;
 box-shadow: var(--shadow-lg);
 opacity: 0;
 visibility: hidden;
 transition: opacity 0.18s ease, translate 0.18s ease, visibility 0.18s;
 z-index: 70;
}
.nav-menu::before {      /* pont invisible pour le survol */
 content: "";
 position: absolute;
 top: -12px;
 left: 0;
 right: 0;
 height: 12px;
}
.nav-item:hover .nav-menu,
.nav-item:focus-within .nav-menu {
 opacity: 1;
 visibility: visible;
 translate: 0 0;
}
.nav-menu-grid { grid-template-columns: 1fr 1fr; min-width: 460px; }
.nav-menu-link {
 display: flex;
 align-items: center;
 gap: 11px;
 padding: 9px 12px;
 border-radius: 12px;
 font-size: 0.87rem;
 font-weight: 500;
 color: var(--text-dim);
 white-space: nowrap;
 transition: background 0.15s, color 0.15s;
}
.nav-menu-link:hover { background: var(--accent-wash); color: var(--accent-ink); }
.nav-menu-ico { width: 27px; height: 27px; flex: none; display: grid; place-items: center; }
.nav-menu-ico svg { width: 100%; height: 100%; }
.nav-menu-link > span:last-child {
 display: grid;
 gap: 2px;
}
.nav-menu-link strong {
 color: var(--text);
 font-size: .86rem;
 font-weight: 650;
}
.nav-menu-link small {
 color: var(--text-faint);
 font-size: .72rem;
 font-weight: 450;
}
.nav-menu-all {
 grid-column: 1 / -1;
 margin-top: 7px;
 padding: 10px 12px 4px;
 border-top: 1px solid var(--border);
 color: var(--accent);
 font-size: 0.82rem;
 font-weight: 600;
}
.nav-menu-all:hover { color: var(--accent-ink); }
@media (max-width: 920px) {
 .nav-menu { display: none; }
 .nav .chev { display: none; }
}

.header-search {
 flex: 1;
 max-width: 420px;
 margin-left: auto;
 display: flex;
 align-items: center;
 gap: 10px;
 background: var(--surface);
 border: 1px solid var(--border);
 border-radius: 999px;
 padding: 9px 16px;
 color: var(--text-faint);
 box-shadow: var(--shadow-xs);
 transition: border-color 0.2s, box-shadow 0.2s;
}
.header-search:focus-within { border-color: var(--accent); box-shadow: 0 0 0 4px rgba(120, 120, 128, 0.14); }
.header-search input {
 flex: 1;
 background: none;
 border: none;
 outline: none;
 color: var(--text);
 font-size: 0.92rem;
}
.header-search input::placeholder { color: var(--text-faint); }

.header-actions { display: flex; align-items: center; gap: 8px; }
.header-search svg, .icon-btn svg { display: block; flex-shrink: 0; }

/* Bouton hamburger : masqué sur desktop, affiché quand la nav passe en menu.
   (.header .menu-btn pour passer devant .icon-btn dans la cascade) */
.header .menu-btn { display: none; }

/* Menu mobile (tiroir latéral gauche) */
.mobile-menu {
 position: fixed; inset: 0 auto 0 0; width: min(330px, 86vw);
 z-index: 350; background: var(--surface); border-right: 1px solid var(--border);
 box-shadow: var(--shadow-lg);
 display: flex; flex-direction: column; overflow-y: auto;
 transform: translateX(-100%); visibility: hidden;
 transition: transform 0.28s cubic-bezier(0.4, 0, 0.2, 1), visibility 0.28s;
}
.mobile-menu.open { transform: none; visibility: visible; }
.mobile-menu-head {
 position: sticky; top: 0; z-index: 1; background: var(--surface);
 display: flex; align-items: center; justify-content: space-between;
 padding: 16px 18px; border-bottom: 1px solid var(--border);
}
.mobile-menu-body { padding: 14px 14px 32px; display: flex; flex-direction: column; gap: 2px; }
.mm-link { padding: 12px; border-radius: 12px; font-weight: 600; font-size: 1rem; color: var(--text); }
.mm-link:hover, .mm-link:active { background: var(--surface-2); }
.mm-section { margin: 16px 12px 6px; font-size: 0.72rem; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; color: var(--text-faint); }
.mm-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 4px; }
.mm-cat { display: flex; align-items: center; gap: 8px; padding: 10px; border-radius: 10px; font-size: 0.86rem; color: var(--text-dim); }
.mm-cat:hover, .mm-cat:active { background: var(--accent-wash); color: var(--accent-ink); }
.mm-ico { width: 22px; height: 22px; flex: none; display: grid; place-items: center; }
.mm-ico svg { width: 100%; height: 100%; }
.mm-all { padding: 10px 12px; font-weight: 600; color: var(--accent); font-size: 0.9rem; }
.mm-foot { margin-top: 18px; padding-top: 14px; border-top: 1px solid var(--border); }
body.menu-open { overflow: hidden; }
.icon-btn {
 position: relative;
 display: flex;
 align-items: center;
 gap: 8px;
 background: var(--surface);
 border: 1px solid var(--border);
 border-radius: 999px;
 color: var(--text-dim);
 padding: 9px 14px;
 font-size: 0.88rem;
 font-weight: 500;
 box-shadow: var(--shadow-xs);
 transition: border-color 0.2s, color 0.2s, transform 0.15s, box-shadow 0.2s;
}
.icon-btn:hover { color: var(--accent-ink); border-color: var(--border-strong); transform: translateY(-1px); box-shadow: var(--shadow-sm); }
.cart-count {
 position: absolute;
 top: -6px;
 right: -6px;
 min-width: 20px;
 height: 20px;
 display: grid;
 place-items: center;
 background: var(--gradient);
 color: var(--on-primary);
 border-radius: 999px;
 font-size: 0.72rem;
 font-weight: 700;
 padding: 0 5px;
 box-shadow: var(--shadow-accent);
 border: 2px solid var(--surface);
}

/* ─── Layout ─── */
.app { max-width: 1280px; margin: 0 auto; padding: 32px 28px 80px; min-height: 60vh; }
.section { margin-top: 64px; }
.section-head { display: flex; align-items: baseline; justify-content: space-between; margin-bottom: 22px; }
.section-head h2 { font-size: 1.7rem; }
.section-head a { color: var(--accent); font-size: 0.9rem; font-weight: 600; transition: color 0.15s; }
.section-head a:hover { color: var(--accent-ink); }

/* ─── Hero ─── */
.hero {
 position: relative;
 display: grid;
 grid-template-columns: 1.1fr 0.9fr;
 align-items: center;
 gap: 40px;
 padding: 68px 56px;
 border-radius: 32px;
 background:
  radial-gradient(ellipse 70% 90% at 82% 18%, var(--site-glow-a), transparent 60%),
  radial-gradient(ellipse 60% 80% at 6% 88%, var(--site-glow-b), transparent 60%),
  var(--hero-base);
 border: 1px solid var(--border);
 box-shadow: var(--shadow);
 overflow: hidden;
}
.hero::after {
 content: "";
 position: absolute;
 inset: 0;
 background-image: linear-gradient(rgba(79, 70, 229, 0.045) 1px, transparent 1px),
  linear-gradient(90deg, rgba(79, 70, 229, 0.045) 1px, transparent 1px);
 background-size: 46px 46px;
 mask-image: radial-gradient(ellipse 75% 75% at 50% 45%, black, transparent 75%);
 -webkit-mask-image: radial-gradient(ellipse 75% 75% at 50% 45%, black, transparent 75%);
 pointer-events: none;
}
.hero > * { position: relative; z-index: 1; }
.hero-kicker {
 display: inline-flex;
 align-items: center;
 gap: 8px;
 font-size: 0.78rem;
 font-weight: 600;
 letter-spacing: 0.06em;
 text-transform: uppercase;
 color: var(--accent-ink);
 background: var(--accent-wash);
 border: 1px solid rgba(120, 120, 128, 0.30);
 padding: 7px 15px;
 border-radius: 999px;
 margin-bottom: 22px;
}
.hero-kicker svg { width: 14px; height: 14px; }
.hero h1 {
 font-size: clamp(2.3rem, 4.8vw, 3.6rem);
 line-height: 1.05;
 font-weight: 700;
 margin-bottom: 20px;
}
.hero h1 .grad { background: var(--gradient); -webkit-background-clip: text; background-clip: text; color: transparent; }
.hero p { color: var(--text-dim); font-size: 1.08rem; line-height: 1.7; max-width: 480px; margin-bottom: 30px; }
.hero-cta { display: flex; gap: 14px; flex-wrap: wrap; }
.hero-art { position: relative; z-index: 1; display: grid; place-items: center; }
.hero-art svg { width: 100%; max-width: 380px; filter: drop-shadow(0 30px 50px rgba(120, 120, 128, 0.30)); animation: float 6s ease-in-out infinite; }
@keyframes float { 0%, 100% { transform: translateY(0) rotate(-2deg); } 50% { transform: translateY(-16px) rotate(2deg); } }

.hero-stats { display: flex; gap: 40px; margin-top: 40px; }
.hero-stat strong { display: block; font-family: var(--font-display); font-size: 1.6rem; font-weight: 700; }
.hero-stat span { color: var(--text-faint); font-size: 0.82rem; }

/* ─── Boutons ─── */
.btn {
 display: inline-flex;
 align-items: center;
 justify-content: center;
 gap: 8px;
 border: none;
 border-radius: 999px;
 padding: 13px 26px;
 font-size: 0.95rem;
 font-weight: 600;
 transition: transform 0.15s, box-shadow 0.25s, background 0.2s, opacity 0.2s, color 0.2s, border-color 0.2s;
}
.btn:active { transform: scale(0.97); }
.btn-primary { background: var(--gradient); color: var(--on-primary); box-shadow: var(--shadow-accent); }
.btn-primary:hover { transform: translateY(-2px); box-shadow: 0 24px 50px -16px rgba(0, 0, 0, 0.28); }
.btn-ghost { background: var(--surface); color: var(--text); border: 1px solid var(--border-strong); box-shadow: var(--shadow-xs); }
.btn-ghost:hover { border-color: var(--accent); color: var(--accent-ink); box-shadow: var(--shadow-sm); }
.btn-sm { padding: 9px 18px; font-size: 0.86rem; }
.btn:disabled { opacity: 0.5; cursor: not-allowed; transform: none; box-shadow: none; }
.btn-block { width: 100%; }

/* ─── Catégories ─── */
.cat-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 16px; }
.cat-card {
 display: flex;
 flex-direction: column;
 gap: 12px;
 padding: 22px;
 background: var(--surface);
 border: 1px solid var(--border);
 border-radius: var(--radius);
 box-shadow: var(--shadow-xs);
 transition: transform 0.2s, border-color 0.2s, box-shadow 0.25s;
}
.cat-card:hover { transform: translateY(-4px); border-color: rgba(120, 120, 128, 0.34); box-shadow: var(--shadow); }
.cat-card .cat-icon { width: 46px; height: 46px; display: grid; place-items: center; border-radius: 14px; background: var(--accent-wash); color: var(--accent); }
.cat-card h3 { font-size: 1rem; }
.cat-card span { color: var(--text-faint); font-size: 0.82rem; }

/* ─── Grille produits ─── */
.product-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 18px; }
.product-card {
 position: relative;
 display: flex;
 flex-direction: column;
 background: var(--surface);
 border: 1px solid var(--border);
 border-radius: var(--radius);
 overflow: hidden;
 box-shadow: var(--shadow-xs);
 transition: transform 0.22s, border-color 0.22s, box-shadow 0.28s;
 cursor: pointer;
}
.product-card:hover { transform: translateY(-6px); border-color: rgba(120, 120, 128, 0.34); box-shadow: var(--shadow); }

.product-visual {
 position: relative;
 aspect-ratio: 4 / 3;
 display: grid;
 place-items: center;
 overflow: hidden;
 background:
  radial-gradient(ellipse 90% 80% at 50% 115%, var(--tint, rgba(120, 120, 128, 0.10)), transparent 70%),
  linear-gradient(180deg, #ffffff, #f1f1f2);
 border-bottom: 1px solid var(--border);
}
.product-visual svg { width: 58%; height: auto; transition: transform 0.3s; }
.product-card:hover .product-visual svg { transform: scale(1.08) rotate(-1.5deg); }

/* Photo produit : recouvre le visuel SVG ; si l'image manque,
  onerror la retire et le SVG en dessous reste visible. */
.pimg {
 position: absolute;
 inset: 0;
 z-index: 1;
 width: 100%;
 height: 100%;
 object-fit: contain;
 background: #ffffff;
 padding: 14px;
 transition: transform 0.3s;
}
.product-card:hover .pimg { transform: scale(1.05); }
.badge { z-index: 2; }
.cart-item-visual, .picker-visual { position: relative; overflow: hidden; }
.cart-item-visual .pimg { padding: 4px; border-radius: 11px; }
.picker-visual .pimg { padding: 3px; border-radius: 8px; }
.product-page-visual { overflow: hidden; }
.product-page-visual .pimg { padding: 36px; animation: none; }

.badge {
 position: absolute;
 top: 12px;
 left: 12px;
 padding: 5px 12px;
 border-radius: 999px;
 font-size: 0.7rem;
 font-weight: 700;
 letter-spacing: 0.02em;
 background: rgba(255, 255, 255, 0.92);
 backdrop-filter: blur(6px);
 border: 1px solid var(--border);
 box-shadow: var(--shadow-xs);
 color: var(--text-dim);
}
.badge.promo { color: var(--text); border-color: var(--border-strong); }
.badge.top { color: var(--text-dim); border-color: var(--border-strong); }
.badge.flagship { color: var(--accent-ink); border-color: rgba(120, 120, 128, 0.34); }
.badge.new { color: var(--text-dim); border-color: var(--border-strong); }

.product-info { display: flex; flex-direction: column; gap: 7px; padding: 16px 18px 18px; flex: 1; }
.product-brand { font-size: 0.74rem; font-weight: 700; letter-spacing: 0.07em; text-transform: uppercase; color: var(--accent); }
.product-name { font-size: 0.98rem; font-weight: 600; line-height: 1.35; color: var(--text); }
.product-rating { display: flex; align-items: center; gap: 6px; font-size: 0.8rem; color: var(--text-dim); }
.stars { color: var(--amber); letter-spacing: 1.5px; font-size: 0.8rem; }
.product-bottom { margin-top: auto; display: flex; align-items: flex-end; justify-content: space-between; gap: 10px; padding-top: 8px; }
.price { font-family: var(--font-display); font-size: 1.3rem; font-weight: 700; color: var(--text); }
.price-old { display: block; color: var(--text-faint); font-size: 0.8rem; text-decoration: line-through; font-weight: 400; }
.delivery-line { display: inline-flex; align-items: center; gap: 6px; margin-top: 5px; font-size: 0.78rem; color: var(--text-dim); line-height: 1.25; }
.delivery-line strong { color: var(--green); font-weight: 650; }
.delivery-line svg { flex: none; color: var(--green); }
.stock-dot { display: inline-flex; align-items: center; gap: 5px; width: fit-content; margin-top: 2px; padding: 3px 8px; border-radius: 999px; border: 1px solid rgba(34, 197, 94, 0.28); background: rgba(34, 197, 94, 0.12); color: var(--green); font-size: 0.7rem; font-weight: 750; line-height: 1.15; vertical-align: top; }
.stock-dot.low { border-color: rgba(245, 158, 11, 0.34); background: rgba(245, 158, 11, 0.13); color: var(--amber); }
.stock-dot.out { border-color: rgba(220, 38, 38, 0.30); background: rgba(220, 38, 38, 0.12); color: var(--red); }

.add-btn {
 display: grid;
 place-items: center;
 width: 42px;
 height: 42px;
 border-radius: 14px;
 border: none;
 background: var(--gradient);
 color: var(--on-primary);
 box-shadow: var(--shadow-accent);
 transition: transform 0.15s, box-shadow 0.2s;
}
.add-btn:hover { transform: scale(1.1); box-shadow: 0 12px 26px -8px rgba(0, 0, 0, 0.28); }
.add-btn:disabled { background: var(--surface-2); color: var(--text-faint); cursor: not-allowed; transform: none; box-shadow: none; }

/* ─── Bannière promo ─── */
.promo-banner {
 display: flex;
 align-items: center;
 justify-content: space-between;
 gap: 24px;
 padding: 38px 44px;
 border-radius: var(--radius);
 color: #fff;
 background: var(--gradient);
 box-shadow: var(--shadow-accent);
 position: relative;
 overflow: hidden;
}
.promo-banner::after {
 content: "";
 position: absolute;
 inset: 0;
 background:
  radial-gradient(ellipse 50% 120% at 90% 0%, rgba(255,255,255,0.22), transparent 60%),
  radial-gradient(ellipse 40% 120% at 10% 100%, rgba(255,255,255,0.12), transparent 60%);
 pointer-events: none;
}
.promo-banner > * { position: relative; z-index: 1; }
.promo-banner h3 { font-size: 1.6rem; margin-bottom: 6px; color: #fff; display: flex; align-items: center; gap: 10px; }
.promo-banner p { color: rgba(255, 255, 255, 0.88); }
.promo-banner code { background: rgba(255, 255, 255, 0.22); color: #fff; padding: 2px 10px; border-radius: 8px; font-weight: 700; }
.promo-banner .btn-primary { background: #fff; color: var(--accent-ink); box-shadow: 0 14px 30px -12px rgba(0,0,0,0.35); }
.promo-banner .btn-primary:hover { box-shadow: 0 20px 40px -14px rgba(0,0,0,0.45); }

/* ─── Atouts ─── */
.perks { display: grid; grid-template-columns: repeat(4, 1fr); gap: 16px; }
.perk { display: flex; gap: 14px; align-items: flex-start; padding: 22px; background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius); box-shadow: var(--shadow-xs); transition: transform 0.2s, box-shadow 0.25s; text-decoration: none; color: inherit; }
.perk:hover { transform: translateY(-3px); box-shadow: var(--shadow-sm); }
.perk-icon { flex-shrink: 0; width: 44px; height: 44px; display: grid; place-items: center; border-radius: 13px; background: var(--accent-wash); color: var(--accent); }
.perk-icon svg { width: 22px; height: 22px; }
.perk h4 { font-size: 0.95rem; margin-bottom: 4px; }
.perk p { font-size: 0.82rem; color: var(--text-dim); line-height: 1.55; }

/* ─── Page catalogue ─── */
.catalog-layout { display: grid; grid-template-columns: 240px 1fr; gap: 28px; align-items: start; touch-action: pan-y; }
.catalog-results {
 position: sticky;
 top: calc(var(--announce-h) + var(--fixed-header-h) + 14px);
 min-width: 0;
 height: calc(100vh - var(--announce-h) - var(--fixed-header-h) - 28px);
 overflow-y: auto;
 overflow-x: hidden;
 padding: 0 10px 28px;
 margin-inline: -10px;
 scrollbar-gutter: stable;
 overscroll-behavior-y: contain;
}
.filters { position: relative; display: flex; flex-direction: column; gap: 22px; padding: 22px; background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius); box-shadow: var(--shadow-xs); }
.filters h3 { font-size: 1.05rem; }
.filter-group { display: flex; flex-direction: column; gap: 8px; }
.filter-group > span { font-size: 0.76rem; font-weight: 700; letter-spacing: 0.07em; text-transform: uppercase; color: var(--text-faint); }
.filter-option { display: flex; align-items: center; gap: 9px; font-size: 0.9rem; color: var(--text-dim); cursor: pointer; padding: 3px 0; transition: color 0.15s; }
.filter-option:hover { color: var(--text); }
.filter-option input { accent-color: var(--accent); width: 16px; height: 16px; }
.price-inputs { display: flex; gap: 8px; align-items: center; }
.price-inputs input {
 width: 100%;
 background: var(--surface-2);
 border: 1px solid var(--border);
 border-radius: 10px;
 color: var(--text);
 padding: 9px 11px;
 font-size: 0.86rem;
 outline: none;
 transition: border-color 0.15s, box-shadow 0.15s;
}
.price-inputs input:focus { border-color: var(--accent); box-shadow: 0 0 0 3px rgba(120, 120, 128, 0.12); }

.catalog-toolbar {
 position: sticky;
 top: 0;
 z-index: 18;
 display: flex;
 align-items: center;
 justify-content: space-between;
 gap: 16px;
 margin: -10px -10px 18px;
 padding: 10px;
 border-bottom: 1px solid var(--border);
 background: color-mix(in srgb, var(--bg) 92%, transparent);
 backdrop-filter: blur(14px);
}
.catalog-toolbar h1 { font-size: 1.6rem; }
.catalog-toolbar .count { color: var(--text-faint); font-size: 0.88rem; margin-left: 10px; font-family: var(--font-body); font-weight: 400; }
.select {
 background: var(--surface);
 border: 1px solid var(--border-strong);
 border-radius: 999px;
 color: var(--text);
 padding: 9px 16px;
 font-size: 0.88rem;
 outline: none;
 cursor: pointer;
 box-shadow: var(--shadow-xs);
 transition: border-color 0.15s;
}
.select:hover { border-color: var(--accent); }

.sort-control {
 position: relative;
 z-index: 20;
 min-width: 210px;
}
.sort-trigger {
 width: 100%;
 min-height: 52px;
 display: grid;
 grid-template-columns: 1fr auto;
 grid-template-rows: auto auto;
 column-gap: 18px;
 align-items: center;
 padding: 8px 14px 9px 16px;
 border: 1px solid var(--border-strong);
 border-radius: 14px;
 background: color-mix(in srgb, var(--surface) 94%, var(--accent) 6%);
 color: var(--text);
 text-align: left;
 cursor: pointer;
 box-shadow: var(--shadow-xs);
 transition: border-color .16s ease, box-shadow .16s ease, transform .16s ease;
}
.sort-trigger:hover {
 border-color: color-mix(in srgb, var(--accent) 65%, var(--border-strong));
}
.sort-trigger:focus-visible {
 outline: none;
 border-color: var(--accent);
 box-shadow: 0 0 0 3px color-mix(in srgb, var(--accent) 22%, transparent);
}
.sort-caption {
 grid-column: 1;
 color: var(--text-faint);
 font-size: .67rem;
 font-weight: 700;
 letter-spacing: .09em;
 line-height: 1.1;
 text-transform: uppercase;
}
.sort-trigger strong {
 grid-column: 1;
 font-size: .9rem;
 font-weight: 650;
 line-height: 1.2;
}
.sort-trigger > svg {
 grid-column: 2;
 grid-row: 1 / 3;
 width: 17px;
 height: 17px;
 fill: none;
 stroke: var(--accent);
 stroke-width: 1.8;
 stroke-linecap: round;
 stroke-linejoin: round;
 transition: transform .18s ease;
}
.sort-trigger[aria-expanded="true"] > svg { transform: rotate(180deg); }
.sort-menu {
 position: absolute;
 top: calc(100% + 8px);
 right: 0;
 width: 100%;
 overflow-x: hidden;
 overflow-y: auto;
 max-height: min(320px, 55dvh);
 padding: 6px;
 border: 1px solid var(--border-strong);
 border-radius: 14px;
 background: var(--surface);
 box-shadow: var(--shadow-lg);
}
.sort-menu[hidden] { display: none; }
.sort-menu button {
 width: 100%;
 min-height: 40px;
 display: flex;
 align-items: center;
 justify-content: space-between;
 gap: 12px;
 padding: 8px 10px;
 border: 0;
 border-radius: 9px;
 background: transparent;
 color: var(--text-dim);
 font: inherit;
 font-size: .86rem;
 text-align: left;
 cursor: pointer;
}
.sort-menu button:hover,
.sort-menu button:focus-visible {
 outline: none;
 background: var(--surface-2);
 color: var(--text);
}
.sort-menu button[aria-selected="true"] {
 background: color-mix(in srgb, var(--accent) 14%, transparent);
 color: var(--accent);
 font-weight: 700;
}
.sort-menu button svg {
 width: 16px;
 height: 16px;
 fill: none;
 stroke: currentColor;
 stroke-width: 2;
 stroke-linecap: round;
 stroke-linejoin: round;
}

.empty-state { text-align: center; padding: 80px 20px; color: var(--text-dim); }
.empty-state .big { font-size: 2.6rem; margin-bottom: 12px; }

/* ─── Page produit ─── */
.breadcrumb { display: flex; gap: 8px; font-size: 0.85rem; color: var(--text-faint); margin-bottom: 24px; flex-wrap: wrap; }
.breadcrumb a:hover { color: var(--accent); }

.product-page { display: grid; grid-template-columns: 1fr 1fr; gap: 44px; align-items: start; }
.product-gallery { position: sticky; top: 110px; display: flex; flex-direction: column; gap: 12px; }
.pp-thumbs { display: flex; gap: 10px; flex-wrap: wrap; }
.pp-thumb {
 width: 66px; height: 66px; padding: 4px; flex: none;
 background: #ffffff; border: 1px solid var(--border-strong); border-radius: 14px;
 cursor: pointer; display: grid; place-items: center; overflow: hidden;
 box-shadow: var(--shadow-xs);
 transition: border-color 0.15s, box-shadow 0.15s, transform 0.15s;
}
.pp-thumb img { width: 100%; height: 100%; object-fit: contain; }
.pp-thumb:hover { border-color: var(--accent); transform: translateY(-2px); }
.pp-thumb.active { border-color: var(--accent); box-shadow: 0 0 0 3px rgba(120, 120, 128, 0.26); }
.product-page-visual {
 position: relative;  /* ancre l'image absolue .pimg DANS le carré (sinon elle déborde sur la galerie et masque les miniatures) */
 aspect-ratio: 1;
 display: grid;
 place-items: center;
 border-radius: 26px;
 background:
  radial-gradient(ellipse 90% 80% at 50% 115%, var(--tint, rgba(120, 120, 128, 0.12)), transparent 70%),
  linear-gradient(180deg, #ffffff, #f1f1f2);
 border: 1px solid var(--border);
 box-shadow: var(--shadow-sm);
}
.product-page-visual svg { width: 62%; filter: drop-shadow(0 22px 44px rgba(15, 23, 42, 0.18)); animation: float 7s ease-in-out infinite; }

.product-page-info h1 { font-size: 2rem; line-height: 1.18; margin: 6px 0 14px; }
.product-page-info .product-brand { font-size: 0.85rem; }
.product-page-info .desc { color: var(--text-dim); line-height: 1.7; margin: 18px 0 24px; }
.price-row { display: flex; align-items: baseline; gap: 14px; margin: 18px 0; }
.price-row .price { font-size: 2.3rem; }
.price-row .price-old { font-size: 1.05rem; display: inline; }
.discount-chip { background: rgba(239, 68, 68, 0.12); color: #be123c; font-size: 0.8rem; font-weight: 700; padding: 5px 12px; border-radius: 999px; }

.buy-row { display: flex; gap: 12px; align-items: stretch; margin: 22px 0; }
.qty-picker { display: flex; align-items: center; border: 1px solid var(--border-strong); border-radius: 999px; overflow: hidden; background: var(--surface); }
.qty-picker button { width: 42px; height: 100%; min-height: 46px; background: none; border: none; color: var(--text); font-size: 1.1rem; transition: background 0.15s, color 0.15s; }
.qty-picker button:hover { background: var(--accent-wash); color: var(--accent-ink); }
.qty-picker span { min-width: 38px; text-align: center; font-weight: 600; }

.specs-table { width: 100%; border-collapse: collapse; margin-top: 14px; }
.specs-table td { padding: 12px 14px; font-size: 0.9rem; border-bottom: 1px solid var(--border); }
.specs-table td:first-child { color: var(--text-faint); width: 42%; }
.specs-table tr:last-child td { border-bottom: none; }
.specs-card { background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius); padding: 10px 6px; margin-top: 22px; box-shadow: var(--shadow-xs); }

.reviews { margin-top: 56px; }
.review-card { background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius); padding: 20px 22px; margin-bottom: 12px; box-shadow: var(--shadow-xs); }
.review-head { display: flex; justify-content: space-between; align-items: center; margin-bottom: 8px; }
.review-head strong { font-size: 0.94rem; }
.review-card p { color: var(--text-dim); font-size: 0.92rem; line-height: 1.6; }
.review-form { background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius); padding: 22px; display: flex; flex-direction: column; gap: 14px; margin-top: 20px; box-shadow: var(--shadow-xs); }
.review-form textarea {
 background: var(--surface-2); border: 1px solid var(--border); border-radius: var(--radius-sm);
 color: var(--text); padding: 12px 14px; font-size: 0.92rem; min-height: 90px; resize: vertical; outline: none;
 transition: border-color 0.15s, box-shadow 0.15s;
}
.review-form textarea:focus { border-color: var(--accent); box-shadow: 0 0 0 3px rgba(120, 120, 128, 0.12); }
.star-picker { display: flex; gap: 4px; font-size: 1.5rem; }
.star-picker button { width: 44px; height: 44px; display: inline-grid; place-items: center; background: none; border: none; color: var(--text-faint); transition: color 0.12s, transform 0.12s; }
.star-picker button.on { color: var(--amber); }
.star-picker button:hover { transform: scale(1.2); }

/* ─── Panier latéral ─── */
.drawer-overlay, .modal-overlay {
 position: fixed; inset: 0; z-index: 340;
 background: rgba(15, 23, 42, 0.45);
 backdrop-filter: blur(4px);
 animation: fadeIn 0.2s;
}
@keyframes fadeIn { from { opacity: 0; } to { opacity: 1; } }

.cart-drawer {
 position: fixed; top: 0; right: 0; bottom: 0; z-index: 350;
 width: min(400px, 100vw);
 display: flex; flex-direction: column;
 overflow-y: auto;
 overscroll-behavior: contain;
 background: var(--surface);
 border-left: 1px solid var(--border);
 transform: translateX(100%);
 transition: transform 0.32s cubic-bezier(0.2, 0.9, 0.3, 1);
 box-shadow: -28px 0 70px -20px rgba(15, 23, 42, 0.3);
}
.cart-drawer.open { transform: translateX(0); }
.cart-drawer-head { position: sticky; top: 0; z-index: 2; flex: none; display: flex; justify-content: space-between; align-items: center; padding: 16px 20px; border-bottom: 1px solid var(--border); background: var(--surface); }
.cart-drawer-body { flex: 1 0 auto; overflow: visible; padding: 12px 20px; }
.cart-drawer-foot { flex: none; padding: 16px 20px 20px; border-top: 1px solid var(--border); display: flex; flex-direction: column; gap: 10px; background: var(--surface); }
body.cart-open { overflow: hidden; }

.cart-item { display: flex; gap: 12px; padding: 10px 0; border-bottom: 1px solid var(--border); }
.cart-item-visual {
 flex-shrink: 0; width: 62px; height: 62px; display: grid; place-items: center;
 border-radius: 12px; background: #ffffff; border: 1px solid var(--border);
}
.cart-item-visual svg { width: 70%; }
.cart-item-info { flex: 1; min-width: 0; }
.cart-item-info h4 { font-size: 0.88rem; font-weight: 600; line-height: 1.3; margin-bottom: 4px; }
.cart-item-info .price { font-size: 0.95rem; }
.cart-item-qty { display: flex; align-items: center; gap: 10px; margin-top: 8px; }
.cart-item-qty button {
 width: 26px; height: 26px; border-radius: 8px; border: 1px solid var(--border-strong);
 background: var(--surface); color: var(--text); font-size: 0.95rem; line-height: 1;
 transition: border-color 0.15s, color 0.15s;
}
.cart-item-qty button:hover { border-color: var(--accent); color: var(--accent); }
.cart-item-remove {
 display: grid; place-items: center; width: 36px; height: 36px; margin-top: 6px; padding: 0;
 background: none; border: 1px solid transparent; border-radius: 8px; color: var(--text-faint);
 transition: color 0.15s, border-color 0.15s, background 0.15s;
}
.cart-item-remove svg {
 width: 18px; height: 18px; fill: none; stroke: currentColor;
 stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round;
}
.cart-item-remove:hover { color: var(--red); border-color: color-mix(in srgb, var(--red) 45%, transparent); background: color-mix(in srgb, var(--red) 8%, transparent); }
.cart-item-remove:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }

.cart-totals { display: flex; flex-direction: column; gap: 7px; font-size: 0.92rem; }
.cart-totals .row { display: flex; justify-content: space-between; color: var(--text-dim); }
.cart-totals .row.total { color: var(--text); font-weight: 700; font-size: 1.15rem; padding-top: 8px; border-top: 1px solid var(--border); margin-top: 4px; }
.cart-totals .row .green { color: var(--green); }

.cart-trust {
 display: grid;
 grid-template-columns: 1fr 1fr;
 gap: 8px;
 padding: 12px;
 background: var(--surface-2);
 border: 1px solid var(--border);
 border-radius: 14px;
}
.cart-trust span {
 display: flex;
 align-items: center;
 gap: 7px;
 min-width: 0;
 color: var(--text-dim);
 font-size: 0.78rem;
 font-weight: 600;
}
.cart-trust svg {
 width: 16px;
 height: 16px;
 flex: none;
 fill: none;
 stroke: currentColor;
 stroke-width: 2;
 stroke-linecap: round;
 stroke-linejoin: round;
 color: var(--accent);
}
.shipping-meter {
 position: relative;
 overflow: hidden;
 padding: 10px 12px;
 border-radius: 12px;
 background: var(--accent-wash);
 color: var(--accent-ink);
 font-size: 0.8rem;
 font-weight: 700;
}
.shipping-meter span { position: relative; z-index: 1; }
.shipping-meter b {
 position: absolute;
 inset: 0 auto 0 0;
 display: block;
 background: rgba(0, 102, 204, 0.14);
}

.promo-row { display: flex; gap: 8px; }
.promo-row input {
 flex: 1; background: var(--surface); border: 1px solid var(--border-strong); border-radius: 999px;
 color: var(--text); padding: 10px 16px; font-size: 0.86rem; outline: none; text-transform: uppercase;
 transition: border-color 0.15s, box-shadow 0.15s;
}
.promo-row input:focus { border-color: var(--accent); box-shadow: 0 0 0 3px rgba(120, 120, 128, 0.12); }

/* ─── Modales ─── */
.modal-overlay { display: grid; place-items: center; padding: 20px; }
body.picker-open { overflow: hidden; }
body.picker-open .compare-bar { display: none; }
.modal {
 position: relative;
 width: min(420px, 100%);
 background: var(--surface);
 border: 1px solid var(--border);
 border-radius: 22px;
 padding: 30px;
 box-shadow: var(--shadow-lg);
 animation: popIn 0.25s cubic-bezier(0.2, 0.9, 0.3, 1.2);
}
@keyframes popIn { from { opacity: 0; transform: translateY(14px) scale(0.97); } to { opacity: 1; transform: none; } }
.modal-close { position: absolute; top: 16px; right: 16px; background: none; border: none; color: var(--text-faint); font-size: 1rem; }
.modal-close:hover { color: var(--text); }

.auth-tabs { display: flex; gap: 6px; background: var(--surface-2); padding: 5px; border-radius: 999px; margin-bottom: 22px; }
.auth-tab { flex: 1; padding: 9px; border: none; border-radius: 999px; background: none; color: var(--text-dim); font-weight: 600; font-size: 0.9rem; transition: background 0.2s, color 0.2s, box-shadow 0.2s; }
.auth-tab.active { background: var(--gradient); color: var(--on-primary); box-shadow: var(--shadow-accent); }

.auth-form { display: flex; flex-direction: column; gap: 14px; }
.auth-form label { display: flex; flex-direction: column; gap: 6px; font-size: 0.84rem; font-weight: 600; color: var(--text-dim); }
.auth-form input, .auth-form select, .auth-form textarea,
.form-grid input, .form-grid select, .form-grid textarea {
 width: 100%;
 background: var(--surface-2); border: 1px solid var(--border); border-radius: var(--radius-sm);
 color: var(--text); padding: 12px 14px; font-size: 0.94rem; outline: none; transition: border-color 0.2s, box-shadow 0.2s;
}
.auth-form input:focus, .auth-form select:focus, .auth-form textarea:focus,
.form-grid input:focus, .form-grid select:focus, .form-grid textarea:focus { border-color: var(--accent); box-shadow: 0 0 0 3px rgba(120, 120, 128, 0.14); }
/* Select : on retire l'apparence native et on dessine une flèche cohérente. */
.auth-form select, .form-grid select {
 appearance: none; -webkit-appearance: none; cursor: pointer;
 padding-right: 38px;
 background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%234a5568' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E");
 background-repeat: no-repeat; background-position: right 14px center;
}
.auth-form select option, .form-grid select option { background: var(--surface); color: var(--text); }
.auth-form textarea, .form-grid textarea { resize: vertical; min-height: 64px; line-height: 1.5; }
.auth-hint { font-size: 0.8rem; color: var(--text-faint); text-align: center; }
.auth-hint a { color: var(--accent); }
.auth-hint a:hover { color: var(--accent-ink); text-decoration: underline; }
.auth-hint code { color: var(--accent); }

/* Champ mot de passe avec bouton « œil » afficher/masquer */
.pw-field { position: relative; display: block; }
.pw-field input { padding-right: 46px; }
.pw-toggle {
 position: absolute; top: 50%; right: 6px; transform: translateY(-50%);
 display: grid; place-items: center; width: 34px; height: 34px;
 background: none; border: none; border-radius: 9px;
 color: var(--text-faint); cursor: pointer; transition: color 0.2s, background 0.2s;
}
.pw-toggle:hover { color: var(--text); background: var(--surface); }
.pw-toggle:focus-visible { outline: 2px solid var(--accent); outline-offset: 1px; }

/* En-tête de la modale connexion/inscription */
.auth-head { text-align: center; margin-bottom: 18px; }
.auth-brand {
 font-family: "Bricolage Grotesque", sans-serif;
 font-size: 1.5rem; font-weight: 800; letter-spacing: -0.01em; color: var(--text);
}
.auth-brand em { font-style: normal; color: var(--accent); }
.auth-sub { margin-top: 4px; font-size: 0.85rem; color: var(--text-faint); }

/* ─── Checkout ─── */
.checkout-layout { display: grid; grid-template-columns: 1.2fr 0.8fr; gap: 28px; align-items: start; }
.panel { background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius); padding: 26px; box-shadow: var(--shadow-xs); }
.panel h2 { font-size: 1.25rem; margin-bottom: 18px; }
.form-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
.form-grid label { display: flex; flex-direction: column; gap: 6px; font-size: 0.84rem; font-weight: 600; color: var(--text-dim); }
.form-grid label.full { grid-column: 1 / -1; }
.summary-line { display: flex; justify-content: space-between; padding: 9px 0; font-size: 0.9rem; color: var(--text-dim); border-bottom: 1px solid var(--border); }
.summary-line:last-of-type { border: none; color: var(--text); font-weight: 700; font-size: 1.1rem; }

/* Checkout façon boutique de jeu : récap visuel à gauche, commande à droite. */
.checkout-wot { grid-template-columns: 1.05fr 0.95fr; }
.checkout-items { margin-bottom: 10px; }
.checkout-item { display: flex; align-items: center; gap: 14px; padding: 11px 0; border-bottom: 1px solid var(--border); }
.checkout-item .cart-item-visual { width: 56px; height: 56px; border-radius: 12px; }
.checkout-item-info { flex: 1; min-width: 0; }
.checkout-item-info h4 { font-size: 0.9rem; font-weight: 600; line-height: 1.3; margin-bottom: 3px; }
.checkout-item-info span { font-size: 0.8rem; color: var(--text-dim); }
.checkout-item > .price { font-size: 0.95rem; flex-shrink: 0; }
.checkout-step {
  font-size: 0.78rem; font-weight: 800; letter-spacing: 0.09em; text-transform: uppercase;
  color: var(--text-dim); margin: 22px 0 12px;
}
.checkout-order h2 + .checkout-step { margin-top: 6px; }
.checkout-buy { margin-top: 16px; padding: 15px 20px; font-size: 1rem; }
/* Écran de paiement plein page, dans l'air du hero void : fond spatial sombre
   (toujours, quel que soit le thème), étoiles discrètes, orbites hairline,
   anneau fin qui tourne tant que la banque n'a pas répondu, et les validations
   réelles cochées en direct. */
.pay-overlay {
  position: fixed; inset: 0; z-index: 6000; color: #f4f4f5;
  background:
    radial-gradient(1.5px 1.5px at 14% 22%, rgba(255, 255, 255, 0.4) 50%, transparent 51%),
    radial-gradient(1px 1px at 78% 16%, rgba(255, 255, 255, 0.32) 50%, transparent 51%),
    radial-gradient(1.5px 1.5px at 88% 64%, rgba(255, 255, 255, 0.26) 50%, transparent 51%),
    radial-gradient(1px 1px at 28% 78%, rgba(255, 255, 255, 0.3) 50%, transparent 51%),
    radial-gradient(1px 1px at 62% 86%, rgba(255, 255, 255, 0.22) 50%, transparent 51%),
    radial-gradient(1.5px 1.5px at 44% 12%, rgba(255, 255, 255, 0.2) 50%, transparent 51%),
    radial-gradient(900px 500px at 50% 36%, rgba(140, 165, 185, 0.09), transparent 65%),
    #0a0c0e;
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: 12px; text-align: center; padding: 24px; overflow: hidden;
  animation: pay-overlay-in 0.35s ease;
}
@keyframes pay-overlay-in { from { opacity: 0; } }
.pay-overlay::before, .pay-overlay::after {
  content: ""; position: absolute; border: 1px solid rgba(255, 255, 255, 0.07);
  border-radius: 50%; pointer-events: none;
}
.pay-overlay::before { width: min(44vw, 460px); aspect-ratio: 1; top: 8%; right: 10%; }
.pay-overlay::after { width: min(30vw, 300px); aspect-ratio: 1; bottom: 6%; left: 7%; }
.pay-orb {
  width: 74px; height: 74px; border-radius: 50%;
  display: grid; place-items: center; margin: 12px 0 6px;
}
.pay-orb-ring {
  width: 74px; height: 74px; border-radius: 50%;
  border: 2px solid rgba(255, 255, 255, 0.14); border-top-color: #f4f4f5;
  animation: pay-spin 1.1s linear infinite;
}
@keyframes pay-spin { to { transform: rotate(360deg); } }
/* Couleurs thémées par défaut (page de confirmation sur fond clair)… */
.pay-orb.ok, .pay-orb.fail { border: 2px solid; animation: pay-settle 0.5s ease; }
.pay-orb.ok { border-color: var(--green); }
.pay-orb.fail { border-color: var(--red); }
.pay-orb.ok svg { stroke: var(--green); }
.pay-orb.fail svg { stroke: var(--red); }
/* …et variante sombre fixe sur l'écran de paiement. */
.pay-overlay .pay-orb.ok { border-color: #4cc98a; }
.pay-overlay .pay-orb.fail { border-color: #e08585; }
.pay-overlay .pay-orb.ok svg { stroke: #4cc98a; }
.pay-overlay .pay-orb.fail svg { stroke: #e08585; }
.pay-orb svg {
  width: 32px; height: 32px; fill: none; stroke-width: 2.2;
  stroke-linecap: round; stroke-linejoin: round;
}
.pay-orb svg path {
  stroke-dasharray: 30; stroke-dashoffset: 30;
  animation: pay-draw 0.5s ease 0.15s forwards;
}
@keyframes pay-settle { from { transform: scale(0.94); opacity: 0; } }
@keyframes pay-draw { to { stroke-dashoffset: 0; } }
.pay-overlay-label { font-size: 1.1rem; font-weight: 600; letter-spacing: -0.01em; color: #f4f4f5; }
.pay-overlay-sub { color: rgba(255, 255, 255, 0.42); font-size: 0.86rem; max-width: 440px; }
/* Canal d'état unique : chaque requête occupe la même ligne au-dessus de
   l'orbite, sort quand elle est validée, puis laisse entrer la suivante. */
.pay-stage-slot {
  min-height: 24px; display: grid; place-items: center; margin-bottom: 4px;
}
.pay-stage {
  grid-area: 1 / 1; display: inline-flex; align-items: center; gap: 10px;
  margin: 0; font-size: 0.88rem; font-weight: 600; letter-spacing: 0.01em;
  color: #f4f4f5; animation: pay-stage-in 0.35s cubic-bezier(.2,.8,.2,1) both;
}
.pay-stage-dot {
  width: 7px; height: 7px; border-radius: 50%; flex: none;
  background: currentColor;
}
.pay-stage.active .pay-stage-dot { animation: pay-pulse 1.1s ease infinite; }
.pay-stage.done { color: #4cc98a; }
.pay-stage.leaving { animation: pay-stage-out 0.22s ease forwards; }
.pay-stage.failed { color: #e08585; }
@keyframes pay-stage-in {
  from { opacity: 0; transform: translateY(8px); filter: blur(3px); }
}
@keyframes pay-stage-out {
  to { opacity: 0; transform: translateY(-8px); filter: blur(3px); }
}
@keyframes pay-pulse { 50% { opacity: 0.35; } }
@media (prefers-reduced-motion: reduce) {
  .pay-stage, .pay-stage.leaving, .pay-stage.active .pay-stage-dot, .pay-orb-ring {
    animation: none;
  }
}
.checkout-finelines { color: var(--text-faint); font-size: 0.75rem; line-height: 1.55; margin-top: 14px; }
.checkout-finelines a { color: var(--text-dim); font-weight: 600; text-decoration: underline; text-underline-offset: 2px; }
.checkout-recap .checkout-finelines { margin-top: 18px; }

/* ─── Pages de confiance ─── */
.content-page {
 max-width: 1120px;
 margin: 0 auto;
}
.content-hero {
 padding: 42px 0 22px;
 max-width: 850px;
}
.content-hero.compact { max-width: 720px; }
.eyebrow {
 display: inline-flex;
 margin-bottom: 12px;
 color: var(--accent);
 font-size: 0.78rem;
 font-weight: 800;
 text-transform: uppercase;
 letter-spacing: 0.08em;
}
.content-hero h1 {
 font-size: clamp(2rem, 5vw, 4rem);
 line-height: 1.02;
 letter-spacing: -0.04em;
}
.content-hero.compact h1 { font-size: clamp(2rem, 4vw, 3.2rem); }
.content-hero p {
 margin-top: 18px;
 color: var(--text-dim);
 font-size: 1.08rem;
 line-height: 1.6;
}
.story-grid, .legal-grid {
 display: grid;
 grid-template-columns: repeat(3, 1fr);
 gap: 16px;
 margin-top: 22px;
}
.legal-grid { grid-template-columns: repeat(2, 1fr); }
.story-grid article, .legal-grid article {
 background: var(--surface);
 border: 1px solid var(--border);
 border-radius: var(--radius);
 padding: 24px;
}
.story-grid h2, .legal-grid h2 {
 font-size: 1.05rem;
 margin-bottom: 10px;
}
.story-grid p, .legal-grid p {
 color: var(--text-dim);
 font-size: 0.95rem;
 line-height: 1.62;
}
.content-actions {
 display: flex;
 gap: 12px;
 flex-wrap: wrap;
 margin-top: 26px;
}

/* Page « Nous contacter » */
.contact-grid {
 display: grid;
 grid-template-columns: repeat(3, 1fr);
 gap: 16px;
 margin-top: 22px;
}
.contact-card {
 display: block;
 background: var(--surface);
 border: 1px solid var(--border);
 border-radius: var(--radius);
 padding: 26px 24px;
 transition: border-color 0.2s, transform 0.2s, box-shadow 0.2s;
}
a.contact-card:hover { border-color: var(--accent); transform: translateY(-3px); box-shadow: var(--shadow-lg); }
.contact-ico {
 display: grid; place-items: center;
 width: 48px; height: 48px; margin-bottom: 14px;
 border-radius: 14px; color: var(--accent);
 background: var(--accent-wash);
}
.contact-card h2 { font-size: 1.05rem; margin-bottom: 8px; }
.contact-card p { color: var(--text-dim); font-size: 0.92rem; line-height: 1.6; margin-bottom: 12px; }
.contact-card strong { color: var(--accent); font-size: 0.98rem; }

/* Sous-onglets des commandes (En cours / Annulées) */
.order-subtabs { display: inline-flex; gap: 6px; background: var(--surface-2); padding: 5px; border-radius: 999px; margin-bottom: 18px; }
.order-subtab { padding: 8px 16px; border: none; border-radius: 999px; background: none; color: var(--text-dim); font-weight: 600; font-size: 0.85rem; cursor: pointer; transition: background 0.2s, color 0.2s, box-shadow 0.2s; }
.order-subtab.active { background: var(--gradient); color: var(--on-primary); box-shadow: var(--shadow-accent); }
.order-subtab:hover:not(.active) { color: var(--text); }

/* Carte « modèle » (plusieurs marques) + sélecteur de marque fiche produit */
.model-badge {
 position: absolute; top: 8px; left: 8px; z-index: 2;
 background: var(--accent); color: var(--on-primary);
 font-size: .68rem; font-weight: 700; letter-spacing: .03em;
 padding: 4px 9px; border-radius: 999px; box-shadow: var(--shadow-xs);
}
.price-from { color: var(--text-faint); font-weight: 500; font-size: .72rem; }
.model-go { background: transparent; color: var(--accent); pointer-events: none; }
.model-card { cursor: pointer; }
.brand-pick { display: flex; align-items: center; gap: 10px; margin: 4px 0 4px; }
.brand-pick label { font-size: .8rem; font-weight: 700; letter-spacing: .03em; text-transform: uppercase; color: var(--text-faint); flex: none; }
.brand-pick .select { flex: 1; min-width: 0; }

/* Boîtier sans ventilateur : option ventilateur obligatoire */
.fan-required { margin: 14px 0; padding: 14px 16px; border-radius: var(--radius-sm); background: var(--amber-wash, rgba(245,158,11,.1)); border: 1px solid rgba(245,158,11,.35); }
.fan-required p { margin: 0 0 10px; font-size: .9rem; color: var(--text); line-height: 1.5; }
.fan-required .select { width: 100%; }

/* Rectangles « marques disponibles » sur la fiche produit */
.variant-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 210px), 1fr)); gap: 12px; }
.variant-card {
 position: relative; display: flex; flex-direction: column; gap: 6px;
 padding: 16px; border: 1px solid var(--border); border-radius: var(--radius-sm);
 background: var(--surface); cursor: pointer;
 transition: border-color .18s, transform .18s, box-shadow .18s;
}
.variant-card:hover { border-color: var(--accent); transform: translateY(-3px); box-shadow: var(--shadow-sm); }
.variant-card.current { border-color: var(--accent); box-shadow: 0 0 0 2px var(--accent-wash); cursor: default; }
.variant-brand { font-size: .72rem; font-weight: 700; letter-spacing: .04em; text-transform: uppercase; color: var(--accent); }
.variant-name { font-weight: 600; color: var(--text); font-size: .92rem; line-height: 1.35; flex: 1; }
.variant-foot { display: flex; align-items: baseline; justify-content: space-between; gap: 8px; margin-top: 4px; }
.variant-price { font-family: var(--font-display); font-weight: 700; font-size: 1.12rem; color: var(--text); }
.variant-stock { font-size: .72rem; color: var(--green); font-weight: 600; }
.variant-stock.out { color: var(--text-faint); }
.variant-tag { position: absolute; top: 10px; right: 10px; font-size: .64rem; font-weight: 700; letter-spacing: .04em; text-transform: uppercase; color: var(--accent); background: var(--accent-wash); padding: 3px 7px; border-radius: 999px; }

/* Curseur de prix à deux poignées (filtres catalogue) */
.elastic-slider-row {
 width: 100%;
 touch-action: none;
 user-select: none;
}
.elastic-slider-root {
 width: 100%;
 min-width: 0;
 transform: translateZ(0);
 cursor: grab;
}
.elastic-slider-root:active { cursor: grabbing; }
.elastic-slider-track { will-change: transform; }
.range-elastic-row { margin-top: 6px; }
.range-values { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; margin-top: 3px; }
.range-values output {
 min-width: 0; display: grid; gap: 2px; padding: 9px 10px;
 border: 1px solid var(--border); border-radius: 11px; background: var(--surface-2);
}
.range-values output:last-child { text-align: right; }
.range-values small {
 color: var(--text-faint); font-size: .62rem; font-weight: 700;
 letter-spacing: .07em; text-transform: uppercase;
}
.range-values strong {
 overflow: hidden; color: var(--text); font-family: var(--font-display);
 font-size: .86rem; text-overflow: ellipsis; white-space: nowrap;
}
.range-dual { --range-min-pos: 12px; --range-max-pos: calc(100% - 12px); position: relative; height: 44px; }
.range-track {
 position: absolute; top: 50%; left: 12px; right: 12px; height: 8px;
 transform: translateY(-50%); overflow: hidden; border: 1px solid var(--border);
 border-radius: 999px; background: var(--surface-2);
}
.range-fill {
 position: absolute; top: -1px; bottom: -1px; border-radius: 999px;
 background: var(--accent); box-shadow: 0 0 12px color-mix(in srgb, var(--accent) 30%, transparent);
}
.range-dual input[type=range] {
 position: absolute; inset: 0; width: 100%; height: 44px; margin: 0; padding: 0;
 border: 0; background: transparent; pointer-events: none;
 -webkit-appearance: none; appearance: none;
}
.range-dual input[type=range]::-webkit-slider-runnable-track { height: 6px; background: transparent; }
.range-dual input[type=range]::-webkit-slider-thumb {
 width: 24px; height: 28px; margin-top: -10px; border: 0;
 background: transparent; box-shadow: none;
 pointer-events: none; -webkit-appearance: none;
}
.range-dual input[type=range]::-moz-range-track { height: 6px; background: transparent; }
.range-dual input[type=range]::-moz-range-thumb {
 width: 24px; height: 28px; border: 0; background: transparent;
 box-shadow: none; pointer-events: none;
}
.range-dual input[type=range]:focus-visible { outline: none; }
.slider-grip {
 position: absolute; z-index: 6; top: 50%; width: 12px; height: 26px;
 border: 2px solid var(--surface); border-radius: 999px;
 background: var(--accent);
 box-shadow: 0 0 0 1px var(--border-strong), 0 5px 16px color-mix(in srgb, var(--accent) 26%, transparent);
 transform: translate(-50%, -50%);
 pointer-events: none;
 will-change: transform;
}
.slider-grip::after {
 content: ""; position: absolute; inset: 5px 3px;
 border-left: 1px solid color-mix(in srgb, white 72%, transparent);
 border-right: 1px solid color-mix(in srgb, white 72%, transparent);
 opacity: .72;
}
.range-grip-min { left: var(--range-min-pos); }
.range-grip-max { left: var(--range-max-pos); }
.range-dual:focus-within .slider-grip,
.range-elastic-row.is-elastic-dragging .slider-grip {
 box-shadow: 0 0 0 4px var(--accent-wash-strong), 0 5px 16px color-mix(in srgb, var(--accent) 30%, transparent);
}

.legal-consent {
 display: flex;
 align-items: flex-start;
 gap: 10px;
 margin-top: 14px;
 padding: 13px 14px;
 border: 1px solid var(--border);
 border-radius: 14px;
 background: var(--surface-2);
 color: var(--text-dim);
 font-size: 0.84rem;
 line-height: 1.5;
}
.legal-consent input {
 width: auto;
 flex: none;
 margin-top: 3px;
}
.legal-consent a {
 color: var(--accent);
 font-weight: 700;
 text-decoration: underline;
 text-decoration-thickness: 1px;
 text-underline-offset: 2px;
}

.cookie-banner {
 position: fixed;
 left: 18px;
 right: 18px;
 bottom: 18px;
 z-index: 120;
 max-width: 980px;
 margin: 0 auto;
 display: grid;
 grid-template-columns: 1fr auto;
 gap: 18px;
 align-items: center;
 padding: 16px;
 border: 1px solid var(--border-strong);
 border-radius: 18px;
 background: var(--surface);
 box-shadow: var(--shadow-lg);
}
.cookie-banner strong {
 display: block;
 margin-bottom: 4px;
}
.cookie-banner p {
 color: var(--text-dim);
 font-size: 0.86rem;
 line-height: 1.5;
}
.cookie-actions {
 display: flex;
 gap: 8px;
 flex-wrap: wrap;
 justify-content: flex-end;
}

/* ─── Compte / commandes ─── */
.order-card { background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius); padding: 22px 24px; margin-bottom: 14px; box-shadow: var(--shadow-xs); }
.order-head { display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap; gap: 10px; margin-bottom: 12px; }
.order-head h3 { font-size: 1.02rem; }
.order-status { font-size: 0.78rem; font-weight: 700; color: var(--green); background: rgba(34, 197, 94, 0.12); padding: 5px 12px; border-radius: 999px; }
.order-items { font-size: 0.88rem; color: var(--text-dim); line-height: 1.8; }
.order-total { margin-top: 10px; font-weight: 700; font-family: var(--font-display); }

/* ─── Configurateur ─── */
.builder-layout { display: grid; grid-template-columns: 1fr 320px; gap: 28px; align-items: start; }
.builder-slot {
 display: flex; align-items: center; gap: 18px;
 background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius);
 padding: 18px 22px; margin-bottom: 12px; box-shadow: var(--shadow-xs);
 transition: border-color 0.2s, box-shadow 0.2s, transform 0.2s;
}
.builder-slot:hover { border-color: var(--border-strong); transform: translateY(-2px); box-shadow: var(--shadow-sm); }
.builder-slot.filled { border-color: rgba(34, 197, 94, 0.45); }
.builder-slot-icon { flex-shrink: 0; width: 48px; height: 48px; display: grid; place-items: center; border-radius: 14px; background: var(--accent-wash); color: var(--accent); }
.builder-slot-main { flex: 1; min-width: 0; }
.builder-slot-main h3 { font-size: 0.95rem; margin-bottom: 3px; }
.builder-slot-main p { font-size: 0.84rem; color: var(--text-dim); line-height: 1.45; }
.builder-slot.filled .builder-slot-main p { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.builder-slot .price { font-size: 1rem; }

.builder-grid { display: grid; grid-template-columns: minmax(0, 1fr) 340px; gap: 28px; align-items: start; }
.builder-summary { position: sticky; top: 96px; }
/* Colonne latérale du configurateur : aperçu 3D + récapitulatif */
.builder-side {
 position: sticky;
 top: calc(var(--announce-h, 0px) + var(--fixed-header-h, 64px) + 18px);
 display: flex;
 flex-direction: column;
 gap: 18px;
}
.builder-side .builder-summary { position: static; top: auto !important; }
.builder-3d {
 position: relative;
 height: 240px;
 border: 1px solid var(--border);
 border-radius: 16px;
 background: radial-gradient(120% 90% at 50% 0%, var(--surface-2), transparent 72%);
 overflow: hidden;
}
.builder-3d canvas { width: 100%; height: 100%; display: block; }
.builder-3d-hint {
 position: absolute;
 left: 12px;
 right: 12px;
 bottom: 10px;
 font-size: 0.72rem;
 color: var(--text-faint);
 pointer-events: none;
}
@media (max-width: 980px) {
 /* Une colonne (fenêtre étroite ou zoom élevé) : l'aperçu 3D passe EN TÊTE,
    au-dessus des étapes — il n'est plus masqué. Le récap reste en bas. */
 .builder-side { position: static; display: contents; }
 .builder-3d { order: -1; height: 230px; }
}
.builder-summary h2 { font-size: 1.15rem; margin-bottom: 14px; }
.build-steps { margin: 8px 0 10px; }
.build-steps .row { display: flex; justify-content: space-between; align-items: center; font-size: 0.9rem; margin-bottom: 9px; color: var(--text-dim); }
.builder-progress-hint { font-size: 0.84rem; color: var(--text-dim); line-height: 1.5; margin: 4px 0 16px; }
@media (max-width: 980px) {
 .builder-grid { grid-template-columns: 1fr; }
 .builder-summary { position: static; margin-top: 22px; }
}
.builder-intro { color: var(--text-dim); margin-bottom: 18px; max-width: 640px; line-height: 1.55; }
/* Astuce en haut du sélecteur « Choisir » */
.picker-tip { font-size: 0.83rem; color: var(--text-dim); line-height: 1.55; padding: 1px 0 1px 14px; margin: 6px 0 18px; border-left: 2px solid var(--accent); }
.picker-tip b { color: var(--text); font-weight: 700; }
.picker-count { color: var(--text-faint); font-weight: 500; font-size: 0.85rem; margin-left: 6px; }
.compat { display: flex; flex-direction: column; gap: 8px; margin: 16px 0; }
.compat-item { display: flex; gap: 9px; align-items: flex-start; font-size: 0.84rem; line-height: 1.45; }
.compat-item.ok { color: var(--green); }
.compat-item.warn { color: #b45309; }
.compat-item.err { color: var(--red); }
.watt-bar { height: 8px; border-radius: 99px; background: var(--surface-2); border: 1px solid var(--border); overflow: hidden; margin: 8px 0 4px; }
.watt-bar > div { height: 100%; background: var(--gradient); border-radius: 99px; transition: width 0.4s; }
.watt-label { font-size: 0.8rem; color: var(--text-dim); }

.picker-body { --picker-panel-h: min(760px, calc(100vh - 230px)); display: grid; grid-template-columns: minmax(280px, 0.48fr) minmax(760px, 1fr); gap: 22px; align-items: stretch; border-top: 1px solid var(--border); margin-top: 18px; padding-top: 22px; }
.picker-list { display: flex; flex-direction: column; gap: 9px; height: var(--picker-panel-h); overflow-y: auto; overflow-x: hidden; padding: 0 10px 2px 0; }
.picker-group { position: sticky; top: 0; z-index: 2; background: var(--surface); margin: 6px 0 -2px; padding: 7px 4px; font-size: 0.72rem; font-weight: 700; letter-spacing: 0.07em; text-transform: uppercase; color: var(--text-dim); border-bottom: 1px solid var(--border); }
.picker-group:first-child { margin-top: 0; }
.picker-row { display: grid; grid-template-columns: minmax(0, 1fr); align-items: center; }
.picker-row .picker-item { min-width: 0; }
.pp-back { margin-bottom: 14px; }
.picker-item {
 display: flex; align-items: center; gap: 14px; text-align: left;
 background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius-sm);
 padding: 13px 16px; color: var(--text); transition: border-color 0.15s, background 0.15s, transform 0.15s;
}
.picker-item:hover, .picker-item.on { border-color: var(--accent); background: var(--accent-wash); }
.picker-item.on { box-shadow: inset 0 0 0 1px var(--accent); }
.picker-item:disabled, .picker-item.unavailable { opacity: 0.5; cursor: not-allowed; }
.picker-item:disabled:hover, .picker-item.unavailable:hover { border-color: var(--border); background: var(--surface); }
.picker-item.incompatible { opacity: 0.45; }
.picker-item .picker-visual { width: 46px; height: 46px; flex-shrink: 0; display: grid; place-items: center; background: #fff; border-radius: 10px; border: 1px solid var(--border); }
.picker-item .picker-visual svg { width: 86%; }
.picker-item-info { flex: 1; min-width: 0; display: flex; flex-direction: column; align-items: flex-start; gap: 5px; }
.picker-item-info strong { display: block; font-size: 0.88rem; line-height: 1.25; }
.picker-item-info span { font-size: 0.78rem; color: var(--text-faint); }
.picker-overlay { z-index: 420; padding: 6px; }
.modal.wide { width: min(1900px, calc(100vw - 12px)); max-height: calc(100vh - 12px); overflow: hidden; }
.picker-modal { animation: none; }
.picker-modal-compare { width: calc(100vw - 12px); max-height: calc(100vh - 12px); display: flex; flex-direction: column; padding: 20px 22px; }
.picker-modal-compare > h2,
.picker-modal-compare > .picker-tip { flex: 0 0 auto; }
.picker-filters { display: grid; grid-template-columns: max-content minmax(0, 1fr); gap: 14px 22px; align-items: center; width: min(980px, 100%); margin: 14px 0 0; padding: 18px 22px; border: 1px solid color-mix(in srgb, var(--border) 82%, var(--accent)); border-radius: 18px; background: linear-gradient(135deg, color-mix(in srgb, var(--surface-2) 92%, #fff 8%), color-mix(in srgb, var(--surface) 96%, var(--accent) 4%)); box-shadow: inset 0 1px 0 rgba(255,255,255,0.05), 0 14px 34px rgba(0,0,0,0.12); }
.picker-filter { display: contents; }
.picker-filter > span { align-self: center; min-width: 88px; color: var(--text-faint); font-size: 0.66rem; font-weight: 850; letter-spacing: 0.09em; line-height: 1.25; text-transform: uppercase; }
.picker-chips { display: flex; flex-wrap: wrap; gap: 9px; min-width: 0; }
.picker-chip { font: inherit; font-size: 0.8rem; min-height: 36px; padding: 7px 15px; border-radius: 999px; border: 1px solid color-mix(in srgb, var(--border) 72%, var(--text-faint)); background: color-mix(in srgb, var(--surface) 88%, #fff 12%); color: var(--text-dim); cursor: pointer; transition: border-color 0.15s, color 0.15s, background 0.15s, transform 0.15s, box-shadow 0.15s; font-variant-numeric: tabular-nums; }
.picker-chip:hover { border-color: color-mix(in srgb, var(--accent) 72%, #fff 28%); color: var(--text); background: var(--surface-2); transform: translateY(-1px); box-shadow: 0 8px 18px rgba(0,0,0,0.12); }
.picker-chip.on { background: linear-gradient(180deg, color-mix(in srgb, var(--accent-wash) 80%, #fff 20%), var(--accent-wash)); color: var(--accent-ink); border-color: var(--accent); box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--accent) 42%, transparent), 0 10px 24px rgba(99,102,241,0.18); }
.picker-empty { text-align: center; color: var(--text-faint); padding: 32px 16px; font-size: 0.9rem; }
.picker-preview { position: sticky; top: 0; height: var(--picker-panel-h); overflow: auto; padding: 22px; border: 1px solid var(--border); border-radius: 18px; background: var(--surface-2); box-shadow: var(--shadow-xs); }
.picker-preview.empty { min-height: 180px; justify-content: center; color: var(--text-faint); font-size: 0.86rem; line-height: 1.45; text-align: center; }
.picker-preview-full { display: grid; grid-template-columns: minmax(280px, 0.9fr) minmax(0, 1fr); gap: 26px; align-items: stretch; }
.picker-preview-gallery { display: grid; align-content: start; gap: 14px; min-width: 0; }
.picker-preview-content { display: grid; align-content: start; gap: 18px; min-width: 0; min-height: 0; padding-bottom: 2px; }
.picker-preview-visual { position: relative; width: 100%; aspect-ratio: 1 / 1; display: grid; place-items: center; overflow: hidden; border: 1px solid var(--border); border-radius: 14px; background: #fff; }
.picker-preview-visual svg { width: 58%; }
.picker-preview-visual .pimg { padding: 18px; border-radius: 14px; }
.picker-gallery-arrow { position: absolute; top: 50%; z-index: 3; display: grid; place-items: center; width: 24px; height: 24px; border: 1px solid rgba(0,0,0,0.10); border-radius: 999px; background: rgba(255,255,255,0.82); color: #111; font-size: 1.05rem; line-height: 1; transform: translateY(-50%); box-shadow: 0 6px 14px rgba(0,0,0,0.12); transition: background 0.15s, transform 0.15s, border-color 0.15s; }
.picker-gallery-arrow:hover { background: #fff; border-color: rgba(0,0,0,0.22); transform: translateY(-50%) scale(1.05); }
.picker-gallery-arrow.prev { left: 6px; }
.picker-gallery-arrow.next { right: 6px; }
.picker-preview-thumbs { display: flex; gap: 10px; overflow-x: auto; padding-bottom: 2px; }
.picker-preview-thumb { flex: 0 0 58px; width: 58px; height: 58px; display: grid; place-items: center; border: 1px solid var(--border); border-radius: 12px; background: #fff; overflow: hidden; transition: border-color 0.15s, transform 0.15s; }
.picker-preview-thumb:hover, .picker-preview-thumb.active { border-color: var(--accent); transform: translateY(-1px); }
.picker-preview-thumb img { width: 100%; height: 100%; object-fit: contain; padding: 5px; }
.picker-preview-head span { display: block; margin-bottom: 4px; color: var(--text-faint); font-size: 0.72rem; font-weight: 800; text-transform: uppercase; }
.picker-preview-head h3 { font-size: 1.55rem; line-height: 1.12; }
.picker-preview-price-row { display: flex; align-items: center; justify-content: space-between; gap: 14px; }
.picker-preview-price-row strong { font-family: var(--font-display); font-size: 2rem; }
.picker-preview-actions { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; align-self: start; }
.picker-preview-actions .btn { height: 40px; min-height: 40px; justify-content: center; padding-inline: 12px; font-size: 0.82rem; white-space: nowrap; }
.picker-preview-actions .btn.on { border-color: var(--accent); color: var(--accent-ink); background: var(--accent-wash); }
.picker-preview-section { display: grid; gap: 8px; padding-bottom: 2px; }
.picker-preview-section h4 { font-size: 0.86rem; }
.picker-preview-desc { color: var(--text-dim); font-size: 0.95rem; line-height: 1.55; }
.picker-preview-specs { display: grid; gap: 0; margin: 0; border: 1px solid var(--border); border-radius: 14px; overflow: hidden; }
.picker-preview-specs div { display: grid; grid-template-columns: minmax(96px, 0.9fr) minmax(0, 1fr); gap: 10px; padding: 9px 10px; border-top: 1px solid var(--border); background: var(--surface); }
.picker-preview-specs div:first-child { border-top: 0; }
.picker-preview-specs dt { color: var(--text-faint); font-size: 0.7rem; font-weight: 800; text-transform: uppercase; }
.picker-preview-specs dd { margin: 0; color: var(--text); font-size: 0.8rem; font-weight: 650; min-width: 0; overflow-wrap: anywhere; }
.picker-compare { display: grid; gap: 16px; border-top: 1px solid var(--border); margin-top: 2px; padding-top: 16px; min-height: min(760px, calc(100vh - 220px)); }
.picker-modal-compare .picker-compare { flex: 1 1 auto; min-height: 0; grid-template-rows: auto minmax(0, auto); gap: 12px; padding-top: 12px; }
.picker-compare-head { display: flex; align-items: center; justify-content: space-between; gap: 16px; }
.picker-compare-head span { display: block; margin-bottom: 4px; color: var(--text-faint); font-size: 0.72rem; font-weight: 800; text-transform: uppercase; }
.picker-compare-head h3 { font-size: 1.35rem; line-height: 1.15; }
.picker-compare-actions { display: flex; align-items: center; justify-content: flex-end; gap: 10px; flex-wrap: wrap; }
.picker-cmp-wrap { max-height: min(700px, calc(100vh - 300px)); overflow: auto; background: var(--surface); }
.picker-modal-compare .picker-cmp-wrap { max-height: calc(100vh - 210px); }
.picker-cmp-table { min-width: 980px; }
.picker-modal-compare .picker-cmp-table { table-layout: fixed; width: 100%; min-width: 1180px; }
.picker-modal-compare .cmp-table th,
.picker-modal-compare .cmp-table td { padding: 8px 10px; font-size: 0.82rem; }
.picker-modal-compare .cmp-label { width: 130px; }
.picker-modal-compare .cmp-col { width: calc((100% - 130px) / 6); min-width: 0; }
.picker-cmp-table .cmp-visual { width: 78px; height: 78px; display: grid; place-items: center; border: 1px solid var(--border); border-radius: 12px; background: #fff; overflow: hidden; }
.picker-modal-compare .picker-cmp-table .cmp-visual { width: 58px; height: 58px; margin-bottom: 6px; }
.picker-cmp-table .cmp-name { overflow-wrap: anywhere; }
.cmp-slot-head { color: var(--text-faint); cursor: default; }
.cmp-slot-head small { display: block; margin-top: 4px; color: var(--text-faint); font-size: 0.72rem; font-weight: 700; }
.cmp-slot-plus { width: 58px; height: 58px; display: grid; place-items: center; margin-bottom: 6px; border: 1px dashed var(--border-strong); border-radius: 12px; color: var(--text-faint); font-size: 1.35rem; font-weight: 700; background: color-mix(in srgb, var(--surface-2) 72%, transparent); cursor: pointer; transition: color 0.15s, border-color 0.15s, background 0.15s; }
.cmp-slot-plus:hover { color: var(--text); border-color: var(--accent); background: color-mix(in srgb, var(--accent-wash) 70%, transparent); }
.cmp-table td.cmp-slot-empty { color: var(--text-faint); background: color-mix(in srgb, var(--surface-2) 42%, transparent); }
.cmp-table .cmp-value { display: inline-flex; align-items: center; gap: 6px; vertical-align: middle; }
.cmp-table .cmp-rank-best .cmp-value { color: var(--green); font-weight: 750; }
.cmp-table .cmp-rank-worst .cmp-value { color: var(--red); font-weight: 700; }
.cmp-badge { display: inline-flex; align-items: center; margin-left: 7px; padding: 2px 7px; border-radius: 999px; font-size: 0.68rem; font-weight: 800; line-height: 1.25; vertical-align: middle; white-space: nowrap; }
.cmp-badge.good { color: var(--green); background: rgba(34,197,94,0.12); border: 1px solid rgba(34,197,94,0.32); }
.cmp-badge.bad { color: var(--red); background: rgba(239,68,68,0.10); border: 1px solid rgba(239,68,68,0.28); }
.picker-cmp-table .cmp-visual svg { width: 70%; height: 70%; }
.picker-cmp-table .cmp-visual .pimg { padding: 6px; }
.picker-cmp-table td.cmp-best { background: transparent; color: inherit; font-weight: inherit; }
.picker-cmp-table .cmp-tag { display: none; }
.picker-compare-empty { min-height: 300px; display: grid; place-content: center; gap: 8px; text-align: center; color: var(--text-dim); border: 1px dashed var(--border); border-radius: 16px; background: var(--surface-2); }
.picker-compare-empty strong { color: var(--text); }
@media (max-width: 1280px) {
 .modal.wide { width: min(760px, calc(100vw - 32px)); overflow: auto; }
 .modal.wide.picker-modal-compare { width: calc(100vw - 12px); height: calc(100vh - 12px); overflow: hidden; }
 .picker-body { --picker-panel-h: auto; }
 .picker-body { grid-template-columns: 1fr; margin-top: 18px; padding-top: 18px; }
 .picker-filters { width: 100%; }
 .picker-list { height: auto; max-height: 46vh; }
 .picker-preview { position: static; order: -1; height: auto; max-height: none; }
 .picker-preview-full { grid-template-columns: 1fr; }
 .picker-preview-visual { max-width: 280px; }
 .picker-compare { min-height: 520px; }
 .picker-cmp-wrap { max-height: none; }
}
@media (max-width: 620px) {
 .modal.wide { width: 100%; }
 .picker-filters { grid-template-columns: 1fr; gap: 8px; padding: 14px; }
 .picker-filter > span { align-self: auto; }
 .picker-list { padding-right: 4px; }
 .picker-preview-visual { max-width: none; }
 .picker-preview-head h3 { font-size: 1.25rem; }
 .picker-preview-price-row strong { font-size: 1.55rem; }
 .picker-preview-actions { grid-template-columns: 1fr; }
 .picker-compare-head { align-items: flex-start; flex-direction: column; }
 .picker-compare-actions { width: 100%; justify-content: stretch; }
 .picker-compare-actions .btn { flex: 1; }
}

/* ─── Toasts ─── */
.toasts { position: fixed; bottom: 24px; right: 24px; z-index: 200; display: flex; flex-direction: column; gap: 10px; }
.toast {
 display: flex; align-items: center; gap: 11px;
 background: var(--surface);
 border: 1px solid var(--border);
 border-left: 3px solid var(--accent);
 border-radius: 14px;
 padding: 14px 18px;
 font-size: 0.9rem;
 color: var(--text);
 box-shadow: var(--shadow);
 animation: toastIn 0.3s cubic-bezier(0.2, 0.9, 0.3, 1.2);
 max-width: 360px;
}
.toast.error { border-left-color: var(--red); }
.toast.success { border-left-color: var(--green); }
@keyframes toastIn { from { opacity: 0; transform: translateX(40px); } to { opacity: 1; transform: none; } }
.toast.out { animation: toastOut 0.3s forwards; }
@keyframes toastOut { to { opacity: 0; transform: translateX(40px); } }

/* ─── Skeletons ─── */
.skeleton { border-radius: var(--radius); background: var(--surface); border: 1px solid var(--border); overflow: hidden; position: relative; min-height: 320px; }
.skeleton::after {
 content: ""; position: absolute; inset: 0;
 background: linear-gradient(100deg, transparent 30%, rgba(15, 23, 42, 0.05) 50%, transparent 70%);
 animation: shimmer 1.4s infinite;
}
@keyframes shimmer { from { transform: translateX(-100%); } to { transform: translateX(100%); } }

/* ─── Footer ─── */
.footer { border-top: 1px solid var(--border); background: var(--surface); padding: 56px 28px 24px; margin-top: 40px; }
.footer-grid { max-width: 1280px; margin: 0 auto; display: grid; grid-template-columns: 1.4fr repeat(5, 1fr); gap: 30px; }
.footer-grid h4 { font-size: 0.92rem; margin-bottom: 14px; }
.footer-grid a, .footer-line { display: block; color: var(--text-dim); font-size: 0.86rem; padding: 4px 0; }
.footer-grid a:hover { color: var(--accent); }
.footer-brand p { color: var(--text-dim); font-size: 0.86rem; line-height: 1.65; margin-top: 14px; max-width: 320px; }
.footer-bottom { max-width: 1280px; margin: 36px auto 0; padding-top: 20px; border-top: 1px solid var(--border); color: var(--text-faint); font-size: 0.8rem; }
.footer-bottom a { color: var(--accent); }

/* ─── Responsive ─── */
@media (max-width: 1080px) {
 .product-grid, .cat-grid, .perks { grid-template-columns: repeat(3, 1fr); }
 .hero { grid-template-columns: 1fr; padding: 48px 34px; }
 .hero-art { display: none; }
 .nav { display: none; }
 .footer-grid { grid-template-columns: repeat(3, 1fr); }
}
@media (max-width: 820px) {
 .product-grid, .cat-grid, .perks { grid-template-columns: repeat(2, 1fr); }
 .catalog-layout, .product-page, .checkout-layout, .builder-layout, .story-grid, .legal-grid { grid-template-columns: 1fr; }
 .cookie-banner { grid-template-columns: 1fr; }
 .cookie-actions { justify-content: stretch; }
 .cookie-actions .btn { flex: 1; }
 .filters, .product-gallery, .builder-summary { position: static; }
 .header { flex-wrap: wrap; gap: 12px; padding: 12px 16px; }
 .header-search { order: 3; max-width: none; flex-basis: 100%; }
 .icon-btn-label { display: none; }
 .app { padding: 20px 16px 60px; }
 .footer-grid { grid-template-columns: 1fr 1fr; }
 .promo-banner { flex-direction: column; text-align: center; }
}
@media (max-width: 520px) {
 .product-grid { grid-template-columns: 1fr; }
 .cat-grid, .perks { grid-template-columns: 1fr; }
 .cart-trust { grid-template-columns: 1fr; }
 .content-hero { padding-top: 28px; }
 .content-hero h1 { font-size: 2.1rem; }
 .hero-stats { flex-wrap: wrap; gap: 20px; }
}

@media (prefers-reduced-motion: reduce) {
 *, *::before, *::after { animation-duration: 0.001ms !important; animation-iteration-count: 1 !important; transition-duration: 0.001ms !important; scroll-behavior: auto !important; }
}

/* ════════════════════════════════════════════════════════════════
  Ajouts : favoris, comparateur, pagination, compte, dashboard admin
  ════════════════════════════════════════════════════════════════ */

/* ─── Actions sur la carte produit (favori + comparer) ─── */
.product-visual { position: relative; }
.card-actions {
 position: absolute; top: 8px; right: 8px;
 display: flex; flex-direction: column; gap: 6px;
 opacity: 0; transform: translateY(-4px);
 transition: opacity 0.18s, transform 0.18s; z-index: 2;
}
.product-card:hover .card-actions { opacity: 1; transform: none; }
.fav-btn, .cmp-btn {
 width: 34px; height: 34px; display: grid; place-items: center;
 border-radius: 11px; border: 1px solid var(--border);
 background: rgba(255, 255, 255, 0.9); color: var(--text-dim);
 backdrop-filter: blur(6px); box-shadow: var(--shadow-xs);
 transition: all 0.15s; font-size: 1rem; line-height: 1;
}
.fav-btn:hover, .cmp-btn:hover { color: var(--accent-ink); border-color: var(--accent); }
.fav-btn.on { color: var(--red); border-color: var(--red); }
.fav-btn.on svg path { fill: var(--red); }
.cmp-btn.on { color: var(--accent-ink); border-color: var(--accent); background: var(--accent-wash-strong); }
@media (hover: none) { .card-actions { opacity: 1; transform: none; } }

/* Boutons favori/comparer sur la fiche produit */
.pp-actions { display: flex; gap: 10px; margin-top: 14px; flex-wrap: wrap; }
.pp-trust { list-style: none; display: grid; grid-template-columns: 1fr 1fr; gap: 11px 18px; margin: 20px 0 2px; padding: 16px 0 0; border-top: 1px solid var(--border); }
.pp-trust li { display: flex; align-items: center; gap: 9px; font-size: 0.85rem; color: var(--text-dim); }
.pp-trust li svg { flex: none; color: var(--green); }
.pp-trust a { color: var(--text-dim); text-decoration: underline; text-underline-offset: 2px; transition: color 0.15s; }
.pp-trust a:hover { color: var(--accent); }
@media (max-width: 520px) { .pp-trust { grid-template-columns: 1fr; gap: 12px; } }

/* Barre d'achat collante (mobile uniquement) : prix + ajout toujours à portée. */
.pp-buybar, .pp-buybar-spacer { display: none; }
@media (max-width: 760px) {
 .pp-buybar {
  position: fixed; left: 0; right: 0; bottom: 0; z-index: 60;
  display: flex; align-items: center; gap: 12px;
  padding: 10px 16px calc(10px + env(safe-area-inset-bottom));
  background: var(--header-bg); backdrop-filter: saturate(180%) blur(20px);
  -webkit-backdrop-filter: saturate(180%) blur(20px);
  border-top: 1px solid var(--border);
 }
 .pp-buybar-info { display: flex; flex-direction: column; min-width: 0; flex: 1; }
 .pp-buybar-name { font-size: 0.76rem; color: var(--text-dim); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
 .pp-buybar-price { font-family: var(--font-display); font-weight: 700; font-size: 1.12rem; }
 .pp-buybar .btn { flex: none; min-height: 44px; }
 .pp-buybar-spacer { display: block; height: calc(72px + env(safe-area-inset-bottom)); }
}

/* ════════════════════════════════════════════════════════════════
   CATALOGUE MOBILE (≤ 900px)
   Fini la colonne de filtres étriquée à gauche : sur mobile/tablette on
   passe en UNE colonne pleine largeur, et les filtres sont repliés
   derrière un bouton « Filtres » (panneau dépliable). Couvre aussi la
   zone 821-900px où la grille 240px+1fr restait tassée.
   ════════════════════════════════════════════════════════════════ */
.filters-toggle { display: none; }
@media (max-width: 900px) {
 .catalog-layout { display: block; }
 .catalog-results {
  position: static; height: auto; overflow: visible;
  padding: 0; margin: 0; scrollbar-gutter: auto;
 }
 .catalog-toolbar { position: relative; z-index: 30; overflow: visible; }
 .filters {
  position: static !important;
  display: none;               /* replié par défaut ; ouvert via le bouton */
  margin-bottom: 18px;
 }
 .catalog-layout.filters-open .filters { display: flex; }
 .filters-toggle { display: inline-flex; align-items: center; gap: 7px; }
 .filters-toggle.active { border-color: var(--accent); color: var(--accent-ink); }
}
.btn.fav-active { border-color: var(--accent); color: var(--accent-ink); }

/* ─── Barre de comparaison flottante ─── */
.compare-bar {
 position: fixed; left: 50%; bottom: 18px; transform: translateX(-50%);
 z-index: 60; display: flex; align-items: center; gap: 14px; flex-wrap: wrap;
 max-width: calc(100vw - 32px);
 background: var(--surface); border: 1px solid var(--border-strong);
 border-radius: 16px; padding: 12px 16px; box-shadow: var(--shadow-lg);
}
.compare-bar-label { font-weight: 600; font-family: var(--font-display); }
.compare-bar-items { display: flex; gap: 6px; flex-wrap: wrap; }
.compare-chip {
 font-size: 0.78rem; padding: 5px 10px; border-radius: 999px; cursor: pointer;
 background: var(--surface-2); border: 1px solid var(--border-strong); color: var(--text-dim);
 transition: color 0.15s, border-color 0.15s;
}
.compare-chip:hover { color: var(--red); border-color: var(--red); }

/* ─── Tableau du comparateur ─── */
.cmp-wrap { overflow-x: auto; border: 1px solid var(--border); border-radius: var(--radius); box-shadow: var(--shadow-xs); }
.cmp-table { border-collapse: collapse; width: 100%; min-width: 560px; background: var(--surface); }
.cmp-table th, .cmp-table td {
 padding: 12px 14px; border-bottom: 1px solid var(--border);
 text-align: left; vertical-align: middle; font-size: 0.9rem;
}
.cmp-table thead th { background: var(--surface-2); vertical-align: bottom; }
.cmp-label { color: var(--text-dim); font-weight: 600; width: 160px; background: var(--surface-2); }
.cmp-col { min-width: 170px; }
.cmp-visual { width: 70px; height: 70px; position: relative; margin-bottom: 8px; }
.cmp-visual svg, .cmp-visual .pimg { width: 100%; height: 100%; object-fit: contain; }
.cmp-name { font-weight: 600; font-family: var(--font-display); font-size: 0.88rem; }
.cmp-remove { background: none; border: none; color: var(--text-faint); font-size: 0.75rem; margin-top: 6px; }
.cmp-remove:hover { color: var(--red); }
.cmp-old { color: var(--text-faint); text-decoration: line-through; font-weight: 400; }
.compare-page { max-width: 1780px; margin: 0 auto; }
.cmp-page-wrap { background: var(--surface); }
.cmp-table-global { table-layout: fixed; min-width: 1180px; }
.cmp-table-global .cmp-label { width: 130px; }
.cmp-table-global .cmp-col { width: calc((100% - 130px) / 6); min-width: 0; }
.cmp-table-global th,
.cmp-table-global td { padding: 10px 12px; font-size: 0.84rem; }
.cmp-table-global .cmp-visual { width: 62px; height: 62px; display: grid; place-items: center; border: 1px solid var(--border); border-radius: 12px; background: #fff; overflow: hidden; }
.cmp-table-global .cmp-name { overflow-wrap: anywhere; }

/* ─── Pagination ─── */
.pager { display: flex; justify-content: center; align-items: center; gap: 6px; flex-wrap: wrap; margin-top: 32px; }
.pager-btn {
 min-width: 38px; height: 38px; padding: 0 12px; border-radius: 11px;
 background: var(--surface); border: 1px solid var(--border-strong); color: var(--text);
 font-weight: 600; box-shadow: var(--shadow-xs); transition: all 0.15s;
}
.pager-btn:hover:not(:disabled) { border-color: var(--accent); color: var(--accent-ink); }
.pager-btn.active { background: var(--gradient); color: var(--on-primary); border-color: transparent; box-shadow: var(--shadow-accent); }
.pager-btn:disabled { opacity: 0.4; cursor: not-allowed; }
.pager-gap { color: var(--text-faint); padding: 0 4px; }

/* ─── Avis : badge achat vérifié + actions ─── */
.verified-badge {
 font-size: 0.72rem; font-weight: 600; color: var(--green);
 border: 1px solid rgba(34, 197, 94, 0.5); border-radius: 999px; padding: 2px 8px; white-space: nowrap;
}
.review-mine { display: flex; gap: 8px; margin-top: 10px; }

/* ─── Compte : onglets ─── */
.account-tabs { display: flex; gap: 6px; margin-bottom: 22px; flex-wrap: wrap; border-bottom: 1px solid var(--border); }
.account-tab {
 background: none; border: none; color: var(--text-dim); font-weight: 600;
 font-family: var(--font-display); padding: 10px 16px; border-bottom: 2px solid transparent; margin-bottom: -1px;
 transition: color 0.15s, border-color 0.15s;
}
.account-tab:hover { color: var(--text); }
.account-tab.active { color: var(--accent-ink); border-bottom-color: var(--accent); }

/* ─── Dashboard admin : KPI ─── */
.kpi-grid {
 display: grid; grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
 gap: 14px; margin-bottom: 22px;
}
.kpi-card {
 background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius);
 padding: 18px 20px; display: flex; flex-direction: column; gap: 4px; box-shadow: var(--shadow-xs);
}
.kpi-label { color: var(--text-dim); font-size: 0.78rem; text-transform: uppercase; letter-spacing: 0.04em; }
.kpi-value { font-family: var(--font-display); font-size: 1.6rem; }
.kpi-sub { color: var(--text-faint); font-size: 0.8rem; }
.admin-cols { display: grid; grid-template-columns: 1fr 1fr; gap: 18px; }
@media (max-width: 800px) { .admin-cols { grid-template-columns: 1fr; } }
.mini-table { width: 100%; border-collapse: collapse; }
.mini-table th, .mini-table td { padding: 9px 6px; text-align: left; border-bottom: 1px solid var(--border); font-size: 0.85rem; }
.mini-table th { color: var(--text-dim); font-weight: 600; font-size: 0.75rem; text-transform: uppercase; }
.mini-table td:nth-child(2), .mini-table td:nth-child(3),
.mini-table th:nth-child(2), .mini-table th:nth-child(3) { text-align: right; white-space: nowrap; }
.status-pills { display: flex; gap: 10px; flex-wrap: wrap; }
.status-pill { display: inline-flex; align-items: center; gap: 8px; padding: 7px 13px; border-radius: 999px; border: 1px solid var(--border-strong); background: var(--surface); box-shadow: var(--shadow-xs); }
.status-pill:hover { border-color: var(--accent); }

/* ─── Recherche admin ─── */
.admin-search { display: flex; gap: 8px; align-items: center; flex: 1; min-width: 260px; }
.admin-search input {
 flex: 1; padding: 10px 13px; border-radius: 11px;
 background: var(--surface); border: 1px solid var(--border-strong); color: var(--text);
 transition: border-color 0.15s, box-shadow 0.15s;
}
.admin-search input:focus { outline: none; border-color: var(--accent); box-shadow: 0 0 0 3px rgba(120, 120, 128, 0.12); }

/* ─── PC prémontés ─── */
.prebuilts .pb-sub { color: var(--text-dim); margin: -10px 0 24px; max-width: 640px; }
.pb-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; }
.pb-card { position: relative; display: flex; flex-direction: column; background: var(--surface);
 border: 1px solid var(--border); border-radius: var(--radius); overflow: hidden; box-shadow: var(--shadow-xs);
 transition: transform .22s, box-shadow .28s, border-color .22s; }
.pb-card:hover { transform: translateY(-6px); box-shadow: var(--shadow); border-color: rgba(37,99,235,.4); }
.pb-card.featured { border-color: rgba(37,99,235,.6); box-shadow: var(--shadow-accent); }
.pb-head { padding: 22px 22px 16px; background: linear-gradient(160deg, rgba(59,130,246,.10), transparent); }
.pb-tier { font-size: .74rem; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--accent); }
.pb-name { font-family: var(--font-display); font-size: 1.5rem; margin: 4px 0 2px; }
.pb-tag { color: var(--text-dim); font-size: .9rem; }
.pb-compat { display: inline-flex; align-items: center; gap: 6px; margin-top: 12px; font-size: .78rem; font-weight: 600;
 color: var(--green); background: rgba(34,197,94,.12); border: 1px solid rgba(34,197,94,.3); padding: 5px 11px; border-radius: 999px; }
.pb-specs { list-style: none; padding: 6px 22px 4px; display: flex; flex-direction: column; gap: 2px; flex: 1; }
.pb-specs li { display: flex; gap: 10px; font-size: .86rem; padding: 7px 0; border-bottom: 1px solid var(--border); color: var(--text-dim); }
.pb-specs li:last-child { border-bottom: none; }
.pb-specs .k { color: var(--text-faint); width: 72px; flex: none; text-transform: uppercase; font-size: .68rem; font-weight: 700; letter-spacing: .04em; padding-top: 2px; }
.pb-specs .v { color: var(--text); font-weight: 500; }
/* Générateur de configuration par budget (curseur) */
.budget-assist {
 margin: 18px 0 14px;
 border: 1px solid var(--border);
 border-radius: 16px;
 background: var(--surface);
}
.budget-assist > summary {
 min-height: 66px;
 display: grid;
 grid-template-columns: 36px minmax(0, 1fr) auto;
 align-items: center;
 gap: 12px;
 padding: 12px 16px;
 color: var(--text);
 cursor: pointer;
 list-style: none;
}
.budget-assist > summary::-webkit-details-marker { display: none; }
.budget-assist > summary:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; }
.budget-assist-icon {
 width: 36px; height: 36px; display: grid; place-items: center;
 border-radius: 10px; background: var(--surface-2); color: var(--accent);
 font-family: var(--font-display); font-weight: 750;
}
.budget-assist summary > span:nth-child(2) { display: grid; gap: 3px; }
.budget-assist summary strong { font-size: .9rem; }
.budget-assist summary small { color: var(--text-faint); font-size: .74rem; font-weight: 450; }
.budget-assist-chevron { color: var(--text-faint); font-size: 1.2rem; transition: transform .18s ease; }
.budget-assist[open] .budget-assist-chevron { transform: rotate(180deg); }
.budget-assist[open] > summary { border-bottom: 1px solid var(--border); }
.budget-builder { margin: 0; padding: 14px; }
.budget-assist .bb-card { border: 0; padding: 18px; box-shadow: none; }
.bb-card { background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius); padding: 24px 26px; }
.bb-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 16px; flex-wrap: wrap; }
.bb-title { font-size: 1.3rem; margin: 6px 0 3px; }
.bb-intro { max-width: 560px; color: var(--text-dim); font-size: .86rem; line-height: 1.55; }
.bb-console {
 margin-top: 20px; padding: 17px 18px 13px;
 border: 1px solid var(--border); border-radius: 16px;
 background:
  radial-gradient(circle at 12% 0%, color-mix(in srgb, var(--accent) 9%, transparent), transparent 42%),
  color-mix(in srgb, var(--surface-2) 82%, transparent);
}
.bb-readout {
 display: grid; grid-template-columns: minmax(130px, .72fr) minmax(210px, 1.28fr);
 gap: 18px; align-items: end; margin-bottom: 5px;
}
.bb-readout-budget, .bb-readout-use { display: grid; gap: 3px; min-width: 0; }
.bb-readout span {
 color: var(--text-faint); font-size: .63rem; font-weight: 750;
 letter-spacing: .09em; text-transform: uppercase;
}
.bb-budget-value {
 color: var(--text); font-family: var(--font-display);
 font-size: clamp(1.55rem, 3vw, 2.15rem); font-weight: 760; line-height: 1;
 letter-spacing: -.035em; font-variant-numeric: tabular-nums;
}
.bb-power {
 overflow: hidden; color: var(--accent); font-size: .88rem; font-weight: 720;
 line-height: 1.35; text-overflow: ellipsis; white-space: nowrap;
}
.bb-slider { --bb-ratio: .15556; --bb-grip: 15.556%; position: relative; height: 50px; isolation: isolate; }
.bb-elastic-row .bb-slider { margin-inline: 0; }
.bb-track {
 position: absolute; top: 50%; left: 12px; right: 12px; height: 8px;
 overflow: hidden; border: 1px solid var(--border); border-radius: 999px;
 background: color-mix(in srgb, var(--surface) 72%, var(--border));
 box-shadow: inset 0 1px 3px color-mix(in srgb, black 14%, transparent);
 transform: translateY(-50%); pointer-events: none;
}
.bb-track::after {
 content: ""; position: absolute; z-index: 2; inset: 0;
 background: linear-gradient(90deg,
  transparent 19.8%, var(--border) 20%, transparent 20.2%,
  transparent 39.8%, var(--border) 40%, transparent 40.2%,
  transparent 59.8%, var(--border) 60%, transparent 60.2%,
  transparent 79.8%, var(--border) 80%, transparent 80.2%);
 opacity: .72;
}
.bb-fill {
 position: absolute; z-index: 1; inset: -1px;
 border-radius: inherit;
 background: linear-gradient(90deg,
  color-mix(in srgb, var(--accent) 72%, #7cc7ec),
  color-mix(in srgb, var(--accent) 88%, white));
 box-shadow: 0 0 14px color-mix(in srgb, var(--accent) 32%, transparent);
 transform: scaleX(var(--bb-ratio)); transform-origin: left center;
 will-change: transform;
}
.bb-range { position: absolute; z-index: 5; inset: 4px 0; -webkit-appearance: none; appearance: none; width: 100%; height: 42px; margin: 0; background: transparent; pointer-events: none; }
.bb-range::-webkit-slider-runnable-track { height: 8px; background: transparent; }
.bb-range::-webkit-slider-thumb { -webkit-appearance: none; appearance: none; width: 24px; height: 28px; margin-top: -2px;
 background: transparent; border: 0; box-shadow: none; pointer-events: none; }
.bb-range::-moz-range-track { height: 8px; background: transparent; }
.bb-range::-moz-range-progress { background: transparent; }
.bb-range::-moz-range-thumb { width: 24px; height: 28px; background: transparent; border: 0; box-shadow: none; pointer-events: none; }
.bb-grip {
 top: 50%;
 left: var(--bb-grip);
 background: var(--accent);
 transition: box-shadow .18s ease, filter .18s ease;
}
.bb-slider:focus-within .bb-grip,
.bb-elastic-row.is-elastic-dragging .bb-grip { box-shadow: 0 0 0 5px var(--accent-wash-strong), 0 6px 18px color-mix(in srgb, var(--accent) 34%, transparent); filter: brightness(1.08); }
.bb-range:focus-visible { outline: 2px solid rgba(213,239,255,.9); outline-offset: 4px; border-radius: 999px; }
.bb-zones {
 display: grid; grid-template-columns: repeat(5, 1fr); gap: 4px;
 margin: -2px 2px 0;
}
.bb-zones span {
 overflow: hidden; color: var(--text-faint); font-size: .59rem; font-weight: 680;
 letter-spacing: .035em; text-align: center; text-overflow: ellipsis; white-space: nowrap;
 opacity: .62; transform: translateY(0); transition: color .18s ease, opacity .18s ease, transform .18s ease;
}
.bb-zones span.is-active { color: var(--accent); opacity: 1; transform: translateY(-2px); }
@media (prefers-reduced-motion: reduce) {
 .bb-grip, .bb-zones span { transition: none; }
}
.bb-smart { display: flex; flex-wrap: wrap; gap: 7px; margin: 13px 0 8px; color: var(--text-faint); font-size: .68rem; }
.bb-smart span { padding: 4px 8px; border: 1px solid var(--border); border-radius: 999px; background: color-mix(in srgb, var(--surface-2) 72%, transparent); }
.bb-smart .bb-smart-ok { color: #9bd9bc; border-color: color-mix(in srgb, #66c99a 30%, var(--border)); }
.bb-parts { list-style: none; padding: 0; margin: 10px 0 0; display: grid; grid-template-columns: 1fr 1fr; gap: 2px 22px; }
.bb-parts li { display: flex; gap: 10px; align-items: baseline; font-size: .86rem; padding: 8px 0; border-bottom: 1px solid var(--border); }
.bb-parts .k { color: var(--text-faint); width: 64px; flex: none; text-transform: uppercase; font-size: .66rem; font-weight: 700; letter-spacing: .04em; }
.bb-parts .v { color: var(--text); font-weight: 500; flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.bb-parts .p { color: var(--text-dim); font-weight: 600; flex: none; }
.bb-total { display: flex; align-items: baseline; justify-content: space-between; margin-top: 16px; padding-top: 14px; border-top: 2px solid var(--border); }
.bb-total span { color: var(--text-dim); font-size: .9rem; }
.bb-total strong { font-family: var(--font-display); font-weight: 700; font-size: 1.6rem; color: var(--accent); }
@media (max-width: 620px) {
 .bb-parts { grid-template-columns: 1fr; }
 .bb-console { padding-inline: 13px; }
 .bb-readout { grid-template-columns: 1fr; gap: 10px; }
 .bb-power { white-space: normal; }
 .bb-zones span { font-size: .52rem; letter-spacing: 0; }
}

.pb-foot { padding: 18px 22px 22px; border-top: 1px solid var(--border); display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.pb-price { font-family: var(--font-display); font-weight: 700; font-size: 1.5rem; }
.pb-price small { display: block; font-size: .72rem; color: var(--text-faint); font-weight: 400; letter-spacing: .02em; }
.pb-actions { display: flex; gap: 8px; flex-wrap: wrap; justify-content: flex-end; }
.pb-detail-modal { width: min(720px, 100%); max-height: min(760px, calc(100vh - 40px)); overflow: auto; }
.pb-detail-modal h2 { margin: 4px 0 6px; font-size: 1.55rem; }
.pb-detail-tag { color: var(--text-dim); margin-bottom: 18px; }
.pb-detail-total {
 display: flex; align-items: center; justify-content: space-between; gap: 14px;
 padding: 14px 16px; margin-bottom: 14px; border-radius: 14px;
 background: var(--surface-2); border: 1px solid var(--border);
}
.pb-detail-total span { color: var(--text-dim); font-size: .86rem; font-weight: 600; }
.pb-detail-total strong { font-family: var(--font-display); font-size: 1.45rem; }
.pb-detail-list { display: grid; gap: 8px; }
.pb-detail-row {
 display: grid; grid-template-columns: 92px 1fr auto; gap: 12px; align-items: center;
 padding: 12px 14px; border: 1px solid var(--border); border-radius: 12px;
 background: var(--bg); transition: border-color .15s, background .15s;
}
.pb-detail-row:hover { border-color: var(--accent); background: var(--surface-2); }
.pb-detail-role { color: var(--text-faint); font-size: .72rem; font-weight: 800; text-transform: uppercase; }
.pb-detail-name { color: var(--text); font-weight: 650; min-width: 0; }
.pb-detail-meta { color: var(--text-dim); font-size: .82rem; white-space: nowrap; }
.pb-detail-actions { display: flex; gap: 10px; justify-content: flex-end; flex-wrap: wrap; margin-top: 18px; }
.prebuilt-page {
 display: grid; grid-template-columns: minmax(0, 1fr) 360px; gap: 24px; align-items: start;
}
.prebuilt-page-head {
 min-height: 320px; padding: clamp(28px, 5vw, 54px); border-radius: 28px;
 background:
  radial-gradient(ellipse 70% 90% at 90% 8%, var(--site-glow-a), transparent 60%),
  radial-gradient(ellipse 60% 80% at 4% 100%, var(--site-glow-b), transparent 64%),
  var(--hero-base);
 border: 1px solid var(--border);
}
.prebuilt-page-head h1 { font-size: clamp(2rem, 5vw, 3.2rem); margin: 8px 0 12px; }
.prebuilt-page-head p { color: var(--text-dim); max-width: 540px; line-height: 1.65; }
.prebuilt-facts { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 24px; }
.prebuilt-facts span {
 padding: 8px 12px; border-radius: 999px; background: var(--surface);
 border: 1px solid var(--border); color: var(--text-dim); font-size: .82rem; font-weight: 700;
}
.prebuilt-summary { position: sticky; top: 92px; display: flex; flex-direction: column; gap: 12px; }
.prebuilt-summary > span { color: var(--text-faint); font-size: .78rem; font-weight: 800; text-transform: uppercase; }
.prebuilt-summary > strong { font-family: var(--font-display); font-size: 2rem; }
.prebuilt-summary p { color: var(--text-dim); font-size: .9rem; line-height: 1.55; margin-bottom: 6px; }
.prebuilt-component-list { display: grid; gap: 10px; }
.prebuilt-component {
 display: grid; grid-template-columns: 74px minmax(0, 1fr) auto; gap: 14px; align-items: center;
 padding: 12px 14px; background: var(--surface); border: 1px solid var(--border);
 border-radius: 16px; transition: border-color .15s, transform .15s, box-shadow .2s;
}
.prebuilt-component:hover { border-color: var(--accent); transform: translateY(-2px); box-shadow: var(--shadow-sm); }
.prebuilt-component-visual {
 position: relative; width: 74px; height: 58px; display: grid; place-items: center; overflow: hidden;
 border-radius: 12px; background: #ffffff; border: 1px solid var(--border);
}
.prebuilt-component-visual svg { width: 68%; }
.prebuilt-component-visual .pimg { padding: 5px; }
.prebuilt-component span { display: block; color: var(--text-faint); font-size: .72rem; font-weight: 800; text-transform: uppercase; margin-bottom: 3px; }
.prebuilt-component strong { color: var(--text); line-height: 1.3; }
.prebuilt-component-meta { text-align: right; }
.prebuilt-component-meta strong { display: block; font-family: var(--font-display); font-size: 1rem; }
.prebuilt-component-meta small { color: var(--green); font-weight: 700; font-size: .78rem; }
.prebuilt-component-meta small.out { color: var(--red); }

@media (max-width: 920px) {
 .pb-grid { grid-template-columns: 1fr; }
 .pb-foot, .pb-detail-row { grid-template-columns: 1fr; }
 .pb-foot { align-items: stretch; flex-direction: column; }
 .pb-actions, .pb-detail-actions { justify-content: stretch; }
 .pb-actions .btn, .pb-detail-actions .btn { flex: 1; }
 .pb-detail-meta { white-space: normal; }
 .prebuilt-page { grid-template-columns: 1fr; }
 .prebuilt-summary { position: static; }
 .prebuilt-component { grid-template-columns: 64px minmax(0, 1fr); }
 .prebuilt-component-meta { grid-column: 2; text-align: left; }
}

/* ════════════════════════════════════════════════════════════════
  Surcouche « Cupertino » — applique fidèlement le style Apple
  par-dessus le système existant (classes inchangées).
  ════════════════════════════════════════════════════════════════ */

/* Apple = canvas blanc net : on masque le circuit décoratif de fond */
#bgfx { display: none !important; }

/* Aucun dégradé de texte : headlines à l'encre, logo en Action Blue */
.grad {
 background: none !important; -webkit-text-fill-color: var(--text); color: var(--text);
}
.logo em { background: none !important; -webkit-text-fill-color: var(--accent); color: var(--accent); }

/* Typo : « Apple tight » + poids 600, body 17px / 1.47 */
h1, h2, h3, h4 { font-weight: 600; letter-spacing: -0.022em; }
.section-head h2, .catalog-toolbar h1, .product-page-info h1 { letter-spacing: -0.028em; }
.product-page-info .desc, .perk p, .pb-tag { line-height: 1.47; }

/* Bandeau d'annonce : parchemin + encre (plus de barre dégradée) */
.announce { background: var(--bg-soft); color: var(--text); font-weight: 400; border-bottom: 1px solid var(--border); }
.announce strong { color: var(--accent); font-weight: 600; }
.announce-ico { color: var(--accent); }

/* Boutons : pilule plate, press = scale(0.95), zéro ombre, zéro lift */
.btn { box-shadow: none !important; transition: transform .12s ease, background .2s, color .2s, border-color .2s; }
.btn:hover { transform: none; box-shadow: none !important; }
.btn:active { transform: scale(0.95); }
.btn-primary { background: var(--accent); color: #fff; }
.btn-primary:hover { background: var(--accent-soft); }
.btn-ghost { background: transparent; border: 1px solid var(--accent); color: var(--accent); }
.btn-ghost:hover { background: var(--accent-wash); color: var(--accent); border-color: var(--accent); }
.add-btn:hover { transform: none; }
.add-btn:active { transform: scale(0.92); }

/* Cartes : plates, hairline, pas d'ombre ni de lévitation (rythme par la surface) */
.product-card, .cat-card, .pb-card, .perk, .kpi-card, .panel, .order-card,
.review-card, .specs-card, .filters, .store-utility-card {
 box-shadow: none !important;
}
.product-card:hover, .cat-card:hover, .pb-card:hover, .perk:hover {
 transform: none !important; box-shadow: none !important; border-color: var(--border-strong);
}
.product-card { border-radius: var(--radius); }
.product-card:hover .pimg, .product-card:hover .product-visual svg { transform: none; }

/* Visuel produit : la SEULE ombre du système, sous le rendu produit */
.product-visual, .product-page-visual { background: var(--bg-soft); }
.product-page-visual .pimg { filter: drop-shadow(var(--shadow-product)); }

/* Bannière promo : tuile anthracite (le contraste de surface = la rupture) */
.promo-banner { background: var(--tile-dark); color: #fff; box-shadow: none; border: none; }
.promo-banner::after { display: none; }
.promo-banner h3 { color: #fff; }
.promo-banner p { color: var(--border-strong); }
.promo-banner code { background: rgba(255,255,255,0.16); color: #fff; }
.promo-banner .btn-primary { background: var(--accent); color: #fff; }

/* Animations zoom : on retire le glow/dégradé (Apple = sobre), accent unique */
/* Liens & focus : Action Blue partout, anneau de focus net */
.section-head a, .nav-menu-all, .footer-grid a:hover, .footer-bottom a, .auth-hint a { color: var(--accent); }
:focus-visible { outline: 2px solid var(--accent-soft); outline-offset: 2px; }

/* Header : verre dépoli neutre (sub-nav Apple), s'adapte au thème */
.header { background: var(--header-bg); border-bottom: 1px solid var(--border); }
.nav a.active { background: var(--accent-wash); color: var(--accent); }
.icon-btn:hover { color: var(--accent); border-color: var(--border-strong); transform: none; }

/* Tuiles de section : alternance parchemin pour le rythme Apple */
/* ════════════════════════════════════════════════════════════════
  Thème sombre — surcharge des variables (activé via data-theme="dark")
  ════════════════════════════════════════════════════════════════ */
:root[data-theme="dark"] {
 /* ── Variante CRÉPUSCULE : sunset sur ciel de dusk (plum profond) ── */
 --bg: #0a0a0b;
 --bg-soft: #101012;
 --surface: #161618;
 --surface-2: #1e1e21;
 --header-bg: rgba(12, 12, 13, 0.78);
 --hero-base: radial-gradient(120% 130% at 80% -10%, #1c1c20 0%, #0a0a0b 58%);
 --site-glow-a: rgba(255, 255, 255, 0.06);  /* halo orange */
 --site-glow-b: rgba(255, 255, 255, 0.04);  /* halo corail */
 --tile-dark: #000000;
 --border: rgba(255, 255, 255, 0.11);
 --border-strong: rgba(255, 255, 255, 0.20);
 --text: #f4f4f5;
 --text-dim: #9b9ba1;
 --text-faint: #6c6c72;
 --accent: #f4f4f5;      /* orange sunset (plus lumineux sur sombre) */
 --accent-soft: #d6d6da;
 --accent-ink: #f4f4f5;    /* variante texte sur fond sombre */
 --accent-2: #b8b8bf;     /* corail secondaire */
 --accent-on-dark: #f4f4f5;
 --gradient: #f4f4f5;
 --accent-wash: rgba(255, 255, 255, 0.08);
 --accent-wash-strong: rgba(255, 255, 255, 0.14);
 --on-primary: #0a0a0b;    /* encre chaude sur bouton orange → contraste */
 --green: #4cc98a;
 --green-soft: #4ade80;
 --red: #e08585;
 --amber: #fbbf24;
 --shadow-lg: 0 24px 60px -24px rgba(0, 0, 0, 0.8);
 --shadow-accent: 0 10px 34px -14px rgba(0, 0, 0, 0.55);
 --shadow-product: rgba(0, 0, 0, 0.6) 0 10px 44px 2px;
}
:root[data-theme="dark"] body { background: var(--bg); color: var(--text); }

/* Transition douce lors du basculement de thème (classe ajoutée ~0,45 s par JS).
  Limitée à ce court instant → aucun coût sur les survols/animations habituels.
  Respecte « prefers-reduced-motion » (la classe n'est alors jamais ajoutée). */
/* Bascule de thème — cross-fade composité GPU (API View Transitions, Chrome/Edge).
  Toute la page est capturée et fondue en une seule couche → parfaitement fluide. */
::view-transition-old(root),
::view-transition-new(root) {
 animation-duration: 0.35s;
 animation-timing-function: ease;
}
/* Repli pour les navigateurs sans View Transitions (Firefox/Safari anciens). */
.theme-anim, .theme-anim *:not(canvas) {
 transition: background-color 0.28s ease, color 0.28s ease, border-color 0.28s ease !important;
}
/* Petit clin d'œil : l'icône soleil/lune pivote au changement. */
#themeBtn svg { transition: transform 0.45s ease; }
#themeBtn:active svg { transform: rotate(40deg); }
:root[data-theme="dark"] .badge.promo { color: var(--text); }
:root[data-theme="dark"] .badge.top { color: var(--text-dim); }
:root[data-theme="dark"] .badge.new { color: var(--text-dim); }
/* Compteur de résultats : --text-faint est trop sombre sur fond noir → on l'éclaircit */
:root[data-theme="dark"] .catalog-toolbar .count { color: var(--text-dim); }

/* Bouton thème : afficher l'icône pertinente selon le mode courant */
#themeBtn .theme-ico-moon { display: none; }
#themeBtn .theme-ico-sun { display: block; }
:root[data-theme="dark"] #themeBtn .theme-ico-sun { display: none; }
:root[data-theme="dark"] #themeBtn .theme-ico-moon { display: block; }

/* ════════════════════════════════════════════════════════════════
  Comparateur — surbrillance des meilleures valeurs + perf
  ════════════════════════════════════════════════════════════════ */
.cmp-table td.cmp-best {
 background: var(--accent-wash);
 color: var(--accent-ink);
 font-weight: 600;
}
.cmp-tag { color: var(--amber); margin-left: 2px; }
.cmp-best { background: var(--accent-wash); border-radius: 6px; }

.perf-pill, .usage-word {
 display: inline-block;
 padding: 2px 10px;
 border-radius: 999px;
 font-size: 0.78rem;
 font-weight: 600;
 white-space: nowrap;
}
.perf-pill.exc, .usage-word.exc { background: rgba(29, 158, 87, 0.16); color: var(--green); }
.perf-pill.good, .usage-word.good { background: var(--accent-wash); color: var(--accent-ink); }
.perf-pill.ok, .usage-word.ok { background: rgba(178, 80, 0, 0.14); color: var(--amber); }
.perf-pill.mid, .usage-word.mid { background: rgba(110, 110, 115, 0.16); color: var(--text-dim); }
.perf-pill.low, .usage-word.low { background: rgba(215, 0, 21, 0.12); color: var(--red); }

/* ════════════════════════════════════════════════════════════════
  Configurateur — score par usage + profils rapides
  ════════════════════════════════════════════════════════════════ */
.presets {
 display: flex;
 flex-wrap: wrap;
 gap: 8px;
 align-items: center;
 margin-bottom: 22px;
}
.presets-label { font-weight: 600; color: var(--text-dim); margin-right: 4px; font-size: 0.9rem; }
.preset-btn {
 border: 1px solid var(--border-strong);
 background: var(--surface);
 color: var(--text);
 padding: 8px 14px;
 border-radius: 999px;
 font: inherit;
 font-size: 0.86rem;
 font-weight: 500;
 cursor: pointer;
 transition: background 0.15s, border-color 0.15s, color 0.15s;
}
.preset-btn:hover { border-color: var(--accent); color: var(--accent); }
.preset-btn.preset-reset { color: var(--text-dim); }

.usage-scores { margin: 16px 0; }
.usage-scores h3 { font-size: 0.95rem; margin-bottom: 10px; }

/* Récapitulatif du configurateur : sections repliables (l'essentiel — total,
   alertes, bouton — reste visible, les analyses se déplient à la demande). */
.sum-details {
 border: 1px solid var(--border);
 border-radius: 12px;
 margin: 10px 0 0;
 background: var(--surface);
}
.sum-details summary {
 cursor: pointer;
 padding: 10px 14px;
 font-weight: 600;
 font-size: 0.88rem;
 list-style: none;
 display: flex;
 justify-content: space-between;
 align-items: center;
 gap: 10px;
 user-select: none;
}
.sum-details summary::-webkit-details-marker { display: none; }
.sum-details summary::after {
 content: "⌄";
 color: var(--text-dim);
 flex-shrink: 0;
 transition: transform 0.18s;
}
.sum-details[open] summary::after { transform: rotate(180deg); }
.sum-details-body { padding: 0 14px 12px; }
.sum-details-body .usage-scores { margin: 6px 0 12px; }
.sum-details-body .fps-block { margin: 6px 0 0; }
.sum-details-body .compat { margin-bottom: 10px; }
.usage-row {
 display: grid;
 grid-template-columns: 110px 1fr auto;
 gap: 10px;
 align-items: center;
 margin-bottom: 8px;
 font-size: 0.85rem;
}
.usage-name { color: var(--text-dim); }
.score-track {
 height: 7px;
 background: var(--surface-2);
 border-radius: 999px;
 overflow: hidden;
}
.score-track b {
 display: block;
 height: 100%;
 border-radius: 999px;
 background: var(--accent);
}
.score-track b.exc { background: var(--green); }
.score-track b.good { background: var(--accent); }
.score-track b.ok { background: var(--amber); }
.score-track b.mid { background: var(--text-faint); }
.score-track b.low { background: var(--red); }

/* FPS estimés par jeu (récap configurateur + fiche GPU) */
.fps-block { margin: 16px 0; }
.fps-block h3 { font-size: 0.95rem; margin-bottom: 10px; }
.fps-table { width: 100%; border-collapse: collapse; font-size: 0.85rem; }
.fps-table th {
 text-align: left;
 color: var(--text-dim);
 font-weight: 600;
 padding: 4px 6px;
 border-bottom: 1px solid var(--border);
}
.fps-table th + th, .fps-table td + td { text-align: right; }
.fps-table td { padding: 5px 6px; border-bottom: 1px solid var(--border); }
.fps-table tr:last-child td { border-bottom: 0; }
.fps-val {
 display: inline-block;
 padding: 1px 8px;
 border-radius: 999px;
 font-weight: 600;
 font-variant-numeric: tabular-nums;
 white-space: nowrap;
}
.fps-val.exc { background: rgba(29, 158, 87, 0.16); color: var(--green); }
.fps-val.good { background: var(--accent-wash); color: var(--accent-ink); }
.fps-val.ok { background: rgba(178, 80, 0, 0.14); color: var(--amber); }
.fps-val.low { background: rgba(215, 0, 21, 0.12); color: var(--red); }
.fps-note { font-size: 0.78rem; color: var(--text-faint); margin-top: 8px; }

/* Upgrade advisor */
.upg-form {
 position: relative;
 display: grid;
 grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
 gap: 18px;
 align-items: end;
 margin-bottom: 24px;
 overflow: visible;
}
.upg-form > label { display: flex; flex-direction: column; gap: 8px; font-weight: 600; font-size: 0.9rem; }
.upg-form output { font-weight: 700; color: var(--accent-ink); }
.upg-res { display: flex; gap: 8px; flex-wrap: wrap; }
.upg-res .preset-btn.on { border-color: var(--accent); color: var(--accent-ink); background: var(--accent-wash); }

.upg-current-details {
 margin-bottom: 24px;
 overflow: visible;
}
.upg-current-details > summary {
 display: flex;
 align-items: center;
 justify-content: space-between;
 gap: 16px;
 padding-bottom: 18px;
 border-bottom: 1px solid var(--border);
 cursor: pointer;
 list-style: none;
}
.upg-current-details > summary::-webkit-details-marker { display: none; }
.upg-current-details > summary span {
 font-family: var(--font-display);
 font-size: 1.05rem;
 font-weight: 650;
}
.upg-current-details > summary small {
 color: var(--text-faint);
 font-size: 0.76rem;
 font-weight: 500;
}
.upg-current-details > summary::after {
 content: "⌄";
 color: var(--text-dim);
 font-size: 1rem;
 transition: transform .18s ease;
}
.upg-current-details[open] > summary::after { transform: rotate(180deg); }
.upg-config-grid {
 display: grid;
 grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
 gap: 18px;
 padding-top: 20px;
}
.upg-config-grid .upg-picker-popover { width: 100%; }
.upg-config-note {
 margin-top: 18px;
 padding-top: 14px;
 border-top: 1px solid var(--border);
 color: var(--text-faint);
 font-size: 0.78rem;
 line-height: 1.55;
}

.upg-field {
 display: flex;
 flex-direction: column;
 gap: 8px;
 min-width: 0;
}
.upg-field-label {
 display: flex;
 align-items: baseline;
 justify-content: space-between;
 gap: 12px;
 color: var(--text);
 font-size: 0.9rem;
 font-weight: 700;
}
.upg-field-label small {
 color: var(--text-faint);
 font-size: 0.68rem;
 font-weight: 500;
 white-space: nowrap;
}
.upg-picker { position: relative; min-width: 0; }
.upg-picker.is-open { z-index: 90; }
.upg-picker-trigger {
 width: 100%;
 min-height: 52px;
 display: flex;
 align-items: center;
 justify-content: space-between;
 gap: 14px;
 padding: 10px 14px 10px 16px;
 border: 1px solid var(--border-strong);
 border-radius: 12px;
 background: var(--surface);
 color: var(--text);
 font: inherit;
 font-size: 0.94rem;
 font-weight: 500;
 text-align: left;
 cursor: pointer;
 box-shadow: var(--shadow-xs);
 transition: border-color .16s ease, box-shadow .16s ease;
}
.upg-picker-trigger span {
 overflow: hidden;
 text-overflow: ellipsis;
 white-space: nowrap;
}
.upg-picker-trigger > svg {
 width: 17px;
 height: 17px;
 flex: none;
 fill: none;
 stroke: var(--text-dim);
 stroke-width: 1.8;
 stroke-linecap: round;
 stroke-linejoin: round;
 transition: transform .18s ease;
}
.upg-picker-trigger:hover { border-color: var(--accent); }
.upg-picker-trigger:focus-visible {
 outline: none;
 border-color: var(--accent);
 box-shadow: 0 0 0 3px var(--accent-wash-strong);
}
.upg-picker-trigger[aria-expanded="true"] {
 border-color: var(--accent);
 box-shadow: 0 0 0 3px var(--accent-wash-strong);
}
.upg-picker-trigger[aria-expanded="true"] > svg { transform: rotate(180deg); }
.upg-picker-popover {
 position: absolute;
 top: calc(100% + 8px);
 left: 0;
 width: min(480px, calc(100vw - 40px));
 min-width: 100%;
 padding: 8px;
 border: 1px solid var(--border-strong);
 border-radius: 16px;
 background: var(--surface);
 box-shadow: var(--shadow-lg);
}
.upg-field:nth-child(2) .upg-picker-popover {
 right: 0;
 left: auto;
}
.upg-picker-popover[hidden] { display: none; }
.upg-picker-search {
 display: flex;
 flex-direction: row;
 align-items: center;
 gap: 10px;
 min-height: 46px;
 padding: 0 12px;
 border: 1px solid var(--border);
 border-radius: 10px;
 background: var(--surface-2);
 color: var(--text-faint);
}
.upg-picker-search:focus-within {
 border-color: var(--accent);
 box-shadow: 0 0 0 3px var(--accent-wash);
}
.upg-picker-search svg {
 width: 17px;
 height: 17px;
 flex: none;
 fill: none;
 stroke: currentColor;
 stroke-width: 2;
 stroke-linecap: round;
}
.upg-picker-search input {
 width: 100%;
 min-height: 42px;
 padding: 0;
 border: 0;
 outline: 0;
 background: transparent;
 color: var(--text);
 font: inherit;
 font-size: 0.9rem;
}
.upg-picker-list {
 max-height: min(390px, 58vh);
 margin-top: 7px;
 overflow-y: auto;
 overscroll-behavior: contain;
 scrollbar-gutter: stable;
}
.upg-picker-group + .upg-picker-group { margin-top: 6px; }
.upg-picker-group-title {
 position: sticky;
 top: 0;
 z-index: 1;
 display: block;
 padding: 9px 10px 7px;
 background: color-mix(in srgb, var(--surface) 94%, transparent);
 color: var(--text-faint);
 font-size: 0.64rem;
 font-weight: 700;
 letter-spacing: 0.1em;
 text-transform: uppercase;
 backdrop-filter: blur(8px);
}
.upg-picker-option {
 width: 100%;
 min-height: 50px;
 display: flex;
 align-items: center;
 justify-content: space-between;
 gap: 14px;
 padding: 8px 10px;
 border: 0;
 border-radius: 9px;
 background: transparent;
 color: var(--text);
 font: inherit;
 text-align: left;
 cursor: pointer;
}
.upg-picker-option:hover,
.upg-picker-option:focus-visible {
 outline: none;
 background: var(--surface-2);
}
.upg-picker-option[aria-selected="true"] {
 background: var(--accent-wash);
 color: var(--accent-ink);
}
.upg-picker-option > span { min-width: 0; }
.upg-picker-option strong {
 display: block;
 overflow: hidden;
 font-size: 0.86rem;
 font-weight: 650;
 line-height: 1.3;
 text-overflow: ellipsis;
 white-space: nowrap;
}
.upg-picker-option small {
 display: block;
 margin-top: 2px;
 color: var(--text-faint);
 font-size: 0.7rem;
 font-weight: 500;
}
.upg-picker-option > svg {
 width: 16px;
 height: 16px;
 flex: none;
 fill: none;
 stroke: currentColor;
 stroke-width: 2;
 stroke-linecap: round;
 stroke-linejoin: round;
 opacity: 0;
}
.upg-picker-option[aria-selected="true"] > svg { opacity: 1; }
.upg-picker-empty {
 padding: 24px 12px;
 color: var(--text-faint);
 font-size: 0.82rem;
 text-align: center;
}
#upgResults { display: grid; gap: 18px; }
.upg-option-head {
 display: flex;
 justify-content: space-between;
 align-items: center;
 gap: 12px;
 flex-wrap: wrap;
 margin-bottom: 12px;
}
.upg-option-head h3 { font-size: 1.02rem; }
.upg-parts { list-style: none; margin: 0 0 10px; padding: 0; }
.upg-parts li {
 display: flex;
 justify-content: space-between;
 gap: 12px;
 padding: 6px 0;
 border-bottom: 1px solid var(--border);
 font-size: 0.9rem;
}
.upg-parts li span { white-space: nowrap; color: var(--text-dim); }
.upg-total {
 display: flex;
 justify-content: space-between;
 font-size: 1rem;
 margin: 6px 0 12px;
}
.upg-option .fps-table { margin-bottom: 12px; }

/* Upgrade advisor — diagnostic une ligne + cartes de scénario */
.upg-diag {
 display: flex;
 flex-wrap: wrap;
 align-items: baseline;
 gap: 6px 24px;
}
.upg-diag-fps { display: flex; align-items: baseline; gap: 8px; }
.upg-diag-fps strong {
 font: 700 1.6rem var(--font-display);
 letter-spacing: -.03em;
 line-height: 1.1;
}
.upg-diag-fps small { color: var(--text-faint); font-size: .68rem; }
.upg-diag > p { margin: 0; color: var(--text); font-size: 1rem; line-height: 1.5; }
.upg-diag > p strong { font-weight: 750; }
.upg-badge {
 font-size: .62rem;
 font-weight: 700;
 letter-spacing: .05em;
 text-transform: uppercase;
 padding: 3px 9px;
 border: 1px solid var(--border);
 border-radius: 99px;
 color: var(--text-dim);
 white-space: nowrap;
}
.upg-badge.acc {
 border-color: var(--accent);
 color: var(--accent-ink);
 background: var(--accent-wash);
}
.upg-why { margin: 0 0 12px; font-size: .87rem; color: var(--text-dim); line-height: 1.5; }

/* Upgrade advisor v2 — banc de diagnostic VoltCore */
.sr-only {
 position: absolute !important;
 width: 1px !important;
 height: 1px !important;
 padding: 0 !important;
 margin: -1px !important;
 overflow: hidden !important;
 clip: rect(0, 0, 0, 0) !important;
 white-space: nowrap !important;
 border: 0 !important;
}

.upg-page-head {
 position: relative;
 display: grid;
 grid-template-columns: minmax(0, 1fr) auto;
 align-items: end;
 gap: clamp(24px, 5vw, 64px);
 padding: 30px 0 24px;
 margin-bottom: 24px;
 border-bottom: 1px solid var(--border);
}
.upg-page-head::after {
 content: "";
 position: absolute;
 left: 0;
 bottom: -1px;
 width: 88px;
 height: 2px;
 background: var(--text);
}
.upg-kicker,
.upg-gain > span {
 font-size: .66rem;
 font-weight: 700;
 letter-spacing: .06em;
 text-transform: uppercase;
 color: var(--text-faint);
}
.upg-kicker {
 display: inline-flex;
 align-items: center;
 gap: 9px;
 margin-bottom: 18px;
}
.upg-kicker i {
 width: 7px;
 height: 7px;
 border-radius: 50%;
 background: var(--green);
 box-shadow: 0 0 0 5px color-mix(in srgb, var(--green) 13%, transparent);
}
.upg-page-head h1 {
 max-width: 720px;
 font-size: clamp(2.25rem, 4.3vw, 4rem);
 line-height: .96;
 letter-spacing: -.055em;
 text-wrap: balance;
}
.upg-page-head > p {
 max-width: 310px;
 padding-bottom: 4px;
 color: var(--text-dim);
 font-size: .84rem;
 line-height: 1.55;
 text-align: right;
}

.upg-workbench {
 display: grid;
 grid-template-columns: 1fr;
 gap: 30px;
 align-items: start;
}
.upg-controls {
 position: static;
 display: grid;
 gap: 12px;
 min-width: 0;
}
.upg-form {
 display: block;
 margin: 0;
 padding: clamp(22px, 3vw, 30px);
 border-color: var(--border-strong);
 border-radius: 24px;
 overflow: visible;
}
.upg-panel-head,
.upg-results-intro,
.upg-scenarios-head {
 display: flex;
 align-items: flex-start;
 justify-content: space-between;
 gap: 18px;
}
.upg-panel-head {
 margin-bottom: 20px;
 padding-bottom: 16px;
 border-bottom: 1px solid var(--border);
}
.upg-panel-head > div,
.upg-results-intro > div,
.upg-scenarios-head > div { display: grid; gap: 4px; }
.upg-panel-head h2,
.upg-results-intro h2,
.upg-scenarios-head h2 {
 margin: 0;
 letter-spacing: -.035em;
}
.upg-panel-head h2 { font-size: 1.22rem; }
.upg-panel-head > small {
 padding: 5px 8px;
 border: 1px solid var(--border);
 border-radius: 999px;
 color: var(--text-faint);
 font: 650 .62rem var(--font-mono);
 letter-spacing: .06em;
 text-transform: uppercase;
}
.upg-core-grid {
 display: grid;
 grid-template-columns: repeat(2, minmax(0, 1fr));
 gap: 16px;
}
.upg-core-grid .upg-field { gap: 9px; }
.upg-core-grid .upg-field-label { font-size: .78rem; }
.upg-core-grid .upg-field-label small { font-size: .62rem; }
.upg-core-grid .upg-picker-trigger {
 min-height: 56px;
 border-color: transparent;
 border-radius: 14px;
 background: var(--surface-2);
 box-shadow: none;
 font-size: .88rem;
 font-weight: 650;
}
.upg-core-grid .upg-picker-trigger:hover { border-color: var(--border-strong); }
.upg-core-grid > .upg-field:nth-child(2) .upg-picker-popover {
 right: 0;
 left: auto;
}
.upg-goals-grid {
 display: grid;
 grid-template-columns: repeat(2, minmax(0, 1fr));
 gap: 16px;
 margin-top: 16px;
}
.upg-form .upg-budget {
 display: grid;
 gap: 11px;
 margin: 0;
 padding: 14px 16px 11px;
 border: 1px solid transparent;
 border-radius: 14px;
 background: var(--surface-2);
}
.upg-budget > span,
.upg-target > span {
 display: flex;
 align-items: baseline;
 justify-content: space-between;
 gap: 16px;
 color: var(--text);
 font-size: .8rem;
 font-weight: 700;
}
.upg-budget output {
 color: var(--text);
 font: 700 1rem var(--font-mono);
 font-variant-numeric: tabular-nums;
}
.upg-budget input[type="range"] {
 --upg-budget-pct: 21.4%;
 width: 100%;
 height: 28px;
 appearance: none;
 -webkit-appearance: none;
 cursor: pointer;
 background: transparent;
}
.upg-budget input[type="range"]::-webkit-slider-runnable-track {
 height: 5px;
 border-radius: 99px;
 background: linear-gradient(90deg, var(--text) var(--upg-budget-pct), var(--surface-2) var(--upg-budget-pct));
}
.upg-budget input[type="range"]::-webkit-slider-thumb {
 width: 20px;
 height: 20px;
 margin-top: -7.5px;
 appearance: none;
 -webkit-appearance: none;
 border: 5px solid var(--text);
 border-radius: 50%;
 background: var(--surface);
 box-shadow: 0 0 0 2px var(--surface);
}
.upg-budget input[type="range"]::-moz-range-track {
 height: 5px;
 border-radius: 99px;
 background: var(--surface-2);
}
.upg-budget input[type="range"]::-moz-range-progress {
 height: 5px;
 border-radius: 99px;
 background: var(--text);
}
.upg-budget input[type="range"]::-moz-range-thumb {
 width: 12px;
 height: 12px;
 border: 4px solid var(--text);
 border-radius: 50%;
 background: var(--surface);
}
.upg-budget input[type="range"]:focus-visible { outline-offset: 3px; }
.upg-budget > small {
 display: flex;
 justify-content: space-between;
 color: var(--text-faint);
 font: 550 .6rem var(--font-mono);
}
.upg-target {
 display: grid;
 gap: 10px;
 margin: 0;
 padding: 14px 16px 11px;
 border: 1px solid transparent;
 border-radius: 14px;
 background: var(--surface-2);
}
.upg-priority-select {
 width: 100%;
 min-height: 52px;
 padding: 10px 40px 10px 16px;
 border: 1px solid var(--border-strong);
 border-radius: 12px;
 background: var(--surface);
 color: var(--text);
 font: inherit;
 font-size: .94rem;
 font-weight: 500;
 cursor: pointer;
 box-shadow: var(--shadow-xs);
 appearance: none;
 -webkit-appearance: none;
 background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='m4 6 4 4 4-4' fill='none' stroke='%23888' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
 background-repeat: no-repeat;
 background-position: right 14px center;
 background-size: 17px;
 transition: border-color .16s ease, box-shadow .16s ease;
}
.upg-priority-select:hover { border-color: var(--accent); }
.upg-current-details {
 margin: 0;
 padding: 0;
 border-radius: 20px;
 overflow: visible;
}
.upg-current-details > summary {
 position: relative;
 min-height: 64px;
 padding: 16px 48px 16px 20px;
 border: 0;
}
.upg-current-details > summary::after { position: absolute; right: 20px; }
.upg-current-details > summary > span {
 display: grid;
 gap: 3px;
 font-size: .9rem;
}
.upg-current-details > summary > span small {
 color: var(--text-faint);
 font: 700 .56rem var(--font-mono);
 letter-spacing: .1em;
 text-transform: uppercase;
}
.upg-current-details > summary > small { max-width: 130px; text-align: right; }
.upg-current-details[open] { padding-bottom: 20px; }
.upg-current-details[open] > summary { border-bottom: 1px solid var(--border); }
.upg-config-grid {
 grid-template-columns: repeat(3, minmax(0, 1fr));
 gap: 15px;
 padding: 20px 20px 0;
}
.upg-config-grid .upg-field-label { font-size: .76rem; }
.upg-config-grid .upg-picker-trigger { min-height: 50px; font-size: .82rem; }
.upg-config-note { margin: 18px 20px 0; font-size: .7rem; }

.upg-results-column { min-width: 0; }
#upgResults { display: grid; gap: 20px; }

.upg-scenarios { display: grid; gap: 18px; }
.upg-budget-note {
 margin: -6px 0 0;
 color: var(--text-dim);
 font-size: .82rem;
 line-height: 1.5;
}
.upg-scenarios-head { align-items: end; }
.upg-scenarios-head h2 { font-size: clamp(1.3rem, 2vw, 1.65rem); }
.upg-options-grid {
 display: grid;
 grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
 gap: 16px;
}
.upg-option {
 position: relative;
 display: flex;
 flex-direction: column;
 min-width: 0;
 padding: clamp(19px, 2vw, 25px);
 border-radius: 22px;
 overflow: hidden;
}
.upg-option.upg-reco {
 border-color: var(--text);
 box-shadow: 0 14px 38px -28px rgba(0, 0, 0, .25);
}
.upg-option-head {
 align-items: flex-start;
 margin-bottom: 18px;
}
.upg-option-head h3 { font-size: clamp(.98rem, 1.5vw, 1.16rem); line-height: 1.22; }
.upg-badge { padding: 4px 8px; font-size: .6rem; letter-spacing: .06em; }
.upg-gain {
 position: relative;
 display: grid;
 grid-template-columns: 1fr auto;
 align-items: end;
 gap: 4px 12px;
 padding: 15px 16px;
 margin-bottom: 14px;
 border-radius: 15px;
 background: var(--surface-2);
}
.upg-gain > span { align-self: start; font-size: .62rem; }
.upg-gain strong {
 grid-row: 1 / 3;
 grid-column: 2;
 color: var(--text);
 font: 750 clamp(2rem, 4vw, 3rem) var(--font-display);
 line-height: .8;
 letter-spacing: -.06em;
}
.upg-gain strong small { font-size: .44em; }
.upg-gain p { color: var(--text-dim); font: 650 .72rem var(--font-mono); }
.upg-gain p i { padding: 0 4px; color: var(--text-faint); font-style: normal; }
.upg-why { min-height: 2.4em; margin-bottom: 15px; font-size: .78rem; }
.upg-parts { margin-bottom: 13px; }
.upg-parts li { align-items: center; padding: 8px 0; font-size: .76rem; }
.upg-part-main { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; min-width: 0; flex: 1; }
.upg-part-main a { color: var(--text-dim); line-height: 1.35; }
.upg-part-main a:hover { color: var(--text); text-decoration: underline; text-underline-offset: 3px; }
.upg-parts li span { font: 650 .7rem var(--font-mono); }
.upg-part-detail {
 flex: 0 0 auto;
 text-decoration: none !important;
 white-space: nowrap;
 font-size: .68rem;
 /* padding .btn-sm (9px 18px) calibré pour du .86rem : trop large ici */
 padding: 6px 12px;
}
.upg-game-details {
 margin: 2px 0 16px;
 border-block: 1px solid var(--border);
}
.upg-game-details summary {
 display: flex;
 align-items: center;
 justify-content: space-between;
 gap: 12px;
 min-height: 46px;
 color: var(--text-dim);
 cursor: pointer;
 font-size: .72rem;
 font-weight: 700;
 list-style: none;
}
.upg-game-details summary::-webkit-details-marker { display: none; }
.upg-game-details summary::after { content: "+"; color: var(--text-faint); font: 500 1rem var(--font-mono); }
.upg-game-details[open] summary::after { content: "−"; }
.upg-game-details summary span { margin-left: auto; color: var(--text-faint); font: 550 .58rem var(--font-mono); }
.upg-game-details .fps-table { margin-bottom: 10px; font-size: .7rem; }
.upg-game-details .fps-table th,
.upg-game-details .fps-table td { padding: 6px 4px; }
.upg-option > .btn { min-height: 48px; margin-top: auto; font-size: .76rem; }
.upg-empty { border: 1px solid var(--border); border-radius: 22px; background: var(--surface); }
.upg-empty > span { color: var(--text-faint); font: 700 .6rem var(--font-mono); letter-spacing: .1em; text-transform: uppercase; }

@media (max-width: 1050px) {
 .upg-config-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 760px) {
 .upg-page-head { grid-template-columns: 1fr; align-items: start; }
 .upg-page-head h1 { font-size: clamp(2.3rem, 11vw, 3.5rem); }
 .upg-page-head h1 br { display: none; }
 .upg-page-head > p { max-width: none; text-align: left; }
 .upg-core-grid,
 .upg-goals-grid,
 .upg-config-grid { grid-template-columns: 1fr; }
 .upg-current-details > summary > small { display: none; }
 .upg-results-intro,
 .upg-scenarios-head { align-items: flex-start; flex-direction: column; gap: 7px; }
 .upg-results-intro > small,
 .upg-scenarios-head > small { max-width: none; text-align: left; }
 .upg-diag-head { grid-template-columns: auto minmax(0, 1fr); }
 .upg-diag-fps { grid-column: 1 / -1; align-items: flex-start; padding-top: 16px; border-top: 1px solid var(--border); }
 .upg-diag-body { grid-template-columns: 1fr; }
 .upg-options-grid { grid-template-columns: 1fr; }
 .upg-option.upg-reco { grid-column: auto; }
 .upg-option-head { flex-direction: column; }
 .upg-parts li { align-items: stretch; flex-direction: column; }
 .upg-part-detail { align-self: flex-start; }
 .upg-badges { justify-content: flex-start; }
 .upg-stats { grid-template-columns: 1fr; }
 .upg-stat { flex-direction: row; align-items: center; justify-content: space-between; }
 .upg-stat + .upg-stat { border-left: 0; border-top: 1px solid var(--border); }
 .upg-core-grid .upg-picker-popover,
 .upg-config-grid .upg-picker-popover {
  position: fixed;
  inset: auto 12px 12px;
  width: auto;
  min-width: 0;
  max-height: min(620px, 76vh);
 }
 .upg-core-grid > .upg-field:nth-child(2) .upg-picker-popover { right: 12px; left: 12px; }
 .upg-picker-list { max-height: min(460px, 58vh); }
}
@media (prefers-reduced-motion: reduce) {
 .upg-picker-trigger > svg,
 .upg-current-details > summary::after { transition: none; }
}

/* Guides d'achat */
.guides-grid {
 display: grid;
 grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
 gap: 18px;
}
.guide-card { display: flex; flex-direction: column; gap: 10px; text-decoration: none; color: inherit; }
.guide-card h3 { font-size: 1.05rem; }
.guide-card p { color: var(--text-dim); font-size: 0.88rem; flex: 1; }
.guide-card-more { color: var(--accent-ink); font-weight: 600; font-size: 0.88rem; }
.guide-card:hover { border-color: var(--accent); }
.guide-updated { color: var(--text-faint); font-size: 0.85rem; margin: 6px 0 18px; }
.guide-items { display: grid; gap: 14px; margin-bottom: 18px; }
.guide-item {
 display: grid;
 grid-template-columns: auto 96px 1fr auto;
 gap: 16px;
 align-items: center;
 position: relative;
}
.guide-rank {
 width: 34px;
 height: 34px;
 border-radius: 50%;
 background: var(--surface-2);
 display: grid;
 place-items: center;
 font-weight: 700;
}
.guide-item:first-child .guide-rank { background: var(--accent); color: var(--bg); }
.guide-item-visual {
 width: 96px;
 height: 96px;
 border-radius: 12px;
 overflow: hidden;
 position: relative;
 background: var(--surface-2);
}
.guide-item-visual svg { position: absolute; inset: 18px; width: auto; height: auto; }
.guide-item-visual .pimg {
 position: absolute;
 inset: 0;
 width: 100%;
 height: 100%;
 object-fit: contain;
 background: #fff;
}
.guide-item-main h3 { font-size: 0.98rem; margin: 2px 0 4px; }
.guide-item-main h3 a { color: inherit; text-decoration: none; }
.guide-item-main h3 a:hover { color: var(--accent-ink); }
.guide-verdict {
 display: inline-block;
 padding: 2px 10px;
 border-radius: 999px;
 font-size: 0.75rem;
 font-weight: 700;
 background: var(--accent-wash);
 color: var(--accent-ink);
}
.guide-item-specs { color: var(--text-dim); font-size: 0.83rem; margin: 4px 0; }
.guide-item-buy { display: flex; flex-direction: column; align-items: flex-end; gap: 6px; }
.guide-total { max-width: 460px; }
@media (max-width: 700px) {
 .guide-item { grid-template-columns: 72px 1fr; }
 .guide-rank { position: absolute; top: 10px; left: 10px; z-index: 1; }
 .guide-item-visual { width: 72px; height: 72px; }
 .guide-item-buy { grid-column: 1 / -1; flex-direction: row; justify-content: space-between; align-items: center; }
}

/* Grille de recommandations (fiche produit) : un peu plus compacte */
.reco-grid { grid-template-columns: repeat(auto-fill, minmax(210px, 1fr)); }

/* ════════════════════════════════════════════════════════════════
  REDESIGN « VOLT — SUNSET »
  Couche signature : chaleur, dégradés coucher de soleil, profondeur douce.
  ════════════════════════════════════════════════════════════════ */

/* Titres serrés et gras */
.section-head h2,
.catalog-toolbar h1, .product-page-info h1 {
 font-family: var(--font-display);
 font-weight: 700;
 letter-spacing: -0.03em;
 line-height: 1.03;
}

/* Monospace réservé aux données chiffrées (prix, stats) — touche technique sobre */
.price, .product-bottom .price, .hero-stat strong, .cmp-table .price, .kpi-value {
 font-family: var(--font-mono);
 letter-spacing: -0.01em;
 font-feature-settings: "tnum" 1;
}
.hero-kicker, .product-brand {
 letter-spacing: 0.04em;
 text-transform: uppercase;
}
.product-brand { font-size: 0.72rem; font-weight: 600; }

/* Atmosphère : double halo sunset diffus, fixé derrière le contenu (pas de grille) */
body::before {
 content: "";
 position: fixed;
 inset: 0;
 z-index: -1;
 pointer-events: none;
 background:
  radial-gradient(55% 45% at 50% -6%, var(--site-glow-a), transparent 72%),
  radial-gradient(50% 45% at 105% 5%, var(--site-glow-b), transparent 72%);
}

/* Boutons : dégradé sunset + halo chaud, lift au survol */
.btn-primary {
 background: var(--gradient);
 color: var(--on-primary);
 font-weight: 700;
 letter-spacing: 0.01em;
 box-shadow: var(--shadow-accent);
}
.btn-primary:hover {
 transform: translateY(-2px);
 filter: brightness(1.05);
 box-shadow: var(--shadow-accent), 0 0 26px -6px var(--accent);
}
.btn-ghost {
 border: 1px solid var(--border-strong);
 background: color-mix(in srgb, var(--surface) 55%, transparent);
}
.btn-ghost:hover { border-color: var(--accent); color: var(--accent-ink); }

/* Cartes produit : surface élevée, halo chaud + lift au survol */
.product-card {
 background: var(--surface);
 border: 1px solid var(--border);
 border-radius: var(--radius);
 transition: transform 0.22s ease, border-color 0.22s ease, box-shadow 0.22s ease;
}
.product-card:hover {
 transform: translateY(-4px);
 border-color: var(--accent-wash-strong);
 box-shadow: var(--shadow-lg), 0 0 0 1px var(--accent-wash-strong);
}
.product-visual { background: var(--surface-2); }
.add-btn {
 background: var(--gradient);
 color: var(--on-primary);
 box-shadow: 0 0 16px -6px var(--accent);
}

/* Badges : pastille douce */
.badge {
 background: color-mix(in srgb, var(--surface) 82%, transparent);
 border: 1px solid var(--border-strong);
 backdrop-filter: blur(6px);
 font-size: 0.64rem;
 letter-spacing: 0.04em;
 padding: 4px 9px;
}

/* En-têtes de section : barre d'accent sunset */
.section-head h2 { position: relative; padding-left: 16px; }
.section-head h2::before {
 content: "";
 position: absolute;
 left: 0; top: 0.12em; bottom: 0.12em;
 width: 4px;
 border-radius: 4px;
 background: var(--gradient);
}

/* Hero : grands rayons + halo chaud sur l'illustration + reveal échelonné */
@keyframes voltReveal { from { opacity: 0; transform: translateY(16px); } to { opacity: 1; transform: none; } }
@media (prefers-reduced-motion: no-preference) {
 .product-card,
 .cat-card,
 .pb-card {
  animation: voltReveal 0.5s cubic-bezier(0.22, 0.61, 0.36, 1) both;
 }
}

/* Nav active + focus champs : accent sunset */
.nav a.active { background: var(--accent-wash); color: var(--accent-ink); }
.nav-sale { color: var(--accent-ink); }
.header-search:focus-within,
input:focus-visible, select:focus-visible, textarea:focus-visible {
 border-color: var(--accent);
 box-shadow: 0 0 0 3px var(--accent-wash-strong);
}

/* ════════════════════════════════════════════════════════════════
  VOID HOME · sobre, monochrome (noir & blanc dominant)
  Restyle propre des wrappers d'accueil — zéro neige, zéro givre.
  ════════════════════════════════════════════════════════════════ */
.void-home { position: relative; overflow: visible; }

.void-hero {
 position: relative;
 display: grid;
 grid-template-columns: 1.05fr 0.95fr;
 align-items: center;
 gap: clamp(28px, 5vw, 64px);
 min-height: min(86vh, 820px);
 padding: clamp(40px, 7vw, 92px) clamp(18px, 3vw, 36px);
 overflow: hidden;
}
.void-field { position: absolute; inset: 0; width: 100%; height: 100%; z-index: 0; opacity: 0.85; pointer-events: none; }
.void-depth { position: absolute; inset: 0; z-index: 0; pointer-events: none; }
.void-depth span { position: absolute; border: 1px solid var(--border); border-radius: 50%; opacity: 0.6; }
.void-depth span:nth-child(1) { inset: 6% 8% auto auto; width: min(42vw, 460px); aspect-ratio: 1; }
.void-depth span:nth-child(2) { inset: auto auto 4% 2%; width: min(34vw, 340px); aspect-ratio: 1; }
.void-depth span:nth-child(3) { inset: 22% auto auto 16%; width: 7px; height: 7px; background: var(--text-faint); border: none; }
.void-depth span:nth-child(4) { inset: auto 24% 28% auto; width: 5px; height: 5px; background: var(--text-faint); border: none; }

.void-copy { position: relative; z-index: 2; max-width: 620px; }
.void-eyebrow {
 display: inline-flex; align-items: center; gap: 8px;
 font-family: var(--font-mono); font-size: 0.72rem; font-weight: 600;
 letter-spacing: 0.18em; text-transform: uppercase; color: var(--text-dim);
 padding: 7px 13px; border: 1px solid var(--border); border-radius: 999px;
 background: var(--surface);
}
.void-hero h1 { margin: 22px 0 16px; font-size: clamp(2.6rem, 6.4vw, 5rem); line-height: 0.96; letter-spacing: -0.04em; color: var(--text); text-wrap: balance; }
.void-hero p { max-width: 460px; margin-bottom: 30px; color: var(--text-dim); font-size: clamp(1rem, 1.3vw, 1.16rem); line-height: 1.62; }
.void-actions { display: flex; gap: 12px; flex-wrap: wrap; }
.void-btn { display: inline-flex; align-items: center; gap: 10px; }
.void-btn b { font-weight: 700; opacity: 0.85; }
.void-readout { display: flex; gap: 36px; margin-top: 40px; flex-wrap: wrap; }
.void-readout strong { display: block; font-family: var(--font-display); font-size: 1.7rem; font-weight: 700; letter-spacing: -0.02em; color: var(--text); }
.void-readout span { font-size: 0.8rem; color: var(--text-faint); }

.void-stage { position: relative; z-index: 1; min-height: min(70vh, 720px); display: grid; place-items: center; }
.void-model { width: 100%; height: 100%; min-height: min(70vh, 720px); }

.void-scroll { position: absolute; left: 50%; bottom: 16px; transform: translateX(-50%); width: 1px; height: 46px; background: linear-gradient(180deg, var(--border-strong), transparent); z-index: 2; }
.void-scroll span { position: absolute; top: 0; left: -2px; width: 5px; height: 5px; border-radius: 50%; background: var(--text-faint); animation: voidScroll 2.4s ease-in-out infinite; }
@keyframes voidScroll { 0% { top: 0; opacity: 0; } 30% { opacity: 1; } 100% { top: 42px; opacity: 0; } }

[data-void-sep] { border-top: 1px solid var(--border); }

.void-orbit-strip { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1px; margin-top: 4px; background: var(--border); border: 1px solid var(--border); border-radius: var(--radius); overflow: hidden; }
.void-orbit-strip article, .void-orbit-card { background: var(--surface); padding: 24px; }
.void-orbit-card { display: block; text-decoration: none; transition: background .18s ease; }
.void-orbit-card:hover { background: var(--surface-2); }
.void-orbit-card:hover strong { color: var(--accent, var(--text)); }
.void-orbit-strip span { font-family: var(--font-mono); font-size: 0.7rem; letter-spacing: 0.14em; text-transform: uppercase; color: var(--text-faint); }
.void-orbit-strip strong { display: block; margin-top: 10px; font-family: var(--font-display); font-weight: 600; font-size: 1.05rem; line-height: 1.3; color: var(--text); }

.void-console { display: flex; align-items: center; justify-content: space-between; gap: 24px; flex-wrap: wrap; padding: clamp(28px, 4vw, 44px) 0; }
.void-console > div span { font-family: var(--font-mono); font-size: 0.7rem; letter-spacing: 0.16em; text-transform: uppercase; color: var(--text-faint); }
.void-console h2 { margin-top: 8px; font-size: clamp(1.6rem, 3vw, 2.4rem); letter-spacing: -0.03em; color: var(--text); }
.void-console-lines { display: flex; gap: 8px; align-items: flex-end; height: 60px; }
.void-console-lines i { width: 6px; background: var(--text-faint); border-radius: 99px; opacity: 0.5; transform-origin: bottom; animation: voidBars 2.6s ease-in-out infinite; }
.void-console-lines i:nth-child(1) { height: 50%; animation-delay: 0s; }
.void-console-lines i:nth-child(2) { height: 100%; animation-delay: -0.4s; }
.void-console-lines i:nth-child(3) { height: 70%; animation-delay: -0.8s; }
.void-console-lines i:nth-child(4) { height: 88%; animation-delay: -1.2s; }
.void-console-lines i:nth-child(5) { height: 60%; animation-delay: -1.6s; }
@keyframes voidBars { 0%, 100% { transform: scaleY(0.5); } 50% { transform: scaleY(1); } }

.void-section { margin-top: clamp(48px, 7vw, 84px); }

.void-upgrade {
 position: relative;
 display: grid;
 grid-template-columns: minmax(280px, .88fr) minmax(520px, 1.12fr);
 align-items: center;
 gap: clamp(38px, 6vw, 88px);
 margin-top: clamp(48px, 7vw, 84px);
 padding: clamp(38px, 5vw, 70px);
 border: 1px solid var(--border);
 border-radius: clamp(24px, 3vw, 38px);
 background: var(--bg-soft);
 overflow: visible;
}
.void-upgrade::after {
 content: "";
 position: absolute;
 top: 28px;
 right: 28px;
 width: 54px;
 height: 54px;
 pointer-events: none;
 opacity: .34;
 background:
  linear-gradient(90deg, transparent 48%, var(--border-strong) 49%, var(--border-strong) 51%, transparent 52%),
  linear-gradient(transparent 48%, var(--border-strong) 49%, var(--border-strong) 51%, transparent 52%);
}
.void-upgrade-kicker {
 display: inline-flex;
 align-items: center;
 gap: 9px;
 margin-bottom: 18px;
 padding: 7px 11px;
 border: 1px solid var(--border);
 border-radius: 999px;
 background: var(--surface);
 font-family: var(--font-mono);
 font-size: 0.64rem;
 font-weight: 700;
 letter-spacing: 0.1em;
 text-transform: uppercase;
 color: var(--text-dim);
}
.void-upgrade-kicker::before {
 content: "";
 width: 7px;
 height: 7px;
 border-radius: 50%;
 background: var(--green);
 box-shadow: 0 0 0 4px color-mix(in srgb, var(--green) 14%, transparent);
}
.void-upgrade h2 {
 max-width: 560px;
 font-size: clamp(2.15rem, 3.8vw, 3.85rem);
 line-height: .98;
 letter-spacing: -0.055em;
 text-wrap: balance;
}
.void-upgrade-intro > p {
 max-width: 520px;
 margin-top: 22px;
 color: var(--text-dim);
 font-size: clamp(.94rem, 1.2vw, 1.04rem);
 line-height: 1.7;
}
.void-upgrade-proof {
 display: flex;
 flex-wrap: wrap;
 align-items: center;
 gap: 8px;
 margin-top: clamp(26px, 3vw, 38px);
}
.void-upgrade-proof span {
 display: inline-flex;
 align-items: center;
 gap: 7px;
 padding: 7px 10px;
 border-radius: 999px;
 color: var(--text-dim);
 background: var(--surface);
 border: 1px solid var(--border);
 font-size: .68rem;
 font-weight: 650;
 white-space: nowrap;
}
.void-upgrade-proof span::before {
 content: "✓";
 color: var(--green);
 font-size: .66rem;
 font-weight: 800;
}
.void-upgrade-form {
 position: relative;
 display: flex;
 flex-direction: column;
 padding: clamp(22px, 3vw, 34px);
 background: var(--surface);
 border: 1px solid var(--border);
 border-radius: clamp(20px, 2vw, 28px);
 box-shadow: var(--shadow-lg);
 overflow: visible;
 z-index: 2;
}
.void-upgrade-form-head {
 display: flex;
 align-items: flex-start;
 justify-content: space-between;
 gap: 20px;
 margin-bottom: 24px;
 padding-bottom: 20px;
 border-bottom: 1px solid var(--border);
}
.void-upgrade-form-head > div { display: grid; gap: 3px; }
.void-upgrade-form-head > div span {
 color: var(--text-faint);
 font-family: var(--font-mono);
 font-size: .62rem;
 font-weight: 700;
 letter-spacing: .1em;
 text-transform: uppercase;
}
.void-upgrade-form-head strong {
 font-family: var(--font-display);
 font-size: clamp(1rem, 1.5vw, 1.2rem);
 letter-spacing: -.025em;
}
.void-upgrade-form-head > small {
 display: inline-flex;
 align-items: center;
 gap: 7px;
 flex: none;
 padding: 7px 10px;
 border-radius: 999px;
 color: var(--green);
 background: color-mix(in srgb, var(--green) 9%, transparent);
 font-size: .64rem;
 font-weight: 700;
 white-space: nowrap;
}
.void-upgrade-form-head > small i {
 width: 6px;
 height: 6px;
 border-radius: 50%;
 background: currentColor;
 box-shadow: 0 0 0 3px color-mix(in srgb, var(--green) 15%, transparent);
}
.void-upgrade-fields {
 display: grid;
 grid-template-columns: repeat(2, minmax(0, 1fr));
 gap: 18px;
}
.void-upgrade-picker-slot { min-width: 0; }
.void-upgrade-picker-slot > .skeleton { min-height: 76px; border-radius: 14px; }
.void-upgrade-form .upg-field {
 display: flex;
 flex-direction: column;
 gap: 9px;
 min-width: 0;
}
.void-upgrade-form .upg-field-label,
.void-upgrade-budget > span {
 display: flex;
 align-items: flex-start;
 justify-content: space-between;
 gap: 10px;
 min-height: 1.4em;
 font-family: var(--font-mono);
 font-size: .66rem;
 font-weight: 700;
 line-height: 1.35;
 letter-spacing: .1em;
 text-transform: uppercase;
 color: var(--text-faint);
}
.void-upgrade-form .upg-field-label small {
 max-width: 54%;
 overflow: hidden;
 color: var(--text-faint);
 font-family: var(--font-body);
 font-size: .62rem;
 font-weight: 600;
 letter-spacing: 0;
 text-overflow: ellipsis;
 text-transform: none;
}
.void-upgrade-form .upg-picker-trigger,
.void-upgrade-budget div {
 width: 100%;
 min-height: 54px;
 color: var(--text);
 background: var(--surface-2);
 border: 1px solid transparent;
 border-radius: 14px;
 box-shadow: none;
}
.void-upgrade-form .upg-picker-trigger {
 padding-inline: 16px;
 font-size: .88rem;
 font-weight: 650;
}
.void-upgrade-form .upg-picker-trigger:hover,
.void-upgrade-form .upg-picker-trigger[aria-expanded="true"] {
 border-color: var(--border-strong);
}
.void-upgrade-form .upg-picker-popover {
 width: min(520px, calc(100vw - 44px));
 z-index: 120;
}
.void-upgrade-picker-slot:nth-child(2) .upg-picker-popover {
 right: 0;
 left: auto;
}
.void-upgrade-budget {
 display: flex;
 flex-direction: column;
 gap: 9px;
 grid-column: 1 / -1;
}
.void-upgrade-budget div { display: flex; align-items: center; }
.void-upgrade-budget input {
 min-width: 0;
 flex: 1;
 height: 52px;
 padding: 0 16px;
 color: var(--text);
 background: transparent;
 border: 0;
 outline: 0;
 font: 700 1rem var(--font-display);
}
.void-upgrade-budget b { padding-right: 16px; color: var(--text-faint); }
.void-upgrade-submit {
 display: flex;
 align-items: center;
 justify-content: space-between;
 gap: 20px;
 width: 100%;
 min-height: 56px;
 margin-top: 20px;
 padding: 0 20px;
 color: var(--bg);
 background: var(--text);
 border: 1px solid var(--text);
 border-radius: calc(var(--radius) * .65);
 font: 700 .92rem var(--font-display);
 cursor: pointer;
 transition: transform .18s ease, opacity .18s ease;
}
.void-upgrade-submit b { font-size: 1.2rem; transition: transform .18s ease; }
.void-upgrade-submit:hover:not(:disabled) { transform: translateY(-1px); }
.void-upgrade-submit:hover b { transform: translateX(5px); }
.void-upgrade-submit:disabled { cursor: wait; opacity: .5; }
.void-upgrade-submit:focus-visible,
.void-upgrade-budget div:focus-within {
 outline: 3px solid var(--accent-wash-strong);
 outline-offset: 3px;
 border-color: var(--accent);
}
.void-upgrade-form > small {
 margin-top: 12px;
 color: var(--text-faint);
 font-size: .68rem;
 text-align: center;
}

@media (max-width: 980px) {
 .void-hero { grid-template-columns: 1fr; }
 .void-stage { min-height: 360px; }
 .void-model { min-height: 360px; }
 .void-orbit-strip { grid-template-columns: 1fr; }
 .void-upgrade { grid-template-columns: 1fr; gap: 32px; }
 .void-upgrade-intro > p { max-width: 620px; }
}
@media (max-width: 560px) {
 .void-upgrade {
  margin-inline: -4px;
  padding: 28px 18px 18px;
  border-radius: 24px;
 }
 .void-upgrade::after { display: none; }
 .void-upgrade-fields { grid-template-columns: 1fr; }
 .void-upgrade-budget { grid-column: auto; }
 .void-upgrade-form { padding: 20px 16px; border-radius: 20px; }
 .void-upgrade-form-head { align-items: flex-start; }
 .void-upgrade-form-head > small { padding: 6px 8px; font-size: .58rem; }
 .void-upgrade-form .upg-picker-popover {
  position: fixed;
  inset: auto 12px 12px;
  width: auto;
  min-width: 0;
  max-height: min(620px, 76vh);
 }
 .void-upgrade-form .void-upgrade-picker-slot:nth-child(2) .upg-picker-popover {
  right: 12px;
  left: 12px;
 }
 .void-upgrade-form .upg-picker-list { max-height: min(480px, 60vh); }
}
@media (prefers-reduced-motion: reduce) {
 .void-scroll span, .void-console-lines i { animation: none !important; }
 .void-upgrade-submit b { transition: none; }
}


/* Final UI polish: shape refinements only, with the existing palette preserved. */
:root {
 --announce-h: 38px;
 --fixed-header-h: 78px;
}

.announce {
 position: fixed !important;
 top: 0;
 left: 0;
 right: 0;
 z-index: 320 !important;
 min-height: var(--announce-h);
 display: flex;
 align-items: center;
 justify-content: center;
 border-bottom: 1px solid rgba(255, 255, 255, 0.12);
}

.announce span {
 display: inline-flex;
 align-items: center;
 justify-content: center;
 min-width: 0;
 max-width: 100%;
 overflow: hidden;
 text-overflow: ellipsis;
}

.header {
 position: fixed !important;
 top: var(--announce-h) !important;
 left: 0;
 right: 0;
 z-index: 300 !important;
 min-height: var(--fixed-header-h);
 border-radius: 0 0 18px 18px;
}

.app {
 padding-top: calc(32px + var(--announce-h) + var(--fixed-header-h));
}

body.void-home-active .app {
 padding-top: 0;
}

.void-hero {
 padding-top: max(clamp(124px, 14vh, 160px), calc(var(--announce-h) + var(--fixed-header-h) + 48px));
}

.builder-summary,
.product-gallery,
.prebuilt-summary {
 top: calc(var(--announce-h) + var(--fixed-header-h) + 18px) !important;
}

.header-search,
.price-inputs input,
input,
select,
textarea,
.select {
 min-height: 42px;
 border-radius: 12px;
}

.header-search {
 min-height: 42px;
 border-radius: 999px;
 padding-inline: 16px;
}

.header-search input {
 min-height: 24px;
}

.filter-option {
 min-height: 26px;
 border-radius: 9px;
 padding: 4px 6px;
 text-shadow: none;
}

.filter-option:hover {
 background: var(--accent-wash);
}

.filter-option input {
 opacity: 1;
}

input[type="checkbox"],
input[type="radio"],
.filter-option input[type="checkbox"],
.filter-option input[type="radio"] {
 all: revert !important;
 appearance: auto !important;
 -webkit-appearance: auto !important;
 width: 16px !important;
 height: 16px !important;
 flex: 0 0 16px;
 background: transparent !important;
 border: 0 !important;
 box-shadow: none !important;
 padding: 0 !important;
 cursor: pointer;
}

@media (max-width: 920px) {
 :root {
  --fixed-header-h: 124px;
 }
}

@media (max-width: 760px) {
 :root {
  --announce-h: 44px;
  --fixed-header-h: 116px;
 }

 .app {
  padding-top: calc(20px + var(--announce-h) + var(--fixed-header-h));
 }

 body.void-home-active .header-search {
  display: flex;
 }

 .void-hero {
  padding-top: calc(var(--announce-h) + var(--fixed-header-h) + 28px);
 }
}

/* Stock badges. */
.stock-dot,
.void-home .stock-dot,
body.void-home-active .stock-dot {
 display: inline-flex;
 align-items: center;
 gap: 5px;
 width: fit-content;
 min-width: 0;
 margin-top: 2px;
 padding: 3px 8px !important;
 border: 1px solid rgba(34, 197, 94, 0.28) !important;
 border-radius: 999px;
 background: rgba(34, 197, 94, 0.12) !important;
 box-shadow: none;
 line-height: 1.15;
 font-size: 0.7rem;
 font-weight: 750;
 color: var(--green) !important;
}

.stock-dot::before {
 content: "";
 width: 6px;
 height: 6px;
 flex: 0 0 6px;
 border-radius: 999px;
 background: currentColor;
}

.stock-dot.low {
 border-color: rgba(245, 158, 11, 0.34) !important;
 background: rgba(245, 158, 11, 0.13) !important;
 color: var(--amber) !important;
}

.stock-dot.out {
 border-color: rgba(220, 38, 38, 0.30) !important;
 background: rgba(220, 38, 38, 0.12) !important;
 color: var(--red) !important;
}

/* Cleaner void hero motion: less noise, more depth. */
body.void-home-active::after,
.void-home::after {
 opacity: .22;
 animation-duration: 36s;
}

.void-home .void-depth {
 display: none;
}

.void-home .void-field {
 left: -360px;
 right: -360px;
 width: auto;
 opacity: .54;
 filter: saturate(.70);
 /* Le halo 2D est transparent, mais sa très faible teinte suffisait à révéler
    le rectangle du canvas. Le masque dissout ses deux bords dans le fond. */
 -webkit-mask-image: linear-gradient(90deg, transparent 0%, rgba(0,0,0,.38) 7%, #000 18%, #000 82%, rgba(0,0,0,.38) 93%, transparent 100%);
 mask-image: linear-gradient(90deg, transparent 0%, rgba(0,0,0,.38) 7%, #000 18%, #000 82%, rgba(0,0,0,.38) 93%, transparent 100%);
}

/* Les calques interactifs partagent le même débordement : aucune de leurs
   limites physiques ne doit coïncider avec le bord du conteneur central. */
.void-home .void-grid,
.void-home .void-lamp {
 left: -360px;
 right: -360px;
 top: -220px;
 bottom: -280px;
}

/* WebGL hero stage: the 3D canvas is the artwork, not a framed card. */
.void-home .void-stage {
 min-height: min(74vh, 780px);
 display: grid;
 place-items: center;
 overflow: visible;
 transform: translateY(-1.5vh);
}

/* Le sol WebGL appartient au canvas de droite. Cette grille d'ambiance prend
   le relais derrière lui sur toute la largeur du viewport : même famille de
   lignes froides, perspective plus douce, aucune fin rectiligne perceptible. */
.void-home .void-hero {
 overflow: visible;
 isolation: isolate;
}
.void-home .void-hero::after {
 content: "";
 position: absolute;
 left: 50%;
 bottom: -22%;
 z-index: 0;
 width: calc(100vw + 96px);
 height: 66%;
 pointer-events: none;
 /* La grille WebGL fournit deja les lignes en perspective. Une seconde grille
    CSS superposee creait des croisements et du moire pendant la rotation. */
 background: radial-gradient(ellipse 68% 54% at 50% 64%, color-mix(in srgb, var(--text) 7%, transparent), transparent 74%);
 transform: translateX(-50%) perspective(620px) rotateX(58deg) scaleX(1.22);
 transform-origin: 50% 100%;
 opacity: .58;
 -webkit-mask-image: linear-gradient(180deg, transparent 0%, rgba(0,0,0,.72) 18%, #000 58%, transparent 100%);
 mask-image: linear-gradient(180deg, transparent 0%, rgba(0,0,0,.72) 18%, #000 58%, transparent 100%);
}

.void-home .void-stage::before {
 inset: -10% -13% 2%;
 width: auto;
 height: auto;
 border-radius: 0;
 background:
  radial-gradient(ellipse 58% 48% at 50% 48%, rgba(226,249,252,.08), rgba(72,102,120,.030) 42%, transparent 74%),
  radial-gradient(ellipse 72% 28% at 50% 78%, rgba(126,168,186,.06), transparent 72%);
 box-shadow: none;
}

.void-home .void-stage::after {
 width: min(520px, 66%);
 height: 78px;
 bottom: 14%;
 opacity: .42;
}

.void-model {
 position: absolute;
 inset: -10% -12% -4%;
 z-index: 7;
 width: 124%;
 height: 114%;
 display: block;
 pointer-events: none;
 /* Le bloom WebGL colore encore des pixels transparents jusqu'aux limites du
    canvas. Ces deux fondus dissolvent son cadre dans le fond du hero : aucune
    arête rectangulaire, tout en gardant la tour parfaitement nette au centre. */
 -webkit-mask-image:
  linear-gradient(90deg, transparent 0%, #000 14%, #000 86%, transparent 100%),
  linear-gradient(180deg, transparent 0%, #000 10%, #000 88%, transparent 100%);
 -webkit-mask-composite: source-in;
 mask-image:
  linear-gradient(90deg, transparent 0%, #000 14%, #000 86%, transparent 100%),
  linear-gradient(180deg, transparent 0%, #000 10%, #000 88%, transparent 100%);
 mask-composite: intersect;
}

.void-scroll {
 display: none !important;
}

@media (max-width: 760px) {
 .void-home .void-hero { overflow: hidden; }
 .void-home .void-hero::after { display: none; }

 .void-home .void-stage {
  min-height: 420px;
  transform: translateY(0);
  overflow: hidden;
 }

 .void-model {
  inset: -7% -8% -6%;
  width: 116%;
  height: 113%;
 }
}


/* ════════════════════════════════════════════════════════════════
  Monochrome overrides — announce strip, neutral product tint,
  dark-mode primary contrast.
  ════════════════════════════════════════════════════════════════ */
.announce { background: #111114 !important; color: #ffffff !important; }
.announce strong { color: #ffffff !important; }
:root[data-theme="dark"] .announce { background: #1b1b1f !important; }

/* Visuels produit : fond blanc neutre quel que soit le --tint injecté. */
.product-visual, .product-page-visual { --tint: rgba(0, 0, 0, 0.05) !important; }

/* Bouton principal blanc sur fond sombre → liseré pour le détacher. */
:root[data-theme="dark"] .btn-primary { border: 1px solid rgba(255, 255, 255, 0.16); }


/* Promo-banner : bandeau encre sobre (B&W) dans les deux thèmes. */
.promo-banner { background: #111114; color: #ffffff; }
.promo-banner h3, .promo-banner p { color: #ffffff; }
.promo-banner p { opacity: .82; }
:root[data-theme="dark"] .promo-banner { background: #16161a; border: 1px solid rgba(255, 255, 255, 0.12); }
.promo-banner .btn-primary { background: #ffffff !important; color: #111114 !important; box-shadow: 0 14px 30px -14px rgba(0,0,0,0.5) !important; }


/* ════════════════════════════════════════════════════════════════
  ANIMATIONS · sobres, monochromes
  Entrées « one-shot » via @starting-style (l'état de repos est visible,
  donc rien ne reste jamais masqué) + micro-interactions au survol.
  Tout est neutralisé en prefers-reduced-motion.
  ════════════════════════════════════════════════════════════════ */
@media (prefers-reduced-motion: no-preference) {

 /* Groupe révélé à l'apparition (chargement ou injection par app.js). */
 .void-copy > *, .void-stage,
 .section-head, .product-card, .cat-card, .perk, .pb-card,
 .promo-banner, .void-orbit-strip article, .void-orbit-card, .void-console,
 .review-card, .order-card, .kpi-card, .builder-slot {
  transition:
   opacity .6s cubic-bezier(.22,.61,.36,1),
   transform .6s cubic-bezier(.22,.61,.36,1),
   border-color .25s ease,
   box-shadow .3s ease;
 }
 @starting-style {
  .void-copy > *, .void-stage,
  .section-head, .product-card, .cat-card, .perk, .pb-card,
  .promo-banner, .void-orbit-strip article, .void-orbit-card, .void-console,
  .review-card, .order-card, .kpi-card, .builder-slot {
   opacity: 0;
   transform: translateY(20px);
  }
 }

 /* Héros : cascade douce */
 .void-copy > *:nth-child(1) { transition-delay: .04s; }
 .void-copy > *:nth-child(2) { transition-delay: .12s; }
 .void-copy > *:nth-child(3) { transition-delay: .20s; }
 .void-copy > *:nth-child(4) { transition-delay: .28s; }
 .void-copy > *:nth-child(5) { transition-delay: .36s; }
 .void-stage { transition-delay: .14s; }

 /* Grilles : léger décalage entre cartes */
 .product-grid > :nth-child(2), .cat-grid > :nth-child(2) { transition-delay: .06s; }
 .product-grid > :nth-child(3), .cat-grid > :nth-child(3) { transition-delay: .12s; }
 .product-grid > :nth-child(4), .cat-grid > :nth-child(4) { transition-delay: .18s; }

 /* ── Micro-interactions (toujours sûres) ───────────────────── */
 .void-btn b { transition: transform .22s cubic-bezier(.22,.61,.36,1); }
 .void-btn:hover b { transform: translateX(4px); }
 .void-btn-ghost:hover b { transform: rotate(90deg); }

 .add-btn svg { transition: transform .2s cubic-bezier(.22,.61,.36,1); }
 .add-btn:hover svg { transform: rotate(90deg); }

 .cat-card .cat-icon, .perk-icon { transition: transform .3s cubic-bezier(.22,.61,.36,1); }
 .cat-card:hover .cat-icon, .perk:hover .perk-icon { transform: translateY(-2px) scale(1.06); }

 .nav > a, .nav-item > a { position: relative; }
 .nav > a::after, .nav-item > a::after {
  content: ""; position: absolute; left: 13px; right: 13px; bottom: 5px;
  height: 1.5px; background: currentColor; opacity: .5;
  transform: scaleX(0); transform-origin: left;
  transition: transform .28s cubic-bezier(.22,.61,.36,1);
 }
 .nav > a:hover::after, .nav-item:hover > a::after, .nav > a.active::after { transform: scaleX(1); }

 .section-head a { display: inline-flex; align-items: center; gap: 6px; transition: gap .2s ease; }
 .section-head a:hover { gap: 11px; }

 .star-picker button { transition: transform .12s cubic-bezier(.22,.61,.36,1), color .12s ease; }
 .star-picker button:hover { transform: scale(1.18); }
}

/* Responsive fluid pass: typography, header, menus and dense shop surfaces. */
:root {
 --page-pad: clamp(14px, 3.2vw, 28px);
 --flow-gap: clamp(16px, 2.4vw, 28px);
 --card-gap: clamp(12px, 2vw, 20px);
}

body {
 font-size: clamp(15px, 0.42vw + 13.7px, 17px);
}

.app {
 width: min(100%, 1280px);
 padding-inline: var(--page-pad);
}

.section {
 margin-top: clamp(38px, 6vw, 64px);
}

.section-head,
.catalog-toolbar,
.order-head {
 gap: 12px;
 min-width: 0;
}

.section-head h1,
.section-head h2,
.catalog-toolbar h1,
.product-page-info h1,
.content-hero h1 {
 overflow-wrap: anywhere;
 text-wrap: balance;
}

.section-head h2 {
 font-size: clamp(1.35rem, 1.1vw + 1rem, 1.7rem);
}

.header {
 gap: clamp(8px, 1.4vw, 22px);
 padding-inline: var(--page-pad);
}

.logo {
 flex: 0 0 auto;
 font-size: clamp(1.05rem, 0.8vw + 0.86rem, 1.32rem);
 white-space: nowrap;
}

.nav {
 min-width: 0;
 flex: 1 1 auto;
 align-items: center;
 overflow: visible;
 scrollbar-width: none;
 mask-image: none;
}

.nav::-webkit-scrollbar {
 display: none;
}

.nav a {
 display: inline-flex;
 align-items: center;
 min-height: 38px;
 white-space: nowrap;
 font-size: clamp(0.82rem, 0.3vw + 0.75rem, 0.92rem);
 padding-inline: clamp(10px, 1vw, 14px);
}

.header-search {
 flex: 1 1 220px;
 min-width: min(220px, 100%);
}

.header-actions {
 flex: 0 0 auto;
}

.icon-btn {
 min-width: 42px;
 min-height: 42px;
 justify-content: center;
 padding-inline: clamp(10px, 1.1vw, 14px);
}

.product-grid {
 /* auto-fill (et non auto-fit) : avec peu d'articles (favoris, 1 résultat de
    recherche) les cartes gardent leur largeur au lieu de s'étirer sur toute la
    ligne — sinon le visuel 4/3 devient gigantesque. */
 grid-template-columns: repeat(auto-fill, minmax(min(100%, 230px), 1fr));
 gap: var(--card-gap);
}

.cat-grid,
.perks {
 grid-template-columns: repeat(auto-fit, minmax(min(100%, 210px), 1fr));
 gap: var(--card-gap);
}

.pb-grid {
 grid-template-columns: repeat(auto-fit, minmax(min(100%, 260px), 1fr));
 gap: var(--card-gap);
}

.catalog-layout {
 grid-template-columns: minmax(210px, 240px) minmax(0, 1fr);
 gap: var(--flow-gap);
}

.product-page {
 width: min(100%, 1100px);
 margin-inline: auto;
 grid-template-columns: minmax(0, 0.92fr) minmax(340px, 1.08fr);
 gap: clamp(28px, 4vw, 52px);
}

.product-gallery {
 width: 100%;
 max-width: 480px;
 justify-self: end;
}

.product-page-visual .pimg {
 padding: clamp(42px, 4vw, 54px);
}

.product-page-info {
 max-width: 520px;
}

.product-page-info,
.product-info,
.cart-item-info,
.builder-slot-main {
 min-width: 0;
}

.product-name,
.cart-item-info h4,
.builder-slot-main h3,
.cmp-name {
 overflow-wrap: anywhere;
}

.product-page-info h1 {
 font-size: clamp(1.42rem, 2.2vw, 1.82rem);
}

.price-row {
 flex-wrap: wrap;
}

.price-row .price {
 font-size: clamp(1.7rem, 3vw, 2.08rem);
}

.buy-row,
.pp-actions,
.review-head {
 flex-wrap: wrap;
}

.buy-row .btn,
.pp-actions .btn {
 min-height: 46px;
}

.footer {
 padding-inline: var(--page-pad);
}

.footer-grid {
 grid-template-columns: minmax(220px, 1.4fr) repeat(auto-fit, minmax(135px, 1fr));
 gap: clamp(20px, 3vw, 30px);
}

@media (max-width: 1080px) {
 .nav {
  display: flex;
 }

 .nav .chev {
  display: none;
 }
}

@media (max-width: 920px) {
 :root {
  --fixed-header-h: 132px;
 }

 .header {
  display: grid;
  grid-template-columns: auto 1fr auto;
  align-items: center;
  row-gap: 10px;
 }

 .nav {
  grid-column: 1 / -1;
  order: 3;
  width: 100%;
  padding-bottom: 2px;
 }

 .header-search {
  min-width: 0;
  max-width: none;
  margin-left: 0;
 }
}

@media (max-width: 820px) {
 .app {
  padding-inline: var(--page-pad);
 }

 .section-head,
 .catalog-toolbar {
  align-items: flex-start;
  flex-direction: column;
 }

 .catalog-toolbar .select,
 .catalog-toolbar .sort-control {
  width: min(100%, 360px);
  max-width: 360px;
  align-self: flex-end;
 }

 .catalog-results {
  position: static;
  height: auto;
  overflow: visible;
  padding: 0;
  margin: 0;
  scrollbar-gutter: auto;
 }

 .catalog-toolbar {
  position: relative;
  z-index: 30;
  overflow: visible;
 }

 .sort-menu {
  z-index: 60;
 }

 .catalog-layout,
 .product-page,
 .checkout-layout,
 .builder-layout,
 .builder-grid,
 .story-grid,
 .legal-grid {
  grid-template-columns: 1fr;
 }

 .filters,
 .product-gallery,
 .builder-summary,
 .prebuilt-summary {
  position: static !important;
 }

 .product-page {
  width: min(100%, 680px);
 }

 .product-gallery,
 .product-page-info {
  width: 100%;
  max-width: 100%;
  justify-self: stretch;
 }

 .filters {
  padding: 16px;
 }

 .filter-group {
  gap: 7px;
 }

 .product-page-visual {
  width: min(100%, 440px);
  max-height: none;
  margin-inline: auto;
 }

 .product-page-visual .pimg {
  padding: clamp(30px, 8vw, 44px);
 }

 .pp-thumbs {
  justify-content: center;
 }

 .footer-grid {
  grid-template-columns: repeat(2, minmax(0, 1fr));
 }
}

@media (max-width: 640px) {
 :root {
  --announce-h: 48px;
  --fixed-header-h: 182px;
 }

 .announce {
  padding-inline: 10px;
  font-size: 0.74rem;
  white-space: normal;
  line-height: 1.25;
 }

 .announce span {
  white-space: normal;
 }

 .header {
  grid-template-columns: 1fr auto;
  align-content: start;
  padding-block: 10px;
  border-radius: 0 0 14px 14px;
 }

 .header-search {
  grid-column: 1 / -1;
  order: 2;
  width: 100%;
  flex-basis: auto;
 }

 .nav {
  order: 3;
  grid-column: 1 / -1;
 }

 .header-actions {
  gap: 6px;
 }

 .icon-btn-label {
  display: none;
 }

 .icon-btn {
  width: 42px;
  padding: 0;
 }

 .app {
  padding-top: calc(18px + var(--announce-h) + var(--fixed-header-h));
  padding-bottom: 58px;
 }

 body.void-home-active .app {
  padding-top: 0;
 }

 .void-hero {
  min-height: auto;
  padding-inline: 0;
  padding-top: calc(var(--announce-h) + var(--fixed-header-h) + 24px);
 }

 .void-hero h1 {
  font-size: clamp(2.15rem, 13vw, 3.15rem);
 }

 .void-actions,
 .hero-cta,
 .buy-row,
 .pp-actions {
  display: grid;
  grid-template-columns: 1fr;
 }

 .void-actions .btn,
 .hero-cta .btn,
 .buy-row .btn,
 .pp-actions .btn {
  width: 100%;
 }

 .product-grid,
 .cat-grid,
 .perks,
 .pb-grid {
  grid-template-columns: 1fr;
 }

 .product-bottom {
  align-items: flex-start;
 }

 .price-inputs,
 .promo-banner,
 .cart-item {
  flex-direction: column;
 }

 .cart-item {
  align-items: stretch;
 }

 .cart-item-visual {
  width: 100%;
  height: 120px;
 }

 .modal {
  width: calc(100vw - 24px);
  max-height: calc(100vh - 24px);
  overflow: auto;
 }

 .cart-drawer {
  width: 100vw;
 }

 .cart-drawer-head,
 .cart-drawer-body,
 .cart-drawer-foot {
  padding-inline: 16px;
 }

 .toasts {
  left: 12px;
  right: 12px;
  bottom: 12px;
 }

 .toast {
  max-width: none;
 }

 .compare-bar {
  left: 10px;
  right: 10px;
  bottom: 10px;
  transform: none;
  max-width: none;
  align-items: stretch;
  gap: 10px;
 }

 .compare-bar .btn {
  flex: 1;
 }

 .footer-grid {
  grid-template-columns: 1fr;
 }
}

@media (max-width: 380px) {
 :root {
  --fixed-header-h: 190px;
 }

 .logo svg {
  width: 24px;
  height: 24px;
 }

 .logo {
  font-size: 1rem;
 }

 .nav a {
  min-height: 36px;
  padding-inline: 9px;
 }

 .header-search {
  padding-inline: 12px;
 }
}

/* Accessibility responsive pass: small devices, touch targets and overflow safety. */
button,
.btn,
.icon-btn,
.pager-btn,
.auth-tab,
.account-tab,
.filter-option,
.picker-chip,
.compare-chip,
a.btn {
 touch-action: manipulation;
}

button,
.btn,
.icon-btn,
.pager-btn,
.auth-tab,
.account-tab,
.picker-chip {
 min-height: 44px;
}

input,
select,
textarea,
.select {
 font-size: max(16px, 1rem);
}

.nav,
.picker-preview-thumbs,
.cmp-wrap,
.picker-cmp-wrap {
 overscroll-behavior-inline: contain;
}

.cmp-wrap,
.picker-cmp-wrap {
 -webkit-overflow-scrolling: touch;
}

.product-card,
.cat-card,
.perk,
.pb-card,
.panel,
.order-card,
.filters,
.builder-slot,
.prebuilt-component {
 overflow-wrap: anywhere;
}

.product-info,
.panel,
.order-card,
.filters,
.cart-drawer,
.modal,
.compare-bar,
.cookie-banner {
 min-width: 0;
}

.card-actions button,
.fav-btn,
.cmp-btn,
.add-btn,
.cart-item-qty button,
.modal-close,
.cmp-remove {
 min-width: 44px;
 min-height: 44px;
}

.cart-item-qty {
 gap: 8px;
}

.cart-item-qty span {
 min-width: 32px;
 text-align: center;
}

.cmp-remove,
.cart-item-remove {
 min-height: 36px;
}

.cmp-remove { padding-inline: 4px; }

.compare-bar {
 max-height: min(42vh, 260px);
 overflow: auto;
}

.compare-bar-items {
 min-width: 0;
}

.cookie-actions .btn {
 flex: 1 1 130px;
}

@media (max-width: 920px) {
 .header {
  max-height: calc(100dvh - 12px);
  overflow: hidden;
 }

 .nav {
  scroll-padding-inline: 14px;
 }
}

@media (max-width: 820px) {
 .panel,
 .order-card,
 .filters,
 .review-card,
 .specs-card,
 .store-utility-card {
  border-radius: 16px;
  padding: clamp(16px, 4.5vw, 22px);
 }

 .form-grid {
  grid-template-columns: 1fr;
 }

 .form-grid label {
  min-width: 0;
 }

 .promo-row,
 .admin-search,
 .picker-preview-price-row,
 .pb-detail-total {
  align-items: stretch;
  flex-direction: column;
 }

 .promo-row .btn,
 .admin-search .btn,
 .picker-preview-price-row .btn,
 .pb-detail-total .btn {
  width: 100%;
 }

 .mini-table,
 .specs-table {
  display: block;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
 }

 .content-hero {
  padding-top: 28px;
 }
}

@media (max-width: 640px) {
 :root {
  --page-pad: clamp(12px, 4.4vw, 18px);
 }

 .header {
  gap: 8px;
 }

 .logo span {
  max-width: 38vw;
  overflow: hidden;
  text-overflow: ellipsis;
 }

 .header-search input {
  width: 100%;
 }

 .nav {
  margin-inline: calc(var(--page-pad) * -1);
  padding-inline: var(--page-pad);
  mask-image: linear-gradient(90deg, transparent 0, #000 18px, #000 calc(100% - 18px), transparent 100%);
 }

 .nav a {
  min-height: 42px;
 }

 .section-head a,
 .catalog-toolbar .select,
 .catalog-toolbar .sort-control {
  width: 100%;
  max-width: none;
 }

 .product-card {
  border-radius: 16px;
 }

 .product-info {
  padding: 14px;
 }

 .product-bottom {
  gap: 12px;
 }

 .product-bottom .price {
  max-width: calc(100% - 56px);
 }

 .add-btn {
  flex: 0 0 44px;
  border-radius: 12px;
 }

 .cart-drawer {
  top: var(--announce-h);
  height: calc(100dvh - var(--announce-h));
  border-left: 0;
 }

 .cart-drawer-body {
  padding-bottom: max(18px, env(safe-area-inset-bottom));
 }

 .cart-drawer-foot {
  padding-bottom: max(16px, env(safe-area-inset-bottom));
 }

 .cart-trust {
  grid-template-columns: 1fr;
 }

 .promo-row {
  display: grid;
  grid-template-columns: 1fr;
 }

 .modal-overlay {
  padding: max(10px, env(safe-area-inset-top)) 10px max(10px, env(safe-area-inset-bottom));
  place-items: end center;
 }

 .modal {
  width: min(100%, 520px);
  max-height: calc(100dvh - 20px);
  border-radius: 18px 18px 0 0;
  padding: 24px 18px 18px;
 }

 .auth-tabs {
  border-radius: 14px;
 }

 .auth-tab {
  border-radius: 11px;
 }

 .picker-overlay {
  place-items: stretch;
 }

 .modal.wide,
 .modal.wide.picker-modal-compare {
  width: 100%;
  height: calc(100dvh - 12px);
  max-height: calc(100dvh - 12px);
  border-radius: 16px;
 }

 .picker-list {
  max-height: 34vh;
 }

 .picker-item {
  padding: 10px 12px;
 }

 .picker-item .picker-visual {
  width: 42px;
  height: 42px;
 }

 .picker-preview {
  padding: 14px;
 }

 .picker-preview-specs div {
  grid-template-columns: 1fr;
  gap: 4px;
 }

 .picker-cmp-table,
 .picker-modal-compare .picker-cmp-table,
 .cmp-table-global {
  min-width: 760px;
 }

 .cmp-table th,
 .cmp-table td,
 .cmp-table-global th,
 .cmp-table-global td {
  padding: 9px 10px;
 }

 .compare-bar {
  max-height: calc(48dvh - env(safe-area-inset-bottom));
  padding: 10px;
  border-radius: 14px;
 }

 .compare-bar-label,
 .compare-bar-items {
  flex: 1 1 100%;
 }

 .compare-chip {
  min-height: 36px;
  display: inline-flex;
  align-items: center;
 }

 .cookie-banner {
  left: 10px;
  right: 10px;
  bottom: max(10px, env(safe-area-inset-bottom));
  max-height: min(58vh, 360px);
  overflow: auto;
  padding: 14px;
  border-radius: 16px;
 }

 .cookie-actions {
  justify-content: stretch;
 }

 .footer {
  padding-bottom: max(34px, env(safe-area-inset-bottom));
 }
}

@media (max-width: 420px) {
 :root {
  --announce-h: 54px;
  --fixed-header-h: 196px;
 }

 .announce {
  font-size: 0.7rem;
 }

 .logo span {
  max-width: 44vw;
 }

 .header-actions {
  gap: 4px;
 }

 .icon-btn {
  width: 40px;
  min-width: 40px;
 }

 .nav a {
  padding-inline: 8px;
  font-size: 0.8rem;
 }

 .app {
  padding-top: calc(14px + var(--announce-h) + var(--fixed-header-h));
 }

 .void-hero {
  padding-top: calc(var(--announce-h) + var(--fixed-header-h) + 18px);
 }

 .product-bottom {
  align-items: stretch;
  flex-direction: column;
 }

 .product-bottom .price {
  max-width: none;
 }

 .add-btn {
  width: 100%;
 }

 .pb-specs li,
 .prebuilt-component,
 .builder-slot {
  align-items: flex-start;
 }

 .builder-slot {
  gap: 12px;
  padding: 14px;
 }
}

/* Configurator mobile accessibility pass. */
.builder-summary-skip {
 display: none;
 width: fit-content;
 margin: -4px 0 18px;
}

.builder-slots {
 display: grid;
 gap: 12px;
}

.builder-slot-icon {
 width: 52px;
 height: 52px;
}

.builder-slot-actions {
 display: flex;
 align-items: center;
 gap: 8px;
 flex: 0 0 auto;
}

.builder-slot-actions .icon-btn {
 padding: 8px 11px;
}

.picker-title {
 padding-right: 42px;
 font-size: 1.2rem;
 line-height: 1.25;
}

.builder-next-missing {
 margin-top: 2px;
}

@media (max-width: 760px) {
 .builder-summary-skip {
  display: inline-flex;
 }

 .builder-intro {
  max-width: none;
  font-size: 0.95rem;
  line-height: 1.6;
 }

 .presets {
  margin-inline: calc(var(--page-pad) * -1);
  padding: 10px var(--page-pad);
  overflow-x: auto;
  flex-wrap: nowrap;
  scroll-padding-inline: var(--page-pad);
  -webkit-overflow-scrolling: touch;
 }

 .presets-label {
  flex: 0 0 auto;
  padding-right: 4px;
  white-space: nowrap;
 }

 .preset-btn {
  flex: 0 0 auto;
  min-height: 42px;
  white-space: nowrap;
 }

 .builder-grid {
  gap: 16px;
 }

 .builder-slot {
  display: grid;
  grid-template-columns: 48px minmax(0, 1fr);
  align-items: start;
  gap: 12px;
  padding: 14px;
  border-radius: 16px;
 }

 .builder-slot:hover {
  transform: none;
 }

 .builder-slot-icon {
  width: 48px;
  height: 48px;
  border-radius: 12px;
 }

 .builder-slot-main h3 {
  font-size: 1rem;
  line-height: 1.25;
 }

 .builder-slot-main p,
 .builder-slot.filled .builder-slot-main p {
  white-space: normal;
  overflow: visible;
  text-overflow: clip;
  overflow-wrap: anywhere;
 }

 .builder-slot > .price {
  grid-column: 2;
  justify-self: start;
  font-size: 1.08rem;
 }

 .builder-slot-actions {
  grid-column: 1 / -1;
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  width: 100%;
 }

 .builder-slot-actions .btn {
  width: 100%;
  min-height: 44px;
 }

 .builder-slot-actions .icon-btn {
  width: 44px;
  min-width: 44px;
  padding: 0;
 }

 .builder-summary.panel {
  border-radius: 16px;
 }

 .build-steps .row,
 .cart-totals .row {
  gap: 12px;
 }

 .usage-row {
  grid-template-columns: 1fr;
  gap: 7px;
  align-items: start;
 }

 .usage-word {
  justify-self: start;
 }
}

/* ── Cross-sell du panier : « Complétez votre configuration » ─────────── */
.cart-upsell {
 margin: 14px 0 4px;
 padding: 12px 14px;
 border: 1px solid var(--border);
 border-radius: 12px;
 background: var(--surface-2, rgba(127, 127, 127, .06));
}
.cart-upsell h4 {
 margin: 0 0 8px;
 font-size: .78rem;
 letter-spacing: .06em;
 text-transform: uppercase;
 color: var(--text-dim);
}
.cart-upsell-item {
 display: flex;
 align-items: center;
 justify-content: space-between;
 gap: 10px;
 padding: 7px 0;
}
.cart-upsell-item + .cart-upsell-item { border-top: 1px dashed var(--border); }
.cart-upsell-item small { color: var(--text-dim); }
.cart-upsell-item .btn { flex: none; }

@media (max-width: 640px) {
 .picker-overlay {
  padding: 0;
 }

 .picker-modal {
  height: 100dvh;
  max-height: 100dvh;
  border-radius: 0;
  padding: max(14px, env(safe-area-inset-top)) 12px max(12px, env(safe-area-inset-bottom));
  overflow: hidden;
  display: flex;
  flex-direction: column;
 }

 .picker-title {
  flex: 0 0 auto;
  margin: 0 48px 8px 0;
  font-size: 1.08rem;
 }

 .picker-count {
  display: block;
  margin: 4px 0 0;
  font-size: 0.78rem;
 }

 .picker-tip {
  flex: 0 0 auto;
  max-height: 74px;
  overflow: auto;
  margin-bottom: 10px;
  padding-left: 10px;
 }

 .picker-filters {
  flex: 0 0 auto;
  margin: 0 0 10px;
  padding: 10px;
  max-height: 22vh;
  overflow: auto;
  box-shadow: none;
 }

 .picker-chips {
  gap: 7px;
 }

 .picker-chip {
  min-height: 40px;
  padding: 7px 12px;
 }

 .picker-body {
  flex: 1 1 auto;
  min-height: 0;
  display: flex;
  flex-direction: column;
  gap: 10px;
  margin-top: 0;
  padding-top: 10px;
  overflow: hidden;
 }

 .picker-preview {
  flex: 0 0 auto;
  max-height: 42vh;
  overflow: auto;
  border-radius: 14px;
 }

 .picker-preview-full {
  gap: 12px;
 }

 .picker-preview-visual {
  max-height: 180px;
  aspect-ratio: 16 / 10;
 }

 .picker-preview-visual .pimg {
  padding: 10px;
 }

 .picker-preview-content {
  gap: 12px;
 }

 .picker-preview-desc {
  font-size: 0.88rem;
 }

 .picker-preview-actions .btn,
 .picker-preview-content > .btn {
  min-height: 44px;
  white-space: normal;
 }

 .picker-list {
  flex: 1 1 auto;
  min-height: 170px;
  max-height: none;
  overflow-y: auto;
  padding-right: 2px;
 }

 .picker-group {
  top: 0;
  padding: 8px 2px;
 }

 .picker-item {
  min-height: 74px;
  gap: 10px;
 }

 .picker-item .price {
  align-self: center;
  white-space: nowrap;
 }

 .picker-item-info strong {
  font-size: 0.86rem;
  overflow-wrap: anywhere;
 }

 .picker-gallery-arrow {
  width: 40px;
  height: 40px;
 }

 .picker-preview-thumb {
  flex-basis: 50px;
  width: 50px;
  height: 50px;
 }
}

@media (max-width: 420px) {
 .builder-summary-skip {
  width: 100%;
 }

 .builder-slot {
  grid-template-columns: 42px minmax(0, 1fr);
  padding: 12px;
 }

 .builder-slot-icon {
  width: 42px;
  height: 42px;
 }

 .builder-slot-actions {
  grid-template-columns: 1fr;
 }

 .builder-slot-actions .icon-btn {
  width: 100%;
  min-width: 0;
 }

 .picker-preview {
  max-height: 39vh;
 }

 .picker-item {
  grid-template-columns: 42px minmax(0, 1fr);
  display: grid;
 }

 .picker-item .price {
  grid-column: 2;
  justify-self: start;
 }
}

@media (prefers-reduced-motion: reduce) {
 html {
  scroll-behavior: auto;
 }

 *,
 *::before,
 *::after {
  animation-duration: 0.001ms !important;
  animation-iteration-count: 1 !important;
  scroll-behavior: auto !important;
  transition-duration: 0.001ms !important;
 }
}

/* ════════════════════════════════════════════════════════════════
   Navigation mobile — hamburger + tiroir latéral
   Placé en fin de feuille et sur-spécifié (.header …) pour passer
   devant la barre de nav scrollable héritée (≤1080px) : sur mobile
   on remplace la barre par un menu accessible donnant accès à toutes
   les catégories (les sous-menus déroulants n'existaient pas en mobile).
   ════════════════════════════════════════════════════════════════ */
@media (max-width: 1080px) {
 .header .nav { display: none; }
 .header .menu-btn { display: grid; place-items: center; }
}

/* ════════════════════════════════════════════════════════════════
   ACCUEIL · couche « premium » (pack complet)
   Tilt 3D + reflet des cartes, CTA magnétiques, révélation des
   sections au scroll et parallaxe du hero. Piloté par js/app.js
   → initHomeMotion(). 100 % transform/opacity (60 fps), différé
   (aucun impact LCP). Tout est sous prefers-reduced-motion:
   no-preference ET la couche JS ne s'arme jamais en reduced-motion.
   ════════════════════════════════════════════════════════════════ */
@media (prefers-reduced-motion: no-preference) {

 /* 1 · Tilt 3D des cartes (parallaxe au curseur). JS pose
    --tilt-x/-y (deg) et --tilt-lift (px). Le transform est en
    !important pour passer DEVANT l'animation « voltReveal … both »
    (un remplissage forwards/both verrouille sinon transform:none). */
 .void-home .product-card.is-tilt,
 .void-home .cat-card.is-tilt {
  transform:
   perspective(900px)
   rotateX(var(--tilt-x, 0deg))
   rotateY(var(--tilt-y, 0deg))
   translateY(var(--tilt-lift, 0px)) !important;
  transition: transform .14s ease-out, border-color .22s ease, box-shadow .28s ease;
  will-change: transform;
 }
 /* Retour au repos après le survol : easing souple */
 .void-home .product-card.is-tilt:not(:hover),
 .void-home .cat-card.is-tilt:not(:hover) {
  transition: transform .5s cubic-bezier(.22, .61, .36, 1);
 }

 /* Reflet spéculaire qui suit le curseur. JS pose --gx/--gy (%).
    Voile blanc discret : quasi invisible sur fond clair, net en
    thème sombre. Clippé par .product-visual (overflow:hidden). */
 .void-home .product-card.is-tilt .product-visual::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 3;
  pointer-events: none;
  opacity: 0;
  transition: opacity .25s ease;
  background: radial-gradient(200px circle at var(--gx, 50%) var(--gy, 0%),
   rgba(255, 255, 255, .22), rgba(255, 255, 255, 0) 55%);
 }
 .void-home .product-card.is-tilt:hover .product-visual::after { opacity: 1; }

 /* 2 · CTA magnétiques du hero. JS pose --mx/--my (px). */
 .void-hero .void-btn {
  transition: transform .18s cubic-bezier(.22, .61, .36, 1), background .18s ease, color .18s ease;
 }
 .void-hero .void-btn.is-magnetic {
  transform: translate(var(--mx, 0px), var(--my, 0px));
 }

 /* 3 · Révélation des sections au scroll (armée par JS → .is-in).
    État par défaut = visible : si le JS ne s'arme pas, rien n'est
    masqué (pas de FOUC). */
 .void-home .void-section.reveal-armed {
  opacity: 0;
  transform: translateY(34px);
  transition: opacity .7s cubic-bezier(.22, .61, .36, 1),
   transform .7s cubic-bezier(.22, .61, .36, 1);
  will-change: opacity, transform;
 }
 .void-home .void-section.reveal-armed.is-in {
  opacity: 1;
  transform: none;
 }

 /* 4 · Parallaxe douce du bloc texte du hero. JS pose --copy-shift. */
 .void-hero .void-copy {
  transform: translate3d(0, var(--copy-shift, 0px), 0);
  will-change: transform;
 }

 /* 5 · Balayage lumineux du CTA principal au survol (sheen sweep). */
 .void-hero .void-btn-primary { position: relative; overflow: hidden; }
 .void-hero .void-btn-primary > span,
 .void-hero .void-btn-primary > b { position: relative; z-index: 1; }
 .void-hero .void-btn-primary::before {
  content: "";
  position: absolute;
  top: 0; bottom: 0; left: -60%;
  width: 45%;
  z-index: 0;
  pointer-events: none;
  background: linear-gradient(100deg, transparent, rgba(255, 255, 255, .35), transparent);
  transform: skewX(-18deg);
  transition: left .6s ease;
 }
 .void-hero .void-btn-primary:hover::before { left: 130%; }

 /* 6 · Bandeau de marques : défilement continu (trust bar). Piste dupliquée
    côté template pour une boucle sans couture ; pause au survol. */
 .void-trust { overflow: hidden; -webkit-mask-image: linear-gradient(90deg, transparent, #000 12%, #000 88%, transparent); mask-image: linear-gradient(90deg, transparent, #000 12%, #000 88%, transparent); }
 .void-trust-track { flex-wrap: nowrap; width: max-content; justify-content: flex-start; animation: voltMarquee 32s linear infinite; }
 .void-trust:hover .void-trust-track { animation-play-state: paused; }
 @keyframes voltMarquee { from { transform: translateX(0); } to { transform: translateX(-50%); } }
}

/* ── Bandeau de marques (trust bar) : layout de base, toujours appliqué.
   En prefers-reduced-motion il reste une rangée statique centrée ; le bloc
   @media no-preference ci-dessus le transforme en défilement continu. */
.void-trust { position: relative; margin-top: clamp(38px, 6vw, 64px); padding: 16px 0; border-block: 1px solid var(--border); }
.void-trust-label { display: block; text-align: center; font-size: 0.72rem; letter-spacing: 0.16em; text-transform: uppercase; color: var(--text-faint); margin-bottom: 14px; }
.void-trust-track { display: flex; flex-wrap: wrap; justify-content: center; align-items: center; gap: 24px 56px; }
.void-trust-item { font-family: var(--font-display); font-weight: 700; font-size: 1.1rem; letter-spacing: 0.01em; color: var(--text-faint); white-space: nowrap; opacity: 0.78; transition: color 0.2s ease, opacity 0.2s ease; }
.void-trust-item:hover { color: var(--text); opacity: 1; }

/* ════════════════════════════════════════════════════════════════
   HERO « void / ice » — calques visuels (grille blueprint + lampe).
   L'intro et les interactions sont pilotées par GSAP (js/hero-gsap.js) :
   la LAMPE suit le curseur (GSAP pose --lx/--ly et la classe .is-lit) et
   révèle la grille dans l'obscurité. Theme-aware (color-mix sur --text).
   ════════════════════════════════════════════════════════════════ */
.void-h1-wrap { position: relative; display: inline-block; margin: 22px 0 16px; }
.void-h1 { margin: 0 !important; position: relative; }

/* Anti-flash : la copie est masquée tant que GSAP n'a pas pris la main
   (classe retirée par hero-gsap.js, ou par le fallback JS si le CDN GSAP est
   bloqué). Jamais masquée en reduced-motion. */
.void-copy.gsap-pending > * { opacity: 0; }
@media (prefers-reduced-motion: reduce) { .void-copy.gsap-pending > * { opacity: 1; } }

/* GSAP pilote la transform (x/y) des CTA → on coupe la transition transform
   CSS et la version magnétique CSS héritée pour éviter qu'elles luttent. */
.void-hero.gsap-hero .void-btn { transition: background .18s ease, color .18s ease; }
.void-hero.gsap-hero .void-btn.is-magnetic { transform: none; }

.void-grid {
 position: absolute; inset: 0; z-index: 1; pointer-events: none; opacity: 0;
 background-image:
  linear-gradient(color-mix(in srgb, var(--text) 13%, transparent) 1px, transparent 1px),
  linear-gradient(90deg, color-mix(in srgb, var(--text) 13%, transparent) 1px, transparent 1px);
 background-size: 46px 46px;
 -webkit-mask-image: radial-gradient(240px circle at var(--lx, 50%) var(--ly, 38%), #000 0%, rgba(0, 0, 0, .35) 42%, transparent 72%);
 mask-image: radial-gradient(240px circle at var(--lx, 50%) var(--ly, 38%), #000 0%, rgba(0, 0, 0, .35) 42%, transparent 72%);
 transition: opacity .5s ease;
}
.void-lamp {
 position: absolute; inset: 0; z-index: 1; pointer-events: none; opacity: 0;
 transition: opacity .5s ease;
 background: radial-gradient(280px circle at var(--lx, 50%) var(--ly, 38%),
  color-mix(in srgb, var(--text) 9%, transparent), transparent 66%);
}
.void-hero.is-lit .void-grid { opacity: .9; }
.void-hero.is-lit .void-lamp { opacity: 1; }

/* ════════════════════════════════════════════════════════════════
   FONDATIONS MOBILE (≤ 760px)
   Bloc unique en fin de feuille (priorité de cascade) : header compact
   sur une seule ligne, recherche déplacée dans le tiroir, cibles
   tactiles ≥ 44px, inputs ≥ 16px (anti-zoom iOS), zones sûres (encoche).
   La hauteur réelle de l'en-tête est ensuite auto-mesurée par
   setupViewportMetrics() → --fixed-header-h se recale tout seul.
   ════════════════════════════════════════════════════════════════ */
@media (max-width: 760px) {
 :root { --fixed-header-h: 58px; }

 /* En-tête compact : hamburger · logo · actions, sur UNE ligne.
    display:flex !important écrase le display:grid de la media-query 920px
    (sinon le logo se retrouvait à droite, sans texte, et les actions
    passaient sur une 2ᵉ ligne). Libère ~120px de hauteur. */
 .header {
  display: flex !important;
  flex-wrap: nowrap;
  align-items: center;
  gap: 10px;
  padding: 8px 14px;
  min-height: 58px;
  row-gap: 0;
 }
 .header .logo { font-size: 1.15rem; margin-right: auto; flex: 0 1 auto; min-width: 0; white-space: nowrap; }
 .header .nav { display: none !important; }
 .header-actions { gap: 4px; margin-left: 0; flex: none; flex-wrap: nowrap; }

 /* La recherche inline disparaît (y compris sur l'accueil) : elle est
    reprise dans le tiroir mobile via .mm-search. */
 .header-search,
 body.void-home-active .header-search { display: none; }

 /* Accueil : la scène « void » (3D + grille révélée au curseur) est vide et
    inutilisable sans souris → on la masque sur mobile et on ne garde que la
    copie, lisible immédiatement. Supprime aussi ~600px de blanc. */
 .void-stage, .void-field, .void-grid, .void-lamp, .void-depth, .void-scroll { display: none !important; }
 .void-hero { min-height: 0; padding-bottom: 20px; }
 .void-copy { max-width: none; }
 .void-copy.gsap-pending > * { opacity: 1 !important; }

 /* Cibles tactiles ≥ 44px (Apple HIG / WCAG 2.5.5). */
 .icon-btn { min-width: 44px; min-height: 44px; justify-content: center; padding: 8px; }
 .account-tab, .order-subtab, .auth-tab { min-height: 44px; }
 .filter-option { min-height: 40px; padding: 8px 0; }
 .nav-menu-link, .mm-link, .mm-cat, .mm-all { min-height: 44px; }
 .qty-picker button { min-width: 44px; min-height: 44px; }
 .btn { min-height: 44px; }
 .btn-sm { min-height: 40px; }

 /* Un input < 16px déclenche un zoom automatique au focus sur iOS. */
 input, select, textarea, .select { font-size: 16px; }

 /* Zones sûres (encoche / barre gestuelle) pour les éléments ancrés. */
 .cart-drawer-foot { padding-bottom: calc(20px + env(safe-area-inset-bottom)); }
 .mobile-menu { padding-bottom: env(safe-area-inset-bottom); }
 .compare-bar { bottom: calc(18px + env(safe-area-inset-bottom)); }

 /* Recherche intégrée au tiroir mobile (remplace la barre d'en-tête). */
 .mm-search {
  display: flex; align-items: center; gap: 10px;
  margin: 4px 4px 12px; padding: 12px 14px;
  background: var(--surface-2); border: 1px solid var(--border);
  border-radius: 12px; color: var(--text-faint);
 }
 .mm-search:focus-within { border-color: var(--accent); }
 .mm-search input {
  flex: 1; min-width: 0; background: none; border: none; outline: none;
  color: var(--text); font-size: 16px;
 }
 .mm-search svg { flex: none; }
}

/* ════════════════════════════════════════════════════════════════
   VIDÉOS GÉNÉRATIVES (pipeline Higgsfield) — hero + produits
   Activées par /videos/manifest.json ; sans assets, zéro coût.
   En fin de feuille exprès : doit gagner la cascade sur le masquage
   mobile de la scène (display:none !important, bloc ≤760px).
   ════════════════════════════════════════════════════════════════ */

/* Hero : la vidéo vit DANS la scène (cadre sombre assumé, cohérent dans
  les deux thèmes) — derrière la tour 3D en desktop (z 2 < canvas z 7). */
.void-video {
 position: absolute; inset: 0; width: 100%; height: 100%;
 object-fit: cover; border-radius: 28px;
 opacity: 0; transition: opacity 1.1s ease;
 z-index: 2; pointer-events: none;
 background: #07080c;
}
.void-video.on { opacity: 1; }

/* Tactile / mobile : la scène 3D est masquée (bloc mobile plus haut) —
  .has-video la réactive comme écrin de la vidéo, sous la copie. */
@media (hover: none), (max-width: 760px) {
 .void-hero.has-video .void-stage {
  display: block !important;
  position: relative;
  min-height: 0;
  margin-top: 26px;
  aspect-ratio: 16 / 10;
  overflow: hidden;
  border-radius: 22px;
 }
 .void-hero.has-video .void-video { border-radius: 22px; }
}

/* Cartes produit : mini-clip fondu par-dessus la photo au survol.
  Badges et actions restent au-dessus de la vidéo. */
.product-visual .pvid {
 position: absolute; inset: 0; width: 100%; height: 100%;
 object-fit: cover; opacity: 0; transition: opacity 0.35s ease;
 pointer-events: none; z-index: 1;
}
.product-visual .pvid.on { opacity: 1; }
.product-visual .badge, .product-page-visual .badge { z-index: 2; }

/* Fiche produit : la vidéo recouvre l'image principale à la demande. */
.pp-video {
 position: absolute; inset: 0; width: 100%; height: 100%;
 object-fit: cover; border-radius: inherit; background: #07080c;
}
.pp-thumb-video { position: relative; }
.pp-thumb-video::before {
 content: ""; position: absolute; inset: 0; z-index: 1;
 background: rgba(8, 10, 14, 0.42); border-radius: inherit;
}
.pp-thumb-video::after {
 content: ""; position: absolute; z-index: 2; left: 50%; top: 50%;
 width: 0; height: 0; transform: translate(-50%, -50%);
 border-left: 13px solid #fff;
 border-top: 8px solid transparent; border-bottom: 8px solid transparent;
 filter: drop-shadow(0 1px 3px rgba(0, 0, 0, 0.55));
}

/* Accessibilité : mouvement réduit → aucune vidéo n'est montée côté JS ;
  filet CSS si un navigateur change de préférence en cours de session. */
@media (prefers-reduced-motion: reduce) {
 .void-video, .product-visual .pvid { display: none !important; }
}