/* ---------- Couleurs ----------
   Deux familles, comme dans le Studio d'étiquettes.

   1. LE CHÂSSIS (en-tête, panneaux, champs, boutons, listes) suit le thème
      du site : ces jetons ne font que pointer vers ceux de theme.css, qui
      basculent quand theme.js met data-theme="light" sur <html>. Le reste
      de cette feuille continue d'écrire var(--panel), var(--line)... sans
      rien savoir du thème.

   2. LE PLAN (la pièce, ses meubles, ses cotes) ne bascule PAS. Il reste sur
      fond blanc dans les deux thèmes, exactement comme le papier du Studio
      (--bg-label) : c'est un document technique, il doit rester lisible à
      l'écran comme à l'impression. Ses jetons sont préfixés --plan-. */
:root{
  /* 1. châssis : alias vers la charte (valeurs du thème SOMBRE, défaut du site) */
  --bg:var(--bg-canvas);         /* fond autour du plan */
  --panel:var(--bg-sidebar);     /* en-tête, panneaux latéraux, barre d'outils */
  --line:var(--border);
  --line2:var(--bg-panel);       /* pastilles de comptage */
  --ink:var(--text-light);
  --ink2:var(--text-dim);
  --accent:var(--primary);
  --accent-soft:var(--primary-glow);
  --field:var(--bg-dark);        /* fond des champs de saisie */
  --hover:var(--bg-panel);       /* survol des boutons et des lignes */
  --dot:rgba(255,255,255,.07);   /* pointillé derrière le plan */
  --ok:#4ade80;                  /* message de confirmation */
  --cote:#a3b1c0;                /* cotes autour du plan : --text-dim ne donne
                                    que 4,18:1 sur ce fond, celui-ci 5,59:1 */
  --on-accent:#0f1923;           /* encre posée SUR le vert : fixe, jamais claire */
  /* --shadow vient de theme.css et bascule tout seul */
  /* Le rouge de theme.css (#e74c3c) ne donne que 3,81:1 sur la barre, dans les
     DEUX themes. Meme procede que --accent-txt : une teinte par theme, choisie
     pour rester du meme rouge. Ici la version claircie, pour le fond sombre. */
  --danger-txt:#ff8a80;            /* 6,37:1 sur le fond sombre */

  /* 2. plan : fixe dans les deux thèmes */
  --plan-paper:#fff;
  --plan-wall:#35414f;
  --plan-ink:#1d2733;
  --plan-ink2:#5b6879;
  --plan-accent:#2f6feb;
  --plan-accent-soft:rgba(47,111,235,.12);
  --plan-danger:#d64545;
}
[data-theme="light"]{
  --dot:rgba(0,0,0,.07);
  --ok:#1e7a52;
  --cote:var(--ink2);            /* en clair, --text-dim donne déjà 5,82:1 */
  /* Le vert de la charte (#70BD95) est illisible en TEXTE sur fond clair
     (1,99:1). On reprend la teinte déjà retenue par l'accueil des outils
     et par a11y.css : #2a6e4e, soit 5,44:1. Utilisée via
     var(--accent-txt, var(--accent)) : en thème sombre le vert reprend. */
  --accent-txt:#2a6e4e;
  --danger-txt:#c0392b;            /* 5,44:1 sur le fond clair (le clair de theme.css donnait 3,82:1) */
}
*{box-sizing:border-box}
html,body{height:100%}
body{
  margin:0;font:14px/1.45 "Segoe UI",system-ui,-apple-system,Roboto,Arial,sans-serif;
  color:var(--ink);background:var(--bg);overflow:hidden;
}
button,input,select{font:inherit;color:inherit}
button{cursor:pointer}
/* filet de sécurité : tout champ non couvert par une règle plus bas garde
   un fond lisible en thème sombre (sinon le navigateur le peint en blanc) */
input[type=text],input[type=number],select{background:var(--field)}

