:root {
  color-scheme:dark;
  --fond:#121719;
  --panneau:#1b2225;
  --surface:#242d31;
  --trait:#354044;
  --texte:#eef2ef;
  --secondaire:#a7b4b7;
  --accent:#c6ed80;
  --encre:#1d2c11;
  font-family:Inter,ui-sans-serif,system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;
  font-size:16px
}

* {
  box-sizing:border-box
}

body {
  margin:0;
  background:var(--fond);
  color:var(--texte)
}

button,input,select {
  font:inherit
}

button,a,input,summary,select {
  -webkit-tap-highlight-color:transparent
}

button {
  color:inherit;
  border:1px solid var(--trait);
  background:var(--surface);
  border-radius:8px;
  min-height:44px;
  padding:8px 13px;
  cursor:pointer;
  transition:background .15s,transform .1s
}

button:hover {
  background:#354247
}

button:active {
  transform:translateY(1px)
}

button:disabled {
  opacity:.35;
  cursor:default
}

button:focus-visible,a:focus-visible,summary:focus-visible,input:focus-visible,select:focus-visible {
  outline:2px solid var(--accent);
  outline-offset:3px
}

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

h1,h2,p {
  margin:0
}

.entête {
  max-width:1560px;
  margin:auto;
  padding:22px 38px;
  display:flex;
  justify-content:space-between;
  align-items:center;
  border-bottom:1px solid var(--trait);
  gap:20px
}

.marque {
  display:flex;
  align-items:center;
  gap:15px;
  font-size:25px;
  letter-spacing:-1px;
  font-weight:650;
  color:var(--texte)
}

.marque small {
  display:block;
  color:var(--secondaire);
  font-size:12px;
  font-weight:400;
  letter-spacing:.08em;
  margin-top:3px
}

.emblème {
  border:1px solid #647646;
  border-radius:12px;
  background:#273222;
  width:48px;
  height:48px;
  display:flex;
  align-items:center;
  justify-content:center;
  color:var(--accent);
  font-family:monospace;
  font-weight:400
}

.emblème span {
  color:#779c46
}

.entête nav {
  display:flex;
  align-items:center;
  gap:8px
}

.version {
  font-size:12px;
  color:var(--secondaire);
  margin-right:18px
}

.discret {
  background:transparent;
  border-color:transparent;
  font-size:14px
}

.icône {
  background:transparent;
  border-color:transparent;
  font-size:25px;
  min-width:44px;
  padding:3px 9px
}

.atelier {
  max-width:1460px;
  margin:auto;
  display:grid;
  grid-template-columns:minmax(0,1fr) 410px;
  gap:48px;
  padding:30px 38px 26px
}

.visualisation {
  min-width:0
}

.barre-image {
  display:flex;
  justify-content:space-between;
  align-items:center;
  min-height:68px;
  padding-bottom:16px;
  gap:12px
}

.surtitre {
  font-size:11px;
  letter-spacing:.18em;
  color:var(--accent);
  font-weight:650
}

h1 {
  font:400 clamp(18px,2vw,28px)/1.4 ui-monospace,SFMono-Regular,Consolas,monospace;
  letter-spacing:-.04em;
  margin-top:5px;
  overflow-wrap:anywhere;
  max-height:90px;
  overflow:auto
}

.repère {
  position:absolute;
  color:#fff;
  font:12px monospace;
  text-shadow:0 1px 5px #000;
  pointer-events:none
}

.repère-haut {
  top:10px;
  left:50%
}

.repère-droite {
  right:10px;
  top:50%
}

.étiquette-image {
  position:absolute;
  left:12px;
  bottom:12px;
  padding:5px 9px;
  font:12px monospace;
  color:#fff;
  background:#111a;
  border:1px solid #fff3;
  border-radius:5px;
  pointer-events:none
}

.réticule {
  position:absolute;
  width:17px;
  height:17px;
  border:1px solid white;
  border-radius:50%;
  transform:translate(-50%,-50%);
  pointer-events:none;
  box-shadow:0 0 0 1px #000
}

.sonde {
  display:flex;
  gap:15px;
  padding:13px 0;
  border-bottom:1px solid var(--trait);
  font:12px ui-monospace,monospace;
  color:var(--secondaire);
  flex-wrap:wrap
}

