/* Le socle visuel. Sobre et fonctionnel : c est un outil de travail, pas une vitrine.
   Aucune police distante : la politique de contenu n autorise que `self`, et une police
   qui ne charge pas laisse un ecran sans texte. */

:root {
  --encre: #17202a;
  --encre-douce: #5a6673;
  --fond: #f6f7f9;
  --carte: #ffffff;
  --trait: #dfe3e8;
  --accent: #17506b;
  --accent-clair: #e8f0f4;
  --alerte: #8c2f2f;
  --alerte-fond: #fbeaea;
  --rayon: 6px;
}

@media (prefers-color-scheme: dark) {
  :root {
    --encre: #e7ebef;
    --encre-douce: #9aa6b2;
    --fond: #14181d;
    --carte: #1c2228;
    --trait: #2c343d;
    --accent: #7fb5d1;
    --accent-clair: #1f2d36;
    --alerte: #e79a9a;
    --alerte-fond: #3a2222;
  }
}

* { box-sizing: border-box; }

body {
  margin: 0;
  background: var(--fond);
  color: var(--encre);
  font: 15px/1.5 system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
}

a { color: var(--accent); }

.bandeau {
  display: flex;
  align-items: center;
  gap: 16px;
  padding: 12px 24px;
  background: var(--carte);
  border-bottom: 1px solid var(--trait);
}
.bandeau .marque { font-weight: 600; letter-spacing: .02em; }
.bandeau .qui { margin-left: auto; color: var(--encre-douce); font-size: 14px; }
.bandeau form { display: inline; }

main { max-width: 1100px; margin: 0 auto; padding: 24px; }
main.etroit { max-width: 420px; }
main.moyen { max-width: 560px; }

h1 { font-size: 22px; margin: 0 0 4px; }
.sous-titre { color: var(--encre-douce); margin: 0 0 24px; }

.carte {
  background: var(--carte);
  border: 1px solid var(--trait);
  border-radius: var(--rayon);
  padding: 20px;
}

label { display: block; font-size: 13px; color: var(--encre-douce); margin: 14px 0 4px; }
input[type=email], input[type=password], input[type=text] {
  width: 100%;
  padding: 9px 10px;
  font: inherit;
  color: var(--encre);
  background: var(--fond);
  border: 1px solid var(--trait);
  border-radius: var(--rayon);
}
input:focus-visible, button:focus-visible, a:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
}

button {
  margin-top: 18px;
  padding: 9px 16px;
  font: inherit;
  font-weight: 500;
  color: #fff;
  background: var(--accent);
  border: 0;
  border-radius: var(--rayon);
  cursor: pointer;
}
button.discret {
  margin: 0;
  padding: 4px 10px;
  font-size: 13px;
  color: var(--encre-douce);
  background: none;
  border: 1px solid var(--trait);
}

.erreur {
  margin: 0 0 4px;
  padding: 10px 12px;
  color: var(--alerte);
  background: var(--alerte-fond);
  border-radius: var(--rayon);
  font-size: 14px;
}

.regles { margin: 12px 0 0; padding-left: 18px; color: var(--encre-douce); font-size: 13px; }

/* Le panneau : quinze tuiles, une tache par tuile. */
.tuiles {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(210px, 1fr));
  gap: 12px;
}
.tuile {
  display: block;
  padding: 16px;
  background: var(--carte);
  border: 1px solid var(--trait);
  border-radius: var(--rayon);
  text-decoration: none;
  color: inherit;
}
a.tuile:hover { border-color: var(--accent); }
.tuile .compte {
  font-size: 30px;
  font-weight: 600;
  line-height: 1.1;
  font-variant-numeric: tabular-nums;
}
.tuile .titre { margin-top: 2px; font-weight: 500; }
.tuile .detail { margin-top: 2px; color: var(--encre-douce); font-size: 13px; }
/* L ECRAN N EXISTE PAS ENCORE, ET CA DOIT SE VOIR. Le pointillé au ton du trait ordinaire
   etait indistinguable d une tuile branchee : la tuile annoncait alors une destination qui
   n existe pas. On monte donc le contraste du trait, sans toucher au compteur, qui est
   parfaitement juste et reste la vraie information. */
.tuile.a-venir {
  border-style: dashed;
  border-color: var(--encre-douce);
  background: transparent;
}

/* ── Les ecrans de liste ─────────────────────────────────────────────────────────── */

.fil { margin: 0 0 8px; font-size: 13px; color: var(--encre-douce); }
.fil a { text-decoration: none; }

h2 { font-size: 15px; margin: 24px 0 8px; }
.carte h2:first-child { margin-top: 0; }

/* Le sommaire : les nombres qu on lit en arrivant. Le premier porte la reponse, les autres
   la mettent en perspective, d ou la difference de taille. */
