/*!*************************************************************************************************************************************************************************************************************************************************************!*\
  !*** css ./node_modules/next/dist/build/webpack/loaders/css-loader/src/index.js??ruleSet[1].rules[14].oneOf[10].use[2]!./node_modules/next/dist/build/webpack/loaders/postcss-loader/src/index.js??ruleSet[1].rules[14].oneOf[10].use[3]!./app/globals.css ***!
  \*************************************************************************************************************************************************************************************************************************************************************/
/* HYPERBO Cloud — langage visuel d'un LOGICIEL DE SIMULATION, pas d'un site.
 *
 * Ce que cela veut dire concrètement, et pourquoi :
 *  - **une fenêtre, pas une page** : la hauteur est celle de l'écran, rien ne défile globalement ; chaque panneau
 *    défile pour lui. Un ingénieur garde l'outil ouvert des heures et navigue par SÉLECTION, pas par défilement ;
 *  - **un arbre de modèle à gauche**, toujours visible : la hiérarchie (projet → géométries, cas, balayages, runs)
 *    est l'objet de travail, et on doit pouvoir sauter de l'un à l'autre sans revenir en arrière ;
 *  - **une vue centrale qui domine** : géométrie, maillage, champ, courbes. Fond sombre, comme toute visionneuse
 *    3D — le clair fatigue sur un rendu, et les couleurs d'un champ se lisent mal sur blanc ;
 *  - **un inspecteur à droite** : les propriétés de ce qui est sélectionné, denses, alignées ;
 *  - **une barre d'état en bas** : ce qui est vrai en permanence (solveur, organisation, crédits, runs actifs) ;
 *  - **de la DENSITÉ** : 13 px, lignes compactes, chiffres tabulaires, monospace pour tout ce qui est une valeur.
 *    Le blanc tournant d'un site marketing est ici du bruit : on vient lire des nombres.
 *
 * « Moderne » ne veut pas dire décoré : pas de dégradé, pas d'ombre portée, pas de biseau. Des traits de 1 px, un
 * seul accent, et une typographie qui tient l'alignement.
 */

:root {
  --bg: #f4f5f7;
  --panel: #ffffff;
  --panel-2: #fafbfc;
  --border: #d8dce2;
  --border-strong: #c2c8d0;
  --text: #16191d;
  --muted: #5d6572;
  --faint: #8b93a1;
  --accent: #0b6e99;
  --accent-soft: #e2eef5;
  --ok: #1f7a4d;
  --warn: #9a6400;
  --fail: #b0282d;
  --cached: #5b4a9c;
  --mock: #8a5a00;
  --viewport: #1a1d21;
  --viewport-grid: #2a2e34;

  --row: 26px;
  --toolbar: 40px;
  --status: 26px;
  --tree: 260px;
  --inspector: 340px;
  --mono: ui-monospace, "SF Mono", SFMono-Regular, Menlo, Consolas, monospace;
  --sans: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
}

@media (prefers-color-scheme: dark) {
  :root {
    --bg: #15171a;
    --panel: #1c1f23;
    --panel-2: #212429;
    --border: #2e333a;
    --border-strong: #3c424b;
    --text: #e6e8ea;
    --muted: #9aa2ad;
    --faint: #6d7682;
    --accent: #4aa3cc;
    --accent-soft: #15303d;
    --ok: #52b788;
    --warn: #d9a441;
    --fail: #e8787c;
    --cached: #a897e8;
    --mock: #d9a441;
    --viewport: #121417;
    --viewport-grid: #22262b;
  }
}

* { box-sizing: border-box; }

html, body {
  height: 100%;
  margin: 0;
  overflow: hidden;                 /* une FENÊTRE : rien ne défile globalement */
}

body {
  background: var(--bg);
  color: var(--text);
  font: 13px/1.45 var(--sans);
  -webkit-font-smoothing: antialiased;
  font-feature-settings: "tnum";
  font-variant-numeric: tabular-nums;
}

a { color: var(--accent); text-decoration: none; }
a:hover { text-decoration: underline; }

/* ----------------------------------------------------------------- charpente */
.app {
  display: grid;
  grid-template-rows: var(--toolbar) 1fr var(--status);
  height: 100vh;
}

