:root {
    --fond: #f4f6f9;
    --carte: #ffffff;
    --bordure: #dde3ea;
    --texte: #24303d;
    --texte-doux: #62707e;
    --accent: #3a6ea5;
    --accent-doux: #eaf1f9;
    --succes: #2f8f5b;
    --danger: #c0392b;
    --alerte: #d97706;
}

* { box-sizing: border-box; }

body {
    margin: 0;
    font-family: 'Nunito', system-ui, sans-serif;
    background: var(--fond);
    color: var(--texte);
}

.site-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 14px 24px;
    background: var(--carte);
    border-bottom: 1px solid var(--bordure);
}

.site-logo {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    text-align: center;
    font-family: 'Fredoka', sans-serif;
    font-size: 2.3em;
    font-weight: 600;
    letter-spacing: -0.01em;
    text-decoration: none;
    color: var(--texte);
    margin: 28px 0 6px;
}

.site-logo span { color: var(--accent); }

.site-logo-icone { font-size: 0.85em; line-height: 1; }

.site-sous-logo {
    text-align: center;
    color: var(--texte-doux);
    margin: -4px 0 20px;
}

.site-conteneur {
    max-width: 760px;
    margin: 0 auto;
    padding: 0 16px 60px;
}

.site-conteneur-large {
    max-width: 1100px;
    margin: 0 auto;
    padding: 0 16px 60px;
}

.site-carte {
    background: var(--carte);
    border: 1px solid var(--bordure);
    border-radius: 14px;
    padding: 24px;
    margin-bottom: 20px;
}

.site-sous-titre { color: var(--texte-doux); }

.site-btn {
    display: inline-block;
    border: none;
    border-radius: 10px;
    padding: 10px 18px;
    font-size: 1em;
    font-family: inherit;
    cursor: pointer;
    text-decoration: none;
    text-align: center;
}