.sommaire {
  display: flex;
  flex-wrap: wrap;
  gap: 28px;
  padding: 16px 20px;
  margin-bottom: 16px;
  background: var(--carte);
  border: 1px solid var(--trait);
  border-radius: var(--rayon);
}
.sommaire .compte {
  display: block;
  font-size: 22px;
  font-weight: 600;
  font-variant-numeric: tabular-nums;
}
.sommaire div:first-child .compte { font-size: 30px; }
.sommaire .quoi { font-size: 13px; color: var(--encre-douce); }

.filtres { display: flex; gap: 8px; margin-bottom: 12px; }
.filtres input[type=search] {
  flex: 1;
  max-width: 380px;
  padding: 8px 10px;
  font: inherit;
  color: var(--encre);
  background: var(--carte);
  border: 1px solid var(--trait);
  border-radius: var(--rayon);
}
.filtres select {
  padding: 8px 10px;
  font: inherit;
  color: var(--encre);
  background: var(--carte);
  border: 1px solid var(--trait);
  border-radius: var(--rayon);
}

/* Un tableau large defile DANS son conteneur, jamais en poussant la page de cote. */
#tableau, .grille-cadre { overflow-x: auto; }

.grille {
  width: 100%;
  border-collapse: collapse;
  background: var(--carte);
  border: 1px solid var(--trait);
  border-radius: var(--rayon);
  font-size: 14px;
}
.grille th, .grille td {
  padding: 8px 12px;
  text-align: left;
  border-bottom: 1px solid var(--trait);
  white-space: nowrap;
}
.grille th {
  font-size: 12px;
  font-weight: 600;
  color: var(--encre-douce);
  text-transform: uppercase;
  letter-spacing: .04em;
}
.grille tr:last-child td { border-bottom: 0; }
.grille tbody tr:hover { background: var(--accent-clair); }
/* Les chiffres s alignent sur la virgule : c est ce qui rend une colonne de montants
   lisible d un coup d oeil au lieu de devoir la lire ligne a ligne. */
.nombre { text-align: right; font-variant-numeric: tabular-nums; }
/* LA REGLE CI-DESSUS PERDAIT DANS LES TABLEAUX, et c est passe inapercu jusqu a la premiere
   capture regardee (ecran Enseignants, 2026-09-11) : `.grille th, .grille td` pose
   `text-align: left` avec une specificite plus forte qu une classe seule. Tous les montants et
   comptes du socle etaient donc alignes a gauche, facturation comprise. */
.grille .nombre { text-align: right; }
.nombre.du { font-weight: 600; }
.nombre.trop { font-weight: 600; color: var(--alerte); }
.retard { margin-left: 6px; font-size: 12px; color: var(--alerte); }
.vide { padding: 24px; color: var(--encre-douce); text-align: center; }
.note { margin: 8px 0 0; font-size: 13px; color: var(--encre-douce); }
.mono { font-family: ui-monospace, SFMono-Regular, Consolas, monospace; font-size: 13px; }

/* L etat se lit a la forme autant qu au mot : une pastille se repere en balayant une
   colonne, un mot doit se lire. */
