/* L'outil d'électricité (electricite.html) : la barre du circuit, la palette, le plan de travail (SVG), la fiche, Mes
   circuits et Circuits proposés. Le socle de Craft sert pour ce qui se partage (tools-craft.css : recherche, notes,
   titres de bloc). Couleurs des réseaux : courant miel, eau bleue, convoyeur gris (pointillés). */
.ec {
  display: grid;
  gap: 12px;
}

/* La barre : le nom du circuit et ses actions, puis la simulation (lecture, vitesse, soleil, vent, pluie) */
.ec-bar {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
  gap: 10px 16px;
  padding: 12px 14px;
  border: 1px solid rgba(var(--sheen-rgb), 0.06);
  background: linear-gradient(180deg, #1c1813, #141110);
}
.ec-bar__title {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 6px 12px;
  min-width: 0;
}
.ec-bar__title input {
  flex: 1 1 260px;
  min-width: 0;
  padding: 6px 8px;
  border: 1px solid transparent;
  background: transparent;
  color: var(--cream);
  font: 700 1.25rem "Roboto Condensed", sans-serif;
}
.ec-bar__title input:hover,
.ec-bar__title input:focus {
  border-color: rgba(var(--gold-rgb), 0.4);
  background: rgba(var(--shadow-rgb), 0.2);
  outline: none;
}
.ec-bar__owner,
.ec-bar__dirty {
  color: var(--text-soft);
  font-size: 0.85rem;
}
.ec-bar__ro {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 3px 8px;
  border: 1px solid rgba(var(--gold-rgb), 0.4);
  color: var(--gold);
  font: 700 0.8rem "Roboto Condensed", sans-serif;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}
.ec-bar__msg {
  color: var(--value-strong);
  font-size: 0.9rem;
}
.ec-bar__actions {
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-end;
  gap: 6px;
}
.ec-bar__sim {
  grid-column: 1 / -1;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px 18px;
  padding-top: 10px;
  border-top: 1px solid rgba(var(--sheen-rgb), 0.05);
}
.ec-speed,
.ec-env {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  color: var(--text-soft);
  font-size: 0.9rem;
}
.ec-speed .rd-catpick {
  min-width: 84px;
}
.ec-speed .rd-catpick select {
  min-height: 34px;
  padding-left: 10px;
  font-size: 0.9rem;
}
.ec-env i {
  color: var(--gold);
}
.ec-env input {
  width: 110px;
  accent-color: var(--gold);
}
.ec-env b {
  min-width: 42px;
  color: var(--cream);
  font-family: "Roboto Condensed", sans-serif;
}

/* Les trois colonnes : palette, plan, fiche (tenant dans l'écran ; chaque colonne défile en elle-même) */
.ec-cols {
  display: grid;
  grid-template-columns: 260px minmax(0, 1fr) 300px;
  gap: 12px;
  height: min(78vh, 860px);
  min-height: 560px;
}
.ec-palette,
.ec-side {
  display: flex;
  flex-direction: column;
  gap: 10px;
  min-height: 0;
  padding: 12px;
  overflow-y: auto;
  border: 1px solid rgba(var(--sheen-rgb), 0.06);
  background: linear-gradient(180deg, #1c1813, #141110);
  scrollbar-width: thin;
}

/* La palette : les familles (comme les rayons de Craft), puis les objets */
.ec-families {
  display: grid;
  border: 1px solid rgba(var(--sheen-rgb), 0.05);
}
.ec-families button {
  display: grid;
  grid-template-columns: 20px minmax(0, 1fr) auto;
  align-items: center;
  gap: 8px;
  padding: 7px 10px;
  border: 0;
  border-left: 3px solid transparent;
  background: none;
  color: var(--text);
  font: 500 0.92rem Roboto, sans-serif;
  text-align: left;
  cursor: pointer;
}
.ec-families button + button {
  border-top: 1px solid rgba(var(--sheen-rgb), 0.04);
}
.ec-families button:hover {
  background: rgba(var(--sheen-rgb), 0.035);
}
.ec-families button i,
.ec-families small {
  color: var(--text-soft);
}
.ec-families button.is-on {
  border-left-color: var(--gold);
  background: var(--picked-bg);
  color: var(--cream);
  font-weight: 700;
}
.ec-families button.is-on i,
.ec-families button.is-on small {
  color: var(--gold);
}
/* Les états de l'outil (fiche, palette) : la légende commune (packages/ui, text.css), serrée comme le reste */
.ec .lpa-caption {
  line-height: 1.45;
}
/* Les descriptions d'un bloc : la note commune (packages/ui, note.css), 14 px après ce qui la précède (blocs à 10) */
.ec .lpa-note:not(:first-child) {
  margin-top: 4px;
}
.ec-palette__hint {
  margin: 0;
  color: var(--text-soft);
  font-size: 0.85rem;
  line-height: 1.4;
}
.ec-items {
  display: grid;
  gap: 4px;
  margin: 0;
  padding: 0;
  list-style: none;
}
.ec-item {
  display: grid;
  grid-template-columns: 38px minmax(0, 1fr);
  align-items: center;
  gap: 10px;
  width: 100%;
  padding: 6px 8px;
  border: 1px solid rgba(var(--sheen-rgb), 0.05);
  background: rgba(var(--sheen-rgb), 0.025);
  color: var(--text);
  text-align: left;
  cursor: grab;
}
.ec-item:hover {
  border-color: rgba(var(--gold-rgb), 0.35);
  background: rgba(var(--sheen-rgb), 0.05);
}
.tools-panel .ec-item img {
  width: 38px;
  height: 38px;
  object-fit: contain;
}
.ec-item span {
  display: grid;
  min-width: 0;
}
.ec-item b {
  overflow: hidden;
  color: var(--cream);
  font: 600 0.9rem/1.2 "Roboto Condensed", sans-serif;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.ec-item small {
  color: var(--text-soft);
  font-size: 0.8rem;
}

/* Le plan de travail : un quadrillage, les objets et les fils en SVG */
.ec-board {
  position: relative;
  min-height: 0;
  overflow: hidden;
  border: 1px solid rgba(var(--gold-rgb), 0.25);
  background-color: #12100d;
  cursor: grab;
  touch-action: none;
}
.ec-board:focus-visible {
  outline: 2px solid var(--gold);
  outline-offset: -2px;
}
/* La grille, derrière le dessin : des lignes très discrètes, une fine toutes les 32 unités du plan, une un peu plus
   marquée toutes les 128 (pas de points : trop chargé), calées sur la vue par applyView */
.ec-grid {
  position: absolute;
  inset: 0;
  background-image:
    linear-gradient(rgba(255, 240, 210, 0.022) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255, 240, 210, 0.022) 1px, transparent 1px),
    linear-gradient(rgba(255, 240, 210, 0.045) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255, 240, 210, 0.045) 1px, transparent 1px);
  background-size: 32px 32px, 32px 32px, 128px 128px, 128px 128px;
  pointer-events: none;
}
/* Le dessin, par-dessus la grille, de la taille du plan */
#ec-svg {
  position: absolute;
  top: 0;
  left: 0;
  display: block;
  width: 100%;
  height: 100%;
  user-select: none;
}
.ec-board__empty {
  position: absolute;
  inset: 0;
  display: grid;
  align-content: center;
  justify-items: center;
  gap: 8px;
  padding: 24px;
  color: var(--text-soft);
  text-align: center;
  pointer-events: none;
}
.ec-board__empty span {
  max-width: 440px;
  line-height: 1.5;
}
.ec [hidden] {
  display: none !important;
}
.ec-board__empty .pl-btn {
  margin-top: 6px;
  pointer-events: auto;
}
.ec-board__empty i {
  color: var(--gold);
  font-size: 2rem;
}
.ec-board__empty b {
  color: var(--cream);
  font: 700 1.15rem "Roboto Condensed", sans-serif;
}
.ec-zoom {
  position: absolute;
  right: 10px;
  bottom: 10px;
  display: grid;
  gap: 4px;
}
.ec-zoom button {
  width: 34px;
  height: 34px;
  border: 1px solid rgba(var(--sheen-rgb), 0.12);
  background: rgba(20, 17, 16, 0.9);
  color: var(--cream);
  cursor: pointer;
}
.ec-zoom button:hover {
  border-color: var(--gold);
}

