/* editeur2d.css - l'editeur pose par-dessus la planche.

   Tout est prefixe .ed- et enferme dans #axo-ed2d, sauf ce qui doit vivre dans
   la vue 3D (epingles, barre du plein ecran 3D, vignette). Trois vues :
     normal  la planche et la petite carte en haut a gauche de la scene
     2d      body.ed-vue-2d : le plan occupe toute la fenetre, la 3D en vignette
     3d      body.ed-vue-3d : la 3D occupe toute la fenetre, la carte en coin */

#axo-ed2d {
  position: fixed; top: 55px; left: 10px; z-index: 40;
  font: 12px/1.4 "Helvetica Neue", Helvetica, Arial, sans-serif;
  color: #2f2c28;
  -webkit-user-select: none; user-select: none;
}
#axo-ed2d button {
  font: inherit; font-size: 11px; line-height: 1;
  padding: 5px 8px; cursor: pointer;
  background: #fff; color: #2f2c28;
  border: 1px solid #cfc9bd; border-radius: 3px;
}
#axo-ed2d button:hover:not(:disabled) { border-color: #8d8474; background: #f7f5f0; }
#axo-ed2d button:disabled { opacity: .40; cursor: default; }
#axo-ed2d button.ed-actif { background: #2f2c28; color: #fbfaf7; border-color: #2f2c28; }
#axo-ed2d button.ed-danger { color: #a33a23; }
#axo-ed2d button.ed-danger:hover { border-color: #a33a23; background: #fbefec; }

/* --- replie : une pastille ---------------------------------------------------- */

#axo-ed2d .ed-pastille {
  display: flex; align-items: center; gap: 8px;
  padding: 7px 12px; cursor: pointer;
  background: #fbfaf7; border: 1px solid #cfc9bd; border-radius: 4px;
  box-shadow: 0 1px 4px rgba(0, 0, 0, .10);
  font-size: 12px; font-weight: 600; letter-spacing: .01em;
}
#axo-ed2d .ed-pastille:hover { background: #fff; border-color: #a89f8e; }
#axo-ed2d.ed-deplie .ed-pastille { display: none; }
#axo-ed2d .ed-panneau { display: none; }
#axo-ed2d.ed-deplie .ed-panneau { display: flex; }

