/* Atelier : commande (designs, quantités, formulaire) (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-studio.atelier .atelier-other-shape-open{display:flex;align-items:center;justify-content:center;gap:4px;min-height:40px;margin-top:8px;padding:8px 8px;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-sm);font-weight:600;line-height:1.2;text-align:center}
@media (hover:hover){
 .mp-studio.atelier .atelier-other-shape-open:hover{background:var(--atelier-soft)}
}
/* src/assets/configurator/mirror/order-panel.css
   Colonne « Ma commande » de l'atelier (plan 03, refonte 1). Ordinateur : la liste occupe la colonne de droite, l'outil ouvert
   (.has-panel) s'y superpose, la barre du bas (totaux, estimation, pièces de la boule affichée, « + Ajouter une boule »,
   « Vérifier ma commande ») reste visible. Téléphone (≤ 760 px) : la barre se pose au-dessus du rail, la liste s'ouvre en
   tiroir bas (.is-order-open). Chargée après editor.css et atelier-place.css (plan 02) : ses règles l'emportent par l'ordre,
   sauf le bloc « écran bas » d'atelier-place.css (sélecteur plus précis), qui garde la page défilante sous 540 px. */
.mp-mirror.atelier .atelier-side{grid-column:3;grid-row:1/-1;display:flex;flex-direction:column;min-width:0;min-height:0;border-left:1px solid var(--atelier-line);background:var(--atelier-paper)}
.mp-mirror.atelier .atelier-side-stack{position:relative;flex:1 1 auto;min-height:0}
.mp-mirror.atelier .atelier-order-body{position:absolute;inset:0;overflow:auto;padding:24px 16px 12px;overscroll-behavior:contain;font-size:var(--atelier-text-sm)}
.mp-mirror.atelier .atelier-side .atelier-panel{position:absolute;inset:0;z-index:2;border-left:0;display:none}
/* En 3D (outil 3D ou toute autre entrée en vue 3D), la boule prend la scène comme avant « Ma commande » : l'outil ouvert reste
   masqué (editor.css), la colonne montre la liste. `:where` garde la spécificité d'origine (le tiroir ouvert l'emporte toujours). */
.mp-mirror.atelier.has-panel:where(:not(.is-3d)) .atelier-side .atelier-panel{display:block}
.mp-mirror.atelier.has-panel:where(:not(.is-3d)) .atelier-order-body{visibility:hidden}
.atelier-order-top{display:flex;align-items:center;justify-content:space-between;gap:12px}
.atelier-order-title{font:600 var(--atelier-text-xl)/1.3 var(--font-edito-body,system-ui);margin:0 0 12px}
.atelier-order-close{display:none}
.atelier-order-boules{list-style:none;margin:0;padding:0;display:grid;gap:12px}
.atelier-order-boule{padding:12px;border:1px solid var(--atelier-line);border-radius:var(--atelier-radius-card);background:var(--atelier-paper)}
/* Boule affichée : fond papier foncé, sans cadre (décision de Robin du 29/09 : la direction artistique prime). */
.atelier-order-boule.is-current{background:var(--paper-deep,var(--atelier-soft));border-color:transparent}
.atelier-order-head{display:flex;align-items:center;gap:8px}
.mp-studio.atelier .atelier-order-name{display:flex;align-items:center;gap:8px;flex:1 1 auto;min-width:0;min-height:44px;padding:0;border:0;background:transparent;color:var(--atelier-ink);font:inherit;text-align:left;cursor:pointer}
.mp-studio.atelier span.atelier-order-name{cursor:default}
.atelier-order-name img,.atelier-order-version img{flex:none;width:32px;height:38px;object-fit:contain}
.atelier-order-name strong{display:block;font-size:var(--atelier-text-md);overflow-wrap:anywhere}
.atelier-order-name small{display:block;font-size:var(--atelier-text-xs);color:var(--atelier-muted)}
.mp-studio.atelier :is(.atelier-order-remove,.atelier-order-version-remove){flex:none;min-width:44px;min-height:44px;padding:0;border:0;background:transparent;color:var(--atelier-muted);cursor:pointer}
@media (hover:hover){
 .mp-studio.atelier :is(.atelier-order-remove,.atelier-order-version-remove):hover{color:var(--atelier-danger)}
}
:is(.atelier-order-remove,.atelier-order-version-remove) svg{width:18px;height:18px;fill:none;stroke:currentColor;stroke-width:1.6}
.atelier-order-versions{list-style:none;margin:8px 0 0;padding:0;display:grid;gap:2px}
.atelier-order-version{display:flex;align-items:center;gap:8px;min-height:44px}
.mp-studio.atelier .atelier-order-version-name{flex:1 1 auto;min-width:0;padding:0;border:0;background:transparent;color:var(--atelier-ink);font:inherit;font-size:var(--atelier-text-sm);text-align:left;overflow-wrap:anywhere;cursor:pointer}
.mp-studio.atelier span.atelier-order-version-name{cursor:default;font-weight:700}
.atelier-order-steps{display:inline-flex;align-items:center;gap:2px;flex:none}
.mp-studio.atelier .atelier-order-steps button{min-width:36px;min-height:36px;padding:0;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-lg);line-height:1;cursor:pointer}
.mp-studio.atelier .atelier-order-steps button:is(:disabled,[aria-disabled=true]){opacity:.4;cursor:not-allowed}
.mp-studio.atelier :is(.atelier-order-add,.atelier-order-more){display:inline-flex;align-items:center;gap:4px;min-height:44px;margin-top:4px;padding:0;border:0;background:transparent;color:var(--atelier-ink);font:inherit;font-size:var(--atelier-text-sm);font-weight:600;text-decoration:underline;text-underline-offset:4px;cursor:pointer}
.atelier-order-min{margin:8px 0 0;font-size:var(--atelier-text-xs);line-height:1.4}
.atelier-order-min.is-missing{color:var(--atelier-danger);font-weight:600}
/* Délai d'expédition de la commande (plan 05, D7 ; plus une date depuis le 08/10) : dans la barre sur ordinateur (style de .atelier-order-sum p), au pied du tiroir
   sur téléphone, où la barre masque son récapitulatif ; jamais les deux à la fois. */
