/* ==========================================================================
   DIRECTION ARTISTIQUE INSTITUTIONNELLE & ÉLÉGANTE (THÈME CLAIR PAR DÉFAUT)
   Bleu Marine Profond, Blanc Pur, Typographie de Caractère & Nuances Douces
   ========================================================================== */

:root {
  /* Typographies Premium */
  --font-title: 'Plus Jakarta Sans', -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
  --font-body: 'DM Sans', -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
  --font-editorial: 'Playfair Display', Georgia, serif;

  /* Palette Principale - Mode Clair Institutionnel (Par Défaut) */
  --bg-main: #F8F9FA;                      /* Fond principal clair #F8F9FA */
  --bg-surface: #FFFFFF;                   /* Cartes sur fond blanc pur #FFFFFF */
  --bg-surface-elevated: #F1F5F9;          /* Surface secondaire ardoise très claire */
  --bg-input: #FFFFFF;                     /* Champs de saisie sur blanc pur */
  --bg-glass: rgba(255, 255, 255, 0.96);

  /* Structure & Bleu d'accentuation accessible WCAG AA */
  --navy-deep: #0F172A;                    /* Bleu ardoise profond */
  --navy-academic: #1E3A8A;                /* Bleu académique */
  --signal-blue: #2563EB;                  /* Bleu primaire accessible #2563EB */
  --signal-blue-hover: #1D4ED8;            /* Bleu primaire au survol */
  --signal-blue-soft: rgba(37, 99, 235, 0.08); /* Voile bleu subtil */
  --accent-color: #2563EB;
  --primary-blue: #2563EB;

  /* Couleurs de statut institutionnelles sobres */
  --color-danger: #EF4444;                 /* Rouge modéré */
  --color-warning: #D97706;                /* Ambre institutionnel */
  --color-success: #059669;                /* Émeraude officiel */
  --color-info: #0284C7;                   /* Ciel saphir */

  /* Repères thématiques */
  --color-poubelle: #EF4444;
  --color-megaphone: #D97706;
  --color-reunion: #2563EB;

  /* Typographie & Contraste (DM Sans & Plus Jakarta Sans) */
  --text-main: #0F172A;                    /* Texte principal #0F172A */
  --text-muted: #475569;                   /* Ardoise douce */
  --text-subtle: #64748B;                  /* Ardoise claire */
  --border-color: #E2E8F0;                 /* Bordures #E2E8F0 */
  --border-focus: #2563EB;

  /* Rayons & Ombres très délicates (Casser le Card Layout rigide) */
  --radius-xs: 6px;
  --radius-sm: 8px;
  --radius-md: 12px;
  --radius-lg: 16px;
  --radius-pill: 999px;
  --shadow-sm: 0 1px 3px rgba(15, 23, 42, 0.04);
  --shadow-md: 0 4px 14px -2px rgba(15, 23, 42, 0.05), 0 2px 6px -2px rgba(15, 23, 42, 0.02);
  --shadow-lg: 0 10px 25px -4px rgba(15, 23, 42, 0.07);

  /* Rétrocompatibilité composants & tags */
  --pronote-teal: var(--signal-blue);
  --pronote-teal-dark: var(--navy-academic);
  --nature-teal-light: var(--signal-blue-soft);
  --pronote-teal-light: var(--signal-blue);
  --pronote-teal-soft: var(--signal-blue-soft);
  --pronote-teal-border: rgba(29, 78, 216, 0.18);

  /* Transitions douces & fluides */
  --transition-fast: 0.15s cubic-bezier(0.16, 1, 0.3, 1);
  --transition-normal: 0.22s cubic-bezier(0.16, 1, 0.3, 1);
}

/* Reset de base */
*, *::before, *::after {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
  -webkit-tap-highlight-color: transparent;
}

html, body {
  width: 100%;
  height: 100%;
  overflow-x: hidden;
  font-family: var(--font-body);
  line-height: 1.55;
  background-color: var(--bg-main);
  color: var(--text-main);
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
}

/* Titres & Typographies avec personnalité */
h1, h2, h3, h4, h5, h6, .brand-title, .portal-title, .nav-tab, .hub-section-title, .modal-title {
  font-family: var(--font-title);
  letter-spacing: -0.025em;
}

.font-editorial {
  font-family: var(--font-editorial);
}

/* Structure générale */
.app-wrapper {
  display: flex;
  flex-direction: column;
  min-height: 100vh;
  width: 100%;
  background-color: var(--bg-main);
}

/* ==========================================================================
   HEADER & NAVIGATION SIGNAL
   ========================================================================== */
.app-header {
  position: sticky;
  top: 0;
  z-index: 1000;
  background-color: var(--bg-surface);
  border-bottom: 1px solid var(--border-color);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
}

.header-container {
  width: 100%;
  max-width: 1600px;
  margin: 0 auto;
  padding: 0.45rem 1.25rem;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.75rem;
}

.brand-group {
  display: flex;
  align-items: center;
  gap: 0.85rem;
  cursor: pointer;
  user-select: none;
  transition: opacity 0.2s ease;
}

.brand-group:hover {
  opacity: 0.9;
}

.brand-logo-frame {
  width: 44px;
  height: 44px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 12px;
  background: rgba(255, 255, 255, 0.05);
  border: 1px solid rgba(255, 255, 255, 0.12);
  overflow: hidden;
  padding: 4px;
  transition: transform 0.2s ease, border-color 0.2s ease;
}

.brand-group:hover .brand-logo-frame {
  transform: scale(1.04);
  border-color: rgba(255, 255, 255, 0.25);
}

.brand-official-logo {
  max-width: 100%;
  max-height: 100%;
  object-fit: contain;
  filter: brightness(0) invert(1);
  transition: filter 0.3s ease;
}

.brand-title {
  display: flex;
  align-items: center;
  gap: 6px;
  font-weight: 700;
  font-size: 1.05rem;
  color: var(--text-main);
  line-height: 1.1;
  letter-spacing: -0.3px;
}

.school-badge-city {
  display: inline-block;
  font-size: 0.65rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  padding: 2px 7px;
  border-radius: 999px;
  background: rgba(16, 185, 129, 0.15);
  color: #34d399;
  border: 1px solid rgba(16, 185, 129, 0.3);
}

.brand-subtitle {
  font-size: 0.74rem;
  color: var(--text-muted);
  font-weight: 500;
  margin-top: 1px;
}

/* Navigation principale Desktop (Dock Liquid Pill & Bulle Blanche Glissante) */
.desktop-nav {
  position: relative;
  display: flex;
  align-items: center;
  gap: 3px;
  background: rgba(255, 255, 255, 0.05);
  border: 1px solid var(--border-color);
  padding: 3px;
  border-radius: var(--radius-pill);
  box-shadow: 0 4px 18px rgba(0, 0, 0, 0.25), 0 0 12px rgba(168, 188, 152, 0.08);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  flex-shrink: 1;
}

/* Bulle Glissante Animée Desktop (Sobre & Fluide) */
.desktop-nav-pill {
  position: absolute;
  top: 4px;
  left: 0;
  height: calc(100% - 8px);
  width: 0;
  background: #FFFFFF;
  border-radius: var(--radius-pill);
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.2);
  transition: transform 0.3s cubic-bezier(0.34, 1.45, 0.64, 1), width 0.3s cubic-bezier(0.34, 1.45, 0.64, 1), opacity 0.2s ease;
  pointer-events: none;
  z-index: 1;
  opacity: 0;
}

body.theme-pronote-light .desktop-nav-pill {
  background: var(--signal-blue);
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.15);
}

.nav-tab {
  position: relative;
  z-index: 2;
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  padding: 0.38rem 0.75rem;
  border: none;
  background: transparent;
  color: var(--text-muted);
  font-size: 0.8rem;
  font-weight: 600;
  border-radius: var(--radius-pill);
  cursor: pointer;
  white-space: nowrap;
  transition: color 0.22s ease, opacity 0.2s ease;
}

.nav-tab:hover {
  color: var(--text-main);
}

.nav-tab.active {
  background: transparent !important;
  color: #0b111a !important;
  font-weight: 700;
  box-shadow: none !important;
}

.nav-tab.active i {
  color: #0b111a !important;
}

body.theme-pronote-light .nav-tab {
  color: var(--text-muted);
}

body.theme-pronote-light .nav-tab:hover {
  color: var(--text-main);
}

body.theme-pronote-light .nav-tab.active {
  color: #ffffff !important;
}

body.theme-pronote-light .nav-tab.active i {
  color: #ffffff !important;
}

.tab-badge {
  padding: 1px 6px;
  font-size: 0.7rem;
  font-weight: 700;
  border-radius: var(--radius-pill);
  background: rgba(255, 255, 255, 0.25);
  color: #fff;
}

.nav-tab.active .tab-badge {
  background: #0b111a;
  color: #fff;
}

.badge-warning {
  background: var(--color-warning);
  color: #000;
}

/* Logo Officiel LIJA dans header-actions (Monochrome Blanc ou Vert) */
.header-official-seal {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 38px;
  height: 38px;
  border-radius: 10px;
  background: rgba(255, 255, 255, 0.04);
  border: 1px solid rgba(255, 255, 255, 0.12);
  cursor: pointer;
  padding: 5px;
  transition: all 0.2s ease;
  flex-shrink: 0;
}

.header-official-seal:hover {
  background: rgba(255, 255, 255, 0.1);
  border-color: rgba(255, 255, 255, 0.3);
  transform: scale(1.06);
}

.seal-logo-img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  filter: brightness(0) invert(1);
  transition: filter 0.3s ease;
}

/* En mode full vert officiel */
.seal-logo-green .seal-logo-img,
.seal-logo-green .brand-official-logo {
  filter: brightness(0) saturate(100%) invert(58%) sepia(87%) saturate(375%) hue-rotate(113deg) brightness(96%) contrast(89%) !important;
}

/* Actions d'en-tête (Statut réseau, PWA, Utilisateur) */
.header-actions {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  flex-shrink: 0;
  margin-left: auto;
}

.sync-status-badge {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 4px 9px;
  background: rgba(16, 185, 129, 0.12);
  border: 1px solid rgba(16, 185, 129, 0.35);
  border-radius: var(--radius-pill);
  font-size: 0.8rem;
  font-weight: 700;
  color: #34d399;
  cursor: pointer;
  flex-shrink: 0;
  transition: all 0.2s ease;
}

.sync-status-badge:hover {
  background: rgba(16, 185, 129, 0.22);
  border-color: #34d399;
}

.sync-status-badge.online {
  color: #34d399;
  border-color: rgba(34, 197, 94, 0.35);
  background: rgba(16, 185, 129, 0.12);
}

.sync-status-badge.offline {
  color: #f87171;
  border-color: rgba(239, 68, 68, 0.35);
  background: rgba(239, 68, 68, 0.12);
}

.sync-dot {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: #10b981;
  box-shadow: 0 0 8px #10b981;
  flex-shrink: 0;
}

.sync-status-badge.online .sync-dot {
  background: #10b981;
  box-shadow: 0 0 8px #10b981;
}

.sync-status-badge.offline .sync-dot {
  background: #ef4444;
  box-shadow: none;
}

.sync-text {
  font-weight: 800;
  font-size: 0.82rem;
  line-height: 1;
}

.btn-pwa-install {
  background: var(--signal-blue);
  color: #fff;
  border: none;
  font-size: 0.75rem;
  font-weight: 600;
  padding: 0.35rem 0.8rem;
  border-radius: var(--radius-pill);
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  gap: 5px;
}

.user-pill {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  padding: 3px 8px 3px 4px;
  background: var(--bg-input);
  border: 1px solid var(--border-color);
  border-radius: var(--radius-pill);
  cursor: pointer;
}

.avatar-ring {
  width: 28px;
  height: 28px;
  border-radius: 50%;
  background: #3f3f46;
  color: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: 700;
  font-size: 0.75rem;
}

.user-pill.admin .avatar-ring {
  background: var(--signal-blue);
}

.user-meta {
  display: flex;
  flex-direction: column;
  line-height: 1.1;
  text-align: left;
}

.user-name {
  font-size: 0.75rem;
  font-weight: 600;
  color: var(--text-main);
}

.user-role-badge {
  font-size: 0.65rem;
  color: var(--text-muted);
}

.badge-role-pending {
  color: #facc15 !important;
  font-weight: 600;
}

.badge-role-validated {
  color: #4ade80 !important;
  font-weight: 600;
}

.btn-icon {
  background: transparent;
  border: none;
  color: var(--text-muted);
  cursor: pointer;
  padding: 2px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 0.85rem;
}

.btn-icon:hover {
  color: #fff;
}

/* ==========================================================================
   ZONE PRINCIPALE & VUES
   ========================================================================== */
.main-content {
  flex: 1;
  position: relative;
  display: flex;
  flex-direction: column;
}

.content-view {
  display: none;
  width: 100%;
  flex: 1;
}

.content-view.active-view {
  display: flex;
  flex-direction: column;
}

.view-container {
  width: 100%;
  max-width: 900px;
  margin: 0 auto;
  padding: 1.5rem 1rem 6rem;
}

/* En-têtes sobres style Signal */
.section-hero {
  margin-bottom: 1.25rem;
  padding-bottom: 0.75rem;
  border-bottom: 1px solid var(--border-color);
}

.hero-badge {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  font-size: 0.7rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  color: var(--signal-blue);
  margin-bottom: 0.25rem;
}

.hero-title {
  font-size: 1.35rem;
  font-weight: 700;
  color: var(--text-main);
  letter-spacing: -0.2px;
}

.hero-desc {
  font-size: 0.85rem;
  color: var(--text-muted);
  margin-top: 0.2rem;
}


/* ==========================================================================
   VUE 1 : CARTE GOOGLE MAPS DE NANCY
   ========================================================================== */
.map-view-layout {
  position: relative;
  width: 100%;
  height: calc(100vh - 60px);
  display: flex;
  flex-direction: column;
}

/* Barre de contrôles au-dessus de la carte */
.map-controls-bar {
  position: absolute;
  top: 12px;
  left: 12px;
  right: 12px;
  z-index: 500;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  pointer-events: none;
}

.filter-pills-group {
  display: flex;
  align-items: center;
  gap: 6px;
  pointer-events: auto;
  overflow-x: auto;
  scrollbar-width: none;
}

.filter-pills-group::-webkit-scrollbar {
  display: none;
}

.filter-pill {
  background: var(--bg-surface);
  border: 1px solid var(--border-color);
  color: var(--text-muted);
  padding: 6px 12px;
  border-radius: var(--radius-pill);
  font-size: 0.78rem;
  font-weight: 600;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  cursor: pointer;
  white-space: nowrap;
  box-shadow: var(--shadow-sm);
  transition: var(--transition-fast);
}

.filter-pill:hover {
  color: #fff;
  border-color: rgba(255, 255, 255, 0.2);
}

.filter-pill.active {
  background: var(--signal-blue);
  color: #fff;
  border-color: var(--signal-blue);
}

.map-action-buttons {
  display: flex;
  align-items: center;
  gap: 6px;
  pointer-events: auto;
}

/* Boutons sobres */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  font-size: 0.82rem;
  font-weight: 600;
  padding: 7px 14px;
  border-radius: var(--radius-sm);
  border: 1px solid transparent;
  cursor: pointer;
  transition: var(--transition-fast);
}

.btn-sm {
  padding: 6px 12px;
  font-size: 0.78rem;
  border-radius: var(--radius-pill);
}

.btn-accent {
  background: var(--signal-blue);
  color: #fff;
  border-color: var(--signal-blue);
}

.btn-accent:hover {
  background: var(--signal-blue-hover);
  border-color: var(--signal-blue-hover);
}

.btn-secondary {
  background: var(--bg-surface);
  color: var(--text-main);
  border-color: var(--border-color);
  box-shadow: var(--shadow-sm);
}

.btn-secondary:hover {
  background: var(--bg-surface-elevated);
}

/* Bouton GPS Me localiser actif */
#btn-locate-user.active {
  background: var(--signal-blue-soft);
  color: #60a5fa;
  border-color: var(--signal-blue);
}

/* Bandeau d'indication de placement */
.placement-hint-banner {
  position: absolute;
  top: 60px;
  left: 50%;
  transform: translateX(-50%);
  z-index: 500;
  background: #1e1e22;
  border: 1px solid var(--border-color);
  border-radius: var(--radius-pill);
  padding: 8px 16px;
  display: flex;
  align-items: center;
  gap: 12px;
  font-size: 0.8rem;
  color: #fff;
  box-shadow: var(--shadow-md);
}

.btn-danger-soft {
  background: rgba(235, 68, 90, 0.15);
  color: #ff6b81;
  border: 1px solid rgba(235, 68, 90, 0.3);
  padding: 3px 8px;
  border-radius: var(--radius-pill);
  font-size: 0.75rem;
  cursor: pointer;
}

/* Conteneur de carte Leaflet */
#map,
.leaflet-map-element {
  width: 100%;
  height: 100%;
  min-height: 400px;
  flex: 1;
  background-color: #121212;
  position: relative;
  z-index: 1;
}

/* ==========================================================================
   STYLE DU REPÈRE GOOGLE MAPS SUR LE LYCÉE JEANNE D'ARC
   ========================================================================== */
.custom-google-jda-pin {
  display: flex;
  flex-direction: column;
  align-items: center;
  pointer-events: auto;
  cursor: pointer;
}

.gmaps-pin-container {
  display: flex;
  flex-direction: column;
  align-items: center;
}

.gmaps-pin-badge {
  background: #18181b;
  color: #ffffff;
  border: 1px solid #3f3f46;
  border-radius: 6px;
  padding: 2px 8px;
  font-size: 11px;
  font-weight: 700;
  white-space: nowrap;
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.5);
  margin-bottom: 2px;
  letter-spacing: 0.2px;
}

.gmaps-pin-marker {
  width: 30px;
  height: 30px;
  background: #ea4335; /* Rouge officiel Google Maps */
  border: 2px solid #ffffff;
  border-radius: 50% 50% 50% 0;
  transform: rotate(-45deg);
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 3px 8px rgba(0, 0, 0, 0.4);
}

.gmaps-pin-marker i {
  transform: rotate(45deg);
  color: #ffffff;
  font-size: 13px;
}

/* Popups sobres de la carte */
.leaflet-popup-content-wrapper {
  background: #1e1e22 !important;
  color: #fff !important;
  border: 1px solid var(--border-color) !important;
  border-radius: 12px !important;
  box-shadow: var(--shadow-md) !important;
  padding: 0 !important;
  overflow: hidden;
}

.leaflet-popup-tip {
  background: #1e1e22 !important;
}

.signal-pin-popup {
  padding: 12px 14px;
}

.marker-popup-card {
  width: 270px;
}

.popup-img-wrapper {
  position: relative;
  width: 100%;
  height: 130px;
  background: #121212;
}

.popup-img-wrapper img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  cursor: pointer;
}

.popup-tag-badge {
  position: absolute;
  top: 8px;
  left: 8px;
  padding: 2px 8px;
  border-radius: 4px;
  font-size: 10px;
  font-weight: 700;
  color: #fff;
}

.popup-body {
  padding: 10px 12px;
}

.popup-title {
  font-size: 0.95rem;
  font-weight: 700;
  color: #fff;
  margin-bottom: 4px;
}

.popup-desc {
  font-size: 0.8rem;
  color: var(--text-muted);
  line-height: 1.35;
  margin-bottom: 6px;
}

.popup-footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  font-size: 0.72rem;
  color: var(--text-subtle);
  border-top: 1px solid var(--border-color);
  padding-top: 6px;
  margin-top: 6px;
}

.popup-delete-btn {
  background: transparent;
  border: none;
  color: var(--color-danger);
  font-size: 0.75rem;
  font-weight: 600;
  cursor: pointer;
}

/* Repères utilisateurs sobres sur la carte */
.custom-leaflet-marker {
  display: flex;
  align-items: center;
  justify-content: center;
}

.marker-pin-bubble {
  width: 34px;
  height: 34px;
  border-radius: 50%;
  border: 2px solid #ffffff;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #ffffff;
  font-size: 14px;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.4);
  cursor: pointer;
  transition: transform 0.15s ease;
}

.marker-pin-bubble:hover {
  transform: scale(1.1);
}

/* Repère GPS radar sobre */
.user-gps-marker {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
}

.user-gps-core {
  width: 14px;
  height: 14px;
  background: var(--signal-blue);
  border: 2px solid #ffffff;
  border-radius: 50%;
  box-shadow: 0 0 8px rgba(44, 107, 237, 0.8);
  z-index: 2;
  position: relative;
}

.user-gps-pulse-ring {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 36px;
  height: 36px;
  margin-top: -18px;
  margin-left: -18px;
  border-radius: 50%;
  background: rgba(44, 107, 237, 0.25);
  pointer-events: none;
  z-index: 1;
}

.marker-distance-pill {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 2px 8px;
  background: rgba(44, 107, 237, 0.15);
  border-radius: 999px;
  color: #60a5fa;
  font-size: 0.72rem;
  font-weight: 600;
}

/* Repère Google Maps officiel Lycée Jeanne d'Arc */
.custom-google-jda-pin {
  display: flex;
  align-items: center;
  justify-content: center;
}

.gmaps-pin-container {
  display: flex;
  flex-direction: column;
  align-items: center;
  cursor: pointer;
  filter: drop-shadow(0 4px 8px rgba(0, 0, 0, 0.6));
  transition: transform 0.15s ease;
}

.gmaps-pin-container:hover {
  transform: translateY(-2px) scale(1.05);
}

.gmaps-pin-badge {
  background: #ea4335;
  color: #ffffff;
  font-family: var(--font-family);
  font-size: 11px;
  font-weight: 700;
  padding: 3px 8px;
  border-radius: 4px;
  white-space: nowrap;
  letter-spacing: 0.2px;
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.4);
  margin-bottom: 3px;
  border: 1px solid rgba(255, 255, 255, 0.2);
}

.gmaps-pin-marker {
  width: 32px;
  height: 32px;
  background: #ea4335;
  color: #ffffff;
  border: 2px solid #ffffff;
  border-radius: 50% 50% 50% 0;
  transform: rotate(-45deg);
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.3);
}

.gmaps-pin-marker i {
  transform: rotate(45deg);
  font-size: 13px;
}

.signal-pin-popup {
  padding: 4px 2px;
}


/* Tiroir de repères de Nancy (Map Drawer) */
.map-drawer {
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  z-index: 500;
  background: var(--bg-surface);
  border-top: 1px solid var(--border-color);
  border-radius: 16px 16px 0 0;
  transition: transform var(--transition-normal);
  transform: translateY(calc(100% - 44px));
}

.map-drawer.open {
  transform: translateY(0);
}

.drawer-handle {
  width: 100%;
  background: transparent;
  border: none;
  padding: 10px 16px;
  color: #fff;
  cursor: pointer;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
}

.handle-bar {
  width: 36px;
  height: 4px;
  background: #3f3f46;
  border-radius: 2px;
}

.drawer-header-content {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
  font-size: 0.82rem;
  font-weight: 600;
}

