/*
 * REGISTRE v3, transposé au poste de saisie — mêmes jetons que src/index.css :
 * papier chaud, encre, filets d'un cheveu, le navy #1F4E79 comme seul accent.
 * Polices servies par nous : le poste doit tenir même sans internet.
 */

@font-face{font-family:"IBM Plex Sans";font-style:normal;font-weight:400;font-display:swap;src:url(fonts/ibm-plex-sans-latin-400-normal.woff2) format("woff2")}
@font-face{font-family:"IBM Plex Sans";font-style:normal;font-weight:500;font-display:swap;src:url(fonts/ibm-plex-sans-latin-500-normal.woff2) format("woff2")}
@font-face{font-family:"IBM Plex Sans";font-style:normal;font-weight:600;font-display:swap;src:url(fonts/ibm-plex-sans-latin-600-normal.woff2) format("woff2")}
@font-face{font-family:"IBM Plex Sans";font-style:normal;font-weight:700;font-display:swap;src:url(fonts/ibm-plex-sans-latin-700-normal.woff2) format("woff2")}
@font-face{font-family:"IBM Plex Sans Arabic";font-style:normal;font-weight:400;font-display:swap;src:url(fonts/ibm-plex-sans-arabic-arabic-400-normal.woff2) format("woff2")}
@font-face{font-family:"IBM Plex Sans Arabic";font-style:normal;font-weight:500;font-display:swap;src:url(fonts/ibm-plex-sans-arabic-arabic-500-normal.woff2) format("woff2")}
@font-face{font-family:"IBM Plex Sans Arabic";font-style:normal;font-weight:600;font-display:swap;src:url(fonts/ibm-plex-sans-arabic-arabic-600-normal.woff2) format("woff2")}
@font-face{font-family:"IBM Plex Sans Arabic";font-style:normal;font-weight:700;font-display:swap;src:url(fonts/ibm-plex-sans-arabic-arabic-700-normal.woff2) format("woff2")}
@font-face{font-family:"IBM Plex Mono";font-style:normal;font-weight:400;font-display:swap;src:url(fonts/ibm-plex-mono-latin-400-normal.woff2) format("woff2")}
@font-face{font-family:"IBM Plex Mono";font-style:normal;font-weight:500;font-display:swap;src:url(fonts/ibm-plex-mono-latin-500-normal.woff2) format("woff2")}

:root{
  --paper:#f4f3ee; --sheet:#ffffff; --sheet-2:#fcfbf7; --sheet-3:#f4f3ee;
  --ink:#21201a; --ink-2:#49463d; --ink-3:#6b675a; --ink-4:#8a8677;
  --rule:#d3d0c4; --hair:#e7e5dc;
  --navy:#1f4e79; --navy-d:#163454; --navy-tint:#f2f5f9; --navy-b:#bfcfde;
  --red:#9c4433; --red-ink:#7f3729; --red-tint:#f9efec; --red-b:#f0dcd5;
  --green:#3d753a; --green-tint:#eff6ec; --green-b:#dcecd6;
  --gold:#8e691c; --gold-tint:#faf4e3; --gold-b:#f3e6c2;
  --ar:"IBM Plex Sans Arabic","IBM Plex Sans","Segoe UI",system-ui,sans-serif;
  --fr:"IBM Plex Sans","Segoe UI",system-ui,sans-serif;
  --mono:"IBM Plex Mono",ui-monospace,"Cascadia Mono",monospace;
}
*{box-sizing:border-box}
html,body{margin:0;padding:0}
body{
  background:var(--paper); color:var(--ink);
  font-family:var(--ar); font-size:14px; line-height:1.5;
  -webkit-font-smoothing:antialiased;
}
img{max-width:100%}
[hidden]{display:none !important}
.lat{font-family:var(--fr)}
.num{font-family:var(--mono); font-variant-numeric:tabular-nums}

