Add branding splash and simulator cycle timing

frontend/src/App.tsx

@@ -39,6 +39,7 @@ function FieldLabel({ label, error, children }: { label: string; error?: ReactNo
 }
 
 export default function App() {
+  const [showSplash, setShowSplash] = useState(true);
   const [dashboard, setDashboard] = useState<DashboardSnapshot | null>(null);
   const [orders, setOrders] = useState<ProductionOrder[]>([]);
   const [unqualifiedDowntimes, setUnqualifiedDowntimes] = useState<Downtime[]>([]);
@@ -77,6 +78,11 @@ export default function App() {
     return language === "fr" ? fr : en;
   }
 
+  useEffect(() => {
+    const timer = window.setTimeout(() => setShowSplash(false), 900);
+    return () => window.clearTimeout(timer);
+  }, []);
+
   const moduleTabs: Array<{ key: ModuleKey; label: string; description: string }> = [
     { key: "atelier", label: t("Workshop", "Atelier"), description: t("Machines view", "Vue machines") },
     { key: "machine", label: "Machine", description: t("Cycles and events", "Cycles et evenements") },
@@ -1118,13 +1124,34 @@ export default function App() {
     );
   }
 
+  if (showSplash) {
+    return (
+      <div className="splash-screen" aria-label="Plast Track">
+        <img src="/KSS.png" alt="KSS" />
+      </div>
+    );
+  }
+
   return (
     <div className={`app-shell ${isWorkshopMode && activeModule === "atelier" ? "app-shell--workshop" : ""}`}>
       <main className="workspace">
+        <aside className="demo-notice" role="note">
+          <strong>{t("Simulation and demonstration only", "Simulation et demonstration uniquement")}</strong>
+          <span>
+            {t(
+              "This web application is for simulation and demonstration. It must not be used as a validated production MES or safety system.",
+              "Cette application web est destinee a la simulation et a la demonstration. Elle ne doit pas etre utilisee comme MES de production valide ni comme systeme de securite.",
+            )}
+          </span>
+        </aside>
+
         <header className="hero">
-          <div>
-            <p className="eyebrow">Plast Track MVP</p>
-            <h1>{t("Workshop supervision", "Supervision atelier")}</h1>
+          <div className="brand-lockup">
+            <img className="brand-lockup__logo" src="/KSS.png" alt="KSS" />
+            <div>
+              <p className="eyebrow">Plast Track MVP</p>
+              <h1>{t("Workshop supervision", "Supervision atelier")}</h1>
+            </div>
           </div>
           <div className="hero__controls">
             <label className="language-select">

frontend/src/styles.css

@@ -47,6 +47,19 @@ body {
   background: var(--bg-base);
 }
 
+.splash-screen {
+  display: grid;
+  min-height: 100vh;
+  place-items: center;
+  background: #FFFFFF;
+}
+
+.splash-screen img {
+  width: min(220px, 58vw);
+  height: auto;
+  animation: splash-enter 420ms ease both;
+}
+
 button,
 input,
 select,
@@ -71,6 +84,7 @@ button:disabled {
   padding: 12px;
 }
 
+.app-shell--workshop .demo-notice,
 .app-shell--workshop .hero,
 .app-shell--workshop .summary-ribbon,
 .app-shell--workshop .module-tabs {
@@ -97,6 +111,30 @@ button:disabled {
   align-items: start;
 }
 
+.demo-notice {
+  display: flex;
+  align-items: center;
+  gap: 12px;
+  padding: 12px 14px;
+  border: 1px solid color-mix(in srgb, var(--accent) 46%, #FFFFFF);
+  border-radius: 12px;
+  background: var(--accent-light);
+  color: var(--text-primary);
+  box-shadow: 0 1px 3px rgba(10, 47, 90, 0.06), 0 4px 12px rgba(10, 47, 90, 0.04);
+}
+
+.demo-notice strong {
+  flex: 0 0 auto;
+  font-family: "Space Grotesk", sans-serif;
+  font-size: var(--text-base);
+}
+
+.demo-notice span {
+  color: var(--text-secondary);
+  font-size: var(--text-sm);
+  line-height: 1.45;
+}
+
 .hero,
 .panel,
 .machine-card,
@@ -115,6 +153,20 @@ button:disabled {
   padding: 20px;
 }
 
+.brand-lockup {
+  display: flex;
+  min-width: 0;
+  align-items: center;
+  gap: 16px;
+}
+
+.brand-lockup__logo {
+  width: 74px;
+  max-height: 58px;
+  flex: 0 0 auto;
+  object-fit: contain;
+}
+
 .hero h1 {
   margin: 0;
   font-family: "Space Grotesk", sans-serif;
@@ -1066,6 +1118,8 @@ tr.is-selected-row td {
   }
 
   .hero,
+  .demo-notice,
+  .brand-lockup,
   .hero__controls,
   .machine-card__top,
   .machine-card__hero,
@@ -1080,6 +1134,10 @@ tr.is-selected-row td {
     justify-items: start;
   }
 
+  .brand-lockup__logo {
+    width: 64px;
+  }
+
   .panel-actions {
     justify-content: stretch;
   }
@@ -1105,6 +1163,18 @@ tr.is-selected-row td {
   }
 }
 
+@keyframes splash-enter {
+  from {
+    opacity: 0;
+    transform: translateY(8px) scale(0.98);
+  }
+
+  to {
+    opacity: 1;
+    transform: translateY(0) scale(1);
+  }
+}
+
 @media (prefers-reduced-motion: reduce) {
   *,
   *::before,