/*
  Copie experimentale: fond lab sombre inspire de l'image fournie,
  reconstruit sans motif texte.
*/

body[data-variant="performance-lab"],
body.performance-lab-how-page {
  --page-bg: #040507;
  --text-main: #f0f5ff;
  --text-muted: rgba(224, 232, 247, 0.8);
  --surface-1: rgba(10, 15, 25, 0.74);
  --surface-2: rgba(10, 15, 25, 0.62);
  --surface-3: rgba(10, 15, 25, 0.46);
  --line-color: rgba(255, 138, 102, 0.3);
  --accent-color: #ef8300;
  --accent-strong: #ef8300;
  --accent-soft: rgba(239, 131, 0, 0.2);
  --button-text: #0d121c;
  --shadow-soft: 0 30px 72px rgba(0, 0, 0, 0.5);
  color-scheme: dark;
  position: relative;
  isolation: isolate;
  background: #040507;
}

body[data-variant="performance-lab"]::before,
body.performance-lab-how-page::before {
  content: "";
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: -2;
  background-image:
    radial-gradient(circle, rgba(255, 115, 76, 0.95) 0 1px, transparent 1.35px),
    radial-gradient(circle, rgba(255, 140, 97, 0.55) 0 0.95px, transparent 1.45px),
    radial-gradient(circle, rgba(94, 126, 190, 0.34) 0 0.75px, transparent 1.2px);
  background-size: 8px 8px, 13px 13px, 4px 4px;
  background-position: 0 0, 4px 6px, 2px 2px;
  opacity: 0.82;
  filter: brightness(0.9) contrast(1.08);
  -webkit-mask-image:
    radial-gradient(ellipse 25% 20% at 14% 24%, #000 34%, transparent 68%),
    radial-gradient(ellipse 23% 18% at 30% 50%, #000 34%, transparent 70%),
    radial-gradient(ellipse 30% 24% at 52% 58%, #000 34%, transparent 70%),
    radial-gradient(ellipse 20% 15% at 70% 24%, #000 34%, transparent 70%),
    radial-gradient(ellipse 28% 20% at 84% 46%, #000 32%, transparent 70%),
    radial-gradient(ellipse 24% 17% at 78% 78%, #000 32%, transparent 70%);
  mask-image:
    radial-gradient(ellipse 25% 20% at 14% 24%, #000 34%, transparent 68%),
    radial-gradient(ellipse 23% 18% at 30% 50%, #000 34%, transparent 70%),
    radial-gradient(ellipse 30% 24% at 52% 58%, #000 34%, transparent 70%),
    radial-gradient(ellipse 20% 15% at 70% 24%, #000 34%, transparent 70%),
    radial-gradient(ellipse 28% 20% at 84% 46%, #000 32%, transparent 70%),
    radial-gradient(ellipse 24% 17% at 78% 78%, #000 32%, transparent 70%);
}

body[data-variant="performance-lab"]::after,
body.performance-lab-how-page::after {
  content: "";
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: -1;
  background:
    radial-gradient(circle at 22% 18%, rgba(92, 123, 184, 0.26), transparent 36%),
    radial-gradient(circle at 83% 22%, rgba(68, 89, 138, 0.22), transparent 34%),
    radial-gradient(circle at 52% 56%, rgba(255, 98, 52, 0.14), transparent 38%),
    radial-gradient(circle at center, transparent 38%, rgba(0, 0, 0, 0.7) 100%);
}

body[data-variant="performance-lab"][data-page="patches"] {
  background:
    radial-gradient(circle at 14% 12%, rgba(72, 123, 226, 0.26), transparent 28%),
    radial-gradient(circle at 86% 14%, rgba(255, 129, 79, 0.24), transparent 30%),
    linear-gradient(180deg, #04070e 0%, #070c16 44%, #060912 100%);
}

body[data-variant="performance-lab"][data-page="patches"]::before {
  background-image:
    radial-gradient(circle, rgba(255, 125, 83, 0.86) 0 1px, transparent 1.45px),
    radial-gradient(circle, rgba(97, 141, 232, 0.54) 0 0.9px, transparent 1.4px),
    radial-gradient(circle, rgba(86, 121, 197, 0.28) 0 0.8px, transparent 1.2px);
  background-size: 9px 9px, 12px 12px, 4px 4px;
  background-position: 0 0, 5px 6px, 2px 2px;
  opacity: 0.66;
  filter: brightness(0.92) contrast(1.06);
}

body[data-variant="performance-lab"][data-page="patches"]::after {
  background:
    radial-gradient(circle at 16% 22%, rgba(86, 126, 210, 0.34), transparent 34%),
    radial-gradient(circle at 84% 20%, rgba(255, 128, 84, 0.28), transparent 36%),
    radial-gradient(circle at 50% 68%, rgba(109, 149, 230, 0.16), transparent 42%),
    radial-gradient(circle at center, transparent 42%, rgba(0, 0, 0, 0.72) 100%);
}

body[data-variant="performance-lab"] .site-header__inner,
body.performance-lab-how-page .topbar-inner {
  background: rgba(8, 12, 20, 0.78);
  border-color: rgba(255, 150, 120, 0.24);
  box-shadow: 0 20px 52px rgba(0, 0, 0, 0.48);
}

body[data-variant="performance-lab"] .runline,
body.performance-lab-how-page .runline {
  border: 1px solid rgba(255, 146, 112, 0.28);
  border-radius: 0;
  background:
    repeating-linear-gradient(
      -35deg,
      rgba(255, 160, 128, 0.05) 0 2px,
      rgba(10, 14, 22, 0) 2px 8px
    ),
    radial-gradient(circle at 78% 24%, rgba(255, 104, 64, 0.18), transparent 36%),
    radial-gradient(circle at 24% 70%, rgba(88, 130, 208, 0.2), transparent 42%),
    linear-gradient(90deg, rgba(8, 13, 22, 0.92), rgba(14, 21, 33, 0.9), rgba(10, 15, 24, 0.92));
  box-shadow:
    0 10px 24px rgba(0, 0, 0, 0.35),
    inset 0 0 0 1px rgba(255, 174, 143, 0.1);
}

body[data-variant="performance-lab"] .runline__track,
body.performance-lab-how-page .runline__track {
  color: rgba(235, 242, 253, 0.92);
}

body[data-variant="performance-lab"] .site-brand__text small,
body[data-variant="performance-lab"] .site-nav__link,
body.performance-lab-how-page .page-switcher a,
body.performance-lab-how-page .how-axis-intro,
body.performance-lab-how-page .how-audience-intro {
  color: rgba(225, 235, 248, 0.78);
}

body[data-variant="performance-lab"] .site-nav__link:hover,
body[data-variant="performance-lab"] .site-nav__link:focus-visible,
body.performance-lab-how-page .page-switcher a:hover,
body.performance-lab-how-page .page-switcher a:focus-visible {
  color: #ffffff;
  border-color: rgba(255, 138, 102, 0.34);
  background: rgba(239, 131, 0, 0.1);
}

body[data-variant="performance-lab"] .site-nav__link.is-active,
body.performance-lab-how-page .page-switcher a.is-active {
  color: #ef8300;
  border-color: rgba(255, 138, 102, 0.4);
  background: linear-gradient(135deg, rgba(239, 131, 0, 0.24), rgba(88, 130, 208, 0.2));
}

body[data-variant="performance-lab"] .button--primary,
body.performance-lab-how-page .button--primary {
  background: linear-gradient(135deg, #ef8300, #ef8300);
  border-color: rgba(255, 150, 120, 0.52);
  color: #fff;
  box-shadow: 0 16px 30px rgba(255, 92, 52, 0.32);
}

body[data-variant="performance-lab"] .button--ghost,
body.performance-lab-how-page .button--ghost {
  border-color: rgba(255, 138, 102, 0.3);
  background: rgba(8, 13, 22, 0.72);
  color: #ecf3ff;
}

body[data-variant="performance-lab"] .metric-card,
body[data-variant="performance-lab"] .benefit-card,
body[data-variant="performance-lab"] .study-preview__panel,
body[data-variant="performance-lab"] .patch-card,
body[data-variant="performance-lab"] .summary-band__inner,
body[data-variant="performance-lab"] .pl-tech-trigger,
body[data-variant="performance-lab"] .pl-tech-panel,
body[data-variant="performance-lab"] .pl-how-step,
body[data-variant="performance-lab"] .luxury-home-tech-panel,
body[data-variant="performance-lab"] .luxury-home-tech-badge,
body[data-variant="performance-lab"] .luxury-home-tech-stage,
body[data-variant="performance-lab"] .luxury-home-tech-summary,
body[data-variant="performance-lab"] .pl-how-teaser,
body[data-variant="performance-lab"] .patch-showcase,
body.performance-lab-how-page .how-hero,
body.performance-lab-how-page .how-audience,
body.performance-lab-how-page .how-axes,
body.performance-lab-how-page .how-placement,
body.performance-lab-how-page .how-study-note,
body.performance-lab-how-page .how-audience-card,
body.performance-lab-how-page .how-hero__visual,
body.performance-lab-how-page .how-bodymap,
body.performance-lab-how-page .how-scenario,
body.performance-lab-how-page .how-scenario--toggle.is-active {
  background: rgba(8, 13, 22, 0.74);
  border-color: rgba(255, 145, 110, 0.24);
  box-shadow: 0 22px 48px rgba(0, 0, 0, 0.42);
}

body.performance-lab-how-page .how-claim {
  background:
    radial-gradient(circle at 86% 10%, rgba(255, 128, 94, 0.16), transparent 34%),
    linear-gradient(180deg, rgba(9, 14, 24, 0.92), rgba(14, 20, 32, 0.84));
  border-color: rgba(255, 145, 110, 0.24);
  box-shadow:
    inset 0 1px 0 rgba(255, 172, 146, 0.14),
    0 18px 40px rgba(0, 0, 0, 0.34);
}

body.performance-lab-how-page .how-claim h3 {
  color: #f5f9ff;
}

body[data-variant="performance-lab"] .metric-card strong,
body[data-variant="performance-lab"] .pl-how-step strong,
body[data-variant="performance-lab"] .luxury-home-tech-badge strong,
body[data-variant="performance-lab"] .luxury-home-tech-summary h3,
body[data-variant="performance-lab"] .patch-showcase__copy h2,
body[data-variant="performance-lab"] .pl-hero__signature-list span,
body.performance-lab-how-page .how-marker strong,
body.performance-lab-how-page .how-audience-card strong {
  color: #f5f9ff;
}

body[data-variant="performance-lab"] .luxury-home-tech-badge small,
body[data-variant="performance-lab"] .luxury-home-tech-summary p,
body[data-variant="performance-lab"] .patch-showcase__copy p,
body[data-variant="performance-lab"] .pl-how-step p,
body[data-variant="performance-lab"] .pl-how-teaser__copy p,
body.performance-lab-how-page .how-marker span,
body.performance-lab-how-page .how-audience-card p,
body.performance-lab-how-page .how-claim p {
  color: rgba(221, 232, 247, 0.82);
}

body[data-variant="performance-lab"] .luxury-home-tech-badge__label,
body[data-variant="performance-lab"] .pl-how-step span,
body[data-variant="performance-lab"] .pl-hero__signature-label,
body.performance-lab-how-page .how-audience-card span,
body.performance-lab-how-page .how-claim span {
  color: #ef8300;
}

body.performance-lab-how-page .how-claim span {
  border-color: rgba(255, 152, 120, 0.42);
  background: rgba(255, 126, 90, 0.16);
}

body[data-variant="performance-lab"] .pl-hero__signature-list span::before {
  background: rgba(255, 133, 98, 0.78);
}

body[data-variant="performance-lab"] .pl-hero__stage {
  border-color: rgba(255, 138, 102, 0.28);
  background:
    radial-gradient(circle at 50% 18%, rgba(255, 125, 88, 0.2), transparent 22%),
    linear-gradient(180deg, rgba(10, 14, 22, 0.96), rgba(16, 22, 34, 0.88));
  box-shadow: 0 34px 80px rgba(0, 0, 0, 0.45);
}

body[data-variant="performance-lab"] .pl-hero__stage::before {
  border-color: rgba(255, 138, 102, 0.22);
}

body[data-variant="performance-lab"] .pl-hero__glow {
  background: radial-gradient(circle, rgba(255, 114, 78, 0.3), transparent 72%);
}

body[data-variant="performance-lab"] .pl-hero__stage-pack {
  border-color: rgba(255, 138, 102, 0.24);
  background: #fff;
  box-shadow: inset 0 1px 0 rgba(255, 170, 145, 0.2);
}

body[data-variant="performance-lab"] .pl-how-teaser {
  background:
    radial-gradient(circle at 12% 10%, rgba(255, 112, 76, 0.18), transparent 30%),
    radial-gradient(circle at 86% 16%, rgba(92, 123, 184, 0.2), transparent 24%),
    linear-gradient(180deg, rgba(10, 14, 23, 0.96), rgba(13, 18, 30, 0.86));
  border-color: rgba(255, 145, 110, 0.28);
}

body[data-variant="performance-lab"] .pl-how-step {
  border-color: rgba(255, 145, 110, 0.24);
  background:
    linear-gradient(180deg, rgba(12, 18, 29, 0.95), rgba(16, 22, 34, 0.86)),
    rgba(10, 15, 24, 0.75);
  box-shadow: inset 0 1px 0 rgba(255, 160, 130, 0.16);
}

body[data-variant="performance-lab"] .pl-patch-showcase {
  background:
    radial-gradient(circle at 18% 18%, rgba(255, 106, 69, 0.2), transparent 26%),
    radial-gradient(circle at 84% 16%, rgba(92, 123, 184, 0.18), transparent 24%),
    linear-gradient(180deg, rgba(10, 14, 23, 0.96), rgba(12, 18, 30, 0.86));
}

body[data-variant="performance-lab"] .pl-patch-showcase .patch-showcase__frame {
  border-color: rgba(255, 145, 110, 0.28);
  background: rgba(9, 14, 23, 0.82);
}

body[data-variant="performance-lab"] .pl-patch-showcase .patch-showcase__frame.is-packaging {
  background: #fff;
}

body[data-variant="performance-lab"] .pl-patch-showcase .patch-showcase__frame--secondary {
  box-shadow: 0 20px 36px rgba(0, 0, 0, 0.4);
}

body[data-variant="performance-lab"] .pl-patch-showcase .patch-showcase__frame--secondary img {
  background: #fff;
}

body[data-variant="performance-lab"] .pl-patch-grid .patch-card__stage,
body[data-variant="performance-lab"] .pl-patch-grid .patch-card__thumb {
  border-color: rgba(255, 145, 110, 0.26);
  background: rgba(10, 16, 26, 0.72);
}

body[data-variant="performance-lab"] .pl-patch-grid .patch-card__stage {
  background: #ffffff;
}

body[data-variant="performance-lab"] .np-card {
  border-color: rgba(255, 145, 110, 0.3);
  background:
    radial-gradient(circle at 14% 12%, rgba(255, 119, 74, 0.18), transparent 28%),
    radial-gradient(circle at 86% 16%, rgba(92, 128, 204, 0.2), transparent 26%),
    linear-gradient(180deg, rgba(10, 15, 24, 0.94), rgba(14, 21, 34, 0.88));
  box-shadow:
    inset 0 1px 0 rgba(255, 168, 141, 0.14),
    0 28px 58px rgba(0, 0, 0, 0.42);
}

body[data-variant="performance-lab"] .np-stage {
  border-color: rgba(255, 145, 110, 0.3);
  background:
    radial-gradient(circle at 50% 14%, rgba(255, 133, 96, 0.14), transparent 34%),
    linear-gradient(180deg, rgba(9, 14, 23, 0.95), rgba(13, 19, 31, 0.88));
}

body[data-variant="performance-lab"] .np-thumb {
  border-color: rgba(255, 145, 110, 0.28);
  background: rgba(9, 15, 24, 0.72);
  color: #eef4ff;
}

body[data-variant="performance-lab"] .np-thumb.is-active {
  border-color: rgba(255, 145, 110, 0.48);
  background: linear-gradient(135deg, rgba(239, 131, 0, 0.2), rgba(92, 128, 204, 0.18));
}

body[data-variant="performance-lab"] .np-card__copy h2,
body[data-variant="performance-lab"] .np-headline {
  color: #f5f9ff;
}

body[data-variant="performance-lab"] .np-list li {
  color: rgba(224, 234, 248, 0.84);
}

body[data-variant="performance-lab"] .patch-card__footer span,
body[data-variant="performance-lab"] .patch-card__list li,
body[data-variant="performance-lab"] .patch-card__copy p {
  color: rgba(225, 235, 248, 0.84);
}

body[data-variant="performance-lab"] .patch-card__thumb.is-active {
  border-color: rgba(255, 145, 110, 0.46);
  background: rgba(239, 131, 0, 0.2);
}

body[data-variant="performance-lab"] .study-preview__metric,
body[data-variant="performance-lab"] .summary-band__tags span,
body[data-variant="performance-lab"] .source-link,
body[data-variant="performance-lab"] .study-preview__button,
body[data-variant="performance-lab"] .study-preview__link {
  border-color: rgba(255, 145, 110, 0.28);
  background: rgba(9, 14, 23, 0.74);
  color: #edf4ff;
}

body[data-variant="performance-lab"] .study-preview__button.is-active,
body[data-variant="performance-lab"] .luxury-home-tech-badge.is-active {
  border-color: rgba(255, 145, 110, 0.5);
  background:
    radial-gradient(circle at 84% 18%, rgba(239, 131, 0, 0.22), transparent 44%),
    linear-gradient(180deg, rgba(14, 20, 32, 0.95), rgba(18, 25, 39, 0.88));
}

body[data-variant="performance-lab"] .luxury-home-tech-summary__note,
body[data-variant="performance-lab"] .luxury-home-tech-summary__link {
  color: #edf4ff;
}

body.performance-lab-how-page .how-hero__visual,
body.performance-lab-how-page .how-bodymap {
  border-color: rgba(255, 145, 110, 0.3);
  background:
    radial-gradient(circle at 50% 10%, rgba(239, 131, 0, 0.18), transparent 34%),
    linear-gradient(180deg, rgba(10, 14, 23, 0.95), rgba(15, 20, 32, 0.88));
}

body.performance-lab-how-page .how-bodymap__figure-svg {
  filter: drop-shadow(0 12px 22px rgba(0, 0, 0, 0.42));
}

body.performance-lab-how-page .how-figure-fill {
  fill: rgba(222, 236, 255, 0.22);
  stroke: rgba(255, 164, 133, 0.7);
  stroke-width: 1.2;
}

body.performance-lab-how-page .how-figure-stroke {
  stroke: rgba(228, 239, 255, 0.58);
}

body.performance-lab-how-page .how-target {
  border-color: rgba(255, 237, 229, 0.96);
  background: #ef8300;
  box-shadow:
    0 0 0 7px rgba(239, 131, 0, 0.24),
    0 6px 14px rgba(0, 0, 0, 0.24);
}

body.performance-lab-how-page .how-marker {
  border-color: rgba(255, 145, 110, 0.28);
  background: rgba(10, 15, 24, 0.86);
  box-shadow: 0 14px 26px rgba(0, 0, 0, 0.3);
}

body.performance-lab-how-page .how-axis-card {
  background:
    radial-gradient(circle at 86% 10%, rgba(255, 132, 96, 0.14), transparent 34%),
    linear-gradient(180deg, rgba(9, 14, 24, 0.92), rgba(14, 20, 32, 0.84));
  border-color: rgba(255, 145, 110, 0.24);
  box-shadow:
    inset 0 1px 0 rgba(255, 172, 146, 0.12),
    0 18px 40px rgba(0, 0, 0, 0.34);
}

body.performance-lab-how-page .how-axis-card__head span {
  color: rgba(255, 168, 138, 0.88);
}

body.performance-lab-how-page .how-axis-card__head strong,
body.performance-lab-how-page .how-axis-card__meta strong {
  color: #f5f9ff;
}

body.performance-lab-how-page .how-axis-card__why,
body.performance-lab-how-page .how-axis-card__meta small {
  color: rgba(221, 232, 247, 0.84);
}

body.performance-lab-how-page .how-axis-source__link {
  border-color: rgba(255, 145, 110, 0.42);
  background: rgba(255, 145, 110, 0.12);
  color: #f5f9ff;
}

body.performance-lab-how-page .how-axis-source__link:hover,
body.performance-lab-how-page .how-axis-source__link:focus-visible {
  border-color: rgba(255, 145, 110, 0.82);
  background: rgba(255, 145, 110, 0.24);
}

body.performance-lab-how-page .how-axis-bar {
  border-color: rgba(255, 145, 110, 0.3);
  background:
    repeating-linear-gradient(
      90deg,
      rgba(221, 232, 247, 0.08) 0,
      rgba(221, 232, 247, 0.08) 24.5%,
      rgba(255, 145, 110, 0.2) 24.5%,
      rgba(255, 145, 110, 0.2) 25%
    ),
    rgba(7, 12, 20, 0.86);
}

body.performance-lab-how-page .how-axis-bar span {
  background: linear-gradient(90deg, #ef8300, #6f8fcd);
}

body.performance-lab-how-page .how-axis-legend span {
  border-color: rgba(255, 145, 110, 0.34);
  background: rgba(8, 13, 22, 0.78);
  color: rgba(230, 238, 250, 0.9);
}

body.performance-lab-how-page .how-scenario--toggle {
  border-color: rgba(255, 145, 110, 0.24);
  background: rgba(10, 15, 24, 0.78);
}

body.performance-lab-how-page .how-scenario strong,
body.performance-lab-how-page .how-scenario--toggle.is-active strong {
  color: #edf4ff;
}

body.performance-lab-how-page .how-scenario--toggle.is-active {
  border-color: rgba(255, 145, 110, 0.48);
  background:
    radial-gradient(circle at 86% 14%, rgba(239, 131, 0, 0.24), transparent 42%),
    linear-gradient(180deg, rgba(10, 15, 24, 0.96), rgba(17, 24, 38, 0.88));
  box-shadow: 0 16px 30px rgba(239, 131, 0, 0.18);
}

body.performance-lab-how-page .how-placement-switch__hint {
  color: rgba(221, 232, 247, 0.82);
}

body.performance-lab-how-page .how-placement-switch__status {
  color: #edf4ff;
  border-color: rgba(255, 145, 110, 0.34);
  background: rgba(9, 14, 23, 0.78);
}

@media (max-width: 900px) {
  body[data-variant="performance-lab"]::before,
  body.performance-lab-how-page::before {
    opacity: 0.7;
    -webkit-mask-image:
      radial-gradient(ellipse 38% 26% at 22% 24%, #000 36%, transparent 72%),
      radial-gradient(ellipse 42% 30% at 62% 58%, #000 35%, transparent 72%),
      radial-gradient(ellipse 38% 24% at 80% 18%, #000 34%, transparent 72%);
    mask-image:
      radial-gradient(ellipse 38% 26% at 22% 24%, #000 36%, transparent 72%),
      radial-gradient(ellipse 42% 30% at 62% 58%, #000 35%, transparent 72%),
      radial-gradient(ellipse 38% 24% at 80% 18%, #000 34%, transparent 72%);
  }
}