.atelier-order-body .atelier-order-date{display:none}
.atelier-order-note{display:flex;flex-wrap:wrap;align-items:baseline;gap:0 12px;margin:12px 0 0;padding:8px 12px;border:1px solid var(--atelier-line);border-radius:var(--atelier-radius-card);background:var(--atelier-soft);font-size:var(--atelier-text-sm);line-height:1.45}
.mp-studio.atelier .atelier-order-note button{min-height:44px;padding:0;border:0;background:transparent;color:var(--atelier-ink);font:inherit;font-weight:600;text-decoration:underline;text-underline-offset:4px;cursor:pointer}
/* Pièces d'une autre boule changées depuis la colonne (passe 3, lot G1) : « Annuler » à la suite de « + », sur la même ligne, en lien sans cadre
   (rien ne s'allonge : la colonne ne bouge pas ; cible de 44 px, marges négatives pour ne pas dépasser la hauteur des boutons − et +, qui
   font 36 px). Plus spécifique que ces boutons du même groupe. */
.mp-studio.atelier .atelier-order-steps .atelier-order-undo-inline{flex:none;min-width:44px;min-height:44px;margin:-4px 0 -4px 8px;padding:0 4px;border:0;background:transparent;color:var(--atelier-ink);font:inherit;font-size:var(--atelier-text-sm);font-weight:600;text-decoration:underline;text-underline-offset:4px;cursor:pointer}
.mp-mirror.atelier .atelier-order-bar{flex:none;display:grid;gap:8px;padding:12px 16px 16px;border-top:1px solid var(--atelier-ink);background:var(--atelier-paper)}
.atelier-order-toggle{display:none}
.atelier-order-sum p{margin:0;font-size:var(--atelier-text-xs);line-height:1.45;color:var(--atelier-muted)}
.atelier-order-sum .atelier-order-total strong{font-size:var(--atelier-text-md);color:var(--atelier-ink)}
.atelier-order-sum .atelier-order-ship.is-ok{color:var(--atelier-ink)}
.atelier-order-sum .atelier-order-estimate{font-size:var(--atelier-text-md);font-weight:700;color:var(--atelier-ink)}
.atelier-order-sum .atelier-order-date{line-height:1.4}
/* Le prix dit comme l'annonce (08/10) : « 14,90 € + 4,90 € de livraison » en encre sous le nombre de pièces, puis le total. */
.atelier-order-sum .atelier-order-price{color:var(--atelier-ink);text-wrap:balance}
/* Détail du prix sous le titre du tiroir « Ma commande » (téléphone) : la barre n'y garde qu'une ligne (le total, livraison nommée),
   le détail et le palier de livraison offerte sont ici, visibles à l'ouverture. Ordinateur : la barre porte déjà le détail, rien
   n'est repris. */