.etat {
  display: inline-block;
  padding: 2px 8px;
  font-size: 12px;
  font-weight: 500;
  border-radius: 999px;
  background: var(--accent-clair);
  color: var(--accent);
}
.etat-unpaid, .etat-partial { background: var(--alerte-fond); color: var(--alerte); }
.etat-paid { background: #e4f0e6; color: #2b6b38; }
.etat-cancelled { background: var(--fond); color: var(--encre-douce); }
@media (prefers-color-scheme: dark) {
  .etat-paid { background: #1e2f22; color: #86c894; }
}

.deux-colonnes { display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: 12px; }
.deux-colonnes dl { display: grid; grid-template-columns: auto 1fr; gap: 6px 16px; margin: 0; }
.deux-colonnes dt { font-size: 13px; color: var(--encre-douce); }
.deux-colonnes dd { margin: 0; }

.liens { margin: 0; padding-left: 18px; }
.liens li { margin: 4px 0; }

/* Les etats de scolarite. Le vocabulaire vient du modele, les couleurs disent la meme chose
   que le mot pour qui balaie une colonne sans la lire. */
.etat-active { background: var(--accent-clair); color: var(--accent); }
.etat-graduated { background: #e4f0e6; color: #2b6b38; }
.etat-left { background: var(--fond); color: var(--encre-douce); }
@media (prefers-color-scheme: dark) {
  .etat-graduated { background: #1e2f22; color: #86c894; }
}

/* L indicateur d attente d htmx, ecrit ici plutot que par htmx lui-meme. Voir `base.html` :
   sa feuille en ligne est bloquee par la politique de contenu, et c est voulu. */
.htmx-indicator { opacity: 0; transition: opacity 200ms ease-in; }
.htmx-request .htmx-indicator,
.htmx-request.htmx-indicator { opacity: 1; }
/* Pendant qu une requete est en vol, le tableau s estompe legerement : c est le seul retour
   dont on a besoin, et il ne deplace rien a l ecran. */
#tableau.htmx-request { opacity: .55; transition: opacity 120ms ease-in; }
@media (prefers-reduced-motion: reduce) {
  .htmx-indicator, #tableau.htmx-request { transition: none; }
}

/* Le trop-percu, place dans le sommaire parce que c est la contrepartie d une decision : la
   base n empeche plus un surpaiement, donc il doit se voir en arrivant, pas au fond d une liste. */
.alerte-sommaire a { color: var(--alerte); text-decoration: none; }
.alerte-sommaire .compte { color: var(--alerte); }
.alerte-sommaire .quoi { color: var(--alerte); }

/* Le journal. Une alerte reglee reste lisible mais s efface : elle ne doit plus attirer l oeil,
   ni disparaitre, parce que « c etait quoi, ce refus du 12 ? » reste une question legitime. */
tr.reglee td { color: var(--encre-douce); }
/* Les cellules de TEXTE LIBRE reviennent a la ligne. `.grille td` interdit le retour a la ligne,
   et c est juste pour un montant ou une date ; applique a un detail, il poussait les colonnes
   suivantes hors de l ecran, dont l etat d une alerte. */
.grille td.texte { white-space: normal; overflow-wrap: anywhere; }
.detail-journal { min-width: 24ch; }
.pages { display: flex; gap: 16px; align-items: baseline; margin: 12px 0 0; font-size: 14px; }
.pages span { color: var(--encre-douce); }
.tuile .detail.alerte { color: var(--alerte); font-weight: 500; }
/* Les cases a cocher d un formulaire : pas de puce devant une case, elle en tient lieu. */
h3.jour { margin: 20px 0 6px; }
.cases { list-style: none; padding: 0; margin: 0 0 12px; display: grid; gap: 8px; }
/* L horaire en grille, la forme du document de l ecole : creneaux en lignes, annees en colonnes. */
.a-verifier { margin: 0 0 16px; }
.grille-horaire { table-layout: fixed; }
.grille-horaire td { vertical-align: top; }
.grille-horaire th:first-child { width: 72px; }
.grille-horaire td.heure { font-variant-numeric: tabular-nums; color: var(--encre-douce); width: 64px; }
.grille-horaire .seance + .seance { margin-top: 6px; padding-top: 6px; border-top: 1px dashed var(--trait); }
.grille-horaire .seance .mono { display: block; font-size: 12px; color: var(--encre-douce); }
.grille-horaire .masquee { opacity: .55; }
.grille-horaire th .theme { display: block; font-weight: 400; text-transform: none; letter-spacing: 0; color: var(--encre-douce); }
h3.jour .seminaire { font-weight: 400; color: var(--encre-douce); }
/* Le formulaire d une seance : un champ par ligne, et la question a confirmer bien visible. */
.formulaire { display: grid; gap: 10px; }
.formulaire label { margin: 0; }
.formulaire .cote-a-cote { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
/* Les champs que la regle generale ne couvre pas prennent le meme habit que les champs texte ;
   limite au formulaire, pour ne pas etirer les listes des filtres. */
.formulaire select, .formulaire input[type=date], .formulaire input[type=time] {
  width: 100%; padding: 9px 10px; font: inherit; color: var(--encre);
  background: var(--fond); border: 1px solid var(--trait); border-radius: var(--rayon);
}
/* UNE CASE A COCHER SUR LA MEME LIGNE QUE SON TEXTE. Au premier rendu, la case etait seule et
   centree, son texte en dessous : on ne savait plus ce qu on cochait. */
label.case { display: flex; gap: 8px; align-items: center; color: var(--encre); font-size: 14px; }
.question-a-confirmer { border-left: 3px solid var(--alerte); padding: 4px 0 4px 12px; }
.formulaire button + a { margin-left: 14px; }

/* Le choix de la langue : deux boutons discrets, la langue en cours soulignee. Absent pour un
   etudiant, dont la langue est celle de son site. */
.langues { display: inline-flex; gap: 0.1rem; margin: 0 0.4rem; }
.langues button { padding: 0.2rem 0.45rem; }
.langues button.actif { font-weight: 700; text-decoration: underline; text-underline-offset: 3px; }
.bandeau-langues { display: flex; justify-content: flex-end; padding: 0.6rem 1.2rem 0; }

/* L espace enseignant : la grille des cotes, une case par partie d examen. */
.grille-cotes input { width: 4.5em; text-align: right; font-variant-numeric: tabular-nums; }
.grille-cotes td .erreur { display: block; font-size: 0.75rem; margin: 0.2rem 0 0; padding: 0; }

/* ── Les ecrans d acces (connexion, code de verification) ───────────────────────────
   LE DESSIN DE L ANCIENNE PLATEFORME, repris a l identique (releve sur belso.adoptia.be le
   2026-09-11) : degrade vert de l ecole, carte blanche de 400 px, logo BELSO, libelles en
   petites capitales, bouton vert, « propulse par Discea » au pied. Les enseignants
   reconnaissent l ecran : c est la meme porte, et on ne leur apprend rien de neuf pour entrer.

   UN SEUL THEME, ET C EST VOULU. Le degrade et la carte blanche sont la marque de l ecole ; en
   theme sombre, les jetons de :root passeraient au clair et l on lirait du texte clair sur la
   carte blanche. Les jetons sont donc REDEFINIS sur le fond de l ecran d acces, qui gagne sur
   :root pour tout ce qu il contient, quel que soit le theme du systeme. */

body.acces { background: #2d4a1d; }

.acces-fond {
  --encre: #333333;
  --encre-douce: #5e5e5e;
  --fond: #ffffff;
  --carte: #ffffff;
  --trait: #dce8dc;
  --accent: #457835;
  --accent-fonce: #3a652c;
  --alerte: #a33131;
  --alerte-fond: #fbeaea;
  display: flex;
  flex-direction: column;
  align-items: center;
  max-width: none;
  min-height: 100vh;
  min-height: 100dvh;
  margin: 0;
  padding: 56px 20px 20px;
  background: linear-gradient(135deg, #2d4a1d 0%, #457835 60%, #92cc72 100%);
  color: var(--encre);
}

/* La carte se centre par ses marges automatiques, et non par un positionnement absolu : sur un
   petit ecran elle pousse le pied de page au lieu de passer dessous. */
.acces-carte {
  width: 100%;
  max-width: 400px;
  margin: auto 0;
  padding: 36px 32px;
  background: var(--carte);
  border-radius: 16px;
  box-shadow: 0 18px 50px rgba(0, 0, 0, .25);
}

.acces-logo { margin: 0 0 14px; line-height: 0; text-align: center; }
.acces-logo img { width: auto; height: 118px; }
.acces-sous-titre { margin: 0 0 24px; font-size: 12px; color: #6b6b6b; text-align: center; }

.acces-carte h2 { margin: 0 0 6px; font-size: 15px; text-align: center; }
.acces-carte .consigne { margin: 0 0 18px; font-size: 13px; color: var(--encre-douce); text-align: center; }

.acces-carte label {
  margin: 14px 0 5px;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: .5px;
  text-transform: uppercase;
  color: var(--encre-douce);
}
.acces-carte form > label:first-of-type { margin-top: 0; }
.acces-carte input[type=email],
.acces-carte input[type=password],
.acces-carte input[type=text] {
  padding: 9px 11px;
  font-size: 14px;
  background: #ffffff;
  border-radius: 6px;
}
.acces-carte input::placeholder { color: #9aa39a; }
.acces-carte input:focus-visible { outline: 2px solid var(--accent); outline-offset: 1px; border-color: var(--accent); }
.acces-carte input.code { font-size: 17px; letter-spacing: 3px; text-align: center; }

.acces-carte button[type=submit] {
  width: 100%;
  margin-top: 20px;
  padding: 11px;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: .5px;
  text-transform: uppercase;
  background: var(--accent);
  border-radius: 5px;
}
.acces-carte button[type=submit]:hover { background: var(--accent-fonce); }

.acces-carte .erreur { margin: 0 0 14px; font-size: 13px; }
.acces-carte .aide { margin: 12px 0 0; font-size: 12px; color: var(--encre-douce); text-align: center; }
.acces-carte a { color: var(--accent); }

.acces-propulse {
  display: flex;
  align-items: center;
  gap: 6px;
  margin: 28px 0 0;
  font-size: 11px;
  color: rgba(255, 255, 255, .82);
}
.acces-propulse img { width: auto; height: 15px; }

/* Le choix de la langue flotte sur le degrade, en haut a droite, en blanc : il reste la premiere
   chose qu un enseignant de Gent cherche, et il ne pousse pas la carte. */
body.acces .bandeau-langues { position: absolute; top: 0; right: 0; z-index: 1; }
body.acces .bandeau-langues button.discret {
  color: #ffffff;
  border-color: rgba(255, 255, 255, .45);
  background: rgba(0, 0, 0, .08);
}
body.acces .bandeau-langues button.discret:hover { border-color: #ffffff; }

/* Sous 16 px, un telephone agrandit la page quand on touche un champ, et elle ne revient pas. */
@media (max-width: 480px) {
  .acces-fond { padding-top: 52px; }
  .acces-carte { padding: 28px 22px; }
  .acces-carte input[type=email],
  .acces-carte input[type=password],
  .acces-carte input[type=text] { font-size: 16px; }
}