:root{--teal:#00697c;--teal-d:#004f5e;--orange:#f39c1f;--panel:#eef4f5;--ink:#2a3a42;--mute:#6b7c85;--line:#cbd8db;--ok:#1b7a3a;--ko:#b3261e}
*{box-sizing:border-box}
body{margin:0;background:#fff;color:var(--ink);font:14px/1.45 Roboto,"Segoe UI",Arial,sans-serif}

/* Bandeau et ligne d'état */
.bar{display:flex;align-items:center;gap:12px;height:53px;padding:0 20px;background:var(--teal);color:#fff}
.bar h1{margin:0;font-size:1.1rem;font-weight:500}
.state{display:flex;flex-wrap:wrap;align-items:baseline;gap:12px;margin:14px 5px 0;padding:0 15px 8px;border-bottom:3px solid var(--teal)}
.live{color:var(--teal);font-size:.78rem;font-weight:500}
.mute{color:var(--mute);font-size:.8rem}

/* Mise en page */
.layout{max-width:1240px;margin:0 auto;padding:16px 20px}
.toolbar{display:flex;flex-wrap:wrap;justify-content:space-between;align-items:flex-end;gap:8px 20px;margin-bottom:12px;border-bottom:1px solid var(--line)}
[role=tablist]{display:flex;gap:2px;margin-bottom:-1px}
[role=tab]{font:inherit;padding:9px 18px;border:0;background:none;color:var(--mute);cursor:pointer;border-bottom:3px solid transparent}
[role=tab][aria-selected=true]{color:var(--teal);font-weight:700;border-color:var(--orange)}
.actions{display:flex;flex-wrap:wrap;align-items:center;gap:6px;padding-bottom:6px}
.actions .btn{padding:5px 12px;text-align:center}
.actions .sep{width:1px;height:22px;background:var(--line);margin:0 4px}
.stage{background:var(--panel);padding:16px;border-radius:2px}
.stage[hidden]{display:none}

/* Formulaires et boutons */
label{display:flex;flex-direction:column;gap:3px;font-size:.8rem;color:var(--mute)}
input,select,textarea{width:100%;font:inherit;color:var(--ink);border:1px solid var(--line);border-radius:2px;padding:5px 8px;background:#fff}
input[type=radio]{width:auto}
textarea{resize:vertical}
.btn{font:inherit;padding:6px 12px;border:1px solid var(--teal);border-radius:2px;background:#fff;color:var(--teal);cursor:pointer;text-align:left}
.btn:hover{background:var(--panel)}
.btn.main{background:var(--teal);color:#fff}
.btn.main:hover{background:var(--teal-d)}
.btn:disabled{opacity:.35;cursor:default}
:focus-visible{outline:3px solid var(--orange);outline-offset:1px}

/* Composants des tests */
.opts{display:flex;flex-wrap:wrap;gap:12px;align-items:flex-end;margin-bottom:14px}
.opts label{min-width:170px;width:auto}
.seg{display:flex;gap:16px}
.seg label{flex-direction:row;align-items:center;gap:6px;color:var(--ink);font-size:.95rem}
.grid2{display:grid;grid-template-columns:1fr 1fr;gap:16px}
.card{background:#fff;border:1px solid var(--line);padding:10px;border-radius:2px}
.card h2{margin:0 0 6px;font-size:.95rem;font-weight:700}
canvas{display:block;width:100%;height:auto;border:1px solid var(--line);touch-action:none}
.hess canvas{cursor:crosshair}
details{margin-top:8px}summary{cursor:pointer;color:var(--teal)}
table{width:100%;border-collapse:collapse;margin-top:6px}
th{text-align:left;padding:8px 0 2px;color:var(--mute);font-size:.8rem;font-weight:500}
td{padding:2px 4px 2px 0}td:first-child{width:24%}
.chips{display:flex;flex-wrap:wrap;gap:6px;margin:8px 0;min-height:34px}
.chip{display:grid;place-items:center;width:34px;height:34px;border:1px solid var(--ink);border-radius:50%;background:#fff;cursor:grab;user-select:none;font-weight:500}
.chip.p{background:var(--teal);border-color:var(--teal);color:#fff;cursor:default}
.pad{display:grid;grid-template-columns:repeat(8,1fr);gap:5px;margin:6px 0}
.pad .btn{padding:6px 0;text-align:center}
.row{display:flex;gap:8px}
.result{list-style:none;margin:14px 0 0;padding:0}
.result li{margin-bottom:4px;padding:6px 10px;border-left:4px solid var(--line);background:#fff}
.result .pass{border-color:var(--ok)}.result .fail{border-color:var(--ko)}

@media(max-width:900px){.grid2{grid-template-columns:1fr}.actions{padding-bottom:10px}}

/* Téléphone : options du Hess sur 2 colonnes (interne | tracé, points | réinitialiser) */
@media(max-width:600px){
  .hess .opts{display:grid;grid-template-columns:1fr 1fr;gap:10px 12px;align-items:end}
  .hess .opts label{min-width:0}
  .hess .opts .btn{width:100%;text-align:center}
  .opt-inner{order:1}.opt-trace{order:2}.opt-rings{order:3}.opt-reset{order:4}
}