:root {
    --couleur-fond: #f5f6f8;
    --couleur-texte: #1f2933;
    --couleur-primaire: #2b6cb0;
    --couleur-primaire-hover: #1a4e8a;
    --couleur-danger: #c53030;
    --couleur-succes: #2f855a;
    --couleur-bordure: #d2d6dc;
    --couleur-carte: #ffffff;
    --espacement: 1rem;
    --rayon: 0.375rem;
}

* {
    box-sizing: border-box;
}

html, body {
    height: 100%;
}

body {
    margin: 0;
    font-family: system-ui, -apple-system, "Segoe UI", sans-serif;
    background-color: var(--couleur-fond);
    color: var(--couleur-texte);
    line-height: 1.5;
    display: flex;
    flex-direction: column;
    min-height: 100vh;
}

/* Fait grandir le contenu pour repousser le pied de page (numéro de version) tout en bas de
   l'écran quand le contenu est court, sans jamais le superposer quand il est plus long. */
.structure-page {
    flex: 1 0 auto;
}

.conteneur {
    width: min(100% - 2rem, 90rem);
    margin-inline: auto;
    padding-block: var(--espacement);
}

.conteneur-etroit {
    width: min(100% - 2rem, 28rem);
    margin-inline: auto;
    padding-block: var(--espacement);
}

.page-authentification {
    min-height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
}

/* Page de connexion : même bandeau que le reste de l'application. */
.marque {
    margin-block-end: 1rem;
}

.marque-icone .icone {
    width: 2rem;
    height: 2rem;
}

.marque-icone {
    display: inline-flex;
}

.sous-titre-clair {
    margin: 0.5rem 0 0;
    opacity: 0.9;
}

.bouton-plein {
    justify-content: center;
    width: 100%;
}

.barre-nav {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 0.5rem;
    padding: 0.75rem 1rem;
    background-color: var(--couleur-carte);
    border-bottom: 1px solid var(--couleur-bordure);
}

.barre-nav .menu {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.4rem;
}

.menu-marque {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    font-weight: 700;
    font-size: 1.1rem;
    color: var(--couleur-primaire);
    text-decoration: none;
    margin-inline-end: 0.5rem;
}

.menu-bouton {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    padding: 0.4rem 0.8rem;
    border: 1px solid var(--couleur-bordure);
    border-radius: var(--rayon);
    background-color: var(--couleur-fond);
    color: var(--couleur-texte);
    font-size: 0.9rem;
    text-decoration: none;
}

.menu-bouton:hover {
    background-color: #e2e8f0;
}

.menu-bouton.actif {
    background-color: var(--couleur-primaire);
    border-color: var(--couleur-primaire);
    color: #fff;
}

.menu-utilisateur {
    font-size: 0.9rem;
    color: #52606d;
}

.carte {
    background-color: var(--couleur-carte);
    border: 1px solid var(--couleur-bordure);
    border-radius: var(--rayon);
    padding: var(--espacement);
    margin-block-end: var(--espacement);
}

h1 {
    font-size: 1.5rem;
}

h2 {
    font-size: 1.15rem;
}

.formulaire {
    display: flex;
    flex-direction: column;
    gap: 0.85rem;
    max-width: 30rem;
}

.formulaire label {
    display: block;
    font-weight: 600;
    margin-bottom: 0.25rem;
}

.formulaire input[type="text"],
.formulaire input[type="email"],
.formulaire input[type="password"],
.formulaire input[type="number"],
.formulaire input[type="date"],
.formulaire select,
.formulaire textarea {
    width: 100%;
    padding: 0.5rem 0.65rem;
    border: 1px solid var(--couleur-bordure);
    border-radius: var(--rayon);
    font-size: 1rem;
}

.formulaire .champ-erreur {
    color: var(--couleur-danger);
    font-size: 0.85rem;
    margin-top: 0.25rem;
}

