/* Atelier : scène (création, vues, messages) (plan 04). Issu du découpage de editor.css : l'ordre de chargement (les @import de
   editor.css, les <link> de la page du configurateur) est l'ordre de la cascade. */
.studio-scene{position:relative;min-width:0;background:var(--atelier-soft)}
.studio-scene [data-stage],.studio-3d{display:block;width:100%;height:520px;touch-action:none}
.studio-3d canvas{display:block;max-width:100%}
.studio-scene [data-stage]{filter:drop-shadow(0 12px 10px color-mix(in srgb, var(--atelier-ink) 10%, transparent))}
.studio-scene [data-hit]{cursor:move}
.studio-view-tools{position:absolute;bottom:14px;left:0;right:0;display:flex;justify-content:center;gap:4px;flex-wrap:wrap}
.studio-dimensions{text-align:center;font-size:var(--atelier-text-xs);color:var(--atelier-muted);padding:0 12px 16px;margin:0;background:var(--atelier-paper)}
.studio-status{font-size:var(--atelier-text-xs);line-height:1.5;color:var(--atelier-muted);min-height:36px;margin:16px 0}
.studio-status.is-error{color:var(--atelier-danger)}
@media(max-width:900px){
 .studio-scene [data-stage],.studio-3d{height:460px}
}
@media(max-width:680px){
 .studio-scene [data-stage],.studio-3d{height:350px}
}
/* Fabric editor with a persistent, expandable Three.js preview. */
.mp-studio .studio-scene{height:540px;isolation:isolate}
.mp-studio .studio-2d{position:absolute;inset:0;min-width:0;min-height:0}
.mp-studio .studio-2d .canvas-container{position:relative;filter:none}
.mp-studio .studio-2d canvas{display:block;filter:none;touch-action:none}
.mp-studio .studio-preview-3d{position:absolute;right:16px;bottom:16px;width:210px;height:190px;z-index:3;border:1px solid var(--atelier-line);border-radius:var(--atelier-radius-card);overflow:hidden;background:var(--atelier-soft)}
.mp-studio .studio-3d{height:100%;width:100%}
.mp-studio .studio-mini-switch{position:absolute;inset:0;width:100%;height:100%;display:flex;align-items:flex-end;justify-content:center;padding:0 0 12px;border:0;border-radius:0;background:transparent;color:var(--atelier-ink);font-size:var(--atelier-text-xs);font-weight:600;z-index:5}
@media (hover:hover){
 .mp-studio .studio-mini-switch:hover{background:transparent}
}
.mp-studio .studio-2d>.studio-mini-switch{display:none}
.mp-studio .studio-preview-3d .studio-view-tools{display:none}
.mp-studio .studio-scene[data-primary=edit] .studio-preview-3d canvas{pointer-events:none}
.mp-studio .studio-scene[data-primary="3d"] .studio-preview-3d{inset:0;width:auto;height:auto;border:0;border-radius:0;box-shadow:none;z-index:1;background:transparent}
.mp-studio .studio-scene[data-primary="3d"] .studio-preview-3d>.studio-mini-switch{display:none}
.mp-studio .studio-scene[data-primary="3d"] .studio-view-tools{display:flex;right:236px;bottom:16px;padding-left:8px}
.mp-studio .studio-scene[data-primary="3d"] .studio-2d{inset:auto 16px 16px auto;width:210px;height:190px;z-index:3;border:1px solid var(--atelier-line);border-radius:var(--atelier-radius-card);overflow:hidden;background:var(--atelier-soft)}
.mp-studio .studio-scene[data-primary="3d"] .studio-2d>.studio-mini-switch{display:flex}
.mp-studio .studio-scene[data-primary="3d"] .studio-2d canvas{pointer-events:none}
@media(max-width:900px){
 .mp-studio .studio-scene{height:480px}
 .mp-studio .studio-preview-3d,.mp-studio .studio-scene[data-primary="3d"] .studio-2d{width:172px;height:156px}
 .mp-studio .studio-scene[data-primary="3d"] .studio-view-tools{right:194px}
}
@media(max-width:680px){
 .mp-studio .studio-scene{height:440px}
 .mp-studio .studio-preview-3d,.mp-studio .studio-scene[data-primary="3d"] .studio-2d{width:140px;height:132px;right:10px;bottom:10px}
 .mp-studio .studio-scene[data-primary="3d"] .studio-preview-3d{inset:0;width:auto;height:auto}
 .mp-studio .studio-scene[data-primary="3d"] .studio-view-tools{right:156px;bottom:10px;gap:4px}
 .mp-studio .studio-view-tools button{padding:8px;font-size:var(--atelier-text-xs)}
 .mp-studio .studio-mini-switch{font-size:var(--atelier-text-xs)}
}
.mp-studio .studio-mini-switch{padding:0}
.studio-mini-switch>span{display:block;box-sizing:border-box;width:100%;padding:8px 4px;background:color-mix(in srgb, var(--atelier-soft) 91%, transparent);border-top:1px solid color-mix(in srgb, var(--atelier-line) 50%, transparent)}
@media(max-width:680px){
 .mp-studio:not(.atelier) .studio-scene[data-primary="3d"] .studio-preview-3d .studio-3d{height:calc(100% - 132px)}
}
.atelier-faces{display:flex;gap:4px}
.mp-studio .atelier-faces button{display:inline-flex;align-items:center;gap:8px;padding:4px 12px 4px 4px;min-height:40px;font-size:var(--atelier-text-xs);background:transparent;border-color:var(--atelier-line)}
.mp-studio .atelier-faces button[aria-pressed=true]{background:var(--atelier-ink);color:var(--atelier-paper);border-color:var(--atelier-ink)}
.atelier-faces canvas{width:30px;height:34px;background:var(--atelier-soft);border-radius:var(--atelier-radius-control);display:block}
.atelier-stage{display:grid;grid-template-rows:minmax(0,1fr) auto auto auto;min-width:0;min-height:0;background:var(--atelier-soft)}
.mp-studio.atelier .studio-scene{height:auto;min-height:0}
.atelier-canvas-tools{display:flex;align-items:center;gap:12px;padding:4px 12px;background:var(--atelier-paper);border-top:1px solid var(--atelier-line);flex-wrap:wrap;font-size:var(--atelier-text-xs);color:var(--atelier-muted)}
.atelier-canvas-tools>div{display:inline-flex;align-items:center;gap:2px}
.mp-studio .atelier-canvas-tools button{min-height:36px;padding:4px 12px;font-size:var(--atelier-text-xs);background:transparent;border-color:var(--atelier-line)}
.mp-studio .atelier-canvas-tools button[aria-pressed=true]{background:var(--atelier-ink);color:var(--atelier-paper);border-color:var(--atelier-ink)}
.atelier-canvas-tools [data-zoom]{min-width:44px;text-align:center;font-variant-numeric:tabular-nums}
.atelier .studio-dimensions{padding:0;margin-left:auto;background:transparent}
.atelier .studio-status{margin:0;padding:8px 12px 8px;background:var(--atelier-paper);min-height:30px}
.atelier-empty{position:absolute;inset:0;display:grid;place-items:center;text-align:center;color:var(--atelier-muted);font-size:var(--atelier-text-md);line-height:1.5;pointer-events:none;padding:24px}
.atelier-loading{position:absolute;inset:0;display:grid;place-content:center;justify-items:center;gap:12px;background:color-mix(in srgb, var(--atelier-paper) 80%, transparent);color:var(--atelier-ink);font-size:var(--atelier-text-sm);z-index:4}
.atelier-loading span{width:28px;height:28px;border:3px solid color-mix(in srgb, var(--atelier-ink) 20%, transparent);border-top-color:var(--atelier-ink);border-radius:50%;animation:atelier-spin .9s linear infinite}
.studio-2d.is-dragover{outline:3px dashed var(--atelier-ink);outline-offset:-10px}
.mp-studio.atelier .studio-preview-3d{right:14px;bottom:14px}
.mp-studio.atelier .studio-scene[data-primary="3d"] .studio-view-tools{right:236px;flex-wrap:wrap}
.mp-studio.atelier .studio-scene[data-primary="3d"] .studio-view-tools button{background:var(--atelier-paper);border-color:var(--atelier-line)}
.mp-studio.atelier.no-3d .studio-preview-3d{display:none}
@media(max-width:760px){
 .atelier-faces{order:4;margin-left:auto}
 .atelier-stage{grid-row:1;grid-template-rows:minmax(0,1fr) auto auto auto}
 .atelier .studio-scene[data-primary=edit] .studio-preview-3d{display:none}
 .atelier .studio-status{white-space:nowrap;overflow:hidden;text-overflow:ellipsis;padding:4px 12px;min-height:0;font-size:var(--atelier-text-xs)}
 .atelier-canvas-tools{padding:4px 8px;gap:8px}
 .atelier .studio-dimensions{display:none}
 .mp-studio.atelier .studio-preview-3d{width:112px;height:104px;right:8px;bottom:8px}
 .mp-studio.atelier .studio-scene[data-primary="3d"] .studio-2d{width:112px;height:104px;right:8px;bottom:8px}
 .mp-studio.atelier .studio-scene[data-primary="3d"] .studio-view-tools{right:128px;bottom:8px;left:8px;justify-content:flex-start;gap:4px}
}
@media(max-width:400px){
 .atelier-faces canvas{display:none}
 .mp-studio .atelier-faces button{padding:4px 8px}
}
/* Guided creation: one shape, a collection of independent printed designs. */
.atelier-stage{grid-template-rows:auto auto minmax(0,1fr) auto auto auto}
.atelier-face-actions{display:flex;align-items:center;gap:12px;padding:8px 12px;background:var(--atelier-paper);border-bottom:1px solid var(--atelier-line);font-size:var(--atelier-text-xs)}
.atelier-face-actions span{color:var(--atelier-muted)}
.atelier-guide{margin:0;padding:8px 16px;font-size:var(--atelier-text-sm);line-height:1.45;background:var(--atelier-paper);color:var(--atelier-ink)}
.atelier .studio-scene{position:relative}
.atelier-feedback{position:absolute;top:12px;left:12px;right:12px;max-width:510px;z-index:9;background:var(--atelier-soft);border:1px solid var(--atelier-line);border-radius:var(--atelier-radius-card);padding:16px;color:var(--atelier-ink);max-height:calc(100% - 24px);overflow:auto;font-size:var(--atelier-text-md);line-height:1.5}
.atelier-feedback[hidden],.atelier-feedback button[hidden],.atelier-geometry-state[hidden]{display:none}
.atelier-feedback p{margin:8px 0 12px}
.atelier-feedback>div{display:flex;gap:8px;flex-wrap:wrap}
.atelier-geometry-state{position:absolute;bottom:8px;left:8px;z-index:2;background:var(--atelier-soft);color:var(--atelier-ink);padding:8px 12px;font-size:var(--atelier-text-xs);border-radius:var(--atelier-radius-control)}
.atelier .studio-status{white-space:normal;overflow:visible;text-overflow:clip;font-size:var(--atelier-text-sm);line-height:1.4}
@media(max-width:760px){
 .atelier-stage{grid-template-rows:auto auto minmax(0,1fr) auto auto auto}
 .atelier-face-actions{padding:4px 8px}
 .atelier-face-actions span{display:none}
 .atelier-guide{padding:8px 12px;font-size:var(--atelier-text-xs);line-height:1.35}
 .atelier-faces{order:4}
 .atelier .studio-status:not(.is-error){display:none}
 .atelier-feedback{top:4px;left:4px;right:4px;padding:12px;max-height:calc(100% - 8px)}
 .atelier.has-panel .atelier-guide{display:none}
}
.atelier-stage>.atelier-face-actions{grid-row:1}
.atelier-stage>.atelier-guide{grid-row:2}
.atelier-stage>.studio-scene{grid-row:3;min-height:170px}
.atelier-stage>.atelier-canvas-tools{grid-row:4}
.atelier-stage>.studio-status{grid-row:5}
.atelier-stage{background:var(--atelier-soft);grid-template-rows:auto auto minmax(170px,1fr) auto auto auto auto auto}
.atelier-face-actions{justify-content:center;gap:24px;border:0;background:transparent;padding:16px 16px 2px}
.atelier-faces{padding:4px;gap:2px;background:var(--atelier-soft);border-radius:var(--atelier-radius-card)}
.atelier-faces canvas{width:23px;height:28px;background:transparent}
.atelier-guide{text-align:center;background:transparent;color:var(--atelier-muted);font-size:var(--atelier-text-xs);padding:8px 24px 12px}
.atelier-canvas-tools{justify-content:center;gap:8px;background:transparent;border:0;padding:8px 16px;color:var(--atelier-muted)}
.atelier .studio-dimensions{display:none}
.atelier .studio-status{background:transparent;text-align:center;font-size:var(--atelier-text-xs);padding:2px 16px 8px;min-height:0}
.atelier .studio-status:empty{display:none}
.mp-studio .studio-preview-3d{border:1px solid var(--atelier-line);border-radius:var(--atelier-radius-card)}
.mp-studio .studio-mini-switch>span{font-size:var(--atelier-text-xs);border-radius:0 0 var(--atelier-radius-card) var(--atelier-radius-card);background:color-mix(in srgb, var(--atelier-paper) 93%, transparent);color:var(--atelier-ink)}
@media(max-width:760px){
 .atelier-stage{grid-template-rows:auto auto minmax(170px,1fr) auto auto auto auto auto}
 .atelier-face-actions{padding:8px 12px 2px;gap:16px}
 .atelier-faces{margin:0;order:0;padding:2px}
 .atelier-faces canvas{display:none}
 .atelier-guide{font-size:var(--atelier-text-xs);padding:4px 16px 8px}
 .atelier.has-panel .atelier-guide{display:none}
 .atelier-canvas-tools{padding:2px 8px;gap:8px}
 .atelier .studio-status{display:none}
}
.atelier-face-actions .atelier-faces span{display:inline;color:inherit}
.mp-studio.atelier .studio-scene[data-primary="3d"] .studio-view-tools{left:16px;right:236px;gap:12px;align-items:center;padding:0;flex-direction:column}
.atelier-view-segment{display:flex;gap:2px;padding:0;background:transparent;border:0;box-shadow:none}
.atelier-display{position:relative;font-size:var(--atelier-text-xs)}
.atelier-display>summary{cursor:pointer;list-style:none;min-height:36px;align-content:center;padding:4px 12px;border-radius:var(--atelier-radius-card);background:color-mix(in srgb, var(--atelier-paper) 50%, transparent)}
.atelier-display p{font-size:var(--atelier-text-xs);line-height:1.5;margin:12px 0 0;color:var(--atelier-muted)}
.atelier .atelier-empty{padding:var(--atelier-space-2);z-index:3;pointer-events:none}
.atelier-empty>div{background:color-mix(in srgb, var(--atelier-paper) 96%, transparent);border:1px solid var(--atelier-line);border-radius:var(--atelier-radius-card);padding:12px 16px;max-width:360px;pointer-events:auto}
.atelier-empty h2{font:600 var(--atelier-text-2xl)/1.2 var(--font-edito-body,system-ui);letter-spacing:-.6px;color:var(--atelier-ink);margin:12px 0 4px}
.atelier-empty p{font-size:var(--atelier-text-md);line-height:1.5;margin:12px 0 16px}
.atelier-empty small{display:block;font-size:var(--atelier-text-xs);color:var(--atelier-muted);margin-top:12px}
/* 07/10 : comment se commande la gamme (« à l'unité », « dès 6 pièces »), une ligne sous le titre ; un <small> reste affiché sur
   téléphone, où le texte d'accueil (p) est masqué. De l'air avant le premier choix. */
