/* Atelier : fenêtres et menus (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. */
@media(max-width:760px){
 .mp-mirror.atelier .atelier-top>.atelier-project{flex:none}
 .mp-studio.atelier .atelier-top .atelier-project>summary{display:flex;align-items:center;justify-content:center;min-width:44px}
/* Le « ⋯ » seul : famille icône (80-composants), au lieu de la famille lien du « Projet » écrit, qui vise le sommaire par un
    identifiant. */
 #mp-config-mirror .mp-studio.atelier .atelier-top .atelier-project>summary{--survol-fond:var(--atelier-hover);--survol-texte:var(--atelier-ink);--survol-trait:auto;--appui-fond:var(--atelier-press);border-radius:var(--atelier-radius-control);font-size:var(--atelier-text-glyph);font-weight:400;text-decoration:none}
 .mp-studio.atelier .atelier-project .atelier-menu-history>button{flex:1 1 0}
}
.atelier-gamme-menu{position:absolute;top:calc(100% + 8px);left:0;width:310px;background:var(--atelier-paper);border:1px solid var(--atelier-line);border-radius:var(--atelier-radius-card);padding:12px;z-index:30}
.atelier-gamme-menu>p{font-size:var(--atelier-text-xs);color:var(--atelier-muted);margin:8px 12px 12px}
.mp-studio .atelier-gamme-menu button{display:block;width:100%;text-align:left;border:0;background:transparent;padding:12px;min-height:66px;color:var(--atelier-ink)}
.atelier-gamme-menu button span{display:block;font-size:var(--atelier-text-md);font-weight:600}
.atelier-gamme-menu button small{display:block;font-size:var(--atelier-text-xs);color:var(--atelier-muted);margin-top:4px}
.mp-studio .atelier-gamme-menu button[aria-pressed=true]{background:var(--atelier-soft)}
@media (hover:hover){
 .mp-studio .atelier-gamme-menu button:hover{background:var(--atelier-soft)}
}
.atelier-display>div{position:absolute;bottom:calc(100% + 8px);right:0;width:260px;padding:16px;background:var(--atelier-paper);border:1px solid var(--atelier-line);border-radius:var(--atelier-radius-card);z-index:10}
.atelier-display>div>button{width:100%;text-align:left}
@media(max-width:760px){
 .atelier-gamme-menu{width:285px}
}
.atelier-project{position:relative}
.atelier-project>summary{list-style:none;cursor:pointer;font-size:var(--atelier-text-xs);text-decoration:underline;text-underline-offset:3px}
.atelier-project>summary::-webkit-details-marker{display:none}
.atelier-project>div{position:absolute;right:0;top:calc(100% + 8px);z-index:30;display:grid;min-width:210px;padding:8px;background:var(--atelier-paper);border:1px solid var(--atelier-line);border-radius:var(--atelier-radius-card)}
.mp-studio.atelier .atelier-project :is(button,label){display:block;width:100%;min-height:44px;padding:12px;border:0;background:transparent;color:var(--atelier-ink);font:inherit;font-size:var(--atelier-text-xs);text-align:left;cursor:pointer}
@media (hover:hover){
 .mp-studio.atelier .atelier-project :is(button,label):hover{background:var(--atelier-soft)}
}
@media(max-width:760px){
 .atelier-gamme-menu{max-width:calc(100vw - 24px)}
}
.atelier-help{position:absolute;inset:0 0 0 auto;width:min(360px,calc(100% - 80px));z-index:15;overflow:auto;padding:24px;background:var(--atelier-paper);border:1px solid var(--atelier-line);color:var(--atelier-ink);font-size:var(--atelier-text-sm);line-height:1.5;box-sizing:border-box}
.atelier-help header{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-bottom:8px}
.atelier-help h2{font:600 var(--atelier-text-xl)/1.25 var(--font-edito-body,system-ui);margin:0}
.mp-studio .atelier-help [data-help-close]{min-width:44px;min-height:44px;background:transparent;border:0;font-size:var(--atelier-text-2xl);padding:4px}
.atelier-help p{margin:0 0 16px}
.atelier-help label{display:block;margin:16px 0;font-size:var(--atelier-text-sm);font-weight:500}
.atelier-help :is(input,select,textarea){display:block;width:100%;box-sizing:border-box;font:inherit;padding:8px 12px;margin:4px 0 0;min-height:44px}
.atelier-help textarea{resize:vertical;min-height:120px}
.atelier-help .atelier-help-pot{display:none}
.atelier-help :is(.atelier-help-context,.atelier-help-privacy,.atelier-help-direct){font-size:var(--atelier-text-xs);color:var(--atelier-muted)}
.atelier-help .atelier-help-context{margin:24px 0 8px;font-weight:500}
.atelier-help a{color:var(--atelier-ink);text-decoration:underline;text-underline-offset:3px}
.atelier-help [data-help-status]{padding:12px 0;font-weight:500}
/* Lot 5 (08/10) : le téléphone et quatre réponses courtes avant le formulaire ; le numéro est un lien d'appel de 44 px. */
.atelier-help .atelier-help-call{font-size:var(--atelier-text-md);line-height:1.5}
.atelier-help .atelier-help-call .atelier-help-phone{display:flex;align-items:center;width:max-content;min-height:44px;font-size:var(--atelier-text-xl);font-weight:600;white-space:nowrap}
.atelier-help-faq{margin:0 0 24px}
.atelier-help-faq>div{padding:12px 0;border-top:1px solid var(--atelier-line)}
.atelier-help-faq dt{font-size:var(--atelier-text-md);font-weight:600;line-height:1.4}
.atelier-help-faq dd{margin:4px 0 0;color:var(--atelier-muted);font-size:var(--atelier-text-sm);line-height:1.5}
.atelier-help .atelier-help-write{margin:0 0 8px;font-size:var(--atelier-text-lg);font-weight:600;line-height:1.3}
.atelier-help [data-help-status].is-error{color:var(--atelier-danger)}
/* Raccourcis clavier (passe 2, 08/10, finitions) : une ligne par geste, la touche à gauche en gras, sans cadre ; inutile au doigt seul. */
.atelier-help-keys{margin:0 0 24px}
.atelier-help-keys dl{margin:0}
.atelier-help-keys dl>div{display:grid;grid-template-columns:minmax(0,9.5em) minmax(0,1fr);gap:12px;padding:8px 0;border-top:1px solid var(--atelier-line)}
.atelier-help-keys dt{font-weight:600}
.atelier-help-keys dd{margin:0;color:var(--atelier-muted)}
@media(hover:none) and (pointer:coarse){.atelier-help-keys{display:none}}
@media(max-width:760px){
 .atelier-help{inset:0 0 58px;width:auto;padding:16px 24px}
 .atelier-help :is(input,select,textarea){font-size:var(--atelier-text-lg)}
 .atelier-top .atelier-project{grid-column:2;grid-row:1;min-width:0}
 .atelier-top :is(.atelier-gamme,.atelier-project)>summary{min-height:44px;box-sizing:border-box;align-content:center}
 /* Placée ici pour garder l’ordre de la cascade (responsabilité : 10-base). */
 .mp-studio.atelier :is(summary,input[type=range]){min-height:44px}
 /* Placée ici pour garder l’ordre de la cascade (responsabilité : 10-base). */
 .mp-studio.atelier :is(input[type=text],input[type=number],textarea,select){font-size:var(--atelier-text-lg);min-height:44px}
}
@media(pointer:coarse){
 /* Placée ici pour garder l’ordre de la cascade (responsabilité : 10-base). */
 .mp-studio.atelier :is(input[type=text],input[type=number],textarea,select){font-size:var(--atelier-text-lg)}
 /* Placée ici pour garder l’ordre de la cascade (responsabilité : 30-scene). */
 .mp-studio.atelier :is(summary,.atelier-history button,.atelier-faces button){min-height:44px}
}
/* Small phones (review 22/09, point 6): header on two compact rows, one row of steps, the tool panel
   leaves at least half of a 320 × 568 screen to the creation; keyboard-only hints stay off touch screens. */
