/*
 * Composants communs MySchool (écrits à la main).
 * N'utiliser QUE les variables de design-tokens.css (--ms-*), jamais de couleur en dur.
 * Teinte d'un composant : ajouter une classe .ms-tone-* (primary, success, warning, danger, info,
 * ou un rôle : student, teacher, parent, staff...). Voir PLAN_DESIGN_SYSTEM.md.
 */

/* ── Titre de carte ─────────────────────────────────────────────────────── */
.ms-card-title { display: flex; align-items: center; gap: var(--ms-space-2); font-size: var(--ms-font-size-lg); font-weight: 600; color: var(--ms-color-text); margin: 0 0 var(--ms-space-4); }
.ms-card-title .mdi { color: rgb(var(--ms-tone-rgb, var(--ms-color-primary-rgb))); font-size: 1.25rem; }
.ms-card-title .ms-card-title-action { margin-left: auto; font-size: var(--ms-font-size-sm); font-weight: 600; }

/* ── Bandeau d'accueil ──────────────────────────────────────────────────── */
.ms-hero { border: 0; border-radius: var(--ms-radius-lg); color: var(--ms-color-on-primary);
  background: linear-gradient(135deg, var(--ms-color-primary) 0%, var(--ms-color-primary-active) 100%); }
.ms-hero .card-body { padding: var(--ms-space-5); }
.ms-hero h2 { color: var(--ms-color-on-primary); font-size: var(--ms-font-size-3xl); font-weight: 700; margin: 0 0 var(--ms-space-1); }
.ms-hero .ms-hero-muted { color: rgba(var(--ms-color-on-primary-rgb), .8); }
.ms-hero strong { color: var(--ms-color-on-primary); }

/* ── Carte de chiffre clé (KPI) ─────────────────────────────────────────── */
.ms-kpi { border: 0; height: 100%; border-radius: var(--ms-card-radius); }
.ms-kpi .card-body { display: flex; flex-direction: column; gap: var(--ms-space-2); }
.ms-kpi-head { display: flex; align-items: flex-start; justify-content: space-between; gap: var(--ms-space-3); }
.ms-kpi-label { font-size: var(--ms-font-size-xs); font-weight: 600; text-transform: uppercase; letter-spacing: .04em; color: var(--ms-color-text-muted); margin: 0; }
.ms-kpi-value { font-size: var(--ms-font-size-3xl); font-weight: 700; color: var(--ms-color-text); line-height: 1.15; margin: 0; font-variant-numeric: tabular-nums; }
.ms-kpi-value.ms-kpi-value-sm { font-size: var(--ms-font-size-2xl); } /* montants : plus longs que des effectifs */
.ms-kpi-meta { font-size: var(--ms-font-size-sm); color: var(--ms-color-text-muted); margin-top: auto; }
.ms-kpi-link { font-size: var(--ms-font-size-sm); font-weight: 600; color: rgb(var(--ms-tone-rgb)); text-decoration: none; margin-top: auto; }
.ms-kpi-link:hover { text-decoration: underline; color: rgb(var(--ms-tone-rgb)); }
.ms-kpi .progress { height: 6px; background-color: rgba(var(--ms-tone-rgb), .15); border-radius: var(--ms-radius-pill); }
.ms-kpi .progress-bar { background-color: rgb(var(--ms-tone-rgb)); }

/* Pastille d'icône colorée (KPI, lignes de statistiques) */
.ms-icon-chip { display: inline-flex; align-items: center; justify-content: center; flex-shrink: 0;
  width: 44px; height: 44px; border-radius: var(--ms-radius-md); font-size: 1.4rem;
  color: rgb(var(--ms-tone-rgb, var(--ms-color-primary-rgb))); background-color: rgba(var(--ms-tone-rgb, var(--ms-color-primary-rgb)), .12); }
.ms-icon-chip.ms-icon-chip-sm { width: 36px; height: 36px; font-size: 1.15rem; }

/* ── Ligne de statistique (ex. recettes / dépenses / solde) ─────────────── */
.ms-stat { display: flex; align-items: center; gap: var(--ms-space-3); padding: var(--ms-space-3); border-radius: var(--ms-radius-md);
  background-color: rgba(var(--ms-tone-rgb), .07); }
.ms-stat + .ms-stat { margin-top: var(--ms-space-2); }
.ms-stat-label { font-size: var(--ms-font-size-xs); font-weight: 600; text-transform: uppercase; letter-spacing: .04em; color: var(--ms-color-text-muted); margin: 0; }
.ms-stat-value { font-size: var(--ms-font-size-lg); font-weight: 700; color: rgb(var(--ms-tone-rgb)); margin: 0; font-variant-numeric: tabular-nums; }

/* ── Badge teinté (statuts, légendes) ───────────────────────────────────── */
.ms-badge { display: inline-flex; align-items: center; gap: .25rem; padding: .3em .7em; border-radius: var(--ms-badge-radius);
  font-size: var(--ms-font-size-xs); font-weight: 600; color: rgb(var(--ms-tone-rgb)); background-color: rgba(var(--ms-tone-rgb), .12); }
.ms-badge-dot::before { content: ""; width: .5rem; height: .5rem; border-radius: 50%; background-color: rgb(var(--ms-tone-rgb)); }

/* ── Liste d'activité (ex. pointage du jour) ────────────────────────────── */
.ms-feed-item { display: flex; align-items: center; gap: var(--ms-space-3); padding: var(--ms-space-2) var(--ms-space-4);
  border-bottom: 1px solid var(--ms-color-border); }
.ms-feed-item:last-child { border-bottom: 0; }
.ms-feed-title { font-size: var(--ms-font-size-sm); font-weight: 600; color: var(--ms-color-text); }
.ms-feed-meta { font-size: var(--ms-font-size-xs); color: var(--ms-color-text-muted); }

/* ── État vide ──────────────────────────────────────────────────────────── */
.ms-empty { text-align: center; color: var(--ms-color-text-muted); padding: var(--ms-space-6) var(--ms-space-4); }
.ms-empty .mdi { display: block; font-size: 2.25rem; margin-bottom: var(--ms-space-2); color: var(--ms-color-text-subtle); }
/* Bouton d'action dans un état vide (skill : message + action) : son icône garde la taille du bouton */
.ms-empty .btn .mdi { display: inline-block; font-size: inherit; margin-bottom: 0; color: inherit; }

@media (prefers-reduced-motion: reduce) {
  .ms-kpi .progress-bar { transition: none; }
}

/* ── Progression vers un objectif (ex. recouvrement des frais) ─────────────
   Chiffre et objectif écrits à côté de la barre (pas seulement la couleur) */
.ms-target-value { font-size: var(--ms-font-size-3xl); font-weight: 700; color: var(--ms-color-text); line-height: 1.1; font-variant-numeric: tabular-nums; }
.ms-target-caption { font-size: var(--ms-font-size-sm); color: var(--ms-color-text-muted); }
.ms-target-bar { display: flex; height: 12px; border-radius: var(--ms-radius-pill); overflow: hidden; background-color: var(--ms-color-surface-muted); margin: var(--ms-space-3) 0; }
.ms-target-bar > span { display: block; height: 100%; background-color: rgb(var(--ms-tone-rgb)); }

/* Chiffres alignés (montants, effectifs dans les tableaux) */
.ms-num { font-variant-numeric: tabular-nums; }

/* ── Tuile d'action rapide (lien avec pastille d'icône) ──────────────────── */
.ms-actions { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: var(--ms-space-2); }
.ms-action { display: flex; align-items: center; gap: var(--ms-space-3); padding: var(--ms-space-3); min-height: 56px;
  border: 1px solid var(--ms-color-border); border-radius: var(--ms-radius-md); color: var(--ms-color-text); font-weight: 600;
  text-decoration: none; transition: border-color var(--ms-duration-fast), background-color var(--ms-duration-fast); }
.ms-action:hover, .ms-action:focus-visible { color: var(--ms-color-text); border-color: rgb(var(--ms-tone-rgb, var(--ms-color-primary-rgb)));
  background-color: rgba(var(--ms-tone-rgb, var(--ms-color-primary-rgb)), .05); }
.ms-action .ms-icon-chip { width: 36px; height: 36px; font-size: 1.15rem; }

/* ── Date compacte (jour + mois) pour les listes d'événements ────────────── */
.ms-date { display: flex; flex-direction: column; align-items: center; justify-content: center; flex-shrink: 0; width: 48px; height: 48px;
  border-radius: var(--ms-radius-md); color: rgb(var(--ms-tone-rgb, var(--ms-color-primary-rgb))); background-color: rgba(var(--ms-tone-rgb, var(--ms-color-primary-rgb)), .1); line-height: 1; }
.ms-date-day { font-size: var(--ms-font-size-lg); font-weight: 700; }
.ms-date-month { font-size: .65rem; font-weight: 600; text-transform: uppercase; margin-top: 2px; }
@media (prefers-reduced-motion: reduce) { .ms-action { transition: none; } }

/* ── Emploi du temps (grille semaine + liste du jour) ────────────────────── */
.ms-timetable { table-layout: fixed; min-width: 520px; margin: 0; }
.ms-timetable th, .ms-timetable td { padding: var(--ms-space-1); vertical-align: middle; border-color: var(--ms-color-border); }
.ms-timetable thead th { text-align: center; font-size: var(--ms-font-size-xs); font-weight: 600; text-transform: uppercase; color: var(--ms-color-text-muted); background-color: var(--ms-color-surface-muted); }
.ms-timetable thead th.is-today { color: var(--ms-color-on-primary); background-color: var(--ms-color-primary); }
.ms-timetable .ms-time { width: 64px; font-size: var(--ms-font-size-xs); color: var(--ms-color-text-muted); white-space: nowrap; text-align: center; }
.ms-timetable td.is-today { background-color: rgba(var(--ms-color-primary-rgb), .03); }

/* Cours : fond et contour fin teintés selon le statut (.ms-tone-*), texte + icône en plus (pas de barre latérale colorée) */
.ms-slot { border: 1px solid rgba(var(--ms-tone-rgb, var(--ms-color-border-rgb)), .3); background-color: rgba(var(--ms-tone-rgb, var(--ms-color-border-rgb)), .07);
  border-radius: var(--ms-radius-sm); padding: var(--ms-space-1) var(--ms-space-2); font-size: var(--ms-font-size-xs); }
.ms-slot-title { font-weight: 600; color: var(--ms-color-text); line-height: 1.25; }
.ms-slot-meta { color: var(--ms-color-text-muted); }
.ms-slot .ms-badge { font-size: .68rem; padding: .2em .5em; margin-top: 2px; }
/* Boutons de pointage : au moins 24 px de côté (WCAG, cible tactile minimale web) */
.ms-slot-btn { display: inline-flex; align-items: center; gap: .25rem; min-height: 26px; padding: 0 .55rem; margin-top: 4px; font-size: .72rem; font-weight: 600; }
.ms-day-slot { display: flex; align-items: flex-start; gap: var(--ms-space-3); padding: var(--ms-space-3); border-radius: var(--ms-radius-md);
  border: 1px solid var(--ms-color-border); background-color: var(--ms-color-surface-muted); }
