/* Thème « charbon » de la GMAO Emboutissage. * * Repris du fichier HTML monolithique dont cette application est issue : c'est * l'identité visuelle que l'équipe connaît, et la reprendre telle quelle évite * de rejouer les réglages de contraste faits sur écran d'atelier. * * Deux différences avec la source : * - le monolithe portait DEUX palettes concurrentes, la seconde (planning des * équipes) imposée en !important par-dessus la première. Elles sont fondues * ici en un seul jeu de variables ; * - `.page` ne masque plus rien : chaque page est un fichier, il n'y a plus * de bascule d'affichage à faire en JavaScript. * * Tout est exprimé en variables : un thème clair (charte Tournaire, navy * #0D395F) se poserait en redéfinissant ce seul bloc :root. */ @import url('https://fonts.googleapis.com/css2?family=DM+Sans:opsz,wght@9..40,300;9..40,400;9..40,500;9..40,600&family=DM+Mono:wght@400;500&display=swap'); :root { --bg:#1e2438;--bg2:#262e46;--bg3:#303858;--bg4:#3a4262; --border:#424a68;--border2:#505870; --text:#eef0f8;--text2:#a8b4d0;--text3:#7888a8; --accent:#5f8fff;--accent2:#3a5fd4; --green:#35e085;--green-bg:#0e2018; --amber:#f7b240;--amber-bg:#2a2008; --red:#ff6e6e;--red-bg:#220808; --purple:#b8a0fb;--purple-bg:#1a1438; --teal:#45e4bc;--teal-bg:#0a2020; } *{box-sizing:border-box;margin:0;padding:0} body{font-family:'DM Sans',sans-serif;background:var(--bg);color:var(--text);min-height:100vh;font-size:14px;-webkit-font-smoothing:antialiased} .app{display:grid;grid-template-columns:215px 1fr;min-height:100vh} .sidebar{background:var(--bg2);border-right:1px solid var(--border);display:flex;flex-direction:column;position:sticky;top:0;height:100vh;overflow:hidden} .logo{padding:18px 14px 14px;border-bottom:1px solid var(--border)} .logo-badge{display:inline-flex;align-items:center;gap:6px;background:var(--bg3);border:1px solid var(--border2);border-radius:20px;padding:4px 10px;margin-bottom:8px} .logo-dot{width:7px;height:7px;border-radius:50%;background:var(--green);box-shadow:0 0 8px var(--green)} .logo-badge span{font-size:10px;font-weight:600;color:var(--green);text-transform:uppercase;letter-spacing:.08em} .logo-title{font-size:14px;font-weight:600} .logo-sub{font-size:11px;color:var(--text3);margin-top:2px} .nav{padding:8px;flex:1;overflow-y:auto} .nav-section{font-size:9px;font-weight:700;color:var(--text3);text-transform:uppercase;letter-spacing:.1em;padding:10px 8px 4px} .nav-item{display:flex;align-items:center;gap:9px;padding:8px 10px;border-radius:8px;cursor:pointer;font-size:13px;color:#b0bcd8;transition:all .15s;margin-bottom:1px} .nav-item:hover{background:var(--bg3);color:var(--text)} .nav-item.active{background:var(--accent);color:#fff} .nav-item .ico{font-size:15px;width:18px;text-align:center} .nbadge{margin-left:auto;font-size:10px;font-weight:700;padding:1px 6px;border-radius:10px;background:var(--red);color:#fff} .nbadge.am{background:var(--amber);color:#000} .sfooter{padding:12px;border-top:1px solid var(--border)} .av{width:30px;height:30px;border-radius:50%;display:flex;align-items:center;justify-content:center;font-size:11px;font-weight:700;color:#fff;flex-shrink:0} .main{overflow-y:auto;display:flex;flex-direction:column;height:100vh;position:relative} .topbar{display:flex;align-items:center;justify-content:space-between;padding:12px 28px;background:var(--bg2);border-bottom:1px solid var(--border);position:sticky;top:0;z-index:10} .topbar-title{font-size:14px;font-weight:600} .topbar-date{font-size:11px;color:var(--text3);font-family:'DM Mono',monospace} .topbar-actions{display:flex;gap:8px;align-items:center} .page{display:block;padding:24px 28px;min-height:100%;animation:fi .2s} @keyframes fi{from{opacity:0;transform:translateY(5px)}to{opacity:1;transform:none}} @keyframes slideIn{from{opacity:0;transform:translateX(20px)}to{opacity:1;transform:none}} .page-header{margin-bottom:20px;display:flex;align-items:flex-start;justify-content:space-between;flex-wrap:wrap;gap:10px} .page-title{font-size:18px;font-weight:600} .page-sub{font-size:12px;color:var(--text3);margin-top:3px} .kpi-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:12px;margin-bottom:20px} .kpi{background:var(--bg2);border:1px solid var(--border);border-radius:12px;padding:14px 16px;transition:border-color .2s} .kpi:hover{border-color:var(--border2)} .kpi-label{font-size:10px;color:var(--text3);text-transform:uppercase;letter-spacing:.06em;margin-bottom:8px} .kpi-val{font-size:24px;font-weight:600;line-height:1} .kpi-sub{font-size:11px;color:var(--text3);margin-top:5px} .card{background:var(--bg2);border:1px solid var(--border);border-radius:12px;overflow:hidden;margin-bottom:18px} .card-head{padding:12px 16px;border-bottom:1px solid var(--border);display:flex;align-items:center;justify-content:space-between;flex-wrap:wrap;gap:8px} .card-title{font-size:13px;font-weight:600} table{width:100%;border-collapse:collapse} th{font-size:10px;font-weight:600;color:#8898c0;text-transform:uppercase;letter-spacing:.06em;padding:8px 14px;text-align:left;border-bottom:1px solid var(--border);background:var(--bg3)} td{padding:9px 14px;border-bottom:1px solid var(--border);font-size:13px;vertical-align:middle;color:#eef0f8} tr:last-child td{border-bottom:none} tr:hover td{background:var(--bg3)} .grid2{display:grid;grid-template-columns:1fr 1fr;gap:18px} .badge{display:inline-flex;align-items:center;font-size:11px;font-weight:500;padding:3px 9px;border-radius:20px;white-space:nowrap} .br{background:var(--red-bg);color:var(--red)} .bg{background:var(--green-bg);color:var(--green)} .ba{background:var(--amber-bg);color:var(--amber)} .bb{background:#0c1c3a;color:var(--accent)} .bp{background:var(--purple-bg);color:var(--purple)} .bt{background:var(--teal-bg);color:var(--teal)} .bgr{background:var(--bg4);color:var(--text2)} .btn{display:inline-flex;align-items:center;gap:6px;padding:8px 14px;border-radius:8px;font-size:13px;font-weight:500;cursor:pointer;border:none;transition:all .15s;font-family:inherit} .btn-p{background:var(--accent);color:#fff}.btn-p:hover{background:var(--accent2)} .btn-g{background:var(--bg3);color:var(--text2);border:1px solid var(--border)}.btn-g:hover{background:var(--bg4);color:var(--text)} .btn-r{background:var(--red-bg);color:var(--red);border:1px solid rgba(255,92,92,.2)} .hp-filter-btn{background:var(--bg3);color:var(--text2);border:1px solid var(--border);border-radius:6px;padding:5px 12px;cursor:pointer;font-size:11px;font-weight:500;font-family:inherit;transition:all .15s} .hp-filter-btn:hover{background:var(--bg4);color:var(--text)} .hp-filter-btn.active{background:var(--accent);color:#fff;border-color:var(--accent)} .form-grid{display:grid;grid-template-columns:1fr 1fr;gap:14px} .fg{display:flex;flex-direction:column;gap:5px} .fg.full{grid-column:1/-1} label{font-size:10px;font-weight:700;color:var(--text3);text-transform:uppercase;letter-spacing:.06em} input,select,textarea{background:var(--bg3);border:1px solid var(--border2);border-radius:8px;padding:9px 12px;color:var(--text);font-size:13px;font-family:inherit;outline:none;transition:border-color .15s;width:100%} input:focus,select:focus,textarea:focus{border-color:var(--accent)} textarea{resize:vertical;min-height:75px} select option{background:var(--bg2)} .modal-ov{display:none;position:fixed;inset:0;background:rgba(0,0,0,.75);z-index:200;align-items:center;justify-content:center} .modal-ov.open{display:flex} .modal{background:var(--bg2);border:1px solid var(--border2);border-radius:16px;padding:26px;width:620px;max-width:95vw;max-height:90vh;overflow-y:auto;animation:fi .2s} .modal-title{font-size:16px;font-weight:600;margin-bottom:18px} .modal-footer{display:flex;gap:8px;justify-content:flex-end;margin-top:20px;padding-top:16px;border-top:1px solid var(--border)} .alert{display:flex;gap:10px;padding:11px 14px;border-radius:10px;font-size:13px;margin-bottom:14px;align-items:flex-start} .alert-r{background:var(--red-bg);border:1px solid rgba(255,92,92,.15);color:var(--red)} .alert-a{background:var(--amber-bg);border:1px solid rgba(245,166,35,.15);color:var(--amber)} .alert-g{background:var(--green-bg);border:1px solid rgba(46,204,122,.15);color:var(--green)} .alert-b{background:#0c1c3a;border:1px solid rgba(79,127,255,.15);color:var(--accent)} .tabs{display:flex;gap:3px;background:var(--bg2);padding:4px;border-radius:10px;width:fit-content;border:1px solid var(--border);margin-bottom:18px} .tab{padding:6px 14px;border-radius:7px;font-size:12px;cursor:pointer;color:var(--text3);transition:all .15s} .tab.active{background:var(--accent);color:#fff;font-weight:500} .empty{text-align:center;padding:36px 20px;color:var(--text3)} .empty-icon{font-size:32px;margin-bottom:8px} .empty-text{font-size:13px} .bar-t{background:var(--bg4);border-radius:3px;height:5px;flex:1} .bar-f{height:5px;border-radius:3px} .eq-tag{display:inline-flex;align-items:center;background:var(--bg3);border:1px solid var(--border);border-radius:6px;padding:2px 8px;font-size:11px;color:var(--text2);font-family:'DM Mono',monospace} .info-box{background:var(--amber-bg);border:1px solid rgba(245,166,35,.2);border-radius:8px;padding:8px 12px;font-size:12px;color:var(--amber);margin-top:6px} /* PLANNING ROTATION */ .planning-grid{display:grid;grid-template-columns:repeat(7,1fr);gap:6px;margin-bottom:18px} .planning-day{background:var(--bg3);border:1px solid var(--border);border-radius:10px;overflow:hidden} .planning-day-header{background:var(--bg4);padding:6px 8px;font-size:10px;font-weight:700;text-align:center;color:var(--text2);text-transform:uppercase;letter-spacing:.06em} .planning-day-header.we{background:rgba(79,127,255,.15);color:var(--accent)} .planning-slot{padding:5px 6px;border-bottom:1px solid var(--border)} .planning-slot:last-child{border-bottom:none} .planning-slot-label{font-size:9px;color:var(--text3);text-transform:uppercase;letter-spacing:.05em;margin-bottom:2px} .planning-tech{font-size:11px;font-weight:500;padding:2px 6px;border-radius:4px;display:inline-block} .pm{background:#1a3a6b;color:#7ab4ff} .am{background:#1a4a3a;color:#6dddb0} .jn{background:#3a2a0a;color:#f5a623} .ast{background:#2a0a1a;color:#ff7bab} .abs{background:var(--bg4);color:var(--text3)} /* ARRET DETAIL */ .arret-stat{display:grid;grid-template-columns:repeat(5,1fr);gap:10px;margin-bottom:18px} .astat{background:var(--bg2);border:1px solid var(--border);border-radius:10px;padding:12px 14px;text-align:center} .astat-val{font-size:20px;font-weight:600;margin-bottom:4px} .astat-label{font-size:10px;color:var(--text3);text-transform:uppercase;letter-spacing:.05em} /* DEGRADÉ AUTO TAG */ .auto-tag{display:inline-flex;align-items:center;gap:4px;background:rgba(255,92,92,.1);border:1px solid rgba(255,92,92,.2);border-radius:6px;padding:2px 7px;font-size:10px;color:var(--red);font-weight:600} /* BANDEAU ALARME PANNE LONGUE */ @keyframes alarmBlink{ 0%,100%{background:#dc2626;box-shadow:0 0 12px rgba(220,38,38,.5)} 50%{background:#991b1b;box-shadow:0 0 30px rgba(220,38,38,.8)} } @keyframes alarmIconPulse{ 0%,100%{transform:scale(1)} 50%{transform:scale(1.3)} } .alarm-banner{animation:alarmBlink 1.2s ease-in-out infinite;color:#fff;padding:10px 18px;border-radius:10px;margin-bottom:14px;cursor:pointer;display:flex;align-items:center;gap:12px;transition:transform .1s} .alarm-banner:hover{transform:scale(1.01)} .alarm-banner .alarm-icon{font-size:22px;animation:alarmIconPulse 1.2s ease-in-out infinite} .alarm-banner .alarm-text{flex:1} .alarm-banner .alarm-title{font-size:14px;font-weight:700;letter-spacing:.03em;text-transform:uppercase} .alarm-banner .alarm-detail{font-size:11px;opacity:.9;margin-top:2px} .alarm-banner .alarm-count{background:rgba(255,255,255,.25);border-radius:8px;padding:4px 12px;font-size:18px;font-weight:800;min-width:36px;text-align:center} /* Compteur menu pannes longues */ .nav-alarm-badge{background:#dc2626;color:#fff;font-size:9px;font-weight:700;padding:1px 6px;border-radius:10px;margin-left:4px;animation:alarmBlink 1.2s ease-in-out infinite} /* ─── Planning des équipes ─────────────────────────────────────────────────── * Les onze codes de rotation. Le monolithe les définissait dans un second bloc *