@import url('https://fonts.googleapis.com/css2?family=Barlow:wght@400;500;600;700&family=Barlow+Semi+Condensed:wght@500;600;700&family=IBM+Plex+Mono:wght@500&display=swap');

.wk { 
  --bleu:#23387F; --bleu-nuit:#17245A; --bleu-clair:#4A5FA8;
  --hivis:#FECD4D; --toile:#EFEDE7; --carte:#FFFFFF;
  --trait:#D9D5CB; --gris:#6E7280; --gris-clair:#9A9DA6;
  --rouge:#B3261E; --vert:#2E6B3E; --ambre:#9A6300;
  font-family:'Barlow',system-ui,-apple-system,'Segoe UI',sans-serif;
  color:var(--bleu-nuit); background:var(--toile);
  min-height:100vh; -webkit-font-smoothing:antialiased;
}
.wk *,.wk *::before,.wk *::after{ box-sizing:border-box; }
.wk h1,.wk h2,.wk h3,.wk h4{ font-family:'Barlow Semi Condensed',sans-serif; margin:0; letter-spacing:-.01em; }
.wk p{ margin:0; }
.wk button{ font-family:inherit; cursor:pointer; }
.wk input,.wk select,.wk textarea{ font-family:inherit; }

/* bande réfléchissante — motif signature */
.wk-bande{
  height:7px;
  background:
    repeating-linear-gradient(115deg, rgba(255,255,255,.85) 0 6px, rgba(255,255,255,0) 6px 13px),
    var(--hivis);
}
.wk-bande-fine{ height:4px; }