.bouton {
    display: inline-block;
    padding: 0.55rem 1.1rem;
    border: none;
    border-radius: var(--rayon);
    background-color: var(--couleur-primaire);
    color: #fff;
    font-size: 1rem;
    cursor: pointer;
    text-decoration: none;
}

.bouton:hover {
    background-color: var(--couleur-primaire-hover);
}

.bouton-secondaire {
    background-color: transparent;
    color: var(--couleur-primaire);
    border: 1px solid var(--couleur-primaire);
}

.bouton-danger {
    background-color: var(--couleur-danger);
}

.tableau {
    width: 100%;
    border-collapse: collapse;
    overflow-x: auto;
    display: block;
}

.tableau table {
    width: 100%;
    border-collapse: collapse;
}

.tableau th,
.tableau td {
    text-align: left;
    padding: 0.6rem 0.75rem;
    border-bottom: 1px solid var(--couleur-bordure);
    white-space: nowrap;
}

.badge {
    display: inline-block;
    padding: 0.15rem 0.6rem;
    border-radius: 999px;
    font-size: 0.8rem;
}

.badge {
    background-color: #edf2f7;
    color: #4a5568;
}

.badge-actif {
    background-color: #e6fffa;
    color: var(--couleur-succes);
}

.badge-inactif {
    background-color: #fff5f5;
    color: var(--couleur-danger);
}

.alerte {
    padding: 0.75rem 1rem;
    border-radius: var(--rayon);
    margin-block-end: var(--espacement);
}

.alerte-erreur {
    background-color: #fff5f5;
    color: var(--couleur-danger);
    border: 1px solid #feb2b2;
}

.alerte-succes {
    background-color: #f0fff4;
    color: var(--couleur-succes);
    border: 1px solid #9ae6b4;
}

.apercu-logo {
    display: inline-block;
    padding: 0.75rem;
    border: 1px dashed var(--couleur-bordure);
    border-radius: var(--rayon);
    background-color: #fff;
}

.apercu-logo img {
    display: block;
    max-width: 14rem;
    max-height: 8rem;
    height: auto;
}

/* ---------- Icônes et boutons compacts ---------- */

.icone {
    width: 1.15em;
    height: 1.15em;
    flex: none;
}

.bouton-icone-texte {
    display: inline-flex;
    align-items: center;
    gap: 0.45rem;
}

.bouton-icone {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 2.25rem;
    height: 2.25rem;
    padding: 0;
    border: 1px solid var(--couleur-bordure);
    border-radius: var(--rayon);
    background-color: #fff;
    color: var(--couleur-primaire);
    cursor: pointer;
    text-decoration: none;
    font-size: 1rem;
}

.bouton-icone:hover {
    background-color: #ebf4ff;
    border-color: var(--couleur-primaire);
}

.bouton-icone.danger {
    color: var(--couleur-danger);
}

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

.bouton-icone.succes {
    color: var(--couleur-succes);
}

.bouton-icone.succes:hover {
    background-color: #f0fff4;
    border-color: var(--couleur-succes);
}

.bouton-icone.petit {
    width: 1.75rem;
    height: 1.75rem;
    font-size: 0.85rem;
    margin-top: 0.2rem;
}

.actions {
    white-space: nowrap;
}

.actions form {
    display: inline-block;
    margin: 0;
}

.barre-actions {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.5rem;
}

.barre-actions form {
    margin: 0;
}

/* ---------- En-tête d'une classe et navigation ---------- */

