/* Kassette Creator — styles Win98 propres à l'outil */
#app.studio{display:flex;height:calc(100vh - 44px - 22px - 32px);height:calc(100dvh - 44px - 22px - 32px);}
#studio-gauche{width:330px;flex:none;display:flex;flex-direction:column;border-right:2px groove #dfdfdf;background:#c0c0c0;}
#studio-onglets{display:flex;flex-wrap:wrap;gap:1px;padding:4px 4px 0;}
.s-onglet{background:#c0c0c0;border:2px solid;border-color:#fff #808080 #c0c0c0 #fff;padding:2px 6px;font-size:11px;cursor:pointer;position:relative;top:2px;}
.s-onglet.on{top:0;padding-bottom:4px;z-index:1;font-weight:bold;}
#studio-panneaux{flex:1;overflow:auto;border:2px solid;border-color:#fff #808080 #808080 #fff;margin:0 4px 4px;padding:8px;}
.panneau{display:none;}.panneau.on{display:block;}
.panneau fieldset{border:2px groove #dfdfdf;padding:6px 8px 8px;margin:0 0 8px;}
.panneau legend{padding:0 3px;}
.panneau label{display:block;margin:6px 0 2px;}
.panneau input[type=text],.panneau input[type=number],.panneau select,.panneau textarea{width:100%;font:11px Arial;background:#fff;border:2px inset #808080;padding:2px 3px;}
.panneau textarea{min-height:110px;resize:vertical;font-family:'Courier New',monospace;}
.panneau input[type=range]{width:100%;}
.s-ligne{display:flex;gap:6px;align-items:center;}.s-ligne>*{flex:1;}
.s-btn{background:#c0c0c0;border:2px solid;border-color:#fff #808080 #808080 #fff;font:11px Arial;padding:3px 8px;cursor:pointer;color:#000;}
.s-btn:active,.s-btn.on{border-color:#808080 #fff #fff #808080;background:#d8d8d8;}
.s-btn:disabled{color:#808080;cursor:default;}
.s-sep{width:8px;display:inline-block;}
#studio-droite{flex:1;display:flex;flex-direction:column;min-width:0;background:#808080;}
#studio-barre-apercu{background:#c0c0c0;padding:4px;display:flex;gap:4px;align-items:center;border-bottom:1px solid #808080;}
#studio-apercu{flex:1;overflow:auto;position:relative;display:flex;align-items:flex-start;justify-content:center;padding:16px;}
#apercu{box-shadow:3px 3px 0 #000;background:#fff;touch-action:none;}
#calque-selection{position:absolute;inset:0;pointer-events:none;}
.s-poignee{position:absolute;width:10px;height:10px;background:#fff;border:1px solid #000080;pointer-events:auto;}
.s-cadre{position:absolute;border:1px dashed #000080;outline:1px dashed #fff;outline-offset:-2px;pointer-events:none;}
#studio-etat{height:22px;background:#c0c0c0;border-top:1px solid #fff;display:flex;gap:4px;padding:2px 4px;font-size:11px;}
#studio-etat>span{border:1px inset #808080;padding:1px 6px;}
#etat-alerte:empty{display:none;}
#etat-alerte{color:#fff;background:#cc0000;font-weight:bold;}
#studio-menus{display:flex;gap:2px;}
.s-menu{position:relative;padding:1px 6px;cursor:default;}
.s-menu:hover,.s-menu.open{background:#000080;color:#fff;}
.s-menu-liste{display:none;position:absolute;left:0;top:100%;background:#c0c0c0;border:2px solid;border-color:#fff #808080 #808080 #fff;box-shadow:2px 2px 0 #000;z-index:20000;min-width:210px;color:#000;}
.s-menu.open .s-menu-liste{display:block;}
.s-menu-item{padding:3px 20px;white-space:nowrap;}
.s-menu-item:hover{background:#000080;color:#fff;}
.s-menu-item.off{color:#808080;pointer-events:none;}
.s-menu-sep{border-top:1px solid #808080;border-bottom:1px solid #fff;margin:3px 2px;}
.s-dialogue-fond{position:fixed;inset:0;background:rgba(0,0,0,.25);z-index:30000;display:flex;align-items:center;justify-content:center;}
.s-dialogue{background:#c0c0c0;border:2px solid;border-color:#fff #808080 #808080 #fff;box-shadow:2px 2px 0 #000;max-width:min(460px,94vw);font:11px Arial;}
.s-dialogue-titre{background:linear-gradient(90deg,#000080,#1084d0);color:#fff;font-weight:bold;padding:3px 6px;}
.s-dialogue-corps{padding:12px;line-height:1.45;}
.s-dialogue-boutons{display:flex;flex-wrap:wrap;gap:6px;justify-content:flex-end;padding:0 12px 12px;}
.s-liste{border:2px inset #808080;background:#fff;max-height:220px;overflow:auto;}
.s-liste-item{padding:2px 4px;display:flex;gap:4px;align-items:center;cursor:default;}
.s-liste-item.on{background:#000080;color:#fff;}
.s-liste-item .s-mini{padding:0 4px;font-size:10px;}
.s-grille{display:grid;grid-template-columns:repeat(4,1fr);gap:4px;}
.s-grille button{background:#fff;border:2px outset #c0c0c0;padding:4px;cursor:pointer;min-height:44px;}
.s-grille img{max-width:100%;max-height:40px;image-rendering:pixelated;}
@media (max-width:700px){
  #app.studio{flex-direction:column-reverse;height:auto;}
  #studio-gauche{width:auto;border-right:none;}
  #studio-onglets{display:none;}
  .panneau{display:block;border-bottom:1px solid #808080;}
  .panneau>h3{margin:6px 0;cursor:pointer;background:#000080;color:#fff;padding:4px 6px;font-size:12px;}
  .panneau:not(.ouvert)>*:not(h3){display:none;}
  #studio-apercu{flex:none;height:55vh;}
  .s-btn{padding:6px 10px;font-size:12px;}
}
@media print{ body>*:not(#zone-impression){display:none!important;} #zone-impression{display:block!important;} }
#zone-impression{display:none;}

/* Modèles */
.s-modeles{display:grid;grid-template-columns:repeat(2,1fr);gap:6px;}
.s-modele{background:#c0c0c0;border:2px solid;border-color:#fff #808080 #808080 #fff;padding:4px;cursor:pointer;display:flex;flex-direction:column;align-items:center;gap:4px;font:11px Arial;color:#000;}
.s-modele.on{border-color:#808080 #fff #fff #808080;background:#d8d8d8;font-weight:bold;}
.s-modele-img{min-height:60px;display:flex;align-items:center;justify-content:center;}
.s-modele-img canvas{max-width:100%;height:auto;box-shadow:1px 1px 0 #000;}
#nouveau-vignettes{grid-template-columns:repeat(auto-fill,minmax(120px,1fr));margin-top:6px;}
#nouveau-vignettes .s-modele{cursor:pointer;}

/* Sélecteur de couleur Win98 */
.s-couleur-btn{width:44px;height:22px;border:2px solid;border-color:#808080 #fff #fff #808080;cursor:pointer;display:block;padding:0;}
.s-couleurs{position:fixed;z-index:40000;background:#c0c0c0;border:2px solid;border-color:#fff #808080 #808080 #fff;box-shadow:2px 2px 0 #000;padding:6px;width:188px;font:11px Arial;color:#000;}
.s-couleurs-grille{display:grid;grid-template-columns:repeat(8,1fr);gap:2px;}
.s-couleurs-titre{margin:6px 0 2px;}
.s-couleurs-bas{margin-top:6px;gap:3px;}.s-couleurs-bas>*{flex:0 0 auto;}.s-couleurs-bas .s-hexa{flex:1 1 auto;min-width:0;width:auto;}
.s-pastille{width:20px;height:20px;border:1px solid #000;padding:0;cursor:pointer;}
.s-pastille:focus{outline:2px solid #000080;outline-offset:1px;}
.s-hexa{width:64px;font:11px 'Courier New',monospace;border:2px inset #808080;padding:2px;}
.s-systeme{position:absolute;opacity:0;width:1px;height:1px;border:0;padding:0;left:0;bottom:0;}
@media (max-width:700px){ .s-couleurs{width:236px;} .s-pastille{width:26px;height:26px;} }

/* Mini-barre d'outils */
.s-minibarre{position:absolute;z-index:5;display:flex;flex-wrap:wrap;gap:1px;background:#c0c0c0;border:2px solid;border-color:#fff #808080 #808080 #fff;box-shadow:2px 2px 0 #000;padding:2px;pointer-events:auto;max-width:calc(100% - 4px);}
.s-mb-btn{min-width:24px;height:22px;background:#c0c0c0;border:2px solid;border-color:#fff #808080 #808080 #fff;font:11px Arial;cursor:pointer;padding:0 4px;color:#000;}
.s-mb-btn:active,.s-mb-btn.on{border-color:#808080 #fff #fff #808080;background:#d8d8d8;}
.s-mb-btn:focus-visible{outline:1px dotted #000;outline-offset:-4px;}
.s-mb-menu{position:absolute;z-index:6;min-width:140px;background:#c0c0c0;border:2px solid;border-color:#fff #808080 #808080 #fff;box-shadow:2px 2px 0 #000;font:11px Arial;color:#000;}
.s-mb-menu .s-menu-item{cursor:pointer;white-space:pre;}
.s-mb-menu .s-menu-item:hover{background:#000080;color:#fff;}
@media (max-width:700px){ .s-mb-btn{min-width:32px;height:32px;font-size:14px;} }

/* Écriture directe sur l'aperçu */
.s-edition{position:absolute;z-index:7;background:rgba(255,255,255,.95);color:#000;border:1px dashed #000080;outline:2px solid #fff;padding:1px 2px;resize:none;overflow:hidden;line-height:1.15;box-sizing:border-box;}

/* Étiquette Creator */
.et-apercu{flex-direction:column;align-items:center;gap:14px;}
.et-face{display:flex;flex-direction:column;align-items:center;gap:4px;font:11px Arial;color:#fff;}
.et-face canvas{box-shadow:3px 3px 0 #000;max-width:100%;height:auto;}
.et-support{position:relative;touch-action:none;}
.et-support canvas{display:block;cursor:pointer;}
.et-calque{position:absolute;inset:0;pointer-events:none;}
.et-cadre{position:absolute;border:1px dashed #fff;outline:1px dashed #000080;outline-offset:1px;pointer-events:none;}
.et-poignee{position:absolute;width:12px;height:12px;background:#fff;border:1px solid #000080;pointer-events:auto;cursor:nwse-resize;touch-action:none;}

/* Aperçu 3D */
.v3d-fenetre{width:min(560px,94vw);}
.v3d-scene{height:340px;perspective:1000px;display:flex;align-items:center;justify-content:center;background:radial-gradient(#9a9a9a,#5a5a5a);touch-action:none;cursor:grab;overflow:hidden;}
.v3d-objet{position:relative;transform-style:preserve-3d;}
.v3d-f{position:absolute;left:0;top:0;backface-visibility:hidden;}
@media (max-width:700px){ .et-poignee{width:20px;height:20px;} .v3d-scene{height:260px;} }