/* Editeur 3D — habillage volontairement sobre : l'outil sert a voir la
   geometrie, pas a se regarder. */

:root {
  --fond: #1b1e22;
  --panneau: #23272c;
  --bord: #34393f;
  --texte: #d8dde3;
  --doux: #8b939c;
  --accent: #3d8bfd;
  --erreur: #ff6b6b;
  --alerte: #ffc555;
  --info: #59c2d6;
  --ok: #4ec97a;
}

* { box-sizing: border-box; }

html, body {
  margin: 0;
  height: 100%;
  overflow: hidden;
  background: var(--fond);
  color: var(--texte);
  font: 13px/1.45 "Segoe UI", system-ui, sans-serif;
}

/* ---------------------------------------------------------- barre */

.barre {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 7px 10px;
  background: var(--panneau);
  border-bottom: 1px solid var(--bord);
  height: 44px;
}

.barre strong { margin-right: 6px; letter-spacing: .3px; }
.barre label { display: flex; align-items: center; gap: 4px; color: var(--doux); }
.sep { width: 1px; height: 22px; background: var(--bord); margin: 0 4px; }
.grandir { flex: 1; }

.etat { color: var(--doux); font-size: 12px; min-width: 60px; text-align: right; }
.etat.modifie { color: var(--alerte); }
.etat.ok { color: var(--ok); }
.etat.erreur { color: var(--erreur); }

button, select, input[type="search"], input[type="text"], input[type="number"] {
  background: #2c3137;
  color: var(--texte);
  border: 1px solid var(--bord);
  border-radius: 4px;
  padding: 4px 8px;
  font: inherit;
}