.ms-day-slot + .ms-day-slot { margin-top: var(--ms-space-2); }
.ms-day-time { min-width: 56px; text-align: center; }
.ms-day-time strong { display: block; font-size: var(--ms-font-size-md); color: var(--ms-color-text); }
.ms-day-time span { font-size: var(--ms-font-size-xs); color: var(--ms-color-text-muted); }

/* Petite tuile de classe (effectif + nom) */
.ms-mini-tile { padding: var(--ms-space-2); border-radius: var(--ms-radius-md); text-align: center;
  background-color: rgba(var(--ms-tone-rgb, var(--ms-color-primary-rgb)), .07); border: 1px solid rgba(var(--ms-tone-rgb, var(--ms-color-primary-rgb)), .2); }
.ms-mini-tile-value { font-size: var(--ms-font-size-xl); font-weight: 700; color: rgb(var(--ms-tone-rgb, var(--ms-color-primary-rgb))); margin: 0; }
.ms-mini-tile-label { font-size: var(--ms-font-size-xs); font-weight: 600; color: var(--ms-color-text); margin: 0; }
.ms-timetable thead th .ms-today-label { font-weight: 400; text-transform: none; opacity: .9; }

/* ── Pages d'authentification (connexion, mot de passe obligatoire) ──────── */
.ms-auth { display: flex; flex-direction: column; }
.ms-auth-body { width: 100%; max-width: 400px; margin: auto; }
.ms-auth-brand { display: block; text-align: center; margin-bottom: var(--ms-space-2); }
.ms-auth-brand img { height: 64px; width: auto; } /* le « M » occupe environ la moitié de l'image : ~33 px visibles, plus grand que le titre */
.ms-auth-title { text-align: center; font-size: var(--ms-font-size-2xl); font-weight: 700; color: var(--ms-color-text); margin: 0 0 var(--ms-space-2); }
.ms-auth-intro { color: var(--ms-color-text-muted); margin-bottom: var(--ms-space-5); }
.ms-auth-link { color: var(--ms-color-primary); font-size: var(--ms-font-size-sm); font-weight: 600; }
.ms-auth-link:hover { color: var(--ms-color-primary-hover); }
.ms-auth-footer { width: 100%; max-width: 400px; margin: var(--ms-space-6) auto 0; color: var(--ms-color-text-muted); font-size: var(--ms-font-size-sm); }
.ms-password-toggle { cursor: pointer; min-width: 44px; justify-content: center; color: var(--ms-color-text-muted); }
.ms-password-toggle:hover { color: var(--ms-color-text); }
.ms-password-toggle:focus-visible { outline: 2px solid var(--ms-color-primary); outline-offset: -2px; }
/* Règles du mot de passe vérifiées en direct (icône + couleur, pas la couleur seule) */
.ms-password-rules { list-style: none; padding: 0; margin: 0 0 var(--ms-space-4); font-size: var(--ms-font-size-sm); color: var(--ms-color-text-muted); }
.ms-password-rules li { display: flex; gap: var(--ms-space-1); transition: color var(--ms-duration-fast) ease; }
.ms-password-rules li.is-valid { color: var(--ms-color-success); }

/* ── Lien d'évitement (clavier) ─────────────────────────────────────────── */
.ms-skip-link { position: absolute; top: var(--ms-space-2); left: var(--ms-space-2); z-index: 2000; padding: var(--ms-space-2) var(--ms-space-4);
  border-radius: var(--ms-radius-sm); background-color: var(--ms-color-primary); color: var(--ms-color-on-primary); font-weight: 600; }
.ms-skip-link:focus { color: var(--ms-color-on-primary); }
.ms-content { padding-top: var(--ms-space-6); }
.ms-content:focus { outline: none; }

