/* Atelier : panneau de réglages (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. */
.mp-range-shapes{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:8px}
.mp-range-shapes button{font-size:var(--atelier-text-xs);padding:8px 4px;display:grid;justify-items:center;gap:4px}
.mp-range-shapes :is(svg,img){width:40px;height:42px;fill:currentColor;object-fit:contain}
.studio-upload{position:relative;display:flex;justify-content:center;align-items:center;min-height:56px;background:var(--atelier-ink);color:var(--atelier-paper);border-radius:var(--atelier-radius-control);font-size:var(--atelier-text-sm);text-align:center;padding:8px 12px;cursor:pointer}
.studio-upload input{position:absolute;inset:0;width:100%;height:100%;opacity:0;cursor:pointer}
.studio-hint{font-size:var(--atelier-text-xs);line-height:1.5;color:var(--atelier-muted);margin:8px 0 12px}
.studio-decors{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:8px}
.mp-studio .studio-decors button{padding:8px 4px;display:grid;justify-items:center;gap:4px;font-size:var(--atelier-text-xs);line-height:1.2;background:transparent;border-color:transparent;color:var(--atelier-ink)}
.studio-decors button span{display:grid;place-items:center;width:46px;height:46px;border-radius:50%;font-size:var(--atelier-text-2xl);box-shadow:inset 0 0 0 1px var(--atelier-line)}
.mp-studio .studio-decors button[aria-pressed=true]{background:var(--atelier-soft)}
.studio-text-options{display:grid;grid-template-columns:1fr 54px;gap:12px;margin-top:12px}
.studio-text-options input[type=color]{display:block;width:54px;height:42px;border:1px solid var(--atelier-line);background:var(--atelier-paper);padding:4px;margin-top:8px}
@media(max-width:680px){
 .studio-decors{grid-template-columns:repeat(6,minmax(0,1fr))}
 .mp-studio .studio-decors button{font-size:var(--atelier-text-xs)}
 .studio-decors button span{width:36px;height:36px}
 .studio-upload{min-height:48px}
}
.atelier-panel{overflow:auto;padding:16px;background:var(--atelier-paper);border-left:1px solid var(--atelier-line);min-height:0;font-size:var(--atelier-text-sm);-webkit-overflow-scrolling:touch}
.atelier-panel h2{font:600 var(--atelier-text-lg)/1.3 var(--font-edito-body,system-ui);margin:0 0 12px}
.atelier-field{display:block;font-size:var(--atelier-text-xs);margin:12px 0}
.atelier-field select,.atelier-field input[type=text],.atelier-field input[type=number]{margin-top:4px}
.atelier-actions{display:flex;flex-wrap:wrap;gap:8px;margin:8px 0}
.mp-studio .atelier-actions button,.mp-studio .atelier-button{font-size:var(--atelier-text-xs);padding:8px 12px;background:transparent;border:1px solid var(--atelier-line);border-radius:var(--atelier-radius-control);min-height:44px;display:inline-flex;align-items:center;position:relative;overflow:hidden;cursor:pointer}
.atelier-button input{position:absolute;inset:0;opacity:0;cursor:pointer;width:100%;height:100%}
.mp-studio .atelier-danger{color:var(--atelier-danger);border-color:var(--atelier-line)}
.atelier-selection{background:var(--atelier-paper);border:1px solid var(--atelier-line);border-radius:var(--atelier-radius-card);padding:12px;margin:0 0 16px}
.atelier-sel-head{display:flex;justify-content:space-between;align-items:center;gap:8px;margin-bottom:8px}
.atelier-sel-head strong{font-size:var(--atelier-text-sm)}
.mp-studio .atelier-sel-head button{min-height:36px;min-width:44px;padding:4px 8px;background:transparent;border-color:transparent;font-size:var(--atelier-text-lg)}
.atelier-sel-grid{display:grid;grid-template-columns:1fr 1fr;gap:8px}
.atelier-sel-grid label{font-size:var(--atelier-text-xs);color:var(--atelier-muted);display:block}
.atelier-unit{display:flex;align-items:center;gap:4px;margin-top:4px;color:var(--atelier-ink)}
.atelier-unit input{width:100%;min-width:0;min-height:40px;padding:8px 8px;border:1px solid var(--atelier-line);border-radius:var(--atelier-radius-control);background:var(--atelier-paper);font:inherit;font-size:var(--atelier-text-sm)}
.atelier-align{display:grid;grid-template-columns:repeat(3,1fr);gap:4px}
.mp-studio .atelier-align button{font-size:var(--atelier-text-xs);padding:8px;min-height:40px;background:transparent;border-color:var(--atelier-line)}
.atelier-layers{list-style:none;margin:0;padding:0;display:grid;gap:4px}
.mp-studio .atelier-layers button{display:flex;width:100%;align-items:center;gap:8px;text-align:left;font-size:var(--atelier-text-xs);padding:8px 8px;min-height:44px;background:var(--atelier-paper);border-color:var(--atelier-line)}
.mp-studio .atelier-layers button[aria-pressed=true]{background:var(--atelier-soft);color:var(--atelier-ink)}
.atelier-layers button span{flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.atelier-layers-empty{font-size:var(--atelier-text-xs);color:var(--atelier-muted);padding:8px 0}
.atelier-copies{margin-top:16px}
.atelier-copies summary{font-size:var(--atelier-text-sm);min-height:40px;cursor:pointer}
.mp-studio .atelier-copies button{display:block;width:100%;margin:8px 0;font-size:var(--atelier-text-xs);background:transparent;border-color:var(--atelier-line);text-align:left}
/* Recadrage : la valeur reste sur la ligne de son libellé, le curseur dessous (un float la faisait tomber sur la ligne suivante). */
.atelier-range{display:grid;grid-template-columns:minmax(0,1fr) auto;align-items:center;column-gap:8px;font-size:var(--atelier-text-xs);margin:8px 0}
.atelier-range input{grid-column:1/-1;grid-row:2;width:100%;margin-inline:0}
.atelier-range output{font-variant-numeric:tabular-nums}
.atelier-crop{border-top:1px solid var(--atelier-line);padding-top:8px;margin-top:8px}
.mp-retouch{margin-top:12px;border-radius:var(--atelier-radius-card)}
@media(max-width:760px){
 .atelier-panel{grid-row:2;border-left:0;border-top:1px solid var(--atelier-line);max-height:min(38dvh,300px);padding:8px 12px;font-size:var(--atelier-text-sm)}
 .atelier:not(.has-panel) .atelier-panel{display:none}
 .atelier-panel h2{font-size:var(--atelier-text-md);margin-bottom:8px}
 .atelier-sel-grid{grid-template-columns:repeat(4,1fr);gap:8px}
 .atelier-unit input{min-height:36px;padding:4px 8px;font-size:var(--atelier-text-xs)}
 .atelier-selection{padding:8px;margin-bottom:8px}
/* Mobile: every button in the atelier is a 44 px touch target, panel inputs stay visible above the keyboard. */
 /* Placée ici pour garder l’ordre de la cascade (responsabilité : 10-base). */
 .mp-studio.atelier button,.mp-studio.atelier .atelier-button,.mp-studio.atelier .studio-upload{min-height:44px}
 .atelier-panel input[type=text],.atelier-panel select{min-height:44px}
 .atelier-sel-grid .atelier-unit input{min-height:44px}
}
@media(pointer:coarse){
 /* Placée ici pour garder l’ordre de la cascade (responsabilité : 20-rail). */
 .mp-studio.atelier button:not(.atelier-rail button):not(.atelier-layers button){min-height:44px;min-width:44px}
 /* Placée ici pour garder l’ordre de la cascade (responsabilité : 10-base). */
 .mp-studio .atelier-history button,.mp-studio .atelier-faces button,.mp-studio .atelier-sel-head button{min-height:44px}
}
@media(max-width:760px) and (max-height:640px){
 .atelier-panel{max-height:30dvh}
}
/* Placée ici pour garder l’ordre de la cascade (responsabilité : 30-scene). */
.mp-studio .atelier-face-actions button{background:transparent;color:var(--atelier-accent);border-color:var(--atelier-accent);min-height:44px;padding:8px 12px}
/* Placée ici pour garder l’ordre de la cascade (responsabilité : 30-scene). */
.mp-studio .atelier-feedback button{min-height:44px;background:var(--atelier-paper);color:var(--atelier-ink);border-color:var(--atelier-line);padding:8px 12px}
.atelier-precise{margin-top:8px}
.atelier-precise summary{font-size:var(--atelier-text-xs);cursor:pointer;min-height:36px;display:list-item;align-content:center}
.atelier-precise .atelier-sel-grid{padding-top:8px}
.atelier-selection{border:0;border-bottom:1px solid var(--atelier-line);border-radius:0;background:transparent;padding:0 0 12px}
.atelier-field input:not([type=color]){display:block;width:100%;min-height:44px;font:inherit;padding:8px;border:1px solid var(--atelier-line);border-radius:var(--atelier-radius-control);background:var(--atelier-paper)}
.atelier-panel-close{display:none!important}
@media(max-width:760px){
 /* Placée ici pour garder l’ordre de la cascade (responsabilité : 30-scene). */
 .mp-studio .atelier-face-actions button{min-height:36px;font-size:var(--atelier-text-xs)}
 .atelier-panel{max-height:30dvh;padding:8px 12px}
 .atelier-panel-close{display:block!important;margin-left:auto;min-height:36px!important}
 .atelier-precise summary{min-height:44px}
}
/* Placée ici pour garder l’ordre de la cascade (responsabilité : 10-base). */
.mp-studio.atelier button{border-radius:var(--atelier-radius-card);transition:background .15s,border-color .15s}
/* Placée ici pour garder l’ordre de la cascade (responsabilité : 10-base). */
.mp-studio.atelier button:disabled{opacity:.4;cursor:not-allowed}
/* Placée ici pour garder l’ordre de la cascade (responsabilité : 10-base). */
.mp-studio .atelier-continue{border-radius:var(--atelier-radius-card);padding:12px 24px;font-size:var(--atelier-text-sm);white-space:nowrap;background:var(--atelier-ink)}
/* Placée ici pour garder l’ordre de la cascade (responsabilité : 20-rail). */
.mp-studio .atelier-rail button{min-height:60px;gap:8px;color:var(--atelier-muted);border:0;border-radius:var(--atelier-radius-card)}
/* Placée ici pour garder l’ordre de la cascade (responsabilité : 20-rail). */
.mp-studio .atelier-rail button[aria-pressed=true]{background:var(--atelier-soft);color:var(--atelier-ink);box-shadow:none}
@media (hover:hover){
 /* Placée ici pour garder l’ordre de la cascade (responsabilité : 20-rail). */
 .mp-studio .atelier-rail button:hover{background:var(--atelier-soft)}
}
/* Placée ici pour garder l’ordre de la cascade (responsabilité : 30-scene). */
.mp-studio .atelier-faces button{border:0;border-radius:var(--atelier-radius-card);padding:4px 16px 4px 8px;min-height:40px;font-size:var(--atelier-text-xs);color:var(--atelier-muted);background:transparent}
/* Placée ici pour garder l’ordre de la cascade (responsabilité : 30-scene). */
.mp-studio .atelier-faces button[aria-pressed=true]{background:var(--atelier-paper);color:var(--atelier-ink)}
/* Placée ici pour garder l’ordre de la cascade (responsabilité : 30-scene). */
.mp-studio .atelier-face-actions>[data-action=copy-front]{font-size:var(--atelier-text-xs);border:0;background:transparent;color:var(--atelier-ink);padding:8px 0;text-decoration:underline;text-underline-offset:4px}
.atelier-panel{padding:24px 24px;background:var(--atelier-paper);border-color:var(--atelier-line)}
.atelier-panel h2{font-size:var(--atelier-text-xl);letter-spacing:-.35px;margin-bottom:16px}
.atelier-panel .studio-hint{font-size:var(--atelier-text-xs);color:var(--atelier-muted);line-height:1.65}
.atelier .studio-upload{display:flex;flex-direction:column;align-items:center;gap:8px;background:var(--atelier-soft);border:1px dashed var(--atelier-line);border-radius:var(--atelier-radius-card);color:var(--atelier-ink);padding:24px 12px;min-height:130px;text-align:center;font-size:var(--atelier-text-xs)}
.atelier-upload-icon{display:grid;place-items:center;width:34px;height:34px;border-radius:50%;background:var(--atelier-soft);font-size:var(--atelier-text-2xl)}
.studio-upload strong{font-size:var(--atelier-text-sm);font-weight:600}
/* « Réserver la place du logo » (plan 06b) : famille secondaire (80-composants.css), pleine largeur sous le choix du fichier. */
.atelier-panel .atelier-logo-placeholder{display:flex;align-items:center;justify-content:center;width:100%;min-height:44px;padding:8px 12px;margin-top:12px}
@media (hover:hover){
 .atelier .studio-upload:hover{background:var(--atelier-soft);border-color:var(--atelier-ink)}
}
/* Placée ici pour garder l’ordre de la cascade (responsabilité : 10-base). */
.atelier .atelier-primary{border-radius:var(--atelier-radius-card);min-height:44px}
.atelier-selection{margin-bottom:24px;padding-bottom:16px}
.atelier-sel-head{margin-bottom:0}
.atelier-precise summary{font-size:var(--atelier-text-xs);color:var(--atelier-muted);cursor:pointer;padding:12px 0;min-height:40px}
/* Placée ici pour garder l’ordre de la cascade (responsabilité : 30-scene). */
.mp-studio .atelier-canvas-tools button{border:0;background:color-mix(in srgb, var(--atelier-paper) 50%, transparent);min-height:34px;border-radius:var(--atelier-radius-card);padding:4px 12px}
/* Placée ici pour garder l’ordre de la cascade (responsabilité : 30-scene). */
.mp-studio .atelier-canvas-tools button[aria-pressed=true]{background:var(--atelier-soft);color:var(--atelier-ink)}
.atelier-field input:not([type=color]),.atelier-field select{border-radius:var(--atelier-radius-card);background:var(--atelier-paper)}
@media(max-width:1150px){
 .atelier-panel{padding:16px 16px}
}
@media(max-width:760px){
 /* Placée ici pour garder l’ordre de la cascade (responsabilité : 10-base). */
 .mp-studio .atelier-history button{min-height:38px;padding:4px 12px}
 /* Placée ici pour garder l’ordre de la cascade (responsabilité : 30-scene). */
 .mp-studio .atelier-faces button{padding:4px 12px;min-height:36px}
 /* Placée ici pour garder l’ordre de la cascade (responsabilité : 30-scene). */
 .mp-studio .atelier-face-actions>[data-action=copy-front]{min-height:40px;font-size:var(--atelier-text-xs)}
 /* Placée ici pour garder l’ordre de la cascade (responsabilité : 30-scene). */
 .mp-studio.atelier .atelier-canvas-tools button{min-height:36px;min-width:36px;font-size:var(--atelier-text-xs);padding:4px 8px}
 .atelier-panel{max-height:27dvh;padding:8px 16px 12px}
 .atelier-panel h2{font-size:var(--atelier-text-lg)}
 .atelier-panel-close{padding:2px 0!important;min-height:32px!important}
 .atelier-selection{padding-bottom:12px;margin-bottom:12px}
 /* Placée ici pour garder l’ordre de la cascade (responsabilité : 20-rail). */
 .mp-studio .atelier-rail button{min-height:52px;border-radius:var(--atelier-radius-card);gap:4px;font-size:var(--atelier-text-xs)}
 .atelier .studio-upload{min-height:100px;padding:12px}
 .atelier-upload-icon{display:none}
}
@media(prefers-reduced-motion:reduce){
 /* Placée ici pour garder l’ordre de la cascade (responsabilité : 10-base). */
 .mp-studio.atelier button{transition:none}
}
.atelier .studio-upload.is-compact{min-height:44px;padding:12px;flex-direction:row;justify-content:center;border-style:solid;border-radius:var(--atelier-radius-card)}
.studio-upload.is-compact .atelier-upload-icon,.studio-upload.is-compact>span:last-of-type{display:none}
.studio-upload.is-compact strong{font-weight:400;font-size:var(--atelier-text-xs)}
.atelier-selection{margin:12px 0 0;border:0;padding:0}
/* Placée ici pour garder l’ordre de la cascade (responsabilité : 30-scene). */
.mp-studio.atelier .studio-view-tools button{min-height:44px;border-radius:var(--atelier-radius-control);font-size:var(--atelier-text-sm);line-height:1.3;padding:12px 16px}
/* Placée ici pour garder l’ordre de la cascade (responsabilité : 30-scene). */
.mp-studio.atelier .studio-view-tools .atelier-view-segment button{border:0;background:transparent;color:var(--atelier-muted)}
@media (hover:hover){
 /* Placée ici pour garder l’ordre de la cascade (responsabilité : 30-scene). */
 .mp-studio.atelier .studio-view-tools .atelier-view-segment button:hover{background:var(--atelier-soft);color:var(--atelier-ink)}
}
/* Placée ici pour garder l’ordre de la cascade (responsabilité : 30-scene). */
.mp-studio.atelier .studio-view-tools .atelier-view-segment button[aria-pressed=true]{background:var(--atelier-paper);color:var(--atelier-ink);font-weight:600}
/* Placée ici pour garder l’ordre de la cascade (responsabilité : 30-scene). */
.mp-studio.atelier .studio-view-tools [data-action=layers-3d]{background:var(--atelier-paper);border:1px solid var(--atelier-line);color:var(--atelier-ink)}
/* Placée ici pour garder l’ordre de la cascade (responsabilité : 30-scene). */
/* Placée ici pour garder l’ordre de la cascade (responsabilité : 30-scene). */
.mp-studio.atelier .studio-view-tools .atelier-return-edit{border:1px solid var(--atelier-line);background:transparent;color:var(--atelier-ink);font-weight:600}
/* Placée ici pour garder l’ordre de la cascade (responsabilité : 30-scene). */
.mp-studio.atelier .atelier-empty button{border:0;border-radius:var(--atelier-radius-card);min-height:44px;padding:12px 24px;background:var(--atelier-ink);color:var(--atelier-paper);font-size:var(--atelier-text-sm)}
.atelier.is-3d .atelier-panel{display:none}
/* Placée ici pour garder l’ordre de la cascade (responsabilité : 30-scene). */
.mp-studio.atelier .atelier-feedback button{border:0;border-radius:var(--atelier-radius-card);background:var(--atelier-soft);color:var(--atelier-ink);padding:12px 16px;font-size:var(--atelier-text-xs)}
/* Placée ici pour garder l’ordre de la cascade (responsabilité : 30-scene). */
.mp-studio.atelier .atelier-feedback [data-action=feedback-fit],.mp-studio.atelier .atelier-feedback [data-action=feedback-print],.mp-studio.atelier .atelier-feedback [data-action=feedback-image],.mp-studio.atelier .atelier-feedback [data-action=feedback-glyphs]{background:var(--atelier-ink);color:var(--atelier-paper)}
/* Placée ici pour garder l’ordre de la cascade (responsabilité : 30-scene). */
.mp-studio.atelier .atelier-feedback [data-action=feedback-close]{position:absolute;top:6px;right:6px;padding:0;background:transparent;font-size:var(--atelier-text-2xl);width:32px;min-height:32px}
/* Placée ici pour garder l’ordre de la cascade (responsabilité : 30-scene). */
.atelier-stage>.studio-view-tools{position:static;grid-row:4;display:none;align-items:center;justify-content:center;gap:16px;flex-wrap:wrap;padding:12px 16px;background:var(--atelier-soft)}
/* Placée ici pour garder l’ordre de la cascade (responsabilité : 30-scene). */
.atelier.is-3d .atelier-stage>.studio-view-tools{display:flex}
@media(max-width:760px){
 /* Placée ici pour garder l’ordre de la cascade (responsabilité : 30-scene). */
 .atelier-stage>.studio-view-tools{gap:8px;padding:8px}
 /* Placée ici pour garder l’ordre de la cascade (responsabilité : 30-scene). */
 .mp-studio.atelier .atelier-stage>.studio-view-tools button{padding:8px 12px;font-size:var(--atelier-text-xs)}
}
.atelier-color-presets{display:grid;grid-template-columns:repeat(6,1fr);gap:8px;margin:16px 0}
.mp-studio.atelier .atelier-color-presets button{min-height:32px;min-width:32px;border:3px solid var(--atelier-paper);background:var(--swatch);border-radius:50%;box-shadow:inset 0 0 0 1px var(--atelier-line);padding:0;aspect-ratio:1}
.mp-studio.atelier .atelier-color-presets button[aria-pressed=true]{box-shadow:inset 0 0 0 2px var(--atelier-ink)}
.atelier .studio-decors{grid-template-columns:repeat(3,minmax(0,1fr));gap:12px}
.mp-studio.atelier .studio-decors button{padding:8px;border:1px solid transparent;border-radius:var(--atelier-radius-card);background:transparent;color:var(--atelier-ink);font-size:var(--atelier-text-xs);line-height:1.3}
.mp-studio.atelier .studio-decors button[aria-pressed=true]{background:var(--atelier-soft)}
.atelier .studio-decors button>span{width:64px;height:64px;max-width:100%;margin:0 auto 8px;border-radius:50%;overflow:hidden;display:block}
@media(max-width:760px){
 /* Placée ici pour garder l’ordre de la cascade (responsabilité : 30-scene). */
 .atelier-face-actions>[data-action=copy-front]{grid-column:1;grid-row:2;justify-self:center;min-height:30px!important;padding:4px!important}
 .mp-studio.atelier .atelier-color-presets button{min-height:36px;min-width:36px}
}
/* Placée ici pour garder l’ordre de la cascade (responsabilité : 30-scene). */
.mp-studio .atelier-notice button{min-height:44px;border:1px solid var(--atelier-line);background:var(--atelier-soft);color:var(--atelier-ink);padding:8px 16px}
/* Placée ici pour garder l’ordre de la cascade (responsabilité : 30-scene). */
.mp-studio .atelier-notice [data-action=notice-close]{position:absolute;right:6px;top:4px;border:0;background:transparent;font-size:var(--atelier-text-2xl);padding:0;width:36px}
.atelier-placement{display:grid;gap:12px;padding:16px 0}
.atelier-control-line{display:flex;align-items:center;justify-content:space-between;gap:8px;font-size:var(--atelier-text-sm)}
.atelier-control-line>span{font-weight:600}
.atelier-direction-pad,.atelier-stepper{display:flex;align-items:center;gap:2px;background:var(--atelier-soft);border-radius:var(--atelier-radius-card);padding:2px}
.mp-studio .atelier-placement button{color:var(--atelier-ink);background:transparent;border:1px solid transparent;min-height:44px;padding:8px}
@media (hover:hover){
 .mp-studio .atelier-placement button:hover{background:var(--atelier-soft);border-color:var(--atelier-line)}
}
.mp-studio .atelier-direction-pad button,.mp-studio .atelier-stepper>button{min-width:36px;font-size:var(--atelier-text-glyph)}
.atelier-stepper>span{font-size:var(--atelier-text-xs);padding:0 2px}
.atelier-stepper [data-action=angle-reset]{min-width:68px!important}
.atelier-placement .studio-hint{margin:0;font-size:var(--atelier-text-xs)}
.atelier-object-actions{display:flex;gap:8px;border-top:1px solid var(--atelier-line);padding-top:12px}
.atelier-object-actions button{flex:1}
.mp-studio .atelier-object-actions .atelier-danger{color:var(--atelier-danger)}
.atelier-precise{border-top:1px solid var(--atelier-line)}
.atelier-font-picker{margin:0!important;padding:0!important;border:0!important;position:relative;min-width:0}
.atelier-font-picker>summary{display:flex;align-items:center;justify-content:space-between;gap:8px;cursor:pointer;list-style:none;border:1px solid var(--atelier-line);border-radius:var(--atelier-radius-card);padding:8px 12px;min-height:46px;font-size:var(--atelier-text-2xl);background:var(--atelier-paper)}
.atelier-font-picker>summary::-webkit-details-marker{display:none}
.atelier-font-picker>summary>span:first-child{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.atelier-font-picker>summary>span:last-child{font-family:system-ui;font-size:var(--atelier-text-md)}
.atelier-font-list{position:absolute;top:calc(100% + 4px);left:0;width:max(100%,230px);max-width:calc(100vw - 36px);max-height:330px;overflow:auto;z-index:20;border:1px solid var(--atelier-line);background:var(--atelier-paper);border-radius:var(--atelier-radius-card);padding:4px}
.mp-studio .atelier-font-list button{display:block;width:100%;font-size:var(--atelier-text-2xl);min-height:48px;text-align:left;color:var(--atelier-ink);border:0;background:transparent;padding:4px 12px}
.mp-studio .atelier-font-list button[aria-pressed=true]{background:var(--atelier-soft)}
@media (hover:hover){
 .mp-studio .atelier-font-list button:hover{background:var(--atelier-soft)}
}
.atelier-curve{margin-top:16px}
.atelier-curve>div:first-child{display:flex;align-items:center;justify-content:space-between;gap:8px;font-size:var(--atelier-text-sm)}
.mp-studio .atelier-curve button{border:0;background:transparent;color:var(--atelier-muted);min-height:36px;font-size:var(--atelier-text-xs);padding:4px}
.atelier-curve input{width:100%;min-height:36px;accent-color:var(--atelier-ink)}
.atelier-curve-labels{display:flex;justify-content:space-between;font-size:var(--atelier-text-xs);color:var(--atelier-muted)}
@media(max-width:760px){
 .atelier-control-line{justify-content:flex-start;gap:16px}
 .atelier-control-line>span{min-width:70px}
 .mp-studio .atelier-direction-pad button,.mp-studio .atelier-stepper>button{min-width:44px}
 .atelier-font-list{position:static;width:100%;box-shadow:none;max-height:280px}
}
.mp-studio .atelier-curve input[type=range]{accent-color:var(--atelier-ink)}
/* Placée ici pour garder l’ordre de la cascade (responsabilité : 30-scene). */
.mp-studio .atelier-zone-panel button{min-height:36px;padding:8px 16px;border:0;border-radius:var(--atelier-radius-card);color:var(--atelier-muted);background:transparent;font-size:var(--atelier-text-xs)}
/* Placée ici pour garder l’ordre de la cascade (responsabilité : 30-scene). */
.mp-studio .atelier-zone-panel button[aria-pressed=true]{background:var(--atelier-paper);color:var(--atelier-ink)}
.atelier-source-help{font-size:var(--atelier-text-sm);line-height:1.55;color:var(--atelier-ink);margin:12px 0 16px}
@media(max-width:760px){
 /* Placée ici pour garder l’ordre de la cascade (responsabilité : 30-scene). */
 .mp-studio .atelier-zone-panel button{min-height:44px;padding:8px 12px;font-size:var(--atelier-text-xs)}
}
/* Placée ici pour garder l’ordre de la cascade (responsabilité : 30-scene). */
.mp-studio.atelier .atelier-spin-centre{display:inline-flex;align-items:center;gap:12px;pointer-events:auto;min-height:48px;padding:12px 24px;background:transparent;color:var(--atelier-ink);border-color:var(--atelier-line);font-size:var(--atelier-text-md);font-weight:600}
.atelier-cleanup-tools{display:flex;flex-wrap:wrap;gap:4px 16px}
.mp-studio .atelier-cleanup-tools button{border:0;background:transparent;padding:8px 0;min-height:44px;font-size:var(--atelier-text-xs);text-decoration:underline;text-underline-offset:3px;color:var(--atelier-accent)}
.mp-studio .atelier-cleanup-tools button:disabled{opacity:.45;text-decoration:none;cursor:default}
@media(max-width:760px){
 /* Placée ici pour garder l’ordre de la cascade (responsabilité : 10-base). */
 .atelier-panel,.atelier-rail{min-width:0}
 .atelier-panel input[type=text]{font-size:var(--atelier-text-lg)}
 /* Placée ici pour garder l’ordre de la cascade (responsabilité : 10-base). */
 .mp-studio.atelier .atelier-face-actions>[data-action=copy-front],.mp-studio.atelier .atelier-panel-close{min-height:44px!important}
}
@media(max-width:760px) and (max-height:640px){
 .atelier-panel{max-height:22dvh}
}
/* Placée ici pour garder l’ordre de la cascade (responsabilité : 30-scene). */
.mp-studio.atelier .atelier-start-layouts button{min-height:44px;padding:8px;border:1px solid var(--atelier-line);border-radius:var(--atelier-radius-control);background:var(--atelier-paper);color:var(--atelier-ink);font-size:var(--atelier-text-xs)}
/* Placée ici pour garder l’ordre de la cascade (responsabilité : 10-base). */
.mp-studio.atelier .atelier-continue,.mp-studio.atelier .atelier-primary{border-radius:var(--atelier-radius-control)}
.atelier .studio-decors .atelier-shape-decor>span{border-radius:var(--atelier-radius-control)}
/* Face replacement stays beside its trigger, without a native browser dialog. */
.atelier-attachment-group{margin:24px 0}
.atelier-attachment-group h3{font-size:var(--atelier-text-xs);font-weight:600;line-height:1.4;margin:0 0 8px;color:var(--atelier-ink)}
.atelier-attachment-group .studio-decors{gap:8px}
.atelier .atelier-attachment-group .studio-decors button>span{width:48px;height:48px}
/* Placée ici pour garder l’ordre de la cascade (responsabilité : 20-rail). */
.mp-studio .atelier-rail .atelier-help-trigger[aria-expanded=true]{background:var(--atelier-soft);color:var(--atelier-ink)}
@media(max-width:760px){
 /* Placée ici pour garder l’ordre de la cascade (responsabilité : 20-rail). */
 .mp-studio .atelier-rail button{min-width:44px;flex:1 0 44px}
 /* Placée ici pour garder l’ordre de la cascade (responsabilité : 30-scene). */
 .atelier.is-3d .atelier-stage>.studio-view-tools:has(.studio-spin-hint){display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:8px}
 /* Placée ici pour garder l’ordre de la cascade (responsabilité : 30-scene). */
 .mp-studio.atelier .studio-view-tools .atelier-spin-centre{grid-column:1;grid-row:2;justify-content:center;min-height:52px;gap:8px;padding:8px;font-size:var(--atelier-text-xs)}
 /* Placée ici pour garder l’ordre de la cascade (responsabilité : 30-scene). */
 .mp-studio.atelier .studio-view-tools:has(.studio-spin-hint) .atelier-return-edit{grid-column:2;grid-row:2;min-height:52px}
}
/* Placée ici pour garder l’ordre de la cascade (responsabilité : 30-scene). */
.mp-studio.atelier .atelier-feedback [data-action=feedback-quantities]{background:var(--atelier-ink);color:var(--atelier-paper)}
@media(max-width:760px){
 /* Placée ici pour garder l’ordre de la cascade (responsabilité : 10-base). */
 .mp-studio.atelier .atelier-history button{min-width:44px;min-height:44px}
 .atelier.is-empty:has([data-tool=image][aria-pressed=true]) .atelier-panel{display:none}
 /* Placée ici pour garder l’ordre de la cascade (responsabilité : 30-scene). */
 .mp-studio.atelier .atelier-faces button{min-height:44px}
 .mp-studio.atelier .atelier-sel-grid{grid-template-columns:repeat(2,minmax(0,1fr))}
 .atelier-panel{overscroll-behavior:contain;scroll-padding-block:12px}
/* Retouch is a focused task on a phone, not a canvas buried in a short drawer. */
 .atelier-body:has(.mp-retouch)>.atelier-stage{display:none}
 .atelier-body:has(.mp-retouch)>.atelier-panel{grid-row:1/3;max-height:none;padding:16px}
 .mp-studio.atelier .atelier-panel:has(.mp-retouch)>:not(.atelier-tool){display:none!important}
 .mp-studio .mp-retouch{padding:0!important;border:0!important;border-radius:0!important;background:transparent!important}
 .mp-retouch h2{margin:0 0 8px;font-size:var(--atelier-text-xl)}
 .mp-retouch>p{margin:8px 0;font-size:var(--atelier-text-sm);line-height:1.5}
 .mp-retouch [data-frame]{width:min(100%,calc((var(--atelier-viewport-height,100dvh) - var(--atelier-cookie-offset,0px)) * .38 * var(--retouch-ratio)))}
 .mp-retouch [data-status]:empty{display:none}
}
@media(pointer:coarse){
 .mp-retouch-keyboard-hint{display:none}
}
@media(max-width:760px){
 .atelier-tool:has(.mp-retouch)>:not([data-retouch-host]){display:none}
}
/* Champs : bord 1 px --ink-15 de la charte (décision de Robin du 29/09, le bord foncé à 3:1 est retiré), encre au focus (80-composants). */
.mp-studio.atelier :is(.atelier-field input:not([type=color]),.atelier-field select,.atelier-unit input,.atelier-start-text input,.studio-text-options input[type=color],.atelier-font-picker>summary){border-color:var(--atelier-line)}
@media(max-width:760px){
 /* Placée ici pour garder l’ordre de la cascade (responsabilité : 30-scene). */
 .mp-studio.atelier .atelier-zone-panel button{min-height:44px;padding:8px 12px;white-space:nowrap}
 /* Placée ici pour garder l’ordre de la cascade (responsabilité : 20-rail). */
 .mp-studio.atelier .atelier-rail button{min-height:48px}
}
@media(max-width:760px) and (max-height:700px){
 .mp-mirror.atelier .atelier-panel:not(:has(.mp-retouch)){max-height:21dvh}
}
@media(max-width:400px){
 /* Placée ici pour garder l’ordre de la cascade (responsabilité : 20-rail). Cible de 44 px au moins (audit du 08/10 : « 3D » et
    « Aide » en faisaient 37) : si les huit outils n'y tiennent pas (320 px), le rail défile de côté, l'outil suivant dépasse du bord. */
 .mp-studio.atelier .atelier-rail{padding-inline:0;scrollbar-width:none}
 /* Placée ici pour garder l’ordre de la cascade (responsabilité : 20-rail). */
 .mp-studio.atelier .atelier-rail::-webkit-scrollbar{display:none}
 /* Placée ici pour garder l’ordre de la cascade (responsabilité : 20-rail). */
 .mp-studio.atelier .atelier-rail button{min-width:44px;flex:1 0 auto;padding-inline:0}
}
.mp-studio.atelier .mp-range-shapes button[aria-pressed=true]{background:var(--atelier-soft);color:var(--atelier-ink)}
/* Placée ici pour garder l’ordre de la cascade (responsabilité : 30-scene). */
.mp-studio.atelier .atelier-feedback [data-action=feedback-start]{background:var(--atelier-ink);color:var(--atelier-paper)}
/* Locks (plan 4): line icons, as DESIGN.md asks, instead of emojis. */
.mp-studio.atelier :is([data-action=lock],.atelier-layer-lock) svg{width:18px;height:18px;fill:none;stroke:currentColor;stroke-width:1.25;stroke-linecap:round;stroke-linejoin:round;vertical-align:middle}
@media(max-width:760px){
 /* Placée ici pour garder l’ordre de la cascade (responsabilité : 30-scene). */
 .mp-studio.atelier .atelier-canvas-tools :is([data-action=zoom-in],[data-action=zoom-out]){font-size:var(--atelier-text-xl)}
}
@media (hover:hover){
/* Hover feedback for decors and zone steps, lost to the specificity of their resting state; the chosen state stays distinct. */
 .mp-studio.atelier .studio-decors button:hover:not(:disabled,[aria-pressed=true]){border-color:var(--atelier-line);background:color-mix(in srgb,var(--atelier-soft) 55%,transparent)}
}
/* Liste « Éléments » triable : poignée à gauche, ligne soulevée pendant le glisser, les autres glissent à leur nouvelle place */
.mp-studio .atelier-layers .atelier-layer-grip{position:relative;overflow:visible;flex:none;display:grid;place-items:center;width:20px;margin:-8px 0 -8px -4px;align-self:stretch;color:var(--atelier-muted);cursor:grab;touch-action:none}
/* Cible du doigt de 44 px de large autour de la poignée de 20 px, invisible (retour du 29/09 : la poignée échappait au doigt). */
.mp-studio .atelier-layers .atelier-layer-grip::before{content:"";position:absolute;inset:0 -12px}
.atelier-layers .atelier-layer-grip svg{width:18px;height:18px;stroke-width:2.4}
.mp-studio .atelier-layers button:has(.atelier-layer-grip){cursor:grab}
.atelier-layers.is-sorting li{transition:transform 160ms cubic-bezier(.2,0,0,1)}
.atelier-layers li.is-dragging{position:relative;z-index:2;transition:none}
/* Ligne soulevée : fond papier et ombre de l'élément glissé (seule ombre permise avec les fenêtres, DESIGN.md), sans cadre.
   L'identifiant l'emporte sur la famille « choix » (transparente, sans ombre), qui la rendait transparente : pendant le
   glisser, elle se superposait aux lignes voisines (retour du 29/09). */
#mp-config-mirror .atelier-layers li.is-dragging button[data-action=select]{cursor:grabbing;background:var(--atelier-paper);box-shadow:var(--atelier-shadow-float)}
.atelier-layers.is-sorting{user-select:none;-webkit-user-select:none}
@media(prefers-reduced-motion:reduce){
 .atelier-layers.is-sorting li{transition:none}
}
/* Sélection (passe 3, lot G3b) : largeur et angle à portée, le reste sous « Position précise » ; dupliquer, devant, derrière et supprimer
   ont leur barre (45-inspecteur.css). */
/* Netteté : une ligne, un point pour l'état ; un visuel limité dit pourquoi et ce qui s'y fait. */
.atelier-image-quality{display:flex;flex-wrap:wrap;align-items:center;gap:var(--atelier-space-1) var(--atelier-space-2);margin:0 0 var(--atelier-space-3);padding:0;border:0;background:transparent;font-size:var(--atelier-text-xs);color:var(--atelier-muted)}
.atelier-image-quality strong{display:inline-flex;align-items:center;gap:var(--atelier-space-2);font-size:var(--atelier-text-xs);font-weight:600;color:var(--atelier-ink)}
.atelier-image-quality strong::before{content:"";flex:none;width:8px;height:8px;border-radius:50%;background:var(--atelier-muted)}
.atelier-image-quality.is-limited strong{color:var(--atelier-danger)}
.atelier-image-quality.is-limited strong::before{background:var(--atelier-danger)}
.atelier-more{margin-top:12px}
.atelier-more .atelier-placement{padding-top:8px}
.mp-studio .atelier-more .atelier-object-actions [data-action=lock]{display:inline-flex;align-items:center;justify-content:center;gap:8px;font-size:var(--atelier-text-sm)}
.atelier-more .atelier-object-actions [data-action=lock] svg{width:16px;height:16px;fill:none;stroke:currentColor;stroke-width:1.8}
@media(min-width:761px){
 .atelier-body>.atelier-panel{grid-column:3;grid-row:1}
}
.atelier-font-picker.opens-up .atelier-font-list{top:auto;bottom:calc(100% + 4px)}
/* Placée ici pour garder l’ordre de la cascade (responsabilité : 10-base). */
.atelier-display>div,.atelier-font-list,.atelier-gamme-menu,.atelier-project>div{overflow:auto}
@media(max-width:760px) and (min-height:541px){
/* Chaque chose à sa place (plan 02 de la refonte, audit de finition du 27/09) : rien n'est posé sur la boule, ce qui
   s'ouvre a sa place, l'atelier garde sa hauteur quand la bannière cookies s'affiche, et il défile quand l'écran est bas.
   Chargée juste après editor.css (page de l'atelier seulement) : ses règles l'emportent par l'ordre et par un sélecteur
   plus précis (.mp-studio.mp-mirror.atelier). editor.css n'est pas modifiée. Les blocs se suivent dans cet ordre :
   R2 téléphone, panneau tactile étroit, R1 messages, R1 vignette 3D, R4 bannière cookies, R4 écran bas (ce dernier doit
   rester le dernier). */
/* ---- R2. Téléphone : le panneau s'agrandit tant que la liste des polices est ouverte ----
   Le panneau fait un quart de l'écran ; la liste y montrait deux polices. Ouverte, elle a la moitié de l'écran, et la
   composition reste visible au-dessus pour juger la police. Écran bas : la page défile, le panneau n'a pas de plafond. */
 .mp-studio.mp-mirror.atelier .atelier-panel:has(.atelier-font-picker[open]){max-height:50dvh}
}
@media(pointer:coarse){
/* ---- Écran tactile, panneau étroit : les couleurs de Noël passent à la ligne ----
   Au doigt, chaque pastille fait 44 px au moins (editor.css, pointer:coarse) : six pastilles et leurs espaces demandent
   304 px, plus que le panneau de 280 px d'un téléphone à l'horizontale (ou d'une tablette). La grille à six colonnes
   débordait du panneau (et de la page, qui défilait de côté) ; elle garde autant de colonnes que la largeur en permet. */
 .mp-studio.mp-mirror.atelier .atelier-color-presets{grid-template-columns:repeat(auto-fit,minmax(44px,1fr))}
}
/* Placée ici pour garder l’ordre de la cascade (responsabilité : 30-scene). */
.mp-studio.mp-mirror.atelier .atelier-stage>.atelier-canvas-tools,.mp-studio.mp-mirror.atelier .atelier-stage>.studio-view-tools{grid-row:5}
/* Placée ici pour garder l’ordre de la cascade (responsabilité : 30-scene). */
.mp-studio.mp-mirror.atelier .atelier-messages>.atelier-notice [data-action=notice-close]{top:50%;right:0;width:44px;min-height:44px;transform:translateY(-50%)}
@media(max-width:760px){
 /* Placée ici pour garder l’ordre de la cascade (responsabilité : 30-scene). */
 .mp-studio.mp-mirror.atelier .atelier-messages>.atelier-notice [data-action=notice-3d]{grid-column:2;align-self:center;margin:0;padding:8px 12px;white-space:nowrap}
}
@media(max-height:540px){
 .mp-studio.mp-mirror.atelier .atelier-panel{max-height:none;overflow:visible}
}
.mp-studio.atelier .atelier-panel-close{display:inline-flex!important;align-items:center;gap:8px;margin:0 0 12px;padding:8px 0!important;min-height:44px!important}
/* Total à côté de « ← Ma commande » (audit du 04/10) : sur téléphone, l'outil ouvert masque la barre ou son bouton
   « Ma commande », seul porteur du prix. Sur ordinateur, la barre l'affiche déjà. */
.mp-studio.atelier .atelier-panel-close-sum{font-weight:400;color:var(--atelier-muted)}
.mp-studio.atelier .atelier-panel-close-sum:empty{display:none}
@media(min-width:761px){.mp-studio.atelier .atelier-panel-close-sum{display:none}}
#mp-config-mirror :is(.atelier-actions,.atelier-object-actions,.atelier-sel-actions){gap:8px 16px;flex-wrap:wrap}
#mp-config-mirror .mp-retouch :is([data-mode],[data-size]){border:0;background:transparent;color:var(--ink-70);min-height:44px;font:500 var(--atelier-text-sm)/1.4 var(--font-edito-body,system-ui);padding:8px}
#mp-config-mirror .mp-retouch [data-apply]{background:var(--ink);color:var(--paper);border-color:var(--ink);font-weight:600;min-height:44px}
/* Placée ici pour garder l’ordre de la cascade (responsabilité : 10-base). */
#mp-config-mirror :is([data-action=zoom-in],[data-action=zoom-out]){background:transparent;border:0;min-width:44px;min-height:44px;color:var(--ink)}
/* Hiérarchie des titres du panneau (F22) : titre 18 px (16 px sur téléphone), titre de groupe 14 px, texte 13 px, aides 12 px. */
.mp-mirror.atelier .atelier-panel h2{font-size:var(--atelier-text-xl);font-weight:600}
.mp-mirror.atelier .atelier-panel h3{font-size:var(--atelier-text-md);font-weight:600;line-height:1.4}
.mp-mirror.atelier .atelier-panel .studio-hint{font-size:var(--atelier-text-xs)}
@media(max-width:760px){
 .mp-mirror.atelier .atelier-panel h2{font-size:var(--atelier-text-lg)}
}
/* Colonne de réglages sans cartes dans la carte (F33) : ses blocs sont séparés par un filet et tout s'aligne à gauche. */
.mp-mirror.atelier .atelier-panel .studio-upload.is-compact{justify-content:flex-start;text-align:left}
@media(min-width:761px){
 .mp-mirror.atelier .atelier-panel .mp-retouch{border:0;border-top:1px solid var(--atelier-line);border-radius:0;background:transparent;padding:var(--atelier-space-3) 0 0}
}
@media(max-width:760px){
 /* Placée ici pour garder l’ordre de la cascade (responsabilité : 10-base). */
 .mp-studio.atelier :is([data-action=notice-close],[data-action=feedback-close]){min-width:44px;min-height:44px}
}
@media(max-width:760px) and (min-height:541px){
/* La scène qui reste (120 à 220 px) garde la composition et le message : la ligne du zoom et la bande des quantités,
   posées en bas de la scène, s'effacent le temps du choix de la police (revue du plan 02). */
 .mp-studio.mp-mirror.atelier:has(.atelier-font-picker[open]) .atelier-stage>.atelier-canvas-tools{display:none}
}
/* Placée ici pour garder l’ordre de la cascade (responsabilité : 10-base). */
#mp-config-mirror :is([data-action=snap],[data-action=outline])[aria-pressed=true],#mp-config-mirror .atelier-display[open]>summary{font-weight:600;text-decoration-thickness:2px}
#mp-config-mirror .studio-upload.is-compact{align-items:flex-start;text-align:left}
@media(max-width:760px){
/* Outil ouvert sur téléphone (audit du 08/10) : la barre « Ma commande » reste à l'écran, l'outil se compacte pour lui laisser
   la place. Titre et fermeture tiennent sur une ligne (la flèche « ← Ma commande » et le titre prenaient 86 px des 139 px d'un
   panneau de téléphone de 664 px de haut) : le titre à gauche, un chevron vers le bas à droite, dont le nom accessible ne change
   pas (« Revenir à ma commande »). Le prix n'y est plus répété : la barre le porte. */
 #mp-config-mirror .atelier-panel>.atelier-panel-close{position:absolute;top:0;right:4px;z-index:1;display:block!important;width:44px;min-width:44px;height:44px;min-height:44px!important;margin:0;padding:0!important;overflow:hidden;white-space:nowrap;text-indent:-100em}
 #mp-config-mirror .atelier-panel-close>*{display:none}
 #mp-config-mirror .atelier-panel>.atelier-panel-close::after{content:'';position:absolute;left:50%;top:50%;width:8px;height:8px;border-right:1.75px solid currentColor;border-bottom:1.75px solid currentColor;transform:translate(-50%,-75%) rotate(45deg)}
 .mp-mirror.atelier .atelier-panel .atelier-tool>h2:first-child{display:flex;align-items:center;min-height:44px;margin:0 0 4px;padding-right:48px}
/* Décors, formes, styles d'attache : une rangée qui défile de côté (le panneau n'en montrait que la moitié d'une, rognée par la
   barre) ; la vignette suivante dépasse du bord, ce qui dit qu'on peut faire défiler. */
 .mp-mirror.atelier .atelier-panel :is(.studio-decors,.mp-range-shapes){display:grid;grid-auto-flow:column;grid-template-columns:none;grid-auto-columns:76px;gap:4px;margin:0 -16px;padding:0 16px 4px;overflow-x:auto;overscroll-behavior-x:contain;scroll-snap-type:x proximity;scroll-padding-inline:16px;scrollbar-width:none}
 .mp-mirror.atelier .atelier-panel :is(.studio-decors,.mp-range-shapes)::-webkit-scrollbar{display:none}
 .mp-mirror.atelier .atelier-panel :is(.studio-decors,.mp-range-shapes)>button{scroll-snap-align:start;min-width:0}
 .mp-mirror.atelier .atelier-panel .studio-decors>button{padding:4px}
 .mp-mirror.atelier .atelier-panel .studio-decors>button>span{width:44px;height:44px;margin:0 auto 2px}
}
@media(max-width:760px) and (max-height:700px){
/* Un peu plus haut que les 21 % d'avant : la rangée entière (vignette et nom) tient sous le titre de l'outil. */
 .mp-mirror.atelier .atelier-panel:not(:has(.mp-retouch)){max-height:25dvh}
}