/* ═══════════════════════════════════════════════
   ÉcoleAlerte — Admin Dashboard v2.0
   Refined ergonomic dark theme
   ═══════════════════════════════════════════════ */
/* Les polices sont désormais servies par ÉcoleAlerte : voir /fonts.css, lié
   par admin.html. L'@import qui se trouvait ici visait Google et n'apparaissait
   dans AUCUNE recherche sur « <link » — c'est ainsi qu'il a survécu au retrait
   des balises des cinq pages. Ne pas en remettre un. */

:root {
  --bg: #0c0e14;
  --bg2: #11141c;
  --surface: #171b27;
  --surface2: #1e2332;
  --surface3: #262c3f;
  --border: #232838;
  --border-light: #2e3548;
  --border-hover: #3d465c;
  --text: #e4e7ef;
  --text-muted: #8e95b0;
  --text-dim: #5c6380;
  --primary: #6c6fff;
  --primary-hover: #8385ff;
  --primary-soft: rgba(108,111,255,0.18);
  --primary-bg: rgba(108,111,255,0.10);
  --danger: #f04858;
  --danger-hover: #ff5f6d;
  --danger-bg: rgba(240,72,88,0.10);
  --success: #2dd4a0;
  --success-bg: rgba(45,212,160,0.10);
  --warning: #f5a623;
  --warning-bg: rgba(245,166,35,0.10);
  --orange: #e8725c;
  --orange-bg: rgba(232,114,92,0.10);
  --radius: 14px;
  --radius-sm: 8px;
  --radius-xs: 6px;
  --shadow: 0 2px 8px rgba(0,0,0,0.25);
  --shadow-lg: 0 12px 40px rgba(0,0,0,0.45);
  --font: 'DM Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  --mono: 'JetBrains Mono', 'Fira Code', monospace;
  --focus-ring: 0 0 0 2px var(--bg), 0 0 0 4px var(--primary);
  --transition: 0.2s cubic-bezier(0.4, 0, 0.2, 1);
  --transition-fast: 0.12s ease;
}

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

body {
  font-family: var(--font);
  background: var(--bg);
  color: var(--text);
  min-height: 100vh;
  line-height: 1.55;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  letter-spacing: 0.01em;
}

/* ── Scrollbar ── */
::-webkit-scrollbar { width: 6px; height: 6px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb { background: var(--border); border-radius: 10px; }
::-webkit-scrollbar-thumb:hover { background: var(--border-light); }

/* ── Accessibility ── */
:focus-visible { outline: none; box-shadow: var(--focus-ring); border-radius: var(--radius-sm); }
.skip-link {
  position: absolute; top: -100%; left: 16px; padding: 12px 24px;
  background: var(--primary); color: white; font-weight: 600;
  border-radius: var(--radius-sm); z-index: 9999; text-decoration: none;
  transition: top var(--transition);
}
.skip-link:focus { top: 16px; }
.sr-only {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0,0,0,0); white-space: nowrap; border: 0;
}
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
}

/* ══════════ LOGIN ══════════ */
#login-screen, #force-password-screen {
  display: flex; align-items: center; justify-content: center; min-height: 100vh;
  background: var(--bg); position: relative;
}
#login-screen::before, #force-password-screen::before {
  content: ''; position: absolute; inset: 0;
  background:
    radial-gradient(ellipse 600px 400px at 30% 20%, rgba(108,111,255,0.06) 0%, transparent 70%),
    radial-gradient(ellipse 500px 300px at 70% 80%, rgba(240,72,88,0.04) 0%, transparent 70%);
  pointer-events: none;
}
.login-card {
  background: var(--surface); border: 1px solid var(--border); border-radius: 20px;
  padding: 44px 40px; width: 420px; max-width: 92vw;
  box-shadow: var(--shadow-lg), 0 0 60px rgba(0,0,0,0.3);
  position: relative; z-index: 1;
  animation: fadeUp 0.4s cubic-bezier(0.4, 0, 0.2, 1);
}
@keyframes fadeUp { from { opacity: 0; transform: translateY(16px); } to { opacity: 1; transform: translateY(0); } }
.login-card h1 { font-size: 22px; font-weight: 700; letter-spacing: -0.02em; }
.login-card .login-sub { color: var(--text-dim); font-size: 13px; margin-bottom: 32px; margin-top: 4px; }
.login-card .form-group { margin-bottom: 18px; }
.login-card label {
  display: block; font-size: 11px; font-weight: 600; color: var(--text-dim);
  margin-bottom: 6px; text-transform: uppercase; letter-spacing: 0.8px;
}
.login-card input {
  width: 100%; padding: 11px 14px; background: var(--bg2); border: 1px solid var(--border);
  border-radius: var(--radius-sm); color: var(--text); font-size: 14px; font-family: var(--font);
  transition: border-color var(--transition), box-shadow var(--transition), background var(--transition);
}
.login-card input:hover { border-color: var(--border-light); }
.login-card input:focus { outline: none; border-color: var(--primary); box-shadow: 0 0 0 3px var(--primary-soft); background: var(--bg); }
.login-card input::placeholder { color: var(--text-dim); }