.atelier-order-body .atelier-order-recap{display:none}
.atelier-order-actions{display:flex;flex-wrap:wrap;align-items:center;gap:8px}
.mp-studio.atelier .atelier-order-actions .atelier-other-shape-open{flex:1 1 auto;margin:0;min-height:44px}
.mp-studio.atelier .atelier-order-bar .atelier-continue{width:100%;min-height:48px}
@media(min-width:761px){
/* Ordinateur : la colonne (280 à 310 px) ne laisse pas la place au nom d'une version à côté de ses pièces ; le nom garde sa
   ligne, les pièces passent dessous, la vignette et la corbeille encadrent les deux lignes. */
 .atelier-order-version{display:grid;grid-template-columns:32px minmax(0,1fr) auto;column-gap:8px;row-gap:2px;align-items:center;padding:4px 0}
 .atelier-order-version>img{grid-column:1;grid-row:1/3}
 .atelier-order-version>.atelier-order-version-name{grid-column:2;grid-row:1}
 .atelier-order-version>.atelier-order-steps{grid-column:2;grid-row:2;justify-self:start}
 .atelier-order-version>.atelier-order-version-remove{grid-column:3;grid-row:1/3}
}
@media(max-width:760px){
 .mp-mirror.atelier .atelier-side,.mp-mirror.atelier .atelier-side-stack{display:contents}
 .mp-mirror.atelier .atelier-side .atelier-panel{position:static;grid-row:2;grid-column:1}
 .mp-mirror.atelier .atelier-body:has(.mp-retouch) .atelier-side .atelier-panel{grid-row:1/3;max-height:none;padding:16px}
 .mp-mirror.atelier .atelier-order-bar{grid-row:3;grid-column:1;grid-template-columns:minmax(0,1fr) auto;grid-template-areas:"toggle go" "actions actions";gap:8px 8px;padding:4px 8px 8px;border-top:1px solid var(--atelier-line)}
 .mp-mirror.atelier .atelier-order-sum{display:none}
 .atelier-order-body .atelier-order-date{display:block;margin:12px 0 0;font-size:var(--atelier-text-sm);line-height:1.45;color:var(--atelier-muted)}
 .atelier-order-body .atelier-order-recap{display:grid;gap:4px;margin:0 0 16px}
 .atelier-order-recap p{margin:0;font-size:var(--atelier-text-sm);line-height:1.45;color:var(--atelier-muted)}
 .atelier-order-recap :is(.atelier-order-price,.atelier-order-ship.is-ok){color:var(--atelier-ink)}
 .atelier-order-recap .atelier-order-estimate{font-size:var(--atelier-text-lg);font-weight:700;color:var(--atelier-ink)}
/* Empilé (27/09) : le titre garde sa ligne, le total passe dessous en plus petit ; sur une largeur réaliste (156 pièces,
    plus de 1 000 €) il n'est jamais coupé, il peut au pire passer à la ligne (jamais d'ellipse qui masquerait le prix). */
 .mp-studio.atelier .atelier-order-toggle{grid-area:toggle;display:flex;flex-direction:column;justify-content:center;gap:2px;min-width:0;min-height:44px;padding:4px 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-sm);font-weight:600;line-height:1.5;text-align:left}
 .mp-studio.atelier .atelier-order-toggle>span:first-child{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
 .atelier-order-toggle-sum{display:flex;flex-wrap:wrap;column-gap:.35em;min-width:0;font-size:var(--atelier-text-xs);font-weight:400;color:var(--atelier-muted);white-space:normal;overflow-wrap:anywhere;text-wrap:balance}
/* Prix dit comme l'annonce (08/10) : « 19,80 € » en gras, « livraison comprise » à sa suite ; sur une ligne étroite, ils passent à la
    ligne entre les deux au lieu de couper la phrase. */
 .atelier-order-toggle-sum :is(.atelier-order-amount,.atelier-order-tag){white-space:nowrap}
 .atelier-order-toggle-sum .atelier-order-amount{font-weight:600;color:var(--atelier-ink)}
 .mp-mirror.atelier .atelier-order-actions{grid-area:actions;flex-wrap:nowrap}
 .mp-studio.atelier .atelier-order-bar .atelier-continue{grid-area:go;width:auto;min-height:44px;padding:8px;font-size:var(--atelier-text-xs)}
/* Tiroir : posé dans la grille sur la scène et la feuille d'outil, il s'arrête au bord haut de la barre (jamais dessus).
    Pas modal (décision 9) : filet d'encre en haut, coins de 6 px, sans ombre portée. */
 .mp-mirror.atelier .atelier-order-body{display:none;position:relative;inset:auto;grid-row:1/3;grid-column:1;align-self:end;z-index:30;max-height:min(70dvh,100%);padding:16px;border-top:1px solid var(--atelier-ink);border-radius:var(--atelier-radius-card) var(--atelier-radius-card) 0 0;background:var(--atelier-paper);overflow:auto;visibility:visible}
/* Ouvert par-dessus un outil (.has-panel), le tiroir reste visible. */
 .mp-mirror.atelier.is-order-open .atelier-order-body{display:block;visibility:visible}
 .mp-studio.atelier .atelier-order-close{display:inline-flex;align-items:center;min-height:44px;padding:0 4px;border:0;background:transparent;color:var(--atelier-ink);font:inherit;font-size:var(--atelier-text-sm);font-weight:600;text-decoration:underline;text-underline-offset:4px}
}
@media(max-width:760px){
/* Téléphone, outil ouvert : la barre reste visible à toutes les hauteurs d'écran, sur une seule ligne fine (audit du 08/10 :
   de 541 à 699 px de haut elle s'effaçait le temps de l'outil, et le client qui venait de poser son prénom ne trouvait plus
   « Vérifier ma commande »). À gauche, le récapitulatif court de la commande (le bouton « Ma commande », qui ouvre le tiroir) ;
   à droite, « Vérifier ma commande », seul bouton encre de l'écran. Les pièces de la boule et « + Ajouter une boule »
   reviennent quand l'outil se ferme, et restent dans le tiroir. Une seule ligne laisse sa hauteur à la création (précédents :
   bande des quantités masquée sous 600 px, plan 02). En 3D (aucune feuille d'outil), la barre garde ses deux rangées (F18). */
 .mp-mirror.atelier.has-panel:where(:not(.is-3d)) .atelier-order-bar{grid-template-areas:"toggle go";padding:4px 8px}
 .mp-mirror.atelier.has-panel:where(:not(.is-3d)) .atelier-order-bar .atelier-order-actions{display:none}
/* La fermeture de l'outil (chevron) se pose dans le coin du panneau, qui défile avec lui (40-panneau.css). */
 #mp-config-mirror .atelier-side .atelier-panel{position:relative;padding-top:0}
}
@media(prefers-reduced-motion:reduce){
 .mp-mirror.atelier .atelier-order-body{scroll-behavior:auto}
}
/* Hauteur de la barre connue avant son premier rendu (audit du 08/10 : décalage de page de 0,134 à la création sur téléphone).
   --atelier-order-bar-height (00-jetons.css : 116 px, la barre à deux rangées du téléphone) est remplacé par la hauteur
   mesurée dès que studio-order.mjs la connaît ; jusqu'au premier rendu (:empty), la barre garde la place de son état de départ
   au lieu de pousser la composition quand elle se remplit. */
