:root {
  --green:     #1E7B4B;
  --green-l:   #C6EFCE;
  --green-d:   #145A38;
  --blue:      #17375E;
  --blue-l:    #DCE6F1;
  --amber:     #C09010;
  --amber-l:   #FFEB9C;
  --red:       #A32D2D;
  --red-l:     #FFC7CE;
  --gray:      #F2F2F2;
  --gray-d:    #888888;
  --white:     #FFFFFF;
  --text:      #1A1A1A;
  --text-m:    #555555;
  --text-l:    #888888;
  --border:    #DDDDDD;
  --radius:    8px;
  --radius-lg: 14px;
  --shadow:    0 1px 4px rgba(0,0,0,.08);
  --sidebar-w: 240px;
  --header-h:  56px;
  --font:      'Segoe UI', system-ui, -apple-system, Arial, sans-serif;
}

*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

html, body { height: 100%; font-family: var(--font); font-size: 15px;
             color: var(--text); background: #F7F8FA; }

/* ── SPLASH ─────────────────────────────────────────── */
.splash { display:flex; flex-direction:column; align-items:center;
          justify-content:center; height:100vh; gap:16px; }
.splash-title { font-size:28px; font-weight:700; color:var(--green); }
.splash-sub   { color:var(--text-m); font-size:14px; }

/* ── LAYOUT ─────────────────────────────────────────── */
#app { height:100%; }

.layout { display:grid; grid-template-columns:var(--sidebar-w) 1fr;
          grid-template-rows:var(--header-h) 1fr; height:100vh; }

/* ── HEADER ─────────────────────────────────────────── */
.header { grid-column:1/-1; background:var(--green); color:#fff;
          display:flex; align-items:center; padding:0 20px; gap:16px;
          position:sticky; top:0; z-index:100; }
.header-logo  { display:flex; align-items:center; gap:10px; font-weight:700; font-size:17px; }
.header-logo svg { flex-shrink:0; }
.header-space { flex:1; }
.header-user  { font-size:13px; opacity:.9; cursor:pointer; }
.header-user span { font-weight:600; }
.btn-logout   { background:rgba(255,255,255,.15); border:none; color:#fff;
                padding:6px 14px; border-radius:var(--radius); cursor:pointer;
                font-size:13px; transition:background .2s; }
.btn-logout:hover { background:rgba(255,255,255,.25); }
.menu-toggle  { display:none; background:none; border:none; color:#fff;
                cursor:pointer; padding:4px; }

/* ── SIDEBAR ─────────────────────────────────────────── */
.sidebar { background:var(--white); border-right:1px solid var(--border);
           overflow-y:auto; padding:12px 0; }
.nav-section { font-size:11px; font-weight:600; color:var(--text-l);
               text-transform:uppercase; letter-spacing:.06em;
               padding:16px 18px 6px; }
.nav-item { display:flex; align-items:center; gap:10px; padding:10px 18px;
            font-size:14px; color:var(--text-m); cursor:pointer;
            transition:background .15s, color .15s; border-radius:0; }
.nav-item:hover   { background:var(--gray); color:var(--text); }
.nav-item.active  { background:var(--green-l); color:var(--green);
                    font-weight:600; border-right:3px solid var(--green); }
.nav-icon { width:18px; height:18px; flex-shrink:0; }

/* ── MAIN ─────────────────────────────────────────── */
.main { overflow-y:auto; padding:24px; }
.page { display:none; }
.page.active { display:block; }

/* ── PAGE HEADER ─────────────────────────────────────── */
.page-header { display:flex; align-items:center; justify-content:space-between;
               margin-bottom:24px; flex-wrap:wrap; gap:12px; }
.page-title  { font-size:22px; font-weight:700; color:var(--text); }
.page-sub    { font-size:14px; color:var(--text-m); margin-top:2px; }

/* ── STATS CARDS ─────────────────────────────────────── */
.stats-grid { display:grid; grid-template-columns:repeat(auto-fit,minmax(160px,1fr));
              gap:16px; margin-bottom:24px; }
.stat-card  { background:var(--white); border:1px solid var(--border);
              border-radius:var(--radius-lg); padding:18px; }
.stat-label { font-size:12px; color:var(--text-m); font-weight:500;
              text-transform:uppercase; letter-spacing:.05em; }
.stat-value { font-size:28px; font-weight:700; color:var(--green); margin-top:6px; }
.stat-card.amber .stat-value { color:var(--amber); }
.stat-card.blue  .stat-value { color:var(--blue); }
.stat-card.red   .stat-value { color:var(--red); }

/* ── CARD ─────────────────────────────────────────────── */
.card { background:var(--white); border:1px solid var(--border);
        border-radius:var(--radius-lg); margin-bottom:20px; }
.card-header { padding:16px 20px; border-bottom:1px solid var(--border);
               display:flex; align-items:center; justify-content:space-between; }
.card-title  { font-size:15px; font-weight:600; }
.card-body   { padding:20px; }

/* ── TABLE ─────────────────────────────────────────────── */
.table-wrap { overflow-x:auto; }
table { width:100%; border-collapse:collapse; font-size:14px; }
th { background:var(--blue); color:#fff; padding:10px 12px;
     text-align:left; font-weight:600; font-size:12px;
     text-transform:uppercase; letter-spacing:.04em; white-space:nowrap; }
td { padding:10px 12px; border-bottom:1px solid var(--border);
     vertical-align:middle; }
tr:last-child td { border-bottom:none; }
tr:hover td { background:var(--gray); }
.td-center { text-align:center; }

/* ── NOTE INPUT (grille saisie) ─────────────────────────── */
.grille-table input[type=number] {
  width:60px; padding:4px 6px; border:1px solid var(--border);
  border-radius:4px; font-size:13px; text-align:center;
  transition:border-color .2s; background:var(--white);
}
.grille-table input[type=number]:focus {
  outline:none; border-color:var(--green); background:#F0FAF4;
}
.grille-table input.saved   { border-color:var(--green-l); background:#F0FAF4; }
.grille-table input.saving  { border-color:var(--amber); background:var(--amber-l); }
.grille-table input.error   { border-color:var(--red); background:var(--red-l); }
.col-nom { min-width:180px; font-weight:500; }
.col-moy { font-weight:700; color:var(--green); }
.col-rang{ color:var(--text-m); font-size:13px; }
.badge-mention { font-size:11px; padding:2px 8px; border-radius:10px;
                 font-weight:600; white-space:nowrap; }
.mention-excellent  { background:#C6EFCE; color:#1E7B4B; }
.mention-tresbien   { background:#BDD7EE; color:#17375E; }
.mention-bien       { background:#D9EAD3; color:#2E6B1E; }
.mention-assezbien  { background:#FFF2CC; color:#7D5700; }
.mention-passable   { background:#FCE5CD; color:#7D4000; }
.mention-insuffisant{ background:#FFC7CE; color:#A32D2D; }

/* ── FORM ─────────────────────────────────────────────── */
.form-grid { display:grid; grid-template-columns:repeat(auto-fit,minmax(220px,1fr));
             gap:16px; }
.form-group { display:flex; flex-direction:column; gap:6px; }
.form-group.full { grid-column:1/-1; }
label { font-size:13px; font-weight:600; color:var(--text-m); }
input, select, textarea {
  padding:9px 12px; border:1px solid var(--border);
  border-radius:var(--radius); font-size:14px; font-family:var(--font);
  transition:border-color .2s; background:var(--white); color:var(--text);
  width:100%;
}
input:focus, select:focus, textarea:focus {
  outline:none; border-color:var(--green); box-shadow:0 0 0 3px rgba(30,123,75,.12);
}
textarea { resize:vertical; min-height:80px; }
.form-hint { font-size:12px; color:var(--text-l); }

/* ── BUTTONS ─────────────────────────────────────────── */
.btn { display:inline-flex; align-items:center; gap:8px; padding:9px 18px;
       border-radius:var(--radius); font-size:14px; font-weight:600;
       cursor:pointer; border:none; transition:all .2s; text-decoration:none; }
.btn-primary { background:var(--green); color:#fff; }
.btn-primary:hover { background:var(--green-d); }
.btn-secondary{ background:var(--gray); color:var(--text); }
.btn-secondary:hover { background:#E5E5E5; }
.btn-danger   { background:var(--red); color:#fff; }
.btn-danger:hover { background:#7A1F1F; }
.btn-outline  { background:transparent; color:var(--green); border:1.5px solid var(--green); }
.btn-outline:hover { background:var(--green-l); }
.btn-sm { padding:6px 12px; font-size:12px; }
.btn:disabled { opacity:.5; cursor:not-allowed; }

/* ── ALERT / TOAST ─────────────────────────────────────── */
.alert { padding:12px 16px; border-radius:var(--radius); margin-bottom:16px;
         font-size:14px; display:flex; align-items:flex-start; gap:10px; }
.alert-success { background:var(--green-l); color:var(--green); }
.alert-error   { background:var(--red-l);   color:var(--red); }
.alert-warn    { background:var(--amber-l); color:var(--amber); }
.alert-info    { background:var(--blue-l);  color:var(--blue); }

#toast-container { position:fixed; bottom:20px; right:20px; z-index:9999;
                   display:flex; flex-direction:column; gap:10px; }
.toast { padding:12px 18px; border-radius:var(--radius); color:#fff;
         font-size:14px; font-weight:500; min-width:220px;
         animation:slideIn .3s ease; box-shadow:0 4px 12px rgba(0,0,0,.15); }
.toast.success { background:var(--green); }
.toast.error   { background:var(--red); }
.toast.info    { background:var(--blue); }
@keyframes slideIn { from { transform:translateX(100%); opacity:0; }
                     to   { transform:translateX(0);    opacity:1; } }

/* ── MODAL ─────────────────────────────────────────────── */
.modal-overlay { display:none; position:fixed; inset:0;
                 background:rgba(0,0,0,.45); z-index:500;
                 align-items:center; justify-content:center; padding:20px; }
.modal-overlay.open { display:flex; }
.modal { background:var(--white); border-radius:var(--radius-lg);
         width:100%; max-width:560px; max-height:90vh; overflow-y:auto; }
.modal-header { padding:18px 20px; border-bottom:1px solid var(--border);
                display:flex; align-items:center; justify-content:space-between; }
.modal-title  { font-size:16px; font-weight:700; }
.modal-close  { background:none; border:none; font-size:22px; cursor:pointer;
                color:var(--text-m); line-height:1; }
.modal-body   { padding:20px; }
.modal-footer { padding:14px 20px; border-top:1px solid var(--border);
                display:flex; justify-content:flex-end; gap:10px; }

/* ── LOGIN PAGE ─────────────────────────────────────────── */
.login-wrap { min-height:100vh; display:flex; align-items:center;
              justify-content:center; background:#F0FAF4; padding:20px; }
.login-card { background:var(--white); border-radius:var(--radius-lg);
              padding:40px 36px; width:100%; max-width:400px;
              box-shadow:0 4px 24px rgba(0,0,0,.1); }
.login-logo { display:flex; align-items:center; gap:12px;
              margin-bottom:32px; }
.login-logo h1 { font-size:22px; font-weight:800; color:var(--green); }

/* ── BADGE / PILL ─────────────────────────────────────── */
.badge { font-size:11px; font-weight:600; padding:2px 8px;
         border-radius:10px; display:inline-block; }
.badge-green  { background:var(--green-l); color:var(--green); }
.badge-blue   { background:var(--blue-l);  color:var(--blue); }
.badge-amber  { background:var(--amber-l); color:var(--amber); }
.badge-red    { background:var(--red-l);   color:var(--red); }
.badge-gray   { background:var(--gray);    color:var(--text-m); }

/* ── EMPTY STATE ─────────────────────────────────────── */
.empty { text-align:center; padding:48px 20px; color:var(--text-m); }
.empty-icon { font-size:48px; margin-bottom:12px; opacity:.4; }
.empty-text { font-size:16px; font-weight:500; margin-bottom:8px; }
.empty-sub  { font-size:14px; }

/* ── LOADING SPINNER ─────────────────────────────────── */
.spinner { width:32px; height:32px; border:3px solid var(--border);
           border-top-color:var(--green); border-radius:50%;
           animation:spin .7s linear infinite; margin:auto; }
@keyframes spin { to { transform:rotate(360deg); } }
.loading-overlay { display:flex; align-items:center; justify-content:center;
                   padding:40px; }

/* ── PROGRESS BAR SMS ─────────────────────────────────── */
.progress-bar { width:100%; height:8px; background:var(--border);
                border-radius:4px; overflow:hidden; }
.progress-fill{ height:100%; background:var(--green); border-radius:4px;
                transition:width .4s ease; }

/* ── RESPONSIVE ─────────────────────────────────────── */
@media (max-width:768px) {
  .layout { grid-template-columns:1fr; grid-template-rows:var(--header-h) 1fr; }
  .sidebar { display:none; position:fixed; top:var(--header-h); left:0;
             width:240px; height:calc(100vh - var(--header-h));
             z-index:200; box-shadow:4px 0 12px rgba(0,0,0,.1); }
  .sidebar.open { display:block; }
  .menu-toggle { display:block; }
  .main { padding:16px; }
  .grille-table input[type=number] { width:52px; font-size:12px; }
  .stats-grid { grid-template-columns:repeat(2,1fr); }
  .form-grid  { grid-template-columns:1fr; }
}

/* ── PRINT ─────────────────────────────────────────────── */
@media print {
  .sidebar,.header,.btn,.page-header .btn { display:none !important; }
  .main { padding:0; }
  body  { background:white; }
}

/* ── PWA INSTALL BANNER ─────────────────────────────── */
#pwa-banner { display:none; position:fixed; bottom:0; left:0; right:0;
              background:var(--green); color:#fff; padding:14px 20px;
              display:flex; align-items:center; gap:12px; z-index:300; }
#pwa-banner.hidden { display:none; }
#pwa-banner p   { flex:1; font-size:14px; }
#pwa-banner button { background:rgba(255,255,255,.2); border:none; color:#fff;
                     padding:8px 16px; border-radius:var(--radius);
                     cursor:pointer; font-weight:600; }

/* ── SETTINGS TABS ── */
.tab-btn { padding:8px 18px; border:2px solid #E5E7EB; background:#fff; border-radius:8px;
           font-size:13px; font-weight:600; color:#555; cursor:pointer; transition:all .2s; }
.tab-btn:hover { border-color:#1E7B4B; color:#1E7B4B; }
.tab-btn.active { background:#1E7B4B; border-color:#1E7B4B; color:#fff; }
.tab-panel { display:block; }