.ed-point { display: inline-block; width: 8px; height: 8px; border-radius: 50%; background: #b9b3a8; }
.ed-point.ed-st-ok { background: #3d8b5a; }
.ed-point.ed-st-attente { background: #d49a2a; }
.ed-point.ed-st-erreur { background: #c0392b; }
.ed-point.ed-st-local { background: #b9b3a8; }

/* --- deplie : le panneau -------------------------------------------------------- */

#axo-ed2d .ed-panneau {
  flex-direction: column;
  width: 480px; height: 580px;
  min-width: 320px; min-height: 300px;
  max-width: 96vw; max-height: 92vh;
  background: #fbfaf7; border: 1px solid #cfc9bd; border-radius: 4px;
  box-shadow: 0 3px 14px rgba(0, 0, 0, .16);
  overflow: hidden; resize: both;
}
#axo-ed2d.ed-grand .ed-panneau { width: 78vw; height: 86vh; }

#axo-ed2d .ed-tete {
  display: flex; align-items: center; flex-wrap: wrap; gap: 6px 8px;
  padding: 6px 8px 6px 11px; border-bottom: 1px solid #e2ddd2; background: #f3f0e9;
}
#axo-ed2d .ed-titre { font-weight: 700; letter-spacing: .01em; }
#axo-ed2d .ed-sous { color: #6e6a63; font-size: 11px; }
#axo-ed2d .ed-espace { flex: 1; }
#axo-ed2d .ed-typos { display: none; gap: 2px; }
#axo-ed2d .ed-typos a {
  font-size: 11px; color: #6e6a63; text-decoration: none; padding: 2px 6px;
  border: 1px solid transparent; border-radius: 3px;
}
#axo-ed2d .ed-typos a:hover { border-color: #cfc9bd; color: #2f2c28; }
#axo-ed2d .ed-typos a.ed-typo-ici { border-color: #2f2c28; color: #2f2c28; font-weight: 700; }
#axo-ed2d .ed-statut { font-size: 10.5px; padding: 1px 6px; border-radius: 2px; white-space: nowrap; }
#axo-ed2d .ed-st-long { display: none; }
#axo-ed2d.ed-grand .ed-st-court, body.ed-vue-2d #axo-ed2d .ed-st-court { display: none; }
#axo-ed2d.ed-grand .ed-st-long, body.ed-vue-2d #axo-ed2d .ed-st-long { display: inline; }
#axo-ed2d .ed-statut.ed-st-ok { color: #2d6e45; background: #e4f0e6; }
#axo-ed2d .ed-statut.ed-st-attente { color: #8a5f10; background: #f7ecd5; }
#axo-ed2d .ed-statut.ed-st-erreur { color: #fff; background: #c0392b; }
#axo-ed2d .ed-statut.ed-st-local { color: #6e6a63; background: #ece8e0; }

#axo-ed2d .ed-barre {
  display: flex; flex-wrap: wrap; align-items: center; gap: 4px 5px;
  padding: 5px 8px; border-bottom: 1px solid #e2ddd2; background: #f8f6f1;
}
#axo-ed2d .ed-sep { width: 1px; height: 18px; background: #ddd7cc; margin: 0 2px; }
#axo-ed2d .ed-inter { display: flex; align-items: center; gap: 4px; font-size: 11px; cursor: pointer; }
#axo-ed2d .ed-epaisseur { font: inherit; font-size: 11px; padding: 2px; }
#axo-ed2d .ed-nombre { width: 58px; font: inherit; font-size: 11px; padding: 2px 4px; }
/* dans la petite carte, on garde l'essentiel */
#axo-ed2d:not(.ed-grand) .ed-large { display: none; }
body.ed-vue-2d #axo-ed2d .ed-large { display: initial; }
body.ed-vue-2d #axo-ed2d .ed-sep.ed-large { display: block; }

#axo-ed2d .ed-milieu { position: relative; flex: 1; min-height: 0; display: flex; }
#axo-ed2d .ed-plan { position: relative; flex: 1; min-width: 0; background: #fff; overflow: hidden; touch-action: none; }
#axo-ed2d .ed-plan:focus { outline: none; box-shadow: inset 0 0 0 2px #b8c8d6; }
#axo-ed2d .ed-plan svg { display: block; }
#axo-ed2d[data-outil="mur"] .ed-plan svg { cursor: crosshair; }
#axo-ed2d[data-outil="note"] .ed-plan svg { cursor: copy; }
#axo-ed2d .ed-liste { display: none; }
#axo-ed2d.ed-grand .ed-liste { display: block; width: 250px; }

#axo-ed2d .ed-bas { border-top: 1px solid #e2ddd2; background: #f3f0e9; }
#axo-ed2d .ed-info {
  display: flex; flex-wrap: wrap; gap: 4px 10px; align-items: center;
  padding: 6px 10px 5px; min-height: 30px; font-size: 11px;
}
#axo-ed2d .ed-info b { font-weight: 700; }
#axo-ed2d .ed-info .ed-gris { color: #6e6a63; }
#axo-ed2d .ed-info .ed-extrait { max-width: 360px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
#axo-ed2d .ed-tag {
  padding: 1px 5px; border-radius: 2px; font-size: 10px; letter-spacing: .02em;
  background: #e6ded2; color: #6b5f4b;
}
#axo-ed2d .ed-tag.ed-tag-pose { background: #cdd8e2; color: #33526c; }
#axo-ed2d .ed-tag.ed-tag-alerte { background: #f6dcd5; color: #a33a23; }
#axo-ed2d .ed-vide { color: #8b8578; font-style: italic; }
#axo-ed2d .ed-aide { padding: 0 10px 5px; font-size: 10px; color: #8b8578; }
#axo-ed2d:not(.ed-grand) .ed-aide { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
body.ed-vue-2d #axo-ed2d .ed-aide { white-space: normal; }
#axo-ed2d .ed-message { padding: 0 10px 6px; font-size: 10.5px; color: #6e6a63; min-height: 14px; }
#axo-ed2d .ed-message.ed-msg-alerte { color: #a8641e; }

/* --- liste des commentaires ----------------------------------------------------- */

