feat: switch criteria items to horizontal flex-row layout

Transform .competence-item layout from vertical flex-column to horizontal flex-row with checkbox, label (flex-grow), level pills, and remove button. Remove 'Niveau:' label text and reposition remove-field-btn from absolute to static positioning.

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

src/components/Bilan.css

@@ -607,16 +607,17 @@
 
 .competence-item {
   border: 1px solid var(--border-slate-200);
-  padding: 16px;
+  padding: 10px 12px;
   border-radius: var(--radius-md);
   cursor: grab;
-  position: relative;
   background: #ffffff;
   transition: var(--transition);
   display: flex;
-  flex-direction: column;
-  gap: 12px;
+  flex-direction: row;
+  align-items: center;
+  gap: 10px;
   box-shadow: var(--shadow-card);
+  position: relative;
 }
 
 .competence-item:hover {
@@ -636,15 +637,14 @@
 }
 
 .competence-item .competence-label {
-  font-weight: 700;
+  flex: 1;
+  min-width: 0;
+  font-weight: 600;
   color: var(--text-primary);
-  font-size: 13.5px;
-  padding-right: 22px;
+  font-size: 13px;
   cursor: pointer;
-  display: flex;
-  align-items: flex-start;
-  gap: 10px;
   line-height: 1.4;
+  padding-right: 0;
 }
 
 .remove-field-btn {
@@ -660,13 +660,12 @@
   display: flex !important;
   align-items: center !important;
   justify-content: center !important;
-  position: absolute;
-  top: 14px;
-  right: 14px;
+  flex-shrink: 0;
   opacity: 0;
   transform: scale(0.8);
   transition: var(--transition);
   box-shadow: none !important;
+  position: static;
 }
 
 .competence-item:hover .remove-field-btn {
@@ -765,13 +764,14 @@
 }
 
 .level-group {
-  margin-top: 12px;
   display: flex;
-  flex-wrap: wrap;
-  gap: 6px;
+  flex-wrap: nowrap;
+  gap: 4px;
   align-items: center;
-  border-top: 1px dashed var(--border-slate-200);
-  padding-top: 12px;
+  flex-shrink: 0;
+  border-top: none;
+  padding-top: 0;
+  margin-top: 0;
 }
 
 .level-title {

src/components/Bilan.jsx

@@ -1062,7 +1062,6 @@ ${notesFormateur}`,
                         role="radiogroup"
                         aria-label="Niveau"
                       >
-                        <span className="level-title">Niveau :</span>
                         {LEVELS.map((level) => (
                           <span className="level-pill" key={level.key}>
                             <input