/* ---------- structure ---------- */
.wk-app{ min-height:100vh; display:flex; flex-direction:column; }
.wk-entete{ background:var(--bleu); color:#fff; }
.wk-entete-in{ max-width:1120px; margin:0 auto; padding:14px 20px; display:flex; align-items:center; gap:16px; flex-wrap:wrap; }
.wk-logo{ display:block; width:auto; }
.wk-marque-bloc{ display:flex; flex-direction:column; gap:5px; color:#fff; }
.wk-marque-sous{ font-size:11.5px; font-weight:500; color:#AFBCDD; letter-spacing:.02em; padding-left:23px; }
.wk-entete-fin{ margin-left:auto; display:flex; align-items:center; gap:14px; }
.wk-qui{ font-size:13px; color:#C6D0EA; text-align:right; line-height:1.35; }
.wk-qui b{ display:block; color:#fff; font-weight:600; }
.wk-corps{ flex:1; max-width:1120px; width:100%; margin:0 auto; padding:26px 20px 64px; }

/* ---------- boutons ---------- */
.wk-btn{ border:0; border-radius:3px; padding:11px 20px; font-weight:600; font-size:14.5px;
  background:var(--bleu); color:#fff; transition:background .15s; }
.wk-btn:hover{ background:var(--bleu-nuit); }
.wk-btn:disabled{ background:var(--gris-clair); cursor:not-allowed; }
.wk-btn-sec{ background:transparent; color:var(--bleu); border:1.5px solid var(--trait); }
.wk-btn-sec:hover{ background:#fff; border-color:var(--bleu); }
.wk-btn-fant{ background:transparent; color:#C6D0EA; border:1.5px solid rgba(255,255,255,.28); padding:8px 14px; font-size:13.5px; }
.wk-btn-fant:hover{ background:rgba(255,255,255,.1); color:#fff; }
.wk-btn-min{ padding:7px 13px; font-size:13px; }
.wk-lien{ background:none; border:0; color:var(--bleu-clair); font-weight:600; font-size:14px; padding:0; text-decoration:underline; text-underline-offset:3px; }

/* ---------- connexion ---------- */
.wk-porte{ min-height:100vh; display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1fr); }
.wk-porte-g{
  background:var(--bleu-nuit); color:#fff; padding:44px 48px 34px;
  display:flex; flex-direction:column;
  background-image:
    radial-gradient(circle at 92% 8%, rgba(254,205,77,.13) 0, rgba(254,205,77,0) 48%),
    linear-gradient(180deg, #2A3C7E 0%, var(--bleu-nuit) 62%);
}
.wk-porte-haut{ flex:0 0 auto; }
.wk-porte-milieu{ flex:1 1 auto; display:flex; flex-direction:column; justify-content:center; padding:36px 0; }
.wk-porte-bas{
  flex:0 0 auto; display:flex; gap:22px; flex-wrap:wrap;
  border-top:1px solid rgba(255,255,255,.14); padding-top:16px;
  font-size:13px; color:#98A4C6;
}
.wk-porte-bas span{ position:relative; padding-left:13px; }
.wk-porte-bas span::before{
  content:''; position:absolute; left:0; top:7px; width:5px; height:5px;
  background:var(--hivis); border-radius:1px;
}
.wk-porte-titre{ font-size:46px; font-weight:700; line-height:1.02; margin:22px 0 0; max-width:11ch; }
.wk-porte-txt{ font-size:16px; color:#BAC5E2; line-height:1.55; max-width:44ch; margin-top:18px; }
.wk-delais{ margin-top:30px; display:flex; gap:38px; flex-wrap:wrap; }
.wk-delai b{ display:block; font-family:'Barlow Semi Condensed',sans-serif; font-size:30px; font-weight:700; color:var(--hivis); line-height:1; }
.wk-delai span{ font-size:13px; color:#A3AFD0; display:block; margin-top:5px; max-width:16ch; }
.wk-porte-d{ background:var(--toile); padding:56px 48px; display:flex; align-items:center; }
.wk-porte-form{ width:100%; max-width:380px; margin:0 auto; }
.wk-onglets{ display:flex; gap:26px; border-bottom:1.5px solid var(--trait); margin-bottom:26px; }
.wk-onglet{ background:none; border:0; padding:0 0 11px; font-size:16px; font-weight:600; color:var(--gris);
  border-bottom:2.5px solid transparent; margin-bottom:-1.5px; }
.wk-onglet.on{ color:var(--bleu-nuit); border-color:var(--hivis); }
.wk-demo{ margin-top:26px; font-size:12.5px; color:var(--gris); line-height:1.6; border-left:2px solid var(--trait); padding-left:12px; }

/* ---------- champs ---------- */
.wk-champ{ margin-bottom:16px; }
.wk-lab{ display:block; font-size:13px; font-weight:600; color:var(--bleu-nuit); margin-bottom:6px; }
.wk-lab i{ font-style:normal; color:var(--rouge); }
.wk-aide{ font-size:12.5px; color:var(--gris); margin-top:5px; line-height:1.45; }
.wk-in{ width:100%; padding:10px 12px; border:1.5px solid var(--trait); border-radius:3px; background:#fff;
  font-size:15px; color:var(--bleu-nuit); }
.wk-in:focus{ outline:2px solid var(--bleu-clair); outline-offset:1px; border-color:var(--bleu-clair); }
.wk-in.err{ border-color:var(--rouge); background:#FDF6F5; }
textarea.wk-in{ min-height:120px; resize:vertical; line-height:1.5; }
.wk-msg-err{ font-size:12.5px; color:var(--rouge); margin-top:5px; font-weight:500; }
.wk-grille{ display:grid; grid-template-columns:1fr 1fr; gap:0 16px; }
.wk-grille-3{ display:grid; grid-template-columns:1fr 1fr 1fr; gap:0 16px; }

/* choix en cartes (type, gravité, résolution) */
.wk-choix{ display:grid; grid-template-columns:1fr 1fr; gap:9px; }
.wk-opt{ text-align:left; background:#fff; border:1.5px solid var(--trait); border-radius:3px;
  padding:11px 13px; font-size:14px; color:var(--bleu-nuit); line-height:1.35; transition:border-color .12s; }
.wk-opt small{ display:block; color:var(--gris); font-size:12.5px; margin-top:3px; }
.wk-opt:hover{ border-color:var(--bleu-clair); }
.wk-opt.on{ border-color:var(--bleu); border-width:1.5px; box-shadow:inset 3px 0 0 var(--hivis); background:#FBFBF8; font-weight:600; }
.wk-opt.on small{ font-weight:400; }
.wk-opt-mult{ padding-left:40px; position:relative; }
.wk-opt-mult::before{ content:''; position:absolute; left:14px; top:13px; width:15px; height:15px;
  border:1.5px solid var(--gris-clair); border-radius:2px; background:#fff; }
.wk-opt-mult.on::before{ background:var(--bleu); border-color:var(--bleu); }
.wk-opt-mult.on::after{ content:''; position:absolute; left:19px; top:16px; width:5px; height:9px;
  border:solid #fff; border-width:0 2px 2px 0; transform:rotate(45deg); }
.wk a.wk-btn{ text-decoration:none; display:inline-block; }

/* ---------- cartes / listes ---------- */
.wk-carte{ background:var(--carte); border:1px solid var(--trait); border-radius:3px; }
.wk-carte-pad{ padding:24px; }
.wk-titre-page{ font-size:30px; font-weight:700; }
.wk-sous{ color:var(--gris); font-size:15px; margin-top:5px; line-height:1.5; max-width:66ch; }
.wk-barre-titre{ display:flex; align-items:flex-end; gap:20px; flex-wrap:wrap; margin-bottom:22px; }
.wk-barre-titre .wk-btn{ margin-left:auto; }

.wk-ligne{ display:block; width:100%; text-align:left; background:var(--carte); border:1px solid var(--trait);
  border-radius:3px; padding:15px 17px; margin-bottom:9px; transition:border-color .12s; }
.wk-ligne:hover{ border-color:var(--bleu-clair); }
.wk-ligne-h{ display:flex; align-items:center; gap:11px; flex-wrap:wrap; }
.wk-ref{ font-family:'IBM Plex Mono',monospace; font-size:13px; font-weight:500; color:var(--bleu-clair); }
.wk-ligne-t{ font-weight:600; font-size:15.5px; margin-top:5px; }
.wk-ligne-m{ font-size:13px; color:var(--gris); margin-top:4px; }

.wk-etat{ font-size:12px; font-weight:600; padding:3px 9px; border-radius:2px; border:1px solid; white-space:nowrap; }
.wk-etat-recue{ color:var(--bleu-clair); border-color:#C3D2E2; background:#F2F6FB; }
.wk-etat-analyse{ color:var(--ambre); border-color:#E4D2A8; background:#FBF6EA; }
.wk-etat-action{ color:var(--bleu-nuit); border-color:#CBD3B0; background:#F7F8E9; }
.wk-etat-resolue{ color:var(--vert); border-color:#B6D0BC; background:#F0F7F1; }
.wk-etat-rejetee{ color:var(--rouge); border-color:#E3C0BD; background:#FBF2F1; }
.wk-grav{ font-size:12px; font-weight:600; color:var(--gris); }
.wk-grav-bloquante{ color:var(--rouge); }
.wk-grav-majeure{ color:var(--ambre); }

.wk-vide{ background:var(--carte); border:1px dashed var(--trait); border-radius:3px; padding:44px 26px; text-align:center; }
.wk-vide h3{ font-size:20px; font-weight:600; }
.wk-vide p{ color:var(--gris); margin-top:7px; font-size:14.5px; }

/* ---------- étapes du formulaire ---------- */
.wk-etapes{ display:flex; gap:2px; margin-bottom:26px; }
.wk-etape{ flex:1; text-align:left; background:none; border:0; padding:0; }
.wk-etape-bar{ height:5px; background:var(--trait); border-radius:2px; }
.wk-etape.fait .wk-etape-bar{ background:var(--bleu); }
.wk-etape.on .wk-etape-bar{
  background:repeating-linear-gradient(115deg, rgba(255,255,255,.8) 0 5px, rgba(255,255,255,0) 5px 11px), var(--hivis);
}
.wk-etape-num{ font-size:12.5px; color:var(--gris); margin-top:7px; font-weight:500; }
.wk-etape.on .wk-etape-num,.wk-etape.fait .wk-etape-num{ color:var(--bleu-nuit); font-weight:600; }

.wk-sect-titre{ font-size:22px; font-weight:700; margin-bottom:4px; }
.wk-sect-txt{ color:var(--gris); font-size:14.5px; margin-bottom:22px; line-height:1.5; max-width:62ch; }
.wk-pied-form{ display:flex; gap:11px; align-items:center; margin-top:26px; padding-top:20px; border-top:1px solid var(--trait); }
.wk-pied-form .wk-btn:last-child{ margin-left:auto; }

/* photos */
.wk-photos{ display:grid; grid-template-columns:repeat(auto-fill,minmax(132px,1fr)); gap:11px; margin-top:13px; }
.wk-photo{ position:relative; border:1px solid var(--trait); border-radius:3px; overflow:hidden; background:#fff; aspect-ratio:4/3; }
.wk-photo img{ width:100%; height:100%; object-fit:cover; display:block; }
.wk-photo button{ position:absolute; top:5px; right:5px; background:rgba(22,36,58,.9); color:#fff; border:0;
  border-radius:2px; width:24px; height:24px; font-size:15px; line-height:1; }
.wk-depot{ border:1.5px dashed var(--trait); border-radius:3px; padding:26px; text-align:center; background:#fff; }
.wk-depot p{ color:var(--gris); font-size:13.5px; margin-top:7px; }

/* récap */
.wk-recap{ border:1px solid var(--trait); border-radius:3px; background:#FBFBF8; padding:19px 21px; }
.wk-recap dl{ margin:0; display:grid; grid-template-columns:auto 1fr; gap:9px 20px; font-size:14px; }
.wk-recap dt{ color:var(--gris); }
.wk-recap dd{ margin:0; font-weight:600; }

/* détail */
.wk-detail-h{ display:flex; align-items:flex-start; gap:16px; flex-wrap:wrap; margin-bottom:5px; }
.wk-bloc{ margin-top:26px; }
.wk-bloc-t{ font-size:16px; font-weight:700; padding-bottom:8px; border-bottom:2px solid var(--bleu); margin-bottom:14px; display:inline-block; }
.wk-faits{ display:grid; grid-template-columns:repeat(auto-fit,minmax(190px,1fr)); gap:16px; }
.wk-fait span{ display:block; font-size:12.5px; color:var(--gris); }
.wk-fait b{ display:block; font-size:15px; font-weight:600; margin-top:3px; }
.wk-cite{ background:#FBFBF8; border-left:3px solid var(--hivis); padding:14px 17px; font-size:15px; line-height:1.6; white-space:pre-wrap; }

.wk-fil{ list-style:none; margin:0; padding:0; }
.wk-fil li{ position:relative; padding:0 0 20px 24px; border-left:1.5px solid var(--trait); }
.wk-fil li:last-child{ border-left-color:transparent; padding-bottom:0; }
.wk-fil li::before{ content:''; position:absolute; left:-5.5px; top:4px; width:9px; height:9px; border-radius:50%;
  background:var(--trait); border:2px solid var(--toile); }
.wk-fil li:first-child::before{ background:var(--bleu); }
.wk-fil-d{ font-size:12.5px; color:var(--gris); }
.wk-fil-t{ font-weight:600; font-size:14.5px; margin-top:2px; }
.wk-fil-n{ font-size:14px; color:var(--gris); margin-top:3px; line-height:1.5; white-space:pre-wrap; }

/* filtres qualité */
.wk-filtres{ display:flex; gap:10px; flex-wrap:wrap; align-items:center; margin-bottom:18px; }
.wk-filtres .wk-in{ width:auto; padding:8px 11px; font-size:14px; }
.wk-filtres input.wk-in{ min-width:220px; flex:1; }
.wk-stats{ display:grid; grid-template-columns:repeat(auto-fit,minmax(140px,1fr)); gap:11px; margin-bottom:22px; }
.wk-stat{ background:var(--carte); border:1px solid var(--trait); border-radius:3px; padding:14px 16px; }
.wk-stat b{ display:block; font-family:'Barlow Semi Condensed',sans-serif; font-size:30px; font-weight:700; line-height:1; }
.wk-stat span{ font-size:13px; color:var(--gris); }

.wk-charge{ padding:80px 20px; text-align:center; color:var(--gris); }
.wk-alerte{ background:#FBF2F1; border:1px solid #E3C0BD; color:var(--rouge); border-radius:3px;
  padding:11px 14px; font-size:13.5px; font-weight:500; margin-bottom:16px; }
.wk-ok{ background:#F0F7F1; border:1px solid #B6D0BC; color:var(--vert); border-radius:3px;
  padding:11px 14px; font-size:13.5px; font-weight:500; margin-bottom:16px; }

@media (max-width:860px){
  .wk-porte{ grid-template-columns:1fr; }
  .wk-porte-g{ padding:26px 24px 22px; }
  .wk-porte-milieu{ padding:22px 0 24px; }
  .wk-porte-titre{ font-size:33px; margin-top:16px; }
  .wk-porte-txt{ font-size:15px; margin-top:14px; }
  .wk-delais{ margin-top:24px; gap:26px; }
  .wk-porte-bas{ gap:16px; font-size:12.5px; }
  .wk-porte-d{ padding:32px 24px 56px; }
  .wk-marque-sous{ padding-left:20px; }
  .wk-grille,.wk-grille-3,.wk-choix{ grid-template-columns:1fr; }
  .wk-titre-page{ font-size:25px; }
  .wk-barre-titre .wk-btn{ margin-left:0; width:100%; }
  .wk-carte-pad{ padding:18px; }
  .wk-etape-num{ font-size:11px; }
  .wk-pied-form{ flex-wrap:wrap; }
  .wk-pied-form .wk-btn{ flex:1; }
}
@media (prefers-reduced-motion:reduce){ .wk *{ transition:none !important; } }

/* --- ajouts pour la version PHP --- */
.wk label.wk-opt{ display:block; cursor:pointer; }
.wk a.wk-onglet{ text-decoration:none; }
.wk a.wk-ligne,.wk a.wk-btn,.wk a.wk-lien{ text-decoration:none; }
.wk a.wk-ligne{ color:inherit; }
.wk-depot input[type=file]{ font-size:14px; }
.wk-filtres .wk-lien{ padding:8px 4px; }

/* --- notifications --- */
.wk-cloche{ position:relative; display:inline-flex; align-items:center; justify-content:center;
  width:38px; height:38px; border-radius:3px; color:#C6D0EA; text-decoration:none;
  border:1.5px solid rgba(255,255,255,.22); transition:background .15s,color .15s; }
.wk-cloche:hover{ background:rgba(255,255,255,.1); color:#fff; }
.wk-cloche.actif{ color:#fff; }
.wk-pastille{ position:absolute; top:-7px; right:-7px; min-width:19px; height:19px; padding:0 5px;
  border-radius:10px; background:var(--hivis); color:var(--bleu-nuit);
  font-size:11.5px; font-weight:700; line-height:19px; text-align:center;
  border:2px solid var(--bleu); }
.wk-visuellement-cache{ position:absolute; width:1px; height:1px; overflow:hidden;
  clip:rect(0 0 0 0); white-space:nowrap; }

.wk-notif{ display:flex; gap:14px; align-items:flex-start; width:100%; text-align:left;
  background:var(--carte); border:1px solid var(--trait); border-radius:3px;
  padding:15px 17px; margin-bottom:9px; text-decoration:none; color:inherit; }
.wk-notif:hover{ border-color:var(--bleu-clair); }
.wk-notif.neuve{ box-shadow:inset 3px 0 0 var(--hivis); background:#FDFCF6; }
.wk-notif-t{ font-weight:600; font-size:15px; }
.wk-notif.neuve .wk-notif-t::after{ content:'nouveau'; display:inline-block; margin-left:9px;
  font-size:11px; font-weight:700; color:var(--ambre); vertical-align:2px; }
.wk-notif-m{ font-size:14px; color:var(--gris); margin-top:4px; line-height:1.5; }
.wk-notif-d{ font-size:12.5px; color:var(--gris-clair); margin-top:5px; }