@media(max-width:760px){
 .mp-mirror.atelier .atelier-order-bar:empty{min-height:var(--atelier-order-bar-height)}
}
/* « + Ajouter une boule » au pied de la liste (order-panel.mjs) : montré seulement là où la barre ne le porte plus (téléphone,
   ordinateur de moins de 800 px de haut) ; ailleurs, celui de la barre suffit. */
.mp-studio.atelier .atelier-order-body .atelier-order-add-boule{display:none;width:100%;margin:12px 0 0;min-height:44px}
@media(max-width:760px){
/* Téléphone : la barre porte déjà « + Ajouter une boule » sous le tiroir ouvert (passe 3, lot G1 : il était en double). Celui de la liste ne
   s'affiche que là où la barre ne le porte plus : outil ouvert (même règle que l'ouverture du tiroir par-dessus l'outil), et téléphone
   à l'horizontale (plus bas). */
 .mp-studio.atelier.has-panel:where(:not(.is-3d)) .atelier-order-body .atelier-order-add-boule{display:flex}
}
@media(min-width:761px) and (max-height:799px){
/* Ordinateur bas (1280 × 720, portable 1366 × 768) et téléphone à l'horizontale d'au moins 761 px (844 × 390) ; audit du 08/10 : le bloc « Ma commande » faisait 256 px de la colonne et
   laissait 380 px à l'outil. Il tient maintenant sur deux rangées d'une hauteur utile : le total et les pièces de la boule
   affichée, puis « Vérifier ma commande » pleine largeur. Le détail (pièces et boules, livraison offerte, date) et
   « + Ajouter une boule » passent dans la liste, au-dessus de laquelle l'outil ouvert se superpose. */
 .mp-mirror.atelier .atelier-order-bar{grid-template-columns:minmax(0,1fr) auto;align-items:center;gap:8px 12px;padding:8px 16px 12px}
 .mp-mirror.atelier .atelier-order-bar .atelier-order-sum{grid-column:1;grid-row:1}
 .mp-mirror.atelier .atelier-order-bar .atelier-order-sum :is(.atelier-order-total,.atelier-order-ship,.atelier-order-date,.atelier-order-pending){display:none}
 .mp-mirror.atelier .atelier-order-bar .atelier-order-actions{grid-column:2;grid-row:1;flex-wrap:nowrap}
 .mp-mirror.atelier .atelier-order-bar .atelier-order-actions .atelier-other-shape-open{display:none}
 .mp-studio.atelier .atelier-order-bar .atelier-continue{grid-column:1/-1;grid-row:2}
 .mp-studio.atelier .atelier-order-body .atelier-order-add-boule{display:flex}
 .atelier-order-body .atelier-order-date{display:block;margin:12px 0 0;font-size:var(--atelier-text-sm);line-height:1.45;color:var(--atelier-muted)}
}
@media(max-height:540px) and (min-width:761px){
/* Écran bas et large (téléphone à l'horizontale, zoom ; plan 02 : sous 540 px, la page défile) : la colonne suit la page.
   La liste et l'outil ouvert y prennent leur hauteur, dans le flux ; la barre vient dessous, jamais recouverte par l'outil
   (superposés dans une pile de hauteur nulle, l'outil débordait sur « Vérifier ma commande »). */
 .mp-mirror.atelier .atelier-side-stack{flex:none}
/* « Vérifier ma commande » reste à l'écran : la barre, resserrée, colle au bas de l'écran pendant que la page défile ; un
    contrôle de la colonne qui prend le focus s'arrête au-dessus d'elle (WCAG 2.4.11, hauteur mesurée par studio-order). */
 .mp-mirror.atelier .atelier-order-bar{position:sticky;bottom:0;z-index:3;gap:8px;padding:8px 12px 12px}
 .mp-studio.atelier .atelier-order-bar .atelier-continue{min-height:44px}
 .mp-mirror.atelier .atelier-side-stack *{scroll-margin-bottom:calc(var(--atelier-order-bar-height,200px) + 8px)}
 .mp-mirror.atelier .atelier-order-body{position:static;inset:auto;overflow:visible}
 .mp-mirror.atelier.has-panel:where(:not(.is-3d)) .atelier-order-body{display:none}
 .mp-mirror.atelier .atelier-side .atelier-panel{position:static;inset:auto}
}
@media(max-width:379.98px){
/* Petit téléphone : la flèche décorative de « Vérifier ma commande » cède sa place, et le libellé passe à la ligne au lieu de
    chevaucher le récapitulatif (F45). */
 .mp-studio.atelier .atelier-order-bar .atelier-continue{white-space:normal}
 .mp-studio.atelier .atelier-order-bar .atelier-continue>[aria-hidden]{display:none}
}
/* Tableau « Prénoms et pièces » (plan 05, studio-series-controller.mjs/studio-series-table.mjs) : posé dans la boule affichée
   de « Ma commande », en plus de sa liste de versions (voir order-panel.mjs, bouleItem). Colonnes fixes (vignette, retrait)
   pour que le nom garde toute la largeur restante, sans jamais déborder de la colonne (test serie-table-browser.py). */
