/* NEXOR : fichier généré. Modifier styles/*.css puis relancer scripts/build_css.py. */

/* SOURCE : styles/product.css */
/* Ajustements fonctionnels non intrusifs : identité visuelle conservée. */
.chart-data {
  margin: 12px 0 2px;
  border: 1px solid #3a3e42;
  border-radius: 8px;
  padding: 10px 14px;
  font-size: .83rem;
}
.chart-data summary {
  cursor: pointer;
  line-height: 1.6;
}
.chart-data th,.chart-data td {
  white-space: nowrap;
  padding: 7px 10px;
  text-align: right;
}
.chart-data th:first-child,.chart-data td:first-child {
  text-align: left;
}
.simulation-disclaimer {
  font-size: .73rem;
  color: #afbac2;
  line-height: 1.55;
  margin: 8px 4px 20px;
}
.challenge-outcome {
  border-top: 1px solid #3a3e42;
  padding: 12px 0 2px;
  margin: 10px 0 0;
  line-height: 1.5;
  font-size: .8rem;
}
.journal-backup {
  border: 1px solid #3a3e42;
  border-radius: 10px;
  padding: 20px;
  margin: 28px 0 12px;
  line-height: 1.5;
}
.journal-backup h2 {
  margin: 0 0 8px;
  font-size: 1.2rem;
}
.journal-backup p {
  font-size: .86rem;
  max-width: 730px;
}
.journal-backup-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  align-items: center;
}
.journal-backup-actions button,.backup-import-label {
  border: 1px solid #74808c;
  border-radius: 4px;
  background: transparent;
  color: inherit;
  padding: 10px 12px;
  cursor: pointer;
  font: inherit;
  font-size: .8rem;
}
.backup-import-label input {
  position: absolute;
  inline-size: 1px;
  block-size: 1px;
  opacity: 0;
  overflow: hidden;
}
.backup-import-label:focus-within {
  outline: 2px solid #c7d4dd;
  outline-offset: 2px;
}
#backup-status,#journal-status {
  min-height: 1em;
}
#order-form button:disabled {
  opacity: .5;
  cursor: not-allowed;
}
@media (max-width:720px) {
  .chart-data,.journal-backup {
    padding: 12px;
  }
  .journal-backup-actions {
    flex-direction: column;
    align-items: flex-start;
  }
}

