/* /sdk/Enigma/ — la console (prototype).
 *
 * Un coffret de bois sombre, une platine de bakélite, du laiton, des lampes
 * ambrées. Les couleurs de signal sont celles du SDK Panel (--sxp-amber,
 * --sxp-line…) : la page doit avoir l'air de sortir du même atelier. Tout ce
 * qui est dessiné ici manque au SDK : fenêtre de rotor, lampe à lettre, touche,
 * prise et câble, manipulateur. Aucune image, aucune police distante.
 */

.eg-page {
  --eg-bois: #3b2616;
  --eg-bois-clair: #5a3a22;
  --eg-bakelite: #17171a;
  --eg-bakelite-2: #232327;
  --eg-laiton: #c9a85a;
  --eg-laiton-sombre: #8a6d2f;
  --eg-papier: #f3ead2;
  --eg-encre: #1a1613;
  --eg-ambre: #ffb000;
  max-width: 1280px;
  margin: 0 auto;
  padding: 28px 16px 56px;
}

.eg-tete { max-width: 70ch; margin: 0 0 22px; }
.eg-tete__sur { margin: 0 0 6px; font-size: .72rem; letter-spacing: .18em; text-transform: uppercase; color: #8a6d2f; font-weight: 700; }
.eg-tete h1 { margin: 0 0 10px; font-size: clamp(1.6rem, 3.4vw, 2.3rem); line-height: 1.15; color: #0f172a; }
.eg-tete__chapo { margin: 0; color: #475569; line-height: 1.65; font-size: .98rem; }

/* ── Le coffret ─────────────────────────────────────────────────────────── */
.eg-atelier {
  display: grid;
  grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr);
  gap: 22px;
  padding: 22px;
  border-radius: 14px;
  background:
    repeating-linear-gradient(92deg, rgba(0,0,0,.14) 0 2px, transparent 2px 9px),
    repeating-linear-gradient(88deg, rgba(255,255,255,.035) 0 1px, transparent 1px 23px),
    linear-gradient(180deg, var(--eg-bois-clair), var(--eg-bois) 55%, #2a1a0e);
  border: 1px solid #1c1108;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.14), inset 0 -3px 8px rgba(0,0,0,.5), 0 18px 40px rgba(15,23,42,.35);
  color: #e6dcc6;
  font-family: var(--sxp-mono, ui-monospace, "Cascadia Code", Consolas, monospace);
}
@media (max-width: 980px) { .eg-atelier { grid-template-columns: minmax(0, 1fr); padding: 14px; gap: 16px; } }

/* La première mission : une plaque sur toute la largeur, au-dessus des deux platines. */
.eg-mission {
  grid-column: 1 / -1; min-width: 0; padding: 12px 16px; border-radius: 10px;
  background: linear-gradient(180deg, var(--eg-bakelite-2), var(--eg-bakelite));
  border: 1px solid #000; box-shadow: inset 0 1px 0 rgba(255,255,255,.09), inset 0 0 0 1px rgba(201,168,90,.16);
}
.eg-mission [hidden] { display: none; }
.eg-mission__tete { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 14px; }
.eg-mission__sur { font-size: .72rem; line-height: 1.5; color: #9a8f78; }
.eg-mission__etapes { display: grid; gap: 8px; margin: 12px 0 0; padding-left: 1.7em; font-size: .8rem; line-height: 1.65; color: #8a8170; }
.eg-mission__etapes b { color: var(--eg-laiton); font-weight: 700; }
.eg-mission__etapes li.is-courante { color: #f3ead2; }
.eg-mission__etapes li.is-faite { color: #7f9a6a; }
.eg-mission__etapes li.is-faite b { color: #7f9a6a; }
.eg-mission__etapes .sxp-btn { margin-left: 6px; }
.eg-mission__code { font: 700 1rem/1.4 "Courier New", Courier, monospace; letter-spacing: .14em; word-spacing: .3em; color: var(--eg-ambre); white-space: nowrap; }
.eg-mission__suivi { color: var(--eg-ambre); }
.eg-mission__fin { margin: 12px 0 0; font-size: .86rem; line-height: 1.65; color: #f3ead2; }

.eg-machine, .eg-poste {
  position: relative;
  min-width: 0;
  padding: 44px 18px 18px;
  border-radius: 10px;
  background:
    radial-gradient(circle at 20% 0%, rgba(255,255,255,.06), transparent 55%),
    linear-gradient(180deg, var(--eg-bakelite-2), var(--eg-bakelite));
  border: 1px solid #000;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.09), inset 0 0 0 1px rgba(201,168,90,.16), 0 4px 10px rgba(0,0,0,.45);
}
/* Quatre vis de laiton aux angles de chaque platine. */
.eg-machine::before, .eg-poste::before {
  content: "";
  position: absolute; inset: 9px;
  pointer-events: none;
  background:
    radial-gradient(circle at 6px 6px, var(--eg-laiton) 0 3px, var(--eg-laiton-sombre) 3px 4.5px, transparent 5px) top left / 12px 12px no-repeat,
    radial-gradient(circle at 6px 6px, var(--eg-laiton) 0 3px, var(--eg-laiton-sombre) 3px 4.5px, transparent 5px) top right / 12px 12px no-repeat,
    radial-gradient(circle at 6px 6px, var(--eg-laiton) 0 3px, var(--eg-laiton-sombre) 3px 4.5px, transparent 5px) bottom left / 12px 12px no-repeat,
    radial-gradient(circle at 6px 6px, var(--eg-laiton) 0 3px, var(--eg-laiton-sombre) 3px 4.5px, transparent 5px) bottom right / 12px 12px no-repeat;
}

/* La plaque constructeur, en laiton gravé. */
.eg-plaque {
  position: absolute; top: 12px; left: 50%; transform: translateX(-50%);
  margin: 0; padding: 4px 16px;
  font: 700 .72rem/1.2 Georgia, "Times New Roman", serif;
  letter-spacing: .32em; text-transform: uppercase; white-space: nowrap;
  color: #2a1e08;
  background: linear-gradient(180deg, #e6cf8e, var(--eg-laiton) 45%, var(--eg-laiton-sombre));
  border: 1px solid #5e4a1c; border-radius: 3px;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.55), 0 1px 2px rgba(0,0,0,.6);
}

.eg-etiquette {
  display: flex; align-items: baseline; justify-content: space-between; gap: 10px;
  margin: 0 0 8px; padding-bottom: 5px;
  font-size: .64rem; font-weight: 700; letter-spacing: .2em; text-transform: uppercase;
  color: var(--eg-laiton); border-bottom: 1px dashed rgba(201,168,90,.3);
}
.eg-etiquette__info { font-size: .68rem; letter-spacing: .04em; text-transform: none; font-weight: 400; color: #9a8f78; }
/* L'histoire de la machine : une notice, sous le tableau de connexions. */
.eg-histoire { margin-top: 18px; }
.eg-histoire > p:not(.eg-aide) { margin: 10px 0 0; font: 400 .86rem/1.65 Georgia, "Times New Roman", serif; color: #d9cfb6; }
.eg-aide { margin: 8px 0 0; font-size: .72rem; line-height: 1.55; color: #9a8f78; }
.eg-rangee { display: flex; justify-content: center; gap: var(--eg-pas, 9px); }
.eg-rangee + .eg-rangee { margin-top: var(--eg-pas, 9px); }

.eg-select {
  appearance: none; -webkit-appearance: none;
  padding: 3px 18px 3px 7px; min-width: 46px;
  font: 700 .74rem/1.3 var(--sxp-mono, ui-monospace, monospace); color: #e6dcc6;
  background: #0d0d0f url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='8' height='5'%3E%3Cpath d='M0 0h8L4 5z' fill='%23c9a85a'/%3E%3C/svg%3E") right 6px center no-repeat;
  border: 1px solid #3d3626; border-radius: 4px; cursor: pointer;
}
.eg-select:focus-visible, .eg-touche:focus-visible, .eg-prise:focus-visible, .eg-molette:focus-visible, .eg-cle:focus-visible {
  outline: 2px solid var(--eg-ambre); outline-offset: 3px;
}

/* ── Les rotors ─────────────────────────────────────────────────────────── */
.eg-rotors {
  display: flex; justify-content: center; align-items: flex-start; flex-wrap: wrap; gap: 14px 22px;
  padding: 14px 12px 12px; margin-bottom: 16px;
  border-radius: 8px;
  background: linear-gradient(180deg, #0c0c0e, #1a1a1d);
  border: 1px solid #000; box-shadow: inset 0 3px 8px rgba(0,0,0,.8), 0 1px 0 rgba(255,255,255,.06);
}
.eg-reflecteur { display: flex; flex-direction: column; align-items: center; gap: 6px; align-self: center; font-size: .6rem; letter-spacing: .14em; text-transform: uppercase; color: #9a8f78; }
.eg-rotor { display: flex; flex-direction: column; align-items: center; gap: 5px; }
.eg-rotor__reglages { display: flex; gap: 8px; margin-top: 6px; }
.eg-rotor__reglages label { display: flex; flex-direction: column; align-items: center; gap: 3px; font-size: .56rem; letter-spacing: .14em; text-transform: uppercase; color: #9a8f78; }

/* La fenêtre : une lettre sur un tambour ivoire, derrière un cadre de laiton. */
.eg-fenetre {
  width: 46px; height: 56px; display: flex; align-items: center; justify-content: center; overflow: hidden;
  border-radius: 5px;
  background: linear-gradient(180deg, #8f8468 0, var(--eg-papier) 22%, #fffaf0 50%, var(--eg-papier) 78%, #8f8468 100%);
  border: 3px solid var(--eg-laiton-sombre);
  box-shadow: inset 0 0 0 1px var(--eg-laiton), inset 0 6px 8px -4px rgba(0,0,0,.55), inset 0 -6px 8px -4px rgba(0,0,0,.55), 0 2px 4px rgba(0,0,0,.7);
}
.eg-fenetre__lettre { font: 700 1.75rem/1 Georgia, "Times New Roman", serif; color: var(--eg-encre); }
.eg-fenetre__lettre.is-pas { animation: eg-pas .16s ease-out; }
@keyframes eg-pas { from { transform: translateY(-70%); opacity: .2; } to { transform: none; opacity: 1; } }

/* La molette crantée, vue de chant, au-dessus et au-dessous de la fenêtre. */
.eg-molette {
  width: 46px; height: 16px; padding: 0; cursor: pointer;
  border: 1px solid #000; border-radius: 4px;
  background: repeating-linear-gradient(90deg, #6f5a2c 0 3px, #2e2410 3px 5px), var(--eg-laiton-sombre);
  box-shadow: inset 0 2px 2px rgba(255,255,255,.28), inset 0 -3px 3px rgba(0,0,0,.6);
}
.eg-molette:hover { filter: brightness(1.25); }
.eg-molette:active { transform: translateY(1px); }

/* ── Lampes et touches ──────────────────────────────────────────────────── */
.eg-lampes, .eg-clavier, .eg-fiches__plan { --eg-pas: clamp(4px, 1.1vw, 10px); --eg-rond: clamp(26px, 5.6vw, 44px); }
.eg-lampes { padding: 14px 8px; margin-bottom: 4px; border-radius: 8px; background: #0b0b0c; border: 1px solid #000; box-shadow: inset 0 3px 10px rgba(0,0,0,.9); }
.eg-lampe {
  width: var(--eg-rond); height: var(--eg-rond); flex: 0 0 auto;
  display: flex; align-items: center; justify-content: center; border-radius: 50%;
  font: 700 clamp(.7rem, 1.9vw, 1rem)/1 Georgia, "Times New Roman", serif; color: #5d5544;
  background: radial-gradient(circle at 50% 36%, #3a3528, #111110 72%);
  border: 1px solid #3d3626; box-shadow: inset 0 2px 3px rgba(0,0,0,.8);
  transition: background-color .05s, box-shadow .05s, color .05s;
}
.eg-lampe.is-on {
  color: #2a1800;
  background: radial-gradient(circle at 50% 36%, #fff6c8, var(--eg-ambre) 52%, #9a5a00);
  border-color: #ffd36a;
  box-shadow: 0 0 12px var(--eg-ambre), 0 0 30px rgba(255,176,0,.55), inset 0 1px 2px rgba(255,255,255,.8);
}
.eg-annonce { position: absolute; width: 1px; height: 1px; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

.eg-clavier { padding: 16px 8px 18px; }
.eg-touche {
  width: var(--eg-rond); height: var(--eg-rond); flex: 0 0 auto; padding: 0; cursor: pointer;
  border-radius: 50%;
  font: 700 clamp(.7rem, 1.9vw, 1rem)/1 Georgia, "Times New Roman", serif; color: #efe6cf;
  background: radial-gradient(circle at 50% 30%, #4a4a50, #19191c 62%, #0a0a0b);
  border: 2px solid #b9b2a2;
  box-shadow: 0 4px 0 #050505, 0 6px 8px rgba(0,0,0,.65), inset 0 1px 1px rgba(255,255,255,.25);
  transition: transform .04s, box-shadow .04s;
  touch-action: manipulation; user-select: none; -webkit-user-select: none;
}
.eg-touche:hover { border-color: #fff; }
.eg-touche.is-enfoncee, .eg-touche:active { transform: translateY(4px); box-shadow: 0 0 0 #050505, 0 1px 3px rgba(0,0,0,.6), inset 0 2px 4px rgba(0,0,0,.6); }

/* ── Le tableau de connexions ───────────────────────────────────────────── */
.eg-fiches { margin-top: 6px; padding: 12px 10px 10px; border-radius: 8px; background: linear-gradient(180deg, #101012, #1c1c20); border: 1px solid #000; box-shadow: inset 0 2px 6px rgba(0,0,0,.8); }
.eg-fiches__plan { position: relative; padding: 6px 0 10px; }
.eg-cables { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; overflow: visible; z-index: 2; }
.eg-cables path { fill: none; stroke-width: 5; stroke-linecap: round; filter: drop-shadow(0 2px 2px rgba(0,0,0,.7)); }
.eg-prise {
  width: var(--eg-rond); height: calc(var(--eg-rond) + 10px); flex: 0 0 auto; padding: 2px 0 0; cursor: pointer;
  display: flex; flex-direction: column; align-items: center; gap: 3px;
  background: none; border: 1px solid transparent; border-radius: 6px; color: #b9ad90;
  touch-action: manipulation;
}
.eg-prise__lettre { font: 700 clamp(.6rem, 1.6vw, .78rem)/1 var(--sxp-mono, ui-monospace, monospace); }
.eg-prise__trous {
  width: 62%; aspect-ratio: 1; border-radius: 50%;
  background: radial-gradient(circle at 50% 50%, #000 0 34%, var(--eg-laiton-sombre) 36% 58%, var(--eg-laiton) 60% 72%, #3a2f14 74%);
  box-shadow: 0 1px 2px rgba(0,0,0,.8);
}
.eg-prise:hover { border-color: rgba(201,168,90,.45); }
.eg-prise.is-choisie { border-color: var(--eg-ambre); background: rgba(255,176,0,.12); color: var(--eg-ambre); }
.eg-prise.is-reliee .eg-prise__trous { background: radial-gradient(circle at 50% 50%, var(--eg-cable, #c33) 0 44%, #111 46% 60%, var(--eg-laiton) 62% 74%, #3a2f14 76%); }
.eg-prise.is-reliee { color: #fff; }

/* ── Les boutons du SDK, rhabillés ──────────────────────────────────────────
   Le SDK Panel les donne en vert phosphore et rouge vif, parfaits sur une
   console de terminal, criards sur du bois et du laiton. On garde leurs
   classes et leur comportement ; seules les couleurs changent, ici seulement. */
.eg-atelier { --sxp-green: var(--eg-ambre); --sxp-accent: var(--eg-ambre); }
.eg-atelier .sxp-btn {
  padding: 7px 13px; cursor: pointer;
  font: 700 .72rem/1.2 var(--sxp-mono, ui-monospace, monospace); letter-spacing: .06em;
  color: #e9dfc6;
  background: linear-gradient(180deg, #34343a, #1b1b1f);
  border: 1px solid #000; border-radius: 5px;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.14), 0 2px 0 #050505, 0 3px 5px rgba(0,0,0,.5);
  text-shadow: none;
}
.eg-atelier .sxp-btn:hover:not(:disabled) { filter: brightness(1.18); }
.eg-atelier .sxp-btn:active:not(:disabled) { transform: translateY(2px); box-shadow: inset 0 1px 0 rgba(255,255,255,.1), 0 0 0 #050505; }
.eg-atelier .sxp-btn:focus-visible { outline: 2px solid var(--eg-ambre); outline-offset: 3px; }
.eg-atelier .sxp-btn:disabled { opacity: .45; cursor: not-allowed; }
.eg-atelier .sxp-btn--primary {
  color: #2a1e08;
  background: linear-gradient(180deg, #f1dc9c, var(--eg-laiton) 48%, var(--eg-laiton-sombre));
  border-color: #5e4a1c;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.6), 0 2px 0 #3a2c0e, 0 3px 6px rgba(0,0,0,.55);
}
.eg-atelier .sxp-btn--ghost { background: transparent; border-color: rgba(201,168,90,.45); color: var(--eg-laiton); box-shadow: none; }
.eg-atelier .sxp-btn--danger { color: #ffd9cf; background: linear-gradient(180deg, #7a2a1c, #4a140c); border-color: #2a0a06; }

/* ── Le poste ───────────────────────────────────────────────────────────── */
.eg-bloc + .eg-bloc { margin-top: 18px; }
.eg-bloc--bas { padding-top: 14px; border-top: 1px dashed rgba(201,168,90,.25); }
.eg-actions { margin-top: 10px; display: flex; flex-wrap: wrap; gap: 8px; }

/* La bande de papier : groupes de cinq lettres, frappés à l'encre. */
.eg-bande {
  min-height: 62px; max-height: 150px; overflow-y: auto; padding: 12px 14px;
  font: 700 1.02rem/1.7 "Courier New", Courier, monospace; letter-spacing: .14em; word-spacing: .5em; overflow-wrap: anywhere;
  color: var(--eg-encre);
  background:
    repeating-linear-gradient(0deg, transparent 0 27px, rgba(120,90,40,.16) 27px 28px),
    linear-gradient(180deg, #fbf5e2, var(--eg-papier));
  border-radius: 3px; border-left: 6px dotted #b9a67a; border-right: 6px dotted #b9a67a;
  box-shadow: 0 2px 5px rgba(0,0,0,.55), inset 0 0 14px rgba(120,90,40,.25);
}
/* Le message en clair : le champ de texte du SDK Panel, en capitales d'opérateur. */
.eg-clairbloc { margin-top: 12px; }
.eg-clairbloc > label { display: block; margin-bottom: 6px; }
.sxp .eg-clair { display: block; box-sizing: border-box; min-height: 62px; letter-spacing: .08em; text-transform: uppercase; }
.sxp .eg-clair::placeholder { letter-spacing: 0; text-transform: none; }
.eg-etiquette__info.is-lecture { color: var(--eg-ambre); }
.eg-bande__vide { font: 400 .76rem/1.5 var(--sxp-mono, ui-monospace, monospace); letter-spacing: 0; word-spacing: 0; color: #8a7a55; }
.eg-recu__texte .eg-bande__vide { color: #9a8f78; }
.eg-perfo, .eg-trace { display: block; width: 100%; margin-top: 8px; border-radius: 6px; background: #0b0b0c; border: 1px solid #000; }
.eg-etat { margin: 8px 0 0; font-size: .72rem; color: var(--eg-ambre); min-height: 1.2em; }

/* Le manipulateur : un socle, un bras de laiton, un bouton de bakélite. */
.eg-manip { display: flex; align-items: center; flex-wrap: wrap; gap: 16px 24px; margin-top: 12px; }
.eg-cle {
  position: relative; flex: 0 0 auto; width: 190px; height: 104px; padding: 0; cursor: pointer;
  border-radius: 10px; border: 1px solid #000;
  background:
    radial-gradient(circle at 16px 16px, var(--eg-laiton) 0 3px, transparent 4px),
    radial-gradient(circle at calc(100% - 16px) 16px, var(--eg-laiton) 0 3px, transparent 4px),
    linear-gradient(180deg, #4a3020, #2a1a10);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.14), 0 5px 10px rgba(0,0,0,.6);
  touch-action: none; user-select: none; -webkit-user-select: none;
}
.eg-cle__bras {
  position: absolute; left: 22px; right: 46px; top: 46px; height: 12px; border-radius: 6px;
  background: linear-gradient(180deg, #f1dc9c, var(--eg-laiton) 45%, var(--eg-laiton-sombre));
  box-shadow: 0 3px 4px rgba(0,0,0,.6);
  transform-origin: 12% 50%; transform: rotate(-5deg); transition: transform .04s;
}
.eg-cle__bouton {
  position: absolute; right: 16px; top: 16px; width: 62px; height: 62px; border-radius: 50%;
  background: radial-gradient(circle at 40% 30%, #5a5a60, #151517 60%, #000);
  border: 2px solid #000;
  box-shadow: 0 8px 0 #060606, 0 12px 12px rgba(0,0,0,.6), inset 0 2px 2px rgba(255,255,255,.3);
  transition: transform .04s, box-shadow .04s;
}
.eg-cle.is-enfoncee .eg-cle__bras { transform: rotate(0deg); }
.eg-cle.is-enfoncee .eg-cle__bouton { transform: translateY(7px); box-shadow: 0 1px 0 #060606, 0 3px 6px rgba(0,0,0,.6), inset 0 2px 2px rgba(255,255,255,.3), 0 0 18px rgba(255,176,0,.55); }
.eg-manip__reglages { display: flex; align-items: center; gap: 18px; }
.eg-recu { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 14px; }
.eg-vu { display: block; flex: none; width: 200px; max-width: 100%; height: 110px; border-radius: 6px; }
.eg-recu__lu { flex: 1 1 180px; min-width: 0; }
.eg-knobcell { display: flex; flex-direction: column; align-items: center; gap: 4px; }

.eg-recu { margin-top: 12px; padding: 10px 12px; border-radius: 6px; background: #0b0b0c; border: 1px solid #000; box-shadow: inset 0 2px 6px rgba(0,0,0,.8); }
.eg-recu__signes { margin: 0; min-height: 1.5em; font: 700 1.05rem/1.5 var(--sxp-mono, ui-monospace, monospace); letter-spacing: .22em; color: var(--eg-ambre); overflow-wrap: anywhere; }
.eg-recu__texte { margin: 4px 0 0; min-height: 1.6em; font: 700 1.1rem/1.6 "Courier New", Courier, monospace; letter-spacing: .12em; color: #f3ead2; overflow-wrap: anywhere; }
.eg-recu__texte .is-ouverte { color: var(--eg-ambre); }

.eg-table { margin-top: 12px; font-size: .74rem; }
.eg-table summary { cursor: pointer; color: var(--eg-laiton); letter-spacing: .08em; }
.eg-table__grille { display: grid; grid-template-columns: repeat(auto-fill, minmax(86px, 1fr)); gap: 3px 10px; margin-top: 8px; }
.eg-table__grille span { display: flex; justify-content: space-between; gap: 8px; padding: 2px 0; border-bottom: 1px dotted rgba(201,168,90,.2); }
.eg-table__grille b { color: #f3ead2; }
.eg-table__grille i { font-style: normal; color: var(--eg-ambre); letter-spacing: .12em; }

@media (max-width: 520px) {
  .eg-machine, .eg-poste { padding: 42px 10px 14px; }
  .eg-rotors { gap: 10px 12px; padding: 12px 6px 10px; }
  .eg-reflecteur { flex-direction: row; width: 100%; justify-content: center; }
  .eg-cle { width: 100%; max-width: 230px; }
  .eg-actions .sxp-btn { flex: 1 1 auto; }
}
@media (prefers-reduced-motion: reduce) {
  .eg-fenetre__lettre.is-pas { animation: none; }
  .eg-touche, .eg-cle__bras, .eg-cle__bouton, .eg-lampe { transition: none; }
}