/* Un objet : une carte sombre, son icône du jeu dans un puits, son nom entier (deux lignes au plus) et ce qu'il
   consomme ou produit, ses prises à gauche (entrées) et à droite (sorties), la valeur en miel. Le liseré de gauche dit
   l'état : vert alimenté, miel source, rouge court-circuit, gris sans courant. L'objet choisi : un cadre miel. */
.ec-part {
  cursor: move;
  --part-edge: #5b5146;
}
.ec-part.is-on {
  --part-edge: #7fc24a;
}
.ec-part.is-source {
  --part-edge: #e0b23a;
}
.ec-part.is-short {
  --part-edge: #e0573c;
}
.ec-part.is-storage {
  --part-edge: #b8a98e;
}
.ec-part.is-storage .ec-part__state {
  fill: #d8ccb4;
}
.ec-part.is-water {
  --part-edge: #4d9bd6;
}
.ec-part.is-water .ec-part__state {
  fill: #7cc0ec;
}
.ec-part__box {
  fill: #1d1914;
  stroke: rgba(var(--sheen-rgb), 0.1);
  stroke-width: 1;
}
/* L'ombre : un rectangle décalé (un filtre d'ombre par objet coûtait cher à chaque image) */
.ec-part__shadow {
  fill: rgba(var(--shadow-rgb), 0.4);
}
.ec-part__head {
  fill: #282119;
}
.ec-part__edge {
  fill: var(--part-edge);
}
.ec-part__well {
  fill: rgba(var(--shadow-rgb), 0.32);
  stroke: rgba(var(--sheen-rgb), 0.06);
}
.ec-part.is-picked .ec-part__box {
  stroke: var(--gold);
  stroke-width: 2;
}
.ec-part:hover .ec-part__box {
  stroke: rgba(var(--gold-rgb), 0.55);
}
.ec-part.is-short .ec-part__box {
  stroke: rgba(224, 87, 60, 0.7);
}
.ec-part__led {
  fill: var(--part-edge);
}
.ec-part.is-on .ec-part__led,
.ec-part.is-short .ec-part__led {
  stroke: var(--part-edge);
  stroke-width: 3;
  stroke-opacity: 0.35;
}
.ec-part__name {
  fill: var(--cream);
  font: 700 0.8rem "Roboto Condensed", sans-serif;
}
.ec-part__sub {
  fill: var(--text-soft);
  font: 500 0.8rem Roboto, sans-serif;
}
/* Le pied de carte : le voyant et l'état (Alimenté, Pas alimenté, Court-circuit, Source), et « +n prises » cachées */
.ec-part__rule {
  stroke: rgba(var(--sheen-rgb), 0.06);
}
.ec-part__state {
  fill: var(--text-soft);
  font: 600 0.8rem "Roboto Condensed", sans-serif;
  letter-spacing: 0.02em;
}
.ec-part.is-on .ec-part__state,
.ec-part.is-source .ec-part__state {
  fill: #a9d77d;
}
.ec-part.is-source .ec-part__state {
  fill: var(--value-strong);
}
.ec-part.is-short .ec-part__state {
  fill: #ff7a5c;
}
.ec-part__more {
  fill: var(--text-soft);
  font: 500 0.8rem Roboto, sans-serif;
  font-style: italic;
}
.ec-port__val {
  fill: var(--value-strong);
  font-weight: 700;
}

/* Les prises : rond (courant), carré (eau), losange (convoyeur) ; la zone qu'on attrape est plus large que la forme.
   Pendant qu'on tire un fil, les entrées d'un autre réseau et les sorties s'effacent, les bonnes entrées s'éclairent. */
.ec-port__hit {
  fill: transparent;
  cursor: crosshair;
}
.ec-port__dot {
  stroke: #12100d;
  stroke-width: 2;
  pointer-events: none;
}
.ec-port.is-electric .ec-port__dot {
  fill: #e0b23a;
}
.ec-port.is-fluidic .ec-port__dot {
  fill: #4d9bd6;
}
.ec-port.is-industrial .ec-port__dot {
  fill: #a7a196;
}
.ec-port.is-mount .ec-port__dot {
  fill: #12100d;
  stroke: var(--cream);
}
.ec-port:hover .ec-port__dot {
  stroke: var(--cream);
}
.ec-port text {
  fill: var(--text);
  font: 500 0.8rem Roboto, sans-serif;
  pointer-events: none;
}
#ec-svg[data-wiring] .ec-port {
  opacity: 0.25;
  transition: opacity 0.15s;
}
#ec-svg[data-wiring="electric"] .ec-port.is-in.is-electric,
#ec-svg[data-wiring="fluidic"] .ec-port.is-in.is-fluidic,
#ec-svg[data-wiring="industrial"] .ec-port.is-in.is-industrial {
  opacity: 1;
}
#ec-svg[data-wiring="electric"] .ec-port.is-in.is-electric .ec-port__dot,
#ec-svg[data-wiring="fluidic"] .ec-port.is-in.is-fluidic .ec-port__dot,
#ec-svg[data-wiring="industrial"] .ec-port.is-in.is-industrial .ec-port__dot {
  stroke: var(--cream);
  stroke-width: 2.5;
}

/* Les liaisons. La couleur vient du fil (--link) ; la forme, du réseau. Câble : un trait fin, une étincelle qui court
   quand il porte du courant. Tuyau : une paroi large et pâle, l'eau au milieu, qui coule quand elle passe. Convoyeur :
   une bande et ses lattes, qui avancent quand il tourne. Ce qui ne porte rien est plus terne. */