.mp-studio .atelier-project{border:0;padding:0;margin:0}
.mp-studio .atelier-project>summary{align-content:center}
/* Choix pressé : fond --paper-deep (80-composants) et libellé en gras, une coche dans les deux menus ; plus de cadre de 2 px
   (décision de Robin du 29/09 : la direction artistique prime). Le survol ne fait que teinter. */
.mp-studio.atelier :is(.atelier-rail,.atelier-faces,.atelier-zone-panel,.atelier-gamme-menu,.studio-decors,.mp-range-shapes,.atelier-layers) button[aria-pressed=true]{font-weight:600}
.mp-studio.atelier :is(.atelier-gamme-menu,.atelier-font-list) button[aria-pressed=true]{position:relative;padding-right:48px}
.mp-studio.atelier :is(.atelier-gamme-menu,.atelier-font-list) button[aria-pressed=true]::after{content:"";position:absolute;right:14px;top:50%;width:16px;height:16px;margin-top:-8px;background:currentColor;mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m3 8.5 3 3 7-7'/%3E%3C/svg%3E") center/contain no-repeat}
@media(min-width:561px) and (max-width:760px) and (max-height:500px){
 .mp-mirror.atelier .atelier-top .atelier-project{grid-column:3;grid-row:1}
}
@media(max-width:760px){
/* Phones (review 22/09, P3): no customer text under 12 px. Exceptions: the rail labels (10 px: eight tools share 320 px)
   and, on screens up to 700 px high, the design strip, whose height the creation needs. */
 .mp-studio.atelier :is(.studio-hint,.atelier-guide,.atelier-guide p,.atelier-zone-panel p,.atelier-zone-panel button,.atelier-image-quality p,.atelier-sel-grid label,.atelier-unit,.atelier-stepper>span,.atelier-curve-labels,.atelier-gamme-menu>p,.atelier-gamme-menu small,.atelier-empty small,.studio-decors button,.atelier-save){font-size:var(--atelier-text-xs)}
}
/* Placée ici pour garder l’ordre de la cascade (responsabilité : 30-scene). */
.mp-studio.atelier .atelier-empty :is(.atelier-start-names>summary,.atelier-start-text-options>summary,[data-layout=logo],[data-layout=photo]){display:flex;align-items:center;justify-content:center;width:100%;box-sizing:border-box;min-height:44px;padding:8px 16px;border:1px solid var(--atelier-ink);border-radius:var(--atelier-radius-card);background:var(--atelier-paper);color:var(--atelier-ink);font-size:var(--atelier-text-md);font-weight:600;line-height:1.3;cursor:pointer;list-style:none}
/* Placée ici pour garder l’ordre de la cascade (responsabilité : 30-scene). */
.mp-studio.atelier .atelier-empty :is(.atelier-start-names,.atelier-start-text-options)[open]>summary{background:var(--atelier-soft)}
/* Placée ici pour garder l’ordre de la cascade (responsabilité : 30-scene). */
.atelier-start-names textarea{width:100%;box-sizing:border-box;min-height:112px;padding:8px;border:1px solid var(--atelier-line);border-radius:var(--atelier-radius-control);background:var(--atelier-paper);color:var(--atelier-ink);font:inherit;font-size:var(--atelier-text-lg);resize:vertical}
.atelier-other-shape{width:min(760px,calc(100vw - 32px));max-height:min(86dvh,760px);box-sizing:border-box;padding:24px 24px;border:1px solid var(--atelier-line);border-radius:var(--atelier-radius-control);box-shadow:var(--atelier-shadow-float);background:var(--atelier-paper);color:var(--atelier-ink);overflow:auto}
.atelier-other-shape::backdrop{background:var(--atelier-backdrop)}
.atelier-other-shape h2{margin:0 0 8px;font-size:var(--atelier-text-xl);line-height:1.25}
.atelier-other-shape>p{margin:0 0 8px;font-size:var(--atelier-text-md);line-height:1.5;color:var(--atelier-muted)}
.atelier-other-shape h3{margin:16px 0 8px;font-size:var(--atelier-text-md)}
.atelier-other-shape-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(104px,1fr));gap:8px}
.mp-studio.atelier .atelier-other-shape-grid button{display:flex;flex-direction:column;align-items:center;justify-content:flex-start;gap:8px;min-height:44px;padding:8px 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-sm);line-height:1.2;text-align:center}
@media (hover:hover){
 .mp-studio.atelier .atelier-other-shape-grid button:hover{border-color:var(--atelier-ink);background:var(--atelier-soft)}
}
.atelier-other-shape-grid :is(img,svg){width:64px;height:64px;object-fit:contain}
.atelier-other-shape-grid svg path{fill:var(--atelier-soft);stroke:var(--atelier-ink);stroke-width:1.2}
.mp-studio.atelier .atelier-other-shape-close{margin-top:16px;min-height:44px;padding:8px 16px;border:1px solid var(--atelier-line);border-radius:var(--atelier-radius-control);background:transparent;color:var(--atelier-ink);font-size:var(--atelier-text-md)}
@media(max-width:760px){
 .atelier-other-shape{width:calc(100vw - 16px);max-height:90dvh;padding:16px 12px}
 .atelier-other-shape-grid{grid-template-columns:repeat(auto-fill,minmax(78px,1fr));gap:8px}
 .mp-studio.atelier .atelier-other-shape-grid button{padding:8px 4px;font-size:var(--atelier-text-xs)}
 .atelier-other-shape-grid :is(img,svg){width:44px;height:44px}
}
/* Fenêtres de décision de l'atelier (27/09) : <dialog> modal centré, au-dessus de tout (bannière, barres, aperçu 3D, pied de
   colonne). Charte : encre sur papier, radius 4, seule ombre de l'atelier avec la fenêtre « Ajouter une autre boule ». */