.entete-page {
    margin-block-end: 1rem;
    padding: 1rem 1.25rem;
    border-radius: 0.6rem;
    background: linear-gradient(120deg, #2b6cb0 0%, #2c7a7b 100%);
    color: #fff;
    box-shadow: 0 0.1rem 0.4rem rgb(0 0 0 / 15%);
}

.entete-page-titre {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.75rem 1rem;
}

.entete-page h1 {
    margin: 0;
    font-size: 1.6rem;
    color: #fff;
}

.pastille {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    padding: 0.15rem 0.75rem;
    border-radius: 999px;
    background-color: rgb(255 255 255 / 20%);
    font-size: 0.9rem;
}

.nav-page {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
    margin-block-start: 0.9rem;
}

.nav-page-bouton {
    display: inline-flex;
    align-items: center;
    gap: 0.45rem;
    padding: 0.5rem 1rem;
    border-radius: var(--rayon);
    background-color: rgb(255 255 255 / 15%);
    color: #fff;
    font-weight: 600;
    text-decoration: none;
}

.nav-page-bouton:hover {
    background-color: rgb(255 255 255 / 28%);
}

.nav-page-bouton.actif {
    background-color: #fff;
    color: var(--couleur-primaire);
}

/* ---------- Onglets (périodes, matières) ---------- */

.onglets {
    display: flex;
    flex-wrap: wrap;
    gap: 0.4rem;
    margin-block: 0.75rem;
}

.onglet {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    padding: 0.4rem 0.9rem;
    border: 1px solid var(--couleur-bordure);
    border-radius: 999px;
    background-color: #fff;
    color: var(--couleur-texte);
    text-decoration: none;
}

.onglet:hover {
    background-color: #edf2f7;
}

.onglet.actif {
    background-color: var(--couleur-primaire);
    border-color: var(--couleur-primaire);
    color: #fff;
    font-weight: 600;
}

.onglets-periodes .onglet {
    padding: 0.5rem 1.1rem;
    font-size: 1.05rem;
    font-weight: 600;
}

.etiquette-courante {
    padding: 0.05rem 0.5rem;
    border-radius: 999px;
    background-color: #f6ad55;
    color: #5f370e;
    font-size: 0.7rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.03em;
}

.onglet-matiere {
    --teinte: 210;
    border-color: hsl(var(--teinte) 45% 72%);
    background-color: hsl(var(--teinte) 80% 96%);
    color: hsl(var(--teinte) 60% 28%);
}

.onglet-matiere:hover {
    background-color: hsl(var(--teinte) 75% 90%);
}

.onglet-matiere.actif {
    background-color: hsl(var(--teinte) 60% 40%);
    border-color: hsl(var(--teinte) 60% 40%);
    color: #fff;
}

/* ---------- Panneau d'une matière et grille de notes ---------- */

.panneau-matiere {
    --teinte: 210;
    margin-block-end: var(--espacement);
    padding: 1rem 1.1rem;
    border: 1px solid var(--couleur-bordure);
    border-top: 0.3rem solid hsl(var(--teinte) 60% 45%);
    border-radius: 0.6rem;
    background-color: #fff;
    box-shadow: 0 0.1rem 0.3rem rgb(0 0 0 / 8%);
}

.panneau-entete {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 0.5rem 1rem;
    margin-block-end: 0.75rem;
}

.panneau-entete h2 {
    margin: 0;
}

.sous-titre {
    margin: 0.15rem 0 0;
    color: #52606d;
    font-size: 0.9rem;
}

.astuce {
    margin-block: 0.5rem;
    color: #52606d;
    font-size: 0.85rem;
}

.vide-message {
    padding: 0.75rem 1rem;
    border-radius: var(--rayon);
    background-color: #fffaf0;
    color: #7b341e;
}

.grille {
    border: 1px solid var(--couleur-bordure);
    border-radius: var(--rayon);
}

.grille table {
    border-collapse: separate;
    border-spacing: 0;
}

.grille th,
.grille td {
    padding: 0.5rem 0.75rem;
    border-bottom: 1px solid #e2e8f0;
}

.grille thead th {
    background-color: hsl(var(--teinte, 210) 60% 93%);
    color: hsl(var(--teinte, 210) 50% 22%);
    vertical-align: bottom;
}

.grille tbody tr:nth-child(even) td {
    background-color: #f7fafc;
}

.grille tbody tr:hover td {
    background-color: #ebf8ff;
}

.grille tbody tr:last-child td {
    border-bottom: none;
}

.grille .col-eleve {
    position: sticky;
    left: 0;
    z-index: 1;
    min-width: 11rem;
    background-color: #fff;
    border-inline-end: 1px solid #e2e8f0;
}

.grille thead .col-eleve {
    background-color: hsl(var(--teinte, 210) 60% 93%);
}

.grille tbody tr:nth-child(even) .col-eleve {
    background-color: #f7fafc;
}

.tableau .num,
.grille .num {
    text-align: center;
}

.th-devoir {
    min-width: 6.5rem;
    white-space: normal !important;
}

.th-titre {
    display: block;
    font-weight: 700;
}

.th-date,
.th-max {
    display: block;
    font-size: 0.75rem;
    font-weight: 400;
    opacity: 0.8;
}

.th-max {
    font-weight: 600;
}

.th-total {
    background-color: hsl(var(--teinte, 210) 45% 86%) !important;
}

.total {
    font-weight: 700;
    background-color: #f1f5f9;
}

.annotation {
    display: inline-block;
    padding: 0.1rem 0.65rem;
    border-radius: 999px;
    font-size: 0.85rem;
    font-weight: 600;
}

.niveau-haut {
    background-color: #c6f6d5;
    color: #22543d;
}

.niveau-moyen {
    background-color: #feebc8;
    color: #7b341e;
}

.niveau-bas {
    background-color: #fed7d7;
    color: #742a2a;
}

.abs {
    color: #b7791f;
    font-style: italic;
}

.vide {
    color: #a0aec0;
}

.ligne-inactive {
    opacity: 0.55;
}

.champ-nombre {
    width: 5rem;
    padding: 0.35rem 0.4rem;
    border: 1px solid var(--couleur-bordure);
    border-radius: var(--rayon);
    font-size: 1rem;
    text-align: center;
}

.champ-nombre:focus {
    outline: 0.15rem solid #90cdf4;
    border-color: var(--couleur-primaire);
}

.cellule-saisie .case-absent {
    display: block;
    margin-block-start: 0.15rem;
    color: #718096;
    font-size: 0.7rem;
    font-weight: 400;
}

.zone-commentaire {
    width: 100%;
    min-width: 16rem;
    min-height: 5rem;
    field-sizing: content; /* grandit avec le texte là où le navigateur le sait ; sinon rows=4 */
    padding: 0.45rem 0.6rem;
    border: 1px solid var(--couleur-bordure);
    border-radius: var(--rayon);
    font: inherit;
}

/* ---------- Nouveau devoir (formulaire repliable) ---------- */

.nouveau-devoir {
    margin-block-end: 0.75rem;
}

.nouveau-devoir summary {
    list-style: none;
    cursor: pointer;
}

.nouveau-devoir summary::-webkit-details-marker {
    display: none;
}

.formulaire-ligne {
    flex-direction: row;
    flex-wrap: wrap;
    align-items: flex-end;
    max-width: none;
    margin-block-start: 0.75rem;
    padding: 0.75rem;
    border-radius: var(--rayon);
    background-color: #f7fafc;
}

.formulaire-ligne > div {
    flex: 1 1 10rem;
}

/* ---------- Bulletins par période ---------- */

.cartes-periodes {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(16rem, 1fr));
    gap: 1rem;
}

