:root {
  color-scheme: dark;

  --bg: #0e1319;
  --bg-alt: #131a22;
  --surface: #182029;
  --surface-alt: #1f2933;
  --input-bg: #111820;
  --border: #2a3644;
  --border-strong: #3b4a5c;
  --text: #e9eef5;
  --text-muted: #9aa8ba;
  --text-faint: #6b7a8d;

  --primary: #2e7be0;
  --primary-hover: #3e8bf0;
  --primary-pressed: #2568c4;
  --primary-text: #ffffff;

  --danger: #e5484d;
  --danger-bg: #3a1d20;
  --success: #3fb950;
  --success-bg: #16301f;
  --warning: #d29922;
  --warning-bg: #33290f;

  --selection: #1e3a5f;
  --gauge-track: #26313d;
  --gauge-tick: #46566a;
  --avatar-bg: #4a5666;
  --avatar-fg: #f2f5f9;

  --pink: #d63384;
  --pink-bg: rgba(214, 51, 132, 0.14);
  --purple: #8b5cf6;

  --danger-border: rgba(229, 72, 77, 0.45);
  --success-border: rgba(63, 185, 80, 0.45);
  --warning-border: rgba(210, 153, 34, 0.35);
  --glow: rgba(46, 123, 224, 0.16);

  --nav-bg: #10365f;
  --nav-fg: #eaf1fa;
  --nav-fg-muted: #a8bcd4;
  --nav-hover: rgba(255, 255, 255, 0.12);
  --nav-active-bg: #ffffff;
  --nav-active-fg: #10365f;
  --nav-border: rgba(255, 255, 255, 0.14);
  --nav-width: 250px;

  --radius-sm: 7px;
  --radius: 10px;
  --radius-lg: 16px;
  --shadow: 0 18px 46px rgba(0, 0, 0, 0.5);
  --shadow-soft: 0 6px 18px rgba(0, 0, 0, 0.32);

  --tap: 48px;
  --space: 16px;
}

@media (prefers-color-scheme: light) {
  html:not([data-theme]) {
    color-scheme: light;
    --bg: #f1f4f9;
    --bg-alt: #ffffff;
    --surface: #ffffff;
    --surface-alt: #eef2f8;
    --input-bg: #ffffff;
    --border: #d7dee9;
    --border-strong: #b9c4d4;
    --text: #111b2b;
    --text-muted: #56677f;
    --text-faint: #8794a7;
    --primary: #01428b;
    --primary-hover: #0a569f;
    --primary-pressed: #013367;
    --danger: #c0272d;
    --danger-bg: #fdecec;
    --success: #1e7b34;
    --success-bg: #e8f6ec;
    --warning: #8a6100;
    --warning-bg: #fdf4e0;
    --selection: #dce8f8;
    --gauge-track: #dce3ed;
    --gauge-tick: #a9b5c6;
    --avatar-bg: #9aa3af;
    --avatar-fg: #ffffff;
    --shadow: 0 18px 46px rgba(26, 43, 60, 0.22);
    --shadow-soft: 0 6px 18px rgba(26, 43, 60, 0.12);
    --danger-border: rgba(192, 39, 45, 0.4);
    --success-border: rgba(30, 123, 52, 0.4);
    --warning-border: rgba(138, 97, 0, 0.35);
    --glow: rgba(1, 66, 139, 0.12);

    --nav-bg: #01428b;
    --nav-fg: #ffffff;
    --nav-fg-muted: rgba(255, 255, 255, 0.78);
    --nav-hover: rgba(255, 255, 255, 0.14);
    --nav-active-bg: #ffffff;
    --nav-active-fg: #01428b;
    --nav-border: rgba(255, 255, 255, 0.18);
    --nav-width: 250px;
  }
}

html[data-theme="light"] {
  color-scheme: light;
  --bg: #f1f4f9;
  --bg-alt: #ffffff;
  --surface: #ffffff;
  --surface-alt: #eef2f8;
  --input-bg: #ffffff;
  --border: #d7dee9;
  --border-strong: #b9c4d4;
  --text: #111b2b;
  --text-muted: #56677f;
  --text-faint: #8794a7;
  --primary: #01428b;
  --primary-hover: #0a569f;
  --primary-pressed: #013367;
  --danger: #c0272d;
  --danger-bg: #fdecec;
  --success: #1e7b34;
  --success-bg: #e8f6ec;
  --warning: #8a6100;
  --warning-bg: #fdf4e0;
  --selection: #dce8f8;
  --gauge-track: #dce3ed;
  --gauge-tick: #a9b5c6;
  --avatar-bg: #9aa3af;
  --avatar-fg: #ffffff;
  --shadow: 0 18px 46px rgba(26, 43, 60, 0.22);
  --shadow-soft: 0 6px 18px rgba(26, 43, 60, 0.12);
  --danger-border: rgba(192, 39, 45, 0.4);
  --success-border: rgba(30, 123, 52, 0.4);
  --warning-border: rgba(138, 97, 0, 0.35);
  --glow: rgba(1, 66, 139, 0.12);

  --nav-bg: #01428b;
  --nav-fg: #ffffff;
  --nav-fg-muted: rgba(255, 255, 255, 0.78);
  --nav-hover: rgba(255, 255, 255, 0.14);
  --nav-active-bg: #ffffff;
  --nav-active-fg: #01428b;
  --nav-border: rgba(255, 255, 255, 0.18);
  --nav-width: 250px;
}

*,
*::before,
*::after {
  box-sizing: border-box;
}

[hidden] {
  display: none !important;
}

html,
body {
  margin: 0;
  padding: 0;
  min-height: 100%;
}

html {
  overscroll-behavior: none;
}

body {
  background: var(--bg);
  color: var(--text);
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto,
    "Helvetica Neue", Arial, sans-serif;
  font-size: 15px;
  line-height: 1.45;
  -webkit-font-smoothing: antialiased;
  -webkit-text-size-adjust: 100%;
  transition: background-color 180ms ease, color 180ms ease;
}

::selection {
  background: var(--selection);
}

.sprite {
  position: absolute;
  width: 0;
  height: 0;
  overflow: hidden;
}

.icon {
  width: 22px;
  height: 22px;
  flex: 0 0 auto;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.8;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.app {
  min-height: 100vh;
  min-height: 100dvh;
  display: flex;
  flex-direction: column;
}

.screen {
  flex: 1 1 auto;
  display: flex;
  flex-direction: column;
  min-height: 0;
}

.muted {
  color: var(--text-muted);
}

.screen--login {
  align-items: stretch;
  justify-content: stretch;
  background: var(--bg);
}

/*
  Deux panneaux : le formulaire à gauche, la vitrine bleue à droite.

  Le panneau de gauche garde une largeur fixe, même sur un grand écran : un
  champ de connexion étiré sur 1 000 px se remplit mal, et l'œil du visiteur y
  perd le bouton. Le reste de la largeur va à la vitrine, qui n'attend aucune
  saisie.
*/
.login {
  flex: 1 1 auto;
  display: grid;
  grid-template-columns: minmax(0, 460px) minmax(0, 1fr);
  min-height: 0;
}

.login__panel {
  display: grid;
  place-items: center;
  padding: calc(26px + env(safe-area-inset-top))
    calc(24px + env(safe-area-inset-right))
    calc(26px + env(safe-area-inset-bottom))
    calc(24px + env(safe-area-inset-left));
  background: var(--surface);
  border-right: 1px solid var(--border);
  overflow-y: auto;
}

.login__aside {
  display: grid;
  align-content: center;
  justify-items: center;
  gap: 12px;
  padding: 40px 32px;
  background: var(--nav-bg);
  color: var(--nav-fg);
  text-align: center;
}

.login__aside-logo {
  width: 72px;
  height: 72px;
  border-radius: 20px;
  background: #ffffff;
  padding: 4px;
}

.login__aside-title {
  margin: 6px 0 0;
  font-size: 22px;
  font-weight: 700;
}

.login__aside-text {
  margin: 0;
  max-width: 34ch;
  color: var(--nav-fg-muted);
  font-size: 15px;
  line-height: 1.6;
}

.login__aside-note {
  margin: 10px 0 0;
  max-width: 34ch;
  padding: 12px 16px;
  border: 1px solid var(--nav-border);
  border-radius: var(--radius);
  color: var(--nav-fg-muted);
  font-size: 13px;
  line-height: 1.55;
}

.login-card {
  width: 100%;
  max-width: 372px;
  text-align: center;
}

.login-card__logo {
  width: 84px;
  height: 84px;
  border-radius: 22px;
  background: #ffffff;
  padding: 4px;
  box-shadow: var(--shadow-soft);
}

.login-card__title {
  margin: 14px 0 2px;
  font-size: 26px;
  letter-spacing: 0.02em;
}

.login-card__sub {
  margin: 0;
  color: var(--text-muted);
  font-size: 14px;
}

.login-card__welcome {
  margin: 22px 0 14px;
  padding-top: 18px;
  border-top: 1px solid var(--border);
  font-size: 18px;
  text-align: left;
}

.login-form {
  display: grid;
  gap: 14px;
  text-align: left;
}

.login-card__remember {
  display: flex;
  align-items: center;
  gap: 10px;
  min-height: var(--tap);
  cursor: pointer;
}

.login-card__foot {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 7px;
  margin: 22px 0 0;
  color: var(--text-faint);
  font-size: 12px;
}

.login-card__foot-icon {
  width: 15px;
  height: 15px;
}

.login-card__hint {
  margin: -4px 0 0;
  color: var(--text-muted);
  font-size: 13px;
  line-height: 1.5;
  text-align: left;
}

/* Le champ mot de passe et son œil, alignés sur la même ligne. */
.input-with-eye {
  position: relative;
  display: block;
}

/*
  Élément plutôt que classe : la règle de base ``.input`` doit rester la
  PREMIÈRE du fichier à porter ce nom, sinon l'audit de la cible tactile et du
  zoom iOS lit la mauvaise règle — et laisse passer une régression réelle.
*/
.input-with-eye input {
  padding-right: 48px;
}

.input-eye {
  position: absolute;
  right: 4px;
  top: 50%;
  transform: translateY(-50%);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  padding: 0;
  background: transparent;
  border: 0;
  border-radius: 50%;
  color: var(--text-muted);
  cursor: pointer;
}

.input-eye:hover {
  background: var(--surface-alt);
  color: var(--text);
}

.input-eye:focus-visible {
  outline: 2px solid var(--primary);
  outline-offset: 1px;
}

.field {
  display: grid;
  gap: 6px;
  min-width: 0;
}

.field__label {
  color: var(--text-muted);
  font-size: 13px;
  font-weight: 600;
}

.input {
  width: 100%;
  min-height: var(--tap);
  padding: 10px 13px;
  background: var(--input-bg);
  color: var(--text);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  font: inherit;
  font-size: 16px;
  appearance: none;
  -webkit-appearance: none;
}

.input::placeholder {
  color: var(--text-faint);
}

.input:focus,
.btn:focus,
.icon-btn:focus,
.link-btn:focus {
  outline: 2px solid var(--primary);
  outline-offset: 2px;
}

.input:disabled {
  opacity: 0.55;
}

.input--select {
  padding-right: 38px;
  background-image: linear-gradient(45deg, transparent 50%, currentColor 50%),
    linear-gradient(135deg, currentColor 50%, transparent 50%);
  background-position: calc(100% - 20px) calc(50% + 1px),
    calc(100% - 14px) calc(50% + 1px);
  background-size: 6px 6px, 6px 6px;
  background-repeat: no-repeat;
}

.input-with-icon {
  position: relative;
  display: block;
}

.input-with-icon .input {
  padding-left: 44px;
}

.input-with-icon__icon {
  position: absolute;
  left: 13px;
  top: 50%;
  transform: translateY(-50%);
  color: var(--text-faint);
  width: 20px;
  height: 20px;
  pointer-events: none;
}

.checkbox {
  width: 26px;
  height: 26px;
  min-width: 26px;
  accent-color: var(--primary);
}

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  min-height: var(--tap);
  padding: 10px 16px;
  border: 1px solid transparent;
  border-radius: var(--radius);
  background: var(--surface-alt);
  color: var(--text);
  font: inherit;
  font-weight: 600;
  cursor: pointer;
  touch-action: manipulation;
  -webkit-tap-highlight-color: transparent;
  transition: background-color 140ms ease, transform 90ms ease, opacity 140ms ease;
}

.btn:active:not(:disabled) {
  transform: scale(0.975);
}

.btn:disabled {
  opacity: 0.5;
  cursor: default;
}

.btn--primary {
  background: var(--primary);
  color: var(--primary-text);
}

.btn--primary:hover:not(:disabled) {
  background: var(--primary-hover);
}

.btn--primary:active:not(:disabled) {
  background: var(--primary-pressed);
}

.btn--ghost {
  background: transparent;
  border-color: var(--border);
  color: var(--text);
}

.btn--ghost:hover:not(:disabled) {
  background: var(--surface-alt);
}

.btn--danger {
  background: var(--danger);
  color: #ffffff;
}

.btn--block {
  width: 100%;
}

.btn--sm {
  min-height: 38px;
  padding: 6px 12px;
  font-size: 14px;
}

.icon-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: var(--tap);
  height: var(--tap);
  padding: 0;
  border: 1px solid var(--border);
  border-radius: 50%;
  background: transparent;
  color: var(--text-muted);
  cursor: pointer;
  touch-action: manipulation;
  -webkit-tap-highlight-color: transparent;
  transition: background-color 140ms ease, color 140ms ease, transform 90ms ease;
}

.icon-btn:hover {
  background: var(--surface-alt);
  color: var(--text);
}

.icon-btn:active {
  transform: scale(0.94);
}

.link-btn {
  justify-self: center;
  background: none;
  border: 0;
  padding: 8px 4px;
  color: var(--primary);
  font: inherit;
  font-size: 14px;
  text-decoration: underline;
  cursor: pointer;
  touch-action: manipulation;
}

.badge {
  display: inline-block;
  padding: 2px 9px;
  border-radius: 999px;
  background: var(--badge-bg, var(--surface-alt));
  color: var(--badge-fg, var(--text-muted));
  font-size: 11.5px;
  font-weight: 700;
  letter-spacing: 0.03em;
  text-transform: uppercase;
  white-space: nowrap;
}

.alert {
  margin: 0;
  padding: 10px 12px;
  border-radius: var(--radius);
  font-size: 14px;
}

.alert--error {
  background: var(--danger-bg);
  border: 1px solid var(--danger-border);
  color: var(--danger);
}

.alert--success {
  background: var(--success-bg);
  border: 1px solid var(--success-border);
  color: var(--success);
}

/*
  La page applicative : une colonne de navigation, puis la zone de travail.

  La grille n'a que deux colonnes et deux lignes, et la colonne de navigation
  les traverse : c'est ce qui lui permet de coller au haut de la fenêtre sur
  toute sa hauteur, pendant que le contenu défile — et c'est toujours LA PAGE
  qui défile, comme avant ce changement, donc aucun panneau n'a eu à bouger.
*/
/*
  ``align-content: start`` n'est pas décoratif : la grille fait la hauteur de
  la fenêtre, et par défaut le navigateur ÉTIRE les rangées automatiques pour
  la remplir. Mesuré sur un iPad : 245 px de vide entre l'en-tête et le
  contenu, la colonne de navigation poussée au milieu de l'écran.
*/
.screen--app {
  display: grid;
  grid-template-columns: var(--nav-width, 250px) minmax(0, 1fr);
  /*
    Les rangées sont DÉCLARÉES, et la seconde prend ce qui reste. Sans cela, et
    parce que la colonne de navigation fait la hauteur de la fenêtre en
    traversant les deux rangées, le navigateur répartissait sa hauteur entre
    elles : mesuré sur un iPad, 227 px de vide entre l'en-tête et le contenu.
  */
  grid-template-rows: auto minmax(0, 1fr);
  align-items: start;
  align-content: start;
}

.screen--app .topbar {
  grid-column: 2;
  grid-row: 1;
}

.screen--app .app-nav {
  grid-column: 1;
  grid-row: 1 / span 2;
}

.screen--app .app-main {
  grid-column: 2;
  grid-row: 2;
  display: flex;
  flex-direction: column;
  min-width: 0;
}

.topbar {
  position: sticky;
  top: 0;
  z-index: 20;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  flex-wrap: wrap;
  padding: calc(10px + env(safe-area-inset-top))
    calc(var(--space) + env(safe-area-inset-right)) 10px
    calc(var(--space) + env(safe-area-inset-left));
  background: var(--nav-bg);
  color: var(--nav-fg);
  border-bottom: 1px solid var(--nav-border);
}

.topbar__brand {
  display: flex;
  align-items: center;
  gap: 11px;
  min-width: 0;
}

.topbar__logo {
  width: 38px;
  height: 38px;
  border-radius: 11px;
  background: #ffffff;
  padding: 2px;
  flex: 0 0 auto;
}

.topbar__titles {
  display: grid;
  min-width: 0;
}