/* ---------- Layout ---------- */
.app{display:grid;grid-template-columns:288px minmax(0,1fr) 312px;grid-template-rows:52px 1fr;height:100vh}
header{
  grid-column:1/-1;display:flex;align-items:center;gap:8px;padding:0 14px;
  background:var(--panel);border-bottom:1px solid var(--line);box-shadow:var(--shadow);z-index:5
}
header h1{font-size:15px;margin:0 12px 0 0;font-weight:650;letter-spacing:.2px;white-space:nowrap}
header h1 span{color:var(--ink2);font-weight:400}
/* Le titre reprend l'encre de la barre, pas le vert que theme.css donne a
   tous les liens (illisible en theme clair). Et on coupe la transition que
   theme.css pose sur la couleur des liens : une transition sur 'color'
   empeche justement la couleur de suivre la bascule clair/sombre a chaud. */
header h1 a{color:inherit;text-decoration:none;transition:none}
header h1 a:hover{text-decoration:underline}
.spacer{flex:1}
aside{background:var(--panel);border-right:1px solid var(--line);overflow-y:auto;padding:12px}
/* Le panneau droit ne défile pas lui-même : ses zones internes défilent
   (propriétés en haut, éléments en bas), comme dans le Studio d'étiquettes. */
aside.right{border-right:0;border-left:1px solid var(--line);padding:0;display:flex;flex-direction:column;overflow:hidden}
main{position:relative;overflow:hidden;display:flex;flex-direction:column;min-width:0}

/* ---------- Contrôles ---------- */
.btn{
  /* Meme recette que theme.css, donc que le Studio d'etiquettes : a plat au
     repos, la boite n'apparait qu'au survol. Le contour reste declare, mais
     transparent, pour que rien ne bouge d'un pixel quand il se colore. */
  border:1px solid transparent;background:transparent;color:var(--ink2);border-radius:8px;padding:6px 10px;
  display:inline-flex;align-items:center;gap:6px;white-space:nowrap;
  /* Surtout PAS "transition:.12s" ici : ce raccourci vaut "all", et une
     transition sur background-color / color empêche ces deux propriétés de
     suivre la bascule de thème (le bouton reste peint dans l'ancien thème).
     On n'anime donc que ce qui bouge au survol et au clic. */
  transition:border-color .12s,box-shadow .12s,transform .12s
}
.btn:hover{background:var(--hover);border-color:var(--line);color:var(--ink)}
.btn:active{transform:translateY(1px)}
/* Bouton sans effet dans l'etat courant : on le grise et on neutralise le survol. */
/* .42 sur l'encre attenuee ne donnait plus que 2:1 : le bouton disparaissait.
   .7 le laisse devinable (3,2:1 sombre / 3,6:1 clair) ; c'est l'absence d'effet
   au survol et le curseur qui disent qu'il est inactif, pas seulement la pâleur. */
.btn:disabled{opacity:.7;cursor:default}
.btn:disabled:active{transform:none}
.btn:disabled:hover{background:transparent;border-color:transparent;color:var(--ink2);box-shadow:none}
/* écart assumé avec theme.css, qui écrit color:#fff sur le vert de la charte :
   blanc sur #70BD95 ne donne que 2,2:1. Encre sombre = 9:1, et on reste dans la charte. */
.btn.primary{background:var(--accent);border-color:var(--accent);color:var(--on-accent);font-weight:600}
.btn.primary:hover{background:var(--primary-dim)}
.btn.danger{color:var(--danger-txt,var(--danger));border-color:transparent;background:transparent}
.btn.danger:hover{background:rgba(231,76,60,.15)}
.btn.small{padding:4px 8px;font-size:12.5px;border-radius:7px}
/* Bouton enclenche : le vert marque le fond et le contour, pas l'encre.
   Le vert de la charte sur son propre halo ne donne que 2,73:1. */
.btn.on{background:var(--accent-soft);border-color:var(--accent);color:var(--ink)}
/* bouton soleil/lune injecté par theme.js dans #toolbar (class="btn btn-icon") :
   28 x 28 comme dans le Studio (common.css). */
.btn-icon{width:28px;height:28px;padding:0;justify-content:center}
.btn-icon svg{display:block}
.sep{width:1px;height:26px;background:var(--line);margin:0 3px}