.sonde b {
  font-weight:400;
  color:var(--texte)
}

.valeur-sonde {
  margin-left:auto
}

.outils-image {
  display:flex;
  align-items:center;
  gap:16px;
  padding:13px 0;
  flex-wrap:wrap
}

.choix-palette {
  display:flex;
  background:#20272a;
  border:1px solid var(--trait);
  border-radius:7px;
  padding:3px;
  gap:2px
}

.choix-palette button {
  border:0;
  background:none;
  min-height:32px;
  font-size:13px;
  padding:5px 12px
}

.choix-palette button.actif {
  background:#45533c;
  color:var(--accent)
}

.échelle {
  display:flex;
  flex:1;
  align-items:center;
  gap:9px;
  font:12px monospace
}

.échelle i {
  flex:1;
  height:6px;
  background:linear-gradient(90deg,#000,#fff);
  border-radius:3px;
  min-width:40px
}

.réglages {
  border-top:1px solid var(--trait);
  font-size:14px;
  padding:13px 0;
  color:var(--secondaire)
}

summary {
  cursor:pointer;
  min-height:30px;
  align-content:center
}

summary span {
  float:right;
  font:12px monospace;
  margin-top:5px
}

.réglages form {
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:12px;
  margin:15px 0
}

.réglages label {
  font-size:12px;
  display:flex;
  flex-direction:column;
  gap:5px
}

.réglages input,.réglages select {
  width:100%;
  min-width:0;
  background:var(--panneau);
  color:var(--texte);
  border:1px solid var(--trait);
  border-radius:6px;
  padding:9px;
  font-size:16px
}

.réglages p {
  font-size:12px;
  line-height:1.6
}

.calculatrice {
  background:var(--panneau);
  padding:20px;
  border:1px solid var(--trait);
  border-radius:16px;
  align-self:start
}

.titre-pile {
  display:flex;
  justify-content:space-between;
  align-items:center;
  margin-bottom:12px
}

h2 {
  font-size:16px;
  font-weight:550
}

.titre-pile h2 span {
  margin-left:8px;
  font:12px monospace;
  color:var(--secondaire)
}

.pile {
  height:167px;
  overflow:auto;
  display:flex;
  flex-direction:column;
  gap:6px;
  scrollbar-width:thin
}

.ligne-pile {
  display:flex;
  gap:12px;
  align-items:center;
  padding:9px 10px;
  border:1px solid transparent;
  border-radius:7px;
  min-height:50px;
  background:#20292c
}

.ligne-pile.sommet {
  border-color:#60734a;
  background:#293328
}

.ligne-pile canvas {
  width:34px;
  height:34px;
  border-radius:3px;
  background:#161d20;
  flex:none
}

.ligne-pile .indice {
  color:var(--secondaire);
  font:12px monospace;
  width:18px;
  flex:none
}

.ligne-pile .expression {
  font:14px ui-monospace,monospace;
  overflow-wrap:anywhere;
  flex:1;
  min-width:0
}

.ligne-pile .badge {
  font-size:10px;
  text-transform:uppercase;
  letter-spacing:.06em;
  color:var(--accent)
}

.pile-vide {
  margin:auto;
  color:var(--secondaire);
  font-size:14px;
  text-align:center
}

.actions-pile {
  display:grid;
  grid-template-columns:repeat(4,1fr);
  gap:5px;
  margin:12px 0 19px
}

.actions-pile button {
  font-size:12px;
  padding:7px 2px;
  background:transparent;
  border-color:#3e4b50
}

.saisie {
  display:flex;
  align-items:center;
  gap:2px;
  border:1px solid #46545a;
  border-radius:8px;
  background:#121a1d;
  padding:5px;
  margin-bottom:12px
}

.saisie input {
  min-width:0;
  width:100%;
  background:none;
  border:0;
  color:var(--texte);
  padding:9px;
  font:18px ui-monospace,monospace;
  outline-offset:0
}

.saisie input::placeholder {
  font:14px system-ui;
  color:#90a0a5
}

.saisie button {
  border:0;
  background:none;
  padding:5px 8px
}

.saisie .entrer {
  font-size:13px;
  white-space:nowrap;
  color:var(--accent);
  background:#2c3922
}

.variables {
  display:grid;
  grid-template-columns:repeat(8,1fr);
  gap:5px
}

.variables button {
  font-family:Georgia,serif;
  font-size:20px;
  padding:4px;
  color:#c1dbe4;
  background:#24383f;
  border-color:#34515c
}

.onglets {
  display:flex;
  gap:3px;
  margin:19px 0 12px;
  border-bottom:1px solid var(--trait)
}

.onglets button {
  flex:1;
  font-size:13px;
  padding:6px 3px;
  border:0;
  border-bottom:2px solid transparent;
  background:none;
  border-radius:0;
  color:var(--secondaire)
}

.onglets button[aria-selected=true] {
  color:var(--accent);
  border-bottom-color:var(--accent)
}

.touches {
  display:grid;
  grid-template-columns:repeat(4,minmax(0,1fr));
  gap:8px
}

.touches button {
  min-height:51px;
  font-size:20px;
  background:#2b363b;
  border-color:#3e4b50;
  box-shadow:0 2px 0 #101719
}

.touches button.opération {
  background:#374630;
  border-color:#4b5e3e;
  color:#d9efba
}

.touches.fonctions button,.touches.logique button,.touches.bits button {
  font-size:16px
}

.touches button:hover {
  filter:brightness(1.18)
}

.conseil {
  font-size:12px;
  color:var(--secondaire);
  line-height:1.6;
  margin:14px 0
}

.exemples {
  border-top:1px solid var(--trait);
  padding-top:12px;
  font-size:13px
}

.exemples div {
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:7px;
  margin:10px 0
}

.exemples button {
  font-size:13px
}

.exemples p {
  font-size:12px;
  color:var(--secondaire)
}

footer {
  max-width:1460px;
  margin:auto;
  padding:10px 38px 25px;
  display:flex;
  gap:20px;
  justify-content:space-between;
  color:#839196;
  font-size:12px
}

#message {
  position:fixed;
  bottom:25px;
  left:50%;
  transform:translateX(-50%);
  background:var(--accent);
  color:var(--encre);
  border-radius:8px;
  padding:12px 20px;
  box-shadow:0 10px 40px #0006;
  max-width:90vw;
  z-index:30;
  font-size:14px;
  pointer-events:none
}

