* { box-sizing:border-box; }
body { margin:0; }
button,input,select,textarea { font:inherit; color:inherit; }
button,select,summary { cursor:pointer; }
button, a { -webkit-tap-highlight-color:transparent; }
a { color:var(--info); text-underline-offset:3px; }
button:focus-visible,a:focus-visible,input:focus-visible,select:focus-visible,textarea:focus-visible,summary:focus-visible { outline:2px solid var(--focus); outline-offset:2px; }
h1,h2,h3,p { margin:0; }
h1 { font-size:28px; line-height:36px; font-weight:700; letter-spacing:-.025em; }
h2 { font-size:22px; line-height:30px; font-weight:600; }
h3 { font-size:18px; line-height:26px; font-weight:600; }
small,.small { font-size:12px; line-height:16px; }
small,.muted { color:var(--ink-muted); }
strong,b,.amount { font-weight:700; }
.amount { white-space:nowrap; font-variant-numeric:tabular-nums; }
.logo { width:142px; height:auto; display:block; }
.eyebrow { color:var(--brand-deep); font-size:11px; font-weight:700; letter-spacing:.14em; text-transform:uppercase; }
.btn { display:inline-flex; justify-content:center; align-items:center; gap:7px; min-height:39px; padding:var(--space-2) var(--space-4); border:1px solid var(--border-strong); border-radius:var(--radius-md); background:var(--surface); font-size:13px; line-height:18px; font-weight:500; text-decoration:none; white-space:nowrap; color:var(--ink); }
.btn:hover { background:var(--surface-alt); }
.btn.primary { color:var(--on-brand); background:var(--brand); border-color:var(--brand); }
.btn.primary:hover { background:var(--brand-hover); border-color:var(--brand-hover); }
.btn.tiny { min-height:32px; padding:5px 8px; font-size:12px; }
.btn.danger { color:var(--danger); }
.btn[disabled] { opacity:.55; cursor:wait; }
.text-btn { border:0; background:transparent; color:var(--brand-deep); font-weight:700; padding:2px; text-align:left; }
.actions { display:flex; gap:8px; flex-wrap:wrap; align-items:center; }
.icon { width:18px; height:18px; stroke:currentColor; fill:none; stroke-width:1.7; stroke-linecap:round; stroke-linejoin:round; flex:0 0 auto; }
.shell { display:grid; grid-template-columns:234px minmax(0,1fr); min-height:100vh; }
.side { display:flex; flex-direction:column; gap:17px; position:sticky; top:0; height:100vh; padding:22px 15px; background:var(--navy); color:var(--on-navy); overflow:auto; }
.side .logo { width:min(176px,100%); margin:var(--space-2) 0; }
.school-tag { padding:var(--space-3); background:var(--navy-700); border-radius:var(--radius-md); }
.school-tag strong { display:block; line-height:1.25; margin-bottom:3px; }
.side nav { display:grid; gap:4px; }
.nav-item { display:flex; align-items:center; gap:10px; border:0; border-left:3px solid transparent; border-radius:var(--radius-md); padding:var(--space-2) var(--space-3); background:transparent; text-align:left; font-size:13px; line-height:18px; color:var(--on-navy-muted); }
.nav-item.active { background:var(--navy-700); color:var(--on-navy); font-weight:600; border-left-color:var(--brand); }
.nav-item:hover { background:var(--navy-700); color:var(--on-navy); }
.side-foot { margin-top:auto; display:grid; gap:8px; padding:10px; }
.header { padding:13px 23px; background:var(--navy); color:var(--on-navy); display:flex; align-items:center; gap:9px; justify-content:space-between; min-height:64px; }
.header-right { display:flex; align-items:center; justify-content:flex-end; flex-wrap:wrap; gap:8px; }
.header-school { font-weight:700; font-size:13px; }
.content { max-width:1530px; margin:auto; padding:24px; }
.hero { display:flex; align-items:flex-end; justify-content:space-between; gap:15px; flex-wrap:wrap; margin:3px 0 18px; }
.hero .eyebrow { margin-bottom:8px; }
.hero p { margin-top:7px; }
.card,.panel { border:1px solid var(--border); background:var(--surface); border-radius:var(--radius-lg); box-shadow:var(--shadow-card); }
.card { padding:var(--space-6); }
.panel { margin-top:15px; overflow:hidden; }
.panel-head { display:flex; justify-content:space-between; align-items:center; flex-wrap:wrap; gap:10px; padding:16px; border-bottom:1px solid var(--border); }
.panel-body { padding:16px; }
.panel-body .hint,.dialog-body .hint { margin-top:12px; }
.grid { display:grid; grid-template-columns:repeat(auto-fit,minmax(190px,1fr)); gap:12px; }
.kpi { padding:15px; min-height:97px; }
.kpi strong { display:block; font-size:clamp(22px,2.15vw,36px); line-height:1.25; margin-top:var(--space-2); overflow-wrap:anywhere; }
.kpi .hint { margin-top:4px; }
.split { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:14px; }
.banner { padding:var(--space-4); background:var(--info-soft); border-radius:var(--radius-md); color:var(--info); font-size:13px; margin-bottom:var(--space-4); }
.banner.warning { background:var(--warning-soft); color:var(--warning); }
.empty { color:var(--ink-muted); text-align:center; padding:25px 15px; }
.tag { border-radius:var(--radius-full); display:inline-flex; align-items:center; gap:var(--space-1); font-size:12px; line-height:16px; font-weight:600; padding:5px 8px; background:var(--surface-alt); color:var(--ink-muted); white-space:nowrap; }
.tag.good { background:var(--success-soft); color:var(--success); }
.tag.warn { background:var(--warning-soft); color:var(--warning); }
.tag.bad { background:var(--danger-soft); color:var(--danger); }
.tag.info { background:var(--info-soft); color:var(--info); }
.table-wrap { overflow:auto; }
table { width:100%; border-collapse:collapse; font-size:15px; line-height:24px; text-align:left; }
th,td { padding:10px 12px; border-bottom:1px solid var(--border); vertical-align:middle; }
th { background:var(--surface-alt); color:var(--ink-muted); font-size:13px; line-height:18px; font-weight:500; white-space:nowrap; }
tr:last-child td { border-bottom:0; }
td small { display:block; margin-top:3px; }
.filters { display:flex; gap:9px; align-items:center; flex-wrap:wrap; padding:12px 16px; border-bottom:1px solid var(--border); }
.field { display:grid; gap:5px; min-width:0; font-size:13px; font-weight:700; }
.field input,.field select,.field textarea,.filter { background:var(--surface); border:1px solid var(--border-strong); border-radius:var(--radius-sm); min-height:39px; color:var(--ink); padding:7px 9px; width:100%; min-width:0; font-weight:400; }
.field select[multiple] { min-height:115px; }
.field textarea { resize:vertical; }
.filter { width:auto; max-width:100%; font-size:13px; }
.form-grid { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:12px; }
.full { grid-column:1/-1; }
.check { display:flex; gap:7px; align-items:center; min-height:34px; font-size:13px; }
.check input { accent-color:var(--brand-deep); }
form .actions { margin-top:14px; }
.form-error { color:var(--danger); font-size:13px; min-height:4px; margin-top:8px; }
.dialog-head { display:flex; justify-content:space-between; align-items:start; gap:12px; padding:16px 20px; border-bottom:1px solid var(--border); }
.dialog-head p { margin-top:3px; }
.dialog-body { padding:18px 20px; }
dialog { width:min(780px,calc(100% - 24px)); padding:0; border:1px solid var(--border); border-radius:var(--radius-lg); max-height:90dvh; color:var(--ink); background:var(--surface); box-shadow:var(--shadow-pop); }
dialog::backdrop { background:var(--scrim); }
#toast { position:fixed; z-index:4; bottom:20px; left:50%; transform:translateX(-50%); max-width:calc(100% - 24px); background:var(--navy); color:var(--on-navy); padding:11px 15px; border-radius:10px; font-size:13px; box-shadow:var(--shadow-pop); }
#toast:empty { display:none; }
.login { min-height:100dvh; display:grid; place-items:center; padding:24px; background:radial-gradient(circle at 85% 10%,var(--brand-soft),transparent 52%),var(--bg); }
.login .card { width:min(550px,100%); padding:clamp(18px,4vw,32px); }
.login .logo { margin-bottom:24px; }
.login .form-grid { margin-top:18px; }
.login p { margin-top:9px; }
.login .hint { margin-top:14px; }
.login-alternative { border-top:1px solid var(--border); margin-top:17px; padding-top:13px; }
.doc { border:1px solid var(--border); border-radius:12px; padding:16px; }
.doc h3 { font-size:21px; }
.doc-header { border:1px solid var(--border); border-radius:9px; margin-bottom:15px; overflow:hidden; break-inside:avoid; }
.doc-school-brand { display:flex; align-items:center; gap:12px; padding:12px; background:var(--school-primary); color:var(--school-on-primary); border-bottom:4px solid var(--school-accent); }
.doc-school-brand img { width:50px; height:50px; padding:4px; object-fit:contain; background:var(--document-white); border-radius:6px; }
.doc-school-brand strong { display:block; font-size:17px; }
.doc-school-details { padding:8px 12px; overflow-wrap:anywhere; }
.doc-school-details:empty { display:none; }
.doc-header small { display:block; color:inherit; }
.doc-header ul { margin:4px 0 0; padding-left:16px; font-size:12px; }
.doc th,.doc .receipt-total { background:var(--school-secondary,var(--document-surface-alt)); color:var(--school-on-secondary,var(--document-ink)); }
.doc h4,.report-summary { margin:12px 0; }
.report-period { margin:4px 0 12px; font-size:13px; color:var(--ink-muted); }
.school-form-section,.profile-approval { min-width:0; margin:0 0 16px; border:1px solid var(--border); padding:12px; border-radius:10px; }
.contact-fields { min-width:0; margin:12px 0 0; border:1px solid var(--border); padding:10px; border-radius:8px; }
.contact-fields legend { padding:0 4px; font-weight:700; }
.message-preview { white-space:pre-wrap; overflow-wrap:anywhere; margin:12px 0; padding:14px; border-radius:9px; background:var(--brand-soft); }
.school-form-section legend,.profile-approval legend { font-weight:700; padding:0 5px; }
.school-form-section > p { margin-bottom:10px; }
.profile-approval .btn { margin-top:9px; }
.profile-preview { margin:12px 0; }
.profile-preview .doc-header { margin:0; }
.field input[type=color] { padding:4px; cursor:pointer; }
.doc-fields { display:grid; gap:6px; margin:12px 0; }
.keyline { display:flex; gap:10px; justify-content:space-between; align-items:baseline; padding:5px 0; border-bottom:1px solid var(--border); font-size:13px; }
.doc .marks { display:flex; justify-content:space-between; flex-wrap:wrap; align-items:end; gap:10px; margin-top:12px; break-inside:avoid; }
.doc .marks img { width:110px; height:57px; object-fit:contain; display:block; }
.qr-block { display:flex; align-items:center; gap:10px; border:1px solid var(--border); border-radius:9px; margin-top:12px; break-inside:avoid; }
.qr-block svg { width:120px; height:auto; flex:0 0 auto; }
.qr-block code { overflow-wrap:anywhere; }
.receipt-total { padding:10px; background:var(--brand-soft); border-radius:8px; font-weight:700; font-size:18px; margin:7px 0; }
.list { display:grid; gap:8px; }
.list-row { display:flex; justify-content:space-between; align-items:center; flex-wrap:wrap; gap:8px; padding:10px; border:1px solid var(--border); border-radius:9px; }
.list-row small { display:block; margin-top:3px; }
.tranche { display:grid; grid-template-columns:1fr 1fr auto; align-items:end; gap:8px; padding:8px 0; }
.inline-number { width:108px; min-height:34px; border:1px solid var(--border); padding:5px; border-radius:6px; }
.mobile-menu { display:none; }
.footer { padding:20px 0 8px; font-size:12px; color:var(--ink-muted); }
@media (max-width:940px) {
  .shell { grid-template-columns:188px minmax(0,1fr); }
  .header,.content { padding-left:14px; padding-right:14px; }
  .side { padding-left:9px; padding-right:9px; }
}
@media (max-width:680px) {
  .shell { display:block; }
  .side { display:none; position:fixed; z-index:3; width:min(280px,86vw); box-shadow:var(--shadow-pop); }
  .shell.menu-open .side { display:flex; }
  .mobile-menu { display:inline-flex; }
  .header { gap:7px; flex-wrap:wrap; }
  .header-school { display:none; }
  .header-right { flex:1; }
  .hero { align-items:start; }
  .hero .actions { width:100%; }
  .split,.form-grid { grid-template-columns:1fr; }
  .grid { grid-template-columns:repeat(auto-fit,minmax(140px,1fr)); gap:8px; }
  .doc .marks img { width:85px; }
  .qr-block svg { width:103px; }
  .dialog-head,.dialog-body { padding:13px; }
}
/* Registres de présence */
.register-grid { font-size:12px; }
.register-grid th,.register-grid td { padding:4px 5px; text-align:center; white-space:nowrap; }
.register-grid tbody th { text-align:left; font-weight:600; }
.register-grid tbody th small { display:block; font-weight:400; color:var(--document-muted); }
.register-grid td.sunday { background:var(--document-surface-alt); }
.register-grid td.code-A { color:#B42318; font-weight:700; }
.register-grid td.code-AJ { color:#B54708; font-weight:600; }
.register-grid td.code-R { color:#175CD3; }
.register-grid td.total { font-weight:700; background:var(--document-surface-alt); }
.register-signs { display:flex; flex-wrap:wrap; gap:24px; justify-content:space-between; margin:16px 0 6px; break-inside:avoid; }
.register-signs div { flex:1 1 180px; }
.register-signs span { display:block; height:48px; border-bottom:1px solid var(--document-border); }
/* Hors ligne */
.sync-bar { display:flex; flex-wrap:wrap; align-items:center; justify-content:space-between; gap:8px; }
/* Bulletins scannés */
.scan-picker { margin-top:12px; display:grid; gap:10px; }
.scan-picker label.btn { cursor:pointer; }
.scan-thumbs { display:flex; flex-wrap:wrap; gap:8px; }
.scan-thumbs figure { margin:0; width:84px; display:grid; gap:4px; font-size:12px; }
.scan-thumbs img { width:84px; height:110px; object-fit:cover; border:1px solid var(--border); border-radius:6px; background:#fff; }
.scan-assign { align-items:flex-end; }
.scan-assign .field { flex:1 1 180px; }
.scan-view,.scan-print { display:grid; gap:12px; margin-top:12px; }
.scan-page { margin:0; }
.scan-page img { width:100%; height:auto; display:block; border:1px solid var(--border); border-radius:6px; background:#fff; }
.verify-dossier .card { max-width:760px; }
@media print {
  .scan-print { break-before:page; }
  .scan-page { break-inside:avoid; }
  .scan-page img { border:0; max-height:260mm; width:auto; max-width:100%; margin:0 auto; }
  :root,body { background:var(--document-white); color:var(--document-ink); }
  #app,#toast,.dialog-head,.dialog-body > .actions,.print-hidden { display:none !important; }
  dialog[open] { position:static; margin:0; border:0; width:100%; max-height:none; box-shadow:none; overflow:visible; }
  dialog::backdrop { background:none; }
  .dialog-body,.doc { padding:0; border:0; }
  .doc .table-wrap { overflow:visible; }
  .doc table { table-layout:auto; }
  .doc th,.doc td { white-space:normal; overflow-wrap:anywhere; }
  .doc tr { break-inside:avoid; }
  .qr-block svg { width:32mm; }
  .doc.register .register-grid { font-size:8px; }
  .doc.register .register-grid th,.doc.register .register-grid td { padding:1px 2px; }
  .doc { print-color-adjust:exact; -webkit-print-color-adjust:exact; }
}

.status-symbol { flex: 0 0 auto; font-weight:700; }
.side small,.side-foot a { color:var(--on-navy-muted); }
.header .filter,.header .btn,.header .theme-toggle { color:var(--ink); }
.login .card { position:relative; }
.login-theme { position:absolute; top:var(--space-4); right:var(--space-4); }
.login .logo { width:166px; }
.logo-dark, [data-theme="dark"] .logo-light { display:none; }
[data-theme="dark"] .logo-dark { display:block; }
.btn.destructive { color:var(--on-danger); border-color:var(--danger); background:var(--danger); }
.btn.destructive:hover { filter:brightness(.9); }
.btn.destructive:focus-visible { outline-color:var(--focus); }
.text-btn { color:var(--info); }
.text-btn:hover { text-decoration:underline; }
tbody tr:nth-child(even) { background:var(--surface-alt); }
tbody tr:hover { background:var(--brand-soft); }
tbody tr:hover a, tbody tr:hover .text-btn { color:var(--brand-deep); }
.field :is(input,select,textarea):user-invalid { border-color:var(--danger); }
.doc,.doc .qr-block { background:var(--document-white); color:var(--document-ink); }
.doc .muted,.doc .report-period { color:var(--document-muted); }
.doc :is(.keyline,.doc-header,.qr-block),.doc td { border-color:var(--document-border); }
.doc tbody tr:nth-child(even) { background:var(--document-surface-alt); }
.doc tbody tr:hover { background:var(--document-surface-alt); }
.footer { margin-top:var(--space-6); padding:var(--space-4); border-radius:var(--radius-md); background:var(--navy); color:var(--on-navy-muted); }
@media (max-width:680px) {
  .kpi strong { font-size:24px; line-height:32px; }
  .header-right .tag { display:none; }
}

/* Pointage du personnel : une carte par personne, quatre choix tactiles */
.staff-row { align-items:flex-start; }
.staff-row > div:first-child { flex:1 1 180px; min-width:0; }
.staff-choices { flex-basis:100%; display:grid; grid-template-columns:repeat(4, minmax(0, 1fr)); gap:6px; }
.staff-choice { justify-content:center; text-align:center; white-space:normal; line-height:1.2; min-height:40px; }
.staff-choice.is-on { color:#fff; border-color:transparent; }
.staff-choice.is-on.good { background:#15803D; }
.staff-choice.is-on.warn { background:#B45309; }
.staff-choice.is-on.info { background:#1D4ED8; }
.staff-choice.is-on.bad { background:#9F1239; }