refactor(ui): unify frontend around compact, desktop-first design

Extract shared utilities (color functions, icon registry), replace hero
banners with compact PageHeader, add TrimesterSelector/ConfirmDialog/
Breadcrumb components, consolidate off-palette colors to design tokens,
convert AssessmentListView to table layout, compress ResultsView stats
into horizontal bar, and inline ClassFormView as a modal in ClassListView.

Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>

frontend/src/views/CouncilView.vue

@@ -1,29 +1,20 @@
 <template>
-  <div class="px-4 pt-2 pb-1 flex flex-col overflow-hidden" style="height: calc(100vh - 4rem)">
+  <div class="px-4 pt-2 pb-1 flex flex-col overflow-hidden h-full">
     <LoadingSpinner v-if="loading" text="Chargement..." fullPage />
 
     <template v-else-if="classData">
+      <!-- Breadcrumb -->
+      <Breadcrumb :crumbs="[
+        { label: 'Classes', to: '/classes' },
+        { label: classData.name, to: `/classes/${classData.id}` },
+        { label: 'Conseil' }
+      ]" />
       <!-- Compact toolbar: class info + trimester + stats on one line -->
       <div v-if="currentStats" class="flex items-center gap-3 py-2 border-b border-gray-200 flex-shrink-0 flex-wrap">
-        <router-link :to="`/classes/${classData.id}`" class="text-gray-400 hover:text-gray-600 flex-shrink-0">
-          <svg class="w-5 h-5" fill="none" viewBox="0 0 24 24" stroke="currentColor"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M15 19l-7-7 7-7" /></svg>
-        </router-link>
         <span class="font-semibold text-gray-900 truncate">{{ classData.name }}</span>
         <span class="text-xs text-gray-400 flex-shrink-0">{{ classData.year }}</span>
 
-        <div class="flex gap-1 flex-shrink-0">
-          <button
-            v-for="t in [1, 2, 3]"
-            :key="t"
-            @click="selectTrimester(t)"
-            class="px-2.5 py-1 rounded text-xs font-medium transition-colors"
-            :class="trimester === t
-              ? 'bg-purple-600 text-white'
-              : 'bg-gray-100 text-gray-600 hover:bg-gray-200'"
-          >
-            T{{ t }}
-          </button>
-        </div>
+        <TrimesterSelector v-model="trimester" @update:modelValue="selectTrimester" />
 
         <div class="border-l border-gray-200 h-5 flex-shrink-0"></div>
 
@@ -87,6 +78,8 @@ import { classesService } from '@/services/classes'
 import LoadingSpinner from '@/components/common/LoadingSpinner.vue'
 import CouncilStudentList from '@/components/council/CouncilStudentList.vue'
 import CouncilStudentDetail from '@/components/council/CouncilStudentDetail.vue'
+import TrimesterSelector from '@/components/common/TrimesterSelector.vue'
+import Breadcrumb from '@/components/common/Breadcrumb.vue'
 
 const route = useRoute()
 const classesStore = useClassesStore()