/* Novair — gabarit page-outil. Complément de novair.css, mêmes variables. */

.foot .brand{margin-bottom:var(--s3)}

.tool-hero{padding:var(--s7) 0 var(--s5)}
.tool-hero h1{max-width:22ch}
.tool-hero .lead{max-width:46rem}

.tool-card{
  background:var(--surface);border:1px solid var(--line);border-radius:var(--r-lg);
  box-shadow:var(--shadow-2);padding:var(--s5);margin:0 0 var(--s6);
}
@media (min-width:40rem){.tool-card{padding:var(--s6)}}

.tool-drop{
  display:flex;flex-direction:column;align-items:center;justify-content:center;gap:var(--s2);
  min-height:11rem;padding:var(--s5);text-align:center;cursor:pointer;
  border:2px dashed var(--acc-line);border-radius:var(--r);background:var(--acc-soft);
  transition:border-color .18s var(--ease),background .18s var(--ease),transform .18s var(--ease);
}
.tool-drop:hover,.tool-drop.over{border-color:var(--acc);background:var(--surface-2)}
.tool-drop.over{transform:scale(1.005)}
.tool-drop strong{color:var(--ink);font-size:1.15rem}
.tool-drop p{margin:0;max-width:34rem}
.tool-drop .ico{color:var(--acc)}
.tool-drop .ico svg{width:28px;height:28px}

.tool-state{
  margin:var(--s4) 0 0;padding:var(--s3) var(--s4);border-radius:var(--r-sm);
  border:1px solid var(--line);background:var(--surface-2);font-size:.95rem;max-width:none;
}
.tool-state[data-kind=ok]{border-color:var(--ok);background:var(--ok-bg);color:var(--ok)}
.tool-state[data-kind=error]{border-color:var(--pro-line);background:var(--pro-bg);color:var(--pro)}

.tool-result{margin-top:var(--s5);border-top:1px solid var(--line);padding-top:var(--s5)}
.tool-result:focus{outline:none}
.tool-result h2{font-size:1.35rem;margin-bottom:var(--s3)}
.tool-meta{font-size:.92rem;color:var(--muted);margin-bottom:var(--s4);max-width:none}

.fields{display:grid;grid-template-columns:1fr;gap:var(--s1) var(--s4);margin:0 0 var(--s5)}
@media (min-width:34rem){.fields{grid-template-columns:minmax(9rem,14rem) 1fr}}
.fields dt{color:var(--muted);font-size:.9rem}
.fields dd{margin:0 0 var(--s3);color:var(--ink);font-weight:600}
@media (min-width:34rem){.fields dd{margin-bottom:var(--s2)}}

.xml-box{
  margin:0 0 var(--s4);padding:var(--s4);max-height:24rem;overflow:auto;
  background:var(--surface-2);border:1px solid var(--line);border-radius:var(--r-sm);
  font-family:var(--mono);font-size:.8rem;line-height:1.5;color:var(--ink-2);
  white-space:pre;tab-size:2;
}

.tool-actions{display:flex;flex-wrap:wrap;gap:var(--s3);margin:0}

.tool-note{font-size:.9rem;color:var(--muted);margin:var(--s4) 0 0}

.tool-panel{padding-block:0 var(--s7)}

.tool-body{padding:var(--s7) 0 var(--s8)}
.tool-body section{padding-block:0;margin:0 0 var(--s8)}
.tool-body section:last-child{margin-bottom:0}
.tool-body h2{margin-bottom:var(--s4)}
.tool-body h3{margin:var(--s5) 0 var(--s2)}
.tool-body ol{margin:0 0 var(--s4);padding-left:1.25rem;max-width:var(--w-text)}
.tool-body ol li{margin-bottom:var(--s2)}

.tool-cta{
  background:var(--surface);border:1px solid var(--line);border-radius:var(--r-lg);
  box-shadow:var(--shadow-1);padding:var(--s6);text-align:center;
}
.tool-cta h2{margin-bottom:var(--s3)}
.tool-cta p{margin-inline:auto}
.tool-cta .btns{justify-content:center}