/* Unifil · Studio · feuille de style (v0.8 : la refonte de l'ergonomie).
   Reprend le thème commun (assets/css/theme.css). Un écran par étape : la barre du haut les
   nomme, et chaque écran ne montre que ce qui sert à son étape. Écran Schéma : la bibliothèque à
   gauche, la feuille (papier blanc dans les deux thèmes : un schéma RGIE est noir sur blanc), et
   les réglages à droite seulement quand quelque chose est choisi. */

@import url('../../../assets/css/theme.css?v=8');

:root {
  --accent-txt: var(--primary);
  --danger-txt: #e74c3c;
  --audit-warn: #d59a3c;
  --sel: #2f6fd6;          /* le cadre de sélection sur le papier blanc (écran seulement) */
  --pt: #f08a24;           /* les points d'ajout : orange, la seule couleur vive de la feuille */
}
[data-theme="light"] {
  --accent-txt: #2a6e4e;   /* le vert de la charte est illisible sur fond clair */
  --danger-txt: #b83227;
  --audit-warn: #8a5c11;
}

html, body { height: 100%; font-size: 14px; overflow: hidden; }

/* ───── Boutons (même rendu que les autres outils) ───── */
.btn:active { transform: scale(.96); }
.btn.active { background: var(--primary-glow); color: var(--accent-txt); }
.btn.danger:hover { background: rgba(231,76,60,.15); color: var(--danger-txt); }
.btn:disabled { opacity: .35; pointer-events: none; }
.btn svg { width: 16px; height: 16px; flex-shrink: 0; }
.btn-icon { width: 32px; height: 32px; padding: 0; font-size: 16px; }

/* ───── Grille générale : la barre, puis bibliothèque | feuille | réglages ───── */
#app {
  display: grid;
  grid-template-rows: 52px 1fr;
  grid-template-columns: 272px minmax(0, 1fr) auto;
  grid-template-areas: "toolbar toolbar toolbar" "left canvas right";
  width: 100%;
  height: 100%;
  overflow: hidden;
  user-select: none;
}
@media (max-width: 1100px) {
  #app { grid-template-columns: 232px minmax(0, 1fr) auto; }
  .ecran-tab { padding: 0 10px; font-size: 13px; }
  .app-version-badge { display: none; }
  #right-sidebar { width: 272px; }
}

