:root {
      /* QCMs PNS Unified Palette */
      --primary: #2563eb;
      --primary-hover: #1d4ed8;
      --primary-dark: #1d4ed8;
      --primary-light: rgba(37, 99, 235, 0.08);
      --primary-glass: rgba(37, 99, 235, 0.05);
      --secondary: #06b6d4;
      --accent: #ff6b35;
      --accent2: #f59e0b;
      --success: #10b981;
      --success-hover: #059669;
      --success-light: rgba(16, 185, 129, 0.1);
      --warning: #f59e0b;
      --warning-light: rgba(245, 158, 11, 0.08);
      --danger: #ef4444;
      --error: #ef4444;
      --error-hover: #dc2626;
      --error-light: rgba(239, 68, 68, 0.1);
      --info: #06b6d4;
      --font-main: 'Plus Jakarta Sans', 'Segoe UI', system-ui, sans-serif;
      --font-heading: 'Manrope', sans-serif;
      --font-arabic: 'Noto Naskh Arabic', sans-serif;

      /* Light Theme Variables */
      --bg-app: linear-gradient(135deg, #f1f5f9 0%, #e2e8f0 100%);
      --bg-sidebar: rgba(255, 255, 255, 0.95);
      --bg-card: rgba(255, 255, 255, 0.85);
      --bg-input: #ffffff;
      --text-main: #0f172a;
      --text-muted: #475569;
      --text-inverse: #ffffff;
      --border-color: rgba(148, 163, 184, 0.25);
      --border-focus: rgba(37, 99, 235, 0.5);
      --shadow-sm: 0 2px 8px -1px rgba(15, 23, 42, 0.08);
      --shadow-md: 0 10px 25px -5px rgba(15, 23, 42, 0.1);
      --shadow-lg: 0 20px 40px -15px rgba(15, 23, 42, 0.15);
      --glass-blur: 16px;
      --item-bg-hover: rgba(226, 232, 240, 0.6);
      --option-border: rgba(148, 163, 184, 0.2);
      --option-bg: rgba(255, 255, 255, 0.9);

      /* Legacy compatibility mappings */
      --bg: #f1f5f9;
      --bg2: rgba(255, 255, 255, 0.95);
      --bg3: #f8fafc;
      --bg4: #e2e8f0;
      --card: var(--bg-card);
      --border: var(--border-color);
      --text: var(--text-main);
      --text2: var(--text-muted);
      --text3: #64748b;
      --shadow: var(--shadow-sm);
      --radius: 20px;
      --radius-sm: 99px;
      --transition: 0.2s cubic-bezier(0.4, 0, 0.2, 1);
      --layout-side-gap: 0.5cm;
      --layout-side-gap-mobile: 0.5cm;
      --course-column-gap: 2mm;
    }

    [data-theme="dark"],
    html.dark,
    body.dark {
      /* Dark Theme Variables */
      --bg-app: linear-gradient(135deg, #090d16 0%, #0f172a 100%);
      --bg-sidebar: rgba(15, 23, 42, 0.95);
      --bg-card: rgba(22, 28, 45, 0.75);
      --bg-input: rgba(15, 23, 42, 0.8);
      --text-main: #f8fafc;
      --text-muted: #94a3b8;
      --text-inverse: #0f172a;
      --border-color: rgba(148, 163, 184, 0.12);
      --border-focus: rgba(37, 99, 235, 0.6);
      --shadow-sm: 0 2px 8px -1px rgba(0, 0, 0, 0.3);
      --shadow-md: 0 10px 25px -5px rgba(0, 0, 0, 0.4);
      --shadow-lg: 0 20px 40px -15px rgba(0, 0, 0, 0.5);
      --item-bg-hover: rgba(148, 163, 184, 0.08);
      --option-border: rgba(148, 163, 184, 0.1);
      --option-bg: rgba(30, 41, 59, 0.7);
      --warning-light: rgba(245, 158, 11, 0.15);

      /* Legacy compatibility mappings */
      --bg: #090d16;
      --bg2: rgba(22, 28, 45, 0.85);
      --bg3: rgba(15, 23, 42, 0.9);
      --bg4: #1e293b;
      --card: var(--bg-card);
      --border: var(--border-color);
      --text: var(--text-main);
      --text2: var(--text-muted);
      --text3: #64748b;
      --shadow: var(--shadow-sm);
    }

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

    html {
      scroll-behavior: smooth;
    }

    body {
      font-family: 'Plus Jakarta Sans', system-ui, -apple-system, sans-serif;
      background: var(--bg-app, var(--bg));
      color: var(--text);
      min-height: 100vh;
      overflow-x: hidden;
    }

    ::-webkit-scrollbar {
      width: 6px;
      height: 6px;
    }

    ::-webkit-scrollbar-track {
      background: var(--bg2);
    }

    ::-webkit-scrollbar-thumb {
      background: var(--primary);
      border-radius: 3px;
    }

    /* ===== LAYOUT ===== */
    #app {
      display: flex;
      min-height: 100vh;
      overflow-x: hidden;
      position: relative;
    }

    .sidebar {
      width: 280px !important;
      min-width: 280px !important;
      max-width: 280px !important;
      min-height: 100dvh !important;
      height: 100dvh !important;
      max-height: 100dvh !important;
      background: var(--bg2);
      border-right: 1px solid var(--border);
      display: flex !important;
      flex-direction: column !important;
      position: fixed !important;
      left: 0 !important;
      top: 0 !important;
      bottom: 0 !important;
      z-index: 100 !important;
      transition: var(--transition);
      overflow-y: auto !important;
      overscroll-behavior: contain;
      padding: 20px 14px;
      box-sizing: border-box;
    }

    .sidebar.collapsed,
    body.sidebar-collapsed .sidebar {
      width: 76px !important;
      min-width: 76px !important;
      max-width: 76px !important;
    }

    .main-content {
      margin-left: 280px !important;
      width: calc(100% - 280px) !important;
      max-width: calc(100% - 280px) !important;
      flex: 1 1 auto;
      min-width: 0;
      padding-inline: var(--layout-side-gap);
      display: flex;
      flex-direction: column;
      transition: var(--transition);
      box-sizing: border-box;
    }

    .sidebar.collapsed ~ .main-content,
    body.sidebar-collapsed .main-content,
    .main-content.expanded {
      margin-left: 76px !important;
      width: calc(100% - 76px) !important;
      max-width: calc(100% - 76px) !important;
    }

    /* ===== SIDEBAR ===== */
    .sidebar-logo {
      padding: 20px 16px;
      display: flex;
      align-items: center;
      gap: 12px;
      border-bottom: 1px solid var(--border);
    }

    .sidebar-logo .logo-icon {
      width: 40px;
      height: 40px;
      background: linear-gradient(135deg, var(--primary), var(--secondary));
      border-radius: 10px;
      display: flex;
      align-items: center;
      justify-content: center;
      font-size: 20px;
      flex-shrink: 0;
      overflow: hidden;
    }

    .sidebar-logo .logo-icon img {
      width: 100%;
      height: 100%;
      object-fit: cover;
      display: block;
    }

    .sidebar-brand-block {
      flex: 1;
      min-width: 0;
      display: flex;
      align-items: flex-start;
      justify-content: space-between;
      gap: 10px;
    }

    .sidebar-brand-copy {
      min-width: 0;
    }

    .sidebar-logo .logo-text {
      font-size: 18px;
      font-weight: 700;
      color: var(--text);
      white-space: nowrap;
      overflow: hidden;
    }

    .sidebar-logo .logo-sub {
      font-size: 11px;
      color: var(--text2);
      white-space: nowrap;
    }

    .sidebar-brand-tools {
      display: inline-flex;
      align-items: center;
      gap: 6px;
      flex-shrink: 0;
    }

    .theme-toggle-btn {
      width: 24px;
      height: 24px;
      border-radius: 8px;
      border: 1px solid var(--border);
      background: var(--bg3);
      color: var(--text2);
      cursor: pointer;
      display: flex;
      align-items: center;
      justify-content: center;
      transition: var(--transition);
      flex-shrink: 0;
    }

    .theme-toggle-btn i {
      font-size: 10px;
    }

    .theme-toggle-btn:hover {
      border-color: var(--primary);
      color: var(--primary);
      transform: translateY(-1px);
    }

    .sidebar-tool-btn {
      width: 24px;
      height: 24px;
      border-radius: 8px;
      border: 1px solid var(--border);
      background: var(--bg3);
      color: var(--text2);
      cursor: pointer;
      display: inline-flex;
      align-items: center;
      justify-content: center;
      transition: var(--transition);
      flex-shrink: 0;
    }

    .sidebar-tool-btn:hover {
      border-color: var(--primary);
      color: var(--primary);
      transform: translateY(-1px);
    }

    .sidebar-tool-btn i {
      font-size: 10px;
    }

    .sidebar.collapsed .sidebar-brand-copy {
      opacity: 0;
      width: 0;
      overflow: hidden;
    }

    .sidebar.collapsed .sidebar-brand-block {
      justify-content: center;
    }

    .sidebar.collapsed .sidebar-logo {
      flex-direction: column;
      align-items: center;
      padding-inline: 10px;
      gap: 8px;
    }

    .sidebar.collapsed .sidebar-brand-tools {
      flex-direction: column;
    }

    .sidebar-nav {
      flex: none;
      min-height: 0;
      padding: 0 0 18px;
      overflow: visible;
    }

    .nav-section-title {
      font-size: 10px;
      font-weight: 700;
      color: var(--text3);
      text-transform: uppercase;
      letter-spacing: 1.5px;
      padding: 8px 8px 4px;
      white-space: nowrap;
      overflow: hidden;
      transition: var(--transition);
    }

    .sidebar.collapsed .nav-section-title {
      opacity: 0;
      height: 0;
      padding: 0;
    }

    .nav-item {
      display: flex;
      align-items: center;
      gap: 12px;
      padding: 10px 12px;
      border-radius: var(--radius-sm);
      cursor: pointer;
      transition: var(--transition);
      margin-bottom: 2px;
      text-decoration: none;
      color: var(--text2);
      white-space: nowrap;
      border: none;
      background: none;
      width: 100%;
    }

    .nav-item:hover {
      background: var(--bg3);
      color: var(--text);
    }

    .nav-item.active {
      background: linear-gradient(135deg, rgba(108, 99, 255, 0.2), rgba(0, 212, 170, 0.1));
      color: var(--primary);
      border-left: 3px solid var(--primary);
    }

    .nav-item i {
      font-size: 16px;
      width: 20px;
      text-align: center;
      flex-shrink: 0;
    }

    .nav-item-text {
      overflow: hidden;
      transition: var(--transition);
    }

    .sidebar.collapsed .nav-item-text {
      opacity: 0;
      width: 0;
    }

    .sidebar-footer {
      flex: 0 0 auto;
      padding: 16px 12px calc(16px + env(safe-area-inset-bottom));
      border-top: 1px solid var(--border);
      overflow: visible;
    }

    .collapse-btn {
      display: flex;
      align-items: center;
      justify-content: center;
      gap: 8px;
      padding: 10px;
      border-radius: var(--radius-sm);
      cursor: pointer;
      color: var(--text2);
      border: none;
      background: var(--bg3);
      width: 100%;
      transition: var(--transition);
    }

    .collapse-btn:hover {
      color: var(--text);
      background: var(--bg4);
    }

    .mobile-bottom-nav {
      display: none;
      position: fixed;
      left: 0;
      right: 0;
      bottom: 0;
      z-index: 140;
      min-height: calc(1cm + env(safe-area-inset-bottom));
      padding: 4px 8px calc(4px + env(safe-area-inset-bottom));
      background: rgba(255, 255, 255, 0.98);
      border-top: 1px solid rgba(148, 163, 184, 0.24);
      box-shadow: 0 -12px 28px rgba(15, 23, 42, 0.08);
    }

    .mobile-bottom-nav-grid {
      display: flex;
      align-items: center;
      justify-content: center;
      gap: 8px;
      overflow-x: visible;
      overflow-y: hidden;
      scrollbar-width: none;
      -ms-overflow-style: none;
      padding: 0;
      margin: 0 auto;
      width: fit-content;
      max-width: 100%;
    }

    .mobile-bottom-nav-grid::-webkit-scrollbar {
      display: none;
    }

    .bottom-nav-item {
      display: inline-flex;
      flex: 0 0 auto;
      flex-direction: row;
      align-items: center;
      justify-content: center;
      gap: 0;
      width: 28px;
      min-width: 28px;
      max-width: 28px;
      min-height: 28px;
      height: 28px;
      border: none;
      border-radius: 50%;
      background: #000000;
      color: #ffffff;
      cursor: pointer;
      transition: all 0.2s ease;
      padding: 0;
      box-shadow: 0 2px 4px rgba(0, 0, 0, 0.15);
    }

    .bottom-nav-item:hover,
    .bottom-nav-item:active {
      background: #1a1a1a;
      transform: scale(1.05);
      box-shadow: 0 3px 8px rgba(0, 0, 0, 0.25);
    }

    .bottom-nav-item i {
      font-size: 14px;
      color: #ffffff;
    }

    .bottom-nav-item img {
      pointer-events: none;
      width: 12px !important;
      height: 12px !important;
      object-fit: contain;
      filter: brightness(0) invert(1);
    }

    [data-theme="dark"] .mobile-bottom-nav {
      background: rgba(15, 23, 42, 0.98);
    }

    [data-theme="dark"] .bottom-nav-item {
      background: #ffffff;
      color: #000000;
    }

    [data-theme="dark"] .bottom-nav-item:hover,
    [data-theme="dark"] .bottom-nav-item:active {
      background: #e5e5e5;
      transform: scale(1.05);
    }

    [data-theme="dark"] .bottom-nav-item i {
      color: #000000;
    }

    [data-theme="dark"] .bottom-nav-item img {
      filter: none;
    }

    .bottom-nav-label {
      display: none;
    }

    .bottom-nav-tool {
      min-height: 42px;
    }

    /* ===== TOPBAR ===== */
    .topbar {
      display: none !important;
      height: 0 !important;
      min-height: 0 !important;
      padding: 0 !important;
      margin: 0 !important;
      border: none !important;
    }

    .topbar-main-row {
      display: flex;
      align-items: center;
      gap: 16px;
      min-width: 0;
    }

    .topbar-subject {
      display: flex;
      align-items: center;
      gap: 12px;
      flex-shrink: 0;
    }

    .topbar-subject-img {
      width: 40px;
      height: 40px;
      border-radius: 13px;
      object-fit: cover;
      flex-shrink: 0;
      cursor: pointer;
      background: var(--bg-input);
      border: 1px solid var(--border-color);
      box-shadow: 0 1px 4px rgba(15, 23, 42, 0.12);
      transition: transform 0.15s ease, box-shadow 0.15s ease;
    }

    .topbar-subject-img:hover {
      transform: translateY(-1px);
      box-shadow: 0 3px 8px rgba(15, 23, 42, 0.18);
    }

    .topbar-subject-img-placeholder {
      width: 40px;
      height: 40px;
      border-radius: 13px;
      background: linear-gradient(135deg, var(--primary), var(--secondary));
      display: inline-flex;
      align-items: center;
      justify-content: center;
      flex-shrink: 0;
      font-size: 16px;
      cursor: pointer;
      border: none;
      box-shadow: 0 1px 4px rgba(15, 23, 42, 0.12);
      overflow: hidden;
    }

    .topbar-subject-img-placeholder img {
      width: 100%;
      height: 100%;
      object-fit: cover;
      display: block;
      border-radius: inherit;
    }

    .topbar-subject-info {
      display: flex;
      flex-direction: column;
    }

    .topbar-subject-name {
      font-size: 15px;
      font-weight: 700;
      color: var(--text);
    }

    .topbar-subject-meta {
      font-size: 11px;
      color: var(--text2);
    }

    .topbar-speciality-wrap {
      display: flex;
      align-items: center;
      gap: 10px;
      min-width: 0;
      flex: 1;
    }

    .topbar-speciality-tabs {
      display: inline-flex;
      align-items: center;
      background: var(--border-color);
      padding: 4px;
      border-radius: 99px;
      gap: 2px;
      border: 1px solid var(--border-color);
      max-width: 100%;
    }

    .spec-switch-btn {
      padding: 7px 16px;
      border-radius: 99px;
      border: none;
      background: transparent;
      color: var(--text-muted);
      cursor: pointer;
      font-size: 12.5px;
      font-weight: 700;
      transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
      white-space: nowrap;
      display: inline-flex;
      align-items: center;
      gap: 7px;
      user-select: none;
    }

    .spec-switch-btn:hover {
      color: var(--text-main);
      background: rgba(255, 255, 255, 0.25);
    }

    [data-theme="dark"] .spec-switch-btn:hover {
      background: rgba(255, 255, 255, 0.08);
    }

    .spec-switch-btn.active {
      background: var(--bg-input);
      color: var(--primary) !important;
      box-shadow: var(--shadow-sm);
      font-weight: 800;
    }

    .spec-switch-btn i {
      font-size: 13px;
    }

    @media (max-width: 640px) {
      .spec-switch-btn .tab-label {
        display: none;
      }
      .spec-switch-btn {
        padding: 7px 12px;
      }
    }

    .topbar-theme-toggle {
      display: none;
      width: 32px;
      height: 32px;
      min-width: 32px;
      padding: 0;
      border-radius: 8px;
      background: var(--bg-input);
      border: 1px solid var(--border-color);
      color: var(--text-muted);
      box-shadow: var(--shadow-sm);
    }

    .topbar-theme-toggle i {
      font-size: 12px;
    }

    .topbar-search-wrap {
      display: none;
      flex: 1;
      min-width: 200px;
    }

    .topbar-search-wrap.active {
      display: block;
    }

    .topbar-search {
      position: relative;
      display: flex;
      align-items: center;
      width: 100%;
    }

    .topbar-search i {
      position: absolute;
      left: 14px;
      color: var(--text-muted);
      font-size: 13px;
      pointer-events: none;
    }

    .topbar-search input {
      width: 100%;
      padding: 9px 14px 9px 38px;
      border-radius: 99px;
      border: 1px solid var(--border-color);
      background: var(--bg-input);
      color: var(--text-main);
      font-size: 12.5px;
      font-weight: 600;
      outline: none;
      box-shadow: var(--shadow-sm);
      transition: all 0.2s ease;
    }

    .topbar-search input:focus {
      border-color: var(--primary);
      box-shadow: 0 0 0 3px var(--primary-light);
    }

    .topbar-filter-row {
      display: none;
      width: 100%;
      align-items: center;
      gap: 8px;
      flex-wrap: wrap;
      min-width: 0;
      margin-top: 4px;
    }

    .topbar-filter-row.active {
      display: flex;
    }

    .topbar-filter-scroll {
      display: flex;
      align-items: center;
      gap: 6px;
      flex-wrap: wrap;
    }

    .filter-btn, .dropdown-toggle {
      display: inline-flex;
      align-items: center;
      gap: 6px;
      padding: 6px 13px;
      border-radius: 99px;
      border: 1px solid var(--border-color);
      background: var(--bg-input);
      color: var(--text-main);
      font-size: 11.5px;
      font-weight: 700;
      cursor: pointer;
      transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
      white-space: nowrap;
      box-shadow: var(--shadow-sm);
      user-select: none;
    }

    .filter-btn:hover, .dropdown-toggle:hover {
      border-color: var(--primary);
      background: var(--primary-light);
      color: var(--primary);
      transform: translateY(-1px);
    }

    .filter-btn.active, .filter-btn.has-value, .custom-dropdown.open .dropdown-toggle {
      border-color: var(--primary);
      background: var(--primary-light);
      color: var(--primary);
      box-shadow: 0 2px 8px rgba(37, 99, 235, 0.2);
    }

    .filter-btn span, .dropdown-toggle span {
      color: var(--primary);
      font-weight: 800;
      /* Le texte ne doit jamais sortir de sa case */
      overflow: hidden;
      text-overflow: ellipsis;
      white-space: nowrap;
      min-width: 0;
    }

    .filter-btn i, .dropdown-toggle i {
      font-size: 10px;
      color: var(--text-muted);
      transition: transform 0.2s ease;
    }

    .filter-dropdown.open .filter-btn i.fa-chevron-down {
      transform: rotate(180deg);
    }

    /* ===== FILTER CHIPS : BLANC EN MODE JOUR / SOMBRE EN MODE NUIT ===== */
    .topbar-filter-row .filter-btn,
    body.theme-light .topbar-filter-row .filter-btn,
    body:not(.theme-dark) .topbar-filter-row .filter-btn {
      background: #ffffff !important;
      border: 1px solid #e2e8f0 !important;
      color: #1e293b !important;
      box-shadow: 0 1px 3px rgba(0, 0, 0, 0.04) !important;
      transition: all 0.2s ease !important;
    }

    .topbar-filter-row .filter-btn span,
    .topbar-filter-row .filter-btn .filter-count,
    body.theme-light .topbar-filter-row .filter-btn span,
    body.theme-light .topbar-filter-row .filter-btn .filter-count,
    body:not(.theme-dark) .topbar-filter-row .filter-btn span,
    body:not(.theme-dark) .topbar-filter-row .filter-btn .filter-count {
      color: #1e293b !important;
    }

    .topbar-filter-row .filter-btn i,
    body.theme-light .topbar-filter-row .filter-btn i,
    body:not(.theme-dark) .topbar-filter-row .filter-btn i {
      color: #64748b !important;
    }

    .topbar-filter-row .filter-btn:hover,
    .topbar-filter-row .filter-btn:active,
    body.theme-light .topbar-filter-row .filter-btn:hover,
    body:not(.theme-dark) .topbar-filter-row .filter-btn:hover {
      background: #f8fafc !important;
      border-color: #cbd5e1 !important;
      color: #0f172a !important;
      transform: translateY(-1px);
    }

    .topbar-filter-row .filter-btn:hover i,
    body.theme-light .topbar-filter-row .filter-btn:hover i,
    body:not(.theme-dark) .topbar-filter-row .filter-btn:hover i {
      color: #3b82f6 !important;
    }

    .topbar-filter-row .filter-btn.has-value,
    .topbar-filter-row .filter-btn.active,
    body.theme-light .topbar-filter-row .filter-btn.has-value,
    body:not(.theme-dark) .topbar-filter-row .filter-btn.has-value {
      background: #eff6ff !important;
      border-color: #93c5fd !important;
      color: #1d4ed8 !important;
      box-shadow: 0 0 0 2px rgba(59, 130, 246, 0.15) !important;
    }

    .topbar-filter-row .filter-btn.has-value span,
    .topbar-filter-row .filter-btn.has-value .filter-count,
    .topbar-filter-row .filter-btn.has-value i,
    body.theme-light .topbar-filter-row .filter-btn.has-value span,
    body:not(.theme-dark) .topbar-filter-row .filter-btn.has-value span {
      color: #1d4ed8 !important;
    }

    /* Dark Mode Filter Chips */
    body.theme-dark .topbar-filter-row .filter-btn {
      background: #181d2f !important;
      border-color: rgba(255, 255, 255, 0.12) !important;
      color: #f1f5f9 !important;
      box-shadow: 0 1px 3px rgba(0, 0, 0, 0.2) !important;
    }

    body.theme-dark .topbar-filter-row .filter-btn span,
    body.theme-dark .topbar-filter-row .filter-btn .filter-count {
      color: #f1f5f9 !important;
    }

    body.theme-dark .topbar-filter-row .filter-btn i {
      color: rgba(255, 255, 255, 0.65) !important;
    }

    body.theme-dark .topbar-filter-row .filter-btn:hover {
      background: #232b43 !important;
      border-color: rgba(255, 255, 255, 0.25) !important;
    }

    body.theme-dark .topbar-filter-row .filter-btn.has-value,
    body.theme-dark .topbar-filter-row .filter-btn.active {
      background: rgba(37, 99, 235, 0.2) !important;
      border-color: #3b82f6 !important;
      color: #60a5fa !important;
      box-shadow: 0 0 0 2px rgba(59, 130, 246, 0.25) !important;
    }

    body.theme-dark .topbar-filter-row .filter-btn.has-value span,
    body.theme-dark .topbar-filter-row .filter-btn.has-value .filter-count,
    body.theme-dark .topbar-filter-row .filter-btn.has-value i {
      color: #60a5fa !important;
    }

    .topbar-actions {
      display: flex;
      gap: 8px;
      flex-shrink: 0;
    }

    .btn-icon {
      width: 38px;
      height: 38px;
      border-radius: 10px;
      border: 1px solid var(--border);
      background: var(--bg3);
      color: var(--text2);
      cursor: pointer;
      display: flex;
      align-items: center;
      justify-content: center;
      transition: var(--transition);
      font-size: 14px;
    }

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

    .btn-primary {
      display: flex;
      align-items: center;
      gap: 8px;
      padding: 8px 16px;
      border-radius: 10px;
      background: linear-gradient(135deg, var(--primary), var(--primary-dark));
      color: white;
      border: none;
      cursor: pointer;
      font-size: 13px;
      font-weight: 600;
      transition: var(--transition);
    }

    .btn-primary:hover {
      opacity: 0.9;
      transform: translateY(-1px);
      box-shadow: 0 4px 15px rgba(108, 99, 255, 0.4);
    }

    /* ===== TOPBAR STATS ===== */
    .topbar-stats {
      display: flex;
      gap: 8px;
      flex-shrink: 0;
    }

    .stat-chip {
      display: flex;
      align-items: center;
      gap: 6px;
      padding: 5px 12px;
      border-radius: 99px;
      background: var(--bg-input);
      border: 1px solid var(--border-color);
      box-shadow: var(--shadow-sm);
      font-size: 11.5px;
      font-weight: 700;
    }

    .stat-chip .stat-val {
      font-weight: 800;
      color: var(--primary);
    }

    .stat-chip .stat-lbl {
      color: var(--text-muted);
      font-weight: 600;
    }

    /* ===== PAGE CONTENT ===== */
    .page-content {
      flex: 1;
      padding: 16px 0 0 0;
      overflow-y: auto;
    }

    .page {
      display: none;
      min-width: 0;
      width: 100%;
    }

    .page>* {
      width: 100%;
      max-width: 100%;
      min-width: 0;
    }

    .page.active {
      display: block;
      animation: pnsPageFade 0.14s ease-out;
    }

    @keyframes pnsPageFade {
      from { opacity: 0.85; transform: translateY(2px); }
      to { opacity: 1; transform: translateY(0); }
    }

    /* ===== HERO BANNER (Compact Single-Row Layout) ===== */
    .hero-select {
      display: flex;
      align-items: center;
      justify-content: space-between;
      flex-wrap: wrap;
      gap: 16px;
      background: var(--bg-card);
      border-radius: 16px;
      padding: 14px 20px;
      margin-bottom: 14px;
      border: 1px solid var(--border-color);
      box-shadow: var(--shadow-sm);
    }

    .hero-copy {
      display: flex;
      flex-direction: column;
      gap: 3px;
      min-width: 220px;
    }

    .hero-title {
      font-family: var(--font-heading);
      font-size: 20px;
      font-weight: 850;
      letter-spacing: -0.3px;
      color: var(--text-main);
      line-height: 1.2;
      margin-bottom: 0;
    }

    .hero-sub {
      color: var(--text-muted);
      font-size: 12px;
      font-weight: 500;
      line-height: 1.3;
      margin-bottom: 0;
    }

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

    .spec-card {
      background: var(--bg-input);
      border: 1px solid var(--border-color);
      border-radius: 10px;
      padding: 6px 12px;
      text-align: center;
      box-shadow: var(--shadow-sm);
      position: relative;
      overflow: hidden;
      display: flex;
      align-items: center;
      gap: 8px;
      transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
      cursor: pointer;
      user-select: none;
    }

    .spec-card:hover {
      transform: translateY(-1px);
      box-shadow: var(--shadow-md);
      border-color: var(--primary);
    }

    .spec-card.active {
      border-color: var(--primary);
    }

    .spec-card::after {
      content: '';
      position: absolute;
      bottom: 0;
      left: 0;
      right: 0;
      height: 2.5px;
      background: var(--primary);
      transition: background 0.2s ease;
    }

    #catalog-years-card::after { background: #2563eb; }
    #catalog-modules-card::after { background: #06b6d4; }
    #catalog-groups-card::after { background: #10b981; }
    #catalog-lessons-card::after { background: #ff6b35; }

    .spec-card .spec-icon {
      width: 26px;
      height: 26px;
      border-radius: 50%;
      background: var(--primary-light);
      color: var(--primary);
      display: flex;
      align-items: center;
      justify-content: center;
      font-size: 12px;
      margin-bottom: 0;
      flex-shrink: 0;
    }

    .spec-card .spec-name {
      font-family: var(--font-heading);
      font-size: 13px;
      font-weight: 800;
      color: var(--text-main);
      line-height: 1.2;
      margin-bottom: 0;
      white-space: nowrap;
    }

    /* ===== YEAR SELECT TABS (Segmented Pill Design like QCMs PNS) ===== */
    .year-select-container {
      margin-top: 10px;
      margin-bottom: 16px;
      display: flex;
      flex-direction: column;
      gap: 6px;
    }

    .year-select-container .form-label {
      font-size: 11.5px;
      font-weight: 700;
      text-transform: uppercase;
      letter-spacing: 0.5px;
      color: var(--text-muted);
      margin-bottom: 2px;
    }

    .year-select {
      display: inline-flex;
      align-items: center;
      background: var(--border-color, #e2e8f0);
      padding: 4px;
      border-radius: 99px;
      gap: 3px;
      width: fit-content;
      max-width: 100%;
      overflow-x: auto;
    }

    [data-theme="dark"] .year-select {
      background: rgba(255, 255, 255, 0.08);
      border: 1px solid rgba(255, 255, 255, 0.06);
    }

    .year-btn {
      padding: 7px 16px;
      font-size: 12.5px;
      font-family: 'Manrope', 'Plus Jakarta Sans', sans-serif;
      font-weight: 500;
      border-radius: 99px;
      border: none;
      background: transparent;
      color: var(--text-muted);
      white-space: nowrap;
      display: inline-flex;
      align-items: center;
      gap: 7px;
      cursor: pointer;
      transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
      user-select: none;
    }

    .year-btn:hover {
      color: var(--text-main);
      background: rgba(255, 255, 255, 0.12);
    }

    .year-btn.active {
      background: var(--bg-card, #ffffff);
      color: var(--primary, #2563eb) !important;
      box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);
      font-weight: 600;
    }

    [data-theme="dark"] .year-btn.active {
      background: var(--bg-card, #1e293b);
      color: #60a5fa !important;
      box-shadow: 0 2px 8px rgba(0, 0, 0, 0.3);
    }

    .year-btn i {
      font-size: 12px;
    }

    /* ===== MODULE CARDS ===== */
    .section-title {
      font-size: 20px;
      font-weight: 700;
      color: var(--text);
      display: flex;
      align-items: center;
      gap: 10px;
    }

    .section-title .badge {
      font-size: 11px;
      padding: 3px 8px;
      border-radius: 12px;
      background: rgba(108, 99, 255, 0.15);
      color: var(--primary);
      font-weight: 600;
    }

    .modules-inline-section {
      margin-top: 20px;
      border-top: 1px solid var(--border);
      padding-top: 18px;
    }

    .modules-inline-header {
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: 12px;
      margin-bottom: 12px;
      flex-wrap: wrap;
    }

    .modules-grid {
      display: grid !important;
      grid-template-columns: repeat(auto-fill, minmax(min(100%, 280px), 1fr)) !important;
      gap: 14px !important;
      width: 100% !important;
    }

    body.suivi-app .module-card,
    .module-card {
      background: var(--card) !important;
      border: 1px solid var(--border) !important;
      border-radius: 18px !important;
      cursor: pointer !important;
      transition: var(--transition) !important;
      position: relative !important;
      display: flex !important;
      flex-direction: column !important;
      align-items: stretch !important;
      padding: clamp(12px, 1.2vw, 16px) !important;
      min-width: 0 !important;
      gap: 12px !important;
      container-type: inline-size !important;
      container-name: modulecard !important;
      box-sizing: border-box !important;
      overflow: hidden !important;
      box-shadow: var(--shadow-sm, 0 2px 8px rgba(0,0,0,0.04)) !important;
    }

    body.suivi-app .module-card:hover,
    .module-card:hover {
      transform: translateY(-2px) !important;
      box-shadow: var(--shadow) !important;
      border-color: var(--primary) !important;
    }
    
    .module-card-main {
      display: flex !important;
      align-items: center !important;
      gap: clamp(10px, 1.2vw, 14px) !important;
      width: 100% !important;
      min-width: 0 !important;
    }

    .module-avatar {
      width: clamp(48px, 16cqi, 58px) !important;
      height: clamp(48px, 16cqi, 58px) !important;
      min-width: clamp(48px, 16cqi, 58px) !important;
      min-height: clamp(48px, 16cqi, 58px) !important;
      border-radius: clamp(13px, 4cqi, 16px) !important;
      overflow: hidden !important;
      flex-shrink: 0 !important;
      border: 2px solid rgba(108, 99, 255, 0.22) !important;
      display: flex !important;
      align-items: center !important;
      justify-content: center !important;
      background: linear-gradient(135deg, var(--bg3), var(--bg4)) !important;
      cursor: pointer !important;
      box-shadow: 0 8px 20px rgba(108, 99, 255, 0.12) !important;
      transition: transform 0.2s ease !important;
    }

    .module-card .module-img {
      width: 100% !important;
      height: 100% !important;
      object-fit: cover !important;
      display: block !important;
    }

    .module-card .module-img-placeholder {
      width: 100% !important;
      height: 100% !important;
      background: linear-gradient(135deg, var(--bg3), var(--bg4)) !important;
      display: flex !important;
      align-items: center !important;
      justify-content: center !important;
      font-size: 22px !important;
    }

    .module-card .module-body {
      min-width: 0 !important;
      flex: 1 !important;
      display: flex !important;
      flex-direction: column !important;
      justify-content: center !important;
      gap: 8px !important;
    }
    
    .module-header-row {
      display: flex !important;
      align-items: flex-start !important;
      justify-content: space-between !important;
      gap: 8px !important;
      width: 100% !important;
      min-width: 0 !important;
    }
    
    .module-copy {
      min-width: 0 !important;
      flex: 1 !important;
    }

    .module-card .module-name {
      font-size: clamp(13.5px, 1.1vw + 10px, 16px) !important;
      font-weight: 800 !important;
      color: var(--text) !important;
      margin: 0 !important;
      line-height: 1.25 !important;
      white-space: normal !important;
      word-break: normal !important;
      overflow-wrap: break-word !important;
      hyphens: auto !important;
      flex: 1 !important;
      min-width: 0 !important;
      display: -webkit-box !important;
      -webkit-line-clamp: 2 !important;
      -webkit-box-orient: vertical !important;
      overflow: visible !important;
      letter-spacing: -0.2px !important;
    }
    
    .module-progress-row {
      display: flex !important;
      align-items: center !important;
      gap: 8px !important;
      width: 100% !important;
      min-width: 0 !important;
    }
    
    .module-actions {
      display: flex !important;
      align-items: center !important;
      gap: 6px !important;
      flex-shrink: 0 !important;
    }

    .module-action-btn {
      width: 28px !important;
      height: 28px !important;
      border-radius: 8px !important;
      border: 1px solid var(--border) !important;
      background: var(--bg2) !important;
      color: var(--text2) !important;
      cursor: pointer !important;
      display: flex !important;
      align-items: center !important;
      justify-content: center !important;
      font-size: 12px !important;
      transition: var(--transition) !important;
      flex-shrink: 0 !important;
    }
    
    .module-action-btn:hover {
      background: var(--bg3) !important;
      border-color: var(--primary) !important;
      color: var(--primary) !important;
      transform: translateY(-1px) !important;
    }
    
    .module-action-btn.danger:hover {
      background: rgba(239, 68, 68, 0.1) !important;
      border-color: var(--danger) !important;
      color: var(--danger) !important;
    }

    .module-card .module-progress {
      flex: 1 !important;
      display: flex !important;
      align-items: center !important;
      gap: 8px !important;
      min-width: 0 !important;
    }

    .progress-bar-wrap {
      flex: 1 !important;
      background: rgba(148, 163, 184, 0.18) !important;
      border: 1px solid rgba(148, 163, 184, 0.38) !important;
      border-radius: 100px !important;
      height: 8px !important;
      overflow: hidden !important;
      box-shadow: inset 0 1px 2px rgba(15, 23, 42, 0.14) !important;
      min-width: 24px !important;
    }

    .progress-bar {
      height: 100% !important;
      border-radius: 100px !important;
      background: linear-gradient(90deg, var(--primary), var(--secondary)) !important;
      transition: width 0.5s ease !important;
    }

    .progress-percentage {
      font-size: clamp(10.5px, 0.9vw + 1px, 12px) !important;
      font-weight: 700 !important;
      color: var(--text2) !important;
      min-width: 28px !important;
      text-align: right !important;
      flex-shrink: 0 !important;
    }

    .progress-label {
      display: none !important;
    }
    
    .module-card-footer {
      display: flex !important;
      align-items: center !important;
      justify-content: space-between !important;
      gap: clamp(4px, 1.5cqi, 10px) !important;
      padding-top: 10px !important;
      border-top: 1px solid var(--border) !important;
      font-size: clamp(10.5px, 0.9vw + 2px, 12px) !important;
      color: var(--text2) !important;
      width: 100% !important;
      box-sizing: border-box !important;
      flex-wrap: nowrap !important;
    }
    
    .module-card-footer span {
      display: inline-flex !important;
      align-items: center !important;
      gap: clamp(3px, 1.2cqi, 5px) !important;
      white-space: nowrap !important; /* CRITICAL: Never breaks "37 cours" or "6 groupes" */
      flex-shrink: 0 !important;
      font-size: inherit !important;
      font-weight: 600 !important;
      letter-spacing: -0.15px !important;
      line-height: 1 !important;
    }
    
    .module-card-footer i {
      font-size: clamp(11.5px, 0.9vw + 3px, 13px) !important;
      color: var(--text3) !important;
      flex-shrink: 0 !important;
      display: inline-block !important;
    }

    /* Container Queries for micro-responsiveness at every card width */
    @container modulecard (max-width: 285px) {
      body.suivi-app .module-card,
      .module-card {
        padding: 12px 13px !important;
        gap: 10px !important;
      }
      .module-card-main {
        gap: 10px !important;
      }
      .module-avatar {
        width: 46px !important;
        height: 46px !important;
        min-width: 46px !important;
        min-height: 46px !important;
        border-radius: 12px !important;
      }
      .module-card .module-name {
        font-size: 13.5px !important;
        line-height: 1.2 !important;
      }
      .module-card-footer {
        padding-top: 8px !important;
        font-size: 10.5px !important;
        gap: 3px !important;
      }
      .module-card-footer span {
        gap: 3.5px !important;
        font-size: 10.5px !important;
      }
      .module-card-footer i {
        font-size: 11px !important;
      }
    }

    @container modulecard (min-width: 360px) {
      body.suivi-app .module-card,
      .module-card {
        padding: 16px 18px !important;
      }
      .module-avatar {
        width: 60px !important;
        height: 60px !important;
        min-width: 60px !important;
        min-height: 60px !important;
      }
      .module-card .module-name {
        font-size: 16px !important;
      }
      .module-card-footer {
        font-size: 12px !important;
        gap: 10px !important;
      }
      .module-card-footer i {
        font-size: 13px !important;
      }
    }

    .module-card .module-meta {
      display: none !important;
    }
    
    /* Emoji styling for light/dark modes (filter removed: no-op grayscale hurts perf) */

    /* ===== COURSE TABLE PAGE ===== */
    /* Pas de backdrop-filter ici : il casserait le positionnement fixed des menus déroulants */
    .course-command-bar {
      background: var(--bg-card);
      border: 1px solid var(--border-color);
      border-radius: 20px;
      box-shadow: none !important;
      padding: 16px;
      margin-bottom: 16px;
      display: flex;
      flex-direction: column;
      gap: 10px;
    }

    .course-page-header {
      background: transparent;
      border-radius: 0;
      padding: 0;
      margin: 0;
      border: none;
      display: flex;
      align-items: center;
      gap: 12px;
      justify-content: space-between;
      flex-wrap: wrap;
    }

    .course-page-header .back-btn {
      width: 34px;
      height: 34px;
      border-radius: 8px;
      border: 1px solid var(--border-color);
      background: var(--bg-input);
      color: var(--text-muted);
      cursor: pointer;
      display: flex;
      align-items: center;
      justify-content: center;
      transition: all 0.2s ease;
      box-shadow: var(--shadow-sm);
    }

    .course-page-header .back-btn:hover {
      border-color: var(--primary);
      color: var(--primary);
      transform: translateY(-1px);
    }

    .course-page-title-wrap {
      display: flex;
      align-items: center;
      gap: 10px;
      min-width: 0;
      flex: 0 1 auto;
    }

    .course-page-heading {
      min-width: 0;
      display: flex;
      flex-direction: column;
      gap: 2px;
    }

    .course-page-title-row {
      display: flex;
      align-items: center;
      gap: 12px;
      min-width: 0;
    }

    #coursesPageTitle {
      font-family: var(--font-heading);
      font-size: 22px;
      font-weight: 850;
      color: var(--text-main);
    }

    #coursesPageMeta {
      display: flex;
      align-items: center;
      gap: 8px;
      flex-wrap: wrap;
      margin-bottom: 12px;
      background: transparent;
      border: none;
      padding: 0;
    }

    .course-page-icon-slot {
      flex-shrink: 0;
    }

    .course-header-actions {
      display: flex;
      align-items: center;
      gap: 8px;
      margin-left: auto;
      flex-shrink: 0;
    }

    .course-page-stats {
      display: flex;
      flex-wrap: nowrap;
      gap: 8px;
      flex: 0 0 auto;
      margin-left: auto;
    }

    .course-stat-card {
      padding: 3px 12px;
      border-radius: 999px;
      border: 1px solid var(--border-color);
      background: var(--bg-input);
      min-width: 0;
      box-shadow: var(--shadow-sm);
      text-align: left;
      display: inline-flex;
      align-items: center;
      gap: 8px;
      justify-content: flex-start;
      transition: all 0.2s ease;
      flex: 0 0 auto;
    }

    .course-stat-card:hover {
      transform: translateY(-1px);
      box-shadow: var(--shadow-md);
    }

    .course-stat-label {
      font-size: 10px;
      color: var(--text-muted);
      font-weight: 600;
      margin-bottom: 0;
      white-space: nowrap;
    }

    .course-stat-value {
      font-family: var(--font-heading);
      font-size: 13px;
      font-weight: 850;
      color: var(--text-main);
      white-space: nowrap;
      overflow: hidden;
      text-overflow: ellipsis;
      line-height: 1.2;
    }

    .course-stat-meta {
      font-size: 10px;
      color: var(--text-muted);
      margin-top: 0;
      white-space: nowrap;
    }

    /* ===== VUE TABS (Segmented Pill Bar like QCMs PNS) ===== */
    .vue-tabs {
      display: inline-flex;
      align-items: center;
      background: var(--border-color);
      padding: 4px;
      border-radius: 99px;
      gap: 2px;
      margin-bottom: 16px;
      border: 1px solid var(--border-color);
      max-width: 100%;
      box-sizing: border-box;
    }

    .vue-tab {
      padding: 7px 14px;
      font-size: 12px;
      font-weight: 700;
      border-radius: 99px;
      color: var(--text-muted);
      white-space: nowrap;
      display: inline-flex;
      align-items: center;
      gap: 6px;
      border: none;
      background: transparent;
      cursor: pointer;
      transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
      user-select: none;
      flex-shrink: 0;
    }

    .vue-tab:hover {
      color: var(--text-main);
      background: rgba(255, 255, 255, 0.25);
    }

    [data-theme="dark"] .vue-tab:hover {
      background: rgba(255, 255, 255, 0.08);
    }

    .vue-tab.active {
      background: var(--bg-input);
      color: var(--primary) !important;
      box-shadow: var(--shadow-sm);
      font-weight: 800;
    }

    .vue-tab i {
      font-size: 12px;
    }

    @media (max-width: 992px) {
      .vue-tab .vue-txt {
        display: none;
      }
      .vue-tab {
        padding: 7px 10px;
      }
    }

    /* ===== TABLE TOOLBAR ===== */
    .table-toolbar {
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: 8px;
      margin: 0 0 16px 0;
      padding: 10px 14px;
      background: var(--bg-card);
      border: 1px solid var(--border-color);
      border-radius: 14px;
      box-shadow: var(--shadow-sm);
      flex-wrap: wrap;
      width: 100%;
      box-sizing: border-box;
    }

    .toolbar-primary,
    .toolbar-secondary,
    .toolbar-actions {
      display: flex;
      align-items: center;
      gap: 6px;
      flex-wrap: wrap;
    }

    .table-toolbar .btn,
    .table-toolbar .btn-ghost,
    .table-toolbar .btn-secondary {
      background: var(--bg-input);
      border: 1px solid var(--border-color);
      color: var(--text-main);
      padding: 6px 12px;
      font-size: 11.5px;
      font-weight: 700;
      border-radius: 99px;
      cursor: pointer;
      display: inline-flex;
      align-items: center;
      gap: 6px;
      box-shadow: var(--shadow-sm);
      transition: all 0.2s ease;
      white-space: nowrap;
    }

    .table-toolbar .btn:hover,
    .table-toolbar .btn-ghost:hover,
    .table-toolbar .btn-secondary:hover {
      border-color: var(--primary);
      color: var(--primary);
      background: var(--primary-light);
      transform: translateY(-1px);
    }

    .table-toolbar .btn-primary {
      background: var(--primary);
      color: #ffffff !important;
      border: 1px solid var(--primary);
      padding: 6px 14px;
      font-size: 11.5px;
      font-weight: 700;
      border-radius: 99px;
      box-shadow: 0 4px 12px rgba(37, 99, 235, 0.28);
      display: inline-flex;
      align-items: center;
      gap: 6px;
      white-space: nowrap;
      cursor: pointer;
      transition: all 0.2s ease;
    }

    .table-toolbar .btn-primary:hover {
      background: var(--primary-hover);
      transform: translateY(-1px);
    }

    .toolbar-dropdown .filter-btn {
      padding: 6px 12px;
      font-size: 11.5px;
      font-weight: 700;
      border-radius: 99px;
    }

    @media (max-width: 900px) {
      .table-toolbar .btn-text {
        display: none;
      }
      .table-toolbar .btn,
      .table-toolbar .btn-ghost,
      .table-toolbar .btn-primary {
        padding: 6px 10px;
      }
    }

    #courseTableContainer {
      width: 100%;
    }

    .table-wrap {
      background: var(--card);
      border: 1px solid var(--border);
      border-radius: var(--radius);
      overflow: hidden;
    }

    .table-wrap.virtual-group {
      border-style: dashed;
    }

    .group-header {
      display: flex;
      align-items: center;
      gap: 10px;
      padding: 12px 16px;
      background: linear-gradient(135deg, rgba(108, 99, 255, 0.1), rgba(0, 212, 170, 0.05));
      border-bottom: 1px solid var(--border);
      cursor: pointer;
    }

    .group-header .group-toggle {
      color: var(--text2);
      transition: var(--transition);
    }

    .group-header .group-toggle.open {
      transform: rotate(90deg);
    }

    .group-header .group-title {
      font-size: 14px;
      font-weight: 700;
      color: var(--text);
      flex: 1;
    }

    .group-header .group-stats {
      font-size: 11px;
      color: var(--text2);
      display: flex;
      gap: 12px;
    }

    .group-header .group-actions {
      display: flex;
      gap: 6px;
    }

    .group-body {
      overflow-x: hidden;
      padding: 0 !important;
    }

    table.course-table {
      width: 100%;
      max-width: 100%;
      border-collapse: collapse;
      table-layout: fixed;
    }

    thead tr {
      background: var(--bg3);
    }

    thead th {
      padding: 6px calc(var(--course-column-gap) / 2);
      font-size: 9px;
      font-weight: 700;
      color: var(--text2);
      text-align: left;
      white-space: normal;
      border-bottom: 1px solid var(--border);
      cursor: pointer;
      user-select: none;
      line-height: 1.15;
      overflow: hidden;
    }

    thead th:hover {
      color: var(--primary);
    }

    thead th .sort-icon {
      margin-left: 4px;
      opacity: 0.4;
    }

    thead th.sorted .sort-icon {
      opacity: 1;
      color: var(--primary);
    }

    tbody tr {
      border-bottom: 1px solid var(--border);
      transition: var(--transition);
    }

    tbody tr:last-child {
      border-bottom: none;
    }

    tbody tr:hover {
      background: rgba(108, 99, 255, 0.04);
    }

    tbody td {
      padding: 6px calc(var(--course-column-gap) / 2);
      font-size: 10px;
      color: var(--text);
      white-space: normal;
      word-break: break-word;
      vertical-align: top;
      line-height: 1.25;
      overflow: hidden;
    }

    thead th:first-child,
    tbody td:first-child {
      padding-left: 0;
    }

    thead th:last-child,
    tbody td:last-child {
      padding-right: 0;
    }

    .course-num {
      font-weight: 700;
      color: var(--text3);
      font-size: 11px;
    }

    .course-title-cell {
      display: flex;
      align-items: center;
      gap: 8px;
    }

    .course-title-text {
      max-width: none;
      overflow: hidden;
      text-overflow: ellipsis;
      font-weight: 600;
      min-width: 0;
      display: block;
      white-space: nowrap;
    }

    .course-table .col-num {
      text-align: center;
      white-space: nowrap;
    }

    .course-table .col-check {
      text-align: center;
      white-space: nowrap;
    }

    /* ===== TABLE CONTROLS (compact modern pills) ===== */
    .course-table .badge-pill {
      white-space: normal;
      line-height: 1.2;
      padding: 2px 6px;
      font-size: 10px;
    }

    .course-table .mini-progress {
      gap: 5px;
      flex-wrap: nowrap;
    }

    .course-table .mini-progress-bar {
      width: 54px;
      height: 7px;
      border-radius: 99px;
      background: rgba(148, 163, 184, 0.18);
      border: 1px solid rgba(148, 163, 184, 0.38);
      box-shadow: inset 0 1px 2px rgba(15, 23, 42, 0.14);
    }

    .course-table .mini-progress-bar-fill {
      border-radius: 99px;
    }

    .course-table .mini-progress>span {
      font-size: 10px;
      font-weight: 800;
      min-width: 32px;
      line-height: 1;
    }

    .course-table .star-rating,
    .course-table .difficulty-stars {
      flex-wrap: nowrap;
      gap: 1px;
    }

    .course-table .star,
    .course-table .diff-star {
      font-size: 13px;
      line-height: 1;
    }

    .course-table .star.active,
    .course-table .diff-star.active {
      color: #FBBF24;
      text-shadow: 0 0 6px rgba(251, 191, 36, 0.3);
    }

    .course-table .row-actions {
      gap: 0;
      flex-wrap: nowrap;
      justify-content: space-between;
    }

    .course-table .row-action-btn {
      width: 20px;
      height: 20px;
      font-size: 9px;
      border-radius: 6px;
      background: transparent;
      color: var(--text3);
      border: 1px solid transparent;
    }

    .course-table .row-action-btn:hover {
      background: var(--bg-input);
      color: var(--primary);
      border-color: var(--border-color);
    }

    .course-table .form-control {
      height: 28px;
      padding: 2px 10px;
      font-size: 11px;
      font-weight: 600;
      min-width: 0;
      min-height: 28px;
      background: var(--bg3);
      border: 1px solid var(--border);
      border-radius: 9px;
      color: var(--text);
      box-shadow: none;
      transition: border-color 0.15s ease, box-shadow 0.15s ease, background 0.15s ease;
    }

    .course-table .form-control:hover {
      border-color: rgba(148, 163, 184, 0.55);
    }

    .course-table .form-control:focus {
      border-color: var(--primary);
      box-shadow: 0 0 0 3px rgba(108, 99, 255, 0.15);
      background: var(--bg-input);
      outline: none;
    }

    .course-table input[type="number"] {
      padding-right: 6px;
      font-variant-numeric: tabular-nums;
    }

    .course-table select.form-control {
      appearance: none;
      -webkit-appearance: none;
      -moz-appearance: none;
      padding-right: 26px;
      background-image: url("data:image/svg+xml;charset=UTF-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='9' height='9' viewBox='0 0 10 10'%3E%3Cpath d='M1 3l4 4 4-4' fill='none' stroke='%2394A3B8' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
      background-repeat: no-repeat;
      background-position: right 9px center;
      background-size: 9px;
      cursor: pointer;
      text-overflow: ellipsis;
    }

    [data-theme="dark"] .course-table select.form-control {
      background-image: url("data:image/svg+xml;charset=UTF-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='9' height='9' viewBox='0 0 10 10'%3E%3Cpath d='M1 3l4 4 4-4' fill='none' stroke='%23CBD5E1' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
    }

    .course-table select.form-control option {
      background: var(--bg-card);
      color: var(--text);
      font-size: 13px;
    }

    .course-table input[type="date"] {
      padding-right: 6px;
    }

    [data-theme="dark"] .course-table input[type="date"]::-webkit-calendar-picker-indicator {
      filter: invert(1);
      opacity: 0.55;
    }

    .course-table .course-title-text {
      font-size: 11px;
      padding: 2px 4px;
      border-radius: 6px;
      transition: background 0.15s ease;
    }

    .course-table .course-title-text:focus {
      background: var(--bg-input);
    }

    .course-table .custom-checkbox {
      width: 18px;
      height: 18px;
      border-radius: 6px;
      border-width: 1.5px;
    }

    .course-table .custom-checkbox.checked i {
      font-size: 9px;
    }

    .course-table .date-badge {
      font-size: 10px;
    }

    .course-inline-stack {
      display: flex;
      flex-direction: column;
      gap: 6px;
    }

    .course-select-placeholder {
      color: var(--text3);
    }

    .mobile-course-list-wrap {
      padding: 0 !important;
      margin: 0 !important;
      width: 100% !important;
      box-sizing: border-box !important;
    }

    .mobile-course-list {
      display: flex !important;
      flex-direction: column !important;
      gap: 0 !important;
      padding: 0 !important;
      margin: 0 !important;
      width: 100% !important;
      box-sizing: border-box !important;
    }

    /* ========================================================
       COURSE COMMAND BAR (Matching Screenshots 1 & 2)
       Row 1: Title left | 6 Stats Cards right
       Row 2: Meta Pills left | Filter Bar + Réinitialiser + Les Profs right
       Row 3: Vue Tabs left | PDF button right
       ======================================================== */
    .course-command-bar {
      background: linear-gradient(135deg, #1e0836 0%, #2e1065 25%, #3b1877 60%, #4c1d95 100%) !important;
      border: 1px solid rgba(168, 85, 247, 0.35) !important;
      border-radius: 20px !important;
      padding: 16px 20px !important;
      box-shadow: none !important;
      margin-bottom: 16px !important;
      width: 100% !important;
      box-sizing: border-box !important;
      display: flex !important;
      flex-direction: column !important;
      gap: 12px !important;
    }

    [data-theme="dark"] .course-command-bar {
      background: linear-gradient(135deg, #140526 0%, #1e0b42 30%, #2d1059 70%, #3b0764 100%) !important;
      border-color: rgba(168, 85, 247, 0.25) !important;
      box-shadow: none !important;
    }

    /* STRICT USER REQUIREMENT: Absolutely NO element must move/shift on touch or hover */
    .course-command-bar,
    .course-command-bar * {
      transform: none !important;
    }

    /* Row 1 */
    .course-header-row-1 {
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: 16px;
      width: 100%;
      box-sizing: border-box;
    }

    .module-hero-left {
      display: flex;
      align-items: center;
      gap: 12px;
      min-width: 0;
      flex-shrink: 0;
    }

    .module-hero-left .back-btn {
      width: 38px;
      height: 38px;
      border-radius: 50% !important;
      background: rgba(255, 255, 255, 0.12) !important;
      color: #ffffff !important;
      border: 1px solid rgba(255, 255, 255, 0.22) !important;
      display: inline-flex;
      align-items: center;
      justify-content: center;
      cursor: pointer;
      flex-shrink: 0;
      transition: background-color 0.18s ease, border-color 0.18s ease !important;
    }

    .module-hero-left .back-btn:hover {
      background: rgba(255, 255, 255, 0.24) !important;
      border-color: rgba(255, 255, 255, 0.4) !important;
      color: #ffffff !important;
    }

    .module-hero-avatar,
    #topbarSubjectImg {
      width: 44px;
      height: 44px;
      border-radius: 12px;
      background: rgba(255, 255, 255, 0.14) !important;
      color: #f3e8ff !important;
      border: 1px solid rgba(255, 255, 255, 0.25) !important;
      display: inline-flex;
      align-items: center;
      justify-content: center;
      font-size: 20px;
      flex-shrink: 0;
      overflow: hidden;
    }

    .module-hero-text {
      display: flex;
      flex-direction: column;
      justify-content: center;
      min-width: 0;
    }

    .module-hero-title {
      font-size: 22px !important;
      font-weight: 800 !important;
      color: #ffffff !important;
      margin: 0 !important;
      line-height: 1.2 !important;
      white-space: nowrap !important;
      overflow: hidden !important;
      text-overflow: ellipsis !important;
      letter-spacing: -0.3px !important;
    }

    .module-hero-subtitle {
      font-size: 13px !important;
      font-weight: 550 !important;
      color: rgba(233, 213, 255, 0.85) !important;
      margin-top: 3px !important;
      line-height: 1.2 !important;
      white-space: nowrap !important;
    }

    /* 6 Stats Cards */
    .course-header-row-1 .course-page-stats {
      display: flex !important;
      align-items: center !important;
      gap: 8px !important;
      margin: 0 !important;
      flex-shrink: 0 !important;
      width: auto !important;
      box-sizing: border-box !important;
    }

    .course-stat-card {
      background: rgba(255, 255, 255, 0.08) !important;
      border: 1px solid rgba(255, 255, 255, 0.15) !important;
      border-radius: 12px !important;
      padding: 8px 12px !important;
      text-align: center !important;
      display: flex !important;
      flex-direction: column !important;
      align-items: center !important;
      justify-content: center !important;
      min-width: 82px !important;
      box-shadow: 0 4px 14px rgba(0, 0, 0, 0.12) !important;
      box-sizing: border-box !important;
      transition: background-color 0.18s ease, border-color 0.18s ease !important;
    }

    .course-stat-card:hover {
      background: rgba(255, 255, 255, 0.14) !important;
      border-color: rgba(255, 255, 255, 0.28) !important;
    }

    .course-stat-label {
      font-size: 10.5px !important;
      color: rgba(233, 213, 255, 0.75) !important;
      font-weight: 600 !important;
      white-space: nowrap !important;
      line-height: 1.2 !important;
      margin-bottom: 2px !important;
    }

    .course-stat-value {
      font-size: 17px !important;
      font-weight: 800 !important;
      color: #ffffff !important;
      line-height: 1.1 !important;
      white-space: nowrap !important;
    }

    .course-stat-card.stat-primary .course-stat-value {
      color: #d8b4fe !important;
    }

    /* Row 2 */
    .course-header-row-2 {
      display: flex;
      align-items: center;
      justify-content: flex-end;
      gap: 16px;
      width: 100%;
      box-sizing: border-box;
    }

    .course-header-row-2 .topbar-filter-row {
      margin: 0;
      display: flex;
      align-items: center;
      gap: 6px;
      justify-content: flex-end;
      flex-wrap: wrap;
    }

    .course-command-bar .filter-btn,
    .course-command-bar .btn-manage-profs,
    .course-command-bar .btn-reset-filters,
    .course-command-bar .btn-topbar-filter {
      background: rgba(255, 255, 255, 0.09) !important;
      border: 1px solid rgba(255, 255, 255, 0.18) !important;
      color: #ffffff !important;
      border-radius: 10px !important;
      font-weight: 650 !important;
      transition: background-color 0.18s ease, border-color 0.18s ease, color 0.18s ease !important;
    }

    .course-command-bar .filter-btn:hover,
    .course-command-bar .btn-manage-profs:hover,
    .course-command-bar .btn-reset-filters:hover,
    .course-command-bar .btn-topbar-filter:hover {
      background: rgba(255, 255, 255, 0.18) !important;
      border-color: rgba(255, 255, 255, 0.35) !important;
      color: #ffffff !important;
    }

    .course-command-bar .filter-btn.active,
    .course-command-bar .btn-topbar-filter.active {
      background: rgba(168, 85, 247, 0.35) !important;
      border-color: #c084fc !important;
      color: #ffffff !important;
    }

    /* Row 3 */
    .course-header-row-3 {
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: 16px;
      width: 100%;
      box-sizing: border-box;
      margin-top: 4px;
    }

    .course-header-row-3 .vue-tabs {
      margin: 0;
    }

    .course-command-bar .vue-tab {
      background: rgba(255, 255, 255, 0.08) !important;
      border: 1px solid rgba(255, 255, 255, 0.14) !important;
      color: rgba(243, 232, 255, 0.82) !important;
      border-radius: 10px !important;
      transition: background-color 0.18s ease, border-color 0.18s ease, color 0.18s ease, box-shadow 0.18s ease !important;
    }

    .course-command-bar .vue-tab:hover {
      background: rgba(255, 255, 255, 0.16) !important;
      border-color: rgba(255, 255, 255, 0.28) !important;
      color: #ffffff !important;
    }

    .course-command-bar .vue-tab.active {
      background: #ffffff !important;
      color: #3b0764 !important;
      border-color: #ffffff !important;
      font-weight: 800 !important;
      box-shadow: 0 4px 14px rgba(0, 0, 0, 0.25) !important;
    }

    .course-command-bar .vue-tab.active i {
      color: #6b21a8 !important;
    }

    .btn-module-pdf-pill {
      background: #ffffff !important;
      color: #3b0764 !important;
      border: none !important;
      border-radius: 999px !important;
      padding: 7px 18px !important;
      font-size: 12.5px !important;
      font-weight: 800 !important;
      display: inline-flex !important;
      align-items: center !important;
      gap: 7px !important;
      cursor: pointer !important;
      box-shadow: 0 4px 14px rgba(0, 0, 0, 0.2) !important;
      transition: background-color 0.18s ease, color 0.18s ease !important;
      flex-shrink: 0 !important;
      white-space: nowrap !important;
    }

    .btn-module-pdf-pill:hover {
      background: #f5f3ff !important;
      color: #2e1065 !important;
    }

    /* Les Profs button in filter row */
    .btn-manage-profs {
      font-weight: 750 !important;
      display: inline-flex !important;
      align-items: center !important;
      gap: 6px !important;
    }

    /* Redesigned Table Columns (Screenshots 3, 4, 5) */
    .col-temp-pill {
      display: inline-flex;
      align-items: center;
      justify-content: center;
      gap: 5px;
      padding: 4px 10px;
      border-radius: 999px;
      font-size: 12px;
      font-weight: 700;
      background: rgba(59, 130, 246, 0.08);
      color: #2563eb;
      border: 1px solid rgba(59, 130, 246, 0.18);
      white-space: nowrap;
    }

    [data-theme="dark"] .col-temp-pill {
      background: rgba(59, 130, 246, 0.15);
      color: #60a5fa;
      border-color: rgba(96, 165, 250, 0.25);
    }

    .badge-moy-diff {
      display: inline-flex;
      align-items: center;
      justify-content: center;
      padding: 3px 10px;
      border-radius: 999px;
      font-size: 11.5px;
      font-weight: 750;
      background: #fef3c7;
      color: #b45309;
      border: 1px solid #fde68a;
      white-space: nowrap;
    }

    [data-theme="dark"] .badge-moy-diff {
      background: rgba(245, 158, 11, 0.18);
      color: #fbbf24;
      border-color: rgba(245, 158, 11, 0.3);
    }

    .course-prog-cell {
      display: flex;
      align-items: center;
      gap: 8px;
      justify-content: center;
      width: 100%;
    }

    .course-prog-cell .mini-prog-track {
      flex: 1;
      max-width: 72px;
      height: 6px;
      background: var(--border-color, #e2e8f0);
      border-radius: 99px;
      overflow: hidden;
    }

    [data-theme="dark"] .course-prog-cell .mini-prog-track {
      background: rgba(255, 255, 255, 0.12);
    }

    .course-prog-cell .mini-prog-fill {
      height: 100%;
      background: linear-gradient(90deg, #3b82f6, #06b6d4);
      border-radius: 99px;
      transition: width 0.3s ease;
    }

    .course-prog-cell .prog-pct-txt {
      font-size: 11px;
      font-weight: 700;
      color: var(--text-main, #334155);
      min-width: 28px;
      text-align: right;
    }

    /* Date Cell with Calendar Picker Button (Screenshot 3 Blue Arrow) */
    .table-date-cell-wrap {
      display: inline-flex;
      align-items: center;
      gap: 4px;
      position: relative;
    }

    .btn-table-date-picker {
      background: none;
      border: none;
      color: #2563eb;
      cursor: pointer;
      padding: 4px 5px;
      border-radius: 6px;
      display: inline-flex;
      align-items: center;
      justify-content: center;
      font-size: 13.5px;
      transition: all 0.2s ease;
      flex-shrink: 0;
    }

    .btn-table-date-picker:hover {
      background: rgba(37, 99, 235, 0.12);
      transform: scale(1.1);
    }

    /* Star ratings & difficulty stars styling */
    .difficulty-stars,
    .star-rating {
      display: inline-flex;
      align-items: center;
      justify-content: center;
      gap: 2.5px;
      white-space: nowrap;
    }

    .diff-star,
    .star-rating .star {
      font-size: 13.5px;
      cursor: pointer;
      color: #cbd5e1;
      transition: transform 0.15s ease, color 0.15s ease;
      line-height: 1;
      user-select: none;
    }

    .diff-star.active,
    .star-rating .star.active {
      color: #f59e0b;
    }

    .diff-star:hover,
    .star-rating .star:hover {
      transform: scale(1.25);
      color: #fbbf24;
    }

    /* Table Column Header & Cell alignments */
    .course-table th.col-temp,
    .course-table td.col-temp,
    .course-table th.col-score,
    .course-table td.col-score,
    .course-table th.col-eval,
    .course-table td.col-eval,
    .course-table th.col-progress,
    .course-table td.col-progress {
      text-align: center !important;
      vertical-align: middle !important;
    }

    /* Clean Deletions for Mobile (Blue Boxes in Screenshot 2) */
    #courseTableContainer .group-header::after,
    .suivi-app .group-header::after {
      display: none !important;
    }

    @media (max-width: 768px) {
      .mobile-row-top-tags {
        display: none !important;
      }
      .vue-tabs {
        display: inline-flex !important;
        justify-content: center !important;
        margin: 8px auto !important;
        width: fit-content !important;
        max-width: 100% !important;
      }
    }

    /* Mobile Breakpoints for 3-Row Header (Phones <= 640px only) */
    /* Mobile Breakpoints for Header (Phones <= 640px) */
    @media (max-width: 640px) {
      .course-header-row-1 {
        flex-direction: column !important;
        align-items: stretch !important;
        gap: 6px !important;
      }
      .course-header-row-1 .course-page-stats,
      #coursePageStats {
        display: flex !important;
        flex-wrap: nowrap !important;
        width: calc(100% - 4mm) !important;
        margin: 2px auto 0 !important;
        gap: 3px !important;
        justify-content: space-between !important;
        box-sizing: border-box !important;
      }
      .course-stat-card {
        flex: 1 1 0 !important;
        min-width: 0 !important;
        padding: 3px 2px !important;
        border-radius: 8px !important;
        text-align: center !important;
        display: flex !important;
        flex-direction: column !important;
        align-items: center !important;
        justify-content: center !important;
        box-sizing: border-box !important;
      }
      .course-stat-label {
        font-size: 7.5px !important;
        letter-spacing: -0.2px !important;
        line-height: 1 !important;
        margin-bottom: 2px !important;
        white-space: nowrap !important;
        overflow: hidden !important;
        text-overflow: ellipsis !important;
        width: 100% !important;
        text-align: center !important;
      }
      .course-stat-value {
        font-size: 11px !important;
        font-weight: 800 !important;
        line-height: 1 !important;
        white-space: nowrap !important;
        text-align: center !important;
      }
    }

    /* ========================================================
       MOBILE COURSE ROW (Full-Width, Divider-Only & All 7 Vues)
       ======================================================== */
    .mobile-course-card,
    .mobile-course-row {
      width: 100% !important;
      margin: 0 !important;
      border-radius: 0 !important;
      border: none !important;
      border-bottom: 1px solid var(--border, #e2e8f0) !important;
      background: transparent !important;
      box-shadow: none !important;
      padding: 12px 14px !important;
      box-sizing: border-box !important;
      display: flex !important;
      flex-direction: column !important;
      gap: 8px !important;
      position: relative !important;
      transition: background-color 0.15s ease !important;
    }

    .mobile-course-card:last-child,
    .mobile-course-row:last-child {
      border-bottom: none !important;
    }

    .mobile-course-row:hover {
      background: rgba(37, 99, 235, 0.02) !important;
    }

    [data-theme="dark"] .mobile-course-card,
    [data-theme="dark"] .mobile-course-row {
      border-bottom-color: rgba(255, 255, 255, 0.09) !important;
    }

    [data-theme="dark"] .mobile-course-row:hover {
      background: rgba(255, 255, 255, 0.02) !important;
    }

    /* Top Row: Title, Number & Meta Tags */
    .mobile-row-header {
      display: flex !important;
      align-items: center !important;
      justify-content: space-between !important;
      gap: 10px !important;
      width: 100% !important;
    }

    .mobile-row-title-wrap {
      display: flex !important;
      align-items: center !important;
      gap: 6px !important;
      flex: 1 !important;
      min-width: 0 !important;
    }

    .mobile-row-num {
      font-size: 14.5px !important;
      font-weight: 800 !important;
      color: var(--primary, #2563eb) !important;
      flex-shrink: 0 !important;
    }

    .mobile-row-title-input {
      font-family: inherit !important;
      font-size: 14.5px !important;
      font-weight: 750 !important;
      color: var(--text-main, #0f172a) !important;
      background: transparent !important;
      border: none !important;
      outline: none !important;
      width: 100% !important;
      padding: 0 !important;
      margin: 0 !important;
      line-height: 1.35 !important;
    }

    [data-theme="dark"] .mobile-row-title-input {
      color: #f8fafc !important;
    }

    .mobile-row-top-tags {
      display: flex !important;
      align-items: center !important;
      gap: 6px !important;
      flex-shrink: 0 !important;
    }

    .mobile-tag-pill {
      font-size: 11px !important;
      font-weight: 600 !important;
      padding: 3px 9px !important;
      border-radius: 99px !important;
      background: rgba(148, 163, 184, 0.14) !important;
      color: var(--text-muted, #475569) !important;
      border: 1px solid rgba(148, 163, 184, 0.22) !important;
      cursor: pointer !important;
      transition: all 0.2s ease !important;
      user-select: none !important;
      white-space: nowrap !important;
    }

    [data-theme="dark"] .mobile-tag-pill {
      background: rgba(255, 255, 255, 0.08) !important;
      border-color: rgba(255, 255, 255, 0.12) !important;
      color: #94a3b8 !important;
    }

    .mobile-tag-pill:hover {
      background: rgba(37, 99, 235, 0.12) !important;
      color: var(--primary, #2563eb) !important;
      border-color: rgba(37, 99, 235, 0.35) !important;
    }

    /* Common Vue Section Container */
    .mobile-vue-section {
      display: flex !important;
      flex-direction: column !important;
      gap: 8px !important;
      width: 100% !important;
    }

    /* Grid Chips (Prof, Dates, Note, Time) */
    .mobile-chips-grid {
      display: grid !important;
      gap: 6px !important;
      width: 100% !important;
    }

    .mobile-chips-grid.grid-3-cols {
      grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
    }

    .mobile-chips-grid.grid-2-cols {
      grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    }

    .mobile-field-chip {
      background: var(--bg-card, rgba(255, 255, 255, 0.75)) !important;
      border: 1px solid var(--border-color, rgba(148, 163, 184, 0.22)) !important;
      border-radius: 10px !important;
      padding: 6px 8px !important;
      display: flex !important;
      flex-direction: column !important;
      gap: 2px !important;
      min-width: 0 !important;
      box-sizing: border-box !important;
    }

    [data-theme="dark"] .mobile-field-chip {
      background: rgba(30, 41, 59, 0.55) !important;
      border-color: rgba(255, 255, 255, 0.08) !important;
    }

    .chip-label {
      font-size: 10px !important;
      font-weight: 750 !important;
      color: var(--text-muted, #64748b) !important;
      text-transform: uppercase !important;
      letter-spacing: 0.3px !important;
      display: flex !important;
      align-items: center !important;
      gap: 4px !important;
      white-space: nowrap !important;
      overflow: hidden !important;
      text-overflow: ellipsis !important;
    }

    .chip-value {
      font-size: 11.5px !important;
      font-weight: 600 !important;
      color: var(--text-main, #0f172a) !important;
      white-space: nowrap !important;
      overflow: hidden !important;
      text-overflow: ellipsis !important;
    }

    [data-theme="dark"] .chip-value {
      color: #f8fafc !important;
    }

    .chip-value select,
    .chip-value input {
      width: 100% !important;
      font-size: 11px !important;
      font-weight: 600 !important;
      background: transparent !important;
      border: none !important;
      outline: none !important;
      color: inherit !important;
      cursor: pointer !important;
      padding: 0 !important;
      margin: 0 !important;
    }

    /* Vue 1: Couches 2x2 Grid */
    .mobile-couches-grid {
      display: grid !important;
      grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
      gap: 6px !important;
      width: 100% !important;
    }

    .mobile-couche-card {
      background: var(--bg-card, rgba(255, 255, 255, 0.75)) !important;
      border: 1px solid var(--border-color, rgba(148, 163, 184, 0.22)) !important;
      border-radius: 10px !important;
      padding: 7px 9px !important;
      display: flex !important;
      flex-direction: column !important;
      gap: 3px !important;
      cursor: pointer !important;
      transition: all 0.2s ease !important;
      box-sizing: border-box !important;
    }

    .mobile-couche-card.is-checked {
      background: rgba(37, 99, 235, 0.05) !important;
      border-color: rgba(37, 99, 235, 0.35) !important;
    }

    [data-theme="dark"] .mobile-couche-card {
      background: rgba(30, 41, 59, 0.55) !important;
      border-color: rgba(255, 255, 255, 0.08) !important;
    }

    [data-theme="dark"] .mobile-couche-card.is-checked {
      background: rgba(37, 99, 235, 0.14) !important;
      border-color: rgba(37, 99, 235, 0.45) !important;
    }

    .mobile-couche-top {
      display: flex !important;
      align-items: center !important;
      justify-content: space-between !important;
    }

    .couche-badge {
      font-size: 10px !important;
      font-weight: 800 !important;
      padding: 2px 7px !important;
      border-radius: 6px !important;
      background: rgba(148, 163, 184, 0.18) !important;
      color: var(--text-muted, #475569) !important;
      display: inline-block !important;
    }

    .couche-badge.active {
      background: #2563eb !important;
      color: #ffffff !important;
    }

    [data-theme="dark"] .couche-badge {
      background: rgba(255, 255, 255, 0.1) !important;
      color: #94a3b8 !important;
    }

    [data-theme="dark"] .couche-badge.active {
      background: #3b82f6 !important;
      color: #ffffff !important;
    }

    .couche-icon-checked {
      color: #10b981 !important;
      font-size: 14px !important;
    }

    .couche-icon-waiting {
      color: var(--text-muted, #94a3b8) !important;
      font-size: 13px !important;
      opacity: 0.65 !important;
    }

    .mobile-couche-bottom {
      display: flex !important;
      align-items: center !important;
    }

    .couche-status-text {
      font-size: 11px !important;
      font-weight: 600 !important;
      color: var(--text-muted, #64748b) !important;
      white-space: nowrap !important;
      overflow: hidden !important;
      text-overflow: ellipsis !important;
    }

    .mobile-couche-card.is-checked .couche-status-text {
      color: var(--text-main, #0f172a) !important;
    }

    [data-theme="dark"] .mobile-couche-card.is-checked .couche-status-text {
      color: #e2e8f0 !important;
    }

    /* Universal Couche Checkbox Strip (Vues 2-7) */
    .mobile-checkbox-strip {
      display: flex !important;
      align-items: center !important;
      gap: 6px !important;
      width: 100% !important;
      padding-top: 2px !important;
    }

    .mobile-strip-check {
      flex: 1 !important;
      display: inline-flex !important;
      align-items: center !important;
      justify-content: center !important;
      gap: 5px !important;
      padding: 6px 4px !important;
      border-radius: 9px !important;
      border: 1px solid var(--border-color, rgba(148, 163, 184, 0.22)) !important;
      background: var(--bg-card, rgba(255, 255, 255, 0.75)) !important;
      color: var(--text-muted, #64748b) !important;
      font-size: 11px !important;
      font-weight: 750 !important;
      cursor: pointer !important;
      transition: all 0.2s ease !important;
      user-select: none !important;
      box-sizing: border-box !important;
    }

    .mobile-strip-check.checked {
      background: rgba(37, 99, 235, 0.1) !important;
      border-color: rgba(37, 99, 235, 0.4) !important;
      color: var(--primary, #2563eb) !important;
    }

    [data-theme="dark"] .mobile-strip-check {
      background: rgba(30, 41, 59, 0.55) !important;
      border-color: rgba(255, 255, 255, 0.08) !important;
      color: #94a3b8 !important;
    }

    [data-theme="dark"] .mobile-strip-check.checked {
      background: rgba(37, 99, 235, 0.2) !important;
      border-color: rgba(37, 99, 235, 0.5) !important;
      color: #60a5fa !important;
    }

    /* Vue 2: Difficulty Stars & Avancement */
    .mobile-diff-stars-wrap {
      display: inline-flex !important;
      align-items: center !important;
      gap: 3px !important;
      font-size: 15px !important;
      cursor: pointer !important;
      line-height: 1 !important;
    }

    .mobile-diff-star {
      color: #cbd5e1 !important;
      transition: color 0.15s ease, transform 0.15s ease !important;
      user-select: none !important;
    }

    .mobile-diff-star.filled {
      color: #f59e0b !important;
    }

    .mobile-diff-star:hover {
      transform: scale(1.2) !important;
    }

    .mobile-progress-full-row {
      display: flex !important;
      align-items: center !important;
      gap: 8px !important;
      width: 100% !important;
      padding: 2px 0 !important;
    }

    /* Vue 3: 2x2 Evaluation Grid */
    .mobile-eval-grid {
      display: grid !important;
      grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
      gap: 6px !important;
      width: 100% !important;
    }

    .mobile-eval-box {
      background: var(--bg-card, rgba(255, 255, 255, 0.75)) !important;
      border: 1px solid var(--border-color, rgba(148, 163, 184, 0.22)) !important;
      border-radius: 10px !important;
      padding: 7px 9px !important;
      display: flex !important;
      flex-direction: column !important;
      gap: 3px !important;
      cursor: pointer !important;
      transition: all 0.2s ease !important;
      box-sizing: border-box !important;
    }

    [data-theme="dark"] .mobile-eval-box {
      background: rgba(30, 41, 59, 0.55) !important;
      border-color: rgba(255, 255, 255, 0.08) !important;
    }

    .eval-box-top {
      display: flex !important;
      align-items: center !important;
      justify-content: space-between !important;
    }

    .eval-couche-name {
      font-size: 10px !important;
      font-weight: 800 !important;
      color: var(--primary, #2563eb) !important;
      text-transform: uppercase !important;
    }

    .eval-score-num {
      font-size: 11px !important;
      font-weight: 800 !important;
      color: var(--text-main, #0f172a) !important;
    }

    [data-theme="dark"] .eval-score-num {
      color: #f8fafc !important;
    }

    .eval-stars-line {
      display: flex !important;
      align-items: center !important;
      overflow-x: auto !important;
    }

    .eval-stars-line .star-rating {
      display: flex !important;
      gap: 2px !important;
    }

    .eval-stars-line .star {
      font-size: 12px !important;
      cursor: pointer !important;
      color: #cbd5e1 !important;
    }

    .eval-stars-line .star.active {
      color: #f59e0b !important;
    }

    /* Vue 4: 2x2 Dates Grid */
    .mobile-dates-grid {
      display: grid !important;
      grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
      gap: 6px !important;
      width: 100% !important;
    }

    .mobile-date-couche-box {
      background: var(--bg-card, rgba(255, 255, 255, 0.75)) !important;
      border: 1px solid var(--border-color, rgba(148, 163, 184, 0.22)) !important;
      border-radius: 10px !important;
      padding: 7px 9px !important;
      display: flex !important;
      flex-direction: column !important;
      gap: 2px !important;
      box-sizing: border-box !important;
    }

    [data-theme="dark"] .mobile-date-couche-box {
      background: rgba(30, 41, 59, 0.55) !important;
      border-color: rgba(255, 255, 255, 0.08) !important;
    }

    .date-couche-label {
      font-size: 10px !important;
      font-weight: 800 !important;
      color: var(--primary, #2563eb) !important;
      text-transform: uppercase !important;
    }

    .date-couche-control {
      width: 100% !important;
    }

    .date-couche-control input[type="date"] {
      width: 100% !important;
      font-size: 11px !important;
      font-weight: 600 !important;
      background: transparent !important;
      border: none !important;
      outline: none !important;
      color: inherit !important;
      padding: 0 !important;
      margin: 0 !important;
    }

    /* Vue 6: 2x2 Progression Grid */
    .mobile-prog-grid {
      display: grid !important;
      grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
      gap: 6px !important;
      width: 100% !important;
    }

    .mobile-prog-box {
      background: var(--bg-card, rgba(255, 255, 255, 0.75)) !important;
      border: 1px solid var(--border-color, rgba(148, 163, 184, 0.22)) !important;
      border-radius: 10px !important;
      padding: 7px 9px !important;
      display: flex !important;
      flex-direction: column !important;
      gap: 4px !important;
      box-sizing: border-box !important;
    }

    [data-theme="dark"] .mobile-prog-box {
      background: rgba(30, 41, 59, 0.55) !important;
      border-color: rgba(255, 255, 255, 0.08) !important;
    }

    .prog-box-header {
      display: flex !important;
      align-items: center !important;
      justify-content: space-between !important;
      font-size: 10.5px !important;
    }

    .prog-box-header span {
      font-weight: 700 !important;
      color: var(--text-muted, #64748b) !important;
    }

    .prog-box-header strong {
      font-weight: 800 !important;
      color: var(--text-main, #0f172a) !important;
    }

    [data-theme="dark"] .prog-box-header strong {
      color: #f8fafc !important;
    }

    /* Bottom Actions Toolbar */
    .mobile-row-actions {
      display: flex !important;
      align-items: center !important;
      justify-content: space-between !important;
      padding-top: 6px !important;
      border-top: 1px dashed rgba(148, 163, 184, 0.18) !important;
      width: 100% !important;
    }

    [data-theme="dark"] .mobile-row-actions {
      border-top-color: rgba(255, 255, 255, 0.08) !important;
    }

    .actions-left,
    .actions-right {
      display: flex !important;
      align-items: center !important;
      gap: 5px !important;
    }

    .btn-action-icon {
      width: 29px !important;
      height: 29px !important;
      border-radius: 8px !important;
      border: 1px solid var(--border-color, rgba(148, 163, 184, 0.22)) !important;
      background: var(--bg-card, rgba(255, 255, 255, 0.7)) !important;
      color: var(--text-muted, #64748b) !important;
      display: inline-flex !important;
      align-items: center !important;
      justify-content: center !important;
      font-size: 11.5px !important;
      cursor: pointer !important;
      transition: all 0.2s ease !important;
      padding: 0 !important;
      box-sizing: border-box !important;
    }

    .btn-action-icon:hover {
      background: var(--item-bg-hover, rgba(226, 232, 240, 0.6)) !important;
      color: var(--primary, #2563eb) !important;
      border-color: var(--primary, #2563eb) !important;
    }

    [data-theme="dark"] .btn-action-icon {
      background: rgba(30, 41, 59, 0.5) !important;
      border-color: rgba(255, 255, 255, 0.08) !important;
      color: #94a3b8 !important;
    }

    .btn-action-icon.btn-action-delete {
      color: #ef4444 !important;
      border-color: rgba(239, 68, 68, 0.25) !important;
    }

    .btn-action-icon.btn-action-delete:hover {
      background: rgba(239, 68, 68, 0.12) !important;
      border-color: #ef4444 !important;
      color: #dc2626 !important;
    }

    .topbar.topbar-hidden {
      display: none;
    }

    .sidebar-backdrop {
      display: none;
    }

    .badge-pill {
      display: inline-flex;
      align-items: center;
      gap: 4px;
      padding: 2px 8px;
      border-radius: 12px;
      font-size: 11px;
      font-weight: 600;
    }

    .badge-blue {
      background: rgba(59, 130, 246, 0.15);
      color: #60A5FA;
    }

    .badge-green {
      background: rgba(16, 185, 129, 0.15);
      color: #34D399;
    }

    .badge-yellow {
      background: rgba(245, 158, 11, 0.15);
      color: #FCD34D;
    }

    .badge-red {
      background: rgba(239, 68, 68, 0.15);
      color: #F87171;
    }

    .badge-purple {
      background: rgba(108, 99, 255, 0.15);
      color: #A78BFA;
    }

    .badge-teal {
      background: rgba(0, 212, 170, 0.15);
      color: #2DD4BF;
    }

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

    .custom-checkbox {
      width: 20px;
      height: 20px;
      border-radius: 6px;
      border: 2px solid var(--border);
      cursor: pointer;
      display: flex;
      align-items: center;
      justify-content: center;
      transition: var(--transition);
      flex-shrink: 0;
      user-select: none;
      touch-action: manipulation;
      -webkit-tap-highlight-color: transparent;
    }

    .custom-checkbox.c1 {
      border-color: #6C63FF;
    }

    .custom-checkbox.c2 {
      border-color: #00D4AA;
    }

    .custom-checkbox.c3 {
      border-color: #FF6B6B;
    }

    .custom-checkbox.c4 {
      border-color: #FFD93D;
    }

    .custom-checkbox.checked.c1 {
      background: #6C63FF;
    }

    .custom-checkbox.checked.c2 {
      background: #00D4AA;
    }

    .custom-checkbox.checked.c3 {
      background: #FF6B6B;
    }

    .custom-checkbox.checked.c4 {
      background: #FFD93D;
    }

    .custom-checkbox.checked i {
      display: block;
      color: white;
      font-size: 10px;
    }

    .custom-checkbox:not(.checked) i {
      display: none;
    }

    .star-rating {
      display: flex;
      gap: 2px;
    }

    .star {
      font-size: 14px;
      color: var(--text3);
      cursor: pointer;
      transition: var(--transition);
    }

    .star.active {
      color: var(--accent2);
    }

    .star:hover {
      transform: scale(1.2);
    }

    /* ===== PROGRESS CIRCLE ===== */
    .mini-progress {
      display: flex;
      align-items: center;
      gap: 8px;
    }

    .mini-progress-bar {
      width: 80px;
      height: 8px;
      background: rgba(148, 163, 184, 0.18);
      border: 1px solid rgba(148, 163, 184, 0.38);
      border-radius: 100px;
      overflow: hidden;
      box-shadow: inset 0 1px 2px rgba(15, 23, 42, 0.14);
    }

    .mini-progress-bar-fill {
      height: 100%;
      border-radius: 100px;
      background: linear-gradient(90deg, var(--primary), var(--secondary));
      transition: width 0.5s;
    }

    /* ===== MODALS (Glass Modal Card like QCMs PNS) ===== */
    .modal-overlay {
      position: fixed;
      inset: 0;
      background: rgba(15, 23, 42, 0.6);
      z-index: 1000;
      display: none;
      align-items: center;
      justify-content: center;
    }

    .modal-overlay.open {
      display: flex;
    }

    .modal {
      background: var(--bg-card);
      border: 1px solid var(--border-color);
      border-radius: 20px;
      width: 90%;
      max-width: 560px;
      max-height: 90vh;
      overflow-y: auto;
      box-shadow: var(--shadow-lg);
      animation: pnsDropIn 0.2s cubic-bezier(0.4, 0, 0.2, 1);
    }

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

    .modal-title {
      font-family: var(--font-heading);
      font-size: 18px;
      font-weight: 850;
      color: var(--text-main);
      display: flex;
      align-items: center;
      gap: 8px;
    }

    .modal-title i {
      color: var(--primary);
    }

    .modal-close {
      width: 32px;
      height: 32px;
      border-radius: 8px;
      border: 1px solid var(--border-color);
      background: var(--bg-input);
      color: var(--text-muted);
      cursor: pointer;
      display: flex;
      align-items: center;
      justify-content: center;
      transition: all 0.2s ease;
      box-shadow: var(--shadow-sm);
    }

    .modal-close:hover {
      border-color: var(--primary);
      color: var(--primary);
      transform: translateY(-1px);
    }

    .modal-body {
      padding: 24px;
    }

    .modal-footer {
      padding: 16px 24px;
      border-top: 1px solid var(--border-color);
      display: flex;
      gap: 10px;
      justify-content: flex-end;
    }
      justify-content: flex-end;
    }

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

    .form-label {
      font-size: 12px;
      font-weight: 600;
      color: var(--text2);
      margin-bottom: 6px;
      display: block;
    }

    .form-control {
      width: 100%;
      padding: 10px 14px;
      background: var(--bg3);
      border: 1px solid var(--border);
      border-radius: var(--radius-sm);
      color: var(--text);
      font-size: 13px;
      outline: none;
      transition: var(--transition);
    }

    .form-control:focus {
      border-color: var(--primary);
      box-shadow: 0 0 0 3px rgba(108, 99, 255, 0.15);
    }

    .custom-file-upload {
      display: inline-flex;
      align-items: center;
      justify-content: center;
      gap: 10px;
      width: 100%;
      padding: 14px 20px;
      border-radius: 12px;
      border: 2px dashed var(--border);
      background: linear-gradient(135deg, rgba(108, 99, 255, 0.08), rgba(0, 212, 170, 0.05));
      color: var(--text);
      font-size: 14px;
      font-weight: 600;
      cursor: pointer;
      transition: var(--transition);
    }

    .custom-file-upload:hover {
      border-color: var(--primary);
      background: linear-gradient(135deg, rgba(108, 99, 255, 0.15), rgba(0, 212, 170, 0.08));
      transform: translateY(-1px);
    }

    .custom-file-upload i {
      font-size: 18px;
      color: var(--primary);
    }

    select.form-control option {
      background: var(--bg3);
    }

    .btn {
      padding: 9px 18px;
      border-radius: var(--radius-sm);
      border: none;
      cursor: pointer;
      font-size: 13px;
      font-weight: 600;
      transition: var(--transition);
    }

    .btn-ghost {
      background: var(--bg3);
      color: var(--text2);
    }

    .btn-ghost:hover {
      background: var(--bg4);
      color: var(--text);
    }

    .btn-danger {
      background: rgba(239, 68, 68, 0.15);
      color: var(--danger);
    }

    .btn-danger:hover {
      background: var(--danger);
      color: white;
    }

    .btn-success {
      background: linear-gradient(135deg, var(--success), #059669);
      color: white;
    }

    .option-manager-add {
      display: flex;
      gap: 10px;
      align-items: center;
    }

    .option-manager-list {
      display: flex;
      flex-direction: column;
      gap: 10px;
    }

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

    .option-manager-label {
      font-size: 13px;
      color: var(--text);
    }

    .option-manager-empty {
      padding: 16px;
      border: 1px dashed var(--border);
      border-radius: 10px;
      color: var(--text3);
      text-align: center;
      font-size: 12px;
    }

    /* ===== CHRONOMETER ===== */
    .chrono-float {
      position: fixed;
      bottom: 24px;
      right: 24px;
      z-index: 500;
      display: flex;
      flex-direction: column;
      gap: 10px;
    }

    .chrono-widget {
      background: var(--bg2);
      border: 1px solid var(--border);
      border-radius: var(--radius);
      padding: 16px;
      width: 220px;
      box-shadow: var(--shadow-lg);
    }

    .chrono-widget.minimized {
      width: 160px;
      padding: 10px;
    }

    .chrono-task-name {
      font-size: 11px;
      color: var(--text2);
      margin-bottom: 4px;
      white-space: nowrap;
      overflow: hidden;
      text-overflow: ellipsis;
    }

    .chrono-time {
      font-size: 28px;
      font-weight: 800;
      color: var(--primary);
      text-align: center;
    }

    .chrono-widget.minimized .chrono-time {
      font-size: 18px;
    }

    .chrono-sound {
      display: flex;
      gap: 6px;
      justify-content: center;
      margin: 8px 0;
    }

    .chrono-sound-btn {
      padding: 4px 10px;
      border-radius: 20px;
      border: 1px solid var(--border);
      background: var(--bg3);
      color: var(--text2);
      font-size: 11px;
      cursor: pointer;
      transition: var(--transition);
    }

    .chrono-sound-btn.active {
      border-color: var(--primary);
      color: var(--primary);
      background: rgba(108, 99, 255, 0.1);
    }

    .chrono-controls {
      display: flex;
      gap: 6px;
      justify-content: center;
    }

    .chrono-btn {
      width: 30px;
      height: 30px;
      border-radius: 8px;
      border: 1px solid var(--border);
      background: var(--bg3);
      color: var(--text2);
      cursor: pointer;
      display: flex;
      align-items: center;
      justify-content: center;
      font-size: 12px;
      transition: var(--transition);
    }

    .chrono-btn:hover {
      border-color: var(--primary);
      color: var(--primary);
    }

    .chrono-btn.play {
      background: linear-gradient(135deg, var(--primary), var(--primary-dark));
      border-color: var(--primary);
      color: white;
    }

    /* ===== EVALUATION PAGE ===== */
    .eval-grid {
      display: grid;
      grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
      gap: 16px;
      margin-bottom: 24px;
    }

    .eval-card {
      background: var(--bg-card);
      border: 1px solid var(--border-color);
      border-radius: 20px;
      padding: 24px;
      box-shadow: var(--shadow-md);
    }

    .eval-card-title {
      font-family: var(--font-heading);
      font-size: 16px;
      font-weight: 850;
      color: var(--text-main);
      border-bottom: 1px solid var(--border-color);
      padding-bottom: 10px;
      margin-bottom: 18px;
      display: flex;
      align-items: center;
      gap: 8px;
    }

    .chart-container {
      position: relative;
      height: 220px;
    }

    /* ===== TACHE PAGE ===== */
    .tache-tree {
      display: flex;
      flex-direction: column;
      gap: 12px;
    }

    .tache-year {
      background: var(--bg-card);
      border: 1px solid var(--border-color);
      border-radius: 16px;
      overflow: hidden;
      margin-bottom: 12px;
      box-shadow: var(--shadow-sm);
    }

    .tache-year-header {
      padding: 14px 20px;
      display: flex;
      align-items: center;
      gap: 10px;
      cursor: pointer;
      background: var(--primary-glass);
      transition: background 0.2s ease;
    }

    .tache-year-header:hover {
      background: var(--primary-light);
    }

    .tache-module {
      border-top: 1px solid var(--border);
    }

    .tache-module-header {
      padding: 12px 20px 12px 36px;
      display: flex;
      align-items: center;
      gap: 10px;
      cursor: pointer;
      background: rgba(108, 99, 255, 0.04);
    }

    .tache-group {
      border-top: 1px solid var(--border);
    }

    .tache-group-header {
      padding: 10px 20px 10px 52px;
      display: flex;
      align-items: center;
      gap: 10px;
      cursor: pointer;
    }

    .tache-course {
      border-top: 1px solid var(--border);
    }

    .tache-course-header {
      padding: 10px 20px 10px 68px;
      display: flex;
      align-items: center;
      gap: 10px;
      cursor: pointer;
    }

    .tache-couche {
      border-top: 1px solid var(--border);
    }

    .tache-couche-header {
      padding: 8px 20px 8px 84px;
      display: flex;
      align-items: center;
      gap: 10px;
      cursor: pointer;
      background: rgba(0, 212, 170, 0.03);
    }

    .tache-task-row {
      border-top: 1px solid var(--border);
      padding: 8px 20px 8px 100px;
      display: flex;
      align-items: center;
      gap: 12px;
    }

    .tache-task-row:hover {
      background: rgba(108, 99, 255, 0.03);
    }

    .tache-task-row.custom-task {
      background: rgba(59, 130, 246, 0.04);
    }

    .tache-task-actions {
      display: flex;
      align-items: center;
      gap: 6px;
      margin-left: auto;
    }

    .tache-add-wrap {
      border-top: 1px dashed var(--border);
      padding: 10px 20px 10px 100px;
      background: rgba(59, 130, 246, 0.03);
    }

    .tache-add-btn {
      display: inline-flex;
      align-items: center;
      gap: 8px;
      font-size: 12px;
    }

    .task-composer {
      display: flex;
      align-items: center;
      gap: 10px;
      padding: 12px 14px;
      border: 1px solid rgba(108, 99, 255, 0.22);
      border-radius: 14px;
      background: linear-gradient(135deg, rgba(108, 99, 255, 0.08), rgba(0, 212, 170, 0.04));
    }

    .task-composer-input {
      flex: 1;
      min-width: 0;
    }

    .task-composer-actions {
      display: flex;
      gap: 8px;
      flex-shrink: 0;
    }

    .tache-name {
      flex: 1;
      font-size: 13px;
      color: var(--text);
    }

    .tache-time {
      font-size: 12px;
      color: var(--text3);
      min-width: 70px;
    }

    .tache-prog {
      font-size: 12px;
      color: var(--secondary);
      min-width: 40px;
      text-align: right;
      font-weight: 600;
    }

    .expand-icon {
      width: 20px;
      height: 20px;
      border-radius: 4px;
      border: none;
      background: none;
      color: var(--text3);
      cursor: pointer;
      display: flex;
      align-items: center;
      justify-content: center;
      font-size: 11px;
      transition: var(--transition);
      flex-shrink: 0;
    }

    .expand-icon.open {
      transform: rotate(90deg);
      color: var(--primary);
    }

    /* ===== NOTIFICATIONS ===== */
    .notif-container {
      position: fixed;
      top: 80px;
      right: 20px;
      z-index: 2000;
      display: flex;
      flex-direction: column;
      gap: 8px;
    }

    .notif {
      background: var(--bg2);
      border: 1px solid var(--border);
      border-radius: var(--radius-sm);
      padding: 14px 18px;
      display: flex;
      align-items: center;
      gap: 10px;
      box-shadow: var(--shadow);
      min-width: 260px;
      animation: slideIn 0.3s ease;
      font-size: 13px;
    }

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

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

    @keyframes slideIn {
      from {
        transform: translateX(100%);
        opacity: 0;
      }

      to {
        transform: translateX(0);
        opacity: 1;
      }
    }

    @keyframes fadeOut {
      to {
        opacity: 0;
        transform: translateX(100%);
      }
    }

    /* ===== RESPONSIVE ===== */
    @media (max-width: 1100px) {
      .modules-grid {
        grid-template-columns: repeat(auto-fill, minmax(min(100%, 260px), 1fr)) !important;
      }

      .topbar-stats {
        display: none;
      }
    }

    @media (max-width: 1024px) {
      .sidebar {
        display: flex;
        width: min(82vw, 300px);
        transform: translateX(-100%);
        box-shadow: var(--shadow-lg);
        z-index: 180;
      }

      .sidebar.mobile-open {
        transform: translateX(0);
      }

      /* An open drawer keeps its full width even when the collapsed state is persisted */
      body.suivi-app #sidebar.mobile-open.collapsed {
        width: min(82vw, 300px) !important;
        min-width: min(82vw, 300px) !important;
        max-width: min(82vw, 300px) !important;
      }

      .sidebar-backdrop {
        display: block;
        position: fixed;
        inset: 0;
        background: rgba(15, 17, 23, 0.48);
        opacity: 0;
        pointer-events: none;
        transition: var(--transition);
        z-index: 160;
      }

      .sidebar-backdrop.open {
        opacity: 1;
        pointer-events: auto;
      }

      .main-content,
      .main-content.expanded {
        margin-left: 0;
        padding-inline: var(--layout-side-gap-mobile);
      }

      .topbar {
        padding: 12px;
        min-height: 72px;
        gap: 10px;
      }

      .topbar-main-row {
        flex-wrap: wrap;
      }

      .topbar-subject {
        min-width: 0;
        flex: 1 1 auto;
      }

      .topbar-speciality-wrap {
        order: 2;
        width: 100%;
        justify-content: flex-start;
      }

      .topbar-speciality-tabs {
        flex: 1 1 auto;
        overflow-x: auto;
        flex-wrap: nowrap;
        padding-bottom: 2px;
      }

      .topbar-search-wrap {
        min-width: 100%;
      }

      .topbar-filter-row {
        flex-wrap: wrap;
      }

      .topbar-theme-toggle {
        display: flex;
      }

      .spec-cards {
        grid-template-columns: 1fr;
      }

      .modules-grid {
        grid-template-columns: 1fr !important;
        gap: 12px !important;
      }

      .year-select,
      .year-select.year-select-5 {
        grid-template-columns: repeat(3, 1fr);
      }

      .page-content {
        padding: 0 0 calc(96px + env(safe-area-inset-bottom));
      }

      /* Breathing room above the home hero on phones/tablets (top padding removed above) */
      #page-home {
        padding-top: 18px;
      }

      .page>* {
        width: 100%;
        max-width: 100%;
      }

      .course-command-bar {
        padding: 12px;
        gap: 10px;
      }

      .course-page-header {
        display: flex !important;
        flex-wrap: wrap !important;
        align-items: center !important;
        justify-content: space-between !important;
        gap: 10px !important;
        width: 100% !important;
      }

      .course-page-title-wrap {
        flex: 1 1 auto !important;
        min-width: 0 !important;
        width: auto !important;
      }

      .course-header-actions {
        flex: 0 0 auto !important;
        margin-left: auto !important;
      }

      .course-page-stats {
        width: 100% !important;
        display: grid !important;
        grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
        gap: 6px !important;
      }

      .table-toolbar {
        padding-top: 10px;
        flex-wrap: wrap;
      }

      .toolbar-primary,
      .toolbar-secondary,
      .toolbar-actions {
        width: 100%;
        flex-wrap: wrap;
      }

      .toolbar-secondary,
      .toolbar-actions {
        justify-content: flex-start;
      }

      .group-header {
        flex-wrap: wrap;
      }

      .group-header .group-stats {
        width: 100%;
        order: 3;
      }

      .group-header .group-actions {
        margin-left: auto;
      }

      .module-card {
        padding: 14px 16px !important;
      }

      .module-avatar {
        width: 48px !important;
        height: 48px !important;
        min-width: 48px !important;
        min-height: 48px !important;
        border-radius: 13px !important;
      }

      .module-card .module-meta {
        grid-template-columns: repeat(2, minmax(0, max-content));
      }

      .module-card .module-actions {
        flex-direction: row;
      }

      .mobile-bottom-nav {
        display: block;
      }

      .chrono-float {
        bottom: calc(92px + env(safe-area-inset-bottom));
        right: 12px;
      }

      .tache-add-wrap {
        padding-left: 18px;
        padding-right: 18px;
      }

      .task-composer {
        flex-wrap: wrap;
      }

      .task-composer-actions {
        width: 100%;
        justify-content: flex-end;
      }

      .mobile-course-card,
      .mobile-course-row {
        padding: 12px 14px;
        border-radius: 0 !important;
        box-shadow: none !important;
      }

      .mobile-course-line {
        gap: 8px;
      }

      .mobile-course-summary {
        width: 100%;
      }

      .bottom-nav-item {
        min-height: 48px;
      }
    }

    /* ===== MISC ===== */
    .empty-state {
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: center;
      padding: 60px 20px;
      color: var(--text3);
      text-align: center;
    }

    .empty-state i {
      font-size: 48px;
      margin-bottom: 16px;
      opacity: 0.4;
    }

    .empty-state h3 {
      font-size: 18px;
      font-weight: 600;
      margin-bottom: 8px;
      color: var(--text2);
    }

    .tag {
      display: inline-flex;
      align-items: center;
      gap: 4px;
      padding: 2px 8px;
      border-radius: 6px;
      font-size: 11px;
      font-weight: 600;
      background: var(--bg3);
      color: var(--text2);
      border: 1px solid var(--border);
    }

    .color-dot {
      width: 8px;
      height: 8px;
      border-radius: 50%;
      flex-shrink: 0;
    }

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

    .tooltip {
      position: relative;
    }

    .tooltip:hover::after {
      content: attr(data-tip);
      position: absolute;
      bottom: 110%;
      left: 50%;
      transform: translateX(-50%);
      background: var(--bg4);
      color: var(--text);
      font-size: 11px;
      padding: 4px 8px;
      border-radius: 6px;
      white-space: nowrap;
      pointer-events: none;
      z-index: 100;
      border: 1px solid var(--border);
    }

    .couche-colors {
      --c1: #6C63FF;
      --c2: #00D4AA;
      --c3: #FF6B6B;
      --c4: #FFD93D;
    }

    .inline-edit {
      border: none;
      background: transparent;
      color: var(--text);
      font-size: inherit;
      font-family: inherit;
      font-weight: inherit;
      outline: none;
      width: 100%;
    }

    .inline-edit:focus {
      border-bottom: 1px solid var(--primary);
    }

    /* PC / Desktop: Row actions always visible as requested in Screenshot 1 */
    .row-actions,
    .course-table .row-actions {
      display: flex !important;
      opacity: 1 !important;
      visibility: visible !important;
      gap: 3px !important;
      align-items: center !important;
      justify-content: flex-end !important;
    }

    .row-action-btn,
    .course-table .row-action-btn {
      width: 24px !important;
      height: 24px !important;
      border-radius: 6px !important;
      border: 1px solid transparent !important;
      cursor: pointer !important;
      background: transparent !important;
      color: var(--text3, #64748b) !important;
      display: inline-flex !important;
      align-items: center !important;
      justify-content: center !important;
      font-size: 11px !important;
      opacity: 1 !important;
      visibility: visible !important;
      transition: all 0.15s ease !important;
    }

    .row-action-btn:hover,
    .course-table .row-action-btn:hover {
      background: rgba(99, 102, 241, 0.12) !important;
      color: var(--primary, #6366f1) !important;
      border-color: rgba(99, 102, 241, 0.25) !important;
    }

    .row-action-btn.btn-trash-action,
    .course-table .row-action-btn[title="Supprimer"],
    .course-table .row-action-btn i.fa-trash,
    .course-table .row-action-btn i.fa-trash-can {
      color: #ef4444 !important;
    }

    .row-action-btn.btn-trash-action:hover,
    .course-table .row-action-btn[title="Supprimer"]:hover {
      background: rgba(239, 68, 68, 0.12) !important;
      color: #dc2626 !important;
      border-color: rgba(239, 68, 68, 0.25) !important;
    }

    .couche-label {
      display: flex;
      align-items: center;
      gap: 4px;
      font-size: 11px;
      font-weight: 700;
      padding: 2px 6px;
      border-radius: 4px;
    }

    .c1-label {
      background: rgba(108, 99, 255, 0.15);
      color: #6C63FF;
    }

    .c2-label {
      background: rgba(0, 212, 170, 0.15);
      color: #00D4AA;
    }

    .c3-label {
      background: rgba(255, 107, 107, 0.15);
      color: #FF6B6B;
    }

    .c4-label {
      background: rgba(255, 217, 61, 0.15);
      color: #FFD93D;
    }

    /* ===== CUSTOM SELECT MENUS (table selects) ===== */
    .ctrl-select-menu {
      position: fixed;
      top: 0;
      left: 0;
      background: #ffffff;
      border: 1px solid var(--border-color);
      border-radius: 13px;
      min-width: 150px;
      max-height: min(270px, calc(100vh - 24px));
      overflow-y: auto;
      z-index: 1300;
      box-shadow: var(--shadow-lg);
      display: none;
      padding: 5px;
      overscroll-behavior: contain;
    }

    [data-theme="dark"] .ctrl-select-menu {
      background: #151d30;
    }

    .ctrl-select-menu.open {
      display: block;
      animation: pnsDropIn 0.16s cubic-bezier(0.4, 0, 0.2, 1);
    }

    .ctrl-select-item {
      width: 100%;
      padding: 7px 10px;
      font-size: 12px;
      font-weight: 600;
      color: var(--text-main);
      cursor: pointer;
      transition: background-color 0.1s ease, color 0.1s ease;
      display: flex;
      align-items: center;
      gap: 8px;
      border: none;
      background: transparent;
      border-radius: 8px;
      text-align: left;
      user-select: none;
    }

    .ctrl-select-item:hover {
      background: var(--primary-light);
      color: var(--primary);
    }

    .ctrl-select-item.selected {
      background: var(--primary-light);
      color: var(--primary);
      font-weight: 800;
    }

    .ctrl-select-item .ctrl-check {
      width: 14px;
      flex-shrink: 0;
      font-size: 10px;
      visibility: hidden;
    }

    .ctrl-select-item.selected .ctrl-check {
      visibility: visible;
    }

    .ctrl-select-item.selected .ctrl-label {
      flex: 1;
      min-width: 0;
      overflow: hidden;
      text-overflow: ellipsis;
      white-space: nowrap;
    }

    .ctrl-select-item.add-option {
      color: #34D399;
      font-weight: 700;
      border-top: 1px dashed var(--border-color);
      border-radius: 0 0 8px 8px;
      margin-top: 3px;
    }

    .ctrl-select-item.add-option:hover {
      background: rgba(16, 185, 129, 0.12);
      color: #34D399;
    }

    .ctrl-select-item.empty-option {
      color: var(--text-muted);
      font-weight: 600;
    }

    /* Scrollable topbar for filters */
    .topbar-filter-scroll {
      display: flex;
      gap: 6px;
      overflow-x: auto;
      padding-bottom: 2px;
      flex: 1;
      min-width: 0;
    }

    .topbar-filter-scroll::-webkit-scrollbar {
      height: 2px;
    }

    .filter-dropdown {
      position: relative;
    }

    .filter-dropdown {
      position: relative;
    }

    .filter-dropdown-menu {
      position: fixed;
      top: 0;
      left: 0;
      background: #ffffff;
      border: 1px solid var(--border-color);
      border-radius: 14px;
      min-width: 200px;
      max-height: min(320px, calc(100vh - 32px));
      overflow-y: auto;
      z-index: 1200;
      box-shadow: var(--shadow-lg);
      display: none;
      padding: 8px;
    }

    [data-theme="dark"] .filter-dropdown-menu {
      background: #161c2d;
      border-color: var(--border-color);
    }

    .filter-dropdown-menu.open {
      display: block;
      animation: pnsDropIn 0.18s cubic-bezier(0.4, 0, 0.2, 1);
    }

    @keyframes pnsDropIn {
      from { opacity: 0; transform: translateY(-5px); }
      to { opacity: 1; transform: translateY(0); }
    }

    .filter-menu-header {
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: 8px;
      padding: 6px 8px 10px;
      border-bottom: 1px solid var(--border-color);
      margin-bottom: 6px;
    }

    .filter-menu-title {
      font-size: 11px;
      font-weight: 800;
      color: var(--text-muted);
      text-transform: uppercase;
      letter-spacing: 0.5px;
    }

    .filter-clear-btn {
      border: none;
      background: transparent;
      color: var(--primary);
      cursor: pointer;
      font-size: 11px;
      font-weight: 700;
      padding: 2px 6px;
      border-radius: 6px;
      transition: all 0.15s ease;
    }

    .filter-clear-btn:hover {
      background: var(--primary-light);
    }

    .filter-option {
      width: 100%;
      padding: 7px 10px;
      font-size: 12px;
      font-weight: 600;
      color: var(--text-main);
      cursor: pointer;
      transition: background-color 0.1s ease, color 0.1s ease;
      display: flex;
      align-items: center;
      gap: 8px;
      border: none;
      background: transparent;
      border-radius: 8px;
      text-align: left;
      user-select: none;
    }

    .filter-option:hover {
      background: var(--primary-light);
      color: var(--primary);
    }

    .filter-option.selected {
      background: var(--primary-light);
      color: var(--primary);
      font-weight: 700;
    }

    .filter-option-checkbox {
      width: 16px;
      height: 16px;
      border-radius: 4px;
      border: 1.5px solid var(--border-color);
      background: var(--bg-input);
      display: inline-flex;
      align-items: center;
      justify-content: center;
      flex-shrink: 0;
      font-size: 9px;
      color: #ffffff;
      transition: all 0.15s ease;
    }

    .filter-option.selected .filter-option-checkbox {
      border-color: var(--primary);
      background: var(--primary);
    }

    .filter-option-label {
      flex: 1;
      min-width: 0;
    }

    .filter-option-count {
      color: var(--text-muted);
      font-size: 11px;
      font-weight: 600;
    }

    .date-badge {
      font-size: 11px;
      color: var(--text3);
    }

    /* ===== DATE CONTROLS : style minimal (une seule ligne, soulignement fin) ===== */
    .date-control {
      position: relative;
      display: flex;
      align-items: center;
      gap: 5px;
      min-width: 0;
    }

    .course-table .form-control.ctrl-date-underline,
    .date-control .form-control {
      flex: 1 1 auto;
      width: auto;
      min-width: 0;
      background: transparent;
      border: none;
      border-bottom: 1px solid rgba(148, 163, 184, 0.4);
      border-radius: 0;
      box-shadow: none;
      height: 26px;
      min-height: 26px;
      padding: 2px 4px;
      font-size: 11px;
      color: var(--text);
      transition: border-color 0.15s ease, color 0.15s ease;
    }

    .course-table .form-control.ctrl-date-underline:hover,
    .date-control .form-control:hover {
      border-bottom-color: rgba(148, 163, 184, 0.75);
    }

    .course-table .form-control.ctrl-date-underline:focus,
    .date-control .form-control:focus {
      border-bottom-color: var(--primary);
      box-shadow: none;
      background: transparent;
      outline: none;
    }

    /* Texte du date coloré selon le statut (pas seulement l'icône) */
    .date-control.status-green .form-control {
      color: #0FA97E;
      font-weight: 700;
    }

    .date-control.status-yellow .form-control {
      color: #D97706;
      font-weight: 700;
    }

    .date-control.status-red .form-control {
      color: #E2444C;
      font-weight: 700;
    }

    /* Icône calendrier native : invisible mais cliquable */
    .course-table input[type="date"].ctrl-date-underline::-webkit-calendar-picker-indicator,
    .date-control input[type="date"]::-webkit-calendar-picker-indicator {
      opacity: 0;
      position: absolute;
      right: 0;
      width: 20px;
      height: 100%;
      cursor: pointer;
    }

    [data-theme="dark"] .course-table input[type="date"].ctrl-date-underline::-webkit-calendar-picker-indicator,
    [data-theme="dark"] .date-control input[type="date"]::-webkit-calendar-picker-indicator {
      filter: none;
    }

    /* Icône de statut : élément séparé à côté du champ, ne recouvre jamais le texte */
    .date-status-icon {
      font-size: 11px;
      line-height: 1;
      flex-shrink: 0;
      pointer-events: none;
    }

    .date-status-icon.status-green {
      color: #10B981;
    }

    .date-status-icon.status-yellow {
      color: #F59E0B;
    }

    .date-status-icon.status-red {
      color: #EF4444;
    }

    .difficulty-stars {
      display: flex;
      gap: 1px;
    }

    .diff-star {
      font-size: 10px;
      color: var(--text3);
    }

    .diff-star.active {
      color: var(--accent2);
    }

    .group-quick-add,
    .course-page-quick-add {
      display: flex;
      gap: 8px;
      flex-wrap: wrap;
      padding: 12px 16px;
      border-top: 1px dashed var(--border);
      background: rgba(108, 99, 255, 0.03);
    }

    .group-quick-add {
      justify-content: center;
      padding: 8px 12px 4px;
    }

    .add-course-btn {
      display: inline-flex;
      align-items: center;
      gap: 8px;
      padding: 6px 18px;
      background: transparent;
      border: 1.5px dashed rgba(148, 163, 184, 0.55);
      border-radius: 10px;
      color: var(--text-muted);
      font-family: var(--font-main);
      font-size: 11.5px;
      font-weight: 700;
      letter-spacing: 0.2px;
      cursor: pointer;
      box-shadow: none;
      transition: background 0.15s ease, border-color 0.15s ease, color 0.15s ease;
      user-select: none;
    }

    .add-course-btn i {
      font-size: 10px;
    }

    .add-course-btn:hover {
      background: rgba(148, 163, 184, 0.1);
      border-color: rgba(148, 163, 184, 0.85);
      color: var(--text-main);
    }

    .add-course-btn:active {
      background: rgba(148, 163, 184, 0.16);
    }

    /* ===== Modern confirm dialog ===== */
    .confirm-modal {
      max-width: 380px;
      text-align: center;
    }

    .confirm-modal .modal-body {
      padding: 26px 24px 14px;
    }

    .confirm-icon {
      width: 52px;
      height: 52px;
      margin: 0 auto 14px;
      border-radius: 16px;
      display: flex;
      align-items: center;
      justify-content: center;
      font-size: 20px;
      color: #EF4444;
      background: rgba(239, 68, 68, 0.12);
      border: 1px solid rgba(239, 68, 68, 0.25);
    }

    .confirm-title {
      font-family: var(--font-heading);
      font-size: 16px;
      font-weight: 800;
      color: var(--text-main);
      margin-bottom: 6px;
    }

    .confirm-message {
      font-size: 13px;
      color: var(--text-muted);
      line-height: 1.5;
    }

    .confirm-footer {
      justify-content: center;
      gap: 10px;
      padding: 8px 24px 22px;
    }

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

    .pdf-vue-btn {
      width: 100%;
      padding: 14px 16px;
      border-radius: 14px;
      border: 1px solid var(--border);
      background: var(--card);
      color: var(--text);
      cursor: pointer;
      text-align: left;
      transition: var(--transition);
    }

    .pdf-vue-btn:hover,
    .pdf-vue-btn.active {
      border-color: var(--primary);
      background: rgba(108, 99, 255, 0.08);
      box-shadow: 0 8px 24px rgba(108, 99, 255, 0.12);
    }

    .pdf-vue-btn small {
      display: block;
      color: var(--text2);
      font-size: 11px;
      margin-top: 4px;
    }

    /* Image upload overlay */
    .img-upload-overlay {
      position: absolute;
      inset: 0;
      background: rgba(0, 0, 0, 0.5);
      display: flex;
      align-items: center;
      justify-content: center;
      opacity: 0;
      transition: var(--transition);
      cursor: pointer;
      border-radius: 10px;
    }

    .module-card:hover .img-upload-overlay {
      opacity: 1;
    }

    .img-wrapper {
      position: relative;
    }
    /* ===== NO-MOVE INTERACTIONS (color/background feedback only) ===== */
    body.suivi-app .btn:hover,
    body.suivi-app .btn:active,
    body.suivi-app .filter-btn:hover,
    body.suivi-app .filter-btn:active,
    body.suivi-app .dropdown-toggle:hover,
    body.suivi-app .spec-card:hover,
    body.suivi-app .module-card:hover,
    body.suivi-app .module-action-btn:hover,
    body.suivi-app .theme-toggle-btn:hover,
    body.suivi-app .sidebar-tool-btn:hover,
    body.suivi-app .bottom-nav-item:hover,
    body.suivi-app .bottom-nav-item:active,
    body.suivi-app .course-page-header .back-btn:hover,
    body.suivi-app .course-stat-card:hover,
    body.suivi-app .table-toolbar .btn:hover,
    body.suivi-app .modal-close:hover,
    body.suivi-app .custom-file-upload:hover,
    body.suivi-app .year-btn:active,
    body.suivi-app .nav-link:active {
      transform: none !important;
    }

    /* ===== TACHES PAGE : SUBJECT TABS are below; year tabs use shared .year-select ===== */

    /* ===== TACHES PAGE + REPETITION : SUBJECT TABS (QCMs PNS style, pill left-aligned) ===== */
    .tache-subject-tabs {
      display: flex;
      align-items: center;
      gap: 3px;
      flex-wrap: nowrap;
      width: fit-content;
      max-width: 100%;
      margin: 0 0 16px 0 !important;
      justify-content: flex-start !important;
      background: linear-gradient(135deg, rgba(37, 99, 235, 0.10) 0%, rgba(6, 182, 212, 0.06) 100%);
      padding: 3px;
      border-radius: 99px;
      border: 1px solid rgba(37, 99, 235, 0.15);
      overflow-x: auto;
      scrollbar-width: none;
      -webkit-overflow-scrolling: touch;
      box-sizing: border-box;
    }

    .tache-subject-tabs::-webkit-scrollbar {
      display: none;
    }

    [data-theme="dark"] .tache-subject-tabs {
      background: linear-gradient(135deg, rgba(37, 99, 235, 0.16) 0%, rgba(6, 182, 212, 0.08) 100%);
      border: 1px solid rgba(37, 99, 235, 0.20);
    }

    .msubject-tab {
      padding: 5px 9px;
      font-size: 12px;
      font-weight: 700;
      border: none;
      background: transparent;
      color: var(--text-muted);
      font-family: 'Manrope', 'Plus Jakarta Sans', sans-serif;
      border-radius: 99px;
      white-space: nowrap;
      display: inline-flex;
      align-items: center;
      gap: 7px;
      cursor: pointer;
      transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
      user-select: none;
      height: 34px;
      flex-shrink: 0;
      box-sizing: border-box;
    }

    .msubject-tab:hover {
      color: var(--text2);
      background: rgba(255, 255, 255, 0.4);
    }

    [data-theme="dark"] .msubject-tab:hover {
      background: rgba(255, 255, 255, 0.08);
    }

    .msubject-tab.active {
      background: var(--bg-input, #ffffff);
      color: var(--primary, #2563eb);
      box-shadow: 0 2px 6px rgba(0, 0, 0, 0.08);
      font-weight: 800;
    }

    [data-theme="dark"] .msubject-tab.active {
      background: var(--bg-card, #1e293b);
      color: #60a5fa;
      box-shadow: 0 2px 8px rgba(0, 0, 0, 0.3);
    }

    .msubject-tab .checkbox-custom {
      width: 15px;
      height: 15px;
      border-radius: 4px;
    }

    .msubject-icon {
      width: 20px;
      height: 20px;
      border-radius: 6px;
      object-fit: contain;
      flex-shrink: 0;
    }

    /* Never show duplicate fallback icon when image exists */
    .msubject-fallback {
      display: none;
    }

    /* Tab States: Default (inactive) hides label — active shows module name */
    .msubject-tab:not(.active) .msubject-label {
      display: none;
    }

    .msubject-tab.active .msubject-label {
      display: inline-flex;
    }

    /* ---- Modern checkbox (same as QCMs PNS tree) ---- */
    .checkbox-custom {
      position: relative;
      width: 20px;
      height: 20px;
      border-radius: 7px;
      border: 2px solid rgba(148, 163, 184, .65);
      background: #fff;
      display: inline-flex;
      align-items: center;
      justify-content: center;
      flex-shrink: 0;
      cursor: pointer;
      transition: all .16s cubic-bezier(.4, 0, .2, 1);
      box-shadow: inset 0 1px 2px rgba(15, 23, 42, .06);
    }

    [data-theme="dark"] .checkbox-custom {
      background: rgba(15, 23, 42, .9);
      border-color: rgba(148, 163, 184, .5);
    }

    .checkbox-custom:hover {
      border-color: var(--primary);
      transform: scale(1.07);
      box-shadow: 0 0 0 3px rgba(37, 99, 235, 0.12);
    }

    .checkbox-custom.checked {
      border-color: var(--primary);
      background: linear-gradient(135deg, #2563eb 0%, #1d4ed8 100%);
      box-shadow: 0 3px 8px rgba(37, 99, 235, .35);
    }

    .checkbox-custom.checked::after {
      content: "\f00c"; /* FontAwesome Check */
      font-family: "Font Awesome 6 Free";
      font-weight: 900;
      font-size: 11px;
      color: #fff;
      line-height: 1;
    }

    .tache-empty-note {
      font-size: 12.5px;
      color: var(--text3);
      padding: 8px 4px;
    }

    /* ===== TACHES PAGE : VIEW TABS ===== */
    .tache-view-tabs-wrap {
      display: flex;
      justify-content: center;
      align-items: center;
      width: 100%;
      margin-bottom: 18px;
      gap: 8px;
    }

    .tache-view-tabs {
      display: inline-flex;
      flex-wrap: wrap;
      justify-content: center;
      background: var(--bg3);
      border: 1px solid var(--border-color);
      border-radius: 14px;
      padding: 4px;
      gap: 4px;
      margin: 0;
    }

    .tview-btn {
      padding: 8px 16px;
      border: none;
      border-radius: 10px;
      background: transparent;
      color: var(--text2);
      font-family: inherit;
      font-weight: 600;
      font-size: 12.5px;
      cursor: pointer;
      display: inline-flex;
      align-items: center;
      gap: 7px;
      transition: background 0.2s ease, color 0.2s ease, box-shadow 0.2s ease;
      user-select: none;
    }

    .tview-btn i {
      font-size: 11px;
    }

    .tview-btn:hover {
      color: var(--primary);
      background: var(--primary-light);
    }

    .tview-btn.active {
      background: var(--bg-card);
      color: var(--primary);
      box-shadow: var(--shadow-sm);
    }

    [data-theme="dark"] .tview-btn.active {
      background: rgba(37, 99, 235, 0.18);
      color: #60a5fa;
    }

    /* ===== TACHES PAGE : COUCHE + VIEW TABS TOOLBAR ===== */
    .tache-toolbar {
      display: flex;
      align-items: center;
      gap: 12px;
      flex-wrap: wrap;
      margin-bottom: 18px;
    }

    .tache-toolbar .tache-couche-tabs {
      flex: 1 1 320px;
      width: auto;
      min-width: 300px;
      max-width: 456px;
      margin: 0;
    }

    .tache-toolbar .tache-view-tabs-wrap {
      flex: 0 0 auto;
      width: auto;
      margin-bottom: 0;
      justify-content: flex-start;
    }

    /* ===== TACHES MATRIX TABLE ===== */
    .tm-card {
      background: var(--bg-card);
      border: 1px solid var(--border-color);
      border-radius: 18px;
      box-shadow: var(--shadow-sm);
      overflow: hidden;
    }

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

    .tm-table {
      border-collapse: separate;
      border-spacing: 0;
      width: 100%;
      font-size: 12px;
    }

    .tm-table thead th {
      position: sticky;
      background: var(--bg2);
      z-index: 3;
    }

    .tm-table thead tr:first-child th {
      top: 0;
      z-index: 4;
    }

    .tm-table thead tr:nth-child(2) th {
      top: 38px;
      z-index: 3;
    }

    .tm-corner {
      position: sticky !important;
      left: 0;
      z-index: 5 !important;
      text-align: left;
      padding: 8px 12px;
      font-size: 12px;
      font-weight: 700;
      color: var(--text);
      border-bottom: 1px solid var(--border-color);
      border-right: 1px solid var(--border-color);
      width: 170px;
      min-width: 150px;
      max-width: 190px;
    }

    .tm-corner i {
      color: var(--primary);
      margin-right: 4px;
    }

    .tm-couche {
      height: 38px;
      padding: 4px 8px;
      text-align: center;
      font-size: 11.5px;
      font-weight: 700;
      border-bottom: 1px solid var(--border-color);
      white-space: nowrap;
    }

    .tm-couche.c1 { color: #6C63FF; background: rgba(108, 99, 255, 0.08); }
    .tm-couche.c2 { color: #00A88A; background: rgba(0, 212, 170, 0.08); }
    .tm-couche.c3 { color: #E14D4D; background: rgba(255, 107, 107, 0.08); }
    .tm-couche.c4 { color: #C99A00; background: rgba(255, 217, 61, 0.10); }

    [data-theme="dark"] .tm-couche.c1 { color: #8B85FF; }
    [data-theme="dark"] .tm-couche.c2 { color: #2BE0BC; }
    [data-theme="dark"] .tm-couche.c3 { color: #FF8080; }
    [data-theme="dark"] .tm-couche.c4 { color: #FFE066; }

    .tm-couche-badge {
      display: inline-block;
      color: #ffffff;
      font-size: 10px;
      font-weight: 800;
      border-radius: 6px;
      padding: 2px 6px;
      margin-right: 4px;
      vertical-align: 1px;
    }

    .tm-task {
      height: 116px;
      min-width: 30px;
      vertical-align: bottom;
      text-align: center;
      padding: 8px 2px;
      border-bottom: 1px solid var(--border-color);
    }

    .tm-task .tm-vtext {
      display: inline-block;
      writing-mode: vertical-rl;
      transform: rotate(180deg);
      white-space: nowrap;
      font-weight: 600;
      font-size: 10.5px;
      color: var(--tc, var(--text2));
      max-width: 40px;
      overflow: hidden;
      text-overflow: ellipsis;
    }

    .tm-lesson {
      position: sticky !important;
      left: 0;
      z-index: 2;
      text-align: left;
      padding: 7px 12px;
      font-weight: 600;
      font-size: 12px;
      color: var(--text);
      background: var(--bg-card);
      border-bottom: 1px solid var(--border-color);
      border-right: 1px solid var(--border-color);
      max-width: 170px;
      white-space: nowrap;
      overflow: hidden;
      text-overflow: ellipsis;
    }

    .tm-table tbody tr:nth-child(even) .tm-lesson {
      background: var(--bg3);
    }

    .tm-table tbody tr:hover .tm-lesson {
      background: var(--item-bg-hover);
    }

    .tm-cell {
      text-align: center;
      padding: 4px 2px;
      border-bottom: 1px solid var(--border-color);
      min-width: 30px;
    }

    .tm-cell.c1 { background: rgba(108, 99, 255, 0.035); }
    .tm-cell.c2 { background: rgba(0, 212, 170, 0.035); }
    .tm-cell.c3 { background: rgba(255, 107, 107, 0.035); }
    .tm-cell.c4 { background: rgba(255, 217, 61, 0.045); }

    .tm-table tbody tr:hover .tm-cell.c1 { background: rgba(108, 99, 255, 0.08); }
    .tm-table tbody tr:hover .tm-cell.c2 { background: rgba(0, 212, 170, 0.08); }
    .tm-table tbody tr:hover .tm-cell.c3 { background: rgba(255, 107, 107, 0.08); }
    .tm-table tbody tr:hover .tm-cell.c4 { background: rgba(255, 217, 61, 0.10); }

    /* Colored checkboxes */
    .tm-check {
      display: inline-flex;
      cursor: pointer;
      position: relative;
    }

    .tm-check input {
      position: absolute;
      opacity: 0;
      pointer-events: none;
    }

    .tm-check-box {
      width: 16px;
      height: 16px;
      border-radius: 5px;
      border: 2px solid var(--tc, var(--primary));
      display: inline-flex;
      align-items: center;
      justify-content: center;
      background: transparent;
      color: transparent;
      font-size: 9px;
      transition: background 0.18s ease, box-shadow 0.18s ease;
    }

    .tm-check:hover .tm-check-box {
      background: color-mix(in srgb, var(--tc, var(--primary)) 18%, transparent);
    }

    .tm-check input:checked + .tm-check-box {
      background: var(--tc, var(--primary));
      color: #ffffff;
      box-shadow: 0 2px 8px color-mix(in srgb, var(--tc, var(--primary)) 45%, transparent);
    }

    /* Objectifs */
    .tm-obj {
      display: inline-flex;
      align-items: center;
      gap: 3px;
      justify-content: center;
    }

    .tm-obj input {
      width: 32px;
      padding: 4px 2px;
      border: 1px solid var(--border-color);
      border-radius: 7px;
      background: var(--bg-input);
      color: var(--text);
      font-family: inherit;
      font-size: 11px;
      font-weight: 600;
      text-align: center;
      transition: border-color 0.2s ease, box-shadow 0.2s ease;
    }

    .tm-obj input:focus {
      outline: none;
      border-color: var(--primary);
      box-shadow: 0 0 0 3px var(--primary-light);
    }

    .tm-obj input::-webkit-outer-spin-button,
    .tm-obj input::-webkit-inner-spin-button {
      -webkit-appearance: none;
      margin: 0;
    }

    .tm-obj input[type="number"] {
      appearance: textfield;
      -moz-appearance: textfield;
    }

    .tm-obj-unit {
      font-size: 8.5px;
      color: var(--text3);
      font-weight: 700;
      text-transform: uppercase;
    }

    .tache-unit-note {
      font-size: 11px;
      color: var(--text3);
      font-weight: 600;
      margin-left: 6px;
    }

    /* Temps total */
    .tm-temps {
      display: inline-flex;
      align-items: center;
      gap: 2px;
      justify-content: center;
    }

    .tm-temps-val {
      font-size: 11px;
      font-weight: 700;
      color: var(--text);
      min-width: 22px;
      white-space: nowrap;
    }

    .tm-play {
      width: 18px;
      height: 18px;
      border-radius: 50%;
      border: none;
      background: var(--primary-light);
      color: var(--primary);
      cursor: pointer;
      display: inline-flex;
      align-items: center;
      justify-content: center;
      font-size: 8px;
      transition: background 0.2s ease, color 0.2s ease, box-shadow 0.2s ease;
    }

    .tm-play:hover {
      background: var(--primary);
      color: #ffffff;
      box-shadow: 0 3px 10px rgba(37, 99, 235, 0.35);
    }

    .tm-play:active {
      transform: none;
    }

    /* Progression */
    .tm-prog {
      display: flex;
      flex-direction: column;
      align-items: center;
      gap: 3px;
      min-width: 34px;
    }

    .tm-prog-bar {
      width: 30px;
      height: 7px;
      border-radius: 99px;
      background: rgba(148, 163, 184, 0.18);
      border: 1px solid rgba(148, 163, 184, 0.38);
      overflow: hidden;
      box-shadow: inset 0 1px 2px rgba(15, 23, 42, 0.14);
    }

    .tm-prog-fill {
      height: 100%;
      border-radius: 99px;
      transition: width 0.3s ease;
    }

    .tm-prog-val {
      font-size: 11px;
      font-weight: 700;
      color: var(--text2);
    }

    /* Empty state */
    .tache-empty-state {
      text-align: center;
      padding: 60px 20px;
      background: var(--bg-card);
      border: 1px solid var(--border-color);
      border-radius: 18px;
    }

    .tache-empty-state i {
      font-size: 34px;
      color: var(--text3);
      margin-bottom: 12px;
    }

    .tache-empty-state h3 {
      font-size: 16px;
      font-weight: 700;
      color: var(--text);
      margin-bottom: 6px;
    }

    .tache-empty-state p {
      font-size: 12.5px;
      color: var(--text3);
    }

    /* ===== COUCHE TABS (single segmented bar, all viewports) ===== */
    .tache-couche-tabs {
      display: flex;
      align-items: center;
      gap: 4px;
      flex-wrap: nowrap;
      width: 100%;
      max-width: 456px;
      margin: 0 0 14px;
      padding: 4px;
      border: 1px solid var(--border-color);
      border-radius: 14px;
      background: var(--bg-card);
    }

    .tcouche-btn {
      flex: 1 1 0;
      min-width: 0;
      min-height: 34px;
      padding: 7px 10px;
      border-radius: 10px;
      border: 1px solid transparent;
      background: transparent;
      color: var(--text2);
      font-family: inherit;
      font-weight: 600;
      font-size: 12px;
      cursor: pointer;
      display: inline-flex;
      align-items: center;
      justify-content: center;
      gap: 6px;
      transition: background 0.2s ease, color 0.2s ease, border-color 0.2s ease, box-shadow 0.2s ease;
      user-select: none;
    }

    .tcouche-btn:hover {
      background: color-mix(in srgb, var(--cc, var(--primary)) 8%, transparent);
    }

    .tcouche-btn:focus-visible {
      outline: 2px solid var(--cc, var(--primary));
      outline-offset: 1px;
    }

    .tcouche-badge {
      display: inline-flex;
      align-items: center;
      justify-content: center;
      min-width: 34px;
      background: var(--cc, var(--primary));
      color: #ffffff;
      font-size: 11px;
      font-weight: 800;
      border-radius: 7px;
      padding: 4px 9px;
      line-height: 1;
    }

    .tcouche-btn.active {
      border-color: var(--cc, var(--primary));
      background: color-mix(in srgb, var(--cc, var(--primary)) 14%, transparent);
      color: var(--cc, var(--primary));
      box-shadow: 0 2px 10px color-mix(in srgb, var(--cc, var(--primary)) 25%, transparent);
    }

    @media (max-width: 768px) {
      .tache-toolbar {
        display: block;
        margin-bottom: 0;
      }

      .tache-toolbar .tache-couche-tabs {
        width: 100%;
        min-width: 0;
        max-width: 100%;
        margin: 0 0 14px;
      }

      .tache-toolbar .tache-view-tabs-wrap {
        width: 100%;
        margin-bottom: 18px;
      }

      #page-taches .tview-btn span {
        display: none;
      }

      #page-taches .tview-btn.active span {
        display: inline;
      }

      .tache-toolbar .tache-unit-note {
        display: none;
      }

      .tm-corner {
        width: 120px;
        min-width: 110px;
        max-width: 130px;
        padding: 6px 8px;
        font-size: 11px;
      }

      .tm-lesson {
        max-width: 120px;
        padding: 6px 8px;
        font-size: 11px;
      }

      .tm-prog-bar {
        width: 22px;
      }

      .tm-task {
        height: 100px;
        min-width: 26px;
      }

      .tm-task .tm-vtext {
        font-size: 9.5px;
        max-width: 30px;
      }

      .tm-obj input {
        width: 30px;
        font-size: 10px;
      }

      .tm-obj-unit {
        display: none;
      }

      .tm-temps {
        flex-direction: column;
        gap: 2px;
      }

      .tm-cell {
        min-width: 24px;
        padding: 3px 1px;
      }

      .tm-prog {
        min-width: 24px;
      }

      .tm-prog-val {
        font-size: 9.5px;
      }
    }

    /* ===== TACHES TOPBAR (year tabs left-aligned) ===== */
    .taches-topbar {
      display: flex;
      justify-content: flex-start;
      align-items: center;
      width: 100%;
      margin-bottom: 14px;
    }

    /* ===== TÂCHES : années à droite du titre (ordinateur) ===== */
    .tache-filters-row {
      display: block;
    }

    /* Barres « années » et « matières » : MÊME couleur + MÊME hauteur */
    #page-taches .taches-topbar .year-select {
      background: linear-gradient(135deg, rgba(37, 99, 235, 0.10) 0%, rgba(6, 182, 212, 0.06) 100%) !important;
      border: 1px solid rgba(37, 99, 235, 0.15) !important;
      border-radius: 99px !important;
      height: 38px !important;
      box-sizing: border-box !important;
      align-items: center !important;
      padding: 3px !important;
      gap: 3px !important;
    }

    [data-theme="dark"] #page-taches .taches-topbar .year-select,
    body.dark #page-taches .taches-topbar .year-select,
    body.theme-dark #page-taches .taches-topbar .year-select {
      background: linear-gradient(135deg, rgba(37, 99, 235, 0.16) 0%, rgba(6, 182, 212, 0.08) 100%) !important;
      border-color: rgba(37, 99, 235, 0.20) !important;
    }

    #page-taches .tache-subject-tabs {
      height: 38px !important;
      box-sizing: border-box !important;
      align-items: center !important;
      padding: 3px !important;
    }

    #page-taches .taches-topbar .year-btn,
    #page-taches .tache-subject-tabs .msubject-tab {
      height: 30px !important;
      box-sizing: border-box !important;
      display: inline-flex !important;
      align-items: center !important;
    }

    @media (min-width: 769px) {
      /* 1er ligne : « Tâches » (gauche)  +  années (droite) */
      #page-taches .rep-page-header {
        display: flex !important;
        align-items: center !important;
        justify-content: space-between !important;
        gap: 14px !important;
        flex-wrap: wrap !important;
        width: 100% !important;
        margin-bottom: 14px !important;
      }

      #page-taches .taches-topbar .year-select {
        padding: 3px !important;
        gap: 2px !important;
      }

      #page-taches .taches-topbar .year-btn {
        padding: 6px 10px !important;
        font-size: 11.5px !important;
        gap: 5px !important;
      }

      /* 2e ligne : matières */
      .tache-filters-row {
        display: block !important;
      }

      .tache-filters-row .tache-subject-tabs {
        margin-bottom: 14px !important;
      }
    }

    .taches-page-title {
      display: none !important;
    }

    /* ===== CHRONO FOCUS MODE ===== */
    .chrono-focus {
      position: fixed;
      inset: 0;
      z-index: 20000;
      background: radial-gradient(ellipse at 30% 20%, rgba(108, 99, 255, 0.25), transparent 55%),
        radial-gradient(ellipse at 75% 80%, rgba(0, 212, 170, 0.18), transparent 55%),
        #0B1020;
      display: none;
      align-items: center;
      justify-content: center;
      overflow-y: auto;
    }

    .chrono-focus.open {
      display: flex;
    }

    .cf-exit {
      position: absolute;
      top: 18px;
      right: 18px;
      width: 42px;
      height: 42px;
      border-radius: 50%;
      border: 1px solid rgba(255, 255, 255, 0.15);
      background: rgba(255, 255, 255, 0.06);
      color: #CBD5F0;
      font-size: 15px;
      cursor: pointer;
      display: flex;
      align-items: center;
      justify-content: center;
      transition: background 0.2s ease, color 0.2s ease;
    }

    .cf-exit:hover {
      background: rgba(255, 255, 255, 0.14);
      color: #ffffff;
    }

    .cf-inner {
      width: min(680px, 92vw);
      text-align: center;
      padding: 32px 20px;
      display: flex;
      flex-direction: column;
      align-items: center;
      gap: 18px;
    }

    .cf-context {
      display: flex;
      align-items: center;
      gap: 16px;
      background: rgba(255, 255, 255, 0.05);
      border: 1px solid rgba(255, 255, 255, 0.09);
      border-radius: 20px;
      padding: 16px 22px;
      max-width: 100%;
      text-align: left;
    }

    .cf-mod-img {
      width: 64px;
      height: 64px;
      border-radius: 16px;
      background: rgba(255, 255, 255, 0.08);
      display: flex;
      align-items: center;
      justify-content: center;
      font-size: 30px;
      overflow: hidden;
      flex-shrink: 0;
      box-shadow: 0 6px 20px rgba(0, 0, 0, 0.35);
    }

    .cf-mod-img img {
      width: 100%;
      height: 100%;
      object-fit: cover;
    }

    .cf-context-text {
      min-width: 0;
    }

    .cf-year {
      font-size: 12px;
      font-weight: 700;
      letter-spacing: 1.5px;
      text-transform: uppercase;
      color: #67E8F9;
    }

    .cf-module {
      font-size: 21px;
      font-weight: 800;
      color: #F1F5FB;
      margin-top: 2px;
    }

    .cf-course {
      font-size: 13px;
      color: #9BA3C7;
      margin-top: 3px;
      max-width: 420px;
      white-space: nowrap;
      overflow: hidden;
      text-overflow: ellipsis;
    }

    .cf-task {
      display: inline-flex;
      align-items: center;
      gap: 10px;
      font-size: 17px;
      font-weight: 700;
      color: #E2E8F5;
      background: rgba(255, 255, 255, 0.06);
      border: 1px solid rgba(255, 255, 255, 0.1);
      border-radius: 99px;
      padding: 10px 22px;
    }

    .cf-couche-badge {
      color: #ffffff;
      font-size: 11px;
      font-weight: 800;
      border-radius: 7px;
      padding: 4px 9px;
    }

    .cf-time {
      font-size: clamp(64px, 14vw, 110px);
      font-weight: 800;
      color: #ffffff;
      letter-spacing: 2px;
      line-height: 1;
      text-shadow: 0 0 60px rgba(108, 99, 255, 0.55);
      font-variant-numeric: tabular-nums;
    }

    .cf-objective {
      font-size: 13px;
      font-weight: 600;
      color: #9BA3C7;
    }

    .cf-progress {
      width: min(420px, 80vw);
      height: 8px;
      border-radius: 99px;
      background: rgba(255, 255, 255, 0.09);
      overflow: hidden;
    }

    .cf-progress-fill {
      height: 100%;
      width: 0%;
      border-radius: 99px;
      background: linear-gradient(90deg, #6C63FF, #00D4AA);
      transition: width 0.5s ease;
    }

    .cf-sounds {
      display: flex;
      gap: 10px;
      flex-wrap: wrap;
      justify-content: center;
    }

    .cf-sound-btn {
      width: 46px;
      height: 46px;
      border-radius: 50%;
      border: 1px solid rgba(255, 255, 255, 0.14);
      background: rgba(255, 255, 255, 0.05);
      color: #9BA3C7;
      font-size: 15px;
      cursor: pointer;
      display: flex;
      align-items: center;
      justify-content: center;
      transition: all 0.2s ease;
    }

    .cf-sound-btn:hover {
      background: rgba(255, 255, 255, 0.12);
      color: #ffffff;
    }

    .cf-sound-btn.active {
      background: linear-gradient(135deg, #6C63FF, #8B85FF);
      border-color: transparent;
      color: #ffffff;
      box-shadow: 0 4px 18px rgba(108, 99, 255, 0.5);
    }

    .cf-controls {
      display: flex;
      gap: 14px;
      margin-top: 6px;
      flex-wrap: wrap;
      justify-content: center;
    }

    .cf-btn {
      padding: 13px 30px;
      border-radius: 14px;
      border: none;
      font-family: inherit;
      font-size: 14.5px;
      font-weight: 700;
      cursor: pointer;
      display: inline-flex;
      align-items: center;
      gap: 9px;
      transition: filter 0.2s ease, box-shadow 0.2s ease;
    }

    .cf-suspend {
      background: rgba(255, 255, 255, 0.1);
      color: #E2E8F5;
      border: 1px solid rgba(255, 255, 255, 0.16);
    }

    .cf-suspend:hover {
      background: rgba(255, 255, 255, 0.18);
    }

    .cf-finish {
      background: linear-gradient(135deg, #10B981, #00D4AA);
      color: #ffffff;
      box-shadow: 0 6px 22px rgba(16, 185, 129, 0.4);
    }

    .cf-finish:hover {
      filter: brightness(1.08);
    }

    /* ===== EVALUATION : KPI CARDS + HERO GRID ===== */
    .eval-kpi {
      display: flex;
      align-items: center;
      gap: 14px;
      padding: 18px;
    }

    .eval-kpi-icon {
      width: 48px;
      height: 48px;
      border-radius: 14px;
      color: #ffffff;
      font-size: 19px;
      display: flex;
      align-items: center;
      justify-content: center;
      flex-shrink: 0;
      box-shadow: 0 6px 16px rgba(0, 0, 0, 0.18);
    }

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

    .eval-kpi-value {
      font-size: 26px;
      font-weight: 800;
      line-height: 1.1;
    }

    .eval-kpi-label {
      font-size: 11.5px;
      color: var(--text3);
      font-weight: 600;
      margin-top: 2px;
    }

    .eval-hero-grid {
      display: grid;
      grid-template-columns: minmax(280px, 380px) 1fr;
      gap: 16px;
      margin-bottom: 24px;
    }

    .gauge-container {
      height: 220px !important;
    }

    @media (max-width: 900px) {
      .eval-hero-grid {
        grid-template-columns: 1fr;
      }
    }

    @media (min-width: 769px) {
      .taches-topbar {
        flex-direction: row;
        justify-content: flex-start;
        align-items: center;
      }

      .taches-page-title {
        display: none !important;
      }
    }

    /* ===== SHARED PAGE HERO HEADER (Répétition, Tâches, Évaluation) ===== */
    #page-repetition,
    #page-taches,
    #page-evaluation {
      padding-top: 26px;
    }

    .rep-page-header {
      display: flex;
      align-items: center;
      margin-bottom: 24px;
    }

    .rep-page-title {
      display: flex;
      align-items: center;
      gap: 15px;
      min-width: 0;
    }

    .rep-title-icon {
      width: 48px;
      height: 48px;
      border-radius: 15px;
      display: inline-flex;
      align-items: center;
      justify-content: center;
      flex-shrink: 0;
      color: #ffffff;
      font-size: 21px;
      background: linear-gradient(135deg, var(--primary) 0%, var(--secondary) 100%);
      transition: transform 0.4s ease;
    }

    .rep-page-title:hover .rep-title-icon {
      transform: rotate(180deg);
    }

    .rep-title-text {
      position: relative;
      font-size: 30px;
      font-weight: 800;
      letter-spacing: -0.6px;
      line-height: 1.15;
      color: var(--text);
      padding-bottom: 9px;
    }

    .rep-title-text::after {
      content: '';
      position: absolute;
      left: 1px;
      bottom: 0;
      width: 54px;
      height: 4px;
      border-radius: 99px;
      background: linear-gradient(90deg, var(--primary), var(--secondary));
      box-shadow: 0 2px 8px color-mix(in srgb, var(--primary) 35%, transparent);
    }

    /* ===================================================================== */
    /* ESPACE RÉPÉTITION — design QCMs PNS, palette Suivi PNS               */
    /* ===================================================================== */
    #page-repetition {
      --rep-surface: #ffffff;
      --rep-surface-border: rgba(15, 23, 42, 0.09);
      --rep-surface-shadow: 0 4px 14px rgba(15, 23, 42, 0.06);
      --rep-soft: rgba(148, 163, 184, 0.08);
      --rep-tag: rgba(148, 163, 184, 0.12);
    }

    html[data-theme="dark"] #page-repetition,
    html.dark #page-repetition,
    body.dark #page-repetition,
    body.theme-dark #page-repetition {
      --rep-surface: #141d32;
      --rep-surface-border: rgba(255, 255, 255, 0.13);
      --rep-surface-shadow: 0 4px 16px rgba(0, 0, 0, 0.3);
      --rep-soft: rgba(255, 255, 255, 0.04);
      --rep-tag: rgba(255, 255, 255, 0.06);
    }

    #page-repetition .rep-hero {
      margin-bottom: 16px;
      padding: 18px 20px;
      border: 1px solid var(--border-color);
      border-radius: 20px;
      background: linear-gradient(135deg, rgba(6, 182, 212, 0.16), rgba(37, 99, 235, 0.06));
    }

    html[data-theme="dark"] #page-repetition .rep-hero,
    html.dark #page-repetition .rep-hero,
    body.dark #page-repetition .rep-hero,
    body.theme-dark #page-repetition .rep-hero {
      background: linear-gradient(135deg, rgba(6, 182, 212, 0.13), rgba(37, 99, 235, 0.08));
      border-color: rgba(148, 163, 184, 0.16);
    }

    #page-repetition .rep-hero-head {
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: 12px;
      flex-wrap: wrap;
    }

    #page-repetition .rep-hero-copy {
      min-width: 0;
    }

    #page-repetition .rep-hero-title {
      margin: 0;
      color: var(--text);
      font-family: var(--font-heading);
      font-size: 28px;
      font-weight: 700;
      line-height: 1.5;
      letter-spacing: normal;
    }

    #page-repetition .rep-hero-sub {
      margin: 2px 0 0;
      color: var(--text2);
      font-size: 12px;
      font-weight: 400;
    }

    #page-repetition .rep-hero-controls {
      display: flex;
      flex-direction: column;
      align-items: flex-end;
      gap: 8px;
    }

    #page-repetition .rep-view-tabs {
      display: flex;
      align-items: center;
      gap: 2px;
      padding: 3px;
      border: 1px solid var(--border-color);
      border-radius: 99px;
      background: var(--bg-input);
    }

    #page-repetition .rep-view-btn {
      display: inline-flex;
      align-items: center;
      justify-content: center;
      gap: 6px;
      padding: 6px 14px;
      border: 0;
      border-radius: 99px;
      background: transparent;
      color: var(--text3);
      font-family: inherit;
      font-size: 12px;
      font-weight: 700;
      cursor: pointer;
      transition: background-color 0.15s ease, color 0.15s ease, box-shadow 0.15s ease;
    }

    #page-repetition .rep-view-btn i {
      font-size: 11px;
    }

    #page-repetition .rep-view-btn:hover {
      color: var(--text);
      background: var(--rep-soft);
    }

    #page-repetition .rep-view-btn.active {
      background: var(--primary);
      color: #ffffff;
      box-shadow: 0 2px 8px rgba(37, 99, 235, 0.3);
    }

    #page-repetition .rep-hero-actions {
      display: flex;
      align-items: center;
      justify-content: flex-end;
      gap: 8px;
      flex-wrap: wrap;
    }

    #page-repetition .rep-details-toggle {
      display: inline-flex;
      align-items: center;
      gap: 6px;
      padding: 6px 12px;
      border: 1px solid var(--border-color);
      border-radius: 8px;
      background: var(--bg-input);
      color: var(--text);
      font-size: 12px;
      font-weight: 600;
      line-height: 1;
      white-space: nowrap;
      cursor: pointer;
      user-select: none;
    }

    #page-repetition .rep-details-toggle input[type="checkbox"] {
      margin: 0;
      accent-color: var(--primary);
      cursor: pointer;
    }

    #page-repetition .rep-details-toggle i {
      color: var(--text2);
      font-size: 11px;
    }

    #page-repetition .rep-tool-btn {
      display: inline-flex;
      align-items: center;
      justify-content: center;
      width: 32px;
      height: 32px;
      padding: 0;
      border: 1px solid var(--border-color);
      border-radius: 8px;
      background: var(--bg-input);
      color: var(--text);
      font-size: 12px;
      cursor: pointer;
      transition: background-color 0.15s ease, border-color 0.15s ease, color 0.15s ease;
    }

    #page-repetition .rep-tool-btn:hover {
      border-color: var(--primary);
      background: var(--primary-light);
      color: var(--primary);
    }

    /* Stats */
    #page-repetition .rep-stats-row {
      display: flex;
      flex-wrap: wrap;
      gap: 6px;
      margin-bottom: 12px;
    }

    #page-repetition .rep-stat-card {
      display: flex;
      flex: 1;
      flex-direction: column;
      align-items: center;
      justify-content: center;
      gap: 2px;
      min-width: 70px;
      min-height: 50px;
      padding: 6px 10px;
      border: 1px solid var(--rep-surface-border);
      border-radius: 12px;
      background: var(--rep-surface);
      box-shadow: var(--rep-surface-shadow);
      transition: transform 0.2s ease, box-shadow 0.2s ease, border-color 0.2s ease;
    }

    #page-repetition .rep-stat-card:hover {
      transform: translateY(-2px);
      border-color: var(--primary);
      box-shadow: 0 6px 20px rgba(15, 23, 42, 0.12);
    }

    html[data-theme="dark"] #page-repetition .rep-stat-card:hover,
    html.dark #page-repetition .rep-stat-card:hover,
    body.dark #page-repetition .rep-stat-card:hover,
    body.theme-dark #page-repetition .rep-stat-card:hover {
      box-shadow: 0 6px 20px rgba(0, 0, 0, 0.45);
    }

    #page-repetition .rep-stat-card.is-danger {
      border-bottom: 3px solid var(--danger);
    }

    #page-repetition .rep-stat-card.is-warning {
      border-bottom: 3px solid var(--warning);
    }

    #page-repetition .rep-stat-card.is-success {
      border-bottom: 3px solid var(--success);
    }

    #page-repetition .rep-stat-card.is-info {
      border-bottom: 3px solid var(--info);
    }

    #page-repetition .rep-stat-card.is-primary {
      border-bottom: 3px solid var(--primary);
    }

    #page-repetition .rep-stat-value {
      color: var(--text);
      font-size: 14px;
      font-weight: 700;
      line-height: 1;
    }

    #page-repetition .rep-stat-card.is-danger .rep-stat-value {
      color: var(--danger);
    }

    #page-repetition .rep-stat-card.is-warning .rep-stat-value {
      color: var(--warning);
    }

    #page-repetition .rep-stat-card.is-success .rep-stat-value {
      color: var(--success);
    }

    #page-repetition .rep-stat-card.is-info .rep-stat-value {
      color: var(--info);
    }

    #page-repetition .rep-stat-card.is-primary .rep-stat-value {
      color: var(--primary);
    }

    #page-repetition .rep-stat-label {
      color: var(--text2);
      font-size: 10px;
      font-weight: 600;
      line-height: 1.15;
      text-align: center;
      white-space: nowrap;
      opacity: 0.8;
    }

    /* Filters */
    #page-repetition .rep-filters {
      display: flex;
      flex-wrap: wrap;
      align-items: center;
      gap: 8px;
      margin-bottom: 14px;
    }

    #page-repetition .rep-filter {
      position: relative;
      display: inline-block;
    }

    #page-repetition .rep-filter-toggle {
      display: inline-flex;
      align-items: center;
      gap: 6px;
      padding: 6px 12px;
      border: 1px solid var(--border-color);
      border-radius: 99px;
      background: var(--bg-input);
      box-shadow: var(--shadow-sm);
      color: var(--text);
      font-family: inherit;
      font-size: 11px;
      font-weight: 700;
      line-height: 1.2;
      white-space: nowrap;
      cursor: pointer;
      transition: background-color 0.15s ease, border-color 0.15s ease, color 0.15s ease;
    }

    #page-repetition .rep-filter-toggle:hover,
    #page-repetition .rep-filter.open .rep-filter-toggle {
      border-color: var(--primary);
      background: var(--rep-soft);
    }

    #page-repetition .rep-filter-toggle > span {
      max-width: 120px;
      overflow: hidden;
      color: var(--primary);
      font-weight: 800;
      text-overflow: ellipsis;
    }

    #page-repetition .rep-filter-toggle > i {
      color: var(--text3);
      font-size: 10px;
      transition: transform 0.2s ease;
    }

    #page-repetition .rep-filter.open .rep-filter-toggle > i {
      transform: rotate(180deg);
    }

    #page-repetition .rep-filter-menu {
      position: absolute;
      top: calc(100% + 6px);
      left: 0;
      z-index: 10050;
      display: none;
      flex-direction: column;
      gap: 3px;
      min-width: 190px;
      max-height: 260px;
      overflow-y: auto;
      padding: 6px;
      border: 1px solid var(--border-color);
      border-radius: 12px;
      background: var(--rep-surface);
      box-shadow: 0 12px 36px rgba(15, 23, 42, 0.18);
    }

    html[data-theme="dark"] #page-repetition .rep-filter-menu,
    html.dark #page-repetition .rep-filter-menu,
    body.dark #page-repetition .rep-filter-menu,
    body.theme-dark #page-repetition .rep-filter-menu {
      box-shadow: 0 16px 45px rgba(0, 0, 0, 0.55);
    }

    #page-repetition .rep-filter.open .rep-filter-menu {
      display: flex;
    }

    #page-repetition .rep-filter-item {
      display: flex;
      align-items: center;
      gap: 8px;
      padding: 6px 10px;
      border-radius: 8px;
      color: var(--text);
      font-size: 12px;
      font-weight: 600;
      white-space: nowrap;
      cursor: pointer;
      user-select: none;
    }

    #page-repetition .rep-filter-item:hover {
      background: var(--primary-light);
      color: var(--primary);
    }

    #page-repetition .rep-filter-item input[type="checkbox"] {
      position: relative;
      flex-shrink: 0;
      width: 14px;
      height: 14px;
      margin: 0;
      appearance: none;
      -webkit-appearance: none;
      border: 1.5px solid var(--border-color);
      border-radius: 4px;
      background: var(--bg-input);
      cursor: pointer;
    }

    #page-repetition .rep-filter-item input[type="checkbox"]:checked {
      border-color: var(--primary);
      background: var(--primary);
    }

    #page-repetition .rep-filter-item input[type="checkbox"]:checked::after {
      content: '\2714';
      position: absolute;
      top: 50%;
      left: 50%;
      transform: translate(-50%, -50%);
      color: #ffffff;
      font-size: 9px;
      line-height: 1;
    }

    /* Cards */
    #page-repetition .rep-cards-grid {
      display: grid;
      grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
      align-items: stretch;
      gap: 12px;
    }

    #page-repetition .rep-card {
      display: flex;
      flex-direction: column;
      gap: 4px;
      height: 100%;
      padding: 10px;
      border: 1px solid var(--rep-surface-border);
      border-radius: 12px;
      background: var(--rep-surface);
      box-shadow: var(--rep-surface-shadow);
      overflow: hidden;
      transition: border-color 0.15s ease, box-shadow 0.15s ease;
    }

    #page-repetition .rep-card:hover {
      border-color: var(--primary);
      box-shadow: 0 8px 22px rgba(15, 23, 42, 0.12);
    }

    html[data-theme="dark"] #page-repetition .rep-card:hover,
    html.dark #page-repetition .rep-card:hover,
    body.dark #page-repetition .rep-card:hover,
    body.theme-dark #page-repetition .rep-card:hover {
      box-shadow: 0 8px 22px rgba(0, 0, 0, 0.45);
    }

    #page-repetition .rep-card-top {
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: 6px;
      margin-bottom: 2px;
    }

    #page-repetition .rep-level {
      display: inline-flex;
      flex: 1;
      align-items: center;
      justify-content: center;
      padding: 4px 8px;
      border-radius: 20px;
      font-size: 10px;
      font-weight: 700;
      line-height: 1.2;
      text-align: center;
      white-space: nowrap;
    }

    #page-repetition .rep-level-late {
      background: #fee2e2;
      color: #991b1b;
    }

    #page-repetition .rep-level-today {
      background: #fed7aa;
      color: #9a3412;
    }

    #page-repetition .rep-level-upcoming {
      background: #dbeafe;
      color: #1e40af;
    }

    #page-repetition .rep-level-consolidation {
      background: #d1fae5;
      color: #065f46;
    }

    html[data-theme="dark"] #page-repetition .rep-level-late,
    html.dark #page-repetition .rep-level-late,
    body.dark #page-repetition .rep-level-late,
    body.theme-dark #page-repetition .rep-level-late {
      background: rgba(239, 68, 68, 0.18);
      color: #fca5a5;
    }

    html[data-theme="dark"] #page-repetition .rep-level-today,
    html.dark #page-repetition .rep-level-today,
    body.dark #page-repetition .rep-level-today,
    body.theme-dark #page-repetition .rep-level-today {
      background: rgba(245, 158, 11, 0.18);
      color: #fcd34d;
    }

    html[data-theme="dark"] #page-repetition .rep-level-upcoming,
    html.dark #page-repetition .rep-level-upcoming,
    body.dark #page-repetition .rep-level-upcoming,
    body.theme-dark #page-repetition .rep-level-upcoming {
      background: rgba(37, 99, 235, 0.22);
      color: #93c5fd;
    }

    html[data-theme="dark"] #page-repetition .rep-level-consolidation,
    html.dark #page-repetition .rep-level-consolidation,
    body.dark #page-repetition .rep-level-consolidation,
    body.theme-dark #page-repetition .rep-level-consolidation {
      background: rgba(16, 185, 129, 0.2);
      color: #6ee7b7;
    }

    #page-repetition .rep-card-title {
      display: -webkit-box;
      overflow: hidden;
      -webkit-box-orient: vertical;
      -webkit-line-clamp: 3;
      color: var(--text);
      font-size: 13px;
      font-weight: 700;
      line-height: 1.3;
    }

    #page-repetition .rep-card-tags {
      display: flex;
      flex-wrap: wrap;
      gap: 4px;
      min-width: 0;
      margin-bottom: 4px;
    }

    #page-repetition .rep-tag {
      display: inline-block;
      max-width: 100%;
      overflow: hidden;
      padding: 2px 6px;
      border-radius: 4px;
      background: var(--rep-tag);
      color: var(--text3);
      font-size: 9px;
      font-weight: 700;
      line-height: 1.3;
      text-overflow: ellipsis;
      vertical-align: middle;
      white-space: nowrap;
    }

    #page-repetition .rep-tag-mode,
    #page-repetition .rep-tag-year {
      background: var(--primary-light);
      color: var(--primary);
    }

    #page-repetition .rep-tag-couche {
      background: color-mix(in srgb, var(--cc, var(--info)) 16%, transparent);
      color: var(--cc, var(--info));
    }

    #page-repetition .rep-card-stats {
      display: flex;
      flex-wrap: wrap;
      gap: 8px;
      margin-bottom: 4px;
      padding: 6px;
      border-radius: 6px;
      background: var(--rep-soft);
    }

    #page-repetition .rep-c-stat {
      display: flex;
      align-items: center;
      gap: 4px;
      min-width: 0;
      color: var(--text3);
      font-size: 10px;
      line-height: 1.2;
    }

    #page-repetition .rep-c-stat > span {
      display: inline-flex;
      align-items: center;
      color: var(--text3);
      font-size: 10px;
    }

    #page-repetition .rep-c-stat > strong {
      color: var(--text);
      font-weight: 800;
      white-space: nowrap;
    }

    #page-repetition .rep-card-footer {
      display: flex;
      align-items: center;
      justify-content: flex-start;
      gap: 8px;
      margin-top: auto;
      padding-top: 8px;
      border-top: 1px dashed var(--border-color);
    }

    #page-repetition .rep-date-badge {
      display: inline-flex;
      align-items: center;
      gap: 3px;
      padding: 2px 6px;
      border: 1px solid transparent;
      border-radius: 6px;
      font-size: 9.5px;
      font-weight: 700;
      line-height: 1.2;
      white-space: nowrap;
    }

    #page-repetition .rep-date-badge.is-overdue {
      border-color: rgba(239, 68, 68, 0.3);
      background: rgba(239, 68, 68, 0.14);
      color: #ef4444;
    }

    #page-repetition .rep-date-badge.is-today {
      border-color: rgba(34, 197, 94, 0.3);
      background: rgba(34, 197, 94, 0.14);
      color: #16a34a;
    }

    #page-repetition .rep-date-badge.is-future {
      border-color: rgba(234, 179, 8, 0.32);
      background: rgba(234, 179, 8, 0.14);
      color: #ca8a04;
    }

    #page-repetition .rep-date-badge.is-none {
      background: var(--rep-soft);
      color: var(--text2);
    }

    html[data-theme="dark"] #page-repetition .rep-date-badge.is-overdue,
    html.dark #page-repetition .rep-date-badge.is-overdue,
    body.dark #page-repetition .rep-date-badge.is-overdue,
    body.theme-dark #page-repetition .rep-date-badge.is-overdue {
      color: #fca5a5;
    }

    html[data-theme="dark"] #page-repetition .rep-date-badge.is-today,
    html.dark #page-repetition .rep-date-badge.is-today,
    body.dark #page-repetition .rep-date-badge.is-today,
    body.theme-dark #page-repetition .rep-date-badge.is-today {
      color: #6ee7b7;
    }

    html[data-theme="dark"] #page-repetition .rep-date-badge.is-future,
    html.dark #page-repetition .rep-date-badge.is-future,
    body.dark #page-repetition .rep-date-badge.is-future,
    body.theme-dark #page-repetition .rep-date-badge.is-future {
      color: #fcd34d;
    }

    /* Card details (mini table) */
    #page-repetition .rep-card-details {
      margin-top: 6px;
      padding-top: 6px;
      border-top: 1px dashed var(--border-color);
    }

    #page-repetition .rep-mini-table {
      width: 100%;
      border-collapse: collapse;
      table-layout: fixed;
      font-size: 8.5px;
      text-align: left;
    }

    #page-repetition .rep-mini-table th {
      padding: 2px;
      border-bottom: 1px solid var(--border-color);
      background: var(--rep-soft);
      color: var(--text2);
      font-size: 8px;
      font-weight: 700;
      letter-spacing: 0.1px;
      text-transform: uppercase;
      white-space: nowrap;
    }

    #page-repetition .rep-mini-table td {
      padding: 2px;
      border-bottom: 1px solid var(--rep-soft);
      vertical-align: middle;
      white-space: nowrap;
    }

    #page-repetition .rep-mini-table tr:last-child td {
      border-bottom: 0;
    }

    #page-repetition .rep-mini-table th:nth-child(1),
    #page-repetition .rep-mini-table td:nth-child(1) {
      width: 28%;
      overflow: hidden;
      text-overflow: ellipsis;
    }

    #page-repetition .rep-mini-table th:nth-child(2),
    #page-repetition .rep-mini-table td:nth-child(2) {
      width: 17%;
      text-align: center;
    }

    #page-repetition .rep-mini-table th:nth-child(3),
    #page-repetition .rep-mini-table td:nth-child(3) {
      width: 55%;
      text-align: right;
    }

    #page-repetition .rep-mini-couche {
      display: inline-flex;
      align-items: center;
      justify-content: center;
      min-width: 20px;
      height: 15px;
      padding: 0 3px;
      border: 1.5px solid color-mix(in srgb, var(--cc, var(--info)) 55%, transparent);
      border-radius: 4px;
      background: transparent;
      color: var(--cc, var(--info));
      font-size: 8px;
      font-weight: 800;
      line-height: 1;
      opacity: 0.55;
    }

    #page-repetition .rep-mini-couche.is-partial {
      background: color-mix(in srgb, var(--cc, var(--info)) 16%, transparent);
      opacity: 1;
    }

    #page-repetition .rep-mini-couche.is-done {
      border-color: var(--cc, var(--info));
      background: var(--cc, var(--info));
      color: #ffffff;
      opacity: 1;
    }

    #page-repetition .rep-mini-table .eval-select-pill,
    #page-repetition .rep-global-table .eval-select-pill {
      width: 56px !important;
      height: 22px !important;
      padding: 1px 4px !important;
      gap: 3px !important;
      border-radius: 6px !important;
    }

    #page-repetition .rep-mini-table .eval-display-val,
    #page-repetition .rep-global-table .eval-display-val {
      font-size: 9px !important;
    }

    #page-repetition .rep-mini-table .eval-star-badge,
    #page-repetition .rep-mini-table .eval-chevron,
    #page-repetition .rep-global-table .eval-star-badge,
    #page-repetition .rep-global-table .eval-chevron {
      font-size: 8px !important;
    }

    /* Calendar */
    #page-repetition .rep-calendar-container {
      margin-top: 10px;
      padding: 20px;
      border: 1px solid var(--border-color);
      border-radius: 16px;
      background: var(--rep-surface);
    }

    #page-repetition .rep-calendar-nav {
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: 10px;
      margin-bottom: 16px;
      flex-wrap: wrap;
    }

    #page-repetition .rep-calendar-nav-group {
      display: flex;
      align-items: center;
      gap: 6px;
      flex-wrap: wrap;
    }

    #page-repetition .rep-calendar-title {
      color: var(--text);
      font-size: 18px;
      font-weight: 700;
      text-align: center;
    }

    #page-repetition .rep-cal-btn {
      display: inline-flex;
      align-items: center;
      justify-content: center;
      gap: 5px;
      padding: 6px 10px;
      border: 1px solid var(--border-color);
      border-radius: 8px;
      background: var(--bg-input);
      color: var(--text);
      font-family: inherit;
      font-size: 11px;
      font-weight: 600;
      line-height: 1.2;
      white-space: nowrap;
      cursor: pointer;
    }

    #page-repetition .rep-cal-btn:hover {
      border-color: var(--primary);
      background: var(--primary-light);
      color: var(--primary);
    }

    #page-repetition .rep-calendar-grid {
      display: grid;
      grid-template-columns: repeat(7, 1fr);
      gap: 6px;
    }

    #page-repetition .rep-calendar-day-header {
      padding: 6px 0;
      color: var(--text3);
      font-size: 11px;
      font-weight: 700;
      text-align: center;
      text-transform: uppercase;
    }

    #page-repetition .rep-calendar-day {
      display: flex;
      flex-direction: column;
      justify-content: space-between;
      min-height: 80px;
      padding: 6px;
      border: 1px solid var(--border-color);
      border-radius: 10px;
      background: var(--rep-soft);
      cursor: pointer;
      transition: border-color 0.15s ease, background-color 0.15s ease, box-shadow 0.15s ease;
    }

    #page-repetition .rep-calendar-day:hover {
      border-color: var(--primary);
      background: var(--primary-light);
    }

    #page-repetition .rep-calendar-day.is-other {
      opacity: 0.35;
      cursor: default;
    }

    #page-repetition .rep-calendar-day.is-other:hover {
      border-color: var(--border-color);
      background: var(--rep-soft);
    }

    #page-repetition .rep-calendar-day.is-today {
      border: 2px solid var(--primary);
      background: color-mix(in srgb, var(--primary) 7%, transparent);
    }

    #page-repetition .rep-calendar-day.is-selected {
      border-color: var(--primary);
      background: var(--primary-light);
      box-shadow: 0 0 0 2px color-mix(in srgb, var(--primary) 22%, transparent);
    }

    #page-repetition .rep-calendar-day-num {
      color: var(--text);
      font-size: 12px;
      font-weight: 700;
    }

    #page-repetition .rep-calendar-badge {
      display: inline-flex;
      align-self: flex-start;
      align-items: center;
      gap: 3px;
      max-width: 100%;
      overflow: hidden;
      margin-top: 4px;
      padding: 2px 6px;
      border-radius: 6px;
      font-size: 10px;
      font-weight: 700;
      line-height: 1.2;
      text-overflow: ellipsis;
      white-space: nowrap;
    }

    #page-repetition .rep-calendar-badge.is-due {
      background: rgba(239, 68, 68, 0.15);
      color: #ef4444;
    }

    #page-repetition .rep-calendar-badge.is-future {
      background: rgba(234, 179, 8, 0.15);
      color: #ca8a04;
    }

    html[data-theme="dark"] #page-repetition .rep-calendar-badge.is-due,
    html.dark #page-repetition .rep-calendar-badge.is-due,
    body.dark #page-repetition .rep-calendar-badge.is-due,
    body.theme-dark #page-repetition .rep-calendar-badge.is-due {
      color: #fca5a5;
    }

    html[data-theme="dark"] #page-repetition .rep-calendar-badge.is-future,
    html.dark #page-repetition .rep-calendar-badge.is-future,
    body.dark #page-repetition .rep-calendar-badge.is-future,
    body.theme-dark #page-repetition .rep-calendar-badge.is-future {
      color: #fcd34d;
    }

    #page-repetition .rep-calendar-details {
      margin-top: 20px;
      padding-top: 16px;
      border-top: 1px solid var(--border-color);
    }

    #page-repetition .rep-calendar-details-head h4 {
      margin: 0 0 10px;
      color: var(--text);
      font-size: 14px;
      font-weight: 700;
    }

    #page-repetition .rep-calendar-list {
      display: flex;
      flex-direction: column;
      gap: 6px;
      max-height: 320px;
      overflow-y: auto;
    }

    #page-repetition .rep-calendar-item {
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: 10px;
      padding: 8px 12px;
      border: 1px solid var(--border-color);
      border-radius: 8px;
      background: var(--rep-soft);
    }

    #page-repetition .rep-calendar-item-main {
      min-width: 0;
    }

    #page-repetition .rep-calendar-item-title {
      overflow: hidden;
      color: var(--text);
      font-size: 12px;
      font-weight: 600;
      text-overflow: ellipsis;
      white-space: nowrap;
    }

    #page-repetition .rep-calendar-item-sub {
      overflow: hidden;
      margin-top: 2px;
      color: var(--text3);
      font-size: 10px;
      text-overflow: ellipsis;
      white-space: nowrap;
    }

    #page-repetition .rep-calendar-item .rep-level {
      flex: 0 0 auto;
    }

    #page-repetition .rep-calendar-empty {
      display: flex;
      align-items: center;
      gap: 8px;
      margin: 0;
      color: var(--text3);
      font-size: 13px;
    }

    /* Table */
    #page-repetition .rep-table-wrapper {
      margin-top: 10px;
      overflow-x: auto;
      border: 1px solid var(--border-color);
      border-radius: 16px;
      background: var(--rep-surface);
    }

    #page-repetition .rep-global-table {
      width: 100%;
      min-width: 1000px;
      border-collapse: collapse;
      color: var(--text);
      font-size: 12px;
      text-align: left;
    }

    #page-repetition .rep-global-table th {
      padding: 12px 14px;
      border-bottom: 1px solid var(--border-color);
      background: var(--rep-soft);
      color: var(--text2);
      font-size: 11px;
      font-weight: 700;
      letter-spacing: 0.5px;
      text-transform: uppercase;
      white-space: nowrap;
    }

    #page-repetition .rep-global-table td {
      padding: 12px 14px;
      border-bottom: 1px solid var(--border-color);
      vertical-align: middle;
    }

    #page-repetition .rep-global-table tbody tr:last-child td {
      border-bottom: 0;
    }

    #page-repetition .rep-global-table tbody tr:hover {
      background: var(--rep-soft);
    }

    #page-repetition .rep-tbl-num {
      width: 46px;
      color: var(--text3);
      font-weight: 800;
    }

    #page-repetition .rep-tbl-title {
      max-width: 320px;
      overflow: hidden;
      color: var(--text);
      font-weight: 700;
      text-overflow: ellipsis;
      white-space: nowrap;
    }

    #page-repetition .rep-tbl-tags {
      display: flex;
      flex-wrap: wrap;
      gap: 4px;
      margin-top: 4px;
    }

    #page-repetition .rep-tbl-couches {
      display: flex;
      align-items: center;
      gap: 4px;
    }

    #page-repetition .rep-tbl-evals {
      display: flex;
      align-items: flex-end;
      gap: 6px;
      flex-wrap: wrap;
    }

    #page-repetition .rep-table-eval {
      display: flex;
      flex-direction: column;
      align-items: center;
      gap: 2px;
    }

    #page-repetition .rep-table-eval-label {
      font-size: 8px;
      font-weight: 800;
      line-height: 1;
    }

    #page-repetition .rep-global-table .rep-level {
      flex: 0 0 auto;
      padding: 4px 9px;
    }

    #page-repetition .rep-next-badge {
      display: inline-flex;
      align-items: center;
      gap: 6px;
      color: var(--cc, var(--info));
      font-weight: 700;
      white-space: nowrap;
    }

    #page-repetition .rep-next-dot {
      width: 8px;
      height: 8px;
      border-radius: 50%;
      background: var(--cc, var(--info));
    }

    /* Empty state */
    #page-repetition .rep-empty {
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: center;
      gap: 10px;
      grid-column: 1 / -1;
      margin: 8px 0;
      padding: 56px 24px;
      border: 1px dashed var(--border-color);
      border-radius: 20px;
      background: rgba(6, 182, 212, 0.03);
      text-align: center;
    }

    #page-repetition .rep-empty-icon {
      display: flex;
      align-items: center;
      justify-content: center;
      width: 84px;
      height: 84px;
      margin-bottom: 6px;
      border-radius: 50%;
      background: linear-gradient(135deg, rgba(6, 182, 212, 0.16), rgba(37, 99, 235, 0.16));
      box-shadow: inset 0 0 0 1px rgba(6, 182, 212, 0.25);
    }

    #page-repetition .rep-empty-icon i {
      color: var(--primary);
      font-size: 34px;
    }

    #page-repetition .rep-empty-title {
      margin: 0;
      color: var(--text);
      font-size: 19px;
      font-weight: 800;
    }

    #page-repetition .rep-empty-sub {
      max-width: 460px;
      margin: 0;
      color: var(--text2);
      font-size: 13px;
      line-height: 1.5;
    }

    #page-repetition .rep-empty-btn {
      display: inline-flex;
      align-items: center;
      gap: 6px;
      margin-top: 4px;
      padding: 8px 14px;
      border: 0;
      border-radius: 8px;
      background: var(--primary);
      color: #ffffff;
      font-family: inherit;
      font-size: 12px;
      font-weight: 700;
      cursor: pointer;
    }

    #page-repetition .rep-empty-btn:hover {
      background: var(--primary-hover);
    }

    /* Mobile */
    @media (max-width: 768px) {
      #page-repetition,
      #page-taches,
      #page-evaluation {
        padding-top: 8px;
      }

      #page-repetition .rep-hero {
        padding: 16px;
        border-radius: 18px;
      }

      #page-repetition .rep-hero-head {
        align-items: flex-start;
      }

      #page-repetition .rep-hero-title {
        font-size: 24px;
      }

      #page-repetition .rep-hero-sub {
        font-size: 12px;
      }

      #page-repetition .rep-hero-controls {
        align-items: stretch;
        width: 100%;
      }

      #page-repetition .rep-view-tabs {
        width: 100%;
      }

      #page-repetition .rep-view-btn {
        flex: 1;
        padding: 7px 8px;
        font-size: 11px;
      }

      #page-repetition .rep-hero-actions {
        justify-content: flex-start;
      }

      #page-repetition .rep-details-toggle {
        flex: 1;
        justify-content: center;
        padding: 6px 8px;
        font-size: 11px;
      }

      #page-repetition .rep-tool-btn {
        width: 30px;
        height: 30px;
      }

      #page-repetition .rep-filters {
        gap: 6px;
      }

      #page-repetition .rep-filter-toggle {
        padding: 5px 10px;
        font-size: 10.5px;
      }

      #page-repetition .rep-filter-toggle > span {
        max-width: 92px;
      }

      #page-repetition .rep-filter-menu {
        max-width: calc(100vw - 24px);
      }

      #page-repetition .rep-cards-grid {
        grid-template-columns: repeat(2, 1fr);
        gap: 12px;
      }

      #page-repetition .rep-calendar-container {
        padding: 12px 6px;
        border-radius: 14px;
      }

      #page-repetition .rep-calendar-nav {
        justify-content: center;
        gap: 8px;
        margin-bottom: 12px;
      }

      #page-repetition .rep-calendar-title {
        order: -1;
        width: 100%;
        margin-bottom: 4px;
        font-size: 16px;
        font-weight: 800;
      }

      #page-repetition .rep-calendar-nav-group {
        justify-content: center;
        gap: 4px;
      }

      #page-repetition .rep-cal-btn {
        padding: 4px 7px;
        font-size: 11px;
      }

      #page-repetition .rep-calendar-grid {
        gap: 2px;
      }

      #page-repetition .rep-calendar-day-header {
        padding: 4px 0;
        font-size: 10px;
      }

      #page-repetition .rep-calendar-day {
        min-height: 48px;
        padding: 2px;
        border-radius: 6px;
      }

      #page-repetition .rep-calendar-day-num {
        font-size: 10px;
      }

      #page-repetition .rep-calendar-badge {
        gap: 2px;
        margin-top: 2px;
        padding: 1px 3px;
        font-size: 8px;
      }

      #page-repetition .rep-calendar-badge i {
        display: none;
      }

      #page-repetition .rep-empty {
        padding: 40px 16px;
      }
    }

    /* ===== PROGRAMME PAGE (SUIVI PNS) ===== */
    .programme-page-header {
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: 16px;
      margin-bottom: 24px;
      flex-wrap: wrap;
    }
    .programme-page-title-wrap {
      min-width: 0;
    }
    .programme-page-title {
      font-size: 22px;
      font-weight: 800;
      display: flex;
      align-items: center;
      gap: 10px;
      color: var(--text);
    }
    .programme-page-title i {
      color: var(--primary, #6366f1);
    }
    .programme-page-sub {
      font-size: 13px;
      color: var(--text2);
      margin-top: 4px;
    }
    .programme-header-actions {
      display: flex;
      align-items: center;
      gap: 10px;
      flex-wrap: wrap;
    }
    .programme-filter-pills {
      display: flex;
      background: var(--card-bg, rgba(255,255,255,0.06));
      border: 1px solid var(--border);
      border-radius: 99px;
      padding: 3px;
      gap: 3px;
    }
    .pg-filter-btn {
      padding: 5px 14px;
      border-radius: 99px;
      font-size: 12px;
      font-weight: 700;
      border: none;
      background: transparent;
      color: var(--text2);
      cursor: pointer;
      transition: all 0.2s ease;
    }
    .pg-filter-btn.active {
      background: var(--primary, #6366f1);
      color: #fff;
      box-shadow: 0 2px 8px rgba(99, 102, 241, 0.35);
    }
    .programme-cards-container {
      display: grid;
      grid-template-columns: repeat(auto-fill, minmax(320px, 1fr));
      gap: 16px;
    }
    .suivi-programme-card {
      background: var(--card-bg, rgba(255,255,255,0.04));
      border: 1px solid var(--border);
      border-radius: 16px;
      padding: 18px;
      display: flex;
      flex-direction: column;
      gap: 12px;
      transition: all 0.2s ease;
      position: relative;
      overflow: hidden;
    }
    .suivi-programme-card:hover {
      transform: translateY(-2px);
      border-color: var(--primary, #6366f1);
      box-shadow: 0 10px 25px -5px rgba(0,0,0,0.15);
    }
    .suivi-programme-card.is-missed {
      border-color: rgba(239, 68, 68, 0.4);
      background: rgba(239, 68, 68, 0.04);
    }
    .suivi-programme-card.is-missed .suivi-programme-course,
    .suivi-programme-card.is-missed .suivi-programme-module,
    .suivi-programme-card.is-missed .suivi-programme-taskkind,
    .suivi-programme-card.is-missed .suivi-programme-time {
      text-decoration: line-through 2px #ef4444;
      opacity: 0.65;
    }
    .suivi-programme-cancelled-badge {
      display: inline-flex;
      align-items: center;
      gap: 5px;
      padding: 3px 9px;
      border-radius: 999px;
      background: rgba(239, 68, 68, 0.15);
      color: #ef4444;
      font-size: 11px;
      font-weight: 800;
      letter-spacing: 0.3px;
    }
    .suivi-programme-top {
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: 8px;
    }
    .suivi-programme-couche {
      padding: 3px 10px;
      border-radius: 99px;
      font-size: 11px;
      font-weight: 800;
      text-transform: uppercase;
      letter-spacing: 0.5px;
    }
    .suivi-programme-time {
      font-size: 12px;
      font-weight: 700;
      color: var(--text2);
      display: flex;
      align-items: center;
      gap: 5px;
    }
    .suivi-programme-module {
      font-size: 11.5px;
      font-weight: 700;
      color: var(--primary, #6366f1);
      text-transform: uppercase;
      letter-spacing: 0.6px;
    }
    .suivi-programme-course {
      font-size: 16px;
      font-weight: 800;
      color: var(--text);
      line-height: 1.35;
    }
    .suivi-programme-taskkind {
      font-size: 12.5px;
      color: var(--text2);
      display: flex;
      align-items: center;
      gap: 6px;
    }
    .suivi-programme-discipline-alert {
      background: rgba(239, 68, 68, 0.08);
      border: 1px solid rgba(239, 68, 68, 0.25);
      border-radius: 10px;
      padding: 10px 12px;
      display: flex;
      flex-direction: column;
      gap: 4px;
    }
    .suivi-programme-discipline-title {
      font-size: 11.5px;
      font-weight: 800;
      color: #ef4444;
      display: flex;
      align-items: center;
      gap: 6px;
    }
    .suivi-programme-discipline-quote {
      font-size: 11.5px;
      font-style: italic;
      color: var(--text2);
      line-height: 1.4;
    }
    .suivi-programme-actions {
      display: flex;
      align-items: center;
      justify-content: space-between;
      margin-top: auto;
      padding-top: 8px;
      border-top: 1px solid var(--border);
    }
    .btn-lancer-programme {
      padding: 8px 18px;
      border-radius: 10px;
      font-size: 13px;
      font-weight: 800;
      border: none;
      cursor: pointer;
      background: linear-gradient(135deg, #10b981, #059669);
      color: #fff;
      display: inline-flex;
      align-items: center;
      gap: 8px;
      transition: all 0.2s ease;
      box-shadow: 0 4px 12px rgba(16, 185, 129, 0.25);
    }
    .btn-lancer-programme:hover {
      transform: scale(1.03);
      box-shadow: 0 6px 18px rgba(16, 185, 129, 0.35);
    }
    .btn-lancer-programme.is-late {
      background: linear-gradient(135deg, #f59e0b, #d97706);
      box-shadow: 0 4px 12px rgba(245, 158, 11, 0.25);
    }
    .programme-empty-state {
      grid-column: 1 / -1;
      padding: 48px 24px;
      text-align: center;
      background: var(--card-bg, rgba(255,255,255,0.03));
      border: 1px dashed var(--border);
      border-radius: 18px;
      display: flex;
      flex-direction: column;
      align-items: center;
      gap: 12px;
    }
    .programme-empty-icon {
      font-size: 36px;
      color: var(--primary, #6366f1);
      opacity: 0.6;
    }
    .programme-empty-text {
      font-size: 14px;
      font-weight: 600;
      color: var(--text2);
    }

/* ==========================================================================
   COMPREHENSIVE TABLET & MOBILE RESPONSIVE ENGINE (SUIVI PNS)
   Fixes iPad (768px / 1024px) & Phone (360px - 480px) empty voids & cutoffs
   ========================================================================== */

/* 1. TABLET & IPAD (<= 1024px) */
@media (min-width: 641px) and (max-width: 1080px) {
  body.suivi-app .sidebar ~ .main-content,
  body.suivi-app .sidebar + .main-content,
  body.suivi-app .main-content,
  .sidebar ~ .main-content,
  .sidebar + .main-content,
  .main-content {
    margin-left: 0 !important;
    width: 100% !important;
    max-width: 100% !important;
    padding-inline: 16px !important;
    box-sizing: border-box !important;
  }

  .course-command-bar {
    padding: 14px 18px !important;
    border-radius: 16px !important;
    gap: 12px !important;
    width: 100% !important;
    box-sizing: border-box !important;
  }

  /* Screenshot 3 Fix: Row 1 Top has Hero Left, Bottom has 6 Stats in a single sleek full-width row */
  .course-header-row-1 {
    display: flex !important;
    flex-direction: column !important;
    align-items: stretch !important;
    gap: 10px !important;
    width: 100% !important;
  }

  .module-hero-left {
    display: flex !important;
    align-items: center !important;
    gap: 10px !important;
    width: 100% !important;
    flex-wrap: nowrap !important;
  }

  .module-hero-title {
    font-size: 20px !important;
    font-weight: 800 !important;
    white-space: nowrap !important;
    margin: 0 !important;
  }

  #coursesPageMeta {
    display: inline-flex !important;
    align-items: center !important;
    gap: 6px !important;
    margin-left: auto !important;
  }

  /* Stats: All 6 in a single horizontal row across the full tablet width (Replaces 3x2 grid) */
  .course-header-row-1 .course-page-stats,
  .course-page-stats {
    display: grid !important;
    grid-template-columns: repeat(6, minmax(0, 1fr)) !important;
    gap: 8px !important;
    width: 100% !important;
    max-width: 100% !important;
    margin: 0 !important;
  }

  .course-page-stats .course-stat-card,
  .course-stat-card {
    flex: unset !important;
    width: 100% !important;
    min-width: 0 !important;
    box-sizing: border-box !important;
    justify-content: center !important;
    text-align: center !important;
    padding: 8px 4px !important;
    border-radius: 12px !important;
    background: #ffffff !important;
    border: 1.5px solid #e2e8f0 !important;
    box-shadow: 0 1px 3px rgba(15, 23, 42, 0.03) !important;
  }

  body.theme-dark .course-stat-card,
  [data-theme="dark"] .course-stat-card {
    background: #141c2e !important;
    border-color: #243048 !important;
  }

  .course-stat-label {
    font-size: 9.5px !important;
    font-weight: 750 !important;
    color: #64748b !important;
    text-transform: uppercase !important;
    letter-spacing: 0.3px !important;
    margin-bottom: 2px !important;
    white-space: nowrap !important;
  }

  .course-stat-value {
    font-size: 16px !important;
    font-weight: 850 !important;
    color: #0f172a !important;
  }

  body.theme-dark .course-stat-value,
  [data-theme="dark"] .course-stat-value {
    color: #f8fafc !important;
  }

  /* Screenshot 3 Fix: Row 2 has 6 filters in 1 row, and actions side-by-side (never stacked vertically) */
  .course-header-row-2 {
    display: flex !important;
    width: 100% !important;
  }

  .course-header-row-2 .topbar-filter-row,
  .topbar-filter-row {
    display: flex !important;
    flex-direction: column !important;
    align-items: stretch !important;
    gap: 8px !important;
    width: 100% !important;
  }

  .course-header-row-2 .topbar-filter-scroll,
  .topbar-filter-scroll {
    display: grid !important;
    grid-template-columns: repeat(6, minmax(0, 1fr)) !important;
    gap: 6px !important;
    width: 100% !important;
  }

  .topbar-filter-scroll .filter-dropdown {
    width: 100% !important;
    min-width: 0 !important;
  }

  .topbar-filter-scroll .filter-btn {
    width: 100% !important;
    min-width: 0 !important;
    justify-content: center !important;
    padding: 7px 4px !important;
    font-size: 11px !important;
    font-weight: 700 !important;
    border-radius: 11px !important;
    white-space: nowrap !important;
  }

  .topbar-filter-actions {
    display: flex !important;
    flex-direction: row !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 12px !important;
    width: 100% !important;
  }

  .topbar-filter-actions .filter-btn {
    padding: 8px 18px !important;
    font-size: 12px !important;
    font-weight: 750 !important;
    border-radius: 12px !important;
    width: auto !important;
    min-width: 150px !important;
    justify-content: center !important;
  }

  /* On wider tablets (>= 920px), place filters and actions in the same line */
  @media (min-width: 920px) {
    .topbar-filter-row {
      flex-direction: row !important;
      justify-content: space-between !important;
      align-items: center !important;
    }
    .topbar-filter-scroll {
      flex: 1 1 auto !important;
      max-width: 72% !important;
    }
    .topbar-filter-actions {
      flex: 0 0 auto !important;
      width: auto !important;
      justify-content: flex-end !important;
    }
  }

  /* Row 3: Tabs show text + icons on Tablet */
  .course-header-row-3 {
    display: flex !important;
    justify-content: center !important;
    width: 100% !important;
    margin-top: 2px !important;
  }

  .vue-tabs {
    display: inline-flex !important;
    justify-content: center !important;
    max-width: 100% !important;
  }

  .vue-tabs .vue-txt {
    display: inline !important;
    font-size: 11.5px !important;
    font-weight: 700 !important;
  }

  .vue-tabs .vue-tab {
    padding: 7px 12px !important;
    gap: 6px !important;
  }
}

/* 2. PHONE SPECIFIC (<= 640px) */
@media (max-width: 640px) {
  .main-content {
    padding-inline: 8px !important;
  }

  .course-command-bar {
    padding: 10px 10px !important;
    gap: 8px !important;
  }

  .course-command-bar {
    padding: 12px 10px !important;
    gap: 10px !important;
  }

  .course-header-row-1 {
    display: flex !important;
    flex-direction: column !important;
    gap: 10px !important;
    width: 100% !important;
  }

  .module-hero-left {
    display: flex !important;
    align-items: center !important;
    gap: 8px !important;
    width: 100% !important;
  }

  .module-hero-title {
    font-size: 19px !important;
    font-weight: 700 !important;
    margin: 0 !important;
    white-space: nowrap !important;
  }

  .module-hero-avatar,
  #topbarSubjectImg,
  .topbar-subject-img,
  .topbar-subject-img-placeholder {
    width: 40px !important;
    height: 40px !important;
    font-size: 18px !important;
    border-radius: 10px !important;
    flex-shrink: 0 !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    overflow: hidden !important;
  }

  .topbar-subject-img,
  .topbar-subject-img-placeholder img {
    width: 100% !important;
    height: 100% !important;
    object-fit: cover !important;
  }

  /* Screenshot 2: Meta pills [3 groupes] [13 cours] next to module title */
  #coursesPageMeta {
    display: inline-flex !important;
    align-items: center !important;
    gap: 6px !important;
    margin-left: auto !important;
    flex-wrap: nowrap !important;
  }

  .module-hero-pill {
    font-size: 11px !important;
    padding: 4px 8px !important;
    border-radius: 8px !important;
    white-space: nowrap !important;
  }

  #coursesPageMeta #metaPillCompleted,
  #coursesPageMeta .module-hero-pill:nth-child(3) {
    display: none !important; /* Screenshot 2 shows only groupes and cours */
  }

  /* Mobile phone stats layout handled centrally at end of file (calc(100% - 4mm), 6 columns in 1 single row) */
  .course-page-stats {
    width: calc(100% - 4mm) !important;
  }

  /* Screenshot 2: Filter bar on phones in 3 columns x 2 rows */
  .course-header-row-2 {
    display: flex !important;
    flex-direction: column !important;
    gap: 8px !important;
    width: 100% !important;
  }

  .topbar-filter-row {
    display: flex !important;
    flex-direction: column !important;
    gap: 8px !important;
    width: 100% !important;
  }

  .topbar-filter-scroll {
    display: grid !important;
    grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
    gap: 6px !important;
    width: 100% !important;
  }

  .topbar-filter-scroll .filter-dropdown,
  .topbar-filter-scroll .filter-btn {
    width: 100% !important;
    border-radius: 10px !important;
    padding: 8px 6px !important;
  }

  .topbar-filter-scroll .filter-btn span {
    font-size: 11px !important;
    font-weight: 600 !important;
  }

  /* Screenshot 2: Actions row below filters (Réinitialiser & Les Profs in 2 columns 50%/50%) */
  .topbar-filter-actions {
    display: grid !important;
    grid-template-columns: 1fr 1fr !important;
    gap: 8px !important;
    width: 100% !important;
  }

  .topbar-filter-actions .filter-btn {
    width: 100% !important;
    justify-content: center !important;
    border-radius: 10px !important;
    padding: 8px 10px !important;
    font-size: 12px !important;
    font-weight: 600 !important;
  }

  /* Screenshot 2: Centered Vue tabs pill bar with clean icons only on mobile */
  .course-header-row-3 {
    display: flex !important;
    justify-content: center !important;
    width: 100% !important;
    margin-top: 4px !important;
  }

  .vue-tabs {
    display: inline-flex !important;
    justify-content: center !important;
    align-items: center !important;
    margin: 4px auto !important;
    padding: 4px !important;
    background: #e2e8f0 !important;
    border-radius: 9999px !important;
    gap: 3px !important;
    max-width: 100% !important;
    overflow-x: auto !important;
  }

  body.theme-dark .vue-tabs {
    background: #1e293b !important;
  }

  .vue-tabs .vue-tab {
    padding: 7px 10px !important;
    border-radius: 9999px !important;
    font-size: 13px !important;
    min-width: 32px !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
  }

  .vue-tabs .vue-tab.active {
    background: #ffffff !important;
    color: #2563eb !important;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1) !important;
  }

  body.theme-dark .vue-tabs .vue-tab.active {
    background: #0f172a !important;
    color: #60a5fa !important;
  }

  .vue-tabs .vue-txt {
    display: none !important; /* In Screenshot 2, icons only on mobile */
  }

  /* Mobile Course Row Phone adjustments */
  .mobile-course-card,
  .mobile-course-row {
    padding: 12px 14px !important;
    border-radius: 0 !important;
    border: none !important;
    border-bottom: 1px solid var(--border-color, rgba(148, 163, 184, 0.22)) !important;
    background: transparent !important;
    box-shadow: none !important;
  }

  .mobile-card-title-input {
    font-size: 15px !important;
  }

  .mobile-couche-card {
    padding: 8px 10px !important;
  }

  .couche-status-text {
    font-size: 11px !important;
  }

  .mobile-eval-pill {
    padding: 4px 8px !important;
  }
}

/* ==========================================================================
   GLOBAL SUIVI CONSOLIDATED PDF EXPORT BANNER & MODAL STYLING
   ========================================================================== */
.suivi-global-export-card {
  position: relative;
  background: linear-gradient(135deg, #180b38 0%, #2e1065 50%, #4c1d95 100%) !important;
  border: 1.5px solid rgba(167, 139, 250, 0.3) !important;
  border-radius: 20px !important;
  padding: 22px 24px !important;
  margin: 20px 0 24px !important;
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  gap: 24px !important;
  box-shadow: 0 12px 36px -6px rgba(46, 16, 101, 0.45) !important;
  color: #ffffff !important;
  transition: all 0.25s cubic-bezier(0.4, 0, 0.2, 1) !important;
  overflow: hidden !important;
}

[data-theme="dark"] .suivi-global-export-card,
body.theme-dark .suivi-global-export-card {
  background: linear-gradient(135deg, #120726 0%, #230b50 50%, #3b1277 100%) !important;
  border-color: rgba(167, 139, 250, 0.4) !important;
  box-shadow: 0 14px 40px -6px rgba(0, 0, 0, 0.6) !important;
}

.suivi-global-export-card:hover {
  transform: translateY(-2px);
  box-shadow: 0 16px 44px -4px rgba(76, 29, 149, 0.55) !important;
}

.global-export-content {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.global-export-badge {
  display: inline-flex !important;
  align-items: center !important;
  gap: 6px !important;
  font-size: 11px !important;
  font-weight: 800 !important;
  text-transform: uppercase !important;
  letter-spacing: 0.5px !important;
  color: #ffffff !important;
  background: rgba(255, 255, 255, 0.15) !important;
  border: 1px solid rgba(255, 255, 255, 0.25) !important;
  padding: 4px 12px !important;
  border-radius: 99px !important;
  width: fit-content !important;
}

.global-export-title {
  font-family: var(--font-heading) !important;
  font-size: 20px !important;
  font-weight: 850 !important;
  color: #ffffff !important;
  margin: 0 !important;
  line-height: 1.3 !important;
}

.global-export-desc {
  font-size: 13px;
  line-height: 1.5;
  color: rgba(255, 255, 255, 0.85) !important;
  margin: 0;
  max-width: 680px;
}

.global-export-features {
  display: flex;
  align-items: center;
  gap: 12px;
  flex-wrap: wrap;
  margin-top: 4px;
}

.export-feat-tag {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 11.5px;
  font-weight: 600;
  color: #ffffff;
  background: rgba(255, 255, 255, 0.1);
  border: 1px solid rgba(255, 255, 255, 0.2);
  padding: 4px 10px;
  border-radius: 99px;
}

.export-feat-tag i {
  color: #a78bfa;
  font-size: 11px;
}

.global-export-action-wrap {
  flex-shrink: 0;
}

.btn-global-export-trigger {
  display: inline-flex !important;
  align-items: center !important;
  gap: 10px !important;
  padding: 12px 22px !important;
  border-radius: 14px !important;
  background: #ffffff !important;
  color: #4c1d95 !important;
  font-family: var(--font-heading) !important;
  font-size: 13.5px !important;
  font-weight: 800 !important;
  border: none !important;
  cursor: pointer !important;
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.25) !important;
  transition: all 0.22s ease !important;
  white-space: nowrap !important;
}

.btn-global-export-trigger:hover {
  transform: translateY(-2px) scale(1.02);
  box-shadow: 0 8px 24px rgba(255, 255, 255, 0.3) !important;
  background: #f8fafc !important;
}

.btn-global-export-trigger i {
  font-size: 16px;
}

/* Modal Scope Selector */
.global-pdf-scope-selector {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 8px;
}

.scope-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 10px 14px;
  border-radius: 12px;
  border: 1.5px solid var(--border-color);
  background: var(--bg-input);
  color: var(--text-muted);
  font-size: 12px;
  font-weight: 750;
  cursor: pointer;
  transition: all 0.2s ease;
}

.scope-btn:hover {
  color: var(--text-main);
  border-color: var(--primary);
}

.scope-btn.active {
  border-color: var(--primary);
  background: var(--primary-light);
  color: var(--primary);
  box-shadow: 0 0 0 3px rgba(37, 99, 235, 0.12);
}

/* 3 PDF Design Styles Grid */
.global-pdf-styles-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 12px;
}

.pdf-style-card {
  position: relative;
  background: var(--bg-input);
  border: 2px solid var(--border-color);
  border-radius: 14px;
  overflow: hidden;
  cursor: pointer;
  display: flex;
  flex-direction: column;
  transition: all 0.22s ease;
}

.pdf-style-card:hover {
  transform: translateY(-2px);
  border-color: var(--primary);
  box-shadow: 0 8px 20px rgba(0, 0, 0, 0.08);
}

.pdf-style-card.active {
  border-color: var(--primary);
  box-shadow: 0 0 0 3px rgba(37, 99, 235, 0.18);
}

.pdf-style-badge-tag {
  position: absolute;
  top: 8px;
  right: 8px;
  background: #10b981;
  color: #ffffff;
  font-size: 9.5px;
  font-weight: 800;
  padding: 2px 7px;
  border-radius: 99px;
  display: none;
  align-items: center;
  gap: 4px;
  z-index: 2;
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.2);
}

.pdf-style-card.active .pdf-style-badge-tag {
  display: inline-flex;
}

.pdf-style-preview {
  padding: 14px 12px 10px;
  min-height: 60px;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
}

.style-preview-bars {
  display: flex;
  gap: 4px;
  margin-top: 8px;
}

.pdf-style-info {
  padding: 10px 12px;
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.pdf-style-info strong {
  font-size: 12.5px;
  color: var(--text-main);
  font-family: var(--font-heading);
}

.pdf-style-info small {
  font-size: 10.5px;
  line-height: 1.4;
  color: var(--text-muted);
}

@media (max-width: 768px) {
  .suivi-global-export-card {
    flex-direction: column;
    align-items: flex-start;
    padding: 16px;
    gap: 14px;
  }
  .global-export-action-wrap {
    width: 100%;
  }
  .btn-global-export-trigger {
    width: 100%;
    justify-content: center;
  }
  .global-pdf-styles-grid {
    grid-template-columns: 1fr;
    gap: 10px;
  }
  .global-pdf-scope-selector {
    grid-template-columns: 1fr;
  }
}

/* ==========================================================================
   LES PROFS MODAL STYLING
   ========================================================================== */
.profs-add-input-wrap {
  display: flex;
  gap: 8px;
  align-items: center;
}

.profs-add-input-wrap .form-control {
  flex: 1;
}

.profs-list-wrap {
  display: flex;
  flex-direction: column;
  gap: 10px;
  margin-top: 6px;
}

.profs-list-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  font-size: 12px;
  font-weight: 750;
  color: var(--text-muted);
  text-transform: uppercase;
  letter-spacing: 0.5px;
}

.profs-count-badge {
  background: var(--primary-light, rgba(37, 99, 235, 0.1));
  color: var(--primary, #2563eb);
  padding: 2px 8px;
  border-radius: 99px;
  font-size: 11px;
}

.profs-list-container {
  display: flex;
  flex-direction: column;
  gap: 8px;
  max-height: 280px;
  overflow-y: auto;
  padding-right: 4px;
}

.prof-item-card {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 10px 14px;
  background: var(--bg-card);
  border: 1px solid var(--border-color);
  border-radius: 12px;
  transition: all 0.2s ease;
}

.prof-item-card:hover {
  border-color: var(--primary);
  background: var(--bg-input);
}

.prof-item-left {
  display: flex;
  align-items: center;
  gap: 10px;
}

.prof-item-avatar {
  width: 34px;
  height: 34px;
  border-radius: 50%;
  background: rgba(37, 99, 235, 0.12);
  color: #2563eb;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 14px;
  flex-shrink: 0;
}

[data-theme="dark"] .prof-item-avatar {
  background: rgba(96, 165, 250, 0.2);
  color: #60a5fa;
}

.prof-item-info {
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.prof-item-name {
  font-size: 13.5px;
  font-weight: 750;
  color: var(--text-main);
}

.prof-item-courses-count {
  font-size: 11px;
  color: var(--text-muted);
}

.prof-item-delete {
  background: none;
  border: none;
  color: #ef4444;
  cursor: pointer;
  padding: 6px 8px;
  border-radius: 8px;
  transition: all 0.2s ease;
  font-size: 13px;
}

.prof-item-delete:hover {
  background: rgba(239, 68, 68, 0.12);
  transform: scale(1.1);
}

.profs-empty-msg {
  padding: 24px;
  text-align: center;
  color: var(--text-muted);
  font-size: 13px;
  font-style: italic;
  border: 1px dashed var(--border-color);
  border-radius: 12px;
}

/* ==========================================================================
   GUIDE SUIVI PNS PAGE STYLING
   Comprehensive, clean, high-precision academic presentation
   ========================================================================== */
.guide-wrapper {
  max-width: 1150px;
  margin: 0 auto;
  padding: 8px 4px 60px;
  display: flex;
  flex-direction: column;
  gap: 26px;
}

.guide-hero-banner {
  background: linear-gradient(135deg, rgba(37, 99, 235, 0.07) 0%, rgba(6, 182, 212, 0.05) 100%), var(--bg-card);
  border: 1px solid rgba(37, 99, 235, 0.22);
  border-radius: 22px;
  padding: 28px 32px;
  display: flex;
  flex-direction: column;
  gap: 14px;
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.03);
}

[data-theme="dark"] .guide-hero-banner {
  background: linear-gradient(135deg, rgba(37, 99, 235, 0.15) 0%, rgba(6, 182, 212, 0.08) 100%), #181d2f;
  border-color: rgba(37, 99, 235, 0.35);
}

.guide-hero-badge {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 5px 12px;
  border-radius: 99px;
  background: rgba(37, 99, 235, 0.12);
  color: #2563eb;
  font-size: 11.5px;
  font-weight: 800;
  width: fit-content;
  text-transform: uppercase;
  letter-spacing: 0.5px;
}

[data-theme="dark"] .guide-hero-badge {
  background: rgba(96, 165, 250, 0.2);
  color: #93c5fd;
}

.guide-hero-title {
  font-size: clamp(22px, 2.5vw, 30px);
  font-weight: 850;
  color: var(--text-main);
  margin: 0;
  line-height: 1.25;
  letter-spacing: -0.4px;
}

.guide-hero-desc {
  font-size: 14px;
  line-height: 1.65;
  color: var(--text-muted);
  margin: 0;
  max-width: 900px;
}

.guide-quick-pills {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
  margin-top: 6px;
}

.guide-quick-pill {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 6px 14px;
  border-radius: 99px;
  border: 1px solid var(--border-color);
  background: var(--bg-card);
  color: var(--text-main);
  font-size: 12px;
  font-weight: 700;
  text-decoration: none;
  transition: all 0.2s ease;
}

.guide-quick-pill:hover {
  background: var(--bg-input);
  border-color: var(--primary);
  color: var(--primary);
  transform: translateY(-1px);
}

.guide-quick-pill.highlight {
  background: linear-gradient(135deg, #2563eb, #1d4ed8);
  color: #ffffff;
  border: none;
  box-shadow: 0 4px 12px rgba(37, 99, 235, 0.3);
}

.guide-quick-pill.highlight:hover {
  background: linear-gradient(135deg, #1d4ed8, #1e40af);
  color: #ffffff;
}

.guide-section {
  background: var(--bg-card);
  border: 1px solid var(--border-color);
  border-radius: 20px;
  padding: 26px 28px;
  display: flex;
  flex-direction: column;
  gap: 20px;
  box-shadow: 0 4px 18px rgba(0, 0, 0, 0.02);
}

[data-theme="dark"] .guide-section {
  background: #181d2f;
  border-color: #28304a;
}

.guide-section-header {
  display: flex;
  align-items: center;
  gap: 14px;
}

.guide-section-icon {
  width: 44px;
  height: 44px;
  border-radius: 12px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 20px;
  flex-shrink: 0;
}

.guide-section-icon.couche-color { background: rgba(108, 99, 255, 0.12); color: #6c63ff; }
.guide-section-icon.math-color { background: rgba(16, 185, 129, 0.12); color: #10b981; }
.guide-section-icon.vues-color { background: rgba(6, 182, 212, 0.12); color: #06b6d4; }
.guide-section-icon.time-color { background: rgba(245, 158, 11, 0.12); color: #f59e0b; }
.guide-section-icon.prof-color { background: rgba(37, 99, 235, 0.12); color: #2563eb; }
.guide-section-icon.sim-color { background: linear-gradient(135deg, #3b82f6, #8b5cf6); color: #ffffff; }

.guide-section-title {
  font-size: 19px;
  font-weight: 850;
  color: var(--text-main);
  margin: 0 0 3px 0;
  letter-spacing: -0.2px;
}

.guide-section-sub {
  font-size: 12.5px;
  color: var(--text-muted);
}

.guide-p {
  font-size: 13.5px;
  line-height: 1.65;
  color: var(--text-main);
  margin: 0;
}

/* Couches Cards Grid */
.guide-couches-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  gap: 16px;
}

.guide-couche-card {
  background: var(--bg-input);
  border: 1px solid var(--border-color);
  border-radius: 16px;
  padding: 18px;
  display: flex;
  flex-direction: column;
  gap: 12px;
  transition: all 0.22s ease;
}

.guide-couche-card:hover {
  transform: translateY(-2px);
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.05);
}

.guide-couche-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
}

.couche-pill-tag {
  padding: 4px 10px;
  border-radius: 99px;
  font-size: 11px;
  font-weight: 850;
  text-transform: uppercase;
}

.couche-pill-tag.c1 { background: rgba(108, 99, 255, 0.15); color: #6c63ff; }
.couche-pill-tag.c2 { background: rgba(0, 212, 170, 0.15); color: #00a88a; }
.couche-pill-tag.c3 { background: rgba(255, 107, 107, 0.15); color: #e11d48; }
.couche-pill-tag.c4 { background: rgba(245, 158, 11, 0.15); color: #d97706; }

.couche-meta-tag {
  font-size: 11px;
  font-weight: 600;
  color: var(--text-muted);
  display: inline-flex;
  align-items: center;
  gap: 5px;
}

.guide-couche-name {
  font-size: 15px;
  font-weight: 800;
  color: var(--text-main);
  margin: 0;
  line-height: 1.3;
}

.guide-couche-desc {
  font-size: 12.5px;
  line-height: 1.55;
  color: var(--text-muted);
  margin: 0;
}

.guide-couche-tasks {
  background: var(--bg-card);
  border: 1px solid var(--border-color);
  border-radius: 12px;
  padding: 12px;
  display: flex;
  flex-direction: column;
  gap: 8px;
  margin-top: auto;
}

.tasks-title {
  font-size: 11px;
  font-weight: 800;
  text-transform: uppercase;
  color: var(--text-muted);
  letter-spacing: 0.4px;
}

.guide-couche-tasks ul {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.guide-couche-tasks li {
  font-size: 11.5px;
  line-height: 1.45;
  color: var(--text-main);
  display: flex;
  align-items: flex-start;
  gap: 6px;
}

.guide-couche-tasks li i {
  color: #10b981;
  font-size: 10px;
  margin-top: 3px;
  flex-shrink: 0;
}

/* Formulas Grid */
.guide-formulas-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  gap: 16px;
}

.guide-formula-card {
  background: var(--bg-input);
  border: 1px solid var(--border-color);
  border-radius: 16px;
  padding: 18px;
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.formula-badge {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 11px;
  font-weight: 750;
  color: #2563eb;
  text-transform: uppercase;
  letter-spacing: 0.4px;
}

.formula-title {
  font-size: 15px;
  font-weight: 800;
  color: var(--text-main);
  margin: 0;
}

.formula-desc {
  font-size: 12.5px;
  line-height: 1.55;
  color: var(--text-muted);
  margin: 0;
}

.formula-math-box {
  background: #0f172a;
  color: #38bdf8;
  padding: 10px 14px;
  border-radius: 10px;
  font-family: 'JetBrains Mono', 'Fira Code', Consolas, monospace;
  font-size: 12px;
  overflow-x: auto;
  border: 1px solid rgba(255, 255, 255, 0.08);
}

.formula-example {
  font-size: 11.5px;
  line-height: 1.5;
  color: var(--text-main);
  background: var(--bg-card);
  padding: 10px 12px;
  border-radius: 10px;
  border: 1px solid var(--border-color);
}

/* 7 Vues List */
.guide-vues-list {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.guide-vue-item {
  display: flex;
  align-items: flex-start;
  gap: 16px;
  padding: 14px 16px;
  background: var(--bg-input);
  border: 1px solid var(--border-color);
  border-radius: 14px;
  transition: all 0.2s ease;
}

.guide-vue-item:hover {
  border-color: var(--primary);
  transform: translateX(4px);
}

.guide-vue-pill {
  background: var(--bg-card);
  border: 1px solid var(--border-color);
  padding: 6px 14px;
  border-radius: 99px;
  font-size: 12px;
  font-weight: 800;
  color: #2563eb;
  display: inline-flex;
  align-items: center;
  gap: 7px;
  flex-shrink: 0;
  white-space: nowrap;
}

[data-theme="dark"] .guide-vue-pill {
  color: #60a5fa;
}

.guide-vue-content {
  display: flex;
  flex-direction: column;
  gap: 3px;
}

.guide-vue-content h4 {
  font-size: 13.5px;
  font-weight: 750;
  color: var(--text-main);
  margin: 0;
}

.guide-vue-content p {
  font-size: 12.5px;
  line-height: 1.5;
  color: var(--text-muted);
  margin: 0;
}

/* Stats Explanation Grid */
.guide-stats-explanation-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
  gap: 12px;
}

.stat-expl-card {
  background: var(--bg-input);
  border: 1px solid var(--border-color);
  border-radius: 14px;
  padding: 14px;
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.stat-expl-head {
  font-size: 12.5px;
  font-weight: 800;
  color: var(--text-main);
  display: flex;
  align-items: center;
  gap: 6px;
}

.stat-expl-head i {
  color: #2563eb;
}

.stat-expl-card p {
  font-size: 11.5px;
  line-height: 1.5;
  color: var(--text-muted);
  margin: 0;
}

/* Callout Box */
.guide-callout-box {
  display: flex;
  gap: 16px;
  padding: 18px 20px;
  background: rgba(37, 99, 235, 0.06);
  border: 1px solid rgba(37, 99, 235, 0.25);
  border-radius: 16px;
}

[data-theme="dark"] .guide-callout-box {
  background: rgba(37, 99, 235, 0.12);
}

.callout-icon {
  font-size: 24px;
  color: #2563eb;
  flex-shrink: 0;
}

.callout-content {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.callout-content h4 {
  font-size: 15px;
  font-weight: 800;
  color: var(--text-main);
  margin: 0;
}

.callout-content p {
  font-size: 13px;
  line-height: 1.6;
  color: var(--text-main);
  margin: 0;
}

.callout-content ul {
  margin: 0;
  padding-left: 18px;
  font-size: 12.5px;
  line-height: 1.55;
  color: var(--text-muted);
}

/* Interactive Simulator */
.guide-simulator-card {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 20px;
  background: var(--bg-input);
  border: 1.5px solid rgba(37, 99, 235, 0.3);
  border-radius: 18px;
  padding: 22px;
}

.sim-col-title {
  font-size: 14px;
  font-weight: 800;
  color: var(--text-main);
  margin: 0 0 14px 0;
  display: flex;
  align-items: center;
  gap: 7px;
}

.sim-inputs-col,
.sim-results-col {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.sim-form-row {
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.sim-form-row label {
  font-size: 11.5px;
  font-weight: 700;
  color: var(--text-muted);
}

.sim-stars-picker {
  display: flex;
  align-items: center;
  gap: 6px;
}

.sim-diff-star {
  font-size: 20px;
  cursor: pointer;
  color: #cbd5e1;
  transition: transform 0.15s ease, color 0.15s ease;
  line-height: 1;
}

.sim-diff-star.active {
  color: #f59e0b;
}

.sim-diff-star:hover {
  transform: scale(1.25);
  color: #fbbf24;
}

.sim-cboxes-row {
  display: flex;
  align-items: center;
  gap: 16px;
  padding-top: 4px;
}

.sim-cbox-label {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 13px;
  font-weight: 750;
  color: var(--text-main);
  cursor: pointer;
}

.sim-kpis-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
}

.sim-kpi-card {
  background: var(--bg-card);
  border: 1px solid var(--border-color);
  border-radius: 12px;
  padding: 12px;
  display: flex;
  flex-direction: column;
  gap: 4px;
  text-align: center;
}

.sim-kpi-lbl {
  font-size: 11px;
  font-weight: 700;
  color: var(--text-muted);
}

.sim-kpi-val {
  font-size: 20px;
  font-weight: 850;
  color: var(--text-main);
}

.sim-kpi-val.highlight {
  color: #f59e0b;
}

.sim-kpi-val.primary {
  color: #2563eb;
}

.sim-kpi-hint {
  font-size: 10px;
  color: var(--text-muted);
}

.sim-prog-visual {
  margin-top: 6px;
}

.sim-prog-track {
  width: 100%;
  height: 10px;
  background: var(--border-color);
  border-radius: 99px;
  overflow: hidden;
}

.sim-prog-fill {
  height: 100%;
  background: linear-gradient(90deg, #3b82f6, #10b981);
  border-radius: 99px;
  transition: width 0.3s ease;
}

@media (max-width: 820px) {
  .guide-simulator-card {
    grid-template-columns: 1fr;
  }
  .guide-vue-item {
    flex-direction: column;
    align-items: stretch;
    gap: 8px;
  }
}

/* ========================================================
   VUE 8: LES SOURCES (DESKTOP & MOBILE)
   ======================================================== */
.course-sources-cell-wrap {
  display: flex;
  flex-direction: column;
  gap: 6px;
  width: 100%;
  padding: 4px 0;
}

.sources-empty-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 6px 10px;
  border-radius: 8px;
  background: var(--bg2, rgba(148, 163, 184, 0.08));
  border: 1px dashed var(--border-color, #cbd5e1);
}

.sources-empty-hint {
  font-size: 11px;
  color: var(--text3, #94a3b8);
  display: flex;
  align-items: center;
  gap: 6px;
}

.sources-list-grid {
  display: flex;
  flex-direction: column;
  gap: 6px;
  width: 100%;
}

.source-row-card {
  display: grid;
  grid-template-columns: auto minmax(130px, 180px) 1fr auto;
  gap: 8px;
  align-items: center;
  background: var(--bg2, #f8fafc);
  border: 1px solid var(--border-color, #e2e8f0);
  border-radius: 8px;
  padding: 6px 8px;
  transition: border-color 0.2s, box-shadow 0.2s;
}

body.theme-dark .source-row-card {
  background: #181d2f;
  border-color: #2e3856;
}

.source-row-card:hover {
  border-color: #93c5fd;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.04);
}

.source-type-pill {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 4px 8px;
  border-radius: 6px;
  font-size: 11px;
  font-weight: 600;
  position: relative;
  cursor: pointer;
  white-space: nowrap;
}

.source-type-select-inline {
  position: absolute;
  inset: 0;
  opacity: 0;
  width: 100%;
  height: 100%;
  cursor: pointer;
}

.source-input {
  width: 100%;
  border: 1px solid var(--border-color, #cbd5e1);
  border-radius: 6px;
  padding: 5px 8px;
  font-size: 12px;
  background: #ffffff;
  color: var(--text1, #0f172a);
  outline: none;
  transition: border-color 0.2s, box-shadow 0.2s;
}

body.theme-dark .source-input {
  background: #0f172a;
  border-color: #2e3856;
  color: #f8fafc;
}

.source-input:focus {
  border-color: #3b82f6;
  box-shadow: 0 0 0 2px rgba(59, 130, 246, 0.15);
}

.source-url-input-wrap {
  position: relative;
  display: flex;
  align-items: center;
  width: 100%;
}

.source-url-icon {
  position: absolute;
  left: 8px;
  color: #94a3b8;
  font-size: 11px;
  pointer-events: none;
}

.source-url-input {
  padding-left: 26px !important;
}

.source-col-actions {
  display: inline-flex;
  align-items: center;
  gap: 6px;
}

.btn-source-open {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 5px 10px;
  border-radius: 6px;
  font-size: 11px;
  font-weight: 600;
  background: #2563eb;
  color: #ffffff !important;
  text-decoration: none;
  border: none;
  cursor: pointer;
  transition: all 0.2s ease;
  white-space: nowrap;
}

.btn-source-open:hover {
  background: #1d4ed8;
  transform: translateY(-1px);
}

.btn-source-open.disabled {
  opacity: 0.45;
  cursor: not-allowed;
  background: #94a3b8;
}

.btn-source-delete {
  width: 26px;
  height: 26px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border: 1px solid transparent;
  border-radius: 6px;
  background: transparent;
  color: #ef4444;
  cursor: pointer;
  font-size: 12px;
  transition: all 0.2s ease;
}

.btn-source-delete:hover {
  background: rgba(239, 68, 68, 0.1);
  border-color: rgba(239, 68, 68, 0.25);
  color: #dc2626;
}

.btn-source-add-inline {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 5px 10px;
  font-size: 11px;
  font-weight: 600;
  border-radius: 6px;
  border: 1px solid #cbd5e1;
  background: #ffffff;
  color: #2563eb;
  cursor: pointer;
  transition: all 0.2s ease;
  width: fit-content;
}

body.theme-dark .btn-source-add-inline {
  background: #181d2f;
  border-color: #2e3856;
  color: #60a5fa;
}

.btn-source-add-inline:hover {
  background: #eff6ff;
  border-color: #93c5fd;
  transform: translateY(-1px);
}

/* Mobile Sources Styles */
.mobile-course-sources-wrap {
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding: 8px 0;
  width: 100%;
}

.mobile-source-card {
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding: 10px;
  background: var(--bg2, #f8fafc);
  border: 1px solid var(--border-color, #e2e8f0);
  border-radius: 10px;
}

body.theme-dark .mobile-source-card {
  background: #181d2f;
  border-color: #2e3856;
}

.mobile-source-card-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.mobile-source-card-body {
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.mobile-source-input {
  width: 100%;
  border: 1px solid var(--border-color, #cbd5e1);
  border-radius: 6px;
  padding: 6px 8px;
  font-size: 12px;
  background: #ffffff;
  color: var(--text1, #0f172a);
}

body.theme-dark .mobile-source-input {
  background: #0f172a;
  border-color: #2e3856;
  color: #f8fafc;
}

.btn-source-open-mobile {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  padding: 8px 12px;
  border-radius: 8px;
  font-size: 12px;
  font-weight: 600;
  background: #2563eb;
  color: #ffffff;
  border: none;
  cursor: pointer;
}

.btn-source-delete-mobile {
  background: transparent;
  border: none;
  color: #ef4444;
  font-size: 14px;
  cursor: pointer;
  padding: 4px;
}

.btn-source-add-mobile {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  width: 100%;
  padding: 8px 12px;
  border-radius: 8px;
  border: 1px dashed #93c5fd;
  background: rgba(37, 99, 235, 0.05);
  color: #2563eb;
  font-size: 12px;
  font-weight: 600;
  cursor: pointer;
}

/* ========================================================
   VUE 9: STUDIO DE TÉLÉCHARGEMENT & EXPORT (PDF & IMAGE)
   ======================================================== */
.suivi-download-studio {
  display: flex;
  flex-direction: column;
  gap: 20px;
  padding: 24px;
  background: var(--bg-card, #ffffff);
  border: 1px solid var(--border-color, #e2e8f0);
  border-radius: 18px;
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.03);
  margin-bottom: 24px;
}

body.theme-dark .suivi-download-studio {
  background: #111726;
  border-color: #2e3856;
}

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

.studio-title-wrap {
  display: flex;
  align-items: center;
  gap: 12px;
}

.studio-icon-badge {
  width: 44px;
  height: 44px;
  border-radius: 12px;
  background: linear-gradient(135deg, #2563eb, #7c3aed);
  color: #ffffff;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 20px;
}

.studio-title {
  font-size: 18px;
  font-weight: 750;
  color: var(--text1, #0f172a);
  margin: 0;
}
body.theme-dark .studio-title,
[data-theme="dark"] .studio-title {
  color: #f8fafc !important;
}

.studio-subtitle {
  font-size: 12px;
  color: var(--text3, #64748b);
  margin: 2px 0 0 0;
}
body.theme-dark .studio-subtitle,
[data-theme="dark"] .studio-subtitle {
  color: #94a3b8 !important;
}

.studio-layout-grid {
  display: grid;
  grid-template-columns: minmax(320px, 400px) 1fr;
  gap: 24px;
  align-items: start;
}

@media (max-width: 992px) {
  .studio-layout-grid {
    grid-template-columns: 1fr;
  }
}

.studio-controls-column {
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.studio-section-card {
  display: flex;
  flex-direction: column;
  gap: 10px;
  padding: 14px 16px;
  border-radius: 12px;
  background: var(--bg2, #f8fafc);
  border: 1px solid var(--border-color, #e2e8f0);
}

body.theme-dark .studio-section-card {
  background: #181d2f;
  border-color: #2e3856;
}

.studio-section-title {
  font-size: 12px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  color: var(--text2, #475569);
  display: flex;
  align-items: center;
  gap: 6px;
}

/* Format Toggle Buttons */
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 8px;

  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 10px 12px;
  border-radius: 10px;
  border: 2px solid var(--border-color, #e2e8f0);
  background: #ffffff;
  color: var(--text1, #0f172a);
  font-size: 13px;
  font-weight: 650;
  cursor: pointer;
  transition: all 0.2s ease;

  background: #0f172a;
  border-color: #2e3856;
  color: #f8fafc;

  border-color: #2563eb;
  background: #eff6ff;
  color: #1d4ed8;
  box-shadow: 0 0 0 3px rgba(37, 99, 235, 0.15);

  background: rgba(37, 99, 235, 0.2);
  border-color: #3b82f6;
  color: #60a5fa;

/* Studio Select Input */
.studio-select {
  width: 100%;
  padding: 8px 12px;
  border-radius: 8px;
  border: 1px solid var(--border-color, #cbd5e1);
  background: #ffffff;
  color: var(--text1, #0f172a);
  font-size: 13px;
  outline: none;
  cursor: pointer;
}

body.theme-dark .studio-select {
  background: #0f172a;
  border-color: #2e3856;
  color: #f8fafc;
}

/* Style Selector Cards */
.style-cards-grid {
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.style-choice-card {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 10px 12px;
  border-radius: 10px;
  border: 1.5px solid var(--border-color, #e2e8f0);
  background: #ffffff;
  cursor: pointer;
  transition: all 0.2s ease;
}

body.theme-dark .style-choice-card {
  background: #0f172a;
  border-color: #2e3856;
}

.style-choice-card:hover {
  border-color: #93c5fd;
  transform: translateX(2px);
}

.style-choice-card.active {
  border-color: #2563eb;
  background: #eff6ff;
  box-shadow: 0 0 0 2px rgba(37, 99, 235, 0.2);
}

body.theme-dark .style-choice-card.active {
  background: rgba(37, 99, 235, 0.15);
  border-color: #3b82f6;
}

.style-choice-left {
  display: flex;
  align-items: center;
  gap: 10px;
}

.style-preview-swatch {
  width: 22px;
  height: 22px;
  border-radius: 6px;
  border: 1px solid rgba(0, 0, 0, 0.1);
  flex-shrink: 0;
}

.style-choice-name {
  font-size: 13px;
  font-weight: 600;
  color: var(--text1, #0f172a);
}

body.theme-dark .style-choice-name {
  color: #f8fafc;
}

.style-choice-desc {
  font-size: 10.5px;
  color: var(--text3, #64748b);
}

/* Checkbox option row */
.studio-option-row {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 12px;
  color: var(--text2, #334155);
  cursor: pointer;
  user-select: none;
}

body.theme-dark .studio-option-row {
  color: #cbd5e1;
}

/* Large CTA Button */
.btn-execute-download {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  width: 100%;
  padding: 14px 20px;
  border-radius: 12px;
  border: none;
  background: linear-gradient(135deg, #2563eb, #1d4ed8);
  color: #ffffff;
  font-size: 15px;
  font-weight: 750;
  cursor: pointer;
  box-shadow: 0 4px 12px rgba(37, 99, 235, 0.25);
  transition: all 0.2s ease;
}

.btn-execute-download:hover {
  background: linear-gradient(135deg, #1d4ed8, #1e40af);
  transform: translateY(-2px);
  box-shadow: 0 6px 16px rgba(37, 99, 235, 0.35);
}

.btn-execute-download:active {
  transform: translateY(0);
}

/* Live Preview Column */
.studio-preview-column {
  display: flex;
  flex-direction: column;
  gap: 12px;
  border-radius: 14px;
  background: var(--bg2, #f8fafc);
  border: 1px solid var(--border-color, #e2e8f0);
  padding: 16px;
  overflow: hidden;
}

body.theme-dark .studio-preview-column {
  background: #181d2f;
  border-color: #2e3856;
}

.studio-preview-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.studio-preview-badge {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 11px;
  font-weight: 700;
  padding: 4px 8px;
  border-radius: 6px;
  background: #e0f2fe;
  color: #0369a1;
}

.download-preview-canvas {
  width: 100%;
  max-height: 520px;
  overflow-y: auto;
  border-radius: 10px;
  border: 1px solid #cbd5e1;
  background: #ffffff;
  padding: 20px;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.05);
}

/* Styles applied inside preview / export */
.preview-style-modern {
  background: #ffffff !important;
  color: #0f172a !important;
  font-family: inherit;
}
.preview-style-modern .export-header-band {
  background: linear-gradient(135deg, #1e3a8a, #3b82f6);
  color: #ffffff;
  padding: 16px 20px;
  border-radius: 8px;
  margin-bottom: 16px;
}

.preview-style-dark {
  background: #0f172a !important;
  color: #f8fafc !important;
}
.preview-style-dark .export-header-band {
  background: linear-gradient(135deg, #1e1b4b, #4338ca);
  color: #ffffff;
  padding: 16px 20px;
  border-radius: 8px;
  margin-bottom: 16px;
}
.preview-style-dark table {
  color: #f8fafc !important;
}
.preview-style-dark th {
  background: #1e293b !important;
  color: #93c5fd !important;
}
.preview-style-dark td {
  border-color: #334155 !important;
}

.preview-style-academic {
  background: #ffffff !important;
  color: #111827 !important;
}
.preview-style-academic .export-header-band {
  border-bottom: 2px solid #0f766e;
  color: #0f766e;
  padding: 10px 0;
  margin-bottom: 16px;
}
.preview-style-academic th {
  background: #f0fdfa !important;
  color: #0f766e !important;
  border-bottom: 2px solid #0f766e !important;
}

.preview-style-pastel {
  background: #faf5ff !important;
  color: #581c87 !important;
}
.preview-style-pastel .export-header-band {
  background: linear-gradient(135deg, #7e22ce, #c084fc);
  color: #ffffff;
  padding: 16px 20px;
  border-radius: 12px;
  margin-bottom: 16px;
}

.preview-style-mono {
  background: #ffffff !important;
  color: #000000 !important;
}
.preview-style-mono .export-header-band {
  border: 1px solid #000000;
  padding: 12px;
  margin-bottom: 16px;
}
.preview-style-mono th {
  background: #e5e7eb !important;
  color: #000000 !important;
  border: 1px solid #000000 !important;
}
.preview-style-mono td {
  border: 1px solid #d1d5db !important;
}

/* ========================================================
   MODERN DESIGN SYSTEM: SUIVI TABLES & MOBILE CARDS
   (Static elegance, modern frames & curated color harmony)
   ======================================================== */

/* 1. Group Container Frame (PC & Mobile) */
.table-wrap.course-group-wrap {
  background: var(--bg-card, #ffffff) !important;
  border: 1.5px solid #e2e8f0 !important;
  border-radius: 16px !important;
  box-shadow: 0 2px 10px rgba(15, 23, 42, 0.04) !important;
  overflow: hidden !important;
  margin-bottom: 22px !important;
}

body.theme-dark .table-wrap.course-group-wrap,
[data-theme="dark"] .table-wrap.course-group-wrap {
  background: #111726 !important;
  border-color: #243048 !important;
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.25) !important;
}

/* Group Header: Clean, sleek medical/academic band */
.table-wrap.course-group-wrap .group-header {
  display: flex !important;
  align-items: center !important;
  gap: 12px !important;
  padding: 13px 18px !important;
  background: linear-gradient(90deg, #f8fafc 0%, #f1f5f9 100%) !important;
  border-bottom: 1.5px solid #e2e8f0 !important;
  border-left: none !important;
  cursor: pointer !important;
}

body.theme-dark .table-wrap.course-group-wrap .group-header,
[data-theme="dark"] .table-wrap.course-group-wrap .group-header {
  background: linear-gradient(90deg, #161f33 0%, #1a253c 100%) !important;
  border-bottom-color: #243048 !important;
  border-left: none !important;
}

.table-wrap.course-group-wrap .group-title {
  font-size: 15px !important;
  font-weight: 750 !important;
  color: #0f172a !important;
  letter-spacing: -0.2px !important;
}

body.theme-dark .table-wrap.course-group-wrap .group-title,
[data-theme="dark"] .table-wrap.course-group-wrap .group-title {
  color: #f8fafc !important;
}

.table-wrap.course-group-wrap .group-title.inline-edit {
  background: transparent !important;
  border: 1px solid transparent !important;
  border-radius: 6px !important;
  padding: 3px 6px !important;
}

.table-wrap.course-group-wrap .group-title.inline-edit:focus {
  background: #ffffff !important;
  border-color: #3b82f6 !important;
  box-shadow: 0 0 0 2px rgba(59, 130, 246, 0.15) !important;
  outline: none !important;
}

body.theme-dark .table-wrap.course-group-wrap .group-title.inline-edit:focus {
  background: #0f172a !important;
}

/* Modern stats pills in group header */
.table-wrap.course-group-wrap .group-stats {
  display: flex !important;
  align-items: center !important;
  gap: 8px !important;
  margin-left: auto !important;
}

.table-wrap.course-group-wrap .group-stats span {
  display: inline-flex !important;
  align-items: center !important;
  gap: 5px !important;
  font-size: 11px !important;
  font-weight: 700 !important;
  padding: 4px 10px !important;
  border-radius: 8px !important;
  background: #ffffff !important;
  border: 1px solid #e2e8f0 !important;
  color: #475569 !important;
}

body.theme-dark .table-wrap.course-group-wrap .group-stats span,
[data-theme="dark"] .table-wrap.course-group-wrap .group-stats span {
  background: #0f172a !important;
  border-color: #243048 !important;
  color: #cbd5e1 !important;
}

/* First stat: Cours count (Soft Blue) */
.table-wrap.course-group-wrap .group-stats span:nth-child(1) {
  background: #eff6ff !important;
  color: #1d4ed8 !important;
  border-color: #bfdbfe !important;
}
body.theme-dark .table-wrap.course-group-wrap .group-stats span:nth-child(1) {
  background: rgba(37, 99, 235, 0.15) !important;
  color: #93c5fd !important;
  border-color: rgba(37, 99, 235, 0.3) !important;
}

/* Second stat: Progression (Soft Emerald) */
.table-wrap.course-group-wrap .group-stats span:nth-child(2) {
  background: #ecfdf5 !important;
  color: #047857 !important;
  border-color: #a7f3d0 !important;
}
body.theme-dark .table-wrap.course-group-wrap .group-stats span:nth-child(2) {
  background: rgba(16, 185, 129, 0.15) !important;
  color: #6ee7b7 !important;
  border-color: rgba(16, 185, 129, 0.3) !important;
}

/* Third stat: Temps (Soft Violet) */
.table-wrap.course-group-wrap .group-stats span:nth-child(3) {
  background: #f5f3ff !important;
  color: #6d28d9 !important;
  border-color: #ddd6fe !important;
}
body.theme-dark .table-wrap.course-group-wrap .group-stats span:nth-child(3) {
  background: rgba(139, 92, 246, 0.15) !important;
  color: #c4b5fd !important;
  border-color: rgba(139, 92, 246, 0.3) !important;
}

.table-wrap.course-group-wrap .group-actions {
  display: flex !important;
  align-items: center !important;
  gap: 4px !important;
}

.table-wrap.course-group-wrap .group-actions .row-action-btn {
  width: 26px !important;
  height: 26px !important;
  border-radius: 7px !important;
  border: 1px solid #cbd5e1 !important;
  background: #ffffff !important;
  color: #475569 !important;
}

body.theme-dark .table-wrap.course-group-wrap .group-actions .row-action-btn {
  background: #182236 !important;
  border-color: #2e3d5a !important;
  color: #cbd5e1 !important;
}

/* 2. Desktop Table Layout & Headers */
table.course-table {
  width: 100% !important;
  border-collapse: separate !important;
  border-spacing: 0 !important;
  table-layout: fixed !important;
}

table.course-table thead tr {
  background: #f8fafc !important;
  border-bottom: 1.5px solid #e2e8f0 !important;
}

body.theme-dark table.course-table thead tr,
[data-theme="dark"] table.course-table thead tr {
  background: #131a2b !important;
  border-bottom-color: #243048 !important;
}

table.course-table thead th {
  padding: 10px 8px !important;
  font-size: 11px !important;
  font-weight: 750 !important;
  letter-spacing: 0.3px !important;
  color: #475569 !important;
  text-transform: uppercase !important;
  border-bottom: 1.5px solid #e2e8f0 !important;
  vertical-align: middle !important;
}

body.theme-dark table.course-table thead th,
[data-theme="dark"] table.course-table thead th {
  color: #94a3b8 !important;
  border-bottom-color: #243048 !important;
}

/* Desktop Rows & Cells */
table.course-table tbody tr {
  border-bottom: 1px solid #f1f5f9 !important;
  background: #ffffff !important;
}

body.theme-dark table.course-table tbody tr,
[data-theme="dark"] table.course-table tbody tr {
  background: #111726 !important;
  border-bottom-color: #1b2438 !important;
}

table.course-table tbody tr:hover {
  background: #f8fafc !important;
}

body.theme-dark table.course-table tbody tr:hover,
[data-theme="dark"] table.course-table tbody tr:hover {
  background: #161e31 !important;
}

table.course-table tbody td {
  padding: 8px 8px !important;
  font-size: 12px !important;
  color: #1e293b !important;
  vertical-align: middle !important;
  border-bottom: 1px solid #f1f5f9 !important;
}

body.theme-dark table.course-table tbody td,
[data-theme="dark"] table.course-table tbody td {
  color: #f1f5f9 !important;
  border-bottom-color: #1b2438 !important;
}

/* N° Column Badge */
.course-table .col-num .course-num {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  width: 25px !important;
  height: 25px !important;
  border-radius: 7px !important;
  background: #f1f5f9 !important;
  border: 1px solid #e2e8f0 !important;
  color: #475569 !important;
  font-size: 11px !important;
  font-weight: 750 !important;
}

body.theme-dark .course-table .col-num .course-num {
  background: #1a2336 !important;
  border-color: #2c3a54 !important;
  color: #94a3b8 !important;
}

/* Title Input */
.course-table .course-title-text,
.course-table .col-title input.inline-edit {
  font-size: 12.5px !important;
  font-weight: 650 !important;
  color: #0f172a !important;
  border-radius: 6px !important;
}

body.theme-dark .course-table .course-title-text,
body.theme-dark .course-table .col-title input.inline-edit {
  color: #f8fafc !important;
}

/* Title cell wrap & Notes button */
.course-title-cell-wrap {
  display: flex;
  align-items: center;
  gap: 6px;
  width: 100%;
}

.course-title-cell-wrap .course-title-text {
  flex: 1;
  min-width: 0;
}

.btn-course-notes {
  flex-shrink: 0;
  width: 28px;
  height: 28px;
  border-radius: 7px;
  border: 1px solid rgba(148, 163, 184, 0.35);
  background: var(--bg-input, #ffffff);
  color: var(--text-muted, #94a3b8);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  padding: 0;
  font-size: 13px;
  transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
}

.btn-course-notes:hover {
  border-color: #0284c7;
  color: #0284c7;
  background: rgba(2, 132, 199, 0.08);
  transform: translateY(-1px);
  box-shadow: 0 2px 6px rgba(2, 132, 199, 0.18);
}

.btn-course-notes.has-notes {
  border-color: rgba(2, 132, 199, 0.45);
  background: rgba(2, 132, 199, 0.12);
  color: #0284c7;
  box-shadow: 0 1px 3px rgba(2, 132, 199, 0.15);
}

.btn-course-notes.has-notes:hover {
  background: rgba(2, 132, 199, 0.22);
  border-color: #0284c7;
  box-shadow: 0 3px 8px rgba(2, 132, 199, 0.28);
}

body.theme-dark .btn-course-notes {
  background: #111827;
  border-color: #2a3750;
  color: #94a3b8;
}

body.theme-dark .btn-course-notes:hover {
  background: rgba(56, 189, 248, 0.15);
  border-color: #38bdf8;
  color: #38bdf8;
}

body.theme-dark .btn-course-notes.has-notes {
  background: rgba(56, 189, 248, 0.2);
  border-color: rgba(56, 189, 248, 0.45);
  color: #38bdf8;
}

/* Course Notes Modal Card & Textarea */
.course-notes-modal-card {
  border-radius: 18px;
  overflow: hidden;
  box-shadow: 0 20px 50px rgba(15, 23, 42, 0.25);
}

.course-notes-textarea {
  min-height: 140px;
  font-family: inherit;
  font-size: 13px;
  line-height: 1.6;
  resize: vertical;
  border-radius: 10px;
}

/* Teacher dropdown & Form controls */
.course-table select.form-control,
.course-table input.form-control {
  height: 32px !important;
  min-height: 32px !important;
  padding: 4px 10px !important;
  font-size: 11.5px !important;
  font-weight: 600 !important;
  border-radius: 8px !important;
  border: 1.5px solid #cbd5e1 !important;
  background-color: #ffffff !important;
  color: #0f172a !important;
  box-shadow: none !important;
}

body.theme-dark .course-table select.form-control,
body.theme-dark .course-table input.form-control {
  background-color: #0d1322 !important;
  border-color: #2a3750 !important;
  color: #f8fafc !important;
}

.course-table select.form-control:focus,
.course-table input.form-control:focus {
  border-color: #3b82f6 !important;
  box-shadow: 0 0 0 2px rgba(59, 130, 246, 0.18) !important;
  outline: none !important;
}

/* Modern Time Badge (Vue 1) */
.col-temp-pill {
  display: inline-flex !important;
  align-items: center !important;
  gap: 5px !important;
  padding: 4px 10px !important;
  border-radius: 8px !important;
  background: #eff6ff !important;
  border: 1px solid #bfdbfe !important;
  color: #1d4ed8 !important;
  font-size: 11.5px !important;
  font-weight: 750 !important;
  white-space: nowrap !important;
}

body.theme-dark .col-temp-pill {
  background: rgba(37, 99, 235, 0.15) !important;
  border-color: rgba(37, 99, 235, 0.3) !important;
  color: #93c5fd !important;
}

/* Modern Date Input with Picker Button */
.ctrl-date-wrap {
  display: inline-flex !important;
  align-items: center !important;
  gap: 4px !important;
  background: #f8fafc !important;
  border: 1.5px solid #cbd5e1 !important;
  border-radius: 8px !important;
  padding: 2px 6px !important;
}

body.theme-dark .ctrl-date-wrap {
  background: #0d1322 !important;
  border-color: #2a3750 !important;
}

.ctrl-date-wrap input[type="date"] {
  border: none !important;
  background: transparent !important;
  font-size: 11px !important;
  font-weight: 600 !important;
  color: inherit !important;
  padding: 0 !important;
}

.btn-table-date-picker {
  border: none !important;
  background: transparent !important;
  color: #3b82f6 !important;
  cursor: pointer !important;
  padding: 2px 4px !important;
  font-size: 12px !important;
}

/* 3. Checkboxes C1, C2, C3, C4 Across All Tables & Mobile */
.custom-checkbox {
  width: 22px !important;
  height: 22px !important;
  border-radius: 7px !important;
  border-width: 2px !important;
  border-style: solid !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  cursor: pointer !important;
  user-select: none !important;
  box-sizing: border-box !important;
}

/* C1: Modern Indigo */
.custom-checkbox.c1 {
  border-color: #6366f1 !important;
  background: rgba(99, 102, 241, 0.08) !important;
}
.custom-checkbox.checked.c1 {
  background: #6366f1 !important;
  border-color: #4f46e5 !important;
}

/* C2: Modern Emerald */
.custom-checkbox.c2 {
  border-color: #10b981 !important;
  background: rgba(16, 185, 129, 0.08) !important;
}
.custom-checkbox.checked.c2 {
  background: #10b981 !important;
  border-color: #059669 !important;
}

/* C3: Modern Rose Coral */
.custom-checkbox.c3 {
  border-color: #f43f5e !important;
  background: rgba(244, 63, 94, 0.08) !important;
}
.custom-checkbox.checked.c3 {
  background: #f43f5e !important;
  border-color: #e11d48 !important;
}

/* C4: Modern Warm Amber */
.custom-checkbox.c4 {
  border-color: #f59e0b !important;
  background: rgba(245, 158, 11, 0.08) !important;
}
.custom-checkbox.checked.c4 {
  background: #f59e0b !important;
  border-color: #d97706 !important;
}

.custom-checkbox.checked i {
  color: #ffffff !important;
  font-size: 11px !important;
  font-weight: 900 !important;
}

/* 4. Vue-specific Elements: Badges, Stars & Progress */
.badge-moy-diff {
  background: #fffbeb !important;
  color: #b45309 !important;
  border: 1px solid #fde68a !important;
  border-radius: 7px !important;
  font-weight: 800 !important;
  font-size: 11px !important;
  padding: 3px 8px !important;
}

body.theme-dark .badge-moy-diff {
  background: rgba(245, 158, 11, 0.15) !important;
  border-color: rgba(245, 158, 11, 0.3) !important;
  color: #fcd34d !important;
}

.star.active, .diff-star.active {
  color: #f59e0b !important;
}

.course-table .mini-progress-bar {
  height: 8px !important;
  border-radius: 99px !important;
  background: #e2e8f0 !important;
  border: none !important;
  overflow: hidden !important;
}

body.theme-dark .course-table .mini-progress-bar {
  background: #1e293b !important;
}

.course-table .mini-progress-bar-fill {
  border-radius: 99px !important;
}

/* 5. Mobile & Responsive Course Rows (Separated by modern divider, NO enclosed card frame) */
@media (max-width: 820px) {
  .mobile-course-list {
    display: flex !important;
    flex-direction: column !important;
    gap: 0 !important;
    padding: 0 !important;
  }

  /* User requirement: No enclosed box border around course; separate by a modern line */
  .mobile-course-card,
  .mobile-course-row {
    background: transparent !important;
    border: none !important;
    border-radius: 0 !important;
    box-shadow: none !important;
    padding: 16px 14px !important;
    margin-bottom: 0 !important;
    border-bottom: 1.5px solid #e2e8f0 !important;
    display: flex !important;
    flex-direction: column !important;
    gap: 10px !important;
  }

  .mobile-course-card:last-child,
  .mobile-course-row:last-child {
    border-bottom: none !important;
  }

  body.theme-dark .mobile-course-card,
  body.theme-dark .mobile-course-row,
  [data-theme="dark"] .mobile-course-card,
  [data-theme="dark"] .mobile-course-row {
    background: transparent !important;
    border: none !important;
    border-bottom: 1.5px solid #222d42 !important;
    box-shadow: none !important;
  }

  /* Top Row of Course: Num Badge + Course Title Input */
  .mobile-row-header {
    display: flex !important;
    align-items: center !important;
    gap: 10px !important;
    margin-bottom: 2px !important;
    padding-bottom: 0 !important;
    border-bottom: none !important;
  }

  .mobile-row-num {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    width: 27px !important;
    height: 27px !important;
    border-radius: 8px !important;
    background: #eff6ff !important;
    border: 1.5px solid #bfdbfe !important;
    color: #2563eb !important;
    font-size: 12px !important;
    font-weight: 850 !important;
    flex-shrink: 0 !important;
  }

  body.theme-dark .mobile-row-num {
    background: rgba(37, 99, 235, 0.15) !important;
    border-color: rgba(37, 99, 235, 0.35) !important;
    color: #93c5fd !important;
  }

  .mobile-row-title-input {
    font-size: 15px !important;
    font-weight: 750 !important;
    color: #0f172a !important;
    border: none !important;
    background: transparent !important;
    outline: none !important;
    padding: 0 !important;
    width: 100% !important;
  }

  body.theme-dark .mobile-row-title-input {
    color: #f8fafc !important;
  }

  /* Green Box 3 Fix: Vue 6 Progression Boxes Modern Design */
  .mobile-prog-grid {
    display: grid !important;
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: 10px !important;
    width: 100% !important;
    margin-top: 4px !important;
  }

  .mobile-prog-box {
    background: #f8fafc !important;
    border: 1.5px solid #e2e8f0 !important;
    border-radius: 12px !important;
    padding: 10px 12px !important;
    display: flex !important;
    flex-direction: column !important;
    gap: 8px !important;
    box-sizing: border-box !important;
  }

  body.theme-dark .mobile-prog-box,
  [data-theme="dark"] .mobile-prog-box {
    background: #0f1524 !important;
    border-color: #212c40 !important;
  }

  .mobile-prog-box .prog-box-header {
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
  }

  /* Layer 1 Prog Box */
  .mobile-prog-box:nth-child(1) .prog-box-header span {
    font-size: 11px !important;
    font-weight: 800 !important;
    color: #6366f1 !important;
    background: rgba(99, 102, 241, 0.1) !important;
    padding: 3px 8px !important;
    border-radius: 6px !important;
    border: 1px solid rgba(99, 102, 241, 0.25) !important;
  }
  .mobile-prog-box:nth-child(1) .prog-box-header strong {
    font-size: 14px !important;
    font-weight: 850 !important;
    color: #6366f1 !important;
  }

  /* Layer 2 Prog Box */
  .mobile-prog-box:nth-child(2) .prog-box-header span {
    font-size: 11px !important;
    font-weight: 800 !important;
    color: #10b981 !important;
    background: rgba(16, 185, 129, 0.1) !important;
    padding: 3px 8px !important;
    border-radius: 6px !important;
    border: 1px solid rgba(16, 185, 129, 0.25) !important;
  }
  .mobile-prog-box:nth-child(2) .prog-box-header strong {
    font-size: 14px !important;
    font-weight: 850 !important;
    color: #10b981 !important;
  }

  /* Layer 3 Prog Box */
  .mobile-prog-box:nth-child(3) .prog-box-header span {
    font-size: 11px !important;
    font-weight: 800 !important;
    color: #f43f5e !important;
    background: rgba(244, 63, 94, 0.1) !important;
    padding: 3px 8px !important;
    border-radius: 6px !important;
    border: 1px solid rgba(244, 63, 94, 0.25) !important;
  }
  .mobile-prog-box:nth-child(3) .prog-box-header strong {
    font-size: 14px !important;
    font-weight: 850 !important;
    color: #f43f5e !important;
  }

  /* Layer 4 Prog Box */
  .mobile-prog-box:nth-child(4) .prog-box-header span {
    font-size: 11px !important;
    font-weight: 800 !important;
    color: #f59e0b !important;
    background: rgba(245, 158, 11, 0.1) !important;
    padding: 3px 8px !important;
    border-radius: 6px !important;
    border: 1px solid rgba(245, 158, 11, 0.25) !important;
  }
  .mobile-prog-box:nth-child(4) .prog-box-header strong {
    font-size: 14px !important;
    font-weight: 850 !important;
    color: #f59e0b !important;
  }

  .mobile-prog-box .progress-bar-wrap {
    height: 7px !important;
    border-radius: 99px !important;
    background: #e2e8f0 !important;
    overflow: hidden !important;
    margin: 0 !important;
  }
  body.theme-dark .mobile-prog-box .progress-bar-wrap {
    background: #1c263b !important;
  }

  /* Vue 6: Total Progress Row */
  .mobile-progress-full-row {
    display: flex !important;
    align-items: center !important;
    gap: 12px !important;
    padding: 10px 14px !important;
    background: #f8fafc !important;
    border: 1.5px solid #e2e8f0 !important;
    border-radius: 12px !important;
    margin-top: 6px !important;
  }

  body.theme-dark .mobile-progress-full-row,
  [data-theme="dark"] .mobile-progress-full-row {
    background: #0f1524 !important;
    border-color: #212c40 !important;
  }

  .mobile-progress-full-row span {
    font-size: 11px !important;
    font-weight: 800 !important;
    color: #475569 !important;
    text-transform: uppercase !important;
    letter-spacing: 0.5px !important;
  }

  .mobile-progress-full-row .progress-bar-wrap {
    flex: 1 !important;
    height: 8px !important;
    border-radius: 99px !important;
    background: #e2e8f0 !important;
    overflow: hidden !important;
  }
  body.theme-dark .mobile-progress-full-row .progress-bar-wrap {
    background: #1c263b !important;
  }

  .mobile-progress-full-row .progress-bar {
    height: 100% !important;
    border-radius: 99px !important;
    background: linear-gradient(90deg, #2563eb, #06b6d4) !important;
  }

  .mobile-progress-full-row strong {
    font-size: 13.5px !important;
    font-weight: 850 !important;
    color: #2563eb !important;
  }

  /* Field Chips in Vue 1, 5, 7 */
  .mobile-chips-grid {
    gap: 8px !important;
  }

  .mobile-field-chip {
    background: #f8fafc !important;
    border: 1.5px solid #e2e8f0 !important;
    border-radius: 10px !important;
    padding: 8px 10px !important;
  }

  body.theme-dark .mobile-field-chip,
  [data-theme="dark"] .mobile-field-chip {
    background: #0d1322 !important;
    border-color: #222d42 !important;
  }

  .chip-label {
    font-size: 10px !important;
    font-weight: 750 !important;
    color: #64748b !important;
    text-transform: uppercase !important;
    letter-spacing: 0.4px !important;
    margin-bottom: 2px !important;
  }

  .chip-value {
    font-size: 12px !important;
    font-weight: 600 !important;
    color: #0f172a !important;
  }

  body.theme-dark .chip-value {
    color: #f8fafc !important;
  }

  /* Couches 2x2 Grid in Vue 1 */
  .mobile-couches-grid {
    display: grid !important;
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: 8px !important;
    margin-top: 6px !important;
  }

  .mobile-couche-card {
    background: #f8fafc !important;
    border: 1.5px solid #e2e8f0 !important;
    border-radius: 10px !important;
    padding: 8px 10px !important;
  }

  body.theme-dark .mobile-couche-card,
  [data-theme="dark"] .mobile-couche-card {
    background: #0d1322 !important;
    border-color: #222d42 !important;
  }

  .mobile-couche-card:nth-child(1) { border-color: rgba(99, 102, 241, 0.35) !important; background: rgba(99, 102, 241, 0.04) !important; }
  .mobile-couche-card:nth-child(1).is-checked { background: rgba(99, 102, 241, 0.1) !important; border-color: #6366f1 !important; }

  .mobile-couche-card:nth-child(2) { border-color: rgba(16, 185, 129, 0.35) !important; background: rgba(16, 185, 129, 0.04) !important; }
  .mobile-couche-card:nth-child(2).is-checked { background: rgba(16, 185, 129, 0.1) !important; border-color: #10b981 !important; }

  .mobile-couche-card:nth-child(3) { border-color: rgba(244, 63, 94, 0.35) !important; background: rgba(244, 63, 94, 0.04) !important; }
  .mobile-couche-card:nth-child(3).is-checked { background: rgba(244, 63, 94, 0.1) !important; border-color: #f43f5e !important; }

  .mobile-couche-card:nth-child(4) { border-color: rgba(245, 158, 11, 0.35) !important; background: rgba(245, 158, 11, 0.04) !important; }
  .mobile-couche-card:nth-child(4).is-checked { background: rgba(245, 158, 11, 0.1) !important; border-color: #f59e0b !important; }

  /* Universal Couche Checkbox Strip (Vues 2-7) */
  .mobile-checkbox-strip {
    display: grid !important;
    grid-template-columns: repeat(4, 1fr) !important;
    gap: 8px !important;
    margin-top: 8px !important;
  }

  .mobile-strip-check {
    padding: 8px 6px !important;
    border-radius: 10px !important;
    border: 1.5px solid #cbd5e1 !important;
    background: #f8fafc !important;
    font-size: 12px !important;
    font-weight: 750 !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 6px !important;
  }

  body.theme-dark .mobile-strip-check {
    background: #0d1322 !important;
    border-color: #222d42 !important;
  }

  .mobile-strip-check:nth-child(1) { border-color: #818cf8 !important; color: #4f46e5 !important; background: rgba(99, 102, 241, 0.05) !important; }
  .mobile-strip-check:nth-child(1).checked { background: #6366f1 !important; border-color: #4f46e5 !important; color: #ffffff !important; box-shadow: 0 2px 6px rgba(99, 102, 241, 0.25) !important; }

  .mobile-strip-check:nth-child(2) { border-color: #34d399 !important; color: #059669 !important; background: rgba(16, 185, 129, 0.05) !important; }
  .mobile-strip-check:nth-child(2).checked { background: #10b981 !important; border-color: #059669 !important; color: #ffffff !important; box-shadow: 0 2px 6px rgba(16, 185, 129, 0.25) !important; }

  .mobile-strip-check:nth-child(3) { border-color: #fb7185 !important; color: #e11d48 !important; background: rgba(244, 63, 94, 0.05) !important; }
  .mobile-strip-check:nth-child(3).checked { background: #f43f5e !important; border-color: #e11d48 !important; color: #ffffff !important; box-shadow: 0 2px 6px rgba(244, 63, 94, 0.25) !important; }

  .mobile-strip-check:nth-child(4) { border-color: #fbbf24 !important; color: #d97706 !important; background: rgba(245, 158, 11, 0.05) !important; }
  .mobile-strip-check:nth-child(4).checked { background: #f59e0b !important; border-color: #d97706 !important; color: #ffffff !important; box-shadow: 0 2px 6px rgba(245, 158, 11, 0.25) !important; }

  /* Mobile Actions Row */
  .mobile-row-actions {
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    margin-top: 10px !important;
    padding-top: 10px !important;
    border-top: 1px dashed #e2e8f0 !important;
  }

  body.theme-dark .mobile-row-actions {
    border-top-color: #212c40 !important;
  }

  .mobile-row-actions .btn-action-icon {
    width: 32px !important;
    height: 32px !important;
    border-radius: 9px !important;
    border: 1px solid #cbd5e1 !important;
    background: #f8fafc !important;
    color: #475569 !important;
    font-size: 12px !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
  }

  body.theme-dark .mobile-row-actions .btn-action-icon {
    background: #0d1322 !important;
    border-color: #222d42 !important;
    color: #cbd5e1 !important;
  }

  .mobile-row-actions .btn-action-icon.btn-action-delete,
  .mobile-row-actions .btn-action-icon.btn-delete-course {
    background: rgba(239, 68, 68, 0.08) !important;
    border-color: rgba(239, 68, 68, 0.3) !important;
    color: #ef4444 !important;
  }
}

/* Green Box 1 Fix: Meta pills & Subject Title in Topbar */
#coursesPageMeta .module-hero-pill {
  font-size: 11.5px !important;
  font-weight: 750 !important;
  padding: 5px 12px !important;
  border-radius: 10px !important;
  white-space: nowrap !important;
  display: inline-flex !important;
  align-items: center !important;
  gap: 6px !important;
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.03) !important;
}

#metaPillGroups {
  background: #f1f5f9 !important;
  border: 1.5px solid #cbd5e1 !important;
  color: #334155 !important;
}
body.theme-dark #metaPillGroups {
  background: rgba(148, 163, 184, 0.12) !important;
  border-color: rgba(148, 163, 184, 0.25) !important;
  color: #cbd5e1 !important;
}

#metaPillCourses {
  background: #eff6ff !important;
  border: 1.5px solid #bfdbfe !important;
  color: #1d4ed8 !important;
}
body.theme-dark #metaPillCourses {
  background: rgba(37, 99, 235, 0.15) !important;
  border-color: rgba(37, 99, 235, 0.35) !important;
  color: #93c5fd !important;
}

#metaPillCompleted {
  background: #ecfdf5 !important;
  border: 1.5px solid #a7f3d0 !important;
  color: #047857 !important;
}
body.theme-dark #metaPillCompleted {
  background: rgba(16, 185, 129, 0.15) !important;
  border-color: rgba(16, 185, 129, 0.35) !important;
  color: #6ee7b7 !important;
}

/* Prevent subject title from being truncated */
.module-hero-title {
  font-size: 20px !important;
  font-weight: 800 !important;
  color: #0f172a !important;
  white-space: nowrap !important;
  text-overflow: clip !important;
  overflow: visible !important;
  flex-shrink: 0 !important;
}
body.theme-dark .module-hero-title {
  color: #f8fafc !important;
}

/* ========================================================
   ULTRA-MODERN PURPLE COMMAND BAR & DESIGN SYSTEM UPGRADES
   ======================================================== */

/* 1. Deep Modern Purple Gradient Container (Desktop, Tablet, Mobile) */
.course-command-bar,
body .course-command-bar,
body.theme-dark .course-command-bar,
[data-theme="dark"] .course-command-bar {
  background: linear-gradient(135deg, #1e0836 0%, #2e1065 25%, #3b1877 60%, #4c1d95 100%) !important;
  border: 1px solid rgba(168, 85, 247, 0.35) !important;
  border-radius: 20px !important;
  padding: 16px 20px !important;
  box-shadow: none !important;
  margin-bottom: 16px !important;
  width: 100% !important;
  box-sizing: border-box !important;
  display: flex !important;
  flex-direction: column !important;
  gap: 12px !important;
}

/* STRICT USER REQUIREMENT: Absolutely NO movement on touch or hover */
.course-command-bar,
.course-command-bar *,
.course-command-bar *:hover,
.course-command-bar *:active,
.course-command-bar *:focus {
  transform: none !important;
  translate: none !important;
}

/* Hero Left: Title & Subtitle (No pills/boxes) */
.course-command-bar .module-hero-left {
  display: flex !important;
  align-items: center !important;
  gap: 12px !important;
  min-width: 0 !important;
  flex-shrink: 0 !important;
}

.course-command-bar .back-btn {
  width: 38px !important;
  height: 38px !important;
  border-radius: 50% !important;
  background: rgba(255, 255, 255, 0.12) !important;
  color: #ffffff !important;
  border: 1px solid rgba(255, 255, 255, 0.22) !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  cursor: pointer !important;
  flex-shrink: 0 !important;
  transition: background-color 0.18s ease, border-color 0.18s ease !important;
}
.course-command-bar .back-btn:hover {
  background: rgba(255, 255, 255, 0.22) !important;
  border-color: rgba(255, 255, 255, 0.4) !important;
  color: #ffffff !important;
}

.course-command-bar .module-hero-avatar,
.course-command-bar #topbarSubjectImg {
  width: 44px !important;
  height: 44px !important;
  border-radius: 12px !important;
  background: rgba(255, 255, 255, 0.15) !important;
  color: #f3e8ff !important;
  border: 1px solid rgba(255, 255, 255, 0.25) !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  font-size: 20px !important;
  flex-shrink: 0 !important;
  overflow: hidden !important;
}

.course-command-bar .module-hero-text {
  display: flex !important;
  flex-direction: column !important;
  justify-content: center !important;
  min-width: 0 !important;
}

.course-command-bar .module-hero-title,
#coursesPageTitle {
  font-size: 22px !important;
  font-weight: 800 !important;
  color: #ffffff !important;
  margin: 0 !important;
  line-height: 1.2 !important;
  white-space: nowrap !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
  letter-spacing: -0.3px !important;
}

.course-command-bar .module-hero-subtitle,
#coursesPageSubtitle {
  font-size: 13px !important;
  font-weight: 550 !important;
  color: rgba(233, 213, 255, 0.85) !important;
  margin-top: 3px !important;
  line-height: 1.2 !important;
  white-space: nowrap !important;
}

/* Delete meta pills container if any remains */
#coursesPageMeta,
.module-hero-pills-row {
  display: none !important;
}

/* 2. Frosted Stats Cards */
.course-command-bar .course-stat-card {
  background: rgba(255, 255, 255, 0.08) !important;
  border: 1px solid rgba(255, 255, 255, 0.15) !important;
  border-radius: 12px !important;
  padding: 8px 12px !important;
  text-align: center !important;
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
  justify-content: center !important;
  min-width: 82px !important;
  box-shadow: 0 4px 14px rgba(0, 0, 0, 0.12) !important;
  box-sizing: border-box !important;
  transition: background-color 0.18s ease, border-color 0.18s ease !important;
}

.course-command-bar .course-stat-card:hover {
  background: rgba(255, 255, 255, 0.14) !important;
  border-color: rgba(255, 255, 255, 0.3) !important;
}

.course-command-bar .course-stat-label {
  font-size: 10.5px !important;
  color: rgba(233, 213, 255, 0.75) !important;
  font-weight: 600 !important;
  white-space: nowrap !important;
  line-height: 1.2 !important;
  margin-bottom: 2px !important;
}

.course-command-bar .course-stat-value {
  font-size: 17px !important;
  font-weight: 800 !important;
  color: #ffffff !important;
  line-height: 1.1 !important;
  white-space: nowrap !important;
}

.course-command-bar .course-stat-card.stat-primary .course-stat-value {
  color: #d8b4fe !important;
}

/* 3. Modern Filter Buttons inside Purple Container */
.course-command-bar .topbar-filter-scroll .filter-btn,
.course-command-bar .filter-btn,
.course-command-bar .btn-manage-profs,
.course-command-bar .btn-reset-filters,
.course-command-bar .btn-topbar-filter {
  background: rgba(255, 255, 255, 0.1) !important;
  border: 1px solid rgba(255, 255, 255, 0.2) !important;
  color: #ffffff !important;
  border-radius: 10px !important;
  font-weight: 650 !important;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1) !important;
  transition: background-color 0.18s ease, border-color 0.18s ease, color 0.18s ease !important;
}

.course-command-bar .filter-btn:hover,
.course-command-bar .btn-manage-profs:hover,
.course-command-bar .btn-reset-filters:hover {
  background: rgba(255, 255, 255, 0.2) !important;
  border-color: rgba(255, 255, 255, 0.4) !important;
  color: #ffffff !important;
}

.course-command-bar .filter-btn.active,
.course-command-bar .btn-topbar-filter.active {
  background: rgba(168, 85, 247, 0.4) !important;
  border-color: #c084fc !important;
  color: #ffffff !important;
}

/* 4. Modern Vue Tabs inside Purple Container */
.course-command-bar .vue-tabs {
  background: rgba(255, 255, 255, 0.08) !important;
  border: 1px solid rgba(255, 255, 255, 0.16) !important;
  border-radius: 9999px !important;
  padding: 4px 6px !important;
  box-shadow: inset 0 1px 3px rgba(0, 0, 0, 0.15) !important;
}

.course-command-bar .vue-tabs .vue-tab {
  background: transparent !important;
  border: 1px solid transparent !important;
  color: rgba(243, 232, 255, 0.82) !important;
  border-radius: 9999px !important;
  font-weight: 650 !important;
  transition: background-color 0.18s ease, color 0.18s ease !important;
}

.course-command-bar .vue-tabs .vue-tab:hover {
  background: rgba(255, 255, 255, 0.15) !important;
  color: #ffffff !important;
}

.course-command-bar .vue-tabs .vue-tab.active {
  background: #ffffff !important;
  color: #3b0764 !important;
  font-weight: 800 !important;
  box-shadow: 0 4px 14px rgba(0, 0, 0, 0.25) !important;
  border-color: #ffffff !important;
}
.course-command-bar .vue-tabs .vue-tab.active i {
  color: #6b21a8 !important;
}

/* PDF Export Pill Button */
.course-command-bar .btn-module-pdf-pill {
  background: #ffffff !important;
  color: #3b0764 !important;
  font-weight: 800 !important;
  border: none !important;
  border-radius: 999px !important;
  padding: 7px 18px !important;
  box-shadow: 0 4px 14px rgba(0, 0, 0, 0.2) !important;
  transition: background-color 0.18s ease, color 0.18s ease !important;
}
.course-command-bar .btn-module-pdf-pill:hover {
  background: #f5f3ff !important;
  color: #2e1065 !important;
}

/* 5. Tablet Vue Tabs: Icons ONLY */
@media (min-width: 641px) and (max-width: 1080px) {
  .vue-tabs .vue-txt {
    display: none !important;
  }
  .vue-tabs .vue-tab {
    padding: 7px 11px !important;
    font-size: 14px !important;
  }
}

/* 6. Group Header Distinct Colorful Gradients (Requirement 7 - left border removed) */
.table-wrap.course-group-wrap .group-header.group-grad-0 {
  background: linear-gradient(90deg, #ede9fe 0%, #f5f3ff 100%) !important;
  border-left: none !important;
}
.table-wrap.course-group-wrap .group-header.group-grad-1 {
  background: linear-gradient(90deg, #d1fae5 0%, #ecfdf5 100%) !important;
  border-left: none !important;
}
.table-wrap.course-group-wrap .group-header.group-grad-2 {
  background: linear-gradient(90deg, #fef3c7 0%, #fffbeb 100%) !important;
  border-left: none !important;
}
.table-wrap.course-group-wrap .group-header.group-grad-3 {
  background: linear-gradient(90deg, #ffe4e6 0%, #fff1f2 100%) !important;
  border-left: none !important;
}
.table-wrap.course-group-wrap .group-header.group-grad-4 {
  background: linear-gradient(90deg, #e0f2fe 0%, #f0f9ff 100%) !important;
  border-left: none !important;
}
.table-wrap.course-group-wrap .group-header.group-grad-5 {
  background: linear-gradient(90deg, #fae8ff 0%, #fdf4ff 100%) !important;
  border-left: none !important;
}

body.theme-dark .table-wrap.course-group-wrap .group-header.group-grad-0,
[data-theme="dark"] .table-wrap.course-group-wrap .group-header.group-grad-0 {
  background: linear-gradient(90deg, #1e1b4b 0%, #2e1065 100%) !important;
  border-left: none !important;
}
body.theme-dark .table-wrap.course-group-wrap .group-header.group-grad-1,
[data-theme="dark"] .table-wrap.course-group-wrap .group-header.group-grad-1 {
  background: linear-gradient(90deg, #064e3b 0%, #065f46 100%) !important;
  border-left: none !important;
}
body.theme-dark .table-wrap.course-group-wrap .group-header.group-grad-2,
[data-theme="dark"] .table-wrap.course-group-wrap .group-header.group-grad-2 {
  background: linear-gradient(90deg, #451a03 0%, #78350f 100%) !important;
  border-left: none !important;
}
body.theme-dark .table-wrap.course-group-wrap .group-header.group-grad-3,
[data-theme="dark"] .table-wrap.course-group-wrap .group-header.group-grad-3 {
  background: linear-gradient(90deg, #4c0519 0%, #881337 100%) !important;
  border-left: none !important;
}
body.theme-dark .table-wrap.course-group-wrap .group-header.group-grad-4,
[data-theme="dark"] .table-wrap.course-group-wrap .group-header.group-grad-4 {
  background: linear-gradient(90deg, #082f49 0%, #075985 100%) !important;
  border-left: none !important;
}
body.theme-dark .table-wrap.course-group-wrap .group-header.group-grad-5,
[data-theme="dark"] .table-wrap.course-group-wrap .group-header.group-grad-5 {
  background: linear-gradient(90deg, #3b0764 0%, #581c87 100%) !important;
  border-left: none !important;
}

/* =========================================================================
   USER REFINEMENTS (Desktop Command Bar, Single Row Filters, Centered Tabs,
   Overflow Elimination, Vue 3 Compact Dropdown Stars & No Void,
   Vue 4 Status-Colored Dates, Redesigned Download Studio)
   ========================================================================= */

/* 1. Eliminate Horizontal Scroll and Extra Space on PC */
html, body, #app, .app-layout, .main-content {
  overflow-x: hidden !important;
  max-width: 100vw !important;
}

#page-courses {
  overflow-x: hidden !important;
  width: 100% !important;
  box-sizing: border-box !important;
}

/* 2. Command Bar Row 1: Stats pushed flush to the far right on PC */
.course-header-row-1 {
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  width: 100% !important;
  box-sizing: border-box !important;
}

.course-header-row-1 .course-page-stats,
#coursePageStats {
  display: flex !important;
  align-items: center !important;
  justify-content: flex-end !important;
  gap: 8px !important;
  margin-left: auto !important;
  flex: 0 0 auto !important;
  max-width: none !important;
  flex-wrap: nowrap !important;
}

/* 3. Command Bar Row 2: Vue Tabs directly under statistics on all devices */
.course-header-row-tabs {
  display: flex !important;
  justify-content: center !important;
  align-items: center !important;
  width: 100% !important;
  margin: 4px auto 0 !important;
  box-sizing: border-box !important;
}

.course-header-row-tabs .vue-tabs {
  margin: 0 auto !important;
  display: inline-flex !important;
  justify-content: center !important;
  align-items: center !important;
}

/* 4. Command Bar Row 3: Toggle Button for Filters (Afficher plus) */
.course-header-toggle-row {
  display: flex !important;
  justify-content: center !important;
  align-items: center !important;
  width: 100% !important;
  margin: 4px auto 0 !important;
}

.btn-toggle-filters-bar {
  background: rgba(255, 255, 255, 0.1) !important;
  border: 1px solid rgba(255, 255, 255, 0.22) !important;
  color: #ffffff !important;
  border-radius: 999px !important;
  padding: 4px 14px !important;
  font-size: 11.5px !important;
  font-weight: 700 !important;
  display: inline-flex !important;
  align-items: center !important;
  gap: 6px !important;
  cursor: pointer !important;
  transition: all 0.2s ease !important;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15) !important;
}

.btn-toggle-filters-bar:hover {
  background: rgba(255, 255, 255, 0.2) !important;
  border-color: rgba(255, 255, 255, 0.4) !important;
}

.btn-toggle-filters-bar .toggle-icon {
  font-size: 9px !important;
  transition: transform 0.25s ease !important;
}

/* 5. Collapsible Filters Container (Hidden by default, expands on click) */
.course-header-collapsible-filters.collapsed {
  display: none !important;
}

.course-header-collapsible-filters.expanded {
  display: block !important;
  width: 100% !important;
  margin-top: 8px !important;
  animation: fadeInFilters 0.25s ease !important;
}

@keyframes fadeInFilters {
  from { opacity: 0; transform: translateY(-6px); }
  to { opacity: 1; transform: translateY(0); }
}

/* Filters styling on Desktop: Single line, container minus 0.5cm, balanced flex */
@media (min-width: 1024px) {
  .course-header-collapsible-filters .topbar-filter-row {
    width: calc(100% + 22px) !important;
    margin-left: -11px !important;
    margin-right: -11px !important;
    display: flex !important;
    flex-wrap: nowrap !important;
    align-items: center !important;
    justify-content: space-between !important;
    gap: 8px !important;
    box-sizing: border-box !important;
  }
  .course-header-collapsible-filters .topbar-filter-scroll {
    display: flex !important;
    flex-wrap: nowrap !important;
    flex: 6 1 0 !important;
    gap: 8px !important;
    overflow: visible !important;
    width: auto !important;
  }
  .course-header-collapsible-filters .filter-dropdown {
    flex: 0 1 auto !important;
    min-width: 0 !important;
  }
  .course-header-collapsible-filters .filter-btn {
    width: auto !important;
    max-width: 100% !important;
    padding: 8px 6px !important;
    font-size: 12.5px !important;
    justify-content: center !important;
    white-space: nowrap !important;
  }
  .course-header-collapsible-filters .filter-btn span {
    overflow: hidden !important;
    text-overflow: ellipsis !important;
    white-space: nowrap !important;
    min-width: 0 !important;
  }
  .course-header-collapsible-filters .topbar-filter-actions {
    display: flex !important;
    flex-wrap: nowrap !important;
    gap: 8px !important;
    flex: 2 1 0 !important;
  }
  .course-header-collapsible-filters .topbar-filter-actions .filter-btn {
    flex: 1 1 0 !important;
    padding: 8px 6px !important;
    width: 100% !important;
    white-space: nowrap !important;
  }
}

/* Filters styling on Mobile: 2-column grid, text DOES NOT overflow */
/* Filters styling on Mobile: 3-column + 2-column grid, text DOES NOT overflow */
@media (max-width: 640px) {
  /* 1. Mobile Stats: Shrunk significantly, total width = container width - 4mm, single row */
  .course-header-row-1 .course-page-stats,
  #coursePageStats,
  .course-page-stats {
    display: grid !important;
    grid-template-columns: repeat(6, minmax(0, 1fr)) !important;
    gap: 2px !important;
    width: calc(100% + 20px - 4mm) !important;
    max-width: calc(100% + 20px - 4mm) !important;
    margin: 4px calc(-10px + 2mm) 0 !important;
    padding: 0 !important;
    box-sizing: border-box !important;
    flex-wrap: nowrap !important;
    justify-content: space-between !important;
  }

  .course-header-row-1 .course-page-stats .course-stat-card,
  #coursePageStats .course-stat-card,
  .course-stat-card {
    width: 100% !important;
    min-width: 0 !important;
    flex: 1 1 0 !important;
    padding: 3px 0.5px !important;
    min-height: 35px !important;
    border-radius: 7px !important;
    box-sizing: border-box !important;
    text-align: center !important;
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    justify-content: center !important;
    background: rgba(255, 255, 255, 0.08) !important;
    border: 1px solid rgba(255, 255, 255, 0.16) !important;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1) !important;
  }

  .course-stat-label {
    font-size: 5.6px !important;
    line-height: 1.05 !important;
    letter-spacing: -0.2px !important;
    font-weight: 750 !important;
    text-transform: none !important;
    color: rgba(255, 255, 255, 0.88) !important;
    white-space: nowrap !important;
    overflow: hidden !important;
    text-overflow: clip !important;
    width: 100% !important;
    text-align: center !important;
    margin-bottom: 1px !important;
    padding: 0 0.5px !important;
  }

  .course-stat-value {
    font-size: 11px !important;
    font-weight: 850 !important;
    line-height: 1.1 !important;
    color: #ffffff !important;
    white-space: nowrap !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
  }

  /* 2. Mobile Filters: 3 columns + 2 columns, text strictly contained */
  .course-header-collapsible-filters .topbar-filter-row {
    display: flex !important;
    flex-direction: column !important;
    gap: 6px !important;
    width: 100% !important;
    margin: 0 !important;
  }

  .course-header-collapsible-filters .topbar-filter-scroll {
    display: grid !important;
    grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
    gap: 5px !important;
    width: 100% !important;
    overflow: visible !important;
  }

  .course-header-collapsible-filters .topbar-filter-actions {
    display: grid !important;
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: 5px !important;
    width: 100% !important;
    margin-top: 2px !important;
  }

  .course-header-collapsible-filters .filter-dropdown,
  .course-header-collapsible-filters .topbar-filter-actions {
    min-width: 0 !important;
    position: relative !important;
  }

  .course-header-collapsible-filters .filter-btn {
    width: 100% !important;
    min-width: 0 !important;
    padding: 6px 4px !important;
    font-size: 10.5px !important;
    white-space: nowrap !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
    box-sizing: border-box !important;
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    gap: 3px !important;
    border-radius: 999px !important;
  }

  .course-header-collapsible-filters .filter-btn span {
    overflow: hidden !important;
    text-overflow: ellipsis !important;
    white-space: nowrap !important;
    min-width: 0 !important;
    flex: 1 !important;
    text-align: center !important;
    font-size: 10px !important;
  }

  .course-header-collapsible-filters .filter-btn i {
    flex-shrink: 0 !important;
    font-size: 9px !important;
  }

  /* 3. Mobile evaluation boxes allow dropdown menus to pop out directly underneath */
  .mobile-eval-box {
    overflow: visible !important;
    position: relative !important;
  }
  .eval-stars-line {
    overflow: visible !important;
    justify-content: center !important;
  }
  .mobile-eval-grid {
    overflow: visible !important;
  }
  .mobile-vue-section {
    overflow: visible !important;
  }
  .mobile-course-card {
    overflow: visible !important;
  }
}

/* 6. Vue 3: Table Layout, No Green Void, Modern Dropdown Stars & Évaluation Totale */
.course-table th.col-eval,
.course-table td.col-eval {
  text-align: center !important;
  vertical-align: middle !important;
  padding: 6px 4px !important;
}

.custom-eval-dropdown {
  position: relative !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
}

.eval-select-pill {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 5px !important;
  background: #ffffff !important;
  border: 1px solid #cbd5e1 !important;
  border-radius: 8px !important;
  padding: 3px 6px 3px 8px !important;
  height: 28px !important;
  width: 72px !important;
  box-sizing: border-box !important;
  cursor: pointer !important;
  transition: border-color 0.2s ease, box-shadow 0.2s ease !important;
  font-family: inherit !important;
}

.eval-select-pill:hover {
  border-color: #94a3b8 !important;
}

body.theme-dark .eval-select-pill,
[data-theme="dark"] .eval-select-pill {
  background: #1e293b !important;
  border-color: #475569 !important;
}

.eval-select-pill .eval-star-badge {
  font-size: 11px !important;
  color: #cbd5e1 !important;
  flex-shrink: 0 !important;
  transition: color 0.15s ease !important;
}

.eval-select-pill .eval-star-badge.active,
.custom-eval-dropdown.has-eval .eval-star-badge {
  color: #f59e0b !important;
}

.eval-display-val {
  font-size: 12px !important;
  font-weight: 750 !important;
  color: #1e293b !important;
  text-align: center !important;
  flex: 1 !important;
}

body.theme-dark .eval-display-val,
[data-theme="dark"] .eval-display-val {
  color: #f1f5f9 !important;
}

.eval-chevron {
  font-size: 8px !important;
  color: #94a3b8 !important;
  flex-shrink: 0 !important;
  transition: transform 0.2s ease !important;
}

.custom-eval-dropdown.open .eval-chevron {
  transform: rotate(180deg) !important;
}

/* Modern Dropdown menu directly underneath */
.custom-eval-menu {
  position: absolute !important;
  top: calc(100% + 4px) !important;
  left: 50% !important;
  transform: translateX(-50%) !important;
  width: 80px !important;
  background: #ffffff !important;
  border: 1px solid #cbd5e1 !important;
  border-radius: 10px !important;
  box-shadow: 0 10px 25px -4px rgba(0, 0, 0, 0.2), 0 2px 6px rgba(0, 0, 0, 0.08) !important;
  z-index: 9999 !important;
  display: none !important;
  padding: 4px !important;
  max-height: 200px !important;
  overflow-y: auto !important;
  box-sizing: border-box !important;
}

.custom-eval-dropdown.open .custom-eval-menu {
  display: flex !important;
  flex-direction: column !important;
  gap: 2px !important;
  animation: dropdownFade 0.15s ease !important;
}

@keyframes dropdownFade {
  from { opacity: 0; transform: translate(-50%, -4px); }
  to { opacity: 1; transform: translate(-50%, 0); }
}

/* Floating overlay variant: escapes table/overflow clipping so all options stay visible */
.custom-eval-menu.floating {
  display: flex !important;
  flex-direction: column !important;
  gap: 2px !important;
  position: fixed !important;
  top: var(--my, 0px) !important;
  left: var(--mx, 0px) !important;
  transform: none !important;
  animation: evalMenuFadeIn 0.14s ease !important;
  max-height: calc(100vh - 16px) !important;
  z-index: 100000 !important;
}

@keyframes evalMenuFadeIn {
  from { opacity: 0; }
  to { opacity: 1; }
}

body.theme-dark .custom-eval-menu,
[data-theme="dark"] .custom-eval-menu {
  background: #1e293b !important;
  border-color: #475569 !important;
  box-shadow: 0 10px 25px -4px rgba(0, 0, 0, 0.5) !important;
}

.eval-menu-item {
  padding: 5px 6px !important;
  font-size: 12px !important;
  font-weight: 700 !important;
  border-radius: 6px !important;
  cursor: pointer !important;
  text-align: center !important;
  color: #1e293b !important;
  transition: all 0.15s ease !important;
}

body.theme-dark .eval-menu-item,
[data-theme="dark"] .eval-menu-item {
  color: #e2e8f0 !important;
}

.eval-menu-item:hover {
  background: rgba(124, 58, 237, 0.1) !important;
  color: #7c3aed !important;
}

.eval-menu-item.selected {
  background: #7c3aed !important;
  color: #ffffff !important;
}

/* Table Évaluation Totale Column */
.course-table th.col-eval-total,
.course-table td.col-eval-total {
  text-align: center !important;
  vertical-align: middle !important;
  padding: 6px 8px !important;
}

.eval-total-pill {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 5px !important;
  background: rgba(124, 58, 237, 0.08) !important;
  border: 1.5px solid rgba(124, 58, 237, 0.28) !important;
  border-radius: 8px !important;
  padding: 3px 8px !important;
  height: 28px !important;
  box-sizing: border-box !important;
  white-space: nowrap !important;
}

.eval-total-pill .eval-total-star {
  font-size: 11px !important;
  color: #cbd5e1 !important;
}

.eval-total-pill.has-eval .eval-total-star {
  color: #f59e0b !important;
}

.eval-total-pill .eval-total-val {
  font-size: 12px !important;
  font-weight: 800 !important;
  color: #7c3aed !important;
}

body.theme-dark .eval-total-pill,
[data-theme="dark"] .eval-total-pill {
  background: rgba(124, 58, 237, 0.15) !important;
  border-color: rgba(167, 139, 250, 0.35) !important;
}

body.theme-dark .eval-total-pill .eval-total-val,
[data-theme="dark"] .eval-total-pill .eval-total-val {
  color: #c4b5fd !important;
}

/* Mobile Évaluation Totale Banner */
.mobile-eval-total-banner {
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  background: rgba(124, 58, 237, 0.07) !important;
  border: 1px solid rgba(124, 58, 237, 0.2) !important;
  border-radius: 10px !important;
  padding: 8px 12px !important;
  margin-bottom: 10px !important;
  box-sizing: border-box !important;
}

body.theme-dark .mobile-eval-total-banner,
[data-theme="dark"] .mobile-eval-total-banner {
  background: rgba(124, 58, 237, 0.14) !important;
  border-color: rgba(167, 139, 250, 0.3) !important;
}

.mobile-eval-total-banner .eval-total-label {
  font-size: 12px !important;
  font-weight: 750 !important;
  color: var(--text, #1e293b) !important;
  display: flex !important;
  align-items: center !important;
  gap: 6px !important;
}

body.theme-dark .mobile-eval-total-banner .eval-total-label,
[data-theme="dark"] .mobile-eval-total-banner .eval-total-label {
  color: #f1f5f9 !important;
}

.mobile-eval-total-banner .eval-total-badge {
  font-size: 12px !important;
  font-weight: 800 !important;
  color: #7c3aed !important;
  display: flex !important;
  align-items: center !important;
  gap: 4px !important;
}

.mobile-eval-total-banner .eval-total-badge i {
  color: #cbd5e1 !important;
}

.mobile-eval-total-banner .eval-total-badge.active i {
  color: #f59e0b !important;
}

body.theme-dark .mobile-eval-total-banner .eval-total-badge,
[data-theme="dark"] .mobile-eval-total-banner .eval-total-badge {
  color: #c4b5fd !important;
}

/* 7. Vue 4: Date Colors by Status & Date Picker Trigger Button */
.btn-date-picker-trigger {
  background: transparent !important;
  border: none !important;
  color: #7c3aed !important;
  font-size: 13px !important;
  cursor: pointer !important;
  padding: 2px 4px !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  border-radius: 4px !important;
  transition: background-color 0.15s ease, color 0.15s ease !important;
  flex-shrink: 0 !important;
}

.btn-date-picker-trigger:hover {
  background: rgba(124, 58, 237, 0.12) !important;
}

body.theme-dark .btn-date-picker-trigger,
[data-theme="dark"] .btn-date-picker-trigger {
  color: #c4b5fd !important;
}

/* 6. Unified Date Inputs Design (Image 3) & Dynamic 5-Color Logic Across All Devices */
.pns-date-control,
.date-control {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  gap: 3px !important;
  box-sizing: border-box !important;
  border-radius: 9px !important;
  padding: 3px 6px 3px 8px !important;
  height: 29px !important;
  min-height: 29px !important;
  width: 100% !important;
  min-width: 96px !important;
  max-width: 128px !important;
  transition: all 0.2s ease !important;
  position: relative !important;
  background: #f8fafc !important;
  border: 1.5px solid #cbd5e1 !important;
  color: #334155 !important;
}

.pns-date-control input[type="date"],
.date-control input[type="date"] {
  font-size: 11px !important;
  font-weight: 700 !important;
  letter-spacing: -0.2px !important;
  border: none !important;
  background: transparent !important;
  color: inherit !important;
  box-shadow: none !important;
  outline: none !important;
  padding: 0 !important;
  margin: 0 !important;
  width: calc(100% - 18px) !important;
  min-width: 0 !important;
  font-family: inherit !important;
  cursor: pointer !important;
}

/* Hide native browser date picker indicator so only our clean button trigger handles it */
.pns-date-control input[type="date"]::-webkit-calendar-picker-indicator,
.date-control input[type="date"]::-webkit-calendar-picker-indicator {
  display: none !important;
  opacity: 0 !important;
  -webkit-appearance: none !important;
  width: 0 !important;
  height: 0 !important;
  margin: 0 !important;
  padding: 0 !important;
  pointer-events: none !important;
}

.pns-date-control input[type="date"]::-webkit-inner-spin-button,
.pns-date-control input[type="date"]::-webkit-clear-button {
  display: none !important;
  -webkit-appearance: none !important;
}

.pns-date-control .btn-date-picker-trigger,
.date-control .btn-date-picker-trigger {
  flex: 0 0 auto !important;
  background: transparent !important;
  border: none !important;
  color: inherit !important;
  padding: 0 !important;
  margin: 0 !important;
  width: 18px !important;
  height: 18px !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  cursor: pointer !important;
  font-size: 11.5px !important;
  opacity: 0.82 !important;
  transition: opacity 0.15s ease, transform 0.15s ease !important;
}

.pns-date-control .btn-date-picker-trigger:hover,
.date-control .btn-date-picker-trigger:hover {
  opacity: 1 !important;
  transform: scale(1.12) !important;
}

/* 1. Date de Cours: ALWAYS modern purple */
.date-control-cours,
.pns-date-control.status-purple,
.date-control.status-purple {
  background: #f5f3ff !important;
  color: #6d28d9 !important;
  border: 1.5px solid #8b5cf6 !important;
}
body.theme-dark .date-control-cours,
body.theme-dark .pns-date-control.status-purple,
body.theme-dark .date-control.status-purple,
[data-theme="dark"] .date-control-cours,
[data-theme="dark"] .pns-date-control.status-purple,
[data-theme="dark"] .date-control.status-purple {
  background: rgba(139, 92, 246, 0.2) !important;
  color: #ddd6fe !important;
  border-color: rgba(167, 139, 250, 0.55) !important;
}

/* 2. Date Couche: Validé / Checked -> GREEN */
.pns-date-control.status-green,
.date-control.status-green {
  background: #ecfdf5 !important;
  color: #047857 !important;
  border: 1.5px solid #10b981 !important;
}
body.theme-dark .pns-date-control.status-green,
body.theme-dark .date-control.status-green,
[data-theme="dark"] .pns-date-control.status-green,
[data-theme="dark"] .date-control.status-green {
  background: rgba(16, 185, 129, 0.2) !important;
  color: #6ee7b7 !important;
  border-color: rgba(52, 211, 153, 0.55) !important;
}

/* 3. Date Couche: Future date & Unchecked -> YELLOW */
.pns-date-control.status-yellow,
.date-control.status-yellow {
  background: #fefce8 !important;
  color: #854d0e !important;
  border: 1.5px solid #eab308 !important;
}
body.theme-dark .pns-date-control.status-yellow,
body.theme-dark .date-control.status-yellow,
[data-theme="dark"] .pns-date-control.status-yellow,
[data-theme="dark"] .date-control.status-yellow {
  background: rgba(234, 179, 8, 0.2) !important;
  color: #fde047 !important;
  border-color: rgba(250, 204, 21, 0.55) !important;
}

/* 4. Date Couche: Today & Unchecked -> MODERATE RED (أحمر معتدل) */
.pns-date-control.status-red-moderate,
.date-control.status-red-moderate {
  background: #fff1f2 !important;
  color: #e11d48 !important;
  border: 1.5px solid #fb7185 !important;
}
body.theme-dark .pns-date-control.status-red-moderate,
body.theme-dark .date-control.status-red-moderate,
[data-theme="dark"] .pns-date-control.status-red-moderate,
[data-theme="dark"] .date-control.status-red-moderate {
  background: rgba(244, 63, 94, 0.22) !important;
  color: #fda4af !important;
  border-color: rgba(251, 113, 133, 0.6) !important;
}

/* 5. Date Couche: Past date (Overdue) & Unchecked -> VERY DARK RED (أحمر داكن جدا) */
.pns-date-control.status-red-dark,
.date-control.status-red-dark,
.pns-date-control.status-red,
.date-control.status-red {
  background: #450a0a !important;
  color: #fecaca !important;
  border: 1.5px solid #7f1d1d !important;
}
body.theme-dark .pns-date-control.status-red-dark,
body.theme-dark .date-control.status-red-dark,
body.theme-dark .pns-date-control.status-red,
body.theme-dark .date-control.status-red,
[data-theme="dark"] .pns-date-control.status-red-dark,
[data-theme="dark"] .date-control.status-red-dark,
[data-theme="dark"] .pns-date-control.status-red,
[data-theme="dark"] .date-control.status-red {
  background: #450a0a !important;
  color: #fee2e2 !important;
  border-color: #991b1b !important;
}

/* 6. Date Couche: Empty / No date -> Neutral pill */
.pns-date-control.status-empty,
.date-control.status-empty,
.pns-date-control.empty-date {
  background: #f8fafc !important;
  color: #94a3b8 !important;
  border: 1.5px solid #cbd5e1 !important;
}
body.theme-dark .pns-date-control.status-empty,
body.theme-dark .date-control.status-empty,
body.theme-dark .pns-date-control.empty-date,
[data-theme="dark"] .pns-date-control.status-empty,
[data-theme="dark"] .date-control.status-empty,
[data-theme="dark"] .pns-date-control.empty-date {
  background: rgba(255, 255, 255, 0.05) !important;
  color: #64748b !important;
  border-color: rgba(255, 255, 255, 0.14) !important;
}

/* Ensure Group Header never has a left blue/indigo accent stripe */
.group-header,
.group-header::before,
.group-header::after,
.table-wrap.course-group-wrap .group-header,
.table-wrap.course-group-wrap .group-header::before,
.table-wrap.course-group-wrap .group-header::after {
  border-left: none !important;
}

/* 7. Redesigned Export Studio (Image 4): Balanced 2-Column Grid & Sleek Selects */
.suivi-download-studio {
  width: 100% !important;
  max-width: 980px !important;
  margin: 0 auto !important;
  padding: 12px 0 !important;
  box-sizing: border-box !important;
}

.studio-header {
  margin-bottom: 16px !important;
}

.studio-title-wrap {
  display: flex !important;
  align-items: center !important;
  gap: 12px !important;
}

.studio-icon-badge {
  width: 44px !important;
  height: 44px !important;
  border-radius: 12px !important;
  background: linear-gradient(135deg, #4f46e5 0%, #7c3aed 100%) !important;
  color: #ffffff !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  font-size: 20px !important;
  box-shadow: 0 4px 14px rgba(124, 58, 237, 0.3) !important;
  flex-shrink: 0 !important;
}

.studio-title {
  font-size: 19px !important;
  font-weight: 800 !important;
  color: var(--text, #0f172a) !important;
  margin: 0 !important;
  line-height: 1.2 !important;
}

body.theme-dark .studio-title,
[data-theme="dark"] .studio-title {
  color: #f8fafc !important;
}

.studio-dashboard-grid {
  display: grid !important;
  grid-template-columns: 1fr 1fr !important;
  gap: 16px !important;
  align-items: stretch !important;
}

@media (max-width: 768px) {
  .studio-dashboard-grid {
    grid-template-columns: 1fr !important;
  }
}

.studio-dashboard-col-left,
.studio-dashboard-col-right {
  display: flex !important;
  flex-direction: column !important;
  gap: 14px !important;
}

.studio-section-card {
  background: var(--bg2, #ffffff) !important;
  border: 1px solid var(--border, #e2e8f0) !important;
  border-radius: 16px !important;
  padding: 16px 18px !important;
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.03) !important;
  box-sizing: border-box !important;
}

body.theme-dark .studio-section-card,
[data-theme="dark"] .studio-section-card {
  background: #181d2f !important;
  border-color: #28304a !important;
}

.studio-section-title {
  font-size: 13.5px !important;
  font-weight: 750 !important;
  color: var(--text, #0f172a) !important;
  margin-bottom: 12px !important;
  display: flex !important;
  align-items: center !important;
  gap: 8px !important;
  text-transform: uppercase !important;
  letter-spacing: 0.5px !important;
}

body.theme-dark .studio-section-title,
[data-theme="dark"] .studio-section-title {
  color: #f8fafc !important;
}

  display: grid !important;
  grid-template-columns: 1fr 1fr !important;
  gap: 12px !important;

  background: var(--bg-input, #f8fafc) !important;
  border: 1.5px solid var(--border, #e2e8f0) !important;
  border-radius: 12px !important;
  padding: 10px 14px !important;
  font-size: 13.5px !important;
  font-weight: 700 !important;
  color: var(--text, #1e293b) !important;
  cursor: pointer !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 8px !important;
  transition: all 0.2s ease !important;

  border-color: #6d28d9 !important;
  background: rgba(109, 40, 217, 0.08) !important;
  color: #6d28d9 !important;

  background: #111726 !important;
  border-color: #28304a !important;
  color: #cbd5e1 !important;

  border-color: #a78bfa !important;
  background: rgba(167, 139, 250, 0.15) !important;
  color: #c4b5fd !important;

/* Custom Sleek Dropdown Selects */
.studio-select-wrap {
  position: relative !important;
  width: 100% !important;
}

.studio-select-wrap .studio-select {
  width: 100% !important;
  appearance: none !important;
  -webkit-appearance: none !important;
  background: var(--bg-input, #f8fafc) !important;
  border: 1.5px solid var(--border, #cbd5e1) !important;
  border-radius: 12px !important;
  padding: 10px 36px 10px 14px !important;
  font-size: 13.5px !important;
  font-weight: 600 !important;
  color: var(--text, #1e293b) !important;
  cursor: pointer !important;
  transition: all 0.2s ease !important;
  outline: none !important;
  box-sizing: border-box !important;
}

body.theme-dark .studio-select-wrap .studio-select,
[data-theme="dark"] .studio-select-wrap .studio-select {
  background: #111726 !important;
  border-color: #334155 !important;
  color: #f1f5f9 !important;
}

.studio-select-wrap .studio-select:focus {
  border-color: #7c3aed !important;
  box-shadow: 0 0 0 3px rgba(124, 58, 237, 0.15) !important;
}

.studio-select-wrap .select-arrow-icon {
  position: absolute !important;
  right: 14px !important;
  top: 50% !important;
  transform: translateY(-50%) !important;
  font-size: 11px !important;
  color: #64748b !important;
  pointer-events: none !important;
}

/* Compact Clean Style Choices */
.style-choice-card {
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  padding: 10px 14px !important;
  border-radius: 12px !important;
  background: var(--bg-input, #f8fafc) !important;
  border: 1.5px solid var(--border, #e2e8f0) !important;
  cursor: pointer !important;
  transition: all 0.2s ease !important;
}

body.theme-dark .style-choice-card,
[data-theme="dark"] .style-choice-card {
  background: #111726 !important;
  border-color: #28304a !important;
}

.style-choice-card:hover {
  border-color: #cbd5e1 !important;
  background: #f1f5f9 !important;
}

body.theme-dark .style-choice-card:hover,
[data-theme="dark"] .style-choice-card:hover {
  border-color: #3b4252 !important;
  background: #1a2234 !important;
}

.style-choice-card.active {
  border-color: #6d28d9 !important;
  background: rgba(109, 40, 217, 0.08) !important;
}

body.theme-dark .style-choice-card.active,
[data-theme="dark"] .style-choice-card.active {
  border-color: #a78bfa !important;
  background: rgba(167, 139, 250, 0.15) !important;
}

.style-choice-left {
  display: flex !important;
  align-items: center !important;
  gap: 12px !important;
}

.style-preview-swatch {
  width: 22px !important;
  height: 22px !important;
  border-radius: 6px !important;
  border: 1px solid rgba(0, 0, 0, 0.15) !important;
  flex-shrink: 0 !important;
}

.style-choice-name {
  font-size: 13.5px !important;
  font-weight: 700 !important;
  color: var(--text, #1e293b) !important;
}

body.theme-dark .style-choice-name,
[data-theme="dark"] .style-choice-name {
  color: #e2e8f0 !important;
}

.style-choice-card.active .style-choice-name {
  color: #4c1d95 !important;
}

body.theme-dark .style-choice-card.active .style-choice-name,
[data-theme="dark"] .style-choice-card.active .style-choice-name {
  color: #c4b5fd !important;
}

.style-check-icon i {
  font-size: 15px !important;
}

.style-choice-card.active .style-check-icon i {
  color: #6d28d9 !important;
}

body.theme-dark .style-choice-card.active .style-check-icon i,
[data-theme="dark"] .style-choice-card.active .style-check-icon i {
  color: #a78bfa !important;
}

/* Full Width Download Button */
.btn-execute-download {
  width: 100% !important;
  padding: 14px 20px !important;
  font-size: 15px !important;
  font-weight: 800 !important;
  border-radius: 14px !important;
  background: linear-gradient(135deg, #2e1065 0%, #4c1d95 50%, #6d28d9 100%) !important;
  color: #ffffff !important;
  border: none !important;
  box-shadow: 0 8px 24px -4px rgba(76, 29, 149, 0.45) !important;
  cursor: pointer !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 10px !important;
  margin-top: 14px !important;
  transition: all 0.2s ease !important;
}

.btn-execute-download:hover {
  background: linear-gradient(135deg, #3b0764 0%, #581c87 50%, #7c3aed 100%) !important;
  box-shadow: 0 10px 28px -4px rgba(76, 29, 149, 0.55) !important;
}






/* ==========================================================================
   SOURCE PREVIEW (fullscreen iframe modal, closed from the bottom bar)
   ========================================================================== */
.source-preview-modal {
  display: none;
  position: fixed;
  inset: 0;
  background: #000;
  z-index: 5000;
}

.source-preview-modal.active {
  display: block;
}

.source-preview-iframe {
  width: 100%;
  height: 100%;
  border: none;
  display: block;
  background: #0b1120;
}

/* Subtle external-link fallback (NOT a red close mark) */
.source-preview-external {
  position: absolute;
  top: 12px;
  right: 12px;
  width: 36px;
  height: 36px;
  border-radius: 50%;
  border: 1px solid rgba(255, 255, 255, 0.35);
  background: rgba(15, 23, 42, 0.72);
  color: #fff;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 14px;
  transition: transform 0.2s ease, background 0.2s ease;
}

.source-preview-external:hover {
  transform: scale(1.08);
  background: rgba(37, 99, 235, 0.85);
}

/* Bottom bar stays visible above the preview; close icon only in preview */
body.pns-preview-open .pns-mobile-bottom-bar {
  display: flex !important;
  z-index: 6000 !important;
}

.pns-mobile-bottom-bar .pns-mobile-btn-wrap.pns-preview-close-wrap {
  display: none !important;
}

body.pns-preview-open .pns-mobile-bottom-bar .pns-mobile-btn-wrap.pns-preview-close-wrap {
  display: flex !important;
}
/* ---- Sources: drive note, save buttons, PDF imports ---- */
.sources-drive-note {
  font-size: 10px !important;
  line-height: 1.4 !important;
  color: var(--text3, #64748b) !important;
  background: rgba(37, 99, 235, 0.06) !important;
  border: 1px dashed rgba(37, 99, 235, 0.3) !important;
  border-radius: 6px !important;
  padding: 4px 8px !important;
  margin-bottom: 6px !important;
}

.sources-drive-note i {
  color: #2563eb !important;
  margin-right: 3px !important;
}

.sources-add-row {
  display: flex !important;
  gap: 6px !important;
  flex-wrap: wrap !important;
  align-items: center !important;
}

.btn-source-save,
.btn-source-save-mobile {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  border-radius: 6px !important;
  border: 1px solid #86efac !important;
  background: #dcfce7 !important;
  color: #15803d !important;
  cursor: pointer !important;
  transition: all 0.2s ease !important;
}

.btn-source-save {
  width: 30px !important;
  height: 28px !important;
  font-size: 12px !important;
}

.btn-source-save-mobile {
  min-width: 44px !important;
  padding: 8px 10px !important;
  font-size: 14px !important;
}

.btn-source-save:hover,
.btn-source-save-mobile:hover {
  background: #16a34a !important;
  color: #ffffff !important;
}

.mobile-source-actions {
  display: flex !important;
  gap: 8px !important;
  align-items: stretch !important;
}

.mobile-source-actions .btn-source-open-mobile {
  flex: 1 !important;
}

.mobile-source-actions .btn-source-open-mobile.disabled {
  opacity: 0.45 !important;
}

/* ========================================================
   COMMAND BAR SHADOW REMOVAL & PAGE TACHES LAYOUT
   ======================================================== */
.course-command-bar,
body .course-command-bar,
body.theme-dark .course-command-bar,
[data-theme="dark"] .course-command-bar {
  box-shadow: none !important;
}

#page-taches .taches-topbar {
  display: flex !important;
  justify-content: flex-end !important;
  align-items: center !important;
  width: auto !important;
  max-width: 100% !important;
  margin-bottom: 0 !important;
}

#page-taches .taches-page-title {
  display: none !important;
}

#page-taches .tache-subject-tabs {
  margin: 0 0 16px 0 !important;
  display: flex !important;
  justify-content: flex-start !important;
  align-items: center !important;
  width: fit-content !important;
  max-width: 100% !important;
}

#page-taches .tache-view-tabs-wrap {
  display: flex !important;
  justify-content: flex-start !important;
  align-items: center !important;
  gap: 8px !important;
}

#page-taches .tache-view-tabs {
  margin: 0 !important;
  display: inline-flex !important;
  justify-content: center !important;
  align-items: center !important;
}

#page-taches .tache-couche-tabs {
  justify-content: flex-start !important;
}

/* ===== Barres « Couches » et « Vues » : même hauteur, même couleur ===== */
.tache-couche-tabs,
.tache-view-tabs {
  height: 46px !important;
  min-height: 46px !important;
  box-sizing: border-box !important;
  align-items: center !important;
  background: var(--bg3) !important;
  border: 1px solid var(--border-color) !important;
  border-radius: 14px !important;
  padding: 4px !important;
}

.tache-couche-tabs .tcouche-btn,
.tache-view-tabs .tview-btn {
  height: 100% !important;
  min-height: 0 !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
}

.tache-couche-tabs .tcouche-badge {
  margin: 0 auto !important;
}

/* ===================================================================== */
/* PHONE DROPDOWN SELECTORS (Tâches / Accueil)                          */
/* Minimal trigger: icon + label + chevron over a gradient underline.    */
/* No box, no background, no motion.                                     */
/* ===================================================================== */
.pns-mob-select {
  display: none;
  position: relative;
  min-width: 0;
  max-width: 100%;
}

.tache-mobile-selects {
  display: none;
}

.pns-mob-select-trigger {
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: 9px;
  max-width: 100%;
  margin: 0;
  padding: 4px 0 10px;
  border: 0 !important;
  border-radius: 0;
  background: transparent !important;
  background-color: transparent !important;
  box-shadow: none !important;
  color: var(--text-main, #0f172a);
  font-family: 'Manrope', 'Plus Jakarta Sans', sans-serif;
  font-size: 16px;
  font-weight: 800;
  line-height: 1.2;
  letter-spacing: -0.2px;
  cursor: pointer;
  outline: none;
  -webkit-tap-highlight-color: transparent;
  transition: none !important;
}

.pns-mob-select-trigger::after {
  content: '';
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: 3px;
  border-radius: 99px;
  background: linear-gradient(90deg, var(--primary, #2563eb) 0%, var(--secondary, #06b6d4) 100%);
}

.pns-mob-sel-icon {
  width: 22px;
  height: 22px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: 0 0 22px;
  color: var(--primary, #2563eb);
  font-size: 16px;
  line-height: 1;
}

.pns-mob-sel-icon img,
.pns-mob-opt-img {
  width: 22px;
  height: 22px;
  border-radius: 6px;
  object-fit: contain;
  display: block;
}

.pns-mob-sel-label {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.pns-mob-sel-caret {
  flex: 0 0 auto;
  font-size: 11px;
  color: var(--primary, #2563eb);
  transition: none !important;
}

.pns-mob-select.open .pns-mob-sel-caret {
  transform: rotate(180deg);
}

.pns-mob-select-menu {
  position: absolute;
  top: calc(100% + 6px);
  left: 0;
  right: auto;
  z-index: 80;
  width: max-content;
  min-width: 230px;
  max-width: min(86vw, 330px);
  max-height: 58vh;
  overflow-y: auto;
  overscroll-behavior: contain;
  -webkit-overflow-scrolling: touch;
  padding: 6px;
  border: 1px solid var(--border-color, rgba(148, 163, 184, 0.25));
  border-radius: 14px;
  background: #ffffff;
  box-shadow: 0 18px 40px rgba(15, 23, 42, 0.18);
  display: none;
  transition: none !important;
}

[data-theme="dark"] .pns-mob-select-menu,
body.theme-dark .pns-mob-select-menu {
  background: #151d30;
  border-color: rgba(255, 255, 255, 0.12);
  box-shadow: 0 18px 40px rgba(0, 0, 0, 0.5);
}

[data-theme="dark"] .pns-mob-sel-icon,
[data-theme="dark"] .pns-mob-sel-caret,
[data-theme="dark"] .pns-mob-opt-check,
body.theme-dark .pns-mob-sel-icon,
body.theme-dark .pns-mob-sel-caret,
body.theme-dark .pns-mob-opt-check {
  color: #60a5fa;
}

[data-theme="dark"] .pns-mob-select-option.active,
body.theme-dark .pns-mob-select-option.active {
  color: #60a5fa;
}

.pns-mob-select.open .pns-mob-select-menu {
  display: block;
}

.pns-mob-select-option {
  display: flex;
  align-items: center;
  gap: 10px;
  width: 100%;
  margin: 0;
  padding: 10px;
  border: 0;
  border-radius: 10px;
  background: transparent;
  color: var(--text-main, #0f172a);
  font-family: 'Manrope', 'Plus Jakarta Sans', sans-serif;
  font-size: 13.5px;
  font-weight: 700;
  text-align: left;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
  transition: none !important;
}

.pns-mob-select-option:active {
  background: rgba(148, 163, 184, 0.14);
}

.pns-mob-select-option.active {
  background: color-mix(in srgb, var(--primary, #2563eb) 11%, transparent);
  color: var(--primary, #2563eb);
}

.pns-mob-opt-label {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.pns-mob-opt-check {
  margin-left: auto;
  font-size: 11px;
  color: var(--primary, #2563eb);
}

.pns-mob-select-empty {
  padding: 2px 0 10px;
  font-size: 13px;
  font-weight: 600;
  color: var(--text-muted);
}

@media (max-width: 768px) {
  #page-home #yearSelect,
  #page-taches .taches-topbar,
  #page-taches #tacheSubjectTabs {
    display: none !important;
  }

  #homeYearMobile {
    display: block;
    margin: 0;
  }

  .tache-mobile-selects {
    display: flex;
    align-items: flex-start;
    gap: 12px;
    margin: 0 0 18px;
  }

  .tache-mobile-selects .pns-mob-select {
    display: block;
    flex: 1 1 0;
    min-width: 0;
    margin: 0;
  }

  .tache-mobile-selects .pns-mob-select-trigger {
    width: 100%;
    gap: 7px;
    font-size: 15px;
  }

  .tache-mobile-selects .pns-mob-sel-label {
    flex: 1 1 auto;
  }

  .tache-mobile-selects .pns-mob-sel-icon {
    flex-basis: 20px;
    width: 20px;
    height: 20px;
    font-size: 14px;
  }

  .tache-mobile-selects .pns-mob-select-menu {
    min-width: min(230px, calc(100vw - 28px));
    max-width: calc(100vw - 28px);
  }

  #tacheYearMobile .pns-mob-select-menu {
    left: 0;
    right: auto;
  }

  #tacheSubjectMobile .pns-mob-select-menu {
    left: auto;
    right: 0;
  }
}

/* ==========================================================================
   OFFICIAL SUIVI PNS PDF — ONE LAYOUT, ONE THEME, PORTRAIT A4
   ========================================================================== */
.pns-official-pdf-page {
  width: 794px;
  height: 1123px;
  box-sizing: border-box;
  padding: 26px 30px 18px;
  background: #ffffff;
  color: #0f172a;
  font-family: 'Plus Jakarta Sans', 'Segoe UI', sans-serif;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  position: relative;
}

.pns-official-pdf-page *,
.pns-official-pdf-page *::before,
.pns-official-pdf-page *::after {
  box-sizing: border-box;
}

.pns-pdf-head {
  height: 50px;
  flex: 0 0 50px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  border-bottom: 2px solid #06b6d4;
  margin-bottom: 12px;
}

.pns-pdf-title {
  font-size: 22px;
  font-weight: 800;
  letter-spacing: -0.5px;
  color: #0f172a;
  line-height: 1;
}

.pns-pdf-title span {
  color: #0891b2;
}

.pns-pdf-logo,
.pns-pdf-logo-fallback {
  width: 64px;
  height: 42px;
  flex: 0 0 64px;
  border-radius: 8px;
}

.pns-pdf-logo {
  display: block;
  object-fit: contain;
}

.pns-pdf-logo-fallback {
  display: flex;
  align-items: center;
  justify-content: center;
  background: #0e7490;
  color: #ffffff;
  font-size: 10px;
  font-weight: 800;
  letter-spacing: 0.5px;
}

.pns-pdf-year {
  height: 30px;
  flex: 0 0 30px;
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 8px;
  color: #334155;
  font-size: 12px;
  font-weight: 700;
}

.pns-pdf-year-icon {
  width: 22px;
  height: 22px;
  border-radius: 6px;
  background: #e0f2fe;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #0891b2;
}

.pns-pdf-year-icon svg {
  width: 14px;
  height: 14px;
  display: block;
}

.pns-pdf-subject {
  height: 40px;
  flex: 0 0 40px;
  display: flex;
  align-items: center;
  gap: 9px;
  margin-bottom: 10px;
  padding: 4px 8px;
  background: #f8fafc;
  border: 1px solid #e2e8f0;
  border-left: 3px solid #06b6d4;
  border-radius: 6px;
}

.pns-pdf-subject-img,
.pns-pdf-subject-fallback {
  width: 28px;
  height: 28px;
  flex: 0 0 28px;
  border-radius: 6px;
}

.pns-pdf-subject-img {
  display: block;
  object-fit: contain;
  background: #ffffff;
}

.pns-pdf-subject-fallback {
  display: flex;
  align-items: center;
  justify-content: center;
  background: #e0f2fe;
  color: #0369a1;
  font-size: 10px;
  font-weight: 800;
  letter-spacing: 0.4px;
}

.pns-pdf-subject-name {
  font-size: 13px;
  font-weight: 800;
  color: #0f172a;
  line-height: 1.2;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.pns-pdf-table-wrap {
  flex: 1 1 auto;
  min-height: 0;
}

.pns-pdf-table {
  width: 100%;
  border-collapse: collapse;
  table-layout: fixed;
  border: 1px solid #cbd5e1;
}

.pns-pdf-table th {
  height: 30px;
  padding: 0 5px;
  background: #0f172a;
  color: #ffffff;
  font-size: 8.5px;
  font-weight: 800;
  text-align: left;
  text-transform: uppercase;
  letter-spacing: 0.2px;
  border-right: 1px solid rgba(255, 255, 255, 0.12);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.pns-pdf-table th:last-child {
  border-right: none;
}

.pns-pdf-table th.pdf-center {
  text-align: center;
}

.pns-pdf-table td {
  height: 28px;
  padding: 0 5px;
  border-bottom: 1px solid #e2e8f0;
  border-right: 1px solid #e2e8f0;
  font-size: 9px;
  line-height: 1.2;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  vertical-align: middle;
  color: #1e293b;
}

.pns-pdf-table td:last-child {
  border-right: none;
}

.pns-pdf-table tbody tr:nth-child(even) td {
  background: #f8fafc;
}

.pns-pdf-table tbody tr:last-child td {
  border-bottom: none;
}

.pns-pdf-table td.pdf-center {
  text-align: center;
}

.pns-pdf-table td.pdf-num {
  text-align: center;
  font-weight: 700;
  color: #475569;
}

.pns-pdf-check {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 12px;
  height: 12px;
  border: 1.5px solid #94a3b8;
  border-radius: 3px;
  background: #ffffff;
  color: transparent;
  font-size: 8px;
  font-weight: 800;
  line-height: 1;
}

.pns-pdf-check.checked {
  background: #0891b2;
  border-color: #0891b2;
  color: #ffffff;
}

.pns-pdf-foot {
  height: 20px;
  flex: 0 0 20px;
  margin-top: 8px;
  padding-top: 6px;
  border-top: 1px solid #e2e8f0;
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 12px;
  font-size: 8.5px;
  color: #64748b;
}

.pns-pdf-foot-link {
  color: #0891b2;
  font-weight: 700;
}

/* PDF preview inside the download studio */
.studio-pdf-official-card {
  display: flex;
  flex-direction: column;
  gap: 14px;
  padding: 18px;
  border: 1px solid var(--border-color, #e2e8f0);
  border-radius: 16px;
  background: var(--bg-card-solid, #ffffff);
}

.studio-pdf-official-badge {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  width: fit-content;
  padding: 5px 10px;
  border-radius: 999px;
  background: #ecfeff;
  color: #0e7490;
  border: 1px solid #a5f3fc;
  font-size: 11px;
  font-weight: 800;
}

.studio-pdf-official-copy {
  margin: 0;
  color: var(--text-muted, #64748b);
  font-size: 12.5px;
  line-height: 1.55;
}

.studio-pdf-preview-window {
  position: relative;
  width: 100%;
  max-width: 520px;
  min-height: 320px;
  margin: 0 auto;
  overflow: hidden;
  border: 1px solid var(--border-color, #e2e8f0);
  border-radius: 12px;
  background: #ffffff;
}

.studio-pdf-preview-scaler {
  position: absolute;
  top: 0;
  left: 0;
  width: 794px;
  height: 1123px;
  transform-origin: top left;
}

.studio-pdf-preview-empty {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 220px;
  padding: 24px;
  text-align: center;
  color: var(--text-muted, #64748b);
  font-size: 12.5px;
  font-weight: 600;
}

.studio-pdf-official-actions {
  display: flex;
  justify-content: center;
}

.studio-pdf-official-actions .btn-execute-download {
  max-width: 360px;
}

/* ===== Simplified download view (PDF only, no containers) ===== */
  grid-template-columns: 1fr !important;
  max-width: 420px !important;
  margin: 0 auto !important;

.suivi-download-studio .studio-pdf-official-actions {
  margin-top: 14px !important;
}

/* Full-screen PDF generation progress (never printed or captured) */
.pns-pdf-progress-overlay {
  position: fixed;
  inset: 0;
  z-index: 2147483647;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 24px;
  background: #ffffff;
}

.pns-pdf-progress-card {
  width: min(430px, 100%);
  text-align: center;
  color: #0f172a;
  font-family: 'Plus Jakarta Sans', 'Segoe UI', sans-serif;
}

.pns-pdf-progress-icon {
  width: 58px;
  height: 58px;
  margin: 0 auto 16px;
  border-radius: 16px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: #ecfeff;
  color: #ef4444;
  font-size: 26px;
}

.pns-pdf-progress-title {
  margin: 0 0 5px;
  font-size: 17px;
  font-weight: 800;
}

.pns-pdf-progress-subtitle {
  margin: 0 0 18px;
  color: #64748b;
  font-size: 12px;
  font-weight: 600;
}

.pns-pdf-progress-track {
  height: 8px;
  border-radius: 999px;
  overflow: hidden;
  background: #e2e8f0;
}

.pns-pdf-progress-fill {
  width: 0;
  height: 100%;
  border-radius: inherit;
  background: #06b6d4;
  transition: width 0.12s linear;
}

.pns-pdf-progress-label {
  margin-top: 10px;
  color: #64748b;
  font-size: 11px;
  font-weight: 600;
}

/* ==========================================================================
   STRICT PERFORMANCE MODE (Suivi PNS menus)
   Every dropdown is opaque, border-only and appears instantly: no blur, no
   drop shadow, no open/close animation and no transition on the items.
   ========================================================================== */
.filter-dropdown-menu,
.ctrl-select-menu,
.custom-eval-menu,
.pns-mob-select-menu,
#page-repetition .rep-filter-menu {
  box-shadow: none !important;
  -webkit-backdrop-filter: none !important;
  backdrop-filter: none !important;
  transition: none !important;
}

.filter-dropdown-menu.open,
.ctrl-select-menu.open,
.custom-eval-menu,
.custom-eval-dropdown.open .custom-eval-menu,
.pns-mob-select-menu.open,
#page-repetition .rep-filter.open .rep-filter-menu {
  animation: none !important;
}

.filter-dropdown-menu *,
.ctrl-select-menu *,
.custom-eval-menu *,
.pns-mob-select-menu *,
#page-repetition .rep-filter-menu * {
  transition: none !important;
  animation: none !important;
}

.filter-dropdown-menu .filter-menu-item,
.ctrl-select-menu .ctrl-select-item,
.pns-mob-select-menu .pns-mob-select-item {
  transition: none !important;
}