.drawer-body {
  max-height: 280px;
  overflow-y: auto;
  padding: 8px 14px 16px;
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.drawer-item-card {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 8px 10px;
  background: var(--bg-input);
  border: 1px solid var(--border-color);
  border-radius: var(--radius-sm);
  cursor: pointer;
  transition: background var(--transition-fast);
}

.drawer-item-card:hover {
  background: var(--bg-surface-elevated);
}

.drawer-item-thumb {
  width: 44px;
  height: 44px;
  border-radius: 6px;
  object-fit: cover;
  background: #121212;
}

.drawer-item-title {
  font-size: 0.85rem;
  font-weight: 600;
  color: var(--text-main);
}

.drawer-item-sub {
  font-size: 0.75rem;
  color: var(--text-muted);
}

/* ==========================================================================
   VUE 2 : ANNONCES OFFICIELLES (STYLE SIGNAL CANAL)
   ========================================================================== */
.section-hero {
  margin-bottom: 1.5rem;
}

.hero-badge {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  font-size: 0.72rem;
  font-weight: 700;
  color: var(--signal-blue);
  text-transform: uppercase;
  letter-spacing: 0.5px;
  margin-bottom: 4px;
}

.hero-title {
  font-size: 1.4rem;
  font-weight: 800;
  color: var(--text-main);
  letter-spacing: -0.3px;
}

.hero-desc {
  font-size: 0.85rem;
  color: var(--text-muted);
  margin-top: 2px;
}

.panel {
  background: var(--bg-surface);
  border: 1px solid var(--border-color);
  border-radius: var(--radius-md);
  overflow: hidden;
  margin-bottom: 1.5rem;
}

.panel-header {
  padding: 12px 16px;
  border-bottom: 1px solid var(--border-color);
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.panel-header h2 {
  font-size: 0.95rem;
  font-weight: 700;
  color: var(--text-main);
}

.badge-admin {
  background: var(--signal-blue-soft);
  color: #60a5fa;
  padding: 2px 8px;
  border-radius: var(--radius-pill);
  font-size: 0.72rem;
  font-weight: 600;
}

.panel-body {
  padding: 16px;
}

.form-group {
  margin-bottom: 14px;
}

.form-group label {
  display: block;
  font-size: 0.8rem;
  font-weight: 600;
  color: var(--text-muted);
  margin-bottom: 6px;
}

.form-input, .form-textarea {
  width: 100%;
  background: var(--bg-input);
  border: 1px solid var(--border-color);
  border-radius: var(--radius-sm);
  padding: 9px 12px;
  color: var(--text-main);
  font-size: 0.88rem;
  outline: none;
  font-family: inherit;
  transition: border-color var(--transition-fast);
}

.form-input:focus, .form-textarea:focus {
  border-color: var(--signal-blue);
}

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

.flex-1 { flex: 1; }

.file-upload-wrapper {
  position: relative;
  overflow: hidden;
  border-radius: var(--radius-sm);
  display: block;
}

.file-native-overlay {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  opacity: 0;
  z-index: 10;
  cursor: pointer;
  -webkit-appearance: none;
  font-size: 0;
}

.file-custom-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 10px 14px;
  background: var(--bg-input);
  border: 1px dashed var(--border-color);
  border-radius: var(--radius-sm);
  color: var(--text-muted);
  font-size: 0.85rem;
  width: 100%;
  transition: all var(--transition-fast);
  pointer-events: none;
}

.file-upload-wrapper:hover .file-custom-btn,
.file-upload-wrapper.drag-over .file-custom-btn {
  border-color: var(--signal-blue);
  background: rgba(44, 107, 237, 0.08);
  color: #fff;
}

/* Carnet de correspondance Upload Card */
.carnet-upload-card {
  position: relative;
  background: var(--bg-input);
  border: 2px dashed var(--border-color);
  border-radius: var(--radius-md);
  padding: 20px 14px;
  text-align: center;
  cursor: pointer;
  transition: all var(--transition-fast);
  overflow: hidden;
}

.carnet-upload-card:hover,
.carnet-upload-card.drag-over {
  border-color: var(--signal-blue);
  background: rgba(44, 107, 237, 0.06);
}

.carnet-upload-card .file-native-overlay {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  opacity: 0;
  cursor: pointer;
  z-index: 10;
}

.upload-prompt {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
  pointer-events: none;
}

.upload-icon-circle {
  width: 48px;
  height: 48px;
  background: rgba(44, 107, 237, 0.15);
  color: var(--signal-blue);
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.35rem;
  margin-bottom: 4px;
}

.upload-text-main {
  font-family: var(--font-title);
  font-size: 0.92rem;
  font-weight: 700;
  color: var(--text-main);
}

.upload-text-sub {
  font-size: 0.78rem;
  color: var(--text-muted);
  max-width: 300px;
}

.btn-browse-fake {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 6px 12px;
  background: var(--bg-surface-elevated);
  border: 1px solid var(--border-color);
  border-radius: var(--radius-sm);
  color: var(--text-main);
  font-size: 0.78rem;
  font-weight: 600;
  margin-top: 6px;
}

.carnet-preview-container {
  position: relative;
  border-radius: var(--radius-sm);
  overflow: hidden;
  max-height: 200px;
  background: #121212;
}

.carnet-preview-container img {
  width: 100%;
  max-height: 190px;
  object-fit: contain;
  display: block;
}

.preview-actions {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 8px 12px;
  background: var(--bg-surface);
  border-top: 1px solid var(--border-color);
}

.carnet-status-tag {
  font-size: 0.75rem;
  font-weight: 600;
  color: var(--color-success);
  display: flex;
  align-items: center;
  gap: 4px;
}

.announcements-feed {
  display: flex;
  flex-direction: column;
  gap: 14px;
}

.announcement-card {
  background: var(--bg-surface);
  border: 1px solid var(--border-color);
  border-radius: var(--radius-md);
  padding: 16px;
  position: relative;
}

.announcement-card.priority-urgent {
  border-left: 4px solid var(--color-danger);
}

.announcement-card.priority-info {
  border-left: 4px solid var(--signal-blue);
}

.announcement-card.priority-event {
  border-left: 4px solid var(--color-warning);
}

.ann-badge-pill {
  font-size: 0.68rem;
  font-weight: 700;
  padding: 2px 8px;
  border-radius: var(--radius-pill);
  display: inline-block;
  margin-bottom: 6px;
  background: var(--bg-input);
  color: var(--text-muted);
}

.priority-urgent .ann-badge-pill { color: #ff6b81; }
.priority-info .ann-badge-pill { color: #60a5fa; }
.priority-event .ann-badge-pill { color: #facc15; }

.ann-card-title {
  font-family: var(--font-title);
  font-size: 1.05rem;
  font-weight: 700;
  color: var(--text-main);
  margin-bottom: 6px;
}

.ann-card-content {
  font-size: 0.88rem;
  color: var(--text-main);
  line-height: 1.45;
  white-space: pre-wrap;
}

.ann-card-media {
  margin: 10px 0;
  border-radius: 8px;
  overflow: hidden;
  max-height: 250px;
}

.ann-card-media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  cursor: pointer;
}

.ann-card-footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  font-size: 0.75rem;
  color: var(--text-subtle);
  margin-top: 10px;
  border-top: 1px solid var(--border-color);
  padding-top: 8px;
}

/* ==========================================================================
   VUE 3 : DISCUSSION SIGNAL (CHAT FIDÈLE À SIGNAL)
   ========================================================================== */
.chat-container {
  padding: 1rem 0.5rem 5rem;
}

.chat-card {
  background: var(--bg-surface);
  border: 1px solid var(--border-color);
  border-radius: var(--radius-md);
  overflow: hidden;
  display: flex;
  flex-direction: column;
  height: 75vh;
}

.chat-card-header {
  padding: 12px 16px;
  background: var(--bg-surface);
  border-bottom: 1px solid var(--border-color);
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.chat-header-info {
  display: flex;
  align-items: center;
  gap: 10px;
}

.chat-status-dot {
  width: 9px;
  height: 9px;
  background: var(--color-success);
  border-radius: 50%;
}

.chat-title {
  font-family: var(--font-title);
  font-size: 0.95rem;
  font-weight: 700;
  color: var(--text-main);
}

.chat-subtitle {
  font-size: 0.72rem;
  color: var(--text-muted);
}

.chat-messages-viewport {
  flex: 1;
  overflow-y: auto;
  background: var(--bg-main, #f8fafc);
  padding: 16px;
  display: flex;
  flex-direction: column;
  gap: 12px;
  scroll-behavior: smooth;
}

/* Bulles de discussion modernes */
.chat-bubble {
  width: fit-content;
  min-width: 150px;
  max-width: 82%;
  padding: 10px 14px;
  border-radius: 18px;
  font-size: 0.92rem;
  line-height: 1.45;
  word-break: break-word;
  position: relative;
  box-shadow: 0 1px 4px rgba(0, 0, 0, 0.05);
}

/* Message reçu (gauche) */
.chat-bubble:not(.mine) {
  align-self: flex-start;
  background: var(--bg-surface, #ffffff);
  color: var(--text-main, #1e293b);
  border: 1px solid var(--border-color, rgba(0, 0, 0, 0.08));
  border-bottom-left-radius: 4px;
}

/* Message envoyé (droite) : accent bleu moderne */
.chat-bubble.mine {
  align-self: flex-end;
  background: linear-gradient(135deg, #2563eb, #1d4ed8);
  color: #ffffff;
  border-bottom-right-radius: 4px;
  box-shadow: 0 2px 8px rgba(37, 99, 235, 0.25);
}

.chat-bubble-meta {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 6px;
  margin-bottom: 6px;
  line-height: 1.2;
}

.chat-author {
  font-size: 0.8rem;
  font-weight: 700;
  color: var(--primary-blue, #2563eb);
  white-space: nowrap;
  flex-shrink: 0;
}

.chat-bubble.mine .chat-author {
  display: none;
}

.chat-author-role {
  font-size: 0.66rem;
  font-weight: 700;
  padding: 2px 7px;
  border-radius: 6px;
  display: inline-flex;
  align-items: center;
  gap: 3px;
  letter-spacing: 0.02em;
  text-transform: uppercase;
  white-space: nowrap;
  flex-shrink: 0;
  background: rgba(37, 99, 235, 0.1);
  color: var(--text-muted);
}

.role-badge-admin {
  background: rgba(239, 68, 68, 0.22);
  color: #f87171;
  border: 1px solid rgba(239, 68, 68, 0.4);
}

.role-badge-organisateur {
  background: rgba(245, 158, 11, 0.22);
  color: #fbbf24;
  border: 1px solid rgba(245, 158, 11, 0.4);
}

.role-badge-cvl {
  background: rgba(16, 185, 129, 0.22);
  color: #34d399;
  border: 1px solid rgba(16, 185, 129, 0.4);
}

.role-badge-communiste {
  background: rgba(225, 29, 72, 0.25);
  color: #fda4af;
  border: 1px solid rgba(225, 29, 72, 0.5);
  box-shadow: 0 0 6px rgba(225, 29, 72, 0.2);
}

.role-badge-mdl {
  background: rgba(168, 85, 247, 0.22);
  color: var(--primary-blue, #60A5FA);
  border: 1px solid rgba(168, 85, 247, 0.4);
}

.role-badge-eleve {
  background: rgba(59, 130, 246, 0.18);
  color: #93c5fd;
  border: 1px solid rgba(59, 130, 246, 0.3);
}

/* Wrapper de bulle avec barre d'actions flottante */
.chat-bubble-wrapper {
  position: relative;
  display: flex;
  flex-direction: column;
  margin-bottom: 8px;
}

.chat-bubble-wrapper.mine {
  align-self: flex-end;
  align-items: flex-end;
}

.chat-bubble-wrapper:not(.mine) {
  align-self: flex-start;
  align-items: flex-start;
}

.chat-bubble-actions-bar {
  display: none;
  position: absolute;
  top: -14px;
  right: 8px;
  background: var(--bg-surface-elevated, #2a2a2e);
  border: 1px solid var(--border-color);
  border-radius: var(--radius-pill);
  padding: 2px 6px;
  gap: 3px;
  align-items: center;
  z-index: 5;
  box-shadow: 0 4px 12px rgba(0,0,0,0.35);
}

.chat-bubble-wrapper:hover .chat-bubble-actions-bar,
.chat-bubble-wrapper:focus-within .chat-bubble-actions-bar {
  display: flex;
}

.btn-bubble-action {
  background: none;
  border: none;
  color: var(--text-muted);
  font-size: 0.74rem;
  padding: 2px 5px;
  border-radius: 4px;
  cursor: pointer;
  transition: all 0.15s ease;
  line-height: 1;
}

.btn-bubble-action:hover {
  color: #fff;
  background: rgba(255,255,255,0.12);
  transform: scale(1.1);
}

.btn-bubble-action.btn-report:hover {
  color: #f87171;
}

.btn-bubble-action.btn-delete:hover {
  color: #ef4444;
}

/* Étagère des réactions sous le message */
.chat-reactions-shelf {
  display: flex;
  flex-wrap: wrap;
  gap: 4px;
  margin-top: 4px;
}

.reaction-chip {
  display: inline-flex;
  align-items: center;
  gap: 3px;
  padding: 2px 7px;
  background: rgba(255, 255, 255, 0.08);
  border: 1px solid rgba(255, 255, 255, 0.15);
  border-radius: var(--radius-pill);
  font-size: 0.72rem;
  color: #e2e8f0;
  cursor: pointer;
  transition: all 0.15s ease;
  user-select: none;
}

.reaction-chip:hover {
  background: rgba(255, 255, 255, 0.16);
  border-color: rgba(255, 255, 255, 0.3);
  transform: scale(1.05);
}

.reaction-chip.reacted {
  background: rgba(59, 130, 246, 0.25);
  border-color: rgba(59, 130, 246, 0.6);
  color: #93c5fd;
  font-weight: 700;
}

/* Indicateur "en train d'écrire..." */
.chat-typing-bar {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 6px 14px;
  background: rgba(0, 0, 0, 0.2);
  font-size: 0.78rem;
  color: var(--text-muted);
  border-top: 1px dashed var(--border-color);
  animation: fadeIn 0.2s ease;
}

.typing-wave {
  display: inline-flex;
  gap: 3px;
  align-items: center;
}

.typing-wave span {
  width: 5px;
  height: 5px;
  background: #60a5fa;
  border-radius: 50%;
  animation: typingBounce 1.2s infinite ease-in-out;
}

.typing-wave span:nth-child(2) { animation-delay: 0.2s; }
.typing-wave span:nth-child(3) { animation-delay: 0.4s; }

@keyframes typingBounce {
  0%, 80%, 100% { transform: translateY(0); opacity: 0.4; }
  40% { transform: translateY(-4px); opacity: 1; }
}

/* Outil sélecteur d'émoji */
.btn-chat-tool {
  background: transparent;
  border: none;
  color: var(--text-muted);
  font-size: 1.15rem;
  padding: 6px 8px;
  cursor: pointer;
  border-radius: 50%;
  transition: var(--transition-fast);
  display: flex;
  align-items: center;
  justify-content: center;
}

.btn-chat-tool:hover {
  color: #fff;
  background: rgba(255, 255, 255, 0.1);
}

/* Tiroir d'émojis complet */
.chat-emoji-picker {
  background: var(--bg-surface-elevated, #242428);
  border: 1px solid var(--border-color);
  border-radius: var(--radius-lg);
  margin: 0 12px 8px 12px;
  padding: 10px 12px;
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.35);
  animation: slideUp 0.18s ease;
}

.emoji-picker-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 8px;
  font-size: 0.78rem;
  font-weight: 700;
  color: var(--text-muted);
  border-bottom: 1px solid var(--border-color);
  padding-bottom: 6px;
}

.emoji-picker-grid {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.emoji-category-title {
  font-size: 0.70rem;
  font-weight: 600;
  color: var(--text-subtle);
  margin-bottom: 4px;
  text-transform: uppercase;
  letter-spacing: 0.03em;
}

.emoji-items-row {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}

.emoji-cell {
  background: var(--bg-input);
  border: 1px solid var(--border-color);
  border-radius: 8px;
  font-size: 1.15rem;
  padding: 4px 8px;
  cursor: pointer;
  transition: all 0.12s ease;
}

.emoji-cell:hover {
  background: rgba(255, 255, 255, 0.15);
  transform: scale(1.15);
}

/* Aperçu du message à signaler dans la modale */
.report-msg-preview-box {
  background: rgba(0, 0, 0, 0.25);
  border-left: 3px solid var(--color-danger, #ef4444);
  padding: 10px 12px;
  border-radius: 0 var(--radius-sm) var(--radius-sm) 0;
  margin-bottom: 14px;
}

.report-msg-preview-header {
  display: flex;
  justify-content: space-between;
  font-size: 0.75rem;
  margin-bottom: 4px;
}

.report-msg-author {
  font-weight: 700;
  color: #60a5fa;
}

.report-msg-time {
  color: var(--text-subtle);
}

.report-msg-text {
  font-size: 0.85rem;
  color: #e2e8f0;
  margin: 0;
  font-style: italic;
  word-break: break-word;
}

/* Section Signalements Modération (Admin) */
.reports-list-box {
  display: flex;
  flex-direction: column;
  gap: 10px;
  margin-top: 10px;
}

.report-card {
  background: var(--bg-surface);
  border: 1px solid var(--border-color);
  border-radius: var(--radius-md);
  padding: 12px 16px;
  display: flex;
  flex-direction: column;
  gap: 8px;
  transition: var(--transition-fast);
}

.report-card.resolved {
  opacity: 0.55;
  border-color: rgba(255,255,255,0.06);
}

.report-card-top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
}

.report-reason-badge {
  font-size: 0.72rem;
  font-weight: 700;
  padding: 3px 8px;
  border-radius: var(--radius-pill);
  background: rgba(239, 68, 68, 0.18);
  color: #f87171;
  border: 1px solid rgba(239, 68, 68, 0.35);
}

.report-card-actions {
  display: flex;
  gap: 8px;
  margin-top: 4px;
}

/* Sélecteur de rôle en ligne dans la table des élèves validés */
.role-select-inline {
  background: var(--bg-input);
  color: #fff;
  border: 1px solid var(--border-color);
  border-radius: var(--radius-pill);
  padding: 3px 8px;
  font-size: 0.74rem;
  font-weight: 600;
  cursor: pointer;
  outline: none;
}

.role-select-inline:focus {
  border-color: var(--signal-blue);
}

.chat-time {
  font-size: 0.68rem;
  color: var(--text-muted, #94a3b8);
  margin-left: auto;
  padding-left: 8px;
  white-space: nowrap;
  flex-shrink: 0;
  opacity: 0.85;
}

.chat-bubble.mine .chat-time {
  color: rgba(255, 255, 255, 0.75);
}

.chat-bubble-footer-mine {
  display: flex;
  justify-content: flex-end;
  align-items: center;
  margin-top: 4px;
}

.chat-time-mine {
  font-size: 0.66rem;
  color: rgba(255, 255, 255, 0.75);
  display: inline-flex;
  align-items: center;
  gap: 4px;
  white-space: nowrap;
}

.chat-time-mine i {
  font-size: 0.62rem;
  color: #93c5fd;
}

.chat-text {
  font-size: 0.88rem;
  color: inherit;
}

/* Émojis rapides discrets */
.chat-quick-emojis {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 6px 12px;
  background: var(--bg-surface);
  border-top: 1px solid var(--border-color);
  overflow-x: auto;
}

.btn-emoji {
  background: var(--bg-surface-elevated);
  border: 1px solid var(--border-color);
  color: var(--text-main);
  font-size: 0.78rem;
  padding: 4px 8px;
  border-radius: var(--radius-pill);
  cursor: pointer;
  white-space: nowrap;
}

.btn-emoji:hover {
  background: var(--bg-surface);
  border-color: var(--signal-blue);
}

/* Barre de saisie Signal */
.chat-input-bar {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 10px 14px;
  background: var(--bg-surface);
  border-top: 1px solid var(--border-color);
}

.chat-text-field {
  flex: 1;
  background: var(--bg-input);
  color: var(--text-main);
  border: 1px solid var(--border-color);
  border-radius: var(--radius-pill);
  padding: 9px 16px;
  color: #fff;
  font-size: 0.9rem;
  outline: none;
  font-family: inherit;
}

.chat-text-field:focus {
  border-color: var(--signal-blue);
}

.btn-send {
  width: 38px;
  height: 38px;
  border-radius: 50%;
  background: var(--signal-blue);
  color: #fff;
  border: none;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  flex-shrink: 0;
  transition: var(--transition-fast);
}

.btn-send:hover {
  background: var(--signal-blue-hover);
}

/* ==========================================================================
   VUE 4 : VALIDATION ÉLÈVES (ADMIN)
   ========================================================================== */
.students-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
  gap: 14px;
  margin-top: 12px;
}

.student-validation-card {
  background: var(--bg-surface);
  border: 1px solid var(--border-color);
  border-radius: var(--radius-md);
  padding: 14px;
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.carnet-photo-preview-box {
  position: relative;
  width: 100%;
  height: 150px;
  border-radius: 8px;
  overflow: hidden;
  background: #121212;
  cursor: pointer;
}

.carnet-photo-preview-box img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.carnet-zoom-overlay {
  position: absolute;
  inset: 0;
  background: rgba(0, 0, 0, 0.5);
  color: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  font-size: 0.8rem;
  font-weight: 600;
  opacity: 0;
  transition: opacity var(--transition-fast);
}

.carnet-photo-preview-box:hover .carnet-zoom-overlay {
  opacity: 1;
}

.student-name-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.student-username {
  font-weight: 700;
  color: var(--text-main);
  font-size: 0.95rem;
}

.privacy-badge-banner {
  font-size: 0.72rem;
  color: var(--color-success);
  display: flex;
  align-items: center;
  gap: 4px;
}

.student-card-actions {
  display: flex;
  gap: 8px;
  margin-top: auto;
}

.btn-validate-student {
  flex: 1;
  background: var(--color-success);
  color: #fff;
  border: none;
  padding: 7px;
  border-radius: var(--radius-sm);
  font-size: 0.78rem;
  font-weight: 600;
  cursor: pointer;
}

.btn-reject-student {
  background: transparent;
  color: var(--color-danger);
  border: 1px solid rgba(235, 68, 90, 0.4);
  padding: 7px 12px;
  border-radius: var(--radius-sm);
  font-size: 0.78rem;
  cursor: pointer;
}

/* ==========================================================================
   MODALES SOBRES & DIALOGUES
   ========================================================================== */
.modal-overlay {
  position: fixed;
  inset: 0;
  z-index: 2000;
  background: rgba(0, 0, 0, 0.75);
  display: flex;
  align-items: flex-start;
  justify-content: center;
  padding: 2rem 1rem 3rem 1rem;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
  overscroll-behavior: contain;
}

.modal-card {
  background: var(--bg-surface);
  border: 1px solid var(--border-color);
  border-radius: var(--radius-lg);
  width: 100%;
  max-width: 520px;
  max-height: min(92vh, 92dvh);
  display: flex;
  flex-direction: column;
  position: relative;
  box-shadow: var(--shadow-md);
  margin: auto;
  overflow-y: auto;
  overflow-x: hidden;
  -webkit-overflow-scrolling: touch;
  overscroll-behavior: contain;
  scrollbar-width: thin;
  scrollbar-color: var(--signal-blue) transparent;
}

/* Modales avec structure header/body/footer dédiée (ex: sélecteur de lycée, paramètres) */
.modal-card:has(.modal-body),
.modal-settings-card {
  overflow: hidden;
}

.modal-card.max-w-3xl { max-width: 768px; }
.modal-card.max-w-4xl { max-width: 860px; }
.modal-card.max-w-5xl { max-width: 1024px; }
.modal-card.modal-card-sm { max-width: 440px; }
.modal-card.modal-card-md { max-width: 560px; }
.modal-card.modal-card-lg { max-width: 680px; }

/* Scrollbar raffinée pour toutes les modales */
.modal-card::-webkit-scrollbar,
.auth-modal-card::-webkit-scrollbar {
  width: 6px;
}
.modal-card::-webkit-scrollbar-track,
.auth-modal-card::-webkit-scrollbar-track {
  background: transparent;
}
.modal-card::-webkit-scrollbar-thumb,
.auth-modal-card::-webkit-scrollbar-thumb {
  background: var(--border-color);
  border-radius: 999px;
}
.modal-card::-webkit-scrollbar-thumb:hover,
.auth-modal-card::-webkit-scrollbar-thumb:hover {
  background: var(--signal-blue);
}

/* MODALE AUTHENTIFICATION & CRÉATION DE COMPTE (DÉFILEMENT FLUIDE SUR TOUT ÉCRAN) */
.auth-modal-card {
  max-width: 520px;
  max-height: min(92vh, 92dvh);
  overflow-y: auto !important;
  overflow-x: hidden !important;
  -webkit-overflow-scrolling: touch;
  padding: 1.75rem 1.5rem 2rem 1.5rem;
  overscroll-behavior: contain;
}

.auth-form-body {
  padding-bottom: 0.5rem;
}

.modal-header {
  padding: 1.25rem 1.5rem 1rem 1.5rem;
  flex-shrink: 0;
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 1rem;
  border-bottom: 1px solid var(--border-color);
  background: var(--bg-surface);
}

.modal-title-group {
  flex: 1;
  min-width: 0;
}

.modal-title {
  font-family: var(--font-title);
  font-size: 1.25rem;
  font-weight: 700;
  color: var(--text-main);
  margin: 0 0 0.25rem 0;
}

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

.modal-body {
  padding: 1.25rem 1.5rem;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
  flex: 1 1 auto;
  overscroll-behavior: contain;
  scrollbar-width: thin;
  scrollbar-color: var(--signal-blue) transparent;
}

.modal-body::-webkit-scrollbar {
  width: 6px;
}
.modal-body::-webkit-scrollbar-track {
  background: transparent;
}
.modal-body::-webkit-scrollbar-thumb {
  background: var(--border-color);
  border-radius: 999px;
}
.modal-body::-webkit-scrollbar-thumb:hover {
  background: var(--signal-blue);
}

.modal-footer {
  padding: 1rem 1.5rem;
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 0.75rem;
  border-top: 1px solid var(--border-color);
  background: var(--bg-surface);
}

.modal-close-btn {
  position: absolute;
  top: 14px;
  right: 14px;
  background: transparent;
  border: none;
  color: var(--text-muted);
  font-size: 1.1rem;
  cursor: pointer;
  z-index: 10;
}

.modal-close-btn:hover { color: var(--text-main); }

.modal-header-hero {
  text-align: center;
  margin-bottom: 1.25rem;
}

.modal-school-badge {
  width: 44px;
  height: 44px;
  background: var(--signal-blue);
  color: #fff;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.2rem;
  margin: 0 auto 8px;
}

.modal-main-title {
  font-family: var(--font-title);
  font-size: 1.2rem;
  font-weight: 700;
  color: var(--text-main);
}

.modal-main-desc {
  font-size: 0.82rem;
  color: var(--text-muted);
}

/* Rôles Élève vs Admin */
.auth-role-tabs {
  display: flex;
  background: var(--bg-input);
  padding: 3px;
  border-radius: var(--radius-pill);
  gap: 4px;
  margin-bottom: 14px;
}

.role-selector-tab {
  flex: 1;
  background: transparent;
  border: none;
  color: var(--text-muted);
  font-size: 0.8rem;
  font-weight: 600;
  padding: 6px;
  border-radius: var(--radius-pill);
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
}

.role-selector-tab.active {
  background: var(--signal-blue);
  color: #fff;
}

.auth-submode-switcher {
  display: flex;
  border-bottom: 1px solid var(--border-color);
  margin-bottom: 14px;
}

.subtab-btn {
  flex: 1;
  background: transparent;
  border: none;
  border-bottom: 2px solid transparent;
  color: var(--text-muted);
  padding: 8px;
  font-size: 0.82rem;
  font-weight: 600;
  cursor: pointer;
}

.subtab-btn.active {
  color: #fff;
  border-bottom-color: var(--signal-blue);
}

.btn-block { width: 100%; }

.input-with-icon {
  position: relative;
  display: flex;
  align-items: center;
}

.input-icon {
  position: absolute;
  left: 12px;
  color: var(--text-subtle);
  font-size: 0.85rem;
  pointer-events: none !important;
  z-index: 3;
}

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

/* Style dédié pour les sélecteurs de formulaires (Lycée & Rôle) */
.form-select, select.form-input {
  cursor: pointer;
  pointer-events: auto;
  touch-action: manipulation;
  -webkit-tap-highlight-color: rgba(44, 107, 237, 0.2);
  font-size: 15px !important;
  min-height: 48px;
  padding-right: 36px;
  background-color: var(--bg-input);
  color: var(--text-main);
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%233b82f6' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'%3E%3C/polyline%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: calc(100% - 12px) center;
  background-size: 14px 14px;
  appearance: none;
  -webkit-appearance: none;
  -moz-appearance: none;
}

select.form-input option {
  background-color: var(--bg-surface);
  color: var(--text-main);
  padding: 10px;
  font-size: 15px;
}

/* Chips tactiles ultra-rapides pour choisir son Statut (Élève vs Autre) */
.signup-role-chips {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 8px;
  margin-top: 6px;
  margin-bottom: 6px;
}

.role-chip {
  background: var(--bg-input);
  border: 1.5px solid var(--border-color);
  border-radius: var(--radius-sm);
  color: var(--text-muted);
  padding: 10px 8px;
  font-size: 0.84rem;
  font-weight: 600;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  cursor: pointer;
  transition: all var(--transition-fast);
  min-height: 44px;
  touch-action: manipulation;
  -webkit-tap-highlight-color: transparent;
  user-select: none;
}

.role-chip:hover {
  border-color: rgba(44, 107, 237, 0.5);
  color: var(--text-main);
  transform: translateY(-1px);
}

.role-chip.active {
  background: rgba(44, 107, 237, 0.16);
  border-color: var(--signal-blue);
  color: #fff;
  box-shadow: 0 0 0 1px var(--signal-blue), 0 2px 8px rgba(44, 107, 237, 0.25);
}

body.theme-pronote-light .role-chip.active {
  color: var(--signal-blue);
  background: rgba(44, 107, 237, 0.12);
}

/* Raccourci de sélection visuelle du Lycée et badge de confirmation */
.signup-lycee-actions {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  margin-top: 6px;
  flex-wrap: wrap;
}

.btn-signup-shortcut {
  background: rgba(44, 107, 237, 0.08);
  border: 1px dashed rgba(44, 107, 237, 0.4);
  border-radius: var(--radius-sm);
  color: var(--signal-blue);
  font-size: 0.78rem;
  font-weight: 600;
  padding: 6px 12px;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  transition: all var(--transition-fast);
  min-height: 36px;
  touch-action: manipulation;
}

.btn-signup-shortcut:hover {
  background: rgba(44, 107, 237, 0.16);
  border-color: var(--signal-blue);
  transform: translateY(-1px);
}

.signup-lycee-badge {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 4px 10px;
  background: rgba(16, 185, 129, 0.14);
  border: 1px solid rgba(16, 185, 129, 0.35);
  border-radius: var(--radius-pill);
  font-size: 0.76rem;
  font-weight: 700;
  color: var(--text-main);
}

.signup-lycee-badge-logo {
  width: 18px;
  height: 18px;
  object-fit: contain;
  border-radius: 50%;
  background: #fff;
  padding: 1px;
}

.btn-toggle-pw {
  position: absolute;
  right: 10px;
  background: transparent;
  border: none;
  color: var(--text-subtle);
  cursor: pointer;
}

/* Choix de type de repère (Poubelle / Mégaphone / Réunion) */
.marker-type-selector {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 8px;
  margin-top: 6px;
}

.type-option input { display: none; }

.type-card {
  background: var(--bg-input);
  border: 1px solid var(--border-color);
  border-radius: var(--radius-sm);
  padding: 8px 6px;
  text-align: center;
  cursor: pointer;
  transition: var(--transition-fast);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
}

.type-option input:checked + .type-card {
  border-color: var(--signal-blue);
  background: rgba(44, 107, 237, 0.12);
}

.type-icon-box {
  font-size: 1.1rem;
}

.type-poubelle .type-icon-box { color: var(--color-poubelle); }
.type-megaphone .type-icon-box { color: var(--color-megaphone); }
.type-reunion .type-icon-box { color: var(--color-reunion); }

.type-name {
  font-size: 0.78rem;
  font-weight: 700;
  color: #fff;
}

.type-hint {
  font-size: 0.65rem;
  color: var(--text-muted);
}

/* Lightbox zoom */
.lightbox-overlay {
  position: fixed;
  inset: 0;
  z-index: 3000;
  background: rgba(0, 0, 0, 0.9);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 1rem;
}

.lightbox-content {
  position: relative;
  max-width: 90vw;
  max-height: 85vh;
}

.lightbox-content img {
  max-width: 100%;
  max-height: 80vh;
  border-radius: 8px;
  object-fit: contain;
}

.lightbox-close {
  position: absolute;
  top: -36px;
  right: 0;
  background: transparent;
  border: none;
  color: #fff;
  font-size: 1.4rem;
  cursor: pointer;
}

/* Toasts de notification */
.toast-stack {
  position: fixed;
  top: 72px;
  right: 20px;
  bottom: auto;
  z-index: 2500;
  display: flex;
  flex-direction: column;
  gap: 8px;
  pointer-events: none;
  max-width: 380px;
}

.toast {
  pointer-events: auto;
  background: var(--bg-surface-elevated);
  border: 1px solid var(--border-color);
  color: var(--text-main);
  padding: 9px 14px;
  border-radius: 8px;
  font-size: 0.82rem;
  display: flex;
  align-items: center;
  gap: 8px;
  box-shadow: var(--shadow-md);
  transition: all 0.25s ease;
}

.toast.toast-success { border-left: 3px solid var(--color-success); }
.toast.toast-error { border-left: 3px solid var(--color-danger); }
.toast.toast-warning { border-left: 3px solid var(--color-warning); }
.toast.toast-info { border-left: 3px solid var(--signal-blue); }

/* Navigation Mobile */
.mobile-bottom-nav {
  display: none;
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  z-index: 1000;
  background: var(--bg-surface);
  border-top: 1px solid var(--border-color);
  padding: 4px 6px;
  justify-content: space-around;
}

.mobile-nav-btn {
  background: transparent;
  border: none;
  color: var(--text-muted);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 3px;
  padding: 6px 10px;
  font-size: 0.72rem;
  font-weight: 600;
  cursor: pointer;
  position: relative;
}

.mobile-nav-btn.active {
  color: var(--signal-blue);
}

.badge-dot {
  position: absolute;
  top: 4px;
  right: 14px;
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--color-danger);
}

/* Bouton Partager & Modale QR Code */
.btn-share-header {
  background: var(--bg-surface-elevated);
  border: 1px solid var(--border-color);
  color: var(--text-main);
  gap: 6px;
}

.btn-share-header:hover {
  background: rgba(255, 255, 255, 0.15);
  border-color: var(--signal-blue);
}

.share-modal-card {
  max-width: 420px;
  text-align: center;
}

.qr-display-box {
  background: #ffffff;
  padding: 16px;
  border-radius: var(--radius-md);
  margin: 14px auto;
  display: inline-block;
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.4);
}

.qr-code-image {
  width: 220px;
  height: 220px;
  display: block;
  margin: 0 auto;
  image-rendering: pixelated;
}

.qr-hint-text {
  font-size: 0.75rem;
  color: #52525b;
  margin-top: 8px;
  font-weight: 600;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 5px;
}

.share-url-container {
  display: flex;
  gap: 8px;
  align-items: center;
  margin-top: 12px;
}

.share-url-field {
  font-family: monospace;
  font-size: 0.82rem;
  background: var(--bg-input);
  color: #a1a1aa;
}

.share-actions-grid {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

/* Helpers & Utilities */
.hidden { display: none !important; }
.desktop-only { display: inline-flex; }
.text-muted { color: var(--text-muted); }
.text-xs { font-size: 0.75rem; }
.mt-2 { margin-top: 0.5rem; }
.mt-4 { margin-top: 1rem; }
.mt-8 { margin-top: 2rem; }

/* ==========================================================================
   OPTIMISATIONS RESPONSIVES COMPLÈTES (SMARTPHONES & TABLETTES)
   ========================================================================== */

/* Empêcher l'auto-zoom forcé d'iOS Safari sur les champs de saisie */
@media (max-width: 768px) {
  input[type="text"],
  input[type="password"],
  input[type="email"],
  input[type="search"],
  textarea,
  select {
    font-size: 16px !important;
  }
}

@media (max-width: 768px) {
  /* Navigation Desktop vs Mobile */
  .desktop-nav { display: none !important; }
  .desktop-only { display: none !important; }

  /* Protection contre le masquage par la barre mobile flottante */
  .main-content {
    padding-bottom: calc(90px + env(safe-area-inset-bottom, 0px)) !important;
  }

  /* En-tête compacte sans débordement */
  .app-header {
    position: sticky;
    top: 0;
    z-index: 1000;
  }

  .header-container {
    padding: 7px 12px;
    gap: 8px;
    justify-content: space-between;
    flex-wrap: nowrap;
  }

  .brand-group {
    display: flex;
    align-items: center;
    gap: 8px;
    min-width: 0;
    flex: 1 1 auto;
    overflow: hidden;
  }

  .brand-logo-frame {
    width: 32px;
    height: 32px;
    padding: 2px;
    border-radius: 8px;
    flex-shrink: 0;
  }

  .brand-text {
    min-width: 0;
    overflow: hidden;
  }

  .brand-title {
    font-size: 0.92rem;
    font-weight: 700;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    line-height: 1.2;
  }

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

  .school-badge-city {
    display: none !important; /* Libère l'espace sur mobile pour éviter tout chevauchement */
  }

  .brand-subtitle {
    font-size: 0.65rem;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
  }

  .header-actions {
    display: flex;
    align-items: center;
    gap: 6px;
    flex-shrink: 0;
  }

  /* Badge live compact sur mobile */
  .sync-status-badge {
    padding: 3px 8px;
    font-size: 0.70rem;
    gap: 4px;
    white-space: nowrap;
    flex-shrink: 0;
  }

  .sync-status-badge .sync-text {
    max-width: 72px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }

  /* Masquer le bouton de partage dans l'en-tête sur mobile */
  .btn-share-header {
    display: none !important;
  }

  /* User pill optimisée sur mobile : médaillon avatar tactile uniquement */
  .user-pill {
    padding: 0;
    background: transparent;
    border: none;
    flex-shrink: 0;
  }

  .user-pill .avatar-ring {
    width: 28px;
    height: 28px;
    font-size: 0.72rem;
    border: 1.5px solid var(--accent-color);
  }

  .user-pill .user-meta,
  .user-pill #btn-user-action {
    display: none !important;
  }

  /* Sceau LIJA compact */
  .header-official-seal {
    width: 30px;
    height: 30px;
    padding: 3px;
    border-radius: 8px;
    flex-shrink: 0;
  }

  .theme-toggle-btn {
    width: 28px;
    height: 28px;
    font-size: 0.85rem;
    flex-shrink: 0;
  }

  /* ========================================================================
     LIQUID NAVIGATION (Mobile Pro • Référence TikTok @ilman)
     ======================================================================== */
  .mobile-bottom-nav {
    display: flex !important;
    position: fixed;
    bottom: calc(12px + env(safe-area-inset-bottom, 0px));
    left: 50%;
    transform: translateX(-50%);
    width: min(440px, calc(100% - 18px));
    height: 64px;
    background: var(--bg-surface-elevated);
    border: 1px solid var(--border-color);
    border-radius: 26px;
    box-shadow: 0 16px 36px rgba(0, 0, 0, 0.35), 0 0 0 1px var(--border-color);
    padding: 0 6px;
    z-index: 1000;
    justify-content: space-around;
    align-items: center;
    backdrop-filter: blur(16px);
    -webkit-backdrop-filter: blur(16px);
  }

  .mobile-nav-btn {
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    flex: 1;
    height: 100%;
    background: transparent;
    border: none;
    cursor: pointer;
    color: var(--text-muted);
    padding: 0;
    transition: all 0.25s cubic-bezier(0.4, 0, 0.2, 1);
  }

  .nav-btn-icon-wrapper {
    position: relative;
    width: 36px;
    height: 36px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    transition: all 0.3s cubic-bezier(0.34, 1.56, 0.64, 1);
  }

  .nav-btn-icon-wrapper i {
    font-size: 1.15rem;
    color: var(--text-muted);
    transition: transform 0.25s ease, color 0.25s ease;
  }

  .nav-btn-label {
    font-size: 0.62rem;
    font-weight: 600;
    letter-spacing: 0.2px;
    color: var(--text-muted);
    margin-top: 2px;
    transition: all 0.25s ease;
  }

  /* ÉLÉMENT ACTIF LIQUID NAVIGATION : Bulle Dynamique aux Couleurs du Thème */
  .mobile-nav-btn.active {
    color: var(--text-main);
  }

  .mobile-nav-btn:active .nav-btn-icon-wrapper {
    transform: scale(0.86);
    transition: transform 0.1s cubic-bezier(0.2, 0, 0, 1);
  }

  .mobile-nav-btn.active .nav-btn-icon-wrapper {
    background: var(--signal-blue);
    width: 44px;
    height: 44px;
    transform: translateY(-16px);
    box-shadow: 0 6px 16px rgba(0, 0, 0, 0.3), 0 0 0 5px var(--bg-surface-elevated);
    animation: liquidPop 0.3s cubic-bezier(0.34, 1.56, 0.64, 1);
  }

  .mobile-nav-btn.active .nav-btn-icon-wrapper i {
    font-size: 1.25rem;
    color: #FFFFFF !important;
  }

  .mobile-nav-btn.active .nav-btn-label {
    color: var(--text-main);
    font-weight: 700;
    transform: translateY(-10px);
    text-shadow: none;
  }

  @keyframes liquidPop {
    0% { transform: translateY(0) scale(0.75); }
    55% { transform: translateY(-22px) scale(1.1); }
    100% { transform: translateY(-16px) scale(1); }
  }

  @media (max-width: 380px) {
    .mobile-bottom-nav {
      padding: 0 3px;
      height: 58px;
    }
    .nav-btn-icon-wrapper {
      width: 30px;
      height: 30px;
    }
    .nav-btn-icon-wrapper i {
      font-size: 1rem;
    }
    .mobile-nav-btn.active .nav-btn-icon-wrapper {
      width: 38px;
      height: 38px;
      transform: translateY(-12px);
    }
    .nav-btn-label {
      font-size: 0.54rem;
    }
  }

  /* VUE 1 : CARTE DE NANCY SUR MOBILE */
  .map-view-layout {
    height: calc(100dvh - 54px - 56px - env(safe-area-inset-bottom, 0px));
    height: calc(100vh - 110px); /* Fallback */
    min-height: 380px;
    position: relative;
    width: 100%;
  }

  .map-controls-bar {
    top: 8px;
    left: 8px;
    right: 8px;
    flex-direction: column;
    align-items: stretch;
    gap: 6px;
    pointer-events: none;
  }

  .filter-pills-group {
    width: 100%;
    display: flex;
    gap: 5px;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
    padding-bottom: 2px;
    pointer-events: auto;
  }

  .filter-pill {
    padding: 5px 9px;
    font-size: 0.7rem;
    flex-shrink: 0;
  }

  .map-action-buttons {
    width: 100%;
    display: flex;
    gap: 5px;
    pointer-events: auto;
  }

  .map-action-buttons .btn {
    flex: 1;
    padding: 7px 4px;
    font-size: 0.72rem;
    text-align: center;
    justify-content: center;
    white-space: nowrap;
    border-radius: var(--radius-pill);
  }

  /* Éviter collision des boutons de zoom Leaflet */
  .leaflet-top.leaflet-right {
    top: 88px !important;
    right: 8px !important;
  }

  /* Bandeau de placement sur mobile */
  .placement-hint-banner {
    top: 88px;
    left: 8px;
    right: 8px;
    transform: none;
    width: auto;
    max-width: 100%;
    padding: 6px 12px;
    font-size: 0.74rem;
    gap: 8px;
    justify-content: space-between;
  }

  /* Tiroir de repères sur mobile : placé exactement au-dessus de la barre de navigation */
  .map-drawer {
    bottom: calc(82px + env(safe-area-inset-bottom, 0px));
    transform: translateY(calc(100% - 42px));
    border-radius: 14px 14px 0 0;
    z-index: 600;
  }

  .map-drawer.open {
    transform: translateY(0);
  }

  .drawer-handle {
    padding: 8px 14px;
    gap: 4px;
  }

  .handle-bar {
    width: 32px;
    height: 3px;
  }

  .drawer-body {
    max-height: 48vh;
    padding: 6px 10px calc(10px + env(safe-area-inset-bottom, 0px));
  }

  /* Popup Leaflet sur mobile */
  .marker-popup-card {
    max-width: 250px;
  }

  /* VUE 2 : ANNONCES SUR MOBILE */
  .view-container {
    padding: 12px 10px calc(96px + env(safe-area-inset-bottom, 0px));
    max-width: 100%;
  }

  .section-hero {
    margin-bottom: 12px;
    padding-bottom: 8px;
  }

  .hero-title {
    font-size: 1.18rem;
  }

  .hero-desc {
    font-size: 0.78rem;
  }

  .panel-header {
    padding: 10px 12px;
  }

  .panel-body {
    padding: 12px;
  }

  .form-row {
    flex-direction: column;
    gap: 10px;
  }

  .announcement-card {
    padding: 12px;
  }

  .ann-card-title {
    font-size: 0.95rem;
  }

  .ann-card-content {
    font-size: 0.82rem;
  }

  /* VUE 3 : DISCUSSION SIGNAL SUR MOBILE */
  .chat-container {
    padding: 6px 6px calc(86px + env(safe-area-inset-bottom, 0px));
  }

  .chat-card {
    height: calc(100dvh - 54px - 86px - env(safe-area-inset-bottom, 0px));
    height: calc(100vh - 145px); /* Fallback */
    border-radius: var(--radius-sm);
  }

  .chat-card-header {
    padding: 8px 12px;
  }

  .chat-title {
    font-size: 0.88rem;
  }

  .chat-subtitle {
    font-size: 0.68rem;
  }

  .chat-messages-viewport {
    padding: 8px 6px;
    gap: 6px;
  }

  .chat-bubble {
    max-width: 88% !important;
    padding: 7px 11px;
    font-size: 0.84rem;
  }

  .chat-quick-emojis {
    padding: 4px 6px;
    gap: 4px;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
  }

  .btn-emoji {
    padding: 3px 6px;
    font-size: 0.7rem;
    flex-shrink: 0;
  }

  .chat-input-bar {
    padding: 6px 8px;
    gap: 6px;
  }

  /* VUE 4 : VALIDATION ADMIN SUR MOBILE */
  .students-grid {
    grid-template-columns: 1fr;
    gap: 10px;
  }

  .student-validation-card {
    padding: 12px;
  }

  /* MODALES SUR MOBILE (ACCESSIBILITÉ & DÉFILEMENT PARFAIT) */
  .modal-overlay {
    padding: 10px 10px 40px;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
    align-items: flex-start;
  }

  .modal-card {
    padding: 16px 14px;
    max-height: calc(100dvh - 20px);
    max-height: calc(100vh - 20px);
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
    border-radius: 16px;
    width: 100%;
    margin: 8px auto 24px auto;
  }

  .modal-card:has(.modal-body) {
    padding: 0;
  }

  .auth-modal-card {
    max-height: calc(100dvh - 24px) !important;
    max-height: calc(100vh - 24px) !important;
    overflow-y: auto !important;
    overflow-x: hidden !important;
    -webkit-overflow-scrolling: touch;
    padding: 16px 14px 24px 14px;
  }

  .modal-header-hero {
    margin-bottom: 10px;
  }

  .modal-school-badge {
    width: 36px;
    height: 36px;
    font-size: 0.95rem;
    margin-bottom: 4px;
  }

  .modal-main-title {
    font-size: 1.05rem;
  }

  .modal-main-desc {
    font-size: 0.74rem;
  }

  .modal-title {
    font-size: 1.05rem;
  }

  .modal-desc {
    font-size: 0.74rem;
  }

  .marker-type-selector {
    gap: 4px;
  }

  .type-card {
    padding: 6px 3px;
  }

  .type-icon-box {
    font-size: 0.9rem;
  }

  .type-name {
    font-size: 0.7rem;
  }

  .type-hint {
    font-size: 0.58rem;
  }

  .form-coords-row {
    flex-direction: column;
    gap: 5px;
  }

  .coords-chip {
    width: 100%;
    justify-content: center;
    font-size: 0.72rem;
  }

  .carnet-upload-card {
    padding: 14px 10px;
  }

  .upload-icon-circle {
    width: 40px;
    height: 40px;
    font-size: 1.15rem;
  }

  .upload-text-main {
    font-size: 0.85rem;
  }

  .upload-text-sub {
    font-size: 0.72rem;
  }

  /* Modale Partager & QR Code sur mobile */
  .share-modal-card {
    padding: 16px 12px;
  }

  .qr-display-box {
    padding: 8px;
    margin: 8px auto;
  }

  .qr-code-image {
    width: 160px;
    height: 160px;
  }

  .share-url-container {
    margin-top: 8px;
    flex-direction: column;
    align-items: stretch;
    gap: 6px;
  }

  .share-url-field {
    text-align: center;
    font-size: 0.75rem;
  }

  /* Notifications Toasts sur mobile (Placées sous l'en-tête pour ne jamais cacher la barre de navigation) */
  .toast-stack {
    top: 56px;
    bottom: auto;
    left: 12px;
    right: 12px;
    align-items: center;
  }

  .toast {
    width: 100%;
    max-width: 380px;
    padding: 8px 12px;
    font-size: 0.78rem;
  }

  /* Hub sur Mobile : Trafic Stan & Contacts encore plus compacts et lisibles */
  .stan-traffic-card {
    padding: 0.85rem;
    gap: 0.75rem;
  }

  .stan-lines-grid {
    grid-template-columns: 1fr;
    gap: 0.5rem;
  }

  .stan-line-chip {
    padding: 0.5rem 0.7rem;
  }

  .stan-traffic-footer {
    flex-direction: column;
    align-items: stretch;
    gap: 0.6rem;
  }

  .stan-quick-actions {
    display: flex;
    width: 100%;
  }

  .stan-quick-actions .btn {
    flex: 1;
    text-align: center;
    justify-content: center;
    font-size: 0.72rem;
    padding: 6px 8px;
  }

  .contact-compact {
    padding: 0.6rem 0.75rem;
    gap: 0.5rem;
  }

  .contact-compact .contact-icon-box {
    width: 32px;
    height: 32px;
    font-size: 0.85rem;
    border-radius: 6px;
  }

  .contact-compact .contact-title {
    font-size: 0.84rem;
  }

  .contact-compact .contact-desc {
    font-size: 0.68rem;
    display: -webkit-box;
    -webkit-line-clamp: 1;
    -webkit-box-orient: vertical;
    overflow: hidden;
  }

  .btn-call-compact {
    padding: 5px 8px;
    font-size: 0.75rem;
    gap: 0.35rem;
  }
}

/* ==========================================================================
   PRONOTE THEME & DIRECTION ARTISTIQUE OFFICIELLE
   ========================================================================== */

/* Liseré supérieur signature Végétal Nature's Greens */
.pronote-top-accent-bar {
  height: 3px;
  width: 100%;
  background: linear-gradient(90deg, #4B6E4E 0%, #8FA882 50%, #4B6E4E 100%);
  position: sticky;
  top: 0;
  z-index: 1001;
}

/* Badge PRONOTE dans le header */
.pronote-badge-icon {
  background: linear-gradient(135deg, var(--signal-blue) 0%, var(--accent-color) 100%) !important;
  box-shadow: 0 2px 8px rgba(75, 110, 78, 0.35);
}

.pronote-logo-tag {
  display: inline-block;
  background-color: var(--pronote-teal);
  color: #fff;
  font-size: 0.65rem;
  font-weight: 800;
  letter-spacing: 0.8px;
  padding: 1px 6px;
  border-radius: 4px;
  margin-right: 6px;
  vertical-align: middle;
}

/* Bouton bascule de thème Nuit/Jour */
.theme-toggle-btn {
  color: var(--text-muted);
  transition: transform 0.2s ease, color 0.2s ease;
}

.theme-toggle-btn:hover {
  color: var(--pronote-teal-light);
  transform: rotate(20deg);
}

/* ==========================================================================
   MODE SOMBRE REPOSANT (DARK THEME ACTIVABLE VIA RÉGLAGES)
   ========================================================================== */
body.theme-pronote-dark {
  --bg-main: #0B111A;
  --bg-surface: #131D2A;
  --bg-surface-elevated: #1B293C;
  --bg-input: #0F1722;
  --bg-glass: rgba(19, 29, 42, 0.95);
  --navy-deep: #F8FAFC;
  --navy-academic: #38BDF8;
  --signal-blue: #3B82F6;
  --signal-blue-hover: #60A5FA;
  --signal-blue-soft: rgba(59, 130, 246, 0.18);
  --accent-color: #38BDF8;
  --text-main: #F8FAFC;
  --text-muted: #94A3B8;
  --text-subtle: #64748B;
  --border-color: rgba(255, 255, 255, 0.08);
  --border-focus: #38BDF8;
  --shadow-sm: 0 2px 6px rgba(0, 0, 0, 0.35);
  --shadow-md: 0 6px 18px rgba(0, 0, 0, 0.45);
  --shadow-lg: 0 12px 32px rgba(0, 0, 0, 0.55);
  background-color: var(--bg-main);
  color: var(--text-main);
}

body.theme-pronote-dark .app-header {
  background-color: var(--bg-surface);
  border-bottom: 1px solid var(--border-color);
}

body.theme-pronote-dark .brand-official-logo,
body.theme-pronote-dark .seal-logo-img {
  filter: brightness(0) invert(1);
}

body.theme-pronote-dark .desktop-nav {
  background: rgba(255, 255, 255, 0.05);
  border: 1px solid var(--border-color);
}

body.theme-pronote-dark .nav-tab {
  color: var(--text-muted);
}

body.theme-pronote-dark .nav-tab:hover {
  color: var(--text-main);
}

body.theme-pronote-dark .nav-tab.active {
  background-color: var(--signal-blue);
  color: #FFFFFF;
}

body.theme-pronote-dark .user-pill {
  background: rgba(255, 255, 255, 0.05);
  border-color: var(--border-color);
}


/* ==========================================================================
   MODE PRONOTE JOUR (LIGHT THEME INSTITUTIONNEL & ÉLÉGANT)
   ========================================================================== */
body.theme-pronote-light {
  background-color: var(--bg-main);
  color: var(--text-main);
}

body.theme-pronote-light .app-header {
  background-color: #FFFFFF;
  border-bottom: 1px solid var(--border-color);
  box-shadow: 0 1px 4px rgba(15, 23, 42, 0.04);
}

body.theme-pronote-light .brand-official-logo,
body.theme-pronote-light .seal-logo-img {
  filter: brightness(0) saturate(100%) invert(11%) sepia(26%) saturate(2200%) hue-rotate(185deg) brightness(92%) contrast(98%);
}

body.theme-pronote-light .brand-logo-frame,
body.theme-pronote-light .header-official-seal {
  background: rgba(15, 23, 42, 0.04);
  border-color: rgba(15, 23, 42, 0.1);
}

body.theme-pronote-light .desktop-nav {
  background-color: #F1F5F9;
  border-color: #E2E8F0;
  box-shadow: none;
}

body.theme-pronote-light .nav-tab {
  color: #64748B;
}

body.theme-pronote-light .nav-tab:hover {
  color: #0F172A;
  background-color: rgba(15, 23, 42, 0.05);
}

body.theme-pronote-light .nav-tab.active {
  background-color: #FFFFFF;
  color: var(--signal-blue);
  box-shadow: 0 2px 8px rgba(15, 23, 42, 0.08);
}

body.theme-pronote-light .user-pill {
  background-color: #FFFFFF;
  border-color: #E2E8F0;
}

body.theme-pronote-light .panel,
body.theme-pronote-light .portal-card,
body.theme-pronote-light .contact-card,
body.theme-pronote-light .stan-traffic-card,
body.theme-pronote-light .lostfound-card,
body.theme-pronote-light .schedule-grid-box,
body.theme-pronote-light .modal-card {
  background-color: #FFFFFF;
  border-color: #E2E8F0;
  box-shadow: var(--shadow-sm);
}

body.theme-pronote-light .toast {
  background: #FFFFFF;
  color: #0F172A;
  border-color: #E2E8F0;
  box-shadow: 0 8px 24px rgba(15, 23, 42, 0.1);
}


/* ==========================================================================
   VUE : HUB QUOTIDIEN (DESIGN VÉGÉTAL NATURE'S GREENS)
   ========================================================================== */
.hub-page-container {
  display: flex;
  flex-direction: column;
  gap: 2.2rem;
  padding-bottom: 3.5rem;
}

/* Hero Bannière Hub */
.hub-hero-card {
  background: linear-gradient(135deg, rgba(94, 130, 98, 0.14) 0%, rgba(21, 32, 24, 0.7) 100%), var(--bg-surface);
  border: 1px solid var(--border-color);
  border-radius: var(--radius-lg);
  padding: 1.6rem 1.9rem;
  box-shadow: none;
  position: relative;
  overflow: hidden;
}

.hub-hero-card::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 4px;
  height: 100%;
  background: var(--signal-blue);
}

.hub-hero-topline {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  margin-bottom: 0.8rem;
  flex-wrap: wrap;
}

.pronote-status-chip {
  display: inline-flex;
  align-items: center;
  gap: 0.45rem;
  background-color: var(--signal-blue-soft);
  color: var(--accent-color);
  font-size: 0.78rem;
  font-weight: 500;
  padding: 3px 10px;
  border-radius: var(--radius-pill);
  border: 1px solid var(--border-color);
}

.hub-date-chip {
  font-size: 0.8rem;
  color: var(--text-muted);
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  font-weight: 400;
}

.hub-hero-body {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1.5rem;
  flex-wrap: wrap;
}

.hub-hero-content {
  flex: 1;
  min-width: 280px;
}

.hub-hero-title {
  font-size: 1.45rem;
  font-weight: 600;
  color: var(--text-main);
  line-height: 1.25;
  margin-bottom: 0.5rem;
}

.hub-hero-subtitle {
  font-size: 0.92rem;
  color: var(--text-muted);
  line-height: 1.5;
}

.hub-hero-aside {
  display: flex;
  align-items: center;
}

.hub-quick-stat-box {
  background: var(--bg-input);
  padding: 0.8rem 1.2rem;
  border-radius: var(--radius-md);
  border: 1px solid var(--border-color);
  text-align: right;
  min-width: 180px;
}

.hub-stat-label {
  display: block;
  font-size: 0.72rem;
  text-transform: uppercase;
  color: var(--text-subtle);
  font-weight: 500;
}

.hub-stat-val {
  display: block;
  font-size: 1.05rem;
  font-weight: 600;
  color: var(--accent-color);
  line-height: 1.2;
}

.hub-stat-sub {
  display: block;
  font-size: 0.75rem;
  color: var(--text-muted);
}

/* Sections du Hub */
.hub-section-block {
  display: flex;
  flex-direction: column;
  gap: 1.25rem;
}

.hub-section-header {
  display: flex;
  align-items: flex-start;
  gap: 0.8rem;
}

.hub-section-header.between-row {
  justify-content: space-between;
  align-items: center;
  flex-wrap: wrap;
  gap: 1rem;
}

.hub-title-with-icon {
  display: flex;
  align-items: flex-start;
  gap: 0.8rem;
}

.hub-section-icon {
  width: 38px;
  height: 38px;
  border-radius: 10px;
  background-color: var(--signal-blue-soft);
  color: var(--accent-color);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.05rem;
  flex-shrink: 0;
  border: 1px solid var(--border-color);
}

.hub-section-title {
  font-size: 1.15rem;
  font-weight: 600;
  color: var(--text-main);
  line-height: 1.2;
}

.hub-section-desc {
  font-size: 0.85rem;
  color: var(--text-muted);
  margin-top: 2px;
}

.hub-actions-inline {
  display: flex;
  align-items: center;
  gap: 0.5rem;
}

/* Grille des 4 Portails Scolaires */
.portal-cards-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  gap: 1.1rem;
}

.portal-card {
  background-color: var(--bg-surface);
  border: 1px solid var(--border-color);
  border-radius: var(--radius-md);
  padding: 1.25rem;
  text-decoration: none;
  color: inherit;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  transition: border-color 0.15s ease;
  position: relative;
  overflow: hidden;
  box-shadow: none;
}

.portal-card::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 3px;
  background: var(--border-color);
  transition: background 0.15s ease;
}

.portal-card:hover {
  transform: none;
  box-shadow: none;
  border-color: var(--border-focus);
}

/* Style individuel des portails */
.card-pronote::before {
  background: var(--pronote-teal);
}
.card-pronote:hover {
  border-color: var(--pronote-teal);
}
.card-pronote .portal-badge-pronote {
  display: flex;
  align-items: center;
  gap: 0.4rem;
}
.badge-tag-p {
  background-color: var(--pronote-teal);
  color: #fff;
  font-weight: 600;
  font-size: 0.72rem;
  padding: 2px 7px;
  border-radius: 4px;
  letter-spacing: 0.4px;
}
.badge-tag-official {
  font-size: 0.7rem;
  color: var(--text-subtle);
  font-weight: 400;
}

.card-mbn::before {
  background: #0284c7;
}
.card-mbn:hover {
  border-color: #0284c7;
}
.badge-tag-mbn {
  background-color: #0284c7;
  color: #fff;
  font-weight: 600;
  font-size: 0.72rem;
  padding: 2px 7px;
  border-radius: 4px;
}
.badge-tag-region {
  font-size: 0.7rem;
  color: var(--text-subtle);
  font-weight: 400;
}

.card-educonnect::before {
  background: #3b82f6;
}
.card-educonnect:hover {
  border-color: #3b82f6;
}
.badge-tag-edu {
  background-color: #3b82f6;
  color: #fff;
  font-weight: 600;
  font-size: 0.72rem;
  padding: 2px 7px;
  border-radius: 4px;
}
.badge-tag-gov {
  font-size: 0.7rem;
  color: var(--text-subtle);
  font-weight: 400;
}

.card-parcoursup::before {
  background: #10b981;
}
.card-parcoursup:hover {
  border-color: #10b981;
}
.badge-tag-ps {
  background-color: #10b981;
  color: #fff;
  font-weight: 600;
  font-size: 0.72rem;
  padding: 2px 7px;
  border-radius: 4px;
}
.badge-tag-postbac {
  font-size: 0.7rem;
  color: var(--text-subtle);
  font-weight: 400;
}

.portal-card-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 0.9rem;
}

.portal-external-icon {
  font-size: 0.85rem;
  color: var(--text-subtle);
  transition: color 0.15s ease;
}

.portal-card:hover .portal-external-icon {
  color: var(--text-main);
  transform: none;
}

.portal-title {
  font-size: 1rem;
  font-weight: 600;
  color: var(--text-main);
  margin-bottom: 0.4rem;
}

.portal-desc {
  font-size: 0.82rem;
  color: var(--text-muted);
  line-height: 1.45;
  margin-bottom: 1rem;
}

.portal-card-footer {
  margin-top: auto;
  border-top: 1px solid var(--border-color);
  padding-top: 0.75rem;
}

.portal-link-text {
  font-size: 0.8rem;
  font-weight: 500;
  color: var(--pronote-teal-light);
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  transition: gap 0.15s ease;
}

.portal-card:hover .portal-link-text {
  gap: 0.5rem;
}

/* ==========================================================================
   WIDGET TRAFIC RÉSEAU STAN NANCY (EN BREF)
   ========================================================================== */
.stan-live-status-pill {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  background: rgba(16, 185, 129, 0.12);
  border: 1px solid rgba(16, 185, 129, 0.25);
  color: #34d399;
  padding: 4px 10px;
  border-radius: var(--radius-pill);
  font-size: 0.76rem;
  font-weight: 500;
}

.stan-traffic-card {
  background-color: var(--bg-surface);
  border: 1px solid var(--border-color);
  border-radius: var(--radius-md);
  padding: 1.1rem 1.25rem;
  box-shadow: none;
  display: flex;
  flex-direction: column;
  gap: 1rem;
}

.stan-lines-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(230px, 1fr));
  gap: 0.75rem;
}

.stan-line-chip {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  padding: 0.65rem 0.85rem;
  background: var(--bg-input);
  border: 1px solid var(--border-color);
  border-radius: var(--radius-sm);
  transition: border-color 0.15s ease;
}

.stan-line-chip:hover {
  border-color: var(--border-focus);
}

.stan-badge-pill {
  font-weight: 600;
  font-size: 0.78rem;
  padding: 3px 8px;
  border-radius: 6px;
  color: #fff;
  letter-spacing: 0.4px;
  min-width: 42px;
  text-align: center;
}

.stan-badge-pill.stan-t1 {
  background: linear-gradient(135deg, #0284c7 0%, #0369a1 100%);
}

.stan-badge-pill.stan-corol {
  background: linear-gradient(135deg, #f59e0b 0%, #d97706 100%);
}

.stan-badge-pill.stan-tempo {
  background: linear-gradient(135deg, #2563EB 0%, #1D4ED8 100%);
}

.stan-line-details {
  display: flex;
  flex-direction: column;
  min-width: 0;
  flex: 1;
}

.stan-line-title {
  font-size: 0.88rem;
  font-weight: 600;
  color: var(--text-main);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.stan-line-sub {
  font-size: 0.72rem;
  color: var(--text-muted);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.stan-status-indicator {
  font-size: 0.72rem;
  font-weight: 500;
  color: #34d399;
  background: rgba(16, 185, 129, 0.14);
  padding: 3px 8px;
  border-radius: 4px;
  white-space: nowrap;
}

.stan-traffic-footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.8rem;
  flex-wrap: wrap;
  padding-top: 0.75rem;
  border-top: 1px solid var(--border-color);
}

.stan-stops-info {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  font-size: 0.78rem;
  color: var(--text-muted);
}

.stan-stops-info i {
  color: var(--accent-color);
}

.stan-quick-actions {
  display: flex;
  gap: 0.5rem;
  flex-wrap: wrap;
}

/* Grille Contacts & Urgences (Compact & Lisible) */
.contact-cards-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: 1rem;
}

.compact-contacts {
  display: flex;
  flex-direction: column;
  gap: 0.6rem;
}

.contact-compact {
  flex-direction: row;
  align-items: center;
  justify-content: space-between;
  padding: 0.75rem 1rem;
  border-radius: var(--radius-sm);
  gap: 0.75rem;
  box-shadow: none;
}

.contact-compact-left {
  display: flex;
  align-items: center;
  gap: 0.8rem;
  min-width: 0;
  flex: 1;
}

.contact-compact .contact-info {
  min-width: 0;
}

.contact-compact .contact-title {
  font-size: 0.92rem;
  font-weight: 600;
  margin: 0;
  line-height: 1.25;
}

.contact-compact .contact-desc {
  font-size: 0.74rem;
  color: var(--text-muted);
  margin: 0;
  line-height: 1.2;
}

.contact-compact-right {
  flex-shrink: 0;
}

.btn-call-compact {
  padding: 6px 12px;
  font-size: 0.8rem;
  font-weight: 500;
  border-radius: var(--radius-sm);
  white-space: nowrap;
  display: inline-flex;
  align-items: center;
  gap: 0.45rem;
}

.contact-card {
  background-color: var(--bg-surface);
  border: 1px solid var(--border-color);
  border-radius: var(--radius-md);
  padding: 1.15rem;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  box-shadow: none;
}

.contact-card.border-amber {
  border-color: rgba(245, 158, 11, 0.35);
}

.contact-card-top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 0.75rem;
}

.contact-icon-box {
  width: 36px;
  height: 36px;
  border-radius: 8px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1rem;
}

.bg-teal-soft { background: var(--pronote-teal-soft); }
.text-teal { color: var(--pronote-teal-light); }
.bg-blue-soft { background: rgba(2, 132, 199, 0.15); }
.text-blue { color: #38bdf8; }
.bg-green-soft { background: rgba(16, 185, 129, 0.15); }
.text-green { color: #34d399; }
.bg-amber-soft { background: rgba(245, 158, 11, 0.15); }
.text-amber { color: #fbbf24; }
.bg-purple-soft { background: rgba(168, 85, 247, 0.15); }
.text-purple { color: var(--primary-blue, #2563EB); }

.contact-badge {
  font-size: 0.68rem;
  font-weight: 500;
  text-transform: uppercase;
  color: var(--text-subtle);
  letter-spacing: 0.5px;
}

.contact-title {
  font-size: 0.98rem;
  font-weight: 600;
  color: var(--text-main);
  margin-bottom: 0.3rem;
}

.contact-desc {
  font-size: 0.8rem;
  color: var(--text-muted);
  line-height: 1.4;
  margin-bottom: 0.9rem;
}

.btn-call {
  font-weight: 500;
  gap: 0.45rem;
  width: 100%;
}

/* Grille Horaires des Sonneries */
.schedule-grid-box {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  gap: 1.2rem;
  background-color: var(--bg-surface);
  border: 1px solid var(--border-color);
  border-radius: var(--radius-md);
  padding: 1.3rem;
  box-shadow: none;
}

.schedule-column {
  display: flex;
  flex-direction: column;
}

.schedule-column-title {
  font-size: 0.95rem;
  font-weight: 600;
  color: var(--text-main);
  margin-bottom: 0.8rem;
  display: flex;
  align-items: center;
  gap: 0.5rem;
  padding-bottom: 0.4rem;
  border-bottom: 1px solid var(--border-color);
}

.schedule-list {
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: 0.45rem;
  font-size: 0.82rem;
}

.schedule-list li {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 4px 6px;
  border-radius: 4px;
}

.schedule-slot {
  font-weight: 500;
  color: var(--pronote-teal-light);
  background: var(--pronote-teal-soft);
  padding: 1px 6px;
  border-radius: 4px;
  font-size: 0.72rem;
}

.schedule-break {
  background: rgba(245, 158, 11, 0.1) !important;
  color: #fbbf24 !important;
  font-weight: 500;
}

.schedule-column.highlight-noon {
  background: var(--bg-input);
  border-radius: var(--radius-sm);
  padding: 1rem;
}

.noon-box {
  margin-top: 0.4rem;
}

.noon-time {
  font-size: 1.25rem;
  font-weight: 600;
  color: #34d399;
  margin-bottom: 0.3rem;
}

.noon-desc {
  font-size: 0.8rem;
  color: var(--text-muted);
  line-height: 1.4;
}

/* ==========================================================================
   VUE : OBJETS PERDUS & TROUVÉS (LOST & FOUND)
   ========================================================================== */
.lostfound-toolbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  flex-wrap: wrap;
  background-color: var(--bg-surface);
  padding: 0.8rem 1rem;
  border-radius: var(--radius-md);
  border: 1px solid var(--border-color);
}

.lostfound-grid,
.lostfound-grid-recent {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(290px, 1fr));
  gap: 1.2rem;
}

.lostfound-card {
  background-color: var(--bg-surface);
  border: 1px solid var(--border-color);
  border-radius: var(--radius-md);
  overflow: hidden;
  display: flex;
  flex-direction: column;
  transition: transform 0.2s ease, box-shadow 0.2s ease;
  box-shadow: var(--shadow-sm);
}

.lostfound-card:hover {
  transform: translateY(-2px);
  box-shadow: var(--shadow-md);
}

.lf-card-header {
  padding: 0.85rem 1.1rem;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.5rem;
  border-bottom: 1px solid var(--border-color);
}

.lf-status-chip {
  font-size: 0.72rem;
  font-weight: 700;
  padding: 3px 8px;
  border-radius: var(--radius-pill);
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
}

.lf-status-perdu {
  background-color: rgba(239, 68, 68, 0.15);
  color: #f87171;
  border: 1px solid rgba(239, 68, 68, 0.3);
}

.lf-status-trouve {
  background-color: var(--pronote-teal-soft);
  color: var(--pronote-teal-light);
  border: 1px solid var(--pronote-teal-border);
}

.lf-status-recovered {
  background-color: rgba(16, 185, 129, 0.15);
  color: #34d399;
  border: 1px solid rgba(16, 185, 129, 0.3);
}

.lf-date-text {
  font-size: 0.75rem;
  color: var(--text-subtle);
}

.lf-card-media {
  width: 100%;
  height: 180px;
  overflow: hidden;
  background-color: var(--bg-input);
  cursor: pointer;
  position: relative;
}

.lf-card-img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.3s ease;
}

.lf-card-media:hover .lf-card-img {
  transform: scale(1.04);
}

.lf-card-body {
  padding: 1.1rem;
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
  flex: 1;
}

.lf-item-title {
  font-size: 1.05rem;
  font-weight: 700;
  color: var(--text-main);
  line-height: 1.3;
}

.lf-meta-badges {
  display: flex;
  gap: 0.4rem;
  flex-wrap: wrap;
}

.lf-meta-chip {
  font-size: 0.72rem;
  padding: 2px 7px;
  border-radius: 4px;
  background-color: var(--bg-input);
  color: var(--text-muted);
  font-weight: 600;
  display: inline-flex;
  align-items: center;
  gap: 0.3rem;
}

.lf-item-desc {
  font-size: 0.83rem;
  color: var(--text-muted);
  line-height: 1.45;
  margin-top: 0.3rem;
}

.lf-contact-box {
  margin-top: auto;
  background-color: var(--bg-input);
  border-radius: var(--radius-sm);
  padding: 0.65rem 0.85rem;
  font-size: 0.8rem;
  border: 1px solid var(--border-color);
  transition: all 0.2s ease;
}

.lf-author-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.5rem;
  flex-wrap: wrap;
}

.lf-contact-label {
  font-weight: 600;
  color: var(--text-muted);
  display: flex;
  align-items: center;
  gap: 0.35rem;
  font-size: 0.78rem;
}

.lf-privacy-pill {
  display: inline-flex;
  align-items: center;
  gap: 0.3rem;
  padding: 0.15rem 0.45rem;
  border-radius: 9999px;
  background-color: rgba(255, 255, 255, 0.06);
  border: 1px solid var(--border-color);
  font-size: 0.68rem;
  color: var(--text-muted);
  letter-spacing: 0.02em;
}

.lf-contact-action-wrap {
  margin-top: 0.45rem;
}

.btn-reveal-lf-contact {
  width: 100%;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.45rem;
  padding: 0.45rem 0.75rem;
  font-size: 0.78rem;
  font-weight: 600;
  border-radius: var(--radius-sm);
  background: var(--bg-card);
  border: 1px solid var(--border-color);
  color: var(--text-main);
  cursor: pointer;
  transition: all 0.18s ease;
}

.btn-reveal-lf-contact:hover {
  background: var(--bg-hover);
  border-color: var(--color-primary);
  color: var(--color-primary);
  transform: translateY(-1px);
}

.lf-contact-revealed {
  animation: fadeIn 0.2s ease;
}

.lf-contact-info-pill {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.5rem;
  padding: 0.4rem 0.65rem;
  background: rgba(30, 41, 59, 0.5);
  border: 1px solid var(--border-color);
  border-radius: var(--radius-sm);
}

.theme-pronote-light .lf-contact-info-pill {
  background: #f1f5f9;
}

.lf-contact-val {
  color: var(--text-main);
  font-weight: 600;
  font-size: 0.82rem;
  word-break: break-all;
  user-select: text;
}

.lf-card-footer {
  padding: 0.75rem 1.1rem;
  border-top: 1px solid var(--border-color);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.5rem;
}

.lf-empty-state {
  grid-column: 1 / -1;
  text-align: center;
  padding: 3rem 1.5rem;
  background-color: var(--bg-surface);
  border: 1px dashed var(--border-color);
  border-radius: var(--radius-md);
}

.lf-empty-icon {
  font-size: 2.5rem;
  color: var(--text-subtle);
  margin-bottom: 0.8rem;
}

.lf-empty-title {
  font-size: 1.15rem;
  font-weight: 700;
  color: var(--text-main);
  margin-bottom: 0.3rem;
}

.lf-empty-desc {
  font-size: 0.85rem;
  color: var(--text-muted);
}

/* Modale Signalement Objet */
.type-toggle-group {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0.6rem;
}

.type-toggle-option input[type="radio"] {
  display: none;
}

.toggle-pill {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  padding: 0.65rem 0.9rem;
  border-radius: var(--radius-sm);
  border: 1px solid var(--border-color);
  background-color: var(--bg-input);
  color: var(--text-muted);
  font-size: 0.85rem;
  font-weight: 700;
  cursor: pointer;
  transition: all 0.2s ease;
  text-align: center;
}

.type-toggle-option input[type="radio"]:checked + .pill-perdu {
  background-color: rgba(239, 68, 68, 0.18);
  border-color: #ef4444;
  color: #f87171;
}

.type-toggle-option input[type="radio"]:checked + .pill-trouve {
  background-color: var(--pronote-teal-soft);
  border-color: var(--pronote-teal);
  color: var(--pronote-teal-light);
}

.lf-photo-preview-box {
  margin-top: 0.6rem;
  position: relative;
  width: 140px;
  height: 100px;
  border-radius: var(--radius-sm);
  overflow: hidden;
  border: 1px solid var(--border-color);
}

.lf-photo-preview-box img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.btn-clear-photo {
  position: absolute;
  top: 4px;
  right: 4px;
  width: 24px;
  height: 24px;
  border-radius: 50%;
  background: rgba(0, 0, 0, 0.7);
  color: #fff;
  border: none;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 0.75rem;
}

/* ==========================================================================
   TRAFIC BUS & TRAM RÉSEAU STAN NANCY (HUB QUOTIDIEN)
   ========================================================================== */
.stan-traffic-card {
  background: var(--bg-surface);
  border: 1px solid var(--border-color);
  border-radius: var(--radius-md);
  padding: 1.25rem 1.4rem;
  box-shadow: var(--shadow-sm);
  display: flex;
  flex-direction: column;
  gap: 1rem;
}

.stan-lines-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  gap: 0.85rem;
}

.stan-line-chip {
  background: var(--bg-input);
  border: 1px solid var(--border-color);
  border-radius: var(--radius-sm);
  padding: 0.7rem 0.9rem;
  display: flex;
  align-items: center;
  gap: 0.75rem;
  transition: transform 0.2s ease, border-color 0.2s ease;
}

.stan-line-chip:hover {
  transform: translateY(-2px);
  border-color: var(--accent-color);
}

.stan-badge-pill {
  font-weight: 800;
  font-size: 0.78rem;
  padding: 3px 8px;
  border-radius: var(--radius-pill);
  color: #fff;
  letter-spacing: 0.3px;
  flex-shrink: 0;
}

.stan-t1 {
  background: linear-gradient(135deg, #059669 0%, #10b981 100%);
}

.stan-corol {
  background: linear-gradient(135deg, #d97706 0%, #f59e0b 100%);
}

.stan-tempo {
  background: linear-gradient(135deg, #2563eb 0%, #3b82f6 100%);
}

.stan-line-details {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
}

.stan-line-title {
  font-size: 0.86rem;
  font-weight: 700;
  color: var(--text-main);
  line-height: 1.2;
}

.stan-line-sub {
  font-size: 0.72rem;
  color: var(--text-muted);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.stan-status-indicator {
  font-size: 0.70rem;
  font-weight: 700;
  color: var(--color-success);
  flex-shrink: 0;
}

.stan-traffic-footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  flex-wrap: wrap;
  padding-top: 0.85rem;
  border-top: 1px dashed var(--border-color);
}

.stan-stops-info {
  font-size: 0.82rem;
  color: var(--text-muted);
  display: flex;
  align-items: center;
  gap: 0.45rem;
}

.stan-stops-info strong {
  color: var(--text-main);
}

.stan-quick-actions {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  flex-wrap: wrap;
}

.stan-live-status-pill {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 3px 9px;
  background: var(--bg-input);
  border: 1px solid var(--border-color);
  border-radius: var(--radius-pill);
  font-size: 0.72rem;
  font-weight: 600;
  color: var(--text-muted);
}

/* ==========================================================================
   NUMÉROS UTILES & CONTACTS COMPACTS (ULTRA-LISIBLE SUR MOBILE)
   ========================================================================== */
.compact-contacts {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: 0.85rem;
}

.contact-compact {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.85rem;
  padding: 0.85rem 1.1rem;
  background-color: var(--bg-surface);
  border: 1px solid var(--border-color);
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-sm);
  transition: transform 0.2s ease, border-color 0.2s ease;
}

.contact-compact:hover {
  transform: translateY(-2px);
  border-color: var(--accent-color);
}

.contact-compact-left {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  min-width: 0;
  flex: 1;
}

.contact-compact .contact-info {
  min-width: 0;
}

.contact-compact .contact-title {
  font-size: 0.92rem;
  font-weight: 700;
  color: var(--text-main);
  line-height: 1.2;
  margin-bottom: 2px;
}

.contact-compact .contact-desc {
  font-size: 0.74rem;
  color: var(--text-muted);
  margin: 0;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.btn-call-compact {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-weight: 700;
  font-size: 0.80rem;
  padding: 6px 14px;
  border-radius: var(--radius-pill);
  white-space: nowrap;
  flex-shrink: 0;
}

@media (max-width: 768px) {
  .compact-contacts {
    grid-template-columns: 1fr;
    gap: 0.55rem;
  }
  
  .contact-compact {
    padding: 0.65rem 0.85rem;
  }

  .btn-call-compact {
    padding: 5px 10px;
    font-size: 0.76rem;
  }

  .stan-lines-grid {
    grid-template-columns: 1fr;
    gap: 0.55rem;
  }

  .stan-traffic-footer {
    flex-direction: column;
    align-items: flex-start;
    gap: 0.65rem;
  }

  .stan-quick-actions {
    width: 100%;
    justify-content: stretch;
  }

  .stan-quick-actions .btn {
    flex: 1;
    text-align: center;
    justify-content: center;
    font-size: 0.75rem;
    padding: 6px 8px;
  }
}

/* ==========================================================================
   VUE : SONDAGES & DÉMOCRATIE LYCÉENNE (PRONOTE STYLE)
   ========================================================================== */
.polls-toolbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  margin-top: 1.5rem;
  flex-wrap: wrap;
}

.polls-auth-banner {
  background: rgba(59, 130, 246, 0.12);
  border: 1px solid rgba(59, 130, 246, 0.3);
  color: #93c5fd;
  padding: 0.9rem 1.2rem;
  border-radius: var(--radius-md);
  margin-top: 1rem;
  display: flex;
  align-items: center;
  gap: 0.8rem;
  font-size: 0.85rem;
}

body.theme-pronote-light .polls-auth-banner {
  background: rgba(37, 99, 235, 0.08);
  border-color: rgba(37, 99, 235, 0.25);
  color: #1d4ed8;
}

.polls-cards-grid {
  display: flex;
  flex-direction: column;
  gap: 1.25rem;
}

.poll-card {
  background: var(--bg-surface);
  border: 1px solid var(--border-color);
  border-radius: var(--radius-lg);
  padding: 1.5rem 1.8rem;
  box-shadow: var(--shadow-sm);
  display: flex;
  flex-direction: column;
  gap: 1.1rem;
  position: relative;
  transition: border-color 0.2s ease, box-shadow 0.2s ease;
}

.poll-card:hover {
  box-shadow: var(--shadow-md);
  border-color: var(--pronote-teal-border);
}

.poll-card.poll-voted {
  border-left: 4px solid var(--pronote-teal);
}

.poll-card.poll-closed {
  opacity: 0.92;
}

.poll-header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 1rem;
  flex-wrap: wrap;
}

.poll-meta-badges {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  flex-wrap: wrap;
}

.poll-status-tag {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  font-size: 0.72rem;
  font-weight: 700;
  padding: 3px 8px;
  border-radius: var(--radius-pill);
}

.poll-status-open {
  background: rgba(16, 185, 129, 0.16);
  color: #34d399;
  border: 1px solid rgba(16, 185, 129, 0.3);
}

.poll-status-closed {
  background: rgba(100, 116, 139, 0.16);
  color: #94a3b8;
  border: 1px solid rgba(100, 116, 139, 0.3);
}

.poll-category-pill {
  font-size: 0.72rem;
  font-weight: 600;
  background: var(--bg-primary);
  border: 1px solid var(--border-color);
  padding: 3px 8px;
  border-radius: var(--radius-pill);
  color: var(--text-secondary);
}

.poll-title {
  font-size: 1.15rem;
  font-weight: 700;
  color: var(--text-primary);
  line-height: 1.35;
  margin-top: 0.4rem;
}

.poll-description {
  font-size: 0.88rem;
  color: var(--text-secondary);
  line-height: 1.45;
}

/* Options de vote interactives */
.poll-options-form {
  display: flex;
  flex-direction: column;
  gap: 0.7rem;
}

.poll-choice-label {
  display: flex;
  align-items: center;
  gap: 0.8rem;
  padding: 0.85rem 1.1rem;
  border-radius: var(--radius-md);
  border: 1px solid var(--border-color);
  background: var(--bg-primary);
  cursor: pointer;
  transition: all 0.2s ease;
  user-select: none;
}

.poll-choice-label:hover {
  border-color: var(--pronote-teal);
  background: var(--bg-surface);
}

.poll-choice-label input[type="radio"] {
  accent-color: var(--pronote-teal);
  width: 18px;
  height: 18px;
  cursor: pointer;
}

.poll-choice-text {
  font-size: 0.92rem;
  font-weight: 600;
  color: var(--text-primary);
  flex: 1;
}

/* Résultats avec barres de pourcentage animées */
.poll-results-list {
  display: flex;
  flex-direction: column;
  gap: 0.85rem;
}

.poll-result-item {
  display: flex;
  flex-direction: column;
  gap: 0.35rem;
}

.poll-result-top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.8rem;
  font-size: 0.86rem;
}

.poll-result-opt-name {
  font-weight: 600;
  color: var(--text-primary);
  display: flex;
  align-items: center;
  gap: 0.4rem;
}

.poll-result-opt-stats {
  font-size: 0.82rem;
  color: var(--text-secondary);
  font-weight: 700;
}

.poll-bar-track {
  width: 100%;
  height: 12px;
  background: var(--bg-primary);
  border-radius: var(--radius-pill);
  overflow: hidden;
  border: 1px solid var(--border-color);
  position: relative;
}

.poll-bar-fill {
  height: 100%;
  background: linear-gradient(90deg, #4B6E4E 0%, #8FA882 50%, #4B6E4E 100%);
  background-size: 200% 100%;
  animation: pollBarFlow 3.5s ease-in-out infinite;
  border-radius: var(--radius-pill);
  transition: width 0.8s cubic-bezier(0.34, 1.56, 0.64, 1);
  min-width: 6px;
  position: relative;
  overflow: hidden;
  box-shadow: 0 0 10px rgba(143, 168, 130, 0.3);
}

.poll-bar-fill::after {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  bottom: 0;
  width: 40px;
  background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.45), transparent);
  animation: pollSweepLight 2.2s infinite ease-in-out;
}

@keyframes pollBarFlow {
  0% { background-position: 0% 50%; }
  50% { background-position: 100% 50%; }
  100% { background-position: 0% 50%; }
}

@keyframes pollSweepLight {
  0% { transform: translateX(-40px); }
  60% { transform: translateX(350px); }
  100% { transform: translateX(350px); }
}

.poll-footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  padding-top: 0.8rem;
  border-top: 1px solid var(--border-color);
  flex-wrap: wrap;
  font-size: 0.8rem;
  color: var(--text-muted);
}

.poll-voted-stamp {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  color: var(--pronote-teal-light);
  font-weight: 700;
}

.poll-admin-controls {
  display: flex;
  gap: 0.4rem;
}

/* Modal Créer Sondage */
.poll-options-inputs-list {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
}

.poll-option-input-row {
  display: flex;
  align-items: center;
  gap: 0.5rem;
}

.btn-remove-opt {
  background: rgba(239, 68, 68, 0.15);
  border: 1px solid rgba(239, 68, 68, 0.3);
  color: #f87171;
  border-radius: var(--radius-sm);
  padding: 8px 11px;
  cursor: pointer;
  transition: all 0.15s ease;
}

.btn-remove-opt:hover {
  background: #ef4444;
  color: #fff;
}

.poll-preset-buttons {
  display: flex;
  gap: 0.4rem;
}

/* ==========================================================================
   CHAT REPLIES & 720P IMAGE PREVIEW
   ========================================================================== */
.btn-bubble-action.btn-reply:hover {
  color: #60a5fa;
}

.chat-reply-quote {
  display: flex;
  align-items: stretch;
  gap: 8px;
  background: rgba(0, 0, 0, 0.25);
  border-radius: var(--radius-sm);
  padding: 4px 8px;
  margin-bottom: 6px;
  cursor: pointer;
  border-left: 3px solid #60a5fa;
  transition: all 0.15s ease;
}

.chat-bubble.mine .chat-reply-quote {
  background: rgba(255, 255, 255, 0.15);
  border-left-color: #ffffff;
}

.chat-reply-quote:hover {
  background: rgba(0, 0, 0, 0.38);
  transform: translateX(2px);
}

.reply-quote-body {
  display: flex;
  flex-direction: column;
  overflow: hidden;
}

.reply-quote-author {
  font-size: 0.68rem;
  font-weight: 700;
  color: #93c5fd;
  display: flex;
  align-items: center;
  gap: 4px;
}

.chat-bubble.mine .reply-quote-author {
  color: #ffffff;
}

.reply-quote-text {
  font-size: 0.76rem;
  color: rgba(255, 255, 255, 0.85);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  margin: 0;
}

.chat-bubble-image-box {
  margin-top: 6px;
  border-radius: 8px;
  overflow: hidden;
  max-width: 280px;
  cursor: pointer;
  background: rgba(0, 0, 0, 0.2);
}

.chat-bubble-image-box img {
  width: 100%;
  height: auto;
  max-height: 220px;
  object-fit: cover;
  display: block;
  border-radius: 8px;
  transition: transform 0.2s ease;
}

.chat-bubble-image-box:hover img {
  transform: scale(1.02);
}

.chat-reply-bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  background: rgba(30, 41, 59, 0.9);
  backdrop-filter: blur(8px);
  border: 1px solid rgba(96, 165, 250, 0.35);
  border-bottom: none;
  border-radius: var(--radius-md) var(--radius-md) 0 0;
  padding: 6px 12px;
  margin: 0 12px;
  font-size: 0.78rem;
  color: #e2e8f0;
  animation: slideDown 0.2s ease;
}

.chat-reply-info {
  display: flex;
  align-items: center;
  gap: 8px;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
}

.chat-reply-info i {
  color: #60a5fa;
}

.btn-cancel-reply {
  background: transparent;
  border: none;
  color: var(--text-muted);
  cursor: pointer;
  padding: 2px 6px;
  border-radius: 50%;
  transition: all 0.15s ease;
}

.btn-cancel-reply:hover {
  color: #ef4444;
  background: rgba(239, 68, 68, 0.15);
}

.chat-image-preview-bar {
  display: flex;
  align-items: center;
  gap: 12px;
  background: rgba(15, 23, 42, 0.95);
  border: 1px solid var(--border-color);
  border-bottom: none;
  border-radius: var(--radius-md) var(--radius-md) 0 0;
  padding: 8px 12px;
  margin: 0 12px;
  animation: slideDown 0.2s ease;
}

.chat-image-preview-thumb {
  position: relative;
  width: 52px;
  height: 52px;
  border-radius: 6px;
  overflow: hidden;
  flex-shrink: 0;
}

.chat-image-preview-thumb img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.chat-image-badge-720p {
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  background: rgba(0, 0, 0, 0.75);
  font-size: 0.58rem;
  color: #38bdf8;
  text-align: center;
  padding: 1px 0;
  font-weight: 700;
}

.chat-image-preview-meta {
  display: flex;
  flex-direction: column;
  gap: 2px;
  flex-grow: 1;
}

.btn-chat-upload {
  position: relative;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

.hidden-file-input {
  display: none;
}

/* ==========================================================================
   GUICHET D'ASSISTANCE & TICKETS LYCÉENS
   ========================================================================== */
.hub-tickets-card {
  background: var(--bg-surface-elevated, #1c1c1e);
  border: 1px solid var(--border-color);
  border-radius: var(--radius-xl);
  padding: 1.5rem;
  box-shadow: none;
}

.tickets-filter-bar {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

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

.ticket-card {
  background: rgba(255, 255, 255, 0.03);
  border: 1px solid var(--border-color);
  border-radius: var(--radius-lg);
  padding: 14px;
  display: flex;
  flex-direction: column;
  gap: 8px;
  transition: border-color 0.15s ease;
  cursor: pointer;
}

.ticket-card:hover {
  border-color: rgba(168, 85, 247, 0.5);
  background: rgba(255, 255, 255, 0.06);
  transform: none;
  box-shadow: none;
}

.ticket-card-header {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 8px;
}

.ticket-badges-group {
  display: flex;
  flex-wrap: wrap;
  gap: 5px;
}

.badge-status-open {
  background: rgba(234, 179, 8, 0.15);
  color: #facc15;
  border: 1px solid rgba(234, 179, 8, 0.3);
  font-size: 0.68rem;
  padding: 2px 7px;
  border-radius: var(--radius-pill);
}

.badge-status-inprogress {
  background: rgba(59, 130, 246, 0.15);
  color: #60a5fa;
  border: 1px solid rgba(59, 130, 246, 0.3);
  font-size: 0.68rem;
  padding: 2px 7px;
  border-radius: var(--radius-pill);
}

.badge-status-resolved {
  background: rgba(34, 197, 94, 0.15);
  color: #4ade80;
  border: 1px solid rgba(34, 197, 94, 0.3);
  font-size: 0.68rem;
  padding: 2px 7px;
  border-radius: var(--radius-pill);
}

.badge-priority-urgent {
  background: rgba(239, 68, 68, 0.2);
  color: #f87171;
  border: 1px solid rgba(239, 68, 68, 0.4);
  font-size: 0.68rem;
  padding: 2px 7px;
  border-radius: var(--radius-pill);
  font-weight: 700;
}

.badge-priority-normal {
  background: rgba(255, 255, 255, 0.06);
  color: var(--text-muted);
  font-size: 0.68rem;
  padding: 2px 7px;
  border-radius: var(--radius-pill);
}

.ticket-card-title {
  font-size: 0.95rem;
  font-weight: 700;
  color: #fff;
  margin: 0;
  line-height: 1.3;
}

.ticket-card-desc {
  font-size: 0.8rem;
  color: var(--text-muted);
  line-height: 1.4;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  margin: 0;
}

.ticket-card-footer {
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-size: 0.72rem;
  color: var(--text-subtle);
  margin-top: auto;
  padding-top: 6px;
  border-top: 1px solid rgba(255,255,255,0.06);
}

.ticket-replies-pill {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  color: var(--primary-blue, #60A5FA);
  font-weight: 600;
}

.ticket-detail-header {
  margin-bottom: 1rem;
  border-bottom: 1px solid var(--border-color);
  padding-bottom: 0.75rem;
}

.ticket-header-top {
  display: flex;
  gap: 8px;
  margin-bottom: 6px;
  flex-wrap: wrap;
}

.ticket-detail-title {
  font-size: 1.25rem;
  font-weight: 800;
  color: #fff;
  margin: 0 0 4px 0;
}

.ticket-detail-meta {
  font-size: 0.75rem;
  color: var(--text-muted);
  display: flex;
  gap: 6px;
}

.ticket-original-message {
  background: rgba(0, 0, 0, 0.25);
  border: 1px solid var(--border-color);
  border-radius: var(--radius-md);
  padding: 12px;
  margin-bottom: 1rem;
}

.ticket-desc-text {
  font-size: 0.88rem;
  line-height: 1.5;
  color: #f1f5f9;
  margin: 0;
  white-space: pre-wrap;
}

.ticket-attachment-box {
  margin-top: 10px;
  max-width: 320px;
  border-radius: 8px;
  overflow: hidden;
  cursor: pointer;
}

.ticket-attachment-box img {
  width: 100%;
  height: auto;
  border-radius: 8px;
  display: block;
}

.ticket-thread-title {
  font-size: 0.9rem;
  font-weight: 700;
  color: #fff;
  margin: 0 0 10px 0;
}

.ticket-replies-list {
  display: flex;
  flex-direction: column;
  gap: 10px;
  max-height: 260px;
  overflow-y: auto;
  padding-right: 4px;
}

.ticket-reply-bubble {
  background: rgba(255, 255, 255, 0.04);
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: var(--radius-md);
  padding: 10px 12px;
}

.ticket-reply-bubble.staff {
  background: rgba(168, 85, 247, 0.12);
  border-color: rgba(168, 85, 247, 0.35);
}

.ticket-reply-head {
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-size: 0.72rem;
  margin-bottom: 4px;
}

.ticket-reply-author {
  font-weight: 700;
  color: #e2e8f0;
}

.ticket-reply-time {
  color: var(--text-subtle);
}

.ticket-reply-text {
  font-size: 0.84rem;
  color: #cbd5e1;
  margin: 0;
  line-height: 1.4;
}

.ticket-reply-actions-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-top: 8px;
  flex-wrap: wrap;
  gap: 8px;
}

.ticket-status-controls {
  display: flex;
  gap: 6px;
}

.ticket-upload-box {
  position: relative;
  background: rgba(0, 0, 0, 0.2);
  border: 1px dashed var(--border-color);
  border-radius: var(--radius-md);
  padding: 14px;
  text-align: center;
  cursor: pointer;
  transition: all 0.2s ease;
}

.ticket-upload-box:hover {
  border-color: var(--color-accent);
  background: rgba(168, 85, 247, 0.05);
}

.ticket-upload-placeholder {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
  color: var(--text-muted);
  font-size: 0.82rem;
}

.ticket-upload-placeholder i {
  font-size: 1.5rem;
  color: var(--primary-blue, #60A5FA);
}

.sound-toggle-btn.muted i {
  color: var(--text-subtle);
  opacity: 0.6;
}

/* ==========================================================================
   ADAPTATION MULTI-LYCÉES NANCY & COMPTE OBLIGATOIRE
   ========================================================================== */
.btn-school-picker {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  background: rgba(44, 107, 237, 0.12);
  border: 1px solid rgba(44, 107, 237, 0.35);
  color: #fff;
  border-radius: var(--radius-pill);
  padding: 5px 12px;
  font-size: 0.78rem;
  font-weight: 700;
  cursor: pointer;
  transition: all var(--transition-fast);
}
.btn-school-picker:hover {
  background: rgba(44, 107, 237, 0.22);
  border-color: var(--signal-blue);
  transform: translateY(-1px);
}
.school-picker-arrow {
  font-size: 0.65rem;
  opacity: 0.8;
}
.user-tags-row {
  display: flex;
  align-items: center;
  gap: 4px;
}
.user-school-tag {
  display: inline-block;
  padding: 1px 6px;
  background: rgba(59, 130, 246, 0.2);
  border: 1px solid rgba(59, 130, 246, 0.4);
  color: #60a5fa;
  font-size: 0.68rem;
  font-weight: 700;
  border-radius: var(--radius-pill);
  text-transform: uppercase;
  letter-spacing: 0.3px;
}

/* Barre de Sélection Lycée dans le Hub */
.hub-lycee-selector-bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 12px 18px;
  background: linear-gradient(135deg, rgba(30, 41, 59, 0.7), rgba(15, 23, 42, 0.85));
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: var(--radius-md);
  margin-bottom: 1.25rem;
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.2);
  flex-wrap: wrap;
}
.hub-lycee-selector-left {
  display: flex;
  align-items: center;
  gap: 12px;
}
.hub-lycee-badge-icon {
  width: 38px;
  height: 38px;
  border-radius: 10px;
  background: rgba(44, 107, 237, 0.2);
  color: var(--signal-blue);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.15rem;
  border: 1px solid rgba(44, 107, 237, 0.3);
}
.hub-lycee-selector-text {
  display: flex;
  flex-direction: column;
}
.hub-lycee-selector-lbl {
  font-size: 0.72rem;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  color: var(--text-muted);
  font-weight: 600;
}
.hub-current-lycee-title {
  font-family: var(--font-title);
  font-size: 1rem;
  font-weight: 800;
  color: var(--text-main);
}
.hub-select-lycee {
  min-width: 260px;
  background: var(--bg-surface);
  border: 1px solid var(--border-color);
  color: var(--text-main);
  border-radius: var(--radius-sm);
  padding: 8px 12px;
  font-weight: 600;
  font-size: 0.85rem;
  cursor: pointer;
}
.hub-select-lycee:focus {
  border-color: var(--signal-blue);
}

/* Bannière Création Obligatoire & Badge Instantané */
.auth-mandatory-banner {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 8px 14px;
  margin-top: 10px;
  background: rgba(245, 158, 11, 0.12);
  border: 1px solid rgba(245, 158, 11, 0.35);
  border-radius: var(--radius-sm);
  color: #fbbf24;
  font-size: 0.78rem;
  font-weight: 600;
  text-align: center;
}
.auth-instant-badge {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  padding: 12px 14px;
  background: rgba(16, 185, 129, 0.12);
  border: 1px solid rgba(16, 185, 129, 0.35);
  border-radius: var(--radius-sm);
  color: var(--text-main);
  font-size: 0.82rem;
  line-height: 1.4;
  margin-top: 14px;
}
.auth-instant-badge strong {
  color: var(--text-main);
}
.auth-instant-badge span {
  color: var(--text-muted);
}
.auth-instant-badge i {
  font-size: 1.15rem;
  margin-top: 2px;
}
.lycee-select-highlight {
  border-color: var(--signal-blue) !important;
  background-color: var(--bg-input) !important;
  box-shadow: 0 0 0 2px rgba(44, 107, 237, 0.18);
  font-weight: 600;
}
.btn-signup-pulse {
  box-shadow: 0 4px 14px rgba(44, 107, 237, 0.4);
  font-size: 0.95rem;
  padding: 12px;
}

/* Badges Lycée dans le Chat et Repères */
.chat-author-lycee-badge {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 2px 7px;
  border-radius: 6px;
  font-size: 0.68rem;
  font-weight: 700;
  background: rgba(37, 99, 235, 0.12);
  border: 1px solid rgba(37, 99, 235, 0.28);
  color: var(--primary-blue, #2563eb);
  letter-spacing: 0.2px;
  white-space: nowrap;
  flex-shrink: 0;
  line-height: 1.2;
}
body.theme-dark .chat-author-lycee-badge,
body.theme-amoled .chat-author-lycee-badge {
  background: rgba(59, 130, 246, 0.2);
  border-color: rgba(59, 130, 246, 0.4);
  color: #93c5fd;
}
.marker-author-lycee-badge {
  display: inline-flex;
  align-items: center;
  gap: 3px;
  padding: 2px 7px;
  border-radius: 4px;
  font-size: 0.7rem;
  font-weight: 700;
  background: rgba(168, 85, 247, 0.15);
  border: 1px solid rgba(168, 85, 247, 0.3);
  color: var(--primary-blue, #60A5FA);
}

/* Calculateur de Marche & Déplacements (Loc) */
.walk-calculator-card {
  background: var(--bg-surface);
  border: 1px solid var(--border-color);
  border-radius: var(--radius-md);
  padding: 18px;
}
.walk-spots-shelf {
  display: flex;
  gap: 8px;
  overflow-x: auto;
  padding-bottom: 10px;
  scrollbar-width: thin;
}
.walk-spot-chip {
  flex-shrink: 0;
  display: inline-flex;
  align-items: center;
  gap: 7px;
  padding: 8px 14px;
  background: var(--bg-input);
  border: 1px solid var(--border-color);
  border-radius: var(--radius-pill);
  color: var(--text-muted);
  font-size: 0.82rem;
  font-weight: 600;
  cursor: pointer;
  transition: all var(--transition-fast);
}
.walk-spot-chip:hover {
  background: var(--bg-surface-elevated);
  color: #fff;
  border-color: rgba(255, 255, 255, 0.2);
}
.walk-spot-chip.active {
  background: var(--signal-blue);
  color: #fff;
  border-color: var(--signal-blue);
  box-shadow: 0 2px 8px rgba(44, 107, 237, 0.35);
}
.walk-spot-chip-time {
  font-size: 0.72rem;
  opacity: 0.85;
  background: rgba(0, 0, 0, 0.25);
  padding: 1px 6px;
  border-radius: var(--radius-pill);
}
.walk-result-summary {
  margin-top: 16px;
  padding: 16px;
  background: var(--bg-input);
  border: 1px solid var(--border-color);
  border-radius: var(--radius-sm);
  display: flex;
  flex-direction: column;
  gap: 14px;
}
.walk-result-dest-info {
  display: flex;
  flex-direction: column;
  gap: 3px;
}
.walk-dest-name {
  font-family: var(--font-title);
  font-size: 1.15rem;
  font-weight: 800;
  color: var(--text-main);
  margin: 0;
}
.walk-dest-desc {
  font-size: 0.82rem;
  color: var(--text-muted);
  margin: 0;
}
.walk-metrics-row {
  display: flex;
  gap: 12px;
  flex-wrap: wrap;
}
.walk-metric-chip {
  flex: 1;
  min-width: 90px;
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 14px;
  background: var(--bg-surface);
  border: 1px solid var(--border-color);
  border-radius: var(--radius-sm);
}
.walk-metric-chip i {
  font-size: 1.25rem;
}
.metric-val {
  display: block;
  font-size: 1.05rem;
  font-weight: 800;
  color: var(--text-main);
}
.metric-lbl {
  display: block;
  font-size: 0.72rem;
  color: var(--text-muted);
  font-weight: 600;
}
.walk-result-actions {
  display: flex;
  gap: 10px;
  flex-wrap: wrap;
}
.walk-origin-toggle {
  display: flex;
  gap: 4px;
}

/* ==========================================================================
   PINS CARTOGRAPHIQUES DES LYCÉES DE NANCY (INTERACTIFS & EXTENSIBLES AU SURVOL)
   Bulle circulaire compacte qui se déploie harmonieusement au passage de la souris
   ========================================================================== */
.custom-lycee-pin {
  cursor: pointer;
  overflow: visible !important;
  background: transparent !important;
  border: none !important;
  z-index: 1000;
  transition: z-index 0.15s ease;
}

.custom-lycee-pin:hover,
.custom-lycee-pin:focus-within {
  z-index: 99999 !important;
}

.lycee-pin-container {
  display: inline-flex;
  align-items: center;
  background: rgba(15, 23, 42, 0.94);
  border: 2px solid #38bdf8;
  border-radius: 999px;
  padding: 3px;
  box-shadow: 0 4px 14px rgba(0, 0, 0, 0.45), 0 0 0 2px rgba(56, 189, 248, 0.2);
  white-space: nowrap;
  backdrop-filter: blur(8px);
  cursor: pointer;
  position: absolute;
  left: 0;
  top: 0;
  height: 36px;
  box-sizing: border-box;
  transition: all 0.32s cubic-bezier(0.16, 1, 0.3, 1);
  pointer-events: auto;
  user-select: none;
}

.lycee-pin-icon {
  width: 26px;
  height: 26px;
  background: #0284c7;
  color: #ffffff;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 13px;
  flex-shrink: 0;
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.3);
  transition: transform 0.25s cubic-bezier(0.16, 1, 0.3, 1), background 0.25s ease;
}

.lycee-pin-label {
  display: inline-block;
  max-width: 0;
  opacity: 0;
  overflow: hidden;
  margin-left: 0;
  font-size: 12px;
  font-weight: 700;
  color: #ffffff;
  letter-spacing: -0.01em;
  white-space: nowrap;
  transition: max-width 0.35s cubic-bezier(0.16, 1, 0.3, 1), opacity 0.25s ease, margin-left 0.3s cubic-bezier(0.16, 1, 0.3, 1);
  pointer-events: none;
}

/* Expansion fluide de la bulle au survol de la souris */
.custom-lycee-pin:hover .lycee-pin-container,
.lycee-pin-container:hover {
  padding: 3px 14px 3px 3px;
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.6), 0 0 0 3px rgba(56, 189, 248, 0.4);
  transform: translateY(-2px) scale(1.05);
}

.custom-lycee-pin:hover .lycee-pin-label,
.lycee-pin-container:hover .lycee-pin-label {
  max-width: 260px;
  opacity: 1;
  margin-left: 8px;
  pointer-events: auto;
}

.custom-lycee-pin:hover .lycee-pin-icon,
.lycee-pin-container:hover .lycee-pin-icon {
  transform: scale(1.08);
  background: #0ea5e9;
}

/* Établissement actif sélectionné par l'élève (Halo or / ambre scintillant) */
.custom-lycee-pin.lycee-pin-active .lycee-pin-container,
.lycee-pin-container.lycee-pin-active {
  border-color: #f59e0b !important;
  background: rgba(17, 24, 39, 0.96) !important;
  box-shadow: 0 4px 16px rgba(245, 158, 11, 0.5), 0 0 0 2px rgba(245, 158, 11, 0.3) !important;
  animation: pulsePinGlow 2.5s infinite;
}

.custom-lycee-pin.lycee-pin-active .lycee-pin-icon,
.lycee-pin-active .lycee-pin-icon {
  background: linear-gradient(135deg, #f59e0b 0%, #d97706 100%) !important;
  color: #ffffff !important;
}

.custom-lycee-pin.lycee-pin-active:hover .lycee-pin-container,
.lycee-pin-container.lycee-pin-active:hover {
  border-color: #fbbf24 !important;
  box-shadow: 0 8px 26px rgba(245, 158, 11, 0.7), 0 0 0 3px rgba(245, 158, 11, 0.45) !important;
}

@keyframes pulsePinGlow {
  0%, 100% {
    box-shadow: 0 4px 16px rgba(245, 158, 11, 0.5), 0 0 0 2px rgba(245, 158, 11, 0.25);
  }
  50% {
    box-shadow: 0 6px 24px rgba(245, 158, 11, 0.75), 0 0 0 4px rgba(245, 158, 11, 0.4);
  }
}

/* ==========================================================================
   AIDE AUX DEVOIRS & ENTRAIDE SCOLAIRE (NANCY)
   ========================================================================== */
.hub-homework-card {
  background: var(--bg-surface);
  border: 1px solid var(--border-color);
  border-radius: var(--radius-lg);
  padding: 1.5rem;
  box-shadow: var(--shadow-sm);
  position: relative;
  overflow: hidden;
}

.hub-homework-card::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 3px;
  background: linear-gradient(90deg, #f59e0b, #fbbf24, #10b981);
}

.homework-hub-actions {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  flex-wrap: wrap;
}

.homework-preview-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
  gap: 1rem;
}

.homework-preview-card {
  background: var(--bg-surface);
  border: 1px solid var(--border-color);
  border-radius: var(--radius-md);
  padding: 1rem;
  cursor: pointer;
  transition: all 0.2s ease;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  color: var(--text-main);
}

.homework-preview-card:hover {
  transform: translateY(-2px);
  border-color: var(--signal-blue);
  box-shadow: var(--shadow-md);
}

.homework-stats-bar {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
  gap: 0.75rem;
}

.hw-stat-chip {
  background: var(--bg-surface);
  border: 1px solid var(--border-color);
  border-radius: var(--radius-md);
  padding: 0.75rem 1rem;
  text-align: center;
  display: flex;
  flex-direction: column;
  align-items: center;
}

.hw-stat-val {
  font-size: 1.5rem;
  font-weight: 800;
  line-height: 1.2;
  color: var(--text-main);
}

.hw-stat-lbl {
  font-size: 0.75rem;
  color: var(--text-muted);
  margin-top: 0.25rem;
}

.homework-toolbar {
  background: var(--bg-surface);
  border: 1px solid var(--border-color);
  border-radius: var(--radius-lg);
  padding: 1.25rem;
  box-shadow: var(--shadow-sm);
}

.homework-search-box {
  position: relative;
  display: flex;
  align-items: center;
}

.homework-search-box i {
  position: absolute;
  left: 1.1rem;
  color: var(--text-muted);
  font-size: 0.95rem;
}

.homework-search-box input {
  padding-left: 2.85rem !important;
  width: 100%;
  background: var(--bg-input) !important;
  color: var(--text-main) !important;
  border-color: var(--border-color) !important;
}

.homework-search-box input:focus {
  border-color: var(--signal-blue) !important;
  box-shadow: 0 0 0 3px var(--signal-blue-soft) !important;
}

.homework-filter-row {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  flex-wrap: wrap;
}

.filter-row-label {
  font-size: 0.8rem;
  font-weight: 700;
  color: var(--text-muted);
  white-space: nowrap;
}

.filter-pills-scroll {
  display: flex;
  align-items: center;
  gap: 0.4rem;
  overflow-x: auto;
  padding-bottom: 4px;
  scrollbar-width: thin;
}

.filter-subgroup {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  flex-wrap: wrap;
}

.homework-cards-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(320px, 1fr));
  gap: 1.25rem;
}

.homework-card {
  background: var(--bg-surface);
  border: 1px solid var(--border-color);
  border-radius: 14px;
  padding: 1.35rem;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  transition: all 0.25s cubic-bezier(0.16, 1, 0.3, 1);
  position: relative;
  cursor: pointer;
  box-shadow: var(--shadow-sm);
}

.homework-card:hover {
  transform: translateY(-4px);
  border-color: var(--signal-blue);
  box-shadow: var(--shadow-md);
}

.homework-card.hw-card-resolved {
  border-color: rgba(16, 185, 129, 0.45);
  background: var(--bg-surface-elevated);
}

.hw-card-header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 0.5rem;
  margin-bottom: 0.85rem;
}

.hw-badges-group {
  display: flex;
  align-items: center;
  gap: 0.45rem;
  flex-wrap: wrap;
}

.hw-subject-pill {
  font-size: 0.74rem;
  font-weight: 700;
  padding: 4px 10px;
  border-radius: 8px;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  letter-spacing: 0.2px;
}

.hw-level-pill {
  font-size: 0.72rem;
  font-weight: 600;
  padding: 4px 8px;
  border-radius: 8px;
  background: var(--bg-surface-elevated);
  color: var(--text-muted);
}

.hw-urgency-badge {
  font-size: 0.72rem;
  font-weight: 700;
  padding: 3px 8px;
  border-radius: 8px;
}

.hw-urgency-badge.urgent {
  background: rgba(239, 68, 68, 0.18);
  color: #ef4444;
  border: 1px solid rgba(239, 68, 68, 0.45);
}

.hw-urgency-badge.dm {
  background: rgba(168, 85, 247, 0.18);
  color: var(--primary-blue, #2563EB);
  border: 1px solid rgba(168, 85, 247, 0.45);
}

.hw-card-title {
  font-family: var(--font-title);
  font-size: 1.08rem;
  font-weight: 800;
  color: var(--text-main);
  line-height: 1.4;
  margin: 0.4rem 0 0.5rem;
  letter-spacing: -0.2px;
}

.hw-card-desc {
  font-size: 0.86rem;
  color: var(--text-muted);
  line-height: 1.55;
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
  margin-bottom: 1.1rem;
}

.hw-card-footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.5rem;
  padding-top: 0.85rem;
  border-top: 1px solid rgba(255, 255, 255, 0.08);
  font-size: 0.78rem;
  color: var(--text-muted);
}

.hw-author-info {
  display: flex;
  align-items: center;
  gap: 4px;
}

.hw-replies-pill {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-weight: 700;
  padding: 4px 10px;
  border-radius: 8px;
  background: rgba(56, 189, 248, 0.12);
  color: #38bdf8;
  border: 1px solid rgba(56, 189, 248, 0.25);
}

.hw-replies-pill.has-solution {
  background: rgba(16, 185, 129, 0.18);
  color: #34d399;
  border: 1px solid rgba(16, 185, 129, 0.35);
}

.solved-banner {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 4px 10px;
  background: rgba(16, 185, 129, 0.15);
  border: 1px solid #10b981;
  border-radius: 6px;
  font-size: 0.78rem;
  font-weight: 700;
  color: #34d399;
}

.reply-solution-highlight {
  border-left: 3px solid #10b981 !important;
  background: rgba(16, 185, 129, 0.08) !important;
}

.btn-mark-solution {
  background: rgba(16, 185, 129, 0.2);
  color: #34d399;
  border: 1px solid #10b981;
  padding: 3px 8px;
  border-radius: 4px;
  font-size: 0.75rem;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.2s;
}

.btn-mark-solution:hover {
  background: #10b981;
  color: #fff;
}

.btn-delete-hw-card {
  background: rgba(239, 68, 68, 0.12);
  border: 1px solid rgba(239, 68, 68, 0.3);
  color: #f87171;
  width: 28px;
  height: 28px;
  border-radius: 7px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  font-size: 0.74rem;
  transition: all 0.2s ease;
  flex-shrink: 0;
}

.btn-delete-hw-card:hover {
  background: #ef4444;
  color: #ffffff;
  border-color: #ef4444;
  transform: scale(1.1);
  box-shadow: 0 0 10px rgba(239, 68, 68, 0.4);
}

.btn-delete-hw-reply {
  background: transparent;
  border: none;
  color: #94a3b8;
  cursor: pointer;
  padding: 3px 6px;
  font-size: 0.74rem;
  border-radius: 4px;
  transition: all 0.2s ease;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

.btn-delete-hw-reply:hover {
  color: #ef4444;
  background: rgba(239, 68, 68, 0.15);
}

/* ==========================================================================
   MEDIA QUERIES NAVIGATION HEADER - TOUS ÉCRANS (PORTABLES, PC, TABLETTES)
   ========================================================================== */
@media (max-width: 1440px) {
  .header-container {
    padding: 0.4rem 0.85rem;
    gap: 0.5rem;
  }
  .brand-subtitle {
    display: none !important;
  }
  .btn-share-header {
    display: none !important;
  }
  .header-official-seal {
    display: none !important;
  }
  .btn-school-picker {
    display: none !important;
  }
  .nav-tab {
    padding: 0.35rem 0.6rem;
    font-size: 0.75rem;
    gap: 0.3rem;
  }
}

@media (max-width: 1300px) {
  .header-container {
    padding: 0.35rem 0.65rem;
    gap: 0.4rem;
  }
  .nav-tab {
    padding: 0.3rem 0.48rem;
    font-size: 0.72rem;
    gap: 0.25rem;
  }
  .nav-tab span:not(.tab-badge) {
    font-size: 0.72rem;
  }
  .header-actions {
    gap: 0.35rem;
  }
  .user-pill {
    padding: 3px 8px;
    gap: 6px;
  }
  .user-role-badge {
    display: none;
  }
}

@media (max-width: 1100px) {
  .user-meta {
    display: none;
  }
  .user-pill {
    padding: 3px 4px;
  }
  .nav-tab {
    padding: 0.28rem 0.38rem;
    font-size: 0.7rem;
  }
}








/* ==========================================================================
   REFONTE ASYMÉTRIQUE DU HUB QUOTIDIEN (CASSAGE DU CARD LAYOUT & LISTES ÉPURÉES)
   ========================================================================== */

/* HÉROS ÉDITORIAL DU PORTAIL */
.hub-hero-editorial {
  display: grid;
  grid-template-columns: 1.25fr 0.95fr;
  gap: 2.5rem;
  align-items: center;
  margin-bottom: 2.75rem;
  padding: 1rem 0 2.25rem;
  border-bottom: 1px solid var(--border-color);
}

.hub-editorial-eyebrow {
  display: flex;
  align-items: center;
  gap: 0.65rem;
  font-size: 0.84rem;
  font-weight: 600;
  color: var(--text-muted);
  margin-bottom: 0.95rem;
  flex-wrap: wrap;
}

.hub-eyebrow-school {
  color: var(--text-main);
  font-weight: 700;
}

.hub-eyebrow-sep {
  color: var(--text-subtle);
}

.hub-select-minimal {
  background: transparent;
  border: 1px solid var(--border-color);
  border-radius: 8px;
  padding: 0.28rem 0.65rem;
  font-size: 0.78rem;
  font-weight: 500;
  color: var(--text-muted);
  cursor: pointer;
  transition: all 0.2s ease;
  outline: none;
}

.hub-select-minimal:hover, .hub-select-minimal:focus {
  border-color: var(--signal-blue);
  color: var(--text-main);
  background: #FFFFFF;
}

.hub-hero-title {
  font-family: var(--font-title);
  font-size: 2.65rem;
  font-weight: 800;
  line-height: 1.15;
  color: var(--text-main);
  letter-spacing: -0.035em;
  margin-bottom: 0.85rem;
}

.hub-hero-subtitle {
  font-size: 1.05rem;
  line-height: 1.6;
  color: var(--text-muted);
  max-width: 580px;
  margin-bottom: 1.5rem;
  font-weight: 400;
}

.hub-hero-actions-row {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  flex-wrap: wrap;
}

.hub-hero-photo-frame {
  position: relative;
  border-radius: 16px;
  overflow: hidden;
  box-shadow: var(--shadow-md);
  border: 1px solid var(--border-color);
  background: var(--bg-surface);
}

.hub-hero-photo {
  width: 100%;
  height: 250px;
  object-fit: cover;
  display: block;
  transition: transform 0.4s ease;
}

.hub-hero-photo-frame:hover .hub-hero-photo {
  transform: scale(1.02);
}

.hub-hero-photo-caption {
  padding: 0.65rem 1rem;
  font-size: 0.75rem;
  font-weight: 500;
  color: var(--text-muted);
  background: var(--bg-surface);
  border-top: 1px solid var(--border-color);
}

/* SECTION 1 : MES COURS & PRONOTE (MISE EN PAGE ASYMÉTRIQUE) */
.hub-courses-asymmetric-layout {
  display: grid;
  grid-template-columns: 1.15fr 0.85fr;
  gap: 1.5rem;
  margin-top: 1.25rem;
}

.hub-pronote-featured-card {
  background: var(--bg-surface);
  border: 1px solid var(--border-color);
  border-radius: 14px;
  padding: 1.75rem;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  text-decoration: none;
  box-shadow: var(--shadow-sm);
  transition: transform 0.2s cubic-bezier(0.16, 1, 0.3, 1), box-shadow 0.2s cubic-bezier(0.16, 1, 0.3, 1), border-color 0.2s ease;
  position: relative;
}

.hub-pronote-featured-card:hover {
  transform: translateY(-2px);
  box-shadow: var(--shadow-md);
  border-color: var(--signal-blue);
}

.pronote-featured-top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 1.25rem;
}

.pronote-featured-badge {
  font-size: 0.72rem;
  font-weight: 800;
  letter-spacing: 0.5px;
  padding: 3px 9px;
  border-radius: 6px;
  background: rgba(29, 78, 216, 0.08);
  color: var(--signal-blue);
  border: 1px solid rgba(29, 78, 216, 0.18);
}

.pronote-featured-ext {
  color: var(--text-muted);
  font-size: 0.85rem;
}

.pronote-featured-title {
  font-family: var(--font-title);
  font-size: 1.35rem;
  font-weight: 700;
  color: var(--text-main);
  margin-bottom: 0.5rem;
  letter-spacing: -0.02em;
}

.pronote-featured-desc {
  font-size: 0.88rem;
  color: var(--text-muted);
  line-height: 1.5;
  margin-bottom: 1.5rem;
}

.pronote-featured-footer {
  margin-top: auto;
}

.pronote-featured-btn-text {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  font-size: 0.84rem;
  font-weight: 600;
  color: var(--signal-blue);
}

.hub-services-clean-list {
  display: flex;
  flex-direction: column;
  background: var(--bg-surface);
  border: 1px solid var(--border-color);
  border-radius: 14px;
  box-shadow: var(--shadow-sm);
  overflow: hidden;
}

.hub-service-clean-item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 1.35rem 1.4rem;
  border-bottom: 1px solid var(--border-color);
  text-decoration: none;
  transition: background 0.18s ease, transform 0.2s ease;
}

.hub-service-clean-item:last-child {
  border-bottom: none;
}

.hub-service-clean-item:hover {
  background: var(--bg-surface-elevated);
  transform: translateX(3px);
}

.service-clean-title {
  font-family: var(--font-title);
  font-size: 0.98rem;
  font-weight: 700;
  color: var(--text-main);
  margin-bottom: 0.25rem;
}

.service-clean-desc {
  font-size: 0.8rem;
  color: var(--text-muted);
  line-height: 1.4;
  margin: 0;
}

.service-clean-action {
  display: inline-flex;
  align-items: center;
  gap: 0.45rem;
  font-size: 0.8rem;
  font-weight: 600;
  color: var(--signal-blue);
  white-space: nowrap;
  margin-left: 1rem;
}

/* SECTION 2 : LIGNES STAN & BUS (ASYMÉTRIQUE AVEC PHOTO) */
.hub-stan-asymmetric-layout {
  display: grid;
  grid-template-columns: 0.9fr 1.1fr;
  gap: 1.5rem;
  align-items: stretch;
  margin-top: 1.25rem;
}

.hub-stan-photo-card {
  background: var(--bg-surface);
  border: 1px solid var(--border-color);
  border-radius: 14px;
  overflow: hidden;
  box-shadow: var(--shadow-sm);
  display: flex;
  flex-direction: column;
}

.stan-card-photo {
  width: 100%;
  height: 175px;
  object-fit: cover;
  display: block;
}

.stan-card-photo-content {
  padding: 1.15rem;
  display: flex;
  flex-direction: column;
  gap: 0.85rem;
  flex: 1;
  justify-content: space-between;
}

.stan-stops-location {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  font-size: 0.82rem;
  color: var(--text-main);
  font-weight: 600;
}

.stan-card-actions {
  display: flex;
  align-items: center;
  gap: 0.6rem;
}

.hub-stan-lines-wrapper {
  display: flex;
  flex-direction: column;
}

.stan-lines-list-clean {
  display: flex;
  flex-direction: column;
  gap: 0.6rem;
}

/* SECTION 4 : AIDE AUX DEVOIRS & ENTRAIDE */
.hub-homework-asymmetric-layout {
  display: grid;
  grid-template-columns: 0.85fr 1.15fr;
  gap: 1.5rem;
  align-items: stretch;
  margin-top: 1.25rem;
}

.hub-hw-photo-card {
  background: var(--bg-surface);
  border: 1px solid var(--border-color);
  border-radius: 14px;
  overflow: hidden;
  box-shadow: var(--shadow-sm);
  display: flex;
  flex-direction: column;
}

.hw-card-photo {
  width: 100%;
  height: 180px;
  object-fit: cover;
  display: block;
}

.hw-photo-caption {
  padding: 1.1rem;
  display: flex;
  flex-direction: column;
  gap: 0.25rem;
}

.hw-photo-caption strong {
  font-size: 0.92rem;
  color: var(--text-main);
}

.hw-photo-caption span {
  font-size: 0.78rem;
  color: var(--text-muted);
}

/* SECTION 6 : HORAIRES DES COURS & SONNERIES (LISTE ÉPURÉE) */
.schedule-clean-columns {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1.5rem;
  background: var(--bg-surface);
  border: 1px solid var(--border-color);
  border-radius: 14px;
  padding: 1.6rem;
  box-shadow: var(--shadow-sm);
  margin-top: 1.25rem;
}

.schedule-clean-col {
  display: flex;
  flex-direction: column;
  gap: 0.45rem;
}

.schedule-clean-col:not(:first-child) {
  border-left: 1px solid var(--border-color);
  padding-left: 1.5rem;
}

.schedule-clean-col-title {
  font-family: var(--font-title);
  font-size: 0.95rem;
  font-weight: 700;
  color: var(--text-main);
  margin-bottom: 0.6rem;
  padding-bottom: 0.45rem;
  border-bottom: 1px solid var(--border-color);
}

.schedule-clean-item {
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-size: 0.82rem;
  padding: 0.35rem 0;
  color: var(--text-main);
}

.schedule-clean-item.is-break {
  color: var(--text-muted);
  font-style: italic;
  background: var(--bg-surface-elevated);
  padding: 0.35rem 0.55rem;
  border-radius: 6px;
}

.schedule-lunch-notice {
  background: var(--bg-surface-elevated);
  padding: 0.55rem 0.75rem;
  border-radius: 8px;
  margin-bottom: 0.5rem;
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.schedule-lunch-notice strong {
  color: var(--text-main);
  font-size: 0.85rem;
}

.schedule-lunch-notice span {
  font-size: 0.74rem;
  color: var(--text-muted);
}

.schedule-time {
  font-weight: 600;
  color: var(--text-main);
}

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

/* SECTION 7 : VIE SCOLAIRE & URGENCES */
.hub-contacts-clean-list {
  display: flex;
  flex-direction: column;
  background: var(--bg-surface);
  border: 1px solid var(--border-color);
  border-radius: 14px;
  box-shadow: var(--shadow-sm);
  overflow: hidden;
  margin-top: 1.25rem;
}

.contact-clean-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 1.15rem 1.4rem;
  border-bottom: 1px solid var(--border-color);
  transition: background 0.18s ease;
}

.contact-clean-row:last-child {
  border-bottom: none;
}

.contact-clean-row:hover {
  background: var(--bg-surface-elevated);
}

.contact-clean-title {
  font-family: var(--font-title);
  font-size: 0.95rem;
  font-weight: 700;
  color: var(--text-main);
  margin-bottom: 0.2rem;
}

.contact-clean-desc {
  font-size: 0.78rem;
  color: var(--text-muted);
  margin: 0;
}

/* MODAL RÉGLAGES & PRÉFÉRENCES */
.modal-settings-card {
  max-width: 520px;
  width: 100%;
}

.settings-modal-body {
  display: flex;
  flex-direction: column;
  gap: 1.4rem;
  padding: 1.5rem;
}

.settings-group {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
  padding-bottom: 1.2rem;
  border-bottom: 1px solid var(--border-color);
}

.settings-group:last-child {
  border-bottom: none;
  padding-bottom: 0;
}

.settings-label {
  font-family: var(--font-title);
  font-size: 0.88rem;
  font-weight: 700;
  color: var(--text-main);
}

.settings-desc {
  font-size: 0.76rem;
  color: var(--text-muted);
  line-height: 1.4;
  margin: 0;
}

.settings-theme-switcher {
  display: flex;
  flex-direction: column;
  gap: 0.65rem;
  margin-top: 0.4rem;
}

.settings-theme-option {
  display: flex;
  align-items: center;
  gap: 0.95rem;
  padding: 0.85rem 1.1rem;
  border: 1px solid var(--border-color);
  border-radius: 12px;
  background: #FFFFFF;
  cursor: pointer;
  text-align: left;
  transition: all 0.2s cubic-bezier(0.16, 1, 0.3, 1);
  width: 100%;
}

.settings-theme-option:hover {
  border-color: var(--signal-blue);
  background: var(--bg-surface-elevated);
}

.settings-theme-option.active {
  border-color: var(--signal-blue);
  background: var(--signal-blue-soft);
}

.theme-option-preview {
  width: 32px;
  height: 32px;
  border-radius: 8px;
  flex-shrink: 0;
}

.preview-light {
  background: #F8F9FA;
  border: 2px solid #2563EB;
  box-shadow: inset 0 2px 4px rgba(0,0,0,0.06);
}

.preview-dark {
  background: #0F172A;
  border: 2px solid #475569;
}

.theme-option-text {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.theme-option-title-row {
  display: flex;
  align-items: center;
  gap: 0.5rem;
}

.theme-option-text strong {
  font-size: 0.85rem;
  color: var(--text-main);
}

.theme-option-text span {
  font-size: 0.74rem;
  color: var(--text-muted);
}

.badge-recommended {
  background: rgba(37, 99, 235, 0.1);
  color: #2563EB;
  font-size: 0.62rem;
  font-weight: 700;
  padding: 2px 6px;
  border-radius: 999px;
  text-transform: uppercase;
  letter-spacing: 0.4px;
}

.theme-check-icon {
  font-size: 1rem;
  color: var(--signal-blue);
  opacity: 0;
  transition: opacity 0.2s ease;
}

.settings-theme-option.active .theme-check-icon {
  opacity: 1;
}

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

.switch-toggle {
  width: 44px;
  height: 24px;
  background: #CBD5E1;
  border-radius: 999px;
  border: none;
  cursor: pointer;
  position: relative;
  transition: background 0.25s ease;
  flex-shrink: 0;
}

.switch-toggle.active {
  background: var(--signal-blue);
}

.switch-handle {
  position: absolute;
  top: 2px;
  left: 2px;
  width: 20px;
  height: 20px;
  background: #FFFFFF;
  border-radius: 50%;
  transition: transform 0.25s ease;
  box-shadow: 0 1px 3px rgba(0,0,0,0.25);
}

.switch-toggle.active .switch-handle {
  transform: translateX(20px);
}

.settings-sound-test-row {
  display: flex;
  align-items: center;
  gap: 0.75rem;
}

/* CARTE DE TÉLÉCHARGEMENT / INSTALLATION PWA DANS LES PARAMÈTRES */
.settings-pwa-card {
  background: rgba(44, 107, 237, 0.08);
  border: 1.5px solid rgba(44, 107, 237, 0.35);
  border-radius: var(--radius-md);
  padding: 14px;
}

.settings-pwa-header {
  display: flex;
  align-items: center;
  gap: 12px;
}

.settings-pwa-icon {
  width: 42px;
  height: 42px;
  background: var(--signal-blue);
  color: #fff;
  border-radius: var(--radius-sm);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.25rem;
  flex-shrink: 0;
  box-shadow: 0 4px 12px rgba(44, 107, 237, 0.35);
}

.btn-pwa-download {
  font-weight: 700;
  font-size: 0.92rem;
  padding: 12px 14px;
  border-radius: var(--radius-sm);
  box-shadow: 0 4px 14px rgba(44, 107, 237, 0.35);
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  transition: all var(--transition-fast);
}

.btn-pwa-download:hover {
  transform: translateY(-1px);
  box-shadow: 0 6px 18px rgba(44, 107, 237, 0.45);
}

.settings-pwa-guide {
  background: var(--bg-surface);
  border: 1px solid var(--border-color);
  border-radius: var(--radius-sm);
  padding: 10px 12px;
  animation: fadeIn 0.25s ease-out;
}

.pwa-guide-header {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 0.82rem;
  font-weight: 700;
  color: var(--text-main);
  margin-bottom: 6px;
}

.pwa-guide-steps {
  margin: 0;
  padding-left: 18px;
  font-size: 0.78rem;
  color: var(--text-muted);
  line-height: 1.5;
}

.pwa-guide-steps li {
  margin-bottom: 4px;
}

.pwa-guide-steps strong {
  color: var(--text-main);
}


/* RESPONSIVE ASYMMETRIC ADJUSTMENTS */
@media (max-width: 900px) {
  .hub-hero-editorial {
    grid-template-columns: 1fr;
    gap: 1.75rem;
  }
  .hub-hero-title {
    font-size: 2.1rem;
  }
  .hub-courses-asymmetric-layout {
    grid-template-columns: 1fr;
  }
  .hub-stan-asymmetric-layout {
    grid-template-columns: 1fr;
  }
  .hub-homework-asymmetric-layout {
    grid-template-columns: 1fr;
  }
  .schedule-clean-columns {
    grid-template-columns: 1fr;
  }
  .schedule-clean-col:not(:first-child) {
    border-left: none;
    border-top: 1px solid var(--border-color);
    padding-left: 0;
    padding-top: 1.25rem;
  }
}



/* ==========================================================================
   LES 8 THÈMES HARMONIEUX DU PORTAIL DES LYCÉENS DE NANCY
   ========================================================================== */

/* 1. THÈME SOMBRE : SLATE 900 & SLATE 800 (ACCESSIBLE WCAG AA) */
body.theme-dark, body.theme-pronote-dark, body.dark, html.dark, :root.dark {
  --bg-main: #0F172A;                      /* Fond principal Slate 900 #0F172A */
  --bg-surface: #1E293B;                   /* Cartes Slate 800 #1E293B */
  --bg-surface-elevated: #334155;          /* Cartes surélevées Slate 700 */
  --bg-input: #0F172A;                     /* Champs de saisie */
  --bg-glass: rgba(30, 41, 59, 0.95);
  --navy-deep: #F8FAFC;
  --signal-blue: #60A5FA;                  /* Bleu primaire accessible sombre #60A5FA */
  --signal-blue-hover: #93C5FD;
  --signal-blue-soft: rgba(96, 165, 250, 0.16);
  --accent-color: #60A5FA;
  --primary-blue: #60A5FA;
  --text-main: #F8FAFC;                    /* Texte principal #F8FAFC */
  --text-muted: #CBD5E1;                   /* Texte secondaire */
  --text-subtle: #94A3B8;
  --border-color: #334155;                 /* Bordures Slate 700 #334155 */
  --border-focus: #60A5FA;
  --shadow-sm: 0 1px 3px rgba(0, 0, 0, 0.4);
  --shadow-md: 0 6px 18px rgba(0, 0, 0, 0.5);
  background-color: var(--bg-main);
  color: var(--text-main);
}

/* 9. THÈME NOIR AMOLED */
body.theme-amoled {
  --bg-main: #000000;
  --bg-surface: #0F172A;
  --bg-surface-elevated: #1E293B;
  --bg-input: #000000;
  --bg-glass: rgba(0, 0, 0, 0.96);
  --navy-deep: #FFFFFF;
  --signal-blue: #60A5FA;
  --signal-blue-hover: #93C5FD;
  --signal-blue-soft: rgba(96, 165, 250, 0.16);
  --accent-color: #60A5FA;
  --primary-blue: #60A5FA;
  --text-main: #FFFFFF;
  --text-muted: #CBD5E1;
  --text-subtle: #94A3B8;
  --border-color: #334155;
  --border-focus: #60A5FA;
  --shadow-sm: 0 1px 3px rgba(0, 0, 0, 0.9);
  --shadow-md: 0 6px 18px rgba(0, 0, 0, 0.95);
  background-color: var(--bg-main);
  color: var(--text-main);
}

/* 2. THÈME CLAIR : BLANC INSTITUTIONNEL & BLEU ROY (ACCESSIBLE WCAG AA) */
body.theme-light, body.theme-pronote-light, body.light {
  --bg-main: #F8F9FA;                      /* Fond principal clair #F8F9FA */
  --bg-surface: #FFFFFF;                   /* Cartes blanc pur #FFFFFF */
  --bg-surface-elevated: #F1F5F9;
  --bg-input: #FFFFFF;
  --bg-glass: rgba(255, 255, 255, 0.96);
  --navy-deep: #0F172A;
  --signal-blue: #2563EB;                  /* Bleu primaire accessible clair #2563EB */
  --signal-blue-hover: #1D4ED8;
  --signal-blue-soft: rgba(37, 99, 235, 0.08);
  --accent-color: #2563EB;
  --primary-blue: #2563EB;
  --text-main: #0F172A;                    /* Texte principal #0F172A */
  --text-muted: #475569;
  --text-subtle: #64748B;
  --border-color: #E2E8F0;                 /* Bordures #E2E8F0 */
  --border-focus: #2563EB;
  --shadow-sm: 0 1px 3px rgba(15, 23, 42, 0.06);
  --shadow-md: 0 4px 14px -2px rgba(15, 23, 42, 0.08);
  background-color: var(--bg-main);
  color: var(--text-main);
}


/* 3. THÈME 3 : FORÊT & SAUGE (NATURE'S GREENS) */
body.theme-nature {
  --bg-main: #0E1511;
  --bg-surface: #152018;
  --bg-surface-elevated: #1D2A21;
  --bg-input: #111A13;
  --bg-glass: rgba(21, 32, 24, 0.95);
  --navy-deep: #F3F6F1;
  --signal-blue: #8FA882;
  --signal-blue-hover: #A8BC98;
  --signal-blue-soft: rgba(143, 168, 130, 0.16);
  --accent-color: #8FA882;
  --text-main: #F3F6F1;
  --text-muted: #D1DFCD;
  --text-subtle: #A3B59F;
  --border-color: rgba(168, 188, 152, 0.22);
  --border-focus: #8FA882;
  --shadow-sm: 0 2px 6px rgba(10, 18, 12, 0.35);
  --shadow-md: 0 6px 18px rgba(10, 18, 12, 0.45);
  background-color: var(--bg-main);
  color: var(--text-main);
}

/* 4. THÈME 4 : MINUIT NANCÉIEN & OR (MIDNIGHT) */
body.theme-midnight {
  --bg-main: #070E1E;
  --bg-surface: #0F1D38;
  --bg-surface-elevated: #182C54;
  --bg-input: #0B162C;
  --bg-glass: rgba(15, 29, 56, 0.95);
  --navy-deep: #F8FAFC;
  --signal-blue: #3B82F6;
  --signal-blue-hover: #60A5FA;
  --signal-blue-soft: rgba(59, 130, 246, 0.16);
  --accent-color: #EAB308;
  --text-main: #F8FAFC;
  --text-muted: #BFDBFE;
  --text-subtle: #93C5FD;
  --border-color: rgba(59, 130, 246, 0.28);
  --border-focus: #EAB308;
  --shadow-sm: 0 2px 6px rgba(0, 0, 0, 0.4);
  --shadow-md: 0 6px 18px rgba(0, 0, 0, 0.5);
  background-color: var(--bg-main);
  color: var(--text-main);
}

/* 5. THÈME 5 : BORDEAUX STANISLAS & GRAND SIÈCLE */
body.theme-bordeaux {
  --bg-main: #140A10;
  --bg-surface: #22121C;
  --bg-surface-elevated: #331A2A;
  --bg-input: #1A0D15;
  --bg-glass: rgba(34, 18, 28, 0.95);
  --navy-deep: #FFF1F2;
  --signal-blue: #E11D48;
  --signal-blue-hover: #F43F5E;
  --signal-blue-soft: rgba(225, 29, 72, 0.16);
  --accent-color: #F59E0B;
  --text-main: #FFF1F2;
  --text-muted: #FECDD3;
  --text-subtle: #F472B6;
  --border-color: rgba(225, 29, 72, 0.28);
  --border-focus: #F59E0B;
  --shadow-sm: 0 2px 6px rgba(0, 0, 0, 0.4);
  --shadow-md: 0 6px 18px rgba(0, 0, 0, 0.5);
  background-color: var(--bg-main);
  color: var(--text-main);
}

/* 6. THÈME 6 : CRÉPUSCULE CYBER & VIOLET (CYBER) */
body.theme-cyber {
  --bg-main: #0D0B18;
  --bg-surface: #171329;
  --bg-surface-elevated: #241D3F;
  --bg-input: #110E20;
  --bg-glass: rgba(23, 19, 41, 0.95);
  --navy-deep: #FAF5FF;
  --signal-blue: var(--primary-blue, #2563EB);
  --signal-blue-hover: var(--primary-blue, #60A5FA);
  --signal-blue-soft: rgba(168, 85, 247, 0.16);
  --accent-color: #EC4899;
  --text-main: #FAF5FF;
  --text-muted: #E9D5FF;
  --text-subtle: var(--primary-blue, #60A5FA);
  --border-color: rgba(168, 85, 247, 0.28);
  --border-focus: #EC4899;
  --shadow-sm: 0 2px 6px rgba(0, 0, 0, 0.4);
  --shadow-md: 0 6px 18px rgba(0, 0, 0, 0.5);
  background-color: var(--bg-main);
  color: var(--text-main);
}

/* 7. THÈME 7 : CAFÉ & PAPIER D'ART (SÉPIA) */
body.theme-sepia {
  --bg-main: #F5EFEB;
  --bg-surface: #FFFFFF;
  --bg-surface-elevated: #ECE4DC;
  --bg-input: #FFFFFF;
  --bg-glass: rgba(245, 239, 235, 0.96);
  --navy-deep: #1C1917;
  --signal-blue: #9A3412;
  --signal-blue-hover: #C2410C;
  --signal-blue-soft: rgba(154, 52, 18, 0.09);
  --accent-color: #78350F;
  --text-main: #1C1917;
  --text-muted: #44403C;
  --text-subtle: #78716C;
  --border-color: #D6CEBE;
  --border-focus: #9A3412;
  --shadow-sm: 0 1px 3px rgba(41, 37, 36, 0.06);
  --shadow-md: 0 4px 14px -2px rgba(41, 37, 36, 0.08);
  background-color: var(--bg-main);
  color: var(--text-main);
}

/* 8. THÈME 8 : NORDIQUE & GLACE (ICE) */
body.theme-ice {
  --bg-main: #EDF3F8;
  --bg-surface: #FFFFFF;
  --bg-surface-elevated: #DFE8F1;
  --bg-input: #FFFFFF;
  --bg-glass: rgba(237, 243, 248, 0.96);
  --navy-deep: #0F172A;
  --signal-blue: #0284C7;
  --signal-blue-hover: #0369A1;
  --signal-blue-soft: rgba(2, 132, 199, 0.08);
  --accent-color: #0EA5E9;
  --text-main: #0F172A;
  --text-muted: #1E293B;
  --text-subtle: #475569;
  --border-color: #CBD5E1;
  --border-focus: #0284C7;
  --shadow-sm: 0 1px 3px rgba(15, 23, 42, 0.06);
  --shadow-md: 0 4px 14px -2px rgba(15, 23, 42, 0.08);
  background-color: var(--bg-main);
  color: var(--text-main);
}

/* ==========================================================================
   BARRE DU HAUT : ICÔNES ÉPURÉES & TOOLTIPS FLOTTANTS AU SURVOL
   ========================================================================== */
.desktop-nav {
  display: flex;
  align-items: center;
  gap: 5px;
  background: var(--bg-surface-elevated);
  border: 1px solid var(--border-color);
  padding: 4px 6px;
  border-radius: var(--radius-pill);
}

.desktop-nav .nav-tab {
  position: relative;
  z-index: 2;
  pointer-events: auto;
  width: 44px;
  height: 40px;
  padding: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: var(--radius-pill);
  border: none;
  background: transparent;
  color: var(--text-muted);
  cursor: pointer;
  transition: transform 0.18s cubic-bezier(0.16, 1, 0.3, 1), color 0.15s ease, background 0.15s ease;
}

.desktop-nav .nav-tab i {
  font-size: 1.12rem;
  transition: transform 0.18s ease;
}

.desktop-nav .nav-tab:hover {
  color: var(--text-main);
  background: rgba(125, 125, 125, 0.12);
  transform: translateY(-2px);
}

.desktop-nav .nav-tab:hover i {
  transform: scale(1.1);
}

.desktop-nav .nav-tab.active {
  background: var(--signal-blue) !important;
  color: #FFFFFF !important;
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.2);
}

/* Texte par défaut masqué dans la barre desktop pour garder que les logos */
.desktop-nav .nav-tab > span:not(.tab-badge):not(.nav-tooltip) {
  display: none !important;
}

/* Tooltip ultra-lisible et flottant au survol */
.nav-tooltip {
  position: absolute;
  top: calc(100% + 10px);
  left: 50%;
  transform: translateX(-50%) translateY(-6px);
  background: var(--bg-surface);
  color: var(--text-main);
  border: 1px solid var(--border-color);
  padding: 5px 12px;
  border-radius: 8px;
  font-size: 0.78rem;
  font-weight: 700;
  white-space: nowrap;
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.28);
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transition: opacity 0.18s ease, transform 0.18s cubic-bezier(0.16, 1, 0.3, 1);
  z-index: 9999;
}

.nav-tooltip::before {
  content: '';
  position: absolute;
  bottom: 100%;
  left: 50%;
  transform: translateX(-50%);
  border-width: 0 5px 5px 5px;
  border-style: solid;
  border-color: transparent transparent var(--border-color) transparent;
}

.nav-tab:hover .nav-tooltip {
  opacity: 1;
  visibility: visible;
  transform: translateX(-50%) translateY(0);
}

/* ==========================================================================
   MODAL SÉLECTEUR DE LYCÉES DE NANCY (CLIQUABLE DEPUIS LE LOGO EN HAUT)
   ========================================================================== */
.brand-group {
  position: relative;
  cursor: pointer;
  user-select: none;
  border-radius: 12px;
  padding: 4px 8px 4px 4px;
  transition: all 0.2s cubic-bezier(0.16, 1, 0.3, 1);
}

.brand-group:hover {
  background: var(--bg-surface-elevated);
  transform: translateY(-1px);
}

.brand-group:hover .brand-logo-frame {
  box-shadow: 0 0 0 2px var(--signal-blue);
}

.brand-logo-frame {
  width: 46px;
  height: 46px;
  border-radius: 12px;
  background: var(--bg-surface-elevated);
  border: 1px solid var(--border-color);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 3px;
  overflow: hidden;
  transition: all 0.2s ease;
}

.brand-official-logo {
  width: 100%;
  height: 100%;
  object-fit: contain;
}

.school-picker-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
  gap: 1rem;
  margin-top: 1rem;
}

.school-picker-card {
  display: flex;
  align-items: center;
  gap: 1rem;
  padding: 1rem 1.15rem;
  background: var(--bg-surface);
  border: 1px solid var(--border-color);
  border-radius: 14px;
  cursor: pointer;
  text-align: left;
  transition: all 0.2s cubic-bezier(0.16, 1, 0.3, 1);
  position: relative;
}

.school-picker-card:hover {
  border-color: var(--signal-blue);
  background: var(--bg-surface-elevated);
  transform: translateY(-2px);
  box-shadow: var(--shadow-md);
}

.school-picker-card.active {
  border-color: var(--signal-blue);
  background: var(--signal-blue-soft);
  box-shadow: 0 0 0 1px var(--signal-blue);
}

.school-picker-logo-box {
  width: 52px;
  height: 52px;
  border-radius: 12px;
  background: var(--bg-surface-elevated);
  border: 1px solid var(--border-color);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 4px;
  flex-shrink: 0;
}

.school-picker-logo-img {
  width: 100%;
  height: 100%;
  object-fit: contain;
}

.school-picker-info {
  display: flex;
  flex-direction: column;
  gap: 2px;
  flex: 1;
}

.school-picker-name {
  font-family: var(--font-title);
  font-size: 0.95rem;
  font-weight: 700;
  color: var(--text-main);
  line-height: 1.25;
}

.school-picker-sub {
  font-size: 0.76rem;
  color: var(--text-muted);
}

.school-picker-tag {
  font-size: 0.68rem;
  font-weight: 700;
  padding: 2px 7px;
  border-radius: 999px;
  background: var(--bg-surface-elevated);
  color: var(--signal-blue);
  border: 1px solid var(--border-color);
  align-self: flex-start;
  margin-top: 3px;
}

/* Palette des 8 couleurs dans le modal Réglages (Minimaliste • Cercles de couleur) */
.themes-color-row {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 12px;
  flex-wrap: wrap;
  padding: 10px 4px;
}

.theme-8-card {
  width: 44px;
  height: 44px;
  border-radius: 50%;
  border: 3px solid transparent;
  cursor: pointer;
  position: relative;
  padding: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.25);
  transition: transform 0.22s cubic-bezier(0.16, 1, 0.3, 1), box-shadow 0.22s ease, border-color 0.22s ease;
}

.theme-8-card:hover {
  transform: scale(1.18);
  box-shadow: 0 6px 16px rgba(0, 0, 0, 0.35);
}

.theme-8-card.active {
  transform: scale(1.22);
  border-color: #FFFFFF;
  box-shadow: 0 0 0 3px var(--signal-blue), 0 6px 18px rgba(0, 0, 0, 0.45);
}

/* Couleurs bi-ton pour chaque thème */
.theme-8-card[data-theme="dark"] {
  background: conic-gradient(#090D14 0deg 210deg, #38BDF8 210deg 360deg);
}
.theme-8-card[data-theme="amoled"] {
  background: conic-gradient(#000000 0deg 240deg, #FFFFFF 240deg 360deg);
  border-color: rgba(255, 255, 255, 0.35);
}
.theme-8-card[data-theme="light"] {
  background: conic-gradient(#FFFFFF 0deg 210deg, #1D4ED8 210deg 360deg);
  border-color: #CBD5E1;
}
.theme-8-card[data-theme="nature"] {
  background: conic-gradient(#0E1511 0deg 210deg, #8FA882 210deg 360deg);
}
.theme-8-card[data-theme="midnight"] {
  background: conic-gradient(#070E1E 0deg 210deg, #EAB308 210deg 360deg);
}
.theme-8-card[data-theme="bordeaux"] {
  background: conic-gradient(#140A10 0deg 210deg, #E11D48 210deg 360deg);
}
.theme-8-card[data-theme="cyber"] {
  background: conic-gradient(#0D0B18 0deg 210deg, var(--primary-blue, #2563EB) 210deg 360deg);
}
.theme-8-card[data-theme="sepia"] {
  background: conic-gradient(#F5EFEB 0deg 210deg, #9A3412 210deg 360deg);
  border-color: #D6CEBE;
}
.theme-8-card[data-theme="ice"] {
  background: conic-gradient(#EDF3F8 0deg 210deg, #0284C7 210deg 360deg);
  border-color: #CBD5E1;
}


/* ==========================================================================
   INCRUSTATION DES IMAGES & FINITIONS HAUT DE GAMME (AMOLED & DARK)
   ========================================================================== */
body.theme-amoled .hub-hero-photo-frame {
  background: #000000;
  border: 1px solid rgba(255, 255, 255, 0.12);
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.95);
}

body.theme-amoled .hub-hero-photo {
  filter: brightness(0.92) contrast(1.04);
}

body.theme-amoled .hub-hero-photo-caption {
  background: #070707;
  border-top: 1px solid rgba(255, 255, 255, 0.08);
  color: #A3A3A3;
}

body.theme-amoled .hub-stan-photo-card {
  background: #070707;
  border: 1px solid rgba(255, 255, 255, 0.10);
  box-shadow: none;
}

body.theme-amoled .stan-card-photo {
  filter: brightness(0.92) contrast(1.04);
}

body.theme-amoled .ann-card-media {
  background: #000000;
  border: 1px solid rgba(255, 255, 255, 0.08);
}

body.theme-amoled .ann-card-media img {
  filter: brightness(0.92) contrast(1.04);
}

body.theme-amoled .lostfound-img-box {
  background: #000000;
  border: 1px solid rgba(255, 255, 255, 0.08);
}

body.theme-amoled .lostfound-img-box img {
  filter: brightness(0.92) contrast(1.04);
}

body.theme-amoled .app-header {
  background-color: #000000;
  border-bottom: 1px solid rgba(255, 255, 255, 0.10);
}

body.theme-amoled .desktop-nav {
  background: #0A0A0A;
  border: 1px solid rgba(255, 255, 255, 0.12);
}

body.theme-amoled .mobile-bottom-nav {
  background: #000000;
  border-top: 1px solid rgba(255, 255, 255, 0.12);
}

body.theme-amoled .panel,
body.theme-amoled .portal-card,
body.theme-amoled .contact-card,
body.theme-amoled .stan-traffic-card,
body.theme-amoled .lostfound-card,
body.theme-amoled .schedule-grid-box,
body.theme-amoled .modal-card,
body.theme-amoled .hub-pronote-featured-card,
body.theme-amoled .school-picker-card,
body.theme-amoled .ann-card {
  background-color: #070707;
  border-color: rgba(255, 255, 255, 0.09);
}

body.theme-amoled .brand-logo-frame {
  background: #0D0D0D;
  border-color: rgba(255, 255, 255, 0.14);
}

body.theme-amoled .school-picker-logo-box {
  background: #0D0D0D;
  border-color: rgba(255, 255, 255, 0.12);
}

/* RENDU UNIVERSEL HARMONIEUX DES VRAIS LOGOS MONOCHROMES */
.brand-official-logo,
.school-picker-logo-img {
  filter: brightness(0) invert(1);
  transition: filter 0.25s ease, transform 0.2s ease;
}

body.theme-light .brand-official-logo,
body.theme-pronote-light .brand-official-logo,
body.theme-light .school-picker-logo-img,
body.theme-pronote-light .school-picker-logo-img,
body.theme-sepia .brand-official-logo,
body.theme-sepia .school-picker-logo-img,
body.theme-ice .brand-official-logo,
body.theme-ice .school-picker-logo-img {
  filter: brightness(0) opacity(0.85);
}

/* Badge dynamique du nom de thème dans les réglages */
.settings-theme-name-badge {
  display: inline-flex;
  align-items: center;
  font-size: 0.72rem;
  font-weight: 700;
  padding: 0.2rem 0.65rem;
  border-radius: 9999px;
  background: var(--bg-hover, rgba(0, 0, 0, 0.05));
  color: var(--accent, #3B82F6);
  border: 1px solid var(--border-color, rgba(0, 0, 0, 0.1));
  letter-spacing: 0.02em;
  text-transform: none;
  transition: all 0.25s ease;
}

/* Zone de dépôt pour la clé de sécurité admin physique */
.admin-keyfile-dropzone {
  border: 2px dashed var(--border-color, rgba(255, 255, 255, 0.15));
  border-radius: var(--radius-md, 12px);
  padding: 1.15rem 1rem;
  text-align: center;
  background: var(--bg-card-subtle, rgba(255, 255, 255, 0.02));
  cursor: pointer;
  transition: all 0.25s ease;
  margin-top: 0.35rem;
  user-select: none;
}

.admin-keyfile-dropzone:hover,
.admin-keyfile-dropzone.dragover {
  border-color: var(--accent, #3B82F6);
  background: rgba(59, 130, 246, 0.08);
  transform: translateY(-1px);
}

.admin-keyfile-prompt {
  pointer-events: none;
}

.admin-keyfile-prompt strong {
  color: var(--text-main, #FFFFFF);
}

.admin-keyfile-prompt code {
  background: var(--bg-hover, rgba(0, 0, 0, 0.2));
  padding: 0.15rem 0.4rem;
  border-radius: 4px;
  color: var(--accent, #3B82F6);
}

.admin-keyfile-success {
  display: flex;
  align-items: center;
  gap: 0.85rem;
  text-align: left;
  padding: 0.2rem 0.5rem;
}

/* ==========================================================================
   CATÉGORIE RÉSEAU STAN & MOBILITÉS NANCY (ADAPTATIF MULTI-THÈMES & ULTRA LISIBLE)
   ========================================================================== */

/* 1. Héros immersif Stan Métropole (Base utilisant les variables de thème) */
.stan-hero-card {
  position: relative;
  background: var(--bg-surface, #1e293b);
  border: 1px solid var(--border-color, rgba(56, 189, 248, 0.22));
  border-radius: var(--radius-xl, 20px);
  padding: 2rem 2.2rem 1.25rem 2.2rem;
  margin-bottom: 2rem;
  box-shadow: var(--shadow-md, 0 10px 25px rgba(0, 0, 0, 0.3));
  backdrop-filter: blur(16px);
  overflow: hidden;
  transition: background 0.3s ease, border-color 0.3s ease, box-shadow 0.3s ease;
}

.stan-hero-card::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 3px;
  background: linear-gradient(90deg, #0284c7, #38bdf8, #6366f1, #10b981);
}

.stan-hero-top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 1rem;
  margin-bottom: 1.25rem;
}

.stan-network-badge {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.35rem 0.9rem;
  background: rgba(2, 132, 199, 0.12);
  border: 1px solid rgba(2, 132, 199, 0.28);
  border-radius: 9999px;
  font-size: 0.76rem;
  font-weight: 700;
  color: #0284c7;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}

.stan-live-status-pill {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.35rem 0.85rem;
  background: rgba(16, 185, 129, 0.12);
  border: 1px solid rgba(16, 185, 129, 0.3);
  border-radius: 9999px;
  font-size: 0.78rem;
  font-weight: 600;
  color: #059669;
}

.stan-hero-main {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 2rem;
  margin-bottom: 1.75rem;
}

.stan-hero-info {
  flex: 1;
  min-width: 280px;
}

.stan-hero-title {
  font-size: 2.1rem;
  font-weight: 800;
  color: var(--text-main, #ffffff);
  margin-bottom: 0.5rem;
  letter-spacing: -0.02em;
  line-height: 1.2;
}

.stan-hero-desc {
  font-size: 0.98rem;
  color: var(--text-muted, #94a3b8);
  line-height: 1.55;
  margin-bottom: 1rem;
  max-width: 620px;
}

.stan-school-context-bar {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.45rem 0.95rem;
  background: var(--bg-surface-elevated, rgba(255, 255, 255, 0.05));
  border: 1px solid var(--border-color, rgba(255, 255, 255, 0.1));
  border-radius: 10px;
  font-size: 0.85rem;
  color: var(--text-main, #ffffff);
}

.stan-hero-quick-stats {
  display: flex;
  gap: 1rem;
  flex-shrink: 0;
}

.stan-quick-stat-box {
  background: var(--bg-surface-elevated, rgba(15, 23, 42, 0.65));
  border: 1px solid var(--border-color, rgba(255, 255, 255, 0.08));
  border-radius: 14px;
  padding: 0.9rem 1.25rem;
  text-align: center;
  min-width: 105px;
  box-shadow: var(--shadow-sm, 0 2px 8px rgba(0, 0, 0, 0.15));
}

.stan-quick-stat-box .stat-num {
  display: block;
  font-size: 1.6rem;
  font-weight: 800;
  line-height: 1.2;
}

.stan-quick-stat-box .stat-lbl {
  display: block;
  font-size: 0.72rem;
  color: var(--text-muted, #94a3b8);
  margin-top: 0.2rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.02em;
}

/* 2. Sous-navigation d'onglets Stan */
.stan-subnav-tabs {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  background: var(--bg-surface-elevated, rgba(15, 23, 42, 0.75));
  padding: 0.35rem;
  border-radius: 14px;
  border: 1px solid var(--border-color, rgba(255, 255, 255, 0.07));
  overflow-x: auto;
  scrollbar-width: none;
}

.stan-subnav-tabs::-webkit-scrollbar {
  display: none;
}

.stan-tab-btn {
  display: inline-flex;
  align-items: center;
  gap: 0.55rem;
  padding: 0.65rem 1.15rem;
  border-radius: 10px;
  border: none;
  background: transparent;
  color: var(--text-muted, #94a3b8);
  font-size: 0.86rem;
  font-weight: 600;
  cursor: pointer;
  white-space: nowrap;
  transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
  user-select: none;
}

.stan-tab-btn i {
  font-size: 0.95rem;
  transition: transform 0.2s ease;
}

.stan-tab-btn:hover {
  color: var(--text-main, #ffffff);
  background: rgba(125, 125, 125, 0.1);
}

.stan-tab-btn:hover i {
  transform: scale(1.1);
}

.stan-tab-btn.active {
  background: linear-gradient(135deg, #0284c7 0%, #0369a1 100%);
  color: #ffffff !important;
  font-weight: 700;
  box-shadow: 0 4px 14px rgba(2, 132, 199, 0.35);
}

/* 3. Panneaux de contenu Stan */
.stan-tab-panel {
  display: block;
  animation: fadeInStan 0.25s ease-out;
}

.stan-tab-panel.hidden {
  display: none !important;
}

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

.stan-panel-header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 1rem;
  margin-bottom: 1.5rem;
}

.stan-panel-title {
  font-size: 1.4rem;
  font-weight: 700;
  color: var(--text-main, #ffffff);
  margin-bottom: 0.25rem;
}

.stan-panel-sub {
  font-size: 0.88rem;
  color: var(--text-muted, #94a3b8);
  margin-bottom: 0;
}

.stan-refresh-indicator {
  display: inline-flex;
  align-items: center;
  gap: 0.45rem;
  background: var(--bg-surface-elevated, rgba(255, 255, 255, 0.04));
  border: 1px solid var(--border-color, rgba(255, 255, 255, 0.08));
  padding: 0.4rem 0.8rem;
  border-radius: 9999px;
  color: #0284c7;
  font-size: 0.78rem;
  font-weight: 600;
}

/* 4. Cartes des lignes directes du Lycée */
.stan-school-cards-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(380px, 1fr));
  gap: 1.35rem;
}

.stan-full-card {
  background: var(--bg-surface, rgba(17, 24, 39, 0.7));
  border: 1px solid var(--border-color, rgba(255, 255, 255, 0.09));
  border-radius: 16px;
  padding: 1.35rem;
  box-shadow: var(--shadow-sm, 0 4px 14px rgba(0, 0, 0, 0.15));
  backdrop-filter: blur(12px);
  display: flex;
  flex-direction: column;
  gap: 1.15rem;
  transition: transform 0.25s ease, border-color 0.25s ease, box-shadow 0.25s ease;
}

.stan-full-card:hover {
  transform: translateY(-3px);
  border-color: #0284c7;
  box-shadow: var(--shadow-md, 0 8px 24px rgba(0, 0, 0, 0.2));
}

.stan-full-card-header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 0.85rem;
}

.stan-header-left {
  display: flex;
  align-items: center;
  gap: 0.85rem;
  flex: 1;
}

.stan-badge-pill {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-family: inherit;
  font-weight: 800;
  font-size: 0.95rem;
  padding: 0.35rem 0.85rem;
  border-radius: 9px;
  color: #ffffff !important;
  letter-spacing: -0.01em;
  box-shadow: 0 3px 8px rgba(0, 0, 0, 0.25);
  flex-shrink: 0;
}

.stan-title-group {
  flex: 1;
  min-width: 0;
}

.stan-card-title {
  font-size: 1.08rem;
  font-weight: 700;
  color: var(--text-main, #ffffff);
  margin: 0 0 0.2rem 0;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.stan-card-sub {
  font-size: 0.8rem;
  color: var(--text-muted, #94a3b8);
  margin: 0;
  line-height: 1.35;
}

.stan-route-highlight {
  color: #0284c7;
  font-weight: 600;
}

.stan-status-indicator {
  font-size: 0.72rem;
  font-weight: 600;
  color: #059669;
  background: rgba(16, 185, 129, 0.12);
  border: 1px solid rgba(16, 185, 129, 0.25);
  padding: 0.25rem 0.55rem;
  border-radius: 9999px;
  white-space: nowrap;
}

/* 4.1 Encart Arrêt Lycée Conseillé */
.stan-school-stop-banner {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  padding: 0.65rem 0.9rem;
  background: rgba(2, 132, 199, 0.08);
  border: 1px solid rgba(2, 132, 199, 0.2);
  border-radius: 10px;
}

.stop-banner-icon {
  width: 28px;
  height: 28px;
  border-radius: 7px;
  background: rgba(2, 132, 199, 0.15);
  color: #0284c7;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 0.82rem;
  flex-shrink: 0;
}

.stop-banner-info {
  font-size: 0.82rem;
  line-height: 1.35;
  color: var(--text-main, #ffffff);
}

.stop-banner-lbl {
  color: var(--text-muted, #94a3b8);
  margin-right: 0.35rem;
}

.stop-banner-name {
  color: #0284c7;
  font-weight: 700;
}

.stop-banner-time {
  color: var(--text-muted, #94a3b8);
  margin-left: 0.3rem;
  font-size: 0.78rem;
}

/* 4.2 Les deux directions séparées et limpides */
.stan-directions-dual {
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
}

.stan-dir-panel {
  background: var(--bg-surface-elevated, rgba(15, 23, 42, 0.5));
  border: 1px solid var(--border-color, rgba(255, 255, 255, 0.06));
  border-radius: 12px;
  padding: 0.75rem 0.85rem;
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
}

.dir-panel-header {
  display: flex;
  align-items: center;
  gap: 0.65rem;
}

.dir-tag {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  padding: 0.2rem 0.55rem;
  border-radius: 6px;
  font-size: 0.7rem;
  font-weight: 700;
  background: rgba(2, 132, 199, 0.15);
  color: #0284c7;
  border: 1px solid rgba(2, 132, 199, 0.3);
  text-transform: uppercase;
  letter-spacing: 0.02em;
  flex-shrink: 0;
}

.dir-tag.return {
  background: rgba(16, 185, 129, 0.15);
  color: #059669;
  border-color: rgba(16, 185, 129, 0.3);
}

.dir-terminus {
  font-size: 0.88rem;
  font-weight: 700;
  color: var(--text-main, #ffffff);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.dir-via-txt {
  font-size: 0.75rem;
  color: var(--text-muted, #94a3b8);
  margin: 0;
  line-height: 1.35;
  display: flex;
  align-items: center;
  gap: 0.4rem;
}

/* 5. Compteurs de prochains passages */
.stan-passages-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0.65rem;
}

.stan-passage-chip {
  background: var(--bg-surface, rgba(15, 23, 42, 0.6));
  border: 1px solid var(--border-color, rgba(255, 255, 255, 0.07));
  border-radius: 10px;
  padding: 0.6rem 0.7rem;
  display: flex;
  align-items: center;
  gap: 0.55rem;
}

.stan-passage-chip.highlight {
  background: rgba(2, 132, 199, 0.1);
  border-color: rgba(2, 132, 199, 0.35);
}

.stan-passage-chip .passage-icon {
  width: 28px;
  height: 28px;
  border-radius: 7px;
  background: rgba(125, 125, 125, 0.1);
  display: flex;
  align-items: center;
  justify-content: center;
  color: #0284c7;
  font-size: 0.8rem;
  flex-shrink: 0;
}

.stan-passage-chip.highlight .passage-icon {
  background: rgba(2, 132, 199, 0.2);
  color: #0284c7;
}

.stan-passage-chip .passage-info {
  display: flex;
  flex-direction: column;
  min-width: 0;
}

.stan-passage-chip .passage-lbl {
  font-size: 0.65rem;
  color: var(--text-muted, #94a3b8);
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.02em;
}

.stan-passage-chip .passage-time {
  font-size: 0.82rem;
  font-weight: 700;
  color: var(--text-main, #ffffff);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.stan-passage-chip.highlight .passage-time {
  color: #0284c7;
}

.passage-exact-time {
  font-size: 0.74rem;
  font-weight: 500;
  opacity: 0.9;
}

.stan-full-card-footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.75rem;
  padding-top: 0.75rem;
  border-top: 1px solid var(--border-color, rgba(255, 255, 255, 0.06));
}

.stan-features-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 0.4rem;
}

.feature-tag {
  font-size: 0.7rem;
  font-weight: 600;
  color: var(--text-muted, #94a3b8);
  background: var(--bg-surface-elevated, rgba(255, 255, 255, 0.04));
  padding: 0.2rem 0.5rem;
  border-radius: 6px;
  border: 1px solid var(--border-color, rgba(255, 255, 255, 0.05));
}

/* 6. Catalogue de toutes les lignes */
.stan-search-toolbar {
  display: flex;
  align-items: center;
  gap: 1rem;
  flex-wrap: wrap;
  background: var(--bg-surface, rgba(17, 24, 39, 0.6));
  border: 1px solid var(--border-color, rgba(255, 255, 255, 0.08));
  border-radius: 14px;
  padding: 0.85rem;
}

.stan-type-filter-chips {
  display: flex;
  gap: 0.4rem;
  flex-wrap: wrap;
}

.stan-all-lines-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(320px, 1fr));
  gap: 1rem;
}

.stan-all-line-item {
  background: var(--bg-surface, rgba(17, 24, 39, 0.7));
  border: 1px solid var(--border-color, rgba(255, 255, 255, 0.08));
  border-radius: 14px;
  padding: 1.15rem;
  display: flex;
  flex-direction: column;
  gap: 0.85rem;
  transition: all 0.2s ease;
}

.stan-all-line-item:hover {
  transform: translateY(-2px);
  border-color: #0284c7;
  box-shadow: var(--shadow-md, 0 8px 20px rgba(0, 0, 0, 0.15));
}

.stan-all-header {
  display: flex;
  align-items: center;
  gap: 0.8rem;
}

.stan-all-title-box {
  flex: 1;
  min-width: 0;
}

.stan-all-title {
  display: block;
  font-size: 0.96rem;
  font-weight: 700;
  color: var(--text-main, #ffffff);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.stan-all-route {
  display: block;
  font-size: 0.78rem;
  color: var(--text-muted, #94a3b8);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.stan-all-dirs-box {
  background: var(--bg-surface-elevated, rgba(15, 23, 42, 0.5));
  border: 1px solid var(--border-color, rgba(255, 255, 255, 0.05));
  border-radius: 8px;
  padding: 0.55rem 0.7rem;
  display: flex;
  flex-direction: column;
  gap: 0.35rem;
}

.all-dir-row {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  font-size: 0.78rem;
}

.dir-icon-badge {
  width: 18px;
  height: 18px;
  border-radius: 5px;
  background: rgba(2, 132, 199, 0.15);
  color: #0284c7;
  font-weight: 700;
  font-size: 0.68rem;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

.all-dir-name {
  color: var(--text-main, #ffffff);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.stan-all-details {
  display: flex;
  flex-direction: column;
  gap: 0.4rem;
  background: var(--bg-surface-elevated, rgba(15, 23, 42, 0.5));
  border: 1px solid var(--border-color, rgba(255, 255, 255, 0.05));
  border-radius: 8px;
  padding: 0.65rem;
}

.stan-detail-row {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 0.5rem;
}

.stan-all-footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding-top: 0.5rem;
  border-top: 1px solid var(--border-color, rgba(255, 255, 255, 0.05));
}

/* 7. Info Trafic & Alertes */
.stan-traffic-banner-ok {
  display: flex;
  align-items: center;
  gap: 1rem;
  background: rgba(16, 185, 129, 0.12);
  border: 1px solid rgba(16, 185, 129, 0.3);
  border-radius: 14px;
  padding: 1.15rem 1.4rem;
  color: var(--text-main, #ffffff);
}

.stan-alerts-stack {
  display: flex;
  flex-direction: column;
  gap: 1rem;
}

.stan-alert-card {
  background: var(--bg-surface, rgba(17, 24, 39, 0.75));
  border: 1px solid var(--border-color, rgba(255, 255, 255, 0.08));
  border-radius: 14px;
  padding: 1.25rem;
  display: flex;
  align-items: flex-start;
  gap: 1.15rem;
  border-left: 4px solid var(--accent-color, #0284c7);
}

.stan-alert-card.warning {
  border-left-color: #f59e0b;
}

.stan-alert-card.success {
  border-left-color: #10b981;
}

.stan-alert-card.info {
  border-left-color: #0284c7;
}

.stan-alert-badge {
  display: flex;
  flex-direction: column;
  gap: 0.35rem;
  flex-shrink: 0;
}

.stan-alert-body {
  flex: 1;
}

.stan-alert-title {
  font-size: 1rem;
  font-weight: 700;
  color: var(--text-main, #ffffff);
  margin-bottom: 0.35rem;
}

.stan-alert-desc {
  font-size: 0.86rem;
  color: var(--text-muted, #cbd5e1);
  line-height: 1.5;
  margin-bottom: 0.5rem;
}

.stan-alert-date {
  font-size: 0.74rem;
  color: var(--text-subtle, #94a3b8);
  font-weight: 600;
}

/* 8. Tarifs & Pass Jeunes */
.stan-fares-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: 1.25rem;
}

.stan-fare-card {
  background: var(--bg-surface, rgba(17, 24, 39, 0.7));
  border: 1px solid var(--border-color, rgba(255, 255, 255, 0.08));
  border-radius: 16px;
  padding: 1.6rem 1.4rem;
  display: flex;
  flex-direction: column;
  gap: 0.85rem;
  position: relative;
  transition: transform 0.25s ease, border-color 0.25s ease;
}

.stan-fare-card.highlight {
  background: linear-gradient(135deg, rgba(16, 185, 129, 0.12) 0%, var(--bg-surface) 100%);
  border-color: rgba(16, 185, 129, 0.35);
  box-shadow: 0 8px 24px rgba(16, 185, 129, 0.12);
}

.stan-fare-card:hover {
  transform: translateY(-3px);
  border-color: #0284c7;
}

.fare-badge {
  font-size: 0.74rem;
  font-weight: 700;
  letter-spacing: 0.04em;
  color: var(--text-muted, #94a3b8);
}

.fare-title {
  font-size: 1.25rem;
  font-weight: 800;
  color: var(--text-main, #ffffff);
  margin: 0;
}

.fare-price {
  font-size: 1.7rem;
  font-weight: 800;
  color: var(--text-main, #ffffff);
  margin: 0;
}

.fare-desc {
  font-size: 0.86rem;
  color: var(--text-muted, #94a3b8);
  line-height: 1.5;
  flex: 1;
  margin-bottom: 0.5rem;
}

/* ==========================================================================
   SOUS-ONGLETS UNIFIÉS : ANNONCES & SONDAGES
   ========================================================================== */

.announcements-subtabs-bar {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  background: var(--bg-surface-elevated, rgba(15, 23, 42, 0.7));
  padding: 0.35rem;
  border-radius: 14px;
  border: 1px solid var(--border-color, rgba(255, 255, 255, 0.08));
  margin-bottom: 1.75rem;
}

.ann-subtab-btn {
  flex: 1;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.65rem;
  padding: 0.75rem 1.25rem;
  border-radius: 10px;
  border: none;
  background: transparent;
  color: var(--text-muted, #94a3b8);
  font-size: 0.92rem;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
  user-select: none;
}

.ann-subtab-btn i {
  font-size: 1rem;
}

.ann-subtab-btn:hover {
  color: var(--text-main, #ffffff);
  background: rgba(125, 125, 125, 0.08);
}

.ann-subtab-btn.active {
  background: linear-gradient(135deg, #0284c7 0%, #0369a1 100%);
  color: #ffffff !important;
  font-weight: 700;
  box-shadow: 0 4px 14px rgba(2, 132, 199, 0.35);
}

.ann-subtab-panel {
  display: block;
  animation: fadeInAnn 0.25s ease-out;
}

.ann-subtab-panel.hidden {
  display: none !important;
}

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

/* ==========================================================================
   ADAPTATION DES THÈMES CLAIRS (LIGHT / PRONOTE-LIGHT / SEPIA / ICE)
   Rend le héros et les cartes Stan clairs, lumineux, nets et ultra-contrastés
   ========================================================================== */
body.theme-light .stan-hero-card,
body.theme-pronote-light .stan-hero-card,
body.theme-sepia .stan-hero-card,
body.theme-ice .stan-hero-card {
  background: linear-gradient(135deg, #FFFFFF 0%, #F0F9FF 55%, #E0F2FE 100%) !important;
  border: 1px solid #BAE6FD !important;
  box-shadow: 0 10px 25px -4px rgba(2, 132, 199, 0.08), 0 2px 8px rgba(15, 23, 42, 0.04) !important;
}

body.theme-light .stan-hero-title,
body.theme-pronote-light .stan-hero-title,
body.theme-sepia .stan-hero-title,
body.theme-ice .stan-hero-title {
  color: #0F172A !important;
}

body.theme-light .stan-hero-desc,
body.theme-pronote-light .stan-hero-desc,
body.theme-sepia .stan-hero-desc,
body.theme-ice .stan-hero-desc {
  color: #334155 !important;
}

body.theme-light .stan-network-badge,
body.theme-pronote-light .stan-network-badge,
body.theme-sepia .stan-network-badge,
body.theme-ice .stan-network-badge {
  background: #E0F2FE !important;
  border-color: #7DD3FC !important;
  color: #0369A1 !important;
}

body.theme-light .stan-live-status-pill,
body.theme-pronote-light .stan-live-status-pill,
body.theme-sepia .stan-live-status-pill,
body.theme-ice .stan-live-status-pill {
  background: #ECFDF5 !important;
  border-color: #A7F3D0 !important;
  color: #047857 !important;
}

body.theme-light .stan-school-context-bar,
body.theme-pronote-light .stan-school-context-bar,
body.theme-sepia .stan-school-context-bar,
body.theme-ice .stan-school-context-bar {
  background: #FFFFFF !important;
  border-color: #CBD5E1 !important;
  color: #0F172A !important;
}

body.theme-light .stan-quick-stat-box,
body.theme-pronote-light .stan-quick-stat-box,
body.theme-sepia .stan-quick-stat-box,
body.theme-ice .stan-quick-stat-box {
  background: #FFFFFF !important;
  border-color: #CBD5E1 !important;
  box-shadow: 0 2px 8px rgba(15, 23, 42, 0.05) !important;
}

body.theme-light .stan-quick-stat-box .stat-num,
body.theme-pronote-light .stan-quick-stat-box .stat-num,
body.theme-sepia .stan-quick-stat-box .stat-num,
body.theme-ice .stan-quick-stat-box .stat-num {
  color: #0284C7 !important;
}

body.theme-light .stan-quick-stat-box .stat-lbl,
body.theme-pronote-light .stan-quick-stat-box .stat-lbl,
body.theme-sepia .stan-quick-stat-box .stat-lbl,
body.theme-ice .stan-quick-stat-box .stat-lbl {
  color: #475569 !important;
}

body.theme-light .stan-subnav-tabs,
body.theme-pronote-light .stan-subnav-tabs,
body.theme-sepia .stan-subnav-tabs,
body.theme-ice .stan-subnav-tabs {
  background: #E2E8F0 !important;
  border-color: #CBD5E1 !important;
}

body.theme-light .stan-tab-btn,
body.theme-pronote-light .stan-tab-btn,
body.theme-sepia .stan-tab-btn,
body.theme-ice .stan-tab-btn {
  color: #475569 !important;
}

body.theme-light .stan-tab-btn:hover,
body.theme-pronote-light .stan-tab-btn:hover,
body.theme-sepia .stan-tab-btn:hover,
body.theme-ice .stan-tab-btn:hover {
  color: #0F172A !important;
  background: rgba(255, 255, 255, 0.8) !important;
}

body.theme-light .stan-tab-btn.active,
body.theme-pronote-light .stan-tab-btn.active,
body.theme-sepia .stan-tab-btn.active,
body.theme-ice .stan-tab-btn.active {
  background: #0284C7 !important;
  color: #FFFFFF !important;
  box-shadow: 0 4px 12px rgba(2, 132, 199, 0.3) !important;
}

body.theme-light .stan-panel-title,
body.theme-pronote-light .stan-panel-title,
body.theme-sepia .stan-panel-title,
body.theme-ice .stan-panel-title {
  color: #0F172A !important;
}

body.theme-light .stan-panel-sub,
body.theme-pronote-light .stan-panel-sub,
body.theme-sepia .stan-panel-sub,
body.theme-ice .stan-panel-sub {
  color: #475569 !important;
}

body.theme-light .stan-refresh-indicator,
body.theme-pronote-light .stan-refresh-indicator,
body.theme-sepia .stan-refresh-indicator,
body.theme-ice .stan-refresh-indicator {
  background: #FFFFFF !important;
  border-color: #CBD5E1 !important;
  color: #0284C7 !important;
}

body.theme-light .stan-full-card,
body.theme-pronote-light .stan-full-card,
body.theme-sepia .stan-full-card,
body.theme-ice .stan-full-card {
  background: #FFFFFF !important;
  border: 1px solid #CBD5E1 !important;
  box-shadow: 0 4px 14px rgba(15, 23, 42, 0.06) !important;
}

body.theme-light .stan-full-card:hover,
body.theme-pronote-light .stan-full-card:hover,
body.theme-sepia .stan-full-card:hover,
body.theme-ice .stan-full-card:hover {
  border-color: #0284C7 !important;
  box-shadow: 0 8px 24px rgba(2, 132, 199, 0.12) !important;
}

body.theme-light .stan-card-title,
body.theme-pronote-light .stan-card-title,
body.theme-sepia .stan-card-title,
body.theme-ice .stan-card-title {
  color: #0F172A !important;
}

body.theme-light .stan-card-sub,
body.theme-pronote-light .stan-card-sub,
body.theme-sepia .stan-card-sub,
body.theme-ice .stan-card-sub {
  color: #475569 !important;
}

body.theme-light .stan-route-highlight,
body.theme-pronote-light .stan-route-highlight,
body.theme-sepia .stan-route-highlight,
body.theme-ice .stan-route-highlight {
  color: #0284C7 !important;
}

body.theme-light .stan-school-stop-banner,
body.theme-pronote-light .stan-school-stop-banner,
body.theme-sepia .stan-school-stop-banner,
body.theme-ice .stan-school-stop-banner {
  background: #F0F9FF !important;
  border: 1px solid #BAE6FD !important;
}

body.theme-light .stop-banner-lbl,
body.theme-pronote-light .stop-banner-lbl,
body.theme-sepia .stop-banner-lbl,
body.theme-ice .stop-banner-lbl {
  color: #475569 !important;
}

body.theme-light .stop-banner-name,
body.theme-pronote-light .stop-banner-name,
body.theme-sepia .stop-banner-name,
body.theme-ice .stop-banner-name {
  color: #0369A1 !important;
}

body.theme-light .stop-banner-time,
body.theme-pronote-light .stop-banner-time,
body.theme-sepia .stop-banner-time,
body.theme-ice .stop-banner-time {
  color: #64748B !important;
}

body.theme-light .stan-dir-panel,
body.theme-pronote-light .stan-dir-panel,
body.theme-sepia .stan-dir-panel,
body.theme-ice .stan-dir-panel {
  background: #F8FAFC !important;
  border-color: #E2E8F0 !important;
}

body.theme-light .dir-terminus,
body.theme-pronote-light .dir-terminus,
body.theme-sepia .dir-terminus,
body.theme-ice .dir-terminus {
  color: #0F172A !important;
}

body.theme-light .dir-via-txt,
body.theme-pronote-light .dir-via-txt,
body.theme-sepia .dir-via-txt,
body.theme-ice .dir-via-txt {
  color: #475569 !important;
}

body.theme-light .stan-passage-chip,
body.theme-pronote-light .stan-passage-chip,
body.theme-sepia .stan-passage-chip,
body.theme-ice .stan-passage-chip {
  background: #FFFFFF !important;
  border-color: #E2E8F0 !important;
}

body.theme-light .stan-passage-chip.highlight,
body.theme-pronote-light .stan-passage-chip.highlight,
body.theme-sepia .stan-passage-chip.highlight,
body.theme-ice .stan-passage-chip.highlight {
  background: #EFF6FF !important;
  border-color: #93C5FD !important;
}

body.theme-light .stan-passage-chip .passage-lbl,
body.theme-pronote-light .stan-passage-chip .passage-lbl,
body.theme-sepia .stan-passage-chip .passage-lbl,
body.theme-ice .stan-passage-chip .passage-lbl {
  color: #64748B !important;
}

body.theme-light .stan-passage-chip .passage-time,
body.theme-pronote-light .stan-passage-chip .passage-time,
body.theme-sepia .stan-passage-chip .passage-time,
body.theme-ice .stan-passage-chip .passage-time {
  color: #0F172A !important;
}

body.theme-light .stan-passage-chip.highlight .passage-time,
body.theme-pronote-light .stan-passage-chip.highlight .passage-time,
body.theme-sepia .stan-passage-chip.highlight .passage-time,
body.theme-ice .stan-passage-chip.highlight .passage-time {
  color: #0284C7 !important;
}

body.theme-light .stan-features-chips .feature-tag,
body.theme-pronote-light .stan-features-chips .feature-tag,
body.theme-sepia .stan-features-chips .feature-tag,
body.theme-ice .stan-features-chips .feature-tag {
  background: #F1F5F9 !important;
  border-color: #E2E8F0 !important;
  color: #475569 !important;
}

body.theme-light .stan-search-toolbar,
body.theme-pronote-light .stan-search-toolbar,
body.theme-sepia .stan-search-toolbar,
body.theme-ice .stan-search-toolbar {
  background: #FFFFFF !important;
  border-color: #E2E8F0 !important;
}

body.theme-light .stan-all-line-item,
body.theme-pronote-light .stan-all-line-item,
body.theme-sepia .stan-all-line-item,
body.theme-ice .stan-all-line-item {
  background: #FFFFFF !important;
  border-color: #E2E8F0 !important;
  box-shadow: 0 2px 8px rgba(15, 23, 42, 0.04) !important;
}

body.theme-light .stan-all-line-item:hover,
body.theme-pronote-light .stan-all-line-item:hover,
body.theme-sepia .stan-all-line-item:hover,
body.theme-ice .stan-all-line-item:hover {
  border-color: #0284C7 !important;
  box-shadow: 0 6px 18px rgba(2, 132, 199, 0.1) !important;
}

body.theme-light .stan-all-title,
body.theme-pronote-light .stan-all-title,
body.theme-sepia .stan-all-title,
body.theme-ice .stan-all-title {
  color: #0F172A !important;
}

body.theme-light .stan-all-route,
body.theme-pronote-light .stan-all-route,
body.theme-sepia .stan-all-route,
body.theme-ice .stan-all-route {
  color: #475569 !important;
}

body.theme-light .stan-all-dirs-box,
body.theme-pronote-light .stan-all-dirs-box,
body.theme-sepia .stan-all-dirs-box,
body.theme-ice .stan-all-dirs-box {
  background: #F8FAFC !important;
  border-color: #E2E8F0 !important;
}

body.theme-light .all-dir-name,
body.theme-pronote-light .all-dir-name,
body.theme-sepia .all-dir-name,
body.theme-ice .all-dir-name {
  color: #1E293B !important;
}

body.theme-light .stan-all-details,
body.theme-pronote-light .stan-all-details,
body.theme-sepia .stan-all-details,
body.theme-ice .stan-all-details {
  background: #F8FAFC !important;
  border-color: #E2E8F0 !important;
}

body.theme-light .stan-traffic-banner-ok,
body.theme-pronote-light .stan-traffic-banner-ok,
body.theme-sepia .stan-traffic-banner-ok,
body.theme-ice .stan-traffic-banner-ok {
  background: #ECFDF5 !important;
  border-color: #A7F3D0 !important;
  color: #065F46 !important;
}

body.theme-light .stan-traffic-banner-ok strong,
body.theme-pronote-light .stan-traffic-banner-ok strong,
body.theme-sepia .stan-traffic-banner-ok strong,
body.theme-ice .stan-traffic-banner-ok strong {
  color: #065F46 !important;
}

body.theme-light .stan-alert-card,
body.theme-pronote-light .stan-alert-card,
body.theme-sepia .stan-alert-card,
body.theme-ice .stan-alert-card {
  background: #FFFFFF !important;
  border-color: #E2E8F0 !important;
}

body.theme-light .stan-alert-title,
body.theme-pronote-light .stan-alert-title,
body.theme-sepia .stan-alert-title,
body.theme-ice .stan-alert-title {
  color: #0F172A !important;
}

body.theme-light .stan-alert-desc,
body.theme-pronote-light .stan-alert-desc,
body.theme-sepia .stan-alert-desc,
body.theme-ice .stan-alert-desc {
  color: #334155 !important;
}

body.theme-light .stan-alert-date,
body.theme-pronote-light .stan-alert-date,
body.theme-sepia .stan-alert-date,
body.theme-ice .stan-alert-date {
  color: #64748B !important;
}

body.theme-light .stan-fare-card,
body.theme-pronote-light .stan-fare-card,
body.theme-sepia .stan-fare-card,
body.theme-ice .stan-fare-card {
  background: #FFFFFF !important;
  border-color: #E2E8F0 !important;
}

body.theme-light .stan-fare-card.highlight,
body.theme-pronote-light .stan-fare-card.highlight,
body.theme-sepia .stan-fare-card.highlight,
body.theme-ice .stan-fare-card.highlight {
  background: linear-gradient(135deg, #ECFDF5 0%, #FFFFFF 100%) !important;
  border-color: #6EE7B7 !important;
}

body.theme-light .fare-title,
body.theme-pronote-light .fare-title,
body.theme-sepia .fare-title,
body.theme-ice .fare-title {
  color: #0F172A !important;
}

body.theme-light .fare-price,
body.theme-pronote-light .fare-price,
body.theme-sepia .fare-price,
body.theme-ice .fare-price {
  color: #0F172A !important;
}

body.theme-light .fare-desc,
body.theme-pronote-light .fare-desc,
body.theme-sepia .fare-desc,
body.theme-ice .fare-desc {
  color: #475569 !important;
}

body.theme-light .announcements-subtabs-bar,
body.theme-pronote-light .announcements-subtabs-bar,
body.theme-sepia .announcements-subtabs-bar,
body.theme-ice .announcements-subtabs-bar {
  background: #E2E8F0 !important;
  border-color: #CBD5E1 !important;
}

body.theme-light .ann-subtab-btn,
body.theme-pronote-light .ann-subtab-btn,
body.theme-sepia .ann-subtab-btn,
body.theme-ice .ann-subtab-btn {
  color: #475569 !important;
}

body.theme-light .ann-subtab-btn:hover,
body.theme-pronote-light .ann-subtab-btn:hover,
body.theme-sepia .ann-subtab-btn:hover,
body.theme-ice .ann-subtab-btn:hover {
  color: #0F172A !important;
  background: rgba(255, 255, 255, 0.8) !important;
}

body.theme-light .ann-subtab-btn.active,
body.theme-pronote-light .ann-subtab-btn.active,
body.theme-sepia .ann-subtab-btn.active,
body.theme-ice .ann-subtab-btn.active {
  background: #0284C7 !important;
  color: #FFFFFF !important;
  box-shadow: 0 4px 12px rgba(2, 132, 199, 0.3) !important;
}

/* ==========================================================================
   ADAPTATION DES THÈMES SOMBRES & COLORÉS
   (DARK / PRONOTE-DARK / AMOLED / NATURE / MIDNIGHT / BORDEAUX / CYBER)
   ========================================================================== */
body.theme-dark .stan-hero-card,
body.theme-pronote-dark .stan-hero-card,
body.theme-amoled .stan-hero-card,
body.theme-nature .stan-hero-card,
body.theme-midnight .stan-hero-card,
body.theme-bordeaux .stan-hero-card,
body.theme-cyber .stan-hero-card {
  background: linear-gradient(135deg, rgba(15, 23, 42, 0.95) 0%, rgba(30, 41, 59, 0.85) 60%, rgba(14, 116, 144, 0.25) 100%) !important;
  border: 1px solid rgba(56, 189, 248, 0.22) !important;
}

body.theme-dark .stan-hero-title,
body.theme-pronote-dark .stan-hero-title,
body.theme-amoled .stan-hero-title,
body.theme-nature .stan-hero-title,
body.theme-midnight .stan-hero-title,
body.theme-bordeaux .stan-hero-title,
body.theme-cyber .stan-hero-title {
  color: #FFFFFF !important;
}

body.theme-dark .stan-hero-desc,
body.theme-pronote-dark .stan-hero-desc,
body.theme-amoled .stan-hero-desc,
body.theme-nature .stan-hero-desc,
body.theme-midnight .stan-hero-desc,
body.theme-bordeaux .stan-hero-desc,
body.theme-cyber .stan-hero-desc {
  color: #94A3B8 !important;
}

body.theme-dark .stan-subnav-tabs,
body.theme-pronote-dark .stan-subnav-tabs,
body.theme-amoled .stan-subnav-tabs,
body.theme-nature .stan-subnav-tabs,
body.theme-midnight .stan-subnav-tabs,
body.theme-bordeaux .stan-subnav-tabs,
body.theme-cyber .stan-subnav-tabs {
  background: rgba(15, 23, 42, 0.75) !important;
  border-color: rgba(255, 255, 255, 0.08) !important;
}

body.theme-dark .stan-tab-btn,
body.theme-pronote-dark .stan-tab-btn,
body.theme-amoled .stan-tab-btn,
body.theme-nature .stan-tab-btn,
body.theme-midnight .stan-tab-btn,
body.theme-bordeaux .stan-tab-btn,
body.theme-cyber .stan-tab-btn {
  color: #94A3B8 !important;
}

body.theme-dark .stan-tab-btn:hover,
body.theme-pronote-dark .stan-tab-btn:hover,
body.theme-amoled .stan-tab-btn:hover,
body.theme-nature .stan-tab-btn:hover,
body.theme-midnight .stan-tab-btn:hover,
body.theme-bordeaux .stan-tab-btn:hover,
body.theme-cyber .stan-tab-btn:hover {
  color: #FFFFFF !important;
  background: rgba(255, 255, 255, 0.06) !important;
}

body.theme-dark .stan-tab-btn.active,
body.theme-pronote-dark .stan-tab-btn.active,
body.theme-amoled .stan-tab-btn.active,
body.theme-nature .stan-tab-btn.active,
body.theme-midnight .stan-tab-btn.active,
body.theme-bordeaux .stan-tab-btn.active,
body.theme-cyber .stan-tab-btn.active {
  background: linear-gradient(135deg, #0284c7 0%, #0369a1 100%) !important;
  color: #FFFFFF !important;
}

body.theme-dark .stan-full-card,
body.theme-pronote-dark .stan-full-card,
body.theme-amoled .stan-full-card,
body.theme-nature .stan-full-card,
body.theme-midnight .stan-full-card,
body.theme-bordeaux .stan-full-card,
body.theme-cyber .stan-full-card {
  background: rgba(17, 24, 39, 0.7) !important;
  border: 1px solid rgba(255, 255, 255, 0.09) !important;
}

body.theme-dark .stan-card-title,
body.theme-pronote-dark .stan-card-title,
body.theme-amoled .stan-card-title,
body.theme-nature .stan-card-title,
body.theme-midnight .stan-card-title,
body.theme-bordeaux .stan-card-title,
body.theme-cyber .stan-card-title {
  color: #FFFFFF !important;
}

body.theme-dark .stan-card-sub,
body.theme-pronote-dark .stan-card-sub,
body.theme-amoled .stan-card-sub,
body.theme-nature .stan-card-sub,
body.theme-midnight .stan-card-sub,
body.theme-bordeaux .stan-card-sub,
body.theme-cyber .stan-card-sub {
  color: #94A3B8 !important;
}

body.theme-dark .stan-school-stop-banner,
body.theme-pronote-dark .stan-school-stop-banner,
body.theme-amoled .stan-school-stop-banner,
body.theme-nature .stan-school-stop-banner,
body.theme-midnight .stan-school-stop-banner,
body.theme-bordeaux .stan-school-stop-banner,
body.theme-cyber .stan-school-stop-banner {
  background: rgba(2, 132, 199, 0.12) !important;
  border: 1px solid rgba(56, 189, 248, 0.25) !important;
}

body.theme-dark .stop-banner-lbl,
body.theme-pronote-dark .stop-banner-lbl,
body.theme-amoled .stop-banner-lbl,
body.theme-nature .stop-banner-lbl,
body.theme-midnight .stop-banner-lbl,
body.theme-bordeaux .stop-banner-lbl,
body.theme-cyber .stop-banner-lbl {
  color: #94A3B8 !important;
}

body.theme-dark .stop-banner-name,
body.theme-pronote-dark .stop-banner-name,
body.theme-amoled .stop-banner-name,
body.theme-nature .stop-banner-name,
body.theme-midnight .stop-banner-name,
body.theme-bordeaux .stop-banner-name,
body.theme-cyber .stop-banner-name {
  color: #38BDF8 !important;
}

body.theme-dark .stan-dir-panel,
body.theme-pronote-dark .stan-dir-panel,
body.theme-amoled .stan-dir-panel,
body.theme-nature .stan-dir-panel,
body.theme-midnight .stan-dir-panel,
body.theme-bordeaux .stan-dir-panel,
body.theme-cyber .stan-dir-panel {
  background: rgba(15, 23, 42, 0.6) !important;
  border-color: rgba(255, 255, 255, 0.07) !important;
}

body.theme-dark .dir-terminus,
body.theme-pronote-dark .dir-terminus,
body.theme-amoled .dir-terminus,
body.theme-nature .dir-terminus,
body.theme-midnight .dir-terminus,
body.theme-bordeaux .dir-terminus,
body.theme-cyber .dir-terminus {
  color: #FFFFFF !important;
}

body.theme-dark .dir-via-txt,
body.theme-pronote-dark .dir-via-txt,
body.theme-amoled .dir-via-txt,
body.theme-nature .dir-via-txt,
body.theme-midnight .dir-via-txt,
body.theme-bordeaux .dir-via-txt,
body.theme-cyber .dir-via-txt {
  color: #94A3B8 !important;
}

body.theme-dark .stan-passage-chip,
body.theme-pronote-dark .stan-passage-chip,
body.theme-amoled .stan-passage-chip,
body.theme-nature .stan-passage-chip,
body.theme-midnight .stan-passage-chip,
body.theme-bordeaux .stan-passage-chip,
body.theme-cyber .stan-passage-chip {
  background: rgba(15, 23, 42, 0.7) !important;
  border-color: rgba(255, 255, 255, 0.08) !important;
}

body.theme-dark .stan-passage-chip.highlight,
body.theme-pronote-dark .stan-passage-chip.highlight,
body.theme-amoled .stan-passage-chip.highlight,
body.theme-nature .stan-passage-chip.highlight,
body.theme-midnight .stan-passage-chip.highlight,
body.theme-bordeaux .stan-passage-chip.highlight,
body.theme-cyber .stan-passage-chip.highlight {
  background: rgba(2, 132, 199, 0.2) !important;
  border-color: rgba(56, 189, 248, 0.35) !important;
}

body.theme-dark .stan-passage-chip .passage-time,
body.theme-pronote-dark .stan-passage-chip .passage-time,
body.theme-amoled .stan-passage-chip .passage-time,
body.theme-nature .stan-passage-chip .passage-time,
body.theme-midnight .stan-passage-chip .passage-time,
body.theme-bordeaux .stan-passage-chip .passage-time,
body.theme-cyber .stan-passage-chip .passage-time {
  color: #FFFFFF !important;
}

body.theme-dark .stan-passage-chip.highlight .passage-time,
body.theme-pronote-dark .stan-passage-chip.highlight .passage-time,
body.theme-amoled .stan-passage-chip.highlight .passage-time,
body.theme-nature .stan-passage-chip.highlight .passage-time,
body.theme-midnight .stan-passage-chip.highlight .passage-time,
body.theme-bordeaux .stan-passage-chip.highlight .passage-time,
body.theme-cyber .stan-passage-chip.highlight .passage-time {
  color: #38BDF8 !important;
}

body.theme-dark .announcements-subtabs-bar,
body.theme-pronote-dark .announcements-subtabs-bar,
body.theme-amoled .announcements-subtabs-bar,
body.theme-nature .announcements-subtabs-bar,
body.theme-midnight .announcements-subtabs-bar,
body.theme-bordeaux .announcements-subtabs-bar,
body.theme-cyber .announcements-subtabs-bar {
  background: rgba(15, 23, 42, 0.75) !important;
  border-color: rgba(255, 255, 255, 0.08) !important;
}

body.theme-dark .ann-subtab-btn,
body.theme-pronote-dark .ann-subtab-btn,
body.theme-amoled .ann-subtab-btn,
body.theme-nature .ann-subtab-btn,
body.theme-midnight .ann-subtab-btn,
body.theme-bordeaux .ann-subtab-btn,
body.theme-cyber .ann-subtab-btn {
  color: #94A3B8 !important;
}

body.theme-dark .ann-subtab-btn.active,
body.theme-pronote-dark .ann-subtab-btn.active,
body.theme-amoled .ann-subtab-btn.active,
body.theme-nature .ann-subtab-btn.active,
body.theme-midnight .ann-subtab-btn.active,
body.theme-bordeaux .ann-subtab-btn.active,
body.theme-cyber .ann-subtab-btn.active {
  background: linear-gradient(135deg, #0284c7 0%, #0369a1 100%) !important;
  color: #FFFFFF !important;
}

/* Responsive Stan & Subtabs */
@media (max-width: 768px) {
  .stan-hero-card {
    padding: 1.25rem 1.15rem 1rem 1.15rem;
  }
  .stan-hero-title {
    font-size: 1.6rem;
  }
  .stan-hero-main {
    flex-direction: column;
    gap: 1.25rem;
  }
  .stan-hero-quick-stats {
    width: 100%;
  }
  .stan-quick-stat-box {
    flex: 1;
  }
  .stan-school-cards-grid {
    grid-template-columns: 1fr;
  }
  .stan-all-lines-grid {
    grid-template-columns: 1fr;
  }
  .stan-passages-row {
    grid-template-columns: 1fr;
  }
  .ann-subtab-btn {
    font-size: 0.82rem;
    padding: 0.65rem 0.75rem;
  }
}

/* ==========================================================================
   ACTUALITÉS : À LA UNE À NANCY & VIE LYCÉENNE (DESIGN 3 CARTES & SKELETON)
   ========================================================================== */
.news-section-block {
  margin-top: 2rem;
  margin-bottom: 2rem;
}

/* Utilities Tailwind requis */
.grid {
  display: grid;
}
.grid-cols-1 {
  grid-template-columns: repeat(1, minmax(0, 1fr));
}
.gap-6 {
  gap: 1.5rem;
}
.h-48 {
  height: 12rem;
}
.object-cover {
  object-fit: cover;
}
.rounded-t-2xl {
  border-top-left-radius: 1rem;
  border-top-right-radius: 1rem;
}
.rounded-2xl {
  border-radius: 1rem;
}
.rounded-xl {
  border-radius: 0.75rem;
}
.rounded-full {
  border-radius: 9999px;
}
.line-clamp-2 {
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

@media (min-width: 768px) {
  .md\:grid-cols-3 {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}

/* Cartes Actualités */
.news-card {
  background-color: var(--bg-surface);
  border: 1px solid var(--border-color);
  border-radius: 1rem;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  transition: transform 0.22s ease, box-shadow 0.22s ease, border-color 0.22s ease;
  box-shadow: var(--shadow-sm);
}

.news-card:hover {
  transform: translateY(-3px);
  box-shadow: var(--shadow-md);
  border-color: var(--accent-color);
}

.news-card-img-wrap {
  position: relative;
  width: 100%;
  height: 12rem;
  overflow: hidden;
  background-color: var(--bg-surface-elevated);
}

.news-card-img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.35s ease;
}

.news-card:hover .news-card-img {
  transform: scale(1.04);
}

.news-card-source-tag {
  position: absolute;
  top: 0.75rem;
  left: 0.75rem;
  background: rgba(15, 23, 42, 0.85);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  color: #FFFFFF;
  font-size: 0.72rem;
  font-weight: 700;
  padding: 0.25rem 0.65rem;
  border-radius: 9999px;
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  border: 1px solid rgba(255, 255, 255, 0.2);
  letter-spacing: 0.02em;
}

.news-card-badge-top {
  position: absolute;
  top: 0.75rem;
  right: 0.75rem;
  background: var(--signal-blue);
  color: #FFFFFF;
  font-size: 0.70rem;
  font-weight: 700;
  padding: 0.2rem 0.55rem;
  border-radius: 9999px;
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.25);
}

.news-card-body {
  padding: 1.25rem;
  display: flex;
  flex-direction: column;
  flex: 1;
}

.news-card-meta {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 0.5rem;
  font-size: 0.78rem;
  color: var(--text-muted);
}

.news-card-title {
  font-size: 1.05rem;
  font-weight: 700;
  line-height: 1.35;
  color: var(--text-main);
  margin-bottom: 0.65rem;
}

.news-card-excerpt {
  font-size: 0.875rem;
  line-height: 1.5;
  color: var(--text-muted);
  margin-bottom: 1.25rem;
  flex: 1;
}

.news-card-footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding-top: 0.75rem;
  border-top: 1px solid var(--border-color);
  margin-top: auto;
}

.news-card-link {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  font-size: 0.85rem;
  font-weight: 700;
  color: var(--accent-color);
  text-decoration: none;
  transition: color 0.15s ease, transform 0.15s ease;
}

.news-card-link:hover {
  color: var(--signal-blue-hover);
  transform: translateX(2px);
  text-decoration: underline;
}

/* Skeleton Loaders avec effet shimmer */
@keyframes shimmer {
  0% {
    background-position: -200% 0;
  }
  100% {
    background-position: 200% 0;
  }
}

.news-skeleton-card {
  background-color: var(--bg-surface);
  border: 1px solid var(--border-color);
  border-radius: 1rem;
  overflow: hidden;
}

.skeleton-shimmer,
.skeleton-img,
.skeleton-badge,
.skeleton-line {
  background: linear-gradient(90deg, 
    var(--bg-surface-elevated) 25%, 
    rgba(255, 255, 255, 0.15) 37%, 
    var(--bg-surface-elevated) 63%
  );
  background-size: 400% 100%;
  animation: shimmer 1.5s ease-in-out infinite;
}

body.theme-light .skeleton-shimmer,
body.theme-light .skeleton-img,
body.theme-light .skeleton-badge,
body.theme-light .skeleton-line {
  background: linear-gradient(90deg, 
    #F1F5F9 25%, 
    #E2E8F0 37%, 
    #F1F5F9 63%
  );
  background-size: 400% 100%;
  animation: shimmer 1.5s ease-in-out infinite;
}

.skeleton-img {
  width: 100%;
  height: 12rem;
}

.skeleton-badge {
  display: inline-block;
}

.skeleton-line {
  display: block;
}

/* ==========================================================================
   VUES : MANUELS & RESSOURCES (view-resources) ET MON MBN / PRONOTE (view-portals)
   ========================================================================== */
.resources-hero, .portals-hero {
  margin-bottom: 2rem;
  padding: 2.25rem 2rem;
  background: var(--bg-surface);
  border: 1px solid var(--border-color);
  border-radius: 1.25rem;
  box-shadow: var(--shadow-sm);
  position: relative;
  overflow: hidden;
}

.resources-grid, .portals-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(320px, 1fr));
  gap: 1.5rem;
}

.resource-card, .portal-card {
  background: var(--bg-surface);
  border: 1px solid var(--border-color);
  border-radius: 1rem;
  padding: 1.5rem;
  display: flex;
  flex-direction: column;
  transition: transform 0.2s ease, border-color 0.2s ease, box-shadow 0.2s ease;
  box-shadow: var(--shadow-sm);
  text-decoration: none;
  color: inherit;
}

.resource-card:hover, .portal-card:hover {
  transform: translateY(-3px);
  border-color: var(--accent-color);
  box-shadow: var(--shadow-md);
}

.resource-card-top, .portal-card-top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 1rem;
}

.resource-icon-box, .portal-icon-box {
  width: 48px;
  height: 48px;
  border-radius: 12px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.35rem;
  background: rgba(37, 99, 235, 0.1);
  color: var(--accent-color);
}

.resource-card-title, .portal-card-title {
  font-size: 1.15rem;
  font-weight: 700;
  margin-bottom: 0.5rem;
  color: var(--text-main);
}

.resource-card-desc, .portal-card-desc {
  font-size: 0.88rem;
  line-height: 1.55;
  color: var(--text-muted);
  margin-bottom: 1.25rem;
  flex: 1;
}

.resource-card-action, .portal-card-action {
  display: flex;
  align-items: center;
  justify-content: space-between;
  font-size: 0.85rem;
  font-weight: 700;
  color: var(--accent-color);
  border-top: 1px solid var(--border-color);
  padding-top: 0.85rem;
  margin-top: auto;
}

.resource-tag-pill {
  font-size: 0.72rem;
  font-weight: 600;
  padding: 0.2rem 0.5rem;
  border-radius: 9999px;
  background: var(--bg-surface-elevated);
  color: var(--text-muted);
  border: 1px solid var(--border-color);
}

/* ==========================================================================
   CONSOLE D'ADMINISTRATION MÉTROPOLITAINE & ALERTES FLASH (STYLE PRO)
   ========================================================================== */

/* Bannière d'Alerte Flash Métropole */
.global-broadcast-banner {
  background: linear-gradient(90deg, #1e3a8a, #2563eb);
  color: #ffffff;
  padding: 0.65rem 1.25rem;
  border-bottom: 1px solid rgba(255, 255, 255, 0.2);
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.25);
  animation: slideDownBroadcast 0.3s cubic-bezier(0.16, 1, 0.3, 1);
  position: relative;
  z-index: 99;
}

.global-broadcast-banner.warning {
  background: linear-gradient(90deg, #b45309, #d97706);
}

.global-broadcast-banner.danger {
  background: linear-gradient(90deg, #991b1b, #dc2626);
}

.global-broadcast-banner.success {
  background: linear-gradient(90deg, #065f46, #059669);
}

@keyframes slideDownBroadcast {
  from { transform: translateY(-100%); opacity: 0; }
  to { transform: translateY(0); opacity: 1; }
}

.broadcast-banner-container {
  max-width: 1200px;
  margin: 0 auto;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  flex-wrap: wrap;
}

.broadcast-banner-left {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  flex: 1;
  min-width: 260px;
}

.broadcast-badge {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  background: rgba(255, 255, 255, 0.25);
  backdrop-filter: blur(4px);
  padding: 0.2rem 0.6rem;
  border-radius: 9999px;
  font-size: 0.72rem;
  font-weight: 800;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  white-space: nowrap;
}

.broadcast-message-text {
  font-size: 0.88rem;
  font-weight: 500;
  line-height: 1.4;
  color: #ffffff;
}

.broadcast-banner-right {
  display: flex;
  align-items: center;
  gap: 0.75rem;
}

.broadcast-link-btn {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  padding: 0.25rem 0.75rem;
  background: #ffffff;
  color: #1e3a8a;
  border-radius: 6px;
  font-size: 0.75rem;
  font-weight: 700;
  text-decoration: none;
  transition: all 0.15s ease;
}

.broadcast-link-btn:hover {
  background: #f1f5f9;
  transform: translateY(-1px);
}

.broadcast-close-btn {
  background: transparent;
  border: none;
  color: rgba(255, 255, 255, 0.8);
  font-size: 1rem;
  cursor: pointer;
  padding: 0.25rem 0.5rem;
  border-radius: 4px;
  transition: all 0.15s ease;
}

.broadcast-close-btn:hover {
  background: rgba(255, 255, 255, 0.2);
  color: #ffffff;
}

/* En-tête Console Admin */
.admin-console-wrapper {
  padding-bottom: 4rem;
}

.admin-console-header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 1.5rem;
  margin-bottom: 1.75rem;
  flex-wrap: wrap;
}

.admin-shield-badge {
  display: inline-flex;
  align-items: center;
  gap: 0.45rem;
  padding: 0.25rem 0.75rem;
  background: rgba(16, 185, 129, 0.15);
  border: 1px solid rgba(16, 185, 129, 0.35);
  color: var(--accent-color);
  font-size: 0.72rem;
  font-weight: 800;
  letter-spacing: 0.05em;
  border-radius: 9999px;
  margin-bottom: 0.5rem;
}

.admin-console-h1 {
  font-size: 1.75rem;
  font-weight: 800;
  letter-spacing: -0.02em;
  color: var(--text-main);
  margin-bottom: 0.4rem;
}

.admin-console-sub {
  color: var(--text-muted);
  font-size: 0.92rem;
  max-width: 680px;
  line-height: 1.5;
}

.admin-header-actions {
  display: flex;
  align-items: center;
  gap: 1rem;
  flex-wrap: wrap;
}

.admin-live-pulse-card {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  padding: 0.5rem 1rem;
  background: var(--bg-surface);
  border: 1px solid var(--border-color);
  border-radius: 12px;
  box-shadow: var(--shadow-sm);
}

.pulse-indicator {
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: #10b981;
  box-shadow: 0 0 0 0 rgba(16, 185, 129, 0.7);
  animation: pulseGreen 2s infinite;
}

@keyframes pulseGreen {
  0% { transform: scale(0.95); box-shadow: 0 0 0 0 rgba(16, 185, 129, 0.7); }
  70% { transform: scale(1); box-shadow: 0 0 0 8px rgba(16, 185, 129, 0); }
  100% { transform: scale(0.95); box-shadow: 0 0 0 0 rgba(16, 185, 129, 0); }
}

.pulse-text-group {
  display: flex;
  flex-direction: column;
}

.pulse-label {
  font-size: 0.65rem;
  font-weight: 700;
  letter-spacing: 0.04em;
  color: var(--text-muted);
}

.pulse-value {
  font-size: 0.85rem;
  font-weight: 700;
  color: var(--text-main);
}

/* Barre de Sous-Onglets Linear/Vercel */
.admin-subtabs-nav {
  display: flex;
  align-items: center;
  gap: 0.4rem;
  border-bottom: 1px solid var(--border-color);
  margin-bottom: 2rem;
  overflow-x: auto;
  padding-bottom: 1px;
}

.admin-subtab-btn {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.75rem 1.15rem;
  background: transparent;
  border: none;
  border-bottom: 2px solid transparent;
  color: var(--text-muted);
  font-size: 0.9rem;
  font-weight: 600;
  cursor: pointer;
  white-space: nowrap;
  transition: all 0.2s ease;
  margin-bottom: -1px;
}

.admin-subtab-btn:hover {
  color: var(--text-main);
  background: var(--bg-surface-elevated);
  border-radius: 8px 8px 0 0;
}

.admin-subtab-btn.active {
  color: var(--accent-color);
  border-bottom-color: var(--accent-color);
  font-weight: 700;
}

.admin-subtab-panel {
  display: none;
  animation: fadeInAdmin 0.25s ease-out;
}

.admin-subtab-panel.active {
  display: block;
}

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

.admin-counter-pill {
  padding: 0.15rem 0.5rem;
  background: var(--bg-surface-elevated);
  border: 1px solid var(--border-color);
  border-radius: 9999px;
  font-size: 0.72rem;
  font-weight: 700;
  color: var(--text-main);
}

.admin-counter-pill.danger {
  background: rgba(239, 68, 68, 0.15);
  border-color: rgba(239, 68, 68, 0.35);
  color: #ef4444;
}

/* Grille de KPIs */
.admin-kpis-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  gap: 1rem;
  margin-bottom: 2rem;
}

.admin-kpi-card {
  background: var(--bg-surface);
  border: 1px solid var(--border-color);
  border-radius: 14px;
  padding: 1.25rem;
  display: flex;
  align-items: center;
  gap: 1rem;
  box-shadow: var(--shadow-sm);
  transition: transform 0.2s ease, box-shadow 0.2s ease;
}

.admin-kpi-card:hover {
  transform: translateY(-2px);
  box-shadow: var(--shadow-md);
}

.kpi-icon-wrap {
  width: 48px;
  height: 48px;
  border-radius: 12px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.35rem;
  flex-shrink: 0;
}

.kpi-blue { background: rgba(37, 99, 235, 0.12); color: #3b82f6; }
.kpi-green { background: rgba(16, 185, 129, 0.12); color: #10b981; }
.kpi-purple { background: rgba(139, 92, 246, 0.12); color: #8b5cf6; }
.kpi-amber { background: rgba(245, 158, 11, 0.12); color: #f59e0b; }
.kpi-red { background: rgba(239, 68, 68, 0.12); color: #ef4444; }

.kpi-body {
  display: flex;
  flex-direction: column;
}

.kpi-val {
  font-size: 1.6rem;
  font-weight: 800;
  line-height: 1.2;
  color: var(--text-main);
}

.kpi-title {
  font-size: 0.82rem;
  font-weight: 600;
  color: var(--text-muted);
}

.kpi-sub {
  font-size: 0.72rem;
  color: var(--text-muted);
  margin-top: 0.15rem;
}

/* Split Dashboard */
.admin-dashboard-split {
  display: grid;
  grid-template-columns: 1.2fr 1fr;
  gap: 1.5rem;
}

@media (max-width: 900px) {
  .admin-dashboard-split {
    grid-template-columns: 1fr;
  }
}

.admin-card {
  background: var(--bg-surface);
  border: 1px solid var(--border-color);
  border-radius: 16px;
  box-shadow: var(--shadow-sm);
  overflow: hidden;
}

.admin-card-head {
  padding: 1.25rem 1.5rem;
  border-bottom: 1px solid var(--border-color);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  flex-wrap: wrap;
}

.admin-card-title {
  font-size: 1.05rem;
  font-weight: 700;
  color: var(--text-main);
  display: flex;
  align-items: center;
  gap: 0.5rem;
  margin: 0;
}

.admin-card-body {
  padding: 1.5rem;
}

/* Barres de répartition par Lycée */
.school-distribution-bars {
  display: flex;
  flex-direction: column;
  gap: 1rem;
}

.school-dist-row {
  display: flex;
  flex-direction: column;
  gap: 0.35rem;
}

.school-dist-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-size: 0.85rem;
}

.school-dist-name {
  font-weight: 600;
  color: var(--text-main);
}

.school-dist-count {
  font-size: 0.78rem;
  font-weight: 700;
  color: var(--text-muted);
}

.school-dist-bar-track {
  width: 100%;
  height: 8px;
  background: var(--bg-surface-elevated);
  border-radius: 9999px;
  overflow: hidden;
  border: 1px solid var(--border-color);
}

.school-dist-bar-fill {
  height: 100%;
  background: linear-gradient(90deg, #10b981, #059669);
  border-radius: 9999px;
  transition: width 0.5s ease;
}

/* System health list */
.system-health-list {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: 0.85rem;
}

.system-health-list li {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding-bottom: 0.75rem;
  border-bottom: 1px dashed var(--border-color);
  font-size: 0.86rem;
}

.system-health-list li:last-child {
  border-bottom: none;
  padding-bottom: 0;
}

.health-label {
  color: var(--text-muted);
  display: flex;
  align-items: center;
  gap: 0.5rem;
}

.health-val {
  font-weight: 600;
  color: var(--text-main);
}

/* Toolbar & Filtres Lycéens */
.admin-filter-toolbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  flex-wrap: wrap;
  margin-bottom: 1.5rem;
  background: var(--bg-surface);
  border: 1px solid var(--border-color);
  padding: 1rem 1.25rem;
  border-radius: 14px;
}

.search-input-wrap {
  position: relative;
  flex: 1;
  min-width: 240px;
}

.search-input-wrap i {
  position: absolute;
  left: 1rem;
  top: 50%;
  transform: translateY(-50%);
  color: var(--text-muted);
  pointer-events: none;
}

.search-input-wrap .form-input {
  padding-left: 2.5rem;
  width: 100%;
}

.filter-group {
  display: flex;
  align-items: center;
  gap: 0.65rem;
  flex-wrap: wrap;
}

/* Table des lycéens */
.admin-users-table {
  width: 100%;
  border-collapse: collapse;
  text-align: left;
  font-size: 0.88rem;
}

.admin-users-table th {
  background: var(--bg-surface-elevated);
  padding: 0.85rem 1.25rem;
  color: var(--text-muted);
  font-weight: 700;
  font-size: 0.75rem;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  border-bottom: 1px solid var(--border-color);
}

.admin-users-table td {
  padding: 1rem 1.25rem;
  border-bottom: 1px solid var(--border-color);
  color: var(--text-main);
  vertical-align: middle;
}

.admin-users-table tr:hover td {
  background: rgba(255, 255, 255, 0.02);
}

.user-cell-meta {
  display: flex;
  align-items: center;
  gap: 0.75rem;
}

.user-avatar-circle {
  width: 36px;
  height: 36px;
  border-radius: 50%;
  background: var(--accent-color);
  color: #ffffff;
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: 700;
  font-size: 0.85rem;
  flex-shrink: 0;
}

.user-name-title {
  font-weight: 700;
  color: var(--text-main);
}

.user-email-sub {
  font-size: 0.75rem;
  color: var(--text-muted);
}

.user-action-btns-cell {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 0.4rem;
}

/* Audit Log Feed */
.audit-log-feed {
  display: flex;
  flex-direction: column;
}

.audit-log-item {
  display: flex;
  align-items: flex-start;
  gap: 1rem;
  padding: 1rem 1.5rem;
  border-bottom: 1px solid var(--border-color);
  transition: background 0.15s ease;
}

.audit-log-item:hover {
  background: rgba(255, 255, 255, 0.02);
}

.audit-log-icon {
  width: 32px;
  height: 32px;
  border-radius: 8px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 0.9rem;
  flex-shrink: 0;
}

.audit-log-content {
  flex: 1;
}

.audit-log-desc {
  font-size: 0.86rem;
  color: var(--text-main);
  margin-bottom: 0.2rem;
}

.audit-log-time {
  font-size: 0.72rem;
  color: var(--text-muted);
}

.broadcast-preview-box {
  background: var(--bg-surface-elevated);
  border: 1px dashed var(--border-color);
  border-radius: 12px;
  padding: 1rem;
  margin-top: 1rem;
}

.preview-tag {
  font-size: 0.72rem;
  font-weight: 700;
  color: var(--text-muted);
  text-transform: uppercase;
  margin-bottom: 0.5rem;
}

.admin-danger-actions-row {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  flex-wrap: wrap;
}






/* ==========================================================================
   FICHE DETAILLEE DU LYCEEN (ESPACE ADMINISTRATEUR)
   ========================================================================== */
.modal-user-details-card {
  max-width: 780px;
  width: 95%;
  max-height: 90vh;
  overflow-y: auto;
  padding: 1.75rem;
}

.user-details-hero {
  display: flex;
  align-items: center;
  gap: 1.25rem;
  padding-bottom: 1.25rem;
  border-bottom: 1px solid var(--border-color);
  flex-wrap: wrap;
}

.user-details-avatar-container {
  position: relative;
}

.user-details-avatar {
  width: 68px;
  height: 68px;
  border-radius: 50%;
  background: var(--accent-gradient, linear-gradient(135deg, #3b82f6, #8b5cf6));
  color: #ffffff;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.9rem;
  font-weight: 800;
  box-shadow: 0 4px 14px rgba(0, 0, 0, 0.2);
}

.user-details-role-pill {
  position: absolute;
  bottom: -4px;
  left: 50%;
  transform: translateX(-50%);
  background: var(--bg-surface);
  border: 1px solid var(--border-color);
  font-size: 0.68rem;
  font-weight: 700;
  padding: 2px 8px;
  border-radius: 10px;
  white-space: nowrap;
}

.user-details-hero-meta {
  flex: 1;
  min-width: 220px;
}

.user-details-title-row {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  flex-wrap: wrap;
}

.user-details-username {
  font-size: 1.45rem;
  font-weight: 800;
  color: var(--text-main);
  margin: 0;
}

.user-details-fullname {
  font-size: 0.95rem;
  margin: 0.2rem 0 0.5rem 0;
}

.user-details-quick-tags {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  flex-wrap: wrap;
}

.user-details-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: 1rem;
}

.user-info-card {
  background: var(--bg-surface-elevated, rgba(255, 255, 255, 0.04));
  border: 1px solid var(--border-color);
  border-radius: 12px;
  padding: 1rem;
}

.user-info-card-header {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  margin-bottom: 0.75rem;
  font-size: 0.95rem;
  font-weight: 700;
  color: var(--text-main);
}

.user-info-card-header h4 {
  margin: 0;
  font-size: 0.95rem;
}

.user-info-list {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: 0.45rem;
}

.user-info-list li {
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-size: 0.85rem;
  gap: 0.5rem;
  border-bottom: 1px dashed rgba(255, 255, 255, 0.05);
  padding-bottom: 0.3rem;
}

.user-info-list li:last-child {
  border-bottom: none;
  padding-bottom: 0;
}

.info-label {
  color: var(--text-muted);
  font-size: 0.82rem;
  flex-shrink: 0;
}

.info-value {
  color: var(--text-main);
  font-weight: 600;
  text-align: right;
  word-break: break-word;
}

.user-stats-mini-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 0.6rem;
}

.user-stat-box {
  background: var(--bg-surface, rgba(0, 0, 0, 0.2));
  border: 1px solid var(--border-color);
  border-radius: 8px;
  padding: 0.6rem;
  text-align: center;
}

.user-stat-box .stat-num {
  font-size: 1.3rem;
  font-weight: 800;
  display: block;
  color: var(--text-main);
}

.user-stat-box .stat-lbl {
  font-size: 0.7rem;
  color: var(--text-muted);
  text-transform: uppercase;
}

.user-exclusion-box {
  background: rgba(239, 68, 68, 0.12);
  border: 1px solid rgba(239, 68, 68, 0.4);
  border-radius: 10px;
  padding: 1rem;
  color: #fca5a5;
}

.exclusion-box-header {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  font-weight: 700;
}

.user-details-actions-bar {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 1rem;
  flex-wrap: wrap;
  padding-top: 1rem;
  border-top: 1px solid var(--border-color);
}

.action-btn-group {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  flex-wrap: wrap;
}