.toolbar {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 0 10px;
  background: var(--panel);
  border-bottom: 1px solid var(--border);
  overflow: visible;
  white-space: nowrap;
}
.toolbar .brand {
  font-weight: 620;
  letter-spacing: -0.01em;
  margin-right: 4px;
  font-size: 13px;
}
.toolbar .brand span { color: var(--faint); font-weight: 400; margin-left: 6px; font-size: 11px; }
.toolbar .sep { width: 1px; height: 18px; background: var(--border); margin: 0 4px; flex: none; }
.toolbar .spacer { flex: 1 1 auto; }

.middle { display: flex; flex-direction: column; min-height: 0; }

.workspace {
  display: grid;
  grid-template-columns: var(--tree) 1fr var(--inspector);
  flex: 1 1 auto;
  min-height: 0;
}
.workspace.no-inspector { grid-template-columns: var(--tree) 1fr; }
@media (max-width: 1100px) {
  .workspace, .workspace.no-inspector { grid-template-columns: 1fr; }
  .tree, .inspector { display: none; }
}

/* `min-width: 0` est INDISPENSABLE : une colonne de grille vaut `auto` par défaut, c'est-à-dire qu'elle refuse
   de descendre sous la largeur de son contenu. Un tableau large — les noms de fichiers des artefacts — élargissait
   donc la colonne centrale au-delà de la fenêtre, et le trop-plein était coupé net au lieu de défiler. */
.tree, .inspector, .centre { min-height: 0; min-width: 0; overflow: auto; }
.tree {
  background: var(--panel);
  border-right: 1px solid var(--border);
  padding: 6px 0;
}
.inspector {
  background: var(--panel);
  border-left: 1px solid var(--border);
}
.centre { background: var(--bg); }

.statusbar {
  display: flex;
  align-items: center;
  gap: 0;
  background: var(--panel);
  border-top: 1px solid var(--border);
  font-size: 11.5px;
  color: var(--muted);
  overflow: visible;
  white-space: nowrap;
}
.statusbar .cell { padding: 0 10px; border-right: 1px solid var(--border); height: 100%; display: flex; align-items: center; gap: 6px; }
.statusbar .cell:last-child { border-right: 0; }
.statusbar .spacer { flex: 1 1 auto; }
.statusbar strong { color: var(--text); font-weight: 580; }