#message:empty {
  display:none
}

dialog {
  background:var(--panneau);
  color:var(--texte);
  border:1px solid var(--trait);
  border-radius:16px;
  max-width:540px;
  width:calc(100% - 32px);
  padding:30px;
  line-height:1.7
}

dialog::backdrop {
  background:#000b
}

dialog h2 {
  font-size:26px;
  margin:8px 0 18px
}

dialog p {
  margin:14px 0;
  color:#c1cccf
}

dialog .fermer {
  float:right;
  font-size:25px;
  background:none;
  border:0
}

.sr-seulement {
  position:absolute;
  width:1px;
  height:1px;
  padding:0;
  overflow:hidden;
  clip:rect(0,0,0,0);
  white-space:nowrap;
  border:0
}

.cadre-image:fullscreen .repère {
  display:none
}

@media(min-width:1500px) {
  .atelier {
    gap:65px;
    grid-template-columns:minmax(0,1fr) 440px
  }

  .touches button {
    min-height:57px
  }

}

@media(max-width:1050px) {
  .atelier {
    gap:24px;
    padding:22px;
    grid-template-columns:minmax(0,1fr) 365px
  }

  .entête {
    padding:18px 22px
  }

  .calculatrice {
    padding:15px
  }

  .sonde {
    gap:9px
  }

  .valeur-sonde {
    margin-left:0
  }

  .outils-image {
    gap:8px
  }

  .échelle {
    min-width:100px
  }

  .outils-image>#exporter {
    padding:4px
  }

  .variables {
    gap:3px
  }

  footer {
    padding:10px 22px 20px
  }

}