.atelier-modal{width:min(460px,calc(100vw - 32px));max-height:calc(100dvh - 32px);box-sizing:border-box;margin:auto;padding:24px 24px;border:1px solid var(--atelier-line);border-radius:var(--atelier-radius-control);background:var(--atelier-paper);color:var(--atelier-ink);overflow:auto;font-size:var(--atelier-text-md);line-height:1.5;text-align:left;box-shadow:var(--atelier-shadow-float)}
.atelier-modal::backdrop{background:var(--atelier-backdrop)}
.atelier-modal h2{margin:0 0 8px;font-size:var(--atelier-text-xl);line-height:1.3;color:var(--atelier-ink)}
.atelier-modal p{margin:0 0 16px}
.atelier-modal-actions{display:flex;flex-wrap:wrap;gap:8px}
.mp-studio.atelier .atelier-modal-actions button{flex:1 1 auto;width:auto;min-height:44px;margin:0;padding:8px 16px;border:1px solid var(--atelier-line);border-radius:var(--atelier-radius-control);background:transparent;color:var(--atelier-ink);font-size:var(--atelier-text-md);line-height:1.3}
.mp-studio.atelier .atelier-modal-actions button[hidden]{display:none}
.mp-studio.atelier .atelier-modal-actions .atelier-primary{background:var(--atelier-ink);color:var(--atelier-paper);border-color:var(--atelier-ink)}
.atelier-project-dialog .atelier-project-head{display:flex;align-items:center;gap:16px;margin-bottom:12px}
.atelier-project-dialog .atelier-project-head p{margin:2px 0 0;font-size:var(--atelier-text-sm)}
.atelier-project-dialog img{flex:none;width:64px;height:64px;object-fit:contain;background:var(--atelier-paper);border:1px solid var(--atelier-line);border-radius:var(--atelier-radius-control)}
.atelier-project-dialog img[hidden]{display:none}
.atelier-resume-dialog .studio-hint{margin:12px 0 0;font-size:var(--atelier-text-xs);color:var(--atelier-muted)}
@media(max-width:760px){
 .atelier-modal{width:calc(100vw - 24px);padding:16px 16px}
 .mp-studio.atelier .atelier-modal-actions button{flex-basis:100%}
}
/* « Ajouter une autre boule », étape « Avec quel visuel ? » : deux grands choix, le premier en encre. */
.atelier-other-shape [data-other-step][hidden]{display:none}
.atelier-other-visual{display:grid;grid-template-columns:1fr 1fr;gap:12px;margin:12px 0 4px}
.mp-studio.atelier .atelier-other-visual button{display:flex;flex-direction:column;align-items:flex-start;gap:4px;min-height:88px;margin:0;padding:16px 16px;border:1px solid var(--atelier-line);border-radius:var(--atelier-radius-control);background:var(--atelier-paper);color:var(--atelier-ink);text-align:left;font-size:var(--atelier-text-sm);line-height:1.45}
.mp-studio.atelier .atelier-other-visual button strong{font-size:var(--atelier-text-lg)}
.mp-studio.atelier .atelier-other-visual button.atelier-primary{background:var(--atelier-ink);border-color:var(--atelier-ink);color:var(--atelier-paper)}
@media (hover:hover){
 .mp-studio.atelier .atelier-other-visual button:hover{border-color:var(--atelier-ink)}
}
.atelier-other-shape-foot{display:flex;flex-wrap:wrap;gap:8px;margin-top:16px}
.mp-studio.atelier .atelier-other-shape-foot .atelier-other-shape-close{margin-top:0}
.atelier-other-shape-grid small{display:block;font-size:var(--atelier-text-xs);color:var(--atelier-muted)}
@media(max-width:760px){
 .atelier-other-visual{grid-template-columns:1fr}
 .mp-studio.atelier .atelier-other-visual button{min-height:72px}
}
/* Menu des gammes : descriptions lisibles (12 px au moins, comme sur téléphone). */
.atelier-gamme-menu>p,.atelier-gamme-menu button small{font-size:var(--atelier-text-xs)}
@media(max-height:820px){
 /* Placée ici pour garder l’ordre de la cascade (responsabilité : 30-scene). */
 .mp-studio.atelier .atelier-empty>div:has(>.atelier-start-names[open])>:is(h2,p:not(.atelier-empty-alert),button,small,.atelier-reuse,.atelier-start-text-options,.atelier-start-models,.atelier-start-names:not([open])){display:none}
 /* Placée ici pour garder l’ordre de la cascade (responsabilité : 30-scene). */
 .mp-studio.atelier .atelier-start-names[open] textarea{min-height:76px;height:76px}
}
/* Placée ici pour garder l’ordre de la cascade (responsabilité : 50-commande). */
.atelier-order-steps input{width:58px;min-height:36px;padding:4px;border:1px solid var(--atelier-line);border-radius:var(--atelier-radius-control);background:var(--atelier-paper);color:var(--atelier-ink);font:inherit;font-size:var(--atelier-text-md);text-align:center}
@media(max-width:760px){
 /* Placée ici pour garder l’ordre de la cascade (responsabilité : 50-commande). */
 .mp-studio.atelier .atelier-order-steps button,.mp-studio.atelier .atelier-order-steps input{min-width:44px;min-height:44px}
}
@media(min-width:761px){
 .atelier-project [data-return-cart]{display:none}
}
.atelier-project [data-return-cart]{font-size:inherit;text-decoration:none}
.atelier-return-confirm{position:fixed;z-index:40;right:12px;left:12px;max-width:520px;margin-left:auto;border:1px solid var(--atelier-line);border-radius:var(--atelier-radius-card)}
/* Collecte des prénoms (plan 06a, collecte-dialog.mjs) : fenêtre .atelier-modal (carte rayon 6, ombre des fenêtres, fond
   assombri), montée dans l'atelier ; boutons dans les familles de 80-composants.css, champs au modèle commun. */