.topbar__school {
  font-size: 16px;
  line-height: 1.2;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.topbar__sub {
  color: var(--nav-fg-muted);
  font-size: 12px;
  letter-spacing: 0.02em;
}

.topbar__actions {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
}

.topbar__user {
  display: flex;
  align-items: center;
  gap: 9px;
  min-width: 0;
  padding: 5px 12px 5px 14px;
  border-radius: 999px;
  background: var(--nav-hover);
}

.topbar__user-name {
  font-size: 14px;
  max-width: 38vw;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.topbar .icon-btn {
  color: var(--nav-fg);
}

.topbar .icon-btn:hover {
  background: var(--nav-hover);
  color: var(--nav-fg);
}

.topbar__signout {
  color: var(--nav-fg);
  border-color: var(--nav-border);
}

.topbar__signout:hover {
  background: var(--nav-hover);
  color: var(--nav-fg);
}

.banner {
  display: flex;
  align-items: center;
  gap: 10px;
  margin: 0;
  padding: 10px calc(var(--space) + env(safe-area-inset-right)) 10px
    calc(var(--space) + env(safe-area-inset-left));
  font-size: 14px;
}

.banner--warning {
  background: var(--warning-bg);
  color: var(--warning);
  border-bottom: 1px solid var(--warning-border);
}

.banner--info {
  background: var(--selection);
  color: var(--text);
  border-bottom: 1px solid var(--border);
  font-size: 13px;
  justify-content: center;
  text-align: center;
}

.banner--success {
  background: var(--success-bg);
  color: var(--success);
  border-bottom: 1px solid var(--success-border);
}

.banner--pending {
  background: var(--selection);
  color: var(--text);
  border-bottom: 1px solid var(--border-strong);
}

.banner__text {
  flex: 1 1 auto;
}

.banner .btn {
  background: transparent;
  border-color: currentColor;
  color: inherit;
}

.toolbar {
  display: flex;
  align-items: flex-end;
  gap: 12px;
  flex-wrap: wrap;
  padding: 12px calc(var(--space) + env(safe-area-inset-right)) 12px
    calc(var(--space) + env(safe-area-inset-left));
  background: var(--bg-alt);
  border-bottom: 1px solid var(--border);
}

.field--inline {
  gap: 4px;
}

.field--inline .field__label {
  font-size: 12px;
}

.field--inline .input {
  min-width: 150px;
}

.field--grow {
  flex: 1 1 220px;
  min-width: 180px;
}

.field--check {
  display: flex;
  align-items: center;
  gap: 9px;
  min-height: var(--tap);
  align-self: flex-end;
}

.icon--alert {
  color: var(--warning);
}

.toolbar__actions {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
  margin-left: auto;
}

.content {
  flex: 1 1 auto;
  padding: var(--space) calc(var(--space) + env(safe-area-inset-right))
    calc(28px + env(safe-area-inset-bottom))
    calc(var(--space) + env(safe-area-inset-left));
}

.state {
  margin: 32px auto;
  max-width: 520px;
  text-align: center;
  color: var(--text-muted);
  font-size: 15px;
}

.state--error {
  color: var(--danger);
}

.grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(168px, 1fr));
  gap: 12px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.grid__item {
  display: flex;
  min-width: 0;
}

.card {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 5px;
  width: 100%;
  padding: 16px 10px 13px;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  color: inherit;
  font: inherit;
  text-align: center;
  cursor: pointer;
  touch-action: manipulation;
  -webkit-tap-highlight-color: transparent;
  transition: border-color 140ms ease, transform 90ms ease, background-color 140ms ease;
}

.card:hover {
  border-color: var(--border-strong);
}

.card:active {
  transform: scale(0.98);
  background: var(--surface-alt);
}

.card:focus-visible {
  outline: 2px solid var(--primary);
  outline-offset: 2px;
}

.card__avatar-wrap {
  position: relative;
  width: 76px;
  height: 76px;
  margin-bottom: 5px;
}

.avatar {
  display: grid;
  place-items: center;
  width: 100%;
  height: 100%;
  border-radius: 50%;
  overflow: hidden;
  background: var(--avatar-bg);
  color: var(--avatar-fg);
  font-size: 30px;
  font-weight: 700;
  user-select: none;
  -webkit-user-select: none;
}

.avatar__img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.avatar--placeholder {
  border: 1px dashed rgba(255, 255, 255, 0.45);
}

.card__avatar-wrap > .card__gauge {
  position: absolute;
  right: -7px;
  bottom: -7px;
  filter: drop-shadow(0 2px 5px rgba(0, 0, 0, 0.28));
}

.card__name {
  width: 100%;
  font-size: 14.5px;
  font-weight: 700;
  letter-spacing: 0.01em;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.card__firstname {
  width: 100%;
  color: var(--text-muted);
  font-size: 13.5px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  margin-bottom: 3px;
}

.card__meta {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: 1px 6px;
  max-width: 100%;
  font-size: 11.5px;
  line-height: 1.3;
  color: var(--text-faint);
}

.card__state {
  font-weight: 700;
  color: var(--band-color, var(--text-muted));
}

.gauge {
  display: block;
  flex: 0 0 auto;
  max-width: 100%;
  height: auto;
  aspect-ratio: 1 / 1;
}

.gauge__track {
  fill: none;
  stroke: var(--gauge-track);
  stroke-linecap: round;
}

.gauge__value {
  fill: none;
  stroke-linecap: round;
  transition: stroke-dashoffset 620ms cubic-bezier(0.22, 0.61, 0.36, 1),
    stroke 260ms ease;
}

.gauge__tick {
  stroke: var(--gauge-tick);
  stroke-width: 1.4;
}

.gauge__number {
  fill: var(--text);
  font-weight: 800;
  text-anchor: middle;
  dominant-baseline: middle;
}

.gauge__over {
  fill: var(--text-faint);
  font-weight: 700;
  text-anchor: middle;
}

.gauge--compact .gauge__number {
  fill: var(--band-color, var(--text));
}

.gauge-host {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
}

.gauge-host__note {
  font-size: 12.5px;
  color: var(--text-faint);
  text-align: center;
}

.gauge-host__state {
  font-size: 15px;
  font-weight: 700;
  letter-spacing: 0.03em;
  line-height: 1.2;
  text-align: center;
  text-transform: uppercase;
  color: var(--band-color, var(--text-muted));
  overflow-wrap: anywhere;
}

@media (prefers-reduced-motion: no-preference) {
  .gauge--critical {
    animation: gauge-pulse 2.1s ease-in-out infinite;
  }
}

@keyframes gauge-pulse {
  0%,
  100% {
    opacity: 1;
  }
  50% {
    opacity: 0.62;
  }
}

@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: 0.001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.001ms !important;
  }
}

.sheet {
  position: fixed;
  inset: 0;
  z-index: 60;
  display: flex;
  align-items: center;
  justify-content: center;
}

.sheet__backdrop {
  position: absolute;
  inset: 0;
  background: rgba(6, 10, 16, 0.62);
  -webkit-backdrop-filter: blur(3px);
  backdrop-filter: blur(3px);
}

.sheet__panel {
  position: relative;
  display: flex;
  flex-direction: column;
  width: calc(100% - 2 * var(--space));
  max-width: 860px;
  max-height: 92vh;
  max-height: min(92vh, 92dvh);
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow);
  overflow: hidden;
}

.sheet__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 12px 12px 12px 18px;
  border-bottom: 1px solid var(--border);
  background: var(--bg-alt);
}

