/* Atelier : rail d’outils (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. */
.atelier-rail{display:flex;flex-direction:column;gap:2px;padding:8px 8px;background:var(--atelier-paper);border-right:1px solid var(--atelier-line);overflow:auto}
.mp-studio .atelier-rail button{display:grid;justify-items:center;gap:4px;padding:8px 2px;font-size:var(--atelier-text-xs);line-height:1;border-color:transparent;background:transparent;min-height:56px;border-radius:var(--atelier-radius-card);color:var(--atelier-ink)}
.mp-studio .atelier-rail button[aria-pressed=true]{background:var(--atelier-soft)}
@media(max-width:760px){
 .atelier-rail{grid-row:3;flex-direction:row;justify-content:space-around;padding:4px;border-right:0;border-top:1px solid var(--atelier-line);overflow-x:auto}
 .mp-studio .atelier-rail button{min-width:56px;min-height:48px;padding:4px 2px;font-size:var(--atelier-text-xs)}
}
.atelier-rail{padding:16px 8px;gap:12px;border-color:var(--atelier-line);background:var(--atelier-paper)}
@media(max-width:760px){
 .atelier-rail{padding:2px 4px;gap:0;background:var(--atelier-paper)}
}
.mp-studio .atelier-rail .atelier-help-trigger{margin-top:auto;flex-shrink:0}
@media(max-width:760px){
 .mp-studio .atelier-rail .atelier-help-trigger{margin-top:0}
 .atelier-rail{padding-bottom:calc(3px + env(safe-area-inset-bottom))}
}
@media(max-width:400px){
/* Petit téléphone : chaque outil prend la largeur de son libellé (plus 4 px de chaque côté), le reste se répartit entre eux.
   À parts égales, « Éléments » remplissait sa case et touchait le cadre de l'outil voisin. */
 .atelier-rail{gap:0}
}
@media(min-width:761px){
 .atelier-body>.atelier-rail{grid-column:1;grid-row:1/3}
}
@media(max-height:540px) and (min-width:761px){
/* Écran bas et large (téléphone à l'horizontale) : la barre d'outils suit la page, collée en haut, et défile seule si
   elle est plus haute que l'écran moins l'en-tête de l'atelier (80 px au plus) : sous l'en-tête, elle tient dans l'écran. */
 .mp-studio.mp-mirror.atelier .atelier-rail{position:sticky;top:0;align-self:start;max-height:calc(100dvh - 80px);overflow-y:auto}
}
@media(max-width:760px){
 .mp-mirror.atelier .atelier-rail{grid-row:4}
}
/* Libellés du rail (plan 04, décision P04-c) : 13 px sur ordinateur, 12 px sur téléphone, 11 px sous 360 px de large.
   Mesure du 27/09 : huit libellés + 8 px de marge chacun = 345 px à 12 px (352 disponibles à 360 px), 369 px à 13 px ;
   290 px à 11 px avec 2 px de marge (312 disponibles à 320 px). Seule exception au plancher de 12 px de l'atelier. */
.mp-mirror.mp-studio.atelier .atelier-rail button{font-size:var(--atelier-text-sm)}
@media(max-width:760px){
 .mp-mirror.mp-studio.atelier .atelier-rail button{font-size:var(--atelier-text-xs)}
}
@media(max-width:359px){
 .mp-mirror.mp-studio.atelier .atelier-rail button{font-size:var(--atelier-text-rail-narrow);padding-inline:2px}
}