/* --- Suite : styles/product.css --- */
/* NEXOR — correction du produit et des interactions. Hérite intégralement de la palette Work. */
:root {
  --product-mint: #d2e5ed;
  --product-ice: #c7d4dd;
  --product-line: #454c53;
  --product-surface: #282b2e;
}
[hidden], [data-prop-only][hidden] {
  display: none!important;
}
html:not([data-nexor-mode="prop"]) [data-prop-only] {
  display: none!important;
}
.app-rail .rail-label {
  padding-top: 14px;
  line-height: 1.65;
  letter-spacing: 1.1px;
}
.app-rail .rail-separator {
  margin: 18px 0 2px;
  border-top: 1px solid #3c4248;
}
.app-rail nav[data-prop-only] {
  margin-top: 4px;
}
.app-rail .rail-footer {
  line-height: 1.8;
}
.rail-lab-badge {
  display: block;
  color: var(--product-mint);
  font: 9px/1.6 monospace;
  letter-spacing: .4px;
  margin-bottom: 10px;
}
.workspace-app .app-header .connection-status {
  font-size: 10px;
  white-space: nowrap;
}
.workspace-app .app-header .connection-status .status-dot {
  background: #e0bd8b;
  box-shadow: none;
}
.workspace-app .paper-banner {
  background: #2f3235;
  color: #c7d4dd;
}
/* Only accessible when an evaluation exists; hidden elements never flash values. */
.challenge-locked [data-challenge-content] {
  display: none!important;
}
.challenge-gate {
  padding: clamp(32px,6vw,78px);
  margin: 14px 0 40px;
  border: 1px solid #515961;
  background: radial-gradient(ellipse at top right,#34373b 0%,#26282b 67%);
  min-height: 430px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: flex-start;
}
.challenge-gate h2 {
  font: 400 clamp(36px,4vw,58px)/1.1 'Helvetica Neue',Arial,sans-serif;
  letter-spacing: -2px;
  margin: 18px 0 16px;
}
.challenge-gate p {
  font: 14px/1.85 Arial;
  color: #b6c2ca;
  max-width: 650px;
}
.gate-actions {
  display: flex;
  gap: 24px;
  align-items: center;
  flex-wrap: wrap;
  margin: 25px 0;
}
.gate-note {
  color: #97a1a8;
  font: 10px/1.6 monospace;
}
/* Core workspace uses the original visual language, no decorative pseudo-3D diagrams. */
.core-workspace .ops-heading h1 {
  font-size: clamp(30px,3.3vw,52px);
  line-height: 1.15;
  letter-spacing: -1.8px;
}
.core-workspace .ops-heading h1 em {
  color: var(--product-mint);
  font-style: normal;
}
.core-hero-grid,.core-bottom-grid {
  display: grid;
  grid-template-columns: 1.35fr 1fr;
  gap: 22px;
  margin-bottom: 22px;
}
.core-intro {
  padding: 34px 36px;
  min-height: 345px;
  background: linear-gradient(125deg,#313538,#282b2e 75%);
}
.core-overline,.core-module-content .module-indicator {
  font: 10px monospace;
  letter-spacing: .7px;
  color: #bed6e1;
}
.core-intro h2 {
  font-size: clamp(27px,3vw,40px);
  font-weight: 400;
  letter-spacing: -1.4px;
  line-height: 1.18;
  margin: 24px 0 18px;
}
.core-intro p,.core-module-content p {
  font: 13px/1.9 Arial;
  color: #bdc9d2;
  max-width: 620px;
}
.core-actions {
  display: flex;
  gap: 20px;
  align-items: center;
  flex-wrap: wrap;
  margin-top: 28px;
}
.core-status .ops-limits dd {
  max-width: 185px;
  line-height: 1.6;
}
.pipeline-panel {
  margin-bottom: 22px;
}
.pipeline-flow {
  list-style: none;
  margin: 0;
  padding: 25px 30px 28px;
  display: grid;
  grid-template-columns: repeat(4,minmax(0,1fr));
  gap: 0;
}
.pipeline-flow li {
  border-top: 1px solid #4e565e;
  padding: 21px 16px 24px 4px;
  min-width: 0;
  position: relative;
}
.pipeline-flow li:not(:last-child):after {
  content: '→';
  position: absolute;
  right: 15px;
  top: 10px;
  color: var(--product-mint);
  font: 20px Arial;
}
.pipeline-flow li>span {
  display: block;
  font: 10px monospace;
  color: #9ea9b0;
  letter-spacing: 1px;
  margin-bottom: 17px;
}
.pipeline-flow strong {
  font-size: 16px;
  font-weight: 500;
  color: #f0f6fa;
}
.pipeline-flow p {
  font: 11px/1.7 Arial;
  color: #afbac2;
  margin: 12px 0 24px;
  padding-right: 15px;
}
.pipeline-flow small {
  font: 9px/1.5 monospace;
  color: #b2bec6;
}
.core-bottom-grid {
  grid-template-columns: 1fr 1fr;
}
.core-module-content {
  padding: 25px;
}
.core-module-content .module-indicator {
  display: block;
  border-left: 2px solid var(--product-mint);
  padding: 8px 0 8px 13px;
  margin-top: 18px;
}
/* Settings: compact rectangular controls, no gigantic circular buttons. */
.member-page .member-form .button,.member-page .member-actions .quiet-button,.member-page .member-form .quiet-button {
  min-height: 38px;
  max-width: 100%;
  border-radius: 4px!important;
  padding: 9px 16px!important;
  line-height: 1.4;
  font-size: 11px!important;
  white-space: normal;
  text-align: center;
}
.member-page .member-actions {
  gap: 10px;
}
.member-page .member-actions .quiet-button {
  border: 1px solid #59626b;
  background: #323639;
}
.member-page .profile-avatar {
  border-radius: 7px;
  width: 52px;
  height: 52px;
  font-size: 17px;
}
.member-page .preference-row {
  gap: 16px;
}
.member-page .preference-row input[type=checkbox] {
  height: 22px;
  width: 39px;
  min-width: 39px;
  border-radius: 5px;
}
.member-page .preference-row input[type=checkbox]:before {
  height: 14px;
  width: 14px;
  border-radius: 3px;
}
.member-page .preference-row input[type=checkbox]:checked:before {
  transform: translateX(17px);
}
.member-page .tour-launch,.workspace-app .tour-launch {
  border-radius: 5px;
  height: 33px;
  width: 33px;
}
.member-page .member-form {
  padding: 23px;
}
.module-settings {
  background: #303437;
  border: 1px solid #52756d;
  padding: 18px 20px;
  margin: 12px -4px 26px;
}
.module-setting-overline {
  font: 9px monospace;
  letter-spacing: 1px;
  color: var(--product-mint);
  margin-bottom: 17px;
}
.module-settings .module-preference {
  margin: 0 0 14px;
  padding: 0 0 16px;
}
.module-settings p {
  font: 11px/1.8 Arial;
  color: #b5c1c9;
  margin: 0 0 14px;
}
.module-launch {
  display: inline-block;
  color: #d2e5ed;
  font: 11px monospace;
  padding: 9px 0;
  border-bottom: 1px solid #bed6e1;
}
/* Landing: visually consistent editorial challenge offers below the fold. */
.product-separation,.landing-offers {
  padding-top: 90px;
  padding-bottom: 94px;
  border-top: 1px solid #3d444a;
}
.product-split-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 20px;
  margin-top: 48px;
}
.product-split-grid article {
  border: 1px solid #495158;
  background: #27292c;
  padding: 34px;
  min-height: 350px;
  display: flex;
  align-items: flex-start;
  flex-direction: column;
}
.product-split-test {
  background: #2a2d30!important;
  border-color: #4f575f!important;
}
.product-split-grid h3 {
  font-size: clamp(25px,3vw,38px);
  font-weight: 400;
  letter-spacing: -1.2px;
  margin: 25px 0 12px;
}
.product-split-grid p {
  max-width: 540px;
  font: 13px/1.85 Arial;
  color: #b6c2ca;
  margin: 0 0 24px;
}
.product-split-grid .text-link {
  margin-top: auto;
}
.split-flow {
  display: flex;
  align-items: center;
  gap: 12px;
  flex-wrap: wrap;
  margin: 2px 0 30px;
  color: #bbc7d0;
  font: 9px monospace;
  letter-spacing: .4px;
}
.split-flow span {
  border: 1px solid #525b63;
  padding: 11px 13px;
  white-space: nowrap;
}
.split-flow i {
  font-style: normal;
  color: #d2e5ed;
}
.landing-offer-grid {
  display: grid;
  grid-template-columns: repeat(4,minmax(0,1fr));
  gap: 12px;
  margin-top: 44px;
}
.landing-offer-grid article {
  background: #303336;
  border: 1px solid #4f575f;
  min-height: 270px;
  padding: 26px 20px;
  display: flex;
  flex-direction: column;
  transition: border-color .2s,background .2s;
}
.landing-offer-grid article:hover {
  border-color: #bed6e1;
  background: #373b3f;
}
.landing-offer-grid article>span {
  font: 10px monospace;
  color: #bac6cf;
  letter-spacing: 1px;
}
.landing-offer-grid strong {
  font: 400 clamp(28px,3vw,43px) 'Helvetica Neue',Arial;
  letter-spacing: -1.4px;
  color: #ecf5f7;
  margin: 28px 0 5px;
}
.landing-offer-grid strong small {
  font: 10px monospace;
  color: #bbc7d0;
  letter-spacing: 0;
}
.landing-offer-grid p {
  font: 11px/1.7 Arial;
  color: #b5c1c9;
  margin: 0 0 27px;
}
.landing-offer-grid a {
  margin-top: auto;
  border-top: 1px solid #4f575f;
  padding: 16px 0 0;
  font: 12px Arial;
  color: #d2e5ed;
}
.landing-offer-footer {
  margin-top: 24px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
  flex-wrap: wrap;
}
.landing-offer-footer span {
  font: 9px monospace;
  color: #b0bcc4;
  line-height: 1.7;
}
.landing-offer-footer a {
  font: 11px Arial;
  border-bottom: 1px solid #bed6e1;
  padding: 8px 0;
}
/* Challenge Hub */
.challenge-hub-intro {
  padding: 30px 34px;
  margin-bottom: 22px;
  background: #313538;
}
.challenge-hub-intro h2 {
  font-size: clamp(20px,2.3vw,30px);
  font-weight: 400;
  letter-spacing: -.8px;
  margin: 18px 0;
}
.challenge-hub-intro p {
  font-size: 12px;
  line-height: 1.8;
  color: #b5c1c9;
  max-width: 720px;
  margin-bottom: 24px;
}
.hub-offers-grid {
  display: grid;
  grid-template-columns: repeat(4,1fr);
  gap: 14px;
  margin: 24px 0;
}
.hub-offers-grid article {
  min-height: 240px;
  padding: 23px;
  display: flex;
  flex-direction: column;
}
.hub-offers-grid article>span {
  font: 9px monospace;
  letter-spacing: 1px;
  color: #b7c3cb;
}
.hub-offers-grid h3 {
  font: 400 clamp(21px,2.2vw,33px) Arial;
  margin: 23px 0 12px;
  letter-spacing: -.5px;
}
.hub-offers-grid h3 small {
  font: 10px monospace;
  color: #b1bdc5;
}
.hub-offers-grid p {
  font: 11px/1.6 Arial;
  color: #b0bcc4;
}
.hub-offers-grid button {
  width: 100%;
  text-align: left;
  margin-top: auto;
  border: 0;
  border-top: 1px solid #4f575f;
  padding: 15px 0 0;
  background: transparent;
  color: #d2e5ed;
  font: 12px Arial;
}
.hub-attempt-list {
  padding: 12px 22px;
}
.hub-attempt {
  display: flex;
  align-items: center;
  text-align: left;
  gap: 14px;
  width: 100%;
  padding: 19px 8px;
  border: 0;
  border-bottom: 1px solid #3e454b;
  background: transparent;
  color: #dceaf4;
}
.hub-attempt:last-child {
  border-bottom: 0;
}
.hub-attempt strong {
  font-weight: 500;
  font-size: 13px;
}
.hub-attempt small {
  font-size: 10px;
  color: #b0bcc4;
  margin-left: auto;
}
.hub-attempt>span {
  color: #bed6e1;
}
.hub-empty {
  font: 12px/1.8 Arial;
  color: #b1bdc5;
}
/* Proper interactive SVG charts; no fake hover-only 'chart'. */
.performance-panel {
  margin-bottom: 23px;
}
.performance-head>div {
  display: flex;
  flex-direction: column;
  gap: 7px;
}
.panel-eyebrow {
  font: 9px monospace;
  color: #adb8c0;
}
.performance-head h2 {
  font-size: 17px;
  font-weight: 500;
  line-height: 1.4;
}
.performance-head .chart-legend {
  font: 10px monospace;
  color: #d2e5ed;
}
.performance-controls {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 12px;
  padding: 15px 20px 2px;
  flex-wrap: wrap;
}
.chart-range,.chart-pan-actions {
  display: flex;
  align-items: center;
  gap: 6px;
}
.chart-range button,.chart-pan-actions button {
  border: 1px solid #515961;
  background: #303437;
  color: #cddbe4;
  min-height: 32px;
  min-width: 33px;
  padding: 6px 9px;
  border-radius: 3px;
  font: 11px monospace;
  transition: background .15s,border-color .15s;
}
.chart-range button[aria-pressed=true],.chart-range button.selected {
  background: #464d54;
  color: #d2e5ed;
  border-color: #bed6e1;
}
.chart-pan-actions button:hover:not(:disabled),.chart-range button:hover:not(:disabled) {
  background: #3e454b;
  border-color: #becad3;
}
.chart-pan-actions button:disabled {
  opacity: .35;
  cursor: not-allowed;
}
.performance-canvas {
  position: relative;
  margin: 0 18px;
  padding-top: 12px;
  min-height: 320px;
}
#performance-chart {
  width: 100%;
  height: auto;
  display: block;
  touch-action: pan-y;
  cursor: grab;
  min-height: 220px;
  max-height: 380px;
}
#performance-chart:active,.desk-chart svg:active {
  cursor: grabbing;
}
#performance-tooltip {
  margin: 0 8px 12px;
  font: 11px/1.6 monospace;
  color: #c5d2db;
  min-height: 18px;
}
.performance-footnote {
  padding: 4px 22px 22px;
  font: 10px/1.7 Arial;
  color: #99a3aa;
}
.terminal-pan {
  margin-left: auto;
}
.workspace-app .chart-controls {
  flex-wrap: wrap;
  gap: 12px;
  padding-bottom: 10px;
}
.workspace-app .desk-chart svg {
  touch-action: pan-y;
  cursor: grab;
}
#chart-readout {
  font-size: 10px;
  line-height: 1.5;
}
/* All focusable graph controls must remain readable, including compact settings. */
.product-split-grid a:focus-visible,.landing-offer-grid a:focus-visible,.chart-pan-actions button:focus-visible,.module-launch:focus-visible,.hub-attempt:focus-visible {
  outline: 2px solid #d2e5ed;
  outline-offset: 4px;
}
@media(max-width:1150px) {
  .core-hero-grid {
    grid-template-columns: 1fr 1fr;
  }
  .core-intro {
    padding: 25px;
  }
  .pipeline-flow {
    grid-template-columns: repeat(2,minmax(0,1fr));
  }
  .hub-offers-grid,.landing-offer-grid {
    grid-template-columns: repeat(2,minmax(0,1fr));
  }
  .terminal-pan {
    margin-left: 0;
  }
}
@media(max-width:800px) {
  .core-hero-grid,.core-bottom-grid,.product-split-grid {
    grid-template-columns: 1fr;
  }
  .pipeline-flow {
    grid-template-columns: 1fr 1fr;
  }
  .landing-offers,.product-separation {
    padding-top: 60px;
    padding-bottom: 65px;
  }
  .core-workspace .ops-heading {
    align-items: flex-start;
  }
  .core-workspace .ops-heading .button {
    padding: 10px 13px;
    font-size: 11px;
  }
  .landing-offer-grid article {
    min-height: 215px;
  }
}
@media(max-width:600px) {
  .core-workspace .ops-heading,.challenge-hub .ops-heading {
    flex-wrap: wrap;
    align-items: flex-start;
  }
  .core-intro {
    padding: 22px;
    min-height: 0;
  }
  .pipeline-flow {
    grid-template-columns: 1fr;
    padding: 15px 20px;
  }
  .pipeline-flow li:not(:last-child):after {
    top: 10px;
  }
  .hub-offers-grid,.landing-offer-grid {
    grid-template-columns: 1fr 1fr;
    gap: 9px;
  }
  .hub-offers-grid article {
    padding: 17px;
    min-height: 195px;
  }
  .hub-offers-grid h3 {
    font-size: 22px;
  }
  .landing-offer-grid article {
    padding: 17px 13px;
    min-height: 238px;
  }
  .landing-offer-grid strong {
    font-size: 25px;
    white-space: nowrap;
  }
  .product-split-grid article {
    padding: 22px;
    min-height: 300px;
  }
  .split-flow {
    gap: 6px;
  }
  .split-flow span {
    padding: 8px;
    font-size: 8px;
  }
  .performance-controls {
    padding: 12px;
  }
  .performance-canvas {
    margin: 0 8px;
    min-height: 215px;
  }
  .performance-head {
    flex-wrap: wrap;
  }
  .challenge-gate {
    padding: 28px 22px;
    min-height: 360px;
  }
  .challenge-gate h2 {
    font-size: 33px;
  }
  .member-page .member-actions .quiet-button,.member-page .member-actions .button {
    width: 100%;
  }
  .workspace-app .app-header .connection-status {
    display: none;
  }
}
@media(prefers-reduced-motion:reduce) {
  .landing-offer-grid article,.chart-pan-actions button,.chart-range button {
    transition: none;
  }
  .product-split-grid,.performance-panel {
    scroll-behavior: auto;
  }
}
html.motion-reduced .landing-offer-grid article,html.motion-reduced .chart-pan-actions button {
  transition: none!important;
}
/* Consistent modal transition: no scale/perspective effect on return. */
#challenge-dialog[open] {
  animation: challenge-open .18s ease-out;
}
.challenge-card {
  transform-origin: top left;
  transition: background .2s,border-color .2s,box-shadow .2s!important;
}
.challenge-stage.selected-offer .challenge-recap {
  animation: recap-arrive .22s ease-out;
}
.challenge-card:focus-visible {
  outline: 2px solid #bed6e1!important;
  outline-offset: 4px;
}
/* Calm down disorienting marketing mock-up perspective while retaining the original layered devices, color, typography and shadows. */
.marketing .desktop-frame {
  transform: rotateY(-4deg) rotateX(1deg) rotateZ(-.5deg);
  box-shadow: 0 20px 55px #0005,14px 18px 0 -10px #42484f;
}
.marketing .desktop-foot {
  transform: none;
}
.marketing .wide-device {
  transform: rotateY(2deg);
  transform-origin: center center;
}
.marketing .phone-device {
  transform: translateY(6px);
  box-shadow: 8px 18px 45px #0007;
}
.marketing .floating-note {
  transform: rotate(2deg);
}
.challenge-card {
  animation: none!important;
}
.evaluation-body {
  padding: 18px 0 0;
}
.evaluation-kpi {
  padding: 3px 24px 22px;
  display: flex;
  flex-direction: column;
  gap: 11px;
}
.evaluation-kpi span {
  font: 11px Arial;
  color: #b9c4cd;
}
.evaluation-kpi strong {
  font: 400 21px monospace;
  color: #dcebf5;
}
.evaluation-kpi progress {
  width: 100%;
  height: 5px;
  accent-color: #d2e5ed;
  border: 0;
}
.evaluation-kpi progress::-webkit-progress-bar {
  background: #454c53;
}
.evaluation-kpi progress::-webkit-progress-value {
  background: #d2e5ed;
}
.evaluation-note {
  margin: 4px 24px 22px;
  color: #b0bcc4;
  font: 11px/1.75 Arial;
}
@media(prefers-reduced-motion:reduce) {
  .marketing .desktop-frame,.marketing .wide-device,.marketing .phone-device,.marketing .floating-note {
    transform: none!important;
  }
}
.mobile-module-launch {
  display: none;
}
.mobile-nav-scrim {
  position: fixed;
  inset: 0;
  background: #020a12a8;
  z-index: 32;
}
@media(max-width:650px) {
  .app-rail>nav:first-of-type {
    grid-template-columns: repeat(4,minmax(0,1fr));
  }
  .app-rail nav .mobile-module-launch {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    gap: 2px;
    min-height: 54px;
    padding: 4px 2px;
    background: transparent;
    border: 1px solid transparent;
    border-radius: 4px;
    color: #bac6cf;
    font-size: 9px;
  }
  .mobile-module-launch span {
    font: 19px/1.3 Arial;
    color: #bed6e1;
  }
  .mobile-module-launch small {
    font: 9px Arial;
  }
  .app-rail.mobile-prop-open .mobile-module-launch {
    background: #373a3e;
    border-color: #717c88;
  }
  .app-rail.mobile-prop-open nav[data-prop-only] {
    display: flex!important;
    flex-direction: column;
    position: absolute;
    bottom: calc(100% + 8px);
    left: 8px;
    right: 8px;
    padding: 11px;
    gap: 3px;
    background: #27292c;
    border: 1px solid #626c76;
    box-shadow: 0 -15px 40px #0009;
    z-index: 35;
  }
  .app-rail.mobile-prop-open nav[data-prop-only] a {
    display: flex;
    flex-direction: row;
    justify-content: flex-start;
    gap: 13px;
    min-height: 42px;
    font-size: 12px;
    padding: 10px;
  }
  .app-rail.mobile-prop-open nav[data-prop-only] a>span {
    width: 24px;
    text-align: center;
    font-size: 17px;
  }
}
/* A dashboard entry is offered only after a challenge exists; the page itself is also gated. */
html:not(.challenge-nav-enabled) [data-challenge-nav] {
  display: none!important;
}