.ec-link {
  fill: none;
  pointer-events: none;
}
.ec-cable {
  stroke: var(--link);
  stroke-width: 3;
  stroke-linecap: round;
}
.ec-cable__spark {
  stroke: rgba(255, 248, 225, 0.85);
  stroke-width: 1.6;
  stroke-linecap: round;
  stroke-dasharray: 2 22;
  animation: ec-flow 0.9s linear infinite;
}
.ec-pipe__wall {
  stroke: var(--link);
  stroke-width: 11;
  stroke-linecap: round;
  opacity: 0.38;
}
.ec-pipe__water {
  stroke: var(--link);
  stroke-width: 4.5;
  stroke-linecap: round;
}
.ec-pipe__water.is-live {
  stroke-dasharray: 12 6;
  animation: ec-flow 1.1s linear infinite;
}
.ec-belt__band {
  stroke: var(--link);
  stroke-width: 13;
  opacity: 0.85;
}
.ec-belt__slats {
  stroke: #14110e;
  stroke-width: 9;
  stroke-dasharray: 2.5 6.5;
}
.ec-belt__slats.is-live {
  animation: ec-flow 0.8s linear infinite;
}
/* La fixation (un adaptateur ou un entonnoir posé sur un conteneur) : un trait épais en pointillé court, sans flux */
.ec-mount {
  stroke: var(--link);
  stroke-width: 4;
  stroke-dasharray: 3 3;
  opacity: 0.8;
}
.ec-wire-g.is-mount.is-idle .ec-link {
  opacity: 0.8;
}
.ec-wire-g.is-idle .ec-link {
  opacity: 0.42;
}
.ec-wire-g.is-idle .ec-pipe__wall {
  opacity: 0.18;
}
.ec-wire__halo {
  stroke: var(--cream);
  stroke-width: 19;
  stroke-linecap: round;
  opacity: 0.16;
}
.ec-wire-g.is-picked .ec-link {
  opacity: 1;
}
.ec-wire-g.is-picked .ec-pipe__wall {
  opacity: 0.45;
}
#ec-ghost .ec-link {
  opacity: 0.7;
}
/* Pendant qu'on agit sur le plan, les flux ne défilent plus (chaque image du plan entier coûte cher) */
#ec-svg.is-busy .ec-link {
  animation-play-state: paused;
}
@keyframes ec-flow {
  to {
    stroke-dashoffset: -24;
  }
}
@media (prefers-reduced-motion: reduce) {
  .ec-link {
    animation: none !important;
  }
}
/* Le trajet de ce qui est choisi reste net ; le reste du plan s'efface */
.ec-wire-g.is-dim,
.ec-part.is-dim {
  opacity: 0.22;
}
.ec-wire-g,
.ec-part {
  transition: opacity 0.15s;
}
.ec-wire__hit {
  fill: none;
  stroke: transparent;
  stroke-width: 16;
  cursor: pointer;
}
.ec-wire__label {
  fill: var(--cream);
  font: 700 0.8rem "Roboto Condensed", sans-serif;
  paint-order: stroke;
  stroke: #12100d;
  stroke-width: 3px;
  pointer-events: none;
}

/* Les pliages du fil choisi : des points crème à déplacer ; un « + » au milieu de chaque tronçon pour en ajouter */
.ec-bend {
  fill: var(--cream);
  stroke: #12100d;
  stroke-width: 2;
  cursor: move;
}
.ec-bend:hover {
  fill: var(--gold);
}
.ec-bend-add {
  cursor: copy;
  opacity: 0.7;
}
.ec-bend-add:hover {
  opacity: 1;
}
.ec-bend-add circle {
  fill: #12100d;
  stroke: var(--cream);
  stroke-width: 1.5;
}
.ec-bend-add path {
  stroke: var(--cream);
  stroke-width: 1.6;
  pointer-events: none;
}
.ec-wire__plate {
  fill: rgba(15, 13, 10, 0.88);
  stroke: rgba(var(--sheen-rgb), 0.08);
  pointer-events: none;
}
.ec-wire__plate.is-too-long {
  stroke: rgba(255, 122, 92, 0.6);
}
.ec-wire__label.is-too-long {
  fill: #ff7a5c;
}

/* Les zones : un cadre teinté de leur couleur, leur titre dans un bandeau (la poignée) ; la choisie, un liseré plein et
   la poignée d'agrandissement au coin */
.ec-zone__box {
  fill: color-mix(in srgb, var(--zone) 6%, transparent);
  stroke: color-mix(in srgb, var(--zone) 45%, transparent);
  stroke-width: 1.5;
  stroke-dasharray: 6 4;
  pointer-events: none;
}
.ec-zone__head {
  fill: color-mix(in srgb, var(--zone) 14%, transparent);
  cursor: move;
}
.ec-zone__title {
  fill: var(--zone);
  font: 700 14px "Roboto Condensed", sans-serif;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  pointer-events: none;
}
.ec-zone.is-picked .ec-zone__box {
  stroke: var(--zone);
  stroke-dasharray: none;
  stroke-width: 2;
}
.ec-zone__resize {
  fill: var(--cream);
  stroke: #12100d;
  stroke-width: 2;
  cursor: nwse-resize;
}
.ec-box.is-zone {
  stroke: var(--cream);
}
.ec-mini__zone {
  fill: color-mix(in srgb, var(--zone) 18%, transparent);
  stroke: color-mix(in srgb, var(--zone) 60%, transparent);
  stroke-width: 1px;
  vector-effect: non-scaling-stroke;
}
/* Les textes posés sur le plan : un fond sombre, un liseré de leur couleur (crème par défaut), petits ou grands */
.ec-note {
  --note: var(--cream);
  cursor: move;
}
.ec-note__box {
  fill: rgba(20, 17, 14, 0.82);
  stroke: rgba(var(--sheen-rgb), 0.08);
}
.ec-note__bar {
  fill: var(--note);
}
.ec-note__text {
  fill: var(--note);
  font: 500 13px Roboto, sans-serif;
}
.ec-note.is-big .ec-note__text {
  font: 700 21px "Roboto Condensed", sans-serif;
  letter-spacing: 0.02em;
}
.ec-note.is-empty .ec-note__text {
  fill: var(--text-soft);
  font-style: italic;
}
.ec-note.is-picked .ec-note__box {
  stroke: var(--gold);
  stroke-width: 2;
}

