feat: add sticky app topbar with cp selector, identity inputs and action buttons

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

src/components/Bilan.css

@@ -34,48 +34,223 @@
   --transition: all 0.25s cubic-bezier(0.4, 0, 0.2, 1);
 }
 
-.bilan-wrapper {
+.app-shell {
-  font-family: var(--font-sans);
   min-height: 100vh;
-  padding: 3rem 1.5rem;
   background-color: #f8fafc;
   background-image:
     radial-gradient(circle at 10% 20%, rgba(98, 95, 255, 0.06) 0%, transparent 40%),
-    radial-gradient(circle at 90% 80%, rgba(139, 92, 246, 0.04) 0%, transparent 45%),
+    radial-gradient(circle at 90% 80%, rgba(139, 92, 246, 0.04) 0%, transparent 45%);
-    radial-gradient(circle at 50% 50%, rgba(16, 185, 129, 0.02) 0%, transparent 50%);
+  font-family: var(--font-sans);
-  display: flex;
-  justify-content: center;
-  align-items: flex-start;
-  position: relative;
-  overflow-x: hidden;
   color: var(--text-primary);
   -webkit-font-smoothing: antialiased;
 }
 
-.logo-bg {
+.app-topbar {
-  position: absolute;
+  position: sticky;
-  width: 50%;
+  top: 0;
-  max-width: 600px;
+  z-index: 100;
-  opacity: 0.01;
+  height: 64px;
-  top: 15%;
+  background: rgba(255, 255, 255, 0.97);
-  left: 50%;
+  backdrop-filter: blur(12px);
-  transform: translateX(-50%);
+  -webkit-backdrop-filter: blur(12px);
-  pointer-events: none;
+  border-bottom: 1px solid var(--border-slate-200);
-  filter: grayscale(1);
+  box-shadow: 0 1px 8px rgba(0, 0, 0, 0.04);
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  padding: 0 24px;
+  gap: 16px;
 }
 
-.bilan-container {
+.topbar-left {
-  position: relative;
+  display: flex;
-  width: 100%;
+  align-items: center;
-  max-width: 1240px;
+  gap: 12px;
-  background: var(--bg-card);
+  flex-shrink: 0;
-  border-radius: var(--radius-xl);
+}
-  padding: 40px;
+
-  box-shadow: var(--shadow-container);
+.topbar-logo {
+  height: 28px;
+  width: auto;
+  display: block;
+}
+
+.topbar-divider {
+  width: 1px;
+  height: 24px;
+  background: var(--border-slate-200);
+}
+
+.cp-select {
+  appearance: none;
+  -webkit-appearance: none;
+  background: var(--color-indigo-50);
+  color: var(--color-indigo-600);
+  border: 1px solid rgba(98, 95, 255, 0.2);
+  border-radius: 999px;
+  padding: 6px 28px 6px 12px;
+  font-size: 13px;
+  font-weight: 700;
+  font-family: var(--font-sans);
+  cursor: pointer;
+  outline: none;
+  background-image: url("data:image/svg+xml;charset=UTF-8,%3Csvg width='20' height='20' viewBox='0 0 20 20' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M5 7L10 12L15 7' stroke='%234f46e5' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
+  background-repeat: no-repeat;
+  background-position: right 8px center;
+  background-size: 14px;
+  transition: var(--transition);
+}
+
+.cp-select:hover {
+  background-color: var(--color-indigo-100);
+  border-color: var(--color-indigo-500);
+}
+
+.topbar-center {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  gap: 1px;
+  flex: 1;
+  min-width: 0;
+}
+
+.topbar-title {
+  font-size: 15px;
+  font-weight: 800;
+  color: var(--text-primary);
+  letter-spacing: -0.02em;
+  white-space: nowrap;
+}
+
+.topbar-subtitle {
+  font-size: 11px;
+  font-weight: 500;
+  color: var(--text-muted);
+  white-space: nowrap;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  max-width: 100%;
+}
+
+.topbar-right {
+  display: flex;
+  align-items: center;
+  gap: 8px;
+  flex-shrink: 0;
+}
+
+.topbar-input {
+  width: 110px;
+  height: 36px;
+  padding: 0 12px;
+  border-radius: var(--radius-md);
   border: 1px solid var(--border-slate-200);
-  backdrop-filter: blur(20px);
+  background: #f8fafc;
-  -webkit-backdrop-filter: blur(20px);
+  color: var(--text-primary);
-  z-index: 1;
+  font-size: 13px;
+  font-weight: 500;
+  font-family: var(--font-sans);
+  outline: none;
+  transition: var(--transition);
+}
+
+.topbar-input::placeholder {
+  color: var(--text-muted);
+  font-weight: 400;
+}
+
+.topbar-input:focus {
+  border-color: var(--color-indigo-500);
+  background: #ffffff;
+  box-shadow: 0 0 0 3px rgba(98, 95, 255, 0.1);
+}
+
+.topbar-actions {
+  display: flex;
+  align-items: center;
+  gap: 8px;
+  padding-left: 12px;
+  border-left: 1px solid var(--border-slate-200);
+  margin-left: 4px;
+}
+
+.btn-topbar-secondary {
+  height: 36px;
+  padding: 0 14px;
+  border-radius: var(--radius-md);
+  border: 1px solid var(--border-slate-300);
+  background: #ffffff;
+  color: var(--text-secondary);
+  font-size: 13px;
+  font-weight: 700;
+  font-family: var(--font-sans);
+  cursor: pointer;
+  transition: var(--transition);
+  white-space: nowrap;
+  box-shadow: var(--shadow-flat);
+}
+
+.btn-topbar-secondary:hover {
+  border-color: var(--color-indigo-500);
+  color: var(--color-indigo-600);
+  box-shadow: 0 2px 8px rgba(98, 95, 255, 0.1);
+}
+
+.btn-topbar-primary {
+  height: 36px;
+  padding: 0 14px;
+  border-radius: var(--radius-md);
+  border: none;
+  background: linear-gradient(135deg, #6d28d9 0%, #a855f7 50%, #db2777 100%);
+  color: #ffffff;
+  font-size: 13px;
+  font-weight: 800;
+  font-family: var(--font-sans);
+  cursor: pointer;
+  transition: var(--transition);
+  white-space: nowrap;
+  box-shadow: 0 4px 14px rgba(168, 85, 247, 0.3);
+}
+
+.btn-topbar-primary:hover:not(:disabled) {
+  background: linear-gradient(135deg, #7c3aed 0%, #c084fc 50%, #ec4899 100%);
+  box-shadow: 0 6px 20px rgba(168, 85, 247, 0.45);
+  transform: translateY(-1px);
+}
+
+.btn-topbar-primary:disabled {
+  opacity: 0.5;
+  cursor: not-allowed;
+  transform: none;
+}
+
+.btn-topbar-success {
+  height: 36px;
+  padding: 0 14px;
+  border-radius: var(--radius-md);
+  border: none;
+  background: linear-gradient(135deg, #10b981 0%, #059669 100%);
+  color: #ffffff;
+  font-size: 13px;
+  font-weight: 700;
+  font-family: var(--font-sans);
+  cursor: pointer;
+  transition: var(--transition);
+  white-space: nowrap;
+  box-shadow: 0 4px 14px rgba(16, 185, 129, 0.2);
+}
+
+.btn-topbar-success:hover {
+  background: linear-gradient(135deg, #059669 0%, #047857 100%);
+  box-shadow: 0 6px 18px rgba(16, 185, 129, 0.35);
+  transform: translateY(-1px);
+}
+
+.app-main {
+  max-width: 1240px;
+  margin: 0 auto;
+  padding: 32px 24px 64px;
 }
 
 .header {

src/components/Bilan.jsx

@@ -914,65 +914,71 @@ ${notesFormateur}`,
   const currentTitle = titles[currentCp] || { h1: "", h2: "" };
 
   return (
-    <div className="bilan-wrapper">
+    <div className="app-shell">
-      <img src={LOGO_URL} alt="Logo watermark" className="logo-bg" />
+      <header className="app-topbar">
-      <div className="bilan-container">
+        <div className="topbar-left">
-        <div className="header">
+          <img src={LOGO_URL} alt="Arinfo" className="topbar-logo" />
-          <div className="controls controls-select">
+          <div className="topbar-divider" />
-            <label htmlFor="cpSelect">
+          <select
-              <strong>Choisir le CP :</strong>
+            id="cpSelect"
-            </label>
+            className="cp-select"
-            <select
+            value={currentCp}
-              id="cpSelect"
+            onChange={(event) => setCurrentCp(event.target.value)}
-              value={currentCp}
+          >
-              onChange={(event) => setCurrentCp(event.target.value)}
+            {Object.keys(allDefaults).map((cp) => (
-            >
+              <option key={cp} value={cp}>{cp}</option>
-              {Object.keys(allDefaults).map((cp) => (
+            ))}
-                <option key={cp} value={cp}>
+          </select>
-                  {cp}
-                </option>
-              ))}
-            </select>
-          </div>
-          <div>
-            <h1>{currentTitle.h1}</h1>
-            <h2>{currentTitle.h2}</h2>
-          </div>
         </div>
 
-        <div className="controls identity">
+        <div className="topbar-center">
+          <span className="topbar-title">{currentTitle.h1}</span>
+          <span className="topbar-subtitle">{currentTitle.h2}</span>
+        </div>
+
+        <div className="topbar-right">
           <input
-            id="prenom"
+            className="topbar-input"
             placeholder="Prénom"
             value={firstName}
             onChange={(event) => setFirstName(event.target.value)}
           />
           <input
-            id="nom"
+            className="topbar-input"
             placeholder="Nom"
             value={lastName}
             onChange={(event) => setLastName(event.target.value)}
           />
+          <div className="topbar-actions">
+            <button
+              type="button"
+              className="btn-topbar-secondary"
+              onClick={handleGenerateObservation}
+            >
+              📝 Générer
+            </button>
+            <button
+              type="button"
+              className="btn-topbar-primary"
+              onClick={generateAISummaryOpenAI}
+              disabled={isAiLoading}
+            >
+              ✨ Résumer avec l'IA
+            </button>
+            {anySelected && (
+              <button
+                type="button"
+                className="btn-topbar-success"
+                onClick={downloadPDF}
+              >
+                📄 PDF
+              </button>
+            )}
+          </div>
         </div>
+      </header>
 
-        <div className="controls actions">
+      <main className="app-main">
-          <button type="button" onClick={() => handleToggleAll(true)}>
-            Tout sélectionner
-          </button>
-          <button type="button" onClick={() => handleToggleAll(false)}>
-            Tout désélectionner
-          </button>
-          <input
-            id="newCriterion"
-            placeholder="Ajouter un critère…"
-            value={newCriterion}
-            onChange={(event) => setNewCriterion(event.target.value)}
-          />
-          <button type="button" onClick={handleAddCriterion}>
-            Ajouter
-          </button>
-        </div>
-
         <div className="competences-grid">
           {bucketOrder.map((bucket) => {
             const itemsInBucket = items.filter((item) => item.bucket === bucket);
@@ -1137,39 +1143,6 @@ ${notesFormateur}`,
                 )}
               </div>
 
-              <div className="action-buttons-group">
-                <button
-                  type="button"
-                  className="btn-secondary"
-                  onClick={handleGenerateObservation}
-                >
-                  📝 Générer le Bilan
-                </button>
-                <button
-                  type="button"
-                  className="btn-primary"
-                  onClick={generateAISummaryOpenAI}
-                  disabled={isAiLoading}
-                >
-                  ✨ Résumer avec l'IA
-                </button>
-                {anySelected && (
-                  <button
-                    type="button"
-                    className="btn-success"
-                    onClick={downloadPDF}
-                  >
-                    📄 Télécharger le PDF
-                  </button>
-                )}
-              </div>
-
-              {isAiLoading && (
-                <div className="ai-status-loader">
-                  <span className="spinner" />
-                  <span>Génération du résumé en cours…</span>
-                </div>
-              )}
             </div>
 
             {/* Colonne droite : Aperçu / Résultat en direct */}
@@ -1185,7 +1158,8 @@ ${notesFormateur}`,
             </div>
           </div>
         </div>
-      </div>
+      </main>
+
       <div className="toast-container">
         {toasts.map((toast) => (
           <div key={toast.id} className={`toast toast-${toast.type}`}>