/* Copié tel quel d'un studio existant (origine exacte : Documents/reprise-technique.md) pour MagicBanner 0.3.0 :
   seulement les règles du panneau (sections, champs, boutons, interrupteurs, formats, calques), sans modification.
   La police d'interface de ce studio venait de Google Fonts : non reprise, Arial la remplace. */
:root{}
.editor-body{min-height:0;display:grid;grid-template-columns:285px minmax(420px,1fr) 230px}
.control-panel,.properties{background:#1b1d20;overflow:auto;max-height:calc(100vh - 64px)}
.control-panel{border-right:1px solid #ffffff10;padding:18px}
.control-section{padding:0 0 17px;margin-bottom:17px;border-bottom:1px solid #ffffff10}
.control-section:last-child{border-bottom:0}
.control-section h2{margin:0 0 11px;font-size:10px;letter-spacing:.16em;text-transform:uppercase;color:#fff;font-family:"DM Sans",Arial,sans-serif;font-weight:900}
.control-group-title{margin:3px 0 14px;color:#fff;font-size:11px;font-weight:900;letter-spacing:.18em;text-transform:uppercase}
.dark-field{display:grid;gap:6px;margin:10px 0}
.dark-field label{font-size:10px;color:#aeb2b7;font-weight:700}
.dark-field input,.dark-field select,.dark-field textarea{width:100%;border:1px solid #ffffff15;border-radius:8px;background:#111315;color:#fff;padding:9px;font-size:11px}
.dark-field textarea{min-height:64px;resize:vertical}
.segmented{display:grid;grid-template-columns:repeat(2,1fr);gap:6px}
.segmented button,.chip-button{border:1px solid #ffffff13;border-radius:8px;background:#25282b;color:#aeb2b7;padding:8px;font-size:10px;font-weight:800}
.segmented button.active,.chip-button.active{background:#fff;color:#151719}
.thumbs{display:grid;grid-template-columns:repeat(2,1fr);gap:7px}
.add-button{width:100%;border:1px dashed #ffffff28;border-radius:8px;background:transparent;color:#c6c9cd;padding:10px;font-size:10px;font-weight:800}
.animation-row{display:flex;align-items:center;justify-content:space-between;color:#fff;font-size:10px;font-weight:900;letter-spacing:.16em;text-transform:uppercase}
.switch{width:38px;height:22px;border:0;border-radius:99px;background:#555;position:relative}
.switch:after{content:"";position:absolute;width:16px;height:16px;left:3px;top:3px;border-radius:50%;background:#fff;transition:.2s}
.switch.active{background:#fff}
.switch.active:after{left:19px;background:#17191c}
.stage-area{position:relative;min-height:0;display:grid;place-items:center;padding:30px;background:#111315;background-image:radial-gradient(#ffffff0c 1px,transparent 1px);background-size:18px 18px;overflow:auto}
.editor-help{position:absolute;bottom:13px;left:50%;translate:-50%;border-radius:99px;background:#191b1ee8;color:#aaa;padding:7px 11px;font-size:9px}
.layers{display:grid;gap:6px}
.layer{display:flex;align-items:center;justify-content:space-between;padding:8px;border-radius:7px;background:#25282b;color:#c6c9cd;font-size:10px}
.layer.active{background:#fff;color:#17191c}
.property-empty{color:#7f848a;font-size:11px;line-height:1.6}
.save-status{font-size:10px;color:#9ea2a7;min-width:110px;text-align:right}
@media(max-width:1050px){.editor-body{grid-template-columns:250px 1fr}}
@media(max-width:720px){.editor-body{display:block}.control-panel{max-height:none}.stage-area{min-height:580px}}
.editor-actions .save,.segmented button.active,.chip-button.active{border-color:var(--studio-accent);background:var(--studio-accent);color:#fff}
.switch.active{background:var(--studio-accent)}
.switch.active:after{background:#fff}
.control-panel,.properties{max-height:calc(100vh - 133px)}
.project-actions{display:grid;grid-template-columns:1fr 1fr;gap:6px}
.project-actions button{border:1px solid #ffffff18;border-radius:7px;background:#25282c;color:#fff;padding:8px;font-size:10px;font-weight:800}
.project-actions .save{background:var(--studio-accent);border-color:var(--studio-accent)}
.project-tools .save-status{margin-top:8px;text-align:left}
.stage-area{display:flex;flex-direction:column;align-items:safe center;justify-content:flex-start;gap:14px}
.format-toolbar{width:100%;display:flex;align-items:center;padding:0;border:0;background:transparent;overflow-x:auto;overflow-y:hidden;scrollbar-width:thin}
.format-toolbar .segmented{display:flex;flex-wrap:nowrap;gap:7px;width:max-content;justify-content:flex-start}
.format-toolbar .segmented button{min-width:0;flex:0 0 auto;border-color:#ffffff18;border-radius:99px;background:#0d1118;color:#bfc3c9;padding:7px 12px}
.format-toolbar .segmented button.active{border-color:var(--collection-accent,#a76486)!important;background:#0d1118!important;color:#fff!important;box-shadow:none!important}
.thumbs{display:flex;align-items:center;gap:10px}
.stage-area{background-image:none}
.background-actions{display:grid;gap:8px;margin-top:9px}
.background-mini-actions{display:grid;grid-template-columns:1fr 1fr 34px;gap:6px}
.background-mini-actions .chip-button{padding:7px 5px}
.background-mini-actions input{width:34px;height:30px;border:0;border-radius:7px;background:transparent;padding:0}
.precise-grid{display:grid;grid-template-columns:1fr 1fr;gap:7px}
.precise-grid label{display:grid;gap:4px;color:#9da1a6;font-size:9px}
.precise-grid input{width:100%;border:1px solid #ffffff15;border-radius:7px;background:#111315;color:#fff;padding:7px}
.product-counts{display:flex;gap:6px}
.product-counts button{width:38px;height:34px;border:1px solid #ffffff18;border-radius:8px;background:#25282c;color:#fff;font-weight:800}
.product-counts button.active{background:var(--studio-accent);border-color:var(--studio-accent)}
.control-hint{font-size:9px;color:#9da1a6;line-height:1.35}
.layers-toggle{margin-top:10px;border:1px solid #ffffff18;border-radius:99px;background:#191b1e;color:#c2c6cb;padding:7px 10px;font-size:9px;font-weight:900;letter-spacing:.08em;text-transform:uppercase}
.editor-body{grid-template-columns:285px minmax(420px,1fr)}
.background-picker-row{display:flex;align-items:center;gap:10px;overflow-x:auto;overflow-y:hidden;padding:3px 3px 7px;scrollbar-width:thin}
.background-picker-row .thumbs{flex:0 0 auto}
.background-actions{display:grid;gap:9px;margin-top:8px}
.background-mini-actions{display:flex;align-items:center;gap:10px;flex:0 0 auto}
.swatch-action,.background-mini-actions .swatch-color{width:34px!important;height:34px!important;flex:0 0 34px;border-radius:50%;border:2px solid #ffffff26;padding:0!important;overflow:hidden;cursor:pointer;appearance:none;-webkit-appearance:none}
.swatch-action span{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0,0,0,0)}
.swatch-action.gradient{background:linear-gradient(135deg,var(--studio-bg,#162f6f),var(--studio-accent,#ff8057))}
.swatch-action.solid{background:var(--studio-bg,#162f6f)}
.background-mini-actions .swatch-color{background:none}
.background-mini-actions .swatch-color::-webkit-color-swatch-wrapper{padding:0}
.background-mini-actions .swatch-color::-webkit-color-swatch{border:0;border-radius:50%}
.gradient-editor{display:flex;align-items:center;gap:8px;width:max-content;margin:5px 0 9px;padding:8px 10px;border:1px solid #ffffff14;border-radius:8px;background:#111315;color:#aeb2b7;font-size:9px;font-weight:800}
.gradient-editor input{width:27px;height:27px;padding:0;border:2px solid #ffffff26;border-radius:50%;overflow:hidden;background:none;appearance:none;-webkit-appearance:none;cursor:pointer}
.gradient-editor input::-webkit-color-swatch-wrapper{padding:0}
.gradient-editor input::-webkit-color-swatch{border:0;border-radius:50%}
.logo-choices{display:flex;gap:8px;overflow-x:auto;padding:2px 2px 7px;scrollbar-width:thin}
.text-control-block{padding:0 0 13px;margin:0 0 13px;border-bottom:1px solid #ffffff0c}
.text-control-block:last-of-type{border-bottom:0;margin-bottom:7px}
.text-style-row{display:grid;grid-template-columns:1fr auto;align-items:end;gap:9px}
.text-size-field{margin:0}
.text-size-field input{height:34px}
.text-color-field{display:grid;gap:6px;color:#aeb2b7;font-size:10px;font-weight:700}
.text-color-field input{width:34px;height:34px;padding:0;border:2px solid #ffffff26;border-radius:50%;overflow:hidden;background:none;appearance:none;-webkit-appearance:none;cursor:pointer}
.text-color-field input::-webkit-color-swatch-wrapper{padding:0}
.text-color-field input::-webkit-color-swatch{border:0;border-radius:50%}
.dark-field input[readonly]{color:#90959b;background:#151719}
.collection-page-head,.studio-context-head{display:flex;align-items:flex-start;justify-content:space-between;gap:24px;margin:0 0 28px}
.collection-actions{display:grid;gap:8px;justify-items:stretch;width:min(360px,42vw)}
.collection-actions select{width:100%;border:1px solid #ffffff42;border-radius:9px;background:#ffffff14;color:#fff;padding:11px 13px;font-weight:800;box-shadow:0 10px 28px #241a3318}
.collection-actions .primary{width:100%;border-color:var(--collection-accent,#8e2d78);background:var(--collection-accent,#8e2d78);color:#fff;border-radius:9px;box-shadow:0 10px 26px #8e2d7830}
.studio-context-head{padding:24px 20px 12px;margin:0;background:var(--studio-bg,#10141c)}
.collection-actions .primary,#collections .asset-tabs button.active{background:var(--collection-accent,#f2a31b);border-color:var(--collection-accent,#f2a31b);color:#071126}
#collections .asset-tabs button.active,.collection-actions .primary{background:#a76486!important;border-color:#a76486!important;color:#fff!important}
.collection-actions select{background:#fff!important;border-color:#ffffffa8!important;color:#17191c!important}
#collections .collection-actions .primary{background:#a76486!important;border-color:#a76486!important;color:#fff!important}
.collection-actions{position:relative;padding-top:18px}
.collection-actions:before{content:"COLLECTION";position:absolute;top:0;left:2px;color:#ffe05f;font-size:10px;font-weight:900;letter-spacing:.14em;text-transform:uppercase;text-shadow:0 1px 8px #0005}
.collection-actions select{appearance:none!important;-webkit-appearance:none!important;height:46px!important;border:1px solid #ffffff2e!important;border-radius:12px!important;background-color:#111315e8!important;background-image:linear-gradient(45deg,transparent 50%,#fff 50%),linear-gradient(135deg,#fff 50%,transparent 50%)!important;background-position:calc(100% - 20px) 19px,calc(100% - 14px) 19px!important;background-size:6px 6px,6px 6px!important;background-repeat:no-repeat!important;color:#fff!important;padding:0 44px 0 15px!important;font-size:13px!important;font-weight:850!important;box-shadow:0 14px 34px #00000026,inset 0 1px 0 #ffffff17!important;outline:none!important}
.collection-actions select:hover{border-color:#a76486!important;box-shadow:0 14px 34px #00000026,0 0 0 3px #a7648629,inset 0 1px 0 #ffffff17!important}
.collection-actions select:focus{border-color:#ffd91f!important;box-shadow:0 14px 34px #00000026,0 0 0 3px #ffd91f35,inset 0 1px 0 #ffffff17!important}
.collection-actions select option{background:#111315;color:#fff}
.collection-actions .primary{height:43px!important;border-radius:12px!important;background:#a76486!important;border-color:#a76486!important;box-shadow:0 12px 30px #a7648630!important}
body #collections .asset-tabs button.active,body .collection-actions .primary{background:var(--collection-accent,#a76486)!important;border-color:var(--collection-accent,#a76486)!important;color:#fff!important}
body .collection-actions:before{color:var(--collection-secondary,#ffe05f)!important}
body .collection-actions select:hover{border-color:var(--collection-accent,#a76486)!important;box-shadow:0 14px 34px #00000026,0 0 0 3px color-mix(in srgb,var(--collection-accent,#a76486) 22%,transparent),inset 0 1px 0 #ffffff17!important}
body .collection-actions select:focus{border-color:var(--collection-secondary,#ffd91f)!important;box-shadow:0 14px 34px #00000026,0 0 0 3px color-mix(in srgb,var(--collection-secondary,#ffd91f) 22%,transparent),inset 0 1px 0 #ffffff17!important}
body .collection-actions .primary{box-shadow:0 12px 30px color-mix(in srgb,var(--collection-accent,#a76486) 28%,transparent)!important}
@media(max-width:720px){.collection-page-head,.studio-context-head{display:grid}.collection-actions{width:100%}}

/* 1.16.0 : réglages propres à un atelier (curseurs). */
.ligne-curseur { display: flex; align-items: center; gap: 10px; }
.ligne-curseur input[type=range] { flex: 1; }
.valeur-curseur { min-width: 44px; text-align: right; font-size: 13px; opacity: .8; }

/* 1.17.2 : réglage d'un atelier placé dans une section commune (ex. flou du fond dans « Fond »). */
.sous-bloc { margin-top: 14px; padding-top: 12px; border-top: 1px solid #ffffff12; }
.sous-bloc h3 { margin: 0 0 8px; font-size: 11px; text-transform: uppercase; letter-spacing: .04em; opacity: .75; }