.password-wrapper { position: relative; display: flex; align-items: stretch; }
.password-wrapper input { padding-right: 44px; flex: 1; }
.password-toggle {
  position: absolute; right: 0; top: 0; bottom: 0; width: 42px;
  display: flex; align-items: center; justify-content: center;
  background: var(--surface2); border: none; border-left: 1px solid var(--border);
  color: var(--text); cursor: pointer; font-size: 15px;
  border-radius: 0 7px 7px 0; transition: color var(--transition), background var(--transition);
}
.password-toggle:hover { color: var(--text); background: var(--surface3); }

.btn-login {
  width: 100%; padding: 12px; background: var(--primary); color: white; border: none;
  border-radius: var(--radius-sm); font-weight: 600; font-size: 14px; cursor: pointer;
  font-family: var(--font); transition: all var(--transition); margin-top: 8px;
  letter-spacing: 0.02em;
}
.btn-login:hover { background: var(--primary-hover); box-shadow: 0 4px 16px rgba(108,111,255,0.3); transform: translateY(-1px); }
.btn-login:active { transform: translateY(0); }
#login-error { color: var(--danger); font-size: 12px; margin-top: 14px; text-align: center; min-height: 18px; font-weight: 500; }

/* ══════════ LAYOUT ══════════ */
#app { display: none; height: 100vh; }
.sidebar {
  position: fixed; left: 0; top: 0; bottom: 0; width: 248px; background: var(--bg2);
  border-right: 1px solid var(--border); display: flex; flex-direction: column; z-index: 100;
}
.sidebar-brand { padding: 22px 20px 18px; border-bottom: 1px solid var(--border); }
.sidebar-brand h2 { font-size: 15px; font-weight: 700; display: flex; align-items: center; gap: 8px; letter-spacing: -0.01em; }
.sidebar-brand .brand-sub { font-size: 11px; color: var(--text-dim); font-weight: 400; display: block; margin-top: 3px; }
.sidebar-nav { flex: 1; padding: 14px 10px; overflow-y: auto; }
.nav-section { font-size: 10px; font-weight: 600; color: var(--text-dim); text-transform: uppercase; letter-spacing: 1.2px; padding: 18px 12px 6px; }
.nav-item {
  display: flex; align-items: center; gap: 10px; padding: 9px 12px; border-radius: var(--radius-sm);
  color: var(--text-muted); font-size: 13px; font-weight: 500; cursor: pointer;
  transition: all var(--transition); margin-bottom: 2px; position: relative;
  border: none; background: none; width: 100%; text-align: left; font-family: var(--font);
}
.nav-item:hover { background: var(--surface); color: var(--text); }
.nav-item[aria-current="page"] {
  background: var(--primary-bg); color: var(--primary); font-weight: 600;
  box-shadow: inset 3px 0 0 var(--primary);
}
.nav-badge {
  position: absolute; right: 10px; background: var(--danger); color: white;
  font-size: 10px; font-weight: 700; padding: 2px 7px; border-radius: 10px;
  min-width: 18px; text-align: center; animation: pulse-badge 2s infinite;
}
@keyframes pulse-badge { 0%,100% { opacity: 1; } 50% { opacity: 0.7; } }
.sidebar-footer { padding: 14px 16px; border-top: 1px solid var(--border); }
.sidebar-user { font-size: 12px; color: var(--text-muted); margin-bottom: 10px; }
.sidebar-user strong { color: var(--text); display: block; font-weight: 600; margin-bottom: 1px; }
.btn-logout {
  width: 100%; padding: 9px; background: var(--surface); border: 1px solid var(--border);
  border-radius: var(--radius-sm); color: var(--text-muted); font-size: 12px; cursor: pointer;
  font-family: var(--font); transition: all var(--transition); font-weight: 500;
}
.btn-logout:hover { background: var(--danger-bg); color: var(--danger); border-color: rgba(240,72,88,0.3); }

.main { margin-left: 248px; flex: 1 1 auto; min-width: 0; height: 100vh; overflow-y: auto; background: var(--bg); }
.main-header {
  position: sticky; top: 0; z-index: 50;
  background: rgba(12,14,20,0.82);
  backdrop-filter: blur(16px); -webkit-backdrop-filter: blur(16px);
  border-bottom: 1px solid var(--border);
  padding: 18px 32px; display: flex; align-items: center; justify-content: space-between;
}
.main-header h1 { font-size: 19px; font-weight: 700; letter-spacing: -0.02em; }
.main-header .subtitle { font-size: 12px; color: var(--text-dim); margin-top: 2px; }
.main-content { padding: 24px 32px 40px; }
/* Bandeau de l'écran lecture seule : posé entre l'en-tête et .main-content, il
   n'hérite d'aucune marge et collait aux bords de l'écran. */
#staff-banner { padding: 16px 32px 0; }
.header-left { display: flex; align-items: center; gap: 12px; min-width: 0; }
.header-titles { min-width: 0; }
.header-titles h1 { overflow-wrap: anywhere; }
.header-actions { display: flex; gap: 8px; flex-shrink: 0; }

/* Bouton d'ouverture du tiroir : masqué tant que la barre latérale est fixe. */
.sidebar-toggle {
  display: none; align-items: center; justify-content: center;
  width: 40px; height: 40px; flex-shrink: 0; padding: 0;
  background: var(--surface); border: 1px solid var(--border);
  border-radius: var(--radius-sm); color: var(--text); cursor: pointer;
  transition: background var(--transition), border-color var(--transition);
}
.sidebar-toggle:hover { background: var(--surface2); border-color: var(--border-light); }

