/*
 * ╔══════════════════════════════════════════════════════════════╗
 * ║  YELEN SCHOOL — yelen.css                                   ║
 * ║  Design System v4.0 — 100% hors ligne (zéro CDN)            ║
 * ║  Segoe UI / Ubuntu (système) — Playfair Display (logo seul) ║
 * ╚══════════════════════════════════════════════════════════════╝
 */

/* ─────────────────────────────────────────────────────────────── */
/*  0. POLICES AUTO-HÉBERGÉES                                      */
/* ─────────────────────────────────────────────────────────────── */

/* Playfair Display — LOGO UNIQUEMENT — fichier local obligatoire */
@font-face {
  font-family: 'Playfair Display';
  src: url("../fonts/PlayfairDisplay.f9e75e65a521.woff2") format('woff2');
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}

/* ─────────────────────────────────────────────────────────────── */
/*  1. VARIABLES CSS (TOKENS v4.0)                                 */
/* ─────────────────────────────────────────────────────────────── */

:root {
  /* ── Fonds v4.0 (plus profonds) ───────────────────────────── */
  --color-bg-app:        #06101E;
  --color-bg-card:       #0D1A2D;
  --color-bg-input:      #080F1C;
  --color-bg-hover:      #12223A;
  --color-bg-selected:   #172845;
  --color-bg-overlay:    rgba(0,0,0,0.60);
  --color-bg-sidebar:    linear-gradient(180deg, #0B1727 0%, #081220 100%);
  --color-bg-topbar:     rgba(13,26,45,0.97);
  --color-bg-entete:     rgba(6,16,30,0.5);      /* en-têtes de tableaux, barres d'onglets */

  /* ── Encre : teinte posée sur les fonds (bordures fines, survols) — blanche en sombre, ardoise en clair ── */
  --ink: 255, 255, 255;

  /* ── Système AURA (Glassmorphism & Lueurs) ──────────────────── */
  --aura-glow:          rgba(0,168,107,0.12);
  --aura-glass-bg:      rgba(13,26,45,0.75);
  --aura-glass-border:  rgba(var(--ink), 0.08);
  --aura-blur:          blur(12px);

  /* ── Bordures ──────────────────────────────────────────────── */
  --color-border:        rgba(var(--ink), 0.07);
  --color-border-focus:  rgba(0,168,107,0.60);
  --color-border-error:  rgba(220,53,69,0.70);
  --color-border-active: rgba(0,168,107,0.22);

  /* ── Palette principale ───────────────────────────────────── */
  --color-primary:         #00A86B;
  --color-primary-dark:    #007A4D;
  --color-primary-light:   #00C07A;
  --color-primary-glow:    rgba(0,168,107,0.35);
  --color-primary-ambient: rgba(0,168,107,0.18);

  --color-gold:          #F5A623;
  --color-gold-dark:     #C27D00;

  --color-danger:        #DC3545;
  --color-info:          #17A2B8;
  --color-purple:        #A259FF;

  /* ── Texte ─────────────────────────────────────────────────── */
  --color-text-primary:  #E8EDF5;
  --color-text-secondary:#8CA5C0;
  --color-text-muted:    #4A6880;
  --color-text-inverse:  #06101E;

  /* ── Notes scolaires (BF — sur 20) ──────────────────────── */
  --color-note-excellent: #00C07A;   /* >= 16/20 */
  --color-note-bien:      #F5A623;   /* >= 12/20 */
  --color-note-insuffisant:#FF6B7A;  /* < 12/20  */

  /* ── Ombres premium ────────────────────────────────────────── */
  --shadow-card:       0 2px 20px rgba(0,0,0,0.40);
  --shadow-card-hover: 0 12px 32px rgba(0,0,0,0.50);
  --shadow-sidebar:    4px 0 32px rgba(0,0,0,0.35);
  --shadow-topbar:     0 1px 32px rgba(0,0,0,0.25);
  --shadow-btn:        0 4px 16px rgba(0,168,107,0.35);
  --shadow-btn-hover:  0 6px 20px rgba(0,168,107,0.45);
  --glow-primary:      0 0 20px rgba(0,168,107,0.30);
  --glow-active-bar:   0 0 8px #00A86B;

  /* ── Typographie — 100% système, zéro téléchargement ──────── */
  --font-interface: 'Segoe UI', Ubuntu, system-ui, sans-serif;
  --font-logo:      'Playfair Display', Georgia, 'Times New Roman', serif;
  --font-mono:      Consolas, 'DejaVu Sans Mono', 'Courier New', monospace;

  /* ── Tailles de texte ─────────────────────────────────────── */
  --text-xs:   0.75rem;    /* 12px */
  --text-sm:   0.875rem;   /* 14px */
  --text-base: 1rem;       /* 16px */
  --text-lg:   1.125rem;   /* 18px */
  --text-xl:   1.25rem;    /* 20px */
  --text-2xl:  1.5rem;     /* 24px */
  --text-3xl:  1.875rem;   /* 30px */

  /* ── Poids ─────────────────────────────────────────────────── */
  --font-light:    300;
  --font-regular:  400;
  --font-medium:   500;
  --font-semibold: 600;
  --font-bold:     700;

  /* ── Espacement ────────────────────────────────────────────── */
  --space-1:  0.25rem;
  --space-2:  0.5rem;
  --space-3:  0.75rem;
  --space-4:  1rem;
  --space-5:  1.25rem;
  --space-6:  1.5rem;
  --space-8:  2rem;
  --space-10: 2.5rem;
  --space-12: 3rem;

  /* ── Rayons ────────────────────────────────────────────────── */
  --radius-sm:   6px;
  --radius-md:   10px;
  --radius-lg:   16px;
  --radius-xl:   24px;
  --radius-full: 9999px;
}

/* ── Thème clair (Mon profil → Apparence ; « selon l'appareil » est résolu par static/js/theme.js) ──
   Seules les surfaces, bordures, textes, ombres et accents posés sur fond clair changent ; la palette
   principale, les boutons et les badges colorés restent identiques. ─────────────────────────────── */
:root[data-theme="clair"] {
  --ink: 15, 23, 42;
  --color-bg-app:        #F1F5F9;
  --color-bg-card:       #FFFFFF;
  --color-bg-input:      #FFFFFF;
  --color-bg-hover:      #E9EEF5;
  --color-bg-selected:   #DCE5F0;
  --color-bg-overlay:    rgba(15,23,42,0.45);
  --color-bg-sidebar:    linear-gradient(180deg, #FFFFFF 0%, #F4F7FB 100%);
  --color-bg-topbar:     rgba(255,255,255,0.97);
  --color-bg-entete:     #EDF2F7;
  --aura-glow:           rgba(0,168,107,0.10);
  --aura-glass-bg:       rgba(255,255,255,0.80);
  --aura-glass-border:   rgba(15,23,42,0.08);
  --color-border:        rgba(15,23,42,0.10);
  --color-primary-light: #00935E;
  --color-gold:          #D97706;
  --color-info:          #0E7490;
  --color-text-primary:  #0F172A;
  --color-text-secondary:#475569;
  --color-text-muted:    #64748B;
  --color-text-inverse:  #FFFFFF;
  --color-note-excellent:  #008F5B;
  --color-note-bien:       #B45309;
  --color-note-insuffisant:#DC2626;
  --shadow-card:       0 2px 12px rgba(15,23,42,0.06);
  --shadow-card-hover: 0 10px 28px rgba(15,23,42,0.12);
  --shadow-sidebar:    4px 0 24px rgba(15,23,42,0.06);
  --shadow-topbar:     0 1px 16px rgba(15,23,42,0.06);
}

/* ─────────────────────────────────────────────────────────────── */
/*  2. RESET CSS                                                    */
/* ─────────────────────────────────────────────────────────────── */

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

html {
  font-size: 16px;
  scroll-behavior: smooth;
}

body {
  background: var(--color-bg-app);
  color: var(--color-text-primary);
  font-family: var(--font-interface);
  font-size: var(--text-base);
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

a {
  color: var(--color-primary);
  text-decoration: none;
}

a:hover {
  color: var(--color-primary-light);
}

ul, ol {
  list-style: none;
}

img {
  max-width: 100%;
  display: block;
}

button {
  font-family: var(--font-interface);
  cursor: pointer;
}

/* ─────────────────────────────────────────────────────────────── */
/*  3. LAYOUT PRINCIPAL                                             */
/* ─────────────────────────────────────────────────────────────── */

.app-layout {
  display: flex;
  min-height: 100vh;
  background: var(--color-bg-app);
  font-family: var(--font-interface);
  color: var(--color-text-primary);
  position: relative;
  overflow-x: hidden;
  /* Isoler la décoration fixe pour éviter les artefacts de composition
     (doublons/traînées) dans Chromium et les navigateurs Windows. */
  isolation: isolate;
}

/* ── Lueurs Décoratives Aura ── */
.aura-glow-container {
  position: fixed;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  overflow: hidden;
}

.aura-glow {
  position: absolute;
  border-radius: var(--radius-full);
  /* Le flou animé créait des artefacts visuels sur certains GPU Windows.
     Le dégradé radial suffit à garder une lueur légère et stable. */
  filter: none;
  opacity: 0.28;
  animation: none;
}

.aura-glow-1 {
  top: -10%;
  right: -5%;
  width: 500px;
  height: 500px;
  background: radial-gradient(circle, rgba(0,168,107,0.25) 0%, transparent 70%);
}

.aura-glow-2 {
  bottom: -10%;
  left: -5%;
  width: 600px;
  height: 600px;
  background: radial-gradient(circle, rgba(0,60,40,0.30) 0%, transparent 70%);
  animation-delay: -5s;
}

@keyframes auraFloat {
  0%   { transform: translate(0, 0) scale(1); }
  100% { transform: translate(5%, 5%) scale(1.08); }
}

/* ── Sidebar premium v4.0 ─────────────────────────────────────── */

.sidebar {
  width: 252px;
  min-height: 100vh;
  background: var(--color-bg-sidebar);
  border-right: 1px solid var(--color-border);
  display: flex;
  flex-direction: column;
  position: sticky;
  top: 0;
  height: 100vh;
  overflow-y: auto;
  flex-shrink: 0;
  box-shadow: var(--shadow-sidebar);
  z-index: 20;
  scrollbar-width: thin;
  scrollbar-color: var(--color-border) transparent;
}

.sidebar::-webkit-scrollbar { width: 3px; }
.sidebar::-webkit-scrollbar-track { background: transparent; }
.sidebar::-webkit-scrollbar-thumb {
  background: var(--color-border);
  border-radius: var(--radius-full);
}

/* Logo sidebar */
.sidebar-logo {
  padding: 26px 20px 20px;
  border-bottom: 1px solid var(--color-border);
  flex-shrink: 0;
}

.logo-app-name {
  font-family: var(--font-logo);
  font-size: var(--text-xl);
  font-weight: 700;
  color: var(--color-text-primary);
  letter-spacing: 0.01em;
  display: block;
}

.logo-tagline {
  font-size: 11px;
  color: var(--color-text-muted);
  margin-top: 3px;
  display: block;
  letter-spacing: 0.02em;
}

/* Navigation */
.sidebar-nav {
  flex: 1;
  padding: var(--space-3) 0;
  overflow-y: auto;
}

.sidebar-nav-section {
  margin-bottom: var(--space-2);
}

.sidebar-nav-label {
  font-size: 10px;
  font-weight: var(--font-semibold);
  text-transform: uppercase;
  letter-spacing: 0.12em;
  color: var(--color-text-muted);
  padding: var(--space-2) var(--space-5);
  display: block;
  margin-top: var(--space-3);
}

/* Pied de sidebar */
.sidebar-footer {
  padding: var(--space-4) var(--space-5);
  border-top: 1px solid var(--color-border);
  flex-shrink: 0;
}

/* ══════════════════════════════════════════════════════════════ */
/*  SIDEBAR MODERNE (sb-modern) — classes utilisées dans base.html */
/* ══════════════════════════════════════════════════════════════ */

.sb-modern {
  width: 260px;
  min-height: 100vh;
  height: 100vh;
  background: var(--color-bg-sidebar);
  border-right: 1px solid rgba(var(--ink), 0.07);
  display: flex;
  flex-direction: column;
  position: sticky;
  top: 0;
  overflow-y: auto;
  overflow-x: hidden;
  flex-shrink: 0;
  z-index: 20;
  box-shadow: 4px 0 32px rgba(0,0,0,0.35);
  scrollbar-width: thin;
  scrollbar-color: rgba(var(--ink), 0.08) transparent;
}

.sb-modern::-webkit-scrollbar { width: 3px; }
.sb-modern::-webkit-scrollbar-track { background: transparent; }
.sb-modern::-webkit-scrollbar-thumb {
  background: rgba(var(--ink), 0.1);
  border-radius: 3px;
}

/* ── Header logo ── */
.sb-header {
  padding: 1.125rem 1rem 1rem;
  border-bottom: 1px solid rgba(var(--ink), 0.07);
  flex-shrink: 0;
}

.sb-logo-modern {
  display: flex;
  align-items: center;
  gap: 0.75rem;
}

.sb-logo-icon {
  width: 38px;
  height: 38px;
  background: linear-gradient(135deg, #00A86B 0%, #007A4D 100%);
  border-radius: 10px;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #fff;
  flex-shrink: 0;
  box-shadow: 0 4px 12px rgba(0,168,107,0.35);
}

.sb-logo-icon svg {
  width: 20px;
  height: 20px;
}

.sb-logo-text {
  display: flex;
  flex-direction: column;
}

.sb-logo-name {
  font-family: var(--font-logo);
  font-size: 0.925rem;
  font-weight: 700;
  color: var(--color-text-primary);
  line-height: 1.2;
  letter-spacing: 0.01em;
}

.sb-logo-tagline {
  font-size: 0.675rem;
  color: var(--color-text-muted);
  letter-spacing: 0.05em;
  margin-top: 1px;
}

/* ── Utilisateur ── */
.sb-user-modern {
  display: flex;
  align-items: center;
  gap: 0.625rem;
  padding: 0.75rem 1rem;
  border-bottom: 1px solid rgba(var(--ink), 0.06);
  flex-shrink: 0;
}

a.sb-user-modern {
  color: inherit;
  transition: background 0.2s;
}

a.sb-user-modern:hover {
  background: rgba(var(--ink), 0.07);
}

.sb-avatar-modern {
  width: 34px;
  height: 34px;
  border-radius: 9px;
  background: linear-gradient(135deg, #162B44, #0D1E30);
  border: 1px solid rgba(0,168,107,0.25);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 0.8rem;
  font-weight: 700;
  color: #00A86B;
  flex-shrink: 0;
}

.sb-user-details {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
}

.sb-user-name {
  font-size: 0.8125rem;
  font-weight: 600;
  color: var(--color-text-primary);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  line-height: 1.3;
}

.sb-user-email {
  font-size: 0.7rem;
  color: var(--color-text-muted);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  line-height: 1.3;
}

.sb-online-dot {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: #00A86B;
  box-shadow: 0 0 6px rgba(0,168,107,0.7);
  flex-shrink: 0;
}

/* ── Recherche ── */
.sb-search-modern {
  padding: 0.625rem 0.75rem;
  border-bottom: 1px solid rgba(var(--ink), 0.06);
  flex-shrink: 0;
}

.sb-search-input {
  width: 100%;
  background: rgba(var(--ink), 0.04);
  border: 1px solid rgba(var(--ink), 0.08);
  border-radius: 8px;
  padding: 0.4375rem 0.75rem;
  font-size: 0.8125rem;
  color: var(--color-text-secondary);
  font-family: var(--font-interface);
  outline: none;
  transition: border-color 0.2s, background 0.2s;
}

.sb-search-input::placeholder { color: var(--color-text-muted); }

.sb-search-input:focus {
  border-color: rgba(0,168,107,0.4);
  background: rgba(var(--ink), 0.06);
}

/* ── Navigation ── */
.sb-nav-modern {
  flex: 1;
  padding: 0.5rem 0.5rem 1rem;
  overflow-y: auto;
  overflow-x: hidden;
}

.sb-section-modern {
  display: block;
  font-size: 0.625rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.12em;
  color: var(--color-text-muted);
  padding: 0.5rem 0.75rem 0.25rem;
  margin-top: 0.25rem;
}

.sb-sep-modern {
  height: 1px;
  background: rgba(var(--ink), 0.06);
  margin: 0.5rem 0.75rem;
}

.nav-separator {
  height: 1px;
  background: rgba(var(--ink), 0.05);
  margin: 0.25rem 0;
}

/* ── Item principal ── */
.sb-item-modern {
  display: flex;
  align-items: center;
  gap: 0.625rem;
  padding: 0.4375rem 0.75rem;
  border-radius: 8px;
  color: var(--color-text-secondary);
  font-size: 0.8125rem;
  font-weight: 500;
  text-decoration: none;
  cursor: pointer;
  border: none;
  background: none;
  width: 100%;
  text-align: left;
  transition: background 0.15s, color 0.15s;
  line-height: 1.4;
  font-family: var(--font-interface);
}

.sb-item-modern:hover {
  background: rgba(var(--ink), 0.06);
  color: var(--color-text-primary);
}

.sb-item-modern.active {
  background: rgba(0,168,107,0.12);
  color: #00C07A;
  font-weight: 600;
}

/* ── Icônes items ── */
.sb-icon-modern,
.menu-icon {
  width: 16px;
  height: 16px;
  flex-shrink: 0;
  opacity: 0.65;
  transition: opacity 0.15s;
}

.sb-item-modern:hover .sb-icon-modern,
.sb-item-modern:hover .menu-icon { opacity: 1; }

.sb-item-modern.active .sb-icon-modern,
.sb-item-modern.active .menu-icon { opacity: 1; color: #00C07A; }

/* ── Accordéon ── */
.accordion-toggle {
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 100%;
  padding: 0.4375rem 0.75rem;
  border-radius: 8px;
  background: none;
  border: none;
  cursor: pointer;
  color: var(--color-text-secondary);
  font-size: 0.8125rem;
  font-weight: 500;
  font-family: var(--font-interface);
  text-align: left;
  transition: background 0.15s, color 0.15s;
}

.accordion-toggle:hover {
  background: rgba(var(--ink), 0.06);
  color: var(--color-text-primary);
}

.accordion-toggle.active {
  color: #00C07A;
  background: rgba(0,168,107,0.08);
}

.accordion-label {
  display: flex;
  align-items: center;
  gap: 0.625rem;
}

.accordion-icon {
  width: 16px;
  height: 16px;
  flex-shrink: 0;
  opacity: 0.65;
  transition: opacity 0.15s;
}

.accordion-toggle:hover .accordion-icon { opacity: 1; }
.accordion-toggle.active .accordion-icon { opacity: 1; color: #00C07A; }

.sb-chevron {
  width: 14px;
  height: 14px;
  flex-shrink: 0;
  opacity: 0.45;
  transition: transform 0.2s ease, opacity 0.2s;
}

.sb-chevron.rotated {
  transform: rotate(180deg);
  opacity: 0.75;
}

/* ── Sous-menu ── */
.sb-submenu-modern {
  padding-left: 1.375rem;
  margin-top: 0.125rem;
  display: none;
}

/* état ouvert : déclaré une seule fois, plus bas (bloc « structure du gabarit de base ») */

.sb-item-submodern {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.3125rem 0.625rem;
  border-radius: 6px;
  color: var(--color-text-muted);
  font-size: 0.775rem;
  font-weight: 400;
  text-decoration: none;
  transition: background 0.15s, color 0.15s;
  line-height: 1.4;
}

.sb-item-submodern:hover {
  background: rgba(var(--ink), 0.04);
  color: var(--color-text-secondary);
}

.sb-item-submodern.active { color: #00C07A; }

.sub-item-dot {
  width: 4px;
  height: 4px;
  border-radius: 50%;
  background: currentColor;
  flex-shrink: 0;
  opacity: 0.35;
  transition: opacity 0.15s;
}

.sb-item-submodern:hover .sub-item-dot,
.sb-item-submodern.active .sub-item-dot { opacity: 1; }

/* ── Pied sidebar ── */
.sb-footer-modern {
  padding: 0.75rem 1rem;
  border-top: 1px solid rgba(var(--ink), 0.07);
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-shrink: 0;
  background: rgba(var(--ink), 0.04);
}

.sb-version {
  font-size: 0.625rem;
  color: var(--color-text-muted);
  letter-spacing: 0.04em;
}

.sb-footer-actions {
  display: flex;
  align-items: center;
  gap: 0.25rem;
}

.sb-footer-btn {
  width: 28px;
  height: 28px;
  border-radius: 7px;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--color-text-muted);
  transition: background 0.15s, color 0.15s;
  text-decoration: none;
}

.sb-footer-btn:hover {
  background: rgba(var(--ink), 0.07);
  color: var(--color-text-secondary);
}

.sb-footer-btn.danger:hover {
  background: rgba(220,53,69,0.12);
  color: #ef4444;
}

/* ── Zone principale ──────────────────────────────────────────── */

.main-wrapper {
  flex: 1;
  display: flex;
  flex-direction: column;
  min-height: 100vh;
  overflow: hidden;
  position: relative;
  z-index: 1;
}

.content {
  padding: var(--space-6);
  flex: 1;
  overflow-y: auto;
}

/* ── Topbar glassmorphe v4.0 ──────────────────────────────────── */

.topbar {
  height: 60px;
  background: var(--color-bg-topbar);
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
  border-bottom: 1px solid var(--color-border);
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 var(--space-6);
  position: sticky;
  top: 0;
  z-index: 10;
  flex-shrink: 0;
  box-shadow: var(--shadow-topbar);
}

.topbar-title {
  font-size: var(--text-base);
  font-weight: var(--font-semibold);
  color: var(--color-text-primary);
  letter-spacing: -0.01em;
}

.topbar-actions {
  display: flex;
  align-items: center;
  gap: var(--space-3);
}

/* ── Contenu ──────────────────────────────────────────────────── */

.content {
  padding: var(--space-6);
  flex: 1;
  overflow-y: auto;
}

.main-footer {
  padding: var(--space-4) var(--space-6);
  text-align: center;
  font-size: 0.8rem;
  color: var(--color-text-muted);
  border-top: 1px solid rgba(var(--ink), 0.06);
  background: var(--color-bg-card);
  margin-top: auto;
  flex-shrink: 0;
}

/* Page header */
.page-header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  margin-bottom: var(--space-6);
  gap: var(--space-4);
  flex-wrap: wrap;        /* le bloc d'actions descend d'une ligne quand la place manque */
}

/* Le titre cède la place avant les boutons, sans jamais provoquer de défilement horizontal.
   Ciblé sur le bloc `<div>` du titre : une page dont l'en-tête ne contient que des boutons les garde à leur taille. */
.page-header > div:first-child {
  flex: 1 1 20rem;
  min-width: 0;
}

.page-actions {
  display: flex;
  gap: var(--space-3);
  align-items: center;
  flex: 0 0 auto;
  flex-wrap: wrap;        /* les boutons passent à la ligne plutôt que de sortir de l'écran */
  justify-content: flex-end;
  max-width: 100%;
}

.page-title {
  font-size: var(--text-2xl);
  font-weight: var(--font-bold);
  color: var(--color-text-primary);
  letter-spacing: -0.02em;
  line-height: 1.2;
  white-space: nowrap;
}

/* Fil d'Ariane (breadcrumb) - intégré dans page-subtitle */
.page-subtitle {
  font-size: var(--text-sm);
  color: var(--color-text-secondary);
  margin-top: var(--space-1);
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: var(--space-1);
}

.page-subtitle a {
  color: var(--color-text-secondary);
  text-decoration: none;
  transition: color 0.15s;
}

.page-subtitle a:hover {
  color: var(--color-primary);
  text-decoration: underline;
}

.page-subtitle .breadcrumb-sep {
  color: var(--color-text-muted);
  opacity: 0.5;
  margin: 0 2px;
}

.page-subtitle .breadcrumb-current {
  color: var(--color-text-primary);
  font-weight: var(--font-medium);
}

/* Breadcrumb */
.breadcrumb {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  margin-bottom: var(--space-4);
  font-size: var(--text-sm);
  color: var(--color-text-muted);
}

.breadcrumb-link {
  color: var(--color-text-secondary);
  text-decoration: none;
  transition: color 0.15s;
}

.breadcrumb-link:hover {
  color: var(--color-primary);
  text-decoration: underline;
}

.breadcrumb-sep {
  color: var(--color-text-muted);
  opacity: 0.5;
}

.breadcrumb-current {
  color: var(--color-text-primary);
  font-weight: var(--font-medium);
}

/* ─────────────────────────────────────────────────────────────── */
/*  4. COMPOSANTS                                                   */
/* ─────────────────────────────────────────────────────────────── */

/* ── Menu items sidebar ───────────────────────────────────────── */

.menu-item {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  padding: 9px var(--space-4);
  border-radius: var(--radius-md);
  color: var(--color-text-secondary);
  text-decoration: none;
  font-size: var(--text-sm);
  font-weight: var(--font-medium);
  transition: all 0.15s ease;
  margin: 1px var(--space-2);
  position: relative;
  border: 1px solid transparent;
}

.menu-item:hover {
  background: rgba(var(--ink), 0.04);
  color: var(--color-text-primary);
  border-color: rgba(var(--ink), 0.05);
}

.menu-item.active {
  background: var(--color-primary-ambient);
  color: var(--color-primary-light);
  border-color: var(--color-border-active);
  border-left: 2px solid var(--color-primary);
  box-shadow: var(--glow-primary);
  padding-left: calc(var(--space-4) - 1px);
}

.menu-item .menu-icon {
  width: 18px;
  height: 18px;
  flex-shrink: 0;
  opacity: 0.65;
}

.menu-item.active .menu-icon {
  opacity: 1;
}

.menu-item-sub {
  font-size: var(--text-xs);
  padding: 7px var(--space-3);
  color: var(--color-text-muted);
}

.menu-item-sub.active {
  color: var(--color-primary-light);
}

/* ── Glassmorphic panel (v-glass) ─────────────────────────────── */

.v-glass {
  background: var(--aura-glass-bg);
  backdrop-filter: var(--aura-blur);
  -webkit-backdrop-filter: var(--aura-blur);
  border: 1px solid var(--aura-glass-border);
  border-radius: var(--radius-lg);
}

/* ── Carte (card) ─────────────────────────────────────────────── */

.card {
  background: var(--color-bg-card);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  padding: var(--space-6);
  box-shadow: var(--shadow-card);
  transition: border-color 0.25s ease, box-shadow 0.25s ease;
}

.card:hover {
  border-color: rgba(0,168,107,0.18);
  box-shadow: var(--shadow-card-hover);
}

.card-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-3);
  margin-bottom: var(--space-4);
  padding-bottom: var(--space-4);
  border-bottom: 1px solid var(--color-border);
}

.card-title {
  font-size: var(--text-base);
  font-weight: var(--font-semibold);
  color: var(--color-text-primary);
}

/* ── Carte statistique v4.0 ───────────────────────────────────── */

.stat-card {
  background: var(--color-bg-card);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  padding: var(--space-5) var(--space-6);
  display: flex;
  align-items: center;
  gap: var(--space-4);
  box-shadow: var(--shadow-card);
  transition: transform 0.2s ease, box-shadow 0.2s ease, border-color 0.2s ease;
  position: relative;
  overflow: hidden;
}

.stat-card::before {
  content: '';
  position: absolute;
  inset: 0;
  border-radius: var(--radius-lg);
  opacity: 0;
  transition: opacity 0.25s ease;
  background: linear-gradient(135deg, rgba(0,168,107,0.06) 0%, transparent 60%);
}

.stat-card:hover {
  transform: translateY(-3px);
  box-shadow: var(--shadow-card-hover);
  border-color: rgba(0,168,107,0.15);
}

.stat-card:hover::before {
  opacity: 1;
}

.stat-icon {
  width: 48px;
  height: 48px;
  border-radius: var(--radius-md);
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

.stat-icon svg { width: 24px; height: 24px; }

.stat-icon-green  { background: rgba(0,168,107,0.15); color: var(--color-primary); }
.stat-icon-blue   { background: rgba(23,162,184,0.15); color: #17A2B8; }
.stat-icon-gold   { background: rgba(245,166,35,0.15); color: #F5A623; }
.stat-icon-purple { background: rgba(162,89,255,0.15); color: #A259FF; }
.stat-icon-red    { background: rgba(220,53,69,0.15); color: #FF6B7A; }

.stat-value {
  font-size: var(--text-3xl);
  font-weight: var(--font-bold);
  color: var(--color-text-primary);
  line-height: 1;
  letter-spacing: -0.02em;
}

.stat-label {
  font-size: var(--text-xs);
  color: var(--color-text-secondary);
  margin-top: var(--space-1);
  text-transform: uppercase;
  letter-spacing: 0.06em;
  font-weight: var(--font-medium);
}

/* ── Grille de stats ──────────────────────────────────────────── */

.stats-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--space-4);
  margin-bottom: var(--space-6);
}

.stats-grid-auto {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
  gap: var(--space-4);
  margin-bottom: var(--space-6);
}

/* ── Carte module (launcher) ──────────────────────────────────── */

.module-card {
  display: block;
  background: var(--color-bg-card);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-xl);
  padding: var(--space-8);
  box-shadow: var(--shadow-card);
  text-decoration: none;
  transition: border-color 0.25s ease, box-shadow 0.25s ease, transform 0.2s ease;
  position: relative;
  overflow: hidden;
}

.module-card::after {
  content: '';
  position: absolute;
  inset: 0;
  border-radius: var(--radius-xl);
  background: linear-gradient(135deg, rgba(0,168,107,0.05) 0%, transparent 50%);
  opacity: 0;
  transition: opacity 0.25s ease;
}

.module-card:hover {
  border-color: rgba(0,168,107,0.35);
  box-shadow: 0 16px 48px rgba(0,0,0,0.5), 0 0 0 1px rgba(0,168,107,0.1);
  transform: translateY(-4px);
  color: var(--color-text-primary);
}

.module-card:hover::after {
  opacity: 1;
}

.module-card-header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  margin-bottom: var(--space-5);
}

.module-icon {
  width: 52px;
  height: 52px;
  border-radius: var(--radius-lg);
  background: rgba(0,168,107,0.1);
  border: 1px solid rgba(0,168,107,0.15);
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--color-primary);
  transition: background 0.2s ease, color 0.2s ease;
}

.module-icon svg { width: 24px; height: 24px; }

.module-card:hover .module-icon {
  background: var(--color-primary);
  color: white;
  border-color: var(--color-primary);
}

.module-arrow {
  color: var(--color-border);
  transition: color 0.2s ease, transform 0.2s ease;
}

.module-arrow svg { width: 20px; height: 20px; }

.module-card:hover .module-arrow {
  color: var(--color-primary);
  transform: translate(4px, -4px);
}

.module-title {
  font-size: var(--text-xl);
  font-weight: var(--font-bold);
  color: var(--color-text-primary);
  margin-bottom: var(--space-2);
  letter-spacing: -0.01em;
}

.module-description {
  font-size: var(--text-sm);
  color: var(--color-text-secondary);
  line-height: 1.6;
}

/* ── Grille modules ───────────────────────────────────────────── */

.modules-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
  gap: var(--space-6);
}

/* ── Carte de configuration (param-card) ──────────────────────── */

.param-card {
  display: block;
  background: var(--color-bg-card);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  padding: var(--space-5);
  text-decoration: none;
  transition: border-color 0.2s ease, box-shadow 0.2s ease, background 0.2s ease;
}

.param-card:hover {
  border-color: rgba(0,168,107,0.30);
  background: var(--color-bg-hover);
  box-shadow: var(--shadow-card);
  color: var(--color-text-primary);
}

.param-card-inner {
  display: flex;
  align-items: flex-start;
  gap: var(--space-4);
}

.param-icon {
  width: 40px;
  height: 40px;
  border-radius: var(--radius-md);
  background: rgba(0,168,107,0.10);
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--color-primary);
  flex-shrink: 0;
  transition: background 0.2s ease;
}

.param-icon svg { width: 18px; height: 18px; }

.param-card:hover .param-icon {
  background: rgba(0,168,107,0.18);
}

/* Variantes couleur pour .param-icon */
.param-icon-info {
  background: rgba(23,162,184,0.13);
  color: #17A2B8;
}
.param-icon-warning {
  background: rgba(245,166,35,0.13);
  color: #F5A623;
}

.param-body {
  flex: 1;
  min-width: 0;
}

.param-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-2);
  margin-bottom: var(--space-1);
}

.param-title {
  font-size: var(--text-sm);
  font-weight: var(--font-semibold);
  color: var(--color-text-primary);
  transition: color 0.2s ease;
}

.param-card:hover .param-title {
  color: var(--color-primary-light);
}

.param-count {
  font-size: var(--text-xs);
  font-weight: var(--font-medium);
  padding: 2px 8px;
  border-radius: var(--radius-full);
  background: rgba(0,168,107,0.12);
  color: var(--color-primary-light);
  flex-shrink: 0;
}

.param-description {
  font-size: var(--text-xs);
  color: var(--color-text-muted);
  line-height: 1.5;
}

/* ── Grille de configuration ──────────────────────────────────── */

.params-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
  gap: var(--space-4);
}

/* ── Boutons ──────────────────────────────────────────────────── */

.btn-primary {
  background: linear-gradient(135deg, var(--color-primary), var(--color-primary-dark));
  color: white;
  border: none;
  border-radius: var(--radius-md);
  padding: 10px var(--space-5);
  font-family: var(--font-interface);
  font-size: var(--text-sm);
  font-weight: var(--font-semibold);
  cursor: pointer;
  transition: all 0.2s ease;
  box-shadow: var(--shadow-btn);
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  text-decoration: none;
  letter-spacing: 0.01em;
  white-space: nowrap;
}

.btn-primary:hover {
  background: linear-gradient(135deg, var(--color-primary-light), var(--color-primary));
  box-shadow: var(--shadow-btn-hover);
  transform: translateY(-2px);
  color: white;
}

.btn-primary:disabled {
  opacity: 0.5;
  cursor: not-allowed;
  box-shadow: none;
  transform: none;
  filter: grayscale(0.6);
}

.btn-secondary {
  background: transparent;
  color: var(--color-text-secondary);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  padding: 10px var(--space-5);
  font-family: var(--font-interface);
  font-size: var(--text-sm);
  font-weight: var(--font-medium);
  cursor: pointer;
  transition: all 0.2s ease;
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  text-decoration: none;
  white-space: nowrap;
}

.btn-secondary:hover {
  border-color: rgba(0,168,107,0.40);
  color: var(--color-primary-light);
  background: rgba(0,168,107,0.06);
}

.btn-danger {
  background: rgba(220,53,69,0.15);
  color: #FF6B7A;
  border: 1px solid rgba(220,53,69,0.25);
  border-radius: var(--radius-md);
  padding: 10px var(--space-5);
  font-family: var(--font-interface);
  font-size: var(--text-sm);
  font-weight: var(--font-semibold);
  cursor: pointer;
  transition: all 0.2s ease;
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
}

.btn-danger:hover {
  background: rgba(220,53,69,0.25);
  border-color: rgba(220,53,69,0.45);
  transform: translateY(-1px);
}

.btn-sm {
  padding: 6px var(--space-3) !important;
  font-size: var(--text-xs) !important;
}

.btn-icon {
  background: transparent;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  width: 34px;
  height: 34px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: var(--color-text-secondary);
  cursor: pointer;
  transition: all 0.15s ease;
  text-decoration: none;
  flex-shrink: 0;
}

.btn-icon:hover {
  border-color: rgba(0,168,107,0.35);
  color: var(--color-primary-light);
  background: rgba(0,168,107,0.08);
}

.btn-icon-danger:hover {
  border-color: rgba(220,53,69,0.35);
  color: #FF6B7A;
  background: rgba(220,53,69,0.08);
}

/* ── Badges cristal v4.0 ──────────────────────────────────────── */

.badge {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 3px 10px;
  border-radius: var(--radius-full);
  font-size: 11px;
  font-weight: var(--font-semibold);
  letter-spacing: 0.04em;
  white-space: nowrap;
}

