feat: ⚡ mobile first + opti CI yml

.gitea/workflows/build-deploy.yml

@@ -22,7 +22,8 @@ jobs:
 
       - name: Deploy
         run: |
+          systemctl stop enuxia-quiz
           cp /var/cache/enuxia-quiz/target/release/enuxia-quiz /opt/enuxia-quiz/enuxia-quiz
           cp -r /var/cache/enuxia-quiz/target/site /opt/enuxia-quiz/site
-          systemctl restart enuxia-quiz
+          systemctl start enuxia-quiz
           systemctl status enuxia-quiz --no-pager

style/main.css

@@ -899,4 +899,170 @@ button {
   background: linear-gradient(135deg, var(--color-enuxia-blue), var(--color-enuxia-purple));
   -webkit-background-clip: text; -webkit-text-fill-color: transparent; background-clip: text;
 }
-.score-summary-bar .date-val { font-size: 13px; color: var(--color-enuxia-muted); }
+.score-summary-bar .date-val { font-size: 13px; color: var(--color-enuxia-muted); }
+
+
+/* ════════════════════════════════════════════════════════════════════════════
+   RESPONSIVE MOBILE
+   ════════════════════════════════════════════════════════════════════════════ */
+
+@media (max-width: 640px) {
+
+  /* ── Base ─────────────────────────────────────────────────────────────── */
+  body { font-size: 14px; }
+
+  /* ── Login ────────────────────────────────────────────────────────────── */
+  .login-card {
+    padding: 24px 20px;
+    border-radius: 18px;
+    gap: 20px;
+  }
+  .login-title { font-size: 19px; }
+
+  /* ── Home étudiant ────────────────────────────────────────────────────── */
+  .home-page {
+    padding: 32px 16px 40px;
+    gap: 24px;
+  }
+  .home-page h1 { font-size: 26px !important; }
+  .quiz-item { padding: 16px 18px; }
+  .quiz-item .quiz-title { font-size: 15px; }
+  .identity-form { padding: 18px 16px; }
+
+  /* ── Quiz ─────────────────────────────────────────────────────────────── */
+  .quiz-page {
+    padding: 24px 16px 40px;
+    gap: 20px;
+  }
+  .question-text { font-size: 18px; }
+  .answer-option { padding: 13px 16px; }
+  .answer-option .opt-label {
+    width: 28px;
+    height: 28px;
+    font-size: 11px;
+  }
+
+  /* ── Résultat ─────────────────────────────────────────────────────────── */
+  .result-page {
+    padding: 24px 16px 60px;
+    gap: 20px;
+  }
+  .result-hero {
+    padding: 36px 20px 32px;
+    gap: 12px;
+  }
+  .score-ring-wrap {
+    width: 160px;
+    height: 160px;
+  }
+  .score-ring-wrap svg {
+    width: 160px;
+    height: 160px;
+  }
+  .score-ring-num { font-size: 22px; }
+  .result-name { font-size: 17px; }
+  .correction-item { padding: 14px 14px 14px 16px; }
+  .corr-question { font-size: 13px; }
+
+  /* ── Admin ────────────────────────────────────────────────────────────── */
+  .admin-page {
+    padding: 24px 16px 48px;
+    gap: 20px;
+  }
+  .admin-topbar {
+    flex-direction: column;
+    align-items: flex-start;
+    gap: 12px;
+    padding-bottom: 16px;
+  }
+  .admin-topbar h1 { font-size: 22px; }
+  .topbar-actions {
+    width: 100%;
+    flex-wrap: wrap;
+    gap: 8px;
+  }
+  .topbar-actions a,
+  .topbar-actions button {
+    flex: 1;
+    justify-content: center;
+    text-align: center;
+    min-width: 0;
+  }
+
+  /* ── Table scrollable ─────────────────────────────────────────────────── */
+  .data-table {
+    display: block;
+    overflow-x: auto;
+    -webkit-overflow-scrolling: touch;
+    white-space: nowrap;
+  }
+
+    .data-table thead { display: none; }
+  
+  .data-table tbody tr {
+    display: flex;
+    flex-direction: column;
+    gap: 8px;
+    padding: 16px;
+    border-radius: 12px;
+    background: var(--color-enuxia-dark-3);
+    border: 1px solid var(--color-enuxia-border);
+    margin-bottom: 10px;
+  }
+  
+  .data-table td {
+    display: block;
+    padding: 0;
+    border: none;
+    white-space: normal;
+  }
+
+  .data-table td:first-child {
+    font-size: 15px;
+    font-weight: 700;
+    color: var(--color-enuxia-text);
+  }
+
+  .table-actions {
+    flex-wrap: wrap;
+    gap: 6px;
+    margin-top: 4px;
+  }
+
+  .table-actions a,
+  .table-actions button {
+    flex: 1;
+    justify-content: center;
+    text-align: center;
+  }
+
+
+  /* ── Quiz editor ──────────────────────────────────────────────────────── */
+  .quiz-meta-card { padding: 16px; }
+  .question-card { padding: 16px; }
+  .answer-editor-row { flex-wrap: wrap; }
+  .save-row { flex-direction: column; }
+  .save-row button { width: 100%; }
+
+  /* ── Stats grid ───────────────────────────────────────────────────────── */
+  div[style*="grid-template-columns:repeat(3"] {
+    display: flex !important;
+    flex-direction: column !important;
+    gap: 12px !important;
+  }
+
+  /* ── Score bar ────────────────────────────────────────────────────────── */
+  .score-summary-bar {
+    flex-direction: column;
+    align-items: flex-start;
+    gap: 8px;
+    padding: 16px;
+  }
+
+  /* ── Boutons navigation quiz ──────────────────────────────────────────── */
+  .btn-ghost,
+  .btn-primary {
+    padding: 10px 16px;
+    font-size: 13px;
+  }
+}