/* ══════════════════════════════════════════════════════════════════════
   ANC DIAG — CUNY EXPERTISES
   Charte EX'IM : Montserrat + D0404A (rouge) · 248887 (vert-bleu)
                  ECEDED (gris) · F6A316 (orangé) · 343434 (texte)
   ══════════════════════════════════════════════════════════════════════ */
:root{
  --rouge:#D0404A; --vertbleu:#248887; --gris:#ECEDED;
  --or:#F6A316; --texte:#343434; --blanc:#FFFFFF;
  --ok:#1B6B42; --fond-doux:#F7F6F4;
}
*{box-sizing:border-box}

body{
  font-family:Montserrat,'Segoe UI',Arial,sans-serif;
  background:var(--gris); color:var(--texte);
  margin:0; padding:0; font-size:15px; line-height:1.5;
  -webkit-font-smoothing:antialiased;
}

/* ── En-tête ─────────────────────────────────────────────────────── */
header{
  background:var(--texte); color:#fff; padding:0 20px;
  display:flex; align-items:center; gap:18px; height:60px;
  position:sticky; top:0; z-index:50;
  box-shadow:0 2px 10px rgba(0,0,0,.18);
}
header .logo{font-weight:800; font-size:17px; color:var(--or); letter-spacing:.5px; white-space:nowrap}
header .logo span{color:#fff; font-weight:400}
header nav{display:flex; gap:4px; margin-left:auto; flex-wrap:wrap}
header nav a{
  color:#DDD; text-decoration:none; padding:8px 13px;
  border-radius:7px; font-size:13px; font-weight:600;
  transition:background .15s, color .15s; white-space:nowrap;
}
header nav a:hover{background:rgba(255,255,255,.13); color:#fff}
header nav a.on{background:var(--vertbleu); color:#fff}

/* ── Mise en page ────────────────────────────────────────────────── */
.wrap{max-width:1180px; margin:0 auto; padding:22px 16px 60px}
h1{font-size:23px; margin:0 0 4px; color:var(--texte)}
h2{font-size:17px; margin:26px 0 12px; color:var(--rouge)}
h3{font-size:15px; margin:18px 0 8px}
.muted{color:#6B6B6B; font-size:13px}
a{color:var(--vertbleu)}

.card{
  background:#fff; border-radius:13px; padding:18px; margin-bottom:14px;
  box-shadow:0 1px 3px rgba(0,0,0,.07);
}
.grid{display:grid; gap:14px; grid-template-columns:repeat(auto-fill,minmax(230px,1fr))}

/* ── Indicateurs ─────────────────────────────────────────────────── */
.kpi{
  background:#fff; border-radius:13px; padding:18px;
  border-left:5px solid var(--vertbleu);
  box-shadow:0 1px 3px rgba(0,0,0,.07);
}
.kpi .n{font-size:30px; font-weight:800; color:var(--vertbleu); line-height:1}
.kpi .l{font-size:12px; color:#6B6B6B; text-transform:uppercase; letter-spacing:.6px; margin-top:5px}
.kpi.rouge{border-left-color:var(--rouge)} .kpi.rouge .n{color:var(--rouge)}
.kpi.or{border-left-color:var(--or)} .kpi.or .n{color:#C47F00}

/* ── Tableaux ────────────────────────────────────────────────────── */
table{width:100%; border-collapse:collapse; font-size:14px; background:#fff; border-radius:11px; overflow:hidden}
th{
  text-align:left; padding:10px 12px; background:var(--fond-doux);
  font-size:12px; text-transform:uppercase; letter-spacing:.5px;
  color:#6B6B6B; font-weight:700;
}
td{padding:10px 12px; border-top:1px solid #EFEDEA}
tr:hover td{background:#FBFAF8}

/* ── Boutons ─────────────────────────────────────────────────────── */
.btn{
  display:inline-block; background:var(--vertbleu); color:#fff; border:0;
  padding:10px 18px; border-radius:9px; font-weight:700; font-size:14px;
  cursor:pointer; text-decoration:none; font-family:inherit; line-height:1.2;
}
.btn:hover{filter:brightness(1.08)}
.btn.rouge{background:var(--rouge)}
.btn.or{background:var(--or); color:var(--texte)}
.btn.gris{background:#8A8A8A}
.btn.mini{padding:6px 12px; font-size:12.5px}

/* ── Formulaires ─────────────────────────────────────────────────── */
input,select,textarea{
  font-family:inherit; font-size:14px; padding:9px 11px;
  border:1.5px solid #D8D5D0; border-radius:8px; width:100%;
  background:#fff; color:var(--texte);
}
input:focus,select:focus,textarea:focus{outline:0; border-color:var(--vertbleu)}
/* 16 px minimum : évite le zoom automatique sur iOS */
input,select,textarea{font-size:16px}
label{
  display:block; font-size:12.5px; font-weight:700; color:#5A5A5A;
  margin:12px 0 5px; text-transform:uppercase; letter-spacing:.4px;
}

/* ── Badges ──────────────────────────────────────────────────────── */
.badge{display:inline-block; padding:3px 10px; border-radius:14px; font-size:11.5px; font-weight:700}
.badge.ok{background:#DFF3E8; color:var(--ok)}
.badge.ko{background:#FBE0E2; color:#A61E27}
.badge.att{background:#FFF1D9; color:#8A5A00}
.badge.neu{background:#E8E8E8; color:#555}

/* ── Encadrés ────────────────────────────────────────────────────── */
.alerte{
  background:#FFF6E5; border-left:4px solid var(--or);
  padding:12px 14px; border-radius:8px; font-size:13.5px;
  line-height:1.55; margin:12px 0;
}
.alerte.rouge{background:#FDEBEC; border-left-color:var(--rouge)}
.alerte b{color:var(--texte)}

/* ── Fiches de points de contrôle ────────────────────────────────── */
.pc{
  background:#fff; border-radius:12px; padding:15px; margin-bottom:11px;
  border-left:5px solid #CCC; box-shadow:0 1px 3px rgba(0,0,0,.06);
}
.pc.bloquante{border-left-color:var(--rouge)}
.pc.majeure{border-left-color:var(--or)}
.pc.mineure{border-left-color:var(--vertbleu)}
.pc .code{font-weight:800; color:var(--rouge); font-size:13px; text-transform:uppercase}
.pc .lib{font-weight:700; margin:3px 0 6px; font-size:14.5px; line-height:1.4}
.pc .aide{font-size:12.5px; color:#6B6B6B; margin-top:7px; line-height:1.5}
.pc .ref{font-size:11px; color:#999; margin-top:5px; font-style:italic}

.choix{display:flex; gap:7px; margin-top:11px; flex-wrap:wrap}
.choix button{
  flex:1 1 auto; min-width:0; padding:10px 12px; border-radius:8px;
  border:1.5px solid #D8D5D0; background:#fff; cursor:pointer;
  font-size:13px; font-weight:700; font-family:inherit; color:#555;
  transition:all .12s;
}
.choix button:hover{border-color:var(--vertbleu)}
.choix button.sel-ok{background:var(--ok); border-color:var(--ok); color:#fff}
.choix button.sel-ko{background:var(--rouge); border-color:var(--rouge); color:#fff}
.choix button.sel-na{background:#8A8A8A; border-color:#8A8A8A; color:#fff}

progress{width:100%; height:9px; border-radius:6px}
progress::-webkit-progress-bar{background:#E4E1DC; border-radius:6px}
progress::-webkit-progress-value{background:var(--vertbleu); border-radius:6px}
progress::-moz-progress-bar{background:var(--vertbleu); border-radius:6px}

footer{text-align:center; padding:22px; font-size:12px; color:#8A8A8A}

/* ── Mobile ──────────────────────────────────────────────────────── */
@media(max-width:700px){
  header{height:auto; flex-wrap:wrap; padding:9px 12px; gap:10px}
  header nav{margin-left:0; width:100%}
  header nav a{padding:7px 10px; font-size:12px}
  .grid{grid-template-columns:1fr 1fr}
  h1{font-size:19px}
  .wrap{padding:14px 10px 50px}
  table{font-size:12.5px}
  th,td{padding:8px 7px}
  .choix button{flex:1 1 100%}
  .card{padding:14px}
}