.carte-periode h2 {
    margin-block-start: 0;
    color: var(--couleur-primaire);
}

.actions-periode {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
}

.badge-brouillon {
    background-color: #fefcbf;
    color: #744210;
}

/* Saisie au clavier : les flèches des champs numériques n'apportent rien et encombrent la grille. */
.champ-nombre {
    appearance: textfield;
    -moz-appearance: textfield;
}

.champ-nombre::-webkit-outer-spin-button,
.champ-nombre::-webkit-inner-spin-button {
    appearance: none;
    margin: 0;
}

/* ---------- Accueil, cases à cocher, admin ---------- */

.grille-cartes {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(15rem, 1fr));
    gap: 1rem;
    margin-block-end: 1.5rem;
}

.carte-classe {
    border-top: 0.3rem solid var(--couleur-primaire);
    margin-block-end: 0;
}

.carte-classe h3 {
    margin: 0;
    font-size: 1.25rem;
    color: var(--couleur-primaire);
}

.carte-classe .bouton {
    margin-block-start: 0.75rem;
}

.case-grande {
    width: 1.2rem;
    height: 1.2rem;
    accent-color: var(--couleur-primaire);
}

/* ---------- Attirer l'attention : résultats faibles (< moitié) et parfaits ---------- */

.note-faible {
    background-color: #fff5f5 !important;
    color: #c53030;
    font-weight: 700;
}

