{"id":25573,"date":"2026-08-28T22:16:50","date_gmt":"2026-08-28T22:16:50","guid":{"rendered":"https:\/\/maroczain.com\/?page_id=25573"},"modified":"2026-08-29T02:54:09","modified_gmt":"2026-08-29T02:54:09","slug":"cockpit-mza","status":"publish","type":"page","link":"https:\/\/maroczain.com\/en\/cockpit-mza\/","title":{"rendered":"Cockpit MZA"},"content":{"rendered":"\n<!doctype html>\n<html lang=\"fr\">\n<head>\n<meta charset=\"utf-8\">\n<meta name=\"viewport\" content=\"width=device-width,initial-scale=1\">\n<title>MZA Exam OS \u2014 Cockpit Premium<\/title>\n<style>\n:root{\n  --navy:#0a2d49; --blue:#0e4167; --blue2:#155d8e; --gold:#e9c84a;\n  --ink:#17324d; --muted:#6e7e8d; --bg:#f4f7fa; --card:#fff;\n  --line:#e6edf3; --ok:#17824b; --warn:#b7791f; --danger:#b42318;\n  --shadow:0 18px 50px rgba(8,42,68,.10);\n}\n*{box-sizing:border-box}\nbody{margin:0;background:linear-gradient(180deg,#eef4f8 0,#f8fafc 35%,#f4f7fa 100%);\nfont-family:Inter,Segoe UI,Arial,sans-serif;color:var(--ink)}\nbutton,input,textarea,select{font:inherit}\na{text-decoration:none;color:inherit}\n.mza-app{min-height:100vh}\n.topbar{\n  background:linear-gradient(135deg,var(--navy),var(--blue));\n  color:#fff;padding:18px 28px;display:flex;justify-content:space-between;align-items:center;\n  position:sticky;top:0;z-index:30;box-shadow:0 6px 24px rgba(5,30,50,.18)\n}\n.brand{display:flex;gap:14px;align-items:center}\n.logo{width:42px;height:42px;border-radius:14px;background:var(--gold);display:grid;place-items:center;\ncolor:var(--navy);font-weight:900}\n.brand strong{display:block;font-size:18px}\n.brand small{opacity:.78}\n.mission-meta{display:flex;gap:10px;align-items:center;flex-wrap:wrap;justify-content:flex-end}\n.pill{background:rgba(255,255,255,.12);border:1px solid rgba(255,255,255,.18);padding:8px 11px;border-radius:999px;font-size:13px}\n.timer{font-weight:800;background:#fff;color:var(--navy)}\n.shell{max-width:1500px;margin:0 auto;padding:22px}\n.hero{display:grid;grid-template-columns:1.4fr .6fr;gap:18px;margin-bottom:18px}\n.hero-card,.mini-card,.panel{background:var(--card);border:1px solid var(--line);border-radius:22px;box-shadow:var(--shadow)}\n.hero-card{padding:26px;background:linear-gradient(135deg,#ffffff 0,#f8fbfd 100%)}\n.eyebrow{font-size:12px;letter-spacing:.14em;text-transform:uppercase;color:var(--blue);font-weight:800}\n.hero h1{font-size:31px;line-height:1.15;margin:8px 0 12px}\n.hero p{color:var(--muted);max-width:780px;margin:0}\n.mini-card{padding:22px;display:grid;grid-template-columns:1fr 1fr;gap:12px}\n.stat{padding:14px;border:1px solid var(--line);border-radius:16px;background:#fbfdff}\n.stat b{display:block;font-size:22px;color:var(--navy)}\n.stat span{font-size:12px;color:var(--muted)}\n.progress-wrap{margin-top:18px}\n.progress-row{display:flex;justify-content:space-between;font-size:13px;margin-bottom:8px}\n.progress{height:9px;background:#e9eff4;border-radius:999px;overflow:hidden}\n.progress>i{display:block;height:100%;width:42%;background:linear-gradient(90deg,var(--blue),var(--gold))}\n.workspace{display:grid;grid-template-columns:270px minmax(0,1fr) 310px;gap:18px}\n.panel{overflow:hidden}\n.panel-h{padding:17px 18px;border-bottom:1px solid var(--line);display:flex;justify-content:space-between;align-items:center}\n.panel-h h3{font-size:15px;margin:0;color:var(--navy)}\n.panel-b{padding:16px}\n.case{padding:13px;border:1px solid var(--line);border-radius:15px;margin-bottom:10px;cursor:pointer;background:#fff}\n.case.active{border-color:#aac7dc;background:#f4f9fc}\n.case strong{display:block;font-size:14px}\n.case small{color:var(--muted)}\n.dot{width:8px;height:8px;border-radius:50%;display:inline-block;margin-right:7px;background:var(--blue2)}\n.timeline{display:flex;flex-direction:column;gap:12px}\n.event{display:grid;grid-template-columns:54px 1fr;gap:10px}\n.time{font-size:12px;color:var(--muted);padding-top:2px}\n.event-card{border-left:3px solid #cddbe6;padding:0 0 0 12px}\n.event-card b{font-size:13px}\n.event-card p{font-size:13px;color:var(--muted);margin:4px 0 0}\n.work-main{min-height:650px}\n.work-header{padding:24px;border-bottom:1px solid var(--line);background:linear-gradient(180deg,#fff,#fbfdff)}\n.work-header h2{margin:6px 0 6px;font-size:24px}\n.work-header p{margin:0;color:var(--muted)}\n.notice{margin:20px 24px 0;padding:14px 16px;border-radius:14px;background:#f3f8fc;border:1px solid #d9e7f0;font-size:14px}\n.question{padding:24px}\n.question h4{margin:0 0 14px;font-size:17px}\n.option{display:flex;gap:10px;padding:14px 15px;border:1px solid var(--line);border-radius:14px;margin-bottom:10px;cursor:pointer;transition:.2s}\n.option:hover{border-color:#9dbfd6;background:#f8fbfd}\n.option input{margin-top:2px}\n.actions{display:flex;flex-wrap:wrap;gap:10px;padding:0 24px 24px}\n.btn{border:none;border-radius:13px;padding:12px 16px;font-weight:750;cursor:pointer}\n.btn-primary{background:var(--blue);color:#fff}\n.btn-soft{background:#edf4f8;color:var(--navy)}\n.btn-gold{background:var(--gold);color:var(--navy)}\n.right-section{margin-bottom:18px}\n.right-section h4{font-size:13px;margin:0 0 10px;color:var(--navy);text-transform:uppercase;letter-spacing:.08em}\n.resource,.loop,.doc{padding:11px 12px;border:1px solid var(--line);border-radius:13px;margin-bottom:8px;background:#fff}\n.resource b,.loop b,.doc b{display:block;font-size:13px}\n.resource small,.loop small,.doc small{color:var(--muted)}\n.statusline{display:flex;align-items:center;gap:7px}\n.ok{background:var(--ok)}\n.warn{background:var(--warn)}\n.action-dock{\n  margin-top:18px;background:#fff;border:1px solid var(--line);border-radius:20px;box-shadow:var(--shadow);\n  padding:14px;display:flex;gap:10px;flex-wrap:wrap;justify-content:center\n}\n.action-dock button{min-width:120px}\n.footer-note{text-align:center;color:var(--muted);font-size:12px;padding:20px}\n@media(max-width:1150px){\n  .workspace{grid-template-columns:240px 1fr}\n  .right{grid-column:1\/-1}\n  .right .panel-b{display:grid;grid-template-columns:repeat(3,1fr);gap:14px}\n}\n@media(max-width:780px){\n  .topbar{align-items:flex-start;gap:14px;flex-direction:column}\n  .mission-meta{justify-content:flex-start}\n  .shell{padding:14px}\n  .hero{grid-template-columns:1fr}\n  .workspace{grid-template-columns:1fr}\n  .right .panel-b{grid-template-columns:1fr}\n  .mini-card{grid-template-columns:1fr 1fr}\n}\n<\/style>\n<\/head>\n<body>\n<div class=\"mza-app\">\n  <header class=\"topbar\">\n    <div class=\"brand\">\n      <div class=\"logo\">MZA<\/div>\n      <div><strong>MZA EXAM OS<\/strong><small>Mission professionnelle \u2014 Mode candidat<\/small><\/div>\n    <\/div>\n    <div class=\"mission-meta\">\n      <span class=\"pill\">Chef d\u2019escale \u2014 Expert<\/span>\n      <span class=\"pill\">Mission EX-2026-004<\/span>\n      <span class=\"pill\">Phase 3 \/ 8<\/span>\n      <span class=\"pill timer\" id=\"timer\">01:47:32<\/span>\n    <\/div>\n  <\/header>\n\n  <div class=\"shell\">\n    <section class=\"hero\">\n      <div class=\"hero-card\">\n        <span class=\"eyebrow\">Situation en cours<\/span>\n        <h1>Maintenir la ma\u00eetrise de l\u2019activit\u00e9 pendant une perturbation multi-vols<\/h1>\n        <p>Analysez la situation, g\u00e9rez les ressources, contr\u00f4lez les boucles ouvertes et prenez les d\u00e9cisions adapt\u00e9es au contexte. Aucun corrig\u00e9 n\u2019est affich\u00e9 pendant la mission.<\/p>\n        <div class=\"progress-wrap\">\n          <div class=\"progress-row\"><span>Avancement de la mission<\/span><b>42 %<\/b><\/div>\n          <div class=\"progress\"><i><\/i><\/div>\n        <\/div>\n      <\/div>\n      <div class=\"mini-card\">\n        <div class=\"stat\"><b>5<\/b><span>Dossiers actifs<\/span><\/div>\n        <div class=\"stat\"><b>3<\/b><span>Actions en attente<\/span><\/div>\n        <div class=\"stat\"><b>7<\/b><span>Ressources suivies<\/span><\/div>\n        <div class=\"stat\"><b>08:18<\/b><span>Heure mission<\/span><\/div>\n      <\/div>\n    <\/section>\n\n    <section class=\"workspace\">\n      <aside class=\"panel\">\n        <div class=\"panel-h\"><h3>Dossiers<\/h3><span>5<\/span><\/div>\n        <div class=\"panel-b\">\n          <div class=\"case active\"><strong><span class=\"dot\"><\/span>VOL MZ201<\/strong><small>Coordination d\u00e9part<\/small><\/div>\n          <div class=\"case\"><strong><span class=\"dot\"><\/span>BAGAGES<\/strong><small>1 action ouverte<\/small><\/div>\n          <div class=\"case\"><strong><span class=\"dot\"><\/span>CONNEXIONS<\/strong><small>Surveillance<\/small><\/div>\n          <div class=\"case\"><strong><span class=\"dot\"><\/span>\u00c9QUIPE B<\/strong><small>Charge \u00e9lev\u00e9e<\/small><\/div>\n          <div class=\"case\"><strong><span class=\"dot\"><\/span>RESSOURCE R3<\/strong><small>Disponibilit\u00e9 \u00e0 confirmer<\/small><\/div>\n\n          <div class=\"panel-h\" style=\"margin:18px -16px 12px;padding-left:16px\"><h3>Timeline<\/h3><\/div>\n          <div class=\"timeline\">\n            <div class=\"event\"><div class=\"time\">08:03<\/div><div class=\"event-card\"><b>Information re\u00e7ue<\/b><p>Le d\u00e9lai d&rsquo;une ressource \u00e9volue.<\/p><\/div><\/div>\n            <div class=\"event\"><div class=\"time\">08:07<\/div><div class=\"event-card\"><b>Retour \u00e9quipe<\/b><p>Une action pr\u00e9c\u00e9dente est termin\u00e9e.<\/p><\/div><\/div>\n            <div class=\"event\"><div class=\"time\">08:15<\/div><div class=\"event-card\"><b>Nouveau message<\/b><p>Une information doit \u00eatre \u00e9valu\u00e9e.<\/p><\/div><\/div>\n            <div class=\"event\"><div class=\"time\">08:18<\/div><div class=\"event-card\"><b>Situation active<\/b><p>D\u00e9cision requise dans le dossier courant.<\/p><\/div><\/div>\n          <\/div>\n        <\/div>\n      <\/aside>\n\n      <main class=\"panel work-main\">\n        <div class=\"work-header\">\n          <span class=\"eyebrow\">Dossier MZ201<\/span>\n          <h2>D\u00e9cision op\u00e9rationnelle<\/h2>\n          <p>Une nouvelle contrainte vient d\u2019appara\u00eetre \u00e0 T+17. Plusieurs options sont professionnellement plausibles.<\/p>\n        <\/div>\n\n        <div class=\"notice\">\n          Une d\u00e9cision valid\u00e9e est enregistr\u00e9e dans la mission. Le syst\u00e8me ne r\u00e9v\u00e8le pas si elle est correcte ou incorrecte.\n        <\/div>\n\n        <div class=\"question\">\n          <h4>Quelle action prenez-vous en priorit\u00e9 dans le contexte actuel ?<\/h4>\n          <label class=\"option\"><input type=\"radio\" name=\"q1\"> <span>Maintenir le plan actuel et renforcer le contr\u00f4le du dossier.<\/span><\/label>\n          <label class=\"option\"><input type=\"radio\" name=\"q1\"> <span>R\u00e9allouer imm\u00e9diatement une ressource disponible au dossier.<\/span><\/label>\n          <label class=\"option\"><input type=\"radio\" name=\"q1\"> <span>Demander une v\u00e9rification compl\u00e9mentaire avant arbitrage.<\/span><\/label>\n          <label class=\"option\"><input type=\"radio\" name=\"q1\"> <span>Escalader la situation au niveau sup\u00e9rieur avec une proposition structur\u00e9e.<\/span><\/label>\n        <\/div>\n\n        <div class=\"actions\">\n          <button class=\"btn btn-primary\" onclick=\"confirmAction()\">VALIDER LA D\u00c9CISION<\/button>\n          <button class=\"btn btn-soft\">AJOUTER UNE NOTE<\/button>\n          <button class=\"btn btn-soft\">CONSULTER LES DOCUMENTS<\/button>\n        <\/div>\n      <\/main>\n\n      <aside class=\"panel right\">\n        <div class=\"panel-h\"><h3>Ressources &#038; suivi<\/h3><span class=\"statusline\"><i class=\"dot ok\"><\/i>Synchronis\u00e9<\/span><\/div>\n        <div class=\"panel-b\">\n          <div class=\"right-section\">\n            <h4>\u00c9quipe<\/h4>\n            <div class=\"resource\"><b>Superviseur A<\/b><small>Disponible<\/small><\/div>\n            <div class=\"resource\"><b>Agent B<\/b><small>Occup\u00e9 jusqu\u2019\u00e0 08:26<\/small><\/div>\n            <div class=\"resource\"><b>Agent C<\/b><small>Retour attendu 08:22<\/small><\/div>\n          <\/div>\n\n          <div class=\"right-section\">\n            <h4>Boucles ouvertes<\/h4>\n            <div class=\"loop\"><b>D17 \u2014 retour<\/b><small>\u00c9ch\u00e9ance 08:22<\/small><\/div>\n            <div class=\"loop\"><b>R3 \u2014 v\u00e9rification<\/b><small>En attente<\/small><\/div>\n            <div class=\"loop\"><b>Connexion C4<\/b><small>Surveillance<\/small><\/div>\n          <\/div>\n\n          <div class=\"right-section\">\n            <h4>Documents<\/h4>\n            <div class=\"doc\"><b>Brief 07:30<\/b><small>Version 2<\/small><\/div>\n            <div class=\"doc\"><b>Tableau rotations<\/b><small>Mis \u00e0 jour 08:05<\/small><\/div>\n            <div class=\"doc\"><b>Note op\u00e9rationnelle<\/b><small>Source interne<\/small><\/div>\n          <\/div>\n        <\/div>\n      <\/aside>\n    <\/section>\n\n    <div class=\"action-dock\">\n      <button class=\"btn btn-soft\">V\u00c9RIFIER<\/button>\n      <button class=\"btn btn-soft\">D\u00c9L\u00c9GUER<\/button>\n      <button class=\"btn btn-soft\">SURVEILLER<\/button>\n      <button class=\"btn btn-soft\">ESCALADER<\/button>\n      <button class=\"btn btn-soft\">COMMUNIQUER<\/button>\n      <button class=\"btn btn-gold\">R\u00c9\u00c9VALUER<\/button>\n    <\/div>\n\n    <div class=\"footer-note\">Prototype HTML autonome \u2014 MZA Exam OS Candidate Cockpit<\/div>\n  <\/div>\n<\/div>\n\n<script>\nlet seconds = 1*3600 + 47*60 + 32;\nconst timer = document.getElementById('timer');\nsetInterval(()=>{\n  if(seconds>0) seconds--;\n  const h=String(Math.floor(seconds\/3600)).padStart(2,'0');\n  const m=String(Math.floor((seconds%3600)\/60)).padStart(2,'0');\n  const s=String(seconds%60).padStart(2,'0');\n  timer.textContent=`${h}:${m}:${s}`;\n},1000);\n\nfunction confirmAction(){\n  const selected = document.querySelector('input[name=\"q1\"]:checked');\n  if(!selected){ alert(\"S\u00e9lectionnez une d\u00e9cision avant de valider.\"); return; }\n  alert(\"D\u00e9cision enregistr\u00e9e. La mission continue.\");\n}\n<\/script>\n<\/body>\n<\/html>\n","protected":false},"excerpt":{"rendered":"<p>MZA Exam OS \u2014 Cockpit Premium MZA MZA EXAM OSMission professionnelle \u2014 Mode candidat Chef d\u2019escale \u2014 Expert Mission EX-2026-004 Phase 3 \/ 8 01:47:32 Situation en cours Maintenir la ma\u00eetrise de l\u2019activit\u00e9 pendant une perturbation multi-vols Analysez la situation, g\u00e9rez les ressources, contr\u00f4lez les boucles ouvertes et prenez les d\u00e9cisions adapt\u00e9es au contexte. Aucun [&hellip;]<\/p>\n","protected":false},"author":2,"featured_media":0,"parent":0,"menu_order":0,"comment_status":"closed","ping_status":"closed","template":"","meta":{"footnotes":""},"class_list":["post-25573","page","type-page","status-publish","hentry"],"jetpack_sharing_enabled":true,"_links":{"self":[{"href":"https:\/\/maroczain.com\/en\/wp-json\/wp\/v2\/pages\/25573","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/maroczain.com\/en\/wp-json\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/maroczain.com\/en\/wp-json\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/maroczain.com\/en\/wp-json\/wp\/v2\/users\/2"}],"replies":[{"embeddable":true,"href":"https:\/\/maroczain.com\/en\/wp-json\/wp\/v2\/comments?post=25573"}],"version-history":[{"count":2,"href":"https:\/\/maroczain.com\/en\/wp-json\/wp\/v2\/pages\/25573\/revisions"}],"predecessor-version":[{"id":25759,"href":"https:\/\/maroczain.com\/en\/wp-json\/wp\/v2\/pages\/25573\/revisions\/25759"}],"wp:attachment":[{"href":"https:\/\/maroczain.com\/en\/wp-json\/wp\/v2\/media?parent=25573"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}