.atelier-series{margin:16px 0 0;padding-top:12px;border-top:1px solid var(--atelier-line)}
.atelier-series h3{margin:0 0 8px;font-size:var(--atelier-text-md);font-weight:600;color:var(--atelier-ink)}
.atelier-series.is-empty p{margin:0 0 12px;font-size:var(--atelier-text-sm);line-height:1.45;color:var(--atelier-muted)}
.atelier-series-alerts{list-style:none;margin:0 0 8px;padding:0;display:grid;gap:4px;font-size:var(--atelier-text-xs);line-height:1.4}
.atelier-series-alerts li{padding:8px 12px;border-radius:var(--atelier-radius-control);background:var(--atelier-soft)}
.atelier-series-alerts li.is-duplicate,.atelier-series-alerts li.is-empty{color:var(--atelier-danger)}
.atelier-series-alerts li button{margin-left:4px}
.atelier-series-table{width:100%;table-layout:fixed;border-collapse:collapse;font-size:var(--atelier-text-sm)}
.atelier-series-table th{padding:0 4px 4px;font-size:var(--atelier-text-xs);font-weight:600;color:var(--atelier-muted);text-align:left}
.atelier-series-table td{padding:4px;vertical-align:middle}
.atelier-series-table th:first-child,.atelier-series-table td:first-child{width:44px}
.atelier-series-table th:nth-child(3),.atelier-series-table td:nth-child(3){width:104px}
.atelier-series-table th:last-child,.atelier-series-table td:last-child{width:44px}
.atelier-series-table tr.has-alert{background:var(--atelier-soft)}
.atelier-series-thumb{display:block;width:40px;height:50px;padding:0}
.atelier-series-thumb img{display:block;width:100%;height:100%;object-fit:contain}
.atelier-series-name{width:100%;min-height:36px;padding:4px 8px}
.atelier-series-table tfoot td{padding:8px 4px 0;font-size:var(--atelier-text-xs);color:var(--atelier-muted)}
.atelier-series-add{display:inline-flex;align-items:center;gap:4px;min-height:44px;margin-top:4px}
.atelier-series-limit{margin:8px 0 0;font-size:var(--atelier-text-xs);color:var(--atelier-muted)}
.atelier-series-paste{margin-top:8px}
/* « Ajouter plusieurs prénoms » (coller une liste, importer un fichier) : action de la famille lien, sans cadre ; un chevron discret
   remplace le triangle du navigateur et se retourne à l'ouverture. */
