/* Console Opticode — ERIA : feuille de style unique. */
:root{
  --fond:#0e1116; --fond2:#151a21; --carte:#1b2129; --bord:#2a323d;
  --texte:#e7edf3; --discret:#93a1b1; --accent:#3ea6ff; --ok:#2fbf71;
  --attention:#e2a03f; --erreur:#e05252; --prod:#a01010;
}
*{box-sizing:border-box}
body{margin:0;background:var(--fond);color:var(--texte);font:15px/1.5 -apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Helvetica,Arial,sans-serif}
a{color:var(--accent);text-decoration:none}
a:hover{text-decoration:underline}
h1{font-size:22px;margin:18px 0 10px}
h2{font-size:17px;margin:18px 0 8px}
h3{font-size:15px;margin:14px 0 6px}
main{padding:16px 18px 60px;max-width:1500px;margin:0 auto}
footer{padding:14px 18px;color:var(--discret);font-size:12px;border-top:1px solid var(--bord)}
.mono,pre,code{font-family:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;font-size:13px}
.discret{color:var(--discret)}
.erreur{color:var(--erreur)}

/* barre de navigation */
.barre{display:flex;align-items:center;gap:18px;flex-wrap:wrap;padding:10px 18px;background:var(--fond2);border-bottom:1px solid var(--bord);position:sticky;top:0;z-index:10}
.barre .marque{font-weight:600;display:flex;align-items:center;gap:8px}
.barre .point{width:10px;height:10px;border-radius:50%;background:var(--ok);display:inline-block}
.barre nav{display:flex;gap:14px;flex-wrap:wrap;font-size:14px}
.barre .moi{margin-left:auto;font-size:13px;color:var(--discret)}
/* confirmation obligatoire avant une ecriture en PRODUCTION */
.confirmation-prod{display:flex;gap:10px;align-items:flex-start;background:var(--prod);color:#fff;border-radius:10px;padding:10px 12px;margin:10px 0;font-size:13px;line-height:1.35;cursor:pointer}
.confirmation-prod input{margin-top:2px;width:18px;height:18px;flex:0 0 auto}
.confirmation-prod span{flex:1}
.bandeau-prod{background:var(--prod);color:#fff;padding:8px 18px;font-size:13px;font-weight:600;text-align:center}

/* cartes et grilles */
.carte{background:var(--carte);border:1px solid var(--bord);border-radius:12px;padding:16px;margin:14px 0}
.carte.etroite{max-width:460px;margin:60px auto}
.carte.large{max-width:none}
.grille{display:grid;grid-template-columns:repeat(auto-fit,minmax(280px,1fr));gap:14px}
.deux-colonnes{display:grid;grid-template-columns:1fr 1fr;gap:14px}
@media(max-width:900px){.deux-colonnes{grid-template-columns:1fr}}

/* formulaires */
label{display:block;margin:10px 0;font-size:14px}
input[type=text],input[type=email],input[type=password],input[type=search],select,textarea{
  width:100%;padding:9px 11px;margin-top:5px;background:#0f1319;border:1px solid var(--bord);
  border-radius:8px;color:var(--texte);font-size:14px;font-family:inherit}
textarea{resize:vertical}
label.case{display:flex;align-items:center;gap:8px}
label.case input{width:auto;margin:0}
button,.bouton{display:inline-block;padding:9px 14px;border:1px solid var(--bord);background:#222a33;color:var(--texte);
  border-radius:8px;font-size:14px;cursor:pointer;text-decoration:none}
button:hover,.bouton:hover{background:#2b3540;text-decoration:none}
button.principal,.principal{background:var(--accent);border-color:var(--accent);color:#04121f;font-weight:600}
button.danger{background:var(--erreur);border-color:var(--erreur);color:#fff}
.barre-outils{display:flex;gap:10px;align-items:center;flex-wrap:wrap;margin:12px 0;background:var(--fond2);
  border:1px solid var(--bord);border-radius:10px;padding:10px}
.barre-outils input,.barre-outils select{width:auto;min-width:180px;margin:0}
.ligne-formulaire{display:flex;gap:12px;align-items:flex-end;flex-wrap:wrap}
.ligne-formulaire label{flex:1;min-width:180px;margin:0}
form.mini{display:flex;gap:6px;align-items:center;margin:0}
form.mini input{width:auto;min-width:120px;margin:0;padding:5px 8px}
form.mini button{padding:5px 9px;font-size:13px}

/* tableaux */
table.liste{width:100%;border-collapse:collapse;background:var(--carte);border:1px solid var(--bord);border-radius:10px;overflow:hidden}
table.liste th,table.liste td{padding:9px 10px;border-bottom:1px solid var(--bord);text-align:left;vertical-align:top}
table.liste th{background:#202832;font-size:13px;color:var(--discret);font-weight:600;position:sticky;top:0}
table.liste tr:last-child td{border-bottom:none}
table.liste.dense th,table.liste.dense td{padding:6px 8px;font-size:13px}
table.liste tr.ok td:first-child{border-left:3px solid var(--ok)}
table.liste tr.attention td:first-child{border-left:3px solid var(--attention)}
table.liste tr.erreur td:first-child{border-left:3px solid var(--erreur)}
.defilement{overflow:auto;max-width:100%}
.liens a{margin-right:8px;font-size:13px}

/* pastilles */
.puce{display:inline-block;padding:2px 8px;border-radius:999px;font-size:12px;background:#2b3540;color:var(--texte)}
.puce.ok{background:rgba(47,191,113,.18);color:#7ee2ab}
.puce.attention{background:rgba(226,160,63,.18);color:#f0c07a}
.puce.erreur{background:rgba(224,82,82,.2);color:#f19a9a}
.puce.prod{background:rgba(160,16,16,.35);color:#ffb3b3}
.puce.test{background:rgba(62,166,255,.18);color:#9ed0ff}
.puce.modification,.puce.creation,.puce.connexion,.puce.suppression,.puce.sql,.puce.droit{background:#2b3540}

/* diagnostic */
.bilan{display:flex;gap:12px;flex-wrap:wrap;margin:14px 0}
.pastille{padding:12px 18px;border-radius:10px;font-weight:600;background:var(--carte);border:1px solid var(--bord)}
.pastille.ok{border-color:var(--ok);color:#7ee2ab}
.pastille.attention{border-color:var(--attention);color:#f0c07a}
.pastille.erreur{border-color:var(--erreur);color:#f19a9a}

/* messages */
.flash{padding:11px 14px;border-radius:10px;margin:12px 0;border:1px solid var(--bord);background:var(--fond2)}
.flash.erreur{border-color:var(--erreur);background:rgba(224,82,82,.12)}
.diff{margin:2px 0}
.diff s{color:var(--erreur)}
.diff i{color:#7ee2ab;font-style:normal}
.diff b{color:var(--texte)}
.secret{font-size:20px;letter-spacing:3px;background:#0f1319;border:1px dashed var(--bord);border-radius:8px;padding:12px;text-align:center;font-family:ui-monospace,Menlo,monospace}
.attention-carte{border-color:var(--attention)}
.etiquettes{display:flex;gap:8px;flex-wrap:wrap;margin:8px 0}
.etiquette-lien{display:inline-flex;gap:6px;align-items:center;padding:6px 10px;border:1px solid var(--bord);
  border-radius:999px;background:var(--carte);color:var(--texte);font-size:13px}
.etiquette-lien em{color:var(--discret);font-style:normal;font-size:12px}
.champs{display:grid;grid-template-columns:repeat(auto-fit,minmax(280px,1fr));gap:12px}
.champ.pleine-largeur{grid-column:1/-1}
.etiquette{display:flex;gap:8px;align-items:center;flex-wrap:wrap;font-size:13px;color:var(--discret)}
.etiquette em{color:#6f7d8c;font-style:normal;font-size:12px}
.etiquette b{color:var(--accent);font-weight:600;font-size:11px;text-transform:uppercase}
.champs small.vide{color:#6f7d8c;font-size:12px}
.actions{display:flex;gap:14px;align-items:center;margin-top:14px;flex-wrap:wrap}
.pagination a{display:inline-block;padding:5px 10px;margin-right:4px;border:1px solid var(--bord);border-radius:6px}
.pagination a.actif{background:var(--accent);color:#04121f}
pre{background:#0f1319;border:1px solid var(--bord);border-radius:8px;padding:10px;overflow:auto;white-space:pre-wrap}
details summary{cursor:pointer;color:var(--accent);font-size:13px}
body.public main{padding-top:0}

/* Panneau « Progression de l'apprenti » (fiche eleve). */
.carte.progression{border:1px solid var(--bord);padding:14px;margin:12px 0;background:var(--fond2)}
.carte.progression h3{margin:0 0 10px;font-size:15px}
.carte.progression h3 em{font-style:normal;color:var(--discret);font-size:12px}
.deux-champs{display:flex;gap:6px;align-items:center;flex-wrap:wrap}
.deux-champs input{width:72px}
.deux-champs em{color:var(--discret);font-style:normal;font-size:12px}
@media (max-width:520px){
  .champs{grid-template-columns:1fr}
  .carte.progression{padding:10px}
}

/* retrait d'un cours depuis la fiche eleve (formulaire discret) */
.mini.retirer{margin-top:-6px}
.mini.retirer button{background:transparent;border:1px solid var(--bord);color:#ff8a8a;font-size:12px;padding:4px 10px;border-radius:8px;cursor:pointer}
.mini.retirer button:hover{border-color:#ff8a8a}