.group{margin-bottom:16px}
.group>h2{
  font-size:11px;text-transform:uppercase;letter-spacing:.9px;color:var(--ink2);
  margin:0 0 8px;font-weight:700;display:flex;align-items:center;gap:6px
}
.group>h2 .count,.lt-title .count{background:var(--line2);color:var(--ink2);border-radius:20px;padding:1px 7px;font-size:10.5px;letter-spacing:0}
.field{display:flex;align-items:center;gap:8px;margin-bottom:7px}
.field label{width:86px;flex:none;color:var(--ink2);font-size:12.5px}
.field input[type=text],.field input[type=number],.field select{
  flex:1;min-width:0;border:1px solid var(--line);border-radius:7px;padding:5px 8px;background:var(--field)
}
.field input:focus,.field select:focus{outline:none;border-color:var(--accent);box-shadow:0 0 0 3px var(--accent-soft)}
input[type=color]{width:34px;height:28px;padding:0;border:1px solid var(--line);border-radius:6px;background:var(--field);cursor:pointer}
.row2{display:grid;grid-template-columns:1fr 1fr;gap:7px}
.hint{font-size:11.5px;color:var(--ink2);line-height:1.4}
/* couples de dimensions : libellé au-dessus + bouton d'inversion, rien n'est tronqué */
.dims{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr) auto;gap:7px;align-items:end;margin-bottom:8px}
.dims.solo{grid-template-columns:minmax(0,1fr)}   /* une seule cote : hauteur sous plafond */
.dimf{display:flex;flex-direction:column;gap:3px;min-width:0}
.dimf span{font-size:11px;color:var(--ink2);white-space:nowrap}
.dimf input{width:100%;min-width:0;border:1px solid var(--line);border-radius:7px;padding:5px 8px;background:var(--field)}
.dimf input:focus{outline:none;border-color:var(--accent);box-shadow:0 0 0 3px var(--accent-soft)}
.swap{height:30px;padding:0 9px;font-size:15px;line-height:1}

/* ---------- Bibliothèque ---------- */
.cat{margin-bottom:12px}
.cat h3{font-size:12px;margin:0 0 6px;color:var(--ink2);font-weight:600}
.lib{display:grid;grid-template-columns:1fr 1fr;gap:6px}
.card{
  border:1px solid var(--line);border-radius:9px;background:var(--field);padding:6px;
  display:flex;flex-direction:column;gap:5px;align-items:center;text-align:center;
  cursor:grab;user-select:none;position:relative;
  transition:border-color .12s,box-shadow .12s,transform .12s   /* voir .btn : jamais "all" */
}
.card:hover{border-color:var(--accent);box-shadow:0 2px 8px var(--accent-soft)}
.card:active{cursor:grabbing}
.card .thumb{width:100%;height:30px;display:flex;align-items:center;justify-content:center}
.card .thumb i{display:block;border:1.5px solid rgba(0,0,0,.35)}
.card .nm{font-size:11px;line-height:1.25;font-weight:600}
.card .dm{font-size:10px;color:var(--ink2)}

/* ---------- Scène ---------- */
.toolbar{
  display:flex;align-items:center;gap:8px;padding:8px 12px;background:var(--panel);
  border-bottom:1px solid var(--line);flex-wrap:wrap
}
.stage-wrap,#stage3d{
  flex:1;min-height:0;position:relative;overflow:auto;display:flex;
  background:
    radial-gradient(circle at 1px 1px,var(--dot) 1px,transparent 0) 0 0/22px 22px,
    var(--bg);
}
.plan{position:relative;margin:auto;padding:46px 46px 34px 46px}
/* Vue 3D (js/studio-3d.js) : son canvas vit dans un second cadre, #stage3d,
   au même fond pointillé que le plan. Trois modes sur le bouton « 🧊 3D » :
   - le plan seul (rien de tout ceci ne s'affiche) ;
   - main.mode3d : la 3D seule, le cadre prend la place du plan ;
   - main.split : côte à côte, la scène passe en deux colonnes, le plan à
     gauche (seul modifiable) et la 3D à droite. La barre d'outils garde
     toute la largeur. */
