/* Proxicantine — Gestion de la cantine scolaire
   Réalisé par Lemniai Said */

:root{
  --brand:#12294E;
  --brand-2:#1F3F73;
  --brand-tint:#25406E;
  --accent:#B87C22;
  --accent-ink:#7A5416;
  --good:#2F7D5C;
  --good-bg:#E4F1EA;
  --warn:#B5651D;
  --warn-bg:#FBEDDD;
  --critical:#B23A34;
  --critical-bg:#FAE7E5;

  --bg:#F5F7FB;
  --surface:#FFFFFF;
  --surface-2:#EEF1F8;
  --border:#DCE2EF;
  --ink:#16213E;
  --ink-soft:#57628A;
  --ink-faint:#8892B0;

  /* La salle, sur la feuille de l'animatrice : lisible sur les deux fonds. */
  --salle-bg:#1F3F73;
  --salle-ink:#FFFFFF;

  --font-display:"Iowan Old Style","Palatino Linotype","Book Antiqua",Georgia,serif;
  --font-body:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Helvetica,Arial,sans-serif;
  --font-mono:ui-monospace,"SF Mono",Consolas,"Liberation Mono",Menlo,monospace;

  --radius:10px;
  --shadow:0 1px 2px rgba(18,41,78,.06), 0 8px 24px -12px rgba(18,41,78,.18);
}

@media (prefers-color-scheme: dark){
  :root{
    --bg:#0E1526; --surface:#151F38; --surface-2:#1B2740; --border:#2A3854;
    --ink:#E8EBF4; --ink-soft:#9AA6C6; --ink-faint:#69759A;
    --accent:#DCA24C; --accent-ink:#F4D9A8;
    --salle-bg:#2C4E88; --salle-ink:#E9F0FF;
    --good:#4CAE85; --good-bg:#173428;
    --warn:#E0A15E; --warn-bg:#3A2A16;
    --critical:#E2685F; --critical-bg:#3A1E1C;
    --shadow:0 1px 2px rgba(0,0,0,.3), 0 12px 28px -14px rgba(0,0,0,.6);
  }
}
:root[data-theme="dark"]{
  --bg:#0E1526; --surface:#151F38; --surface-2:#1B2740; --border:#2A3854;
  --ink:#E8EBF4; --ink-soft:#9AA6C6; --ink-faint:#69759A;
  --accent:#DCA24C; --accent-ink:#F4D9A8;
  --salle-bg:#2C4E88; --salle-ink:#E9F0FF;
  --good:#4CAE85; --good-bg:#173428;
  --warn:#E0A15E; --warn-bg:#3A2A16;
  --critical:#E2685F; --critical-bg:#3A1E1C;
  --shadow:0 1px 2px rgba(0,0,0,.3), 0 12px 28px -14px rgba(0,0,0,.6);
}
:root[data-theme="light"]{
  --bg:#F5F7FB; --surface:#FFFFFF; --surface-2:#EEF1F8; --border:#DCE2EF;
  --ink:#16213E; --ink-soft:#57628A; --ink-faint:#8892B0;
  --accent:#B87C22; --accent-ink:#7A5416;
  --salle-bg:#1F3F73; --salle-ink:#FFFFFF;
  --good:#2F7D5C; --good-bg:#E4F1EA;
  --warn:#B5651D; --warn-bg:#FBEDDD;
  --critical:#B23A34; --critical-bg:#FAE7E5;
  --shadow:0 1px 2px rgba(18,41,78,.06), 0 8px 24px -12px rgba(18,41,78,.18);
}

*{box-sizing:border-box;}
html,body{margin:0;padding:0;}
body{
  background:var(--bg);
  color:var(--ink);
  font-family:var(--font-body);
  font-size:14.5px;
  line-height:1.5;
  -webkit-font-smoothing:antialiased;
}
h1,h2,h3{font-family:var(--font-display);font-weight:600;text-wrap:balance;margin:0;}
a{color:inherit;}
button{font-family:inherit;}
.num{font-variant-numeric:tabular-nums;}
.mono{font-family:var(--font-mono);}

/* ---------- layout shell ---------- */
.shell{display:flex;min-height:100vh;}

