/* =============================================================
   eClasseur.ma — feuille de style commune
   Couleurs reprises du classeur pédagogique (OFPPT)
   ============================================================= */
:root{
  --ofblue:#1f4e79; --blue:#1f5c99; --blue2:#2f7dc4; --vert:#1d7a43;
  --bg:#eef1f5; --txt:#1c2530; --gris:#5a6675; --ligne:#e0e6ee;
  --rouge:#b3261e; --orange:#a9560a;
}
*{box-sizing:border-box;}
body{margin:0;font-family:"Segoe UI",Arial,sans-serif;background:var(--bg);color:var(--txt);font-size:14px;}
a{color:var(--blue);}
img{max-width:100%;}

/* ---------------------------------------------------------- Connexion -- */
.login-wrap{min-height:100vh;display:flex;align-items:center;justify-content:center;padding:24px;
  background:linear-gradient(135deg,#dfe7f0 0%,#eef1f5 45%,#e4ece4 100%);}
.login-card{width:100%;max-width:420px;background:#fff;border-radius:16px;
  box-shadow:0 12px 40px rgba(20,40,70,.16);overflow:hidden;}
.login-top{background:#fff;padding:26px 30px 18px;text-align:center;border-bottom:1px solid var(--ligne);}
.login-top img{width:78px;height:78px;}
.login-top .site{font-size:26px;font-weight:800;color:var(--ofblue);letter-spacing:-.4px;margin-top:10px;}
.login-top .site i{font-style:normal;color:var(--vert);}
.login-top .base{font-size:12.5px;color:var(--gris);font-weight:600;margin-top:2px;}
.login-body{padding:24px 30px 30px;}
.login-body h1{font-size:17px;margin:0 0 4px;color:var(--ofblue);}
.login-body .sous{font-size:12.5px;color:var(--gris);margin:0 0 18px;}
.login-foot{text-align:center;font-size:11.5px;color:var(--gris);padding:14px;background:#f7f9fc;border-top:1px solid var(--ligne);}
.login-foot .of{font-weight:700;color:#43505f;}

/* ------------------------------------------------------- Formulaires -- */
label.lab{display:block;font-size:12.5px;font-weight:700;color:#43505f;margin:0 0 5px;}
.champ{width:100%;padding:11px 13px;border:1px solid #c4d2e3;border-radius:9px;font-size:14px;
  background:#fff;color:var(--txt);font-family:inherit;}
.champ:focus{outline:2px solid var(--blue2);outline-offset:-1px;background:#fff;}
.champ[readonly],.champ:disabled{background:#f1f4f8;color:#6a7787;}
.bloc{margin-bottom:15px;}
.aide{font-size:11.5px;color:var(--gris);margin-top:5px;line-height:1.45;}
.mdp-wrap{position:relative;}
.mdp-wrap .oeil{position:absolute;right:8px;top:50%;transform:translateY(-50%);background:none;border:0;
  cursor:pointer;font-size:15px;padding:5px 7px;color:var(--gris);}
.btn{display:inline-block;background:var(--ofblue);color:#fff;border:0;border-radius:9px;
  padding:11px 20px;font-size:14px;font-weight:700;cursor:pointer;text-decoration:none;font-family:inherit;}
.btn:hover{background:#16324e;}
.btn.large{width:100%;padding:13px;font-size:15px;}
.btn.vert{background:var(--vert);} .btn.vert:hover{background:#176235;}
.btn.gris{background:#fff;color:var(--ofblue);border:1px solid #c4d2e3;} .btn.gris:hover{background:#e6eef7;}
.btn.rouge{background:var(--rouge);} .btn.rouge:hover{background:#8f1e17;}
.btn.mini{padding:6px 11px;font-size:12px;border-radius:7px;}

/* ------------------------------------------------------------ Alertes -- */
.alert{border-radius:9px;padding:11px 14px;font-size:13px;margin:0 0 15px;line-height:1.5;}
.alert.err{background:#fdecea;border:1px solid #f5c6c2;color:#8f1e17;}
.alert.ok{background:#eaf7ef;border:1px solid #bfe3cd;color:#14532d;}
.alert.info{background:#eef3f9;border:1px solid #d4e0ee;color:#1c3d5c;}
.alert.warn{background:#fdf3e6;border:1px solid #f0d7b4;color:#7a3b00;}
.alert b{font-weight:700;}

/* ------------------------------------------------------------ En-tête -- */
header.app{background:#fff;border-bottom:3px solid var(--ofblue);padding:10px 22px;display:flex;
  align-items:center;gap:16px;flex-wrap:wrap;box-shadow:0 2px 8px rgba(0,0,0,.08);}
header.app .logo{width:46px;height:46px;}
header.app .marque{line-height:1.15;}
header.app .marque .n{font-size:19px;font-weight:800;color:var(--ofblue);letter-spacing:-.3px;}
header.app .marque .n i{font-style:normal;color:var(--vert);}
header.app .marque .b{font-size:11px;color:var(--gris);font-weight:600;}
header.app nav{display:flex;gap:6px;flex-wrap:wrap;margin-left:14px;padding-left:14px;border-left:1px solid var(--ligne);}
header.app nav a{padding:8px 13px;border-radius:8px;font-size:13px;font-weight:600;color:#43505f;text-decoration:none;}
header.app nav a:hover{background:#eef3f9;color:var(--ofblue);}
header.app nav a.on{background:var(--ofblue);color:#fff;}
header.app .compte{margin-left:auto;display:flex;align-items:center;gap:10px;}
header.app .avatar{width:36px;height:36px;border-radius:50%;background:var(--ofblue);color:#fff;
  display:flex;align-items:center;justify-content:center;font-weight:800;font-size:13px;}
header.app .qui{line-height:1.2;text-align:right;}
header.app .qui .nm{font-size:13px;font-weight:700;}
header.app .qui .rl{font-size:11px;color:var(--gris);}

/* ----------------------------------------------------------- Contenu --- */
main{max-width:1180px;margin:0 auto;padding:22px;}
.titre-page{display:flex;align-items:center;gap:12px;flex-wrap:wrap;margin:0 0 18px;}
.titre-page h1{font-size:21px;margin:0;color:var(--ofblue);}
.titre-page .actions{margin-left:auto;display:flex;gap:8px;flex-wrap:wrap;}
.carte{background:#fff;border:1px solid var(--ligne);border-radius:14px;padding:20px;
  box-shadow:0 2px 10px rgba(20,40,70,.05);margin-bottom:18px;}
.carte h2{font-size:15px;margin:0 0 14px;color:var(--ofblue);}
.grille{display:grid;grid-template-columns:repeat(auto-fit,minmax(240px,1fr));gap:14px;}

.stats{display:grid;grid-template-columns:repeat(auto-fit,minmax(170px,1fr));gap:14px;margin-bottom:18px;}
.stat{background:#fff;border:1px solid var(--ligne);border-radius:14px;padding:15px 18px;}
.stat .v{font-size:27px;font-weight:800;color:var(--ofblue);line-height:1.1;}
.stat .l{font-size:12px;color:var(--gris);font-weight:600;margin-top:3px;}
.stat.vert .v{color:var(--vert);} .stat.rouge .v{color:var(--rouge);} .stat.orange .v{color:var(--orange);}

/* ------------------------------------------------------------ Tableau -- */
table.tbl{width:100%;border-collapse:collapse;font-size:13px;background:#fff;}
table.tbl th{background:#eef3f9;color:var(--ofblue);text-align:left;padding:10px 12px;font-size:12px;
  text-transform:uppercase;letter-spacing:.3px;border-bottom:2px solid #d4e0ee;white-space:nowrap;}
table.tbl td{padding:10px 12px;border-bottom:1px solid #eef1f5;vertical-align:middle;}
table.tbl tr:hover td{background:#f7f9fc;}
table.tbl td.act{text-align:right;white-space:nowrap;}
.tbl-wrap{overflow-x:auto;border:1px solid var(--ligne);border-radius:12px;}
.vide{padding:34px;text-align:center;color:var(--gris);background:#fff;}

.pastille{display:inline-block;padding:3px 9px;border-radius:20px;font-size:11px;font-weight:700;}
.pastille.actif{background:#eaf7ef;color:#14532d;}
.pastille.inactif{background:#f1f4f8;color:#6a7787;}
.pastille.admin{background:#e8eefb;color:#1c3d5c;}
.pastille.formateur{background:#eef3f9;color:#43505f;}
.pastille.attente{background:#fdf3e6;color:#7a3b00;}

.mono{font-family:"Consolas","Courier New",monospace;font-size:13px;letter-spacing:.4px;}
.mdp-box{background:#f7f9fc;border:2px dashed #c4d2e3;border-radius:12px;padding:16px;text-align:center;margin:12px 0;}
.mdp-box .val{font-family:"Consolas","Courier New",monospace;font-size:23px;font-weight:700;color:var(--ofblue);letter-spacing:1.2px;}
.mdp-box .lab{font-size:11.5px;color:var(--gris);margin-bottom:6px;text-transform:uppercase;letter-spacing:.4px;}

.barre-outils{display:flex;gap:10px;flex-wrap:wrap;align-items:center;margin-bottom:14px;}
.barre-outils .champ{width:auto;min-width:210px;flex:0 1 300px;}
select.champ{cursor:pointer;}

footer.app{text-align:center;font-size:11.5px;color:var(--gris);padding:22px;}

@media(max-width:760px){
  header.app{padding:10px 14px;} header.app nav{margin-left:0;padding-left:0;border-left:0;width:100%;}
  header.app .compte{margin-left:auto;} main{padding:14px;}
  .titre-page .actions{margin-left:0;width:100%;}
}