/* ── Barre du haut : surface claire, bordure, texte des jetons ──────────── */
.ms-topbar { background-color: var(--ms-color-surface); border-bottom: 1px solid var(--ms-color-border); box-shadow: none; }
.ms-topbar .topnav-logo { min-width: unset; }
.ms-topbar-school { float: left; margin: 0; line-height: 70px; font-size: var(--ms-font-size-lg); font-weight: 700; color: var(--ms-color-text);
  max-width: 40vw; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ms-topbar .topbar-menu .nav-link { color: var(--ms-color-text-muted); }
.ms-topbar .topbar-menu .nav-link:hover, .ms-topbar .topbar-menu .show > .nav-link { color: var(--ms-color-primary); }
.ms-topbar .nav-link:focus-visible, .ms-topbar .button-menu-mobile:focus-visible { outline: 2px solid var(--ms-color-primary); outline-offset: -4px; border-radius: var(--ms-radius-sm); }
.ms-topbar .nav-user { background-color: var(--ms-color-surface-muted); border-color: var(--ms-color-border); }
.ms-topbar .nav-user .account-user-name { color: var(--ms-color-text); }
.ms-topbar .nav-user .account-position { color: var(--ms-color-text-muted); }
.ms-topbar .button-menu-mobile .lines { margin-top: 0; } /* un <button> centre déjà son contenu */
.ms-topbar .button-menu-mobile .lines span { background-color: var(--ms-color-text); }
/* Année de travail (barre du haut) : icône + année, séparées du nom de l'école par un trait, sans fond ni contour ; menu des
   années ; autre année que l'année par défaut : icône d'alerte (forme et couleur) et note dans le menu */
.ms-topbar-year { float: left; margin: 13px 0 0 var(--ms-space-4); padding-left: var(--ms-space-4); border-left: 1px solid var(--ms-color-border); }
.ms-year-pill { display: inline-flex; align-items: center; gap: var(--ms-space-2); min-height: 44px; padding: 0 var(--ms-space-1);
  border: 0; border-radius: var(--ms-radius-sm); background: none; color: var(--ms-color-text); font: inherit; line-height: 1.2; text-align: left;
  transition: color var(--ms-duration-fast) ease; }
button.ms-year-pill { cursor: pointer; }
.ms-topbar-year .ms-year-pill.show { display: inline-flex !important; } /* le thème force .dropdown button.show en inline-block */
button.ms-year-pill:hover, .ms-topbar-year.show .ms-year-pill, button.ms-year-pill:hover .ms-year-caret, .ms-topbar-year.show .ms-year-caret { color: var(--ms-color-primary); }
.ms-year-pill:focus-visible { outline: 2px solid var(--ms-color-primary); outline-offset: 2px; }
.ms-year-icon { display: inline-flex; flex-shrink: 0; color: var(--ms-color-text-muted); font-size: 1.25rem; }
.ms-year-value { font-size: var(--ms-font-size-md); font-weight: 700; white-space: nowrap; }
.ms-year-caret { color: var(--ms-color-text-muted); font-size: 1.1rem; transition: transform var(--ms-duration-fast) ease, color var(--ms-duration-fast) ease; }
.ms-topbar-year.show .ms-year-caret { transform: rotate(180deg); }
/* Autre année que l'année par défaut : icône d'alerte (autre forme, couleur d'alerte) ; la note du menu l'explique */
.ms-year-pill.is-other .ms-year-icon { color: var(--ms-color-warning-hover); }
.ms-topbar-year .ms-menu { margin-top: var(--ms-space-2) !important; }
.ms-menu-note { display: flex; gap: var(--ms-space-2); margin: 0; padding: var(--ms-space-2) var(--ms-space-4); border-bottom: 1px solid var(--ms-color-border);
  background-color: var(--ms-color-warning-subtle); font-size: var(--ms-font-size-sm); color: var(--ms-color-text); line-height: 1.4; }
.ms-menu-note > .mdi { color: var(--ms-color-warning-hover); }
.ms-menu .ms-menu-option .ms-badge { flex-shrink: 0; }
.ms-menu .ms-menu-option .ms-year-busy { margin-left: auto; }
/* Téléphone : l'année est dans le menu du compte ; autre année : pastille d'alerte sur l'avatar (déjà positionné par le thème) */
.ms-year-flag { position: absolute; right: -4px; bottom: -2px; display: inline-flex; align-items: center; justify-content: center; width: 18px; height: 18px;
  border: 2px solid var(--ms-color-surface); border-radius: 50%; background-color: var(--ms-color-warning); color: var(--ms-color-on-warning); font-size: 11px; line-height: 1; }
@media (prefers-reduced-motion: reduce) { .ms-year-pill, .ms-year-caret { transition: none; } }
/* Compteur sur une icône (notifications, messages) */
.ms-topbar-icon { position: relative; }
.ms-count { position: absolute; top: 16px; right: 2px; min-width: 18px; height: 18px; padding: 0 4px; border-radius: var(--ms-radius-pill);
  background-color: var(--ms-color-primary); color: var(--ms-color-on-primary); font-size: 11px; font-weight: 700; line-height: 18px; text-align: center; }
/* Listes des menus déroulants */
.ms-dropdown-scroll { max-height: 300px; overflow-y: auto; }
/* Zones à défilement des tableaux de bord (pointage du jour, événements du mois) et graphique en anneau */
.ms-feed-scroll { max-height: 360px; overflow-y: auto; }
.ms-events-scroll { max-height: 320px; overflow-y: auto; }
.ms-donut-box { max-width: 240px; margin-left: auto; margin-right: auto; }
.ms-dropdown-scroll .ms-empty, .dropdown-menu > .ms-empty { padding: var(--ms-space-4); }
.ms-avatar { width: 38px; height: 38px; border-radius: 50%; object-fit: cover; flex-shrink: 0; }
.ms-msg-item { display: flex; align-items: center; gap: var(--ms-space-2); padding: var(--ms-space-2) var(--ms-space-3); }
.ms-msg-body { flex: 1; min-width: 0; }
.ms-msg-line { display: flex; align-items: center; justify-content: space-between; gap: var(--ms-space-1); }
.ms-msg-name { font-weight: 600; color: var(--ms-color-text); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ms-msg-time { flex-shrink: 0; font-size: var(--ms-font-size-xs); color: var(--ms-color-text-muted); }
.ms-msg-preview { min-width: 0; font-size: var(--ms-font-size-sm); color: var(--ms-color-text-muted); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

/* ── Menus de la barre du haut (langue, notifications, messages, compte) ─────
   Cadre : surface, bordure, ombre douce ; en-tête (titre + compteur + action), liste défilante, pied (lien).
   Lignes de 44 px au moins, focus visible, survol teinté ; aucune couleur codée en dur. */
.ms-menu { width: 380px; max-width: calc(100vw - 2 * var(--ms-space-4)); padding: 0; overflow: hidden;
  border: 1px solid var(--ms-color-border); border-radius: var(--ms-radius-md); background-color: var(--ms-color-surface);
  box-shadow: 0 12px 32px rgba(var(--ms-color-text-rgb), .14); }
.ms-menu.ms-menu-sm { width: 260px; }
.ms-menu-head { display: flex; align-items: center; justify-content: space-between; gap: var(--ms-space-2);
  padding: var(--ms-space-3) var(--ms-space-4); border-bottom: 1px solid var(--ms-color-border); }
.ms-menu-heading { display: inline-flex; align-items: center; min-width: 0; gap: var(--ms-space-2); font-size: var(--ms-font-size-md); font-weight: 700; color: var(--ms-color-text); }
.ms-menu-action { flex-shrink: 0; padding: 0; font-size: var(--ms-font-size-sm); font-weight: 600; text-decoration: none; white-space: nowrap; }
.ms-menu-list { max-height: 360px; overflow-y: auto; padding: var(--ms-space-1) 0; }
.ms-menu-list .ms-empty { padding: var(--ms-space-5) var(--ms-space-4); }
/* Ligne riche (notification, message) : pastille | titre, détail, auteur et heure */
.ms-menu .ms-menu-item { display: flex; align-items: flex-start; gap: var(--ms-space-3); min-height: 44px; padding: var(--ms-space-2) var(--ms-space-4);
  white-space: normal; color: var(--ms-color-text); border-bottom: 1px solid var(--ms-color-border); }
.ms-menu .ms-menu-item:last-child { border-bottom: 0; }
.ms-menu .ms-menu-item.ms-msg-item { align-items: center; }
.ms-menu-body { display: flex; flex-direction: column; flex: 1; min-width: 0; gap: 2px; }
.ms-menu-title { font-weight: 600; color: var(--ms-color-text); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ms-menu-text { font-size: var(--ms-font-size-sm); color: var(--ms-color-text); line-height: 1.35;
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.ms-menu-meta { font-size: var(--ms-font-size-xs); color: var(--ms-color-text-muted); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
/* Ligne simple (langue, compte) : icône | libellé (| coche) */
.ms-menu .ms-menu-option { display: flex; align-items: center; gap: var(--ms-space-2); min-height: 44px; padding: var(--ms-space-2) var(--ms-space-4); color: var(--ms-color-text); }
.ms-menu .ms-menu-option > .mdi { font-size: 1.15rem; color: var(--ms-color-text-muted); }
.ms-menu .ms-menu-option > .mdi-check { margin-left: auto; color: var(--ms-color-primary); }
.ms-menu .ms-menu-option > .ms-menu-ext { margin-left: auto; font-size: .95rem; } /* lien externe (nouvel onglet), ex. Formations vidéo */
/* Téléphone : année de travail en liste déroulante dans le menu du compte (cible tactile 44 px) */
.ms-menu .ms-year-mobile .dropdown-header { display: block; margin: 0; }
.ms-menu .ms-year-select-wrap { padding: 0 var(--ms-space-4) var(--ms-space-2); }
.ms-menu .ms-year-select { min-height: 44px; font-variant-numeric: tabular-nums; }
.ms-menu .ms-year-select-wrap .ms-year-busy { display: block; margin-top: var(--ms-space-1); }
.ms-menu .ms-menu-option[aria-current="true"] { font-weight: 600; color: var(--ms-color-primary); }
.ms-menu .ms-menu-danger { border-top: 1px solid var(--ms-color-border); color: var(--ms-color-danger); }
.ms-menu .ms-menu-danger > .mdi { color: var(--ms-color-danger); }
/* Survol et focus clavier */
.ms-menu .ms-menu-item:hover, .ms-menu .ms-menu-option:hover, .ms-menu .ms-menu-item:focus, .ms-menu .ms-menu-option:focus { background-color: var(--ms-color-surface-muted); color: var(--ms-color-text); }
.ms-menu .ms-menu-danger:hover, .ms-menu .ms-menu-danger:focus { background-color: var(--ms-color-danger-subtle); color: var(--ms-color-danger); }
.ms-menu a:focus-visible, .ms-menu button:focus-visible { outline: 2px solid var(--ms-color-primary); outline-offset: -2px; }
/* Pied : lien vers la page complète */
.ms-menu-foot { display: flex; align-items: center; justify-content: center; gap: var(--ms-space-1); min-height: 44px; padding: var(--ms-space-2) var(--ms-space-4);
  border-top: 1px solid var(--ms-color-border); font-size: var(--ms-font-size-sm); font-weight: 600; color: var(--ms-color-primary); background-color: var(--ms-color-surface-muted); }
.ms-menu-foot:hover { color: var(--ms-color-primary-hover); }
/* Compte : avatar + nom + rôle en tête */
.ms-menu-profile { justify-content: flex-start; gap: var(--ms-space-3); }
.ms-menu-profile .ms-menu-title, .ms-menu-profile .ms-menu-meta { white-space: normal; }
/* ── Navigation principale : élément actif = fond teinté + couleur + graisse ─ */
.ms-sidenav .side-nav-title { padding-top: var(--ms-space-2); padding-bottom: var(--ms-space-2); }
.ms-sidenav .side-nav-link { border-radius: var(--ms-radius-md); margin: 0 var(--ms-space-3); padding-left: var(--ms-space-4); padding-right: var(--ms-space-4); }
.ms-sidenav .side-nav-link i { font-size: 1.15rem; }
.ms-sidenav .side-nav-item.menuitem-active > .side-nav-link { background-color: var(--ms-color-primary-subtle); color: var(--ms-color-primary) !important; font-weight: 600; }
.ms-sidenav .side-nav-second-level li.menuitem-active > a, .ms-sidenav .side-nav-third-level li.menuitem-active > a { color: var(--ms-color-primary) !important; font-weight: 600; }
.ms-sidenav a:focus-visible { outline: 2px solid var(--ms-color-primary); outline-offset: -2px; border-radius: var(--ms-radius-sm); }
.ms-sidenav .leftbar-user a { color: inherit; }
/* Menu latéral rétractable (ordinateur) : bouton toujours visible ; en mode réduit (70 px, icônes),
   liens sans marge ni arrondi pour que l'icône reste centrée, titre de section masqué */
@media (min-width: 992px) {
  .ms-topbar .button-menu-mobile.disable-btn { display: inline-block; }
}
body[data-leftbar-compact-mode="condensed"] .ms-sidenav .side-nav-title { display: none; }
body[data-leftbar-compact-mode="condensed"] .ms-sidenav .side-nav-link { margin: 0; border-radius: 0; padding-left: 20px; padding-right: 20px; }
/* Sous-menu au survol (mode réduit) : Hyper le fige à 190 px, les libellés longs débordaient du cadre ;
   largeur selon le contenu (190 à 320 px), retour à la ligne au-delà */
body[data-leftbar-compact-mode="condensed"]:not(.authentication-bg) .ms-sidenav .side-nav .side-nav-item:hover > ul,
body[data-leftbar-compact-mode="condensed"]:not(.authentication-bg) .ms-sidenav .side-nav .side-nav-item:hover > .collapse > ul,
body[data-leftbar-compact-mode="condensed"]:not(.authentication-bg) .ms-sidenav .side-nav .side-nav-item:hover > .collapsing > ul {
  width: max-content; min-width: 190px; max-width: 320px; }
body[data-leftbar-compact-mode="condensed"]:not(.authentication-bg) .ms-sidenav .side-nav .side-nav-item:hover > ul a,
body[data-leftbar-compact-mode="condensed"]:not(.authentication-bg) .ms-sidenav .side-nav .side-nav-item:hover > .collapse > ul a,
body[data-leftbar-compact-mode="condensed"]:not(.authentication-bg) .ms-sidenav .side-nav .side-nav-item:hover > .collapsing > ul a {
  width: auto; white-space: normal; }

/* ── Pied de page ───────────────────────────────────────────────────────── */
.ms-footer { color: var(--ms-color-text-muted); font-size: var(--ms-font-size-sm); }

@media (prefers-reduced-motion: reduce) { .ms-password-rules li { transition: none; } }

/* ── En-tête de page (titre h1 + actions) ───────────────────────────────── */
.ms-page-head .card-body { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--ms-space-3); }
.ms-page-title { display: flex; align-items: center; gap: var(--ms-space-2); margin: 0; font-size: var(--ms-font-size-xl); font-weight: 700; color: var(--ms-color-text); }
.ms-page-title i { color: var(--ms-color-primary); font-size: 1.4rem; }
.ms-page-actions { display: flex; flex-wrap: wrap; gap: var(--ms-space-2); }

/* ── Listes de données ──────────────────────────────────────────────────── */
.ms-tone-neutral { --ms-tone-rgb: var(--ms-color-text-muted-rgb); }
/* Barre d'actions groupées : compteur | actions (une ligne si possible, retour à la ligne propre sinon) | désélection */
.ms-bulk-bar { align-items: center; flex-wrap: wrap; gap: var(--ms-space-2) var(--ms-space-4); padding: var(--ms-space-2) var(--ms-space-3); margin-bottom: var(--ms-space-3);
  border-radius: var(--ms-radius-md); border: 1px solid rgba(var(--ms-color-primary-rgb), .25); background-color: var(--ms-color-primary-subtle); }
.ms-bulk-count { display: inline-flex; align-items: center; gap: var(--ms-space-1); color: var(--ms-color-text); white-space: nowrap; }
.ms-bulk-count i { color: var(--ms-color-primary); font-size: 1.1rem; }
.ms-bulk-actions { display: flex; flex-wrap: wrap; align-items: center; gap: var(--ms-space-2); }
.ms-bulk-actions .btn-light { background-color: var(--ms-color-surface); border-color: var(--ms-color-border); }
.ms-bulk-sep { width: 1px; align-self: stretch; background-color: var(--ms-color-border); margin: 0 var(--ms-space-1); }
.ms-bulk-clear { margin-left: auto; color: var(--ms-color-text-muted); text-decoration: none; }
.ms-bulk-clear:hover { color: var(--ms-color-text); }
/* Menu déroulant à groupes (titre de groupe lisible, pas seulement grisé) */
.dropdown-menu .dropdown-header { font-size: var(--ms-font-size-xs); font-weight: 700; text-transform: uppercase; letter-spacing: .04em; color: var(--ms-color-text-muted); }
.ms-col-check { width: 40px; }
/* Colonne qui porte une liste de choix (Select2) : assez large pour lire un nom et sa date */
.ms-col-pick { min-width: 18rem; }
/* Paiements par classe : versements d'un élève dans une cellule (montant, date, mode, reçu), un par ligne */
.ms-col-fee { min-width: 21rem; }
.ms-fee-line { display: flex; flex-wrap: wrap; align-items: center; gap: var(--ms-space-1); }
.ms-fee-line + .ms-fee-line { margin-top: var(--ms-space-1); }
.ms-fee-line .fe-amount { width: 6.5rem; }
.ms-fee-line .fe-date { width: 7rem; }
.ms-fee-line .fe-method { width: 7rem; }
.ms-fee-line .fe-receipt { width: 8rem; }
/* Ligne de versement limitée : montant, date et mode sur une ligne, n° de reçu bancaire dessous (le tableau tient sur un
   écran de 1280 px : les noms des élèves restent visibles pendant la saisie) */
.ms-fee-table .ms-fee-line { max-width: 21rem; }
.ms-fee-table .ms-num { white-space: nowrap; }
.ms-fee-table .ms-fee-student { min-width: 10rem; }
.ms-fee-table .ms-badge { white-space: nowrap; }
/* Paiements par reçu : champs de correction d'une ligne enregistrée (montant, date, reçu) assez larges pour leur valeur */
.ms-fee-table .fr-in-amount { min-width: 6rem; }
.ms-fee-table .fr-in-date { min-width: 7rem; }
.ms-fee-table .fr-in-receipt { min-width: 8.5rem; }
.ms-fee-line .invalid-feedback { flex-basis: 100%; }
/* Champ en erreur : contour rouge sans icône (le message est sous la ligne ; l'icône tronquait la date) */
.ms-fee-line .form-control.is-invalid { background-image: none; padding-right: var(--ms-space-3); }
/* Bouton « actions » d'une ligne : au moins 32 px (cible web WCAG 24 px) */
.ms-row-menu { min-width: 32px; min-height: 32px; padding: 0; display: inline-flex; align-items: center; justify-content: center; }
/* Flèches de tri des tableaux : gris discret, sens actif en couleur principale
   (sélecteurs plus précis que dataTables.bootstrap5.css, chargé après cette feuille) */
table.dataTable > thead > tr > th.sorting:before, table.dataTable > thead > tr > th.sorting:after,
table.dataTable > thead > tr > th.sorting_asc:before, table.dataTable > thead > tr > th.sorting_asc:after,
table.dataTable > thead > tr > th.sorting_desc:before, table.dataTable > thead > tr > th.sorting_desc:after { color: var(--ms-color-text-subtle); opacity: 1; }
table.dataTable > thead > tr > th.sorting_asc:before, table.dataTable > thead > tr > th.sorting_desc:after { color: var(--ms-color-primary); }

/* ── Fenêtres (modales) ─────────────────────────────────────────────────── */
.ms-modal-loading { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: var(--ms-space-3);
  min-height: 200px; color: var(--ms-color-text-muted); font-size: var(--ms-font-size-sm); }
.ms-modal-loading .spinner-border { color: var(--ms-color-primary); }
.modal .modal-header { gap: var(--ms-space-3); }
.modal .modal-title { font-size: var(--ms-font-size-lg); font-weight: 700; color: var(--ms-color-text); }
.ms-modal-side .modal-dialog { width: 100%; max-width: 440px; min-height: 100%; }
.ms-modal-side .modal-body { overflow-y: auto; }
/* Confirmation : icône + titre + ce que l'on confirme + Annuler / Continuer */
.ms-confirm { max-width: 400px; }
.ms-confirm .modal-body { padding: var(--ms-space-5); text-align: center; }
.ms-confirm .ms-confirm-icon { width: 48px; height: 48px; font-size: 1.5rem; margin: 0 auto var(--ms-space-3); }
.ms-confirm-title { font-size: var(--ms-font-size-lg); font-weight: 700; color: var(--ms-color-text); margin: 0 0 var(--ms-space-2); }
.ms-confirm-text { color: var(--ms-color-text-muted); margin: 0 0 var(--ms-space-5); }
.ms-confirm-actions { display: flex; gap: var(--ms-space-2); justify-content: center; }
.ms-confirm-actions .btn { min-width: 120px; }

/* ── Fiche (profil) ─────────────────────────────────────────────────────── */
.ms-profile-head { display: flex; align-items: center; gap: var(--ms-space-4); padding-bottom: var(--ms-space-4); margin-bottom: var(--ms-space-3); border-bottom: 1px solid var(--ms-color-border); }
.ms-avatar-lg { width: 64px; height: 64px; border-radius: 50%; object-fit: cover; flex-shrink: 0; }
.ms-profile-name { font-size: var(--ms-font-size-xl); font-weight: 700; color: var(--ms-color-text); margin: 0 0 var(--ms-space-1); }
.ms-profile-meta { display: flex; flex-wrap: wrap; align-items: center; gap: var(--ms-space-3); color: var(--ms-color-text-muted); font-size: var(--ms-font-size-sm); }
.ms-section-title { font-size: var(--ms-font-size-xs); font-weight: 700; text-transform: uppercase; letter-spacing: .04em; color: var(--ms-color-text-muted); margin: 0 0 var(--ms-space-2); }
/* Liste libellé / valeur sur deux colonnes */
.ms-dl { display: grid; grid-template-columns: minmax(120px, 40%) 1fr; gap: var(--ms-space-2) var(--ms-space-3); margin: 0; }
.ms-dl dt { font-weight: 400; color: var(--ms-color-text-muted); }
.ms-dl dd { margin: 0; color: var(--ms-color-text); font-weight: 600; overflow-wrap: anywhere; }

/* ── Choix exclusif en boutons (ex. orientation portrait / paysage) ────── */
.ms-choice-group { display: grid; grid-template-columns: 1fr 1fr; gap: var(--ms-space-2); }
.ms-choice { display: flex; align-items: center; justify-content: center; gap: var(--ms-space-2); padding: var(--ms-space-3);
  border: 1px solid var(--ms-color-border); background-color: var(--ms-color-surface); color: var(--ms-color-text); }
.ms-choice i { font-size: 1.25rem; }
.btn-check:checked + .ms-choice { border-color: var(--ms-color-primary); background-color: var(--ms-color-primary-subtle); color: var(--ms-color-primary); font-weight: 600; }
.btn-check:focus-visible + .ms-choice { outline: 2px solid var(--ms-color-primary); outline-offset: 2px; }
/* Choix compact dans une ligne de tableau (ex. Présent / Absent) ; avec .ms-tone-* : couleur du choix coché (texte et icône restent écrits) */
.ms-choice-group.ms-choice-group-sm { gap: var(--ms-space-1); min-width: 12rem; }
.ms-choice.ms-choice-sm { padding: var(--ms-space-1) var(--ms-space-2); font-size: var(--ms-font-size-sm); }
.ms-choice.ms-choice-sm i { font-size: 1rem; }
.btn-check:checked + .ms-choice[class*="ms-tone-"] { border-color: rgb(var(--ms-tone-rgb)); background-color: rgba(var(--ms-tone-rgb), .12); color: rgb(var(--ms-tone-rgb)); }
/* Légende d'un groupe de choix : même apparence qu'un libellé de champ */
legend.ms-legend { float: none; width: auto; font-size: inherit; font-weight: 600; margin-bottom: var(--ms-space-2); }
/* Actions sous un tableau : alignées à droite, taille normale (pas de bouton pleine largeur) */
.ms-table-actions { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: var(--ms-space-2); margin-top: var(--ms-space-3); }
.ms-marks-table th[scope="row"] { color: var(--ms-color-text); }

/* ── Formulaires longs (ex. inscription d'un élève) ─────────────────────── */
.ms-page-subtitle { margin: var(--ms-space-1) 0 0; color: var(--ms-color-text-muted); font-size: var(--ms-font-size-sm); }
.ms-form-note { color: var(--ms-color-text-muted); font-size: var(--ms-font-size-sm); margin-bottom: var(--ms-space-4); }
.ms-required { color: var(--ms-color-danger); font-weight: 700; }
/* Section = fieldset + légende (titre de groupe lu par les lecteurs d'écran) */
.ms-form-section { border: 1px solid var(--ms-color-border); border-radius: var(--ms-radius-md); padding: var(--ms-space-4); margin-bottom: var(--ms-space-4); }
.ms-form-section > legend { float: none; width: auto; display: inline-flex; align-items: center; gap: var(--ms-space-2); padding: 0 var(--ms-space-2); margin: 0 0 var(--ms-space-2);
  font-size: var(--ms-font-size-sm); font-weight: 700; text-transform: uppercase; letter-spacing: .04em; color: var(--ms-color-primary); }
.ms-form-section > legend i { font-size: 1.1rem; }
.ms-field-group { border: 0; padding: 0; margin: 0; min-width: 0; }
.ms-choice.is-invalid { border-color: var(--ms-color-danger); }
.ms-field-group .invalid-feedback { display: none; }
.select2-container.is-invalid .select2-selection { border-color: var(--ms-color-danger) !important; }
/* Message d'erreur posé sous le champ, hors du flux (lignes de filtres alignées en bas : le champ ne remonte pas) */
.ms-feedback-float { position: relative; }
.ms-feedback-float > .invalid-feedback { position: absolute; top: 100%; left: calc(var(--bs-gutter-x) * .5); right: calc(var(--bs-gutter-x) * .5); margin-top: 2px; }
/* Barre d'actions du formulaire : Annuler à gauche de l'action principale, alignées à droite */
.ms-form-actions { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: var(--ms-space-2); padding-top: var(--ms-space-4); border-top: 1px solid var(--ms-color-border); }
.ms-form-actions .btn { min-width: 140px; }

/* Suggestions (recherche d'un parent existant) */
.ms-suggest { position: absolute; top: 100%; left: 0; right: 0; z-index: 1060; display: none; max-height: 240px; overflow-y: auto; margin-top: 2px;
  background-color: var(--ms-color-surface); border: 1px solid var(--ms-color-border); border-radius: var(--ms-radius-sm); box-shadow: 0 6px 20px rgba(var(--ms-color-text-rgb), .12); }
.ms-suggest-item { display: block; width: 100%; text-align: left; border: 0; border-bottom: 1px solid var(--ms-color-border); background: none; padding: var(--ms-space-2) var(--ms-space-3); }
.ms-suggest-item:last-child { border-bottom: 0; }
.ms-suggest-item:hover, .ms-suggest-item:focus { background-color: var(--ms-color-primary-subtle); outline: none; }
.ms-suggest-name { display: block; font-weight: 600; color: var(--ms-color-text); }
.ms-suggest-meta { display: block; font-size: var(--ms-font-size-xs); color: var(--ms-color-text-muted); }
.ms-suggest-empty { padding: var(--ms-space-2) var(--ms-space-3); font-size: var(--ms-font-size-sm); color: var(--ms-color-text-muted); }

/* Photo : aperçu + bouton, aide à côté */
.ms-photo-field { display: flex; flex-wrap: wrap; align-items: flex-start; gap: var(--ms-space-4); }
.ms-photo-box.box { width: 200px; margin: 0; border-radius: var(--ms-radius-md); overflow: hidden; box-shadow: none; border: 1px solid var(--ms-color-border); }
.ms-photo-preview.js--image-preview { height: 200px; background-color: var(--ms-color-surface-muted); background-size: cover; background-position: center; }
.ms-photo-box .upload-options { background: none; padding: var(--ms-space-2); }
.ms-photo-box .upload-options label { margin: 0; }
.ms-photo-help { flex: 1; min-width: 200px; }

/* Étapes numérotées (imports Excel) */
.ms-steps { list-style: none; counter-reset: ms-step; padding: 0; margin: 0 0 var(--ms-space-2); }
.ms-step { counter-increment: ms-step; position: relative; padding: 0 0 var(--ms-space-5) 48px; }
.ms-step::before { content: counter(ms-step); position: absolute; left: 0; top: 0; width: 32px; height: 32px; border-radius: 50%;
  display: flex; align-items: center; justify-content: center; font-weight: 700; color: var(--ms-color-primary); background-color: var(--ms-color-primary-subtle); }
.ms-step:not(:last-child)::after { content: ""; position: absolute; left: 15px; top: 36px; bottom: 4px; width: 2px; background-color: var(--ms-color-border); }
.ms-step-title { font-size: var(--ms-font-size-md); font-weight: 700; color: var(--ms-color-text); margin: 4px 0 var(--ms-space-2); }
/* custom.css (syntaxe imbriquée) ajoute un texte d'icône « photo_size_select_actual » et une hauteur fixe à .box : neutralisés ici */
.ms-photo-box.box { height: auto; transition: none; }
.ms-photo-preview.js--image-preview::after, .ms-photo-box .upload-options label::after { content: none; display: none; }
.ms-photo-box .upload-options { height: auto; overflow: visible; }
.ms-photo-box .upload-options label { height: auto; display: inline-flex; justify-content: center; white-space: normal; }
/* Champ avec icône à gauche (ex. date : calendrier) ; la droite reste libre pour l'icône d'erreur */
.ms-input-icon { position: relative; }
.ms-input-icon > i { position: absolute; left: var(--ms-space-3); top: 50%; transform: translateY(-50%); font-size: 1.15rem; color: var(--ms-color-text-muted); pointer-events: none; z-index: 2; }
.ms-input-icon > .form-control { padding-left: calc(var(--ms-space-3) * 2 + 1.15rem); }

/* ── Accès aux menus d'un utilisateur ───────────────────────────────────── */
.ms-uma-scroll { max-height: 60vh; overflow-y: auto; border: 1px solid var(--ms-color-border); border-radius: var(--ms-radius-md); }
.ms-sticky-head th { position: sticky; top: 0; z-index: 2; }
.ms-uma-root > * { background-color: var(--ms-color-surface-muted); }
.ms-uma-menu { font-weight: 400; color: var(--ms-color-text); }
.ms-uma-level-0 { font-weight: 700; }
.ms-uma-level-1 { padding-left: var(--ms-space-5) !important; }
.ms-uma-level-2 { padding-left: calc(var(--ms-space-5) * 2) !important; font-size: var(--ms-font-size-sm); }
.ms-uma-menu .mdi-subdirectory-arrow-right { color: var(--ms-color-text-subtle); }
/* Choix à trois états : bordure grise, état choisi teinté de sa couleur (+ texte, pas la couleur seule) */
.ms-uma-opt { border: 1px solid var(--ms-color-border); background-color: var(--ms-color-surface); color: var(--ms-color-text-muted); white-space: nowrap; }
.btn-check:checked + .ms-uma-opt { background-color: rgba(var(--ms-tone-rgb), .12); border-color: rgb(var(--ms-tone-rgb)); color: rgb(var(--ms-tone-rgb)); font-weight: 600; }
.btn-check:focus-visible + .ms-uma-opt { outline: 2px solid var(--ms-color-primary); outline-offset: 1px; }
/* Boutons Hériter / Accorder / Révoquer : séparés (btn-group les collait), chacun avec ses coins arrondis */
.ms-uma-choice { gap: var(--ms-space-1); }
.ms-uma-choice > .btn { margin-left: 0 !important; border-radius: var(--ms-radius-sm) !important; }
/* Barre d'actions groupées : écart réduit ; sur grand écran, les boutons d'action passent à la ligne entre eux
   plutôt que « Tout désélectionner » seul sur une deuxième ligne */
.ms-bulk-bar { column-gap: var(--ms-space-3); }
@media (min-width: 992px) {
  .ms-bulk-bar { flex-wrap: nowrap; }
  .ms-bulk-count, .ms-bulk-clear { flex-shrink: 0; }
  .ms-bulk-actions { min-width: 0; flex: 0 1 auto; }
}

/* Champ couleur : pastille, code et « Par défaut » sur une ligne */
.ms-color-field { display: flex; align-items: center; gap: var(--ms-space-2); }
.ms-color-field .form-control-color { width: 44px; height: 38px; padding: 4px; flex-shrink: 0; }
.ms-color-code { color: var(--ms-color-text-muted); font-size: var(--ms-font-size-sm); }
.ms-color-reset { padding: 0; margin-left: auto; text-decoration: none; }

/* Tableau de statistiques : ligne de classe (sous-total) puis sections en retrait, total en pied */
.ms-stats-table .ms-stats-class > * { background-color: var(--ms-color-surface-muted); font-weight: 700; color: var(--ms-color-text); }
.ms-stats-table .ms-stats-section { padding-left: var(--ms-space-5); font-weight: 400; color: var(--ms-color-text); }
.ms-stats-table .ms-stats-section .mdi { color: var(--ms-color-text-subtle); }
.ms-stats-table .ms-stats-total > * { font-weight: 700; border-top: 2px solid var(--ms-color-border); }
/* Choix exclusif : autant de colonnes que de choix (2 ou 3), sur une ligne */
.ms-choice-group { grid-template-columns: none; grid-auto-flow: column; grid-auto-columns: 1fr; }

/* En-têtes de tableau sur une seule ligne (listes larges : la colonne repliée passe sous « + ») */
.ms-table-nowrap-head thead th { white-space: nowrap; }

/* Colonne au plus juste (ex. N° de reçu) : la place restante va aux colonnes de texte */
.ms-col-tight { width: 1%; white-space: nowrap; }
table.dataTable thead th.ms-col-tight.sorting, table.dataTable thead th.ms-col-tight.sorting_asc, table.dataTable thead th.ms-col-tight.sorting_desc { padding-right: 1.75rem; }

/* Situation d'un élève avant un paiement : dû, déjà versé, bourse, reste */
.ms-pay-summary { display: grid; gap: var(--ms-space-1); padding: var(--ms-space-3); border: 1px solid var(--ms-color-border); border-radius: var(--ms-radius-md); background: var(--ms-color-surface-muted); }

/* ── Facture (reçu de paiement imprimable) : présentation classique, tableaux à filets, lignes serrées ── */
.ms-invoice-sheet { background: var(--ms-color-surface); padding: var(--ms-space-4); border: 1px solid var(--ms-color-border); }
.ms-invoice { color: var(--ms-color-text); line-height: 1.3; }
.ms-invoice table { width: 100%; border-collapse: collapse; }
.ms-invoice p { margin: 0; }
.ms-invoice-head td { vertical-align: top; padding: 0 0 2mm; width: 40%; }
.ms-invoice-head td:nth-child(2) { width: 20%; }
.ms-invoice { --ms-invoice-line: rgb(var(--bs-black-rgb)); } /* filets de la facture en noir (choix de l'utilisateur) */
.ms-invoice-head { border-bottom: 2px solid var(--ms-invoice-line); margin-bottom: 2mm; }
.ms-invoice-school { font-size: 1.15em; }
.ms-invoice-title { font-size: 1.3em; letter-spacing: .06em; }
.ms-invoice-logo { width: 64px; height: 64px; object-fit: contain; }
.ms-invoice-grid { margin-bottom: 2mm; }
.ms-invoice-grid th { width: 16%; padding: 0.4mm 2mm 0.4mm 0; font-weight: 400; color: var(--ms-color-text-muted); white-space: nowrap; text-align: left; }
.ms-invoice-grid td { padding: 0.4mm 2mm 0.4mm 0; } /* la valeur de gauche prend la place restante */
/* Bloc du paiement (2e paire libellé / valeur) : serré et calé à droite, valeurs alignées à droite */
.ms-invoice-grid th:nth-of-type(2) { width: 1%; padding-right: 6mm; }
.ms-invoice-grid td:last-child { width: 1%; white-space: nowrap; text-align: right; padding-right: 0; }
.ms-invoice-table th, .ms-invoice-table td { padding: 0.6mm 1.5mm; border: 1px solid var(--ms-invoice-line); }
.ms-invoice-table thead th, .ms-invoice-table tfoot th { background: var(--ms-color-surface-muted); font-weight: 700; white-space: nowrap; }
.ms-invoice-table tr.is-current td { font-weight: 700; }
.ms-invoice-totals { margin-bottom: 2mm; table-layout: fixed; border-top: 1px solid var(--ms-invoice-line); } /* quatre colonnes de même largeur, filet séparateur au-dessus */
.ms-invoice-table.ms-invoice-totals thead th { padding-top: 1mm; }
.ms-invoice-table.ms-invoice-totals th, .ms-invoice-table.ms-invoice-totals td { border: 0; } /* montants : sans bordures */
.ms-invoice-totals .is-main { font-weight: 700; font-size: 1.1em; }
.ms-invoice-columns { display: grid; grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr); gap: 4mm; }
/* Grande taille de police : les en-têtes des deux tableaux peuvent passer à la ligne plutôt que déborder */
.ms-invoice-columns .ms-invoice-table thead th { white-space: normal; }
.ms-invoice-h { font-weight: 700; margin-bottom: 1mm !important; }
.ms-invoice-muted { color: var(--ms-color-text-muted); }
.ms-invoice-note { margin-top: 1mm !important; font-size: .9em; color: var(--ms-color-text-muted); }
.ms-invoice-signatures { margin-top: 3mm; }
.ms-invoice-signatures td { width: 50%; padding-top: 8mm; font-weight: 700; vertical-align: bottom; }
.ms-invoice-signatures td:first-child { border-bottom: 1px solid var(--ms-invoice-line); }
.ms-invoice-signatures td + td { border-bottom: 1px solid var(--ms-invoice-line); padding-left: 20%; }
.ms-invoice-two .ms-invoice + .ms-invoice { margin-top: var(--ms-space-4); padding-top: var(--ms-space-4); border-top: 1px dashed var(--ms-color-text-muted); }
@media (max-width: 767.98px) {
  .ms-invoice-sheet { overflow-x: auto; }
  .ms-invoice-columns { grid-template-columns: 1fr; }
}
@media print {
  .ms-invoice-sheet { border: 0; padding: 0; }
  .ms-invoice-columns { grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr); }
  .ms-invoice, .ms-invoice * { color: var(--ms-color-text) !important; }
  /* Deux exemplaires : chacun sur une demi-page A4, séparés par un pointillé de découpe. Zone imprimable 281 mm
     (297 - 2 x 8) : 2 x 135 mm + 2 mm laissent ~9 mm de marge, sinon un léger débordement créait une 2e page vide */
  .ms-invoice-two .ms-invoice { height: 135mm; overflow: hidden; break-inside: avoid; }
  .ms-invoice-two .ms-invoice + .ms-invoice { margin-top: 0; padding-top: 2mm; }
  .ms-invoice-two { break-after: avoid; }
}

/* Impression depuis la grande fenêtre (facture) : seule la fenêtre est imprimée, à pleine largeur */
@media print {
  body.ms-print-modal > *:not(#large-modal) { display: none !important; }
  body.ms-print-modal #large-modal { position: static !important; display: block !important; overflow: visible !important; padding: 0 !important; }
  body.ms-print-modal #large-modal .modal-dialog { max-width: none !important; width: auto !important; margin: 0 !important; transform: none !important; }
  body.ms-print-modal #large-modal .modal-content { border: 0 !important; box-shadow: none !important; max-height: none !important; overflow: visible !important; }
  body.ms-print-modal #large-modal .modal-body { padding: 0 !important; overflow: visible !important; }
  body.ms-print-modal #large-modal .modal-header, body.ms-print-modal .ms-invoice-actions { display: none !important; }
}

/* ── Grille de cases à cocher (ex. classes d'une catégorie de revenu) ─────────
   Une case = une étiquette cliquable de 44 px au moins ; désactivée = estompée avec la raison dessous */
.ms-check-list { display: grid; grid-template-columns: repeat(auto-fill, minmax(130px, 1fr)); gap: var(--ms-space-2); }
.ms-check-item { display: flex; align-items: flex-start; gap: var(--ms-space-2); min-height: 44px; margin: 0; padding: var(--ms-space-2) var(--ms-space-3);
  border: 1px solid var(--ms-color-border); border-radius: var(--ms-radius-sm); background-color: var(--ms-color-surface); cursor: pointer; }
.ms-check-item .form-check-input { flex-shrink: 0; margin-top: .2rem; }
.ms-check-item:hover { border-color: var(--ms-color-primary); }
.ms-check-item:has(.form-check-input:checked) { border-color: var(--ms-color-primary); background-color: var(--ms-color-primary-subtle); }
.ms-check-item:has(.form-check-input:focus-visible) { outline: 2px solid var(--ms-color-primary); outline-offset: 1px; }
.ms-check-text { display: flex; flex-direction: column; min-width: 0; color: var(--ms-color-text); line-height: 1.3; }
.ms-check-text small { color: var(--ms-color-text-muted); font-size: var(--ms-font-size-xs); }
.ms-check-item.is-disabled { cursor: not-allowed; background-color: var(--ms-color-surface-muted); }
.ms-check-item.is-disabled:hover { border-color: var(--ms-color-border); }
.ms-check-item.is-disabled .ms-check-text > span { color: var(--ms-color-text-muted); }

/* ── Liste modifiable sur place (ex. types de revenu) : nom + nombre | renommer | supprimer ── */
.ms-type-row { padding: var(--ms-space-2) 0; border-bottom: 1px solid var(--ms-color-border); }
.ms-type-row:last-child { border-bottom: 0; }
.ms-type-view, .ms-type-form { display: flex; align-items: center; gap: var(--ms-space-2); }
.ms-type-view[hidden], .ms-type-form[hidden] { display: none; }
.ms-type-name { display: flex; flex-direction: column; flex: 1; min-width: 0; }
.ms-type-row .btn-sm { min-width: 36px; min-height: 36px; }

/* ── Calendrier (bootstrap-datepicker) aux couleurs des jetons ───────────────
   Le thème mettait un fond gris arrondi qui s'étirait sur toute la cellule (ovale sur « Effacer »).
   En-tête et pied : survol teinté, rayon modéré ; « Effacer » / « Aujourd'hui » = lien en couleur principale. */
.datepicker.dropdown-menu { padding: var(--ms-space-2); border: 1px solid var(--ms-color-border); border-radius: var(--ms-radius-md);
  background-color: var(--ms-color-surface); box-shadow: 0 12px 32px rgba(var(--ms-color-text-rgb), .14); }
.datepicker thead th.prev, .datepicker thead th.next, .datepicker thead th.datepicker-switch,
.datepicker tfoot th.clear, .datepicker tfoot th.today { border-radius: var(--ms-radius-sm); }
.datepicker thead th.prev:hover, .datepicker thead th.next:hover, .datepicker thead th.datepicker-switch:hover { background: var(--ms-color-surface-muted); color: var(--ms-color-text); }
.datepicker tfoot th.clear, .datepicker tfoot th.today { color: var(--ms-color-primary); font-weight: 600; padding: var(--ms-space-2) 0; }
.datepicker tfoot th.clear:hover, .datepicker tfoot th.today:hover { background: var(--ms-color-primary-subtle); color: var(--ms-color-primary-hover); }
.datepicker table tr td.day { border-radius: var(--ms-radius-sm); }
.datepicker table tr td.day:hover, .datepicker table tr td.day.focused { background: var(--ms-color-surface-muted); }
.datepicker table tr td.active, .datepicker table tr td.active:hover, .datepicker table tr td.active.active,
.datepicker table tr td span.active, .datepicker table tr td span.active:hover {
  background: var(--ms-color-primary) !important; background-image: none !important; border-color: var(--ms-color-primary); color: var(--ms-color-on-primary) !important; text-shadow: none; }
.datepicker table tr td span:hover, .datepicker table tr td span.focused { background: var(--ms-color-surface-muted); }

/* Colonne mise en évidence (ex. tranche choisie dans les rappels de paiement) : en-tête seulement (icône + couleur +
   soulignement) et valeurs en gras dans la vue. Pas de fond de cellule : il se mêlait au survol des lignes. */
.table > thead > tr > th.ms-col-focus { color: var(--ms-color-primary); box-shadow: inset 0 -2px 0 var(--ms-color-primary); }
.table > thead > tr > th.ms-col-focus .mdi { margin-right: .2rem; }

/* Part utilisée d'un montant (ex. bourse consommée par les paiements) : texte « utilisé / total » + barre fine.
   La valeur est toujours écrite (la barre seule ne suffit pas, règle du skill : pas d'information par le visuel seul). */
.ms-usage { display: flex; flex-direction: column; gap: 4px; min-width: 120px; }
.ms-usage-bar { display: block; height: 6px; border-radius: var(--ms-radius-pill); background-color: var(--ms-color-surface-muted); overflow: hidden; }
.ms-usage-bar > span { display: block; height: 100%; border-radius: inherit; background-color: var(--ms-color-primary); }
/* Note sous une valeur de cellule (ex. motif d'une bourse) : une ligne, texte complet au survol et pour les lecteurs d'écran */
.ms-cell-note { max-width: 260px; }

/* Lignes répétables d'un formulaire (ex. sections d'une classe) : champs avec libellé visible + bouton retirer aligné en bas */
.ms-section-row { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.6fr) auto; gap: var(--ms-space-2); align-items: start; /* haut : un message d'erreur sous un champ ne décale pas les voisins */
  padding: var(--ms-space-2) 0; border-bottom: 1px solid var(--ms-color-border); }
.ms-section-row .form-label { margin-bottom: 2px; font-size: var(--ms-font-size-sm); }
.ms-section-row .ms-section-remove { min-width: 38px; min-height: 38px; margin-top: calc(var(--ms-font-size-sm) * 1.5 + 2px); } /* face aux champs (hauteur du libellé) */
.ms-section-row .ms-section-remove:disabled { opacity: .45; cursor: not-allowed; }
#sectionRows { margin-bottom: var(--ms-space-3); }
/* Primaire : deux titulaires par section (anglophone, francophone) : nom + retrait sur la 1re ligne, titulaires dessous */
.ms-section-row.is-bilingual { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) auto; grid-template-areas: "name name remove" "en fr fr"; }
.ms-section-row.is-bilingual > div:first-of-type { grid-area: name; }
.ms-section-row.is-bilingual .ms-section-master-en { grid-area: en; }
.ms-section-row.is-bilingual .ms-section-master-fr { grid-area: fr; }
.ms-section-row.is-bilingual .ms-section-remove { grid-area: remove; }

/* ── Emploi du temps (grille créneaux x jours) ─────────────────────────────
   Skill : glisser-déposer jamais seul (clic sur une matière puis sur une case, Entrée au clavier) ; groupe de matière
   = couleur du ton ET libellé (légende) ; la grille défile horizontalement au lieu de casser la mise en page. */
.ms-tt-scroll { overflow-x: auto; }
.ms-tt-grid { min-width: 760px; table-layout: fixed; }
.ms-tt-grid th { background-color: var(--ms-color-surface-muted); font-size: var(--ms-font-size-sm); text-align: center; vertical-align: middle; }
.ms-tt-grid thead th:first-child, .ms-tt-grid tbody th { width: 110px; }
.ms-tt-cell { height: 58px; padding: 3px !important; vertical-align: top; }
.ms-tt-cell:focus-visible { outline: 2px solid var(--ms-color-primary); outline-offset: -2px; }
.ms-tt-grid.is-armed .ms-tt-cell { cursor: pointer; }
.ms-tt-grid.is-armed .ms-tt-cell:hover, .ms-tt-cell.is-over { background-color: var(--ms-color-primary-subtle); }
.ms-tt-chip { display: flex; align-items: flex-start; gap: 2px; height: 100%; border-radius: var(--ms-radius-sm);
  background-color: rgba(var(--ms-tone-rgb), .12); border: 1px solid rgba(var(--ms-tone-rgb), .35); cursor: grab; }
.ms-tt-chip.is-highlight, .ms-tt-subject.is-highlight { outline: 2px solid var(--ms-color-primary); outline-offset: 1px; }
.ms-tt-chip-move { flex: 1; min-width: 0; padding: 3px 4px; border: 0; background: none; text-align: left; color: var(--ms-color-text); line-height: 1.2; }
.ms-tt-chip-move strong, .ms-tt-chip-move small { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ms-tt-chip-move strong { font-size: var(--ms-font-size-sm); }
.ms-tt-chip-move small { font-size: var(--ms-font-size-xs); color: var(--ms-color-text-muted); }
.ms-tt-chip-remove { flex-shrink: 0; width: 26px; height: 26px; border: 0; border-radius: var(--ms-radius-sm); background: none; color: var(--ms-color-text-muted); line-height: 1; }
.ms-tt-chip-remove:hover, .ms-tt-chip-remove:focus-visible { color: var(--ms-color-danger); background-color: var(--ms-color-danger-subtle); }
.ms-tt-chip button:focus-visible { outline: 2px solid var(--ms-color-primary); outline-offset: -2px; }
.ms-tt-subjects { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--ms-space-1); max-height: 62vh; overflow-y: auto; overflow-x: hidden; padding: 2px; } /* jamais de défilement horizontal : textes coupés (…), compteur toujours visible */
.ms-tt-subject { display: flex; align-items: center; gap: var(--ms-space-2); width: 100%; min-height: 44px; padding: 6px 8px; text-align: left; cursor: grab;
  border: 1px solid rgba(var(--ms-tone-rgb), .3); border-radius: var(--ms-radius-sm); background-color: rgba(var(--ms-tone-rgb), .08); color: var(--ms-color-text); }
.ms-tt-subject:hover { background-color: rgba(var(--ms-tone-rgb), .16); }
.ms-tt-subject[aria-pressed="true"] { border-color: var(--ms-color-primary); background-color: var(--ms-color-primary-subtle); }
.ms-tt-subject:focus-visible { outline: 2px solid var(--ms-color-primary); outline-offset: 1px; }
.ms-tt-subject-text { flex: 1; min-width: 0; line-height: 1.25; }
.ms-tt-subject-text strong, .ms-tt-subject-text small { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ms-tt-subject-text small { font-size: var(--ms-font-size-xs); color: var(--ms-color-text-muted); }
.ms-tt-count { flex-shrink: 0; min-width: 26px; padding: 1px 6px; border-radius: var(--ms-radius-pill); background-color: var(--ms-color-surface); border: 1px solid var(--ms-color-border);
  font-size: var(--ms-font-size-xs); font-weight: 700; text-align: center; color: var(--ms-color-text); }
.ms-tt-dot { display: inline-block; width: 8px; height: 8px; border-radius: 50%; background-color: rgb(var(--ms-tone-rgb)); }
@media print { .ms-tt-chip-remove { display: none; } .ms-tt-grid { min-width: 0; } }

/* Saisie des notes : champ étroit ; note verrouillée = cadenas + texte (aria-label), fond atténué, curseur interdit (skill : Disabled States, Color Only) */
.ms-mark-input { width: 8rem; }
.ms-mark-input .form-control.ms-mark-locked { background-color: var(--ms-color-surface-muted); cursor: not-allowed; }

/* Procès verbal : tableau large dans .table-responsive (skill : Table Handling), nom de l'élève figé à gauche pendant le défilement */
.ms-tabulation th, .ms-tabulation td { white-space: nowrap; }
.ms-tabulation .ms-tabulation-name { position: sticky; left: 0; z-index: 1; background-color: var(--ms-color-surface); box-shadow: inset -1px 0 0 var(--ms-color-border); }
.ms-tabulation thead .ms-tabulation-name { background-color: var(--bs-table-bg, var(--ms-color-surface-muted)); }

/* Promotion : bandeau « De → Vers » (classe-section et année de départ et d'arrivée) */
.ms-promo-route { display: flex; flex-wrap: wrap; align-items: center; gap: var(--ms-space-3); padding: var(--ms-space-3); border: 1px solid var(--ms-color-border); border-radius: var(--ms-radius-md, .5rem); background-color: var(--ms-color-surface-muted); }
.ms-promo-route > .mdi { font-size: 1.5rem; color: var(--ms-color-primary); }

/* Statistiques d'examen : barre de réussite courte + pourcentage et effectif en texte (skill : jamais la couleur seule) */
.ms-pass-bar { display: flex; align-items: center; gap: var(--ms-space-2); min-width: 11rem; }
.ms-pass-bar .progress { flex: 1 1 auto; height: 8px; min-width: 4rem; background-color: rgba(var(--ms-color-danger-rgb), .18); }

/* Emploi du temps : copie hors écran servant d'image pendant le glisser (seul l'élément saisi suit le pointeur) */
.ms-tt-ghost { position: absolute; top: -1000px; left: -1000px; pointer-events: none; }

/* Barres horizontales (moyennes par matière) : triées, valeur écrite au bout, échelle 0 à 20 ; moins de 10 = motif hachuré en plus de la teinte (jamais la couleur seule) */
.ms-bar-chart { display: grid; gap: var(--ms-space-1); }
.ms-bar-row { display: grid; grid-template-columns: minmax(8rem, 14rem) 1fr 3.5rem; align-items: center; gap: var(--ms-space-2); font-size: var(--ms-font-size-sm); }
.ms-bar-track { height: 12px; background-color: var(--ms-color-surface-muted); border-radius: var(--ms-radius-pill); overflow: hidden; }
.ms-bar-fill { display: block; height: 100%; background-color: var(--ms-color-primary); border-radius: var(--ms-radius-pill); }
.ms-bar-fill.is-low { background-color: var(--ms-color-danger); background-image: repeating-linear-gradient(45deg, rgba(var(--ms-color-on-primary-rgb), .35) 0 3px, transparent 3px 6px); }
.ms-bar-value { text-align: right; font-weight: 600; }

/* Demande de modification : champ de la nouvelle note */
.ms-mer-new { width: 5.5rem; }

/* Emploi du temps : chargement limité à la case concernée (placer, déplacer, retirer) ; la grille reste visible (skill : Loading Indicators) */
.ms-tt-cell { position: relative; }
.ms-tt-cell.is-loading > :not(.ms-tt-cell-loader) { opacity: .35; pointer-events: none; }
.ms-tt-cell-loader { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; color: var(--ms-color-primary); pointer-events: none; }

/* ── Pages de réglages (Paramètres) : navigation de section, sections, options, tuiles d'image, barre d'enregistrement ──
   Remplacent settings-nav / ws-nav, settings-section-title / ws-section-title, settings-option, file-tile / logo-tile /
   ws-image-tile, settings-save-bar / ws-save-bar (skill : Active State, field-grouping, deep linking) */
.ms-section-nav .nav-link { display: flex; align-items: center; gap: var(--ms-space-2); padding: var(--ms-space-2) var(--ms-space-3);
  color: var(--ms-color-text-muted); border-radius: var(--ms-radius-md); }
.ms-section-nav .nav-link .mdi { font-size: 1.2rem; }
.ms-section-nav .nav-link small { display: block; font-size: var(--ms-font-size-xs); opacity: .85; }
.ms-section-nav .nav-link:hover { color: var(--ms-color-text); background-color: var(--ms-color-surface-muted); }
.ms-section-nav .nav-link.active { color: var(--ms-color-on-primary); background-color: var(--ms-color-primary); font-weight: 600; }
.ms-section-nav .ms-section-nav-group { font-size: var(--ms-font-size-xs); font-weight: 700; text-transform: uppercase; letter-spacing: .05em;
  color: var(--ms-color-text-muted); padding: var(--ms-space-3) var(--ms-space-3) var(--ms-space-1); }
.ms-section-nav .ms-section-nav-group:first-child { padding-top: var(--ms-space-1); }
.ms-section-nav .ms-nav-external { margin-left: auto; font-size: .9rem; opacity: .7; }
/* Titre de groupe dans un formulaire de réglages */
.ms-settings-title { font-size: var(--ms-font-size-xs); font-weight: 700; text-transform: uppercase; letter-spacing: .04em;
  color: var(--ms-color-text-muted); margin: var(--ms-space-5) 0 var(--ms-space-3); }
.ms-settings-title:first-child { margin-top: 0; }
/* Option avec interrupteur : libellé + explication à gauche, interrupteur à droite */
.ms-option { display: flex; align-items: center; justify-content: space-between; gap: var(--ms-space-3);
  border: 1px solid var(--ms-color-border); border-radius: var(--ms-radius-md); padding: var(--ms-space-3) var(--ms-space-4); }
.ms-option + .ms-option { margin-top: var(--ms-space-3); }
.ms-switch.form-switch { margin: 0; padding-left: 0; min-height: 0; }
.ms-switch .form-check-input { width: 2.75em; height: 1.4em; margin: 0; float: none; cursor: pointer; }
/* Tuile d'image (logo, signature, image du site) avec aperçu ; .is-changed = image choisie, pas encore enregistrée */
.ms-image-tile { border: 1px dashed var(--ms-color-border); border-radius: var(--ms-radius-md); padding: var(--ms-space-3); height: 100%; display: flex; flex-direction: column; }
.ms-image-tile.is-changed { border-style: solid; border-color: var(--ms-color-primary); }
.ms-image-preview { height: 110px; border-radius: var(--ms-radius-sm); background: var(--ms-color-surface-muted) center / contain no-repeat; margin-bottom: var(--ms-space-3);
  display: flex; align-items: center; justify-content: center; color: var(--ms-color-text-muted); }
.ms-image-preview.is-cover { background-size: cover; }
.ms-image-preview.is-tall { height: 180px; }
.ms-image-preview.on-dark { background-color: var(--ms-color-text); }
/* Aperçu de police */
.ms-font-preview { border: 1px solid var(--ms-color-border); border-radius: var(--ms-radius-md); padding: var(--ms-space-3); background-color: var(--ms-color-background); min-height: 92px; }
.ms-font-preview-text { line-height: 1.4; color: var(--ms-color-text); word-break: break-word; }
/* Barre d'enregistrement collée en bas du formulaire */
.ms-save-bar { position: sticky; bottom: 0; z-index: 5; display: flex; justify-content: flex-end; align-items: center; gap: var(--ms-space-2);
  background-color: var(--ms-color-surface); border-top: 1px solid var(--ms-color-border); padding: var(--ms-space-3) 0 0; margin-top: var(--ms-space-5); }
.ms-save-bar .ms-save-state { margin-right: auto; color: var(--ms-color-text-muted); font-size: var(--ms-font-size-sm); }
/* Champ court (nombre, jour / mois) */
.ms-field-narrow { max-width: 24rem; }
/* Tableau à double entrée (accès aux menus) : en-tête et première colonne figés */
.ms-matrix-wrap { max-height: 65vh; }
.ms-matrix th, .ms-matrix td { white-space: nowrap; vertical-align: middle; }
.ms-matrix thead th { position: sticky; top: 0; z-index: 3; }
.ms-matrix .ms-matrix-head { position: sticky; left: 0; z-index: 2; background-color: var(--ms-color-surface); min-width: 230px; }
.ms-matrix thead .ms-matrix-head { z-index: 4; }
.ms-matrix tr.is-group .ms-matrix-head { background-color: var(--ms-color-surface-muted); }
.ms-matrix .form-switch { display: inline-block; padding-left: 2.5em; margin: 0; min-height: 0; }
.ms-matrix .form-check-input { cursor: pointer; }
.ms-matrix .form-check-input:disabled { opacity: .5; cursor: progress; }
/* Rôles et permissions, droits d'un rôle : une cellule = interrupteur (+ libellé dans « Autres actions ») et origine ;
   page masquée (is-off) : actions atténuées (skill : Disabled States), toujours modifiables */
.ms-perm-grid .perm-cell { display: inline-flex; flex-direction: column; align-items: center; gap: 2px; }
.ms-perm-grid :is(.perm-other, .perm-stack) .perm-cell { display: flex; align-items: flex-start; margin-bottom: var(--ms-space-1); }
.ms-perm-grid :is(.perm-other, .perm-stack) .perm-cell:last-child { margin-bottom: 0; }
.ms-perm-grid :is(.perm-other, .perm-stack) .form-switch { display: flex; align-items: center; gap: var(--ms-space-2); padding-left: 0; }
.ms-perm-grid :is(.perm-other, .perm-stack) .form-switch .form-check-input { float: none; margin: 0; flex-shrink: 0; }
.ms-perm-grid :is(.perm-other, .perm-stack) { min-width: 260px; white-space: normal; }
/* Ligne de groupe : libellé collé à gauche quand le tableau défile horizontalement */
.ms-perm-grid .perm-group-label { position: sticky; left: var(--ms-space-3); display: inline-block; }
.ms-perm-grid .perm-cell-label { font-size: var(--ms-font-size-sm); color: var(--ms-color-text); white-space: normal; }
.ms-perm-grid .perm-cell.is-locked { flex-direction: row; gap: var(--ms-space-2); }
.ms-perm-grid tr.is-off .perm-action { opacity: .55; }
.ms-matrix .ms-indent-1 { padding-left: var(--ms-space-5); }
.ms-matrix .ms-indent-2 { padding-left: calc(var(--ms-space-5) * 2); }
/* Recherche d'une liste (champ limité en largeur) */
.ms-search { max-width: 360px; }

/* ── Site web : diapositives, galeries, photos (remplacent ws-slide, ws-gallery-cover, ws-photo) ── */
.ms-slide { border: 1px solid var(--ms-color-border); border-radius: var(--ms-radius-md); padding: var(--ms-space-4); }
.ms-slide + .ms-slide { margin-top: var(--ms-space-4); }
.ms-slide-number { display: inline-flex; align-items: center; justify-content: center; width: 1.75rem; height: 1.75rem; border-radius: 50%; background-color: var(--ms-color-primary); color: var(--ms-color-on-primary); font-weight: 700; font-size: var(--ms-font-size-sm); }
.ms-gallery-cover { height: 150px; display: flex; align-items: center; justify-content: center; color: var(--ms-color-text-muted); font-size: 2rem;
  background: var(--ms-color-surface-muted) center / cover no-repeat; border-radius: var(--ms-card-radius) var(--ms-card-radius) 0 0; }
/* Case de sélection posée sur une carte ou une photo (fond clair pour rester visible sur l'image) */
.ms-card-check { position: absolute; top: var(--ms-space-2); left: var(--ms-space-2); z-index: 2; background-color: var(--ms-color-surface); border-radius: var(--ms-radius-sm); padding: 2px 4px; line-height: 1; }
.ms-card-check .form-check-input { margin: 0; width: 1.15em; height: 1.15em; cursor: pointer; }
.ms-photo { position: relative; border-radius: var(--ms-radius-md); overflow: hidden; aspect-ratio: 4 / 3; background-color: var(--ms-color-surface-muted); }
.ms-photo img { width: 100%; height: 100%; object-fit: cover; }
.ms-photo .ms-photo-delete { position: absolute; top: var(--ms-space-2); right: var(--ms-space-2); }
.ms-photo.is-selected { outline: 3px solid var(--ms-color-primary); outline-offset: -3px; }

/* ── Rôles et permissions : origine d'une valeur (icône + texte), liste large dans l'en-tête ── */
.ms-perm-source { display: inline-flex; align-items: center; gap: 2px; font-size: var(--ms-font-size-xs); font-weight: 600; }
.ms-perm-source.is-common { color: var(--ms-color-info); }
.ms-perm-source.is-school { color: var(--ms-color-primary); }
.ms-matrix .perm-source { min-height: 1rem; line-height: 1; }
.ms-select-wide { min-width: 18rem; }

/* Discipline : champ des heures justifiées (court) */
.ms-hours-input { width: 5.5rem; flex: 0 0 auto; }

/* ── Onglets soulignés (nav-tabs nav-bordered, modèle : Inscription d'élèves) ───────────────────────────────────────
   Le thème ne stylise que les liens (li > a) : même rendu pour les onglets en <button> (pages chargées en AJAX). */
.nav-tabs > li > button.nav-link { color: var(--ms-color-text-muted); font-weight: 600; }
.nav-bordered li button.nav-link { border: 0; padding: .625rem 1.25rem; }
.nav-bordered li button.nav-link.active { border-bottom: 2px solid var(--ms-color-primary); }

/* ── Relevé de frais (élève, parent) : montant principal et lignes par type (skill : Invoice & Billing Tool, minimalisme
   suisse, barre de progression ; couleurs = jetons, payé vert / impayé rouge via ms-tone-*) ─────────────────────────── */
.ms-balance-label { font-size: var(--ms-font-size-xs); font-weight: 600; text-transform: uppercase; letter-spacing: .04em; color: var(--ms-color-text-muted); margin: 0 0 var(--ms-space-1); }
.ms-balance-value { font-size: var(--ms-font-size-3xl); font-weight: 700; line-height: 1.15; color: rgb(var(--ms-tone-rgb, var(--ms-color-text-rgb))); margin: 0; font-variant-numeric: tabular-nums; white-space: nowrap; }
.ms-usage-bar.ms-usage-bar-lg { height: 10px; }
.ms-fee-row { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: var(--ms-space-1) var(--ms-space-3); align-items: center; padding: var(--ms-space-3) 0; border-bottom: 1px solid var(--ms-color-border); }
.ms-fee-row:last-child { border-bottom: 0; padding-bottom: 0; }
.ms-fee-row .ms-usage-bar { grid-column: 1 / -1; }
.ms-fee-name { font-weight: 600; color: var(--ms-color-text); }
.ms-fee-amount { text-align: right; font-variant-numeric: tabular-nums; white-space: nowrap; }
@media (max-width: 575.98px) {
    .ms-fee-row { grid-template-columns: minmax(0, 1fr); }
    .ms-fee-amount { text-align: left; white-space: normal; }
}
/* Rôle personnalisé (Rôles et permissions) : teinte « info », comme son badge « Personnalisé » */
.ms-role-custom { --ms-role-rgb: var(--ms-color-info-rgb); }

/* ── Rapprochement d'un parent (formulaire élève) : contour fin uniforme teinté (jamais de barre latérale), choix en
   boutons radio ; erreur « choisissez » sous le bloc (skill : Error Placement) ────────────────────────────────── */
.ms-match { border: 1px solid rgba(var(--ms-tone-rgb, var(--ms-color-text-rgb)), .3); background-color: rgba(var(--ms-tone-rgb, var(--ms-color-text-rgb)), .05);
  border-radius: var(--ms-radius-md); padding: var(--ms-space-3); margin: 0 0 var(--ms-space-4); font-size: var(--ms-font-size-sm); }
.ms-match-title { display: flex; align-items: center; gap: .375rem; font-weight: 600; color: var(--ms-color-text); margin: 0; }
.ms-match-title .mdi { color: rgb(var(--ms-tone-rgb)); font-size: 1.1rem; }
.ms-match-why { color: var(--ms-color-text-muted); margin: var(--ms-space-1) 0 0; }
.ms-match-options { margin: var(--ms-space-2) 0 0; }
.ms-match-options .form-check { margin-bottom: var(--ms-space-1); min-height: 1.5rem; }
.ms-match-options .form-check-label { color: var(--ms-color-text); }
.ms-match.is-invalid { border-color: var(--ms-color-danger); }
/* Compte existant qu'on ne peut pas choisir (création d'un compte) : information lisible, pas une option grisée */
.ms-existing-info { display: flex; align-items: flex-start; gap: .375rem; margin: var(--ms-space-2) 0 0; color: var(--ms-color-text); }
.ms-existing-info .mdi { color: rgb(var(--ms-tone-rgb)); font-size: 1rem; line-height: 1.4; }
/* Avis dans une page ou un onglet (ex. élève pas inscrit cette année + action) : contour fin uniforme, fond info doux */
.ms-notice { padding: var(--ms-space-2) var(--ms-space-3); border: 1px solid rgba(var(--ms-color-info-rgb), .35); border-radius: var(--ms-radius-md, .5rem); background: var(--ms-color-info-subtle); color: var(--ms-color-text); }
.ms-notice > .mdi { color: var(--ms-color-info); font-size: 1.15rem; }
.ms-match.is-invalid .invalid-feedback { display: block; }

/* Photos en masse (Utilisateurs > Photos) : zone de dépôt (glisser-déposer + bouton), carte d'une photo à vérifier
   (case, portrait, personne, état), grille des photos actuelles. Skill : Dragging Movements (bouton en plus du
   glisser), Color Only (état en badge icône + texte), Image Scaling (portrait au ratio fixe, pas de déformation). */
.ms-dropzone { border: 2px dashed var(--ms-color-border); border-radius: var(--ms-radius-md); background-color: var(--ms-color-surface-muted);
  padding: var(--ms-space-6) var(--ms-space-4); text-align: center; transition: border-color .15s ease, background-color .15s ease; }
.ms-dropzone > .mdi { display: block; font-size: 2.5rem; line-height: 1; color: var(--ms-color-text-muted); margin-bottom: var(--ms-space-2); }
.ms-dropzone.is-dragover { border-color: var(--ms-color-primary); background-color: rgba(var(--ms-color-primary-rgb), .06); }
.ms-dropzone[aria-disabled="true"] { opacity: .6; }
.ms-dropzone[aria-disabled="true"] label.btn { pointer-events: none; }
.ms-photo-portrait { aspect-ratio: 3 / 4; }
.ms-photo-portrait .mdi { display: flex; align-items: center; justify-content: center; height: 100%; font-size: 2.5rem; color: var(--ms-color-text-muted); }
.ms-photo-card { position: relative; display: flex; flex-direction: column; height: 100%; border: 1px solid var(--ms-color-border);
  border-radius: var(--ms-radius-md); background-color: var(--ms-color-surface); overflow: hidden; }
.ms-photo-card .ms-photo { border-radius: 0; }
.ms-photo-card.is-selected { outline: 2px solid var(--ms-color-primary); outline-offset: -2px; }
.ms-photo-card.is-done { border-color: rgba(var(--ms-color-success-rgb), .5); }
.ms-photo-card-body { display: flex; flex-direction: column; gap: var(--ms-space-1); padding: var(--ms-space-2); min-width: 0; }
.ms-photo-card-body .ms-badge { align-self: flex-start; white-space: normal; text-align: left; border-radius: var(--ms-radius-sm); }
.ms-photo-card-file { font-size: var(--ms-font-size-xs); color: var(--ms-color-text-muted); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ms-photo-card-name { font-weight: 600; color: var(--ms-color-text); overflow-wrap: anywhere; }
.ms-photo-card .ms-photo-remove { position: absolute; top: var(--ms-space-2); right: var(--ms-space-2); z-index: 2; }
.ms-photo-card .select2-container { width: 100% !important; }
/* Nom de la personne en entier (skill : Essential Text Truncation) : la liste de choix passe à la ligne */
.ms-photo-card .select2-container .select2-selection--single { height: auto; min-height: 31px; }
.ms-photo-card .select2-container .select2-selection--single .select2-selection__rendered { white-space: normal; line-height: 1.3; padding-top: 5px; padding-bottom: 5px; font-weight: 600; color: var(--ms-color-text); }
.ms-photo-card .select2-container .select2-selection--single .select2-selection__placeholder { font-weight: 400; }
@media (prefers-reduced-motion: reduce) { .ms-dropzone { transition: none; } }

/* Absences du trimestre : sanctions d'un élève, une ligne chacune (liste, quantité avec son unité, retirer) ; l'erreur
   passe sous la ligne (skill : Error Placement) ; boutons espacés d'au moins 8 px */
.att-san-cell { min-width: 22rem; }
.att-san-item { display: flex; flex-wrap: wrap; align-items: center; gap: var(--ms-space-2); margin-bottom: var(--ms-space-1); }
.att-san-item .att-san-sel { flex: 1 1 11rem; min-width: 10rem; }
.att-san-item .att-san-qty-wrap { width: 7.5rem; flex: 0 0 auto; }
.att-san-item .att-san-err { flex-basis: 100%; margin-top: 0; }
#attBulkQtyWrap { width: 7.5rem; }

/* Charte : texte jaune lisible (le jaune vif sur blanc reste sous 4,5:1) : .text-warning prend la teinte foncée du jeton */
.text-warning { color: var(--ms-color-warning-text) !important; }

/* Appel par créneau : élèves x cours du jour ; cases et colonne élève figées à gauche, en-tête figé en haut, défilement
   horizontal dans le cadre (skill : Table Handling) ; case choisie légèrement teintée, son libellé reste écrit */
.att-call-wrap { max-height: 70vh; }
.att-call-table th, .att-call-table td { vertical-align: middle; }
/* table.dataTable : la feuille de DataTables met position: relative sur les en-têtes triables (sinon décalés de « left ») */
table.dataTable.att-call-table thead th, .att-call-table thead th { position: sticky; top: 0; z-index: 3; }
/* Coin figé (cases + élève) au-dessus des en-têtes de créneaux qui défilent dessous */
table.dataTable.att-call-table thead th.att-call-check, table.dataTable.att-call-table thead th.att-call-name { z-index: 5; }
.att-call-table .att-call-check { position: sticky; left: 0; z-index: 2; width: 2.75rem; min-width: 2.75rem; max-width: 2.75rem; }
/* --att-check-w : largeur réelle de la colonne des cases, mesurée par le script de la page */
.att-call-table .att-call-name { position: sticky; left: var(--att-check-w, 2.75rem); z-index: 2; min-width: 13rem; box-shadow: inset -1px 0 0 var(--ms-color-border); }
.att-call-table tbody .att-call-check, .att-call-table tbody .att-call-name { background-color: var(--ms-color-surface); }
.att-call-table thead .att-call-check, .att-call-table thead .att-call-name { z-index: 4; }
/* En-têtes opaques : les colonnes défilées passent dessous */
.att-call-table thead th { background-color: var(--ms-color-surface-muted); }
.att-call-slot { min-width: 9.5rem; white-space: nowrap; }
.att-call-subject { max-width: 11rem; }
.att-call-cell { min-width: 9.5rem; }
.att-call-cell .form-select[class*="ms-tone-"] { border-color: rgb(var(--ms-tone-rgb)); background-color: rgba(var(--ms-tone-rgb), .08); font-weight: 600; }
.att-call-min { width: 7rem; margin-top: var(--ms-space-1); }