@media(max-width:760px) {
  .entête {
    padding:14px 16px;
    gap:8px
  }

  .marque {
    font-size:22px;
    gap:9px
  }

  .emblème {
    width:36px;
    height:36px;
    font-size:20px;
    border-radius:9px
  }

  .marque small {
    font-size:10px
  }

  .version {
    display:none
  }

  .entête nav {
    gap:0
  }

  .entête .discret {
    font-size:12px;
    padding:5px 8px;
    min-height:40px
  }

  .atelier {
    display:flex;
    flex-direction:column;
    padding:12px 16px 20px;
    gap:12px
  }

  .barre-image {
    min-height:57px;
    padding-bottom:10px
  }

  .surtitre {
    font-size:10px
  }

  h1 {
    font-size:19px;
    margin-top:4px
  }

  .sonde {
    font-size:11px;
    padding:10px 0;
    gap:8px
  }

  .outils-image {
    padding:9px 0
  }

  .réglages {
    padding:8px 0
  }

  .calculatrice {
    width:100%;
    padding:15px;
    border-radius:12px
  }

  .pile {
    height:65px
  }

  .pile.déployée {
    height:190px
  }

  .titre-pile {
    margin-bottom:7px
  }

  .titre-pile h2 {
    cursor:pointer
  }

  .actions-pile {
    margin:10px 0 12px
  }

  .actions-pile button {
    font-size:12px;
    min-height:44px
  }

  .variables button {
    min-height:46px
  }

  .onglets {
    margin-top:12px
  }

  .touches button {
    min-height:54px;
    font-size:22px
  }

  .conseil {
    margin:12px 0
  }

  .exemples {
    padding-top:8px
  }

  footer {
    padding:5px 16px 20px;
    flex-wrap:wrap;
    gap:10px;
    font-size:11px
  }

  footer span:nth-child(2) {
    display:none
  }

}

@media(prefers-reduced-motion:reduce) {
  * {
    transition:none!important
  }

}

.quitter-plein-écran {
  display:none;
  position:absolute;
  right:20px;
  top:20px;
  background:#172024e8;
  z-index:4
}

.cadre-image:fullscreen .quitter-plein-écran {
  display:block
}

.déplier-pile {
  display:none;
  border:0;
  background:none;
  font-size:12px;
  color:var(--accent);
  margin-left:7px;
  padding:2px 5px;
  min-height:36px
}

@media(max-width:760px) {
  .déplier-pile {
    display:inline-block
  }

}







.rotations-pile {
  display:flex;
  gap:6px;
  margin-top:10px
}

.rotations-pile button {
  flex:1;
  min-height:44px;
  background:transparent;
  font-size:14px
}

.rotations-pile+.actions-pile {
  margin-top:6px
}

.choix-sauvegarde {
  display:grid;
  gap:12px
}

.choix-sauvegarde button {
  text-align:left;
  padding:15px
}

.choix-sauvegarde strong {
  display:block;
  font-size:16px;
  font-weight:550
}

.choix-sauvegarde span {
  display:block;
  font-size:14px;
  line-height:1.6;
  color:var(--secondaire);
  margin-top:5px
}

.diagnostic-calcul {
  border-top:1px solid var(--trait);
  padding:8px 0;
  color:var(--secondaire);
  font-size:13px
}

.diagnostic-calcul p {
  font:12px/1.7 ui-monospace,monospace;
  overflow-wrap:anywhere;
  margin:8px 0
}

[hidden] {
  display:none!important
}

.commandes-vue {
  display:flex;
  align-items:center;
  gap:5px
}

.commandes-vue button {
  min-height:38px;
  padding:4px 9px;
  font-size:14px
}

.commandes-vue .actif {
  background:#45533c;
  color:var(--accent)
}

.cible-domaine {
  display:flex;
  gap:10px;
  align-items:center;
  margin-top:12px
}

.cible-domaine select {
  background:var(--panneau);
  border:1px solid var(--trait);
  padding:8px;
  color:var(--texte);
  border-radius:6px;
  max-width:100%
}

.panneau-3d {
  border-top:1px solid var(--trait);
  padding:12px 0
}

.barre-3d,.options-3d {
  display:flex;
  gap:8px;
  flex-wrap:wrap;
  margin:12px 0
}

.barre-3d label,.options-3d label {
  display:flex;
  flex-direction:column;
  gap:5px;
  font-size:13px
}

