notes

frontend/src/App.jsx

@@ -251,7 +251,7 @@ function ProgramReviewPanel({ selectedNode, reviewForm, onReviewChange, onSaveRe
   const status = selectedNode.status || {}
   const review = selectedNode.review || {}
   return (
-    <section className="admin-program-review">
+    <section className={`admin-program-review ${readOnly ? 'read-only-program-review' : ''}`}>
       <div className="admin-log-detail-head">
         <div>
           <span className="stage-label">{selectedNode.type}</span>
@@ -298,11 +298,9 @@ function ProgramReviewPanel({ selectedNode, reviewForm, onReviewChange, onSaveRe
       )}
 
       {readOnly ? (
-        <div className="admin-review-form">
-          <strong>Validation centralisée</strong>
-          <p className="muted">Cet onglet sert à explorer le programme. Les décisions éditoriales se font dans l’onglet Validation contenus.</p>
-          <button type="button" onClick={onOpenValidation}>Ouvrir dans Validation contenus</button>
-        </div>
+        <button type="button" className="program-validation-fab" onClick={onOpenValidation}>
+          Ouvrir dans Validation contenus
+        </button>
       ) : (
         <form className="admin-review-form" onSubmit={onSaveReview}>
           <label>

frontend/src/styles.css

@@ -651,10 +651,12 @@ button:disabled { opacity: 0.5; cursor: not-allowed; }
   display: grid;
   grid-template-columns: minmax(280px, 0.9fr) minmax(360px, 1.4fr);
   gap: 1rem;
+  height: calc(100vh - 220px);
   min-height: 520px;
 }
 .program-tree-panel,
 .admin-program-review {
+  position: relative;
   display: flex;
   flex-direction: column;
   gap: 1rem;
@@ -664,6 +666,10 @@ button:disabled { opacity: 0.5; cursor: not-allowed; }
   background: #f8fafc;
   padding: 1rem;
 }
+
+.read-only-program-review {
+  overflow: hidden;
+}
 .program-tree-list {
   display: flex;
   flex-direction: column;
@@ -773,6 +779,17 @@ button:disabled { opacity: 0.5; cursor: not-allowed; }
   overflow: hidden;
   padding: 0.75rem;
 }
+
+.read-only-program-review .program-node-preview,
+.read-only-program-review .program-node-text-preview {
+  flex: 1 1 0;
+  min-height: 0;
+}
+
+.read-only-program-review .program-node-preview {
+  height: auto;
+  padding: 0.45rem;
+}
 .program-node-preview img {
   width: 100%;
   height: 100%;
@@ -791,6 +808,24 @@ button:disabled { opacity: 0.5; cursor: not-allowed; }
   font-size: 0.82rem;
   font-weight: 800;
 }
+.program-validation-fab {
+  position: absolute;
+  right: 1.35rem;
+  bottom: 1.15rem;
+  z-index: 4;
+  width: auto;
+  border: 0;
+  border-radius: 999px;
+  background: rgba(37, 99, 235, 0.88);
+  color: white;
+  padding: 0.55rem 0.85rem;
+  box-shadow: 0 10px 24px rgba(37, 99, 235, 0.22);
+  font-size: 0.85rem;
+  font-weight: 800;
+}
+.program-validation-fab:hover {
+  background: #1d4ed8;
+}
 .program-node-text-preview,
 .validation-text-preview {
   min-height: 260px;
@@ -802,6 +837,11 @@ button:disabled { opacity: 0.5; cursor: not-allowed; }
   padding: 1rem;
 }
 
+.read-only-program-review .program-node-text-preview {
+  max-height: none;
+  padding: 0.9rem 1rem 3.2rem;
+}
+
 .validation-main-preview .validation-text-preview {
   width: min(100%, 980px);
   min-height: 220px;
@@ -1354,6 +1394,14 @@ button:disabled { opacity: 0.5; cursor: not-allowed; }
     grid-template-columns: 1fr;
   }
 
+  .admin-program-browser {
+    height: auto;
+  }
+
+  .read-only-program-review {
+    overflow: visible;
+  }
+
   .review-queue,
   .validation-inspector,
   .validation-stage {