/* Les outils du plan (en haut à gauche) et la légende des formes (en bas à gauche) */
.ec-tools {
  position: absolute;
  top: 10px;
  left: 10px;
  display: flex;
  gap: 6px;
}
.ec-tools button {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  height: 34px;
  padding: 0 12px;
  border: 1px solid rgba(var(--sheen-rgb), 0.12);
  background: rgba(20, 17, 16, 0.9);
  color: var(--cream);
  font: 700 0.85rem "Roboto Condensed", sans-serif;
  cursor: pointer;
}
.ec-tools button:hover:not(:disabled) {
  border-color: var(--gold);
}
/* Annuler, refaire, sélection, coller : des boutons carrés à icône, groupés deux par deux */
.ec-tools__group {
  display: flex;
}
.ec-tools__group button + button {
  border-left: 0;
}
.ec-tools button.is-icon {
  justify-content: center;
  width: 34px;
  padding: 0;
}
.ec-tools button:disabled {
  color: var(--text-soft);
  opacity: 0.45;
  cursor: default;
}
.ec-tools button:disabled i {
  color: inherit;
}
.ec-tools button.is-on {
  border-color: var(--picked-edge);
  background: var(--picked-bg);
}
/* Le cadre de sélection tracé sur le plan */
.ec-box {
  fill: rgba(var(--gold-rgb), 0.08);
  stroke: var(--gold);
  stroke-width: 1px;
  stroke-dasharray: 5 4;
  vector-effect: non-scaling-stroke;
}
.ec-tools i {
  color: var(--gold);
}
/* La vue d'ensemble en bas à droite, contre les boutons de zoom : les objets en petit, le cadre de la vue en miel */
.ec-mini {
  position: absolute;
  bottom: 10px;
  right: 52px;
  width: 170px;
  height: 110px; /* la hauteur des trois boutons de zoom */
  padding: 6px;
  border: 1px solid rgba(var(--gold-rgb), 0.35);
  background: rgba(14, 12, 9, 0.92);
  cursor: crosshair;
  touch-action: none;
}
.ec-mini svg {
  display: block;
  width: 100%;
  height: 100%;
  overflow: hidden;
}
.ec-mini__part {
  fill: rgba(232, 220, 198, 0.35);
}
.ec-mini__part.is-on {
  fill: rgba(127, 194, 74, 0.85);
}
.ec-mini__part.is-source {
  fill: rgba(224, 178, 58, 0.85);
}
.ec-mini__part.is-storage {
  fill: rgba(184, 169, 142, 0.7);
}
.ec-mini__part.is-water {
  fill: rgba(77, 155, 214, 0.85);
}
.ec-mini__part.is-short {
  fill: #e0573c;
}
.ec-mini__part.is-picked {
  stroke: var(--cream);
  stroke-width: 2px;
  vector-effect: non-scaling-stroke;
}
.ec-mini__note {
  fill: rgba(232, 220, 198, 0.12);
}
.ec-mini__wire {
  fill: none;
  stroke: rgba(224, 178, 58, 0.55);
  stroke-width: 1px;
  vector-effect: non-scaling-stroke;
}
.ec-mini__wire.is-fluidic {
  stroke: rgba(99, 196, 232, 0.7);
}
.ec-mini__wire.is-industrial {
  stroke: rgba(167, 161, 150, 0.7);
}
.ec-mini__view {
  fill: rgba(var(--gold-rgb), 0.08);
  stroke: var(--gold);
  stroke-width: 2px;
  vector-effect: non-scaling-stroke;
}

/* Les raccourcis en bas à gauche, repliables (plié : le titre seul) */
.ec-keys {
  position: absolute;
  bottom: 10px;
  left: 10px;
  border: 1px solid rgba(var(--sheen-rgb), 0.08);
  background: rgba(20, 17, 16, 0.95);
  color: var(--text-soft);
  font-size: 0.8rem;
}
.ec-keys summary {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 7px 10px;
  color: var(--cream);
  cursor: pointer;
  list-style: none;
}
.ec-keys summary::-webkit-details-marker {
  display: none;
}
.ec-keys summary:hover b {
  color: var(--gold);
}
.ec-keys summary > i:first-child {
  color: var(--gold);
}
.ec-keys summary > i:last-child {
  display: grid;
  place-items: center;
  width: 14px;
  height: 14px;
  margin-left: auto;
  color: var(--text-soft);
  font-size: 0.7rem;
  line-height: 1;
  transition: transform 0.15s;
}
.ec-keys:not([open]) summary > i:last-child {
  transform: rotate(-90deg);
}
.ec-keys b {
  font: 700 0.78rem "Roboto Condensed", sans-serif;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}
.ec-keys__list {
  display: grid;
  grid-template-columns: auto auto;
  align-items: center;
  gap: 4px 10px;
  padding: 0 10px 9px;
}
.ec-keys__k {
  display: flex;
  align-items: center;
  gap: 3px;
  white-space: nowrap;
}
.ec-keys__k i {
  margin: 0 2px;
  color: var(--text-soft);
  font-style: normal;
}
.ec-keys kbd {
  padding: 1px 5px;
  border: 1px solid rgba(var(--sheen-rgb), 0.2);
  border-bottom-width: 2px;
  background: rgba(var(--sheen-rgb), 0.05);
  color: var(--cream);
  font: 600 0.74rem "Roboto Condensed", sans-serif;
}

/* La légende des formes, en haut à droite */
.ec-legend {
  position: absolute;
  top: 10px;
  right: 10px;
  display: grid;
  gap: 3px;
  padding: 7px 10px;
  border: 1px solid rgba(var(--sheen-rgb), 0.08);
  background: rgba(20, 17, 16, 0.85);
  color: var(--text-soft);
  font-size: 0.8rem;
  pointer-events: none;
}
.ec-legend span {
  display: flex;
  align-items: center;
  gap: 8px;
}
.ec-legend svg {
  overflow: visible;
}

/* La fiche de droite */
.ec-side h3 {
  display: flex;
  align-items: center;
  gap: 8px;
  margin: 0;
  color: var(--cream);
  font: 700 1.1rem "Roboto Condensed", sans-serif;
}
.ec-side h3 i {
  color: var(--gold);
}
.ec-side__head {
  display: grid;
  grid-template-columns: 48px minmax(0, 1fr);
  align-items: center;
  gap: 12px;
}
.tools-panel .ec-side__head img {
  width: 48px;
  height: 48px;
  object-fit: contain;
}
.ec-side__big {
  margin: 0;
  color: var(--value-strong);
  font: 800 1.6rem "Roboto Condensed", sans-serif;
}
.ec-status {
  margin: 2px 0 0;
  font: 700 0.85rem "Roboto Condensed", sans-serif;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}
.ec-status.is-on,
.ec-status.is-source {
  color: var(--state-ok);
}
.ec-status.is-off {
  color: var(--text-soft);
}
.ec-status.is-short {
  color: #e0573c;
}
.ec-facts,
.ec-ports {
  display: grid;
  margin: 0;
  padding: 0;
  list-style: none;
}
.ec-facts li,
.ec-ports li {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  align-items: center;
  gap: 8px;
  padding: 6px 0;
  border-top: 1px solid rgba(var(--sheen-rgb), 0.05);
  color: var(--text);
  font-size: 0.9rem;
}
.ec-facts li {
  grid-template-columns: minmax(0, 1fr) auto;
}
.ec-facts b,
.ec-ports b {
  color: var(--cream);
  font: 700 0.98rem "Roboto Condensed", sans-serif;
}
.ec-facts b.is-warn {
  color: #e0a03a;
}
.ec-dot {
  width: 9px;
  height: 9px;
  border-radius: 50%;
}
.ec-dot.is-electric {
  background: #e0b23a;
}
.ec-dot.is-fluidic {
  background: #4d9bd6;
}
.ec-dot.is-industrial {
  background: #a7a196;
}
.ec-controls {
  display: grid;
  gap: 10px;
}
.ec-field {
  display: grid;
  gap: 4px;
  color: var(--text-soft);
  font-size: 0.88rem;
}
.ec-field input[type="number"] {
  width: 100%;
  padding: 6px 8px;
  border: 1px solid var(--edge);
  background: rgba(var(--shadow-rgb), 0.25);
  color: var(--cream);
}
.ec-field input[type="range"] {
  accent-color: var(--gold);
}
.ec-toggle {
  display: flex;
  align-items: center;
  gap: 8px;
  color: var(--text);
  font-size: 0.92rem;
  cursor: pointer;
}
.ec-toggle input {
  accent-color: var(--gold);
}
.ec-side__remove {
  align-self: flex-start;
  margin-top: auto;
}
/* La couleur d'un fil ou d'un texte : des carrés de couleur ; la choisie, un liseré crème. Taille d'un texte : deux
   choix côte à côte (brun éclairci et liseré brun quand choisi). */
