/* ============================================================
   entretiens.css — Entretiens refaits (planche v7 validée par Mika, 29/10/2026)
   Les règles de la planche (_maquettes/planche-entretiens-29102026.html), limitées au conteneur .en-root :
   rien ne change ailleurs dans le HUB. Couleurs = celles du HUB (css/style.css :root) ; --bleu = le bleu de l'araignée du salarié.
   Fichier tiré de la planche par un script : retouche-le à la main, il n'est pas régénéré.
   ============================================================ */
.en-root { --primary:#6c5ce7;--primary-dark:#5a48d6;--primary-soft:#efedff;--primary-soft-2:#f6f5ff; --bg:#f4f5fa;--surface:#fff;--surface-2:#fafbfd; --text:#1d2033;--text-2:#5b6075;--text-3:#9398ad;--border:#ebecf3;--border-2:#e1e2ec; --success:#20bf73;--success-soft:#e4f8ee;--warning:#f3a712;--warning-soft:#fdf1d8;--danger:#f0506e;--danger-soft:#fde6ea; --shadow-sm:0 1px 2px rgba(29,32,51,.06),0 1px 3px rgba(29,32,51,.05);--shadow-md:0 4px 14px rgba(29,32,51,.08);--shadow-lg:0 12px 40px rgba(29,32,51,.16); --annuel:linear-gradient(120deg,#6c5ce7 0%,#4a7de9 55%,#38b2d8 100%); --pro:linear-gradient(120deg,#e17055 0%,#d63d84 55%,#8854d0 100%); --bleu:#4a7de9; }
.en-root .chip { display:inline-flex;align-items:center;gap:5px;height:24px;border-radius:999px;padding:0 10px;font-size:11.5px;font-weight:800;line-height:1;white-space:nowrap }
.en-root .chip--annuel { background:var(--primary-soft);color:var(--primary-dark) }
.en-root .chip--pro { background:#fbe9ef;color:#c2366f }
.en-root .chip--ok { background:var(--success-soft);color:#13894f }
.en-root .chip--warn { background:var(--warning-soft);color:#a86d00 }
.en-root .chip--off { background:#eef0f5;color:var(--text-2) }
.en-root .chip--danger { background:var(--danger-soft);color:#c43553 }
.en-root .av { width:42px;height:42px;border-radius:50%;display:grid;place-items:center;color:#fff;font-weight:900;font-size:14px;flex:0 0 auto;background:var(--annuel);box-shadow:0 4px 10px rgba(74,125,233,.25) }
.en-root .av--pro { background:var(--pro) }
.en-root .av--sm { width:30px;height:30px;font-size:11px }
.en-root .l-top { display:flex;align-items:center;gap:12px;flex-wrap:wrap;margin-bottom:14px }
.en-root .l-top h3 { font-size:22px;font-weight:900;margin-right:auto }
.en-root .search { display:flex;align-items:center;gap:8px;background:var(--surface);border:1px solid var(--border-2);border-radius:10px;padding:7px 12px;color:var(--text-3);min-width:240px }
.en-root .kpis { display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:12px;margin-bottom:14px }
.en-root .kpi { background:var(--surface);border:1px solid var(--border);border-radius:14px;padding:12px 14px;display:flex;gap:12px;align-items:center }
.en-root .kpi__ic { width:38px;height:38px;border-radius:11px;display:grid;place-items:center;font-size:19px }
.en-root .kpi__v { font-size:22px;font-weight:900;line-height:1 }
.en-root .kpi__l { font-size:12px;color:var(--text-2);font-weight:600 }
.en-root .retard { background:var(--surface);border:1px solid var(--border);border-left:5px solid var(--warning);border-radius:14px;padding:12px 14px;margin-bottom:14px }
.en-root .retard__t { display:flex;align-items:center;gap:10px;flex-wrap:wrap;font-weight:800 }
.en-root .retard__t span.s { font-weight:600;color:var(--text-2);font-size:12.5px }
.en-root .retard__gens { display:flex;flex-wrap:wrap;gap:8px;margin-top:10px }
.en-root .pers { display:inline-flex;align-items:center;gap:7px;background:var(--surface-2);border:1px solid var(--border);border-radius:999px;padding:3px 10px 3px 3px;font-size:12.5px;font-weight:700 }
.en-root .pers small { color:var(--text-3);font-weight:600 }
.en-root .annee { display:flex;align-items:center;gap:10px;margin:18px 0 10px;font-weight:900;font-size:15px }
.en-root .annee::after { content:"";flex:1;height:1px;background:var(--border-2) }
.en-root .annee small { font-weight:600;color:var(--text-3);font-size:12px }
.en-root .carte { background:var(--surface);border:1px solid var(--border);border-radius:16px;padding:14px 18px;display:grid;grid-template-columns:44px minmax(0,1fr) 150px 300px 230px;grid-template-areas:"av id date et act";column-gap:18px;row-gap:12px;align-items:center;margin-bottom:10px;box-shadow:var(--shadow-sm) }
.en-root .carte>.av { grid-area:av }
.en-root .carte__id { grid-area:id;min-width:0 }
.en-root .carte__date { grid-area:date }
.en-root .carte>.etapes, .en-root .carte>.carte__info { grid-area:et }
.en-root .carte__act { grid-area:act }
.en-root .carte:hover { border-color:var(--primary);box-shadow:0 6px 22px rgba(108,92,231,.14) }
.en-root .carte__nom { font-weight:900;font-size:15px;line-height:1.25;white-space:nowrap;overflow:hidden;text-overflow:ellipsis }
.en-root .tags { display:flex;flex-wrap:wrap;gap:6px;margin-top:7px;align-items:center }
.en-root .tag { display:inline-flex;align-items:center;gap:5px;height:24px;border-radius:999px;padding:0 10px;font-size:11.5px;font-weight:700;color:var(--text-2);background:var(--surface-2);border:1px solid var(--border);line-height:1;white-space:nowrap }
.en-root .carte__motif { font-size:12px;color:var(--text-2);margin-top:6px }
.en-root .carte__date { font-weight:800;line-height:1.3 }
.en-root .carte__date small { display:block;font-weight:600;color:var(--text-3);font-size:12px }
.en-root .etapes { display:grid;grid-template-columns:repeat(4,minmax(0,1fr));width:100% }
.en-root .et { position:relative;display:flex;flex-direction:column;align-items:center;gap:5px;font-size:10.5px;font-weight:700;color:var(--text-3);text-align:center }
.en-root .et::before { content:"";position:absolute;top:6px;right:50%;width:100%;height:2px;background:var(--border-2) }
.en-root .et:first-child::before { display:none }
.en-root .et.fait::before, .en-root .et.ici::before { background:var(--success) }
.en-root .et i { position:relative;z-index:1;width:14px;height:14px;border-radius:50%;background:var(--border-2);display:block }
.en-root .et.fait i { background:var(--success) }
.en-root .et.ici i { background:var(--primary);box-shadow:0 0 0 4px var(--primary-soft) }
.en-root .et.ici { color:var(--primary) }
.en-root .et.fait { color:#13894f }
.en-root .carte__info { font-size:12.5px;color:var(--text-2);background:var(--surface-2);border-radius:10px;padding:8px 12px }
.en-root .carte__act { display:flex;gap:6px;align-items:center;justify-content:flex-end;flex-wrap:wrap }
.en-root .carte--annule { background:var(--surface-2) }
.en-root .carte--annule .av { filter:grayscale(.6);opacity:.7 }
.en-root .carte--annule .carte__nom { color:var(--text-2) }
.en-root .carte--mini { grid-template-columns:44px minmax(0,1fr) auto;grid-template-areas:"av id act" }
.en-root .regime { display:flex;align-items:center;gap:10px;flex-wrap:wrap;color:var(--text-2);font-size:12.5px;margin-top:16px;padding:10px 14px;border:1px dashed var(--border-2);border-radius:12px }
.en-root .stepper { display:flex;gap:6px;flex-wrap:wrap;margin-bottom:14px }
.en-root .step { display:flex;align-items:center;gap:8px;background:var(--surface);border:1px solid var(--border);border-radius:999px;padding:6px 14px 6px 6px;font-weight:800;font-size:13px;color:var(--text-3) }
.en-root .step b { width:24px;height:24px;border-radius:50%;display:grid;place-items:center;background:var(--border);color:var(--text-2);font-size:12px }
.en-root .step.ici { border-color:var(--primary);color:var(--primary);box-shadow:0 4px 14px rgba(108,92,231,.15) }
.en-root .step.ici b { background:var(--primary);color:#fff }
.en-root .step.fait { color:#13894f }
.en-root .step.fait b { background:var(--success);color:#fff }
.en-root .hero { border-radius:18px;padding:18px 22px;color:#fff;background:var(--annuel);display:flex;gap:16px;align-items:center;flex-wrap:wrap;box-shadow:0 10px 30px rgba(30,30,60,.18);position:relative;overflow:hidden;margin-bottom:16px }
.en-root .hero::before { content:"";position:absolute;inset:0;background:radial-gradient(circle at 88% -20%,rgba(255,255,255,.28),transparent 42%),radial-gradient(circle at 8% 120%,rgba(255,255,255,.16),transparent 40%);pointer-events:none }
.en-root .hero .av { border:3px solid rgba(255,255,255,.85);width:56px;height:56px;font-size:18px;background:rgba(255,255,255,.2) }
.en-root .hero__id { flex:1;min-width:220px;position:relative }
.en-root .hero__nom { font-size:22px }
.en-root .hero__nom b { font-weight:900 }
.en-root .hchip { display:inline-block;background:rgba(255,255,255,.18);border:1px solid rgba(255,255,255,.35);border-radius:999px;padding:3px 11px;font-size:12px;font-weight:800;margin:6px 6px 0 0 }
.en-root .hero__cote { position:relative;display:grid;gap:6px;justify-items:end }
.en-root .hero__cote label { font-size:11px;font-weight:800;text-transform:uppercase;letter-spacing:.08em;opacity:.85 }
.en-root .hdate { border:1px solid rgba(255,255,255,.45);background:rgba(255,255,255,.16);border-radius:10px;padding:7px 12px;font-weight:800 }
.en-root .sapr { display:flex;align-items:center;gap:10px;background:rgba(255,255,255,.16);border:1px solid rgba(255,255,255,.35);border-radius:12px;padding:8px 12px;font-size:12.5px;font-weight:700 }
.en-root .sapr .bar { width:110px;height:7px;border-radius:9px;background:rgba(255,255,255,.25);overflow:hidden }
.en-root .sapr .bar i { display:block;height:100%;width:66%;background:#fff;border-radius:9px }
.en-root .q { background:var(--surface);border:1px solid var(--border);border-radius:16px;padding:16px 18px;margin-bottom:12px }
.en-root .q:focus-within { border-color:var(--primary) }
.en-root .q__h { display:flex;align-items:center;gap:10px;margin-bottom:10px;flex-wrap:wrap }
.en-root .q__num { font-size:12px;font-weight:900;color:var(--primary);background:var(--primary-soft);border-radius:8px;padding:3px 8px }
.en-root .q__ic { font-size:19px }
.en-root .q__lab { font-weight:900;font-size:15.5px;flex:1;min-width:240px }
.en-root .prive { display:inline-flex;align-items:center;gap:5px;background:var(--primary-soft-2);border:1px solid var(--primary-soft);color:var(--primary-dark);border-radius:999px;padding:3px 10px;font-size:11.5px;font-weight:800 }
.en-root .ta { width:100%;min-height:150px;border:1px solid var(--border-2);background:var(--surface-2);border-radius:12px;padding:12px 14px;font:inherit;font-size:15px;line-height:1.6;color:var(--text);resize:vertical }
.en-root .ta--grand { min-height:190px }
.en-root .ta::placeholder { color:var(--text-3);font-style:italic }
.en-root .q__pied { display:flex;justify-content:space-between;font-size:11.5px;color:var(--text-3);margin-top:6px }
.en-root .plus { background:var(--surface);border:1px dashed var(--border-2);border-radius:14px;padding:12px;text-align:center;color:var(--text-2);font-weight:700;margin-bottom:12px }
.en-root .barre { display:flex;gap:8px;justify-content:flex-end;flex-wrap:wrap;margin-top:6px }
.en-root .deux { display:grid;grid-template-columns:1fr 1fr;gap:10px;margin-bottom:10px }
.en-root .src { border-radius:12px;padding:10px 12px;font-size:13.5px;line-height:1.55 }
.en-root .src__t { font-size:11px;font-weight:900;text-transform:uppercase;letter-spacing:.06em;margin-bottom:4px;display:flex;gap:6px;align-items:center }
.en-root .src--sal { background:#eaf1fd;border:1px solid #d3e2fb }
.en-root .src--sal .src__t { color:var(--bleu) }
.en-root .src--mgr { background:var(--primary-soft-2);border:1px solid var(--primary-soft) }
.en-root .src--mgr .src__t { color:var(--primary-dark) }
.en-root .retient { font-size:11px;font-weight:900;text-transform:uppercase;letter-spacing:.06em;color:#13894f;margin:4px 0 6px;display:flex;align-items:center;gap:6px }
.en-root .ta--final { border-color:#bfe9d3;background:#f7fdf9 }
.en-root .who { display:inline-block;font-weight:900 }
.en-root .comp { background:var(--surface);border:1px solid var(--border);border-left:5px solid var(--primary);border-radius:16px;padding:16px 18px;margin-bottom:12px }
.en-root .comp__t { font-size:16px;font-weight:900;display:flex;align-items:center;gap:8px;flex-wrap:wrap;margin-bottom:12px }
.en-root .comp__g { display:grid;grid-template-columns:1.25fr 1fr;gap:20px;align-items:center }
.en-root .crow { display:grid;grid-template-columns:170px 1fr;align-items:center;gap:10px;padding:7px 0;border-bottom:1px solid var(--border) }
.en-root .crow:last-child { border-bottom:0 }
.en-root .crow__n { font-weight:800;font-size:13.5px;display:flex;align-items:center;gap:7px }
.en-root .pts { display:flex;gap:6px;align-items:center;flex-wrap:wrap }
.en-root .pt { width:34px;height:34px;border-radius:50%;border:2px solid var(--border-2);display:grid;place-items:center;font-weight:900;font-size:13px;color:var(--text-3);background:var(--surface) }
.en-root .pt.on { background:var(--primary);border-color:var(--primary);color:#fff }
.en-root .pt.an { border-color:var(--text-3);border-style:dashed }
.en-root .pts small { color:var(--text-2);font-size:12px;font-weight:700;margin-left:6px }
.en-root .auto { display:flex;flex-direction:column;gap:2px }
.en-root .auto__l { font-size:12px;color:var(--text-2) }
.en-root .echelle { display:flex;flex-wrap:wrap;gap:6px 14px;font-size:11.5px;color:var(--text-2);margin-top:10px }
.en-root .echelle b { color:var(--primary) }
.en-root .radar-box { display:flex;flex-direction:column;align-items:center;gap:6px }
.en-root .leg { display:flex;gap:14px;font-size:12px;font-weight:700;color:var(--text-2);flex-wrap:wrap;justify-content:center }
.en-root .leg i { display:inline-block;width:18px;height:3px;border-radius:2px;vertical-align:middle;margin-right:5px }
.en-root .sig { display:grid;grid-template-columns:1fr 1fr;gap:14px }
.en-root .sigecran { background:var(--surface);border:1px solid var(--border);border-radius:18px;padding:22px;box-shadow:var(--shadow-md) }
.en-root .sigecran__t { font-size:18px;font-weight:900 }
.en-root .sigecran p { color:var(--text-2);margin:4px 0 12px }
.en-root .cache { display:flex;align-items:center;gap:8px;background:var(--surface-2);border:1px dashed var(--border-2);border-radius:12px;padding:10px 14px;color:var(--text-2);font-weight:700;margin-bottom:14px }
.en-root .pad { background:var(--surface);border:2px dashed var(--border-2);border-radius:14px;height:150px;position:relative;display:grid;place-items:center;color:var(--text-3);font-weight:700 }
.en-root .pad svg { position:absolute;inset:0;width:100%;height:100% }
.en-root .pad__l { position:absolute;left:12px;top:8px;font-size:12px;font-weight:900;color:var(--text-2) }
.en-root .relu { display:flex;align-items:center;gap:8px;font-weight:700;margin:12px 0 }
.en-root .box { width:18px;height:18px;border-radius:5px;background:var(--success);display:grid;place-items:center;color:#fff;font-size:12px }
.en-root .doc { background:var(--surface);border:1px solid var(--border);border-radius:14px;padding:14px 18px;margin-bottom:14px;font-size:13px;color:var(--text-2);max-height:230px;overflow:hidden;position:relative }
.en-root .doc::after { content:"";position:absolute;left:0;right:0;bottom:0;height:60px;background:linear-gradient(transparent,var(--surface)) }
.en-root .doc h5 { font-size:13px;color:var(--text);font-weight:900;margin:8px 0 2px }
.en-root .tile { border-radius:18px;padding:14px;color:#fff;background:var(--annuel);box-shadow:0 8px 20px rgba(74,125,233,.25) }
.en-root .tile h4 { font-size:15px;font-weight:900;margin:2px 0 }
.en-root .tile p { font-size:12.5px;opacity:.95 }
.en-root .tile .btn { margin-top:10px;background:#fff;color:var(--primary-dark);border:0 }
.en-root .tile--signe { background:linear-gradient(120deg,#20bf73,#38b2d8) }
.en-root .apps { display:grid;grid-template-columns:repeat(4,1fr);gap:8px }
.en-root .apps i { aspect-ratio:1;border-radius:14px;background:var(--surface);border:1px solid var(--border);display:grid;place-items:center;font-style:normal;font-size:20px }
.en-root .mq { background:var(--surface);border:1px solid var(--border);border-radius:14px;padding:10px }
.en-root .mq__l { font-weight:900;font-size:13px;margin-bottom:6px }
.en-root .mq__ta { background:var(--surface-2);border:1px solid var(--border-2);border-radius:10px;min-height:86px;padding:8px 10px;font-size:13px;color:var(--text) }
.en-root .mq__ta--vide { color:var(--text-3);font-style:italic }
.en-root .ok { color:#13894f;font-size:12px;font-weight:800 }
.en-root .info { background:var(--primary-soft-2);border-radius:12px;padding:9px 11px;font-size:12px;color:var(--text-2) }
.en-root .gele { background:#eef0f5;border-radius:12px;padding:10px;font-size:12.5px;color:var(--text-2);display:flex;gap:8px }
.en-root .modal { max-width:520px;background:var(--surface);border-radius:18px;box-shadow:var(--shadow-lg);padding:20px;margin:0 auto }
.en-root .modal h4 { font-size:18px;font-weight:900;margin-bottom:4px }
.en-root .modal p { color:var(--text-2);font-size:13px }
.en-root .field { margin-top:12px }
.en-root .field label { display:block;font-weight:800;font-size:12.5px;margin-bottom:5px }
.en-root .select { border:1px solid var(--border-2);border-radius:10px;padding:9px 12px;background:var(--surface);display:flex;justify-content:space-between }
.en-root .motifs { display:flex;flex-wrap:wrap;gap:6px }
.en-root .motif { border:1px solid var(--border-2);border-radius:999px;padding:5px 12px;font-size:12.5px;font-weight:700 }
.en-root .motif.on { background:var(--primary);border-color:var(--primary);color:#fff }
.en-root .inp { border:1px solid var(--border-2);border-radius:10px;padding:9px 12px;color:var(--text-3);font-style:italic }
.en-root .coche { display:flex;gap:8px;align-items:center;font-weight:700;font-size:13px;margin-top:12px }
.en-root .modal__pied { display:flex;justify-content:flex-end;gap:8px;margin-top:18px }
.en-root .cote { display:grid;grid-template-columns:1fr 1fr;gap:18px;align-items:start }
.en-root .syn { display:grid;grid-template-columns:minmax(0,1fr);gap:16px }
.en-root .syn>.card { min-width:0;overflow-x:auto }
.en-root .card { background:var(--surface);border:1px solid var(--border);border-radius:16px;padding:16px }
.en-root .card h4 { font-size:15px;font-weight:900;margin-bottom:10px;display:flex;gap:8px;align-items:center }
.en-root table.mat { width:100%;border-collapse:collapse;font-size:13px }
.en-root .mat th { font-size:10.5px;font-weight:900;color:var(--text-2);text-transform:uppercase;letter-spacing:.04em;padding:4px;text-align:center;vertical-align:bottom }
.en-root .mat th:first-child { text-align:left }
.en-root .mat td { text-align:center;font-weight:900;padding:9px 0;border-bottom:1px solid #eef0f5 }
.en-root .mat td:first-child { text-align:left;font-weight:800;padding-left:4px;white-space:nowrap }
.en-root .mat tr.moy td { border-top:2px solid var(--border-2) }
.en-root .alertes { display:grid;gap:8px }
.en-root .alt { display:flex;gap:10px;align-items:flex-start;border-radius:12px;padding:10px 12px;font-size:13px }
.en-root .alt--w { background:var(--warning-soft) }
.en-root .alt--ok { background:var(--success-soft) }
.en-root .alt--i { background:var(--primary-soft-2) }
.en-root .alt b { display:block }
.en-root .cpl { display:grid;grid-template-columns:210px minmax(0,1fr);align-items:center;gap:12px;padding:9px 0;border-bottom:1px solid var(--border) }
.en-root .cpl:last-child { border-bottom:0 }
.en-root .cpl__n { display:flex;align-items:center;gap:10px;font-weight:800;font-size:13.5px;line-height:1.2 }
.en-root .cpl__ic { font-size:18px;line-height:1;flex:0 0 auto;width:22px;text-align:center }
.en-root .seg4 { display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:4px;background:var(--surface-2);border:1px solid var(--border);border-radius:11px;padding:3px }
.en-root .seg4 span { height:30px;display:grid;place-items:center;border-radius:8px;font-size:12px;font-weight:700;color:var(--text-2);white-space:nowrap }
.en-root .seg4 span.on { background:var(--c);color:var(--ct,#fff);font-weight:900;box-shadow:0 3px 10px color-mix(in srgb,var(--c) 35%,transparent) }
.en-root .seg4 span.an { outline:1.5px dashed var(--text-3);outline-offset:-3px }
.en-root .cpl__auto { font-size:12px;color:var(--text-2);margin-top:6px;display:flex;gap:6px;align-items:center;flex-wrap:wrap }
.en-root .comp__pied { font-size:12px;color:var(--text-2);margin-top:10px }
.en-root .maj { background:var(--surface);border:1px solid var(--border);border-left:5px solid var(--success);border-radius:16px;padding:16px 18px;margin-top:14px }
.en-root .maj__t { font-size:15px;font-weight:900;display:flex;gap:8px;align-items:center;flex-wrap:wrap;margin-bottom:8px }
.en-root .maj__l { display:flex;align-items:center;gap:10px;padding:8px 0;border-bottom:1px solid var(--border);font-size:13.5px;flex-wrap:wrap }
.en-root .maj__l s { color:var(--text-3) }
.en-root .maj__l .cpl__ic { font-size:16px }
.en-root .maj__p { font-size:12.5px;color:var(--text-2);margin:10px 0 6px }
.en-root .mat th .thc { display:inline-block;font-size:16px;margin-bottom:2px }
.en-root .mat td.lv { font-size:14px }
.en-root .mat td.lv0 { color:var(--text-3) }
.en-root .legniv { font-size:11.5px;color:var(--text-2);margin-top:8px }
.en-root .etapes--rouge { --k:var(--danger);--ks:var(--danger-soft);--kt:#c43553 }
.en-root .etapes--orange { --k:var(--warning);--ks:var(--warning-soft);--kt:#a86d00 }
.en-root .etapes--vert { --k:var(--success);--ks:var(--success-soft);--kt:#13894f }
.en-root .etapes[class*="etapes--"] .et.ici { color:var(--kt) }
.en-root .etapes[class*="etapes--"] .et.ici i { background:var(--k);box-shadow:0 0 0 4px var(--ks) }
.en-root .etapes[class*="etapes--"] .et.ici + .et::before { background:linear-gradient(90deg,var(--k) var(--p,0%),var(--border-2) var(--p,0%)) }
.en-root .n10 { display:flex;align-items:center;gap:10px }
.en-root .n10__g { flex:1;min-width:0;display:grid;grid-template-columns:repeat(11,minmax(0,1fr));gap:3px }
.en-root .n10__g span { height:30px;display:grid;place-items:center;border-radius:7px;font-size:12px;font-weight:800;color:var(--text-3);background:var(--surface-2);border:1px solid var(--border) }
.en-root .n10__g span.f { color:var(--text-2) }
.en-root .n10__g span.on { background:var(--c);border-color:transparent;color:var(--ct,#fff);font-weight:900 }
.en-root .n10__g span.an { outline:1.5px dashed var(--text-3);outline-offset:-3px }
.en-root .n10__v { min-width:48px;text-align:right;font-weight:900;font-size:18px;color:var(--text) }
.en-root .n10__v small { font-size:12px;color:var(--text-3);font-weight:700 }
.en-root .bil { background:var(--surface);border:1px solid var(--border);border-left:5px solid var(--primary);border-radius:16px;padding:16px 18px;margin-bottom:12px }
.en-root .bil__g { display:grid;grid-template-columns:1.25fr 1fr;gap:20px;align-items:start }
.en-root .bil__l { display:block;font-size:11px;font-weight:900;text-transform:uppercase;letter-spacing:.06em;color:var(--text-2);margin-bottom:8px }
.en-root .cl { display:flex;flex-direction:column;gap:6px }
.en-root .cl__o { display:flex;align-items:center;gap:10px;padding:9px 12px;border:1px solid var(--border);border-radius:12px;font-weight:700;font-size:13.5px;color:var(--text-2);flex-wrap:wrap;background:var(--surface) }
.en-root .cl__o .cb { width:20px;height:20px;border-radius:6px;border:2px solid var(--border-2);display:grid;place-items:center;font-size:12px;color:#fff;flex:0 0 auto }
.en-root .cl__o.on { background:var(--surface-2);border-color:var(--border-2);color:var(--text);font-weight:900 }
.en-root .cl__o.on .cb { background:var(--c);border-color:var(--c) }
.en-root .cl__d { width:9px;height:9px;border-radius:50%;background:var(--c);flex:0 0 auto }
.en-root .cl__moi { margin-left:auto;font-size:11.5px;font-weight:800;color:var(--bleu) }
.en-root .cl--mini { gap:4px }
.en-root .cl--mini .cl__o { padding:5px 8px;font-size:11.5px;gap:7px;border-radius:9px;flex-wrap:nowrap }
.en-root .cl--mini .cb { width:16px;height:16px;font-size:10px }
.en-root .cle { display:grid;grid-template-columns:12px minmax(0,1fr) 34px minmax(0,1.2fr);align-items:center;gap:10px;padding:9px 0;border-bottom:1px solid var(--border);font-size:13.5px }
.en-root .cle:last-child { border-bottom:0 }
.en-root .cle__n { font-weight:900;text-align:center }
.en-root .cle__g { color:var(--text-2) }
.en-root .maj__n { font-weight:900;color:var(--text) }
.en-root .n10__g span { position:relative }
.en-root .n10--soi .n10__g { padding-bottom:9px }
.en-root .n10__g span.moi::after { content:"";position:absolute;bottom:-9px;left:50%;width:6px;height:6px;margin-left:-3px;border-radius:50%;background:var(--bleu) }
.en-root .n10__soi { display:block;font-size:11.5px;font-weight:800;color:var(--bleu);margin-top:2px }
.en-root .m10 { display:flex;flex-direction:column;gap:7px }
.en-root .m10__l { font-size:11.5px;font-weight:800;margin-bottom:3px }
.en-root .m10__g { display:grid;grid-template-columns:repeat(11,minmax(0,1fr));gap:2px }
.en-root .m10__g span { height:20px;display:grid;place-items:center;border-radius:5px;font-size:9.5px;font-weight:800;color:var(--text-3);background:var(--surface);border:1px solid var(--border) }
.en-root .m10__g span.on { background:var(--c);border-color:transparent;color:var(--ct,#fff) }
.en-root .obj__g { display:grid;grid-template-columns:1fr 1fr;gap:20px }
.en-root .obj__t { font-weight:900;font-size:14px;margin-bottom:8px;display:flex;gap:8px;align-items:baseline;flex-wrap:wrap }
.en-root .obj__t small { font-weight:700;color:var(--text-3);font-size:12px }
.en-root .obj { border:1px solid var(--border);border-radius:12px;padding:10px 12px;margin-bottom:8px;font-size:13.5px }
.en-root .obj b { display:block }
.en-root .obj span { display:block;font-size:12px;color:var(--text-2);margin-top:2px }
@media (max-width:860px) {
  .en-root .obj__g { grid-template-columns:1fr }
}
.en-root .partie { display:flex;align-items:center;gap:10px;flex-wrap:wrap;background:var(--primary-soft-2);border:1px solid var(--primary-soft);border-radius:14px;padding:10px 14px;margin-bottom:12px;font-weight:900;font-size:15px }
.en-root .partie small { font-weight:700;color:var(--text-2);font-size:12.5px }
.en-root .partie .chip { margin-left:auto }
.en-root .inf { display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:8px }
.en-root .inf__o { display:flex;gap:10px;align-items:flex-start;padding:10px 12px;border:1px solid var(--border);border-radius:12px;font-size:13.5px;background:var(--surface) }
.en-root .inf__o .cb { width:20px;height:20px;border-radius:6px;border:2px solid var(--border-2);display:grid;place-items:center;font-size:12px;color:#fff;flex:0 0 auto;margin-top:1px }
.en-root .inf__o.on .cb { background:var(--success);border-color:var(--success) }
.en-root .inf__o b { display:block }
.en-root .inf__o .d { font-size:12.5px;color:var(--text-2) }
@media (max-width:860px) {
  .en-root .inf { grid-template-columns:1fr }
}
@media (max-width:860px) {
  .en-root .bil__g { grid-template-columns:1fr }
  .en-root .cle { grid-template-columns:12px minmax(0,1fr) 30px }
  .en-root .cle__g { grid-column:2/-1 }
}
@media (max-width:860px) {
  .en-root .cpl { grid-template-columns:1fr;gap:6px }
  .en-root .seg4 span { font-size:11px }
}
.en-root .radar { width:100%;max-width:520px;height:auto;display:block;margin:0 auto }
.en-root .radar-box > [data-radar] { width:100% }
@media (max-width:860px) {
  .en-root .kpis { grid-template-columns:1fr 1fr }
  .en-root .carte { grid-template-columns:44px minmax(0,1fr);grid-template-areas:"av id" "av date" "et et" "act act";padding:14px;row-gap:10px }
  .en-root .carte>.av { align-self:start }
  .en-root .carte__date { font-size:13px }
  .en-root .carte__act .btn--primary { flex:1;justify-content:center }
  .en-root .carte.carte--mini { grid-template-areas:"av id" "act act" }
  .en-root .comp__g, .en-root .syn, .en-root .cote, .en-root .deux, .en-root .sig { grid-template-columns:1fr }
  .en-root .crow { grid-template-columns:1fr }
}

/* ============================================================
   AJOUTS FAITS A LA MAIN (la planche est une image, le HUB est vivant) — tout ce qui n'a pas de modèle dans la planche
   ============================================================ */
.en-root [hidden] { display:none !important }
.en-root .carte[data-carte] { cursor:pointer }
.en-root .carte__act .btn, .en-root .carte__act button { cursor:pointer }
.en-root .seg { flex-shrink:0 }
.en-root .search input::placeholder { color:var(--text-3) }
.en-root button.motif { background:var(--surface);color:var(--text);font-family:inherit;cursor:pointer }
.en-root button.motif.on { background:var(--primary);color:#fff }
.en-root .coche input { width:18px;height:18px;accent-color:var(--primary);margin:0 }
.en-root .coche { cursor:pointer }
.en-root .field > input.input, .en-root .field > .input { width:100% }
.en-lemag { display:inline-flex;align-items:center;gap:6px;margin-right:6px }
.en-lemag__t { font-size:12px;font-weight:700;color:var(--text-3) }
/* le menu « ⋯ » d'une carte : posé sur le body (hors .en-root) */
.en-menu { min-width:220px;background:var(--surface);border:1px solid var(--border-2);border-radius:12px;box-shadow:var(--shadow-lg);padding:6px;display:flex;flex-direction:column }
.en-menu button { text-align:left;background:transparent;border:0;border-radius:8px;padding:9px 12px;font:inherit;font-weight:700;font-size:13px;color:var(--text);cursor:pointer }
.en-menu button:hover { background:var(--primary-soft) }
.en-menu .en-menu__danger { color:var(--danger) }
.en-menu .en-menu__danger:hover { background:var(--danger-soft) }
/* ---------- l'éditeur (lot 2) ---------- */
.en-root .hero--pro { background:var(--pro) }
.en-root .hdate-l { display:inline-flex;gap:8px;flex-wrap:wrap;justify-content:flex-end }
.en-root input.hdate { color:#fff;font:inherit;font-weight:800;color-scheme:dark;min-width:0 }
.en-root input.hdate:disabled { opacity:.85 }
.en-root .q__lab { cursor:text }
.en-root .ta:focus { outline:2px solid var(--primary);outline-offset:1px;background:var(--surface) }
.en-root .ta--final:focus { outline-color:var(--success) }
.en-root .ta[readonly] { background:var(--surface-2);color:var(--text-2) }
.en-root .src span { display:block }
.en-root .et-q { margin-bottom:10px }
.en-root .et-q__head { display:flex;align-items:center;gap:8px;margin-bottom:6px;font-weight:800;font-size:14px }
.en-root .et-q__ta { min-height:70px }
.en-root input.et-q__ta--input { min-height:0 }
.en-alerte { background:var(--warning-soft,#fdf1d8);border:1px solid var(--warning,#f3a712);color:#7a4d00;border-radius:12px;padding:9px 12px;margin-bottom:12px;font-size:13px;font-weight:700 }
.en-alerte[hidden] { display:none }
.en-alerte--ok { background:var(--success-soft,#e4f8ee);border-color:var(--success,#20bf73);color:#13894f }
.en-root .btn--ok { background:var(--success);border-color:var(--success);color:#fff }
.en-root .btn--ok:disabled { opacity:.45;cursor:not-allowed }
.en-root .btn--danger { color:var(--danger) }
.en-root .btn--primary.btn--danger { background:var(--danger);color:#fff }
.en-root .en-barre { position:sticky;bottom:0;z-index:5;background:linear-gradient(to top,var(--bg) 70%,transparent);padding:14px 0 10px;margin-top:10px }
.en-root.en-flou .ta, .en-root.en-flou .src span, .en-root .en-flou .ta, .en-root .en-flou .src span { filter:blur(7px);user-select:none }
.en-root.en-flou input.ta, .en-root .en-flou input.ta { filter:blur(7px) }
/* l'écran de signature : plein écran, rien d'autre ne se voit (Panorama, Deck, page) */
body.en-signature-on > *:not(#en-sig-ecran) { visibility:hidden !important }
.en-sig { position:fixed;inset:0;z-index:2147483000;background:#f4f5fa;overflow:auto;display:flex;align-items:flex-start;justify-content:center;padding:18px }
.en-sig__in { width:min(1040px,100%);margin:auto;background:#fff;border:1px solid #ebecf3;border-radius:18px;padding:24px;box-shadow:0 12px 40px rgba(29,32,51,.16) }
.en-sig .pad { height:clamp(120px,22vh,230px);touch-action:none;overflow:hidden }
.en-sig .pad canvas { position:absolute;inset:0;width:100%;height:100%;touch-action:none;cursor:crosshair;background:#fff }
.en-sig .pad__l { z-index:2;pointer-events:none;background:rgba(255,255,255,.85);padding:2px 6px;border-radius:6px }
.en-sig .pad__eff { position:absolute;right:8px;top:6px;z-index:2 }
.en-sig .pad--off { opacity:.5 }
.en-sig .pad--off canvas { cursor:not-allowed }
.en-sig .pad--signe { border-style:solid;border-color:var(--success) }
.en-sig__code { display:flex;flex-wrap:wrap;gap:10px;align-items:center;margin-top:14px }
.en-sig__code[hidden], .en-sig__bas[hidden] { display:none }
.en-sig__code label { font-weight:800 }
.en-sig__code input { font:inherit;font-size:18px;letter-spacing:.25em;padding:8px 12px;border:1px solid var(--border-2);border-radius:10px;width:11em }
.en-sig__msg { flex-basis:100%;color:var(--danger);font-weight:700;font-size:13px;min-height:1.2em }
/* le commentaire avant de signer (planche « ok signature », 30/10/2026) : deux colonnes, le responsable attend le salarié */
.en-sig .pad--fige canvas { cursor:default }
.en-sig .col { border:1px solid var(--border);border-radius:16px;padding:14px;background:var(--surface);display:flex;flex-direction:column;min-width:0 }
.en-sig .col--off { opacity:.5 }
.en-sig .col--fait { border-color:#bfe9d3;background:#f7fdf9 }
.en-sig .col__t { font-weight:900;font-size:14px;margin:0 0 8px;display:flex;align-items:center;gap:8px;flex-wrap:wrap }
.en-sig .num { display:inline-grid;place-items:center;width:22px;height:22px;border-radius:50%;background:var(--primary);color:#fff;font-size:12px;font-weight:900 }
.en-sig .col--fait .num { background:var(--success) }
.en-sig .lbl { display:block;font-size:12px;font-weight:900;color:var(--text-2);margin:10px 0 4px }
.en-sig .choix { display:flex;gap:8px;flex-wrap:wrap }
.en-sig .ch { border:1.5px solid var(--border-2);background:var(--surface);border-radius:999px;padding:8px 16px;font:inherit;font-weight:800;color:var(--text-2);cursor:pointer }
.en-sig .ch:disabled { cursor:default }
.en-sig .ch--ok.on { background:var(--success-soft);border-color:var(--success);color:#13894f }
.en-sig .ch--ko.on { background:var(--danger-soft);border-color:var(--danger);color:#c43553 }
.en-sig .ta { min-height:92px;resize:none }
.en-sig .ta--vide { border-color:var(--warning);background:var(--warning-soft) }
.en-sig .ta:disabled { opacity:.7;cursor:not-allowed }
.en-sig__bas { display:flex;gap:10px;justify-content:space-between;align-items:center;flex-wrap:wrap;margin-top:14px }
.en-sig__manque { flex:1 1 220px;text-align:center;font-size:13px;color:#a86d00;font-weight:700 }
.en-sig__manque:empty { display:none }
/* les commentaires relus : entretien signé (responsable) et espace du salarié */
.en-root .en-coms { display:grid;grid-template-columns:1fr 1fr;gap:12px;margin:12px 0 14px }
.en-root .en-com { background:var(--surface);border:1px solid var(--border);border-radius:14px;padding:12px 14px;min-width:0 }
.en-root .en-com--sal { border-color:#bfe9d3;background:#f7fdf9 }
.en-root .en-com__t { font-weight:900;font-size:14px;display:flex;align-items:center;gap:8px;flex-wrap:wrap }
.en-root .en-com__d { font-size:12px;color:var(--text-3);font-weight:700;margin:2px 0 6px }
.en-root .en-com__x { font-size:14px;line-height:1.55;color:var(--text);overflow-wrap:anywhere }
.en-root .en-coms:has(.en-com:only-child) { grid-template-columns:1fr }
@media (max-width:860px) { .en-sig .sig, .en-root .en-coms { grid-template-columns:1fr } }
@media print { .en-root .en-coms { grid-template-columns:1fr 1fr } }
/* le salarié, sur son téléphone : la tuile de l'accueil et les écrans par-dessus */
.en-tuile-hote:empty { display:none }
.en-tuile-hote { margin:10px 0 }
.en-tuile-hote .tile .btn { cursor:pointer }
.en-plein { position:fixed;inset:0;z-index:99000;background:var(--bg);overflow:auto;display:flex;flex-direction:column }
.en-plein__bar { display:flex;align-items:center;gap:10px;padding:10px 14px;background:var(--surface);border-bottom:1px solid var(--border);position:sticky;top:0;z-index:2 }
.en-plein__t { font-weight:900;font-size:16px }
.en-plein__corps { padding:14px;display:grid;gap:12px;max-width:720px;width:100%;margin:0 auto }
.en-plein .mq { padding:12px }
.en-plein .mq__l { font-size:14px }
.en-plein .ta { min-height:96px;font-size:16px }
.en-plein .gele[hidden] { display:none }
.en-lec__sigs { display:flex;gap:18px;flex-wrap:wrap;margin-top:12px }
.en-lec__sig { display:grid;gap:4px;font-size:12px;color:var(--text-2) }
.en-lec__sig img { width:170px;border:1px solid var(--border-2);border-radius:10px;background:#fff }
@media print { .en-plein__bar, .en-plein .barre { display:none } .en-plein { position:static;overflow:visible } }
@media (max-width:860px) { .en-root .l-top { gap:8px } .en-root .search { min-width:0;flex:1 1 100% } }
/* ---------- lot 3 : notes sur 10, classement, objectifs, informations du parcours (ce que la planche montre en image devient cliquable) ---------- */
.en-root [data-n10], .en-root [data-cl], .en-root [data-info], .en-root [data-att] { cursor:pointer }
.en-root [data-n10]:hover:not(.on) { border-color:var(--c);color:var(--text) }
.en-root [data-n10]:focus-visible, .en-root [data-cl]:focus-visible, .en-root [data-info]:focus-visible { outline:2px solid var(--primary);outline-offset:1px }
.en-root [data-cl]:hover:not(.on) { border-color:var(--c) }
.en-root .inf__o[data-info]:hover { border-color:var(--success) }
.en-root .m10__g span[data-n10] { height:26px;font-size:11px }
.en-root .obj--edit { position:relative;display:grid;gap:6px;padding-right:34px }
.en-root .obj__in { width:100%;min-width:0;font:inherit;font-size:13.5px;color:var(--text);border:1px solid var(--border-2);border-radius:9px;padding:7px 9px;background:var(--surface) }
.en-root .obj__in--q { font-weight:800 }
.en-root .obj__in:focus { outline:2px solid var(--primary);outline-offset:1px }
.en-root .obj__r { display:grid;grid-template-columns:1fr 1fr;gap:6px }
.en-root .obj__x { position:absolute;top:8px;right:8px;width:24px;height:24px;border-radius:7px;border:0;background:transparent;color:var(--text-3);font-size:13px;cursor:pointer }
.en-root .obj__x:hover { background:var(--danger-soft);color:var(--danger) }
.en-root .obj--vide { color:var(--text-3);font-style:italic }
@media (max-width:560px) { .en-root .obj__r { grid-template-columns:1fr } }
.en-root .atte { background:var(--surface-2);border:1px dashed var(--border-2);border-radius:14px;padding:10px 12px;margin-bottom:10px }
.en-root .atte__t { font-size:11px;font-weight:900;text-transform:uppercase;letter-spacing:.06em;color:var(--text-2);margin-bottom:6px }
.en-root .atte__l { display:flex;align-items:center;gap:10px;flex-wrap:wrap;justify-content:space-between;padding:7px 0;border-top:1px solid var(--border) }
.en-root .atte__l:first-of-type { border-top:0 }
.en-root .atte__q { font-weight:700;font-size:13.5px;flex:1 1 220px;min-width:0 }
.en-root .atte__q small { display:block;font-weight:600;font-size:12px;color:var(--text-2) }
.en-root .atte__b { display:flex;gap:5px;flex-wrap:wrap }
.en-root .atte__b button { font:inherit;font-size:12px;font-weight:800;border:1px solid var(--border-2);border-radius:999px;padding:5px 11px;background:var(--surface);color:var(--text-2);cursor:pointer }
.en-root .atte__b button:disabled { cursor:default }
.en-root .atte__b button.on--ok { background:var(--success-soft);border-color:var(--success);color:#13894f }
.en-root .atte__b button.on--part { background:var(--warning-soft);border-color:var(--warning);color:#a86d00 }
.en-root .atte__b button.on--non { background:var(--danger-soft);border-color:var(--danger);color:#c43553 }
.en-root .idees { background:#eaf1fd;border:1px solid #d3e2fb;border-radius:12px;padding:9px 12px;margin-bottom:10px;font-size:13px }
.en-root .idees b { color:var(--bleu);font-size:11px;text-transform:uppercase;letter-spacing:.06em;display:block;margin-bottom:3px }
.en-root .idees .btn { margin-top:6px;margin-right:6px }
.en-root .comp__ecart { margin-top:8px;padding:8px 11px;background:#eaf1fd;border-radius:10px;font-size:12.5px;color:var(--text-2) }
.en-root .bil textarea.ta { min-height:110px }
.en-root .maj__l label { display:flex;align-items:center;gap:10px;cursor:pointer;flex-wrap:wrap }
.en-root .maj__l input[type=checkbox] { width:18px;height:18px;accent-color:var(--success);margin:0 }
.en-root .moy-intro { font-size:13px;color:var(--text-2);margin-bottom:12px }
.en-synth-modal .en-root { padding:0 }
.en-root .plein-sect { font-weight:900;font-size:15px;margin:6px 0 -4px }
/* 30/10/2026 — Retour à la liste POUR LE DECK : avec le Deck, la barre du haut sort de l'écran et le Deck reprend ses boutons ; ce bouton ne sert donc que là (ailleurs, et sur téléphone, le ✕ reste le seul retour). */
.en-deck-retour { display:none }
body.pb-ruban-on.pb-dock-on:not(.pb-dock-masque) .en-deck-retour { display:inline-flex }