.atelier-empty small[data-start-minimum]{margin:0 0 8px}
.atelier-empty [data-layout=photo]+small{margin-top:4px}
.atelier-stage{position:relative}
.atelier .studio-status{position:absolute;bottom:150px;left:50%;transform:translateX(-50%);z-index:8;background:color-mix(in srgb, var(--atelier-paper) 95%, transparent);border:1px solid var(--atelier-line);border-radius:var(--atelier-radius-card);padding:12px 16px;font-size:var(--atelier-text-sm);line-height:1.5;max-width:480px;width:max-content;max-width:min(480px,calc(100% - 32px));pointer-events:none}
.atelier.is-empty .studio-status,.atelier .studio-status.is-error{display:none}
.atelier.is-empty .atelier-guide{visibility:hidden}
@media(max-width:760px){
 .mp-studio.atelier .studio-scene[data-primary="3d"] .studio-view-tools{left:8px;right:8px;bottom:8px;align-items:flex-start;gap:8px}
 .atelier-empty>div{padding:8px 16px;border-radius:var(--atelier-radius-card)}
 .atelier-empty h2{font-size:var(--atelier-text-xl)}
 .atelier-empty p{font-size:var(--atelier-text-xs);margin:8px 0 12px}
 .atelier-empty small{font-size:var(--atelier-text-xs);margin-top:8px}
 .atelier .studio-status:not(.is-error){display:block;bottom:120px;font-size:var(--atelier-text-xs);padding:12px 16px}
 .atelier.is-empty .studio-status:not(.is-error){display:none}
}
.atelier .atelier-feedback{background:var(--atelier-paper);color:var(--atelier-ink);border:1px solid var(--atelier-line);border-radius:var(--atelier-radius-card);padding:24px;max-width:440px}
.atelier-feedback strong{font-size:var(--atelier-text-xl)}
.atelier-feedback p{color:var(--atelier-muted);font-size:var(--atelier-text-md);line-height:1.6}
.atelier-feedback strong{display:block;padding-right:24px}
.atelier.is-3d .atelier-stage>.atelier-canvas-tools{display:none}
@media(max-width:760px){
 .atelier .atelier-feedback{padding:16px}
 .atelier-feedback strong{font-size:var(--atelier-text-lg)}
}
.atelier-face-actions{display:grid;grid-template-columns:1fr auto 1fr;gap:16px}
.atelier-face-actions .atelier-faces{grid-column:2;justify-self:center}
.atelier-face-actions>[data-action=copy-front]{grid-column:3;justify-self:start}
@media(max-width:760px){
 .atelier-face-actions{grid-template-columns:1fr;gap:0}
 .atelier-face-actions .atelier-faces{grid-column:1;grid-row:1}
}
/* Direct manipulation controls and contextual information. */
.atelier .atelier-feedback{border:1px solid var(--atelier-line)}
.mp-studio .atelier-canvas-tools .atelier-display{margin:0;padding:0;border:0;align-self:center}
.mp-studio .atelier-canvas-tools .atelier-display>summary{margin:0;padding:0 12px;display:flex;align-items:center;min-height:36px;height:36px;border:0}
.atelier-notice{position:absolute;top:14px;left:14px;width:min(330px,calc(100% - 28px));z-index:8;background:var(--atelier-paper);border:1px solid var(--atelier-line);border-radius:var(--atelier-radius-card);padding:16px;color:var(--atelier-ink)}
.atelier-notice[hidden]{display:none}
.atelier-notice strong{display:block;padding-right:24px;font-size:var(--atelier-text-lg);line-height:1.4}
.atelier-notice p{font-size:var(--atelier-text-sm);line-height:1.6;margin:8px 0 12px}
@media(max-width:760px){
 .atelier-notice{top:8px;left:8px;width:calc(100% - 16px);padding:12px}
 .atelier-notice p{font-size:var(--atelier-text-xs);line-height:1.4}
 .atelier-notice strong{font-size:var(--atelier-text-md)}
}
.atelier-guide>p{margin:8px 0}
.atelier-zone-panel[hidden]{display:none}
.atelier-zone-panel{display:grid;justify-items:center;gap:4px;padding:2px 8px 4px}
.atelier-zone-panel>div{display:flex;gap:4px;padding:4px;border-radius:var(--atelier-radius-card);background:var(--atelier-soft)}
.atelier-zone-panel p{font-size:var(--atelier-text-xs);color:var(--atelier-ink);margin:0}
.atelier .atelier-guide:has(.atelier-zone-panel:not([hidden])){visibility:visible}
@media(max-width:760px){
 .atelier-zone-panel{padding:0 4px 4px}
 .atelier-zone-panel p{font-size:var(--atelier-text-xs)}
}
.studio-spin-hint{display:none;position:absolute;bottom:18px;left:16px;right:16px;margin:0;text-align:center;font-size:var(--atelier-text-xs);line-height:1.5;color:var(--atelier-muted);pointer-events:none}
.studio-spin-hint span{display:block;font-size:var(--atelier-text-xs);margin-top:8px}
.studio-scene[data-primary="3d"] .studio-spin-hint{display:block}
.atelier-spin-centre svg{width:20px;height:20px;fill:none;stroke:currentColor;stroke-width:1.5}
.atelier-stage>.studio-view-tools>.studio-spin-hint{position:static;display:flex;flex-basis:100%;align-items:center;justify-content:center;gap:12px;flex-wrap:wrap}
.atelier-stage>.studio-view-tools>.studio-spin-hint span{margin:0}
.atelier-step-number{display:inline-grid;place-items:center;width:24px;height:24px;border-radius:50%;background:var(--atelier-soft);font-size:var(--atelier-text-sm);margin-right:8px}
.atelier-zone-panel button[aria-pressed=true] .atelier-step-number{background:var(--atelier-ink);color:var(--atelier-paper)}
.atelier-zone-panel [role=group]{flex-wrap:wrap;justify-content:center}
@media(max-width:760px){
 .atelier-stage{min-width:0;min-height:0;overflow-y:auto}
 .atelier-stage{grid-template-rows:auto auto minmax(120px,1fr) auto auto auto auto auto}
 .atelier-stage>.studio-scene{min-height:120px}
 .atelier.has-panel .atelier-guide:has(.atelier-zone-panel:not([hidden])){display:block}
 .atelier.has-panel .atelier-guide>[data-guide],.atelier.has-panel [data-zone-description]{display:none}
}
@media(max-width:760px) and (max-height:640px){
 .atelier-stage{grid-template-rows:auto auto minmax(140px,1fr) auto auto auto auto auto}
 .atelier-stage>.studio-scene{min-height:140px}
}
.atelier .studio-status:empty,.atelier-stage:has(.atelier-notice:not([hidden])) .studio-status{display:none}
.atelier-start-layouts{display:grid;grid-template-columns:1fr 1fr;gap:8px;margin:16px 0}
.atelier-start-text{display:grid;gap:4px;margin:0 0 12px;font-size:var(--atelier-text-xs);color:var(--atelier-muted)}
.atelier-start-text input{min-height:42px;padding:8px;border:1px solid var(--atelier-line);border-radius:var(--atelier-radius-control);background:var(--atelier-paper);color:var(--atelier-ink);font:inherit}
@media(min-width:761px) and (max-height:640px){
 .atelier-stage{overflow-y:auto;grid-template-rows:auto auto minmax(140px,1fr) auto auto auto auto auto}
 .atelier-stage>.studio-scene{min-height:140px}
}
@media(max-width:760px){
 .atelier-stage>.studio-view-tools>.studio-spin-hint{display:contents}
 .atelier-stage>.studio-view-tools>.studio-spin-hint span{display:none}
 .studio-view-tools:has(.studio-spin-hint) .atelier-view-segment{grid-column:1/-1;grid-row:1;justify-content:center}
 .atelier-spin-centre svg{flex-shrink:0;width:18px;height:18px}
}
/* One clear first step, with text compositions available on demand. */
.atelier-empty>div{box-sizing:border-box;max-height:100%;overflow-y:auto}
.atelier-empty h2{margin-top:0}
.atelier-start-text-options{margin-top:16px;text-align:left}
.atelier-start-text-options summary{cursor:pointer;color:var(--atelier-ink);font-size:var(--atelier-text-sm);min-height:36px;padding:8px 0;box-sizing:border-box}
.atelier-start-text-options .atelier-start-text{margin-top:12px;font-size:var(--atelier-text-xs)}
.atelier-start-text-options .atelier-start-layouts{grid-template-columns:1fr;margin:12px 0 0}
.atelier-start-layouts [data-layout=photo-caption]{grid-column:1/-1}
@media(max-width:760px){
/* Free space for the first action; face controls return after creation. */
 .atelier-stage:has([data-empty]:not([hidden]))>.atelier-face-actions{display:none}
 .atelier-start-text input{font-size:var(--atelier-text-lg)}
 .atelier-stage:has([data-empty]:not([hidden]))>.atelier-guide{display:none}
 .atelier-stage:has([data-empty]:not([hidden]))>.studio-scene{min-height:280px}
 .atelier-face-actions{display:flex;flex-wrap:wrap;gap:0 12px;padding:4px 8px}
 .atelier .studio-status:not(.is-error){position:static;grid-row:7;transform:none;width:auto;max-width:none;border:0;border-radius:0;box-shadow:none;margin:0;padding:4px 12px;font-size:var(--atelier-text-xs);white-space:normal;line-height:1.4;background:transparent}
 .atelier.is-empty .studio-status:not(.is-error){display:none}
}
@media(min-width:761px) and (max-height:640px){
 .atelier-stage:has([data-empty]:not([hidden]))>:is(.atelier-face-actions,.atelier-guide){display:none}
 .atelier-stage:has([data-empty]:not([hidden]))>.studio-scene{min-height:280px}
}
@media(max-width:760px){
 .mp-mirror.atelier .atelier-face-actions{padding:2px 8px}
 .mp-mirror.atelier .atelier-guide{padding:4px 16px}
 .mp-mirror.atelier .atelier-zone-panel{padding:0 0 2px}
 .mp-mirror.atelier .atelier-zone-panel [role=group]{flex-wrap:nowrap;max-width:100%}
 .mp-mirror.atelier .atelier-step-number{width:20px;height:20px;margin-right:8px;font-size:var(--atelier-text-xs)}
/* WCAG 2.4.11: a control focused in the scrolling stage is never left under the design strip. */
 .mp-mirror.atelier .atelier-stage{scroll-padding-bottom:64px}
}
@media(max-width:760px) and (max-height:700px){
 .mp-mirror.atelier [data-zone-description]{display:none}
 .mp-mirror.atelier .atelier-guide>[data-guide]{margin:0 0 4px}
 .mp-mirror.atelier.has-panel .atelier-canvas-tools{display:none}
 .mp-mirror.atelier .studio-status:not(.is-error){display:none}
}
@media(max-width:459px){
/* Short step labels only where the three mirror steps would not fit on one line; the full name stays for screen readers. */
 .mp-mirror.atelier [role=group]:has(>:nth-child(3)) .atelier-step-more{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
}
@media(pointer:coarse){
 .atelier-hint-fine{display:none}
}
/* A blank creation on the start screen: the message goes inside the card, which already offers the image and the text. */
.atelier-empty-alert{margin:0 0 12px;padding:12px 12px;border:1px solid var(--atelier-line);border-radius:var(--atelier-radius-card);background:var(--atelier-soft);color:var(--atelier-ink);font-size:var(--atelier-text-md);line-height:1.45;text-align:left}
.atelier-empty-alert:empty{display:none}
@media(min-width:561px) and (max-height:500px){
/* Short screens from 561 px wide (phone in landscape, desktop at 200 % zoom): steps and hints give way to the
   creation, which keeps 200 px; from 561 to 760 px the header fits on one row. Phones held upright are unchanged. */
 .mp-mirror.atelier :is([data-zone-description],.atelier-guide>[data-guide]){display:none}
 .mp-mirror.atelier .atelier-face-actions{padding:2px 8px}
 .mp-mirror.atelier .atelier-guide{padding:0 16px 2px}
 .mp-mirror.atelier .atelier-zone-panel{padding:0}
 .mp-mirror.atelier .atelier-zone-panel [role=group]{flex-wrap:nowrap;max-width:100%}
 .mp-mirror.atelier [role=group]:has(>:nth-child(3)) .atelier-step-more{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
 .mp-mirror.atelier .studio-status:not(.is-error){display:none}
 .mp-mirror.atelier .atelier-stage{grid-template-rows:auto auto minmax(200px,1fr) auto auto auto auto auto}
 .mp-mirror.atelier .atelier-stage>.studio-scene{min-height:200px}
}
@media(min-width:761px) and (max-height:500px){
/* Phone in landscape, wider than 760 px: the start card needs more than the 200 px kept for a creation, or its
   « Choisir mon image » is cut at the bottom of the scene, under the 3D preview. */
 .mp-mirror.atelier .atelier-stage:has([data-empty]:not([hidden]))>.studio-scene{min-height:280px}
}
/* While the draft question is asked, the start card does not compete with it. */
.mp-studio.atelier:has(>[data-resume][open]) .studio-2d>[data-empty]{display:none}
/* Start card (plan 4): visuals already in the selection, one tap to reuse. */
.atelier-reuse{margin:12px 0 0;text-align:left}
.atelier-reuse>p{margin:0 0 8px;font-size:var(--atelier-text-xs);color:var(--atelier-muted)}
.atelier-reuse-list{display:flex;flex-wrap:wrap;gap:8px}
.mp-studio.atelier .atelier-reuse-list button{display:flex;align-items:center;gap:8px;min-height:44px;max-width:100%;padding:4px 12px 4px 4px;border:1px solid var(--atelier-line);border-radius:var(--atelier-radius-card);background:var(--atelier-paper);color:var(--atelier-ink);font:inherit;font-size:var(--atelier-text-xs);pointer-events:auto;cursor:pointer}
.atelier-reuse-list img{width:36px;height:36px;object-fit:contain;background:var(--atelier-soft);border-radius:var(--atelier-radius-control)}
.atelier-reuse-list span{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;max-width:140px}
@media(min-width:761px) and (max-height:500px),(min-width:761px) and (max-width:1180px){
/* Plan 3 leftovers (plan 4). Short landscape screens: the reduced 3D preview covered the right edge of « Choisir mon image »
   while the start card is shown; an empty creation has nothing to show in 3D yet. Same on tablets and small laptops
   (up to 1180 px), where the centred start card reaches the preview in the corner. */
 .mp-studio.atelier.is-empty .studio-scene[data-primary=edit] .studio-preview-3d{display:none}
}
@media (hover:hover){
 .mp-studio.atelier .atelier-zone-panel button:hover:not(:disabled,[aria-pressed=true]){color:var(--atelier-ink);background:color-mix(in srgb,var(--atelier-paper) 55%,transparent)}
}
@media(min-width:761px) and (max-width:1180px){
/* Revue d'affichage 25/09. Tablette et petit portable : le message d'état flotte au centre de la zone laissée libre à
   gauche de l'aperçu 3D réduit, au lieu de recouvrir son libellé « Aperçu 3D · Agrandir ». */
 .mp-studio.atelier:not(.no-3d) .studio-status{left:16px;right:240px;transform:none;margin-inline:auto;width:fit-content;max-width:none}
}
@media(max-width:760px){
/* Téléphone : un message d'ajustement (ou d'information) sur la création garde la place de ses boutons ; la zone
   de création s'agrandit, la colonne défile, au lieu de cacher « Ajuster automatiquement » sous les outils de zoom. */
 .mp-mirror.atelier .atelier-stage:has(>.studio-scene :is(.atelier-feedback,.atelier-notice):not([hidden])){grid-template-rows:auto auto minmax(300px,1fr) auto auto auto auto auto}
}
/* Le badge « Aperçu précédent… » (bas gauche de la création) s'arrête avant l'aperçu réduit du coin bas droit (3D en
   édition, 2D en vue 3D) et passe à la ligne ; le message d'état flottant se pose au-dessus de lui au lieu de le couvrir. */
.mp-studio.atelier .atelier-geometry-state{max-width:calc(100% - 256px);box-sizing:border-box}
@media(max-width:900px){
 .mp-studio.atelier .atelier-geometry-state{max-width:calc(100% - 204px)}
}
@media(max-width:760px){
 .mp-studio.atelier .atelier-geometry-state{max-width:calc(100% - 136px)}
}
@media(min-width:761px){
 .atelier-stage:has(.atelier-geometry-state:not([hidden])) .studio-status{bottom:212px}
}
/* Écran de départ des classiques (décision du 25/09) : trois points de départ de même poids, « Un prénom par boule » en tête. */
.atelier-start-names{margin:0 0 4px;text-align:left}
.atelier-empty :is(.atelier-start-names,.atelier-start-text-options)>summary::-webkit-details-marker{display:none}
.mp-studio.atelier .atelier-empty .atelier-start-text-options{margin-top:0}
.atelier-start-names .atelier-start-text{margin:12px 0 0;font-size:var(--atelier-text-xs)}
.mp-studio.atelier .atelier-empty .atelier-start-help{margin:8px 0 12px;font-size:var(--atelier-text-xs);line-height:1.45;text-align:left}
.mp-studio.atelier .atelier-empty .atelier-start-names-go{width:100%}
@media(max-width:760px){
 .mp-studio.atelier .atelier-empty>div>p:not(.atelier-empty-alert):not(.atelier-start-help){display:none}
 .atelier-empty h2{margin-bottom:4px}
}
@media(max-height:500px){
 .mp-studio.atelier .atelier-empty>div>p:not(.atelier-empty-alert):not(.atelier-start-help){display:none}
 .mp-studio.atelier .atelier-empty h2{font-size:var(--atelier-text-xl);margin-bottom:4px}
 .mp-studio.atelier .atelier-empty>div{padding-block:12px}
}
@media(min-width:761px){
 .atelier-body>.atelier-stage{grid-column:2;grid-row:1/3}
}
/* Traque du 27/09 : tout ce qui apparaît reste entier à l'écran. */
/* Téléphone : la carte d'alerte se pose sous l'en-tête (top et max-height calculés par studio.mjs, placeFeedback). */
/* La notice flottante reste seule : le message d'état ne la recouvre pas (comme dans la scène). */
.mp-studio.atelier:has(>.atelier-notice:not([hidden])) .studio-status{display:none}
.mp-studio.atelier :is(.atelier-feedback,.atelier-notice).is-floating{position:fixed;left:8px;right:8px;width:auto;max-width:none;margin:0;z-index:40;overflow:auto}
@media(max-width:760px){
/* Téléphone : le message d'état (« Visuel prêt… », « Design retiré… ») s'affiche sous l'en-tête, par-dessus la composition,
   au lieu d'une rangée écrasée à 8 px dont le texte débordait sur la ligne du pied. Sans pointeur : ce qu'il recouvre reste
   utilisable. --atelier-header-bottom est tenu à jour par studio.mjs. */
 .mp-mirror.atelier .atelier-stage>.studio-status:not(.is-error){position:fixed;top:calc(var(--atelier-header-bottom,100px) + 6px);bottom:auto;left:8px;right:8px;transform:none;width:auto;max-width:none;z-index:39;margin:0;padding:8px 12px;min-height:0;border:1px solid var(--atelier-line);border-radius:var(--atelier-radius-control);background:color-mix(in srgb,var(--atelier-paper) 96%,transparent);box-shadow:none;white-space:normal;pointer-events:none;text-align:center}
}
/* Menus : ouverts du côté où ils tiennent (studio.mjs, keepMenuInView). */
.atelier-display.opens-down>div{top:calc(100% + 8px);bottom:auto}
/* F02 (audit du 27/09) : « Un prénom par boule » ouvert, « Créer mes boules » reste visible. Le bouton se tient au bas de la
   carte qui défile (filet au-dessus : la carte continue dessous). Sur un écran bas (portable, téléphone à l'horizontale), la
   carte ne garde que ce choix et un champ de trois lignes ; refermer le choix rend les autres départs. Plan 03b : même règle
   pour « Mon logo et un prénom par boule » (même classe), l'autre choix de prénoms se masque aussi. */
.mp-studio.atelier .atelier-start-names-foot{position:sticky;bottom:-14px;margin:0 0 -16px;padding:8px 0 16px;background:var(--atelier-paper);border-top:1px solid var(--atelier-line)}
@media(max-height:820px){
 .mp-studio.atelier .atelier-empty>div:has(>.atelier-start-names[open]){padding-block:16px}
}
/* ---- R1. Une zone réservée aux messages, entre la composition et la ligne du zoom ----
   Le message temporaire (studio-status) et l'alerte « Une partie du visuel ne sera pas imprimée » (atelier-notice) y
   vivent. Retour de Robin du 29/09 (saccade : la boule rétrécissait tant qu'un message de deux lignes ou l'alerte était
   affiché, puis regrandissait) : la zone a une hauteur fixe, toujours réservée, comme la barre d'état de Canva ou de
   Figma ; le message y tient sur deux lignes au plus (le texte entier est lu par la région polie de l'atelier), l'alerte
   sur une rangée (titre, « Vérifier en 3D », fermer ; son explication reste lue, role=status). La boule ne change
   jamais de taille quand un message apparaît ou disparaît. */
.mp-studio.mp-mirror.atelier .atelier-stage>.atelier-messages{grid-row:4;display:flex;flex-direction:column;justify-content:center;min-width:0;height:52px;box-sizing:border-box;overflow:hidden}
.mp-studio.mp-mirror.atelier .atelier-messages>.studio-status{position:static;display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:2;visibility:hidden;transform:none;width:auto;max-width:none;min-height:0;margin:0;padding:8px 16px;border:0;border-radius:0;box-shadow:none;background:transparent;color:var(--atelier-ink);font-size:var(--atelier-text-sm);line-height:1.4;text-align:center;white-space:normal;overflow:hidden}
.mp-studio.mp-mirror.atelier:not(.is-empty) .atelier-messages>.studio-status:not(.is-error):not(:empty){visibility:visible}
/* Alerte ouverte : le message s'efface, l'alerte prend la zone. */
.mp-studio.mp-mirror.atelier .atelier-messages:has(>.atelier-notice:not([hidden]))>.studio-status:is(:empty,:not(.is-error)){display:none}
.mp-studio.mp-mirror.atelier .atelier-messages>.atelier-notice{position:relative;inset:auto;z-index:auto;box-sizing:border-box;width:auto;max-width:720px;margin:0 16px;align-self:center;padding:0 48px 0 16px;box-shadow:none}
.mp-studio.mp-mirror.atelier .atelier-messages>.atelier-notice:not([hidden]){display:grid;grid-template-columns:minmax(0,1fr) auto;column-gap:12px;align-items:center;height:48px}
.mp-studio.mp-mirror.atelier .atelier-messages>.atelier-notice[hidden]{display:none}
.mp-studio.mp-mirror.atelier .atelier-messages>.atelier-notice strong{grid-column:1;padding-right:0;font-size:var(--atelier-text-md);line-height:1.3;overflow:hidden;display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:2}
.mp-studio.mp-mirror.atelier .atelier-messages>.atelier-notice p{position:absolute;width:1px;height:1px;margin:0;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.mp-studio.mp-mirror.atelier .atelier-messages>.atelier-notice [data-action=notice-3d]{grid-column:2;margin:0;white-space:nowrap}
@media(max-width:760px){
/* Téléphone : zone de 48 px (deux lignes de 12 px, ou l'alerte et ses boutons de 44 px). */
 .mp-studio.mp-mirror.atelier .atelier-stage>.atelier-messages{height:48px}
 .mp-studio.mp-mirror.atelier .atelier-messages>.studio-status{padding:4px 12px;font-size:var(--atelier-text-xs)}
 .mp-studio.mp-mirror.atelier .atelier-messages>.atelier-notice{margin:0 8px;padding:0 48px 0 12px}
 .mp-studio.mp-mirror.atelier .atelier-messages>.atelier-notice:not([hidden]){height:46px}
 .mp-studio.mp-mirror.atelier .atelier-messages>.atelier-notice strong{font-size:var(--atelier-text-xs)}
}
@media(max-width:760px) and (max-height:700px){
/* Téléphone de moins de 700 px de haut : comme avant (editor.css, plan 2), le message temporaire ne prend pas de place à
   l'écran (il reste lu par la région polie de l'atelier) et la zone n'est pas réservée : la composition garde sa hauteur.
   L'alerte se pose par-dessus le bas de la scène, au-dessus de la ligne du zoom, sans la redimensionner. */
 .mp-studio.mp-mirror.atelier .atelier-stage>.atelier-messages{height:0;overflow:visible;position:relative;z-index:8}
 .mp-studio.mp-mirror.atelier .atelier-messages>.studio-status{display:none}
 .mp-studio.mp-mirror.atelier .atelier-messages>.atelier-notice:not([hidden]){position:absolute;left:0;right:0;bottom:4px;background:var(--atelier-paper)}
}
/* ---- R1. La vignette « Aperçu 3D » a sa colonne dans la scène, à côté de la boule ----
   La scène devient une grille : la composition à gauche, la vignette en bas à droite. En 3D, les rôles s'échangent
   (vue 3D à gauche, vignette « Édition 2D » à droite). Scène étroite ou basse : la vignette devient une barre
   « Aperçu 3D » sous la boule, et la vignette « Édition 2D » disparaît en 3D (« Modifier mon design » reste). La taille
   de la boule suit : fabric-editor.mjs observe la composition (ResizeObserver). */
.mp-studio.mp-mirror.atelier .studio-scene{display:grid;grid-template-columns:minmax(0,1fr) auto;grid-template-rows:minmax(0,1fr) auto;container:atelier-scene/size}
.mp-studio.mp-mirror.atelier .studio-scene>.studio-2d{position:relative;inset:auto;grid-area:1/1/3/2;width:auto;height:auto;margin:0}
.mp-studio.mp-mirror.atelier .studio-scene>.studio-preview-3d{position:relative;inset:auto;grid-area:2/2/3/3;width:210px;height:190px;margin:0 16px 16px 0}
.mp-studio.mp-mirror.atelier .studio-scene[data-primary="3d"]>.studio-preview-3d{grid-area:1/1/3/2;width:auto;height:auto;margin:0}
.mp-studio.mp-mirror.atelier .studio-scene[data-primary="3d"]>.studio-2d{grid-area:2/2/3/3;width:210px;height:190px;margin:0 16px 16px 0}
@media(min-width:761px) and (min-height:360px){
/* F18 (plan 04) : en 3D, boutons de vue et message prennent la largeur de la colonne de la boule (la vignette « Édition 2D »
   occupe 226 px à droite) et s'y centrent, marges intérieures inchangées. Scène étroite : jamais moins de 748 px (boutons du
   miroir, les plus larges, sur une ligne) ; scène de 748 px ou moins (dont la scène sans vignette) : toute la largeur. */
 .mp-studio.mp-mirror.atelier.is-3d .atelier-stage>:is(.studio-view-tools,.atelier-messages){box-sizing:border-box;justify-self:start;width:max(min(100%,748px),100% - 226px)}
}
@container atelier-scene (max-width:600px) or (max-height:230px){
 .mp-studio.mp-mirror.atelier .studio-scene[data-primary=edit]>.studio-2d{grid-area:1/1/2/3}
 .mp-studio.mp-mirror.atelier .studio-scene[data-primary=edit]>.studio-preview-3d{grid-area:2/1/3/3;width:auto;height:44px;margin:0;border:0;border-top:1px solid var(--atelier-line);border-radius:0;box-shadow:none;background:var(--atelier-paper)}
 .mp-studio.mp-mirror.atelier .studio-scene[data-primary=edit]>.studio-preview-3d>.studio-3d{visibility:hidden}
 .mp-studio.mp-mirror.atelier .studio-scene[data-primary="3d"]>.studio-preview-3d{grid-area:1/1/3/3}
 .mp-studio.mp-mirror.atelier .studio-scene[data-primary="3d"]>.studio-2d{display:none}
}
@media(max-height:540px){
 .mp-studio.mp-mirror.atelier .atelier-stage{align-self:start;overflow:visible;grid-template-rows:auto auto auto auto auto auto auto auto}
 .mp-studio.mp-mirror.atelier .atelier-stage>.studio-scene{height:max(220px,calc(100dvh - 110px));min-height:0}
/* Téléphone, panneau ouvert : editor.css masque la ligne du zoom et la bande des quantités faute de hauteur ; la page
    défilant, elles restent là. */
 .mp-studio.mp-mirror.atelier.has-panel:not(.is-3d) .atelier-stage>.atelier-canvas-tools{display:flex}
}
@media(max-width:760px){
 .mp-mirror.atelier .atelier-stage{grid-row:1;grid-column:1}
}
@media(min-width:761px) and (min-height:541px){
/* Bannière cookies ouverte (plan 02, D6 : elle se pose sur l'atelier, qui garde sa hauteur) : la composition s'arrête
   au-dessus d'elle. La scène perd ce que la bannière recouvre au-delà des lignes du message et du zoom (86 px moins une
   marge de 8 px) ; la toile focalisée reste entière (WCAG 2.4.11). Bannière fermée : aucune réserve. */
 .mp-studio.mp-mirror.atelier .atelier-stage{padding-bottom:max(0px,calc(var(--atelier-cookie-offset,0px) - 78px))}
}
/* Compact view tools use the same text actions; toggles keep an explicit selected state. */
#mp-config-mirror .atelier-canvas-tools{gap:12px}
#mp-config-mirror .atelier-display>summary{height:auto}
/* Vues 3D (F35) : un groupe segmenté ; la vue en cours est un choix pressé (80-composants.css). */
.mp-mirror.atelier .atelier-view-segment{display:inline-flex;gap:2px;padding:2px;border:1px solid var(--atelier-line);border-radius:var(--atelier-radius-control);background:var(--atelier-paper)}
@media(max-width:760px){
/* WCAG 2.4.11 : réserve de défilement au-dessus de la barre « Ma commande », collée en bas. */
 .mp-mirror.atelier .atelier-stage{scroll-padding-bottom:82px}
/* Panneau fermé, la réserve grandit de 30 px (réglage d'avant le plan 03, gardé tel quel). */
 .mp-mirror.atelier:not(.has-panel) .atelier-stage{scroll-padding-bottom:112px}
}
@media(max-width:760px) and (max-height:500px){
 .mp-mirror.atelier:not(.has-panel) .atelier-stage{scroll-padding-bottom:82px}
}
@media(min-width:761px) and (min-height:541px) and (max-height:799px){
/* Ordinateur bas (1280 × 720 ; audit du 08/10) : la carte « Que souhaitez-vous créer ? » dépassait la scène, son titre passait sur
   deux lignes puis disparaissait quand un départ s'ouvrait. Titre sur une ligne, phrase d'accueil retirée (comme sur téléphone : « Ce modèle se commande à l'unité »
   reste), marges resserrées : le titre et les trois premiers départs sont à l'écran sans défiler. */
 .mp-studio.atelier .atelier-empty>div{max-width:400px;padding:12px 16px}
 .mp-studio.atelier .atelier-empty>div>p:not(.atelier-empty-alert):not(.atelier-start-help){display:none}
 .mp-studio.atelier .atelier-empty h2{font-size:var(--atelier-text-xl);margin-bottom:4px}
 .mp-studio.atelier .atelier-empty small[data-start-minimum]{margin:0 0 8px}
}
/* Téléphone de moins de 760 px de haut (passe 2, lot E) : les formats de la photo restent lus par les lecteurs d'écran, sans prendre de place. */
@media(max-width:760px) and (max-height:760px){.atelier-empty [data-layout=photo]+small{position:absolute;width:1px;height:1px;margin:0;overflow:hidden;clip-path:inset(50%);white-space:nowrap}}
/* Premier écran allégé (audit du 08/10, lot 3) : tant que la boule est vide, la carte « Que souhaitez-vous créer ? » porte seule le
   départ. Ni zoom, ni « Alignement », ni « Voir la découpe » (la barre d'outils de la toile n'a alors rien d'autre), et pas
   d'avertissement rouge « Boule vierge » dans la liste (50-commande.css) : la carte dit déjà quoi faire. Tout revient dès le premier
   prénom ou visuel (la classe is-empty est posée et retirée par l'atelier à chaque rendu). Le verso et la 3D, sans carte de départ,
   gardent leurs outils. */
#mp-config-mirror .atelier.is-empty .atelier-canvas-tools{display:none}
/* Pastilles des versions (lot 4, 08/10) : une rangée centrée au-dessus de la boule, qui défile seule quand elle dépasse la scène. */
/* width:0 et min-width:100 % : la rangée prend la largeur de la scène sans l'élargir (sinon, à 320 px, la scène dépassait l'écran). */
.atelier-guide-versions{display:flex;gap:4px;width:0;min-width:100%;overflow-x:auto;overscroll-behavior-x:contain;scrollbar-width:none;margin:0 0 4px}
.atelier-guide-versions[hidden]{display:none}
.atelier-guide-versions>:first-child{margin-left:auto}
.atelier-guide-versions>:last-child{margin-right:auto}
.mp-mirror.atelier .atelier-guide-versions button{flex:none;min-height:44px;padding:8px 16px;font-size:var(--atelier-text-md);white-space:nowrap}