/* ==========================================================================
   EduManageSSA — Système visuel
   ========================================================================== */

:root {
  --edu-primary: #0d6e54;
  --edu-primary-dark: #073b2d;
  --edu-primary-light: #e6f2ee;
  --edu-accent: #d99a2b;
  --edu-accent-dark: #a8701c;
  --edu-info: #2a94bd;
  --edu-info-dark: #1c6b8c;
  --edu-danger: #c94444;
  --edu-danger-dark: #8c2b2b;
  --edu-success: #157347;
  --edu-bg: #f3f5f6;
  --edu-surface: #ffffff;
  --edu-border: #e7eae9;
  --edu-text: #1f2a27;
  --edu-text-muted: #6c7a76;
  --edu-radius-sm: 0.5rem;
  --edu-radius: 0.85rem;
  --edu-radius-lg: 1.1rem;
  --edu-shadow-sm: 0 1px 2px rgba(15, 40, 33, 0.06);
  --edu-shadow: 0 4px 16px rgba(15, 40, 33, 0.08);
  --edu-shadow-lg: 0 12px 32px rgba(15, 40, 33, 0.14);
}

* { -webkit-font-smoothing: antialiased; }

body {
  background-color: var(--edu-bg);
  font-family: 'Inter', 'Segoe UI', Roboto, Arial, sans-serif;
  color: var(--edu-text);
  font-size: 0.95rem;
}

h1, h2, h3, h4, h5, h6 { letter-spacing: -0.01em; color: var(--edu-text); }
h3 { font-weight: 700; }
a { color: var(--edu-primary); }
a:hover { color: var(--edu-primary-dark); }

::selection { background: var(--edu-primary-light); color: var(--edu-primary-dark); }

/* ---------- Navbar ---------- */
.app-navbar {
  background: linear-gradient(120deg, var(--edu-primary-dark) 0%, var(--edu-primary) 100%);
  box-shadow: 0 2px 14px rgba(7, 59, 45, 0.25);
  padding-top: 0.65rem;
  padding-bottom: 0.65rem;
}

.app-navbar .navbar-brand {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  font-weight: 700;
  letter-spacing: -0.01em;
}

.app-navbar .brand-badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 2.1rem;
  height: 2.1rem;
  background: rgba(255, 255, 255, 0.14);
  border-radius: 0.6rem;
  font-size: 1.05rem;
}

.navbar .nav-link {
  font-size: 0.88rem;
  font-weight: 500;
  color: rgba(255, 255, 255, 0.82) !important;
  border-radius: 999px;
  padding: 0.45rem 0.9rem !important;
  margin: 0 0.1rem;
  transition: background-color 0.15s ease, color 0.15s ease;
  white-space: nowrap;
}