.ec-side__route {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 6px;
  margin: 0;
  color: var(--text);
}
.ec-side__route i {
  color: var(--text-soft);
  font-size: 0.8rem;
}
.ec-swatches {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(30px, 1fr));
  gap: 6px;
}
.ec-swatch {
  display: grid;
  place-items: center;
  aspect-ratio: 1;
  padding: 3px;
  border: 1px solid rgba(var(--sheen-rgb), 0.1);
  background: rgba(var(--shadow-rgb), 0.25);
  cursor: pointer;
}
.ec-swatch span {
  width: 100%;
  height: 100%;
}
.ec-swatch:first-child span {
  background-image: linear-gradient(135deg, transparent 46%, #12100d 46%, #12100d 54%, transparent 54%) !important;
}
.ec-swatch:hover {
  border-color: var(--gold);
}
.ec-swatch.is-on {
  border: 2px solid var(--cream);
  padding: 2px;
}
.ec-choice {
  display: grid;
  grid-template-columns: 1fr 1fr;
  border: 1px solid rgba(var(--sheen-rgb), 0.08);
}
.ec-choice button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 7px;
  padding: 8px;
  border: 0;
  background: none;
  color: var(--text);
  font: 500 0.9rem Roboto, sans-serif;
  cursor: pointer;
}
.ec-choice button + button {
  border-left: 1px solid rgba(var(--sheen-rgb), 0.08);
}
.ec-choice button:hover {
  background: rgba(var(--sheen-rgb), 0.035);
}
.ec-choice button.is-on {
  background: var(--picked-bg);
  box-shadow: inset 0 0 0 1px var(--picked-edge);
  color: var(--cream);
  font-weight: 700;
}
.ec-note-field {
  display: grid;
  gap: 6px;
}
.ec-note-field textarea {
  width: 100%;
  min-height: 96px;
  padding: 8px 10px;
  border: 1px solid var(--edge);
  background: rgba(var(--shadow-rgb), 0.25);
  color: var(--cream);
  font: 500 0.95rem Roboto, sans-serif;
  line-height: 1.4;
  resize: vertical;
}
.ec-note-field textarea:focus {
  border-color: var(--gold);
  outline: none;
}
/* Ce qu'il faut fabriquer : l'icône, le nom, le nombre ; ce qui ne se fabrique pas, plus pâle */
.ec-build {
  display: grid;
  margin: 0;
  padding: 0;
  list-style: none;
}
.ec-build li {
  display: grid;
  grid-template-columns: 28px minmax(0, 1fr) auto;
  align-items: center;
  gap: 8px;
  padding: 5px 0;
  border-bottom: 1px solid rgba(var(--sheen-rgb), 0.05);
}
.tools-panel .ec-build img {
  width: 28px;
  height: 28px;
  object-fit: contain;
}
.ec-build span {
  display: grid;
  min-width: 0;
  color: var(--text);
  font-size: 0.88rem;
}
.ec-build small {
  color: var(--text-soft);
  font-size: 0.8rem;
}
.ec-build b {
  color: var(--value-strong);
  font: 700 0.95rem "Roboto Condensed", sans-serif;
}
.ec-build li.is-found img {
  opacity: 0.55;
}
.ec-build__go {
  align-self: flex-start;
}
.ec-how {
  display: grid;
  gap: 8px;
  margin: 10px 0 0;
  padding-left: 18px;
  color: var(--text);
  font-size: 0.88rem;
  line-height: 1.45;
}

/* La bibliothèque : un panneau posé sur les colonnes de l'outil (un voile autour), les onglets en tête, la liste à
   gauche, le circuit choisi à droite en aperçu. Sur mobile, la liste puis l'aperçu. */
