/* Suivi ARI — identité visuelle autonome (rouge intervention + marine + bande hachurée).
   Jetons et composants extraits des maquettes de référence. Aucune valeur importée d'ailleurs. */
:root{
  --rouge:#C8102E; --rouge-profond:#9E0C22; --rouge-teinte:#FDECEE;
  --marine:#1E2A3E; --encre:#17181B; --acier:#5C6572;
  --trame:#E3E6EB; --canvas:#F6F7F9; --carte:#FFFFFF;
  --succes:#178A45; --succes-t:#E4F5EB;
  --ambre:#B45309; --ambre-t:#FEF3C7;
  --bleu:#1D4ED8; --bleu-t:#DBEAFE;
  --violet:#6D28D9; --violet-t:#EDE9FE;
  --gris-b:#4B5563; --gris-t:#E5E7EB;
}
*{margin:0;padding:0;box-sizing:border-box}
html,body{height:100%}
body{
  font-family:'Inter',system-ui,-apple-system,Segoe UI,Roboto,sans-serif;
  color:var(--encre); background:var(--canvas);
  -webkit-text-size-adjust:100%;
}
button{font-family:inherit;cursor:pointer}
input,textarea{font-family:inherit}
.hidden{display:none !important}

/* Bande d'intervention — signature */
.hazard{
  height:6px;flex:none;
  background:repeating-linear-gradient(-45deg,var(--rouge) 0,var(--rouge) 14px,#fff 14px,#fff 20px);
}

/* Barre d'application */
.appbar{
  background:var(--carte);border-bottom:1px solid var(--trame);
  padding:14px 16px 12px;display:flex;align-items:center;justify-content:space-between;gap:10px;
  position:sticky;top:0;z-index:20;
}
.appbar .name{
  font-family:'Archivo',sans-serif;font-variation-settings:'wdth' 120;
  font-size:17px;font-weight:900;letter-spacing:.06em;text-transform:uppercase;color:var(--marine);
}
.appbar .center{font-size:11.5px;font-weight:600;color:var(--acier)}
.appbar .right{display:flex;align-items:center;gap:8px;flex:none}
.datepill{text-align:center;background:var(--canvas);border:1px solid var(--trame);border-radius:12px;padding:6px 11px}
.datepill .d{font-size:12px;font-weight:800;color:var(--encre);white-space:nowrap}
.datepill .a{font-size:9px;font-weight:700;letter-spacing:.1em;text-transform:uppercase;color:var(--acier)}
.iconbtn{
  width:40px;height:40px;border-radius:12px;flex:none;border:1.5px solid var(--trame);background:#fff;
  display:flex;align-items:center;justify-content:center;
}

/* Conteneur mobile centré (agent + admin mobile) */
.shell{max-width:480px;margin:0 auto;min-height:100%;background:var(--canvas);display:flex;flex-direction:column}
.content{padding:16px;display:flex;flex-direction:column;gap:14px}

/* Cartes & sections */
.card{background:var(--carte);border:1px solid var(--trame);border-radius:18px;padding:15px;display:flex;flex-direction:column;gap:11px}
.card.err{border-color:var(--rouge);box-shadow:0 0 0 2px rgba(200,16,46,.10)}
.sec-lbl{font-size:10.5px;font-weight:800;letter-spacing:.16em;text-transform:uppercase;color:var(--rouge)}
.intro{font-size:12.5px;line-height:1.55;color:var(--acier);background:var(--carte);border:1px solid var(--trame);border-radius:14px;padding:11px 14px}
.intro strong{color:var(--encre)}

/* Champs */
.field{display:flex;flex-direction:column;gap:5px}
.field label{font-size:12px;font-weight:700;color:var(--marine)}
.field label .opt{font-weight:500;color:var(--acier)}
.row2{display:grid;grid-template-columns:1fr 1fr;gap:9px}
.input,.textarea{
  border:1.5px solid var(--trame);border-radius:12px;background:#fff;
  padding:12px 13px;font-size:15px;color:var(--encre);width:100%;min-height:48px;
}
.textarea{min-height:80px;line-height:1.5;resize:vertical}
.input::placeholder,.textarea::placeholder{color:#A6ADB8}
.input:focus,.textarea:focus{outline:none;border-color:var(--marine)}
.input.bad,.textarea.bad{border-color:var(--rouge);border-width:2px;background:var(--rouge-teinte)}
.input:disabled,.textarea:disabled{background:#EFF1F4;color:#8f96a1}
.prefill{display:flex;align-items:center;justify-content:space-between;gap:8px;background:var(--canvas);
  border:1.5px solid var(--trame);border-radius:12px;padding:12px 13px;font-weight:600;min-height:48px}
.prefill .edit{font-size:11.5px;font-weight:700;color:var(--rouge);flex:none;background:none;border:none}
.hint{font-size:11px;color:var(--acier)}
.errmsg{display:flex;align-items:center;gap:5px;font-size:11.5px;font-weight:700;color:var(--rouge-profond)}

/* Chips */
.chips{display:flex;flex-wrap:wrap;gap:8px}
.chip{
  border:1.5px solid var(--trame);background:#fff;border-radius:999px;
  padding:10px 15px;font-size:13.5px;font-weight:600;color:var(--marine);
  display:flex;align-items:center;gap:6px;
}
.chip.on{background:var(--rouge-teinte);border-color:var(--rouge);color:var(--rouge-profond);font-weight:700}
.chip.on::before{content:"✓";font-weight:800}
.chips.bad .chip{border-color:var(--rouge);border-width:2px}

/* Photo */
.photo-add{
  border:2px dashed var(--trame);border-radius:14px;background:var(--canvas);width:100%;
  padding:14px;display:flex;align-items:center;justify-content:center;gap:8px;
  font-size:13px;font-weight:600;color:var(--acier);
}
.photo-thumb{border:1.5px solid var(--trame);border-radius:14px;padding:9px 11px;display:flex;align-items:center;gap:11px;background:#fff}
.photo-thumb .thumb{width:46px;height:46px;border-radius:10px;flex:none;object-fit:cover;background:linear-gradient(135deg,#3A4A63,#1E2A3E)}
.photo-thumb .fn{font-size:12.5px;font-weight:600;color:var(--encre);flex:1;word-break:break-word}
.photo-thumb .fn small{display:block;font-size:10.5px;color:var(--acier);font-weight:500;margin-top:2px}
.photo-thumb .x{flex:none;width:28px;height:28px;border-radius:50%;background:var(--canvas);border:1px solid var(--trame);
  display:flex;align-items:center;justify-content:center;font-size:13px;font-weight:700;color:var(--acier)}

/* Boutons */
.cta{
  width:100%;min-height:54px;border-radius:16px;border:none;
  background:linear-gradient(135deg,var(--rouge),var(--rouge-profond));
  color:#fff;font-size:16px;font-weight:800;
  display:flex;align-items:center;justify-content:center;gap:8px;
  box-shadow:0 10px 24px rgba(200,16,46,.32);
}
.cta:disabled,.cta.dis{background:#D7DAE0;box-shadow:none;color:#8F96A1;cursor:not-allowed}
.cta.busy{background:#B9BEC7;box-shadow:none;color:#fff}
.ghost{
  width:100%;min-height:50px;border-radius:16px;background:#fff;border:1.5px solid var(--trame);
  color:var(--marine);font-size:14.5px;font-weight:700;display:flex;align-items:center;justify-content:center;gap:8px;
}
.spin{width:15px;height:15px;border:2.4px solid rgba(255,255,255,.45);border-top-color:#fff;border-radius:50%;animation:spin .7s linear infinite}
@keyframes spin{to{transform:rotate(360deg)}}
.foot-note{text-align:center;font-size:11px;line-height:1.6;color:var(--acier);padding:0 10px}

/* Bandeaux d'état */
.banner{border-radius:12px;padding:11px 12px;display:flex;gap:9px;align-items:flex-start}
.banner .ic{flex:none;margin-top:1px}
.banner .tx{font-size:12px;line-height:1.5}
.banner .tx b{display:block;font-size:12.5px;font-weight:800;margin-bottom:2px}
.b-inf{background:var(--bleu-t);border:1px solid #3B82F6;color:#1E40AF}
.b-off{background:#FEF3C7;border:1px solid #F0B429;color:#7C4A03}
.b-err{background:var(--rouge-teinte);border:1px solid var(--rouge);color:var(--rouge-profond)}
.b-ok{background:var(--succes-t);border:1px solid var(--succes);color:#0F6B34}
.retry{margin-top:8px;min-height:38px;padding:0 14px;border-radius:9px;background:#fff;border:1.5px solid currentColor;color:inherit;
  display:inline-flex;align-items:center;justify-content:center;gap:6px;font-size:12px;font-weight:800}

/* Suggestion message gestionnaire */
.suggest{background:var(--carte);border:1px solid var(--trame);border-radius:12px;padding:10px 13px;
  display:flex;align-items:center;gap:9px;width:100%;text-align:left}
.suggest .ic{width:30px;height:30px;border-radius:9px;flex:none;background:var(--violet-t);display:flex;align-items:center;justify-content:center;font-size:15px}
.suggest .tx{flex:1;font-size:12px;line-height:1.45;color:var(--acier)}
.suggest .tx b{display:block;color:var(--encre);font-weight:700;font-size:12.5px}
.suggest .go{flex:none;font-size:19px;font-weight:800;color:var(--violet)}

/* Confirmation */
.confirm{padding:36px 20px 30px;display:flex;flex-direction:column;align-items:center;gap:16px}
.check{width:78px;height:78px;border-radius:50%;background:var(--succes-t);border:2px solid var(--succes);display:flex;align-items:center;justify-content:center}
.check.msg{background:var(--violet-t);border-color:var(--violet)}
.confirm h2{font-family:'Archivo',sans-serif;font-variation-settings:'wdth' 114;font-size:23px;font-weight:900;text-transform:uppercase;letter-spacing:.03em;text-align:center}
.confirm .merci{font-size:14px;color:var(--acier);text-align:center;margin-top:-6px}
.recap{width:100%;background:var(--carte);border:1px solid var(--trame);border-radius:18px;padding:6px 16px}
.recap .r{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:12px 0;border-bottom:1px solid var(--trame)}
.recap .r:last-child{border-bottom:none}
.recap .k{font-size:12px;font-weight:600;color:var(--acier)}
.recap .v{font-size:13.5px;font-weight:700;color:var(--encre);text-align:right}
.erratum{font-size:11px;color:var(--acier);text-align:center;line-height:1.6;padding:0 12px}

/* Badges de type & statut */
.b{display:inline-flex;align-items:center;gap:5px;border-radius:999px;padding:4px 11px;font-size:11.5px;font-weight:800;white-space:nowrap}
.b-emprunt{background:var(--ambre-t);color:var(--ambre)}
.b-retour{background:var(--succes-t);color:var(--succes)}
.b-reparation{background:var(--rouge-teinte);color:var(--rouge-profond)}
.b-affectation{background:var(--bleu-t);color:var(--bleu)}
.b-autre{background:var(--gris-t);color:var(--gris-b)}
.b-message{background:var(--violet-t);color:var(--violet)}
.b-correction{background:var(--violet-t);color:var(--violet)}
.st{display:inline-flex;align-items:center;gap:6px;font-size:12px;font-weight:800;white-space:nowrap}
.st .d{width:8px;height:8px;border-radius:50%}
.st-a_traiter{color:var(--rouge-profond)} .st-a_traiter .d{background:var(--rouge)}
.st-traite{color:var(--succes)} .st-traite .d{background:var(--succes)}
.st-corrigee{color:var(--acier)} .st-corrigee .d{background:var(--acier)}

/* Squelette de chargement */
.sk{background:#E7E9EE;border-radius:7px;height:12px}
.sk.t{height:16px;width:60%}
.sk.s{width:40%}
.sk.l{width:85%}
.skcard{background:#fff;border:1px solid var(--trame);border-radius:16px;padding:13px;display:flex;flex-direction:column;gap:8px}

/* Écran vide / récompense */
.empty{padding:40px 20px;display:flex;flex-direction:column;align-items:center;gap:12px;text-align:center}
.empty .ring{width:70px;height:70px;border-radius:50%;background:var(--succes-t);border:2px solid var(--succes);display:flex;align-items:center;justify-content:center}
.empty .ring.neutral{background:#EFF1F4;border-color:var(--trame)}
.empty h3{font-family:'Archivo',sans-serif;font-variation-settings:'wdth' 112;font-size:17px;font-weight:900;text-transform:uppercase;letter-spacing:.03em}
.empty p{font-size:12.5px;color:var(--acier);line-height:1.55;max-width:260px}
.empty .lnk{font-size:12.5px;font-weight:800;color:var(--rouge-profond);background:none;border:none;margin-top:2px}

/* Toast d'annulation (clôture) */
.toast{position:fixed;left:50%;transform:translateX(-50%);bottom:16px;width:min(452px,calc(100% - 24px));
  background:var(--encre);color:#fff;border-radius:12px;padding:12px 14px;z-index:60;
  display:flex;align-items:center;justify-content:space-between;gap:10px;box-shadow:0 10px 26px rgba(0,0,0,.3)}
.toast .t{font-size:12.5px;font-weight:600}
.toast .u{font-size:12.5px;font-weight:900;color:#FF8DA1;flex:none;letter-spacing:.04em;background:none;border:none}