#axo-ed2d .ed-liste { overflow: auto; border-left: 1px solid #e2ddd2; background: #fbfaf7; }
#axo-ed2d .ed-liste-tete { padding: 8px 10px 6px; font-weight: 700; font-size: 11.5px; border-bottom: 1px solid #ebe6dc; }
#axo-ed2d .ed-liste-vide { padding: 10px; color: #8b8578; font-style: italic; font-size: 11px; }
#axo-ed2d .ed-liste-item {
  display: grid; grid-template-columns: 22px 1fr auto; gap: 1px 7px; align-items: start;
  padding: 7px 10px; border-bottom: 1px solid #efebe3; cursor: pointer; font-size: 11px;
}
#axo-ed2d .ed-liste-item:hover { background: #f4f1ea; }
#axo-ed2d .ed-liste-item.ed-liste-sel { background: #fdecd8; }
#axo-ed2d .ed-liste-num {
  grid-row: 1 / 3; width: 20px; height: 20px; border-radius: 50%; background: #e8590c; color: #fff;
  font-weight: 700; font-size: 10.5px; display: flex; align-items: center; justify-content: center;
}
#axo-ed2d .ed-liste-item.ed-traite .ed-liste-num { background: #9aa39a; }
#axo-ed2d .ed-liste-item.ed-traite .ed-liste-corps { color: #8b8578; text-decoration: line-through; }
#axo-ed2d .ed-liste-corps { word-break: break-word; }
#axo-ed2d .ed-liste-meta { grid-column: 2 / 4; color: #8b8578; font-size: 10px; }

/* --- plein ecran 2D --------------------------------------------------------------- */

body.ed-vue-2d #axo-ed2d { top: 0; left: 0; right: 0; bottom: 0; z-index: 50; }
body.ed-vue-2d #axo-ed2d .ed-panneau {
  display: grid; width: 100vw; height: 100vh; max-width: none; max-height: none;
  resize: none; border: 0; border-radius: 0; box-shadow: none;
  grid-template-columns: minmax(0, 1fr) 300px;
  grid-template-rows: auto auto minmax(0, 1fr) auto;
}
body.ed-vue-2d #axo-ed2d .ed-tete { grid-column: 1 / 3; }
body.ed-vue-2d #axo-ed2d .ed-barre { grid-column: 1 / 3; }
body.ed-vue-2d #axo-ed2d .ed-milieu { display: contents; }
body.ed-vue-2d #axo-ed2d .ed-plan { grid-column: 1; grid-row: 3; }
body.ed-vue-2d #axo-ed2d .ed-liste { display: block; grid-column: 2; grid-row: 3 / 5; padding-bottom: 272px; }
body.ed-vue-2d #axo-ed2d .ed-bas { grid-column: 1; grid-row: 4; }
body.ed-vue-2d #axo-ed2d .ed-typos { display: flex; }

/* la 3D en vignette, en bas a droite, sous la liste des commentaires */
body.ed-vue-2d .scene {
  position: fixed; right: 12px; bottom: 12px; width: 276px; height: 250px; z-index: 60;
  border: 1px solid #cfc9bd; border-radius: 3px; box-shadow: 0 2px 10px rgba(0, 0, 0, .18);
  background: #f4f2ee; overflow: hidden;
}
body.ed-vue-2d .scene .bt-mode,
body.ed-vue-2d .scene #etiquettes,
body.ed-vue-2d .scene #reglet,
body.ed-vue-2d .scene .nav-aide,
body.ed-vue-2d .scene .ed-barre3d { display: none; }
.ed-vignette-voile { display: none; }
body.ed-vue-2d .ed-vignette-voile { display: block; position: absolute; inset: 0; z-index: 6; cursor: zoom-in; }
body.ed-vue-2d .ed-vignette-voile::after {
  content: "3D · clic ou Tab"; position: absolute; left: 6px; top: 5px; font-size: 10px;
  color: #6e6a63; background: rgba(244, 242, 238, .9); padding: 1px 5px; border-radius: 2px;
}

/* --- plein ecran 3D ----------------------------------------------------------------- */