/* ───── La barre du haut : les écrans ───── */
#toolbar {
  grid-area: toolbar;
  background: var(--bg-sidebar);
  border-bottom: 1px solid var(--border);
  display: flex;
  align-items: center;
  padding: 0 14px;
  gap: 6px;
  z-index: 100;
}
.logo { font-weight: 700; font-size: 16px; color: var(--accent-txt); margin-right: 4px; letter-spacing: -.3px; white-space: nowrap; }
.logo a { color: inherit; text-decoration: none; }
.app-version-badge { font-size: 10px; color: var(--text-dim); opacity: .7; padding: 2px 8px; border: 1px solid var(--border); border-radius: 10px; margin-right: 14px; }
.ecrans { display: flex; align-items: stretch; gap: 2px; height: 100%; }
/* Pas de transition sur une couleur de thème : elle gèlerait au changement de thème. */
.ecran-tab {
  border: 0; background: transparent; cursor: pointer;
  font-family: var(--font); font-size: 14px; font-weight: 600; color: var(--text-dim);
  padding: 0 16px; border-bottom: 3px solid transparent; border-top: 3px solid transparent;
  display: inline-flex; align-items: center; gap: 6px; white-space: nowrap;
}
.ecran-tab:hover { color: var(--text-light); background: var(--bg-panel); }
.ecran-tab.active { color: var(--accent-txt); border-bottom-color: var(--primary); }
.tab-badge { font-size: 11px; font-weight: 700; background: var(--audit-warn); color: #fff; padding: 1px 7px; border-radius: 10px; }
.tab-badge[hidden] { display: none; }
.sep { width: 1px; height: 22px; background: var(--border); margin: 0 6px; flex-shrink: 0; }
.toolbar-spacer { flex: 1; }

/* Menus déroulants (l'historique) */
.toolbar-dropdown { position: relative; flex-shrink: 0; }
.toolbar-dropdown > .btn { white-space: nowrap; }
.toolbar-dropdown.open > .btn { background: var(--primary-glow); color: var(--accent-txt); }
.toolbar-dropdown-menu {
  display: none;
  position: absolute;
  top: calc(100% + 4px);
  right: 0;
  min-width: 300px;
  max-height: 60vh;
  overflow-y: auto;
  background: var(--bg-sidebar);
  border: 1px solid var(--border-light);
  border-radius: var(--radius);
  box-shadow: 0 8px 30px rgba(0,0,0,.45);
  z-index: 9000;
  padding: 4px 0;
}
.toolbar-dropdown.open > .toolbar-dropdown-menu { display: block; }
.history-item { display: flex; align-items: center; gap: 8px; padding: 6px 12px; font-size: 12px; color: var(--text-dim); cursor: pointer; }
.history-item:hover { background: var(--bg-panel); }
.history-item.current { background: var(--primary-glow); color: var(--accent-txt); }
.history-item .h-idx { font-size: 10px; min-width: 24px; text-align: right; opacity: .7; }
.history-item .h-desc { flex: 1; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

/* ───── Quel écran montre quoi ─────
   Schéma et Plan : les trois colonnes. Les autres : une page pleine largeur. */
#pages { grid-row: 2; grid-column: 1 / -1; display: none; overflow-y: auto; background: var(--bg-canvas); user-select: text; }
.page { display: none; }
body.ecran-document #pages, body.ecran-controle #pages, body.ecran-materiel #pages, body.ecran-imprimer #pages { display: block; }
body.ecran-document #ecran-document, body.ecran-controle #ecran-controle, body.ecran-materiel #ecran-materiel, body.ecran-imprimer #ecran-imprimer { display: block; }
body.ecran-document #left-sidebar, body.ecran-controle #left-sidebar, body.ecran-materiel #left-sidebar, body.ecran-imprimer #left-sidebar,
body.ecran-document #canvas-area, body.ecran-controle #canvas-area, body.ecran-materiel #canvas-area, body.ecran-imprimer #canvas-area { display: none; }

/* ───── À gauche : la bibliothèque (écran Schéma) ───── */
#left-sidebar { grid-area: left; background: var(--bg-sidebar); border-right: 1px solid var(--border); display: flex; flex-direction: column; overflow: hidden; }
#bib-side { display: flex; flex-direction: column; flex: 1; min-height: 0; }
.side-tabs { display: flex; flex-shrink: 0; border-bottom: 1px solid var(--border); }
.side-tab { flex: 1; border: 0; background: transparent; cursor: pointer; font-family: var(--font); font-size: 13px; font-weight: 600; color: var(--text-dim); padding: 11px 6px; border-bottom: 2px solid transparent; }
.side-tab:hover { color: var(--text-light); }
.side-tab.active { color: var(--accent-txt); border-bottom-color: var(--primary); }
.side-tab .count, .side-titre .count { font-weight: 400; font-size: 11px; opacity: .8; }
.side-titre { padding: 12px 14px 8px; font-size: 13px; font-weight: 600; color: var(--text-light); flex-shrink: 0; }
#bib-zone { flex: 1; min-height: 0; overflow-y: auto; padding-bottom: 12px; }
.bib-conseil { padding: 12px 14px 4px; font-size: 12px; line-height: 1.5; color: var(--text-dim); }
.bib-conseil b { color: var(--pt); }
.bib-titre { padding: 14px 14px 6px; font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: .6px; color: var(--text-dim); }
.bib-grille { display: grid; grid-template-columns: repeat(3, 1fr); gap: 6px; padding: 0 10px; }
.bib-item {
  border: 1px solid var(--border); background: var(--bg-dark); border-radius: 8px; cursor: pointer;
  display: flex; flex-direction: column; align-items: center; gap: 4px; padding: 9px 3px 7px;
  color: var(--text-light); font-family: var(--font); font-size: 11px; line-height: 1.25; text-align: center; min-width: 0;
}
.bib-item:hover { border-color: var(--pt); }
.bib-item.active { border-color: var(--pt); background: rgba(240,138,36,.16); box-shadow: 0 0 0 1px var(--pt) inset; }
.bib-item.indispo { opacity: .38; }
.bib-item.bib-large { grid-column: 1 / -1; flex-direction: row; justify-content: flex-start; gap: 12px; padding: 9px 12px; font-size: 13px; text-align: left; }
.bib-ico { height: 30px; display: flex; align-items: center; justify-content: center; }
.bib-ico svg { height: 28px; width: auto; overflow: visible; }
.bib-ico .u-s { fill: none; stroke: currentColor; stroke-width: 1.5; stroke-linecap: round; stroke-linejoin: round; }
.bib-ico .u-f { fill: currentColor; stroke: none; }
.bib-ico .u-t { fill: currentColor; font-family: var(--font); font-weight: 700; }
.bib-label { max-width: 100%; overflow: hidden; text-overflow: ellipsis; }

/* Symboles ou Liste : l'un ou l'autre, jamais les deux */
#tree-list { display: none; }
body.cote-liste #tree-list { display: block; }
body.cote-liste #bib, body.cote-liste .bib-conseil, body.cote-liste #palette { display: none !important; }

/* ───── La liste (ce que le schéma contient) ───── */
.tree-item { display: flex; align-items: center; gap: 8px; padding: 6px 10px 6px 12px; cursor: pointer; font-size: 12px; }
.tree-item:hover { background: var(--bg-panel); }
.tree-item.selected { background: var(--primary-glow); }
.tree-item.tree-root { font-weight: 700; }
.tree-item .t-ico { width: 18px; height: 18px; flex-shrink: 0; display: flex; align-items: center; justify-content: center; color: var(--text-dim); font-size: 11px; }
.tree-item .t-ico svg { width: 16px; height: 16px; overflow: visible; }
.tree-item .t-ico .u-s { fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.tree-item .t-ico .u-f { fill: currentColor; stroke: none; }
.tree-item .t-ico .u-t { fill: currentColor; font-family: var(--font); font-weight: 700; }
.tree-item.selected .t-ico { color: var(--accent-txt); }
.tree-item .t-name { flex: 1; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: var(--text-light); }
.tree-item .t-detail { font-size: 10px; color: var(--text-dim); flex-shrink: 0; max-width: 44%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
/* La pastille de l'élément qui commence une page à l'impression. */
.tree-item .t-page { font-size: 10px; flex-shrink: 0; padding: 0 6px; border-radius: 8px; border: 1px solid var(--border); color: var(--text-dim); white-space: nowrap; }
.tree-item.selected .t-page { border-color: var(--accent-txt); color: var(--accent-txt); }
.tree-head { padding: 12px 12px 4px; font-size: 10px; font-weight: 700; text-transform: uppercase; letter-spacing: .6px; color: var(--text-dim); }
.tree-help { padding: 10px 14px; border-top: 1px solid var(--border); font-size: 11px; color: var(--text-dim); line-height: 1.5; flex-shrink: 0; }
.tree-help kbd { background: var(--bg-dark); border: 1px solid var(--border); padding: 0 5px; border-radius: 3px; font-family: var(--font); color: var(--text-light); }

/* ───── La feuille et ses outils ───── */
#canvas-area { grid-area: canvas; background: var(--bg-canvas); overflow: hidden; position: relative; }
#outils {
  position: absolute; left: 0; right: 0; top: 0; height: 48px;
  background: var(--bg-sidebar); border-bottom: 1px solid var(--border);
  display: flex; align-items: center; gap: 4px; padding: 0 12px; white-space: nowrap; overflow: hidden;
}
.outils-groupe { display: flex; align-items: center; gap: 4px; }
#outils-plan { display: none; }
body.ecran-plan #outils-plan { display: flex; }
body.ecran-plan #outils-schema { display: none; }
.btn.outil { height: 34px; padding: 0 12px; font-size: 13px; border: 1px solid var(--border); color: var(--text-light); }
.btn.outil:disabled { color: var(--text-dim); }
.outil-coche { display: inline-flex; align-items: center; gap: 7px; height: 34px; padding: 0 10px; font-size: 13px; color: var(--text-light); cursor: pointer; }
.outil-coche input { width: 16px; height: 16px; accent-color: var(--primary); }
.zoom-wrap { display: flex; align-items: center; gap: 4px; }
#zoom-label { font-size: 12px; color: var(--text-dim); min-width: 46px; text-align: center; }
#btn-ranger { display: none; }
body.mode-dessin #btn-ranger { display: inline-flex; }

#canvas-scroll { position: absolute; inset: 48px 0 30px 0; overflow: auto; cursor: default; }
#canvas-scroll.panning { cursor: grab; }
#canvas-scroll.panning:active { cursor: grabbing; }
/* La feuille est ancrée en haut à gauche : elle grandit vers la droite et vers le bas quand on
   ajoute, sans que ce qui est déjà dessiné change de place sous la souris. */
#workspace { position: relative; min-width: 100%; min-height: 100%; display: flex; align-items: flex-start; justify-content: flex-start; padding: 28px; box-sizing: border-box; }
/* Le papier reste BLANC dans les deux thèmes : le moteur dessine noir sur blanc, l'export aussi. */
#paper { position: relative; background: #fff; box-shadow: 0 2px 14px rgba(0,0,0,.28); border-radius: 2px; flex-shrink: 0; line-height: 1; }
#paper svg { display: block; overflow: visible; }
#paper text { pointer-events: none; }
#paper .u-hit { cursor: pointer; }
#paper .u-hit:hover { fill: rgba(47,111,214,.10); }
#paper .u-hit-cadre:hover { stroke: rgba(47,111,214,.35); }
#paper .u-selbox { fill: rgba(47,111,214,.07); stroke: var(--sel); stroke-width: 1.5; stroke-dasharray: 5 3; pointer-events: none; }

/* Les points d'ajout : où le symbole choisi peut se poser (écran seulement, jamais exportés). */
#paper .u-pt { cursor: pointer; }
#paper .u-pt-fil { fill: none; stroke: var(--pt); opacity: .7; pointer-events: none; }
#paper .u-pt-zone { fill: transparent; }
#paper .u-pt-rond { fill: #fff; stroke: var(--pt); }
#paper .u-pt-plus { fill: none; stroke: var(--pt); stroke-linecap: round; pointer-events: none; }
#paper .u-pt:hover .u-pt-rond { fill: var(--pt); }
#paper .u-pt:hover .u-pt-plus { stroke: #fff; }

#statusbar {
  position: absolute; left: 0; right: 0; bottom: 0; height: 30px;
  background: var(--bg-sidebar); border-top: 1px solid var(--border);
  display: flex; align-items: center; gap: 18px; padding: 0 14px;
  font-size: 12px; color: var(--text-dim); white-space: nowrap; overflow: hidden;
}
#status-sel { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; color: var(--text-light); }

/* ───── À droite : les réglages de ce qui est choisi ─────
   Écran Schéma : le panneau n'existe que quand quelque chose est choisi. Écran Plan : toujours
   (rien de choisi, il règle le plan montré). */
#right-sidebar { grid-area: right; width: 304px; background: var(--bg-sidebar); border-left: 1px solid var(--border); display: none; flex-direction: column; overflow: hidden; }
body.ecran-schema.a-sel #right-sidebar, body.ecran-plan #right-sidebar { display: flex; }
.right-head { display: flex; align-items: center; justify-content: space-between; height: 48px; padding: 0 8px 0 16px; border-bottom: 1px solid var(--border); font-size: 13px; font-weight: 600; color: var(--text-light); flex-shrink: 0; }
body:not(.a-sel) #btn-fermer-props { visibility: hidden; }
#props-panel { flex: 1; min-height: 0; display: flex; flex-direction: column; }
#props-scroll { flex: 1; overflow-y: auto; min-height: 0; padding-bottom: 16px; }

.prop-group { padding: 12px 16px 4px; }
.prop-group-title { font-size: 15px; font-weight: 700; color: var(--text-light); margin-bottom: 8px; display: flex; align-items: center; gap: 6px; }
.prop-group + .prop-group .prop-group-title { font-size: 11px; text-transform: uppercase; letter-spacing: .6px; color: var(--text-dim); }
.prop-id { display: none; }
.prop-row { display: flex; align-items: center; gap: 10px; margin-bottom: 9px; }
.prop-row-top { align-items: flex-start; }
.prop-row label { font-size: 12px; color: var(--text-dim); min-width: 92px; flex: 0 0 92px; padding-top: 7px; line-height: 1.3; }
.prop-ctrl { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 4px; }
.prop-ctrl input, .prop-ctrl select {
  width: 100%; min-width: 0; height: 32px; box-sizing: border-box;
  background: var(--bg-dark); border: 1px solid var(--border); color: var(--text-light);
  font-family: var(--font); font-size: 13px; padding: 4px 8px; border-radius: 6px;
}
.prop-ctrl input:focus, .prop-ctrl select:focus { border-color: var(--primary); outline: none; }
.prop-ctrl input[type="number"] { width: 96px; }
.prop-ctrl input[type="checkbox"] { width: 18px; height: 18px; margin: 7px 0 0; accent-color: var(--primary); }
.prop-hint { font-size: 12px; color: var(--text-dim); line-height: 1.5; }
.prop-hint.hint-warn { color: var(--audit-warn); }
/* Dans le panneau de droite, l'explication d'un champ ne se montre que pendant qu'on le règle :
   elle est toujours là quand on en a besoin, jamais toutes à la fois. */
#right-sidebar .prop-ctrl > .prop-hint { display: none; }
#right-sidebar .prop-row:focus-within .prop-ctrl > .prop-hint { display: block; }
/* L'explication du type : repliée, un clic la déplie. */
.prop-aide { margin: -2px 0 6px; }
.prop-aide summary { cursor: pointer; font-size: 12px; color: var(--text-dim); list-style: none; }
.prop-aide summary::-webkit-details-marker { display: none; }
.prop-aide summary::before { content: '? '; font-weight: 700; color: var(--accent-txt); }
.prop-aide summary:hover { color: var(--text-light); }
.prop-aide .prop-hint { margin-top: 6px; }
.prop-row-inline { display: flex; gap: 6px; margin-top: 4px; }
.modal-body .prop-row input { user-select: all; }

.empty-state { padding: 16px; text-align: center; color: var(--text-dim); font-size: 12px; line-height: 1.6; }

/* ───── Les écrans pleine largeur (Document, Contrôle, Matériel, Imprimer) ───── */
.page-col { max-width: 760px; margin: 0 auto; padding: 28px 24px 60px; }
.page-col.page-large { max-width: 1000px; }
.page h2 { font-size: 22px; font-weight: 700; color: var(--text-light); margin: 0 0 18px; }
.page h3 { font-size: 15px; font-weight: 700; color: var(--text-light); margin: 28px 0 12px; }
.page-note { font-size: 13px; color: var(--text-dim); line-height: 1.6; margin: 12px 0 18px; }
.lien { border: 0; background: none; padding: 0; cursor: pointer; font-family: var(--font); font-size: inherit; color: var(--accent-txt); text-decoration: underline; }
.actions { display: flex; flex-wrap: wrap; gap: 10px; }
.btn.action { height: 46px; padding: 0 18px; font-size: 14px; font-weight: 600; gap: 9px; background: var(--bg-sidebar); border: 1px solid var(--border); color: var(--text-light); border-radius: 8px; }
.btn.action:hover { border-color: var(--primary); background: var(--bg-sidebar); }
.btn.action.primary { background: var(--primary); border-color: var(--primary); color: #fff; }
.btn.action.primary:hover { background: var(--primary-dim); }
.action-ico { font-size: 17px; }
.carte { background: var(--bg-sidebar); border: 1px solid var(--border); border-radius: 10px; padding: 20px 22px 14px; }
.carte .prop-group { padding: 0; margin-top: 16px; }
.carte .prop-group-title { font-size: 11px; text-transform: uppercase; letter-spacing: .6px; color: var(--text-dim); border-top: 1px solid var(--border); padding-top: 16px; margin-bottom: 12px; }
.carte .prop-row label { min-width: 130px; flex: 0 0 130px; font-size: 13px; }
.carte .prop-row { margin-bottom: 12px; }
.carte .actions { margin: 16px 0 6px; }
.carte-liste { padding: 0; overflow: hidden; }
.exemples { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 10px; }
.exemple { text-align: left; border: 1px solid var(--border); background: var(--bg-sidebar); border-radius: 8px; padding: 12px 14px; cursor: pointer; font-family: var(--font); color: var(--text-light); display: flex; flex-direction: column; gap: 4px; }
.exemple:hover { border-color: var(--primary); }
.exemple b { font-size: 13px; }
.exemple span { font-size: 12px; color: var(--text-dim); line-height: 1.45; }
#materiel-vue { display: block; margin-top: 18px; border: 1px solid var(--border); border-radius: 10px; background: #fff; color: #111; font-family: 'Segoe UI', Arial, sans-serif; overflow: hidden; }
.print-pages { margin: 12px 0; padding: 10px 12px; border: 1px solid var(--border); border-radius: 6px; background: var(--bg-dark); font-size: 12px; line-height: 1.6; color: var(--text-dim); }
.print-pages b { color: var(--text-light); }
.print-pages ul { margin: 4px 0 0; padding-left: 18px; }

/* ───── Contrôle RGIE ─────
   Aucune transition ici : une couleur de thème gèle si et seulement si on la nomme dans une
   transition. Trois gravités, trois couleurs, et le liseré de gauche les redit sans compter
   sur la seule couleur. */
.ctrl-mention { padding: 12px 16px; font-size: 13px; line-height: 1.55; color: var(--text-dim); background: var(--bg-sidebar); border: 1px solid var(--border); border-radius: 10px; margin-bottom: 14px; }
.ctrl-head { display: flex; align-items: center; gap: 8px; padding: 14px 18px 6px; font-size: 12px; font-weight: 700; text-transform: uppercase; letter-spacing: .4px; }
.ctrl-head .ctrl-n { font-size: 11px; font-weight: 600; border: 1px solid currentColor; border-radius: 9px; padding: 0 7px; opacity: .8; }
.ctrl-head.ctrl-erreur { color: var(--danger-txt); }
.ctrl-head.ctrl-avertissement { color: var(--audit-warn); }
.ctrl-head.ctrl-note { color: var(--text-dim); }
.ctrl-item { padding: 10px 18px 11px; border-top: 1px solid var(--border); border-left: 4px solid transparent; font-size: 13px; line-height: 1.55; }
.ctrl-item.ctrl-erreur { border-left-color: var(--danger-txt); }
.ctrl-item.ctrl-avertissement { border-left-color: var(--audit-warn); }
.ctrl-item.ctrl-note { border-left-color: var(--text-dim); }
.ctrl-item.ctrl-clic { cursor: pointer; }
.ctrl-item.ctrl-clic:hover { background: var(--bg-panel); }
.ctrl-item.selected { background: var(--primary-glow); }
.ctrl-titre { font-weight: 600; color: var(--text-light); }
.ctrl-msg { color: var(--text-dim); margin-top: 2px; }
.ctrl-art { color: var(--text-dim); opacity: .8; font-size: 12px; margin-top: 4px; }
.ctrl-dero { color: var(--text-dim); opacity: .8; font-size: 12px; font-style: italic; margin-top: 2px; }
.ctrl-vide { padding: 22px 18px; color: var(--text-dim); font-size: 13px; line-height: 1.6; }

/* ───── Toast, fenêtres ───── */
.toast { position: fixed; bottom: 44px; left: 50%; transform: translateX(-50%) translateY(50px); background: var(--bg-panel); color: var(--text-light); padding: 9px 18px; border-radius: 8px; font-size: 13px; border: 1px solid var(--border); box-shadow: var(--shadow); z-index: 99999; opacity: 0; transition: opacity .3s, transform .3s; pointer-events: none; max-width: 70vw; text-align: center; }
.toast.show { opacity: 1; transform: translateX(-50%) translateY(0); }

.modal-overlay { position: fixed; inset: 0; background: rgba(0,0,0,.7); z-index: 9999; display: flex; align-items: center; justify-content: center; opacity: 0; pointer-events: none; transition: opacity .2s; }
.modal-overlay.active { opacity: 1; pointer-events: all; }
.modal { background: var(--bg-sidebar); border: 1px solid var(--border); border-radius: 10px; max-width: 92vw; max-height: 90vh; overflow: hidden; box-shadow: 0 8px 40px rgba(0,0,0,.5); display: flex; flex-direction: column; width: 620px; }
.modal-header { padding: 14px 18px; display: flex; align-items: center; justify-content: space-between; border-bottom: 1px solid var(--border); background: var(--bg-panel); }
.modal-header h2 { font-size: 15px; font-weight: 700; }
.modal-body { padding: 18px; overflow-y: auto; font-size: 13px; color: var(--text-dim); line-height: 1.7; user-select: text; }
.modal-body h3 { color: var(--text-light); font-size: 14px; margin: 14px 0 6px; }
.modal-body h3:first-child { margin-top: 0; }
.modal-body b { color: var(--text-light); }
.modal-body kbd { background: var(--bg-dark); border: 1px solid var(--border); padding: 1px 5px; border-radius: 3px; font-size: 12px; font-family: var(--font); color: var(--text-light); }
.modal-body table { width: 100%; border-collapse: collapse; margin: 4px 0 8px; }
.modal-body td { padding: 4px 8px 4px 0; border-bottom: 1px solid var(--border); font-size: 12px; vertical-align: top; }
.modal-body td:first-child { white-space: nowrap; width: 170px; }
.modal-body ul { padding-left: 18px; }
.modal-body li { margin: 3px 0; }
.modal-body .prop-ctrl input { height: 34px; }

/* ───── Le dessin libre (mode Dessin) ─────
   La palette n'apparaît que quand « Dessin libre » est coché : un texte, un fil, un symbole hors circuit. */
#palette { display: none; border-top: 1px solid var(--border); margin-top: 14px; }
body.mode-dessin #palette { display: block; }
.pal-head { padding: 14px 14px 6px; font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: .6px; color: var(--text-dim); }
.pal-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(70px, 1fr)); gap: 4px; padding: 0 10px; }
.pal-item { display: flex; flex-direction: column; align-items: center; gap: 3px; padding: 6px 2px; border-radius: 6px; cursor: grab; color: var(--text-dim); font-size: 10px; text-align: center; user-select: none; touch-action: none; }
.pal-item:hover { background: var(--primary-glow); color: var(--text-light); }
.pal-item.pal-outil { cursor: pointer; }
.pal-item.active { background: var(--primary-glow); color: var(--accent-txt); outline: 1px solid var(--primary); }
.pal-ico { width: 26px; height: 26px; display: flex; align-items: center; justify-content: center; }
.pal-ico svg, #drag-ghost svg { width: 22px; height: 22px; overflow: visible; }
.pal-ico .u-s, #drag-ghost .u-s { fill: none; stroke: currentColor; stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; }
.pal-ico .u-f, #drag-ghost .u-f { fill: currentColor; stroke: none; }
.pal-ico .u-t, #drag-ghost .u-t { fill: currentColor; font-family: var(--font); font-weight: 700; }
.pal-label { max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

/* Le fantôme qui suit la souris pendant un glisser depuis la palette */
#drag-ghost { position: fixed; z-index: 99998; pointer-events: none; width: 34px; height: 34px; padding: 5px; box-sizing: border-box; background: var(--bg-sidebar); border: 1px solid var(--border-light); border-radius: 6px; box-shadow: var(--shadow); color: var(--text-light); }
#drag-ghost.sur-circuit { border-color: var(--primary); background: var(--primary-glow); }

/* Sur la feuille : le curseur dit ce qu'un glisser fera, la cible d'un dépôt se souligne, le fil en cours s'aperçoit */
body.mode-dessin #paper .u-hit { cursor: move; }
body.outil-fil #canvas-scroll, body.outil-fil #paper .u-hit { cursor: crosshair; }
#paper .u-hit-fil { fill: none; pointer-events: stroke; stroke: transparent; stroke-width: 10; }
#paper .u-hit-fil:hover { stroke: rgba(47,111,214,.25); }
#paper .u-hit.u-drop { fill: rgba(47,111,214,.22); }
#paper .u-fil-apercu { fill: none; stroke: var(--sel); stroke-width: 1.5; stroke-dasharray: 4 3; pointer-events: none; }
#paper .u-fil-point { fill: var(--sel); pointer-events: none; }

/* ───── L'écran Plan ─────
   Le côté gauche montre les plans et ce qui reste « À poser » à la place de la bibliothèque. Aucune transition. */
#plan-side { display: none; flex-direction: column; flex: 1; min-height: 0; overflow: hidden; }
body.mode-plan #plan-side { display: flex; }
body.mode-plan #bib-side { display: none; }
#plan-list { flex-shrink: 0; max-height: 30%; overflow-y: auto; }
#plan-palette { flex: 1; min-height: 0; overflow-y: auto; border-top: 1px solid var(--border); padding-bottom: 8px; }
.plan-groupe { padding: 10px 14px 3px; font-size: 12px; font-weight: 700; color: var(--text-light); }
.plan-liste { display: flex; flex-direction: column; gap: 2px; padding: 0 8px; }
.plan-liste .pal-item { flex-direction: row; justify-content: flex-start; gap: 8px; text-align: left; font-size: 12px; padding: 4px 6px; }
.plan-liste .pal-label { flex: 1; min-width: 0; }
.plan-reste { font-size: 10px; border: 1px solid var(--border); border-radius: 8px; padding: 0 6px; flex-shrink: 0; }
.plan-vide { padding: 12px 14px; font-size: 12px; color: var(--text-dim); line-height: 1.5; }
body.mode-plan #paper .u-hit { cursor: move; }
body.outil-plan #canvas-scroll, body.outil-plan #paper .u-hit { cursor: crosshair; }
#paper .u-zone { opacity: .45; }
#paper .u-cote { fill: var(--sel); font-size: 11px; font-weight: 600; pointer-events: none; }

/* « Réduire les animations » : réglage système, ou case du panneau d'accessibilité. */
@media (prefers-reduced-motion: reduce) {
  .toast, .modal-overlay { transition: none; }
  .btn:active { transform: none; }
}
html.no-animations .toast, html.no-animations .modal-overlay { transition: none; }