/* Voile du tiroir : sous la barre latérale (z-index 100), au-dessus du reste. */
.sidebar-backdrop { display: none; position: fixed; inset: 0; z-index: 90; background: rgba(0,0,0,0.55); }
.sidebar-backdrop.open { display: block; animation: fadeIn 0.2s ease; }

/* Conteneur de défilement horizontal des grands tableaux. */
.table-scroll { overflow-x: auto; }
.card-head { display: flex; justify-content: space-between; align-items: center; gap: 12px; margin-bottom: 16px; flex-wrap: wrap; }
.charts-2col { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
/* Sans min-width, un élément de grille impose au minimum la largeur intrinsèque
   de son contenu : le diagramme de douze mois élargissait la piste au-delà de
   l'écran au lieu de défiler dans sa propre boîte. */
.charts-2col > *, .alert-zone-grid > *, .stats-grid > * { min-width: 0; }
.stat-sub, .stat-label { overflow-wrap: anywhere; }
/* Les tableaux SMS sont injectés en HTML : leur donner un défilement propre. */
#sms-by-institution, #sms-by-city, #sms-by-school { overflow-x: auto; }

/* Tri de rechange, affiché seulement quand les en-têtes cliquables disparaissent. */
.table-sort { display: none; gap: 8px; }

/* ══════════ STAT CARDS ══════════ */
.stats-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(210px, 1fr)); gap: 14px; margin-bottom: 24px; }
.stat-card {
  background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius);
  padding: 20px 22px; position: relative; overflow: hidden;
  transition: border-color var(--transition), box-shadow var(--transition), transform var(--transition);
}
.stat-card:hover { border-color: var(--border-light); box-shadow: var(--shadow); transform: translateY(-2px); }
.stat-card::before { content: ''; position: absolute; top: 0; left: 0; right: 0; height: 3px; border-radius: 3px 3px 0 0; }
.stat-card.red::before { background: linear-gradient(90deg, var(--danger), #ff6b7a); }
.stat-card.green::before { background: linear-gradient(90deg, var(--success), #5aecc0); }
.stat-card.blue::before { background: linear-gradient(90deg, var(--primary), #9598ff); }
.stat-card.orange::before { background: linear-gradient(90deg, var(--orange), #f5a080); }
.stat-label { font-size: 11px; font-weight: 600; color: var(--text-dim); text-transform: uppercase; letter-spacing: 0.6px; }
.stat-value { font-size: 30px; font-weight: 700; margin: 8px 0 4px; font-family: var(--mono); letter-spacing: -0.02em; }
.stat-sub { font-size: 12px; color: var(--text-muted); }

/* ══════════ TABLE ══════════ */
.table-card { background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius); overflow: hidden; }
.table-toolbar {
  padding: 14px 20px; border-bottom: 1px solid var(--border);
  display: flex; align-items: center; gap: 10px; flex-wrap: wrap; background: var(--surface);
}
.table-toolbar input, .table-toolbar select {
  padding: 8px 12px; background: var(--bg2); border: 1px solid var(--border);
  border-radius: var(--radius-xs); color: var(--text); font-size: 13px; font-family: var(--font);
  transition: border-color var(--transition), box-shadow var(--transition);
}
.table-toolbar input { flex: 1; min-width: 180px; }
.table-toolbar input:hover, .table-toolbar select:hover { border-color: var(--border-light); }
.table-toolbar input:focus, .table-toolbar select:focus { outline: none; border-color: var(--primary); box-shadow: 0 0 0 3px var(--primary-soft); }

table { width: 100%; border-collapse: collapse; }
th {
  text-align: left; padding: 11px 16px; font-size: 10px; font-weight: 600; color: var(--text-dim);
  text-transform: uppercase; letter-spacing: 0.7px; border-bottom: 1px solid var(--border);
  cursor: pointer; user-select: none; white-space: nowrap; transition: color var(--transition);
  background: rgba(0,0,0,0.15);
}
th:hover { color: var(--text-muted); }
.sort-arrow { margin-left: 3px; opacity: 0.3; font-size: 10px; }
td {
  padding: 11px 16px; font-size: 13px; border-bottom: 1px solid var(--border);
  vertical-align: middle; transition: background var(--transition-fast);
}
tr:hover td { background: rgba(108,111,255,0.03); }
.table-footer { padding: 12px 20px; font-size: 12px; color: var(--text-dim); border-top: 1px solid var(--border); font-weight: 500; }

.badge-role { display: inline-block; padding: 3px 9px; border-radius: 5px; font-size: 11px; font-weight: 600; letter-spacing: 0.02em; }
.badge-role.admin { background: var(--primary-bg); color: var(--primary); }
.badge-role.referent { background: var(--warning-bg); color: var(--warning); }
.badge-role.mairie { background: var(--success-bg); color: var(--success); }
.badge-role.super { background: var(--danger-bg); color: var(--danger); }
.badge-role.default { background: var(--surface2); color: var(--text-muted); }

/* ══════════ BUTTONS ══════════ */
.btn-sm {
  padding: 7px 13px; border-radius: var(--radius-xs); font-size: 12px; font-weight: 600;
  cursor: pointer; font-family: var(--font); border: 1px solid var(--border);
  transition: all var(--transition); display: inline-flex; align-items: center; gap: 5px;
}
.btn-primary-sm { background: var(--primary); color: white; border-color: var(--primary); }
.btn-primary-sm:hover { background: var(--primary-hover); box-shadow: 0 2px 10px rgba(108,111,255,0.25); }
.btn-ghost { background: transparent; color: var(--text-muted); }
.btn-ghost:hover { background: var(--surface2); color: var(--text); border-color: var(--border-light); }
.btn-danger-sm { background: var(--danger-bg); color: var(--danger); border-color: transparent; }
.btn-danger-sm:hover { background: var(--danger); color: white; box-shadow: 0 2px 10px rgba(240,72,88,0.25); }
.btn-password {
  background: var(--warning-bg); color: var(--warning); border: none;
  padding: 5px 9px; border-radius: var(--radius-xs); cursor: pointer;
  font-size: 13px; margin-left: 3px; transition: all var(--transition);
}
.btn-password:hover { background: var(--warning); color: white; box-shadow: 0 2px 10px rgba(245,166,35,0.25); }

/* ══════════ ALERT ZONE ══════════ */
.alert-zone-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); gap: 16px; margin-bottom: 24px; }
.alert-card {
  background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius);
  padding: 28px; text-align: center; cursor: pointer;
  transition: all 0.25s cubic-bezier(0.4, 0, 0.2, 1);
  position: relative; overflow: hidden;
}
.alert-card::after {
  content: ''; position: absolute; inset: 0; opacity: 0;
  transition: opacity 0.25s; pointer-events: none; border-radius: var(--radius);
}
.alert-card.ppms::after { background: radial-gradient(circle at 50% 80%, rgba(240,72,88,0.08) 0%, transparent 70%); }
.alert-card.exercise::after { background: radial-gradient(circle at 50% 80%, rgba(232,114,92,0.08) 0%, transparent 70%); }
.alert-card:hover::after { opacity: 1; }
.alert-card:hover { border-color: var(--border-hover); transform: translateY(-3px); box-shadow: var(--shadow-lg); }
.alert-card .icon { font-size: 42px; margin-bottom: 14px; }
.alert-card .label { font-size: 14px; font-weight: 700; margin-bottom: 6px; letter-spacing: -0.01em; }
.alert-card .desc { font-size: 12px; color: var(--text-dim); line-height: 1.5; }
.alert-card.ppms { border-color: rgba(240,72,88,0.2); }
.alert-card.ppms:hover { border-color: rgba(240,72,88,0.5); }
.alert-card.exercise { border-color: rgba(232,114,92,0.2); }
.alert-card.exercise:hover { border-color: rgba(232,114,92,0.5); }

/* ══════════ LICENCE ══════════ */
.licence-bar {
  background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius);
  padding: 18px 22px; margin-bottom: 14px; transition: border-color var(--transition);
}
.licence-bar:hover { border-color: var(--border-light); }
.licence-header { display: flex; justify-content: space-between; align-items: center; margin-bottom: 10px; }
.licence-header .city { font-weight: 600; text-transform: capitalize; font-size: 14px; }
.licence-header .count { font-family: var(--mono); font-weight: 600; font-size: 13px; }
.progress-bar { height: 5px; background: var(--bg); border-radius: 10px; overflow: hidden; }
.progress-fill { height: 100%; border-radius: 10px; transition: width 0.6s cubic-bezier(0.4, 0, 0.2, 1); }
.licence-dates { font-size: 11px; color: var(--text-dim); margin-top: 8px; }

/* ══════════ CHARTS ══════════ */
.chart-card {
  background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius);
  padding: 22px; margin-bottom: 16px; transition: border-color var(--transition);
}
.chart-card:hover { border-color: var(--border-light); }
.chart-card h3 { font-size: 13px; font-weight: 600; margin-bottom: 18px; color: var(--text-muted); text-transform: uppercase; letter-spacing: 0.5px; }
.bar-chart { display: flex; align-items: flex-end; gap: 6px; height: 160px; padding-top: 10px; }
.bar-col { flex: 1; display: flex; flex-direction: column; align-items: center; justify-content: flex-end; gap: 4px; height: 100%; }
/* La taille passe par --part, posé en ligne par admin.js. La MÊME valeur sert
   de hauteur en colonnes et de largeur en barres horizontales (voir plus bas,
   .bar-chart-libelles sous 700 px) : sans ça il faudrait deux styles en ligne
   et ils finiraient par diverger. */
.bar {
  width: 100%; height: var(--part, 0%); border-radius: 4px 4px 0 0;
  transition: height 0.6s cubic-bezier(0.4, 0, 0.2, 1), width 0.6s cubic-bezier(0.4, 0, 0.2, 1);
  min-height: 2px;
}
.bar.danger { background: linear-gradient(180deg, var(--danger), #c83a48); }
.bar.orange { background: linear-gradient(180deg, var(--orange), #c45a44); }
.bar.success { background: linear-gradient(180deg, var(--success), #1fa87a); }
.bar.primary { background: linear-gradient(180deg, var(--primary), #5255d0); }
.bar-label { font-size: 10px; color: var(--text-dim); font-weight: 500; }
.bar-value { font-size: 11px; font-weight: 600; font-family: var(--mono); color: var(--text-muted); }

/* ══════════ LIVE INDICATOR ══════════ */
.live-alerts { margin-bottom: 24px; }
.live-alert-item {
  display: flex; align-items: center; gap: 14px; padding: 14px 18px;
  background: var(--danger-bg); border: 1px solid rgba(240,72,88,0.25);
  border-radius: var(--radius-sm); margin-bottom: 8px;
  animation: pulse-border 2.5s ease-in-out infinite;
}
@keyframes pulse-border { 0%,100% { border-color: rgba(240,72,88,0.25); } 50% { border-color: rgba(240,72,88,0.6); } }
.live-alert-text { flex: 1; min-width: 0; }
.live-dot {
  width: 8px; height: 8px; border-radius: 50%; background: var(--danger);
  animation: blink 1.2s ease-in-out infinite; flex-shrink: 0;
  box-shadow: 0 0 8px rgba(240,72,88,0.5);
}
@keyframes blink { 0%,100% { opacity: 1; } 50% { opacity: 0.25; } }

/* ══════════ ACCUSÉS DE RÉCEPTION ══════════ */
/* Se glisse sous .live-alert-item : la marge négative rattrape les 8 px de l'item
   au-dessus pour que le bloc reste visuellement rattaché à son alerte. */
.ack-block {
  margin: -8px 0 8px; padding: 12px 18px;
  background: var(--surface); border: 1px solid var(--border);
  border-top: none; border-radius: 0 0 var(--radius-sm) var(--radius-sm);
}
.ack-title {
  font-size: 12px; font-weight: 600; text-transform: uppercase;
  letter-spacing: 0.04em; color: var(--text-muted); margin-bottom: 8px;
  /* Le bouton « J'ai compris » du directeur vient se poser à droite du titre.
     Sans ce flex il passait à la ligne et poussait la liste vers le bas. */
  display: flex; align-items: center; gap: 8px; flex-wrap: wrap;
}
.ack-title .btn-ack, .ack-title .ack-done, .ack-title .ack-declencheur { margin-left: auto; }
/* « vous avez déclenché » : une explication, pas une action. Volontairement
   discret et sans majuscules, pour ne pas se lire comme un bouton désactivé. */
.ack-declencheur {
  font-size: 11px; font-weight: 400; font-style: italic;
  text-transform: none; letter-spacing: 0;
  color: var(--text-dim); flex-shrink: 0;
}
.ack-list { list-style: none; display: flex; flex-direction: column; gap: 4px; }
.ack-person { display: flex; align-items: center; gap: 8px; font-size: 13px; }
.ack-mark {
  width: 16px; text-align: center; flex-shrink: 0;
  color: var(--text-dim); font-weight: 700;
}
.ack-mark.ok { color: var(--success); }
.ack-name { color: var(--text); }
.ack-person .ack-name { font-weight: 500; }
.ack-role { color: var(--text-dim); font-size: 12px; }
.ack-time { margin-left: auto; font-family: var(--mono); font-size: 11px; color: var(--text-muted); }
.ack-empty { font-size: 12px; color: var(--text-dim); }
.btn-ack { background: var(--success-bg); border-color: rgba(45,212,160,0.35); color: var(--success); }
.ack-done { font-size: 13px; font-weight: 600; color: var(--success); flex-shrink: 0; }

/* ══════════ MODALS ══════════ */
.modal-overlay {
  display: none; position: fixed; inset: 0; background: rgba(0,0,0,0.65);
  backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px);
  z-index: 200; align-items: center; justify-content: center;
}
.modal-overlay.open { display: flex; animation: fadeIn 0.2s ease; }
@keyframes fadeIn { from { opacity: 0; } to { opacity: 1; } }
.modal-box {
  background: var(--surface); border: 1px solid var(--border); border-radius: 18px;
  padding: 30px; width: 480px; max-width: 92vw; max-height: 85vh;
  overflow-y: auto; box-shadow: var(--shadow-lg), 0 0 80px rgba(0,0,0,0.3);
  animation: modalSlide 0.25s cubic-bezier(0.4, 0, 0.2, 1);
}
@keyframes modalSlide { from { transform: translateY(12px); opacity: 0; } to { transform: translateY(0); opacity: 1; } }
.modal-box h2 { font-size: 17px; font-weight: 700; margin-bottom: 4px; letter-spacing: -0.01em; }
.modal-box .modal-desc { font-size: 13px; color: var(--text-dim); margin-bottom: 22px; line-height: 1.5; }
.modal-box label { display: block; font-size: 11px; font-weight: 600; color: var(--text-dim); margin-bottom: 5px; text-transform: uppercase; letter-spacing: 0.5px; }
.modal-box input, .modal-box select {
  width: 100%; padding: 10px 13px; background: var(--bg2); border: 1px solid var(--border);
  border-radius: var(--radius-xs); color: var(--text); font-size: 13px; margin-bottom: 14px;
  font-family: var(--font); transition: border-color var(--transition), box-shadow var(--transition);
}
.modal-box input:hover, .modal-box select:hover { border-color: var(--border-light); }
.modal-box input:focus, .modal-box select:focus { outline: none; border-color: var(--primary); box-shadow: 0 0 0 3px var(--primary-soft); }
/* Largeur réduite de la modale de confirmation. En classe et non en style
   inline, pour que le passage en feuille pleine largeur puisse la reprendre. */
.modal-narrow { width: 380px; }
.modal-actions { display: flex; gap: 10px; justify-content: flex-end; margin-top: 22px; }
.modal-actions button {
  padding: 10px 22px; border-radius: var(--radius-sm); font-weight: 600; font-size: 13px;
  cursor: pointer; font-family: var(--font); border: none; transition: all var(--transition);
  letter-spacing: 0.01em;
}
.modal-actions .btn-cancel { background: var(--surface2); color: var(--text-muted); }
.modal-actions .btn-cancel:hover { background: var(--surface3); color: var(--text); }
.modal-actions .btn-confirm { background: var(--primary); color: white; }
.modal-actions .btn-confirm:hover { background: var(--primary-hover); box-shadow: 0 4px 14px rgba(108,111,255,0.3); }
.modal-actions .btn-confirm.danger { background: var(--danger); }
.modal-actions .btn-confirm.danger:hover { background: var(--danger-hover); box-shadow: 0 4px 14px rgba(240,72,88,0.3); }

/* ══════════ TOAST ══════════ */
#toast-container { position: fixed; top: 18px; right: 18px; z-index: 300; display: flex; flex-direction: column; gap: 8px; }
.toast {
  background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius-sm);
  padding: 14px 18px; font-size: 13px; box-shadow: var(--shadow-lg);
  display: flex; align-items: center; gap: 10px;
  animation: toastIn 0.35s cubic-bezier(0.4, 0, 0.2, 1);
  min-width: 280px; max-width: 420px; font-weight: 500;
}
.toast.success { border-left: 3px solid var(--success); }
.toast.error { border-left: 3px solid var(--danger); }
.toast.warning { border-left: 3px solid var(--warning); }
.toast.info { border-left: 3px solid var(--primary); }
@keyframes toastIn { from { transform: translateX(100%) scale(0.95); opacity: 0; } to { transform: translateX(0) scale(1); opacity: 1; } }

/* ══════════ LOG ══════════ */
.log-timeline { max-height: 400px; overflow-y: auto; }
.log-entry {
  display: flex; align-items: flex-start; gap: 14px; padding: 12px 4px;
  border-bottom: 1px solid var(--border); transition: background var(--transition-fast);
}
.log-entry:hover { background: rgba(108,111,255,0.02); }
.log-icon {
  width: 34px; height: 34px; border-radius: var(--radius-xs);
  display: flex; align-items: center; justify-content: center;
  font-size: 16px; flex-shrink: 0;
}
.log-icon.red { background: var(--danger-bg); }
.log-icon.orange { background: var(--orange-bg); }
.log-icon.green { background: var(--success-bg); }
.log-icon.blue { background: var(--primary-bg); }
.log-text { flex: 1; }
.log-text .title { font-size: 13px; font-weight: 600; }
.log-text .detail { font-size: 12px; color: var(--text-dim); margin-top: 3px; }

/* ══════════ PPMS SELECTOR ══════════ */
.ppms-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin: 16px 0; }
.ppms-option {
  display: flex; align-items: center; gap: 10px; padding: 14px 16px; background: var(--bg2);
  border: 2px solid var(--border); border-radius: var(--radius-sm); cursor: pointer;
  transition: all var(--transition);
}
.ppms-option:hover { border-color: var(--border-hover); background: var(--surface2); }
.ppms-option[aria-checked="true"] { border-color: var(--danger); background: var(--danger-bg); box-shadow: 0 0 12px rgba(240,72,88,0.1); }
.ppms-option .ppms-icon { font-size: 22px; }
.ppms-option .ppms-label { font-size: 13px; font-weight: 600; }

.school-check {
  display: flex; align-items: center; gap: 8px; padding: 7px 4px;
  border-radius: var(--radius-xs); transition: background var(--transition-fast);
}
.school-check:hover { background: var(--surface2); }
.school-check input[type="checkbox"] { width: 16px; height: 16px; accent-color: var(--primary); cursor: pointer; }
.school-check label { font-size: 13px; color: var(--text-muted); cursor: pointer; margin-bottom: 0; }

code {
  font-family: var(--mono); font-size: 11px; background: var(--bg2);
  padding: 2px 7px; border-radius: 4px; color: var(--text-muted); letter-spacing: 0.03em;
}
.form-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }

/* ══════════ RESPONSIVE ══════════ */
/* La barre latérale passe en tiroir sous 1024 px, les graphiques se replient
   sous 900 px, et sous 700 px la page bascule en présentation téléphone :
   tableaux en cartes, modales en feuille, défilement rendu au document. Deux
   paliers de détail suivent, à 430 px puis 370 px. */

/* -- Tablette : barre latérale en tiroir -- */
@media (max-width: 1024px) {
  .sidebar-toggle { display: inline-flex; }
  .sidebar {
    width: 264px; transform: translateX(-100%);
    transition: transform var(--transition);
  }
  .sidebar.open { transform: translateX(0); box-shadow: var(--shadow-lg); }
  .sidebar-footer { padding-bottom: max(14px, env(safe-area-inset-bottom)); }
  .main { margin-left: 0; }
  .main-header { padding: 14px 20px; }
  .main-content { padding: 20px 20px 32px; }
  #staff-banner { padding: 16px 20px 0; }
  .stats-grid { grid-template-columns: repeat(auto-fit, minmax(170px, 1fr)); }
  /* Largeur plancher des tableaux : sans elle, le width:100% comprime les
     colonnes jusqu'à écrire un nom d'école sur six lignes au lieu de laisser
     .table-scroll défiler. Bornée à cette tranche pour ne rien changer au
     rendu bureau, où les tableaux tiennent tels quels. */
  #schools-table, #cities-table { min-width: 640px; }
  #users-table { min-width: 1040px; }
  /* Le tiroir ouvert fige le fond, sinon le défilement passe sous le voile. */
  body.sidebar-open { overflow: hidden; }
}

/* -- Les deux graphiques côte à côte ne tiennent plus -- */
@media (max-width: 900px) {
  .charts-2col { grid-template-columns: 1fr; }
}

/* -- Téléphone -- */
@media (max-width: 700px) {
  /* Rendre le défilement au document : hauteur fixe + conteneur scrollable
     empêchent la barre d'adresse de se replier et tronquent le bas de page. */
  #app { height: auto; min-height: 100vh; min-height: 100dvh; }
  .main { height: auto; min-height: 100vh; min-height: 100dvh; overflow-y: visible; }

  .main-header { padding: 10px 14px; gap: 10px; }
  .main-header h1 { font-size: 16px; }
  .main-header .subtitle { font-size: 11px; }
  .main-content { padding: 14px 14px 32px; }
  #staff-banner { padding: 14px 14px 0; }
  .nav-item { padding: 12px 14px; font-size: 14px; }

  /* Indicateurs : deux colonnes tant que ça reste lisible. */
  .stats-grid { grid-template-columns: repeat(auto-fit, minmax(140px, 1fr)); gap: 10px; margin-bottom: 18px; }
  .stat-card { padding: 15px 16px; }
  .stat-value { font-size: 24px; }
  .stat-card:hover { transform: none; }

  .alert-zone-grid { grid-template-columns: 1fr; }
  .alert-card { padding: 20px; }
  .alert-card:hover { transform: none; }
  .alert-card .icon { font-size: 34px; margin-bottom: 10px; }
  .form-grid { grid-template-columns: 1fr; }
  .chart-card { padding: 16px; }

  /* Barre d'outils : la recherche sur sa ligne, le reste s'écoule à côté. */
  .table-toolbar { flex-direction: row; flex-wrap: wrap; align-items: stretch; gap: 8px; padding: 12px 14px; }
  .table-toolbar input[type="search"] { flex: 1 1 100%; min-width: 0; }
  .table-toolbar select { flex: 1 1 calc(50% - 4px); min-width: 0; }
  .table-toolbar .btn-sm { flex: 1 1 auto; justify-content: center; min-height: 40px; }
  .table-sort { display: flex; flex: 1 1 100%; }
  .table-sort select { flex: 1; }
  .table-sort .btn-sm { flex: 0 0 auto; }

  /* Tableaux en cartes : huit colonnes d'utilisateurs ne tiennent pas sur un
     téléphone, et le défilement horizontal cache la colonne Actions. Le libellé
     de chaque cellule vient de son data-label, posé au rendu dans admin.js. */
  .table-scroll { overflow-x: visible; }
  .table-card table, .table-card tbody, .table-card tr, .table-card td { display: block; width: 100%; }
  /* Les largeurs plancher posées au palier 1024 px sont des sélecteurs d'id :
     il faut les neutraliser nommément, une règle de classe ne l'emporterait pas. */
  #schools-table, #cities-table, #users-table { min-width: 0; }
  .table-card thead { display: none; }
  .table-card tbody tr {
    background: var(--bg2); border: 1px solid var(--border);
    border-radius: var(--radius-sm); padding: 4px 14px; margin: 12px;
  }
  .table-card tbody tr:hover td { background: transparent; }
  /* Le libellé est positionné hors du flux plutôt que posé en colonne de grille :
     une cellule qui contient plusieurs éléments (deux badges de rôle, trois
     boutons d'action) doit les garder alignés dans la zone de valeur, alors
     qu'en grille chacun devenait un élément et repassait sous le libellé. */
  .table-card td {
    display: block; position: relative; min-height: 38px;
    padding: 9px 0 9px 40%;
    border-bottom: 1px solid var(--border); overflow-wrap: anywhere;
  }
  .table-card tr td:last-child { border-bottom: none; }
  .table-card td::before {
    content: attr(data-label); position: absolute; left: 0; top: 11px; width: 36%;
    font-size: 10px; font-weight: 600; letter-spacing: 0.7px;
    text-transform: uppercase; color: var(--text-dim);
  }
  .table-card td[data-label="Actions"] .btn-sm { min-height: 38px; }
  .table-footer { padding: 10px 14px; }

  /* Alertes en cours : le texte prend sa ligne, le bouton de levée reste large. */
  .live-alert-item { flex-wrap: wrap; padding: 12px 14px; }
  .live-alert-text { flex: 1 1 100%; }
  .live-alert-item .btn-sm { flex: 1 1 auto; justify-content: center; min-height: 38px; }
  .live-alerts-header { flex-wrap: wrap; }

  /* Graphiques : colonnes à largeur plancher, le diagramme défile plutôt que
     d'écraser douze mois dans la largeur d'un téléphone. */
  .bar-chart { overflow-x: auto; height: 150px; gap: 8px; }
  .bar-col { min-width: 34px; }
  .bar-label { white-space: nowrap; }

  /* ── « Événements par type » en barres HORIZONTALES sur téléphone ──────
     Les libellés de types sont longs — « Confinement immédiat », « Alerte à la
     bombe ». En colonnes de 34 px avec white-space: nowrap, ils débordaient les
     uns sur les autres et on ne savait plus quelle barre était laquelle.
     Couché, un libellé long se lit sans contorsion et sans défilement latéral.
     Ce basculement ne vaut que pour ce graphique : les mois sont courts, les
     noms d'écoles déjà tronqués à dix caractères. */
  .bar-chart.bar-chart-libelles {
    flex-direction: column;
    align-items: stretch;
    height: auto;
    overflow-x: visible;
    gap: 10px;
  }
  .bar-chart-libelles .bar-col {
    flex-direction: row;
    align-items: center;
    justify-content: flex-start;
    height: auto;
    min-width: 0;
    gap: 8px;
  }
  .bar-chart-libelles .bar-label {
    order: 0;
    flex: 0 0 40%;
    text-align: right;
    white-space: normal;   /* un libellé long a le droit de passer à la ligne */
    line-height: 1.25;
    font-size: 11px;
  }
  .bar-chart-libelles .bar {
    order: 1;
    width: var(--part, 0%);
    height: 12px;
    min-width: 3px;        /* une valeur à 1 reste visible */
    min-height: 0;
    border-radius: 0 4px 4px 0;
  }
  .bar-chart-libelles .bar-value {
    order: 2;
    flex-shrink: 0;
    font-size: 12px;
    color: var(--text-muted);
  }

  /* Modales en feuille ancrée au bas de l'écran. */
  .modal-overlay { align-items: flex-end; }
  .modal-box {
    width: 100%; max-width: 100%; max-height: 92vh; max-height: 92dvh;
    border-radius: 18px 18px 0 0; padding: 24px 18px;
    padding-bottom: max(24px, env(safe-area-inset-bottom));
    animation: sheetSlide 0.25s cubic-bezier(0.4, 0, 0.2, 1);
  }
  @keyframes sheetSlide { from { transform: translateY(100%); } to { transform: translateY(0); } }
  /* Action principale en haut : le bas de l'écran est la zone du pouce, on n'y
     met pas un bouton « Déclencher ». */
  .modal-actions { flex-direction: column-reverse; gap: 8px; }
  .modal-actions button { width: 100%; padding: 13px 22px; }

  /* Bandeaux : pleine largeur, au-dessus de l'en-tête collant. */
  #toast-container { top: 10px; left: 10px; right: 10px; }
  .toast { min-width: 0; max-width: none; }
}

/* -- Petits téléphones -- */
@media (max-width: 430px) {
  .ppms-grid { grid-template-columns: 1fr; }
  .table-toolbar select { flex: 1 1 100%; }
  /* L'icône suffit, le libellé du bouton d'export déborderait. */
  .btn-label { display: none; }
}

/* -- Sous 370 px, le libellé d'une cellule ne tient plus à côté de sa valeur -- */
@media (max-width: 370px) {
  .table-card td { padding: 24px 0 8px; }
  .table-card td::before { top: 6px; width: auto; }
}

/* ── État du lien temps réel (audit 2.5) ──────────────────────────────────
   Le tableau de bord ne se réabonnait pas après une coupure et ne le disait
   pas. Ce témoin dit ce que l'écran est en train de faire. Volontairement
   discret quand tout va bien, et impossible à rater quand ça ne va pas : c'est
   l'inverse qui serait fatigant, donc ignoré. */
.etat-lien {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 12px;
  font-weight: 500;
  padding: 4px 10px;
  border-radius: 999px;
  white-space: nowrap;
  border: 1px solid transparent;
}
.etat-lien::before {
  content: '';
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: currentColor;
  flex-shrink: 0;
}
.etat-lien.ok      { color: var(--success, #2a9d8f); background: rgba(42,157,143,.10); border-color: rgba(42,157,143,.25); }
.etat-lien.reprise { color: var(--warning, #e9a23b); background: rgba(233,162,59,.12); border-color: rgba(233,162,59,.30); }
.etat-lien.coupe,
.etat-lien.expire  { color: var(--danger, #e63946); background: rgba(230,57,70,.12); border-color: rgba(230,57,70,.35); font-weight: 600; }

/* La pastille clignote tant que le lien n'est pas rétabli : sur un écran qu'on
   regarde de loin dans une salle des maîtres, la couleur seule ne suffit pas. */
.etat-lien.coupe::before,
.etat-lien.expire::before { animation: etat-lien-pulse 1.2s ease-in-out infinite; }
@keyframes etat-lien-pulse { 0%, 100% { opacity: 1; } 50% { opacity: .25; } }

@media (prefers-reduced-motion: reduce) {
  .etat-lien.coupe::before,
  .etat-lien.expire::before { animation: none; }
}

@media (max-width: 700px) {
  /* Sur petit écran l'en-tête est serré : on garde la pastille, on retire le
     mot. Le title et aria-live restent, donc l'information n'est pas perdue. */
  .etat-lien { font-size: 0; gap: 0; padding: 6px; }
}

/* ── Accusés de réception : ce que le compteur ne dit pas (audit 3.8) ──────
   Le panneau affichait « N sur M » avec, pour M, TOUT le personnel de l'école —
   alors que « J'ai compris » n'existe que dans l'application et sur cet écran.
   Le SMS n'offre aucun moyen de confirmer. Ces deux styles portent ce que le
   chiffre seul ne pouvait pas dire. */
.ack-restants { color: var(--text-dim); font-weight: 400; }
.ack-sans-appli {
  font-size: 10px;
  font-style: italic;
  color: var(--warning, #e9a23b);
  white-space: nowrap;
  margin-left: 8px;
}
.ack-note {
  font-size: 11px;
  line-height: 1.4;
  color: var(--text-dim);
  padding: 8px 4px 0;
  border-top: 1px solid var(--border);
  margin-top: 8px;
}