/* style.css — thème clair/sombre automatique, pensé pour le téléphone */
:root{--bg:#f5f7fb;--cd:#fff;--tx:#1d2733;--mu:#5d6b7c;--ac:#3f78c8;--lt:#e3ebf7;--bd:#d3dbe7;--S:#2e9d57;--A:#7aa93a;--M:#e08a1e;--I:#d1493f}
@media(prefers-color-scheme:dark){:root{--bg:#141a22;--cd:#1d2631;--tx:#e8edf3;--mu:#9aa8b9;--ac:#6ea2ee;--lt:#263447;--bd:#34425a}}
*{box-sizing:border-box}
body{margin:0;background:var(--bg);color:var(--tx);font:15px/1.45 Arial,sans-serif}
main{max-width:800px;margin:0 auto;padding:12px 14px 40px}

/* Menu */
nav{background:var(--cd);border-bottom:1px solid var(--bd);padding:8px 14px;display:flex;gap:14px;flex-wrap:wrap;align-items:center}
nav a{color:var(--ac);text-decoration:none;font-weight:bold}nav .sp{flex:1}

/* Titres, textes */
h1{font-size:21px;color:var(--ac)}
h2{font-size:13px;color:var(--ac);text-transform:uppercase;letter-spacing:.05em;border-bottom:2px solid var(--ac);padding-bottom:3px;margin:20px 0 8px}
.mu{color:var(--mu);font-size:13px}.th{color:var(--ac)}.er{color:var(--I);font-weight:bold}

/* Cartes, formulaires, boutons */
.card{display:block;background:var(--cd);border:1px solid var(--bd);border-radius:10px;padding:12px;margin-bottom:10px;color:inherit;text-decoration:none}
a.it:hover{border-color:var(--ac)}
label{display:block;font-size:12px;font-weight:bold;color:var(--mu);margin:8px 0 3px}
input,select,textarea{width:100%;font:inherit;color:var(--tx);background:var(--bg);border:1px solid var(--bd);border-radius:8px;padding:9px}
textarea{background:var(--lt);min-height:50px}
button,.btn{font:inherit;cursor:pointer;border:1px solid var(--bd);background:var(--cd);color:var(--tx);border-radius:8px;padding:9px 16px;text-decoration:none;display:inline-block}
.pri{background:var(--ac);border-color:var(--ac);color:#fff;font-weight:bold}.dng{color:var(--I)}
fieldset{border:0;padding:0;margin:0}
.row{display:flex;gap:8px;flex-wrap:wrap;align-items:center}.row input{flex:1;min-width:150px;width:auto}

/* Boutons de notation S/A/M/I (radios cachés + labels) */
.g{display:flex;gap:6px;margin:8px 0;position:relative}
.g input{position:absolute;opacity:0;width:1px;height:1px}
.g label{flex:1;text-align:center;border:1px solid var(--bd);border-radius:8px;padding:11px 0;font-weight:bold;cursor:pointer;margin:0;font-size:15px;color:var(--tx)}
.g label.x{flex:.5;color:var(--mu)}
.g input:checked+label{color:#fff;border-color:transparent}
.g .S:checked+label{background:var(--S)}.g .A:checked+label{background:var(--A)}.g .M:checked+label{background:var(--M)}.g .I:checked+label{background:var(--I)}.g .N:checked+label{background:var(--mu)}
.g input:focus-visible+label{outline:2px solid var(--ac)}

/* Pastilles et barre graphique */
.c{display:inline-block;min-width:24px;text-align:center;border-radius:5px;color:#fff;font-size:12px;padding:1px 6px}
.c.S{background:var(--S)}.c.A{background:var(--A)}.c.M{background:var(--M)}.c.I{background:var(--I)}.c.n{color:var(--mu)}
.bar{display:flex;height:12px;border-radius:6px;overflow:hidden;background:var(--lt);margin:8px 0}
.bar span{display:block}.bar .S{background:var(--S)}.bar .A{background:var(--A)}.bar .M{background:var(--M)}.bar .I{background:var(--I)}

/* Tableau de suivi */
.ov{overflow-x:auto}table{border-collapse:collapse;font-size:13px;width:100%}
td,th{border:1px solid var(--bd);padding:5px 6px;text-align:center;background:var(--cd)}
td:first-child{text-align:left;min-width:170px}th a{color:var(--ac)}td.s{font-size:11px;min-width:70px}

/* Concepteur de formulaire */
.sec{border-left:4px solid var(--ac)}.sec>.row{margin-bottom:8px}.pt{margin:6px 0}.pt-t{flex:2}.pt-d{flex:3}

/* Cases à cocher des listes d'accès */
.chk{display:flex;flex-direction:row;align-items:center;gap:10px;font-size:14px;font-weight:normal;color:var(--tx);margin:6px 0;cursor:pointer}
.chk input[type=checkbox]{flex:0 0 auto;width:20px;height:20px;margin:0;padding:0}
input[type=file]{padding:6px}

/* Élément « hidden » toujours masqué, même sur les cartes */
[hidden]{display:none!important}
.ok{border-color:var(--S)}
.row select{flex:1;width:auto;min-width:200px}

/* Synthèse des résultats : tableau points × élèves, 1re colonne figée, défilement horizontal */
table.syn{width:auto;min-width:100%;border-collapse:separate;border-spacing:0}
.syn th,.syn td{border:0;border-right:1px solid var(--bd);border-bottom:1px solid var(--bd);padding:5px 6px;text-align:center;background:var(--cd)}
.syn td:first-child{min-width:0}
.syn .fix{position:sticky;left:0;z-index:2;text-align:left;width:160px;min-width:160px;max-width:160px;font-size:12px;box-shadow:1px 0 0 var(--bd)}
.syn .gs{border-left:2px solid var(--ac)}
.syn th.el{color:var(--ac);font-size:13px}
.syn th.dt{font-size:11px;font-weight:normal;min-width:46px;padding:0}
.syn th.dt a{display:block;padding:5px 4px;color:var(--ac);text-decoration:none}
.syn th.sel a{background:var(--ac);color:#fff}
.syn .secrow th,.syn .secrow td{background:var(--lt);color:var(--ac);font-size:11px;text-transform:uppercase;letter-spacing:.04em}
.syn td.s{padding:4px}.syn td.s .bar{margin:0;height:8px;min-width:38px}
.syn .c{min-width:20px;padding:1px 4px}

/* Séance en lecture seule */
.g.ro span{flex:1;text-align:center;border:1px solid var(--bd);border-radius:8px;padding:9px 0;font-weight:bold;color:var(--mu)}
.g.ro .on{color:#fff;border-color:transparent}
.g.ro .S.on{background:var(--S)}.g.ro .A.on{background:var(--A)}.g.ro .M.on{background:var(--M)}.g.ro .I.on{background:var(--I)}
.cm{background:var(--lt);border-radius:8px;padding:9px;min-height:36px;overflow-wrap:anywhere}