.sheet__title {
  margin: 0;
  font-size: 17px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.sheet__body {
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
  overscroll-behavior: contain;
  padding: 16px
    calc(16px + env(safe-area-inset-right))
    calc(16px + env(safe-area-inset-bottom))
    calc(16px + env(safe-area-inset-left));
  display: grid;
  gap: 18px;
}

.sheet__identity {
  display: grid;
  gap: 16px;
  justify-items: center;
  text-align: center;
  align-content: start;
}

.sheet__right {
  display: grid;
  gap: 18px;
  min-width: 0;
}

.sheet__avatar {
  width: 104px;
  height: 104px;
  font-size: 40px;
}

.sheet__who {
  display: grid;
  gap: 3px;
  justify-items: center;
}

.sheet__who strong {
  font-size: 19px;
}

.sheet__meta {
  display: flex;
  flex-wrap: wrap;
  gap: 6px 10px;
  justify-content: center;
  color: var(--text-muted);
  font-size: 13px;
}

.section {
  display: grid;
  gap: 10px;
}

.section__title {
  margin: 0;
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 14px;
  font-weight: 700;
  letter-spacing: 0.02em;
  text-transform: uppercase;
  color: var(--text-muted);
}

.section__count {
  font-weight: 600;
  text-transform: none;
  letter-spacing: 0;
  color: var(--text-faint);
}

.panel {
  background: var(--bg-alt);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 14px;
}

.history {
  display: grid;
  gap: 9px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.history__item {
  display: grid;
  gap: 4px;
  padding: 11px 12px;
  background: var(--bg-alt);
  border: 1px solid var(--border);
  border-left: 3px solid var(--band-color, var(--border-strong));
  border-radius: var(--radius);
}

.history__top {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 10px;
}

.history__motif {
  font-weight: 700;
  font-size: 14.5px;
}

.history__delta {
  font-weight: 800;
  font-size: 14px;
  color: var(--band-color, var(--text-muted));
  white-space: nowrap;
}

.history__details {
  font-size: 13.5px;
  color: var(--text-muted);
  word-break: break-word;
}

.history__foot {
  display: flex;
  flex-wrap: wrap;
  gap: 4px 12px;
  font-size: 12px;
  color: var(--text-faint);
}

.form {
  display: grid;
  gap: 12px;
}

.form__row {
  display: grid;
  gap: 12px;
}

@media (min-width: 620px) {
  .form__row--split {
    grid-template-columns: 1fr 1fr;
  }
}

textarea.input {
  min-height: 92px;
  resize: vertical;
  line-height: 1.45;
  padding: 11px 13px;
}

.stepper {
  display: flex;
  align-items: center;
  gap: 10px;
}

.stepper__value {
  width: 76px;
  text-align: center;
  font-size: 17px;
  font-weight: 700;
}

.stepper__unit {
  color: var(--text-muted);
  font-size: 13px;
}

.bonus-hint {
  display: flex;
  align-items: center;
  gap: 9px;
  min-height: var(--tap);
}

.form__actions {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
}

.form__actions .btn:not(.btn--sm) {
  flex: 1 1 auto;
}

.sheet--confirm {
  z-index: 80;
}

.sheet__panel--confirm {
  max-width: 440px;
}

.confirm__message {
  margin: 0;
  font-size: 15px;
  color: var(--text);
}

.confirm__actions {
  justify-content: flex-end;
}

@media (min-width: 860px) {
  .sheet__body--split {
    grid-template-columns: 300px 1fr;
    align-items: start;
  }

  .sheet__identity {
    position: sticky;
    top: 0;
  }
}

.toast-host {
  position: fixed;
  left: 50%;
  bottom: calc(18px + env(safe-area-inset-bottom));
  transform: translateX(-50%);
  z-index: 90;
  display: grid;
  gap: 8px;
  width: min(92vw, 460px);
  pointer-events: none;
}

.toast {
  padding: 11px 14px;
  border-radius: var(--radius);
  border: 1px solid var(--border);
  background: var(--surface);
  box-shadow: var(--shadow-soft);
  font-size: 14px;
  text-align: center;
  animation: toast-in 160ms ease-out;
}

.toast--success {
  background: var(--success-bg);
  border-color: var(--success-border);
  color: var(--success);
}

.toast--error {
  background: var(--danger-bg);
  border-color: var(--danger-border);
  color: var(--danger);
}

@keyframes toast-in {
  from {
    opacity: 0;
    transform: translateY(8px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

@media (max-width: 620px) {
  .toolbar {
    align-items: stretch;
  }

  .toolbar__actions {
    margin-left: 0;
  }

  .topbar__user {
    max-width: 38vw;
  }

  .grid {
    grid-template-columns: repeat(auto-fill, minmax(148px, 1fr));
  }
}

@media (min-width: 900px) and (orientation: landscape) {
  .grid {
    grid-template-columns: repeat(auto-fill, minmax(178px, 1fr));
    gap: 14px;
  }
}

@media (hover: none) {
  .card:hover {
    border-color: var(--border);
  }

  .icon-btn:hover {
    background: transparent;
    color: var(--text-muted);
  }
}

/*
  La colonne de navigation.

  Elle est collée (`sticky`) et mesure la hauteur de la fenêtre : le contenu peut
  faire dix écrans de haut, « Notes » reste à sa place. Le défilement interne
  n'apparaît que si le nombre d'entrées dépasse la hauteur — c'est ce qui
  protège un écran de portable, où la barre latérale est courte.
*/
.app-nav {
  position: sticky;
  top: 0;
  align-self: start;
  display: flex;
  flex-direction: column;
  gap: 4px;
  width: var(--nav-width, 250px);
  height: 100dvh;
  padding: calc(12px + env(safe-area-inset-top)) 10px
    calc(16px + env(safe-area-inset-bottom));
  background: var(--nav-bg);
  border-right: 1px solid var(--nav-border);
  overflow-y: auto;
  scrollbar-width: thin;
  scrollbar-color: var(--nav-border) transparent;
  -webkit-overflow-scrolling: touch;
}

.app-nav .tab {
  display: flex;
  align-items: center;
  gap: 11px;
  min-height: 44px;
  padding: 9px 13px;
  background: transparent;
  border: 0;
  border-radius: 999px;
  color: var(--nav-fg-muted);
  font: inherit;
  font-size: 15px;
  font-weight: 600;
  text-align: left;
  cursor: pointer;
  touch-action: manipulation;
  -webkit-tap-highlight-color: transparent;
  transition: background-color 140ms ease, color 140ms ease;
}

.app-nav .tab:hover {
  background: var(--nav-hover);
  color: var(--nav-fg);
}

.app-nav .tab[aria-selected="true"] {
  background: var(--nav-active-bg);
  color: var(--nav-active-fg);
  box-shadow: var(--shadow-soft);
}

.app-nav .tab:focus-visible {
  outline: 2px solid var(--nav-active-bg);
  outline-offset: 2px;
}

.tab__label {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.tab__badge {
  display: inline-flex;
  align-items: center;
  margin-left: auto;
  padding: 3px 9px;
  border-radius: 999px;
  background: var(--warning);
  color: #1b1405;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.02em;
  white-space: nowrap;
}

.screen--app[data-view="attendance"] .students-only {
  display: none;
}

.attendance {
  display: flex;
  flex-direction: column;
  gap: 14px;
  max-width: 900px;
  margin: 0 auto;
}

.attendance .banner {
  padding: 12px 14px;
  border: 1px solid transparent;
  border-radius: var(--radius);
  align-items: flex-start;
}

.attendance .banner--warning {
  border-color: var(--warning-border);
}

.attendance .banner--success {
  border-color: var(--success-border);
}

.attendance .banner--pending {
  border-color: var(--border-strong);
}

.attendance .banner .icon {
  margin-top: 1px;
}

.attendance__toolbar {
  display: flex;
  align-items: flex-end;
  flex-wrap: wrap;
  gap: 12px;
}

.attendance__quick {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
}

.attendance__footer {
  display: flex;
}

.attendance-list {
  display: flex;
  flex-direction: column;
  gap: 8px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.attendance-row {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 12px;
  padding: 10px 12px;
  background: var(--surface);
  border: 1px solid var(--border);
  border-left: 4px solid var(--row-color, var(--border));
  border-radius: var(--radius);
}

.attendance-row[data-status="present"] {
  --row-color: var(--success);
}

.attendance-row[data-status="absent"] {
  --row-color: var(--danger);
}

.attendance-row[data-status="retard"] {
  --row-color: var(--warning);
}

.attendance-row[data-status="exclu"] {
  --row-color: var(--primary);
}

.attendance-row__id {
  display: flex;
  align-items: center;
  gap: 10px;
  flex: 1 1 170px;
  min-width: 0;
}

.attendance-row__name {
  font-weight: 600;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.avatar--row {
  flex: 0 0 auto;
  width: 44px;
  height: 44px;
  font-size: 18px;
}

.attendance-row__picker {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  flex: 2 1 300px;
}

.status-chip {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 7px;
  flex: 1 1 auto;
  min-width: 78px;
  min-height: var(--tap);
  padding: 0 12px;
  background: var(--surface-alt);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  color: var(--text-muted);
  font: inherit;
  font-size: 14px;
  font-weight: 600;
  cursor: pointer;
  touch-action: manipulation;
  -webkit-tap-highlight-color: transparent;
  transition: background-color 130ms ease, border-color 130ms ease, color 130ms ease;
}

.status-chip--ok {
  --tone-color: var(--success);
  --tone-bg: var(--success-bg);
}

.status-chip--danger {
  --tone-color: var(--danger);
  --tone-bg: var(--danger-bg);
}

.status-chip--warn {
  --tone-color: var(--warning);
  --tone-bg: var(--warning-bg);
}

.status-chip--info {
  --tone-color: var(--primary);
  --tone-bg: var(--selection);
}

.status-chip.is-on {
  background: var(--tone-bg);
  border-color: var(--tone-color);
  color: var(--tone-color);
}

.status-chip:active {
  transform: scale(0.98);
}

.status-chip:focus-visible {
  outline: 2px solid var(--primary);
  outline-offset: 2px;
}

.status-chip__short {
  font-weight: 800;
  font-size: 15px;
  opacity: 0.7;
}

.status-chip__label {
  white-space: nowrap;
}

.attendance-row__late {
  display: flex;
  align-items: center;
  gap: 8px;
  flex: 1 1 100%;
  padding-top: 4px;
  border-top: 1px dashed var(--border);
}

.input--minutes {
  width: 104px;
  min-width: 104px;
  text-align: center;
  font-size: 16px;
}

.attendance-history {
  display: flex;
  flex-direction: column;
  gap: 10px;
  margin-top: 8px;
}

.attendance-history__title {
  display: flex;
  align-items: center;
  gap: 8px;
  margin: 0;
  font-size: 16px;
  font-weight: 700;
  color: var(--text);
}

.attendance-history__list {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
  gap: 10px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.attendance-history__button {
  display: flex;
  flex-direction: column;
  gap: 5px;
  width: 100%;
  min-height: var(--tap);
  padding: 12px;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  color: inherit;
  font: inherit;
  text-align: left;
  cursor: pointer;
  touch-action: manipulation;
  -webkit-tap-highlight-color: transparent;
}

.attendance-history__button:active {
  background: var(--surface-alt);
}

.attendance-history__button:focus-visible {
  outline: 2px solid var(--primary);
  outline-offset: 2px;
}

.attendance-history__item--alert .attendance-history__button {
  border-left: 4px solid var(--warning);
}

.attendance-history__head {
  display: flex;
  align-items: baseline;
  gap: 8px;
  font-size: 15px;
}

.attendance-history__summary {
  font-size: 13.5px;
  color: var(--text-muted);
}

.attendance-history__meta {
  font-size: 12.5px;
  color: var(--text-faint);
}

.attendance-history__empty {
  grid-column: 1 / -1;
  color: var(--text-faint);
  font-size: 14px;
}

.screen--app[data-view="timetable"] .toolbar,
.screen--app[data-view="messages"] .toolbar,
.screen--app[data-view="space"] .toolbar,
.screen--app[data-view="dashboard"] .toolbar,
.screen--app[data-view="quizzes"] .toolbar,
.screen--app[data-view="correspondence"] .toolbar,
.screen--app[data-view="bulletins"] .toolbar,
.screen--app[data-view="admin"] .toolbar {
  display: none;
}

.panel--timetable,
.panel--messages,
.panel--documents,
.panel--space,
.panel--bulletins,
.panel--admin,
.panel--homework,
.panel--grades,
.panel--dashboard,
.panel--quizzes,
.panel--correspondence {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 14px;
  padding: 14px calc(var(--space) + env(safe-area-inset-right)) 20px
    calc(var(--space) + env(safe-area-inset-left));
}

.panel__body {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 14px;
}

.panel__bar {
  display: flex;
  align-items: flex-end;
  flex-wrap: wrap;
  gap: 12px;
}

.panel__form {
  display: grid;
  gap: 12px;
  padding: 14px;
  background: var(--bg-alt);
  border: 1px solid var(--border);
  border-radius: var(--radius);
}

.panel__form-title {
  margin: 0;
  font-size: 16px;
}

.form-row {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
}

.stack {
  display: grid;
  gap: 12px;
}

.inline-form {
  display: flex;
  align-items: flex-end;
  gap: 10px;
}

.timetable__scroll {
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  min-width: 0;
}

.timetable__grid {
  --tt-head: 34px;
  --track-height: clamp(1008px, 92vh, 1240px);
  display: grid;
  grid-template-columns: 58px var(--day-tracks, repeat(6, minmax(118px, 1fr)));
  gap: 8px;
  min-width: var(--grid-min-width, 1320px);
}

.timetable__hours {
  display: grid;
  grid-template-rows: auto 1fr;
  min-width: 0;
  position: sticky;
  left: 0;
  z-index: 3;
  background: var(--bg-alt);
}

.timetable__hours-head {
  height: var(--tt-head);
}

.timetable__hours-list {
  display: grid;
  grid-template-rows: repeat(var(--grid-hours, 12), 1fr);
  height: var(--track-height);
}

.timetable__hour {
  align-self: start;
  padding: 2px 8px 0 0;
  color: var(--text-faint);
  font-size: 12px;
  font-variant-numeric: tabular-nums;
  text-align: right;
}

.timetable__day {
  display: grid;
  grid-template-rows: auto 1fr;
  background: var(--bg-alt);
  border-radius: var(--radius);
  overflow: hidden;
  box-shadow: inset 0 0 0 1px var(--border);
}

.timetable__day.is-selected {
  box-shadow:
    inset 0 0 0 1px var(--primary),
    0 0 0 1px var(--primary);
}

.timetable__day-title {
  display: flex;
  align-items: center;
  justify-content: center;
  height: var(--tt-head);
  margin: 0;
  padding: 0 10px;
  background: var(--surface);
  box-shadow: inset 0 -1px 0 var(--border);
  font-size: 13px;
  font-weight: 700;
  text-align: center;
}

.timetable__track {
  position: relative;
  height: var(--track-height);
  background-image: repeating-linear-gradient(
    to bottom,
    var(--border) 0,
    var(--border) 1px,
    transparent 1px,
    transparent calc(100% / var(--grid-hours, 12))
  );
}

.slot {
  position: absolute;
  top: var(--slot-top, 0%);
  height: var(--slot-height, 0%);
  left: 4px;
  right: 4px;
  display: flex;
  flex-direction: column;
  gap: 2px;
  padding: 6px 8px;
  background: var(--surface-alt);
  border: 1px solid var(--border-strong);
  border-left: 4px solid var(--slot-color, var(--primary));
  border-radius: var(--radius-sm);
  overflow: hidden;
  text-align: left;
}

.slot--laned {
  right: auto;
  left: calc(5.5px + var(--slot-lane, 0) * (100% - 8px) / var(--slot-lanes, 1));
  width: calc((100% - 8px) / var(--slot-lanes, 1) - 3px);
}

.slot--laned {
  padding: 4px 5px;
  border-left-width: 3px;
}

.slot--laned .slot__subject {
  font-size: 12px;
}

.slot--laned .slot__meta {
  font-size: 10px;
}

.slot--past {
  opacity: 0.62;
}

.slot--current {
  border-color: var(--primary);
  box-shadow: 0 0 0 2px var(--glow);
}

.slot--cancelled {
  opacity: 0.72;
  border-style: dashed;
  background-image: repeating-linear-gradient(
    -45deg,
    transparent 0 6px,
    var(--surface-alt) 6px 12px
  );
}

.slot--cancelled .slot__subject,
.slot--cancelled .slot__time {
  text-decoration: line-through;
  text-decoration-thickness: 2px;
}

.slot__cancelled {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 4px;
  margin: 0;
  min-width: 0;
}

.slot__cancelled-badge {
  flex: 0 0 auto;
  padding: 1px 6px;
  border-radius: 999px;
  background: var(--danger);
  color: #fff;
  font-size: 9px;
  font-weight: 800;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  text-decoration: none;
}

.slot__cancelled-reason {
  min-width: 0;
  font-size: 10px;
  color: var(--text-muted);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.slot--extra {
  border-style: dotted;
  border-width: 2px;
  border-color: var(--purple);
  box-shadow: inset 3px 0 0 var(--purple);
}

.slot--extra .slot__subject {
  font-weight: 700;
}

.slot__extra {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 4px;
  margin: 0;
  min-width: 0;
}

.slot__extra-badge {
  flex: 0 0 auto;
  padding: 1px 6px;
  border-radius: 999px;
  background: var(--purple);
  color: #fff;
  font-size: 9px;
  font-weight: 800;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}

.slot__extra-reason {
  min-width: 0;
  font-size: 10px;
  color: var(--text-muted);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.slot__head {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 2px 6px;
  min-width: 0;
}

.slot__time {
  flex: 1 0 auto;
  min-height: 1.25em;
  min-width: 0;
  font-size: 11px;
  font-variant-numeric: tabular-nums;
  color: var(--text-muted);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.slot__tools {
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-end;
  gap: 2px;
  margin-left: auto;
}

.slot__tools .icon-btn {
  width: 22px;
  height: 22px;
  min-width: 0;
  min-height: 0;
}

.slot--short .slot__actions {
  margin-top: 2px;
}

.slot--short .slot__actions .btn {
  min-height: 24px;
  padding: 0 8px;
  font-size: 11px;
}

.slot__group,
.slot__week {
  /* Le groupe vise le cours. Sans cette ligne, un élève des LV1 verrait le
     cours des LV2 dans SON emploi du temps, sans comprendre pourquoi il y est. */
  flex: 0 0 auto;
  margin-top: 1px;
  padding: 0 6px;
  border-radius: 999px;
  background: color-mix(in srgb, currentColor 18%, transparent);
  font-size: 10.5px;
  font-weight: 700;
  line-height: 1.6;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.slot__week {
  background: color-mix(in srgb, currentColor 9%, transparent);
  letter-spacing: 0.02em;
}

.slot__subject {
  flex: 0 0 auto;
  min-height: 1.2em;
  font-size: 13px;
  font-weight: 700;
  line-height: 1.2;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.slot__meta {
  flex: 0 0 auto;
  min-height: 1.2em;
  font-size: 11px;
  color: var(--text-muted);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.slot--short {
  padding: 4px 6px;
  gap: 1px;
}

.slot--short .slot__head {
  min-height: 15px;
}

.slot--short .slot__tools .icon-btn {
  width: 22px;
  height: 22px;
  min-width: 0;
  min-height: 0;
}

.slot--short .slot__subject {
  font-size: 12.5px;
  line-height: 1.15;
}

.slot--short .slot__meta {
  font-size: 10px;
  line-height: 1.15;
}

.slot--laned.slot--short .slot__tools .icon-btn {
  width: 20px;
  height: 20px;
  min-width: 0;
  min-height: 0;
}

.slot--micro .slot__meta {
  font-size: 9.5px;
}

.slot--micro {
  padding: 3px 5px;
}

.slot--micro .slot__head {
  min-height: 0;
}

.slot--micro .slot__time {
  font-size: 10px;
}

.slot--micro .slot__tools .icon-btn {
  width: 22px;
  height: 22px;
  min-width: 0;
  min-height: 0;
}

.slot--micro .slot__tools .icon-btn + .icon-btn {
  display: inline-flex;
}

.slot--micro .slot__subject {
  font-size: 11.5px;
  line-height: 1.1;
}

.slot--cancelled.slot--short .slot__meta {
  font-size: 10px;
}

.slot--laned.slot--short .slot__time {
  font-size: 10px;
}

.slot__actions {
  display: flex;
  gap: 4px;
  margin-top: auto;
}

@media (pointer: coarse) {
  .timetable__grid {
    --track-height: clamp(1152px, 112vh, 1320px);
  }

  .slot {
    padding: 8px 10px;
  }

  .slot__tools .icon-btn {
    width: 30px;
    height: 30px;
  }

  .slot--laned {
    padding: 6px 7px;
  }

  .slot--laned .slot__tools .icon-btn,
  .slot--short .slot__tools .icon-btn,
  .slot--laned.slot--short .slot__tools .icon-btn {
    width: 30px;
    height: 30px;
  }

  .slot--laned.slot--short .slot__time {
    display: block;
  }

  .slot--micro .slot__tools .icon-btn {
    width: 26px;
    height: 26px;
  }
}

.timetable__scroll {
  scroll-snap-type: x proximity;
  scroll-padding-left: 66px;
  overscroll-behavior-x: contain;
}

.timetable__day {
  scroll-snap-align: start;
}

.timetable__grid--single .timetable__day-title {
  font-size: 15px;
}

.mail {
  display: grid;
  gap: 14px;
}

@media (min-width: 860px) {
  .mail {
    grid-template-columns: minmax(0, 340px) minmax(0, 1fr);
    align-items: start;
  }
}

.mail__list,
.mail__view {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 10px;
  min-width: 0;
  padding: 12px;
  background: var(--bg-alt);
  border: 1px solid var(--border);
  border-radius: var(--radius);
}

.mail__list-head {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 10px;
  min-width: 0;
}

.mail__threads,
.mail__messages,
.mail__pending,
.pending {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 8px;
  min-width: 0;
  margin: 0;
  padding: 0;
  list-style: none;
}

.mail__threads > li,
.thread__btn,
.thread__btn > * {
  min-width: 0;
}

.mail__head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 10px;
  padding-bottom: 8px;
  border-bottom: 1px solid var(--border);
}

.mail__title {
  margin: 0;
  font-size: 16px;
}

.thread__btn {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 3px;
  width: 100%;
  min-height: var(--tap);
  padding: 10px 12px;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  color: inherit;
  font: inherit;
  text-align: left;
  cursor: pointer;
  touch-action: manipulation;
  -webkit-tap-highlight-color: transparent;
}

.thread__btn.is-on {
  border-color: var(--primary);
  background: var(--surface-alt);
}

.thread__btn.has-unread .thread__title {
  font-weight: 800;
}

.thread__top {
  display: flex;
  align-items: center;
  gap: 8px;
}

.thread__title {
  flex: 1 1 auto;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.thread__date,
.thread__badge {
  flex: 0 0 auto;
  font-size: 11px;
  color: var(--text-faint);
  font-variant-numeric: tabular-nums;
}

.thread__badge {
  min-width: 20px;
  padding: 2px 7px;
  border-radius: 999px;
  background: var(--primary);
  color: var(--primary-text);
  font-weight: 700;
  text-align: center;
}

.thread__preview {
  font-size: 13px;
  color: var(--text-muted);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.bubble {
  display: grid;
  gap: 5px;
  max-width: 92%;
  padding: 10px 12px;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
}

.bubble--own {
  justify-self: end;
  border-color: var(--primary);
  background: var(--surface-alt);
}

.bubble__meta {
  font-size: 11px;
  color: var(--text-faint);
}

.bubble__text {
  margin: 0;
  white-space: pre-wrap;
  overflow-wrap: anywhere;
}

.bubble__files {
  display: grid;
  gap: 6px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.file {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
  padding: 7px 9px;
  background: var(--bg-alt);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  font-size: 13px;
}

.file__name {
  flex: 1 1 auto;
  overflow-wrap: anywhere;
}

.file__size {
  color: var(--text-faint);
  font-variant-numeric: tabular-nums;
}

.mail__composer {
  display: grid;
  gap: 10px;
  padding-top: 10px;
  border-top: 1px solid var(--border);
}

.pending__item {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 7px 9px;
  background: var(--bg-alt);
  border: 1px dashed var(--border-strong);
  border-radius: var(--radius-sm);
  font-size: 13px;
}

.pending__name {
  flex: 1 1 auto;
  overflow-wrap: anywhere;
}

.space__grid,
.admin__grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 14px;
}

.board__stack {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 26px;
  margin-top: 22px;
}

@media (min-width: 860px) {
  .space__grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .admin__grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    align-items: start;
  }

  .space__grid .card--wide,
  .admin__grid .card--wide {
    grid-column: 1 / -1;
  }
}

.space__grid .card,
.admin__grid .card {
  align-items: stretch;
  gap: 10px;
  padding: 16px;
  text-align: left;
  cursor: default;
}

.space__grid .card:hover,
.admin__grid .card:hover {
  border-color: var(--border);
}

.space__grid .card:active,
.admin__grid .card:active {
  transform: none;
  background: var(--surface);
}

.card__title {
  margin: 0;
  font-size: 15px;
  font-weight: 700;
}

.card--wide {
  align-items: stretch;
  text-align: left;
}

.card--permit {
  border-color: var(--primary);
  box-shadow: inset 0 0 0 1px var(--glow);
}

.card__line {
  margin: 0;
  font-size: 15px;
  font-weight: 600;
}

.card__advice {
  margin: 0;
  font-size: 13px;
  color: var(--text-muted);
}

.permit {
  display: flex;
  align-items: center;
  gap: 16px;
  width: 100%;
}

.permit__text {
  display: grid;
  gap: 4px;
  flex: 1 1 auto;
  min-width: 0;
}

.permit__gauge {
  display: grid;
  gap: 6px;
  justify-items: center;
  flex: 0 0 auto;
}

.permit__gauge .gauge {
  width: 132px;
  height: auto;
}

@media (max-width: 380px) {
  .permit {
    flex-direction: column-reverse;
    align-items: stretch;
  }

  .permit__gauge {
    justify-items: center;
  }
}

.today-list,
.work-list {
  display: grid;
  gap: 2px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.today-row {
  display: flex;
  align-items: baseline;
  gap: 10px;
  padding: 7px 0;
  border-left: 3px solid transparent;
  padding-left: 10px;
}

.today-row + .today-row {
  box-shadow: inset 0 1px 0 var(--border);
}

.today-row--colored {
  border-left-color: var(--slot-color, var(--primary));
}

.today-row__time {
  font-variant-numeric: tabular-nums;
  font-weight: 700;
  font-size: 14px;
  min-width: 48px;
}

.today-row__body {
  display: grid;
  gap: 1px;
  min-width: 0;
}

.today-row__subject {
  font-size: 14px;
  font-weight: 600;
}

.today-row__meta {
  font-size: 12px;
  color: var(--text-muted);
}

.work-row {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 2px 10px;
  padding: 8px 0;
  align-items: baseline;
}

.work-row + .work-row {
  box-shadow: inset 0 1px 0 var(--border);
}

.work-row__subject {
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.02em;
}

.work-row .hw-badge {
  justify-self: end;
}

.work-row__due,
.work-row__title {
  grid-column: 1 / -1;
  font-size: 13px;
}

.work-row__due {
  color: var(--text-muted);
}

.work-row__title {
  font-weight: 600;
}

.balance {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(88px, 1fr));
  gap: 8px;
}

.balance__cell {
  display: grid;
  gap: 2px;
  padding: 9px 11px;
  background: var(--bg-alt);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  text-align: center;
}

.balance__cell--absent,
.balance__cell--exclu {
  border-color: var(--danger-border);
}

.balance__cell--retard {
  border-color: var(--warning-border);
}

.balance__value {
  font-size: 20px;
  font-variant-numeric: tabular-nums;
}

.balance__label {
  font-size: 12px;
  color: var(--text-muted);
}

.balance__note {
  grid-column: 1 / -1;
  margin: 0;
  font-size: 12px;
  color: var(--text-muted);
}

.history__row {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
  padding: 9px 11px;
  background: var(--bg-alt);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  font-size: 13px;
}

.history__row--absent,
.history__row--exclu {
  border-color: var(--danger-border);
}

.history__row--retard {
  border-color: var(--warning-border);
}

.history__date {
  font-variant-numeric: tabular-nums;
  color: var(--text-muted);
}

.history__status {
  flex: 1 1 auto;
}

.history__extra {
  color: var(--warning);
  font-variant-numeric: tabular-nums;
}

.subtabs {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
}

.subtab {
  min-height: 42px;
  padding: 0 14px;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 999px;
  color: var(--text-muted);
  font: inherit;
  font-size: 14px;
  font-weight: 600;
  cursor: pointer;
  touch-action: manipulation;
  -webkit-tap-highlight-color: transparent;
}

.subtab.is-on {
  background: var(--primary);
  border-color: var(--primary);
  color: var(--primary-text);
}

/* Les rubriques du panneau des bulletins : elles séparent quatre TRAVAUX,
   pas quatre disciplines, et le compte dit ce qu'il reste à faire dans
   chacune. Le trait du dessus les distingue des onglets de matière, qui
   suivent juste en dessous et se ressemblent beaucoup. */
.subtabs--rubriques {
  gap: 6px;
  margin: 12px 0 4px;
  padding-bottom: 8px;
  border-bottom: 1px solid var(--border);
}

.subtabs--rubriques .subtab {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  border-top: 2px solid transparent;
}

.subtabs--rubriques .subtab.is-on {
  border-top-color: var(--primary);
}

.subtabs--rubriques .subtab__count {
  min-width: 20px;
  padding: 1px 6px;
  border-radius: 999px;
  background: var(--surface-alt);
  color: var(--text-muted);
  font-size: 11.5px;
  font-weight: 700;
  text-align: center;
}

.subtabs--rubriques .subtab.is-on .subtab__count {
  background: rgba(255, 255, 255, 0.22);
  color: var(--primary-text);
}

.list {
  display: grid;
  gap: 8px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.list__row {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
  padding: 9px 11px;
  background: var(--bg-alt);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
}

.list__label {
  flex: 1 1 auto;
  font-weight: 600;
  overflow-wrap: anywhere;
}

.tag {
  padding: 3px 9px;
  background: var(--surface-alt);
  border: 1px solid var(--border);
  border-radius: 999px;
  color: var(--text-muted);
  font-size: 12px;
  font-weight: 600;
  white-space: nowrap;
}

.tag--warn {
  border-color: var(--warning-border);
  color: var(--warning);
}

.roster {
  display: grid;
  gap: 12px;
}

.roster__class {
  margin: 0 0 6px;
  font-size: 14px;
  color: var(--text-muted);
}

.roster__list {
  display: grid;
  gap: 8px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.roster__row {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
  padding: 8px 10px;
  background: var(--bg-alt);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
}

.roster__row.is-alert {
  border-color: var(--danger-border);
}

.roster__edit-row {
  list-style: none;
}

.roster__edit {
  display: flex;
  flex-direction: column;
  gap: 10px;
  padding: 12px 14px;
  background: var(--bg-alt);
  border: 1px dashed var(--navy);
  border-radius: var(--radius-sm);
  margin: 2px 0;
}

.roster__edit .form-row {
  display: flex;
  gap: 10px;
  flex-wrap: wrap;
}

.roster__edit .field {
  display: flex;
  flex-direction: column;
  gap: 4px;
  min-width: 150px;
  flex: 1 1 150px;
}

.roster__edit .form-actions {
  display: flex;
  gap: 8px;
  justify-content: flex-end;
}

.roster__open {
  display: flex;
  align-items: center;
  gap: 10px;
  flex: 1 1 240px;
  min-height: var(--tap);
  padding: 0;
  background: transparent;
  border: 0;
  color: inherit;
  font: inherit;
  text-align: left;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
}

.roster__name {
  flex: 1 1 auto;
  font-weight: 600;
}

.assignment {
  display: grid;
  gap: 8px;
  padding: 11px 0;
  border-bottom: 1px solid var(--border);
}

.assignment:last-child {
  border-bottom: 0;
}

.assignment__title {
  margin: 0;
  font-size: 14px;
}

.assignment__classes {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
}

.chip {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  min-height: 40px;
  padding: 0 13px;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 999px;
  font-size: 14px;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
}

.chip.is-on {
  background: var(--selection);
  border-color: var(--primary);
}

.color-picker {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
}

.color-swatch,
.subject-dot {
  width: 34px;
  height: 34px;
  border-radius: 50%;
  background: var(--swatch, var(--primary));
  border: 2px solid var(--border);
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
}

.color-swatch.is-on {
  border-color: var(--text);
  transform: scale(1.08);
}

.subject-dot {
  width: 20px;
  height: 20px;
  flex: 0 0 auto;
  cursor: default;
}

.input--area {
  min-height: 88px;
  padding: 10px;
  resize: vertical;
  font-family: inherit;
  line-height: 1.45;
}

.input--sm {
  min-height: 34px;
  padding: 4px 8px;
  font-size: 13px;
}

.input--file {
  min-height: auto;
  padding: 8px;
}

.icon-btn--sm {
  width: 34px;
  height: 34px;
  min-height: 34px;
}

.icon-btn--danger:hover {
  border-color: var(--danger-border);
  color: var(--danger);
}

.icon--sm {
  width: 16px;
  height: 16px;
}

@media (max-width: 760px) {
  .mail__view {
    order: -1;
  }
}

@media (max-width: 560px) {
  .attendance-row__picker {
    flex: 1 1 100%;
  }

  .status-chip {
    flex: 1 1 44%;
  }
}

.profile {
  display: grid;
  gap: 14px;
}

@media (min-width: 860px) {
  .profile {
    grid-template-columns: minmax(280px, 380px) 1fr;
    align-items: start;
  }
}

.profile__head {
  display: flex;
  align-items: center;
  gap: 14px;
  margin-bottom: 10px;
}

.avatar--lg {
  width: 88px;
  height: 88px;
  flex: 0 0 auto;
  font-size: 34px;
}

.profile__name {
  margin: 0;
  font-size: 17px;
  font-weight: 700;
}

.profile__actions {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin: 10px 0;
}

.visually-hidden {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  border: 0;
  overflow: hidden;
  white-space: nowrap;
  clip-path: inset(50%);
}

.attendance__slots,
.attendance__overview {
  display: grid;
  gap: 10px;
}

.attendance__slots-title {
  display: flex;
  align-items: center;
  gap: 8px;
  margin: 0;
  font-size: 14px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--text-muted);
}

.slot-picker {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.slot-picker__item {
  display: flex;
}

.slot-chip {
  display: grid;
  gap: 2px;
  min-height: 62px;
  min-width: 170px;
  padding: 9px 14px;
  background: var(--surface);
  border: 1px solid var(--border);
  border-left-width: 4px;
  border-radius: var(--radius);
  color: var(--text);
  font: inherit;
  text-align: left;
  cursor: pointer;
  touch-action: manipulation;
  -webkit-tap-highlight-color: transparent;
}

.slot-chip--valide {
  border-left-color: var(--success);
}

.slot-chip--a-faire {
  border-left-color: var(--warning);
}

.slot-chip--ferme {
  border-left-color: var(--border-strong);
  color: var(--text-muted);
}

.slot-chip--annule {
  border-left-color: var(--danger);
  color: var(--text-muted);
}

.slot-chip.is-on {
  background: var(--selection);
  border-color: var(--primary);
}

.slot-chip__time {
  font-size: 15px;
  font-weight: 700;
}

.slot-chip__subject {
  font-size: 13px;
  color: var(--text-muted);
}

.slot-chip__state {
  font-size: 12px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.03em;
}

.slot-chip--valide .slot-chip__state {
  color: var(--success);
}

.slot-chip--a-faire .slot-chip__state {
  color: var(--warning);
}

.slot-chip--annule .slot-chip__state {
  color: var(--danger);
}

.slot-chip--annule .slot-chip__subject {
  text-decoration: line-through;
}

.overview {
  display: grid;
  gap: 8px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.overview__item {
  display: grid;
  grid-template-columns: 1fr auto;
  align-items: center;
  gap: 6px 12px;
  padding: 12px 14px;
  background: var(--surface);
  border: 1px solid var(--border);
  border-left: 4px solid var(--success);
  border-radius: var(--radius);
}

.overview__item.is-pending {
  border-left-color: var(--warning);
}

.overview__item.is-cancelled {
  border-left-color: var(--border-strong);
  border-left-style: dashed;
  color: var(--text-muted);
}

.overview__head {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 6px 12px;
  min-width: 0;
}

.overview__class {
  font-weight: 700;
}

.overview__slot,
.overview__subject {
  font-size: 13px;
  color: var(--text-muted);
}

.overview__teacher {
  font-size: 12px;
}

.overview__summary {
  grid-column: 1;
  margin: 0;
  font-size: 13px;
  color: var(--text-muted);
}

.overview__item .btn {
  grid-row: 1 / span 2;
  grid-column: 2;
}

.overview__empty {
  padding: 14px;
  border: 1px dashed var(--border);
  border-radius: var(--radius);
  color: var(--text-muted);
  font-size: 14px;
}

.panel__grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 12px;
}

.panel__actions {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
}

.field--wide {
  grid-column: 1 / -1;
}

.homework {
  display: grid;
  gap: 14px;
}

.homework__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  flex-wrap: wrap;
}

.homework__heading {
  display: grid;
  gap: 2px;
  min-width: 0;
}

.homework__title {
  margin: 0;
  font-size: 17px;
  font-weight: 700;
  letter-spacing: 0.02em;
}

.homework__hint {
  margin: 0;
  font-size: 13px;
  color: var(--text-muted);
  max-width: 70ch;
}

.homework__layout {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 190px;
  gap: 14px;
  align-items: start;
}

.homework__days {
  display: grid;
  gap: 14px;
  min-width: 0;
}

.hw-day {
  display: grid;
  gap: 8px;
  padding: 14px 16px;
  background: var(--surface);
  border: 1px solid var(--border);
  border-left: 4px solid var(--primary);
  border-radius: var(--radius);
}

.hw-day__title {
  margin: 0;
  font-size: 15px;
  font-weight: 700;
  color: var(--primary);
  letter-spacing: 0.02em;
}

.hw-day__list {
  display: grid;
  gap: 6px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.hw-line {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 8px 16px;
  flex-wrap: wrap;
  padding: 5px 0;
}

.hw-line__left {
  display: grid;
  gap: 2px;
  flex: 1 1 auto;
  min-width: 0;
}

.hw-line__row {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 3px 10px;
  min-width: 0;
}

.hw-line__row--quand .hw-line__given {
  font-weight: 600;
  color: var(--text);
}

.hw-line__row--qui {
  gap: 3px 8px;
  font-size: 12.5px;
  color: var(--text-muted);
}

.hw-line__left .hw-line__title {
  font-size: 13.5px;
  font-weight: 600;
  color: var(--text);
}

.hw-line__left .hw-line__details {
  white-space: pre-wrap;
}

.hw-line__subject {
  font-weight: 700;
  font-size: 14px;
  letter-spacing: 0.02em;
}

.hw-line__class {
  padding: 1px 7px;
  border: 1px solid var(--border);
  border-radius: 999px;
  background: var(--surface);
  color: var(--text-muted);
  font-size: 11px;
  font-weight: 700;
  white-space: nowrap;
}

.hw-line__title,
.hw-line__details {
  font-size: 13px;
  color: var(--text-muted);
}

.hw-line__test {
  font-size: 12px;
  font-weight: 700;
  color: var(--pink);
  background: var(--pink-bg);
  border-radius: 999px;
  padding: 2px 9px;
}

.hw-badge {
  font-size: 12px;
  font-weight: 700;
  border-radius: 999px;
  padding: 2px 9px;
  white-space: nowrap;
  border: 1px solid transparent;
}

.hw-badge--late {
  color: var(--danger);
  background: var(--danger-bg);
  border-color: var(--danger-border);
}

.hw-badge--tomorrow {
  color: var(--warning);
  background: var(--warning-bg);
  border-color: var(--warning-border);
}

.hw-badge--week {
  color: var(--text-muted);
  background: var(--surface-alt);
  border-color: var(--border);
}

.hw-badge--later {
  color: var(--text-faint);
  background: transparent;
  border-color: var(--border);
}

.hw-badge--done {
  color: var(--success);
  background: var(--success-bg);
  border-color: var(--success-border);
}

.hw-badge--unknown {
  color: var(--text-faint);
  background: transparent;
}

.hw-line__done {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  min-height: var(--tap);
  padding: 0 10px;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  cursor: pointer;
  font-size: 13px;
  font-weight: 600;
  color: var(--text-muted);
  transition: background-color 140ms ease, border-color 140ms ease, color 140ms ease;
}

.hw-line__done:hover {
  background: var(--surface-alt);
}

.hw-line__done.is-done {
  color: var(--success);
  border-color: var(--success-border);
  background: var(--success-bg);
}

.hw-line__check {
  width: 22px;
  height: 22px;
  min-width: 22px;
}

.hw-line:has(.hw-line__done.is-done) .hw-line__left {
  opacity: 0.62;
}

.hw-line__right {
  display: flex;
  align-items: center;
  gap: 6px;
  margin-left: auto;
}

.hw-line__given {
  font-size: 13px;
  color: var(--text-muted);
  white-space: nowrap;
}

.homework__rail {
  display: grid;
  gap: 6px;
  align-content: start;
  position: sticky;
  top: 12px;
}

.hw-rail__item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  min-height: 44px;
  padding: 6px 12px;
  background: var(--surface-alt);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  color: var(--text);
  font: inherit;
  font-size: 13px;
  cursor: pointer;
  touch-action: manipulation;
  -webkit-tap-highlight-color: transparent;
}

.hw-rail__item.is-on {
  background: var(--selection);
  border-color: var(--primary);
  font-weight: 700;
}

.hw-rail__count {
  min-width: 22px;
  padding: 1px 6px;
  background: var(--bg-alt);
  border-radius: 999px;
  font-size: 12px;
  text-align: center;
  color: var(--text-muted);
}

.segmented {
  display: inline-flex;
  gap: 3px;
  padding: 3px;
  background: var(--surface-alt);
  border: 1px solid var(--border);
  border-radius: 999px;
}

.segmented__btn {
  min-height: 38px;
  padding: 0 16px;
  background: transparent;
  border: 0;
  border-radius: 999px;
  color: var(--text-muted);
  font: inherit;
  font-size: 13px;
  font-weight: 600;
  cursor: pointer;
  touch-action: manipulation;
  -webkit-tap-highlight-color: transparent;
}

.segmented__btn.is-on {
  background: var(--primary);
  color: var(--primary-text);
}

.hw-day__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  flex-wrap: wrap;
}

.lesson-day {
  display: grid;
  gap: 10px;
  padding: 14px 16px;
  background: var(--surface);
  border: 1px solid var(--border);
  border-left: 4px solid var(--primary);
  border-radius: var(--radius);
}

.lesson-day__title {
  margin: 0;
  font-size: 15px;
  font-weight: 700;
  color: var(--primary);
  letter-spacing: 0.02em;
}

.lesson-day__body {
  display: grid;
  gap: 12px;
}

.lesson-item {
  display: grid;
  gap: 8px;
  padding: 10px 12px;
  background: var(--surface-alt);
  border: 1px solid var(--border);
  border-radius: var(--radius);
}

.lesson-item__subject {
  margin: 0;
  font-size: 14px;
  font-weight: 700;
  color: var(--primary);
  text-align: center;
  letter-spacing: 0.04em;
}

.lesson-item__body {
  display: grid;
  gap: 8px;
}

.lesson-chapter {
  display: grid;
  gap: 6px;
}

.lesson-chapter__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
}

.lesson-chapter__title {
  display: flex;
  align-items: baseline;
  flex-wrap: wrap;
  gap: 4px 8px;
  min-width: 0;
}

.lesson-chapter__class {
  padding: 1px 7px;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 999px;
  font-size: 11px;
  font-weight: 700;
  color: var(--text-muted);
  white-space: nowrap;
}

.lesson-chapter__flag {
  padding: 1px 7px;
  border: 1px solid var(--danger);
  border-radius: 999px;
  font-size: 10px;
  font-weight: 800;
  letter-spacing: 0.04em;
  color: var(--danger);
  background: var(--danger-bg);
  white-space: nowrap;
}

.lesson-chapter__flag--later {
  border-color: var(--border);
  color: var(--text-muted);
  background: var(--surface);
  font-weight: 600;
  letter-spacing: 0;
}

.lesson-chapter__tools {
  display: flex;
  gap: 4px;
  flex: 0 0 auto;
}

.lesson-item__title {
  margin: 0;
  font-size: 14px;
  font-weight: 700;
  text-decoration: underline;
  text-underline-offset: 3px;
}

.lesson-item__lines {
  display: grid;
  gap: 4px;
  margin: 0;
  padding-left: 20px;
  font-size: 13px;
  color: var(--text-muted);
}

.lesson-docs {
  display: grid;
  gap: 6px;
  padding-top: 8px;
  border-top: 1px dashed var(--border);
}

.lesson-docs__title {
  margin: 0;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.08em;
  color: var(--text-faint);
}

.lesson-docs__empty {
  margin: 0;
  font-size: 12px;
  color: var(--text-faint);
}

.lesson-docs__list {
  display: grid;
  gap: 4px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.lesson-doc {
  display: flex;
  align-items: center;
  gap: 6px;
}

.lesson-doc__btn {
  display: flex;
  align-items: center;
  gap: 8px;
  flex: 1 1 auto;
  min-height: 44px;
  padding: 6px 12px;
  background: var(--input-bg);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  color: var(--text);
  font: inherit;
  font-size: 13px;
  text-align: left;
  cursor: pointer;
  touch-action: manipulation;
  -webkit-tap-highlight-color: transparent;
}

.lesson-doc__name {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.hw-collect {
  display: grid;
  gap: 8px;
  margin-top: 8px;
  padding: 10px;
  background: var(--bg-alt);
  border: 1px dashed var(--border);
  border-radius: var(--radius-sm);
}

.hw-collect__lead,
.hw-collect__who {
  margin: 0;
  font-size: 13px;
  font-weight: 600;
  color: var(--text);
}

.hw-collect__deposit {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
}

.hw-collect__deposit .input {
  flex: 1 1 220px;
  min-width: 0;
}

.hw-collect__empty {
  margin: 0;
  font-size: 13px;
}

.hw-collect__fold {
  display: grid;
  gap: 8px;
}

.hw-collect__summary {
  cursor: pointer;
  font-size: 13px;
  font-weight: 700;
  color: var(--accent);
  min-height: 44px;
  display: flex;
  align-items: center;
}

.hw-collect__list {
  display: grid;
  gap: 10px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.hw-collect__row {
  display: grid;
  gap: 6px;
  padding: 10px;
  background: var(--input-bg);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
}

.hw-collect__feedback-input {
  min-height: 64px;
}

.hw-collect__actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 10px;
}

.hw-collect__stamp {
  font-size: 12px;
  color: var(--text-muted);
}

.hw-collect__feedback {
  display: grid;
  gap: 4px;
  padding: 8px 10px;
  background: var(--input-bg);
  border-left: 3px solid var(--accent);
  border-radius: var(--radius-sm);
}

.hw-collect__feedback-title {
  margin: 0;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--text-faint);
}

.hw-collect__feedback-text {
  margin: 0;
  font-size: 13px;
  white-space: pre-wrap;
}

.lesson-doc__size {
  margin-left: auto;
  font-size: 12px;
  color: var(--text-faint);
  white-space: nowrap;
}

.grades__sections {
  display: flex;
  justify-content: flex-end;
  flex-wrap: wrap;
  gap: 8px;
}

.grades {
  width: 100%;
  border-collapse: collapse;
  font-size: 14px;
}

.grades th,
.grades td {
  padding: 10px 12px;
  border-bottom: 1px solid var(--border);
  text-align: left;
  vertical-align: top;
}

.grades thead th {
  background: var(--primary);
  color: var(--primary-text);
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 0.05em;
  border-bottom: none;
}

.grades__th-coef,
.grades__th-average,
.grades__th-class,
.grades__coef,
.grades__average,
.grades__class-cell {
  text-align: center;
  width: 96px;
}

.grades__th-class,
.grades__class-cell {
  width: 132px;
}

.grades__class-cell {
  font-variant-numeric: tabular-nums;
}

.grades__class-average {
  display: block;
  font-size: 15px;
  font-weight: 700;
}

.grades__class-range {
  display: block;
  font-size: 11px;
  color: var(--text-muted);
  white-space: nowrap;
}

.grades__position {
  display: block;
  font-size: 11px;
  font-weight: 600;
}

.grades__position--au-dessus {
  color: var(--success);
}

.grades__position--en-dessous {
  color: var(--danger);
}

.grades__position--dans {
  color: var(--text-muted);
}

.grades__subject-name {
  font-weight: 700;
}

.grades__teacher {
  margin-left: 8px;
  font-size: 12px;
  font-style: italic;
  font-weight: 400;
  color: var(--text-muted);
}

.grades__coef,
.grades__average {
  font-variant-numeric: tabular-nums;
}

.grades__marks {
  display: table-cell;
}

.grades__mark {
  min-width: 34px;
  padding: 3px 8px;
  background: var(--surface-alt);
  border: 1px solid var(--border);
  border-radius: 6px;
  font-size: 13px;
  font-variant-numeric: tabular-nums;
  text-align: center;
}

.grades__mark--absent {
  color: var(--danger);
  border-color: var(--danger-border);
  background: var(--danger-bg);
  font-weight: 700;
}

.grades__count {
  font-size: 12px;
  color: var(--text-faint);
}

.grades tfoot td {
  border-top: 2px solid var(--border);
  border-bottom: none;
  font-weight: 700;
}

.grades__general-label {
  letter-spacing: 0.05em;
}

.grades__general {
  text-align: center;
  font-size: 15px;
}

.grades__class {
  font-weight: 400;
  font-size: 12px;
}

.grade-draft {
  display: grid;
  gap: 12px;
}

.grade-draft__summary {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(112px, 1fr));
  gap: 10px;
  padding: 12px 14px;
  background: var(--surface-alt);
  border: 1px solid var(--border);
  border-radius: var(--radius);
}

.grade-draft__stat {
  display: grid;
  gap: 2px;
  min-width: 0;
}

.grade-draft__value {
  font-size: 20px;
  font-variant-numeric: tabular-nums;
  line-height: 1.1;
}

.grade-draft__label {
  font-size: 12px;
  color: var(--text-muted);
}

.assessments {
  display: grid;
  gap: 8px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.assessments__item {
  display: flex;
  align-items: center;
  gap: 12px;
  flex-wrap: wrap;
  padding: 10px 12px;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
}

.assessments__head {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 4px 10px;
  min-width: 0;
}

.assessments__title {
  font-weight: 700;
}

.assessments__meta,
.assessments__date {
  font-size: 13px;
}

.assessments__actions {
  display: flex;
  gap: 6px;
  margin-left: auto;
}

.assessments__empty {
  padding: 14px;
  border: 1px dashed var(--border);
  border-radius: var(--radius);
  color: var(--text-muted);
  font-size: 14px;
}

.grade-rows {
  display: grid;
  gap: 8px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.grade-row {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  gap: 10px 14px;
  padding: 10px 12px;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
}

.grade-row__name {
  font-weight: 700;
  flex: 1 1 180px;
  min-width: 0;
}

.grade-row__field {
  display: grid;
  gap: 3px;
}

.grade-row__label {
  font-size: 12px;
  color: var(--text-muted);
}

.grade-row__score {
  width: 96px;
  min-height: 48px;
  text-align: center;
  font-size: 16px;
}

.grade-row__competence {
  min-height: 48px;
  min-width: 170px;
}

.grade-row__toggle {
  display: flex;
  align-items: center;
  gap: 8px;
  min-height: 48px;
  padding: 0 4px;
  font-size: 14px;
}

.competences {
  display: grid;
  gap: 14px;
}

.competences__totals {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.competences__total {
  display: grid;
  gap: 2px;
  min-width: 140px;
  padding: 10px 14px;
  border: 1px solid var(--border);
  border-left-width: 4px;
  border-radius: var(--radius);
  background: var(--surface);
}

.competences__total--1 {
  border-left-color: var(--danger);
}

.competences__total--2 {
  border-left-color: var(--warning);
}

.competences__total--3 {
  border-left-color: var(--primary);
}

.competences__total--4 {
  border-left-color: var(--success);
}

.competences__label {
  font-size: 13px;
  color: var(--text-muted);
}

.competences__count {
  font-size: 20px;
  font-weight: 700;
}

.competences__rows {
  display: grid;
  gap: 6px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.competences__row {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: 8px 16px;
  padding: 10px 12px;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
}

.competences__subject {
  font-weight: 700;
  font-size: 14px;
}

.competences__detail {
  font-size: 13px;
  color: var(--text-muted);
}

.grades-chart {
  width: 100%;
  height: auto;
}

.grades-chart__axis {
  stroke: var(--border-strong);
  stroke-width: 1;
}

.grades-chart__track {
  fill: var(--surface-alt);
}

.grades-chart__bar {
  fill: var(--primary);
}

.grades-chart__label {
  fill: var(--text);
  font-size: 12px;
}

.grades-chart__value {
  fill: var(--text-muted);
  font-size: 12px;
}

@media (max-width: 900px) {
  .homework__layout {
    grid-template-columns: minmax(0, 1fr);
  }

  .homework__rail {
    position: static;
    display: flex;
    flex-wrap: nowrap;
    gap: 8px;
    overflow-x: auto;
    padding-bottom: 4px;
    -webkit-overflow-scrolling: touch;
  }

  .hw-rail__item {
    flex: 0 0 auto;
    min-width: 132px;
  }
}

@media (max-width: 640px) {
  .slot-picker {
    flex-direction: column;
  }

  .slot-chip {
    width: 100%;
  }

  .overview__item {
    grid-template-columns: minmax(0, 1fr);
  }

  .overview__item .btn {
    grid-row: auto;
    grid-column: 1;
    justify-self: start;
  }

  .grade-row__score,
  .grade-row__competence {
    width: 100%;
    min-width: 0;
  }
}

.admin__section {
  display: grid;
  gap: 14px;
}

.admin__heading {
  margin: 4px 0 0;
  font-size: 15px;
  font-weight: 700;
}

.admin__row {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
}

.coefficients {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
  gap: 8px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.coefficient {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  padding: 8px 12px;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
}

.list__select {
  flex: 0 1 160px;
  min-height: 36px;
  padding: 4px 8px;
}

.level__position {
  flex: 0 0 68px;
  min-height: 36px;
  text-align: center;
}

.coefficient__name {
  min-width: 0;
  font-size: 14px;
}

.coefficient__input {
  width: 74px;
  min-height: 44px;
  text-align: center;
  font-variant-numeric: tabular-nums;
}

.teacher-subjects {
  display: grid;
  gap: 10px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.teacher-subjects__item {
  display: grid;
  gap: 8px;
  padding: 12px 14px;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
}

.teacher-subjects__head {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 4px 12px;
}

.teacher-subjects__name {
  font-weight: 700;
}

.teacher-subjects__classes {
  font-size: 13px;
}

.teacher-subjects__boxes {
  display: flex;
  flex-wrap: wrap;
  gap: 8px 16px;
}

.teacher-subjects__box {
  display: flex;
  align-items: center;
  gap: 8px;
  min-height: 44px;
  font-size: 14px;
}

.council {
  display: grid;
  gap: 8px;
  padding: 12px 14px;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
}

.council__class {
  margin: 0;
  font-size: 15px;
  font-weight: 700;
}

.council__list {
  display: grid;
  gap: 6px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.council__row {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 10px;
}

.council__term {
  flex: 1 1 160px;
  font-size: 14px;
}

@media print {
  .app__header,
  .tabs,
  .toolbar,
  .panel__bar,
  .panel__form,
  .homework__rail,
  .btn,
  .icon-btn,
  .segmented,
  .subtabs,
  .banner,
  .toast-stack {
    display: none !important;
  }

  body,
  .app,
  .panel,
  .hw-day,
  .lesson-day {
    background: #ffffff !important;
    color: #000000 !important;
  }

  .homework__layout {
    display: block;
  }

  .hw-day,
  .lesson-day {
    break-inside: avoid;
    page-break-inside: avoid;
    border-color: #000000 !important;
  }

  .hw-day__title,
  .lesson-day__title,
  .lesson-item__subject {
    color: #000000 !important;
  }

  .lesson-item {
    background: none !important;
    border: 0 !important;
    padding: 0 !important;
    break-inside: avoid;
    page-break-inside: avoid;
  }

  .lesson-doc__btn {
    background: none !important;
    border: 0 !important;
    padding: 0 !important;
  }

  .hw-line__test {
    color: #000000 !important;
    background: none !important;
  }
}

.grades__mark--excellent,
.grades__average-value.grades__mark--excellent {
  color: var(--success);
  border-color: var(--success-border);
  background: var(--success-bg);
  font-weight: 700;
}

.grades__mark--satisfaisant,
.grades__average-value.grades__mark--satisfaisant {
  color: var(--success);
  border-color: var(--success-border);
}

.grades__mark--fragile,
.grades__average-value.grades__mark--fragile {
  color: var(--warning);
  border-color: var(--warning-border);
  background: var(--warning-bg);
}

.grades__mark--insuffisant,
.grades__average-value.grades__mark--insuffisant {
  color: var(--danger);
  border-color: var(--danger-border);
  background: var(--danger-bg);
}

.grades__mark--absent,
.grades__mark--exempt,
.grades__mark--missing {
  color: var(--text-muted);
  border-color: var(--border-strong);
  background: var(--surface-alt);
  font-weight: 600;
  letter-spacing: 0.02em;
}

.grades__average-value {
  display: inline-block;
  min-width: 46px;
  padding: 3px 8px;
  border: 1px solid transparent;
  border-radius: 6px;
  font-variant-numeric: tabular-nums;
  text-align: center;
}

.grade-row__badge {
  align-self: center;
  min-width: 74px;
  padding: 4px 8px;
  border: 1px solid var(--border-strong);
  border-radius: 6px;
  background: var(--surface-alt);
  color: var(--text-muted);
  font-size: 12px;
  font-weight: 700;
  text-align: center;
}

.grade-row__badge--excellent {
  color: var(--success);
  border-color: var(--success-border);
  background: var(--success-bg);
}

.grade-row__badge--satisfaisant {
  color: var(--success);
  border-color: var(--success-border);
}

.grade-row__badge--fragile {
  color: var(--warning);
  border-color: var(--warning-border);
  background: var(--warning-bg);
}

.grade-row__badge--insuffisant {
  color: var(--danger);
  border-color: var(--danger-border);
  background: var(--danger-bg);
}

.grade-row__badge--statut {
  color: var(--text-muted);
  border-color: var(--border-strong);
  background: var(--surface-alt);
}

.grade-row.is-unawarded .grade-row__score {
  opacity: 0.55;
}

.mail-msg {
  display: grid;
  gap: 10px;
  padding: 14px 16px;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
}

.mail-msg--own {
  border-left: 3px solid var(--primary);
}

.mail-msg__head {
  display: grid;
  gap: 6px;
  padding-bottom: 8px;
  border-bottom: 1px solid var(--border);
}

.mail-msg__subject {
  margin: 0;
  font-size: 15px;
}

.mail-msg__from {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 8px;
  margin: 0;
  font-size: 13px;
}

.mail-msg__sender {
  color: var(--text);
  font-weight: 700;
}

.mail-msg__to {
  color: var(--text-muted);
}

.mail-msg__when {
  color: var(--text-faint);
  font-size: 12px;
  font-style: italic;
}

.mail-msg__files-title {
  margin: 4px 0 0;
  padding-top: 8px;
  color: var(--accent, var(--primary));
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.06em;
  border-top: 1px solid var(--border);
}

.mail-msg__lines {
  display: grid;
  grid-template-columns: 58px minmax(0, 1fr);
  gap: 2px 8px;
  margin: 0;
  font-size: 13px;
}

.mail-msg__term {
  color: var(--text-faint);
  font-weight: 600;
}

.mail-msg__value {
  margin: 0;
  min-width: 0;
  overflow-wrap: anywhere;
  color: var(--text-muted);
}

.mail-msg__text {
  margin: 0;
  white-space: pre-wrap;
  overflow-wrap: anywhere;
  line-height: 1.5;
}

.mail-msg__files {
  padding-top: 4px;
  border-top: 1px dashed var(--border);
}

.thread__subject {
  display: flex;
  align-items: center;
  gap: 6px;
}

.thread__subject-text {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.thread__clip {
  display: inline-flex;
  flex: none;
  color: var(--text-muted);
}

.mail__actions {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  width: 100%;
}

.mail__head {
  flex-wrap: wrap;
}

.mail__quote {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  margin: 0;
  padding: 8px 12px;
  background: var(--surface-alt);
  border: 1px solid var(--border-strong);
  border-left: 3px solid var(--primary);
  border-radius: var(--radius-sm);
  color: var(--text-muted);
  font-size: 13px;
}

.thread__from {
  flex: 1 1 auto;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.thread__subject {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-weight: 600;
}

.thread__foot {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  font-size: 11px;
  color: var(--text-faint);
}

.thread__state.is-unread {
  color: var(--primary);
  font-weight: 700;
}

.thread__direction {
  text-transform: uppercase;
  letter-spacing: 0.04em;
}

.state--compact {
  margin: 0;
  font-size: 13px;
}

.docs {
  display: grid;
  gap: 14px;
}

.docs__head {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
}

.docs__title {
  margin: 0;
  font-size: 17px;
}

.docs__hint {
  margin: 4px 0 0;
  color: var(--text-muted);
  font-size: 13px;
}

.docs__layout {
  display: grid;
  gap: 14px;
}

@media (min-width: 860px) {
  .docs__layout {
    grid-template-columns: minmax(240px, 320px) minmax(0, 1fr);
    align-items: start;
  }
}

.docs__rail,
.docs__pane {
  display: grid;
  gap: 10px;
  padding: 12px;
  background: var(--bg-alt);
  border: 1px solid var(--border);
  border-radius: var(--radius);
}

.docs-group {
  display: grid;
  gap: 10px;
}

.docs-group__title {
  margin: 0;
  color: var(--text-faint);
  font-size: 11px;
  letter-spacing: 0.06em;
}

.docs-group__list {
  display: grid;
  gap: 6px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.docs-folder {
  display: flex;
  align-items: center;
  gap: 4px;
}

.docs-folder__btn {
  display: flex;
  align-items: center;
  gap: 8px;
  flex: 1 1 auto;
  min-width: 0;
  min-height: var(--tap);
  padding: 8px 10px;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  color: var(--text);
  text-align: left;
}

.docs-folder__btn.is-on {
  border-color: var(--primary);
  box-shadow: 0 0 0 1px var(--primary);
}

.docs-folder__name {
  flex: 1 1 auto;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.docs-folder__count {
  flex: 0 0 auto;
  padding: 1px 7px;
  background: var(--surface-alt);
  border-radius: 999px;
  color: var(--text-faint);
  font-size: 11px;
}

.docs__pane-head {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  padding-bottom: 8px;
  border-bottom: 1px solid var(--border);
}

.docs__pane-title {
  margin: 0;
  font-size: 15px;
}

.docs__pane-sub {
  color: var(--text-faint);
  font-size: 12px;
}

.docs__list {
  display: grid;
  gap: 6px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.docs-doc {
  display: flex;
  align-items: center;
  gap: 4px;
}

.docs-doc__btn {
  display: flex;
  align-items: center;
  gap: 10px;
  flex: 1 1 auto;
  min-width: 0;
  min-height: var(--tap);
  padding: 10px 12px;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  color: var(--text);
  text-align: left;
}

.docs-doc__name {
  flex: 1 1 auto;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.docs-doc__meta {
  flex: 0 0 auto;
  color: var(--text-faint);
  font-size: 12px;
  font-variant-numeric: tabular-nums;
}

.lesson-chapter.is-highlighted {
  box-shadow: 0 0 0 2px var(--primary);
  border-radius: var(--radius-sm);
  transition: box-shadow 0.4s ease-out;
}

.grades {
  table-layout: fixed;
  width: 100%;
  min-width: 720px;
}

.grades__scroll {
  width: 100%;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
}

.grades__col--subject {
  width: 33%;
}

.grades__col--coef {
  width: 9%;
}

.grades__col--average {
  width: 15%;
}

.grades__col--class {
  width: 18%;
}

.grades__col--marks {
  width: 25%;
}

.grades th,
.grades td {
  width: auto;
  vertical-align: middle;
}

.grades th.grades__th-coef,
.grades td.grades__coef,
.grades th.grades__th-average,
.grades td.grades__average,
.grades th.grades__th-class,
.grades td.grades__class-cell,
.grades th.grades__th-marks,
.grades td.grades__marks {
  text-align: center;
}

.grades th.grades__th-coef,
.grades td.grades__coef,
.grades th.grades__th-average,
.grades td.grades__average,
.grades th.grades__th-class,
.grades td.grades__class-cell,
.grades th.grades__th-marks,
.grades td.grades__marks {
  padding-left: 6px;
  padding-right: 6px;
}

.grades__class-range {
  white-space: normal;
}

.grades__th-subject,
.grades__subject {
  width: auto;
}

.grades__subject-name {
  display: block;
}

.grades__teacher {
  display: block;
  margin-left: 0;
}

.grades__marks-grid {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 6px;
  align-items: center;
}

.grades__count {
  display: block;
  margin-top: 4px;
  text-align: center;
}

.grades tbody td {
  border-bottom: 1px solid var(--border);
}

.grades__mark {
  position: relative;
  font-family: inherit;
  line-height: 1.2;
}

.grades__mark--action {
  cursor: pointer;
}

.grades__mark--action:hover {
  border-color: var(--primary);
}

.grades__mark--action:focus-visible {
  outline: 2px solid var(--primary);
  outline-offset: 2px;
}

.grades__mark--new {
  border-color: var(--primary);
  box-shadow: 0 0 0 1px var(--primary);
}

.grades__new-tag {
  position: absolute;
  top: -0.7em;
  right: -0.5em;
  padding: 1px 5px;
  background: var(--primary);
  color: var(--primary-text);
  border-radius: 999px;
  font-size: 9px;
  font-weight: 700;
  letter-spacing: 0.03em;
  text-transform: uppercase;
  white-space: nowrap;
}

.grades__foot-spacer {
  width: 0;
}

.grade-detail {
  display: flex;
  flex-direction: column;
  gap: 18px;
}

.grade-detail__head {
  display: flex;
  flex-wrap: wrap;
  gap: 16px;
  align-items: center;
}

.grade-detail__score {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  min-width: 96px;
  padding: 10px 14px;
  background: var(--surface-alt);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
}

.grade-detail__value {
  font-size: 26px;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
}

.grade-detail__scale {
  font-size: 12px;
  color: var(--text-muted);
  font-variant-numeric: tabular-nums;
}

.grade-detail__id {
  flex: 1 1 200px;
  min-width: 0;
}

.grade-detail__title {
  margin: 0 0 4px;
  font-size: 18px;
}

.grade-detail__subject {
  margin: 0;
  color: var(--text-muted);
  font-size: 13px;
}

.grade-detail__facts {
  width: 100%;
  border-collapse: collapse;
  font-size: 14px;
}

.grade-detail__facts th,
.grade-detail__facts td {
  padding: 8px 10px;
  border-bottom: 1px solid var(--border);
  text-align: left;
}

.grade-detail__term {
  width: 46%;
  color: var(--text-muted);
  font-weight: 600;
}

.grade-detail__fact {
  font-variant-numeric: tabular-nums;
}

.grade-detail__heading {
  margin: 0 0 8px;
  font-size: 12px;
  letter-spacing: 0.06em;
  color: var(--text-muted);
  text-transform: uppercase;
}

.grade-detail__stats {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(110px, 1fr));
  gap: 10px;
}

.grade-detail__stat {
  display: flex;
  flex-direction: column;
  padding: 10px;
  background: var(--surface-alt);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
}

.grade-detail__stat-value {
  font-size: 18px;
  font-variant-numeric: tabular-nums;
}

.grade-detail__stat-label {
  font-size: 11px;
  color: var(--text-muted);
}

.grade-detail__text {
  margin: 0;
  white-space: pre-wrap;
}

.dot {
  display: inline-block;
  flex: none;
  width: 12px;
  height: 12px;
  border-radius: 50%;
  background: var(--text-faint);
}

.dot--danger {
  background: var(--danger);
}

.dot--warning {
  background: var(--warning);
}

.dot--primary {
  background: var(--primary);
}

.dot--success {
  background: var(--success);
}

.grades__mark-dots {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  margin-left: 6px;
  vertical-align: middle;
}

.grades__mark-dot {
  display: inline-block;
  width: 10px;
  height: 10px;
  vertical-align: middle;
}

.competency-legend {
  display: flex;
  flex-wrap: wrap;
  gap: 6px 16px;
  margin: 10px 0 0;
  padding: 0;
  list-style: none;
}

.competency-legend__item {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  color: var(--text-muted);
  font-size: 13px;
}

.grade-row__competencies {
  display: flex;
  flex-wrap: wrap;
  flex: 1 1 100%;
  gap: 8px 18px;
  padding-top: 4px;
}

.level-picker {
  display: grid;
  gap: 4px;
  min-width: 0;
}

.level-picker__label {
  overflow: hidden;
  color: var(--text-muted);
  font-size: 12px;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.level-picker__track {
  display: flex;
  gap: 8px;
}

.level-picker__dot {
  width: 26px;
  height: 26px;
  padding: 0;
  border: 2px solid var(--surface);
  box-shadow: 0 0 0 1px var(--border-strong);
  opacity: 0.42;
  cursor: pointer;
  transition: opacity 120ms ease, transform 90ms ease, box-shadow 120ms ease;
}

.level-picker__dot:hover {
  opacity: 0.75;
}

.level-picker__dot:focus-visible {
  outline: 2px solid var(--primary);
  outline-offset: 2px;
}

.level-picker__dot.is-on {
  opacity: 1;
  box-shadow: 0 0 0 2px var(--text);
}

.level-picker__dot.is-on::after {
  content: "";
  display: block;
  width: 100%;
  height: 100%;
}

@media (pointer: coarse) {
  .level-picker__dot {
    width: 44px;
    height: 44px;
  }
}

.competency-table {
  width: 100%;
  margin-top: 8px;
  border-collapse: collapse;
  table-layout: fixed;
}

.competency-table__corner {
  width: 46%;
}

.competency-table__head {
  padding: 6px 4px;
  color: var(--text-muted);
  font-size: 11px;
  font-weight: 700;
  line-height: 1.2;
  text-align: center;
  vertical-align: bottom;
  text-transform: uppercase;
  border-bottom: 1px solid var(--border);
}

.competency-table__head--danger,
.competency-table__head--warning,
.competency-table__head--primary,
.competency-table__head--success {
  border-bottom-width: 3px;
}

.competency-table__head--danger {
  border-bottom-color: var(--danger);
}

.competency-table__head--warning {
  border-bottom-color: var(--warning);
}

.competency-table__head--primary {
  border-bottom-color: var(--primary);
}

.competency-table__head--success {
  border-bottom-color: var(--success);
}

.competency-table__label {
  padding: 8px 6px 8px 0;
  font-weight: 400;
  text-align: left;
  vertical-align: middle;
}

.competency-table__name {
  display: block;
  font-weight: 700;
}

.competency-table__descriptor {
  display: block;
  margin-top: 2px;
  color: var(--text-muted);
  font-size: 12px;
  line-height: 1.3;
}

.competency-table__cell {
  padding: 8px 4px;
  text-align: center;
  vertical-align: middle;
  border-bottom: 1px solid var(--border);
}

.competency-table__cell.is-on {
  background: var(--surface-alt);
}

.competency-table__note {
  margin: 8px 0 0;
  font-size: 12px;
}

.competency-picks__list {
  display: grid;
  gap: 6px;
  margin-top: 6px;
}

.competency-picks__empty {
  margin: 0;
}

.competency-pick {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  min-height: 44px;
  padding: 8px 10px;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  cursor: pointer;
}

.competency-pick:hover {
  border-color: var(--border-strong);
}

.competency-pick-row {
  display: flex;
  align-items: stretch;
  gap: 6px;
}

.competency-pick-row .competency-pick {
  flex: 1 1 auto;
  min-width: 0;
}

.competency-pick__tools {
  display: flex;
  align-items: center;
  gap: 4px;
  padding: 4px 6px;
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  background: var(--surface);
}

.quiz-duplicate__targets {
  border: 0;
  padding: 0;
  margin: 0;
}

.quiz-duplicate__classes {
  display: grid;
  gap: 6px;
  margin: 6px 0;
}

.competency-pick__text {
  display: grid;
  gap: 2px;
  min-width: 0;
}

.competency-pick__label {
  font-weight: 600;
}

.competency-pick__descriptor {
  color: var(--text-muted);
  font-size: 12px;
  line-height: 1.3;
}

.competency-new {
  margin-top: 10px;
  border: 1px dashed var(--border-strong);
  border-radius: var(--radius-sm);
}

.competency-new__summary {
  padding: 10px 12px;
  color: var(--text-muted);
  font-size: 13px;
  font-weight: 600;
  cursor: pointer;
}

.competency-new__rows {
  display: grid;
  gap: 10px;
  padding: 0 12px 12px;
}

.competence-badge {
  display: inline-block;
  padding: 4px 10px;
  border-radius: 999px;
  border: 1px solid var(--border);
  font-size: 13px;
  font-weight: 600;
}

.competence-badge--1 {
  background: var(--danger-bg);
  border-color: var(--danger-border);
  color: var(--danger);
}

.competence-badge--2 {
  background: var(--warning-bg, var(--surface-alt));
  border-color: var(--warning-border, var(--border));
  color: var(--warning, var(--text));
}

.competence-badge--3,
.competence-badge--4 {
  background: var(--success-bg);
  border-color: var(--success-border, var(--border));
  color: var(--success);
}

.mail {
  grid-template-columns: 200px minmax(0, 340px) minmax(0, 1fr);
}

@media (max-width: 1100px) {
  .mail {
    grid-template-columns: minmax(0, 1fr);
  }
}

.mail__folders {
  display: flex;
  flex-direction: column;
  gap: 4px;
  padding: 12px;
  border-right: 1px solid var(--border);
}

.mail-folders {
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.mail-folders__item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  min-height: 48px;
  padding: 8px 12px;
  background: transparent;
  border: 1px solid transparent;
  border-radius: var(--radius-sm);
  color: var(--text);
  font: inherit;
  text-align: left;
  cursor: pointer;
}

.mail-folders__item:hover {
  background: var(--surface-alt);
}

.mail-folders__item.is-on {
  background: var(--surface-alt);
  border-color: var(--primary);
  font-weight: 700;
}

.mail-folders__count {
  min-width: 24px;
  padding: 1px 6px;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 999px;
  font-size: 12px;
  font-variant-numeric: tabular-nums;
  text-align: center;
}

.thread__dot {
  flex: 0 0 auto;
  width: 8px;
  height: 8px;
  margin-right: 8px;
  border-radius: 50%;
  background: transparent;
}

.thread__dot.is-unread {
  background: var(--primary);
}

.thread__trash {
  position: absolute;
  top: 6px;
  right: 6px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 36px;
  height: 36px;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  color: var(--text-muted);
  cursor: pointer;
}

.thread__trash:hover {
  color: var(--danger);
  border-color: var(--danger-border);
}

.thread--draft {
  position: relative;
}

.thread__btn--draft {
  padding-right: 44px;
}

.mail__actions-gap {
  flex: 1 1 auto;
}

.mail-msg__history {
  padding: 4px 8px;
}

.mail-msg__summary {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  align-items: baseline;
  min-height: 48px;
  padding: 8px 4px;
  cursor: pointer;
}

.mail-msg__summary-from {
  font-weight: 700;
}

.mail-msg__summary-date {
  font-size: 12px;
  color: var(--text-muted);
  font-variant-numeric: tabular-nums;
}

.mail-msg__summary-preview {
  flex: 1 1 180px;
  min-width: 0;
  color: var(--text-faint);
  font-size: 12px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.recipient-builder {
  display: grid;
  gap: 10px;
}

.recipient-builder__buttons {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
}

.recipient-btn {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  min-height: 48px;
  padding: 8px 18px;
  color: var(--on-primary, #fff);
  font: inherit;
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  background: var(--primary);
  border: 1px solid var(--primary);
  border-radius: var(--radius-sm);
  cursor: pointer;
}

.recipient-btn:hover {
  filter: brightness(1.08);
}

.recipient-btn:active {
  filter: brightness(0.94);
}

.recipient-btn:focus-visible {
  outline: 2px solid var(--primary);
  outline-offset: 2px;
}

.recipient-btn.is-on {
  color: var(--primary);
  background: var(--surface);
  border-color: var(--primary);
  box-shadow: inset 0 0 0 2px var(--primary);
}

.recipient-btn__icon {
  flex: none;
  width: 18px;
  height: 18px;
}

.recipient-btn__label {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.directory {
  display: grid;
  gap: 8px;
}

.directory__bar {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 12px;
}

.directory__search {
  flex: 1 1 220px;
  min-height: 48px;
}

.directory__filter {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  min-height: 48px;
  color: var(--text-muted);
  font-size: 13px;
  cursor: pointer;
}

.directory__grid {
  display: grid;
  gap: 10px;
  align-items: center;
}

.directory--teachers .directory__grid {
  grid-template-columns: 44px minmax(0, 2.1fr) minmax(0, 1.6fr) minmax(0, 1.1fr);
}

.directory--students .directory__grid,
.directory--staff .directory__grid,
.directory--classes .directory__grid {
  grid-template-columns: 44px minmax(0, 2.4fr) minmax(0, 1.4fr);
}

.directory__head {
  padding: 8px 12px;
  background: var(--surface-alt);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
}

.directory__cell {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-size: 13px;
}

.directory__cell--head {
  color: var(--text-muted);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

.directory__rows {
  display: grid;
  gap: 2px;
  max-height: 46vh;
  margin: 0;
  padding: 0;
  overflow-y: auto;
  list-style: none;
}

.directory__row {
  min-height: 48px;
  padding: 6px 12px;
  border-bottom: 1px solid var(--border);
}

.directory__row:hover {
  background: var(--surface-alt);
}

.directory__row.is-picked {
  background: var(--selection);
}

.directory__pick {
  display: flex;
  align-items: center;
  justify-content: center;
}

.directory__pick .checkbox {
  width: 22px;
  height: 22px;
}

.directory__cell--name {
  font-weight: 600;
}

.directory__cell--titulaire,
.directory__cell--fonction,
.directory__cell--classe {
  color: var(--text-muted);
}

.directory__empty,
.directory__count {
  margin: 0;
  font-size: 12px;
}

.directory__done {
  justify-self: start;
}

.picker__chips {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}

.picker__chip {
  display: inline-flex;
  max-width: 100%;
}

.chip {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  min-height: 40px;
  max-width: 100%;
  padding: 6px 12px;
  color: var(--text);
  font: inherit;
  font-size: 14px;
  background: var(--selection);
  border: 1px solid var(--border-strong);
  border-radius: 999px;
  cursor: pointer;
}

.chip:hover {
  border-color: var(--primary);
}

.chip:focus-visible {
  outline: 2px solid var(--primary);
  outline-offset: 2px;
}

.chip__label {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.chip__kind {
  padding: 2px 6px;
  color: var(--text-muted);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  background: var(--surface);
  border-radius: 999px;
}

.chip__icon {
  flex: none;
  width: 14px;
  height: 14px;
  color: var(--text-muted);
}

@media (pointer: coarse) {
  .chip {
    min-height: var(--tap);
  }
}

.list__action {
  margin-left: auto;
}

@media (max-width: 720px) {
  .directory--teachers .directory__grid {
    grid-template-columns: 44px minmax(0, 1.6fr) minmax(0, 1fr);
  }

  .directory--teachers .directory__cell--titulaire {
    display: none;
  }
}

.rooms {
  display: grid;
  gap: 16px;
}

.rooms__ask .stack {
  gap: 12px;
}

.rooms__preview {
  margin: 0;
  padding: 10px 12px;
  color: var(--text-muted);
  font-size: 13px;
  background: var(--surface-alt);
  border-radius: var(--radius-sm);
  box-shadow: inset 0 0 0 1px var(--border);
}

.rooms__preview.is-busy {
  color: var(--danger, #b3261e);
  box-shadow: inset 0 0 0 1px var(--danger, #b3261e);
}

.room-request {
  display: grid;
  gap: 4px;
  padding: 12px;
  border-radius: var(--radius);
  box-shadow: inset 0 0 0 1px var(--border);
}

.room-request + .room-request {
  margin-top: 10px;
}

.room-request--warn {
  box-shadow: inset 0 0 0 1px var(--warning, #b26a00);
}

.room-request--ok {
  box-shadow: inset 0 0 0 1px var(--success, #1b7f4b);
}

.room-request__head {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 10px;
}

.room-request__room {
  font-size: 15px;
}

.room-request__when {
  margin: 0;
  font-weight: 600;
}

.room-request__meta,
.room-request__purpose,
.room-request__note {
  margin: 0;
  color: var(--text-muted);
  font-size: 13px;
}

.room-request__note {
  font-style: italic;
}

.room-request__actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 10px;
  margin-top: 6px;
}

.room-request__actions .input {
  flex: 1 1 220px;
}

.list__row.is-off {
  opacity: 0.62;
}

.check {
  display: flex;
  align-items: center;
  gap: 10px;
  min-height: 44px;
  cursor: pointer;
}

.check__input {
  flex: none;
  width: 22px;
  height: 22px;
  accent-color: var(--primary);
  cursor: pointer;
}

.check__label {
  font-size: 14px;
}

.board {
  display: flex;
  flex-direction: column;
  gap: 18px;
}

.board__head {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
}

.board__hello {
  display: flex;
  flex-direction: column;
  gap: 4px;
  min-width: 0;
}

.board__name {
  margin: 0;
  font-size: 22px;
  font-weight: 700;
  line-height: 1.25;
}

.board__meta {
  margin: 0;
  color: var(--text-muted);
  font-size: 14px;
  text-transform: capitalize;
}

.board__tiles {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(148px, 1fr));
  gap: 12px;
}

.board__tile {
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-height: var(--tap);
  padding: 13px 15px;
  background: var(--surface);
  border: 1px solid var(--border);
  border-left: 4px solid var(--border-strong);
  border-radius: var(--radius);
  color: inherit;
  font: inherit;
  text-align: left;
  cursor: pointer;
  touch-action: manipulation;
  -webkit-tap-highlight-color: transparent;
  transition: border-color 140ms ease, background-color 140ms ease;
}

.board__tile:hover {
  border-color: var(--border-strong);
  background: var(--surface-alt);
}

.board__tile:focus-visible {
  outline: 2px solid var(--primary);
  outline-offset: 2px;
}

.board__tile--alerte {
  border-left-color: var(--danger);
}

.board__tile--info {
  border-left-color: var(--primary);
}

.board__tile-value {
  font-size: 25px;
  font-weight: 700;
  line-height: 1.15;
}

.board__tile-label {
  color: var(--text-muted);
  font-size: 13px;
  line-height: 1.3;
}

.board__feed {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.board__title {
  margin: 0;
  font-size: 17px;
}

.note {
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding: 14px 16px;
  background: var(--surface);
  border: 1px solid var(--border);
  border-left: 4px solid var(--border-strong);
  border-radius: var(--radius);
}

.note--info {
  border-left-color: var(--primary);
}

.note--suivi {
  border-left-color: var(--warning);
}

.note--convocation {
  border-left-color: var(--danger);
}

.note--alerte {
  border-left-color: var(--danger);
}

.note--recompense {
  border-left-color: var(--success);
}

.note--new {
  background: var(--surface-alt);
}

.note__head {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 10px;
}

.note__title {
  margin: 0;
  font-size: 16px;
  font-weight: 600;
}

.note__new {
  padding: 2px 9px;
  background: var(--primary);
  border-radius: 999px;
  color: var(--primary-text);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.03em;
  text-transform: uppercase;
}

.note__meta {
  margin: 0;
  color: var(--text-muted);
  font-size: 12.5px;
}

.note__body {
  margin: 0;
  font-size: 14.5px;
  line-height: 1.5;
  white-space: pre-wrap;
}

.note__files {
  display: flex;
  flex-direction: column;
  gap: 6px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.note__file {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
  font-size: 13.5px;
}

.note__file-icon {
  flex: none;
  color: var(--text-muted);
}

.note__file-size {
  color: var(--text-faint);
  font-size: 12px;
}

.note__actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 9px;
  margin-top: 2px;
}

.corr {
  display: flex;
  flex-direction: column;
  gap: 14px;
}

.corr__head {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}

.corr__title {
  margin: 0;
  font-size: 17px;
}

.corr__list {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.chip--signature,
.chip--lock {
  cursor: default;
  font-weight: 600;
}

.chip--attente {
  background: var(--warning-bg);
  border-color: var(--warning-border);
  color: var(--warning);
}

.chip--signee {
  background: var(--success-bg);
  border-color: var(--success-border);
  color: var(--success);
}

.chip--sans_objet {
  color: var(--text-muted);
}

.chip--ferme {
  background: var(--danger-bg);
  border-color: var(--danger-border);
  color: var(--danger);
}

.chip--ouvert {
  background: var(--success-bg);
  border-color: var(--success-border);
  color: var(--success);
}

.chip--soft {
  min-height: 32px;
  padding: 0 11px;
  background: var(--surface-alt);
  color: var(--text-muted);
  font-size: 12.5px;
  cursor: default;
}

.card--personal {
  display: flex;
  flex-direction: column;
  align-items: stretch;
  gap: 10px;
  padding: 16px;
  text-align: left;
  cursor: default;
}

.card--personal:hover {
  border-color: var(--border);
}

.docs__bar {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 10px;
}

.docs__group {
  margin: 4px 0 0;
  color: var(--text-muted);
  font-size: 12.5px;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}

.docs__list {
  display: flex;
  flex-direction: column;
  gap: 8px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.docs__row {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 10px;
  min-height: var(--tap);
  padding: 8px 10px;
  background: var(--surface-alt);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
}

.docs__icon {
  flex: none;
  color: var(--text-muted);
}

.docs__body {
  display: flex;
  flex-direction: column;
  gap: 2px;
  flex: 1 1 200px;
  min-width: 0;
}

.docs__name {
  align-self: flex-start;
  font-size: 14.5px;
  text-align: left;
  overflow-wrap: anywhere;
}

.docs__meta {
  color: var(--text-faint);
  font-size: 12px;
}

.docs__row .input--sm {
  flex: 0 1 180px;
}

.roles {
  display: flex;
  flex-direction: column;
  gap: 14px;
}

.card--role {
  display: flex;
  flex-direction: column;
  align-items: stretch;
  gap: 10px;
  padding: 14px 16px;
  text-align: left;
  cursor: default;
}

.card--role:hover {
  border-color: var(--border);
}

.card--system {
  border-color: var(--border-strong);
}

.card__head {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
}

.card__actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
}

.card__code {
  color: var(--text-faint);
  font-size: 12px;
}

.perm {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.perm__group {
  margin: 0;
  color: var(--text-muted);
  font-size: 12.5px;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}

.perm__row {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  min-height: var(--tap);
  padding: 4px 2px;
  border-bottom: 1px solid var(--border);
}

.perm__row:last-child {
  border-bottom: none;
}

.perm__label {
  font-size: 14px;
}

.form__grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(210px, 1fr));
  gap: 12px;
}

.form__checks {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 14px;
}

.form__error {
  margin: 0;
  color: var(--danger);
  font-size: 13.5px;
}

.field--block {
  grid-column: 1 / -1;
}

.btn--icon {
  display: inline-grid;
  place-items: center;
  width: var(--tap);
  min-width: var(--tap);
  height: var(--tap);
  padding: 0;
}

.btn--wide {
  width: 100%;
}

.input--number {
  max-width: 140px;
}

.quizzes {
  display: flex;
  flex-direction: column;
  gap: 14px;
}

.quizzes__head {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}

.quizzes__title {
  margin: 0;
  font-size: 17px;
}

.quizzes__list {
  display: flex;
  flex-direction: column;
  gap: 12px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.quizzes__group {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.quizzes__grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
  gap: 12px;
  align-items: start;
}

.quiz--suivi {
  grid-column: 1 / -1;
}

.files__grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
  gap: 12px;
}

.folder-tile {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 6px;
  min-height: 96px;
  padding: 14px 16px;
  border: 1px solid var(--border);
  border-radius: 14px;
  background: var(--surface);
  color: inherit;
  font: inherit;
  text-align: left;
  cursor: pointer;
  transition: border-color 0.15s ease, transform 0.15s ease;
}

.folder-tile:hover,
.folder-tile:focus-visible {
  border-color: var(--primary);
  transform: translateY(-1px);
}

.folder-tile__icon {
  width: 26px;
  height: 26px;
  color: var(--primary);
}

.folder-tile__name {
  font-weight: 600;
  font-size: 16px;
  overflow-wrap: anywhere;
}

.folder-tile__count {
  font-size: 13px;
  color: var(--text-muted);
}

.files-path {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
  padding: 8px 12px;
  border: 1px solid var(--border);
  border-radius: 12px;
  background: var(--surface-alt);
}

.files-path__step {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  min-height: 36px;
  padding: 4px 10px;
  border: 0;
  border-radius: 9px;
  background: transparent;
  color: var(--primary);
  font: inherit;
  font-weight: 600;
  cursor: pointer;
}

.files-path__step:hover,
.files-path__step:focus-visible {
  background: color-mix(in srgb, var(--primary) 14%, transparent);
}

.files-path__sep {
  color: var(--text-muted);
}

.files-path__current {
  font-weight: 600;
}

.files-path__tools {
  display: flex;
  gap: 6px;
  margin-left: auto;
}

@media (max-width: 700px) {
  .quizzes__grid,
  .files__grid {
    grid-template-columns: 1fr;
  }
}

.quiz {
  display: flex;
  flex-direction: column;
  gap: 9px;
  padding: 14px 16px;
  background: var(--surface);
  border: 1px solid var(--border);
  border-left: 4px solid var(--border-strong);
  border-radius: var(--radius);
}

.quiz--locked {
  border-left-color: var(--danger);
}

.quiz--open {
  border-left-color: var(--success);
}

.quiz--done {
  opacity: 0.86;
}

.quiz__head {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 10px;
}

.quiz__title {
  margin: 0;
  font-size: 16px;
  font-weight: 600;
}

.quiz__desc {
  margin: 0;
  font-size: 14px;
  line-height: 1.5;
  white-space: pre-wrap;
}

.quiz__meta {
  margin: 0;
  color: var(--text-muted);
  font-size: 12.5px;
}

.quiz__bar {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 10px;
}

.quiz__actions {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(158px, 1fr));
  align-items: stretch;
  gap: 9px;
}

.quiz__actions > .btn {
  justify-content: center;
}

.quiz__progress {
  margin: 0;
  color: var(--text-muted);
  font-size: 13px;
}

.quiz__stat {
  display: inline-flex;
  align-items: center;
  padding: 7px 11px;
  background: var(--surface-alt);
  border-radius: var(--radius-sm);
  color: var(--text-muted);
  font-size: 13px;
}

.quiz__stat--avg {
  border-left: 3px solid var(--primary);
}

.quiz-track {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.quiz-track__title {
  margin: 0;
  font-size: 16px;
}

.quiz-track__row td {
  vertical-align: middle;
}

.quiz-track--compact {
  max-width: 100%;
  min-width: 0;
}

.quiz-track--compact > .table--quiz {
  width: 100%;
  min-width: 340px;
}

.quiz-track--compact {
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
}

.chip--status {
  cursor: default;
  font-weight: 600;
}

.chip--pending,
.chip--locked {
  background: var(--surface-alt);
  color: var(--text-muted);
}

.chip--in_progress {
  background: var(--warning-bg);
  border-color: var(--warning-border);
  color: var(--warning);
}

.chip--submitted {
  background: var(--success-bg);
  border-color: var(--success-border);
  color: var(--success);
}

.chip--absent {
  background: var(--danger-bg);
  border-color: var(--danger-border);
  color: var(--danger);
}

.table--quiz td,
.table--quiz th {
  padding: 8px 10px;
  text-align: left;
}

.quiz-run {
  display: flex;
  flex-direction: column;
  gap: 14px;
}

.quiz-run__head {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}

.quiz-run__title {
  margin: 0;
  font-size: 18px;
}

.quiz-run__desc {
  margin: 0;
  color: var(--text-muted);
  font-size: 14px;
  line-height: 1.5;
}

.quiz-run__progress {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 12px;
  font-size: 13.5px;
}

.quiz-run__timer {
  padding: 8px 14px;
  background: var(--surface-alt);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  font-size: 16px;
  font-weight: 700;
}

.quiz-run__timer.is-urgent {
  background: var(--danger-bg);
  border-color: var(--danger-border);
  color: var(--danger);
}

.quiz-run__step {
  min-height: 120px;
}

.quiz-run__dots {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  padding-top: 4px;
}

.quiz-run__dot {
  display: inline-grid;
  place-items: center;
  width: 34px;
  height: 34px;
  min-width: 34px;
  padding: 0;
  border: 1px solid var(--border);
  border-radius: 50%;
  background: transparent;
  color: var(--text-muted);
  font: inherit;
  font-size: 13px;
  font-weight: 700;
  cursor: pointer;
  touch-action: manipulation;
  transition: border-color 140ms ease, color 140ms ease, background 140ms ease;
}

.quiz-run__dot.is-done {
  border-color: var(--success-border);
  background: var(--success-bg);
  color: var(--success);
}

.quiz-run__dot.is-current {
  border-color: var(--primary);
  background: var(--primary);
  color: var(--primary-text);
}

.quiz-run__dot.is-past {
  opacity: 0.45;
  cursor: default;
}

.quiz-run__sens-unique {
  margin: 0;
  padding: 8px 12px;
  border: 1px solid var(--warning-border, var(--border));
  border-radius: 10px;
  background: var(--warning-bg, var(--surface));
  color: var(--text-muted);
  font-size: 13px;
}

.quiz-run__actions .btn--wide {
  flex: 1 1 auto;
}

.quiz-run__actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 10px;
}

.quiz-q {
  display: flex;
  flex-direction: column;
  gap: 9px;
  margin: 0;
  padding: 14px 16px;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
}

.quiz-q__legend {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 9px;
  padding: 0;
}

.quiz-q__rank,
.quiz-q__letter {
  display: inline-grid;
  place-items: center;
  flex: none;
  width: 26px;
  height: 26px;
  border-radius: 50%;
  font-size: 13px;
  font-weight: 700;
}

.quiz-q__rank {
  background: var(--primary);
  color: var(--primary-text);
}

.quiz-q__letter {
  width: 24px;
  height: 24px;
  background: var(--surface);
  border: 1px solid var(--border-strong);
  font-size: 12px;
}

.quiz-q__label {
  font-size: 15px;
  font-weight: 600;
  line-height: 1.4;
}

.quiz-q__points,
.quiz-q__rank-text {
  color: var(--text-muted);
  font-size: 12.5px;
}

.quiz-q__options {
  display: flex;
  flex-direction: column;
  gap: 8px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.quiz-q__option {
  display: flex;
  align-items: center;
  gap: 10px;
  min-height: var(--tap);
  padding: 6px 10px;
  background: var(--surface-alt);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  cursor: pointer;
}

.quiz-q__option:hover {
  border-color: var(--border-strong);
}

.quiz-q__input {
  flex: none;
  width: 22px;
  height: 22px;
  accent-color: var(--primary);
  cursor: pointer;
}

.quiz-q__text {
  font-size: 14.5px;
  line-height: 1.4;
}

.quiz-q__text-input,
.quiz-q__long {
  width: 100%;
}

.quiz-q__long {
  min-height: 120px;
}

.quiz-form,
.quiz-edit {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.quiz-form__total,
.quiz-form__questions {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.quiz-edit {
  padding: 12px 14px;
  background: var(--surface-alt);
  border: 1px solid var(--border);
  border-radius: var(--radius);
}

.quiz-edit__head {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 10px;
}

.quiz-edit__rank {
  color: var(--text-muted);
  font-size: 12.5px;
  font-weight: 700;
  text-transform: uppercase;
}

.quiz-edit__options {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.quiz-edit__option {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 9px;
}

.quiz-edit__option .input {
  flex: 1 1 180px;
  min-width: 0;
}

.quiz-form__actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 10px;
}

.note__image {
  display: block;
  width: 100%;
  max-height: 340px;
  margin-top: 4px;
  object-fit: contain;
  background: var(--bg-alt);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
}

.board {
  gap: 22px;
}

.board__feed {
  gap: 14px;
}

.board > .card--personal {
  margin-top: 6px;
}

.app-nav::-webkit-scrollbar {
  width: 6px;
}

.app-nav::-webkit-scrollbar-track {
  background: transparent;
}

.app-nav::-webkit-scrollbar-thumb {
  background: var(--nav-border);
  border-radius: 999px;
}

.app-nav::-webkit-scrollbar-thumb:hover {
  background: var(--nav-fg-muted);
}

.recipient-builder__buttons {
  gap: 14px;
}

.recipient-btn {
  min-width: 172px;
  justify-content: center;
  border-radius: var(--radius);
}

.recipient-builder {
  gap: 14px;
}

.slot--clickable {
  cursor: pointer;
}

.slot--clickable:active {
  filter: brightness(0.97);
}

.slot--short .slot__time {
  font-size: 10.5px;
}

.slot-work__when {
  margin: 0 0 12px;
  padding: 8px 10px;
  border-radius: var(--radius-sm);
  background: var(--surface-alt);
  font-size: 13px;
}

.slot-work__form {
  display: flex;
  flex-direction: column;
  gap: 10px;
  margin-bottom: 18px;
  padding-bottom: 16px;
  border-bottom: 1px solid var(--border);
}

.slot-work__title {
  margin: 0;
  font-size: 14px;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--text-muted);
}

.slot-work__files {
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.today-row--cancelled .today-row__time,
.today-row--cancelled .today-row__subject {
  text-decoration: line-through;
  color: var(--text-muted);
}

.today-row__flag {
  margin-left: auto;
  align-self: center;
  padding: 2px 8px;
  border-radius: 999px;
  background: var(--danger-soft, #FBE9E7);
  color: var(--danger, #B3261E);
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.04em;
}

.card--today,
.card--spaced {
  margin-top: 16px;
}

.menu-sheet {
  display: grid;
  gap: 6px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.menu-sheet__item {
  display: flex;
  align-items: center;
  gap: 12px;
  width: 100%;
  min-height: 48px;
  padding: 10px 14px;
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  background: var(--surface);
  color: var(--text);
  font: inherit;
  font-size: 15px;
  text-align: left;
  cursor: pointer;
}

.menu-sheet__item:hover,
.menu-sheet__item:focus-visible {
  border-color: var(--primary);
  background: var(--surface-alt);
}

.menu-sheet__item--danger {
  color: var(--danger, #B3261E);
  border-color: var(--danger, #B3261E);
}

.menu-sheet__label {
  min-width: 0;
}

.releve__scroll {
  overflow-x: auto;
  padding-bottom: 6px;
}

.releve {
  width: 100%;
  border-collapse: collapse;
  font-size: 13px;
}

.releve__col-name {
  min-width: 190px;
}

.releve__col-mark {
  min-width: 92px;
}

.releve__col-average {
  min-width: 96px;
}

.releve__th {
  position: sticky;
  top: 0;
  padding: 8px 10px;
  background: var(--primary);
  color: #ffffff;
  text-align: center;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.04em;
  vertical-align: bottom;
}

.releve__th--name {
  text-align: left;
}

.releve__subject,
.releve__title {
  display: block;
  line-height: 1.3;
}

.releve__title {
  margin-top: 2px;
  font-weight: 500;
  text-transform: none;
  letter-spacing: 0;
}

.releve__name {
  padding: 7px 10px;
  text-align: left;
  font-weight: 600;
  white-space: nowrap;
}

.releve__cell {
  padding: 7px 8px;
  text-align: center;
  font-variant-numeric: tabular-nums;
  border-bottom: 1px solid var(--border);
}

.releve__cell--empty {
  color: var(--text-faint);
}

.releve__cell--absent {
  color: var(--danger, #B3261E);
  font-weight: 700;
}

.releve__cell.is-new {
  border-radius: var(--radius-sm);
  background: var(--primary-soft, #E8F0FB);
  color: var(--primary);
  font-weight: 700;
}

.releve__average {
  padding: 7px 10px;
  text-align: center;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
  border-bottom: 1px solid var(--border);
}

.releve__average--low {
  color: var(--danger, #B3261E);
}

.releve tbody tr:nth-child(even) .releve__cell,
.releve tbody tr:nth-child(even) .releve__name,
.releve tbody tr:nth-child(even) .releve__average {
  background: var(--surface-alt);
}

.releve__legend {
  margin: 10px 0 0;
  font-size: 12px;
}

.recipient-buttons {
  display: flex;
  flex-wrap: wrap;
  gap: 14px;
  align-items: center;
}

.recipient-buttons + .recipient-buttons {
  margin-top: 14px;
}

.recipient-builder {
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.recipient-builder__row,
.recipient-builder__picked {
  margin-top: 14px;
}

.level-pick {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 7px 0;
  border-bottom: 1px solid var(--border);
}

.level-pick__name {
  flex: 1;
  font-size: 14px;
  color: var(--text);
}

.level-pick__coef {
  font-size: 12px;
  color: var(--text-muted);
}

.level-pick .input--num {
  width: 76px;
}

.field__hint {
  margin: 2px 0 8px;
  font-size: 12px;
  line-height: 1.5;
}

.subject-averages {
  margin: 0 0 22px;
}

.subject-averages__title {
  margin: 0 0 4px;
  font-size: 15px;
  letter-spacing: 0.02em;
}

.subject-averages__scroll {
  overflow-x: auto;
  padding-bottom: 6px;
}

.subject-averages__table {
  width: 100%;
  border-collapse: collapse;
  font-size: 13px;
}

.subject-averages__col-subject {
  width: 40%;
}

.subject-averages__col-coef {
  width: 68px;
}

.subject-averages__col-average {
  width: 132px;
}

.subject-averages__col-detail {
  width: 40%;
}

.subject-averages__th {
  padding: 7px 10px;
  text-align: left;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.04em;
  color: var(--text-muted);
  border-bottom: 2px solid var(--border);
  white-space: nowrap;
}

.subject-averages__th--average {
  text-align: center;
}

.subject-averages__subject {
  padding: 8px 10px;
  text-align: left;
  font-weight: 600;
  border-bottom: 1px solid var(--border);
}

.subject-averages__name {
  display: block;
  letter-spacing: 0.03em;
}

.subject-averages__teacher {
  display: block;
  margin-top: 2px;
  font-size: 12px;
  font-weight: 400;
  color: var(--text-muted);
}

.subject-averages__coef,
.subject-averages__average,
.subject-averages__general {
  padding: 8px 10px;
  text-align: center;
  font-variant-numeric: tabular-nums;
  border-bottom: 1px solid var(--border);
}

.subject-averages__detail {
  padding: 8px 10px;
  font-size: 12px;
  color: var(--text-muted);
  border-bottom: 1px solid var(--border);
  line-height: 1.35;
}

.subject-averages__value {
  font-size: 15px;
  font-weight: 700;
}

.subject-averages__value.is-empty {
  color: var(--text-faint);
  font-weight: 400;
}

.subject-averages__table tr.is-empty .subject-averages__subject {
  color: var(--text-muted);
}

.subject-averages__table tbody tr:nth-child(even) td,
.subject-averages__table tbody tr:nth-child(even) th {
  background: var(--surface-alt);
}

.subject-averages tfoot td,
.subject-averages tfoot th {
  border-top: 2px solid var(--border);
  border-bottom: none;
  font-weight: 700;
}

.subject-averages__general-label {
  padding: 8px 10px;
  text-align: left;
  letter-spacing: 0.05em;
}

.subject-averages__general-count {
  display: block;
  margin-top: 2px;
  font-size: 11px;
  font-weight: 400;
  color: var(--text-muted);
}

.subject-averages__legend {
  margin: 10px 0 0;
  font-size: 12px;
}

.coef-note {
  margin-left: 2px;
  font-size: 0.72em;
  font-weight: 500;
  font-style: normal;
  line-height: 1;
  vertical-align: baseline;
  color: var(--text-muted);
  white-space: nowrap;
}

.screen--app[data-view="bulletins"] .toolbar {
  display: none;
}

.card--bulletin {
  display: flex;
  flex-direction: column;
  align-items: stretch;
  gap: 10px;
  padding: 16px;
  text-align: left;
  cursor: default;
}

.card--bulletin .card__title {
  margin: 0;
}

.bulletin-roster {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.bulletin-roster__scroll {
  overflow-x: auto;
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
}

.bulletin-roster__table {
  width: 100%;
  min-width: 760px;
  border-collapse: collapse;
}

.bulletin-roster__table th,
.bulletin-roster__table td {
  padding: 8px 10px;
  border-bottom: 1px solid var(--border);
  text-align: left;
  vertical-align: middle;
}

.bulletin-roster__table thead th {
  background: var(--surface-alt);
  color: var(--text-muted);
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  white-space: nowrap;
}

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

.bulletin-roster__row--muted {
  background: var(--surface-alt);
  color: var(--text-muted);
}

.bulletin-roster__who {
  min-width: 150px;
}

.bulletin-roster__name {
  display: block;
  font-weight: 600;
}

.bulletin-roster__flag {
  display: block;
  margin-top: 2px;
  font-size: 11.5px;
  color: var(--text-faint);
}

.bulletin-roster__num {
  width: 84px;
  text-align: right;
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}

.bulletin-roster__state {
  width: 176px;
}

.bulletin-roster__table td .input--area {
  min-width: 220px;
}

.input--area.input--sm {
  min-height: 64px;
  font-size: 13.5px;
}

.chip--ok {
  background: var(--success-bg);
  border-color: var(--success-border);
  color: var(--success);
}

.bulletin-closing__list {
  display: flex;
  flex-direction: column;
  gap: 8px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.bulletin-closing__item {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 10px;
  min-height: var(--tap);
  padding: 8px 10px;
  background: var(--surface-alt);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
}

.bulletin-closing__item.is-on {
  border-color: var(--primary);
  box-shadow: inset 3px 0 0 var(--primary);
}

.bulletin-closing__name {
  flex: 1 1 160px;
  min-width: 0;
  font-weight: 600;
}

.bulletin-closing__mention {
  color: var(--text-muted);
  font-size: 12.5px;
}

.bulletin-closing__flag {
  flex: 1 1 100%;
  font-size: 11.5px;
  color: var(--text-faint);
}

.bulletin-closing__actions {
  display: flex;
  flex: none;
  gap: 8px;
}

/* Les groupes d'élèves. La pastille prend la couleur du groupe : c'est le seul
   endroit où cette couleur est peinte, donc la couleur reste vérifiable d'un coup
   d'œil — une couleur illisible se voit ici avant d'atterrir ailleurs. */
.card--groupes .groupes__list {
  display: flex;
  flex-direction: column;
  gap: 8px;
  margin: 12px 0 0;
  padding: 0;
  list-style: none;
}

.card--groupes .groupes__item {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 12px;
  background: var(--bg-alt);
  border: 1px solid var(--border);
  border-radius: var(--radius);
}

.card--groupes .groupes__item.is-on {
  border-color: var(--primary);
}

.card--groupes .groupes__pastille {
  flex: none;
  width: 14px;
  height: 14px;
  border-radius: 50%;
  /* La couleur vient de la donnée, posée par setVar(). La valeur de repli est
     celle de l'établissement : un groupe sans couleur reste lisible. */
  background: var(--pastille, var(--primary));
}

.card--groupes .groupes__nom {
  flex: 1 1 auto;
  font-weight: 600;
}

.card--groupes .groupes__actions {
  display: flex;
  flex: none;
  gap: 6px;
}

.card--groupes .groupes__bar {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 12px;
}

.card--groupes .groupes__form {
  display: flex;
  flex-direction: column;
  gap: 12px;
  margin-top: 14px;
  padding: 14px;
  background: var(--bg-alt);
  border: 1px solid var(--border);
  border-radius: var(--radius);
}

.card--groupes .groupes__champs {
  display: flex;
  flex-wrap: wrap;
  align-items: end;
  gap: 10px;
}

.card--groupes .field--couleur .input {
  width: 56px;
  padding: 2px;
}

.card--groupes .groupes__eleves {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(170px, 1fr));
  gap: 4px 12px;
  max-height: 260px;
  overflow-y: auto;
  margin: 0;
  padding: 0;
  list-style: none;
}

.card--groupes .groupes__eleve {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 4px 0;
}

.card--groupes .groupes__pied {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}

/* Le filtre des groupes transversaux. Il masque des lignes, il ne retire rien
   de la sélection : « tout cocher » ne coche que ce qui est visible. */
.card--groupes .groupes__filtre {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
}

.card--groupes .groupes__filtre .input {
  flex: 0 1 auto;
}

.card--groupes .groupes__filtre-actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
}

.card--groupes .groupes__visible {
  white-space: nowrap;
}

.card--groupes .groupes__classe {
  margin-left: auto;
  padding-left: 8px;
  color: var(--muted);
  font-size: 0.82em;
  white-space: nowrap;
}

.card--groupes .groupes__eleve label {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* La permutation LV1 / LV2 : deux colonnes qui se lisent comme deux listes
   d'appel. Sous 900 px, elles s'empilent — la même coquille tient sur iPad. */
.permutation {
  display: flex;
  flex-direction: column;
  gap: 14px;
}

.permutation__colonnes {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 14px;
}

.permutation__colonne {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.permutation__effectif {
  margin: 0;
  color: var(--muted);
  font-size: 0.9em;
}

.permutation__eleves {
  display: flex;
  flex-direction: column;
  gap: 4px;
  max-height: 360px;
  overflow-y: auto;
  margin: 0;
  padding: 0;
  list-style: none;
}

.permutation__eleve {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  padding: 6px 8px;
  border-bottom: 1px solid var(--border);
}

.permutation__nom {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.permutation__actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 12px;
}

@media (max-width: 900px) {
  .permutation__colonnes {
    grid-template-columns: 1fr;
  }
}

/* Le relevé trimestriel : la date, puis l'effectif. La date est mise en
   avant quand elle est atteinte — c'est le seul jour où la carte devient
   actionnable, et elle doit se voir. */
.card--releve .releve__date {
  margin: 0 0 10px;
  padding: 8px 10px;
  border-left: 3px solid var(--border);
  border-radius: var(--radius);
  background: var(--bg-alt);
  color: var(--text-faint);
  font-size: 12.5px;
}

.card--releve .releve__date.is-open {
  border-left-color: var(--success);
  color: var(--text);
  font-weight: 600;
}

.card--releve .releve__rule {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
  margin-bottom: 10px;
}

.card--releve .releve__rule .input {
  flex: 0 1 auto;
  min-width: 160px;
}

.bulletin-closing__form {
  display: flex;
  flex-direction: column;
  gap: 10px;
  padding: 14px;
  background: var(--bg-alt);
  border: 1px solid var(--border);
  border-radius: var(--radius);
}

.bulletin-closing__title {
  margin: 0;
  font-size: 16px;
}

/* ===========================================================================
   Mise en page de la coquille : tablette et téléphone.

   Une barre latérale verticale vit bien sur un iPad en paysage ; sur un écran
   étroit elle prendrait la moitié de la largeur utile. Elle passe donc en
   bandeau horizontal au-dessus du contenu, et la vitrine de connexion
   disparaît : sur un téléphone, le formulaire seul tient déjà tout l'écran.
   =========================================================================== */

@media (max-width: 900px) {
  .screen--app {
    grid-template-columns: minmax(0, 1fr);
    grid-template-rows: auto auto minmax(0, 1fr);
  }

  .screen--app .topbar {
    grid-column: 1;
    grid-row: 1;
  }

  .screen--app .app-nav {
    grid-column: 1;
    grid-row: 2;
    position: static;
    flex-direction: row;
    gap: 6px;
    width: auto;
    height: auto;
    padding: 8px calc(var(--space) + env(safe-area-inset-right)) 8px
      calc(var(--space) + env(safe-area-inset-left));
    border-right: 0;
    border-bottom: 1px solid var(--nav-border);
    overflow-x: auto;
    overflow-y: hidden;
  }

  .screen--app .app-nav .tab {
    flex: 0 0 auto;
    border-radius: var(--radius);
    min-height: var(--tap);
  }

  .screen--app .app-main {
    grid-column: 1;
    grid-row: 3;
  }

  .topbar__user-name {
    max-width: 34vw;
  }

  .login {
    grid-template-columns: minmax(0, 1fr);
  }

  .login__panel {
    border-right: 0;
  }

  .login__aside {
    display: none;
  }
}

@media (max-width: 620px) {
  .topbar__school {
    font-size: 15px;
  }

  .topbar__sub {
    display: none;
  }

  .topbar__signout .btn__label {
    display: none;
  }
}

@media print {
  .app-nav,
  .topbar__actions {
    display: none;
  }

  .screen--app {
    display: block;
  }
}

/*
  Les propositions de mention des professeurs.
  Elles se lisent AVANT de choisir : encadré, signé, et jamais confondu avec la
  mention du bulletin.
*/
.bulletin-mentions {
  display: grid;
  gap: 8px;
  padding: 12px 14px;
  background: var(--surface-alt);
  border: 1px solid var(--border);
  border-radius: var(--radius);
}

.bulletin-mentions__list {
  display: grid;
  gap: 8px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.bulletin-mentions__item {
  display: flex;
  align-items: baseline;
  flex-wrap: wrap;
  gap: 8px;
  font-size: 14px;
}

.bulletin-mentions__who {
  font-weight: 600;
}

.bulletin-mentions__what {
  padding: 2px 9px;
  border-radius: 999px;
  background: var(--selection);
  font-size: 13px;
  font-weight: 600;
}

.bulletin-mentions__why {
  flex: 1 1 100%;
  color: var(--text-muted);
  font-size: 13px;
  line-height: 1.5;
}

/* ---------------------------------------------------------------------------
   LE RELEVÉ AFFICHÉ.

   Ce n'est pas une chaîne HTML injectée : c'est du DOM, et sa feuille de style
   vit ICI, dans app.css. La raison n'est pas d'élégance — la CSP de
   l'application refuse le style en ligne (`style-src 'self'`), donc une balise
   `<style>` à l'intérieur du relevé serait ignorée et le document s'afficherait
   NU, en texte sans mise en page. C'est exactement ce que la famille ne doit
   pas recevoir.
--------------------------------------------------------------------------- */

.releve-doc {
  display: flex;
  flex-direction: column;
  gap: 16px;
  padding: 20px;
  background: var(--bg);
  color: var(--text);
}

.releve-doc__bar {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-start;
  justify-content: space-between;
  gap: 12px;
  padding-bottom: 12px;
  border-bottom: 3px solid var(--primary);
}

.releve-doc__marque {
  display: flex;
  flex-direction: column;
  gap: 1px;
  font-size: 12px;
  color: var(--text-faint);
}

.releve-doc__marque strong {
  font-size: 14px;
  letter-spacing: 0.04em;
  color: var(--primary);
}

.releve-doc__actions {
  display: flex;
  gap: 8px;
}

.releve-doc__titre {
  margin: 0;
  font-size: 24px;
  color: var(--primary);
}

.releve-doc__sous-titre {
  margin: -10px 0 0;
  color: var(--text-muted);
}

.releve-doc__identite {
  display: flex;
  flex-wrap: wrap;
  gap: 10px 32px;
  margin: 0;
  padding: 12px;
  background: var(--bg-alt);
  border: 1px solid var(--border);
  border-radius: var(--radius);
}

.releve-doc__identite dt {
  font-size: 10px;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--text-faint);
}

.releve-doc__identite dd {
  margin: 0;
  font-weight: 600;
}

.releve-doc__moyenne {
  font-size: 20px;
  color: var(--primary);
}

.releve-doc__table {
  width: 100%;
  border-collapse: collapse;
  font-size: 13px;
}

.releve-doc__table thead th {
  padding: 8px 10px;
  background: var(--primary);
  color: var(--primary-text);
  text-align: left;
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.05em;
}

.releve-doc__table tbody th,
.releve-doc__table tbody td {
  padding: 8px 10px;
  border-bottom: 1px solid var(--border);
  text-align: left;
  vertical-align: top;
}

.releve-doc__table tbody tr:nth-child(even) {
  background: var(--bg-alt);
}

.releve-doc__matiere {
  display: block;
  font-size: 13px;
}

.releve-doc__prof,
.releve-doc__coef {
  display: block;
  font-size: 11px;
  font-weight: 400;
  color: var(--text-faint);
}

.releve-doc__moyenne-cell {
  width: 84px;
  font-size: 16px;
  font-weight: 700;
  text-align: center;
}

.releve-doc__notes {
  margin: 0;
  padding: 0;
  list-style: none;
}

.releve-doc__notes li {
  display: flex;
  justify-content: space-between;
  gap: 12px;
  padding: 1px 0;
}

.releve-doc__notes .is-vide {
  color: var(--text-faint);
  font-style: italic;
}

.releve-doc__note-valeur {
  white-space: nowrap;
  font-variant-numeric: tabular-nums;
}

.releve-doc__general th,
.releve-doc__general td {
  border-top: 2px solid var(--primary);
  background: var(--bg-alt);
  font-weight: 700;
}

.releve-doc__general td span {
  display: block;
  font-weight: 400;
  font-size: 12px;
}

.releve-doc__pied {
  margin: 0;
  padding-top: 10px;
  border-top: 1px solid var(--border);
  color: var(--text-faint);
  font-size: 11.5px;
}

@media print {
  .releve-doc__actions {
    display: none;
  }
}

/* La surcouche du relevé. Elle couvre l'écran et se ferme d'un geste : un
   relevé doit se lire sur place, à côté du reste de l'application, pas dans un
   onglet qu'on oublie ouvert. */
.releve-overlay {
  position: fixed;
  inset: 0;
  z-index: 60;
  overflow-y: auto;
  background: var(--bg);
}

.releve-overlay[hidden] {
  display: none;
}

body.has-releve {
  overflow: hidden;
}

/* Un nom de division se corrige en place. Le champ garde la place du texte
   qu'il remplace, pour que la liste ne se décale pas d'une ligne à chaque
   correction. */
.list__label--editable {
  min-width: 5.5rem;
  max-width: 12rem;
  font-weight: 600;
}

/* Le barème à côté de la note : « 15 /10 ». Le même traitement que le
   coefficient — plus petit, accolé, et surtout ABSENT quand le barème est le
   classique sur 20. L'afficher en permanence noierait la case sous du bruit. */
.grades__mark-scale {
  margin-left: 1px;
  font-size: 0.68em;
  font-weight: 500;
  line-height: 1;
  white-space: nowrap;
  opacity: 0.75;
}

/* ===========================================================================
   LA LISTE DE CLASSE IMPRIMABLE
   =========================================================================== */

.liste-doc {
  --encre: #1b1b1f;
  background: #fff;
  color: var(--encre);
  padding: 18mm 14mm;
  border-radius: 14px;
  box-shadow: 0 1px 2px rgb(0 0 0 / 8%);
}

.liste-doc__bar {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 16px;
  padding-bottom: 8px;
  border-bottom: 2px solid var(--brand);
}

.liste-doc__marque {
  display: grid;
  gap: 2px;
  font-size: 11px;
  line-height: 1.35;
  color: #4a4a52;
}

.liste-doc__marque strong {
  font-size: 13px;
  color: var(--brand);
  letter-spacing: 0.01em;
}

.liste-doc__actions {
  display: flex;
  gap: 8px;
  flex: 0 0 auto;
}

.liste-doc__haut {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 12px;
  margin: 14px 0 10px;
}

.liste-doc__titre {
  margin: 0;
  font-size: 17px;
  font-weight: 700;
  color: var(--brand);
}

.liste-doc__meta {
  margin: 0;
  font-size: 11px;
  color: #6a6a72;
}

/* Le filtre actif est écrit sur la feuille. Une liste de trois élèves
   imprimée sans le dire se lit, le lendemain, comme une liste entière. */
.liste-doc__filtre {
  margin: -4px 0 10px;
  font-size: 11px;
  font-style: italic;
  color: #8a5a00;
}

.liste-doc__cadre {
  overflow-x: auto;
}

.liste-doc__table {
  width: 100%;
  border-collapse: collapse;
  font-size: 12px;
}

.liste-doc__table th,
.liste-doc__table td {
  padding: 5px 8px;
  border: 1px solid #d8d8de;
  text-align: left;
  vertical-align: middle;
}

.liste-doc__table thead th {
  background: #f1f4f9;
  font-weight: 700;
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.03em;
  color: #33333a;
}

.liste-doc__col.est-droite,
.liste-doc__num {
  text-align: right;
  font-variant-numeric: tabular-nums;
}

.liste-doc__num {
  width: 3.2rem;
  color: #6a6a72;
  font-size: 11px;
}

/* Un élève à cinq points ou moins se repère d'un coup d'œil. La couleur est
   doublée d'un fond : à l'impression en niveaux de gris, elle se lit encore. */
.liste-doc__col.est-alerte {
  color: #a11b1b;
  font-weight: 700;
  background: #fdeeee;
}

.liste-doc__pied {
  display: flex;
  justify-content: space-between;
  gap: 12px;
  margin-top: 12px;
  font-size: 10.5px;
  color: #6a6a72;
}

/* L'écran de réglage : l'aperçu à gauche, les colonnes à droite. */
.liste-opts {
  display: grid;
  grid-template-columns: minmax(0, 1.15fr) minmax(280px, 0.85fr);
  gap: 20px;
  align-items: start;
}

.liste-opts__apercu {
  min-width: 0;
}

.liste-opts__panneau {
  display: grid;
  gap: 10px;
  padding: 14px;
  border: 1px solid var(--border);
  border-radius: 12px;
  background: var(--surface);
}

.liste-opts__ordre {
  display: grid;
  gap: 6px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.liste-opts__ligne {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto auto auto;
  align-items: center;
  gap: 4px;
  padding: 6px 8px;
  border: 1px solid var(--border);
  border-radius: 9px;
}

.liste-opts__nom {
  font-size: 0.9rem;
  font-weight: 600;
}

.liste-opts__ajout {
  display: grid;
  gap: 6px;
  padding-top: 8px;
  border-top: 1px solid var(--border);
}

.liste-opts__boutons {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}

@media (max-width: 900px) {
  .liste-opts {
    grid-template-columns: minmax(0, 1fr);
  }
}

/* ---- L'impression : la feuille sort seule. ------------------------------ */
@media print {
  @page {
    size: A4 portrait;
    margin: 12mm;
  }

  body * {
    visibility: hidden !important;
  }

  /*  ``visibility`` et non ``display`` : ``display:none`` ferait disparaître
      la feuille elle-même, et l'impression sortirait vide. La feuille seule
      redevient visible, à sa place dans le flux. */
  .liste-doc,
  .liste-doc * {
    visibility: visible !important;
  }

  .liste-doc {
    position: absolute;
    inset: 0 auto auto 0;
    width: 100%;
    padding: 0;
    box-shadow: none;
    border-radius: 0;
  }

  .liste-doc__actions {
    display: none;
  }

  /*  C'est ``table-header-group`` qui fait répéter la ligne d'en-tête en haut
      de CHAQUE page. Sans elle, une liste de deux pages devient illisible dès la
      seconde : on ne sait plus quelle colonne on lit. */
  .liste-doc__table thead {
    display: table-header-group;
  }

  .liste-doc__table tr {
    break-inside: avoid;
  }
}

/* La création d'une colonne : un champ et un bouton, sur une ligne. */
.liste-opts__creation {
  display: flex;
  align-items: flex-end;
  gap: 8px;
  padding-top: 8px;
  border-top: 1px solid var(--border);
}

/* ===========================================================================
   L'IGADGET
   =========================================================================== */

.igadget {
  display: grid;
  gap: 16px;
}

.igadget__tuiles {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
  gap: 12px;
}

.igadget__tuile {
  display: grid;
  gap: 2px;
  padding: 14px 16px;
  border: 1px solid var(--border);
  border-radius: 12px;
  background: var(--surface);
}

.igadget__tuile-nombre {
  font-size: 1.7rem;
  font-weight: 700;
  line-height: 1.1;
  color: var(--brand);
}

.igadget__tuile-label {
  font-size: 0.78rem;
  color: var(--muted, #6a6a72);
}

.igadget__barre {
  display: flex;
  align-items: flex-end;
  gap: 10px;
  margin-bottom: 12px;
}

.igadget__nom {
  display: block;
  font-weight: 600;
}

.igadget__ip {
  font-family: ui-monospace, "DejaVu Sans Mono", monospace;
  font-size: 0.82rem;
  white-space: nowrap;
}

.igadget__navigateur {
  max-width: 16rem;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-size: 0.82rem;
  color: var(--muted, #6a6a72);
}

/* Un compte banni se voit : la ligne entière porte la marque, pas seulement
   une étiquette qu'on pourrait rater. */
.igadget__ligne--bannie {
  background: color-mix(in srgb, #a11b1b 8%, transparent);
}

.igadget__durees {
  display: grid;
  gap: 6px;
}

.tag--alerte {
  background: color-mix(in srgb, #a11b1b 18%, transparent);
  color: #a11b1b;
  font-weight: 700;
}

.tag--ok {
  background: color-mix(in srgb, #0f7a4d 18%, transparent);
  color: #0f7a4d;
  font-weight: 600;
}

.tag--calme {
  background: color-mix(in srgb, #4a4a52 14%, transparent);
  color: #4a4a52;
}