.ec-cols {
  position: relative;
}
.ec-lib {
  position: absolute;
  inset: 0;
  z-index: 30;
  display: grid;
  padding: 18px;
  background: rgba(10, 8, 6, 0.72);
}
.ec-lib[hidden] {
  display: none;
}
.ec-lib__panel {
  display: grid;
  grid-template-rows: auto minmax(0, 1fr);
  min-height: 0;
  border: 1px solid rgba(var(--sheen-rgb), 0.08);
  background: linear-gradient(180deg, #1c1813, #141110);
  box-shadow: 0 18px 50px rgba(var(--shadow-rgb), 0.55);
}
.ec-lib__head {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px 18px;
  padding: 10px 12px 0 16px;
  border-bottom: 1px solid rgba(var(--sheen-rgb), 0.07);
}
.ec-lib__head h3 {
  display: flex;
  align-items: center;
  gap: 9px;
  margin: 0;
  color: var(--cream);
  font: 700 1.05rem "Roboto Condensed", sans-serif;
  text-transform: uppercase;
  letter-spacing: 0.04em;
}
.ec-lib__head h3 i {
  color: var(--gold);
}
.ec-lib__tabs {
  display: flex;
  flex: 1 1 auto;
  gap: 2px;
}
.ec-lib__tabs button {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  padding: 9px 12px;
  border: 0;
  border-bottom: 2px solid transparent;
  background: none;
  color: var(--text-soft);
  font: 600 0.9rem "Roboto Condensed", sans-serif;
  cursor: pointer;
}
.ec-lib__tabs button:hover {
  color: var(--cream);
}
.ec-lib__tabs button.is-on {
  border-bottom-color: var(--gold);
  color: var(--cream);
}
.ec-lib__close {
  display: grid;
  place-items: center;
  width: 34px;
  height: 34px;
  margin-bottom: 6px;
  border: 0;
  background: none;
  color: var(--text-soft);
  cursor: pointer;
}
.ec-lib__close:hover {
  color: var(--cream);
  background: rgba(var(--sheen-rgb), 0.06);
}
.ec-lib__body {
  display: grid;
  grid-template-columns: minmax(240px, 340px) minmax(0, 1fr);
  min-height: 0;
}
.ec-lib__side {
  display: flex;
  flex-direction: column;
  gap: 10px;
  min-height: 0;
  padding: 14px;
  overflow-y: auto;
  border-right: 1px solid rgba(var(--sheen-rgb), 0.06);
  scrollbar-width: thin;
}
.ec-lib__list {
  display: grid;
  gap: 4px;
  margin: 0;
  padding: 0;
  list-style: none;
}
/* « Voir plus » sous les circuits proposés (par 30) */
.ec-lib__more {
  width: 100%;
  justify-content: center;
  margin-top: 12px;
}
.ec-lib__item {
  display: grid;
  gap: 3px;
  width: 100%;
  padding: 9px 11px;
  border: 1px solid rgba(var(--sheen-rgb), 0.05);
  background: rgba(var(--sheen-rgb), 0.025);
  color: var(--text);
  text-align: left;
  cursor: pointer;
}
.ec-lib__item:hover {
  background: rgba(var(--sheen-rgb), 0.05);
}
.ec-lib__item.is-on {
  border-color: var(--picked-edge);
  background: var(--picked-bg);
}
.ec-lib__item b {
  color: var(--cream);
  font: 600 0.95rem "Roboto Condensed", sans-serif;
}
.ec-lib__item small {
  color: var(--text-soft);
  font-size: 0.8rem;
}
.ec-lib__item.is-current b::after {
  content: " ●";
  color: var(--gold);
}
.ec-lib__view {
  display: flex;
  flex-direction: column;
  gap: 8px;
  min-height: 0;
  padding: 14px 18px;
  overflow-y: auto;
}
.ec-lib__preview {
  display: grid;
  place-items: center;
  flex: 1 1 0;
  min-height: 180px;
  border: 1px solid rgba(var(--sheen-rgb), 0.06);
  background:
    radial-gradient(circle at 50% 40%, rgba(var(--sheen-rgb), 0.025), transparent 70%),
    #110f0d;
}
.ec-lib__svg {
  width: 100%;
  height: 100%;
}
.ec-lib__view h4 {
  margin: 4px 0 0;
  color: var(--cream);
  font: 700 1.15rem "Roboto Condensed", sans-serif;
}
.ec-lib__meta {
  margin: 0;
  color: var(--text-soft);
  font-size: 0.85rem;
}
.ec-lib__desc {
  margin: 0;
  color: var(--text);
  font-size: 0.92rem;
  line-height: 1.45;
}
.ec-lib__actions {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 4px;
}
.ec-badge,
.ec-lib__views {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  color: var(--text-soft);
  font-size: 0.82rem;
}
.ec-badge.is-public {
  color: var(--state-ok);
}
@media (max-width: 760px) {
  /* Sur mobile, le panneau couvre les colonnes empilées ; on y descend en gardant l'en-tête du site visible */
  .ec-lib {
    align-content: start;
    padding: 0;
    scroll-margin-top: 200px;
  }
  .ec-lib__panel {
    grid-template-rows: auto auto;
  }
  .ec-lib__head h3 {
    display: none;
  }
  .ec-lib__close {
    margin-left: auto;
  }
  .ec-lib__preview {
    flex: 0 0 auto;
    height: 220px;
  }
  .ec-lib__body {
    grid-template-columns: minmax(0, 1fr);
    grid-template-rows: auto auto;
    overflow-y: auto;
  }
  .ec-lib__side {
    overflow: visible;
    border-right: 0;
    border-bottom: 1px solid rgba(var(--sheen-rgb), 0.06);
  }
  .ec-lib__view {
    overflow: visible;
  }
  .ec-lib__preview {
    min-height: 200px;
  }
  /* Sur mobile, seul l'onglet ouvert garde son nom */
  .ec-lib__tabs button:not(.is-on) span {
    display: none;
  }
}

/* Écran moyen : la fiche passe sous le plan ; petit écran : une colonne */
@media (max-width: 1180px) {
  .ec-cols {
    grid-template-columns: 230px minmax(0, 1fr);
    height: auto;
  }
  .ec-board {
    height: 70vh;
    min-height: 480px;
  }
  .ec-palette {
    max-height: 70vh;
  }
  .ec-side {
    grid-column: 1 / -1;
  }
}
@media (max-width: 760px) {
  .ec-bar {
    grid-template-columns: minmax(0, 1fr);
  }
  .ec-bar__actions {
    justify-content: flex-start;
  }
  .ec-cols {
    grid-template-columns: minmax(0, 1fr);
  }
  /* Sur mobile, les outils du plan en icônes (leur nom en infobulle), sans légende (elle chevauchait la vue d'ensemble) */
  .ec-tools {
    right: 10px;
    flex-wrap: wrap;
  }
  .ec-tools button > span {
    display: none;
  }
  .ec-tools button:not(.is-icon) {
    width: 34px;
    padding: 0;
    justify-content: center;
  }
  .ec .ec-legend,
  .ec .ec-keys {
    display: none;
  }
  /* Sur mobile, le plan d'abord (la palette dessous, plus courte) */
  .ec-board {
    order: -1;
  }
  .ec-palette {
    max-height: 300px;
  }
  .ec-board {
    height: 62vh;
    min-height: 380px;
  }
  .ec-env input {
    width: 80px;
  }
  /* La vue d'ensemble plus petite, en bas à droite */
  .ec-mini {
    width: 150px;
    height: 110px;
    padding: 4px;
  }
}

/* Le plein écran : l'outil couvre tout (au-dessus de l'en-tête et du bandeau), barre en haut, palette à gauche, plan au
   centre, fiche à droite ; Mes circuits défile dessous. Sur un écran étroit, les colonnes s'empilent comme d'habitude. */
html.ec-fullpage {
  overflow: hidden;
}
.ec.is-full {
  position: fixed;
  inset: 0;
  z-index: 3000;
  align-content: start;
  gap: 8px;
  padding: 8px;
  overflow-y: auto;
  background: #0f0d0b;
}
.ec.is-full .ec-bar {
  padding: 8px 12px;
}
.ec.is-full .ec-bar__sim {
  padding-top: 6px;
}
@media (max-width: 899px) {
  /* Écran étroit : les blocs l'un sous l'autre, l'outil défile */
  .ec.is-full {
    display: block;
  }
  .ec.is-full > * + * {
    margin-top: 8px;
  }
}
@media (min-width: 900px) {
  .ec.is-full {
    grid-template-rows: auto minmax(0, 1fr) auto;
    align-content: stretch;
  }
  .ec.is-full .ec-cols {
    height: auto;
    min-height: 0;
  }
  .ec.is-full .ec-board {
    height: auto;
    min-height: 0;
  }
  .ec.is-full .ec-palette {
    max-height: none;
  }
  .ec.is-full .ec-side {
    grid-column: auto;
  }
}

/* Le menu Affichage (outils du plan) : ce qu'on montre ou non */
.ec-tools__menu {
  position: relative;
}
.ec-display {
  position: absolute;
  z-index: 5;
  top: calc(100% + 6px);
  left: 0;
  display: grid;
  gap: 8px;
  min-width: 220px;
  padding: 12px 14px;
  border: 1px solid rgba(var(--gold-rgb), 0.35);
  background: rgba(20, 17, 14, 0.97);
  box-shadow: 0 10px 24px rgba(var(--shadow-rgb), 0.5);
}
.ec-display .ec-toggle {
  font-size: 0.88rem;
  white-space: nowrap;
}
.ec.no-labels .ec-wire__plate,
.ec.no-labels .ec-wire__label,
.ec.no-notes #ec-notes,
.ec.no-zones #ec-zones,
.ec.no-zones #ec-zone-handle,
.ec.no-legend .ec-legend,
.ec.no-keys .ec-keys,
.ec.no-mini .ec-mini,
.ec.no-grid .ec-grid,
.ec.no-anim .ec-cable__spark {
  display: none;
}
.ec.no-anim .ec-link {
  animation: none !important;
}
.ec-part.is-compact .ec-part__box {
  fill: #1d1914;
}

/* Les rubriques de la fiche : repliables par leur titre (le chevron tourne quand la rubrique est pliée) */
.ec-sec {
  display: grid;
  gap: 8px;
}
.ec-sec > summary {
  display: flex;
  align-items: center;
  gap: 8px;
  margin: 0;
  padding: 6px 0 2px;
  list-style: none;
  cursor: pointer;
  user-select: none;
}
.ec-sec > summary::-webkit-details-marker {
  display: none;
}
.ec-sec > summary i {
  width: 12px;
  color: var(--text-soft);
  font-size: 0.8rem;
  transition: transform 0.15s;
}
.ec-sec:not([open]) > summary i {
  transform: rotate(-90deg);
}
.ec-sec > summary:hover span {
  color: var(--cream);
}
.ec-sec__body {
  display: grid;
  gap: 10px;
}

/* La fiche en onglets (Objet, Diagnostic, Matériel) : l'onglet ouvert en brun éclairci, liseré brun */
.ec-tabs {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  border: 1px solid rgba(var(--sheen-rgb), 0.08);
}
.ec-tabs button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  min-width: 0;
  padding: 8px 4px;
  border: 0;
  background: none;
  color: var(--text-soft);
  font: 600 0.85rem "Roboto Condensed", sans-serif;
  cursor: pointer;
}
.ec-tabs button + button {
  border-left: 1px solid rgba(var(--sheen-rgb), 0.08);
}
.ec-tabs button:hover {
  color: var(--cream);
}
.ec-tabs button.is-on {
  background: var(--picked-bg);
  box-shadow: inset 0 -2px 0 var(--gold);
  color: var(--cream);
}
.ec-tabpanel {
  display: flex;
  flex-direction: column;
  gap: 10px;
}
/* Le diagnostic : le verdict, ce qui commande, le trajet jusqu'à la source, les problèmes du circuit */
.ec-verdict {
  margin: 0;
  padding: 8px 12px;
  border-left: 3px solid var(--text-soft);
  background: rgba(var(--sheen-rgb), 0.03);
  color: var(--text);
  font-size: 0.9rem;
  line-height: 1.45;
}
.ec-verdict.is-on,
.ec-verdict.is-source,
.ec-verdict.is-water {
  border-left-color: #7fc24a;
}
.ec-verdict.is-low {
  border-left-color: #e0b23a;
}
.ec-verdict.is-off,
.ec-verdict.is-dry,
.ec-verdict.is-short {
  border-left-color: #e0573c;
}
.ec-diag-list,
.ec-chain {
  display: grid;
  gap: 4px;
  margin: 0;
  padding: 0;
  list-style: none;
}
.ec-diag-pick {
  display: grid;
  grid-template-columns: 28px minmax(0, 1fr) auto;
  align-items: center;
  gap: 8px;
  width: 100%;
  padding: 5px 6px;
  border: 1px solid transparent;
  background: rgba(var(--sheen-rgb), 0.025);
  color: var(--text);
  font: 500 0.86rem Roboto, sans-serif;
  text-align: left;
  cursor: pointer;
}
.ec-diag-pick:hover {
  border-color: rgba(var(--gold-rgb), 0.4);
}
.tools-panel .ec-diag-pick img,
.tools-panel .ec-chain img {
  width: 28px;
  height: 28px;
  object-fit: contain;
}
.ec-diag-pick span {
  display: grid;
  min-width: 0;
}
.ec-diag-pick small {
  display: flex;
  align-items: center;
  gap: 6px;
  color: var(--text-soft);
  font-size: 0.8rem;
}
.ec-diag-pick b {
  color: var(--text-soft);
  font-size: 0.8rem;
}
.ec-chain li em {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 2px 0 2px 16px;
  color: var(--value-strong);
  font: 700 0.8rem "Roboto Condensed", sans-serif;
  font-style: normal;
}
.ec-chain li.is-here {
  display: grid;
  grid-template-columns: 28px minmax(0, 1fr);
  align-items: center;
  gap: 8px;
  padding: 5px 6px;
  border: 1px solid rgba(var(--gold-rgb), 0.5);
  color: var(--cream);
  font-weight: 700;
}