.note-parfaite {
    background-color: #fffbeb !important;
    color: #975a16;
    font-weight: 700;
}

.note-parfaite:not(input)::after {
    content: " ★";
    color: #d69e2e;
}

input.note-faible {
    border-color: #fc8181;
}

input.note-parfaite {
    border-color: #ecc94b;
}

.sous-ligne {
    padding-inline-start: 2rem !important;
}

/* Aperçu des résultats : nombre puis annotation, sur deux lignes, sans débordement. */
.th-groupe {
    min-width: 6.5rem;
    white-space: normal !important;
}

.grille td .valeur {
    display: block;
}

.grille td .annotation {
    margin-block-start: 0.15rem;
    font-size: 0.75rem;
    font-weight: 600;
    white-space: normal;
}

/* ---------- Paramètres du bulletin : logo (aperçu + remplacement + suppression regroupés) ---------- */

.formulaire-large {
    max-width: none;
}

.carte h3 {
    margin-block: 0 0.75rem;
    font-size: 1.05rem;
}

.bloc-logo {
    display: grid;
    grid-template-columns: minmax(12rem, 1fr) 2fr;
    gap: 1.5rem;
    align-items: start;
}

.bloc-logo h4 {
    margin: 0 0 0.5rem;
    font-size: 0.9rem;
    color: #52606d;
    text-transform: uppercase;
    letter-spacing: 0.03em;
}

.bloc-logo .apercu-logo {
    margin: 0 0 0.5rem;
}

.case-inline {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    margin-block-start: 0.5rem;
}

.case-inline label {
    margin: 0;
    font-weight: 400;
    font-size: 0.9rem;
}

@media (max-width: 40rem) {
    .bloc-logo {
        grid-template-columns: 1fr;
    }
}

/* Total / % / Annotation restent visibles à droite quand la grille défile (beaucoup de devoirs). */
.grille .col-total,
.grille .col-pct,
.grille .col-annot {
    position: sticky;
    z-index: 1;
    box-sizing: border-box;
    background-color: #f1f5f9;
}

.grille .col-annot {
    right: 0;
    width: 11.5rem;
    min-width: 11.5rem;
    max-width: 11.5rem;
    white-space: normal;
}

.grille .col-pct {
    right: 11.5rem;
    width: 5.5rem;
    min-width: 5.5rem;
    max-width: 5.5rem;
}

.grille .col-total {
    right: 17rem;
    width: 7.5rem;
    min-width: 7.5rem;
    max-width: 7.5rem;
    border-inline-start: 2px solid var(--couleur-bordure);
}

.grille thead .col-total,
.grille thead .col-pct,
.grille thead .col-annot {
    background-color: hsl(var(--teinte, 210) 45% 86%) !important;
}

.grille tbody td {
    height: 2.75rem;
}

/* Aperçu des résultats : la moyenne générale reste visible à droite, les titres de colonnes passent à la ligne. */
.grille .col-moyenne {
    position: sticky;
    right: 0;
    z-index: 1;
    box-sizing: border-box;
    width: 9.5rem;
    min-width: 9.5rem;
    max-width: 9.5rem;
    white-space: normal;
    background-color: #f1f5f9;
    border-inline-start: 2px solid var(--couleur-bordure);
}

