:root {
  --violet: #6d1f7e; --violet-clair: #f3e6f5; --encre: #1c1c28;
  --gris: #6b6b7a; --fond: #f7f6f9; --blanc: #fff; --ligne: #e4e2ea;
  --vert: #1b7f4d; --vert-clair: #e2f3ea; --orange: #b45f06; --orange-clair: #fdf0e0;
  --rouge: #b3261e; --rouge-clair: #fbe9e7; --bleu: #1a56a8; --bleu-clair: #e5eefb;
}
* { box-sizing: border-box; }
body { margin: 0; font: 15px/1.5 system-ui, -apple-system, "Segoe UI", sans-serif;
       color: var(--encre); background: var(--fond); }
a { color: var(--violet); text-decoration: none; }
a:hover { text-decoration: underline; }

.layout { display: flex; min-height: 100vh; }
nav.side { width: 215px; background: var(--encre); color: #cfcfdd; padding: 18px 0; flex-shrink: 0; }
nav.side .marque { font-weight: 700; color: #fff; padding: 0 20px 14px; font-size: 17px;
                   border-bottom: 1px solid #33334a; margin-bottom: 10px; }
nav.side .marque small { display: block; font-weight: 400; color: #9f9fb8; font-size: 12px; }
nav.side a { display: block; padding: 9px 20px; color: #cfcfdd; }
nav.side a:hover { background: #2a2a3d; text-decoration: none; }
nav.side a.actif { background: var(--violet); color: #fff; }
nav.side .bas { margin-top: 24px; padding: 12px 20px; font-size: 12px; color: #8888a0;
                border-top: 1px solid #33334a; }
main { flex: 1; padding: 26px 34px; max-width: 1180px; }
h1 { font-size: 22px; margin: 0 0 18px; }
h2 { font-size: 16px; margin: 26px 0 10px; }

.cartes { display: flex; gap: 14px; flex-wrap: wrap; margin-bottom: 20px; }
.carte { background: var(--blanc); border: 1px solid var(--ligne); border-radius: 10px;
         padding: 14px 18px; min-width: 150px; }
.carte .n { font-size: 26px; font-weight: 700; }
.carte .l { color: var(--gris); font-size: 13px; }
.carte.alerte { border-color: var(--rouge); background: var(--rouge-clair); }

table { width: 100%; border-collapse: collapse; background: var(--blanc);
        border: 1px solid var(--ligne); border-radius: 10px; overflow: hidden; }
th { text-align: left; font-size: 12px; text-transform: uppercase; letter-spacing: .04em;
     color: var(--gris); padding: 10px 12px; background: #fbfafd; border-bottom: 1px solid var(--ligne); }
td { padding: 9px 12px; border-bottom: 1px solid var(--ligne); vertical-align: top; }
tr:last-child td { border-bottom: none; }
tr:hover td { background: #fcfbfe; }

.badge { display: inline-block; padding: 2px 9px; border-radius: 20px; font-size: 12px; font-weight: 600; }
.b-inscrit { background: var(--orange-clair); color: var(--orange); }
.b-paye { background: var(--bleu-clair); color: var(--bleu); }
.b-convoque { background: var(--violet-clair); color: var(--violet); }
.b-present, .b-examen_realise { background: var(--vert-clair); color: var(--vert); }
.b-absent, .b-annule { background: var(--rouge-clair); color: var(--rouge); }
.b-neutre { background: #ececf2; color: var(--gris); }

.btn { display: inline-block; border: none; border-radius: 8px; padding: 7px 14px;
       font: 600 14px system-ui; cursor: pointer; background: var(--violet); color: #fff; }
.btn:hover { filter: brightness(1.1); }
.btn.sec { background: #ececf2; color: var(--encre); }
.btn.ok { background: var(--vert); }
.btn.danger { background: var(--rouge); }
.btn.mini { padding: 4px 10px; font-size: 13px; border-radius: 6px; }

.encart { background: var(--blanc); border: 1px solid var(--ligne); border-radius: 10px;
          padding: 18px 20px; margin-bottom: 16px; }
.encart.avert { border-left: 4px solid var(--orange); }
.flash { padding: 10px 16px; border-radius: 8px; margin-bottom: 16px; }
.flash.ok { background: var(--vert-clair); color: var(--vert); }
.flash.err { background: var(--rouge-clair); color: var(--rouge); }

form.ligne { display: flex; gap: 10px; align-items: center; flex-wrap: wrap; }
input[type=text], input[type=email], input[type=tel], input[type=password],
input[type=date], input[type=file], select {
  padding: 8px 10px; border: 1px solid var(--ligne); border-radius: 8px; font: 14px system-ui;
  background: #fff; }
label { font-size: 13px; color: var(--gris); display: block; margin-bottom: 3px; }
.champ { margin-bottom: 14px; }
.grille2 { display: grid; grid-template-columns: 1fr 1fr; gap: 0 22px; }
.libelle-banque { font-family: ui-monospace, monospace; font-size: 13px; color: var(--encre); }
.muted { color: var(--gris); font-size: 13px; }
.score { font-weight: 700; color: var(--violet); }

/* Formulaire public */
.public-wrap { max-width: 660px; margin: 30px auto; padding: 0 16px; }
.public-tete { text-align: center; margin-bottom: 22px; }
.public-tete .logo { font-size: 26px; font-weight: 800; color: var(--violet); }
.iban { font-family: ui-monospace, monospace; background: var(--violet-clair);
        padding: 10px 14px; border-radius: 8px; display: inline-block; font-size: 15px; }