:root{
  --lat:#B7482B; --lat2:#A13E25; --sun:#F2B233; --sun2:#F6C453;
  --anth:#472714; --gris:#4A4A4A; --bg:#FBF7F4; --card:#FFFFFF;
  --ok:#2e7d52; --warn:#C77B16; --late:#B7482B;
  --shadow:0 6px 24px rgba(71,39,20,.10);
}
*{box-sizing:border-box}
body{margin:0;font-family:"Segoe UI",Roboto,Arial,sans-serif;color:var(--anth);background:var(--bg)}
a{color:var(--lat);text-decoration:none}
h1{font-size:24px;margin:0}
h2{font-size:16px;color:var(--lat);margin:0 0 14px;letter-spacing:.2px}

/* ---------- topbar ---------- */
.topbar{display:flex;align-items:center;gap:18px;padding:9px 22px;min-height:62px;flex-wrap:wrap;
  background:linear-gradient(100deg,var(--lat),var(--lat2));color:#fff;box-shadow:var(--shadow);position:sticky;top:0;z-index:50}
.brand{display:flex;align-items:center;gap:10px;line-height:1}
.brand-logo{height:34px;width:auto;display:block}
.brand-cam{font-size:10px;font-weight:700;letter-spacing:2px;color:var(--sun2);align-self:center}
.brand-sep{width:1px;height:26px;background:rgba(255,255,255,.35)}
.brand-sub{font-size:13px;opacity:.92;font-weight:600;align-self:center}
.mainnav{display:flex;gap:6px;flex:1;flex-wrap:wrap}
.mainnav a{color:#fff;padding:8px 12px;border-radius:8px;font-size:14px;transition:.2s;opacity:.92}
.mainnav a:hover{background:rgba(255,255,255,.16);opacity:1}
.userbox{display:flex;align-items:center;gap:10px;font-size:13px}
.uname{font-weight:600}
.logout{color:#fff;border:1px solid rgba(255,255,255,.4);padding:5px 12px;border-radius:8px}
.logout:hover{background:rgba(255,255,255,.18)}
.role{font-size:10px;font-weight:700;padding:3px 8px;border-radius:20px;background:var(--sun);color:var(--anth)}
.role-admin{background:var(--sun)} .role-gestionnaire{background:#fff;color:var(--lat)}
.role-dt,.role-dc,.role-qualite{background:var(--anth);color:var(--sun2)}

.wrap{max-width:1180px;margin:24px auto;padding:0 18px}
.page-head{display:flex;align-items:center;gap:16px;justify-content:space-between;margin-bottom:18px}
.head-actions{display:flex;gap:8px}
.back{display:inline-block;margin-bottom:8px;font-size:14px}

/* ---------- flash ---------- */
.flash{padding:12px 16px;border-radius:10px;margin-bottom:14px;font-weight:600;animation:slidein .4s}
.flash-ok{background:#e7f4ec;color:var(--ok);border-left:4px solid var(--ok)}
.flash-error{background:#fbeae6;color:var(--lat);border-left:4px solid var(--lat)}

/* ---------- KPI ---------- */
.kpis{display:grid;grid-template-columns:repeat(6,1fr);gap:14px;margin-bottom:18px}
.kpis-4{grid-template-columns:repeat(4,1fr)}
.kpi{background:var(--card);border-radius:14px;padding:18px;box-shadow:var(--shadow);
  cursor:pointer;position:relative;overflow:hidden;border-top:4px solid var(--lat);transition:transform .18s,box-shadow .18s}
.kpi[data-static]{cursor:default}
.kpi:hover{transform:translateY(-4px);box-shadow:0 12px 30px rgba(71,39,20,.16)}
.kpi-open{border-top-color:var(--sun)} .kpi-late{border-top-color:var(--late)}
.kpi-soon{border-top-color:var(--warn)} .kpi-ok{border-top-color:var(--ok)}
.kpi-val{font-size:34px;font-weight:800;color:var(--anth)}
.kpi-lab{font-size:12.5px;color:var(--gris);margin-top:4px}

/* ---------- cards ---------- */
.card{background:var(--card);border-radius:14px;padding:20px;box-shadow:var(--shadow);margin-bottom:18px}
.cards-2{display:grid;grid-template-columns:1fr 1fr;gap:18px}
@media(max-width:900px){.cards-2{grid-template-columns:1fr}.kpis,.kpis-4{grid-template-columns:repeat(2,1fr)}}

/* ---------- tables ---------- */
.tbl{width:100%;border-collapse:collapse;font-size:14px}
.tbl th{text-align:left;padding:9px 10px;color:var(--gris);font-size:12px;text-transform:uppercase;border-bottom:2px solid #efe6e1}
.tbl td{padding:9px 10px;border-bottom:1px solid #f2ece8}
.tbl-hover tbody tr:hover,.clickable:hover{background:#fdf4ef;cursor:pointer}
.muted{color:#9a8e87} .small{font-size:12px}
.err{color:var(--lat)}

/* ---------- pills / tags ---------- */
.pill{display:inline-block;padding:3px 10px;border-radius:20px;font-size:12px;font-weight:600;background:#efe6e1;color:var(--anth)}
.pill-ok{background:#e7f4ec;color:var(--ok)} .pill-warn{background:#fcf0d9;color:var(--warn)}
.pill-late{background:#fbeae6;color:var(--lat)} .pill.big{font-size:14px;padding:6px 16px}
.tag{padding:2px 8px;border-radius:6px;font-size:12px;font-weight:700;background:#eee}
.tag-warn{background:#fcf0d9;color:var(--warn)} .tag-urgent{background:#fde3d9;color:var(--lat)}
.tag-late{background:var(--lat);color:#fff}

/* ---------- bars ---------- */
.bars{display:flex;flex-direction:column;gap:9px}
.bar-row{display:grid;grid-template-columns:90px 1fr 90px;align-items:center;gap:10px;cursor:pointer}
.bar-lab{font-size:12.5px;color:var(--gris);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.bar-track{background:#f0e7e2;border-radius:20px;height:16px;overflow:hidden}
.bar-fill{height:100%;width:0;border-radius:20px;transition:width 1.1s cubic-bezier(.2,.8,.2,1);background:var(--lat)}
.bar-num{font-size:12.5px;text-align:right;font-weight:600}
.bar-fill.p0{background:#cdbfb7}.bar-fill.p1{background:var(--sun)}.bar-fill.p2{background:var(--sun2)}
.bar-fill.p3{background:var(--warn)}.bar-fill.p4{background:#d96a2a}.bar-fill.p5{background:var(--lat)}.bar-fill.p6{background:var(--lat2)}
.bar-fill.psun{background:linear-gradient(90deg,var(--sun),var(--lat))}
.mini-stats{display:flex;gap:18px;flex-wrap:wrap;margin-top:16px;font-size:13px;color:var(--gris)}

/* ---------- buttons / forms ---------- */
.btn{display:inline-block;background:var(--lat);color:#fff;border:none;padding:10px 18px;border-radius:10px;
  font-size:14px;font-weight:600;cursor:pointer;transition:.18s}
.btn:hover{background:var(--lat2);transform:translateY(-1px)}
.btn-sun{background:var(--sun);color:var(--anth)} .btn-sun:hover{background:var(--sun2)}
.btn-ghost{background:#fff;color:var(--lat);border:1.5px solid var(--lat)} .btn-ghost:hover{background:#fdf4ef}
.btn-sm{padding:5px 10px;font-size:12px;border-radius:8px}
.btn-block{width:100%;margin-top:14px}
label{display:block;font-size:12.5px;color:var(--gris);margin:10px 0 4px;font-weight:600}
input,select,textarea{width:100%;padding:9px 11px;border:1px solid #ded2cb;border-radius:9px;font-size:14px;font-family:inherit}
input:focus,select:focus,textarea:focus{outline:none;border-color:var(--lat);box-shadow:0 0 0 3px rgba(183,72,43,.12)}
textarea.code{font-family:Consolas,monospace;font-size:13px}
.grid-form{display:grid;grid-template-columns:repeat(3,1fr);gap:8px 14px}
.hint{font-size:13px;color:var(--gris);background:#fbf3ee;padding:10px 14px;border-radius:9px;border-left:3px solid var(--sun)}
.dl{display:grid;grid-template-columns:160px 1fr;gap:8px 12px;font-size:14px}
.dl dt{color:var(--gris);font-weight:600} .dl dd{margin:0}
.row-actions{display:flex;gap:6px;flex-wrap:wrap}
tr.inactive{opacity:.5}

/* ---------- cloture file zone ---------- */
.filezone{display:flex;align-items:center;gap:12px;border:2px dashed var(--lat);border-radius:12px;
  padding:18px;cursor:pointer;background:#fdf4ef;transition:.2s;margin-top:6px}
.filezone:hover{background:#fbe9e1}
.filezone input{display:none}.filezone-ic{font-size:26px}
.cloture-form{margin-top:8px}
.done-box{background:#e7f4ec;border-radius:10px;padding:16px;border-left:4px solid var(--ok)}

/* ---------- drawer (drill-down) ---------- */
.drawer{position:fixed;top:0;right:-520px;width:500px;max-width:92vw;height:100vh;background:#fff;
  box-shadow:-10px 0 40px rgba(0,0,0,.2);z-index:200;transition:right .32s cubic-bezier(.2,.8,.2,1);display:flex;flex-direction:column}
.drawer.open{right:0}
.drawer-head{display:flex;justify-content:space-between;align-items:center;padding:18px 20px;
  background:linear-gradient(100deg,var(--lat),var(--lat2));color:#fff}
.drawer-head h3{margin:0;font-size:17px}
.drawer-close{background:none;border:none;color:#fff;font-size:28px;cursor:pointer;line-height:1;width:auto;padding:0}
.drawer-body{padding:16px 20px;overflow:auto}
.drawer-overlay{position:fixed;inset:0;background:rgba(40,20,10,.35);z-index:150;opacity:0;pointer-events:none;transition:.3s}
.drawer-overlay.open{opacity:1;pointer-events:auto}
.dd-item{border:1px solid #eee;border-radius:10px;padding:12px;margin-bottom:10px;transition:.15s}
.dd-item:hover{border-color:var(--lat);background:#fdf7f4}
.dd-client{font-weight:700} .dd-meta{font-size:12.5px;color:var(--gris);margin-top:3px}

/* ---------- login ---------- */
.login-page{display:flex;align-items:center;justify-content:center;min-height:100vh;
  background:radial-gradient(circle at 30% 20%,var(--lat),var(--lat2) 70%,#7d2f1b)}
.login-card{background:#fff;border-radius:18px;padding:40px 36px;width:380px;box-shadow:0 24px 70px rgba(0,0,0,.35);animation:pop .5s}
.login-logo-img{display:block;margin:0 auto 4px;height:64px;width:auto}
.login-cam{text-align:center;color:var(--lat);font-size:12px;font-weight:700;letter-spacing:4px}
.login-sub{text-align:center;color:var(--gris);font-size:12px;margin-bottom:6px}
.login-card h1{font-size:18px;text-align:center;margin:10px 0 18px;color:var(--anth)}
.login-card button{width:100%;margin-top:18px;background:var(--lat);color:#fff;border:none;
  padding:12px;border-radius:10px;font-size:15px;font-weight:700;cursor:pointer;transition:.18s}
.login-card button:hover{background:var(--lat2);transform:translateY(-1px)}
.login-foot{text-align:center;font-size:11px;color:#b6a89f;margin-top:18px}

/* ---------- animations ---------- */
.reveal{opacity:0;transform:translateY(16px);transition:opacity .6s,transform .6s}
.reveal.show{opacity:1;transform:none}
@keyframes slidein{from{opacity:0;transform:translateY(-8px)}to{opacity:1;transform:none}}
@keyframes pop{from{opacity:0;transform:scale(.94)}to{opacity:1;transform:none}}

/* ---------- premium v6 : animations + interactions ---------- */
.wrap{animation:pageIn .4s ease}
@keyframes pageIn{from{opacity:0;transform:translateY(10px)}to{opacity:1;transform:none}}
.card{transition:transform .2s,box-shadow .2s}
.card:hover{transform:translateY(-2px);box-shadow:0 14px 34px rgba(71,39,20,.14)}
.btn{outline:none}
.btn:active{transform:translateY(1px) scale(.98)}
.btn:focus-visible,a:focus-visible,input:focus-visible,select:focus-visible{outline:3px solid var(--sun);outline-offset:2px}
.bar-row.clickable:hover .bar-lab{color:var(--lat);font-weight:700}
.mini-stats b{cursor:default}
/* skeleton de chargement (drawer) */
.dd-skel{height:54px;border-radius:10px;margin-bottom:10px;
  background:linear-gradient(90deg,#f0e7e2 25%,#f8f1ec 37%,#f0e7e2 63%);
  background-size:400% 100%;animation:shimmer 1.2s ease-in-out infinite}
@keyframes shimmer{0%{background-position:100% 0}100%{background-position:-100% 0}}
/* tables scrollables (anti-debordement mobile) */
.table-scroll{overflow-x:auto;-webkit-overflow-scrolling:touch}
.table-scroll .tbl{min-width:620px}
.reaffect-form{margin-top:14px;padding-top:12px;border-top:1px dashed #e3d6cf}
.dd-client,.dd-meta{word-break:break-word}
.brand-logo{max-width:150px}

/* ---------- responsive anti-chevauchement ---------- */
@media(max-width:1100px){
  .topbar{gap:10px}
  .mainnav{order:3;flex-basis:100%}
  .userbox{margin-left:auto}
}
@media(max-width:600px){
  .wrap{padding:0 12px}
  .kpis,.kpis-4{grid-template-columns:1fr 1fr}
  .kpi{overflow:visible}
  .kpi-val{font-size:20px;letter-spacing:-.3px;line-height:1.15;word-break:break-word}
  .page-head{flex-direction:column;align-items:flex-start;row-gap:10px}
  .head-actions{flex-wrap:wrap}
  .bar-row{grid-template-columns:74px 1fr 70px}
  .dl{grid-template-columns:1fr}
  .grid-form{grid-template-columns:1fr}
}
.page-head{flex-wrap:wrap;row-gap:10px}

/* respect des preferences systeme (mouvement reduit) */
@media(prefers-reduced-motion:reduce){
  *{animation:none!important;transition:none!important}
  .reveal{opacity:1!important;transform:none!important}
}