button { cursor: pointer; }
button:hover { background: #363c43; }
button.primaire { background: var(--accent); border-color: var(--accent); color: #fff; }
button.primaire:hover { filter: brightness(1.12); }

/* --------------------------------------------------------- pages */

main {
  display: flex;
  height: calc(100% - 44px);
}

.panneau {
  width: 260px;
  background: var(--panneau);
  display: flex;
  flex-direction: column;
  overflow: hidden;
}
.panneau.gauche { border-right: 1px solid var(--bord); }
.panneau.droite { width: 320px; border-left: 1px solid var(--bord); }

.entete {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 8px 10px;
  border-bottom: 1px solid var(--bord);
  font-weight: 600;
  font-size: 12px;
  text-transform: uppercase;
  letter-spacing: .5px;
  color: var(--doux);
  flex: none;
}
.entete input[type="search"] { flex: 1; min-width: 0; padding: 2px 6px; }
.entete.diag { border-top: 1px solid var(--bord); }
.entete button { padding: 2px 8px; font-size: 11px; text-transform: none; }

.vue { flex: 1; position: relative; min-width: 0; }
canvas { display: block; width: 100%; height: 100%; }

.aide {
  position: absolute;
  left: 12px;
  bottom: 12px;
  padding: 6px 10px;
  background: rgba(0, 0, 0, .55);
  border-radius: 5px;
  color: #c8ced5;
  font-size: 11.5px;
  pointer-events: none;
}
.cachee { display: none; }

.hud {
  position: absolute;
  right: 12px;
  top: 12px;
  padding: 6px 10px;
  background: rgba(0, 0, 0, .55);
  border-radius: 5px;
  font: 11.5px/1.5 ui-monospace, Consolas, monospace;
  color: #c8ced5;
  pointer-events: none;
  white-space: pre;
}

/* -------------------------------------------------------- listes */

.liste, .constats {
  list-style: none;
  margin: 0;
  padding: 0;
  overflow-y: auto;
  flex: 1;
}

.liste li {
  padding: 4px 10px;
  cursor: pointer;
  display: flex;
  align-items: center;
  gap: 6px;
  border-left: 2px solid transparent;
}
.liste li:hover { background: #2b3037; }
.liste li.actif { background: #2f3944; border-left-color: var(--accent); }
.liste li .type { color: var(--doux); font-size: 11px; margin-left: auto; }
.liste li .lien { color: var(--accent); font-size: 11px; }
.liste li.marqueur .nom { color: #ffd60a; }

/* --------------------------------------------------- inspecteur */

.inspecteur {
  padding: 10px;
  overflow-y: auto;
  max-height: 46%;
  border-bottom: 1px solid var(--bord);
}
.inspecteur .vide { color: var(--doux); margin: 4px 0; }
.inspecteur h3 { margin: 0 0 8px; font-size: 13px; word-break: break-all; }

.champ { display: flex; align-items: center; gap: 6px; margin-bottom: 5px; }
.champ label { width: 52px; color: var(--doux); font-size: 11.5px; flex: none; }
.champ input { width: 100%; min-width: 0; padding: 2px 5px; font: 12px ui-monospace, Consolas, monospace; }
.triplet { display: flex; gap: 4px; flex: 1; min-width: 0; }

.note {
  color: var(--doux);
  font-size: 11.5px;
  margin: 8px 0 4px;
  padding-top: 8px;
  border-top: 1px solid var(--bord);
}
.contrainte {
  font: 11.5px ui-monospace, Consolas, monospace;
  color: #9fd0ff;
  padding: 2px 0;
  word-break: break-all;
}
.contrainte.etirement { color: #ffcf7a; }

/* -------------------------------------------------- diagnostic */

.resume { padding: 6px 10px; font-size: 12px; border-bottom: 1px solid var(--bord); flex: none; }
.resume .n { font-weight: 600; }
.resume .e { color: var(--erreur); }
.resume .a { color: var(--alerte); }
.resume .i { color: var(--info); }
.resume .parfait { color: var(--ok); }

.constats li {
  padding: 6px 10px;
  border-bottom: 1px solid #2a2f35;
  cursor: pointer;
  font-size: 12px;
}
.constats li:hover { background: #2b3037; }
.constats li .code {
  display: inline-block;
  font: 10.5px ui-monospace, Consolas, monospace;
  padding: 1px 5px;
  border-radius: 3px;
  margin-bottom: 3px;
}
.constats li.error .code { background: #4a2224; color: var(--erreur); }
.constats li.warn .code { background: #4a3c1c; color: var(--alerte); }
.constats li.info .code { background: #23414a; color: var(--info); }
.constats li .msg { color: #c3cad2; display: block; }
.constats li .fix { color: var(--ok); font-size: 11px; display: block; margin-top: 3px; }

/* ------------------------------------------------------------------ */
/* Mesure : le releve se lit ET se copie                               */
/* ------------------------------------------------------------------ */

/*
 * Le panneau est en bas a GAUCHE, pas a droite : l'inspecteur et le diagnostic
 * occupent deja la droite, et on mesure en regardant le sol, pas les panneaux.
 */
.mesure {
  position: absolute;
  left: 12px;
  bottom: 12px;
  min-width: 300px;
  max-width: 420px;
  background: rgba(11, 13, 16, 0.92);
  border: 1px solid #2a2f35;
  border-radius: 6px;
  font: 12px/1.5 ui-monospace, SFMono-Regular, Menlo, monospace;
  color: #cfd6e0;
  z-index: 4;
}
.mesure.cachee { display: none; }
.mesure .entete {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 5px 8px;
  border-bottom: 1px solid #2a2f35;
  font-weight: 600;
}
.mesure .entete span { flex: 1; }
.mesure .entete button { font-size: 11px; padding: 2px 7px; }
.mesure #mesureCorps { padding: 7px 9px; white-space: pre-wrap; }
.mesure .cle { color: #7f8a99; }
.mesure .val { color: #ffd479; }
.mesure .json { color: #7ee787; user-select: all; }
.mesure .astuce { color: #7f8a99; }

/* L'oeil de la liste : masquage de VUE, jamais du fichier. */
.liste .oeil {
  background: none;
  border: 0;
  color: #4c5561;
  cursor: pointer;
  padding: 0 4px;
  font-size: 12px;
  line-height: 1;
}
.liste .oeil:hover { color: #cfd6e0; }
.liste li.masque { opacity: 0.45; }
.liste li.masque .oeil { color: #ff9f0a; }

/* Des commandes regroupées et une vue qui conserve sa place sur petit écran. */
:root { --fond:#13191f; --panneau:#1b242d; --bord:#303d49; --texte:#edf2f6; --doux:#a1b1bf; --accent:#397df2; }
body { display:flex; flex-direction:column; }
.barre { height:auto; min-height:60px; flex:none; padding:10px 16px; gap:8px; flex-wrap:wrap; }
.marque { color:var(--texte); text-decoration:none; font-size:19px; font-weight:700; letter-spacing:-.6px; margin-right:16px; }
.marque span { color:#83b8ff; }
#fichier { max-width:260px; min-width:150px; }
button, select, input[type="search"], input[type="text"], input[type="number"] { border-radius:7px; padding:7px 10px; }
button { transition:background .12s; }
button:disabled { opacity:.4; cursor:default; }
button:focus-visible, input:focus-visible, select:focus-visible, summary:focus-visible, canvas:focus-visible { outline:2px solid #83b8ff; outline-offset:2px; }
button.actif, .outil:has(input:checked) { background:#243d60; border-color:#639cef; color:#c4ddff; }
.outils { display:flex; align-items:center; gap:10px; flex-wrap:wrap; padding:8px 16px; border-bottom:1px solid var(--bord); background:#17212b; flex:none; }
.outils label { display:flex; gap:7px; align-items:center; font-size:12px; color:var(--doux); }
.outil { border:1px solid var(--bord); border-radius:7px; padding:7px 10px; cursor:pointer; }
kbd { font:10px inherit; opacity:.7; }
.optionsVue { position:relative; }
.optionsVue summary { cursor:pointer; padding:7px 10px; }
.optionsVue > div { position:absolute; right:0; top:38px; z-index:20; width:265px; display:grid; gap:14px; background:var(--panneau); border:1px solid var(--bord); border-radius:10px; padding:16px; box-shadow:0 12px 35px #0008; }
main { height:auto; flex:1; min-height:0; }
.panneau.gauche { width:240px; flex:none; }
.panneau.droite { width:305px; flex:none; }
.entete { padding:12px; font-size:11px; }
.ajout { display:flex; gap:8px; padding:12px; }
.ajout select { min-width:0; flex:1; }
.actionsListe { display:flex; align-items:center; justify-content:space-between; padding:0 12px 10px; color:var(--doux); font-size:11px; }
.actionsListe button { font-size:11px; padding:4px 6px; }
.liste li { min-height:38px; padding:6px 10px; }
.liste .nom { overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.liste li .type { font-size:10px; }
.liste .oeil { min-width:25px; min-height:27px; font-size:17px; color:#92a6b8; }
.listeVide { display:block !important; color:var(--doux); padding:18px !important; }
.vues { position:absolute; top:12px; left:12px; display:flex; gap:5px; flex-wrap:wrap; right:12px; pointer-events:none; }
.vues button { pointer-events:auto; background:#1b242deb; font-size:11px; box-shadow:0 2px 6px #0003; }
canvas { touch-action:none; }
.aide { max-width:calc(100% - 24px); line-height:1.8; color:#aabcca; background:#111b24e8; border:1px solid #ffffff10; }
.aide b { color:#e2edf5; font-weight:500; }
.inspecteur { max-height:62%; padding:14px; flex-shrink:0; }
.inspecteur h3 { font-size:15px; margin-bottom:12px; }
.champ { margin-bottom:10px; }
.champ label { width:60px; }
.champ input { padding:6px; }
.triplet label { width:auto; flex:1; min-width:0; display:flex; flex-direction:column; gap:4px; font-size:10px; }
.triplet label:nth-child(1) { color:#ff9b99; }.triplet label:nth-child(2) { color:#8ae0b4; }.triplet label:nth-child(3) { color:#8eb9ff; }
.champ select { min-width:0; flex:1; }
.actionsObjet { display:flex; gap:6px; flex-wrap:wrap; margin:12px 0; }
.actionsObjet button { font-size:11px; }
.note { line-height:1.7; }
.filtreDiag { font-size:11px; color:var(--doux); padding:8px 12px; }
.constats li { padding:12px; line-height:1.6; }
.constats button { margin-top:8px; font-size:11px; }
.mesure { min-width:0; width:390px; max-width:calc(100% - 24px); max-height:calc(100% - 75px); overflow:auto; }
.epaisseur { display:flex; gap:8px; align-items:center; padding:8px; font-size:11px; }
.epaisseur input { width:70px; }
#mesureCreer { margin:0 8px 10px; }
.brouillon { padding:9px 16px; background:#40351e; color:#ffdfa2; font-size:12px; }
.brouillon button { margin-left:8px; padding:4px 8px; }
body.enJeu .outils, body.enJeu .panneau, body.enJeu .vues, body.enJeu #brouillon { display:none; }
body.enJeu #jouer { background:#c95538; border-color:#c95538; }
.etat { max-width:280px; font-size:11px; }
@media (max-width:1100px) { .panneau.gauche { width:195px; }.panneau.droite { width:260px; }.barre { padding:8px; }.marque { margin-right:4px; }.aide { font-size:10px; } }
@media (max-width:800px) { .panneau.gauche { width:165px; }.panneau.droite { width:230px; }.barre .sep { display:none; }#fichier { max-width:190px; }.barre .etat { flex:1; }.outils { gap:6px; padding:6px; }.ajout { flex-wrap:wrap; }.aide { display:none; } }
@media (max-width:600px) { main { flex-wrap:wrap; }.panneau.gauche { width:35%; height:60%; }.vue { flex:none; width:65%; height:60%; }.panneau.droite { width:100%; height:40%; }.inspecteur { max-height:none; flex:1; }.panneau.droite .constats { min-height:60px; }.barre { gap:5px; }.barre button { font-size:11px; }body.enJeu .vue { width:100%; height:100%; } }
dialog { color:var(--texte); background:var(--panneau); border:1px solid var(--bord); border-radius:14px; padding:24px; width:420px; max-width:calc(100% - 32px); box-shadow:0 24px 100px #0009; }
dialog::backdrop { background:#07111bc9; }
dialog h2 { font-size:21px; margin:0 0 8px; }
dialog p { color:var(--doux); margin:0 0 20px; }
dialog label { display:flex; flex-direction:column; gap:7px; margin-bottom:14px; font-size:12px; }
.dimensionsNiveau { display:flex; gap:14px; }.dimensionsNiveau label { width:50%; }.dimensionsNiveau input { width:100%; }
dialog .actionsObjet { justify-content:flex-end; margin-bottom:0; }
@media (max-width:600px) { .barre .marque { width:100%; font-size:16px; }#etat { max-width:100%; } }