/* Outils Okapix (étape 05) — s'appuie sur les tokens du :root de styles.css. */
.breadcrumb{font-size:.82rem;color:var(--text-muted);margin-bottom:26px}
.breadcrumb a{color:var(--text);font-weight:700;text-decoration:underline;text-underline-offset:3px}
.outil-panel{background:var(--surface);border:1px solid var(--border);border-radius:18px;padding:26px;margin:28px 0}
.outil-panel fieldset{border:0;padding:0;margin:0 0 20px}
.outil-panel legend{font-family:var(--font-heading);font-weight:700;color:var(--text);margin-bottom:10px}
.outil-panel label{display:block;font-weight:600;margin:6px 0;color:var(--text)}
.outil-panel input[type=number],.outil-panel select{width:100%;max-width:320px;padding:11px;border:1px solid #C9CAC5;border-radius:10px;background:#fff;color:var(--text)}
.outil-panel .choix label{display:flex;align-items:center;gap:10px;font-weight:400}
.outil-actions{display:flex;flex-wrap:wrap;gap:10px;margin-top:8px}
.outil-actions button{border:0;cursor:pointer}
.resultat{background:var(--callout-bg);border:1px solid var(--callout-border);color:var(--callout-text);border-radius:14px;padding:20px 22px;margin:24px 0}
.resultat:focus{outline:3px solid var(--signal-red);outline-offset:3px}
.resultat h2{font-size:1.35rem;margin-top:0}
.resultat p{color:var(--callout-text)}
.pastille{display:inline-flex;align-items:center;gap:6px;font:700 .74rem/1 var(--font-heading);text-transform:uppercase;letter-spacing:.06em;border:1px solid var(--border);background:#fff;color:var(--text);border-radius:999px;padding:6px 10px}
.pastille i{width:10px;height:10px;border-radius:50%;display:inline-block}
.mire{background:#FFFFFF;border:1px solid var(--border);border-radius:14px;padding:18px;display:block;margin:18px 0}
.mire svg,.paire svg{display:block;max-width:100%;height:auto}
.paire{background:#FFFFFF;border:1px solid var(--border);border-radius:14px;padding:16px;margin:18px 0;overflow-x:auto}
.legende{font-size:.84rem;color:var(--text-muted);margin-top:8px}
.canvas-zone{background:#FFFFFF;border:1px solid var(--border);border-radius:14px;padding:16px;margin:18px 0}
.canvas-zone canvas{max-width:100%;height:auto;display:block}
.recette{width:100%;border-collapse:collapse;background:#fff;font-size:.92rem}
.recette th,.recette td{border-bottom:1px solid var(--border);padding:10px;text-align:left;vertical-align:top}
.recette th{background:var(--fill)}
.outils-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:18px}.outils-grid .h3{font-size:1.3rem}
@media(max-width:700px){.outils-grid{grid-template-columns:1fr}}
.schema{background:#FFFFFF;border:1px solid var(--border);border-radius:14px;padding:16px;margin:24px 0}.schema svg{display:block;max-width:100%;height:auto}