/* ---------------- écran de connexion ---------------- */
.gate{min-height:100vh; display:grid; place-items:center; padding:24px 16px}
.gate-card{width:100%; max-width:380px; background:var(--sheet); border:1px solid var(--rule); padding:5px}
.gate-in{border:1px solid var(--hair); padding:26px 24px}
.gate h1{margin:0 0 4px; font-size:17px; font-weight:700; text-wrap:balance}
.gate .sub{margin:0 0 20px; font-family:var(--fr); font-size:12px; color:var(--ink-4)}
.gate .f{margin-bottom:14px}
.gate .btn{width:100%; justify-content:center}
.onsite{
  display:flex; gap:9px; align-items:flex-start; margin:0 0 14px;
  padding:10px 12px; background:var(--green-tint); border:1px solid var(--green-b);
  border-radius:3px; font-size:13px; color:var(--green); line-height:1.45;
}
.onsite .dot{margin-top:5px}
.onsite .hint{display:block; color:var(--ink-4)}

/* ---------------- bandeau ---------------- */
.topbar{position:sticky; top:0; z-index:30; background:var(--sheet); border-bottom:1px solid var(--rule)}
.topbar-in{max-width:1280px; margin:0 auto; padding:10px 16px; display:flex; align-items:center; gap:14px; flex-wrap:wrap}
.brand{display:flex; align-items:baseline; gap:8px; margin-inline-end:auto}
.brand b{font-size:15px; font-weight:600; letter-spacing:-.01em}
.brand span{font-size:11px; color:var(--ink-4); font-family:var(--fr); letter-spacing:.04em; text-transform:uppercase}
.counters{display:flex; align-items:stretch; border:1px solid var(--rule); background:var(--sheet-2); border-radius:3px; overflow:hidden}
.counter{padding:5px 12px; text-align:center; border-inline-start:1px solid var(--hair)}
.counter:first-child{border-inline-start:0}
.counter b{display:block; font-family:var(--mono); font-size:16px; font-weight:500; line-height:1.15}
.counter span{display:block; font-size:10px; color:var(--ink-4); font-family:var(--fr); letter-spacing:.05em; text-transform:uppercase}
.counter.warn b{color:var(--gold)}
.who{display:flex; align-items:center; gap:7px; font-family:var(--fr); font-size:12px; color:var(--ink-3)}
.who b{color:var(--ink); font-weight:600}
.dot{width:7px;height:7px;border-radius:50%;background:var(--green);display:inline-block;flex:none}
.dot.idle{background:var(--ink-4)}
.dot.bad{background:var(--red)}
.linkish{background:none; border:0; padding:2px 4px; font:inherit; color:var(--navy); text-decoration:underline; text-underline-offset:2px; cursor:pointer; border-radius:2px}

/* ---------------- grille ---------------- */
.wrap{max-width:1280px; margin:0 auto; padding:18px 16px 150px; display:grid; gap:18px; grid-template-columns:minmax(0,1fr) 320px}
@media (max-width:1040px){ .wrap{grid-template-columns:minmax(0,1fr)} }
.wrap.solo{grid-template-columns:minmax(0,1fr); max-width:1100px}

/* ---------------- la feuille ---------------- */
.sheet{background:var(--sheet); border:1px solid var(--rule); padding:5px}
.sheet-in{border:1px solid var(--hair); padding:22px 24px 26px}
@media (max-width:540px){ .sheet-in{padding:18px 14px 20px} }
.sheet-head{text-align:center; padding-bottom:16px; border-bottom:1px solid var(--rule)}
.sheet-head .school{font-size:13px; font-weight:600; color:var(--ink-2)}
.sheet-head .year{font-family:var(--mono); font-size:11px; color:var(--ink-4); letter-spacing:.06em}
.sheet-head h1{
  margin:10px 0 0; font-size:19px; font-weight:700; letter-spacing:-.01em;
  text-decoration:underline; text-underline-offset:5px; text-decoration-thickness:1.5px;
  text-decoration-color:var(--navy-b); text-wrap:balance;
}

fieldset{border:0; margin:0; padding:0; min-width:0}
.block{padding:18px 0; border-bottom:1px solid var(--hair)}
.block:last-of-type{border-bottom:0; padding-bottom:4px}
.block-title{
  font-size:11px; font-weight:600; letter-spacing:.09em; text-transform:uppercase;
  color:var(--navy); font-family:var(--fr); padding:0 0 10px; display:flex; gap:9px; align-items:baseline; flex-wrap:wrap;
}
.block-title .arlabel{font-family:var(--ar); letter-spacing:0; text-transform:none; font-size:13.5px; font-weight:600; color:var(--ink-2)}