#stage3d{display:none;min-width:0;overflow:hidden}
#view3d{position:absolute;inset:0;width:100%;height:100%;cursor:grab;touch-action:none}
main.mode3d #stage3d{display:block}
main.mode3d .stage-wrap{display:none}
main.split{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);grid-template-rows:auto minmax(0,1fr)}
main.split .toolbar{grid-column:1/-1}
main.split #stage3d{display:block;border-left:1px solid var(--line)}
#tView:disabled{opacity:.55}
.room{
  position:relative;background:var(--plan-paper);border:3px solid var(--plan-wall);
  box-shadow:0 10px 30px rgba(16,24,40,.14);touch-action:none
}

/* cotes */
.dim{position:absolute;color:var(--cote);font-size:12px;font-weight:600;letter-spacing:.3px;white-space:nowrap}
.dim.top{top:16px;left:46px;right:46px;text-align:center}
.dim.left{left:12px;top:46px;bottom:34px;display:flex;align-items:center;writing-mode:vertical-rl;transform:rotate(180deg);justify-content:center}
.dim.area{bottom:10px;right:46px;font-weight:500}

/* calque des débattements (portes / fenêtres) */
#fx{position:absolute;left:0;top:0;pointer-events:none;z-index:40;overflow:visible}
/* calque des ecarts (cotes) : au-dessus des meubles */
#gapfx{position:absolute;left:0;top:0;pointer-events:none;z-index:70;overflow:visible}
/* calque de la règle libre : au-dessus des cotes d'écart */
#rulerfx{position:absolute;left:0;top:0;pointer-events:none;z-index:71;overflow:visible}
/* seule l'étiquette d'une cote posée reprend les clics (suppression au clic droit) ;
   le trait reste transparent pour ne pas gêner le traçage */
#rulerfx g[data-i] rect, #rulerfx g[data-i] text{pointer-events:auto}
#rulerfx g[data-i]:hover rect{stroke:var(--plan-danger)}
#rulerfx g[data-i]:hover text{fill:var(--plan-danger)}
/* mode règle : curseur en croix partout sur le plan, meubles compris */
#room.ruler, #room.ruler .item{cursor:crosshair}
/* calque des décrochés (pièce non rectangulaire) : blocs pleins hachurés.
   Posé AU-DESSUS des meubles (z 35, sous les débattements à 40) : un meuble
   glissé dessous disparaît, on voit d'un coup d'œil qu'il n'a rien à y faire. */