.badge-success  { background: rgba(0,192,122,0.12);  border: 1px solid rgba(0,192,122,0.20); color: #00C07A; }
.badge-warning  { background: rgba(245,166,35,0.12); border: 1px solid rgba(245,166,35,0.20); color: #F5A623; }
.badge-danger   { background: rgba(220,53,69,0.12);  border: 1px solid rgba(220,53,69,0.20);  color: #FF6B7A; }
.badge-info     { background: rgba(23,162,184,0.12); border: 1px solid rgba(23,162,184,0.20); color: #17A2B8; }
.badge-neutral  { background: rgba(138,165,192,0.10);border: 1px solid rgba(138,165,192,0.15);color: var(--color-text-secondary); }
.badge-purple   { background: rgba(162,89,255,0.12); border: 1px solid rgba(162,89,255,0.20); color: #A259FF; }

/* Statuts élèves */
.badge-affecte     { background: rgba(0,192,122,0.12);  border: 1px solid rgba(0,192,122,0.20); color: #00C07A; }
.badge-non-affecte { background: rgba(245,166,35,0.12); border: 1px solid rgba(245,166,35,0.20);color: #F5A623; }
.badge-boursier    { background: rgba(23,162,184,0.12); border: 1px solid rgba(23,162,184,0.20);color: #17A2B8; }
.badge-exonere     { background: rgba(138,165,192,0.10);border: 1px solid rgba(138,165,192,0.15);color: var(--color-text-secondary); }
.badge-redoublant  { background: rgba(220,53,69,0.12);  border: 1px solid rgba(220,53,69,0.20); color: #FF6B7A; }

/* ── Champs de saisie ─────────────────────────────────────────── */

.input {
  width: 100%;
  background: var(--color-bg-input);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  padding: var(--space-3) var(--space-4);
  min-height: 42px;
  color: var(--color-text-primary);
  font-family: var(--font-interface);
  font-size: var(--text-sm);
  line-height: 1.5;
  transition: border-color 0.2s ease, box-shadow 0.2s ease;
  outline: none;
}

.input.input-sm,
.input-sm {
  padding: var(--space-2) var(--space-3);
  min-height: 36px;
  font-size: var(--text-xs);
}

.input.input-xs,
.input-xs {
  padding: var(--space-1) var(--space-2);
  min-height: 30px;
  font-size: var(--text-xs);
}

.input-short,
.input.input-short {
  width: 120px !important;
  min-width: 80px;
}

.input:focus {
  border-color: var(--color-border-focus);
  box-shadow: 0 0 0 3px rgba(0,168,107,0.10);
  background: var(--color-bg-input);
}

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

.input:disabled,
.input-readonly {
  background: var(--color-bg-input);
  color: var(--color-text-muted);
  border-style: dashed;
  cursor: not-allowed;
  opacity: 0.6;
}

.input-age-readonly {
  background: var(--color-bg-input);
  color: var(--color-text-secondary);
  border: 1px dashed var(--color-border);
  border-radius: var(--radius-md);
  padding: var(--space-3) var(--space-4);
  font-family: var(--font-interface);
  font-size: var(--text-sm);
  cursor: not-allowed;
  width: 100%;
}

.input-label {
  display: block;
  font-size: var(--text-xs);
  font-weight: var(--font-semibold);
  color: var(--color-text-secondary);
  margin-bottom: var(--space-1);
  text-transform: uppercase;
  letter-spacing: 0.05em;
}

/* Indicateur visuel pour champs obligatoires - ajouté via JS */
.required-star {
  color: var(--color-danger);
  font-weight: 700;
}

.input-label.required::after {
  content: " *";
  color: var(--color-danger);
}

.input-error {
  font-size: var(--text-xs);
  color: #FF6B7A;
  margin-top: var(--space-1);
}

.form-group {
  margin-bottom: var(--space-4);
}

.select {
  appearance: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' fill='%234A6880'%3E%3Cpath d='M6 8L1 3h10z'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right var(--space-4) center;
  padding-right: calc(var(--space-4) + 20px);
  padding-left: var(--space-4);
  cursor: pointer;
  min-height: 48px;
  line-height: 1.6;
  width: 100%;
  font-size: 0.95rem;
}

/* Native select without explicit class — Django forms that render bare <select> */
select.input {
  appearance: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' fill='%234A6880'%3E%3Cpath d='M6 8L1 3h10z'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right var(--space-4) center;
  padding-right: calc(var(--space-4) + 20px);
  padding-left: var(--space-4);
  cursor: pointer;
  min-height: 48px;
  line-height: 1.6;
  width: 100%;
  font-size: 0.95rem;
}

/* Dropdown options - improve appearance */
.select option, select.input option {
  padding: var(--space-3);
  background: var(--color-bg-card);
  color: var(--color-text-primary);
  font-size: 0.9rem;
  min-height: 40px;
}

/* Ensure all inputs have a consistent min-height */
.input {
  min-height: 48px;
  padding-left: var(--space-4);
  font-size: 0.95rem;
}

/* Grille formulaire */
.form-grid-2 {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--space-4);
}

.form-grid-3 {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  gap: var(--space-4);
}

/* ── Barre de recherche ───────────────────────────────────────── */

.search-wrapper {
  position: relative;
  max-width: 400px;
}

.search-icon {
  position: absolute;
  left: var(--space-3);
  top: 50%;
  transform: translateY(-50%);
  color: var(--color-text-muted);
  pointer-events: none;
  display: flex;
  align-items: center;
}

.search-icon svg { width: 16px; height: 16px; }

.search-input {
  padding-left: calc(var(--space-3) + 16px + var(--space-2));
}

/* Barre de filtres (recherche + listes déroulantes) des listes HTMX */
.filter-bar {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-3);
}
.filter-bar .search-wrapper { flex: 1 1 260px; max-width: 420px; }
.filter-bar .select { flex: 0 1 220px; }

/* Liste des évaluations (lignes compactes : ~6 000 évaluations/an) */
.eval-date { font-family: var(--font-mono, monospace); font-size: .8rem; white-space: nowrap; color: var(--color-text-secondary); }
.eval-sub { font-size: .72rem; color: var(--color-text-muted); }
.eval-type { text-transform: uppercase; letter-spacing: .04em; }
.eval-center { text-align: center; }
.eval-notes { min-width: 110px; }
.eval-progress { display: flex; align-items: center; justify-content: center; gap: var(--space-2); }
.eval-progress-bar { flex: 1; max-width: 60px; height: 5px; background: var(--color-border); border-radius: 3px; overflow: hidden; }
.eval-progress-fill { height: 100%; background: var(--color-primary); border-radius: 3px; }
.eval-progress-txt { font-size: .75rem; white-space: nowrap; color: var(--color-text-secondary); }
.eval-progress-txt.is-complete { color: var(--color-success); }
.eval-actions { text-align: right; white-space: nowrap; }
.eval-actions .btn-icon { margin-left: var(--space-2); vertical-align: middle; }

/* ── Tableau de données (.data-table et .table partagent le même style) ── */

.data-table,
.table {
  width: 100%;
  border-collapse: collapse;
  font-size: var(--text-sm);
}

.data-table th,
.table th {
  text-align: left;
  padding: var(--space-3) var(--space-4);
  font-size: 11px;
  font-weight: var(--font-semibold);
  color: var(--color-text-muted);
  text-transform: uppercase;
  letter-spacing: 0.08em;
  border-bottom: 1px solid var(--color-border);
  background: var(--color-bg-entete);
  white-space: nowrap;
}

.data-table td,
.table td {
  padding: var(--space-3) var(--space-4);
  color: var(--color-text-primary);
  border-bottom: 1px solid rgba(var(--ink), 0.04);
  vertical-align: middle;
}

.data-table tr:last-child td,
.table tr:last-child td { border-bottom: none; }

.data-table tbody tr,
.table tbody tr {
  transition: background 0.12s ease;
}

.data-table tbody tr:hover td,
.table tbody tr:hover td {
  background: var(--color-bg-hover);
}

/* Tableau statistique (colonnes G / F / T par groupe) : compact, chiffres alignés,
   groupes séparés, première colonne figée au défilement horizontal, total en pied. */
.table-stats th,
.table-stats td {
  padding: 7px 10px;
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}
.table-stats thead th { text-align: center; vertical-align: middle; background: var(--color-bg-entete); }
.table-stats thead th[rowspan] { text-align: left; }
.table-stats thead tr + tr th { font-size: 10px; letter-spacing: 0.04em; }
.table-stats thead th.td-right,
.table-stats td.td-right { text-align: right; }
.table-stats .col-groupe { border-left: 1px solid var(--color-border); }
.table-stats tbody tr:nth-child(even) td { background: rgba(var(--ink), 0.015); }
.table-stats tfoot td {
  border-top: 2px solid var(--color-border);
  background: var(--color-bg-entete);
  font-weight: var(--font-semibold);
}
.table-stats thead tr:first-child th:first-child,
.table-stats tbody td:first-child,
.table-stats tfoot td:first-child {
  position: sticky;
  left: 0;
  z-index: 1;
}
.table-stats thead tr:first-child th:first-child,
.table-stats tfoot td:first-child { background: var(--color-bg-entete); }
.table-stats tbody td:first-child { background: var(--color-bg-card); }
.table-stats tbody tr:nth-child(even) td:first-child { background: var(--color-bg-hover); }
.table-stats tbody tr:hover td:first-child { background: var(--color-bg-hover); }

.data-table .col-matricule {
  font-family: var(--font-mono);
  font-size: var(--text-xs);
  color: var(--color-text-secondary);
  letter-spacing: 0.04em;
}

.table-wrapper {
  background: var(--color-bg-card);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  overflow: hidden;
  box-shadow: var(--shadow-card);
}

.table-scroll {
  overflow-x: auto;
}

/* Ligne de séparation de groupe dans un data-table */
.table-group-row td {
  padding: 10px 22px 6px;
  background: rgba(0, 168, 107, 0.06);
  border-bottom: 1px solid rgba(0, 168, 107, 0.15);
}

/* ── Avatar ───────────────────────────────────────────────────── */

.avatar {
  width: 36px;
  height: 36px;
  border-radius: var(--radius-full);
  object-fit: cover;
  border: 2px solid var(--color-border);
}

.avatar-sm { width: 28px; height: 28px; }
.avatar-lg { width: 48px; height: 48px; }

.avatar-initials {
  width: 36px;
  height: 36px;
  border-radius: var(--radius-full);
  background: rgba(0,168,107,0.18);
  color: var(--color-primary-light);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: var(--text-xs);
  font-weight: var(--font-bold);
  flex-shrink: 0;
  letter-spacing: 0.02em;
}

.avatar-initials.avatar-sm {
  width: 28px;
  height: 28px;
  font-size: 10px;
}

/* ── Barre de progression ─────────────────────────────────────── */

.progress-track {
  width: 100%;
  height: 5px;
  background: rgba(var(--ink), 0.06);
  border-radius: var(--radius-full);
  overflow: hidden;
}

.progress-bar {
  height: 100%;
  border-radius: var(--radius-full);
  background: linear-gradient(90deg, var(--color-primary), var(--color-primary-light));
  transition: width 0.4s ease;
}

/* ── Onglets ──────────────────────────────────────────────────── */

.tab-container {
  background: var(--color-bg-card);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  overflow: hidden;
}

.tab-bar {
  display: flex;
  background: var(--color-bg-entete);
  border-bottom: 1px solid var(--color-border);
  overflow-x: auto;
  scrollbar-width: none;
}

.tab-bar::-webkit-scrollbar { display: none; }

.tab-item {
  flex-shrink: 0;
  padding: var(--space-3) var(--space-6);
  font-size: var(--text-sm);
  font-weight: var(--font-medium);
  color: var(--color-text-secondary);
  border: none;
  border-bottom: 2px solid transparent;
  background: transparent;
  cursor: pointer;
  transition: all 0.15s ease;
  white-space: nowrap;
  font-family: var(--font-interface);
}

.tab-item:hover {
  color: var(--color-text-primary);
  background: rgba(var(--ink), 0.03);
}

.tab-item.active {
  color: var(--color-primary-light);
  border-bottom-color: var(--color-primary);
}

.tab-panel {
  padding: var(--space-6);
  display: none;
}

.tab-panel.active {
  display: block;
  animation: fadeUp 0.2s ease;
}

.tab-badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 18px;
  height: 18px;
  padding: 0 5px;
  border-radius: var(--radius-full);
  background: var(--color-primary);
  color: white;
  font-size: 10px;
  font-weight: var(--font-bold);
  margin-left: var(--space-2);
}

.tab-badge-empty { background: var(--color-text-muted); }

/* ── Messages Django (succès / erreur / info) ─────────────────── */

.alert {
  padding: var(--space-3) var(--space-4);
  border-radius: var(--radius-md);
  margin-bottom: var(--space-4);
  font-size: var(--text-sm);
  display: flex;
  align-items: flex-start;
  gap: var(--space-3);
}
.alert svg { flex-shrink: 0; margin-top: 1px; }

.alert-success {
  background: rgba(0,192,122,0.08);
  border: 1px solid rgba(0,192,122,0.20);
  color: #00C07A;
}

.alert-warning {
  background: rgba(245,166,35,0.08);
  border: 1px solid rgba(245,166,35,0.20);
  color: #F5A623;
}

.alert-danger, .alert-error {
  background: rgba(220,53,69,0.08);
  border: 1px solid rgba(220,53,69,0.20);
  color: #FF6B7A;
}

.alert-info {
  background: rgba(23,162,184,0.08);
  border: 1px solid rgba(23,162,184,0.20);
  color: #17A2B8;
}

/* ── Modal overlay ────────────────────────────────────────────── */

.modal-overlay {
  position: fixed;
  inset: 0;
  z-index: 50;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--color-bg-overlay);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  animation: fadeUp 0.2s ease;
}

.modal-box {
  background: var(--color-bg-card);
  border: 1px solid rgba(var(--ink), 0.10);
  border-radius: var(--radius-xl);
  width: 100%;
  max-width: 480px;
  margin: var(--space-4);
  box-shadow: 0 32px 64px rgba(0,0,0,0.6);
  overflow: hidden;
}

.modal-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: var(--space-4) var(--space-6);
  border-bottom: 1px solid var(--color-border);
  background: rgba(var(--ink), 0.02);
}

.modal-title {
  font-size: var(--text-base);
  font-weight: var(--font-semibold);
  color: var(--color-text-primary);
}

.modal-body {
  padding: var(--space-6);
}

.modal-footer {
  display: flex;
  justify-content: flex-end;
  gap: var(--space-3);
  padding-top: var(--space-5);
  border-top: 1px solid var(--color-border);
  margin-top: var(--space-2);
}

/* ── Notes scolaires ──────────────────────────────────────────── */

.note-excellent  { color: var(--color-note-excellent); font-weight: var(--font-semibold); }
.note-bien       { color: var(--color-note-bien);      font-weight: var(--font-semibold); }
.note-insuffisant{ color: var(--color-note-insuffisant); font-weight: var(--font-semibold); }

/* ── État vide (empty state) ──────────────────────────────────── */

.empty-state {
  text-align: center;
  padding: var(--space-12) var(--space-6);
  color: var(--color-text-muted);
}

.empty-state-icon {
  width: 48px;
  height: 48px;
  margin: 0 auto var(--space-4);
  opacity: 0.3;
}

.empty-state-text {
  font-size: var(--text-sm);
}

/* ── Séparateur ───────────────────────────────────────────────── */

.divider {
  height: 1px;
  background: var(--color-border);
  margin: var(--space-4) 0;
}

/* ── Utilitaires ──────────────────────────────────────────────── */

.text-primary   { color: var(--color-text-primary); }
.text-secondary { color: var(--color-text-secondary); }
.text-muted     { color: var(--color-text-muted); }
.text-success   { color: var(--color-primary-light); }
.text-warning   { color: var(--color-gold); }
.text-danger    { color: #FF6B7A; }
.text-mono      { font-family: var(--font-mono); }

.fw-bold     { font-weight: var(--font-bold); }
.fw-semibold { font-weight: var(--font-semibold); }
.fw-medium   { font-weight: var(--font-medium); }

.text-xs  { font-size: var(--text-xs); }
.text-sm  { font-size: var(--text-sm); }
.text-lg  { font-size: var(--text-lg); }
.text-xl  { font-size: var(--text-xl); }

.d-flex   { display: flex; }
.d-grid   { display: grid; }
.d-none   { display: none; }
.flex-col { flex-direction: column; }

.align-center    { align-items: center; }
.align-start     { align-items: flex-start; }
.justify-between { justify-content: space-between; }
.justify-end     { justify-content: flex-end; }
.flex-wrap       { flex-wrap: wrap; }
.flex-1          { flex: 1; }
.gap-2 { gap: var(--space-2); }
.gap-3 { gap: var(--space-3); }
.gap-4 { gap: var(--space-4); }
.gap-6 { gap: var(--space-6); }

.mb-0  { margin-bottom: 0 !important; }
.mb-2  { margin-bottom: var(--space-2); }
.mb-4  { margin-bottom: var(--space-4); }
.mb-6  { margin-bottom: var(--space-6); }
.mt-4  { margin-top: var(--space-4); }
.mt-6  { margin-top: var(--space-6); }

.w-full  { width: 100%; }
.min-w-0 { min-width: 0; }

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

/* Couleurs accent (différentes de text-* qui cible la lisibilité) */
.color-primary { color: var(--color-primary); }
.color-success { color: #00C07A; }
.color-danger  { color: #FF6B7A; }
.color-warning { color: #F5A623; }

/* Espacement */
.gap-1 { gap: var(--space-1); }
.mb-3  { margin-bottom: var(--space-3); }
.mt-2  { margin-top: var(--space-2); }
.mt-3  { margin-top: var(--space-3); }
.my-3  { margin-top: var(--space-3); margin-bottom: var(--space-3); }
.my-4  { margin-top: var(--space-4); margin-bottom: var(--space-4); }
.pt-2  { padding-top: var(--space-2); }
.pt-3  { padding-top: var(--space-3); }
.pt-4  { padding-top: var(--space-4); }
.py-4  { padding-top: var(--space-4); padding-bottom: var(--space-4); }
.p-4   { padding: var(--space-4); }
.p-5   { padding: var(--space-5); }

/* Affichage / alignement */
.d-inline       { display: inline; }
.d-block        { display: block; }
.text-center    { text-align: center; }
.text-right     { text-align: right; }
.text-uppercase { text-transform: uppercase; }
.font-mono      { font-family: var(--font-mono); }
.line-through   { text-decoration: line-through; }

/* ── Toggle Switch (iOS-style) ─────────────────────────────── */
.toggle-switch {
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: 12px;
  cursor: pointer;
  user-select: none;
}
.toggle-switch input {
  position: absolute;
  opacity: 0;
  width: 0;
  height: 0;
}
.toggle-slider {
  position: relative;
  width: 44px;
  height: 24px;
  background: var(--color-bg-input);
  border: 1px solid var(--color-border);
  border-radius: 99px;
  transition: all 0.25s ease;
  flex-shrink: 0;
}
.toggle-slider::before {
  content: '';
  position: absolute;
  top: 2px;
  left: 2px;
  width: 18px;
  height: 18px;
  background: var(--color-text-muted);
  border-radius: 50%;
  transition: all 0.25s ease;
}
.toggle-switch input:checked + .toggle-slider {
  background: var(--color-primary);
  border-color: var(--color-primary);
  box-shadow: 0 0 12px rgba(0,168,107,0.35);
}
.toggle-switch input:checked + .toggle-slider::before {
  left: 22px;
  background: white;
  box-shadow: 0 1px 4px rgba(0,0,0,0.2);
}

/* Tableau — modificateurs de cellule */
.td-right  { text-align: right; }
.td-narrow { width: 1%; white-space: nowrap; }

/* Pied de tableau total */
.tfoot-total td {
  padding-top: 0.65rem;
  padding-bottom: 0.65rem;
  border-top: 1px solid var(--color-border);
  background: rgba(0,0,0,0.18);
}

/* Bouton taille petite */
.btn-sm {
  padding: 0.3rem 0.7rem !important;
  font-size: 0.78rem !important;
  min-height: unset !important;
}

/* ─────────────────────────────────────────────────────────────── */
/*  5. ANIMATIONS                                                   */
/* ─────────────────────────────────────────────────────────────── */

@keyframes fadeUp {
  from {
    opacity: 0;
    transform: translateY(10px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

@keyframes pulse {
  0%, 100% { opacity: 1; }
  50%       { opacity: 0.4; }
}

@keyframes shimmer {
  0%   { background-position: -200% 0; }
  100% { background-position:  200% 0; }
}

.animate-fade-up {
  animation: fadeUp 0.3s ease both;
}

.delay-1 { animation-delay: 0.05s; }
.delay-2 { animation-delay: 0.10s; }
.delay-3 { animation-delay: 0.15s; }
.delay-4 { animation-delay: 0.20s; }

/* Skeleton loader */
.skeleton {
  background: linear-gradient(
    90deg,
    var(--color-bg-card) 25%,
    var(--color-bg-hover) 50%,
    var(--color-bg-card) 75%
  );
  background-size: 200% 100%;
  animation: shimmer 1.5s infinite;
  border-radius: var(--radius-md);
}

/* ─────────────────────────────────────────────────────────────── */
/*  6. INDICATEUR HTMX                                             */
/* ─────────────────────────────────────────────────────────────── */

.htmx-indicator {
  display: none;
}

.htmx-request .htmx-indicator,
.htmx-request.htmx-indicator {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  animation: pulse 1s infinite;
  color: var(--color-text-muted);
  font-size: var(--text-xs);
}

.htmx-request .normal-icon { display: none; }

.icon-mr { margin-right: 8px; }

/* ── Conteneurs de notifications flottantes ── */
#django-messages,
#toast-container {
  position: fixed;
  top: 1rem;
  right: 1rem;
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
  max-width: 400px;
}
#django-messages               { z-index: 9999; }
#toast-container               { z-index: 10000; pointer-events: none; }
#django-messages .alert,
#toast-container .alert        { margin-bottom: 0; }
#toast-container .alert        { pointer-events: auto; animation: fadeInRight 0.2s ease; }

.toast-fade-out { opacity: 0; transition: opacity 0.5s ease; }

@keyframes fadeInRight {
  from { opacity: 0; transform: translateX(20px); }
  to   { opacity: 1; transform: translateX(0); }
}

/* ── Modale de confirmation globale (hx-confirm / data-confirm) ── */
#confirm-overlay {
  position: fixed;
  inset: 0;
  z-index: 10500;
  background: rgba(0, 0, 0, 0.55);
  display: flex;
  align-items: center;
  justify-content: center;
}
#confirm-box {
  background: var(--color-bg-card);
  border: 1px solid #2a3a5c;
  border-radius: 12px;
  padding: 28px 32px;
  max-width: 420px;
  width: 90%;
  box-shadow: 0 20px 60px rgba(0, 0, 0, 0.5);
}
#confirm-box h3 {
  margin: 0 0 10px;
  font-size: 1rem;
  color: #f0f4ff;
  font-weight: 600;
}
#confirm-box p {
  margin: 0 0 22px;
  font-size: 0.875rem;
  color: #94a3b8;
  line-height: 1.5;
}
#confirm-box .confirm-actions {
  display: flex;
  justify-content: flex-end;
  gap: 10px;
}
#confirm-btn-cancel {
  background: transparent;
  border: 1px solid #2a3a5c;
  color: #94a3b8;
  padding: 8px 18px;
  border-radius: 8px;
  cursor: pointer;
  font-size: 0.85rem;
}
#confirm-btn-cancel:hover { border-color: #4a5a7c; color: #cbd5e1; }
#confirm-btn-ok {
  background: #dc2626;
  border: none;
  color: #fff;
  padding: 8px 18px;
  border-radius: 8px;
  cursor: pointer;
  font-size: 0.85rem;
  font-weight: 600;
}
#confirm-btn-ok:hover { background: #b91c1c; }

/* ─────────────────────────────────────────────────────────────── */
/*  7. SIGNATURE PDF (WeasyPrint)                                   */
/* ─────────────────────────────────────────────────────────────── */

.signature-zone {
  margin-top: 2cm;
  text-align: center;
}

.signature-title {
  font-size: 10pt;
  font-weight: bold;
  text-transform: uppercase;
  margin-bottom: 0.5cm;
}

.signature-name {
  font-size: 11pt;
  font-weight: bold;
  border-top: 1px solid #333;
  padding-top: 0.3cm;
  display: inline-block;
  min-width: 6cm;
}

.signature-fonction {
  font-size: 9pt;
  color: #555;
}

/* ─────────────────────────────────────────────────────────────── */
/*  LOGIN PAGE — Design Premium                                     */
/* ─────────────────────────────────────────────────────────────── */

.login-clean-body {
  min-height: 100vh;
  overflow: hidden;
  background: #06101E;
}

.login-clean-wrapper {
  display: flex;
  min-height: 100vh;
}

/* ── Panneau Branding (gauche) ── */
.login-clean-brand {
  flex: 1;
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  background: linear-gradient(160deg, #071626 0%, #0A1F3A 60%, #071626 100%);
}

.login-clean-brand::before {
  content: '';
  position: absolute;
  top: -220px;
  left: -220px;
  width: 640px;
  height: 640px;
  background: radial-gradient(circle, rgba(0,168,107,0.14) 0%, transparent 65%);
  border-radius: 50%;
  pointer-events: none;
}

.login-clean-brand::after {
  content: '';
  position: absolute;
  bottom: -180px;
  right: -180px;
  width: 560px;
  height: 560px;
  background: radial-gradient(circle, rgba(0,168,107,0.08) 0%, transparent 65%);
  border-radius: 50%;
  pointer-events: none;
}

/* Grille décorative légère */
.login-clean-brand-inner {
  position: relative;
  z-index: 1;
  padding: 3.5rem;
  max-width: 480px;
  width: 100%;
}

/* ── Logo ── */
.login-clean-logo {
  display: flex;
  align-items: center;
  gap: 1rem;
  margin-bottom: 3.5rem;
}

.login-clean-logo-icon {
  width: 54px;
  height: 54px;
  background: linear-gradient(135deg, var(--color-primary) 0%, var(--color-primary-dark) 100%);
  border-radius: 15px;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #fff;
  box-shadow: 0 8px 28px rgba(0,168,107,0.45), 0 0 0 1px rgba(0,168,107,0.20);
  flex-shrink: 0;
}

.login-clean-logo-icon svg {
  width: 28px;
  height: 28px;
}

.login-clean-logo-text {
  display: flex;
  flex-direction: column;
  line-height: 1;
}

.login-clean-logo-name {
  font-family: var(--font-logo);
  font-size: 1.75rem;
  font-weight: 700;
  color: var(--color-text-primary);
  letter-spacing: 0.04em;
}

.login-clean-logo-school {
  font-family: var(--font-logo);
  font-size: 0.9375rem;
  font-weight: 700;
  color: var(--color-primary);
  letter-spacing: 0.22em;
  margin-top: 3px;
}

/* ── Hero ── */
.login-clean-hero {
  margin-bottom: 2.5rem;
}

.login-clean-hero-title {
  font-size: 2.25rem;
  font-weight: 700;
  color: var(--color-text-primary);
  line-height: 1.2;
  margin-bottom: 1rem;
  letter-spacing: -0.01em;
}

.login-clean-hero-accent {
  color: var(--color-primary);
  display: inline;
}

.login-clean-hero-desc {
  font-size: 1rem;
  color: var(--color-text-secondary);
  line-height: 1.7;
  max-width: 380px;
}

/* ── Features ── */
.login-clean-features {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0.875rem 1.25rem;
  margin-bottom: 2.75rem;
}

.login-clean-feature {
  display: flex;
  align-items: center;
  gap: 0.625rem;
  font-size: 0.9rem;
  color: var(--color-text-secondary);
  font-weight: 500;
}

.login-clean-feature svg {
  width: 16px;
  height: 16px;
  color: var(--color-primary);
  flex-shrink: 0;
}

/* ── Stats ── */
.login-clean-stats {
  display: flex;
  align-items: center;
  gap: 0;
  padding: 1.25rem 1.5rem;
  background: rgba(var(--ink), 0.035);
  border: 1px solid rgba(var(--ink), 0.07);
  border-radius: 16px;
  backdrop-filter: blur(8px);
}

.login-clean-stat {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
}

.login-clean-stat-num {
  font-size: 1.625rem;
  font-weight: 700;
  color: var(--color-primary);
  line-height: 1;
}

.login-clean-stat-label {
  font-size: 0.72rem;
  color: var(--color-text-muted);
  margin-top: 0.3rem;
  text-transform: uppercase;
  letter-spacing: 0.07em;
  font-weight: 500;
}

.login-clean-stat-divider {
  width: 1px;
  height: 40px;
  background: rgba(var(--ink), 0.09);
  margin: 0 0.5rem;
}

/* ── Panneau Formulaire (droite) ── */
.login-clean-form-side {
  width: 500px;
  min-width: 500px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(6,10,20,0.75);
  backdrop-filter: blur(28px);
  border-left: 1px solid rgba(var(--ink), 0.055);
  padding: 2rem;
}

.login-clean-form-card {
  width: 100%;
  max-width: 400px;
}

/* ── En-tête formulaire ── */
.login-clean-form-header {
  margin-bottom: 2rem;
}

.login-clean-form-title {
  font-size: 1.875rem;
  font-weight: 700;
  color: var(--color-text-primary);
  margin-bottom: 0.375rem;
  letter-spacing: -0.01em;
}

.login-clean-form-subtitle {
  font-size: 0.9375rem;
  color: var(--color-text-secondary);
}

/* ── Alertes ── */
.login-clean-alert {
  display: flex;
  align-items: flex-start;
  gap: 0.625rem;
  padding: 0.8125rem 1rem;
  border-radius: 10px;
  font-size: 0.875rem;
  margin-bottom: 1.5rem;
  line-height: 1.5;
}

.login-clean-alert svg {
  width: 18px;
  height: 18px;
  flex-shrink: 0;
  margin-top: 1px;
}

.login-clean-alert-warn {
  background: rgba(245,166,35,0.10);
  border: 1px solid rgba(245,166,35,0.28);
  color: #F5A623;
}

.login-clean-alert-error {
  background: rgba(220,53,69,0.10);
  border: 1px solid rgba(220,53,69,0.28);
  color: #FF6B7A;
}

.login-clean-alert-info {
  background: rgba(0,168,107,0.08);
  border: 1px solid rgba(0,168,107,0.28);
  color: var(--color-primary-light);
}

.login-clean-forgot-panel {
  display: none;
  margin-top: 0.625rem;
  margin-bottom: 0;
}

.login-clean-forgot-panel.is-open {
  display: flex;
}

/* ── Formulaire ── */
.login-clean-form {
  display: flex;
  flex-direction: column;
  gap: 1.375rem;
}

.login-clean-field {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
}

.login-clean-label {
  font-size: 0.8125rem;
  font-weight: 600;
  color: var(--color-text-secondary);
  letter-spacing: 0.03em;
  text-transform: uppercase;
}

.login-clean-label-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.login-clean-forgot {
  font-size: 0.8125rem;
  color: var(--color-primary);
  font-weight: 500;
  transition: color 0.2s;
  text-transform: none;
  letter-spacing: 0;
}

.login-clean-forgot:hover {
  color: var(--color-primary-light);
  text-decoration: underline;
}

/* ── Champ input ── */
/* Le wrapper devient le "input box" visuel — l'<input> intérieur est transparent */
.login-clean-input-wrap {
  position: relative;
  display: flex;
  align-items: center;
  background: rgba(8,15,28,0.85);
  border: 1px solid rgba(var(--ink), 0.09);
  border-radius: 10px;
  transition: border-color 0.2s, box-shadow 0.2s, background 0.2s;
}

.login-clean-input-wrap:hover {
  border-color: rgba(var(--ink), 0.14);
}

.login-clean-input-wrap:focus-within {
  border-color: rgba(0,168,107,0.55);
  background: rgba(8,15,28,0.97);
  box-shadow: 0 0 0 3px rgba(0,168,107,0.11), 0 1px 8px rgba(0,168,107,0.10);
}

.login-clean-input-icon {
  position: absolute;
  left: 0.9375rem;
  top: 50%;
  transform: translateY(-50%);
  width: 17px;
  height: 17px;
  color: var(--color-text-muted);
  pointer-events: none;
  z-index: 1;
}

.login-clean-input {
  flex: 1;
  min-width: 0;
  padding: 0.8125rem 1rem 0.8125rem 2.875rem;
  background: transparent;
  border: none;
  border-radius: 0;
  color: var(--color-text-primary);
  font-family: var(--font-interface);
  font-size: 0.9375rem;
  outline: none;
  -webkit-appearance: none;
  appearance: none;
}

.login-clean-input::placeholder {
  color: var(--color-text-muted);
}

/* ── Bouton afficher/masquer mot de passe ── */

/* Supprime le bouton natif du navigateur (Edge legacy, Edge Chromium, Chrome) */
input::-ms-reveal,
input::-ms-clear {
  display: none !important;
  width: 0 !important;
  height: 0 !important;
}

input::-webkit-reveal,
input[type="password"]::-webkit-reveal {
  display: none !important;
  width: 0 !important;
  height: 0 !important;
}

input::-webkit-credentials-auto-fill-button,
input::-webkit-strong-password-auto-fill-button {
  display: none !important;
  visibility: hidden !important;
  pointer-events: none !important;
  width: 0 !important;
  height: 0 !important;
  margin: 0 !important;
}

.login-clean-input--pw {
  /* padding-right minimal : le bouton frère occupe la droite */
  padding-right: 0.25rem;
}

/* Bouton frère flex — hors du shadow DOM de l'<input> */
.login-clean-pw-toggle {
  flex-shrink: 0;
  align-self: stretch;
  padding: 0 0.875rem;
  background: none;
  border: none;
  border-left: 1px solid rgba(var(--ink), 0.05);
  color: var(--color-text-muted);
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 0 10px 10px 0;
  transition: color 0.15s, background 0.15s;
}

.login-clean-pw-toggle:hover {
  color: var(--color-text-secondary);
  background: rgba(var(--ink), 0.06);
}

.login-clean-pw-toggle svg {
  width: 18px;
  height: 18px;
  display: block;
  pointer-events: none;
  opacity: 1;
  transition: opacity 0.15s ease, transform 0.15s ease;
}

/* Icône cachée — remplace tout style="display:none" inline */
.pw-icon-hidden {
  display: none !important;
}

/* Effet actif : bouton œil allumé */
.login-clean-pw-toggle.is-active {
  color: var(--color-primary);
}

.login-clean-pw-toggle.is-active:hover {
  color: var(--color-primary-light);
  background: rgba(0,168,107,0.08);
}

/* ── Checkbox ── */
.login-clean-options {
  margin-top: -0.25rem;
}

.login-clean-checkbox {
  display: flex;
  align-items: center;
  gap: 0.625rem;
  cursor: pointer;
  font-size: 0.875rem;
  color: var(--color-text-secondary);
  user-select: none;
}

.login-clean-checkbox input[type="checkbox"] {
  position: absolute;
  opacity: 0;
  width: 0;
  height: 0;
}

.login-clean-checkbox-box {
  width: 18px;
  height: 18px;
  border: 2px solid rgba(var(--ink), 0.15);
  border-radius: 5px;
  background: rgba(8,15,28,0.80);
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  transition: border-color 0.2s, background 0.2s;
}

.login-clean-checkbox input:checked + .login-clean-checkbox-box {
  background: var(--color-primary);
  border-color: var(--color-primary);
}

.login-clean-checkbox input:checked + .login-clean-checkbox-box::after {
  content: '';
  width: 10px;
  height: 6px;
  border-left: 2px solid #fff;
  border-bottom: 2px solid #fff;
  transform: rotate(-45deg) translateY(-1px);
  display: block;
}

/* ── Bouton Se connecter ── */
.login-clean-btn {
  width: 100%;
  padding: 0.9375rem 1.5rem;
  background: linear-gradient(135deg, var(--color-primary) 0%, var(--color-primary-dark) 100%);
  border: none;
  border-radius: 10px;
  color: #fff;
  font-family: var(--font-interface);
  font-size: 1rem;
  font-weight: 600;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.625rem;
  box-shadow: 0 4px 18px rgba(0,168,107,0.38);
  transition: transform 0.2s ease, box-shadow 0.2s ease, background 0.2s;
  margin-top: 0.375rem;
  letter-spacing: 0.01em;
}

.login-clean-btn:hover:not(:disabled) {
  background: linear-gradient(135deg, var(--color-primary-light) 0%, var(--color-primary) 100%);
  box-shadow: 0 8px 28px rgba(0,168,107,0.52);
  transform: translateY(-2px);
}

.login-clean-btn:active:not(:disabled) {
  transform: translateY(0);
  box-shadow: 0 2px 10px rgba(0,168,107,0.28);
}

.login-clean-btn:disabled {
  opacity: 0.65;
  cursor: not-allowed;
}

.login-clean-btn svg {
  width: 18px;
  height: 18px;
  flex-shrink: 0;
}

/* ── Spinner ── */
.login-clean-spinner {
  width: 18px;
  height: 18px;
  border: 2px solid rgba(var(--ink), 0.28);
  border-top-color: #fff;
  border-radius: 50%;
  animation: lc-spin 0.7s linear infinite;
  flex-shrink: 0;
}

@keyframes lc-spin {
  to { transform: rotate(360deg); }
}

/* ── Accès rapide ── */
.login-clean-quick {
  margin-top: 2rem;
  padding-top: 1.625rem;
  border-top: 1px solid rgba(var(--ink), 0.06);
}

.login-clean-quick-label {
  font-size: 0.72rem;
  font-weight: 600;
  color: var(--color-text-muted);
  text-transform: uppercase;
  letter-spacing: 0.09em;
  margin-bottom: 0.75rem;
}

.login-clean-quick-btns {
  display: flex;
  gap: 0.5rem;
}

.login-clean-quick-btn {
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.375rem;
  padding: 0.5625rem 0.625rem;
  background: rgba(var(--ink), 0.035);
  border: 1px solid rgba(var(--ink), 0.08);
  border-radius: 8px;
  color: var(--color-text-secondary);
  font-family: var(--font-interface);
  font-size: 0.8125rem;
  font-weight: 500;
  cursor: pointer;
  transition: background 0.2s, border-color 0.2s, color 0.2s;
}

.login-clean-quick-btn:hover {
  background: rgba(0,168,107,0.10);
  border-color: rgba(0,168,107,0.28);
  color: var(--color-primary);
}

.login-clean-quick-btn svg {
  width: 14px;
  height: 14px;
  flex-shrink: 0;
}

/* ── Pied de formulaire ── */
.login-clean-form-footer {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  margin-top: 1.75rem;
  font-size: 0.8125rem;
  color: var(--color-text-muted);
}

.login-clean-dot {
  width: 3px;
  height: 3px;
  background: var(--color-text-muted);
  border-radius: 50%;
  opacity: 0.5;
  display: inline-block;
}

/* ── Responsive ── */
@media (max-width: 960px) {
  .login-clean-brand {
    display: none;
  }

  .login-clean-form-side {
    width: 100%;
    min-width: 0;
    background: var(--color-bg-app);
    border-left: none;
  }
}

@media (max-width: 520px) {
  .login-clean-form-side {
    padding: 1.5rem 1.25rem;
    align-items: flex-start;
    padding-top: 3.5rem;
  }

  .login-clean-form-card {
    max-width: 100%;
  }

  .login-clean-form-title {
    font-size: 1.625rem;
  }
}

/* ══════════════════════════════════════════════════════════════ */
/*  PAGES AUTONOMES LICENCE (yk-*)                                 */
/* ══════════════════════════════════════════════════════════════ */

.yk-body {
  min-height: 100vh;
  background: var(--color-bg-app);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 1.5rem;
  font-family: var(--font-interface);
  position: relative;
  overflow-x: hidden;
}

.yk-body::before {
  content: '';
  position: fixed;
  top: -10%;
  left: -10%;
  width: 40%;
  height: 40%;
  background: radial-gradient(circle, rgba(0,168,107,0.07) 0%, transparent 70%);
  pointer-events: none;
  z-index: 0;
}

.yk-body::after {
  content: '';
  position: fixed;
  bottom: -10%;
  right: -10%;
  width: 50%;
  height: 50%;
  background: radial-gradient(circle, rgba(59,130,246,0.05) 0%, transparent 70%);
  pointer-events: none;
  z-index: 0;
}

.yk-card {
  max-width: 440px;
  width: 100%;
  background: var(--aura-glass-bg);
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
  border: 1px solid rgba(var(--ink), 0.08);
  border-radius: 20px;
  box-shadow: 0 25px 50px rgba(0,0,0,0.5);
  position: relative;
  z-index: 1;
  overflow: hidden;
}

.yk-card-hero {
  text-align: center;
  padding: 2.5rem 2rem 1.25rem;
}

.yk-hero-icon {
  width: 64px;
  height: 64px;
  border-radius: 16px;
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 0 auto 1.25rem;
}

.yk-hero-icon-green {
  background: linear-gradient(135deg, #00A86B 0%, #007A4D 100%);
  box-shadow: 0 8px 24px rgba(0,168,107,0.3);
}

.yk-hero-icon-blue {
  background: linear-gradient(135deg, #3B82F6 0%, #1D4ED8 100%);
  box-shadow: 0 8px 24px rgba(59,130,246,0.3);
}

.yk-hero-title {
  font-family: var(--font-logo);
  font-size: 1.5rem;
  font-weight: 700;
  color: var(--color-text-primary);
  margin: 0 0 6px;
}

.yk-hero-sub {
  font-size: 0.8125rem;
  color: var(--color-text-secondary);
  margin: 0;
}

.yk-card-body {
  padding: 0 1.75rem 1.75rem;
}

.yk-alert-sm {
  padding: 0.625rem 0.875rem;
  margin-bottom: 1.25rem;
  font-size: 0.8125rem;
  color: var(--color-text-primary);
}

.yk-info-box {
  background: rgba(var(--ink), 0.02);
  border: 1px solid var(--color-border);
  border-radius: 12px;
  padding: 0.875rem 1rem;
  margin-bottom: 1.5rem;
}

.yk-info-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.5rem;
}

.yk-info-row-sep {
  padding-bottom: 0.625rem;
  margin-bottom: 0.625rem;
  border-bottom: 1px solid var(--color-border);
}

.yk-info-label {
  font-size: 0.6875rem;
  color: var(--color-text-muted);
  text-transform: uppercase;
  letter-spacing: 0.07em;
}

.yk-info-code {
  font-family: var(--font-mono);
  font-size: 0.75rem;
  color: #00C07A;
}

.yk-info-badge {
  font-size: 0.75rem;
  color: #00C97F;
  background: rgba(0,168,107,0.15);
  padding: 3px 10px;
  border-radius: 6px;
  font-weight: 600;
}

.yk-steps {
  display: flex;
  flex-direction: column;
  gap: 0.625rem;
  margin-bottom: 1.5rem;
}

.yk-step {
  display: flex;
  align-items: center;
  gap: 0.75rem;
}

.yk-step-num {
  width: 22px;
  height: 22px;
  border-radius: 50%;
  background: rgba(0,168,107,0.12);
  border: 1px solid rgba(0,168,107,0.3);
  color: #00A86B;
  font-size: 0.6875rem;
  font-weight: 700;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

.yk-step-text {
  font-size: 0.8125rem;
  color: var(--color-text-secondary);
}

.yk-actions {
  display: flex;
  gap: 0.75rem;
}

.yk-actions .dash-btn { flex: 1; }

/* ══════════════════════════════════════════════════════════════ */
/*  COMPOSANTS DASHBOARD (dash-*)                                  */
/* ══════════════════════════════════════════════════════════════ */

/* ── En-tête de section ── */
.dash-section-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 1rem;
  margin-bottom: 1.5rem;
}

.dash-section-title {
  display: flex;
  align-items: center;
  gap: 1rem;
}

.dash-section-title h1 {
  font-family: var(--font-logo);
  font-size: 1.75rem;
  font-weight: 700;
  color: var(--color-text-primary);
  margin: 0;
  line-height: 1.2;
}

.dash-section-title p {
  text-transform: uppercase;
  font-size: 0.6875rem;
  letter-spacing: 0.12em;
  color: var(--color-text-muted);
  margin: 4px 0 0;
}

.dash-section-icon {
  width: 48px;
  height: 48px;
  border-radius: 12px;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

.dash-section-icon svg {
  width: 24px;
  height: 24px;
  color: #fff;
}

.dash-section-actions {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  flex-wrap: wrap;
}

/* ── Boutons dashboard ── */
.dash-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  padding: 0.5625rem 1.125rem;
  border-radius: 8px;
  font-size: 0.875rem;
  font-weight: 600;
  font-family: var(--font-interface);
  text-decoration: none;
  cursor: pointer;
  border: none;
  background: var(--color-primary);
  color: #fff;
  transition: background 0.15s, transform 0.1s, color 0.15s;
  white-space: nowrap;
}

.dash-btn:hover {
  background: var(--color-primary-light);
  transform: translateY(-1px);
  color: #fff;
}

.dash-btn svg { flex-shrink: 0; }

.dash-btn-secondary {
  background: rgba(var(--ink), 0.05);
  color: var(--color-text-secondary);
  border: 1px solid rgba(var(--ink), 0.1);
}

.dash-btn-secondary:hover {
  background: rgba(var(--ink), 0.09);
  color: var(--color-text-primary);
}

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

.dash-btn-danger:hover {
  background: #b91c1c;
  color: #fff;
}

.dash-btn-gold {
  background: linear-gradient(135deg, #F59E0B 0%, #D97706 100%);
  color: #1a0a00;
}

.dash-btn-gold:hover {
  background: linear-gradient(135deg, #FBBF24 0%, #F59E0B 100%);
  transform: translateY(-1px);
  color: #1a0a00;
}

/* ── Alerte ── */
.dash-alert {
  padding: 1rem 1.25rem;
  border-radius: 10px;
  margin-bottom: 1.5rem;
}

.dash-alert-body {
  display: flex;
  align-items: flex-start;
  gap: 1rem;
  flex: 1;
}

.dash-alert-icon { flex-shrink: 0; }

.dash-alert-title {
  font-size: 0.9375rem;
  font-weight: 700;
  color: var(--color-text-primary);
  margin: 0 0 4px;
}

.dash-alert-text {
  font-size: 0.875rem;
  color: var(--color-text-secondary);
  margin: 0;
  line-height: 1.5;
}

.dash-alert-danger {
  background: rgba(220,53,69,0.08);
  border: 1px solid rgba(220,53,69,0.2);
  border-left: 4px solid var(--color-danger);
}

.dash-alert-warning {
  background: rgba(245,158,11,0.08);
  border: 1px solid rgba(245,158,11,0.2);
  border-left: 4px solid #F59E0B;
}

.dash-alert-info {
  background: rgba(59,130,246,0.07);
  border: 1px solid rgba(59,130,246,0.18);
  border-left: 4px solid #3B82F6;
}

.dash-alert-danger .dash-alert-icon { color: var(--color-danger); }
.dash-alert-warning .dash-alert-icon { color: #F59E0B; }
.dash-alert-info .dash-alert-icon { color: #3B82F6; }

/* ── Carte dashboard ── */
.dash-card {
  background: var(--color-bg-card);
  border: 1px solid var(--color-border);
  border-radius: 14px;
  padding: 1.5rem;
  position: relative;
  overflow: hidden;
  margin-bottom: 1.5rem;
}

/* ── Grilles ── */
.dash-grid {
  display: grid;
  grid-template-columns: 1.2fr 0.8fr;
  gap: 1.5rem;
  margin-bottom: 1.5rem;
  align-items: start;
}

/* ── Barre de progression ── */
.dash-progress-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 0.625rem;
}

.dash-progress-label {
  font-size: 0.8125rem;
  color: var(--color-text-secondary);
}

.dash-progress-value {
  font-size: 0.8125rem;
  font-weight: 600;
  color: #60A5FA;
}

.dash-progress-track {
  height: 8px;
  background: rgba(var(--ink), 0.06);
  border-radius: 100px;
  overflow: hidden;
}

.dash-progress-fill {
  height: 100%;
  background: linear-gradient(90deg, #3B82F6 0%, #60A5FA 100%);
  border-radius: 100px;
  transition: width 0.5s ease;
}

/* ── Grille features (dates, montants...) ── */
.dash-features-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0.75rem;
  margin-top: 1.5rem;
}

.dash-feature-item {
  display: flex;
  align-items: center;
  gap: 0.625rem;
  padding: 0.625rem 0.75rem;
  background: rgba(var(--ink), 0.02);
  border-radius: 8px;
  border: 1px solid rgba(var(--ink), 0.06);
}

.dash-feature-item svg { flex-shrink: 0; color: var(--color-text-muted); }

.dash-feature-item div {
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.dash-feature-item span {
  font-size: 0.75rem;
  color: var(--color-text-muted);
}

.dash-feature-item strong {
  font-size: 0.875rem;
  color: var(--color-text-primary);
  font-weight: 600;
}

/* ── Badge statut ── */
.dash-badge-status {
  display: inline-flex;
  align-items: center;
  padding: 2px 10px;
  border-radius: 100px;
  font-size: 0.6875rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.06em;
}

.status-present {
  background: rgba(0,168,107,0.12);
  color: #00C07A;
  border: 1px solid rgba(0,168,107,0.2);
}

/* ── En-tête abonnement ── */
.abo-header {
  display: flex;
  align-items: center;
  gap: 1rem;
  margin-bottom: 2rem;
}

.abo-icon {
  width: 64px;
  height: 64px;
  border-radius: 16px;
  background: linear-gradient(135deg, #3B82F6 0%, #1D4ED8 100%);
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  box-shadow: 0 6px 20px rgba(59,130,246,0.3);
}

.abo-icon svg { color: #fff; }

.abo-plan-badges {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  margin-bottom: 4px;
}

.abo-plan-name {
  font-family: var(--font-logo);
  font-size: 1.375rem;
  color: var(--color-text-primary);
  margin: 0;
  line-height: 1.2;
}

.abo-plan-sub {
  font-size: 0.8125rem;
  color: var(--color-text-muted);
  margin: 4px 0 0;
}

.abo-actions {
  display: flex;
  gap: 0.75rem;
  margin-top: 2rem;
}

.abo-actions .dash-btn { flex: 1; }

/* ── Lignes de features (modules) ── */
.feature-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0.625rem 0.75rem;
  border-radius: 8px;
  border: 1px solid var(--color-border);
  gap: 0.625rem;
  margin-bottom: 0.375rem;
}

.feature-row-active {
  background: rgba(59,130,246,0.04);
  border-color: rgba(59,130,246,0.12);
}

.feature-row-side {
  display: flex;
  align-items: center;
  gap: 0.625rem;
  flex: 1;
}

.feature-row-icon-active { color: #3B82F6; }
.feature-row-icon-inactive { color: var(--color-text-muted); }

.feature-row-name-active {
  font-size: 0.84375rem;
  color: var(--color-text-primary);
  font-weight: 600;
}

.feature-row-name-inactive {
  font-size: 0.84375rem;
  color: var(--color-text-muted);
  font-weight: 400;
}

.feature-badge-upgrade {
  font-size: 0.5625rem;
  padding: 2px 6px;
  background: rgba(245,158,11,0.12);
  color: #F5A623;
  border-radius: 4px;
  font-weight: 800;
  letter-spacing: 0.04em;
  white-space: nowrap;
  flex-shrink: 0;
}

/* ── Statuts badge ── */
.status-absent {
  background: rgba(220,53,69,0.12);
  color: #FF6B7A;
  border: 1px solid rgba(220,53,69,0.2);
}

.status-late {
  background: rgba(245,158,11,0.12);
  color: #F5A623;
  border: 1px solid rgba(245,158,11,0.2);
}

/* ── Badge type cristal ── */
.dash-badge-cristal {
  display: inline-flex;
  align-items: center;
  padding: 2px 10px;
  border-radius: 100px;
  font-size: 0.6875rem;
  font-weight: 600;
  background: rgba(59,130,246,0.1);
  color: #60A5FA;
  border: 1px solid rgba(59,130,246,0.18);
  letter-spacing: 0.03em;
  white-space: nowrap;
}

/* ── Empty state ── */
.dash-empty-state {
  text-align: center;
  padding: 3rem 2rem;
}

.dash-empty-icon {
  width: 56px;
  height: 56px;
  border-radius: 14px;
  background: rgba(var(--ink), 0.03);
  border: 1px solid rgba(var(--ink), 0.07);
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 0 auto 1.25rem;
  color: var(--color-text-muted);
}

.dash-empty-icon svg { width: 28px; height: 28px; }

.dash-empty-title {
  font-size: 1rem;
  font-weight: 600;
  color: var(--color-text-primary);
  margin: 0 0 0.5rem;
}

.dash-empty-text {
  font-size: 0.875rem;
  color: var(--color-text-muted);
  margin: 0;
  line-height: 1.5;
}

.dash-empty-state .dash-btn { margin-top: 1.5rem; }

/* ── Grille auto de cartes ── */
.dash-grid-auto {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(340px, 1fr));
  gap: 1.5rem;
  margin-bottom: 1.5rem;
  align-items: start;
}

/* ── Carte licence ── */
.lic-card-header {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 1rem;
  padding-bottom: 1.125rem;
  margin-bottom: 1.25rem;
  border-bottom: 1px solid var(--color-border);
}

.lic-card-key {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  margin-bottom: 0.4375rem;
}

.lic-key-code {
  font-family: var(--font-mono);
  font-size: 0.75rem;
  color: #00C07A;
  background: rgba(0,168,107,0.1);
  padding: 2px 8px;
  border-radius: 4px;
}

.lic-card-name {
  font-size: 1rem;
  font-weight: 700;
  color: var(--color-text-primary);
  margin: 0;
  line-height: 1.3;
}

.lic-card-badges {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 0.375rem;
  flex-shrink: 0;
}

/* ── Grille info de carte ── */
.lic-info-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 1rem;
  margin-bottom: 1.25rem;
}

/* ── Info item ── */
.dash-info-item label {
  display: block;
  font-size: 0.625rem;
  color: var(--color-text-muted);
  text-transform: uppercase;
  letter-spacing: 0.1em;
  margin-bottom: 3px;
}

.dash-info-item .info-value {
  font-size: 0.9375rem;
  font-weight: 600;
  color: var(--color-text-primary);
  line-height: 1.3;
}

.lic-expiry-warn {
  font-size: 0.625rem;
  color: var(--color-danger);
  font-weight: 700;
  margin-top: 2px;
}

/* ── Actions de carte ── */
.lic-card-actions {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  padding-top: 1.125rem;
  border-top: 1px solid var(--color-border);
}

.lic-card-actions .dash-btn-grow { flex: 1; }

/* ── Carte header / body ── */
.dash-card-header {
  padding-bottom: var(--space-4);
  margin-bottom: var(--space-5);
  border-bottom: 1px solid var(--color-border);
}

.dash-card-header h3 {
  font-family: var(--font-logo);
  font-size: 1.125rem;
  color: var(--color-text-primary);
  margin: 0 0 3px;
}

.dash-card-header code {
  font-family: var(--font-mono);
  font-size: 0.75rem;
  color: var(--color-text-muted);
}

/* ── Alias bouton primaire ── */
.dash-btn-primary {
  background: var(--color-primary);
  color: #fff;
}

.dash-btn-primary:hover {
  background: var(--color-primary-light);
  color: #fff;
}

/* ── Libellé formulaire ── */
.dash-form-label {
  display: block;
  font-size: 0.8125rem;
  font-weight: 600;
  color: var(--color-text-secondary);
  margin-bottom: 0.75rem;
}

.dash-form-group {
  margin-bottom: 1.75rem;
}

/* ── Carte étroite ── */
.dash-card-narrow { max-width: 560px; }

/* ── Grille info renouvellement ── */
.renew-info-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 1rem;
  background: rgba(var(--ink), 0.02);
  border: 1px solid rgba(var(--ink), 0.06);
  border-radius: 10px;
  padding: 0.875rem 1.125rem;
  margin-bottom: 1.75rem;
}

.renew-info-label {
  display: block;
  font-size: 0.625rem;
  color: var(--color-text-muted);
  text-transform: uppercase;
  letter-spacing: 0.1em;
  margin-bottom: 4px;
}

.renew-info-value {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  font-size: 0.875rem;
  font-weight: 600;
  color: var(--color-text-primary);
}

.renew-info-value-danger { color: var(--color-danger); }

/* ── Options de durée ── */
.renew-options {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
}

.renew-option {
  position: relative;
  display: flex;
  align-items: center;
  gap: 0.875rem;
  padding: 0.875rem 1rem;
  border-radius: 10px;
  border: 1px solid rgba(var(--ink), 0.07);
  background: rgba(var(--ink), 0.02);
  cursor: pointer;
  transition: border-color 0.2s, background 0.2s;
}

.renew-option:hover {
  border-color: rgba(0,168,107,0.3);
  background: rgba(0,168,107,0.04);
}

.renew-option:has(input:checked) {
  border-color: rgba(0,168,107,0.55);
  background: rgba(0,168,107,0.09);
}

.renew-option-featured {
  border-color: rgba(0,168,107,0.2);
  background: rgba(0,168,107,0.03);
}

.renew-option input[type="radio"] {
  position: absolute;
  opacity: 0;
  width: 0;
  height: 0;
  pointer-events: none;
}

.renew-option-dot {
  width: 18px;
  height: 18px;
  border-radius: 50%;
  border: 2px solid rgba(var(--ink), 0.18);
  flex-shrink: 0;
  transition: border-color 0.2s, background 0.2s, box-shadow 0.2s;
}

.renew-option:has(input:checked) .renew-option-dot {
  border-color: #00A86B;
  background: #00A86B;
  box-shadow: 0 0 0 3px rgba(0,168,107,0.2);
}

.renew-option-content {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex: 1;
}

.renew-option-label {
  font-size: 0.9375rem;
  color: var(--color-text-primary);
  font-weight: 500;
}

.renew-option-badge {
  font-size: 0.5625rem;
  padding: 2px 7px;
  background: rgba(0,168,107,0.15);
  color: #00C07A;
  border: 1px solid rgba(0,168,107,0.25);
  border-radius: 4px;
  font-weight: 700;
  letter-spacing: 0.05em;
  text-transform: uppercase;
}

/* ── Pied de formulaire ── */
.renew-form-footer {
  display: flex;
  gap: 0.75rem;
  padding-top: 1.5rem;
  border-top: 1px solid var(--color-border);
}

.renew-form-footer .dash-btn { flex: 1; }

/* ── Pied de page ── */
.page-footer {
  text-align: center;
  margin-top: 3rem;
  padding-top: 1.5rem;
  border-top: 1px solid var(--color-border);
  font-size: 0.75rem;
  color: var(--color-text-muted);
}

/* ═══════════════════════════════════════════════════════════════════ */
/*  OUTILS CRYPTOGRAPHIQUES                                            */
/* ═══════════════════════════════════════════════════════════════════ */

/* Section icon — variante indigo */
.dash-section-icon-indigo {
  background: linear-gradient(135deg, #6366F1 0%, #4F46E5 100%);
  box-shadow: 0 8px 20px rgba(79, 70, 229, 0.3);
}

/* Grille 2 colonnes égales */
.dash-grid-2col {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 1.5rem;
  align-items: start;
  margin-bottom: 1.5rem;
}

/* Titre de carte (interface font) */
.dash-card-title {
  font-family: var(--font-interface);
  font-size: 1.0625rem;
  font-weight: 700;
  color: var(--color-text-primary);
  margin: 0;
}

/* Intro description des cartes */
.outils-card-desc {
  margin-bottom: 1.5rem;
  font-size: 0.8125rem;
  color: var(--color-text-secondary);
  line-height: 1.5;
}

/* Code inline accent vert */
.outils-inline-code {
  color: var(--color-primary-light);
  background: rgba(0, 168, 107, 0.1);
  padding: 2px 6px;
  border-radius: 4px;
  font-family: var(--font-mono);
}

/* Label court en majuscules */
.dash-label {
  display: block;
  font-size: 0.625rem;
  text-transform: uppercase;
  letter-spacing: 1.5px;
  color: var(--color-text-muted);
  font-weight: 700;
  margin-bottom: 0.5rem;
}

/* Input / select de formulaire */
.dash-input {
  width: 100%;
  background: rgba(10, 22, 40, 0.5);
  border: 1px solid var(--color-border);
  border-radius: 8px;
  padding: 0.625rem 0.875rem;
  color: var(--color-text-primary);
  font-family: var(--font-interface);
  font-size: 0.875rem;
  transition: border-color 0.2s;
  -webkit-appearance: none;
  appearance: none;
}

.dash-input:focus {
  outline: none;
  border-color: var(--color-primary);
  box-shadow: 0 0 0 3px rgba(0, 168, 107, 0.15);
}

.dash-input[type="date"]::-webkit-calendar-picker-indicator {
  filter: invert(0.5);
}

.dash-input.dash-input-mono {
  font-family: var(--font-mono);
}

/* Bouton pleine largeur */
.dash-btn-full {
  width: 100%;
  justify-content: center;
  height: 2.8125rem;
  font-weight: 700;
}

/* Boîte résultat génération */
.outils-result-box {
  margin-top: 1.75rem;
  padding: 1.25rem;
  background: rgba(0, 168, 107, 0.05);
  border: 1px solid rgba(0, 168, 107, 0.2);
  border-radius: 12px;
}

/* Label "Sortie Cryptographique" */
.outils-result-label {
  display: block;
  font-size: 9px;
  text-transform: uppercase;
  letter-spacing: 2px;
  color: var(--color-primary-light);
  margin-bottom: 0.75rem;
  font-weight: 800;
}

/* Ligne clé + copier */
.outils-key-row {
  display: flex;
  gap: 0.625rem;
  margin-bottom: 1.25rem;
  align-items: stretch;
}

/* Affichage de la clé générée */
.outils-key-code {
  flex: 1;
  background: var(--color-bg-input);
  border: 1px solid rgba(var(--ink), 0.1);
  color: #FFF;
  padding: 0.875rem;
  border-radius: 8px;
  font-family: var(--font-mono);
  font-size: 1.125rem;
  text-align: center;
  letter-spacing: 3px;
  box-shadow: inset 0 2px 10px rgba(0, 0, 0, 0.5);
  display: flex;
  align-items: center;
  justify-content: center;
}

/* Bouton copier aligné */
.outils-copy-btn {
  min-width: 80px;
  justify-content: center;
  align-self: stretch;
}

/* Label HMAC */
.outils-hmac-label {
  display: block;
  font-size: 9px;
  text-transform: uppercase;
  color: var(--color-text-muted);
  margin-bottom: 0.5rem;
}

/* Code HMAC */
.outils-hmac-code {
  display: block;
  background: rgba(0, 0, 0, 0.2);
  padding: 0.625rem;
  border-radius: 6px;
  font-size: 0.625rem;
  color: var(--color-text-secondary);
  word-break: break-all;
  border: 1px solid rgba(var(--ink), 0.05);
  font-family: var(--font-mono);
}

/* Grille audit 2 colonnes */
.outils-audit-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0.9375rem;
  margin-bottom: 1.75rem;
}

/* Boîte résultat certification */
.outils-cert-box {
  padding: 1.25rem;
  border-radius: 12px;
  display: flex;
  align-items: center;
  gap: 0.9375rem;
}

.outils-cert-valid {
  background: rgba(0, 168, 107, 0.1);
  border: 1px solid rgba(0, 168, 107, 0.3);
}

.outils-cert-invalid {
  background: rgba(220, 53, 69, 0.1);
  border: 1px solid rgba(220, 53, 69, 0.3);
}

.outils-cert-icon {
  width: 40px;
  height: 40px;
  min-width: 40px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

.outils-cert-icon-valid {
  background: var(--color-primary);
  color: #000;
}

.outils-cert-icon-invalid {
  background: #DC3545;
  color: #FFF;
}

.outils-cert-title {
  font-weight: 700;
  color: var(--color-text-primary);
  font-size: 0.9375rem;
  margin-bottom: 3px;
}

.outils-cert-sub-valid { font-size: 0.75rem; color: var(--color-primary-light); }
.outils-cert-sub-invalid { font-size: 0.75rem; color: #FCA5A5; }

/* Carte note de sécurité */
.outils-security-card {
  background: rgba(var(--ink), 0.02);
  border: 1px dashed rgba(var(--ink), 0.05);
  margin-top: 0;
}

.outils-security-body {
  display: flex;
  gap: 1.25rem;
  align-items: flex-start;
}

.outils-security-icon {
  color: #6366F1;
  background: rgba(99, 102, 241, 0.1);
  width: 50px;
  height: 50px;
  min-width: 50px;
  border-radius: 14px;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 4px 12px rgba(99, 102, 241, 0.1);
  flex-shrink: 0;
}

.outils-security-text {
  font-size: 0.8125rem;
  color: var(--color-text-secondary);
  margin: 0;
  line-height: 1.7;
}

.outils-security-strong {
  color: var(--color-text-primary);
  display: block;
  margin-bottom: 2px;
  font-weight: 600;
}

.outils-security-accent { color: var(--color-primary-light); }

.outils-security-code {
  font-size: 0.6875rem;
  background: rgba(var(--ink), 0.05);
  padding: 2px 5px;
  border-radius: 4px;
  font-family: var(--font-mono);
}

/* ═══════════════════════════════════════════════════════════════════ */
/*  EMPLOI DU TEMPS                                                    */
/* ═══════════════════════════════════════════════════════════════════ */

/* Carte conteneur */
.edt-card {
  background: var(--color-bg-card);
  border: 1px solid var(--color-border);
  border-radius: 14px;
  overflow: hidden;
  margin-bottom: 1.5rem;
}

/* Scroll horizontal */
.edt-scroll { overflow-x: auto; }

/* Tableau */
.edt-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 0.8rem;
}

.edt-table thead th {
  padding: 0.875rem 1rem;
  font-size: 0.6875rem;
  font-weight: 700;
  color: #fff;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  text-align: center;
  white-space: nowrap;
  background: linear-gradient(135deg, var(--color-primary) 0%, var(--color-primary-dark) 100%);
  border: none;
}

.edt-table thead th:first-child {
  background: var(--color-bg-entete);
  color: var(--color-text-muted);
  width: 80px;
}

.edt-table tbody td {
  padding: 0;
  border: 1px solid rgba(var(--ink), 0.04);
  vertical-align: top;
  background: var(--color-bg-card);
}

.edt-table tbody td:first-child {
  background: var(--color-bg-entete);
  text-align: center;
  border-right: 1px solid rgba(var(--ink), 0.06);
}

/* Cellule horaire */
.edt-time {
  padding: 0.75rem 0.625rem;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 2px;
}

.edt-time-start {
  font-weight: 700;
  font-size: 0.9rem;
  color: var(--color-primary);
  font-family: var(--font-mono);
}

.edt-time-end {
  font-size: 0.6875rem;
  color: rgba(var(--ink), 0.3);
  font-family: var(--font-mono);
}

/* Cellule cours */
.edt-cell {
  padding: 6px;
  min-height: 70px;
  vertical-align: top;
}

/* Carte cours */
.edt-course {
  position: relative;
  padding: 8px 10px;
  border-radius: 8px;
  font-size: 0.75rem;
  margin-bottom: 4px;
  transition: transform 0.15s ease;
  border-left: 3px solid transparent;
}

.edt-course:last-child { margin-bottom: 0; }

.edt-course:hover { transform: translateY(-1px); }

/* Retrait d'une séance : croix discrète en haut à droite de la carte (accentuée au survol, tactile compris) */
.edt-course-remove { position: absolute; top: 2px; right: 2px; margin: 0; }
.edt-course-remove + .edt-course-name { padding-right: 20px; }
.edt-course-remove-btn {
  width: 18px; height: 18px; padding: 0;
  border: 0; border-radius: 50%;
  background: rgba(var(--ink), 0.12);
  color: rgba(var(--ink), 0.75);
  font-size: 0.9rem; line-height: 18px;
  cursor: pointer; opacity: 0.45;
  transition: opacity 0.15s ease, background 0.15s ease;
}
.edt-course:hover .edt-course-remove-btn,
.edt-course-remove-btn:focus-visible { opacity: 1; }
.edt-course-remove-btn:hover { background: var(--color-danger); color: #fff; }

.edt-course-name {
  font-weight: 600;
  font-size: 0.8rem;
  margin-bottom: 3px;
  line-height: 1.3;
  color: #fff;
}

.edt-course-meta {
  font-size: 0.6875rem;
  opacity: 0.7;
  color: rgba(var(--ink), 0.8);
  display: block;
  line-height: 1.4;
}

/* Palette de 8 couleurs pour les cours */
.edt-course-0 { background: rgba(0,168,107,0.14);  border-color: rgba(0,168,107,0.45); }
.edt-course-1 { background: rgba(59,130,246,0.14); border-color: rgba(59,130,246,0.45); }
.edt-course-2 { background: rgba(168,85,247,0.14); border-color: rgba(168,85,247,0.45); }
.edt-course-3 { background: rgba(245,158,11,0.14); border-color: rgba(245,158,11,0.45); }
.edt-course-4 { background: rgba(239,68,68,0.14);  border-color: rgba(239,68,68,0.45); }
.edt-course-5 { background: rgba(14,165,233,0.14); border-color: rgba(14,165,233,0.45); }
.edt-course-6 { background: rgba(236,72,153,0.14); border-color: rgba(236,72,153,0.45); }
.edt-course-7 { background: rgba(52,211,153,0.14); border-color: rgba(52,211,153,0.45); }

/* Cellule vide */
.edt-empty-cell {
  color: rgba(var(--ink), 0.1);
  text-align: center;
  font-size: 1.1rem;
  padding: 1.25rem;
}

/* En-tête du formulaire d'ajout */
.edt-form-header {
  padding: 1.125rem 1.5rem;
  background: linear-gradient(135deg, rgba(0,168,107,0.07) 0%, rgba(0,168,107,0.02) 100%);
  border-bottom: 1px solid rgba(var(--ink), 0.04);
  display: flex;
  align-items: center;
  gap: 0.875rem;
}

.edt-form-icon {
  width: 36px;
  height: 36px;
  border-radius: 9px;
  background: rgba(0, 168, 107, 0.12);
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--color-primary);
  flex-shrink: 0;
}

.edt-form-title {
  font-weight: 700;
  font-size: 0.9375rem;
  color: var(--color-text-primary);
}

/* Grille 4 colonnes du formulaire */
.edt-form-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 1rem;
  margin-bottom: 1rem;
}

/* Pied de formulaire */
.edt-form-footer {
  display: flex;
  align-items: flex-end;
  gap: 1rem;
}

.edt-form-footer .dash-form-group {
  flex: 1;
  margin-bottom: 0;
}

/* Print-only header */
.edt-print-header { display: none; }

/* Légende matières */
.edt-legend {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  margin-bottom: 1rem;
}

.edt-legend-item {
  display: flex;
  align-items: center;
  gap: 0.375rem;
  font-size: 0.75rem;
  color: var(--color-text-secondary);
}

.edt-legend-dot {
  width: 10px;
  height: 10px;
  border-radius: 3px;
  flex-shrink: 0;
}

.edt-legend-dot-0 { background: rgba(0,168,107,0.7); }
.edt-legend-dot-1 { background: rgba(59,130,246,0.7); }
.edt-legend-dot-2 { background: rgba(168,85,247,0.7); }
.edt-legend-dot-3 { background: rgba(245,158,11,0.7); }
.edt-legend-dot-4 { background: rgba(239,68,68,0.7); }
.edt-legend-dot-5 { background: rgba(14,165,233,0.7); }
.edt-legend-dot-6 { background: rgba(236,72,153,0.7); }
.edt-legend-dot-7 { background: rgba(52,211,153,0.7); }

/* Sélecteur année (no-print) */
.edt-toolbar {
  display: flex;
  align-items: center;
  gap: 0.75rem;
}

/* Corps du formulaire avec padding */
.edt-form-body { padding: 1.25rem 1.5rem; }

/* Alerte erreur dans le formulaire */
.edt-msg-error { margin-top: 1rem; }

/* Texte optionnel dans les labels */
.edt-optional {
  font-weight: 400;
  color: var(--color-text-muted);
  font-size: 0.6875rem;
  text-transform: none;
  letter-spacing: 0;
}

/* Section icon — variante primaire (vert) */
.dash-section-icon-primary {
  background: linear-gradient(135deg, var(--color-primary) 0%, var(--color-primary-dark) 100%);
}

/* ── Print ── */
@media print {
  @page { size: A4 portrait; margin: 15mm; }
  .sb-modern, .page-header, .no-print, .dash-section-header { display: none !important; }
  .app-layout { display: block !important; }
  .content { padding: 0 !important; margin: 0 !important; width: 100% !important; }
  body { background: #fff !important; color: #000 !important; }
  .cahier-print-header { display: block !important; text-align: center; margin-bottom: 20px; }
  .cahier-print-header h2 { font-size: 18px; font-weight: 700; margin: 0 0 4px; color: #000; }
  .cahier-print-header p { font-size: 13px; color: #444; margin: 0; }
  .card { border: 1px solid #ccc !important; border-radius: 0 !important; box-shadow: none !important; padding: 12px 16px !important; margin-bottom: 12px !important; }
  .card-header { border-bottom: 1px solid #ddd !important; padding-bottom: 8px !important; margin-bottom: 10px !important; }
  .card-header .fw-semibold { font-size: 14px; color: #000; }
  .card-body p { font-size: 12px !important; line-height: 1.6 !important; color: #222 !important; }
  .badge { border: 1px solid #999 !important; background: #f5f5f5 !important; color: #000 !important; font-weight: 700 !important; }
  [style*="background:rgba(245,166,35"] { background: #f9f3e0 !important; border: 1px solid #d4a84b !important; }
  [style*="#F5A623"] { color: #000 !important; }
  [style*="white-space:pre-wrap"] { white-space: pre-wrap !important; }
  .text-muted, .text-xs { color: #444 !important; }
  .edt-card { border: 1px solid #aaa !important; border-radius: 0 !important; }
  .edt-table thead th { background: #333 !important; -webkit-print-color-adjust: exact; print-color-adjust: exact; }
  .edt-table thead th:first-child { background: #f5f5f5 !important; color: #333 !important; }
  .edt-table tbody td { background: #fff !important; border: 1px solid #ddd !important; }
  .edt-table tbody td:first-child { background: #f9f9f9 !important; }
  .edt-course { border: 1px solid #ccc !important; background: #f0f0f0 !important; }
  .edt-course-name { color: #000 !important; }
  .edt-course-meta { color: #444 !important; opacity: 1 !important; }
  .edt-time-start { color: #007A4D !important; }
  .edt-print-header { display: flex !important; }
}

.cahier-print-header { display: none; }

/* ═══════════════════════════════════════════════════════════════════ */
/*  PAGE SAISIE APPEL                                                  */
/* ═══════════════════════════════════════════════════════════════════ */

/* En-tête */
.dash-appel-header {
  display: flex;
  align-items: center;
  gap: 1rem;
  margin-bottom: 1.5rem;
}

.appel-icon {
  width: 52px;
  height: 52px;
  min-width: 52px;
  border-radius: 14px;
  background: rgba(0, 168, 107, 0.08);
  border: 1px solid rgba(0, 168, 107, 0.15);
  color: var(--color-primary);
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

.appel-title {
  font-family: var(--font-logo);
  font-size: 1.5rem;
  font-weight: 700;
  color: var(--color-text-primary);
  margin: 0 0 3px;
}

.appel-subtitle {
  font-size: 0.875rem;
  color: var(--color-text-muted);
  margin: 0;
}

.appel-date { text-transform: capitalize; }
.appel-matiere { font-weight: 700; color: var(--color-primary); }

.appel-header-actions {
  margin-left: auto;
  display: flex;
  gap: 0.75rem;
  align-items: center;
}

/* Bouton "Tout présent" */
.btn-all-present {
  background: rgba(0, 168, 107, 0.1);
  border-color: rgba(0, 168, 107, 0.2);
  color: var(--color-primary);
}

.btn-all-present:hover {
  background: rgba(0, 168, 107, 0.2);
  border-color: rgba(0, 168, 107, 0.4);
  color: var(--color-primary-light);
}

/* Grille de statistiques */
.appel-stats {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1rem;
  margin-bottom: 1.5rem;
}

/* Carte stat */
.appel-stat-card {
  background: var(--color-bg-card);
  border: 1px solid var(--color-border);
  border-radius: 14px;
  padding: 1.125rem 1.25rem;
  display: flex;
  align-items: center;
  gap: 1rem;
}

.appel-stat-present { border-left: 3px solid var(--color-primary); }
.appel-stat-absent  { border-left: 3px solid var(--color-danger); }
.appel-stat-retard  { border-left: 3px solid #F59E0B; }

.appel-stat-icon {
  width: 44px;
  height: 44px;
  min-width: 44px;
  border-radius: 12px;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

.appel-stat-icon-present { background: rgba(0, 168, 107, 0.1);  color: var(--color-primary); }
.appel-stat-icon-absent  { background: rgba(220, 53, 69, 0.1);  color: var(--color-danger); }
.appel-stat-icon-retard  { background: rgba(245, 158, 11, 0.1); color: #F59E0B; }

.appel-stat-value {
  font-size: 1.875rem;
  font-weight: 800;
  color: var(--color-text-primary);
  line-height: 1;
  display: block;
}

.appel-stat-label {
  font-size: 0.6875rem;
  color: var(--color-text-muted);
  text-transform: uppercase;
  letter-spacing: 0.08em;
  margin-top: 4px;
  display: block;
}

/* Carte tableau + footer */
.appel-form-card {
  background: var(--color-bg-card);
  border: 1px solid var(--color-border);
  border-radius: 14px;
  overflow: hidden;
  margin-bottom: 1.5rem;
}

/* Tableau interne */
.appel-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 0.875rem;
}

.appel-table th {
  text-align: left;
  padding: 0.75rem 1rem;
  font-size: 10px;
  font-weight: 700;
  color: var(--color-text-muted);
  text-transform: uppercase;
  letter-spacing: 0.08em;
  border-bottom: 1px solid var(--color-border);
  background: var(--color-bg-entete);
  white-space: nowrap;
}

.appel-table th.col-eleve  { width: 300px; }
.appel-table th.col-statut { text-align: center; }
.appel-table th.col-retard { width: 140px; text-align: center; }

.appel-table td {
  padding: 0.625rem 1rem;
  border-bottom: 1px solid rgba(var(--ink), 0.04);
  vertical-align: middle;
}

.appel-table td.col-statut { text-align: center; }
.appel-table td.col-retard { text-align: center; }
.appel-table tr:last-child td { border-bottom: none; }
.appel-table tbody tr:hover td { background: var(--color-bg-hover); }

/* Cellule élève */
.appel-eleve-cell {
  display: flex;
  align-items: center;
  gap: 0.75rem;
}

.appel-eleve-avatar {
  width: 40px;
  height: 40px;
  min-width: 40px;
  border-radius: 10px;
  background: rgba(var(--ink), 0.05);
  border: 1px solid rgba(var(--ink), 0.08);
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: 700;
  color: var(--color-text-primary);
  font-size: 0.875rem;
  flex-shrink: 0;
}

.appel-eleve-name {
  font-weight: 600;
  color: var(--color-text-primary);
  text-decoration: none;
  display: block;
  font-size: 0.875rem;
  line-height: 1.3;
}

.appel-eleve-name:hover { color: var(--color-primary-light); }

.appel-eleve-meta {
  font-family: var(--font-mono);
  font-size: 0.6875rem;
  color: var(--color-text-muted);
  display: block;
  margin-top: 1px;
}

/* Pills de statut */
.status-pills-group {
  display: inline-flex;
  gap: 0.375rem;
  justify-content: center;
  flex-wrap: wrap;
}

.status-pill-radio {
  position: absolute;
  opacity: 0;
  pointer-events: none;
  width: 0;
  height: 0;
}

.status-pill-label {
  display: inline-flex;
  align-items: center;
  padding: 0.3125rem 0.9375rem;
  border-radius: 999px;
  font-size: 0.75rem;
  font-weight: 600;
  cursor: pointer;
  border: 1px solid var(--color-border);
  color: var(--color-text-muted);
  background: transparent;
  transition: all 0.15s ease;
  user-select: none;
  white-space: nowrap;
}

.status-pill-label:hover {
  border-color: rgba(var(--ink), 0.22);
  color: var(--color-text-secondary);
}

.status-pill-radio[value="PRESENT"]:checked + .status-pill-label {
  background: rgba(0, 168, 107, 0.14);
  border-color: rgba(0, 168, 107, 0.45);
  color: var(--color-primary-light);
}

.status-pill-radio[value="ABSENT"]:checked + .status-pill-label {
  background: rgba(220, 53, 69, 0.14);
  border-color: rgba(220, 53, 69, 0.45);
  color: #FF6B7A;
}

.status-pill-radio[value="RETARD"]:checked + .status-pill-label {
  background: rgba(245, 158, 11, 0.14);
  border-color: rgba(245, 158, 11, 0.45);
  color: #F59E0B;
}

.status-pill-radio:disabled + .status-pill-label {
  opacity: 0.45;
  cursor: not-allowed;
  pointer-events: none;
}

/* Input retard */
.retard-input-wrapper {
  display: inline-flex;
  align-items: center;
  border: 1px solid var(--color-border);
  border-radius: 8px;
  overflow: hidden;
  background: rgba(10, 22, 40, 0.5);
}

.retard-input-wrapper input[type="number"] {
  width: 60px;
  background: transparent;
  border: none;
  padding: 0.375rem 0.5rem;
  color: var(--color-text-primary);
  font-family: var(--font-mono);
  font-size: 0.875rem;
  text-align: center;
  -moz-appearance: textfield;
  appearance: textfield;
}

.retard-input-wrapper input[type="number"]::-webkit-inner-spin-button,
.retard-input-wrapper input[type="number"]::-webkit-outer-spin-button {
  -webkit-appearance: none;
}

.retard-input-wrapper input:focus { outline: none; }
.retard-input-wrapper input:disabled { opacity: 0.4; cursor: not-allowed; }

.retard-unit {
  font-size: 0.6875rem;
  color: var(--color-text-muted);
  padding: 0.375rem 0.5rem;
  background: rgba(var(--ink), 0.03);
  border-left: 1px solid var(--color-border);
  white-space: nowrap;
}

/* Pied du formulaire d'appel */
.appel-form-footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 1.125rem 1.25rem;
  background: rgba(var(--ink), 0.02);
  border-top: 1px solid var(--color-border);
}

.appel-form-hint {
  display: flex;
  align-items: center;
  gap: 0.375rem;
  font-size: 0.8125rem;
  color: var(--color-text-muted);
}

.appel-form-actions { display: flex; gap: 0.75rem; }

/* Bannière appel clôturé */
.appel-clos-banner {
  text-align: center;
  padding: 1.25rem;
  background: rgba(var(--ink), 0.02);
  border-top: 1px solid var(--color-border);
  font-size: 0.875rem;
  font-weight: 600;
  color: var(--color-text-muted);
}

/* Mes cours (accueil enseignant, smartphone) */
.mc-section-title {
  font-size: 0.8125rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--color-text-muted);
  margin: 1.25rem 0 0.625rem;
}

.mc-list { display: grid; gap: 0.75rem; grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); }

.mc-card {
  display: flex;
  flex-direction: column;
  gap: 0.875rem;
  padding: 1rem 1.125rem;
  border: 1px solid var(--color-border);
  border-radius: 12px;
  background: var(--color-bg-card, rgba(var(--ink), 0.03));
}

.mc-classe { font-size: 1.0625rem; font-weight: 700; color: var(--color-text-primary); }
.mc-matiere { font-weight: 600; color: var(--color-primary); }
.mc-meta { font-size: 0.8125rem; color: var(--color-text-muted); margin-top: 0.125rem; }
.mc-badge { display: inline-block; margin-top: 0.5rem; }

.mc-card-actions { display: flex; gap: 0.625rem; }
.mc-card-actions form { flex: 1; display: flex; }
.mc-card-actions .btn-primary,
.mc-card-actions .btn-secondary { flex: 1; justify-content: center; min-height: 44px; }
.mc-card-actions form .btn-primary { width: 100%; }

.mc-hint { font-size: 0.8125rem; color: var(--color-text-muted); margin-top: 1.25rem; }

/* Appel sur smartphone : une carte par élève, 4 boutons tactiles */
@media (max-width: 640px) {
  .dash-appel-header { flex-wrap: wrap; }
  .appel-header-actions { width: 100%; }
  .appel-stats { grid-template-columns: repeat(3, 1fr); gap: 0.5rem; }
  .appel-stat-card { padding: 0.75rem; }
  .appel-stat-icon { display: none; }
  .appel-table thead { display: none; }
  .appel-table tr { display: block; padding: 0.625rem 0; border-bottom: 1px solid var(--color-border); }
  .appel-table td { display: block; border: none; padding: 0.25rem 0.75rem; }
  .appel-table td.col-statut { text-align: left; }
  .status-pills-group { display: grid; grid-template-columns: repeat(4, 1fr); gap: 0.375rem; width: 100%; }
  .status-pill-label { justify-content: center; padding: 0.625rem 0.25rem; font-size: 0.75rem; }
  .appel-table td.col-retard { text-align: left; }
  .appel-form-footer { flex-direction: column; align-items: stretch; gap: 0.75rem; }
  .appel-form-actions { flex-direction: column; }
  .appel-form-actions .btn-primary,
  .appel-form-actions .btn-secondary { justify-content: center; min-height: 44px; }
}

/* Tableau de bord direction (pilotage) */
.pil-print-title { display: none; }
.pil-kpis { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 0.875rem; margin-bottom: 1.5rem; }
.pil-kpi {
  display: flex;
  flex-direction: column;
  gap: 0.375rem;
  padding: 1rem 1.125rem;
  border: 1px solid var(--color-border);
  border-radius: 12px;
  background: var(--color-bg-card);
}
.pil-kpi-label { font-size: 0.6875rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.06em; color: var(--color-text-muted); }
.pil-kpi-value { font-size: 1.625rem; font-weight: 800; line-height: 1.1; color: var(--color-text-primary); }
.pil-kpi-sub { font-size: 0.75rem; color: var(--color-text-muted); }
.pil-vert { color: var(--color-primary-light); }
.pil-orange { color: #F59E0B; }
.pil-rouge { color: #FF6B7A; }
.pil-bar { display: block; width: 100%; height: 6px; border-radius: 3px; background: var(--color-border); overflow: hidden; }
.pil-bar-fill { display: block; height: 100%; border-radius: 3px; background: var(--color-primary); }
.pil-bar-fill.is-orange { background: #F59E0B; }
.pil-bar-fill.is-rouge { background: #DC3545; }
.pil-mini { display: inline-flex; align-items: center; gap: 0.5rem; }
.pil-mini .pil-bar { width: 56px; }
.pil-table th, .pil-table td { padding: 0.5rem 0.625rem; font-size: 0.8125rem; }
.pil-table tfoot td { border-top: 2px solid var(--color-border); }
.pil-faits { display: grid; grid-template-columns: repeat(4, 1fr); gap: 0.75rem; margin: 0.75rem 0 0.25rem; }
.pil-faits dt { font-size: 0.6875rem; text-transform: uppercase; letter-spacing: 0.05em; color: var(--color-text-muted); }
.pil-faits dd { margin: 0; font-size: 1.125rem; font-weight: 700; color: var(--color-text-primary); }
.pil-subtitle { font-size: 0.75rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.05em; color: var(--color-text-muted); margin: 1rem 0 0.375rem; }
.pil-niveaux { display: flex; flex-wrap: wrap; gap: 0.5rem; margin-bottom: 0.75rem; }
.pil-note { font-size: 0.75rem; color: var(--color-text-muted); margin: 0.5rem 0 0; }

@media (max-width: 1024px) { .pil-kpis { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 640px) { .pil-kpis, .pil-faits { grid-template-columns: repeat(2, minmax(0, 1fr)); } }

@media print {
  .pil-print-title { display: block; font-size: 13px; color: #444; margin: 0 0 10px; }
  .pil-kpis { grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 6px; margin-bottom: 10px; }
  .pil-kpi { padding: 6px 8px; }
  .pil-kpi-value { font-size: 1.125rem; }
  .pil-kpi, .dash-grid-2col > .card, .pil-table .table-wrapper, .card .table-wrapper {
    border: 1px solid #ccc !important; background: #fff !important; box-shadow: none !important; break-inside: avoid;
  }
  .pil-kpi-value, .pil-faits dd, .pil-table td, .pil-table th, .card-title, .pil-vert, .pil-orange, .pil-rouge { color: #000 !important; }
  .pil-table td, .pil-table th { border-color: #ddd !important; background: #fff !important; }
  .pil-bar { background: #e5e5e5; }
  .dash-grid-2col { display: grid !important; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
  .dash-grid-2col > .card { padding: 8px 10px !important; }
  .pil-table { width: 100%; table-layout: auto; }
  .pil-table th, .pil-table td { padding: 2px 4px; font-size: 9px; white-space: normal; }
  .pil-table th { text-transform: none; letter-spacing: 0; }
  .pil-mini .pil-bar { display: none; }
  .pil-kpi-sub, .pil-note, .pil-faits dt { font-size: 9px; }
}

/* Ligne tableau vide */
.appel-empty-row td {
  text-align: center;
  padding: 3.75rem;
  color: var(--color-text-muted);
}

/* ═══════════════════════════════════════════════════════════════════ */
/*  FORMULAIRE LICENCE (création / modification)                       */
/* ═══════════════════════════════════════════════════════════════════ */

/* Hint sous un champ */
.dash-form-hint {
  font-size: 0.75rem;
  color: var(--color-text-muted);
  margin-top: 0.3rem;
}

.dash-empty-cell {
  text-align: center;
  padding: 2rem 1rem;
  color: var(--color-text-muted);
  font-size: 0.875rem;
}

/* Bloc d'info en mode édition (clé + statut) */
.lform-edit-info {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0.75rem;
  background: rgba(var(--ink), 0.02);
  border: 1px solid var(--color-border);
  border-radius: 10px;
  padding: 1rem 1.25rem;
  margin-bottom: 1.5rem;
}

.lform-edit-row { display: flex; flex-direction: column; gap: 4px; }

.lform-key-code {
  font-family: var(--font-mono);
  font-size: 0.9375rem;
  color: var(--color-text-primary);
  letter-spacing: 1px;
}

.lform-status {
  font-size: 0.875rem;
  color: var(--color-primary-light);
  font-weight: 600;
}

/* Actions du formulaire */
.lform-actions {
  display: flex;
  gap: 0.75rem;
  margin-top: 1.75rem;
}

/* Textarea stylisée */
.dash-input[rows] {
  resize: vertical;
  min-height: 80px;
}

/* Checkbox stylisée */
.dash-checkbox-row {
  display: flex;
  align-items: flex-start;
  gap: 0.75rem;
  cursor: pointer;
}

.dash-checkbox {
  width: 1.125rem;
  height: 1.125rem;
  margin-top: 2px;
  accent-color: var(--color-primary);
  flex-shrink: 0;
  cursor: pointer;
}

.dash-checkbox-label {
  font-size: 0.8125rem;
  color: var(--color-text-primary);
  line-height: 1.5;
}

/* Boîte résultat neutre (pas de teinte couleur) */
.outils-result-neutral {
  margin-top: 1.75rem;
}

/* État "Copié" du bouton copier */
.btn-copied {
  background: var(--color-primary) !important;
  color: #000 !important;
}

/* Icône SVG dans les alertes */
.dash-alert-svg-icon {
  flex-shrink: 0;
  margin-right: 0.75rem;
}

/* Utilitaire pleine largeur */
.dash-input-full { width: 100%; }

/* ─────────────────────────────────────────────────────────────── */
/*  SAISIE NOTES                                                    */
/* ─────────────────────────────────────────────────────────────── */

/* Breadcrumb */
.note-breadcrumb {
  display: flex;
  align-items: center;
  gap: 0.375rem;
  font-size: 0.8rem;
  text-transform: uppercase;
  font-weight: 600;
  letter-spacing: 0.06em;
  color: var(--color-text-muted);
  margin-bottom: 0.25rem;
}
.note-breadcrumb a {
  color: var(--color-text-muted);
  text-decoration: none;
}
.note-breadcrumb a:hover { color: var(--color-text-primary); }
.note-breadcrumb-sep     { opacity: 0.45; }

/* Méta (barème, type, date) */
.note-meta-row {
  display: flex;
  align-items: center;
  gap: 1.25rem;
  flex-wrap: wrap;
  margin-top: 0.375rem;
}
.note-meta-bareme {
  font-family: 'DejaVu Sans Mono', monospace;
  font-size: 0.875rem;
  color: var(--color-primary);
  font-weight: 600;
}
.note-meta-item {
  font-size: 0.85rem;
  color: var(--color-text-muted);
}

/* Panneau stats (4 colonnes) */
.note-stats {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: var(--space-3);
  margin-bottom: var(--space-4);
}
.note-stat-card {
  background: var(--color-bg-card);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  padding: 0.875rem 1.25rem;
}
.note-stat-card-primary { border-color: var(--color-primary); }
.note-stat-label {
  font-size: 0.75rem;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--color-text-muted);
  margin-bottom: 0.25rem;
}
.note-stat-value {
  font-size: 1.5rem;
  font-weight: 700;
  line-height: 1.2;
}
.note-stat-value-primary { color: var(--color-primary); }
.note-stat-value-sm      { font-size: 1.1rem; }

/* Panneau contrôle qualité */
.note-cq-panel {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
  margin-bottom: 1rem;
}
.note-cq-panel[hidden] { display: none; }
.note-cq-item {
  display: flex;
  gap: 0.75rem;
  align-items: flex-start;
  padding: 0.75rem 1rem;
  border: 1px solid var(--color-border);
  border-radius: 10px;
  background: rgba(var(--ink), .03);
}
.note-cq-item-danger  { border-color: var(--color-danger, #ef4444); background: rgba(239,68,68,.07); }
.note-cq-item-warning { border-color: #f59e0b; background: rgba(245,158,11,.07); }
.note-cq-item-info    { border-color: #3b82f6; background: rgba(59,130,246,.07); }
.note-cq-icon         { font-size: 1.15rem; flex-shrink: 0; margin-top: 1px; }
.note-cq-body         { flex: 1; }
.note-cq-title {
  font-weight: 700;
  font-size: 0.875rem;
  color: var(--color-text-primary);
}
.note-cq-title-danger  { color: #f87171; }
.note-cq-title-warning { color: #fbbf24; }
.note-cq-title-info    { color: #60a5fa; }
.note-cq-detail {
  font-size: 0.82rem;
  color: var(--color-text-muted);
  margin-top: 2px;
}
.note-cq-badge {
  display: inline-block;
  padding: 0.15rem 0.5rem;
  border-radius: 99px;
  font-size: 0.7rem;
  font-weight: 700;
  flex-shrink: 0;
  align-self: center;
  text-transform: uppercase;
  color: #fff;
}
.note-cq-badge-danger  { background: #ef4444; }
.note-cq-badge-warning { background: #f59e0b; }
.note-cq-badge-info    { background: #3b82f6; }

/* Tableau desktop */
.note-table-card {
  background: var(--color-bg-card);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  overflow: hidden;
  margin-bottom: var(--space-4);
  padding: 0;
}
.note-table-scroll    { overflow-x: auto; }
.note-col-idx         { width: 3rem;  text-align: center; }
.note-col-note        { width: 120px; text-align: center; }
.note-col-abs         { width: 80px;  text-align: center; }
.note-col-disp        { width: 100px; text-align: center; }
.note-col-bareme {
  font-size: 0.75rem;
  font-weight: 400;
  color: var(--color-text-muted);
}
.note-input-num {
  width: 90px;
  text-align: center;
  font-weight: 700;
  font-size: 1rem;
}
.note-input-num-error {
  border-color: #f87171 !important;
  background: rgba(220,53,69,.08) !important;
}
.note-row          { transition: background .2s; }
.note-row-saisie   { background: rgba(0,168,107,.07); }
.note-row-absent   { background: rgba(255,107,122,.07); }
.note-row-dispense { opacity: .6; }
.note-eleve-nom    { font-weight: 600; text-transform: uppercase; }
.note-eleve-prenom { font-size: 0.8rem; color: var(--color-text-muted); }
.note-eleve-matricule {
  font-family: 'DejaVu Sans Mono', monospace;
  font-size: 0.7rem;
  color: var(--color-text-secondary);
}

/* Footer sticky */
.note-footer-sticky {
  position: sticky;
  bottom: var(--space-4);
  z-index: 10;
  margin-top: var(--space-4);
}
.note-footer-card {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  flex-wrap: wrap;
  background: var(--color-bg-card);
  border: 1px solid var(--color-primary);
  border-radius: var(--radius-lg);
  padding: var(--space-3) var(--space-5);
}
.note-footer-left {
  display: flex;
  align-items: center;
  gap: 1rem;
  flex-wrap: wrap;
}
.note-footer-count   { font-size: 0.85rem; color: var(--color-text-muted); }
.note-footer-hint    { font-size: 0.8rem; font-style: italic; color: var(--color-text-muted); }
.note-footer-actions { display: flex; gap: 0.5rem; align-items: center; }
.note-footer-submit  { min-width: 160px; }
.note-kbd {
  display: inline-block;
  border: 1px solid var(--color-border);
  border-radius: 3px;
  padding: 1px 5px;
  font-size: 0.75rem;
  font-family: 'DejaVu Sans Mono', monospace;
  color: var(--color-text-muted);
}

/* Visibilité responsive desktop / mobile */
.ns-desktop { display: block; }
.ns-mobile  { display: none;  }

/* Cartes mobile */
.ns-card {
  background: var(--color-surface, var(--color-bg-card));
  border: 1.5px solid var(--color-border);
  border-radius: 12px;
  margin-bottom: 0.75rem;
  overflow: hidden;
  transition: border-color .2s, background .2s;
}
.ns-card-dispense { opacity: .55; }
.ns-card-saisie   { border-color: var(--color-primary) !important; background: rgba(0,168,107,.04); }
.ns-card-absent   { border-color: var(--color-danger, #ef4444) !important; background: rgba(239,68,68,.04); }
.ns-card-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0.75rem 1rem 0.5rem;
}
.ns-card-nom {
  font-weight: 700;
  text-transform: uppercase;
  font-size: 0.95rem;
  line-height: 1.2;
}
.ns-card-prenom  { font-size: 0.82rem; color: var(--color-text-muted); }
.ns-card-matricule {
  font-family: 'DejaVu Sans Mono', monospace;
  font-size: 0.72rem;
  color: var(--color-text-secondary);
  margin-left: 0.4rem;
}
.ns-card-counter { font-size: 0.75rem; color: var(--color-text-muted); font-weight: 600; }
.ns-card-body {
  padding: 0.5rem 1rem 0.75rem;
  display: flex;
  align-items: center;
  gap: 0.75rem;
  flex-wrap: wrap;
}
.ns-card-note-group {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.2rem;
  flex: 0 0 auto;
}
.ns-card-note-label {
  font-size: 0.72rem;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--color-text-muted);
  font-weight: 600;
}
.ns-card-actions {
  display: flex;
  gap: 0.5rem;
  flex-wrap: wrap;
  align-items: center;
  flex: 1;
  justify-content: flex-end;
}
.ns-card-obs { padding: 0 1rem 0.75rem; }
.ns-toggle-btn {
  display: flex;
  align-items: center;
  gap: 0.4rem;
  padding: 0.5rem 0.9rem;
  border: 1.5px solid var(--color-border);
  border-radius: 8px;
  cursor: pointer;
  font-size: 0.82rem;
  font-weight: 600;
  transition: all .15s;
  user-select: none;
  white-space: nowrap;
  color: var(--color-text-primary);
}
.ns-toggle-btn input[type="checkbox"] { display: none; }
.ns-toggle-btn.ns-toggle-abs {
  border-color: var(--color-danger, #ef4444) !important;
  background: rgba(239,68,68,.08);
  color: var(--color-danger, #ef4444);
}
.ns-toggle-btn.ns-toggle-disp {
  border-color: var(--color-primary) !important;
  background: rgba(0,168,107,.08);
  color: var(--color-primary);
}
.note-input-mobile {
  width: 88px !important;
  height: 52px;
  text-align: center;
  font-weight: 700;
  font-size: 1.4rem !important;
  border-radius: 10px;
  padding: 0 !important;
}
.note-input-mobile::-webkit-inner-spin-button,
.note-input-mobile::-webkit-outer-spin-button { -webkit-appearance: none; appearance: none; margin: 0; }
.note-input-mobile { -moz-appearance: textfield; }

/* ─────────────────────────────────────────────────────────────── */
/*  RELEVÉ DE NOTES                                                 */
/* ─────────────────────────────────────────────────────────────── */

/* Carte filtres */
.rlv-filters-header {
  display: flex;
  align-items: center;
  gap: 0.4rem;
  font-size: 0.7rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--color-text-muted);
  margin-bottom: 1.1rem;
}
.rlv-filters-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
  gap: 1rem;
  align-items: start;
}
.rlv-filters-reset {
  margin-top: 0.9rem;
  display: flex;
  justify-content: flex-end;
}

/* Étapes de filtre */
.rlv-step           { display: flex; flex-direction: column; }
.rlv-step-label {
  font-size: 0.8rem;
  font-weight: 600;
  display: flex;
  align-items: center;
  margin-bottom: 0.4rem;
  color: var(--color-text-secondary);
}
.rlv-step-done .rlv-step-label,
.rlv-step-active .rlv-step-label { color: var(--color-text-primary); }
.rlv-step-num {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 18px;
  height: 18px;
  border-radius: 50%;
  background: var(--color-bg-input, #1e2d3d);
  color: var(--color-text-muted);
  border: 1.5px solid var(--color-border);
  font-size: 0.6rem;
  font-weight: 800;
  margin-right: 0.4rem;
  flex-shrink: 0;
}
.rlv-step-done .rlv-step-num   { background: var(--color-primary); color: #fff; border: none; }
.rlv-step-active .rlv-step-num { background: transparent; color: var(--color-primary); border-color: var(--color-primary); }
.rlv-step-num-opt {
  background: var(--color-bg-input, #1e2d3d) !important;
  color: var(--color-text-muted) !important;
  border: 1.5px solid var(--color-border) !important;
}
.rlv-step-done .rlv-step-num-opt { background: var(--color-primary) !important; color: #fff !important; border: none !important; }
.rlv-step-hint {
  font-size: 0.68rem;
  color: var(--color-text-muted);
  font-style: italic;
  font-weight: 400;
  margin-left: 0.3rem;
}
.rlv-step .dash-input:disabled { opacity: 0.4; cursor: not-allowed; pointer-events: none; }

/* Recherche dans la table */
.rlv-search-row {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  margin-bottom: 0.75rem;
}
.rlv-search-wrap {
  position: relative;
  flex: 1;
  max-width: 280px;
}
.rlv-search-icon {
  position: absolute;
  left: 0.75rem;
  top: 50%;
  transform: translateY(-50%);
  color: var(--color-text-muted);
  pointer-events: none;
}
.rlv-search-input {
  padding-left: 2.25rem !important;
}
.rlv-row-hidden { display: none; }

/* Bandeau discipline */
.rlv-banner {
  background: linear-gradient(135deg, var(--color-bg-card) 0%, rgba(0,168,107,0.04) 100%);
  border: 1px solid var(--color-border);
  border-left: 4px solid var(--color-primary);
  border-radius: var(--radius-lg);
  padding: 0.9rem 1.25rem;
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-wrap: wrap;
  gap: 1rem;
  margin-bottom: 1rem;
}
.rlv-banner-tag {
  font-size: 0.7rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--color-primary);
  margin-bottom: 0.2rem;
}
.rlv-banner-title {
  font-size: 1.1rem;
  font-weight: 700;
  color: var(--color-text-primary);
}
.rlv-banner-meta { font-size: 0.95rem; font-weight: 400; color: var(--color-text-muted); }
.rlv-banner-sub  { font-size: 0.8rem; color: var(--color-text-muted); margin-top: 0.2rem; }
.rlv-banner-stats {
  display: flex;
  gap: 1.25rem;
  align-items: center;
  flex-wrap: wrap;
}
.rlv-banner-divider { width: 1px; height: 2rem; background: var(--color-border); flex-shrink: 0; }
.rlv-stat-item    { text-align: center; min-width: 56px; }
.rlv-stat-val     { font-size: 1.5rem; font-weight: 800; line-height: 1; color: var(--color-text-primary); }
.rlv-stat-val-primary { color: var(--color-primary); }
.rlv-stat-val-good    { color: #27ae60; }
.rlv-stat-val-bad     { color: #e74c3c; }
.rlv-stat-label   { font-size: 0.7rem; text-transform: uppercase; letter-spacing: 0.05em; color: var(--color-text-muted); margin-top: 2px; }

/* Carte tableau */
.rlv-table-card   { overflow-x: auto; border: 1px solid var(--color-border); border-radius: var(--radius-lg); background: var(--color-bg-card); }
.rlv-table        { min-width: 600px; font-size: 0.875rem; border-collapse: collapse; width: 100%; }
.rlv-th-idx, .rlv-td-idx   { width: 36px; text-align: center; color: var(--color-text-muted); font-size: 0.75rem; font-weight: 500; }
.rlv-th-rang, .rlv-td-rang { width: 52px; text-align: center; font-size: 0.78rem; }
.rlv-th-eleve, .rlv-td-eleve { min-width: 200px; text-align: left; }
.rlv-th-ev, .rlv-td-note   { text-align: center; min-width: 80px; padding: 0.6rem 0.4rem; }
.rlv-th-ev                  { cursor: default; }
.rlv-th-ev-trimestre        { font-size: 0.68rem; font-weight: 600; color: var(--color-text-muted); margin-bottom: 0.15rem; }
.rlv-th-ev-type             { font-size: 0.78rem; font-weight: 700; white-space: nowrap; }
.rlv-th-ev-meta             { font-size: 0.68rem; color: var(--color-text-muted); margin-top: 0.1rem; }
.rlv-th-moy, .rlv-td-moy   {
  text-align: center;
  min-width: 75px;
  border-left: 2px solid var(--color-primary);
  background: rgba(0,168,107,.06);
  color: var(--color-primary);
}
.rlv-row { transition: background .1s; }
.rlv-row:hover { background: rgba(0,168,107,.04); }
.rlv-td-eleve { padding: 0.55rem 0.75rem; }
.rlv-eleve-nom      { font-weight: 600; font-size: 0.9rem; }
.rlv-eleve-matricule { font-size: 0.72rem; color: var(--color-text-muted); font-family: var(--font-mono); margin-top: 0.1rem; }
.rlv-note-good { background: rgba(39,174,96,.07); }
.rlv-note-bad  { background: rgba(231,76,60,.07); }
.rlv-note-abs  { background: rgba(231,76,60,.07); }
.rlv-note-val-good { font-weight: 700; color: #27ae60; font-size: 0.9rem; }
.rlv-note-val-bad  { font-weight: 700; color: #e74c3c; font-size: 0.9rem; }
.rlv-note-val-abs  { color: #e74c3c; font-weight: 700; font-size: 0.78rem; letter-spacing: 0.03em; }
.rlv-note-sub      { font-size: 0.65rem; color: var(--color-text-muted); margin-top: 0.05rem; }
.rlv-note-empty    { color: var(--color-text-muted); opacity: 0.35; font-size: 0.85rem; }
.rlv-moy-good      { color: #27ae60; font-weight: 700; font-size: 0.95rem; padding: 0.55rem 0.5rem; display: block; }
.rlv-moy-bad       { color: #e74c3c; font-weight: 700; font-size: 0.95rem; padding: 0.55rem 0.5rem; display: block; }
.rlv-moy-est       { color: var(--color-text-muted); font-weight: 600; font-size: 0.88rem; padding: 0.55rem 0.5rem; display: block; }
.rlv-moy-empty     { opacity: 0.25; padding: 0.55rem 0.5rem; display: block; }
.rlv-rang-val      { font-weight: 700; color: var(--color-text-primary); }
.rlv-rang-medal    { font-size: 1rem; }

/* Pied de tableau */
.rlv-tfoot-row     { border-top: 2px solid var(--color-border); background: rgba(var(--ink), .02); }
.rlv-tfoot-label   { padding: 0.45rem 0.75rem; font-size: 0.72rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.06em; color: var(--color-text-muted); }
.rlv-tfoot-avg     { text-align: center; font-size: 0.8rem; font-weight: 700; color: var(--color-text-primary); padding: 0.45rem 0.4rem; }
.rlv-tfoot-avg-good { color: #27ae60; }
.rlv-tfoot-avg-bad  { color: #e74c3c; }
.rlv-tfoot-count   { text-align: center; font-size: 0.75rem; color: var(--color-text-muted); padding: 0.35rem 0.4rem 0.5rem; }

/* Légende */
.rlv-legend        { display: flex; gap: 1rem; flex-wrap: wrap; margin-top: 0.75rem; font-size: 0.78rem; color: var(--color-text-muted); }
.rlv-legend-item   { display: inline-flex; align-items: center; gap: 0.35rem; }
.rlv-legend-dot    { display: inline-block; width: 10px; height: 10px; border-radius: 2px; }
.rlv-legend-dot-good { background: rgba(39,174,96,.2); }
.rlv-legend-dot-bad  { background: rgba(231,76,60,.2); }
.rlv-legend-abs    { color: #e74c3c; font-weight: 700; font-size: 0.7rem; }

/* ── Relevé v2 — Stepper avec connecteurs ── */
.rlv-step-head  { display: flex; align-items: center; margin-bottom: .45rem; }
.rlv-step-dot   {
  width: 1.5rem; height: 1.5rem; border-radius: 50%;
  display: inline-flex; align-items: center; justify-content: center;
  font-size: .68rem; font-weight: 800; flex-shrink: 0; line-height: 1;
  background: rgba(var(--ink), .04); border: 1.5px solid rgba(var(--ink), .1);
  color: var(--color-text-muted); transition: background .2s, border-color .2s, color .2s;
}
.rlv-step-line  { flex: 1; height: 1.5px; background: rgba(var(--ink), .08); margin: 0 .3rem; }
.rlv-step-done  .rlv-step-dot  { background: var(--color-primary); border-color: var(--color-primary); color: #fff; }
.rlv-step-done  .rlv-step-line { background: rgba(0,168,107,.35); }
.rlv-step-active .rlv-step-dot { background: rgba(0,168,107,.12); border-color: var(--color-primary); color: var(--color-primary); }
.rlv-step-slabel {
  font-size: .76rem; font-weight: 600; color: var(--color-text-muted); margin-bottom: .3rem;
  display: flex; align-items: center; gap: .35rem;
}
.rlv-step-done   .rlv-step-slabel,
.rlv-step-active .rlv-step-slabel { color: var(--color-text-primary); }
.rlv-step-hint2  { font-size: .65rem; font-weight: 400; color: var(--color-text-muted); }

/* ── Relevé v2 — Bandeau discipline ── */
.rlv-banner-v2 {
  background: linear-gradient(135deg, var(--color-bg-card) 0%, rgba(0,168,107,.035) 100%);
  border: 1px solid var(--color-border);
  border-left: 3px solid var(--color-primary);
  border-radius: var(--radius-lg);
  padding: 1.1rem 1.25rem;
  display: flex; flex-wrap: wrap;
  justify-content: space-between; align-items: flex-start;
  gap: 1rem; margin-bottom: 1rem;
}
.rlv-banner-v2-left { display: flex; align-items: flex-start; gap: .85rem; min-width: 0; flex: 1; }
.rlv-mat-icon {
  width: 2.75rem; height: 2.75rem; border-radius: .55rem; flex-shrink: 0;
  background: rgba(0,168,107,.12);
  display: flex; align-items: center; justify-content: center;
  font-size: 1.15rem; font-weight: 900; color: var(--color-primary);
}
.rlv-banner-v2-title { font-size: 1.05rem; font-weight: 700; color: var(--color-text-primary); line-height: 1.25; }
.rlv-banner-v2-sub   { font-size: .78rem; color: var(--color-text-muted); margin-top: .18rem; }
.rlv-saisie-track    { height: 3px; background: rgba(var(--ink), .06); border-radius: var(--radius-full); overflow: hidden; margin-top: .6rem; max-width: 14rem; }
.rlv-saisie-fill     { height: 100%; background: var(--color-primary); border-radius: var(--radius-full); transition: width .4s ease; }

/* ── Relevé v2 — Chips de statistiques ── */
.rlv-chips       { display: flex; gap: .45rem; flex-wrap: wrap; align-items: flex-start; }
.rlv-chip        {
  display: flex; flex-direction: column; align-items: center; text-align: center;
  padding: .35rem .7rem; border-radius: var(--radius-md);
  background: rgba(var(--ink), .04); border: 1px solid var(--color-border);
  min-width: 3.25rem; flex-shrink: 0;
}
.rlv-chip-val    { font-size: .92rem; font-weight: 800; color: var(--color-text-primary); line-height: 1; }
.rlv-chip-lbl    { font-size: .58rem; text-transform: uppercase; letter-spacing: .05em; color: var(--color-text-muted); margin-top: .15rem; }
.rlv-chip-primary .rlv-chip-val { color: var(--color-primary); }
.rlv-chip-good    .rlv-chip-val { color: #27ae60; }
.rlv-chip-bad     .rlv-chip-val { color: #e74c3c; }
.rlv-chip-muted   .rlv-chip-val { opacity: .3; }

/* ── Relevé v2 — Toolbar tableau ── */
.rlv-toolbar {
  display: flex; align-items: center; gap: .75rem;
  padding: .7rem 1rem; border-bottom: 1px solid var(--color-border);
}
.rlv-toolbar-meta  { margin-left: auto; font-size: .72rem; color: var(--color-text-muted); white-space: nowrap; }
.rlv-toolbar-title { font-size: .8rem; font-weight: 700; color: var(--color-text-secondary); }

/* ── Relevé v2 — Absence pill ── */
.rlv-abs-pill {
  display: inline-block; padding: .1rem .4rem;
  font-size: .65rem; font-weight: 800; letter-spacing: .05em;
  background: rgba(231,76,60,.1); border: 1px solid rgba(231,76,60,.22);
  color: #e74c3c; border-radius: var(--radius-sm);
}

/* ── Relevé v2 — Légende pied de tableau ── */
.rlv-table-footer {
  display: flex; align-items: center; gap: 1rem; flex-wrap: wrap;
  padding: .55rem 1rem; border-top: 1px solid var(--color-border);
  background: rgba(var(--ink), .01);
}
.rlv-legend-pill  { display: inline-flex; align-items: center; gap: .3rem; font-size: .7rem; color: var(--color-text-muted); }
.rlv-legend-sw    { display: inline-block; width: 8px; height: 8px; border-radius: 2px; flex-shrink: 0; }
.rlv-legend-sw-good { background: rgba(39,174,96,.3); }
.rlv-legend-sw-bad  { background: rgba(231,76,60,.3); }

/* ── Relevé v2 — Empty state guidé ── */
.rlv-guide        { display: flex; flex-direction: column; gap: .5rem; }
.rlv-guide-step   {
  display: flex; align-items: center; gap: .75rem;
  padding: .6rem .75rem; border-radius: var(--radius-md);
  background: rgba(var(--ink), .03); border: 1px solid var(--color-border);
}
.rlv-guide-step-done { border-color: rgba(0,168,107,.2); background: rgba(0,168,107,.04); }
.rlv-guide-num    {
  width: 1.6rem; height: 1.6rem; border-radius: 50%; flex-shrink: 0;
  display: flex; align-items: center; justify-content: center;
  font-size: .72rem; font-weight: 800;
  background: rgba(var(--ink), .05); border: 1.5px solid rgba(var(--ink), .1);
  color: var(--color-text-muted);
}
.rlv-guide-step-done .rlv-guide-num { background: var(--color-primary); border-color: var(--color-primary); color: #fff; }
.rlv-guide-text        { font-size: .85rem; color: var(--color-text-muted); }
.rlv-guide-step-done .rlv-guide-text { color: var(--color-text-primary); }
.rlv-guide-step-pending .rlv-guide-num  { opacity: .35; }
.rlv-guide-step-pending .rlv-guide-text { opacity: .45; }
.rlv-guide-value  { margin-left: auto; font-size: .8rem; font-weight: 600; color: var(--color-primary); }
.rlv-table-footer-right { margin-left: auto; }

/* ─────────────────────────────────────────────────────────────── */
/*  FORMULAIRE ÉVALUATION                                           */
/* ─────────────────────────────────────────────────────────────── */

.dash-card-form { max-width: 820px; }

.eval-form-section {
  padding-bottom: var(--space-5);
  border-bottom: 1px solid var(--color-border);
  margin-bottom: var(--space-5);
}
.eval-form-section-last {
  padding-bottom: 0;
  border-bottom: none;
  margin-bottom: 0;
}
.eval-form-section-label {
  font-size: 0.72rem;
  text-transform: uppercase;
  letter-spacing: 0.09em;
  font-weight: 700;
  color: var(--color-text-muted);
  margin-bottom: var(--space-4);
}
.eval-form-section .form-grid-2,
.eval-form-section .form-grid-3 {
  margin-bottom: var(--space-4);
}
.eval-form-section .form-grid-2 .dash-form-group,
.eval-form-section .form-grid-3 .dash-form-group {
  margin-bottom: 0;
}

/* Bloc info en mode édition */
.eval-info-row {
  display: flex;
  gap: var(--space-5);
  flex-wrap: wrap;
}
.eval-info-item { flex: 1; min-width: 120px; }
.eval-info-label {
  font-size: 0.7rem;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--color-text-muted);
  font-weight: 600;
  margin-bottom: 3px;
}
.eval-info-value {
  font-size: 0.9375rem;
  font-weight: 700;
  color: var(--color-text-primary);
}
.eval-info-statut { color: var(--color-primary); }

/* Pied du formulaire */
.eval-form-actions {
  display: flex;
  gap: 0.75rem;
  justify-content: flex-end;
  margin-top: var(--space-5);
  padding-top: var(--space-4);
  border-top: 1px solid var(--color-border);
}

/* ─────────────────────────────────────────────────────────────── */
/*  FORMULAIRE ÉVALUATION v3 — ev-*                                */
/* ─────────────────────────────────────────────────────────────── */

.ev-wrapper { max-width: 1080px; margin: 0 auto; }

/* Layout deux colonnes : form + sidebar */
.ev-layout {
  display: grid;
  grid-template-columns: 1fr 252px;
  gap: 1.25rem;
  align-items: start;
}

/* Barre d'info contextuelle (mode édition) */
.ev-info-bar {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1px;
  background: var(--color-border);
  border-bottom: 1px solid var(--color-border);
  overflow: hidden;
}
.ev-info-cell {
  display: flex;
  flex-direction: column;
  gap: 3px;
  padding: 0.875rem 1.5rem;
  background: var(--color-bg-card);
}
.ev-info-lbl {
  font-size: 0.68rem;
  text-transform: uppercase;
  letter-spacing: 0.09em;
  font-weight: 700;
  color: var(--color-text-muted);
}
.ev-info-val {
  font-size: 0.9rem;
  font-weight: 700;
  color: var(--color-text-primary);
}
.ev-info-val-green { color: var(--color-primary); }

/* Corps de section (fields zone) */
.ev-sec-body {
  padding: 1.25rem 1.5rem;
  border-bottom: 1px solid var(--color-border);
}
.ev-sec-body .form-group { margin-bottom: 1rem; }
.ev-sec-body .form-group:last-child { margin-bottom: 0; }
.ev-sec-body .form-grid-2,
.ev-sec-body .form-grid-3 { margin-bottom: 1rem; }
.ev-sec-body .form-grid-2 .form-group,
.ev-sec-body .form-grid-3 .form-group { margin-bottom: 0; }
.ev-sec-body-last { border-bottom: none; }

/* Hint sous un champ de formulaire */
.form-error {
  margin: var(--space-1) 0 0;
  font-size: 0.8rem;
  font-weight: 600;
  color: var(--color-danger, #DC2626);
}
.form-hint {
  font-size: 0.75rem;
  color: var(--color-text-muted);
  margin-top: 0.3rem;
}

/* Pied du formulaire */
.ev-form-footer {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 0.75rem;
  padding: 1rem 1.5rem;
  border-top: 1px solid var(--color-border);
}

/* ── Sélecteur statut visuel (radio cards) ── */
.ev-statut-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 0.5rem;
}
.ev-statut-item { position: relative; }
.ev-statut-item input[type="radio"] {
  position: absolute;
  opacity: 0;
  width: 0;
  height: 0;
  pointer-events: none;
}
.ev-statut-card {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.35rem;
  padding: 0.7rem 0.4rem;
  border-radius: 10px;
  border: 2px solid var(--color-border);
  background: var(--color-bg-input);
  cursor: pointer;
  font-size: 0.73rem;
  font-weight: 600;
  color: var(--color-text-muted);
  transition: all 0.15s;
  text-align: center;
  line-height: 1.2;
  user-select: none;
}
.ev-statut-card:hover {
  border-color: rgba(var(--ink), 0.15);
  color: var(--color-text-secondary);
  background: var(--color-bg-hover);
}
.ev-statut-card svg { flex-shrink: 0; }

/* État sélectionné par type */
.ev-statut-planifiee  input:checked ~ .ev-statut-card { border-color: #3b82f6; background: rgba(59,130,246,0.10); color: #3b82f6; }
.ev-statut-en_cours   input:checked ~ .ev-statut-card { border-color: var(--color-primary); background: var(--color-primary-ambient); color: var(--color-primary); }
.ev-statut-terminee   input:checked ~ .ev-statut-card { border-color: #00C07A; background: rgba(0,192,122,0.10); color: #00C07A; }
.ev-statut-annulee    input:checked ~ .ev-statut-card { border-color: #FF6B7A; background: rgba(220,53,69,0.10); color: #FF6B7A; }

/* ── Sidebar aide ── */
.ev-tip-row {
  display: flex;
  flex-direction: column;
  gap: 2px;
  padding: 0.6rem 1.25rem;
  border-bottom: 1px solid var(--color-border);
  font-size: 0.8rem;
}
.ev-tip-row:last-child { border-bottom: none; }
.ev-tip-key { font-weight: 600; color: var(--color-text-primary); }
.ev-tip-val { color: var(--color-text-muted); line-height: 1.4; }

/* Responsive */
@media (max-width: 900px) {
  .ev-layout { grid-template-columns: 1fr; }
  .ev-statut-grid { grid-template-columns: repeat(2, 1fr); }
}

/* ─────────────────────────────────────────────────────────────── */
/*  PROFIL ÉLÈVE — elv-*                                           */
/* ─────────────────────────────────────────────────────────────── */

.elv-avatar {
  width: 3rem;
  height: 3rem;
  border-radius: 50%;
  background: var(--color-primary-ambient);
  border: 2px solid var(--color-primary-dark);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.1rem;
  font-weight: 700;
  color: var(--color-primary);
  letter-spacing: 0.02em;
  flex-shrink: 0;
}

/* Bande d'info rapide */
.elv-infobar {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 1px;
  background: var(--color-border);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  overflow: hidden;
  margin-bottom: 1.25rem;
}
.elv-infobar-item {
  background: var(--color-bg-card);
  padding: 0.75rem 1rem;
  display: flex;
  flex-direction: column;
  gap: 0.2rem;
}
.elv-infobar-label {
  font-size: 0.65rem;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--color-text-muted);
  font-weight: 600;
}
.elv-infobar-val {
  font-size: 0.875rem;
  font-weight: 600;
  color: var(--color-text-primary);
}

/* Mise en page 2 colonnes */
.elv-layout {
  display: grid;
  grid-template-columns: 270px 1fr;
  gap: 1.25rem;
  align-items: start;
}

/* Sous-titre de section dans une carte */
.elv-shd {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0.75rem 1.25rem;
  border-bottom: 1px solid var(--color-border);
}
.elv-shd-title {
  font-size: 0.8rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.07em;
  color: var(--color-text-secondary);
}
.elv-shd-sub {
  font-size: 0.75rem;
  color: var(--color-text-muted);
}

/* Champs sidebar */
.elv-fields { padding: 1rem 1.25rem; display: flex; flex-direction: column; gap: 0.5rem; }
.elv-field  { display: flex; align-items: baseline; gap: 0.5rem; }
.elv-field-k {
  font-size: 0.7rem;
  text-transform: uppercase;
  letter-spacing: 0.07em;
  color: var(--color-text-muted);
  font-weight: 600;
  min-width: 80px;
  flex-shrink: 0;
}
.elv-field-v {
  font-size: 0.875rem;
  color: var(--color-text-primary);
  font-weight: 500;
}

/* Blocs parents */
.elv-parents { padding: 1rem 1.25rem; display: flex; flex-direction: column; gap: 0.875rem; }
.elv-parent-item { display: flex; flex-direction: column; gap: 0.15rem; }
.elv-parent-role {
  font-size: 0.65rem;
  text-transform: uppercase;
  letter-spacing: 0.07em;
  color: var(--color-text-muted);
  font-weight: 600;
}
.elv-parent-name {
  font-size: 0.875rem;
  font-weight: 600;
  color: var(--color-text-primary);
}
.elv-parent-prof {
  font-size: 0.75rem;
  color: var(--color-text-secondary);
}

/* Bloc tuteur mis en valeur */
.elv-tuteur {
  margin: 0 1.25rem 1rem;
  background: var(--color-primary-ambient);
  border: 1px solid rgba(0,168,107,0.2);
  border-radius: var(--radius-md);
  padding: 0.75rem 1rem;
  display: flex;
  flex-direction: column;
  gap: 0.2rem;
}
.elv-tuteur-role {
  font-size: 0.65rem;
  text-transform: uppercase;
  letter-spacing: 0.07em;
  color: var(--color-primary);
  font-weight: 700;
}
.elv-tuteur-name {
  font-size: 0.9rem;
  font-weight: 700;
  color: var(--color-text-primary);
}
.elv-tuteur-phone {
  font-size: 0.8rem;
  color: var(--color-primary);
  font-weight: 600;
}
.elv-tuteur-addr {
  font-size: 0.75rem;
  color: var(--color-text-muted);
  font-style: italic;
}

/* Grille documents */
.elv-docs-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
  gap: 0.75rem;
  padding: 1rem;
}
.elv-doc {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  background: var(--color-bg-hover);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  padding: 0.75rem 1rem;
  text-decoration: none;
  color: inherit;
  transition: all 0.15s ease;
}
.elv-doc:hover {
  border-color: rgba(0,168,107,0.3);
  background: rgba(0,168,107,0.06);
}
.elv-doc-off {
  opacity: 0.45;
  pointer-events: none;
}
.elv-doc-icon {
  width: 36px;
  height: 36px;
  border-radius: var(--radius-sm);
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}
.elv-doc-icon-green { background: rgba(0,168,107,0.15); color: var(--color-primary); }
.elv-doc-icon-blue  { background: rgba(23,162,184,0.15); color: #17A2B8; }
.elv-doc-icon-gold  { background: rgba(245,166,35,0.15); color: #F5A623; }
.elv-doc-label {
  font-size: 0.875rem;
  font-weight: 600;
  color: var(--color-text-primary);
}
.elv-doc-sub {
  font-size: 0.7rem;
  color: var(--color-text-muted);
}

/* Ligne abandon atténuée */
.elv-row-abandon { opacity: 0.45; }

/* Utilitaires complémentaires */
.text-accent  { color: var(--color-primary); }
.dash-btn-sm  { padding: .35rem .75rem; font-size: .75rem; }

/* Modificateurs couleur pour btn-icon */
.btn-icon-success:hover { border-color: rgba(0,168,107,0.35);  color: var(--color-primary);      background: rgba(0,168,107,0.10); }
.btn-icon-info:hover    { border-color: rgba(23,162,184,0.35); color: #17A2B8;                   background: rgba(23,162,184,0.10); }
.btn-icon-primary:hover { border-color: rgba(0,168,107,0.35);  color: var(--color-primary-light); background: rgba(0,168,107,0.08); }
.btn-icon-gold:hover    { border-color: rgba(245,166,35,0.35); color: #F5A623;                   background: rgba(245,166,35,0.08); }

/* ─────────────────────────────────────────────────────────────── */
/*  PAIEMENT — pai-*                                               */
/* ─────────────────────────────────────────────────────────────── */

.pai-wrapper { max-width: 68rem; margin: 0 auto; }

/* En-tête de section dans une carte (icône + titre / action) */
.pai-sec-hd {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 1rem 1.5rem;
  border-bottom: 1px solid var(--color-border);
}
.pai-sec-hd-left { display: flex; align-items: center; gap: 0.75rem; }
.pai-sec-icon {
  width: 34px;
  height: 34px;
  border-radius: 9px;
  background: rgba(0,168,107,0.13);
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  color: var(--color-primary);
}
.pai-sec-title { font-size: 0.9375rem; font-weight: 700; color: var(--color-text-primary); }
.pai-sec-sub   { font-size: 0.78rem; color: var(--color-text-muted); margin: 2px 0 0; }

/* Corps de section (formulaire) */
.pai-body {
  padding: 1.5rem;
  display: flex;
  flex-direction: column;
  gap: 1.2rem;
}
.pai-body .form-group { margin: 0; }

/* Alerte globale erreurs */
.pai-alert-danger {
  background: rgba(220,53,69,0.10);
  border: 1px solid rgba(220,53,69,0.35);
  border-radius: 10px;
  padding: 0.9rem 1.25rem;
  margin-bottom: 1.25rem;
  display: flex;
  gap: 0.75rem;
  align-items: flex-start;
}
.pai-alert-danger svg { flex-shrink: 0; margin-top: 1px; }
.pai-alert-danger p   { color: #F87171; font-size: 0.875rem; margin: 0 0 2px; }

/* Alerte dépassement */
.pai-alert-surpaye {
  margin: 0 1.5rem;
  padding: 0.75rem 1rem;
  background: rgba(220,53,69,0.10);
  border: 1px solid rgba(220,53,69,0.35);
  border-radius: 8px;
  display: none;
  align-items: center;
  gap: 0.6rem;
  color: #F87171;
  font-size: 0.845rem;
  font-weight: 500;
}
.pai-alert-surpaye svg { flex-shrink: 0; }

/* Badge statut élève */
.pai-statut-wrap  { display: none; margin-top: 0.5rem; align-items: center; gap: 0; }
.pai-statut-lbl   { font-size: 0.75rem; color: var(--color-text-muted); margin-right: 0.4rem; }
.pai-statut-badge {
  display: inline-block;
  padding: 2px 10px;
  border-radius: 5px;
  font-size: 0.78rem;
  font-weight: 600;
  color: #fff;
}

/* Bouton "Ajouter une rubrique" */
.pai-btn-add {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 0.45rem 1rem;
  border-radius: 7px;
  border: 1px solid var(--color-primary);
  color: var(--color-primary);
  background: rgba(0,168,107,0.08);
  font-size: 0.82rem;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.15s;
  letter-spacing: 0.02em;
  white-space: nowrap;
}
.pai-btn-add:disabled            { cursor: not-allowed; opacity: 0.45; }
.pai-btn-add:not(:disabled):hover { background: rgba(0,168,107,0.18); }

/* États vides */
.pai-state { text-align: center; padding: 2.5rem 1rem; }
.pai-state-icon {
  width: 52px;
  height: 52px;
  border-radius: 14px;
  background: rgba(74,104,128,0.12);
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 0 auto 0.9rem;
}
.pai-state-icon-warn { background: rgba(251,191,36,0.12); }
.pai-state-text      { color: var(--color-text-muted); font-size: 0.875rem; margin-bottom: 0.6rem; }
.pai-state-link      { font-size: 0.82rem; color: var(--color-primary); text-decoration: underline; }

/* Spinner de chargement */
.pai-spinner {
  width: 28px;
  height: 28px;
  border: 2px solid rgba(0,168,107,0.3);
  border-top-color: var(--color-primary);
  border-radius: 50%;
  animation: spin 0.7s linear infinite;
  margin: 0 auto 0.75rem;
}
@keyframes spin { to { transform: rotate(360deg); } }

/* Table rubriques — en-tête */
.pai-tbl-head {
  display: grid;
  grid-template-columns: 2fr 0.9fr 1fr 0.9fr 0.9fr 1.1fr 44px;
  gap: 0.5rem;
  padding: 0.55rem 0.9rem;
  background: rgba(0,168,107,0.07);
  border: 1px solid var(--color-border);
  border-radius: 10px 10px 0 0;
}
.pai-tbl-col-lbl {
  font-size: 0.72rem;
  font-weight: 700;
  color: var(--color-text-muted);
  text-transform: uppercase;
  letter-spacing: 0.06em;
}
.pai-tbl-col-lbl-r { text-align: right; }
.pai-tbl-body {
  border: 1px solid var(--color-border);
  border-top: none;
  border-radius: 0 0 10px 10px;
  overflow: hidden;
}

/* Ligne rubrique (dans <template>) */
.rubrique-ligne {
  display: grid;
  grid-template-columns: 2fr 0.9fr 1fr 0.9fr 0.9fr 1.1fr 44px;
  gap: 0.5rem;
  padding: 0.6rem 0.9rem;
  align-items: center;
  border-top: 1px solid var(--color-border);
  background: var(--color-bg-card);
  transition: background 0.12s;
}
.pai-inp-sm         { font-size: 0.84rem; padding-top: 0.4rem; padding-bottom: 0.4rem; }
.pai-inp-right      { text-align: right; }
.pai-inp-readonly   { background: rgba(0,0,0,0.35);   color: var(--color-text-secondary); cursor: not-allowed; }
.pai-inp-readonly-g { background: rgba(0,60,35,0.35); color: #6ee7b7;                    cursor: not-allowed; }
.pai-inp-readonly-r { background: rgba(100,10,10,0.30); color: #fca5a5;                  cursor: not-allowed; }

/* Bouton supprimer ligne */
.pai-btn-sup {
  width: 34px;
  height: 34px;
  border-radius: 7px;
  border: 1px solid rgba(220,53,69,0.25);
  background: rgba(220,53,69,0.07);
  color: #F87171;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: all 0.15s;
  padding: 0;
  flex-shrink: 0;
  margin: 0 auto;
}
.pai-btn-sup:hover { background: rgba(220,53,69,0.18); }

/* Pied de formulaire (total + actions) */
.pai-footer {
  padding: 1.1rem 1.5rem;
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 1rem;
}
.pai-total-left { display: flex; align-items: center; gap: 1.75rem; }
.pai-total-lbl  {
  font-size: 0.72rem;
  color: var(--color-text-muted);
  text-transform: uppercase;
  letter-spacing: 0.06em;
  margin-bottom: 3px;
}
.pai-total-num  { display: flex; align-items: baseline; gap: 0.35rem; }
.pai-total-val  { font-size: 1.9rem; font-weight: 700; transition: color 0.2s; }
.pai-total-unit { font-size: 0.82rem; font-weight: 500; color: var(--color-text-muted); }
.pai-total-sep  { width: 1px; height: 44px; background: var(--color-border); flex-shrink: 0; }
.pai-total-count { font-size: 0.85rem; color: var(--color-text-muted); }
.pai-footer-actions { display: flex; align-items: center; gap: 0.75rem; }

/* Recherche dans le select inscription */
.pai-search-wrap { position: relative; margin-bottom: 0.5rem; }
.pai-search-icon {
  position: absolute;
  left: 0.65rem;
  top: 50%;
  transform: translateY(-50%);
  color: var(--color-text-muted);
  pointer-events: none;
}
.pai-search-input {
  width: 100%;
  padding: 0.5rem 0.875rem 0.5rem 2.2rem;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  background: var(--color-bg-input);
  color: var(--color-text-primary);
  font-family: var(--font-interface);
  font-size: 0.875rem;
  outline: none;
  transition: border-color 0.15s;
  box-sizing: border-box;
}
.pai-search-input:focus { border-color: var(--color-border-focus); }
.pai-search-input::placeholder { color: var(--color-text-muted); }

/* Recherche serveur d'élève (formulaire d'encaissement, HTMX) */
.pai-resultats-wrap { margin-top: 0.35rem; }
.pai-resultats {
  list-style: none;
  margin: 0;
  padding: 0;
  max-height: 18rem;
  overflow-y: auto;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  background: var(--color-bg-input);
}
.pai-resultats li + li { border-top: 1px solid var(--color-border); }
.pai-resultat {
  width: 100%;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 0.1rem;
  padding: 0.5rem 0.875rem;
  background: transparent;
  border: 0;
  text-align: left;
  cursor: pointer;
  color: var(--color-text-primary);
  font: inherit;
}
.pai-resultat:hover,
.pai-resultat:focus-visible { background: rgba(0,168,107,0.09); outline: none; }
.pai-resultat-nom  { font-weight: 600; font-size: 0.9rem; }
.pai-resultat-meta { font-size: 0.75rem; color: var(--color-text-muted); }
.pai-resultats-hint {
  font-size: 0.78rem;
  color: var(--color-text-muted);
  padding: 0.4rem 0.25rem;
}
.pai-selection {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.75rem;
  padding: 0.55rem 0.875rem;
  border: 1.5px solid rgba(0,168,107,0.5);
  border-radius: var(--radius-md);
  background: rgba(0,168,107,0.07);
}
.pai-selection-libelle { font-weight: 600; font-size: 0.9rem; color: var(--color-text-primary); }

/* Carte élève (après sélection inscription) */
.pai-eleve-card {
  display: none;
  background: var(--color-bg-hover);
  border: 1px solid rgba(0,168,107,0.2);
  border-radius: var(--radius-md);
  padding: 0.875rem 1rem;
  gap: 0.875rem;
  align-items: flex-start;
  margin-top: 0.625rem;
}
.pai-eleve-avatar {
  width: 2.5rem;
  height: 2.5rem;
  border-radius: 50%;
  background: var(--color-primary-ambient);
  border: 2px solid var(--color-primary-dark);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 0.9rem;
  font-weight: 700;
  color: var(--color-primary);
  flex-shrink: 0;
  letter-spacing: 0.02em;
}
.pai-eleve-body       { flex: 1; min-width: 0; }
.pai-eleve-name       { font-size: 0.9375rem; font-weight: 700; color: var(--color-text-primary); }
.pai-eleve-meta       { font-size: 0.78rem; color: var(--color-text-muted); margin-top: 2px; }
.pai-sit-row          { display: flex; gap: 1.25rem; margin-top: 0.6rem; flex-wrap: wrap; }
.pai-sit-item         { display: flex; flex-direction: column; gap: 1px; }
.pai-sit-lbl          { font-size: 0.65rem; text-transform: uppercase; letter-spacing: 0.07em; color: var(--color-text-muted); font-weight: 600; }
.pai-sit-val          { font-size: 0.82rem; font-weight: 700; color: var(--color-text-primary); }
.pai-sit-val-green    { color: var(--color-primary); }
.pai-sit-val-red      { color: #FF6B7A; }

/* État erreur API (configuration manquante) */
.pai-state-error {
  display: flex;
  text-align: center;
  padding: 2.25rem 1.5rem;
  flex-direction: column;
  align-items: center;
  gap: 0.6rem;
}
.pai-state-error-icon {
  width: 52px;
  height: 52px;
  border-radius: 14px;
  background: rgba(220,53,69,0.12);
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 0 auto 0.25rem;
}
.pai-state-error-title { font-size: 0.9rem; font-weight: 700; color: #F87171; }
.pai-state-error-msg   { font-size: 0.8rem; color: var(--color-text-muted); max-width: 36rem; line-height: 1.55; }
.pai-state-error-link  { font-size: 0.82rem; color: var(--color-primary); text-decoration: underline; margin-top: 0.25rem; }

/* Montant-dû cliquable pour auto-remplir le versé */
.pai-inp-clickable {
  cursor: pointer !important;
  transition: border-color 0.15s, background 0.15s !important;
}
.pai-inp-clickable:hover {
  border-color: rgba(0,168,107,0.45) !important;
  background: rgba(0,168,107,0.09) !important;
  color: var(--color-primary) !important;
}

/* ─────────────────────────────────────────────────────────────── */
/*  8. RESPONSIVE                                                   */
/* ─────────────────────────────────────────────────────────────── */

@media (max-width: 768px) {
  .sidebar,
  .sb-modern {
    width: 260px;
    overflow: hidden;
    position: fixed;
    z-index: 40;
    transition: transform 0.25s ease;
    transform: translateX(-100%);
  }

  .sidebar.open,
  .sb-modern.open {
    transform: translateX(0);
  }

  .dash-grid,
  .dash-grid-2col,
  .dash-features-grid,
  .form-grid-2,
  .form-grid-3,
  .outils-audit-grid,
  .edt-form-grid,
  .note-stats {
    grid-template-columns: 1fr;
  }

  .stats-grid {
    grid-template-columns: 1fr 1fr;
  }

  .ns-desktop { display: none !important; }
  .ns-mobile  { display: block; }

  .modules-grid {
    grid-template-columns: 1fr;
  }

  .params-grid {
    grid-template-columns: 1fr;
  }

  .page-header {
    flex-direction: column;
    align-items: flex-start;
    justify-content: flex-start;
  }

  /* En colonne, le titre reprend sa hauteur naturelle (la base de 20rem vaut pour la ligne unique). */
  .page-header > div:first-child {
    flex: 0 1 auto;
  }

  /* Titre sur plusieurs lignes si besoin ; actions en grille souple sous le titre. */
  .page-title {
    white-space: normal;
  }

  .page-actions {
    width: 100%;
    justify-content: flex-start;
    gap: var(--space-2);
  }

  /* Actions secondaires (exports, import) : compactes, plusieurs par ligne. */
  .page-actions > a.btn-secondary,
  .page-actions > button.btn-secondary,
  .page-actions > form > button.btn-secondary {
    flex: 0 1 auto;
    min-width: 0;
    padding: 10px 0.85rem;
    justify-content: center;
  }

  /* Action principale : elle ne se comprime pas et partage la dernière ligne avec les restes. */
  .page-actions > a.btn-primary,
  .page-actions > button.btn-primary,
  .page-actions > form > button.btn-primary {
    flex: 0 0 auto;
    justify-content: center;
  }

  .page-actions > form { flex: 0 1 auto; }

  .page-actions > form > button { width: 100%; }

  .content {
    padding: var(--space-4);
  }
}


/* ════════════════════════════════════════════════════════════════
   TIMELINE PARCOURS SCOLAIRE
   ════════════════════════════════════════════════════════════════ */

/* Conteneur principal */
.tl-container {
  position: relative;
  padding-left: 2.8rem;
}

/* Ligne verticale */
.tl-line {
  position: absolute;
  left: 1rem;
  top: .6rem;
  bottom: .6rem;
  width: 2px;
  background: var(--color-border);
  border-radius: 1px;
}

/* Nœud de la timeline */
.tl-node {
  position: relative;
}

/* Pastille */
.tl-dot {
  position: absolute;
  left: -2.05rem;
  top: .6rem;
  width: 1.1rem;
  height: 1.1rem;
  border-radius: 50%;
  border: 2.5px solid var(--color-bg);
  z-index: 1;
}

.tl-dot-active       { background: var(--color-primary);  box-shadow: 0 0 0 2px var(--color-primary); }
.tl-dot-redoublement { background: #F5A623;                box-shadow: 0 0 0 2px rgba(245,166,35,.3); }
.tl-dot-abandon      { background: #FF6B7A;                box-shadow: 0 0 0 2px rgba(220,53,69,.3); }
.tl-dot-diplome      { background: #17A2B8;                box-shadow: 0 0 0 2px rgba(23,162,184,.3); }
.tl-dot-default      { background: #94a3b8;                box-shadow: 0 0 0 2px rgba(148,163,184,.2); }

/* Carte d'inscription */
.tl-card {
  background: var(--color-surface, var(--color-bg-card));
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  padding: var(--space-3) var(--space-4);
  margin-bottom: var(--space-2);
  transition: border-color .2s;
}

.tl-card-active {
  border-color: var(--color-primary);
  border-width: 1.5px;
}

/* En-tête de la carte */
.tl-card-header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: var(--space-2);
}

/* Année scolaire */
.tl-year {
  font-size: .72rem;
  text-transform: uppercase;
  letter-spacing: .07em;
  color: var(--color-text-muted);
  font-weight: 600;
  margin-bottom: 2px;
}

/* Nom de classe */
.tl-class {
  font-size: 1.05rem;
  font-weight: 700;
  color: var(--color-text);
}

.tl-class-cycle {
  font-size: .75rem;
  font-weight: 400;
  color: var(--color-text-muted);
}

/* Groupe de badges */
.tl-badges {
  display: flex;
  gap: var(--space-1);
  flex-wrap: wrap;
  align-items: flex-start;
}

/* Infos secondaires */
.tl-meta {
  display: flex;
  gap: var(--space-3);
  flex-wrap: wrap;
  font-size: .8rem;
  color: var(--color-text-muted);
  margin-top: var(--space-2);
}

.tl-meta-warn   { color: #F5A623; }
.tl-meta-italic { font-style: italic; }

/* Événement manuel */
.tl-event {
  margin-top: var(--space-2);
  padding: var(--space-2) var(--space-3);
  background: rgba(var(--ink), .03);
  border-radius: var(--radius-sm);
  border-left: 3px solid var(--color-border);
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: var(--space-2);
}

.tl-event-passage          { border-left-color: var(--color-primary); }
.tl-event-redoublement     { border-left-color: #F5A623; }
.tl-event-transfert_entrant{ border-left-color: #17A2B8; }
.tl-event-transfert_sortant{ border-left-color: #A259FF; }
.tl-event-abandon          { border-left-color: #FF6B7A; }
.tl-event-diplome          { border-left-color: #17A2B8; }
.tl-event-autre            { border-left-color: var(--color-text-muted); }

.tl-event-label {
  font-size: .72rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .05em;
  color: var(--color-text-secondary);
}

.tl-event-detail { font-size: .8rem; color: var(--color-text-muted); }
.tl-event-note   { font-size: .8rem; color: var(--color-text-muted); font-style: italic; margin-top: 2px; }
.tl-event-by     { font-size: .72rem; color: var(--color-text-muted); margin-top: 2px; }

/* Connecteur entre nœuds */
.tl-connector {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  padding: var(--space-1) 0 var(--space-1) var(--space-2);
  margin-bottom: var(--space-2);
}

.tl-connector-icon { font-size: 1rem; }
.tl-connector-null { font-size: .78rem; color: var(--color-text-muted); font-style: italic; }

/* Statut final */
.tl-final {
  margin-top: var(--space-2);
  padding: var(--space-2) var(--space-3);
  border-radius: var(--radius-sm);
  border-left: 3px solid;
  font-size: .8rem;
  font-weight: 600;
}

.tl-final-abandon   { background: rgba(220,53,69,.08);   border-left-color: #FF6B7A;  color: #FF6B7A; }
.tl-final-diplome   { background: rgba(23,162,184,.08);  border-left-color: #17A2B8;  color: #17A2B8; }
.tl-final-transfert { background: rgba(162,89,255,.08);  border-left-color: #A259FF;  color: #A259FF; }

/* Établissement d'origine (stat-card texte long) */
.tl-stat-origine {
  font-size: 1rem;
  font-weight: 600;
  color: var(--color-text-primary);
  line-height: 1.3;
}

/* Formulaire événement */
.tl-form {
  padding: 0 var(--space-4) var(--space-4);
}

.tl-form-subtitle {
  font-size: .78rem;
  color: var(--color-text-muted);
  margin: 4px 0 0;
}

.tl-form-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  gap: var(--space-3);
}

.tl-form-full {
  grid-column: 1 / -1;
}

.tl-form-actions {
  display: flex;
  justify-content: flex-end;
}

/* Stat card pour établissement d'origine */
.tl-origin-card {
  flex: 2;
  min-width: 200px;
}


/* ════════════════════════════════════════════════════════════════
   FORMULAIRE INSCRIPTION ANNUELLE
   ════════════════════════════════════════════════════════════════ */

/* Carte identité élève (bandeau haut du formulaire) */
.insc-eleve-card {
  display: flex;
  align-items: center;
  gap: var(--space-4);
  padding: var(--space-4) var(--space-5);
  background: rgba(0,168,107,.06);
  border: 1px solid rgba(0,168,107,.18);
  border-radius: var(--radius-md);
  margin-bottom: var(--space-6);
}

.insc-eleve-avatar {
  width: 48px;
  height: 48px;
  border-radius: var(--radius-full);
  background: rgba(0,168,107,.18);
  color: var(--color-primary-light);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: var(--text-sm);
  font-weight: var(--font-bold);
  flex-shrink: 0;
  letter-spacing: .02em;
  overflow: hidden;
}

.insc-eleve-avatar img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: var(--radius-full);
}

.insc-eleve-name {
  font-weight: var(--font-semibold);
  font-size: var(--text-base);
  color: var(--color-text-primary);
}

.insc-eleve-matricule {
  font-family: var(--font-mono);
  font-size: var(--text-xs);
  color: var(--color-primary);
  margin-top: 3px;
}

/* Section de formulaire */
.insc-section {
  padding-bottom: var(--space-5);
  margin-bottom: var(--space-5);
}

.insc-section-last {
  padding-bottom: 0;
  margin-bottom: 0;
}

/* En-tête de section */
.insc-section-header {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  margin-bottom: var(--space-4);
}

.insc-section-icon {
  color: var(--color-primary);
  display: flex;
  align-items: center;
  flex-shrink: 0;
}

.insc-section-title {
  font-size: var(--text-xs);
  font-weight: var(--font-bold);
  color: var(--color-primary);
  text-transform: uppercase;
  letter-spacing: .08em;
}

/* Ligne de checkbox cliquable */
.insc-checkbox-row {
  display: flex;
  align-items: flex-start;
  gap: var(--space-3);
  padding: var(--space-3) var(--space-4);
  background: rgba(var(--ink), .03);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  cursor: pointer;
  margin-bottom: var(--space-4);
  transition: background .15s, border-color .15s;
}

.insc-checkbox-row:has(input:checked) {
  background: rgba(0,168,107,.07);
  border-color: rgba(0,168,107,.28);
}

.insc-checkbox-row input[type="checkbox"] {
  margin-top: 2px;
  accent-color: var(--color-primary);
  flex-shrink: 0;
  cursor: pointer;
  width: 1rem;
  height: 1rem;
}

.insc-checkbox-label {
  font-size: var(--text-sm);
  font-weight: var(--font-medium);
  color: var(--color-text-primary);
  line-height: 1.4;
}

.insc-checkbox-help {
  font-size: var(--text-xs);
  color: var(--color-text-muted);
  margin-top: 2px;
}

/* Pied de formulaire */
.insc-form-footer {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: var(--space-3);
  padding-top: var(--space-5);
  border-top: 1px solid var(--color-border);
  margin-top: var(--space-5);
}


/* ════════════════════════════════════════════════════════════════
   PAIEMENT — améliorations v2
   ════════════════════════════════════════════════════════════════ */

/* Utilitaire masquage */
.pai-hidden { display: none !important; }

/* Barre de progression paiement (dans la carte élève) */
.pai-progress {
  margin-top: 0.6rem;
}
.pai-progress-track {
  height: 5px;
  background: rgba(var(--ink), .08);
  border-radius: 999px;
  overflow: hidden;
}
.pai-progress-fill {
  height: 100%;
  background: var(--color-primary);
  border-radius: 999px;
  transition: width .4s ease;
  min-width: 0;
}
.pai-progress-meta {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-top: 4px;
}
.pai-progress-pct   { font-size: 0.68rem; color: var(--color-primary); font-weight: 700; }
.pai-progress-reste { font-size: 0.68rem; color: var(--color-text-muted); }

/* Bouton "Tout régler le solde" */
.pai-btn-solde {
  display: none;
  align-items: center;
  gap: 0.4rem;
  padding: 0.38rem 0.85rem;
  border: 1px solid rgba(0,168,107,0.3);
  border-radius: var(--radius-md);
  background: rgba(0,168,107,0.08);
  color: var(--color-primary);
  font-size: 0.8rem;
  font-weight: 600;
  cursor: pointer;
  transition: background .15s, border-color .15s;
  white-space: nowrap;
  flex-shrink: 0;
}
.pai-btn-solde.pai-btn-solde-on { display: inline-flex; }
.pai-btn-solde:hover { background: rgba(0,168,107,0.16); border-color: rgba(0,168,107,0.45); }

/* Actions groupées dans l'en-tête section rubriques */
.pai-sec-hd-actions {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  flex-wrap: wrap;
}

/* Compteur rubriques (dans sous-titre section 2) */
.pai-rubriques-count {
  display: inline-block;
  padding: 1px 7px;
  border-radius: 20px;
  background: rgba(var(--ink), .07);
  border: 1px solid var(--color-border);
  font-size: 0.7rem;
  color: var(--color-text-muted);
  vertical-align: middle;
  margin-left: 4px;
}
.pai-rubriques-count.has-pending {
  background: rgba(0,168,107,0.1);
  border-color: rgba(0,168,107,0.2);
  color: var(--color-primary);
}

/* Bouton supprimer ligne désactivé */
.pai-btn-sup:disabled { opacity: 0.28; cursor: not-allowed; pointer-events: none; }

/* Bouton soumettre désactivé */
#btn-submit:disabled { opacity: 0.5; cursor: not-allowed; }

/* ─────────────────────────────────────────────────────────────── */
/*  SÉLECTION RUBRIQUES (formulaire paiement) — pai-rub-*          */
/* ─────────────────────────────────────────────────────────────── */

/* Conteneur liste */
.pai-rub-list {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
}

/* Carte de base */
.pai-rub-card {
  background: rgba(var(--ink), 0.03);
  border: 1.5px solid var(--color-border);
  border-radius: 10px;
  padding: 0.85rem 1rem;
  cursor: pointer;
  transition: background 0.13s, border-color 0.13s;
  user-select: none;
}
.pai-rub-card:not(.is-soldee):hover {
  background: rgba(0,168,107,0.05);
  border-color: rgba(0,168,107,0.25);
}
.pai-rub-card.is-selected {
  background: rgba(0,168,107,0.07);
  border-color: rgba(0,168,107,0.5);
}
.pai-rub-card.is-soldee {
  opacity: 0.48;
  cursor: default;
}

/* Ligne d'en-tête de carte */
.pai-rub-hd {
  display: flex;
  align-items: center;
  gap: 0.75rem;
}

/* Case à cocher visuelle */
.pai-rub-cb {
  width: 22px;
  height: 22px;
  border-radius: 6px;
  border: 2px solid var(--color-border);
  background: transparent;
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: background 0.13s, border-color 0.13s;
}
.pai-rub-cb svg { display: none; }
.pai-rub-card.is-selected .pai-rub-cb {
  background: var(--color-primary);
  border-color: var(--color-primary);
}
.pai-rub-card.is-selected .pai-rub-cb svg { display: block; }

/* Nom + sous-titre de la rubrique */
.pai-rub-infos {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 2px;
}
.pai-rub-nom {
  font-size: 0.9rem;
  font-weight: 600;
  color: var(--color-text-primary);
  line-height: 1.3;
}
.pai-rub-sub {
  font-size: 0.72rem;
  color: var(--color-text-muted);
}

/* Côté droit — montant restant */
.pai-rub-right {
  flex-shrink: 0;
  text-align: right;
}
.pai-rub-reste-val {
  font-size: 1rem;
  font-weight: 700;
  color: var(--color-text-primary);
}
.pai-rub-fcfa {
  font-size: 0.72rem;
  font-weight: 500;
  color: var(--color-text-muted);
}

/* Badge statut */
.pai-rub-tag {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  font-size: 0.72rem;
  font-weight: 600;
  padding: 3px 8px;
  border-radius: 99px;
}
.pai-rub-tag-soldee {
  background: rgba(100,116,139,0.15);
  color: #94a3b8;
}

/* Barre de progression */
.pai-rub-prog-row {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  margin-top: 0.5rem;
}
.pai-rub-prog {
  flex: 1;
  height: 4px;
  background: rgba(var(--ink), 0.08);
  border-radius: 99px;
  overflow: hidden;
}
.pai-rub-prog-fill {
  height: 100%;
  background: var(--color-primary);
  border-radius: 99px;
  transition: width 0.4s;
}
.pai-rub-card.is-soldee .pai-rub-prog-fill { background: #64748b; }
.pai-rub-pct {
  font-size: 0.68rem;
  color: var(--color-text-muted);
  flex-shrink: 0;
}

/* Section champs dépliable (visible quand is-selected) */
.pai-rub-fields {
  margin-top: 0.85rem;
  padding-top: 0.85rem;
  border-top: 1px solid var(--color-border);
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0.75rem;
  cursor: default;
}
.pai-rub-field-group {
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.pai-rub-field-lbl {
  font-size: 0.75rem;
  font-weight: 600;
  color: var(--color-text-secondary);
}

/* Champ montant avec suffixe FCFA */
.pai-rub-amount-wrap {
  position: relative;
  display: flex;
  align-items: center;
}
.pai-rub-amount { flex: 1; padding-right: 3.2rem; }
.pai-rub-amount-suffix {
  position: absolute;
  right: 0.75rem;
  font-size: 0.75rem;
  font-weight: 600;
  color: var(--color-text-muted);
  pointer-events: none;
}

/* Erreur par carte */
.pai-rub-err {
  display: flex;
  align-items: center;
  gap: 5px;
  grid-column: 1 / -1;
  color: #F87171;
  font-size: 0.75rem;
}
.pai-rub-err-txt { color: #F87171; }

@media (max-width: 540px) {
  .pai-rub-fields { grid-template-columns: 1fr; }
}

/* ─────────────────────────────────────────────────────────────── */
/*  SITUATION FINANCIÈRE ÉLÈVE — sit-*                             */
/* ─────────────────────────────────────────────────────────────── */

.sit-wrapper { max-width: 80rem; margin: 0 auto; }

/* Layout deux colonnes */
.sit-layout {
  display: grid;
  grid-template-columns: 290px 1fr;
  gap: 1.25rem;
  align-items: start;
}

/* Corps padded d'une carte (remplace .p-4 ad-hoc) */
.sit-body { padding: 1rem 1.25rem; }

/* Ligne de stat (Résumé Financier) */
.sit-stat-row {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 0.5rem;
  padding: 0.45rem 0;
  border-bottom: 1px solid var(--color-border);
}
.sit-stat-row:last-of-type { border-bottom: none; }
.sit-stat-lbl { font-size: 0.8rem; color: var(--color-text-secondary); }
.sit-stat-val { font-size: 0.875rem; font-weight: 700; white-space: nowrap; color: var(--color-text-primary); }
.sit-stat-val-green { color: var(--color-primary); }
.sit-stat-val-red   { color: #FF6B7A; }
.sit-stat-val-muted {
  color: var(--color-text-muted);
  text-decoration: line-through;
  font-weight: 400;
  font-size: 0.8rem;
}

/* Barre de progression */
.sit-progress {
  height: 5px;
  border-radius: 3px;
  background: rgba(var(--ink), 0.06);
  overflow: hidden;
  margin: 0.85rem 0 0.3rem;
}
.sit-progress-fill {
  height: 100%;
  border-radius: 3px;
  background: var(--color-primary);
  width: var(--pct, 0%);
  transition: width 0.6s ease;
}
.sit-pct { font-size: 0.72rem; color: var(--color-text-muted); text-align: right; }

/* Total "Reste à payer" */
.sit-total {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 0.5rem;
  padding-top: 0.85rem;
  margin-top: 0.85rem;
  border-top: 1px solid var(--color-border);
}
.sit-total-lbl {
  font-size: 0.72rem;
  font-weight: 700;
  color: var(--color-text-primary);
  text-transform: uppercase;
  letter-spacing: 0.07em;
}
.sit-total-val { font-size: 1.45rem; font-weight: 800; line-height: 1; white-space: nowrap; }
.sit-total-val-green { color: var(--color-primary); }
.sit-total-val-red   { color: #FF6B7A; }

/* Ligne rubrique / bourse */
.sit-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.75rem;
  padding: 0.5rem 0;
  border-bottom: 1px solid var(--color-border);
  font-size: 0.85rem;
}
.sit-row:last-child { border-bottom: none; }
.sit-row-lbl { color: var(--color-text-secondary); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; flex: 1; }
.sit-row-val { font-weight: 700; white-space: nowrap; color: var(--color-text-primary); flex-shrink: 0; }
.sit-row-val-green { color: var(--color-primary); }
.sit-row-val-red   { color: #FF6B7A; }
.sit-row-actions { display: flex; align-items: center; gap: 0.25rem; flex-shrink: 0; }
.sit-row-sub { font-size: 0.72rem; color: var(--color-text-muted); }

/* Ligne info élève */
.sit-info-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0.45rem 0;
  font-size: 0.85rem;
  border-bottom: 1px solid var(--color-border);
}
.sit-info-row:last-child { border-bottom: none; }

/* Icône de section (remplace icon-box) */
.sit-icon {
  width: 34px;
  height: 34px;
  border-radius: 9px;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}
.sit-icon-primary { background: rgba(0,168,107,0.13); color: var(--color-primary); }
.sit-icon-success { background: rgba(0,192,122,0.10); color: #00C07A; }
.sit-icon-danger  { background: rgba(220,53,69,0.10);  color: #FF6B7A; }
.sit-icon-warning { background: rgba(245,166,35,0.10); color: #F5A623; }

/* Réduction / total bourses en bas de section */
.sit-reduction-total {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding-top: 0.6rem;
  margin-top: 0.6rem;
  border-top: 1px solid var(--color-border);
  font-size: 0.83rem;
  font-weight: 600;
}

/* Responsive */
@media (max-width: 900px) {
  .sit-layout { grid-template-columns: 1fr; }
}

/* ─────────────────────────────────────────────────────────────── */
/*  CALENDRIER SCOLAIRE — cal-*                                    */
/* ─────────────────────────────────────────────────────────────── */

/* Layout calendrier + liste latérale */
.cal-layout {
  display: grid;
  grid-template-columns: 1fr 272px;
  gap: 1.25rem;
  align-items: start;
}

/* Barre du dessus */
.cal-top-bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  margin-bottom: 1.25rem;
}
.cal-year-select { min-width: 240px; }

/* Carte principale */
.cal-card {
  background: var(--color-bg-card);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-xl);
  overflow: hidden;
  box-shadow: var(--shadow-card);
}

/* Navigation mois */
.cal-nav {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0.875rem 1.25rem;
  border-bottom: 1px solid var(--color-border);
}
.cal-month-title {
  font-size: 1rem;
  font-weight: 700;
  color: var(--color-text-primary);
  letter-spacing: -0.01em;
}
.cal-nav-btn {
  width: 32px;
  height: 32px;
  border-radius: 8px;
  border: 1px solid var(--color-border);
  background: transparent;
  color: var(--color-text-secondary);
  display: flex;
  align-items: center;
  justify-content: center;
  text-decoration: none;
  transition: all 0.15s;
  flex-shrink: 0;
}
.cal-nav-btn:hover {
  background: var(--color-bg-hover);
  color: var(--color-text-primary);
  border-color: rgba(var(--ink), 0.15);
}

/* En-tête des jours de la semaine */
.cal-days-header {
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  border-bottom: 1px solid var(--color-border);
  background: rgba(0,0,0,0.15);
}
.cal-day-label {
  text-align: center;
  padding: 0.55rem 0;
  font-size: 0.68rem;
  font-weight: 700;
  color: var(--color-text-muted);
  text-transform: uppercase;
  letter-spacing: 0.07em;
}
.cal-day-label:nth-child(6),
.cal-day-label:nth-child(7) { color: rgba(245,166,35,0.6); }

/* Grille des cellules */
.cal-grid {
  display: grid;
  grid-template-columns: repeat(7, 1fr);
}
.cal-cell {
  min-height: 88px;
  border-right: 1px solid var(--color-border);
  border-bottom: 1px solid var(--color-border);
  padding: 5px 5px 3px;
  transition: background 0.1s;
}
.cal-cell:nth-child(7n)      { border-right: none; }
.cal-cell:nth-last-child(-n+7) { border-bottom: none; }
.cal-cell:hover               { background: var(--color-bg-hover); }

.cal-cell-outside  { opacity: 0.35; background: rgba(0,0,0,0.08); }
.cal-cell-outside:hover { opacity: 0.45; }

.cal-cell-today    { background: rgba(0,168,107,0.07); }
.cal-cell-today:hover { background: rgba(0,168,107,0.11); }

/* Numéro du jour */
.cal-day-num {
  display: flex;
  justify-content: flex-end;
  margin-bottom: 4px;
}
.cal-day-num span {
  font-size: 0.75rem;
  font-weight: 600;
  color: var(--color-text-muted);
  line-height: 1;
}
.cal-cell-today .cal-day-num span {
  background: var(--color-primary);
  color: #fff;
  width: 21px;
  height: 21px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 0.7rem;
}

/* Bande d'événement */
.cal-strip {
  display: block;
  font-size: 0.66rem;
  font-weight: 600;
  padding: 2px 5px;
  border-radius: 3px;
  margin-bottom: 2px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  cursor: pointer;
  color: #fff;
  transition: opacity 0.15s, transform 0.1s;
}
.cal-strip:hover { opacity: 0.85; transform: translateY(-1px); }

/* Couleur par type */
.cal-strip-conge      { background: rgba(59,130,246,0.80); }
.cal-strip-jour_ferie { background: rgba(245,158,11,0.80); }
.cal-strip-examen     { background: rgba(239,68,68,0.80); }
.cal-strip-reunion    { background: rgba(139,92,246,0.80); }
.cal-strip-fermeture  { background: rgba(107,114,128,0.80); }
.cal-strip-autre      { background: rgba(16,185,129,0.80); }

/* Légende en bas de la carte */
.cal-legend {
  display: flex;
  flex-wrap: wrap;
  gap: 0.4rem 1rem;
  padding: 0.75rem 1.25rem;
  border-top: 1px solid var(--color-border);
  background: rgba(0,0,0,0.1);
}
.cal-legend-item {
  display: flex;
  align-items: center;
  gap: 5px;
  font-size: 0.68rem;
  color: var(--color-text-muted);
}
.cal-legend-dot {
  width: 9px;
  height: 9px;
  border-radius: 50%;
  flex-shrink: 0;
}
.cal-dot-conge      { background: #3b82f6; }
.cal-dot-jour_ferie { background: #f59e0b; }
.cal-dot-examen     { background: #ef4444; }
.cal-dot-reunion    { background: #8b5cf6; }
.cal-dot-fermeture  { background: #6b7280; }
.cal-dot-autre      { background: #10b981; }

/* Sidebar — liste des événements de l'année */
.cal-list-item {
  display: flex;
  gap: 0.75rem;
  align-items: flex-start;
  padding: 0.7rem 1.25rem;
  border-bottom: 1px solid var(--color-border);
  cursor: pointer;
  transition: background 0.12s;
}
.cal-list-item:last-child { border-bottom: none; }
.cal-list-item:hover       { background: var(--color-bg-hover); }
.cal-list-dot {
  width: 9px;
  height: 9px;
  border-radius: 50%;
  flex-shrink: 0;
  margin-top: 5px;
}
.cal-list-title {
  font-size: 0.83rem;
  font-weight: 600;
  color: var(--color-text-primary);
  line-height: 1.3;
}
.cal-list-date {
  font-size: 0.72rem;
  color: var(--color-text-muted);
  margin-top: 2px;
}
.cal-list-type {
  font-size: 0.68rem;
  color: var(--color-text-muted);
  margin-top: 1px;
}

/* Responsive */
@media (max-width: 960px) {
  .cal-layout { grid-template-columns: 1fr; }
  .cal-cell   { min-height: 64px; }
}

/* ============================================================
   BULLETINS DE CLASSE  (bul-*)
   ============================================================ */
.bul-table-wrapper {
  background: var(--color-bg-card);
  border: 1px solid var(--color-border);
  border-radius: 12px;
  overflow: hidden;
  box-shadow: 0 4px 24px rgba(0,0,0,0.3);
}
.bul-table-fixed {
  width: 100%;
  table-layout: fixed;
}
/* colgroup widths */
.bul-col-eleve    { width: 18%; }
.bul-col-moy      { width: 7%;  }
.bul-col-rang     { width: 6%;  }
.bul-col-absj     { width: 6%;  }
.bul-col-absnj    { width: 7%;  }
.bul-col-ret      { width: 6%;  }
.bul-col-apprec   { width: 16%; }
.bul-col-statut   { width: 10%; }
.bul-col-actions  { width: 24%; } /* 4 boutons (saisir, publier, aperçu, PDF) ≈ 180 px, dès 1280 px */
.bul-table-fixed th:last-child,
.bul-table-fixed td:last-child { padding-left: 8px; padding-right: 8px; }
/* inline matricule chip */
.bul-matricule {
  margin-left: 8px;
  font-size: 0.72rem;
  color: var(--color-text-muted);
  font-family: var(--font-mono);
}
/* actions cell */
.bul-actions {
  display: flex;
  gap: 2px;
  justify-content: center;
  flex-wrap: wrap; /* jamais rogné par le conteneur (overflow hidden) : passe à la ligne si trop étroit */
}
/* utility */
.text-italic { font-style: italic; }
.btn-danger {
  background: rgba(220,53,69,0.15);
  color: #FF6B7A;
  border: 1px solid rgba(220,53,69,0.35);
}
.btn-danger:hover {
  background: rgba(220,53,69,0.28);
  border-color: #FF6B7A;
}

/* modal bulletin saisie */
.bul-modal {
  display: none;
  position: fixed;
  inset: 0;
  z-index: 11000;
  align-items: center;
  justify-content: center;
  background: rgba(5, 12, 28, 0.85);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  animation: bul-modal-fadein 0.18s ease both;
}
@keyframes bul-modal-fadein {
  from { opacity: 0; }
  to   { opacity: 1; }
}
.bul-modal-inner {
  background: var(--color-bg-card);
  border: 1px solid rgba(var(--ink), 0.08);
  border-radius: 16px;
  min-width: 460px;
  max-width: 540px;
  width: 90%;
  max-height: 92vh;
  overflow-y: auto;
  box-shadow: 0 24px 64px rgba(0,0,0,0.55), 0 0 0 1px rgba(0,168,107,0.12);
  animation: bul-modal-slidein 0.22s cubic-bezier(0.34, 1.56, 0.64, 1) both;
  scrollbar-width: thin;
  scrollbar-color: rgba(0,168,107,0.3) transparent;
}
@keyframes bul-modal-slidein {
  from { transform: translateY(18px) scale(0.97); opacity: 0; }
  to   { transform: translateY(0)    scale(1);    opacity: 1; }
}
/* Scrollbar webkit */
.bul-modal-inner::-webkit-scrollbar { width: 5px; }
.bul-modal-inner::-webkit-scrollbar-track { background: transparent; }
.bul-modal-inner::-webkit-scrollbar-thumb { background: rgba(0,168,107,0.3); border-radius: 4px; }

/* En-tête de la modale */
.bul-modal-header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 1rem;
  padding: 1rem 1.25rem 0.8rem;
  border-bottom: 1px solid rgba(var(--ink), 0.06);
  background: linear-gradient(135deg, rgba(0,168,107,0.07) 0%, transparent 60%);
  border-radius: 16px 16px 0 0;
}
.bul-modal-title {
  font-size: 0.95rem;
  font-weight: 700;
  color: #FFFFFF;
  margin: 0 0 2px;
  letter-spacing: -0.01em;
}
.bul-modal-subtitle {
  font-size: 0.75rem;
  color: #A0AEC0;
  margin: 0;
  display: flex;
  align-items: center;
  gap: 6px;
}
.bul-modal-close {
  background: rgba(var(--ink), 0.05);
  border: 1px solid rgba(var(--ink), 0.08);
  border-radius: 8px;
  cursor: pointer;
  color: #A0AEC0;
  line-height: 1;
  padding: 5px;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  transition: background 0.15s, color 0.15s, border-color 0.15s;
}
.bul-modal-close:hover {
  background: rgba(229,62,62,0.15);
  border-color: rgba(229,62,62,0.3);
  color: #FC8181;
}

/* Corps de la modale */
.bul-modal-body { padding: 1rem 1.25rem 1.25rem; }

/* Card de la moyenne dans la modale */
.bul-modal-moy {
  display: flex;
  align-items: center;
  gap: 0.85rem;
  background: rgba(0,168,107,0.06);
  border: 1px solid rgba(0,168,107,0.18);
  border-radius: 10px;
  padding: 0.6rem 1rem;
  margin-bottom: 1rem;
}
.bul-modal-moy-icon {
  width: 36px;
  height: 36px;
  border-radius: 9px;
  background: rgba(0,168,107,0.15);
  color: #00A86B;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}
.bul-modal-moy-label {
  font-size: 0.7rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.07em;
  color: #A0AEC0;
  margin-bottom: 2px;
}
.bul-modal-moy-value {
  font-size: 1.3rem;
  font-weight: 800;
  line-height: 1;
  color: #00A86B;
}
.bul-modal-moy-value--danger { color: #FC8181; }
.bul-modal-moy-rang {
  margin-left: auto;
  font-size: 0.75rem;
  color: #A0AEC0;
  text-align: right;
  flex-shrink: 0;
}
.bul-modal-moy-rang strong { color: #E2E8F0; font-weight: 700; }

/* Grille des champs d'absences */
.bul-modal-abs-grid {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  gap: 0.75rem;
  margin-bottom: 1rem;
}
.bul-modal-field-label {
  font-size: 0.7rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.07em;
  color: #CBD5E0;
  margin-bottom: 6px;
  display: flex;
  align-items: center;
  gap: 4px;
}
.bul-modal-abs-input {
  width: 100%;
  background: var(--color-bg-input);
  border: 1px solid rgba(var(--ink), 0.10);
  border-radius: 8px;
  color: #E2E8F0;
  font-family: var(--font-body);
  font-size: 0.95rem;
  font-weight: 600;
  padding: 9px 12px;
  text-align: center;
  transition: border-color 0.15s, box-shadow 0.15s;
  -moz-appearance: textfield;
}
.bul-modal-abs-input::-webkit-outer-spin-button,
.bul-modal-abs-input::-webkit-inner-spin-button { -webkit-appearance: none; }
.bul-modal-abs-input:focus {
  outline: none;
  border-color: #00A86B;
  box-shadow: 0 0 0 3px rgba(0,168,107,0.15);
}

/* Cases à cocher des mentions / distinctions */
.bul-modal-checks {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0.5rem 0.75rem;
  margin-bottom: 0.5rem;
}
.bul-modal-check {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 7px 10px;
  border: 1px solid rgba(var(--ink), 0.10);
  border-radius: 8px;
  background: var(--color-bg-input);
  color: #E2E8F0;
  font-size: 0.85rem;
  cursor: pointer;
}
.bul-modal-check:has(input:checked) { border-color: #00A86B; background: rgba(0,168,107,0.10); }
.bul-modal-check input { width: 1rem; height: 1rem; accent-color: #00A86B; flex-shrink: 0; }
.bul-modal-hint { font-size: 0.8rem; color: #94A3B8; font-style: italic; margin: 0 0 0.5rem; }

/* Séparateur */
.bul-modal-sep {
  height: 1px;
  background: rgba(var(--ink), 0.06);
  margin: 1rem 0;
}

/* Textarea appréciation */
.bul-modal-textarea {
  width: 100%;
  background: var(--color-bg-input);
  border: 1px solid rgba(var(--ink), 0.10);
  border-radius: 8px;
  color: #E2E8F0;
  font-family: var(--font-body);
  font-size: 0.875rem;
  padding: 10px 14px;
  resize: vertical;
  min-height: 80px;
  transition: border-color 0.15s, box-shadow 0.15s;
  line-height: 1.5;
}
.bul-modal-textarea:focus {
  outline: none;
  border-color: #00A86B;
  box-shadow: 0 0 0 3px rgba(0,168,107,0.15);
}
.bul-modal-textarea::placeholder { color: rgba(160,174,192,0.5); font-style: italic; }

/* Pied de la modale */
.bul-modal-footer {
  display: flex;
  gap: 0.75rem;
  justify-content: flex-end;
  padding-top: 0.85rem;
  border-top: 1px solid rgba(var(--ink), 0.06);
  margin-top: 1rem;
}

.bul-btn-cancel {
  background: rgba(var(--ink), 0.03);
  border: 1px solid rgba(var(--ink), 0.1);
  border-radius: 8px;
  color: #A0AEC0;
  font-family: var(--font-interface);
  font-size: 0.85rem;
  font-weight: 500;
  padding: 8px 16px;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  transition: all 0.2s ease;
  text-decoration: none;
}
.bul-btn-cancel:hover {
  background: rgba(229, 62, 62, 0.1);
  border-color: rgba(229, 62, 62, 0.2);
  color: #FC8181;
  transform: translateY(-1px);
}
.bul-btn-cancel svg { opacity: 0.7; }

/* ============================================================
   BULLETINS INDEX  (bul-idx-*)
   ============================================================ */
.bul-idx-annee-badge {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  background: var(--color-primary-ambient);
  color: var(--color-primary);
  border: 1px solid rgba(0,168,107,0.3);
  padding: 5px 14px;
  border-radius: 20px;
  font-size: 0.84rem;
  font-weight: 600;
}
.bul-idx-filter-bar {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  margin-bottom: 1.5rem;
}
.bul-idx-year-select { min-width: 200px; }
/* Section container (no padding — header/body handle spacing) */
.bul-idx-sec {
  background: var(--color-bg-card);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  overflow: hidden;
  margin-bottom: 1.5rem;
}
/* Période cards — row of equal-width cells */
.bul-idx-periode-cards {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
}
.bul-idx-periode-card {
  display: flex;
  align-items: center;
  gap: 1rem;
  padding: 1.1rem 1.25rem;
  border-right: 1px solid var(--color-border);
  transition: background 0.15s;
}
.bul-idx-periode-card:last-child { border-right: none; }
.bul-idx-periode-card:hover { background: var(--color-bg-hover); }
.bul-idx-periode-card[data-status="complete"] { border-top: 2px solid var(--color-primary); }
.bul-idx-periode-card[data-status="pending"]  { border-top: 2px solid var(--color-gold); }
.bul-idx-periode-card[data-status="empty"]    { border-top: 2px solid transparent; }
/* Icon */
.bul-idx-periode-icon {
  width: 40px;
  height: 40px;
  border-radius: 10px;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}
.bul-idx-periode-card[data-status="complete"] .bul-idx-periode-icon { background: rgba(0,168,107,0.15); color: var(--color-primary); }
.bul-idx-periode-card[data-status="pending"]  .bul-idx-periode-icon { background: rgba(245,166,35,0.12); color: var(--color-gold); }
.bul-idx-periode-card[data-status="empty"]    .bul-idx-periode-icon { background: rgba(74,104,128,0.10); color: var(--color-text-muted); }
/* Card body */
.bul-idx-periode-body { flex: 1; min-width: 0; }
.bul-idx-periode-title {
  font-size: 0.875rem;
  font-weight: 700;
  color: var(--color-text-primary);
  margin-bottom: 2px;
}
.bul-idx-periode-dates {
  font-size: 0.7rem;
  color: var(--color-text-muted);
  margin-bottom: 0.55rem;
}
/* Progress bar */
.bul-idx-periode-bar {
  height: 4px;
  border-radius: 2px;
  background: rgba(var(--ink), 0.06);
  overflow: hidden;
}
.bul-idx-periode-bar-fill {
  height: 100%;
  border-radius: 2px;
  background: var(--color-primary);
  width: var(--pct, 0%);
  transition: width 0.6s ease;
}
.bul-idx-periode-card[data-status="pending"] .bul-idx-periode-bar-fill { background: var(--color-gold); }
/* Stat counter */
.bul-idx-periode-stat { text-align: right; flex-shrink: 0; }
.bul-idx-periode-count { font-size: 1.2rem; font-weight: 800; color: var(--color-text-primary); line-height: 1; }
.bul-idx-periode-count-total { font-size: 0.7rem; color: var(--color-text-muted); display: block; margin-top: 2px; }
.bul-idx-periode-empty { font-size: 0.875rem; color: var(--color-text-muted); }
/* Class table */
.bul-idx-table { table-layout: auto; width: 100%; min-width: 560px; }
.bul-idx-col-classe { width: 220px; }
.bul-idx-col-cycle  { width: 150px; }
.bul-idx-col-trim   { min-width: 90px; }
/* Responsive */
@media (max-width: 768px) {
  .bul-idx-periode-cards { grid-template-columns: 1fr; }
  .bul-idx-periode-card {
    border-right: none;
    border-bottom: 1px solid var(--color-border);
  }
  .bul-idx-periode-card:last-child { border-bottom: none; }
}

/* ============================================================
   FICHE DE SUIVI ÉLÈVE  (fs-*)
   ============================================================ */
/* Layout two-column */
.fs-layout {
  display: grid;
  grid-template-columns: 300px 1fr;
  gap: var(--space-6);
  align-items: start;
  margin-bottom: var(--space-6);
}
/* Avatar */
.fs-avatar-img {
  width: 52px;
  height: 52px;
  border-radius: 50%;
  object-fit: cover;
  border: 2px solid var(--color-primary);
  flex-shrink: 0;
}
.fs-avatar-initials {
  width: 52px;
  height: 52px;
  border-radius: 50%;
  background: rgba(0,168,107,0.15);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.3rem;
  font-weight: 700;
  color: var(--color-primary);
  flex-shrink: 0;
}
/* Profile info */
.fs-name {
  font-size: 1.05rem;
  font-weight: 700;
  line-height: 1.3;
  color: var(--color-text-primary);
}
.fs-matricule {
  font-size: 0.75rem;
  color: var(--color-text-muted);
  font-family: var(--font-mono);
  margin-top: 2px;
}
.fs-profile-rows {
  border-top: 1px solid var(--color-border);
  padding-top: var(--space-4);
  margin-top: var(--space-4);
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
}
.fs-profile-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-2);
  font-size: 0.84rem;
}
.fs-profile-label { color: var(--color-text-muted); }
.fs-profile-val   { color: var(--color-text-primary); font-weight: 500; text-align: right; }
/* Capital discipline */
.fs-capital-block {
  border-top: 1px solid var(--color-border);
  padding-top: var(--space-4);
  margin-top: var(--space-4);
}
.fs-capital-score { font-size: 2rem; font-weight: 800; line-height: 1; }
.fs-capital-ok        { color: var(--color-primary); }
.fs-capital-alerte    { color: var(--color-warning); }
.fs-capital-conseil   { color: var(--color-danger); }
.fs-capital-exclusion { color: #991b1b; }
/* Stats grid (right column) */
.fs-stats-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--space-4);
}
/* Period average card — overrides stat-card flex direction */
.fs-stat-period {
  flex-direction: column;
  align-items: flex-start;
  gap: var(--space-2);
}
.fs-period-score { font-size: 1.85rem; font-weight: 800; line-height: 1; }
.fs-period-ok    { color: var(--color-primary); }
.fs-period-bad   { color: var(--color-danger); }
/* Tab bar */
.fs-tabs-bar {
  display: flex;
  border-bottom: 2px solid var(--color-border);
  overflow-x: auto;
  margin-bottom: var(--space-4);
}
.fs-tab-btn {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 0.65rem 1.1rem;
  font-size: 0.875rem;
  font-weight: 500;
  color: var(--color-text-muted);
  border: none;
  background: none;
  cursor: pointer;
  border-bottom: 2px solid transparent;
  margin-bottom: -2px;
  transition: color 0.15s, border-color 0.15s;
  white-space: nowrap;
  font-family: var(--font-body);
}
.fs-tab-btn:hover { color: var(--color-text-primary); }
.fs-tab-btn.active { color: var(--color-primary); border-bottom-color: var(--color-primary); font-weight: 600; }
/* Content grids */
.fs-presences-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--space-6);
}
/* Activity card */
.fs-activite-card {
  flex-direction: column;
  align-items: flex-start;
  gap: var(--space-2);
  min-width: 180px;
  flex: 1 1 200px;
  max-width: 280px;
}
/* Responsive */
@media (max-width: 960px) {
  .fs-layout        { grid-template-columns: 1fr; }
  .fs-presences-grid { grid-template-columns: 1fr; }
  .fs-stats-grid    { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 600px) {
  .fs-stats-grid { grid-template-columns: 1fr 1fr; }
}

/* ============================================================
   FORMULAIRE ACTIVITÉ PARASCOLAIRE  (act-type-*)
   Réutilise le système ev-statut-card / ev-layout / ev-sec-body
   ============================================================ */
/* Variantes couleur pour le sélecteur visuel de type */
.act-type-sport      input:checked ~ .ev-statut-card { border-color: #3b82f6;           background: rgba(59,130,246,0.10);  color: #3b82f6; }
.act-type-club       input:checked ~ .ev-statut-card { border-color: var(--color-primary); background: var(--color-primary-ambient); color: var(--color-primary); }
.act-type-art        input:checked ~ .ev-statut-card { border-color: #A259FF;           background: rgba(162,89,255,0.10);  color: #A259FF; }
.act-type-academique input:checked ~ .ev-statut-card { border-color: var(--color-gold); background: rgba(245,166,35,0.10);  color: var(--color-gold); }

/* ============================================================
   CARTES DE LICENCES  (lic-*)
   ============================================================ */
.lic-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(400px, 1fr));
  gap: 1.25rem;
  margin-top: 1.5rem;
}
/* Carte */
.lic-card {
  background: var(--color-bg-card);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  overflow: hidden;
  box-shadow: var(--shadow-card);
  transition: border-color 0.2s, box-shadow 0.2s, transform 0.2s;
  border-left: 3px solid transparent;
}
.lic-card:hover { box-shadow: var(--shadow-card-hover); transform: translateY(-2px); }
.lic-card--active  { border-left-color: var(--color-primary); }
.lic-card--pending { border-left-color: var(--color-gold); }
.lic-card--expired { border-left-color: #FF6B7A; }
.lic-card--revoked { border-left-color: var(--color-text-muted); }
/* En-tête */
.lic-card-hd {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 1rem;
  padding: 1.1rem 1.25rem 0.8rem;
}
.lic-school { font-size: 1rem; font-weight: 700; color: var(--color-text-primary); margin-bottom: 4px; line-height: 1.3; }
.lic-key-row { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; }
.lic-key { font-family: var(--font-mono); font-size: 0.72rem; color: var(--color-primary); letter-spacing: 0.04em; }
.lic-sig-invalid {
  font-size: 0.65rem; font-weight: 700; color: #FF6B7A;
  background: rgba(220,53,69,0.12); border: 1px solid rgba(220,53,69,0.25);
  padding: 1px 6px; border-radius: 4px;
}
.lic-badges { display: flex; gap: 5px; flex-wrap: wrap; flex-shrink: 0; }
/* Expiry bar */
.lic-expiry { padding: 0 1.25rem 0.9rem; }
.lic-expiry-meta {
  display: flex; align-items: center; justify-content: space-between;
  font-size: 0.72rem; color: var(--color-text-muted); margin-bottom: 5px;
}
.lic-expiry-days { font-weight: 700; font-size: 0.78rem; }
.lic-expiry-days--ok     { color: var(--color-primary); }
.lic-expiry-days--warn   { color: var(--color-gold); }
.lic-expiry-days--danger { color: #FF6B7A; }
.lic-expiry-bar { height: 4px; border-radius: 2px; background: rgba(var(--ink), 0.06); overflow: hidden; }
.lic-expiry-fill { height: 100%; border-radius: 2px; width: var(--pct, 0%); transition: width 0.6s ease; }
.lic-card--active  .lic-expiry-fill { background: var(--color-primary); }
.lic-card--pending .lic-expiry-fill { background: var(--color-gold); }
.lic-card--expired .lic-expiry-fill,
.lic-card--revoked .lic-expiry-fill { background: rgba(255,107,122,0.5); }
/* Stats grid 3×2 */
.lic-stats {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  border-top: 1px solid var(--color-border);
  border-bottom: 1px solid var(--color-border);
}
.lic-stat {
  display: flex; flex-direction: column; gap: 3px;
  padding: 0.65rem 1rem;
  border-right: 1px solid var(--color-border);
}
.lic-stat:nth-child(3n) { border-right: none; }
.lic-stat-label { font-size: 0.63rem; text-transform: uppercase; letter-spacing: 0.08em; color: var(--color-text-muted); font-weight: 600; }
.lic-stat-val   { font-size: 0.88rem; font-weight: 700; color: var(--color-text-primary); line-height: 1.3; }
.lic-stat-val--warn { color: var(--color-gold); }
/* Actions */
.lic-actions { display: flex; align-items: center; gap: 0.5rem; flex-wrap: wrap; padding: 0.75rem 1.25rem; }
/* Responsive */
@media (max-width: 860px) { .lic-grid { grid-template-columns: 1fr; } }

/* ═══════════════════════════════════════════════════════════════════
   BULLETIN ANNUEL DE NOTES
   ═══════════════════════════════════════════════════════════ */

/* Page principale */
.page-bulletin {
  padding: 2rem;
  max-width: 800px;
  margin: 0 auto;
}

/* En-tête */
.bulletin-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 2rem;
  padding-bottom: 1.5rem;
  border-bottom: 1px solid var(--color-border);
}

.bulletin-header__brand {
  display: flex;
  flex-direction: column;
  gap: 0.25rem;
}

.bulletin-logo-text {
  font-family: var(--font-logo);
  font-size: 1.75rem;
  font-weight: 700;
  color: var(--color-primary);
}

.bulletin-annee {
  font-size: var(--text-sm);
  color: var(--color-text-muted);
  margin: 0;
}

.bulletin-header__title h1 {
  font-size: var(--text-xl);
  font-weight: 600;
  color: var(--color-text-primary);
  margin: 0;
}

/* Carte */
.bulletin-card {
  background: var(--color-bg-card);
  border-radius: 12px;
  margin-bottom: 1.5rem;
  overflow: hidden;
}

.bulletin-card .card-header {
  background: rgba(0,0,0,0.2);
  padding: 0.75rem 1.25rem;
  border-bottom: 1px solid var(--color-border);
}

.bulletin-card .card-header h2 {
  font-size: var(--text-sm);
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--color-primary);
  margin: 0;
}

.bulletin-card .card-body {
  padding: 1.25rem;
}

/* Grille d'informations */
.info-grid {
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
}

.info-row {
  display: flex;
  gap: 1rem;
  padding: 0.25rem 0;
}

.info-label {
  min-width: 160px;
  font-size: var(--text-xs);
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--color-text-muted);
}

.info-value {
  font-size: var(--text-base);
  color: var(--color-text-primary);
}

.info-mono {
  font-family: var(--font-mono);
  color: var(--color-primary);
  font-size: var(--text-sm);
}

/* Tableau */
.bulletin-table {
  width: 100%;
  border-collapse: collapse;
}

.bulletin-table th {
  background: rgba(0,0,0,0.25);
  color: var(--color-text-muted);
  font-size: var(--text-xs);
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  padding: 0.75rem 1rem;
  text-align: left;
  border-bottom: 1px solid var(--color-border);
}

.bulletin-table td {
  padding: 0.75rem 1rem;
  border-bottom: 1px solid rgba(var(--ink), 0.04);
  color: var(--color-text-primary);
}

.bulletin-table .text-center {
  text-align: center;
}

.bulletin-table .tfoot-annuel td {
  background: rgba(0,0,0,0.25);
  border-bottom: none;
  padding: 1rem;
}

/* Notes colorées */
.note-admis {
  color: var(--color-primary);
  font-weight: 700;
}

.note-echec {
  color: #FF6B7A;
  font-weight: 700;
}

/* Décision */
.decision-box {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.75rem;
  margin-top: 1.5rem;
  padding: 1rem 1.5rem;
  border-radius: 8px;
  font-weight: 700;
  font-size: var(--text-lg);
}

.decision-admis {
  background: rgba(0,168,107,0.12);
  color: var(--color-primary);
  border: 1px solid var(--color-primary);
}

.decision-echec {
  background: rgba(255,107,122,0.12);
  color: #FF6B7A;
  border: 1px solid #FF6B7A;
}

.decision-icon {
  font-size: 1.25rem;
}

.decision-text {
  letter-spacing: 0.05em;
}

/* Signature */
.bulletin-footer {
  margin-top: 3rem;
  padding-top: 2rem;
  border-top: 1px solid var(--color-border);
  display: flex;
  justify-content: center;
}

.signature-block {
  text-align: center;
  min-width: 220px;
}

.signature-title {
  font-size: var(--text-xs);
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--color-text-muted);
  margin-bottom: 2.5rem;
}

.signature-line {
  border-top: 1px solid var(--color-border);
  width: 80%;
  margin: 0 auto;
}

.signature-name {
  font-size: var(--text-base);
  color: var(--color-text-primary);
  margin-top: 0.5rem;
}

/* ---------------------------------------------------------------
   BULLETIN ANNUEL � classes sp�cifiques (vue navigateur)
   --------------------------------------------------------------- */

.badge-matricule {
  font-family: var(--font-mono);
  font-size: var(--text-sm);
  font-weight: 700;
  color: var(--color-primary);
  background: var(--color-primary-ambient);
  border: 1px solid var(--color-primary-glow);
  border-radius: var(--radius-sm);
  padding: 2px 10px;
  letter-spacing: 0.08em;
  display: inline-block;
}

.form-grid-2 {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: var(--space-4);
}

@media (max-width: 640px) {
  .form-grid-2 { grid-template-columns: 1fr; }
}

.bilan-item {
  display: flex;
  flex-direction: column;
  gap: var(--space-1);
}

.bilan-valeur {
  font-size: var(--text-2xl);
  font-weight: var(--font-bold);
  color: var(--color-text-primary);
  line-height: 1.2;
}

.periode-moyenne-badge {
  font-size: var(--text-sm);
  font-weight: var(--font-semibold);
  padding: 3px 10px;
  border-radius: var(--radius-full);
}

.card-success {
  border: 1px solid rgba(0,168,107,0.35);
  box-shadow: 0 0 16px rgba(0,168,107,0.12);
}

.card-danger {
  border: 1px solid rgba(220,53,69,0.35);
  box-shadow: 0 0 16px rgba(220,53,69,0.10);
}

.decision-texte {
  font-size: var(--text-2xl);
  font-weight: var(--font-bold);
  letter-spacing: 0.04em;
}

.decision-icon {
  display: flex;
  justify-content: center;
}

.data-value {
  font-size: var(--text-base);
  color: var(--color-text-primary);
  display: inline-block;
}

.data-value-strong {
  font-size: var(--text-lg);
  font-weight: var(--font-semibold);
}

.text-success { color: var(--color-primary) !important; }
.text-danger  { color: var(--color-danger)  !important; }

.font-bold     { font-weight: var(--font-bold); }
.font-semibold { font-weight: var(--font-semibold); }
.font-medium   { font-weight: var(--font-medium); }
.font-italic   { font-style: italic; }

.table-foot-row td {
  background: rgba(0,168,107,0.06);
  border-top: 1px solid rgba(0,168,107,0.15);
  font-weight: var(--font-semibold);
}

.py-4 { padding-top: var(--space-4); padding-bottom: var(--space-4); }
.py-6 { padding-top: var(--space-6); padding-bottom: var(--space-6); }
.py-8 { padding-top: var(--space-8); padding-bottom: var(--space-8); }
.mb-3 { margin-bottom: var(--space-3); }
.mb-4 { margin-bottom: var(--space-4); }
.mt-2 { margin-top: var(--space-2); }
.mt-3 { margin-top: var(--space-3); }
.mt-4 { margin-top: var(--space-4); }
.p-0  { padding: 0; }

/* ============================================================
   BULLETIN ANNUEL INDEX  (bul-ann-*)
   ============================================================ */
.bul-ann-filters {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--space-4);
  margin-bottom: var(--space-4);
}
@media (max-width: 640px) {
  .bul-ann-filters { grid-template-columns: 1fr; }
}
.bul-ann-batch-bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-4);
  flex-wrap: wrap;
  padding: var(--space-4) var(--space-5);
  background: rgba(0,168,107,0.06);
  border: 1px solid rgba(0,168,107,0.18);
  border-radius: var(--radius-lg);
  margin-bottom: var(--space-4);
}
.bul-ann-batch-info { display: flex; flex-direction: column; gap: 2px; }
.bul-ann-batch-title { font-weight: var(--font-semibold); font-size: 0.9rem; color: var(--color-text-primary); }
.bul-ann-batch-sub   { font-size: 0.78rem; color: var(--color-text-muted); }
.bul-ann-student-row:hover { background: var(--color-bg-hover); }
.bul-ann-student-row td { vertical-align: middle; }
.bul-ann-actions { display: flex; gap: var(--space-2); justify-content: flex-end; }

/* ============================================================
   EMPLOI DU TEMPS PROFESSEURS — cartes compactes (edt-prof-*)
   ============================================================ */
.edt-prof-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: var(--space-4);
}
@media (max-width: 1100px) { .edt-prof-grid { grid-template-columns: repeat(3, 1fr); } }
@media (max-width: 720px)  { .edt-prof-grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 480px)  { .edt-prof-grid { grid-template-columns: 1fr; } }

.edt-prof-card {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: var(--space-2);
  padding: var(--space-4) var(--space-3);
  background: var(--color-bg-card);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  text-decoration: none;
  color: var(--color-text-primary);
  transition: border-color 0.18s, box-shadow 0.18s, transform 0.15s;
}
.edt-prof-card:hover {
  border-color: var(--color-primary);
  box-shadow: 0 4px 20px rgba(0,168,107,0.12);
  transform: translateY(-2px);
  color: var(--color-text-primary);
}
.edt-prof-avatar {
  width: 48px;
  height: 48px;
  border-radius: 50%;
  background: rgba(0,168,107,0.12);
  border: 2px solid rgba(0,168,107,0.25);
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: var(--font-display, 'Playfair Display', serif);
  font-size: 1.15rem;
  font-weight: 700;
  color: var(--color-primary);
  flex-shrink: 0;
}
.edt-prof-name {
  font-size: 0.82rem;
  font-weight: 700;
  color: var(--color-text-primary);
  line-height: 1.3;
  word-break: break-word;
}
.edt-prof-role {
  font-size: 0.72rem;
  color: var(--color-text-muted);
  line-height: 1.3;
}
.edt-prof-matricule {
  font-family: var(--font-mono, 'DejaVu Sans Mono', monospace);
  font-size: 0.68rem;
  color: var(--color-text-muted);
}

/* ============================================================
   RÉSULTATS PAR CLASSE — cartes compactes (res-cls-*)
   ============================================================ */
.res-cls-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: var(--space-4);
}
@media (max-width: 1100px) { .res-cls-grid { grid-template-columns: repeat(3, 1fr); } }
@media (max-width: 720px)  { .res-cls-grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 480px)  { .res-cls-grid { grid-template-columns: 1fr; } }

.res-cls-card {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: var(--space-2);
  padding: var(--space-4) var(--space-3);
  background: var(--color-bg-card);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  text-decoration: none;
  color: var(--color-text-primary);
  transition: border-color 0.18s, box-shadow 0.18s, transform 0.15s;
}
.res-cls-card:hover {
  border-color: var(--color-primary);
  box-shadow: 0 4px 20px rgba(0,168,107,0.12);
  transform: translateY(-2px);
  color: var(--color-text-primary);
}
.res-cls-icon {
  width: 44px;
  height: 44px;
  border-radius: 10px;
  background: rgba(0,168,107,0.10);
  border: 1.5px solid rgba(0,168,107,0.20);
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--color-primary);
  flex-shrink: 0;
}
.res-cls-name {
  font-size: 1rem;
  font-weight: 700;
  color: var(--color-text-primary);
  line-height: 1.2;
}
.res-cls-cycle {
  font-size: 0.72rem;
  color: var(--color-text-muted);
  text-transform: uppercase;
  letter-spacing: 0.04em;
}
.res-cls-grid-empty { grid-column: 1 / -1; }

/* ============================================================
   LISTE PERSONNEL DOCUMENTS — cartes compactes (doc-pers-*)
   ============================================================ */
.doc-pers-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: var(--space-4);
}
@media (max-width: 1100px) { .doc-pers-grid { grid-template-columns: repeat(3, 1fr); } }
@media (max-width: 720px)  { .doc-pers-grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 480px)  { .doc-pers-grid { grid-template-columns: 1fr; } }

.doc-pers-card {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: var(--space-2);
  padding: var(--space-5) var(--space-4);
  background: var(--color-bg-card);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  transition: border-color 0.18s, box-shadow 0.18s, transform 0.15s;
}
.doc-pers-card:hover {
  border-color: var(--color-primary);
  box-shadow: 0 4px 20px rgba(0,168,107,0.12);
  transform: translateY(-2px);
}
.doc-pers-card-inactive {
  opacity: 0.55;
}
.doc-pers-card-inactive .btn-primary {
  pointer-events: none;
  opacity: 0.4;
}
.doc-pers-icon {
  width: 48px;
  height: 48px;
  border-radius: 50%;
  background: rgba(0,168,107,0.10);
  border: 1.5px solid rgba(0,168,107,0.20);
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--color-primary);
  flex-shrink: 0;
}
.doc-pers-name {
  font-size: 1rem;
  font-weight: 700;
  color: var(--color-text-primary);
  line-height: 1.2;
}
.doc-pers-sub {
  font-size: 0.72rem;
  color: var(--color-text-muted);
  line-height: 1.4;
  font-style: italic;
}
.doc-pers-actions {
  display: flex;
  gap: var(--space-2);
  width: 100%;
  margin-top: var(--space-3);
}
.doc-pers-actions > * {
  flex: 1;
  justify-content: center;
  text-align: center;
}

/* ============================================================
   LISTES DE CLASSES DOCUMENTS — cartes compactes (doc-cls-*)
   ============================================================ */
.doc-cls-section {
  margin-bottom: var(--space-8);
}
.doc-cls-section-title {
  font-size: 0.72rem;
  font-weight: 700;
  color: var(--color-text-muted);
  text-transform: uppercase;
  letter-spacing: 0.08em;
  padding-bottom: var(--space-2);
  border-bottom: 1px solid var(--color-border);
  margin-bottom: var(--space-4);
}
.doc-cls-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: var(--space-4);
}
@media (max-width: 1100px) { .doc-cls-grid { grid-template-columns: repeat(3, 1fr); } }
@media (max-width: 720px)  { .doc-cls-grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 480px)  { .doc-cls-grid { grid-template-columns: 1fr; } }

.doc-cls-card {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: var(--space-2);
  padding: var(--space-5) var(--space-4);
  background: var(--color-bg-card);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  transition: border-color 0.18s, box-shadow 0.18s, transform 0.15s;
}
.doc-cls-card:hover {
  border-color: var(--color-primary);
  box-shadow: 0 4px 20px rgba(0,168,107,0.12);
  transform: translateY(-2px);
}
.doc-cls-icon {
  width: 44px;
  height: 44px;
  border-radius: 10px;
  background: rgba(0,168,107,0.10);
  border: 1.5px solid rgba(0,168,107,0.20);
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--color-primary);
  flex-shrink: 0;
}
.doc-cls-name {
  font-size: 1rem;
  font-weight: 700;
  color: var(--color-text-primary);
  line-height: 1.2;
}
.doc-cls-sub {
  font-size: 0.72rem;
  color: var(--color-text-muted);
  text-transform: uppercase;
  letter-spacing: 0.04em;
}
.doc-cls-actions {
  display: flex;
  gap: var(--space-2);
  width: 100%;
  margin-top: var(--space-3);
}
.doc-cls-actions > * {
  flex: 1;
  justify-content: center;
  text-align: center;
}

/* ── Palmarès Annuel ─────────────────────────────────────────── */

.pal-stats-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: var(--space-4);
  margin-bottom: var(--space-6);
}
@media (max-width: 1100px) { .pal-stats-grid { grid-template-columns: repeat(3, 1fr); } }
@media (max-width: 720px)  { .pal-stats-grid { grid-template-columns: repeat(2, 1fr); } }

/* Blob ambiant coloré dans stat-card */
.stat-card-accent {
  position: absolute;
  top: -20px;
  right: -20px;
  width: 80px;
  height: 80px;
  border-radius: 50%;
  filter: blur(28px);
  opacity: 0.22;
  pointer-events: none;
}
.pal-accent-green { background: var(--color-primary); }
.pal-accent-red   { background: var(--color-danger); }
.pal-accent-gold  { background: var(--color-gold); }
.pal-accent-blue  { background: #17A2B8; }

/* Couleurs des valeurs de stat */
.stat-value-green { color: var(--color-primary-light); }
.stat-value-red   { color: #FF6B7A; }
.stat-value-gold  { color: var(--color-gold); }
.stat-value-blue  { color: #17A2B8; }

/* Badge de rang */
.pal-rang-badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;
  border-radius: 50%;
  font-size: var(--text-xs);
  font-weight: var(--font-bold);
  flex-shrink: 0;
}
.pal-rang-or {
  background: rgba(245,166,35,0.15);
  color: var(--color-gold);
  border: 1px solid rgba(245,166,35,0.30);
  box-shadow: 0 0 8px rgba(245,166,35,0.18);
}
.pal-rang-std {
  background: var(--color-bg-input);
  color: var(--color-text-muted);
}

/* Moyenne annuelle dans le tableau */
.pal-moy          { font-size: 1.1rem; font-weight: var(--font-bold); line-height: 1; }
.pal-moy-admis    { color: var(--color-primary-light); }
.pal-moy-echec    { color: #FF6B7A; }

/* ─── Grille formulaire 2 colonnes ─────────────────────── */
.form-grid-2 {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--space-5);
}
.form-grid-2-full {
  grid-column: 1 / -1;
}
@media (max-width: 600px) {
  .form-grid-2 { grid-template-columns: 1fr; }
}

/* ─── Conteneur page formulaire centré ──────────────────── */
.form-page-wrap {
  max-width: 680px;
  margin: 0 auto;
}

/* ─── Corps de formulaire (card-body + gap) ─────────────── */
.form-body {
  padding: var(--space-6);
}
.form-body .form-grid-2 {
  row-gap: var(--space-4);
}

/* ─── En-tête carte — icône et sous-titre ───────────────── */
.card-header-icon {
  width: 34px;
  height: 34px;
  border-radius: 9px;
  background: rgba(0,168,107,0.13);
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}
.card-header-sub {
  font-size: 0.78rem;
  color: var(--color-text-muted);
  margin: 2px 0 0;
}

/* ─── Champ requis — astérisque rouge ───────────────────── */
.required-star { color: var(--color-danger); }

/* ─── Texte d'aide sous les champs ─────────────────────── */
.input-hint {
  font-size: 0.78rem;
  color: var(--color-text-muted);
  margin-top: var(--space-1);
}

/* ─── Lien primaire (vert) ──────────────────────────────── */
.link-primary {
  color: var(--color-primary);
  text-decoration: none;
}
.link-primary:hover {
  color: var(--color-primary-light);
  text-decoration: underline;
}

/* ─── Textarea redimensionnable ─────────────────────────── */
.input-textarea {
  resize: vertical;
  min-height: 72px;
}

/* ─── Checkbox stylée ───────────────────────────────────── */
.checkbox-label {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  cursor: pointer;
  font-size: var(--text-sm);
  color: var(--color-text-primary);
}
.checkbox-input {
  width: 16px;
  height: 16px;
  accent-color: var(--color-primary);
  cursor: pointer;
}

/* ─── Barre d'actions formulaire ────────────────────────── */
.form-actions {
  display: flex;
  justify-content: flex-end;
  gap: var(--space-3);
  margin-top: var(--space-5);
  padding-top: var(--space-4);
  border-top: 1px solid var(--color-border);
}

/* ─── Utilitaire — masquer un élément ───────────────────── */
.hidden { display: none !important; }
.pal-moy-base     { font-size: var(--text-xs); color: var(--color-text-muted); margin-left: 2px; }

/* ─── Marge utilitaire ───────────────────────────────────── */
.mb-5 { margin-bottom: var(--space-5); }

/* ─── Grille 2fr 1fr (Nom + Code) ───────────────────────── */
.form-grid-2-1 {
  display: grid;
  grid-template-columns: 2fr 1fr;
  gap: var(--space-5);
}
@media (max-width: 600px) {
  .form-grid-2-1 { grid-template-columns: 1fr; }
}

/* ─── Grille 4 colonnes (choix source) ──────────────────── */
.source-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: var(--space-2);
  margin-top: var(--space-2);
}
@media (max-width: 600px) {
  .source-grid { grid-template-columns: repeat(2, 1fr); }
}

/* ─── Carte de choix radio (source / type réduction) ────── */
.choice-card {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
  padding: var(--space-3) var(--space-2);
  border: 1.5px solid var(--color-border);
  border-radius: var(--radius-md);
  cursor: pointer;
  font-size: var(--text-sm);
  text-align: center;
  line-height: 1.3;
  color: var(--color-text-secondary);
  transition: all 0.15s ease;
}
.choice-card:hover {
  border-color: var(--color-primary);
  opacity: 0.9;
}
.choice-card:has(input:checked),
.choice-card.selected {
  border-color: var(--color-primary);
  background: rgba(0,168,107,0.06);
  color: var(--color-text-primary);
}
.choice-card-emoji { font-size: 1.25rem; }
.choice-card-title { font-weight: var(--font-semibold); font-size: var(--text-sm); }
.choice-card-sub   { font-size: var(--text-xs); color: var(--color-text-muted); }

/* ─── Carte choix horizontal (type réduction) ───────────── */
.choice-card-h {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  padding: var(--space-3) var(--space-4);
  border: 1.5px solid var(--color-border);
  border-radius: var(--radius-md);
  cursor: pointer;
  transition: all 0.15s ease;
}
.choice-card-h:hover {
  border-color: var(--color-primary);
  opacity: 0.9;
}
.choice-card-h:has(input:checked),
.choice-card-h.selected {
  border-color: var(--color-primary);
  background: rgba(0,168,107,0.06);
}
.choice-card-h-icon {
  width: 38px;
  height: 38px;
  border-radius: var(--radius-sm);
  background: rgba(0,168,107,0.10);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.2rem;
  font-weight: var(--font-bold);
  color: var(--color-primary-light);
  flex-shrink: 0;
}

/* ─── Bloc aperçu calcul dynamique ──────────────────────── */
.apercu-bloc {
  background: var(--color-bg-input);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  padding: var(--space-3) var(--space-4);
}
.apercu-hint {
  font-size: 0.74rem;
  color: var(--color-text-muted);
  margin-bottom: var(--space-2);
}
.apercu-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
}
.apercu-label { font-size: 0.82rem; color: var(--color-text-secondary); }
.apercu-val   { font-weight: var(--font-bold); font-size: 1rem; color: var(--color-primary-light); }
.apercu-reste { font-weight: var(--font-bold); font-size: 1rem; color: var(--color-text-primary); }
.apercu-divider {
  border: none;
  border-top: 1px solid var(--color-border);
  margin: var(--space-2) 0;
}
.apercu-input {
  width: 90px;
  border: none;
  background: transparent;
  font-size: 0.82rem;
  font-weight: var(--font-semibold);
  text-align: right;
  color: inherit;
  padding: 0;
  outline: none;
}

/* ─── Checkbox avec description (bloc options) ───────────── */
.checkbox-block {
  display: flex;
  align-items: flex-start;
  gap: var(--space-3);
  padding: var(--space-4) var(--space-5);
  cursor: pointer;
  width: fit-content;
}
.checkbox-block-input {
  width: 18px;
  height: 18px;
  accent-color: var(--color-primary);
  cursor: pointer;
  margin-top: 2px;
  flex-shrink: 0;
}
.checkbox-block-title {
  font-weight: var(--font-semibold);
  font-size: var(--text-sm);
  color: var(--color-text-primary);
}
.checkbox-block-sub {
  font-size: 0.78rem;
  color: var(--color-text-muted);
  margin-top: 2px;
}

/* ─── Champ code monospace ───────────────────────────────── */
.input-code {
  font-family: var(--font-mono);
  text-transform: uppercase;
  letter-spacing: 0.05em;
}

/* ─── Champ valeur accentué ──────────────────────────────── */
.input-valeur {
  font-size: 1.1rem;
  font-weight: var(--font-semibold);
}

/* ─── Variantes couleur card-header-icon ─────────────────── */
.card-header-icon-gold   { background: rgba(245,166,35,0.13); }
.card-header-icon-purple { background: rgba(99,102,241,0.13); }

/* ─── Libellé optionnel dans input-label ─────────────────── */
.input-label-opt {
  font-weight: var(--font-regular);
  color: var(--color-text-muted);
  margin-left: 4px;
}

/* ─── Icône inline dans input-hint ──────────────────────── */
.hint-icon {
  vertical-align: middle;
  margin-right: 3px;
  opacity: 0.7;
}

/* ─── Séparateur horizontal dans une carte ───────────────── */
.card-divider {
  border: none;
  border-top: 1px solid var(--color-border);
  margin: var(--space-6) 0;
}

/* ─── Titre de section dans une carte ───────────────────── */
.card-section-title {
  font-size: var(--text-base);
  font-weight: var(--font-semibold);
  color: var(--color-text-primary);
  margin-bottom: var(--space-4);
}

/* ─── Conteneur compteur HTMX (hauteur réservée) ─────────── */
.relance-count {
  min-height: 44px;
}

/* ─── Cellule formulaire alignée en bas (bouton dans grille) */
.form-group-end {
  align-self: end;
}

/* ══════════════════════════════════════════════════════════════
   ASSISTANT IA — Chatbot Directeur
   ══════════════════════════════════════════════════════════════ */

.chat-layout {
  display: flex;
  flex-direction: column;
  gap: var(--space-4);
  max-width: 820px;
  margin: 0 auto;
}

/* ── Fenêtre de messages ─────────────────────────────────────── */
.chat-window {
  background: var(--color-bg-card);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  min-height: 380px;
  max-height: 560px;
  overflow-y: auto;
  padding: var(--space-5);
  display: flex;
  flex-direction: column;
  gap: var(--space-4);
  scroll-behavior: smooth;
}

/* ── État vide (avant premier message) ───────────────────────── */
.chat-empty {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  flex: 1;
  padding: var(--space-10) 0;
  gap: var(--space-3);
}

.chat-empty-icon {
  width: 56px;
  height: 56px;
  border-radius: var(--radius-full);
  background: linear-gradient(135deg, rgba(0,168,107,0.18), rgba(0,168,107,0.08));
  border: 1px solid rgba(0,168,107,0.22);
  display: flex;
  align-items: center;
  justify-content: center;
  color: #00C07A;
  box-shadow: 0 0 28px rgba(0,168,107,0.15);
}

.chat-empty-title {
  font-size: var(--text-base);
  font-weight: var(--font-semibold);
  color: var(--color-text-primary);
}

.chat-empty-sub {
  font-size: var(--text-sm);
  color: var(--color-text-muted);
  text-align: center;
  max-width: 340px;
  line-height: 1.5;
}

/* ── Bulles de message ───────────────────────────────────────── */
.chat-message {
  display: flex;
  align-items: flex-start;
  gap: var(--space-3);
}

.chat-message--user {
  flex-direction: row-reverse;
}

.chat-avatar {
  width: 34px;
  height: 34px;
  border-radius: var(--radius-full);
  background: linear-gradient(135deg, rgba(0,168,107,0.22), rgba(0,168,107,0.10));
  border: 1px solid rgba(0,168,107,0.28);
  display: flex;
  align-items: center;
  justify-content: center;
  color: #00C07A;
  flex-shrink: 0;
  box-shadow: 0 0 12px rgba(0,168,107,0.12);
}

.chat-avatar--user {
  background: linear-gradient(135deg, rgba(23,162,184,0.20), rgba(23,162,184,0.08));
  border-color: rgba(23,162,184,0.25);
  color: #17A2B8;
}

.chat-bubble {
  max-width: 78%;
  padding: var(--space-3) var(--space-4);
  border-radius: var(--radius-md);
  position: relative;
}

.chat-bubble--user {
  background: linear-gradient(135deg, rgba(0,168,107,0.16), rgba(0,122,77,0.10));
  border: 1px solid rgba(0,168,107,0.22);
  border-radius: var(--radius-md) 4px var(--radius-md) var(--radius-md);
}

.chat-bubble--assistant {
  background: var(--color-bg-hover);
  border: 1px solid var(--color-border);
  border-radius: 4px var(--radius-md) var(--radius-md) var(--radius-md);
}

.chat-text {
  font-size: var(--text-sm);
  color: var(--color-text-primary);
  line-height: 1.65;
  margin: 0;
}

.chat-role-label {
  font-size: 10px;
  font-weight: var(--font-semibold);
  text-transform: uppercase;
  letter-spacing: 0.07em;
  color: var(--color-text-muted);
  margin-bottom: var(--space-1);
}

/* ── Indicateur de frappe (typing dots) ──────────────────────── */
.chat-loading {
  display: flex;
  align-items: flex-start;
  gap: var(--space-3);
}

.typing-dots {
  display: flex;
  gap: 5px;
  padding: var(--space-1) var(--space-1);
  align-items: center;
}

.typing-dots span {
  width: 7px;
  height: 7px;
  border-radius: var(--radius-full);
  background: var(--color-primary);
  animation: typingBounce 1.2s infinite ease-in-out;
}

.typing-dots span:nth-child(1) { animation-delay: 0s; }
.typing-dots span:nth-child(2) { animation-delay: 0.2s; }
.typing-dots span:nth-child(3) { animation-delay: 0.4s; }

@keyframes typingBounce {
  0%, 80%, 100% { transform: scale(0.7); opacity: 0.4; }
  40%           { transform: scale(1.1); opacity: 1; }
}

/* ── Zone de saisie ──────────────────────────────────────────── */
.chat-input-area {
  background: var(--color-bg-card);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  padding: var(--space-4);
  transition: border-color 0.2s;
}

.chat-input-area:focus-within {
  border-color: var(--color-border-focus);
  box-shadow: 0 0 0 3px rgba(0,168,107,0.08);
}

.chat-input-wrap {
  display: flex;
  gap: var(--space-3);
  align-items: flex-end;
}

.chat-input {
  flex: 1;
  background: var(--color-bg-input);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  padding: var(--space-3) var(--space-4);
  color: var(--color-text-primary);
  font-family: var(--font-interface);
  font-size: var(--text-sm);
  resize: none;
  outline: none;
  min-height: 46px;
  max-height: 140px;
  overflow-y: auto;
  transition: border-color 0.2s;
  line-height: 1.5;
}

.chat-input:focus {
  border-color: var(--color-border-focus);
}

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

.chat-input:disabled {
  opacity: 0.5;
  cursor: not-allowed;
}

.chat-send-btn {
  width: 46px;
  height: 46px;
  border-radius: var(--radius-md);
  background: linear-gradient(135deg, var(--color-primary), var(--color-primary-dark));
  border: none;
  color: white;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  transition: all 0.2s ease;
  box-shadow: var(--shadow-btn-primary);
}

.chat-send-btn:hover {
  filter: brightness(1.08);
  transform: translateY(-1px);
  box-shadow: var(--shadow-btn-hover);
}

.chat-send-btn:disabled {
  opacity: 0.4;
  cursor: not-allowed;
  transform: none;
  box-shadow: none;
}

.chat-footer-note {
  font-size: 10.5px;
  color: var(--color-text-muted);
  margin-top: var(--space-2);
  display: flex;
  align-items: center;
  gap: var(--space-2);
}

/* ── Suggestions ─────────────────────────────────────────────── */
.chat-suggestions {
  background: var(--color-bg-card);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  padding: var(--space-5);
}

.chat-suggestions-label {
  font-size: 10px;
  font-weight: var(--font-semibold);
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: var(--color-text-muted);
  margin-bottom: var(--space-3);
}

.suggestions-grid {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2);
}

.suggestion-chip {
  background: var(--color-bg-hover);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-full);
  padding: var(--space-2) var(--space-4);
  font-family: var(--font-interface);
  font-size: var(--text-xs);
  color: var(--color-text-secondary);
  cursor: pointer;
  transition: all 0.2s ease;
  text-align: left;
}

.suggestion-chip:hover {
  background: rgba(0,168,107,0.10);
  border-color: rgba(0,168,107,0.28);
  color: var(--color-primary-light);
  transform: translateY(-1px);
}

/* ── Utilitaire : masqué via JS ──────────────────────────────── */
.chat-is-hidden { display: none !important; }

/* ─── Grille de sélection multi-cases (élèves liés, parent) ── */
.pick-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
  gap: var(--space-3);
}
.pick-item {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  padding: var(--space-3) var(--space-4);
  background: var(--color-surface);
  border: 1.5px solid var(--color-border);
  border-radius: var(--radius-md);
  cursor: pointer;
  font-size: var(--text-sm);
  color: var(--color-text-secondary);
  transition: border-color 0.15s, background 0.15s;
  user-select: none;
}
.pick-item:hover {
  border-color: rgba(0,168,107,0.4);
}
.pick-item:has(input:checked) {
  border-color: var(--color-primary);
  background: rgba(0,168,107,0.06);
  color: var(--color-text-primary);
}
.pick-item input[type=checkbox] {
  accent-color: var(--color-primary);
  width: 16px;
  height: 16px;
  flex-shrink: 0;
}

/* ═══════════════════════════════════════════════════════════════ */
/*  PORTAIL PARENT — pp-* (PWA mobile standalone)                  */
/* ═══════════════════════════════════════════════════════════════ */

.pp-app {
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  background-color: var(--color-bg-app);
  color: var(--color-text-primary);
  font-family: var(--font-interface);
  -webkit-tap-highlight-color: transparent;
  overflow-x: hidden;
}

/* Topbar */
.pp-topbar {
  background: var(--color-bg-topbar);
  backdrop-filter: var(--aura-blur);
  -webkit-backdrop-filter: var(--aura-blur);
  border-bottom: 1px solid var(--color-border);
  padding: var(--space-4) var(--space-5);
  display: flex;
  align-items: center;
  justify-content: space-between;
  position: sticky;
  top: 0;
  z-index: 100;
  box-shadow: var(--shadow-topbar);
}
.pp-topbar-logo {
  font-family: var(--font-logo);
  font-size: 1.25rem;
  font-weight: 700;
  color: var(--color-primary);
  letter-spacing: -0.02em;
}
.pp-topbar-user { text-align: right; }
.pp-user-name { font-size: 0.875rem; font-weight: 600; color: var(--color-text-primary); }
.pp-user-etab { font-size: 0.625rem; color: var(--color-text-muted); text-transform: uppercase; letter-spacing: 0.08em; }

/* Content area */
.pp-content {
  flex: 1;
  padding: var(--space-5) var(--space-4) 7rem;
  max-width: 500px;
  margin: 0 auto;
  width: 100%;
}

/* Banners */
.pp-banner {
  border-radius: var(--radius-xl);
  padding: var(--space-5);
  margin-bottom: var(--space-5);
  display: flex;
  align-items: center;
  gap: var(--space-4);
  border: 1px solid var(--color-border);
  backdrop-filter: var(--aura-blur);
  position: relative;
  overflow: hidden;
}
.pp-banner--install {
  background: linear-gradient(135deg, var(--color-primary-ambient) 0%, rgba(0,168,107,0.02) 100%);
  border-color: rgba(0,168,107,0.25);
}
.pp-banner--offline {
  background: rgba(220,53,69,0.08);
  border-color: rgba(220,53,69,0.15);
  color: var(--color-danger);
  justify-content: center;
}
.pp-banner-icon {
  width: 44px;
  height: 44px;
  background: var(--color-primary);
  border-radius: var(--radius-lg);
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  color: #fff;
}
.pp-banner-body { flex: 1; }
.pp-banner-body strong { display: block; color: var(--color-text-primary); margin-bottom: 2px; }
.pp-banner-body p { color: var(--color-text-secondary); margin: 0; font-size: 0.75rem; }
.pp-banner--push { background: var(--color-bg-card); flex-wrap: wrap; }
.pp-banner--push .pp-banner-body { min-width: 160px; }
.pp-push-actions { display: flex; gap: var(--space-2); flex-wrap: wrap; }

/* Enfant card */
.pp-card {
  background: var(--color-bg-card);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-xl);
  overflow: hidden;
  margin-bottom: var(--space-5);
  box-shadow: var(--shadow-card);
}
.pp-card-header {
  padding: var(--space-5);
  display: flex;
  align-items: center;
  gap: var(--space-4);
}
.pp-avatar-wrap { position: relative; }
.pp-avatar {
  width: 56px;
  height: 56px;
  border-radius: var(--radius-lg);
  background: var(--color-bg-selected);
  border: 1px solid var(--color-border);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.5rem;
  font-weight: 700;
  color: var(--color-primary-light);
  flex-shrink: 0;
}
.pp-status {
  position: absolute;
  bottom: -2px;
  right: -2px;
  width: 14px;
  height: 14px;
  border-radius: 50%;
  background: var(--color-primary);
  border: 3px solid var(--color-bg-card);
}
.pp-info { flex: 1; min-width: 0; }
.pp-nom { font-weight: 700; font-size: 1.125rem; color: var(--color-text-primary); }
.pp-classe { font-size: 0.8125rem; color: var(--color-text-secondary); margin-top: 2px; }
.pp-classe--danger { color: var(--color-danger); }
.pp-photo {
  width: 52px;
  height: 52px;
  border-radius: var(--radius-lg);
  object-fit: cover;
  border: 1px solid var(--color-border);
}

/* Stats grid */
.pp-stats {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  background: rgba(0,0,0,0.15);
  border-top: 1px solid var(--color-border);
  border-bottom: 1px solid var(--color-border);
}
.pp-stat {
  padding: var(--space-5) var(--space-2);
  text-align: center;
  border-right: 1px solid var(--color-border);
  position: relative;
}
.pp-stat:last-child { border-right: none; }
.pp-glow {
  position: absolute;
  top: -20px;
  right: -20px;
  width: 60px;
  height: 60px;
  filter: blur(25px);
  opacity: 0.15;
}
.pp-glow--primary { background: var(--color-primary); }
.pp-glow--danger   { background: var(--color-danger); }
.pp-glow--gold     { background: var(--color-gold); }
.pp-val {
  font-size: 1.5rem;
  font-weight: 800;
  font-family: var(--font-mono);
}
.pp-val--success { color: var(--color-primary-light); }
.pp-val--danger  { color: var(--color-danger); }
.pp-val--warning { color: var(--color-gold); }
.pp-val--empty   { color: var(--color-text-muted); opacity: 0.3; }
.pp-val--sm      { font-size: 1.1rem; }
.pp-stat-label {
  font-size: 0.625rem;
  color: var(--color-text-muted);
  text-transform: uppercase;
  letter-spacing: 0.1em;
  margin-top: var(--space-2);
  font-weight: 700;
}

/* Badges row */
.pp-badges {
  padding: var(--space-4) var(--space-5);
  display: flex;
  gap: var(--space-2);
  flex-wrap: wrap;
}

/* Section (devoirs) */
.pp-section { padding: var(--space-5); }
.pp-section-title {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  margin-bottom: var(--space-4);
}
.pp-section-label {
  font-size: 0.75rem;
  font-weight: 800;
  color: var(--color-text-muted);
  text-transform: uppercase;
  letter-spacing: 0.1em;
}
.pp-section-icon { color: var(--color-primary); }
.pp-section-link { margin-left: auto; font-size: 0.75rem; font-weight: 700; color: var(--color-primary-light); text-decoration: none; white-space: nowrap; }

/* Devoir row */
.pp-devoir {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  padding: var(--space-3);
  background: var(--color-bg-input);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  margin-bottom: var(--space-2);
}
.pp-devoir-date {
  width: 44px;
  height: 44px;
  background: var(--color-bg-selected);
  border-radius: var(--radius-md);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}
.pp-devoir-day   { font-size: 1rem; font-weight: 800; color: var(--color-text-primary); }
.pp-devoir-month { font-size: 0.625rem; text-transform: uppercase; color: var(--color-primary-light); font-weight: 800; }
.pp-devoir-detail { flex: 1; min-width: 0; }
.pp-devoir-subject { font-size: 0.75rem; font-weight: 700; color: var(--color-text-primary); }
.pp-devoir-text    { font-size: 0.8125rem; color: var(--color-text-secondary); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.pp-devoir-text--complet { white-space: pre-line; }   /* cahier de textes : contenu et devoirs en entier */

/* Bottom nav */
.pp-nav {
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  background: rgba(13,26,45,0.9);
  backdrop-filter: blur(20px);
  border-top: 1px solid var(--color-border);
  padding: var(--space-3) var(--space-4) calc(var(--space-3) + env(safe-area-inset-bottom));
  display: flex;
  justify-content: space-around;
  align-items: center;
  z-index: 1000;
}
.pp-nav-item {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
  color: var(--color-text-muted);
  text-decoration: none;
  font-size: 0.625rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  width: 60px;
}
.pp-nav-icon {
  width: 40px;
  height: 30px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 15px;
}
.pp-nav-item--active { color: var(--color-primary-light); }
.pp-nav-item--active .pp-nav-icon { background: rgba(0,168,107,0.15); }
.pp-nav-item--danger { color: var(--color-danger); }

/* Empty state */
.pp-empty {
  text-align: center;
  padding: var(--space-12) var(--space-8);
  background: var(--color-bg-card);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-xl);
}
.pp-empty-icon {
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--color-text-muted);
  opacity: 0.3;
  margin-bottom: var(--space-5);
}
.pp-empty-title {
  font-size: 1.125rem;
  font-weight: 600;
  margin-bottom: var(--space-2);
}
.pp-empty-text {
  font-size: 0.875rem;
  color: var(--color-text-muted);
  line-height: 1.6;
}

/* Footer brand */
.pp-footer {
  text-align: center;
  padding: var(--space-8) var(--space-4) var(--space-4);
  opacity: 0.3;
}
.pp-footer-logo {
  font-family: var(--font-logo);
  font-size: 1.125rem;
  color: var(--color-text-muted);
}
.pp-footer-tagline {
  font-size: 0.5625rem;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: var(--color-text-muted);
}

.pp-hidden { display: none; }

/* Topbar back + action buttons */
.pp-topbar-back {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 36px;
  height: 36px;
  border-radius: var(--radius-md);
  color: var(--color-text-secondary);
  text-decoration: none;
  transition: background 0.15s;
}
.pp-topbar-back:hover { background: var(--color-bg-selected); }

.pp-topbar-action {
  background: none;
  border: none;
  padding: 0;
  font-size: 0.8125rem;
  font-weight: 600;
  color: var(--color-primary-light);
  cursor: pointer;
}

/* Notification list */
.pp-notif-list { display: flex; flex-direction: column; gap: var(--space-2); }

.pp-notif {
  display: flex;
  align-items: flex-start;
  gap: var(--space-3);
  padding: var(--space-4);
  background: var(--color-bg-card);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-xl);
  position: relative;
}
.pp-notif--unread {
  background: rgba(0,168,107,0.04);
  border-color: rgba(0,168,107,0.2);
}

.pp-notif-icon {
  width: 40px;
  height: 40px;
  border-radius: var(--radius-lg);
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}
.pp-notif-icon--bulletin  { background: rgba(0,168,107,0.15); color: var(--color-primary-light); }
.pp-notif-icon--absence   { background: rgba(220,53,69,0.12); color: var(--color-danger); }
.pp-notif-icon--sanction  { background: rgba(245,166,35,0.12); color: var(--color-gold); }
.pp-notif-icon--general   { background: var(--color-bg-selected); color: var(--color-text-secondary); }

.pp-notif-body { flex: 1; min-width: 0; }
.pp-notif-titre   { font-size: 0.875rem; font-weight: 700; color: var(--color-text-primary); margin-bottom: 2px; }
.pp-notif-message { font-size: 0.8125rem; color: var(--color-text-secondary); line-height: 1.5; margin-bottom: var(--space-2); }
.pp-notif-date    { font-size: 0.6875rem; color: var(--color-text-muted); }

.pp-notif-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--color-primary);
  flex-shrink: 0;
  margin-top: 4px;
}

/* Bulletins page */
.pp-bul-enfant-header {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  padding: var(--space-4) 0 var(--space-3);
}
.pp-avatar--sm {
  width: 36px;
  height: 36px;
  font-size: 1rem;
}
.pp-bul-empty {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  font-size: 0.8125rem;
  color: var(--color-text-muted);
  padding: var(--space-4) var(--space-3);
  background: var(--color-bg-card);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  margin-bottom: var(--space-4);
}
.pp-bul-card {
  background: var(--color-bg-card);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-xl);
  overflow: hidden;
  margin-bottom: var(--space-3);
  box-shadow: var(--shadow-card);
}
.pp-bul-card-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: var(--space-3) var(--space-5);
  border-bottom: 1px solid var(--color-border);
}
.pp-bul-trimestre {
  font-size: 0.9375rem;
  font-weight: 700;
  color: var(--color-text-primary);
}
.pp-bul-stats {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  background: rgba(0,0,0,0.1);
  border-bottom: 1px solid var(--color-border);
}
.pp-bul-stat {
  padding: var(--space-4) var(--space-2);
  text-align: center;
  border-right: 1px solid var(--color-border);
}
.pp-bul-stat:last-child { border-right: none; }
.pp-bul-appreciation {
  display: flex;
  align-items: flex-start;
  gap: var(--space-2);
  padding: var(--space-4) var(--space-5);
  font-size: 0.8125rem;
  color: var(--color-text-secondary);
  font-style: italic;
  line-height: 1.5;
  border-bottom: 1px solid var(--color-border);
}
.pp-bul-appreciation svg { flex-shrink: 0; margin-top: 2px; color: var(--color-primary); }
.pp-bul-actions {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: var(--space-4) var(--space-5);
  gap: var(--space-3);
}
.pp-bul-date {
  font-size: 0.6875rem;
  color: var(--color-text-muted);
}

/* ─── Page Guide d'utilisation ──────────────────────────────── */
.guide-header-title {
  font-family: var(--font-logo);
  font-size: 2.2rem;
  background: linear-gradient(135deg, var(--color-text-primary) 0%, var(--color-primary-light) 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  margin: 0 0 var(--space-2);
  line-height: 1.2;
}
.guide-header-label {
  font-size: var(--text-xs);
  color: var(--color-text-muted);
  letter-spacing: 0.12em;
  text-transform: uppercase;
}
.guide-toc-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
  gap: var(--space-3);
}
.guide-toc-item {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  padding: var(--space-3) var(--space-4);
  background: rgba(var(--ink), 0.02);
  border: 1px solid transparent;
  border-radius: var(--radius-md);
  color: var(--color-text-secondary);
  text-decoration: none;
  font-size: var(--text-sm);
  transition: all 0.2s ease;
}
.guide-toc-item:hover {
  background: rgba(0,168,107,0.05);
  border-color: rgba(0,168,107,0.20);
  color: var(--color-primary-light);
  transform: translateY(-2px);
}
.guide-toc-icon {
  width: 30px; height: 30px;
  border-radius: var(--radius-sm);
  background: rgba(0,168,107,0.10);
  display: flex; align-items: center; justify-content: center;
  flex-shrink: 0;
  color: var(--color-primary-light);
}
.guide-section-card {
  position: relative;
  overflow: hidden;
  padding-left: calc(var(--space-6) + 4px) !important;
}
.guide-section-card::before {
  content: "";
  position: absolute;
  top: 0; left: 0;
  width: 4px; height: 100%;
  background: linear-gradient(to bottom, var(--color-primary), rgba(0,168,107,0.15));
}
.guide-section-head {
  display: flex;
  align-items: center;
  gap: var(--space-4);
  margin-bottom: var(--space-5);
}
.guide-section-num {
  width: 36px; height: 36px;
  background: rgba(0,168,107,0.10);
  color: var(--color-primary-light);
  border-radius: var(--radius-md);
  display: flex; align-items: center; justify-content: center;
  font-weight: var(--font-bold);
  font-size: var(--text-base);
  flex-shrink: 0;
}
.guide-section-title {
  font-family: var(--font-logo);
  font-size: 1.35rem;
  color: var(--color-text-primary);
  margin: 0;
  font-weight: normal;
}
.guide-list {
  list-style: none;
  padding: 0;
  margin: 0 0 var(--space-4);
}
.guide-list li {
  position: relative;
  padding-left: 1.3rem;
  margin-bottom: var(--space-3);
  font-size: var(--text-sm);
  color: var(--color-text-secondary);
  line-height: 1.65;
}
.guide-list li::before {
  content: "";
  position: absolute;
  left: 0; top: 0.58em;
  width: 6px; height: 2px;
  background: var(--color-primary);
  border-radius: 2px;
}
.guide-list li strong { color: var(--color-text-primary); }
.guide-sub-heading {
  font-size: var(--text-sm);
  font-weight: var(--font-semibold);
  color: var(--color-text-primary);
  margin: var(--space-5) 0 var(--space-3);
  display: flex;
  align-items: center;
  gap: var(--space-2);
}
.guide-sub-heading::before {
  content: "";
  display: inline-block;
  width: 3px; height: 14px;
  background: var(--color-primary);
  border-radius: 2px;
  flex-shrink: 0;
}
.guide-tip {
  background: rgba(0,168,107,0.06);
  border: 1px solid rgba(0,168,107,0.14);
  border-radius: var(--radius-md);
  padding: var(--space-4) var(--space-5);
  margin: var(--space-5) 0 0;
  display: flex; gap: var(--space-3); align-items: flex-start;
}
.guide-tip svg { color: var(--color-primary-light); flex-shrink: 0; margin-top: 1px; }
.guide-tip p  { font-size: var(--text-xs); color: var(--color-primary-light); line-height: 1.6; margin: 0; }
.guide-warning {
  background: rgba(245,166,35,0.06);
  border: 1px solid rgba(245,166,35,0.14);
  border-radius: var(--radius-md);
  padding: var(--space-4) var(--space-5);
  margin: var(--space-5) 0 0;
  display: flex; gap: var(--space-3); align-items: flex-start;
}
.guide-warning svg { color: #F5A623; flex-shrink: 0; margin-top: 1px; }
.guide-warning p  { font-size: var(--text-xs); color: #F5A623; line-height: 1.6; margin: 0; }
.guide-footer-bar {
  text-align: center;
  padding: var(--space-10) 0 var(--space-6);
  border-top: 1px solid var(--color-border);
  margin-top: var(--space-6);
}
.guide-footer-bar p {
  font-size: var(--text-xs);
  color: var(--color-text-muted);
  letter-spacing: 0.08em;
  text-transform: uppercase;
}
@media (max-width: 600px) {
  .guide-toc-grid { grid-template-columns: 1fr 1fr; }
  .guide-header-title { font-size: 1.6rem; }
  .guide-section-card { padding-left: calc(var(--space-4) + 4px) !important; }
}

/* ── Document Certificate Preview ─────────────────────────────── */

.doc-preview-wrap { max-width: 700px; }

.doc-preview-meta {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: var(--space-3);
}

.doc-preview-label {
  font-size: 0.78rem;
  color: var(--color-text-muted);
  display: flex;
  align-items: center;
  gap: 6px;
}

.doc-preview-format { font-size: 0.75rem; color: var(--color-text-muted); }

/* White document card — simulates printed paper */
.doc-cert-card {
  background: #fff;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  box-shadow: 0 4px 24px rgba(0,0,0,.18);
  overflow: hidden;
}

.doc-cert-topbar { height: 4px; background: var(--color-primary); }
.doc-cert-body   { padding: 2rem 2.5rem; }

/* Establishment header */
.doc-cert-header {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  margin-bottom: 1.2rem;
  padding-bottom: 1rem;
  border-bottom: 2px solid #1a1a1a;
}

.doc-cert-logo-box {
  width: 72px;
  height: 72px;
  background: rgba(0,168,107,0.08);
  border-radius: 8px;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

.doc-cert-logo-img { width: 64px; height: 64px; object-fit: contain; }

.doc-cert-etab-center { text-align: center; flex: 1; padding: 0 1rem; }

.doc-cert-etab-country {
  font-size: 0.7rem;
  text-transform: uppercase;
  letter-spacing: 1.5px;
  color: #555;
  margin: 0 0 3px;
}

.doc-cert-etab-name {
  font-size: 1rem;
  font-weight: 700;
  text-transform: uppercase;
  line-height: 1.2;
  color: #1a1a1a;
  margin: 0;
}

.doc-cert-etab-agrement {
  font-size: 0.72rem;
  color: #666;
  font-style: italic;
  margin: 2px 0 0;
}

.doc-cert-etab-type { font-size: 0.72rem; color: #555; margin: 1px 0 0; }

.doc-cert-stamp-box {
  width: 72px;
  height: 72px;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

.doc-cert-stamp-img { width: 64px; height: 64px; object-fit: contain; }

.doc-cert-stamp-placeholder {
  width: 60px;
  height: 60px;
  border-radius: 50%;
  border: 2px dashed #d1d5db;
  display: flex;
  align-items: center;
  justify-content: center;
}

.doc-cert-stamp-placeholder span {
  font-size: 0.6rem;
  color: #9ca3af;
  text-align: center;
  line-height: 1.2;
}

/* Title */
.doc-cert-title-section { text-align: center; margin: 1.5rem 0; }

.doc-cert-title {
  font-size: 1.15rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 3px;
  border-bottom: 2px solid #1a1a1a;
  display: inline-block;
  padding-bottom: 5px;
  margin: 0;
  color: #1a1a1a;
}

.doc-cert-year { font-size: 0.78rem; color: #555; margin: 6px 0 0; }

/* Body text */
.doc-cert-text { line-height: 2; font-size: 0.92rem; margin: 1.2rem 0; color: #1a1a1a; }
.doc-cert-text p { margin: 0.4rem 0; }
.doc-cert-strong { text-decoration: underline; font-weight: 700; }
.doc-cert-warning-text { color: #d97706; }

/* Signature */
.doc-cert-signature {
  margin-top: 2.5rem;
  display: flex;
  flex-direction: column;
  align-items: flex-end;
}

.doc-cert-sig-city {
  font-size: 0.85rem;
  color: #555;
  margin: 0 0 1.2rem;
  font-style: italic;
}

.doc-cert-sig-block {
  text-align: center;
  min-width: 220px;
}

.doc-cert-sig-role {
  font-size: 0.82rem;
  color: #333;
  margin: 0 0 0.4rem;
  font-style: italic;
}

.doc-cert-sig-area {
  width: 200px;
  height: 64px;
  line-height: 64px;
  margin: 0 auto;
}

.doc-cert-sig-area img {
  max-height: 64px;
  max-width: 200px;
  vertical-align: bottom;
}

.doc-cert-sig-name {
  font-size: 0.84rem;
  font-weight: 700;
  color: #1a1a1a;
  margin: 6px 0 0;
  text-transform: uppercase;
  letter-spacing: 0.04em;
}

.doc-cert-sig-honorifique {
  font-size: 0.75rem;
  color: #555;
  font-style: italic;
  margin: 3px 0 0;
}

/* Footer */
.doc-cert-footer {
  margin-top: 1.5rem;
  padding-top: 0.8rem;
  border-top: 1px solid #e5e7eb;
  text-align: center;
}

.doc-cert-footer-text { font-size: 0.7rem; color: #9ca3af; font-style: italic; }

/* Warning alert with left accent border */
.alert-warning-accent {
  background: rgba(245,166,35,0.08);
  border: 1px solid rgba(245,166,35,0.30);
  border-left: 4px solid #F5A623;
  border-radius: var(--radius-md);
  padding: var(--space-3) var(--space-5);
  margin-bottom: var(--space-4);
  display: flex;
  align-items: center;
  gap: var(--space-3);
  font-size: 0.88rem;
  color: #F5A623;
  font-weight: 600;
}

.alert-warning-accent a {
  color: #F5A623;
  text-decoration: underline;
  margin-left: var(--space-2);
  font-size: 0.88rem;
}

/* ─── Bandeau hors-ligne ─────────────────────────────────────────────────── */
#offline-banner {
  display: none;
  position: fixed;
  top: 0; left: 0; right: 0;
  z-index: 9999;
  background: #92400e;
  color: #fef3c7;
  font-size: 0.8125rem;
  font-weight: 600;
  padding: 0.45rem 1rem;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  text-align: center;
  box-shadow: 0 2px 8px rgba(0,0,0,0.4);
}
#offline-banner.visible { display: flex; }
#offline-banner svg { width: 15px; height: 15px; flex-shrink: 0; }

/* Décale le contenu quand le bandeau est visible */
body.offline-active { padding-top: 2rem; }

/* ─── Rappel d'expiration de la licence (administrateurs, dès J-30 — licences/rappels.py) ─── */
.licence-rappel {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-wrap: wrap;
  gap: 0.5rem;
  padding: 0.45rem 1rem;
  background: rgba(245,166,35,0.10);
  border-bottom: 1px solid rgba(245,166,35,0.30);
  color: var(--color-gold);
  font-size: 0.8125rem;
  font-weight: 600;
}
.licence-rappel svg { flex-shrink: 0; }
.licence-rappel a { color: inherit; text-decoration: underline; text-underline-offset: 2px; }
.licence-rappel--urgent { background: rgba(220,53,69,0.10); border-bottom-color: rgba(220,53,69,0.35); color: #f87171; }

/* ─── Saisie hors réseau (notes, appels) — static/js/saisies_hors_ligne.js ─── */
.saisies-attente {
  position: fixed;
  right: 1rem; bottom: 1.25rem;
  z-index: 9997;
  background: #92400e;
  color: #fef3c7;
  font-size: 0.8125rem;
  font-weight: 600;
  padding: 0.5rem 0.9rem;
  border-radius: var(--radius-full);
  box-shadow: 0 2px 8px rgba(0,0,0,0.4);
  text-decoration: none;
}
.saisies-attente:hover { background: #b45309; color: #fffbeb; }
.hl-pastille-dispo {
  display: inline-block;
  margin: 0 0 0.75rem;
  font-size: 0.75rem;
  color: var(--color-text-secondary);
}
.hl-pastille-dispo::before { content: '\2713\00a0'; color: var(--color-primary); font-weight: 700; }
.hl-bandeau {
  margin: 0 0 1rem;
  padding: 0.75rem 1rem;
  border-radius: var(--radius-md);
  background: rgba(217,119,6,0.14);
  border: 1px solid rgba(217,119,6,0.45);
  color: #fcd34d;
  font-size: 0.85rem;
  line-height: 1.5;
}
.hl-bandeau-refus { background: rgba(220,53,69,0.12); border-color: rgba(220,53,69,0.45); color: #fca5a5; }
.hl-bandeau-lien { color: inherit; font-weight: 600; text-decoration: underline; }
.hl-statut { font-size: 0.85rem; margin: 0.75rem 0 0; color: var(--color-text-secondary); }
.hl-statut-success { color: var(--color-primary); }
.hl-statut-warning { color: #fcd34d; }
.hl-statut-error { color: #fca5a5; }
.hl-carte {
  padding: 0.85rem 0;
  border-top: 1px solid var(--color-border);
}
.hl-carte:first-child { border-top: 0; padding-top: 0; }
.hl-carte-titre { font-weight: 600; color: var(--color-text-primary); }
.hl-carte-detail, .hl-carte-motif { font-size: 0.8rem; color: var(--color-text-secondary); margin-top: 0.15rem; }
.hl-carte-refus .hl-carte-motif { color: #fca5a5; }
.hl-carte-actions { display: flex; gap: 0.5rem; flex-wrap: wrap; margin-top: 0.6rem; }
.hl-carte-actions .btn-secondary { font-size: 0.8rem; padding: 0.35rem 0.75rem; }
.hl-btn-danger { color: #fca5a5; }
.hl-ligne { display: flex; flex-direction: column; gap: 0.1rem; padding: 0.6rem 0; border-top: 1px solid var(--color-border); }
.hl-ligne:first-child { border-top: 0; padding-top: 0; }
.hl-ligne-titre { font-weight: 600; color: var(--color-text-primary); font-size: 0.9rem; }
.hl-lien { color: var(--color-primary); text-decoration: none; }
.hl-lien:hover { text-decoration: underline; }

/* ─── Bandeau « ENVIRONNEMENT DE TEST » (YELEN_ENVIRONNEMENT=test) ─────────── */
#env-test-banner {
  position: fixed;
  bottom: 0; left: 0; right: 0;
  z-index: 9998;
  background: #6d28d9;
  color: #ede9fe;
  font-size: 0.75rem;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-align: center;
  padding: 0.3rem 1rem;
  pointer-events: none;
}
body.env-test { padding-bottom: 1.7rem; }
@media print { #env-test-banner { display: none; } }

/* ─── Bouton install PWA sidebar ─────────────────────────────────────────── */
#pwa-install-btn {
  display: none;
  align-items: center;
  gap: 0.4rem;
  width: 100%;
  padding: 0.4rem 0.75rem;
  margin-top: 0.5rem;
  background: rgba(0,168,107,0.10);
  border: 1px solid rgba(0,168,107,0.25);
  border-radius: var(--radius-md);
  color: var(--color-primary);
  font-size: 0.75rem;
  font-weight: 600;
  cursor: pointer;
  transition: background 0.2s;
  text-align: left;
}
#pwa-install-btn:hover { background: rgba(0,168,107,0.18); }
#pwa-install-btn.visible { display: flex; }
#pwa-install-btn svg { width: 13px; height: 13px; flex-shrink: 0; }

/* ─── Communication — page détail message (comm-detail-*) ───────────────────── */

.comm-detail-layout {
  display: grid;
  grid-template-columns: 1fr 380px;
  gap: var(--space-6);
  align-items: start;
}

.comm-status-banner {
  display: flex;
  align-items: center;
  gap: var(--space-4);
  padding: var(--space-4) var(--space-6);
  border-radius: var(--radius-lg);
  margin-bottom: var(--space-6);
  border: 1px solid;
  animation: fadeUp 0.3s ease both;
}

.comm-status-banner-success {
  background: rgba(0,168,107,0.10);
  border-color: rgba(0,168,107,0.25);
  color: #00C07A;
}

.comm-status-banner-info {
  background: rgba(23,162,184,0.10);
  border-color: rgba(23,162,184,0.25);
  color: #17A2B8;
}

.comm-status-banner-warning {
  background: rgba(245,166,35,0.08);
  border-color: rgba(245,166,35,0.22);
  color: #F5A623;
}

.comm-status-banner-icon {
  flex-shrink: 0;
  width: 40px;
  height: 40px;
  border-radius: var(--radius-md);
  display: flex;
  align-items: center;
  justify-content: center;
}

.comm-status-banner-success .comm-status-banner-icon { background: rgba(0,168,107,0.15); }
.comm-status-banner-info    .comm-status-banner-icon { background: rgba(23,162,184,0.15); }
.comm-status-banner-warning .comm-status-banner-icon { background: rgba(245,166,35,0.12); }

.comm-status-banner-title {
  font-size: var(--text-sm);
  font-weight: var(--font-semibold);
  line-height: 1.3;
}

.comm-status-banner-sub {
  font-size: var(--text-xs);
  opacity: 0.75;
  margin-top: 2px;
}

.comm-msg-header {
  display: flex;
  align-items: flex-start;
  gap: var(--space-4);
  margin-bottom: var(--space-5);
  padding-bottom: var(--space-5);
  border-bottom: 1px solid var(--color-border);
}

.comm-msg-type-icon {
  flex-shrink: 0;
  width: 48px;
  height: 48px;
  border-radius: var(--radius-md);
  display: flex;
  align-items: center;
  justify-content: center;
}

.comm-msg-objet {
  font-size: var(--text-xl);
  font-weight: var(--font-bold);
  color: var(--color-text-primary);
  line-height: 1.25;
  letter-spacing: -0.01em;
  margin: 0 0 var(--space-1);
}

.comm-eleve-hero {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  padding: var(--space-3) var(--space-4);
  background: rgba(0,0,0,0.18);
  border-radius: var(--radius-md);
  margin-bottom: var(--space-5);
}

.comm-eleve-avatar {
  width: 36px;
  height: 36px;
  border-radius: var(--radius-full);
  background: rgba(23,162,184,0.15);
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  color: #17A2B8;
}

.comm-eleve-name {
  font-size: var(--text-sm);
  font-weight: var(--font-semibold);
  color: var(--color-text-primary);
  line-height: 1.2;
}

.comm-eleve-matricule {
  font-family: var(--font-mono);
  font-size: var(--text-xs);
  color: var(--color-text-muted);
  margin-top: 2px;
}

.comm-msg-contenu {
  font-size: var(--text-sm);
  color: var(--color-text-secondary);
  line-height: 1.7;
  white-space: pre-line;
  padding: var(--space-4) var(--space-5);
  background: rgba(0,0,0,0.18);
  border-radius: var(--radius-md);
  border-left: 3px solid var(--color-border);
  margin-bottom: var(--space-5);
}

.comm-meta-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--space-4);
}

.comm-meta-item {
  display: flex;
  flex-direction: column;
  gap: 3px;
}

.comm-meta-label {
  font-size: var(--text-xs);
  font-weight: var(--font-semibold);
  color: var(--color-text-muted);
  text-transform: uppercase;
  letter-spacing: 0.06em;
}

.comm-meta-value {
  font-size: var(--text-sm);
  color: var(--color-text-primary);
  font-weight: var(--font-medium);
}

.comm-creneaux-list {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
  margin-top: var(--space-3);
  margin-bottom: var(--space-5);
}

.comm-creneau-chip {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  padding: var(--space-2) var(--space-3);
  background: rgba(0,168,107,0.06);
  border: 1px solid rgba(0,168,107,0.15);
  border-radius: var(--radius-md);
  font-size: var(--text-sm);
  color: var(--color-text-secondary);
}

.comm-creneau-chip-selected {
  background: rgba(0,168,107,0.13);
  border-color: rgba(0,168,107,0.32);
  color: #00C07A;
  font-weight: var(--font-semibold);
}

.section-divider {
  height: 1px;
  background: var(--color-border);
  margin: var(--space-5) 0;
}

.comm-link-block {
  background: rgba(0,168,107,0.05);
  border: 1px solid rgba(0,168,107,0.18);
  border-radius: var(--radius-md);
  padding: var(--space-4);
  margin-bottom: var(--space-5);
}

.comm-link-label {
  font-size: var(--text-xs);
  font-weight: var(--font-semibold);
  color: var(--color-text-muted);
  text-transform: uppercase;
  letter-spacing: 0.06em;
  margin-bottom: var(--space-2);
}

.comm-link-url {
  font-family: var(--font-mono);
  font-size: 11px;
  color: var(--color-text-secondary);
  word-break: break-all;
  line-height: 1.5;
  margin-bottom: var(--space-3);
}

.comm-response-block {
  background: rgba(0,0,0,0.15);
  border-radius: var(--radius-md);
  padding: var(--space-4) var(--space-5);
  display: flex;
  flex-direction: column;
  gap: var(--space-4);
}

.comm-response-item {
  display: flex;
  flex-direction: column;
  gap: 3px;
}

.comm-response-label {
  font-size: var(--text-xs);
  font-weight: var(--font-semibold);
  color: var(--color-text-muted);
  text-transform: uppercase;
  letter-spacing: 0.06em;
}

.comm-response-value {
  font-size: var(--text-sm);
  color: var(--color-text-primary);
  font-weight: var(--font-medium);
}

.comm-response-creneau {
  padding: var(--space-3) var(--space-4);
  background: rgba(0,168,107,0.10);
  border: 1px solid rgba(0,168,107,0.25);
  border-radius: var(--radius-md);
  color: #00C07A;
  font-weight: var(--font-semibold);
  font-size: var(--text-sm);
}

/* ─── EDT — génération automatique (edt-gen-*) ──────────────────────────────── */

.modal-box-lg {
  max-width: 680px;
}

.modal-body {
  padding: var(--space-6);
  display: flex;
  flex-direction: column;
  gap: var(--space-4);
  max-height: calc(100vh - 180px);
  overflow-y: auto;
}

.modal-footer {
  display: flex;
  justify-content: flex-end;
  gap: var(--space-3);
  padding-top: var(--space-4);
  border-top: 1px solid var(--color-border);
  margin-top: var(--space-2);
}

.edt-gen-config-info {
  display: flex;
  align-items: flex-start;
  gap: var(--space-2);
  padding: var(--space-3) var(--space-4);
  background: rgba(23,162,184,0.07);
  border: 1px solid rgba(23,162,184,0.20);
  border-radius: var(--radius-md);
  font-size: var(--text-sm);
  color: var(--color-text-secondary);
  flex-shrink: 0;
}

.edt-gen-config-info svg { flex-shrink: 0; margin-top: 1px; color: #17A2B8; }

.edt-gen-config-warn {
  background: rgba(245,166,35,0.07);
  border-color: rgba(245,166,35,0.22);
}

.edt-gen-config-warn svg { color: #F5A623; }

.edt-gen-field { display: flex; flex-direction: column; gap: var(--space-2); }

.edt-gen-radio-group {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
}

.edt-gen-radio-label {
  display: flex;
  align-items: flex-start;
  gap: var(--space-3);
  padding: var(--space-3) var(--space-4);
  background: var(--color-bg-input);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  cursor: pointer;
  transition: border-color 0.2s, background 0.2s;
}

.edt-gen-radio-label:has(input:checked) {
  border-color: var(--color-border-focus);
  background: rgba(0,168,107,0.06);
}

.edt-gen-radio-label input[type="radio"] { margin-top: 3px; flex-shrink: 0; }

.edt-gen-radio-label strong {
  display: block;
  font-size: var(--text-sm);
  color: var(--color-text-primary);
  font-weight: var(--font-semibold);
}

.edt-gen-radio-label small {
  display: block;
  font-size: var(--text-xs);
  color: var(--color-text-muted);
  margin-top: 2px;
}

/* Statistiques aperçu */
.edt-gen-stats {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--space-3);
}

.edt-gen-stat {
  background: var(--color-bg-input);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  padding: var(--space-3) var(--space-4);
  text-align: center;
  display: flex;
  flex-direction: column;
  gap: var(--space-1);
}

.edt-gen-stat-val {
  font-size: var(--text-2xl);
  font-weight: var(--font-bold);
  color: var(--color-text-primary);
  line-height: 1;
}

.edt-gen-stat-ok { color: var(--color-primary-light); }
.edt-gen-stat-warn { color: #F5A623; }

.edt-gen-stat-label {
  font-size: var(--text-xs);
  color: var(--color-text-muted);
  font-weight: var(--font-medium);
}

/* Avertissement non-placées */
.edt-gen-warning {
  display: flex;
  align-items: flex-start;
  gap: var(--space-3);
  padding: var(--space-3) var(--space-4);
  background: rgba(245,166,35,0.08);
  border: 1px solid rgba(245,166,35,0.25);
  border-radius: var(--radius-md);
  font-size: var(--text-sm);
}

.edt-gen-warning svg { flex-shrink: 0; margin-top: 1px; color: #F5A623; }

.edt-gen-warning-title {
  font-weight: var(--font-semibold);
  color: #F5A623;
  margin-bottom: var(--space-1);
}

.edt-gen-warning-list {
  margin: 0;
  padding-left: var(--space-4);
  color: var(--color-text-secondary);
}

.edt-gen-warning-list li { margin-bottom: 2px; }

/* Table aperçu */
.edt-gen-apercu-table-wrap {
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  overflow: hidden;
  max-height: 340px;
  overflow-y: auto;
}

.edt-gen-apercu-table {
  width: 100%;
  border-collapse: collapse;
  font-size: var(--text-sm);
}

.edt-gen-apercu-table th {
  text-align: left;
  padding: 8px 14px;
  font-size: 10.5px;
  font-weight: var(--font-semibold);
  color: var(--color-text-muted);
  text-transform: uppercase;
  letter-spacing: 0.07em;
  border-bottom: 1px solid var(--color-border);
  background: rgba(0,0,0,0.15);
  position: sticky;
  top: 0;
}

.edt-gen-apercu-table td {
  padding: 8px 14px;
  color: var(--color-text-primary);
  border-bottom: 1px solid rgba(var(--ink), 0.04);
  vertical-align: middle;
}

.edt-gen-apercu-table tr:last-child td { border-bottom: none; }

.edt-gen-day-cell {
  font-weight: var(--font-semibold);
  color: var(--color-primary-light);
  font-size: var(--text-xs);
  white-space: nowrap;
}

/* ─── Communication bidirectionnelle — page publique (repondre.html) ───────── */
.comm-reply-wrapper {
  max-width: 540px;
  width: 90%;
  margin: 2rem auto;
  display: flex;
  flex-direction: column;
  gap: 1rem;
}
.comm-reply-header {
  display: flex;
  align-items: center;
  gap: 1rem;
  padding: 1.25rem 1.5rem;
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-xl);
}
.comm-reply-etab {
  font-size: 1rem;
  font-weight: 700;
  color: var(--color-text);
  margin: 0;
}
.comm-reply-type {
  font-size: 0.8rem;
  color: var(--color-primary);
  font-weight: 600;
  margin: 0;
  text-transform: uppercase;
  letter-spacing: 0.05em;
}
.comm-reply-card {
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-xl);
  padding: 1.5rem;
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
}
.comm-reply-objet {
  font-size: 1rem;
  font-weight: 700;
  color: var(--color-text);
  margin: 0;
}
.comm-reply-contenu {
  font-size: 0.9rem;
  color: var(--color-text-secondary);
  line-height: 1.6;
  margin: 0;
  white-space: pre-line;
}
.comm-reply-meta {
  font-size: 0.8rem;
  color: var(--color-text-muted);
  margin: 0;
  border-top: 1px solid var(--color-border);
  padding-top: 0.75rem;
}
.comm-reply-radio-label {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  padding: 0.6rem 0.75rem;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  cursor: pointer;
  transition: border-color 0.15s, background 0.15s;
  font-size: 0.875rem;
  color: var(--color-text);
}
.comm-reply-radio-label:has(input:checked) {
  border-color: var(--color-primary);
  background: rgba(0,168,107,0.07);
}
.comm-reply-submit {
  width: 100%;
  margin-top: 0.25rem;
}

/* ─── Barre d'actions groupées (templates/partials/bulk_actions.html) ───────── */
.bulk-actions-bar {
  padding: var(--space-3) var(--space-4);
  margin-bottom: var(--space-4);
}
.bulk-actions-inner,
.bulk-actions-left {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: var(--space-3);
}
.bulk-actions-inner {
  justify-content: space-between;
}
.bulk-count {
  font-size: var(--text-sm);
  font-weight: 600;
  color: var(--color-text-secondary);
}

/* ─── Établissement — zone de dépôt du logo (etablissements/detail.html) ──────── */
.logo-dropzone {
  width: 220px;            /* largeur définie : en width:100% dans une colonne flex auto-dimensionnée, la zone s'effondrait (26 px) */
  max-width: 100%;
  aspect-ratio: 1 / 1;
  border: 2px dashed var(--color-border);
  border-radius: var(--radius-xl);
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: var(--space-4);
  background: var(--color-bg-input);
  overflow: hidden;
  position: relative;
  transition: all 0.3s ease;
  cursor: pointer;
}
.logo-dropzone:hover {
  border-color: var(--color-primary);
  background: rgba(0, 168, 107, 0.05);
}

/* ─── Convocations — ligne d'élève à cocher (documents/convocation_form.html) ─── */
.convocation-eleve:hover {
  background: var(--color-bg-hover);
}

/* ─── Assistants d'import (inscriptions/eleve_import_*.html, pedagogie/notes_import_*.html) ─── */
.wizard-steps {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-4);
  list-style: none;
  padding: 0;
  margin: 0 0 var(--space-5);
}
.wizard-step {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  font-size: var(--text-sm);
  color: var(--color-text-muted);
}
.wizard-step-num {
  width: 26px;
  height: 26px;
  border-radius: 50%;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 12px;
  font-weight: 600;
  border: 1px solid var(--color-border);
}
.wizard-step.is-done { color: var(--color-primary); }
.wizard-step.is-done .wizard-step-num,
.wizard-step.is-active .wizard-step-num {
  background: var(--color-primary);
  border-color: var(--color-primary);
  color: #fff;
}
.wizard-step.is-active { color: var(--color-text-primary); font-weight: 600; }
.wizard-step + .wizard-step::before {
  content: '›';
  color: var(--color-text-muted);
  margin-right: var(--space-2);
}
.wizard-mapping td { vertical-align: middle; }
.wizard-mapping .input { max-width: 420px; }
.wizard-sample {
  font-size: var(--text-xs);
  color: var(--color-text-muted);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: 220px;
}
.wizard-actions {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: var(--space-3);
  margin-top: var(--space-5);
  flex-wrap: wrap;
}

/* ─────────────────────────────────────────────────────────────── */
/*  ACCESSIBILITÉ — navigation clavier et préférences utilisateur   */
/* ─────────────────────────────────────────────────────────────── */
/* Lien d'évitement : premier élément focusable, visible au clavier uniquement */
.skip-link {
  position: absolute;
  left: var(--space-3);
  top: -100px;
  z-index: 1000;
  padding: var(--space-2) var(--space-4);
  background: var(--color-primary);
  color: #fff;
  border-radius: var(--radius-md);
  font-weight: var(--font-semibold);
  text-decoration: none;
}
.skip-link:focus { top: var(--space-3); outline: 2px solid #fff; outline-offset: 2px; }
#main-content:focus { outline: none; }

/* Indicateur de focus uniforme (clavier seulement ; les champs gardent leur halo propre) */
:focus-visible {
  outline: 2px solid var(--color-primary);
  outline-offset: 2px;
}

/* Respect de la préférence « réduire les animations » */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
}

/* ─────────────────────────────────────────────────────────────── */
/*  AIDE EN LIGNE — guide d'utilisation rendu depuis le Markdown      */
/* ─────────────────────────────────────────────────────────────── */
/* Le guide fait ~255 000 px : un défilement « doux » y mettrait plusieurs secondes par saut.
   Sur cette page seulement, les ancres du sommaire amènent la section immédiatement. */
html:has(.aide-layout) { scroll-behavior: auto; }

.aide-layout { display: grid; grid-template-columns: 280px minmax(0, 1fr); gap: var(--space-6); align-items: start; }
.aide-sommaire { position: sticky; top: var(--space-4); max-height: calc(100vh - var(--space-8)); overflow-y: auto; padding-right: var(--space-2); }
.aide-sommaire ol { list-style: none; margin: var(--space-3) 0 0; padding: 0; }
.aide-sommaire ol ol { margin: 0 0 var(--space-1) var(--space-3); border-left: 1px solid var(--color-border); }
.aide-sommaire a { display: block; padding: 0.3rem var(--space-2); font-size: var(--text-sm); color: var(--color-text-secondary); text-decoration: none; border-radius: var(--radius-sm); line-height: 1.35; }
.aide-sommaire ol ol a { font-size: var(--text-xs); }
.aide-sommaire a:hover { color: var(--color-text-primary); background: var(--color-bg-hover); }
.aide-sommaire a.active { color: var(--color-primary); font-weight: var(--font-semibold); background: rgba(0, 168, 107, 0.08); }
.aide-doc { padding: var(--space-6) var(--space-8); line-height: 1.65; overflow-wrap: anywhere; }
.aide-doc h1 { font-size: var(--text-2xl); margin: 0 0 var(--space-4); }
.aide-doc h2 { font-size: var(--text-xl); margin: var(--space-8) 0 var(--space-3); padding-top: var(--space-4); border-top: 1px solid var(--color-border); scroll-margin-top: var(--space-4); }
.aide-doc h3 { font-size: var(--text-lg); margin: var(--space-6) 0 var(--space-2); scroll-margin-top: var(--space-4); }
.aide-doc h4 { font-size: var(--text-base); margin: var(--space-4) 0 var(--space-2); }
.aide-doc p, .aide-doc ul, .aide-doc ol { margin: 0 0 var(--space-3); }
.aide-doc ul, .aide-doc ol { padding-left: var(--space-6); }
.aide-doc li + li { margin-top: 0.2rem; }
.aide-doc a { color: var(--color-primary); }
.aide-doc img { max-width: 100%; height: auto; border: 1px solid var(--color-border); border-radius: var(--radius-md); margin: var(--space-2) 0 var(--space-4); }
.aide-doc table { width: 100%; border-collapse: collapse; margin: 0 0 var(--space-4); font-size: var(--text-sm); }
.aide-doc th, .aide-doc td { border: 1px solid var(--color-border); padding: 0.4rem 0.6rem; text-align: left; vertical-align: top; }
.aide-doc th { background: var(--color-bg-hover); font-weight: var(--font-semibold); }
.aide-doc code { font-family: var(--font-mono); font-size: 0.85em; background: var(--color-bg-hover); padding: 0.1em 0.35em; border-radius: var(--radius-sm); }
.aide-doc pre { background: var(--color-bg-hover); border: 1px solid var(--color-border); border-radius: var(--radius-md); padding: var(--space-3) var(--space-4); overflow-x: auto; margin: 0 0 var(--space-4); }
.aide-doc pre code { background: none; padding: 0; font-size: 0.8rem; }
.aide-doc blockquote { margin: 0 0 var(--space-4); padding: var(--space-2) var(--space-4); border-left: 3px solid var(--color-primary); background: rgba(0, 168, 107, 0.06); color: var(--color-text-secondary); }
.aide-doc hr { border: 0; border-top: 1px solid var(--color-border); margin: var(--space-6) 0; }
@media (max-width: 900px) {
  .aide-layout { grid-template-columns: 1fr; }
  .aide-sommaire { position: static; max-height: 40vh; }
  .aide-doc { padding: var(--space-4); }
}

/* ── SMS automatiques : compte rendu quotidien du promoteur ─────────────────── */
.sms-apercu { margin-top: 6px; padding: 6px 10px; border-left: 3px solid var(--color-primary); background: var(--color-bg-hover);
  border-radius: 6px; font-size: 0.8rem; color: var(--color-text-secondary); font-family: ui-monospace, SFMono-Regular, Menlo, monospace; }
.sms-apercu-libelle { display: block; font-family: inherit; font-size: 0.7rem; text-transform: uppercase; letter-spacing: .06em;
  color: var(--color-text-muted); margin-bottom: 2px; }
.sms-compte-rendu-form { flex-basis: 100%; display: flex; align-items: center; gap: var(--space-2); flex-wrap: wrap;
  padding-top: var(--space-3); border-top: 1px solid var(--color-border); }
.sms-compte-rendu-form label { font-size: 0.8rem; color: var(--color-text-secondary); white-space: nowrap; }
.sms-compte-rendu-form input[type="time"] { width: 130px; padding: 4px 6px; }
.sms-compte-rendu-form input[type="text"] { width: 280px; padding: 4px 8px; }

/* ═══════════════════════════════════════════════════════════════════════════════════════════
   STRUCTURE DU GABARIT DE BASE (base.html)
   Styles auparavant écrits en ligne ou dans un bloc <style> du gabarit : cacheables, non réémis à
   chaque page et compatibles avec la CSP (aucun style en ligne dans base.html).
   ═══════════════════════════════════════════════════════════════════════════════════════════ */

/* Sous-menu de la barre latérale : masqué par défaut (règle ci-dessus), ouvert par la classe .open
   (état piloté en JS) ; !important conserve le comportement qu'avait le bloc <style> du gabarit. */
.sb-submenu-modern.open { display: block !important; }

/* Éléments non cliquables de la barre latérale (informations, compteur, année scolaire) */
.sb-item-modern.is-info { cursor: default; opacity: 0.75; }
.sb-item-modern.is-attenue { cursor: default; opacity: 0.5; font-size: 0.8rem; }
.sb-item-modern.is-colonne { cursor: default; opacity: 0.75; flex-direction: column; align-items: flex-start; gap: 2px; }
.sb-eleve-nom { font-weight: 600; font-size: 0.85rem; }
.sb-eleve-matricule { font-size: 0.75rem; opacity: 0.6; }
.sb-section-modern.is-espacee { margin-top: 12px; }
.sb-footer-btn.is-relative { position: relative; }
.sb-form-deconnexion { display: inline; margin: 0; }

/* Barre supérieure mobile (affichée en dessous de 768 px par le script de mise en page) */
.topbar-mobile { display: none; justify-content: space-between; padding: 0 var(--space-4); }
.topbar-menu-btn {
  background: none; border: none; color: var(--color-text-secondary);
  cursor: pointer; padding: var(--space-2);
}
.logo-app-name-lg { font-size: var(--text-lg); }
.espace-32 { width: 32px; }

/* Pied de page de l'application */
.app-footer {
  border-top: 1px solid var(--color-border);
  padding: var(--space-4) var(--space-6);
  text-align: center;
  font-size: var(--text-xs);
  color: var(--color-text-muted);
}

/* Voile de la barre latérale en affichage mobile (l'état est piloté en JS) */
.sidebar-overlay {
  display: none; position: fixed; inset: 0; z-index: 30; background: rgba(0, 0, 0, 0.6);
}

/* ─── Bandeau « DÉMONSTRATION » (DEMO_MODE=true, instance d'essai publique) ──────────────────
   Toujours visible, y compris à l'impression : un visiteur ne doit jamais confondre une capture de la
   démonstration avec les données d'une école réelle. */
#demo-banner {
  position: fixed;
  top: 0; left: 0; right: 0;
  z-index: 9999;
  background: #b45309;
  color: #fff7ed;
  font-size: 0.75rem;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-align: center;
  padding: 0.3rem 1rem;
  pointer-events: none;
}
body:has(#demo-banner) { padding-top: 1.7rem; }
body.login-clean-body:has(#demo-banner) { padding-top: 1.7rem; }
@media print { #demo-banner { position: static; } }

/* ══════════════════════════════════════════════════════════════════════════
   Boîte des SMS reçus (communication/messages_recus.html)
   Une ligne = un message, lisible sur téléphone : plus de tableau à défilement
   horizontal dont la colonne « Message » se réduisait à un caractère par ligne.
   ══════════════════════════════════════════════════════════════════════════ */
.boite-sms { padding: 0; overflow: hidden; }

.boite-sms-barre {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-2) var(--space-4);
  margin-bottom: var(--space-3);
}
.boite-sms-compte { margin: 0; font-size: var(--text-sm); }
.boite-sms-compte strong { color: var(--color-text-primary); }
.boite-sms-tout { display: inline-flex; align-items: center; gap: var(--space-2); cursor: pointer; margin: 0; }
.boite-sms-separateur {
  width: 1px;
  align-self: stretch;
  min-height: 1.5rem;
  background: var(--color-border);
  margin: 0 var(--space-1);
}

.boite-sms-liste { list-style: none; margin: 0; padding: 0; }

.boite-sms-item {
  display: flex;
  gap: var(--space-3);
  padding: var(--space-4) var(--space-5);
  border-bottom: 1px solid var(--color-border);
  transition: background .15s ease;
}
.boite-sms-item:last-child { border-bottom: none; }
.boite-sms-item:hover { background: var(--color-bg-hover); }
.boite-sms-item.est-non-lu {
  background: rgba(0, 168, 107, 0.045);
  box-shadow: inset 3px 0 0 var(--color-primary);
}
.boite-sms-item.est-non-lu:hover { background: rgba(0, 168, 107, 0.085); }

.boite-sms-case { flex: 0 0 auto; padding-top: 2px; }
.boite-sms-corps { flex: 1 1 auto; min-width: 0; }

.boite-sms-entete {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-1) var(--space-2);
  margin-bottom: var(--space-1);
}
.boite-sms-pastille {
  flex: 0 0 auto;
  width: .5rem;
  height: .5rem;
  border-radius: 50%;
  background: var(--color-primary);
  box-shadow: 0 0 0 3px var(--color-primary-ambient);
}
.boite-sms-item:not(.est-non-lu) .boite-sms-pastille { background: transparent; box-shadow: none; }
.boite-sms-numero { font-weight: 700; white-space: nowrap; letter-spacing: .01em; }
.boite-sms-famille {
  margin: 0 0 var(--space-2);
  color: var(--color-text-secondary);
  font-size: var(--text-xs);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.boite-sms-famille.est-inconnue { color: var(--color-text-muted); font-style: italic; }
.boite-sms-date { margin-left: auto; color: var(--color-text-secondary); font-size: var(--text-xs); white-space: nowrap; }

.boite-sms-texte {
  margin: 0 0 var(--space-2);
  color: var(--color-text-primary);
  white-space: pre-wrap;
  overflow-wrap: anywhere;
  max-width: 92ch;
}
.boite-sms-item.est-non-lu .boite-sms-texte { font-weight: 600; }

.boite-sms-pied {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-2) var(--space-4);
}
.boite-sms-meta { color: var(--color-text-muted); font-size: var(--text-xs); }
.boite-sms-meta a { color: var(--color-text-secondary); }
.boite-sms-actions {
  margin-left: auto;
  display: flex;
  flex-wrap: wrap;
  align-items: flex-start;
  gap: var(--space-2);
}
.boite-sms-actions > form { display: inline-flex; }

.boite-sms-repondre { display: inline-block; }
.boite-sms-repondre > summary {
  display: inline-flex;
  align-items: center;
  list-style: none;
  cursor: pointer;
}
.boite-sms-repondre > summary::-webkit-details-marker { display: none; }
.boite-sms-repondre[open] { flex-basis: 100%; }
.boite-sms-repondre form {
  width: min(22rem, 100%);
  margin-top: var(--space-2);
  padding: var(--space-3);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md, 8px);
  background: var(--color-bg-input);
}
.boite-sms-repondre textarea { margin: var(--space-2) 0; width: 100%; resize: vertical; }

.boite-sms-vide {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--space-2);
  padding: var(--space-6) var(--space-4);
  text-align: center;
  color: var(--color-text-muted);
}
.boite-sms-vide-titre { margin: 0; color: var(--color-text-secondary); font-weight: 600; }
.boite-sms-vide p { margin: 0; }

@media (max-width: 768px) {
  .boite-sms-item { padding: var(--space-4) var(--space-3); gap: var(--space-2); }
  .boite-sms-numero { font-size: var(--text-sm); }
  .boite-sms-date { font-size: .7rem; }
  /* Actions sous le message : trois boutons de largeur égale qui passent à la ligne si besoin ;
     le formulaire de réponse ouvert occupe toute la largeur. */
  .boite-sms-pied { gap: var(--space-2); }
  .boite-sms-meta { flex-basis: 100%; }
  .boite-sms-actions { margin-left: 0; width: 100%; display: flex; flex-wrap: wrap; gap: var(--space-2); }
  .boite-sms-actions > form,
  .boite-sms-actions > .boite-sms-repondre { flex: 1 1 5.5rem; min-width: 0; }
  .boite-sms-actions > form > button,
  .boite-sms-actions > .boite-sms-repondre > summary {
    width: 100%;
    justify-content: center;
    padding-inline: .35rem;
  }
  .boite-sms-actions > .boite-sms-repondre[open] { flex-basis: 100%; }
  .boite-sms-actions > .boite-sms-repondre[open] > summary { width: auto; }
  .boite-sms-repondre form { width: 100%; }
}