.row{display:grid; gap:12px 14px; grid-template-columns:repeat(12,1fr)}
.f{display:flex; flex-direction:column; gap:4px; min-width:0}
.c3{grid-column:span 3}.c4{grid-column:span 4}.c5{grid-column:span 5}
.c6{grid-column:span 6}.c8{grid-column:span 8}.c12{grid-column:span 12}
@media (max-width:760px){ .c3,.c4,.c5{grid-column:span 6} .c8{grid-column:span 12} }
@media (max-width:440px){ .c3,.c4,.c5,.c6{grid-column:span 12} }

.lb{font-size:13px; font-weight:500; color:var(--ink)}
.req{color:var(--red); font-weight:700}
.hint{font-family:var(--fr); font-size:10.5px; color:var(--ink-4); letter-spacing:.02em; font-weight:400}

input[type=text],input[type=date],input[type=email],input[type=tel],input[type=password],select,textarea{
  width:100%; padding:7px 9px; font-family:inherit; font-size:14px; color:var(--ink);
  background:var(--sheet); border:1px solid var(--rule); border-radius:3px;
  transition:border-color .12s, box-shadow .12s;
}
input[dir=ltr],select[dir=ltr]{font-family:var(--mono); font-size:13.5px; letter-spacing:.02em}
textarea{resize:vertical; min-height:62px; line-height:1.55}
select{appearance:none; padding-inline-end:26px; cursor:pointer}
.selwrap{position:relative}
.selwrap::after{content:"▾"; position:absolute; inset-inline-end:9px; top:50%; transform:translateY(-50%); color:var(--ink-4); pointer-events:none; font-size:11px}
input:focus-visible,select:focus-visible,textarea:focus-visible,button:focus-visible{
  outline:none; border-color:var(--navy); box-shadow:0 0 0 3px var(--navy-b);
}
input:disabled,select:disabled{background:var(--sheet-3); color:var(--ink-4); cursor:not-allowed}
input.bad,select.bad,textarea.bad{border-color:var(--red); background:var(--red-tint)}
.msg{font-size:11px; font-family:var(--fr); line-height:1.4; margin:0}
.msg.err{color:var(--red-ink)} .msg.warn{color:var(--gold)}

