:root{
 --green:#176b3a;--green2:#2f8f55;--green3:#e9f5ed;--green4:#cfe8d7;
 --ink:#17251d;--muted:#657269;--line:#d9e5dd;--bg:#f5f8f6;--white:#fff;
}
*{box-sizing:border-box}
body{margin:0;background:var(--bg);font:15px/1.5 Arial,sans-serif;color:var(--ink)}
#app{max-width:1120px;margin:22px auto;padding:0 16px 34px}
.hero{background:linear-gradient(135deg,var(--green),var(--green2));color:#fff;padding:30px;border-radius:18px}
.eyebrow{font-size:11px;letter-spacing:.14em;font-weight:800;opacity:.84}
.hero h1{margin:6px 0 5px;font-size:34px}.hero p{margin:0;opacity:.92}
.summary{display:flex;gap:10px;flex-wrap:wrap;margin:16px 0}
.pill{background:#fff;border:1px solid var(--line);border-radius:20px;padding:7px 11px;font-size:12px;color:var(--green);font-weight:700}
.controls{display:grid;grid-template-columns:2fr 1fr;gap:10px;margin:18px 0}
.controls input,.controls select{width:100%;padding:11px;border:1px solid var(--line);border-radius:9px;background:#fff}
.timeline{position:relative;margin-top:18px}
.timeline:before{content:"";position:absolute;left:22px;top:8px;bottom:8px;width:3px;background:var(--green4);border-radius:4px}
.gestion{position:relative;margin:0 0 16px 58px;background:#fff;border:1px solid var(--line);border-radius:14px;padding:16px}
.gestion:before{content:"";position:absolute;left:-46px;top:20px;width:15px;height:15px;border-radius:50%;background:var(--green2);border:4px solid var(--bg)}
.gestion.current{border:2px solid var(--green2);box-shadow:0 7px 20px #176b3a18}
.gestion.current:before{width:19px;height:19px;left:-48px;top:18px;background:var(--green)}
.gestion-head{display:flex;justify-content:space-between;align-items:center;gap:10px;margin-bottom:13px}
.period{font-size:20px;font-weight:800;color:var(--green)}
.current-badge{font-size:11px;font-weight:800;background:var(--green3);color:var(--green);padding:4px 8px;border-radius:20px}
.people{display:grid;grid-template-columns:1fr 1fr;gap:12px}
.person{background:#f8faf9;border:1px solid #e5eee8;border-radius:10px;padding:12px}
.role{font-size:11px;text-transform:uppercase;letter-spacing:.08em;font-weight:800;color:var(--green)}
.name{font-size:16px;font-weight:700;margin:3px 0}.dept{font-size:12px;color:var(--muted)}
.actions{display:flex;gap:6px;flex-wrap:wrap;margin-top:9px}.actions a{background:var(--green3);color:var(--green);padding:5px 7px;border-radius:6px;font-size:12px;font-weight:700;text-decoration:none}
.empty{background:#fff;border:1px dashed var(--line);border-radius:12px;padding:16px;text-align:center;color:var(--muted)}
@media(max-width:700px){.controls,.people{grid-template-columns:1fr}.timeline:before{left:11px}.gestion{margin-left:35px}.gestion:before{left:-32px}.gestion.current:before{left:-34px}.hero h1{font-size:28px}}