/* Page de recette de la borne Mijolo (phase 1). Gros caractères : elle se lit debout, à un mètre. */
:root { color-scheme: light; --encre: #1c1c1c; --fond: #f6f4ef; --vert: #1f7a3a; --rouge: #a3261d; --gris: #6b6b6b; --ligne: #d9d4c7; }
* { box-sizing: border-box; }
body { margin: 0; background: var(--fond); color: var(--encre); font: 22px/1.4 system-ui, sans-serif; }
.mb-vide { max-width: 40em; margin: 4em auto; padding: 0 1em; }
.mb-page { padding: 24px 32px 48px; }
.mb-page h1 { font-size: 34px; margin: 0 0 4px; }
.mb-sous-titre { color: var(--gris); margin: 0 0 24px; font-size: 18px; }
.mb-bloc { background: #fff; border: 1px solid var(--ligne); border-left: 8px solid var(--gris); border-radius: 10px; padding: 16px 20px; margin: 0 0 20px; }
.mb-bloc.reussi { border-left-color: var(--vert); }
.mb-bloc.echec { border-left-color: var(--rouge); }
.mb-bloc h2 { font-size: 24px; margin: 0 0 8px; }
.mb-paires { display: grid; grid-template-columns: max-content 1fr; gap: 4px 16px; margin: 0; }
.mb-paires dt { color: var(--gris); }
.mb-paires dd { margin: 0; overflow-wrap: anywhere; }
.mb-boutons { display: flex; flex-wrap: wrap; gap: 12px; margin: 0 0 20px; }
.mb-boutons button { font: inherit; font-weight: 600; padding: 18px 26px; min-height: 64px; border: 0; border-radius: 10px; background: var(--encre); color: #fff; touch-action: manipulation; -webkit-tap-highlight-color: transparent; }
.mb-boutons button:active { transform: scale(0.98); }
.mb-boutons button:disabled { opacity: 0.4; }
.mb-chrono { list-style: none; margin: 0; padding: 0; font: 17px/1.4 ui-monospace, monospace; max-height: 14em; overflow-y: auto; }
.mb-chrono li { padding: 3px 0; border-bottom: 1px solid var(--ligne); }