/* ===================================================================
   La page de niveau
   -------------------------------------------------------------------
   Complète CSS/accueil.css, qui porte la forme commune des pages
   d'accueil. Ici : le sélecteur de classe, le planning, la liste des
   chapitres et les colonnes d'évaluations. Tout est écrit par
   JS/niveau.js.
   =================================================================== */

/* Plus large que l'accueil : cinq colonnes d'évaluations doivent tenir
   de front sur un écran d'ordinateur. */
main{ max-width:66rem; }

.vide{ color:var(--muted); font-style:italic; margin:0; }
.conseil{ color:var(--muted); font-size:0.92rem; margin:0 0 1rem; }

/* Les éléments bilingues que le script écrit en double : un `<a>`
   doit rester bloc quand il l'est, la règle générale le rendrait inline. */
html[data-lang="fr"] a.chapitre-titre[data-i18n="fr"],
html[data-lang="es"] a.chapitre-titre[data-i18n="es"]{ display:block; }
html[data-lang="fr"] a.btn-back[data-i18n="fr"],
html[data-lang="es"] a.btn-back[data-i18n="es"]{ display:inline-block; }

/* ---- Le sélecteur de classe --------------------------------------- */
.classes{
  display:flex;
  align-items:center;
  flex-wrap:wrap;
  gap:0.5rem;
  margin:0 0 1.5rem;
}
.classes-libelle{ color:var(--muted); margin-right:0.25rem; }
a.classe{
  padding:0.35rem 0.9rem;
  border:1px solid var(--navy);
  border-radius:999px;
  color:var(--navy);
  text-decoration:none;
  font-weight:600;
}
a.classe:hover{ background:#ece9e2; }
a.classe-courante{ background:var(--navy); color:#fff; }

/* ---- Le planning -------------------------------------------------- */
.semaines{
  display:grid;
  grid-template-columns:repeat(auto-fit,minmax(18rem,1fr));
  gap:1.5rem;
}
.semaine h3{ margin-top:0.25rem; }
ul.seances{ list-style:none; padding:0; margin:0; }
li.seance{
  display:flex;
  flex-direction:column;
  gap:0.1rem;
  padding:0.5rem 0.2rem;
  border-bottom:1px solid var(--bg);
}
.seance-date{ color:var(--muted); font-size:0.88rem; }
.seance-date::first-letter, .ev-date::first-letter{ text-transform:uppercase; }
.seance-code{
  font-weight:700;
  color:var(--navy);
  margin-right:0.25rem;
}
.seance-quoi a{ color:var(--navy); }
.seance-evaluation{ font-size:0.92rem; }
.seance-evaluation .ev-lien{ margin-left:0.3rem; }
details.fait{
  margin-top:1.25rem;
  border-top:1px solid var(--bg);
  padding-top:0.6rem;
}
details.fait summary{ cursor:pointer; color:var(--muted); font-size:0.92rem; }
details.fait ul.seances{ margin-top:0.6rem; }

/* ---- Les cours ---------------------------------------------------- */
ul.courses{
  list-style:none;
  padding:0;
  margin:0;
  display:grid;
  grid-template-columns:repeat(auto-fit,minmax(15rem,1fr));
  gap:0.75rem;
}
ul.courses li{
  background:var(--bg);
  border-radius:8px;
  font-size:0.95rem;
}
ul.courses li a.chapitre-titre{
  padding:0.7rem 1rem 0.3rem;
  color:var(--navy);
  text-decoration:none;
  font-weight:600;
}
ul.courses li a.chapitre-titre:hover{ text-decoration:underline; }
ul.courses li .liens, ul.courses li .seances-publiees{
  display:block;
  padding:0 1rem 0.6rem;
  font-size:0.82rem;
}
ul.courses li .liens a, ul.courses li .seances-publiees a{
  display:inline;
  padding:0;
  font-weight:400;
  color:var(--muted);
}
ul.courses li .document{ display:block; }
ul.courses li .document a.pdf{
  margin-left:0.4rem;
  padding:0 0.35rem;
  border:1px solid #c8c4bb;
  border-radius:4px;
  font-size:0.75rem;
  text-decoration:none;
}
ul.courses li .document a.pdf:hover{ background:#fff; }
.annee-etat{ margin:0 0 0.6rem; font-size:0.85rem; }
html[data-lang="fr"] .annee-etat span[data-i18n="fr"],
html[data-lang="es"] .annee-etat span[data-i18n="es"]{ display:inline-block; }
.annee-etat span{
  padding:0.15rem 0.7rem;
  border-radius:999px;
  background:var(--bg);
  color:var(--muted);
}
.annee-enCours span{ background:#e3efdc; color:#2f5a1a; }
.annee-construction span{ background:#f8ecd6; color:#7a4e0c; }
details.annee{
  margin-top:0.9rem;
  border-top:1px solid var(--bg);
  padding-top:0.5rem;
}
details.annee summary{ cursor:pointer; color:var(--muted); font-size:0.9rem; }
details.annee ul.courses{ margin-top:0.6rem; }

/* ---- Les évaluations, en colonnes --------------------------------- */
.ev-colonnes{
  display:grid;
  grid-template-columns:repeat(auto-fit,minmax(11rem,1fr));
  gap:1.25rem;
  margin-bottom:1rem;
}
.ev-col h3{ margin:0.25rem 0 0.5rem; }
.ev-moodle{ margin:0 0 0.5rem; font-size:0.88rem; }
.ev-moodle a{ color:var(--navy); }
ul.ev-liste{ list-style:none; padding:0; margin:0; }
.ev-ligne{
  display:flex;
  flex-direction:column;
  gap:0.1rem;
  padding:0.45rem 0.2rem;
  border-bottom:1px solid var(--bg);
}
.ev-titre{ font-weight:700; color:var(--navy); }
.ev-temps{ font-size:0.85rem; color:var(--muted); }
.ev-date{ color:var(--muted); font-size:0.88rem; }
.ev-liens{ margin-top:0.2rem; }
.ev-lien{
  display:inline-block;
  margin-right:0.5rem;
  padding:0.1rem 0.5rem;
  border:1px solid var(--navy);
  border-radius:4px;
  text-decoration:none;
  color:var(--navy);
  font-size:0.85rem;
}
.ev-lien:hover{ background:var(--bg); }
.ev-vide{ color:var(--muted); padding:0.45rem 0.2rem; }

/* Un calcul mental, déplié dans la page */
.ev-ligne-cm summary{ cursor:pointer; }
.ev-cm-corps{ margin:0.5rem 0 0.3rem 0.5rem; }
.ev-cm-table{ border-collapse:collapse; width:100%; }
.ev-cm-table td{ border-bottom:1px solid var(--bg); padding:0.3rem 0.4rem; vertical-align:top; }
.ev-cm-num{ width:1.6rem; color:var(--muted); }
.ev-cm-item{ font-size:0.75rem; color:var(--muted); margin-top:0.15rem; }
.ev-cm-rep{ text-align:right; font-weight:700; color:#1e6b33; white-space:nowrap; }

@media print{
  header, footer, .btn-back, .classes{ display:none; }
  .ev-lien{ border:none; }
}