.site-btn-primaire { background: var(--accent); color: #fff; }
.site-btn-primaire:hover { background: #2f5a86; }

.site-btn-secondaire { background: var(--accent-doux); color: var(--accent); }
.site-btn-secondaire:hover { background: #dbe8f5; }

.site-btn-texte { background: none; color: var(--texte-doux); padding: 6px 10px; }
.site-btn-texte:hover { color: var(--texte); }

.site-btn:disabled { opacity: 0.4; cursor: default; }
.site-btn:disabled:hover { color: var(--texte-doux); }

.site-champ {
    width: 100%;
    padding: 10px 12px;
    border: 1px solid var(--bordure);
    border-radius: 8px;
    font-family: inherit;
    font-size: 1em;
    margin-bottom: 12px;
}

textarea.site-champ { resize: vertical; min-height: 90px; }

.entree {
    border: 1px solid var(--bordure);
    border-radius: 10px;
    padding: 16px;
    margin-bottom: 14px;
    background: var(--carte);
}

.entree-prof {
    background: var(--accent-doux);
    border-color: var(--accent);
}

.entree-prive {
    background: #fdf6e0;
    border-color: #c9a227;
}

.entree-entete {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    margin-bottom: 8px;
}

.badge-prof {
    font-size: 0.75em;
    font-weight: 700;
    letter-spacing: 0.03em;
    color: var(--accent);
}

.badge-prive {
    font-size: 0.75em;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.03em;
    color: var(--danger);
    margin-left: 8px;
}

.entree-date { font-weight: 700; }

.entree-texte { white-space: pre-wrap; line-height: 1.5; }

.entree-pied {
    display: flex;
    justify-content: flex-end;
    margin-top: 4px;
}

.entree-reponse {
    margin-top: 12px;
    margin-left: 28px;
    padding: 12px 14px;
    background: var(--accent-doux);
    border-left: 3px solid var(--accent);
    border-radius: 0 8px 8px 0;
}

.entree-reponse-entete {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    margin-bottom: 6px;
}

.entree-reponse-etiquette {
    font-weight: 700;
    font-size: 0.8em;
    letter-spacing: 0.02em;
    color: var(--accent);
}

.entree-reponse-date-forte { font-weight: 700; }

.entree-reponse-texte { white-space: pre-wrap; line-height: 1.5; }

.entree-reponse-edition .site-champ:last-of-type { margin-bottom: 12px; }

.sigle-groupe { margin-top: 28px; }

.sigle-groupe:first-child { margin-top: 0; }

.sigle-entete {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    gap: 10px;
    padding-bottom: 10px;
    margin-bottom: 14px;
    border-bottom: 2px solid var(--accent);
}

.sigle-titre {
    font-family: 'Fredoka', sans-serif;
    font-size: 1.3em;
    font-weight: 600;
    color: var(--texte);
    margin: 0;
}

.sigle-dates {
    color: var(--texte-doux);
    font-size: 0.9em;
    margin: 4px 0 0;
}

/* Points d'étape (outil "Milestones" du hub, impax-ui/hub) : lecture seule
   ici, repliée par défaut sous le sigle en cours — voir student.html,
   construireEnteteSigle(). */
.milestones-liste {
    list-style: disc;
    margin: 8px 0 0;
    padding-left: 20px;
    color: var(--texte-doux);
    font-size: 0.9em;
}

.milestones-liste li { margin-bottom: 4px; }

.sigle-sans {
    color: var(--texte-doux);
    font-size: 0.85em;
    text-transform: uppercase;
    letter-spacing: 0.03em;
    padding-bottom: 8px;
    margin-bottom: 14px;
    border-bottom: 1px solid var(--bordure);
}

.sigle-archives {
    margin-top: 32px;
    padding-top: 16px;
    border-top: 2px solid var(--bordure);
}

.sigle-archives-titre {
    font-family: 'Fredoka', sans-serif;
    font-size: 0.9em;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.03em;
    color: var(--texte-doux);
    margin: 0 0 10px;
}

.sigle-archive-item { margin-bottom: 6px; }

.sigle-archive-bouton {
    display: block;
    width: 100%;
    text-align: left;
    background: none;
    border: none;
    padding: 8px 0;
    font-family: 'Fredoka', sans-serif;
    font-size: 1.05em;
    font-weight: 600;
    color: var(--texte);
    cursor: pointer;
}

.sigle-archive-bouton:hover { color: var(--accent); }

.sigle-archive-contenu { margin: 6px 0 16px; }

.alerte-proche { color: var(--alerte); font-weight: 700; }

.alerte-depassee { color: var(--danger); font-weight: 700; }

.eleve-alerte { font-size: 1.15em; }

.eleve-sigle-badge {
    font-size: 0.75em;
    font-weight: 700;
    color: var(--texte-doux);
    /* var(--carte), pas var(--fond) : cette dernière est la couleur de
       fond de la page elle-même (voir body), le badge y serait invisible
       sur .eleve-item, qui n'a pas son propre fond. */
    background: var(--carte);
    border: 1px solid var(--bordure);
    border-radius: 6px;
    padding: 2px 6px;
    white-space: nowrap;
}

.eleve-bloc-badge {
    font-size: 0.75em;
    font-weight: 700;
    color: var(--accent);
    background: var(--accent-doux);
    border-radius: 6px;
    padding: 2px 6px;
    white-space: nowrap;
}

/* Élève partagé pas encore ouvert par le collègue qui vient de le recevoir
   (voir js/partagesEleve.js) — même rouge que .alerte-depassee, pour que ce
   soit clairement un signal "à voir", pas juste une info. */
.eleve-nouveau-badge {
    font-size: 0.75em;
    font-weight: 700;
    color: var(--danger);
    border: 1px solid var(--danger);
    border-radius: 6px;
    padding: 2px 6px;
    white-space: nowrap;
}

/* Encadré plus discret que .site-carte (moins de rembourrage) — pour un
   petit groupe de contrôles (ex. panneau-filtres sur students.html)
   plutôt qu'une grande carte de contenu. */
.panneau-leger { padding: 14px 16px; border-radius: 10px; }

/* Grille à deux colonnes (étiquette | cases à cocher) pour panneau-filtres
   (students.html) — align-items:start pour que "Block:"/"TES:" restent
   collés en haut de leur ligne même quand les cases à cocher wrappent sur
   plusieurs lignes, plutôt que centrés verticalement contre tout le bloc. */
.panneau-filtres-grille {
    display: grid;
    grid-template-columns: auto 1fr;
    column-gap: 12px;
    row-gap: 10px;
    align-items: start;
}

.panneau-filtres-cases {
    display: flex;
    flex-wrap: wrap;
    gap: 6px 14px;
}

/* Léger encadré autour du résumé des filtres actifs (students.html,
   resume-filtres) — même traitement que .panneau-leger, en plus discret
   (pas de .site-carte ici, juste une bordure) puisque c'est un simple
   bout de texte à côté du bouton, pas un panneau. Complètement masqué
   (pas juste vide) tant qu'aucun filtre n'est actif : rafraichirResumeFiltres()
   vide son textContent, ce qui rend l'élément réellement :empty.
   min-width:0 : son conteneur parent est flex-wrap:nowrap avec le bouton
   "Filters" exprès (les deux doivent rester groupés sur la même ligne,
   jamais séparés sur un écran étroit) — sans ça, le min-width:auto par
   défaut d'un item flex empêcherait ce résumé de rétrécir/enrouler son
   propre texte, et pousserait tout le groupe à déborder au lieu de
   rester ensemble. */
#resume-filtres {
    padding: 4px 10px;
    border: 1px solid var(--bordure);
    border-radius: 8px;
    background: var(--carte);
    min-width: 0;
}

#resume-filtres:empty { display: none; }

/* Le groupe "Sort by / Filters" (students.html) ne doit jamais se casser
   mot par mot (voir flex-wrap:nowrap sur son conteneur) — c'est plutôt CE
   select qui rétrécit et tronque son texte (au lieu de forcer tout le
   groupe à déborder, ou l'étiquette "Sort by:" à s'enrouler) quand
   l'écran est trop étroit pour afficher "Last entry (oldest first)" en
   entier ; largeur naturelle (190px) préservée dès qu'il y a la place.
   Le menu déroulant OUVERT continue d'afficher le texte complet des
   options, peu importe la largeur du contrôle fermé. */
#select-tri {
    flex: 0 1 190px;
    min-width: 60px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.pagination {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    flex-wrap: wrap;
    margin: 18px 0;
}

.pagination-numeros {
    display: flex;
    gap: 4px;
    flex-wrap: wrap;
}

.pagination-numero {
    background: none;
    border: 1px solid var(--bordure);
    border-radius: 8px;
    min-width: 34px;
    padding: 6px 8px;
    cursor: pointer;
    color: var(--texte-doux);
    font-family: inherit;
    font-size: 0.95em;
}

.pagination-numero:hover { border-color: var(--accent); color: var(--accent); }

.pagination-numero-actif {
    background: var(--accent);
    border-color: var(--accent);
    color: #fff;
}

.pagination-numero-actif:hover { color: #fff; }

.eleve-item {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 10px;
    padding: 12px 16px;
    border: 1px solid var(--bordure);
    border-radius: 10px;
    margin-bottom: 10px;
}

.eleve-item:hover { border-color: var(--accent); }

.eleve-lien {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 10px;
    flex: 1;
    min-width: 0;
    text-decoration: none;
    color: var(--texte);
}

.eleve-actions {
    display: flex;
    gap: 6px;
    flex-shrink: 0;
}

.eleve-edition {
    display: flex;
    flex-direction: column;
    gap: 10px;
    flex: 1;
}

.eleve-edition-ligne {
    display: flex;
    gap: 8px;
    align-items: center;
    flex-wrap: wrap;
}

.eleve-edition input { margin-bottom: 0; }

.eleve-edition-bloc {
    display: flex;
    align-items: center;
    gap: 4px;
    font-size: 0.95em;
}

.bouton-icone {
    background: none;
    border: none;
    cursor: pointer;
    font-size: 1.05em;
    line-height: 1;
    padding: 7px 9px;
    border-radius: 8px;
    color: var(--texte-doux);
    transition: background 0.15s ease, color 0.15s ease, transform 0.1s ease;
}

.bouton-icone:hover {
    background: var(--accent-doux);
    color: var(--accent);
    transform: scale(1.1);
}

.bouton-icone.bouton-danger:hover {
    background: #fbeaea;
    color: var(--danger);
}

.messages-erreur {
    color: var(--danger);
    margin-bottom: 12px;
    min-height: 1.2em;
}

.lien-retour {
    display: inline-block;
    margin-bottom: 16px;
    color: var(--texte-doux);
    text-decoration: none;
}

.lien-retour:hover { color: var(--accent); }

.entree-lien-grille { margin-top: 10px; }

.entree-lien-grille .site-btn { padding-left: 0; }

/* Grille d'évaluation détaillée (grille.html) — mêmes classes/styles que
   impax-ui/hub, grilles/css/site.css (voir js/grille-rendu.js pour la note
   sur la duplication), plus une variante "lecture seule" pour l'élève
   (mêmes couleurs de sélection, mais pas de curseur/survol cliquable). */

.grille-entete-eleve {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    flex-wrap: wrap;
    gap: 8px;
    margin-bottom: 4px;
}

.grille-titre-sigle {
    font-family: 'Fredoka', sans-serif;
    font-size: 1.3em;
    font-weight: 600;
    margin: 0;
}

.grille-competence {
    margin-top: 28px;
}

.grille-competence:first-child { margin-top: 0; }

.grille-competence-titre {
    font-family: 'Fredoka', sans-serif;
    font-size: 1.05em;
    font-weight: 600;
    color: var(--accent);
    margin: 0 0 12px;
}

.grille-table {
    width: 100%;
    border-collapse: collapse;
    margin-bottom: 10px;
    table-layout: fixed;
}

.grille-table th {
    background: var(--accent-doux);
    color: var(--accent);
    font-size: 0.8em;
    text-transform: uppercase;
    letter-spacing: 0.02em;
    padding: 8px 6px;
    text-align: center;
    border: 1px solid var(--bordure);
}

.grille-critere-titre {
    background: var(--fond);
    font-weight: 700;
    font-size: 0.85em;
    padding: 8px 10px;
    border: 1px solid var(--bordure);
    text-align: left;
}

.grille-critere-total {
    display: block;
    font-weight: 400;
    font-size: 0.95em;
    color: var(--texte-doux);
    margin-top: 2px;
}

.grille-competence-total {
    font-weight: 400;
    color: var(--texte-doux);
}

.grille-habilete {
    padding: 8px 10px;
    border: 1px solid var(--bordure);
    font-weight: 700;
    font-size: 0.85em;
    vertical-align: top;
}

.grille-cellule {
    border: 1px solid var(--bordure);
    padding: 8px;
    font-size: 0.78em;
    line-height: 1.35;
    vertical-align: top;
    cursor: pointer;
    overflow-wrap: break-word;
}

.grille-cellule:hover { background: var(--accent-doux); }

.grille-cellule-lecture-seule { cursor: default; }

.grille-cellule-lecture-seule:hover { background: none; }

.grille-cellule-note {
    display: block;
    font-weight: 700;
    font-size: 1.1em;
    color: var(--texte-doux);
    margin-bottom: 4px;
}

/* Étiquette d'une ligne parmi plusieurs du même critère (ex. "Texte 1",
   "Débat seulement") quand la grille n'a pas de colonne habileté dédiée
   (voir estANG/colonneHabilete dans grille-rendu.js) — répétée dans
   chaque case de notation plutôt que dans une colonne à part, puisque
   deux ou trois mots ne justifient pas une colonne entière. */
.grille-cellule-habilete {
    display: block;
    font-weight: 700;
    margin-bottom: 4px;
}

.grille-cellule-selectionnee {
    background: var(--accent-doux);
    border: 2px solid var(--accent);
}

.grille-cellule-selectionnee .grille-cellule-note { color: var(--accent); }

/* Niveau non applicable à une ligne donnée (ex. SCG, où certaines lignes
   n'ont que 2, 3 ou 4 des 5 niveaux habituels) — case grisée, non
   cliquable, reproduisant la case vide de la grille papier plutôt que de
   désaligner les colonnes suivantes. */
.grille-cellule-vide {
    background: var(--fond);
    border: 1px solid var(--bordure);
}

.grille-zero {
    border: 1px solid var(--bordure);
    text-align: center;
    vertical-align: middle;
    cursor: pointer;
    font-weight: 700;
    color: var(--texte-doux);
}

.grille-zero:hover { background: var(--accent-doux); }

.grille-zero-lecture-seule { cursor: default; }

.grille-zero-lecture-seule:hover { background: none; }

.grille-zero-selectionnee {
    background: var(--danger);
    color: #fff;
}

.grille-zero-habilete {
    display: block;
    font-size: 0.7em;
    margin-top: 2px;
}

/* Critère "tableauMotsErreurs" (orthographe/syntaxe des grilles
   d'écriture — voir js/grille-rendu.js) : barème à deux entrées (nombre
   de mots × nombre d'erreurs) au lieu des 5 colonnes habituelles de
   l'échelle, donc rendu comme un mini-tableau à part entière plutôt que
   des cellules alignées sur .grille-table. Peut compter jusqu'à une
   vingtaine de colonnes de points — overflow-x plutôt que de rétrécir le
   texte au point de le rendre illisible. */
.grille-mots-erreurs-cellule {
    border: 1px solid var(--bordure);
    padding: 6px;
    overflow-x: auto;
}

.grille-tableau-mots-erreurs {
    border-collapse: collapse;
    font-size: 0.72em;
    white-space: nowrap;
    width: 100%;
}

.grille-tableau-mots-erreurs th,
.grille-tableau-mots-erreurs td {
    border: 1px solid var(--bordure);
    padding: 4px 6px;
    text-align: center;
}

.grille-tableau-mots-erreurs th { background: var(--accent-doux); color: var(--accent); }

.grille-mots-erreurs-label {
    font-weight: 700;
    background: var(--fond);
    text-align: left;
}

/* Rangée "Points" — seule rangée cliquable du mini-tableau (voir
   grille-rendu.js). Pas de fond bleu au repos : comme .grille-cellule
   ailleurs dans la grille, le bleu (accent) est réservé aux en-têtes de
   colonne (th) — une cellule cliquable non sélectionnée reste neutre,
   seuls le survol et la sélection (ci-dessous) se distinguent visuellement. */
.grille-mots-erreurs-points { font-weight: 700; }

.grille-mots-erreurs-seuil { cursor: pointer; }

.grille-mots-erreurs-seuil:hover { background: var(--accent-doux); }

.grille-mots-erreurs-lecture-seule { cursor: default; }

.grille-mots-erreurs-lecture-seule:hover { background: none; }

.grille-mots-erreurs-selectionnee {
    background: var(--accent-doux);
    border: 2px solid var(--accent);
    color: var(--accent);
    font-weight: 700;
}

/* Tableau de référence nombre de mots × nombre d'erreurs, sous la rangée
   "Points" — non cliquable, juste pour repérer la bonne colonne. */
.grille-mots-erreurs-reference { color: var(--texte-doux); }

.grille-mots-erreurs-vide { color: var(--texte-doux); }

.grille-mots-erreurs-intro {
    font-size: 0.8em;
    color: var(--texte-doux);
    margin-bottom: 8px;
    line-height: 1.4;
}

.grille-total {
    display: flex;
    justify-content: flex-end;
    align-items: baseline;
    gap: 8px;
    font-family: 'Fredoka', sans-serif;
    font-size: 1.3em;
    font-weight: 600;
    margin: 20px 0;
}

.grille-total-max { color: var(--texte-doux); font-size: 0.75em; }

/* Mise en page mobile (cartes empilées verticalement) — construite en
   parallèle du tableau .grille-table-desktop (voir js/grille-rendu.js) et
   cachée par défaut ; activée sous 700px, où le tableau à 8 colonnes
   forcerait un défilement horizontal peu pratique sur un téléphone. Un
   simple reflow CSS du tableau desktop ne suffit pas ici (cellule de
   critère fusionnée sur plusieurs lignes, 6 choix par ligne) — chaque
   option de notation devient plutôt un bouton pleine largeur, empilé
   verticalement, avec le libellé de l'échelle en clair (pas besoin de
   l'abréger, il y a la place). */
.grille-cartes-mobile { display: none; }

.grille-carte-ligne {
    border: 1px solid var(--bordure);
    border-radius: 10px;
    padding: 12px;
    margin-bottom: 10px;
    background: var(--carte);
}

.grille-carte-entete {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    gap: 8px;
    font-weight: 700;
    font-size: 0.9em;
    margin-bottom: 4px;
}

.grille-carte-total { font-weight: 400; color: var(--texte-doux); white-space: nowrap; }

.grille-carte-habilete {
    color: var(--texte-doux);
    font-size: 0.85em;
    margin-bottom: 10px;
}

.grille-carte-options {
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.grille-carte-option {
    display: flex;
    align-items: center;
    gap: 10px;
    width: 100%;
    text-align: left;
    background: var(--carte);
    border: 1px solid var(--bordure);
    border-radius: 8px;
    padding: 8px 10px;
    font-family: inherit;
    font-size: 0.85em;
    line-height: 1.3;
    cursor: pointer;
    color: var(--texte);
}

.grille-carte-option-lecture-seule { cursor: default; }

.grille-carte-option-note {
    flex-shrink: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 28px;
    height: 28px;
    border-radius: 50%;
    background: var(--fond);
    font-weight: 700;
    color: var(--texte-doux);
}

.grille-carte-option-texte-conteneur { display: block; }

.grille-carte-option-niveau { display: block; font-weight: 700; font-size: 0.9em; }

/* Équivalent mobile de .grille-cellule-habilete (voir plus haut). */
.grille-carte-option-habilete { display: block; font-weight: 700; font-size: 0.85em; margin-top: 2px; }

.grille-carte-option-texte { display: block; color: var(--texte-doux); }

.grille-carte-option-selectionnee {
    background: var(--accent-doux);
    border: 2px solid var(--accent);
}

.grille-carte-option-selectionnee .grille-carte-option-note { background: var(--accent); color: #fff; }

.grille-carte-option-zero {
    justify-content: center;
    font-weight: 700;
    color: var(--texte-doux);
}

.grille-carte-option-zero.grille-carte-option-selectionnee {
    background: var(--danger);
    border-color: var(--danger);
    color: #fff;
}

.grille-carte-option-zero.grille-carte-option-selectionnee .grille-carte-option-note {
    background: #fff;
    color: var(--danger);
}

@media (max-width: 700px) {
    .grille-table-desktop { display: none; }
    .grille-cartes-mobile { display: block; }
}