.barre-3d select,.options-3d select {
  font-size:14px;
  padding:8px;
  background:var(--panneau);
  color:var(--texte);
  border:1px solid var(--trait);
  border-radius:6px
}

#statistiques-3d {
  color:var(--secondaire);
  font:12px monospace;
  margin:12px 0
}

#contrôles-3d {
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:14px 24px
}

.réglage {
  min-width:0
}

.ligne-réglage {
  display:flex;
  justify-content:space-between;
  gap:8px;
  font-size:13px;
  align-items:center
}

.valeur-réglage {
  display:flex;
  gap:4px;
  align-items:center
}

.valeur-réglage input {
  width:82px;
  background:var(--panneau);
  color:var(--texte);
  border:1px solid var(--trait);
  border-radius:5px;
  padding:6px;
  font-size:14px
}

.glissière {
  height:36px;
  position:relative;
  touch-action:none;
  cursor:ew-resize;
  margin-top:3px
}

.glissière:before {
  content:'';
  position:absolute;
  left:0;
  right:0;
  top:16px;
  height:4px;
  background:var(--trait);
  border-radius:4px
}

.remplissage {
  position:absolute;
  left:0;
  top:16px;
  height:4px;
  width:var(--position);
  background:var(--accent);
  border-radius:4px
}

.poignée {
  position:absolute;
  left:var(--position);
  top:8px;
  width:20px;
  height:20px;
  border-radius:50%;
  transform:translateX(-50%);
  background:var(--accent);
  border:3px solid #1b2225;
  box-shadow:0 0 0 1px var(--accent)
}

.précision {
  display:block;
  color:var(--secondaire);
  font-size:11px
}

.glissière:focus-visible {
  outline:2px solid var(--accent);
  outline-offset:3px
}

.outils-calcul {
  display:flex;
  gap:8px;
  margin:12px 0
}

.outils-calcul button {
  flex:1;
  font-size:13px
}

.programmes,.paramètres-nommés {
  border-top:1px solid var(--trait);
  padding:12px 0;
  font-size:14px
}

.titre-programmes {
  display:flex;
  justify-content:space-between;
  align-items:center;
  margin-bottom:8px
}

.titre-programmes button {
  font-size:12px;
  background:none;
  border:0
}

#touches-programmes {
  display:grid;
  grid-template-columns:repeat(5,1fr);
  gap:6px
}

#touches-programmes button {
  padding:5px;
  font-size:18px;
  color:var(--accent)
}

#touches-programmes button.vide {
  color:var(--secondaire)
}

.affectation {
  display:flex;
  gap:7px;
  margin:10px 0
}

.programmes input,.programmes select,.programmes textarea,.paramètres-nommés input,dialog input,dialog select {
  background:#111a1d;
  border:1px solid var(--trait);
  color:var(--texte);
  border-radius:6px;
  padding:10px;
  min-width:0;
  font:14px system-ui
}

.affectation input {
  width:100%
}

.programmes textarea {
  width:100%;
  font:14px/1.6 ui-monospace,monospace;
  resize:vertical
}

.actions-programmes {
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:6px
}

.actions-programmes button {
  font-size:12px
}

#statut-programme {
  color:var(--accent);
  font-size:12px;
  margin:8px 0;
  min-height:18px
}

#paramètre-nommé {
  display:grid;
  grid-template-columns:1fr 80px auto;
  gap:5px;
  margin:10px 0
}

#paramètre-nommé button {
  font-size:12px;
  padding:5px
}

#liste-paramètres {
  display:flex;
  flex-wrap:wrap;
  gap:6px
}

#liste-paramètres button {
  font-size:12px;
  min-height:38px
}

dialog label {
  display:flex;
  flex-direction:column;
  margin:15px 0;
  gap:6px
}

dialog select {
  width:100%
}

#dialogue-import input[type=file] {
  width:100%
}

@media(max-width:760px) {
  #contrôles-3d {
    gap:16px
  }

  .valeur-réglage input {
    width:68px
  }

  .ligne-réglage {
    flex-wrap:wrap
  }

  .glissière {
    height:44px
  }

  .glissière:before,.remplissage {
    top:20px
  }

  .poignée {
    top:12px
  }

  .commandes-vue {
    gap:2px
  }

  .barre-image {
    gap:3px
  }

  .barre-image h1 {
    font-size:17px
  }

}