.sidebar{
  width:236px;
  flex:none;
  background:var(--brand);
  color:#E9EFFA;
  display:flex;
  flex-direction:column;
  padding:20px 14px;
  gap:22px;
  position:sticky;
  top:0;
  height:100vh;
  overflow-y:auto;
}
.brand{display:flex;align-items:center;gap:10px;padding:0 8px;}
.brand-mark{
  width:34px;height:34px;border-radius:9px;
  background:linear-gradient(155deg, var(--accent), #8F5E17);
  display:flex;align-items:center;justify-content:center;
  font-family:var(--font-display);font-weight:700;font-size:16px;color:#221605;
  flex:none;
}
.brand-text{display:flex;flex-direction:column;line-height:1.15;}
.brand-text b{font-family:var(--font-display);font-size:16.5px;letter-spacing:.2px;}
.brand-text span{font-size:11px;color:#AEBEDD;letter-spacing:.4px;}

.nav-group{display:flex;flex-direction:column;gap:2px;}
.nav-label{
  font-size:10.5px;text-transform:uppercase;letter-spacing:.09em;
  color:#8FA0C6;padding:10px 10px 4px;
}
.nav-item{
  display:flex;align-items:center;gap:10px;
  padding:9px 10px;border-radius:8px;
  color:#D7E0F2;text-decoration:none;font-size:13.6px;
  cursor:pointer;border:none;background:none;width:100%;text-align:left;
}
.nav-item svg{width:17px;height:17px;flex:none;opacity:.85;}
.nav-item:hover{background:var(--brand-tint);color:#fff;}
.nav-item.active{background:var(--brand-2);color:#fff;box-shadow:inset 2.5px 0 0 var(--accent);}
.nav-item .badge{
  margin-left:auto;font-size:10.5px;background:var(--critical);color:#fff;
  border-radius:99px;padding:1px 7px;font-weight:600;
}

.sidebar-foot{
  margin-top:auto;padding:10px 8px 2px;border-top:1px solid rgba(255,255,255,.1);
  font-size:11.5px;color:#8FA0C6;
}
.sidebar-foot b{color:#D7E0F2;}

.main{flex:1;min-width:0;display:flex;flex-direction:column;}

.topbar{
  position:sticky;top:0;z-index:5;
  background:color-mix(in srgb, var(--surface) 92%, transparent);
  backdrop-filter:blur(6px);
  border-bottom:1px solid var(--border);
  padding:14px 28px;
  display:flex;align-items:center;gap:16px;
}
.topbar h1{font-size:20px;}
.term-chip{
  display:flex;align-items:center;gap:8px;
  background:var(--good-bg);color:var(--good);
  border:1px solid color-mix(in srgb, var(--good) 35%, transparent);
  padding:5px 12px 5px 10px;border-radius:99px;font-size:12.5px;font-weight:600;
  text-decoration:none;
}
.term-chip.warn{background:var(--warn-bg);color:var(--warn);border-color:color-mix(in srgb, var(--warn) 35%, transparent);}
.term-chip .dot{width:6px;height:6px;border-radius:99px;background:currentColor;}
/* Rappelle au gérant qu'il regarde sans pouvoir toucher. Ton neutre : ce
   n'est pas une alerte, c'est l'état normal de son compte. */
.chip-consultation{
  display:inline-flex;align-items:center;gap:7px;
  background:var(--surface-2);color:var(--ink-soft);
  border:1px solid var(--border);
  padding:5px 12px 5px 10px;border-radius:99px;
  font-size:12.5px;font-weight:600;white-space:nowrap;
}
.chip-consultation svg{width:15px;height:15px;flex:none;opacity:.8;}

.topbar-search{
  margin-left:auto;display:flex;align-items:center;gap:8px;
  background:var(--surface-2);border:1px solid var(--border);
  border-radius:8px;padding:7px 12px;width:260px;color:var(--ink-faint);
}
.topbar-search input{border:none;background:none;outline:none;color:var(--ink);font-size:13px;width:100%;}
.topbar-search svg{width:15px;height:15px;flex:none;}

.view{padding:26px 28px 60px;display:flex;flex-direction:column;gap:22px;}

/* ---------- shared bits ---------- */
.eyebrow{font-size:11px;text-transform:uppercase;letter-spacing:.09em;color:var(--ink-faint);font-weight:600;}
.panel{
  background:var(--surface);border:1px solid var(--border);
  border-radius:var(--radius);box-shadow:var(--shadow);
}
.panel-head{
  display:flex;align-items:center;gap:10px;
  padding:15px 18px;border-bottom:1px solid var(--border);
}
.panel-head h2{font-size:15.5px;}
.panel-head p{margin:2px 0 0;font-size:12.5px;color:var(--ink-soft);}
.panel-body{padding:16px 18px;}
.btn{
  display:inline-flex;align-items:center;gap:7px;
  border-radius:8px;padding:8px 14px;font-size:13px;font-weight:600;
  border:1px solid var(--border);background:var(--surface);color:var(--ink);
  cursor:pointer;white-space:nowrap;text-decoration:none;
}
.btn:hover{background:var(--surface-2);}
.btn.primary{background:var(--accent);border-color:var(--accent);color:#241804;}
.btn.primary:hover{filter:brightness(1.06);}
.btn.ghost{background:none;border-color:transparent;color:var(--ink-soft);}
.btn.danger{color:var(--critical);}
.btn svg{width:15px;height:15px;}

.msg{
  display:flex;align-items:center;gap:10px;padding:11px 16px;border-radius:9px;
  font-size:13px;font-weight:600;
}
.msg.warn{background:var(--warn-bg);color:var(--warn);}
.msg.critical{background:var(--critical-bg);color:var(--critical);}
.msg.good{background:var(--good-bg);color:var(--good);}

/* ---------- dashboard ---------- */
.term-banner{
  display:flex;align-items:center;justify-content:space-between;gap:18px;flex-wrap:wrap;
  background:linear-gradient(120deg, var(--brand) 0%, var(--brand-2) 100%);
  color:#EEF2FB;border-radius:var(--radius);padding:18px 22px;box-shadow:var(--shadow);
}
.term-banner .t-left{display:flex;flex-direction:column;gap:5px;}
.term-banner .eyebrow{color:#B9C7E8;}
.term-banner h2{font-size:19px;color:#fff;}
.term-banner .t-dates{font-size:12.5px;color:#C2CEE9;}
.term-metrics{display:flex;gap:26px;}
.term-metrics div{display:flex;flex-direction:column;align-items:flex-end;}
.term-metrics b{font-size:17px;color:#fff;}
.term-metrics span{font-size:11px;color:#B9C7E8;}

.kpi-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:14px;}
.kpi{
  background:var(--surface);border:1px solid var(--border);border-radius:var(--radius);
  padding:16px 17px;box-shadow:var(--shadow);display:flex;flex-direction:column;gap:8px;
}
.kpi .k-top{display:flex;align-items:center;justify-content:space-between;}
.kpi .k-icon{
  width:30px;height:30px;border-radius:8px;display:flex;align-items:center;justify-content:center;
  background:var(--surface-2);color:var(--brand-2);
}
.kpi .k-icon svg{width:16px;height:16px;}
.kpi .k-value{font-family:var(--font-display);font-size:26px;font-weight:600;}
.kpi .k-value small{font-size:13px;font-family:var(--font-body);color:var(--ink-faint);font-weight:600;}
.kpi .k-label{font-size:12.5px;color:var(--ink-soft);}
.kpi .k-delta{font-size:11.5px;font-weight:600;display:inline-flex;gap:4px;align-items:center;width:fit-content;padding:2px 8px;border-radius:99px;}
.k-delta.warn{background:var(--warn-bg);color:var(--warn);}
.k-delta.good{background:var(--good-bg);color:var(--good);}
.k-delta.critical{background:var(--critical-bg);color:var(--critical);}

.two-col{display:grid;grid-template-columns:1.3fr .9fr;gap:16px;align-items:start;}

.alert-row{display:flex;align-items:flex-start;gap:12px;padding:13px 16px;border-bottom:1px solid var(--border);}
.alert-row:last-child{border-bottom:none;}
.alert-row .a-icon{
  width:28px;height:28px;border-radius:8px;flex:none;
  display:flex;align-items:center;justify-content:center;
  background:var(--warn-bg);color:var(--warn);
}
.alert-row .a-icon.good{background:var(--good-bg);color:var(--good);}
.alert-row .a-icon svg{width:15px;height:15px;}
.alert-row .a-body{flex:1;min-width:0;}
.alert-row .a-title{font-size:13.3px;font-weight:600;}
.alert-row .a-sub{font-size:12px;color:var(--ink-soft);margin-top:1px;}

.classe-bars{display:flex;flex-direction:column;gap:10px;}
.classe-row{display:flex;align-items:center;gap:10px;font-size:12.5px;}
.classe-row .c-label{width:64px;flex:none;color:var(--ink-soft);}
.classe-row .c-track{flex:1;height:7px;border-radius:99px;background:var(--surface-2);overflow:hidden;}
.classe-row .c-fill{height:100%;background:var(--brand-2);border-radius:99px;}
.classe-row .c-val{width:34px;text-align:right;font-variant-numeric:tabular-nums;color:var(--ink-soft);}

/* Les moyens de paiement ont des noms plus longs qu'un nom de classe. */
.classe-row .c-label.mode{width:104px;}
.note-graphe{margin-top:12px;font-size:11.8px;color:var(--ink-faint);line-height:1.5;}

/* La promesse de paiement : une ligne d'état qui n'a rien encaissé. Le fond
   la distingue d'un versement sans la faire passer pour une erreur, et le
   filet de gauche la retrouve sur une feuille imprimée en noir et blanc. */
tr.en-attente{background:var(--warn-bg);}
tr.en-attente td:first-child{box-shadow:inset 3px 0 0 var(--warn);}

/* ---------- tables ---------- */
.table-wrap{overflow-x:auto;}
table{width:100%;border-collapse:collapse;font-size:13px;}
thead th{
  text-align:left;font-size:11px;text-transform:uppercase;letter-spacing:.06em;
  color:var(--ink-faint);font-weight:600;padding:9px 14px;border-bottom:1px solid var(--border);
  white-space:nowrap;background:var(--surface-2);
}
tbody td{padding:11px 14px;border-bottom:1px solid var(--border);vertical-align:middle;}
tbody tr:last-child td{border-bottom:none;}
tbody tr:hover{background:var(--surface-2);}
.pill{
  display:inline-flex;align-items:center;gap:5px;font-size:11.5px;font-weight:600;
  padding:3px 9px;border-radius:99px;white-space:nowrap;
}
.pill.good{background:var(--good-bg);color:var(--good);}
.pill.neutral{background:var(--surface-2);color:var(--ink-soft);}
.pill.warn{background:var(--warn-bg);color:var(--warn);}
.pill.accent{background:color-mix(in srgb, var(--accent) 18%, transparent);color:var(--accent-ink);}
.row-actions{display:flex;gap:6px;justify-content:flex-end;}
.icon-btn{
  width:28px;height:28px;border-radius:7px;border:1px solid var(--border);background:var(--surface);
  display:flex;align-items:center;justify-content:center;cursor:pointer;color:var(--ink-soft);text-decoration:none;
}
.icon-btn:hover{background:var(--surface-2);color:var(--ink);}
.icon-btn svg{width:14px;height:14px;}

.toolbar{display:flex;align-items:center;gap:10px;flex-wrap:wrap;}
.search-field{
  display:flex;align-items:center;gap:8px;background:var(--surface-2);
  border:1px solid var(--border);border-radius:8px;padding:8px 12px;flex:1;min-width:200px;max-width:360px;
}
.search-field svg{width:15px;height:15px;color:var(--ink-faint);flex:none;}
.search-field input{border:none;background:none;outline:none;color:var(--ink);font-size:13px;width:100%;}
.chip-filter{display:flex;gap:6px;padding:3px;background:var(--surface-2);border:1px solid var(--border);border-radius:9px;}
.chip-filter a, .chip-filter button{
  border:none;background:none;padding:6px 12px;border-radius:7px;font-size:12.5px;color:var(--ink-soft);
  cursor:pointer;font-weight:600;text-decoration:none;
}
.chip-filter a.active, .chip-filter button.active{background:var(--surface);color:var(--ink);box-shadow:0 1px 2px rgba(18,41,78,.12);}

/* ---------- forms ---------- */
.form-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:16px 20px;}
.field{display:flex;flex-direction:column;gap:6px;}
.field.full{grid-column:1 / -1;}
.field label{font-size:12.5px;font-weight:600;color:var(--ink-soft);}
.field .hint{font-size:11.5px;color:var(--ink-faint);}
.field input[type="text"],
.field input[type="email"],
.field input[type="number"],
.field input[type="date"],
.field input[type="file"],
.field select,
.field textarea{
  width:100%;padding:9px 12px;border-radius:8px;border:1px solid var(--border);
  background:var(--surface);color:var(--ink);font-size:13.6px;outline:none;font-family:inherit;
}
.field textarea{resize:vertical;min-height:80px;}
.field input:focus, .field select:focus, .field textarea:focus{
  border-color:var(--brand-2);box-shadow:0 0 0 3px color-mix(in srgb, var(--brand-2) 18%, transparent);
}
.field .checkbox-row{display:flex;align-items:center;gap:8px;}
.field .checkbox-row input{width:auto;}
.form-actions{display:flex;gap:10px;margin-top:6px;}

/* Les critères d'un état à imprimer : quatre par ligne, les boutons en bout.
   Une grille auto-ajustée plutôt qu'un nombre fixe de colonnes, pour qu'un
   critère de plus ne demande pas de retoucher la feuille de style. */
.criteres{display:grid;grid-template-columns:repeat(auto-fit,minmax(190px,1fr));gap:14px 18px;align-items:end;}
.criteres .form-actions{grid-column:1 / -1;margin-top:2px;}
.f-criteres{display:flex;gap:6px;flex-wrap:wrap;align-items:center;}

/* Cases à cocher d'un critère : elles tiennent dans la cellule de la grille,
   sur deux colonnes tant que la place le permet. */
/* Cases à cocher d'un critère. Le nom `coche` et non `case` : `.case` est
   déjà pris plus bas par le carré de 15 px dessiné sur les listes imprimées,
   et cette règle-là, venant après, transformait chaque libellé en carré —
   les cinq modes s'écrivaient alors les uns par-dessus les autres.

   `flex:0 0 auto` et `nowrap` tiennent le reste : sans eux, une case se
   laisse comprimer à la largeur de son carré dans une cellule étroite. */
.coches{display:flex;flex-wrap:wrap;gap:6px 16px;padding:4px 0;}
.coche{
  display:flex;align-items:center;gap:6px;flex:0 0 auto;white-space:nowrap;
  font-size:12.8px;color:var(--ink);font-weight:500;cursor:pointer;
}
.coche input{width:auto;margin:0;flex:none;}

/* Un critère qui prend deux colonnes de la grille : cinq cases à cocher ne
   tiennent pas dans la largeur d'un menu déroulant. */
.criteres .field.large{grid-column:span 2;}
.form-errors{color:var(--critical);font-size:12px;margin-top:3px;}

/* ---------- combobox ---------- */
.combo{position:relative;}
.combo input{
  width:100%;padding:10px 12px;border-radius:8px;border:1px solid var(--border);
  background:var(--surface);color:var(--ink);font-size:13.6px;outline:none;
}
.combo input:focus{border-color:var(--brand-2);box-shadow:0 0 0 3px color-mix(in srgb, var(--brand-2) 18%, transparent);}
.combo-list{
  position:absolute;top:calc(100% + 6px);left:0;right:0;z-index:8;
  background:var(--surface);border:1px solid var(--border);border-radius:9px;box-shadow:var(--shadow);
  max-height:230px;overflow-y:auto;display:none;
}
.combo-list.open{display:block;}
.combo-opt{
  display:flex;align-items:center;justify-content:space-between;gap:10px;
  padding:9px 12px;cursor:pointer;font-size:13px;border-bottom:1px solid var(--border);
}
.combo-opt:last-child{border-bottom:none;}
.combo-opt:hover, .combo-opt.hi{background:var(--surface-2);}
.combo-opt .o-name{font-weight:600;}
.combo-opt .o-meta{color:var(--ink-faint);font-size:11.5px;}
.combo-empty{padding:14px;font-size:12.5px;color:var(--ink-faint);text-align:center;}

/* ---------- segmented / days / switch ---------- */
.segmented{display:flex;gap:8px;flex-wrap:wrap;}
.seg-btn{
  flex:1;min-width:110px;border:1px solid var(--border);background:var(--surface);
  border-radius:9px;padding:11px 12px;cursor:pointer;text-align:left;
}
.seg-btn b{display:block;font-size:13.6px;}
.seg-btn span{display:block;font-size:11.3px;color:var(--ink-soft);margin-top:2px;}
.seg-btn.on{border-color:var(--accent);background:color-mix(in srgb, var(--accent) 12%, var(--surface));}
.seg-btn.on b{color:var(--accent-ink);}

.day-row{display:flex;gap:7px;}
.day-chip{
  width:38px;height:32px;border-radius:8px;border:1px solid var(--border);
  display:flex;align-items:center;justify-content:center;font-size:11.5px;font-weight:600;color:var(--ink-faint);
  background:var(--surface-2);cursor:pointer;user-select:none;
}
.day-chip.on{background:var(--good-bg);color:var(--good);border-color:color-mix(in srgb, var(--good) 40%, transparent);}

/* ---------- form-driven toggles (no JS needed for state) ---------- */
.field-hidden{display:none;}
.visually-hidden-input{position:absolute;opacity:0;width:0;height:0;pointer-events:none;}
.day-toggle{position:absolute;opacity:0;width:0;height:0;}
.day-toggle + label.day-chip{cursor:pointer;}
.day-toggle:checked + label.day-chip{background:var(--good-bg);color:var(--good);border-color:color-mix(in srgb, var(--good) 40%, transparent);}
.seg-radio{position:absolute;opacity:0;width:0;height:0;}
.seg-radio + label.seg-btn{cursor:pointer;display:block;}
.seg-radio:checked + label.seg-btn{border-color:var(--accent);background:color-mix(in srgb, var(--accent) 12%, var(--surface));}
.seg-radio:checked + label.seg-btn b{color:var(--accent-ink);}

/* ---------- inscription recap ---------- */
.inscr-grid{display:grid;grid-template-columns:1.15fr .85fr;gap:18px;align-items:start;}
.recap{position:sticky;top:78px;}
.recap .r-eleve{display:flex;align-items:center;gap:11px;padding-bottom:14px;border-bottom:1px solid var(--border);margin-bottom:14px;}
.avatar{
  width:38px;height:38px;border-radius:99px;background:var(--brand-2);color:#fff;
  display:flex;align-items:center;justify-content:center;font-family:var(--font-display);font-weight:600;font-size:14px;flex:none;
}
.r-eleve b{display:block;font-size:13.8px;}
.r-eleve span{display:block;font-size:11.5px;color:var(--ink-faint);}
.recap-line{display:flex;justify-content:space-between;font-size:13px;padding:6px 0;color:var(--ink-soft);}
.recap-line b{color:var(--ink);font-weight:600;font-variant-numeric:tabular-nums;}
.recap-total{
  display:flex;justify-content:space-between;align-items:baseline;
  margin-top:10px;padding-top:12px;border-top:1px dashed var(--border);
}
.recap-total span{font-size:12.5px;color:var(--ink-soft);}
.recap-total b{font-family:var(--font-display);font-size:24px;color:var(--accent-ink);}

.note-card{
  display:flex;gap:10px;background:var(--surface-2);border:1px solid var(--border);
  border-radius:9px;padding:12px 13px;font-size:12px;color:var(--ink-soft);margin-top:14px;
}
.note-card svg{width:15px;height:15px;flex:none;margin-top:1px;color:var(--brand-2);}

/* ---------- trimestres ---------- */
.term-cards{display:grid;grid-template-columns:repeat(3,1fr);gap:14px;}
.term-card{
  background:var(--surface);border:1px solid var(--border);border-radius:var(--radius);
  padding:16px 17px;box-shadow:var(--shadow);display:flex;flex-direction:column;gap:10px;position:relative;
}
.term-card.active{border-color:var(--good);box-shadow:0 0 0 1px var(--good), var(--shadow);}
.term-card .tc-head{display:flex;align-items:center;justify-content:space-between;}
.term-card .tc-name{font-family:var(--font-display);font-size:17px;}
.term-card .tc-dates{font-size:12px;color:var(--ink-soft);}
.term-card .tc-grid{display:grid;grid-template-columns:1fr 1fr;gap:8px;margin-top:4px;}
.term-card .tc-stat{background:var(--surface-2);border-radius:8px;padding:8px 10px;}
.term-card .tc-stat b{display:block;font-size:15px;font-variant-numeric:tabular-nums;}
.term-card .tc-stat span{font-size:10.8px;color:var(--ink-faint);text-transform:uppercase;letter-spacing:.05em;}

footer.tip{display:flex;gap:10px;align-items:flex-start;color:var(--ink-faint);font-size:12px;padding:4px 2px 10px;}

/* ---------- feuilles de présence ---------- */
.feuille{
  background:var(--surface);border:1px solid var(--border);border-radius:var(--radius);
  box-shadow:var(--shadow);padding:22px 24px;margin-bottom:18px;
}
.f-entete{
  display:flex;align-items:flex-start;justify-content:space-between;gap:20px;
  padding-bottom:14px;border-bottom:2px solid var(--ink);
}
.f-titre{font-family:var(--font-display);font-size:19px;font-weight:600;}
.f-sous{font-size:12.5px;color:var(--ink-soft);margin-top:2px;}
.f-classe{text-align:right;}
.f-classe span{display:block;font-size:10.5px;text-transform:uppercase;letter-spacing:.09em;color:var(--ink-faint);}
.f-classe b{font-family:var(--font-display);font-size:24px;}

.f-meta{
  display:flex;gap:26px;flex-wrap:wrap;align-items:center;
  padding:12px 0;font-size:12.5px;color:var(--ink-soft);
}
.f-meta i{display:inline-block;min-width:150px;border-bottom:1px dotted var(--ink-faint);}

table.f-table{width:100%;border-collapse:collapse;font-size:13px;margin-top:4px;}
table.f-table th{
  background:var(--surface-2);color:var(--ink);text-transform:none;letter-spacing:0;
  font-size:11.5px;font-weight:600;padding:8px 10px;border:1px solid var(--border);text-align:left;
}
table.f-table td{padding:9px 10px;border:1px solid var(--border);vertical-align:middle;}
table.f-table tbody tr:hover{background:transparent;}
table.f-table .c-num{width:34px;text-align:center;color:var(--ink-faint);font-variant-numeric:tabular-nums;}
table.f-table .c-formule{width:96px;font-size:12px;color:var(--ink-soft);}
table.f-table .c-jour{width:46px;text-align:center;}
table.f-table th.c-jour{text-align:center;}
table.f-table .c-hors{background:var(--surface-2);}
table.f-table .f-vide{text-align:center;color:var(--ink-faint);padding:20px;}
.f-marque{
  display:inline-block;margin-left:6px;font-size:10px;font-weight:700;
  border:1px solid var(--accent);color:var(--accent-ink);border-radius:4px;padding:0 4px;
}
.case{display:inline-block;width:15px;height:15px;border:1.4px solid var(--ink-faint);border-radius:3px;}

.f-pied{display:flex;gap:30px;margin-top:18px;font-size:12px;color:var(--ink-soft);}
.f-pied span{display:block;font-size:10.5px;text-transform:uppercase;letter-spacing:.07em;color:var(--ink-faint);margin-bottom:4px;}
.f-pied i{display:block;border-bottom:1px dotted var(--ink-faint);height:26px;}
.f-obs{flex:2;}
.f-signature{flex:1;}

/* ---------- impression ---------- */
@media print{
  .sidebar, .topbar, .no-print, footer.tip{display:none !important;}
  .shell{display:block;}
  .main{display:block;}
  .view{padding:0;gap:0;}

  body{background:#fff;color:#000;font-size:11pt;}

  .feuille{
    border:none;box-shadow:none;padding:0;margin:0;
    background:#fff;break-after:page;page-break-after:always;
  }
  .feuille:last-child{break-after:auto;page-break-after:auto;}

  .f-entete{border-bottom:2px solid #000;}
  .f-titre, .f-classe b{color:#000;}
  .f-sous, .f-meta, .f-pied{color:#333;}
  .f-meta i, .f-pied i{border-bottom-color:#666;}

  table.f-table{font-size:10.5pt;}
  table.f-table th{background:#eee !important;color:#000;border:1px solid #000;}
  table.f-table td{border:1px solid #000;}
  table.f-table .c-hors{
    background:#e8e8e8 !important;
    -webkit-print-color-adjust:exact;print-color-adjust:exact;
  }
  table.f-table thead{display:table-header-group;}
  table.f-table tr{break-inside:avoid;page-break-inside:avoid;}
  .case{border-color:#000;}
  .f-marque{border-color:#000;color:#000;}

  @page{size:A4 portrait;margin:12mm;}
}

@media (max-width: 980px){
  .kpi-grid{grid-template-columns:repeat(2,1fr);}
  .two-col, .inscr-grid, .term-cards, .form-grid{grid-template-columns:1fr;}
}

/* ---------- detail par trimestre, dans l'etat des impayes ---------- */
.t-ligne{
  display:flex;align-items:center;justify-content:space-between;gap:12px;
  font-size:12.5px;padding:2px 0;white-space:nowrap;
}
.t-ligne + .t-ligne{border-top:1px dotted var(--border);}
.t-ligne .t-nom{color:var(--ink-soft);display:flex;align-items:center;gap:6px;}
.t-ligne .pill{font-size:10px;padding:1px 6px;}
.t-anomalie{
  margin-top:4px;font-size:11px;color:var(--warn);
  border-left:2px solid var(--warn);padding-left:7px;white-space:normal;
}

@media print{
  .t-ligne{font-size:9.5pt;}
  .t-ligne .pill{border:1px solid #000;background:none;color:#000;}
  .f-criteres .pill{border:1px solid #000;background:none;color:#000;}

  /* À l'impression, le fond ne sort pas : le filet, lui, se voit. */
  tr.en-attente{background:none;}
  tr.en-attente td:first-child{box-shadow:inset 3px 0 0 #000;}
  .t-anomalie{color:#000;border-left-color:#000;font-style:italic;}
}

/* ---------- formulaire de demande de remboursement ---------- */
.form-doc{display:flex;flex-direction:column;gap:16px;margin-top:14px;}
.fd-section{border:1px solid var(--border);border-radius:8px;padding:12px 14px;}
.fd-titre{
  font-size:11.5px;text-transform:uppercase;letter-spacing:.07em;font-weight:700;
  color:var(--brand-2);margin-bottom:10px;
}
.fd-grille{display:grid;grid-template-columns:repeat(3,1fr);gap:10px 18px;}
.fd-grille > div{display:flex;flex-direction:column;gap:2px;font-size:13px;}
.fd-grille span{font-size:11px;color:var(--ink-faint);}
.fd-totaux{margin-top:12px;display:flex;flex-direction:column;gap:6px;}
.fd-totaux > div{display:flex;justify-content:space-between;font-size:13px;color:var(--ink-soft);}
.fd-resultat{
  border-top:1px solid var(--border);padding-top:8px;margin-top:2px;
  font-size:15px !important;color:var(--ink) !important;font-weight:700;
}
.fd-resultat b{font-variant-numeric:tabular-nums;}
.fd-champs, .fd-signature{display:grid;grid-template-columns:repeat(2,1fr);gap:14px 18px;}
.fd-champ{display:flex;flex-direction:column;gap:5px;}
.fd-champ span{font-size:11px;color:var(--ink-faint);}
.fd-champ i{display:block;border-bottom:1px dotted var(--ink-faint);height:22px;}
.fd-large{grid-column:1 / -1;}
.fd-sign{grid-column:1 / -1;}
.fd-sign i{height:56px;}
.fd-texte{font-size:12.5px;line-height:1.6;color:var(--ink-soft);margin:0 0 12px;}
.fd-rappel{
  border:1px solid var(--border);border-radius:8px;padding:11px 13px;
  font-size:12px;color:var(--ink-soft);background:var(--surface-2);
}
.fd-reserve{border-style:dashed;}

@media print{
  .fd-titre{color:#000;}
  .fd-section, .fd-rappel{border-color:#000;}
  .fd-rappel{background:none;}
  .form-doc{gap:12px;}
}

@media (max-width: 980px){
  .fd-grille{grid-template-columns:1fr 1fr;}
  .fd-champs, .fd-signature{grid-template-columns:1fr;}
}

/* Signature de l'auteur, en pied du tableau de bord. */
.signature{
  margin-top:22px;padding-top:14px;border-top:1px solid var(--border);
  text-align:center;font-size:12px;color:var(--ink-faint);letter-spacing:.02em;
}
.signature b{color:var(--ink-soft);font-weight:600;}

/* ---------- animation : connexion ---------- */
.page-connexion{
  min-height:100vh;display:flex;align-items:center;justify-content:center;
  background:var(--bg);padding:24px;
}
.carte-connexion{
  width:100%;max-width:380px;background:var(--surface);border:1px solid var(--border);
  border-radius:var(--radius);box-shadow:var(--shadow);padding:28px;
}
.carte-connexion .brand{margin-bottom:22px;}
.carte-connexion h1{font-family:var(--font-display);font-size:22px;margin:0 0 4px;color:var(--ink);}
.carte-connexion .sous-titre{margin:0 0 18px;font-size:13px;color:var(--ink-soft);}
.carte-connexion .field{margin-bottom:14px;}
.carte-connexion input[type="text"],
.carte-connexion input[type="password"]{
  width:100%;padding:10px 12px;border-radius:8px;border:1px solid var(--border);
  background:var(--surface);color:var(--ink);font-size:14px;outline:none;font-family:inherit;
}
.carte-connexion input:focus{
  border-color:var(--brand-2);box-shadow:0 0 0 3px color-mix(in srgb, var(--brand-2) 18%, transparent);
}

/* ---------- animation : coquille du pointage ---------- */
.page-pointage{background:var(--bg);min-height:100vh;}
.entete-pointage{
  display:flex;align-items:center;justify-content:space-between;gap:16px;
  padding:14px 20px;background:var(--surface);border-bottom:1px solid var(--border);
}
.corps-pointage{max-width:820px;margin:0 auto;padding:20px 16px 60px;}
.corps-pointage .panel{margin-bottom:16px;}

/* ---------- animation : le titre de la feuille ---------- */
/* Ce que l'animatrice cherche en arrivant : sa classe, sa salle, l'etage et
   l'enseignant. Le titre le porte, pour qu'elle n'ait rien a chercher. */
.tete-classe{
  display:flex;align-items:flex-start;justify-content:space-between;gap:14px;flex-wrap:wrap;
  padding:15px 18px;border-bottom:1px solid var(--border);
}
.tc-titre{min-width:0;}
.tete-classe h2{
  display:flex;align-items:center;gap:10px;flex-wrap:wrap;
  font-size:17px;line-height:1.25;margin:0;
}
.tc-salle{
  font-size:13px;font-weight:700;letter-spacing:.02em;
  padding:3px 10px;border-radius:7px;
  background:var(--salle-bg);color:var(--salle-ink);
}
.tc-local{
  display:flex;flex-wrap:wrap;gap:6px 16px;
  margin:7px 0 0;font-size:13.5px;color:var(--ink);
}
.tc-local span{display:flex;align-items:center;gap:6px;min-width:0;}
.tc-local svg{width:15px;height:15px;flex:none;color:var(--ink-faint);}
/* L'ASEM est nommee comme telle : ce n'est pas l'enseignante de la classe. */
.tc-local em{
  font-style:normal;font-size:10.5px;font-weight:600;letter-spacing:.07em;
  text-transform:uppercase;color:var(--ink-faint);
  padding:1px 6px;border-radius:5px;background:var(--surface-2);
}
.tc-jour{margin:5px 0 0;font-size:12.5px;color:var(--ink-soft);}
.lc-sous{display:block;font-size:12px;color:var(--ink-soft);}

@media (max-width:640px){
  .tete-classe{padding:13px 14px;}
  .tete-classe h2{font-size:16px;gap:8px;}
  .tc-salle{font-size:12.5px;}
  .tc-local{font-size:13px;gap:4px 12px;}
}

/* ---------- animation : saisie des présences ---------- */
.liste-pointage{border-top:1px solid var(--border);}
.ligne-pointage{
  display:grid;grid-template-columns:1fr auto 1.1fr;gap:12px;align-items:center;
  padding:11px 18px;border-bottom:1px solid var(--border);
}
.lp-eleve{display:flex;flex-direction:column;gap:1px;min-width:0;}
.lp-eleve b{font-size:14px;color:var(--ink);}
.lp-eleve span{font-size:12.5px;color:var(--ink-soft);}
/* L'eleve inscrit avant le fichier INE : il mange comme les autres, mais
   son matricule est fabrique et le rattachement reste a faire. */
.sans-matricule{
  font-style:normal;font-size:10.5px;font-weight:600;letter-spacing:.05em;
  padding:1px 6px;border-radius:5px;white-space:nowrap;
  background:var(--warn-bg);color:var(--warn);
}
.lp-presence{display:flex;gap:6px;flex:none;}
.lp-presence .seg-btn{
  padding:7px 14px;border:1px solid var(--border);border-radius:8px;background:var(--surface-2);
  font-size:12.5px;font-weight:600;color:var(--ink-soft);cursor:pointer;user-select:none;
}
.seg-radio:checked + .bouton-presence{
  background:var(--good-bg);color:var(--good);border-color:color-mix(in srgb, var(--good) 45%, transparent);
}
.seg-radio:checked + .bouton-absence{
  background:var(--critical-bg);color:var(--critical);border-color:color-mix(in srgb, var(--critical) 45%, transparent);
}
.lp-observation input{
  width:100%;padding:8px 11px;border-radius:8px;border:1px solid var(--border);
  background:var(--surface);color:var(--ink);font-size:13px;outline:none;font-family:inherit;
}
.lp-observation input:focus{
  border-color:var(--brand-2);box-shadow:0 0 0 3px color-mix(in srgb, var(--brand-2) 18%, transparent);
}
.barre-pointage{display:flex;gap:10px;flex-wrap:wrap;padding:16px 18px 4px;}
.liste-pointage .vide{padding:26px 18px;color:var(--ink-faint);text-align:center;}

@media (max-width:640px){
  .ligne-pointage{grid-template-columns:1fr;gap:8px;}
  .lp-presence .seg-btn{flex:1;text-align:center;}
  .lp-presence{width:100%;}
}

/* ---------- animation : équipe et affectations ---------- */
.ligne-inactive{opacity:.55;}
.etiquette-affectation{
  display:inline-flex;align-items:center;gap:6px;margin:2px 4px 2px 0;padding:4px 6px 4px 10px;
  background:var(--surface-2);border:1px solid var(--border);border-radius:999px;font-size:12.5px;
}
.etiquette-affectation i{color:var(--ink-faint);font-style:normal;font-size:11.5px;}
.etiquette-affectation form{display:inline;}
.etiquette-affectation .retirer{
  border:none;background:none;cursor:pointer;color:var(--ink-faint);
  font-size:15px;line-height:1;padding:0 2px;text-decoration:none;
}
.etiquette-affectation .retirer:hover{color:var(--critical);}

.field input[type="time"],
.field input[type="password"]{
  width:100%;padding:9px 12px;border-radius:8px;border:1px solid var(--border);
  background:var(--surface);color:var(--ink);font-size:13.6px;outline:none;font-family:inherit;
}
/* Le code de suppression : quatre points bien lisibles, rien d'autre.
   C'est ici qu'il est masqué, et non par un type="password" — sinon Chrome
   le range parmi les mots de passe du site et propose de le changer. */
.field input.champ-code{
  -webkit-text-security:disc;text-security:disc;
  max-width:170px;text-align:center;letter-spacing:.55em;text-indent:.55em;
  font-size:19px;padding:11px 12px;font-variant-numeric:tabular-nums;
}

.toolbar input[type="date"]{
  padding:8px 11px;border-radius:8px;border:1px solid var(--border);
  background:var(--surface);color:var(--ink);font-size:13px;font-family:inherit;
}

.pied-deconnexion{
  display:flex;align-items:center;justify-content:space-between;gap:8px;
  margin-top:10px;padding-top:10px;border-top:1px solid rgba(255,255,255,.12);
}
.pied-deconnexion button{
  border:none;background:none;padding:0;cursor:pointer;font:inherit;font-size:11.5px;
  color:inherit;opacity:.75;text-decoration:underline;
}
.pied-deconnexion button:hover{opacity:1;}

/* --- Alimentation du secondaire : les montants d'un clic --- */

.paliers{
  display:grid;grid-template-columns:repeat(auto-fill, minmax(72px, 1fr));
  gap:6px;margin-bottom:9px;
}
.palier{
  padding:8px 4px;border-radius:8px;border:1px solid var(--border);
  background:var(--surface);color:var(--ink);cursor:pointer;
  font:inherit;font-size:13px;font-weight:600;font-variant-numeric:tabular-nums;
}
.palier:hover{border-color:var(--accent);color:var(--accent-ink);}

.check-line{
  display:flex;align-items:center;gap:9px;cursor:pointer;
}
.check-line input[type="checkbox"]{width:16px;height:16px;accent-color:var(--accent);}
.check-line span{font-weight:600;}

.tarif-hint{font-size:11.5px;color:var(--ink-faint);font-weight:500;}

/* ==========================================================================
   Téléphones et tablettes

   L'application a été dessinée pour un écran large, avec son menu toujours
   visible sur la gauche. Sur un téléphone, ce menu mange tout : il se replie
   donc derrière un bouton, retenu ouvert par une case à cocher — le même
   procédé sans JavaScript que le reste de l'application.
   ========================================================================== */

/* Sur grand écran, rien de cet attirail n'existe. */
.menu-etat,
.menu-bouton,
.menu-voile,
.menu-fermer{display:none;}

@media (max-width:900px){

  /* La case porte l'état du menu. On la masque sans la retirer au clavier :
     on doit pouvoir ouvrir le menu sans souris. */
  .menu-etat{
    position:absolute;width:1px;height:1px;
    opacity:0;pointer-events:none;
  }

  .menu-bouton{
    display:flex;align-items:center;justify-content:center;
    width:40px;height:40px;flex:none;margin-left:-6px;
    border-radius:9px;color:var(--ink-soft);cursor:pointer;
  }
  .menu-bouton svg{width:22px;height:22px;}
  .menu-bouton:active{background:var(--surface-2);}

  /* Le bouton se signale quand on l'atteint au clavier. */
  .menu-etat:focus-visible ~ .main .menu-bouton{
    outline:2px solid var(--brand-2);outline-offset:2px;
  }

  .sidebar{
    position:fixed;top:0;left:0;bottom:0;z-index:40;
    width:min(280px, 84vw);height:100dvh;
    transform:translateX(-100%);
    transition:transform .22s ease;
    box-shadow:0 0 40px rgba(6,17,38,.45);
  }
  .menu-etat:checked ~ .sidebar{transform:translateX(0);}

  /* Toucher à côté du menu le referme. */
  .menu-voile{
    display:block;position:fixed;inset:0;z-index:35;
    background:rgba(6,17,38,.5);
    opacity:0;pointer-events:none;transition:opacity .22s ease;
  }
  .menu-etat:checked ~ .menu-voile{opacity:1;pointer-events:auto;}

  .menu-fermer{
    display:flex;align-items:center;justify-content:center;
    position:absolute;top:12px;right:12px;
    width:34px;height:34px;border-radius:9px;
    color:#D7E0F2;cursor:pointer;
  }
  .menu-fermer svg{width:18px;height:18px;}

  /* Les entrées du menu s'espacent : on les touche du doigt, plus du curseur. */
  .nav-item{padding:11px 12px;font-size:14.5px;}

  /* La barre du haut se resserre, la recherche passe à la ligne. */
  .topbar{padding:10px 14px;gap:10px;flex-wrap:wrap;}
  .topbar h1{font-size:17px;min-width:0;}
  .term-chip{margin-left:auto;font-size:11.5px;padding:4px 10px 4px 8px;}
  .chip-consultation{font-size:11.5px;padding:4px 10px 4px 8px;}
  .topbar-search{order:3;width:100%;margin-left:0;}

  .view{padding:16px 14px 48px;gap:16px;}

  /* Les tableaux gardent leur largeur et défilent dans leur cadre, plutôt que
     de pousser la page entière de travers. */
  .table-wrap{
    margin-inline:-14px;padding-inline:14px;
    -webkit-overflow-scrolling:touch;
  }
  thead th{padding:8px 10px;}
  tbody td{padding:9px 10px;}

  /* Cibles tactiles : le pouce est moins précis que la souris. */
  .icon-btn{width:34px;height:34px;}
  .icon-btn svg{width:16px;height:16px;}
}

@media (max-width:640px){

  .kpi-grid{grid-template-columns:1fr;}

  /* Un champ sous 16px fait zoomer l'iPhone dès qu'on le touche, et la page
     reste ensuite de travers. On remonte donc la saisie à 16px partout. */
  input[type="text"],
  input[type="number"],
  input[type="password"],
  input[type="date"],
  input[type="time"],
  input[type="search"],
  select,
  textarea{font-size:16px;}

  .barre-pointage .btn{flex:1;justify-content:center;}
  .entete-pointage{padding:12px 14px;gap:10px;}
  .corps-pointage{padding:14px 12px 48px;}
}

/* Certains préfèrent une interface qui ne glisse pas. */
@media (prefers-reduced-motion:reduce){
  .sidebar, .menu-voile{transition:none;}
}

/* Le menu ouvert fige la page derrière lui, quand le navigateur sait le faire. */
body:has(.menu-etat:checked){overflow:hidden;}

/* ---------- etat de caisse : dix-huit colonnes serrees ---------- */
table.etat-caisse{font-size:12.5px;}
table.etat-caisse th, table.etat-caisse td{padding:7px 8px;white-space:nowrap;}
table.etat-caisse .c-jour{width:34px;text-align:center;}
table.etat-caisse tfoot td{
  border-top:2px solid var(--ink);background:var(--surface-2);
  font-variant-numeric:tabular-nums;
}

/* A l'ecran, dix-huit colonnes debordent : la feuille defile lateralement
   plutot que de casser les noms lettre par lettre. A l'impression, la page
   couchee les accueille toutes et le cadre disparait. */
.f-defile{overflow-x:auto;}

table.f-caisse{font-size:11px;}
table.f-caisse th, table.f-caisse td{padding:5px 6px;white-space:nowrap;}
table.f-caisse .c-jour{width:26px;text-align:center;padding:5px 2px;}
table.f-caisse .num{font-variant-numeric:tabular-nums;text-align:right;}
table.f-caisse tfoot td{border-top:2px solid var(--ink);font-variant-numeric:tabular-nums;}

@media print{
  /* La feuille couchee laisse peu de hauteur : on resserre encore. */
  table.f-caisse{font-size:8pt;}
  table.f-caisse th, table.f-caisse td{padding:3px 4px;}
  table.f-caisse .c-jour{padding:3px 1px;}
  table.f-caisse tfoot td{border-top:2px solid #000;}
  table.f-caisse tfoot{display:table-footer-group;}
  .f-defile{overflow:visible;}

  /* Mesure faite : le tableau occupe 1009 pt sur les 1047 d'une A4 couchee.
     La marge est mince, alors on autorise les colonnes de texte a se replier
     plutot que de deborder si un nom ou une banque s'allonge. Les nombres et
     le matricule, eux, restent d'un seul tenant. */
  table.f-caisse th, table.f-caisse td{white-space:normal;}
  table.f-caisse .num,
  table.f-caisse .mono,
  table.f-caisse .c-jour{white-space:nowrap;}
  .feuille-large .f-titre{font-size:16px;}
}

/* ---------- etat de presence : la grille eleves x jours ---------- */
.p-anim{text-align:right;font-size:12.5px;}
.p-anim .eyebrow{display:block;margin-bottom:4px;}
.p-anim-ligne{display:flex;gap:7px;align-items:center;justify-content:flex-end;}
.p-anim-ligne i{color:var(--ink-faint);}
.c-alerte{color:var(--warn);}

table.grille-presence{font-size:12.5px;}
table.grille-presence th, table.grille-presence td{padding:5px 6px;white-space:nowrap;}
table.grille-presence .c-nom{min-width:180px;white-space:nowrap;}
table.grille-presence .c-jour{width:34px;text-align:center;padding:5px 2px;}
table.grille-presence .c-total{width:46px;text-align:right;font-variant-numeric:tabular-nums;}
table.grille-presence .j-jour{display:block;font-size:10px;color:var(--ink-faint);}
table.grille-presence .j-num{display:block;font-size:11px;}
table.grille-presence tfoot td{
  border-top:2px solid var(--ink);color:var(--ink-soft);
  font-variant-numeric:tabular-nums;text-align:center;
}
table.grille-presence tfoot .c-nom{text-align:left;}

/* Les quatre etats se distinguent d'un coup d'oeil : l'absence saute au
   visage, le reste s'efface. C'est ce qu'on cherche sur cette feuille. */
.etat-present{color:var(--ink-faint);}
.etat-absent{color:var(--warn);font-weight:700;}
.etat-non-attendu{color:var(--border);}
.etat-non-pointe{color:var(--ink-faint);opacity:.55;}

@media print{
  /* Autant de colonnes que de jours : on resserre comme sur l'etat de caisse. */
  table.f-grille{font-size:9pt;}
  table.f-grille th, table.f-grille td{padding:3px 3px;white-space:nowrap;}
  table.f-grille .c-num{width:22px;text-align:center;}
  table.f-grille .c-nom{white-space:normal;}
  table.f-grille .c-jour{width:20px;text-align:center;padding:3px 1px;}
  table.f-grille .c-total{width:32px;text-align:right;}
  table.f-grille .j-jour{display:block;font-size:7pt;}
  table.f-grille .j-num{display:block;font-size:7.5pt;}
  table.f-grille tfoot{display:table-footer-group;}
  table.f-grille tfoot td{border-top:2px solid #000;text-align:center;}
  table.f-grille tfoot .c-nom{text-align:left;}

  /* Au papier, la couleur ne porte pas : c'est la graisse qui distingue. */
  .etat-absent{color:#000;font-weight:700;}
  .etat-present{color:#000;font-weight:400;}
  .etat-non-attendu, .etat-non-pointe{color:#666;}
}

.f-anim{
  display:flex;gap:10px;align-items:baseline;
  padding:7px 0;border-bottom:1px solid var(--border);font-size:12.5px;
}
.f-anim span{
  font-size:10.5px;text-transform:uppercase;letter-spacing:.07em;
  color:var(--ink-faint);white-space:nowrap;
}
.f-legende{
  margin-top:9px;font-size:11px;color:var(--ink-faint);
}

@media print{
  .f-anim{border-bottom-color:#000;color:#000;}
  .f-anim span{color:#333;}
  .f-legende{color:#333;font-size:8.5pt;}
}

/* ---------- l'encadrement, colonne par colonne ---------- */
/* Un nom ne tient pas dans une colonne de vingt points : c'est un chiffre qui
   y figure, et la legende en tete de classe le traduit. */
.rang{
  display:inline-flex;align-items:center;justify-content:center;
  width:17px;height:17px;border-radius:50%;
  background:var(--brand-2);color:#fff;
  font-size:10.5px;font-weight:700;flex:none;
}
tr.ligne-encadrement th{
  font-weight:600;font-size:11px;color:var(--ink-soft);
  border-bottom:2px solid var(--border);background:var(--surface-2);
}
tr.ligne-encadrement .c-nom{
  text-transform:none;letter-spacing:0;white-space:nowrap;
}

@media print{
  .rang{
    background:none;color:#000;border:1px solid #000;
    width:14px;height:14px;font-size:8pt;
  }
  tr.ligne-encadrement th{
    color:#000;background:#f4f4f4 !important;border-bottom:1.5px solid #000;
    -webkit-print-color-adjust:exact;print-color-adjust:exact;
    font-size:8pt;
  }
}

/* ---------- nouveaux inscrits : le rattachement au fichier INE ---------- */
.rattachement{display:flex;flex-direction:column;gap:6px;}
.rattachement .candidats{font-size:11.5px;color:var(--ink-soft);}
.rattachement .candidats b{color:var(--ink);}
.rattachement-champs{display:flex;gap:6px;align-items:center;}
.rattachement-champs input{padding:6px 8px;font-size:12.5px;}
.rattachement-champs input[name="matricule"]{width:150px;}
.rattachement-champs .champ-code{
  width:64px;text-align:center;letter-spacing:.25em;
  -webkit-text-security:disc;
}