/* Noir et blanc, Arial ; monospace petit et capitales pour les libellés */
@font-face {
  font-family: "Payday Mono";
  src: url("fonts/payday-mono.ttf") format("truetype");
  font-weight: 400; font-style: normal; font-display: swap;
}
:root {
  --accent: #43DCFF; --blue: #43DCFF; --mono: "Payday Mono", "Courier New", Courier, monospace; --fg: #000; --bg: #fff; --g1: #f3f3f3; --g2: #d4d4d4; --g3: #777; }
* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body { margin: 0; font: 14px/1.45 Arial, Helvetica, sans-serif; color: var(--fg); background: var(--bg); }
a { color: inherit; }
.wrap { max-width: 1120px; margin: 0 auto; padding: 0 20px 60px; }
header.top { border-bottom: 1px solid var(--fg); }
header.top .wrap { padding-bottom: 0; }
nav { display: flex; flex-wrap: wrap; gap: 4px 18px; padding: 14px 0 0; }
nav a { font: 11px/1 var(--mono); text-transform: uppercase; letter-spacing: .05em;
        text-decoration: none; padding-bottom: 12px; border-bottom: 2px solid transparent; }
nav a.on { border-bottom-color: var(--fg); }
nav a.out { margin-left: auto; color: var(--g3); }
h1 { font-size: 22px; font-weight: 700; margin: 30px 0 18px; }
h2 { font: 700 13px/1.3 Arial, Helvetica, sans-serif; color: #fff; background: #000; position: relative;
     margin: 34px 0 12px; padding: 7px 10px; width: 30%; border-top-right-radius: 10px; }
/* soulignement noir qui prolonge le bandeau jusqu'au bord droit (les 70 % restants = 233,334 % de la largeur du h2) */
h2::after { content: ""; position: absolute; left: 100%; bottom: 0; width: 233.334%; height: 1px; background: #000; }
/* contenus sous un h2 : marge de 2,5 % à gauche et à droite */
main h2 ~ * { margin-left: 2.5%; margin-right: 2.5%; }
main h2 ~ h2 { margin-left: 0; margin-right: 0; }
h3 { font-size: 14px; margin: 18px 0 6px; }
p { margin: 8px 0; }
.mono, code { font-family: var(--mono); }
.small { font-size: 12px; }
.tiny { font: 10px/1.3 var(--mono); text-transform: uppercase; letter-spacing: .05em; }
.muted { color: var(--g3); }
.right { text-align: right; }
.scroll { overflow-x: auto; }

table { border-collapse: collapse; width: 100%; }
th { font: 11px/1.2 var(--mono); text-transform: uppercase; letter-spacing: .04em;
     text-align: left; padding: 7px 8px; border-bottom: 1px solid var(--blue); background: var(--blue); color: var(--fg); white-space: nowrap; font-weight: 400; }
td { padding: 7px 8px; border-bottom: 1px solid var(--g2); vertical-align: top; }
td.n, th.n { text-align: right; font-variant-numeric: tabular-nums; white-space: nowrap; }
tr.tot td { border-top: 1px solid var(--fg); font-weight: 700; }
tr:hover td { background: var(--g1); }
table.plain tr:hover td { background: none; }

input, select, textarea, button { font: inherit; }
input[type=text], input[type=email], input[type=password], input[type=date], input[type=number], select, textarea {
  border: 1px solid var(--fg); border-radius: 0; padding: 6px 7px; background: var(--bg); color: var(--fg); width: 100%; }
input::placeholder { color: var(--g3); }
input:focus, select:focus, textarea:focus { outline: 2px solid var(--fg); outline-offset: 0; }
textarea { min-height: 70px; }
label { display: block; font: 11px/1.2 var(--mono); text-transform: uppercase;
        letter-spacing: .04em; color: #444; margin: 0 0 4px; }
label.inline { display: inline-flex; align-items: center; gap: 6px; }
label.inline input { width: auto; }
button, .btn { font: 11px/1 var(--mono); text-transform: uppercase; letter-spacing: .05em;
               border: 1px solid var(--fg); background: var(--accent); color: var(--fg); padding: 9px 14px;
               cursor: pointer; text-decoration: none; display: inline-block; border-radius: 0; }
button:hover, .btn:hover { background: #2bc4ea; }
.btn.alt, button.alt { background: var(--bg); color: var(--fg); }
.btn.alt:hover, button.alt:hover { background: var(--g1); }
.btn.sm, button.sm { padding: 5px 8px; }
.btn.alt.sm, button.alt.sm { border: 0; border-bottom: 2px solid var(--blue); border-radius: 0; transition: transform .12s ease; }
.btn.alt.sm:hover, button.alt.sm:hover { background: var(--bg); transform: translateX(4px); }
.linkbtn { background: none; border: 0; color: inherit; padding: 0; text-decoration: underline;
           font: inherit; text-transform: none; letter-spacing: 0; cursor: pointer; }
.linkbtn:hover { background: none; }

.grid { display: grid; gap: 12px 14px; grid-template-columns: repeat(auto-fit, minmax(170px, 1fr)); }
.grid.c2 { grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); }
.row { display: flex; flex-wrap: wrap; gap: 10px; align-items: flex-end; }
.box { border: 1px solid var(--fg); padding: 16px; margin: 16px 0; }
.box.soft { border-color: var(--g2); background: var(--g1); }
.flash { border: 1px solid var(--fg); padding: 9px 12px; margin: 16px 0 0; }
.flash.err { background: var(--fg); color: var(--bg); }
.kpis { display: grid; grid-template-columns: repeat(auto-fit, minmax(170px, 1fr)); gap: 12px; margin: 10px 0; }
.kpi { border: 1px solid var(--fg); padding: 12px 14px; }
.kpi .v { font-size: 22px; font-weight: 700; margin-top: 4px; font-variant-numeric: tabular-nums; }
.tag { font: 10px/1 var(--mono); text-transform: uppercase; border: 1px solid var(--fg);
       padding: 2px 5px; white-space: nowrap; }
.tag.off { color: var(--g3); border-color: var(--g3); }
.link-private { font: 12px var(--mono); word-break: break-all; background: var(--g1); padding: 6px 8px; display: block; }
.hide { display: none !important; }
.preview { font: 12px/1.6 var(--mono); background: var(--g1); padding: 10px 12px; }
.preview b { font-weight: 700; }
form.inline { display: inline; }
.narrow { max-width: 380px; margin: 80px auto; }

@media (max-width: 700px) {
  .wrap { padding: 0 14px 50px; }
  nav a.out { margin-left: 0; }
  th, td { padding: 6px 5px; }
  h2 { width: auto; border-top-right-radius: 0; }
  h2::after { display: none; }
}

/* Édition en place (réglages) et croix de suppression */
.editable { cursor: text; border-bottom: 1px dotted var(--g3); }
.editable:hover { background: var(--g1); }
.editable input.ie { padding: 2px 4px; font: inherit; }
.x { text-decoration: none; font-size: 16px; line-height: 1; color: var(--g3); }
.x:hover { color: var(--fg); }

/* Onglets */
nav.tabs { display: flex; gap: 0; margin: 22px 0 6px; border-bottom: 1px solid var(--fg); padding: 0; }
nav.tabs a { font: 11px/1 var(--mono); text-transform: uppercase; letter-spacing: .05em; text-decoration: none;
             padding: 9px 14px; border: 1px solid transparent; border-bottom: 0; margin-bottom: -1px; color: var(--g3); }
nav.tabs a:hover { color: var(--fg); }
nav.tabs a.on { color: var(--fg); border-color: var(--fg); background: var(--bg); }