/* SOURCE : styles/mode-selector.css */
/* V4 · Choix de mode. Palette, typographie et tracés du thème Work NEXOR. */
.mode-launcher {
  cursor: pointer;
  font: inherit;
}
.mode-selector-open {
  overflow: hidden;
}
#mode-selector {
  inset: 0;
  width: 100vw;
  max-width: none;
  height: 100dvh;
  max-height: none;
  margin: 0;
  border: 0;
  padding: 0;
  color: #eef6f8;
  background: #1d1f21;
  overflow-y: auto;
  overscroll-behavior: contain;
}
#mode-selector[open] {
  display: block;
  animation: mode-in .38s cubic-bezier(.18,.78,.28,1);
}
#mode-selector::backdrop {
  background: #030709e8;
}
.mode-shell {
  width: min(1480px,100%);
  min-height: 100%;
  margin: auto;
  display: flex;
  flex-direction: column;
  padding: clamp(18px,2.5vw,40px) clamp(18px,4vw,68px);
  box-sizing: border-box;
}
.mode-topline,.mode-bottomline {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
  font: 10px/1.6 monospace;
  letter-spacing: 1.1px;
  color: #9ba5ac;
}
.mode-wordmark {
  color: #f2f7fa;
  font: 600 23px/1 Arial,Helvetica,sans-serif;
  letter-spacing: -1px;
}
.mode-wordmark span {
  font: 10px monospace;
  color: #9da7ae;
  letter-spacing: 1px;
  margin-left: 14px;
}
.mode-close {
  font: 11px monospace;
  border: 1px solid #515a62;
  background: #2d3033;
  color: #dceaf4;
  padding: 12px 18px;
  display: inline-flex;
  gap: 14px;
  align-items: center;
  justify-content: center;
  min-width: 44px;
  cursor: pointer;
  min-height: 44px;
  border-radius: 2px;
  transition: background .2s;
}
.mode-close:hover {
  background: #3e4347;
}
.mode-close:focus-visible,.mode-choice:focus-visible,.mode-launcher:focus-visible {
  outline: 2px solid #d2e5ed;
  outline-offset: 4px;
}
.mode-intro {
  display: grid;
  grid-template-columns: 1fr minmax(210px,390px);
  column-gap: 32px;
  margin: clamp(24px,3vw,46px) 0 25px;
  align-items: end;
}
.mode-eyebrow {
  grid-column: 1/-1;
  color: #bed6e1;
  font: 10px monospace;
  letter-spacing: 1.4px;
  margin-bottom: 12px;
}
.mode-intro h2 {
  font: 400 clamp(37px,4.6vw,69px)/1.05 'Helvetica Neue',Arial,sans-serif;
  letter-spacing: -2.8px;
  margin: 0;
}
.mode-intro h2 em {
  color: #c9d6df;
  font-style: normal;
}
.mode-intro p {
  font: 13px/1.8 Arial;
  color: #b5c1c9;
  max-width: 350px;
  margin: 0 0 5px;
}
.mode-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 15px;
  flex: 1;
  min-height: 390px;
}
.mode-choice {
  position: relative;
  min-height: 410px;
  padding: clamp(20px,2.8vw,42px);
  border: 1px solid #515a62;
  color: #f1f7f9;
  background: linear-gradient(143deg,#313538 0%,#282a2d 56%,#232628 100%);
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  text-decoration: none;
  overflow: hidden;
  isolation: isolate;
  transition: border-color .25s,background .25s,transform .35s cubic-bezier(.2,.8,.2,1);
}
.mode-choice:before {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(120deg,transparent 30%,#ffffff0a 52%,transparent 75%);
  transform: translateX(-110%);
  transition: transform .8s cubic-bezier(.2,.8,.2,1);
  z-index: -1;
}
.mode-choice:hover,.mode-choice:focus-visible {
  transform: translateY(-4px);
  border-color: #bed6e1;
}
.mode-choice:hover:before,.mode-choice:focus-visible:before {
  transform: translateX(110%);
}
.mode-trading {
  background: linear-gradient(145deg,#34373b 0%,#2c2f32 54%,#242729 100%);
  border-color: #606a74;
}
.mode-choice-top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  color: #b5c1c9;
  font: 10px monospace;
  letter-spacing: 1px;
  position: relative;
  z-index: 1;
}
.mode-arrow {
  border: 1px solid #69737e;
  color: #dceaf4;
  min-width: 38px;
  height: 38px;
  display: grid;
  place-items: center;
  font: 23px Arial;
}
.mode-graphic {
  height: 90px;
  position: relative;
  display: block;
  pointer-events: none;
  opacity: .55;
  margin: 8px 0;
}
.mode-prop-graphic {
  display: flex;
  align-items: flex-end;
  gap: 10px;
}
.mode-prop-graphic i {
  display: block;
  width: 14%;
  border: 1px solid #97a1a8;
  background: #a6a0c123;
}
.mode-prop-graphic i:nth-child(1) {
  height: 34%;
}
.mode-prop-graphic i:nth-child(2) {
  height: 65%;
}
.mode-prop-graphic i:nth-child(3) {
  height: 47%;
}
.mode-prop-graphic i:nth-child(4) {
  height: 84%;
}
.mode-trading-graphic {
  display: flex;
  align-items: center;
}
.mode-trading-graphic:before {
  content: '';
  position: absolute;
  left: 0;
  right: 0;
  top: 50%;
  height: 1px;
  background: #9ccebe69;
}
.mode-trading-graphic i {
  display: block;
  width: 24%;
  height: 3px;
  background: #bed6e1;
  transform: rotate(-25deg);
  margin-right: 4%;
  opacity: .9;
}
.mode-trading-graphic i:nth-of-type(2) {
  transform: rotate(18deg);
}
.mode-trading-graphic i:nth-of-type(3) {
  transform: rotate(-32deg);
}
.mode-choice-bottom {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  position: relative;
  z-index: 1;
}
.mode-kicker {
  font: 10px monospace;
  letter-spacing: 1px;
  color: #bed6e1;
  margin-bottom: 13px;
}
.mode-prop .mode-kicker {
  color: #b6c2ca;
}
.mode-choice strong {
  display: block;
  font: 400 clamp(40px,4.7vw,74px)/.97 'Helvetica Neue',Arial,sans-serif;
  letter-spacing: -2.8px;
  margin-bottom: 20px;
}
.mode-choice .mode-description {
  font: 12px/1.8 Arial;
  color: #bdc9d2;
  max-width: 420px;
  min-height: 48px;
}
.mode-action {
  display: flex;
  justify-content: space-between;
  align-items: center;
  width: 100%;
  margin-top: 24px;
  border-top: 1px solid #5a636c;
  padding-top: 15px;
  color: #d4efe7;
  font: 12px Arial;
}
.mode-action>span {
  font-size: 23px;
}
.mode-prop-inactive .mode-action {
  color: #eed6ad;
}
.mode-bottomline {
  padding-top: 24px;
  flex-wrap: wrap;
  font-size: 9px;
  letter-spacing: .3px;
}
@keyframes mode-in {
  from {
    opacity: 0;
    transform: scale(1.015);
  }
  to {
    opacity: 1;
    transform: scale(1);
  }
}
@media(max-width:800px) {
  .mode-intro {
    display: block;
    margin: 30px 0;
  }
  .mode-intro p {
    margin-top: 16px;
  }
  .mode-grid {
    grid-template-columns: 1fr;
    min-height: 0;
  }
  .mode-choice {
    min-height: 335px;
  }
  .mode-graphic {
    height: 40px;
  }
  .mode-choice strong {
    font-size: clamp(40px,8vw,64px);
  }
  .mode-bottomline {
    padding-top: 20px;
  }
}
@media(max-width:440px) {
  .mode-shell {
    padding: 18px 15px;
  }
  .mode-topline {
    align-items: flex-start;
  }
  .mode-wordmark span {
    display: block;
    margin: 9px 0 0;
  }
  .mode-close {
    padding: 8px 10px;
  }
  .mode-close span {
    display: none;
  }
  .mode-intro h2 {
    letter-spacing: -1.2px;
    font-size: 36px;
  }
  .mode-choice {
    padding: 23px 20px;
    min-height: 300px;
  }
  .mode-choice strong {
    font-size: 42px;
    letter-spacing: -1.6px;
  }
  .mode-graphic {
    height: 24px;
  }
  .mode-bottomline {
    gap: 7px;
  }
}
@media(prefers-reduced-motion:reduce) {
  #mode-selector[open] {
    animation: none;
  }
  .mode-choice,.mode-choice:before,.mode-close {
    transition: none;
  }
  .mode-choice:hover {
    transform: none;
  }
}

/* --- Suite : styles/mode-entry.css --- */
/* V5 — accès explicite aux modes immédiatement après Accueil, dans le workspace. */
.workspace-app .app-header {
  height: auto;
  min-height: 91px;
  gap: 12px;
  flex-wrap: wrap;
}
.home-mode-shortcuts {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: nowrap;
  flex: 0 0 auto;
}
.app-home-link,.app-mode-launcher {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  min-height: 44px;
  padding: 11px 13px;
  font: 11px/1.2 'Helvetica Neue',Arial,sans-serif;
  letter-spacing: .2px;
  text-decoration: none;
  border-radius: 3px;
  white-space: nowrap;
}
.app-home-link {
  color: #b7c3cb;
  border: 1px solid #4e565e;
  background: #232628;
}
.app-mode-launcher {
  color: #183228;
  background: #d2e5ed;
  border: 1px solid #d2e5ed;
  font-weight: 600;
  cursor: pointer;
}
.app-mode-launcher span {
  font-size: 18px;
  line-height: 1;
}
.app-home-link:hover {
  color: #dceaf4;
  border-color: #9ba5ac;
}
.app-mode-launcher:hover {
  background: #d2e5ed;
  border-color: #d2e5ed;
}
.app-home-link:focus-visible,.app-mode-launcher:focus-visible {
  outline: 2px solid #dceaf4;
  outline-offset: 3px;
}
.lab-mode-launcher {
  margin-left: auto;
}
@media(max-width:1200px) {
  .workspace-app .app-header-actions {
    gap: 10px;
  }
  .home-mode-shortcuts {
    order: 1;
  }
  .workspace-app .app-header>div:not(.home-mode-shortcuts) {
    order: 2;
  }
  .workspace-app .app-header-actions {
    order: 3;
    margin-left: auto;
  }
}
@media(max-width:650px) {
  .workspace-app .app-header {
    padding: 12px 14px;
    align-items: center;
    row-gap: 8px;
  }
  .home-mode-shortcuts {
    width: 100%;
    gap: 8px;
  }
  .app-home-link,.app-mode-launcher {
    min-height: 44px;
    font-size: 11px;
  }
  .app-mode-launcher {
    flex: 1;
  }
  .workspace-app .app-header>div:not(.home-mode-shortcuts) {
    order: 2;
  }
  .workspace-app .app-header-actions {
    order: 3;
    margin-left: auto;
  }
  .desk-header:has(.lab-mode-launcher) {
    height: auto;
    flex-wrap: wrap;
  }
  .lab-mode-launcher {
    margin-left: 0;
  }
}
/* Les boutons du terminal héritaient d'un style plus spécifique que le CTA. */
.desk button.app-mode-launcher:not(.button) {
  background: #d2e5ed;
  border: 1px solid #d2e5ed;
  color: #173328;
  font-weight: 600;
  padding: 11px 14px;
}
.desk button.app-mode-launcher:hover:not(.button) {
  background: #d2e5ed;
  border-color: #d2e5ed;
  color: #173328;
}
.marketing .landing-mode-shortcuts {
  display: flex;
  align-items: center;
  gap: 8px;
  flex: 0 0 auto;
}
.marketing .landing-home-link {
  min-height: 44px;
  display: inline-flex;
  align-items: center;
  white-space: nowrap;
  color: #b9c5ce;
  font: 11px Arial;
  letter-spacing: .2px;
  border: 1px solid #4f575f;
  padding: 10px 13px;
}
.marketing .landing-home-link:hover {
  color: #fff;
  border-color: #c6d3dc;
}
@media(max-width:1100px) {
  .marketing header nav {
    gap: 16px;
    font-size: 11px;
  }
  .marketing .landing-mode-shortcuts {
    gap: 5px;
  }
}
@media(max-width:900px) {
  .marketing header nav {
    display: none;
  }
}
@media(max-width:440px) {
  .marketing .landing-mode-shortcuts {
    margin-left: auto;
  }
  .marketing .landing-home-link {
    font-size: 10px;
    padding: 9px 10px;
  }
  .marketing header .mode-launcher {
    font-size: 10px;
    padding: 10px 12px;
    gap: 6px;
  }
}

/* Real product choice: distinguish PROP and TRADING with purposeful color. */
#mode-selector {--mode-prop-accent:#ffc088;--mode-trade-accent:#8ccffe;}
#mode-selector .mode-prop {border-color:color-mix(in srgb,var(--mode-prop-accent) 45%,#3c3c40);background:linear-gradient(150deg,color-mix(in srgb,var(--mode-prop-accent) 18%,#23272c),#1f2227 71%);}
#mode-selector .mode-trading {border-color:color-mix(in srgb,var(--mode-trade-accent) 49%,#3c3c40);background:linear-gradient(150deg,color-mix(in srgb,var(--mode-trade-accent) 20%,#242a30),#1c2229 71%);}
#mode-selector .mode-prop :is(.mode-kicker,.mode-action,.mode-arrow),#mode-selector .mode-prop .mode-graphic {color:var(--mode-prop-accent);}
#mode-selector .mode-trading :is(.mode-kicker,.mode-action,.mode-arrow),#mode-selector .mode-trading .mode-graphic {color:var(--mode-trade-accent);}
#mode-selector .mode-prop .mode-arrow {border-color:var(--mode-prop-accent);}
#mode-selector .mode-trading .mode-arrow {border-color:var(--mode-trade-accent);}
#mode-selector .mode-prop .mode-prop-graphic i {border-color:var(--mode-prop-accent);background:color-mix(in srgb,var(--mode-prop-accent) 25%,transparent);}
#mode-selector .mode-trading .mode-trading-graphic i {background:var(--mode-trade-accent);}
#mode-selector .mode-trading .mode-trading-graphic:before {background:color-mix(in srgb,var(--mode-trade-accent) 40%,transparent);}
#mode-selector .mode-choice {will-change:auto;transition:transform .22s cubic-bezier(.2,.8,.3,1),border-color .22s ease;}
#mode-selector .mode-choice:hover,#mode-selector .mode-choice:focus-visible {transform:translateY(-2px);}
#mode-selector.mode-closing {animation:mode-out .2s ease both;pointer-events:none;}
@keyframes mode-out {to {opacity:0;transform:translateY(10px);}}
@media(hover:none) {#mode-selector .mode-choice:hover {transform:none;}}
@media(prefers-reduced-motion:reduce) {#mode-selector[open],#mode-selector.mode-closing,#mode-selector .mode-choice,#mode-selector .mode-choice:before {animation:none!important;transition:none!important;transform:none!important;}}

/* Safari 14: color-mix est ignoré, conserver un fond plein contrasté. */
@supports not (color: color-mix(in srgb, white 50%, black)) {
  #mode-selector .mode-prop {border-color:#986f54;background:linear-gradient(150deg,#39302d,#1f2227 71%);}
  #mode-selector .mode-trading {border-color:#57758d;background:linear-gradient(150deg,#2e3d48,#1c2229 71%);}
  #mode-selector .mode-prop .mode-prop-graphic i {background:rgba(255,192,136,.25);}
  #mode-selector .mode-trading .mode-trading-graphic:before {background:rgba(140,207,254,.4);}
}
/* Deux espaces principaux ; PROP conserve un accès secondaire pleine largeur. */
.mode-prop-legacy { display:flex; justify-content:space-between; align-items:center; width:100%; box-sizing:border-box; min-height:44px; padding:12px 18px; margin-top:16px; border:1px solid currentColor; color:inherit; text-decoration:none; font-size:12px; }
.mode-backtest strong { font-size:clamp(24px,3.2vw,48px); }