.grille thead .col-moyenne {
    background-color: hsl(210 45% 86%) !important;
}

.grille th {
    white-space: normal;
}

.grille .annotation {
    padding-inline: 0.5rem;
}

/* Petits écrans : les colonnes collées à droite mangeraient toute la largeur, on les laisse défiler. */
@media (max-width: 60rem) {
    .grille .col-total,
    .grille .col-pct,
    .grille .col-annot,
    .grille .col-moyenne,
    .grille .col-eleve {
        position: static;
    }
}

/*
 * Grande grille de notes : elle défile dans son propre cadre (verticalement ET horizontalement) au lieu de la page.
 * Ainsi la barre de défilement horizontale est toujours visible en bas du cadre, sans descendre tout en bas de la
 * page, et l'en-tête (devoirs, dates) reste visible en descendant dans la liste des élèves.
 */
.tableau.grille {
    max-height: 70vh;
    overflow: auto;
}

.grille thead th {
    position: sticky;
    top: 0;
    z-index: 3;
}

.grille thead .col-eleve,
.grille thead .col-total,
.grille thead .col-pct,
.grille thead .col-annot,
.grille thead .col-moyenne {
    z-index: 4;
}

@media (max-width: 60rem) {
    /* Sur petit écran, on garde seulement l'en-tête collé en haut. */
    .grille thead .col-eleve,
    .grille thead .col-total,
    .grille thead .col-pct,
    .grille thead .col-annot,
    .grille thead .col-moyenne {
        position: sticky;
    }
}

/* ---------- Bulletin à l'écran : mêmes gabarits que le PDF (bulletin/pdf/_corps_*.html.twig) ---------- */

.bulletin-ecran {
    max-width: 60rem;
    margin-inline: auto;
    margin-block-end: var(--espacement);
    padding: 1.25rem;
    border: 1px solid var(--couleur-bordure);
    border-radius: 0.6rem;
    background-color: #fff;
    box-shadow: 0 0.1rem 0.3rem rgb(0 0 0 / 8%);
    overflow-x: auto;
}

.bulletin-ecran table.resultats {
    width: 100%;
    border-collapse: separate;
    border-spacing: 0;
    margin-block-end: 1rem;
}

.bulletin-ecran table.resultats th {
    padding: 0.4rem 0.6rem;
    border-bottom: 2px solid #cbd5e0;
    background-color: #edf2f7;
    color: #2d3748;
    font-size: 0.8rem;
    letter-spacing: 0.03em;
    text-align: center;
    text-transform: uppercase;
}

.bulletin-ecran table.resultats td {
    padding: 0.35rem 0.6rem;
    border-bottom: 1px solid #e2e8f0;
}

.bulletin-ecran td.nom {
    text-align: left;
}

.bulletin-ecran td.num,
.bulletin-ecran th.num {
    text-align: center;
}

.bulletin-ecran tr.section td {
    padding: 0.45rem 0.6rem;
    color: #fff;
    font-weight: 700;
}

.bulletin-ecran tr.matiere td.nom {
    padding-inline-start: 1.25rem;
}

.bulletin-ecran tr.alt td {
    background-color: #f7fafc;
}

.bulletin-ecran tr.total td {
    font-weight: 700;
}

.bulletin-ecran tr.moyenne-generale td {
    padding-block: 0.75rem;
    border-block: 2px solid #2b6cb0;
    background-color: #ebf8ff;
    color: #1a4e8a;
    font-weight: 700;
    font-size: 1.05rem;
}

.bulletin-ecran tr.espace td {
    height: 1rem;
    padding: 0;
    border: none;
    background-color: #fff;
}

.bulletin-ecran tr.espace.grand td {
    height: 1.6rem;
}

.bulletin-ecran td.moyenne {
    font-weight: 700;
}

/* Les classes note-* du site colorent la cellule ; ici (comme sur le PDF) seul le texte est coloré, l'étoile est dans le HTML. */
.bulletin-ecran .note-faible,
.bulletin-ecran .note-parfaite {
    background: none !important;
}

