/* =====================================================
   Veille AO — CMA Constructions Métalliques
   Thème sombre bleu nuit, accent bleu CMA #0082A4
   ===================================================== */
@import url('https://fonts.googleapis.com/css2?family=Archivo:wdth,wght@75..100,400..800&family=JetBrains+Mono:wght@500&display=swap');

:root {
  --fond:     #131A2B;   /* bleu nuit */
  --panneau:  #1E2738;   /* cartes */
  --panneau2: #273248;   /* surfaces secondaires */
  --texte:    #E8EDF6;
  --texte2:   #ABB8CC;   /* texte secondaire */
  --muet:     #5E6B80;
  --cma:      #0082A4;   /* bleu logo CMA */
  --rayon: 10px;
}
:root { --ok: #3DA56E; --alerte: #FF7B6B; --attention: #E5B53C; }

* { box-sizing: border-box; }
body {
  margin: 0;
  background: var(--fond);
  color: var(--texte);
  font-family: 'Archivo', system-ui, sans-serif;
  font-size: 16px;
  line-height: 1.5;
}

/* ---------- Bandeau ---------- */
.bandeau {
  display: flex; align-items: center; justify-content: space-between;
  padding: 12px 18px;
  background: var(--panneau);
  border-bottom: 1px solid #2C3850;
  position: sticky; top: 0; z-index: 10;
}
.logo-lien { display: flex; align-items: center; gap: 14px; text-decoration: none; }
.bandeau-logo { height: 38px; width: auto; display: block; }
.bandeau-titre {
  color: var(--texte); font-weight: 800; letter-spacing: .05em;
  font-stretch: 85%; text-transform: uppercase; font-size: 1.05rem;
}
.retour { color: var(--texte2); text-decoration: none; font-weight: 600; }
.logo-lien:hover .retour, .retour:hover { color: var(--cma); }

/* ---------- Boutons ---------- */
.btn {
  display: inline-block; border: 0; cursor: pointer;
  padding: 10px 16px; border-radius: 8px;
  background: var(--panneau2); color: var(--texte);
  font: inherit; font-weight: 700; text-decoration: none;
}
.btn-accent { background: var(--cma); color: #fff; }
.btn:hover { filter: brightness(1.15); }
.btn:focus-visible { outline: 3px solid var(--cma); outline-offset: 2px; }

/* ---------- Filtres ---------- */
.filtres {
  display: flex; gap: 10px; flex-wrap: wrap;
  padding: 14px 18px;
  background: var(--fond);
  border-bottom: 1px solid #2C3850;
}
.filtres select, .filtres input {
  padding: 9px 12px; border: 1px solid #2C3850;
  border-radius: 8px; font: inherit;
  background: var(--panneau); color: var(--texte);
  min-width: 150px;
}
.filtres select:focus-visible, .filtres input:focus-visible { outline: 2px solid var(--cma); }

/* ---------- Liste des AO ---------- */
.liste { padding: 18px; max-width: 980px; margin: 0 auto; display: grid; gap: 14px; }
.vide { text-align: center; color: var(--muet); padding: 60px 20px; }

.carte {
  display: block; background: var(--panneau);
  border-radius: var(--rayon);
  border-left: 5px solid #2C3850;
  padding: 14px 16px 10px;
  text-decoration: none; color: inherit;
  transition: transform .08s ease, border-color .08s ease;
}
.carte:hover { transform: translateY(-2px); border-left-color: var(--cma); }
.carte h2 { margin: 8px 0 6px; font-size: 1.02rem; font-weight: 600; line-height: 1.35; color: var(--texte); }

.carte-haut { display: flex; justify-content: space-between; align-items: center; gap: 8px; flex-wrap: wrap; }
.carte-meta {
  display: flex; flex-wrap: wrap; gap: 6px 16px;
  font-size: .85rem; color: var(--texte2);
}
.limite { color: var(--alerte); font-weight: 700; }

/* Étiquettes domaine */
.tag {
  font-family: 'JetBrains Mono', monospace; font-size: .72rem;
  letter-spacing: .04em; text-transform: uppercase;
  padding: 3px 8px; border-radius: 4px;
  background: var(--panneau2); color: var(--texte);
}
.tag-charpente          { background: #7A4226; color: #FFD9C4; }
.tag-bardage_couverture { background: #2D5468; color: #C7E4F2; }
.tag-facade             { background: #2F5B43; color: #C9EDD8; }
.tag-serrurerie         { background: #4E4070; color: #DCD2F4; }
.tag-escalier_gc        { background: #6B5A2C; color: #F2E4BC; }

/* Statuts */
.statut {
  font-size: .78rem; font-weight: 700; text-transform: uppercase;
  letter-spacing: .05em; padding: 3px 10px; border-radius: 99px;
  background: var(--panneau2); color: var(--texte2);
}
.statut-nouveau   { background: var(--cma); color: #fff; }
.statut-en_cours  { background: var(--attention); color: #1A1404; }
.statut-soumis    { background: #3D5A8C; color: #fff; }
.statut-gagne     { background: var(--ok); color: #fff; }
.statut-perdu, .statut-abandonne { background: #39435A; color: var(--texte2); }

/* Jauge de score */
.jauge { height: 5px; background: var(--panneau2); border-radius: 99px; margin-top: 10px; overflow: hidden; }
.jauge-barre { height: 100%; background: linear-gradient(90deg, #2D5468, var(--cma)); }

/* ---------- Fiche affaire ---------- */
.fiche { max-width: 880px; margin: 0 auto; padding: 18px; }
.objet { font-size: 1.25rem; line-height: 1.4; margin: 10px 0 16px; }
.flash {
  background: var(--ok); color: #fff; padding: 10px 14px;
  border-radius: 8px; margin-bottom: 14px; font-weight: 600;
}
.infos {
  display: grid; grid-template-columns: max-content 1fr; gap: 6px 18px;
  background: var(--panneau); padding: 14px 16px; border-radius: var(--rayon);
  margin: 0 0 18px;
}
.infos dt { font-weight: 700; color: var(--muet); font-size: .8rem; text-transform: uppercase; letter-spacing: .06em; }
.infos dd { margin: 0; color: var(--texte); }
.infos a { color: var(--cma); font-weight: 600; }

.bloc {
  background: var(--panneau); border-radius: var(--rayon);
  padding: 16px; margin-bottom: 18px;
  border-top: 3px solid var(--cma);
}
.bloc h2 {
  margin: 0 0 12px; font-size: .95rem; font-stretch: 85%;
  letter-spacing: .07em; text-transform: uppercase; color: var(--texte2);
}

.form-suivi { display: grid; gap: 12px; }
.form-suivi label { display: grid; gap: 4px; font-weight: 600; font-size: .85rem; color: var(--texte2); }
.form-suivi input, .form-suivi select, .form-suivi textarea {
  padding: 10px 13px; border: 0; border-radius: 8px;
  font: inherit; background: #EDF1FA; color: #131A2B; width: 100%;
}
.form-suivi input:focus-visible, .form-suivi select:focus-visible, .form-suivi textarea:focus-visible { outline: 3px solid var(--cma); }
.form-upload { display: grid; gap: 10px; margin-bottom: 12px; }
.form-upload input[type=file] { color: var(--texte2); }
.aide { font-size: .83rem; color: var(--muet); margin: 4px 0 0; }

.docs { list-style: none; margin: 8px 0 0; padding: 0; display: grid; gap: 6px; }
.docs li { display: flex; align-items: center; gap: 10px; padding: 8px 10px; background: var(--panneau2); border-radius: 6px; }
.docs a { color: var(--texte); font-weight: 600; word-break: break-all; }
.docs a:hover { color: var(--cma); }
.doc-type { font-family: 'JetBrains Mono', monospace; font-size: .7rem; background: var(--cma); color: #fff; padding: 2px 6px; border-radius: 3px; }
.doc-taille { margin-left: auto; font-size: .8rem; color: var(--muet); white-space: nowrap; }

.synthese { margin-top: 16px; border: 1px solid #2C3850; border-radius: var(--rayon); overflow: hidden; }
.synthese header {
  background: var(--panneau2); color: var(--texte2); padding: 8px 12px;
  font-size: .78rem; font-family: 'JetBrains Mono', monospace;
}
.synthese-texte { padding: 14px 16px; font-size: .95rem; background: var(--panneau); }

/* ---------- Connexion (maquette CMA) ---------- */
.login-page { display: grid; place-items: center; min-height: 100vh; background: var(--fond); }
.login-box {
  background: var(--panneau);
  padding: 42px 38px 28px;
  border-radius: 14px;
  display: grid; gap: 10px;
  width: min(92vw, 380px);
  box-shadow: 0 10px 40px rgba(0,0,0,.45);
}
.login-logo { width: 170px; margin: 0 auto 6px; display: block; }
.sous-titre { margin: 0 0 16px; text-align: center; color: var(--texte2); font-size: .9rem; }
.login-label {
  color: #8E9BB0; font-size: .72rem; font-weight: 700;
  letter-spacing: .09em; text-transform: uppercase; margin-top: 6px;
}
.login-box input {
  padding: 12px 14px; border: 0; border-radius: 8px;
  font: inherit; background: #EDF1FA; color: #131A2B;
}
.login-box input:focus-visible { outline: 3px solid var(--cma); }
.login-box button {
  margin-top: 16px; padding: 13px; border: 0; border-radius: 8px;
  background: var(--cma); color: #fff; font: inherit; font-weight: 800;
  letter-spacing: .08em; text-transform: uppercase; cursor: pointer;
}
.login-box button:hover { filter: brightness(1.12); }
.login-pied { margin: 14px 0 0; text-align: center; color: var(--muet); font-size: .78rem; }
.err { color: var(--alerte); margin: 0; text-align: center; font-weight: 600; }

/* ---------- Mobile ---------- */
@media (max-width: 640px) {
  .filtres select, .filtres input { min-width: 0; flex: 1 1 45%; }
  .infos { grid-template-columns: 1fr; gap: 2px; }
  .infos dt { margin-top: 8px; }
  .bandeau-logo { height: 32px; }
}
@media (prefers-reduced-motion: reduce) {
  .carte { transition: none; }
}