body.ed-vue-3d .planche > header,
body.ed-vue-3d .corps > aside { display: none; }
body.ed-vue-3d #axo-ed2d { top: 10px; }
.ed-barre3d { display: none; }
body.ed-vue-3d .ed-barre3d {
  display: flex; gap: 6px; position: absolute; left: 50%; bottom: 14px; transform: translateX(-50%);
  z-index: 4; padding: 5px; background: rgba(244, 242, 238, .92); border: 1px solid #d7d2c8; border-radius: 4px;
  font: 12px/1.4 "Helvetica Neue", Helvetica, Arial, sans-serif;
}
.ed-barre3d button {
  font: inherit; font-size: 11px; padding: 5px 9px; cursor: pointer; background: #fff; color: #2f2c28;
  border: 1px solid #cfc9bd; border-radius: 3px;
}
.ed-barre3d button.ed-actif { background: #2f2c28; color: #fbfaf7; border-color: #2f2c28; }
body[data-ed-outil="note"].ed-actif #vue canvas { cursor: copy; }

/* --- plan : fond --------------------------------------------------------------------- */

#axo-ed2d svg * { vector-effect: non-scaling-stroke; }
#axo-ed2d .ed-piece { fill: #f2efe8; stroke: #e0dacd; stroke-width: 1; }
#axo-ed2d .ed-piece-mod { fill: #eef1e4; }
#axo-ed2d .ed-piece-nom { fill: #6f695d; text-anchor: middle; pointer-events: none; font-weight: 600; }
#axo-ed2d .ed-piece-m2 { fill: #8b8578; text-anchor: middle; }
#axo-ed2d .ed-piece-m2.ed-alerte { fill: #c2410c; font-weight: 700; }

#axo-ed2d .ed-mur { fill: #6f6a61; stroke: none; }
#axo-ed2d .ed-mur-mod { fill: #5d6b78; }
#axo-ed2d .ed-mur-ajoute { fill: #3f6f8f; }
#axo-ed2d .ed-mur-comble { fill: #a39b8e; }
#axo-ed2d .ed-mur-sel { fill: #c05a0c; }
#axo-ed2d .ed-mur-prise { stroke: transparent; fill: none; pointer-events: stroke; cursor: move; stroke-linecap: butt; vector-effect: none; }

#axo-ed2d .ed-ouv-fond { fill: #fff; stroke: none; }
#axo-ed2d .ed-ouv-verre { stroke: #4f8db3; stroke-width: 1.3; }
#axo-ed2d .ed-ouv-vantail { stroke: #8a6d45; stroke-width: 1.4; }
#axo-ed2d .ed-ouv-arc { fill: none; stroke: #b39b77; stroke-width: .8; stroke-dasharray: 3 2; }
#axo-ed2d .ed-ouv-trait { stroke: #b08d63; stroke-width: 2.2; }
#axo-ed2d .ed-prise { fill: transparent; stroke: none; cursor: pointer; }
#axo-ed2d .ed-ouv:hover .ed-ouv-fond { fill: #f3efe6; }
#axo-ed2d .ed-ouv-sel .ed-ouv-fond { fill: #ffe0bd; }
#axo-ed2d .ed-ouv-sel .ed-prise { stroke: #c05a0c; stroke-width: 1.4; stroke-dasharray: 4 2; }

#axo-ed2d .ed-fantome { fill: rgba(192, 80, 58, .07); stroke: #c0503a; stroke-width: 1; stroke-dasharray: 4 3; cursor: pointer; }
#axo-ed2d .ed-fantome-sel { stroke-width: 2.2; fill: rgba(192, 80, 58, .16); }

/* --- plan : meubles ------------------------------------------------------------------ */

#axo-ed2d .ed-mob rect.ed-corps { fill: #cdd8e2; stroke: #4c6a83; stroke-width: 1.1; cursor: move; }
#axo-ed2d .ed-mob .ed-avant { stroke: #4c6a83; stroke-width: 1.6; fill: none; pointer-events: none; }
#axo-ed2d .ed-mob.ed-releve rect.ed-corps { fill: #e6ded2; stroke: #8d7f6a; }
#axo-ed2d .ed-mob.ed-releve .ed-avant { stroke: #8d7f6a; }
#axo-ed2d .ed-mob.ed-fige rect.ed-corps { cursor: pointer; stroke-dasharray: 3 2; }
#axo-ed2d .ed-mob.ed-sel rect.ed-corps { fill: #ffd9a8; stroke: #b3600f; stroke-width: 1.8; }
#axo-ed2d .ed-mob.ed-sel .ed-avant { stroke: #b3600f; }
#axo-ed2d .ed-mob:hover rect.ed-corps { stroke-width: 1.8; }
#axo-ed2d .ed-mob.ed-mob-supprime rect.ed-corps { fill: rgba(192, 80, 58, .06); stroke: #c0503a; stroke-dasharray: 3 2; cursor: pointer; }
#axo-ed2d .ed-mob.ed-mob-supprime .ed-avant { stroke: #c0503a; opacity: .5; }

#axo-ed2d .ed-poignee { fill: #fff; stroke: #b3600f; stroke-width: 1.6; cursor: grab; }
#axo-ed2d .ed-poignee-ouv { cursor: ew-resize; }
#axo-ed2d .ed-poignee-tige { stroke: #b3600f; stroke-width: 1.2; pointer-events: none; }

/* --- cotes, aimant, trace --------------------------------------------------------------- */

#axo-ed2d .ed-c-cotes { pointer-events: none; }
#axo-ed2d .ed-cote { stroke: #7f8c98; stroke-width: .8; }
#axo-ed2d .ed-cote.ed-cote-piece { stroke: #aab3bb; }
#axo-ed2d .ed-cote.ed-cote-objet, #axo-ed2d .ed-cote.ed-cote-ouv { stroke: #b3600f; }
#axo-ed2d .ed-cote.ed-cote-mur { stroke: #3f6f8f; }
#axo-ed2d .ed-cote-txt { fill: #56636f; text-anchor: middle; paint-order: stroke; stroke: #fff; stroke-width: 3px; stroke-linejoin: round; }
#axo-ed2d .ed-cote-txt.ed-cote-objet, #axo-ed2d .ed-cote-txt.ed-cote-ouv { fill: #9a4f0b; font-weight: 700; }
#axo-ed2d .ed-cote-txt.ed-cote-mur { fill: #2f5a76; font-weight: 700; }
#axo-ed2d .ed-cote-dist { stroke: #b3600f; stroke-width: 1; stroke-dasharray: 3 2; }
#axo-ed2d .ed-cote-dist.ed-cote-libre { stroke: #2f7d5b; }
#axo-ed2d .ed-cote-dist-txt { fill: #9a4f0b; text-anchor: middle; font-weight: 700; paint-order: stroke; stroke: #fff; stroke-width: 3px; }

#axo-ed2d .ed-c-aimant { pointer-events: none; }
#axo-ed2d .ed-aimant-trait { stroke: #e8590c; stroke-width: 4; stroke-linecap: round; opacity: .85; }
#axo-ed2d .ed-aimant-point { fill: #e8590c; stroke: #fff; stroke-width: 1; }
#axo-ed2d .ed-trace { fill: rgba(63, 111, 143, .45); stroke: #3f6f8f; stroke-width: 1; stroke-dasharray: 4 2; pointer-events: none; }
#axo-ed2d .ed-trace-txt { fill: #2f5a76; font-weight: 700; }

/* --- commentaires --------------------------------------------------------------------------- */

#axo-ed2d .ed-epingle { cursor: pointer; }
#axo-ed2d .ed-epingle circle { fill: #e8590c; stroke: #fff; stroke-width: 1.5; }
#axo-ed2d .ed-epingle.ed-traite circle { fill: #9aa39a; }
#axo-ed2d .ed-epingle.ed-epingle-sel circle { stroke: #2f2c28; stroke-width: 2.2; }
#axo-ed2d .ed-epingle text { fill: #fff; font-weight: 700; text-anchor: middle; pointer-events: none; }

.ed-epingles3d { position: absolute; inset: 0; pointer-events: none; z-index: 3; display: none; }
body.ed-actif .ed-epingles3d { display: block; }
.ed-epingle3d {
  position: absolute; transform: translate(-50%, -100%); pointer-events: auto; cursor: pointer;
  min-width: 20px; height: 20px; padding: 0 5px; border-radius: 10px 10px 10px 2px;
  background: #e8590c; color: #fff; border: 1.5px solid #fff; box-shadow: 0 1px 4px rgba(0, 0, 0, .35);
  font: 700 11px/17px "Helvetica Neue", Helvetica, Arial, sans-serif; text-align: center;
}
.ed-epingle3d.ed-traite { background: #9aa39a; }
.ed-epingle3d.ed-epingle-sel { border-color: #2f2c28; }
.ed-epingle3d.ed-flash { animation: ed-flash .9s ease 2; }
@keyframes ed-flash { 50% { transform: translate(-50%, -100%) scale(1.6); } }

.ed-bulle {
  position: fixed; z-index: 100; width: 300px; padding: 9px 10px 8px;
  background: #fbfaf7; border: 1px solid #b9b1a2; border-radius: 4px; box-shadow: 0 4px 18px rgba(0, 0, 0, .22);
  font: 12px/1.4 "Helvetica Neue", Helvetica, Arial, sans-serif; color: #2f2c28;
}
.ed-bulle-titre { font-weight: 700; margin-bottom: 6px; }
.ed-bulle textarea {
  box-sizing: border-box; width: 100%; height: 86px; resize: vertical; padding: 6px;
  font: 12px/1.4 "Helvetica Neue", Helvetica, Arial, sans-serif; border: 1px solid #cfc9bd; border-radius: 3px;
}
.ed-bulle-bas { display: flex; flex-wrap: wrap; gap: 5px; margin-top: 6px; }
.ed-bulle button {
  font: inherit; font-size: 11px; padding: 5px 8px; cursor: pointer; background: #fff; color: #2f2c28;
  border: 1px solid #cfc9bd; border-radius: 3px;
}
.ed-bulle button.ed-principal { background: #2f2c28; color: #fbfaf7; border-color: #2f2c28; }
.ed-bulle button.ed-danger { color: #a33a23; }
.ed-bulle-aide { margin-top: 5px; font-size: 10px; color: #8b8578; }