/* Le même chevron partout où un volet se déplie (audit du 08/10, finitions : « Plus d'options » et « Copier vers l'autre face »
   gardaient le triangle ▶ du navigateur ; « Voir les N versions » de la commande : 55-paiement.css). */
:is(.atelier-series-paste,.atelier-precise,.atelier-copies)>summary{list-style:none;display:inline-flex;align-items:center;gap:8px;min-height:44px}
:is(.atelier-series-paste,.atelier-precise,.atelier-copies)>summary::-webkit-details-marker{display:none}
:is(.atelier-series-paste,.atelier-precise,.atelier-copies)>summary::after{content:'';flex:none;width:6px;height:6px;border-right:1.5px solid currentColor;border-bottom:1.5px solid currentColor;transform:translateY(-2px) rotate(45deg);transition:transform 200ms var(--ease-out,ease-out)}
:is(.atelier-series-paste,.atelier-precise,.atelier-copies)[open]>summary::after{transform:translateY(2px) rotate(-135deg)}
@media(prefers-reduced-motion:reduce){:is(.atelier-series-paste,.atelier-precise,.atelier-copies)>summary::after{transition:none}}
/* Champ de pièces entre ses boutons − et + : les boutons suffisent, les flèches natives (minuscules) en doublaient le geste. Le clavier
   garde les flèches haut et bas. */
.atelier-order-steps input[type=number]{-moz-appearance:textfield;appearance:textfield}
.atelier-order-steps input[type=number]::-webkit-inner-spin-button,.atelier-order-steps input[type=number]::-webkit-outer-spin-button{-webkit-appearance:none;margin:0}
.atelier-series-paste textarea{width:100%;min-height:96px;margin-top:4px}
.atelier-series-file{display:inline-flex;align-items:center;min-height:44px;padding:0;cursor:pointer}
.atelier-series-file input{position:absolute;width:1px;height:1px;overflow:hidden;opacity:0}
.atelier-collecte{margin-top:8px}
.atelier-collecte-open{display:inline-flex;align-items:center;min-height:44px;padding:0}
.atelier-collecte p{margin:4px 0 0;font-size:var(--atelier-text-xs);color:var(--atelier-muted)}
.atelier-series-message{margin:8px 0 0;font-size:var(--atelier-text-xs);line-height:1.4}
.atelier-series-message[hidden]{display:none}
/* Prénoms lisibles (audit du 08/10, lot 4 : le champ faisait 21 à 51 px sur ordinateur et tablette, la vignette un point de 6 px, la
   croix de retrait une largeur nulle). Le tableau se règle sur sa colonne : s'il ne laisse pas 160 px au prénom, chaque ligne passe sur
   deux rangées, vignette à gauche, prénom sur toute la largeur, pièces et retrait dessous. La ligne affichée sur la boule se détache
   en papier clair, prénom en gras (aria-current), sans cadre. */
.atelier-series{container-type:inline-size}
.mp-mirror .atelier-series-thumb{padding:2px}
.mp-mirror .atelier-series-remove{display:inline-grid;place-items:center;width:44px;min-width:44px;height:44px;padding:0}
.atelier-series-remove svg{width:20px;height:20px;fill:none;stroke:currentColor;stroke-width:1.5;stroke-linecap:round}
.atelier-series-table tr[aria-current=true]{background:var(--atelier-paper)}
.atelier-series-table tr[aria-current=true] .atelier-series-name{font-weight:600}
/* Lignes compactes (passe 3, lot G3b) : à la souris, une colonne de 280 à 359 px garde chaque prénom sur une seule ligne (vignette de
   28 px, champ, − pièces +, retrait). Au doigt (cibles de 44 px) ou sous 280 px, la ligne reste sur deux rangées. */