#notchfx{position:absolute;left:0;top:0;pointer-events:none;z-index:35;overflow:visible}
/* rangées de saisie des décrochés, panneau « Pièce » */
.notch-row{display:flex;align-items:center;gap:4px;margin:6px 0 0}
.notch-row select{flex:1;min-width:0;padding:5px 4px;border:1px solid var(--line);border-radius:6px}
.notch-row input{width:50px;padding:5px 4px;border:1px solid var(--line);border-radius:6px}
.notch-row span{color:var(--ink2);font-size:11px}
#notchAdd{width:100%;margin:6px 0 10px;justify-content:center}
/* éléments */
.item{
  position:absolute;left:0;top:0;transform-origin:center center;
  border:1.5px solid rgba(0,0,0,.45);
  display:flex;align-items:center;justify-content:center;
  cursor:move;user-select:none;touch-action:none;
  /* Encre du PLAN, pas du châssis. Sans cette ligne, l'étiquette héritait de
     --ink, qui est presque blanc en thème sombre (le défaut du site) : du texte
     clair sur un meuble pastel (1,7:1) avec une ombre blanche dessous, c'est ce
     qui rendait les noms « troubles » (constaté le 2026-08-21). Le PNG exporté
     écrivait déjà en --plan-ink : l'écran s'aligne dessus. */
  color:var(--plan-ink)
  /* Pas de "will-change:transform" ici : il place CHAQUE meuble sur sa propre
     couche graphique, dessinee puis recollee, ce qui rend le texte flou en
     permanence. Le navigateur sait deja optimiser le deplacement tout seul. */
}
/* meuble de couleur foncée : encre blanche, choisie par contraste (lightInk) */
.item.ink-light,.ghost.ink-light{color:#fff}
.item .lbl{
  pointer-events:none;text-align:center;font-weight:600;padding:1px;overflow:hidden;
  flex:none;              /* garde la largeur calculée dans applyTransform, même plus large que la boîte avant rotation */
  /* Interligne en pixels ENTIERS (13, et non 1.15 × 11 = 12,65) : la 2e ligne
     tombait entre deux rangées de pixels. Et plus d'ombre blanche (text-shadow) :
     sur 11 px, elle dédoublait chaque lettre. */
  line-height:13px
}
.item .lbl small{display:block;font-weight:500;font-size:9px;line-height:11px;color:var(--plan-ink2)}
.item.ink-light .lbl small{color:#dfe5ec}
.item.round{border-radius:50%}
.item.sel{outline:2px solid var(--plan-accent);outline-offset:2px;box-shadow:0 0 0 6px var(--plan-accent-soft);z-index:60}
.item.locked{cursor:not-allowed}
.item.hit{border-color:var(--plan-danger);box-shadow:0 0 0 2px rgba(214,69,69,.4) inset}
.item .h{
  position:absolute;width:14px;height:14px;border-radius:50%;background:var(--plan-paper);border:2px solid var(--plan-accent);
  display:none;z-index:2
}
.item.sel .h{display:block}
.item .h.rot{left:50%;top:-26px;margin-left:-7px;cursor:grab;background:var(--plan-accent)}
.item .h.rot::before{content:"";position:absolute;left:50%;top:12px;width:2px;height:14px;background:var(--plan-accent);margin-left:-1px}
.item .h.size{right:-7px;bottom:-7px;cursor:nwse-resize;border-radius:3px}
.item.locked .h{display:none}
.item .dirmark{position:absolute;top:2px;left:50%;margin-left:-4px;width:0;height:0;pointer-events:none;
  border-left:4px solid transparent;border-right:4px solid transparent;border-bottom:6px solid rgba(0,0,0,.3)}

/* ---------- Liste des éléments (rangées pleine largeur, comme les calques
   du Studio d'étiquettes ; l'encre du choisi reste --ink, pas le vert :
   le vert de la charte sur son propre halo ne donne que 2,73:1) ---------- */
.layer{display:flex;align-items:center;gap:8px;padding:5px 10px;border-bottom:1px solid var(--line);cursor:pointer}
.layer:hover{background:var(--hover)}
.layer.sel{background:var(--accent-soft);box-shadow:inset 2px 0 0 var(--accent)}
.layer .sw{width:16px;height:16px;border-radius:4px;border:1px solid rgba(0,0,0,.25);flex:none}
.layer .txt{flex:1;min-width:0}
.layer .txt b{display:block;font-weight:600;font-size:12.5px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.layer .txt span{font-size:11px;color:var(--ink2)}
.layer .acts{display:flex;gap:2px;opacity:0;transition:.12s}
.layer:hover .acts,.layer.sel .acts{opacity:1}
.layer .acts button{border:0;background:transparent;padding:3px 4px;border-radius:5px;font-size:13px;line-height:1}
.layer .acts button:hover{background:var(--hover)}
/* état vide (panneau de propriétés sans sélection, listes vides), comme le
   .empty-state du Studio */
.empty-state{padding:26px 14px;text-align:center;color:var(--ink2);font-size:12px;line-height:1.6}

.swatches{display:flex;flex-wrap:wrap;gap:5px;margin-top:6px}
.swatches button{width:22px;height:22px;border-radius:6px;border:1px solid rgba(0,0,0,.18);padding:0}
.swatches button:hover{transform:scale(1.12)}
input[type=range]{flex:1;min-width:0;accent-color:var(--accent)}

.ghost{
  position:fixed;pointer-events:none;z-index:999;border:1.5px dashed var(--plan-wall);
  opacity:.85;display:flex;align-items:center;justify-content:center;font-size:11px;font-weight:600;overflow:hidden;
  color:var(--plan-ink)   /* comme .item : l'encre du plan, pas celle du châssis */
}
/* Deux colonnes fixes : en flex, la 4e tuile n'avait plus la place et
   retombait seule sur sa ligne (3 + 1). */
.stats{display:grid;grid-template-columns:1fr 1fr;gap:6px}
.stat{min-width:0;background:var(--field);border:1px solid var(--line);border-radius:8px;padding:7px 9px}
.stat b{display:block;font-size:15px}
.stat span{font-size:10.5px;color:var(--ink2);text-transform:uppercase;letter-spacing:.5px}
/* touches du popup d'aide (bouton « ? » de la barre d'outils) */
kbd{background:var(--field);border:1px solid var(--line);border-bottom-width:2px;border-radius:5px;padding:0 5px;font:600 11px/18px "Segoe UI";display:inline-block}
#file{display:none}

@media(max-width:1150px){ .app{grid-template-columns:236px minmax(0,1fr) 256px} }
@media(max-width:960px){
  .app{grid-template-columns:196px minmax(0,1fr) 212px}
  .field label{width:62px}
  .lib{grid-template-columns:1fr}
}
@media(max-width:740px){            /* fenêtre étroite : tout s'empile, le plan garde la place */
  .app{grid-template-columns:minmax(0,1fr);grid-template-rows:52px auto minmax(320px,1fr) auto;height:auto;min-height:100vh}
  body{overflow:auto}
  aside{max-height:40vh;border-right:0;border-bottom:1px solid var(--line)}
  aside.right{border-left:0;border-top:1px solid var(--line);border-bottom:0}
  .lib{grid-template-columns:1fr 1fr}
  /* côte à côte en fenêtre étroite : le plan au-dessus, la 3D en dessous */
  main.split{grid-template-columns:minmax(0,1fr);grid-template-rows:auto minmax(160px,1fr) minmax(160px,1fr)}
  main.split #stage3d{border-left:0;border-top:1px solid var(--line)}
}

/* ---------- Nom du document ----------
   Même rôle que le champ « Nom du template… » du Studio d'étiquettes : c'est lui
   qui nomme le fichier enregistré, l'image exportée et l'objet de l'email. */
#docTitle{
  /* Meme recette que #template-title du Studio : ni fond ni contour au repos,
     le contour n'apparait qu'au survol et pendant la saisie. */
  background:transparent;border:1px solid transparent;color:var(--ink);
  border-radius:8px;padding:5px 8px;width:200px;font-size:12.5px;
  /* jamais "transition:.12s" tout court ici : cf. la note sur .btn plus haut */
  transition:border-color .12s
}
#docTitle:hover{border-color:var(--line)}
#docTitle:focus{border-color:var(--accent);outline:none}
#docTitle::placeholder{color:var(--ink2)}

/* ---------- Menu déroulant de la barre d'outils ---------- */
.menu{position:relative;flex-shrink:0}
/* Menu ouvert : le vert marque le fond et le contour, mais PAS l'encre.
   Le vert de la charte sur son propre halo ne donne que 2,73:1, illisible
   dans les deux themes (c'est le cas dans le Studio d'etiquettes). */
.menu.open > .btn{background:var(--accent-soft);border-color:var(--accent);color:var(--ink)}
.menu-list{
  display:none;position:absolute;top:calc(100% + 4px);right:0;min-width:224px;z-index:9000;
  background:var(--panel);border:1px solid var(--border-light);border-radius:8px;
  box-shadow:var(--shadow);padding:4px 0
}
.menu.open .menu-list{display:block}
.menu-item{
  display:flex;align-items:center;justify-content:space-between;gap:18px;
  padding:7px 14px;font-size:12.5px;color:var(--ink2);cursor:pointer;white-space:nowrap;
  transition:background .12s,color .12s
}
.menu-item:hover{background:var(--hover);color:var(--ink)}
.menu-item.disabled{opacity:.45}    /* l'export SVG n'existe qu'en 3D : l'entrée reste visible, mais grisée */
.menu-item.disabled:hover{background:transparent;color:var(--ink2)}
.menu-item .sc{font-size:10.5px;opacity:.7}
.menu-sep{height:1px;background:var(--line);margin:4px 0}

/* ---------- Panneau droit : modèle du Studio d'étiquettes ----------
   Deux onglets (Propriétés | Historique). L'onglet Propriétés est coupé en
   deux : les propriétés défilent en haut, la liste des éléments reste
   toujours visible en bas, séparée par un filet vert. */
.right-tabs{display:flex;border-bottom:1px solid var(--line);flex-shrink:0}
.right-tab{
  flex:1;padding:8px 0;text-align:center;font-size:10.5px;font-weight:700;
  text-transform:uppercase;letter-spacing:.8px;color:var(--ink2);cursor:pointer;
  border-bottom:2px solid transparent;
  transition:border-color .12s   /* jamais "all" : bloquerait la bascule de thème */
}
.right-tab:hover{color:var(--ink)}
/* l'encre de l'onglet actif : --accent-txt en thème clair (le vert de la
   charte n'y donne que 1,99:1), le vert normal en sombre */
.right-tab.active{color:var(--accent-txt,var(--accent));border-bottom-color:var(--accent)}
.right-tab .tab-badge{background:var(--line2);color:var(--ink2);border-radius:8px;padding:1px 6px;font-size:9.5px;letter-spacing:0;margin-left:3px}
.right-tab.disabled{opacity:.4;cursor:default}
.right-panel{flex:1;overflow:hidden;min-height:0;display:none;flex-direction:column}
.right-panel.active{display:flex}
#props-scroll{flex:2;overflow-y:auto;min-height:0}
#layers-section{flex:1;min-height:130px;max-height:40%;border-top:2px solid var(--accent);display:flex;flex-direction:column}
#layers{overflow-y:auto;flex:1}
#history-list{overflow-y:auto;flex:1}

/* groupes de propriétés (Identification, Position & taille, Apparence…) */
.prop-group{padding:10px 12px;border-bottom:1px solid var(--line)}
.prop-group-title{
  font-size:10px;font-weight:700;text-transform:uppercase;letter-spacing:.8px;
  color:var(--ink2);margin-bottom:7px;display:flex;align-items:center;gap:4px
}
.prop-row{display:flex;align-items:center;gap:6px;margin-bottom:5px}
.prop-row label{font-size:11px;color:var(--ink2);min-width:46px;flex:none}
.prop-row input,.prop-row select{
  flex:1;min-width:0;background:var(--field);border:1px solid var(--line);
  color:var(--ink);font-size:12px;padding:4px 6px;border-radius:6px
}
.prop-row input:focus,.prop-row select:focus{outline:none;border-color:var(--accent);box-shadow:0 0 0 3px var(--accent-soft)}
.prop-row input[type=color]{width:30px;height:24px;padding:1px;flex:0 0 30px;border-radius:5px}
.prop-row input[type=range]{border:0;background:transparent;padding:0}
.prop-row .xs{font-size:10.5px;color:var(--ink2);flex:none}
.prop-row-inline{display:flex;gap:4px;margin-top:6px}
.prop-row-inline .btn{flex:1;font-size:11.5px;padding:4px 6px;justify-content:center}
.prop-info{font-size:10.5px;color:var(--ink2);line-height:1.45;margin:4px 0 0}
.reset-btn{
  width:20px;height:20px;border:none;background:transparent;color:var(--ink2);
  font-size:12px;cursor:pointer;display:inline-flex;align-items:center;
  justify-content:center;border-radius:4px;flex-shrink:0
}
.reset-btn:hover{background:rgba(231,76,60,.15);color:var(--danger-txt,var(--danger))}
.reset-btn:disabled{opacity:.35;pointer-events:none}   /* déjà à la valeur par défaut */

/* barre de la liste des éléments (équivalent de la barre des calques) */
.layers-toolbar{
  display:flex;align-items:center;gap:4px;padding:5px 8px;
  border-bottom:1px solid var(--line);flex-shrink:0;background:var(--hover)
}
.lt-title{
  font-size:10px;font-weight:700;text-transform:uppercase;letter-spacing:.8px;
  color:var(--ink2);flex:1;display:flex;align-items:center;gap:6px
}
.layers-toolbar .btn{font-size:11.5px;padding:3px 8px;border-radius:6px}

/* onglet Historique : une ligne par action, la courante surlignée */
.history-item{
  display:flex;align-items:center;gap:6px;padding:5px 12px;font-size:12px;
  color:var(--ink2);cursor:pointer;border-bottom:1px solid var(--line)
}
.history-item:hover{background:var(--hover)}
.history-item.current{background:var(--accent-soft);color:var(--ink);box-shadow:inset 2px 0 0 var(--accent)}
.history-item .h-idx{font-size:10px;color:var(--ink2);min-width:24px;text-align:right;flex:none}
.history-item .h-desc{flex:1;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}

/* ---------- Fenêtre modale (partage) ---------- */
.modal-overlay{
  display:none;position:fixed;inset:0;z-index:9500;padding:20px;
  background:rgba(0,0,0,.55);align-items:center;justify-content:center
}
.modal-overlay.open{display:flex}
.modal{
  width:min(560px,100%);max-height:86vh;overflow:auto;
  background:var(--panel);border:1px solid var(--line);border-radius:12px;box-shadow:var(--shadow)
}
.modal-header{
  display:flex;align-items:center;justify-content:space-between;gap:12px;
  padding:12px 16px;border-bottom:1px solid var(--line)
}
.modal-header h2{margin:0;font-size:14.5px;font-weight:650}
.modal-body{padding:16px;font-size:12.5px;line-height:1.55}
.modal-body p{margin:0 0 10px}
/* contenu du popup d'aide : mêmes tableaux que l'aide du Studio */
.modal-body h3{color:var(--ink);font-size:13px;margin:14px 0 6px}
.modal-body h3:first-child{margin-top:0}
.modal-body ul{margin:0 0 12px 18px;padding:0}
.modal-body li{margin:2px 0}
.modal-body table{width:100%;border-collapse:collapse;margin:8px 0}
.modal-body th,.modal-body td{padding:4px 8px;text-align:left;border-bottom:1px solid var(--line);font-size:12px}
.modal-body th{color:var(--ink2);font-weight:600}
.share-box{display:flex;gap:6px;align-items:center;margin:10px 0}
.share-box input{
  flex:1;min-width:0;background:var(--field);border:1px solid var(--line);color:var(--ink);
  font:11px/1.4 ui-monospace,Consolas,monospace;padding:7px 9px;border-radius:6px
}
.share-box input:focus{border-color:var(--accent);outline:none}
.url-note{font-size:11px;color:var(--ink2);margin:0}
.url-warning{
  background:rgba(243,156,18,.14);border:1px solid #f39c12;color:var(--ink);
  padding:9px 12px;border-radius:8px;font-size:11.5px;line-height:1.55;margin-top:10px
}

@media print{                       /* le papier reste blanc, même en thème sombre */
  header,aside,.toolbar,.modal-overlay{display:none!important}
  .app{display:block;height:auto}
  .stage-wrap{overflow:visible;background:#fff}
  body{overflow:visible;background:#fff;color:var(--plan-ink)}
  .dim{color:var(--plan-ink2)}      /* sinon les cotes sortent en gris clair sur blanc */
  .item .h{display:none!important}
  /* vue 3D seule : le canvas sort de son cadre absolu et garde ses proportions
     (il est redessiné à double résolution le temps d'imprimer, cf. studio-3d.js) */
  main.mode3d #stage3d{display:block;overflow:visible;height:auto;background:#fff}
  main.mode3d #view3d{position:static;width:100%;height:auto}
  /* côte à côte : c'est le plan qui s'imprime, seul et en pleine largeur */
  main.split{display:flex}
  main.split #stage3d{display:none}
}