.choices{display:flex; gap:8px; flex-wrap:wrap}
.choice{
  position:relative; display:inline-flex; align-items:center; gap:7px; cursor:pointer;
  padding:6px 12px; border:1px solid var(--rule); border-radius:3px;
  background:var(--sheet); font-size:13.5px; user-select:none; color:var(--ink);
}
.choice input{position:absolute; opacity:0; width:0; height:0}
.box{width:13px;height:13px;border:1.5px solid var(--ink-4);flex:none;position:relative;border-radius:1px}
.choice input:checked ~ .box{border-color:var(--navy); background:var(--navy)}
.choice input:checked ~ .box::after{content:""; position:absolute; inset:2px 2px 3px; border-bottom:1.5px solid #fff; border-inline-start:1.5px solid #fff; transform:rotate(-45deg)}
.choice:has(input:checked){border-color:var(--navy); background:var(--navy-tint); color:var(--navy-d); font-weight:500}
.choice:has(input:focus-visible){box-shadow:0 0 0 3px var(--navy-b)}
.choice.tick{padding:5px 10px; font-size:12.5px}
.subblock{margin-top:12px; padding:12px 14px; background:var(--sheet-2); border:1px solid var(--hair); border-radius:3px}

/* ---------------- barre d'actions ---------------- */
.actionbar{position:fixed; inset-inline:0; bottom:0; z-index:40; background:var(--sheet); border-top:1px solid var(--rule); padding:10px 16px}
.actionbar-in{max-width:1280px; margin:0 auto; display:flex; gap:10px; align-items:center; flex-wrap:wrap}
.checklist{margin-inline-end:auto; font-size:12px; font-family:var(--fr); color:var(--ink-3); min-width:0; line-height:1.5}
.checklist b{color:var(--red-ink); font-weight:600}
.checklist .ok{color:var(--green); font-weight:600}
.checklist button{background:none;border:0;padding:0 2px;color:var(--red-ink);font:inherit;text-decoration:underline;text-underline-offset:2px;cursor:pointer;border-radius:2px}

button.btn{
  font-family:var(--fr); font-size:13px; font-weight:500; padding:8px 15px;
  border:1px solid var(--rule); border-radius:3px; background:var(--sheet); color:var(--ink-2);
  cursor:pointer; white-space:nowrap; display:inline-flex; align-items:center; gap:6px;
  transition:background .12s,border-color .12s;
}
button.btn:hover{background:var(--sheet-3); border-color:var(--ink-4)}
button.btn.primary{background:var(--navy); border-color:var(--navy); color:#fff}
button.btn.primary:hover{background:var(--navy-d); border-color:var(--navy-d)}
button.btn.danger{color:var(--red-ink); border-color:var(--red-b)}
button.btn.danger:hover{background:var(--red-tint); border-color:var(--red)}
button.btn kbd{font-family:var(--mono); font-size:10px; opacity:.6}
button.btn:disabled{opacity:.45; cursor:not-allowed}

/* ---------------- panneau latéral ---------------- */
.side{display:flex; flex-direction:column; gap:14px; align-self:start; position:sticky; top:66px}
@media (max-width:1040px){ .side{position:static} }
.panel{background:var(--sheet); border:1px solid var(--rule)}
.panel-h{display:flex; align-items:center; gap:8px; padding:10px 13px; border-bottom:1px solid var(--hair); font-family:var(--fr); font-size:11px; font-weight:600; letter-spacing:.09em; text-transform:uppercase; color:var(--navy)}
.panel-h .n{margin-inline-start:auto; font-family:var(--mono); font-size:12px; color:var(--ink-3); letter-spacing:0; text-transform:none}
.panel-b{padding:12px 13px}
.list{max-height:min(48vh,440px); overflow-y:auto; margin:0; border-top:1px solid var(--hair)}
.item{display:flex; gap:9px; align-items:center; width:100%; text-align:start; padding:8px 13px; border:0; border-bottom:1px solid var(--hair); background:none; font:inherit; color:inherit; cursor:pointer}
.item:hover{background:var(--navy-tint)}
.item.on{background:var(--navy-tint); box-shadow:inset 3px 0 0 var(--navy)}
.item .idx{font-family:var(--mono); font-size:11px; color:var(--ink-4); flex:none; width:30px}
.item .nm{flex:1; min-width:0; font-size:13px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap}
.item .nm em{display:block; font-style:normal; font-family:var(--fr); font-size:10.5px; color:var(--ink-4)}
.pill{font-family:var(--fr); font-size:9.5px; font-weight:600; letter-spacing:.05em; text-transform:uppercase; padding:2px 6px; border-radius:2px; flex:none}
.pill.ok{background:var(--green-tint); color:var(--green); border:1px solid var(--green-b)}
.pill.warn{background:var(--gold-tint); color:var(--gold); border:1px solid var(--gold-b)}
.empty{font-family:var(--fr); font-size:12px; color:var(--ink-3); line-height:1.6; margin:0}
.empty ol{margin:8px 0 0; padding-inline-start:18px}
.empty li{margin-bottom:3px}
.note{font-family:var(--fr); font-size:11px; color:var(--ink-4); line-height:1.55; margin:0}
.note + .note{margin-top:7px}

/* ---------------- confirmation ---------------- */
dialog.confirm{
  border:1px solid var(--rule); border-radius:0; padding:0; background:var(--sheet);
  color:var(--ink); width:min(560px, calc(100vw - 32px)); box-shadow:0 12px 40px rgba(33,32,26,.22);
}
dialog.confirm::backdrop{background:rgba(33,32,26,.42)}
.confirm-in{padding:5px}
.confirm-body{border:1px solid var(--hair); padding:20px 22px}
.confirm h2{margin:0 0 3px; font-size:16px; font-weight:700}
.confirm .sub{margin:0 0 16px; font-family:var(--fr); font-size:12px; color:var(--ink-4)}
.recap{border:1px solid var(--hair); border-radius:3px; overflow:hidden; margin-bottom:14px}
.recap div{display:flex; gap:12px; padding:7px 11px; border-bottom:1px solid var(--hair); font-size:13px}
.recap div:last-child{border-bottom:0}
.recap div:nth-child(odd){background:var(--sheet-2)}
.recap dt{flex:none; width:128px; font-family:var(--fr); font-size:11px; color:var(--ink-4); margin:0; padding-top:2px}
.recap dd{margin:0; flex:1; min-width:0; overflow-wrap:anywhere}
.recap dd.none{color:var(--ink-4)}
.flag{border-radius:3px; padding:10px 12px; margin-bottom:12px; font-family:var(--fr); font-size:12px; line-height:1.55}
.flag.warn{background:var(--gold-tint); border:1px solid var(--gold-b); color:var(--gold)}
.flag.twin{background:var(--red-tint); border:1px solid var(--red-b); color:var(--red-ink)}
.flag b{font-weight:600}
.flag ul{margin:6px 0 0; padding-inline-start:18px}
.confirm-actions{display:flex; gap:9px; justify-content:flex-start}

.toast{position:fixed; inset-inline:0; bottom:78px; z-index:60; display:flex; justify-content:center; pointer-events:none; padding:0 16px}
.toast div{background:var(--ink); color:#fff; font-family:var(--fr); font-size:13px; padding:9px 16px; border-radius:3px; box-shadow:0 4px 14px rgba(33,32,26,.22); max-width:100%}
.toast div.bad{background:var(--red)}
@media (prefers-reduced-motion:no-preference){
  .toast div{animation:rise .18s ease-out}
  @keyframes rise{from{opacity:0;transform:translateY(6px)}to{opacity:1;transform:none}}
}

/* ---------------- administration ---------------- */
.tiles{display:grid; gap:12px; grid-template-columns:repeat(auto-fit,minmax(150px,1fr)); margin-bottom:16px}
.tile{background:var(--sheet); border:1px solid var(--rule); padding:14px 16px}
.tile b{display:block; font-family:var(--mono); font-size:26px; font-weight:500; line-height:1.1}
.tile span{display:block; font-family:var(--fr); font-size:11px; color:var(--ink-4); letter-spacing:.05em; text-transform:uppercase; margin-top:3px}
.tile.warn b{color:var(--gold)}
.tablewrap{overflow-x:auto; border-top:1px solid var(--hair)}
table.grid{border-collapse:collapse; width:100%; font-size:12.5px}
table.grid th,table.grid td{padding:7px 10px; text-align:start; border-bottom:1px solid var(--hair); white-space:nowrap}
table.grid th{font-family:var(--fr); font-size:10.5px; font-weight:600; letter-spacing:.06em; text-transform:uppercase; color:var(--ink-4); background:var(--sheet-2); position:sticky; top:0}
table.grid td.wrap{white-space:normal; min-width:220px; font-family:var(--fr); font-size:11.5px; color:var(--gold)}
table.grid tr:hover td{background:var(--navy-tint)}
table.grid tbody tr{cursor:pointer}
table.grid tbody tr.plain{cursor:default}
table.grid td.mono{font-family:var(--mono); font-size:12px}

.netform{display:flex; gap:8px; flex-wrap:wrap; align-items:center}
.netform input{flex:1; min-width:170px; padding:7px 9px; border:1px solid var(--rule); border-radius:3px; font-family:var(--fr); font-size:13px; background:var(--sheet); color:var(--ink)}
.netform .btn{flex:none}
.netnow{
  display:flex; gap:10px; align-items:center; flex-wrap:wrap; margin-bottom:11px;
  padding:9px 12px; border-radius:3px; font-family:var(--fr); font-size:12.5px;
  background:var(--sheet-2); border:1px solid var(--hair); color:var(--ink-2);
}
.netnow.on{background:var(--green-tint); border-color:var(--green-b); color:var(--green)}
.netnow.off{background:var(--gold-tint); border-color:var(--gold-b); color:var(--gold)}
.netnow code{font-family:var(--mono); font-size:13px; font-weight:500}
.netnow .btn{margin-inline-start:auto; padding:5px 11px; font-size:12px}
.panel-h .n.on{color:var(--green)} .panel-h .n.off{color:var(--gold)}