@container (max-width:279px){
 .atelier-series-table,.atelier-series-table :is(tbody,tfoot){display:block}
 .atelier-series-table thead{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap}
 .atelier-series-table tbody tr{display:grid;grid-template-columns:44px minmax(0,1fr) auto;column-gap:8px;align-items:center;padding:4px 0;border-radius:var(--atelier-radius-control)}
 .atelier-series-table tbody td:nth-child(n){display:block;width:auto;padding:0}
 .atelier-series-table tbody td:first-child{grid-row:1/3}
 .atelier-series-table tbody td:nth-child(2){grid-column:2/4}
 .atelier-series-table tbody td:nth-child(3){grid-column:2;justify-self:start}
 .atelier-series-table tbody td:last-child{grid-column:3}
 .atelier-series-table tfoot tr,.atelier-series-table tfoot td:nth-child(n){display:block;width:auto}
}
@container (min-width:280px) and (max-width:359px){
 @media(pointer:coarse){
  .atelier-series-table,.atelier-series-table :is(tbody,tfoot){display:block}
  .atelier-series-table thead{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap}
  .atelier-series-table tbody tr{display:grid;grid-template-columns:44px minmax(0,1fr) auto;column-gap:8px;align-items:center;padding:4px 0;border-radius:var(--atelier-radius-control)}
  .atelier-series-table tbody td:nth-child(n){display:block;width:auto;padding:0}
  .atelier-series-table tbody td:first-child{grid-row:1/3}
  .atelier-series-table tbody td:nth-child(2){grid-column:2/4}
  .atelier-series-table tbody td:nth-child(3){grid-column:2;justify-self:start}
  .atelier-series-table tbody td:last-child{grid-column:3}
  .atelier-series-table tfoot tr,.atelier-series-table tfoot td:nth-child(n){display:block;width:auto}
 }
 @media(pointer:fine){
  .atelier-series-table thead{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap}
  .atelier-series-table th:first-child,.atelier-series-table td:first-child{width:36px}
  .atelier-series-table th:nth-child(3),.atelier-series-table td:nth-child(3){width:104px}
  .atelier-series-table th:last-child,.atelier-series-table td:last-child{width:36px}
  .atelier-series-table td{padding:2px}
  .atelier-series-thumb{width:28px;height:34px}
  .mp-mirror .atelier-series-remove{width:32px;min-width:32px;height:32px}
 }
}
@media(min-width:761px) and (min-height:860px){
/* « + Une version » sur une boule qui porte un prénom ouvre l'outil Texte, qui recouvrait la note « Version ajoutée…
    Annuler » (relevé du plan 03). Tant qu'une note est là (la première retouche l'efface), elle se pose sous l'outil, au-dessus
    de la barre : l'outil garde le haut de la colonne et ne bouge pas quand elle s'en va. Moins haut que 860 px, la note (120 px)
    ferait défiler l'outil et cacherait « Appliquer à » : elle reste masquée (lecteur d'écran, Ctrl+Z, « ← Ma commande »). */
 .mp-mirror.atelier.has-panel:where(:not(.is-3d)) .atelier-side-stack:has(.atelier-order-note){display:flex;flex-direction:column}
 .mp-mirror.atelier.has-panel:where(:not(.is-3d)) .atelier-side-stack:has(.atelier-order-note)>.atelier-order-body{display:contents}
 /* Note d'une version (défaut du 29/09) : posée dans la boule affichée, sous « + Une version ». La liste et cette boule
    s'effacent alors elles aussi (display:contents) pour que la note reste un élément de la colonne, seul visible. */
 .mp-mirror.atelier.has-panel:where(:not(.is-3d)) .atelier-order-body:has(.atelier-order-note) :is(.atelier-order-boules,.atelier-order-boule):has(.atelier-order-note){display:contents}
 .mp-mirror.atelier.has-panel:where(:not(.is-3d)) .atelier-order-body:has(.atelier-order-note)>:not(.atelier-order-note,.atelier-order-boules:has(.atelier-order-note)){display:none}
 .mp-mirror.atelier.has-panel:where(:not(.is-3d)) .atelier-order-boules:has(.atelier-order-note)>:not(.atelier-order-boule:has(.atelier-order-note)){display:none}
 .mp-mirror.atelier.has-panel:where(:not(.is-3d)) .atelier-order-boule:has(.atelier-order-note)>:not(.atelier-order-note){display:none}
 .mp-mirror.atelier.has-panel:where(:not(.is-3d)) .atelier-side-stack:has(.atelier-order-note)>.atelier-panel{position:relative;inset:auto;flex:1 1 auto;min-height:0;scroll-padding-block:12px}
 .mp-mirror.atelier.has-panel:where(:not(.is-3d)) .atelier-order-body .atelier-order-note{order:1;flex:none;margin:8px 16px 12px;visibility:visible}
}
@media (min-width:561px) and (max-width:760px) and (max-height:540px){
/* Téléphone à l'horizontale (667 × 375 ; audit du 08/10 : l'atelier devenait une page de 1 471 px, « Vérifier ma commande » à
   1 300 px sous la boule). Même arrangement que l'ordinateur bas : le rail en colonne à gauche (il défile seul), la
   composition au centre, la liste ou l'outil et la barre à droite (« Total » et pièces, puis « Vérifier ma commande »). L'atelier
   garde la hauteur de l'écran, chaque colonne défile à part : plus de défilement de la page, la barre est toujours à l'écran. */
 /* Placée ici pour garder l’ordre de la cascade (responsabilité : 10-base). */
 .mp-studio.mp-mirror.atelier{height:var(--atelier-viewport-height,100dvh);min-height:0;overflow:hidden}
 /* Placée ici pour garder l’ordre de la cascade (responsabilité : 10-base). */
 .mp-mirror.atelier .atelier-body{grid-template-columns:64px minmax(0,1fr) 260px;grid-template-rows:minmax(0,1fr);grid-auto-rows:minmax(0,1fr);min-height:0}
 /* Placée ici pour garder l’ordre de la cascade (responsabilité : 20-rail). */
 .mp-mirror.atelier .atelier-rail{grid-column:1;grid-row:1;flex-direction:column;justify-content:flex-start;gap:0;padding:4px;border-top:0;border-right:1px solid var(--atelier-line);overflow-x:hidden;overflow-y:auto;position:static;max-height:none;min-height:0}
 /* Placée ici pour garder l’ordre de la cascade (responsabilité : 20-rail). */
 .mp-studio.atelier .atelier-rail button{min-width:0;width:100%;flex:none;min-height:56px}
 /* Placée ici pour garder l’ordre de la cascade (responsabilité : 20-rail). */
 .mp-mirror.atelier .atelier-rail .atelier-help-trigger{margin-top:0}
 /* Placée ici pour garder l’ordre de la cascade (responsabilité : 30-scene). */
 .mp-mirror.atelier .atelier-stage{grid-column:2;grid-row:1;align-self:stretch;overflow-y:auto;min-height:0}
 /* Placée ici pour garder l’ordre de la cascade (responsabilité : 30-scene). */
 .mp-mirror.atelier .atelier-stage>.studio-scene{height:auto;min-height:140px}
 .mp-mirror.atelier .atelier-side{display:flex;flex-direction:column;grid-column:3;grid-row:1;min-width:0;min-height:0;border-left:1px solid var(--atelier-line);background:var(--atelier-paper)}
 .mp-mirror.atelier .atelier-side-stack{display:block;position:relative;flex:1 1 auto;min-height:0}
 .mp-mirror.atelier .atelier-side .atelier-panel{position:absolute;inset:0;grid-row:auto;grid-column:auto;max-height:none;overflow:auto;border-top:0;z-index:2;padding:0 12px 12px}
 .mp-mirror.atelier .atelier-order-body{display:block;position:absolute;inset:0;grid-row:auto;grid-column:auto;align-self:auto;z-index:auto;max-height:none;overflow:auto;padding:12px;border-top:0;border-radius:0}
 .mp-mirror.atelier .atelier-order-close{display:none}
 .mp-mirror.atelier .atelier-order-bar{position:static;grid-row:auto;grid-column:auto;flex:none;display:grid;grid-template-columns:minmax(0,1fr) auto;grid-template-areas:none;padding:8px 12px;border-top:1px solid var(--atelier-ink);gap:8px}
 .mp-mirror.atelier .atelier-order-bar .atelier-order-toggle{display:none}
 .mp-mirror.atelier .atelier-order-bar .atelier-order-sum{display:block;grid-column:1;grid-row:1;grid-area:auto}
 .mp-mirror.atelier .atelier-order-bar .atelier-order-sum :is(.atelier-order-total,.atelier-order-ship,.atelier-order-date,.atelier-order-pending){display:none}
 .mp-mirror.atelier .atelier-order-bar .atelier-order-actions{display:flex;grid-area:auto;grid-column:2;grid-row:1;flex-wrap:nowrap}
 .mp-mirror.atelier .atelier-order-bar .atelier-order-actions .atelier-other-shape-open{display:none}
 .mp-studio.atelier .atelier-order-body .atelier-order-add-boule{display:flex}
 .mp-studio.atelier .atelier-order-bar .atelier-continue{grid-area:auto;grid-column:1/-1;grid-row:2;width:100%}
}
/* Premier écran allégé (08/10, audit du lot 3) : tant que la boule est vide, la carte de départ dit déjà quoi faire ; pas d'avertissement
   rouge « Boule vierge » dans la liste (30-scene.css masque aussi le zoom, « Alignement » et « Voir la découpe »). */
#mp-config-mirror .atelier.is-empty .atelier-order-boule.is-current .atelier-order-min.is-missing{display:none}