/* E-Justice Chaîne pénale — module Instruction (gabarit de la maquette) */
@font-face{font-family:'Material Symbols Outlined';font-style:normal;font-weight:100 700;src:url(fonts/material-symbols-outlined.woff2) format('woff2')}
@font-face{font-family:'Inter';font-weight:400;src:url(fonts/inter-latin-400-normal.woff2) format('woff2')}
@font-face{font-family:'Inter';font-weight:500;src:url(fonts/inter-latin-500-normal.woff2) format('woff2')}
@font-face{font-family:'Inter';font-weight:600;src:url(fonts/inter-latin-600-normal.woff2) format('woff2')}
@font-face{font-family:'Inter';font-weight:700;src:url(fonts/inter-latin-700-normal.woff2) format('woff2')}
@font-face{font-family:'Roboto';font-weight:400;src:url(fonts/roboto-latin-400-normal.woff2) format('woff2')}
@font-face{font-family:'Roboto';font-weight:500;src:url(fonts/roboto-latin-500-normal.woff2) format('woff2')}
@font-face{font-family:'Roboto';font-weight:700;src:url(fonts/roboto-latin-700-normal.woff2) format('woff2')}
.ms{font-family:'Material Symbols Outlined';font-weight:normal;font-style:normal;font-size:24px;line-height:1;letter-spacing:normal;text-transform:none;display:inline-block;white-space:nowrap;direction:ltr;-webkit-font-smoothing:antialiased;font-variation-settings:'FILL' 0,'wght' 400,'GRAD' 0,'opsz' 24;vertical-align:middle}
.ms.fill{font-variation-settings:'FILL' 1,'wght' 400,'GRAD' 0,'opsz' 24}
:root{--green:#008a3e;--green-d:#006b30;--green-50:#e8f5ee;--gold:#f5c400;--red:#ef2b2d;--blue:#1976d2;--ink:#1f2937;--muted:#6b7280;--line:#e5e7eb;--bg:#f5f5f5;--info-bg:#eef5ff;--info-ink:#1e40af}
*{box-sizing:border-box}
html,body{margin:0;padding:0}
body{font-family:"Times New Roman",Times,serif;background:var(--bg);color:#222;font-size:14px}
a{color:var(--blue)}
/* ---- barre supérieure ---- */
.cp-top{position:sticky;top:0;z-index:50}
.cp-flag{height:5px;background:linear-gradient(90deg,#d62828 0 50%,#f2d43a 50% 100%)}
.cp-toolbar{height:72px;background:var(--green);color:#fff;display:flex;align-items:center;padding:0 28px 0 32px;gap:18px;position:relative;font-family:Roboto,sans-serif;box-shadow:0 2px 4px rgba(0,0,0,.18)}
.cp-toolbar .ms{font-size:30px}
.cp-toolbar .brand-ic{color:var(--gold);font-size:38px}
.cp-toolbar .title{font-size:21px;font-weight:500;letter-spacing:.1px}
.cp-toolbar .star{position:absolute;left:49.3%;top:6px;color:#e2c33a;font-size:18px}
.cp-toolbar .sp{flex:1}
.cp-toolbar .tb-btn{background:none;border:0;color:#fff;cursor:pointer;position:relative;padding:6px;margin-left:14px}
.cp-toolbar .dot{position:absolute;top:6px;right:7px;width:8px;height:8px;border-radius:50%;background:#ff3b3b}
.cp-avatar{width:46px;height:46px;border-radius:50%;background:linear-gradient(135deg,#7b61ff,#5a4fcf);color:#fff;display:flex;align-items:center;justify-content:center;font:700 16px Roboto,sans-serif;margin-left:22px;cursor:pointer;border:2px solid rgba(255,255,255,.35)}
.cp-userbox{position:absolute;right:20px;top:66px;background:#fff;color:#222;border-radius:10px;box-shadow:0 8px 30px rgba(0,0,0,.18);width:270px;font-family:Roboto,sans-serif;display:none;z-index:60;overflow:hidden}
.cp-userbox.open{display:block}
.cp-userbox .ub-h{padding:16px;border-bottom:1px solid var(--line)}
.cp-userbox .ub-h b{display:block;font-size:15px}
.cp-userbox .ub-h small{color:var(--muted)}
.cp-userbox a{display:flex;gap:10px;align-items:center;padding:11px 16px;color:#333;text-decoration:none;font-size:14px}
.cp-userbox a:hover{background:#f3f4f6}
/* ---- fil d'Ariane ---- */
.cp-crumbs{background:#f8f9fb;border-bottom:1px solid #eceff3;height:62px;display:flex;align-items:center;padding:0 46px;gap:16px;font-size:16px;color:#444}
.cp-crumbs .ms{font-size:20px;color:#9aa0a6}
.cp-crumbs .home{color:#1a73e8;font-size:26px}
.cp-crumbs a{color:var(--blue);text-decoration:underline;text-decoration-color:rgba(25,118,210,.35)}
/* ---- tiroir de navigation ---- */
.cp-drawer{position:fixed;top:77px;left:0;bottom:0;width:300px;background:#fff;box-shadow:4px 0 24px rgba(0,0,0,.15);transform:translateX(-105%);transition:transform .25s;z-index:45;overflow:auto;font-family:Roboto,sans-serif;padding:10px 0}
.cp-drawer.open{transform:none}
.cp-drawer .dg{font:600 11px Inter,sans-serif;color:#6b7280;text-transform:uppercase;letter-spacing:.06em;padding:14px 22px 6px}
.cp-drawer a{display:flex;gap:14px;align-items:center;padding:10px 22px;color:#2d3748;text-decoration:none;font-size:14px}
.cp-drawer a .ms{font-size:21px;color:#4b5563}
.cp-drawer a:hover{background:#f1f5f2}
.cp-drawer a.on{background:var(--green-50);color:var(--green-d);font-weight:500;border-right:3px solid var(--green)}
.cp-drawer a.on .ms{color:var(--green)}
/* ---- contenu ---- */
.cp-main{padding:42px 36px 40px 36px;min-height:calc(100vh - 77px - 62px - 60px)}
.cp-wrap{max-width:1316px;margin:0 auto}
.cp-foot{background:#f8f9fb;border-top:1px solid #eceff3;height:60px;display:flex;align-items:center;justify-content:space-between;padding:0 30px 0 38px;font-size:14.5px;color:#444}
.cp-foot nav{display:flex;gap:26px}
.cp-foot a{color:var(--blue);text-decoration:none}
/* ---- en-tête de page liste ---- */
.ph{display:flex;align-items:flex-start;gap:20px;margin:12px 0 32px;font-family:Inter,sans-serif}
.ph .tile{width:50px;height:50px;border-radius:9px;background:#e6f4ec;color:var(--green);display:flex;align-items:center;justify-content:center;flex:none;margin-top:6px}
.ph .tile .ms{font-size:28px}
.ph h1{font:600 25px Inter,sans-serif;color:#1f2937;margin:0 0 10px;letter-spacing:-.2px}
.ph p{margin:0;color:#6b7280;font-size:14.5px}
.ph .act{margin-left:auto;display:flex;align-items:center;gap:22px;margin-top:2px}
.pill-wait{display:inline-flex;align-items:center;gap:8px;background:#effaf3;color:#15803d;border-radius:20px;padding:7px 14px;font:500 14px Inter,sans-serif}
.pill-wait:before{content:"";width:8px;height:8px;border-radius:50%;background:#22c55e}
.pill-wait.warn{background:#fff7e6;color:#b45309}.pill-wait.warn:before{background:#f59e0b}
.btn-o{display:inline-flex;align-items:center;gap:8px;background:#fff;border:1px solid #d1d5db;border-radius:7px;padding:10px 16px;font:500 14.5px Inter,sans-serif;color:#1f2937;cursor:pointer;box-shadow:0 1px 2px rgba(0,0,0,.08);text-decoration:none}
.btn-o .ms{font-size:22px}
.btn-o:hover{background:#f9fafb}
.btn-g{display:inline-flex;align-items:center;justify-content:center;gap:8px;background:var(--green);border:1px solid var(--green);border-radius:7px;padding:10px 18px;font:600 14.5px Inter,sans-serif;color:#fff;cursor:pointer;text-decoration:none;box-shadow:0 1px 2px rgba(0,0,0,.12)}
.btn-g:hover{background:var(--green-d)}
.btn-g .ms{font-size:20px}
.btn-red{background:#d62828;border-color:#d62828}.btn-red:hover{background:#b91c1c}
.btn-sm{padding:7px 13px;font-size:13.5px}
.info{display:flex;gap:14px;align-items:flex-start;background:var(--info-bg);color:var(--info-ink);border-radius:8px;padding:16px 20px;font:400 14px/1.55 Inter,sans-serif;margin-bottom:24px}
.info .ms{color:#2563eb;font-size:24px}
.info.green{background:#f1fbf4;border:2px solid #4ade80;color:#1f2937}
.info.green .ms{color:#15803d}
.info.warn{background:#fff8eb;color:#92400e}.info.warn .ms{color:#d97706}
/* ---- filtres ---- */
.card{background:#fff;border-radius:8px;box-shadow:0 1px 3px rgba(0,0,0,.06);margin-bottom:22px;font-family:Inter,sans-serif}
.filters{padding:20px 18px 18px}
.filters .ft{display:flex;align-items:center;gap:10px;font:600 14px Inter,sans-serif;color:#1f2937;margin:2px 0 18px 4px}
.filters .ft .ms{font-size:22px;color:#4b5563}
.frow{display:flex;gap:16px;align-items:flex-end}
.fld{display:flex;flex-direction:column;gap:6px}
.fld label{font:600 11.5px Inter,sans-serif;color:#4b5563;text-transform:uppercase;letter-spacing:.03em}
.fld input,.fld select,.fld textarea{font:400 14px Inter,sans-serif;border:1px solid #d1d5db;border-radius:6px;padding:9px 11px;color:#111;background:#fff;height:40px}
.fld textarea{height:auto;min-height:90px;resize:vertical;line-height:1.5}
.fld input::placeholder{color:#9ca3af}
.btn-reset{border:1px solid #9ca3af;background:#f9fafb;border-radius:6px;padding:9px 14px;font:500 14px Inter,sans-serif;color:#1f2937;height:40px;cursor:pointer;box-shadow:inset 0 -1px 0 rgba(0,0,0,.08)}
.btn-apply{border:1px solid var(--green);background:var(--green);border-radius:6px;padding:9px 18px;font:600 14px Inter,sans-serif;color:#fff;height:40px;cursor:pointer}
/* ---- résultats ---- */
.res-h{display:flex;justify-content:space-between;align-items:center;padding:18px 18px;font:600 15px Inter,sans-serif;color:#1f2937}
.res-h small{font:400 13.5px Inter,sans-serif;color:#4b5563}
table.cp{width:100%;border-collapse:collapse;font:400 14px Inter,sans-serif}
table.cp thead th{background:#ecf7f0;color:#14532d;font:600 13.5px Inter,sans-serif;text-align:left;padding:13px 16px;border-bottom:1px solid #d6eadc}
table.cp td{padding:14px 16px;border-bottom:1px solid #eef0f2;color:#1f2937;vertical-align:middle}
table.cp tbody tr:hover{background:#fafcfb}
.ref{font-weight:600;color:#111}
.sub{color:#6b7280;font-size:12.5px}
.chip{display:inline-flex;align-items:center;gap:5px;border-radius:14px;padding:4px 10px;font:500 12.5px Inter,sans-serif;white-space:nowrap}
.chip.g{background:#e7f6ec;color:#166534}.chip.o{background:#fff3e0;color:#b45309}.chip.r{background:#fde8e8;color:#b91c1c}.chip.b{background:#e8f0fe;color:#1d4ed8}.chip.n{background:#f1f2f4;color:#4b5563}.chip.p{background:#f3e8ff;color:#6b21a8}
.btn-traiter{display:inline-flex;align-items:center;gap:6px;background:var(--green);color:#fff;border:0;border-radius:6px;padding:8px 14px;font:600 13.5px Inter,sans-serif;cursor:pointer;text-decoration:none}
.btn-traiter .ms{font-size:18px}
.empty{padding:34px;text-align:center;color:#6b7280;font:400 14px Inter,sans-serif}
/* ---- formulaires « Material » ---- */
.mf{position:relative;margin-bottom:22px;font-family:Roboto,sans-serif}
.mf input,.mf select,.mf textarea{width:100%;border:1px solid #9aa0a6;border-radius:5px;padding:16px 14px 14px;font:400 16px Roboto,sans-serif;color:#1f2937;background:#fff;outline:none}
.mf textarea{min-height:110px;line-height:1.5;resize:vertical}
.mf select{appearance:none;background:#fff url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24'%3E%3Cpath d='M7 10l5 5 5-5z' fill='%23555'/%3E%3C/svg%3E") no-repeat right 10px center;padding-right:40px}
.mf label{position:absolute;left:10px;top:-9px;background:#fff;padding:0 5px;font:400 13px Roboto,sans-serif;color:#5f6368}
.mf input:focus,.mf select:focus,.mf textarea:focus{border:2px solid var(--green)}
.mf .hint{font:400 12px Roboto,sans-serif;color:#6b7280;margin:5px 2px 0}
.req:after{content:" *";color:#d32f2f}
.grid2{display:grid;grid-template-columns:1fr 1fr;gap:0 20px}
.grid3{display:grid;grid-template-columns:1fr 1fr 1fr;gap:0 20px}
.sect{background:#fff;border-radius:10px;box-shadow:0 1px 3px rgba(0,0,0,.07);padding:26px 28px 8px;margin-bottom:22px}
.sect h3{font:600 17px Inter,sans-serif;color:#1f2937;margin:0 0 20px;display:flex;align-items:center;gap:10px}
.sect h3 .ms{color:var(--green);font-size:24px}
.sect h3 .n{width:26px;height:26px;border-radius:50%;background:var(--green);color:#fff;font:600 13px Inter,sans-serif;display:inline-flex;align-items:center;justify-content:center}
.back{display:inline-flex;align-items:center;gap:6px;color:var(--green);font:600 14.5px Inter,sans-serif;text-decoration:none;margin-bottom:14px}
.back .ms{font-size:20px}
.form-head{display:flex;align-items:flex-start;gap:16px;margin-bottom:22px}
.form-head h2{font:700 24px "Times New Roman",serif;color:var(--green-d);margin:0 0 6px}
.form-head p{margin:0;color:#555;font-size:15px}
.form-head .tile{width:50px;height:50px;border-radius:9px;background:#e6f4ec;color:var(--green);display:flex;align-items:center;justify-content:center;flex:none}
.actions-bar{display:flex;justify-content:flex-end;gap:12px;padding:6px 0 30px}
.radio-cards{display:grid;gap:14px;margin-bottom:20px}
.rc{border:1.5px solid #d1d5db;border-radius:10px;padding:16px 18px;display:flex;gap:14px;align-items:flex-start;cursor:pointer;background:#fff;font-family:Inter,sans-serif}
.rc input{margin-top:3px;accent-color:var(--green);width:18px;height:18px}
.rc b{display:block;font:600 15px Inter,sans-serif;color:#1f2937;margin-bottom:3px}
.rc span{color:#6b7280;font-size:13.5px}
.rc.on,.rc:has(input:checked){border-color:var(--green);background:#f3fbf6}
.kv{display:grid;grid-template-columns:200px 1fr;gap:10px 18px;font:400 14.5px Inter,sans-serif;margin-bottom:18px}
.kv dt{color:#6b7280}.kv dd{margin:0;color:#111;font-weight:500}
.tabs{display:flex;gap:6px;border-bottom:1px solid #e5e7eb;margin-bottom:22px;font-family:Roboto,sans-serif}
.tabs button{background:none;border:0;padding:13px 18px;font:500 14.5px Roboto,sans-serif;color:#5f6368;cursor:pointer;border-bottom:3px solid transparent;display:inline-flex;gap:8px;align-items:center}
.tabs button .ms{font-size:20px}
.tabs button.on{color:var(--green-d);border-bottom-color:var(--green)}
.tabpane{display:none}.tabpane.on{display:block}
.timeline{border-left:2px solid #d1e7d9;margin-left:10px;padding-left:22px;font-family:Inter,sans-serif}
.timeline .ti{position:relative;margin-bottom:18px}
.timeline .ti:before{content:"";position:absolute;left:-29px;top:3px;width:12px;height:12px;border-radius:50%;background:var(--green);border:2px solid #fff;box-shadow:0 0 0 2px #b7dfc4}
.timeline .ti b{display:block;font-weight:600;color:#1f2937;font-size:14.5px}
.timeline .ti small{color:#6b7280;font-size:13px}
.toast{position:fixed;right:26px;top:94px;background:#14532d;color:#fff;border-radius:8px;padding:14px 18px;font:500 14px Inter,sans-serif;box-shadow:0 8px 24px rgba(0,0,0,.2);display:none;z-index:70;align-items:center;gap:10px}
.toast.show{display:flex}
.doc-paper{background:#fff;border:1px solid #e5e7eb;border-radius:6px;padding:46px 56px;font:400 15px/1.7 "Times New Roman",serif;color:#111;box-shadow:0 2px 10px rgba(0,0,0,.05)}
.doc-paper h4{text-align:center;font:700 18px "Times New Roman",serif;text-decoration:underline;margin:18px 0}
.doc-paper .hdr{display:flex;justify-content:space-between;font:700 13px "Times New Roman",serif;text-transform:uppercase;line-height:1.5}
.sig{display:flex;align-items:center;gap:10px;border:1.5px dashed #86c79f;border-radius:8px;padding:12px 16px;background:#f6fcf8;font:500 14px Inter,sans-serif;color:#166534}