/* Fontes IBM Plex auto-hébergées (latin) — mêmes fichiers que le système « Cran » */
@font-face{font-family:"IBM Plex Sans";src:url(fonts/plexsans-latin.woff2) format("woff2");font-weight:100 700;font-style:normal;font-display:swap}
@font-face{font-family:"IBM Plex Mono";src:url(fonts/plexmono-400-latin.woff2) format("woff2");font-weight:400;font-style:normal;font-display:swap}
:root{
  --sans:"IBM Plex Sans","Inter","Segoe UI",system-ui,-apple-system,sans-serif;
  --mono:"IBM Plex Mono",ui-monospace,SFMono-Regular,Menlo,monospace;
  --bg:#0e0e10; --panel:#191a1d; --panel2:#222428; --line:#33363c;
  --ink:#ededed; --muted:#9a9da4; --accent:#6ee7b7; --accent2:#7a7d85;
  /* couleurs des types de validation */
  --prof:#f472b6;   /* validation orale / jalon prof */
  --psd:#60a5fa;    /* rendu fichier .psd */
  --expe:#a78bfa;   /* expérimentation documentée */
  --pdf:#34d399;    /* dossier pdf */
  --print:#fbbf24;  /* tirage / impression */
  --gold:#f5c518;
  --warn:#fb923c;   /* état : demande de validation */
  --done:#34d399;   /* état : validé */
}
*{box-sizing:border-box}
body{
  margin:0; background:linear-gradient(180deg,#0b0b0d,#141417); color:var(--ink);
  font-family:var(--sans);
  -webkit-font-smoothing:antialiased; padding:22px 26px 34px; min-height:100vh;
}
.wrap{max-width:1440px; margin:0 auto}
a{color:var(--accent); text-decoration:none}
a:hover{text-decoration:underline}

/* ---- barre de navigation ---- */
nav{display:flex; align-items:center; gap:14px; margin-bottom:20px; font-size:13px; flex-wrap:wrap}
nav .brand{font-weight:700; font-size:15px; letter-spacing:.3px; color:var(--ink)}
nav .brand small{color:var(--muted); font-weight:500; margin-left:8px}
nav .links{margin-left:auto; display:flex; gap:6px; align-items:center; flex-wrap:wrap}
nav .links a{color:var(--muted); padding:6px 11px; border-radius:4px; border:1px solid transparent}
nav .links a:hover{color:var(--ink); border-color:var(--line); text-decoration:none}
nav .links a.active{color:var(--ink); border-color:var(--line); background:var(--panel)}
nav .userchip{font-size:12px; color:var(--muted); padding:6px 11px; border:1px solid var(--line); border-radius:10px}
nav .userchip b{color:var(--ink)}

header.page{display:flex; flex-wrap:wrap; align-items:flex-end; justify-content:space-between; gap:16px; margin-bottom:14px}
h1{font-size:23px; margin:0; letter-spacing:.3px}
h1 small{display:block; font-size:13px; font-weight:500; color:var(--muted); margin-top:5px; letter-spacing:.2px}
h2{font-size:16px; margin:26px 0 10px}
.toolbar{display:flex; gap:8px; flex-wrap:wrap}
button, .btn{
  background:var(--panel2); color:var(--ink); border:1px solid var(--line);
  border-radius:4px; padding:8px 14px; font-size:13px; cursor:pointer; transition:.15s;
  display:inline-block; text-decoration:none;
}
button:hover, .btn:hover{border-color:var(--accent2); color:#fff; text-decoration:none}
button.danger:hover{border-color:var(--prof)}
button.primary{border-color:var(--accent); color:var(--accent)}
button.primary:hover{background:#10231d}

/* ---- formulaires ---- */
input[type=text], input[type=password], input[type=number], select, textarea{
  background:var(--panel2); border:1px solid var(--line); color:var(--ink);
  border-radius:3.5px; padding:8px 10px; font-size:13px; outline:none; font-family:inherit;
}
input:focus, select:focus, textarea:focus{border-color:var(--accent); background:#10231d}
label{font-size:12px; color:var(--muted); display:block; margin-bottom:4px}
.field{margin-bottom:14px}
.formrow{display:flex; gap:10px; flex-wrap:wrap; align-items:flex-end}
.formrow .field{margin-bottom:0}

/* ---- carte de connexion ---- */
.login-card{
  max-width:380px; margin:9vh auto 0; background:var(--panel); border:1px solid var(--line);
  border-radius:8px; padding:30px 28px;
}
.login-card h1{font-size:20px; margin-bottom:4px}
.login-card .sub{font-size:12.5px; color:var(--muted); margin-bottom:22px}
.login-card input{width:100%}
.login-card button{width:100%; padding:10px; margin-top:6px}
.error{background:#2a1518; border:1px solid #5c2730; color:#fda4af; font-size:13px;
  border-radius:4.5px; padding:10px 13px; margin-bottom:14px}
.notice{background:#102318; border:1px solid #1e4d33; color:#86efac; font-size:13px;
  border-radius:4.5px; padding:10px 13px; margin-bottom:14px}

/* ---- portail : cartes de cours ---- */
.courses{display:grid; grid-template-columns:repeat(auto-fill,minmax(260px,1fr)); gap:14px; margin-top:18px}
.course-card{
  display:block; background:var(--panel); border:1px solid var(--line); border-radius:7px;
  padding:20px; color:var(--ink); transition:.15s;
}
.course-card:hover{border-color:var(--accent); text-decoration:none; transform:translateY(-1px)}
.course-card b{font-size:15px; display:block; margin-bottom:6px}
.course-card span{font-size:12px; color:var(--muted)}
/* cours sans accès : carte visible mais grisée, non cliquable */
.course-card.locked{opacity:.45; filter:grayscale(.85); cursor:default}
.course-card.locked:hover{border-color:var(--line); transform:none}

/* ---- bandeau classe ---- */
.classbar{
  background:var(--panel); border:1px solid var(--line); border-radius:7px;
  padding:16px 18px; margin-bottom:16px; display:grid;
  grid-template-columns:auto 1fr; gap:18px; align-items:center;
}
.bigstat{text-align:center; padding-right:18px; border-right:1px solid var(--line)}
.bigstat .n{font-size:34px; font-weight:700; line-height:1; letter-spacing:.5px}
.bigstat .n small{font-size:16px; color:var(--muted); font-weight:600}
.bigstat .l{font-size:11px; text-transform:uppercase; letter-spacing:.6px; color:var(--muted); margin-top:6px}
.stepprog{display:grid; grid-template-columns:repeat(auto-fit,minmax(120px,1fr)); gap:9px 14px}
.sp{font-size:11px}
.sp .lab{display:flex; align-items:center; gap:5px; color:var(--muted); margin-bottom:5px; font-weight:600}
.sp .lab b{color:var(--ink); font-weight:700}
.sp .minibar{height:7px; background:var(--panel2); border-radius:2.5px; overflow:hidden}
.sp .minibar i{display:block; height:100%; width:0; border-radius:2.5px; transition:width .35s}
.sp .cnt{font-size:10.5px; color:var(--muted); margin-top:4px}

/* ---- table principale ---- */
table{width:100%; border-collapse:separate; border-spacing:0; background:var(--panel);
  border:1px solid var(--line); border-radius:7px; overflow:hidden}
thead th{font-size:11px; color:var(--muted); font-weight:600; padding:11px 7px;
  text-align:center; background:var(--panel2); vertical-align:bottom}
thead th.who{text-align:left; width:182px}
thead th.step{width:58px; cursor:help}
thead th.step .stepn{display:inline-flex; align-items:center; justify-content:center;
  width:24px; height:24px; border-radius:50%; border:1px solid var(--line);
  font-size:12.5px; font-weight:700; color:var(--ink); transition:.15s}
thead th.step:hover .stepn{border-color:var(--accent); color:var(--accent)}
thead th .pts{display:block; font-size:9.5px; color:var(--muted); margin-top:4px}
thead th .vtag{display:inline-block; margin-top:5px; font-size:8.5px; font-weight:700;
  letter-spacing:.4px; padding:1px 5px; border-radius:2px;
  color:var(--muted); background:var(--panel); border:1px solid var(--line)}
thead th.score{width:96px}
thead th.status{width:120px}
thead th.note{width:76px}
thead th.final{width:90px}

tbody td{padding:8px 7px; border-top:1px solid var(--line); text-align:center; vertical-align:middle}
tbody td.who{text-align:left}
tbody tr:hover{background:#1d1f23}
tbody tr.self{background:#15201c}
tbody tr.self:hover{background:#18241f}
.rank{display:inline-block; width:20px; color:var(--muted); font-size:11px; text-align:right; margin-right:8px}
.name{display:inline-block; min-width:118px; font-size:13.5px; font-weight:600; padding:3px 6px}

/* case tri-état : 0 vide · 1 orange (en attente) · 2 vert (validé) */
.box{width:25px; height:25px; border-radius:3.5px; border:2px solid var(--line);
  display:inline-flex; align-items:center; justify-content:center; transition:.15s;
  background:var(--panel2); cursor:pointer}
.box::after{content:""; width:8px; height:14px; border:solid #0b0b0d; border-width:0 3px 3px 0;
  transform:rotate(45deg) scale(0); transition:.15s; margin-bottom:3px}
.box:hover{border-color:var(--accent2)}
.box.s1{background:var(--warn); border-color:var(--warn)}
.box.s1::after{transform:rotate(45deg) scale(1)}
.box.s2{background:var(--done); border-color:var(--done)}
.box.s2::after{transform:rotate(45deg) scale(1)}
.box.locked{cursor:not-allowed; opacity:.85}
.box.other{cursor:default}
.box.other:hover{border-color:var(--line)}

/* score */
td.score{font-variant-numeric:tabular-nums}
td.score .bar{height:7px; background:var(--panel2); border-radius:2.5px; overflow:hidden; margin-top:5px}
td.score .bar i{display:block; height:100%; width:0; background:linear-gradient(90deg,var(--accent2),var(--accent)); transition:width .3s}
td.score b{font-size:14px}
td.score b small{font-size:10px; color:var(--muted); font-weight:600}

/* pastille de statut */
.pill{display:inline-block; font-size:11px; font-weight:700; letter-spacing:.3px;
  padding:4px 10px; border-radius:10px; border:1px solid var(--line); color:var(--muted)}
.pill.s1{color:#cdd0d6}
.pill.s2{color:#a78bfa; border-color:#3b2f5e}
.pill.s3{color:#60a5fa; border-color:#1e3a5a}
.pill.s4{color:#0b0b0d; background:var(--gold); border-color:var(--gold)}

/* note /6 + XP final */
td.note input{width:56px; text-align:center; font-variant-numeric:tabular-nums; padding:5px 6px}
td.final{font-variant-numeric:tabular-nums}
td.final b{font-size:15px; color:var(--gold)}
td.final small{font-size:10px; color:var(--muted)}

/* tooltip jalons */
#tip{position:fixed; z-index:50; max-width:300px; background:#050506; border:1px solid var(--line);
  color:var(--ink); font-size:12px; line-height:1.5; padding:10px 12px; border-radius:5px;
  box-shadow:0 10px 28px rgba(0,0,0,.55); pointer-events:none; opacity:0;
  transition:opacity .12s; font-weight:400; text-align:left}
#tip.show{opacity:1}
#tip b{color:var(--accent); display:block; margin-bottom:5px; font-size:11px; letter-spacing:.3px}

/* toast */
#toast{position:fixed; left:50%; bottom:26px; transform:translateX(-50%) translateY(8px);
  background:#050506; border:1px solid var(--line); color:var(--ink); font-size:13px;
  padding:10px 16px; border-radius:5px; opacity:0; transition:.2s; z-index:60; pointer-events:none}
#toast.show{opacity:1; transform:translateX(-50%) translateY(0)}

/* légende + pied */
.legend{display:flex; flex-wrap:wrap; gap:14px; margin:14px 2px 0; font-size:11.5px; color:var(--muted)}
.legend span{display:inline-flex; align-items:center; gap:6px}
.legend i{width:11px; height:11px; border-radius:1.5px; display:inline-block}
footer.proj{margin-top:16px; font-size:11.5px; color:var(--muted); line-height:1.65;
  border-top:1px solid var(--line); padding-top:12px}
footer.proj b{color:var(--ink); font-weight:600}
code{background:var(--panel2); padding:1px 6px; border-radius:2.5px; color:var(--accent); font-size:11px}

/* ---- admin ---- */
.tabs{display:flex; gap:6px; margin-bottom:18px; flex-wrap:wrap}
.tabs a{padding:8px 14px; font-size:13px; color:var(--muted); border:1px solid var(--line);
  border-radius:4px; background:var(--panel)}
.tabs a.active{color:var(--ink); border-color:var(--accent)}
.tabs a:hover{text-decoration:none; color:var(--ink)}
table.admin{font-size:13px}
table.admin th{text-align:left; padding:10px 12px}
table.admin td{text-align:left; padding:8px 12px}
table.admin td.actions{text-align:right; white-space:nowrap}
table.admin input[type=text], table.admin input[type=number]{padding:5px 8px; font-size:12.5px}
.panelbox{background:var(--panel); border:1px solid var(--line); border-radius:7px; padding:18px; margin-bottom:18px}
.mono{font-family:var(--mono); font-size:12px}
.pwbox{background:#102318; border:1px solid #1e4d33; border-radius:4px; padding:3px 9px;
  font-family:var(--mono); color:#86efac; font-size:13px}
.muted{color:var(--muted)}
.small{font-size:12px}

@media print{
  body{background:#fff; color:#000; padding:0}
  button,.toolbar,#tip,#toast,nav{display:none}
  .classbar,table,footer.proj{break-inside:avoid; border-color:#ccc}
}
@media(max-width:900px){
  body{padding:14px 12px 28px}
  .classbar{grid-template-columns:1fr}
  .bigstat{border-right:none; border-bottom:1px solid var(--line); padding:0 0 12px}
  table{font-size:12px}
}

/* ---- accent orange, page admin uniquement (body.page-admin via layout.php) ---- */
body.page-admin{--accent:#f97316}
body.page-admin input:focus, body.page-admin select:focus, body.page-admin textarea:focus{background:#241407}

/* ---- capsules d'accès (admin, activées par JS ; fallback = checkboxes) ---- */
body.page-admin td.acces-cell.enhanced > label{display:none !important}
.acces-pills{display:flex;flex-wrap:wrap;gap:4px;align-items:center;position:relative;min-width:170px}
.acces-pill{display:inline-flex;align-items:center;gap:5px;padding:2px 8px 2px 10px;border-radius:999px;font-size:11px;line-height:1.7;border:1px solid;white-space:nowrap}
.acces-pill button{all:unset;cursor:pointer;font-size:12px;opacity:.6;padding:0 1px;line-height:1}
.acces-pill button:hover{opacity:1}
.acces-add{all:unset;cursor:pointer;width:20px;height:20px;border-radius:999px;border:1px dashed var(--line);color:var(--muted);display:inline-flex;align-items:center;justify-content:center;font-size:14px;line-height:1}
.acces-add:hover{border-color:var(--accent);color:var(--accent)}
.acces-menu{position:absolute;top:calc(100% + 5px);left:0;z-index:40;background:var(--panel2);border:1px solid var(--line);border-radius:6px;padding:4px;display:flex;flex-direction:column;gap:2px;box-shadow:0 10px 26px rgba(0,0,0,.55);min-width:160px}
.acces-menu button{all:unset;cursor:pointer;padding:5px 10px;border-radius:4px;font-size:12px;display:flex;align-items:center;gap:7px;color:var(--ink)}
.acces-menu button:hover{background:var(--panel)}
.acces-menu .dot{width:8px;height:8px;border-radius:999px;flex:none}
.acces-menu .empty{color:var(--muted);font-size:11px;padding:4px 9px}
body.page-admin table.admin button.dirty{border-color:var(--accent);color:var(--accent)}