.navbar .nav-link:hover { background: rgba(255, 255, 255, 0.1); color: #fff !important; }
.navbar .nav-link.active { background: rgba(255, 255, 255, 0.18); color: #fff !important; }
.navbar .nav-link i { margin-right: 0.3rem; }

.user-avatar {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 2rem;
  height: 2rem;
  border-radius: 50%;
  background: var(--edu-accent);
  color: #3a2a00;
  font-weight: 700;
  font-size: 0.8rem;
  margin-right: 0.45rem;
}

.dropdown-menu {
  border: none;
  border-radius: var(--edu-radius);
  box-shadow: var(--edu-shadow-lg);
  padding: 0.4rem;
}

.dropdown-item { border-radius: 0.5rem; padding: 0.5rem 0.75rem; font-size: 0.9rem; }
.dropdown-item:hover { background: var(--edu-primary-light); }
.dropdown-item.text-danger:hover { background: #fdecec; }

/* ---------- Layout ---------- */
.page-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-wrap: wrap;
  gap: 0.75rem;
  margin-bottom: 1.5rem;
}

.page-header h3 { display: flex; align-items: center; gap: 0.55rem; margin: 0; }
.page-header h3 i { color: var(--edu-primary); }
.page-subtitle { color: var(--edu-text-muted); font-size: 0.88rem; margin-top: 0.15rem; }

/* ---------- Cards ---------- */
.card {
  border: 1px solid var(--edu-border);
  border-radius: var(--edu-radius);
  box-shadow: var(--edu-shadow-sm);
  background: var(--edu-surface);
}

.card-header {
  background-color: var(--edu-surface);
  border-bottom: 1px solid var(--edu-border);
  border-radius: var(--edu-radius) var(--edu-radius) 0 0 !important;
  font-weight: 600;
  font-size: 0.95rem;
  padding: 0.85rem 1.1rem;
  display: flex;
  align-items: center;
  gap: 0.5rem;
}

.card-header i { color: var(--edu-primary); }
.card-body { padding: 1.1rem; }

/* ---------- Stat cards ---------- */
.stat-card {
  position: relative;
  overflow: hidden;
  border-radius: var(--edu-radius);
  color: #fff;
  padding: 1.15rem 1.25rem;
  box-shadow: var(--edu-shadow);
  transition: transform 0.15s ease, box-shadow 0.15s ease;
}

.stat-card:hover { transform: translateY(-2px); box-shadow: var(--edu-shadow-lg); }

.stat-card .small {
  font-size: 0.8rem;
  font-weight: 500;
  opacity: 0.88;
  text-transform: uppercase;
  letter-spacing: 0.03em;
}

.stat-card .stat-value {
  font-size: 1.85rem;
  font-weight: 700;
  line-height: 1.2;
  margin: 0.15rem 0 0.1rem;
}

.stat-icon {
  position: absolute;
  top: -0.6rem;
  right: -0.4rem;
  font-size: 3.4rem;
  opacity: 0.18;
  transform: rotate(8deg);
}

.stat-card.bg-primary-edu { background: linear-gradient(135deg, var(--edu-primary-dark), var(--edu-primary)); }
.stat-card.bg-accent { background: linear-gradient(135deg, var(--edu-accent-dark), var(--edu-accent)); }
.stat-card.bg-info-edu { background: linear-gradient(135deg, var(--edu-info-dark), var(--edu-info)); }
.stat-card.bg-danger-edu { background: linear-gradient(135deg, var(--edu-danger-dark), var(--edu-danger)); }

/* ---------- Buttons ---------- */
.btn {
  border-radius: 0.55rem;
  font-weight: 500;
  font-size: 0.88rem;
  padding: 0.45rem 0.95rem;
  transition: transform 0.1s ease, box-shadow 0.15s ease, filter 0.15s ease;
}

.btn:active { transform: translateY(1px); }

.btn-primary {
  background: linear-gradient(135deg, var(--edu-primary-dark), var(--edu-primary));
  border-color: var(--edu-primary-dark);
}
.btn-primary:hover { filter: brightness(1.08); box-shadow: 0 4px 12px rgba(13, 110, 84, 0.3); }

.btn-outline-primary { color: var(--edu-primary); border-color: var(--edu-primary); }
.btn-outline-primary:hover { background: var(--edu-primary); border-color: var(--edu-primary); }

.btn-sm { padding: 0.3rem 0.65rem; font-size: 0.8rem; border-radius: 0.45rem; }
.btn-lg { padding: 0.65rem 1.2rem; font-size: 1rem; border-radius: 0.65rem; }

/* ---------- Tables ---------- */
.table { margin-bottom: 0; font-size: 0.89rem; }
.table thead th {
  text-transform: uppercase;
  font-size: 0.72rem;
  letter-spacing: 0.05em;
  color: var(--edu-text-muted);
  font-weight: 700;
  border-bottom: 1px solid var(--edu-border);
  padding: 0.85rem 0.9rem;
  background-color: #fafbfb;
}
.table tbody td { padding: 0.75rem 0.9rem; vertical-align: middle; border-top: 1px solid var(--edu-border); }
.table-hover tbody tr:hover { background-color: var(--edu-primary-light); }
.table-light { background-color: #fafbfb; }

/* ---------- Photo d'identité de l'élève (fiche, liste, formulaire) ---------- */
.photo-eleve-mini {
  width: 32px;
  height: 32px;
  object-fit: cover;
  border-radius: 50%;
  vertical-align: middle;
  margin-right: 0.3rem;
}

.photo-eleve-apercu {
  width: 110px;
  height: 140px;
  object-fit: cover;
  border: 1px solid var(--edu-border);
  border-radius: 0.4rem;
  background: #fafbfb;
}

.photo-eleve-apercu-vide {
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--edu-text-muted);
  font-size: 2.2rem;
}

/* ---------- Forms ---------- */
.form-label { font-weight: 600; font-size: 0.83rem; color: var(--edu-text); margin-bottom: 0.35rem; }
.form-control, .form-select {
  border-radius: 0.55rem;
  border: 1px solid #d7dcda;
  padding: 0.5rem 0.8rem;
  font-size: 0.9rem;
}
.form-control:focus, .form-select:focus {
  border-color: var(--edu-primary);
  box-shadow: 0 0 0 0.2rem rgba(13, 110, 84, 0.15);
}
.form-control-sm, .form-select-sm { border-radius: 0.45rem; }
.input-group-text { background: #f3f5f6; border: 1px solid #d7dcda; color: var(--edu-text-muted); }

/* ---------- Badges & alerts ---------- */
.badge { font-weight: 600; font-size: 0.72rem; padding: 0.4em 0.7em; border-radius: 999px; letter-spacing: 0.01em; }
.badge-role-Super-Administrateur { background-color: var(--edu-primary-dark); }
.badge-role-Administrateur { background-color: var(--edu-primary); }
.badge-role-Enseignant { background-color: var(--edu-info); }
.badge-role-Intendant { background-color: var(--edu-accent); color: #3a2a00; }

/* ---------- Plateforme : comptes d'un établissement (fiche établissement) ---------- */
/* Formulaire de mot de passe personnalisé, replié par défaut sous le bouton
   « Nouveau » et déplié par app.js au clic (voir btn-mdp-nouveau). */
.mdp-form-nouveau { display: flex; gap: 0.3rem; }
.mdp-form-nouveau.d-none { display: none; }

.alert { border: none; border-left: 4px solid transparent; border-radius: 0.6rem; font-size: 0.9rem; }
.alert-success { background: #eaf6ef; border-left-color: var(--edu-success); color: #0f5132; }
.alert-danger { background: #fdedec; border-left-color: var(--edu-danger); color: #7a2020; }
.alert-info { background: #eaf5fa; border-left-color: var(--edu-info); color: #16506a; }
.alert-warning { background: #fdf5e6; border-left-color: var(--edu-accent); color: #6b4c0c; }

/* ---------- Tabs ---------- */
.nav-tabs { border-bottom: 1px solid var(--edu-border); }
.nav-tabs .nav-link {
  color: var(--edu-text-muted) !important;
  border: none;
  border-bottom: 2px solid transparent;
  border-radius: 0;
  font-weight: 600;
  padding: 0.6rem 1rem !important;
}
.nav-tabs .nav-link.active { color: var(--edu-primary) !important; border-bottom-color: var(--edu-primary); background: transparent; }
.nav-tabs .nav-link:hover { background: transparent !important; color: var(--edu-primary) !important; }

/* ---------- Progress ---------- */
.progress { border-radius: 999px; background-color: var(--edu-primary-light); height: 0.9rem; }
.progress-bar { background: linear-gradient(135deg, var(--edu-primary-dark), var(--edu-primary)); }

/* ---------- DataTables integration ---------- */
.dataTables_wrapper .dataTables_filter input,
.dataTables_wrapper .dataTables_length select {
  border-radius: 0.45rem;
  border: 1px solid #d7dcda;
  padding: 0.3rem 0.6rem;
}
.dataTables_wrapper .dataTables_paginate .paginate_button {
  border-radius: 0.4rem !important;
  margin: 0 2px;
}
.dataTables_wrapper .dataTables_paginate .paginate_button.current {
  background: var(--edu-primary) !important;
  border-color: var(--edu-primary) !important;
  color: #fff !important;
}
.dataTables_wrapper .dataTables_info { color: var(--edu-text-muted); font-size: 0.82rem; }

/* ---------- Login page ---------- */
.login-shell {
  min-height: 100vh;
  display: flex;
}

.login-brand-pane {
  flex: 1 1 45%;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  text-align: center;
  padding: 3rem 2rem;
  color: #fff;
  background:
    radial-gradient(circle at 15% 20%, rgba(255, 255, 255, 0.08) 0, transparent 45%),
    radial-gradient(circle at 85% 80%, rgba(255, 255, 255, 0.08) 0, transparent 45%),
    linear-gradient(150deg, var(--edu-primary-dark) 0%, var(--edu-primary) 100%);
  position: relative;
}

.login-brand-pane .brand-logo {
  width: 88px;
  height: 88px;
  border-radius: 1.4rem;
  background: rgba(255, 255, 255, 0.12);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 2.4rem;
  margin-bottom: 1.5rem;
  overflow: hidden;
}

.login-brand-pane .brand-logo img { max-width: 100%; max-height: 100%; }
.login-brand-pane h1 { font-size: 1.7rem; font-weight: 700; margin-bottom: 0.5rem; }
.login-brand-pane p { color: rgba(255, 255, 255, 0.82); max-width: 360px; font-size: 0.95rem; }

.login-brand-pane .brand-tagline {
  margin-top: 2.5rem;
  padding-top: 1.5rem;
  border-top: 1px solid rgba(255, 255, 255, 0.18);
  font-size: 0.8rem;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.6);
}

.login-form-pane {
  flex: 1 1 55%;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 2.5rem 1.5rem;
  background: var(--edu-surface);
}

.login-form-wrap { max-width: 380px; width: 100%; }
.login-form-wrap h4 { font-weight: 700; margin-bottom: 0.25rem; }
.login-form-wrap .login-lead { color: var(--edu-text-muted); font-size: 0.9rem; margin-bottom: 1.75rem; }

@media (max-width: 900px) {
  .login-shell { flex-direction: column; }
  .login-brand-pane { padding: 2.5rem 1.5rem; flex: none; }
  .login-form-pane { flex: none; }
}

/* ---------- Language switch ---------- */
.lang-switch {
  display: inline-flex;
  align-items: center;
  background: rgba(255, 255, 255, 0.12);
  border-radius: 999px;
  padding: 0.2rem 0.6rem;
  font-size: 0.78rem;
  font-weight: 700;
  letter-spacing: 0.03em;
}
.lang-switch a {
  color: rgba(255, 255, 255, 0.65);
  text-decoration: none;
  padding: 0.1rem 0.3rem;
}
.lang-switch a.active { color: #fff; }
.lang-switch .lang-sep { color: rgba(255, 255, 255, 0.4); margin: 0 0.1rem; }

.lang-switch-floating {
  position: absolute;
  top: 1.25rem;
  right: 1.25rem;
  z-index: 10;
  background: rgba(0, 0, 0, 0.18);
}
.lang-switch-floating a { color: rgba(255, 255, 255, 0.7); }
.lang-switch-floating a.active { color: #fff; }

/* ---------- Notes entry table ---------- */
.table-notes input.note-input {
  width: 85px;
  text-align: center;
  font-weight: 600;
}

/* ---------- Bulletin (print) ---------- */
/* Le bulletin est mis en page au format A4 (210 × 297 mm) : ce qui est
   affiché à l'écran correspond exactement à la feuille imprimée. */
.bulletin {
  position: relative;
  background: #fff;
  width: 210mm;
  height: 297mm;     /* hauteur FIXE : le contenu est réduit pour y tenir */
  padding: 10mm 9mm;
  border: 1px solid #d7dcda;
  border-radius: var(--edu-radius);
  margin: 0 auto 10mm;
  box-shadow: var(--edu-shadow-sm);
  font-family: 'Inter', 'Segoe UI', Arial, sans-serif;
  font-size: 10.5pt;
  box-sizing: border-box;
  overflow: hidden;
}

/* Filigrane : logo de l'établissement centré derrière le contenu, en grande
   taille et très estompé — purement décoratif, n'interfère jamais avec la
   lecture ni avec le zoom arrière appliqué par app.js. */
.bulletin-watermark {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 140mm;
  max-width: 68%;
  max-height: 68%;
  object-fit: contain;
  opacity: 0.07;
  filter: grayscale(100%);
  z-index: 0;
  pointer-events: none;
  user-select: none;
}

/* Enveloppe mise à l'échelle par app.js quand le contenu dépasse la page. */
.bulletin .bulletin-contenu { display: block; position: relative; z-index: 1; transform-origin: top left; }

/* Sous le nom de la matière : l'enseignant qui l'assure. */
.bulletin .matiere-nom { display: block; }

.bulletin .matiere-enseignant {
  display: block;
  font-size: 0.6rem;
  font-style: italic;
  color: var(--edu-text-muted);
  line-height: 1.1;
  margin-top: 0;
}

/* Sur un petit écran, la feuille A4 est réduite pour rester visible en entier.
   Explicitement limité à "screen" : une requête sans type de média matche
   AUSSI à l'impression (la page A4 elle-même fait 210 mm de large, donc
   « max-width: 230mm » y serait toujours vraie), ce qui annulerait la
   hauteur fixe du bulletin imprimé si cette règle venait à être déplacée
   avant le bloc @media print dans une future modification. */
@media screen and (max-width: 230mm) {
  .bulletin {
    width: 100%;
    height: auto;
    padding: 1rem;
  }
}

.bulletin .bulletin-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  border-bottom: 3px solid var(--edu-primary);
  padding-bottom: 0.85rem;
  margin-bottom: 1.1rem;
}

/* ---------- Bulletin : en-tête bilingue officiel ---------- */
.bulletin-masthead {
  display: flex;
  align-items: stretch;
  justify-content: space-between;
  gap: 0.75rem;
  padding-bottom: 0.6rem;
  margin-bottom: 0.9rem;
}

.bulletin-masthead .masthead-col {
  flex: 1 1 30%;
  font-size: 0.64rem;
  line-height: 1.35;
  color: #1f2a26;
  text-transform: uppercase;
  letter-spacing: 0.01em;
  text-align: center;
}

.bulletin-masthead .masthead-etab-side {
  margin-top: 0.35rem;
  font-weight: 800;
  font-size: 0.68rem;
  color: var(--edu-primary-dark);
  line-height: 1.25;
}

.bulletin-masthead .masthead-contact-side {
  margin-top: 0.15rem;
  font-size: 0.62rem;
  font-weight: 600;
  text-transform: none;
  color: var(--edu-text-muted);
  line-height: 1.3;
}

.bulletin-masthead .masthead-devise-side {
  margin-top: 0.1rem;
  font-size: 0.62rem;
  font-style: italic;
  text-transform: none;
  color: var(--edu-text-muted);
  line-height: 1.3;
}

.bulletin-masthead .masthead-col .mini-caps {
  font-style: italic;
  text-transform: none;
  font-size: 0.66rem;
  color: var(--edu-text-muted);
}

.bulletin-masthead .masthead-center {
  flex: 0 1 38%;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;   /* logo centré verticalement dans l'en-tête */
  text-align: center;
  padding: 0 0.5rem;
}

.masthead-logo {
  height: 56px;
  max-width: 100%;
  margin-bottom: 0;
}

.masthead-logo-placeholder {
  height: 56px;
  width: 56px;
  flex: 0 0 auto;
  margin: 0 auto;
  border-radius: 50%;
  background: var(--edu-primary-light);
  color: var(--edu-primary-dark);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.6rem;
}

.masthead-etab {
  font-weight: 800;
  font-size: 0.95rem;
  color: var(--edu-primary-dark);
  text-transform: uppercase;
}

.masthead-devise {
  font-size: 0.72rem;
  font-style: italic;
  color: var(--edu-text-muted);
}

.masthead-contact {
  font-size: 0.68rem;
  color: var(--edu-text-muted);
  margin-top: 0.15rem;
}

.bulletin-title {
  text-align: center;
  margin-bottom: 1.1rem;
}

.bulletin-title .title-main {
  display: inline-block;
  font-weight: 800;
  font-size: 1.05rem;
  letter-spacing: 0.02em;
  color: var(--edu-danger, #b3261e);
  border-bottom: 2px solid var(--edu-danger, #b3261e);
  padding-bottom: 0.2rem;
  text-transform: uppercase;
}

.bulletin-title .title-sep { color: #1f2a26; margin: 0 0.15rem; }

.bulletin-title .title-sub {
  font-size: 0.8rem;
  font-style: italic;
  color: var(--edu-text-muted);
  margin-top: 0.3rem;
}

.bulletin-identity {
  display: flex;
  align-items: stretch;
  gap: 0.9rem;
  margin-bottom: 1rem;
}

.identity-lines {
  flex: 1 1 auto;
  font-size: 0.86rem;
  padding: 0.6rem 0.9rem;
}

.identity-lines .id-row {
  display: flex;
  flex-wrap: wrap;
  column-gap: 2rem;
  row-gap: 0.15rem;
  padding: 0.12rem 0;
  border-bottom: 1px dashed #dde3e1;
}

.identity-lines .id-row:last-child { border-bottom: none; }
.identity-lines .id-row-strong { padding-top: 0.4rem; }

.identity-lines .id-pair {
  display: inline-flex;
  align-items: baseline;
  gap: 0.4rem;
}

.identity-lines .id-pair-wide { flex: 1 1 100%; }

.identity-lines .id-label,
.identity-right .id-label {
  font-weight: 700;
  color: var(--edu-primary-dark);
  white-space: nowrap;
}

/* Deux-points avant chaque valeur (Nom et prénom, Classe, Sexe, Effectif
   classe, Redoublant(e), Matricule, Année scolaire) : un seul réglage ici
   couvre les sept champs, qui partagent tous la classe .id-label. */
.identity-lines .id-label::after,
.identity-right .id-label::after {
  content: ':';
}

.identity-lines .id-value,
.identity-right .id-value {
  color: var(--edu-text);
}

.qr-block {
  flex: 0 0 auto;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  /* Aucun encadrement autour du QR code : il se pose directement sur la
     feuille. La photo d'identité (photo-block), juste avant, crée déjà une
     séparation avec le bloc d'identité : pas besoin d'une marge en plus. */
  border: 0;
  padding: 0.3rem 0.5rem;
}

.qr-block img { display: block; }

.qr-caption {
  font-size: 0.62rem;
  color: var(--edu-text-muted);
  margin-top: 0.3rem;
  line-height: 1.25;
}

.identity-right {
  flex: 0 0 auto;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: flex-end;
  text-align: right;
  gap: 0.18rem;
  /* Resserré au plus près de son contenu (Redoublant(e) / Matricule / Année
     scolaire) et poussé vers la droite, contre le QR code : l'espace ainsi
     rendu à .identity-lines permet au nom et prénom de tenir sur une seule
     ligne même pour un nom long. */
  padding: 0.6rem 0.3rem;
  min-width: 0;
}

.photo-block {
  flex: 0 0 auto;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0.3rem 0;
}

.photo-id {
  width: 68px;
  height: 88px;
  object-fit: cover;
  border: 1px solid var(--edu-border);
  border-radius: 0.3rem;
  background: #fff;
}

.photo-id-placeholder {
  width: 68px;
  height: 88px;
  display: flex;
  align-items: center;
  justify-content: center;
  border: 1px dashed var(--edu-border);
  border-radius: 0.3rem;
  background: var(--edu-primary-light);
  color: var(--edu-primary-dark);
  font-size: 1.8rem;
}

.identity-right .id-right-line {
  display: flex;
  flex-direction: row;
  align-items: baseline;
  justify-content: flex-end;
  flex-wrap: nowrap;
  gap: 0.45rem;
  white-space: nowrap;
}

.identity-right .id-label {
  font-size: 0.68rem;
  text-transform: uppercase;
  letter-spacing: 0.02em;
}

.identity-right .id-value {
  font-size: 1rem;
  font-weight: 800;
  color: var(--edu-primary-dark);
}

.bulletin table th .th-sub {
  display: block;
  text-transform: none;
  font-style: italic;
  font-size: 0.62rem;
  letter-spacing: 0;
}

@media (max-width: 700px) {
  .bulletin-masthead { flex-direction: column; text-align: center; }
  .bulletin-identity { flex-direction: column; }
  .identity-right { align-items: flex-start; text-align: left; width: 100%; }
  .identity-right .id-right-line { justify-content: flex-start; }
}

.bulletin table {
  width: 100%;
  border-collapse: collapse;
  font-size: 0.85rem;
  margin-bottom: 0;
}

.bulletin table th, .bulletin table td {
  border: 1px solid #cfd6d3;
  padding: 1px 4px;
  line-height: 1.2;
  vertical-align: middle;
}

/* En-têtes un peu plus aérés que les lignes de notes, pour rester lisibles,
   et tenant sur une seule ligne même sur le bulletin trimestriel (9 colonnes). */
.bulletin table th {
  padding: 3px 3px;
  white-space: nowrap;
  font-size: 0.66rem;
}

/* Bulletin annuel : 12 colonnes (dont les 6 séquences). Le texte est réduit
   pour que la totalité du tableau tienne dans la largeur de la feuille A4. */
.bulletin table.tableau-dense { font-size: 0.6rem; }
.bulletin table.tableau-dense th { font-size: 0.55rem; letter-spacing: 0; }
.bulletin table.tableau-dense th,
.bulletin table.tableau-dense td { padding: 1px 2px; }
.bulletin table.tableau-dense .matiere-enseignant { font-size: 0.5rem; }
.bulletin table.tableau-dense td.col-minmax,
.bulletin table.tableau-dense th.col-minmax { padding-left: 3px; padding-right: 3px; }

/* La colonne [Min-Max] ne doit jamais passer à la ligne. */
.bulletin table td.col-minmax,
.bulletin table th.col-minmax {
  white-space: nowrap;
  padding-left: 6px;
  padding-right: 6px;
}

/* La colonne Appréciation est resserrée : ses valeurs sont des codes courts
   (CNA, CAA, CA, CWA, CVWA). */
.bulletin table td.col-appreciation {
  white-space: nowrap;
  font-weight: 600;
  letter-spacing: 0.02em;
}

/* La colonne Compétence contient une phrase : elle peut passer à la ligne,
   dans un corps légèrement réduit pour ne pas allonger les lignes. */
.bulletin table th.col-competence,
.bulletin table td.col-competence {
  white-space: normal;
  word-break: break-word;
  hyphens: auto;
  font-size: 0.6rem;
  line-height: 1.12;
  text-align: left;
}

.bulletin table.tableau-dense th.col-competence,
.bulletin table.tableau-dense td.col-competence { font-size: 0.5rem; }

/* Légende du barème d'appréciation, sous le tableau des notes. */
.bulletin .bulletin-legende {
  margin-top: 2px;
  font-size: 0.55rem;
  line-height: 1.25;
  color: var(--edu-text-muted);
  text-align: center;
}

.bulletin .bulletin-legende .legende-code {
  font-weight: 700;
  color: var(--edu-text);
}

/* Les lignes de sous-total tiennent elles aussi sur une seule ligne, pour
   garder exactement la même hauteur que les lignes de notes. */
.bulletin .groupe-row td {
  white-space: nowrap;
  font-size: 0.68rem;
}

.bulletin tfoot .groupe-row td { font-size: 0.74rem; }
.bulletin tfoot .groupe-row td.fs-6 { font-size: 0.92rem; }

.bulletin table th {
  background-color: var(--edu-primary);
  color: #fff;
  text-transform: uppercase;
  font-size: 0.72rem;
  letter-spacing: 0.03em;
}

.bulletin .groupe-row td {
  background-color: var(--edu-primary-light);
  color: var(--edu-primary-dark);
  font-weight: 700;
}

.bulletin tfoot .groupe-row td {
  background-color: var(--edu-primary-dark);
  color: #fff;
}

/* ---------- Bandes de synthèse colorées (appréciation, décision, moyennes) ---------- */
.summary-band {
  display: flex;
  flex-wrap: wrap;
  border-radius: var(--edu-radius-sm);
  overflow: hidden;
  margin-top: 0.6rem;
}

.summary-band .summary-item {
  flex: 1 1 50%;
  padding: 0.5rem 0.9rem;
  display: flex;
  flex-direction: row;
  align-items: baseline;
  flex-wrap: nowrap;
  gap: 0.5rem;
}

.summary-band .summary-item:not(:last-child) {
  border-right: 1px solid rgba(255, 255, 255, 0.35);
}

.summary-band .summary-label {
  font-size: 0.64rem;
  text-transform: uppercase;
  letter-spacing: 0.03em;
  font-weight: 700;
  opacity: 0.9;
}

.summary-band .summary-value {
  font-size: 0.92rem;
  font-weight: 700;
}

.summary-band-green {
  background-color: var(--edu-success);
  color: #fff;
}

.summary-band-gold {
  background-color: var(--edu-accent);
  color: #3a2905;
}

.summary-band-gold .summary-item:not(:last-child) {
  border-right-color: rgba(58, 41, 5, 0.25);
}

@media (max-width: 500px) {
  .summary-band .summary-item { flex: 1 1 100%; }
  .summary-band .summary-item:not(:last-child) { border-right: none; border-bottom: 1px solid rgba(255, 255, 255, 0.35); }
}

/* ---------- Bulletin : pied de page (appréciation / décision / visa) ---------- */
.bulletin-footer {
  display: flex;
  align-items: stretch;
  margin-top: 0.6rem;
  border: 1px solid var(--edu-primary-dark);
  border-radius: var(--edu-radius-sm);
  overflow: hidden;
  page-break-inside: avoid;
}

.bulletin-footer .bf-col {
  display: flex;
  flex-direction: column;
  min-width: 0;
}

.bulletin-footer .bf-col:not(:last-child) {
  border-right: 1px solid var(--edu-primary-dark);
}

.bulletin-footer .bf-col-appreciation { flex: 1 1 38%; }
.bulletin-footer .bf-col-decision { flex: 1 1 30%; }
.bulletin-footer .bf-col-visa { flex: 1 1 32%; }

.bulletin-footer .bf-entete {
  background-color: var(--edu-primary-light);
  color: var(--edu-primary-dark);
  font-weight: 700;
  font-size: 0.7rem;
  text-transform: uppercase;
  letter-spacing: 0.02em;
  text-align: center;
  padding: 0.35rem 0.5rem;
  border-bottom: 1px solid var(--edu-primary-dark);
}

.bulletin-footer .bf-ligne {
  display: flex;
  align-items: baseline;
  flex-wrap: wrap;
  gap: 0.5rem;
  padding: 0.35rem 0.6rem;
  border-bottom: 1px solid var(--edu-primary-dark);
  font-size: 0.78rem;
}

.bulletin-footer .bf-label {
  font-style: italic;
  color: var(--edu-primary-dark);
  font-weight: 600;
  white-space: nowrap;
}

.bulletin-footer .bf-valeur {
  font-weight: 800;
  font-style: italic;
  color: var(--edu-text);
}

.bulletin-footer .bf-valeur-normale { font-style: normal; font-weight: 700; }

/* « Appréciation du travail » : code + signification, sur une ligne compacte. */
.bulletin-footer .bf-valeur-appreciation {
  font-style: normal;
  font-weight: 700;
  font-size: 0.72rem;
}

.bulletin-footer .bf-decision {
  flex: 1 1 auto;
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  padding: 0.6rem 0.7rem;
  font-weight: 800;
  font-size: 0.82rem;
  line-height: 1.35;
  color: var(--edu-primary-dark);
}

/* Bloc « Décision du conseil de classe » : placé sous le bloc Absences, il
   occupe le reste de la hauteur de la colonne (flex:1 1 auto), pour
   descendre au même niveau que le bloc « Professeur principal » de la
   colonne voisine (voir .bf-visas). */
.bulletin-footer .bf-decision-bloc {
  flex: 1 1 auto;
  display: flex;
  flex-direction: column;
  min-height: 0;
}

/* Bloc « Absences » : heures justifiées / non justifiées / total du
   trimestre (ou cumulées sur l'année), saisies par le Surveillant Général.
   Présenté comme un petit tableau à bordures (même langage visuel que le
   tableau des notes), avec des lignes volontairement basses pour ne pas
   alourdir le pied de bulletin. */
.bulletin-footer .bf-absences {
  padding: 0.25rem 0.4rem;
  border-bottom: 1px solid var(--edu-primary-dark);
}

.bulletin-footer .bf-absences-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 0.72rem;
}

.bulletin-footer .bf-absences-table td {
  border: 1px solid var(--edu-primary-dark);
  padding: 0.06rem 0.4rem;
  line-height: 1.15;
}

.bulletin-footer .bf-abs-label {
  font-style: italic;
  color: var(--edu-primary-dark);
  font-weight: 600;
  white-space: nowrap;
}

.bulletin-footer .bf-abs-valeur {
  font-weight: 700;
  color: var(--edu-text);
  text-align: right;
}

.bulletin-footer .bf-abs-alerte { color: #b3261e; }

.bulletin-footer .bf-abs-total td {
  background-color: var(--edu-primary-light);
  font-weight: 800;
}

.bulletin-footer .bf-abs-total .bf-abs-valeur {
  color: var(--edu-primary-dark);
}

.bulletin-footer .bf-visas {
  display: flex;
  flex: 1 1 auto;
}

.bulletin-footer .bf-visa {
  flex: 1 1 50%;
  display: flex;
  flex-direction: column;
}

.bulletin-footer .bf-visa:not(:last-child) {
  border-right: 1px solid var(--edu-primary-dark);
}

.bulletin-footer .bf-visa-titre {
  background-color: var(--edu-primary-light);
  color: var(--edu-primary-dark);
  font-weight: 700;
  font-size: 0.66rem;
  text-align: center;
  padding: 0.3rem 0.4rem;
  border-bottom: 1px solid var(--edu-primary-dark);
}

.bulletin-footer .bf-visa-espace { flex: 1 1 auto; min-height: 58px; }

.bulletin-footer .bf-visa-corps {
  flex: 1 1 auto;
  display: flex;
  flex-direction: column;
  padding: 0.45rem 0.6rem 0.5rem;
}

.bulletin-footer .bf-fait { font-size: 0.75rem; color: var(--edu-text); }
.bulletin-footer .bf-lieu,
.bulletin-footer .bf-date { font-weight: 700; }

.bulletin-footer .bf-proviseur {
  text-align: right;
  font-weight: 800;
  font-size: 0.8rem;
  color: var(--edu-primary-dark);
}

.bulletin-footer .bf-visa-nom {
  text-align: center;
  font-weight: 800;
  font-size: 0.74rem;
  color: var(--edu-primary-dark);
  padding: 0 0.4rem 0.35rem;
}

@media (max-width: 700px) {
  .bulletin-footer { flex-direction: column; }
  .bulletin-footer .bf-col:not(:last-child) {
    border-right: none;
    border-bottom: 1px solid var(--edu-primary-dark);
  }
}

@page {
  size: 210mm 297mm;   /* A4 portrait exact */
  margin: 0;
}

/* Géométrie d'impression, appliquée aussi par app.js (classe « impression-a4 »
   posée sur <html> pendant l'impression) : même sur une petite fenêtre, où
   l'écran réduit la feuille à 100 % de largeur, la mesure du zoom se fait
   toujours sur une vraie page A4. Hauteur 296 mm (1 mm de tolérance) : à
   297 mm pile, l'arrondi des navigateurs pousse le bulletin sur une page de
   plus et laisse une feuille blanche entre deux bulletins. */
html.impression-a4 .bulletin {
  width: 210mm;
  height: 296mm;
  padding: 10mm 9mm;
  box-sizing: border-box;
}

@media print {
  .no-print { display: none !important; }

  html, body {
    background: #fff;
    margin: 0 !important;
    padding: 0 !important;
    width: 210mm;
  }

  /* Le premier bulletin doit commencer exactement en haut de la première
     page : la moindre marge au-dessus décalerait chaque bulletin et le ferait
     déborder sur une deuxième feuille. */
  .bulletins-liste { margin: 0 !important; padding: 0 !important; }

  .bulletin {
    width: 210mm;
    height: 296mm;
    padding: 10mm 9mm;
    box-sizing: border-box;
    border: none;
    box-shadow: none;
    border-radius: 0;
    margin: 0;
    overflow: hidden;
    break-inside: avoid;
    page-break-inside: avoid;
    -webkit-print-color-adjust: exact;
    print-color-adjust: exact;
  }

  /* Saut de page AVANT chaque bulletin sauf le premier (et non après chacun) :
     jamais de page blanche finale ni intermédiaire. */
  .bulletin + .bulletin {
    break-before: page;
    page-break-before: always;
  }

  /* Un bloc ne doit jamais être coupé entre deux pages. */
  .bulletin table, .bulletin-footer, .bulletin-masthead { page-break-inside: avoid; }
  .bulletin tr { page-break-inside: avoid; }
}

/* ---------- Affectations : choix multiple de matières ---------- */
.matieres-choix {
  max-height: 260px;
  overflow-y: auto;
  border: 1px solid #d7dcda;
  border-radius: var(--edu-radius-sm);
  padding: 0.5rem 0.7rem;
  background: #fff;
}

.matieres-choix .matiere-choix {
  display: flex;
  align-items: center;
  gap: 0.45rem;
  padding: 0.22rem 0;
  font-size: 0.88rem;
  cursor: pointer;
}

.matieres-choix .matiere-choix-tout {
  font-weight: 700;
  color: var(--edu-primary-dark);
  border-bottom: 1px solid var(--edu-border);
  margin-bottom: 0.25rem;
  padding-bottom: 0.35rem;
}

/* ---------- Licence : état, activation et écran de blocage ---------- */
.licence-etat {
  display: flex;
  align-items: flex-start;
  gap: 0.9rem;
  padding: 0.9rem 1rem;
  border-radius: var(--edu-radius);
}

.licence-etat-icone { font-size: 1.8rem; line-height: 1; }
.licence-etat-titre { font-weight: 800; font-size: 1.02rem; }
.licence-etat-detail { font-size: 0.86rem; opacity: 0.92; }

.licence-etat-ok { background-color: #e7f4ec; color: #14532d; }
.licence-etat-alerte { background-color: #fdf3d8; color: #6b4d05; }
.licence-etat-expire { background-color: #fbe6e4; color: #7f1d1a; }

.licence-input {
  font-family: "SFMono-Regular", Consolas, "Liberation Mono", monospace;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  font-weight: 700;
}

.licence-exemple {
  font-family: "SFMono-Regular", Consolas, "Liberation Mono", monospace;
  font-weight: 700;
  font-size: 0.92rem;
  letter-spacing: 0.04em;
  color: var(--edu-primary-dark);
  background: var(--edu-primary-light);
  border-radius: var(--edu-radius-sm);
  padding: 0.5rem 0.7rem;
  text-align: center;
}

.licence-bloque-page {
  min-height: 100vh;
  margin: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 1.5rem;
  background: linear-gradient(160deg, var(--edu-primary-dark), #0d3325 60%, #07231a);
}

.licence-bloque-carte {
  width: 100%;
  max-width: 460px;
  background: #fff;
  border-radius: var(--edu-radius);
  box-shadow: 0 18px 50px rgba(0, 0, 0, 0.35);
  padding: 2rem 1.8rem 1.5rem;
}

.licence-bloque-entete { text-align: center; margin-bottom: 1.2rem; }

.licence-bloque-icone {
  width: 62px;
  height: 62px;
  margin: 0 auto 0.8rem;
  border-radius: 50%;
  background: #fbe6e4;
  color: #b3261e;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.7rem;
}

.licence-bloque-titre { font-size: 1.25rem; font-weight: 800; color: var(--edu-primary-dark); margin-bottom: 0.4rem; }
.licence-bloque-sous-titre { font-size: 0.88rem; color: var(--edu-text-muted); margin-bottom: 0; }
.licence-bloque-form { margin-top: 0.5rem; }

.licence-bloque-pied {
  margin-top: 1.3rem;
  padding-top: 0.9rem;
  border-top: 1px solid #e3e7e5;
  font-size: 0.78rem;
  color: var(--edu-text-muted);
  text-align: center;
}

/* ==========================================================================
   Statistiques — cartes, barres et répartitions
   --------------------------------------------------------------------------
   Tout est dessiné en CSS : aucune bibliothèque de graphiques n'est
   téléchargée, les écrans fonctionnent donc sans connexion Internet et
   s'impriment tels quels.
   ========================================================================== */

:root {
  /* Série unique (grandeurs : moyennes, taux, effectifs) */
  --viz-serie-1: #0a8f63;
  /* Deuxième série catégorielle (comparaison filles / garçons) */
  --viz-serie-2: #d99a2b;
  /* Dégradé ordonné des cinq bandes d'appréciation, du plus faible au plus fort */
  --viz-bande-1: #b7ddcc;
  --viz-bande-2: #7ec5a5;
  --viz-bande-3: #3fa87f;
  --viz-bande-4: #14875f;
  --viz-bande-5: #0a5f43;
  --viz-piste: #eceff0;
}

.stat-grille {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(165px, 1fr));
  gap: 0.75rem;
}

.stat-carte {
  background: var(--edu-surface);
  border: 1px solid var(--edu-border);
  border-radius: var(--edu-radius);
  padding: 0.8rem 0.9rem;
}

.stat-carte .stat-libelle {
  font-size: 0.7rem;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--edu-text-muted);
  font-weight: 600;
}

.stat-carte .stat-valeur {
  font-size: 1.55rem;
  font-weight: 700;
  line-height: 1.2;
  color: var(--edu-text);
  font-variant-numeric: tabular-nums;
  margin-top: 0.15rem;
}

.stat-carte .stat-unite { font-size: 0.9rem; font-weight: 600; color: var(--edu-text-muted); }
.stat-carte .stat-detail { font-size: 0.74rem; color: var(--edu-text-muted); margin-top: 0.1rem; }

/* ---------- Barres horizontales ---------- */

.stat-barres { display: flex; flex-direction: column; gap: 6px; }

.stat-barre {
  display: grid;
  grid-template-columns: minmax(95px, 28%) 1fr auto;
  align-items: center;
  gap: 0.6rem;
}

.stat-barre-libelle {
  font-size: 0.78rem;
  color: var(--edu-text);
  line-height: 1.2;
  overflow-wrap: anywhere;
}

.stat-barre-libelle .stat-barre-note {
  display: block;
  font-size: 0.68rem;
  color: var(--edu-text-muted);
}

.stat-barre-piste {
  position: relative;
  height: 14px;
  background: var(--viz-piste);
  border-radius: 4px;
}

.stat-barre-remplissage {
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  min-width: 2px;
  border-radius: 0 4px 4px 0;
  background: var(--viz-serie-1);
}

.stat-barre-chiffre {
  font-size: 0.78rem;
  font-weight: 700;
  color: var(--edu-text);
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}

.stat-barre-vide { color: var(--edu-text-muted); font-weight: 500; }

/* Teintes ordonnées des bandes d'appréciation */
.stat-barre-remplissage.ton-1 { background: var(--viz-bande-1); }
.stat-barre-remplissage.ton-2 { background: var(--viz-bande-2); }
.stat-barre-remplissage.ton-3 { background: var(--viz-bande-3); }
.stat-barre-remplissage.ton-4 { background: var(--viz-bande-4); }
.stat-barre-remplissage.ton-5 { background: var(--viz-bande-5); }

/* Séries catégorielles (garçons / filles) */
.stat-barre-remplissage.serie-1 { background: var(--viz-serie-1); }
.stat-barre-remplissage.serie-2 { background: var(--viz-serie-2); }

.stat-legende {
  display: flex;
  flex-wrap: wrap;
  gap: 0.9rem;
  font-size: 0.75rem;
  color: var(--edu-text-muted);
  margin-bottom: 0.5rem;
}

.stat-legende .stat-puce {
  display: inline-block;
  width: 10px;
  height: 10px;
  border-radius: 3px;
  margin-right: 0.35rem;
  vertical-align: -1px;
}

.stat-puce.serie-1 { background: var(--viz-serie-1); }
.stat-puce.serie-2 { background: var(--viz-serie-2); }

.stat-titre-bloc {
  font-size: 0.95rem;
  font-weight: 700;
  color: var(--edu-primary-dark);
  margin: 0 0 0.6rem;
}

.stat-sous-titre { font-size: 0.75rem; color: var(--edu-text-muted); margin: -0.4rem 0 0.6rem; }

/* ---------- Jauge de progression des leçons ---------- */

.stat-jauge-piste {
  position: relative;
  height: 20px;
  background: var(--viz-piste);
  border-radius: 4px;
  overflow: hidden;
}

.stat-jauge-remplissage {
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  background: var(--viz-serie-1);
  border-radius: 0 4px 4px 0;
}

.stat-jauge-texte {
  position: relative;
  font-size: 0.78rem;
  font-weight: 700;
  color: var(--edu-text);
  margin-top: 0.3rem;
}

/* ==========================================================================
   Rapport statistique imprimable (format A4)
   ========================================================================== */

.rapport-liste { padding: 1.5rem 0; }

.rapport {
  width: 210mm;
  min-height: 297mm;
  margin: 0 auto;
  padding: 14mm 12mm;
  background: var(--edu-surface);
  box-sizing: border-box;
  box-shadow: var(--edu-shadow);
  border-radius: 2px;
  font-size: 10.5pt;
  color: var(--edu-text);
}

.rapport-entete {
  display: flex;
  justify-content: space-between;
  gap: 1.5rem;
  font-size: 0.72rem;
  line-height: 1.35;
  border-bottom: 2px solid var(--edu-primary);
  padding-bottom: 0.5rem;
}

.rapport-entete .rapport-etab {
  margin-top: 0.3rem;
  font-weight: 700;
  color: var(--edu-primary-dark);
}

.rapport-titre { text-align: center; margin: 1.1rem 0 1.3rem; }

.rapport-titre h1 {
  font-size: 1.35rem;
  font-weight: 800;
  letter-spacing: 0.03em;
  color: var(--edu-primary-dark);
  margin: 0;
}

.rapport-sous-titre { font-size: 0.95rem; font-weight: 600; margin-top: 0.2rem; }
.rapport-meta { font-size: 0.72rem; color: var(--edu-text-muted); margin-top: 0.2rem; }

.rapport-bloc { margin-bottom: 1.1rem; page-break-inside: avoid; break-inside: avoid; }

.rapport-bloc h2 {
  font-size: 0.86rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: #fff;
  background: var(--edu-primary);
  padding: 0.3rem 0.6rem;
  border-radius: var(--edu-radius-sm);
  margin: 0 0 0.6rem;
}

.rapport-table { width: 100%; border-collapse: collapse; font-size: 0.74rem; }

.rapport-table th,
.rapport-table td {
  border: 1px solid #cfd6d3;
  padding: 3px 6px;
  line-height: 1.25;
}

.rapport-table th {
  background: var(--edu-primary-light);
  color: var(--edu-primary-dark);
  font-weight: 700;
  text-align: left;
}

.rapport-table tbody tr:nth-child(even) { background: #fafbfb; }

.rapport .stat-grille { grid-template-columns: repeat(3, 1fr); }
.rapport .stat-carte { padding: 0.5rem 0.6rem; }
.rapport .stat-carte .stat-valeur { font-size: 1.15rem; }
.rapport .stat-barre-libelle { font-size: 0.72rem; }
.rapport .stat-barre-chiffre { font-size: 0.72rem; }

.rapport-pied { margin-top: 1.4rem; page-break-inside: avoid; }

.rapport-visa {
  width: 62mm;
  margin-left: auto;
  text-align: center;
  font-size: 0.78rem;
}

.rapport-signature {
  margin-top: 16mm;
  border-top: 1px solid #cfd6d3;
  padding-top: 0.25rem;
  font-weight: 700;
}

@media (max-width: 230mm) {
  .rapport { width: 100%; min-height: 0; padding: 1rem; }
  .rapport .stat-grille { grid-template-columns: repeat(2, 1fr); }
}

@media print {
  .rapport-liste { padding: 0; }

  .rapport {
    width: 210mm;
    min-height: 0;
    margin: 0;
    padding: 12mm 10mm;
    box-shadow: none;
    border-radius: 0;
  }
}

/* ==========================================================================
   Rapport officiel « Pedagogic Statistics Form » (format A4 paysage)
   ========================================================================== */
@page officielPage {
  size: A4 landscape;
  margin: 8mm;
}

.officiel-liste {
  padding: 1.5rem 0;
  background: var(--edu-bg, #f2f4f3);
}

.officiel-page {
  page: officielPage;
  width: 297mm;
  min-height: 210mm;
  margin: 0 auto 10mm;
  padding: 10mm 12mm;
  background: var(--edu-surface, #fff);
  box-sizing: border-box;
  box-shadow: 0 1px 6px rgba(0, 0, 0, 0.12);
  border-radius: 2px;
  font-size: 9.5pt;
  color: var(--edu-text, #1f2d27);
}

.officiel-entete-titre {
  text-align: center;
  font-weight: 700;
  font-size: 1.05rem;
  margin-bottom: 0.9rem;
  text-transform: uppercase;
  letter-spacing: 0.02em;
}

.officiel-champs {
  display: flex;
  flex-wrap: wrap;
  gap: 0.3rem 2.2rem;
  font-size: 0.8rem;
  margin-bottom: 0.7rem;
}

.officiel-champs > div {
  flex: 1 1 260px;
  border-bottom: 1px solid #333;
  padding-bottom: 2px;
}

.officiel-champs strong { margin-right: 0.4rem; }

.officiel-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 0.66rem;
  table-layout: fixed;
  margin-top: 0.6rem;
}

.officiel-table th,
.officiel-table td {
  border: 1px solid #444;
  padding: 2px 3px;
  text-align: center;
  line-height: 1.15;
  word-break: break-word;
}

.officiel-table th { background: #eef1ef; font-weight: 700; }

.officiel-table td:first-child,
.officiel-table th:first-child { text-align: left; width: 11%; }

.officiel-table tbody tr:last-child,
.officiel-table tbody tr.officiel-ligne-forte { font-weight: 700; background: #f7f7f7; }

@media (max-width: 320mm) {
  .officiel-page { width: 100%; min-height: 0; padding: 1rem; }
}

@media print {
  .officiel-liste { padding: 0; background: #fff; }

  .officiel-page {
    width: 297mm;
    min-height: 0;
    margin: 0;
    padding: 8mm 10mm;
    box-shadow: none;
    border-radius: 0;
    page-break-after: always;
  }

  .officiel-page:last-child { page-break-after: auto; }
}

/* ==========================================================================
   Impression directe des écrans de statistiques (hors rapport imprimable
   dédié) : seules les données doivent sortir sur le papier, jamais
   l'habillage de l'écran (menu, filtres, formulaires de génération — tous
   masqués via .no-print), et aucune donnée ne doit être coupée par un
   défilement impossible à l'impression.
   ========================================================================== */
@media print {
  /* Un tableau large (ex. statistiques par matière avec les colonnes
     Garçons/Filles) ne doit jamais être tronqué par un défilement
     horizontal : on le laisse déborder librement et on resserre la police
     pour qu'il tienne sur la largeur de la page. */
  .table-responsive { overflow-x: visible; }
  .table-responsive table { font-size: 0.68rem; }

  /* Liste des élèves en impayé (Intendant) : supprimer la limite de hauteur
     avec défilement, qui couperait silencieusement la liste à l'impression. */
  .impayes-liste { max-height: none !important; overflow-y: visible !important; }

  /* Champ de recherche instantanée injecté par JS devant les tableaux
     (.datatable) : une commande de l'écran, jamais une donnée. */
  .table-filtre, .table-filtre-vide { display: none !important; }
}

/* Respiration entre deux graphiques successifs */
.stat-barres + .stat-titre-bloc,
.stat-barres + .stat-sous-titre,
.stat-barres + .stat-legende { margin-top: 1.3rem; }

.stat-sous-titre.stat-ecart { margin-top: 1.1rem; }

.stat-titre-bloc + .stat-sous-titre { margin-top: -0.35rem; }

/* Colonnes « garçons / filles » des tableaux de statistiques */
.col-sexe { white-space: nowrap; }
.col-sexe-m { background: rgba(10, 143, 99, 0.07); }
.col-sexe-f { background: rgba(217, 154, 43, 0.09); }
thead .col-sexe-m { background: rgba(10, 143, 99, 0.16); }
thead .col-sexe-f { background: rgba(217, 154, 43, 0.18); }

.stat-grille.stat-grille-sexe { grid-template-columns: repeat(2, minmax(150px, 1fr)); max-width: 620px; }
.rapport .stat-grille.stat-grille-sexe { grid-template-columns: repeat(2, 1fr); max-width: none; }