/* Extension « métiers » : panneau Graphique dans la zone Moteur (mêmes variables que atelier.css). */
.mode-graph > .formule, .mode-graph > .touches, .mode-graph > .grille-cadre { display: none; }
.gr-panneau { flex: 1 1 auto; min-height: 0; overflow: auto; display: flex; flex-direction: column; gap: 8px; padding: 8px 12px; background: var(--surface); overscroll-behavior: contain; -webkit-overflow-scrolling: touch; }
.gr-panneau[hidden] { display: none; }
.gr-form { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)) auto; gap: 4px 8px; align-items: end; min-width: 0; flex: none; }
.gr-form h3 { display: none; }
.gr-form label { display: flex; flex-direction: column; gap: 3px; font-size: .78rem; font-weight: 650; color: var(--n7); }
.gr-form input, .gr-form select { min-height: 44px; border: 1px solid var(--n3); border-radius: 8px; padding: 0 10px; font: 500 .88rem var(--f-mono); background: var(--surface); color: var(--ink); width: 100%; min-width: 0; }
.gr-form .btn { min-height: 44px; }
.gr-apercu { flex: 1 0 150px; min-width: 0; display: flex; align-items: center; justify-content: center; border: 1px dashed var(--n3); border-radius: 10px; background: var(--n0); padding: 6px; }
.gr-apercu { position: relative; }
.gr-svg { position: absolute; inset: 6px; width: calc(100% - 12px); height: calc(100% - 12px); display: block; }
.gr-titre { font: 700 14px var(--f-ui, system-ui, sans-serif); fill: var(--ink); }
.gr-txt { font: 500 10px var(--f-ui, system-ui, sans-serif); fill: var(--n7); }
.gr-grille { stroke: var(--n2); stroke-width: 1; }
.gr-axe { stroke: var(--n5); stroke-width: 1.2; }
.gr-err { color: var(--ko); font-size: .86rem; padding: 8px; }
.gr-vide { padding: 8px; text-align: center; }
@media (max-width: 900px) {
  .gr-form { grid-template-columns: 1fr 1fr; }
  .gr-form .btn { grid-column: 1 / -1; }
  .gr-form label { font-size: .72rem; }
  .gr-apercu { flex-basis: 190px; }
}
#btnGraph[aria-pressed=true] { background: var(--bleu-soft); border-color: var(--bleu); color: var(--bleu-ink); }