.collecte-dialog{width:min(520px,calc(100vw - 32px))}
.collecte-dialog p{margin:0}
.collecte-form{display:grid;gap:var(--atelier-space-3)}
.collecte-field label,.collecte-link label{display:block;margin-bottom:var(--atelier-space-1);font-weight:600}
.collecte-field :is(input,textarea),.collecte-link-row input{width:100%;min-height:44px;box-sizing:border-box;padding:var(--atelier-space-2) var(--atelier-space-3)}
.collecte-help,.collecte-copy-status{font-size:var(--atelier-text-xs);color:var(--atelier-muted)}
.collecte-check{display:flex;gap:var(--atelier-space-3);align-items:center;min-height:44px;cursor:pointer}
.collecte-check input{flex:none;width:20px;height:20px;margin:0}
.collecte-field[hidden],.collecte-error[hidden]{display:none}
.collecte-error{padding:var(--atelier-space-2) var(--atelier-space-3);border:1px solid var(--atelier-danger);border-radius:var(--atelier-radius-control);background:var(--atelier-soft);color:var(--atelier-danger)}
.collecte-trap{position:absolute;left:-10000px;width:1px;height:1px;overflow:hidden}
.collecte-link-row{display:flex;flex-wrap:wrap;gap:var(--atelier-space-2)}
.collecte-link-row input{flex:1 1 220px;width:auto}
.mp-studio.atelier .collecte-link-row button{min-height:44px;margin:0;padding:var(--atelier-space-2) var(--atelier-space-4)}
.mp-studio.atelier .collecte-actions .collecte-open-link{display:inline-flex;flex:1 1 auto;align-items:center;justify-content:center;min-height:44px;box-sizing:border-box;padding:var(--atelier-space-2) var(--atelier-space-4);text-align:center}
@media(max-width:760px){
 .mp-studio.atelier .collecte-actions .collecte-open-link{flex-basis:100%}
}
/* Menu « ⋯ » : entrée « Alignement automatique », seulement sur téléphone (décision du 09/10, passe 3 ; sur ordinateur,
   le bouton reste dans la barre de la toile, cf. 45-reperes.css). */
#mp-config-mirror .atelier-project .atelier-menu-snap{display:none}
@media (max-width:760px){
 #mp-config-mirror .atelier-project .atelier-menu-snap{display:block}
 #mp-config-mirror .atelier-project .atelier-menu-snap[aria-pressed=true]::after{content:" ✓";font-weight:600}
}