.programmes textarea:focus-visible {
  outline:2px solid var(--accent)
}

/* v0.4 : l’image reste visible pendant le défilement des commandes. */
.visualisation  {
  position: sticky;
  top: 16px;
  align-self: start;
  min-width: 0;
  background: var(--fond, #121719);
  z-index: 2;
}

#état-image  {
  position: static;
  font: 12px/1.5 ui-monospace, monospace;
  color: var(--secondaire);
  padding-top: 8px;
}

#outils-3d  {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
  margin-bottom: 12px;
}

#outils-3d button  {
  flex: 1;
  font-size: 14px;
}

.contrôles-3d  {
  display: grid;
  grid-template-columns: 1fr;
  gap: 12px;
}

#panneau-3d .onglets  {
  margin-top: 0;
}

.préréglages-domaine  {
  display: flex;
  flex-wrap: wrap;
  align-items: end;
  gap: 8px;
  margin-top: 12px;
}

.préréglages-domaine label  {
  flex: 1;
  min-width: 100px;
}

.préréglages-domaine button  {
  font-size: 13px;
}

#mode-sonde[aria-pressed=true]  {
  background: #45533c;
  color: var(--accent);
}

.commandes-vue  {
  flex-wrap: wrap;
  justify-content: end;
}

@media (max-width: 760px)  {
  .visualisation  {
    top: 0;
    width: 100%;
    padding: 4px 0;
    box-shadow: 0 5px 8px #0004;
  }

  .barre-image  {
    min-height: 40px;
  }

  .barre-image .surtitre  {
    display: none;
  }

  #état-image  {
    font-size: 11px;
    padding-top: 3px;
  }

  .sonde  {
    padding: 5px 0;
  }

  .outils-image  {
    padding: 5px 0;
  }

  .contrôles-3d  {
    gap: 10px;
  }

}

/* L'aperçu adopte le rapport des pixels natifs, jamais celui de son conteneur.
 * Sa largeur est limitée à la colonne ET à la hauteur disponible multipliée
 * par ce rapport. Les canvas absolus n'imposent aucune taille intrinsèque.
 */
.cadre-image {
  --rapport-image: 1;
  --hauteur-aperçu: min(60dvh, 680px);
  width: min(100%, calc(var(--hauteur-aperçu) * var(--rapport-image)));
  height: auto;
  margin: 0 auto;
  position: relative;
  display: grid;
  place-items: center;
  isolation: isolate;
}
.surface-image {
  position: relative;
  width: 100%;
  aspect-ratio: var(--rapport-image);
  min-width: 0;
  overflow: hidden;
  outline: 1px solid #485257;
  background: repeating-conic-gradient(#273034 0% 25%, #20272a 0% 50%) 0 0 / 16px 16px;
}
.surface-image canvas {
  position: absolute;
  inset: 0;
  display: block;
  width: 100%;
  height: 100%;
  object-fit: contain;
}
#image {
  user-select: none;
  -webkit-user-select: none;
  -webkit-touch-callout: none;
  touch-action: pan-y;
}
#image.sonde-active, #relief {
  touch-action: none;
}
/* L'élément plein écran remplit le viewport ; la surface de pixels reste au
 * rapport natif à l'intérieur. Les bandes libres ne rognent jamais l'image.
 */
.cadre-image:fullscreen {
  --hauteur-aperçu: 100dvh;
  width: 100vw;
  height: 100dvh;
  background: #111;
}
.cadre-image:fullscreen .surface-image {
  width: min(100%, calc(var(--hauteur-aperçu) * var(--rapport-image)));
  outline: none;
}
.cadre-image:fullscreen #image {
  touch-action: none;
}
.ajuster-plein-écran {
  display: none;
  position: absolute;
  left: 20px;
  top: 20px;
  z-index: 4;
  background: #172024e8;
}
.cadre-image:fullscreen .ajuster-plein-écran {
  display: block;
}
@media (max-width: 760px) {
  .cadre-image:not(:fullscreen) {
    --hauteur-aperçu: min(28dvh, 310px);
  }
}