.bulletin-ecran .note-parfaite::after {
    content: none;
}

.barre {
    width: 100%;
    height: 0.35rem;
    margin-block-start: 0.2rem;
    border-radius: 0.2rem;
    background-color: #e2e8f0;
}

.barre div {
    height: 100%;
    border-radius: 0.2rem;
    background-color: #38a169;
}

.barre div.faible {
    background-color: #e53e3e;
}

.barre div.moyen {
    background-color: #dd6b20;
}

.bulletin-ecran .commentaire h3 {
    margin: 0 0 0.4rem;
    font-size: 1rem;
    color: #1a4e8a;
}

.bulletin-ecran .commentaire .texte {
    min-height: 2rem;
    margin: 0 0 0.5rem;
    padding: 0.5rem 0.75rem;
    border-left: 0.3rem solid #2b6cb0;
    border-radius: 0.25rem;
    background-color: #f7fafc;
    line-height: 1.4;
}

.bulletin-ecran .commentaire .periode {
    color: #2b6cb0;
    font-weight: 700;
}

/* ---------- Journal des modifications ---------- */

.filtres-journal {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-end;
    gap: 0.75rem 1rem;
}

.filtres-journal label {
    display: block;
    margin-block-end: 0.2rem;
    font-size: 0.85rem;
    font-weight: 600;
}

.filtres-journal select {
    min-width: 12rem;
    padding: 0.45rem 0.6rem;
    border: 1px solid var(--couleur-bordure);
    border-radius: var(--rayon);
    font-size: 1rem;
}

.cellule-sujet {
    white-space: normal !important;
    min-width: 16rem;
}

.cellule-avant,
.cellule-apres {
    white-space: normal !important;
    max-width: 20rem;
}

.cellule-avant {
    color: #9b2c2c;
}

.cellule-apres {
    color: #22543d;
    font-weight: 600;
}

.badge-type-note { background-color: #ebf8ff; color: #2c5282; }
.badge-type-devoir { background-color: #faf5ff; color: #553c9a; }
.badge-type-commentaire { background-color: #f0fff4; color: #276749; }
.badge-type-bulletin { background-color: #fffaf0; color: #7b341e; }

.pagination {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 1rem;
    margin-block: 1rem;
}

/* ---------- Pied de page (numéro de version) ---------- */

.pied-de-page {
    flex-shrink: 0;
    padding: 0.75rem 1rem;
    color: #a0aec0;
    font-size: 0.75rem;
    text-align: center;
}

/* ---------- Guide d'utilisation (converti depuis docs/guide-utilisation.md) ---------- */

.contenu-guide {
    max-width: 55rem;
    margin-inline: auto;
    line-height: 1.6;
}

.contenu-guide h1 { margin-block-start: 0; }
.contenu-guide h2 { margin-block-start: 2.5rem; padding-block-start: 1rem; border-top: 1px solid var(--couleur-bordure); }
.contenu-guide h3 { margin-block-start: 1.75rem; }

.contenu-guide img {
    max-width: 100%;
    border: 1px solid var(--couleur-bordure);
    border-radius: var(--rayon);
    margin-block: 0.5rem 1.5rem;
}

.contenu-guide table {
    width: 100%;
    border-collapse: collapse;
    margin-block-end: 1.5rem;
}

.contenu-guide th,
.contenu-guide td {
    border: 1px solid var(--couleur-bordure);
    padding: 0.5rem 0.75rem;
    text-align: left;
    vertical-align: top;
}

.contenu-guide th {
    background-color: var(--couleur-fond);
}

.contenu-guide code {
    background-color: var(--couleur-fond);
    padding: 0.1rem 0.3rem;
    border-radius: 0.2rem;
    font-size: 0.9em;
}

.contenu-guide blockquote {
    border-left: 3px solid var(--couleur-primaire);
    margin-inline-start: 0;
    padding-inline-start: 1rem;
    color: #4a5568;
}