/* Fixer un adaptateur / un entonnoir sur un conteneur : le nombre d'emplacements libres à droite, discret */
.ec-attach {
  justify-content: flex-start;
}
.ec-attach small {
  margin-left: auto;
  color: var(--text-soft);
  font-size: 0.8rem;
}

/* Les panneaux de côté (palette, fiche) : un bandeau en tête (titre, échanger les côtés, réduire), la poignée sur le bord
   intérieur. Trois colonnes (`is-wide`, posé par le script) : largeurs réglées par --ec-left / --ec-right ; réduit, un
   panneau devient une bande de 44 px qu'un clic rouvre. */
.ec-dock {
  position: relative;
  display: flex;
  flex-direction: column;
  min-width: 0;
  min-height: 0;
}
.ec-dock > .ec-palette,
.ec-dock > .ec-side {
  flex: 1 1 auto;
}
.ec-cols.is-wide {
  grid-template-columns: var(--ec-left, 260px) minmax(0, 1fr) var(--ec-right, 300px);
}
.ec-cols.is-wide.is-swapped > [data-dock="side"] {
  order: -1;
}
.ec-cols.is-wide.is-swapped > [data-dock="pal"] {
  order: 1;
}
/* Écran large, hors plein écran : la palette se déroule en entier sous ses familles, sans défilement intérieur ; le plan
   et la fiche restent à l'écran, collés sous l'en-tête, pendant que la page défile (27 oct. 2026). */
.ec:not(.is-full) .ec-cols.is-wide {
  --ec-h: min(78vh, 860px);
  height: auto;
  min-height: var(--ec-h);
  align-items: start;
}
.ec:not(.is-full) .ec-cols.is-wide > .ec-board,
.ec:not(.is-full) .ec-cols.is-wide > [data-dock="side"] {
  position: sticky;
  top: calc(var(--head) + var(--banner, 0px) + 12px);
  height: var(--ec-h);
}
.ec:not(.is-full) .ec-cols.is-wide > [data-dock="pal"] {
  min-height: var(--ec-h);
}
.ec:not(.is-full) .ec-cols.is-wide .ec-palette {
  overflow: visible;
}
/* « Ctrl + molette pour zoomer » : dit dans le plan quand la molette fait défiler la page */
.ec-wheel-hint {
  position: absolute;
  top: 50%;
  left: 50%;
  z-index: 6;
  margin: 0;
  padding: 10px 16px;
  border: 1px solid rgba(var(--gold-rgb), 0.35);
  background: rgba(15, 13, 11, 0.92);
  color: var(--cream);
  font: 600 0.95rem "Roboto Condensed", sans-serif;
  pointer-events: none;
  transform: translate(-50%, -50%);
  animation: ec-wheel-hint 2.5s ease forwards;
}
@keyframes ec-wheel-hint {
  0%,
  80% {
    opacity: 1;
  }
  100% {
    opacity: 0;
  }
}
.ec-dock__bar {
  display: flex;
  align-items: center;
  gap: 2px;
  min-height: 34px;
  padding: 3px 4px 3px 12px;
  border: 1px solid rgba(var(--sheen-rgb), 0.06);
  border-bottom: 0;
  background: #17130f;
  color: var(--text-soft);
  font: 600 0.8rem "Roboto Condensed", sans-serif;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}