/* ----------------------------------------------------------------- arbre de modèle */
.tree-group { margin-bottom: 2px; }
.tree-head {
  display: flex; align-items: center; gap: 6px;
  height: var(--row); padding: 0 10px;
  font-size: 11px; text-transform: uppercase; letter-spacing: 0.06em;
  color: var(--faint); font-weight: 600;
}
.tree-item {
  display: flex; align-items: center; gap: 7px;
  height: var(--row); padding: 0 10px 0 22px;
  color: var(--text); cursor: pointer; text-decoration: none;
  border-left: 2px solid transparent;
}
.tree-item:hover { background: var(--panel-2); text-decoration: none; }
.tree-item.active { background: var(--accent-soft); border-left-color: var(--accent); color: var(--text); }
.tree-item .label { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.tree-item .meta { margin-left: auto; color: var(--faint); font-size: 11px; font-family: var(--mono); }
.tree-empty { padding: 4px 10px 8px 22px; color: var(--faint); font-size: 11.5px; }

/* ----------------------------------------------------------------- vue centrale */
.viewport {
  background: var(--viewport);
  border: 1px solid var(--border);
  border-radius: 3px;
  position: relative;
  overflow: hidden;
}
.viewport .overlay {
  position: absolute; left: 8px; bottom: 8px;
  font-family: var(--mono); font-size: 11px; color: #9aa4b0;
  background: rgba(0, 0, 0, 0.35); padding: 3px 7px; border-radius: 3px;
  pointer-events: none;
}
.viewport .corner {
  position: absolute; right: 8px; top: 8px;
  font-family: var(--mono); font-size: 11px; color: #9aa4b0;
  pointer-events: none; text-align: right;
}

.pane { padding: 10px; display: flex; flex-direction: column; gap: 10px; min-height: 0; }
.pane.fill { height: 100%; }

.block {
  background: var(--panel);
  border: 1px solid var(--border);
  border-radius: 3px;
}
.block > header {
  display: flex; align-items: center; gap: 8px;
  height: 28px; padding: 0 10px;
  border-bottom: 1px solid var(--border);
  font-size: 11px; text-transform: uppercase; letter-spacing: 0.06em;
  color: var(--muted); font-weight: 600;
  background: var(--panel-2);
}
.block > header .spacer { flex: 1 1 auto; }
.block > .body { padding: 10px; }
.block > .body.tight { padding: 0; }

/* onglets dockés, comme les docks d'un logiciel de calcul */
.tabs {
  display: flex; gap: 0; border-bottom: 1px solid var(--border); background: var(--panel-2);
  /* ÉPINGLÉS en haut du panneau : sur un formulaire long, la navigation du pipeline sortait de l'écran dès
     qu'on faisait défiler, et l'on perdait le moyen de changer d'étape. */
  position: -webkit-sticky;
  position: sticky; top: 0; z-index: 5;
}
.tabs button {
  border: 0; border-right: 1px solid var(--border); border-bottom: 2px solid transparent;
  background: transparent; color: var(--muted);
  height: 28px; padding: 0 12px; font-size: 12px; cursor: pointer; border-radius: 0;
}
.tabs button:hover { color: var(--text); background: var(--panel); }
.tabs button[aria-selected='true'] { color: var(--text); border-bottom-color: var(--accent); background: var(--panel); }

/* ----------------------------------------------------------------- contrôles */
button, .button {
  font: inherit; font-size: 12px;
  height: 26px; padding: 0 10px;
  border: 1px solid var(--border-strong); border-radius: 3px;
  background: var(--panel); color: var(--text);
  cursor: pointer; display: inline-flex; align-items: center; gap: 6px;
}
button:hover:not(:disabled) { background: var(--panel-2); border-color: var(--accent); }
button.primary { background: var(--accent); border-color: var(--accent); color: #fff; }
button.primary:hover:not(:disabled) { filter: brightness(1.08); background: var(--accent); }
button.danger { color: var(--fail); border-color: var(--fail); }
button:disabled { opacity: 0.45; cursor: not-allowed; }
button.ghost { border-color: transparent; background: transparent; }

/* `password`, `email`, `search` manquaient à cette liste : ces champs n'héritaient d'AUCUN style — ni hauteur,
   ni bordure, ni largeur. Le champ « mot de passe » de la connexion apparaissait donc plus étroit et d'un autre
   dessin que le champ « adresse » juste au-dessus, ce qui se remarque immédiatement. */
input[type='text'], input[type='number'], input[type='password'], input[type='email'], input[type='search'],
select, textarea {
  font: inherit; font-size: 12px;
  height: 26px; padding: 0 7px;
  border: 1px solid var(--border-strong); border-radius: 3px;
  background: var(--bg); color: var(--text); width: 100%;
}
textarea { height: auto; padding: 7px; font-family: var(--mono); font-size: 12px; line-height: 1.5; resize: vertical; }
input:focus, select:focus, textarea:focus { outline: 2px solid var(--accent-soft); outline-offset: -1px; border-color: var(--accent); }

.row { display: flex; gap: 6px; align-items: center; flex-wrap: wrap; }
.split { display: grid; grid-template-columns: 1fr 1fr; grid-gap: 10px; gap: 10px; }
@media (max-width: 1400px) { .split { grid-template-columns: 1fr; } }

/* ----------------------------------------------------------------- propriétés (inspecteur) */
.props { display: grid; grid-template-columns: minmax(96px, 42%) 1fr; }
.props dt, .props dd {
  margin: 0; padding: 3px 10px; border-bottom: 1px solid var(--border);
  font-size: 12px; min-height: 24px; display: flex; align-items: center;
}
.props dt { color: var(--muted); background: var(--panel-2); }
.props dd { font-family: var(--mono); overflow-wrap: anywhere; }
.props dd.text { font-family: var(--sans); }

.field { display: block; padding: 6px 10px; border-bottom: 1px solid var(--border); }
.field > .name {
  display: flex; align-items: baseline; gap: 5px;
  font-family: var(--mono); font-size: 11.5px; color: var(--muted); margin-bottom: 3px;
}
.field > .name .req { color: var(--fail); }
.field > .help { color: var(--faint); font-size: 11px; margin-top: 3px; display: block; }
.field.invalid > .name { color: var(--fail); }
.field.invalid input, .field.invalid select { border-color: var(--fail); }
.field .problem { color: var(--fail); font-size: 11px; margin-top: 3px; display: block; }

/* ----------------------------------------------------------------- tableaux denses */
table { width: 100%; border-collapse: collapse; font-size: 12px; }
th, td { text-align: left; padding: 0 8px; height: var(--row); border-bottom: 1px solid var(--border); white-space: nowrap; }
th {
  font-size: 10.5px; text-transform: uppercase; letter-spacing: 0.05em;
  color: var(--faint); font-weight: 600; background: var(--panel-2);
  position: -webkit-sticky;
  position: sticky; top: 0; z-index: 1;
}
td.num, th.num { text-align: right; font-family: var(--mono); }
td.mono { font-family: var(--mono); }
tbody tr:hover { background: var(--panel-2); }
.scroll-x { overflow-x: auto; }

/* ----------------------------------------------------------------- états */
.badge {
  display: inline-flex; align-items: center;
  height: 17px; padding: 0 6px; border-radius: 2px;
  font-size: 10.5px; font-weight: 600; letter-spacing: 0.02em;
  border: 1px solid currentColor; text-transform: uppercase;
}
.badge.queued, .badge.none { color: var(--faint); }
.badge.running { color: var(--accent); }
.badge.succeeded, .badge.ok { color: var(--ok); }
.badge.failed { color: var(--fail); }
/* « averti » : le travail a abouti, mais son résultat appelle une décision — à ne pas confondre avec un échec. */
.badge.warn { color: var(--warn); }
.badge.cancelled { color: var(--muted); }
.badge.cached { color: var(--cached); }
.badge.checkpointed, .badge.warn { color: var(--warn); }
.badge.mock { color: var(--mock); }

.dot { width: 7px; height: 7px; border-radius: 50%; background: currentColor; flex: none; }

/* ----------------------------------------------------------------- messages */
.note { color: var(--muted); font-size: 11.5px; margin: 4px 0; }
.hint { color: var(--faint); font-size: 11.5px; margin: 0 0 8px; }
.error, .warning, .info {
  border: 1px solid; border-radius: 3px; padding: 7px 10px; font-size: 12px; margin: 0 0 8px;
}
.error { border-color: var(--fail); color: var(--fail); background: color-mix(in srgb, var(--fail) 7%, transparent); }
.warning { border-color: var(--warn); color: var(--warn); background: color-mix(in srgb, var(--warn) 8%, transparent); }
.info { border-color: var(--border-strong); color: var(--muted); background: var(--panel-2); }

/* Le bandeau SIMULÉ n'est pas décoratif : un artefact simulé ne doit jamais pouvoir passer pour un résultat. */
.mock-strip {
  display: flex; align-items: center; gap: 8px;
  background: color-mix(in srgb, var(--mock) 14%, transparent);
  border-bottom: 1px solid var(--mock);
  color: var(--text); font-size: 11.5px; padding: 4px 10px;
}
.mock-strip strong { color: var(--mock); text-transform: uppercase; letter-spacing: 0.04em; font-size: 10.5px; }

pre.log {
  background: var(--viewport); color: #c9d1d9;
  border: 1px solid var(--border); border-radius: 3px;
  padding: 8px 10px; margin: 0;
  font-family: var(--mono); font-size: 11.5px; line-height: 1.5;
  max-height: 260px; overflow: auto; white-space: pre-wrap;
}
pre.log.fail { border-color: var(--fail); }

code { font-family: var(--mono); font-size: 11.5px; }
figure { margin: 0; }
figcaption { color: var(--faint); font-size: 11px; margin-top: 6px; }
svg.plot { width: 100%; height: auto; display: block; }

/* ---------------------------------------------------------------------------------------------------------------
   Menu d'identité de la barre d'outils.  `<details>` natif : pas de bibliothèque, pas d'état à gérer, et la
   fermeture au clavier (Échap) marche sans qu'on l'écrive.
   --------------------------------------------------------------------------------------------------------------- */
.menu { position: relative; }
/* Les noms de variables de cette palette sont `--border`, `--border-strong` et `--muted` : employer `--line`,
   `--line-strong` ou `--dim` rendait la propriété invalide et le texte du menu INVISIBLE — on ne voyait ni sous
   quel compte on était, ni comment se déconnecter. Trouvé en filmant la visite guidée. */
.menu > summary {
  cursor: pointer; list-style: none; padding: 3px 9px; border: 1px solid var(--border); border-radius: 4px;
  font-family: var(--mono); font-size: 11.5px; color: var(--muted); max-width: 190px; overflow: hidden;
  text-overflow: ellipsis; white-space: nowrap; background: var(--panel-2);
}
.menu > summary::-webkit-details-marker { display: none; }
.menu > summary:hover { color: var(--text); border-color: var(--border-strong); }
.menu[open] > summary { color: var(--text); border-color: var(--accent); }
.menu-panel {
  position: absolute; right: 0; top: calc(100% + 5px); z-index: 40; min-width: 230px; display: grid;
  background: var(--panel); border: 1px solid var(--border-strong); border-radius: 5px; padding: 4px;
  box-shadow: 0 12px 28px rgba(0, 0, 0, 0.35);
}
.menu-panel .menu-head {
  padding: 6px 8px; font-size: 11px; color: var(--faint); text-transform: uppercase; letter-spacing: 0.05em;
  border-bottom: 1px solid var(--border);
}
.menu-panel a, .menu-panel button {
  text-align: left; padding: 7px 8px; font-size: 12.5px; color: var(--text); background: none; border: 0;
  border-radius: 4px; cursor: pointer;
}
.menu-panel a:hover, .menu-panel button:hover { background: var(--panel-2); }

/* -------------------------------------------------------------------------------------------------------------
   Classes des écrans ANTÉRIEURS à la refonte « logiciel de calcul ».
   `panel`, `kv` et `grid-2` étaient employées par les pages géométrie, run, balayage et organisation, et la
   refonte les a laissées derrière elle : sans définition, une `dl.kv` retombe sur la mise en page par défaut d'un
   navigateur — le terme AU-DESSUS de sa définition — et `grid-2` ne fait rien du tout, ce qui envoyait les
   panneaux d'affectation SOUS la visionneuse 3D au lieu d'être à côté. Constaté en filmant la visite guidée.
   ------------------------------------------------------------------------------------------------------------- */
.panel {
  background: var(--panel);
  border: 1px solid var(--border);
  border-radius: 3px;
  padding: 12px 14px;
}
.panel > h2 {
  margin: 0 0 10px;
  font-size: 11px; text-transform: uppercase; letter-spacing: 0.06em;
  color: var(--muted); font-weight: 600;
}
.panel > h2 .note { text-transform: none; letter-spacing: 0; font-weight: 400; }
.panel + .panel { margin-top: 10px; }

/* Liste de définitions en DEUX COLONNES : le terme à gauche, la valeur à droite, alignée et en chasse fixe.
   C'est la forme d'un tableau de propriétés d'un logiciel de calcul — et la seule qui se lise d'un coup d'œil. */
.kv {
  display: grid;
  grid-template-columns: max-content 1fr;
  grid-gap: 2px 18px;
  gap: 2px 18px;
  margin: 0;
  align-items: baseline;
}
.kv dt { color: var(--muted); font-size: 12px; }
.kv dd { margin: 0; font-family: var(--mono); font-size: 12.5px; color: var(--text); }

/* Deux colonnes de panneaux, qui retombent sur une seule quand la fenêtre est étroite. */
.grid-2 {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  grid-gap: 10px;
  gap: 10px;
  align-items: start;
}
@media (max-width: 1100px) {
  .grid-2 { grid-template-columns: minmax(0, 1fr); }
}

/* Boutons de zoom posés sur une visionneuse 3D. */
.viewer-zoom {
  position: absolute; right: 10px; bottom: 10px; display: grid; grid-gap: 4px; gap: 4px;
}
.viewer-zoom button {
  width: 28px; height: 28px; padding: 0; font-size: 16px; line-height: 1;
  background: var(--panel); color: var(--text);
  border: 1px solid var(--border-strong); border-radius: 4px; cursor: pointer;
}
.viewer-zoom button:hover { background: var(--panel-2); border-color: var(--accent); }