.ec-dock__title {
  display: flex;
  flex: 1 1 auto;
  align-items: center;
  gap: 8px;
  min-width: 0;
  overflow: hidden;
  white-space: nowrap;
}
.ec-dock__title i {
  color: var(--honey);
}
.ec-dock__bar button {
  display: grid;
  flex: 0 0 auto;
  place-items: center;
  width: 28px;
  height: 26px;
  padding: 0;
  border: 0;
  background: transparent;
  color: inherit;
  cursor: pointer;
}
.ec-dock__bar button:hover,
.ec-dock__bar button:focus-visible {
  background: rgba(var(--sheen-rgb), 0.06);
  color: var(--honey);
}
.ec-cols:not(.is-wide) [data-dock-swap] {
  display: none;
}
/* Réduit : le contenu et la poignée s'effacent ; en colonne, le bandeau devient une bande verticale */
.ec-dock.is-folded > .ec-palette,
.ec-dock.is-folded > .ec-side,
.ec-dock.is-folded > .ec-grip {
  display: none;
}
.ec-dock.is-folded .ec-dock__bar {
  border-bottom: 1px solid rgba(var(--sheen-rgb), 0.06);
  cursor: pointer;
}
.ec-dock.is-folded .ec-dock__bar:hover {
  background: #1d1813;
}
.ec-dock.is-folded[data-orient="col"] .ec-dock__bar {
  flex-direction: column;
  flex: 1 1 auto;
  gap: 10px;
  padding: 6px 0;
}
.ec-dock.is-folded[data-orient="col"] .ec-dock__title {
  flex: 0 0 auto;
  order: 1;
  overflow: visible;
  writing-mode: vertical-rl;
}
.ec-dock.is-folded [data-dock-swap] {
  display: none;
}
/* La poignée : dans l'espace entre le panneau et le plan, un trait miel au survol et pendant le glissé */
.ec-grip {
  position: absolute;
  top: 0;
  bottom: 0;
  z-index: 3;
  width: 12px;
  cursor: col-resize;
  touch-action: none;
}
.ec-dock[data-at="left"] > .ec-grip {
  right: -12px;
}
.ec-dock[data-at="right"] > .ec-grip {
  left: -12px;
}
.ec-grip::after {
  content: "";
  position: absolute;
  top: 0;
  bottom: 0;
  left: 5px;
  width: 2px;
  background: transparent;
  transition: background 0.15s;
}
.ec-grip:hover::after,
.ec-dock.is-sizing > .ec-grip::after {
  background: var(--honey);
}
.ec-cols:not(.is-wide) .ec-grip {
  display: none;
}
.ec-dock.is-sizing {
  user-select: none;
}
@media (max-width: 1180px) {
  .ec-cols.pal-folded:not(.is-wide) {
    grid-template-columns: 44px minmax(0, 1fr);
  }
  .ec-cols:not(.is-wide) > [data-dock="side"] {
    grid-column: 1 / -1;
  }
}
@media (max-width: 760px) {
  .ec-cols.pal-folded:not(.is-wide) {
    grid-template-columns: minmax(0, 1fr);
  }
}

/* Les onglets de la palette (Objets, Calques) dans son bandeau : l'ouvert en miel, souligné */
.ec-dock__tabs {
  gap: 2px;
  margin-left: -8px;
}
.ec .ec-dock__tabs button {
  display: inline-flex;
  width: auto;
  height: 28px;
  gap: 7px;
  padding: 0 9px;
  border-bottom: 2px solid transparent;
  font: inherit;
  letter-spacing: inherit;
  text-transform: inherit;
}
.ec .ec-dock__tabs button.is-on {
  border-bottom-color: var(--honey);
  color: var(--cream);
}
.ec-dock.is-folded .ec-dock__tabs button:not(.is-on) {
  display: none;
}
.ec-dock.is-folded[data-orient="col"] .ec-dock__tabs button {
  height: auto;
  padding: 6px 0;
  border-bottom: 0;
}

/* Les calques : une ligne par zone, objet ou texte ; le contenu d'une zone en retrait ; l'œil et le cadenas à droite */
.ec-layers__head {
  display: grid;
  gap: 8px;
}
.ec-layers {
  display: grid;
  gap: 2px;
  margin: 0;
  padding: 0;
  list-style: none;
}
.ec-layer {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto auto;
  align-items: center;
  padding-left: calc(var(--depth, 0) * 18px);
  border: 1px solid transparent;
  background: rgba(var(--sheen-rgb), 0.02);
}
.ec-layer.is-zone {
  grid-template-columns: 24px minmax(0, 1fr) auto auto;
  margin-top: 6px;
  background: rgba(var(--sheen-rgb), 0.04);
}
.ec-layer:hover {
  background: rgba(var(--sheen-rgb), 0.05);
}
.ec-layer.is-on {
  border-color: var(--picked-edge);
  background: var(--picked-bg);
}
.ec-layer__main {
  display: grid;
  grid-template-columns: 26px minmax(0, 1fr) auto;
  align-items: center;
  gap: 8px;
  min-width: 0;
  padding: 4px 6px;
  border: 0;
  background: transparent;
  color: var(--text);
  font-size: 0.88rem;
  text-align: left;
  cursor: pointer;
}
.ec-layer__main > span:nth-child(2) {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.ec-layer.is-zone .ec-layer__main {
  font-family: "Roboto Condensed", sans-serif;
  font-weight: 600;
  color: var(--cream);
}
.ec-layer__main small {
  color: var(--text-soft);
}
.ec-layer__img,
.ec-layer__glyph {
  display: grid;
  place-items: center;
  width: 26px;
  height: 26px;
}
.ec-layer__img img {
  max-width: 24px;
  max-height: 24px;
}
.ec-layer__glyph {
  color: var(--text-soft);
}
.ec-layer__swatch {
  justify-self: center;
  width: 12px;
  height: 12px;
  border: 2px solid var(--zone);
  background: color-mix(in srgb, var(--zone) 25%, transparent);
}
.ec-layer__dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: #6b6358;
}
.ec-layer__dot.is-on {
  background: var(--state-ok);
}
.ec-layer__dot.is-source {
  background: var(--honey);
}
.ec-layer__dot.is-short {
  background: var(--red-bright);
}
.ec-layer__dot.is-water {
  background: #5fa8d3;
}
.ec-layer__fold,
.ec-layer__btn {
  display: grid;
  place-items: center;
  width: 26px;
  height: 26px;
  padding: 0;
  border: 0;
  background: transparent;
  color: var(--text-soft);
  cursor: pointer;
}
.ec-layer__btn {
  opacity: 0.45;
}
.ec-layer:hover .ec-layer__btn,
.ec-layer__btn.is-on,
.ec-layer__btn:focus-visible {
  opacity: 1;
}
.ec-layer__btn.is-on {
  color: var(--honey);
}
.ec-layer__btn:hover,
.ec-layer__fold:hover {
  color: var(--cream);
}
.ec-layer__btn:disabled,
.ec-layer__fold:disabled {
  cursor: default;
  opacity: 0.25;
}
.ec-layer.is-hidden .ec-layer__main {
  opacity: 0.45;
}
.ec-layers__loose {
  margin-top: 10px;
  padding: 4px 6px;
  color: var(--text-soft);
  font: 600 0.8rem "Roboto Condensed", sans-serif;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

/* Sur le plan : l'objet du calque survolé, un liseré miel ; un objet verrouillé ne se saisit pas */
.ec-part.is-hover .ec-part__box,
.ec-note.is-hover .ec-note__box {
  stroke: var(--honey);
  stroke-width: 2;
}
.ec-zone.is-hover .ec-zone__box {
  stroke-width: 3;
}
.ec-part.is-locked,
.ec-part.is-locked .ec-part__head {
  cursor: default;
}